commit 0d5741c8d79bb854051128ff32559824a462f955
Author: yxh <yxh1103@qq.com>
Date:   Fri Jan 20 10:58:15 2023 +0800

    gfast-v3.2.1

diff --git a/.env b/.env
new file mode 100644
index 0000000..dacb1a5
--- /dev/null
+++ b/.env
@@ -0,0 +1,8 @@
+# port 端口号
+VITE_PORT = 8888
+
+# open 运行 npm run dev 时自动打开浏览器
+VITE_OPEN = false
+
+# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
+VITE_PUBLIC_PATH = /vue-next-admin-preview/
\ No newline at end of file
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..98e13a0
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,5 @@
+# 本地环境
+ENV = 'development'
+
+# 本地环境接口地址
+VITE_API_URL = 'http://localhost:8808/'
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..358caaa
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,8 @@
+# 线上环境
+ENV = 'production'
+
+# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
+VITE_PUBLIC_PATH = '/sys/'
+
+# 线上环境接口地址
+VITE_API_URL = '/'
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..cfc877d
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,18 @@
+
+*.sh
+node_modules
+lib
+*.md
+*.scss
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+mock
+public
+bin
+build
+config
+index.html
+src/assets
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..732bfbe
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,63 @@
+module.exports = {
+	root: true,
+	env: {
+		browser: true,
+		es2021: true,
+		node: true,
+	},
+	parser: 'vue-eslint-parser',
+	parserOptions: {
+		ecmaVersion: 12,
+		parser: '@typescript-eslint/parser',
+		sourceType: 'module',
+	},
+	extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
+	plugins: ['vue', '@typescript-eslint'],
+	rules: {
+		// http://eslint.cn/docs/rules/
+		// https://eslint.vuejs.org/rules/
+		'@typescript-eslint/ban-ts-ignore': 'off',
+		'@typescript-eslint/explicit-function-return-type': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
+		'@typescript-eslint/no-var-requires': 'off',
+		'@typescript-eslint/no-empty-function': 'off',
+		'@typescript-eslint/no-use-before-define': 'off',
+		'@typescript-eslint/ban-ts-comment': 'off',
+		'@typescript-eslint/ban-types': 'off',
+		'@typescript-eslint/no-non-null-assertion': 'off',
+		'@typescript-eslint/explicit-module-boundary-types': 'off',
+		'vue/custom-event-name-casing': 'off',
+		'vue/attributes-order': 'off',
+		'vue/one-component-per-file': 'off',
+		'vue/html-closing-bracket-newline': 'off',
+		'vue/max-attributes-per-line': 'off',
+		'vue/multiline-html-element-content-newline': 'off',
+		'vue/singleline-html-element-content-newline': 'off',
+		'vue/attribute-hyphenation': 'off',
+		'vue/html-self-closing': 'off',
+		'vue/no-multiple-template-root': 'off',
+		'vue/require-default-prop': 'off',
+		'vue/no-v-model-argument': 'off',
+		'vue/no-arrow-functions-in-watch': 'off',
+		'vue/no-template-key': 'off',
+		'vue/no-v-html': 'off',
+		'vue/comment-directive': 'off',
+		'vue/no-parsing-error': 'off',
+		'vue/no-deprecated-v-on-native-modifier': 'off',
+		'vue/multi-word-component-names': 'off',
+		'no-useless-escape': 'off',
+		'no-sparse-arrays': 'off',
+		'no-prototype-builtins': 'off',
+		'no-constant-condition': 'off',
+		'no-use-before-define': 'off',
+		'no-restricted-globals': 'off',
+		'no-restricted-syntax': 'off',
+		'generator-star-spacing': 'off',
+		'no-unreachable': 'off',
+		'no-multiple-template-root': 'off',
+		'no-unused-vars': 'error',
+		'no-v-model-argument': 'off',
+		'no-case-declarations': 'off',
+		'no-console': 'error',
+	},
+};
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..403adbc
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..cff490a
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,39 @@
+module.exports = {
+	// 一行最多多少个字符
+	printWidth: 150,
+	// 指定每个缩进级别的空格数
+	tabWidth: 2,
+	// 使用制表符而不是空格缩进行
+	useTabs: true,
+	// 在语句末尾打印分号
+	semi: true,
+	// 使用单引号而不是双引号
+	singleQuote: true,
+	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+	quoteProps: 'as-needed',
+	// 在JSX中使用单引号而不是双引号
+	jsxSingleQuote: false,
+	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
+	trailingComma: 'es5',
+	// 在对象文字中的括号之间打印空格
+	bracketSpacing: true,
+	// jsx 标签的反尖括号需要换行
+	jsxBracketSameLine: false,
+	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
+	arrowParens: 'always',
+	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+	rangeStart: 0,
+	rangeEnd: Infinity,
+	// 指定要使用的解析器，不需要写文件开头的 @prettier
+	requirePragma: false,
+	// 不需要自动在文件开头插入 @prettier
+	insertPragma: false,
+	// 使用默认的折行标准 always\never\preserve
+	proseWrap: 'preserve',
+	// 指定HTML文件的全局空格敏感度 css\strict\ignore
+	htmlWhitespaceSensitivity: 'css',
+	// Vue文件脚本和样式标签缩进
+	vueIndentScriptAndStyle: false,
+	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+	endOfLine: 'lf',
+};
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..0c212b2
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,367 @@
+# <a href="https://gitee.com/lyt-top/vue-next-admin" target="_blank">vue-next-admin 更新日志</a>
+
+🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
+
+## 2.2.0
+
+`2022.07.10`
+
+⚡⚡⚡ [/sec/stores/userInfo.ts](https://gitee.com/lyt-top/vue-next-admin/blob/master/src/stores/userInfo.ts) 下添加了 `getApiUserInfo` 接口模拟数据 `setTimeout` 为 3 秒
+
+- 🌟 更新 依赖更新最新版本
+- 🐞 修复 [主界面重新授权按钮点击卡死不跳转登录界面#I5C3JS](https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS)，感谢[@Hero-Typ](https://gitee.com/tian_yu_peng)
+- 🐞 修复 编译警告[#I5CVSB](https://gitee.com/lyt-top/vue-next-admin/issues/I5CVSB)，全局替换成 `:deep(attr)`，感谢[@Linvas](https://gitee.com/linvas)。参考文档：[vue3 sfc-style](https://v3.cn.vuejs.org/api/sfc-style.html#style-scoped)。`node_modules\print-js\dist\print.js` 需 `print-js` 作者适配或去除 `package.json` 中的 `"print-js": "^1.6.0"`
+- 🐞 修复 [vue-next-admin-template-js 版本前端控制路由：userInfo.js 请求用户信息接口报错，加载不到路由 可以写个定时器模拟一下接口 一样的报错#I5F1HP](https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP)，感谢[@白开水](https://gitee.com/libin951223)
+
+## 2.1.1
+
+`2022.05.27`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 深色模式下，`<el-button text></el-button>` 时，`:active` 样式
+- 🎯 优化 [页面缓存在刷新之后失效 #I58U75](https://gitee.com/lyt-top/vue-next-admin/issues/I58U75))，感谢[@ls0428](https://gitee.com/ls0428)
+- 🎯 优化 [SvgIcon 对下载的 Svg 图像设置颜色无效 #I59ND0](https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0))，感谢[@elus_z](https://gitee.com/elus_z)
+- 🎯 优化 `/src/utils/toolsValidate.ts` 工具类
+- 🐞 修复 [布局切换，TagsView 显示的 tab 会多一个出来 #I58WGM](https://gitee.com/lyt-top/vue-next-admin/issues/I58WGM)，感谢[@lg_boy](https://gitee.com/lg_boy)
+- 🐞 修复 [如果设置顶部面包屑导航开启图标 isBreadcrumbIcon=true 后，样式有点问题 如果不开启就是正常的 #I58VB8](https://gitee.com/lyt-top/vue-next-admin/issues/I58VB8)
+- 🐞 修复 地址栏路由地址输入错误时，返回首页后，再次输入路由地址错误时，不跳转 404 问题
+- 🐞 修复 [2.1.0 版本的图标选择组件多次点击后功能失效 #I590TH](https://gitee.com/lyt-top/vue-next-admin/issues/I590TH)，感谢[@quber](https://gitee.com/quber)
+
+## 2.1.0
+
+`2022.04.18`
+
+⚡⚡⚡ 此版本为破环性更新，优化内容如下：（谨慎更新！谨慎更新！！谨慎更新！！！）。因为 `vuex` 替换成 `pinia`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 部分界面图片不显示问题（更换 gitee 在线图片地址源）
+- 🎯 优化 各界面方法引入与逻辑之间添加一行空行，方便区分内容
+- 🎯 优化 图标选择器 [#I4YAHB](https://gitee.com/lyt-top/vue-next-admin/issues/I4YAHB)，感谢[@真有你的](https://gitee.com/sunliusen)
+- 🎯 优化 图标选择器 icon type 类型为 all 时，类型 ali、ele、awe 回显问题
+- 🎯 优化 去掉开发环境 i18n 控制台警告，页面代码：[i18n/index.ts](https://gitee.com/lyt-top/vue-next-admin/blob/master/src/i18n/index.ts)
+- 🎯 优化 `NextLoading.start()` 方法，防止第一次进入界面时出现短暂空白
+- 🎯 优化 地址栏有参数退出登录，再次登录不跳之前界面问题 `src/layout/navBars/breadcrumb/user.vue`
+- 🎯 优化 `SvgIcon` 组件，防止 `开启 Tagsview 图标` 时，`tagsView 右键菜单关闭` 报错问题，工作流不可连线、全屏时关闭按钮消失问题
+- 🎯 优化 [如果 url 中有中文等特殊字符，第一次切换该 tab 时 keep-alive 失效#I55JS7](https://gitee.com/lyt-top/vue-next-admin/issues/I55JS7),感谢[yuyong1566](https://gitee.com/yuyong1566)
+- 🎯 优化 [wangEditor](https://www.wangeditor.com/) 更新到 v5，[vue3 版本线上示例中 wangeditor 富文本编辑器 demo 实例,无法换行#I5565B](https://gitee.com/lyt-top/vue-next-admin/issues/I5565B)，感谢@[jenchih](https://gitee.com/jenchih)
+- 🎯 优化 [在关闭 tagview 时，高度刷新时会会变化，出现滚动条](https://gitee.com/lyt-top/vue-next-admin/issues/I55FHM)，感谢[张松](https://gitee.com/zs310071113)
+- 🎯 优化 [路由参数](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)演示
+- 🎉 新增 [vuex](https://vuex.vuejs.org/) 替换成 [pinia](https://pinia.vuejs.org/getting-started.html)
+- 🎉 新增 tagsView 支持自定义 tagsView 名称（文章详情时有用），前往体验：[路由参数/普通路由](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)。新增 tagsView 支持自定义名称国际化，感谢[@q7but](https://gitee.com/q7but)、[!22 add 添加自定义 tagVIewName 拓展,支持国际化](https://gitee.com/lyt-top/vue-next-admin/pulls/22/files)、感谢[@tony_tong_xin](https://gitee.com/tony_tong_xin)
+- 🐞 修复 适配 `"element-plus": "^2.1.9"，2.2.0` 版本
+- 🐞 修复 [导航栏横向布局后，一级菜单显示问题#I4Z3M3](https://gitee.com/lyt-top/vue-next-admin/issues/I4Z3M3)
+- 🐞 修复 横向布局三级及以上导航菜单高亮、导航高度不统一问题
+- 🐞 修复 分栏模式下,选中的菜单是 primary 样式,鼠标移入字也变成 primary 色了，感谢群友@孤夜-流殇
+- 🐞 修复 [vuex 里面改了颜色 但是不生效 #I4WFMA](https://gitee.com/lyt-top/vue-next-admin/issues/I4WFMA)
+- 🐞 修复 全局主题 primary 清空颜色后报错，[#I4X0LG](https://gitee.com/lyt-top/vue-next-admin/issues/I4X0LG)，感谢[面向 BUG 编程](https://gitee.com/fhtfy)
+- 🐞 修复 [.eslintrc.js 文件 rules 标签名错误 #I53IPK](https://gitee.com/lyt-top/vue-next-admin/issues/I53IPK)，感谢[yuyong1566](https://gitee.com/yuyong1566)
+- 🐞 修复 `开启 Tagsview 图标` 时，`tagsView 右键菜单关闭` 报错问题
+- 🐞 修复 `router.push` 路径找不到时报错问题，`404、401 界面` 已移入到 `main` 主布局里（之前全屏）
+- 🐞 修复 [全局修改组件大小失效了](https://gitee.com/lyt-top/vue-next-admin/issues/I551RP)，感谢[lg_boy](https://gitee.com/lg_boy)
+- 🐞 修复 [修改一下配置时，需要每次都清理 `window.localStorage` 浏览器永久缓存，配置才会生效，问题解决#I567R1](https://gitee.com/lyt-top/vue-next-admin/issues/I567R1),感谢[@lanbao123](https://gitee.com/lanbao123)
+- 🐞 修复 [标记为需要缓存的 tab 页后，再次从左侧菜单打开，还是显示被缓存的页面内容#I4UY3G](https://gitee.com/lyt-top/vue-next-admin/issues/I4UY3G)，感谢@axcc1234、特别感谢群友@华仔
+- 🌈 重构 路由（`/src/router/index.ts`）解决 No match found for location with path "xxx"(前端控制，后端控制未解决) 问题
+
+## 2.0.2
+
+`2022.03.04`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 Alert 提示添加边框
+- 🎯 优化 功能 / 数字滚动 演示界面
+- 🐞 修复 全局主题按钮颜色 :active 问题
+- 🐞 修复 Dropdown 下拉菜单样式问题
+- 🐞 修复 SvgIcon 图标组件动态切换时报警告问题，[SvgIcon 改变 name 时可能导致图像不显示](https://gitee.com/lyt-top/vue-next-admin/issues/I4VGE0)，感谢@axcc1234
+
+## 2.0.1
+
+`2022.02.25`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 svgIcon 图标组件
+- 🎯 优化 vite.config.ts 打包，感谢群友@YourObjec
+- 🐞 修复 tagViews 开启图标不显示问题（风格 5），感谢群友@坏人
+- 🐞 修复 [Element Plus 1.2.0-beta.6 以后的版本 el-table 在移动端无法左右滑动](https://gitee.com/lyt-top/vue-next-admin/issues/I4UPTP)，感谢@YGDada
+
+## 2.0.0
+
+`2022.02.21`
+
+⚡⚡⚡ 此版本为破环性更新，优化内容如下：（谨慎更新！谨慎更新！！谨慎更新！！！）。演示界面建议直接覆盖文件。如需使用之前版本，请前往[gitee 发行版](https://gitee.com/lyt-top/vue-next-admin/releases) 进行对应版本下载。基础版会基于 `master` 分支进行修改
+
+- 🌟 更新 依赖更新最新版本
+- 🌟 更新 登录页、首页
+- 💔 移除 vue-web-screen-shot
+- 💔 移除 城市多级联动，完整 json 数据请去 [vue-next-admin-images/menu](https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu) 仓库查看
+- 💔 移除 功能/echartsTree 树图
+- 💔 移除 其它设置/Tagsview 风格 2、Tagsview 风格 3
+- 💔 移除 功能/验证器
+- 🚧 调整 src/api 编写方式
+- 🚧 调整 自定义封装公用组件演示，更好的维护
+- 🎉 新增 Volar 支持，vs code 配置参考 [Vue Language Features (Volar)](https://lyt-top.gitee.io/vue-next-admin-doc-preview/home/vscode/)
+- 🎉 新增 `SvgIcon` 支持本地 svg 图标使用
+- 🎉 新增 表单表格验证演示
+- 🎯 优化 全局主题（移除 success、info、warning、danger）
+- 🎯 优化 工作流（开源）
+- 🎯 优化 element plus svg 图标，`elementXXX` 改成 `ele-XXX`
+- 🌈 重构 深色模式
+- 🌹 合并 [处理 parent 的 h100 由于外层有 min-height 导致失效的问题](https://gitee.com/lyt-top/vue-next-admin/pulls/20)，感谢@MaxNull、@21030442-mao
+- 🐞 修复 element plus 升级 `^1.3.0-beta.5` 后 组件 size 大小问题（大改：涉及布局、演示界面）
+- 🐞 修复 vs code 使用 Vue Language Features (Volar) 插件 代码报红问题（可以把公用的 ts 类型定义封装起来公用）
+
+## 1.2.2
+
+`2021.12.21`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 iframes 滚动条问题
+- 🎯 优化 部署后每次都要强制刷新清浏览器缓存问题
+- 🎉 新增 工具类百分比验证演示
+- 🐞 修复 [tag-view 标签右键会超出浏览器 #I4KN78](https://gitee.com/lyt-top/vue-next-admin/issues/I4KN78)
+
+## 1.2.1
+
+`2021.12.12`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 cropper 裁剪时卡顿问题 [#I4M2VQ](https://gitee.com/lyt-top/vue-next-admin/issues/I4M2VQ)
+- 🎯 优化 Wangeditor 富文本编辑器的问题 [#I4LPC1](https://gitee.com/lyt-top/vue-next-admin/issues/I4LPC1)、[#I4LM7I](https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I)
+- 🐞 修复 浏览器标题问题
+- 🐞 修复 element plus svg 图标引入
+- 🐞 修复 工作流不可以拖线连接问题
+
+## 1.2.0
+
+`2021.11.28`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 深色模式
+- 🎯 优化 `/@/utils` 文件夹，合并删除单一内容
+- 🎯 优化 系统设置：菜单管理（新增、修改）、角色管理（新增菜单权限）、用户管理、部门管理、字典管理
+- 🎯 优化 登录界面逻辑、权限管理逻辑
+- 🎯 优化 同步 [vue-next-admin-images](https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu) 后端控制菜单模拟数据
+- 🎉 新增 适配 Font Icon 向 SVG Icon 迁移（改动大，"element-plus": "^1.2.0-beta.4" 谨慎更新）
+- 🐞 修复 热更新问题，感谢@甜蜜蜜
+- 🐞 修复 页面/element 字体图标演示
+- 🐞 修复 功能/图标选择器演示，新增高级功能 [issues #I4GJXQ](https://gitee.com/lyt-top/vue-next-admin/issues/I4GJXQ)
+
+## 1.1.2
+
+`2021.10.17`
+
+- 🌟 更新 依赖更新最新版本
+- 🐞 修复 开启全屏时，刷新界面被还原成未全屏的状态
+- 🎯 优化 tagsView 右键菜单关闭逻辑
+- 🎯 优化 wangeditor 富文本编辑器（增加双向绑定）
+- 🎉 新增 工作流（暂不开源）
+- 🎉 新增 基础版 ts（不带国际化），切换 `vue-next-admin-template` 分支
+
+## 1.1.1
+
+`2021.09.25`
+
+- 🌟 更新 依赖更新最新版本（`"element-plus": "^1.1.0-beta.13"` 版本运行错误，`^1.1.0-beta.16`修复横向菜单卡死问题）
+- 🐞 修复 Dialog 弹窗位置错误、Drawer 抽屉内边距、el-menu 菜单收起时背景色问题
+- 🎯 优化 锁屏界面自动锁屏(s/秒)必须设置至少 1 秒
+- 🎉 新增 分栏布局，鼠标移入当前项时，显示当前项菜单内容
+- 🎉 新增 工作流（未完成）
+
+## 1.1.0
+
+`2021.09.10`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 小屏模式下登录页二维码遮挡标题问题
+- 🎉 新增 图片验证器
+- 🎉 新增 动态复杂表单
+- 🎉 新增 工作流（未完成）
+- 🎉 新增 深色主题(伪深色，样式变动大，谨慎更新)
+
+## 1.0.18
+
+`2021.08.29`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 权限组件去掉顶级 div（`/src/components/auth`）
+- 🎉 新增 布局配置添加恢复默认按钮
+- 🐞 修复 升级 <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">element plus 1.1.0-beta.7</a>后项目无法启动、el-menu 菜单
+- 🐞 修复 表格固定列时的层级、设置了相对定位时，遮挡左侧导航菜单问题
+
+## 1.0.17
+
+`2021.08.22`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 去除设置布局切换，重置主题样式（initSetLayoutChange），切换布局需手动设置样式，设置的样式自动同步各布局
+- 🎯 优化 Dropdown 下拉菜单用户账号靠边时换行问题
+- 🎯 优化 左侧导航菜单，共用菜单树，防止 `布局配置` 设置 `菜单 / 顶栏` 时，样式丢失等问题
+- 🐞 修复 固定 header 后没有回到顶部的 bug，拉取项目后运行不起来的 bug。<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/14" target="_blank">!14</a>，感谢<a href="https://gitee.com/wjs0509" target="_blank">@wjs0509</a>
+- 🐞 修复 tagView 右键全屏后，浏览器窗口大小发生任何变化都会导致左边菜单显示出来，并且可点击打开对应页面。<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I46E6T" target="_blank">I46E6T</a>
+- 🐞 修复 默认设置 `菜单 / 顶栏` 样式不生效问题（/@/src/store/modules/themeConfig.ts）
+
+## 1.0.16
+
+`2021.08.14`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 菜单高亮（详情且详情设置了 meta.isHide 时，顶级菜单高亮），感谢群友@YourObject
+- 🎯 优化 详情路径写法：如父级（/pages/filtering），那么详情为（/pages/filtering/details?id=1）。这样写可实现（详情时，父级菜单高亮），否则写成（/pages/filteringDetails?id=1）顶级菜单将不会高亮。可参考：`页面/过滤筛选组件`，点击当前图片进行测试
+- 🎯 优化 tagsView 右键菜单全屏时，打开的界面高度问题
+- 🎯 优化 图表批量 resize 问题
+- 🐞 修复 菜单收起时（设置全局主题：primary 且有二级菜单时），文字高亮颜色不对
+- 🐞 修复 国际化 <a href="https://gitee.com/lyt-top/vue-next-admin/issues/I43NPE" target="_blank">#I43NPE</a>。可参考：`页面/过滤筛选组件`，点击顶部语言切换，进行底部分页国际化查看
+
+## 1.0.15
+
+`2021.08.06`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 tagsView 右键菜单点击时的字段名（id 已修改成 contextMenuClickId）与路由中返回的 id 名冲突问题，感谢群友@伯牙已遇钟子期
+- 🎉 新增 多个 form 表单验证界面演示
+
+## 1.0.14
+
+`2021.07.29`
+
+- 🌟 更新 依赖更新最新版本（vue、vuex、vue-router）,出现问题，请手动降级。版本查看：<a href="https://www.npmjs.com/" target="_blank">vnpm</a>
+- 🎯 优化 数据可视化图表演示加载卡顿问题、优化有图表的演示界面
+- 🎯 优化 路由参数演示界面
+- 🎯 优化 tagsView 操作演示界面，由于存在相同路由多标签，必须要传全部参数值（query 或者 params）
+- 🎉 新增 开启 TagsView 共用，开启时：（多个路由菜单共用一个详情组件（参数为后点击的覆盖前面点击的），tagsView 中只会出现一个（不支持同时出现多个 tagsView 标签））。关闭时：（多个路由菜单共用一个详情组件，参数不同，会同时出现多个 tagsView 标签）
+- 🐞 修复 tagsView 共用（单标签）时，右键菜单功能点击，参数不对的问题（第 2n+个参数未覆盖第一个参数值）
+- 🐞 修复 多 tagsView 标签（参数不同）、单个 tagsView 标签公用（参数不同）所带来的刷新功能、横向自动滚动等问题
+- 🐞 修复 处理全屏若干问题，<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/12" target="_blank">pr!12</a>，感谢群友@另一个前端
+
+## 1.0.13
+
+`2021.07.25`
+
+- 🌟 更新 依赖更新最新版本
+- 🎉 新增 数据可视化演示界面（/visualizingDemo1、/visualizingDemo2）
+- 🎉 新增 登录页扫码登录
+
+## 1.0.12
+
+`2021.07.16`
+
+- 🌟 更新 依赖更新最新版本
+- 🎉 新增 数据可视化演示空界面（待完善）
+- 🎯 优化 tagsView 动态路由（xxx/:id/:name）时的右键菜单刷新、关闭其它时参数丢失问题（2021.07.15 优化）
+- 🐞 修复 路由带参数时，复制路径到登录页，跳转后参数消失的问题
+- 🐞 修复 设置多个外链，点击后，页面内容停留在上一个内容（内容未改变）、国际化处理、打开新窗口 sessionStorage 共享等
+
+## 1.0.11
+
+`2021.07.14`
+
+- 🌟 更新 依赖更新最新版本
+- 🎉 新增 路由参数、图片懒加载界面演示
+- ⚠️ 警告 Form 表单 `binding value must be a string or number`，解决：加上 `label-position="top"` 不报警告（等待官方修复）
+- 🎯 优化 锁屏界面动画效果、首页图表显示
+- 🎯 优化 tagsView 右键菜单 `关闭` 功能逻辑
+- 🐞 修复 开启 TagsView 拖拽报错及小于 `1000px` 时自动设置禁止拖拽（<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI" target="_blank">#I3ZRRI</a>）
+- 🐞 修复 `iframe 内嵌、外链` 高度问题，使用 computed 进行计算
+- 🐞 修复 默认布局开启 `侧边栏 Logo` 与关闭 `菜单水平折叠`，切换到横向布局时，菜单看不见的问题
+- 🐞 修复 切换不同布局时，再去开启 `经典布局分割菜单` 功能不生效问题
+- 🐞 修复 浏览器窗口标题中/英文切换不实时生效的问题
+- 🐞 修复 切换布局时，某些功能不可以使用。部分界面不需要取消事件监听(proxy.mittBus.off('xxx'))
+- 🐞 修复 动态路由带参数，router-link 跳转问题（<a href="hhttps://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G" target="_blank">#I3YX6G</a>）
+- 🐞 修复 横向菜单有二级菜单时，点击子级菜单不高亮问题
+- 🐞 修复 功能 tagsView 操作演示不生效
+
+## 1.0.10
+
+`2021.07.07`
+
+- 🌟 更新 依赖更新最新版本（字体图标无问题）
+- 🎯 优化 内嵌 iframe、外链，解决 tagsView 刷新问题
+
+## 1.0.9
+
+`2021.07.02`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 图标选择器设置宽度、v-model 等问题
+- 🎯 优化 滚动通知栏在手机上的体验
+- 🎯 优化 系统管理/新增菜单（编辑菜单），使用 `图标选择器` 进行模拟
+- 🎯 优化 字体图标(自动载入) 逻辑
+- 🐞 修复 screenfull 全屏时，按键盘 esc 键图标不改变问题，感谢群友@伯牙已遇钟子期
+
+## 1.0.8
+
+`2021.06.29`
+
+- 🌟 更新 依赖更新最新版本
+- 🎉 新增 表单中英文切换演示
+- 🎯 优化 登录页查看密码 icon 图标
+- 🎯 优化 图标选择器
+- 🎯 优化 拖动指令
+- 🐞 修复 form 表单在页面小于 576px 时的排版问题
+
+## 1.0.7
+
+`2021.06.24`
+
+- 🌟 更新 依赖更新最新版本
+- 🎉 新增 拖动指令及其演示界面
+- 🎯 优化 锁屏界面，解锁提示
+- 🎯 优化 登录页在手机上显示的效果
+
+## 1.0.6
+
+`2021.06.23`
+
+- 🎯 优化 去掉内嵌 iframe 内边距（padding）
+- 🎯 优化 城市多级联动组件
+- 🎯 优化 Tree 树形控件改成表格组件
+- 🐞 修复 Cascader 级联选择器高度问题
+
+## 1.0.5
+
+`2021.06.22`
+
+- 🌟 更新 vite 降级为@vite2.3.7，降级方法 `cnpm install vite@2.3.7`，防止 element plus 字体图标消失
+- 🐞 修复 开启后端控制路由（isRequestRoutes = true）时，内嵌 iframe、外链不可使用的问题
+
+## 1.0.4
+
+`2021.06.19`
+
+- 🌟 更新 依赖更新最新版本（"vite": "^2.3.7"）热更新无问题
+- 🎉 新增 深克隆工具，方便开发，感谢<a href="https://gitee.com/kangert" target="_blank">@kangert</a>(<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/6" target="_blank">#6</a>)
+- 🎯 优化 vuex 模块自动导入。感谢<a href="https://gitee.com/kangert" target="_blank">@kangert</a>(<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/4" target="_blank">#4</a>)，感谢群友@web 小学生-第五君
+- 🎯 优化 类型定义提高编码体验，修复不能将类型“string | undefined”分配给类型“string”的问题。感谢<a href="https://gitee.com/kangert" target="_blank">@kangert</a>(<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/5" target="_blank">#5</a>)
+- 🎯 优化 `layout` 文件夹移动到与 `views` 文件夹同级（改动较大，`/@/views/layout` 变成 `/@/layout`）
+- 🎯 优化 页面有 `console.log` 时 `eslint` 不生效问题
+- 🎯 优化 页面、ts 中 `any` 类型问题（改动较大）
+- 🎯 优化 登录页在手机上显示的效果
+- 🎯 优化 多行注释信息，鼠标放到方法名即可查看，更加直观的知道方法参数等。引入方法时需去掉以 `.ts` 结尾的后缀（改动较大）
+- 🎯 优化 移除 `utils/storage.ts` 下的旧写法（改动较大）
+- 🎯 优化 拆分 `router` 下内容，路由、前端、后端控制分开写，方便理解
+- 🐞 修复 鼠标移入顶部用户信息栏 `开/关全屏` 文字反向问题
+- 🐞 修复 热更新时，NextLoading（界面 loading） 不消失问题 `window.nextLoading === undefined`
+- 🐞 修复 vuex 中不可以使用 `/@/api/xxx` 下的接口调用问题
+
+## 1.0.3
+
+`2021.06.02`
+
+- ❄️ 删除 G6 思维导图界面
+- 🌟 更新 手动更新 vue、vue-router、vuex 到最近最多人使用的版本，出现不可预测的问题请降低版本。版本查看：<a href="https://www.npmjs.com/package/vue" target="_blank">vue 版本查看</a>
+- 🐞 修复 开启后端控制路由 `isRequestRoutes` 在非首页刷新页面后，回到首页的问题，感谢群友@伯牙已遇钟子期
+
+## 1.0.2
+
+`2021.06.01`
+
+- 🌟 更新 依赖更新最新版本
+- 🐞 修复 菜单搜索中文不可以搜索的问题，感谢群友@逍遥天意
+
+## 1.0.1
+
+`2021.05.31`
+
+- 🎉 新增 更新日志文件 `CHANGELOG.md`，以后每次更新都会在这里显示对应内容
+- 🌟 更新 依赖更新最新版本
+- 🐞 修复 分栏、经典布局路由设置 `meta.isHide` 为 `true` 时报错问题，感谢群友@29、@芭芭拉
+- 🐞 修复 经典布局点击 `tagsView` 左侧菜单数据不变问题
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..6f6a7ea
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 lyt-Top
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..656ed9a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,145 @@
+<div align="center">
+	<img src="https://img-blog.csdnimg.cn/9efd5420327a46b7bd6d93524a97229d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_14,color_FFFFFF,t_70,g_se,x_16">
+	<p align="center">
+	    <a href="https://v3.vuejs.org/" target="_blank">
+	        <img src="https://img.shields.io/badge/vue.js-vue3.x-green" alt="vue">
+	    </a>
+	    <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">
+	        <img src="https://img.shields.io/badge/element--plus-%3E1.0.0-blue" alt="element plus">
+	    </a>
+		<a href="https://www.tslang.cn/" target="_blank">
+	        <img src="https://img.shields.io/badge/typescript-%3E4.0.0-blue" alt="typescript">
+	    </a>
+		<a href="https://vitejs.dev/" target="_blank">
+		    <img src="https://img.shields.io/badge/vite-%3E2.0.0-yellow" alt="vite">
+		</a>
+		<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/LICENSE" target="_blank">
+		    <img src="https://img.shields.io/badge/license-MIT-success" alt="license">
+		</a>
+	</p>
+	<p>&nbsp;</p>
+</div>
+
+#### 🌈 介绍
+
+基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。
+
+#### ⛱️ 线上预览
+
+- vue3.x 版本预览（vue-next-admin）<a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank">https://lyt-top.gitee.io/vue-next-admin-preview/#/login</a>
+- vue2.x 版本预览（vue-prev-admin）<a href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank">https://lyt-top.gitee.io/vue-prev-admin-preview/#/login</a>
+
+#### 💒 代码仓库
+
+- vue3.x 版本 <a href="https://gitee.com/lyt-top/vue-next-admin" target="_blank">https://gitee.com/lyt-top/vue-next-admin</a>
+- vue2.x 版本 <a href="https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin" target="_blank">https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin</a>
+
+#### 🚧 安装 cnpm、yarn
+
+- 复制代码(桌面 cmd 运行) `npm install -g cnpm --registry=https://registry.npm.taobao.org`
+- 复制代码(桌面 cmd 运行) `npm install -g yarn`
+
+#### 🏭 环境支持
+
+| Edge      | Firefox      | Chrome      | Safari      |
+| --------- | ------------ | ----------- | ----------- |
+| Edge ≥ 79 | Firefox ≥ 78 | Chrome ≥ 64 | Safari ≥ 12 |
+
+> 由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及之前版本。
+
+#### ⚡ 使用说明
+
+建议使用 cnpm，因为 yarn 有时会报错。<a href="http://nodejs.cn/" target="_blank">node 版本 > 12xx.xx.x</a>
+
+```bash
+# 克隆项目
+git clone https://gitee.com/lyt-top/vue-next-admin.git
+
+# 进入项目
+cd vue-next-admin
+
+# 安装依赖
+cnpm install
+
+# 运行项目
+cnpm run dev
+
+# 打包发布
+cnpm run build
+```
+
+#### 💯 学习交流加 QQ 群
+
+- 若加群了没同意（一般秒过），那就是群满了（500 人群），请换一个群试试。群会定期清理半年（6 个月）未发言的群友，资源有限，请谅解。建议勿加多群，可能会误伤！
+- 查看开发文档：<a href="https://lyt-top.gitee.io/vue-next-admin-doc-preview" target="_blank">vue-next-admin-doc</a>
+- 群号码：
+  1 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
+  2 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">766356862</a>
+  3 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&jump_from=webapi">795345435</a>
+  4 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0gTFO04WwkeZZ6R4lju6gucbeXHK-wNd&jump_from=webapi">736626228</a>
+
+  <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">
+  	<img src="https://img-blog.csdnimg.cn/35e00f12a3fe4820892ec630ca72f15f.png" width="220" height="220" alt="vue-next-admin 讨论群1" title="vue-next-admin 讨论群1"/>
+  </a>
+  <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">
+  	<img src="https://img-blog.csdnimg.cn/5f1b548abd9f434eb41edde31d1c1fa9.png" width="220" height="220" alt="vue-next-admin 讨论群2" title="vue-next-admin 讨论群2"/>
+  </a>
+  <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&jump_from=webapi">
+  	<img src="https://img-blog.csdnimg.cn/70c8a012dd304246bddeac2184c4ab3a.png" width="220" height="220" alt="vue-next-admin 讨论群3" title="vue-next-admin 讨论群3"/>
+  </a>
+  <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0gTFO04WwkeZZ6R4lju6gucbeXHK-wNd&jump_from=webapi">
+  	<img src="https://img-blog.csdnimg.cn/e5c9704eed1342bc9d9e74b37203402d.png" width="220" height="220" alt="vue-next-admin 讨论群4" title="vue-next-admin 讨论群4"/>
+  </a>
+
+#### 💒 集成后端
+
+- <a target="_blank" href="https://github.com/PandaGoAdmin/PandaX">@熊猫 PandaGoAdmin</a>
+- <a target="_blank" href="https://toscode.gitee.com/GionConnection/gopro_free">@甜蜜蜜 GoPro 平台</a>
+- <a target="_blank" href="https://gitee.com/GionConnection/niupi-free">@甜蜜蜜 NiuPi 平台</a>
+- <a target="_blank" href="https://gitee.com/tiger1103/gfast/tree/os-v3/">@游子 GFast-V3</a>
+- <a target="_blank" href="https://gitee.com/diygw/diygw-ui-php/">@diygw.com gw-ui-php</a>
+- <a target="_blank" href="https://gitee.com/zsvg/vboot-net">@zsvg vboot-net</a>
+- <a target="_blank" href="https://gitee.com/zsvg/vboot-java">@zsvg vboot-java</a>
+- <a target="_blank" href="https://gitee.com/wonderful-code/buildadmin">@青红造了个白 buildadmin</a>
+- <a target="_blank" href="https://github.com/xiaodingding/iotfast">@Goodwell iotfast(一个开源的物联网平台)</a>
+
+#### ❤️ 鸣谢列表
+
+- <a href="https://github.com/vuejs/vue" target="_blank">vue</a>
+- <a href="https://github.com/vuejs/vue-next" target="_blank">vue-next</a>
+- <a href="https://github.com/ElemeFE/element" target="_blank">element-ui</a>
+- <a href="https://github.com/element-plus/element-plus" target="_blank">element-plus</a>
+- <a href="https://github.com/vuejs/vue-router-next" target="_blank">vue-router-next</a>
+- <a href="https://github.com/vuejs/vuex" target="_blank">vuex</a>
+- <a href="https://github.com/apache/echarts" target="_blank">echarts</a>
+- <a href="https://github.com/axios/axios" target="_blank">axios</a>
+- <a href="https://github.com/zenorocha/clipboard.js" target="_blank">clipboard</a>
+- <a href="https://github.com/inorganik/countUp.js" target="_blank">countUp</a>
+- <a href="https://github.com/developit/mitt" target="_blank">mitt</a>
+- <a href="https://github.com/rstacruz/nprogress" target="_blank">nprogress</a>
+- <a href="https://github.com/sindresorhus/screenfull.js" target="_blank">screenfull</a>
+- <a href="https://github.com/SortableJS/Sortable" target="_blank">sortablejs</a>
+- <a href="https://github.com/sass/sass" target="_blank">sass</a>
+- <a href="https://github.com/microsoft/TypeScript" target="_blank">typescript</a>
+- <a href="https://github.com/vitejs/vite" target="_blank">vite</a>
+- <a href="https://github.com/wangeditor-team/wangEditor" target="_blank">wangeditor</a>
+- <a href="https://github.com/fengyuanchen/cropperjs" target="_blank">cropperjs</a>
+- <a href="https://github.com/davidshimjs/qrcodejs" target="_blank">qrcodejs</a>
+- <a href="https://github.com/crabbly/Print.js" target="_blank">print-js</a>
+- <a href="https://github.com/jbaysolutions/vue-grid-layout" target="_blank">vue-grid-layout</a>
+- <a href="https://github.com/antoniandre/splitpanes" target="_blank">splitpanes</a>
+- <a href="https://github.com/jsplumb/jsplumb" target="_blank">jsplumb</a>
+
+#### 💕 特别感谢
+
+特别感谢老哥们的建议、指导与帮忙。谢谢！
+
+- <a href="https://gitee.com/click33/sa-plus" target="_blank">@省长</a>
+- <a href="https://gitee.com/jskz/Jskz-SpringCloud" target="_blank">@唐参</a>
+- <a href="https://gitee.com/chuange" target="_blank">@川歌</a>
+- @华仔
+
+#### 💌 支持作者
+
+如果觉得框架不错，或者已经在使用了，希望你可以去 <a target="_blank" href="https://github.com/lyt-Top/vue-next-admin">Github</a> 或者
+<a target="_blank" href="https://gitee.com/lyt-top/vue-next-admin">Gitee</a> 帮我点个 ⭐ Star，这将是对我极大的鼓励与支持。
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..60f47c4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta
+			name="keywords"
+			content="vue-next-admin，vue-prev-admin，vue-admin-wonderful，后台管理系统一站式平台模板，希望可以帮你完成快速开发。vue2.x，vue2.0，vue2，vue3，vue3.x，vue3.0，CompositionAPI，typescript，element plus，element，plus，admin，wonderful，wonderful-next，vue-next-admin，vite，vite-admin，快速，高效，后台模板，后台系统，管理系统"
+		/>
+		<meta
+			name="description"
+			content="vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，适配手机、平板、pc 的后台开源免费管理系统模板！vue-prev-admin，基于 vue2 +  element ui，适配手机、平板、pc 的后台开源免费管理系统模板！"
+		/>
+		<link rel="icon" href="/favicon.ico" />
+		<title>gfast3.2后台管理系统</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..37265a1
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,2472 @@
+{
+	"name": "vue-next-admin",
+	"version": "2.2.0",
+	"lockfileVersion": 1,
+	"requires": true,
+	"dependencies": {
+		"@babel/parser": {
+			"version": "7.18.9",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
+			"integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
+		},
+		"@babel/runtime": {
+			"version": "7.20.1",
+			"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.1.tgz",
+			"integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
+			"requires": {
+				"regenerator-runtime": "^0.13.10"
+			}
+		},
+		"@codemirror/autocomplete": {
+			"version": "6.3.2",
+			"resolved": "https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-6.3.2.tgz",
+			"integrity": "sha512-+VzxrHWkuvSSt0fw4I57SULo/NMrLnNgm6JHrkbIYfDw9jZJNTruCwkv32TCqSeC8xIXhYWMuxawwr/xOoHr8w==",
+			"requires": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.5.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"@codemirror/commands": {
+			"version": "6.1.2",
+			"resolved": "https://registry.npmmirror.com/@codemirror/commands/-/commands-6.1.2.tgz",
+			"integrity": "sha512-sO3jdX1s0pam6lIdeSJLMN3DQ6mPEbM4yLvyKkdqtmd/UDwhXA5+AwFJ89rRXm6vTeOXBsE5cAmlos/t7MJdgg==",
+			"requires": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"@codemirror/lang-javascript": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmmirror.com/@codemirror/lang-javascript/-/lang-javascript-6.1.1.tgz",
+			"integrity": "sha512-F4+kiuC5d5dUSJmff96tJQwpEXs/tX/4bapMRnZWW6bHKK1Fx6MunTzopkCUWRa9bF87GPmb9m7Qtg7Yv8f3uQ==",
+			"requires": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/lint": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/javascript": "^1.0.0"
+			}
+		},
+		"@codemirror/language": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmmirror.com/@codemirror/language/-/language-6.3.1.tgz",
+			"integrity": "sha512-MK+G1QKaGfSEUg9YEFaBkMBI6j1ge4VMBPZv9fDYotw7w695c42x5Ba1mmwBkesYnzYFBfte6Hh9TDcKa6xORQ==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0",
+				"style-mod": "^4.0.0"
+			}
+		},
+		"@codemirror/lint": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmmirror.com/@codemirror/lint/-/lint-6.1.0.tgz",
+			"integrity": "sha512-mdvDQrjRmYPvQ3WrzF6Ewaao+NWERYtpthJvoQ3tK3t/44Ynhk8ZGjTSL9jMEv8CgSMogmt75X8ceOZRDSXHtQ==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"@codemirror/search": {
+			"version": "6.2.3",
+			"resolved": "https://registry.npmmirror.com/@codemirror/search/-/search-6.2.3.tgz",
+			"integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"@codemirror/state": {
+			"version": "6.1.3",
+			"resolved": "https://registry.npmmirror.com/@codemirror/state/-/state-6.1.3.tgz",
+			"integrity": "sha512-0Rn7vadZ6EgHaKdIOwyhBWLdPDh1JM5USYqXjxwrvpmTKWu4wQ77twgAYEg1MU282XcrnV4ZqFf+00bu6UPCyg=="
+		},
+		"@codemirror/theme-one-dark": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmmirror.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
+			"integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
+			"requires": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/highlight": "^1.0.0"
+			}
+		},
+		"@codemirror/view": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmmirror.com/@codemirror/view/-/view-6.5.0.tgz",
+			"integrity": "sha512-dapE7AywjyYoHBHn4n+wCRKFqMEmYZHHlfyoSO+e1P6MK4az1wg9t7mfwbdI9mXuBzmPBX7NmU3Xmq+qmxDOLw==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"style-mod": "^4.0.0",
+				"w3c-keyname": "^2.2.4"
+			}
+		},
+		"@ctrl/tinycolor": {
+			"version": "3.4.1",
+			"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
+			"integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
+		},
+		"@element-plus/icons-vue": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.6.tgz",
+			"integrity": "sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew=="
+		},
+		"@esbuild/linux-loong64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
+			"integrity": "sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==",
+			"dev": true,
+			"optional": true
+		},
+		"@eslint/eslintrc": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
+			"integrity": "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==",
+			"dev": true,
+			"requires": {
+				"ajv": "^6.12.4",
+				"debug": "^4.3.2",
+				"espree": "^9.3.2",
+				"globals": "^13.15.0",
+				"ignore": "^5.2.0",
+				"import-fresh": "^3.2.1",
+				"js-yaml": "^4.1.0",
+				"minimatch": "^3.1.2",
+				"strip-json-comments": "^3.1.1"
+			}
+		},
+		"@floating-ui/core": {
+			"version": "0.7.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+			"integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+		},
+		"@floating-ui/dom": {
+			"version": "0.5.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+			"integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+			"requires": {
+				"@floating-ui/core": "^0.7.3"
+			}
+		},
+		"@humanwhocodes/config-array": {
+			"version": "0.9.5",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+			"integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+			"dev": true,
+			"requires": {
+				"@humanwhocodes/object-schema": "^1.2.1",
+				"debug": "^4.1.1",
+				"minimatch": "^3.0.4"
+			}
+		},
+		"@humanwhocodes/object-schema": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+			"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+			"dev": true
+		},
+		"@interactjs/actions": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.17.tgz",
+			"integrity": "sha512-wyB1ZqpaZy5gmz6VDqK9KWh98xKnFgL7VyLvxHODFi9V0IYX4HJAAOBlhtfze0D1R1f1cY+gqPDK+dLaHMlE+w==",
+			"requires": {
+				"@interactjs/interact": "1.10.17"
+			}
+		},
+		"@interactjs/auto-scroll": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.17.tgz",
+			"integrity": "sha512-IQcW7N3xOaoL8RnAGOGMk0Y2gue7L4S3BT6Id4VBBu8so163DtLiZVW6jXu9rKVntzbluaAeqNZlfAVyu3kIWg==",
+			"requires": {
+				"@interactjs/interact": "1.10.17"
+			}
+		},
+		"@interactjs/auto-start": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.17.tgz",
+			"integrity": "sha512-qYVxhAbYnwxjD/NLEegUoAST7WASJ4VmWNjsyWRx/js5Op+I4E2zteARIeZGgrutcGIXMCcQzhCMgE3PjOpbpw==",
+			"requires": {
+				"@interactjs/interact": "1.10.17"
+			}
+		},
+		"@interactjs/core": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.17.tgz",
+			"integrity": "sha512-rL9w+83HDRuXub8Ezqs+97CYLl/ne7bLT/sAeduUWaxYhsW9iOqBoob9JnkkCZOaOsYizWI1EWy0+fNc5ibtLQ=="
+		},
+		"@interactjs/dev-tools": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.17.tgz",
+			"integrity": "sha512-Oi9nEw3FfSwkNmW+V0WwdHqvzEkVHc24mH1v5EjRn60sqgrGLK9nTQ+NSuqcnUY8GxC3TkyuxnsOodxiadIRmA==",
+			"requires": {
+				"@interactjs/interact": "1.10.17"
+			}
+		},
+		"@interactjs/inertia": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.17.tgz",
+			"integrity": "sha512-41vbYUjZIDCKt2/yhmjPrEW5+0uoL/hldFsll9pkvnLhmm12Xk0VXOlmR2zXKAmsTK3fJlKMyBYUX92qHLkyVQ==",
+			"requires": {
+				"@interactjs/interact": "1.10.17",
+				"@interactjs/offset": "1.10.17"
+			}
+		},
+		"@interactjs/interact": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.17.tgz",
+			"integrity": "sha512-NyKsf8EFudvdahBjPz1Gt5QnynVwa/2LUfBc2/w8QOnOBiyzUm0HLloJSaB8a50QbQkSWN243/Lgpd8GTMQvuQ==",
+			"requires": {
+				"@interactjs/core": "1.10.17",
+				"@interactjs/types": "1.10.17",
+				"@interactjs/utils": "1.10.17"
+			}
+		},
+		"@interactjs/interactjs": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.17.tgz",
+			"integrity": "sha512-hHmiukARbZhiM12zNKx0yQlFVl4C+NMeYNAYh6Mf9U3ZziQ47C+JEW8Gr7Zr/MxfNZyPu5nLKCpVQjh/JvBO9g==",
+			"requires": {
+				"@interactjs/actions": "1.10.17",
+				"@interactjs/auto-scroll": "1.10.17",
+				"@interactjs/auto-start": "1.10.17",
+				"@interactjs/core": "1.10.17",
+				"@interactjs/dev-tools": "1.10.17",
+				"@interactjs/inertia": "1.10.17",
+				"@interactjs/interact": "1.10.17",
+				"@interactjs/modifiers": "1.10.17",
+				"@interactjs/offset": "1.10.17",
+				"@interactjs/pointer-events": "1.10.17",
+				"@interactjs/reflow": "1.10.17",
+				"@interactjs/utils": "1.10.17"
+			}
+		},
+		"@interactjs/modifiers": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.17.tgz",
+			"integrity": "sha512-Dxw8kv9VBIxnhNvQncR6CKAGMzKXczLvuAUIdSPFYtyerX/XiDulJUqhR+jVKNp/WjF1DvdBxWo0kGGLbM84LQ==",
+			"requires": {
+				"@interactjs/interact": "1.10.17",
+				"@interactjs/snappers": "1.10.17"
+			}
+		},
+		"@interactjs/offset": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.17.tgz",
+			"integrity": "sha512-wWBnIQWgLrmJNTBbd/FdxHxAJjiXl/5ND8Jbw2DuP9gIGDxhFSdEt62Fgqimn9ICb8v8ycvSLObEmcvJF/8hQQ==",
+			"requires": {
+				"@interactjs/interact": "1.10.17"
+			}
+		},
+		"@interactjs/pointer-events": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.17.tgz",
+			"integrity": "sha512-VsfluouEKb8QRGyH6jQATCW+QdAd/3dkENS7rj2m+EcVUhz2Ob5mpMRopjALi4pwltMowqTfuJ4LtwMSX2G29A==",
+			"requires": {
+				"@interactjs/interact": "1.10.17"
+			}
+		},
+		"@interactjs/reflow": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.17.tgz",
+			"integrity": "sha512-ncpWP5k93FRQptEhjzPZsbuRRajd4rkW17lDavCrEjrDi/LHnYekWGqZTaFzfJ80n1x8xUm9ujDjxCTylNqEIA==",
+			"requires": {
+				"@interactjs/interact": "1.10.17"
+			}
+		},
+		"@interactjs/snappers": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.17.tgz",
+			"integrity": "sha512-m753DGsNOts797e3zDT6wqELoc+BlpIC1w+TyMyISRxU6n1RlS8Q6LHBGgwAgV79LHLaahv/a5haFF9H1VG0FQ==",
+			"requires": {
+				"@interactjs/interact": "1.10.17"
+			}
+		},
+		"@interactjs/types": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.17.tgz",
+			"integrity": "sha512-X2JpoM7xUw0p9Me0tMaI0HNfcF/Hd07ZZlzpnpEMpGerUZOLoyeThrV9P+CrBHxZrluWJrigJbcdqXliFd0YMA=="
+		},
+		"@interactjs/utils": {
+			"version": "1.10.17",
+			"resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.17.tgz",
+			"integrity": "sha512-sZAW08CkqgvqRjUIaLRjScjObcCzN9D75yekLA21EClYAZIhi4A+GEt2z/WqOCOksTaEPLYmQyhkpXcboc0LhQ=="
+		},
+		"@intlify/core-base": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+			"integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+			"requires": {
+				"@intlify/devtools-if": "9.2.2",
+				"@intlify/message-compiler": "9.2.2",
+				"@intlify/shared": "9.2.2",
+				"@intlify/vue-devtools": "9.2.2"
+			}
+		},
+		"@intlify/devtools-if": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+			"integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+			"requires": {
+				"@intlify/shared": "9.2.2"
+			}
+		},
+		"@intlify/message-compiler": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+			"integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+			"requires": {
+				"@intlify/shared": "9.2.2",
+				"source-map": "0.6.1"
+			}
+		},
+		"@intlify/shared": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+			"integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q=="
+		},
+		"@intlify/vue-devtools": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+			"integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+			"requires": {
+				"@intlify/core-base": "9.2.2",
+				"@intlify/shared": "9.2.2"
+			}
+		},
+		"@lezer/common": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmmirror.com/@lezer/common/-/common-1.0.1.tgz",
+			"integrity": "sha512-8TR5++Q/F//tpDsLd5zkrvEX5xxeemafEaek7mUp7Y+bI8cKQXdSqhzTOBaOogETcMOVr0pT3BBPXp13477ciw=="
+		},
+		"@lezer/highlight": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmmirror.com/@lezer/highlight/-/highlight-1.1.2.tgz",
+			"integrity": "sha512-CAun1WR1glxG9ZdOokTZwXbcwB7PXkIEyZRUMFBVwSrhTcogWq634/ByNImrkUnQhjju6xsIaOBIxvcRJtplXQ==",
+			"requires": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"@lezer/javascript": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmmirror.com/@lezer/javascript/-/javascript-1.0.2.tgz",
+			"integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
+			"requires": {
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"@lezer/lr": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmmirror.com/@lezer/lr/-/lr-1.2.4.tgz",
+			"integrity": "sha512-L/52/oMJBFXXx8qBYF4UgktLP2geQ/qn5Fd8+5L/mqlLLCB9+qdKktFAtejd9FdFMaFx6lrP5rmLz4sN3Kplcg==",
+			"requires": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"@nodelib/fs.scandir": {
+			"version": "2.1.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+			"dev": true,
+			"requires": {
+				"@nodelib/fs.stat": "2.0.5",
+				"run-parallel": "^1.1.9"
+			}
+		},
+		"@nodelib/fs.stat": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+			"dev": true
+		},
+		"@nodelib/fs.walk": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+			"dev": true,
+			"requires": {
+				"@nodelib/fs.scandir": "2.1.5",
+				"fastq": "^1.6.0"
+			}
+		},
+		"@types/json-schema": {
+			"version": "7.0.11",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+			"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
+			"dev": true
+		},
+		"@types/lodash": {
+			"version": "4.14.182",
+			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
+			"integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+		},
+		"@types/lodash-es": {
+			"version": "4.17.6",
+			"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+			"integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+			"requires": {
+				"@types/lodash": "*"
+			}
+		},
+		"@types/node": {
+			"version": "18.0.6",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.6.tgz",
+			"integrity": "sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==",
+			"dev": true
+		},
+		"@types/nprogress": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
+			"integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==",
+			"dev": true
+		},
+		"@types/sortablejs": {
+			"version": "1.13.0",
+			"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.13.0.tgz",
+			"integrity": "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==",
+			"dev": true
+		},
+		"@types/web-bluetooth": {
+			"version": "0.0.14",
+			"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
+			"integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+		},
+		"@typescript-eslint/eslint-plugin": {
+			"version": "5.30.7",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.7.tgz",
+			"integrity": "sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw==",
+			"dev": true,
+			"requires": {
+				"@typescript-eslint/scope-manager": "5.30.7",
+				"@typescript-eslint/type-utils": "5.30.7",
+				"@typescript-eslint/utils": "5.30.7",
+				"debug": "^4.3.4",
+				"functional-red-black-tree": "^1.0.1",
+				"ignore": "^5.2.0",
+				"regexpp": "^3.2.0",
+				"semver": "^7.3.7",
+				"tsutils": "^3.21.0"
+			}
+		},
+		"@typescript-eslint/parser": {
+			"version": "5.30.7",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.7.tgz",
+			"integrity": "sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A==",
+			"dev": true,
+			"requires": {
+				"@typescript-eslint/scope-manager": "5.30.7",
+				"@typescript-eslint/types": "5.30.7",
+				"@typescript-eslint/typescript-estree": "5.30.7",
+				"debug": "^4.3.4"
+			}
+		},
+		"@typescript-eslint/scope-manager": {
+			"version": "5.30.7",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.7.tgz",
+			"integrity": "sha512-7BM1bwvdF1UUvt+b9smhqdc/eniOnCKxQT/kj3oXtj3LqnTWCAM0qHRHfyzCzhEfWX0zrW7KqXXeE4DlchZBKw==",
+			"dev": true,
+			"requires": {
+				"@typescript-eslint/types": "5.30.7",
+				"@typescript-eslint/visitor-keys": "5.30.7"
+			}
+		},
+		"@typescript-eslint/type-utils": {
+			"version": "5.30.7",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.7.tgz",
+			"integrity": "sha512-nD5qAE2aJX/YLyKMvOU5jvJyku4QN5XBVsoTynFrjQZaDgDV6i7QHFiYCx10wvn7hFvfuqIRNBtsgaLe0DbWhw==",
+			"dev": true,
+			"requires": {
+				"@typescript-eslint/utils": "5.30.7",
+				"debug": "^4.3.4",
+				"tsutils": "^3.21.0"
+			}
+		},
+		"@typescript-eslint/types": {
+			"version": "5.30.7",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.7.tgz",
+			"integrity": "sha512-ocVkETUs82+U+HowkovV6uxf1AnVRKCmDRNUBUUo46/5SQv1owC/EBFkiu4MOHeZqhKz2ktZ3kvJJ1uFqQ8QPg==",
+			"dev": true
+		},
+		"@typescript-eslint/typescript-estree": {
+			"version": "5.30.7",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.7.tgz",
+			"integrity": "sha512-tNslqXI1ZdmXXrHER83TJ8OTYl4epUzJC0aj2i4DMDT4iU+UqLT3EJeGQvJ17BMbm31x5scSwo3hPM0nqQ1AEA==",
+			"dev": true,
+			"requires": {
+				"@typescript-eslint/types": "5.30.7",
+				"@typescript-eslint/visitor-keys": "5.30.7",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
+				"is-glob": "^4.0.3",
+				"semver": "^7.3.7",
+				"tsutils": "^3.21.0"
+			}
+		},
+		"@typescript-eslint/utils": {
+			"version": "5.30.7",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.7.tgz",
+			"integrity": "sha512-Z3pHdbFw+ftZiGUnm1GZhkJgVqsDL5CYW2yj+TB2mfXDFOMqtbzQi2dNJIyPqPbx9mv2kUxS1gU+r2gKlKi1rQ==",
+			"dev": true,
+			"requires": {
+				"@types/json-schema": "^7.0.9",
+				"@typescript-eslint/scope-manager": "5.30.7",
+				"@typescript-eslint/types": "5.30.7",
+				"@typescript-eslint/typescript-estree": "5.30.7",
+				"eslint-scope": "^5.1.1",
+				"eslint-utils": "^3.0.0"
+			}
+		},
+		"@typescript-eslint/visitor-keys": {
+			"version": "5.30.7",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.7.tgz",
+			"integrity": "sha512-KrRXf8nnjvcpxDFOKej4xkD7657+PClJs5cJVSG7NNoCNnjEdc46juNAQt7AyuWctuCgs6mVRc1xGctEqrjxWw==",
+			"dev": true,
+			"requires": {
+				"@typescript-eslint/types": "5.30.7",
+				"eslint-visitor-keys": "^3.3.0"
+			}
+		},
+		"@vitejs/plugin-vue": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",
+			"integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==",
+			"dev": true
+		},
+		"@vue/compiler-core": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
+			"integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
+			"requires": {
+				"@babel/parser": "^7.16.4",
+				"@vue/shared": "3.2.37",
+				"estree-walker": "^2.0.2",
+				"source-map": "^0.6.1"
+			}
+		},
+		"@vue/compiler-dom": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
+			"integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
+			"requires": {
+				"@vue/compiler-core": "3.2.37",
+				"@vue/shared": "3.2.37"
+			}
+		},
+		"@vue/compiler-sfc": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
+			"integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
+			"requires": {
+				"@babel/parser": "^7.16.4",
+				"@vue/compiler-core": "3.2.37",
+				"@vue/compiler-dom": "3.2.37",
+				"@vue/compiler-ssr": "3.2.37",
+				"@vue/reactivity-transform": "3.2.37",
+				"@vue/shared": "3.2.37",
+				"estree-walker": "^2.0.2",
+				"magic-string": "^0.25.7",
+				"postcss": "^8.1.10",
+				"source-map": "^0.6.1"
+			}
+		},
+		"@vue/compiler-ssr": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
+			"integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
+			"requires": {
+				"@vue/compiler-dom": "3.2.37",
+				"@vue/shared": "3.2.37"
+			}
+		},
+		"@vue/devtools-api": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+			"integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+		},
+		"@vue/reactivity": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
+			"integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
+			"requires": {
+				"@vue/shared": "3.2.37"
+			}
+		},
+		"@vue/reactivity-transform": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
+			"integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
+			"requires": {
+				"@babel/parser": "^7.16.4",
+				"@vue/compiler-core": "3.2.37",
+				"@vue/shared": "3.2.37",
+				"estree-walker": "^2.0.2",
+				"magic-string": "^0.25.7"
+			}
+		},
+		"@vue/runtime-core": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
+			"integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
+			"requires": {
+				"@vue/reactivity": "3.2.37",
+				"@vue/shared": "3.2.37"
+			}
+		},
+		"@vue/runtime-dom": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
+			"integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
+			"requires": {
+				"@vue/runtime-core": "3.2.37",
+				"@vue/shared": "3.2.37",
+				"csstype": "^2.6.8"
+			}
+		},
+		"@vue/server-renderer": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
+			"integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
+			"requires": {
+				"@vue/compiler-ssr": "3.2.37",
+				"@vue/shared": "3.2.37"
+			}
+		},
+		"@vue/shared": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
+			"integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+		},
+		"@vueuse/core": {
+			"version": "8.9.4",
+			"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
+			"integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
+			"requires": {
+				"@types/web-bluetooth": "^0.0.14",
+				"@vueuse/metadata": "8.9.4",
+				"@vueuse/shared": "8.9.4",
+				"vue-demi": "*"
+			},
+			"dependencies": {
+				"@vueuse/shared": {
+					"version": "8.9.4",
+					"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
+					"integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
+					"requires": {
+						"vue-demi": "*"
+					}
+				},
+				"vue-demi": {
+					"version": "0.13.5",
+					"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.5.tgz",
+					"integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
+				}
+			}
+		},
+		"@vueuse/metadata": {
+			"version": "8.9.4",
+			"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
+			"integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw=="
+		},
+		"acorn": {
+			"version": "8.7.1",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+			"integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+			"dev": true
+		},
+		"acorn-jsx": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+			"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+			"dev": true
+		},
+		"ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dev": true,
+			"requires": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			}
+		},
+		"ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true
+		},
+		"ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dev": true,
+			"requires": {
+				"color-convert": "^2.0.1"
+			}
+		},
+		"anymatch": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+			"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+			"dev": true,
+			"requires": {
+				"normalize-path": "^3.0.0",
+				"picomatch": "^2.0.4"
+			}
+		},
+		"argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"dev": true
+		},
+		"array-union": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+			"dev": true
+		},
+		"async-validator": {
+			"version": "4.2.5",
+			"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+			"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+		},
+		"asynckit": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+		},
+		"axios": {
+			"version": "0.27.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+			"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+			"requires": {
+				"follow-redirects": "^1.14.9",
+				"form-data": "^4.0.0"
+			}
+		},
+		"balanced-match": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+			"dev": true
+		},
+		"batch-processor": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+			"integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+		},
+		"binary-extensions": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+			"dev": true
+		},
+		"boolbase": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+			"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+			"dev": true
+		},
+		"brace-expansion": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+			"dev": true,
+			"requires": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
+			}
+		},
+		"braces": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+			"dev": true,
+			"requires": {
+				"fill-range": "^7.0.1"
+			}
+		},
+		"callsites": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+			"dev": true
+		},
+		"chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"requires": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			}
+		},
+		"chokidar": {
+			"version": "3.5.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+			"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+			"dev": true,
+			"requires": {
+				"anymatch": "~3.1.2",
+				"braces": "~3.0.2",
+				"fsevents": "~2.3.2",
+				"glob-parent": "~5.1.2",
+				"is-binary-path": "~2.1.0",
+				"is-glob": "~4.0.1",
+				"normalize-path": "~3.0.0",
+				"readdirp": "~3.6.0"
+			},
+			"dependencies": {
+				"glob-parent": {
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+					"dev": true,
+					"requires": {
+						"is-glob": "^4.0.1"
+					}
+				}
+			}
+		},
+		"claygl": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
+			"integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+		},
+		"clipboard": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+			"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+			"requires": {
+				"good-listener": "^1.2.2",
+				"select": "^1.1.2",
+				"tiny-emitter": "^2.0.0"
+			}
+		},
+		"codemirror": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.1.tgz",
+			"integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+			"requires": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/commands": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/lint": "^6.0.0",
+				"@codemirror/search": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0"
+			}
+		},
+		"color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dev": true,
+			"requires": {
+				"color-name": "~1.1.4"
+			}
+		},
+		"color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true
+		},
+		"combined-stream": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"requires": {
+				"delayed-stream": "~1.0.0"
+			}
+		},
+		"concat-map": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+			"dev": true
+		},
+		"countup.js": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.3.2.tgz",
+			"integrity": "sha512-dQ7F/CmKGjaO6cDfhtEXwsKVlXIpJ89dFs8PvkaZH9jBVJ2Z8GU4iwG/qP7MgY8qwr+1skbwR6qecWWQLUzB8Q=="
+		},
+		"crelt": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmmirror.com/crelt/-/crelt-1.0.5.tgz",
+			"integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
+		},
+		"cropperjs": {
+			"version": "1.5.12",
+			"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.12.tgz",
+			"integrity": "sha512-re7UdjE5UnwdrovyhNzZ6gathI4Rs3KGCBSc8HCIjUo5hO42CtzyblmWLj6QWVw7huHyDMfpKxhiO2II77nhDw=="
+		},
+		"cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"requires": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			}
+		},
+		"cssesc": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+			"dev": true
+		},
+		"csstype": {
+			"version": "2.6.20",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+			"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+		},
+		"dayjs": {
+			"version": "1.11.4",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.4.tgz",
+			"integrity": "sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g=="
+		},
+		"debug": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dev": true,
+			"requires": {
+				"ms": "2.1.2"
+			}
+		},
+		"deep-is": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+			"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+			"dev": true
+		},
+		"delayed-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+		},
+		"delegate": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+			"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+		},
+		"dir-glob": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+			"dev": true,
+			"requires": {
+				"path-type": "^4.0.0"
+			}
+		},
+		"doctrine": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+			"integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+			"dev": true,
+			"requires": {
+				"esutils": "^2.0.2"
+			}
+		},
+		"dotenv": {
+			"version": "16.0.1",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz",
+			"integrity": "sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==",
+			"dev": true
+		},
+		"echarts": {
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+			"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+			"requires": {
+				"tslib": "2.3.0",
+				"zrender": "5.3.2"
+			}
+		},
+		"echarts-gl": {
+			"version": "2.0.9",
+			"resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
+			"integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+			"requires": {
+				"claygl": "^1.2.1",
+				"zrender": "^5.1.1"
+			}
+		},
+		"echarts-wordcloud": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz",
+			"integrity": "sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g=="
+		},
+		"element-plus": {
+			"version": "2.2.9",
+			"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.9.tgz",
+			"integrity": "sha512-jYbL0JkCdv95rkT6trZJjCAizLPySa0qcd2cgq+57SKQnCZAcNDDq4GbTuFRnNavdoeCJnuM3HIficTIUpsMOQ==",
+			"requires": {
+				"@ctrl/tinycolor": "^3.4.1",
+				"@element-plus/icons-vue": "^2.0.6",
+				"@floating-ui/dom": "^0.5.4",
+				"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+				"@types/lodash": "^4.14.182",
+				"@types/lodash-es": "^4.17.6",
+				"@vueuse/core": "^8.7.5",
+				"async-validator": "^4.2.5",
+				"dayjs": "^1.11.3",
+				"escape-html": "^1.0.3",
+				"lodash": "^4.17.21",
+				"lodash-es": "^4.17.21",
+				"lodash-unified": "^1.0.2",
+				"memoize-one": "^6.0.0",
+				"normalize-wheel-es": "^1.1.2"
+			},
+			"dependencies": {
+				"@popperjs/core": {
+					"version": "npm:@sxzz/popperjs-es@2.11.7",
+					"resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+					"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+				}
+			}
+		},
+		"element-resize-detector": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+			"integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+			"requires": {
+				"batch-processor": "1.0.0"
+			}
+		},
+		"esbuild": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz",
+			"integrity": "sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==",
+			"dev": true,
+			"requires": {
+				"@esbuild/linux-loong64": "0.14.54",
+				"esbuild-android-64": "0.14.54",
+				"esbuild-android-arm64": "0.14.54",
+				"esbuild-darwin-64": "0.14.54",
+				"esbuild-darwin-arm64": "0.14.54",
+				"esbuild-freebsd-64": "0.14.54",
+				"esbuild-freebsd-arm64": "0.14.54",
+				"esbuild-linux-32": "0.14.54",
+				"esbuild-linux-64": "0.14.54",
+				"esbuild-linux-arm": "0.14.54",
+				"esbuild-linux-arm64": "0.14.54",
+				"esbuild-linux-mips64le": "0.14.54",
+				"esbuild-linux-ppc64le": "0.14.54",
+				"esbuild-linux-riscv64": "0.14.54",
+				"esbuild-linux-s390x": "0.14.54",
+				"esbuild-netbsd-64": "0.14.54",
+				"esbuild-openbsd-64": "0.14.54",
+				"esbuild-sunos-64": "0.14.54",
+				"esbuild-windows-32": "0.14.54",
+				"esbuild-windows-64": "0.14.54",
+				"esbuild-windows-arm64": "0.14.54"
+			}
+		},
+		"esbuild-android-64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz",
+			"integrity": "sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-android-arm64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz",
+			"integrity": "sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-darwin-64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz",
+			"integrity": "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-darwin-arm64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz",
+			"integrity": "sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-freebsd-64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz",
+			"integrity": "sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-freebsd-arm64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz",
+			"integrity": "sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-32": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz",
+			"integrity": "sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+			"integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-arm": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz",
+			"integrity": "sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-arm64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz",
+			"integrity": "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-mips64le": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz",
+			"integrity": "sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-ppc64le": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz",
+			"integrity": "sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-riscv64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz",
+			"integrity": "sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-s390x": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz",
+			"integrity": "sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-netbsd-64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz",
+			"integrity": "sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-openbsd-64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz",
+			"integrity": "sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-sunos-64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
+			"integrity": "sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-windows-32": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz",
+			"integrity": "sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-windows-64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz",
+			"integrity": "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-windows-arm64": {
+			"version": "0.14.54",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz",
+			"integrity": "sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==",
+			"dev": true,
+			"optional": true
+		},
+		"escape-html": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+		},
+		"escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"dev": true
+		},
+		"eslint": {
+			"version": "8.20.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.20.0.tgz",
+			"integrity": "sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==",
+			"dev": true,
+			"requires": {
+				"@eslint/eslintrc": "^1.3.0",
+				"@humanwhocodes/config-array": "^0.9.2",
+				"ajv": "^6.10.0",
+				"chalk": "^4.0.0",
+				"cross-spawn": "^7.0.2",
+				"debug": "^4.3.2",
+				"doctrine": "^3.0.0",
+				"escape-string-regexp": "^4.0.0",
+				"eslint-scope": "^7.1.1",
+				"eslint-utils": "^3.0.0",
+				"eslint-visitor-keys": "^3.3.0",
+				"espree": "^9.3.2",
+				"esquery": "^1.4.0",
+				"esutils": "^2.0.2",
+				"fast-deep-equal": "^3.1.3",
+				"file-entry-cache": "^6.0.1",
+				"functional-red-black-tree": "^1.0.1",
+				"glob-parent": "^6.0.1",
+				"globals": "^13.15.0",
+				"ignore": "^5.2.0",
+				"import-fresh": "^3.0.0",
+				"imurmurhash": "^0.1.4",
+				"is-glob": "^4.0.0",
+				"js-yaml": "^4.1.0",
+				"json-stable-stringify-without-jsonify": "^1.0.1",
+				"levn": "^0.4.1",
+				"lodash.merge": "^4.6.2",
+				"minimatch": "^3.1.2",
+				"natural-compare": "^1.4.0",
+				"optionator": "^0.9.1",
+				"regexpp": "^3.2.0",
+				"strip-ansi": "^6.0.1",
+				"strip-json-comments": "^3.1.0",
+				"text-table": "^0.2.0",
+				"v8-compile-cache": "^2.0.3"
+			},
+			"dependencies": {
+				"eslint-scope": {
+					"version": "7.1.1",
+					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+					"integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+					"dev": true,
+					"requires": {
+						"esrecurse": "^4.3.0",
+						"estraverse": "^5.2.0"
+					}
+				},
+				"estraverse": {
+					"version": "5.3.0",
+					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+					"dev": true
+				}
+			}
+		},
+		"eslint-plugin-vue": {
+			"version": "9.2.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.2.0.tgz",
+			"integrity": "sha512-W2hc+NUXoce8sZtWgZ45miQTy6jNyuSdub5aZ1IBune4JDeAyzucYX0TzkrQ1jMO52sNUDYlCIHDoaNePe0p5g==",
+			"dev": true,
+			"requires": {
+				"eslint-utils": "^3.0.0",
+				"natural-compare": "^1.4.0",
+				"nth-check": "^2.0.1",
+				"postcss-selector-parser": "^6.0.9",
+				"semver": "^7.3.5",
+				"vue-eslint-parser": "^9.0.1",
+				"xml-name-validator": "^4.0.0"
+			}
+		},
+		"eslint-scope": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+			"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+			"dev": true,
+			"requires": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^4.1.1"
+			}
+		},
+		"eslint-utils": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+			"integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+			"dev": true,
+			"requires": {
+				"eslint-visitor-keys": "^2.0.0"
+			},
+			"dependencies": {
+				"eslint-visitor-keys": {
+					"version": "2.1.0",
+					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+					"integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+					"dev": true
+				}
+			}
+		},
+		"eslint-visitor-keys": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+			"integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+			"dev": true
+		},
+		"espree": {
+			"version": "9.3.2",
+			"resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+			"integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+			"dev": true,
+			"requires": {
+				"acorn": "^8.7.1",
+				"acorn-jsx": "^5.3.2",
+				"eslint-visitor-keys": "^3.3.0"
+			}
+		},
+		"esquery": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+			"integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+			"dev": true,
+			"requires": {
+				"estraverse": "^5.1.0"
+			},
+			"dependencies": {
+				"estraverse": {
+					"version": "5.3.0",
+					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+					"dev": true
+				}
+			}
+		},
+		"esrecurse": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+			"dev": true,
+			"requires": {
+				"estraverse": "^5.2.0"
+			},
+			"dependencies": {
+				"estraverse": {
+					"version": "5.3.0",
+					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+					"dev": true
+				}
+			}
+		},
+		"estraverse": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+			"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+			"dev": true
+		},
+		"estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+		},
+		"esutils": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+			"dev": true
+		},
+		"fast-deep-equal": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+			"dev": true
+		},
+		"fast-glob": {
+			"version": "3.2.11",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+			"integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+			"dev": true,
+			"requires": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.4"
+			},
+			"dependencies": {
+				"glob-parent": {
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+					"dev": true,
+					"requires": {
+						"is-glob": "^4.0.1"
+					}
+				}
+			}
+		},
+		"fast-json-stable-stringify": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+			"dev": true
+		},
+		"fast-levenshtein": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+			"dev": true
+		},
+		"fastq": {
+			"version": "1.13.0",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+			"integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+			"dev": true,
+			"requires": {
+				"reusify": "^1.0.4"
+			}
+		},
+		"file-entry-cache": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+			"integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+			"dev": true,
+			"requires": {
+				"flat-cache": "^3.0.4"
+			}
+		},
+		"fill-range": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+			"dev": true,
+			"requires": {
+				"to-regex-range": "^5.0.1"
+			}
+		},
+		"flat-cache": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+			"integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+			"dev": true,
+			"requires": {
+				"flatted": "^3.1.0",
+				"rimraf": "^3.0.2"
+			}
+		},
+		"flatted": {
+			"version": "3.2.6",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.6.tgz",
+			"integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
+			"dev": true
+		},
+		"follow-redirects": {
+			"version": "1.15.1",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+			"integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
+		},
+		"form-data": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+			"requires": {
+				"asynckit": "^0.4.0",
+				"combined-stream": "^1.0.8",
+				"mime-types": "^2.1.12"
+			}
+		},
+		"fs.realpath": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+			"dev": true
+		},
+		"fsevents": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+			"dev": true,
+			"optional": true
+		},
+		"function-bind": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+			"dev": true
+		},
+		"functional-red-black-tree": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+			"integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
+			"dev": true
+		},
+		"glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dev": true,
+			"requires": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			}
+		},
+		"glob-parent": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+			"dev": true,
+			"requires": {
+				"is-glob": "^4.0.3"
+			}
+		},
+		"globals": {
+			"version": "13.16.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-13.16.0.tgz",
+			"integrity": "sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==",
+			"dev": true,
+			"requires": {
+				"type-fest": "^0.20.2"
+			}
+		},
+		"globby": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+			"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+			"dev": true,
+			"requires": {
+				"array-union": "^2.1.0",
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.2.9",
+				"ignore": "^5.2.0",
+				"merge2": "^1.4.1",
+				"slash": "^3.0.0"
+			}
+		},
+		"good-listener": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+			"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+			"requires": {
+				"delegate": "^3.1.2"
+			}
+		},
+		"has": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+			"dev": true,
+			"requires": {
+				"function-bind": "^1.1.1"
+			}
+		},
+		"has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true
+		},
+		"ignore": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+			"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+			"dev": true
+		},
+		"immutable": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+			"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+			"dev": true
+		},
+		"import-fresh": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+			"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+			"dev": true,
+			"requires": {
+				"parent-module": "^1.0.0",
+				"resolve-from": "^4.0.0"
+			}
+		},
+		"imurmurhash": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+			"integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+			"dev": true
+		},
+		"inflight": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+			"dev": true,
+			"requires": {
+				"once": "^1.3.0",
+				"wrappy": "1"
+			}
+		},
+		"inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"dev": true
+		},
+		"is-binary-path": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+			"dev": true,
+			"requires": {
+				"binary-extensions": "^2.0.0"
+			}
+		},
+		"is-core-module": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
+			"integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
+			"dev": true,
+			"requires": {
+				"has": "^1.0.3"
+			}
+		},
+		"is-extglob": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"dev": true
+		},
+		"is-glob": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"dev": true,
+			"requires": {
+				"is-extglob": "^2.1.1"
+			}
+		},
+		"is-number": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+			"dev": true
+		},
+		"isexe": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+			"dev": true
+		},
+		"js-cookie": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+			"integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
+		},
+		"js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dev": true,
+			"requires": {
+				"argparse": "^2.0.1"
+			}
+		},
+		"json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+			"dev": true
+		},
+		"json-stable-stringify-without-jsonify": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+			"dev": true
+		},
+		"jsplumb": {
+			"version": "2.15.6",
+			"resolved": "https://registry.npmjs.org/jsplumb/-/jsplumb-2.15.6.tgz",
+			"integrity": "sha512-sIpbpz5eMVM+vV+MQzFCidlaa1RsknrQs6LOTKYDjYUDdTAi2AN2bFi94TxB33TifcIsRNV1jebcaxg0tCoPzg=="
+		},
+		"klona": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
+			"integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
+			"dev": true
+		},
+		"levn": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+			"integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+			"dev": true,
+			"requires": {
+				"prelude-ls": "^1.2.1",
+				"type-check": "~0.4.0"
+			}
+		},
+		"lodash": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+		},
+		"lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+		},
+		"lodash-unified": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
+			"integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g=="
+		},
+		"lodash.merge": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+			"dev": true
+		},
+		"lru-cache": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+			"dev": true,
+			"requires": {
+				"yallist": "^4.0.0"
+			}
+		},
+		"magic-string": {
+			"version": "0.25.9",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+			"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+			"requires": {
+				"sourcemap-codec": "^1.4.8"
+			}
+		},
+		"memoize-one": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+			"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+		},
+		"merge2": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+			"dev": true
+		},
+		"micromatch": {
+			"version": "4.0.5",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+			"dev": true,
+			"requires": {
+				"braces": "^3.0.2",
+				"picomatch": "^2.3.1"
+			}
+		},
+		"mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+		},
+		"mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"requires": {
+				"mime-db": "1.52.0"
+			}
+		},
+		"minimatch": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+			"dev": true,
+			"requires": {
+				"brace-expansion": "^1.1.7"
+			}
+		},
+		"mitt": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+			"integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+		},
+		"ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+			"dev": true
+		},
+		"nanoid": {
+			"version": "3.3.4",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+			"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+		},
+		"natural-compare": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+			"dev": true
+		},
+		"neo-async": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+			"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+			"dev": true
+		},
+		"normalize-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+			"dev": true
+		},
+		"normalize-wheel-es": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+			"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+		},
+		"nprogress": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+			"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+		},
+		"nth-check": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+			"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+			"dev": true,
+			"requires": {
+				"boolbase": "^1.0.0"
+			}
+		},
+		"once": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+			"dev": true,
+			"requires": {
+				"wrappy": "1"
+			}
+		},
+		"optionator": {
+			"version": "0.9.1",
+			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+			"integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+			"dev": true,
+			"requires": {
+				"deep-is": "^0.1.3",
+				"fast-levenshtein": "^2.0.6",
+				"levn": "^0.4.1",
+				"prelude-ls": "^1.2.1",
+				"type-check": "^0.4.0",
+				"word-wrap": "^1.2.3"
+			}
+		},
+		"parent-module": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+			"dev": true,
+			"requires": {
+				"callsites": "^3.0.0"
+			}
+		},
+		"path-is-absolute": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+			"dev": true
+		},
+		"path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true
+		},
+		"path-parse": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+			"dev": true
+		},
+		"path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"dev": true
+		},
+		"picocolors": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+		},
+		"picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true
+		},
+		"pinia": {
+			"version": "2.0.16",
+			"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.16.tgz",
+			"integrity": "sha512-9/LMVO+/epny1NBfC77vnps4g3JRezxhhoF1xLUk8mZkUIxVnwfEAIRiAX8mYBTD/KCwZqnDMqXc8w3eU0FQGg==",
+			"requires": {
+				"@vue/devtools-api": "^6.1.4",
+				"vue-demi": "*"
+			},
+			"dependencies": {
+				"vue-demi": {
+					"version": "0.13.5",
+					"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.5.tgz",
+					"integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
+				}
+			}
+		},
+		"postcss": {
+			"version": "8.4.14",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+			"integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+			"requires": {
+				"nanoid": "^3.3.4",
+				"picocolors": "^1.0.0",
+				"source-map-js": "^1.0.2"
+			}
+		},
+		"postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dev": true,
+			"requires": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			}
+		},
+		"prelude-ls": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+			"dev": true
+		},
+		"prettier": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+			"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+			"dev": true
+		},
+		"print-js": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz",
+			"integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg=="
+		},
+		"punycode": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+			"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+			"dev": true
+		},
+		"qrcodejs2-fixes": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/qrcodejs2-fixes/-/qrcodejs2-fixes-0.0.2.tgz",
+			"integrity": "sha512-wMUXYMOixAEJlLnjk5MbLiFaz0gQObWYm/TIFWB5+j7sTY5gPyr09Cx1EpcLYbsgfFdN3wHjrKAhZofTuCBGhg=="
+		},
+		"queue-microtask": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+			"dev": true
+		},
+		"readdirp": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+			"dev": true,
+			"requires": {
+				"picomatch": "^2.2.1"
+			}
+		},
+		"regenerator-runtime": {
+			"version": "0.13.10",
+			"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
+			"integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
+		},
+		"regexpp": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+			"integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+			"dev": true
+		},
+		"resolve": {
+			"version": "1.22.1",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+			"integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+			"dev": true,
+			"requires": {
+				"is-core-module": "^2.9.0",
+				"path-parse": "^1.0.7",
+				"supports-preserve-symlinks-flag": "^1.0.0"
+			}
+		},
+		"resolve-from": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+			"dev": true
+		},
+		"reusify": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+			"dev": true
+		},
+		"rimraf": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+			"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+			"dev": true,
+			"requires": {
+				"glob": "^7.1.3"
+			}
+		},
+		"rollup": {
+			"version": "2.79.0",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.0.tgz",
+			"integrity": "sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==",
+			"dev": true,
+			"requires": {
+				"fsevents": "~2.3.2"
+			}
+		},
+		"run-parallel": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+			"dev": true,
+			"requires": {
+				"queue-microtask": "^1.2.2"
+			}
+		},
+		"sass": {
+			"version": "1.53.0",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
+			"integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+			"dev": true,
+			"requires": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			}
+		},
+		"sass-loader": {
+			"version": "13.0.2",
+			"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.0.2.tgz",
+			"integrity": "sha512-BbiqbVmbfJaWVeOOAu2o7DhYWtcNmTfvroVgFXa6k2hHheMxNAeDHLNoDy/Q5aoaVlz0LH+MbMktKwm9vN/j8Q==",
+			"dev": true,
+			"requires": {
+				"klona": "^2.0.4",
+				"neo-async": "^2.6.2"
+			}
+		},
+		"screenfull": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz",
+			"integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw=="
+		},
+		"select": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+			"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+		},
+		"semver": {
+			"version": "7.3.7",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+			"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+			"dev": true,
+			"requires": {
+				"lru-cache": "^6.0.0"
+			}
+		},
+		"shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
+			"requires": {
+				"shebang-regex": "^3.0.0"
+			}
+		},
+		"shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true
+		},
+		"simple-uploader.js": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/simple-uploader.js/-/simple-uploader.js-0.6.0.tgz",
+			"integrity": "sha512-EXN+o+LD6PVnfzTq/usP8k8yYrI6wKrAx8e+fPcPLVzzttonkyn1KT+Ycx5JnPBSnp6lpiVhNG4JhDJucdPnhA=="
+		},
+		"slash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+			"dev": true
+		},
+		"sortablejs": {
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
+			"integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+		},
+		"source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+		},
+		"source-map-js": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+		},
+		"sourcemap-codec": {
+			"version": "1.4.8",
+			"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+		},
+		"spark-md5": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
+			"integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw=="
+		},
+		"splitpanes": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-3.1.1.tgz",
+			"integrity": "sha512-VUkxDJfIGSvTM/fm/+OSrx8ha9URwE/9B8FPvfzoBuAxVELIHBWpsfnJXIXv77zVwuex//QQL4kTU9SDBPeHjA=="
+		},
+		"strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"requires": {
+				"ansi-regex": "^5.0.1"
+			}
+		},
+		"strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"dev": true
+		},
+		"style-mod": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmmirror.com/style-mod/-/style-mod-4.0.0.tgz",
+			"integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+		},
+		"supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"requires": {
+				"has-flag": "^4.0.0"
+			}
+		},
+		"supports-preserve-symlinks-flag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+			"dev": true
+		},
+		"text-table": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+			"dev": true
+		},
+		"tiny-emitter": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+			"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+		},
+		"to-regex-range": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+			"dev": true,
+			"requires": {
+				"is-number": "^7.0.0"
+			}
+		},
+		"tslib": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+			"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+		},
+		"tsutils": {
+			"version": "3.21.0",
+			"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+			"integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+			"dev": true,
+			"requires": {
+				"tslib": "^1.8.1"
+			},
+			"dependencies": {
+				"tslib": {
+					"version": "1.14.1",
+					"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+					"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+					"dev": true
+				}
+			}
+		},
+		"type-check": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+			"integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+			"dev": true,
+			"requires": {
+				"prelude-ls": "^1.2.1"
+			}
+		},
+		"type-fest": {
+			"version": "0.20.2",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+			"dev": true
+		},
+		"typescript": {
+			"version": "4.7.4",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+			"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+			"dev": true
+		},
+		"uri-js": {
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+			"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+			"dev": true,
+			"requires": {
+				"punycode": "^2.1.0"
+			}
+		},
+		"util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"dev": true
+		},
+		"v8-compile-cache": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+			"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+			"dev": true
+		},
+		"vite": {
+			"version": "2.9.14",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-2.9.14.tgz",
+			"integrity": "sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==",
+			"dev": true,
+			"requires": {
+				"esbuild": "^0.14.27",
+				"fsevents": "~2.3.2",
+				"postcss": "^8.4.13",
+				"resolve": "^1.22.0",
+				"rollup": "^2.59.0"
+			}
+		},
+		"vue": {
+			"version": "3.2.37",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
+			"integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
+			"requires": {
+				"@vue/compiler-dom": "3.2.37",
+				"@vue/compiler-sfc": "3.2.37",
+				"@vue/runtime-dom": "3.2.37",
+				"@vue/server-renderer": "3.2.37",
+				"@vue/shared": "3.2.37"
+			}
+		},
+		"vue-clipboard3": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz",
+			"integrity": "sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==",
+			"requires": {
+				"clipboard": "^2.0.6"
+			}
+		},
+		"vue-codemirror": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmmirror.com/vue-codemirror/-/vue-codemirror-6.1.1.tgz",
+			"integrity": "sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==",
+			"requires": {
+				"@codemirror/commands": "6.x",
+				"@codemirror/language": "6.x",
+				"@codemirror/state": "6.x",
+				"@codemirror/view": "6.x"
+			}
+		},
+		"vue-eslint-parser": {
+			"version": "9.0.3",
+			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",
+			"integrity": "sha512-yL+ZDb+9T0ELG4VIFo/2anAOz8SvBdlqEnQnvJ3M7Scq56DvtjY0VY88bByRZB0D4J0u8olBcfrXTVONXsh4og==",
+			"dev": true,
+			"requires": {
+				"debug": "^4.3.4",
+				"eslint-scope": "^7.1.1",
+				"eslint-visitor-keys": "^3.3.0",
+				"espree": "^9.3.1",
+				"esquery": "^1.4.0",
+				"lodash": "^4.17.21",
+				"semver": "^7.3.6"
+			},
+			"dependencies": {
+				"eslint-scope": {
+					"version": "7.1.1",
+					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+					"integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+					"dev": true,
+					"requires": {
+						"esrecurse": "^4.3.0",
+						"estraverse": "^5.2.0"
+					}
+				},
+				"estraverse": {
+					"version": "5.3.0",
+					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+					"dev": true
+				}
+			}
+		},
+		"vue-grid-layout": {
+			"version": "3.0.0-beta1",
+			"resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz",
+			"integrity": "sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==",
+			"requires": {
+				"@interactjs/actions": "^1.10.2",
+				"@interactjs/auto-start": "^1.10.2",
+				"@interactjs/dev-tools": "^1.10.2",
+				"@interactjs/interactjs": "^1.10.2",
+				"@interactjs/modifiers": "^1.10.2",
+				"element-resize-detector": "^1.2.1",
+				"mitt": "^2.1.0"
+			},
+			"dependencies": {
+				"mitt": {
+					"version": "2.1.0",
+					"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+					"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+				}
+			}
+		},
+		"vue-i18n": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+			"integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+			"requires": {
+				"@intlify/core-base": "9.2.2",
+				"@intlify/shared": "9.2.2",
+				"@intlify/vue-devtools": "9.2.2",
+				"@vue/devtools-api": "^6.2.1"
+			}
+		},
+		"vue-router": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.2.tgz",
+			"integrity": "sha512-5BP1qXFncVRwgV/XnqzsKApdMjQPqWIpoUBdL1ynz8HyLxIX/UDAx7Ql2BjmA5CXT/p61JfZvkpiFWFpaqcfag==",
+			"requires": {
+				"@vue/devtools-api": "^6.1.4"
+			}
+		},
+		"vue-simple-uploader": {
+			"version": "1.0.0-beta.5",
+			"resolved": "https://registry.npmjs.org/vue-simple-uploader/-/vue-simple-uploader-1.0.0-beta.5.tgz",
+			"integrity": "sha512-VJFQvYTqx8vd4OOAopafcHdRp25iBqUywbBDohpS+nLerUbotAfkH4WsCzaTWFFSF2PRLdbPX1yxijADxv+sGg==",
+			"requires": {
+				"simple-uploader.js": "^0.6.0"
+			}
+		},
+		"vue-ueditor-wrap": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmmirror.com/vue-ueditor-wrap/-/vue-ueditor-wrap-3.0.8.tgz",
+			"integrity": "sha512-U1s30pKcz8rr6v2F2ivnomOf1vF1N+n+aNClas4jXfiEf4E5FEtNwkFJBugcyf2VTRFK0UVpx5WspX5nwmImYw==",
+			"requires": {
+				"@babel/runtime": "7.x"
+			}
+		},
+		"w3c-keyname": {
+			"version": "2.2.6",
+			"resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
+			"integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg=="
+		},
+		"which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"requires": {
+				"isexe": "^2.0.0"
+			}
+		},
+		"word-wrap": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+			"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+			"dev": true
+		},
+		"wrappy": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+			"dev": true
+		},
+		"xml-name-validator": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"dev": true
+		},
+		"yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+			"dev": true
+		},
+		"zrender": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+			"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+			"requires": {
+				"tslib": "2.3.0"
+			}
+		}
+	}
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d6fcd8d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,88 @@
+{
+  "name": "vue-next-admin",
+  "version": "2.2.0",
+  "description": "vue3 vite next admin template",
+  "author": "lyt_20201208",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite --force",
+    "build": "vite build",
+    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
+  },
+  "dependencies": {
+    "@codemirror/lang-javascript": "^6.1.1",
+    "@codemirror/theme-one-dark": "^6.1.0",
+    "@element-plus/icons-vue": "^2.0.6",
+    "axios": "^0.27.2",
+    "codemirror": "^6.0.1",
+    "countup.js": "^2.3.2",
+    "cropperjs": "^1.5.12",
+    "echarts": "^5.3.3",
+    "echarts-gl": "^2.0.9",
+    "echarts-wordcloud": "^2.0.0",
+    "element-plus": "^2.2.9",
+    "js-cookie": "^3.0.1",
+    "jsplumb": "^2.15.6",
+    "lodash": "^4.17.21",
+    "mitt": "^3.0.0",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.0.16",
+    "print-js": "^1.6.0",
+    "qrcodejs2-fixes": "^0.0.2",
+    "screenfull": "^6.0.2",
+    "sortablejs": "^1.15.0",
+    "spark-md5": "^3.0.2",
+    "splitpanes": "^3.1.1",
+    "vue": "^3.2.37",
+    "vue-clipboard3": "^2.0.0",
+    "vue-codemirror": "^6.1.1",
+    "vue-grid-layout": "^3.0.0-beta1",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.2",
+    "vue-simple-uploader": "^1.0.0-beta.5",
+    "vue-ueditor-wrap": "^3.0.8"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.6",
+    "@types/nprogress": "^0.2.0",
+    "@types/sortablejs": "^1.13.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vue/compiler-sfc": "^3.2.37",
+    "dotenv": "^16.0.1",
+    "eslint": "^8.20.0",
+    "eslint-plugin-vue": "^9.2.0",
+    "prettier": "^2.7.1",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
+    "typescript": "^4.7.4",
+    "vite": "^2.9.14",
+    "vue-eslint-parser": "^9.0.3"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "bugs": {
+    "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
+  },
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">= 6.0.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "vuejs/vue-next",
+    "element-ui",
+    "element-plus",
+    "vue-next-admin",
+    "next-admin"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/lyt-top/vue-next-admin.git"
+  }
+}
diff --git a/plugins.d.ts b/plugins.d.ts
new file mode 100644
index 0000000..be0457a
--- /dev/null
+++ b/plugins.d.ts
@@ -0,0 +1,4 @@
+declare module 'vue-grid-layout';
+declare module 'qrcodejs2-fixes';
+declare module 'splitpanes';
+declare module 'js-cookie';
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..84d3760
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/js/ueditor/dialogs/anchor/anchor.html b/public/js/ueditor/dialogs/anchor/anchor.html
new file mode 100644
index 0000000..01fe929
--- /dev/null
+++ b/public/js/ueditor/dialogs/anchor/anchor.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+    "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <title></title>
+        <style type="text/css">
+            *{color: #838383;margin: 0;padding: 0}
+            html,body {font-size: 12px;overflow: hidden; }
+            .content{padding:5px 0 0 15px;}
+            input{margin-left:4px;box-sizing:border-box;width:210px;height:30px;line-height:30px;border:1px solid #d7d7d7;border-radius:3px;padding:0 5px;outline:none;}
+        </style>
+    </head>
+    <body>
+        <div class="content">
+            <span><var id="lang_input_anchorName"></var></span><input id="anchorName"  value="" />
+        </div>
+        <script type="text/javascript" src="../internal.js?20220503"></script>
+        <script type="text/javascript">
+            var anchorInput = $G('anchorName'),
+                node = editor.selection.getRange().getClosedNode();
+            if(node && node.tagName == 'IMG' && (node = node.getAttribute('anchorname'))){
+                anchorInput.value = node;
+            }
+            anchorInput.onkeydown = function(evt){
+                evt = evt || window.event;
+                if(evt.keyCode == 13){
+                    editor.execCommand('anchor', anchorInput.value);
+                    dialog.close();
+                    domUtils.preventDefault(evt)
+                }
+            };
+            dialog.onok = function (){
+                editor.execCommand('anchor', anchorInput.value);
+                dialog.close();
+            };
+            $focus(anchorInput);
+        </script>
+    </body>
+</html>
diff --git a/public/js/ueditor/dialogs/attachment/attachment.css b/public/js/ueditor/dialogs/attachment/attachment.css
new file mode 100644
index 0000000..9c61716
--- /dev/null
+++ b/public/js/ueditor/dialogs/attachment/attachment.css
@@ -0,0 +1,681 @@
+@charset "utf-8";
+/* dialog样式 */
+.wrapper {
+    zoom: 1;
+    width: 630px;
+    *width: 626px;
+    height: 380px;
+    margin: 0 auto;
+    padding: 10px;
+    position: relative;
+    font-family: sans-serif;
+}
+
+/*tab样式框大小*/
+.tabhead {
+    float:left;
+}
+.tabbody {
+    width: 100%;
+    height: 346px;
+    position: relative;
+    clear: both;
+}
+
+.tabbody .panel {
+    position: absolute;
+    width: 0;
+    height: 0;
+    background: #fff;
+    overflow: hidden;
+    display: none;
+}
+
+.tabbody .panel.focus {
+    width: 100%;
+    height: 346px;
+    display: block;
+}
+
+/* 上传附件 */
+.tabbody #upload.panel {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+    background: #fff;
+    display: block;
+}
+
+.tabbody #upload.panel.focus {
+    width: 100%;
+    height: 346px;
+    display: block;
+    clip: auto;
+}
+
+#upload .queueList {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+}
+
+#upload p {
+    margin: 0;
+}
+
+.element-invisible {
+    width: 0 !important;
+    height: 0 !important;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+}
+
+#upload .placeholder {
+    margin: 10px;
+    border: 2px dashed #e6e6e6;
+    *border: 0px dashed #e6e6e6;
+    height: 172px;
+    padding-top: 150px;
+    text-align: center;
+    background: url(./images/image.png) center 70px no-repeat;
+    color: #cccccc;
+    font-size: 18px;
+    position: relative;
+    top:0;
+    *top: 10px;
+}
+
+#upload .placeholder .webuploader-pick {
+    font-size: 18px;
+    background: #00b7ee;
+    border-radius: 3px;
+    line-height: 44px;
+    padding: 0 30px;
+    *width: 120px;
+    color: #fff;
+    display: inline-block;
+    margin: 0 auto 20px auto;
+    cursor: pointer;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+#upload .placeholder .webuploader-pick-hover {
+    background: #00a2d4;
+}
+
+
+#filePickerContainer {
+    text-align: center;
+}
+
+#upload .placeholder .flashTip {
+    color: #666666;
+    font-size: 12px;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    bottom: 20px;
+}
+
+#upload .placeholder .flashTip a {
+    color: #0785d1;
+    text-decoration: none;
+}
+
+#upload .placeholder .flashTip a:hover {
+    text-decoration: underline;
+}
+
+#upload .placeholder.webuploader-dnd-over {
+    border-color: #999999;
+}
+
+#upload .filelist {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative;
+    height: 300px;
+}
+
+#upload .filelist:after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    clear: both;
+}
+
+#upload .filelist li {
+    width: 113px;
+    height: 113px;
+    background: url(./images/bg.png);
+    text-align: center;
+    margin: 9px 0 0 9px;
+    *margin: 6px 0 0 6px;
+    position: relative;
+    display: block;
+    float: left;
+    overflow: hidden;
+    font-size: 12px;
+}
+
+#upload .filelist li p.log {
+    position: relative;
+    top: -45px;
+}
+
+#upload .filelist li p.title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    top: 5px;
+    text-indent: 5px;
+    text-align: left;
+}
+
+#upload .filelist li p.progress {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    height: 8px;
+    overflow: hidden;
+    z-index: 50;
+    margin: 0;
+    border-radius: 0;
+    background: none;
+    -webkit-box-shadow: 0 0 0;
+}
+
+#upload .filelist li p.progress span {
+    display: none;
+    overflow: hidden;
+    width: 0;
+    height: 100%;
+    background: #1483d8 url(./images/progress.png) repeat-x;
+
+    -webit-transition: width 200ms linear;
+    -moz-transition: width 200ms linear;
+    -o-transition: width 200ms linear;
+    -ms-transition: width 200ms linear;
+    transition: width 200ms linear;
+
+    -webkit-animation: progressmove 2s linear infinite;
+    -moz-animation: progressmove 2s linear infinite;
+    -o-animation: progressmove 2s linear infinite;
+    -ms-animation: progressmove 2s linear infinite;
+    animation: progressmove 2s linear infinite;
+
+    -webkit-transform: translateZ(0);
+}
+
+@-webkit-keyframes progressmove {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 17px 0;
+    }
+}
+
+@-moz-keyframes progressmove {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 17px 0;
+    }
+}
+
+@keyframes progressmove {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 17px 0;
+    }
+}
+
+#upload .filelist li p.imgWrap {
+    position: relative;
+    z-index: 2;
+    line-height: 113px;
+    vertical-align: middle;
+    overflow: hidden;
+    width: 113px;
+    height: 113px;
+
+    -webkit-transform-origin: 50% 50%;
+    -moz-transform-origin: 50% 50%;
+    -o-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+
+    -webit-transition: 200ms ease-out;
+    -moz-transition: 200ms ease-out;
+    -o-transition: 200ms ease-out;
+    -ms-transition: 200ms ease-out;
+    transition: 200ms ease-out;
+}
+#upload .filelist li p.imgWrap.notimage {
+    margin-top: 0;
+    width: 111px;
+    height: 111px;
+    border: 1px #eeeeee solid;
+}
+#upload .filelist li p.imgWrap.notimage i.file-preview {
+    margin-top: 15px;
+}
+
+#upload .filelist li img {
+    width: 100%;
+}
+
+#upload .filelist li p.error {
+    background: #f43838;
+    color: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 28px;
+    line-height: 28px;
+    width: 100%;
+    z-index: 100;
+    display:none;
+}
+
+#upload .filelist li .success {
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 40px;
+    width: 100%;
+    z-index: 200;
+    background: url(./images/success.png) no-repeat right bottom;
+    background-image: url(./images/success.gif) \9;
+}
+
+#upload .filelist li.filePickerBlock {
+    width: 113px;
+    height: 113px;
+    background: url(./images/image.png) no-repeat center 12px;
+    border: 1px solid #eeeeee;
+    border-radius: 0;
+}
+#upload .filelist li.filePickerBlock div.webuploader-pick  {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    background: none;
+    font-size: 0;
+}
+
+#upload .filelist div.file-panel {
+    position: absolute;
+    height: 0;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000') \0;
+    background: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    z-index: 300;
+}
+
+#upload .filelist div.file-panel span {
+    width: 24px;
+    height: 24px;
+    display: inline;
+    float: right;
+    text-indent: -9999px;
+    overflow: hidden;
+    background: url(./images/icons.png) no-repeat;
+    background: url(./images/icons.gif) no-repeat \9;
+    margin: 5px 1px 1px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#upload .filelist div.file-panel span.rotateLeft {
+    display:none;
+    background-position: 0 -24px;
+}
+
+#upload .filelist div.file-panel span.rotateLeft:hover {
+    background-position: 0 0;
+}
+
+#upload .filelist div.file-panel span.rotateRight {
+    display:none;
+    background-position: -24px -24px;
+}
+
+#upload .filelist div.file-panel span.rotateRight:hover {
+    background-position: -24px 0;
+}
+
+#upload .filelist div.file-panel span.cancel {
+    background-position: -48px -24px;
+}
+
+#upload .filelist div.file-panel span.cancel:hover {
+    background-position: -48px 0;
+}
+
+#upload .statusBar {
+    height: 45px;
+    border-bottom: 1px solid #dadada;
+    margin: 0 10px;
+    padding: 0;
+    line-height: 45px;
+    vertical-align: middle;
+    position: relative;
+}
+
+#upload .statusBar .progress {
+    border: 1px solid #1483d8;
+    width: 198px;
+    background: #fff;
+    height: 18px;
+    position: absolute;
+    top: 12px;
+    display: none;
+    text-align: center;
+    line-height: 18px;
+    color: #6dbfff;
+    margin: 0 10px 0 0;
+}
+#upload .statusBar .progress span.percentage {
+    width: 0;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: #1483d8;
+    position: absolute;
+}
+#upload .statusBar .progress span.text {
+    position: relative;
+    z-index: 10;
+}
+
+#upload .statusBar .info {
+    display: inline-block;
+    font-size: 14px;
+    color: #666666;
+}
+
+#upload .statusBar .btns {
+    position: absolute;
+    top: 7px;
+    right: 0;
+    line-height: 30px;
+}
+
+#filePickerBtn {
+    display: inline-block;
+    float: left;
+}
+#upload .statusBar .btns .webuploader-pick,
+#upload .statusBar .btns .uploadBtn,
+#upload .statusBar .btns .uploadBtn.state-uploading,
+#upload .statusBar .btns .uploadBtn.state-paused {
+    background: #ffffff;
+    border: 1px solid #cfcfcf;
+    color: #565656;
+    padding: 0 18px;
+    display: inline-block;
+    border-radius: 3px;
+    margin-left: 10px;
+    cursor: pointer;
+    font-size: 14px;
+    float: left;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+#upload .statusBar .btns .webuploader-pick-hover,
+#upload .statusBar .btns .uploadBtn:hover,
+#upload .statusBar .btns .uploadBtn.state-uploading:hover,
+#upload .statusBar .btns .uploadBtn.state-paused:hover {
+    background: #f0f0f0;
+}
+
+#upload .statusBar .btns .uploadBtn,
+#upload .statusBar .btns .uploadBtn.state-paused{
+    background: #00b7ee;
+    color: #fff;
+    border-color: transparent;
+}
+#upload .statusBar .btns .uploadBtn:hover,
+#upload .statusBar .btns .uploadBtn.state-paused:hover{
+    background: #00a2d4;
+}
+
+#upload .statusBar .btns .uploadBtn.disabled {
+    pointer-events: none;
+    filter:alpha(opacity=60);
+    -moz-opacity:0.6;
+    -khtml-opacity: 0.6;
+    opacity: 0.6;
+}
+
+
+
+/* 图片管理样式 */
+#online {
+    width: 100%;
+    height: 336px;
+    padding: 10px 0 0 0;
+}
+#online #fileList{
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative;
+}
+#online ul {
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+#online li {
+    float: left;
+    display: block;
+    list-style: none;
+    padding: 0;
+    width: 113px;
+    height: 113px;
+    margin: 0 0 9px 9px;
+    *margin: 0 0 6px 6px;
+    background-color: #eee;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+}
+#online li.clearFloat {
+    float: none;
+    clear: both;
+    display: block;
+    width:0;
+    height:0;
+    margin: 0;
+    padding: 0;
+}
+#online li img {
+    cursor: pointer;
+}
+#online li div.file-wrapper {
+    cursor: pointer;
+    position: absolute;
+    display: block;
+    width: 111px;
+    height: 111px;
+    border: 1px solid #eee;
+    background: url("./images/bg.png") repeat;
+}
+#online li div span.file-title{
+    display: block;
+    padding: 0 3px;
+    margin: 3px 0 0 0;
+    font-size: 12px;
+    height: 15px;
+    color: #555555;
+    text-align: center;
+    width: 107px;
+    white-space: nowrap;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+#online li .icon {
+    cursor: pointer;
+    width: 113px;
+    height: 113px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    border: 0;
+    background-repeat: no-repeat;
+}
+#online li .icon:hover {
+    width: 107px;
+    height: 107px;
+    border: 3px solid #1094fa;
+}
+#online li.selected .icon {
+    background-image: url(images/success.png);
+    background-image: url(images/success.gif) \9;
+    background-position: 75px 75px;
+}
+#online li.selected .icon:hover {
+    width: 107px;
+    height: 107px;
+    border: 3px solid #1094fa;
+    background-position: 72px 72px;
+}
+
+
+/* 在线文件的文件预览图标 */
+i.file-preview {
+    display: block;
+    margin: 10px auto;
+    width: 70px;
+    height: 70px;
+    background-image: url("./images/file-icons.png");
+    background-image: url("./images/file-icons.gif") \9;
+    background-position: -140px center;
+    background-repeat: no-repeat;
+}
+i.file-preview.file-type-dir{
+    background-position: 0 center;
+}
+i.file-preview.file-type-file{
+    background-position: -140px center;
+}
+i.file-preview.file-type-filelist{
+    background-position: -210px center;
+}
+i.file-preview.file-type-zip,
+i.file-preview.file-type-rar,
+i.file-preview.file-type-7z,
+i.file-preview.file-type-tar,
+i.file-preview.file-type-gz,
+i.file-preview.file-type-bz2{
+    background-position: -280px center;
+}
+i.file-preview.file-type-xls,
+i.file-preview.file-type-xlsx{
+    background-position: -350px center;
+}
+i.file-preview.file-type-doc,
+i.file-preview.file-type-docx{
+    background-position: -420px center;
+}
+i.file-preview.file-type-ppt,
+i.file-preview.file-type-pptx{
+    background-position: -490px center;
+}
+i.file-preview.file-type-vsd{
+    background-position: -560px center;
+}
+i.file-preview.file-type-pdf{
+    background-position: -630px center;
+}
+i.file-preview.file-type-txt,
+i.file-preview.file-type-md,
+i.file-preview.file-type-json,
+i.file-preview.file-type-htm,
+i.file-preview.file-type-xml,
+i.file-preview.file-type-html,
+i.file-preview.file-type-js,
+i.file-preview.file-type-css,
+i.file-preview.file-type-php,
+i.file-preview.file-type-jsp,
+i.file-preview.file-type-asp{
+    background-position: -700px center;
+}
+i.file-preview.file-type-apk{
+    background-position: -770px center;
+}
+i.file-preview.file-type-exe{
+    background-position: -840px center;
+}
+i.file-preview.file-type-ipa{
+    background-position: -910px center;
+}
+i.file-preview.file-type-mp4,
+i.file-preview.file-type-swf,
+i.file-preview.file-type-mkv,
+i.file-preview.file-type-avi,
+i.file-preview.file-type-flv,
+i.file-preview.file-type-mov,
+i.file-preview.file-type-mpg,
+i.file-preview.file-type-mpeg,
+i.file-preview.file-type-ogv,
+i.file-preview.file-type-webm,
+i.file-preview.file-type-rm,
+i.file-preview.file-type-rmvb{
+    background-position: -980px center;
+}
+i.file-preview.file-type-ogg,
+i.file-preview.file-type-wav,
+i.file-preview.file-type-wmv,
+i.file-preview.file-type-mid,
+i.file-preview.file-type-mp3{
+    background-position: -1050px center;
+}
+i.file-preview.file-type-jpg,
+i.file-preview.file-type-jpeg,
+i.file-preview.file-type-gif,
+i.file-preview.file-type-bmp,
+i.file-preview.file-type-png,
+i.file-preview.file-type-psd{
+    background-position: -140px center;
+}
diff --git a/public/js/ueditor/dialogs/attachment/attachment.html b/public/js/ueditor/dialogs/attachment/attachment.html
new file mode 100644
index 0000000..071fe71
--- /dev/null
+++ b/public/js/ueditor/dialogs/attachment/attachment.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>ueditor图片对话框</title>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+
+    <!-- jquery -->
+    <script type="text/javascript" src="../../third-party/jquery-1.10.2.js?20220503"></script>
+
+    <!-- webuploader -->
+    <script src="../../third-party/webuploader/webuploader.js?20220503"></script>
+    <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css?20220503">
+
+    <!-- attachment dialog -->
+    <link rel="stylesheet" href="attachment.css?20220503" type="text/css" />
+</head>
+<body>
+
+    <div class="wrapper">
+        <div id="tabhead" class="tabhead">
+            <span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
+            <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
+        </div>
+        <div id="tabbody" class="tabbody">
+            <!-- 上传图片 -->
+            <div id="upload" class="panel focus">
+                <div id="queueList" class="queueList">
+                    <div class="statusBar element-invisible">
+                        <div class="progress">
+                            <span class="text">0%</span>
+                            <span class="percentage"></span>
+                        </div><div class="info"></div>
+                        <div class="btns">
+                            <div id="filePickerBtn"></div>
+                            <div class="uploadBtn"><var id="lang_start_upload"></var></div>
+                        </div>
+                    </div>
+                    <div id="dndArea" class="placeholder">
+                        <div class="filePickerContainer">
+                            <div id="filePickerReady"></div>
+                        </div>
+                    </div>
+                    <ul class="filelist element-invisible">
+                        <li id="filePickerBlock" class="filePickerBlock"></li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- 在线图片 -->
+            <div id="online" class="panel">
+                <div id="fileList"><var id="lang_imgLoading"></var></div>
+            </div>
+
+        </div>
+    </div>
+    <script type="text/javascript" src="attachment.js?20220503"></script>
+
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/attachment/attachment.js b/public/js/ueditor/dialogs/attachment/attachment.js
new file mode 100644
index 0000000..5e73d5e
--- /dev/null
+++ b/public/js/ueditor/dialogs/attachment/attachment.js
@@ -0,0 +1,760 @@
+/**
+ * User: Jinqn
+ * Date: 14-04-08
+ * Time: 下午16:34
+ * 上传图片对话框逻辑代码,包括tab: 远程图片/上传图片/在线图片/搜索图片
+ */
+
+(function () {
+
+    var uploadFile,
+        onlineFile;
+
+    window.onload = function () {
+        initTabs();
+        initButtons();
+    };
+
+    /* 初始化tab标签 */
+    function initTabs() {
+        var tabs = $G('tabhead').children;
+        for (var i = 0; i < tabs.length; i++) {
+            domUtils.on(tabs[i], "click", function (e) {
+                var target = e.target || e.srcElement;
+                setTabFocus(target.getAttribute('data-content-id'));
+            });
+        }
+
+        setTabFocus('upload');
+    }
+
+    /* 初始化tabbody */
+    function setTabFocus(id) {
+        if(!id) return;
+        var i, bodyId, tabs = $G('tabhead').children;
+        for (i = 0; i < tabs.length; i++) {
+            bodyId = tabs[i].getAttribute('data-content-id')
+            if (bodyId == id) {
+                domUtils.addClass(tabs[i], 'focus');
+                domUtils.addClass($G(bodyId), 'focus');
+            } else {
+                domUtils.removeClasses(tabs[i], 'focus');
+                domUtils.removeClasses($G(bodyId), 'focus');
+            }
+        }
+        switch (id) {
+            case 'upload':
+                uploadFile = uploadFile || new UploadFile('queueList');
+                break;
+            case 'online':
+                onlineFile = onlineFile || new OnlineFile('fileList');
+                break;
+        }
+    }
+
+    /* 初始化onok事件 */
+    function initButtons() {
+
+        dialog.onok = function () {
+            var list = [], id, tabs = $G('tabhead').children;
+            for (var i = 0; i < tabs.length; i++) {
+                if (domUtils.hasClass(tabs[i], 'focus')) {
+                    id = tabs[i].getAttribute('data-content-id');
+                    break;
+                }
+            }
+
+            switch (id) {
+                case 'upload':
+                    list = uploadFile.getInsertList();
+                    var count = uploadFile.getQueueCount();
+                    if (count) {
+                        $('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
+                        return false;
+                    }
+                    break;
+                case 'online':
+                    list = onlineFile.getInsertList();
+                    break;
+            }
+
+            editor.execCommand('insertfile', list);
+        };
+    }
+
+
+    /* 上传附件 */
+    function UploadFile(target) {
+        this.$wrap = target.constructor == String ? $('#' + target) : $(target);
+        this.init();
+    }
+    UploadFile.prototype = {
+        init: function () {
+            this.fileList = [];
+            this.initContainer();
+            this.initUploader();
+        },
+        initContainer: function () {
+            this.$queue = this.$wrap.find('.filelist');
+        },
+        /* 初始化容器 */
+        initUploader: function () {
+            var _this = this,
+                $ = jQuery,    // just in case. Make sure it's not an other libaray.
+                $wrap = _this.$wrap,
+            // 图片容器
+                $queue = $wrap.find('.filelist'),
+            // 状态栏，包括进度和控制按钮
+                $statusBar = $wrap.find('.statusBar'),
+            // 文件总体选择信息。
+                $info = $statusBar.find('.info'),
+            // 上传按钮
+                $upload = $wrap.find('.uploadBtn'),
+            // 上传按钮
+                $filePickerBtn = $wrap.find('.filePickerBtn'),
+            // 上传按钮
+                $filePickerBlock = $wrap.find('.filePickerBlock'),
+            // 没选择文件之前的内容。
+                $placeHolder = $wrap.find('.placeholder'),
+            // 总体进度条
+                $progress = $statusBar.find('.progress').hide(),
+            // 添加的文件数量
+                fileCount = 0,
+            // 添加的文件总大小
+                fileSize = 0,
+            // 优化retina, 在retina下这个值是2
+                ratio = window.devicePixelRatio || 1,
+            // 缩略图大小
+                thumbnailWidth = 113 * ratio,
+                thumbnailHeight = 113 * ratio,
+            // 可能有pedding, ready, uploading, confirm, done.
+                state = '',
+            // 所有文件的进度信息，key为file id
+                percentages = {},
+                supportTransition = (function () {
+                    var s = document.createElement('p').style,
+                        r = 'transition' in s ||
+                            'WebkitTransition' in s ||
+                            'MozTransition' in s ||
+                            'msTransition' in s ||
+                            'OTransition' in s;
+                    s = null;
+                    return r;
+                })(),
+            // WebUploader实例
+                uploader,
+                actionUrl = editor.getActionUrl(editor.getOpt('fileActionName')),
+                fileMaxSize = editor.getOpt('fileMaxSize'),
+                acceptExtensions = (editor.getOpt('fileAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, '');;
+
+            if (!WebUploader.Uploader.support()) {
+                $('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide();
+                return;
+            } else if (!editor.getOpt('fileActionName')) {
+                $('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide();
+                return;
+            }
+
+            uploader = _this.uploader = WebUploader.create({
+                pick: {
+                    id: '#filePickerReady',
+                    label: lang.uploadSelectFile
+                },
+                swf: '../../third-party/webuploader/Uploader.swf',
+                server: actionUrl,
+                fileVal: editor.getOpt('fileFieldName'),
+                duplicate: true,
+                fileSingleSizeLimit: fileMaxSize,
+                compress: false
+            });
+            uploader.addButton({
+                id: '#filePickerBlock'
+            });
+            uploader.addButton({
+                id: '#filePickerBtn',
+                label: lang.uploadAddFile
+            });
+
+            setState('pedding');
+
+            // 当有文件添加进来时执行，负责view的创建
+            function addFile(file) {
+                var $li = $('<li id="' + file.id + '">' +
+                        '<p class="title">' + file.name + '</p>' +
+                        '<p class="imgWrap"></p>' +
+                        '<p class="progress"><span></span></p>' +
+                        '</li>'),
+
+                    $btns = $('<div class="file-panel">' +
+                        '<span class="cancel">' + lang.uploadDelete + '</span>' +
+                        '<span class="rotateRight">' + lang.uploadTurnRight + '</span>' +
+                        '<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li),
+                    $prgress = $li.find('p.progress span'),
+                    $wrap = $li.find('p.imgWrap'),
+                    $info = $('<p class="error"></p>').hide().appendTo($li),
+
+                    showError = function (code) {
+                        switch (code) {
+                            case 'exceed_size':
+                                text = lang.errorExceedSize;
+                                break;
+                            case 'interrupt':
+                                text = lang.errorInterrupt;
+                                break;
+                            case 'http':
+                                text = lang.errorHttp;
+                                break;
+                            case 'not_allow_type':
+                                text = lang.errorFileType;
+                                break;
+                            default:
+                                text = lang.errorUploadRetry;
+                                break;
+                        }
+                        $info.text(text).show();
+                    };
+
+                if (file.getStatus() === 'invalid') {
+                    showError(file.statusText);
+                } else {
+                    $wrap.text(lang.uploadPreview);
+                    if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|'+file.ext.toLowerCase()+'|') == -1) {
+                        $wrap.empty().addClass('notimage').append('<i class="file-preview file-type-' + file.ext.toLowerCase() + '"></i>' +
+                        '<span class="file-title" title="' + file.name + '">' + file.name + '</span>');
+                    } else {
+                        if (browser.ie && browser.version <= 7) {
+                            $wrap.text(lang.uploadNoPreview);
+                        } else {
+                            uploader.makeThumb(file, function (error, src) {
+                                if (error || !src) {
+                                    $wrap.text(lang.uploadNoPreview);
+                                } else {
+                                    var $img = $('<img src="' + src + '">');
+                                    $wrap.empty().append($img);
+                                    $img.on('error', function () {
+                                        $wrap.text(lang.uploadNoPreview);
+                                    });
+                                }
+                            }, thumbnailWidth, thumbnailHeight);
+                        }
+                    }
+                    percentages[ file.id ] = [ file.size, 0 ];
+                    file.rotation = 0;
+
+                    /* 检查文件格式 */
+                    if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) {
+                        showError('not_allow_type');
+                        uploader.removeFile(file);
+                    }
+                }
+
+                file.on('statuschange', function (cur, prev) {
+                    if (prev === 'progress') {
+                        $prgress.hide().width(0);
+                    } else if (prev === 'queued') {
+                        $li.off('mouseenter mouseleave');
+                        $btns.remove();
+                    }
+                    // 成功
+                    if (cur === 'error' || cur === 'invalid') {
+                        showError(file.statusText);
+                        percentages[ file.id ][ 1 ] = 1;
+                    } else if (cur === 'interrupt') {
+                        showError('interrupt');
+                    } else if (cur === 'queued') {
+                        percentages[ file.id ][ 1 ] = 0;
+                    } else if (cur === 'progress') {
+                        $info.hide();
+                        $prgress.css('display', 'block');
+                    } else if (cur === 'complete') {
+                    }
+
+                    $li.removeClass('state-' + prev).addClass('state-' + cur);
+                });
+
+                $li.on('mouseenter', function () {
+                    $btns.stop().animate({height: 30});
+                });
+                $li.on('mouseleave', function () {
+                    $btns.stop().animate({height: 0});
+                });
+
+                $btns.on('click', 'span', function () {
+                    var index = $(this).index(),
+                        deg;
+
+                    switch (index) {
+                        case 0:
+                            uploader.removeFile(file);
+                            return;
+                        case 1:
+                            file.rotation += 90;
+                            break;
+                        case 2:
+                            file.rotation -= 90;
+                            break;
+                    }
+
+                    if (supportTransition) {
+                        deg = 'rotate(' + file.rotation + 'deg)';
+                        $wrap.css({
+                            '-webkit-transform': deg,
+                            '-mos-transform': deg,
+                            '-o-transform': deg,
+                            'transform': deg
+                        });
+                    } else {
+                        $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
+                    }
+
+                });
+
+                $li.insertBefore($filePickerBlock);
+            }
+
+            // 负责view的销毁
+            function removeFile(file) {
+                var $li = $('#' + file.id);
+                delete percentages[ file.id ];
+                updateTotalProgress();
+                $li.off().find('.file-panel').off().end().remove();
+            }
+
+            function updateTotalProgress() {
+                var loaded = 0,
+                    total = 0,
+                    spans = $progress.children(),
+                    percent;
+
+                $.each(percentages, function (k, v) {
+                    total += v[ 0 ];
+                    loaded += v[ 0 ] * v[ 1 ];
+                });
+
+                percent = total ? loaded / total : 0;
+
+                spans.eq(0).text(Math.round(percent * 100) + '%');
+                spans.eq(1).css('width', Math.round(percent * 100) + '%');
+                updateStatus();
+            }
+
+            function setState(val, files) {
+
+                if (val != state) {
+
+                    var stats = uploader.getStats();
+
+                    $upload.removeClass('state-' + state);
+                    $upload.addClass('state-' + val);
+
+                    switch (val) {
+
+                        /* 未选择文件 */
+                        case 'pedding':
+                            $queue.addClass('element-invisible');
+                            $statusBar.addClass('element-invisible');
+                            $placeHolder.removeClass('element-invisible');
+                            $progress.hide(); $info.hide();
+                            uploader.refresh();
+                            break;
+
+                        /* 可以开始上传 */
+                        case 'ready':
+                            $placeHolder.addClass('element-invisible');
+                            $queue.removeClass('element-invisible');
+                            $statusBar.removeClass('element-invisible');
+                            $progress.hide(); $info.show();
+                            $upload.text(lang.uploadStart);
+                            uploader.refresh();
+                            break;
+
+                        /* 上传中 */
+                        case 'uploading':
+                            $progress.show(); $info.hide();
+                            $upload.text(lang.uploadPause);
+                            break;
+
+                        /* 暂停上传 */
+                        case 'paused':
+                            $progress.show(); $info.hide();
+                            $upload.text(lang.uploadContinue);
+                            break;
+
+                        case 'confirm':
+                            $progress.show(); $info.hide();
+                            $upload.text(lang.uploadStart);
+
+                            stats = uploader.getStats();
+                            if (stats.successNum && !stats.uploadFailNum) {
+                                setState('finish');
+                                return;
+                            }
+                            break;
+
+                        case 'finish':
+                            $progress.hide(); $info.show();
+                            if (stats.uploadFailNum) {
+                                $upload.text(lang.uploadRetry);
+                            } else {
+                                $upload.text(lang.uploadStart);
+                            }
+                            break;
+                    }
+
+                    state = val;
+                    updateStatus();
+
+                }
+
+                if (!_this.getQueueCount()) {
+                    $upload.addClass('disabled')
+                } else {
+                    $upload.removeClass('disabled')
+                }
+
+            }
+
+            function updateStatus() {
+                var text = '', stats;
+
+                if (state === 'ready') {
+                    text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize));
+                } else if (state === 'confirm') {
+                    stats = uploader.getStats();
+                    if (stats.uploadFailNum) {
+                        text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum);
+                    }
+                } else {
+                    stats = uploader.getStats();
+                    text = lang.updateStatusFinish.replace('_', fileCount).
+                        replace('_KB', WebUploader.formatSize(fileSize)).
+                        replace('_', stats.successNum);
+
+                    if (stats.uploadFailNum) {
+                        text += lang.updateStatusError.replace('_', stats.uploadFailNum);
+                    }
+                }
+
+                $info.html(text);
+            }
+
+            uploader.on('fileQueued', function (file) {
+                if (file.ext && acceptExtensions.indexOf(file.ext.toLowerCase()) != -1 && file.size <= fileMaxSize) {
+                    fileCount++;
+                    fileSize += file.size;
+                }
+
+                if (fileCount === 1) {
+                    $placeHolder.addClass('element-invisible');
+                    $statusBar.show();
+                }
+
+                addFile(file);
+            });
+
+            uploader.on('fileDequeued', function (file) {
+                if (file.ext && acceptExtensions.indexOf(file.ext.toLowerCase()) != -1 && file.size <= fileMaxSize) {
+                    fileCount--;
+                    fileSize -= file.size;
+                }
+
+                removeFile(file);
+                updateTotalProgress();
+            });
+
+            uploader.on('filesQueued', function (file) {
+                if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) {
+                    setState('ready');
+                }
+                updateTotalProgress();
+            });
+
+            uploader.on('all', function (type, files) {
+                switch (type) {
+                    case 'uploadFinished':
+                        setState('confirm', files);
+                        break;
+                    case 'startUpload':
+                        /* 添加额外的GET参数 */
+                        var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
+                            url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);
+                        uploader.option('server', url);
+                        setState('uploading', files);
+                        break;
+                    case 'stopUpload':
+                        setState('paused', files);
+                        break;
+                }
+            });
+
+            uploader.on('uploadBeforeSend', function (file, data, header) {
+                //这里可以通过data对象添加POST参数
+                if (actionUrl.toLowerCase().indexOf('jsp') != -1) {
+                    header['X_Requested_With'] = 'XMLHttpRequest';
+                }
+            });
+
+            uploader.on('uploadProgress', function (file, percentage) {
+                var $li = $('#' + file.id),
+                    $percent = $li.find('.progress span');
+
+                $percent.css('width', percentage * 100 + '%');
+                percentages[ file.id ][ 1 ] = percentage;
+                updateTotalProgress();
+            });
+
+            uploader.on('uploadSuccess', function (file, ret) {
+                var $file = $('#' + file.id);
+                try {
+                    var responseText = (ret._raw || ret),
+                        json = utils.str2json(responseText);
+                    if (json.state == 'SUCCESS') {
+                        _this.fileList.push(json);
+                        $file.append('<span class="success"></span>');
+                    } else {
+                        $file.find('.error').text(json.state).show();
+                    }
+                } catch (e) {
+                    $file.find('.error').text(lang.errorServerUpload).show();
+                }
+            });
+
+            uploader.on('uploadError', function (file, code) {
+            });
+            uploader.on('error', function (code, file) {
+                if (code == 'Q_TYPE_DENIED' || code == 'F_EXCEED_SIZE') {
+                    addFile(file);
+                }
+            });
+            uploader.on('uploadComplete', function (file, ret) {
+            });
+
+            $upload.on('click', function () {
+                if ($(this).hasClass('disabled')) {
+                    return false;
+                }
+
+                if (state === 'ready') {
+                    uploader.upload();
+                } else if (state === 'paused') {
+                    uploader.upload();
+                } else if (state === 'uploading') {
+                    uploader.stop();
+                }
+            });
+
+            $upload.addClass('state-' + state);
+            updateTotalProgress();
+        },
+        getQueueCount: function () {
+            var file, i, status, readyFile = 0, files = this.uploader.getFiles();
+            for (i = 0; file = files[i++]; ) {
+                status = file.getStatus();
+                if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++;
+            }
+            return readyFile;
+        },
+        getInsertList: function () {
+            var i, link, data, list = [],
+                prefix = editor.getOpt('fileUrlPrefix');
+            for (i = 0; i < this.fileList.length; i++) {
+                data = this.fileList[i];
+                link = data.url;
+                list.push({
+                    title: data.original || link.substr(link.lastIndexOf('/') + 1),
+                    url: prefix + link
+                });
+            }
+            return list;
+        }
+    };
+
+
+    /* 在线附件 */
+    function OnlineFile(target) {
+        this.container = utils.isString(target) ? document.getElementById(target) : target;
+        this.init();
+    }
+    OnlineFile.prototype = {
+        init: function () {
+            this.initContainer();
+            this.initEvents();
+            this.initData();
+        },
+        /* 初始化容器 */
+        initContainer: function () {
+            this.container.innerHTML = '';
+            this.list = document.createElement('ul');
+            this.clearFloat = document.createElement('li');
+
+            domUtils.addClass(this.list, 'list');
+            domUtils.addClass(this.clearFloat, 'clearFloat');
+
+            this.list.appendChild(this.clearFloat);
+            this.container.appendChild(this.list);
+        },
+        /* 初始化滚动事件,滚动到地步自动拉取数据 */
+        initEvents: function () {
+            var _this = this;
+
+            /* 滚动拉取图片 */
+            domUtils.on($G('fileList'), 'scroll', function(e){
+                var panel = this;
+                if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
+                    _this.getFileData();
+                }
+            });
+            /* 选中图片 */
+            domUtils.on(this.list, 'click', function (e) {
+                var target = e.target || e.srcElement,
+                    li = target.parentNode;
+
+                if (li.tagName.toLowerCase() == 'li') {
+                    if (domUtils.hasClass(li, 'selected')) {
+                        domUtils.removeClasses(li, 'selected');
+                    } else {
+                        domUtils.addClass(li, 'selected');
+                    }
+                }
+            });
+        },
+        /* 初始化第一次的数据 */
+        initData: function () {
+
+            /* 拉取数据需要使用的值 */
+            this.state = 0;
+            this.listSize = editor.getOpt('fileManagerListSize');
+            this.listIndex = 0;
+            this.listEnd = false;
+
+            /* 第一次拉取数据 */
+            this.getFileData();
+        },
+        /* 向后台拉取图片列表数据 */
+        getFileData: function () {
+            var _this = this;
+
+            if(!_this.listEnd && !this.isLoadingData) {
+                this.isLoadingData = true;
+                ajax.request(editor.getActionUrl(editor.getOpt('fileManagerActionName')), {
+                    timeout: 100000,
+                    data: utils.extend({
+                            start: this.listIndex,
+                            size: this.listSize
+                        }, editor.queryCommandValue('serverparam')),
+                    method: 'get',
+                    onsuccess: function (r) {
+                        try {
+                            var json = eval('(' + r.responseText + ')');
+                            if (json.state == 'SUCCESS') {
+                                _this.pushData(json.list);
+                                _this.listIndex = parseInt(json.start) + parseInt(json.list.length);
+                                if(_this.listIndex >= json.total) {
+                                    _this.listEnd = true;
+                                }
+                                _this.isLoadingData = false;
+                            }
+                        } catch (e) {
+                            if(r.responseText.indexOf('ue_separate_ue') != -1) {
+                                var list = r.responseText.split(r.responseText);
+                                _this.pushData(list);
+                                _this.listIndex = parseInt(list.length);
+                                _this.listEnd = true;
+                                _this.isLoadingData = false;
+                            }
+                        }
+                    },
+                    onerror: function () {
+                        _this.isLoadingData = false;
+                    }
+                });
+            }
+        },
+        /* 添加图片到列表界面上 */
+        pushData: function (list) {
+            var i, item, img, filetype, preview, icon, _this = this,
+                urlPrefix = editor.getOpt('fileManagerUrlPrefix');
+            for (i = 0; i < list.length; i++) {
+                if(list[i] && list[i].url) {
+                    item = document.createElement('li');
+                    icon = document.createElement('span');
+                    filetype = list[i].url.substr(list[i].url.lastIndexOf('.') + 1);
+
+                    if ( "png|jpg|jpeg|gif|bmp".indexOf(filetype) != -1 ) {
+                        preview = document.createElement('img');
+                        domUtils.on(preview, 'load', (function(image){
+                            return function(){
+                                _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
+                            };
+                        })(preview));
+                        preview.width = 113;
+                        preview.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) );
+                    } else {
+                        var ic = document.createElement('i'),
+                            textSpan = document.createElement('span');
+                        textSpan.innerHTML = list[i].url.substr(list[i].url.lastIndexOf('/') + 1);
+                        preview = document.createElement('div');
+                        preview.appendChild(ic);
+                        preview.appendChild(textSpan);
+                        domUtils.addClass(preview, 'file-wrapper');
+                        domUtils.addClass(textSpan, 'file-title');
+                        domUtils.addClass(ic, 'file-type-' + filetype);
+                        domUtils.addClass(ic, 'file-preview');
+                    }
+                    domUtils.addClass(icon, 'icon');
+                    item.setAttribute('data-url', urlPrefix + list[i].url);
+                    if (list[i].original) {
+                        item.setAttribute('data-title', list[i].original);
+                    }
+
+                    item.appendChild(preview);
+                    item.appendChild(icon);
+                    this.list.insertBefore(item, this.clearFloat);
+                }
+            }
+        },
+        /* 改变图片大小 */
+        scale: function (img, w, h, type) {
+            var ow = img.width,
+                oh = img.height;
+
+            if (type == 'justify') {
+                if (ow >= oh) {
+                    img.width = w;
+                    img.height = h * oh / ow;
+                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
+                } else {
+                    img.width = w * ow / oh;
+                    img.height = h;
+                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
+                }
+            } else {
+                if (ow >= oh) {
+                    img.width = w * ow / oh;
+                    img.height = h;
+                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
+                } else {
+                    img.width = w;
+                    img.height = h * oh / ow;
+                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
+                }
+            }
+        },
+        getInsertList: function () {
+            var i, lis = this.list.children, list = [];
+            for (i = 0; i < lis.length; i++) {
+                if (domUtils.hasClass(lis[i], 'selected')) {
+                    var url = lis[i].getAttribute('data-url');
+                    var title = lis[i].getAttribute('data-title') || url.substr(url.lastIndexOf('/') + 1);
+                    list.push({
+                        title: title,
+                        url: url
+                    });
+                }
+            }
+            return list;
+        }
+    };
+
+
+})();
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_chm.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_chm.gif
new file mode 100644
index 0000000..9ca4fb6
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_chm.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_default.png b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_default.png
new file mode 100644
index 0000000..50ac1cb
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_default.png differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_doc.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_doc.gif
new file mode 100644
index 0000000..206fede
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_doc.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_exe.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_exe.gif
new file mode 100644
index 0000000..2e3b7a2
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_exe.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_jpg.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_jpg.gif
new file mode 100644
index 0000000..5d5dec0
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_jpg.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_mp3.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_mp3.gif
new file mode 100644
index 0000000..b351a1f
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_mp3.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_mv.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_mv.gif
new file mode 100644
index 0000000..26019b0
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_mv.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_pdf.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_pdf.gif
new file mode 100644
index 0000000..bbb65c8
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_pdf.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_ppt.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_ppt.gif
new file mode 100644
index 0000000..ccb26fb
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_ppt.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_psd.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_psd.gif
new file mode 100644
index 0000000..2e8743a
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_psd.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_rar.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_rar.gif
new file mode 100644
index 0000000..5359e46
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_rar.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_txt.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_txt.gif
new file mode 100644
index 0000000..e7b8dd2
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_txt.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_xls.gif b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_xls.gif
new file mode 100644
index 0000000..e86c1c6
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/fileTypeImages/icon_xls.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/images/alignicon.gif b/public/js/ueditor/dialogs/attachment/images/alignicon.gif
new file mode 100644
index 0000000..005a5ac
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/alignicon.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/images/alignicon.png b/public/js/ueditor/dialogs/attachment/images/alignicon.png
new file mode 100644
index 0000000..4b6c444
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/alignicon.png differ
diff --git a/public/js/ueditor/dialogs/attachment/images/bg.png b/public/js/ueditor/dialogs/attachment/images/bg.png
new file mode 100644
index 0000000..580be0a
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/bg.png differ
diff --git a/public/js/ueditor/dialogs/attachment/images/file-icons.gif b/public/js/ueditor/dialogs/attachment/images/file-icons.gif
new file mode 100644
index 0000000..d8c02c2
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/file-icons.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/images/file-icons.png b/public/js/ueditor/dialogs/attachment/images/file-icons.png
new file mode 100644
index 0000000..3ff82c8
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/file-icons.png differ
diff --git a/public/js/ueditor/dialogs/attachment/images/icons.gif b/public/js/ueditor/dialogs/attachment/images/icons.gif
new file mode 100644
index 0000000..78459de
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/icons.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/images/icons.png b/public/js/ueditor/dialogs/attachment/images/icons.png
new file mode 100644
index 0000000..12e4700
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/icons.png differ
diff --git a/public/js/ueditor/dialogs/attachment/images/image.png b/public/js/ueditor/dialogs/attachment/images/image.png
new file mode 100644
index 0000000..19699f6
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/image.png differ
diff --git a/public/js/ueditor/dialogs/attachment/images/progress.png b/public/js/ueditor/dialogs/attachment/images/progress.png
new file mode 100644
index 0000000..717c486
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/progress.png differ
diff --git a/public/js/ueditor/dialogs/attachment/images/success.gif b/public/js/ueditor/dialogs/attachment/images/success.gif
new file mode 100644
index 0000000..8d4f311
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/success.gif differ
diff --git a/public/js/ueditor/dialogs/attachment/images/success.png b/public/js/ueditor/dialogs/attachment/images/success.png
new file mode 100644
index 0000000..94f968d
Binary files /dev/null and b/public/js/ueditor/dialogs/attachment/images/success.png differ
diff --git a/public/js/ueditor/dialogs/background/background.css b/public/js/ueditor/dialogs/background/background.css
new file mode 100644
index 0000000..5c41fe9
--- /dev/null
+++ b/public/js/ueditor/dialogs/background/background.css
@@ -0,0 +1,94 @@
+.wrapper{ width: 424px;margin: 10px auto; zoom:1;position: relative}
+.tabbody{height:225px;}
+.tabbody .panel { position: absolute;width:100%; height:100%;background: #fff; display: none;}
+.tabbody .focus { display: block;}
+
+body{font-size: 12px;color: #888;overflow: hidden;}
+input,label{vertical-align:middle}
+.clear{clear: both;}
+.pl{padding-left: 18px;padding-left: 23px\9;}
+
+#imageList {width: 420px;height: 215px;margin-top: 10px;overflow: hidden;overflow-y: auto;}
+#imageList div {float: left;width: 100px;height: 95px;margin: 5px 10px;}
+#imageList img {cursor: pointer;border: 2px solid white;}
+
+.bgarea{margin: 10px;padding: 5px;height: 84%;border: 1px solid #A8A297;}
+.content div{margin: 10px 0 10px 5px;}
+.content .iptradio{margin: 0px 5px 5px 0px;}
+.txt{width:280px;}
+
+.wrapcolor{height: 19px;}
+div.color{float: left;margin: 0;}
+#colorPicker{width: 17px;height: 17px;border: 1px solid #CCC;display: inline-block;border-radius: 3px;box-shadow: 2px 2px 5px #D3D6DA;margin: 0;float: left;}
+div.alignment,#custom{margin-left: 23px;margin-left: 28px\9;}
+#custom input{height: 15px;min-height: 15px;width:20px;}
+#repeatType{width:100px;}
+
+
+/* 图片管理样式 */
+#imgManager {
+    width: 100%;
+    height: 225px;
+}
+#imgManager #imageList{
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+#imgManager ul {
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+#imgManager li {
+    float: left;
+    display: block;
+    list-style: none;
+    padding: 0;
+    width: 113px;
+    height: 113px;
+    margin: 9px 0 0 19px;
+    background-color: #eee;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+}
+#imgManager li.clearFloat {
+    float: none;
+    clear: both;
+    display: block;
+    width:0;
+    height:0;
+    margin: 0;
+    padding: 0;
+}
+#imgManager li img {
+    cursor: pointer;
+}
+#imgManager li .icon {
+    cursor: pointer;
+    width: 113px;
+    height: 113px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    border: 0;
+    background-repeat: no-repeat;
+}
+#imgManager li .icon:hover {
+    width: 107px;
+    height: 107px;
+    border: 3px solid #1094fa;
+}
+#imgManager li.selected .icon {
+    background-image: url(images/success.png);
+    background-position: 75px 75px;
+}
+#imgManager li.selected .icon:hover {
+    width: 107px;
+    height: 107px;
+    border: 3px solid #1094fa;
+    background-position: 72px 72px;
+}
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/background/background.html b/public/js/ueditor/dialogs/background/background.html
new file mode 100644
index 0000000..e31e4d6
--- /dev/null
+++ b/public/js/ueditor/dialogs/background/background.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <link rel="stylesheet" type="text/css" href="background.css?20220503">
+</head>
+<body>
+    <div id="bg_container" class="wrapper">
+        <div id="tabHeads" class="tabhead">
+            <span class="focus" data-content-id="normal"><var id="lang_background_normal"></var></span>
+        </div>
+        <div id="tabBodys" class="tabbody">
+            <div id="normal" class="panel focus">
+                <fieldset class="bgarea">
+                    <legend><var id="lang_background_set"></var></legend>
+                    <div class="content">
+                        <div>
+                            <label><input id="nocolorRadio" class="iptradio" type="radio" name="t" value="none" checked="checked"><var id="lang_background_none"></var></label>
+                            <label><input id="coloredRadio" class="iptradio" type="radio" name="t" value="color"><var id="lang_background_colored"></var></label>
+                        </div>
+                        <div class="wrapcolor pl">
+                            <div class="color">
+                                <var id="lang_background_color"></var>:
+                            </div>
+                            <div id="colorPicker"></div>
+                            <div class="clear"></div>
+                        </div>
+                        <div class="wrapcolor pl">
+                            <label><var id="lang_background_netimg"></var>:</label><input class="txt" type="text" id="url">
+                        </div>
+                        <div id="alignment" class="alignment">
+                            <var id="lang_background_align"></var>:<select id="repeatType">
+                                <option value="center"></option>
+                                <option value="repeat-x"></option>
+                                <option value="repeat-y"></option>
+                                <option value="repeat"></option>
+                                <option value="self"></option>
+                            </select>
+                        </div>
+                        <div id="custom" >
+                            <var id="lang_background_position"></var>:x:<input type="text" size="1" id="x" maxlength="4" value="0">px&nbsp;&nbsp;y:<input type="text" size="1" id="y" maxlength="4" value="0">px
+                        </div>
+                    </div>
+                </fieldset>
+
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript" src="background.js?20220503"></script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/background/background.js b/public/js/ueditor/dialogs/background/background.js
new file mode 100644
index 0000000..09c4d9a
--- /dev/null
+++ b/public/js/ueditor/dialogs/background/background.js
@@ -0,0 +1,368 @@
+(function () {
+
+    var onlineImage,
+        backupStyle = editor.queryCommandValue('background');
+
+    window.onload = function () {
+        initTabs();
+        initColorSelector();
+    };
+
+    /* 初始化tab标签 */
+    function initTabs(){
+        var tabs = $G('tabHeads').children;
+        for (var i = 0; i < tabs.length; i++) {
+            domUtils.on(tabs[i], "click", function (e) {
+                var target = e.target || e.srcElement;
+                for (var j = 0; j < tabs.length; j++) {
+                    if(tabs[j] == target){
+                        tabs[j].className = "focus";
+                        var contentId = tabs[j].getAttribute('data-content-id');
+                        $G(contentId).style.display = "block";
+                    }else {
+                        tabs[j].className = "";
+                        $G(tabs[j].getAttribute('data-content-id')).style.display = "none";
+                    }
+                }
+            });
+        }
+    }
+
+    /* 初始化颜色设置 */
+    function initColorSelector () {
+        var obj = editor.queryCommandValue('background');
+        if (obj) {
+            var color = obj['background-color'],
+                repeat = obj['background-repeat'] || 'repeat',
+                image = obj['background-image'] || '',
+                position = obj['background-position'] || 'center center',
+                pos = position.split(' '),
+                x = parseInt(pos[0]) || 0,
+                y = parseInt(pos[1]) || 0;
+
+            if(repeat == 'no-repeat' && (x || y)) repeat = 'self';
+
+            image = image.match(/url[\s]*\(([^\)]*)\)/);
+            image = image ? image[1]:'';
+            updateFormState('colored', color, image, repeat, x, y);
+        } else {
+            updateFormState();
+        }
+
+        var updateHandler = function () {
+            updateFormState();
+            updateBackground();
+        }
+        domUtils.on($G('nocolorRadio'), 'click', updateBackground);
+        domUtils.on($G('coloredRadio'), 'click', updateHandler);
+        domUtils.on($G('url'), 'keyup', function(){
+            if($G('url').value && $G('alignment').style.display == "none") {
+                utils.each($G('repeatType').children, function(item){
+                    item.selected = ('repeat' == item.getAttribute('value') ? 'selected':false);
+                });
+            }
+            updateHandler();
+        });
+        domUtils.on($G('repeatType'), 'change', updateHandler);
+        domUtils.on($G('x'), 'keyup', updateBackground);
+        domUtils.on($G('y'), 'keyup', updateBackground);
+
+        initColorPicker();
+    }
+
+    /* 初始化颜色选择器 */
+    function initColorPicker() {
+        var me = editor,
+            cp = $G("colorPicker");
+
+        /* 生成颜色选择器ui对象 */
+        var popup = new UE.ui.Popup({
+            content: new UE.ui.ColorPicker({
+                noColorText: me.getLang("clearColor"),
+                editor: me,
+                onpickcolor: function (t, color) {
+                    updateFormState('colored', color);
+                    updateBackground();
+                    UE.ui.Popup.postHide();
+                },
+                onpicknocolor: function (t, color) {
+                    updateFormState('colored', 'transparent');
+                    updateBackground();
+                    UE.ui.Popup.postHide();
+                }
+            }),
+            editor: me,
+            onhide: function () {
+            }
+        });
+
+        /* 设置颜色选择器 */
+        domUtils.on(cp, "click", function () {
+            popup.showAnchor(this);
+        });
+        domUtils.on(document, 'mousedown', function (evt) {
+            var el = evt.target || evt.srcElement;
+            UE.ui.Popup.postHide(el);
+        });
+        domUtils.on(window, 'scroll', function () {
+            UE.ui.Popup.postHide();
+        });
+    }
+
+    /* 更新背景色设置面板 */
+    function updateFormState (radio, color, url, align, x, y) {
+        var nocolorRadio = $G('nocolorRadio'),
+            coloredRadio = $G('coloredRadio');
+
+        if(radio) {
+            nocolorRadio.checked = (radio == 'colored' ? false:'checked');
+            coloredRadio.checked = (radio == 'colored' ? 'checked':false);
+        }
+        if(color) {
+            domUtils.setStyle($G("colorPicker"), "background-color", color);
+        }
+
+        if(url && /^\//.test(url)) {
+            var a = document.createElement('a');
+            a.href = url;
+            browser.ie && (a.href = a.href);
+            url = browser.ie ? a.href:(a.protocol + '//' + a.host + a.pathname + a.search + a.hash);
+        }
+
+        if(url || url === '') {
+            $G('url').value = url;
+        }
+        if(align) {
+            utils.each($G('repeatType').children, function(item){
+                item.selected = (align == item.getAttribute('value') ? 'selected':false);
+            });
+        }
+        if(x || y) {
+            $G('x').value = parseInt(x) || 0;
+            $G('y').value = parseInt(y) || 0;
+        }
+
+        $G('alignment').style.display = coloredRadio.checked && $G('url').value ? '':'none';
+        $G('custom').style.display = coloredRadio.checked && $G('url').value && $G('repeatType').value == 'self' ? '':'none';
+    }
+
+    /* 更新背景颜色 */
+    function updateBackground () {
+        if ($G('coloredRadio').checked) {
+            var color = domUtils.getStyle($G("colorPicker"), "background-color"),
+                bgimg = $G("url").value,
+                align = $G("repeatType").value,
+                backgroundObj = {
+                    "background-repeat": "no-repeat",
+                    "background-position": "center center"
+                };
+
+            if (color) backgroundObj["background-color"] = color;
+            if (bgimg) backgroundObj["background-image"] = 'url(' + bgimg + ')';
+            if (align == 'self') {
+                backgroundObj["background-position"] = $G("x").value + "px " + $G("y").value + "px";
+            } else if (align == 'repeat-x' || align == 'repeat-y' || align == 'repeat') {
+                backgroundObj["background-repeat"] = align;
+            }
+
+            editor.execCommand('background', backgroundObj);
+        } else {
+            editor.execCommand('background', null);
+        }
+    }
+
+
+    /* 在线图片 */
+    function OnlineImage(target) {
+        this.container = utils.isString(target) ? document.getElementById(target) : target;
+        this.init();
+    }
+    OnlineImage.prototype = {
+        init: function () {
+            this.reset();
+            this.initEvents();
+        },
+        /* 初始化容器 */
+        initContainer: function () {
+            this.container.innerHTML = '';
+            this.list = document.createElement('ul');
+            this.clearFloat = document.createElement('li');
+
+            domUtils.addClass(this.list, 'list');
+            domUtils.addClass(this.clearFloat, 'clearFloat');
+
+            this.list.id = 'imageListUl';
+            this.list.appendChild(this.clearFloat);
+            this.container.appendChild(this.list);
+        },
+        /* 初始化滚动事件,滚动到地步自动拉取数据 */
+        initEvents: function () {
+            var _this = this;
+
+            /* 滚动拉取图片 */
+            domUtils.on($G('imageList'), 'scroll', function(e){
+                var panel = this;
+                if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
+                    _this.getImageData();
+                }
+            });
+            /* 选中图片 */
+            domUtils.on(this.container, 'click', function (e) {
+                var target = e.target || e.srcElement,
+                    li = target.parentNode,
+                    nodes = $G('imageListUl').childNodes;
+
+                if (li.tagName.toLowerCase() == 'li') {
+                    updateFormState('nocolor', null, '');
+                    for (var i = 0, node; node = nodes[i++];) {
+                        if (node == li && !domUtils.hasClass(node, 'selected')) {
+                            domUtils.addClass(node, 'selected');
+                            updateFormState('colored', null, li.firstChild.getAttribute("_src"), 'repeat');
+                        } else {
+                            domUtils.removeClasses(node, 'selected');
+                        }
+                    }
+                    updateBackground();
+                }
+            });
+        },
+        /* 初始化第一次的数据 */
+        initData: function () {
+
+            /* 拉取数据需要使用的值 */
+            this.state = 0;
+            this.listSize = editor.getOpt('imageManagerListSize');
+            this.listIndex = 0;
+            this.listEnd = false;
+
+            /* 第一次拉取数据 */
+            this.getImageData();
+        },
+        /* 重置界面 */
+        reset: function() {
+            this.initContainer();
+            this.initData();
+        },
+        /* 向后台拉取图片列表数据 */
+        getImageData: function () {
+            var _this = this;
+
+            if(!_this.listEnd && !this.isLoadingData) {
+                this.isLoadingData = true;
+                var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')),
+                    isJsonp = utils.isCrossDomainUrl(url);
+                ajax.request(url, {
+                    'timeout': 100000,
+                    'dataType': isJsonp ? 'jsonp':'',
+                    'data': utils.extend({
+                            start: this.listIndex,
+                            size: this.listSize
+                        }, editor.queryCommandValue('serverparam')),
+                    'method': 'get',
+                    'onsuccess': function (r) {
+                        try {
+                            var json = isJsonp ? r:eval('(' + r.responseText + ')');
+                            if (json.state == 'SUCCESS') {
+                                _this.pushData(json.list);
+                                _this.listIndex = parseInt(json.start) + parseInt(json.list.length);
+                                if(_this.listIndex >= json.total) {
+                                    _this.listEnd = true;
+                                }
+                                _this.isLoadingData = false;
+                            }
+                        } catch (e) {
+                            if(r.responseText.indexOf('ue_separate_ue') != -1) {
+                                var list = r.responseText.split(r.responseText);
+                                _this.pushData(list);
+                                _this.listIndex = parseInt(list.length);
+                                _this.listEnd = true;
+                                _this.isLoadingData = false;
+                            }
+                        }
+                    },
+                    'onerror': function () {
+                        _this.isLoadingData = false;
+                    }
+                });
+            }
+        },
+        /* 添加图片到列表界面上 */
+        pushData: function (list) {
+            var i, item, img, icon, _this = this,
+                urlPrefix = editor.getOpt('imageManagerUrlPrefix');
+            for (i = 0; i < list.length; i++) {
+                if(list[i] && list[i].url) {
+                    item = document.createElement('li');
+                    img = document.createElement('img');
+                    icon = document.createElement('span');
+
+                    domUtils.on(img, 'load', (function(image){
+                        return function(){
+                            _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
+                        }
+                    })(img));
+                    img.width = 113;
+                    img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) );
+                    img.setAttribute('_src', urlPrefix + list[i].url);
+                    domUtils.addClass(icon, 'icon');
+
+                    item.appendChild(img);
+                    item.appendChild(icon);
+                    this.list.insertBefore(item, this.clearFloat);
+                }
+            }
+        },
+        /* 改变图片大小 */
+        scale: function (img, w, h, type) {
+            var ow = img.width,
+                oh = img.height;
+
+            if (type == 'justify') {
+                if (ow >= oh) {
+                    img.width = w;
+                    img.height = h * oh / ow;
+                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
+                } else {
+                    img.width = w * ow / oh;
+                    img.height = h;
+                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
+                }
+            } else {
+                if (ow >= oh) {
+                    img.width = w * ow / oh;
+                    img.height = h;
+                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
+                } else {
+                    img.width = w;
+                    img.height = h * oh / ow;
+                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
+                }
+            }
+        },
+        getInsertList: function () {
+            var i, lis = this.list.children, list = [], align = getAlign();
+            for (i = 0; i < lis.length; i++) {
+                if (domUtils.hasClass(lis[i], 'selected')) {
+                    var img = lis[i].firstChild,
+                        src = img.getAttribute('_src');
+                    list.push({
+                        src: src,
+                        _src: src,
+                        floatStyle: align
+                    });
+                }
+
+            }
+            return list;
+        }
+    };
+
+    dialog.onok = function () {
+        updateBackground();
+        editor.fireEvent('saveScene');
+    };
+    dialog.oncancel = function () {
+        editor.execCommand('background', backupStyle);
+    };
+
+})();
diff --git a/public/js/ueditor/dialogs/background/images/bg.png b/public/js/ueditor/dialogs/background/images/bg.png
new file mode 100644
index 0000000..580be0a
Binary files /dev/null and b/public/js/ueditor/dialogs/background/images/bg.png differ
diff --git a/public/js/ueditor/dialogs/background/images/success.png b/public/js/ueditor/dialogs/background/images/success.png
new file mode 100644
index 0000000..94f968d
Binary files /dev/null and b/public/js/ueditor/dialogs/background/images/success.png differ
diff --git a/public/js/ueditor/dialogs/emotion/emotion.css b/public/js/ueditor/dialogs/emotion/emotion.css
new file mode 100644
index 0000000..f801105
--- /dev/null
+++ b/public/js/ueditor/dialogs/emotion/emotion.css
@@ -0,0 +1,43 @@
+.jd img{
+    background:transparent url(images/jxface2.gif?v=1.1) no-repeat scroll left top;
+    cursor:pointer;width:35px;height:35px;display:block;
+}
+.pp img{
+    background:transparent url(images/fface.gif?v=1.1) no-repeat scroll left top;
+    cursor:pointer;width:25px;height:25px;display:block;
+}
+.ldw img{
+    background:transparent url(images/wface.gif?v=1.1) no-repeat scroll left top;
+    cursor:pointer;width:35px;height:35px;display:block;
+}
+.tsj img{
+    background:transparent url(images/tface.gif?v=1.1) no-repeat scroll left top;
+    cursor:pointer;width:35px;height:35px;display:block;
+}
+.cat img{
+    background:transparent url(images/cface.gif?v=1.1) no-repeat scroll left top;
+    cursor:pointer;width:35px;height:35px;display:block;
+}
+.bb img{
+    background:transparent url(images/bface.gif?v=1.1) no-repeat scroll left top;
+    cursor:pointer;width:35px;height:35px;display:block;
+}
+.youa img{
+    background:transparent url(images/yface.gif?v=1.1) no-repeat scroll left top;
+    cursor:pointer;width:35px;height:35px;display:block;
+}
+
+.smileytable td {height: 37px;}
+#tabPanel{margin-left:5px;overflow: hidden;}
+#tabContent {float:left;background:#FFFFFF;}
+#tabContent div{display: none;width:480px;overflow:hidden;}
+#tabIconReview.show{left:17px;display:block;}
+.menuFocus{background:#ACCD3C;}
+.menuDefault{background:#FFFFFF;}
+#tabIconReview{position:absolute;left:406px;left:398px \9;top:41px;z-index:65533;width:90px;height:76px;}
+img.review{width:90px;height:76px;border:2px solid #9cb945;background:#FFFFFF;background-position:center;background-repeat:no-repeat;}
+
+.wrapper .tabbody{position:relative;float:left;clear:both;padding:10px;width: 95%;}
+.tabbody table{width: 100%;}
+.tabbody td{border:1px solid #BAC498;}
+.tabbody td span{display: block;zoom:1;padding:0 4px;}
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/emotion/emotion.html b/public/js/ueditor/dialogs/emotion/emotion.html
new file mode 100644
index 0000000..a33b8f3
--- /dev/null
+++ b/public/js/ueditor/dialogs/emotion/emotion.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="robots" content="noindex, nofollow"/>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <link rel="stylesheet" type="text/css" href="emotion.css?20220503">
+</head>
+<body>
+<div id="tabPanel" class="wrapper">
+    <div id="tabHeads" class="tabhead">
+        <span><var id="lang_input_choice"></var></span>
+        <span><var id="lang_input_Tuzki"></var></span>
+        <span><var id="lang_input_lvdouwa"></var></span>
+        <span><var id="lang_input_BOBO"></var></span>
+        <span><var id="lang_input_babyCat"></var></span>
+        <span><var id="lang_input_bubble"></var></span>
+        <span><var id="lang_input_youa"></var></span>
+    </div>
+    <div id="tabBodys" class="tabbody">
+        <div id="tab0"></div>
+        <div id="tab1"></div>
+        <div id="tab2"></div>
+        <div id="tab3"></div>
+        <div id="tab4"></div>
+        <div id="tab5"></div>
+        <div id="tab6"></div>
+    </div>
+</div>
+<div id="tabIconReview">
+    <img id='faceReview' class='review' src="../../themes/default/images/spacer.gif"/>
+</div>
+<script type="text/javascript" src="emotion.js?20220503"></script>
+<script type="text/javascript">
+    var emotion = {
+        tabNum:7, //切换面板数量
+        SmilmgName:{ tab0:['j_00', 84], tab1:['t_00', 40], tab2:['w_00', 52], tab3:['B_00', 63], tab4:['C_00', 20], tab5:['i_f', 50], tab6:['y_00', 40] }, //图片前缀名
+        imageFolders:{ tab0:'jx2/', tab1:'tsj/', tab2:'ldw/', tab3:'bobo/', tab4:'babycat/', tab5:'face/', tab6:'youa/'}, //图片对应文件夹路径
+        imageCss:{tab0:'jd', tab1:'tsj', tab2:'ldw', tab3:'bb', tab4:'cat', tab5:'pp', tab6:'youa'}, //图片css类名
+        imageCssOffset:{tab0:35, tab1:35, tab2:35, tab3:35, tab4:35, tab5:25, tab6:35}, //图片偏移
+        SmileyInfor:{
+            tab0:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '打酱油', '俯卧撑', '气愤', '?', '吻', '怒', '胜利', 'HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '微笑', '亲吻', '调皮', '惊恐', '耍酷', '发火', '害羞', '汗水', '大哭', '', '加油', '困', '你NB', '晕倒', '开心', '偷笑', '大哭', '滴汗', '叹气', '超赞', '??', '飞吻', '天使', '撒花', '生气', '被砸', '吓傻', '随意吐'],
+            tab1:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '摊手', '睡觉', '瘫坐', '无聊', '星星闪', '旋转', '也不行', '郁闷', '正Music', '抓墙', '撞墙至死', '歪头', '戳眼', '飘过', '互相拍砖', '砍死你', '扔桌子', '少林寺', '什么？', '转头', '我爱牛奶', '我踢', '摇晃', '晕厥', '在笼子里', '震荡'],
+            tab2:['大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '我错了', 'money', '气愤', '挑逗', '吻', '怒', '胜利', '委屈', '受伤', '说啥呢？', '闭嘴', '不', '逗你玩儿', '飞吻', '眩晕', '魔法', '我来了', '睡了', '我打', '闭嘴', '打', '打晕了', '刷牙', '爆揍', '炸弹', '倒立', '刮胡子', '邪恶的笑', '不要不要', '爱恋中', '放大仔细看', '偷窥', '超高兴', '晕', '松口气', '我跑', '享受', '修养', '哭', '汗', '啊~', '热烈欢迎', '打酱油', '俯卧撑', '?'],
+            tab3:['HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '泪眼', '流泪', '生气', '吐舌', '喜欢', '旋转', '再见', '抓狂', '汗', '鄙视', '拜', '吐血', '嘘', '打人', '蹦跳', '变脸', '扯肉', '吃To', '吃花', '吹泡泡糖', '大变身', '飞天舞', '回眸', '可怜', '猛抽', '泡泡', '苹果', '亲', '', '骚舞', '烧香', '睡', '套娃娃', '捅捅', '舞倒', '西红柿', '爱慕', '摇', '摇摆', '杂耍', '招财', '被殴', '被球闷', '大惊', '理想', '欧打', '呕吐', '碎', '吐痰'],
+            tab4:['发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '顶', '幸运', '爱心', '躲', '送花', '选择'],
+            tab5:['微笑', '亲吻', '调皮', '惊讶', '耍酷', '发火', '害羞', '汗水', '大哭', '得意', '鄙视', '困', '夸奖', '晕倒', '疑问', '媒婆', '狂吐', '青蛙', '发愁', '亲吻', '', '爱心', '心碎', '玫瑰', '礼物', '哭', '奸笑', '可爱', '得意', '呲牙', '暴汗', '楚楚可怜', '困', '哭', '生气', '惊讶', '口水', '彩虹', '夜空', '太阳', '钱钱', '灯泡', '咖啡', '蛋糕', '音乐', '爱', '胜利', '赞', '鄙视', 'OK'],
+            tab6:['男兜', '女兜', '开心', '乖乖', '偷笑', '大笑', '抽泣', '大哭', '无奈', '滴汗', '叹气', '狂晕', '委屈', '超赞', '??', '疑问', '飞吻', '天使', '撒花', '生气', '被砸', '口水', '泪奔', '吓傻', '吐舌头', '点头', '随意吐', '旋转', '困困', '鄙视', '狂顶', '篮球', '再见', '欢迎光临', '恭喜发财', '稍等', '我在线', '恕不议价', '库房有货', '货在路上']
+        }
+    };
+</script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/emotion/emotion.js b/public/js/ueditor/dialogs/emotion/emotion.js
new file mode 100644
index 0000000..6e158a9
--- /dev/null
+++ b/public/js/ueditor/dialogs/emotion/emotion.js
@@ -0,0 +1,186 @@
+window.onload = function () {
+    editor.setOpt({
+        emotionLocalization:false
+    });
+
+    emotion.SmileyPath = editor.options.emotionLocalization === true ? 'images/' : "http://img.baidu.com/hi/";
+    emotion.SmileyBox = createTabList( emotion.tabNum );
+    emotion.tabExist = createArr( emotion.tabNum );
+
+    initImgName();
+    initEvtHandler( "tabHeads" );
+};
+
+function initImgName() {
+    for ( var pro in emotion.SmilmgName ) {
+        var tempName = emotion.SmilmgName[pro],
+                tempBox = emotion.SmileyBox[pro],
+                tempStr = "";
+
+        if ( tempBox.length ) return;
+        for ( var i = 1; i <= tempName[1]; i++ ) {
+            tempStr = tempName[0];
+            if ( i < 10 ) tempStr = tempStr + '0';
+            tempStr = tempStr + i + '.gif';
+            tempBox.push( tempStr );
+        }
+    }
+}
+
+function initEvtHandler( conId ) {
+    var tabHeads = $G( conId );
+    for ( var i = 0, j = 0; i < tabHeads.childNodes.length; i++ ) {
+        var tabObj = tabHeads.childNodes[i];
+        if ( tabObj.nodeType == 1 ) {
+            domUtils.on( tabObj, "click", (function ( index ) {
+                return function () {
+                    switchTab( index );
+                };
+            })( j ) );
+            j++;
+        }
+    }
+    switchTab( 0 );
+    $G( "tabIconReview" ).style.display = 'none';
+}
+
+function InsertSmiley( url, evt ) {
+    var obj = {
+        src:editor.options.emotionLocalization ? editor.options.UEDITOR_HOME_URL + "dialogs/emotion/" + url : url
+    };
+    obj._src = obj.src;
+    editor.execCommand( 'insertimage', obj );
+    if ( !evt.ctrlKey ) {
+        dialog.popup.hide();
+    }
+}
+
+function switchTab( index ) {
+
+    autoHeight( index );
+    if ( emotion.tabExist[index] == 0 ) {
+        emotion.tabExist[index] = 1;
+        createTab( 'tab' + index );
+    }
+    //获取呈现元素句柄数组
+    var tabHeads = $G( "tabHeads" ).getElementsByTagName( "span" ),
+            tabBodys = $G( "tabBodys" ).getElementsByTagName( "div" ),
+            i = 0, L = tabHeads.length;
+    //隐藏所有呈现元素
+    for ( ; i < L; i++ ) {
+        tabHeads[i].className = "";
+        tabBodys[i].style.display = "none";
+    }
+    //显示对应呈现元素
+    tabHeads[index].className = "focus";
+    tabBodys[index].style.display = "block";
+}
+
+function autoHeight( index ) {
+    var iframe = dialog.getDom( "iframe" ),
+            parent = iframe.parentNode.parentNode;
+    switch ( index ) {
+        case 0:
+            iframe.style.height = "380px";
+            parent.style.height = "392px";
+            break;
+        case 1:
+            iframe.style.height = "220px";
+            parent.style.height = "232px";
+            break;
+        case 2:
+            iframe.style.height = "260px";
+            parent.style.height = "272px";
+            break;
+        case 3:
+            iframe.style.height = "300px";
+            parent.style.height = "312px";
+            break;
+        case 4:
+            iframe.style.height = "140px";
+            parent.style.height = "152px";
+            break;
+        case 5:
+            iframe.style.height = "260px";
+            parent.style.height = "272px";
+            break;
+        case 6:
+            iframe.style.height = "230px";
+            parent.style.height = "242px";
+            break;
+        default:
+
+    }
+}
+
+
+function createTab( tabName ) {
+    var faceVersion = "?v=1.1", //版本号
+            tab = $G( tabName ), //获取将要生成的Div句柄
+            imagePath = emotion.SmileyPath + emotion.imageFolders[tabName], //获取显示表情和预览表情的路径
+            positionLine = 11 / 2, //中间数
+            iWidth = iHeight = 35, //图片长宽
+            iColWidth = 3, //表格剩余空间的显示比例
+            tableCss = emotion.imageCss[tabName],
+            cssOffset = emotion.imageCssOffset[tabName],
+            textHTML = ['<table class="smileytable">'],
+            i = 0, imgNum = emotion.SmileyBox[tabName].length, imgColNum = 11, faceImage,
+            sUrl, realUrl, posflag, offset, infor;
+
+    for ( ; i < imgNum; ) {
+        textHTML.push( '<tr>' );
+        for ( var j = 0; j < imgColNum; j++, i++ ) {
+            faceImage = emotion.SmileyBox[tabName][i];
+            if ( faceImage ) {
+                sUrl = imagePath + faceImage + faceVersion;
+                realUrl = imagePath + faceImage;
+                posflag = j < positionLine ? 0 : 1;
+                offset = cssOffset * i * (-1) - 1;
+                infor = emotion.SmileyInfor[tabName][i];
+
+                textHTML.push( '<td  class="' + tableCss + '"   border="1" width="' + iColWidth + '%" style="border-collapse:collapse;" align="center"  bgcolor="transparent" onclick="InsertSmiley(\'' + realUrl.replace( /'/g, "\\'" ) + '\',event)" onmouseover="over(this,\'' + sUrl + '\',\'' + posflag + '\')" onmouseout="out(this)">' );
+                textHTML.push( '<span>' );
+                textHTML.push( '<img  style="background-position:left ' + offset + 'px;" title="' + infor + '" src="' + emotion.SmileyPath + (editor.options.emotionLocalization ? '0.gif" width="' : 'default/0.gif" width="') + iWidth + '" height="' + iHeight + '"></img>' );
+                textHTML.push( '</span>' );
+            } else {
+                textHTML.push( '<td width="' + iColWidth + '%"   bgcolor="#FFFFFF">' );
+            }
+            textHTML.push( '</td>' );
+        }
+        textHTML.push( '</tr>' );
+    }
+    textHTML.push( '</table>' );
+    textHTML = textHTML.join( "" );
+    tab.innerHTML = textHTML;
+}
+
+function over( td, srcPath, posFlag ) {
+    td.style.backgroundColor = "#ACCD3C";
+    $G( 'faceReview' ).style.backgroundImage = "url(" + srcPath + ")";
+    if ( posFlag == 1 ) $G( "tabIconReview" ).className = "show";
+    $G( "tabIconReview" ).style.display = 'block';
+}
+
+function out( td ) {
+    td.style.backgroundColor = "transparent";
+    var tabIconRevew = $G( "tabIconReview" );
+    tabIconRevew.className = "";
+    tabIconRevew.style.display = 'none';
+}
+
+function createTabList( tabNum ) {
+    var obj = {};
+    for ( var i = 0; i < tabNum; i++ ) {
+        obj["tab" + i] = [];
+    }
+    return obj;
+}
+
+function createArr( tabNum ) {
+    var arr = [];
+    for ( var i = 0; i < tabNum; i++ ) {
+        arr[i] = 0;
+    }
+    return arr;
+}
+
diff --git a/public/js/ueditor/dialogs/emotion/images/0.gif b/public/js/ueditor/dialogs/emotion/images/0.gif
new file mode 100644
index 0000000..6964168
Binary files /dev/null and b/public/js/ueditor/dialogs/emotion/images/0.gif differ
diff --git a/public/js/ueditor/dialogs/emotion/images/bface.gif b/public/js/ueditor/dialogs/emotion/images/bface.gif
new file mode 100644
index 0000000..14fe618
Binary files /dev/null and b/public/js/ueditor/dialogs/emotion/images/bface.gif differ
diff --git a/public/js/ueditor/dialogs/emotion/images/cface.gif b/public/js/ueditor/dialogs/emotion/images/cface.gif
new file mode 100644
index 0000000..bff947f
Binary files /dev/null and b/public/js/ueditor/dialogs/emotion/images/cface.gif differ
diff --git a/public/js/ueditor/dialogs/emotion/images/fface.gif b/public/js/ueditor/dialogs/emotion/images/fface.gif
new file mode 100644
index 0000000..0d8a6af
Binary files /dev/null and b/public/js/ueditor/dialogs/emotion/images/fface.gif differ
diff --git a/public/js/ueditor/dialogs/emotion/images/jxface2.gif b/public/js/ueditor/dialogs/emotion/images/jxface2.gif
new file mode 100644
index 0000000..a959c90
Binary files /dev/null and b/public/js/ueditor/dialogs/emotion/images/jxface2.gif differ
diff --git a/public/js/ueditor/dialogs/emotion/images/neweditor-tab-bg.png b/public/js/ueditor/dialogs/emotion/images/neweditor-tab-bg.png
new file mode 100644
index 0000000..8f398b0
Binary files /dev/null and b/public/js/ueditor/dialogs/emotion/images/neweditor-tab-bg.png differ
diff --git a/public/js/ueditor/dialogs/emotion/images/tface.gif b/public/js/ueditor/dialogs/emotion/images/tface.gif
new file mode 100644
index 0000000..1354f54
Binary files /dev/null and b/public/js/ueditor/dialogs/emotion/images/tface.gif differ
diff --git a/public/js/ueditor/dialogs/emotion/images/wface.gif b/public/js/ueditor/dialogs/emotion/images/wface.gif
new file mode 100644
index 0000000..5667160
Binary files /dev/null and b/public/js/ueditor/dialogs/emotion/images/wface.gif differ
diff --git a/public/js/ueditor/dialogs/emotion/images/yface.gif b/public/js/ueditor/dialogs/emotion/images/yface.gif
new file mode 100644
index 0000000..51608be
Binary files /dev/null and b/public/js/ueditor/dialogs/emotion/images/yface.gif differ
diff --git a/public/js/ueditor/dialogs/formula/formula.html b/public/js/ueditor/dialogs/formula/formula.html
new file mode 100644
index 0000000..735fd2b
--- /dev/null
+++ b/public/js/ueditor/dialogs/formula/formula.html
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title></title>
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+  <script type="text/javascript" src="../internal.js?20220503"></script>
+  <style type="text/css">
+    .wrapper {
+      width: 600px;
+      padding: 10px;
+      height: 352px;
+      overflow: hidden;
+      position: relative;
+      border-bottom: 1px solid #d7d7d7
+    }
+
+    .editor-wrap {
+      display: flex;
+    }
+
+    .editor-wrap #editor {
+      width: 0;
+      flex-grow: 1;
+      border: 1px solid #CCC;
+      border-radius: 3px;
+      padding: 5px;
+      height: 100px;
+      outline: none;
+    }
+
+    .input-tip {
+      margin-top: 10px;
+    }
+
+    .input-tip a {
+      color: #0f0d0d;
+    }
+
+    .editor-preview {
+      background: #FFF;
+      border-radius: 3px;
+      margin-top: 10px;
+      border: 1px solid #EEE;
+      display:none;
+    }
+
+    .editor-preview .title {
+      padding: 5px;
+    }
+
+    .editor-preview .body {
+      padding: 5px 5px 15px 5px;
+      text-align: center;
+    }
+
+    .editor-preview .body .image {
+      max-width:100%;
+      max-height:100px;
+    }
+  </style>
+</head>
+<body>
+<div class="wrapper">
+  <div class="editor-wrap">
+    <textarea id="editor"></textarea>
+  </div>
+  <div class="input-tip">
+    基于 latex 语法，<a href="javascript:;" id="inputDemo">点击输入示例</a>。
+  </div>
+  <div class="editor-preview" id="preview">
+    <div class="title">预览</div>
+    <div class="body">
+      <img class="image" id="previewImage" />
+    </div>
+  </div>
+</div>
+<script src="../../third-party/jquery-1.10.2.js?20220503"></script>
+<script type="text/javascript" src="../../third-party/clipboard/clipboard.js?20220503"></script>
+<script type="text/javascript" src="formula.js?20220903"></script>
+<script type="text/javascript">
+  utils.domReady(function () {
+    Formula.init();
+  });
+</script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/formula/formula.js b/public/js/ueditor/dialogs/formula/formula.js
new file mode 100644
index 0000000..33809c3
--- /dev/null
+++ b/public/js/ueditor/dialogs/formula/formula.js
@@ -0,0 +1,71 @@
+function preg_quote(str, delimiter) {
+  // Quote regular expression characters plus an optional character
+  //
+  // version: 1107.2516
+  // discuss at: http://phpjs.org/functions/preg_quote
+  // +   original by: booeyOH
+  // +   improved by: Ates Goral (http://magnetiq.com)
+  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+  // +   bugfixed by: Onno Marsman
+  // +   improved by: Brett Zamir (http://brett-zamir.me)
+  // *     example 1: preg_quote("$40");
+  // *     returns 1: '\$40'
+  // *     example 2: preg_quote("*RRRING* Hello?");
+  // *     returns 2: '\*RRRING\* Hello\?'
+  // *     example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
+  // *     returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'
+  return (str + '').replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
+}
+
+var Formula = {
+  init: function () {
+    // console.log('Formula.init')
+    Formula.initValue();
+    Formula.initEvent();
+    Formula.initSubmit();
+  },
+  render: function () {
+    var content = $.trim($('#editor').val());
+    if (!content) {
+      $('#preview').hide();
+      return;
+    }
+    content = encodeURIComponent(content);
+    var formulaConfig = editor.getOpt('formulaConfig');
+    var src = formulaConfig.imageUrlTemplate.replace(/\{\}/, content);
+    $('#previewImage').attr('src', src);
+    $('#preview').show();
+  },
+  initValue: function () {
+    var img = editor.selection.getRange().getClosedNode();
+    if (img && img.getAttribute('data-formula-image') !== null) {
+      var value = img.getAttribute('data-formula-image');
+      if (value) {
+        $('#editor').val(decodeURIComponent(value));
+        Formula.render();
+      }
+    }
+  },
+  initEvent: function () {
+    var changeTimer = null;
+    // console.log('Formula.initEvent');
+    $('#editor').on('change keypress', function () {
+      changeTimer && clearTimeout(changeTimer);
+      changeTimer = setTimeout(function () {
+        Formula.render();
+      }, 1000);
+    });
+    $('#inputDemo').on('click', function () {
+      $('#editor').val('f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz');
+      Formula.render();
+    });
+  },
+  initSubmit: function () {
+    dialog.onok = function () {
+      editor.execCommand('formula', $.trim($('#editor').val()));
+      editor.fireEvent('saveScene');
+    };
+    dialog.oncancel = function () {
+    };
+  }
+};
diff --git a/public/js/ueditor/dialogs/help/help.css b/public/js/ueditor/dialogs/help/help.css
new file mode 100644
index 0000000..4478475
--- /dev/null
+++ b/public/js/ueditor/dialogs/help/help.css
@@ -0,0 +1,7 @@
+.wrapper{width: 370px;margin: 10px auto;zoom: 1;}
+.tabbody{height: 360px;}
+.tabbody .panel{width:100%;height: 360px;position: absolute;background: #fff;}
+.tabbody .panel h1{font-size:26px;margin: 5px 0 0 5px;}
+.tabbody .panel p{font-size:12px;margin: 5px 0 0 5px;}
+.tabbody table{width:90%;line-height: 20px;margin: 5px 0 0 5px;;}
+.tabbody table thead{font-weight: bold;line-height: 25px;}
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/help/help.html b/public/js/ueditor/dialogs/help/help.html
new file mode 100644
index 0000000..2fffafd
--- /dev/null
+++ b/public/js/ueditor/dialogs/help/help.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+        "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>帮助</title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <link rel="stylesheet" type="text/css" href="help.css?20220503">
+</head>
+<body>
+<div class="wrapper" id="helptab">
+    <div id="tabHeads" class="tabhead">
+        <span class="focus" tabsrc="about"><var id="lang_input_about"></var></span>
+        <span tabsrc="shortcuts"><var id="lang_input_shortcuts"></var></span>
+    </div>
+    <div id="tabBodys" class="tabbody">
+        <div id="about" class="panel">
+            <h1>UEditor Plus</h1>
+            <p id="version"></p>
+            <p><var id="lang_input_introduction"></var></p>
+        </div>
+        <div id="shortcuts" class="panel">
+            <table>
+                <thead>
+                <tr>
+                    <td><var id="lang_Txt_shortcuts"></var></td>
+                    <td><var id="lang_Txt_func"></var></td>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>ctrl+b</td>
+                    <td><var id="lang_Txt_bold"></var></td>
+                </tr>
+                <tr>
+                    <td>ctrl+c</td>
+                    <td><var id="lang_Txt_copy"></var></td>
+                </tr>
+                <tr>
+                    <td>ctrl+x</td>
+                    <td><var id="lang_Txt_cut"></var></td>
+                </tr>
+                <tr>
+                    <td>ctrl+v</td>
+                    <td><var id="lang_Txt_Paste"></var></td>
+                </tr>
+                <tr>
+                    <td>ctrl+y</td>
+                    <td><var id="lang_Txt_undo"></var></td>
+                </tr>
+                <tr>
+                    <td>ctrl+z</td>
+                    <td><var id="lang_Txt_redo"></var></td>
+                </tr>
+                <tr>
+                    <td>ctrl+i</td>
+                    <td><var id="lang_Txt_italic"></var></td>
+                </tr>
+                <tr>
+                    <td>ctrl+u</td>
+                    <td><var id="lang_Txt_underline"></var></td>
+                </tr>
+                <tr>
+                    <td>ctrl+a</td>
+                    <td><var id="lang_Txt_selectAll"></var></td>
+                </tr>
+                <tr>
+                    <td>shift+enter</td>
+                    <td><var id="lang_Txt_visualEnter"></var></td>
+                </tr>
+                <tr>
+                    <td>alt+z</td>
+                    <td><var id="lang_Txt_fullscreen"></var></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="help.js?20220503"></script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/help/help.js b/public/js/ueditor/dialogs/help/help.js
new file mode 100644
index 0000000..9a2272e
--- /dev/null
+++ b/public/js/ueditor/dialogs/help/help.js
@@ -0,0 +1,56 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-9-26
+ * Time: 下午1:06
+ * To change this template use File | Settings | File Templates.
+ */
+/**
+ * tab点击处理事件
+ * @param tabHeads
+ * @param tabBodys
+ * @param obj
+ */
+function clickHandler( tabHeads,tabBodys,obj ) {
+    //head样式更改
+    for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
+        tabHeads[k].className = "";
+    }
+    obj.className = "focus";
+    //body显隐
+    var tabSrc = obj.getAttribute( "tabSrc" );
+    for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
+        var body = tabBodys[j],
+            id = body.getAttribute( "id" );
+        body.onclick = function(){
+            this.style.zoom = 1;
+        };
+        if ( id != tabSrc ) {
+            body.style.zIndex = 1;
+        } else {
+            body.style.zIndex = 200;
+        }
+    }
+
+}
+
+/**
+ * TAB切换
+ * @param tabParentId  tab的父节点ID或者对象本身
+ */
+function switchTab( tabParentId ) {
+    var tabElements = $G( tabParentId ).children,
+        tabHeads = tabElements[0].children,
+        tabBodys = tabElements[1].children;
+
+    for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
+        var head = tabHeads[i];
+        if ( head.className === "focus" )clickHandler(tabHeads,tabBodys, head );
+        head.onclick = function () {
+            clickHandler(tabHeads,tabBodys,this);
+        }
+    }
+}
+switchTab("helptab");
+
+document.getElementById('version').innerHTML = parent.UE.version;
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/image/image.css b/public/js/ueditor/dialogs/image/image.css
new file mode 100644
index 0000000..d494fec
--- /dev/null
+++ b/public/js/ueditor/dialogs/image/image.css
@@ -0,0 +1,718 @@
+@charset "utf-8";
+/* dialog样式 */
+.wrapper {
+    zoom: 1;
+    width: 630px;
+    *width: 626px;
+    height: 380px;
+    margin: 0 auto;
+    padding: 10px;
+    position: relative;
+    font-family: sans-serif;
+}
+
+/*tab样式框大小*/
+.tabhead {
+    float:left;
+}
+.tabbody {
+    width: 100%;
+    height: 346px;
+    position: relative;
+    clear: both;
+}
+
+.tabbody .panel {
+    position: absolute;
+    width: 0;
+    height: 0;
+    background: #fff;
+    overflow: hidden;
+    display: none;
+}
+
+.tabbody .panel.focus {
+    width: 100%;
+    height: 346px;
+    display: block;
+}
+
+/* 图片对齐方式 */
+.alignBar{
+    float:right;
+    margin-top: 5px;
+    position: relative;
+}
+
+.alignBar .algnLabel{
+    float:left;
+    height: 20px;
+    line-height: 20px;
+}
+
+.alignBar #alignIcon{
+    zoom:1;
+    _display: inline;
+    display: inline-block;
+    position: relative;
+}
+.alignBar #alignIcon span{
+    float: left;
+    cursor: pointer;
+    display: block;
+    width: 19px;
+    height: 17px;
+    margin-right: 3px;
+    margin-left: 3px;
+    background-image: url(./images/alignicon.jpg);
+}
+.alignBar #alignIcon .none-align{
+    background-position: 0 -18px;
+}
+.alignBar #alignIcon .left-align{
+    background-position: -20px -18px;
+}
+.alignBar #alignIcon .right-align{
+    background-position: -40px -18px;
+}
+.alignBar #alignIcon .center-align{
+    background-position: -60px -18px;
+}
+.alignBar #alignIcon .none-align.focus{
+    background-position: 0 0;
+}
+.alignBar #alignIcon .left-align.focus{
+    background-position: -20px 0;
+}
+.alignBar #alignIcon .right-align.focus{
+    background-position: -40px 0;
+}
+.alignBar #alignIcon .center-align.focus{
+    background-position: -60px 0;
+}
+
+
+
+
+/* 远程图片样式 */
+#remote {
+    z-index: 200;
+}
+
+#remote .top{
+    width: 100%;
+    margin-top: 25px;
+}
+#remote .left{
+    display: block;
+    float: left;
+    width: 300px;
+    height:10px;
+}
+#remote .right{
+    display: block;
+    float: right;
+    width: 300px;
+    height:10px;
+}
+#remote .row{
+    margin-left: 20px;
+    clear: both;
+    height: 40px;
+}
+
+#remote .row label{
+    text-align: center;
+    width: 50px;
+    zoom:1;
+    _display: inline;
+    display:inline-block;
+    vertical-align: middle;
+}
+#remote .row label.algnLabel{
+    float: left;
+
+}
+
+#remote input.text{
+    width: 150px;
+    padding: 3px 6px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+#remote input.text:focus {
+    outline: 0;
+}
+#remote #url{
+  width: 400px;
+  margin-bottom: 2px;
+}
+#remote #imageSelect{
+  width: 100px;
+  display: inline-block;
+  background: #FFF;
+  border: 1px solid #EEE;
+  line-height: 26px;
+  text-align: center;
+  color: #333;
+  text-decoration: none;
+  border-radius: 3px;
+  vertical-align: top;
+}
+#remote #width,
+#remote #height{
+    width: 30px;
+    margin-left: 2px;
+    margin-right: 2px;
+    text-align:center;
+}
+#remote #border,
+#remote #vhSpace,
+#remote #title{
+    width: 180px;
+    margin-right: 5px;
+}
+#remote #lock{
+  display:inline-block;
+  vertical-align: middle;
+}
+#remote #lockicon{
+    zoom: 1;
+    _display:inline;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: url("../../themes/default/images/lock.gif") -13px -13px no-repeat;
+    vertical-align: middle;
+}
+#remote #preview{
+    clear: both;
+    width: 260px;
+    height: 240px;
+    z-index: 9999;
+    margin-top: 10px;
+    background-color: #eee;
+    overflow: hidden;
+}
+
+/* 上传图片 */
+.tabbody #upload.panel {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+    background: #fff;
+    display: block;
+}
+
+.tabbody #upload.panel.focus {
+    width: 100%;
+    height: 346px;
+    display: block;
+    clip: auto;
+}
+
+#upload .queueList {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+}
+
+#upload p {
+    margin: 0;
+}
+
+.element-invisible {
+    width: 0 !important;
+    height: 0 !important;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+}
+
+#upload .placeholder {
+    margin: 10px;
+    border: 2px dashed #e6e6e6;
+    *border: 0px dashed #e6e6e6;
+    height: 172px;
+    padding-top: 150px;
+    text-align: center;
+    background: url(./images/image.png) center 70px no-repeat;
+    color: #cccccc;
+    font-size: 18px;
+    position: relative;
+    top:0;
+    *top: 10px;
+}
+
+#upload .placeholder .webuploader-pick {
+    font-size: 18px;
+    background: #00b7ee;
+    border-radius: 3px;
+    line-height: 44px;
+    padding: 0 30px;
+    *width: 120px;
+    color: #fff;
+    display: inline-block;
+    margin: 0 auto 20px auto;
+    cursor: pointer;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+#upload .placeholder .webuploader-pick-hover {
+    background: #00a2d4;
+}
+
+
+#filePickerContainer {
+    text-align: center;
+}
+
+#upload .placeholder .flashTip {
+    color: #666666;
+    font-size: 12px;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    bottom: 20px;
+}
+
+#upload .placeholder .flashTip a {
+    color: #0785d1;
+    text-decoration: none;
+}
+
+#upload .placeholder .flashTip a:hover {
+    text-decoration: underline;
+}
+
+#upload .placeholder.webuploader-dnd-over {
+    border-color: #999999;
+}
+
+#upload .filelist {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative;
+    height: 300px;
+}
+
+#upload .filelist:after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    clear: both;
+    position: relative;
+}
+
+#upload .filelist li {
+    width: 113px;
+    height: 113px;
+    background: url(./images/bg.png);
+    text-align: center;
+    margin: 9px 0 0 9px;
+    *margin: 6px 0 0 6px;
+    position: relative;
+    display: block;
+    float: left;
+    overflow: hidden;
+    font-size: 12px;
+}
+
+#upload .filelist li p.log {
+    position: relative;
+    top: -45px;
+}
+
+#upload .filelist li p.title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    top: 5px;
+    text-indent: 5px;
+    text-align: left;
+}
+
+#upload .filelist li p.progress {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    height: 8px;
+    overflow: hidden;
+    z-index: 50;
+    margin: 0;
+    border-radius: 0;
+    background: none;
+    -webkit-box-shadow: 0 0 0;
+}
+
+#upload .filelist li p.progress span {
+    display: none;
+    overflow: hidden;
+    width: 0;
+    height: 100%;
+    background: #1483d8 url(./images/progress.png) repeat-x;
+
+    -webit-transition: width 200ms linear;
+    -moz-transition: width 200ms linear;
+    -o-transition: width 200ms linear;
+    -ms-transition: width 200ms linear;
+    transition: width 200ms linear;
+
+    -webkit-animation: progressmove 2s linear infinite;
+    -moz-animation: progressmove 2s linear infinite;
+    -o-animation: progressmove 2s linear infinite;
+    -ms-animation: progressmove 2s linear infinite;
+    animation: progressmove 2s linear infinite;
+
+    -webkit-transform: translateZ(0);
+}
+
+@-webkit-keyframes progressmove {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 17px 0;
+    }
+}
+
+@-moz-keyframes progressmove {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 17px 0;
+    }
+}
+
+@keyframes progressmove {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 17px 0;
+    }
+}
+
+#upload .filelist li p.imgWrap {
+    position: relative;
+    z-index: 2;
+    line-height: 113px;
+    vertical-align: middle;
+    overflow: hidden;
+    width: 113px;
+    height: 113px;
+
+    -webkit-transform-origin: 50% 50%;
+    -moz-transform-origin: 50% 50%;
+    -o-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+
+    -webit-transition: 200ms ease-out;
+    -moz-transition: 200ms ease-out;
+    -o-transition: 200ms ease-out;
+    -ms-transition: 200ms ease-out;
+    transition: 200ms ease-out;
+}
+
+#upload .filelist li img {
+    width: 100%;
+}
+
+#upload .filelist li p.error {
+    background: #f43838;
+    color: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 28px;
+    line-height: 28px;
+    width: 100%;
+    z-index: 100;
+    display:none;
+}
+
+#upload .filelist li .success {
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 40px;
+    width: 100%;
+    z-index: 200;
+    background: url(./images/success.png) no-repeat right bottom;
+    background: url(./images/success.gif) no-repeat right bottom \9;
+}
+
+#upload .filelist li.filePickerBlock {
+    width: 113px;
+    height: 113px;
+    background: url(./images/image.png) no-repeat center 12px;
+    border: 1px solid #eeeeee;
+    border-radius: 0;
+}
+#upload .filelist li.filePickerBlock div.webuploader-pick  {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    background: none;
+    font-size: 0;
+}
+
+#upload .filelist div.file-panel {
+    position: absolute;
+    height: 0;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000') \0;
+    background: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    z-index: 300;
+}
+
+#upload .filelist div.file-panel span {
+    width: 24px;
+    height: 24px;
+    display: inline;
+    float: right;
+    text-indent: -9999px;
+    overflow: hidden;
+    background: url(./images/icons.png) no-repeat;
+    background: url(./images/icons.gif) no-repeat \9;
+    margin: 5px 1px 1px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#upload .filelist div.file-panel span.rotateLeft {
+    display:none;
+    background-position: 0 -24px;
+}
+
+#upload .filelist div.file-panel span.rotateLeft:hover {
+    background-position: 0 0;
+}
+
+#upload .filelist div.file-panel span.rotateRight {
+    display:none;
+    background-position: -24px -24px;
+}
+
+#upload .filelist div.file-panel span.rotateRight:hover {
+    background-position: -24px 0;
+}
+
+#upload .filelist div.file-panel span.cancel {
+    background-position: -48px -24px;
+}
+
+#upload .filelist div.file-panel span.cancel:hover {
+    background-position: -48px 0;
+}
+
+#upload .statusBar {
+    height: 45px;
+    border-bottom: 1px solid #dadada;
+    margin: 0 10px;
+    padding: 0;
+    line-height: 45px;
+    vertical-align: middle;
+    position: relative;
+}
+
+#upload .statusBar .progress {
+    border: 1px solid #1483d8;
+    width: 198px;
+    background: #fff;
+    height: 18px;
+    position: absolute;
+    top: 12px;
+    display: none;
+    text-align: center;
+    line-height: 18px;
+    color: #6dbfff;
+    margin: 0 10px 0 0;
+}
+#upload .statusBar .progress span.percentage {
+    width: 0;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: #1483d8;
+    position: absolute;
+}
+#upload .statusBar .progress span.text {
+    position: relative;
+    z-index: 10;
+}
+
+#upload .statusBar .info {
+    display: inline-block;
+    font-size: 14px;
+    color: #666666;
+}
+
+#upload .statusBar .btns {
+    position: absolute;
+    top: 7px;
+    right: 0;
+    line-height: 30px;
+}
+
+#filePickerBtn {
+    display: inline-block;
+    float: left;
+}
+#upload .statusBar .btns .webuploader-pick,
+#upload .statusBar .btns .uploadBtn,
+#upload .statusBar .btns .uploadBtn.state-uploading,
+#upload .statusBar .btns .uploadBtn.state-paused {
+    background: #ffffff;
+    border: 1px solid #cfcfcf;
+    color: #565656;
+    padding: 0 18px;
+    display: inline-block;
+    border-radius: 3px;
+    margin-left: 10px;
+    cursor: pointer;
+    font-size: 14px;
+    float: left;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+#upload .statusBar .btns .webuploader-pick-hover,
+#upload .statusBar .btns .uploadBtn:hover,
+#upload .statusBar .btns .uploadBtn.state-uploading:hover,
+#upload .statusBar .btns .uploadBtn.state-paused:hover {
+    background: #f0f0f0;
+}
+
+#upload .statusBar .btns .uploadBtn,
+#upload .statusBar .btns .uploadBtn.state-paused{
+    background: #00b7ee;
+    color: #fff;
+    border-color: transparent;
+}
+#upload .statusBar .btns .uploadBtn:hover,
+#upload .statusBar .btns .uploadBtn.state-paused:hover{
+    background: #00a2d4;
+}
+
+#upload .statusBar .btns .uploadBtn.disabled {
+    pointer-events: none;
+    filter:alpha(opacity=60);
+    -moz-opacity:0.6;
+    -khtml-opacity: 0.6;
+    opacity: 0.6;
+}
+
+
+
+/* 图片管理样式 */
+#online {
+    width: 100%;
+    height: 336px;
+    padding: 10px 0 0 0;
+}
+#online #imageList{
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative;
+}
+#online ul {
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+#online li {
+    float: left;
+    display: block;
+    list-style: none;
+    padding: 0;
+    width: 113px;
+    height: 113px;
+    margin: 0 0 9px 9px;
+    *margin: 0 0 6px 6px;
+    background-color: #eee;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+}
+#online li.clearFloat {
+    float: none;
+    clear: both;
+    display: block;
+    width:0;
+    height:0;
+    margin: 0;
+    padding: 0;
+}
+#online li img {
+    cursor: pointer;
+}
+#online li .icon {
+    cursor: pointer;
+    width: 113px;
+    height: 113px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    border: 0;
+    background-repeat: no-repeat;
+}
+#online li .icon:hover {
+    width: 107px;
+    height: 107px;
+    border: 3px solid #1094fa;
+}
+#online li.selected .icon {
+    background-image: url(images/success.png);
+    background-image: url(images/success.gif)\9;
+    background-position: 75px 75px;
+}
+#online li.selected .icon:hover {
+    width: 107px;
+    height: 107px;
+    border: 3px solid #1094fa;
+    background-position: 72px 72px;
+}
diff --git a/public/js/ueditor/dialogs/image/image.html b/public/js/ueditor/dialogs/image/image.html
new file mode 100644
index 0000000..7a66c39
--- /dev/null
+++ b/public/js/ueditor/dialogs/image/image.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>ueditor图片对话框</title>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+
+    <!-- jquery -->
+    <script type="text/javascript" src="../../third-party/jquery-1.10.2.js?20220503"></script>
+
+    <!-- webuploader -->
+    <script src="../../third-party/webuploader/webuploader.js?20220503"></script>
+    <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css?20220503">
+
+    <!-- image dialog -->
+    <link rel="stylesheet" href="image.css?20220503" type="text/css" />
+</head>
+<body>
+
+    <div class="wrapper">
+        <div id="tabhead" class="tabhead">
+            <span class="tab focus" data-content-id="remote"><var id="lang_tab_remote"></var></span>
+            <span style="display:none;" class="tab" data-content-id="upload"><var id="lang_tab_upload"></var></span>
+            <span style="display:none;" class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
+        </div>
+        <div class="alignBar">
+            <label class="algnLabel"><var id="lang_input_align"></var></label>
+                    <span id="alignIcon">
+                        <span id="noneAlign" class="none-align focus" data-align="none"></span>
+                        <span id="leftAlign" class="left-align" data-align="left"></span>
+                        <span id="rightAlign" class="right-align" data-align="right"></span>
+                        <span id="centerAlign" class="center-align" data-align="center"></span>
+                    </span>
+            <input id="align" name="align" type="hidden" value="none"/>
+        </div>
+        <div id="tabbody" class="tabbody">
+
+            <!-- 远程图片 -->
+            <div id="remote" class="panel">
+                <div class="top">
+                    <div class="row">
+                        <label for="url"><var id="lang_input_url"></var></label>
+                        <span><input class="text" id="url" type="text"/></span>
+                        <a href="javascript:;" id="imageSelect" style="display:none;">选择图片</a>
+                    </div>
+                </div>
+                <div class="left">
+                    <div class="row">
+                        <label><var id="lang_input_size"></var></label>
+                        <span><var id="lang_input_width">&nbsp;&nbsp;</var><input class="text" type="text" id="width"/>px </span>
+                        <span><var id="lang_input_height">&nbsp;&nbsp;</var><input class="text" type="text" id="height"/>px </span>
+                        <span><input id="lock" type="checkbox" disabled="disabled"><span id="lockicon"></span></span>
+                    </div>
+                    <div class="row">
+                        <label><var id="lang_input_border"></var></label>
+                        <span><input class="text" type="text" id="border"/>px </span>
+                    </div>
+                    <div class="row">
+                        <label><var id="lang_input_vhspace"></var></label>
+                        <span><input class="text" type="text" id="vhSpace"/>px </span>
+                    </div>
+                    <div class="row">
+                        <label><var id="lang_input_title"></var></label>
+                        <span><input class="text" type="text" id="title"/></span>
+                    </div>
+                </div>
+                <div class="right"><div id="preview"></div></div>
+            </div>
+
+            <!-- 上传图片 -->
+            <div id="upload" class="panel focus">
+                <div id="queueList" class="queueList">
+                    <div class="statusBar element-invisible">
+                        <div class="progress">
+                            <span class="text">0%</span>
+                            <span class="percentage"></span>
+                        </div><div class="info"></div>
+                        <div class="btns">
+                            <div id="filePickerBtn"></div>
+                            <div class="uploadBtn"><var id="lang_start_upload"></var></div>
+                        </div>
+                    </div>
+                    <div id="dndArea" class="placeholder">
+                        <div class="filePickerContainer">
+                            <div id="filePickerReady"></div>
+                        </div>
+                    </div>
+                    <ul class="filelist element-invisible">
+                        <li id="filePickerBlock" class="filePickerBlock"></li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- 在线图片 -->
+            <div id="online" class="panel">
+                <div id="imageList"><var id="lang_imgLoading"></var></div>
+            </div>
+
+            <!-- 搜索图片 -->
+            <div id="search" class="panel">
+                <div class="searchBar">
+                    <input id="searchTxt" class="searchTxt text" type="text" />
+                    <select id="searchType" class="searchType">
+                        <option value="&s=4&z=0"></option>
+                        <option value="&s=1&z=19"></option>
+                        <option value="&s=2&z=0"></option>
+                        <option value="&s=3&z=0"></option>
+                    </select>
+                    <input id="searchReset" type="button"  />
+                    <input id="searchBtn" type="button"  />
+                </div>
+                <div id="searchList" class="searchList"><ul id="searchListUl"></ul></div>
+            </div>
+
+        </div>
+    </div>
+    <script type="text/javascript" src="image.js?20220503"></script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/image/image.js b/public/js/ueditor/dialogs/image/image.js
new file mode 100644
index 0000000..d7d1c62
--- /dev/null
+++ b/public/js/ueditor/dialogs/image/image.js
@@ -0,0 +1,1021 @@
+/**
+ * User: Jinqn
+ * Date: 14-04-08
+ * Time: 下午16:34
+ * 上传图片对话框逻辑代码,包括tab: 远程图片/上传图片/在线图片/搜索图片
+ */
+(function () {
+
+    var remoteImage,
+        uploadImage,
+        onlineImage;
+    var editorOpt = {};
+
+    window.onload = function () {
+        editorOpt = editor.getOpt('imageConfig');
+        initTabs();
+        initAlign();
+        initButtons();
+    };
+
+    /* 初始化tab标签 */
+    function initTabs() {
+        var tabs = $G('tabhead').children;
+        for (var i = 0; i < tabs.length; i++) {
+            domUtils.on(tabs[i], "click", function (e) {
+                var target = e.target || e.srcElement;
+                setTabFocus(target.getAttribute('data-content-id'));
+            });
+        }
+        if(!editorOpt.disableUpload){
+          $G('tabhead').querySelector('[data-content-id="upload"]').style.display = 'inline-block';
+        }
+        if(!editorOpt.disableOnline){
+          $G('tabhead').querySelector('[data-content-id="online"]').style.display = 'inline-block';
+        }
+        if(!!editorOpt.selectCallback){
+          $G('imageSelect').style.display = 'inline-block';
+          domUtils.on($G('imageSelect'), "click", function (e) {
+            editorOpt.selectCallback(editor,function(info){
+              if(info){
+                $G('url').value = info.path;
+                $G('title').value = info.name;
+                var img = new Image();
+                img.onload = function(){
+                  $G('width').value = img.width;
+                  $G('height').value = img.height;
+                  remoteImage.setPreview();
+                };
+                img.onerror = function(){
+                  remoteImage.setPreview();
+                };
+                img.src = info.path;
+              }
+            });
+          });
+        }
+        var img = editor.selection.getRange().getClosedNode();
+        if (img && img.tagName && img.tagName.toLowerCase() == 'img') {
+            setTabFocus('remote');
+        } else {
+            setTabFocus('remote');
+        }
+    }
+
+    /* 初始化tabbody */
+    function setTabFocus(id) {
+        if(!id) return;
+        var i, bodyId, tabs = $G('tabhead').children;
+        for (i = 0; i < tabs.length; i++) {
+            bodyId = tabs[i].getAttribute('data-content-id');
+            if (bodyId == id) {
+                domUtils.addClass(tabs[i], 'focus');
+                domUtils.addClass($G(bodyId), 'focus');
+            } else {
+                domUtils.removeClasses(tabs[i], 'focus');
+                domUtils.removeClasses($G(bodyId), 'focus');
+            }
+        }
+        switch (id) {
+            case 'remote':
+                remoteImage = remoteImage || new RemoteImage();
+                break;
+            case 'upload':
+                setAlign(editor.getOpt('imageInsertAlign'));
+                uploadImage = uploadImage || new UploadImage('queueList');
+                break;
+            case 'online':
+                setAlign(editor.getOpt('imageManagerInsertAlign'));
+                onlineImage = onlineImage || new OnlineImage('imageList');
+                onlineImage.reset();
+                break;
+        }
+    }
+
+    /* 初始化onok事件 */
+    function initButtons() {
+
+        dialog.onok = function () {
+            var remote = false, list = [], id, tabs = $G('tabhead').children;
+            for (var i = 0; i < tabs.length; i++) {
+                if (domUtils.hasClass(tabs[i], 'focus')) {
+                    id = tabs[i].getAttribute('data-content-id');
+                    break;
+                }
+            }
+
+            switch (id) {
+                case 'remote':
+                    list = remoteImage.getInsertList();
+                    break;
+                case 'upload':
+                    list = uploadImage.getInsertList();
+                    var count = uploadImage.getQueueCount();
+                    if (count) {
+                        $('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
+                        return false;
+                    }
+                    break;
+                case 'online':
+                    list = onlineImage.getInsertList();
+                    break;
+            }
+
+            if(list) {
+                editor.execCommand('insertimage', list);
+                remote && editor.fireEvent("catchRemoteImage");
+            }
+        };
+    }
+
+
+    /* 初始化对其方式的点击事件 */
+    function initAlign(){
+        /* 点击align图标 */
+        domUtils.on($G("alignIcon"), 'click', function(e){
+            var target = e.target || e.srcElement;
+            if(target.className && target.className.indexOf('-align') != -1) {
+                setAlign(target.getAttribute('data-align'));
+            }
+        });
+    }
+
+    /* 设置对齐方式 */
+    function setAlign(align){
+        align = align || 'none';
+        var aligns = $G("alignIcon").children;
+        for(i = 0; i < aligns.length; i++){
+            if(aligns[i].getAttribute('data-align') == align) {
+                domUtils.addClass(aligns[i], 'focus');
+                $G("align").value = aligns[i].getAttribute('data-align');
+            } else {
+                domUtils.removeClasses(aligns[i], 'focus');
+            }
+        }
+    }
+    /* 获取对齐方式 */
+    function getAlign(){
+        var align = $G("align").value || 'none';
+        return align == 'none' ? '':align;
+    }
+
+
+    /* 在线图片 */
+    function RemoteImage(target) {
+        this.container = utils.isString(target) ? document.getElementById(target) : target;
+        this.init();
+    }
+    RemoteImage.prototype = {
+        init: function () {
+            this.initContainer();
+            this.initEvents();
+        },
+        initContainer: function () {
+            this.dom = {
+                'url': $G('url'),
+                'width': $G('width'),
+                'height': $G('height'),
+                'border': $G('border'),
+                'vhSpace': $G('vhSpace'),
+                'title': $G('title'),
+                'align': $G('align')
+            };
+            var img = editor.selection.getRange().getClosedNode();
+            if (img) {
+                this.setImage(img);
+            }
+        },
+        initEvents: function () {
+            var _this = this,
+                locker = $G('lock');
+
+            /* 改变url */
+            domUtils.on($G("url"), 'keyup', updatePreview);
+            domUtils.on($G("border"), 'keyup', updatePreview);
+            domUtils.on($G("title"), 'keyup', updatePreview);
+
+            domUtils.on($G("width"), 'keyup', function(){
+                if(locker.checked) {
+                    var proportion =locker.getAttribute('data-proportion');
+                    $G('height').value = Math.round(this.value / proportion);
+                } else {
+                    _this.updateLocker();
+                }
+                updatePreview();
+            });
+            domUtils.on($G("height"), 'keyup', function(){
+                if(locker.checked) {
+                    var proportion =locker.getAttribute('data-proportion');
+                    $G('width').value = Math.round(this.value * proportion);
+                } else {
+                    _this.updateLocker();
+                }
+                updatePreview();
+            });
+            domUtils.on($G("lock"), 'change', function(){
+                var proportion = parseInt($G("width").value) /parseInt($G("height").value);
+                locker.setAttribute('data-proportion', proportion);
+            });
+
+            function updatePreview(){
+                _this.setPreview();
+            }
+        },
+        updateLocker: function(){
+            var width = $G('width').value,
+                height = $G('height').value,
+                locker = $G('lock');
+            if(width && height && width == parseInt(width) && height == parseInt(height)) {
+                locker.disabled = false;
+                locker.title = '';
+            } else {
+                locker.checked = false;
+                locker.disabled = 'disabled';
+                locker.title = lang.remoteLockError;
+            }
+        },
+        setImage: function(img){
+            /* 不是正常的图片 */
+            if (!img.tagName || img.tagName.toLowerCase() != 'img' && !img.getAttribute("src") || !img.src) return;
+
+            var wordImgFlag = img.getAttribute("data-word-image"),
+                src = wordImgFlag ? wordImgFlag.replace("&amp;", "&") : (img.getAttribute('_src') || img.getAttribute("src", 2).replace("&amp;", "&")),
+                align = editor.queryCommandValue("imageFloat");
+
+            /* 防止onchange事件循环调用 */
+            if (src !== $G("url").value) $G("url").value = src;
+            if(src) {
+                /* 设置表单内容 */
+                $G("width").value = img.width || '';
+                $G("height").value = img.height || '';
+                $G("border").value = img.getAttribute("border") || '0';
+                $G("vhSpace").value = img.getAttribute("vspace") || '0';
+                $G("title").value = img.title || img.alt || '';
+                setAlign(align);
+                this.setPreview();
+                this.updateLocker();
+            }
+        },
+        getData: function(){
+            var data = {};
+            for(var k in this.dom){
+                data[k] = this.dom[k].value;
+            }
+            return data;
+        },
+        setPreview: function(){
+            var url = $G('url').value,
+                ow = $G('width').value,
+                oh = $G('height').value,
+                border = $G('border').value,
+                title = $G('title').value,
+                preview = $G('preview'),
+                width,
+                height;
+
+            width = ((!ow || !oh) ? preview.offsetWidth:Math.min(ow, preview.offsetWidth));
+            width = width+(border*2) > preview.offsetWidth ? width:(preview.offsetWidth - (border*2));
+            height = (!ow || !oh) ? '':width*oh/ow;
+
+            if(url) {
+                preview.innerHTML = '<img src="' + url + '" width="' + width + '" height="' + height + '" border="' + border + 'px solid #000" title="' + title + '" />';
+            }
+        },
+        getInsertList: function () {
+            var data = this.getData();
+            if(data['url']) {
+                var img = {
+                  src: data['url'],
+                  _src: data['url'],
+                }
+                img._propertyDelete = []
+                img.style = []
+                if(data['width']){
+                  img.width = data['width'];
+                  img.style.push('width:'+data['width']+'px');
+                }else{
+                  img._propertyDelete.push('width');
+                }
+                if(data['height']){
+                  img.height = data['height'];
+                  img.style.push('height:'+data['height']+'px');
+                }else{
+                  img._propertyDelete.push('height');
+                }
+                if(data['border']){
+                  img.border = data['border'];
+                }else{
+                  img._propertyDelete.push('border');
+                }
+                if(data['align']){
+                  img.floatStyle = data['align'];
+                }else{
+                  img._propertyDelete.push('floatStyle');
+                }
+                if(data['vhSpace']){
+                  img.vspace = data['vhSpace'];
+                }else{
+                  img._propertyDelete.push('vspace');
+                }
+                if(data['title']){
+                  img.alt = data['title'];
+                }else{
+                  img._propertyDelete.push('alt');
+                }
+                if(img.style.length> 0){
+                  img.style = img.style.join(';');
+                }else{
+                  img._propertyDelete.push('style');
+                }
+                return [img];
+            } else {
+                return [];
+            }
+        }
+    };
+
+
+
+    /* 上传图片 */
+    function UploadImage(target) {
+        this.$wrap = target.constructor == String ? $('#' + target) : $(target);
+        this.init();
+    }
+    UploadImage.prototype = {
+        init: function () {
+            this.imageList = [];
+            this.initContainer();
+            this.initUploader();
+        },
+        initContainer: function () {
+            this.$queue = this.$wrap.find('.filelist');
+        },
+        /* 初始化容器 */
+        initUploader: function () {
+            var _this = this,
+                $ = jQuery,    // just in case. Make sure it's not an other libaray.
+                $wrap = _this.$wrap,
+            // 图片容器
+                $queue = $wrap.find('.filelist'),
+            // 状态栏，包括进度和控制按钮
+                $statusBar = $wrap.find('.statusBar'),
+            // 文件总体选择信息。
+                $info = $statusBar.find('.info'),
+            // 上传按钮
+                $upload = $wrap.find('.uploadBtn'),
+            // 上传按钮
+                $filePickerBtn = $wrap.find('.filePickerBtn'),
+            // 上传按钮
+                $filePickerBlock = $wrap.find('.filePickerBlock'),
+            // 没选择文件之前的内容。
+                $placeHolder = $wrap.find('.placeholder'),
+            // 总体进度条
+                $progress = $statusBar.find('.progress').hide(),
+            // 添加的文件数量
+                fileCount = 0,
+            // 添加的文件总大小
+                fileSize = 0,
+            // 优化retina, 在retina下这个值是2
+                ratio = window.devicePixelRatio || 1,
+            // 缩略图大小
+                thumbnailWidth = 113 * ratio,
+                thumbnailHeight = 113 * ratio,
+            // 可能有pedding, ready, uploading, confirm, done.
+                state = '',
+            // 所有文件的进度信息，key为file id
+                percentages = {},
+                supportTransition = (function () {
+                    var s = document.createElement('p').style,
+                        r = 'transition' in s ||
+                            'WebkitTransition' in s ||
+                            'MozTransition' in s ||
+                            'msTransition' in s ||
+                            'OTransition' in s;
+                    s = null;
+                    return r;
+                })(),
+            // WebUploader实例
+                uploader,
+                actionUrl = editor.getActionUrl(editor.getOpt('imageActionName')),
+                acceptExtensions = (editor.getOpt('imageAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, ''),
+                imageMaxSize = editor.getOpt('imageMaxSize'),
+                imageCompressBorder = editor.getOpt('imageCompressBorder');
+
+            if (!WebUploader.Uploader.support()) {
+                $('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide();
+                return;
+            } else if (!editor.getOpt('imageActionName')) {
+                $('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide();
+                return;
+            }
+
+            uploader = _this.uploader = WebUploader.create({
+                pick: {
+                    id: '#filePickerReady',
+                    label: lang.uploadSelectFile
+                },
+                accept: {
+                    title: 'Images',
+                    extensions: acceptExtensions,
+                    mimeTypes: 'image/*'
+                },
+                swf: '../../third-party/webuploader/Uploader.swf',
+                server: actionUrl,
+                fileVal: editor.getOpt('imageFieldName'),
+                duplicate: true,
+                fileSingleSizeLimit: imageMaxSize,    // 默认 2 M
+                threads: 1,
+                compress: editor.getOpt('imageCompressEnable') ? {
+                    width: imageCompressBorder,
+                    height: imageCompressBorder,
+                    // 图片质量，只有type为`image/jpeg`的时候才有效。
+                    quality: 90,
+                    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+                    allowMagnify: false,
+                    // 是否允许裁剪。
+                    crop: false,
+                    // 是否保留头部meta信息。
+                    preserveHeaders: true
+                }:false
+            });
+            uploader.addButton({
+                id: '#filePickerBlock'
+            });
+            uploader.addButton({
+                id: '#filePickerBtn',
+                label: lang.uploadAddFile
+            });
+
+            setState('pedding');
+
+            // 当有文件添加进来时执行，负责view的创建
+            function addFile(file) {
+                var $li = $('<li id="' + file.id + '">' +
+                    '<p class="title">' + file.name + '</p>' +
+                    '<p class="imgWrap"></p>' +
+                    '<p class="progress"><span></span></p>' +
+                    '</li>'),
+
+                    $btns = $('<div class="file-panel">' +
+                    '<span class="cancel">' + lang.uploadDelete + '</span>' +
+                    '<span class="rotateRight">' + lang.uploadTurnRight + '</span>' +
+                    '<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li),
+                    $prgress = $li.find('p.progress span'),
+                    $wrap = $li.find('p.imgWrap'),
+                    $info = $('<p class="error"></p>').hide().appendTo($li),
+
+                    showError = function (code) {
+                        switch (code) {
+                            case 'exceed_size':
+                                text = lang.errorExceedSize;
+                                break;
+                            case 'interrupt':
+                                text = lang.errorInterrupt;
+                                break;
+                            case 'http':
+                                text = lang.errorHttp;
+                                break;
+                            case 'not_allow_type':
+                                text = lang.errorFileType;
+                                break;
+                            default:
+                                text = lang.errorUploadRetry;
+                                break;
+                        }
+                        $info.text(text).show();
+                    };
+
+                if (file.getStatus() === 'invalid') {
+                    showError(file.statusText);
+                } else {
+                    $wrap.text(lang.uploadPreview);
+                    if (browser.ie && browser.version <= 7) {
+                        $wrap.text(lang.uploadNoPreview);
+                    } else {
+                        uploader.makeThumb(file, function (error, src) {
+                            if (error || !src) {
+                                $wrap.text(lang.uploadNoPreview);
+                            } else {
+                                var $img = $('<img src="' + src + '">');
+                                $wrap.empty().append($img);
+                                $img.on('error', function () {
+                                    $wrap.text(lang.uploadNoPreview);
+                                });
+                            }
+                        }, thumbnailWidth, thumbnailHeight);
+                    }
+                    percentages[ file.id ] = [ file.size, 0 ];
+                    file.rotation = 0;
+
+                    /* 检查文件格式 */
+                    if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) {
+                        showError('not_allow_type');
+                        uploader.removeFile(file);
+                    }
+                }
+
+                file.on('statuschange', function (cur, prev) {
+                    if (prev === 'progress') {
+                        $prgress.hide().width(0);
+                    } else if (prev === 'queued') {
+                        $li.off('mouseenter mouseleave');
+                        $btns.remove();
+                    }
+                    // 成功
+                    if (cur === 'error' || cur === 'invalid') {
+                        showError(file.statusText);
+                        percentages[ file.id ][ 1 ] = 1;
+                    } else if (cur === 'interrupt') {
+                        showError('interrupt');
+                    } else if (cur === 'queued') {
+                        percentages[ file.id ][ 1 ] = 0;
+                    } else if (cur === 'progress') {
+                        $info.hide();
+                        $prgress.css('display', 'block');
+                    } else if (cur === 'complete') {
+                    }
+
+                    $li.removeClass('state-' + prev).addClass('state-' + cur);
+                });
+
+                $li.on('mouseenter', function () {
+                    $btns.stop().animate({height: 30});
+                });
+                $li.on('mouseleave', function () {
+                    $btns.stop().animate({height: 0});
+                });
+
+                $btns.on('click', 'span', function () {
+                    var index = $(this).index(),
+                        deg;
+
+                    switch (index) {
+                        case 0:
+                            uploader.removeFile(file);
+                            return;
+                        case 1:
+                            file.rotation += 90;
+                            break;
+                        case 2:
+                            file.rotation -= 90;
+                            break;
+                    }
+
+                    if (supportTransition) {
+                        deg = 'rotate(' + file.rotation + 'deg)';
+                        $wrap.css({
+                            '-webkit-transform': deg,
+                            '-mos-transform': deg,
+                            '-o-transform': deg,
+                            'transform': deg
+                        });
+                    } else {
+                        $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
+                    }
+
+                });
+
+                $li.insertBefore($filePickerBlock);
+            }
+
+            // 负责view的销毁
+            function removeFile(file) {
+                var $li = $('#' + file.id);
+                delete percentages[ file.id ];
+                updateTotalProgress();
+                $li.off().find('.file-panel').off().end().remove();
+            }
+
+            function updateTotalProgress() {
+                var loaded = 0,
+                    total = 0,
+                    spans = $progress.children(),
+                    percent;
+
+                $.each(percentages, function (k, v) {
+                    total += v[ 0 ];
+                    loaded += v[ 0 ] * v[ 1 ];
+                });
+
+                percent = total ? loaded / total : 0;
+
+                spans.eq(0).text(Math.round(percent * 100) + '%');
+                spans.eq(1).css('width', Math.round(percent * 100) + '%');
+                updateStatus();
+            }
+
+            function setState(val, files) {
+
+                if (val != state) {
+
+                    var stats = uploader.getStats();
+
+                    $upload.removeClass('state-' + state);
+                    $upload.addClass('state-' + val);
+
+                    switch (val) {
+
+                        /* 未选择文件 */
+                        case 'pedding':
+                            $queue.addClass('element-invisible');
+                            $statusBar.addClass('element-invisible');
+                            $placeHolder.removeClass('element-invisible');
+                            $progress.hide(); $info.hide();
+                            uploader.refresh();
+                            break;
+
+                        /* 可以开始上传 */
+                        case 'ready':
+                            $placeHolder.addClass('element-invisible');
+                            $queue.removeClass('element-invisible');
+                            $statusBar.removeClass('element-invisible');
+                            $progress.hide(); $info.show();
+                            $upload.text(lang.uploadStart);
+                            uploader.refresh();
+                            break;
+
+                        /* 上传中 */
+                        case 'uploading':
+                            $progress.show(); $info.hide();
+                            $upload.text(lang.uploadPause);
+                            break;
+
+                        /* 暂停上传 */
+                        case 'paused':
+                            $progress.show(); $info.hide();
+                            $upload.text(lang.uploadContinue);
+                            break;
+
+                        case 'confirm':
+                            $progress.show(); $info.hide();
+                            $upload.text(lang.uploadStart);
+
+                            stats = uploader.getStats();
+                            if (stats.successNum && !stats.uploadFailNum) {
+                                setState('finish');
+                                return;
+                            }
+                            break;
+
+                        case 'finish':
+                            $progress.hide(); $info.show();
+                            if (stats.uploadFailNum) {
+                                $upload.text(lang.uploadRetry);
+                            } else {
+                                $upload.text(lang.uploadStart);
+                            }
+                            break;
+                    }
+
+                    state = val;
+                    updateStatus();
+
+                }
+
+                if (!_this.getQueueCount()) {
+                    $upload.addClass('disabled')
+                } else {
+                    $upload.removeClass('disabled')
+                }
+
+            }
+
+            function updateStatus() {
+                var text = '', stats;
+
+                if (state === 'ready') {
+                    text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize));
+                } else if (state === 'confirm') {
+                    stats = uploader.getStats();
+                    if (stats.uploadFailNum) {
+                        text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum);
+                    }
+                } else {
+                    stats = uploader.getStats();
+                    text = lang.updateStatusFinish.replace('_', fileCount).
+                        replace('_KB', WebUploader.formatSize(fileSize)).
+                        replace('_', stats.successNum);
+
+                    if (stats.uploadFailNum) {
+                        text += lang.updateStatusError.replace('_', stats.uploadFailNum);
+                    }
+                }
+
+                $info.html(text);
+            }
+
+            uploader.on('fileQueued', function (file) {
+                fileCount++;
+                fileSize += file.size;
+
+                if (fileCount === 1) {
+                    $placeHolder.addClass('element-invisible');
+                    $statusBar.show();
+                }
+
+                addFile(file);
+            });
+
+            uploader.on('fileDequeued', function (file) {
+                if (file.ext && acceptExtensions.indexOf(file.ext.toLowerCase()) != -1 && file.size <= imageMaxSize) {
+                    fileCount--;
+                    fileSize -= file.size;
+                }
+
+                removeFile(file);
+                updateTotalProgress();
+            });
+
+            uploader.on('filesQueued', function (file) {
+                if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) {
+                    setState('ready');
+                }
+                updateTotalProgress();
+            });
+
+            uploader.on('all', function (type, files) {
+                switch (type) {
+                    case 'uploadFinished':
+                        setState('confirm', files);
+                        break;
+                    case 'startUpload':
+                        /* 添加额外的GET参数 */
+                        var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
+                            url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);
+                        uploader.option('server', url);
+                        setState('uploading', files);
+                        break;
+                    case 'stopUpload':
+                        setState('paused', files);
+                        break;
+                }
+            });
+
+            uploader.on('uploadBeforeSend', function (file, data, header) {
+                //这里可以通过data对象添加POST参数
+                if (actionUrl.toLowerCase().indexOf('jsp') != -1) {
+                    header['X-Requested-With'] = 'XMLHttpRequest';
+                }
+            });
+
+            uploader.on('uploadProgress', function (file, percentage) {
+                var $li = $('#' + file.id),
+                    $percent = $li.find('.progress span');
+
+                $percent.css('width', percentage * 100 + '%');
+                percentages[ file.id ][ 1 ] = percentage;
+                updateTotalProgress();
+            });
+
+            uploader.on('uploadSuccess', function (file, ret) {
+                var $file = $('#' + file.id);
+                try {
+                    var responseText = (ret._raw || ret),
+                        json = utils.str2json(responseText);
+                    if (json.state == 'SUCCESS') {
+                        _this.imageList.push(json);
+                        $file.append('<span class="success"></span>');
+                    } else {
+                        $file.find('.error').text(json.state).show();
+                    }
+                } catch (e) {
+                    $file.find('.error').text(lang.errorServerUpload).show();
+                }
+            });
+
+            uploader.on('uploadError', function (file, code) {
+            });
+            uploader.on('error', function (code, file) {
+                if (code == 'Q_TYPE_DENIED' || code == 'F_EXCEED_SIZE') {
+                    addFile(file);
+                }
+            });
+            uploader.on('uploadComplete', function (file, ret) {
+            });
+
+            $upload.on('click', function () {
+                if ($(this).hasClass('disabled')) {
+                    return false;
+                }
+
+                if (state === 'ready') {
+                    uploader.upload();
+                } else if (state === 'paused') {
+                    uploader.upload();
+                } else if (state === 'uploading') {
+                    uploader.stop();
+                }
+            });
+
+            $upload.addClass('state-' + state);
+            updateTotalProgress();
+        },
+        getQueueCount: function () {
+            var file, i, status, readyFile = 0, files = this.uploader.getFiles();
+            for (i = 0; file = files[i++]; ) {
+                status = file.getStatus();
+                if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++;
+            }
+            return readyFile;
+        },
+        destroy: function () {
+            this.$wrap.remove();
+        },
+        getInsertList: function () {
+            var i, data, list = [],
+                align = getAlign(),
+                prefix = editor.getOpt('imageUrlPrefix');
+            for (i = 0; i < this.imageList.length; i++) {
+                data = this.imageList[i];
+                list.push({
+                    src: prefix + data.url,
+                    _src: prefix + data.url,
+                    alt: data.original,
+                    floatStyle: align
+                });
+            }
+            return list;
+        }
+    };
+
+
+    /* 在线图片 */
+    function OnlineImage(target) {
+        this.container = utils.isString(target) ? document.getElementById(target) : target;
+        this.init();
+    }
+    OnlineImage.prototype = {
+        init: function () {
+            this.reset();
+            this.initEvents();
+        },
+        /* 初始化容器 */
+        initContainer: function () {
+            this.container.innerHTML = '';
+            this.list = document.createElement('ul');
+            this.clearFloat = document.createElement('li');
+
+            domUtils.addClass(this.list, 'list');
+            domUtils.addClass(this.clearFloat, 'clearFloat');
+
+            this.list.appendChild(this.clearFloat);
+            this.container.appendChild(this.list);
+        },
+        /* 初始化滚动事件,滚动到地步自动拉取数据 */
+        initEvents: function () {
+            var _this = this;
+
+            /* 滚动拉取图片 */
+            domUtils.on($G('imageList'), 'scroll', function(e){
+                var panel = this;
+                if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
+                    _this.getImageData();
+                }
+            });
+            /* 选中图片 */
+            domUtils.on(this.container, 'click', function (e) {
+                var target = e.target || e.srcElement,
+                    li = target.parentNode;
+
+                if (li.tagName.toLowerCase() == 'li') {
+                    if (domUtils.hasClass(li, 'selected')) {
+                        domUtils.removeClasses(li, 'selected');
+                    } else {
+                        domUtils.addClass(li, 'selected');
+                    }
+                }
+            });
+        },
+        /* 初始化第一次的数据 */
+        initData: function () {
+
+            /* 拉取数据需要使用的值 */
+            this.state = 0;
+            this.listSize = editor.getOpt('imageManagerListSize');
+            this.listIndex = 0;
+            this.listEnd = false;
+
+            /* 第一次拉取数据 */
+            this.getImageData();
+        },
+        /* 重置界面 */
+        reset: function() {
+            this.initContainer();
+            this.initData();
+        },
+        /* 向后台拉取图片列表数据 */
+        getImageData: function () {
+            var _this = this;
+
+            if(!_this.listEnd && !this.isLoadingData) {
+                this.isLoadingData = true;
+                var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')),
+                    isJsonp = utils.isCrossDomainUrl(url);
+                ajax.request(url, {
+                    'timeout': 100000,
+                    'dataType': isJsonp ? 'jsonp':'',
+                    'data': utils.extend({
+                        start: this.listIndex,
+                        size: this.listSize
+                    }, editor.queryCommandValue('serverparam')),
+                    'method': 'get',
+                    'onsuccess': function (r) {
+                        try {
+                            var json = isJsonp ? r:eval('(' + r.responseText + ')');
+                            if (json.state == 'SUCCESS') {
+                                _this.pushData(json.list);
+                                _this.listIndex = parseInt(json.start) + parseInt(json.list.length);
+                                if(_this.listIndex >= json.total) {
+                                    _this.listEnd = true;
+                                }
+                                _this.isLoadingData = false;
+                            }
+                        } catch (e) {
+                            if(r.responseText.indexOf('ue_separate_ue') != -1) {
+                                var list = r.responseText.split(r.responseText);
+                                _this.pushData(list);
+                                _this.listIndex = parseInt(list.length);
+                                _this.listEnd = true;
+                                _this.isLoadingData = false;
+                            }
+                        }
+                    },
+                    'onerror': function () {
+                        _this.isLoadingData = false;
+                    }
+                });
+            }
+        },
+        /* 添加图片到列表界面上 */
+        pushData: function (list) {
+            var i, item, img, icon, _this = this,
+                urlPrefix = editor.getOpt('imageManagerUrlPrefix');
+            for (i = 0; i < list.length; i++) {
+                if(list[i] && list[i].url) {
+                    item = document.createElement('li');
+                    img = document.createElement('img');
+                    icon = document.createElement('span');
+
+                    domUtils.on(img, 'load', (function(image){
+                        return function(){
+                            _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
+                        }
+                    })(img));
+                    img.width = 113;
+                    img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) );
+                    img.setAttribute('_src', urlPrefix + list[i].url);
+                    domUtils.addClass(icon, 'icon');
+
+                    item.appendChild(img);
+                    item.appendChild(icon);
+                    this.list.insertBefore(item, this.clearFloat);
+                }
+            }
+        },
+        /* 改变图片大小 */
+        scale: function (img, w, h, type) {
+            var ow = img.width,
+                oh = img.height;
+
+            if (type == 'justify') {
+                if (ow >= oh) {
+                    img.width = w;
+                    img.height = h * oh / ow;
+                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
+                } else {
+                    img.width = w * ow / oh;
+                    img.height = h;
+                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
+                }
+            } else {
+                if (ow >= oh) {
+                    img.width = w * ow / oh;
+                    img.height = h;
+                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
+                } else {
+                    img.width = w;
+                    img.height = h * oh / ow;
+                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
+                }
+            }
+        },
+        getInsertList: function () {
+            var i, lis = this.list.children, list = [], align = getAlign();
+            for (i = 0; i < lis.length; i++) {
+                if (domUtils.hasClass(lis[i], 'selected')) {
+                    var img = lis[i].firstChild,
+                        src = img.getAttribute('_src');
+                    list.push({
+                        src: src,
+                        _src: src,
+                        alt: src.substr(src.lastIndexOf('/') + 1),
+                        floatStyle: align
+                    });
+                }
+
+            }
+            return list;
+        }
+    };
+
+})();
diff --git a/public/js/ueditor/dialogs/image/images/alignicon.jpg b/public/js/ueditor/dialogs/image/images/alignicon.jpg
new file mode 100644
index 0000000..754755b
Binary files /dev/null and b/public/js/ueditor/dialogs/image/images/alignicon.jpg differ
diff --git a/public/js/ueditor/dialogs/image/images/bg.png b/public/js/ueditor/dialogs/image/images/bg.png
new file mode 100644
index 0000000..580be0a
Binary files /dev/null and b/public/js/ueditor/dialogs/image/images/bg.png differ
diff --git a/public/js/ueditor/dialogs/image/images/icons.gif b/public/js/ueditor/dialogs/image/images/icons.gif
new file mode 100644
index 0000000..78459de
Binary files /dev/null and b/public/js/ueditor/dialogs/image/images/icons.gif differ
diff --git a/public/js/ueditor/dialogs/image/images/icons.png b/public/js/ueditor/dialogs/image/images/icons.png
new file mode 100644
index 0000000..12e4700
Binary files /dev/null and b/public/js/ueditor/dialogs/image/images/icons.png differ
diff --git a/public/js/ueditor/dialogs/image/images/image.png b/public/js/ueditor/dialogs/image/images/image.png
new file mode 100644
index 0000000..19699f6
Binary files /dev/null and b/public/js/ueditor/dialogs/image/images/image.png differ
diff --git a/public/js/ueditor/dialogs/image/images/progress.png b/public/js/ueditor/dialogs/image/images/progress.png
new file mode 100644
index 0000000..717c486
Binary files /dev/null and b/public/js/ueditor/dialogs/image/images/progress.png differ
diff --git a/public/js/ueditor/dialogs/image/images/success.gif b/public/js/ueditor/dialogs/image/images/success.gif
new file mode 100644
index 0000000..8d4f311
Binary files /dev/null and b/public/js/ueditor/dialogs/image/images/success.gif differ
diff --git a/public/js/ueditor/dialogs/image/images/success.png b/public/js/ueditor/dialogs/image/images/success.png
new file mode 100644
index 0000000..94f968d
Binary files /dev/null and b/public/js/ueditor/dialogs/image/images/success.png differ
diff --git a/public/js/ueditor/dialogs/insertframe/insertframe.html b/public/js/ueditor/dialogs/insertframe/insertframe.html
new file mode 100644
index 0000000..0d23658
--- /dev/null
+++ b/public/js/ueditor/dialogs/insertframe/insertframe.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title></title>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <style type="text/css">
+        .warp {width: 320px;height: 200px;margin-left:5px;padding: 20px 0 0 15px;position: relative;}
+        #url {width: 290px; margin-bottom: 2px; margin-left: -6px; margin-left: -2px\9;*margin-left:0;_margin-left:0; }
+        .format span{display: inline-block; width: 58px;text-align:left; zoom:1;}
+        table td{padding:5px 0;}
+        input[type="text"]{height:30px;border:1px solid #EEE;border-radius:3px;padding:0 5px;line-height:2px;outline:none;}
+        #align{width: 65px;height: 23px;line-height: 22px;}
+    </style>
+</head>
+<body>
+<div class="warp">
+        <table width="300" cellpadding="0" cellspacing="0">
+            <tr>
+                <td colspan="2" class="format">
+                    <span><var id="lang_input_address"></var></span>
+                    <input style="width:200px" id="url" type="text" value=""/>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2" class="format"><span><var id="lang_input_width"></var></span><input style="width:200px" type="text" id="width"/> px</td>
+
+            </tr>
+            <tr>
+                <td colspan="2" class="format"><span><var id="lang_input_height"></var></span><input style="width:200px" type="text" id="height"/> px</td>
+            </tr>
+            <tr>
+                <td><span><var id="lang_input_isScroll"></var></span><input type="checkbox" id="scroll"/> </td>
+                <td><span><var id="lang_input_frameborder"></var></span><input type="checkbox" id="frameborder"/> </td>
+            </tr>
+
+            <tr>
+                <td colspan="2"><span><var id="lang_input_alignMode"></var></span>
+                    <select id="align">
+                        <option value=""></option>
+                        <option value="left"></option>
+                        <option value="right"></option>
+                    </select>
+                </td>
+            </tr>
+        </table>
+</div>
+<script type="text/javascript">
+    var iframe = editor._iframe;
+    if(iframe){
+        $G("url").value = iframe.getAttribute("src")||"";
+        $G("width").value = iframe.getAttribute("width")||iframe.style.width.replace("px","")||"";
+        $G("height").value = iframe.getAttribute("height") || iframe.style.height.replace("px","") ||"";
+        $G("scroll").checked = (iframe.getAttribute("scrolling") == "yes") ? true : false;
+        $G("frameborder").checked = (iframe.getAttribute("frameborder") == "1") ? true : false;
+        $G("align").value = iframe.align ? iframe.align : "";
+    }
+    function queding(){
+        var  url = $G("url").value.replace(/^\s*|\s*$/ig,""),
+                width = $G("width").value,
+                height = $G("height").value,
+                scroll = $G("scroll"),
+                frameborder = $G("frameborder"),
+                float = $G("align").value,
+                newIframe = editor.document.createElement("iframe"),
+                div;
+        if(!url){
+            alert(lang.enterAddress);
+            return false;
+        }
+        newIframe.setAttribute("src",/http:\/\/|https:\/\//ig.test(url) ? url : "http://"+url);
+        /^[1-9]+[.]?\d*$/g.test( width ) ? newIframe.setAttribute("width",width) : "";
+        /^[1-9]+[.]?\d*$/g.test( height ) ? newIframe.setAttribute("height",height) : "";
+        scroll.checked ?  newIframe.setAttribute("scrolling","yes") : newIframe.setAttribute("scrolling","no");
+        frameborder.checked ?  newIframe.setAttribute("frameborder","1",0) : newIframe.setAttribute("frameborder","0",0);
+        float ? newIframe.setAttribute("align",float) :  newIframe.setAttribute("align","");
+        if(iframe){
+            iframe.parentNode.insertBefore(newIframe,iframe);
+            domUtils.remove(iframe);
+        }else{
+            div = editor.document.createElement("div");
+            div.appendChild(newIframe);
+            editor.execCommand("inserthtml",div.innerHTML);
+        }
+        editor._iframe = null;
+        dialog.close();
+    }
+    dialog.onok = queding;
+    $G("url").onkeydown = function(evt){
+        evt = evt || event;
+        if(evt.keyCode == 13){
+            queding();
+        }
+    };
+    $focus($G( "url" ));
+
+</script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/internal.js b/public/js/ueditor/dialogs/internal.js
new file mode 100644
index 0000000..44dc17f
--- /dev/null
+++ b/public/js/ueditor/dialogs/internal.js
@@ -0,0 +1,81 @@
+(function () {
+    var parent = window.parent;
+    //dialog对象
+    dialog = parent.$EDITORUI[window.frameElement.id.replace( /_iframe$/, '' )];
+    //当前打开dialog的编辑器实例
+    editor = dialog.editor;
+
+    UE = parent.UE;
+
+    domUtils = UE.dom.domUtils;
+
+    utils = UE.utils;
+
+    browser = UE.browser;
+
+    ajax = UE.ajax;
+
+    $G = function ( id ) {
+        return document.getElementById( id )
+    };
+    //focus元素
+    $focus = function ( node ) {
+        setTimeout( function () {
+            if ( browser.ie ) {
+                var r = node.createTextRange();
+                r.collapse( false );
+                r.select();
+            } else {
+                node.focus()
+            }
+        }, 0 )
+    };
+    utils.loadFile(document,{
+        href:editor.options.themePath + editor.options.theme + "/dialogbase.css?cache="+Math.random(),
+        tag:"link",
+        type:"text/css",
+        rel:"stylesheet"
+    });
+    lang = editor.getLang(dialog.className.split( "-" )[2]);
+    if(lang){
+        domUtils.on(window,'load',function () {
+
+            var langImgPath = editor.options.langPath + editor.options.lang + "/images/";
+            //针对静态资源
+            for ( var i in lang["static"] ) {
+                var dom = $G( i );
+                if(!dom) continue;
+                var tagName = dom.tagName,
+                    content = lang["static"][i];
+                if(content.src){
+                    //clone
+                    content = utils.extend({},content,false);
+                    content.src = langImgPath + content.src;
+                }
+                if(content.style){
+                    content = utils.extend({},content,false);
+                    content.style = content.style.replace(/url\s*\(/g,"url(" + langImgPath)
+                }
+                switch ( tagName.toLowerCase() ) {
+                    case "var":
+                        dom.parentNode.replaceChild( document.createTextNode( content ), dom );
+                        break;
+                    case "select":
+                        var ops = dom.options;
+                        for ( var j = 0, oj; oj = ops[j]; ) {
+                            oj.innerHTML = content.options[j++];
+                        }
+                        for ( var p in content ) {
+                            p != "options" && dom.setAttribute( p, content[p] );
+                        }
+                        break;
+                    default :
+                        domUtils.setAttributes( dom, content);
+                }
+            }
+        } );
+    }
+
+
+})();
+
diff --git a/public/js/ueditor/dialogs/link/link.html b/public/js/ueditor/dialogs/link/link.html
new file mode 100644
index 0000000..9c0a3d6
--- /dev/null
+++ b/public/js/ueditor/dialogs/link/link.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+        "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <style type="text/css">
+        *{margin:0;padding:0;color: #838383;}
+        table{font-size: 12px;margin: 10px;line-height:36px;width:100%;}
+        .txt{box-sizing:border-box;width:90%;height:30px;line-height:30px;border:1px solid #d7d7d7;border-radius:3px;padding:0 5px;outline:none;}
+    </style>
+</head>
+<body>
+    <div style="padding:10px;">
+      <table>
+        <tr>
+          <td><label for="text"> <var id="lang_input_text"></var></label></td>
+          <td><input class="txt" id="text" type="text" disabled="true"/></td>
+        </tr>
+        <tr>
+          <td><label for="href"> <var id="lang_input_url"></var></label></td>
+          <td><input class="txt" id="href" type="text" /></td>
+        </tr>
+        <tr>
+          <td><label for="title"> <var id="lang_input_title"></var></label></td>
+          <td><input class="txt" id="title" type="text"/></td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <label for="target"><var id="lang_input_target"></var></label>
+            <input id="target" type="checkbox"/>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2" id="msg"></td>
+        </tr>
+      </table>
+    </div>
+<script type="text/javascript">
+
+    editor.setOpt('allowLinkProtocols', ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:']);
+    var allowLinkProtocols = editor.getOpt('allowLinkProtocols');
+
+    var range = editor.selection.getRange(),
+        link = range.collapsed ? editor.queryCommandValue( "link" ) : editor.selection.getStart(),
+        url,
+        text = $G('text'),
+        rangeLink = domUtils.findParentByTagName(range.getCommonAncestor(),'a',true),
+        orgText;
+
+    link = domUtils.findParentByTagName( link, "a", true );
+
+    if(link){
+        url = utils.html(link.getAttribute( '_href' ) || link.getAttribute( 'href', 2 ));
+
+        if(rangeLink === link && !link.getElementsByTagName('img').length){
+            text.removeAttribute('disabled');
+            orgText = text.value = link[browser.ie ? 'innerText':'textContent'];
+        }else{
+            text.setAttribute('disabled','true');
+            text.value = lang.validLink;
+        }
+
+    }else{
+        if(range.collapsed){
+            text.removeAttribute('disabled');
+            text.value = '';
+        }else{
+            text.setAttribute('disabled','true');
+            text.value = lang.validLink;
+        }
+
+    }
+    $G("title").value = url ? link.title : "";
+    $G("href").value = url ? url: '';
+    $G("target").checked = url && link.target == "_blank" ? true :  false;
+    $focus($G("href"));
+
+    function handleDialogOk(){
+        var href =$G('href').value.replace(/^\s+|\s+$/g, '');
+        if(href){
+            if(!hrefStartWith(href, allowLinkProtocols)) {
+                href  = "http://" + href;
+            }
+            var obj = {
+                'href' : href,
+                'target' : $G("target").checked ? "_blank" : '_self',
+                'title' : $G("title").value.replace(/^\s+|\s+$/g, ''),
+                '_href':href
+            };
+            //修改链接内容的情况太特殊了，所以先做到这里了
+            //todo:情况多的时候，做到command里
+            if(orgText && text.value != orgText){
+                link[browser.ie ? 'innerText' : 'textContent'] =  obj.textValue = text.value;
+                range.selectNode(link).select()
+            }
+            if(range.collapsed){
+                obj.textValue = text.value;
+            }
+            editor.execCommand('link',utils.clearEmptyAttrs(obj) );
+            dialog.close();
+        }
+    }
+    dialog.onok = handleDialogOk;
+    $G('href').onkeydown = $G('title').onkeydown = function(evt){
+        evt = evt || window.event;
+        if (evt.keyCode == 13) {
+            handleDialogOk();
+            return false;
+        }
+    };
+    $G('href').onblur = function(){
+        if(!hrefStartWith(this.value, allowLinkProtocols)){
+            $G("msg").innerHTML = "<span style='color: red'>"+lang.httpPrompt+"</span>";
+        }else{
+            $G("msg").innerHTML = "";
+        }
+    };
+
+    function hrefStartWith(href,arr){
+        href = href.replace(/^\s+|\s+$/g, '');
+        for(var i=0,ai;ai=arr[i++];){
+            if(href.indexOf(ai)==0){
+                return true;
+            }
+        }
+        return false;
+    }
+
+
+</script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/preview/preview.html b/public/js/ueditor/dialogs/preview/preview.html
new file mode 100644
index 0000000..69d9a32
--- /dev/null
+++ b/public/js/ueditor/dialogs/preview/preview.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+    "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <style>
+            html,body{
+                height:100%;
+                width:100%;
+                padding:0;
+                margin:0;
+            }
+            #preview{
+                width:100%;
+                height:100%;
+                padding:0;
+                margin:0;
+            }
+            #preview *{font-family:sans-serif;font-size:16px;}
+        </style>
+        <script type="text/javascript" src="../internal.js?20220503"></script>
+        <script src="../../ueditor.parse.js?20220503"></script>
+        <title></title>
+    </head>
+    <body class="view">
+        <div id="preview" style="margin:8px">
+
+        </div>
+    </body>
+    <script>
+        document.getElementById('preview').innerHTML = editor.getContent();
+        uParse('#preview',{
+            rootPath : '../../',
+            chartContainerHeight:500
+        })
+        dialog.oncancel = function(){
+            document.getElementById('preview').innerHTML = '';
+        }
+    </script>
+</html>
diff --git a/public/js/ueditor/dialogs/scrawl/images/addimg.png b/public/js/ueditor/dialogs/scrawl/images/addimg.png
new file mode 100644
index 0000000..03a8713
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/addimg.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/brush.png b/public/js/ueditor/dialogs/scrawl/images/brush.png
new file mode 100644
index 0000000..efa6fdb
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/brush.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/delimg.png b/public/js/ueditor/dialogs/scrawl/images/delimg.png
new file mode 100644
index 0000000..5a892e4
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/delimg.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/delimgH.png b/public/js/ueditor/dialogs/scrawl/images/delimgH.png
new file mode 100644
index 0000000..2f0c5c9
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/delimgH.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/empty.png b/public/js/ueditor/dialogs/scrawl/images/empty.png
new file mode 100644
index 0000000..0375196
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/empty.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/emptyH.png b/public/js/ueditor/dialogs/scrawl/images/emptyH.png
new file mode 100644
index 0000000..838ca72
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/emptyH.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/eraser.png b/public/js/ueditor/dialogs/scrawl/images/eraser.png
new file mode 100644
index 0000000..63e87ce
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/eraser.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/redo.png b/public/js/ueditor/dialogs/scrawl/images/redo.png
new file mode 100644
index 0000000..12cd9bb
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/redo.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/redoH.png b/public/js/ueditor/dialogs/scrawl/images/redoH.png
new file mode 100644
index 0000000..d9f33d3
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/redoH.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/scale.png b/public/js/ueditor/dialogs/scrawl/images/scale.png
new file mode 100644
index 0000000..935a3f3
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/scale.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/scaleH.png b/public/js/ueditor/dialogs/scrawl/images/scaleH.png
new file mode 100644
index 0000000..72e64a9
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/scaleH.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/size.png b/public/js/ueditor/dialogs/scrawl/images/size.png
new file mode 100644
index 0000000..8366845
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/size.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/undo.png b/public/js/ueditor/dialogs/scrawl/images/undo.png
new file mode 100644
index 0000000..084c7cc
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/undo.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/images/undoH.png b/public/js/ueditor/dialogs/scrawl/images/undoH.png
new file mode 100644
index 0000000..fde7eb3
Binary files /dev/null and b/public/js/ueditor/dialogs/scrawl/images/undoH.png differ
diff --git a/public/js/ueditor/dialogs/scrawl/scrawl.css b/public/js/ueditor/dialogs/scrawl/scrawl.css
new file mode 100644
index 0000000..b18430d
--- /dev/null
+++ b/public/js/ueditor/dialogs/scrawl/scrawl.css
@@ -0,0 +1,72 @@
+/*common
+*/
+body{margin: 0;}
+table{width:100%;}
+table td{padding:2px 4px;vertical-align: middle;}
+a{text-decoration: none;}
+em{font-style: normal;}
+.border_style1{border: 1px solid #ccc;border-radius: 5px;box-shadow:2px 2px 5px #d3d6da;}
+/*module
+*/
+.main{margin: 8px;overflow: hidden;}
+
+.hot{float:left;height:335px;}
+.drawBoard{position: relative; cursor: crosshair;}
+.brushBorad{position: absolute;left:0;top:0;z-index: 998;}
+.picBoard{border: none;text-align: center;line-height: 300px;cursor: default;}
+.operateBar{margin-top:10px;font-size:12px;text-align: center;}
+.operateBar span{margin-left: 10px;}
+
+.drawToolbar{float:right;width:110px;height:300px;overflow: hidden;}
+.colorBar{margin-top:10px;font-size: 12px;text-align: center;}
+.colorBar a{display:block;width: 10px;height: 10px;border:1px solid #1006F1;border-radius: 3px; box-shadow:2px 2px 5px #d3d6da;opacity: 0.3}
+.sectionBar{margin-top:15px;font-size: 12px;text-align: center;}
+.sectionBar a{display:inline-block;width:10px;height:12px;color: #888;text-indent: -999px;opacity: 0.3}
+.size1{background: url('images/size.png') 1px center no-repeat ;}
+.size2{background: url('images/size.png') -10px center no-repeat;}
+.size3{background: url('images/size.png') -22px center no-repeat;}
+.size4{background: url('images/size.png') -35px center no-repeat;}
+
+.addImgH{position: relative;}
+.addImgH_form{position: absolute;left: 18px;top: -1px;width: 75px;height: 21px;opacity: 0;cursor: pointer;}
+.addImgH_form input{width: 100%;}
+/*scrawl遮罩层
+*/
+.maskLayerNull{display: none;}
+.maskLayer{position: absolute;top:0;left:0;width: 100%; height: 100%;opacity: 0.7;
+    background-color: #fff;text-align:center;font-weight:bold;line-height:300px;z-index: 1000;}
+/*btn state
+*/
+.previousStepH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/undoH.png');cursor: pointer;}
+.previousStepH .text{color:#888;cursor:pointer;}
+.previousStep .icon{display: inline-block;width:16px;height:16px;background-image: url('images/undo.png');cursor:default;}
+.previousStep .text{color:#ccc;cursor:default;}
+
+.nextStepH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/redoH.png');cursor: pointer;}
+.nextStepH .text{color:#888;cursor:pointer;}
+.nextStep .icon{display: inline-block;width:16px;height:16px;background-image: url('images/redo.png');cursor:default;}
+.nextStep .text{color:#ccc;cursor:default;}
+
+.clearBoardH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/emptyH.png');cursor: pointer;}
+.clearBoardH .text{color:#888;cursor:pointer;}
+.clearBoard .icon{display: inline-block;width:16px;height:16px;background-image: url('images/empty.png');cursor:default;}
+.clearBoard .text{color:#ccc;cursor:default;}
+
+.scaleBoardH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/scaleH.png');cursor: pointer;}
+.scaleBoardH .text{color:#888;cursor:pointer;}
+.scaleBoard .icon{display: inline-block;width:16px;height:16px;background-image: url('images/scale.png');cursor:default;}
+.scaleBoard .text{color:#ccc;cursor:default;}
+
+.removeImgH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/delimgH.png');cursor: pointer;}
+.removeImgH .text{color:#888;cursor:pointer;}
+.removeImg .icon{display: inline-block;width:16px;height:16px;background-image: url('images/delimg.png');cursor:default;}
+.removeImg .text{color:#ccc;cursor:default;}
+
+.addImgH .icon{vertical-align:top;display: inline-block;width:16px;height:16px;background-image: url('images/addimg.png')}
+.addImgH .text{color:#888;cursor:pointer;}
+/*icon
+*/
+.brushIcon{display: inline-block;width:16px;height:16px;background-image: url('images/brush.png')}
+.eraserIcon{display: inline-block;width:16px;height:16px;background-image: url('images/eraser.png')}
+
+
diff --git a/public/js/ueditor/dialogs/scrawl/scrawl.html b/public/js/ueditor/dialogs/scrawl/scrawl.html
new file mode 100644
index 0000000..4f2551a
--- /dev/null
+++ b/public/js/ueditor/dialogs/scrawl/scrawl.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="robots" content="noindex, nofollow"/>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <link rel="stylesheet" type="text/css" href="scrawl.css?20220503">
+</head>
+<body>
+<div class="main" id="J_wrap">
+    <div class="hot">
+        <div class="drawBoard border_style1">
+            <canvas id="J_brushBoard" class="brushBorad" width="360" height="300"></canvas>
+            <div id="J_picBoard" class="picBoard" style="width: 360px;height: 300px"></div>
+        </div>
+        <div id="J_operateBar" class="operateBar">
+            <span id="J_previousStep" class="previousStep">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_previousStep"></var></em>
+            </span>
+            <span id="J_nextStep" class="nextStep">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_nextsStep"></var></em>
+            </span>
+            <span id="J_clearBoard" class="clearBoard">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_clear"></var></em>
+            </span>
+            <span id="J_sacleBoard" class="scaleBoard">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_ScalePic"></var></em>
+            </span>
+        </div>
+    </div>
+    <div class="drawToolbar border_style1">
+        <div id="J_colorBar" class="colorBar"></div>
+        <div id="J_brushBar" class="sectionBar">
+            <em class="brushIcon"></em>
+            <a href="javascript:void(0)" class="size1">1</a>
+            <a href="javascript:void(0)" class="size2">3</a>
+            <a href="javascript:void(0)" class="size3">5</a>
+            <a href="javascript:void(0)" class="size4">7</a>
+        </div>
+        <div id="J_eraserBar" class="sectionBar">
+            <em class="eraserIcon"></em>
+            <a href="javascript:void(0)" class="size1">1</a>
+            <a href="javascript:void(0)" class="size2">3</a>
+            <a href="javascript:void(0)" class="size3">5</a>
+            <a href="javascript:void(0)" class="size4">7</a>
+        </div>
+        <div class="sectionBar">
+            <div id="J_addImg" class="addImgH">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_addPic"></var></em>
+                <form method="post" id="fileForm" enctype="multipart/form-data" class="addImgH_form" target="up">
+                    <input type="file" name="upfile" id="J_imgTxt"
+                           accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>
+                </form>
+                <iframe name="up" style="display: none"></iframe>
+            </div>
+        </div>
+        <div class="sectionBar">
+            <span id="J_removeImg" class="removeImg">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_removePic"></var></em>
+            </span>
+        </div>
+    </div>
+</div>
+<div id="J_maskLayer" class="maskLayerNull"></div>
+
+<script type="text/javascript" src="scrawl.js?20220503"></script>
+<script type="text/javascript">
+    var settings = {
+        drawBrushSize:3, //画笔初始大小
+        drawBrushColor:"#4bacc6", //画笔初始颜色
+        colorList:['c00000', 'ff0000', 'ffc000', 'ffff00', '92d050', '00b050', '00b0f0', '0070c0', '002060', '7030a0', 'ffffff',
+            '000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646'], //画笔选择颜色
+        saveNum:10  //撤销次数
+    };
+
+    var scrawlObj = new scrawl( settings );
+    scrawlObj.isCancelScrawl = false;
+
+    dialog.onok = function () {
+        exec( scrawlObj );
+        return false;
+    };
+    dialog.oncancel = function () {
+        scrawlObj.isCancelScrawl = true;
+    };
+</script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/scrawl/scrawl.js b/public/js/ueditor/dialogs/scrawl/scrawl.js
new file mode 100644
index 0000000..d0b451b
--- /dev/null
+++ b/public/js/ueditor/dialogs/scrawl/scrawl.js
@@ -0,0 +1,670 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-5-22
+ * Time: 上午11:38
+ * To change this template use File | Settings | File Templates.
+ */
+var scrawl = function (options) {
+    options && this.initOptions(options);
+};
+(function () {
+    var canvas = $G("J_brushBoard"),
+        context = canvas.getContext('2d'),
+        drawStep = [], //undo redo存储
+        drawStepIndex = 0; //undo redo指针
+
+    scrawl.prototype = {
+        isScrawl:false, //是否涂鸦
+        brushWidth:-1, //画笔粗细
+        brushColor:"", //画笔颜色
+
+        initOptions:function (options) {
+            var me = this;
+            me.originalState(options);//初始页面状态
+            me._buildToolbarColor(options.colorList);//动态生成颜色选择集合
+
+            me._addBoardListener(options.saveNum);//添加画板处理
+            me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理
+            me._addColorBarListener();//添加颜色选择处理
+            me._addBrushBarListener();//添加画笔大小处理
+            me._addEraserBarListener();//添加橡皮大小处理
+            me._addAddImgListener();//添加增添背景图片处理
+            me._addRemoveImgListenter();//删除背景图片处理
+            me._addScalePicListenter();//添加缩放处理
+            me._addClearSelectionListenter();//添加清楚选中状态处理
+
+            me._originalColorSelect(options.drawBrushColor);//初始化颜色选中
+            me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中
+            me._clearSelection();//清楚选中状态
+        },
+
+        originalState:function (options) {
+            var me = this;
+
+            me.brushWidth = options.drawBrushSize;//同步画笔粗细
+            me.brushColor = options.drawBrushColor;//同步画笔颜色
+
+            context.lineWidth = me.brushWidth;//初始画笔大小
+            context.strokeStyle = me.brushColor;//初始画笔颜色
+            context.fillStyle = "transparent";//初始画布背景颜色
+            context.lineCap = "round";//去除锯齿
+            context.fill();
+        },
+        _buildToolbarColor:function (colorList) {
+            var tmp = null, arr = [];
+            arr.push("<table id='J_colorList'>");
+            for (var i = 0, color; color = colorList[i++];) {
+                if ((i - 1) % 5 == 0) {
+                    if (i != 1) {
+                        arr.push("</tr>");
+                    }
+                    arr.push("<tr>");
+                }
+                tmp = '#' + color;
+                arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>");
+            }
+            arr.push("</tr></table>");
+            $G("J_colorBar").innerHTML = arr.join("");
+        },
+
+        _addBoardListener:function (saveNum) {
+            var me = this,
+                margin = 0,
+                startX = -1,
+                startY = -1,
+                isMouseDown = false,
+                isMouseMove = false,
+                isMouseUp = false,
+                buttonPress = 0, button, flag = '';
+
+            margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left"));
+            drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
+            drawStepIndex += 1;
+
+            domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) {
+                button = browser.webkit ? e.which : buttonPress;
+                switch (e.type) {
+                    case 'mousedown':
+                        buttonPress = 1;
+                        flag = 1;
+                        isMouseDown = true;
+                        isMouseUp = false;
+                        isMouseMove = false;
+                        me.isScrawl = true;
+                        startX = e.clientX - margin;//10为外边距总和
+                        startY = e.clientY - margin;
+                        context.beginPath();
+                        break;
+                    case 'mousemove' :
+                        if (!flag && button == 0) {
+                            return;
+                        }
+                        if (!flag && button) {
+                            startX = e.clientX - margin;//10为外边距总和
+                            startY = e.clientY - margin;
+                            context.beginPath();
+                            flag = 1;
+                        }
+                        if (isMouseUp || !isMouseDown) {
+                            return;
+                        }
+                        var endX = e.clientX - margin,
+                            endY = e.clientY - margin;
+
+                        context.moveTo(startX, startY);
+                        context.lineTo(endX, endY);
+                        context.stroke();
+                        startX = endX;
+                        startY = endY;
+                        isMouseMove = true;
+                        break;
+                    case 'mouseup':
+                        buttonPress = 0;
+                        if (!isMouseDown)return;
+                        if (!isMouseMove) {
+                            context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false);
+                            context.fillStyle = context.strokeStyle;
+                            context.fill();
+                        }
+                        context.closePath();
+                        me._saveOPerate(saveNum);
+                        isMouseDown = false;
+                        isMouseMove = false;
+                        isMouseUp = true;
+                        startX = -1;
+                        startY = -1;
+                        break;
+                    case 'mouseout':
+                        flag = '';
+                        buttonPress = 0;
+                        if (button == 1) return;
+                        context.closePath();
+                        break;
+                }
+            });
+        },
+        _addOPerateListener:function (saveNum) {
+            var me = this;
+            domUtils.on($G("J_previousStep"), "click", function () {
+                if (drawStepIndex > 1) {
+                    drawStepIndex -= 1;
+                    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+                    context.putImageData(drawStep[drawStepIndex - 1], 0, 0);
+                    me.btn2Highlight("J_nextStep");
+                    drawStepIndex == 1 && me.btn2disable("J_previousStep");
+                }
+            });
+            domUtils.on($G("J_nextStep"), "click", function () {
+                if (drawStepIndex > 0 && drawStepIndex < drawStep.length) {
+                    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+                    context.putImageData(drawStep[drawStepIndex], 0, 0);
+                    drawStepIndex += 1;
+                    me.btn2Highlight("J_previousStep");
+                    drawStepIndex == drawStep.length && me.btn2disable("J_nextStep");
+                }
+            });
+            domUtils.on($G("J_clearBoard"), "click", function () {
+                context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+                drawStep = [];
+                me._saveOPerate(saveNum);
+                drawStepIndex = 1;
+                me.isScrawl = false;
+                me.btn2disable("J_previousStep");
+                me.btn2disable("J_nextStep");
+                me.btn2disable("J_clearBoard");
+            });
+        },
+        _addColorBarListener:function () {
+            var me = this;
+            domUtils.on($G("J_colorBar"), "click", function (e) {
+                var target = me.getTarget(e),
+                    color = target.title;
+                if (!!color) {
+                    me._addColorSelect(target);
+
+                    me.brushColor = color;
+                    context.globalCompositeOperation = "source-over";
+                    context.lineWidth = me.brushWidth;
+                    context.strokeStyle = color;
+                }
+            });
+        },
+        _addBrushBarListener:function () {
+            var me = this;
+            domUtils.on($G("J_brushBar"), "click", function (e) {
+                var target = me.getTarget(e),
+                    size = browser.ie ? target.innerText : target.text;
+                if (!!size) {
+                    me._addBESelect(target);
+
+                    context.globalCompositeOperation = "source-over";
+                    context.lineWidth = parseInt(size);
+                    context.strokeStyle = me.brushColor;
+                    me.brushWidth = context.lineWidth;
+                }
+            });
+        },
+        _addEraserBarListener:function () {
+            var me = this;
+            domUtils.on($G("J_eraserBar"), "click", function (e) {
+                var target = me.getTarget(e),
+                    size = browser.ie ? target.innerText : target.text;
+                if (!!size) {
+                    me._addBESelect(target);
+
+                    context.lineWidth = parseInt(size);
+                    context.globalCompositeOperation = "destination-out";
+                    context.strokeStyle = "#FFF";
+                }
+            });
+        },
+        _addAddImgListener:function () {
+            var file = $G("J_imgTxt");
+            if (!window.FileReader) {
+                $G("J_addImg").style.display = 'none';
+                $G("J_removeImg").style.display = 'none';
+                $G("J_sacleBoard").style.display = 'none';
+            }
+            domUtils.on(file, "change", function (e) {
+                var frm = file.parentNode;
+                addMaskLayer(lang.backgroundUploading);
+
+                var target = e.target || e.srcElement,
+                    reader = new FileReader();
+                reader.onload = function(evt){
+                    var target = evt.target || evt.srcElement;
+                    ue_callback(target.result, 'SUCCESS');
+                };
+                reader.readAsDataURL(target.files[0]);
+                frm.reset();
+            });
+        },
+        _addRemoveImgListenter:function () {
+            var me = this;
+            domUtils.on($G("J_removeImg"), "click", function () {
+                $G("J_picBoard").innerHTML = "";
+                me.btn2disable("J_removeImg");
+                me.btn2disable("J_sacleBoard");
+            });
+        },
+        _addScalePicListenter:function () {
+            domUtils.on($G("J_sacleBoard"), "click", function () {
+                var picBoard = $G("J_picBoard"),
+                    scaleCon = $G("J_scaleCon"),
+                    img = picBoard.children[0];
+
+                if (img) {
+                    if (!scaleCon) {
+                        picBoard.style.cssText = "position:relative;z-index:999;"+picBoard.style.cssText;
+                        img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;";
+                        var scale = new ScaleBoy();
+                        picBoard.appendChild(scale.init());
+                        scale.startScale(img);
+                    } else {
+                        if (scaleCon.style.visibility == "visible") {
+                            scaleCon.style.visibility = "hidden";
+                            picBoard.style.position = "";
+                            picBoard.style.zIndex = "";
+                        } else {
+                            scaleCon.style.visibility = "visible";
+                            picBoard.style.cssText += "position:relative;z-index:999";
+                        }
+                    }
+                }
+            });
+        },
+        _addClearSelectionListenter:function () {
+            var doc = document;
+            domUtils.on(doc, 'mousemove', function (e) {
+                if (browser.ie && browser.version < 11)
+                    doc.selection.clear();
+                else
+                    window.getSelection().removeAllRanges();
+            });
+        },
+        _clearSelection:function () {
+            var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"];
+            for (var i = 0, group; group = list[i++];) {
+                domUtils.unSelectable($G(group));
+            }
+        },
+
+        _saveOPerate:function (saveNum) {
+            var me = this;
+            if (drawStep.length <= saveNum) {
+                if(drawStepIndex<drawStep.length){
+                    me.btn2disable("J_nextStep");
+                    drawStep.splice(drawStepIndex);
+                }
+                drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
+                drawStepIndex = drawStep.length;
+            } else {
+                drawStep.shift();
+                drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
+                drawStepIndex = drawStep.length;
+            }
+            me.btn2Highlight("J_previousStep");
+            me.btn2Highlight("J_clearBoard");
+        },
+
+        _originalColorSelect:function (title) {
+            var colorList = $G("J_colorList").getElementsByTagName("td");
+            for (var j = 0, cell; cell = colorList[j++];) {
+                if (cell.children[0].title.toLowerCase() == title) {
+                    cell.children[0].style.opacity = 1;
+                }
+            }
+        },
+        _originalBrushSelect:function (text) {
+            var brushList = $G("J_brushBar").children;
+            for (var i = 0, ele; ele = brushList[i++];) {
+                if (ele.tagName.toLowerCase() == "a") {
+                    var size = browser.ie ? ele.innerText : ele.text;
+                    if (size.toLowerCase() == text) {
+                        ele.style.opacity = 1;
+                    }
+                }
+            }
+        },
+        _addColorSelect:function (target) {
+            var me = this,
+                colorList = $G("J_colorList").getElementsByTagName("td"),
+                eraserList = $G("J_eraserBar").children,
+                brushList = $G("J_brushBar").children;
+
+            for (var i = 0, cell; cell = colorList[i++];) {
+                cell.children[0].style.opacity = 0.3;
+            }
+            for (var k = 0, ele; ele = brushList[k++];) {
+                if (ele.tagName.toLowerCase() == "a") {
+                    ele.style.opacity = 0.3;
+                    var size = browser.ie ? ele.innerText : ele.text;
+                    if (size.toLowerCase() == this.brushWidth) {
+                        ele.style.opacity = 1;
+                    }
+                }
+            }
+            for (var j = 0, node; node = eraserList[j++];) {
+                if (node.tagName.toLowerCase() == "a") {
+                    node.style.opacity = 0.3;
+                }
+            }
+
+            target.style.opacity = 1;
+            target.blur();
+        },
+        _addBESelect:function (target) {
+            var brushList = $G("J_brushBar").children;
+            var eraserList = $G("J_eraserBar").children;
+
+            for (var i = 0, ele; ele = brushList[i++];) {
+                if (ele.tagName.toLowerCase() == "a") {
+                    ele.style.opacity = 0.3;
+                }
+            }
+            for (var j = 0, node; node = eraserList[j++];) {
+                if (node.tagName.toLowerCase() == "a") {
+                    node.style.opacity = 0.3;
+                }
+            }
+
+            target.style.opacity = 1;
+            target.blur();
+        },
+        getCanvasData:function () {
+            var picContainer = $G("J_picBoard"),
+                img = picContainer.children[0];
+            if (img) {
+                var x, y;
+                if (img.style.position == "absolute") {
+                    x = parseInt(img.style.left);
+                    y = parseInt(img.style.top);
+                } else {
+                    x = (picContainer.offsetWidth - img.width) / 2;
+                    y = (picContainer.offsetHeight - img.height) / 2;
+                }
+                context.globalCompositeOperation = "destination-over";
+                context.drawImage(img, x, y, img.width, img.height);
+            } else {
+                context.globalCompositeOperation = "destination-atop";
+                context.fillStyle = "#fff";//重置画布背景白色
+                context.fillRect(0, 0, canvas.width, canvas.height);
+            }
+            try {
+                return canvas.toDataURL("image/png").substring(22);
+            } catch (e) {
+                return "";
+            }
+        },
+        btn2Highlight:function (id) {
+            var cur = $G(id);
+            cur.className.indexOf("H") == -1 && (cur.className += "H");
+        },
+        btn2disable:function (id) {
+            var cur = $G(id);
+            cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", ""));
+        },
+        getTarget:function (evt) {
+            return evt.target || evt.srcElement;
+        }
+    };
+})();
+
+var ScaleBoy = function () {
+    this.dom = null;
+    this.scalingElement = null;
+};
+(function () {
+    function _appendStyle() {
+        var doc = document,
+            head = doc.getElementsByTagName('head')[0],
+            style = doc.createElement('style'),
+            cssText = '.scale{visibility:hidden;cursor:move;position:absolute;left:0;top:0;width:100px;height:50px;background-color:#fff;font-size:0;line-height:0;opacity:.4;filter:Alpha(opacity=40);}'
+                + '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}'
+                + '.scale .hand0, .scale .hand7{cursor:nw-resize;}'
+                + '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}'
+                + '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}'
+                + '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}'
+                + '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}'
+                + '.scale .hand2, .scale .hand5{cursor:ne-resize;}';
+        style.type = 'text/css';
+
+        try {
+            style.appendChild(doc.createTextNode(cssText));
+        } catch (e) {
+            style.styleSheet.cssText = cssText;
+        }
+        head.appendChild(style);
+    }
+
+    function _getDom() {
+        var doc = document,
+            hand,
+            arr = [],
+            scale = doc.createElement('div');
+
+        scale.id = 'J_scaleCon';
+        scale.className = 'scale';
+        for (var i = 0; i < 8; i++) {
+            arr.push("<span class='hand" + i + "'></span>");
+        }
+        scale.innerHTML = arr.join("");
+        return scale;
+    }
+
+    var rect = [
+        //[left, top, width, height]
+        [1, 1, -1, -1],
+        [0, 1, 0, -1],
+        [0, 1, 1, -1],
+        [1, 0, -1, 0],
+        [0, 0, 1, 0],
+        [1, 0, -1, 1],
+        [0, 0, 0, 1],
+        [0, 0, 1, 1]
+    ];
+    ScaleBoy.prototype = {
+        init:function () {
+            _appendStyle();
+            var me = this,
+                scale = me.dom = _getDom();
+
+            me.scaleMousemove.fp = me;
+            domUtils.on(scale, 'mousedown', function (e) {
+                var target = e.target || e.srcElement;
+                me.start = {x:e.clientX, y:e.clientY};
+                if (target.className.indexOf('hand') != -1) {
+                    me.dir = target.className.replace('hand', '');
+                }
+                domUtils.on(document.body, 'mousemove', me.scaleMousemove);
+                e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
+            });
+            domUtils.on(document.body, 'mouseup', function (e) {
+                if (me.start) {
+                    domUtils.un(document.body, 'mousemove', me.scaleMousemove);
+                    if (me.moved) {
+                        me.updateScaledElement({position:{x:scale.style.left, y:scale.style.top}, size:{w:scale.style.width, h:scale.style.height}});
+                    }
+                    delete me.start;
+                    delete me.moved;
+                    delete me.dir;
+                }
+            });
+            return scale;
+        },
+        startScale:function (objElement) {
+            var me = this, Idom = me.dom;
+
+            Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;';
+            me.scalingElement = objElement;
+        },
+        updateScaledElement:function (objStyle) {
+            var cur = this.scalingElement,
+                pos = objStyle.position,
+                size = objStyle.size;
+            if (pos) {
+                typeof pos.x != 'undefined' && (cur.style.left = pos.x);
+                typeof pos.y != 'undefined' && (cur.style.top = pos.y);
+            }
+            if (size) {
+                size.w && (cur.style.width = size.w);
+                size.h && (cur.style.height = size.h);
+            }
+        },
+        updateStyleByDir:function (dir, offset) {
+            var me = this,
+                dom = me.dom, tmp;
+
+            rect['def'] = [1, 1, 0, 0];
+            if (rect[dir][0] != 0) {
+                tmp = parseInt(dom.style.left) + offset.x;
+                dom.style.left = me._validScaledProp('left', tmp) + 'px';
+            }
+            if (rect[dir][1] != 0) {
+                tmp = parseInt(dom.style.top) + offset.y;
+                dom.style.top = me._validScaledProp('top', tmp) + 'px';
+            }
+            if (rect[dir][2] != 0) {
+                tmp = dom.clientWidth + rect[dir][2] * offset.x;
+                dom.style.width = me._validScaledProp('width', tmp) + 'px';
+            }
+            if (rect[dir][3] != 0) {
+                tmp = dom.clientHeight + rect[dir][3] * offset.y;
+                dom.style.height = me._validScaledProp('height', tmp) + 'px';
+            }
+            if (dir === 'def') {
+                me.updateScaledElement({position:{x:dom.style.left, y:dom.style.top}});
+            }
+        },
+        scaleMousemove:function (e) {
+            var me = arguments.callee.fp,
+                start = me.start,
+                dir = me.dir || 'def',
+                offset = {x:e.clientX - start.x, y:e.clientY - start.y};
+
+            me.updateStyleByDir(dir, offset);
+            arguments.callee.fp.start = {x:e.clientX, y:e.clientY};
+            arguments.callee.fp.moved = 1;
+        },
+        _validScaledProp:function (prop, value) {
+            var ele = this.dom,
+                wrap = $G("J_picBoard");
+
+            value = isNaN(value) ? 0 : value;
+            switch (prop) {
+                case 'left':
+                    return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value;
+                case 'top':
+                    return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value;
+                case 'width':
+                    return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value;
+                case 'height':
+                    return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value;
+            }
+        }
+    };
+})();
+
+//后台回调
+function ue_callback(url, state) {
+    var doc = document,
+        picBorard = $G("J_picBoard"),
+        img = doc.createElement("img");
+
+    //图片缩放
+    function scale(img, max, oWidth, oHeight) {
+        var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
+        if (ow > max || oh > max) {
+            if (ow >= oh) {
+                if (width = ow - max) {
+                    percent = (width / ow).toFixed(2);
+                    img.height = oh - oh * percent;
+                    img.width = max;
+                }
+            } else {
+                if (height = oh - max) {
+                    percent = (height / oh).toFixed(2);
+                    img.width = ow - ow * percent;
+                    img.height = max;
+                }
+            }
+        }
+    }
+
+    //移除遮罩层
+    removeMaskLayer();
+    //状态响应
+    if (state == "SUCCESS") {
+        picBorard.innerHTML = "";
+        img.onload = function () {
+            scale(this, 300);
+            picBorard.appendChild(img);
+
+            var obj = new scrawl();
+            obj.btn2Highlight("J_removeImg");
+            //trace 2457
+            obj.btn2Highlight("J_sacleBoard");
+        };
+        img.src = url;
+    } else {
+        alert(state);
+    }
+}
+//去掉遮罩层
+function removeMaskLayer() {
+    var maskLayer = $G("J_maskLayer");
+    maskLayer.className = "maskLayerNull";
+    maskLayer.innerHTML = "";
+    dialog.buttons[0].setDisabled(false);
+}
+//添加遮罩层
+function addMaskLayer(html) {
+    var maskLayer = $G("J_maskLayer");
+    dialog.buttons[0].setDisabled(true);
+    maskLayer.className = "maskLayer";
+    maskLayer.innerHTML = html;
+}
+//执行确认按钮方法
+function exec(scrawlObj) {
+    if (scrawlObj.isScrawl) {
+        addMaskLayer(lang.scrawlUpLoading);
+        var base64 = scrawlObj.getCanvasData();
+        if (!!base64) {
+            var options = {
+                timeout:100000,
+                onsuccess:function (xhr) {
+                    if (!scrawlObj.isCancelScrawl) {
+                        var responseObj;
+                        responseObj = eval("(" + xhr.responseText + ")");
+                        if (responseObj.state == "SUCCESS") {
+                            var imgObj = {},
+                                url = editor.options.scrawlUrlPrefix + responseObj.url;
+                            imgObj.src = url;
+                            imgObj._src = url;
+                            imgObj.alt = responseObj.original || '';
+                            editor.execCommand("insertImage", imgObj);
+                            dialog.close();
+                        } else {
+                            alert(responseObj.state);
+                        }
+
+                    }
+                },
+                onerror:function () {
+                    alert(lang.imageError);
+                    dialog.close();
+                }
+            };
+            options[editor.getOpt('scrawlFieldName')] = base64;
+
+            var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),
+                params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
+                url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);
+            ajax.request(url, options);
+        }
+    } else {
+        addMaskLayer(lang.noScarwl + "&nbsp;&nbsp;&nbsp;<input type='button' value='" + lang.continueBtn + "'  onclick='removeMaskLayer()'/>");
+    }
+}
+
diff --git a/public/js/ueditor/dialogs/searchreplace/searchreplace.html b/public/js/ueditor/dialogs/searchreplace/searchreplace.html
new file mode 100644
index 0000000..8efae07
--- /dev/null
+++ b/public/js/ueditor/dialogs/searchreplace/searchreplace.html
@@ -0,0 +1,117 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+        "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title></title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <style type="text/css">
+        .warpper{ position:relative;width: 380px; height: 100%; margin: 10px auto;}
+        .tabbody{height: 160px;}
+        .tabbody table{width:100%;border-collapse: separate;border-spacing: 3px;line-height:36px;}
+        .tabbody .panel{width:373px;height:100%;padding-left: 5px;position: absolute;background-color: #fff;}
+        .tabbody input.int{ width: 190px;
+          height: 30px;
+          border: 1px solid #d7d7d7;
+          line-height: 21px;
+          border-radius: 3px;
+          outline: none;
+          padding: 0 5px; }
+        .tabbody input.btn{    text-align: center;
+          line-height: 28px;
+          text-decoration: none;
+          height: 30px;
+          border: 1px solid #ccc;
+          background: #FFF;
+          border-radius: 3px;
+          padding: 0 5px;
+          font-size: 12px;
+          cursor: pointer;}
+    </style>
+</head>
+<body>
+<div class="warpper" id="searchtab">
+    <div id="head" class="tabhead">
+        <span  tabsrc="find" class="focus"><var id="lang_tab_search"></var></span>
+        <span  tabsrc="replace" ><var id="lang_tab_replace"></var></span>
+    </div>
+    <div class="tabbody">
+        <div class="panel" id="find">
+            <table>
+                <tr>
+                    <td width="80"><var id="lang_search1"></var>: </td>
+                    <td><input id="findtxt" type="text" class="int" /></td>
+                </tr>
+                <!--<tr>-->
+
+                    <!--<td colspan="2"><span style="color:red"><var id="lang_searchReg"></var></span></td>-->
+                <!--</tr>-->
+                <tr>
+                    <td><var id="lang_case_sensitive1"></var></td>
+                    <td>
+                        <input id="matchCase" type="checkbox" />
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <input id="nextFindBtn" type="button" class="btn" />
+                        <input id="preFindBtn" type="button" class="btn" />
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        &nbsp;
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <span id="search-msg" style="color:red"></span>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="panel" id="replace">
+            <table>
+                <tr>
+                    <td width="80"><var id="lang_search2"></var>: </td>
+                    <td><input id="findtxt1" type="text" class="int"  /></td>
+                </tr>
+                <!--<tr>-->
+
+                    <!--<td colspan="2"><span style="color:red"><var id="lang_searchReg1"></var></span></td>-->
+                <!--</tr>-->
+                <tr>
+                    <td><var id="lang_replace"></var>: </td>
+                    <td><input id="replacetxt" type="text" class="int" /></td>
+                </tr>
+                <tr>
+                    <td><var id="lang_case_sensitive2"></var></td>
+                    <td>
+                        <input id="matchCase1" type="checkbox" />
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <input id="nextReplaceBtn" type="button" class="btn" />
+                        <input id="preReplaceBtn" type="button" class="btn" />
+                        <input id="repalceBtn" type="button" class="btn" />
+                        <input id="repalceAllBtn" type="button" class="btn" />
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        &nbsp;
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <span id="replace-msg" style="color:red"></span>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="searchreplace.js?20220503"></script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/searchreplace/searchreplace.js b/public/js/ueditor/dialogs/searchreplace/searchreplace.js
new file mode 100644
index 0000000..02fa46c
--- /dev/null
+++ b/public/js/ueditor/dialogs/searchreplace/searchreplace.js
@@ -0,0 +1,170 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-9-26
+ * Time: 下午12:29
+ * To change this template use File | Settings | File Templates.
+ */
+
+//清空上次查选的痕迹
+editor.firstForSR = 0;
+editor.currentRangeForSR = null;
+//给tab注册切换事件
+/**
+ * tab点击处理事件
+ * @param tabHeads
+ * @param tabBodys
+ * @param obj
+ */
+function clickHandler( tabHeads,tabBodys,obj ) {
+    //head样式更改
+    for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
+        tabHeads[k].className = "";
+    }
+    obj.className = "focus";
+    //body显隐
+    var tabSrc = obj.getAttribute( "tabSrc" );
+    for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
+        var body = tabBodys[j],
+            id = body.getAttribute( "id" );
+        if ( id != tabSrc ) {
+            body.style.zIndex = 1;
+        } else {
+            body.style.zIndex = 200;
+        }
+    }
+
+}
+
+/**
+ * TAB切换
+ * @param tabParentId  tab的父节点ID或者对象本身
+ */
+function switchTab( tabParentId ) {
+    var tabElements = $G( tabParentId ).children,
+        tabHeads = tabElements[0].children,
+        tabBodys = tabElements[1].children;
+
+    for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
+        var head = tabHeads[i];
+        if ( head.className === "focus" )clickHandler(tabHeads,tabBodys, head );
+        head.onclick = function () {
+            clickHandler(tabHeads,tabBodys,this);
+        }
+    }
+}
+$G('searchtab').onmousedown = function(){
+    $G('search-msg').innerHTML = '';
+    $G('replace-msg').innerHTML = ''
+}
+//是否区分大小写
+function getMatchCase(id) {
+    return $G(id).checked ? true : false;
+}
+//查找
+$G("nextFindBtn").onclick = function (txt, dir, mcase) {
+    var findtxt = $G("findtxt").value, obj;
+    if (!findtxt) {
+        return false;
+    }
+    obj = {
+        searchStr:findtxt,
+        dir:1,
+        casesensitive:getMatchCase("matchCase")
+    };
+    if (!frCommond(obj)) {
+        var bk = editor.selection.getRange().createBookmark();
+        $G('search-msg').innerHTML = lang.getEnd;
+        editor.selection.getRange().moveToBookmark(bk).select();
+
+
+    }
+};
+$G("nextReplaceBtn").onclick = function (txt, dir, mcase) {
+    var findtxt = $G("findtxt1").value, obj;
+    if (!findtxt) {
+        return false;
+    }
+    obj = {
+        searchStr:findtxt,
+        dir:1,
+        casesensitive:getMatchCase("matchCase1")
+    };
+    frCommond(obj);
+};
+$G("preFindBtn").onclick = function (txt, dir, mcase) {
+    var findtxt = $G("findtxt").value, obj;
+    if (!findtxt) {
+        return false;
+    }
+    obj = {
+        searchStr:findtxt,
+        dir:-1,
+        casesensitive:getMatchCase("matchCase")
+    };
+    if (!frCommond(obj)) {
+        $G('search-msg').innerHTML = lang.getStart;
+    }
+};
+$G("preReplaceBtn").onclick = function (txt, dir, mcase) {
+    var findtxt = $G("findtxt1").value, obj;
+    if (!findtxt) {
+        return false;
+    }
+    obj = {
+        searchStr:findtxt,
+        dir:-1,
+        casesensitive:getMatchCase("matchCase1")
+    };
+    frCommond(obj);
+};
+//替换
+$G("repalceBtn").onclick = function () {
+    editor.trigger('clearLastSearchResult');
+    var findtxt = $G("findtxt1").value.replace(/^\s|\s$/g, ""), obj,
+        replacetxt = $G("replacetxt").value.replace(/^\s|\s$/g, "");
+    if (!findtxt) {
+        return false;
+    }
+    if (findtxt == replacetxt || (!getMatchCase("matchCase1") && findtxt.toLowerCase() == replacetxt.toLowerCase())) {
+        return false;
+    }
+    obj = {
+        searchStr:findtxt,
+        dir:1,
+        casesensitive:getMatchCase("matchCase1"),
+        replaceStr:replacetxt
+    };
+    frCommond(obj);
+};
+//全部替换
+$G("repalceAllBtn").onclick = function () {
+    var findtxt = $G("findtxt1").value.replace(/^\s|\s$/g, ""), obj,
+        replacetxt = $G("replacetxt").value.replace(/^\s|\s$/g, "");
+    if (!findtxt) {
+        return false;
+    }
+    if (findtxt == replacetxt || (!getMatchCase("matchCase1") && findtxt.toLowerCase() == replacetxt.toLowerCase())) {
+        return false;
+    }
+    obj = {
+        searchStr:findtxt,
+        casesensitive:getMatchCase("matchCase1"),
+        replaceStr:replacetxt,
+        all:true
+    };
+    var num = frCommond(obj);
+    if (num) {
+        $G('replace-msg').innerHTML = lang.countMsg.replace("{#count}", num);
+    }
+};
+//执行
+var frCommond = function (obj) {
+    return editor.execCommand("searchreplace", obj);
+};
+switchTab("searchtab");
+
+
+dialog.onclose = function(){
+    editor.trigger('clearLastSearchResult')
+};
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/spechars/spechars.html b/public/js/ueditor/dialogs/spechars/spechars.html
new file mode 100644
index 0000000..9eb952d
--- /dev/null
+++ b/public/js/ueditor/dialogs/spechars/spechars.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+        "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <style type="text/css">
+        html,body{overflow:hidden;}
+        #specharsTab{width: 97%;margin: 10px auto; zoom:1;position: relative}
+        .tabbody {height:447px;}
+        .tabbody span{ margin: 5px 3px;text-align: center;display:inline-block;width: 40px;height:16px;line-height: 16px;cursor: pointer; }
+    </style>
+</head>
+<body>
+    <div id="specharsTab">
+        <div id="tabHeads" class="tabhead"></div><div id="tabBodys" class="tabbody"></div>
+    </div>
+<script type="text/javascript" src="spechars.js?20220503"></script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/spechars/spechars.js b/public/js/ueditor/dialogs/spechars/spechars.js
new file mode 100644
index 0000000..f4c155e
--- /dev/null
+++ b/public/js/ueditor/dialogs/spechars/spechars.js
@@ -0,0 +1,57 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-9-26
+ * Time: 下午1:09
+ * To change this template use File | Settings | File Templates.
+ */
+var charsContent = [
+    { name:"tsfh", title:lang.tsfh, content:toArray("、,。,·,ˉ,ˇ,¨,〃,々,—,～,‖,…,‘,’,“,”,〔,〕,〈,〉,《,》,「,」,『,』,〖,〗,【,】,±,×,÷,∶,∧,∨,∑,∏,∪,∩,∈,∷,√,⊥,∥,∠,⌒,⊙,∫,∮,≡,≌,≈,∽,∝,≠,≮,≯,≤,≥,∞,∵,∴,♂,♀,°,′,″,℃,＄,¤,￠,￡,‰,§,№,☆,★,○,●,◎,◇,◆,□,■,△,▲,※,→,←,↑,↓,〓,〡,〢,〣,〤,〥,〦,〧,〨,〩,㊣,㎎,㎏,㎜,㎝,㎞,㎡,㏄,㏎,㏑,㏒,㏕,︰,￢,￤,℡,ˊ,ˋ,˙,–,―,‥,‵,℅,℉,↖,↗,↘,↙,∕,∟,∣,≒,≦,≧,⊿,═,║,╒,╓,╔,╕,╖,╗,╘,╙,╚,╛,╜,╝,╞,╟,╠,╡,╢,╣,╤,╥,╦,╧,╨,╩,╪,╫,╬,╭,╮,╯,╰,╱,╲,╳,▁,▂,▃,▄,▅,▆,▇,�,█,▉,▊,▋,▌,▍,▎,▏,▓,▔,▕,▼,▽,◢,◣,◤,◥,☉,⊕,〒,〝,〞")},
+    { name:"lmsz", title:lang.lmsz, content:toArray("ⅰ,ⅱ,ⅲ,ⅳ,ⅴ,ⅵ,ⅶ,ⅷ,ⅸ,ⅹ,Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅵ,Ⅶ,Ⅷ,Ⅸ,Ⅹ,Ⅺ,Ⅻ")},
+    { name:"szfh", title:lang.szfh, content:toArray("⒈,⒉,⒊,⒋,⒌,⒍,⒎,⒏,⒐,⒑,⒒,⒓,⒔,⒕,⒖,⒗,⒘,⒙,⒚,⒛,⑴,⑵,⑶,⑷,⑸,⑹,⑺,⑻,⑼,⑽,⑾,⑿,⒀,⒁,⒂,⒃,⒄,⒅,⒆,⒇,①,②,③,④,⑤,⑥,⑦,⑧,⑨,⑩,㈠,㈡,㈢,㈣,㈤,㈥,㈦,㈧,㈨,㈩")},
+    { name:"rwfh", title:lang.rwfh, content:toArray("ぁ,あ,ぃ,い,ぅ,う,ぇ,え,ぉ,お,か,が,き,ぎ,く,ぐ,け,げ,こ,ご,さ,ざ,し,じ,す,ず,せ,ぜ,そ,ぞ,た,だ,ち,ぢ,っ,つ,づ,て,で,と,ど,な,に,ぬ,ね,の,は,ば,ぱ,ひ,び,ぴ,ふ,ぶ,ぷ,へ,べ,ぺ,ほ,ぼ,ぽ,ま,み,む,め,も,ゃ,や,ゅ,ゆ,ょ,よ,ら,り,る,れ,ろ,ゎ,わ,ゐ,ゑ,を,ん,ァ,ア,ィ,イ,ゥ,ウ,ェ,エ,ォ,オ,カ,ガ,キ,ギ,ク,グ,ケ,ゲ,コ,ゴ,サ,ザ,シ,ジ,ス,ズ,セ,ゼ,ソ,ゾ,タ,ダ,チ,ヂ,ッ,ツ,ヅ,テ,デ,ト,ド,ナ,ニ,ヌ,ネ,ノ,ハ,バ,パ,ヒ,ビ,ピ,フ,ブ,プ,ヘ,ベ,ペ,ホ,ボ,ポ,マ,ミ,ム,メ,モ,ャ,ヤ,ュ,ユ,ョ,ヨ,ラ,リ,ル,レ,ロ,ヮ,ワ,ヰ,ヱ,ヲ,ン,ヴ,ヵ,ヶ")},
+    { name:"xlzm", title:lang.xlzm, content:toArray("Α,Β,Γ,Δ,Ε,Ζ,Η,Θ,Ι,Κ,Λ,Μ,Ν,Ξ,Ο,Π,Ρ,Σ,Τ,Υ,Φ,Χ,Ψ,Ω,α,β,γ,δ,ε,ζ,η,θ,ι,κ,λ,μ,ν,ξ,ο,π,ρ,σ,τ,υ,φ,χ,ψ,ω")},
+    { name:"ewzm", title:lang.ewzm, content:toArray("А,Б,В,Г,Д,Е,Ё,Ж,З,И,Й,К,Л,М,Н,О,П,Р,С,Т,У,Ф,Х,Ц,Ч,Ш,Щ,Ъ,Ы,Ь,Э,Ю,Я,а,б,в,г,д,е,ё,ж,з,и,й,к,л,м,н,о,п,р,с,т,у,ф,х,ц,ч,ш,щ,ъ,ы,ь,э,ю,я")},
+    { name:"pyzm", title:lang.pyzm, content:toArray("ā,á,ǎ,à,ē,é,ě,è,ī,í,ǐ,ì,ō,ó,ǒ,ò,ū,ú,ǔ,ù,ǖ,ǘ,ǚ,ǜ,ü")},
+    { name:"yyyb", title:lang.yyyb, content:toArray("i:,i,e,æ,ʌ,ə:,ə,u:,u,ɔ:,ɔ,a:,ei,ai,ɔi,əu,au,iə,εə,uə,p,t,k,b,d,g,f,s,ʃ,θ,h,v,z,ʒ,ð,tʃ,tr,ts,dʒ,dr,dz,m,n,ŋ,l,r,w,j,")},
+    { name:"zyzf", title:lang.zyzf, content:toArray("ㄅ,ㄆ,ㄇ,ㄈ,ㄉ,ㄊ,ㄋ,ㄌ,ㄍ,ㄎ,ㄏ,ㄐ,ㄑ,ㄒ,ㄓ,ㄔ,ㄕ,ㄖ,ㄗ,ㄘ,ㄙ,ㄚ,ㄛ,ㄜ,ㄝ,ㄞ,ㄟ,ㄠ,ㄡ,ㄢ,ㄣ,ㄤ,ㄥ,ㄦ,ㄧ,ㄨ")}
+];
+(function createTab(content) {
+    for (var i = 0, ci; ci = content[i++];) {
+        var span = document.createElement("span");
+        span.setAttribute("tabSrc", ci.name);
+        span.innerHTML = ci.title;
+        if (i == 1)span.className = "focus";
+        domUtils.on(span, "click", function () {
+            var tmps = $G("tabHeads").children;
+            for (var k = 0, sk; sk = tmps[k++];) {
+                sk.className = "";
+            }
+            tmps = $G("tabBodys").children;
+            for (var k = 0, sk; sk = tmps[k++];) {
+                sk.style.display = "none";
+            }
+            this.className = "focus";
+            $G(this.getAttribute("tabSrc")).style.display = "";
+        });
+        $G("tabHeads").appendChild(span);
+        domUtils.insertAfter(span, document.createTextNode("\n"));
+        var div = document.createElement("div");
+        div.id = ci.name;
+        div.style.display = (i == 1) ? "" : "none";
+        var cons = ci.content;
+        for (var j = 0, con; con = cons[j++];) {
+            var charSpan = document.createElement("span");
+            charSpan.innerHTML = con;
+            domUtils.on(charSpan, "click", function () {
+                editor.execCommand("insertHTML", this.innerHTML);
+                dialog.close();
+            });
+            div.appendChild(charSpan);
+        }
+        $G("tabBodys").appendChild(div);
+    }
+})(charsContent);
+function toArray(str) {
+    return str.split(",");
+}
diff --git a/public/js/ueditor/dialogs/table/dragicon.png b/public/js/ueditor/dialogs/table/dragicon.png
new file mode 100644
index 0000000..f26203b
Binary files /dev/null and b/public/js/ueditor/dialogs/table/dragicon.png differ
diff --git a/public/js/ueditor/dialogs/table/edittable.css b/public/js/ueditor/dialogs/table/edittable.css
new file mode 100644
index 0000000..c6f9396
--- /dev/null
+++ b/public/js/ueditor/dialogs/table/edittable.css
@@ -0,0 +1,84 @@
+body{
+    overflow: hidden;
+    width: 540px;
+}
+.wrapper {
+    margin: 10px auto 0;
+    font-size: 12px;
+    overflow: hidden;
+    width: 520px;
+    height: 315px;
+}
+
+.clear {
+    clear: both;
+}
+
+.wrapper .left {
+    float: left;
+    margin-left: 10px;;
+}
+
+.wrapper .right {
+    float: right;
+    border-left: 2px dotted #EDEDED;
+    padding-left: 15px;
+}
+
+.section {
+    margin-bottom: 15px;
+    width: 240px;
+    overflow: hidden;
+}
+
+.section h3 {
+    font-weight: bold;
+    padding: 5px 0;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #EDEDED;
+    font-size: 12px;
+}
+
+.section ul {
+    list-style: none;
+    overflow: hidden;
+    clear: both;
+
+}
+
+.section li {
+    float: left;
+    width: 120px;;
+}
+
+.section .tone {
+    width: 80px;;
+}
+
+.section .preview {
+    width: 220px;
+}
+
+.section .preview table {
+    text-align: center;
+    vertical-align: middle;
+    color: #666;
+}
+
+.section .preview caption {
+    font-weight: bold;
+}
+
+.section .preview td {
+    border-width: 1px;
+    border-style: solid;
+    height: 22px;
+}
+
+.section .preview th {
+    border-style: solid;
+    border-color: #DDD;
+    border-width: 2px 1px 1px 1px;
+    height: 22px;
+    background-color: #F7F7F7;
+}
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/table/edittable.html b/public/js/ueditor/dialogs/table/edittable.html
new file mode 100644
index 0000000..6e596ce
--- /dev/null
+++ b/public/js/ueditor/dialogs/table/edittable.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <link rel="stylesheet" type="text/css" href="edittable.css?20220503">
+</head>
+<body>
+<div class="wrapper">
+    <div class="left">
+        <div class="section">
+            <h3><var id="lang_tableStyle"></var></h3>
+            <ul>
+                <li>
+                    <label onselectstart="return false"><input type="checkbox" id="J_title" name="style"/><var id="lang_insertTitle"></var></label>
+                </li>
+                <li>
+                    <label onselectstart="return false"><input type="checkbox" id="J_titleCol" name="style"/><var id="lang_insertTitleCol"></var></label>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <label onselectstart="return false"><input type="checkbox" id="J_caption" name="style"/><var id="lang_insertCaption"></var></label>
+                </li>
+                <li>
+                    <label onselectstart="return false"><input type="checkbox" id="J_sorttable" name="style"/><var id="lang_orderbycontent"></var></label>
+                </li>
+            </ul>
+            <div class="clear"></div>
+        </div>
+        <div class="section">
+            <h3><var id="lang_tableSize"></var></h3>
+            <ul>
+                <li>
+                    <label><input type="radio" id="J_autoSizeContent" name="size"/><var id="lang_autoSizeContent"></var></label>
+                </li>
+                <li>
+                    <label><input type="radio" id="J_autoSizePage" name="size"/><var id="lang_autoSizePage"></var></label>
+                </li>
+            </ul>
+            <div class="clear"></div>
+        </div>
+        <div class="section">
+            <h3><var id="lang_borderStyle"></var></h3>
+            <ul>
+                <li>
+                    <span><var id="lang_color"></var></span>
+                    <input type="text" class="tone" id="J_tone" readonly='readonly' />
+                </li>
+            </ul>
+            <div class="clear"></div>
+        </div>
+    </div>
+    <div class="right">
+        <div class="section">
+            <h3><var id="lang_example"></var></h3>
+            <div class="preview" id="J_preview">
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="edittable.js?20220503"></script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/table/edittable.js b/public/js/ueditor/dialogs/table/edittable.js
new file mode 100644
index 0000000..11dbee7
--- /dev/null
+++ b/public/js/ueditor/dialogs/table/edittable.js
@@ -0,0 +1,237 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-12-19
+ * Time: 下午4:55
+ * To change this template use File | Settings | File Templates.
+ */
+(function () {
+    var title = $G("J_title"),
+        titleCol = $G("J_titleCol"),
+        caption = $G("J_caption"),
+        sorttable = $G("J_sorttable"),
+        autoSizeContent = $G("J_autoSizeContent"),
+        autoSizePage = $G("J_autoSizePage"),
+        tone = $G("J_tone"),
+        me,
+        preview = $G("J_preview");
+
+    var editTable = function () {
+        me = this;
+        me.init();
+    };
+    editTable.prototype = {
+        init:function () {
+            var colorPiker = new UE.ui.ColorPicker({
+                    editor:editor
+                }),
+                colorPop = new UE.ui.Popup({
+                    editor:editor,
+                    content:colorPiker
+                });
+
+            title.checked = editor.queryCommandState("inserttitle") == -1;
+            titleCol.checked = editor.queryCommandState("inserttitlecol") == -1;
+            caption.checked = editor.queryCommandState("insertcaption") == -1;
+            sorttable.checked = editor.queryCommandState("enablesort") == 1;
+
+            var enablesortState = editor.queryCommandState("enablesort"),
+                disablesortState = editor.queryCommandState("disablesort");
+
+            sorttable.checked = !!(enablesortState < 0 && disablesortState >=0);
+            sorttable.disabled = !!(enablesortState < 0 && disablesortState < 0);
+            sorttable.title = enablesortState < 0 && disablesortState < 0 ? lang.errorMsg:'';
+
+            me.createTable(title.checked, titleCol.checked, caption.checked);
+            me.setAutoSize();
+            me.setColor(me.getColor());
+
+            domUtils.on(title, "click", me.titleHanler);
+            domUtils.on(titleCol, "click", me.titleColHanler);
+            domUtils.on(caption, "click", me.captionHanler);
+            domUtils.on(sorttable, "click", me.sorttableHanler);
+            domUtils.on(autoSizeContent, "click", me.autoSizeContentHanler);
+            domUtils.on(autoSizePage, "click", me.autoSizePageHanler);
+
+            domUtils.on(tone, "click", function () {
+                colorPop.showAnchor(tone);
+            });
+            domUtils.on(document, 'mousedown', function () {
+                colorPop.hide();
+            });
+            colorPiker.addListener("pickcolor", function () {
+                me.setColor(arguments[1]);
+                colorPop.hide();
+            });
+            colorPiker.addListener("picknocolor", function () {
+                me.setColor("");
+                colorPop.hide();
+            });
+        },
+
+        createTable:function (hasTitle, hasTitleCol, hasCaption) {
+            var arr = [],
+                sortSpan = '<span>^</span>';
+            arr.push("<table id='J_example'>");
+            if (hasCaption) {
+                arr.push("<caption>" + lang.captionName + "</caption>")
+            }
+            if (hasTitle) {
+                arr.push("<tr>");
+                if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>"); }
+                for (var j = 0; j < 5; j++) {
+                    arr.push("<th>" + lang.titleName + "</th>");
+                }
+                arr.push("</tr>");
+            }
+            for (var i = 0; i < 6; i++) {
+                arr.push("<tr>");
+                if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>") }
+                for (var k = 0; k < 5; k++) {
+                    arr.push("<td>" + lang.cellsName + "</td>")
+                }
+                arr.push("</tr>");
+            }
+            arr.push("</table>");
+            preview.innerHTML = arr.join("");
+            this.updateSortSpan();
+        },
+        titleHanler:function () {
+            var example = $G("J_example"),
+                frg=document.createDocumentFragment(),
+                color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
+                colCount = example.rows[0].children.length;
+
+            if (title.checked) {
+                example.insertRow(0);
+                for (var i = 0, node; i < colCount; i++) {
+                    node = document.createElement("th");
+                    node.innerHTML = lang.titleName;
+                    frg.appendChild(node);
+                }
+                example.rows[0].appendChild(frg);
+
+            } else {
+                domUtils.remove(example.rows[0]);
+            }
+            me.setColor(color);
+            me.updateSortSpan();
+        },
+        titleColHanler:function () {
+            var example = $G("J_example"),
+                color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
+                colArr = example.rows,
+                colCount = colArr.length;
+
+            if (titleCol.checked) {
+                for (var i = 0, node; i < colCount; i++) {
+                    node = document.createElement("th");
+                    node.innerHTML = lang.titleName;
+                    colArr[i].insertBefore(node, colArr[i].children[0]);
+                }
+            } else {
+                for (var i = 0; i < colCount; i++) {
+                    domUtils.remove(colArr[i].children[0]);
+                }
+            }
+            me.setColor(color);
+            me.updateSortSpan();
+        },
+        captionHanler:function () {
+            var example = $G("J_example");
+            if (caption.checked) {
+                var row = document.createElement('caption');
+                row.innerHTML = lang.captionName;
+                example.insertBefore(row, example.firstChild);
+            } else {
+                domUtils.remove(domUtils.getElementsByTagName(example, 'caption')[0]);
+            }
+        },
+        sorttableHanler:function(){
+            me.updateSortSpan();
+        },
+        autoSizeContentHanler:function () {
+            var example = $G("J_example");
+            example.removeAttribute("width");
+        },
+        autoSizePageHanler:function () {
+            var example = $G("J_example");
+            var tds = example.getElementsByTagName(example, "td");
+            utils.each(tds, function (td) {
+                td.removeAttribute("width");
+            });
+            example.setAttribute('width', '100%');
+        },
+        updateSortSpan: function(){
+            var example = $G("J_example"),
+                row = example.rows[0];
+
+            var spans = domUtils.getElementsByTagName(example,"span");
+            utils.each(spans,function(span){
+                span.parentNode.removeChild(span);
+            });
+            if (sorttable.checked) {
+                utils.each(row.cells, function(cell, i){
+                    var span = document.createElement("span");
+                    span.innerHTML = "^";
+                    cell.appendChild(span);
+                });
+            }
+        },
+        getColor:function () {
+            var start = editor.selection.getStart(), color,
+                cell = domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
+            color = cell && domUtils.getComputedStyle(cell, "border-color");
+            if (!color)  color = "#DDDDDD";
+            return color;
+        },
+        setColor:function (color) {
+            var example = $G("J_example"),
+                arr = domUtils.getElementsByTagName(example, "td").concat(
+                    domUtils.getElementsByTagName(example, "th"),
+                    domUtils.getElementsByTagName(example, "caption")
+                );
+
+            tone.value = color;
+            utils.each(arr, function (node) {
+                node.style.borderColor = color;
+            });
+
+        },
+        setAutoSize:function () {
+            var me = this;
+            autoSizePage.checked = true;
+            me.autoSizePageHanler();
+        }
+    };
+
+    new editTable;
+
+    dialog.onok = function () {
+        editor.__hasEnterExecCommand = true;
+
+        var checks = {
+            title:"inserttitle deletetitle",
+            titleCol:"inserttitlecol deletetitlecol",
+            caption:"insertcaption deletecaption",
+            sorttable:"enablesort disablesort"
+        };
+        editor.fireEvent('saveScene');
+        for(var i in checks){
+            var cmds = checks[i].split(" "),
+                input = $G("J_" + i);
+            if(input["checked"]){
+                editor.queryCommandState(cmds[0])!=-1 &&editor.execCommand(cmds[0]);
+            }else{
+                editor.queryCommandState(cmds[1])!=-1 &&editor.execCommand(cmds[1]);
+            }
+        }
+
+        editor.execCommand("edittable", tone.value);
+        autoSizeContent.checked ?editor.execCommand('adaptbytext') : "";
+        autoSizePage.checked ? editor.execCommand("adaptbywindow") : "";
+        editor.fireEvent('saveScene');
+
+        editor.__hasEnterExecCommand = false;
+    };
+})();
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/table/edittd.html b/public/js/ueditor/dialogs/table/edittd.html
new file mode 100644
index 0000000..70a3807
--- /dev/null
+++ b/public/js/ueditor/dialogs/table/edittd.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <style type="text/css">
+        .section {
+            text-align: center;
+            margin-top: 10px;
+        }
+        .section input {
+            margin-left: 5px;
+            width: 70px;
+        }
+    </style>
+</head>
+<body>
+<div class="section">
+    <span><var id="lang_tdBkColor"></var></span>
+    <input type="text" id="J_tone"/>
+</div>
+<script type="text/javascript">
+    var tone = $G("J_tone"),
+            colorPiker = new UE.ui.ColorPicker({
+                editor:editor
+            }),
+            colorPop = new UE.ui.Popup({
+                editor:editor,
+                content:colorPiker
+            });
+    domUtils.on(tone, "click", function () {
+        colorPop.showAnchor(tone);
+    });
+    domUtils.on(document, 'mousedown', function () {
+        colorPop.hide();
+    });
+    colorPiker.addListener("pickcolor", function () {
+        tone.value = arguments[1];
+        colorPop.hide();
+    });
+    colorPiker.addListener("picknocolor", function () {
+        tone.value="";
+        colorPop.hide();
+    });
+    dialog.onok=function(){
+        editor.execCommand("edittd",tone.value);
+    };
+
+    var start = editor.selection.getStart(),
+        cell = start && domUtils.findParentByTagName(start, ["td", "th"], true);
+    if(cell){
+        var color = domUtils.getComputedStyle(cell,'background-color');
+        if(/^#/.test(color)){
+            tone.value = color
+        }
+
+    }
+
+</script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/table/edittip.html b/public/js/ueditor/dialogs/table/edittip.html
new file mode 100644
index 0000000..f9080bd
--- /dev/null
+++ b/public/js/ueditor/dialogs/table/edittip.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>表格删除提示</title>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <style type="text/css">
+        .section {
+            width: 200px;
+            margin: 10px auto 0;
+            font-size: 14px;
+        }
+
+        .item {
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+<div class="section">
+    <div class="item">
+        <label><input type="radio" id="J_delRow" name="cmd" checked/><var id="lang_delRow"></var></label>
+    </div>
+    <div class="item">
+        <label><input type="radio" id="J_delCol" name="cmd"/><var id="lang_delCol"></var></label>
+    </div>
+</div>
+<script type="text/javascript">
+    dialog.onok = function () {
+        $G("J_delRow").checked ? editor.execCommand("deleterow") : editor.execCommand("deletecol");
+    };
+</script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/template/config.js b/public/js/ueditor/dialogs/template/config.js
new file mode 100644
index 0000000..417b8f7
--- /dev/null
+++ b/public/js/ueditor/dialogs/template/config.js
@@ -0,0 +1,42 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-8-8
+ * Time: 下午2:00
+ * To change this template use File | Settings | File Templates.
+ */
+var templates = [
+    {
+        "pre":"pre0.png",
+        'title':lang.blank,
+        'preHtml':'<p class="ue_t">&nbsp;欢迎使用UEditor！</p>',
+        "html":'<p class="ue_t">欢迎使用UEditor！</p>'
+
+    },
+    {
+        "pre":"pre1.png",
+        'title':lang.blog,
+        'preHtml':'<h1 label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;"><span style="color:#c0504d;">深入理解Range</span></h1><p style="text-align:center;"><strong class=" ">UEditor二次开发</strong></p><h3><span class=" " style="font-family:幼圆">什么是Range</span></h3><p style="text-indent:2em;">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 </p><br /><h3><span class=" " style="font-family:幼圆">Range能干什么</span></h3><p style="text-indent:2em;">在“开始”选项卡上，通过从快速样式库中为所选文本选择一种外观，您可以方便地更改文档中所选文本的格式。</p>',
+        "html":'<h1 class="ue_t" label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;"><span style="color:#c0504d;">[键入文档标题]</span></h1><p style="text-align:center;"><strong class="ue_t">[键入文档副标题]</strong></p><h3><span class="ue_t" style="font-family:幼圆">[标题 1]</span></h3><p class="ue_t"  style="text-indent:2em;">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><h3><span class="ue_t" style="font-family:幼圆">[标题 2]</span></h3><p class="ue_t"  style="text-indent:2em;">在“开始”选项卡上，通过从快速样式库中为所选文本选择一种外观，您可以方便地更改文档中所选文本的格式。 您还可以使用“开始”选项卡上的其他控件来直接设置文本格式。大多数控件都允许您选择是使用当前主题外观，还是使用某种直接指定的格式。 </p><h3><span class="ue_t" style="font-family:幼圆">[标题 3]</span></h3><p class="ue_t">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><p class="ue_t"><br /></p>'
+
+    },
+    {
+        "pre":"pre2.png",
+        'title':lang.resume,
+        'preHtml':'<h1 label="Title left" name="tl" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;"><span style="color:#e36c09;" class=" ">WEB前端开发简历</span></h1><table width="100%" border="1" bordercolor="#95B3D7" style="border-collapse:collapse;"><tbody><tr><td width="100" style="text-align:center;"><p><span style="background-color:transparent;">插</span><br /></p><p>入</p><p>照</p><p>片</p></td><td><p><span style="background-color:transparent;"> 联系电话：</span><span class="ue_t" style="background-color:transparent;">[键入您的电话]</span><br /></p><p><span style="background-color:transparent;"> 电子邮件：</span><span class="ue_t" style="background-color:transparent;">[键入您的电子邮件地址]</span><br /></p><p><span style="background-color:transparent;"> 家庭住址：</span><span class="ue_t" style="background-color:transparent;">[键入您的地址]</span><br /></p></td></tr></tbody></table><h3><span style="color:#E36C09;font-size:20px;">目标职位</span></h3><p style="text-indent:2em;" class=" ">WEB前端研发工程师</p><h3><span style="color:#e36c09;font-size:20px;">学历</span></h3><p><span style="display:none;line-height:0px;" id="_baidu_bookmark_start_26"></span></p><ol style="list-style-type:decimal;"><li><p><span class="ue_t">[起止时间]</span> <span class="ue_t">[学校名称] </span> <span class="ue_t">[所学专业]</span> <span class="ue_t">[所获学位]</span></p></li></ol><h3><span style="color:#e36c09;font-size:20px;" class="ue_t">工作经验</span></h3><p><br /></p>',
+        "html":'<h1 label="Title left" name="tl" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;"><span style="color:#e36c09;" class="ue_t">[此处键入简历标题]</span></h1><p><span style="color:#e36c09;"><br /></span></p><table width="100%" border="1" bordercolor="#95B3D7" style="border-collapse:collapse;"><tbody><tr><td width="200" style="text-align:center;" class="ue_t">【此处插入照片】</td><td><p><br /></p><p> 联系电话：<span class="ue_t">[键入您的电话]</span></p><p><br /></p><p> 电子邮件：<span class="ue_t">[键入您的电子邮件地址]</span></p><p><br /></p><p> 家庭住址：<span class="ue_t">[键入您的地址]</span></p><p><br /></p></td></tr></tbody></table><h3><span style="color:#e36c09;font-size:20px;">目标职位</span></h3><p style="text-indent:2em;" class="ue_t">[此处键入您的期望职位]</p><h3><span style="color:#e36c09;font-size:20px;">学历</span></h3><p><span style="display:none;line-height:0px;" id="_baidu_bookmark_start_26"></span></p><ol style="list-style-type:decimal;"><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入学校名称] </span> <span class="ue_t">[键入所学专业]</span> <span class="ue_t">[键入所获学位]</span></p></li><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入学校名称]</span> <span class="ue_t">[键入所学专业]</span> <span class="ue_t">[键入所获学位]</span></p></li></ol><h3><span style="color:#e36c09;font-size:20px;" class="ue_t">工作经验</span></h3><ol style="list-style-type:decimal;"><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入公司名称]</span> <span class="ue_t">[键入职位名称]</span> </p></li><ol style="list-style-type:lower-alpha;"><li><p><span class="ue_t">[键入负责项目]</span> <span class="ue_t">[键入项目简介]</span></p></li><li><p><span class="ue_t">[键入负责项目]</span> <span class="ue_t">[键入项目简介]</span></p></li></ol><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入公司名称]</span> <span class="ue_t">[键入职位名称]</span> </p></li><ol style="list-style-type:lower-alpha;"><li><p><span class="ue_t">[键入负责项目]</span> <span class="ue_t">[键入项目简介]</span></p></li></ol></ol><p><span style="color:#e36c09;font-size:20px;">掌握技能</span></p><p style="text-indent:2em;"> &nbsp;<span class="ue_t">[这里可以键入您所掌握的技能]</span><br /></p>'
+
+    },
+    {
+        "pre":"pre3.png",
+        'title':lang.richText,
+        'preHtml':'<h1 label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;" class="ue_t">[此处键入文章标题]</h1><p><img src="http://img.baidu.com/hi/youa/y_0034.gif" width="150" height="100" border="0" hspace="0" vspace="0" style="width:150px;height:100px;float:left;" />图文混排方法</p><p>图片居左，文字围绕图片排版</p><p>方法：在文字前面插入图片，设置居左对齐，然后即可在右边输入多行文</p><p><br /></p><p><img src="http://img.baidu.com/hi/youa/y_0040.gif" width="100" height="100" border="0" hspace="0" vspace="0" style="width:100px;height:100px;float:right;" /></p><p>还有没有什么其他的环绕方式呢？这里是居右环绕</p><p><br /></p><p>欢迎大家多多尝试，为UEditor提供更多高质量模板！</p>',
+        "html":'<p><br /></p><h1 label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;" class="ue_t">[此处键入文章标题]</h1><p><img src="http://img.baidu.com/hi/youa/y_0034.gif" width="300" height="200" border="0" hspace="0" vspace="0" style="width:300px;height:200px;float:left;" />图文混排方法</p><p>1. 图片居左，文字围绕图片排版</p><p>方法：在文字前面插入图片，设置居左对齐，然后即可在右边输入多行文本</p><p><br /></p><p>2. 图片居右，文字围绕图片排版</p><p>方法：在文字前面插入图片，设置居右对齐，然后即可在左边输入多行文本</p><p><br /></p><p>3. 图片居中环绕排版</p><p>方法：亲，这个真心没有办法。。。</p><p><br /></p><p><br /></p><p><img src="http://img.baidu.com/hi/youa/y_0040.gif" width="300" height="300" border="0" hspace="0" vspace="0" style="width:300px;height:300px;float:right;" /></p><p>还有没有什么其他的环绕方式呢？这里是居右环绕</p><p><br /></p><p>欢迎大家多多尝试，为UEditor提供更多高质量模板！</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p><br /></p>'
+    },
+    {
+        "pre":"pre4.png",
+        'title':lang.sciPapers,
+        'preHtml':'<h2 style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;text-align:center;" class="ue_t">[键入文章标题]</h2><p><strong><span style="font-size:12px;">摘要</span></strong><span style="font-size:12px;" class="ue_t">：这里可以输入很长很长很长很长很长很长很长很长很差的摘要</span></p><p style="line-height:1.5em;"><strong>标题 1</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">这里可以输入很多内容，可以图文混排，可以有列表等。</span></p><p style="line-height:1.5em;"><strong>标题 2</strong></p><ol style="list-style-type:lower-alpha;"><li><p class="ue_t">列表 1</p></li><li><p class="ue_t">列表 2</p></li><ol style="list-style-type:lower-roman;"><li><p class="ue_t">多级列表 1</p></li><li><p class="ue_t">多级列表 2</p></li></ol><li><p class="ue_t">列表 3<br /></p></li></ol><p style="line-height:1.5em;"><strong>标题 3</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">来个文字图文混排的</span></p><p style="text-indent:2em;"><br /></p>',
+        'html':'<h2 style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;text-align:center;" class="ue_t">[键入文章标题]</h2><p><strong><span style="font-size:12px;">摘要</span></strong><span style="font-size:12px;" class="ue_t">：这里可以输入很长很长很长很长很长很长很长很长很差的摘要</span></p><p style="line-height:1.5em;"><strong>标题 1</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">这里可以输入很多内容，可以图文混排，可以有列表等。</span></p><p style="line-height:1.5em;"><strong>标题 2</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">来个列表瞅瞅：</span></p><ol style="list-style-type:lower-alpha;"><li><p class="ue_t">列表 1</p></li><li><p class="ue_t">列表 2</p></li><ol style="list-style-type:lower-roman;"><li><p class="ue_t">多级列表 1</p></li><li><p class="ue_t">多级列表 2</p></li></ol><li><p class="ue_t">列表 3<br /></p></li></ol><p style="line-height:1.5em;"><strong>标题 3</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">来个文字图文混排的</span></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">这里可以多行</span></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">右边是图片</span></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">绝对没有问题的，不信你也可以试试看</span></p><p><br /></p>'
+    }
+];
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/template/images/bg.gif b/public/js/ueditor/dialogs/template/images/bg.gif
new file mode 100644
index 0000000..8c1d10a
Binary files /dev/null and b/public/js/ueditor/dialogs/template/images/bg.gif differ
diff --git a/public/js/ueditor/dialogs/template/images/pre0.png b/public/js/ueditor/dialogs/template/images/pre0.png
new file mode 100644
index 0000000..8f3c16a
Binary files /dev/null and b/public/js/ueditor/dialogs/template/images/pre0.png differ
diff --git a/public/js/ueditor/dialogs/template/images/pre1.png b/public/js/ueditor/dialogs/template/images/pre1.png
new file mode 100644
index 0000000..5a03f96
Binary files /dev/null and b/public/js/ueditor/dialogs/template/images/pre1.png differ
diff --git a/public/js/ueditor/dialogs/template/images/pre2.png b/public/js/ueditor/dialogs/template/images/pre2.png
new file mode 100644
index 0000000..5a55672
Binary files /dev/null and b/public/js/ueditor/dialogs/template/images/pre2.png differ
diff --git a/public/js/ueditor/dialogs/template/images/pre3.png b/public/js/ueditor/dialogs/template/images/pre3.png
new file mode 100644
index 0000000..d852d29
Binary files /dev/null and b/public/js/ueditor/dialogs/template/images/pre3.png differ
diff --git a/public/js/ueditor/dialogs/template/images/pre4.png b/public/js/ueditor/dialogs/template/images/pre4.png
new file mode 100644
index 0000000..0d7bc72
Binary files /dev/null and b/public/js/ueditor/dialogs/template/images/pre4.png differ
diff --git a/public/js/ueditor/dialogs/template/template.css b/public/js/ueditor/dialogs/template/template.css
new file mode 100644
index 0000000..6c1608d
--- /dev/null
+++ b/public/js/ueditor/dialogs/template/template.css
@@ -0,0 +1,18 @@
+.wrap{ padding: 5px;font-size: 14px;}
+.left{width:425px;float: left;}
+.right{width:160px;border: 1px solid #ccc;float: right;padding: 5px;margin-right: 5px;}
+.right .pre{height: 332px;overflow-y: auto;}
+.right .preitem{border: white 1px solid;margin: 5px 0;padding: 2px 0;}
+.right .preitem:hover{background-color: lemonChiffon;cursor: pointer;border: #ccc 1px solid;}
+.right .preitem img{display: block;margin: 0 auto;width:100px;}
+.clear{clear: both;}
+.top{height:26px;line-height: 26px;padding: 5px;}
+.bottom{height:320px;width:100%;margin: 0 auto;}
+.transparent{ background: url("images/bg.gif") repeat;}
+.bottom table tr td{border:1px dashed #ccc;}
+#colorPicker{width: 17px;height: 17px;border: 1px solid #CCC;display: inline-block;border-radius: 3px;box-shadow: 2px 2px 5px #D3D6DA;}
+.border_style1{padding:2px;border: 1px solid #ccc;border-radius: 5px;box-shadow:2px 2px 5px #d3d6da;}
+p{margin: 5px 0}
+table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}
+li{clear:both}
+ol{padding-left:40px; }
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/template/template.html b/public/js/ueditor/dialogs/template/template.html
new file mode 100644
index 0000000..9684419
--- /dev/null
+++ b/public/js/ueditor/dialogs/template/template.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <link rel="stylesheet" type="text/css" href="template.css?20220503">
+</head>
+<body>
+    <div class="wrap">
+        <div class="left">
+            <div class="top">
+                <label><var id="lang_template_clear"></var>：<input id="issave" type="checkbox"></label>
+            </div>
+            <div class="bottom border_style1" id="preview"></div>
+        </div>
+        <fieldset  class="right border_style1">
+            <legend><var id="lang_template_select"></var></legend>
+            <div class="pre" id="preitem"></div>
+        </fieldset>
+        <div class="clear"></div>
+    </div>
+    <script type="text/javascript" src="config.js?20220503"></script>
+    <script type="text/javascript" src="template.js?20220503"></script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/template/template.js b/public/js/ueditor/dialogs/template/template.js
new file mode 100644
index 0000000..80a334b
--- /dev/null
+++ b/public/js/ueditor/dialogs/template/template.js
@@ -0,0 +1,53 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-8-8
+ * Time: 下午2:09
+ * To change this template use File | Settings | File Templates.
+ */
+(function () {
+    var me = editor,
+            preview = $G( "preview" ),
+            preitem = $G( "preitem" ),
+            tmps = templates,
+            currentTmp;
+    var initPre = function () {
+        var str = "";
+        for ( var i = 0, tmp; tmp = tmps[i++]; ) {
+            str += '<div class="preitem" onclick="pre(' + i + ')"><img src="' + "images/" + tmp.pre + '" ' + (tmp.title ? "alt=" + tmp.title + " title=" + tmp.title + "" : "") + '></div>';
+        }
+        preitem.innerHTML = str;
+    };
+    var pre = function ( n ) {
+        var tmp = tmps[n - 1];
+        currentTmp = tmp;
+        clearItem();
+        domUtils.setStyles( preitem.childNodes[n - 1], {
+            "background-color":"lemonChiffon",
+            "border":"#ccc 1px solid"
+        } );
+        preview.innerHTML = tmp.preHtml ? tmp.preHtml : "";
+    };
+    var clearItem = function () {
+        var items = preitem.children;
+        for ( var i = 0, item; item = items[i++]; ) {
+            domUtils.setStyles( item, {
+                "background-color":"",
+                "border":"white 1px solid"
+            } );
+        }
+    };
+    dialog.onok = function () {
+        if ( !$G( "issave" ).checked ){
+            me.execCommand( "cleardoc" );
+        }
+        var obj = {
+            html:currentTmp && currentTmp.html
+        };
+        me.execCommand( "template", obj );
+    };
+    initPre();
+    window.pre = pre;
+    pre(2)
+
+})();
\ No newline at end of file
diff --git a/public/js/ueditor/dialogs/video/images/bg.png b/public/js/ueditor/dialogs/video/images/bg.png
new file mode 100644
index 0000000..580be0a
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/bg.png differ
diff --git a/public/js/ueditor/dialogs/video/images/center_focus.jpg b/public/js/ueditor/dialogs/video/images/center_focus.jpg
new file mode 100644
index 0000000..262b029
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/center_focus.jpg differ
diff --git a/public/js/ueditor/dialogs/video/images/file-icons.gif b/public/js/ueditor/dialogs/video/images/file-icons.gif
new file mode 100644
index 0000000..d8c02c2
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/file-icons.gif differ
diff --git a/public/js/ueditor/dialogs/video/images/file-icons.png b/public/js/ueditor/dialogs/video/images/file-icons.png
new file mode 100644
index 0000000..3ff82c8
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/file-icons.png differ
diff --git a/public/js/ueditor/dialogs/video/images/icons.gif b/public/js/ueditor/dialogs/video/images/icons.gif
new file mode 100644
index 0000000..78459de
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/icons.gif differ
diff --git a/public/js/ueditor/dialogs/video/images/icons.png b/public/js/ueditor/dialogs/video/images/icons.png
new file mode 100644
index 0000000..12e4700
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/icons.png differ
diff --git a/public/js/ueditor/dialogs/video/images/image.png b/public/js/ueditor/dialogs/video/images/image.png
new file mode 100644
index 0000000..19699f6
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/image.png differ
diff --git a/public/js/ueditor/dialogs/video/images/left_focus.jpg b/public/js/ueditor/dialogs/video/images/left_focus.jpg
new file mode 100644
index 0000000..7886d27
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/left_focus.jpg differ
diff --git a/public/js/ueditor/dialogs/video/images/none_focus.jpg b/public/js/ueditor/dialogs/video/images/none_focus.jpg
new file mode 100644
index 0000000..7c768dc
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/none_focus.jpg differ
diff --git a/public/js/ueditor/dialogs/video/images/progress.png b/public/js/ueditor/dialogs/video/images/progress.png
new file mode 100644
index 0000000..717c486
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/progress.png differ
diff --git a/public/js/ueditor/dialogs/video/images/right_focus.jpg b/public/js/ueditor/dialogs/video/images/right_focus.jpg
new file mode 100644
index 0000000..173e10d
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/right_focus.jpg differ
diff --git a/public/js/ueditor/dialogs/video/images/success.gif b/public/js/ueditor/dialogs/video/images/success.gif
new file mode 100644
index 0000000..8d4f311
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/success.gif differ
diff --git a/public/js/ueditor/dialogs/video/images/success.png b/public/js/ueditor/dialogs/video/images/success.png
new file mode 100644
index 0000000..94f968d
Binary files /dev/null and b/public/js/ueditor/dialogs/video/images/success.png differ
diff --git a/public/js/ueditor/dialogs/video/video.css b/public/js/ueditor/dialogs/video/video.css
new file mode 100644
index 0000000..e61ee80
--- /dev/null
+++ b/public/js/ueditor/dialogs/video/video.css
@@ -0,0 +1,650 @@
+@charset "utf-8";
+.wrapper{ width: 570px;_width:575px;margin: 10px auto; zoom:1;position: relative}
+.tabbody{height: 355px;}
+.tabbody .panel {
+    position: absolute;
+    width: 0;
+    height: 0;
+    background: #fff;
+    overflow: hidden;
+    display: none;
+}
+.tabbody .panel.focus {
+    width: 100%;
+    height: 355px;
+    display: block;
+}
+
+.tabbody .panel table td{vertical-align: middle;}
+#videoUrl {
+    width: 380px;
+    height: 26px;
+    line-height: 26px;
+    margin: 8px 5px;
+    background: #FFF;
+    border: 1px solid #d7d7d7;
+    outline: none;
+    border-radius:3px;
+    padding:0 5px;
+}
+#videoSelect{
+  width: 100px;
+  display: inline-block;
+  background: #FFF;
+  border: 1px solid #EEE;
+  line-height: 26px;
+  text-align: center;
+  color: #333;
+  text-decoration: none;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+#videoSearchTxt{margin-left:15px;background: #FFF;width:200px;height:21px;line-height:21px;border: 1px solid #d7d7d7;}
+#searchList{width: 570px;overflow: auto;zoom:1;height: 270px;}
+#searchList div{float: left;width: 120px;height: 135px;margin: 5px 15px;}
+#searchList img{margin: 2px 8px;cursor: pointer;border: 2px solid #fff} /*不用缩略图*/
+#searchList p{margin-left: 10px;}
+#videoType{
+    width: 65px;
+    height: 23px;
+    line-height: 22px;
+    border: 1px solid #d7d7d7;
+}
+#videoSearchBtn,#videoSearchReset{
+    /*width: 80px;*/
+    height: 25px;
+    line-height: 25px;
+    background: #eee;
+    border: 1px solid #d7d7d7;
+    cursor: pointer;
+    padding: 0 5px;
+}
+
+
+
+#preview{position: relative;width: 420px;padding:0;overflow: hidden; margin-left: 10px; _margin-left:5px; height: 280px;background-color: #ddd;float: left}
+#preview .previewMsg {position:absolute;top:0;margin:0;padding:0;height:280px;width:100%;background-color: #666;}
+#preview .previewMsg span{display:block;margin: 125px auto 0 auto;text-align:center;font-size:18px;color:#fff;}
+#preview .previewVideo {position:absolute;top:0;margin:0;padding:0;height:280px;width:100%;}
+.edui-video-wrapper fieldset{
+    border: 1px solid #ddd;
+    padding-left: 5px;
+    margin-bottom: 20px;
+    padding-bottom: 5px;
+    width: 115px;
+}
+
+#videoInfo {width: 120px;float: left;margin-left: 10px;_margin-left:7px;}
+fieldset{
+    border: 1px solid #ddd;
+    padding-left: 5px;
+    margin-bottom: 20px;
+    padding-bottom: 5px;
+    width: 115px;
+}
+fieldset legend{font-weight: bold;}
+fieldset p{line-height: 30px;}
+fieldset input.txt{
+    width: 65px;
+    height: 21px;
+    line-height: 21px;
+    margin: 8px 5px;
+    background: #FFF;
+    border: 1px solid #d7d7d7;
+}
+label.url{font-weight: bold;margin-left: 5px;}
+#videoFloat div{cursor:pointer;opacity: 0.5;filter: alpha(opacity = 50);margin:9px;_margin:5px;width:38px;height:36px;float:left;}
+#videoFloat .focus{opacity: 1;filter: alpha(opacity = 100)}
+span.view{display: inline-block;width: 30px;float: right;cursor: pointer;color: blue}
+
+
+
+
+/* upload video */
+.tabbody #upload.panel {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+    background: #fff;
+    display: block;
+}
+.tabbody #upload.panel.focus {
+    width: 100%;
+    height: 335px;
+    display: block;
+    clip: auto;
+}
+#upload_alignment div{cursor:pointer;opacity: 0.5;filter: alpha(opacity = 50);margin:9px;_margin:5px;width:38px;height:36px;float:left;}
+#upload_alignment .focus{opacity: 1;filter: alpha(opacity = 100)}
+#upload_left { width:427px; float:left; }
+#upload_left .controller { height: 30px; clear: both; }
+#uploadVideoInfo{margin-top:10px;float:right;padding-right:8px;}
+
+#upload .queueList {
+    margin: 0;
+}
+
+#upload p {
+    margin: 0;
+}
+
+.element-invisible {
+    width: 0 !important;
+    height: 0 !important;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+}
+
+#upload .placeholder {
+    margin: 10px;
+    margin-right:0;
+    border: 2px dashed #e6e6e6;
+    *border: 0px dashed #e6e6e6;
+    height: 161px;
+    padding-top: 150px;
+    text-align: center;
+    width: 97%;
+    float: left;
+    background: url(./images/image.png) center 70px no-repeat;
+    color: #cccccc;
+    font-size: 18px;
+    position: relative;
+    top:0;
+    *margin-left: 0;
+    *left: 10px;
+}
+
+#upload .placeholder .webuploader-pick {
+    font-size: 18px;
+    background: #00b7ee;
+    border-radius: 3px;
+    line-height: 44px;
+    padding: 0 30px;
+    *width: 120px;
+    color: #fff;
+    display: inline-block;
+    margin: 0 auto 20px auto;
+    cursor: pointer;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+#upload .placeholder .webuploader-pick-hover {
+    background: #00a2d4;
+}
+
+
+#filePickerContainer {
+    text-align: center;
+}
+
+#upload .placeholder .flashTip {
+    color: #666666;
+    font-size: 12px;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    bottom: 20px;
+}
+
+#upload .placeholder .flashTip a {
+    color: #0785d1;
+    text-decoration: none;
+}
+
+#upload .placeholder .flashTip a:hover {
+    text-decoration: underline;
+}
+
+#upload .placeholder.webuploader-dnd-over {
+    border-color: #999999;
+}
+
+#upload .filelist {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative;
+    height: 285px;
+}
+
+#upload .filelist:after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    clear: both;
+}
+
+#upload .filelist li {
+    width: 113px;
+    height: 113px;
+    background: url(./images/bg.png);
+    text-align: center;
+    margin: 15px 0 0 20px;
+    *margin: 15px 0 0 15px;
+    position: relative;
+    display: block;
+    float: left;
+    overflow: hidden;
+    font-size: 12px;
+}
+
+#upload .filelist li p.log {
+    position: relative;
+    top: -45px;
+}
+
+#upload .filelist li p.title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    top: 5px;
+    text-indent: 5px;
+    text-align: left;
+}
+
+#upload .filelist li p.progress {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    height: 8px;
+    overflow: hidden;
+    z-index: 50;
+    margin: 0;
+    border-radius: 0;
+    background: none;
+    -webkit-box-shadow: 0 0 0;
+}
+
+#upload .filelist li p.progress span {
+    display: none;
+    overflow: hidden;
+    width: 0;
+    height: 100%;
+    background: #1483d8 url(./images/progress.png) repeat-x;
+
+    -webit-transition: width 200ms linear;
+    -moz-transition: width 200ms linear;
+    -o-transition: width 200ms linear;
+    -ms-transition: width 200ms linear;
+    transition: width 200ms linear;
+
+    -webkit-animation: progressmove 2s linear infinite;
+    -moz-animation: progressmove 2s linear infinite;
+    -o-animation: progressmove 2s linear infinite;
+    -ms-animation: progressmove 2s linear infinite;
+    animation: progressmove 2s linear infinite;
+
+    -webkit-transform: translateZ(0);
+}
+
+@-webkit-keyframes progressmove {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 17px 0;
+    }
+}
+
+@-moz-keyframes progressmove {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 17px 0;
+    }
+}
+
+@keyframes progressmove {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 17px 0;
+    }
+}
+
+#upload .filelist li p.imgWrap {
+    position: relative;
+    z-index: 2;
+    line-height: 113px;
+    vertical-align: middle;
+    overflow: hidden;
+    width: 113px;
+    height: 113px;
+
+    -webkit-transform-origin: 50% 50%;
+    -moz-transform-origin: 50% 50%;
+    -o-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+
+    -webit-transition: 200ms ease-out;
+    -moz-transition: 200ms ease-out;
+    -o-transition: 200ms ease-out;
+    -ms-transition: 200ms ease-out;
+    transition: 200ms ease-out;
+}
+#upload .filelist li p.imgWrap.notimage {
+    margin-top: 0;
+    width: 111px;
+    height: 111px;
+    border: 1px #eeeeee solid;
+}
+#upload .filelist li p.imgWrap.notimage i.file-preview {
+    margin-top: 15px;
+}
+
+#upload .filelist li img {
+    width: 100%;
+}
+
+#upload .filelist li p.error {
+    background: #f43838;
+    color: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 28px;
+    line-height: 28px;
+    width: 100%;
+    z-index: 100;
+    display:none;
+}
+
+#upload .filelist li .success {
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 40px;
+    width: 100%;
+    z-index: 200;
+    background: url(./images/success.png) no-repeat right bottom;
+    background-image: url(./images/success.gif) \9;
+}
+
+#upload .filelist li.filePickerBlock {
+    width: 113px;
+    height: 113px;
+    background: url(./images/image.png) no-repeat center 12px;
+    border: 1px solid #eeeeee;
+    border-radius: 0;
+}
+#upload .filelist li.filePickerBlock div.webuploader-pick  {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    background: none;
+    font-size: 0;
+}
+
+#upload .filelist div.file-panel {
+    position: absolute;
+    height: 0;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000') \0;
+    background: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    z-index: 300;
+}
+
+#upload .filelist div.file-panel span {
+    width: 24px;
+    height: 24px;
+    display: inline;
+    float: right;
+    text-indent: -9999px;
+    overflow: hidden;
+    background: url(./images/icons.png) no-repeat;
+    background: url(./images/icons.gif) no-repeat \9;
+    margin: 5px 1px 1px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#upload .filelist div.file-panel span.rotateLeft {
+    display:none;
+    background-position: 0 -24px;
+}
+
+#upload .filelist div.file-panel span.rotateLeft:hover {
+    background-position: 0 0;
+}
+
+#upload .filelist div.file-panel span.rotateRight {
+    display:none;
+    background-position: -24px -24px;
+}
+
+#upload .filelist div.file-panel span.rotateRight:hover {
+    background-position: -24px 0;
+}
+
+#upload .filelist div.file-panel span.cancel {
+    background-position: -48px -24px;
+}
+
+#upload .filelist div.file-panel span.cancel:hover {
+    background-position: -48px 0;
+}
+
+#upload .statusBar {
+    height: 45px;
+    border-bottom: 1px solid #dadada;
+    margin: 0 10px;
+    padding: 0;
+    line-height: 45px;
+    vertical-align: middle;
+    position: relative;
+}
+
+#upload .statusBar .progress {
+    border: 1px solid #1483d8;
+    width: 198px;
+    background: #fff;
+    height: 18px;
+    position: absolute;
+    top: 12px;
+    display: none;
+    text-align: center;
+    line-height: 18px;
+    color: #6dbfff;
+    margin: 0 10px 0 0;
+}
+#upload .statusBar .progress span.percentage {
+    width: 0;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: #1483d8;
+    position: absolute;
+}
+#upload .statusBar .progress span.text {
+    position: relative;
+    z-index: 10;
+}
+
+#upload .statusBar .info {
+    display: inline-block;
+    font-size: 14px;
+    color: #666666;
+}
+
+#upload .statusBar .btns {
+    position: absolute;
+    top: 7px;
+    right: 0;
+    line-height: 30px;
+}
+
+#filePickerBtn {
+    display: inline-block;
+    float: left;
+}
+#upload .statusBar .btns .webuploader-pick,
+#upload .statusBar .btns .uploadBtn,
+#upload .statusBar .btns .uploadBtn.state-uploading,
+#upload .statusBar .btns .uploadBtn.state-paused {
+    background: #ffffff;
+    border: 1px solid #cfcfcf;
+    color: #565656;
+    padding: 0 18px;
+    display: inline-block;
+    border-radius: 3px;
+    margin-left: 10px;
+    cursor: pointer;
+    font-size: 14px;
+    float: left;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+#upload .statusBar .btns .webuploader-pick-hover,
+#upload .statusBar .btns .uploadBtn:hover,
+#upload .statusBar .btns .uploadBtn.state-uploading:hover,
+#upload .statusBar .btns .uploadBtn.state-paused:hover {
+    background: #f0f0f0;
+}
+
+#upload .statusBar .btns .uploadBtn,
+#upload .statusBar .btns .uploadBtn.state-paused{
+    background: #00b7ee;
+    color: #fff;
+    border-color: transparent;
+}
+#upload .statusBar .btns .uploadBtn:hover,
+#upload .statusBar .btns .uploadBtn.state-paused:hover{
+    background: #00a2d4;
+}
+
+#upload .statusBar .btns .uploadBtn.disabled {
+    pointer-events: none;
+    filter:alpha(opacity=60);
+    -moz-opacity:0.6;
+    -khtml-opacity: 0.6;
+    opacity: 0.6;
+}
+
+
+/* 在线文件的文件预览图标 */
+i.file-preview {
+    display: block;
+    margin: 10px auto;
+    width: 70px;
+    height: 70px;
+    background-image: url("./images/file-icons.png");
+    background-image: url("./images/file-icons.gif") \9;
+    background-position: -140px center;
+    background-repeat: no-repeat;
+}
+i.file-preview.file-type-dir{
+    background-position: 0 center;
+}
+i.file-preview.file-type-file{
+    background-position: -140px center;
+}
+i.file-preview.file-type-filelist{
+    background-position: -210px center;
+}
+i.file-preview.file-type-zip,
+i.file-preview.file-type-rar,
+i.file-preview.file-type-7z,
+i.file-preview.file-type-tar,
+i.file-preview.file-type-gz,
+i.file-preview.file-type-bz2{
+    background-position: -280px center;
+}
+i.file-preview.file-type-xls,
+i.file-preview.file-type-xlsx{
+    background-position: -350px center;
+}
+i.file-preview.file-type-doc,
+i.file-preview.file-type-docx{
+    background-position: -420px center;
+}
+i.file-preview.file-type-ppt,
+i.file-preview.file-type-pptx{
+    background-position: -490px center;
+}
+i.file-preview.file-type-vsd{
+    background-position: -560px center;
+}
+i.file-preview.file-type-pdf{
+    background-position: -630px center;
+}
+i.file-preview.file-type-txt,
+i.file-preview.file-type-md,
+i.file-preview.file-type-json,
+i.file-preview.file-type-htm,
+i.file-preview.file-type-xml,
+i.file-preview.file-type-html,
+i.file-preview.file-type-js,
+i.file-preview.file-type-css,
+i.file-preview.file-type-php,
+i.file-preview.file-type-jsp,
+i.file-preview.file-type-asp{
+    background-position: -700px center;
+}
+i.file-preview.file-type-apk{
+    background-position: -770px center;
+}
+i.file-preview.file-type-exe{
+    background-position: -840px center;
+}
+i.file-preview.file-type-ipa{
+    background-position: -910px center;
+}
+i.file-preview.file-type-mp4,
+i.file-preview.file-type-swf,
+i.file-preview.file-type-mkv,
+i.file-preview.file-type-avi,
+i.file-preview.file-type-flv,
+i.file-preview.file-type-mov,
+i.file-preview.file-type-mpg,
+i.file-preview.file-type-mpeg,
+i.file-preview.file-type-ogv,
+i.file-preview.file-type-webm,
+i.file-preview.file-type-rm,
+i.file-preview.file-type-rmvb{
+    background-position: -980px center;
+}
+i.file-preview.file-type-ogg,
+i.file-preview.file-type-wav,
+i.file-preview.file-type-wmv,
+i.file-preview.file-type-mid,
+i.file-preview.file-type-mp3{
+    background-position: -1050px center;
+}
+i.file-preview.file-type-jpg,
+i.file-preview.file-type-jpeg,
+i.file-preview.file-type-gif,
+i.file-preview.file-type-bmp,
+i.file-preview.file-type-png,
+i.file-preview.file-type-psd{
+    background-position: -140px center;
+}
diff --git a/public/js/ueditor/dialogs/video/video.html b/public/js/ueditor/dialogs/video/video.html
new file mode 100644
index 0000000..8c758fc
--- /dev/null
+++ b/public/js/ueditor/dialogs/video/video.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+        "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="../internal.js?20220503"></script>
+    <link rel="stylesheet" type="text/css" href="video.css?20220503" />
+</head>
+<body>
+<div class="wrapper">
+    <div id="videoTab">
+        <div id="tabHeads" class="tabhead">
+            <span tabSrc="video" class="focus" data-content-id="video"><var id="lang_tab_insertV"></var></span>
+            <span tabSrc="upload" style="display:none;" data-content-id="upload"><var id="lang_tab_uploadV"></var></span>
+        </div>
+        <div id="tabBodys" class="tabbody">
+            <div id="video" class="panel focus">
+               <table><tr><td><label for="videoUrl" class="url"><var id="lang_video_url"></var></label></td><td><input id="videoUrl" type="text"><a href="javascript:;" id="videoSelect" style="display:none;">选择视频</a> </td></tr></table>
+               <div style="padding:0 5px 5px 5px;color:#999;">
+                 外链视频支持：优酷、腾讯视频、哔哩哔哩
+               </div>
+               <div id="preview"></div>
+               <div id="videoInfo">
+                   <fieldset>
+                       <legend><var id="lang_video_size"></var></legend>
+                       <table>
+                           <tr><td><label for="videoWidth"><var id="lang_videoW"></var></label></td><td><input class="txt" id="videoWidth" type="text"/></td></tr>
+                           <tr><td><label for="videoHeight"><var id="lang_videoH"></var></label></td><td><input class="txt" id="videoHeight" type="text"/></td></tr>
+                       </table>
+                   </fieldset>
+                   <fieldset>
+                      <legend><var id="lang_alignment"></var></legend>
+                      <div id="videoFloat"></div>
+                  </fieldset>
+               </div>
+            </div>
+            <div id="upload" class="panel">
+                <div id="upload_left">
+                    <div id="queueList" class="queueList">
+                        <div class="statusBar element-invisible">
+                            <div class="progress">
+                                <span class="text">0%</span>
+                                <span class="percentage"></span>
+                            </div><div class="info"></div>
+                            <div class="btns">
+                                <div id="filePickerBtn"></div>
+                                <div class="uploadBtn"><var id="lang_start_upload"></var></div>
+                            </div>
+                        </div>
+                        <div id="dndArea" class="placeholder">
+                            <div class="filePickerContainer">
+                                <div id="filePickerReady"></div>
+                            </div>
+                        </div>
+                        <ul class="filelist element-invisible">
+                            <li id="filePickerBlock" class="filePickerBlock"></li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="uploadVideoInfo">
+                    <fieldset>
+                        <legend><var id="lang_upload_size"></var></legend>
+                        <table>
+                            <tr><td><label><var id="lang_upload_width"></var></label></td><td><input class="txt" id="upload_width" type="text"/></td></tr>
+                            <tr><td><label><var id="lang_upload_height"></var></label></td><td><input class="txt" id="upload_height" type="text"/></td></tr>
+                        </table>
+                    </fieldset>
+                    <fieldset>
+                        <legend><var id="lang_upload_alignment"></var></legend>
+                        <div id="upload_alignment"></div>
+                    </fieldset>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- jquery -->
+<script type="text/javascript" src="../../third-party/jquery-1.10.2.js?20220503"></script>
+
+<!-- webuploader -->
+<script type="text/javascript" src="../../third-party/webuploader/webuploader.js?20220503"></script>
+<link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css?20220503">
+
+<!-- video -->
+<script type="text/javascript" src="video.js?20220503"></script>
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/video/video.js b/public/js/ueditor/dialogs/video/video.js
new file mode 100644
index 0000000..de833a2
--- /dev/null
+++ b/public/js/ueditor/dialogs/video/video.js
@@ -0,0 +1,823 @@
+/**
+ * Created by JetBrains PhpStorm.
+ * User: taoqili
+ * Date: 12-2-20
+ * Time: 上午11:19
+ * To change this template use File | Settings | File Templates.
+ */
+
+(function(){
+
+    var video = {},
+        uploadVideoList = [],
+        isModifyUploadVideo = false,
+        uploadFile;
+    var editorOpt = {};
+
+    window.onload = function(){
+        editorOpt = editor.getOpt('videoConfig');
+        $focus($G("videoUrl"));
+        initTabs();
+        initVideo();
+        initUpload();
+    };
+
+    /* 初始化tab标签 */
+    function initTabs(){
+        var tabs = $G('tabHeads').children;
+        for (var i = 0; i < tabs.length; i++) {
+            domUtils.on(tabs[i], "click", function (e) {
+                var j, bodyId, target = e.target || e.srcElement;
+                for (j = 0; j < tabs.length; j++) {
+                    bodyId = tabs[j].getAttribute('data-content-id');
+                    if(tabs[j] == target){
+                        domUtils.addClass(tabs[j], 'focus');
+                        domUtils.addClass($G(bodyId), 'focus');
+                    }else {
+                        domUtils.removeClasses(tabs[j], 'focus');
+                        domUtils.removeClasses($G(bodyId), 'focus');
+                    }
+                }
+            });
+        }
+        if(!editorOpt.disableUpload){
+            $G('tabHeads').querySelector('[data-content-id="upload"]').style.display = 'inline-block';
+        }
+      if(!!editorOpt.selectCallback){
+        $G('videoSelect').style.display = 'inline-block';
+        domUtils.on($G('videoSelect'), "click", function (e) {
+          editorOpt.selectCallback(editor,function(info){
+            if(info){
+              $G('videoUrl').value = info.path;
+              createPreviewVideo(info.path);
+            }
+          });
+        });
+      }
+    }
+
+    function initVideo(){
+        createAlignButton( ["videoFloat", "upload_alignment"] );
+        addUrlChangeListener($G("videoUrl"));
+        addOkListener();
+
+        //编辑视频时初始化相关信息
+        (function(){
+            var img = editor.selection.getRange().getClosedNode(),url;
+            if(img && img.className){
+                var hasFakedClass = (img.className == "edui-faked-video"),
+                    hasUploadClass = img.className.indexOf("edui-upload-video")!=-1;
+                if(hasFakedClass || hasUploadClass) {
+                    $G("videoUrl").value = url = img.getAttribute("_url");
+                    $G("videoWidth").value = img.width;
+                    $G("videoHeight").value = img.height;
+                    var align = domUtils.getComputedStyle(img,"float"),
+                        parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align");
+                    updateAlignButton(parentAlign==="center"?"center":align);
+                }
+                if(hasUploadClass) {
+                    isModifyUploadVideo = true;
+                }
+            }
+            createPreviewVideo(url);
+        })();
+    }
+
+    /**
+     * 监听确认和取消两个按钮事件，用户执行插入或者清空正在播放的视频实例操作
+     */
+    function addOkListener(){
+        dialog.onok = function(){
+            $G("preview").innerHTML = "";
+            var currentTab =  findFocus("tabHeads","tabSrc");
+            switch(currentTab){
+                case "video":
+                    return insertSingle();
+                    break;
+                case "videoSearch":
+                    return insertSearch("searchList");
+                    break;
+                case "upload":
+                    return insertUpload();
+                    break;
+            }
+        };
+        dialog.oncancel = function(){
+            $G("preview").innerHTML = "";
+        };
+    }
+
+    /**
+     * 依据传入的align值更新按钮信息
+     * @param align
+     */
+    function updateAlignButton( align ) {
+        var aligns = $G( "videoFloat" ).children;
+        for ( var i = 0, ci; ci = aligns[i++]; ) {
+            if ( ci.getAttribute( "name" ) == align ) {
+                if ( ci.className !="focus" ) {
+                    ci.className = "focus";
+                }
+            } else {
+                if ( ci.className =="focus" ) {
+                    ci.className = "";
+                }
+            }
+        }
+    }
+
+    /**
+     * 将单个视频信息插入编辑器中
+     */
+    function insertSingle(){
+        var width = $G("videoWidth"),
+            height = $G("videoHeight"),
+            url=$G('videoUrl').value,
+            align = findFocus("videoFloat","name");
+        if(!url) return false;
+        if ( !checkNum( [width, height] ) ) return false;
+        editor.execCommand('insertvideo', {
+            url: convert_url(url),
+            width: width.value,
+            height: height.value,
+            align: align
+        }, isModifyUploadVideo ? 'upload':null);
+    }
+
+    /**
+     * 将元素id下的所有代表视频的图片插入编辑器中
+     * @param id
+     */
+    function insertSearch(id){
+        var imgs = domUtils.getElementsByTagName($G(id),"img"),
+            videoObjs=[];
+        for(var i=0,img; img=imgs[i++];){
+            if(img.getAttribute("selected")){
+                videoObjs.push({
+                    url:img.getAttribute("ue_video_url"),
+                    width:420,
+                    height:280,
+                    align:"none"
+                });
+            }
+        }
+        editor.execCommand('insertvideo',videoObjs);
+    }
+
+    /**
+     * 找到id下具有focus类的节点并返回该节点下的某个属性
+     * @param id
+     * @param returnProperty
+     */
+    function findFocus( id, returnProperty ) {
+        var tabs = $G( id ).children,
+                property;
+        for ( var i = 0, ci; ci = tabs[i++]; ) {
+            if ( ci.className=="focus" ) {
+                property = ci.getAttribute( returnProperty );
+                break;
+            }
+        }
+        return property;
+    }
+    function convert_url(url){
+      if (!url) return '';
+      url = utils.trim(url)
+        .replace(/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, 'player.youku.com/embed/$1')
+        // .replace(/(www\.)?youtube\.com\/watch\?v=([\w\-]+)/i, "www.youtube.com/v/$2")
+        // .replace(/youtu.be\/(\w+)$/i, "www.youtube.com/v/$1")
+        //.replace(/www\.iqiyi\.com\/v_(\w+)\.html/i, "www.youtube.com/v/$1")
+        // .replace(/v\.ku6\.com\/.+\/([\w\.]+)\.html.*$/i, "player.ku6.com/refer/$1/v.swf")
+        // .replace(/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "player.56.com/v_$1.swf")
+        // .replace(/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "player.56.com/v_$1.swf")
+        // .replace(/v\.pps\.tv\/play_([\w]+)\.html.*$/i, "player.pps.tv/player/sid/$1/v.swf")
+        // .replace(/www\.letv\.com\/ptv\/vplay\/([\d]+)\.html.*$/i, "i7.imgs.letv.com/player/swfPlayer.swf?id=$1&autoplay=0")
+        // .replace(/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "www.tudou.com/v/$1")
+        // https://v.qq.com/x/cover/wagzbx91asjomnu/w05337nxfof.html
+        // https://v.qq.com/iframe/player.html?vid=w05337nxfof&tiny=0&auto=0
+        .replace(/v\.qq\.com\/x\/cover\/[\w]+\/([\w]+)\.html/i, "v.qq.com/iframe/player.html?vid=$1&tiny=0&auto=0")
+        .replace(/v\.qq\.com\/x\/page\/([\w]+)\.html/i, "v.qq.com/iframe/player.html?vid=$1&tiny=0&auto=0")
+        .replace(/www\.bilibili\.com\/video\/([a-zA-Z0-9]+)\/?.*$/i, "player.bilibili.com/player.html?bvid=$1")
+      // .replace(/v\.qq\.com\/cover\/[\w]+\/[\w]+\/([\w]+)\.html/i, "static.video.qq.com/TPout.swf?vid=$1")
+      // .replace(/v\.qq\.com\/.+[\?\&]vid=([^&]+).*$/i, "static.video.qq.com/TPout.swf?vid=$1")
+      // .replace(/my\.tv\.sohu\.com\/[\w]+\/[\d]+\/([\d]+)\.shtml.*$/i, "share.vrs.sohu.com/my/v.swf&id=$1")
+      ;
+      return url;
+    }
+
+    /**
+      * 检测传入的所有input框中输入的长宽是否是正数
+      * @param nodes input框集合，
+      */
+     function checkNum( nodes ) {
+         for ( var i = 0, ci; ci = nodes[i++]; ) {
+             var value = ci.value;
+             if ( !isNumber( value ) && value) {
+                 alert( lang.numError );
+                 ci.value = "";
+                 ci.focus();
+                 return false;
+             }
+         }
+         return true;
+     }
+
+    /**
+     * 数字判断
+     * @param value
+     */
+    function isNumber( value ) {
+        return /(0|^[1-9]\d*$)/.test( value );
+    }
+
+    /**
+      * 创建图片浮动选择按钮
+      * @param ids
+      */
+     function createAlignButton( ids ) {
+         for ( var i = 0, ci; ci = ids[i++]; ) {
+             var floatContainer = $G( ci ),
+                     nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight, "center":lang.block};
+             for ( var j in nameMaps ) {
+                 var div = document.createElement( "div" );
+                 div.setAttribute( "name", j );
+                 if ( j == "none" ) div.className="focus";
+                 div.style.cssText = "background:url(images/" + j + "_focus.jpg);";
+                 div.setAttribute( "title", nameMaps[j] );
+                 floatContainer.appendChild( div );
+             }
+             switchSelect( ci );
+         }
+     }
+
+    /**
+     * 选择切换
+     * @param selectParentId
+     */
+    function switchSelect( selectParentId ) {
+        var selects = $G( selectParentId ).children;
+        for ( var i = 0, ci; ci = selects[i++]; ) {
+            domUtils.on( ci, "click", function () {
+                for ( var j = 0, cj; cj = selects[j++]; ) {
+                    cj.className = "";
+                    cj.removeAttribute && cj.removeAttribute( "class" );
+                }
+                this.className = "focus";
+            } )
+        }
+    }
+
+    /**
+     * 监听url改变事件
+     * @param url
+     */
+    function addUrlChangeListener(url){
+        if (browser.ie) {
+            url.onpropertychange = function () {
+                createPreviewVideo( this.value );
+            }
+        } else {
+            url.addEventListener( "input", function () {
+                createPreviewVideo( this.value );
+            }, false );
+        }
+    }
+
+    /**
+     * 根据url生成视频预览
+     * @param url
+     */
+    function createPreviewVideo(url){
+      if (!url)return;
+
+      var conUrl = convert_url(url);
+
+      conUrl = utils.unhtml(conUrl);
+
+      // $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
+      // '<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
+      //     ' src="' + conUrl + '"' +
+      //     ' width="' + 420  + '"' +
+      //     ' height="' + 280  + '"' +
+      //     ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
+      // '</embed>';
+
+      $G("preview").innerHTML = '<div class="previewMsg"><span>' + lang.urlError + '</span></div>' +
+        '<iframe class="previewVideo" ' +
+        ' src="' + conUrl + '"' +
+        ' width="' + 420 + '"' +
+        ' height="' + 280 + '"' +
+        ' frameborder=0 allowfullscreen>' +
+        '</iframe>';
+    }
+
+
+    /* 插入上传视频 */
+    function insertUpload(){
+        var videoObjs=[],
+            uploadDir = editor.getOpt('videoUrlPrefix'),
+            width = $G('upload_width').value || 420,
+            height = $G('upload_height').value || 280,
+            align = findFocus("upload_alignment","name") || 'none';
+        for(var key in uploadVideoList) {
+            var file = uploadVideoList[key];
+            videoObjs.push({
+                url: uploadDir + file.url,
+                width:width,
+                height:height,
+                align:align
+            });
+        }
+
+        var count = uploadFile.getQueueCount();
+        if (count) {
+            $('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
+            return false;
+        } else {
+            editor.execCommand('insertvideo', videoObjs, 'upload');
+        }
+    }
+
+    /*初始化上传标签*/
+    function initUpload(){
+        uploadFile = new UploadFile('queueList');
+    }
+
+
+    /* 上传附件 */
+    function UploadFile(target) {
+        this.$wrap = target.constructor == String ? $('#' + target) : $(target);
+        this.init();
+    }
+    UploadFile.prototype = {
+        init: function () {
+            this.fileList = [];
+            this.initContainer();
+            this.initUploader();
+        },
+        initContainer: function () {
+            this.$queue = this.$wrap.find('.filelist');
+        },
+        /* 初始化容器 */
+        initUploader: function () {
+            var _this = this,
+                $ = jQuery,    // just in case. Make sure it's not an other libaray.
+                $wrap = _this.$wrap,
+            // 图片容器
+                $queue = $wrap.find('.filelist'),
+            // 状态栏，包括进度和控制按钮
+                $statusBar = $wrap.find('.statusBar'),
+            // 文件总体选择信息。
+                $info = $statusBar.find('.info'),
+            // 上传按钮
+                $upload = $wrap.find('.uploadBtn'),
+            // 上传按钮
+                $filePickerBtn = $wrap.find('.filePickerBtn'),
+            // 上传按钮
+                $filePickerBlock = $wrap.find('.filePickerBlock'),
+            // 没选择文件之前的内容。
+                $placeHolder = $wrap.find('.placeholder'),
+            // 总体进度条
+                $progress = $statusBar.find('.progress').hide(),
+            // 添加的文件数量
+                fileCount = 0,
+            // 添加的文件总大小
+                fileSize = 0,
+            // 优化retina, 在retina下这个值是2
+                ratio = window.devicePixelRatio || 1,
+            // 缩略图大小
+                thumbnailWidth = 113 * ratio,
+                thumbnailHeight = 113 * ratio,
+            // 可能有pedding, ready, uploading, confirm, done.
+                state = '',
+            // 所有文件的进度信息，key为file id
+                percentages = {},
+                supportTransition = (function () {
+                    var s = document.createElement('p').style,
+                        r = 'transition' in s ||
+                            'WebkitTransition' in s ||
+                            'MozTransition' in s ||
+                            'msTransition' in s ||
+                            'OTransition' in s;
+                    s = null;
+                    return r;
+                })(),
+            // WebUploader实例
+                uploader,
+                actionUrl = editor.getActionUrl(editor.getOpt('videoActionName')),
+                fileMaxSize = editor.getOpt('videoMaxSize'),
+                acceptExtensions = (editor.getOpt('videoAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, '');;
+
+            if (!WebUploader.Uploader.support()) {
+                $('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide();
+                return;
+            } else if (!editor.getOpt('videoActionName')) {
+                $('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide();
+                return;
+            }
+
+            uploader = _this.uploader = WebUploader.create({
+                pick: {
+                    id: '#filePickerReady',
+                    label: lang.uploadSelectFile
+                },
+                swf: '../../third-party/webuploader/Uploader.swf',
+                server: actionUrl,
+                fileVal: editor.getOpt('videoFieldName'),
+                duplicate: true,
+                fileSingleSizeLimit: fileMaxSize,
+                compress: false
+            });
+            uploader.addButton({
+                id: '#filePickerBlock'
+            });
+            uploader.addButton({
+                id: '#filePickerBtn',
+                label: lang.uploadAddFile
+            });
+
+            setState('pedding');
+
+            // 当有文件添加进来时执行，负责view的创建
+            function addFile(file) {
+                var $li = $('<li id="' + file.id + '">' +
+                        '<p class="title">' + file.name + '</p>' +
+                        '<p class="imgWrap"></p>' +
+                        '<p class="progress"><span></span></p>' +
+                        '</li>'),
+
+                    $btns = $('<div class="file-panel">' +
+                        '<span class="cancel">' + lang.uploadDelete + '</span>' +
+                        '<span class="rotateRight">' + lang.uploadTurnRight + '</span>' +
+                        '<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li),
+                    $prgress = $li.find('p.progress span'),
+                    $wrap = $li.find('p.imgWrap'),
+                    $info = $('<p class="error"></p>').hide().appendTo($li),
+
+                    showError = function (code) {
+                        switch (code) {
+                            case 'exceed_size':
+                                text = lang.errorExceedSize;
+                                break;
+                            case 'interrupt':
+                                text = lang.errorInterrupt;
+                                break;
+                            case 'http':
+                                text = lang.errorHttp;
+                                break;
+                            case 'not_allow_type':
+                                text = lang.errorFileType;
+                                break;
+                            default:
+                                text = lang.errorUploadRetry;
+                                break;
+                        }
+                        $info.text(text).show();
+                    };
+
+                if (file.getStatus() === 'invalid') {
+                    showError(file.statusText);
+                } else {
+                    $wrap.text(lang.uploadPreview);
+                    if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|'+file.ext.toLowerCase()+'|') == -1) {
+                        $wrap.empty().addClass('notimage').append('<i class="file-preview file-type-' + file.ext.toLowerCase() + '"></i>' +
+                            '<span class="file-title">' + file.name + '</span>');
+                    } else {
+                        if (browser.ie && browser.version <= 7) {
+                            $wrap.text(lang.uploadNoPreview);
+                        } else {
+                            uploader.makeThumb(file, function (error, src) {
+                                if (error || !src || (/^data:/.test(src) && browser.ie && browser.version <= 7)) {
+                                    $wrap.text(lang.uploadNoPreview);
+                                } else {
+                                    var $img = $('<img src="' + src + '">');
+                                    $wrap.empty().append($img);
+                                    $img.on('error', function () {
+                                        $wrap.text(lang.uploadNoPreview);
+                                    });
+                                }
+                            }, thumbnailWidth, thumbnailHeight);
+                        }
+                    }
+                    percentages[ file.id ] = [ file.size, 0 ];
+                    file.rotation = 0;
+
+                    /* 检查文件格式 */
+                    if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) {
+                        showError('not_allow_type');
+                        uploader.removeFile(file);
+                    }
+                }
+
+                file.on('statuschange', function (cur, prev) {
+                    if (prev === 'progress') {
+                        $prgress.hide().width(0);
+                    } else if (prev === 'queued') {
+                        $li.off('mouseenter mouseleave');
+                        $btns.remove();
+                    }
+                    // 成功
+                    if (cur === 'error' || cur === 'invalid') {
+                        showError(file.statusText);
+                        percentages[ file.id ][ 1 ] = 1;
+                    } else if (cur === 'interrupt') {
+                        showError('interrupt');
+                    } else if (cur === 'queued') {
+                        percentages[ file.id ][ 1 ] = 0;
+                    } else if (cur === 'progress') {
+                        $info.hide();
+                        $prgress.css('display', 'block');
+                    } else if (cur === 'complete') {
+                    }
+
+                    $li.removeClass('state-' + prev).addClass('state-' + cur);
+                });
+
+                $li.on('mouseenter', function () {
+                    $btns.stop().animate({height: 30});
+                });
+                $li.on('mouseleave', function () {
+                    $btns.stop().animate({height: 0});
+                });
+
+                $btns.on('click', 'span', function () {
+                    var index = $(this).index(),
+                        deg;
+
+                    switch (index) {
+                        case 0:
+                            uploader.removeFile(file);
+                            return;
+                        case 1:
+                            file.rotation += 90;
+                            break;
+                        case 2:
+                            file.rotation -= 90;
+                            break;
+                    }
+
+                    if (supportTransition) {
+                        deg = 'rotate(' + file.rotation + 'deg)';
+                        $wrap.css({
+                            '-webkit-transform': deg,
+                            '-mos-transform': deg,
+                            '-o-transform': deg,
+                            'transform': deg
+                        });
+                    } else {
+                        $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
+                    }
+
+                });
+
+                $li.insertBefore($filePickerBlock);
+            }
+
+            // 负责view的销毁
+            function removeFile(file) {
+                var $li = $('#' + file.id);
+                delete percentages[ file.id ];
+                updateTotalProgress();
+                $li.off().find('.file-panel').off().end().remove();
+            }
+
+            function updateTotalProgress() {
+                var loaded = 0,
+                    total = 0,
+                    spans = $progress.children(),
+                    percent;
+
+                $.each(percentages, function (k, v) {
+                    total += v[ 0 ];
+                    loaded += v[ 0 ] * v[ 1 ];
+                });
+
+                percent = total ? loaded / total : 0;
+
+                spans.eq(0).text(Math.round(percent * 100) + '%');
+                spans.eq(1).css('width', Math.round(percent * 100) + '%');
+                updateStatus();
+            }
+
+            function setState(val, files) {
+
+                if (val != state) {
+
+                    var stats = uploader.getStats();
+
+                    $upload.removeClass('state-' + state);
+                    $upload.addClass('state-' + val);
+
+                    switch (val) {
+
+                        /* 未选择文件 */
+                        case 'pedding':
+                            $queue.addClass('element-invisible');
+                            $statusBar.addClass('element-invisible');
+                            $placeHolder.removeClass('element-invisible');
+                            $progress.hide(); $info.hide();
+                            uploader.refresh();
+                            break;
+
+                        /* 可以开始上传 */
+                        case 'ready':
+                            $placeHolder.addClass('element-invisible');
+                            $queue.removeClass('element-invisible');
+                            $statusBar.removeClass('element-invisible');
+                            $progress.hide(); $info.show();
+                            $upload.text(lang.uploadStart);
+                            uploader.refresh();
+                            break;
+
+                        /* 上传中 */
+                        case 'uploading':
+                            $progress.show(); $info.hide();
+                            $upload.text(lang.uploadPause);
+                            break;
+
+                        /* 暂停上传 */
+                        case 'paused':
+                            $progress.show(); $info.hide();
+                            $upload.text(lang.uploadContinue);
+                            break;
+
+                        case 'confirm':
+                            $progress.show(); $info.hide();
+                            $upload.text(lang.uploadStart);
+
+                            stats = uploader.getStats();
+                            if (stats.successNum && !stats.uploadFailNum) {
+                                setState('finish');
+                                return;
+                            }
+                            break;
+
+                        case 'finish':
+                            $progress.hide(); $info.show();
+                            if (stats.uploadFailNum) {
+                                $upload.text(lang.uploadRetry);
+                            } else {
+                                $upload.text(lang.uploadStart);
+                            }
+                            break;
+                    }
+
+                    state = val;
+                    updateStatus();
+
+                }
+
+                if (!_this.getQueueCount()) {
+                    $upload.addClass('disabled')
+                } else {
+                    $upload.removeClass('disabled')
+                }
+
+            }
+
+            function updateStatus() {
+                var text = '', stats;
+
+                if (state === 'ready') {
+                    text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize));
+                } else if (state === 'confirm') {
+                    stats = uploader.getStats();
+                    if (stats.uploadFailNum) {
+                        text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum);
+                    }
+                } else {
+                    stats = uploader.getStats();
+                    text = lang.updateStatusFinish.replace('_', fileCount).
+                        replace('_KB', WebUploader.formatSize(fileSize)).
+                        replace('_', stats.successNum);
+
+                    if (stats.uploadFailNum) {
+                        text += lang.updateStatusError.replace('_', stats.uploadFailNum);
+                    }
+                }
+
+                $info.html(text);
+            }
+
+            uploader.on('fileQueued', function (file) {
+                fileCount++;
+                fileSize += file.size;
+
+                if (fileCount === 1) {
+                    $placeHolder.addClass('element-invisible');
+                    $statusBar.show();
+                }
+
+                addFile(file);
+            });
+
+            uploader.on('fileDequeued', function (file) {
+                fileCount--;
+                fileSize -= file.size;
+
+                removeFile(file);
+                updateTotalProgress();
+            });
+
+            uploader.on('filesQueued', function (file) {
+                if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) {
+                    setState('ready');
+                }
+                updateTotalProgress();
+            });
+
+            uploader.on('all', function (type, files) {
+                switch (type) {
+                    case 'uploadFinished':
+                        setState('confirm', files);
+                        break;
+                    case 'startUpload':
+                        /* 添加额外的GET参数 */
+                        var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
+                            url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);
+                        uploader.option('server', url);
+                        setState('uploading', files);
+                        break;
+                    case 'stopUpload':
+                        setState('paused', files);
+                        break;
+                }
+            });
+
+            uploader.on('uploadBeforeSend', function (file, data, header) {
+                //这里可以通过data对象添加POST参数
+                if (actionUrl.toLowerCase().indexOf('jsp') != -1) {
+                    header['X_Requested_With'] = 'XMLHttpRequest';
+                }
+            });
+
+            uploader.on('uploadProgress', function (file, percentage) {
+                var $li = $('#' + file.id),
+                    $percent = $li.find('.progress span');
+
+                $percent.css('width', percentage * 100 + '%');
+                percentages[ file.id ][ 1 ] = percentage;
+                updateTotalProgress();
+            });
+
+            uploader.on('uploadSuccess', function (file, ret) {
+                var $file = $('#' + file.id);
+                try {
+                    var responseText = (ret._raw || ret),
+                        json = utils.str2json(responseText);
+                    if (json.state == 'SUCCESS') {
+                        uploadVideoList.push({
+                            'url': json.url,
+                            'type': json.type,
+                            'original':json.original
+                        });
+                        $file.append('<span class="success"></span>');
+                    } else {
+                        $file.find('.error').text(json.state).show();
+                    }
+                } catch (e) {
+                    $file.find('.error').text(lang.errorServerUpload).show();
+                }
+            });
+
+            uploader.on('uploadError', function (file, code) {
+            });
+            uploader.on('error', function (code, file) {
+                if (code == 'Q_TYPE_DENIED' || code == 'F_EXCEED_SIZE') {
+                    addFile(file);
+                }
+            });
+            uploader.on('uploadComplete', function (file, ret) {
+            });
+
+            $upload.on('click', function () {
+                if ($(this).hasClass('disabled')) {
+                    return false;
+                }
+
+                if (state === 'ready') {
+                    uploader.upload();
+                } else if (state === 'paused') {
+                    uploader.upload();
+                } else if (state === 'uploading') {
+                    uploader.stop();
+                }
+            });
+
+            $upload.addClass('state-' + state);
+            updateTotalProgress();
+        },
+        getQueueCount: function () {
+            var file, i, status, readyFile = 0, files = this.uploader.getFiles();
+            for (i = 0; file = files[i++]; ) {
+                status = file.getStatus();
+                if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++;
+            }
+            return readyFile;
+        },
+        refresh: function(){
+            this.uploader.refresh();
+        }
+    };
+
+})();
diff --git a/public/js/ueditor/dialogs/wordimage/wordimage.html b/public/js/ueditor/dialogs/wordimage/wordimage.html
new file mode 100644
index 0000000..ffebecd
--- /dev/null
+++ b/public/js/ueditor/dialogs/wordimage/wordimage.html
@@ -0,0 +1,216 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title></title>
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+  <script type="text/javascript" src="../internal.js?20220503"></script>
+  <style type="text/css">
+    .wrapper {
+      width: 600px;
+      padding: 10px;
+      height: 352px;
+      overflow: hidden;
+      position: relative;
+      border-bottom: 1px solid #d7d7d7
+    }
+
+    .wrapper .image-info {
+      display: flex;
+      align-items: center;
+    }
+
+    .wrapper .image-info .input {
+      flex-grow: 1;
+      display: flex;
+    }
+
+    .wrapper .image-info .input input {
+      display: block;
+      border: 1px solid #CCC;
+      height: 23px;
+      border-radius: 3px;
+      flex-grow: 1;
+      outline: none;
+    }
+
+    .wrapper .image-info .copy {
+      width: 60px;
+      cursor: pointer;
+      margin: 0 5px;
+    }
+
+    .wrapper .image-info .copy div {
+      height: 30px;
+      font-size: 12px;
+      line-height: 28px;
+      cursor: pointer;
+      border-radius: 4px;
+      text-align: center;
+      background-color: #F8F8F8;
+      border: 1px solid #EEE;
+    }
+
+    .wrapper .image-info .action {
+      width: 100px;
+      cursor: pointer;
+    }
+
+    .wrapper .image-info .action .save-from-local {
+      position: relative;
+      height: 30px;
+      font-size: 12px;
+      line-height: 28px;
+      cursor: pointer;
+      border-radius: 4px;
+      text-align: center;
+      background-color: #F8F8F8;
+      border: 1px solid #EEE;
+    }
+
+    .wrapper .image-info .action .save-from-local input {
+      position: absolute;
+      left: 0;
+      top: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    .wrapper .image-manual {
+      background: #EEE;
+      padding: 10px;
+      border-radius: 5px;
+      margin-top: 10px;
+      line-height: 2;
+    }
+
+    .wrapper .image-manual .title {
+      font-weight: bold;
+      font-size: 120%;
+    }
+
+    .wrapper .image-manual .body {
+    }
+  </style>
+</head>
+<body>
+<div class="wrapper">
+  <div class="image-info">
+    <div class="input">
+      <input type="text" id="fileUrl"/>
+    </div>
+    <div class="copy">
+      <div id="copyButton">复制路径</div>
+    </div>
+    <div class="action">
+      <div class="save-from-local">
+        <div>本地选择保存</div>
+        <input type="file" id="saveFile"/>
+      </div>
+    </div>
+  </div>
+  <div class="image-tip"></div>
+  <div class="image-manual">
+    <div class="title">
+      Windows使用教程
+    </div>
+    <div class="body">
+      <p>1、点击复制地址按钮</p>
+      <p>2、点击本地选择文件，粘贴剪切板的路径到文件选择路径</p>
+      <p>3、点击确定</p>
+    </div>
+    <div class="title">
+      Mac使用教程
+    </div>
+    <div class="body">
+      <p>1、点击复制地址按钮</p>
+      <p>2、点击本地选择文件，按快捷 Command+Shift+G ，粘贴剪切板的路径到文件选择路径</p>
+      <p>3、点击确定</p>
+    </div>
+  </div>
+</div>
+<script src="../../third-party/jquery-1.10.2.js?20220503"></script>
+<script src="../../third-party/webuploader/webuploader.js?20220503"></script>
+<script type="text/javascript" src="../../third-party/clipboard/clipboard.js?20220503"></script>
+<script type="text/javascript" src="wordimage.js?20220903"></script>
+<script type="text/javascript">
+  editor.setOpt({
+    wordImageFieldName: "upfile",
+    compressSide: 0,
+    maxImageSideLength: 900
+  });
+  //全局变量
+  var imageUrls = [],          //用于保存从服务器返回的图片信息数组
+    selectedImageCount = 0,  //当前已选择的但未上传的图片数量
+    optImageUrl = editor.getActionUrl(editor.getOpt('imageActionName')),
+    optImageFieldName = editor.getOpt('imageFieldName'),
+    optImageCompressBorder = editor.getOpt('imageCompressEnable') ? editor.getOpt('imageCompressBorder') : null,
+    maxSize = editor.getOpt('imageMaxSize') / 1024 / 1024,
+    extension = editor.getOpt('imageAllowFiles').join(';').replace(/\./g, '*.');
+
+  /* 添加额外的GET参数 */
+  var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
+    urlWidthParams = optImageUrl + (optImageUrl.indexOf('?') == -1 ? '?' : '&') + params;
+
+  var uploader,
+    actionUrl = editor.getActionUrl(editor.getOpt('imageActionName')),
+    acceptExtensions = (editor.getOpt('imageAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, ''),
+    imageMaxSize = editor.getOpt('imageMaxSize'),
+    imageCompressBorder = editor.getOpt('imageCompressBorder');
+  uploader = WebUploader.create({
+    accept: {
+      title: 'Images',
+      extensions: acceptExtensions,
+      mimeTypes: 'image/*'
+    },
+    swf: '../../third-party/webuploader/Uploader.swf',
+    server: actionUrl,
+    fileVal: editor.getOpt('imageFieldName'),
+    duplicate: true,
+    fileSingleSizeLimit: imageMaxSize,    // 默认 2 M
+    threads: 1,
+    compress: editor.getOpt('imageCompressEnable') ? {
+      width: imageCompressBorder,
+      height: imageCompressBorder,
+      // 图片质量，只有type为`image/jpeg`的时候才有效。
+      quality: 90,
+      // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+      allowMagnify: false,
+      // 是否允许裁剪。
+      crop: false,
+      // 是否保留头部meta信息。
+      preserveHeaders: true
+    } : false
+  });
+  uploader.on('uploadSuccess', function (file, res) {
+    if ('state' in res) {
+      if (res.state === 'SUCCESS') {
+        if (res.url) {
+          imageUrls.push({
+            name: file.name,
+            url: res.url,
+            title: '',
+          });
+          if ($('#fileUrl').val().indexOf(file.name) >= 0) {
+            $('#fileUrl').val(res.url);
+            $('.image-tip').html('<span style="color:#139213;">转存成功，请提交确认</span>');
+          }
+        } else {
+          $('.image-tip').html('上传失败:' + JSON.stringify(res))
+        }
+      } else {
+        $('.image-tip').html('上传失败:' + JSON.stringify(res))
+      }
+    } else {
+      $('.image-tip').html('上传失败:' + JSON.stringify(res))
+    }
+  });
+  utils.domReady(function () {
+    var options = {};
+    var callbacks = {};
+    wordImage.init(options, callbacks);
+  });
+</script>
+
+</body>
+</html>
diff --git a/public/js/ueditor/dialogs/wordimage/wordimage.js b/public/js/ueditor/dialogs/wordimage/wordimage.js
new file mode 100644
index 0000000..f438cc8
--- /dev/null
+++ b/public/js/ueditor/dialogs/wordimage/wordimage.js
@@ -0,0 +1,90 @@
+/**
+ * Created by JetBrains PhpStorm.
+ * User: taoqili
+ * Date: 12-1-30
+ * Time: 下午12:50
+ * To change this template use File | Settings | File Templates.
+ */
+var wordImage = {};
+var g = $G, flashObj, flashContainer;
+
+wordImage.init = function (opt, callbacks) {
+  showLocalPath("fileUrl");
+  createCopyButton("copyButton", "fileUrl");
+  addUploadButtonListener();
+  addOkListener();
+};
+
+function addUploadButtonListener() {
+  g('saveFile').addEventListener('change', function () {
+    if (this.files.length !== 1) {
+      alert('请选择1个文件')
+      return;
+    }
+    $('.image-tip').html('正在转存，请稍后...');
+    var file = this.files[0];
+    uploader.addFile(file);
+    uploader.upload();
+  });
+}
+
+
+function addOkListener() {
+  dialog.onok = function () {
+    //console.log('imageUrls',imageUrls);
+    if (!imageUrls.length) return;
+    var urlPrefix = editor.getOpt('imageUrlPrefix'),
+      images = domUtils.getElementsByTagName(editor.document, "img");
+    editor.fireEvent('saveScene');
+    // console.log('images',images,imageUrls);
+    for (var i = 0, img; img = images[i++];) {
+      var src = img.getAttribute("data-word-image");
+      if (!src) continue;
+      for (var j = 0, url; url = imageUrls[j++];) {
+        // console.log('url',src, url);
+        if (src.indexOf(url.name.replace(" ", "")) != -1) {
+          img.src = urlPrefix + url.url;
+          img.setAttribute("_src", urlPrefix + url.url);  //同时修改"_src"属性
+          img.setAttribute("title", url.title);
+          domUtils.removeAttributes(img, ["data-word-image", "style", "width", "height"]);
+          editor.fireEvent("selectionchange");
+          break;
+        }
+      }
+    }
+    editor.fireEvent('saveScene');
+    // hideFlash();
+  };
+  dialog.oncancel = function () {
+    //hideFlash();
+  };
+}
+
+function showLocalPath(id) {
+  //单张编辑
+  var img = editor.selection.getRange().getClosedNode();
+  var images = editor.execCommand('wordimage');
+  if (images.length == 1 || img && img.tagName == 'IMG') {
+    g(id).value = images[0];
+    return;
+  }
+  var path = images[0];
+  var leftSlashIndex = path.lastIndexOf("/") || 0,  //不同版本的doc和浏览器都可能影响到这个符号，故直接判断两种
+    rightSlashIndex = path.lastIndexOf("\\") || 0,
+    separater = leftSlashIndex > rightSlashIndex ? "/" : "\\";
+
+  path = path.substring(0, path.lastIndexOf(separater) + 1);
+  g(id).value = path;
+}
+
+function createCopyButton(id, dataFrom) {
+  var url = g(dataFrom).value;
+  if (url.startsWith("file:////")) {
+    url = url.substring(8);
+  }
+  g(id).setAttribute("data-clipboard-text", url);
+  var clipboard = new Clipboard('[data-clipboard-text]')
+  clipboard.on('success', function (e) {
+    g('copyButton').innerHTML = '复制成功';
+  });
+}
diff --git a/public/js/ueditor/index.html b/public/js/ueditor/index.html
new file mode 100644
index 0000000..e0cffe0
--- /dev/null
+++ b/public/js/ueditor/index.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html>
+<head>
+  <title>UEditorPlus 完整演示</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=5, user-scalable=no">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+  <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
+  <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
+  <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
+  <script src="./plugins/demo/demo.js"></script>
+  <script>
+    // window.UEDITOR_CONFIG.toolbars[0].push('undo');
+  </script>
+  <script>var _hmt = _hmt || [];
+  (function () {
+    var hm = document.createElement("script");
+    hm.src = "https://hm.baidu.com/hm.js?5f8b495b287894a451c761c963e6e34a";
+    var s = document.getElementsByTagName("script")[0];
+    s.parentNode.insertBefore(hm, s);
+  })();</script>
+  <link rel="stylesheet" href="./style.css"/>
+</head>
+<body class="demo-editor-page">
+<div>
+  <h1>完整示例</h1>
+  <div>
+    <script id="editor" type="text/plain" style="height:300px;">
+<h1>
+    你好 UEditorPlus
+</h1>
+<p>
+    UEditorPlus 是基于 UEditor 二次开发的富文本编辑器，让 UEditor <span style="color: #E36C09;">焕<span style="color: #0070C0;">然</span><span style="color: #31859B;"><span style="color: #00B050;">一</span><span style="color: #FF0000;">新</span></span></span>
+</p>
+
+<table data-sort="sortDisabled">
+    <tbody>
+        <tr class="firstRow">
+            <td valign="top" style="word-break: break-all;" rowspan="1" colspan="3">
+                我是表格
+            </td>
+        </tr>
+        <tr>
+            <td width="273" valign="top" style="word-break: break-all;">
+                如果
+            </td>
+            <td width="273" valign="top" style="word-break: break-all;">
+                有一天
+            </td>
+            <td width="273" valign="top" style="word-break: break-all;">
+                我离开了
+            </td>
+        </tr>
+        <tr>
+            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
+                怎么才能
+            </td>
+            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
+                证明我
+            </td>
+            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
+                曾经来过
+            </td>
+        </tr>
+    </tbody>
+</table>
+<pre class="brush:html;toolbar:false">&lt;div&gt;
+  &lt;span&gt;这里是HTML标签&lt;/span&gt;
+&lt;/div&gt;</pre>
+<h2>
+公式支持
+</h2>
+<p>
+    <img src="https://latex.codecogs.com/svg.image?f(a)%20%3D%20%5Cfrac%7B1%7D%7B2%5Cpi%20i%7D%20%5Coint%5Cfrac%7Bf(z)%7D%7Bz-a%7Ddz" data-formula-image="f(a)%20%3D%20%5Cfrac%7B1%7D%7B2%5Cpi%20i%7D%20%5Coint%5Cfrac%7Bf(z)%7D%7Bz-a%7Ddz"/>
+</p>
+<p>
+    <br/>
+</p>
+    </script>
+  </div>
+  <div id="btns" style="margin-top:20px;">
+    <div>
+
+      <button onclick="alert(UE.getEditor('editor').getAllHtml())">获得整个html的内容</button>
+      <button onclick="alert(UE.getEditor('editor').getContent())">获得内容</button>
+      <button onclick="UE.getEditor('editor').setContent('<p>欢迎使用 UEditorPlus</p>', false)">写入内容</button>
+      <button onclick="UE.getEditor('editor').setContent('<p>欢迎使用 UEditorPlus</p>', true)">追加内容</button>
+      <button onclick="alert(UE.getEditor('editor').getContentTxt())">获得纯文本</button>
+      <button onclick="alert(UE.getEditor('editor').getPlainTxt())">获得带格式的纯文本</button>
+      <button onclick="alert(UE.getEditor('editor').hasContents())">判断是否有内容</button>
+      <button onclick="UE.getEditor('editor').focus()">使编辑器获得焦点</button>
+      <button onmousedown="isFocus()">编辑器是否获得焦点</button>
+      <button onmousedown="setBlur()">编辑器失去焦点</button>
+      <button onclick="getSelectText()">获得当前选中的文本</button>
+      <button onclick="UE.getEditor('editor').execCommand('insertHtml', '插入的内容')">插入内容</button>
+      <button onclick="UE.getEditor('editor').setEnabled()">设定可编辑</button>
+      <button onclick="UE.getEditor('editor').setDisabled('fullscreen')">设定不可编辑</button>
+      <button onclick="UE.getEditor('editor').setHide()">隐藏编辑器</button>
+      <button onclick="UE.getEditor('editor').setShow()">显示编辑器</button>
+      <button onclick="UE.getEditor('editor').setHeight(300)">设置固定高度</button>
+      <button onclick="UE.getEditor('editor')">创建编辑器</button>
+      <button onclick="UE.getEditor('editor').destroy()">销毁编辑器</button>
+      <button onclick="alert( UE.getEditor('editor').execCommand('get_auto_save_content') )">草稿箱-获取</button>
+      <button onclick="UE.getEditor('editor').execCommand('clear_auto_save_content'); alert('已清空草稿箱')">草稿箱-清空</button>
+      <button onclick="UE.getEditor('editor').execCommand('set_auto_save_content'); alert('已保存')">草稿箱-立即保存</button>
+      <button onclick="UE.getEditor('editor').execCommand('auto_save_restore')">草稿箱-恢复到编辑器</button>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    var ue = UE.getEditor('editor');
+    function isFocus(e) {
+      alert(UE.getEditor('editor').isFocus());
+      UE.dom.domUtils.preventDefault(e)
+    }
+    function setBlur(e) {
+      UE.getEditor('editor').blur();
+      UE.dom.domUtils.preventDefault(e)
+    }
+
+    function getSelectText() {
+      var range = UE.getEditor('editor').selection.getRange();
+      range.select();
+      var txt = UE.getEditor('editor').selection.getText();
+      alert(txt)
+    }
+  </script>
+</div>
+</body>
+</html>
diff --git a/public/js/ueditor/lang/en/en.js b/public/js/ueditor/lang/en/en.js
new file mode 100644
index 0000000..095d025
--- /dev/null
+++ b/public/js/ueditor/lang/en/en.js
@@ -0,0 +1,609 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: taoqili
+ * Date: 12-6-12
+ * Time: 下午6:57
+ * To change this template use File | Settings | File Templates.
+ */
+UE.I18N['en'] = {
+    'labelMap':{
+        'anchor':'Anchor', 'undo':'Undo', 'redo':'Redo', 'bold':'Bold', 'indent':'Indent',
+        'italic':'Italic', 'underline':'Underline', 'strikethrough':'Strikethrough', 'subscript':'SubScript','fontborder':'text border',
+        'superscript':'SuperScript', 'formatmatch':'Format Match', 'source':'Source', 'blockquote':'BlockQuote',
+        'pasteplain':'PastePlain', 'selectall':'SelectAll', 'print':'Print', 'preview':'Preview',
+        'horizontal':'Horizontal', 'removeformat':'RemoveFormat', 'time':'Time', 'date':'Date',
+        'unlink':'Unlink', 'insertrow':'InsertRow', 'insertcol':'InsertCol', 'mergeright':'MergeRight', 'mergedown':'MergeDown',
+        'deleterow':'DeleteRow', 'deletecol':'DeleteCol', 'splittorows':'SplitToRows','insertcode':'insert code',
+        'splittocols':'SplitToCols', 'splittocells':'SplitToCells','deletecaption':'DeleteCaption','inserttitle':'InsertTitle',
+        'mergecells':'MergeCells', 'deletetable':'DeleteTable', 'cleardoc':'Clear', 'insertparagraphbeforetable':"InsertParagraphBeforeTable",
+        'fontfamily':'FontFamily', 'fontsize':'FontSize', 'paragraph':'Paragraph','simpleupload':'Single Image','insertimage':'Multi Image','edittable':'Edit Table', 'edittd':'Edit Td','link':'Link',
+        'emotion':'Emotion', 'spechars':'Spechars', 'searchreplace':'SearchReplace',
+        'insertvideo':'Video', 'help':'Help', 'justifyleft':'JustifyLeft', 'justifyright':'JustifyRight', 'justifycenter':'JustifyCenter',
+        'justifyjustify':'Justify', 'forecolor':'FontColor', 'backcolor':'BackColor', 'insertorderedlist':'OL',
+        'insertunorderedlist':'UL', 'fullscreen':'FullScreen', 'directionalityltr':'EnterFromLeft', 'directionalityrtl':'EnterFromRight',
+        'rowspacingtop':'RowSpacingTop', 'rowspacingbottom':'RowSpacingBottom', 'pagebreak':'PageBreak', 'insertframe':'Iframe', 'imagenone':'Default',
+        'imageleft':'ImageLeft', 'imageright':'ImageRight', 'attachment':'Attachment', 'imagecenter':'ImageCenter', 'wordimage':'WordImage', 'formula':'Formula',
+        'lineheight':'LineHeight','edittip':'EditTip','customstyle':'CustomStyle', 'scrawl':'Scrawl', 'autotypeset':'AutoTypeset',
+        'touppercase':'UpperCase', 'tolowercase':'LowerCase','template':'Template','background':'Background','inserttable':'InsertTable',
+    },
+    'insertorderedlist':{
+        'num':'1,2,3...',
+        'num1':'1),2),3)...',
+        'num2':'(1),(2),(3)...',
+        'cn':'一,二,三....',
+        'cn1':'一),二),三)....',
+        'cn2':'(一),(二),(三)....',
+        'decimal':'1,2,3...',
+        'lower-alpha':'a,b,c...',
+        'lower-roman':'i,ii,iii...',
+        'upper-alpha':'A,B,C...',
+        'upper-roman':'I,II,III...'
+    },
+    'insertunorderedlist':{
+        'circle':'○ Circle',
+        'disc':'● Circle dot',
+        'square':'■ Rectangle ',
+        'dash' :'－ Dash',
+        'dot' : '。dot'
+    },
+    'paragraph':{'p':'Paragraph', 'h1':'Title 1', 'h2':'Title 2', 'h3':'Title 3', 'h4':'Title 4', 'h5':'Title 5', 'h6':'Title 6'},
+    'fontfamily':{
+        'songti':'Sim Sun',
+        'kaiti':'Sim Kai',
+        'heiti':'Sim Hei',
+        'lishu':'Sim Li',
+        'yahei': 'Microsoft YaHei',
+        'andaleMono':'Andale Mono',
+        'arial': 'Arial',
+        'arialBlack':'Arial Black',
+        'comicSansMs':'Comic Sans MS',
+        'impact':'Impact',
+        'timesNewRoman':'Times New Roman'
+    },
+    'customstyle':{
+        'tc':'Title center',
+        'tl':'Title left',
+        'im':'Important',
+        'hi':'Highlight'
+    },
+    'autoupload': {
+        'exceedSizeError': 'File Size Exceed',
+        'exceedTypeError': 'File Type Not Allow',
+        'jsonEncodeError': 'Server Return Format Error',
+        'loading':"loading...",
+        'loadError':"load error",
+        'errorLoadConfig': 'Server config not loaded, upload can not work.',
+    },
+    'simpleupload':{
+        'exceedSizeError': 'File Size Exceed',
+        'exceedTypeError': 'File Type Not Allow',
+        'jsonEncodeError': 'Server Return Format Error',
+        'loading':"loading...",
+        'loadError':"load error",
+        'errorLoadConfig': 'Server config not loaded, upload can not work.',
+    },
+    'elementPathTip':"Path",
+    'wordCountTip':"Word Count",
+    'wordCountMsg':'{#count} characters entered,{#leave} left. ',
+    'wordOverFlowMsg':'<span style="color:red;">The number of characters has exceeded allowable maximum values, the server may refuse to save!</span>',
+    'ok':"OK",
+    'cancel':"Cancel",
+    'closeDialog':"closeDialog",
+    'tableDrag':"You must import the file uiUtils.js before drag! ",
+    'autofloatMsg':"The plugin AutoFloat depends on EditorUI!",
+    'loadconfigError': 'Get server config error.',
+    'loadconfigFormatError': 'Server config format error.',
+    'loadconfigHttpError': 'Get server config http error.',
+    'insertcode':{
+        'as3':'ActionScript 3',
+        'bash':'Bash/Shell',
+        'cpp':'C/C++',
+        'css':'CSS',
+        'cf':'ColdFusion',
+        'c#':'C#',
+        'delphi':'Delphi',
+        'diff':'Diff',
+        'erlang':'Erlang',
+        'groovy':'Groovy',
+        'html':'HTML',
+        'java':'Java',
+        'jfx':'JavaFX',
+        'js':'JavaScript',
+        'pl':'Perl',
+        'php':'PHP',
+        'plain':'Plain Text',
+        'ps':'PowerShell',
+        'python':'Python',
+        'ruby':'Ruby',
+        'scala':'Scala',
+        'sql':'SQL',
+        'vb':'Visual Basic',
+        'xml':'XML'
+    },
+    'confirmClear':"Do you confirm to clear the Document?",
+    'contextMenu':{
+        'delete':"Delete",
+        'selectall':"Select all",
+        'deletecode':"Delete Code",
+        'cleardoc':"Clear Document",
+        'confirmclear':"Do you confirm to clear the Document?",
+        'unlink':"Unlink",
+        'paragraph':"Paragraph",
+        'edittable':"Table property",
+        'aligncell':'Align cell',
+        'aligntable':'Table alignment',
+        'tableleft':'Left float',
+        'tablecenter':'Center',
+        'tableright':'Right float',
+        'aligntd':'Cell alignment',
+        'edittd':"Cell property",
+        'setbordervisible':'set table edge visible',
+        'table':"Table",
+        'justifyleft':'Justify Left',
+        'justifyright':'Justify Right',
+        'justifycenter':'Justify Center',
+        'justifyjustify':'Default',
+        'deletetable':"Delete table",
+        'insertparagraphbefore':"InsertedBeforeLine",
+        'insertparagraphafter':'InsertedAfterLine',
+        'inserttable':'Insert table',
+        'insertcaption':'Insert caption',
+        'deletecaption':'Delete Caption',
+        'inserttitle':'Insert Title',
+        'deletetitle':'Delete Title',
+        'inserttitlecol':'Insert Title Col',
+        'deletetitlecol':'Delete Title Col',
+        'averageDiseRow':'AverageDise Row',
+        'averageDisCol':'AverageDis Col',
+        'deleterow':"Delete row",
+        'deletecol':"Delete col",
+        'insertrow':"Insert row",
+        'insertcol':"Insert col",
+        'insertrownext':'Insert Row Next',
+        'insertcolnext':'Insert Col Next',
+        'mergeright':"Merge right",
+        'mergeleft':"Merge left",
+        'mergedown':"Merge down",
+        'mergecells':"Merge cells",
+        'splittocells':"Split to cells",
+        'splittocols':"Split to Cols",
+        'splittorows':"Split to Rows",
+        'tablesort':'Table sorting',
+        'enablesort':'Sorting Enable',
+        'disablesort':'Sorting Disable',
+        'reversecurrent':'Reverse current',
+        'orderbyasc':'Order By ASCII',
+        'reversebyasc':'Reverse By ASCII',
+        'orderbynum':'Order By Num',
+        'reversebynum':'Reverse By Num',
+        'borderbk':'Border shading',
+        'setcolor':'interlaced color',
+        'unsetcolor':'Cancel interlacedcolor',
+        'setbackground':'Background interlaced',
+        'unsetbackground':'Cancel Bk interlaced',
+        'redandblue':'Blue and red',
+        'threecolorgradient':'Three-color gradient',
+        'copy':"Copy(Ctrl + c)",
+        'copymsg':"Browser does not support. Please use 'Ctrl + c' instead!",
+        'paste':"Paste(Ctrl + v)",
+        'pastemsg':"Browser does not support. Please use 'Ctrl + v' instead!"
+    },
+    'copymsg': "Browser does not support. Please use 'Ctrl + c' instead!",
+    'pastemsg': "Browser does not support. Please use 'Ctrl + v' instead!",
+    'anchorMsg':"Link",
+    'clearColor':'Clear',
+    'standardColor':'Standard color',
+    'themeColor':'Theme color',
+    'property':'Property',
+    'default':'Default',
+    'modify':'Modify',
+    'save':'Save',
+    'formulaedit':'FormulaEdit',
+    'justifyleft':'Justify Left',
+    'justifyright':'Justify Right',
+    'justifycenter':'Justify Center',
+    'justify':'Default',
+    'clear':'Clear',
+    'delete':'Delete',
+    'clickToUpload':"Click to upload",
+    'unset':'Language hasn\'t been set!',
+    't_row':'row',
+    't_col':'col',
+    'pasteOpt':'Paste Option',
+    'pasteSourceFormat':"Keep Source Formatting",
+    'tagFormat':'Keep tag',
+    'pasteTextFormat':'Keep Text only',
+    'more':'More',
+    'autoTypeSet':{
+        'mergeLine':"Merge empty line",
+        'delLine':"Del empty line",
+        'removeFormat':"Remove format",
+        'indent':"Indent",
+        'alignment':"Alignment",
+        'imageFloat':"Image float",
+        'removeFontsize':"Remove font size",
+        'removeFontFamily':"Remove fontFamily",
+        'removeHtml':"Remove redundant HTML code",
+        'pasteFilter':"Paste filter",
+        'run':"Done",
+        'symbol':'Symbol Conversion',
+        'bdc2sb':'Full-width to Half-width',
+        'tobdc':'Half-width to Full-width'
+    },
+
+    'background':{
+        'static':{
+            'lang_background_normal':'Normal',
+            'lang_background_local':'Online',
+            'lang_background_set':'Background Set',
+            'lang_background_none':'No Background',
+            'lang_background_colored':'Colored Background',
+            'lang_background_color':'Color Set',
+            'lang_background_netimg':'Net-Image',
+            'lang_background_align':'Align Type',
+            'lang_background_position':'Position',
+            'repeatType':{'options':["Center", "Repeat-x", "Repeat-y", "Tile","Custom"]}
+        },
+        'noUploadImage':"No pictures has been uploaded！",
+        'toggleSelect':'Change the active state by click!\n Image Size: '
+    },
+    //===============dialog i18N=======================
+    'insertimage':{
+        'static':{
+            'lang_tab_remote':"Insert",
+            'lang_tab_upload':"Local",
+            'lang_tab_online':"Manager",
+            'lang_tab_search':"Search",
+            'lang_input_url':"Address:",
+            'lang_input_size':"Size:",
+            'lang_input_width':"Width",
+            'lang_input_height':"Height",
+            'lang_input_border':"Border:",
+            'lang_input_vhspace':"Margins:",
+            'lang_input_title':"Title:",
+            'lang_input_align':'Image Float Style:',
+            'lang_imgLoading':"Loading...",
+            'lang_start_upload':"Start Upload",
+            'lock':{'title':"Lock rate"},
+            'searchType':{'title':"ImageType", 'options':["News", "Wallpaper", "emotions", "photo"]},
+            'searchTxt':{'value':"Enter the search keyword!"},
+            'searchBtn':{'value':"Search"},
+            'searchReset':{'value':"Clear"},
+            'noneAlign':{'title':'None Float'},
+            'leftAlign':{'title':'Left Float'},
+            'rightAlign':{'title':'Right Float'},
+            'centerAlign':{'title':'Center In A Line'}
+        },
+        'uploadSelectFile':'Select File',
+        'uploadAddFile':'Add File',
+        'uploadStart':'Start Upload',
+        'uploadPause':'Pause Upload',
+        'uploadContinue':'Continue Upload',
+        'uploadRetry':'Retry Upload',
+        'uploadDelete':'Delete',
+        'uploadTurnLeft':'Turn Left',
+        'uploadTurnRight':'Turn Right',
+        'uploadPreview':'Doing Preview',
+        'uploadNoPreview':'Can Not Preview',
+        'updateStatusReady': 'Selected _ pictures, total _KB.',
+        'updateStatusConfirm': '_ uploaded successfully and _ upload failed',
+        'updateStatusFinish': 'Total _ pictures (_KB), _  uploaded successfully',
+        'updateStatusError': ' and _ upload failed',
+        'errorNotSupport': 'WebUploader does not support the browser you are using. Please upgrade your browser or flash player',
+        'errorLoadConfig': 'Server config not loaded, upload can not work.',
+        'errorExceedSize':'File Size Exceed',
+        'errorFileType':'File Type Not Allow',
+        'errorInterrupt':'File Upload Interrupted',
+        'errorUploadRetry':'Upload Error, Please Retry.',
+        'errorHttp':'Http Error',
+        'errorServerUpload':'Server Result Error.',
+        'remoteLockError':"Cannot Lock the Proportion between width and height",
+        'numError':"Please enter the correct Num. e.g 123,400",
+        'imageUrlError':"The image format may be wrong!",
+        'imageLoadError':"Error,please check the network or URL！",
+        'searchRemind':"Enter the search keyword!",
+        'searchLoading':"Image is loading,please wait...",
+        'searchRetry':" Sorry,can't find the image,please try again!"
+    },
+    'attachment':{
+        'static':{
+            'lang_tab_upload': 'Upload',
+            'lang_tab_online': 'Online',
+            'lang_start_upload':"Start upload",
+            'lang_drop_remind':"You can drop files here, a single maximum of 300 files"
+        },
+        'uploadSelectFile':'Select File',
+        'uploadAddFile':'Add File',
+        'uploadStart':'Start Upload',
+        'uploadPause':'Pause Upload',
+        'uploadContinue':'Continue Upload',
+        'uploadRetry':'Retry Upload',
+        'uploadDelete':'Delete',
+        'uploadTurnLeft':'Turn Left',
+        'uploadTurnRight':'Turn Right',
+        'uploadPreview':'Doing Preview',
+        'updateStatusReady': 'Selected _ files, total _KB.',
+        'updateStatusConfirm': '_ uploaded successfully and _ upload failed',
+        'updateStatusFinish': 'Total _ files (_KB), _  uploaded successfully',
+        'updateStatusError': ' and _ upload failed',
+        'errorNotSupport': 'WebUploader does not support the browser you are using. Please upgrade your browser or flash player',
+        'errorLoadConfig': 'Server config not loaded, upload can not work.',
+        'errorExceedSize':'File Size Exceed',
+        'errorFileType':'File Type Not Allow',
+        'errorInterrupt':'File Upload Interrupted',
+        'errorUploadRetry':'Upload Error, Please Retry.',
+        'errorHttp':'Http Error',
+        'errorServerUpload':'Server Result Error.'
+    },
+
+    'insertvideo':{
+        'static':{
+            'lang_tab_insertV':"Video",
+            'lang_tab_searchV':"Search",
+            'lang_tab_uploadV':"Upload",
+            'lang_video_url':" URL ",
+            'lang_video_size':"Video Size",
+            'lang_videoW':"Width",
+            'lang_videoH':"Height",
+            'lang_alignment':"Alignment",
+            'videoSearchTxt':{'value':"Enter the search keyword!"},
+            'videoType':{'options':["All", "Hot", "Entertainment", "Funny", "Sports", "Science", "variety"]},
+            'videoSearchBtn':{'value':"Search in Baidu"},
+            'videoSearchReset':{'value':"Clear result"},
+
+            'lang_input_fileStatus':' No file uploaded!',
+            'startUpload':{'style':"background:url(upload.png) no-repeat;"},
+
+            'lang_upload_size':"Video Size",
+            'lang_upload_width':"Width",
+            'lang_upload_height':"Height",
+            'lang_upload_alignment':"Alignment",
+            'lang_format_advice':"Recommends mp4 format."
+        },
+        'numError':"Please enter the correct Num. e.g 123,400",
+        'floatLeft':"Float left",
+        'floatRight':"Float right",
+        'default':"Default",
+        'block':"Display in block",
+        'urlError':"The video url format may be wrong!",
+        'loading':" &nbsp;The video is loading, please wait…",
+        'clickToSelect':"Click to select",
+        'goToSource':'Visit source video ',
+        'noVideo':" &nbsp; &nbsp;Sorry,can't find the video,please try again!",
+
+        'browseFiles':'Open files',
+        'uploadSuccess':'Upload Successful!',
+        'delSuccessFile':'Remove from the success of the queue',
+        'delFailSaveFile':'Remove the save failed file',
+        'statusPrompt':' file(s) uploaded! ',
+        'flashVersionError':'The current Flash version is too low, please update FlashPlayer,then try again!',
+        'flashLoadingError':'The Flash failed loading! Please check the path or network state',
+        'fileUploadReady':'Wait for uploading...',
+        'delUploadQueue':'Remove from the uploading queue ',
+        'limitPrompt1':'Can not choose more than single',
+        'limitPrompt2':'file(s)！Please choose again！',
+        'delFailFile':'Remove failure file',
+        'fileSizeLimit':'File size exceeds the limit！',
+        'emptyFile':'Can not upload an empty file！',
+        'fileTypeError':'File type error！',
+        'unknownError':'Unknown error！',
+        'fileUploading':'Uploading,please wait...',
+        'cancelUpload':'Cancel upload',
+        'netError':'Network error',
+        'failUpload':'Upload failed',
+        'serverIOError':'Server IO error！',
+        'noAuthority':'No Permission！',
+        'fileNumLimit':'Upload limit to the number',
+        'failCheck':'Authentication fails, the upload is skipped!',
+        'fileCanceling':'Cancel, please wait...',
+        'stopUploading':'Upload has stopped...',
+
+        'uploadSelectFile':'Select File',
+        'uploadAddFile':'Add File',
+        'uploadStart':'Start Upload',
+        'uploadPause':'Pause Upload',
+        'uploadContinue':'Continue Upload',
+        'uploadRetry':'Retry Upload',
+        'uploadDelete':'Delete',
+        'uploadTurnLeft':'Turn Left',
+        'uploadTurnRight':'Turn Right',
+        'uploadPreview':'Doing Preview',
+        'updateStatusReady': 'Selected _ files, total _KB.',
+        'updateStatusConfirm': '_ uploaded successfully and _ upload failed',
+        'updateStatusFinish': 'Total _ files (_KB), _  uploaded successfully',
+        'updateStatusError': ' and _ upload failed',
+        'errorNotSupport': 'WebUploader does not support the browser you are using. Please upgrade your browser or flash player',
+        'errorLoadConfig': 'Server config not loaded, upload can not work.',
+        'errorExceedSize':'File Size Exceed',
+        'errorFileType':'File Type Not Allow',
+        'errorInterrupt':'File Upload Interrupted',
+        'errorUploadRetry':'Upload Error, Please Retry.',
+        'errorHttp':'Http Error',
+        'errorServerUpload':'Server Result Error.'
+    },
+    'template':{
+        'static':{
+            'lang_template_bkcolor':'Background Color',
+            'lang_template_clear' : 'Keep Content',
+            'lang_template_select':'Select Template'
+        },
+        'blank':"Blank",
+        'blog':"Blog",
+        'resume':"Resume",
+        'richText':"Rich Text",
+        'scrPapers':"Scientific Papers"
+    },
+    scrawl:{
+        'static':{
+            'lang_input_previousStep':"Previous",
+            'lang_input_nextsStep':"Next",
+            'lang_input_clear':'Clear',
+            'lang_input_addPic':'AddImage',
+            'lang_input_ScalePic':'ScaleImage',
+            'lang_input_removePic':'RemoveImage',
+            'J_imgTxt':{title:'Add background image'}
+        },
+        'noScarwl':"No paint, a white paper...",
+        'scrawlUpLoading':"Image is uploading, please wait...",
+        'continueBtn':"Try again",
+        'imageError':"Image failed to load!",
+        'backgroundUploading':'Image is uploading,please wait...'
+    },
+    anchor:{
+        'static':{
+            'lang_input_anchorName':'Anchor Name:'
+        }
+    },
+    emotion:{
+        'static':{
+            'lang_input_choice':'Choice',
+            'lang_input_Tuzki':'Tuzki',
+            'lang_input_lvdouwa':'LvDouWa',
+            'lang_input_BOBO':'BOBO',
+            'lang_input_babyCat':'BabyCat',
+            'lang_input_bubble':'Bubble',
+            'lang_input_youa':'YouA'
+        }
+    },
+    help:{
+        'static':{
+            'lang_input_about':'About UEditor Plus',
+            'lang_input_shortcuts':'Shortcuts',
+            'lang_input_introduction':"UEditor Plus is based on UEditor.",
+            'lang_Txt_shortcuts':'Shortcuts',
+            'lang_Txt_func':'Function',
+            'lang_Txt_bold':'Bold',
+            'lang_Txt_copy':'Copy',
+            'lang_Txt_cut':'Cut',
+            'lang_Txt_Paste':'Paste',
+            'lang_Txt_undo':'Undo',
+            'lang_Txt_redo':'Redo',
+            'lang_Txt_italic':'Italic',
+            'lang_Txt_underline':'Underline',
+            'lang_Txt_selectAll':'Select All',
+            'lang_Txt_visualEnter':'Submit',
+            'lang_Txt_fullscreen':'Fullscreen'
+        }
+    },
+    insertframe:{
+        'static':{
+            'lang_input_address':'Address：',
+            'lang_input_width':'Width：',
+            'lang_input_height':'height：',
+            'lang_input_isScroll':'Enable scrollbars：',
+            'lang_input_frameborder':'Show frame border：',
+            'lang_input_alignMode':'Alignment：',
+            'align':{title:"Alignment", options:["Default", "Left", "Right", "Center"]}
+        },
+        'enterAddress':'Please enter an address!'
+    },
+    link:{
+        'static':{
+            'lang_input_text':'Text：',
+            'lang_input_url':'URL：',
+            'lang_input_title':'Title：',
+            'lang_input_target':'open in new window：'
+        },
+        'validLink':'Supports only effective when a link is selected',
+        'httpPrompt':'The hyperlink you enter should start with "http|https|ftp://"!'
+    },
+    searchreplace:{
+        'static':{
+            lang_tab_search:"Search",
+            lang_tab_replace:"Replace",
+            lang_search1:"Search",
+            lang_search2:"Search",
+            lang_replace:"Replace",
+            lang_searchReg:'Support regular expression ,which starts and ends with a slash ,for example "/expression/"',
+            lang_searchReg1:'Support regular expression ,which starts and ends with a slash ,for example "/expression/"',
+            lang_case_sensitive1:"Case sense",
+            lang_case_sensitive2:"Case sense",
+            nextFindBtn:{value:"Next"},
+            preFindBtn:{value:"Preview"},
+            nextReplaceBtn:{value:"Next"},
+            preReplaceBtn:{value:"Preview"},
+            repalceBtn:{value:"Replace"},
+            repalceAllBtn:{value:"Replace all"}
+        },
+        getEnd:"Has the search to the bottom!",
+        getStart:"Has the search to the top!",
+        countMsg:"Altogether replaced {#count} character(s)!"
+    },
+    spechars:{
+        'static':{},
+        tsfh:"Special",
+        lmsz:"Roman",
+        szfh:"Numeral",
+        rwfh:"Japanese",
+        xlzm:"The Greek",
+        ewzm:"Russian",
+        pyzm:"Phonetic",
+        yyyb:"English",
+        zyzf:"Others"
+    },
+    'edittable':{
+        'static':{
+            'lang_tableStyle':'Table style',
+            'lang_insertCaption':'Add table header row',
+            'lang_insertTitle':'Add table title row',
+            'lang_insertTitleCol':'Add table title col',
+            'lang_tableSize':'Automatically adjust table size',
+            'lang_autoSizeContent':'Adaptive by form text',
+            'lang_orderbycontent':"Table of contents sortable",
+            'lang_autoSizePage':'Page width adaptive',
+            'lang_example':'Example',
+            'lang_borderStyle':'Table Border',
+            'lang_color':'Color:'
+        },
+        captionName:'Caption',
+        titleName:'Title',
+        cellsName:'text',
+        errorMsg:'There are merged cells, can not sort.'
+    },
+    'edittip':{
+        'static':{
+            lang_delRow:'Delete entire row',
+            lang_delCol:'Delete entire col'
+        }
+    },
+    'edittd':{
+        'static':{
+            lang_tdBkColor:'Background Color:'
+        }
+    },
+    'formula':{
+        'static':{
+        }
+    },
+    wordimage:{
+        'static':{
+            lang_resave:"The re-save step",
+            uploadBtn:{src:"upload.png", alt:"Upload"},
+            clipboard:{style:"background: url(copy.png) -153px -1px no-repeat;"},
+            lang_step:" 1. Click top button to copy the url and then open the dialog to paste it. 2. Open after choose photos uploaded process."
+        },
+        fileType:"Image",
+        flashError:"Flash initialization failed!",
+        netError:"Network error! Please try again!",
+        copySuccess:"URL has been copied!",
+
+        'flashI18n':{
+            lang:encodeURI( '{"UploadingState":"totalNum: ${a},uploadComplete: ${b}", "BeforeUpload":"waitingNum: ${a}", "ExceedSize":"Size exceed${a}", "ErrorInPreview":"Preview failed", "DefaultDescription":"Description", "LoadingImage":"Loading..."}' ),
+            uploadingTF:encodeURI( '{"font":"Arial", "size":12, "color":"0x000", "bold":"true", "italic":"false", "underline":"false"}' ),
+            imageTF:encodeURI( '{"font":"Arial", "size":11, "color":"red", "bold":"false", "italic":"false", "underline":"false"}' ),
+            textEncoding:"utf-8",
+            addImageSkinURL:"addImage.png",
+            allDeleteBtnUpSkinURL:"allDeleteBtnUpSkin.png",
+            allDeleteBtnHoverSkinURL:"allDeleteBtnHoverSkin.png",
+            rotateLeftBtnEnableSkinURL:"rotateLeftEnable.png",
+            rotateLeftBtnDisableSkinURL:"rotateLeftDisable.png",
+            rotateRightBtnEnableSkinURL:"rotateRightEnable.png",
+            rotateRightBtnDisableSkinURL:"rotateRightDisable.png",
+            deleteBtnEnableSkinURL:"deleteEnable.png",
+            deleteBtnDisableSkinURL:"deleteDisable.png",
+            backgroundURL:'',
+            listBackgroundURL:'',
+            buttonURL:'button.png'
+        }
+    },
+};
diff --git a/public/js/ueditor/lang/en/images/addimage.png b/public/js/ueditor/lang/en/images/addimage.png
new file mode 100644
index 0000000..3a2fd17
Binary files /dev/null and b/public/js/ueditor/lang/en/images/addimage.png differ
diff --git a/public/js/ueditor/lang/en/images/alldeletebtnhoverskin.png b/public/js/ueditor/lang/en/images/alldeletebtnhoverskin.png
new file mode 100644
index 0000000..355eeab
Binary files /dev/null and b/public/js/ueditor/lang/en/images/alldeletebtnhoverskin.png differ
diff --git a/public/js/ueditor/lang/en/images/alldeletebtnupskin.png b/public/js/ueditor/lang/en/images/alldeletebtnupskin.png
new file mode 100644
index 0000000..61658ce
Binary files /dev/null and b/public/js/ueditor/lang/en/images/alldeletebtnupskin.png differ
diff --git a/public/js/ueditor/lang/en/images/background.png b/public/js/ueditor/lang/en/images/background.png
new file mode 100644
index 0000000..d5bf5fd
Binary files /dev/null and b/public/js/ueditor/lang/en/images/background.png differ
diff --git a/public/js/ueditor/lang/en/images/button.png b/public/js/ueditor/lang/en/images/button.png
new file mode 100644
index 0000000..098874c
Binary files /dev/null and b/public/js/ueditor/lang/en/images/button.png differ
diff --git a/public/js/ueditor/lang/en/images/copy.png b/public/js/ueditor/lang/en/images/copy.png
new file mode 100644
index 0000000..f982e8b
Binary files /dev/null and b/public/js/ueditor/lang/en/images/copy.png differ
diff --git a/public/js/ueditor/lang/en/images/deletedisable.png b/public/js/ueditor/lang/en/images/deletedisable.png
new file mode 100644
index 0000000..c8ee750
Binary files /dev/null and b/public/js/ueditor/lang/en/images/deletedisable.png differ
diff --git a/public/js/ueditor/lang/en/images/deleteenable.png b/public/js/ueditor/lang/en/images/deleteenable.png
new file mode 100644
index 0000000..26acc88
Binary files /dev/null and b/public/js/ueditor/lang/en/images/deleteenable.png differ
diff --git a/public/js/ueditor/lang/en/images/listbackground.png b/public/js/ueditor/lang/en/images/listbackground.png
new file mode 100644
index 0000000..4f82ccd
Binary files /dev/null and b/public/js/ueditor/lang/en/images/listbackground.png differ
diff --git a/public/js/ueditor/lang/en/images/localimage.png b/public/js/ueditor/lang/en/images/localimage.png
new file mode 100644
index 0000000..dcecad4
Binary files /dev/null and b/public/js/ueditor/lang/en/images/localimage.png differ
diff --git a/public/js/ueditor/lang/en/images/music.png b/public/js/ueditor/lang/en/images/music.png
new file mode 100644
index 0000000..2f495fe
Binary files /dev/null and b/public/js/ueditor/lang/en/images/music.png differ
diff --git a/public/js/ueditor/lang/en/images/rotateleftdisable.png b/public/js/ueditor/lang/en/images/rotateleftdisable.png
new file mode 100644
index 0000000..741526e
Binary files /dev/null and b/public/js/ueditor/lang/en/images/rotateleftdisable.png differ
diff --git a/public/js/ueditor/lang/en/images/rotateleftenable.png b/public/js/ueditor/lang/en/images/rotateleftenable.png
new file mode 100644
index 0000000..e164ddb
Binary files /dev/null and b/public/js/ueditor/lang/en/images/rotateleftenable.png differ
diff --git a/public/js/ueditor/lang/en/images/rotaterightdisable.png b/public/js/ueditor/lang/en/images/rotaterightdisable.png
new file mode 100644
index 0000000..5a78c26
Binary files /dev/null and b/public/js/ueditor/lang/en/images/rotaterightdisable.png differ
diff --git a/public/js/ueditor/lang/en/images/rotaterightenable.png b/public/js/ueditor/lang/en/images/rotaterightenable.png
new file mode 100644
index 0000000..d768531
Binary files /dev/null and b/public/js/ueditor/lang/en/images/rotaterightenable.png differ
diff --git a/public/js/ueditor/lang/en/images/upload.png b/public/js/ueditor/lang/en/images/upload.png
new file mode 100644
index 0000000..7bb15b3
Binary files /dev/null and b/public/js/ueditor/lang/en/images/upload.png differ
diff --git a/public/js/ueditor/lang/zh-cn/images/copy.png b/public/js/ueditor/lang/zh-cn/images/copy.png
new file mode 100644
index 0000000..b2536aa
Binary files /dev/null and b/public/js/ueditor/lang/zh-cn/images/copy.png differ
diff --git a/public/js/ueditor/lang/zh-cn/images/localimage.png b/public/js/ueditor/lang/zh-cn/images/localimage.png
new file mode 100644
index 0000000..ba5f07a
Binary files /dev/null and b/public/js/ueditor/lang/zh-cn/images/localimage.png differ
diff --git a/public/js/ueditor/lang/zh-cn/images/music.png b/public/js/ueditor/lang/zh-cn/images/music.png
new file mode 100644
index 0000000..354edeb
Binary files /dev/null and b/public/js/ueditor/lang/zh-cn/images/music.png differ
diff --git a/public/js/ueditor/lang/zh-cn/images/upload.png b/public/js/ueditor/lang/zh-cn/images/upload.png
new file mode 100644
index 0000000..08d4d92
Binary files /dev/null and b/public/js/ueditor/lang/zh-cn/images/upload.png differ
diff --git a/public/js/ueditor/lang/zh-cn/zh-cn.js b/public/js/ueditor/lang/zh-cn/zh-cn.js
new file mode 100644
index 0000000..3d69545
--- /dev/null
+++ b/public/js/ueditor/lang/zh-cn/zh-cn.js
@@ -0,0 +1,593 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: taoqili
+ * Date: 12-6-12
+ * Time: 下午5:02
+ * To change this template use File | Settings | File Templates.
+ */
+UE.I18N['zh-cn'] = {
+    'labelMap':{
+        'anchor':'锚点', 'undo':'撤销', 'redo':'重做', 'bold':'加粗', 'indent':'首行缩进',
+        'italic':'斜体', 'underline':'下划线', 'strikethrough':'删除线', 'subscript':'下标','fontborder':'字符边框',
+        'superscript':'上标', 'formatmatch':'格式刷', 'source':'源代码', 'blockquote':'引用',
+        'pasteplain':'纯文本粘贴模式', 'selectall':'全选', 'print':'打印', 'preview':'预览',
+        'horizontal':'分隔线', 'removeformat':'清除格式', 'time':'时间', 'date':'日期',
+        'unlink':'取消链接', 'insertrow':'前插入行', 'insertcol':'前插入列', 'mergeright':'右合并单元格', 'mergedown':'下合并单元格',
+        'deleterow':'删除行', 'deletecol':'删除列', 'splittorows':'拆分成行',
+        'splittocols':'拆分成列', 'splittocells':'完全拆分单元格','deletecaption':'删除表格标题','inserttitle':'插入标题',
+        'mergecells':'合并多个单元格', 'deletetable':'删除表格', 'cleardoc':'清空文档','insertparagraphbeforetable':"表格前插入行",'insertcode':'代码语言',
+        'fontfamily':'字体', 'fontsize':'字号', 'paragraph':'段落格式', 'simpleupload':'单图上传', 'insertimage':'插入图片','edittable':'表格属性','edittd':'单元格属性', 'link':'超链接',
+        'emotion':'表情', 'spechars':'特殊字符', 'searchreplace':'查询替换',
+        'insertvideo':'视频', 'help':'帮助', 'justifyleft':'居左对齐', 'justifyright':'居右对齐', 'justifycenter':'居中对齐',
+        'justifyjustify':'两端对齐', 'forecolor':'字体颜色', 'backcolor':'背景色', 'insertorderedlist':'有序列表',
+        'insertunorderedlist':'无序列表', 'fullscreen':'全屏', 'directionalityltr':'从左向右输入', 'directionalityrtl':'从右向左输入',
+        'rowspacingtop':'段前距', 'rowspacingbottom':'段后距',  'pagebreak':'分页', 'insertframe':'插入Iframe', 'imagenone':'默认',
+        'imageleft':'左浮动', 'imageright':'右浮动', 'attachment':'附件', 'imagecenter':'居中', 'wordimage':'图片转存','formula':'公式',
+        'lineheight':'行间距','edittip' :'编辑提示','customstyle':'自定义标题', 'autotypeset':'自动排版',
+        'touppercase':'字母大写', 'tolowercase':'字母小写','background':'背景','template':'模板','scrawl':'涂鸦',
+        'inserttable':'插入表格',
+    },
+    'insertorderedlist':{
+        'num':'1,2,3...',
+        'num1':'1),2),3)...',
+        'num2':'(1),(2),(3)...',
+        'cn':'一,二,三....',
+        'cn1':'一),二),三)....',
+        'cn2':'(一),(二),(三)....',
+        'decimal':'1,2,3...',
+        'lower-alpha':'a,b,c...',
+        'lower-roman':'i,ii,iii...',
+        'upper-alpha':'A,B,C...',
+        'upper-roman':'I,II,III...'
+    },
+    'insertunorderedlist':{
+        'circle':'○ 大圆圈',
+        'disc':'● 小黑点',
+        'square':'■ 小方块 ',
+        'dash' :'— 破折号',
+        'dot':' 。 小圆圈'
+    },
+    'paragraph':{'p':'段落', 'h1':'标题 1', 'h2':'标题 2', 'h3':'标题 3', 'h4':'标题 4', 'h5':'标题 5', 'h6':'标题 6'},
+    'fontfamily':{
+        'songti':'宋体',
+        'kaiti':'楷体',
+        'heiti':'黑体',
+        'lishu':'隶书',
+        'yahei':'微软雅黑',
+        'andaleMono':'andale mono',
+        'arial': 'arial',
+        'arialBlack':'arial black',
+        'comicSansMs':'comic sans ms',
+        'impact':'impact',
+        'timesNewRoman':'times new roman'
+    },
+    'customstyle':{
+        'tc':'标题居中',
+        'tl':'标题居左',
+        'im':'强调',
+        'hi':'明显强调'
+    },
+    'autoupload': {
+        'exceedSizeError': '文件大小超出限制',
+        'exceedTypeError': '文件格式不允许',
+        'jsonEncodeError': '服务器返回格式错误',
+        'loading':"正在上传...",
+        'loadError':"上传错误",
+        'errorLoadConfig': '后端配置项没有正常加载，上传插件不能正常使用！'
+    },
+    'simpleupload':{
+        'exceedSizeError': '文件大小超出限制',
+        'exceedTypeError': '文件格式不允许',
+        'jsonEncodeError': '服务器返回格式错误',
+        'loading':"正在上传...",
+        'loadError':"上传错误",
+        'errorLoadConfig': '后端配置项没有正常加载，上传插件不能正常使用！'
+    },
+    'elementPathTip':"元素路径",
+    'wordCountTip':"字数统计",
+    'wordCountMsg':'当前已输入{#count}个字符, 您还可以输入{#leave}个字符。 ',
+    'wordOverFlowMsg':'<span style="color:red;">字数超出最大允许值，服务器可能拒绝保存！</span>',
+    'ok':"确认",
+    'cancel':"取消",
+    'closeDialog':"关闭对话框",
+    'tableDrag':"表格拖动必须引入uiUtils.js文件！",
+    'autofloatMsg':"工具栏浮动依赖编辑器UI，您首先需要引入UI文件!",
+    'loadconfigError': '获取后台配置项请求出错，上传功能将不能正常使用！',
+    'loadconfigFormatError': '后台配置项返回格式出错，上传功能将不能正常使用！',
+    'loadconfigHttpError': '请求后台配置项http错误，上传功能将不能正常使用！',
+    'insertcode':{
+        'as3':'ActionScript 3',
+        'bash':'Bash/Shell',
+        'cpp':'C/C++',
+        'css':'CSS',
+        'cf':'ColdFusion',
+        'c#':'C#',
+        'delphi':'Delphi',
+        'diff':'Diff',
+        'erlang':'Erlang',
+        'groovy':'Groovy',
+        'html':'HTML',
+        'java':'Java',
+        'jfx':'JavaFX',
+        'js':'JavaScript',
+        'pl':'Perl',
+        'php':'PHP',
+        'plain':'Plain Text',
+        'ps':'PowerShell',
+        'python':'Python',
+        'ruby':'Ruby',
+        'scala':'Scala',
+        'sql':'SQL',
+        'vb':'Visual Basic',
+        'xml':'XML'
+    },
+    'confirmClear':"确定清空当前文档么？",
+    'contextMenu':{
+        'delete':"删除",
+        'selectall':"全选",
+        'deletecode':"删除代码",
+        'cleardoc':"清空文档",
+        'confirmclear':"确定清空当前文档么？",
+        'unlink':"删除超链接",
+        'paragraph':"段落格式",
+        'edittable':"表格属性",
+        'aligntd':"单元格对齐方式",
+        'aligntable':'表格对齐方式',
+        'tableleft':'左浮动',
+        'tablecenter':'居中显示',
+        'tableright':'右浮动',
+        'edittd':"单元格属性",
+        'setbordervisible':'设置表格边线可见',
+        'justifyleft':'左对齐',
+        'justifyright':'右对齐',
+        'justifycenter':'居中对齐',
+        'justifyjustify':'两端对齐',
+        'table':"表格",
+        'inserttable':'插入表格',
+        'deletetable':"删除表格",
+        'insertparagraphbefore':"前插入段落",
+        'insertparagraphafter':'后插入段落',
+        'deleterow':"删除当前行",
+        'deletecol':"删除当前列",
+        'insertrow':"前插入行",
+        'insertcol':"左插入列",
+        'insertrownext':'后插入行',
+        'insertcolnext':'右插入列',
+        'insertcaption':'插入表格名称',
+        'deletecaption':'删除表格名称',
+        'inserttitle':'插入表格标题行',
+        'deletetitle':'删除表格标题行',
+        'inserttitlecol':'插入表格标题列',
+        'deletetitlecol':'删除表格标题列',
+        'averageDiseRow':'平均分布各行',
+        'averageDisCol':'平均分布各列',
+        'mergeright':"向右合并",
+        'mergeleft':"向左合并",
+        'mergedown':"向下合并",
+        'mergecells':"合并单元格",
+        'splittocells':"完全拆分单元格",
+        'splittocols':"拆分成列",
+        'splittorows':"拆分成行",
+        'tablesort':'表格排序',
+        'enablesort':'设置表格可排序',
+        'disablesort':'取消表格可排序',
+        'reversecurrent':'逆序当前',
+        'orderbyasc':'按ASCII字符升序',
+        'reversebyasc':'按ASCII字符降序',
+        'orderbynum':'按数值大小升序',
+        'reversebynum':'按数值大小降序',
+        'borderbk':'边框底纹',
+        'setcolor':'表格隔行变色',
+        'unsetcolor':'取消表格隔行变色',
+        'setbackground':'选区背景隔行',
+        'unsetbackground':'取消选区背景',
+        'redandblue':'红蓝相间',
+        'threecolorgradient':'三色渐变',
+        'copy':"复制(Ctrl + c)",
+        'copymsg': "浏览器不支持,请使用 'Ctrl + c'",
+        'paste':"粘贴(Ctrl + v)",
+         'pastemsg': "浏览器不支持,请使用 'Ctrl + v'"
+    },
+    'copymsg': "浏览器不支持,请使用 'Ctrl + c'",
+    'pastemsg': "浏览器不支持,请使用 'Ctrl + v'",
+    'anchorMsg':"链接",
+    'clearColor':'清空颜色',
+    'standardColor':'标准颜色',
+    'themeColor':'主题颜色',
+    'property':'属性',
+    'default':'默认',
+    'modify':'修改',
+    'save':'保存',
+    'formulaedit':'公式修改',
+    'justifyleft':'左对齐',
+    'justifyright':'右对齐',
+    'justifycenter':'居中',
+    'justify':'默认',
+    'clear':'清除',
+    'delete':'删除',
+    'clickToUpload':"点击上传",
+    'unset':'尚未设置语言文件',
+    't_row':'行',
+    't_col':'列',
+    'more':'更多',
+    'pasteOpt':'粘贴选项',
+    'pasteSourceFormat':"保留源格式",
+    'tagFormat':'只保留标签',
+    'pasteTextFormat':'只保留文本',
+    'autoTypeSet':{
+        'mergeLine':"合并空行",
+        'delLine':"清除空行",
+        'removeFormat':"清除格式",
+        'indent':"首行缩进",
+        'alignment':"对齐方式",
+        'imageFloat':"图片浮动",
+        'removeFontsize':"清除字号",
+        'removeFontFamily':"清除字体",
+        'removeHtml':"清除冗余HTML代码",
+        'pasteFilter':"粘贴过滤",
+        'run':"执行",
+        'symbol':'符号转换',
+        'bdc2sb':'全角转半角',
+        'tobdc':'半角转全角'
+    },
+
+    'background':{
+        'static':{
+            'lang_background_normal':'背景设置',
+            'lang_background_local':'在线图片',
+            'lang_background_set':'选项',
+            'lang_background_none':'无背景色',
+            'lang_background_colored':'有背景色',
+            'lang_background_color':'颜色设置',
+            'lang_background_netimg':'网络图片',
+            'lang_background_align':'对齐方式',
+            'lang_background_position':'精确定位',
+            'repeatType':{'options':["居中", "横向重复", "纵向重复", "平铺","自定义"]}
+
+        },
+        'noUploadImage':"当前未上传过任何图片！",
+        'toggleSelect':"单击可切换选中状态\n原图尺寸: "
+    },
+    //===============dialog i18N=======================
+    'insertimage':{
+        'static':{
+            'lang_tab_remote':"插入图片", //节点
+            'lang_tab_upload':"本地上传",
+            'lang_tab_online':"在线管理",
+            'lang_input_url':"地 址：",
+            'lang_input_size':"大 小：",
+            'lang_input_width':"宽度",
+            'lang_input_height':"高度",
+            'lang_input_border':"边 框：",
+            'lang_input_vhspace':"边 距：",
+            'lang_input_title':"描 述：",
+            'lang_input_align':'图片浮动方式：',
+            'lang_imgLoading':"　图片加载中……",
+            'lang_start_upload':"开始上传",
+            'lock':{'title':"锁定宽高比例"}, //属性
+            'searchType':{'title':"图片类型", 'options':["新闻", "壁纸", "表情", "头像"]}, //select的option
+            'searchTxt':{'value':"请输入搜索关键词"},
+            'searchBtn':{'value':"百度一下"},
+            'searchReset':{'value':"清空搜索"},
+            'noneAlign':{'title':'无浮动'},
+            'leftAlign':{'title':'左浮动'},
+            'rightAlign':{'title':'右浮动'},
+            'centerAlign':{'title':'居中独占一行'}
+        },
+        'uploadSelectFile':'点击选择图片',
+        'uploadAddFile':'继续添加',
+        'uploadStart':'开始上传',
+        'uploadPause':'暂停上传',
+        'uploadContinue':'继续上传',
+        'uploadRetry':'重试上传',
+        'uploadDelete':'删除',
+        'uploadTurnLeft':'向左旋转',
+        'uploadTurnRight':'向右旋转',
+        'uploadPreview':'预览中',
+        'uploadNoPreview':'不能预览',
+        'updateStatusReady': '选中_张图片，共_KB。',
+        'updateStatusConfirm': '已成功上传_张照片，_张照片上传失败',
+        'updateStatusFinish': '共_张（_KB），_张上传成功',
+        'updateStatusError': '，_张上传失败。',
+        'errorNotSupport': 'WebUploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器。',
+        'errorLoadConfig': '后端配置项没有正常加载，上传插件不能正常使用！',
+        'errorExceedSize':'文件大小超出',
+        'errorFileType':'文件格式不允许',
+        'errorInterrupt':'文件传输中断',
+        'errorUploadRetry':'上传失败，请重试',
+        'errorHttp':'http请求错误',
+        'errorServerUpload':'服务器返回出错',
+        'remoteLockError':"宽高不正确,不能所定比例",
+        'numError':"请输入正确的长度或者宽度值！例如：123，400",
+        'imageUrlError':"不允许的图片格式或者图片域！",
+        'imageLoadError':"图片加载失败！请检查链接地址或网络状态！",
+        'searchRemind':"请输入搜索关键词",
+        'searchLoading':"图片加载中，请稍后……",
+        'searchRetry':" :( ，抱歉，没有找到图片！请重试一次！"
+    },
+    'attachment':{
+        'static':{
+            'lang_tab_upload': '上传附件',
+            'lang_tab_online': '在线附件',
+            'lang_start_upload':"开始上传",
+            'lang_drop_remind':"可以将文件拖到这里，单次最多可选100个文件"
+        },
+        'uploadSelectFile':'点击选择文件',
+        'uploadAddFile':'继续添加',
+        'uploadStart':'开始上传',
+        'uploadPause':'暂停上传',
+        'uploadContinue':'继续上传',
+        'uploadRetry':'重试上传',
+        'uploadDelete':'删除',
+        'uploadTurnLeft':'向左旋转',
+        'uploadTurnRight':'向右旋转',
+        'uploadPreview':'预览中',
+        'updateStatusReady': '选中_个文件，共_KB。',
+        'updateStatusConfirm': '已成功上传_个文件，_个文件上传失败',
+        'updateStatusFinish': '共_个（_KB），_个上传成功',
+        'updateStatusError': '，_张上传失败。',
+        'errorNotSupport': 'WebUploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器。',
+        'errorLoadConfig': '后端配置项没有正常加载，上传插件不能正常使用！',
+        'errorExceedSize':'文件大小超出',
+        'errorFileType':'文件格式不允许',
+        'errorInterrupt':'文件传输中断',
+        'errorUploadRetry':'上传失败，请重试',
+        'errorHttp':'http请求错误',
+        'errorServerUpload':'服务器返回出错'
+    },
+    'insertvideo':{
+        'static':{
+            'lang_tab_insertV':"插入视频",
+            'lang_tab_searchV':"搜索视频",
+            'lang_tab_uploadV':"上传视频",
+            'lang_video_url':"视频网址",
+            'lang_video_size':"视频尺寸",
+            'lang_videoW':"宽度",
+            'lang_videoH':"高度",
+            'lang_alignment':"对齐方式",
+            'videoSearchTxt':{'value':"请输入搜索关键字！"},
+            'videoType':{'options':["全部", "热门", "娱乐", "搞笑", "体育", "科技", "综艺"]},
+            'videoSearchBtn':{'value':"百度一下"},
+            'videoSearchReset':{'value':"清空结果"},
+
+            'lang_input_fileStatus':' 当前未上传文件',
+            'startUpload':{'style':"background:url(upload.png) no-repeat;"},
+
+            'lang_upload_size':"视频尺寸",
+            'lang_upload_width':"宽度",
+            'lang_upload_height':"高度",
+            'lang_upload_alignment':"对齐方式",
+            'lang_format_advice':"建议使用mp4格式."
+
+        },
+        'numError':"请输入正确的数值，如123,400",
+        'floatLeft':"左浮动",
+        'floatRight':"右浮动",
+        '"default"':"默认",
+        'block':"独占一行",
+        'urlError':"输入的视频地址有误，请检查后再试！",
+        'loading':" &nbsp;视频加载中，请等待……",
+        'clickToSelect':"点击选中",
+        'goToSource':'访问源视频',
+        'noVideo':" &nbsp; &nbsp;抱歉，找不到对应的视频，请重试！",
+
+        'browseFiles':'浏览文件',
+        'uploadSuccess':'上传成功!',
+        'delSuccessFile':'从成功队列中移除',
+        'delFailSaveFile':'移除保存失败文件',
+        'statusPrompt':' 个文件已上传！ ',
+        'flashVersionError':'当前Flash版本过低，请更新FlashPlayer后重试！',
+        'flashLoadingError':'Flash加载失败!请检查路径或网络状态',
+        'fileUploadReady':'等待上传……',
+        'delUploadQueue':'从上传队列中移除',
+        'limitPrompt1':'单次不能选择超过',
+        'limitPrompt2':'个文件！请重新选择！',
+        'delFailFile':'移除失败文件',
+        'fileSizeLimit':'文件大小超出限制！',
+        'emptyFile':'空文件无法上传！',
+        'fileTypeError':'文件类型不允许！',
+        'unknownError':'未知错误！',
+        'fileUploading':'上传中，请等待……',
+        'cancelUpload':'取消上传',
+        'netError':'网络错误',
+        'failUpload':'上传失败!',
+        'serverIOError':'服务器IO错误！',
+        'noAuthority':'无权限！',
+        'fileNumLimit':'上传个数限制',
+        'failCheck':'验证失败，本次上传被跳过！',
+        'fileCanceling':'取消中，请等待……',
+        'stopUploading':'上传已停止……',
+
+        'uploadSelectFile':'点击选择文件',
+        'uploadAddFile':'继续添加',
+        'uploadStart':'开始上传',
+        'uploadPause':'暂停上传',
+        'uploadContinue':'继续上传',
+        'uploadRetry':'重试上传',
+        'uploadDelete':'删除',
+        'uploadTurnLeft':'向左旋转',
+        'uploadTurnRight':'向右旋转',
+        'uploadPreview':'预览中',
+        'updateStatusReady': '选中_个文件，共_KB。',
+        'updateStatusConfirm': '成功上传_个，_个失败',
+        'updateStatusFinish': '共_个(_KB)，_个成功上传',
+        'updateStatusError': '，_张上传失败。',
+        'errorNotSupport': 'WebUploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器。',
+        'errorLoadConfig': '后端配置项没有正常加载，上传插件不能正常使用！',
+        'errorExceedSize':'文件大小超出',
+        'errorFileType':'文件格式不允许',
+        'errorInterrupt':'文件传输中断',
+        'errorUploadRetry':'上传失败，请重试',
+        'errorHttp':'http请求错误',
+        'errorServerUpload':'服务器返回出错'
+    },
+    'template':{
+        'static':{
+            'lang_template_bkcolor':'背景颜色',
+            'lang_template_clear' : '保留原有内容',
+            'lang_template_select' : '选择模板'
+        },
+        'blank':"空白文档",
+        'blog':"博客文章",
+        'resume':"个人简历",
+        'richText':"图文混排",
+        'sciPapers':"科技论文"
+
+
+    },
+    'scrawl':{
+        'static':{
+            'lang_input_previousStep':"上一步",
+            'lang_input_nextsStep':"下一步",
+            'lang_input_clear':'清空',
+            'lang_input_addPic':'添加背景',
+            'lang_input_ScalePic':'缩放背景',
+            'lang_input_removePic':'删除背景',
+            'J_imgTxt':{title:'添加背景图片'}
+        },
+        'noScarwl':"尚未作画，白纸一张~",
+        'scrawlUpLoading':"涂鸦上传中,别急哦~",
+        'continueBtn':"继续",
+        'imageError':"糟糕，图片读取失败了！",
+        'backgroundUploading':'背景图片上传中,别急哦~'
+    },
+    'anchor':{
+        'static':{
+            'lang_input_anchorName':'锚点名字：'
+        }
+    },
+    'emotion':{
+        'static':{
+            'lang_input_choice':'精选',
+            'lang_input_Tuzki':'兔斯基',
+            'lang_input_BOBO':'BOBO',
+            'lang_input_lvdouwa':'绿豆蛙',
+            'lang_input_babyCat':'baby猫',
+            'lang_input_bubble':'泡泡',
+            'lang_input_youa':'有啊'
+        }
+    },
+    'help':{
+        'static':{
+            'lang_input_about':'关于 UEditor Plus',
+            'lang_input_shortcuts':'快捷键',
+            'lang_input_introduction':'UEditor Plus 是基于百度UEditor二次开发的所见即所得富文本web编辑器，主要丰富也界面样式，注重用户体验等特点。基于Apache 2.0协议开源，允许自由使用和修改代码。',
+            'lang_Txt_shortcuts':'快捷键',
+            'lang_Txt_func':'功能',
+            'lang_Txt_bold':'给选中字设置为加粗',
+            'lang_Txt_copy':'复制选中内容',
+            'lang_Txt_cut':'剪切选中内容',
+            'lang_Txt_Paste':'粘贴',
+            'lang_Txt_undo':'重新执行上次操作',
+            'lang_Txt_redo':'撤销上一次操作',
+            'lang_Txt_italic':'给选中字设置为斜体',
+            'lang_Txt_underline':'给选中字加下划线',
+            'lang_Txt_selectAll':'全部选中',
+            'lang_Txt_visualEnter':'软回车',
+            'lang_Txt_fullscreen':'全屏'
+        }
+    },
+    'insertframe':{
+        'static':{
+            'lang_input_address':'地址：',
+            'lang_input_width':'宽度：',
+            'lang_input_height':'高度：',
+            'lang_input_isScroll':'允许滚动条：',
+            'lang_input_frameborder':'显示框架边框：',
+            'lang_input_alignMode':'对齐方式：',
+            'align':{title:"对齐方式", options:["默认", "左对齐", "右对齐", "居中"]}
+        },
+        'enterAddress':'请输入地址!'
+    },
+    'link':{
+        'static':{
+            'lang_input_text':'文本内容：',
+            'lang_input_url':'链接地址：',
+            'lang_input_title':'标题：',
+            'lang_input_target':'是否在新窗口打开：'
+        },
+        'validLink':'只支持选中一个链接时生效',
+        'httpPrompt':'您输入的超链接中不包含http等协议名称，默认将为您添加http://前缀'
+    },
+    'searchreplace':{
+        'static':{
+            lang_tab_search:"查找",
+            lang_tab_replace:"替换",
+            lang_search1:"查找",
+            lang_search2:"查找",
+            lang_replace:"替换",
+            lang_searchReg:'支持正则表达式，添加前后斜杠标示为正则表达式，例如“/表达式/”',
+            lang_searchReg1:'支持正则表达式，添加前后斜杠标示为正则表达式，例如“/表达式/”',
+            lang_case_sensitive1:"区分大小写",
+            lang_case_sensitive2:"区分大小写",
+            nextFindBtn:{value:"下一个"},
+            preFindBtn:{value:"上一个"},
+            nextReplaceBtn:{value:"下一个"},
+            preReplaceBtn:{value:"上一个"},
+            repalceBtn:{value:"替换"},
+            repalceAllBtn:{value:"全部替换"}
+        },
+        getEnd:"已经搜索到文章末尾！",
+        getStart:"已经搜索到文章头部",
+        countMsg:"总共替换了{#count}处！"
+    },
+    'spechars':{
+        'static':{},
+        tsfh:"特殊字符",
+        lmsz:"罗马字符",
+        szfh:"数学字符",
+        rwfh:"日文字符",
+        xlzm:"希腊字母",
+        ewzm:"俄文字符",
+        pyzm:"拼音字母",
+        yyyb:"英语音标",
+        zyzf:"其他"
+    },
+    'edittable':{
+        'static':{
+            'lang_tableStyle':'表格样式',
+            'lang_insertCaption':'添加表格名称行',
+            'lang_insertTitle':'添加表格标题行',
+            'lang_insertTitleCol':'添加表格标题列',
+            'lang_orderbycontent':"使表格内容可排序",
+            'lang_tableSize':'自动调整表格尺寸',
+            'lang_autoSizeContent':'按表格文字自适应',
+            'lang_autoSizePage':'按页面宽度自适应',
+            'lang_example':'示例',
+            'lang_borderStyle':'表格边框',
+            'lang_color':'颜色:'
+        },
+        captionName:'表格名称',
+        titleName:'标题',
+        cellsName:'内容',
+        errorMsg:'有合并单元格，不可排序'
+    },
+    'edittip':{
+        'static':{
+            lang_delRow:'删除整行',
+            lang_delCol:'删除整列'
+        }
+    },
+    'edittd':{
+        'static':{
+            lang_tdBkColor:'背景颜色:'
+        }
+    },
+    'formula':{
+        'static':{
+        }
+    },
+    'wordimage':{
+        'static':{
+            lang_resave:"转存步骤",
+            uploadBtn:{src:"upload.png",alt:"上传"},
+            clipboard:{style:"background: url(copy.png) -153px -1px no-repeat;"},
+            lang_step:"1、点击顶部复制按钮，将地址复制到剪贴板；2、点击添加照片按钮，在弹出的对话框中使用Ctrl+V粘贴地址；3、点击打开后选择图片上传流程。"
+        },
+        'fileType':"图片",
+        'flashError':"FLASH初始化失败，请检查FLASH插件是否正确安装！",
+        'netError':"网络连接错误，请重试！",
+        'copySuccess':"图片地址已经复制！",
+        'flashI18n':{} //留空默认中文
+    },
+};
diff --git a/public/js/ueditor/plugins/demo/demo.js b/public/js/ueditor/plugins/demo/demo.js
new file mode 100644
index 0000000..addd6e0
--- /dev/null
+++ b/public/js/ueditor/plugins/demo/demo.js
@@ -0,0 +1,3 @@
+(function () {
+
+})();
diff --git a/public/js/ueditor/themes/default/css/ueditor.css b/public/js/ueditor/themes/default/css/ueditor.css
new file mode 100644
index 0000000..b948978
--- /dev/null
+++ b/public/js/ueditor/themes/default/css/ueditor.css
@@ -0,0 +1,1983 @@
+/*基础UI构建
+*/
+
+:root{
+    --edui-color-active-bg: rgba(200,200,200,0.3);
+}
+
+@font-face {
+  font-family: "edui-iconfont"; /* Project id 2897874 */
+  src: url('./../font/iconfont.woff2?t=1651572942270') format('woff2'),
+  url('./../font/iconfont.woff?t=1651572942270') format('woff'),
+  url('./../font/iconfont.ttf?t=1651572942270') format('truetype');
+}
+
+.edui-default {
+  accent-color: #333;
+}
+
+/* common layer */
+.edui-default .edui-box {
+    border: none;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    line-height:30px;
+}
+
+.edui-default a.edui-box {
+    display: block;
+    text-decoration: none;
+    color: black;
+}
+
+.edui-default a.edui-box:hover {
+    text-decoration: none;
+}
+
+.edui-default a.edui-box:active {
+    text-decoration: none;
+}
+
+.edui-default table.edui-box {
+    border-collapse: collapse;
+}
+
+.edui-default ul.edui-box {
+    list-style-type: none;
+}
+
+div.edui-box {
+    position: relative;
+    display: -moz-inline-box !important;
+    display: inline-block !important;
+    vertical-align: middle;
+}
+
+.edui-default .edui-clearfix {
+    zoom: 1
+}
+
+.edui-default .edui-clearfix:after {
+    content: '\20';
+    display: block;
+    clear: both;
+}
+
+ * html div.edui-box {
+    display: inline !important;
+}
+
+*:first-child+html div.edui-box {
+    display: inline !important;
+}
+
+/* control layout */
+.edui-default .edui-button-body, .edui-splitbutton-body, .edui-menubutton-body, .edui-combox-body {
+    position: relative;
+}
+
+.edui-default .edui-popup {
+    position: absolute;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+}
+
+.edui-default .edui-popup .edui-shadow {
+    position: absolute;
+    z-index: -1;
+}
+
+.edui-default .edui-popup .edui-bordereraser {
+    position: absolute;
+    overflow: hidden;
+}
+
+.edui-default .edui-tablepicker .edui-canvas {
+    position: relative;
+}
+
+.edui-default .edui-tablepicker .edui-canvas .edui-overlay {
+    position: absolute;
+}
+
+.edui-default .edui-dialog-modalmask, .edui-dialog-dragmask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.edui-default .edui-toolbar {
+    position: relative;
+}
+
+/*
+ * default theme
+ */
+.edui-default .edui-label {
+    cursor: pointer;
+}
+
+.edui-default span.edui-clickable {
+    color: #666;
+    cursor: pointer;
+    text-decoration: none;
+}
+.edui-default span.edui-clickable:hover{
+    color: #333;
+}
+
+.edui-default span.edui-unclickable {
+    color: gray;
+    cursor: default;
+}
+
+.edui-default span.edui-popup-action-item {
+  margin-right: 5px;
+}
+.edui-default span.edui-popup-action-item:last-child {
+  margin-right: 0;
+}
+
+/* 工具栏 */
+.edui-default .edui-toolbar {
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    padding: 1px;
+    overflow: hidden; /*全屏下单独一行不占位*/
+    zoom: 1;
+    width:auto;
+    height:auto;
+}
+
+.edui-default .edui-toolbar .edui-button,
+.edui-default .edui-toolbar .edui-splitbutton,
+.edui-default .edui-toolbar .edui-menubutton,
+.edui-default .edui-toolbar .edui-combox {
+    margin: 1px;
+}
+/*UI工具栏、编辑区域、底部*/
+.edui-default .edui-editor {
+    border: 1px solid #d4d4d4;
+    background-color: white;
+    position: relative;
+    overflow: visible;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+.edui-editor div{
+    width:auto;
+    height:auto;
+}
+.edui-default .edui-editor-toolbarbox {
+    position: relative;
+    zoom: 1;
+    /*-webkit-box-shadow:0 1px 4px rgba(204, 204, 204, 0.6);*/
+    /*-moz-box-shadow:0 1px 4px rgba(204, 204, 204, 0.6);*/
+    /*box-shadow:0 1px 4px rgba(204, 204, 204, 0.6);*/
+    border-top-left-radius:2px;
+    border-top-right-radius:2px;
+}
+
+.edui-default .edui-editor-toolbarboxouter {
+    border-bottom: 1px solid #d4d4d4;
+    background-color: #fafafa;
+    /*background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);*/
+    /*background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));*/
+    /*background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);*/
+    /*background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);*/
+    /*background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);*/
+    /*background-repeat: repeat-x;*/
+    /*border: 1px solid #d4d4d4;*/
+    -webkit-border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+    border-radius: 4px 4px 0 0;
+    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);*/
+    /**zoom: 1;*/
+    /*-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);*/
+    /*-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);*/
+    /*box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);*/
+}
+
+.edui-default .edui-editor-toolbarboxinner {
+    padding: 2px;
+}
+
+.edui-default .edui-editor-iframeholder {
+    position: relative;
+    /*for fix ie6 toolbarmsg under iframe bug. relative -> static */
+    /*_position: static !important;*
+}
+
+.edui-default .edui-editor-iframeholder textarea {
+    font-family: consolas, "Courier New", "lucida console", monospace;
+    font-size: 12px;
+    line-height: 18px;
+}
+
+.edui-default .edui-editor-bottombar {
+    /*border-top: 1px solid #ccc;*/
+    /*height: 20px;*/
+    /*width: 40%;*/
+    /*float: left;*/
+    /*overflow: hidden;*/
+}
+
+.edui-default .edui-editor-bottomContainer {
+    overflow: hidden;
+}
+
+.edui-default .edui-editor-bottomContainer table {
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    border-spacing: 0;
+}
+
+.edui-default .edui-editor-bottomContainer td {
+    white-space: nowrap;
+    border-top: 1px solid #ccc;
+    line-height: 20px;
+    font-size: 12px;
+    font-family: Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
+}
+
+.edui-default .edui-editor-wordcount {
+    text-align: right;
+    margin-right: 5px;
+    color: #aaa;
+}
+.edui-default .edui-editor-scale {
+    width: 12px;
+}
+.edui-default .edui-editor-scale .edui-editor-icon {
+    float: right;
+    width: 100%;
+    height: 12px;
+    margin-top: 10px;
+    background: url(../images/scale.png) no-repeat;
+    cursor: se-resize;
+}
+.edui-default .edui-editor-breadcrumb {
+    margin: 2px 0 0 3px;
+  color: #666;
+}
+
+.edui-default .edui-editor-breadcrumb span {
+    cursor: pointer;
+    color: #666;
+    line-height: 16px;
+    display: inline-block;
+}
+
+.edui-default .edui-toolbar .edui-for-fullscreen {
+    float: right;
+}
+
+.edui-default .edui-bubble .edui-popup-content {
+  font-size: 13px;
+  box-shadow: 0 0 10px #0000001f;
+  transition: .25s;
+  color: #666;
+  background-color: #FFF;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.edui-default .edui-bubble .edui-shadow {
+    /*box-shadow: 1px 1px 3px #818181;*/
+    /*-webkit-box-shadow: 2px 2px 3px #818181;*/
+    /*-moz-box-shadow: 2px 2px 3px #818181;*/
+    /*filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius = '2', MakeShadow = 'true', ShadowOpacity = '0.5');*/
+}
+
+.edui-default .edui-editor-toolbarmsg {
+    background-color: #FFF6D9;
+    border-bottom: 1px solid #ccc;
+    position: absolute;
+    bottom: -25px;
+    left: 0;
+    z-index: 1009;
+    width: 99.9%;
+}
+
+.edui-default .edui-editor-toolbarmsg-upload {
+    font-size: 14px;
+    color: blue;
+    width: 100px;
+    height: 16px;
+    line-height: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 5px;
+    left: 350px;
+}
+
+.edui-default .edui-editor-toolbarmsg-label {
+    font-size: 12px;
+    line-height: 16px;
+    padding: 4px;
+}
+
+.edui-default .edui-editor-toolbarmsg-close {
+    float: right;
+    width: 20px;
+    height: 16px;
+    line-height: 16px;
+    cursor: pointer;
+    color: red;
+}
+
+/*可选中菜单按钮*/
+.edui-default .edui-list .edui-bordereraser {
+    display: none;
+}
+
+.edui-default .edui-listitem {
+    padding: 1px;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.edui-default .edui-list .edui-state-hover {
+    position: relative;
+    background-color: #EEE;
+    border: 1px solid #EEE;
+    padding: 0;
+    border-radius: 3px;
+}
+
+.edui-default .edui-for-fontfamily .edui-listitem-label {
+    min-width: 130px;
+    _width: 120px;
+    font-size: 12px;
+    height: 22px;
+    line-height: 22px;
+    padding-left: 5px;
+}
+.edui-default .edui-for-insertcode .edui-listitem-label {
+    min-width: 120px;
+    _width: 120px;
+    font-size: 12px;
+    height: 22px;
+    line-height: 22px;
+    padding-left: 5px;
+}
+.edui-default .edui-for-underline .edui-listitem-label {
+    min-width: 120px;
+    _width: 120px;
+    padding: 3px 5px;
+    font-size: 12px;
+}
+
+.edui-default .edui-for-fontsize .edui-listitem-label {
+    min-width: 120px;
+    _width: 120px;
+    padding: 3px 5px;
+    cursor: pointer;
+}
+
+.edui-default .edui-for-paragraph .edui-listitem-label {
+    min-width: 200px;
+    _width: 200px;
+    padding: 2px 5px;
+}
+
+.edui-default .edui-for-rowspacingtop .edui-listitem-label,
+.edui-default .edui-for-rowspacingbottom .edui-listitem-label {
+    min-width: 53px;
+    _width: 53px;
+    padding: 2px 5px;
+}
+
+.edui-default .edui-for-lineheight .edui-listitem-label {
+    min-width: 53px;
+    _width: 53px;
+    padding: 2px 5px;
+}
+
+.edui-default .edui-for-customstyle .edui-listitem-label {
+    min-width: 200px;
+    _width: 200px;
+    width: 200px !important;
+    padding: 2px 5px;
+}
+
+/* 可选中按钮弹出菜单*/
+.edui-default .edui-menu {
+    z-index: 3000;
+}
+
+.edui-default .edui-menu .edui-popup-content {
+    padding: 3px;
+}
+
+.edui-default .edui-menu-body {
+    _width: 150px;
+    min-width: 170px;
+    background: url("../images/sparator_v.png") repeat-y 25px;
+}
+
+.edui-default .edui-menuitem-body {
+}
+
+.edui-default .edui-menuitem {
+    height: 24px;
+    line-height: 22px;
+    cursor: default;
+    vertical-align: top;
+}
+
+.edui-default .edui-menuitem .edui-icon {
+    width: 20px !important;
+    height: 20px !important;
+    /*background: url(../images/icons.png) 0 -4000px;*/
+    /*background: url(../images/icons.gif) 0 -4000px\9;*/
+    font-family: 'edui-iconfont';
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+}
+
+.edui-default .edui-menuitem .edui-menuitem-body .edui-icon:before{
+    display:none;
+}
+
+.edui-default .edui-contextmenu .edui-popup-content .edui-menuitem-body .edui-icon:before{
+    display: inline-block;
+}
+
+.edui-default .edui-menuitem .edui-label {
+    font-size: 12px;
+    line-height: 20px;
+    height: 20px;
+    padding-left: 10px;
+}
+
+.edui-default .edui-state-checked .edui-menuitem-body .edui-icon{
+    line-height:20px;
+    text-align:center;
+}
+.edui-default .edui-state-checked .edui-menuitem-body .edui-icon:before{
+    content: "\e7fc";
+    font-size: 10px;
+    display:inline-block;
+}
+
+.edui-default .edui-state-disabled .edui-menuitem-label {
+    color: gray;
+}
+
+
+/*不可选中菜单按钮 */
+.edui-default .edui-toolbar .edui-combox-body .edui-button-body {
+    width: 60px;
+    font-size: 12px;
+    height: 30px;
+    line-height: 30px;
+    padding-left: 5px;
+    white-space: nowrap;
+    margin: 0 3px 0 0;
+    cursor: pointer;
+}
+
+.edui-default .edui-toolbar .edui-combox-body .edui-arrow {
+    height: 30px;
+    width: 13px;
+    cursor: pointer;
+}
+
+.edui-default .edui-toolbar .edui-combox-body .edui-arrow:before{
+    content: "\e9f0";
+    font-family: "edui-iconfont";
+    font-size: 8px;
+}
+
+.edui-default .edui-toolbar .edui-combox .edui-combox-body {
+    border: 1px solid #CCC;
+    background-color: white;
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+}
+
+.edui-default .edui-toolbar .edui-combox .edui-combox-body > div {
+    vertical-align: top;
+}
+
+.edui-default .edui-toolbar .edui-combox-body .edui-splitborder {
+    display: none;
+}
+
+.edui-default .edui-toolbar .edui-combox-body .edui-arrow {
+    border-left: 1px solid #CCC;
+}
+
+.edui-default .edui-toolbar .edui-state-hover .edui-combox-body {
+    /*background-color: #fff5d4;*/
+    /*border: 1px solid #dcac6c;*/
+}
+
+.edui-default .edui-toolbar .edui-state-hover .edui-combox-body .edui-arrow {
+    /*border-left: 1px solid #dcac6c;*/
+}
+
+.edui-default .edui-toolbar .edui-state-checked .edui-combox-body {
+    background-color: #FFE69F;
+    border: 1px solid #DCAC6C;
+}
+
+.edui-toolbar .edui-state-checked .edui-combox-body .edui-arrow {
+    border-left: 1px solid #DCAC6C;
+}
+
+.edui-toolbar .edui-state-disabled .edui-combox-body {
+    background-color: #F0F0EE;
+    opacity: 0.3;
+}
+
+.edui-toolbar .edui-state-opened .edui-combox-body {
+    background-color: white;
+    border: 1px solid gray;
+}
+
+/*普通按钮样式及状态*/
+.edui-default .edui-toolbar .edui-button .edui-icon,
+.edui-default .edui-toolbar .edui-menubutton .edui-icon,
+.edui-default .edui-toolbar .edui-splitbutton .edui-icon {
+    height: 30px !important;
+    width: 30px !important;
+    /*background-image: url(../images/icons.png);*/
+    /*background-image: url(../images/icons.gif) \9;*/
+    background-position: center;
+    background-repeat: no-repeat;
+    font-family: "edui-iconfont";
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 16px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.edui-default .edui-toolbar .edui-button .edui-button-wrap {
+    padding: 1px;
+    position: relative;
+    border-radius: 3px;
+}
+
+.edui-default .edui-toolbar .edui-button .edui-state-hover .edui-button-wrap {
+    background-color: #EEE;
+    border: 1px solid #EEE;
+    padding: 0;
+}
+
+.edui-default .edui-toolbar .edui-button .edui-state-checked .edui-button-wrap {
+    background-color: #F0F0EE;
+    padding: 0;
+    border: 1px solid #EEE;
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+}
+
+.edui-default .edui-toolbar .edui-button .edui-state-active .edui-button-wrap {
+    background-color: #ffffff;
+    padding: 0;
+    border: 1px solid gray;
+}
+.edui-default .edui-toolbar .edui-state-disabled .edui-label {
+    color: #ccc;
+}
+.edui-default .edui-toolbar .edui-state-disabled .edui-icon {
+    opacity: 0.3;
+    filter: alpha(opacity = 30);
+}
+
+.edui-default .edui-toolbar-button-custom{
+  display: inline-block !important;
+  line-height: 30px;
+  vertical-align: middle;
+  padding: 0 10px;
+  border-radius: 3px;
+  margin: 0 5px;
+}
+
+.edui-default .edui-toolbar-button-custom:hover{
+  background: #EEE;
+}
+
+/* toolbar icons */
+.edui-default .edui-for-undo .edui-icon:before {
+     content: "\e60f";
+}
+
+.edui-default  .edui-for-redo .edui-icon:before {
+    content: "\e60c";
+}
+
+.edui-default  .edui-for-bold .edui-icon:before {
+    content: "\e628";
+}
+
+.edui-default  .edui-for-italic .edui-icon:before {
+    content: "\e62a";
+}
+
+.edui-default  .edui-for-fontborder .edui-icon:before {
+    content: '\e62d';
+}
+.edui-default  .edui-for-underline .edui-icon:before {
+    content: "\e63e";
+}
+
+.edui-default  .edui-for-strikethrough .edui-icon:before {
+    content: "\e64a";
+}
+
+.edui-default  .edui-for-subscript .edui-icon:before {
+    content: "\ece9";
+}
+
+.edui-default  .edui-for-superscript .edui-icon:before {
+    content: "\e83e";
+}
+
+.edui-default  .edui-for-blockquote .edui-icon:before {
+    content: "\e6d8";
+}
+
+.edui-default  .edui-for-forecolor .edui-icon:before {
+    content: "\e7f8";
+}
+
+.edui-default  .edui-for-backcolor .edui-icon:before {
+    content: "\e71a";
+}
+
+.edui-default  .edui-for-inserttable .edui-icon:before {
+    content: "\e60d";
+}
+
+.edui-default  .edui-for-autotypeset .edui-icon:before {
+    content: "\e662";
+}
+
+.edui-default  .edui-for-justifyleft .edui-icon:before {
+    content: "\e7f7";
+}
+
+.edui-default  .edui-for-justifycenter .edui-icon:before {
+    content: "\e7f6";
+}
+
+.edui-default  .edui-for-justifyright .edui-icon:before {
+    content: "\e7f5";
+}
+
+.edui-default  .edui-for-justifyjustify .edui-icon:before {
+    content: "\e87c";
+}
+
+.edui-default  .edui-for-insertorderedlist .edui-icon:before {
+    content: "\e737";
+}
+
+.edui-default  .edui-for-insertunorderedlist .edui-icon:before {
+    content: "\e7f4";
+}
+
+.edui-default  .edui-for-lineheight .edui-icon:before {
+    content: "\e638";
+}
+
+.edui-default  .edui-for-rowspacingbottom .edui-icon:before {
+    content: '\eb09';
+}
+
+.edui-default  .edui-for-rowspacingtop .edui-icon:before {
+    content: '\eb0a';
+}
+
+.edui-default  .edui-for-horizontal .edui-icon:before {
+    content: "\e617";
+}
+
+.edui-default  .edui-for-link .edui-icon:before {
+    content: "\e648";
+}
+
+.edui-default  .edui-for-code .edui-icon:before {
+    background-position: -440px -40px;
+}
+
+.edui-default  .edui-for-insertimage .edui-icon:before {
+    content: "\e605";
+}
+
+.edui-default  .edui-for-insertframe .edui-icon:before {
+    content: "\e6c0";
+}
+
+.edui-default  .edui-for-emoticon .edui-icon:before {
+    content: "\e60e";
+}
+
+.edui-default  .edui-for-spechars .edui-icon:before {
+    content: "\e891";
+}
+
+.edui-default  .edui-for-help .edui-icon:before {
+    content: "\e752";
+}
+
+.edui-default  .edui-for-print .edui-icon:before {
+    content: "\e67a";
+}
+
+.edui-default  .edui-for-preview .edui-icon:before {
+    content: "\e644";
+}
+
+.edui-default  .edui-for-selectall .edui-icon:before {
+    content: '\e62f';
+}
+
+.edui-default  .edui-for-searchreplace .edui-icon:before {
+    content: "\eb6c";
+}
+
+.edui-default  .edui-for-map .edui-icon:before {
+    content: "\e649";
+}
+
+.edui-default  .edui-for-insertvideo .edui-icon:before {
+    content: "\e636";
+}
+
+.edui-default  .edui-for-time .edui-icon:before {
+    content: "\e680";
+}
+
+.edui-default  .edui-for-date .edui-icon:before {
+    content: "\e697";
+}
+
+.edui-default  .edui-for-cut .edui-icon:before {
+    background-position: -680px 0;
+}
+
+.edui-default  .edui-for-copy .edui-icon:before {
+    background-position: -700px 0;
+}
+
+.edui-default  .edui-for-paste .edui-icon:before {
+    background-position: -560px 0;
+}
+
+.edui-default  .edui-for-formatmatch .edui-icon:before {
+    content: "\e637";
+}
+
+.edui-default  .edui-for-pasteplain .edui-icon:before {
+    content: '\edfb';
+}
+
+.edui-default  .edui-for-directionalityltr .edui-icon:before {
+    content: "\e623";
+}
+
+.edui-default  .edui-for-directionalityrtl .edui-icon:before {
+    content: "\e7bc";
+}
+
+.edui-default  .edui-for-source .edui-icon:before {
+    content: "\e608";
+}
+
+.edui-default  .edui-for-removeformat .edui-icon:before {
+    content: "\e782";
+}
+
+.edui-default  .edui-for-unlink .edui-icon:before {
+    content: "\e92b";
+}
+
+.edui-default  .edui-for-touppercase .edui-icon:before {
+    content: "\e619";
+}
+
+.edui-default  .edui-for-tolowercase .edui-icon:before {
+    content: "\e61a";
+}
+
+.edui-default  .edui-for-insertrow .edui-icon:before {
+    content: "\e603";
+}
+
+.edui-default  .edui-for-insertrownext .edui-icon:before {
+    content: "\e602";
+}
+
+.edui-default  .edui-for-insertcol .edui-icon:before {
+    content: "\e601";
+}
+
+.edui-default  .edui-for-insertcolnext  .edui-icon:before {
+    content: "\e600";
+}
+
+.edui-default  .edui-for-mergeright .edui-icon:before {
+    content: "\e615";
+}
+
+.edui-default  .edui-for-mergedown .edui-icon:before {
+    content: "\e613";
+}
+
+.edui-default  .edui-for-splittorows .edui-icon:before {
+    content: "\e610";
+}
+
+.edui-default  .edui-for-splittocols .edui-icon:before {
+    content: "\e611";
+}
+
+.edui-default  .edui-for-insertparagraphbeforetable .edui-icon:before {
+    content: '\e901';
+}
+
+.edui-default  .edui-for-deleterow .edui-icon:before {
+    content: "\e609";
+}
+
+.edui-default  .edui-for-deletecol .edui-icon:before {
+    content: "\e604";
+}
+
+.edui-default  .edui-for-splittocells .edui-icon:before {
+    content: "\e612";
+}
+
+.edui-default  .edui-for-mergecells .edui-icon:before {
+    content: "\e606";
+}
+
+.edui-default  .edui-for-deletetable .edui-icon:before {
+    content: "\e60a";
+}
+
+.edui-default  .edui-for-cleardoc .edui-icon:before {
+    content: "\e61e";
+}
+
+.edui-default  .edui-for-fullscreen .edui-icon:before {
+    content: "\e675";
+}
+
+.edui-default  .edui-for-anchor .edui-icon:before {
+    content: "\e61b";
+}
+
+.edui-default  .edui-for-pagebreak .edui-icon:before {
+    content: "\e61d";
+}
+
+.edui-default  .edui-for-imagenone .edui-icon:before {
+    content: "\e61f";
+}
+
+.edui-default  .edui-for-imageleft .edui-icon:before {
+    content: "\e621";
+}
+
+.edui-default  .edui-for-wordimage .edui-icon:before {
+    content: "\e618";
+}
+
+.edui-default  .edui-for-imageright .edui-icon:before {
+    content: "\e622";
+}
+
+.edui-default  .edui-for-imagecenter .edui-icon:before {
+    content: "\e620";
+}
+
+.edui-default  .edui-for-indent .edui-icon:before {
+    content: "\e7f3";
+}
+
+.edui-default  .edui-for-outdent .edui-icon:before {
+    background-position: -540px 0;
+}
+
+.edui-default  .edui-for-table .edui-icon:before {
+    background-position: -580px -20px;
+}
+
+.edui-default  .edui-for-edittable .edui-icon:before {
+    background-position: -420px -40px;
+}
+
+.edui-default  .edui-for-template .edui-icon:before {
+    content: "\e6ad";
+}
+
+.edui-default  .edui-for-delete .edui-icon:before {
+    background-position: -360px -40px;
+}
+
+.edui-default  .edui-for-attachment .edui-icon:before {
+    content: "\e704";
+}
+
+.edui-default  .edui-for-edittd .edui-icon:before {
+    background-position: -700px -40px;
+}
+
+.edui-default  .edui-for-scrawl .edui-icon:before {
+    content: "\e70b";
+}
+
+.edui-default  .edui-for-background .edui-icon:before {
+    content: "\e624";
+}
+
+.edui-default  .edui-for-formula .edui-icon:before {
+    content: "\e616";
+}
+
+.edui-default  .edui-for-aligntd  .edui-icon:before {
+    background-position: -236px -76px;
+}
+
+.edui-default  .edui-for-insertparagraphtrue  .edui-icon:before {
+    background-position: -625px -76px;
+}
+
+.edui-default  .edui-for-insertparagraph  .edui-icon:before {
+    background-position: -602px -76px;
+}
+
+.edui-default  .edui-for-insertcaption  .edui-icon:before {
+    background-position: -336px -76px;
+}
+
+.edui-default  .edui-for-deletecaption  .edui-icon:before {
+    background-position: -362px -76px;
+}
+
+.edui-default  .edui-for-inserttitle  .edui-icon:before {
+    background-position: -286px -76px;
+}
+
+.edui-default  .edui-for-deletetitle  .edui-icon:before {
+    background-position: -311px -76px;
+}
+
+.edui-default  .edui-for-aligntable  .edui-icon:before {
+    background-position: -440px 0;
+}
+
+.edui-default  .edui-for-tablealignment-left  .edui-icon:before {
+    background-position: -460px 0;
+}
+
+.edui-default  .edui-for-tablealignment-center  .edui-icon:before {
+    background-position: -420px 0;
+}
+
+.edui-default  .edui-for-tablealignment-right  .edui-icon:before {
+    background-position: -480px 0;
+}
+
+.edui-default  .edui-for-inserttitlecol  .edui-icon:before {
+    background-position: -673px -76px;
+}
+
+.edui-default  .edui-for-deletetitlecol  .edui-icon:before {
+    background-position: -698px -76px;
+}
+
+.edui-default  .edui-for-simpleupload  .edui-icon:before {
+  content: "\edfc";
+}
+
+/*splitbutton*/
+.edui-default .edui-toolbar .edui-splitbutton-body .edui-arrow,
+.edui-default .edui-toolbar .edui-menubutton-body .edui-arrow {
+    height: 30px;
+    width: 13px;
+    cursor: pointer;
+}
+.edui-default .edui-toolbar .edui-splitbutton-body .edui-arrow:before,
+.edui-default .edui-toolbar .edui-menubutton-body .edui-arrow:before {
+    content: "\e9f0";
+    font-family: "edui-iconfont";
+    font-size: 8px;
+}
+
+.edui-default .edui-toolbar .edui-splitbutton .edui-splitbutton-body,
+.edui-default .edui-toolbar .edui-menubutton .edui-menubutton-body {
+    padding: 1px;
+    border-radius: 3px;
+}
+
+.edui-default .edui-toolbar .edui-splitborder {
+    width: 1px;
+    height: 30px;
+}
+
+.edui-default .edui-toolbar .edui-state-hover .edui-splitborder {
+    width: 1px;
+    border-left: 0px solid #dcac6c;
+}
+
+.edui-default .edui-toolbar .edui-state-active .edui-splitborder {
+    width: 0;
+    border-left: 1px solid #EEE;
+}
+
+.edui-default .edui-toolbar .edui-state-opened .edui-splitborder {
+    width: 1px;
+    border: 0;
+}
+
+.edui-default .edui-toolbar .edui-splitbutton .edui-state-hover .edui-splitbutton-body,
+.edui-default .edui-toolbar .edui-menubutton .edui-state-hover .edui-menubutton-body {
+    background-color: #EEE;
+    border: 1px solid #EEE;
+    padding: 0;
+}
+
+.edui-default .edui-toolbar .edui-splitbutton .edui-state-checked .edui-splitbutton-body,
+.edui-default .edui-toolbar .edui-menubutton .edui-state-checked .edui-menubutton-body {
+    background-color: #ffffff;
+    border: 1px solid #EEE;
+    padding: 0;
+}
+
+.edui-default .edui-toolbar .edui-splitbutton .edui-state-active .edui-splitbutton-body,
+.edui-default .edui-toolbar .edui-menubutton .edui-state-active .edui-menubutton-body {
+    background-color: #ffffff;
+    border: 1px solid #EEE;
+    padding: 0;
+}
+
+.edui-default .edui-state-disabled .edui-arrow {
+    opacity: 0.3;
+    _filter: alpha(opacity = 30);
+}
+
+.edui-default .edui-toolbar .edui-splitbutton .edui-state-opened .edui-splitbutton-body,
+.edui-default .edui-toolbar .edui-menubutton .edui-state-opened .edui-menubutton-body {
+    background-color: white;
+    border: 1px solid #EEE;
+    padding: 0;
+}
+
+.edui-default .edui-for-insertorderedlist .edui-bordereraser,
+.edui-default .edui-for-lineheight .edui-bordereraser,
+.edui-default .edui-for-rowspacingtop .edui-bordereraser,
+.edui-default .edui-for-rowspacingbottom .edui-bordereraser,
+.edui-default .edui-for-insertunorderedlist .edui-bordereraser {
+    background-color: white;
+}
+
+/* 解决嵌套导致的图标问题 */
+.edui-default .edui-for-insertorderedlist .edui-popup-body .edui-icon,
+.edui-default .edui-for-lineheight .edui-popup-body .edui-icon,
+.edui-default .edui-for-rowspacingtop .edui-popup-body .edui-icon,
+.edui-default .edui-for-rowspacingbottom .edui-popup-body .edui-icon,
+.edui-default .edui-for-insertunorderedlist .edui-popup-body .edui-icon {
+    /*background-position: 0 -40px;*/
+    background-image: none  ;
+}
+
+/* 弹出菜单 */
+.edui-default .edui-popup {
+    z-index: 3000;
+    background-color: #ffffff;
+    width:auto;
+    height:auto;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    margin-top:1px;
+}
+
+.edui-default .edui-popup .edui-shadow {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.edui-default .edui-popup-content {
+    font-size: 13px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.2);
+    transition: .25s;
+    color: #333;
+    background-color: #FFF;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.edui-default .edui-popup .edui-bordereraser {
+    background-color: transparent;
+    height: 3px;
+}
+
+.edui-default .edui-menu .edui-bordereraser {
+    height: 3px;
+}
+
+.edui-default .edui-anchor-topleft .edui-bordereraser {
+    left: 1px;
+    top: -2px;
+}
+
+.edui-default .edui-anchor-topright .edui-bordereraser {
+    right: 1px;
+    top: -2px;
+}
+
+.edui-default .edui-anchor-bottomleft .edui-bordereraser {
+    left: 0;
+    bottom: -6px;
+    height: 7px;
+    border-left: 1px solid gray;
+    border-right: 1px solid gray;
+}
+
+.edui-default .edui-anchor-bottomright .edui-bordereraser {
+    right: 0;
+    bottom: -6px;
+    height: 7px;
+    border-left: 1px solid gray;
+    border-right: 1px solid gray;
+}
+
+.edui-popup div{
+    width:auto;
+    height:auto;
+}
+
+.edui-default .edui-editor-messageholder {
+    display: block;
+    width: 150px;
+    height: auto;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 28px;
+    right: 3px;
+}
+
+.edui-default .edui-message{
+    min-height: 10px;
+    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
+    padding: 0;
+    margin-bottom: 3px;
+    position: relative;
+}
+.edui-default .edui-message-body{
+    border-radius: 3px;
+    padding: 8px 15px 8px 8px;
+    color: #c09853;
+    background-color: #fcf8e3;
+    border: 1px solid #fbeed5;
+}
+.edui-default .edui-message-type-info{
+    color: #3a87ad;
+    background-color: #d9edf7;
+    border-color: #bce8f1
+}
+.edui-default .edui-message-type-success{
+    color: #468847;
+    background-color: #dff0d8;
+    border-color: #d6e9c6
+}
+.edui-default .edui-message-type-danger,
+.edui-default .edui-message-type-error{
+    color: #b94a48;
+    background-color: #f2dede;
+    border-color: #eed3d7
+}
+.edui-default .edui-message .edui-message-closer {
+    display: block;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    float: right;
+    font-size: 20px;
+    font-weight: bold;
+    color: #999;
+    text-shadow: 0 1px 0 #fff;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+.edui-default .edui-message .edui-message-content {
+    font-size: 10pt;
+    word-wrap: break-word;
+    word-break: normal;
+}
+/* 弹出对话框按钮和对话框大小 */
+.edui-default .edui-dialog {
+    z-index: 2000;
+    position: absolute;
+
+}
+
+.edui-dialog div{
+    width:auto;
+}
+
+.edui-default .edui-dialog-wrap {
+    margin-right: 6px;
+    margin-bottom: 6px;
+}
+
+.edui-default .edui-dialog-fullscreen-flag {
+    margin-right: 0;
+    margin-bottom: 0;
+}
+
+.edui-default .edui-dialog-body {
+    position: relative;
+    /*padding:2px 0 0 2px;*/
+    /*_zoom: 1;*/
+}
+
+.edui-default .edui-dialog-fullscreen-flag .edui-dialog-body {
+    padding: 0;
+}
+
+.edui-default .edui-dialog-shadow {
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff;
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 3px;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.edui-default .edui-dialog-foot {
+    background-color: white;
+    border-radius: 0 0 5px 5px;
+    height: 40px;
+}
+
+.edui-default .edui-dialog-titlebar {
+    height: 30px;
+    background: #FFF;
+    position: relative;
+    cursor: move;
+    border-radius:5px 5px 0 0;
+}
+.edui-default .edui-dialog-caption {
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 30px;
+    padding-left: 5px;
+}
+
+.edui-default .edui-dialog-draghandle {
+    height: 30px;
+}
+
+.edui-default .edui-dialog-closebutton {
+    position: absolute !important;
+    right: 5px;
+    top: 3px;
+}
+
+.edui-default .edui-dialog-closebutton .edui-button-body {
+    height: 20px;
+    width: 20px;
+    cursor: pointer;
+}
+
+.edui-default .edui-dialog-closebutton .edui-button-body .edui-icon{
+    width: 20px;
+    height: 20px;
+    font-family: 'edui-iconfont';
+    line-height: 20px;
+    font-size: 20px;
+    text-align: center;
+    color:#999;
+    vertical-align: top;
+}
+.edui-default .edui-dialog-closebutton .edui-button-body .edui-icon:before{
+    content: "\e6a7";
+}
+
+.edui-default .edui-dialog-closebutton .edui-state-hover .edui-button-body .edui-icon{
+    color:#333;
+}
+
+.edui-default .edui-dialog-buttons {
+    position: absolute;
+    right: 0;
+}
+
+.edui-default .edui-dialog-buttons .edui-button {
+    margin-right: 10px;
+}
+
+.edui-default .edui-dialog-buttons .edui-button .edui-button-body .edui-icon{
+    display: none !important;
+}
+
+.edui-default .edui-dialog-buttons .edui-button .edui-button-body {
+    height: 30px;
+    font-size: 12px;
+    line-height: 28px;
+    cursor: pointer;
+    border-radius: 4px;
+    text-align: center;
+    background-color: #F8F8F8;
+    border: 1px solid #EEE;
+    padding:0 15px;
+}
+
+.edui-default .edui-dialog-buttons .edui-button .edui-state-hover .edui-button-body {
+
+}
+
+.edui-default .edui-dialog iframe {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    vertical-align: top;
+}
+
+.edui-default .edui-dialog-modalmask {
+    opacity: 0.3;
+    filter: alpha(opacity = 30);
+    background-color: #ccc;
+    position: absolute;
+    /*z-index: 1999;*/
+}
+
+.edui-default .edui-dialog-dragmask {
+    position: absolute;
+    /*z-index: 2001;*/
+    background-color: transparent;
+    cursor: move;
+}
+
+.edui-default .edui-dialog-content {
+    position: relative;
+}
+
+.edui-default .dialogcontmask {
+    cursor: move;
+    visibility: hidden;
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    filter: alpha(opacity = 0);
+}
+
+/*link-dialog*/
+.edui-default .edui-for-link .edui-dialog-content {
+    width: 420px;
+    height: 200px;
+    overflow: hidden;
+}
+/*background-dialog*/
+.edui-default .edui-for-background .edui-dialog-content {
+    width: 440px;
+    height: 280px;
+    overflow: hidden;
+}
+
+/*template-dialog*/
+.edui-default .edui-for-template .edui-dialog-content {
+    width: 630px;
+    height: 390px;
+    overflow: hidden;
+}
+
+/*scrawl-dialog*/
+.edui-default .edui-for-scrawl .edui-dialog-content {
+    width: 515px;
+    *width: 506px;
+    height: 360px;
+}
+
+/*spechars-dialog*/
+.edui-default .edui-for-spechars .edui-dialog-content {
+    width: 620px;
+    height: 500px;
+    *width: 630px;
+    *height: 570px;
+}
+
+/*image-dialog*/
+.edui-default .edui-for-insertimage .edui-dialog-content {
+    width: 650px;
+    height: 400px;
+    overflow: hidden;
+}
+
+/*image-insertframe*/
+.edui-default .edui-for-insertframe .edui-dialog-content {
+    width: 350px;
+    height: 230px;
+    overflow: hidden;
+}
+
+/*wordImage-dialog*/
+.edui-default .edui-for-wordimage .edui-dialog-content {
+  width: 620px;
+  height: 380px;
+  overflow: hidden;
+}
+
+/*formula-dialog*/
+.edui-default .edui-for-formula .edui-dialog-content {
+  width: 620px;
+  height: 300px;
+  overflow: hidden;
+}
+
+/*attachment-dialog*/
+.edui-default .edui-for-attachment .edui-dialog-content {
+    width: 650px;
+    height: 400px;
+    overflow: hidden;
+}
+
+
+/*map-dialog*/
+.edui-default .edui-for-map .edui-dialog-content {
+    width: 550px;
+    height: 400px;
+}
+
+/*video-dialog*/
+.edui-default .edui-for-insertvideo .edui-dialog-content {
+    width: 590px;
+    height: 420px;
+}
+
+/*anchor-dialog*/
+.edui-default .edui-for-anchor .edui-dialog-content {
+    width: 320px;
+    height: 60px;
+    overflow: hidden;
+}
+
+/*searchreplace-dialog*/
+.edui-default .edui-for-searchreplace .edui-dialog-content {
+    width: 400px;
+    height: 220px;
+}
+
+/*help-dialog*/
+.edui-default .edui-for-help .edui-dialog-content {
+    width: 400px;
+    height: 420px;
+}
+
+/*edittable-dialog*/
+.edui-default .edui-for-edittable .edui-dialog-content {
+    width: 540px;
+    _width:590px;
+    height: 335px;
+}
+
+/*edittip-dialog*/
+.edui-default .edui-for-edittip .edui-dialog-content {
+    width: 225px;
+    height: 60px;
+}
+
+/*edittd-dialog*/
+.edui-default .edui-for-edittd .edui-dialog-content {
+    width: 240px;
+    height: 50px;
+}
+
+/*段落弹出菜单*/
+.edui-default .edui-for-paragraph .edui-listitem-label {
+    font-family: Tahoma, Verdana, Arial, Helvetica;
+}
+
+.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-p {
+    font-size: 22px;
+    line-height: 27px;
+}
+
+.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-h1 {
+    font-weight: bolder;
+    font-size: 32px;
+    line-height: 36px;
+}
+
+.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-h2 {
+    font-weight: bolder;
+    font-size: 27px;
+    line-height: 29px;
+}
+
+.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-h3 {
+    font-weight: bolder;
+    font-size: 19px;
+    line-height: 23px;
+}
+
+.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-h4 {
+    font-weight: bolder;
+    font-size: 16px;
+    line-height: 19px
+}
+
+.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-h5 {
+    font-weight: bolder;
+    font-size: 13px;
+    line-height: 16px;
+}
+
+.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-h6 {
+    font-weight: bolder;
+    font-size: 12px;
+    line-height: 14px;
+}
+/* 表格弹出菜单 */
+.edui-default .edui-for-inserttable .edui-splitborder {
+    display: none
+}
+.edui-default .edui-for-inserttable  .edui-splitbutton-body .edui-arrow {
+    width: 0
+}
+.edui-default .edui-toolbar .edui-for-inserttable  .edui-state-active .edui-splitborder{
+    border-left: 1px solid transparent;
+}
+.edui-default .edui-tablepicker .edui-infoarea {
+    height: 14px;
+    line-height: 14px;
+    font-size: 12px;
+    width: 220px;
+    margin-bottom: 3px;
+    clear: both;
+}
+
+.edui-default .edui-tablepicker .edui-infoarea .edui-label {
+    float: left;
+}
+
+.edui-default .edui-dialog-buttons .edui-label {
+    line-height: 30px;
+}
+
+.edui-default .edui-tablepicker .edui-infoarea .edui-clickable {
+    float: right;
+}
+
+.edui-default .edui-tablepicker .edui-pickarea {
+    background: url("../images/unhighlighted.gif") repeat;
+    height: 220px;
+    width: 220px;
+}
+
+.edui-default .edui-tablepicker .edui-pickarea .edui-overlay {
+    background: url("../images/highlighted.gif") repeat;
+}
+
+/* 颜色弹出菜单 */
+.edui-default .edui-colorpicker-topbar {
+    height: 27px;
+    width: 200px;
+    /*border-bottom: 1px gray dashed;*/
+}
+
+.edui-default .edui-colorpicker-preview {
+    height: 20px;
+    border: 1px inset black;
+    margin-left: 1px;
+    width: 128px;
+    float: left;
+    border-radius:3px;
+}
+
+.edui-default .edui-colorpicker-nocolor {
+    float: right;
+    margin-right: 1px;
+    font-size: 12px;
+    line-height: 20px;
+    height: 20px;
+    border: 1px solid #333;
+    padding: 0 5px;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.edui-default .edui-colorpicker-tablefirstrow {
+    height: 30px;
+}
+
+.edui-default .edui-colorpicker-colorcell {
+    width: 14px;
+    height: 14px;
+    display: block;
+    margin: 0;
+    cursor: pointer;
+    border-radius:2px;
+}
+
+.edui-default .edui-colorpicker-colorcell:hover {
+    width: 14px;
+    height: 14px;
+    margin: 0;
+}
+.edui-default .edui-colorpicker-advbtn{
+    display: block;
+    text-align: center;
+    cursor: pointer;
+    height:20px;
+}
+.arrow_down{
+    background: white url('../images/arrow_down.png') no-repeat center;
+}
+.arrow_up{
+    background: white url('../images/arrow_up.png') no-repeat center;
+}
+/*高级的样式*/
+.edui-colorpicker-adv{
+    position: relative;
+    overflow: hidden;
+    height: 180px;
+    display: none;
+}
+.edui-colorpicker-plant, .edui-colorpicker-hue {
+    border: solid 1px #666;
+}
+.edui-colorpicker-pad {
+    width: 150px;
+    height: 150px;
+    left: 14px;
+    top: 13px;
+    position: absolute;
+    background: red;
+    overflow: hidden;
+    cursor: crosshair;
+}
+.edui-colorpicker-cover{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 150px;
+    height: 150px;
+    background: url("../images/tangram-colorpicker.png") -160px -200px;
+}
+.edui-colorpicker-padDot{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 11px;
+    height: 11px;
+    overflow: hidden;
+    background: url(../images/tangram-colorpicker.png) 0px -200px repeat-x;
+    z-index: 1000;
+
+}
+.edui-colorpicker-sliderMain {
+    position: absolute;
+    left: 171px;
+    top: 13px;
+    width: 19px;
+    height: 152px;
+    background: url(../images/tangram-colorpicker.png) -179px -12px no-repeat;
+
+}
+.edui-colorpicker-slider {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+.edui-colorpicker-thumb{
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    height: 3px;
+    left: -1px;
+    right: -1px;
+    border: 1px solid black;
+    background: white;
+    opacity: .8;
+}
+
+/*自动排版弹出菜单*/
+.edui-default .edui-autotypesetpicker .edui-autotypesetpicker-body {
+    font-size: 12px;
+    margin-bottom: 3px;
+    clear: both;
+}
+
+.edui-default .edui-autotypesetpicker-body table {
+    border-collapse: separate;
+    border-spacing: 2px;
+}
+
+.edui-default .edui-autotypesetpicker-body td {
+    font-size: 12px;
+    word-wrap:break-word;
+}
+
+.edui-default .edui-autotypesetpicker-body td input {
+    margin: 3px 3px 3px 4px;
+    *margin: 1px 0 0 0;
+}
+/*自动排版弹出菜单*/
+.edui-default .edui-cellalignpicker .edui-cellalignpicker-body {
+    width: 70px;
+    font-size: 12px;
+    cursor: default;
+}
+
+.edui-default .edui-cellalignpicker-body table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+.edui-default .edui-cellalignpicker-body td{
+    padding: 1px;
+}
+.edui-default .edui-cellalignpicker-body .edui-icon{
+    height: 20px;
+    width: 20px;
+    padding: 1px;
+    background-image: url(../images/table-cell-align.png);
+}
+
+.edui-default .edui-cellalignpicker-body .edui-left{
+    background-position: 0 0;
+}
+
+.edui-default .edui-cellalignpicker-body .edui-center{
+    background-position: -25px 0;
+}
+.edui-default .edui-cellalignpicker-body .edui-right{
+    background-position: -51px 0;
+}
+
+.edui-default .edui-cellalignpicker-body td.edui-state-hover .edui-left{
+    background-position: -73px 0;
+}
+
+.edui-default .edui-cellalignpicker-body td.edui-state-hover .edui-center{
+    background-position: -98px 0;
+}
+
+.edui-default .edui-cellalignpicker-body td.edui-state-hover .edui-right{
+    background-position: -124px 0;
+}
+
+.edui-default .edui-cellalignpicker-body td.edui-cellalign-selected .edui-left {
+    background-position: -146px 0;
+    background-color: #f1f4f5;
+}
+
+.edui-default .edui-cellalignpicker-body td.edui-cellalign-selected .edui-center {
+    background-position: -245px 0;
+}
+
+.edui-default .edui-cellalignpicker-body td.edui-cellalign-selected .edui-right {
+    background-position: -271px 0;
+}
+/*分隔线*/
+.edui-default .edui-toolbar .edui-separator {
+    width: 1px;
+    height: 20px;
+    margin: 5px 5px;
+    background: #CCC;
+}
+
+/*颜色按钮 */
+.edui-default .edui-toolbar .edui-colorbutton .edui-colorlump {
+    position: absolute;
+    overflow: hidden;
+    bottom: 1px;
+    left: 5px;
+    width: 20px;
+    height: 4px;
+}
+
+/*表情按钮及弹出菜单*/
+/*去除了表情的下拉箭头*/
+.edui-default .edui-for-emotion .edui-icon:before {
+    content: "\e60e";
+}
+.edui-default .edui-for-emotion .edui-popup-content iframe
+{
+    width: 514px;
+    height: 380px;
+    overflow: hidden;
+}
+.edui-default .edui-for-emotion .edui-popup-content
+{
+    position: relative;
+    z-index: 555
+}
+
+.edui-default .edui-for-emotion .edui-splitborder {
+    display: none
+}
+
+.edui-default .edui-for-emotion .edui-splitbutton-body .edui-arrow
+{
+    width: 0
+}
+.edui-default .edui-toolbar .edui-for-emotion  .edui-state-active .edui-splitborder
+{
+    border-left: 1px solid transparent;
+}
+
+/*contextmenu*/
+.edui-default .edui-hassubmenu .edui-arrow {
+    height: 20px;
+    width: 20px;
+    float: right;
+    /*background: url("../images/icons-all.gif") no-repeat 10px -233px;*/
+    font-family: 'edui-iconfont';
+    font-size:12px;
+    line-height:20px;
+    text-align:center;
+}
+
+.edui-default .edui-hassubmenu .edui-arrow:before{
+  content: "\e665";
+}
+
+.edui-default .edui-menu-body .edui-menuitem {
+    padding: 1px;
+}
+
+.edui-default .edui-menuseparator {
+    margin: 2px 0;
+    height: 1px;
+    overflow: hidden;
+}
+
+.edui-default .edui-menuseparator-inner {
+    border-bottom: 1px solid #e2e3e3;
+    margin-left: 29px;
+    margin-right: 1px;
+}
+
+.edui-default .edui-menu-body .edui-state-hover {
+    padding: 0 !important;
+    background-color: var(--edui-color-active-bg);
+    border-radius:3px;
+    border:1px solid var(--edui-color-active-bg);
+}
+
+/*弹出菜单*/
+.edui-default .edui-shortcutmenu {
+    padding: 2px;
+    width: 300px;
+    height: auto;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+/*粘贴弹出菜单*/
+.edui-default .edui-wordpastepop .edui-popup-content{
+    border: none;
+    padding: 0;
+    width: 54px;
+    height: 21px;
+}
+.edui-default  .edui-pasteicon {
+    width: 100%;
+    height: 100%;
+    background-image: url('../images/wordpaste.png');
+    background-position: 0 0;
+}
+
+.edui-default  .edui-pasteicon.edui-state-opened {
+    background-position: 0 -34px;
+}
+
+.edui-default  .edui-pastecontainer {
+    position: relative;
+    visibility: hidden;
+    width: 97px;
+    background: #fff;
+    border: 1px solid #ccc;
+}
+
+.edui-default  .edui-pastecontainer .edui-title {
+    font-weight: bold;
+    background: #F8F8FF;
+    height: 25px;
+    line-height: 25px;
+    font-size: 12px;
+    padding-left: 5px;
+}
+
+.edui-default  .edui-pastecontainer .edui-button {
+    overflow: hidden;
+    margin: 3px 0;
+}
+
+.edui-default  .edui-pastecontainer .edui-button .edui-richtxticon,
+.edui-default  .edui-pastecontainer .edui-button .edui-tagicon,
+.edui-default  .edui-pastecontainer .edui-button .edui-plaintxticon{
+    float: left;
+    cursor: pointer;
+    width: 29px;
+    height: 29px;
+    margin-left: 5px;
+    background-image: url('../images/wordpaste.png');
+    background-repeat: no-repeat;
+}
+.edui-default  .edui-pastecontainer .edui-button .edui-richtxticon {
+    margin-left: 0;
+    background-position: -109px 0;
+}
+.edui-default  .edui-pastecontainer .edui-button .edui-tagicon {
+    background-position: -148px 1px;
+}
+
+.edui-default  .edui-pastecontainer .edui-button .edui-plaintxticon {
+    background-position: -72px 0;
+}
+
+.edui-default  .edui-pastecontainer .edui-button .edui-state-hover .edui-richtxticon {
+    background-position: -109px -34px;
+}
+.edui-default  .edui-pastecontainer .edui-button .edui-state-hover .edui-tagicon{
+    background-position: -148px -34px;
+}
+.edui-default  .edui-pastecontainer .edui-button  .edui-state-hover .edui-plaintxticon{
+    background-position: -72px -34px;
+}
\ No newline at end of file
diff --git a/public/js/ueditor/themes/default/dialogbase.css b/public/js/ueditor/themes/default/dialogbase.css
new file mode 100644
index 0000000..6b78254
--- /dev/null
+++ b/public/js/ueditor/themes/default/dialogbase.css
@@ -0,0 +1,101 @@
+/*弹出对话框页面样式组件
+*/
+
+/*reset
+*/
+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, font, 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 {
+    margin: 0;
+    padding: 0;
+    outline: 0;
+    font-size: 100%;
+}
+
+body {
+    line-height: 1;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+blockquote, q {
+    quotes: none;
+}
+
+ins {
+    text-decoration: none;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+/*module
+*/
+body {
+    background-color: #fff;
+    font: 12px/1.5 sans-serif, "宋体", "Arial Narrow", HELVETICA;
+    color: #646464;
+}
+
+/*tab*/
+.tabhead {
+    position: relative;
+    z-index: 10;
+}
+
+.tabhead span {
+    display: inline-block;
+    padding: 0 5px;
+    height: 30px;
+    border: 1px solid #ccc;
+    background: #EEE;
+    text-align: center;
+    line-height: 30px;
+    cursor: pointer;
+    *margin-right: 5px;
+    border-radius: 3px 3px 0 0;
+}
+
+.tabhead span.focus {
+    height: 31px;
+    border-bottom: none;
+    background: #fff;
+}
+
+.tabbody {
+    position: relative;
+    top: -1px;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+}
+
+/*button*/
+a.button {
+    display: block;
+    text-align: center;
+    line-height: 24px;
+    text-decoration: none;
+    height: 24px;
+    width: 95px;
+    border: 0;
+    color: #838383;
+    background: url(../../themes/default/images/icons-all.gif) no-repeat;
+}
+
+a.button:hover {
+    background-position: 0 -30px;
+}
diff --git a/public/js/ueditor/themes/default/font/iconfont.ttf b/public/js/ueditor/themes/default/font/iconfont.ttf
new file mode 100644
index 0000000..58831d2
Binary files /dev/null and b/public/js/ueditor/themes/default/font/iconfont.ttf differ
diff --git a/public/js/ueditor/themes/default/font/iconfont.woff b/public/js/ueditor/themes/default/font/iconfont.woff
new file mode 100644
index 0000000..e9faed9
Binary files /dev/null and b/public/js/ueditor/themes/default/font/iconfont.woff differ
diff --git a/public/js/ueditor/themes/default/font/iconfont.woff2 b/public/js/ueditor/themes/default/font/iconfont.woff2
new file mode 100644
index 0000000..6f5b43a
Binary files /dev/null and b/public/js/ueditor/themes/default/font/iconfont.woff2 differ
diff --git a/public/js/ueditor/themes/default/images/anchor.gif b/public/js/ueditor/themes/default/images/anchor.gif
new file mode 100644
index 0000000..5aa797b
Binary files /dev/null and b/public/js/ueditor/themes/default/images/anchor.gif differ
diff --git a/public/js/ueditor/themes/default/images/arrow.png b/public/js/ueditor/themes/default/images/arrow.png
new file mode 100644
index 0000000..d900886
Binary files /dev/null and b/public/js/ueditor/themes/default/images/arrow.png differ
diff --git a/public/js/ueditor/themes/default/images/arrow_down.png b/public/js/ueditor/themes/default/images/arrow_down.png
new file mode 100644
index 0000000..e9257e8
Binary files /dev/null and b/public/js/ueditor/themes/default/images/arrow_down.png differ
diff --git a/public/js/ueditor/themes/default/images/arrow_up.png b/public/js/ueditor/themes/default/images/arrow_up.png
new file mode 100644
index 0000000..74277af
Binary files /dev/null and b/public/js/ueditor/themes/default/images/arrow_up.png differ
diff --git a/public/js/ueditor/themes/default/images/button-bg.gif b/public/js/ueditor/themes/default/images/button-bg.gif
new file mode 100644
index 0000000..ec7fa2e
Binary files /dev/null and b/public/js/ueditor/themes/default/images/button-bg.gif differ
diff --git a/public/js/ueditor/themes/default/images/cancelbutton.gif b/public/js/ueditor/themes/default/images/cancelbutton.gif
new file mode 100644
index 0000000..df4bc2c
Binary files /dev/null and b/public/js/ueditor/themes/default/images/cancelbutton.gif differ
diff --git a/public/js/ueditor/themes/default/images/charts.png b/public/js/ueditor/themes/default/images/charts.png
new file mode 100644
index 0000000..713965c
Binary files /dev/null and b/public/js/ueditor/themes/default/images/charts.png differ
diff --git a/public/js/ueditor/themes/default/images/cursor_h.gif b/public/js/ueditor/themes/default/images/cursor_h.gif
new file mode 100644
index 0000000..d7c3e7e
Binary files /dev/null and b/public/js/ueditor/themes/default/images/cursor_h.gif differ
diff --git a/public/js/ueditor/themes/default/images/cursor_h.png b/public/js/ueditor/themes/default/images/cursor_h.png
new file mode 100644
index 0000000..2088fc2
Binary files /dev/null and b/public/js/ueditor/themes/default/images/cursor_h.png differ
diff --git a/public/js/ueditor/themes/default/images/cursor_v.gif b/public/js/ueditor/themes/default/images/cursor_v.gif
new file mode 100644
index 0000000..bb508db
Binary files /dev/null and b/public/js/ueditor/themes/default/images/cursor_v.gif differ
diff --git a/public/js/ueditor/themes/default/images/cursor_v.png b/public/js/ueditor/themes/default/images/cursor_v.png
new file mode 100644
index 0000000..6f39ca3
Binary files /dev/null and b/public/js/ueditor/themes/default/images/cursor_v.png differ
diff --git a/public/js/ueditor/themes/default/images/dialog-title-bg.png b/public/js/ueditor/themes/default/images/dialog-title-bg.png
new file mode 100644
index 0000000..f744f26
Binary files /dev/null and b/public/js/ueditor/themes/default/images/dialog-title-bg.png differ
diff --git a/public/js/ueditor/themes/default/images/filescan.png b/public/js/ueditor/themes/default/images/filescan.png
new file mode 100644
index 0000000..1d27158
Binary files /dev/null and b/public/js/ueditor/themes/default/images/filescan.png differ
diff --git a/public/js/ueditor/themes/default/images/highlighted.gif b/public/js/ueditor/themes/default/images/highlighted.gif
new file mode 100644
index 0000000..9272b49
Binary files /dev/null and b/public/js/ueditor/themes/default/images/highlighted.gif differ
diff --git a/public/js/ueditor/themes/default/images/icons-all.gif b/public/js/ueditor/themes/default/images/icons-all.gif
new file mode 100644
index 0000000..21915e5
Binary files /dev/null and b/public/js/ueditor/themes/default/images/icons-all.gif differ
diff --git a/public/js/ueditor/themes/default/images/icons.gif b/public/js/ueditor/themes/default/images/icons.gif
new file mode 100644
index 0000000..7abd30a
Binary files /dev/null and b/public/js/ueditor/themes/default/images/icons.gif differ
diff --git a/public/js/ueditor/themes/default/images/icons.png b/public/js/ueditor/themes/default/images/icons.png
new file mode 100644
index 0000000..c015e3a
Binary files /dev/null and b/public/js/ueditor/themes/default/images/icons.png differ
diff --git a/public/js/ueditor/themes/default/images/img-cracked.png b/public/js/ueditor/themes/default/images/img-cracked.png
new file mode 100644
index 0000000..3b1d389
Binary files /dev/null and b/public/js/ueditor/themes/default/images/img-cracked.png differ
diff --git a/public/js/ueditor/themes/default/images/loaderror.png b/public/js/ueditor/themes/default/images/loaderror.png
new file mode 100644
index 0000000..35ff333
Binary files /dev/null and b/public/js/ueditor/themes/default/images/loaderror.png differ
diff --git a/public/js/ueditor/themes/default/images/loading.gif b/public/js/ueditor/themes/default/images/loading.gif
new file mode 100644
index 0000000..b713e27
Binary files /dev/null and b/public/js/ueditor/themes/default/images/loading.gif differ
diff --git a/public/js/ueditor/themes/default/images/lock.gif b/public/js/ueditor/themes/default/images/lock.gif
new file mode 100644
index 0000000..b4e6d78
Binary files /dev/null and b/public/js/ueditor/themes/default/images/lock.gif differ
diff --git a/public/js/ueditor/themes/default/images/neweditor-tab-bg.png b/public/js/ueditor/themes/default/images/neweditor-tab-bg.png
new file mode 100644
index 0000000..8f398b0
Binary files /dev/null and b/public/js/ueditor/themes/default/images/neweditor-tab-bg.png differ
diff --git a/public/js/ueditor/themes/default/images/pagebreak.gif b/public/js/ueditor/themes/default/images/pagebreak.gif
new file mode 100644
index 0000000..8d1cffd
Binary files /dev/null and b/public/js/ueditor/themes/default/images/pagebreak.gif differ
diff --git a/public/js/ueditor/themes/default/images/scale.png b/public/js/ueditor/themes/default/images/scale.png
new file mode 100644
index 0000000..f45adb5
Binary files /dev/null and b/public/js/ueditor/themes/default/images/scale.png differ
diff --git a/public/js/ueditor/themes/default/images/sortable.png b/public/js/ueditor/themes/default/images/sortable.png
new file mode 100644
index 0000000..1bca649
Binary files /dev/null and b/public/js/ueditor/themes/default/images/sortable.png differ
diff --git a/public/js/ueditor/themes/default/images/spacer.gif b/public/js/ueditor/themes/default/images/spacer.gif
new file mode 100644
index 0000000..5bfd67a
Binary files /dev/null and b/public/js/ueditor/themes/default/images/spacer.gif differ
diff --git a/public/js/ueditor/themes/default/images/sparator_v.png b/public/js/ueditor/themes/default/images/sparator_v.png
new file mode 100644
index 0000000..8cf5662
Binary files /dev/null and b/public/js/ueditor/themes/default/images/sparator_v.png differ
diff --git a/public/js/ueditor/themes/default/images/table-cell-align.png b/public/js/ueditor/themes/default/images/table-cell-align.png
new file mode 100644
index 0000000..ddf4285
Binary files /dev/null and b/public/js/ueditor/themes/default/images/table-cell-align.png differ
diff --git a/public/js/ueditor/themes/default/images/tangram-colorpicker.png b/public/js/ueditor/themes/default/images/tangram-colorpicker.png
new file mode 100644
index 0000000..738e500
Binary files /dev/null and b/public/js/ueditor/themes/default/images/tangram-colorpicker.png differ
diff --git a/public/js/ueditor/themes/default/images/toolbar_bg.png b/public/js/ueditor/themes/default/images/toolbar_bg.png
new file mode 100644
index 0000000..7ab685f
Binary files /dev/null and b/public/js/ueditor/themes/default/images/toolbar_bg.png differ
diff --git a/public/js/ueditor/themes/default/images/unhighlighted.gif b/public/js/ueditor/themes/default/images/unhighlighted.gif
new file mode 100644
index 0000000..7ad0b67
Binary files /dev/null and b/public/js/ueditor/themes/default/images/unhighlighted.gif differ
diff --git a/public/js/ueditor/themes/default/images/upload.png b/public/js/ueditor/themes/default/images/upload.png
new file mode 100644
index 0000000..08d4d92
Binary files /dev/null and b/public/js/ueditor/themes/default/images/upload.png differ
diff --git a/public/js/ueditor/themes/default/images/videologo.gif b/public/js/ueditor/themes/default/images/videologo.gif
new file mode 100644
index 0000000..555af74
Binary files /dev/null and b/public/js/ueditor/themes/default/images/videologo.gif differ
diff --git a/public/js/ueditor/themes/default/images/word.gif b/public/js/ueditor/themes/default/images/word.gif
new file mode 100644
index 0000000..9ef5d09
Binary files /dev/null and b/public/js/ueditor/themes/default/images/word.gif differ
diff --git a/public/js/ueditor/themes/default/images/wordpaste.png b/public/js/ueditor/themes/default/images/wordpaste.png
new file mode 100644
index 0000000..9367758
Binary files /dev/null and b/public/js/ueditor/themes/default/images/wordpaste.png differ
diff --git a/public/js/ueditor/themes/iframe.css b/public/js/ueditor/themes/iframe.css
new file mode 100644
index 0000000..3e4032a
--- /dev/null
+++ b/public/js/ueditor/themes/iframe.css
@@ -0,0 +1,56 @@
+body {
+  font-family: "Microsoft YaHei", Helvetica, "STHeiti STXihei", "Microsoft JhengHei", Tohoma, Arial;
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+a {
+  color: #09f;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: #09f;
+  text-decoration: none;
+}
+
+blockquote {
+  padding: 0 0 0 15px;
+  margin: 0 0 18px;
+  border-left: 5px solid #EEE;
+}
+
+img + br {
+  display: block;
+  padding: 4px 0;
+  content: ' ';
+}
+
+body p {
+  margin-bottom: 1em;
+}
+
+iframe {
+  border: none;
+}
+
+img {
+  max-width: 100%;
+}
+
+img[data-word-image]{
+  cursor: pointer;
+}
+
+pre {
+  margin: .5em 0;
+  padding: .4em .6em;
+  border-radius: 8px;
+  background: #f8f8f8;
+  line-height: 1.5;
+}
+
+
diff --git a/public/js/ueditor/third-party/SyntaxHighlighter/shCore.js b/public/js/ueditor/third-party/SyntaxHighlighter/shCore.js
new file mode 100644
index 0000000..3249184
--- /dev/null
+++ b/public/js/ueditor/third-party/SyntaxHighlighter/shCore.js
@@ -0,0 +1,3655 @@
+// XRegExp 1.5.1
+// (c) 2007-2012 Steven Levithan
+// MIT License
+// <http://xregexp.com>
+// Provides an augmented, extensible, cross-browser implementation of regular expressions,
+// including support for additional syntax, flags, and methods
+
+var XRegExp;
+
+if (XRegExp) {
+    // Avoid running twice, since that would break references to native globals
+    throw Error("can't load XRegExp twice in the same frame");
+}
+
+// Run within an anonymous function to protect variables and avoid new globals
+(function (undefined) {
+
+    //---------------------------------
+    //  Constructor
+    //---------------------------------
+
+    // Accepts a pattern and flags; returns a new, extended `RegExp` object. Differs from a native
+    // regular expression in that additional syntax and flags are supported and cross-browser
+    // syntax inconsistencies are ameliorated. `XRegExp(/regex/)` clones an existing regex and
+    // converts to type XRegExp
+    XRegExp = function (pattern, flags) {
+        var output = [],
+            currScope = XRegExp.OUTSIDE_CLASS,
+            pos = 0,
+            context, tokenResult, match, chr, regex;
+
+        if (XRegExp.isRegExp(pattern)) {
+            if (flags !== undefined)
+                throw TypeError("can't supply flags when constructing one RegExp from another");
+            return clone(pattern);
+        }
+        // Tokens become part of the regex construction process, so protect against infinite
+        // recursion when an XRegExp is constructed within a token handler or trigger
+        if (isInsideConstructor)
+            throw Error("can't call the XRegExp constructor within token definition functions");
+
+        flags = flags || "";
+        context = { // `this` object for custom tokens
+            hasNamedCapture: false,
+            captureNames: [],
+            hasFlag: function (flag) {return flags.indexOf(flag) > -1;},
+            setFlag: function (flag) {flags += flag;}
+        };
+
+        while (pos < pattern.length) {
+            // Check for custom tokens at the current position
+            tokenResult = runTokens(pattern, pos, currScope, context);
+
+            if (tokenResult) {
+                output.push(tokenResult.output);
+                pos += (tokenResult.match[0].length || 1);
+            } else {
+                // Check for native multicharacter metasequences (excluding character classes) at
+                // the current position
+                if (match = nativ.exec.call(nativeTokens[currScope], pattern.slice(pos))) {
+                    output.push(match[0]);
+                    pos += match[0].length;
+                } else {
+                    chr = pattern.charAt(pos);
+                    if (chr === "[")
+                        currScope = XRegExp.INSIDE_CLASS;
+                    else if (chr === "]")
+                        currScope = XRegExp.OUTSIDE_CLASS;
+                    // Advance position one character
+                    output.push(chr);
+                    pos++;
+                }
+            }
+        }
+
+        regex = RegExp(output.join(""), nativ.replace.call(flags, flagClip, ""));
+        regex._xregexp = {
+            source: pattern,
+            captureNames: context.hasNamedCapture ? context.captureNames : null
+        };
+        return regex;
+    };
+
+
+    //---------------------------------
+    //  Public properties
+    //---------------------------------
+
+    XRegExp.version = "1.5.1";
+
+    // Token scope bitflags
+    XRegExp.INSIDE_CLASS = 1;
+    XRegExp.OUTSIDE_CLASS = 2;
+
+
+    //---------------------------------
+    //  Private variables
+    //---------------------------------
+
+    var replacementToken = /\$(?:(\d\d?|[$&`'])|{([$\w]+)})/g,
+        flagClip = /[^gimy]+|([\s\S])(?=[\s\S]*\1)/g, // Nonnative and duplicate flags
+        quantifier = /^(?:[?*+]|{\d+(?:,\d*)?})\??/,
+        isInsideConstructor = false,
+        tokens = [],
+    // Copy native globals for reference ("native" is an ES3 reserved keyword)
+        nativ = {
+            exec: RegExp.prototype.exec,
+            test: RegExp.prototype.test,
+            match: String.prototype.match,
+            replace: String.prototype.replace,
+            split: String.prototype.split
+        },
+        compliantExecNpcg = nativ.exec.call(/()??/, "")[1] === undefined, // check `exec` handling of nonparticipating capturing groups
+        compliantLastIndexIncrement = function () {
+            var x = /^/g;
+            nativ.test.call(x, "");
+            return !x.lastIndex;
+        }(),
+        hasNativeY = RegExp.prototype.sticky !== undefined,
+        nativeTokens = {};
+
+    // `nativeTokens` match native multicharacter metasequences only (including deprecated octals,
+    // excluding character classes)
+    nativeTokens[XRegExp.INSIDE_CLASS] = /^(?:\\(?:[0-3][0-7]{0,2}|[4-7][0-7]?|x[\dA-Fa-f]{2}|u[\dA-Fa-f]{4}|c[A-Za-z]|[\s\S]))/;
+    nativeTokens[XRegExp.OUTSIDE_CLASS] = /^(?:\\(?:0(?:[0-3][0-7]{0,2}|[4-7][0-7]?)?|[1-9]\d*|x[\dA-Fa-f]{2}|u[\dA-Fa-f]{4}|c[A-Za-z]|[\s\S])|\(\?[:=!]|[?*+]\?|{\d+(?:,\d*)?}\??)/;
+
+
+    //---------------------------------
+    //  Public methods
+    //---------------------------------
+
+    // Lets you extend or change XRegExp syntax and create custom flags. This is used internally by
+    // the XRegExp library and can be used to create XRegExp plugins. This function is intended for
+    // users with advanced knowledge of JavaScript's regular expression syntax and behavior. It can
+    // be disabled by `XRegExp.freezeTokens`
+    XRegExp.addToken = function (regex, handler, scope, trigger) {
+        tokens.push({
+            pattern: clone(regex, "g" + (hasNativeY ? "y" : "")),
+            handler: handler,
+            scope: scope || XRegExp.OUTSIDE_CLASS,
+            trigger: trigger || null
+        });
+    };
+
+    // Accepts a pattern and flags; returns an extended `RegExp` object. If the pattern and flag
+    // combination has previously been cached, the cached copy is returned; otherwise the newly
+    // created regex is cached
+    XRegExp.cache = function (pattern, flags) {
+        var key = pattern + "/" + (flags || "");
+        return XRegExp.cache[key] || (XRegExp.cache[key] = XRegExp(pattern, flags));
+    };
+
+    // Accepts a `RegExp` instance; returns a copy with the `/g` flag set. The copy has a fresh
+    // `lastIndex` (set to zero). If you want to copy a regex without forcing the `global`
+    // property, use `XRegExp(regex)`. Do not use `RegExp(regex)` because it will not preserve
+    // special properties required for named capture
+    XRegExp.copyAsGlobal = function (regex) {
+        return clone(regex, "g");
+    };
+
+    // Accepts a string; returns the string with regex metacharacters escaped. The returned string
+    // can safely be used at any point within a regex to match the provided literal string. Escaped
+    // characters are [ ] { } ( ) * + ? - . , \ ^ $ | # and whitespace
+    XRegExp.escape = function (str) {
+        return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+    };
+
+    // Accepts a string to search, regex to search with, position to start the search within the
+    // string (default: 0), and an optional Boolean indicating whether matches must start at-or-
+    // after the position or at the specified position only. This function ignores the `lastIndex`
+    // of the provided regex in its own handling, but updates the property for compatibility
+    XRegExp.execAt = function (str, regex, pos, anchored) {
+        var r2 = clone(regex, "g" + ((anchored && hasNativeY) ? "y" : "")),
+            match;
+        r2.lastIndex = pos = pos || 0;
+        match = r2.exec(str); // Run the altered `exec` (required for `lastIndex` fix, etc.)
+        if (anchored && match && match.index !== pos)
+            match = null;
+        if (regex.global)
+            regex.lastIndex = match ? r2.lastIndex : 0;
+        return match;
+    };
+
+    // Breaks the unrestorable link to XRegExp's private list of tokens, thereby preventing
+    // syntax and flag changes. Should be run after XRegExp and any plugins are loaded
+    XRegExp.freezeTokens = function () {
+        XRegExp.addToken = function () {
+            throw Error("can't run addToken after freezeTokens");
+        };
+    };
+
+    // Accepts any value; returns a Boolean indicating whether the argument is a `RegExp` object.
+    // Note that this is also `true` for regex literals and regexes created by the `XRegExp`
+    // constructor. This works correctly for variables created in another frame, when `instanceof`
+    // and `constructor` checks would fail to work as intended
+    XRegExp.isRegExp = function (o) {
+        return Object.prototype.toString.call(o) === "[object RegExp]";
+    };
+
+    // Executes `callback` once per match within `str`. Provides a simpler and cleaner way to
+    // iterate over regex matches compared to the traditional approaches of subverting
+    // `String.prototype.replace` or repeatedly calling `exec` within a `while` loop
+    XRegExp.iterate = function (str, regex, callback, context) {
+        var r2 = clone(regex, "g"),
+            i = -1, match;
+        while (match = r2.exec(str)) { // Run the altered `exec` (required for `lastIndex` fix, etc.)
+            if (regex.global)
+                regex.lastIndex = r2.lastIndex; // Doing this to follow expectations if `lastIndex` is checked within `callback`
+            callback.call(context, match, ++i, str, regex);
+            if (r2.lastIndex === match.index)
+                r2.lastIndex++;
+        }
+        if (regex.global)
+            regex.lastIndex = 0;
+    };
+
+    // Accepts a string and an array of regexes; returns the result of using each successive regex
+    // to search within the matches of the previous regex. The array of regexes can also contain
+    // objects with `regex` and `backref` properties, in which case the named or numbered back-
+    // references specified are passed forward to the next regex or returned. E.g.:
+    // var xregexpImgFileNames = XRegExp.matchChain(html, [
+    //     {regex: /<img\b([^>]+)>/i, backref: 1}, // <img> tag attributes
+    //     {regex: XRegExp('(?ix) \\s src=" (?<src> [^"]+ )'), backref: "src"}, // src attribute values
+    //     {regex: XRegExp("^http://xregexp\\.com(/[^#?]+)", "i"), backref: 1}, // xregexp.com paths
+    //     /[^\/]+$/ // filenames (strip directory paths)
+    // ]);
+    XRegExp.matchChain = function (str, chain) {
+        return function recurseChain (values, level) {
+            var item = chain[level].regex ? chain[level] : {regex: chain[level]},
+                regex = clone(item.regex, "g"),
+                matches = [], i;
+            for (i = 0; i < values.length; i++) {
+                XRegExp.iterate(values[i], regex, function (match) {
+                    matches.push(item.backref ? (match[item.backref] || "") : match[0]);
+                });
+            }
+            return ((level === chain.length - 1) || !matches.length) ?
+                matches : recurseChain(matches, level + 1);
+        }([str], 0);
+    };
+
+
+    //---------------------------------
+    //  New RegExp prototype methods
+    //---------------------------------
+
+    // Accepts a context object and arguments array; returns the result of calling `exec` with the
+    // first value in the arguments array. the context is ignored but is accepted for congruity
+    // with `Function.prototype.apply`
+    RegExp.prototype.apply = function (context, args) {
+        return this.exec(args[0]);
+    };
+
+    // Accepts a context object and string; returns the result of calling `exec` with the provided
+    // string. the context is ignored but is accepted for congruity with `Function.prototype.call`
+    RegExp.prototype.call = function (context, str) {
+        return this.exec(str);
+    };
+
+
+    //---------------------------------
+    //  Overriden native methods
+    //---------------------------------
+
+    // Adds named capture support (with backreferences returned as `result.name`), and fixes two
+    // cross-browser issues per ES3:
+    // - Captured values for nonparticipating capturing groups should be returned as `undefined`,
+    //   rather than the empty string.
+    // - `lastIndex` should not be incremented after zero-length matches.
+    RegExp.prototype.exec = function (str) {
+        var match, name, r2, origLastIndex;
+        if (!this.global)
+            origLastIndex = this.lastIndex;
+        match = nativ.exec.apply(this, arguments);
+        if (match) {
+            // Fix browsers whose `exec` methods don't consistently return `undefined` for
+            // nonparticipating capturing groups
+            if (!compliantExecNpcg && match.length > 1 && indexOf(match, "") > -1) {
+                r2 = RegExp(this.source, nativ.replace.call(getNativeFlags(this), "g", ""));
+                // Using `str.slice(match.index)` rather than `match[0]` in case lookahead allowed
+                // matching due to characters outside the match
+                nativ.replace.call((str + "").slice(match.index), r2, function () {
+                    for (var i = 1; i < arguments.length - 2; i++) {
+                        if (arguments[i] === undefined)
+                            match[i] = undefined;
+                    }
+                });
+            }
+            // Attach named capture properties
+            if (this._xregexp && this._xregexp.captureNames) {
+                for (var i = 1; i < match.length; i++) {
+                    name = this._xregexp.captureNames[i - 1];
+                    if (name)
+                        match[name] = match[i];
+                }
+            }
+            // Fix browsers that increment `lastIndex` after zero-length matches
+            if (!compliantLastIndexIncrement && this.global && !match[0].length && (this.lastIndex > match.index))
+                this.lastIndex--;
+        }
+        if (!this.global)
+            this.lastIndex = origLastIndex; // Fix IE, Opera bug (last tested IE 9.0.5, Opera 11.61 on Windows)
+        return match;
+    };
+
+    // Fix browser bugs in native method
+    RegExp.prototype.test = function (str) {
+        // Use the native `exec` to skip some processing overhead, even though the altered
+        // `exec` would take care of the `lastIndex` fixes
+        var match, origLastIndex;
+        if (!this.global)
+            origLastIndex = this.lastIndex;
+        match = nativ.exec.call(this, str);
+        // Fix browsers that increment `lastIndex` after zero-length matches
+        if (match && !compliantLastIndexIncrement && this.global && !match[0].length && (this.lastIndex > match.index))
+            this.lastIndex--;
+        if (!this.global)
+            this.lastIndex = origLastIndex; // Fix IE, Opera bug (last tested IE 9.0.5, Opera 11.61 on Windows)
+        return !!match;
+    };
+
+    // Adds named capture support and fixes browser bugs in native method
+    String.prototype.match = function (regex) {
+        if (!XRegExp.isRegExp(regex))
+            regex = RegExp(regex); // Native `RegExp`
+        if (regex.global) {
+            var result = nativ.match.apply(this, arguments);
+            regex.lastIndex = 0; // Fix IE bug
+            return result;
+        }
+        return regex.exec(this); // Run the altered `exec`
+    };
+
+    // Adds support for `${n}` tokens for named and numbered backreferences in replacement text,
+    // and provides named backreferences to replacement functions as `arguments[0].name`. Also
+    // fixes cross-browser differences in replacement text syntax when performing a replacement
+    // using a nonregex search value, and the value of replacement regexes' `lastIndex` property
+    // during replacement iterations. Note that this doesn't support SpiderMonkey's proprietary
+    // third (`flags`) parameter
+    String.prototype.replace = function (search, replacement) {
+        var isRegex = XRegExp.isRegExp(search),
+            captureNames, result, str, origLastIndex;
+
+        // There are too many combinations of search/replacement types/values and browser bugs that
+        // preclude passing to native `replace`, so don't try
+        //if (...)
+        //    return nativ.replace.apply(this, arguments);
+
+        if (isRegex) {
+            if (search._xregexp)
+                captureNames = search._xregexp.captureNames; // Array or `null`
+            if (!search.global)
+                origLastIndex = search.lastIndex;
+        } else {
+            search = search + ""; // Type conversion
+        }
+
+        if (Object.prototype.toString.call(replacement) === "[object Function]") {
+            result = nativ.replace.call(this + "", search, function () {
+                if (captureNames) {
+                    // Change the `arguments[0]` string primitive to a String object which can store properties
+                    arguments[0] = new String(arguments[0]);
+                    // Store named backreferences on `arguments[0]`
+                    for (var i = 0; i < captureNames.length; i++) {
+                        if (captureNames[i])
+                            arguments[0][captureNames[i]] = arguments[i + 1];
+                    }
+                }
+                // Update `lastIndex` before calling `replacement` (fix browsers)
+                if (isRegex && search.global)
+                    search.lastIndex = arguments[arguments.length - 2] + arguments[0].length;
+                return replacement.apply(null, arguments);
+            });
+        } else {
+            str = this + ""; // Type conversion, so `args[args.length - 1]` will be a string (given nonstring `this`)
+            result = nativ.replace.call(str, search, function () {
+                var args = arguments; // Keep this function's `arguments` available through closure
+                return nativ.replace.call(replacement + "", replacementToken, function ($0, $1, $2) {
+                    // Numbered backreference (without delimiters) or special variable
+                    if ($1) {
+                        switch ($1) {
+                            case "$": return "$";
+                            case "&": return args[0];
+                            case "`": return args[args.length - 1].slice(0, args[args.length - 2]);
+                            case "'": return args[args.length - 1].slice(args[args.length - 2] + args[0].length);
+                            // Numbered backreference
+                            default:
+                                // What does "$10" mean?
+                                // - Backreference 10, if 10 or more capturing groups exist
+                                // - Backreference 1 followed by "0", if 1-9 capturing groups exist
+                                // - Otherwise, it's the string "$10"
+                                // Also note:
+                                // - Backreferences cannot be more than two digits (enforced by `replacementToken`)
+                                // - "$01" is equivalent to "$1" if a capturing group exists, otherwise it's the string "$01"
+                                // - There is no "$0" token ("$&" is the entire match)
+                                var literalNumbers = "";
+                                $1 = +$1; // Type conversion; drop leading zero
+                                if (!$1) // `$1` was "0" or "00"
+                                    return $0;
+                                while ($1 > args.length - 3) {
+                                    literalNumbers = String.prototype.slice.call($1, -1) + literalNumbers;
+                                    $1 = Math.floor($1 / 10); // Drop the last digit
+                                }
+                                return ($1 ? args[$1] || "" : "$") + literalNumbers;
+                        }
+                        // Named backreference or delimited numbered backreference
+                    } else {
+                        // What does "${n}" mean?
+                        // - Backreference to numbered capture n. Two differences from "$n":
+                        //   - n can be more than two digits
+                        //   - Backreference 0 is allowed, and is the entire match
+                        // - Backreference to named capture n, if it exists and is not a number overridden by numbered capture
+                        // - Otherwise, it's the string "${n}"
+                        var n = +$2; // Type conversion; drop leading zeros
+                        if (n <= args.length - 3)
+                            return args[n];
+                        n = captureNames ? indexOf(captureNames, $2) : -1;
+                        return n > -1 ? args[n + 1] : $0;
+                    }
+                });
+            });
+        }
+
+        if (isRegex) {
+            if (search.global)
+                search.lastIndex = 0; // Fix IE, Safari bug (last tested IE 9.0.5, Safari 5.1.2 on Windows)
+            else
+                search.lastIndex = origLastIndex; // Fix IE, Opera bug (last tested IE 9.0.5, Opera 11.61 on Windows)
+        }
+
+        return result;
+    };
+
+    // A consistent cross-browser, ES3 compliant `split`
+    String.prototype.split = function (s /* separator */, limit) {
+        // If separator `s` is not a regex, use the native `split`
+        if (!XRegExp.isRegExp(s))
+            return nativ.split.apply(this, arguments);
+
+        var str = this + "", // Type conversion
+            output = [],
+            lastLastIndex = 0,
+            match, lastLength;
+
+        // Behavior for `limit`: if it's...
+        // - `undefined`: No limit
+        // - `NaN` or zero: Return an empty array
+        // - A positive number: Use `Math.floor(limit)`
+        // - A negative number: No limit
+        // - Other: Type-convert, then use the above rules
+        if (limit === undefined || +limit < 0) {
+            limit = Infinity;
+        } else {
+            limit = Math.floor(+limit);
+            if (!limit)
+                return [];
+        }
+
+        // This is required if not `s.global`, and it avoids needing to set `s.lastIndex` to zero
+        // and restore it to its original value when we're done using the regex
+        s = XRegExp.copyAsGlobal(s);
+
+        while (match = s.exec(str)) { // Run the altered `exec` (required for `lastIndex` fix, etc.)
+            if (s.lastIndex > lastLastIndex) {
+                output.push(str.slice(lastLastIndex, match.index));
+
+                if (match.length > 1 && match.index < str.length)
+                    Array.prototype.push.apply(output, match.slice(1));
+
+                lastLength = match[0].length;
+                lastLastIndex = s.lastIndex;
+
+                if (output.length >= limit)
+                    break;
+            }
+
+            if (s.lastIndex === match.index)
+                s.lastIndex++;
+        }
+
+        if (lastLastIndex === str.length) {
+            if (!nativ.test.call(s, "") || lastLength)
+                output.push("");
+        } else {
+            output.push(str.slice(lastLastIndex));
+        }
+
+        return output.length > limit ? output.slice(0, limit) : output;
+    };
+
+
+    //---------------------------------
+    //  Private helper functions
+    //---------------------------------
+
+    // Supporting function for `XRegExp`, `XRegExp.copyAsGlobal`, etc. Returns a copy of a `RegExp`
+    // instance with a fresh `lastIndex` (set to zero), preserving properties required for named
+    // capture. Also allows adding new flags in the process of copying the regex
+    function clone (regex, additionalFlags) {
+        if (!XRegExp.isRegExp(regex))
+            throw TypeError("type RegExp expected");
+        var x = regex._xregexp;
+        regex = XRegExp(regex.source, getNativeFlags(regex) + (additionalFlags || ""));
+        if (x) {
+            regex._xregexp = {
+                source: x.source,
+                captureNames: x.captureNames ? x.captureNames.slice(0) : null
+            };
+        }
+        return regex;
+    }
+
+    function getNativeFlags (regex) {
+        return (regex.global     ? "g" : "") +
+            (regex.ignoreCase ? "i" : "") +
+            (regex.multiline  ? "m" : "") +
+            (regex.extended   ? "x" : "") + // Proposed for ES4; included in AS3
+            (regex.sticky     ? "y" : "");
+    }
+
+    function runTokens (pattern, index, scope, context) {
+        var i = tokens.length,
+            result, match, t;
+        // Protect against constructing XRegExps within token handler and trigger functions
+        isInsideConstructor = true;
+        // Must reset `isInsideConstructor`, even if a `trigger` or `handler` throws
+        try {
+            while (i--) { // Run in reverse order
+                t = tokens[i];
+                if ((scope & t.scope) && (!t.trigger || t.trigger.call(context))) {
+                    t.pattern.lastIndex = index;
+                    match = t.pattern.exec(pattern); // Running the altered `exec` here allows use of named backreferences, etc.
+                    if (match && match.index === index) {
+                        result = {
+                            output: t.handler.call(context, match, scope),
+                            match: match
+                        };
+                        break;
+                    }
+                }
+            }
+        } catch (err) {
+            throw err;
+        } finally {
+            isInsideConstructor = false;
+        }
+        return result;
+    }
+
+    function indexOf (array, item, from) {
+        if (Array.prototype.indexOf) // Use the native array method if available
+            return array.indexOf(item, from);
+        for (var i = from || 0; i < array.length; i++) {
+            if (array[i] === item)
+                return i;
+        }
+        return -1;
+    }
+
+
+    //---------------------------------
+    //  Built-in tokens
+    //---------------------------------
+
+    // Augment XRegExp's regular expression syntax and flags. Note that when adding tokens, the
+    // third (`scope`) argument defaults to `XRegExp.OUTSIDE_CLASS`
+
+    // Comment pattern: (?# )
+    XRegExp.addToken(
+        /\(\?#[^)]*\)/,
+        function (match) {
+            // Keep tokens separated unless the following token is a quantifier
+            return nativ.test.call(quantifier, match.input.slice(match.index + match[0].length)) ? "" : "(?:)";
+        }
+    );
+
+    // Capturing group (match the opening parenthesis only).
+    // Required for support of named capturing groups
+    XRegExp.addToken(
+        /\((?!\?)/,
+        function () {
+            this.captureNames.push(null);
+            return "(";
+        }
+    );
+
+    // Named capturing group (match the opening delimiter only): (?<name>
+    XRegExp.addToken(
+        /\(\?<([$\w]+)>/,
+        function (match) {
+            this.captureNames.push(match[1]);
+            this.hasNamedCapture = true;
+            return "(";
+        }
+    );
+
+    // Named backreference: \k<name>
+    XRegExp.addToken(
+        /\\k<([\w$]+)>/,
+        function (match) {
+            var index = indexOf(this.captureNames, match[1]);
+            // Keep backreferences separate from subsequent literal numbers. Preserve back-
+            // references to named groups that are undefined at this point as literal strings
+            return index > -1 ?
+                "\\" + (index + 1) + (isNaN(match.input.charAt(match.index + match[0].length)) ? "" : "(?:)") :
+                match[0];
+        }
+    );
+
+    // Empty character class: [] or [^]
+    XRegExp.addToken(
+        /\[\^?]/,
+        function (match) {
+            // For cross-browser compatibility with ES3, convert [] to \b\B and [^] to [\s\S].
+            // (?!) should work like \b\B, but is unreliable in Firefox
+            return match[0] === "[]" ? "\\b\\B" : "[\\s\\S]";
+        }
+    );
+
+    // Mode modifier at the start of the pattern only, with any combination of flags imsx: (?imsx)
+    // Does not support x(?i), (?-i), (?i-m), (?i: ), (?i)(?m), etc.
+    XRegExp.addToken(
+        /^\(\?([imsx]+)\)/,
+        function (match) {
+            this.setFlag(match[1]);
+            return "";
+        }
+    );
+
+    // Whitespace and comments, in free-spacing (aka extended) mode only
+    XRegExp.addToken(
+        /(?:\s+|#.*)+/,
+        function (match) {
+            // Keep tokens separated unless the following token is a quantifier
+            return nativ.test.call(quantifier, match.input.slice(match.index + match[0].length)) ? "" : "(?:)";
+        },
+        XRegExp.OUTSIDE_CLASS,
+        function () {return this.hasFlag("x");}
+    );
+
+    // Dot, in dotall (aka singleline) mode only
+    XRegExp.addToken(
+        /\./,
+        function () {return "[\\s\\S]";},
+        XRegExp.OUTSIDE_CLASS,
+        function () {return this.hasFlag("s");}
+    );
+
+
+    //---------------------------------
+    //  Backward compatibility
+    //---------------------------------
+
+    // Uncomment the following block for compatibility with XRegExp 1.0-1.2:
+    /*
+     XRegExp.matchWithinChain = XRegExp.matchChain;
+     RegExp.prototype.addFlags = function (s) {return clone(this, s);};
+     RegExp.prototype.execAll = function (s) {var r = []; XRegExp.iterate(s, this, function (m) {r.push(m);}); return r;};
+     RegExp.prototype.forEachExec = function (s, f, c) {return XRegExp.iterate(s, this, f, c);};
+     RegExp.prototype.validate = function (s) {var r = RegExp("^(?:" + this.source + ")$(?!\\s)", getNativeFlags(this)); if (this.global) this.lastIndex = 0; return s.search(r) === 0;};
+     */
+
+})();
+
+//
+// Begin anonymous function. This is used to contain local scope variables without polutting global scope.
+//
+if (typeof(SyntaxHighlighter) == 'undefined') var SyntaxHighlighter = function() {
+
+// CommonJS
+    if (typeof(require) != 'undefined' && typeof(XRegExp) == 'undefined')
+    {
+        XRegExp = require('XRegExp').XRegExp;
+    }
+
+// Shortcut object which will be assigned to the SyntaxHighlighter variable.
+// This is a shorthand for local reference in order to avoid long namespace
+// references to SyntaxHighlighter.whatever...
+    var sh = {
+        defaults : {
+            /** Additional CSS class names to be added to highlighter elements. */
+            'class-name' : '',
+
+            /** First line number. */
+            'first-line' : 1,
+
+            /**
+             * Pads line numbers. Possible values are:
+             *
+             *   false - don't pad line numbers.
+             *   true  - automaticaly pad numbers with minimum required number of leading zeroes.
+             *   [int] - length up to which pad line numbers.
+             */
+            'pad-line-numbers' : false,
+
+            /** Lines to highlight. */
+            'highlight' : false,
+
+            /** Title to be displayed above the code block. */
+            'title' : null,
+
+            /** Enables or disables smart tabs. */
+            'smart-tabs' : true,
+
+            /** Gets or sets tab size. */
+            'tab-size' : 4,
+
+            /** Enables or disables gutter. */
+            'gutter' : true,
+
+            /** Enables or disables toolbar. */
+            'toolbar' : true,
+
+            /** Enables quick code copy and paste from double click. */
+            'quick-code' : true,
+
+            /** Forces code view to be collapsed. */
+            'collapse' : false,
+
+            /** Enables or disables automatic links. */
+            'auto-links' : false,
+
+            /** Gets or sets light mode. Equavalent to turning off gutter and toolbar. */
+            'light' : false,
+
+            'unindent' : true,
+
+            'html-script' : false
+        },
+
+        config : {
+            space : '&nbsp;',
+
+            /** Enables use of <SCRIPT type="syntaxhighlighter" /> tags. */
+            useScriptTags : true,
+
+            /** Blogger mode flag. */
+            bloggerMode : false,
+
+            stripBrs : false,
+
+            /** Name of the tag that SyntaxHighlighter will automatically look for. */
+            tagName : 'pre',
+
+            strings : {
+                expandSource : 'expand source',
+                help : '?',
+                alert: 'SyntaxHighlighter\n\n',
+                noBrush : 'Can\'t find brush for: ',
+                brushNotHtmlScript : 'Brush wasn\'t configured for html-script option: ',
+
+                // this is populated by the build script
+                aboutDialog : '@ABOUT@'
+            }
+        },
+
+        /** Internal 'global' variables. */
+        vars : {
+            discoveredBrushes : null,
+            highlighters : {}
+        },
+
+        /** This object is populated by user included external brush files. */
+        brushes : {},
+
+        /** Common regular expressions. */
+        regexLib : {
+            multiLineCComments			: /\/\*[\s\S]*?\*\//gm,
+            singleLineCComments			: /\/\/.*$/gm,
+            singleLinePerlComments		: /#.*$/gm,
+            doubleQuotedString			: /"([^\\"\n]|\\.)*"/g,
+            singleQuotedString			: /'([^\\'\n]|\\.)*'/g,
+            multiLineDoubleQuotedString	: new XRegExp('"([^\\\\"]|\\\\.)*"', 'gs'),
+            multiLineSingleQuotedString	: new XRegExp("'([^\\\\']|\\\\.)*'", 'gs'),
+            xmlComments					: /(&lt;|<)!--[\s\S]*?--(&gt;|>)/gm,
+            url							: /\w+:\/\/[\w-.\/?%&=:@;#]*/g,
+
+            /** <?= ?> tags. */
+            phpScriptTags 				: { left: /(&lt;|<)\?(?:=|php)?/g, right: /\?(&gt;|>)/g, 'eof' : true },
+
+            /** <%= %> tags. */
+            aspScriptTags				: { left: /(&lt;|<)%=?/g, right: /%(&gt;|>)/g },
+
+            /** <script> tags. */
+            scriptScriptTags			: { left: /(&lt;|<)\s*script.*?(&gt;|>)/gi, right: /(&lt;|<)\/\s*script\s*(&gt;|>)/gi }
+        },
+
+        toolbar: {
+            /**
+             * Generates HTML markup for the toolbar.
+             * @param {Highlighter} highlighter Highlighter instance.
+             * @return {String} Returns HTML markup.
+             */
+            getHtml: function(highlighter)
+            {
+                var html = '<div class="toolbar">',
+                    items = sh.toolbar.items,
+                    list = items.list
+                    ;
+
+                function defaultGetHtml(highlighter, name)
+                {
+                    return sh.toolbar.getButtonHtml(highlighter, name, sh.config.strings[name]);
+                };
+
+                for (var i = 0; i < list.length; i++)
+                    html += (items[list[i]].getHtml || defaultGetHtml)(highlighter, list[i]);
+
+                html += '</div>';
+
+                return html;
+            },
+
+            /**
+             * Generates HTML markup for a regular button in the toolbar.
+             * @param {Highlighter} highlighter Highlighter instance.
+             * @param {String} commandName		Command name that would be executed.
+             * @param {String} label			Label text to display.
+             * @return {String}					Returns HTML markup.
+             */
+            getButtonHtml: function(highlighter, commandName, label)
+            {
+                return '<span><a href="#" class="toolbar_item'
+                    + ' command_' + commandName
+                    + ' ' + commandName
+                    + '">' + label + '</a></span>'
+                    ;
+            },
+
+            /**
+             * Event handler for a toolbar anchor.
+             */
+            handler: function(e)
+            {
+                var target = e.target,
+                    className = target.className || ''
+                    ;
+
+                function getValue(name)
+                {
+                    var r = new RegExp(name + '_(\\w+)'),
+                        match = r.exec(className)
+                        ;
+
+                    return match ? match[1] : null;
+                };
+
+                var highlighter = getHighlighterById(findParentElement(target, '.syntaxhighlighter').id),
+                    commandName = getValue('command')
+                    ;
+
+                // execute the toolbar command
+                if (highlighter && commandName)
+                    sh.toolbar.items[commandName].execute(highlighter);
+
+                // disable default A click behaviour
+                e.preventDefault();
+            },
+
+            /** Collection of toolbar items. */
+            items : {
+                // Ordered lis of items in the toolbar. Can't expect `for (var n in items)` to be consistent.
+                list: ['expandSource', 'help'],
+
+                expandSource: {
+                    getHtml: function(highlighter)
+                    {
+                        if (highlighter.getParam('collapse') != true)
+                            return '';
+
+                        var title = highlighter.getParam('title');
+                        return sh.toolbar.getButtonHtml(highlighter, 'expandSource', title ? title : sh.config.strings.expandSource);
+                    },
+
+                    execute: function(highlighter)
+                    {
+                        var div = getHighlighterDivById(highlighter.id);
+                        removeClass(div, 'collapsed');
+                    }
+                },
+
+                /** Command to display the about dialog window. */
+                help: {
+                    execute: function(highlighter)
+                    {
+                        var wnd = popup('', '_blank', 500, 250, 'scrollbars=0'),
+                            doc = wnd.document
+                            ;
+
+                        doc.write(sh.config.strings.aboutDialog);
+                        doc.close();
+                        wnd.focus();
+                    }
+                }
+            }
+        },
+
+        /**
+         * Finds all elements on the page which should be processes by SyntaxHighlighter.
+         *
+         * @param {Object} globalParams		Optional parameters which override element's
+         * 									parameters. Only used if element is specified.
+         *
+         * @param {Object} element	Optional element to highlight. If none is
+         * 							provided, all elements in the current document
+         * 							are returned which qualify.
+         *
+         * @return {Array}	Returns list of <code>{ target: DOMElement, params: Object }</code> objects.
+         */
+        findElements: function(globalParams, element)
+        {
+            var elements = element ? [element] : toArray(document.getElementsByTagName(sh.config.tagName)),
+                conf = sh.config,
+                result = []
+                ;
+
+            // support for <SCRIPT TYPE="syntaxhighlighter" /> feature
+            if (conf.useScriptTags)
+                elements = elements.concat(getSyntaxHighlighterScriptTags());
+
+            if (elements.length === 0)
+                return result;
+
+            for (var i = 0; i < elements.length; i++)
+            {
+                var item = {
+                    target: elements[i],
+                    // local params take precedence over globals
+                    params: merge(globalParams, parseParams(elements[i].className))
+                };
+
+                if (item.params['brush'] == null)
+                    continue;
+
+                result.push(item);
+            }
+
+            return result;
+        },
+
+        /**
+         * Shorthand to highlight all elements on the page that are marked as
+         * SyntaxHighlighter source code.
+         *
+         * @param {Object} globalParams		Optional parameters which override element's
+         * 									parameters. Only used if element is specified.
+         *
+         * @param {Object} element	Optional element to highlight. If none is
+         * 							provided, all elements in the current document
+         * 							are highlighted.
+         */
+        highlight: function(globalParams, element)
+        {
+            var elements = this.findElements(globalParams, element),
+                propertyName = 'innerHTML',
+                highlighter = null,
+                conf = sh.config
+                ;
+
+            if (elements.length === 0)
+                return;
+
+            for (var i = 0; i < elements.length; i++)
+            {
+                var element = elements[i],
+                    target = element.target,
+                    params = element.params,
+                    brushName = params.brush,
+                    code
+                    ;
+
+                if (brushName == null)
+                    continue;
+
+                // Instantiate a brush
+                if (params['html-script'] == 'true' || sh.defaults['html-script'] == true)
+                {
+                    highlighter = new sh.HtmlScript(brushName);
+                    brushName = 'htmlscript';
+                }
+                else
+                {
+                    var brush = findBrush(brushName);
+
+                    if (brush)
+                        highlighter = new brush();
+                    else
+                        continue;
+                }
+
+                code = target[propertyName];
+
+                // remove CDATA from <SCRIPT/> tags if it's present
+                if (conf.useScriptTags)
+                    code = stripCData(code);
+
+                // Inject title if the attribute is present
+                if ((target.title || '') != '')
+                    params.title = target.title;
+
+                params['brush'] = brushName;
+                highlighter.init(params);
+                element = highlighter.getDiv(code);
+
+                // carry over ID
+                if ((target.id || '') != '')
+                    element.id = target.id;
+                //by zhanyi 去掉多余的外围div
+                var tmp = element.firstChild.firstChild;
+                tmp.className = element.firstChild.className;
+
+                target.parentNode.replaceChild(tmp, target);
+            }
+        },
+
+        /**
+         * Main entry point for the SyntaxHighlighter.
+         * @param {Object} params Optional params to apply to all highlighted elements.
+         */
+        all: function(params)
+        {
+            attachEvent(
+                window,
+                'load',
+                function() { sh.highlight(params); }
+            );
+        }
+    }; // end of sh
+
+    /**
+     * Checks if target DOM elements has specified CSS class.
+     * @param {DOMElement} target Target DOM element to check.
+     * @param {String} className Name of the CSS class to check for.
+     * @return {Boolean} Returns true if class name is present, false otherwise.
+     */
+    function hasClass(target, className)
+    {
+        return target.className.indexOf(className) != -1;
+    };
+
+    /**
+     * Adds CSS class name to the target DOM element.
+     * @param {DOMElement} target Target DOM element.
+     * @param {String} className New CSS class to add.
+     */
+    function addClass(target, className)
+    {
+        if (!hasClass(target, className))
+            target.className += ' ' + className;
+    };
+
+    /**
+     * Removes CSS class name from the target DOM element.
+     * @param {DOMElement} target Target DOM element.
+     * @param {String} className CSS class to remove.
+     */
+    function removeClass(target, className)
+    {
+        target.className = target.className.replace(className, '');
+    };
+
+    /**
+     * Converts the source to array object. Mostly used for function arguments and
+     * lists returned by getElementsByTagName() which aren't Array objects.
+     * @param {List} source Source list.
+     * @return {Array} Returns array.
+     */
+    function toArray(source)
+    {
+        var result = [];
+
+        for (var i = 0; i < source.length; i++)
+            result.push(source[i]);
+
+        return result;
+    };
+
+    /**
+     * Splits block of text into lines.
+     * @param {String} block Block of text.
+     * @return {Array} Returns array of lines.
+     */
+    function splitLines(block)
+    {
+        return block.split(/\r?\n/);
+    }
+
+    /**
+     * Generates HTML ID for the highlighter.
+     * @param {String} highlighterId Highlighter ID.
+     * @return {String} Returns HTML ID.
+     */
+    function getHighlighterId(id)
+    {
+        var prefix = 'highlighter_';
+        return id.indexOf(prefix) == 0 ? id : prefix + id;
+    };
+
+    /**
+     * Finds Highlighter instance by ID.
+     * @param {String} highlighterId Highlighter ID.
+     * @return {Highlighter} Returns instance of the highlighter.
+     */
+    function getHighlighterById(id)
+    {
+        return sh.vars.highlighters[getHighlighterId(id)];
+    };
+
+    /**
+     * Finds highlighter's DIV container.
+     * @param {String} highlighterId Highlighter ID.
+     * @return {Element} Returns highlighter's DIV element.
+     */
+    function getHighlighterDivById(id)
+    {
+        return document.getElementById(getHighlighterId(id));
+    };
+
+    /**
+     * Stores highlighter so that getHighlighterById() can do its thing. Each
+     * highlighter must call this method to preserve itself.
+     * @param {Highilghter} highlighter Highlighter instance.
+     */
+    function storeHighlighter(highlighter)
+    {
+        sh.vars.highlighters[getHighlighterId(highlighter.id)] = highlighter;
+    };
+
+    /**
+     * Looks for a child or parent node which has specified classname.
+     * Equivalent to jQuery's $(container).find(".className")
+     * @param {Element} target Target element.
+     * @param {String} search Class name or node name to look for.
+     * @param {Boolean} reverse If set to true, will go up the node tree instead of down.
+     * @return {Element} Returns found child or parent element on null.
+     */
+    function findElement(target, search, reverse /* optional */)
+    {
+        if (target == null)
+            return null;
+
+        var nodes			= reverse != true ? target.childNodes : [ target.parentNode ],
+            propertyToFind	= { '#' : 'id', '.' : 'className' }[search.substr(0, 1)] || 'nodeName',
+            expectedValue,
+            found
+            ;
+
+        expectedValue = propertyToFind != 'nodeName'
+            ? search.substr(1)
+            : search.toUpperCase()
+        ;
+
+        // main return of the found node
+        if ((target[propertyToFind] || '').indexOf(expectedValue) != -1)
+            return target;
+
+        for (var i = 0; nodes && i < nodes.length && found == null; i++)
+            found = findElement(nodes[i], search, reverse);
+
+        return found;
+    };
+
+    /**
+     * Looks for a parent node which has specified classname.
+     * This is an alias to <code>findElement(container, className, true)</code>.
+     * @param {Element} target Target element.
+     * @param {String} className Class name to look for.
+     * @return {Element} Returns found parent element on null.
+     */
+    function findParentElement(target, className)
+    {
+        return findElement(target, className, true);
+    };
+
+    /**
+     * Finds an index of element in the array.
+     * @ignore
+     * @param {Object} searchElement
+     * @param {Number} fromIndex
+     * @return {Number} Returns index of element if found; -1 otherwise.
+     */
+    function indexOf(array, searchElement, fromIndex)
+    {
+        fromIndex = Math.max(fromIndex || 0, 0);
+
+        for (var i = fromIndex; i < array.length; i++)
+            if(array[i] == searchElement)
+                return i;
+
+        return -1;
+    };
+
+    /**
+     * Generates a unique element ID.
+     */
+    function guid(prefix)
+    {
+        return (prefix || '') + Math.round(Math.random() * 1000000).toString();
+    };
+
+    /**
+     * Merges two objects. Values from obj2 override values in obj1.
+     * Function is NOT recursive and works only for one dimensional objects.
+     * @param {Object} obj1 First object.
+     * @param {Object} obj2 Second object.
+     * @return {Object} Returns combination of both objects.
+     */
+    function merge(obj1, obj2)
+    {
+        var result = {}, name;
+
+        for (name in obj1)
+            result[name] = obj1[name];
+
+        for (name in obj2)
+            result[name] = obj2[name];
+
+        return result;
+    };
+
+    /**
+     * Attempts to convert string to boolean.
+     * @param {String} value Input string.
+     * @return {Boolean} Returns true if input was "true", false if input was "false" and value otherwise.
+     */
+    function toBoolean(value)
+    {
+        var result = { "true" : true, "false" : false }[value];
+        return result == null ? value : result;
+    };
+
+    /**
+     * Opens up a centered popup window.
+     * @param {String} url		URL to open in the window.
+     * @param {String} name		Popup name.
+     * @param {int} width		Popup width.
+     * @param {int} height		Popup height.
+     * @param {String} options	window.open() options.
+     * @return {Window}			Returns window instance.
+     */
+    function popup(url, name, width, height, options)
+    {
+        var x = (screen.width - width) / 2,
+            y = (screen.height - height) / 2
+            ;
+
+        options +=	', left=' + x +
+            ', top=' + y +
+            ', width=' + width +
+            ', height=' + height
+        ;
+        options = options.replace(/^,/, '');
+
+        var win = window.open(url, name, options);
+        win.focus();
+        return win;
+    };
+
+    /**
+     * Adds event handler to the target object.
+     * @param {Object} obj		Target object.
+     * @param {String} type		Name of the event.
+     * @param {Function} func	Handling function.
+     */
+    function attachEvent(obj, type, func, scope)
+    {
+        function handler(e)
+        {
+            e = e || window.event;
+
+            if (!e.target)
+            {
+                e.target = e.srcElement;
+                e.preventDefault = function()
+                {
+                    this.returnValue = false;
+                };
+            }
+
+            func.call(scope || window, e);
+        };
+
+        if (obj.attachEvent)
+        {
+            obj.attachEvent('on' + type, handler);
+        }
+        else
+        {
+            obj.addEventListener(type, handler, false);
+        }
+    };
+
+    /**
+     * Displays an alert.
+     * @param {String} str String to display.
+     */
+    function alert(str)
+    {
+        window.alert(sh.config.strings.alert + str);
+    };
+
+    /**
+     * Finds a brush by its alias.
+     *
+     * @param {String} alias		Brush alias.
+     * @param {Boolean} showAlert	Suppresses the alert if false.
+     * @return {Brush}				Returns bursh constructor if found, null otherwise.
+     */
+    function findBrush(alias, showAlert)
+    {
+        var brushes = sh.vars.discoveredBrushes,
+            result = null
+            ;
+
+        if (brushes == null)
+        {
+            brushes = {};
+
+            // Find all brushes
+            for (var brush in sh.brushes)
+            {
+                var info = sh.brushes[brush],
+                    aliases = info.aliases
+                    ;
+
+                if (aliases == null)
+                    continue;
+
+                // keep the brush name
+                info.brushName = brush.toLowerCase();
+
+                for (var i = 0; i < aliases.length; i++)
+                    brushes[aliases[i]] = brush;
+            }
+
+            sh.vars.discoveredBrushes = brushes;
+        }
+
+        result = sh.brushes[brushes[alias]];
+
+        if (result == null && showAlert)
+            alert(sh.config.strings.noBrush + alias);
+
+        return result;
+    };
+
+    /**
+     * Executes a callback on each line and replaces each line with result from the callback.
+     * @param {Object} str			Input string.
+     * @param {Object} callback		Callback function taking one string argument and returning a string.
+     */
+    function eachLine(str, callback)
+    {
+        var lines = splitLines(str);
+
+        for (var i = 0; i < lines.length; i++)
+            lines[i] = callback(lines[i], i);
+
+        // include \r to enable copy-paste on windows (ie8) without getting everything on one line
+        return lines.join('\r\n');
+    };
+
+    /**
+     * This is a special trim which only removes first and last empty lines
+     * and doesn't affect valid leading space on the first line.
+     *
+     * @param {String} str   Input string
+     * @return {String}      Returns string without empty first and last lines.
+     */
+    function trimFirstAndLastLines(str)
+    {
+        return str.replace(/^[ ]*[\n]+|[\n]*[ ]*$/g, '');
+    };
+
+    /**
+     * Parses key/value pairs into hash object.
+     *
+     * Understands the following formats:
+     * - name: word;
+     * - name: [word, word];
+     * - name: "string";
+     * - name: 'string';
+     *
+     * For example:
+     *   name1: value; name2: [value, value]; name3: 'value'
+     *
+     * @param {String} str    Input string.
+     * @return {Object}       Returns deserialized object.
+     */
+    function parseParams(str)
+    {
+        var match,
+            result = {},
+            arrayRegex = new XRegExp("^\\[(?<values>(.*?))\\]$"),
+            regex = new XRegExp(
+                "(?<name>[\\w-]+)" +
+                    "\\s*:\\s*" +
+                    "(?<value>" +
+                    "[\\w-%#]+|" +		// word
+                    "\\[.*?\\]|" +		// [] array
+                    '".*?"|' +			// "" string
+                    "'.*?'" +			// '' string
+                    ")\\s*;?",
+                "g"
+            )
+            ;
+
+        while ((match = regex.exec(str)) != null)
+        {
+            var value = match.value
+                    .replace(/^['"]|['"]$/g, '') // strip quotes from end of strings
+                ;
+
+            // try to parse array value
+            if (value != null && arrayRegex.test(value))
+            {
+                var m = arrayRegex.exec(value);
+                value = m.values.length > 0 ? m.values.split(/\s*,\s*/) : [];
+            }
+
+            result[match.name] = value;
+        }
+
+        return result;
+    };
+
+    /**
+     * Wraps each line of the string into <code/> tag with given style applied to it.
+     *
+     * @param {String} str   Input string.
+     * @param {String} css   Style name to apply to the string.
+     * @return {String}      Returns input string with each line surrounded by <span/> tag.
+     */
+    function wrapLinesWithCode(str, css)
+    {
+        if (str == null || str.length == 0 || str == '\n')
+            return str;
+
+        str = str.replace(/</g, '&lt;');
+
+        // Replace two or more sequential spaces with &nbsp; leaving last space untouched.
+        str = str.replace(/ {2,}/g, function(m)
+        {
+            var spaces = '';
+
+            for (var i = 0; i < m.length - 1; i++)
+                spaces += sh.config.space;
+
+            return spaces + ' ';
+        });
+
+        // Split each line and apply <span class="...">...</span> to them so that
+        // leading spaces aren't included.
+        if (css != null)
+            str = eachLine(str, function(line)
+            {
+                if (line.length == 0)
+                    return '';
+
+                var spaces = '';
+
+                line = line.replace(/^(&nbsp;| )+/, function(s)
+                {
+                    spaces = s;
+                    return '';
+                });
+
+                if (line.length == 0)
+                    return spaces;
+
+                return spaces + '<code class="' + css + '">' + line + '</code>';
+            });
+
+        return str;
+    };
+
+    /**
+     * Pads number with zeros until it's length is the same as given length.
+     *
+     * @param {Number} number	Number to pad.
+     * @param {Number} length	Max string length with.
+     * @return {String}			Returns a string padded with proper amount of '0'.
+     */
+    function padNumber(number, length)
+    {
+        var result = number.toString();
+
+        while (result.length < length)
+            result = '0' + result;
+
+        return result;
+    };
+
+    /**
+     * Replaces tabs with spaces.
+     *
+     * @param {String} code		Source code.
+     * @param {Number} tabSize	Size of the tab.
+     * @return {String}			Returns code with all tabs replaces by spaces.
+     */
+    function processTabs(code, tabSize)
+    {
+        var tab = '';
+
+        for (var i = 0; i < tabSize; i++)
+            tab += ' ';
+
+        return code.replace(/\t/g, tab);
+    };
+
+    /**
+     * Replaces tabs with smart spaces.
+     *
+     * @param {String} code    Code to fix the tabs in.
+     * @param {Number} tabSize Number of spaces in a column.
+     * @return {String}        Returns code with all tabs replaces with roper amount of spaces.
+     */
+    function processSmartTabs(code, tabSize)
+    {
+        var lines = splitLines(code),
+            tab = '\t',
+            spaces = ''
+            ;
+
+        // Create a string with 1000 spaces to copy spaces from...
+        // It's assumed that there would be no indentation longer than that.
+        for (var i = 0; i < 50; i++)
+            spaces += '                    '; // 20 spaces * 50
+
+        // This function inserts specified amount of spaces in the string
+        // where a tab is while removing that given tab.
+        function insertSpaces(line, pos, count)
+        {
+            return line.substr(0, pos)
+                + spaces.substr(0, count)
+                + line.substr(pos + 1, line.length) // pos + 1 will get rid of the tab
+                ;
+        };
+
+        // Go through all the lines and do the 'smart tabs' magic.
+        code = eachLine(code, function(line)
+        {
+            if (line.indexOf(tab) == -1)
+                return line;
+
+            var pos = 0;
+
+            while ((pos = line.indexOf(tab)) != -1)
+            {
+                // This is pretty much all there is to the 'smart tabs' logic.
+                // Based on the position within the line and size of a tab,
+                // calculate the amount of spaces we need to insert.
+                var spaces = tabSize - pos % tabSize;
+                line = insertSpaces(line, pos, spaces);
+            }
+
+            return line;
+        });
+
+        return code;
+    };
+
+    /**
+     * Performs various string fixes based on configuration.
+     */
+    function fixInputString(str)
+    {
+        var br = /<br\s*\/?>|&lt;br\s*\/?&gt;/gi;
+
+        if (sh.config.bloggerMode == true)
+            str = str.replace(br, '\n');
+
+        if (sh.config.stripBrs == true)
+            str = str.replace(br, '');
+
+        return str;
+    };
+
+    /**
+     * Removes all white space at the begining and end of a string.
+     *
+     * @param {String} str   String to trim.
+     * @return {String}      Returns string without leading and following white space characters.
+     */
+    function trim(str)
+    {
+        return str.replace(/^\s+|\s+$/g, '');
+    };
+
+    /**
+     * Unindents a block of text by the lowest common indent amount.
+     * @param {String} str   Text to unindent.
+     * @return {String}      Returns unindented text block.
+     */
+    function unindent(str)
+    {
+        var lines = splitLines(fixInputString(str)),
+            indents = new Array(),
+            regex = /^\s*/,
+            min = 1000
+            ;
+
+        // go through every line and check for common number of indents
+        for (var i = 0; i < lines.length && min > 0; i++)
+        {
+            var line = lines[i];
+
+            if (trim(line).length == 0)
+                continue;
+
+            var matches = regex.exec(line);
+
+            // In the event that just one line doesn't have leading white space
+            // we can't unindent anything, so bail completely.
+            if (matches == null)
+                return str;
+
+            min = Math.min(matches[0].length, min);
+        }
+
+        // trim minimum common number of white space from the begining of every line
+        if (min > 0)
+            for (var i = 0; i < lines.length; i++)
+                lines[i] = lines[i].substr(min);
+
+        return lines.join('\n');
+    };
+
+    /**
+     * Callback method for Array.sort() which sorts matches by
+     * index position and then by length.
+     *
+     * @param {Match} m1	Left object.
+     * @param {Match} m2    Right object.
+     * @return {Number}     Returns -1, 0 or -1 as a comparison result.
+     */
+    function matchesSortCallback(m1, m2)
+    {
+        // sort matches by index first
+        if(m1.index < m2.index)
+            return -1;
+        else if(m1.index > m2.index)
+            return 1;
+        else
+        {
+            // if index is the same, sort by length
+            if(m1.length < m2.length)
+                return -1;
+            else if(m1.length > m2.length)
+                return 1;
+        }
+
+        return 0;
+    };
+
+    /**
+     * Executes given regular expression on provided code and returns all
+     * matches that are found.
+     *
+     * @param {String} code    Code to execute regular expression on.
+     * @param {Object} regex   Regular expression item info from <code>regexList</code> collection.
+     * @return {Array}         Returns a list of Match objects.
+     */
+    function getMatches(code, regexInfo)
+    {
+        function defaultAdd(match, regexInfo)
+        {
+            return match[0];
+        };
+
+        var index = 0,
+            match = null,
+            matches = [],
+            func = regexInfo.func ? regexInfo.func : defaultAdd
+            ;
+
+        while((match = regexInfo.regex.exec(code)) != null)
+        {
+            var resultMatch = func(match, regexInfo);
+
+            if (typeof(resultMatch) == 'string')
+                resultMatch = [new sh.Match(resultMatch, match.index, regexInfo.css)];
+
+            matches = matches.concat(resultMatch);
+        }
+
+        return matches;
+    };
+
+    /**
+     * Turns all URLs in the code into <a/> tags.
+     * @param {String} code Input code.
+     * @return {String} Returns code with </a> tags.
+     */
+    function processUrls(code)
+    {
+        var gt = /(.*)((&gt;|&lt;).*)/;
+
+        return code.replace(sh.regexLib.url, function(m)
+        {
+            var suffix = '',
+                match = null
+                ;
+
+            // We include &lt; and &gt; in the URL for the common cases like <http://google.com>
+            // The problem is that they get transformed into &lt;http://google.com&gt;
+            // Where as &gt; easily looks like part of the URL string.
+
+            if (match = gt.exec(m))
+            {
+                m = match[1];
+                suffix = match[2];
+            }
+
+            return '<a href="' + m + '">' + m + '</a>' + suffix;
+        });
+    };
+
+    /**
+     * Finds all <SCRIPT TYPE="syntaxhighlighter" /> elementss.
+     * @return {Array} Returns array of all found SyntaxHighlighter tags.
+     */
+    function getSyntaxHighlighterScriptTags()
+    {
+        var tags = document.getElementsByTagName('script'),
+            result = []
+            ;
+
+        for (var i = 0; i < tags.length; i++)
+            if (tags[i].type == 'syntaxhighlighter')
+                result.push(tags[i]);
+
+        return result;
+    };
+
+    /**
+     * Strips <![CDATA[]]> from <SCRIPT /> content because it should be used
+     * there in most cases for XHTML compliance.
+     * @param {String} original	Input code.
+     * @return {String} Returns code without leading <![CDATA[]]> tags.
+     */
+    function stripCData(original)
+    {
+        var left = '<![CDATA[',
+            right = ']]>',
+        // for some reason IE inserts some leading blanks here
+            copy = trim(original),
+            changed = false,
+            leftLength = left.length,
+            rightLength = right.length
+            ;
+
+        if (copy.indexOf(left) == 0)
+        {
+            copy = copy.substring(leftLength);
+            changed = true;
+        }
+
+        var copyLength = copy.length;
+
+        if (copy.indexOf(right) == copyLength - rightLength)
+        {
+            copy = copy.substring(0, copyLength - rightLength);
+            changed = true;
+        }
+
+        return changed ? copy : original;
+    };
+
+
+    /**
+     * Quick code mouse double click handler.
+     */
+    function quickCodeHandler(e)
+    {
+        var target = e.target,
+            highlighterDiv = findParentElement(target, '.syntaxhighlighter'),
+            container = findParentElement(target, '.container'),
+            textarea = document.createElement('textarea'),
+            highlighter
+            ;
+
+        if (!container || !highlighterDiv || findElement(container, 'textarea'))
+            return;
+
+        highlighter = getHighlighterById(highlighterDiv.id);
+
+        // add source class name
+        addClass(highlighterDiv, 'source');
+
+        // Have to go over each line and grab it's text, can't just do it on the
+        // container because Firefox loses all \n where as Webkit doesn't.
+        var lines = container.childNodes,
+            code = []
+            ;
+
+        for (var i = 0; i < lines.length; i++)
+            code.push(lines[i].innerText || lines[i].textContent);
+
+        // using \r instead of \r or \r\n makes this work equally well on IE, FF and Webkit
+        code = code.join('\r');
+
+        // For Webkit browsers, replace nbsp with a breaking space
+        code = code.replace(/\u00a0/g, " ");
+
+        // inject <textarea/> tag
+        textarea.appendChild(document.createTextNode(code));
+        container.appendChild(textarea);
+
+        // preselect all text
+        textarea.focus();
+        textarea.select();
+
+        // set up handler for lost focus
+        attachEvent(textarea, 'blur', function(e)
+        {
+            textarea.parentNode.removeChild(textarea);
+            removeClass(highlighterDiv, 'source');
+        });
+    };
+
+    /**
+     * Match object.
+     */
+    sh.Match = function(value, index, css)
+    {
+        this.value = value;
+        this.index = index;
+        this.length = value.length;
+        this.css = css;
+        this.brushName = null;
+    };
+
+    sh.Match.prototype.toString = function()
+    {
+        return this.value;
+    };
+
+    /**
+     * Simulates HTML code with a scripting language embedded.
+     *
+     * @param {String} scriptBrushName Brush name of the scripting language.
+     */
+    sh.HtmlScript = function(scriptBrushName)
+    {
+        var brushClass = findBrush(scriptBrushName),
+            scriptBrush,
+            xmlBrush = new sh.brushes.Xml(),
+            bracketsRegex = null,
+            ref = this,
+            methodsToExpose = 'getDiv getHtml init'.split(' ')
+            ;
+
+        if (brushClass == null)
+            return;
+
+        scriptBrush = new brushClass();
+
+        for(var i = 0; i < methodsToExpose.length; i++)
+            // make a closure so we don't lose the name after i changes
+            (function() {
+                var name = methodsToExpose[i];
+
+                ref[name] = function()
+                {
+                    return xmlBrush[name].apply(xmlBrush, arguments);
+                };
+            })();
+
+        if (scriptBrush.htmlScript == null)
+        {
+            alert(sh.config.strings.brushNotHtmlScript + scriptBrushName);
+            return;
+        }
+
+        xmlBrush.regexList.push(
+            { regex: scriptBrush.htmlScript.code, func: process }
+        );
+
+        function offsetMatches(matches, offset)
+        {
+            for (var j = 0; j < matches.length; j++)
+                matches[j].index += offset;
+        }
+
+        function process(match, info)
+        {
+            var code = match.code,
+                matches = [],
+                regexList = scriptBrush.regexList,
+                offset = match.index + match.left.length,
+                htmlScript = scriptBrush.htmlScript,
+                result
+                ;
+
+            // add all matches from the code
+            for (var i = 0; i < regexList.length; i++)
+            {
+                result = getMatches(code, regexList[i]);
+                offsetMatches(result, offset);
+                matches = matches.concat(result);
+            }
+
+            // add left script bracket
+            if (htmlScript.left != null && match.left != null)
+            {
+                result = getMatches(match.left, htmlScript.left);
+                offsetMatches(result, match.index);
+                matches = matches.concat(result);
+            }
+
+            // add right script bracket
+            if (htmlScript.right != null && match.right != null)
+            {
+                result = getMatches(match.right, htmlScript.right);
+                offsetMatches(result, match.index + match[0].lastIndexOf(match.right));
+                matches = matches.concat(result);
+            }
+
+            for (var j = 0; j < matches.length; j++)
+                matches[j].brushName = brushClass.brushName;
+
+            return matches;
+        }
+    };
+
+    /**
+     * Main Highlither class.
+     * @constructor
+     */
+    sh.Highlighter = function()
+    {
+        // not putting any code in here because of the prototype inheritance
+    };
+
+    sh.Highlighter.prototype = {
+        /**
+         * Returns value of the parameter passed to the highlighter.
+         * @param {String} name				Name of the parameter.
+         * @param {Object} defaultValue		Default value.
+         * @return {Object}					Returns found value or default value otherwise.
+         */
+        getParam: function(name, defaultValue)
+        {
+            var result = this.params[name];
+            return toBoolean(result == null ? defaultValue : result);
+        },
+
+        /**
+         * Shortcut to document.createElement().
+         * @param {String} name		Name of the element to create (DIV, A, etc).
+         * @return {HTMLElement}	Returns new HTML element.
+         */
+        create: function(name)
+        {
+            return document.createElement(name);
+        },
+
+        /**
+         * Applies all regular expression to the code and stores all found
+         * matches in the `this.matches` array.
+         * @param {Array} regexList		List of regular expressions.
+         * @param {String} code			Source code.
+         * @return {Array}				Returns list of matches.
+         */
+        findMatches: function(regexList, code)
+        {
+            var result = [];
+
+            if (regexList != null)
+                for (var i = 0; i < regexList.length; i++)
+                    // BUG: length returns len+1 for array if methods added to prototype chain (oising@gmail.com)
+                    if (typeof (regexList[i]) == "object")
+                        result = result.concat(getMatches(code, regexList[i]));
+
+            // sort and remove nested the matches
+            return this.removeNestedMatches(result.sort(matchesSortCallback));
+        },
+
+        /**
+         * Checks to see if any of the matches are inside of other matches.
+         * This process would get rid of highligted strings inside comments,
+         * keywords inside strings and so on.
+         */
+        removeNestedMatches: function(matches)
+        {
+            // Optimized by Jose Prado (http://joseprado.com)
+            for (var i = 0; i < matches.length; i++)
+            {
+                if (matches[i] === null)
+                    continue;
+
+                var itemI = matches[i],
+                    itemIEndPos = itemI.index + itemI.length
+                    ;
+
+                for (var j = i + 1; j < matches.length && matches[i] !== null; j++)
+                {
+                    var itemJ = matches[j];
+
+                    if (itemJ === null)
+                        continue;
+                    else if (itemJ.index > itemIEndPos)
+                        break;
+                    else if (itemJ.index == itemI.index && itemJ.length > itemI.length)
+                        matches[i] = null;
+                    else if (itemJ.index >= itemI.index && itemJ.index < itemIEndPos)
+                        matches[j] = null;
+                }
+            }
+
+            return matches;
+        },
+
+        /**
+         * Creates an array containing integer line numbers starting from the 'first-line' param.
+         * @return {Array} Returns array of integers.
+         */
+        figureOutLineNumbers: function(code)
+        {
+            var lines = [],
+                firstLine = parseInt(this.getParam('first-line'))
+                ;
+
+            eachLine(code, function(line, index)
+            {
+                lines.push(index + firstLine);
+            });
+
+            return lines;
+        },
+
+        /**
+         * Determines if specified line number is in the highlighted list.
+         */
+        isLineHighlighted: function(lineNumber)
+        {
+            var list = this.getParam('highlight', []);
+
+            if (typeof(list) != 'object' && list.push == null)
+                list = [ list ];
+
+            return indexOf(list, lineNumber.toString()) != -1;
+        },
+
+        /**
+         * Generates HTML markup for a single line of code while determining alternating line style.
+         * @param {Integer} lineNumber	Line number.
+         * @param {String} code Line	HTML markup.
+         * @return {String}				Returns HTML markup.
+         */
+        getLineHtml: function(lineIndex, lineNumber, code)
+        {
+            var classes = [
+                'line',
+                'number' + lineNumber,
+                'index' + lineIndex,
+                'alt' + (lineNumber % 2 == 0 ? 1 : 2).toString()
+            ];
+
+            if (this.isLineHighlighted(lineNumber))
+                classes.push('highlighted');
+
+            if (lineNumber == 0)
+                classes.push('break');
+
+            return '<div class="' + classes.join(' ') + '">' + code + '</div>';
+        },
+
+        /**
+         * Generates HTML markup for line number column.
+         * @param {String} code			Complete code HTML markup.
+         * @param {Array} lineNumbers	Calculated line numbers.
+         * @return {String}				Returns HTML markup.
+         */
+        getLineNumbersHtml: function(code, lineNumbers)
+        {
+            var html = '',
+                count = splitLines(code).length,
+                firstLine = parseInt(this.getParam('first-line')),
+                pad = this.getParam('pad-line-numbers')
+                ;
+
+            if (pad == true)
+                pad = (firstLine + count - 1).toString().length;
+            else if (isNaN(pad) == true)
+                pad = 0;
+
+            for (var i = 0; i < count; i++)
+            {
+                var lineNumber = lineNumbers ? lineNumbers[i] : firstLine + i,
+                    code = lineNumber == 0 ? sh.config.space : padNumber(lineNumber, pad)
+                    ;
+
+                html += this.getLineHtml(i, lineNumber, code);
+            }
+
+            return html;
+        },
+
+        /**
+         * Splits block of text into individual DIV lines.
+         * @param {String} code			Code to highlight.
+         * @param {Array} lineNumbers	Calculated line numbers.
+         * @return {String}				Returns highlighted code in HTML form.
+         */
+        getCodeLinesHtml: function(html, lineNumbers)
+        {
+            html = trim(html);
+
+            var lines = splitLines(html),
+                padLength = this.getParam('pad-line-numbers'),
+                firstLine = parseInt(this.getParam('first-line')),
+                html = '',
+                brushName = this.getParam('brush')
+                ;
+
+            for (var i = 0; i < lines.length; i++)
+            {
+                var line = lines[i],
+                    indent = /^(&nbsp;|\s)+/.exec(line),
+                    spaces = null,
+                    lineNumber = lineNumbers ? lineNumbers[i] : firstLine + i;
+                ;
+
+                if (indent != null)
+                {
+                    spaces = indent[0].toString();
+                    line = line.substr(spaces.length);
+                    spaces = spaces.replace(' ', sh.config.space);
+                }
+
+                line = trim(line);
+
+                if (line.length == 0)
+                    line = sh.config.space;
+
+                html += this.getLineHtml(
+                    i,
+                    lineNumber,
+                    (spaces != null ? '<code class="' + brushName + ' spaces">' + spaces + '</code>' : '') + line
+                );
+            }
+
+            return html;
+        },
+
+        /**
+         * Returns HTML for the table title or empty string if title is null.
+         */
+        getTitleHtml: function(title)
+        {
+            return title ? '<caption>' + title + '</caption>' : '';
+        },
+
+        /**
+         * Finds all matches in the source code.
+         * @param {String} code		Source code to process matches in.
+         * @param {Array} matches	Discovered regex matches.
+         * @return {String} Returns formatted HTML with processed mathes.
+         */
+        getMatchesHtml: function(code, matches)
+        {
+            var pos = 0,
+                result = '',
+                brushName = this.getParam('brush', '')
+                ;
+
+            function getBrushNameCss(match)
+            {
+                var result = match ? (match.brushName || brushName) : brushName;
+                return result ? result + ' ' : '';
+            };
+
+            // Finally, go through the final list of matches and pull the all
+            // together adding everything in between that isn't a match.
+            for (var i = 0; i < matches.length; i++)
+            {
+                var match = matches[i],
+                    matchBrushName
+                    ;
+
+                if (match === null || match.length === 0)
+                    continue;
+
+                matchBrushName = getBrushNameCss(match);
+
+                result += wrapLinesWithCode(code.substr(pos, match.index - pos), matchBrushName + 'plain')
+                    + wrapLinesWithCode(match.value, matchBrushName + match.css)
+                ;
+
+                pos = match.index + match.length + (match.offset || 0);
+            }
+
+            // don't forget to add whatever's remaining in the string
+            result += wrapLinesWithCode(code.substr(pos), getBrushNameCss() + 'plain');
+
+            return result;
+        },
+
+        /**
+         * Generates HTML markup for the whole syntax highlighter.
+         * @param {String} code Source code.
+         * @return {String} Returns HTML markup.
+         */
+        getHtml: function(code)
+        {
+            var html = '',
+                classes = [ 'syntaxhighlighter' ],
+                tabSize,
+                matches,
+                lineNumbers
+                ;
+
+            // process light mode
+            if (this.getParam('light') == true)
+                this.params.toolbar = this.params.gutter = false;
+
+            className = 'syntaxhighlighter';
+
+            if (this.getParam('collapse') == true)
+                classes.push('collapsed');
+
+            if ((gutter = this.getParam('gutter')) == false)
+                classes.push('nogutter');
+
+            // add custom user style name
+            classes.push(this.getParam('class-name'));
+
+            // add brush alias to the class name for custom CSS
+            classes.push(this.getParam('brush'));
+
+            code = trimFirstAndLastLines(code)
+                .replace(/\r/g, ' ') // IE lets these buggers through
+            ;
+
+            tabSize = this.getParam('tab-size');
+
+            // replace tabs with spaces
+            code = this.getParam('smart-tabs') == true
+                ? processSmartTabs(code, tabSize)
+                : processTabs(code, tabSize)
+            ;
+
+            // unindent code by the common indentation
+            if (this.getParam('unindent'))
+                code = unindent(code);
+
+            if (gutter)
+                lineNumbers = this.figureOutLineNumbers(code);
+
+            // find matches in the code using brushes regex list
+            matches = this.findMatches(this.regexList, code);
+            // processes found matches into the html
+            html = this.getMatchesHtml(code, matches);
+            // finally, split all lines so that they wrap well
+            html = this.getCodeLinesHtml(html, lineNumbers);
+
+            // finally, process the links
+            if (this.getParam('auto-links'))
+                html = processUrls(html);
+
+            if (typeof(navigator) != 'undefined' && navigator.userAgent && navigator.userAgent.match(/MSIE/))
+                classes.push('ie');
+
+            html =
+                '<div id="' + getHighlighterId(this.id) + '" class="' + classes.join(' ') + '">'
+                    + (this.getParam('toolbar') ? sh.toolbar.getHtml(this) : '')
+                    + '<table border="0" cellpadding="0" cellspacing="0">'
+                    + this.getTitleHtml(this.getParam('title'))
+                    + '<tbody>'
+                    + '<tr>'
+                    + (gutter ? '<td class="gutter">' + this.getLineNumbersHtml(code) + '</td>' : '')
+                    + '<td class="code">'
+                    + '<div class="container">'
+                    + html
+                    + '</div>'
+                    + '</td>'
+                    + '</tr>'
+                    + '</tbody>'
+                    + '</table>'
+                    + '</div>'
+            ;
+
+            return html;
+        },
+
+        /**
+         * Highlights the code and returns complete HTML.
+         * @param {String} code     Code to highlight.
+         * @return {Element}        Returns container DIV element with all markup.
+         */
+        getDiv: function(code)
+        {
+            if (code === null)
+                code = '';
+
+            this.code = code;
+
+            var div = this.create('div');
+
+            // create main HTML
+            div.innerHTML = this.getHtml(code);
+
+            // set up click handlers
+            if (this.getParam('toolbar'))
+                attachEvent(findElement(div, '.toolbar'), 'click', sh.toolbar.handler);
+
+            if (this.getParam('quick-code'))
+                attachEvent(findElement(div, '.code'), 'dblclick', quickCodeHandler);
+
+            return div;
+        },
+
+        /**
+         * Initializes the highlighter/brush.
+         *
+         * Constructor isn't used for initialization so that nothing executes during necessary
+         * `new SyntaxHighlighter.Highlighter()` call when setting up brush inheritence.
+         *
+         * @param {Hash} params Highlighter parameters.
+         */
+        init: function(params)
+        {
+            this.id = guid();
+
+            // register this instance in the highlighters list
+            storeHighlighter(this);
+
+            // local params take precedence over defaults
+            this.params = merge(sh.defaults, params || {})
+
+            // process light mode
+            if (this.getParam('light') == true)
+                this.params.toolbar = this.params.gutter = false;
+        },
+
+        /**
+         * Converts space separated list of keywords into a regular expression string.
+         * @param {String} str    Space separated keywords.
+         * @return {String}       Returns regular expression string.
+         */
+        getKeywords: function(str)
+        {
+            str = str
+                .replace(/^\s+|\s+$/g, '')
+                .replace(/\s+/g, '|')
+            ;
+
+            return '\\b(?:' + str + ')\\b';
+        },
+
+        /**
+         * Makes a brush compatible with the `html-script` functionality.
+         * @param {Object} regexGroup Object containing `left` and `right` regular expressions.
+         */
+        forHtmlScript: function(regexGroup)
+        {
+            var regex = { 'end' : regexGroup.right.source };
+
+            if(regexGroup.eof)
+                regex.end = "(?:(?:" + regex.end + ")|$)";
+
+            this.htmlScript = {
+                left : { regex: regexGroup.left, css: 'script' },
+                right : { regex: regexGroup.right, css: 'script' },
+                code : new XRegExp(
+                    "(?<left>" + regexGroup.left.source + ")" +
+                        "(?<code>.*?)" +
+                        "(?<right>" + regex.end + ")",
+                    "sgi"
+                )
+            };
+        }
+    }; // end of Highlighter
+
+    return sh;
+}(); // end of anonymous function
+
+// CommonJS
+typeof(exports) != 'undefined' ? exports.SyntaxHighlighter = SyntaxHighlighter : null;
+
+;(function()
+{
+    // CommonJS
+    SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+    function Brush()
+    {
+        // Created by Peter Atoria @ http://iAtoria.com
+
+        var inits 	 =  'class interface function package';
+
+        var keywords =	'-Infinity ...rest Array as AS3 Boolean break case catch const continue Date decodeURI ' +
+                'decodeURIComponent default delete do dynamic each else encodeURI encodeURIComponent escape ' +
+                'extends false final finally flash_proxy for get if implements import in include Infinity ' +
+                'instanceof int internal is isFinite isNaN isXMLName label namespace NaN native new null ' +
+                'Null Number Object object_proxy override parseFloat parseInt private protected public ' +
+                'return set static String super switch this throw true try typeof uint undefined unescape ' +
+                'use void while with'
+            ;
+
+        this.regexList = [
+            { regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },		// one line comments
+            { regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },		// multiline comments
+            { regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },		// double quoted strings
+            { regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },		// single quoted strings
+            { regex: /\b([\d]+(\.[\d]+)?|0x[a-f0-9]+)\b/gi,				css: 'value' },			// numbers
+            { regex: new RegExp(this.getKeywords(inits), 'gm'),			css: 'color3' },		// initializations
+            { regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword' },		// keywords
+            { regex: new RegExp('var', 'gm'),							css: 'variable' },		// variable
+            { regex: new RegExp('trace', 'gm'),							css: 'color1' }			// trace
+        ];
+
+        this.forHtmlScript(SyntaxHighlighter.regexLib.scriptScriptTags);
+    };
+
+    Brush.prototype	= new SyntaxHighlighter.Highlighter();
+    Brush.aliases	= ['actionscript3', 'as3'];
+
+    SyntaxHighlighter.brushes.AS3 = Brush;
+
+    // CommonJS
+    typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+
+;(function()
+{
+    // CommonJS
+    SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+    function Brush()
+    {
+        // AppleScript brush by David Chambers
+        // http://davidchambersdesign.com/
+        var keywords   = 'after before beginning continue copy each end every from return get global in local named of set some that the then times to where whose with without';
+        var ordinals   = 'first second third fourth fifth sixth seventh eighth ninth tenth last front back middle';
+        var specials   = 'activate add alias AppleScript ask attachment boolean class constant delete duplicate empty exists false id integer list make message modal modified new no paragraph pi properties quit real record remove rest result reveal reverse run running save string true word yes';
+
+        this.regexList = [
+
+            { regex: /(--|#).*$/gm,
+                css: 'comments' },
+
+            { regex: /\(\*(?:[\s\S]*?\(\*[\s\S]*?\*\))*[\s\S]*?\*\)/gm, // support nested comments
+                css: 'comments' },
+
+            { regex: /"[\s\S]*?"/gm,
+                css: 'string' },
+
+            { regex: /(?:,|:|¬|'s\b|\(|\)|\{|\}|«|\b\w*»)/g,
+                css: 'color1' },
+
+            { regex: /(-)?(\d)+(\.(\d)?)?(E\+(\d)+)?/g, // numbers
+                css: 'color1' },
+
+            { regex: /(?:&(amp;|gt;|lt;)?|=|� |>|<|≥|>=|≤|<=|\*|\+|-|\/|÷|\^)/g,
+                css: 'color2' },
+
+            { regex: /\b(?:and|as|div|mod|not|or|return(?!\s&)(ing)?|equals|(is(n't| not)? )?equal( to)?|does(n't| not) equal|(is(n't| not)? )?(greater|less) than( or equal( to)?)?|(comes|does(n't| not) come) (after|before)|is(n't| not)?( in)? (back|front) of|is(n't| not)? behind|is(n't| not)?( (in|contained by))?|does(n't| not) contain|contain(s)?|(start|begin|end)(s)? with|((but|end) )?(consider|ignor)ing|prop(erty)?|(a )?ref(erence)?( to)?|repeat (until|while|with)|((end|exit) )?repeat|((else|end) )?if|else|(end )?(script|tell|try)|(on )?error|(put )?into|(of )?(it|me)|its|my|with (timeout( of)?|transaction)|end (timeout|transaction))\b/g,
+                css: 'keyword' },
+
+            { regex: /\b\d+(st|nd|rd|th)\b/g, // ordinals
+                css: 'keyword' },
+
+            { regex: /\b(?:about|above|against|around|at|below|beneath|beside|between|by|(apart|aside) from|(instead|out) of|into|on(to)?|over|since|thr(ough|u)|under)\b/g,
+                css: 'color3' },
+
+            { regex: /\b(?:adding folder items to|after receiving|choose( ((remote )?application|color|folder|from list|URL))?|clipboard info|set the clipboard to|(the )?clipboard|entire contents|display(ing| (alert|dialog|mode))?|document( (edited|file|nib name))?|file( (name|type))?|(info )?for|giving up after|(name )?extension|quoted form|return(ed)?|second(?! item)(s)?|list (disks|folder)|text item(s| delimiters)?|(Unicode )?text|(disk )?item(s)?|((current|list) )?view|((container|key) )?window|with (data|icon( (caution|note|stop))?|parameter(s)?|prompt|properties|seed|title)|case|diacriticals|hyphens|numeric strings|punctuation|white space|folder creation|application(s( folder)?| (processes|scripts position|support))?|((desktop )?(pictures )?|(documents|downloads|favorites|home|keychain|library|movies|music|public|scripts|sites|system|users|utilities|workflows) )folder|desktop|Folder Action scripts|font(s| panel)?|help|internet plugins|modem scripts|(system )?preferences|printer descriptions|scripting (additions|components)|shared (documents|libraries)|startup (disk|items)|temporary items|trash|on server|in AppleTalk zone|((as|long|short) )?user name|user (ID|locale)|(with )?password|in (bundle( with identifier)?|directory)|(close|open for) access|read|write( permission)?|(g|s)et eof|using( delimiters)?|starting at|default (answer|button|color|country code|entr(y|ies)|identifiers|items|name|location|script editor)|hidden( answer)?|open(ed| (location|untitled))?|error (handling|reporting)|(do( shell)?|load|run|store) script|administrator privileges|altering line endings|get volume settings|(alert|boot|input|mount|output|set) volume|output muted|(fax|random )?number|round(ing)?|up|down|toward zero|to nearest|as taught in school|system (attribute|info)|((AppleScript( Studio)?|system) )?version|(home )?directory|(IPv4|primary Ethernet) address|CPU (type|speed)|physical memory|time (stamp|to GMT)|replacing|ASCII (character|number)|localized string|from table|offset|summarize|beep|delay|say|(empty|multiple) selections allowed|(of|preferred) type|invisibles|showing( package contents)?|editable URL|(File|FTP|News|Media|Web) [Ss]ervers|Telnet hosts|Directory services|Remote applications|waiting until completion|saving( (in|to))?|path (for|to( (((current|frontmost) )?application|resource))?)|POSIX (file|path)|(background|RGB) color|(OK|cancel) button name|cancel button|button(s)?|cubic ((centi)?met(re|er)s|yards|feet|inches)|square ((kilo)?met(re|er)s|miles|yards|feet)|(centi|kilo)?met(re|er)s|miles|yards|feet|inches|lit(re|er)s|gallons|quarts|(kilo)?grams|ounces|pounds|degrees (Celsius|Fahrenheit|Kelvin)|print( (dialog|settings))?|clos(e(able)?|ing)|(de)?miniaturized|miniaturizable|zoom(ed|able)|attribute run|action (method|property|title)|phone|email|((start|end)ing|home) page|((birth|creation|current|custom|modification) )?date|((((phonetic )?(first|last|middle))|computer|host|maiden|related) |nick)?name|aim|icq|jabber|msn|yahoo|address(es)?|save addressbook|should enable action|city|country( code)?|formatte(r|d address)|(palette )?label|state|street|zip|AIM [Hh]andle(s)?|my card|select(ion| all)?|unsaved|(alpha )?value|entr(y|ies)|group|(ICQ|Jabber|MSN) handle|person|people|company|department|icon image|job title|note|organization|suffix|vcard|url|copies|collating|pages (across|down)|request print time|target( printer)?|((GUI Scripting|Script menu) )?enabled|show Computer scripts|(de)?activated|awake from nib|became (key|main)|call method|of (class|object)|center|clicked toolbar item|closed|for document|exposed|(can )?hide|idle|keyboard (down|up)|event( (number|type))?|launch(ed)?|load (image|movie|nib|sound)|owner|log|mouse (down|dragged|entered|exited|moved|up)|move|column|localization|resource|script|register|drag (info|types)|resigned (active|key|main)|resiz(e(d)?|able)|right mouse (down|dragged|up)|scroll wheel|(at )?index|should (close|open( untitled)?|quit( after last window closed)?|zoom)|((proposed|screen) )?bounds|show(n)?|behind|in front of|size (mode|to fit)|update(d| toolbar item)?|was (hidden|miniaturized)|will (become active|close|finish launching|hide|miniaturize|move|open|quit|(resign )?active|((maximum|minimum|proposed) )?size|show|zoom)|bundle|data source|movie|pasteboard|sound|tool(bar| tip)|(color|open|save) panel|coordinate system|frontmost|main( (bundle|menu|window))?|((services|(excluded from )?windows) )?menu|((executable|frameworks|resource|scripts|shared (frameworks|support)) )?path|(selected item )?identifier|data|content(s| view)?|character(s)?|click count|(command|control|option|shift) key down|context|delta (x|y|z)|key( code)?|location|pressure|unmodified characters|types|(first )?responder|playing|(allowed|selectable) identifiers|allows customization|(auto saves )?configuration|visible|image( name)?|menu form representation|tag|user(-| )defaults|associated file name|(auto|needs) display|current field editor|floating|has (resize indicator|shadow)|hides when deactivated|level|minimized (image|title)|opaque|position|release when closed|sheet|title(d)?)\b/g,
+                css: 'color3' },
+
+            { regex: new RegExp(this.getKeywords(specials), 'gm'), css: 'color3' },
+            { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' },
+            { regex: new RegExp(this.getKeywords(ordinals), 'gm'), css: 'keyword' }
+        ];
+    };
+
+    Brush.prototype = new SyntaxHighlighter.Highlighter();
+    Brush.aliases = ['applescript'];
+
+    SyntaxHighlighter.brushes.AppleScript = Brush;
+
+    // CommonJS
+    typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		var keywords =	'if fi then elif else for do done until while break continue case esac function return in eq ne ge le';
+		var commands =  'alias apropos awk basename bash bc bg builtin bzip2 cal cat cd cfdisk chgrp chmod chown chroot' +
+						'cksum clear cmp comm command cp cron crontab csplit cut date dc dd ddrescue declare df ' +
+						'diff diff3 dig dir dircolors dirname dirs du echo egrep eject enable env ethtool eval ' +
+						'exec exit expand export expr false fdformat fdisk fg fgrep file find fmt fold format ' +
+						'free fsck ftp gawk getopts grep groups gzip hash head history hostname id ifconfig ' +
+						'import install join kill less let ln local locate logname logout look lpc lpr lprint ' +
+						'lprintd lprintq lprm ls lsof make man mkdir mkfifo mkisofs mknod more mount mtools ' +
+						'mv netstat nice nl nohup nslookup open op passwd paste pathchk ping popd pr printcap ' +
+						'printenv printf ps pushd pwd quota quotacheck quotactl ram rcp read readonly renice ' +
+						'remsync rm rmdir rsync screen scp sdiff sed select seq set sftp shift shopt shutdown ' +
+						'sleep sort source split ssh strace su sudo sum symlink sync tail tar tee test time ' +
+						'times touch top traceroute trap tr true tsort tty type ulimit umask umount unalias ' +
+						'uname unexpand uniq units unset unshar useradd usermod users uuencode uudecode v vdir ' +
+						'vi watch wc whereis which who whoami Wget xargs yes'
+						;
+
+		this.regexList = [
+			{ regex: /^#!.*$/gm,											css: 'preprocessor bold' },
+			{ regex: /\/[\w-\/]+/gm,										css: 'plain' },
+			{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments,		css: 'comments' },		// one line comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,			css: 'string' },		// double quoted strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,			css: 'string' },		// single quoted strings
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),			css: 'keyword' },		// keywords
+			{ regex: new RegExp(this.getKeywords(commands), 'gm'),			css: 'functions' }		// commands
+			];
+	}
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['bash', 'shell', 'sh'];
+
+	SyntaxHighlighter.brushes.Bash = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Contributed by Jen
+		// http://www.jensbits.com/2009/05/14/coldfusion-brush-for-syntaxhighlighter-plus
+	
+		var funcs	=	'Abs ACos AddSOAPRequestHeader AddSOAPResponseHeader AjaxLink AjaxOnLoad ArrayAppend ArrayAvg ArrayClear ArrayDeleteAt ' + 
+						'ArrayInsertAt ArrayIsDefined ArrayIsEmpty ArrayLen ArrayMax ArrayMin ArraySet ArraySort ArraySum ArraySwap ArrayToList ' + 
+						'Asc ASin Atn BinaryDecode BinaryEncode BitAnd BitMaskClear BitMaskRead BitMaskSet BitNot BitOr BitSHLN BitSHRN BitXor ' + 
+						'Ceiling CharsetDecode CharsetEncode Chr CJustify Compare CompareNoCase Cos CreateDate CreateDateTime CreateObject ' + 
+						'CreateODBCDate CreateODBCDateTime CreateODBCTime CreateTime CreateTimeSpan CreateUUID DateAdd DateCompare DateConvert ' + 
+						'DateDiff DateFormat DatePart Day DayOfWeek DayOfWeekAsString DayOfYear DaysInMonth DaysInYear DE DecimalFormat DecrementValue ' + 
+						'Decrypt DecryptBinary DeleteClientVariable DeserializeJSON DirectoryExists DollarFormat DotNetToCFType Duplicate Encrypt ' + 
+						'EncryptBinary Evaluate Exp ExpandPath FileClose FileCopy FileDelete FileExists FileIsEOF FileMove FileOpen FileRead ' + 
+						'FileReadBinary FileReadLine FileSetAccessMode FileSetAttribute FileSetLastModified FileWrite Find FindNoCase FindOneOf ' + 
+						'FirstDayOfMonth Fix FormatBaseN GenerateSecretKey GetAuthUser GetBaseTagData GetBaseTagList GetBaseTemplatePath ' + 
+						'GetClientVariablesList GetComponentMetaData GetContextRoot GetCurrentTemplatePath GetDirectoryFromPath GetEncoding ' + 
+						'GetException GetFileFromPath GetFileInfo GetFunctionList GetGatewayHelper GetHttpRequestData GetHttpTimeString ' + 
+						'GetK2ServerDocCount GetK2ServerDocCountLimit GetLocale GetLocaleDisplayName GetLocalHostIP GetMetaData GetMetricData ' + 
+						'GetPageContext GetPrinterInfo GetProfileSections GetProfileString GetReadableImageFormats GetSOAPRequest GetSOAPRequestHeader ' + 
+						'GetSOAPResponse GetSOAPResponseHeader GetTempDirectory GetTempFile GetTemplatePath GetTickCount GetTimeZoneInfo GetToken ' + 
+						'GetUserRoles GetWriteableImageFormats Hash Hour HTMLCodeFormat HTMLEditFormat IIf ImageAddBorder ImageBlur ImageClearRect ' + 
+						'ImageCopy ImageCrop ImageDrawArc ImageDrawBeveledRect ImageDrawCubicCurve ImageDrawLine ImageDrawLines ImageDrawOval ' + 
+						'ImageDrawPoint ImageDrawQuadraticCurve ImageDrawRect ImageDrawRoundRect ImageDrawText ImageFlip ImageGetBlob ImageGetBufferedImage ' + 
+						'ImageGetEXIFTag ImageGetHeight ImageGetIPTCTag ImageGetWidth ImageGrayscale ImageInfo ImageNegative ImageNew ImageOverlay ImagePaste ' + 
+						'ImageRead ImageReadBase64 ImageResize ImageRotate ImageRotateDrawingAxis ImageScaleToFit ImageSetAntialiasing ImageSetBackgroundColor ' + 
+						'ImageSetDrawingColor ImageSetDrawingStroke ImageSetDrawingTransparency ImageSharpen ImageShear ImageShearDrawingAxis ImageTranslate ' + 
+						'ImageTranslateDrawingAxis ImageWrite ImageWriteBase64 ImageXORDrawingMode IncrementValue InputBaseN Insert Int IsArray IsBinary ' + 
+						'IsBoolean IsCustomFunction IsDate IsDDX IsDebugMode IsDefined IsImage IsImageFile IsInstanceOf IsJSON IsLeapYear IsLocalHost ' + 
+						'IsNumeric IsNumericDate IsObject IsPDFFile IsPDFObject IsQuery IsSimpleValue IsSOAPRequest IsStruct IsUserInAnyRole IsUserInRole ' + 
+						'IsUserLoggedIn IsValid IsWDDX IsXML IsXmlAttribute IsXmlDoc IsXmlElem IsXmlNode IsXmlRoot JavaCast JSStringFormat LCase Left Len ' + 
+						'ListAppend ListChangeDelims ListContains ListContainsNoCase ListDeleteAt ListFind ListFindNoCase ListFirst ListGetAt ListInsertAt ' + 
+						'ListLast ListLen ListPrepend ListQualify ListRest ListSetAt ListSort ListToArray ListValueCount ListValueCountNoCase LJustify Log ' + 
+						'Log10 LSCurrencyFormat LSDateFormat LSEuroCurrencyFormat LSIsCurrency LSIsDate LSIsNumeric LSNumberFormat LSParseCurrency LSParseDateTime ' + 
+						'LSParseEuroCurrency LSParseNumber LSTimeFormat LTrim Max Mid Min Minute Month MonthAsString Now NumberFormat ParagraphFormat ParseDateTime ' + 
+						'Pi PrecisionEvaluate PreserveSingleQuotes Quarter QueryAddColumn QueryAddRow QueryConvertForGrid QueryNew QuerySetCell QuotedValueList Rand ' + 
+						'Randomize RandRange REFind REFindNoCase ReleaseComObject REMatch REMatchNoCase RemoveChars RepeatString Replace ReplaceList ReplaceNoCase ' + 
+						'REReplace REReplaceNoCase Reverse Right RJustify Round RTrim Second SendGatewayMessage SerializeJSON SetEncoding SetLocale SetProfileString ' + 
+						'SetVariable Sgn Sin Sleep SpanExcluding SpanIncluding Sqr StripCR StructAppend StructClear StructCopy StructCount StructDelete StructFind ' + 
+						'StructFindKey StructFindValue StructGet StructInsert StructIsEmpty StructKeyArray StructKeyExists StructKeyList StructKeyList StructNew ' + 
+						'StructSort StructUpdate Tan TimeFormat ToBase64 ToBinary ToScript ToString Trim UCase URLDecode URLEncodedFormat URLSessionFormat Val ' + 
+						'ValueList VerifyClient Week Wrap Wrap WriteOutput XmlChildPos XmlElemNew XmlFormat XmlGetNodeType XmlNew XmlParse XmlSearch XmlTransform ' + 
+						'XmlValidate Year YesNoFormat';
+
+		var keywords =	'cfabort cfajaximport cfajaxproxy cfapplet cfapplication cfargument cfassociate cfbreak cfcache cfcalendar ' + 
+						'cfcase cfcatch cfchart cfchartdata cfchartseries cfcol cfcollection cfcomponent cfcontent cfcookie cfdbinfo ' + 
+						'cfdefaultcase cfdirectory cfdiv cfdocument cfdocumentitem cfdocumentsection cfdump cfelse cfelseif cferror ' + 
+						'cfexchangecalendar cfexchangeconnection cfexchangecontact cfexchangefilter cfexchangemail cfexchangetask ' + 
+						'cfexecute cfexit cffeed cffile cfflush cfform cfformgroup cfformitem cfftp cffunction cfgrid cfgridcolumn ' + 
+						'cfgridrow cfgridupdate cfheader cfhtmlhead cfhttp cfhttpparam cfif cfimage cfimport cfinclude cfindex ' + 
+						'cfinput cfinsert cfinterface cfinvoke cfinvokeargument cflayout cflayoutarea cfldap cflocation cflock cflog ' + 
+						'cflogin cfloginuser cflogout cfloop cfmail cfmailparam cfmailpart cfmenu cfmenuitem cfmodule cfNTauthenticate ' + 
+						'cfobject cfobjectcache cfoutput cfparam cfpdf cfpdfform cfpdfformparam cfpdfparam cfpdfsubform cfpod cfpop ' + 
+						'cfpresentation cfpresentationslide cfpresenter cfprint cfprocessingdirective cfprocparam cfprocresult ' + 
+						'cfproperty cfquery cfqueryparam cfregistry cfreport cfreportparam cfrethrow cfreturn cfsavecontent cfschedule ' + 
+						'cfscript cfsearch cfselect cfset cfsetting cfsilent cfslider cfsprydataset cfstoredproc cfswitch cftable ' + 
+						'cftextarea cfthread cfthrow cftimer cftooltip cftrace cftransaction cftree cftreeitem cftry cfupdate cfwddx ' + 
+						'cfwindow cfxml cfzip cfzipparam';
+
+		var operators =	'all and any between cross in join like not null or outer some';
+
+		this.regexList = [
+			{ regex: new RegExp('--(.*)$', 'gm'),						css: 'comments' },  // one line and multiline comments
+			{ regex: SyntaxHighlighter.regexLib.xmlComments,			css: 'comments' },    // single quoted strings
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },    // double quoted strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },    // single quoted strings
+			{ regex: new RegExp(this.getKeywords(funcs), 'gmi'),		css: 'functions' }, // functions
+			{ regex: new RegExp(this.getKeywords(operators), 'gmi'),	css: 'color1' },    // operators and such
+			{ regex: new RegExp(this.getKeywords(keywords), 'gmi'),		css: 'keyword' }    // keyword
+			];
+	}
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['coldfusion','cf'];
+	
+	SyntaxHighlighter.brushes.ColdFusion = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Copyright 2006 Shin, YoungJin
+	
+		var datatypes =	'ATOM BOOL BOOLEAN BYTE CHAR COLORREF DWORD DWORDLONG DWORD_PTR ' +
+						'DWORD32 DWORD64 FLOAT HACCEL HALF_PTR HANDLE HBITMAP HBRUSH ' +
+						'HCOLORSPACE HCONV HCONVLIST HCURSOR HDC HDDEDATA HDESK HDROP HDWP ' +
+						'HENHMETAFILE HFILE HFONT HGDIOBJ HGLOBAL HHOOK HICON HINSTANCE HKEY ' +
+						'HKL HLOCAL HMENU HMETAFILE HMODULE HMONITOR HPALETTE HPEN HRESULT ' +
+						'HRGN HRSRC HSZ HWINSTA HWND INT INT_PTR INT32 INT64 LANGID LCID LCTYPE ' +
+						'LGRPID LONG LONGLONG LONG_PTR LONG32 LONG64 LPARAM LPBOOL LPBYTE LPCOLORREF ' +
+						'LPCSTR LPCTSTR LPCVOID LPCWSTR LPDWORD LPHANDLE LPINT LPLONG LPSTR LPTSTR ' +
+						'LPVOID LPWORD LPWSTR LRESULT PBOOL PBOOLEAN PBYTE PCHAR PCSTR PCTSTR PCWSTR ' +
+						'PDWORDLONG PDWORD_PTR PDWORD32 PDWORD64 PFLOAT PHALF_PTR PHANDLE PHKEY PINT ' +
+						'PINT_PTR PINT32 PINT64 PLCID PLONG PLONGLONG PLONG_PTR PLONG32 PLONG64 POINTER_32 ' +
+						'POINTER_64 PSHORT PSIZE_T PSSIZE_T PSTR PTBYTE PTCHAR PTSTR PUCHAR PUHALF_PTR ' +
+						'PUINT PUINT_PTR PUINT32 PUINT64 PULONG PULONGLONG PULONG_PTR PULONG32 PULONG64 ' +
+						'PUSHORT PVOID PWCHAR PWORD PWSTR SC_HANDLE SC_LOCK SERVICE_STATUS_HANDLE SHORT ' +
+						'SIZE_T SSIZE_T TBYTE TCHAR UCHAR UHALF_PTR UINT UINT_PTR UINT32 UINT64 ULONG ' +
+						'ULONGLONG ULONG_PTR ULONG32 ULONG64 USHORT USN VOID WCHAR WORD WPARAM WPARAM WPARAM ' +
+						'char bool short int __int32 __int64 __int8 __int16 long float double __wchar_t ' +
+						'clock_t _complex _dev_t _diskfree_t div_t ldiv_t _exception _EXCEPTION_POINTERS ' +
+						'FILE _finddata_t _finddatai64_t _wfinddata_t _wfinddatai64_t __finddata64_t ' +
+						'__wfinddata64_t _FPIEEE_RECORD fpos_t _HEAPINFO _HFILE lconv intptr_t ' +
+						'jmp_buf mbstate_t _off_t _onexit_t _PNH ptrdiff_t _purecall_handler ' +
+						'sig_atomic_t size_t _stat __stat64 _stati64 terminate_function ' +
+						'time_t __time64_t _timeb __timeb64 tm uintptr_t _utimbuf ' +
+						'va_list wchar_t wctrans_t wctype_t wint_t signed';
+
+		var keywords =	'auto break case catch class const decltype __finally __exception __try ' +
+						'const_cast continue private public protected __declspec ' +
+						'default delete deprecated dllexport dllimport do dynamic_cast ' +
+						'else enum explicit extern if for friend goto inline ' +
+						'mutable naked namespace new noinline noreturn nothrow ' +
+						'register reinterpret_cast return selectany ' +
+						'sizeof static static_cast struct switch template this ' +
+						'thread throw true false try typedef typeid typename union ' +
+						'using uuid virtual void volatile whcar_t while';
+					
+		var functions =	'assert isalnum isalpha iscntrl isdigit isgraph islower isprint' +
+						'ispunct isspace isupper isxdigit tolower toupper errno localeconv ' +
+						'setlocale acos asin atan atan2 ceil cos cosh exp fabs floor fmod ' +
+						'frexp ldexp log log10 modf pow sin sinh sqrt tan tanh jmp_buf ' +
+						'longjmp setjmp raise signal sig_atomic_t va_arg va_end va_start ' +
+						'clearerr fclose feof ferror fflush fgetc fgetpos fgets fopen ' +
+						'fprintf fputc fputs fread freopen fscanf fseek fsetpos ftell ' +
+						'fwrite getc getchar gets perror printf putc putchar puts remove ' +
+						'rename rewind scanf setbuf setvbuf sprintf sscanf tmpfile tmpnam ' +
+						'ungetc vfprintf vprintf vsprintf abort abs atexit atof atoi atol ' +
+						'bsearch calloc div exit free getenv labs ldiv malloc mblen mbstowcs ' +
+						'mbtowc qsort rand realloc srand strtod strtol strtoul system ' +
+						'wcstombs wctomb memchr memcmp memcpy memmove memset strcat strchr ' +
+						'strcmp strcoll strcpy strcspn strerror strlen strncat strncmp ' +
+						'strncpy strpbrk strrchr strspn strstr strtok strxfrm asctime ' +
+						'clock ctime difftime gmtime localtime mktime strftime time';
+
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },			// one line comments
+			{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },			// multiline comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },			// strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },			// strings
+			{ regex: /^ *#.*/gm,										css: 'preprocessor' },
+			{ regex: new RegExp(this.getKeywords(datatypes), 'gm'),		css: 'color1 bold' },
+			{ regex: new RegExp(this.getKeywords(functions), 'gm'),		css: 'functions bold' },
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword bold' }
+			];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['cpp', 'c'];
+
+	SyntaxHighlighter.brushes.Cpp = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		var keywords =	'abstract as base bool break byte case catch char checked class const ' +
+						'continue decimal default delegate do double else enum event explicit volatile ' +
+						'extern false finally fixed float for foreach get goto if implicit in int ' +
+						'interface internal is lock long namespace new null object operator out ' +
+						'override params private protected public readonly ref return sbyte sealed set ' +
+						'short sizeof stackalloc static string struct switch this throw true try ' +
+						'typeof uint ulong unchecked unsafe ushort using virtual void while var ' +
+						'from group by into select let where orderby join on equals ascending descending';
+
+		function fixComments(match, regexInfo)
+		{
+			var css = (match[0].indexOf("///") == 0)
+				? 'color1'
+				: 'comments'
+				;
+			
+			return [new SyntaxHighlighter.Match(match[0], match.index, css)];
+		}
+
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	func : fixComments },		// one line comments
+			{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },			// multiline comments
+			{ regex: /@"(?:[^"]|"")*"/g,								css: 'string' },			// @-quoted strings
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },			// strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },			// strings
+			{ regex: /^\s*#.*/gm,										css: 'preprocessor' },		// preprocessor tags like #region and #endregion
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword' },			// c# keyword
+			{ regex: /\bpartial(?=\s+(?:class|interface|struct)\b)/g,	css: 'keyword' },			// contextual keyword: 'partial'
+			{ regex: /\byield(?=\s+(?:return|break)\b)/g,				css: 'keyword' }			// contextual keyword: 'yield'
+			];
+		
+		this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['c#', 'c-sharp', 'csharp'];
+
+	SyntaxHighlighter.brushes.CSharp = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		function getKeywordsCSS(str)
+		{
+			return '\\b([a-z_]|)' + str.replace(/ /g, '(?=:)\\b|\\b([a-z_\\*]|\\*|)') + '(?=:)\\b';
+		};
+	
+		function getValuesCSS(str)
+		{
+			return '\\b' + str.replace(/ /g, '(?!-)(?!:)\\b|\\b()') + '\:\\b';
+		};
+
+		var keywords =	'ascent azimuth background-attachment background-color background-image background-position ' +
+						'background-repeat background baseline bbox border-collapse border-color border-spacing border-style border-top ' +
+						'border-right border-bottom border-left border-top-color border-right-color border-bottom-color border-left-color ' +
+						'border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width ' +
+						'border-bottom-width border-left-width border-width border bottom cap-height caption-side centerline clear clip color ' +
+						'content counter-increment counter-reset cue-after cue-before cue cursor definition-src descent direction display ' +
+						'elevation empty-cells float font-size-adjust font-family font-size font-stretch font-style font-variant font-weight font ' +
+						'height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-top ' +
+						'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width orphans ' +
+						'outline-color outline-style outline-width outline overflow padding-top padding-right padding-bottom padding-left padding page ' +
+						'page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position ' +
+						'quotes right richness size slope src speak-header speak-numeral speak-punctuation speak speech-rate stemh stemv stress ' +
+						'table-layout text-align top text-decoration text-indent text-shadow text-transform unicode-bidi unicode-range units-per-em ' +
+						'vertical-align visibility voice-family volume white-space widows width widths word-spacing x-height z-index';
+
+		var values =	'above absolute all always aqua armenian attr aural auto avoid baseline behind below bidi-override black blink block blue bold bolder '+
+						'both bottom braille capitalize caption center center-left center-right circle close-quote code collapse compact condensed '+
+						'continuous counter counters crop cross crosshair cursive dashed decimal decimal-leading-zero default digits disc dotted double '+
+						'embed embossed e-resize expanded extra-condensed extra-expanded fantasy far-left far-right fast faster fixed format fuchsia '+
+						'gray green groove handheld hebrew help hidden hide high higher icon inline-table inline inset inside invert italic '+
+						'justify landscape large larger left-side left leftwards level lighter lime line-through list-item local loud lower-alpha '+
+						'lowercase lower-greek lower-latin lower-roman lower low ltr marker maroon medium message-box middle mix move narrower '+
+						'navy ne-resize no-close-quote none no-open-quote no-repeat normal nowrap n-resize nw-resize oblique olive once open-quote outset '+
+						'outside overline pointer portrait pre print projection purple red relative repeat repeat-x repeat-y rgb ridge right right-side '+
+						'rightwards rtl run-in screen scroll semi-condensed semi-expanded separate se-resize show silent silver slower slow '+
+						'small small-caps small-caption smaller soft solid speech spell-out square s-resize static status-bar sub super sw-resize '+
+						'table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group teal '+
+						'text-bottom text-top thick thin top transparent tty tv ultra-condensed ultra-expanded underline upper-alpha uppercase upper-latin '+
+						'upper-roman url visible wait white wider w-resize x-fast x-high x-large x-loud x-low x-slow x-small x-soft xx-large xx-small yellow';
+
+		var fonts =		'[mM]onospace [tT]ahoma [vV]erdana [aA]rial [hH]elvetica [sS]ans-serif [sS]erif [cC]ourier mono sans serif';
+	
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },	// multiline comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },	// double quoted strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },	// single quoted strings
+			{ regex: /\#[a-fA-F0-9]{3,6}/g,								css: 'value' },		// html colors
+			{ regex: /(-?\d+)(\.\d+)?(px|em|pt|\:|\%|)/g,				css: 'value' },		// sizes
+			{ regex: /!important/g,										css: 'color3' },	// !important
+			{ regex: new RegExp(getKeywordsCSS(keywords), 'gm'),		css: 'keyword' },	// keywords
+			{ regex: new RegExp(getValuesCSS(values), 'g'),				css: 'value' },		// values
+			{ regex: new RegExp(this.getKeywords(fonts), 'g'),			css: 'color1' }		// fonts
+			];
+
+		this.forHtmlScript({ 
+			left: /(&lt;|<)\s*style.*?(&gt;|>)/gi, 
+			right: /(&lt;|<)\/\s*style\s*(&gt;|>)/gi 
+			});
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['css'];
+
+	SyntaxHighlighter.brushes.CSS = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		var keywords =	'abs addr and ansichar ansistring array as asm begin boolean byte cardinal ' +
+						'case char class comp const constructor currency destructor div do double ' +
+						'downto else end except exports extended false file finalization finally ' +
+						'for function goto if implementation in inherited int64 initialization ' +
+						'integer interface is label library longint longword mod nil not object ' +
+						'of on or packed pansichar pansistring pchar pcurrency pdatetime pextended ' +
+						'pint64 pointer private procedure program property pshortstring pstring ' +
+						'pvariant pwidechar pwidestring protected public published raise real real48 ' +
+						'record repeat set shl shortint shortstring shr single smallint string then ' +
+						'threadvar to true try type unit until uses val var varirnt while widechar ' +
+						'widestring with word write writeln xor';
+
+		this.regexList = [
+			{ regex: /\(\*[\s\S]*?\*\)/gm,								css: 'comments' },  	// multiline comments (* *)
+			{ regex: /{(?!\$)[\s\S]*?}/gm,								css: 'comments' },  	// multiline comments { }
+			{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },  	// one line
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },		// strings
+			{ regex: /\{\$[a-zA-Z]+ .+\}/g,								css: 'color1' },		// compiler Directives and Region tags
+			{ regex: /\b[\d\.]+\b/g,									css: 'value' },			// numbers 12345
+			{ regex: /\$[a-zA-Z0-9]+\b/g,								css: 'value' },			// numbers $F5D3
+			{ regex: new RegExp(this.getKeywords(keywords), 'gmi'),		css: 'keyword' }		// keyword
+			];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['delphi', 'pascal', 'pas'];
+
+	SyntaxHighlighter.brushes.Delphi = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		this.regexList = [
+			{ regex: /^\+\+\+ .*$/gm,	css: 'color2' },	// new file
+			{ regex: /^\-\-\- .*$/gm,	css: 'color2' },	// old file
+			{ regex: /^\s.*$/gm,		css: 'color1' },	// unchanged
+			{ regex: /^@@.*@@.*$/gm,	css: 'variable' },	// location
+			{ regex: /^\+.*$/gm,		css: 'string' },	// additions
+			{ regex: /^\-.*$/gm,		css: 'color3' }		// deletions
+			];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['diff', 'patch'];
+
+	SyntaxHighlighter.brushes.Diff = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Contributed by Jean-Lou Dupont
+		// http://jldupont.blogspot.com/2009/06/erlang-syntax-highlighter.html  
+
+		// According to: http://erlang.org/doc/reference_manual/introduction.html#1.5
+		var keywords = 'after and andalso band begin bnot bor bsl bsr bxor '+
+			'case catch cond div end fun if let not of or orelse '+
+			'query receive rem try when xor'+
+			// additional
+			' module export import define';
+
+		this.regexList = [
+			{ regex: new RegExp("[A-Z][A-Za-z0-9_]+", 'g'), 			css: 'constants' },
+			{ regex: new RegExp("\\%.+", 'gm'), 						css: 'comments' },
+			{ regex: new RegExp("\\?[A-Za-z0-9_]+", 'g'), 				css: 'preprocessor' },
+			{ regex: new RegExp("[a-z0-9_]+:[a-z0-9_]+", 'g'), 			css: 'functions' },
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },
+			{ regex: new RegExp(this.getKeywords(keywords),	'gm'),		css: 'keyword' }
+			];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['erl', 'erlang'];
+
+	SyntaxHighlighter.brushes.Erland = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Contributed by Andres Almiray
+		// http://jroller.com/aalmiray/entry/nice_source_code_syntax_highlighter
+
+		var keywords =	'as assert break case catch class continue def default do else extends finally ' +
+						'if in implements import instanceof interface new package property return switch ' +
+						'throw throws try while public protected private static';
+		var types    =  'void boolean byte char short int long float double';
+		var constants = 'null';
+		var methods   = 'allProperties count get size '+
+						'collect each eachProperty eachPropertyName eachWithIndex find findAll ' +
+						'findIndexOf grep inject max min reverseEach sort ' +
+						'asImmutable asSynchronized flatten intersect join pop reverse subMap toList ' +
+						'padRight padLeft contains eachMatch toCharacter toLong toUrl tokenize ' +
+						'eachFile eachFileRecurse eachB yte eachLine readBytes readLine getText ' +
+						'splitEachLine withReader append encodeBase64 decodeBase64 filterLine ' +
+						'transformChar transformLine withOutputStream withPrintWriter withStream ' +
+						'withStreams withWriter withWriterAppend write writeLine '+
+						'dump inspect invokeMethod print println step times upto use waitForOrKill '+
+						'getText';
+
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.singleLineCComments,				css: 'comments' },		// one line comments
+			{ regex: SyntaxHighlighter.regexLib.multiLineCComments,					css: 'comments' },		// multiline comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,					css: 'string' },		// strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,					css: 'string' },		// strings
+			{ regex: /""".*"""/g,													css: 'string' },		// GStrings
+			{ regex: new RegExp('\\b([\\d]+(\\.[\\d]+)?|0x[a-f0-9]+)\\b', 'gi'),	css: 'value' },			// numbers
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),					css: 'keyword' },		// goovy keyword
+			{ regex: new RegExp(this.getKeywords(types), 'gm'),						css: 'color1' },		// goovy/java type
+			{ regex: new RegExp(this.getKeywords(constants), 'gm'),					css: 'constants' },		// constants
+			{ regex: new RegExp(this.getKeywords(methods), 'gm'),					css: 'functions' }		// methods
+			];
+
+		this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
+	}
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['groovy'];
+
+	SyntaxHighlighter.brushes.Groovy = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		var keywords =	'abstract assert boolean break byte case catch char class const ' +
+						'continue default do double else enum extends ' +
+						'false final finally float for goto if implements import ' +
+						'instanceof int interface long native new null ' +
+						'package private protected public return ' +
+						'short static strictfp super switch synchronized this throw throws true ' +
+						'transient try void volatile while';
+
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },		// one line comments
+			{ regex: /\/\*([^\*][\s\S]*)?\*\//gm,						css: 'comments' },	 	// multiline comments
+			{ regex: /\/\*(?!\*\/)\*[\s\S]*?\*\//gm,					css: 'preprocessor' },	// documentation comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },		// strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },		// strings
+			{ regex: /\b([\d]+(\.[\d]+)?|0x[a-f0-9]+)\b/gi,				css: 'value' },			// numbers
+			{ regex: /(?!\@interface\b)\@[\$\w]+\b/g,					css: 'color1' },		// annotation @anno
+			{ regex: /\@interface\b/g,									css: 'color2' },		// @interface keyword
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword' }		// java keyword
+			];
+
+		this.forHtmlScript({
+			left	: /(&lt;|<)%[@!=]?/g, 
+			right	: /%(&gt;|>)/g 
+		});
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['java'];
+
+	SyntaxHighlighter.brushes.Java = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Contributed by Patrick Webster
+		// http://patrickwebster.blogspot.com/2009/04/javafx-brush-for-syntaxhighlighter.html
+		var datatypes =	'Boolean Byte Character Double Duration '
+						+ 'Float Integer Long Number Short String Void'
+						;
+
+		var keywords = 'abstract after and as assert at before bind bound break catch class '
+						+ 'continue def delete else exclusive extends false finally first for from '
+						+ 'function if import in indexof init insert instanceof into inverse last '
+						+ 'lazy mixin mod nativearray new not null on or override package postinit '
+						+ 'protected public public-init public-read replace return reverse sizeof '
+						+ 'step super then this throw true try tween typeof var where while with '
+						+ 'attribute let private readonly static trigger'
+						;
+
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },
+			{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },
+			{ regex: /(-?\.?)(\b(\d*\.?\d+|\d+\.?\d*)(e[+-]?\d+)?|0x[a-f\d]+)\b\.?/gi, css: 'color2' },	// numbers
+			{ regex: new RegExp(this.getKeywords(datatypes), 'gm'),		css: 'variable' },	// datatypes
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword' }
+		];
+		this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['jfx', 'javafx'];
+
+	SyntaxHighlighter.brushes.JavaFX = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		var keywords =	'break case catch continue ' +
+						'default delete do else false  ' +
+						'for function if in instanceof ' +
+						'new null return super switch ' +
+						'this throw true try typeof var while with'
+						;
+
+		var r = SyntaxHighlighter.regexLib;
+		
+		this.regexList = [
+			{ regex: r.multiLineDoubleQuotedString,					css: 'string' },			// double quoted strings
+			{ regex: r.multiLineSingleQuotedString,					css: 'string' },			// single quoted strings
+			{ regex: r.singleLineCComments,							css: 'comments' },			// one line comments
+			{ regex: r.multiLineCComments,							css: 'comments' },			// multiline comments
+			{ regex: /\s*#.*/gm,									css: 'preprocessor' },		// preprocessor tags like #region and #endregion
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),	css: 'keyword' }			// keywords
+			];
+	
+		this.forHtmlScript(r.scriptScriptTags);
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['js', 'jscript', 'javascript'];
+
+	SyntaxHighlighter.brushes.JScript = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Contributed by David Simmons-Duffin and Marty Kube
+	
+		var funcs = 
+			'abs accept alarm atan2 bind binmode chdir chmod chomp chop chown chr ' + 
+			'chroot close closedir connect cos crypt defined delete each endgrent ' + 
+			'endhostent endnetent endprotoent endpwent endservent eof exec exists ' + 
+			'exp fcntl fileno flock fork format formline getc getgrent getgrgid ' + 
+			'getgrnam gethostbyaddr gethostbyname gethostent getlogin getnetbyaddr ' + 
+			'getnetbyname getnetent getpeername getpgrp getppid getpriority ' + 
+			'getprotobyname getprotobynumber getprotoent getpwent getpwnam getpwuid ' + 
+			'getservbyname getservbyport getservent getsockname getsockopt glob ' + 
+			'gmtime grep hex index int ioctl join keys kill lc lcfirst length link ' + 
+			'listen localtime lock log lstat map mkdir msgctl msgget msgrcv msgsnd ' + 
+			'oct open opendir ord pack pipe pop pos print printf prototype push ' + 
+			'quotemeta rand read readdir readline readlink readpipe recv rename ' + 
+			'reset reverse rewinddir rindex rmdir scalar seek seekdir select semctl ' + 
+			'semget semop send setgrent sethostent setnetent setpgrp setpriority ' + 
+			'setprotoent setpwent setservent setsockopt shift shmctl shmget shmread ' + 
+			'shmwrite shutdown sin sleep socket socketpair sort splice split sprintf ' + 
+			'sqrt srand stat study substr symlink syscall sysopen sysread sysseek ' + 
+			'system syswrite tell telldir time times tr truncate uc ucfirst umask ' + 
+			'undef unlink unpack unshift utime values vec wait waitpid warn write ' +
+			// feature
+			'say';
+    
+		var keywords =  
+			'bless caller continue dbmclose dbmopen die do dump else elsif eval exit ' +
+			'for foreach goto if import last local my next no our package redo ref ' + 
+			'require return sub tie tied unless untie until use wantarray while ' +
+			// feature
+			'given when default ' +
+			// Try::Tiny
+			'try catch finally ' +
+			// Moose
+			'has extends with before after around override augment';
+    
+		this.regexList = [
+			{ regex: /(<<|&lt;&lt;)((\w+)|(['"])(.+?)\4)[\s\S]+?\n\3\5\n/g,	css: 'string' },	// here doc (maybe html encoded)
+			{ regex: /#.*$/gm,										css: 'comments' },
+			{ regex: /^#!.*\n/g,									css: 'preprocessor' },	// shebang
+			{ regex: /-?\w+(?=\s*=(>|&gt;))/g,	css: 'string' }, // fat comma
+
+			// is this too much?
+			{ regex: /\bq[qwxr]?\([\s\S]*?\)/g,	css: 'string' }, // quote-like operators ()
+			{ regex: /\bq[qwxr]?\{[\s\S]*?\}/g,	css: 'string' }, // quote-like operators {}
+			{ regex: /\bq[qwxr]?\[[\s\S]*?\]/g,	css: 'string' }, // quote-like operators []
+			{ regex: /\bq[qwxr]?(<|&lt;)[\s\S]*?(>|&gt;)/g,	css: 'string' }, // quote-like operators <>
+			{ regex: /\bq[qwxr]?([^\w({<[])[\s\S]*?\1/g,	css: 'string' }, // quote-like operators non-paired
+
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,	css: 'string' },
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,	css: 'string' },
+			// currently ignoring single quote package separator and utf8 names
+			{ regex: /(?:&amp;|[$@%*]|\$#)[a-zA-Z_](\w+|::)*/g,   		css: 'variable' },
+			{ regex: /\b__(?:END|DATA)__\b[\s\S]*$/g,				css: 'comments' },
+			{ regex: /(^|\n)=\w[\s\S]*?(\n=cut\s*\n|$)/g,				css: 'comments' },		// pod
+			{ regex: new RegExp(this.getKeywords(funcs), 'gm'),		css: 'functions' },
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),	css: 'keyword' }
+		];
+
+		this.forHtmlScript(SyntaxHighlighter.regexLib.phpScriptTags);
+	}
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases		= ['perl', 'Perl', 'pl'];
+
+	SyntaxHighlighter.brushes.Perl = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		var funcs	=	'abs acos acosh addcslashes addslashes ' +
+						'array_change_key_case array_chunk array_combine array_count_values array_diff '+
+						'array_diff_assoc array_diff_key array_diff_uassoc array_diff_ukey array_fill '+
+						'array_filter array_flip array_intersect array_intersect_assoc array_intersect_key '+
+						'array_intersect_uassoc array_intersect_ukey array_key_exists array_keys array_map '+
+						'array_merge array_merge_recursive array_multisort array_pad array_pop array_product '+
+						'array_push array_rand array_reduce array_reverse array_search array_shift '+
+						'array_slice array_splice array_sum array_udiff array_udiff_assoc '+
+						'array_udiff_uassoc array_uintersect array_uintersect_assoc '+
+						'array_uintersect_uassoc array_unique array_unshift array_values array_walk '+
+						'array_walk_recursive atan atan2 atanh base64_decode base64_encode base_convert '+
+						'basename bcadd bccomp bcdiv bcmod bcmul bindec bindtextdomain bzclose bzcompress '+
+						'bzdecompress bzerrno bzerror bzerrstr bzflush bzopen bzread bzwrite ceil chdir '+
+						'checkdate checkdnsrr chgrp chmod chop chown chr chroot chunk_split class_exists '+
+						'closedir closelog copy cos cosh count count_chars date decbin dechex decoct '+
+						'deg2rad delete ebcdic2ascii echo empty end ereg ereg_replace eregi eregi_replace error_log '+
+						'error_reporting escapeshellarg escapeshellcmd eval exec exit exp explode extension_loaded '+
+						'feof fflush fgetc fgetcsv fgets fgetss file_exists file_get_contents file_put_contents '+
+						'fileatime filectime filegroup fileinode filemtime fileowner fileperms filesize filetype '+
+						'floatval flock floor flush fmod fnmatch fopen fpassthru fprintf fputcsv fputs fread fscanf '+
+						'fseek fsockopen fstat ftell ftok getallheaders getcwd getdate getenv gethostbyaddr gethostbyname '+
+						'gethostbynamel getimagesize getlastmod getmxrr getmygid getmyinode getmypid getmyuid getopt '+
+						'getprotobyname getprotobynumber getrandmax getrusage getservbyname getservbyport gettext '+
+						'gettimeofday gettype glob gmdate gmmktime ini_alter ini_get ini_get_all ini_restore ini_set '+
+						'interface_exists intval ip2long is_a is_array is_bool is_callable is_dir is_double '+
+						'is_executable is_file is_finite is_float is_infinite is_int is_integer is_link is_long '+
+						'is_nan is_null is_numeric is_object is_readable is_real is_resource is_scalar is_soap_fault '+
+						'is_string is_subclass_of is_uploaded_file is_writable is_writeable mkdir mktime nl2br '+
+						'parse_ini_file parse_str parse_url passthru pathinfo print readlink realpath rewind rewinddir rmdir '+
+						'round str_ireplace str_pad str_repeat str_replace str_rot13 str_shuffle str_split '+
+						'str_word_count strcasecmp strchr strcmp strcoll strcspn strftime strip_tags stripcslashes '+
+						'stripos stripslashes stristr strlen strnatcasecmp strnatcmp strncasecmp strncmp strpbrk '+
+						'strpos strptime strrchr strrev strripos strrpos strspn strstr strtok strtolower strtotime '+
+						'strtoupper strtr strval substr substr_compare';
+
+		var keywords =	'abstract and array as break case catch cfunction class clone const continue declare default die do ' +
+						'else elseif enddeclare endfor endforeach endif endswitch endwhile extends final for foreach ' +
+						'function global goto if implements include include_once interface instanceof insteadof namespace new ' +
+						'old_function or private protected public return require require_once static switch ' +
+						'trait throw try use var while xor ';
+		
+		var constants	= '__FILE__ __LINE__ __METHOD__ __FUNCTION__ __CLASS__';
+
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },			// one line comments
+			{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },			// multiline comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },			// double quoted strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },			// single quoted strings
+			{ regex: /\$\w+/g,											css: 'variable' },			// variables
+			{ regex: new RegExp(this.getKeywords(funcs), 'gmi'),		css: 'functions' },			// common functions
+			{ regex: new RegExp(this.getKeywords(constants), 'gmi'),	css: 'constants' },			// constants
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword' }			// keyword
+			];
+
+		this.forHtmlScript(SyntaxHighlighter.regexLib.phpScriptTags);
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['php'];
+
+	SyntaxHighlighter.brushes.Php = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['text', 'plain'];
+
+	SyntaxHighlighter.brushes.Plain = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Contributed by Joel 'Jaykul' Bennett, http://PoshCode.org | http://HuddledMasses.org
+		var keywords =	'while validateset validaterange validatepattern validatelength validatecount ' +
+						'until trap switch return ref process param parameter in if global: '+
+						'function foreach for finally filter end elseif else dynamicparam do default ' +
+						'continue cmdletbinding break begin alias \\? % #script #private #local #global '+
+						'mandatory parametersetname position valuefrompipeline ' +
+						'valuefrompipelinebypropertyname valuefromremainingarguments helpmessage ';
+
+		var operators =	' and as band bnot bor bxor casesensitive ccontains ceq cge cgt cle ' +
+						'clike clt cmatch cne cnotcontains cnotlike cnotmatch contains ' +
+						'creplace eq exact f file ge gt icontains ieq ige igt ile ilike ilt ' +
+						'imatch ine inotcontains inotlike inotmatch ireplace is isnot le like ' +
+						'lt match ne not notcontains notlike notmatch or regex replace wildcard';
+						
+		var verbs =		'write where wait use update unregister undo trace test tee take suspend ' +
+						'stop start split sort skip show set send select scroll resume restore ' +
+						'restart resolve resize reset rename remove register receive read push ' +
+						'pop ping out new move measure limit join invoke import group get format ' +
+						'foreach export expand exit enter enable disconnect disable debug cxnew ' +
+						'copy convertto convertfrom convert connect complete compare clear ' +
+						'checkpoint aggregate add';
+
+		// I can't find a way to match the comment based help in multi-line comments, because SH won't highlight in highlights, and javascript doesn't support lookbehind
+		var commenthelp = ' component description example externalhelp forwardhelpcategory forwardhelptargetname forwardhelptargetname functionality inputs link notes outputs parameter remotehelprunspace role synopsis';
+
+		this.regexList = [
+			{ regex: new RegExp('^\\s*#[#\\s]*\\.('+this.getKeywords(commenthelp)+').*$', 'gim'),			css: 'preprocessor help bold' },		// comment-based help
+			{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments,										css: 'comments' },						// one line comments
+			{ regex: /(&lt;|<)#[\s\S]*?#(&gt;|>)/gm,														css: 'comments here' },					// multi-line comments
+			
+			{ regex: new RegExp('@"\\n[\\s\\S]*?\\n"@', 'gm'),												css: 'script string here' },			// double quoted here-strings
+			{ regex: new RegExp("@'\\n[\\s\\S]*?\\n'@", 'gm'),												css: 'script string single here' },		// single quoted here-strings
+			{ regex: new RegExp('"(?:\\$\\([^\\)]*\\)|[^"]|`"|"")*[^`]"','g'),								css: 'string' },						// double quoted strings
+			{ regex: new RegExp("'(?:[^']|'')*'", 'g'),														css: 'string single' },					// single quoted strings
+			
+			{ regex: new RegExp('[\\$|@|@@](?:(?:global|script|private|env):)?[A-Z0-9_]+', 'gi'),			css: 'variable' },						// $variables
+			{ regex: new RegExp('(?:\\b'+verbs.replace(/ /g, '\\b|\\b')+')-[a-zA-Z_][a-zA-Z0-9_]*', 'gmi'),	css: 'functions' },						// functions and cmdlets
+			{ regex: new RegExp(this.getKeywords(keywords), 'gmi'),											css: 'keyword' },						// keywords
+			{ regex: new RegExp('-'+this.getKeywords(operators), 'gmi'),									css: 'operator value' },				// operators
+			{ regex: new RegExp('\\[[A-Z_\\[][A-Z0-9_. `,\\[\\]]*\\]', 'gi'),								css: 'constants' },						// .Net [Type]s
+			{ regex: new RegExp('\\s+-(?!'+this.getKeywords(operators)+')[a-zA-Z_][a-zA-Z0-9_]*', 'gmi'),	css: 'color1' },						// parameters	  
+		];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['powershell', 'ps', 'posh'];
+
+	SyntaxHighlighter.brushes.PowerShell = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Contributed by Gheorghe Milas and Ahmad Sherif
+	
+		var keywords =  'and assert break class continue def del elif else ' +
+						'except exec finally for from global if import in is ' +
+						'lambda not or pass print raise return try yield while';
+
+		var funcs = '__import__ abs all any apply basestring bin bool buffer callable ' +
+					'chr classmethod cmp coerce compile complex delattr dict dir ' +
+					'divmod enumerate eval execfile file filter float format frozenset ' +
+					'getattr globals hasattr hash help hex id input int intern ' +
+					'isinstance issubclass iter len list locals long map max min next ' +
+					'object oct open ord pow print property range raw_input reduce ' +
+					'reload repr reversed round set setattr slice sorted staticmethod ' +
+					'str sum super tuple type type unichr unicode vars xrange zip';
+
+		var special =  'None True False self cls class_';
+
+		this.regexList = [
+				{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments, css: 'comments' },
+				{ regex: /^\s*@\w+/gm, 										css: 'decorator' },
+				{ regex: /(['\"]{3})([^\1])*?\1/gm, 						css: 'comments' },
+				{ regex: /"(?!")(?:\.|\\\"|[^\""\n])*"/gm, 					css: 'string' },
+				{ regex: /'(?!')(?:\.|(\\\')|[^\''\n])*'/gm, 				css: 'string' },
+				{ regex: /\+|\-|\*|\/|\%|=|==/gm, 							css: 'keyword' },
+				{ regex: /\b\d+\.?\w*/g, 									css: 'value' },
+				{ regex: new RegExp(this.getKeywords(funcs), 'gmi'),		css: 'functions' },
+				{ regex: new RegExp(this.getKeywords(keywords), 'gm'), 		css: 'keyword' },
+				{ regex: new RegExp(this.getKeywords(special), 'gm'), 		css: 'color1' }
+				];
+			
+		this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['py', 'python'];
+
+	SyntaxHighlighter.brushes.Python = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Contributed by Erik Peterson.
+	
+		var keywords =	'alias and BEGIN begin break case class def define_method defined do each else elsif ' +
+						'END end ensure false for if in module new next nil not or raise redo rescue retry return ' +
+						'self super then throw true undef unless until when while yield';
+
+		var builtins =	'Array Bignum Binding Class Continuation Dir Exception FalseClass File::Stat File Fixnum Fload ' +
+						'Hash Integer IO MatchData Method Module NilClass Numeric Object Proc Range Regexp String Struct::TMS Symbol ' +
+						'ThreadGroup Thread Time TrueClass';
+
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments,	css: 'comments' },		// one line comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },		// double quoted strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },		// single quoted strings
+			{ regex: /\b[A-Z0-9_]+\b/g,									css: 'constants' },		// constants
+			{ regex: /:[a-z][A-Za-z0-9_]*/g,							css: 'color2' },		// symbols
+			{ regex: /(\$|@@|@)\w+/g,									css: 'variable bold' },	// $global, @instance, and @@class variables
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword' },		// keywords
+			{ regex: new RegExp(this.getKeywords(builtins), 'gm'),		css: 'color1' }			// builtins
+			];
+
+		this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['ruby', 'rails', 'ror', 'rb'];
+
+	SyntaxHighlighter.brushes.Ruby = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		function getKeywordsCSS(str)
+		{
+			return '\\b([a-z_]|)' + str.replace(/ /g, '(?=:)\\b|\\b([a-z_\\*]|\\*|)') + '(?=:)\\b';
+		};
+	
+		function getValuesCSS(str)
+		{
+			return '\\b' + str.replace(/ /g, '(?!-)(?!:)\\b|\\b()') + '\:\\b';
+		};
+
+		var keywords =	'ascent azimuth background-attachment background-color background-image background-position ' +
+						'background-repeat background baseline bbox border-collapse border-color border-spacing border-style border-top ' +
+						'border-right border-bottom border-left border-top-color border-right-color border-bottom-color border-left-color ' +
+						'border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width ' +
+						'border-bottom-width border-left-width border-width border bottom cap-height caption-side centerline clear clip color ' +
+						'content counter-increment counter-reset cue-after cue-before cue cursor definition-src descent direction display ' +
+						'elevation empty-cells float font-size-adjust font-family font-size font-stretch font-style font-variant font-weight font ' +
+						'height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-top ' +
+						'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width orphans ' +
+						'outline-color outline-style outline-width outline overflow padding-top padding-right padding-bottom padding-left padding page ' +
+						'page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position ' +
+						'quotes right richness size slope src speak-header speak-numeral speak-punctuation speak speech-rate stemh stemv stress ' +
+						'table-layout text-align top text-decoration text-indent text-shadow text-transform unicode-bidi unicode-range units-per-em ' +
+						'vertical-align visibility voice-family volume white-space widows width widths word-spacing x-height z-index';
+		
+		var values =	'above absolute all always aqua armenian attr aural auto avoid baseline behind below bidi-override black blink block blue bold bolder '+
+						'both bottom braille capitalize caption center center-left center-right circle close-quote code collapse compact condensed '+
+						'continuous counter counters crop cross crosshair cursive dashed decimal decimal-leading-zero digits disc dotted double '+
+						'embed embossed e-resize expanded extra-condensed extra-expanded fantasy far-left far-right fast faster fixed format fuchsia '+
+						'gray green groove handheld hebrew help hidden hide high higher icon inline-table inline inset inside invert italic '+
+						'justify landscape large larger left-side left leftwards level lighter lime line-through list-item local loud lower-alpha '+
+						'lowercase lower-greek lower-latin lower-roman lower low ltr marker maroon medium message-box middle mix move narrower '+
+						'navy ne-resize no-close-quote none no-open-quote no-repeat normal nowrap n-resize nw-resize oblique olive once open-quote outset '+
+						'outside overline pointer portrait pre print projection purple red relative repeat repeat-x repeat-y rgb ridge right right-side '+
+						'rightwards rtl run-in screen scroll semi-condensed semi-expanded separate se-resize show silent silver slower slow '+
+						'small small-caps small-caption smaller soft solid speech spell-out square s-resize static status-bar sub super sw-resize '+
+						'table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group teal '+
+						'text-bottom text-top thick thin top transparent tty tv ultra-condensed ultra-expanded underline upper-alpha uppercase upper-latin '+
+						'upper-roman url visible wait white wider w-resize x-fast x-high x-large x-loud x-low x-slow x-small x-soft xx-large xx-small yellow';
+		
+		var fonts =		'[mM]onospace [tT]ahoma [vV]erdana [aA]rial [hH]elvetica [sS]ans-serif [sS]erif [cC]ourier mono sans serif';
+		
+		var statements		= '!important !default';
+		var preprocessor	= '@import @extend @debug @warn @if @for @while @mixin @include';
+		
+		var r = SyntaxHighlighter.regexLib;
+		
+		this.regexList = [
+			{ regex: r.multiLineCComments,								css: 'comments' },		// multiline comments
+			{ regex: r.singleLineCComments,								css: 'comments' },		// singleline comments
+			{ regex: r.doubleQuotedString,								css: 'string' },		// double quoted strings
+			{ regex: r.singleQuotedString,								css: 'string' },		// single quoted strings
+			{ regex: /\#[a-fA-F0-9]{3,6}/g,								css: 'value' },			// html colors
+			{ regex: /\b(-?\d+)(\.\d+)?(px|em|pt|\:|\%|)\b/g,			css: 'value' },			// sizes
+			{ regex: /\$\w+/g,											css: 'variable' },		// variables
+			{ regex: new RegExp(this.getKeywords(statements), 'g'),		css: 'color3' },		// statements
+			{ regex: new RegExp(this.getKeywords(preprocessor), 'g'),	css: 'preprocessor' },	// preprocessor
+			{ regex: new RegExp(getKeywordsCSS(keywords), 'gm'),		css: 'keyword' },		// keywords
+			{ regex: new RegExp(getValuesCSS(values), 'g'),				css: 'value' },			// values
+			{ regex: new RegExp(this.getKeywords(fonts), 'g'),			css: 'color1' }			// fonts
+			];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['sass', 'scss'];
+
+	SyntaxHighlighter.brushes.Sass = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		// Contributed by Yegor Jbanov and David Bernard.
+	
+		var keywords =	'val sealed case def true trait implicit forSome import match object null finally super ' +
+						'override try lazy for var catch throw type extends class while with new final yield abstract ' +
+						'else do if return protected private this package false';
+
+		var keyops =	'[_:=><%#@]+';
+
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.singleLineCComments,			css: 'comments' },	// one line comments
+			{ regex: SyntaxHighlighter.regexLib.multiLineCComments,				css: 'comments' },	// multiline comments
+			{ regex: SyntaxHighlighter.regexLib.multiLineSingleQuotedString,	css: 'string' },	// multi-line strings
+			{ regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString,    css: 'string' },	// double-quoted string
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,				css: 'string' },	// strings
+			{ regex: /0x[a-f0-9]+|\d+(\.\d+)?/gi,								css: 'value' },		// numbers
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),				css: 'keyword' },	// keywords
+			{ regex: new RegExp(keyops, 'gm'),									css: 'keyword' }	// scala keyword
+			];
+	}
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['scala'];
+
+	SyntaxHighlighter.brushes.Scala = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		var funcs	=	'abs avg case cast coalesce convert count current_timestamp ' +
+						'current_user day isnull left lower month nullif replace right ' +
+						'session_user space substring sum system_user upper user year';
+
+		var keywords =	'absolute action add after alter as asc at authorization begin bigint ' +
+						'binary bit by cascade char character check checkpoint close collate ' +
+						'column commit committed connect connection constraint contains continue ' +
+						'create cube current current_date current_time cursor database date ' +
+						'deallocate dec decimal declare default delete desc distinct double drop ' +
+						'dynamic else end end-exec escape except exec execute false fetch first ' +
+						'float for force foreign forward free from full function global goto grant ' +
+						'group grouping having hour ignore index inner insensitive insert instead ' +
+						'int integer intersect into is isolation key last level load local max min ' +
+						'minute modify move name national nchar next no numeric of off on only ' +
+						'open option order out output partial password precision prepare primary ' +
+						'prior privileges procedure public read real references relative repeatable ' +
+						'restrict return returns revoke rollback rollup rows rule schema scroll ' +
+						'second section select sequence serializable set size smallint static ' +
+						'statistics table temp temporary then time timestamp to top transaction ' +
+						'translation trigger true truncate uncommitted union unique update values ' +
+						'varchar varying view when where with work';
+
+		var operators =	'all and any between cross in join like not null or outer some';
+
+		this.regexList = [
+			{ regex: /--(.*)$/gm,												css: 'comments' },			// one line and multiline comments
+			{ regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString,	css: 'string' },			// double quoted strings
+			{ regex: SyntaxHighlighter.regexLib.multiLineSingleQuotedString,	css: 'string' },			// single quoted strings
+			{ regex: new RegExp(this.getKeywords(funcs), 'gmi'),				css: 'color2' },			// functions
+			{ regex: new RegExp(this.getKeywords(operators), 'gmi'),			css: 'color1' },			// operators and such
+			{ regex: new RegExp(this.getKeywords(keywords), 'gmi'),				css: 'keyword' }			// keyword
+			];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['sql'];
+
+	SyntaxHighlighter.brushes.Sql = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		var keywords =	'AddHandler AddressOf AndAlso Alias And Ansi As Assembly Auto ' +
+						'Boolean ByRef Byte ByVal Call Case Catch CBool CByte CChar CDate ' +
+						'CDec CDbl Char CInt Class CLng CObj Const CShort CSng CStr CType ' +
+						'Date Decimal Declare Default Delegate Dim DirectCast Do Double Each ' +
+						'Else ElseIf End Enum Erase Error Event Exit False Finally For Friend ' +
+						'Function Get GetType GoSub GoTo Handles If Implements Imports In ' +
+						'Inherits Integer Interface Is Let Lib Like Long Loop Me Mod Module ' +
+						'MustInherit MustOverride MyBase MyClass Namespace New Next Not Nothing ' +
+						'NotInheritable NotOverridable Object On Option Optional Or OrElse ' +
+						'Overloads Overridable Overrides ParamArray Preserve Private Property ' +
+						'Protected Public RaiseEvent ReadOnly ReDim REM RemoveHandler Resume ' +
+						'Return Select Set Shadows Shared Short Single Static Step Stop String ' +
+						'Structure Sub SyncLock Then Throw To True Try TypeOf Unicode Until ' +
+						'Variant When While With WithEvents WriteOnly Xor';
+
+		this.regexList = [
+			{ regex: /'.*$/gm,										css: 'comments' },			// one line comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,	css: 'string' },			// strings
+			{ regex: /^\s*#.*$/gm,									css: 'preprocessor' },		// preprocessor tags like #region and #endregion
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),	css: 'keyword' }			// vb keyword
+			];
+
+		this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['vb', 'vbnet'];
+
+	SyntaxHighlighter.brushes.Vb = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
+;(function()
+{
+	// CommonJS
+	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
+
+	function Brush()
+	{
+		function process(match, regexInfo)
+		{
+			var constructor = SyntaxHighlighter.Match,
+				code = match[0],
+				tag = new XRegExp('(&lt;|<)[\\s\\/\\?]*(?<name>[:\\w-\\.]+)', 'xg').exec(code),
+				result = []
+				;
+		
+			if (match.attributes != null) 
+			{
+				var attributes,
+					regex = new XRegExp('(?<name> [\\w:\\-\\.]+)' +
+										'\\s*=\\s*' +
+										'(?<value> ".*?"|\'.*?\'|\\w+)',
+										'xg');
+
+				while ((attributes = regex.exec(code)) != null) 
+				{
+					result.push(new constructor(attributes.name, match.index + attributes.index, 'color1'));
+					result.push(new constructor(attributes.value, match.index + attributes.index + attributes[0].indexOf(attributes.value), 'string'));
+				}
+			}
+
+			if (tag != null)
+				result.push(
+					new constructor(tag.name, match.index + tag[0].indexOf(tag.name), 'keyword')
+				);
+
+			return result;
+		}
+	
+		this.regexList = [
+			{ regex: new XRegExp('(\\&lt;|<)\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\](\\&gt;|>)', 'gm'),			css: 'color2' },	// <![ ... [ ... ]]>
+			{ regex: SyntaxHighlighter.regexLib.xmlComments,												css: 'comments' },	// <!-- ... -->
+			{ regex: new XRegExp('(&lt;|<)[\\s\\/\\?]*(\\w+)(?<attributes>.*?)[\\s\\/\\?]*(&gt;|>)', 'sg'), func: process }
+		];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['xml', 'xhtml', 'xslt', 'html'];
+
+	SyntaxHighlighter.brushes.Xml = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
diff --git a/public/js/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css b/public/js/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css
new file mode 100644
index 0000000..e156a6f
--- /dev/null
+++ b/public/js/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css
@@ -0,0 +1 @@
+.syntaxhighlighter a,.syntaxhighlighter div,.syntaxhighlighter code,.syntaxhighlighter,.syntaxhighlighter td,.syntaxhighlighter tr,.syntaxhighlighter tbody,.syntaxhighlighter thead,.syntaxhighlighter caption,.syntaxhighlighter textarea{-moz-border-radius:0 0 0 0!important;-webkit-border-radius:0 0 0 0!important;background:none!important;border:0!important;bottom:auto!important;float:none!important;left:auto!important;line-height:1.1em!important;margin:0!important;outline:0!important;overflow:visible!important;padding:0!important;position:static!important;right:auto!important;text-align:left!important;top:auto!important;vertical-align:baseline!important;width:auto!important;box-sizing:content-box!important;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-weight:normal!important;font-style:normal!important;min-height:inherit!important;min-height:auto!important;font-size:13px!important}.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;border-radius:4px!important;border-collapse:separate!important}.syntaxhighlighter.source{overflow:hidden!important}.syntaxhighlighter .bold{font-weight:bold!important}.syntaxhighlighter .italic{font-style:italic!important}.syntaxhighlighter .gutter div{white-space:pre!important;word-wrap:normal}.syntaxhighlighter caption{text-align:left!important;padding:.5em 0 .5em 1em!important}.syntaxhighlighter td.code{width:100%!important}.syntaxhighlighter td.code .container{position:relative!important}.syntaxhighlighter td.code .container textarea{box-sizing:border-box!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;border:none!important;background:white!important;padding-left:1em!important;overflow:hidden!important;white-space:pre!important}.syntaxhighlighter td.gutter .line{text-align:right!important;padding:0 .5em 0 1em!important}.syntaxhighlighter td.code .line{padding:0 1em!important}.syntaxhighlighter.nogutter td.code .container textarea,.syntaxhighlighter.nogutter td.code .line{padding-left:0!important}.syntaxhighlighter.show{display:block!important}.syntaxhighlighter.collapsed table{display:none!important}.syntaxhighlighter.collapsed .toolbar{padding:.1em .8em 0 .8em!important;font-size:1em!important;position:static!important;width:auto!important}.syntaxhighlighter.collapsed .toolbar span{display:inline!important;margin-right:1em!important}.syntaxhighlighter.collapsed .toolbar span a{padding:0!important;display:none!important}.syntaxhighlighter.collapsed .toolbar span a.expandSource{display:inline!important}.syntaxhighlighter .toolbar{position:absolute!important;right:1px!important;top:1px!important;width:11px!important;height:11px!important;font-size:10px!important;z-index:10!important}.syntaxhighlighter .toolbar span.title{display:inline!important}.syntaxhighlighter .toolbar a{display:block!important;text-align:center!important;text-decoration:none!important;padding-top:1px!important}.syntaxhighlighter .toolbar a.expandSource{display:none!important}.syntaxhighlighter.ie{font-size:.9em!important;padding:1px 0 1px 0!important}.syntaxhighlighter.ie .toolbar{line-height:8px!important}.syntaxhighlighter.ie .toolbar a{padding-top:0!important}.syntaxhighlighter.printing .line.alt1 .content,.syntaxhighlighter.printing .line.alt2 .content,.syntaxhighlighter.printing .line.highlighted .number,.syntaxhighlighter.printing .line.highlighted.alt1 .content,.syntaxhighlighter.printing .line.highlighted.alt2 .content{background:none!important}.syntaxhighlighter.printing .line .number{color:#bbb!important}.syntaxhighlighter.printing .line .content{color:black!important}.syntaxhighlighter.printing .toolbar{display:none!important}.syntaxhighlighter.printing a{text-decoration:none!important}.syntaxhighlighter.printing .plain,.syntaxhighlighter.printing .plain a{color:black!important}.syntaxhighlighter.printing .comments,.syntaxhighlighter.printing .comments a{color:#008200!important}.syntaxhighlighter.printing .string,.syntaxhighlighter.printing .string a{color:blue!important}.syntaxhighlighter.printing .keyword{color:#ff7800!important;font-weight:bold!important}.syntaxhighlighter.printing .preprocessor{color:gray!important}.syntaxhighlighter.printing .variable{color:#a70!important}.syntaxhighlighter.printing .value{color:#090!important}.syntaxhighlighter.printing .functions{color:#ff1493!important}.syntaxhighlighter.printing .constants{color:#06c!important}.syntaxhighlighter.printing .script{font-weight:bold!important}.syntaxhighlighter.printing .color1,.syntaxhighlighter.printing .color1 a{color:gray!important}.syntaxhighlighter.printing .color2,.syntaxhighlighter.printing .color2 a{color:#ff1493!important}.syntaxhighlighter.printing .color3,.syntaxhighlighter.printing .color3 a{color:red!important}.syntaxhighlighter.printing .break,.syntaxhighlighter.printing .break a{color:black!important}.syntaxhighlighter{background-color:#f5f5f5!important}.syntaxhighlighter .line.highlighted.number{color:black!important}.syntaxhighlighter caption{color:black!important}.syntaxhighlighter .gutter{color:#afafaf!important;background-color:#f7f7f9!important;border-right:1px solid #e1e1e8!important;padding:9.5px 0 9.5px 9.5px!important;border-top-left-radius:4px!important;border-bottom-left-radius:4px!important;user-select:none!important;-moz-user-select:none!important;-webkit-user-select:none!important}.syntaxhighlighter .gutter .line.highlighted{background-color:#6ce26c!important;color:white!important}.syntaxhighlighter.printing .line .content{border:none!important}.syntaxhighlighter.collapsed{overflow:visible!important}.syntaxhighlighter.collapsed .toolbar{color:blue!important;background:white!important;border:1px solid #6ce26c!important}.syntaxhighlighter.collapsed .toolbar a{color:blue!important}.syntaxhighlighter.collapsed .toolbar a:hover{color:red!important}.syntaxhighlighter .toolbar{color:white!important;background:#6ce26c!important;border:none!important}.syntaxhighlighter .toolbar a{color:white!important}.syntaxhighlighter .toolbar a:hover{color:black!important}.syntaxhighlighter .plain,.syntaxhighlighter .plain a{color:black!important}.syntaxhighlighter .comments,.syntaxhighlighter .comments a{color:#008200!important}.syntaxhighlighter .string,.syntaxhighlighter .string a{color:blue!important}.syntaxhighlighter .keyword{color:#ff7800!important}.syntaxhighlighter .preprocessor{color:gray!important}.syntaxhighlighter .variable{color:#a70!important}.syntaxhighlighter .value{color:#090!important}.syntaxhighlighter .functions{color:#ff1493!important}.syntaxhighlighter .constants{color:#06c!important}.syntaxhighlighter .script{font-weight:bold!important;color:#ff7800!important;background-color:none!important}.syntaxhighlighter .color1,.syntaxhighlighter .color1 a{color:gray!important}.syntaxhighlighter .color2,.syntaxhighlighter .color2 a{color:#ff1493!important}.syntaxhighlighter .color3,.syntaxhighlighter .color3 a{color:red!important}.syntaxhighlighter .keyword{font-weight:bold!important}
\ No newline at end of file
diff --git a/public/js/ueditor/third-party/clipboard/clipboard.js b/public/js/ueditor/third-party/clipboard/clipboard.js
new file mode 100644
index 0000000..3af7181
--- /dev/null
+++ b/public/js/ueditor/third-party/clipboard/clipboard.js
@@ -0,0 +1,753 @@
+/*!
+ * clipboard.js v1.5.15
+ * https://zenorocha.github.io/clipboard.js
+ *
+ * Licensed MIT © Zeno Rocha
+ */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Clipboard = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+    /**
+     * A polyfill for Element.matches()
+     */
+    if (Element && !Element.prototype.matches) {
+        var proto = Element.prototype;
+
+        proto.matches = proto.matchesSelector ||
+            proto.mozMatchesSelector ||
+            proto.msMatchesSelector ||
+            proto.oMatchesSelector ||
+            proto.webkitMatchesSelector;
+    }
+
+    /**
+     * Finds the closest parent that matches a selector.
+     *
+     * @param {Element} element
+     * @param {String} selector
+     * @return {Function}
+     */
+    function closest (element, selector) {
+        while (element && element !== document) {
+            if (element.matches(selector)) return element;
+            element = element.parentNode;
+        }
+    }
+
+    module.exports = closest;
+
+},{}],2:[function(require,module,exports){
+    var closest = require('./closest');
+
+    /**
+     * Delegates event to a selector.
+     *
+     * @param {Element} element
+     * @param {String} selector
+     * @param {String} type
+     * @param {Function} callback
+     * @param {Boolean} useCapture
+     * @return {Object}
+     */
+    function delegate(element, selector, type, callback, useCapture) {
+        var listenerFn = listener.apply(this, arguments);
+
+        element.addEventListener(type, listenerFn, useCapture);
+
+        return {
+            destroy: function() {
+                element.removeEventListener(type, listenerFn, useCapture);
+            }
+        }
+    }
+
+    /**
+     * Finds closest match and invokes callback.
+     *
+     * @param {Element} element
+     * @param {String} selector
+     * @param {String} type
+     * @param {Function} callback
+     * @return {Function}
+     */
+    function listener(element, selector, type, callback) {
+        return function(e) {
+            e.delegateTarget = closest(e.target, selector);
+
+            if (e.delegateTarget) {
+                callback.call(element, e);
+            }
+        }
+    }
+
+    module.exports = delegate;
+
+},{"./closest":1}],3:[function(require,module,exports){
+    /**
+     * Check if argument is a HTML element.
+     *
+     * @param {Object} value
+     * @return {Boolean}
+     */
+    exports.node = function(value) {
+        return value !== undefined
+            && value instanceof HTMLElement
+            && value.nodeType === 1;
+    };
+
+    /**
+     * Check if argument is a list of HTML elements.
+     *
+     * @param {Object} value
+     * @return {Boolean}
+     */
+    exports.nodeList = function(value) {
+        var type = Object.prototype.toString.call(value);
+
+        return value !== undefined
+            && (type === '[object NodeList]' || type === '[object HTMLCollection]')
+            && ('length' in value)
+            && (value.length === 0 || exports.node(value[0]));
+    };
+
+    /**
+     * Check if argument is a string.
+     *
+     * @param {Object} value
+     * @return {Boolean}
+     */
+    exports.string = function(value) {
+        return typeof value === 'string'
+            || value instanceof String;
+    };
+
+    /**
+     * Check if argument is a function.
+     *
+     * @param {Object} value
+     * @return {Boolean}
+     */
+    exports.fn = function(value) {
+        var type = Object.prototype.toString.call(value);
+
+        return type === '[object Function]';
+    };
+
+},{}],4:[function(require,module,exports){
+    var is = require('./is');
+    var delegate = require('delegate');
+
+    /**
+     * Validates all params and calls the right
+     * listener function based on its target type.
+     *
+     * @param {String|HTMLElement|HTMLCollection|NodeList} target
+     * @param {String} type
+     * @param {Function} callback
+     * @return {Object}
+     */
+    function listen(target, type, callback) {
+        if (!target && !type && !callback) {
+            throw new Error('Missing required arguments');
+        }
+
+        if (!is.string(type)) {
+            throw new TypeError('Second argument must be a String');
+        }
+
+        if (!is.fn(callback)) {
+            throw new TypeError('Third argument must be a Function');
+        }
+
+        if (is.node(target)) {
+            return listenNode(target, type, callback);
+        }
+        else if (is.nodeList(target)) {
+            return listenNodeList(target, type, callback);
+        }
+        else if (is.string(target)) {
+            return listenSelector(target, type, callback);
+        }
+        else {
+            throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
+        }
+    }
+
+    /**
+     * Adds an event listener to a HTML element
+     * and returns a remove listener function.
+     *
+     * @param {HTMLElement} node
+     * @param {String} type
+     * @param {Function} callback
+     * @return {Object}
+     */
+    function listenNode(node, type, callback) {
+        node.addEventListener(type, callback);
+
+        return {
+            destroy: function() {
+                node.removeEventListener(type, callback);
+            }
+        }
+    }
+
+    /**
+     * Add an event listener to a list of HTML elements
+     * and returns a remove listener function.
+     *
+     * @param {NodeList|HTMLCollection} nodeList
+     * @param {String} type
+     * @param {Function} callback
+     * @return {Object}
+     */
+    function listenNodeList(nodeList, type, callback) {
+        Array.prototype.forEach.call(nodeList, function(node) {
+            node.addEventListener(type, callback);
+        });
+
+        return {
+            destroy: function() {
+                Array.prototype.forEach.call(nodeList, function(node) {
+                    node.removeEventListener(type, callback);
+                });
+            }
+        }
+    }
+
+    /**
+     * Add an event listener to a selector
+     * and returns a remove listener function.
+     *
+     * @param {String} selector
+     * @param {String} type
+     * @param {Function} callback
+     * @return {Object}
+     */
+    function listenSelector(selector, type, callback) {
+        return delegate(document.body, selector, type, callback);
+    }
+
+    module.exports = listen;
+
+},{"./is":3,"delegate":2}],5:[function(require,module,exports){
+    function select(element) {
+        var selectedText;
+
+        if (element.nodeName === 'SELECT') {
+            element.focus();
+
+            selectedText = element.value;
+        }
+        else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
+            element.focus();
+            element.setSelectionRange(0, element.value.length);
+
+            selectedText = element.value;
+        }
+        else {
+            if (element.hasAttribute('contenteditable')) {
+                element.focus();
+            }
+
+            var selection = window.getSelection();
+            var range = document.createRange();
+
+            range.selectNodeContents(element);
+            selection.removeAllRanges();
+            selection.addRange(range);
+
+            selectedText = selection.toString();
+        }
+
+        return selectedText;
+    }
+
+    module.exports = select;
+
+},{}],6:[function(require,module,exports){
+    function E () {
+        // Keep this empty so it's easier to inherit from
+        // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
+    }
+
+    E.prototype = {
+        on: function (name, callback, ctx) {
+            var e = this.e || (this.e = {});
+
+            (e[name] || (e[name] = [])).push({
+                fn: callback,
+                ctx: ctx
+            });
+
+            return this;
+        },
+
+        once: function (name, callback, ctx) {
+            var self = this;
+            function listener () {
+                self.off(name, listener);
+                callback.apply(ctx, arguments);
+            };
+
+            listener._ = callback
+            return this.on(name, listener, ctx);
+        },
+
+        emit: function (name) {
+            var data = [].slice.call(arguments, 1);
+            var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+            var i = 0;
+            var len = evtArr.length;
+
+            for (i; i < len; i++) {
+                evtArr[i].fn.apply(evtArr[i].ctx, data);
+            }
+
+            return this;
+        },
+
+        off: function (name, callback) {
+            var e = this.e || (this.e = {});
+            var evts = e[name];
+            var liveEvents = [];
+
+            if (evts && callback) {
+                for (var i = 0, len = evts.length; i < len; i++) {
+                    if (evts[i].fn !== callback && evts[i].fn._ !== callback)
+                        liveEvents.push(evts[i]);
+                }
+            }
+
+            // Remove event from queue to prevent memory leak
+            // Suggested by https://github.com/lazd
+            // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
+
+            (liveEvents.length)
+                ? e[name] = liveEvents
+                : delete e[name];
+
+            return this;
+        }
+    };
+
+    module.exports = E;
+
+},{}],7:[function(require,module,exports){
+    (function (global, factory) {
+        if (typeof define === "function" && define.amd) {
+            define(['module', 'select'], factory);
+        } else if (typeof exports !== "undefined") {
+            factory(module, require('select'));
+        } else {
+            var mod = {
+                exports: {}
+            };
+            factory(mod, global.select);
+            global.clipboardAction = mod.exports;
+        }
+    })(this, function (module, _select) {
+        'use strict';
+
+        var _select2 = _interopRequireDefault(_select);
+
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+
+        var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+            return typeof obj;
+        } : function (obj) {
+            return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+        };
+
+        function _classCallCheck(instance, Constructor) {
+            if (!(instance instanceof Constructor)) {
+                throw new TypeError("Cannot call a class as a function");
+            }
+        }
+
+        var _createClass = function () {
+            function defineProperties(target, props) {
+                for (var i = 0; i < props.length; i++) {
+                    var descriptor = props[i];
+                    descriptor.enumerable = descriptor.enumerable || false;
+                    descriptor.configurable = true;
+                    if ("value" in descriptor) descriptor.writable = true;
+                    Object.defineProperty(target, descriptor.key, descriptor);
+                }
+            }
+
+            return function (Constructor, protoProps, staticProps) {
+                if (protoProps) defineProperties(Constructor.prototype, protoProps);
+                if (staticProps) defineProperties(Constructor, staticProps);
+                return Constructor;
+            };
+        }();
+
+        var ClipboardAction = function () {
+            /**
+             * @param {Object} options
+             */
+            function ClipboardAction(options) {
+                _classCallCheck(this, ClipboardAction);
+
+                this.resolveOptions(options);
+                this.initSelection();
+            }
+
+            /**
+             * Defines base properties passed from constructor.
+             * @param {Object} options
+             */
+
+
+            _createClass(ClipboardAction, [{
+                key: 'resolveOptions',
+                value: function resolveOptions() {
+                    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+                    this.action = options.action;
+                    this.emitter = options.emitter;
+                    this.target = options.target;
+                    this.text = options.text;
+                    this.trigger = options.trigger;
+
+                    this.selectedText = '';
+                }
+            }, {
+                key: 'initSelection',
+                value: function initSelection() {
+                    if (this.text) {
+                        this.selectFake();
+                    } else if (this.target) {
+                        this.selectTarget();
+                    }
+                }
+            }, {
+                key: 'selectFake',
+                value: function selectFake() {
+                    var _this = this;
+
+                    var isRTL = document.documentElement.getAttribute('dir') == 'rtl';
+
+                    this.removeFake();
+
+                    this.fakeHandlerCallback = function () {
+                        return _this.removeFake();
+                    };
+                    this.fakeHandler = document.body.addEventListener('click', this.fakeHandlerCallback) || true;
+
+                    this.fakeElem = document.createElement('textarea');
+                    // Prevent zooming on iOS
+                    this.fakeElem.style.fontSize = '12pt';
+                    // Reset box model
+                    this.fakeElem.style.border = '0';
+                    this.fakeElem.style.padding = '0';
+                    this.fakeElem.style.margin = '0';
+                    // Move element out of screen horizontally
+                    this.fakeElem.style.position = 'absolute';
+                    this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
+                    // Move element to the same position vertically
+                    var yPosition = window.pageYOffset || document.documentElement.scrollTop;
+                    this.fakeElem.addEventListener('focus', window.scrollTo(0, yPosition));
+                    this.fakeElem.style.top = yPosition + 'px';
+
+                    this.fakeElem.setAttribute('readonly', '');
+                    this.fakeElem.value = this.text;
+
+                    document.body.appendChild(this.fakeElem);
+
+                    this.selectedText = (0, _select2.default)(this.fakeElem);
+                    this.copyText();
+                }
+            }, {
+                key: 'removeFake',
+                value: function removeFake() {
+                    if (this.fakeHandler) {
+                        document.body.removeEventListener('click', this.fakeHandlerCallback);
+                        this.fakeHandler = null;
+                        this.fakeHandlerCallback = null;
+                    }
+
+                    if (this.fakeElem) {
+                        document.body.removeChild(this.fakeElem);
+                        this.fakeElem = null;
+                    }
+                }
+            }, {
+                key: 'selectTarget',
+                value: function selectTarget() {
+                    this.selectedText = (0, _select2.default)(this.target);
+                    this.copyText();
+                }
+            }, {
+                key: 'copyText',
+                value: function copyText() {
+                    var succeeded = void 0;
+
+                    try {
+                        succeeded = document.execCommand(this.action);
+                    } catch (err) {
+                        succeeded = false;
+                    }
+
+                    this.handleResult(succeeded);
+                }
+            }, {
+                key: 'handleResult',
+                value: function handleResult(succeeded) {
+                    this.emitter.emit(succeeded ? 'success' : 'error', {
+                        action: this.action,
+                        text: this.selectedText,
+                        trigger: this.trigger,
+                        clearSelection: this.clearSelection.bind(this)
+                    });
+                }
+            }, {
+                key: 'clearSelection',
+                value: function clearSelection() {
+                    if (this.target) {
+                        this.target.blur();
+                    }
+
+                    window.getSelection().removeAllRanges();
+                }
+            }, {
+                key: 'destroy',
+                value: function destroy() {
+                    this.removeFake();
+                }
+            }, {
+                key: 'action',
+                set: function set() {
+                    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'copy';
+
+                    this._action = action;
+
+                    if (this._action !== 'copy' && this._action !== 'cut') {
+                        throw new Error('Invalid "action" value, use either "copy" or "cut"');
+                    }
+                },
+                get: function get() {
+                    return this._action;
+                }
+            }, {
+                key: 'target',
+                set: function set(target) {
+                    if (target !== undefined) {
+                        if (target && (typeof target === 'undefined' ? 'undefined' : _typeof(target)) === 'object' && target.nodeType === 1) {
+                            if (this.action === 'copy' && target.hasAttribute('disabled')) {
+                                throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
+                            }
+
+                            if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
+                                throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
+                            }
+
+                            this._target = target;
+                        } else {
+                            throw new Error('Invalid "target" value, use a valid Element');
+                        }
+                    }
+                },
+                get: function get() {
+                    return this._target;
+                }
+            }]);
+
+            return ClipboardAction;
+        }();
+
+        module.exports = ClipboardAction;
+    });
+
+},{"select":5}],8:[function(require,module,exports){
+    (function (global, factory) {
+        if (typeof define === "function" && define.amd) {
+            define(['module', './clipboard-action', 'tiny-emitter', 'good-listener'], factory);
+        } else if (typeof exports !== "undefined") {
+            factory(module, require('./clipboard-action'), require('tiny-emitter'), require('good-listener'));
+        } else {
+            var mod = {
+                exports: {}
+            };
+            factory(mod, global.clipboardAction, global.tinyEmitter, global.goodListener);
+            global.clipboard = mod.exports;
+        }
+    })(this, function (module, _clipboardAction, _tinyEmitter, _goodListener) {
+        'use strict';
+
+        var _clipboardAction2 = _interopRequireDefault(_clipboardAction);
+
+        var _tinyEmitter2 = _interopRequireDefault(_tinyEmitter);
+
+        var _goodListener2 = _interopRequireDefault(_goodListener);
+
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+
+        function _classCallCheck(instance, Constructor) {
+            if (!(instance instanceof Constructor)) {
+                throw new TypeError("Cannot call a class as a function");
+            }
+        }
+
+        var _createClass = function () {
+            function defineProperties(target, props) {
+                for (var i = 0; i < props.length; i++) {
+                    var descriptor = props[i];
+                    descriptor.enumerable = descriptor.enumerable || false;
+                    descriptor.configurable = true;
+                    if ("value" in descriptor) descriptor.writable = true;
+                    Object.defineProperty(target, descriptor.key, descriptor);
+                }
+            }
+
+            return function (Constructor, protoProps, staticProps) {
+                if (protoProps) defineProperties(Constructor.prototype, protoProps);
+                if (staticProps) defineProperties(Constructor, staticProps);
+                return Constructor;
+            };
+        }();
+
+        function _possibleConstructorReturn(self, call) {
+            if (!self) {
+                throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+            }
+
+            return call && (typeof call === "object" || typeof call === "function") ? call : self;
+        }
+
+        function _inherits(subClass, superClass) {
+            if (typeof superClass !== "function" && superClass !== null) {
+                throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+            }
+
+            subClass.prototype = Object.create(superClass && superClass.prototype, {
+                constructor: {
+                    value: subClass,
+                    enumerable: false,
+                    writable: true,
+                    configurable: true
+                }
+            });
+            if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+        }
+
+        var Clipboard = function (_Emitter) {
+            _inherits(Clipboard, _Emitter);
+
+            /**
+             * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
+             * @param {Object} options
+             */
+            function Clipboard(trigger, options) {
+                _classCallCheck(this, Clipboard);
+
+                var _this = _possibleConstructorReturn(this, (Clipboard.__proto__ || Object.getPrototypeOf(Clipboard)).call(this));
+
+                _this.resolveOptions(options);
+                _this.listenClick(trigger);
+                return _this;
+            }
+
+            /**
+             * Defines if attributes would be resolved using internal setter functions
+             * or custom functions that were passed in the constructor.
+             * @param {Object} options
+             */
+
+
+            _createClass(Clipboard, [{
+                key: 'resolveOptions',
+                value: function resolveOptions() {
+                    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+                    this.action = typeof options.action === 'function' ? options.action : this.defaultAction;
+                    this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;
+                    this.text = typeof options.text === 'function' ? options.text : this.defaultText;
+                }
+            }, {
+                key: 'listenClick',
+                value: function listenClick(trigger) {
+                    var _this2 = this;
+
+                    this.listener = (0, _goodListener2.default)(trigger, 'click', function (e) {
+                        return _this2.onClick(e);
+                    });
+                }
+            }, {
+                key: 'onClick',
+                value: function onClick(e) {
+                    var trigger = e.delegateTarget || e.currentTarget;
+
+                    if (this.clipboardAction) {
+                        this.clipboardAction = null;
+                    }
+
+                    this.clipboardAction = new _clipboardAction2.default({
+                        action: this.action(trigger),
+                        target: this.target(trigger),
+                        text: this.text(trigger),
+                        trigger: trigger,
+                        emitter: this
+                    });
+                }
+            }, {
+                key: 'defaultAction',
+                value: function defaultAction(trigger) {
+                    return getAttributeValue('action', trigger);
+                }
+            }, {
+                key: 'defaultTarget',
+                value: function defaultTarget(trigger) {
+                    var selector = getAttributeValue('target', trigger);
+
+                    if (selector) {
+                        return document.querySelector(selector);
+                    }
+                }
+            }, {
+                key: 'defaultText',
+                value: function defaultText(trigger) {
+                    return getAttributeValue('text', trigger);
+                }
+            }, {
+                key: 'destroy',
+                value: function destroy() {
+                    this.listener.destroy();
+
+                    if (this.clipboardAction) {
+                        this.clipboardAction.destroy();
+                        this.clipboardAction = null;
+                    }
+                }
+            }]);
+
+            return Clipboard;
+        }(_tinyEmitter2.default);
+
+        /**
+         * Helper function to retrieve attribute value.
+         * @param {String} suffix
+         * @param {Element} element
+         */
+        function getAttributeValue(suffix, element) {
+            var attribute = 'data-clipboard-' + suffix;
+
+            if (!element.hasAttribute(attribute)) {
+                return;
+            }
+
+            return element.getAttribute(attribute);
+        }
+
+        module.exports = Clipboard;
+    });
+
+},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)
+});
\ No newline at end of file
diff --git a/public/js/ueditor/third-party/codemirror/codemirror.css b/public/js/ueditor/third-party/codemirror/codemirror.css
new file mode 100644
index 0000000..53a6595
--- /dev/null
+++ b/public/js/ueditor/third-party/codemirror/codemirror.css
@@ -0,0 +1,104 @@
+.CodeMirror {
+    line-height: 1.5;
+    font-family: monospace;
+}
+
+.CodeMirror-scroll {
+    overflow: auto;
+    height: 300px;
+    /* This is needed to prevent an IE[67] bug where the scrolled content
+       is visible outside of the scrolling box. */
+    position: relative;
+}
+
+.CodeMirror-gutter {
+    position: absolute; left: 0; top: 0;
+    z-index: 10;
+    background-color: #f7f7f7;
+    border-right: 1px solid #eee;
+    min-width: 2em;
+    height: 100%;
+}
+.CodeMirror-gutter-text {
+    color: #aaa;
+    text-align: right;
+    padding: .4em .2em .4em .4em;
+    white-space: pre !important;
+}
+.CodeMirror-lines {
+    padding: .4em;
+}
+
+.CodeMirror pre {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    -o-border-radius: 0;
+    border-radius: 0;
+    border-width: 0; margin: 0; padding: 0; background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0; margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+}
+
+.CodeMirror-wrap pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+.CodeMirror-wrap .CodeMirror-scroll {
+    overflow-x: hidden;
+}
+
+.CodeMirror textarea {
+    outline: none !important;
+}
+
+.CodeMirror pre.CodeMirror-cursor {
+    z-index: 10;
+    position: absolute;
+    visibility: hidden;
+    border-left: 1px solid black;
+}
+.CodeMirror-focused pre.CodeMirror-cursor {
+    visibility: visible;
+}
+
+span.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused span.CodeMirror-selected { background: #d2dcf8; }
+
+.CodeMirror-searching {background: #ffa;}
+
+/* Default theme */
+
+.cm-s-default span.cm-keyword {color: #708;}
+.cm-s-default span.cm-atom {color: #219;}
+.cm-s-default span.cm-number {color: #164;}
+.cm-s-default span.cm-def {color: #00f;}
+.cm-s-default span.cm-variable {color: black;}
+.cm-s-default span.cm-variable-2 {color: #05a;}
+.cm-s-default span.cm-variable-3 {color: #085;}
+.cm-s-default span.cm-property {color: black;}
+.cm-s-default span.cm-operator {color: black;}
+.cm-s-default span.cm-comment {color: #a50;}
+.cm-s-default span.cm-string {color: #a11;}
+.cm-s-default span.cm-string-2 {color: #f50;}
+.cm-s-default span.cm-meta {color: #555;}
+.cm-s-default span.cm-error {color: #f00;}
+.cm-s-default span.cm-qualifier {color: #555;}
+.cm-s-default span.cm-builtin {color: #30a;}
+.cm-s-default span.cm-bracket {color: #cc7;}
+.cm-s-default span.cm-tag {color: #170;}
+.cm-s-default span.cm-attribute {color: #00c;}
+.cm-s-default span.cm-header {color: #a0a;}
+.cm-s-default span.cm-quote {color: #090;}
+.cm-s-default span.cm-hr {color: #999;}
+.cm-s-default span.cm-link {color: #00c;}
+
+span.cm-header, span.cm-strong {font-weight: bold;}
+span.cm-em {font-style: italic;}
+span.cm-emstrong {font-style: italic; font-weight: bold;}
+span.cm-link {text-decoration: underline;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
diff --git a/public/js/ueditor/third-party/codemirror/codemirror.js b/public/js/ueditor/third-party/codemirror/codemirror.js
new file mode 100644
index 0000000..966c320
--- /dev/null
+++ b/public/js/ueditor/third-party/codemirror/codemirror.js
@@ -0,0 +1,3581 @@
+// CodeMirror version 2.2
+//
+// All functions that need access to the editor's state live inside
+// the CodeMirror function. Below that, at the bottom of the file,
+// some utilities are defined.
+
+// CodeMirror is the only global var we claim
+var CodeMirror = (function() {
+    // This is the function that produces an editor instance. It's
+    // closure is used to store the editor state.
+    function CodeMirror(place, givenOptions) {
+        // Determine effective options based on given values and defaults.
+        var options = {}, defaults = CodeMirror.defaults;
+        for (var opt in defaults)
+            if (defaults.hasOwnProperty(opt))
+                options[opt] = (givenOptions && givenOptions.hasOwnProperty(opt) ? givenOptions : defaults)[opt];
+
+        var targetDocument = options["document"];
+        // The element in which the editor lives.
+        var wrapper = targetDocument.createElement("div");
+        wrapper.className = "CodeMirror" + (options.lineWrapping ? " CodeMirror-wrap" : "");
+        // This mess creates the base DOM structure for the editor.
+        wrapper.innerHTML =
+            '<div style="overflow: hidden; position: relative; width: 3px; height: 0px;">' + // Wraps and hides input textarea
+                '<textarea style="position: absolute; padding: 0; width: 1px;" wrap="off" ' +
+                'autocorrect="off" autocapitalize="off"></textarea></div>' +
+                '<div class="CodeMirror-scroll" tabindex="-1">' +
+                '<div style="position: relative">' + // Set to the height of the text, causes scrolling
+                '<div style="position: relative">' + // Moved around its parent to cover visible view
+                '<div class="CodeMirror-gutter"><div class="CodeMirror-gutter-text"></div></div>' +
+                // Provides positioning relative to (visible) text origin
+                '<div class="CodeMirror-lines"><div style="position: relative">' +
+                '<div style="position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden"></div>' +
+                '<pre class="CodeMirror-cursor">&#160;</pre>' + // Absolutely positioned blinky cursor
+                '<div></div>' + // This DIV contains the actual code
+                '</div></div></div></div></div>';
+        if (place.appendChild) place.appendChild(wrapper); else place(wrapper);
+        // I've never seen more elegant code in my life.
+        var inputDiv = wrapper.firstChild, input = inputDiv.firstChild,
+            scroller = wrapper.lastChild, code = scroller.firstChild,
+            mover = code.firstChild, gutter = mover.firstChild, gutterText = gutter.firstChild,
+            lineSpace = gutter.nextSibling.firstChild, measure = lineSpace.firstChild,
+            cursor = measure.nextSibling, lineDiv = cursor.nextSibling;
+        themeChanged();
+        // Needed to hide big blue blinking cursor on Mobile Safari
+        if (/AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent)) input.style.width = "0px";
+        if (!webkit) lineSpace.draggable = true;
+        if (options.tabindex != null) input.tabIndex = options.tabindex;
+        if (!options.gutter && !options.lineNumbers) gutter.style.display = "none";
+
+        // Check for problem with IE innerHTML not working when we have a
+        // P (or similar) parent node.
+        try { stringWidth("x"); }
+        catch (e) {
+            if (e.message.match(/runtime/i))
+                e = new Error("A CodeMirror inside a P-style element does not work in Internet Explorer. (innerHTML bug)");
+            throw e;
+        }
+
+        // Delayed object wrap timeouts, making sure only one is active. blinker holds an interval.
+        var poll = new Delayed(), highlight = new Delayed(), blinker;
+
+        // mode holds a mode API object. doc is the tree of Line objects,
+        // work an array of lines that should be parsed, and history the
+        // undo history (instance of History constructor).
+        var mode, doc = new BranchChunk([new LeafChunk([new Line("")])]), work, focused;
+        loadMode();
+        // The selection. These are always maintained to point at valid
+        // positions. Inverted is used to remember that the user is
+        // selecting bottom-to-top.
+        var sel = {from: {line: 0, ch: 0}, to: {line: 0, ch: 0}, inverted: false};
+        // Selection-related flags. shiftSelecting obviously tracks
+        // whether the user is holding shift.
+        var shiftSelecting, lastClick, lastDoubleClick, draggingText, overwrite = false;
+        // Variables used by startOperation/endOperation to track what
+        // happened during the operation.
+        var updateInput, userSelChange, changes, textChanged, selectionChanged, leaveInputAlone,
+            gutterDirty, callbacks;
+        // Current visible range (may be bigger than the view window).
+        var displayOffset = 0, showingFrom = 0, showingTo = 0, lastSizeC = 0;
+        // bracketHighlighted is used to remember that a backet has been
+        // marked.
+        var bracketHighlighted;
+        // Tracks the maximum line length so that the horizontal scrollbar
+        // can be kept static when scrolling.
+        var maxLine = "", maxWidth, tabText = computeTabText();
+
+        // Initialize the content.
+        operation(function(){setValue(options.value || ""); updateInput = false;})();
+        var history = new History();
+
+        // Register our event handlers.
+        connect(scroller, "mousedown", operation(onMouseDown));
+        connect(scroller, "dblclick", operation(onDoubleClick));
+        connect(lineSpace, "dragstart", onDragStart);
+        connect(lineSpace, "selectstart", e_preventDefault);
+        // Gecko browsers fire contextmenu *after* opening the menu, at
+        // which point we can't mess with it anymore. Context menu is
+        // handled in onMouseDown for Gecko.
+        if (!gecko) connect(scroller, "contextmenu", onContextMenu);
+        connect(scroller, "scroll", function() {
+            updateDisplay([]);
+            if (options.fixedGutter) gutter.style.left = scroller.scrollLeft + "px";
+            if (options.onScroll) options.onScroll(instance);
+        });
+        connect(window, "resize", function() {updateDisplay(true);});
+        connect(input, "keyup", operation(onKeyUp));
+        connect(input, "input", fastPoll);
+        connect(input, "keydown", operation(onKeyDown));
+        connect(input, "keypress", operation(onKeyPress));
+        connect(input, "focus", onFocus);
+        connect(input, "blur", onBlur);
+
+        connect(scroller, "dragenter", e_stop);
+        connect(scroller, "dragover", e_stop);
+        connect(scroller, "drop", operation(onDrop));
+        connect(scroller, "paste", function(){focusInput(); fastPoll();});
+        connect(input, "paste", fastPoll);
+        connect(input, "cut", operation(function(){replaceSelection("");}));
+
+        // IE throws unspecified error in certain cases, when
+        // trying to access activeElement before onload
+        var hasFocus; try { hasFocus = (targetDocument.activeElement == input); } catch(e) { }
+        if (hasFocus) setTimeout(onFocus, 20);
+        else onBlur();
+
+        function isLine(l) {return l >= 0 && l < doc.size;}
+        // The instance object that we'll return. Mostly calls out to
+        // local functions in the CodeMirror function. Some do some extra
+        // range checking and/or clipping. operation is used to wrap the
+        // call so that changes it makes are tracked, and the display is
+        // updated afterwards.
+        var instance = wrapper.CodeMirror = {
+            getValue: getValue,
+            setValue: operation(setValue),
+            getSelection: getSelection,
+            replaceSelection: operation(replaceSelection),
+            focus: function(){focusInput(); onFocus(); fastPoll();},
+            setOption: function(option, value) {
+                var oldVal = options[option];
+                options[option] = value;
+                if (option == "mode" || option == "indentUnit") loadMode();
+                else if (option == "readOnly" && value) {onBlur(); input.blur();}
+                else if (option == "theme") themeChanged();
+                else if (option == "lineWrapping" && oldVal != value) operation(wrappingChanged)();
+                else if (option == "tabSize") operation(tabsChanged)();
+                if (option == "lineNumbers" || option == "gutter" || option == "firstLineNumber" || option == "theme")
+                    operation(gutterChanged)();
+            },
+            getOption: function(option) {return options[option];},
+            undo: operation(undo),
+            redo: operation(redo),
+            indentLine: operation(function(n, dir) {
+                if (isLine(n)) indentLine(n, dir == null ? "smart" : dir ? "add" : "subtract");
+            }),
+            indentSelection: operation(indentSelected),
+            historySize: function() {return {undo: history.done.length, redo: history.undone.length};},
+            clearHistory: function() {history = new History();},
+            matchBrackets: operation(function(){matchBrackets(true);}),
+            getTokenAt: operation(function(pos) {
+                pos = clipPos(pos);
+                return getLine(pos.line).getTokenAt(mode, getStateBefore(pos.line), pos.ch);
+            }),
+            getStateAfter: function(line) {
+                line = clipLine(line == null ? doc.size - 1: line);
+                return getStateBefore(line + 1);
+            },
+            cursorCoords: function(start){
+                if (start == null) start = sel.inverted;
+                return pageCoords(start ? sel.from : sel.to);
+            },
+            charCoords: function(pos){return pageCoords(clipPos(pos));},
+            coordsChar: function(coords) {
+                var off = eltOffset(lineSpace);
+                return coordsChar(coords.x - off.left, coords.y - off.top);
+            },
+            markText: operation(markText),
+            setBookmark: setBookmark,
+            setMarker: operation(addGutterMarker),
+            clearMarker: operation(removeGutterMarker),
+            setLineClass: operation(setLineClass),
+            hideLine: operation(function(h) {return setLineHidden(h, true);}),
+            showLine: operation(function(h) {return setLineHidden(h, false);}),
+            onDeleteLine: function(line, f) {
+                if (typeof line == "number") {
+                    if (!isLine(line)) return null;
+                    line = getLine(line);
+                }
+                (line.handlers || (line.handlers = [])).push(f);
+                return line;
+            },
+            lineInfo: lineInfo,
+            addWidget: function(pos, node, scroll, vert, horiz) {
+                pos = localCoords(clipPos(pos));
+                var top = pos.yBot, left = pos.x;
+                node.style.position = "absolute";
+                code.appendChild(node);
+                if (vert == "over") top = pos.y;
+                else if (vert == "near") {
+                    var vspace = Math.max(scroller.offsetHeight, doc.height * textHeight()),
+                        hspace = Math.max(code.clientWidth, lineSpace.clientWidth) - paddingLeft();
+                    if (pos.yBot + node.offsetHeight > vspace && pos.y > node.offsetHeight)
+                        top = pos.y - node.offsetHeight;
+                    if (left + node.offsetWidth > hspace)
+                        left = hspace - node.offsetWidth;
+                }
+                node.style.top = (top + paddingTop()) + "px";
+                node.style.left = node.style.right = "";
+                if (horiz == "right") {
+                    left = code.clientWidth - node.offsetWidth;
+                    node.style.right = "0px";
+                } else {
+                    if (horiz == "left") left = 0;
+                    else if (horiz == "middle") left = (code.clientWidth - node.offsetWidth) / 2;
+                    node.style.left = (left + paddingLeft()) + "px";
+                }
+                if (scroll)
+                    scrollIntoView(left, top, left + node.offsetWidth, top + node.offsetHeight);
+            },
+
+            lineCount: function() {return doc.size;},
+            clipPos: clipPos,
+            getCursor: function(start) {
+                if (start == null) start = sel.inverted;
+                return copyPos(start ? sel.from : sel.to);
+            },
+            somethingSelected: function() {return !posEq(sel.from, sel.to);},
+            setCursor: operation(function(line, ch, user) {
+                if (ch == null && typeof line.line == "number") setCursor(line.line, line.ch, user);
+                else setCursor(line, ch, user);
+            }),
+            setSelection: operation(function(from, to, user) {
+                (user ? setSelectionUser : setSelection)(clipPos(from), clipPos(to || from));
+            }),
+            getLine: function(line) {if (isLine(line)) return getLine(line).text;},
+            getLineHandle: function(line) {if (isLine(line)) return getLine(line);},
+            setLine: operation(function(line, text) {
+                if (isLine(line)) replaceRange(text, {line: line, ch: 0}, {line: line, ch: getLine(line).text.length});
+            }),
+            removeLine: operation(function(line) {
+                if (isLine(line)) replaceRange("", {line: line, ch: 0}, clipPos({line: line+1, ch: 0}));
+            }),
+            replaceRange: operation(replaceRange),
+            getRange: function(from, to) {return getRange(clipPos(from), clipPos(to));},
+
+            execCommand: function(cmd) {return commands[cmd](instance);},
+            // Stuff used by commands, probably not much use to outside code.
+            moveH: operation(moveH),
+            deleteH: operation(deleteH),
+            moveV: operation(moveV),
+            toggleOverwrite: function() {overwrite = !overwrite;},
+
+            posFromIndex: function(off) {
+                var lineNo = 0, ch;
+                doc.iter(0, doc.size, function(line) {
+                    var sz = line.text.length + 1;
+                    if (sz > off) { ch = off; return true; }
+                    off -= sz;
+                    ++lineNo;
+                });
+                return clipPos({line: lineNo, ch: ch});
+            },
+            indexFromPos: function (coords) {
+                if (coords.line < 0 || coords.ch < 0) return 0;
+                var index = coords.ch;
+                doc.iter(0, coords.line, function (line) {
+                    index += line.text.length + 1;
+                });
+                return index;
+            },
+
+            operation: function(f){return operation(f)();},
+            refresh: function(){updateDisplay(true);},
+            getInputField: function(){return input;},
+            getWrapperElement: function(){return wrapper;},
+            getScrollerElement: function(){return scroller;},
+            getGutterElement: function(){return gutter;}
+        };
+
+        function getLine(n) { return getLineAt(doc, n); }
+        function updateLineHeight(line, height) {
+            gutterDirty = true;
+            var diff = height - line.height;
+            for (var n = line; n; n = n.parent) n.height += diff;
+        }
+
+        function setValue(code) {
+            var top = {line: 0, ch: 0};
+            updateLines(top, {line: doc.size - 1, ch: getLine(doc.size-1).text.length},
+                splitLines(code), top, top);
+            updateInput = true;
+        }
+        function getValue(code) {
+            var text = [];
+            doc.iter(0, doc.size, function(line) { text.push(line.text); });
+            return text.join("\n");
+        }
+
+        function onMouseDown(e) {
+            setShift(e.shiftKey);
+            // Check whether this is a click in a widget
+            for (var n = e_target(e); n != wrapper; n = n.parentNode)
+                if (n.parentNode == code && n != mover) return;
+
+            // See if this is a click in the gutter
+            for (var n = e_target(e); n != wrapper; n = n.parentNode)
+                if (n.parentNode == gutterText) {
+                    if (options.onGutterClick)
+                        options.onGutterClick(instance, indexOf(gutterText.childNodes, n) + showingFrom, e);
+                    return e_preventDefault(e);
+                }
+
+            var start = posFromMouse(e);
+
+            switch (e_button(e)) {
+                case 3:
+                    if (gecko && !mac) onContextMenu(e);
+                    return;
+                case 2:
+                    if (start) setCursor(start.line, start.ch, true);
+                    return;
+            }
+            // For button 1, if it was clicked inside the editor
+            // (posFromMouse returning non-null), we have to adjust the
+            // selection.
+            if (!start) {if (e_target(e) == scroller) e_preventDefault(e); return;}
+
+            if (!focused) onFocus();
+
+            var now = +new Date;
+            if (lastDoubleClick && lastDoubleClick.time > now - 400 && posEq(lastDoubleClick.pos, start)) {
+                e_preventDefault(e);
+                setTimeout(focusInput, 20);
+                return selectLine(start.line);
+            } else if (lastClick && lastClick.time > now - 400 && posEq(lastClick.pos, start)) {
+                lastDoubleClick = {time: now, pos: start};
+                e_preventDefault(e);
+                return selectWordAt(start);
+            } else { lastClick = {time: now, pos: start}; }
+
+            var last = start, going;
+            if (dragAndDrop && !posEq(sel.from, sel.to) &&
+                !posLess(start, sel.from) && !posLess(sel.to, start)) {
+                // Let the drag handler handle this.
+                if (webkit) lineSpace.draggable = true;
+                var up = connect(targetDocument, "mouseup", operation(function(e2) {
+                    if (webkit) lineSpace.draggable = false;
+                    draggingText = false;
+                    up();
+                    if (Math.abs(e.clientX - e2.clientX) + Math.abs(e.clientY - e2.clientY) < 10) {
+                        e_preventDefault(e2);
+                        setCursor(start.line, start.ch, true);
+                        focusInput();
+                    }
+                }), true);
+                draggingText = true;
+                return;
+            }
+            e_preventDefault(e);
+            setCursor(start.line, start.ch, true);
+
+            function extend(e) {
+                var cur = posFromMouse(e, true);
+                if (cur && !posEq(cur, last)) {
+                    if (!focused) onFocus();
+                    last = cur;
+                    setSelectionUser(start, cur);
+                    updateInput = false;
+                    var visible = visibleLines();
+                    if (cur.line >= visible.to || cur.line < visible.from)
+                        going = setTimeout(operation(function(){extend(e);}), 150);
+                }
+            }
+
+            var move = connect(targetDocument, "mousemove", operation(function(e) {
+                clearTimeout(going);
+                e_preventDefault(e);
+                extend(e);
+            }), true);
+            var up = connect(targetDocument, "mouseup", operation(function(e) {
+                clearTimeout(going);
+                var cur = posFromMouse(e);
+                if (cur) setSelectionUser(start, cur);
+                e_preventDefault(e);
+                focusInput();
+                updateInput = true;
+                move(); up();
+            }), true);
+        }
+        function onDoubleClick(e) {
+            for (var n = e_target(e); n != wrapper; n = n.parentNode)
+                if (n.parentNode == gutterText) return e_preventDefault(e);
+            var start = posFromMouse(e);
+            if (!start) return;
+            lastDoubleClick = {time: +new Date, pos: start};
+            e_preventDefault(e);
+            selectWordAt(start);
+        }
+        function onDrop(e) {
+            e.preventDefault();
+            var pos = posFromMouse(e, true), files = e.dataTransfer.files;
+            if (!pos || options.readOnly) return;
+            if (files && files.length && window.FileReader && window.File) {
+                function loadFile(file, i) {
+                    var reader = new FileReader;
+                    reader.onload = function() {
+                        text[i] = reader.result;
+                        if (++read == n) {
+                            pos = clipPos(pos);
+                            operation(function() {
+                                var end = replaceRange(text.join(""), pos, pos);
+                                setSelectionUser(pos, end);
+                            })();
+                        }
+                    };
+                    reader.readAsText(file);
+                }
+                var n = files.length, text = Array(n), read = 0;
+                for (var i = 0; i < n; ++i) loadFile(files[i], i);
+            }
+            else {
+                try {
+                    var text = e.dataTransfer.getData("Text");
+                    if (text) {
+                        var end = replaceRange(text, pos, pos);
+                        var curFrom = sel.from, curTo = sel.to;
+                        setSelectionUser(pos, end);
+                        if (draggingText) replaceRange("", curFrom, curTo);
+                        focusInput();
+                    }
+                }
+                catch(e){}
+            }
+        }
+        function onDragStart(e) {
+            var txt = getSelection();
+            // This will reset escapeElement
+            htmlEscape(txt);
+            e.dataTransfer.setDragImage(escapeElement, 0, 0);
+            e.dataTransfer.setData("Text", txt);
+        }
+        function handleKeyBinding(e) {
+            var name = keyNames[e.keyCode], next = keyMap[options.keyMap].auto, bound, dropShift;
+            if (name == null || e.altGraphKey) {
+                if (next) options.keyMap = next;
+                return null;
+            }
+            if (e.altKey) name = "Alt-" + name;
+            if (e.ctrlKey) name = "Ctrl-" + name;
+            if (e.metaKey) name = "Cmd-" + name;
+            if (e.shiftKey && (bound = lookupKey("Shift-" + name, options.extraKeys, options.keyMap))) {
+                dropShift = true;
+            } else {
+                bound = lookupKey(name, options.extraKeys, options.keyMap);
+            }
+            if (typeof bound == "string") {
+                if (commands.propertyIsEnumerable(bound)) bound = commands[bound];
+                else bound = null;
+            }
+            if (next && (bound || !isModifierKey(e))) options.keyMap = next;
+            if (!bound) return false;
+            if (dropShift) {
+                var prevShift = shiftSelecting;
+                shiftSelecting = null;
+                bound(instance);
+                shiftSelecting = prevShift;
+            } else bound(instance);
+            e_preventDefault(e);
+            return true;
+        }
+        var lastStoppedKey = null;
+        function onKeyDown(e) {
+            if (!focused) onFocus();
+            var code = e.keyCode;
+            // IE does strange things with escape.
+            if (ie && code == 27) { e.returnValue = false; }
+            setShift(code == 16 || e.shiftKey);
+            // First give onKeyEvent option a chance to handle this.
+            if (options.onKeyEvent && options.onKeyEvent(instance, addStop(e))) return;
+            var handled = handleKeyBinding(e);
+            if (window.opera) {
+                lastStoppedKey = handled ? e.keyCode : null;
+                // Opera has no cut event... we try to at least catch the key combo
+                if (!handled && (mac ? e.metaKey : e.ctrlKey) && e.keyCode == 88)
+                    replaceSelection("");
+            }
+        }
+        function onKeyPress(e) {
+            if (window.opera && e.keyCode == lastStoppedKey) {lastStoppedKey = null; e_preventDefault(e); return;}
+            if (options.onKeyEvent && options.onKeyEvent(instance, addStop(e))) return;
+            if (window.opera && !e.which && handleKeyBinding(e)) return;
+            if (options.electricChars && mode.electricChars) {
+                var ch = String.fromCharCode(e.charCode == null ? e.keyCode : e.charCode);
+                if (mode.electricChars.indexOf(ch) > -1)
+                    setTimeout(operation(function() {indentLine(sel.to.line, "smart");}), 75);
+            }
+            fastPoll();
+        }
+        function onKeyUp(e) {
+            if (options.onKeyEvent && options.onKeyEvent(instance, addStop(e))) return;
+            if (e.keyCode == 16) shiftSelecting = null;
+        }
+
+        function onFocus() {
+            if (options.readOnly) return;
+            if (!focused) {
+                if (options.onFocus) options.onFocus(instance);
+                focused = true;
+                if (wrapper.className.search(/\bCodeMirror-focused\b/) == -1)
+                    wrapper.className += " CodeMirror-focused";
+                if (!leaveInputAlone) resetInput(true);
+            }
+            slowPoll();
+            restartBlink();
+        }
+        function onBlur() {
+            if (focused) {
+                if (options.onBlur) options.onBlur(instance);
+                focused = false;
+                wrapper.className = wrapper.className.replace(" CodeMirror-focused", "");
+            }
+            clearInterval(blinker);
+            setTimeout(function() {if (!focused) shiftSelecting = null;}, 150);
+        }
+
+        // Replace the range from from to to by the strings in newText.
+        // Afterwards, set the selection to selFrom, selTo.
+        function updateLines(from, to, newText, selFrom, selTo) {
+            if (history) {
+                var old = [];
+                doc.iter(from.line, to.line + 1, function(line) { old.push(line.text); });
+                history.addChange(from.line, newText.length, old);
+                while (history.done.length > options.undoDepth) history.done.shift();
+            }
+            updateLinesNoUndo(from, to, newText, selFrom, selTo);
+        }
+        function unredoHelper(from, to) {
+            var change = from.pop();
+            if (change) {
+                var replaced = [], end = change.start + change.added;
+                doc.iter(change.start, end, function(line) { replaced.push(line.text); });
+                to.push({start: change.start, added: change.old.length, old: replaced});
+                var pos = clipPos({line: change.start + change.old.length - 1,
+                    ch: editEnd(replaced[replaced.length-1], change.old[change.old.length-1])});
+                updateLinesNoUndo({line: change.start, ch: 0}, {line: end - 1, ch: getLine(end-1).text.length}, change.old, pos, pos);
+                updateInput = true;
+            }
+        }
+        function undo() {unredoHelper(history.done, history.undone);}
+        function redo() {unredoHelper(history.undone, history.done);}
+
+        function updateLinesNoUndo(from, to, newText, selFrom, selTo) {
+            var recomputeMaxLength = false, maxLineLength = maxLine.length;
+            if (!options.lineWrapping)
+                doc.iter(from.line, to.line, function(line) {
+                    if (line.text.length == maxLineLength) {recomputeMaxLength = true; return true;}
+                });
+            if (from.line != to.line || newText.length > 1) gutterDirty = true;
+
+            var nlines = to.line - from.line, firstLine = getLine(from.line), lastLine = getLine(to.line);
+            // First adjust the line structure, taking some care to leave highlighting intact.
+            if (from.ch == 0 && to.ch == 0 && newText[newText.length - 1] == "") {
+                // This is a whole-line replace. Treated specially to make
+                // sure line objects move the way they are supposed to.
+                var added = [], prevLine = null;
+                if (from.line) {
+                    prevLine = getLine(from.line - 1);
+                    prevLine.fixMarkEnds(lastLine);
+                } else lastLine.fixMarkStarts();
+                for (var i = 0, e = newText.length - 1; i < e; ++i)
+                    added.push(Line.inheritMarks(newText[i], prevLine));
+                if (nlines) doc.remove(from.line, nlines, callbacks);
+                if (added.length) doc.insert(from.line, added);
+            } else if (firstLine == lastLine) {
+                if (newText.length == 1)
+                    firstLine.replace(from.ch, to.ch, newText[0]);
+                else {
+                    lastLine = firstLine.split(to.ch, newText[newText.length-1]);
+                    firstLine.replace(from.ch, null, newText[0]);
+                    firstLine.fixMarkEnds(lastLine);
+                    var added = [];
+                    for (var i = 1, e = newText.length - 1; i < e; ++i)
+                        added.push(Line.inheritMarks(newText[i], firstLine));
+                    added.push(lastLine);
+                    doc.insert(from.line + 1, added);
+                }
+            } else if (newText.length == 1) {
+                firstLine.replace(from.ch, null, newText[0]);
+                lastLine.replace(null, to.ch, "");
+                firstLine.append(lastLine);
+                doc.remove(from.line + 1, nlines, callbacks);
+            } else {
+                var added = [];
+                firstLine.replace(from.ch, null, newText[0]);
+                lastLine.replace(null, to.ch, newText[newText.length-1]);
+                firstLine.fixMarkEnds(lastLine);
+                for (var i = 1, e = newText.length - 1; i < e; ++i)
+                    added.push(Line.inheritMarks(newText[i], firstLine));
+                if (nlines > 1) doc.remove(from.line + 1, nlines - 1, callbacks);
+                doc.insert(from.line + 1, added);
+            }
+            if (options.lineWrapping) {
+                var perLine = scroller.clientWidth / charWidth() - 3;
+                doc.iter(from.line, from.line + newText.length, function(line) {
+                    if (line.hidden) return;
+                    var guess = Math.ceil(line.text.length / perLine) || 1;
+                    if (guess != line.height) updateLineHeight(line, guess);
+                });
+            } else {
+                doc.iter(from.line, i + newText.length, function(line) {
+                    var l = line.text;
+                    if (l.length > maxLineLength) {
+                        maxLine = l; maxLineLength = l.length; maxWidth = null;
+                        recomputeMaxLength = false;
+                    }
+                });
+                if (recomputeMaxLength) {
+                    maxLineLength = 0; maxLine = ""; maxWidth = null;
+                    doc.iter(0, doc.size, function(line) {
+                        var l = line.text;
+                        if (l.length > maxLineLength) {
+                            maxLineLength = l.length; maxLine = l;
+                        }
+                    });
+                }
+            }
+
+            // Add these lines to the work array, so that they will be
+            // highlighted. Adjust work lines if lines were added/removed.
+            var newWork = [], lendiff = newText.length - nlines - 1;
+            for (var i = 0, l = work.length; i < l; ++i) {
+                var task = work[i];
+                if (task < from.line) newWork.push(task);
+                else if (task > to.line) newWork.push(task + lendiff);
+            }
+            var hlEnd = from.line + Math.min(newText.length, 500);
+            highlightLines(from.line, hlEnd);
+            newWork.push(hlEnd);
+            work = newWork;
+            startWorker(100);
+            // Remember that these lines changed, for updating the display
+            changes.push({from: from.line, to: to.line + 1, diff: lendiff});
+            var changeObj = {from: from, to: to, text: newText};
+            if (textChanged) {
+                for (var cur = textChanged; cur.next; cur = cur.next) {}
+                cur.next = changeObj;
+            } else textChanged = changeObj;
+
+            // Update the selection
+            function updateLine(n) {return n <= Math.min(to.line, to.line + lendiff) ? n : n + lendiff;}
+            setSelection(selFrom, selTo, updateLine(sel.from.line), updateLine(sel.to.line));
+
+            // Make sure the scroll-size div has the correct height.
+            code.style.height = (doc.height * textHeight() + 2 * paddingTop()) + "px";
+        }
+
+        function replaceRange(code, from, to) {
+            from = clipPos(from);
+            if (!to) to = from; else to = clipPos(to);
+            code = splitLines(code);
+            function adjustPos(pos) {
+                if (posLess(pos, from)) return pos;
+                if (!posLess(to, pos)) return end;
+                var line = pos.line + code.length - (to.line - from.line) - 1;
+                var ch = pos.ch;
+                if (pos.line == to.line)
+                    ch += code[code.length-1].length - (to.ch - (to.line == from.line ? from.ch : 0));
+                return {line: line, ch: ch};
+            }
+            var end;
+            replaceRange1(code, from, to, function(end1) {
+                end = end1;
+                return {from: adjustPos(sel.from), to: adjustPos(sel.to)};
+            });
+            return end;
+        }
+        function replaceSelection(code, collapse) {
+            replaceRange1(splitLines(code), sel.from, sel.to, function(end) {
+                if (collapse == "end") return {from: end, to: end};
+                else if (collapse == "start") return {from: sel.from, to: sel.from};
+                else return {from: sel.from, to: end};
+            });
+        }
+        function replaceRange1(code, from, to, computeSel) {
+            var endch = code.length == 1 ? code[0].length + from.ch : code[code.length-1].length;
+            var newSel = computeSel({line: from.line + code.length - 1, ch: endch});
+            updateLines(from, to, code, newSel.from, newSel.to);
+        }
+
+        function getRange(from, to) {
+            var l1 = from.line, l2 = to.line;
+            if (l1 == l2) return getLine(l1).text.slice(from.ch, to.ch);
+            var code = [getLine(l1).text.slice(from.ch)];
+            doc.iter(l1 + 1, l2, function(line) { code.push(line.text); });
+            code.push(getLine(l2).text.slice(0, to.ch));
+            return code.join("\n");
+        }
+        function getSelection() {
+            return getRange(sel.from, sel.to);
+        }
+
+        var pollingFast = false; // Ensures slowPoll doesn't cancel fastPoll
+        function slowPoll() {
+            if (pollingFast) return;
+            poll.set(options.pollInterval, function() {
+                startOperation();
+                readInput();
+                if (focused) slowPoll();
+                endOperation();
+            });
+        }
+        function fastPoll() {
+            var missed = false;
+            pollingFast = true;
+            function p() {
+                startOperation();
+                var changed = readInput();
+                if (!changed && !missed) {missed = true; poll.set(60, p);}
+                else {pollingFast = false; slowPoll();}
+                endOperation();
+            }
+            poll.set(20, p);
+        }
+
+        // Previnput is a hack to work with IME. If we reset the textarea
+        // on every change, that breaks IME. So we look for changes
+        // compared to the previous content instead. (Modern browsers have
+        // events that indicate IME taking place, but these are not widely
+        // supported or compatible enough yet to rely on.)
+        var prevInput = "";
+        function readInput() {
+            if (leaveInputAlone || !focused || hasSelection(input)) return false;
+            var text = input.value;
+            if (text == prevInput) return false;
+            shiftSelecting = null;
+            var same = 0, l = Math.min(prevInput.length, text.length);
+            while (same < l && prevInput[same] == text[same]) ++same;
+            if (same < prevInput.length)
+                sel.from = {line: sel.from.line, ch: sel.from.ch - (prevInput.length - same)};
+            else if (overwrite && posEq(sel.from, sel.to))
+                sel.to = {line: sel.to.line, ch: Math.min(getLine(sel.to.line).text.length, sel.to.ch + (text.length - same))};
+            replaceSelection(text.slice(same), "end");
+            prevInput = text;
+            return true;
+        }
+        function resetInput(user) {
+            if (!posEq(sel.from, sel.to)) {
+                prevInput = "";
+                input.value = getSelection();
+                input.select();
+            } else if (user) prevInput = input.value = "";
+        }
+
+        function focusInput() {
+            if (!options.readOnly) input.focus();
+        }
+
+        function scrollEditorIntoView() {
+            if (!cursor.getBoundingClientRect) return;
+            var rect = cursor.getBoundingClientRect();
+            // IE returns bogus coordinates when the instance sits inside of an iframe and the cursor is hidden
+            if (ie && rect.top == rect.bottom) return;
+            var winH = window.innerHeight || Math.max(document.body.offsetHeight, document.documentElement.offsetHeight);
+            if (rect.top < 0 || rect.bottom > winH) cursor.scrollIntoView();
+        }
+        function scrollCursorIntoView() {
+            var cursor = localCoords(sel.inverted ? sel.from : sel.to);
+            var x = options.lineWrapping ? Math.min(cursor.x, lineSpace.offsetWidth) : cursor.x;
+            return scrollIntoView(x, cursor.y, x, cursor.yBot);
+        }
+        function scrollIntoView(x1, y1, x2, y2) {
+            var pl = paddingLeft(), pt = paddingTop(), lh = textHeight();
+            y1 += pt; y2 += pt; x1 += pl; x2 += pl;
+            var screen = scroller.clientHeight, screentop = scroller.scrollTop, scrolled = false, result = true;
+            if (y1 < screentop) {scroller.scrollTop = Math.max(0, y1 - 2*lh); scrolled = true;}
+            else if (y2 > screentop + screen) {scroller.scrollTop = y2 + lh - screen; scrolled = true;}
+
+            var screenw = scroller.clientWidth, screenleft = scroller.scrollLeft;
+            var gutterw = options.fixedGutter ? gutter.clientWidth : 0;
+            if (x1 < screenleft + gutterw) {
+                if (x1 < 50) x1 = 0;
+                scroller.scrollLeft = Math.max(0, x1 - 10 - gutterw);
+                scrolled = true;
+            }
+            else if (x2 > screenw + screenleft - 3) {
+                scroller.scrollLeft = x2 + 10 - screenw;
+                scrolled = true;
+                if (x2 > code.clientWidth) result = false;
+            }
+            if (scrolled && options.onScroll) options.onScroll(instance);
+            return result;
+        }
+
+        function visibleLines() {
+            var lh = textHeight(), top = scroller.scrollTop - paddingTop();
+            var from_height = Math.max(0, Math.floor(top / lh));
+            var to_height = Math.ceil((top + scroller.clientHeight) / lh);
+            return {from: lineAtHeight(doc, from_height),
+                to: lineAtHeight(doc, to_height)};
+        }
+        // Uses a set of changes plus the current scroll position to
+        // determine which DOM updates have to be made, and makes the
+        // updates.
+        function updateDisplay(changes, suppressCallback) {
+            if (!scroller.clientWidth) {
+                showingFrom = showingTo = displayOffset = 0;
+                return;
+            }
+            // Compute the new visible window
+            var visible = visibleLines();
+            // Bail out if the visible area is already rendered and nothing changed.
+            if (changes !== true && changes.length == 0 && visible.from >= showingFrom && visible.to <= showingTo) return;
+            var from = Math.max(visible.from - 100, 0), to = Math.min(doc.size, visible.to + 100);
+            if (showingFrom < from && from - showingFrom < 20) from = showingFrom;
+            if (showingTo > to && showingTo - to < 20) to = Math.min(doc.size, showingTo);
+
+            // Create a range of theoretically intact lines, and punch holes
+            // in that using the change info.
+            var intact = changes === true ? [] :
+                computeIntact([{from: showingFrom, to: showingTo, domStart: 0}], changes);
+            // Clip off the parts that won't be visible
+            var intactLines = 0;
+            for (var i = 0; i < intact.length; ++i) {
+                var range = intact[i];
+                if (range.from < from) {range.domStart += (from - range.from); range.from = from;}
+                if (range.to > to) range.to = to;
+                if (range.from >= range.to) intact.splice(i--, 1);
+                else intactLines += range.to - range.from;
+            }
+            if (intactLines == to - from) return;
+            intact.sort(function(a, b) {return a.domStart - b.domStart;});
+
+            var th = textHeight(), gutterDisplay = gutter.style.display;
+            lineDiv.style.display = gutter.style.display = "none";
+            patchDisplay(from, to, intact);
+            lineDiv.style.display = "";
+
+            // Position the mover div to align with the lines it's supposed
+            // to be showing (which will cover the visible display)
+            var different = from != showingFrom || to != showingTo || lastSizeC != scroller.clientHeight + th;
+            // This is just a bogus formula that detects when the editor is
+            // resized or the font size changes.
+            if (different) lastSizeC = scroller.clientHeight + th;
+            showingFrom = from; showingTo = to;
+            displayOffset = heightAtLine(doc, from);
+            mover.style.top = (displayOffset * th) + "px";
+            code.style.height = (doc.height * th + 2 * paddingTop()) + "px";
+
+            // Since this is all rather error prone, it is honoured with the
+            // only assertion in the whole file.
+            if (lineDiv.childNodes.length != showingTo - showingFrom)
+                throw new Error("BAD PATCH! " + JSON.stringify(intact) + " size=" + (showingTo - showingFrom) +
+                    " nodes=" + lineDiv.childNodes.length);
+
+            if (options.lineWrapping) {
+                maxWidth = scroller.clientWidth;
+                var curNode = lineDiv.firstChild;
+                doc.iter(showingFrom, showingTo, function(line) {
+                    if (!line.hidden) {
+                        var height = Math.round(curNode.offsetHeight / th) || 1;
+                        if (line.height != height) {updateLineHeight(line, height); gutterDirty = true;}
+                    }
+                    curNode = curNode.nextSibling;
+                });
+            } else {
+                if (maxWidth == null) maxWidth = stringWidth(maxLine);
+                if (maxWidth > scroller.clientWidth) {
+                    lineSpace.style.width = maxWidth + "px";
+                    // Needed to prevent odd wrapping/hiding of widgets placed in here.
+                    code.style.width = "";
+                    code.style.width = scroller.scrollWidth + "px";
+                } else {
+                    lineSpace.style.width = code.style.width = "";
+                }
+            }
+            gutter.style.display = gutterDisplay;
+            if (different || gutterDirty) updateGutter();
+            updateCursor();
+            if (!suppressCallback && options.onUpdate) options.onUpdate(instance);
+            return true;
+        }
+
+        function computeIntact(intact, changes) {
+            for (var i = 0, l = changes.length || 0; i < l; ++i) {
+                var change = changes[i], intact2 = [], diff = change.diff || 0;
+                for (var j = 0, l2 = intact.length; j < l2; ++j) {
+                    var range = intact[j];
+                    if (change.to <= range.from && change.diff)
+                        intact2.push({from: range.from + diff, to: range.to + diff,
+                            domStart: range.domStart});
+                    else if (change.to <= range.from || change.from >= range.to)
+                        intact2.push(range);
+                    else {
+                        if (change.from > range.from)
+                            intact2.push({from: range.from, to: change.from, domStart: range.domStart});
+                        if (change.to < range.to)
+                            intact2.push({from: change.to + diff, to: range.to + diff,
+                                domStart: range.domStart + (change.to - range.from)});
+                    }
+                }
+                intact = intact2;
+            }
+            return intact;
+        }
+
+        function patchDisplay(from, to, intact) {
+            // The first pass removes the DOM nodes that aren't intact.
+            if (!intact.length) lineDiv.innerHTML = "";
+            else {
+                function killNode(node) {
+                    var tmp = node.nextSibling;
+                    node.parentNode.removeChild(node);
+                    return tmp;
+                }
+                var domPos = 0, curNode = lineDiv.firstChild, n;
+                for (var i = 0; i < intact.length; ++i) {
+                    var cur = intact[i];
+                    while (cur.domStart > domPos) {curNode = killNode(curNode); domPos++;}
+                    for (var j = 0, e = cur.to - cur.from; j < e; ++j) {curNode = curNode.nextSibling; domPos++;}
+                }
+                while (curNode) curNode = killNode(curNode);
+            }
+            // This pass fills in the lines that actually changed.
+            var nextIntact = intact.shift(), curNode = lineDiv.firstChild, j = from;
+            var sfrom = sel.from.line, sto = sel.to.line, inSel = sfrom < from && sto >= from;
+            var scratch = targetDocument.createElement("div"), newElt;
+            doc.iter(from, to, function(line) {
+                var ch1 = null, ch2 = null;
+                if (inSel) {
+                    ch1 = 0;
+                    if (sto == j) {inSel = false; ch2 = sel.to.ch;}
+                } else if (sfrom == j) {
+                    if (sto == j) {ch1 = sel.from.ch; ch2 = sel.to.ch;}
+                    else {inSel = true; ch1 = sel.from.ch;}
+                }
+                if (nextIntact && nextIntact.to == j) nextIntact = intact.shift();
+                if (!nextIntact || nextIntact.from > j) {
+                    if (line.hidden) scratch.innerHTML = "<pre></pre>";
+                    else scratch.innerHTML = line.getHTML(ch1, ch2, true, tabText);
+                    lineDiv.insertBefore(scratch.firstChild, curNode);
+                } else {
+                    curNode = curNode.nextSibling;
+                }
+                ++j;
+            });
+        }
+
+        function updateGutter() {
+            if (!options.gutter && !options.lineNumbers) return;
+            var hText = mover.offsetHeight, hEditor = scroller.clientHeight;
+            gutter.style.height = (hText - hEditor < 2 ? hEditor : hText) + "px";
+            var html = [], i = showingFrom;
+            doc.iter(showingFrom, Math.max(showingTo, showingFrom + 1), function(line) {
+                if (line.hidden) {
+                    html.push("<pre></pre>");
+                } else {
+                    var marker = line.gutterMarker;
+                    var text = options.lineNumbers ? i + options.firstLineNumber : null;
+                    if (marker && marker.text)
+                        text = marker.text.replace("%N%", text != null ? text : "");
+                    else if (text == null)
+                        text = "\u00a0";
+                    html.push((marker && marker.style ? '<pre class="' + marker.style + '">' : "<pre>"), text);
+                    for (var j = 1; j < line.height; ++j) html.push("<br/>&#160;");
+                    html.push("</pre>");
+                }
+                ++i;
+            });
+            gutter.style.display = "none";
+            gutterText.innerHTML = html.join("");
+            var minwidth = String(doc.size).length, firstNode = gutterText.firstChild, val = eltText(firstNode), pad = "";
+            while (val.length + pad.length < minwidth) pad += "\u00a0";
+            if (pad) firstNode.insertBefore(targetDocument.createTextNode(pad), firstNode.firstChild);
+            gutter.style.display = "";
+            lineSpace.style.marginLeft = gutter.offsetWidth + "px";
+            gutterDirty = false;
+        }
+        function updateCursor() {
+            var head = sel.inverted ? sel.from : sel.to, lh = textHeight();
+            var pos = localCoords(head, true);
+            var wrapOff = eltOffset(wrapper), lineOff = eltOffset(lineDiv);
+            inputDiv.style.top = (pos.y + lineOff.top - wrapOff.top) + "px";
+            inputDiv.style.left = (pos.x + lineOff.left - wrapOff.left) + "px";
+            if (posEq(sel.from, sel.to)) {
+                cursor.style.top = pos.y + "px";
+                cursor.style.left = (options.lineWrapping ? Math.min(pos.x, lineSpace.offsetWidth) : pos.x) + "px";
+                cursor.style.display = "";
+            }
+            else cursor.style.display = "none";
+        }
+
+        function setShift(val) {
+            if (val) shiftSelecting = shiftSelecting || (sel.inverted ? sel.to : sel.from);
+            else shiftSelecting = null;
+        }
+        function setSelectionUser(from, to) {
+            var sh = shiftSelecting && clipPos(shiftSelecting);
+            if (sh) {
+                if (posLess(sh, from)) from = sh;
+                else if (posLess(to, sh)) to = sh;
+            }
+            setSelection(from, to);
+            userSelChange = true;
+        }
+        // Update the selection. Last two args are only used by
+        // updateLines, since they have to be expressed in the line
+        // numbers before the update.
+        function setSelection(from, to, oldFrom, oldTo) {
+            goalColumn = null;
+            if (oldFrom == null) {oldFrom = sel.from.line; oldTo = sel.to.line;}
+            if (posEq(sel.from, from) && posEq(sel.to, to)) return;
+            if (posLess(to, from)) {var tmp = to; to = from; from = tmp;}
+
+            // Skip over hidden lines.
+            if (from.line != oldFrom) from = skipHidden(from, oldFrom, sel.from.ch);
+            if (to.line != oldTo) to = skipHidden(to, oldTo, sel.to.ch);
+
+            if (posEq(from, to)) sel.inverted = false;
+            else if (posEq(from, sel.to)) sel.inverted = false;
+            else if (posEq(to, sel.from)) sel.inverted = true;
+
+            // Some ugly logic used to only mark the lines that actually did
+            // see a change in selection as changed, rather than the whole
+            // selected range.
+            if (posEq(from, to)) {
+                if (!posEq(sel.from, sel.to))
+                    changes.push({from: oldFrom, to: oldTo + 1});
+            }
+            else if (posEq(sel.from, sel.to)) {
+                changes.push({from: from.line, to: to.line + 1});
+            }
+            else {
+                if (!posEq(from, sel.from)) {
+                    if (from.line < oldFrom)
+                        changes.push({from: from.line, to: Math.min(to.line, oldFrom) + 1});
+                    else
+                        changes.push({from: oldFrom, to: Math.min(oldTo, from.line) + 1});
+                }
+                if (!posEq(to, sel.to)) {
+                    if (to.line < oldTo)
+                        changes.push({from: Math.max(oldFrom, from.line), to: oldTo + 1});
+                    else
+                        changes.push({from: Math.max(from.line, oldTo), to: to.line + 1});
+                }
+            }
+            sel.from = from; sel.to = to;
+            selectionChanged = true;
+        }
+        function skipHidden(pos, oldLine, oldCh) {
+            function getNonHidden(dir) {
+                var lNo = pos.line + dir, end = dir == 1 ? doc.size : -1;
+                while (lNo != end) {
+                    var line = getLine(lNo);
+                    if (!line.hidden) {
+                        var ch = pos.ch;
+                        if (ch > oldCh || ch > line.text.length) ch = line.text.length;
+                        return {line: lNo, ch: ch};
+                    }
+                    lNo += dir;
+                }
+            }
+            var line = getLine(pos.line);
+            if (!line.hidden) return pos;
+            if (pos.line >= oldLine) return getNonHidden(1) || getNonHidden(-1);
+            else return getNonHidden(-1) || getNonHidden(1);
+        }
+        function setCursor(line, ch, user) {
+            var pos = clipPos({line: line, ch: ch || 0});
+            (user ? setSelectionUser : setSelection)(pos, pos);
+        }
+
+        function clipLine(n) {return Math.max(0, Math.min(n, doc.size-1));}
+        function clipPos(pos) {
+            if (pos.line < 0) return {line: 0, ch: 0};
+            if (pos.line >= doc.size) return {line: doc.size-1, ch: getLine(doc.size-1).text.length};
+            var ch = pos.ch, linelen = getLine(pos.line).text.length;
+            if (ch == null || ch > linelen) return {line: pos.line, ch: linelen};
+            else if (ch < 0) return {line: pos.line, ch: 0};
+            else return pos;
+        }
+
+        function findPosH(dir, unit) {
+            var end = sel.inverted ? sel.from : sel.to, line = end.line, ch = end.ch;
+            var lineObj = getLine(line);
+            function findNextLine() {
+                for (var l = line + dir, e = dir < 0 ? -1 : doc.size; l != e; l += dir) {
+                    var lo = getLine(l);
+                    if (!lo.hidden) { line = l; lineObj = lo; return true; }
+                }
+            }
+            function moveOnce(boundToLine) {
+                if (ch == (dir < 0 ? 0 : lineObj.text.length)) {
+                    if (!boundToLine && findNextLine()) ch = dir < 0 ? lineObj.text.length : 0;
+                    else return false;
+                } else ch += dir;
+                return true;
+            }
+            if (unit == "char") moveOnce();
+            else if (unit == "column") moveOnce(true);
+            else if (unit == "word") {
+                var sawWord = false;
+                for (;;) {
+                    if (dir < 0) if (!moveOnce()) break;
+                    if (isWordChar(lineObj.text.charAt(ch))) sawWord = true;
+                    else if (sawWord) {if (dir < 0) {dir = 1; moveOnce();} break;}
+                    if (dir > 0) if (!moveOnce()) break;
+                }
+            }
+            return {line: line, ch: ch};
+        }
+        function moveH(dir, unit) {
+            var pos = dir < 0 ? sel.from : sel.to;
+            if (shiftSelecting || posEq(sel.from, sel.to)) pos = findPosH(dir, unit);
+            setCursor(pos.line, pos.ch, true);
+        }
+        function deleteH(dir, unit) {
+            if (!posEq(sel.from, sel.to)) replaceRange("", sel.from, sel.to);
+            else if (dir < 0) replaceRange("", findPosH(dir, unit), sel.to);
+            else replaceRange("", sel.from, findPosH(dir, unit));
+            userSelChange = true;
+        }
+        var goalColumn = null;
+        function moveV(dir, unit) {
+            var dist = 0, pos = localCoords(sel.inverted ? sel.from : sel.to, true);
+            if (goalColumn != null) pos.x = goalColumn;
+            if (unit == "page") dist = scroller.clientHeight;
+            else if (unit == "line") dist = textHeight();
+            var target = coordsChar(pos.x, pos.y + dist * dir + 2);
+            setCursor(target.line, target.ch, true);
+            goalColumn = pos.x;
+        }
+
+        function selectWordAt(pos) {
+            var line = getLine(pos.line).text;
+            var start = pos.ch, end = pos.ch;
+            while (start > 0 && isWordChar(line.charAt(start - 1))) --start;
+            while (end < line.length && isWordChar(line.charAt(end))) ++end;
+            setSelectionUser({line: pos.line, ch: start}, {line: pos.line, ch: end});
+        }
+        function selectLine(line) {
+            setSelectionUser({line: line, ch: 0}, {line: line, ch: getLine(line).text.length});
+        }
+        function indentSelected(mode) {
+            if (posEq(sel.from, sel.to)) return indentLine(sel.from.line, mode);
+            var e = sel.to.line - (sel.to.ch ? 0 : 1);
+            for (var i = sel.from.line; i <= e; ++i) indentLine(i, mode);
+        }
+
+        function indentLine(n, how) {
+            if (!how) how = "add";
+            if (how == "smart") {
+                if (!mode.indent) how = "prev";
+                else var state = getStateBefore(n);
+            }
+
+            var line = getLine(n), curSpace = line.indentation(options.tabSize),
+                curSpaceString = line.text.match(/^\s*/)[0], indentation;
+            if (how == "prev") {
+                if (n) indentation = getLine(n-1).indentation(options.tabSize);
+                else indentation = 0;
+            }
+            else if (how == "smart") indentation = mode.indent(state, line.text.slice(curSpaceString.length), line.text);
+            else if (how == "add") indentation = curSpace + options.indentUnit;
+            else if (how == "subtract") indentation = curSpace - options.indentUnit;
+            indentation = Math.max(0, indentation);
+            var diff = indentation - curSpace;
+
+            if (!diff) {
+                if (sel.from.line != n && sel.to.line != n) return;
+                var indentString = curSpaceString;
+            }
+            else {
+                var indentString = "", pos = 0;
+                if (options.indentWithTabs)
+                    for (var i = Math.floor(indentation / options.tabSize); i; --i) {pos += options.tabSize; indentString += "\t";}
+                while (pos < indentation) {++pos; indentString += " ";}
+            }
+
+            replaceRange(indentString, {line: n, ch: 0}, {line: n, ch: curSpaceString.length});
+        }
+
+        function loadMode() {
+            mode = CodeMirror.getMode(options, options.mode);
+            doc.iter(0, doc.size, function(line) { line.stateAfter = null; });
+            work = [0];
+            startWorker();
+        }
+        function gutterChanged() {
+            var visible = options.gutter || options.lineNumbers;
+            gutter.style.display = visible ? "" : "none";
+            if (visible) gutterDirty = true;
+            else lineDiv.parentNode.style.marginLeft = 0;
+        }
+        function wrappingChanged(from, to) {
+            if (options.lineWrapping) {
+                wrapper.className += " CodeMirror-wrap";
+                var perLine = scroller.clientWidth / charWidth() - 3;
+                doc.iter(0, doc.size, function(line) {
+                    if (line.hidden) return;
+                    var guess = Math.ceil(line.text.length / perLine) || 1;
+                    if (guess != 1) updateLineHeight(line, guess);
+                });
+                lineSpace.style.width = code.style.width = "";
+            } else {
+                wrapper.className = wrapper.className.replace(" CodeMirror-wrap", "");
+                maxWidth = null; maxLine = "";
+                doc.iter(0, doc.size, function(line) {
+                    if (line.height != 1 && !line.hidden) updateLineHeight(line, 1);
+                    if (line.text.length > maxLine.length) maxLine = line.text;
+                });
+            }
+            changes.push({from: 0, to: doc.size});
+        }
+        function computeTabText() {
+            for (var str = '<span class="cm-tab">', i = 0; i < options.tabSize; ++i) str += " ";
+            return str + "</span>";
+        }
+        function tabsChanged() {
+            tabText = computeTabText();
+            updateDisplay(true);
+        }
+        function themeChanged() {
+            scroller.className = scroller.className.replace(/\s*cm-s-\w+/g, "") +
+                options.theme.replace(/(^|\s)\s*/g, " cm-s-");
+        }
+
+        function TextMarker() { this.set = []; }
+        TextMarker.prototype.clear = operation(function() {
+            var min = Infinity, max = -Infinity;
+            for (var i = 0, e = this.set.length; i < e; ++i) {
+                var line = this.set[i], mk = line.marked;
+                if (!mk || !line.parent) continue;
+                var lineN = lineNo(line);
+                min = Math.min(min, lineN); max = Math.max(max, lineN);
+                for (var j = 0; j < mk.length; ++j)
+                    if (mk[j].set == this.set) mk.splice(j--, 1);
+            }
+            if (min != Infinity)
+                changes.push({from: min, to: max + 1});
+        });
+        TextMarker.prototype.find = function() {
+            var from, to;
+            for (var i = 0, e = this.set.length; i < e; ++i) {
+                var line = this.set[i], mk = line.marked;
+                for (var j = 0; j < mk.length; ++j) {
+                    var mark = mk[j];
+                    if (mark.set == this.set) {
+                        if (mark.from != null || mark.to != null) {
+                            var found = lineNo(line);
+                            if (found != null) {
+                                if (mark.from != null) from = {line: found, ch: mark.from};
+                                if (mark.to != null) to = {line: found, ch: mark.to};
+                            }
+                        }
+                    }
+                }
+            }
+            return {from: from, to: to};
+        };
+
+        function markText(from, to, className) {
+            from = clipPos(from); to = clipPos(to);
+            var tm = new TextMarker();
+            function add(line, from, to, className) {
+                getLine(line).addMark(new MarkedText(from, to, className, tm.set));
+            }
+            if (from.line == to.line) add(from.line, from.ch, to.ch, className);
+            else {
+                add(from.line, from.ch, null, className);
+                for (var i = from.line + 1, e = to.line; i < e; ++i)
+                    add(i, null, null, className);
+                add(to.line, null, to.ch, className);
+            }
+            changes.push({from: from.line, to: to.line + 1});
+            return tm;
+        }
+
+        function setBookmark(pos) {
+            pos = clipPos(pos);
+            var bm = new Bookmark(pos.ch);
+            getLine(pos.line).addMark(bm);
+            return bm;
+        }
+
+        function addGutterMarker(line, text, className) {
+            if (typeof line == "number") line = getLine(clipLine(line));
+            line.gutterMarker = {text: text, style: className};
+            gutterDirty = true;
+            return line;
+        }
+        function removeGutterMarker(line) {
+            if (typeof line == "number") line = getLine(clipLine(line));
+            line.gutterMarker = null;
+            gutterDirty = true;
+        }
+
+        function changeLine(handle, op) {
+            var no = handle, line = handle;
+            if (typeof handle == "number") line = getLine(clipLine(handle));
+            else no = lineNo(handle);
+            if (no == null) return null;
+            if (op(line, no)) changes.push({from: no, to: no + 1});
+            else return null;
+            return line;
+        }
+        function setLineClass(handle, className) {
+            return changeLine(handle, function(line) {
+                if (line.className != className) {
+                    line.className = className;
+                    return true;
+                }
+            });
+        }
+        function setLineHidden(handle, hidden) {
+            return changeLine(handle, function(line, no) {
+                if (line.hidden != hidden) {
+                    line.hidden = hidden;
+                    updateLineHeight(line, hidden ? 0 : 1);
+                    if (hidden && (sel.from.line == no || sel.to.line == no))
+                        setSelection(skipHidden(sel.from, sel.from.line, sel.from.ch),
+                            skipHidden(sel.to, sel.to.line, sel.to.ch));
+                    return (gutterDirty = true);
+                }
+            });
+        }
+
+        function lineInfo(line) {
+            if (typeof line == "number") {
+                if (!isLine(line)) return null;
+                var n = line;
+                line = getLine(line);
+                if (!line) return null;
+            }
+            else {
+                var n = lineNo(line);
+                if (n == null) return null;
+            }
+            var marker = line.gutterMarker;
+            return {line: n, handle: line, text: line.text, markerText: marker && marker.text,
+                markerClass: marker && marker.style, lineClass: line.className};
+        }
+
+        function stringWidth(str) {
+            measure.innerHTML = "<pre><span>x</span></pre>";
+            measure.firstChild.firstChild.firstChild.nodeValue = str;
+            return measure.firstChild.firstChild.offsetWidth || 10;
+        }
+        // These are used to go from pixel positions to character
+        // positions, taking varying character widths into account.
+        function charFromX(line, x) {
+            if (x <= 0) return 0;
+            var lineObj = getLine(line), text = lineObj.text;
+            function getX(len) {
+                measure.innerHTML = "<pre><span>" + lineObj.getHTML(null, null, false, tabText, len) + "</span></pre>";
+                return measure.firstChild.firstChild.offsetWidth;
+            }
+            var from = 0, fromX = 0, to = text.length, toX;
+            // Guess a suitable upper bound for our search.
+            var estimated = Math.min(to, Math.ceil(x / charWidth()));
+            for (;;) {
+                var estX = getX(estimated);
+                if (estX <= x && estimated < to) estimated = Math.min(to, Math.ceil(estimated * 1.2));
+                else {toX = estX; to = estimated; break;}
+            }
+            if (x > toX) return to;
+            // Try to guess a suitable lower bound as well.
+            estimated = Math.floor(to * 0.8); estX = getX(estimated);
+            if (estX < x) {from = estimated; fromX = estX;}
+            // Do a binary search between these bounds.
+            for (;;) {
+                if (to - from <= 1) return (toX - x > x - fromX) ? from : to;
+                var middle = Math.ceil((from + to) / 2), middleX = getX(middle);
+                if (middleX > x) {to = middle; toX = middleX;}
+                else {from = middle; fromX = middleX;}
+            }
+        }
+
+        var tempId = Math.floor(Math.random() * 0xffffff).toString(16);
+        function measureLine(line, ch) {
+            var extra = "";
+            // Include extra text at the end to make sure the measured line is wrapped in the right way.
+            if (options.lineWrapping) {
+                var end = line.text.indexOf(" ", ch + 2);
+                extra = htmlEscape(line.text.slice(ch + 1, end < 0 ? line.text.length : end + (ie ? 5 : 0)));
+            }
+            measure.innerHTML = "<pre>" + line.getHTML(null, null, false, tabText, ch) +
+                '<span id="CodeMirror-temp-' + tempId + '">' + htmlEscape(line.text.charAt(ch) || " ") + "</span>" +
+                extra + "</pre>";
+            var elt = document.getElementById("CodeMirror-temp-" + tempId);
+            var top = elt.offsetTop, left = elt.offsetLeft;
+            // Older IEs report zero offsets for spans directly after a wrap
+            if (ie && ch && top == 0 && left == 0) {
+                var backup = document.createElement("span");
+                backup.innerHTML = "x";
+                elt.parentNode.insertBefore(backup, elt.nextSibling);
+                top = backup.offsetTop;
+            }
+            return {top: top, left: left};
+        }
+        function localCoords(pos, inLineWrap) {
+            var x, lh = textHeight(), y = lh * (heightAtLine(doc, pos.line) - (inLineWrap ? displayOffset : 0));
+            if (pos.ch == 0) x = 0;
+            else {
+                var sp = measureLine(getLine(pos.line), pos.ch);
+                x = sp.left;
+                if (options.lineWrapping) y += Math.max(0, sp.top);
+            }
+            return {x: x, y: y, yBot: y + lh};
+        }
+        // Coords must be lineSpace-local
+        function coordsChar(x, y) {
+            if (y < 0) y = 0;
+            var th = textHeight(), cw = charWidth(), heightPos = displayOffset + Math.floor(y / th);
+            var lineNo = lineAtHeight(doc, heightPos);
+            if (lineNo >= doc.size) return {line: doc.size - 1, ch: getLine(doc.size - 1).text.length};
+            var lineObj = getLine(lineNo), text = lineObj.text;
+            var tw = options.lineWrapping, innerOff = tw ? heightPos - heightAtLine(doc, lineNo) : 0;
+            if (x <= 0 && innerOff == 0) return {line: lineNo, ch: 0};
+            function getX(len) {
+                var sp = measureLine(lineObj, len);
+                if (tw) {
+                    var off = Math.round(sp.top / th);
+                    return Math.max(0, sp.left + (off - innerOff) * scroller.clientWidth);
+                }
+                return sp.left;
+            }
+            var from = 0, fromX = 0, to = text.length, toX;
+            // Guess a suitable upper bound for our search.
+            var estimated = Math.min(to, Math.ceil((x + innerOff * scroller.clientWidth * .9) / cw));
+            for (;;) {
+                var estX = getX(estimated);
+                if (estX <= x && estimated < to) estimated = Math.min(to, Math.ceil(estimated * 1.2));
+                else {toX = estX; to = estimated; break;}
+            }
+            if (x > toX) return {line: lineNo, ch: to};
+            // Try to guess a suitable lower bound as well.
+            estimated = Math.floor(to * 0.8); estX = getX(estimated);
+            if (estX < x) {from = estimated; fromX = estX;}
+            // Do a binary search between these bounds.
+            for (;;) {
+                if (to - from <= 1) return {line: lineNo, ch: (toX - x > x - fromX) ? from : to};
+                var middle = Math.ceil((from + to) / 2), middleX = getX(middle);
+                if (middleX > x) {to = middle; toX = middleX;}
+                else {from = middle; fromX = middleX;}
+            }
+        }
+        function pageCoords(pos) {
+            var local = localCoords(pos, true), off = eltOffset(lineSpace);
+            return {x: off.left + local.x, y: off.top + local.y, yBot: off.top + local.yBot};
+        }
+
+        var cachedHeight, cachedHeightFor, measureText;
+        function textHeight() {
+            if (measureText == null) {
+                measureText = "<pre>";
+                for (var i = 0; i < 49; ++i) measureText += "x<br/>";
+                measureText += "x</pre>";
+            }
+            var offsetHeight = lineDiv.clientHeight;
+            if (offsetHeight == cachedHeightFor) return cachedHeight;
+            cachedHeightFor = offsetHeight;
+            measure.innerHTML = measureText;
+            cachedHeight = measure.firstChild.offsetHeight / 50 || 1;
+            measure.innerHTML = "";
+            return cachedHeight;
+        }
+        var cachedWidth, cachedWidthFor = 0;
+        function charWidth() {
+            if (scroller.clientWidth == cachedWidthFor) return cachedWidth;
+            cachedWidthFor = scroller.clientWidth;
+            return (cachedWidth = stringWidth("x"));
+        }
+        function paddingTop() {return lineSpace.offsetTop;}
+        function paddingLeft() {return lineSpace.offsetLeft;}
+
+        function posFromMouse(e, liberal) {
+            var offW = eltOffset(scroller, true), x, y;
+            // Fails unpredictably on IE[67] when mouse is dragged around quickly.
+            try { x = e.clientX; y = e.clientY; } catch (e) { return null; }
+            // This is a mess of a heuristic to try and determine whether a
+            // scroll-bar was clicked or not, and to return null if one was
+            // (and !liberal).
+            if (!liberal && (x - offW.left > scroller.clientWidth || y - offW.top > scroller.clientHeight))
+                return null;
+            var offL = eltOffset(lineSpace, true);
+            return coordsChar(x - offL.left, y - offL.top);
+        }
+        function onContextMenu(e) {
+            var pos = posFromMouse(e);
+            if (!pos || window.opera) return; // Opera is difficult.
+            if (posEq(sel.from, sel.to) || posLess(pos, sel.from) || !posLess(pos, sel.to))
+                operation(setCursor)(pos.line, pos.ch);
+
+            var oldCSS = input.style.cssText;
+            inputDiv.style.position = "absolute";
+            input.style.cssText = "position: fixed; width: 30px; height: 30px; top: " + (e.clientY - 5) +
+                "px; left: " + (e.clientX - 5) + "px; z-index: 1000; background: white; " +
+                "border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);";
+            leaveInputAlone = true;
+            var val = input.value = getSelection();
+            focusInput();
+            input.select();
+            function rehide() {
+                var newVal = splitLines(input.value).join("\n");
+                if (newVal != val) operation(replaceSelection)(newVal, "end");
+                inputDiv.style.position = "relative";
+                input.style.cssText = oldCSS;
+                leaveInputAlone = false;
+                resetInput(true);
+                slowPoll();
+            }
+
+            if (gecko) {
+                e_stop(e);
+                var mouseup = connect(window, "mouseup", function() {
+                    mouseup();
+                    setTimeout(rehide, 20);
+                }, true);
+            }
+            else {
+                setTimeout(rehide, 50);
+            }
+        }
+
+        // Cursor-blinking
+        function restartBlink() {
+            clearInterval(blinker);
+            var on = true;
+            cursor.style.visibility = "";
+            blinker = setInterval(function() {
+                cursor.style.visibility = (on = !on) ? "" : "hidden";
+            }, 650);
+        }
+
+        var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<"};
+        function matchBrackets(autoclear) {
+            var head = sel.inverted ? sel.from : sel.to, line = getLine(head.line), pos = head.ch - 1;
+            var match = (pos >= 0 && matching[line.text.charAt(pos)]) || matching[line.text.charAt(++pos)];
+            if (!match) return;
+            var ch = match.charAt(0), forward = match.charAt(1) == ">", d = forward ? 1 : -1, st = line.styles;
+            for (var off = pos + 1, i = 0, e = st.length; i < e; i+=2)
+                if ((off -= st[i].length) <= 0) {var style = st[i+1]; break;}
+
+            var stack = [line.text.charAt(pos)], re = /[(){}[\]]/;
+            function scan(line, from, to) {
+                if (!line.text) return;
+                var st = line.styles, pos = forward ? 0 : line.text.length - 1, cur;
+                for (var i = forward ? 0 : st.length - 2, e = forward ? st.length : -2; i != e; i += 2*d) {
+                    var text = st[i];
+                    if (st[i+1] != null && st[i+1] != style) {pos += d * text.length; continue;}
+                    for (var j = forward ? 0 : text.length - 1, te = forward ? text.length : -1; j != te; j += d, pos+=d) {
+                        if (pos >= from && pos < to && re.test(cur = text.charAt(j))) {
+                            var match = matching[cur];
+                            if (match.charAt(1) == ">" == forward) stack.push(cur);
+                            else if (stack.pop() != match.charAt(0)) return {pos: pos, match: false};
+                            else if (!stack.length) return {pos: pos, match: true};
+                        }
+                    }
+                }
+            }
+            for (var i = head.line, e = forward ? Math.min(i + 100, doc.size) : Math.max(-1, i - 100); i != e; i+=d) {
+                var line = getLine(i), first = i == head.line;
+                var found = scan(line, first && forward ? pos + 1 : 0, first && !forward ? pos : line.text.length);
+                if (found) break;
+            }
+            if (!found) found = {pos: null, match: false};
+            var style = found.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
+            var one = markText({line: head.line, ch: pos}, {line: head.line, ch: pos+1}, style),
+                two = found.pos != null && markText({line: i, ch: found.pos}, {line: i, ch: found.pos + 1}, style);
+            var clear = operation(function(){one.clear(); two && two.clear();});
+            if (autoclear) setTimeout(clear, 800);
+            else bracketHighlighted = clear;
+        }
+
+        // Finds the line to start with when starting a parse. Tries to
+        // find a line with a stateAfter, so that it can start with a
+        // valid state. If that fails, it returns the line with the
+        // smallest indentation, which tends to need the least context to
+        // parse correctly.
+        function findStartLine(n) {
+            var minindent, minline;
+            for (var search = n, lim = n - 40; search > lim; --search) {
+                if (search == 0) return 0;
+                var line = getLine(search-1);
+                if (line.stateAfter) return search;
+                var indented = line.indentation(options.tabSize);
+                if (minline == null || minindent > indented) {
+                    minline = search - 1;
+                    minindent = indented;
+                }
+            }
+            return minline;
+        }
+        function getStateBefore(n) {
+            var start = findStartLine(n), state = start && getLine(start-1).stateAfter;
+            if (!state) state = startState(mode);
+            else state = copyState(mode, state);
+            doc.iter(start, n, function(line) {
+                line.highlight(mode, state, options.tabSize);
+                line.stateAfter = copyState(mode, state);
+            });
+            if (start < n) changes.push({from: start, to: n});
+            if (n < doc.size && !getLine(n).stateAfter) work.push(n);
+            return state;
+        }
+        function highlightLines(start, end) {
+            var state = getStateBefore(start);
+            doc.iter(start, end, function(line) {
+                line.highlight(mode, state, options.tabSize);
+                line.stateAfter = copyState(mode, state);
+            });
+        }
+        function highlightWorker() {
+            var end = +new Date + options.workTime;
+            var foundWork = work.length;
+            while (work.length) {
+                if (!getLine(showingFrom).stateAfter) var task = showingFrom;
+                else var task = work.pop();
+                if (task >= doc.size) continue;
+                var start = findStartLine(task), state = start && getLine(start-1).stateAfter;
+                if (state) state = copyState(mode, state);
+                else state = startState(mode);
+
+                var unchanged = 0, compare = mode.compareStates, realChange = false,
+                    i = start, bail = false;
+                doc.iter(i, doc.size, function(line) {
+                    var hadState = line.stateAfter;
+                    if (+new Date > end) {
+                        work.push(i);
+                        startWorker(options.workDelay);
+                        if (realChange) changes.push({from: task, to: i + 1});
+                        return (bail = true);
+                    }
+                    var changed = line.highlight(mode, state, options.tabSize);
+                    if (changed) realChange = true;
+                    line.stateAfter = copyState(mode, state);
+                    if (compare) {
+                        if (hadState && compare(hadState, state)) return true;
+                    } else {
+                        if (changed !== false || !hadState) unchanged = 0;
+                        else if (++unchanged > 3 && (!mode.indent || mode.indent(hadState, "") == mode.indent(state, "")))
+                            return true;
+                    }
+                    ++i;
+                });
+                if (bail) return;
+                if (realChange) changes.push({from: task, to: i + 1});
+            }
+            if (foundWork && options.onHighlightComplete)
+                options.onHighlightComplete(instance);
+        }
+        function startWorker(time) {
+            if (!work.length) return;
+            highlight.set(time, operation(highlightWorker));
+        }
+
+        // Operations are used to wrap changes in such a way that each
+        // change won't have to update the cursor and display (which would
+        // be awkward, slow, and error-prone), but instead updates are
+        // batched and then all combined and executed at once.
+        function startOperation() {
+            updateInput = userSelChange = textChanged = null;
+            changes = []; selectionChanged = false; callbacks = [];
+        }
+        function endOperation() {
+            var reScroll = false, updated;
+            if (selectionChanged) reScroll = !scrollCursorIntoView();
+            if (changes.length) updated = updateDisplay(changes, true);
+            else {
+                if (selectionChanged) updateCursor();
+                if (gutterDirty) updateGutter();
+            }
+            if (reScroll) scrollCursorIntoView();
+            if (selectionChanged) {scrollEditorIntoView(); restartBlink();}
+
+            if (focused && !leaveInputAlone &&
+                (updateInput === true || (updateInput !== false && selectionChanged)))
+                resetInput(userSelChange);
+
+            if (selectionChanged && options.matchBrackets)
+                setTimeout(operation(function() {
+                    if (bracketHighlighted) {bracketHighlighted(); bracketHighlighted = null;}
+                    if (posEq(sel.from, sel.to)) matchBrackets(false);
+                }), 20);
+            var tc = textChanged, cbs = callbacks; // these can be reset by callbacks
+            if (selectionChanged && options.onCursorActivity)
+                options.onCursorActivity(instance);
+            if (tc && options.onChange && instance)
+                options.onChange(instance, tc);
+            for (var i = 0; i < cbs.length; ++i) cbs[i](instance);
+            if (updated && options.onUpdate) options.onUpdate(instance);
+        }
+        var nestedOperation = 0;
+        function operation(f) {
+            return function() {
+                if (!nestedOperation++) startOperation();
+                try {var result = f.apply(this, arguments);}
+                finally {if (!--nestedOperation) endOperation();}
+                return result;
+            };
+        }
+
+        for (var ext in extensions)
+            if (extensions.propertyIsEnumerable(ext) &&
+                !instance.propertyIsEnumerable(ext))
+                instance[ext] = extensions[ext];
+        return instance;
+    } // (end of function CodeMirror)
+
+    // The default configuration options.
+    CodeMirror.defaults = {
+        value: "",
+        mode: null,
+        theme: "default",
+        indentUnit: 2,
+        indentWithTabs: false,
+        tabSize: 4,
+        keyMap: "default",
+        extraKeys: null,
+        electricChars: true,
+        onKeyEvent: null,
+        lineWrapping: false,
+        lineNumbers: false,
+        gutter: false,
+        fixedGutter: false,
+        firstLineNumber: 1,
+        readOnly: false,
+        onChange: null,
+        onCursorActivity: null,
+        onGutterClick: null,
+        onHighlightComplete: null,
+        onUpdate: null,
+        onFocus: null, onBlur: null, onScroll: null,
+        matchBrackets: false,
+        workTime: 100,
+        workDelay: 200,
+        pollInterval: 100,
+        undoDepth: 40,
+        tabindex: null,
+        document: window.document
+    };
+
+    var mac = /Mac/.test(navigator.platform);
+    var win = /Win/.test(navigator.platform);
+
+    // Known modes, by name and by MIME
+    var modes = {}, mimeModes = {};
+    CodeMirror.defineMode = function(name, mode) {
+        if (!CodeMirror.defaults.mode && name != "null") CodeMirror.defaults.mode = name;
+        modes[name] = mode;
+    };
+    CodeMirror.defineMIME = function(mime, spec) {
+        mimeModes[mime] = spec;
+    };
+    CodeMirror.getMode = function(options, spec) {
+        if (typeof spec == "string" && mimeModes.hasOwnProperty(spec))
+            spec = mimeModes[spec];
+        if (typeof spec == "string")
+            var mname = spec, config = {};
+        else if (spec != null)
+            var mname = spec.name, config = spec;
+        var mfactory = modes[mname];
+        if (!mfactory) {
+            if (window.console) console.warn("No mode " + mname + " found, falling back to plain text.");
+            return CodeMirror.getMode(options, "text/plain");
+        }
+        return mfactory(options, config || {});
+    };
+    CodeMirror.listModes = function() {
+        var list = [];
+        for (var m in modes)
+            if (modes.propertyIsEnumerable(m)) list.push(m);
+        return list;
+    };
+    CodeMirror.listMIMEs = function() {
+        var list = [];
+        for (var m in mimeModes)
+            if (mimeModes.propertyIsEnumerable(m)) list.push({mime: m, mode: mimeModes[m]});
+        return list;
+    };
+
+    var extensions = CodeMirror.extensions = {};
+    CodeMirror.defineExtension = function(name, func) {
+        extensions[name] = func;
+    };
+
+    var commands = CodeMirror.commands = {
+        selectAll: function(cm) {cm.setSelection({line: 0, ch: 0}, {line: cm.lineCount() - 1});},
+        killLine: function(cm) {
+            var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
+            if (!sel && cm.getLine(from.line).length == from.ch) cm.replaceRange("", from, {line: from.line + 1, ch: 0});
+            else cm.replaceRange("", from, sel ? to : {line: from.line});
+        },
+        deleteLine: function(cm) {var l = cm.getCursor().line; cm.replaceRange("", {line: l, ch: 0}, {line: l});},
+        undo: function(cm) {cm.undo();},
+        redo: function(cm) {cm.redo();},
+        goDocStart: function(cm) {cm.setCursor(0, 0, true);},
+        goDocEnd: function(cm) {cm.setSelection({line: cm.lineCount() - 1}, null, true);},
+        goLineStart: function(cm) {cm.setCursor(cm.getCursor().line, 0, true);},
+        goLineStartSmart: function(cm) {
+            var cur = cm.getCursor();
+            var text = cm.getLine(cur.line), firstNonWS = Math.max(0, text.search(/\S/));
+            cm.setCursor(cur.line, cur.ch <= firstNonWS && cur.ch ? 0 : firstNonWS, true);
+        },
+        goLineEnd: function(cm) {cm.setSelection({line: cm.getCursor().line}, null, true);},
+        goLineUp: function(cm) {cm.moveV(-1, "line");},
+        goLineDown: function(cm) {cm.moveV(1, "line");},
+        goPageUp: function(cm) {cm.moveV(-1, "page");},
+        goPageDown: function(cm) {cm.moveV(1, "page");},
+        goCharLeft: function(cm) {cm.moveH(-1, "char");},
+        goCharRight: function(cm) {cm.moveH(1, "char");},
+        goColumnLeft: function(cm) {cm.moveH(-1, "column");},
+        goColumnRight: function(cm) {cm.moveH(1, "column");},
+        goWordLeft: function(cm) {cm.moveH(-1, "word");},
+        goWordRight: function(cm) {cm.moveH(1, "word");},
+        delCharLeft: function(cm) {cm.deleteH(-1, "char");},
+        delCharRight: function(cm) {cm.deleteH(1, "char");},
+        delWordLeft: function(cm) {cm.deleteH(-1, "word");},
+        delWordRight: function(cm) {cm.deleteH(1, "word");},
+        indentAuto: function(cm) {cm.indentSelection("smart");},
+        indentMore: function(cm) {cm.indentSelection("add");},
+        indentLess: function(cm) {cm.indentSelection("subtract");},
+        insertTab: function(cm) {cm.replaceSelection("\t", "end");},
+        transposeChars: function(cm) {
+            var cur = cm.getCursor(), line = cm.getLine(cur.line);
+            if (cur.ch > 0 && cur.ch < line.length - 1)
+                cm.replaceRange(line.charAt(cur.ch) + line.charAt(cur.ch - 1),
+                    {line: cur.line, ch: cur.ch - 1}, {line: cur.line, ch: cur.ch + 1});
+        },
+        newlineAndIndent: function(cm) {
+            cm.replaceSelection("\n", "end");
+            cm.indentLine(cm.getCursor().line);
+        },
+        toggleOverwrite: function(cm) {cm.toggleOverwrite();}
+    };
+
+    var keyMap = CodeMirror.keyMap = {};
+    keyMap.basic = {
+        "Left": "goCharLeft", "Right": "goCharRight", "Up": "goLineUp", "Down": "goLineDown",
+        "End": "goLineEnd", "Home": "goLineStartSmart", "PageUp": "goPageUp", "PageDown": "goPageDown",
+        "Delete": "delCharRight", "Backspace": "delCharLeft", "Tab": "indentMore", "Shift-Tab": "indentLess",
+        "Enter": "newlineAndIndent", "Insert": "toggleOverwrite"
+    };
+    // Note that the save and find-related commands aren't defined by
+    // default. Unknown commands are simply ignored.
+    keyMap.pcDefault = {
+        "Ctrl-A": "selectAll", "Ctrl-D": "deleteLine", "Ctrl-Z": "undo", "Shift-Ctrl-Z": "redo", "Ctrl-Y": "redo",
+        "Ctrl-Home": "goDocStart", "Alt-Up": "goDocStart", "Ctrl-End": "goDocEnd", "Ctrl-Down": "goDocEnd",
+        "Ctrl-Left": "goWordLeft", "Ctrl-Right": "goWordRight", "Alt-Left": "goLineStart", "Alt-Right": "goLineEnd",
+        "Ctrl-Backspace": "delWordLeft", "Ctrl-Delete": "delWordRight", "Ctrl-S": "save", "Ctrl-F": "find",
+        "Ctrl-G": "findNext", "Shift-Ctrl-G": "findPrev", "Shift-Ctrl-F": "replace", "Shift-Ctrl-R": "replaceAll",
+        fallthrough: "basic"
+    };
+    keyMap.macDefault = {
+        "Cmd-A": "selectAll", "Cmd-D": "deleteLine", "Cmd-Z": "undo", "Shift-Cmd-Z": "redo", "Cmd-Y": "redo",
+        "Cmd-Up": "goDocStart", "Cmd-End": "goDocEnd", "Cmd-Down": "goDocEnd", "Alt-Left": "goWordLeft",
+        "Alt-Right": "goWordRight", "Cmd-Left": "goLineStart", "Cmd-Right": "goLineEnd", "Alt-Backspace": "delWordLeft",
+        "Ctrl-Alt-Backspace": "delWordRight", "Alt-Delete": "delWordRight", "Cmd-S": "save", "Cmd-F": "find",
+        "Cmd-G": "findNext", "Shift-Cmd-G": "findPrev", "Cmd-Alt-F": "replace", "Shift-Cmd-Alt-F": "replaceAll",
+        fallthrough: ["basic", "emacsy"]
+    };
+    keyMap["default"] = mac ? keyMap.macDefault : keyMap.pcDefault;
+    keyMap.emacsy = {
+        "Ctrl-F": "goCharRight", "Ctrl-B": "goCharLeft", "Ctrl-P": "goLineUp", "Ctrl-N": "goLineDown",
+        "Alt-F": "goWordRight", "Alt-B": "goWordLeft", "Ctrl-A": "goLineStart", "Ctrl-E": "goLineEnd",
+        "Ctrl-V": "goPageUp", "Shift-Ctrl-V": "goPageDown", "Ctrl-D": "delCharRight", "Ctrl-H": "delCharLeft",
+        "Alt-D": "delWordRight", "Alt-Backspace": "delWordLeft", "Ctrl-K": "killLine", "Ctrl-T": "transposeChars"
+    };
+
+    function lookupKey(name, extraMap, map) {
+        function lookup(name, map, ft) {
+            var found = map[name];
+            if (found != null) return found;
+            if (ft == null) ft = map.fallthrough;
+            if (ft == null) return map.catchall;
+            if (typeof ft == "string") return lookup(name, keyMap[ft]);
+            for (var i = 0, e = ft.length; i < e; ++i) {
+                found = lookup(name, keyMap[ft[i]]);
+                if (found != null) return found;
+            }
+            return null;
+        }
+        return extraMap ? lookup(name, extraMap, map) : lookup(name, keyMap[map]);
+    }
+    function isModifierKey(event) {
+        var name = keyNames[event.keyCode];
+        return name == "Ctrl" || name == "Alt" || name == "Shift" || name == "Mod";
+    }
+
+    CodeMirror.fromTextArea = function(textarea, options) {
+        if (!options) options = {};
+        options.value = textarea.value;
+        if (!options.tabindex && textarea.tabindex)
+            options.tabindex = textarea.tabindex;
+
+        function save() {textarea.value = instance.getValue();}
+        if (textarea.form) {
+            // Deplorable hack to make the submit method do the right thing.
+            var rmSubmit = connect(textarea.form, "submit", save, true);
+            if (typeof textarea.form.submit == "function") {
+                var realSubmit = textarea.form.submit;
+                function wrappedSubmit() {
+                    save();
+                    textarea.form.submit = realSubmit;
+                    textarea.form.submit();
+                    textarea.form.submit = wrappedSubmit;
+                }
+                textarea.form.submit = wrappedSubmit;
+            }
+        }
+
+        textarea.style.display = "none";
+        var instance = CodeMirror(function(node) {
+            textarea.parentNode.insertBefore(node, textarea.nextSibling);
+        }, options);
+        instance.save = save;
+        instance.getTextArea = function() { return textarea; };
+        instance.toTextArea = function() {
+            save();
+            textarea.parentNode.removeChild(instance.getWrapperElement());
+            textarea.style.display = "";
+            if (textarea.form) {
+                rmSubmit();
+                if (typeof textarea.form.submit == "function")
+                    textarea.form.submit = realSubmit;
+            }
+        };
+        return instance;
+    };
+
+    // Utility functions for working with state. Exported because modes
+    // sometimes need to do this.
+    function copyState(mode, state) {
+        if (state === true) return state;
+        if (mode.copyState) return mode.copyState(state);
+        var nstate = {};
+        for (var n in state) {
+            var val = state[n];
+            if (val instanceof Array) val = val.concat([]);
+            nstate[n] = val;
+        }
+        return nstate;
+    }
+    CodeMirror.copyState = copyState;
+    function startState(mode, a1, a2) {
+        return mode.startState ? mode.startState(a1, a2) : true;
+    }
+    CodeMirror.startState = startState;
+
+    // The character stream used by a mode's parser.
+    function StringStream(string, tabSize) {
+        this.pos = this.start = 0;
+        this.string = string;
+        this.tabSize = tabSize || 8;
+    }
+    StringStream.prototype = {
+        eol: function() {return this.pos >= this.string.length;},
+        sol: function() {return this.pos == 0;},
+        peek: function() {return this.string.charAt(this.pos);},
+        next: function() {
+            if (this.pos < this.string.length)
+                return this.string.charAt(this.pos++);
+        },
+        eat: function(match) {
+            var ch = this.string.charAt(this.pos);
+            if (typeof match == "string") var ok = ch == match;
+            else var ok = ch && (match.test ? match.test(ch) : match(ch));
+            if (ok) {++this.pos; return ch;}
+        },
+        eatWhile: function(match) {
+            var start = this.pos;
+            while (this.eat(match)){}
+            return this.pos > start;
+        },
+        eatSpace: function() {
+            var start = this.pos;
+            while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) ++this.pos;
+            return this.pos > start;
+        },
+        skipToEnd: function() {this.pos = this.string.length;},
+        skipTo: function(ch) {
+            var found = this.string.indexOf(ch, this.pos);
+            if (found > -1) {this.pos = found; return true;}
+        },
+        backUp: function(n) {this.pos -= n;},
+        column: function() {return countColumn(this.string, this.start, this.tabSize);},
+        indentation: function() {return countColumn(this.string, null, this.tabSize);},
+        match: function(pattern, consume, caseInsensitive) {
+            if (typeof pattern == "string") {
+                function cased(str) {return caseInsensitive ? str.toLowerCase() : str;}
+                if (cased(this.string).indexOf(cased(pattern), this.pos) == this.pos) {
+                    if (consume !== false) this.pos += pattern.length;
+                    return true;
+                }
+            }
+            else {
+                var match = this.string.slice(this.pos).match(pattern);
+                if (match && consume !== false) this.pos += match[0].length;
+                return match;
+            }
+        },
+        current: function(){return this.string.slice(this.start, this.pos);}
+    };
+    CodeMirror.StringStream = StringStream;
+
+    function MarkedText(from, to, className, set) {
+        this.from = from; this.to = to; this.style = className; this.set = set;
+    }
+    MarkedText.prototype = {
+        attach: function(line) { this.set.push(line); },
+        detach: function(line) {
+            var ix = indexOf(this.set, line);
+            if (ix > -1) this.set.splice(ix, 1);
+        },
+        split: function(pos, lenBefore) {
+            if (this.to <= pos && this.to != null) return null;
+            var from = this.from < pos || this.from == null ? null : this.from - pos + lenBefore;
+            var to = this.to == null ? null : this.to - pos + lenBefore;
+            return new MarkedText(from, to, this.style, this.set);
+        },
+        dup: function() { return new MarkedText(null, null, this.style, this.set); },
+        clipTo: function(fromOpen, from, toOpen, to, diff) {
+            if (this.from != null && this.from >= from)
+                this.from = Math.max(to, this.from) + diff;
+            if (this.to != null && this.to > from)
+                this.to = to < this.to ? this.to + diff : from;
+            if (fromOpen && to > this.from && (to < this.to || this.to == null))
+                this.from = null;
+            if (toOpen && (from < this.to || this.to == null) && (from > this.from || this.from == null))
+                this.to = null;
+        },
+        isDead: function() { return this.from != null && this.to != null && this.from >= this.to; },
+        sameSet: function(x) { return this.set == x.set; }
+    };
+
+    function Bookmark(pos) {
+        this.from = pos; this.to = pos; this.line = null;
+    }
+    Bookmark.prototype = {
+        attach: function(line) { this.line = line; },
+        detach: function(line) { if (this.line == line) this.line = null; },
+        split: function(pos, lenBefore) {
+            if (pos < this.from) {
+                this.from = this.to = (this.from - pos) + lenBefore;
+                return this;
+            }
+        },
+        isDead: function() { return this.from > this.to; },
+        clipTo: function(fromOpen, from, toOpen, to, diff) {
+            if ((fromOpen || from < this.from) && (toOpen || to > this.to)) {
+                this.from = 0; this.to = -1;
+            } else if (this.from > from) {
+                this.from = this.to = Math.max(to, this.from) + diff;
+            }
+        },
+        sameSet: function(x) { return false; },
+        find: function() {
+            if (!this.line || !this.line.parent) return null;
+            return {line: lineNo(this.line), ch: this.from};
+        },
+        clear: function() {
+            if (this.line) {
+                var found = indexOf(this.line.marked, this);
+                if (found != -1) this.line.marked.splice(found, 1);
+                this.line = null;
+            }
+        }
+    };
+
+    // Line objects. These hold state related to a line, including
+    // highlighting info (the styles array).
+    function Line(text, styles) {
+        this.styles = styles || [text, null];
+        this.text = text;
+        this.height = 1;
+        this.marked = this.gutterMarker = this.className = this.handlers = null;
+        this.stateAfter = this.parent = this.hidden = null;
+    }
+    Line.inheritMarks = function(text, orig) {
+        var ln = new Line(text), mk = orig && orig.marked;
+        if (mk) {
+            for (var i = 0; i < mk.length; ++i) {
+                if (mk[i].to == null && mk[i].style) {
+                    var newmk = ln.marked || (ln.marked = []), mark = mk[i];
+                    var nmark = mark.dup(); newmk.push(nmark); nmark.attach(ln);
+                }
+            }
+        }
+        return ln;
+    }
+    Line.prototype = {
+        // Replace a piece of a line, keeping the styles around it intact.
+        replace: function(from, to_, text) {
+            var st = [], mk = this.marked, to = to_ == null ? this.text.length : to_;
+            copyStyles(0, from, this.styles, st);
+            if (text) st.push(text, null);
+            copyStyles(to, this.text.length, this.styles, st);
+            this.styles = st;
+            this.text = this.text.slice(0, from) + text + this.text.slice(to);
+            this.stateAfter = null;
+            if (mk) {
+                var diff = text.length - (to - from);
+                for (var i = 0, mark = mk[i]; i < mk.length; ++i) {
+                    mark.clipTo(from == null, from || 0, to_ == null, to, diff);
+                    if (mark.isDead()) {mark.detach(this); mk.splice(i--, 1);}
+                }
+            }
+        },
+        // Split a part off a line, keeping styles and markers intact.
+        split: function(pos, textBefore) {
+            var st = [textBefore, null], mk = this.marked;
+            copyStyles(pos, this.text.length, this.styles, st);
+            var taken = new Line(textBefore + this.text.slice(pos), st);
+            if (mk) {
+                for (var i = 0; i < mk.length; ++i) {
+                    var mark = mk[i];
+                    var newmark = mark.split(pos, textBefore.length);
+                    if (newmark) {
+                        if (!taken.marked) taken.marked = [];
+                        taken.marked.push(newmark); newmark.attach(taken);
+                    }
+                }
+            }
+            return taken;
+        },
+        append: function(line) {
+            var mylen = this.text.length, mk = line.marked, mymk = this.marked;
+            this.text += line.text;
+            copyStyles(0, line.text.length, line.styles, this.styles);
+            if (mymk) {
+                for (var i = 0; i < mymk.length; ++i)
+                    if (mymk[i].to == null) mymk[i].to = mylen;
+            }
+            if (mk && mk.length) {
+                if (!mymk) this.marked = mymk = [];
+                outer: for (var i = 0; i < mk.length; ++i) {
+                    var mark = mk[i];
+                    if (!mark.from) {
+                        for (var j = 0; j < mymk.length; ++j) {
+                            var mymark = mymk[j];
+                            if (mymark.to == mylen && mymark.sameSet(mark)) {
+                                mymark.to = mark.to == null ? null : mark.to + mylen;
+                                if (mymark.isDead()) {
+                                    mymark.detach(this);
+                                    mk.splice(i--, 1);
+                                }
+                                continue outer;
+                            }
+                        }
+                    }
+                    mymk.push(mark);
+                    mark.attach(this);
+                    mark.from += mylen;
+                    if (mark.to != null) mark.to += mylen;
+                }
+            }
+        },
+        fixMarkEnds: function(other) {
+            var mk = this.marked, omk = other.marked;
+            if (!mk) return;
+            for (var i = 0; i < mk.length; ++i) {
+                var mark = mk[i], close = mark.to == null;
+                if (close && omk) {
+                    for (var j = 0; j < omk.length; ++j)
+                        if (omk[j].sameSet(mark)) {close = false; break;}
+                }
+                if (close) mark.to = this.text.length;
+            }
+        },
+        fixMarkStarts: function() {
+            var mk = this.marked;
+            if (!mk) return;
+            for (var i = 0; i < mk.length; ++i)
+                if (mk[i].from == null) mk[i].from = 0;
+        },
+        addMark: function(mark) {
+            mark.attach(this);
+            if (this.marked == null) this.marked = [];
+            this.marked.push(mark);
+            this.marked.sort(function(a, b){return (a.from || 0) - (b.from || 0);});
+        },
+        // Run the given mode's parser over a line, update the styles
+        // array, which contains alternating fragments of text and CSS
+        // classes.
+        highlight: function(mode, state, tabSize) {
+            var stream = new StringStream(this.text, tabSize), st = this.styles, pos = 0;
+            var changed = false, curWord = st[0], prevWord;
+            if (this.text == "" && mode.blankLine) mode.blankLine(state);
+            while (!stream.eol()) {
+                var style = mode.token(stream, state);
+                var substr = this.text.slice(stream.start, stream.pos);
+                stream.start = stream.pos;
+                if (pos && st[pos-1] == style)
+                    st[pos-2] += substr;
+                else if (substr) {
+                    if (!changed && (st[pos+1] != style || (pos && st[pos-2] != prevWord))) changed = true;
+                    st[pos++] = substr; st[pos++] = style;
+                    prevWord = curWord; curWord = st[pos];
+                }
+                // Give up when line is ridiculously long
+                if (stream.pos > 5000) {
+                    st[pos++] = this.text.slice(stream.pos); st[pos++] = null;
+                    break;
+                }
+            }
+            if (st.length != pos) {st.length = pos; changed = true;}
+            if (pos && st[pos-2] != prevWord) changed = true;
+            // Short lines with simple highlights return null, and are
+            // counted as changed by the driver because they are likely to
+            // highlight the same way in various contexts.
+            return changed || (st.length < 5 && this.text.length < 10 ? null : false);
+        },
+        // Fetch the parser token for a given character. Useful for hacks
+        // that want to inspect the mode state (say, for completion).
+        getTokenAt: function(mode, state, ch) {
+            var txt = this.text, stream = new StringStream(txt);
+            while (stream.pos < ch && !stream.eol()) {
+                stream.start = stream.pos;
+                var style = mode.token(stream, state);
+            }
+            return {start: stream.start,
+                end: stream.pos,
+                string: stream.current(),
+                className: style || null,
+                state: state};
+        },
+        indentation: function(tabSize) {return countColumn(this.text, null, tabSize);},
+        // Produces an HTML fragment for the line, taking selection,
+        // marking, and highlighting into account.
+        getHTML: function(sfrom, sto, includePre, tabText, endAt) {
+            var html = [], first = true;
+            if (includePre)
+                html.push(this.className ? '<pre class="' + this.className + '">': "<pre>");
+            function span(text, style) {
+                if (!text) return;
+                // Work around a bug where, in some compat modes, IE ignores leading spaces
+                if (first && ie && text.charAt(0) == " ") text = "\u00a0" + text.slice(1);
+                first = false;
+                if (style) html.push('<span class="', style, '">', htmlEscape(text).replace(/\t/g, tabText), "</span>");
+                else html.push(htmlEscape(text).replace(/\t/g, tabText));
+            }
+            var st = this.styles, allText = this.text, marked = this.marked;
+            if (sfrom == sto) sfrom = null;
+            var len = allText.length;
+            if (endAt != null) len = Math.min(endAt, len);
+
+            if (!allText && endAt == null)
+                span(" ", sfrom != null && sto == null ? "CodeMirror-selected" : null);
+            else if (!marked && sfrom == null)
+                for (var i = 0, ch = 0; ch < len; i+=2) {
+                    var str = st[i], style = st[i+1], l = str.length;
+                    if (ch + l > len) str = str.slice(0, len - ch);
+                    ch += l;
+                    span(str, style && "cm-" + style);
+                }
+            else {
+                var pos = 0, i = 0, text = "", style, sg = 0;
+                var markpos = -1, mark = null;
+                function nextMark() {
+                    if (marked) {
+                        markpos += 1;
+                        mark = (markpos < marked.length) ? marked[markpos] : null;
+                    }
+                }
+                nextMark();
+                while (pos < len) {
+                    var upto = len;
+                    var extraStyle = "";
+                    if (sfrom != null) {
+                        if (sfrom > pos) upto = sfrom;
+                        else if (sto == null || sto > pos) {
+                            extraStyle = " CodeMirror-selected";
+                            if (sto != null) upto = Math.min(upto, sto);
+                        }
+                    }
+                    while (mark && mark.to != null && mark.to <= pos) nextMark();
+                    if (mark) {
+                        if (mark.from > pos) upto = Math.min(upto, mark.from);
+                        else {
+                            extraStyle += " " + mark.style;
+                            if (mark.to != null) upto = Math.min(upto, mark.to);
+                        }
+                    }
+                    for (;;) {
+                        var end = pos + text.length;
+                        var appliedStyle = style;
+                        if (extraStyle) appliedStyle = style ? style + extraStyle : extraStyle;
+                        span(end > upto ? text.slice(0, upto - pos) : text, appliedStyle);
+                        if (end >= upto) {text = text.slice(upto - pos); pos = upto; break;}
+                        pos = end;
+                        text = st[i++]; style = "cm-" + st[i++];
+                    }
+                }
+                if (sfrom != null && sto == null) span(" ", "CodeMirror-selected");
+            }
+            if (includePre) html.push("</pre>");
+            return html.join("");
+        },
+        cleanUp: function() {
+            this.parent = null;
+            if (this.marked)
+                for (var i = 0, e = this.marked.length; i < e; ++i) this.marked[i].detach(this);
+        }
+    };
+    // Utility used by replace and split above
+    function copyStyles(from, to, source, dest) {
+        for (var i = 0, pos = 0, state = 0; pos < to; i+=2) {
+            var part = source[i], end = pos + part.length;
+            if (state == 0) {
+                if (end > from) dest.push(part.slice(from - pos, Math.min(part.length, to - pos)), source[i+1]);
+                if (end >= from) state = 1;
+            }
+            else if (state == 1) {
+                if (end > to) dest.push(part.slice(0, to - pos), source[i+1]);
+                else dest.push(part, source[i+1]);
+            }
+            pos = end;
+        }
+    }
+
+    // Data structure that holds the sequence of lines.
+    function LeafChunk(lines) {
+        this.lines = lines;
+        this.parent = null;
+        for (var i = 0, e = lines.length, height = 0; i < e; ++i) {
+            lines[i].parent = this;
+            height += lines[i].height;
+        }
+        this.height = height;
+    }
+    LeafChunk.prototype = {
+        chunkSize: function() { return this.lines.length; },
+        remove: function(at, n, callbacks) {
+            for (var i = at, e = at + n; i < e; ++i) {
+                var line = this.lines[i];
+                this.height -= line.height;
+                line.cleanUp();
+                if (line.handlers)
+                    for (var j = 0; j < line.handlers.length; ++j) callbacks.push(line.handlers[j]);
+            }
+            this.lines.splice(at, n);
+        },
+        collapse: function(lines) {
+            lines.splice.apply(lines, [lines.length, 0].concat(this.lines));
+        },
+        insertHeight: function(at, lines, height) {
+            this.height += height;
+            this.lines.splice.apply(this.lines, [at, 0].concat(lines));
+            for (var i = 0, e = lines.length; i < e; ++i) lines[i].parent = this;
+        },
+        iterN: function(at, n, op) {
+            for (var e = at + n; at < e; ++at)
+                if (op(this.lines[at])) return true;
+        }
+    };
+    function BranchChunk(children) {
+        this.children = children;
+        var size = 0, height = 0;
+        for (var i = 0, e = children.length; i < e; ++i) {
+            var ch = children[i];
+            size += ch.chunkSize(); height += ch.height;
+            ch.parent = this;
+        }
+        this.size = size;
+        this.height = height;
+        this.parent = null;
+    }
+    BranchChunk.prototype = {
+        chunkSize: function() { return this.size; },
+        remove: function(at, n, callbacks) {
+            this.size -= n;
+            for (var i = 0; i < this.children.length; ++i) {
+                var child = this.children[i], sz = child.chunkSize();
+                if (at < sz) {
+                    var rm = Math.min(n, sz - at), oldHeight = child.height;
+                    child.remove(at, rm, callbacks);
+                    this.height -= oldHeight - child.height;
+                    if (sz == rm) { this.children.splice(i--, 1); child.parent = null; }
+                    if ((n -= rm) == 0) break;
+                    at = 0;
+                } else at -= sz;
+            }
+            if (this.size - n < 25) {
+                var lines = [];
+                this.collapse(lines);
+                this.children = [new LeafChunk(lines)];
+            }
+        },
+        collapse: function(lines) {
+            for (var i = 0, e = this.children.length; i < e; ++i) this.children[i].collapse(lines);
+        },
+        insert: function(at, lines) {
+            var height = 0;
+            for (var i = 0, e = lines.length; i < e; ++i) height += lines[i].height;
+            this.insertHeight(at, lines, height);
+        },
+        insertHeight: function(at, lines, height) {
+            this.size += lines.length;
+            this.height += height;
+            for (var i = 0, e = this.children.length; i < e; ++i) {
+                var child = this.children[i], sz = child.chunkSize();
+                if (at <= sz) {
+                    child.insertHeight(at, lines, height);
+                    if (child.lines && child.lines.length > 50) {
+                        while (child.lines.length > 50) {
+                            var spilled = child.lines.splice(child.lines.length - 25, 25);
+                            var newleaf = new LeafChunk(spilled);
+                            child.height -= newleaf.height;
+                            this.children.splice(i + 1, 0, newleaf);
+                            newleaf.parent = this;
+                        }
+                        this.maybeSpill();
+                    }
+                    break;
+                }
+                at -= sz;
+            }
+        },
+        maybeSpill: function() {
+            if (this.children.length <= 10) return;
+            var me = this;
+            do {
+                var spilled = me.children.splice(me.children.length - 5, 5);
+                var sibling = new BranchChunk(spilled);
+                if (!me.parent) { // Become the parent node
+                    var copy = new BranchChunk(me.children);
+                    copy.parent = me;
+                    me.children = [copy, sibling];
+                    me = copy;
+                } else {
+                    me.size -= sibling.size;
+                    me.height -= sibling.height;
+                    var myIndex = indexOf(me.parent.children, me);
+                    me.parent.children.splice(myIndex + 1, 0, sibling);
+                }
+                sibling.parent = me.parent;
+            } while (me.children.length > 10);
+            me.parent.maybeSpill();
+        },
+        iter: function(from, to, op) { this.iterN(from, to - from, op); },
+        iterN: function(at, n, op) {
+            for (var i = 0, e = this.children.length; i < e; ++i) {
+                var child = this.children[i], sz = child.chunkSize();
+                if (at < sz) {
+                    var used = Math.min(n, sz - at);
+                    if (child.iterN(at, used, op)) return true;
+                    if ((n -= used) == 0) break;
+                    at = 0;
+                } else at -= sz;
+            }
+        }
+    };
+
+    function getLineAt(chunk, n) {
+        while (!chunk.lines) {
+            for (var i = 0;; ++i) {
+                var child = chunk.children[i], sz = child.chunkSize();
+                if (n < sz) { chunk = child; break; }
+                n -= sz;
+            }
+        }
+        return chunk.lines[n];
+    }
+    function lineNo(line) {
+        if (line.parent == null) return null;
+        var cur = line.parent, no = indexOf(cur.lines, line);
+        for (var chunk = cur.parent; chunk; cur = chunk, chunk = chunk.parent) {
+            for (var i = 0, e = chunk.children.length; ; ++i) {
+                if (chunk.children[i] == cur) break;
+                no += chunk.children[i].chunkSize();
+            }
+        }
+        return no;
+    }
+    function lineAtHeight(chunk, h) {
+        var n = 0;
+        outer: do {
+            for (var i = 0, e = chunk.children.length; i < e; ++i) {
+                var child = chunk.children[i], ch = child.height;
+                if (h < ch) { chunk = child; continue outer; }
+                h -= ch;
+                n += child.chunkSize();
+            }
+            return n;
+        } while (!chunk.lines);
+        for (var i = 0, e = chunk.lines.length; i < e; ++i) {
+            var line = chunk.lines[i], lh = line.height;
+            if (h < lh) break;
+            h -= lh;
+        }
+        return n + i;
+    }
+    function heightAtLine(chunk, n) {
+        var h = 0;
+        outer: do {
+            for (var i = 0, e = chunk.children.length; i < e; ++i) {
+                var child = chunk.children[i], sz = child.chunkSize();
+                if (n < sz) { chunk = child; continue outer; }
+                n -= sz;
+                h += child.height;
+            }
+            return h;
+        } while (!chunk.lines);
+        for (var i = 0; i < n; ++i) h += chunk.lines[i].height;
+        return h;
+    }
+
+    // The history object 'chunks' changes that are made close together
+    // and at almost the same time into bigger undoable units.
+    function History() {
+        this.time = 0;
+        this.done = []; this.undone = [];
+    }
+    History.prototype = {
+        addChange: function(start, added, old) {
+            this.undone.length = 0;
+            var time = +new Date, last = this.done[this.done.length - 1];
+            if (time - this.time > 400 || !last ||
+                last.start > start + added || last.start + last.added < start - last.added + last.old.length)
+                this.done.push({start: start, added: added, old: old});
+            else {
+                var oldoff = 0;
+                if (start < last.start) {
+                    for (var i = last.start - start - 1; i >= 0; --i)
+                        last.old.unshift(old[i]);
+                    last.added += last.start - start;
+                    last.start = start;
+                }
+                else if (last.start < start) {
+                    oldoff = start - last.start;
+                    added += oldoff;
+                }
+                for (var i = last.added - oldoff, e = old.length; i < e; ++i)
+                    last.old.push(old[i]);
+                if (last.added < added) last.added = added;
+            }
+            this.time = time;
+        }
+    };
+
+    function stopMethod() {e_stop(this);}
+    // Ensure an event has a stop method.
+    function addStop(event) {
+        if (!event.stop) event.stop = stopMethod;
+        return event;
+    }
+
+    function e_preventDefault(e) {
+        if (e.preventDefault) e.preventDefault();
+        else e.returnValue = false;
+    }
+    function e_stopPropagation(e) {
+        if (e.stopPropagation) e.stopPropagation();
+        else e.cancelBubble = true;
+    }
+    function e_stop(e) {e_preventDefault(e); e_stopPropagation(e);}
+    CodeMirror.e_stop = e_stop;
+    CodeMirror.e_preventDefault = e_preventDefault;
+    CodeMirror.e_stopPropagation = e_stopPropagation;
+
+    function e_target(e) {return e.target || e.srcElement;}
+    function e_button(e) {
+        if (e.which) return e.which;
+        else if (e.button & 1) return 1;
+        else if (e.button & 2) return 3;
+        else if (e.button & 4) return 2;
+    }
+
+    // Event handler registration. If disconnect is true, it'll return a
+    // function that unregisters the handler.
+    function connect(node, type, handler, disconnect) {
+        if (typeof node.addEventListener == "function") {
+            node.addEventListener(type, handler, false);
+            if (disconnect) return function() {node.removeEventListener(type, handler, false);};
+        }
+        else {
+            var wrapHandler = function(event) {handler(event || window.event);};
+            node.attachEvent("on" + type, wrapHandler);
+            if (disconnect) return function() {node.detachEvent("on" + type, wrapHandler);};
+        }
+    }
+    CodeMirror.connect = connect;
+
+    function Delayed() {this.id = null;}
+    Delayed.prototype = {set: function(ms, f) {clearTimeout(this.id); this.id = setTimeout(f, ms);}};
+
+    // Detect drag-and-drop
+    var dragAndDrop = function() {
+        // IE8 has ondragstart and ondrop properties, but doesn't seem to
+        // actually support ondragstart the way it's supposed to work.
+        if (/MSIE [1-8]\b/.test(navigator.userAgent)) return false;
+        var div = document.createElement('div');
+        return "draggable" in div;
+    }();
+
+    var gecko = /gecko\/\d{7}/i.test(navigator.userAgent);
+    var ie = /MSIE \d/.test(navigator.userAgent);
+    var webkit = /WebKit\//.test(navigator.userAgent);
+
+    var lineSep = "\n";
+    // Feature-detect whether newlines in textareas are converted to \r\n
+    (function () {
+        var te = document.createElement("textarea");
+        te.value = "foo\nbar";
+        if (te.value.indexOf("\r") > -1) lineSep = "\r\n";
+    }());
+
+    // Counts the column offset in a string, taking tabs into account.
+    // Used mostly to find indentation.
+    function countColumn(string, end, tabSize) {
+        if (end == null) {
+            end = string.search(/[^\s\u00a0]/);
+            if (end == -1) end = string.length;
+        }
+        for (var i = 0, n = 0; i < end; ++i) {
+            if (string.charAt(i) == "\t") n += tabSize - (n % tabSize);
+            else ++n;
+        }
+        return n;
+    }
+
+    function computedStyle(elt) {
+        if (elt.currentStyle) return elt.currentStyle;
+        return window.getComputedStyle(elt, null);
+    }
+
+    // Find the position of an element by following the offsetParent chain.
+    // If screen==true, it returns screen (rather than page) coordinates.
+    function eltOffset(node, screen) {
+        var bod = node.ownerDocument.body;
+        var x = 0, y = 0, skipBody = false;
+        for (var n = node; n; n = n.offsetParent) {
+            var ol = n.offsetLeft, ot = n.offsetTop;
+            // Firefox reports weird inverted offsets when the body has a border.
+            if (n == bod) { x += Math.abs(ol); y += Math.abs(ot); }
+            else { x += ol, y += ot; }
+            if (screen && computedStyle(n).position == "fixed")
+                skipBody = true;
+        }
+        var e = screen && !skipBody ? null : bod;
+        for (var n = node.parentNode; n != e; n = n.parentNode)
+            if (n.scrollLeft != null) { x -= n.scrollLeft; y -= n.scrollTop;}
+        return {left: x, top: y};
+    }
+    // Use the faster and saner getBoundingClientRect method when possible.
+    if (document.documentElement.getBoundingClientRect != null) eltOffset = function(node, screen) {
+        // Take the parts of bounding client rect that we are interested in so we are able to edit if need be,
+        // since the returned value cannot be changed externally (they are kept in sync as the element moves within the page)
+        try { var box = node.getBoundingClientRect(); box = { top: box.top, left: box.left }; }
+        catch(e) { box = {top: 0, left: 0}; }
+        if (!screen) {
+            // Get the toplevel scroll, working around browser differences.
+            if (window.pageYOffset == null) {
+                var t = document.documentElement || document.body.parentNode;
+                if (t.scrollTop == null) t = document.body;
+                box.top += t.scrollTop; box.left += t.scrollLeft;
+            } else {
+                box.top += window.pageYOffset; box.left += window.pageXOffset;
+            }
+        }
+        return box;
+    };
+
+    // Get a node's text content.
+    function eltText(node) {
+        return node.textContent || node.innerText || node.nodeValue || "";
+    }
+
+    // Operations on {line, ch} objects.
+    function posEq(a, b) {return a.line == b.line && a.ch == b.ch;}
+    function posLess(a, b) {return a.line < b.line || (a.line == b.line && a.ch < b.ch);}
+    function copyPos(x) {return {line: x.line, ch: x.ch};}
+
+    var escapeElement = document.createElement("pre");
+    function htmlEscape(str) {
+        escapeElement.textContent = str;
+        return escapeElement.innerHTML;
+    }
+    // Recent (late 2011) Opera betas insert bogus newlines at the start
+    // of the textContent, so we strip those.
+    if (htmlEscape("a") == "\na")
+        htmlEscape = function(str) {
+            escapeElement.textContent = str;
+            return escapeElement.innerHTML.slice(1);
+        };
+    // Some IEs don't preserve tabs through innerHTML
+    else if (htmlEscape("\t") != "\t")
+        htmlEscape = function(str) {
+            escapeElement.innerHTML = "";
+            escapeElement.appendChild(document.createTextNode(str));
+            return escapeElement.innerHTML;
+        };
+    CodeMirror.htmlEscape = htmlEscape;
+
+    // Used to position the cursor after an undo/redo by finding the
+    // last edited character.
+    function editEnd(from, to) {
+        if (!to) return from ? from.length : 0;
+        if (!from) return to.length;
+        for (var i = from.length, j = to.length; i >= 0 && j >= 0; --i, --j)
+            if (from.charAt(i) != to.charAt(j)) break;
+        return j + 1;
+    }
+
+    function indexOf(collection, elt) {
+        if (collection.indexOf) return collection.indexOf(elt);
+        for (var i = 0, e = collection.length; i < e; ++i)
+            if (collection[i] == elt) return i;
+        return -1;
+    }
+    function isWordChar(ch) {
+        return /\w/.test(ch) || ch.toUpperCase() != ch.toLowerCase();
+    }
+
+    // See if "".split is the broken IE version, if so, provide an
+    // alternative way to split lines.
+    var splitLines = "\n\nb".split(/\n/).length != 3 ? function(string) {
+        var pos = 0, nl, result = [];
+        while ((nl = string.indexOf("\n", pos)) > -1) {
+            result.push(string.slice(pos, string.charAt(nl-1) == "\r" ? nl - 1 : nl));
+            pos = nl + 1;
+        }
+        result.push(string.slice(pos));
+        return result;
+    } : function(string){return string.split(/\r?\n/);};
+    CodeMirror.splitLines = splitLines;
+
+    var hasSelection = window.getSelection ? function(te) {
+        try { return te.selectionStart != te.selectionEnd; }
+        catch(e) { return false; }
+    } : function(te) {
+        try {var range = te.ownerDocument.selection.createRange();}
+        catch(e) {}
+        if (!range || range.parentElement() != te) return false;
+        return range.compareEndPoints("StartToEnd", range) != 0;
+    };
+
+    CodeMirror.defineMode("null", function() {
+        return {token: function(stream) {stream.skipToEnd();}};
+    });
+    CodeMirror.defineMIME("text/plain", "null");
+
+    var keyNames = {3: "Enter", 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Ctrl", 18: "Alt",
+        19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Space", 33: "PageUp", 34: "PageDown", 35: "End",
+        36: "Home", 37: "Left", 38: "Up", 39: "Right", 40: "Down", 44: "PrintScrn", 45: "Insert",
+        46: "Delete", 59: ";", 91: "Mod", 92: "Mod", 93: "Mod", 186: ";", 187: "=", 188: ",",
+        189: "-", 190: ".", 191: "/", 192: "`", 219: "[", 220: "\\", 221: "]", 222: "'", 63276: "PageUp",
+        63277: "PageDown", 63275: "End", 63273: "Home", 63234: "Left", 63232: "Up", 63235: "Right",
+        63233: "Down", 63302: "Insert", 63272: "Delete"};
+    CodeMirror.keyNames = keyNames;
+    (function() {
+        // Number keys
+        for (var i = 0; i < 10; i++) keyNames[i + 48] = String(i);
+        // Alphabetic keys
+        for (var i = 65; i <= 90; i++) keyNames[i] = String.fromCharCode(i);
+        // Function keys
+        for (var i = 1; i <= 12; i++) keyNames[i + 111] = keyNames[i + 63235] = "F" + i;
+    })();
+
+    return CodeMirror;
+})();
+CodeMirror.defineMode("xml", function(config, parserConfig) {
+    var indentUnit = config.indentUnit;
+    var Kludges = parserConfig.htmlMode ? {
+        autoSelfClosers: {"br": true, "img": true, "hr": true, "link": true, "input": true,
+            "meta": true, "col": true, "frame": true, "base": true, "area": true},
+        doNotIndent: {"pre": true},
+        allowUnquoted: true
+    } : {autoSelfClosers: {}, doNotIndent: {}, allowUnquoted: false};
+    var alignCDATA = parserConfig.alignCDATA;
+
+    // Return variables for tokenizers
+    var tagName, type;
+
+    function inText(stream, state) {
+        function chain(parser) {
+            state.tokenize = parser;
+            return parser(stream, state);
+        }
+
+        var ch = stream.next();
+        if (ch == "<") {
+            if (stream.eat("!")) {
+                if (stream.eat("[")) {
+                    if (stream.match("CDATA[")) return chain(inBlock("atom", "]]>"));
+                    else return null;
+                }
+                else if (stream.match("--")) return chain(inBlock("comment", "-->"));
+                else if (stream.match("DOCTYPE", true, true)) {
+                    stream.eatWhile(/[\w\._\-]/);
+                    return chain(doctype(1));
+                }
+                else return null;
+            }
+            else if (stream.eat("?")) {
+                stream.eatWhile(/[\w\._\-]/);
+                state.tokenize = inBlock("meta", "?>");
+                return "meta";
+            }
+            else {
+                type = stream.eat("/") ? "closeTag" : "openTag";
+                stream.eatSpace();
+                tagName = "";
+                var c;
+                while ((c = stream.eat(/[^\s\u00a0=<>\"\'\/?]/))) tagName += c;
+                state.tokenize = inTag;
+                return "tag";
+            }
+        }
+        else if (ch == "&") {
+            stream.eatWhile(/[^;]/);
+            stream.eat(";");
+            return "atom";
+        }
+        else {
+            stream.eatWhile(/[^&<]/);
+            return null;
+        }
+    }
+
+    function inTag(stream, state) {
+        var ch = stream.next();
+        if (ch == ">" || (ch == "/" && stream.eat(">"))) {
+            state.tokenize = inText;
+            type = ch == ">" ? "endTag" : "selfcloseTag";
+            return "tag";
+        }
+        else if (ch == "=") {
+            type = "equals";
+            return null;
+        }
+        else if (/[\'\"]/.test(ch)) {
+            state.tokenize = inAttribute(ch);
+            return state.tokenize(stream, state);
+        }
+        else {
+            stream.eatWhile(/[^\s\u00a0=<>\"\'\/?]/);
+            return "word";
+        }
+    }
+
+    function inAttribute(quote) {
+        return function(stream, state) {
+            while (!stream.eol()) {
+                if (stream.next() == quote) {
+                    state.tokenize = inTag;
+                    break;
+                }
+            }
+            return "string";
+        };
+    }
+
+    function inBlock(style, terminator) {
+        return function(stream, state) {
+            while (!stream.eol()) {
+                if (stream.match(terminator)) {
+                    state.tokenize = inText;
+                    break;
+                }
+                stream.next();
+            }
+            return style;
+        };
+    }
+    function doctype(depth) {
+        return function(stream, state) {
+            var ch;
+            while ((ch = stream.next()) != null) {
+                if (ch == "<") {
+                    state.tokenize = doctype(depth + 1);
+                    return state.tokenize(stream, state);
+                } else if (ch == ">") {
+                    if (depth == 1) {
+                        state.tokenize = inText;
+                        break;
+                    } else {
+                        state.tokenize = doctype(depth - 1);
+                        return state.tokenize(stream, state);
+                    }
+                }
+            }
+            return "meta";
+        };
+    }
+
+    var curState, setStyle;
+    function pass() {
+        for (var i = arguments.length - 1; i >= 0; i--) curState.cc.push(arguments[i]);
+    }
+    function cont() {
+        pass.apply(null, arguments);
+        return true;
+    }
+
+    function pushContext(tagName, startOfLine) {
+        var noIndent = Kludges.doNotIndent.hasOwnProperty(tagName) || (curState.context && curState.context.noIndent);
+        curState.context = {
+            prev: curState.context,
+            tagName: tagName,
+            indent: curState.indented,
+            startOfLine: startOfLine,
+            noIndent: noIndent
+        };
+    }
+    function popContext() {
+        if (curState.context) curState.context = curState.context.prev;
+    }
+
+    function element(type) {
+        if (type == "openTag") {
+            curState.tagName = tagName;
+            return cont(attributes, endtag(curState.startOfLine));
+        } else if (type == "closeTag") {
+            var err = false;
+            if (curState.context) {
+                err = curState.context.tagName != tagName;
+            } else {
+                err = true;
+            }
+            if (err) setStyle = "error";
+            return cont(endclosetag(err));
+        }
+        return cont();
+    }
+    function endtag(startOfLine) {
+        return function(type) {
+            if (type == "selfcloseTag" ||
+                (type == "endTag" && Kludges.autoSelfClosers.hasOwnProperty(curState.tagName.toLowerCase())))
+                return cont();
+            if (type == "endTag") {pushContext(curState.tagName, startOfLine); return cont();}
+            return cont();
+        };
+    }
+    function endclosetag(err) {
+        return function(type) {
+            if (err) setStyle = "error";
+            if (type == "endTag") { popContext(); return cont(); }
+            setStyle = "error";
+            return cont(arguments.callee);
+        }
+    }
+
+    function attributes(type) {
+        if (type == "word") {setStyle = "attribute"; return cont(attributes);}
+        if (type == "equals") return cont(attvalue, attributes);
+        if (type == "string") {setStyle = "error"; return cont(attributes);}
+        return pass();
+    }
+    function attvalue(type) {
+        if (type == "word" && Kludges.allowUnquoted) {setStyle = "string"; return cont();}
+        if (type == "string") return cont(attvaluemaybe);
+        return pass();
+    }
+    function attvaluemaybe(type) {
+        if (type == "string") return cont(attvaluemaybe);
+        else return pass();
+    }
+
+    return {
+        startState: function() {
+            return {tokenize: inText, cc: [], indented: 0, startOfLine: true, tagName: null, context: null};
+        },
+
+        token: function(stream, state) {
+            if (stream.sol()) {
+                state.startOfLine = true;
+                state.indented = stream.indentation();
+            }
+            if (stream.eatSpace()) return null;
+
+            setStyle = type = tagName = null;
+            var style = state.tokenize(stream, state);
+            state.type = type;
+            if ((style || type) && style != "comment") {
+                curState = state;
+                while (true) {
+                    var comb = state.cc.pop() || element;
+                    if (comb(type || style)) break;
+                }
+            }
+            state.startOfLine = false;
+            return setStyle || style;
+        },
+
+        indent: function(state, textAfter, fullLine) {
+            var context = state.context;
+            if ((state.tokenize != inTag && state.tokenize != inText) ||
+                context && context.noIndent)
+                return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
+            if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
+            if (context && /^<\//.test(textAfter))
+                context = context.prev;
+            while (context && !context.startOfLine)
+                context = context.prev;
+            if (context) return context.indent + indentUnit;
+            else return 0;
+        },
+
+        compareStates: function(a, b) {
+            if (a.indented != b.indented || a.tokenize != b.tokenize) return false;
+            for (var ca = a.context, cb = b.context; ; ca = ca.prev, cb = cb.prev) {
+                if (!ca || !cb) return ca == cb;
+                if (ca.tagName != cb.tagName) return false;
+            }
+        },
+
+        electricChars: "/"
+    };
+});
+
+CodeMirror.defineMIME("application/xml", "xml");
+CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
+CodeMirror.defineMode("javascript", function(config, parserConfig) {
+    var indentUnit = config.indentUnit;
+    var jsonMode = parserConfig.json;
+
+    // Tokenizer
+
+    var keywords = function(){
+        function kw(type) {return {type: type, style: "keyword"};}
+        var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
+        var operator = kw("operator"), atom = {type: "atom", style: "atom"};
+        return {
+            "if": A, "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
+            "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
+            "var": kw("var"), "const": kw("var"), "let": kw("var"),
+            "function": kw("function"), "catch": kw("catch"),
+            "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
+            "in": operator, "typeof": operator, "instanceof": operator,
+            "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom
+        };
+    }();
+
+    var isOperatorChar = /[+\-*&%=<>!?|]/;
+
+    function chain(stream, state, f) {
+        state.tokenize = f;
+        return f(stream, state);
+    }
+
+    function nextUntilUnescaped(stream, end) {
+        var escaped = false, next;
+        while ((next = stream.next()) != null) {
+            if (next == end && !escaped)
+                return false;
+            escaped = !escaped && next == "\\";
+        }
+        return escaped;
+    }
+
+    // Used as scratch variables to communicate multiple values without
+    // consing up tons of objects.
+    var type, content;
+    function ret(tp, style, cont) {
+        type = tp; content = cont;
+        return style;
+    }
+
+    function jsTokenBase(stream, state) {
+        var ch = stream.next();
+        if (ch == '"' || ch == "'")
+            return chain(stream, state, jsTokenString(ch));
+        else if (/[\[\]{}\(\),;\:\.]/.test(ch))
+            return ret(ch);
+        else if (ch == "0" && stream.eat(/x/i)) {
+            stream.eatWhile(/[\da-f]/i);
+            return ret("number", "number");
+        }
+        else if (/\d/.test(ch)) {
+            stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
+            return ret("number", "number");
+        }
+        else if (ch == "/") {
+            if (stream.eat("*")) {
+                return chain(stream, state, jsTokenComment);
+            }
+            else if (stream.eat("/")) {
+                stream.skipToEnd();
+                return ret("comment", "comment");
+            }
+            else if (state.reAllowed) {
+                nextUntilUnescaped(stream, "/");
+                stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
+                return ret("regexp", "string");
+            }
+            else {
+                stream.eatWhile(isOperatorChar);
+                return ret("operator", null, stream.current());
+            }
+        }
+        else if (ch == "#") {
+            stream.skipToEnd();
+            return ret("error", "error");
+        }
+        else if (isOperatorChar.test(ch)) {
+            stream.eatWhile(isOperatorChar);
+            return ret("operator", null, stream.current());
+        }
+        else {
+            stream.eatWhile(/[\w\$_]/);
+            var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
+            return (known && state.kwAllowed) ? ret(known.type, known.style, word) :
+                ret("variable", "variable", word);
+        }
+    }
+
+    function jsTokenString(quote) {
+        return function(stream, state) {
+            if (!nextUntilUnescaped(stream, quote))
+                state.tokenize = jsTokenBase;
+            return ret("string", "string");
+        };
+    }
+
+    function jsTokenComment(stream, state) {
+        var maybeEnd = false, ch;
+        while (ch = stream.next()) {
+            if (ch == "/" && maybeEnd) {
+                state.tokenize = jsTokenBase;
+                break;
+            }
+            maybeEnd = (ch == "*");
+        }
+        return ret("comment", "comment");
+    }
+
+    // Parser
+
+    var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true};
+
+    function JSLexical(indented, column, type, align, prev, info) {
+        this.indented = indented;
+        this.column = column;
+        this.type = type;
+        this.prev = prev;
+        this.info = info;
+        if (align != null) this.align = align;
+    }
+
+    function inScope(state, varname) {
+        for (var v = state.localVars; v; v = v.next)
+            if (v.name == varname) return true;
+    }
+
+    function parseJS(state, style, type, content, stream) {
+        var cc = state.cc;
+        // Communicate our context to the combinators.
+        // (Less wasteful than consing up a hundred closures on every call.)
+        cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc;
+
+        if (!state.lexical.hasOwnProperty("align"))
+            state.lexical.align = true;
+
+        while(true) {
+            var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
+            if (combinator(type, content)) {
+                while(cc.length && cc[cc.length - 1].lex)
+                    cc.pop()();
+                if (cx.marked) return cx.marked;
+                if (type == "variable" && inScope(state, content)) return "variable-2";
+                return style;
+            }
+        }
+    }
+
+    // Combinator utils
+
+    var cx = {state: null, column: null, marked: null, cc: null};
+    function pass() {
+        for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
+    }
+    function cont() {
+        pass.apply(null, arguments);
+        return true;
+    }
+    function register(varname) {
+        var state = cx.state;
+        if (state.context) {
+            cx.marked = "def";
+            for (var v = state.localVars; v; v = v.next)
+                if (v.name == varname) return;
+            state.localVars = {name: varname, next: state.localVars};
+        }
+    }
+
+    // Combinators
+
+    var defaultVars = {name: "this", next: {name: "arguments"}};
+    function pushcontext() {
+        if (!cx.state.context) cx.state.localVars = defaultVars;
+        cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
+    }
+    function popcontext() {
+        cx.state.localVars = cx.state.context.vars;
+        cx.state.context = cx.state.context.prev;
+    }
+    function pushlex(type, info) {
+        var result = function() {
+            var state = cx.state;
+            state.lexical = new JSLexical(state.indented, cx.stream.column(), type, null, state.lexical, info)
+        };
+        result.lex = true;
+        return result;
+    }
+    function poplex() {
+        var state = cx.state;
+        if (state.lexical.prev) {
+            if (state.lexical.type == ")")
+                state.indented = state.lexical.indented;
+            state.lexical = state.lexical.prev;
+        }
+    }
+    poplex.lex = true;
+
+    function expect(wanted) {
+        return function expecting(type) {
+            if (type == wanted) return cont();
+            else if (wanted == ";") return pass();
+            else return cont(arguments.callee);
+        };
+    }
+
+    function statement(type) {
+        if (type == "var") return cont(pushlex("vardef"), vardef1, expect(";"), poplex);
+        if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
+        if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
+        if (type == "{") return cont(pushlex("}"), block, poplex);
+        if (type == ";") return cont();
+        if (type == "function") return cont(functiondef);
+        if (type == "for") return cont(pushlex("form"), expect("("), pushlex(")"), forspec1, expect(")"),
+            poplex, statement, poplex);
+        if (type == "variable") return cont(pushlex("stat"), maybelabel);
+        if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
+            block, poplex, poplex);
+        if (type == "case") return cont(expression, expect(":"));
+        if (type == "default") return cont(expect(":"));
+        if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
+            statement, poplex, popcontext);
+        return pass(pushlex("stat"), expression, expect(";"), poplex);
+    }
+    function expression(type) {
+        if (atomicTypes.hasOwnProperty(type)) return cont(maybeoperator);
+        if (type == "function") return cont(functiondef);
+        if (type == "keyword c") return cont(maybeexpression);
+        if (type == "(") return cont(pushlex(")"), expression, expect(")"), poplex, maybeoperator);
+        if (type == "operator") return cont(expression);
+        if (type == "[") return cont(pushlex("]"), commasep(expression, "]"), poplex, maybeoperator);
+        if (type == "{") return cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeoperator);
+        return cont();
+    }
+    function maybeexpression(type) {
+        if (type.match(/[;\}\)\],]/)) return pass();
+        return pass(expression);
+    }
+
+    function maybeoperator(type, value) {
+        if (type == "operator" && /\+\+|--/.test(value)) return cont(maybeoperator);
+        if (type == "operator") return cont(expression);
+        if (type == ";") return;
+        if (type == "(") return cont(pushlex(")"), commasep(expression, ")"), poplex, maybeoperator);
+        if (type == ".") return cont(property, maybeoperator);
+        if (type == "[") return cont(pushlex("]"), expression, expect("]"), poplex, maybeoperator);
+    }
+    function maybelabel(type) {
+        if (type == ":") return cont(poplex, statement);
+        return pass(maybeoperator, expect(";"), poplex);
+    }
+    function property(type) {
+        if (type == "variable") {cx.marked = "property"; return cont();}
+    }
+    function objprop(type) {
+        if (type == "variable") cx.marked = "property";
+        if (atomicTypes.hasOwnProperty(type)) return cont(expect(":"), expression);
+    }
+    function commasep(what, end) {
+        function proceed(type) {
+            if (type == ",") return cont(what, proceed);
+            if (type == end) return cont();
+            return cont(expect(end));
+        }
+        return function commaSeparated(type) {
+            if (type == end) return cont();
+            else return pass(what, proceed);
+        };
+    }
+    function block(type) {
+        if (type == "}") return cont();
+        return pass(statement, block);
+    }
+    function vardef1(type, value) {
+        if (type == "variable"){register(value); return cont(vardef2);}
+        return cont();
+    }
+    function vardef2(type, value) {
+        if (value == "=") return cont(expression, vardef2);
+        if (type == ",") return cont(vardef1);
+    }
+    function forspec1(type) {
+        if (type == "var") return cont(vardef1, forspec2);
+        if (type == ";") return pass(forspec2);
+        if (type == "variable") return cont(formaybein);
+        return pass(forspec2);
+    }
+    function formaybein(type, value) {
+        if (value == "in") return cont(expression);
+        return cont(maybeoperator, forspec2);
+    }
+    function forspec2(type, value) {
+        if (type == ";") return cont(forspec3);
+        if (value == "in") return cont(expression);
+        return cont(expression, expect(";"), forspec3);
+    }
+    function forspec3(type) {
+        if (type != ")") cont(expression);
+    }
+    function functiondef(type, value) {
+        if (type == "variable") {register(value); return cont(functiondef);}
+        if (type == "(") return cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
+    }
+    function funarg(type, value) {
+        if (type == "variable") {register(value); return cont();}
+    }
+
+    // Interface
+
+    return {
+        startState: function(basecolumn) {
+            return {
+                tokenize: jsTokenBase,
+                reAllowed: true,
+                kwAllowed: true,
+                cc: [],
+                lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
+                localVars: null,
+                context: null,
+                indented: 0
+            };
+        },
+
+        token: function(stream, state) {
+            if (stream.sol()) {
+                if (!state.lexical.hasOwnProperty("align"))
+                    state.lexical.align = false;
+                state.indented = stream.indentation();
+            }
+            if (stream.eatSpace()) return null;
+            var style = state.tokenize(stream, state);
+            if (type == "comment") return style;
+            state.reAllowed = type == "operator" || type == "keyword c" || type.match(/^[\[{}\(,;:]$/);
+            state.kwAllowed = type != '.';
+            return parseJS(state, style, type, content, stream);
+        },
+
+        indent: function(state, textAfter) {
+            if (state.tokenize != jsTokenBase) return 0;
+            var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical,
+                type = lexical.type, closing = firstChar == type;
+            if (type == "vardef") return lexical.indented + 4;
+            else if (type == "form" && firstChar == "{") return lexical.indented;
+            else if (type == "stat" || type == "form") return lexical.indented + indentUnit;
+            else if (lexical.info == "switch" && !closing)
+                return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
+            else if (lexical.align) return lexical.column + (closing ? 0 : 1);
+            else return lexical.indented + (closing ? 0 : indentUnit);
+        },
+
+        electricChars: ":{}"
+    };
+});
+
+CodeMirror.defineMIME("text/javascript", "javascript");
+CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
+
+CodeMirror.defineMode("css", function(config) {
+    var indentUnit = config.indentUnit, type;
+    function ret(style, tp) {type = tp; return style;}
+
+    function tokenBase(stream, state) {
+        var ch = stream.next();
+        if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("meta", stream.current());}
+        else if (ch == "/" && stream.eat("*")) {
+            state.tokenize = tokenCComment;
+            return tokenCComment(stream, state);
+        }
+        else if (ch == "<" && stream.eat("!")) {
+            state.tokenize = tokenSGMLComment;
+            return tokenSGMLComment(stream, state);
+        }
+        else if (ch == "=") ret(null, "compare");
+        else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare");
+        else if (ch == "\"" || ch == "'") {
+            state.tokenize = tokenString(ch);
+            return state.tokenize(stream, state);
+        }
+        else if (ch == "#") {
+            stream.eatWhile(/[\w\\\-]/);
+            return ret("atom", "hash");
+        }
+        else if (ch == "!") {
+            stream.match(/^\s*\w*/);
+            return ret("keyword", "important");
+        }
+        else if (/\d/.test(ch)) {
+            stream.eatWhile(/[\w.%]/);
+            return ret("number", "unit");
+        }
+        else if (/[,.+>*\/]/.test(ch)) {
+            return ret(null, "select-op");
+        }
+        else if (/[;{}:\[\]]/.test(ch)) {
+            return ret(null, ch);
+        }
+        else {
+            stream.eatWhile(/[\w\\\-]/);
+            return ret("variable", "variable");
+        }
+    }
+
+    function tokenCComment(stream, state) {
+        var maybeEnd = false, ch;
+        while ((ch = stream.next()) != null) {
+            if (maybeEnd && ch == "/") {
+                state.tokenize = tokenBase;
+                break;
+            }
+            maybeEnd = (ch == "*");
+        }
+        return ret("comment", "comment");
+    }
+
+    function tokenSGMLComment(stream, state) {
+        var dashes = 0, ch;
+        while ((ch = stream.next()) != null) {
+            if (dashes >= 2 && ch == ">") {
+                state.tokenize = tokenBase;
+                break;
+            }
+            dashes = (ch == "-") ? dashes + 1 : 0;
+        }
+        return ret("comment", "comment");
+    }
+
+    function tokenString(quote) {
+        return function(stream, state) {
+            var escaped = false, ch;
+            while ((ch = stream.next()) != null) {
+                if (ch == quote && !escaped)
+                    break;
+                escaped = !escaped && ch == "\\";
+            }
+            if (!escaped) state.tokenize = tokenBase;
+            return ret("string", "string");
+        };
+    }
+
+    return {
+        startState: function(base) {
+            return {tokenize: tokenBase,
+                baseIndent: base || 0,
+                stack: []};
+        },
+
+        token: function(stream, state) {
+            if (stream.eatSpace()) return null;
+            var style = state.tokenize(stream, state);
+
+            var context = state.stack[state.stack.length-1];
+            if (type == "hash" && context == "rule") style = "atom";
+            else if (style == "variable") {
+                if (context == "rule") style = "number";
+                else if (!context || context == "@media{") style = "tag";
+            }
+
+            if (context == "rule" && /^[\{\};]$/.test(type))
+                state.stack.pop();
+            if (type == "{") {
+                if (context == "@media") state.stack[state.stack.length-1] = "@media{";
+                else state.stack.push("{");
+            }
+            else if (type == "}") state.stack.pop();
+            else if (type == "@media") state.stack.push("@media");
+            else if (context == "{" && type != "comment") state.stack.push("rule");
+            return style;
+        },
+
+        indent: function(state, textAfter) {
+            var n = state.stack.length;
+            if (/^\}/.test(textAfter))
+                n -= state.stack[state.stack.length-1] == "rule" ? 2 : 1;
+            return state.baseIndent + n * indentUnit;
+        },
+
+        electricChars: "}"
+    };
+});
+
+CodeMirror.defineMIME("text/css", "css");
+CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
+    var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
+    var jsMode = CodeMirror.getMode(config, "javascript");
+    var cssMode = CodeMirror.getMode(config, "css");
+
+    function html(stream, state) {
+        var style = htmlMode.token(stream, state.htmlState);
+        if (style == "tag" && stream.current() == ">" && state.htmlState.context) {
+            if (/^script$/i.test(state.htmlState.context.tagName)) {
+                state.token = javascript;
+                state.localState = jsMode.startState(htmlMode.indent(state.htmlState, ""));
+                state.mode = "javascript";
+            }
+            else if (/^style$/i.test(state.htmlState.context.tagName)) {
+                state.token = css;
+                state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
+                state.mode = "css";
+            }
+        }
+        return style;
+    }
+    function maybeBackup(stream, pat, style) {
+        var cur = stream.current();
+        var close = cur.search(pat);
+        if (close > -1) stream.backUp(cur.length - close);
+        return style;
+    }
+    function javascript(stream, state) {
+        if (stream.match(/^<\/\s*script\s*>/i, false)) {
+            state.token = html;
+            state.curState = null;
+            state.mode = "html";
+            return html(stream, state);
+        }
+        return maybeBackup(stream, /<\/\s*script\s*>/,
+            jsMode.token(stream, state.localState));
+    }
+    function css(stream, state) {
+        if (stream.match(/^<\/\s*style\s*>/i, false)) {
+            state.token = html;
+            state.localState = null;
+            state.mode = "html";
+            return html(stream, state);
+        }
+        return maybeBackup(stream, /<\/\s*style\s*>/,
+            cssMode.token(stream, state.localState));
+    }
+
+    return {
+        startState: function() {
+            var state = htmlMode.startState();
+            return {token: html, localState: null, mode: "html", htmlState: state};
+        },
+
+        copyState: function(state) {
+            if (state.localState)
+                var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState);
+            return {token: state.token, localState: local, mode: state.mode,
+                htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+        },
+
+        token: function(stream, state) {
+            return state.token(stream, state);
+        },
+
+        indent: function(state, textAfter) {
+            if (state.token == html || /^\s*<\//.test(textAfter))
+                return htmlMode.indent(state.htmlState, textAfter);
+            else if (state.token == javascript)
+                return jsMode.indent(state.localState, textAfter);
+            else
+                return cssMode.indent(state.localState, textAfter);
+        },
+
+        compareStates: function(a, b) {
+            return htmlMode.compareStates(a.htmlState, b.htmlState);
+        },
+
+        electricChars: "/{}:"
+    }
+});
+
+CodeMirror.defineMIME("text/html", "htmlmixed");
diff --git a/public/js/ueditor/third-party/jquery-1.10.2.js b/public/js/ueditor/third-party/jquery-1.10.2.js
new file mode 100644
index 0000000..da41706
--- /dev/null
+++ b/public/js/ueditor/third-party/jquery-1.10.2.js
@@ -0,0 +1,6 @@
+/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
+//@ sourceMappingURL=jquery-1.10.2.min.map
+*/
+(function(e,t){var n,r,i=typeof t,o=e.location,a=e.document,s=a.documentElement,l=e.jQuery,u=e.$,c={},p=[],f="1.10.2",d=p.concat,h=p.push,g=p.slice,m=p.indexOf,y=c.toString,v=c.hasOwnProperty,b=f.trim,x=function(e,t){return new x.fn.init(e,t,r)},w=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,T=/\S+/g,C=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,N=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,k=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,E=/^[\],:{}\s]*$/,S=/(?:^|:|,)(?:\s*\[)+/g,A=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,j=/"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,D=/^-ms-/,L=/-([\da-z])/gi,H=function(e,t){return t.toUpperCase()},q=function(e){(a.addEventListener||"load"===e.type||"complete"===a.readyState)&&(_(),x.ready())},_=function(){a.addEventListener?(a.removeEventListener("DOMContentLoaded",q,!1),e.removeEventListener("load",q,!1)):(a.detachEvent("onreadystatechange",q),e.detachEvent("onload",q))};x.fn=x.prototype={jquery:f,constructor:x,init:function(e,n,r){var i,o;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof x?n[0]:n,x.merge(this,x.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:a,!0)),k.test(i[1])&&x.isPlainObject(n))for(i in n)x.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(o=a.getElementById(i[2]),o&&o.parentNode){if(o.id!==i[2])return r.find(e);this.length=1,this[0]=o}return this.context=a,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):x.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),x.makeArray(e,this))},selector:"",length:0,toArray:function(){return g.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=x.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return x.each(this,e,t)},ready:function(e){return x.ready.promise().done(e),this},slice:function(){return this.pushStack(g.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(x.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:h,sort:[].sort,splice:[].splice},x.fn.init.prototype=x.fn,x.extend=x.fn.extend=function(){var e,n,r,i,o,a,s=arguments[0]||{},l=1,u=arguments.length,c=!1;for("boolean"==typeof s&&(c=s,s=arguments[1]||{},l=2),"object"==typeof s||x.isFunction(s)||(s={}),u===l&&(s=this,--l);u>l;l++)if(null!=(o=arguments[l]))for(i in o)e=s[i],r=o[i],s!==r&&(c&&r&&(x.isPlainObject(r)||(n=x.isArray(r)))?(n?(n=!1,a=e&&x.isArray(e)?e:[]):a=e&&x.isPlainObject(e)?e:{},s[i]=x.extend(c,a,r)):r!==t&&(s[i]=r));return s},x.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),noConflict:function(t){return e.$===x&&(e.$=u),t&&e.jQuery===x&&(e.jQuery=l),x},isReady:!1,readyWait:1,holdReady:function(e){e?x.readyWait++:x.ready(!0)},ready:function(e){if(e===!0?!--x.readyWait:!x.isReady){if(!a.body)return setTimeout(x.ready);x.isReady=!0,e!==!0&&--x.readyWait>0||(n.resolveWith(a,[x]),x.fn.trigger&&x(a).trigger("ready").off("ready"))}},isFunction:function(e){return"function"===x.type(e)},isArray:Array.isArray||function(e){return"array"===x.type(e)},isWindow:function(e){return null!=e&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?c[y.call(e)]||"object":typeof e},isPlainObject:function(e){var n;if(!e||"object"!==x.type(e)||e.nodeType||x.isWindow(e))return!1;try{if(e.constructor&&!v.call(e,"constructor")&&!v.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(r){return!1}if(x.support.ownLast)for(n in e)return v.call(e,n);for(n in e);return n===t||v.call(e,n)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||a;var r=k.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=x.buildFragment([e],t,i),i&&x(i).remove(),x.merge([],r.childNodes))},parseJSON:function(n){return e.JSON&&e.JSON.parse?e.JSON.parse(n):null===n?n:"string"==typeof n&&(n=x.trim(n),n&&E.test(n.replace(A,"@").replace(j,"]").replace(S,"")))?Function("return "+n)():(x.error("Invalid JSON: "+n),t)},parseXML:function(n){var r,i;if(!n||"string"!=typeof n)return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(o){r=t}return r&&r.documentElement&&!r.getElementsByTagName("parsererror").length||x.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&x.trim(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t)},camelCase:function(e){return e.replace(D,"ms-").replace(L,H)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,t,n){var r,i=0,o=e.length,a=M(e);if(n){if(a){for(;o>i;i++)if(r=t.apply(e[i],n),r===!1)break}else for(i in e)if(r=t.apply(e[i],n),r===!1)break}else if(a){for(;o>i;i++)if(r=t.call(e[i],i,e[i]),r===!1)break}else for(i in e)if(r=t.call(e[i],i,e[i]),r===!1)break;return e},trim:b&&!b.call("\ufeff\u00a0")?function(e){return null==e?"":b.call(e)}:function(e){return null==e?"":(e+"").replace(C,"")},makeArray:function(e,t){var n=t||[];return null!=e&&(M(Object(e))?x.merge(n,"string"==typeof e?[e]:e):h.call(n,e)),n},inArray:function(e,t,n){var r;if(t){if(m)return m.call(t,e,n);for(r=t.length,n=n?0>n?Math.max(0,r+n):n:0;r>n;n++)if(n in t&&t[n]===e)return n}return-1},merge:function(e,n){var r=n.length,i=e.length,o=0;if("number"==typeof r)for(;r>o;o++)e[i++]=n[o];else while(n[o]!==t)e[i++]=n[o++];return e.length=i,e},grep:function(e,t,n){var r,i=[],o=0,a=e.length;for(n=!!n;a>o;o++)r=!!t(e[o],o),n!==r&&i.push(e[o]);return i},map:function(e,t,n){var r,i=0,o=e.length,a=M(e),s=[];if(a)for(;o>i;i++)r=t(e[i],i,n),null!=r&&(s[s.length]=r);else for(i in e)r=t(e[i],i,n),null!=r&&(s[s.length]=r);return d.apply([],s)},guid:1,proxy:function(e,n){var r,i,o;return"string"==typeof n&&(o=e[n],n=e,e=o),x.isFunction(e)?(r=g.call(arguments,2),i=function(){return e.apply(n||this,r.concat(g.call(arguments)))},i.guid=e.guid=e.guid||x.guid++,i):t},access:function(e,n,r,i,o,a,s){var l=0,u=e.length,c=null==r;if("object"===x.type(r)){o=!0;for(l in r)x.access(e,n,l,r[l],!0,a,s)}else if(i!==t&&(o=!0,x.isFunction(i)||(s=!0),c&&(s?(n.call(e,i),n=null):(c=n,n=function(e,t,n){return c.call(x(e),n)})),n))for(;u>l;l++)n(e[l],r,s?i:i.call(e[l],l,n(e[l],r)));return o?e:c?n.call(e):u?n(e[0],r):a},now:function(){return(new Date).getTime()},swap:function(e,t,n,r){var i,o,a={};for(o in t)a[o]=e.style[o],e.style[o]=t[o];i=n.apply(e,r||[]);for(o in t)e.style[o]=a[o];return i}}),x.ready.promise=function(t){if(!n)if(n=x.Deferred(),"complete"===a.readyState)setTimeout(x.ready);else if(a.addEventListener)a.addEventListener("DOMContentLoaded",q,!1),e.addEventListener("load",q,!1);else{a.attachEvent("onreadystatechange",q),e.attachEvent("onload",q);var r=!1;try{r=null==e.frameElement&&a.documentElement}catch(i){}r&&r.doScroll&&function o(){if(!x.isReady){try{r.doScroll("left")}catch(e){return setTimeout(o,50)}_(),x.ready()}}()}return n.promise(t)},x.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(e,t){c["[object "+t+"]"]=t.toLowerCase()});function M(e){var t=e.length,n=x.type(e);return x.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}r=x(a),function(e,t){var n,r,i,o,a,s,l,u,c,p,f,d,h,g,m,y,v,b="sizzle"+-new Date,w=e.document,T=0,C=0,N=st(),k=st(),E=st(),S=!1,A=function(e,t){return e===t?(S=!0,0):0},j=typeof t,D=1<<31,L={}.hasOwnProperty,H=[],q=H.pop,_=H.push,M=H.push,O=H.slice,F=H.indexOf||function(e){var t=0,n=this.length;for(;n>t;t++)if(this[t]===e)return t;return-1},B="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",P="[\\x20\\t\\r\\n\\f]",R="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",W=R.replace("w","w#"),$="\\["+P+"*("+R+")"+P+"*(?:([*^$|!~]?=)"+P+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+W+")|)|)"+P+"*\\]",I=":("+R+")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|"+$.replace(3,8)+")*)|.*)\\)|)",z=RegExp("^"+P+"+|((?:^|[^\\\\])(?:\\\\.)*)"+P+"+$","g"),X=RegExp("^"+P+"*,"+P+"*"),U=RegExp("^"+P+"*([>+~]|"+P+")"+P+"*"),V=RegExp(P+"*[+~]"),Y=RegExp("="+P+"*([^\\]'\"]*)"+P+"*\\]","g"),J=RegExp(I),G=RegExp("^"+W+"$"),Q={ID:RegExp("^#("+R+")"),CLASS:RegExp("^\\.("+R+")"),TAG:RegExp("^("+R.replace("w","w*")+")"),ATTR:RegExp("^"+$),PSEUDO:RegExp("^"+I),CHILD:RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+P+"*(even|odd|(([+-]|)(\\d*)n|)"+P+"*(?:([+-]|)"+P+"*(\\d+)|))"+P+"*\\)|)","i"),bool:RegExp("^(?:"+B+")$","i"),needsContext:RegExp("^"+P+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+P+"*((?:-\\d)?\\d*)"+P+"*\\)|)(?=[^-]|$)","i")},K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,et=/^(?:input|select|textarea|button)$/i,tt=/^h\d$/i,nt=/'|\\/g,rt=RegExp("\\\\([\\da-f]{1,6}"+P+"?|("+P+")|.)","ig"),it=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:0>r?String.fromCharCode(r+65536):String.fromCharCode(55296|r>>10,56320|1023&r)};try{M.apply(H=O.call(w.childNodes),w.childNodes),H[w.childNodes.length].nodeType}catch(ot){M={apply:H.length?function(e,t){_.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function at(e,t,n,i){var o,a,s,l,u,c,d,m,y,x;if((t?t.ownerDocument||t:w)!==f&&p(t),t=t||f,n=n||[],!e||"string"!=typeof e)return n;if(1!==(l=t.nodeType)&&9!==l)return[];if(h&&!i){if(o=Z.exec(e))if(s=o[1]){if(9===l){if(a=t.getElementById(s),!a||!a.parentNode)return n;if(a.id===s)return n.push(a),n}else if(t.ownerDocument&&(a=t.ownerDocument.getElementById(s))&&v(t,a)&&a.id===s)return n.push(a),n}else{if(o[2])return M.apply(n,t.getElementsByTagName(e)),n;if((s=o[3])&&r.getElementsByClassName&&t.getElementsByClassName)return M.apply(n,t.getElementsByClassName(s)),n}if(r.qsa&&(!g||!g.test(e))){if(m=d=b,y=t,x=9===l&&e,1===l&&"object"!==t.nodeName.toLowerCase()){c=mt(e),(d=t.getAttribute("id"))?m=d.replace(nt,"\\$&"):t.setAttribute("id",m),m="[id='"+m+"'] ",u=c.length;while(u--)c[u]=m+yt(c[u]);y=V.test(e)&&t.parentNode||t,x=c.join(",")}if(x)try{return M.apply(n,y.querySelectorAll(x)),n}catch(T){}finally{d||t.removeAttribute("id")}}}return kt(e.replace(z,"$1"),t,n,i)}function st(){var e=[];function t(n,r){return e.push(n+=" ")>o.cacheLength&&delete t[e.shift()],t[n]=r}return t}function lt(e){return e[b]=!0,e}function ut(e){var t=f.createElement("div");try{return!!e(t)}catch(n){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function ct(e,t){var n=e.split("|"),r=e.length;while(r--)o.attrHandle[n[r]]=t}function pt(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&(~t.sourceIndex||D)-(~e.sourceIndex||D);if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function ft(e){return function(t){var n=t.nodeName.toLowerCase();return"input"===n&&t.type===e}}function dt(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function ht(e){return lt(function(t){return t=+t,lt(function(n,r){var i,o=e([],n.length,t),a=o.length;while(a--)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}s=at.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?"HTML"!==t.nodeName:!1},r=at.support={},p=at.setDocument=function(e){var n=e?e.ownerDocument||e:w,i=n.defaultView;return n!==f&&9===n.nodeType&&n.documentElement?(f=n,d=n.documentElement,h=!s(n),i&&i.attachEvent&&i!==i.top&&i.attachEvent("onbeforeunload",function(){p()}),r.attributes=ut(function(e){return e.className="i",!e.getAttribute("className")}),r.getElementsByTagName=ut(function(e){return e.appendChild(n.createComment("")),!e.getElementsByTagName("*").length}),r.getElementsByClassName=ut(function(e){return e.innerHTML="<div class='a'></div><div class='a i'></div>",e.firstChild.className="i",2===e.getElementsByClassName("i").length}),r.getById=ut(function(e){return d.appendChild(e).id=b,!n.getElementsByName||!n.getElementsByName(b).length}),r.getById?(o.find.ID=function(e,t){if(typeof t.getElementById!==j&&h){var n=t.getElementById(e);return n&&n.parentNode?[n]:[]}},o.filter.ID=function(e){var t=e.replace(rt,it);return function(e){return e.getAttribute("id")===t}}):(delete o.find.ID,o.filter.ID=function(e){var t=e.replace(rt,it);return function(e){var n=typeof e.getAttributeNode!==j&&e.getAttributeNode("id");return n&&n.value===t}}),o.find.TAG=r.getElementsByTagName?function(e,n){return typeof n.getElementsByTagName!==j?n.getElementsByTagName(e):t}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},o.find.CLASS=r.getElementsByClassName&&function(e,n){return typeof n.getElementsByClassName!==j&&h?n.getElementsByClassName(e):t},m=[],g=[],(r.qsa=K.test(n.querySelectorAll))&&(ut(function(e){e.innerHTML="<select><option selected=''></option></select>",e.querySelectorAll("[selected]").length||g.push("\\["+P+"*(?:value|"+B+")"),e.querySelectorAll(":checked").length||g.push(":checked")}),ut(function(e){var t=n.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("t",""),e.querySelectorAll("[t^='']").length&&g.push("[*^$]="+P+"*(?:''|\"\")"),e.querySelectorAll(":enabled").length||g.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),g.push(",.*:")})),(r.matchesSelector=K.test(y=d.webkitMatchesSelector||d.mozMatchesSelector||d.oMatchesSelector||d.msMatchesSelector))&&ut(function(e){r.disconnectedMatch=y.call(e,"div"),y.call(e,"[s!='']:x"),m.push("!=",I)}),g=g.length&&RegExp(g.join("|")),m=m.length&&RegExp(m.join("|")),v=K.test(d.contains)||d.compareDocumentPosition?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},A=d.compareDocumentPosition?function(e,t){if(e===t)return S=!0,0;var i=t.compareDocumentPosition&&e.compareDocumentPosition&&e.compareDocumentPosition(t);return i?1&i||!r.sortDetached&&t.compareDocumentPosition(e)===i?e===n||v(w,e)?-1:t===n||v(w,t)?1:c?F.call(c,e)-F.call(c,t):0:4&i?-1:1:e.compareDocumentPosition?-1:1}:function(e,t){var r,i=0,o=e.parentNode,a=t.parentNode,s=[e],l=[t];if(e===t)return S=!0,0;if(!o||!a)return e===n?-1:t===n?1:o?-1:a?1:c?F.call(c,e)-F.call(c,t):0;if(o===a)return pt(e,t);r=e;while(r=r.parentNode)s.unshift(r);r=t;while(r=r.parentNode)l.unshift(r);while(s[i]===l[i])i++;return i?pt(s[i],l[i]):s[i]===w?-1:l[i]===w?1:0},n):f},at.matches=function(e,t){return at(e,null,null,t)},at.matchesSelector=function(e,t){if((e.ownerDocument||e)!==f&&p(e),t=t.replace(Y,"='$1']"),!(!r.matchesSelector||!h||m&&m.test(t)||g&&g.test(t)))try{var n=y.call(e,t);if(n||r.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(i){}return at(t,f,null,[e]).length>0},at.contains=function(e,t){return(e.ownerDocument||e)!==f&&p(e),v(e,t)},at.attr=function(e,n){(e.ownerDocument||e)!==f&&p(e);var i=o.attrHandle[n.toLowerCase()],a=i&&L.call(o.attrHandle,n.toLowerCase())?i(e,n,!h):t;return a===t?r.attributes||!h?e.getAttribute(n):(a=e.getAttributeNode(n))&&a.specified?a.value:null:a},at.error=function(e){throw Error("Syntax error, unrecognized expression: "+e)},at.uniqueSort=function(e){var t,n=[],i=0,o=0;if(S=!r.detectDuplicates,c=!r.sortStable&&e.slice(0),e.sort(A),S){while(t=e[o++])t===e[o]&&(i=n.push(o));while(i--)e.splice(n[i],1)}return e},a=at.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=a(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r];r++)n+=a(t);return n},o=at.selectors={cacheLength:50,createPseudo:lt,match:Q,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(rt,it),e[3]=(e[4]||e[5]||"").replace(rt,it),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||at.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&at.error(e[0]),e},PSEUDO:function(e){var n,r=!e[5]&&e[2];return Q.CHILD.test(e[0])?null:(e[3]&&e[4]!==t?e[2]=e[4]:r&&J.test(r)&&(n=mt(r,!0))&&(n=r.indexOf(")",r.length-n)-r.length)&&(e[0]=e[0].slice(0,n),e[2]=r.slice(0,n)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(rt,it).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=N[e+" "];return t||(t=RegExp("(^|"+P+")"+e+"("+P+"|$)"))&&N(e,function(e){return t.test("string"==typeof e.className&&e.className||typeof e.getAttribute!==j&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=at.attr(r,e);return null==i?"!="===t:t?(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i+" ").indexOf(n)>-1:"|="===t?i===n||i.slice(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,l){var u,c,p,f,d,h,g=o!==a?"nextSibling":"previousSibling",m=t.parentNode,y=s&&t.nodeName.toLowerCase(),v=!l&&!s;if(m){if(o){while(g){p=t;while(p=p[g])if(s?p.nodeName.toLowerCase()===y:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?m.firstChild:m.lastChild],a&&v){c=m[b]||(m[b]={}),u=c[e]||[],d=u[0]===T&&u[1],f=u[0]===T&&u[2],p=d&&m.childNodes[d];while(p=++d&&p&&p[g]||(f=d=0)||h.pop())if(1===p.nodeType&&++f&&p===t){c[e]=[T,d,f];break}}else if(v&&(u=(t[b]||(t[b]={}))[e])&&u[0]===T)f=u[1];else while(p=++d&&p&&p[g]||(f=d=0)||h.pop())if((s?p.nodeName.toLowerCase()===y:1===p.nodeType)&&++f&&(v&&((p[b]||(p[b]={}))[e]=[T,f]),p===t))break;return f-=i,f===r||0===f%r&&f/r>=0}}},PSEUDO:function(e,t){var n,r=o.pseudos[e]||o.setFilters[e.toLowerCase()]||at.error("unsupported pseudo: "+e);return r[b]?r(t):r.length>1?(n=[e,e,"",t],o.setFilters.hasOwnProperty(e.toLowerCase())?lt(function(e,n){var i,o=r(e,t),a=o.length;while(a--)i=F.call(e,o[a]),e[i]=!(n[i]=o[a])}):function(e){return r(e,0,n)}):r}},pseudos:{not:lt(function(e){var t=[],n=[],r=l(e.replace(z,"$1"));return r[b]?lt(function(e,t,n,i){var o,a=r(e,null,i,[]),s=e.length;while(s--)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),!n.pop()}}),has:lt(function(e){return function(t){return at(e,t).length>0}}),contains:lt(function(e){return function(t){return(t.textContent||t.innerText||a(t)).indexOf(e)>-1}}),lang:lt(function(e){return G.test(e||"")||at.error("unsupported lang: "+e),e=e.replace(rt,it).toLowerCase(),function(t){var n;do if(n=h?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return n=n.toLowerCase(),n===e||0===n.indexOf(e+"-");while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===d},focus:function(e){return e===f.activeElement&&(!f.hasFocus||f.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeName>"@"||3===e.nodeType||4===e.nodeType)return!1;return!0},parent:function(e){return!o.pseudos.empty(e)},header:function(e){return tt.test(e.nodeName)},input:function(e){return et.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||t.toLowerCase()===e.type)},first:ht(function(){return[0]}),last:ht(function(e,t){return[t-1]}),eq:ht(function(e,t,n){return[0>n?n+t:n]}),even:ht(function(e,t){var n=0;for(;t>n;n+=2)e.push(n);return e}),odd:ht(function(e,t){var n=1;for(;t>n;n+=2)e.push(n);return e}),lt:ht(function(e,t,n){var r=0>n?n+t:n;for(;--r>=0;)e.push(r);return e}),gt:ht(function(e,t,n){var r=0>n?n+t:n;for(;t>++r;)e.push(r);return e})}},o.pseudos.nth=o.pseudos.eq;for(n in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})o.pseudos[n]=ft(n);for(n in{submit:!0,reset:!0})o.pseudos[n]=dt(n);function gt(){}gt.prototype=o.filters=o.pseudos,o.setFilters=new gt;function mt(e,t){var n,r,i,a,s,l,u,c=k[e+" "];if(c)return t?0:c.slice(0);s=e,l=[],u=o.preFilter;while(s){(!n||(r=X.exec(s)))&&(r&&(s=s.slice(r[0].length)||s),l.push(i=[])),n=!1,(r=U.exec(s))&&(n=r.shift(),i.push({value:n,type:r[0].replace(z," ")}),s=s.slice(n.length));for(a in o.filter)!(r=Q[a].exec(s))||u[a]&&!(r=u[a](r))||(n=r.shift(),i.push({value:n,type:a,matches:r}),s=s.slice(n.length));if(!n)break}return t?s.length:s?at.error(e):k(e,l).slice(0)}function yt(e){var t=0,n=e.length,r="";for(;n>t;t++)r+=e[t].value;return r}function vt(e,t,n){var r=t.dir,o=n&&"parentNode"===r,a=C++;return t.first?function(t,n,i){while(t=t[r])if(1===t.nodeType||o)return e(t,n,i)}:function(t,n,s){var l,u,c,p=T+" "+a;if(s){while(t=t[r])if((1===t.nodeType||o)&&e(t,n,s))return!0}else while(t=t[r])if(1===t.nodeType||o)if(c=t[b]||(t[b]={}),(u=c[r])&&u[0]===p){if((l=u[1])===!0||l===i)return l===!0}else if(u=c[r]=[p],u[1]=e(t,n,s)||i,u[1]===!0)return!0}}function bt(e){return e.length>1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function xt(e,t,n,r,i){var o,a=[],s=0,l=e.length,u=null!=t;for(;l>s;s++)(o=e[s])&&(!n||n(o,r,i))&&(a.push(o),u&&t.push(s));return a}function wt(e,t,n,r,i,o){return r&&!r[b]&&(r=wt(r)),i&&!i[b]&&(i=wt(i,o)),lt(function(o,a,s,l){var u,c,p,f=[],d=[],h=a.length,g=o||Nt(t||"*",s.nodeType?[s]:s,[]),m=!e||!o&&t?g:xt(g,f,e,s,l),y=n?i||(o?e:h||r)?[]:a:m;if(n&&n(m,y,s,l),r){u=xt(y,d),r(u,[],s,l),c=u.length;while(c--)(p=u[c])&&(y[d[c]]=!(m[d[c]]=p))}if(o){if(i||e){if(i){u=[],c=y.length;while(c--)(p=y[c])&&u.push(m[c]=p);i(null,y=[],u,l)}c=y.length;while(c--)(p=y[c])&&(u=i?F.call(o,p):f[c])>-1&&(o[u]=!(a[u]=p))}}else y=xt(y===a?y.splice(h,y.length):y),i?i(null,a,y,l):M.apply(a,y)})}function Tt(e){var t,n,r,i=e.length,a=o.relative[e[0].type],s=a||o.relative[" "],l=a?1:0,c=vt(function(e){return e===t},s,!0),p=vt(function(e){return F.call(t,e)>-1},s,!0),f=[function(e,n,r){return!a&&(r||n!==u)||((t=n).nodeType?c(e,n,r):p(e,n,r))}];for(;i>l;l++)if(n=o.relative[e[l].type])f=[vt(bt(f),n)];else{if(n=o.filter[e[l].type].apply(null,e[l].matches),n[b]){for(r=++l;i>r;r++)if(o.relative[e[r].type])break;return wt(l>1&&bt(f),l>1&&yt(e.slice(0,l-1).concat({value:" "===e[l-2].type?"*":""})).replace(z,"$1"),n,r>l&&Tt(e.slice(l,r)),i>r&&Tt(e=e.slice(r)),i>r&&yt(e))}f.push(n)}return bt(f)}function Ct(e,t){var n=0,r=t.length>0,a=e.length>0,s=function(s,l,c,p,d){var h,g,m,y=[],v=0,b="0",x=s&&[],w=null!=d,C=u,N=s||a&&o.find.TAG("*",d&&l.parentNode||l),k=T+=null==C?1:Math.random()||.1;for(w&&(u=l!==f&&l,i=n);null!=(h=N[b]);b++){if(a&&h){g=0;while(m=e[g++])if(m(h,l,c)){p.push(h);break}w&&(T=k,i=++n)}r&&((h=!m&&h)&&v--,s&&x.push(h))}if(v+=b,r&&b!==v){g=0;while(m=t[g++])m(x,y,l,c);if(s){if(v>0)while(b--)x[b]||y[b]||(y[b]=q.call(p));y=xt(y)}M.apply(p,y),w&&!s&&y.length>0&&v+t.length>1&&at.uniqueSort(p)}return w&&(T=k,u=C),x};return r?lt(s):s}l=at.compile=function(e,t){var n,r=[],i=[],o=E[e+" "];if(!o){t||(t=mt(e)),n=t.length;while(n--)o=Tt(t[n]),o[b]?r.push(o):i.push(o);o=E(e,Ct(i,r))}return o};function Nt(e,t,n){var r=0,i=t.length;for(;i>r;r++)at(e,t[r],n);return n}function kt(e,t,n,i){var a,s,u,c,p,f=mt(e);if(!i&&1===f.length){if(s=f[0]=f[0].slice(0),s.length>2&&"ID"===(u=s[0]).type&&r.getById&&9===t.nodeType&&h&&o.relative[s[1].type]){if(t=(o.find.ID(u.matches[0].replace(rt,it),t)||[])[0],!t)return n;e=e.slice(s.shift().value.length)}a=Q.needsContext.test(e)?0:s.length;while(a--){if(u=s[a],o.relative[c=u.type])break;if((p=o.find[c])&&(i=p(u.matches[0].replace(rt,it),V.test(s[0].type)&&t.parentNode||t))){if(s.splice(a,1),e=i.length&&yt(s),!e)return M.apply(n,i),n;break}}}return l(e,f)(i,t,!h,n,V.test(e)),n}r.sortStable=b.split("").sort(A).join("")===b,r.detectDuplicates=S,p(),r.sortDetached=ut(function(e){return 1&e.compareDocumentPosition(f.createElement("div"))}),ut(function(e){return e.innerHTML="<a href='#'></a>","#"===e.firstChild.getAttribute("href")})||ct("type|href|height|width",function(e,n,r){return r?t:e.getAttribute(n,"type"===n.toLowerCase()?1:2)}),r.attributes&&ut(function(e){return e.innerHTML="<input/>",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||ct("value",function(e,n,r){return r||"input"!==e.nodeName.toLowerCase()?t:e.defaultValue}),ut(function(e){return null==e.getAttribute("disabled")})||ct(B,function(e,n,r){var i;return r?t:(i=e.getAttributeNode(n))&&i.specified?i.value:e[n]===!0?n.toLowerCase():null}),x.find=at,x.expr=at.selectors,x.expr[":"]=x.expr.pseudos,x.unique=at.uniqueSort,x.text=at.getText,x.isXMLDoc=at.isXML,x.contains=at.contains}(e);var O={};function F(e){var t=O[e]={};return x.each(e.match(T)||[],function(e,n){t[n]=!0}),t}x.Callbacks=function(e){e="string"==typeof e?O[e]||F(e):x.extend({},e);var n,r,i,o,a,s,l=[],u=!e.once&&[],c=function(t){for(r=e.memory&&t,i=!0,a=s||0,s=0,o=l.length,n=!0;l&&o>a;a++)if(l[a].apply(t[0],t[1])===!1&&e.stopOnFalse){r=!1;break}n=!1,l&&(u?u.length&&c(u.shift()):r?l=[]:p.disable())},p={add:function(){if(l){var t=l.length;(function i(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&p.has(n)||l.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=l.length:r&&(s=t,c(r))}return this},remove:function(){return l&&x.each(arguments,function(e,t){var r;while((r=x.inArray(t,l,r))>-1)l.splice(r,1),n&&(o>=r&&o--,a>=r&&a--)}),this},has:function(e){return e?x.inArray(e,l)>-1:!(!l||!l.length)},empty:function(){return l=[],o=0,this},disable:function(){return l=u=r=t,this},disabled:function(){return!l},lock:function(){return u=t,r||p.disable(),this},locked:function(){return!u},fireWith:function(e,t){return!l||i&&!u||(t=t||[],t=[e,t.slice?t.slice():t],n?u.push(t):c(t)),this},fire:function(){return p.fireWith(this,arguments),this},fired:function(){return!!i}};return p},x.extend({Deferred:function(e){var t=[["resolve","done",x.Callbacks("once memory"),"resolved"],["reject","fail",x.Callbacks("once memory"),"rejected"],["notify","progress",x.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return x.Deferred(function(n){x.each(t,function(t,o){var a=o[0],s=x.isFunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&x.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"With"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()},promise:function(e){return null!=e?x.extend(e,r):r}},i={};return r.pipe=r.then,x.each(t,function(e,o){var a=o[2],s=o[3];r[o[1]]=a.add,s&&a.add(function(){n=s},t[1^e][2].disable,t[2][2].lock),i[o[0]]=function(){return i[o[0]+"With"](this===i?r:this,arguments),this},i[o[0]+"With"]=a.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t=0,n=g.call(arguments),r=n.length,i=1!==r||e&&x.isFunction(e.promise)?r:0,o=1===i?e:x.Deferred(),a=function(e,t,n){return function(r){t[e]=this,n[e]=arguments.length>1?g.call(arguments):r,n===s?o.notifyWith(t,n):--i||o.resolveWith(t,n)}},s,l,u;if(r>1)for(s=Array(r),l=Array(r),u=Array(r);r>t;t++)n[t]&&x.isFunction(n[t].promise)?n[t].promise().done(a(t,u,n)).fail(o.reject).progress(a(t,l,s)):--i;return i||o.resolveWith(u,n),o.promise()}}),x.support=function(t){var n,r,o,s,l,u,c,p,f,d=a.createElement("div");if(d.setAttribute("className","t"),d.innerHTML="  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",n=d.getElementsByTagName("*")||[],r=d.getElementsByTagName("a")[0],!r||!r.style||!n.length)return t;s=a.createElement("select"),u=s.appendChild(a.createElement("option")),o=d.getElementsByTagName("input")[0],r.style.cssText="top:1px;float:left;opacity:.5",t.getSetAttribute="t"!==d.className,t.leadingWhitespace=3===d.firstChild.nodeType,t.tbody=!d.getElementsByTagName("tbody").length,t.htmlSerialize=!!d.getElementsByTagName("link").length,t.style=/top/.test(r.getAttribute("style")),t.hrefNormalized="/a"===r.getAttribute("href"),t.opacity=/^0.5/.test(r.style.opacity),t.cssFloat=!!r.style.cssFloat,t.checkOn=!!o.value,t.optSelected=u.selected,t.enctype=!!a.createElement("form").enctype,t.html5Clone="<:nav></:nav>"!==a.createElement("nav").cloneNode(!0).outerHTML,t.inlineBlockNeedsLayout=!1,t.shrinkWrapBlocks=!1,t.pixelPosition=!1,t.deleteExpando=!0,t.noCloneEvent=!0,t.reliableMarginRight=!0,t.boxSizingReliable=!0,o.checked=!0,t.noCloneChecked=o.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!u.disabled;try{delete d.test}catch(h){t.deleteExpando=!1}o=a.createElement("input"),o.setAttribute("value",""),t.input=""===o.getAttribute("value"),o.value="t",o.setAttribute("type","radio"),t.radioValue="t"===o.value,o.setAttribute("checked","t"),o.setAttribute("name","t"),l=a.createDocumentFragment(),l.appendChild(o),t.appendChecked=o.checked,t.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,d.attachEvent&&(d.attachEvent("onclick",function(){t.noCloneEvent=!1}),d.cloneNode(!0).click());for(f in{submit:!0,change:!0,focusin:!0})d.setAttribute(c="on"+f,"t"),t[f+"Bubbles"]=c in e||d.attributes[c].expando===!1;d.style.backgroundClip="content-box",d.cloneNode(!0).style.backgroundClip="",t.clearCloneStyle="content-box"===d.style.backgroundClip;for(f in x(t))break;return t.ownLast="0"!==f,x(function(){var n,r,o,s="padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",l=a.getElementsByTagName("body")[0];l&&(n=a.createElement("div"),n.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",l.appendChild(n).appendChild(d),d.innerHTML="<table><tr><td></td><td>t</td></tr></table>",o=d.getElementsByTagName("td"),o[0].style.cssText="padding:0;margin:0;border:0;display:none",p=0===o[0].offsetHeight,o[0].style.display="",o[1].style.display="none",t.reliableHiddenOffsets=p&&0===o[0].offsetHeight,d.innerHTML="",d.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",x.swap(l,null!=l.style.zoom?{zoom:1}:{},function(){t.boxSizing=4===d.offsetWidth}),e.getComputedStyle&&(t.pixelPosition="1%"!==(e.getComputedStyle(d,null)||{}).top,t.boxSizingReliable="4px"===(e.getComputedStyle(d,null)||{width:"4px"}).width,r=d.appendChild(a.createElement("div")),r.style.cssText=d.style.cssText=s,r.style.marginRight=r.style.width="0",d.style.width="1px",t.reliableMarginRight=!parseFloat((e.getComputedStyle(r,null)||{}).marginRight)),typeof d.style.zoom!==i&&(d.innerHTML="",d.style.cssText=s+"width:1px;padding:1px;display:inline;zoom:1",t.inlineBlockNeedsLayout=3===d.offsetWidth,d.style.display="block",d.innerHTML="<div></div>",d.firstChild.style.width="5px",t.shrinkWrapBlocks=3!==d.offsetWidth,t.inlineBlockNeedsLayout&&(l.style.zoom=1)),l.removeChild(n),n=d=o=r=null)}),n=s=l=u=r=o=null,t
+}({});var B=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,P=/([A-Z])/g;function R(e,n,r,i){if(x.acceptData(e)){var o,a,s=x.expando,l=e.nodeType,u=l?x.cache:e,c=l?e[s]:e[s]&&s;if(c&&u[c]&&(i||u[c].data)||r!==t||"string"!=typeof n)return c||(c=l?e[s]=p.pop()||x.guid++:s),u[c]||(u[c]=l?{}:{toJSON:x.noop}),("object"==typeof n||"function"==typeof n)&&(i?u[c]=x.extend(u[c],n):u[c].data=x.extend(u[c].data,n)),a=u[c],i||(a.data||(a.data={}),a=a.data),r!==t&&(a[x.camelCase(n)]=r),"string"==typeof n?(o=a[n],null==o&&(o=a[x.camelCase(n)])):o=a,o}}function W(e,t,n){if(x.acceptData(e)){var r,i,o=e.nodeType,a=o?x.cache:e,s=o?e[x.expando]:x.expando;if(a[s]){if(t&&(r=n?a[s]:a[s].data)){x.isArray(t)?t=t.concat(x.map(t,x.camelCase)):t in r?t=[t]:(t=x.camelCase(t),t=t in r?[t]:t.split(" ")),i=t.length;while(i--)delete r[t[i]];if(n?!I(r):!x.isEmptyObject(r))return}(n||(delete a[s].data,I(a[s])))&&(o?x.cleanData([e],!0):x.support.deleteExpando||a!=a.window?delete a[s]:a[s]=null)}}}x.extend({cache:{},noData:{applet:!0,embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"},hasData:function(e){return e=e.nodeType?x.cache[e[x.expando]]:e[x.expando],!!e&&!I(e)},data:function(e,t,n){return R(e,t,n)},removeData:function(e,t){return W(e,t)},_data:function(e,t,n){return R(e,t,n,!0)},_removeData:function(e,t){return W(e,t,!0)},acceptData:function(e){if(e.nodeType&&1!==e.nodeType&&9!==e.nodeType)return!1;var t=e.nodeName&&x.noData[e.nodeName.toLowerCase()];return!t||t!==!0&&e.getAttribute("classid")===t}}),x.fn.extend({data:function(e,n){var r,i,o=null,a=0,s=this[0];if(e===t){if(this.length&&(o=x.data(s),1===s.nodeType&&!x._data(s,"parsedAttrs"))){for(r=s.attributes;r.length>a;a++)i=r[a].name,0===i.indexOf("data-")&&(i=x.camelCase(i.slice(5)),$(s,i,o[i]));x._data(s,"parsedAttrs",!0)}return o}return"object"==typeof e?this.each(function(){x.data(this,e)}):arguments.length>1?this.each(function(){x.data(this,e,n)}):s?$(s,e,x.data(s,e)):null},removeData:function(e){return this.each(function(){x.removeData(this,e)})}});function $(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(P,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:B.test(r)?x.parseJSON(r):r}catch(o){}x.data(e,n,r)}else r=t}return r}function I(e){var t;for(t in e)if(("data"!==t||!x.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}x.extend({queue:function(e,n,r){var i;return e?(n=(n||"fx")+"queue",i=x._data(e,n),r&&(!i||x.isArray(r)?i=x._data(e,n,x.makeArray(r)):i.push(r)),i||[]):t},dequeue:function(e,t){t=t||"fx";var n=x.queue(e,t),r=n.length,i=n.shift(),o=x._queueHooks(e,t),a=function(){x.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return x._data(e,n)||x._data(e,n,{empty:x.Callbacks("once memory").add(function(){x._removeData(e,t+"queue"),x._removeData(e,n)})})}}),x.fn.extend({queue:function(e,n){var r=2;return"string"!=typeof e&&(n=e,e="fx",r--),r>arguments.length?x.queue(this[0],e):n===t?this:this.each(function(){var t=x.queue(this,e,n);x._queueHooks(this,e),"fx"===e&&"inprogress"!==t[0]&&x.dequeue(this,e)})},dequeue:function(e){return this.each(function(){x.dequeue(this,e)})},delay:function(e,t){return e=x.fx?x.fx.speeds[e]||e:e,t=t||"fx",this.queue(t,function(t,n){var r=setTimeout(t,e);n.stop=function(){clearTimeout(r)}})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,n){var r,i=1,o=x.Deferred(),a=this,s=this.length,l=function(){--i||o.resolveWith(a,[a])};"string"!=typeof e&&(n=e,e=t),e=e||"fx";while(s--)r=x._data(a[s],e+"queueHooks"),r&&r.empty&&(i++,r.empty.add(l));return l(),o.promise(n)}});var z,X,U=/[\t\r\n\f]/g,V=/\r/g,Y=/^(?:input|select|textarea|button|object)$/i,J=/^(?:a|area)$/i,G=/^(?:checked|selected)$/i,Q=x.support.getSetAttribute,K=x.support.input;x.fn.extend({attr:function(e,t){return x.access(this,x.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){x.removeAttr(this,e)})},prop:function(e,t){return x.access(this,x.prop,e,t,arguments.length>1)},removeProp:function(e){return e=x.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,o,a=0,s=this.length,l="string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).addClass(e.call(this,t,this.className))});if(l)for(t=(e||"").match(T)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(U," "):" ")){o=0;while(i=t[o++])0>r.indexOf(" "+i+" ")&&(r+=i+" ");n.className=x.trim(r)}return this},removeClass:function(e){var t,n,r,i,o,a=0,s=this.length,l=0===arguments.length||"string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).removeClass(e.call(this,t,this.className))});if(l)for(t=(e||"").match(T)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(U," "):"")){o=0;while(i=t[o++])while(r.indexOf(" "+i+" ")>=0)r=r.replace(" "+i+" "," ");n.className=e?x.trim(r):""}return this},toggleClass:function(e,t){var n=typeof e;return"boolean"==typeof t&&"string"===n?t?this.addClass(e):this.removeClass(e):x.isFunction(e)?this.each(function(n){x(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if("string"===n){var t,r=0,o=x(this),a=e.match(T)||[];while(t=a[r++])o.hasClass(t)?o.removeClass(t):o.addClass(t)}else(n===i||"boolean"===n)&&(this.className&&x._data(this,"__className__",this.className),this.className=this.className||e===!1?"":x._data(this,"__className__")||"")})},hasClass:function(e){var t=" "+e+" ",n=0,r=this.length;for(;r>n;n++)if(1===this[n].nodeType&&(" "+this[n].className+" ").replace(U," ").indexOf(t)>=0)return!0;return!1},val:function(e){var n,r,i,o=this[0];{if(arguments.length)return i=x.isFunction(e),this.each(function(n){var o;1===this.nodeType&&(o=i?e.call(this,n,x(this).val()):e,null==o?o="":"number"==typeof o?o+="":x.isArray(o)&&(o=x.map(o,function(e){return null==e?"":e+""})),r=x.valHooks[this.type]||x.valHooks[this.nodeName.toLowerCase()],r&&"set"in r&&r.set(this,o,"value")!==t||(this.value=o))});if(o)return r=x.valHooks[o.type]||x.valHooks[o.nodeName.toLowerCase()],r&&"get"in r&&(n=r.get(o,"value"))!==t?n:(n=o.value,"string"==typeof n?n.replace(V,""):null==n?"":n)}}}),x.extend({valHooks:{option:{get:function(e){var t=x.find.attr(e,"value");return null!=t?t:e.text}},select:{get:function(e){var t,n,r=e.options,i=e.selectedIndex,o="select-one"===e.type||0>i,a=o?null:[],s=o?i+1:r.length,l=0>i?s:o?i:0;for(;s>l;l++)if(n=r[l],!(!n.selected&&l!==i||(x.support.optDisabled?n.disabled:null!==n.getAttribute("disabled"))||n.parentNode.disabled&&x.nodeName(n.parentNode,"optgroup"))){if(t=x(n).val(),o)return t;a.push(t)}return a},set:function(e,t){var n,r,i=e.options,o=x.makeArray(t),a=i.length;while(a--)r=i[a],(r.selected=x.inArray(x(r).val(),o)>=0)&&(n=!0);return n||(e.selectedIndex=-1),o}}},attr:function(e,n,r){var o,a,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return typeof e.getAttribute===i?x.prop(e,n,r):(1===s&&x.isXMLDoc(e)||(n=n.toLowerCase(),o=x.attrHooks[n]||(x.expr.match.bool.test(n)?X:z)),r===t?o&&"get"in o&&null!==(a=o.get(e,n))?a:(a=x.find.attr(e,n),null==a?t:a):null!==r?o&&"set"in o&&(a=o.set(e,r,n))!==t?a:(e.setAttribute(n,r+""),r):(x.removeAttr(e,n),t))},removeAttr:function(e,t){var n,r,i=0,o=t&&t.match(T);if(o&&1===e.nodeType)while(n=o[i++])r=x.propFix[n]||n,x.expr.match.bool.test(n)?K&&Q||!G.test(n)?e[r]=!1:e[x.camelCase("default-"+n)]=e[r]=!1:x.attr(e,n,""),e.removeAttribute(Q?n:r)},attrHooks:{type:{set:function(e,t){if(!x.support.radioValue&&"radio"===t&&x.nodeName(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},propFix:{"for":"htmlFor","class":"className"},prop:function(e,n,r){var i,o,a,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return a=1!==s||!x.isXMLDoc(e),a&&(n=x.propFix[n]||n,o=x.propHooks[n]),r!==t?o&&"set"in o&&(i=o.set(e,r,n))!==t?i:e[n]=r:o&&"get"in o&&null!==(i=o.get(e,n))?i:e[n]},propHooks:{tabIndex:{get:function(e){var t=x.find.attr(e,"tabindex");return t?parseInt(t,10):Y.test(e.nodeName)||J.test(e.nodeName)&&e.href?0:-1}}}}),X={set:function(e,t,n){return t===!1?x.removeAttr(e,n):K&&Q||!G.test(n)?e.setAttribute(!Q&&x.propFix[n]||n,n):e[x.camelCase("default-"+n)]=e[n]=!0,n}},x.each(x.expr.match.bool.source.match(/\w+/g),function(e,n){var r=x.expr.attrHandle[n]||x.find.attr;x.expr.attrHandle[n]=K&&Q||!G.test(n)?function(e,n,i){var o=x.expr.attrHandle[n],a=i?t:(x.expr.attrHandle[n]=t)!=r(e,n,i)?n.toLowerCase():null;return x.expr.attrHandle[n]=o,a}:function(e,n,r){return r?t:e[x.camelCase("default-"+n)]?n.toLowerCase():null}}),K&&Q||(x.attrHooks.value={set:function(e,n,r){return x.nodeName(e,"input")?(e.defaultValue=n,t):z&&z.set(e,n,r)}}),Q||(z={set:function(e,n,r){var i=e.getAttributeNode(r);return i||e.setAttributeNode(i=e.ownerDocument.createAttribute(r)),i.value=n+="","value"===r||n===e.getAttribute(r)?n:t}},x.expr.attrHandle.id=x.expr.attrHandle.name=x.expr.attrHandle.coords=function(e,n,r){var i;return r?t:(i=e.getAttributeNode(n))&&""!==i.value?i.value:null},x.valHooks.button={get:function(e,n){var r=e.getAttributeNode(n);return r&&r.specified?r.value:t},set:z.set},x.attrHooks.contenteditable={set:function(e,t,n){z.set(e,""===t?!1:t,n)}},x.each(["width","height"],function(e,n){x.attrHooks[n]={set:function(e,r){return""===r?(e.setAttribute(n,"auto"),r):t}}})),x.support.hrefNormalized||x.each(["href","src"],function(e,t){x.propHooks[t]={get:function(e){return e.getAttribute(t,4)}}}),x.support.style||(x.attrHooks.style={get:function(e){return e.style.cssText||t},set:function(e,t){return e.style.cssText=t+""}}),x.support.optSelected||(x.propHooks.selected={get:function(e){var t=e.parentNode;return t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex),null}}),x.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){x.propFix[this.toLowerCase()]=this}),x.support.enctype||(x.propFix.enctype="encoding"),x.each(["radio","checkbox"],function(){x.valHooks[this]={set:function(e,n){return x.isArray(n)?e.checked=x.inArray(x(e).val(),n)>=0:t}},x.support.checkOn||(x.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})});var Z=/^(?:input|select|textarea)$/i,et=/^key/,tt=/^(?:mouse|contextmenu)|click/,nt=/^(?:focusinfocus|focusoutblur)$/,rt=/^([^.]*)(?:\.(.+)|)$/;function it(){return!0}function ot(){return!1}function at(){try{return a.activeElement}catch(e){}}x.event={global:{},add:function(e,n,r,o,a){var s,l,u,c,p,f,d,h,g,m,y,v=x._data(e);if(v){r.handler&&(c=r,r=c.handler,a=c.selector),r.guid||(r.guid=x.guid++),(l=v.events)||(l=v.events={}),(f=v.handle)||(f=v.handle=function(e){return typeof x===i||e&&x.event.triggered===e.type?t:x.event.dispatch.apply(f.elem,arguments)},f.elem=e),n=(n||"").match(T)||[""],u=n.length;while(u--)s=rt.exec(n[u])||[],g=y=s[1],m=(s[2]||"").split(".").sort(),g&&(p=x.event.special[g]||{},g=(a?p.delegateType:p.bindType)||g,p=x.event.special[g]||{},d=x.extend({type:g,origType:y,data:o,handler:r,guid:r.guid,selector:a,needsContext:a&&x.expr.match.needsContext.test(a),namespace:m.join(".")},c),(h=l[g])||(h=l[g]=[],h.delegateCount=0,p.setup&&p.setup.call(e,o,m,f)!==!1||(e.addEventListener?e.addEventListener(g,f,!1):e.attachEvent&&e.attachEvent("on"+g,f))),p.add&&(p.add.call(e,d),d.handler.guid||(d.handler.guid=r.guid)),a?h.splice(h.delegateCount++,0,d):h.push(d),x.event.global[g]=!0);e=null}},remove:function(e,t,n,r,i){var o,a,s,l,u,c,p,f,d,h,g,m=x.hasData(e)&&x._data(e);if(m&&(c=m.events)){t=(t||"").match(T)||[""],u=t.length;while(u--)if(s=rt.exec(t[u])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){p=x.event.special[d]||{},d=(r?p.delegateType:p.bindType)||d,f=c[d]||[],s=s[2]&&RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),l=o=f.length;while(o--)a=f[o],!i&&g!==a.origType||n&&n.guid!==a.guid||s&&!s.test(a.namespace)||r&&r!==a.selector&&("**"!==r||!a.selector)||(f.splice(o,1),a.selector&&f.delegateCount--,p.remove&&p.remove.call(e,a));l&&!f.length&&(p.teardown&&p.teardown.call(e,h,m.handle)!==!1||x.removeEvent(e,d,m.handle),delete c[d])}else for(d in c)x.event.remove(e,d+t[u],n,r,!0);x.isEmptyObject(c)&&(delete m.handle,x._removeData(e,"events"))}},trigger:function(n,r,i,o){var s,l,u,c,p,f,d,h=[i||a],g=v.call(n,"type")?n.type:n,m=v.call(n,"namespace")?n.namespace.split("."):[];if(u=f=i=i||a,3!==i.nodeType&&8!==i.nodeType&&!nt.test(g+x.event.triggered)&&(g.indexOf(".")>=0&&(m=g.split("."),g=m.shift(),m.sort()),l=0>g.indexOf(":")&&"on"+g,n=n[x.expando]?n:new x.Event(g,"object"==typeof n&&n),n.isTrigger=o?2:3,n.namespace=m.join("."),n.namespace_re=n.namespace?RegExp("(^|\\.)"+m.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,n.result=t,n.target||(n.target=i),r=null==r?[n]:x.makeArray(r,[n]),p=x.event.special[g]||{},o||!p.trigger||p.trigger.apply(i,r)!==!1)){if(!o&&!p.noBubble&&!x.isWindow(i)){for(c=p.delegateType||g,nt.test(c+g)||(u=u.parentNode);u;u=u.parentNode)h.push(u),f=u;f===(i.ownerDocument||a)&&h.push(f.defaultView||f.parentWindow||e)}d=0;while((u=h[d++])&&!n.isPropagationStopped())n.type=d>1?c:p.bindType||g,s=(x._data(u,"events")||{})[n.type]&&x._data(u,"handle"),s&&s.apply(u,r),s=l&&u[l],s&&x.acceptData(u)&&s.apply&&s.apply(u,r)===!1&&n.preventDefault();if(n.type=g,!o&&!n.isDefaultPrevented()&&(!p._default||p._default.apply(h.pop(),r)===!1)&&x.acceptData(i)&&l&&i[g]&&!x.isWindow(i)){f=i[l],f&&(i[l]=null),x.event.triggered=g;try{i[g]()}catch(y){}x.event.triggered=t,f&&(i[l]=f)}return n.result}},dispatch:function(e){e=x.event.fix(e);var n,r,i,o,a,s=[],l=g.call(arguments),u=(x._data(this,"events")||{})[e.type]||[],c=x.event.special[e.type]||{};if(l[0]=e,e.delegateTarget=this,!c.preDispatch||c.preDispatch.call(this,e)!==!1){s=x.event.handlers.call(this,e,u),n=0;while((o=s[n++])&&!e.isPropagationStopped()){e.currentTarget=o.elem,a=0;while((i=o.handlers[a++])&&!e.isImmediatePropagationStopped())(!e.namespace_re||e.namespace_re.test(i.namespace))&&(e.handleObj=i,e.data=i.data,r=((x.event.special[i.origType]||{}).handle||i.handler).apply(o.elem,l),r!==t&&(e.result=r)===!1&&(e.preventDefault(),e.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,e),e.result}},handlers:function(e,n){var r,i,o,a,s=[],l=n.delegateCount,u=e.target;if(l&&u.nodeType&&(!e.button||"click"!==e.type))for(;u!=this;u=u.parentNode||this)if(1===u.nodeType&&(u.disabled!==!0||"click"!==e.type)){for(o=[],a=0;l>a;a++)i=n[a],r=i.selector+" ",o[r]===t&&(o[r]=i.needsContext?x(r,this).index(u)>=0:x.find(r,this,null,[u]).length),o[r]&&o.push(i);o.length&&s.push({elem:u,handlers:o})}return n.length>l&&s.push({elem:this,handlers:n.slice(l)}),s},fix:function(e){if(e[x.expando])return e;var t,n,r,i=e.type,o=e,s=this.fixHooks[i];s||(this.fixHooks[i]=s=tt.test(i)?this.mouseHooks:et.test(i)?this.keyHooks:{}),r=s.props?this.props.concat(s.props):this.props,e=new x.Event(o),t=r.length;while(t--)n=r[t],e[n]=o[n];return e.target||(e.target=o.srcElement||a),3===e.target.nodeType&&(e.target=e.target.parentNode),e.metaKey=!!e.metaKey,s.filter?s.filter(e,o):e},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(e,t){return null==e.which&&(e.which=null!=t.charCode?t.charCode:t.keyCode),e}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(e,n){var r,i,o,s=n.button,l=n.fromElement;return null==e.pageX&&null!=n.clientX&&(i=e.target.ownerDocument||a,o=i.documentElement,r=i.body,e.pageX=n.clientX+(o&&o.scrollLeft||r&&r.scrollLeft||0)-(o&&o.clientLeft||r&&r.clientLeft||0),e.pageY=n.clientY+(o&&o.scrollTop||r&&r.scrollTop||0)-(o&&o.clientTop||r&&r.clientTop||0)),!e.relatedTarget&&l&&(e.relatedTarget=l===e.target?n.toElement:l),e.which||s===t||(e.which=1&s?1:2&s?3:4&s?2:0),e}},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!==at()&&this.focus)try{return this.focus(),!1}catch(e){}},delegateType:"focusin"},blur:{trigger:function(){return this===at()&&this.blur?(this.blur(),!1):t},delegateType:"focusout"},click:{trigger:function(){return x.nodeName(this,"input")&&"checkbox"===this.type&&this.click?(this.click(),!1):t},_default:function(e){return x.nodeName(e.target,"a")}},beforeunload:{postDispatch:function(e){e.result!==t&&(e.originalEvent.returnValue=e.result)}}},simulate:function(e,t,n,r){var i=x.extend(new x.Event,n,{type:e,isSimulated:!0,originalEvent:{}});r?x.event.trigger(i,null,t):x.event.dispatch.call(t,i),i.isDefaultPrevented()&&n.preventDefault()}},x.removeEvent=a.removeEventListener?function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n,!1)}:function(e,t,n){var r="on"+t;e.detachEvent&&(typeof e[r]===i&&(e[r]=null),e.detachEvent(r,n))},x.Event=function(e,n){return this instanceof x.Event?(e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||e.returnValue===!1||e.getPreventDefault&&e.getPreventDefault()?it:ot):this.type=e,n&&x.extend(this,n),this.timeStamp=e&&e.timeStamp||x.now(),this[x.expando]=!0,t):new x.Event(e,n)},x.Event.prototype={isDefaultPrevented:ot,isPropagationStopped:ot,isImmediatePropagationStopped:ot,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=it,e&&(e.preventDefault?e.preventDefault():e.returnValue=!1)},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=it,e&&(e.stopPropagation&&e.stopPropagation(),e.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=it,this.stopPropagation()}},x.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(e,t){x.event.special[e]={delegateType:t,bindType:t,handle:function(e){var n,r=this,i=e.relatedTarget,o=e.handleObj;return(!i||i!==r&&!x.contains(r,i))&&(e.type=o.origType,n=o.handler.apply(this,arguments),e.type=t),n}}}),x.support.submitBubbles||(x.event.special.submit={setup:function(){return x.nodeName(this,"form")?!1:(x.event.add(this,"click._submit keypress._submit",function(e){var n=e.target,r=x.nodeName(n,"input")||x.nodeName(n,"button")?n.form:t;r&&!x._data(r,"submitBubbles")&&(x.event.add(r,"submit._submit",function(e){e._submit_bubble=!0}),x._data(r,"submitBubbles",!0))}),t)},postDispatch:function(e){e._submit_bubble&&(delete e._submit_bubble,this.parentNode&&!e.isTrigger&&x.event.simulate("submit",this.parentNode,e,!0))},teardown:function(){return x.nodeName(this,"form")?!1:(x.event.remove(this,"._submit"),t)}}),x.support.changeBubbles||(x.event.special.change={setup:function(){return Z.test(this.nodeName)?(("checkbox"===this.type||"radio"===this.type)&&(x.event.add(this,"propertychange._change",function(e){"checked"===e.originalEvent.propertyName&&(this._just_changed=!0)}),x.event.add(this,"click._change",function(e){this._just_changed&&!e.isTrigger&&(this._just_changed=!1),x.event.simulate("change",this,e,!0)})),!1):(x.event.add(this,"beforeactivate._change",function(e){var t=e.target;Z.test(t.nodeName)&&!x._data(t,"changeBubbles")&&(x.event.add(t,"change._change",function(e){!this.parentNode||e.isSimulated||e.isTrigger||x.event.simulate("change",this.parentNode,e,!0)}),x._data(t,"changeBubbles",!0))}),t)},handle:function(e){var n=e.target;return this!==n||e.isSimulated||e.isTrigger||"radio"!==n.type&&"checkbox"!==n.type?e.handleObj.handler.apply(this,arguments):t},teardown:function(){return x.event.remove(this,"._change"),!Z.test(this.nodeName)}}),x.support.focusinBubbles||x.each({focus:"focusin",blur:"focusout"},function(e,t){var n=0,r=function(e){x.event.simulate(t,e.target,x.event.fix(e),!0)};x.event.special[t]={setup:function(){0===n++&&a.addEventListener(e,r,!0)},teardown:function(){0===--n&&a.removeEventListener(e,r,!0)}}}),x.fn.extend({on:function(e,n,r,i,o){var a,s;if("object"==typeof e){"string"!=typeof n&&(r=r||n,n=t);for(a in e)this.on(a,n,r,e[a],o);return this}if(null==r&&null==i?(i=n,r=n=t):null==i&&("string"==typeof n?(i=r,r=t):(i=r,r=n,n=t)),i===!1)i=ot;else if(!i)return this;return 1===o&&(s=i,i=function(e){return x().off(e),s.apply(this,arguments)},i.guid=s.guid||(s.guid=x.guid++)),this.each(function(){x.event.add(this,e,i,r,n)})},one:function(e,t,n,r){return this.on(e,t,n,r,1)},off:function(e,n,r){var i,o;if(e&&e.preventDefault&&e.handleObj)return i=e.handleObj,x(e.delegateTarget).off(i.namespace?i.origType+"."+i.namespace:i.origType,i.selector,i.handler),this;if("object"==typeof e){for(o in e)this.off(o,n,e[o]);return this}return(n===!1||"function"==typeof n)&&(r=n,n=t),r===!1&&(r=ot),this.each(function(){x.event.remove(this,e,r,n)})},trigger:function(e,t){return this.each(function(){x.event.trigger(e,t,this)})},triggerHandler:function(e,n){var r=this[0];return r?x.event.trigger(e,n,r,!0):t}});var st=/^.[^:#\[\.,]*$/,lt=/^(?:parents|prev(?:Until|All))/,ut=x.expr.match.needsContext,ct={children:!0,contents:!0,next:!0,prev:!0};x.fn.extend({find:function(e){var t,n=[],r=this,i=r.length;if("string"!=typeof e)return this.pushStack(x(e).filter(function(){for(t=0;i>t;t++)if(x.contains(r[t],this))return!0}));for(t=0;i>t;t++)x.find(e,r[t],n);return n=this.pushStack(i>1?x.unique(n):n),n.selector=this.selector?this.selector+" "+e:e,n},has:function(e){var t,n=x(e,this),r=n.length;return this.filter(function(){for(t=0;r>t;t++)if(x.contains(this,n[t]))return!0})},not:function(e){return this.pushStack(ft(this,e||[],!0))},filter:function(e){return this.pushStack(ft(this,e||[],!1))},is:function(e){return!!ft(this,"string"==typeof e&&ut.test(e)?x(e):e||[],!1).length},closest:function(e,t){var n,r=0,i=this.length,o=[],a=ut.test(e)||"string"!=typeof e?x(e,t||this.context):0;for(;i>r;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(11>n.nodeType&&(a?a.index(n)>-1:1===n.nodeType&&x.find.matchesSelector(n,e))){n=o.push(n);break}return this.pushStack(o.length>1?x.unique(o):o)},index:function(e){return e?"string"==typeof e?x.inArray(this[0],x(e)):x.inArray(e.jquery?e[0]:e,this):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){var n="string"==typeof e?x(e,t):x.makeArray(e&&e.nodeType?[e]:e),r=x.merge(this.get(),n);return this.pushStack(x.unique(r))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}});function pt(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}x.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return x.dir(e,"parentNode")},parentsUntil:function(e,t,n){return x.dir(e,"parentNode",n)},next:function(e){return pt(e,"nextSibling")},prev:function(e){return pt(e,"previousSibling")},nextAll:function(e){return x.dir(e,"nextSibling")},prevAll:function(e){return x.dir(e,"previousSibling")},nextUntil:function(e,t,n){return x.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return x.dir(e,"previousSibling",n)},siblings:function(e){return x.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return x.sibling(e.firstChild)},contents:function(e){return x.nodeName(e,"iframe")?e.contentDocument||e.contentWindow.document:x.merge([],e.childNodes)}},function(e,t){x.fn[e]=function(n,r){var i=x.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=x.filter(r,i)),this.length>1&&(ct[e]||(i=x.unique(i)),lt.test(e)&&(i=i.reverse())),this.pushStack(i)}}),x.extend({filter:function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?x.find.matchesSelector(r,e)?[r]:[]:x.find.matches(e,x.grep(t,function(e){return 1===e.nodeType}))},dir:function(e,n,r){var i=[],o=e[n];while(o&&9!==o.nodeType&&(r===t||1!==o.nodeType||!x(o).is(r)))1===o.nodeType&&i.push(o),o=o[n];return i},sibling:function(e,t){var n=[];for(;e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n}});function ft(e,t,n){if(x.isFunction(t))return x.grep(e,function(e,r){return!!t.call(e,r,e)!==n});if(t.nodeType)return x.grep(e,function(e){return e===t!==n});if("string"==typeof t){if(st.test(t))return x.filter(t,e,n);t=x.filter(t,e)}return x.grep(e,function(e){return x.inArray(e,t)>=0!==n})}function dt(e){var t=ht.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}var ht="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",gt=/ jQuery\d+="(?:null|\d+)"/g,mt=RegExp("<(?:"+ht+")[\\s/>]","i"),yt=/^\s+/,vt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,bt=/<([\w:]+)/,xt=/<tbody/i,wt=/<|&#?\w+;/,Tt=/<(?:script|style|link)/i,Ct=/^(?:checkbox|radio)$/i,Nt=/checked\s*(?:[^=]|=\s*.checked.)/i,kt=/^$|\/(?:java|ecma)script/i,Et=/^true\/(.*)/,St=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,At={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],area:[1,"<map>","</map>"],param:[1,"<object>","</object>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:x.support.htmlSerialize?[0,"",""]:[1,"X<div>","</div>"]},jt=dt(a),Dt=jt.appendChild(a.createElement("div"));At.optgroup=At.option,At.tbody=At.tfoot=At.colgroup=At.caption=At.thead,At.th=At.td,x.fn.extend({text:function(e){return x.access(this,function(e){return e===t?x.text(this):this.empty().append((this[0]&&this[0].ownerDocument||a).createTextNode(e))},null,e,arguments.length)},append:function(){return this.domManip(arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Lt(this,e);t.appendChild(e)}})},prepend:function(){return this.domManip(arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Lt(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return this.domManip(arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return this.domManip(arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},remove:function(e,t){var n,r=e?x.filter(e,this):this,i=0;for(;null!=(n=r[i]);i++)t||1!==n.nodeType||x.cleanData(Ft(n)),n.parentNode&&(t&&x.contains(n.ownerDocument,n)&&_t(Ft(n,"script")),n.parentNode.removeChild(n));return this},empty:function(){var e,t=0;for(;null!=(e=this[t]);t++){1===e.nodeType&&x.cleanData(Ft(e,!1));while(e.firstChild)e.removeChild(e.firstChild);e.options&&x.nodeName(e,"select")&&(e.options.length=0)}return this},clone:function(e,t){return e=null==e?!1:e,t=null==t?e:t,this.map(function(){return x.clone(this,e,t)})},html:function(e){return x.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return 1===n.nodeType?n.innerHTML.replace(gt,""):t;if(!("string"!=typeof e||Tt.test(e)||!x.support.htmlSerialize&&mt.test(e)||!x.support.leadingWhitespace&&yt.test(e)||At[(bt.exec(e)||["",""])[1].toLowerCase()])){e=e.replace(vt,"<$1></$2>");try{for(;i>r;r++)n=this[r]||{},1===n.nodeType&&(x.cleanData(Ft(n,!1)),n.innerHTML=e);n=0}catch(o){}}n&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var e=x.map(this,function(e){return[e.nextSibling,e.parentNode]}),t=0;return this.domManip(arguments,function(n){var r=e[t++],i=e[t++];i&&(r&&r.parentNode!==i&&(r=this.nextSibling),x(this).remove(),i.insertBefore(n,r))},!0),t?this:this.remove()},detach:function(e){return this.remove(e,!0)},domManip:function(e,t,n){e=d.apply([],e);var r,i,o,a,s,l,u=0,c=this.length,p=this,f=c-1,h=e[0],g=x.isFunction(h);if(g||!(1>=c||"string"!=typeof h||x.support.checkClone)&&Nt.test(h))return this.each(function(r){var i=p.eq(r);g&&(e[0]=h.call(this,r,i.html())),i.domManip(e,t,n)});if(c&&(l=x.buildFragment(e,this[0].ownerDocument,!1,!n&&this),r=l.firstChild,1===l.childNodes.length&&(l=r),r)){for(a=x.map(Ft(l,"script"),Ht),o=a.length;c>u;u++)i=l,u!==f&&(i=x.clone(i,!0,!0),o&&x.merge(a,Ft(i,"script"))),t.call(this[u],i,u);if(o)for(s=a[a.length-1].ownerDocument,x.map(a,qt),u=0;o>u;u++)i=a[u],kt.test(i.type||"")&&!x._data(i,"globalEval")&&x.contains(s,i)&&(i.src?x._evalUrl(i.src):x.globalEval((i.text||i.textContent||i.innerHTML||"").replace(St,"")));l=r=null}return this}});function Lt(e,t){return x.nodeName(e,"table")&&x.nodeName(1===t.nodeType?t:t.firstChild,"tr")?e.getElementsByTagName("tbody")[0]||e.appendChild(e.ownerDocument.createElement("tbody")):e}function Ht(e){return e.type=(null!==x.find.attr(e,"type"))+"/"+e.type,e}function qt(e){var t=Et.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function _t(e,t){var n,r=0;for(;null!=(n=e[r]);r++)x._data(n,"globalEval",!t||x._data(t[r],"globalEval"))}function Mt(e,t){if(1===t.nodeType&&x.hasData(e)){var n,r,i,o=x._data(e),a=x._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)x.event.add(t,n,s[n][r])}a.data&&(a.data=x.extend({},a.data))}}function Ot(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!x.support.noCloneEvent&&t[x.expando]){i=x._data(t);for(r in i.events)x.removeEvent(t,r,i.handle);t.removeAttribute(x.expando)}"script"===n&&t.text!==e.text?(Ht(t).text=e.text,qt(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),x.support.html5Clone&&e.innerHTML&&!x.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Ct.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}x.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,t){x.fn[e]=function(e){var n,r=0,i=[],o=x(e),a=o.length-1;for(;a>=r;r++)n=r===a?this:this.clone(!0),x(o[r])[t](n),h.apply(i,n.get());return this.pushStack(i)}});function Ft(e,n){var r,o,a=0,s=typeof e.getElementsByTagName!==i?e.getElementsByTagName(n||"*"):typeof e.querySelectorAll!==i?e.querySelectorAll(n||"*"):t;if(!s)for(s=[],r=e.childNodes||e;null!=(o=r[a]);a++)!n||x.nodeName(o,n)?s.push(o):x.merge(s,Ft(o,n));return n===t||n&&x.nodeName(e,n)?x.merge([e],s):s}function Bt(e){Ct.test(e.type)&&(e.defaultChecked=e.checked)}x.extend({clone:function(e,t,n){var r,i,o,a,s,l=x.contains(e.ownerDocument,e);if(x.support.html5Clone||x.isXMLDoc(e)||!mt.test("<"+e.nodeName+">")?o=e.cloneNode(!0):(Dt.innerHTML=e.outerHTML,Dt.removeChild(o=Dt.firstChild)),!(x.support.noCloneEvent&&x.support.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||x.isXMLDoc(e)))for(r=Ft(o),s=Ft(e),a=0;null!=(i=s[a]);++a)r[a]&&Ot(i,r[a]);if(t)if(n)for(s=s||Ft(e),r=r||Ft(o),a=0;null!=(i=s[a]);a++)Mt(i,r[a]);else Mt(e,o);return r=Ft(o,"script"),r.length>0&&_t(r,!l&&Ft(e,"script")),r=s=i=null,o},buildFragment:function(e,t,n,r){var i,o,a,s,l,u,c,p=e.length,f=dt(t),d=[],h=0;for(;p>h;h++)if(o=e[h],o||0===o)if("object"===x.type(o))x.merge(d,o.nodeType?[o]:o);else if(wt.test(o)){s=s||f.appendChild(t.createElement("div")),l=(bt.exec(o)||["",""])[1].toLowerCase(),c=At[l]||At._default,s.innerHTML=c[1]+o.replace(vt,"<$1></$2>")+c[2],i=c[0];while(i--)s=s.lastChild;if(!x.support.leadingWhitespace&&yt.test(o)&&d.push(t.createTextNode(yt.exec(o)[0])),!x.support.tbody){o="table"!==l||xt.test(o)?"<table>"!==c[1]||xt.test(o)?0:s:s.firstChild,i=o&&o.childNodes.length;while(i--)x.nodeName(u=o.childNodes[i],"tbody")&&!u.childNodes.length&&o.removeChild(u)}x.merge(d,s.childNodes),s.textContent="";while(s.firstChild)s.removeChild(s.firstChild);s=f.lastChild}else d.push(t.createTextNode(o));s&&f.removeChild(s),x.support.appendChecked||x.grep(Ft(d,"input"),Bt),h=0;while(o=d[h++])if((!r||-1===x.inArray(o,r))&&(a=x.contains(o.ownerDocument,o),s=Ft(f.appendChild(o),"script"),a&&_t(s),n)){i=0;while(o=s[i++])kt.test(o.type||"")&&n.push(o)}return s=null,f},cleanData:function(e,t){var n,r,o,a,s=0,l=x.expando,u=x.cache,c=x.support.deleteExpando,f=x.event.special;for(;null!=(n=e[s]);s++)if((t||x.acceptData(n))&&(o=n[l],a=o&&u[o])){if(a.events)for(r in a.events)f[r]?x.event.remove(n,r):x.removeEvent(n,r,a.handle);
+u[o]&&(delete u[o],c?delete n[l]:typeof n.removeAttribute!==i?n.removeAttribute(l):n[l]=null,p.push(o))}},_evalUrl:function(e){return x.ajax({url:e,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})}}),x.fn.extend({wrapAll:function(e){if(x.isFunction(e))return this.each(function(t){x(this).wrapAll(e.call(this,t))});if(this[0]){var t=x(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&1===e.firstChild.nodeType)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return x.isFunction(e)?this.each(function(t){x(this).wrapInner(e.call(this,t))}):this.each(function(){var t=x(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=x.isFunction(e);return this.each(function(n){x(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){x.nodeName(this,"body")||x(this).replaceWith(this.childNodes)}).end()}});var Pt,Rt,Wt,$t=/alpha\([^)]*\)/i,It=/opacity\s*=\s*([^)]*)/,zt=/^(top|right|bottom|left)$/,Xt=/^(none|table(?!-c[ea]).+)/,Ut=/^margin/,Vt=RegExp("^("+w+")(.*)$","i"),Yt=RegExp("^("+w+")(?!px)[a-z%]+$","i"),Jt=RegExp("^([+-])=("+w+")","i"),Gt={BODY:"block"},Qt={position:"absolute",visibility:"hidden",display:"block"},Kt={letterSpacing:0,fontWeight:400},Zt=["Top","Right","Bottom","Left"],en=["Webkit","O","Moz","ms"];function tn(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=en.length;while(i--)if(t=en[i]+n,t in e)return t;return r}function nn(e,t){return e=t||e,"none"===x.css(e,"display")||!x.contains(e.ownerDocument,e)}function rn(e,t){var n,r,i,o=[],a=0,s=e.length;for(;s>a;a++)r=e[a],r.style&&(o[a]=x._data(r,"olddisplay"),n=r.style.display,t?(o[a]||"none"!==n||(r.style.display=""),""===r.style.display&&nn(r)&&(o[a]=x._data(r,"olddisplay",ln(r.nodeName)))):o[a]||(i=nn(r),(n&&"none"!==n||!i)&&x._data(r,"olddisplay",i?n:x.css(r,"display"))));for(a=0;s>a;a++)r=e[a],r.style&&(t&&"none"!==r.style.display&&""!==r.style.display||(r.style.display=t?o[a]||"":"none"));return e}x.fn.extend({css:function(e,n){return x.access(this,function(e,n,r){var i,o,a={},s=0;if(x.isArray(n)){for(o=Rt(e),i=n.length;i>s;s++)a[n[s]]=x.css(e,n[s],!1,o);return a}return r!==t?x.style(e,n,r):x.css(e,n)},e,n,arguments.length>1)},show:function(){return rn(this,!0)},hide:function(){return rn(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){nn(this)?x(this).show():x(this).hide()})}}),x.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Wt(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":x.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var o,a,s,l=x.camelCase(n),u=e.style;if(n=x.cssProps[l]||(x.cssProps[l]=tn(u,l)),s=x.cssHooks[n]||x.cssHooks[l],r===t)return s&&"get"in s&&(o=s.get(e,!1,i))!==t?o:u[n];if(a=typeof r,"string"===a&&(o=Jt.exec(r))&&(r=(o[1]+1)*o[2]+parseFloat(x.css(e,n)),a="number"),!(null==r||"number"===a&&isNaN(r)||("number"!==a||x.cssNumber[l]||(r+="px"),x.support.clearCloneStyle||""!==r||0!==n.indexOf("background")||(u[n]="inherit"),s&&"set"in s&&(r=s.set(e,r,i))===t)))try{u[n]=r}catch(c){}}},css:function(e,n,r,i){var o,a,s,l=x.camelCase(n);return n=x.cssProps[l]||(x.cssProps[l]=tn(e.style,l)),s=x.cssHooks[n]||x.cssHooks[l],s&&"get"in s&&(a=s.get(e,!0,r)),a===t&&(a=Wt(e,n,i)),"normal"===a&&n in Kt&&(a=Kt[n]),""===r||r?(o=parseFloat(a),r===!0||x.isNumeric(o)?o||0:a):a}}),e.getComputedStyle?(Rt=function(t){return e.getComputedStyle(t,null)},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),l=s?s.getPropertyValue(n)||s[n]:t,u=e.style;return s&&(""!==l||x.contains(e.ownerDocument,e)||(l=x.style(e,n)),Yt.test(l)&&Ut.test(n)&&(i=u.width,o=u.minWidth,a=u.maxWidth,u.minWidth=u.maxWidth=u.width=l,l=s.width,u.width=i,u.minWidth=o,u.maxWidth=a)),l}):a.documentElement.currentStyle&&(Rt=function(e){return e.currentStyle},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),l=s?s[n]:t,u=e.style;return null==l&&u&&u[n]&&(l=u[n]),Yt.test(l)&&!zt.test(n)&&(i=u.left,o=e.runtimeStyle,a=o&&o.left,a&&(o.left=e.currentStyle.left),u.left="fontSize"===n?"1em":l,l=u.pixelLeft+"px",u.left=i,a&&(o.left=a)),""===l?"auto":l});function on(e,t,n){var r=Vt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function an(e,t,n,r,i){var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;for(;4>o;o+=2)"margin"===n&&(a+=x.css(e,n+Zt[o],!0,i)),r?("content"===n&&(a-=x.css(e,"padding"+Zt[o],!0,i)),"margin"!==n&&(a-=x.css(e,"border"+Zt[o]+"Width",!0,i))):(a+=x.css(e,"padding"+Zt[o],!0,i),"padding"!==n&&(a+=x.css(e,"border"+Zt[o]+"Width",!0,i)));return a}function sn(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=Rt(e),a=x.support.boxSizing&&"border-box"===x.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=Wt(e,t,o),(0>i||null==i)&&(i=e.style[t]),Yt.test(i))return i;r=a&&(x.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+an(e,t,n||(a?"border":"content"),r,o)+"px"}function ln(e){var t=a,n=Gt[e];return n||(n=un(e,t),"none"!==n&&n||(Pt=(Pt||x("<iframe frameborder='0' width='0' height='0'/>").css("cssText","display:block !important")).appendTo(t.documentElement),t=(Pt[0].contentWindow||Pt[0].contentDocument).document,t.write("<!doctype html><html><body>"),t.close(),n=un(e,t),Pt.detach()),Gt[e]=n),n}function un(e,t){var n=x(t.createElement(e)).appendTo(t.body),r=x.css(n[0],"display");return n.remove(),r}x.each(["height","width"],function(e,n){x.cssHooks[n]={get:function(e,r,i){return r?0===e.offsetWidth&&Xt.test(x.css(e,"display"))?x.swap(e,Qt,function(){return sn(e,n,i)}):sn(e,n,i):t},set:function(e,t,r){var i=r&&Rt(e);return on(e,t,r?an(e,n,r,x.support.boxSizing&&"border-box"===x.css(e,"boxSizing",!1,i),i):0)}}}),x.support.opacity||(x.cssHooks.opacity={get:function(e,t){return It.test((t&&e.currentStyle?e.currentStyle.filter:e.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":t?"1":""},set:function(e,t){var n=e.style,r=e.currentStyle,i=x.isNumeric(t)?"alpha(opacity="+100*t+")":"",o=r&&r.filter||n.filter||"";n.zoom=1,(t>=1||""===t)&&""===x.trim(o.replace($t,""))&&n.removeAttribute&&(n.removeAttribute("filter"),""===t||r&&!r.filter)||(n.filter=$t.test(o)?o.replace($t,i):o+" "+i)}}),x(function(){x.support.reliableMarginRight||(x.cssHooks.marginRight={get:function(e,n){return n?x.swap(e,{display:"inline-block"},Wt,[e,"marginRight"]):t}}),!x.support.pixelPosition&&x.fn.position&&x.each(["top","left"],function(e,n){x.cssHooks[n]={get:function(e,r){return r?(r=Wt(e,n),Yt.test(r)?x(e).position()[n]+"px":r):t}}})}),x.expr&&x.expr.filters&&(x.expr.filters.hidden=function(e){return 0>=e.offsetWidth&&0>=e.offsetHeight||!x.support.reliableHiddenOffsets&&"none"===(e.style&&e.style.display||x.css(e,"display"))},x.expr.filters.visible=function(e){return!x.expr.filters.hidden(e)}),x.each({margin:"",padding:"",border:"Width"},function(e,t){x.cssHooks[e+t]={expand:function(n){var r=0,i={},o="string"==typeof n?n.split(" "):[n];for(;4>r;r++)i[e+Zt[r]+t]=o[r]||o[r-2]||o[0];return i}},Ut.test(e)||(x.cssHooks[e+t].set=on)});var cn=/%20/g,pn=/\[\]$/,fn=/\r?\n/g,dn=/^(?:submit|button|image|reset|file)$/i,hn=/^(?:input|select|textarea|keygen)/i;x.fn.extend({serialize:function(){return x.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=x.prop(this,"elements");return e?x.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!x(this).is(":disabled")&&hn.test(this.nodeName)&&!dn.test(e)&&(this.checked||!Ct.test(e))}).map(function(e,t){var n=x(this).val();return null==n?null:x.isArray(n)?x.map(n,function(e){return{name:t.name,value:e.replace(fn,"\r\n")}}):{name:t.name,value:n.replace(fn,"\r\n")}}).get()}}),x.param=function(e,n){var r,i=[],o=function(e,t){t=x.isFunction(t)?t():null==t?"":t,i[i.length]=encodeURIComponent(e)+"="+encodeURIComponent(t)};if(n===t&&(n=x.ajaxSettings&&x.ajaxSettings.traditional),x.isArray(e)||e.jquery&&!x.isPlainObject(e))x.each(e,function(){o(this.name,this.value)});else for(r in e)gn(r,e[r],n,o);return i.join("&").replace(cn,"+")};function gn(e,t,n,r){var i;if(x.isArray(t))x.each(t,function(t,i){n||pn.test(e)?r(e,i):gn(e+"["+("object"==typeof i?t:"")+"]",i,n,r)});else if(n||"object"!==x.type(t))r(e,t);else for(i in t)gn(e+"["+i+"]",t[i],n,r)}x.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(e,t){x.fn[t]=function(e,n){return arguments.length>0?this.on(t,null,e,n):this.trigger(t)}}),x.fn.extend({hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)},bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)}});var mn,yn,vn=x.now(),bn=/\?/,xn=/#.*$/,wn=/([?&])_=[^&]*/,Tn=/^(.*?):[ \t]*([^\r\n]*)\r?$/gm,Cn=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Nn=/^(?:GET|HEAD)$/,kn=/^\/\//,En=/^([\w.+-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,Sn=x.fn.load,An={},jn={},Dn="*/".concat("*");try{yn=o.href}catch(Ln){yn=a.createElement("a"),yn.href="",yn=yn.href}mn=En.exec(yn.toLowerCase())||[];function Hn(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,o=t.toLowerCase().match(T)||[];if(x.isFunction(n))while(r=o[i++])"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function qn(e,n,r,i){var o={},a=e===jn;function s(l){var u;return o[l]=!0,x.each(e[l]||[],function(e,l){var c=l(n,r,i);return"string"!=typeof c||a||o[c]?a?!(u=c):t:(n.dataTypes.unshift(c),s(c),!1)}),u}return s(n.dataTypes[0])||!o["*"]&&s("*")}function _n(e,n){var r,i,o=x.ajaxSettings.flatOptions||{};for(i in n)n[i]!==t&&((o[i]?e:r||(r={}))[i]=n[i]);return r&&x.extend(!0,e,r),e}x.fn.load=function(e,n,r){if("string"!=typeof e&&Sn)return Sn.apply(this,arguments);var i,o,a,s=this,l=e.indexOf(" ");return l>=0&&(i=e.slice(l,e.length),e=e.slice(0,l)),x.isFunction(n)?(r=n,n=t):n&&"object"==typeof n&&(a="POST"),s.length>0&&x.ajax({url:e,type:a,dataType:"html",data:n}).done(function(e){o=arguments,s.html(i?x("<div>").append(x.parseHTML(e)).find(i):e)}).complete(r&&function(e,t){s.each(r,o||[e.responseText,t,e])}),this},x.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){x.fn[t]=function(e){return this.on(t,e)}}),x.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:yn,type:"GET",isLocal:Cn.test(mn[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Dn,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":x.parseJSON,"text xml":x.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?_n(_n(e,x.ajaxSettings),t):_n(x.ajaxSettings,e)},ajaxPrefilter:Hn(An),ajaxTransport:Hn(jn),ajax:function(e,n){"object"==typeof e&&(n=e,e=t),n=n||{};var r,i,o,a,s,l,u,c,p=x.ajaxSetup({},n),f=p.context||p,d=p.context&&(f.nodeType||f.jquery)?x(f):x.event,h=x.Deferred(),g=x.Callbacks("once memory"),m=p.statusCode||{},y={},v={},b=0,w="canceled",C={readyState:0,getResponseHeader:function(e){var t;if(2===b){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===b?a:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return b||(e=v[n]=v[n]||e,y[e]=t),this},overrideMimeType:function(e){return b||(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>b)for(t in e)m[t]=[m[t],e[t]];else C.always(e[C.status]);return this},abort:function(e){var t=e||w;return u&&u.abort(t),k(0,t),this}};if(h.promise(C).complete=g.add,C.success=C.done,C.error=C.fail,p.url=((e||p.url||yn)+"").replace(xn,"").replace(kn,mn[1]+"//"),p.type=n.method||n.type||p.method||p.type,p.dataTypes=x.trim(p.dataType||"*").toLowerCase().match(T)||[""],null==p.crossDomain&&(r=En.exec(p.url.toLowerCase()),p.crossDomain=!(!r||r[1]===mn[1]&&r[2]===mn[2]&&(r[3]||("http:"===r[1]?"80":"443"))===(mn[3]||("http:"===mn[1]?"80":"443")))),p.data&&p.processData&&"string"!=typeof p.data&&(p.data=x.param(p.data,p.traditional)),qn(An,p,n,C),2===b)return C;l=p.global,l&&0===x.active++&&x.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!Nn.test(p.type),o=p.url,p.hasContent||(p.data&&(o=p.url+=(bn.test(o)?"&":"?")+p.data,delete p.data),p.cache===!1&&(p.url=wn.test(o)?o.replace(wn,"$1_="+vn++):o+(bn.test(o)?"&":"?")+"_="+vn++)),p.ifModified&&(x.lastModified[o]&&C.setRequestHeader("If-Modified-Since",x.lastModified[o]),x.etag[o]&&C.setRequestHeader("If-None-Match",x.etag[o])),(p.data&&p.hasContent&&p.contentType!==!1||n.contentType)&&C.setRequestHeader("Content-Type",p.contentType),C.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+Dn+"; q=0.01":""):p.accepts["*"]);for(i in p.headers)C.setRequestHeader(i,p.headers[i]);if(p.beforeSend&&(p.beforeSend.call(f,C,p)===!1||2===b))return C.abort();w="abort";for(i in{success:1,error:1,complete:1})C[i](p[i]);if(u=qn(jn,p,n,C)){C.readyState=1,l&&d.trigger("ajaxSend",[C,p]),p.async&&p.timeout>0&&(s=setTimeout(function(){C.abort("timeout")},p.timeout));try{b=1,u.send(y,k)}catch(N){if(!(2>b))throw N;k(-1,N)}}else k(-1,"No Transport");function k(e,n,r,i){var c,y,v,w,T,N=n;2!==b&&(b=2,s&&clearTimeout(s),u=t,a=i||"",C.readyState=e>0?4:0,c=e>=200&&300>e||304===e,r&&(w=Mn(p,C,r)),w=On(p,w,C,c),c?(p.ifModified&&(T=C.getResponseHeader("Last-Modified"),T&&(x.lastModified[o]=T),T=C.getResponseHeader("etag"),T&&(x.etag[o]=T)),204===e||"HEAD"===p.type?N="nocontent":304===e?N="notmodified":(N=w.state,y=w.data,v=w.error,c=!v)):(v=N,(e||!N)&&(N="error",0>e&&(e=0))),C.status=e,C.statusText=(n||N)+"",c?h.resolveWith(f,[y,N,C]):h.rejectWith(f,[C,N,v]),C.statusCode(m),m=t,l&&d.trigger(c?"ajaxSuccess":"ajaxError",[C,p,c?y:v]),g.fireWith(f,[C,N]),l&&(d.trigger("ajaxComplete",[C,p]),--x.active||x.event.trigger("ajaxStop")))}return C},getJSON:function(e,t,n){return x.get(e,t,n,"json")},getScript:function(e,n){return x.get(e,t,n,"script")}}),x.each(["get","post"],function(e,n){x[n]=function(e,r,i,o){return x.isFunction(r)&&(o=o||i,i=r,r=t),x.ajax({url:e,type:n,dataType:o,data:r,success:i})}});function Mn(e,n,r){var i,o,a,s,l=e.contents,u=e.dataTypes;while("*"===u[0])u.shift(),o===t&&(o=e.mimeType||n.getResponseHeader("Content-Type"));if(o)for(s in l)if(l[s]&&l[s].test(o)){u.unshift(s);break}if(u[0]in r)a=u[0];else{for(s in r){if(!u[0]||e.converters[s+" "+u[0]]){a=s;break}i||(i=s)}a=a||i}return a?(a!==u[0]&&u.unshift(a),r[a]):t}function On(e,t,n,r){var i,o,a,s,l,u={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)u[a.toLowerCase()]=e.converters[a];o=c.shift();while(o)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!l&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),l=o,o=c.shift())if("*"===o)o=l;else if("*"!==l&&l!==o){if(a=u[l+" "+o]||u["* "+o],!a)for(i in u)if(s=i.split(" "),s[1]===o&&(a=u[l+" "+s[0]]||u["* "+s[0]])){a===!0?a=u[i]:u[i]!==!0&&(o=s[0],c.unshift(s[1]));break}if(a!==!0)if(a&&e["throws"])t=a(t);else try{t=a(t)}catch(p){return{state:"parsererror",error:a?p:"No conversion from "+l+" to "+o}}}return{state:"success",data:t}}x.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return x.globalEval(e),e}}}),x.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),x.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=a.head||x("head")[0]||a.documentElement;return{send:function(t,i){n=a.createElement("script"),n.async=!0,e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,t){(t||!n.readyState||/loaded|complete/.test(n.readyState))&&(n.onload=n.onreadystatechange=null,n.parentNode&&n.parentNode.removeChild(n),n=null,t||i(200,"success"))},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(t,!0)}}}});var Fn=[],Bn=/(=)\?(?=&|$)|\?\?/;x.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Fn.pop()||x.expando+"_"+vn++;return this[e]=!0,e}}),x.ajaxPrefilter("json jsonp",function(n,r,i){var o,a,s,l=n.jsonp!==!1&&(Bn.test(n.url)?"url":"string"==typeof n.data&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Bn.test(n.data)&&"data");return l||"jsonp"===n.dataTypes[0]?(o=n.jsonpCallback=x.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,l?n[l]=n[l].replace(Bn,"$1"+o):n.jsonp!==!1&&(n.url+=(bn.test(n.url)?"&":"?")+n.jsonp+"="+o),n.converters["script json"]=function(){return s||x.error(o+" was not called"),s[0]},n.dataTypes[0]="json",a=e[o],e[o]=function(){s=arguments},i.always(function(){e[o]=a,n[o]&&(n.jsonpCallback=r.jsonpCallback,Fn.push(o)),s&&x.isFunction(a)&&a(s[0]),s=a=t}),"script"):t});var Pn,Rn,Wn=0,$n=e.ActiveXObject&&function(){var e;for(e in Pn)Pn[e](t,!0)};function In(){try{return new e.XMLHttpRequest}catch(t){}}function zn(){try{return new e.ActiveXObject("Microsoft.XMLHTTP")}catch(t){}}x.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&In()||zn()}:In,Rn=x.ajaxSettings.xhr(),x.support.cors=!!Rn&&"withCredentials"in Rn,Rn=x.support.ajax=!!Rn,Rn&&x.ajaxTransport(function(n){if(!n.crossDomain||x.support.cors){var r;return{send:function(i,o){var a,s,l=n.xhr();if(n.username?l.open(n.type,n.url,n.async,n.username,n.password):l.open(n.type,n.url,n.async),n.xhrFields)for(s in n.xhrFields)l[s]=n.xhrFields[s];n.mimeType&&l.overrideMimeType&&l.overrideMimeType(n.mimeType),n.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest");try{for(s in i)l.setRequestHeader(s,i[s])}catch(u){}l.send(n.hasContent&&n.data||null),r=function(e,i){var s,u,c,p;try{if(r&&(i||4===l.readyState))if(r=t,a&&(l.onreadystatechange=x.noop,$n&&delete Pn[a]),i)4!==l.readyState&&l.abort();else{p={},s=l.status,u=l.getAllResponseHeaders(),"string"==typeof l.responseText&&(p.text=l.responseText);try{c=l.statusText}catch(f){c=""}s||!n.isLocal||n.crossDomain?1223===s&&(s=204):s=p.text?200:404}}catch(d){i||o(-1,d)}p&&o(s,c,p,u)},n.async?4===l.readyState?setTimeout(r):(a=++Wn,$n&&(Pn||(Pn={},x(e).unload($n)),Pn[a]=r),l.onreadystatechange=r):r()},abort:function(){r&&r(t,!0)}}}});var Xn,Un,Vn=/^(?:toggle|show|hide)$/,Yn=RegExp("^(?:([+-])=|)("+w+")([a-z%]*)$","i"),Jn=/queueHooks$/,Gn=[nr],Qn={"*":[function(e,t){var n=this.createTween(e,t),r=n.cur(),i=Yn.exec(t),o=i&&i[3]||(x.cssNumber[e]?"":"px"),a=(x.cssNumber[e]||"px"!==o&&+r)&&Yn.exec(x.css(n.elem,e)),s=1,l=20;if(a&&a[3]!==o){o=o||a[3],i=i||[],a=+r||1;do s=s||".5",a/=s,x.style(n.elem,e,a+o);while(s!==(s=n.cur()/r)&&1!==s&&--l)}return i&&(a=n.start=+a||+r||0,n.unit=o,n.end=i[1]?a+(i[1]+1)*i[2]:+i[2]),n}]};function Kn(){return setTimeout(function(){Xn=t}),Xn=x.now()}function Zn(e,t,n){var r,i=(Qn[t]||[]).concat(Qn["*"]),o=0,a=i.length;for(;a>o;o++)if(r=i[o].call(n,t,e))return r}function er(e,t,n){var r,i,o=0,a=Gn.length,s=x.Deferred().always(function(){delete l.elem}),l=function(){if(i)return!1;var t=Xn||Kn(),n=Math.max(0,u.startTime+u.duration-t),r=n/u.duration||0,o=1-r,a=0,l=u.tweens.length;for(;l>a;a++)u.tweens[a].run(o);return s.notifyWith(e,[u,o,n]),1>o&&l?n:(s.resolveWith(e,[u]),!1)},u=s.promise({elem:e,props:x.extend({},t),opts:x.extend(!0,{specialEasing:{}},n),originalProperties:t,originalOptions:n,startTime:Xn||Kn(),duration:n.duration,tweens:[],createTween:function(t,n){var r=x.Tween(e,u.opts,t,n,u.opts.specialEasing[t]||u.opts.easing);return u.tweens.push(r),r},stop:function(t){var n=0,r=t?u.tweens.length:0;if(i)return this;for(i=!0;r>n;n++)u.tweens[n].run(1);return t?s.resolveWith(e,[u,t]):s.rejectWith(e,[u,t]),this}}),c=u.props;for(tr(c,u.opts.specialEasing);a>o;o++)if(r=Gn[o].call(u,e,c,u.opts))return r;return x.map(c,Zn,u),x.isFunction(u.opts.start)&&u.opts.start.call(e,u),x.fx.timer(x.extend(l,{elem:e,anim:u,queue:u.opts.queue})),u.progress(u.opts.progress).done(u.opts.done,u.opts.complete).fail(u.opts.fail).always(u.opts.always)}function tr(e,t){var n,r,i,o,a;for(n in e)if(r=x.camelCase(n),i=t[r],o=e[n],x.isArray(o)&&(i=o[1],o=e[n]=o[0]),n!==r&&(e[r]=o,delete e[n]),a=x.cssHooks[r],a&&"expand"in a){o=a.expand(o),delete e[r];for(n in o)n in e||(e[n]=o[n],t[n]=i)}else t[r]=i}x.Animation=x.extend(er,{tweener:function(e,t){x.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;i>r;r++)n=e[r],Qn[n]=Qn[n]||[],Qn[n].unshift(t)},prefilter:function(e,t){t?Gn.unshift(e):Gn.push(e)}});function nr(e,t,n){var r,i,o,a,s,l,u=this,c={},p=e.style,f=e.nodeType&&nn(e),d=x._data(e,"fxshow");n.queue||(s=x._queueHooks(e,"fx"),null==s.unqueued&&(s.unqueued=0,l=s.empty.fire,s.empty.fire=function(){s.unqueued||l()}),s.unqueued++,u.always(function(){u.always(function(){s.unqueued--,x.queue(e,"fx").length||s.empty.fire()})})),1===e.nodeType&&("height"in t||"width"in t)&&(n.overflow=[p.overflow,p.overflowX,p.overflowY],"inline"===x.css(e,"display")&&"none"===x.css(e,"float")&&(x.support.inlineBlockNeedsLayout&&"inline"!==ln(e.nodeName)?p.zoom=1:p.display="inline-block")),n.overflow&&(p.overflow="hidden",x.support.shrinkWrapBlocks||u.always(function(){p.overflow=n.overflow[0],p.overflowX=n.overflow[1],p.overflowY=n.overflow[2]}));for(r in t)if(i=t[r],Vn.exec(i)){if(delete t[r],o=o||"toggle"===i,i===(f?"hide":"show"))continue;c[r]=d&&d[r]||x.style(e,r)}if(!x.isEmptyObject(c)){d?"hidden"in d&&(f=d.hidden):d=x._data(e,"fxshow",{}),o&&(d.hidden=!f),f?x(e).show():u.done(function(){x(e).hide()}),u.done(function(){var t;x._removeData(e,"fxshow");for(t in c)x.style(e,t,c[t])});for(r in c)a=Zn(f?d[r]:0,r,u),r in d||(d[r]=a.start,f&&(a.end=a.start,a.start="width"===r||"height"===r?1:0))}}function rr(e,t,n,r,i){return new rr.prototype.init(e,t,n,r,i)}x.Tween=rr,rr.prototype={constructor:rr,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||"swing",this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(x.cssNumber[n]?"":"px")},cur:function(){var e=rr.propHooks[this.prop];return e&&e.get?e.get(this):rr.propHooks._default.get(this)},run:function(e){var t,n=rr.propHooks[this.prop];return this.pos=t=this.options.duration?x.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):rr.propHooks._default.set(this),this}},rr.prototype.init.prototype=rr.prototype,rr.propHooks={_default:{get:function(e){var t;return null==e.elem[e.prop]||e.elem.style&&null!=e.elem.style[e.prop]?(t=x.css(e.elem,e.prop,""),t&&"auto"!==t?t:0):e.elem[e.prop]},set:function(e){x.fx.step[e.prop]?x.fx.step[e.prop](e):e.elem.style&&(null!=e.elem.style[x.cssProps[e.prop]]||x.cssHooks[e.prop])?x.style(e.elem,e.prop,e.now+e.unit):e.elem[e.prop]=e.now}}},rr.propHooks.scrollTop=rr.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},x.each(["toggle","show","hide"],function(e,t){var n=x.fn[t];x.fn[t]=function(e,r,i){return null==e||"boolean"==typeof e?n.apply(this,arguments):this.animate(ir(t,!0),e,r,i)}}),x.fn.extend({fadeTo:function(e,t,n,r){return this.filter(nn).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(e,t,n,r){var i=x.isEmptyObject(e),o=x.speed(t,n,r),a=function(){var t=er(this,x.extend({},e),o);(i||x._data(this,"finish"))&&t.stop(!0)};return a.finish=a,i||o.queue===!1?this.each(a):this.queue(o.queue,a)},stop:function(e,n,r){var i=function(e){var t=e.stop;delete e.stop,t(r)};return"string"!=typeof e&&(r=n,n=e,e=t),n&&e!==!1&&this.queue(e||"fx",[]),this.each(function(){var t=!0,n=null!=e&&e+"queueHooks",o=x.timers,a=x._data(this);if(n)a[n]&&a[n].stop&&i(a[n]);else for(n in a)a[n]&&a[n].stop&&Jn.test(n)&&i(a[n]);for(n=o.length;n--;)o[n].elem!==this||null!=e&&o[n].queue!==e||(o[n].anim.stop(r),t=!1,o.splice(n,1));(t||!r)&&x.dequeue(this,e)})},finish:function(e){return e!==!1&&(e=e||"fx"),this.each(function(){var t,n=x._data(this),r=n[e+"queue"],i=n[e+"queueHooks"],o=x.timers,a=r?r.length:0;for(n.finish=!0,x.queue(this,e,[]),i&&i.stop&&i.stop.call(this,!0),t=o.length;t--;)o[t].elem===this&&o[t].queue===e&&(o[t].anim.stop(!0),o.splice(t,1));for(t=0;a>t;t++)r[t]&&r[t].finish&&r[t].finish.call(this);delete n.finish})}});function ir(e,t){var n,r={height:e},i=0;for(t=t?1:0;4>i;i+=2-t)n=Zt[i],r["margin"+n]=r["padding"+n]=e;return t&&(r.opacity=r.width=e),r}x.each({slideDown:ir("show"),slideUp:ir("hide"),slideToggle:ir("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,t){x.fn[e]=function(e,n,r){return this.animate(t,e,n,r)}}),x.speed=function(e,t,n){var r=e&&"object"==typeof e?x.extend({},e):{complete:n||!n&&t||x.isFunction(e)&&e,duration:e,easing:n&&t||t&&!x.isFunction(t)&&t};return r.duration=x.fx.off?0:"number"==typeof r.duration?r.duration:r.duration in x.fx.speeds?x.fx.speeds[r.duration]:x.fx.speeds._default,(null==r.queue||r.queue===!0)&&(r.queue="fx"),r.old=r.complete,r.complete=function(){x.isFunction(r.old)&&r.old.call(this),r.queue&&x.dequeue(this,r.queue)},r},x.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2}},x.timers=[],x.fx=rr.prototype.init,x.fx.tick=function(){var e,n=x.timers,r=0;for(Xn=x.now();n.length>r;r++)e=n[r],e()||n[r]!==e||n.splice(r--,1);n.length||x.fx.stop(),Xn=t},x.fx.timer=function(e){e()&&x.timers.push(e)&&x.fx.start()},x.fx.interval=13,x.fx.start=function(){Un||(Un=setInterval(x.fx.tick,x.fx.interval))},x.fx.stop=function(){clearInterval(Un),Un=null},x.fx.speeds={slow:600,fast:200,_default:400},x.fx.step={},x.expr&&x.expr.filters&&(x.expr.filters.animated=function(e){return x.grep(x.timers,function(t){return e===t.elem}).length}),x.fn.offset=function(e){if(arguments.length)return e===t?this:this.each(function(t){x.offset.setOffset(this,e,t)});var n,r,o={top:0,left:0},a=this[0],s=a&&a.ownerDocument;if(s)return n=s.documentElement,x.contains(n,a)?(typeof a.getBoundingClientRect!==i&&(o=a.getBoundingClientRect()),r=or(s),{top:o.top+(r.pageYOffset||n.scrollTop)-(n.clientTop||0),left:o.left+(r.pageXOffset||n.scrollLeft)-(n.clientLeft||0)}):o},x.offset={setOffset:function(e,t,n){var r=x.css(e,"position");"static"===r&&(e.style.position="relative");var i=x(e),o=i.offset(),a=x.css(e,"top"),s=x.css(e,"left"),l=("absolute"===r||"fixed"===r)&&x.inArray("auto",[a,s])>-1,u={},c={},p,f;l?(c=i.position(),p=c.top,f=c.left):(p=parseFloat(a)||0,f=parseFloat(s)||0),x.isFunction(t)&&(t=t.call(e,n,o)),null!=t.top&&(u.top=t.top-o.top+p),null!=t.left&&(u.left=t.left-o.left+f),"using"in t?t.using.call(e,u):i.css(u)}},x.fn.extend({position:function(){if(this[0]){var e,t,n={top:0,left:0},r=this[0];return"fixed"===x.css(r,"position")?t=r.getBoundingClientRect():(e=this.offsetParent(),t=this.offset(),x.nodeName(e[0],"html")||(n=e.offset()),n.top+=x.css(e[0],"borderTopWidth",!0),n.left+=x.css(e[0],"borderLeftWidth",!0)),{top:t.top-n.top-x.css(r,"marginTop",!0),left:t.left-n.left-x.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||s;while(e&&!x.nodeName(e,"html")&&"static"===x.css(e,"position"))e=e.offsetParent;return e||s})}}),x.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);x.fn[e]=function(i){return x.access(this,function(e,i,o){var a=or(e);return o===t?a?n in a?a[n]:a.document.documentElement[i]:e[i]:(a?a.scrollTo(r?x(a).scrollLeft():o,r?o:x(a).scrollTop()):e[i]=o,t)},e,i,arguments.length,null)}});function or(e){return x.isWindow(e)?e:9===e.nodeType?e.defaultView||e.parentWindow:!1}x.each({Height:"height",Width:"width"},function(e,n){x.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){x.fn[i]=function(i,o){var a=arguments.length&&(r||"boolean"!=typeof i),s=r||(i===!0||o===!0?"margin":"border");return x.access(this,function(n,r,i){var o;return x.isWindow(n)?n.document.documentElement["client"+e]:9===n.nodeType?(o=n.documentElement,Math.max(n.body["scroll"+e],o["scroll"+e],n.body["offset"+e],o["offset"+e],o["client"+e])):i===t?x.css(n,r,s):x.style(n,r,i,s)},n,a?i:t,a,null)}})}),x.fn.size=function(){return this.length},x.fn.andSelf=x.fn.addBack,"object"==typeof module&&module&&"object"==typeof module.exports?module.exports=x:(e.jQuery=e.$=x,"function"==typeof define&&define.amd&&define("jquery",[],function(){return x}))})(window);
diff --git a/public/js/ueditor/third-party/webuploader/webuploader.css b/public/js/ueditor/third-party/webuploader/webuploader.css
new file mode 100644
index 0000000..12f451f
--- /dev/null
+++ b/public/js/ueditor/third-party/webuploader/webuploader.css
@@ -0,0 +1,28 @@
+.webuploader-container {
+	position: relative;
+}
+.webuploader-element-invisible {
+	position: absolute !important;
+	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px,1px,1px,1px);
+}
+.webuploader-pick {
+	position: relative;
+	display: inline-block;
+	cursor: pointer;
+	background: #00b7ee;
+	padding: 10px 15px;
+	color: #fff;
+	text-align: center;
+	border-radius: 3px;
+	overflow: hidden;
+}
+.webuploader-pick-hover {
+	background: #00a2d4;
+}
+
+.webuploader-pick-disable {
+	opacity: 0.6;
+	pointer-events:none;
+}
+
diff --git a/public/js/ueditor/third-party/webuploader/webuploader.custom.js b/public/js/ueditor/third-party/webuploader/webuploader.custom.js
new file mode 100644
index 0000000..583a0b8
--- /dev/null
+++ b/public/js/ueditor/third-party/webuploader/webuploader.custom.js
@@ -0,0 +1,5670 @@
+/*! WebUploader 0.1.2 */
+
+
+/**
+ * @fileOverview 让内部各个部件的代码可以用[amd](https://github.com/amdjs/amdjs-api/wiki/AMD)模块定义方式组织起来。
+ *
+ * AMD API 内部的简单不完全实现，请忽略。只有当WebUploader被合并成一个文件的时候才会引入。
+ */
+(function( root, factory ) {
+    var modules = {},
+
+        // 内部require, 简单不完全实现。
+        // https://github.com/amdjs/amdjs-api/wiki/require
+        _require = function( deps, callback ) {
+            var args, len, i;
+
+            // 如果deps不是数组，则直接返回指定module
+            if ( typeof deps === 'string' ) {
+                return getModule( deps );
+            } else {
+                args = [];
+                for( len = deps.length, i = 0; i < len; i++ ) {
+                    args.push( getModule( deps[ i ] ) );
+                }
+
+                return callback.apply( null, args );
+            }
+        },
+
+        // 内部define，暂时不支持不指定id.
+        _define = function( id, deps, factory ) {
+            if ( arguments.length === 2 ) {
+                factory = deps;
+                deps = null;
+            }
+
+            _require( deps || [], function() {
+                setModule( id, factory, arguments );
+            });
+        },
+
+        // 设置module, 兼容CommonJs写法。
+        setModule = function( id, factory, args ) {
+            var module = {
+                    exports: factory
+                },
+                returned;
+
+            if ( typeof factory === 'function' ) {
+                args.length || (args = [ _require, module.exports, module ]);
+                returned = factory.apply( null, args );
+                returned !== undefined && (module.exports = returned);
+            }
+
+            modules[ id ] = module.exports;
+        },
+
+        // 根据id获取module
+        getModule = function( id ) {
+            var module = modules[ id ] || root[ id ];
+
+            if ( !module ) {
+                throw new Error( '`' + id + '` is undefined' );
+            }
+
+            return module;
+        },
+
+        // 将所有modules，将路径ids装换成对象。
+        exportsTo = function( obj ) {
+            var key, host, parts, part, last, ucFirst;
+
+            // make the first character upper case.
+            ucFirst = function( str ) {
+                return str && (str.charAt( 0 ).toUpperCase() + str.substr( 1 ));
+            };
+
+            for ( key in modules ) {
+                host = obj;
+
+                if ( !modules.hasOwnProperty( key ) ) {
+                    continue;
+                }
+
+                parts = key.split('/');
+                last = ucFirst( parts.pop() );
+
+                while( (part = ucFirst( parts.shift() )) ) {
+                    host[ part ] = host[ part ] || {};
+                    host = host[ part ];
+                }
+
+                host[ last ] = modules[ key ];
+            }
+        },
+
+        exports = factory( root, _define, _require ),
+        origin;
+
+    // exports every module.
+    exportsTo( exports );
+
+    if ( typeof module === 'object' && typeof module.exports === 'object' ) {
+
+        // For CommonJS and CommonJS-like environments where a proper window is present,
+        module.exports = exports;
+    } else if ( typeof define === 'function' && define.amd ) {
+
+        // Allow using this built library as an AMD module
+        // in another project. That other project will only
+        // see this AMD call, not the internal modules in
+        // the closure below.
+        define([], exports );
+    } else {
+
+        // Browser globals case. Just assign the
+        // result to a property on the global.
+        origin = root.WebUploader;
+        root.WebUploader = exports;
+        root.WebUploader.noConflict = function() {
+            root.WebUploader = origin;
+        };
+    }
+})( this, function( window, define, require ) {
+
+
+    /**
+     * @fileOverview jQuery or Zepto
+     */
+    define('dollar-third',[],function() {
+        return window.jQuery || window.Zepto;
+    });
+    /**
+     * @fileOverview Dom 操作相关
+     */
+    define('dollar',[
+        'dollar-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 使用jQuery的Promise
+     */
+    define('promise-third',[
+        'dollar'
+    ], function( $ ) {
+        return {
+            Deferred: $.Deferred,
+            when: $.when,
+    
+            isPromise: function( anything ) {
+                return anything && typeof anything.then === 'function';
+            }
+        };
+    });
+    /**
+     * @fileOverview Promise/A+
+     */
+    define('promise',[
+        'promise-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 基础类方法。
+     */
+    
+    /**
+     * Web Uploader内部类的详细说明，以下提及的功能类，都可以在`WebUploader`这个变量中访问到。
+     *
+     * As you know, Web Uploader的每个文件都是用过[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)规范中的`define`组织起来的, 每个Module都会有个module id.
+     * 默认module id该文件的路径，而此路径将会转化成名字空间存放在WebUploader中。如：
+     *
+     * * module `base`：WebUploader.Base
+     * * module `file`: WebUploader.File
+     * * module `lib/dnd`: WebUploader.Lib.Dnd
+     * * module `runtime/html5/dnd`: WebUploader.Runtime.Html5.Dnd
+     *
+     *
+     * 以下文档将可能省略`WebUploader`前缀。
+     * @module WebUploader
+     * @title WebUploader API文档
+     */
+    define('base',[
+        'dollar',
+        'promise'
+    ], function( $, promise ) {
+    
+        var noop = function() {},
+            call = Function.call;
+    
+        // http://jsperf.com/uncurrythis
+        // 反科里化
+        function uncurryThis( fn ) {
+            return function() {
+                return call.apply( fn, arguments );
+            };
+        }
+    
+        function bindFn( fn, context ) {
+            return function() {
+                return fn.apply( context, arguments );
+            };
+        }
+    
+        function createObject( proto ) {
+            var f;
+    
+            if ( Object.create ) {
+                return Object.create( proto );
+            } else {
+                f = function() {};
+                f.prototype = proto;
+                return new f();
+            }
+        }
+    
+    
+        /**
+         * 基础类，提供一些简单常用的方法。
+         * @class Base
+         */
+        return {
+    
+            /**
+             * @property {String} version 当前版本号。
+             */
+            version: '0.1.2',
+    
+            /**
+             * @property {jQuery|Zepto} $ 引用依赖的jQuery或者Zepto对象。
+             */
+            $: $,
+    
+            Deferred: promise.Deferred,
+    
+            isPromise: promise.isPromise,
+    
+            when: promise.when,
+    
+            /**
+             * @description  简单的浏览器检查结果。
+             *
+             * * `webkit`  webkit版本号，如果浏览器为非webkit内核，此属性为`undefined`。
+             * * `chrome`  chrome浏览器版本号，如果浏览器为chrome，此属性为`undefined`。
+             * * `ie`  ie浏览器版本号，如果浏览器为非ie，此属性为`undefined`。**暂不支持ie10+**
+             * * `firefox`  firefox浏览器版本号，如果浏览器为非firefox，此属性为`undefined`。
+             * * `safari`  safari浏览器版本号，如果浏览器为非safari，此属性为`undefined`。
+             * * `opera`  opera浏览器版本号，如果浏览器为非opera，此属性为`undefined`。
+             *
+             * @property {Object} [browser]
+             */
+            browser: (function( ua ) {
+                var ret = {},
+                    webkit = ua.match( /WebKit\/([\d.]+)/ ),
+                    chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
+                        ua.match( /CriOS\/([\d.]+)/ ),
+    
+                    ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
+                        ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i),
+                    firefox = ua.match( /Firefox\/([\d.]+)/ ),
+                    safari = ua.match( /Safari\/([\d.]+)/ ),
+                    opera = ua.match( /OPR\/([\d.]+)/ );
+    
+                webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
+                chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
+                ie && (ret.ie = parseFloat( ie[ 1 ] ));
+                firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
+                safari && (ret.safari = parseFloat( safari[ 1 ] ));
+                opera && (ret.opera = parseFloat( opera[ 1 ] ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * @description  操作系统检查结果。
+             *
+             * * `android`  如果在android浏览器环境下，此值为对应的android版本号，否则为`undefined`。
+             * * `ios` 如果在ios浏览器环境下，此值为对应的ios版本号，否则为`undefined`。
+             * @property {Object} [os]
+             */
+            os: (function( ua ) {
+                var ret = {},
+    
+                    // osx = !!ua.match( /\(Macintosh\; Intel / ),
+                    android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
+                    ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );
+    
+                // osx && (ret.osx = true);
+                android && (ret.android = parseFloat( android[ 1 ] ));
+                ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * 实现类与类之间的继承。
+             * @method inherits
+             * @grammar Base.inherits( super ) => child
+             * @grammar Base.inherits( super, protos ) => child
+             * @grammar Base.inherits( super, protos, statics ) => child
+             * @param  {Class} super 父类
+             * @param  {Object | Function} [protos] 子类或者对象。如果对象中包含constructor，子类将是用此属性值。
+             * @param  {Function} [protos.constructor] 子类构造器，不指定的话将创建个临时的直接执行父类构造器的方法。
+             * @param  {Object} [statics] 静态属性或方法。
+             * @return {Class} 返回子类。
+             * @example
+             * function Person() {
+             *     console.log( 'Super' );
+             * }
+             * Person.prototype.hello = function() {
+             *     console.log( 'hello' );
+             * };
+             *
+             * var Manager = Base.inherits( Person, {
+             *     world: function() {
+             *         console.log( 'World' );
+             *     }
+             * });
+             *
+             * // 因为没有指定构造器，父类的构造器将会执行。
+             * var instance = new Manager();    // => Super
+             *
+             * // 继承子父类的方法
+             * instance.hello();    // => hello
+             * instance.world();    // => World
+             *
+             * // 子类的__super__属性指向父类
+             * console.log( Manager.__super__ === Person );    // => true
+             */
+            inherits: function( Super, protos, staticProtos ) {
+                var child;
+    
+                if ( typeof protos === 'function' ) {
+                    child = protos;
+                    protos = null;
+                } else if ( protos && protos.hasOwnProperty('constructor') ) {
+                    child = protos.constructor;
+                } else {
+                    child = function() {
+                        return Super.apply( this, arguments );
+                    };
+                }
+    
+                // 复制静态方法
+                $.extend( true, child, Super, staticProtos || {} );
+    
+                /* jshint camelcase: false */
+    
+                // 让子类的__super__属性指向父类。
+                child.__super__ = Super.prototype;
+    
+                // 构建原型，添加原型方法或属性。
+                // 暂时用Object.create实现。
+                child.prototype = createObject( Super.prototype );
+                protos && $.extend( true, child.prototype, protos );
+    
+                return child;
+            },
+    
+            /**
+             * 一个不做任何事情的方法。可以用来赋值给默认的callback.
+             * @method noop
+             */
+            noop: noop,
+    
+            /**
+             * 返回一个新的方法，此方法将已指定的`context`来执行。
+             * @grammar Base.bindFn( fn, context ) => Function
+             * @method bindFn
+             * @example
+             * var doSomething = function() {
+             *         console.log( this.name );
+             *     },
+             *     obj = {
+             *         name: 'Object Name'
+             *     },
+             *     aliasFn = Base.bind( doSomething, obj );
+             *
+             *  aliasFn();    // => Object Name
+             *
+             */
+            bindFn: bindFn,
+    
+            /**
+             * 引用Console.log如果存在的话，否则引用一个[空函数loop](#WebUploader:Base.log)。
+             * @grammar Base.log( args... ) => undefined
+             * @method log
+             */
+            log: (function() {
+                if ( window.console ) {
+                    return bindFn( console.log, console );
+                }
+                return noop;
+            })(),
+    
+            nextTick: (function() {
+    
+                return function( cb ) {
+                    setTimeout( cb, 1 );
+                };
+    
+                // @bug 当浏览器不在当前窗口时就停了。
+                // var next = window.requestAnimationFrame ||
+                //     window.webkitRequestAnimationFrame ||
+                //     window.mozRequestAnimationFrame ||
+                //     function( cb ) {
+                //         window.setTimeout( cb, 1000 / 60 );
+                //     };
+    
+                // // fix: Uncaught TypeError: Illegal invocation
+                // return bindFn( next, window );
+            })(),
+    
+            /**
+             * 被[uncurrythis](http://www.2ality.com/2011/11/uncurrying-this.html)的数组slice方法。
+             * 将用来将非数组对象转化成数组对象。
+             * @grammar Base.slice( target, start[, end] ) => Array
+             * @method slice
+             * @example
+             * function doSomthing() {
+             *     var args = Base.slice( arguments, 1 );
+             *     console.log( args );
+             * }
+             *
+             * doSomthing( 'ignored', 'arg2', 'arg3' );    // => Array ["arg2", "arg3"]
+             */
+            slice: uncurryThis( [].slice ),
+    
+            /**
+             * 生成唯一的ID
+             * @method guid
+             * @grammar Base.guid() => String
+             * @grammar Base.guid( prefx ) => String
+             */
+            guid: (function() {
+                var counter = 0;
+    
+                return function( prefix ) {
+                    var guid = (+new Date()).toString( 32 ),
+                        i = 0;
+    
+                    for ( ; i < 5; i++ ) {
+                        guid += Math.floor( Math.random() * 65535 ).toString( 32 );
+                    }
+    
+                    return (prefix || 'wu_') + guid + (counter++).toString( 32 );
+                };
+            })(),
+    
+            /**
+             * 格式化文件大小, 输出成带单位的字符串
+             * @method formatSize
+             * @grammar Base.formatSize( size ) => String
+             * @grammar Base.formatSize( size, pointLength ) => String
+             * @grammar Base.formatSize( size, pointLength, units ) => String
+             * @param {Number} size 文件大小
+             * @param {Number} [pointLength=2] 精确到的小数点数。
+             * @param {Array} [units=[ 'B', 'K', 'M', 'G', 'TB' ]] 单位数组。从字节，到千字节，一直往上指定。如果单位数组里面只指定了到了K(千字节)，同时文件大小大于M, 此方法的输出将还是显示成多少K.
+             * @example
+             * console.log( Base.formatSize( 100 ) );    // => 100B
+             * console.log( Base.formatSize( 1024 ) );    // => 1.00K
+             * console.log( Base.formatSize( 1024, 0 ) );    // => 1K
+             * console.log( Base.formatSize( 1024 * 1024 ) );    // => 1.00M
+             * console.log( Base.formatSize( 1024 * 1024 * 1024 ) );    // => 1.00G
+             * console.log( Base.formatSize( 1024 * 1024 * 1024, 0, ['B', 'KB', 'MB'] ) );    // => 1024MB
+             */
+            formatSize: function( size, pointLength, units ) {
+                var unit;
+    
+                units = units || [ 'B', 'K', 'M', 'G', 'TB' ];
+    
+                while ( (unit = units.shift()) && size > 1024 ) {
+                    size = size / 1024;
+                }
+    
+                return (unit === 'B' ? size : size.toFixed( pointLength || 2 )) +
+                        unit;
+            }
+        };
+    });
+    /**
+     * 事件处理类，可以独立使用，也可以扩展给对象使用。
+     * @fileOverview Mediator
+     */
+    define('mediator',[
+        'base'
+    ], function( Base ) {
+        var $ = Base.$,
+            slice = [].slice,
+            separator = /\s+/,
+            protos;
+    
+        // 根据条件过滤出事件handlers.
+        function findHandlers( arr, name, callback, context ) {
+            return $.grep( arr, function( handler ) {
+                return handler &&
+                        (!name || handler.e === name) &&
+                        (!callback || handler.cb === callback ||
+                        handler.cb._cb === callback) &&
+                        (!context || handler.ctx === context);
+            });
+        }
+    
+        function eachEvent( events, callback, iterator ) {
+            // 不支持对象，只支持多个event用空格隔开
+            $.each( (events || '').split( separator ), function( _, key ) {
+                iterator( key, callback );
+            });
+        }
+    
+        function triggerHanders( events, args ) {
+            var stoped = false,
+                i = -1,
+                len = events.length,
+                handler;
+    
+            while ( ++i < len ) {
+                handler = events[ i ];
+    
+                if ( handler.cb.apply( handler.ctx2, args ) === false ) {
+                    stoped = true;
+                    break;
+                }
+            }
+    
+            return !stoped;
+        }
+    
+        protos = {
+    
+            /**
+             * 绑定事件。
+             *
+             * `callback`方法在执行时，arguments将会来源于trigger的时候携带的参数。如
+             * ```javascript
+             * var obj = {};
+             *
+             * // 使得obj有事件行为
+             * Mediator.installTo( obj );
+             *
+             * obj.on( 'testa', function( arg1, arg2 ) {
+             *     console.log( arg1, arg2 ); // => 'arg1', 'arg2'
+             * });
+             *
+             * obj.trigger( 'testa', 'arg1', 'arg2' );
+             * ```
+             *
+             * 如果`callback`中，某一个方法`return false`了，则后续的其他`callback`都不会被执行到。
+             * 切会影响到`trigger`方法的返回值，为`false`。
+             *
+             * `on`还可以用来添加一个特殊事件`all`, 这样所有的事件触发都会响应到。同时此类`callback`中的arguments有一个不同处，
+             * 就是第一个参数为`type`，记录当前是什么事件在触发。此类`callback`的优先级比脚低，会再正常`callback`执行完后触发。
+             * ```javascript
+             * obj.on( 'all', function( type, arg1, arg2 ) {
+             *     console.log( type, arg1, arg2 ); // => 'testa', 'arg1', 'arg2'
+             * });
+             * ```
+             *
+             * @method on
+             * @grammar on( name, callback[, context] ) => self
+             * @param  {String}   name     事件名，支持多个事件用空格隔开
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             * @class Mediator
+             */
+            on: function( name, callback, context ) {
+                var me = this,
+                    set;
+    
+                if ( !callback ) {
+                    return this;
+                }
+    
+                set = this._events || (this._events = []);
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var handler = { e: name };
+    
+                    handler.cb = callback;
+                    handler.ctx = context;
+                    handler.ctx2 = context || me;
+                    handler.id = set.length;
+    
+                    set.push( handler );
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 绑定事件，且当handler执行完后，自动解除绑定。
+             * @method once
+             * @grammar once( name, callback[, context] ) => self
+             * @param  {String}   name     事件名
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            once: function( name, callback, context ) {
+                var me = this;
+    
+                if ( !callback ) {
+                    return me;
+                }
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var once = function() {
+                            me.off( name, once );
+                            return callback.apply( context || me, arguments );
+                        };
+    
+                    once._cb = callback;
+                    me.on( name, once, context );
+                });
+    
+                return me;
+            },
+    
+            /**
+             * 解除事件绑定
+             * @method off
+             * @grammar off( [name[, callback[, context] ] ] ) => self
+             * @param  {String}   [name]     事件名
+             * @param  {Function} [callback] 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            off: function( name, cb, ctx ) {
+                var events = this._events;
+    
+                if ( !events ) {
+                    return this;
+                }
+    
+                if ( !name && !cb && !ctx ) {
+                    this._events = [];
+                    return this;
+                }
+    
+                eachEvent( name, cb, function( name, cb ) {
+                    $.each( findHandlers( events, name, cb, ctx ), function() {
+                        delete events[ this.id ];
+                    });
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 触发事件
+             * @method trigger
+             * @grammar trigger( name[, args...] ) => self
+             * @param  {String}   type     事件名
+             * @param  {*} [...] 任意参数
+             * @return {Boolean} 如果handler中return false了，则返回false, 否则返回true
+             */
+            trigger: function( type ) {
+                var args, events, allEvents;
+    
+                if ( !this._events || !type ) {
+                    return this;
+                }
+    
+                args = slice.call( arguments, 1 );
+                events = findHandlers( this._events, type );
+                allEvents = findHandlers( this._events, 'all' );
+    
+                return triggerHanders( events, args ) &&
+                        triggerHanders( allEvents, arguments );
+            }
+        };
+    
+        /**
+         * 中介者，它本身是个单例，但可以通过[installTo](#WebUploader:Mediator:installTo)方法，使任何对象具备事件行为。
+         * 主要目的是负责模块与模块之间的合作，降低耦合度。
+         *
+         * @class Mediator
+         */
+        return $.extend({
+    
+            /**
+             * 可以通过这个接口，使任何对象具备事件功能。
+             * @method installTo
+             * @param  {Object} obj 需要具备事件行为的对象。
+             * @return {Object} 返回obj.
+             */
+            installTo: function( obj ) {
+                return $.extend( obj, protos );
+            }
+    
+        }, protos );
+    });
+    /**
+     * @fileOverview Uploader上传类
+     */
+    define('uploader',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$;
+    
+        /**
+         * 上传入口类。
+         * @class Uploader
+         * @constructor
+         * @grammar new Uploader( opts ) => Uploader
+         * @example
+         * var uploader = WebUploader.Uploader({
+         *     swf: 'path_of_swf/Uploader.swf',
+         *
+         *     // 开起分片上传。
+         *     chunked: true
+         * });
+         */
+        function Uploader( opts ) {
+            this.options = $.extend( true, {}, Uploader.options, opts );
+            this._init( this.options );
+        }
+    
+        // default Options
+        // widgets中有相应扩展
+        Uploader.options = {};
+        Mediator.installTo( Uploader.prototype );
+    
+        // 批量添加纯命令式方法。
+        $.each({
+            upload: 'start-upload',
+            stop: 'stop-upload',
+            getFile: 'get-file',
+            getFiles: 'get-files',
+            addFile: 'add-file',
+            addFiles: 'add-file',
+            sort: 'sort-files',
+            removeFile: 'remove-file',
+            skipFile: 'skip-file',
+            retry: 'retry',
+            isInProgress: 'is-in-progress',
+            makeThumb: 'make-thumb',
+            getDimension: 'get-dimension',
+            addButton: 'add-btn',
+            getRuntimeType: 'get-runtime-type',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable',
+            reset: 'reset'
+        }, function( fn, command ) {
+            Uploader.prototype[ fn ] = function() {
+                return this.request( command, arguments );
+            };
+        });
+    
+        $.extend( Uploader.prototype, {
+            state: 'pending',
+    
+            _init: function( opts ) {
+                var me = this;
+    
+                me.request( 'init', opts, function() {
+                    me.state = 'ready';
+                    me.trigger('ready');
+                });
+            },
+    
+            /**
+             * 获取或者设置Uploader配置项。
+             * @method option
+             * @grammar option( key ) => *
+             * @grammar option( key, val ) => self
+             * @example
+             *
+             * // 初始状态图片上传前不会压缩
+             * var uploader = new WebUploader.Uploader({
+             *     resize: null;
+             * });
+             *
+             * // 修改后图片上传前，尝试将图片压缩到1600 * 1600
+             * uploader.options( 'resize', {
+             *     width: 1600,
+             *     height: 1600
+             * });
+             */
+            option: function( key, val ) {
+                var opts = this.options;
+    
+                // setter
+                if ( arguments.length > 1 ) {
+    
+                    if ( $.isPlainObject( val ) &&
+                            $.isPlainObject( opts[ key ] ) ) {
+                        $.extend( opts[ key ], val );
+                    } else {
+                        opts[ key ] = val;
+                    }
+    
+                } else {    // getter
+                    return key ? opts[ key ] : opts;
+                }
+            },
+    
+            /**
+             * 获取文件统计信息。返回一个包含一下信息的对象。
+             * * `successNum` 上传成功的文件数
+             * * `uploadFailNum` 上传失败的文件数
+             * * `cancelNum` 被删除的文件数
+             * * `invalidNum` 无效的文件数
+             * * `queueNum` 还在队列中的文件数
+             * @method getStats
+             * @grammar getStats() => Object
+             */
+            getStats: function() {
+                // return this._mgr.getStats.apply( this._mgr, arguments );
+                var stats = this.request('get-stats');
+    
+                return {
+                    successNum: stats.numOfSuccess,
+    
+                    // who care?
+                    // queueFailNum: 0,
+                    cancelNum: stats.numOfCancel,
+                    invalidNum: stats.numOfInvalid,
+                    uploadFailNum: stats.numOfUploadFailed,
+                    queueNum: stats.numOfQueue
+                };
+            },
+    
+            // 需要重写此方法来来支持opts.onEvent和instance.onEvent的处理器
+            trigger: function( type/*, args...*/ ) {
+                var args = [].slice.call( arguments, 1 ),
+                    opts = this.options,
+                    name = 'on' + type.substring( 0, 1 ).toUpperCase() +
+                        type.substring( 1 );
+    
+                if (
+                        // 调用通过on方法注册的handler.
+                        Mediator.trigger.apply( this, arguments ) === false ||
+    
+                        // 调用opts.onEvent
+                        $.isFunction( opts[ name ] ) &&
+                        opts[ name ].apply( this, args ) === false ||
+    
+                        // 调用this.onEvent
+                        $.isFunction( this[ name ] ) &&
+                        this[ name ].apply( this, args ) === false ||
+    
+                        // 广播所有uploader的事件。
+                        Mediator.trigger.apply( Mediator,
+                        [ this, type ].concat( args ) ) === false ) {
+    
+                    return false;
+                }
+    
+                return true;
+            },
+    
+            // widgets/widget.js将补充此方法的详细文档。
+            request: Base.noop
+        });
+    
+        /**
+         * 创建Uploader实例，等同于new Uploader( opts );
+         * @method create
+         * @class Base
+         * @static
+         * @grammar Base.create( opts ) => Uploader
+         */
+        Base.create = Uploader.create = function( opts ) {
+            return new Uploader( opts );
+        };
+    
+        // 暴露Uploader，可以通过它来扩展业务逻辑。
+        Base.Uploader = Uploader;
+    
+        return Uploader;
+    });
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/runtime',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            factories = {},
+    
+            // 获取对象的第一个key
+            getFirstKey = function( obj ) {
+                for ( var key in obj ) {
+                    if ( obj.hasOwnProperty( key ) ) {
+                        return key;
+                    }
+                }
+                return null;
+            };
+    
+        // 接口类。
+        function Runtime( options ) {
+            this.options = $.extend({
+                container: document.body
+            }, options );
+            this.uid = Base.guid('rt_');
+        }
+    
+        $.extend( Runtime.prototype, {
+    
+            getContainer: function() {
+                var opts = this.options,
+                    parent, container;
+    
+                if ( this._container ) {
+                    return this._container;
+                }
+    
+                parent = $( opts.container || document.body );
+                container = $( document.createElement('div') );
+    
+                container.attr( 'id', 'rt_' + this.uid );
+                container.css({
+                    position: 'absolute',
+                    top: '0px',
+                    left: '0px',
+                    width: '1px',
+                    height: '1px',
+                    overflow: 'hidden'
+                });
+    
+                parent.append( container );
+                parent.addClass('webuploader-container');
+                this._container = container;
+                return container;
+            },
+    
+            init: Base.noop,
+            exec: Base.noop,
+    
+            destroy: function() {
+                if ( this._container ) {
+                    this._container.parentNode.removeChild( this.__container );
+                }
+    
+                this.off();
+            }
+        });
+    
+        Runtime.orders = 'html5,flash';
+    
+    
+        /**
+         * 添加Runtime实现。
+         * @param {String} type    类型
+         * @param {Runtime} factory 具体Runtime实现。
+         */
+        Runtime.addRuntime = function( type, factory ) {
+            factories[ type ] = factory;
+        };
+    
+        Runtime.hasRuntime = function( type ) {
+            return !!(type ? factories[ type ] : getFirstKey( factories ));
+        };
+    
+        Runtime.create = function( opts, orders ) {
+            var type, runtime;
+    
+            orders = orders || Runtime.orders;
+            $.each( orders.split( /\s*,\s*/g ), function() {
+                if ( factories[ this ] ) {
+                    type = this;
+                    return false;
+                }
+            });
+    
+            type = type || getFirstKey( factories );
+    
+            if ( !type ) {
+                throw new Error('Runtime Error');
+            }
+    
+            runtime = new factories[ type ]( opts );
+            return runtime;
+        };
+    
+        Mediator.installTo( Runtime.prototype );
+        return Runtime;
+    });
+    
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/client',[
+        'base',
+        'mediator',
+        'runtime/runtime'
+    ], function( Base, Mediator, Runtime ) {
+    
+        var cache;
+    
+        cache = (function() {
+            var obj = {};
+    
+            return {
+                add: function( runtime ) {
+                    obj[ runtime.uid ] = runtime;
+                },
+    
+                get: function( ruid, standalone ) {
+                    var i;
+    
+                    if ( ruid ) {
+                        return obj[ ruid ];
+                    }
+    
+                    for ( i in obj ) {
+                        // 有些类型不能重用，比如filepicker.
+                        if ( standalone && obj[ i ].__standalone ) {
+                            continue;
+                        }
+    
+                        return obj[ i ];
+                    }
+    
+                    return null;
+                },
+    
+                remove: function( runtime ) {
+                    delete obj[ runtime.uid ];
+                }
+            };
+        })();
+    
+        function RuntimeClient( component, standalone ) {
+            var deferred = Base.Deferred(),
+                runtime;
+    
+            this.uid = Base.guid('client_');
+    
+            // 允许runtime没有初始化之前，注册一些方法在初始化后执行。
+            this.runtimeReady = function( cb ) {
+                return deferred.done( cb );
+            };
+    
+            this.connectRuntime = function( opts, cb ) {
+    
+                // already connected.
+                if ( runtime ) {
+                    throw new Error('already connected!');
+                }
+    
+                deferred.done( cb );
+    
+                if ( typeof opts === 'string' && cache.get( opts ) ) {
+                    runtime = cache.get( opts );
+                }
+    
+                // 像filePicker只能独立存在，不能公用。
+                runtime = runtime || cache.get( null, standalone );
+    
+                // 需要创建
+                if ( !runtime ) {
+                    runtime = Runtime.create( opts, opts.runtimeOrder );
+                    runtime.__promise = deferred.promise();
+                    runtime.once( 'ready', deferred.resolve );
+                    runtime.init();
+                    cache.add( runtime );
+                    runtime.__client = 1;
+                } else {
+                    // 来自cache
+                    Base.$.extend( runtime.options, opts );
+                    runtime.__promise.then( deferred.resolve );
+                    runtime.__client++;
+                }
+    
+                standalone && (runtime.__standalone = standalone);
+                return runtime;
+            };
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.disconnectRuntime = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                runtime.__client--;
+    
+                if ( runtime.__client <= 0 ) {
+                    cache.remove( runtime );
+                    delete runtime.__promise;
+                    runtime.destroy();
+                }
+    
+                runtime = null;
+            };
+    
+            this.exec = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                var args = Base.slice( arguments );
+                component && args.unshift( component );
+    
+                return runtime.exec.apply( this, args );
+            };
+    
+            this.getRuid = function() {
+                return runtime && runtime.uid;
+            };
+    
+            this.destroy = (function( destroy ) {
+                return function() {
+                    destroy && destroy.apply( this, arguments );
+                    this.trigger('destroy');
+                    this.off();
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                };
+            })( this.destroy );
+        }
+    
+        Mediator.installTo( RuntimeClient.prototype );
+        return RuntimeClient;
+    });
+    /**
+     * @fileOverview Blob
+     */
+    define('lib/blob',[
+        'base',
+        'runtime/client'
+    ], function( Base, RuntimeClient ) {
+    
+        function Blob( ruid, source ) {
+            var me = this;
+    
+            me.source = source;
+            me.ruid = ruid;
+    
+            RuntimeClient.call( me, 'Blob' );
+    
+            this.uid = source.uid || this.uid;
+            this.type = source.type || '';
+            this.size = source.size || 0;
+    
+            if ( ruid ) {
+                me.connectRuntime( ruid );
+            }
+        }
+    
+        Base.inherits( RuntimeClient, {
+            constructor: Blob,
+    
+            slice: function( start, end ) {
+                return this.exec( 'slice', start, end );
+            },
+    
+            getSource: function() {
+                return this.source;
+            }
+        });
+    
+        return Blob;
+    });
+    /**
+     * 为了统一化Flash的File和HTML5的File而存在。
+     * 以至于要调用Flash里面的File，也可以像调用HTML5版本的File一下。
+     * @fileOverview File
+     */
+    define('lib/file',[
+        'base',
+        'lib/blob'
+    ], function( Base, Blob ) {
+    
+        var uid = 1,
+            rExt = /\.([^.]+)$/;
+    
+        function File( ruid, file ) {
+            var ext;
+    
+            Blob.apply( this, arguments );
+            this.name = file.name || ('untitled' + uid++);
+            ext = rExt.exec( file.name ) ? RegExp.$1.toLowerCase() : '';
+    
+            // todo 支持其他类型文件的转换。
+    
+            // 如果有mimetype, 但是文件名里面没有找出后缀规律
+            if ( !ext && this.type ) {
+                ext = /\/(jpg|jpeg|png|gif|bmp)$/i.exec( this.type ) ?
+                        RegExp.$1.toLowerCase() : '';
+                this.name += '.' + ext;
+            }
+    
+            // 如果没有指定mimetype, 但是知道文件后缀。
+            if ( !this.type &&  ~'jpg,jpeg,png,gif,bmp'.indexOf( ext ) ) {
+                this.type = 'image/' + (ext === 'jpg' ? 'jpeg' : ext);
+            }
+    
+            this.ext = ext;
+            this.lastModifiedDate = file.lastModifiedDate ||
+                    (new Date()).toLocaleString();
+        }
+    
+        return Base.inherits( Blob, File );
+    });
+    
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/filepicker',[
+        'base',
+        'runtime/client',
+        'lib/file'
+    ], function( Base, RuntimeClent, File ) {
+    
+        var $ = Base.$;
+    
+        function FilePicker( opts ) {
+            opts = this.options = $.extend({}, FilePicker.options, opts );
+    
+            opts.container = $( opts.id );
+    
+            if ( !opts.container.length ) {
+                throw new Error('按钮指定错误');
+            }
+    
+            opts.innerHTML = opts.innerHTML || opts.label ||
+                    opts.container.html() || '';
+    
+            opts.button = $( opts.button || document.createElement('div') );
+            opts.button.html( opts.innerHTML );
+            opts.container.html( opts.button );
+    
+            RuntimeClent.call( this, 'FilePicker', true );
+        }
+    
+        FilePicker.options = {
+            button: null,
+            container: null,
+            label: null,
+            innerHTML: null,
+            multiple: true,
+            accept: null,
+            name: 'file'
+        };
+    
+        Base.inherits( RuntimeClent, {
+            constructor: FilePicker,
+    
+            init: function() {
+                var me = this,
+                    opts = me.options,
+                    button = opts.button;
+    
+                button.addClass('webuploader-pick');
+    
+                me.on( 'all', function( type ) {
+                    var files;
+    
+                    switch ( type ) {
+                        case 'mouseenter':
+                            button.addClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'mouseleave':
+                            button.removeClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'change':
+                            files = me.exec('getFiles');
+                            me.trigger( 'select', $.map( files, function( file ) {
+                                file = new File( me.getRuid(), file );
+    
+                                // 记录来源。
+                                file._refer = opts.container;
+                                return file;
+                            }), opts.container );
+                            break;
+                    }
+                });
+    
+                me.connectRuntime( opts, function() {
+                    me.refresh();
+                    me.exec( 'init', opts );
+                    me.trigger('ready');
+                });
+    
+                $( window ).on( 'resize', function() {
+                    me.refresh();
+                });
+            },
+    
+            refresh: function() {
+                var shimContainer = this.getRuntime().getContainer(),
+                    button = this.options.button,
+                    width = button.outerWidth ?
+                            button.outerWidth() : button.width(),
+    
+                    height = button.outerHeight ?
+                            button.outerHeight() : button.height(),
+    
+                    pos = button.offset();
+    
+                width && height && shimContainer.css({
+                    bottom: 'auto',
+                    right: 'auto',
+                    width: width + 'px',
+                    height: height + 'px'
+                }).offset( pos );
+            },
+    
+            enable: function() {
+                var btn = this.options.button;
+    
+                btn.removeClass('webuploader-pick-disable');
+                this.refresh();
+            },
+    
+            disable: function() {
+                var btn = this.options.button;
+    
+                this.getRuntime().getContainer().css({
+                    top: '-99999px'
+                });
+    
+                btn.addClass('webuploader-pick-disable');
+            },
+    
+            destroy: function() {
+                if ( this.runtime ) {
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                }
+            }
+        });
+    
+        return FilePicker;
+    });
+    
+    /**
+     * @fileOverview 组件基类。
+     */
+    define('widgets/widget',[
+        'base',
+        'uploader'
+    ], function( Base, Uploader ) {
+    
+        var $ = Base.$,
+            _init = Uploader.prototype._init,
+            IGNORE = {},
+            widgetClass = [];
+    
+        function isArrayLike( obj ) {
+            if ( !obj ) {
+                return false;
+            }
+    
+            var length = obj.length,
+                type = $.type( obj );
+    
+            if ( obj.nodeType === 1 && length ) {
+                return true;
+            }
+    
+            return type === 'array' || type !== 'function' && type !== 'string' &&
+                    (length === 0 || typeof length === 'number' && length > 0 &&
+                    (length - 1) in obj);
+        }
+    
+        function Widget( uploader ) {
+            this.owner = uploader;
+            this.options = uploader.options;
+        }
+    
+        $.extend( Widget.prototype, {
+    
+            init: Base.noop,
+    
+            // 类Backbone的事件监听声明，监听uploader实例上的事件
+            // widget直接无法监听事件，事件只能通过uploader来传递
+            invoke: function( apiName, args ) {
+    
+                /*
+                    {
+                        'make-thumb': 'makeThumb'
+                    }
+                 */
+                var map = this.responseMap;
+    
+                // 如果无API响应声明则忽略
+                if ( !map || !(apiName in map) || !(map[ apiName ] in this) ||
+                        !$.isFunction( this[ map[ apiName ] ] ) ) {
+    
+                    return IGNORE;
+                }
+    
+                return this[ map[ apiName ] ].apply( this, args );
+    
+            },
+    
+            /**
+             * 发送命令。当传入`callback`或者`handler`中返回`promise`时。返回一个当所有`handler`中的promise都完成后完成的新`promise`。
+             * @method request
+             * @grammar request( command, args ) => * | Promise
+             * @grammar request( command, args, callback ) => Promise
+             * @for  Uploader
+             */
+            request: function() {
+                return this.owner.request.apply( this.owner, arguments );
+            }
+        });
+    
+        // 扩展Uploader.
+        $.extend( Uploader.prototype, {
+    
+            // 覆写_init用来初始化widgets
+            _init: function() {
+                var me = this,
+                    widgets = me._widgets = [];
+    
+                $.each( widgetClass, function( _, klass ) {
+                    widgets.push( new klass( me ) );
+                });
+    
+                return _init.apply( me, arguments );
+            },
+    
+            request: function( apiName, args, callback ) {
+                var i = 0,
+                    widgets = this._widgets,
+                    len = widgets.length,
+                    rlts = [],
+                    dfds = [],
+                    widget, rlt, promise, key;
+    
+                args = isArrayLike( args ) ? args : [ args ];
+    
+                for ( ; i < len; i++ ) {
+                    widget = widgets[ i ];
+                    rlt = widget.invoke( apiName, args );
+    
+                    if ( rlt !== IGNORE ) {
+    
+                        // Deferred对象
+                        if ( Base.isPromise( rlt ) ) {
+                            dfds.push( rlt );
+                        } else {
+                            rlts.push( rlt );
+                        }
+                    }
+                }
+    
+                // 如果有callback，则用异步方式。
+                if ( callback || dfds.length ) {
+                    promise = Base.when.apply( Base, dfds );
+                    key = promise.pipe ? 'pipe' : 'then';
+    
+                    // 很重要不能删除。删除了会死循环。
+                    // 保证执行顺序。让callback总是在下一个tick中执行。
+                    return promise[ key ](function() {
+                                var deferred = Base.Deferred(),
+                                    args = arguments;
+    
+                                setTimeout(function() {
+                                    deferred.resolve.apply( deferred, args );
+                                }, 1 );
+    
+                                return deferred.promise();
+                            })[ key ]( callback || Base.noop );
+                } else {
+                    return rlts[ 0 ];
+                }
+            }
+        });
+    
+        /**
+         * 添加组件
+         * @param  {object} widgetProto 组件原型，构造函数通过constructor属性定义
+         * @param  {object} responseMap API名称与函数实现的映射
+         * @example
+         *     Uploader.register( {
+         *         init: function( options ) {},
+         *         makeThumb: function() {}
+         *     }, {
+         *         'make-thumb': 'makeThumb'
+         *     } );
+         */
+        Uploader.register = Widget.register = function( responseMap, widgetProto ) {
+            var map = { init: 'init' },
+                klass;
+    
+            if ( arguments.length === 1 ) {
+                widgetProto = responseMap;
+                widgetProto.responseMap = map;
+            } else {
+                widgetProto.responseMap = $.extend( map, responseMap );
+            }
+    
+            klass = Base.inherits( Widget, widgetProto );
+            widgetClass.push( klass );
+    
+            return klass;
+        };
+    
+        return Widget;
+    });
+    /**
+     * @fileOverview 文件选择相关
+     */
+    define('widgets/filepicker',[
+        'base',
+        'uploader',
+        'lib/filepicker',
+        'widgets/widget'
+    ], function( Base, Uploader, FilePicker ) {
+        var $ = Base.$;
+    
+        $.extend( Uploader.options, {
+    
+            /**
+             * @property {Selector | Object} [pick=undefined]
+             * @namespace options
+             * @for Uploader
+             * @description 指定选择文件的按钮容器，不指定则不创建按钮。
+             *
+             * * `id` {Seletor} 指定选择文件的按钮容器，不指定则不创建按钮。
+             * * `label` {String} 请采用 `innerHTML` 代替
+             * * `innerHTML` {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
+             * * `multiple` {Boolean} 是否开起同时选择多个文件能力。
+             */
+            pick: null,
+    
+            /**
+             * @property {Arroy} [accept=null]
+             * @namespace options
+             * @for Uploader
+             * @description 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
+             *
+             * * `title` {String} 文字描述
+             * * `extensions` {String} 允许的文件后缀，不带点，多个用逗号分割。
+             * * `mimeTypes` {String} 多个用逗号分割。
+             *
+             * 如：
+             *
+             * ```
+             * {
+             *     title: 'Images',
+             *     extensions: 'gif,jpg,jpeg,bmp,png',
+             *     mimeTypes: 'image/*'
+             * }
+             * ```
+             */
+            accept: null/*{
+                title: 'Images',
+                extensions: 'gif,jpg,jpeg,bmp,png',
+                mimeTypes: 'image/*'
+            }*/
+        });
+    
+        return Uploader.register({
+            'add-btn': 'addButton',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable'
+        }, {
+    
+            init: function( opts ) {
+                this.pickers = [];
+                return opts.pick && this.addButton( opts.pick );
+            },
+    
+            refresh: function() {
+                $.each( this.pickers, function() {
+                    this.refresh();
+                });
+            },
+    
+            /**
+             * @method addButton
+             * @for Uploader
+             * @grammar addButton( pick ) => Promise
+             * @description
+             * 添加文件选择按钮，如果一个按钮不够，需要调用此方法来添加。参数跟[options.pick](#WebUploader:Uploader:options)一致。
+             * @example
+             * uploader.addButton({
+             *     id: '#btnContainer',
+             *     innerHTML: '选择文件'
+             * });
+             */
+            addButton: function( pick ) {
+                var me = this,
+                    opts = me.options,
+                    accept = opts.accept,
+                    options, picker, deferred;
+    
+                if ( !pick ) {
+                    return;
+                }
+    
+                deferred = Base.Deferred();
+                $.isPlainObject( pick ) || (pick = {
+                    id: pick
+                });
+    
+                options = $.extend({}, pick, {
+                    accept: $.isPlainObject( accept ) ? [ accept ] : accept,
+                    swf: opts.swf,
+                    runtimeOrder: opts.runtimeOrder
+                });
+    
+                picker = new FilePicker( options );
+    
+                picker.once( 'ready', deferred.resolve );
+                picker.on( 'select', function( files ) {
+                    me.owner.request( 'add-file', [ files ]);
+                });
+                picker.init();
+    
+                this.pickers.push( picker );
+    
+                return deferred.promise();
+            },
+    
+            disable: function() {
+                $.each( this.pickers, function() {
+                    this.disable();
+                });
+            },
+    
+            enable: function() {
+                $.each( this.pickers, function() {
+                    this.enable();
+                });
+            }
+        });
+    });
+    /**
+     * @fileOverview Image
+     */
+    define('lib/image',[
+        'base',
+        'runtime/client',
+        'lib/blob'
+    ], function( Base, RuntimeClient, Blob ) {
+        var $ = Base.$;
+    
+        // 构造器。
+        function Image( opts ) {
+            this.options = $.extend({}, Image.options, opts );
+            RuntimeClient.call( this, 'Image' );
+    
+            this.on( 'load', function() {
+                this._info = this.exec('info');
+                this._meta = this.exec('meta');
+            });
+        }
+    
+        // 默认选项。
+        Image.options = {
+    
+            // 默认的图片处理质量
+            quality: 90,
+    
+            // 是否裁剪
+            crop: false,
+    
+            // 是否保留头部信息
+            preserveHeaders: true,
+    
+            // 是否允许放大。
+            allowMagnify: true
+        };
+    
+        // 继承RuntimeClient.
+        Base.inherits( RuntimeClient, {
+            constructor: Image,
+    
+            info: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._info = val;
+                    return this;
+                }
+    
+                // getter
+                return this._info;
+            },
+    
+            meta: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._meta = val;
+                    return this;
+                }
+    
+                // getter
+                return this._meta;
+            },
+    
+            loadFromBlob: function( blob ) {
+                var me = this,
+                    ruid = blob.getRuid();
+    
+                this.connectRuntime( ruid, function() {
+                    me.exec( 'init', me.options );
+                    me.exec( 'loadFromBlob', blob );
+                });
+            },
+    
+            resize: function() {
+                var args = Base.slice( arguments );
+                return this.exec.apply( this, [ 'resize' ].concat( args ) );
+            },
+    
+            getAsDataUrl: function( type ) {
+                return this.exec( 'getAsDataUrl', type );
+            },
+    
+            getAsBlob: function( type ) {
+                var blob = this.exec( 'getAsBlob', type );
+    
+                return new Blob( this.getRuid(), blob );
+            }
+        });
+    
+        return Image;
+    });
+    /**
+     * @fileOverview 图片操作, 负责预览图片和上传前压缩图片
+     */
+    define('widgets/image',[
+        'base',
+        'uploader',
+        'lib/image',
+        'widgets/widget'
+    ], function( Base, Uploader, Image ) {
+    
+        var $ = Base.$,
+            throttle;
+    
+        // 根据要处理的文件大小来节流，一次不能处理太多，会卡。
+        throttle = (function( max ) {
+            var occupied = 0,
+                waiting = [],
+                tick = function() {
+                    var item;
+    
+                    while ( waiting.length && occupied < max ) {
+                        item = waiting.shift();
+                        occupied += item[ 0 ];
+                        item[ 1 ]();
+                    }
+                };
+    
+            return function( emiter, size, cb ) {
+                waiting.push([ size, cb ]);
+                emiter.once( 'destroy', function() {
+                    occupied -= size;
+                    setTimeout( tick, 1 );
+                });
+                setTimeout( tick, 1 );
+            };
+        })( 5 * 1024 * 1024 );
+    
+        $.extend( Uploader.options, {
+    
+            /**
+             * @property {Object} [thumb]
+             * @namespace options
+             * @for Uploader
+             * @description 配置生成缩略图的选项。
+             *
+             * 默认为：
+             *
+             * ```javascript
+             * {
+             *     width: 110,
+             *     height: 110,
+             *
+             *     // 图片质量，只有type为`image/jpeg`的时候才有效。
+             *     quality: 70,
+             *
+             *     // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+             *     allowMagnify: true,
+             *
+             *     // 是否允许裁剪。
+             *     crop: true,
+             *
+             *     // 是否保留头部meta信息。
+             *     preserveHeaders: false,
+             *
+             *     // 为空的话则保留原有图片格式。
+             *     // 否则强制转换成指定的类型。
+             *     type: 'image/jpeg'
+             * }
+             * ```
+             */
+            thumb: {
+                width: 110,
+                height: 110,
+                quality: 70,
+                allowMagnify: true,
+                crop: true,
+                preserveHeaders: false,
+    
+                // 为空的话则保留原有图片格式。
+                // 否则强制转换成指定的类型。
+                // IE 8下面 base64 大小不能超过 32K 否则预览失败，而非 jpeg 编码的图片很可
+                // 能会超过 32k, 所以这里设置成预览的时候都是 image/jpeg
+                type: 'image/jpeg'
+            },
+    
+            /**
+             * @property {Object} [compress]
+             * @namespace options
+             * @for Uploader
+             * @description 配置压缩的图片的选项。如果此选项为`false`, 则图片在上传前不进行压缩。
+             *
+             * 默认为：
+             *
+             * ```javascript
+             * {
+             *     width: 1600,
+             *     height: 1600,
+             *
+             *     // 图片质量，只有type为`image/jpeg`的时候才有效。
+             *     quality: 90,
+             *
+             *     // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+             *     allowMagnify: false,
+             *
+             *     // 是否允许裁剪。
+             *     crop: false,
+             *
+             *     // 是否保留头部meta信息。
+             *     preserveHeaders: true
+             * }
+             * ```
+             */
+            compress: {
+                width: 1600,
+                height: 1600,
+                quality: 90,
+                allowMagnify: false,
+                crop: false,
+                preserveHeaders: true
+            }
+        });
+    
+        return Uploader.register({
+            'make-thumb': 'makeThumb',
+            'before-send-file': 'compressImage'
+        }, {
+    
+    
+            /**
+             * 生成缩略图，此过程为异步，所以需要传入`callback`。
+             * 通常情况在图片加入队里后调用此方法来生成预览图以增强交互效果。
+             *
+             * `callback`中可以接收到两个参数。
+             * * 第一个为error，如果生成缩略图有错误，此error将为真。
+             * * 第二个为ret, 缩略图的Data URL值。
+             *
+             * **注意**
+             * Date URL在IE6/7中不支持，所以不用调用此方法了，直接显示一张暂不支持预览图片好了。
+             *
+             *
+             * @method makeThumb
+             * @grammar makeThumb( file, callback ) => undefined
+             * @grammar makeThumb( file, callback, width, height ) => undefined
+             * @for Uploader
+             * @example
+             *
+             * uploader.on( 'fileQueued', function( file ) {
+             *     var $li = ...;
+             *
+             *     uploader.makeThumb( file, function( error, ret ) {
+             *         if ( error ) {
+             *             $li.text('预览错误');
+             *         } else {
+             *             $li.append('<img alt="" src="' + ret + '" />');
+             *         }
+             *     });
+             *
+             * });
+             */
+            makeThumb: function( file, cb, width, height ) {
+                var opts, image;
+    
+                file = this.request( 'get-file', file );
+    
+                // 只预览图片格式。
+                if ( !file.type.match( /^image/ ) ) {
+                    cb( true );
+                    return;
+                }
+    
+                opts = $.extend({}, this.options.thumb );
+    
+                // 如果传入的是object.
+                if ( $.isPlainObject( width ) ) {
+                    opts = $.extend( opts, width );
+                    width = null;
+                }
+    
+                width = width || opts.width;
+                height = height || opts.height;
+    
+                image = new Image( opts );
+    
+                image.once( 'load', function() {
+                    file._info = file._info || image.info();
+                    file._meta = file._meta || image.meta();
+                    image.resize( width, height );
+                });
+    
+                image.once( 'complete', function() {
+                    cb( false, image.getAsDataUrl( opts.type ) );
+                    image.destroy();
+                });
+    
+                image.once( 'error', function() {
+                    cb( true );
+                    image.destroy();
+                });
+    
+                throttle( image, file.source.size, function() {
+                    file._info && image.info( file._info );
+                    file._meta && image.meta( file._meta );
+                    image.loadFromBlob( file.source );
+                });
+            },
+    
+            compressImage: function( file ) {
+                var opts = this.options.compress || this.options.resize,
+                    compressSize = opts && opts.compressSize || 300 * 1024,
+                    image, deferred;
+    
+                file = this.request( 'get-file', file );
+    
+                // 只预览图片格式。
+                if ( !opts || !~'image/jpeg,image/jpg'.indexOf( file.type ) ||
+                        file.size < compressSize ||
+                        file._compressed ) {
+                    return;
+                }
+    
+                opts = $.extend({}, opts );
+                deferred = Base.Deferred();
+    
+                image = new Image( opts );
+    
+                deferred.always(function() {
+                    image.destroy();
+                    image = null;
+                });
+                image.once( 'error', deferred.reject );
+                image.once( 'load', function() {
+                    file._info = file._info || image.info();
+                    file._meta = file._meta || image.meta();
+                    image.resize( opts.width, opts.height );
+                });
+    
+                image.once( 'complete', function() {
+                    var blob, size;
+    
+                    // 移动端 UC / qq 浏览器的无图模式下
+                    // ctx.getImageData 处理大图的时候会报 Exception
+                    // INDEX_SIZE_ERR: DOM Exception 1
+                    try {
+                        blob = image.getAsBlob( opts.type );
+    
+                        size = file.size;
+    
+                        // 如果压缩后，比原来还大则不用压缩后的。
+                        if ( blob.size < size ) {
+                            // file.source.destroy && file.source.destroy();
+                            file.source = blob;
+                            file.size = blob.size;
+    
+                            file.trigger( 'resize', blob.size, size );
+                        }
+    
+                        // 标记，避免重复压缩。
+                        file._compressed = true;
+                        deferred.resolve();
+                    } catch ( e ) {
+                        // 出错了直接继续，让其上传原始图片
+                        deferred.resolve();
+                    }
+                });
+    
+                file._info && image.info( file._info );
+                file._meta && image.meta( file._meta );
+    
+                image.loadFromBlob( file.source );
+                return deferred.promise();
+            }
+        });
+    });
+    /**
+     * @fileOverview 文件属性封装
+     */
+    define('file',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            idPrefix = 'WU_FILE_',
+            idSuffix = 0,
+            rExt = /\.([^.]+)$/,
+            statusMap = {};
+    
+        function gid() {
+            return idPrefix + idSuffix++;
+        }
+    
+        /**
+         * 文件类
+         * @class File
+         * @constructor 构造函数
+         * @grammar new File( source ) => File
+         * @param {Lib.File} source [lib.File](#Lib.File)实例, 此source对象是带有Runtime信息的。
+         */
+        function WUFile( source ) {
+    
+            /**
+             * 文件名，包括扩展名（后缀）
+             * @property name
+             * @type {string}
+             */
+            this.name = source.name || 'Untitled';
+    
+            /**
+             * 文件体积（字节）
+             * @property size
+             * @type {uint}
+             * @default 0
+             */
+            this.size = source.size || 0;
+    
+            /**
+             * 文件MIMETYPE类型，与文件类型的对应关系请参考[http://t.cn/z8ZnFny](http://t.cn/z8ZnFny)
+             * @property type
+             * @type {string}
+             * @default 'application'
+             */
+            this.type = source.type || 'application';
+    
+            /**
+             * 文件最后修改日期
+             * @property lastModifiedDate
+             * @type {int}
+             * @default 当前时间戳
+             */
+            this.lastModifiedDate = source.lastModifiedDate || (new Date() * 1);
+    
+            /**
+             * 文件ID，每个对象具有唯一ID，与文件名无关
+             * @property id
+             * @type {string}
+             */
+            this.id = gid();
+    
+            /**
+             * 文件扩展名，通过文件名获取，例如test.png的扩展名为png
+             * @property ext
+             * @type {string}
+             */
+            this.ext = rExt.exec( this.name ) ? RegExp.$1 : '';
+    
+    
+            /**
+             * 状态文字说明。在不同的status语境下有不同的用途。
+             * @property statusText
+             * @type {string}
+             */
+            this.statusText = '';
+    
+            // 存储文件状态，防止通过属性直接修改
+            statusMap[ this.id ] = WUFile.Status.INITED;
+    
+            this.source = source;
+            this.loaded = 0;
+    
+            this.on( 'error', function( msg ) {
+                this.setStatus( WUFile.Status.ERROR, msg );
+            });
+        }
+    
+        $.extend( WUFile.prototype, {
+    
+            /**
+             * 设置状态，状态变化时会触发`change`事件。
+             * @method setStatus
+             * @grammar setStatus( status[, statusText] );
+             * @param {File.Status|String} status [文件状态值](#WebUploader:File:File.Status)
+             * @param {String} [statusText=''] 状态说明，常在error时使用，用http, abort,server等来标记是由于什么原因导致文件错误。
+             */
+            setStatus: function( status, text ) {
+    
+                var prevStatus = statusMap[ this.id ];
+    
+                typeof text !== 'undefined' && (this.statusText = text);
+    
+                if ( status !== prevStatus ) {
+                    statusMap[ this.id ] = status;
+                    /**
+                     * 文件状态变化
+                     * @event statuschange
+                     */
+                    this.trigger( 'statuschange', status, prevStatus );
+                }
+    
+            },
+    
+            /**
+             * 获取文件状态
+             * @return {File.Status}
+             * @example
+                     文件状态具体包括以下几种类型：
+                     {
+                         // 初始化
+                        INITED:     0,
+                        // 已入队列
+                        QUEUED:     1,
+                        // 正在上传
+                        PROGRESS:     2,
+                        // 上传出错
+                        ERROR:         3,
+                        // 上传成功
+                        COMPLETE:     4,
+                        // 上传取消
+                        CANCELLED:     5
+                    }
+             */
+            getStatus: function() {
+                return statusMap[ this.id ];
+            },
+    
+            /**
+             * 获取文件原始信息。
+             * @return {*}
+             */
+            getSource: function() {
+                return this.source;
+            },
+    
+            destory: function() {
+                delete statusMap[ this.id ];
+            }
+        });
+    
+        Mediator.installTo( WUFile.prototype );
+    
+        /**
+         * 文件状态值，具体包括以下几种类型：
+         * * `inited` 初始状态
+         * * `queued` 已经进入队列, 等待上传
+         * * `progress` 上传中
+         * * `complete` 上传完成。
+         * * `error` 上传出错，可重试
+         * * `interrupt` 上传中断，可续传。
+         * * `invalid` 文件不合格，不能重试上传。会自动从队列中移除。
+         * * `cancelled` 文件被移除。
+         * @property {Object} Status
+         * @namespace File
+         * @class File
+         * @static
+         */
+        WUFile.Status = {
+            INITED:     'inited',    // 初始状态
+            QUEUED:     'queued',    // 已经进入队列, 等待上传
+            PROGRESS:   'progress',    // 上传中
+            ERROR:      'error',    // 上传出错，可重试
+            COMPLETE:   'complete',    // 上传完成。
+            CANCELLED:  'cancelled',    // 上传取消。
+            INTERRUPT:  'interrupt',    // 上传中断，可续传。
+            INVALID:    'invalid'    // 文件不合格，不能重试上传。
+        };
+    
+        return WUFile;
+    });
+    
+    /**
+     * @fileOverview 文件队列
+     */
+    define('queue',[
+        'base',
+        'mediator',
+        'file'
+    ], function( Base, Mediator, WUFile ) {
+    
+        var $ = Base.$,
+            STATUS = WUFile.Status;
+    
+        /**
+         * 文件队列, 用来存储各个状态中的文件。
+         * @class Queue
+         * @extends Mediator
+         */
+        function Queue() {
+    
+            /**
+             * 统计文件数。
+             * * `numOfQueue` 队列中的文件数。
+             * * `numOfSuccess` 上传成功的文件数
+             * * `numOfCancel` 被移除的文件数
+             * * `numOfProgress` 正在上传中的文件数
+             * * `numOfUploadFailed` 上传错误的文件数。
+             * * `numOfInvalid` 无效的文件数。
+             * @property {Object} stats
+             */
+            this.stats = {
+                numOfQueue: 0,
+                numOfSuccess: 0,
+                numOfCancel: 0,
+                numOfProgress: 0,
+                numOfUploadFailed: 0,
+                numOfInvalid: 0
+            };
+    
+            // 上传队列，仅包括等待上传的文件
+            this._queue = [];
+    
+            // 存储所有文件
+            this._map = {};
+        }
+    
+        $.extend( Queue.prototype, {
+    
+            /**
+             * 将新文件加入对队列尾部
+             *
+             * @method append
+             * @param  {File} file   文件对象
+             */
+            append: function( file ) {
+                this._queue.push( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 将新文件加入对队列头部
+             *
+             * @method prepend
+             * @param  {File} file   文件对象
+             */
+            prepend: function( file ) {
+                this._queue.unshift( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 获取文件对象
+             *
+             * @method getFile
+             * @param  {String} fileId   文件ID
+             * @return {File}
+             */
+            getFile: function( fileId ) {
+                if ( typeof fileId !== 'string' ) {
+                    return fileId;
+                }
+                return this._map[ fileId ];
+            },
+    
+            /**
+             * 从队列中取出一个指定状态的文件。
+             * @grammar fetch( status ) => File
+             * @method fetch
+             * @param {String} status [文件状态值](#WebUploader:File:File.Status)
+             * @return {File} [File](#WebUploader:File)
+             */
+            fetch: function( status ) {
+                var len = this._queue.length,
+                    i, file;
+    
+                status = status || STATUS.QUEUED;
+    
+                for ( i = 0; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( status === file.getStatus() ) {
+                        return file;
+                    }
+                }
+    
+                return null;
+            },
+    
+            /**
+             * 对队列进行排序，能够控制文件上传顺序。
+             * @grammar sort( fn ) => undefined
+             * @method sort
+             * @param {Function} fn 排序方法
+             */
+            sort: function( fn ) {
+                if ( typeof fn === 'function' ) {
+                    this._queue.sort( fn );
+                }
+            },
+    
+            /**
+             * 获取指定类型的文件列表, 列表中每一个成员为[File](#WebUploader:File)对象。
+             * @grammar getFiles( [status1[, status2 ...]] ) => Array
+             * @method getFiles
+             * @param {String} [status] [文件状态值](#WebUploader:File:File.Status)
+             */
+            getFiles: function() {
+                var sts = [].slice.call( arguments, 0 ),
+                    ret = [],
+                    i = 0,
+                    len = this._queue.length,
+                    file;
+    
+                for ( ; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( sts.length && !~$.inArray( file.getStatus(), sts ) ) {
+                        continue;
+                    }
+    
+                    ret.push( file );
+                }
+    
+                return ret;
+            },
+    
+            _fileAdded: function( file ) {
+                var me = this,
+                    existing = this._map[ file.id ];
+    
+                if ( !existing ) {
+                    this._map[ file.id ] = file;
+    
+                    file.on( 'statuschange', function( cur, pre ) {
+                        me._onFileStatusChange( cur, pre );
+                    });
+                }
+    
+                file.setStatus( STATUS.QUEUED );
+            },
+    
+            _onFileStatusChange: function( curStatus, preStatus ) {
+                var stats = this.stats;
+    
+                switch ( preStatus ) {
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress--;
+                        break;
+    
+                    case STATUS.QUEUED:
+                        stats.numOfQueue --;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed--;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid--;
+                        break;
+                }
+    
+                switch ( curStatus ) {
+                    case STATUS.QUEUED:
+                        stats.numOfQueue++;
+                        break;
+    
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress++;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed++;
+                        break;
+    
+                    case STATUS.COMPLETE:
+                        stats.numOfSuccess++;
+                        break;
+    
+                    case STATUS.CANCELLED:
+                        stats.numOfCancel++;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid++;
+                        break;
+                }
+            }
+    
+        });
+    
+        Mediator.installTo( Queue.prototype );
+    
+        return Queue;
+    });
+    /**
+     * @fileOverview 队列
+     */
+    define('widgets/queue',[
+        'base',
+        'uploader',
+        'queue',
+        'file',
+        'lib/file',
+        'runtime/client',
+        'widgets/widget'
+    ], function( Base, Uploader, Queue, WUFile, File, RuntimeClient ) {
+    
+        var $ = Base.$,
+            rExt = /\.\w+$/,
+            Status = WUFile.Status;
+    
+        return Uploader.register({
+            'sort-files': 'sortFiles',
+            'add-file': 'addFiles',
+            'get-file': 'getFile',
+            'fetch-file': 'fetchFile',
+            'get-stats': 'getStats',
+            'get-files': 'getFiles',
+            'remove-file': 'removeFile',
+            'retry': 'retry',
+            'reset': 'reset',
+            'accept-file': 'acceptFile'
+        }, {
+    
+            init: function( opts ) {
+                var me = this,
+                    deferred, len, i, item, arr, accept, runtime;
+    
+                if ( $.isPlainObject( opts.accept ) ) {
+                    opts.accept = [ opts.accept ];
+                }
+    
+                // accept中的中生成匹配正则。
+                if ( opts.accept ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        item = opts.accept[ i ].extensions;
+                        item && arr.push( item );
+                    }
+    
+                    if ( arr.length ) {
+                        accept = '\\.' + arr.join(',')
+                                .replace( /,/g, '$|\\.' )
+                                .replace( /\*/g, '.*' ) + '$';
+                    }
+    
+                    me.accept = new RegExp( accept, 'i' );
+                }
+    
+                me.queue = new Queue();
+                me.stats = me.queue.stats;
+    
+                // 如果当前不是html5运行时，那就算了。
+                // 不执行后续操作
+                if ( this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                // 创建一个 html5 运行时的 placeholder
+                // 以至于外部添加原生 File 对象的时候能正确包裹一下供 webuploader 使用。
+                deferred = Base.Deferred();
+                runtime = new RuntimeClient('Placeholder');
+                runtime.connectRuntime({
+                    runtimeOrder: 'html5'
+                }, function() {
+                    me._ruid = runtime.getRuid();
+                    deferred.resolve();
+                });
+                return deferred.promise();
+            },
+    
+    
+            // 为了支持外部直接添加一个原生File对象。
+            _wrapFile: function( file ) {
+                if ( !(file instanceof WUFile) ) {
+    
+                    if ( !(file instanceof File) ) {
+                        if ( !this._ruid ) {
+                            throw new Error('Can\'t add external files.');
+                        }
+                        file = new File( this._ruid, file );
+                    }
+    
+                    file = new WUFile( file );
+                }
+    
+                return file;
+            },
+    
+            // 判断文件是否可以被加入队列
+            acceptFile: function( file ) {
+                var invalid = !file || file.size < 6 || this.accept &&
+    
+                        // 如果名字中有后缀，才做后缀白名单处理。
+                        rExt.exec( file.name ) && !this.accept.test( file.name );
+    
+                return !invalid;
+            },
+    
+    
+            /**
+             * @event beforeFileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列之前触发，此事件的handler返回值为`false`，则此文件不会被添加进入队列。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event fileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列以后触发。
+             * @for  Uploader
+             */
+    
+            _addFile: function( file ) {
+                var me = this;
+    
+                file = me._wrapFile( file );
+    
+                // 不过类型判断允许不允许，先派送 `beforeFileQueued`
+                if ( !me.owner.trigger( 'beforeFileQueued', file ) ) {
+                    return;
+                }
+    
+                // 类型不匹配，则派送错误事件，并返回。
+                if ( !me.acceptFile( file ) ) {
+                    me.owner.trigger( 'error', 'Q_TYPE_DENIED', file );
+                    return;
+                }
+    
+                me.queue.append( file );
+                me.owner.trigger( 'fileQueued', file );
+                return file;
+            },
+    
+            getFile: function( fileId ) {
+                return this.queue.getFile( fileId );
+            },
+    
+            /**
+             * @event filesQueued
+             * @param {File} files 数组，内容为原始File(lib/File）对象。
+             * @description 当一批文件添加进队列以后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method addFiles
+             * @grammar addFiles( file ) => undefined
+             * @grammar addFiles( [file1, file2 ...] ) => undefined
+             * @param {Array of File or File} [files] Files 对象 数组
+             * @description 添加文件到队列
+             * @for  Uploader
+             */
+            addFiles: function( files ) {
+                var me = this;
+    
+                if ( !files.length ) {
+                    files = [ files ];
+                }
+    
+                files = $.map( files, function( file ) {
+                    return me._addFile( file );
+                });
+    
+                me.owner.trigger( 'filesQueued', files );
+    
+                if ( me.options.auto ) {
+                    me.request('start-upload');
+                }
+            },
+    
+            getStats: function() {
+                return this.stats;
+            },
+    
+            /**
+             * @event fileDequeued
+             * @param {File} file File对象
+             * @description 当文件被移除队列后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method removeFile
+             * @grammar removeFile( file ) => undefined
+             * @grammar removeFile( id ) => undefined
+             * @param {File|id} file File对象或这File对象的id
+             * @description 移除某一文件。
+             * @for  Uploader
+             * @example
+             *
+             * $li.on('click', '.remove-this', function() {
+             *     uploader.removeFile( file );
+             * })
+             */
+            removeFile: function( file ) {
+                var me = this;
+    
+                file = file.id ? file : me.queue.getFile( file );
+    
+                file.setStatus( Status.CANCELLED );
+                me.owner.trigger( 'fileDequeued', file );
+            },
+    
+            /**
+             * @method getFiles
+             * @grammar getFiles() => Array
+             * @grammar getFiles( status1, status2, status... ) => Array
+             * @description 返回指定状态的文件集合，不传参数将返回所有状态的文件。
+             * @for  Uploader
+             * @example
+             * console.log( uploader.getFiles() );    // => all files
+             * console.log( uploader.getFiles('error') )    // => all error files.
+             */
+            getFiles: function() {
+                return this.queue.getFiles.apply( this.queue, arguments );
+            },
+    
+            fetchFile: function() {
+                return this.queue.fetch.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method retry
+             * @grammar retry() => undefined
+             * @grammar retry( file ) => undefined
+             * @description 重试上传，重试指定文件，或者从出错的文件开始重新上传。
+             * @for  Uploader
+             * @example
+             * function retry() {
+             *     uploader.retry();
+             * }
+             */
+            retry: function( file, noForceStart ) {
+                var me = this,
+                    files, i, len;
+    
+                if ( file ) {
+                    file = file.id ? file : me.queue.getFile( file );
+                    file.setStatus( Status.QUEUED );
+                    noForceStart || me.request('start-upload');
+                    return;
+                }
+    
+                files = me.queue.getFiles( Status.ERROR );
+                i = 0;
+                len = files.length;
+    
+                for ( ; i < len; i++ ) {
+                    file = files[ i ];
+                    file.setStatus( Status.QUEUED );
+                }
+    
+                me.request('start-upload');
+            },
+    
+            /**
+             * @method sort
+             * @grammar sort( fn ) => undefined
+             * @description 排序队列中的文件，在上传之前调整可以控制上传顺序。
+             * @for  Uploader
+             */
+            sortFiles: function() {
+                return this.queue.sort.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method reset
+             * @grammar reset() => undefined
+             * @description 重置uploader。目前只重置了队列。
+             * @for  Uploader
+             * @example
+             * uploader.reset();
+             */
+            reset: function() {
+                this.queue = new Queue();
+                this.stats = this.queue.stats;
+            }
+        });
+    
+    });
+    /**
+     * @fileOverview 添加获取Runtime相关信息的方法。
+     */
+    define('widgets/runtime',[
+        'uploader',
+        'runtime/runtime',
+        'widgets/widget'
+    ], function( Uploader, Runtime ) {
+    
+        Uploader.support = function() {
+            return Runtime.hasRuntime.apply( Runtime, arguments );
+        };
+    
+        return Uploader.register({
+            'predict-runtime-type': 'predictRuntmeType'
+        }, {
+    
+            init: function() {
+                if ( !this.predictRuntmeType() ) {
+                    throw Error('Runtime Error');
+                }
+            },
+    
+            /**
+             * 预测Uploader将采用哪个`Runtime`
+             * @grammar predictRuntmeType() => String
+             * @method predictRuntmeType
+             * @for  Uploader
+             */
+            predictRuntmeType: function() {
+                var orders = this.options.runtimeOrder || Runtime.orders,
+                    type = this.type,
+                    i, len;
+    
+                if ( !type ) {
+                    orders = orders.split( /\s*,\s*/g );
+    
+                    for ( i = 0, len = orders.length; i < len; i++ ) {
+                        if ( Runtime.hasRuntime( orders[ i ] ) ) {
+                            this.type = type = orders[ i ];
+                            break;
+                        }
+                    }
+                }
+    
+                return type;
+            }
+        });
+    });
+    /**
+     * @fileOverview Transport
+     */
+    define('lib/transport',[
+        'base',
+        'runtime/client',
+        'mediator'
+    ], function( Base, RuntimeClient, Mediator ) {
+    
+        var $ = Base.$;
+    
+        function Transport( opts ) {
+            var me = this;
+    
+            opts = me.options = $.extend( true, {}, Transport.options, opts || {} );
+            RuntimeClient.call( this, 'Transport' );
+    
+            this._blob = null;
+            this._formData = opts.formData || {};
+            this._headers = opts.headers || {};
+    
+            this.on( 'progress', this._timeout );
+            this.on( 'load error', function() {
+                me.trigger( 'progress', 1 );
+                clearTimeout( me._timer );
+            });
+        }
+    
+        Transport.options = {
+            server: '',
+            method: 'POST',
+    
+            // 跨域时，是否允许携带cookie, 只有html5 runtime才有效
+            withCredentials: false,
+            fileVal: 'file',
+            timeout: 2 * 60 * 1000,    // 2分钟
+            formData: {},
+            headers: {},
+            sendAsBinary: false
+        };
+    
+        $.extend( Transport.prototype, {
+    
+            // 添加Blob, 只能添加一次，最后一次有效。
+            appendBlob: function( key, blob, filename ) {
+                var me = this,
+                    opts = me.options;
+    
+                if ( me.getRuid() ) {
+                    me.disconnectRuntime();
+                }
+    
+                // 连接到blob归属的同一个runtime.
+                me.connectRuntime( blob.ruid, function() {
+                    me.exec('init');
+                });
+    
+                me._blob = blob;
+                opts.fileVal = key || opts.fileVal;
+                opts.filename = filename || opts.filename;
+            },
+    
+            // 添加其他字段
+            append: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._formData, key );
+                } else {
+                    this._formData[ key ] = value;
+                }
+            },
+    
+            setRequestHeader: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._headers, key );
+                } else {
+                    this._headers[ key ] = value;
+                }
+            },
+    
+            send: function( method ) {
+                this.exec( 'send', method );
+                this._timeout();
+            },
+    
+            abort: function() {
+                clearTimeout( this._timer );
+                return this.exec('abort');
+            },
+    
+            destroy: function() {
+                this.trigger('destroy');
+                this.off();
+                this.exec('destroy');
+                this.disconnectRuntime();
+            },
+    
+            getResponse: function() {
+                return this.exec('getResponse');
+            },
+    
+            getResponseAsJson: function() {
+                return this.exec('getResponseAsJson');
+            },
+    
+            getStatus: function() {
+                return this.exec('getStatus');
+            },
+    
+            _timeout: function() {
+                var me = this,
+                    duration = me.options.timeout;
+    
+                if ( !duration ) {
+                    return;
+                }
+    
+                clearTimeout( me._timer );
+                me._timer = setTimeout(function() {
+                    me.abort();
+                    me.trigger( 'error', 'timeout' );
+                }, duration );
+            }
+    
+        });
+    
+        // 让Transport具备事件功能。
+        Mediator.installTo( Transport.prototype );
+    
+        return Transport;
+    });
+    /**
+     * @fileOverview 负责文件上传相关。
+     */
+    define('widgets/upload',[
+        'base',
+        'uploader',
+        'file',
+        'lib/transport',
+        'widgets/widget'
+    ], function( Base, Uploader, WUFile, Transport ) {
+    
+        var $ = Base.$,
+            isPromise = Base.isPromise,
+            Status = WUFile.Status;
+    
+        // 添加默认配置项
+        $.extend( Uploader.options, {
+    
+    
+            /**
+             * @property {Boolean} [prepareNextFile=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否允许在文件传输时提前把下一个文件准备好。
+             * 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。
+             * 如果能提前在当前文件传输期处理，可以节省总体耗时。
+             */
+            prepareNextFile: false,
+    
+            /**
+             * @property {Boolean} [chunked=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否要分片处理大文件上传。
+             */
+            chunked: false,
+    
+            /**
+             * @property {Boolean} [chunkSize=5242880]
+             * @namespace options
+             * @for Uploader
+             * @description 如果要分片，分多大一片？ 默认大小为5M.
+             */
+            chunkSize: 5 * 1024 * 1024,
+    
+            /**
+             * @property {Boolean} [chunkRetry=2]
+             * @namespace options
+             * @for Uploader
+             * @description 如果某个分片由于网络问题出错，允许自动重传多少次？
+             */
+            chunkRetry: 2,
+    
+            /**
+             * @property {Boolean} [threads=3]
+             * @namespace options
+             * @for Uploader
+             * @description 上传并发数。允许同时最大上传进程数。
+             */
+            threads: 3,
+    
+    
+            /**
+             * @property {Object} [formData]
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传请求的参数表，每次发送都会发送此对象中的参数。
+             */
+            formData: null
+    
+            /**
+             * @property {Object} [fileVal='file']
+             * @namespace options
+             * @for Uploader
+             * @description 设置文件上传域的name。
+             */
+    
+            /**
+             * @property {Object} [method='POST']
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传方式，`POST`或者`GET`。
+             */
+    
+            /**
+             * @property {Object} [sendAsBinary=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否已二进制的流的方式发送文件，这样整个上传内容`php://input`都为文件内容，
+             * 其他参数在$_GET数组中。
+             */
+        });
+    
+        // 负责将文件切片。
+        function CuteFile( file, chunkSize ) {
+            var pending = [],
+                blob = file.source,
+                total = blob.size,
+                chunks = chunkSize ? Math.ceil( total / chunkSize ) : 1,
+                start = 0,
+                index = 0,
+                len;
+    
+            while ( index < chunks ) {
+                len = Math.min( chunkSize, total - start );
+    
+                pending.push({
+                    file: file,
+                    start: start,
+                    end: chunkSize ? (start + len) : total,
+                    total: total,
+                    chunks: chunks,
+                    chunk: index++
+                });
+                start += len;
+            }
+    
+            file.blocks = pending.concat();
+            file.remaning = pending.length;
+    
+            return {
+                file: file,
+    
+                has: function() {
+                    return !!pending.length;
+                },
+    
+                fetch: function() {
+                    return pending.shift();
+                }
+            };
+        }
+    
+        Uploader.register({
+            'start-upload': 'start',
+            'stop-upload': 'stop',
+            'skip-file': 'skipFile',
+            'is-in-progress': 'isInProgress'
+        }, {
+    
+            init: function() {
+                var owner = this.owner;
+    
+                this.runing = false;
+    
+                // 记录当前正在传的数据，跟threads相关
+                this.pool = [];
+    
+                // 缓存即将上传的文件。
+                this.pending = [];
+    
+                // 跟踪还有多少分片没有完成上传。
+                this.remaning = 0;
+                this.__tick = Base.bindFn( this._tick, this );
+    
+                owner.on( 'uploadComplete', function( file ) {
+                    // 把其他块取消了。
+                    file.blocks && $.each( file.blocks, function( _, v ) {
+                        v.transport && (v.transport.abort(), v.transport.destroy());
+                        delete v.transport;
+                    });
+    
+                    delete file.blocks;
+                    delete file.remaning;
+                });
+            },
+    
+            /**
+             * @event startUpload
+             * @description 当开始上传流程时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。
+             * @grammar upload() => undefined
+             * @method upload
+             * @for  Uploader
+             */
+            start: function() {
+                var me = this;
+    
+                // 移出invalid的文件
+                $.each( me.request( 'get-files', Status.INVALID ), function() {
+                    me.request( 'remove-file', this );
+                });
+    
+                if ( me.runing ) {
+                    return;
+                }
+    
+                me.runing = true;
+    
+                // 如果有暂停的，则续传
+                $.each( me.pool, function( _, v ) {
+                    var file = v.file;
+    
+                    if ( file.getStatus() === Status.INTERRUPT ) {
+                        file.setStatus( Status.PROGRESS );
+                        me._trigged = false;
+                        v.transport && v.transport.send();
+                    }
+                });
+    
+                me._trigged = false;
+                me.owner.trigger('startUpload');
+                Base.nextTick( me.__tick );
+            },
+    
+            /**
+             * @event stopUpload
+             * @description 当开始上传流程暂停时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 暂停上传。第一个参数为是否中断上传当前正在上传的文件。
+             * @grammar stop() => undefined
+             * @grammar stop( true ) => undefined
+             * @method stop
+             * @for  Uploader
+             */
+            stop: function( interrupt ) {
+                var me = this;
+    
+                if ( me.runing === false ) {
+                    return;
+                }
+    
+                me.runing = false;
+    
+                interrupt && $.each( me.pool, function( _, v ) {
+                    v.transport && v.transport.abort();
+                    v.file.setStatus( Status.INTERRUPT );
+                });
+    
+                me.owner.trigger('stopUpload');
+            },
+    
+            /**
+             * 判断`Uplaode`r是否正在上传中。
+             * @grammar isInProgress() => Boolean
+             * @method isInProgress
+             * @for  Uploader
+             */
+            isInProgress: function() {
+                return !!this.runing;
+            },
+    
+            getStats: function() {
+                return this.request('get-stats');
+            },
+    
+            /**
+             * 掉过一个文件上传，直接标记指定文件为已上传状态。
+             * @grammar skipFile( file ) => undefined
+             * @method skipFile
+             * @for  Uploader
+             */
+            skipFile: function( file, status ) {
+                file = this.request( 'get-file', file );
+    
+                file.setStatus( status || Status.COMPLETE );
+                file.skipped = true;
+    
+                // 如果正在上传。
+                file.blocks && $.each( file.blocks, function( _, v ) {
+                    var _tr = v.transport;
+    
+                    if ( _tr ) {
+                        _tr.abort();
+                        _tr.destroy();
+                        delete v.transport;
+                    }
+                });
+    
+                this.owner.trigger( 'uploadSkip', file );
+            },
+    
+            /**
+             * @event uploadFinished
+             * @description 当所有文件上传结束时触发。
+             * @for  Uploader
+             */
+            _tick: function() {
+                var me = this,
+                    opts = me.options,
+                    fn, val;
+    
+                // 上一个promise还没有结束，则等待完成后再执行。
+                if ( me._promise ) {
+                    return me._promise.always( me.__tick );
+                }
+    
+                // 还有位置，且还有文件要处理的话。
+                if ( me.pool.length < opts.threads && (val = me._nextBlock()) ) {
+                    me._trigged = false;
+    
+                    fn = function( val ) {
+                        me._promise = null;
+    
+                        // 有可能是reject过来的，所以要检测val的类型。
+                        val && val.file && me._startSend( val );
+                        Base.nextTick( me.__tick );
+                    };
+    
+                    me._promise = isPromise( val ) ? val.always( fn ) : fn( val );
+    
+                // 没有要上传的了，且没有正在传输的了。
+                } else if ( !me.remaning && !me.getStats().numOfQueue ) {
+                    me.runing = false;
+    
+                    me._trigged || Base.nextTick(function() {
+                        me.owner.trigger('uploadFinished');
+                    });
+                    me._trigged = true;
+                }
+            },
+    
+            _nextBlock: function() {
+                var me = this,
+                    act = me._act,
+                    opts = me.options,
+                    next, done;
+    
+                // 如果当前文件还有没有需要传输的，则直接返回剩下的。
+                if ( act && act.has() &&
+                        act.file.getStatus() === Status.PROGRESS ) {
+    
+                    // 是否提前准备下一个文件
+                    if ( opts.prepareNextFile && !me.pending.length ) {
+                        me._prepareNextFile();
+                    }
+    
+                    return act.fetch();
+    
+                // 否则，如果正在运行，则准备下一个文件，并等待完成后返回下个分片。
+                } else if ( me.runing ) {
+    
+                    // 如果缓存中有，则直接在缓存中取，没有则去queue中取。
+                    if ( !me.pending.length && me.getStats().numOfQueue ) {
+                        me._prepareNextFile();
+                    }
+    
+                    next = me.pending.shift();
+                    done = function( file ) {
+                        if ( !file ) {
+                            return null;
+                        }
+    
+                        act = CuteFile( file, opts.chunked ? opts.chunkSize : 0 );
+                        me._act = act;
+                        return act.fetch();
+                    };
+    
+                    // 文件可能还在prepare中，也有可能已经完全准备好了。
+                    return isPromise( next ) ?
+                            next[ next.pipe ? 'pipe' : 'then']( done ) :
+                            done( next );
+                }
+            },
+    
+    
+            /**
+             * @event uploadStart
+             * @param {File} file File对象
+             * @description 某个文件开始上传前触发，一个文件只会触发一次。
+             * @for  Uploader
+             */
+            _prepareNextFile: function() {
+                var me = this,
+                    file = me.request('fetch-file'),
+                    pending = me.pending,
+                    promise;
+    
+                if ( file ) {
+                    promise = me.request( 'before-send-file', file, function() {
+    
+                        // 有可能文件被skip掉了。文件被skip掉后，状态坑定不是Queued.
+                        if ( file.getStatus() === Status.QUEUED ) {
+                            me.owner.trigger( 'uploadStart', file );
+                            file.setStatus( Status.PROGRESS );
+                            return file;
+                        }
+    
+                        return me._finishFile( file );
+                    });
+    
+                    // 如果还在pending中，则替换成文件本身。
+                    promise.done(function() {
+                        var idx = $.inArray( promise, pending );
+    
+                        ~idx && pending.splice( idx, 1, file );
+                    });
+    
+                    // befeore-send-file的钩子就有错误发生。
+                    promise.fail(function( reason ) {
+                        file.setStatus( Status.ERROR, reason );
+                        me.owner.trigger( 'uploadError', file, reason );
+                        me.owner.trigger( 'uploadComplete', file );
+                    });
+    
+                    pending.push( promise );
+                }
+            },
+    
+            // 让出位置了，可以让其他分片开始上传
+            _popBlock: function( block ) {
+                var idx = $.inArray( block, this.pool );
+    
+                this.pool.splice( idx, 1 );
+                block.file.remaning--;
+                this.remaning--;
+            },
+    
+            // 开始上传，可以被掉过。如果promise被reject了，则表示跳过此分片。
+            _startSend: function( block ) {
+                var me = this,
+                    file = block.file,
+                    promise;
+    
+                me.pool.push( block );
+                me.remaning++;
+    
+                // 如果没有分片，则直接使用原始的。
+                // 不会丢失content-type信息。
+                block.blob = block.chunks === 1 ? file.source :
+                        file.source.slice( block.start, block.end );
+    
+                // hook, 每个分片发送之前可能要做些异步的事情。
+                promise = me.request( 'before-send', block, function() {
+    
+                    // 有可能文件已经上传出错了，所以不需要再传输了。
+                    if ( file.getStatus() === Status.PROGRESS ) {
+                        me._doSend( block );
+                    } else {
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+    
+                // 如果为fail了，则跳过此分片。
+                promise.fail(function() {
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file ).always(function() {
+                            block.percentage = 1;
+                            me._popBlock( block );
+                            me.owner.trigger( 'uploadComplete', file );
+                            Base.nextTick( me.__tick );
+                        });
+                    } else {
+                        block.percentage = 1;
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+            },
+    
+    
+            /**
+             * @event uploadBeforeSend
+             * @param {Object} object
+             * @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数。
+             * @description 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadAccept
+             * @param {Object} object
+             * @param {Object} ret 服务端的返回数据，json格式，如果服务端不是json格式，从ret._raw中取数据，自行解析。
+             * @description 当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为`false`, 则此文件将派送`server`类型的`uploadError`事件。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadProgress
+             * @param {File} file File对象
+             * @param {Number} percentage 上传进度
+             * @description 上传过程中触发，携带上传进度。
+             * @for  Uploader
+             */
+    
+    
+            /**
+             * @event uploadError
+             * @param {File} file File对象
+             * @param {String} reason 出错的code
+             * @description 当文件上传出错时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadSuccess
+             * @param {File} file File对象
+             * @param {Object} response 服务端返回的数据
+             * @description 当文件上传成功时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadComplete
+             * @param {File} [file] File对象
+             * @description 不管成功或者失败，文件上传完成时触发。
+             * @for  Uploader
+             */
+    
+            // 做上传操作。
+            _doSend: function( block ) {
+                var me = this,
+                    owner = me.owner,
+                    opts = me.options,
+                    file = block.file,
+                    tr = new Transport( opts ),
+                    data = $.extend({}, opts.formData ),
+                    headers = $.extend({}, opts.headers ),
+                    requestAccept, ret;
+    
+                block.transport = tr;
+    
+                tr.on( 'destroy', function() {
+                    delete block.transport;
+                    me._popBlock( block );
+                    Base.nextTick( me.__tick );
+                });
+    
+                // 广播上传进度。以文件为单位。
+                tr.on( 'progress', function( percentage ) {
+                    var totalPercent = 0,
+                        uploaded = 0;
+    
+                    // 可能没有abort掉，progress还是执行进来了。
+                    // if ( !file.blocks ) {
+                    //     return;
+                    // }
+    
+                    totalPercent = block.percentage = percentage;
+    
+                    if ( block.chunks > 1 ) {    // 计算文件的整体速度。
+                        $.each( file.blocks, function( _, v ) {
+                            uploaded += (v.percentage || 0) * (v.end - v.start);
+                        });
+    
+                        totalPercent = uploaded / file.size;
+                    }
+    
+                    owner.trigger( 'uploadProgress', file, totalPercent || 0 );
+                });
+    
+                // 用来询问，是否返回的结果是有错误的。
+                requestAccept = function( reject ) {
+                    var fn;
+    
+                    ret = tr.getResponseAsJson() || {};
+                    ret._raw = tr.getResponse();
+                    fn = function( value ) {
+                        reject = value;
+                    };
+    
+                    // 服务端响应了，不代表成功了，询问是否响应正确。
+                    if ( !owner.trigger( 'uploadAccept', block, ret, fn ) ) {
+                        reject = reject || 'server';
+                    }
+    
+                    return reject;
+                };
+    
+                // 尝试重试，然后广播文件上传出错。
+                tr.on( 'error', function( type, flag ) {
+                    block.retried = block.retried || 0;
+    
+                    // 自动重试
+                    if ( block.chunks > 1 && ~'http,abort'.indexOf( type ) &&
+                            block.retried < opts.chunkRetry ) {
+    
+                        block.retried++;
+                        tr.send();
+    
+                    } else {
+    
+                        // http status 500 ~ 600
+                        if ( !flag && type === 'server' ) {
+                            type = requestAccept( type );
+                        }
+    
+                        file.setStatus( Status.ERROR, type );
+                        owner.trigger( 'uploadError', file, type );
+                        owner.trigger( 'uploadComplete', file );
+                    }
+                });
+    
+                // 上传成功
+                tr.on( 'load', function() {
+                    var reason;
+    
+                    // 如果非预期，转向上传出错。
+                    if ( (reason = requestAccept()) ) {
+                        tr.trigger( 'error', reason, true );
+                        return;
+                    }
+    
+                    // 全部上传完成。
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file, ret );
+                    } else {
+                        tr.destroy();
+                    }
+                });
+    
+                // 配置默认的上传字段。
+                data = $.extend( data, {
+                    id: file.id,
+                    name: file.name,
+                    type: file.type,
+                    lastModifiedDate: file.lastModifiedDate,
+                    size: file.size
+                });
+    
+                block.chunks > 1 && $.extend( data, {
+                    chunks: block.chunks,
+                    chunk: block.chunk
+                });
+    
+                // 在发送之间可以添加字段什么的。。。
+                // 如果默认的字段不够使用，可以通过监听此事件来扩展
+                owner.trigger( 'uploadBeforeSend', block, data, headers );
+    
+                // 开始发送。
+                tr.appendBlob( opts.fileVal, block.blob, file.name );
+                tr.append( data );
+                tr.setRequestHeader( headers );
+                tr.send();
+            },
+    
+            // 完成上传。
+            _finishFile: function( file, ret, hds ) {
+                var owner = this.owner;
+    
+                return owner
+                        .request( 'after-send-file', arguments, function() {
+                            file.setStatus( Status.COMPLETE );
+                            owner.trigger( 'uploadSuccess', file, ret, hds );
+                        })
+                        .fail(function( reason ) {
+    
+                            // 如果外部已经标记为invalid什么的，不再改状态。
+                            if ( file.getStatus() === Status.PROGRESS ) {
+                                file.setStatus( Status.ERROR, reason );
+                            }
+    
+                            owner.trigger( 'uploadError', file, reason );
+                        })
+                        .always(function() {
+                            owner.trigger( 'uploadComplete', file );
+                        });
+            }
+    
+        });
+    });
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/compbase',[],function() {
+    
+        function CompBase( owner, runtime ) {
+    
+            this.owner = owner;
+            this.options = owner.options;
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.getRuid = function() {
+                return runtime.uid;
+            };
+    
+            this.trigger = function() {
+                return owner.trigger.apply( owner, arguments );
+            };
+        }
+    
+        return CompBase;
+    });
+    /**
+     * @fileOverview Html5Runtime
+     */
+    define('runtime/html5/runtime',[
+        'base',
+        'runtime/runtime',
+        'runtime/compbase'
+    ], function( Base, Runtime, CompBase ) {
+    
+        var type = 'html5',
+            components = {};
+    
+        function Html5Runtime() {
+            var pool = {},
+                me = this,
+                destory = this.destory;
+    
+            Runtime.apply( me, arguments );
+            me.type = type;
+    
+    
+            // 这个方法的调用者，实际上是RuntimeClient
+            me.exec = function( comp, fn/*, args...*/) {
+                var client = this,
+                    uid = client.uid,
+                    args = Base.slice( arguments, 2 ),
+                    instance;
+    
+                if ( components[ comp ] ) {
+                    instance = pool[ uid ] = pool[ uid ] ||
+                            new components[ comp ]( client, me );
+    
+                    if ( instance[ fn ] ) {
+                        return instance[ fn ].apply( instance, args );
+                    }
+                }
+            };
+    
+            me.destory = function() {
+                // @todo 删除池子中的所有实例
+                return destory && destory.apply( this, arguments );
+            };
+        }
+    
+        Base.inherits( Runtime, {
+            constructor: Html5Runtime,
+    
+            // 不需要连接其他程序，直接执行callback
+            init: function() {
+                var me = this;
+                setTimeout(function() {
+                    me.trigger('ready');
+                }, 1 );
+            }
+    
+        });
+    
+        // 注册Components
+        Html5Runtime.register = function( name, component ) {
+            var klass = components[ name ] = Base.inherits( CompBase, component );
+            return klass;
+        };
+    
+        // 注册html5运行时。
+        // 只有在支持的前提下注册。
+        if ( window.Blob && window.FileReader && window.DataView ) {
+            Runtime.addRuntime( type, Html5Runtime );
+        }
+    
+        return Html5Runtime;
+    });
+    /**
+     * @fileOverview Blob Html实现
+     */
+    define('runtime/html5/blob',[
+        'runtime/html5/runtime',
+        'lib/blob'
+    ], function( Html5Runtime, Blob ) {
+    
+        return Html5Runtime.register( 'Blob', {
+            slice: function( start, end ) {
+                var blob = this.owner.source,
+                    slice = blob.slice || blob.webkitSlice || blob.mozSlice;
+    
+                blob = slice.call( blob, start, end );
+    
+                return new Blob( this.getRuid(), blob );
+            }
+        });
+    });
+    /**
+     * @fileOverview FilePicker
+     */
+    define('runtime/html5/filepicker',[
+        'base',
+        'runtime/html5/runtime'
+    ], function( Base, Html5Runtime ) {
+    
+        var $ = Base.$;
+    
+        return Html5Runtime.register( 'FilePicker', {
+            init: function() {
+                var container = this.getRuntime().getContainer(),
+                    me = this,
+                    owner = me.owner,
+                    opts = me.options,
+                    lable = $( document.createElement('label') ),
+                    input = $( document.createElement('input') ),
+                    arr, i, len, mouseHandler;
+    
+                input.attr( 'type', 'file' );
+                input.attr( 'name', opts.name );
+                input.addClass('webuploader-element-invisible');
+    
+                lable.on( 'click', function() {
+                    input.trigger('click');
+                });
+    
+                lable.css({
+                    opacity: 0,
+                    width: '100%',
+                    height: '100%',
+                    display: 'block',
+                    cursor: 'pointer',
+                    background: '#ffffff'
+                });
+    
+                if ( opts.multiple ) {
+                    input.attr( 'multiple', 'multiple' );
+                }
+    
+                // @todo Firefox不支持单独指定后缀
+                if ( opts.accept && opts.accept.length > 0 ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        arr.push( opts.accept[ i ].mimeTypes );
+                    }
+    
+                    input.attr( 'accept', arr.join(',') );
+                }
+    
+                container.append( input );
+                container.append( lable );
+    
+                mouseHandler = function( e ) {
+                    owner.trigger( e.type );
+                };
+    
+                input.on( 'change', function( e ) {
+                    var fn = arguments.callee,
+                        clone;
+    
+                    me.files = e.target.files;
+    
+                    // reset input
+                    clone = this.cloneNode( true );
+                    this.parentNode.replaceChild( clone, this );
+    
+                    input.off();
+                    input = $( clone ).on( 'change', fn )
+                            .on( 'mouseenter mouseleave', mouseHandler );
+    
+                    owner.trigger('change');
+                });
+    
+                lable.on( 'mouseenter mouseleave', mouseHandler );
+    
+            },
+    
+    
+            getFiles: function() {
+                return this.files;
+            },
+    
+            destroy: function() {
+                // todo
+            }
+        });
+    });
+    /**
+     * Terms:
+     *
+     * Uint8Array, FileReader, BlobBuilder, atob, ArrayBuffer
+     * @fileOverview Image控件
+     */
+    define('runtime/html5/util',[
+        'base'
+    ], function( Base ) {
+    
+        var urlAPI = window.createObjectURL && window ||
+                window.URL && URL.revokeObjectURL && URL ||
+                window.webkitURL,
+            createObjectURL = Base.noop,
+            revokeObjectURL = createObjectURL;
+    
+        if ( urlAPI ) {
+    
+            // 更安全的方式调用，比如android里面就能把context改成其他的对象。
+            createObjectURL = function() {
+                return urlAPI.createObjectURL.apply( urlAPI, arguments );
+            };
+    
+            revokeObjectURL = function() {
+                return urlAPI.revokeObjectURL.apply( urlAPI, arguments );
+            };
+        }
+    
+        return {
+            createObjectURL: createObjectURL,
+            revokeObjectURL: revokeObjectURL,
+    
+            dataURL2Blob: function( dataURI ) {
+                var byteStr, intArray, ab, i, mimetype, parts;
+    
+                parts = dataURI.split(',');
+    
+                if ( ~parts[ 0 ].indexOf('base64') ) {
+                    byteStr = atob( parts[ 1 ] );
+                } else {
+                    byteStr = decodeURIComponent( parts[ 1 ] );
+                }
+    
+                ab = new ArrayBuffer( byteStr.length );
+                intArray = new Uint8Array( ab );
+    
+                for ( i = 0; i < byteStr.length; i++ ) {
+                    intArray[ i ] = byteStr.charCodeAt( i );
+                }
+    
+                mimetype = parts[ 0 ].split(':')[ 1 ].split(';')[ 0 ];
+    
+                return this.arrayBufferToBlob( ab, mimetype );
+            },
+    
+            dataURL2ArrayBuffer: function( dataURI ) {
+                var byteStr, intArray, i, parts;
+    
+                parts = dataURI.split(',');
+    
+                if ( ~parts[ 0 ].indexOf('base64') ) {
+                    byteStr = atob( parts[ 1 ] );
+                } else {
+                    byteStr = decodeURIComponent( parts[ 1 ] );
+                }
+    
+                intArray = new Uint8Array( byteStr.length );
+    
+                for ( i = 0; i < byteStr.length; i++ ) {
+                    intArray[ i ] = byteStr.charCodeAt( i );
+                }
+    
+                return intArray.buffer;
+            },
+    
+            arrayBufferToBlob: function( buffer, type ) {
+                var builder = window.BlobBuilder || window.WebKitBlobBuilder,
+                    bb;
+    
+                // android不支持直接new Blob, 只能借助blobbuilder.
+                if ( builder ) {
+                    bb = new builder();
+                    bb.append( buffer );
+                    return bb.getBlob( type );
+                }
+    
+                return new Blob([ buffer ], type ? { type: type } : {} );
+            },
+    
+            // 抽出来主要是为了解决android下面canvas.toDataUrl不支持jpeg.
+            // 你得到的结果是png.
+            canvasToDataUrl: function( canvas, type, quality ) {
+                return canvas.toDataURL( type, quality / 100 );
+            },
+    
+            // imagemeat会复写这个方法，如果用户选择加载那个文件了的话。
+            parseMeta: function( blob, callback ) {
+                callback( false, {});
+            },
+    
+            // imagemeat会复写这个方法，如果用户选择加载那个文件了的话。
+            updateImageHead: function( data ) {
+                return data;
+            }
+        };
+    });
+    /**
+     * Terms:
+     *
+     * Uint8Array, FileReader, BlobBuilder, atob, ArrayBuffer
+     * @fileOverview Image控件
+     */
+    define('runtime/html5/imagemeta',[
+        'runtime/html5/util'
+    ], function( Util ) {
+    
+        var api;
+    
+        api = {
+            parsers: {
+                0xffe1: []
+            },
+    
+            maxMetaDataSize: 262144,
+    
+            parse: function( blob, cb ) {
+                var me = this,
+                    fr = new FileReader();
+    
+                fr.onload = function() {
+                    cb( false, me._parse( this.result ) );
+                    fr = fr.onload = fr.onerror = null;
+                };
+    
+                fr.onerror = function( e ) {
+                    cb( e.message );
+                    fr = fr.onload = fr.onerror = null;
+                };
+    
+                blob = blob.slice( 0, me.maxMetaDataSize );
+                fr.readAsArrayBuffer( blob.getSource() );
+            },
+    
+            _parse: function( buffer, noParse ) {
+                if ( buffer.byteLength < 6 ) {
+                    return;
+                }
+    
+                var dataview = new DataView( buffer ),
+                    offset = 2,
+                    maxOffset = dataview.byteLength - 4,
+                    headLength = offset,
+                    ret = {},
+                    markerBytes, markerLength, parsers, i;
+    
+                if ( dataview.getUint16( 0 ) === 0xffd8 ) {
+    
+                    while ( offset < maxOffset ) {
+                        markerBytes = dataview.getUint16( offset );
+    
+                        if ( markerBytes >= 0xffe0 && markerBytes <= 0xffef ||
+                                markerBytes === 0xfffe ) {
+    
+                            markerLength = dataview.getUint16( offset + 2 ) + 2;
+    
+                            if ( offset + markerLength > dataview.byteLength ) {
+                                break;
+                            }
+    
+                            parsers = api.parsers[ markerBytes ];
+    
+                            if ( !noParse && parsers ) {
+                                for ( i = 0; i < parsers.length; i += 1 ) {
+                                    parsers[ i ].call( api, dataview, offset,
+                                            markerLength, ret );
+                                }
+                            }
+    
+                            offset += markerLength;
+                            headLength = offset;
+                        } else {
+                            break;
+                        }
+                    }
+    
+                    if ( headLength > 6 ) {
+                        if ( buffer.slice ) {
+                            ret.imageHead = buffer.slice( 2, headLength );
+                        } else {
+                            // Workaround for IE10, which does not yet
+                            // support ArrayBuffer.slice:
+                            ret.imageHead = new Uint8Array( buffer )
+                                    .subarray( 2, headLength );
+                        }
+                    }
+                }
+    
+                return ret;
+            },
+    
+            updateImageHead: function( buffer, head ) {
+                var data = this._parse( buffer, true ),
+                    buf1, buf2, bodyoffset;
+    
+    
+                bodyoffset = 2;
+                if ( data.imageHead ) {
+                    bodyoffset = 2 + data.imageHead.byteLength;
+                }
+    
+                if ( buffer.slice ) {
+                    buf2 = buffer.slice( bodyoffset );
+                } else {
+                    buf2 = new Uint8Array( buffer ).subarray( bodyoffset );
+                }
+    
+                buf1 = new Uint8Array( head.byteLength + 2 + buf2.byteLength );
+    
+                buf1[ 0 ] = 0xFF;
+                buf1[ 1 ] = 0xD8;
+                buf1.set( new Uint8Array( head ), 2 );
+                buf1.set( new Uint8Array( buf2 ), head.byteLength + 2 );
+    
+                return buf1.buffer;
+            }
+        };
+    
+        Util.parseMeta = function() {
+            return api.parse.apply( api, arguments );
+        };
+    
+        Util.updateImageHead = function() {
+            return api.updateImageHead.apply( api, arguments );
+        };
+    
+        return api;
+    });
+    /**
+     * 代码来自于：https://github.com/blueimp/JavaScript-Load-Image
+     * 暂时项目中只用了orientation.
+     *
+     * 去除了 Exif Sub IFD Pointer, GPS Info IFD Pointer, Exif Thumbnail.
+     * @fileOverview EXIF解析
+     */
+    
+    // Sample
+    // ====================================
+    // Make : Apple
+    // Model : iPhone 4S
+    // Orientation : 1
+    // XResolution : 72 [72/1]
+    // YResolution : 72 [72/1]
+    // ResolutionUnit : 2
+    // Software : QuickTime 7.7.1
+    // DateTime : 2013:09:01 22:53:55
+    // ExifIFDPointer : 190
+    // ExposureTime : 0.058823529411764705 [1/17]
+    // FNumber : 2.4 [12/5]
+    // ExposureProgram : Normal program
+    // ISOSpeedRatings : 800
+    // ExifVersion : 0220
+    // DateTimeOriginal : 2013:09:01 22:52:51
+    // DateTimeDigitized : 2013:09:01 22:52:51
+    // ComponentsConfiguration : YCbCr
+    // ShutterSpeedValue : 4.058893515764426
+    // ApertureValue : 2.5260688216892597 [4845/1918]
+    // BrightnessValue : -0.3126686601998395
+    // MeteringMode : Pattern
+    // Flash : Flash did not fire, compulsory flash mode
+    // FocalLength : 4.28 [107/25]
+    // SubjectArea : [4 values]
+    // FlashpixVersion : 0100
+    // ColorSpace : 1
+    // PixelXDimension : 2448
+    // PixelYDimension : 3264
+    // SensingMethod : One-chip color area sensor
+    // ExposureMode : 0
+    // WhiteBalance : Auto white balance
+    // FocalLengthIn35mmFilm : 35
+    // SceneCaptureType : Standard
+    define('runtime/html5/imagemeta/exif',[
+        'base',
+        'runtime/html5/imagemeta'
+    ], function( Base, ImageMeta ) {
+    
+        var EXIF = {};
+    
+        EXIF.ExifMap = function() {
+            return this;
+        };
+    
+        EXIF.ExifMap.prototype.map = {
+            'Orientation': 0x0112
+        };
+    
+        EXIF.ExifMap.prototype.get = function( id ) {
+            return this[ id ] || this[ this.map[ id ] ];
+        };
+    
+        EXIF.exifTagTypes = {
+            // byte, 8-bit unsigned int:
+            1: {
+                getValue: function( dataView, dataOffset ) {
+                    return dataView.getUint8( dataOffset );
+                },
+                size: 1
+            },
+    
+            // ascii, 8-bit byte:
+            2: {
+                getValue: function( dataView, dataOffset ) {
+                    return String.fromCharCode( dataView.getUint8( dataOffset ) );
+                },
+                size: 1,
+                ascii: true
+            },
+    
+            // short, 16 bit int:
+            3: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getUint16( dataOffset, littleEndian );
+                },
+                size: 2
+            },
+    
+            // long, 32 bit int:
+            4: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getUint32( dataOffset, littleEndian );
+                },
+                size: 4
+            },
+    
+            // rational = two long values,
+            // first is numerator, second is denominator:
+            5: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getUint32( dataOffset, littleEndian ) /
+                        dataView.getUint32( dataOffset + 4, littleEndian );
+                },
+                size: 8
+            },
+    
+            // slong, 32 bit signed int:
+            9: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getInt32( dataOffset, littleEndian );
+                },
+                size: 4
+            },
+    
+            // srational, two slongs, first is numerator, second is denominator:
+            10: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getInt32( dataOffset, littleEndian ) /
+                        dataView.getInt32( dataOffset + 4, littleEndian );
+                },
+                size: 8
+            }
+        };
+    
+        // undefined, 8-bit byte, value depending on field:
+        EXIF.exifTagTypes[ 7 ] = EXIF.exifTagTypes[ 1 ];
+    
+        EXIF.getExifValue = function( dataView, tiffOffset, offset, type, length,
+                littleEndian ) {
+    
+            var tagType = EXIF.exifTagTypes[ type ],
+                tagSize, dataOffset, values, i, str, c;
+    
+            if ( !tagType ) {
+                Base.log('Invalid Exif data: Invalid tag type.');
+                return;
+            }
+    
+            tagSize = tagType.size * length;
+    
+            // Determine if the value is contained in the dataOffset bytes,
+            // or if the value at the dataOffset is a pointer to the actual data:
+            dataOffset = tagSize > 4 ? tiffOffset + dataView.getUint32( offset + 8,
+                    littleEndian ) : (offset + 8);
+    
+            if ( dataOffset + tagSize > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid data offset.');
+                return;
+            }
+    
+            if ( length === 1 ) {
+                return tagType.getValue( dataView, dataOffset, littleEndian );
+            }
+    
+            values = [];
+    
+            for ( i = 0; i < length; i += 1 ) {
+                values[ i ] = tagType.getValue( dataView,
+                        dataOffset + i * tagType.size, littleEndian );
+            }
+    
+            if ( tagType.ascii ) {
+                str = '';
+    
+                // Concatenate the chars:
+                for ( i = 0; i < values.length; i += 1 ) {
+                    c = values[ i ];
+    
+                    // Ignore the terminating NULL byte(s):
+                    if ( c === '\u0000' ) {
+                        break;
+                    }
+                    str += c;
+                }
+    
+                return str;
+            }
+            return values;
+        };
+    
+        EXIF.parseExifTag = function( dataView, tiffOffset, offset, littleEndian,
+                data ) {
+    
+            var tag = dataView.getUint16( offset, littleEndian );
+            data.exif[ tag ] = EXIF.getExifValue( dataView, tiffOffset, offset,
+                    dataView.getUint16( offset + 2, littleEndian ),    // tag type
+                    dataView.getUint32( offset + 4, littleEndian ),    // tag length
+                    littleEndian );
+        };
+    
+        EXIF.parseExifTags = function( dataView, tiffOffset, dirOffset,
+                littleEndian, data ) {
+    
+            var tagsNumber, dirEndOffset, i;
+    
+            if ( dirOffset + 6 > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid directory offset.');
+                return;
+            }
+    
+            tagsNumber = dataView.getUint16( dirOffset, littleEndian );
+            dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+    
+            if ( dirEndOffset + 4 > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid directory size.');
+                return;
+            }
+    
+            for ( i = 0; i < tagsNumber; i += 1 ) {
+                this.parseExifTag( dataView, tiffOffset,
+                        dirOffset + 2 + 12 * i,    // tag offset
+                        littleEndian, data );
+            }
+    
+            // Return the offset to the next directory:
+            return dataView.getUint32( dirEndOffset, littleEndian );
+        };
+    
+        // EXIF.getExifThumbnail = function(dataView, offset, length) {
+        //     var hexData,
+        //         i,
+        //         b;
+        //     if (!length || offset + length > dataView.byteLength) {
+        //         Base.log('Invalid Exif data: Invalid thumbnail data.');
+        //         return;
+        //     }
+        //     hexData = [];
+        //     for (i = 0; i < length; i += 1) {
+        //         b = dataView.getUint8(offset + i);
+        //         hexData.push((b < 16 ? '0' : '') + b.toString(16));
+        //     }
+        //     return 'data:image/jpeg,%' + hexData.join('%');
+        // };
+    
+        EXIF.parseExifData = function( dataView, offset, length, data ) {
+    
+            var tiffOffset = offset + 10,
+                littleEndian, dirOffset;
+    
+            // Check for the ASCII code for "Exif" (0x45786966):
+            if ( dataView.getUint32( offset + 4 ) !== 0x45786966 ) {
+                // No Exif data, might be XMP data instead
+                return;
+            }
+            if ( tiffOffset + 8 > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid segment size.');
+                return;
+            }
+    
+            // Check for the two null bytes:
+            if ( dataView.getUint16( offset + 8 ) !== 0x0000 ) {
+                Base.log('Invalid Exif data: Missing byte alignment offset.');
+                return;
+            }
+    
+            // Check the byte alignment:
+            switch ( dataView.getUint16( tiffOffset ) ) {
+                case 0x4949:
+                    littleEndian = true;
+                    break;
+    
+                case 0x4D4D:
+                    littleEndian = false;
+                    break;
+    
+                default:
+                    Base.log('Invalid Exif data: Invalid byte alignment marker.');
+                    return;
+            }
+    
+            // Check for the TIFF tag marker (0x002A):
+            if ( dataView.getUint16( tiffOffset + 2, littleEndian ) !== 0x002A ) {
+                Base.log('Invalid Exif data: Missing TIFF marker.');
+                return;
+            }
+    
+            // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+            dirOffset = dataView.getUint32( tiffOffset + 4, littleEndian );
+            // Create the exif object to store the tags:
+            data.exif = new EXIF.ExifMap();
+            // Parse the tags of the main image directory and retrieve the
+            // offset to the next directory, usually the thumbnail directory:
+            dirOffset = EXIF.parseExifTags( dataView, tiffOffset,
+                    tiffOffset + dirOffset, littleEndian, data );
+    
+            // 尝试读取缩略图
+            // if ( dirOffset ) {
+            //     thumbnailData = {exif: {}};
+            //     dirOffset = EXIF.parseExifTags(
+            //         dataView,
+            //         tiffOffset,
+            //         tiffOffset + dirOffset,
+            //         littleEndian,
+            //         thumbnailData
+            //     );
+    
+            //     // Check for JPEG Thumbnail offset:
+            //     if (thumbnailData.exif[0x0201]) {
+            //         data.exif.Thumbnail = EXIF.getExifThumbnail(
+            //             dataView,
+            //             tiffOffset + thumbnailData.exif[0x0201],
+            //             thumbnailData.exif[0x0202] // Thumbnail data length
+            //         );
+            //     }
+            // }
+        };
+    
+        ImageMeta.parsers[ 0xffe1 ].push( EXIF.parseExifData );
+        return EXIF;
+    });
+    /**
+     * @fileOverview Image
+     */
+    define('runtime/html5/image',[
+        'base',
+        'runtime/html5/runtime',
+        'runtime/html5/util'
+    ], function( Base, Html5Runtime, Util ) {
+    
+        var BLANK = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D';
+    
+        return Html5Runtime.register( 'Image', {
+    
+            // flag: 标记是否被修改过。
+            modified: false,
+    
+            init: function() {
+                var me = this,
+                    img = new Image();
+    
+                img.onload = function() {
+    
+                    me._info = {
+                        type: me.type,
+                        width: this.width,
+                        height: this.height
+                    };
+    
+                    // 读取meta信息。
+                    if ( !me._metas && 'image/jpeg' === me.type ) {
+                        Util.parseMeta( me._blob, function( error, ret ) {
+                            me._metas = ret;
+                            me.owner.trigger('load');
+                        });
+                    } else {
+                        me.owner.trigger('load');
+                    }
+                };
+    
+                img.onerror = function() {
+                    me.owner.trigger('error');
+                };
+    
+                me._img = img;
+            },
+    
+            loadFromBlob: function( blob ) {
+                var me = this,
+                    img = me._img;
+    
+                me._blob = blob;
+                me.type = blob.type;
+                img.src = Util.createObjectURL( blob.getSource() );
+                me.owner.once( 'load', function() {
+                    Util.revokeObjectURL( img.src );
+                });
+            },
+    
+            resize: function( width, height ) {
+                var canvas = this._canvas ||
+                        (this._canvas = document.createElement('canvas'));
+    
+                this._resize( this._img, canvas, width, height );
+                this._blob = null;    // 没用了，可以删掉了。
+                this.modified = true;
+                this.owner.trigger('complete');
+            },
+    
+            getAsBlob: function( type ) {
+                var blob = this._blob,
+                    opts = this.options,
+                    canvas;
+    
+                type = type || this.type;
+    
+                // blob需要重新生成。
+                if ( this.modified || this.type !== type ) {
+                    canvas = this._canvas;
+    
+                    if ( type === 'image/jpeg' ) {
+    
+                        blob = Util.canvasToDataUrl( canvas, 'image/jpeg',
+                                opts.quality );
+    
+                        if ( opts.preserveHeaders && this._metas &&
+                                this._metas.imageHead ) {
+    
+                            blob = Util.dataURL2ArrayBuffer( blob );
+                            blob = Util.updateImageHead( blob,
+                                    this._metas.imageHead );
+                            blob = Util.arrayBufferToBlob( blob, type );
+                            return blob;
+                        }
+                    } else {
+                        blob = Util.canvasToDataUrl( canvas, type );
+                    }
+    
+                    blob = Util.dataURL2Blob( blob );
+                }
+    
+                return blob;
+            },
+    
+            getAsDataUrl: function( type ) {
+                var opts = this.options;
+    
+                type = type || this.type;
+    
+                if ( type === 'image/jpeg' ) {
+                    return Util.canvasToDataUrl( this._canvas, type, opts.quality );
+                } else {
+                    return this._canvas.toDataURL( type );
+                }
+            },
+    
+            getOrientation: function() {
+                return this._metas && this._metas.exif &&
+                        this._metas.exif.get('Orientation') || 1;
+            },
+    
+            info: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._info = val;
+                    return this;
+                }
+    
+                // getter
+                return this._info;
+            },
+    
+            meta: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._meta = val;
+                    return this;
+                }
+    
+                // getter
+                return this._meta;
+            },
+    
+            destroy: function() {
+                var canvas = this._canvas;
+                this._img.onload = null;
+    
+                if ( canvas ) {
+                    canvas.getContext('2d')
+                            .clearRect( 0, 0, canvas.width, canvas.height );
+                    canvas.width = canvas.height = 0;
+                    this._canvas = null;
+                }
+    
+                // 释放内存。非常重要，否则释放不了image的内存。
+                this._img.src = BLANK;
+                this._img = this._blob = null;
+            },
+    
+            _resize: function( img, cvs, width, height ) {
+                var opts = this.options,
+                    naturalWidth = img.width,
+                    naturalHeight = img.height,
+                    orientation = this.getOrientation(),
+                    scale, w, h, x, y;
+    
+                // values that require 90 degree rotation
+                if ( ~[ 5, 6, 7, 8 ].indexOf( orientation ) ) {
+    
+                    // 交换width, height的值。
+                    width ^= height;
+                    height ^= width;
+                    width ^= height;
+                }
+    
+                scale = Math[ opts.crop ? 'max' : 'min' ]( width / naturalWidth,
+                        height / naturalHeight );
+    
+                // 不允许放大。
+                opts.allowMagnify || (scale = Math.min( 1, scale ));
+    
+                w = naturalWidth * scale;
+                h = naturalHeight * scale;
+    
+                if ( opts.crop ) {
+                    cvs.width = width;
+                    cvs.height = height;
+                } else {
+                    cvs.width = w;
+                    cvs.height = h;
+                }
+    
+                x = (cvs.width - w) / 2;
+                y = (cvs.height - h) / 2;
+    
+                opts.preserveHeaders || this._rotate2Orientaion( cvs, orientation );
+    
+                this._renderImageToCanvas( cvs, img, x, y, w, h );
+            },
+    
+            _rotate2Orientaion: function( canvas, orientation ) {
+                var width = canvas.width,
+                    height = canvas.height,
+                    ctx = canvas.getContext('2d');
+    
+                switch ( orientation ) {
+                    case 5:
+                    case 6:
+                    case 7:
+                    case 8:
+                        canvas.width = height;
+                        canvas.height = width;
+                        break;
+                }
+    
+                switch ( orientation ) {
+                    case 2:    // horizontal flip
+                        ctx.translate( width, 0 );
+                        ctx.scale( -1, 1 );
+                        break;
+    
+                    case 3:    // 180 rotate left
+                        ctx.translate( width, height );
+                        ctx.rotate( Math.PI );
+                        break;
+    
+                    case 4:    // vertical flip
+                        ctx.translate( 0, height );
+                        ctx.scale( 1, -1 );
+                        break;
+    
+                    case 5:    // vertical flip + 90 rotate right
+                        ctx.rotate( 0.5 * Math.PI );
+                        ctx.scale( 1, -1 );
+                        break;
+    
+                    case 6:    // 90 rotate right
+                        ctx.rotate( 0.5 * Math.PI );
+                        ctx.translate( 0, -height );
+                        break;
+    
+                    case 7:    // horizontal flip + 90 rotate right
+                        ctx.rotate( 0.5 * Math.PI );
+                        ctx.translate( width, -height );
+                        ctx.scale( -1, 1 );
+                        break;
+    
+                    case 8:    // 90 rotate left
+                        ctx.rotate( -0.5 * Math.PI );
+                        ctx.translate( -width, 0 );
+                        break;
+                }
+            },
+    
+            // https://github.com/stomita/ios-imagefile-megapixel/
+            // blob/master/src/megapix-image.js
+            _renderImageToCanvas: (function() {
+    
+                // 如果不是ios, 不需要这么复杂！
+                if ( !Base.os.ios ) {
+                    return function( canvas, img, x, y, w, h ) {
+                        canvas.getContext('2d').drawImage( img, x, y, w, h );
+                    };
+                }
+    
+                /**
+                 * Detecting vertical squash in loaded image.
+                 * Fixes a bug which squash image vertically while drawing into
+                 * canvas for some images.
+                 */
+                function detectVerticalSquash( img, iw, ih ) {
+                    var canvas = document.createElement('canvas'),
+                        ctx = canvas.getContext('2d'),
+                        sy = 0,
+                        ey = ih,
+                        py = ih,
+                        data, alpha, ratio;
+    
+    
+                    canvas.width = 1;
+                    canvas.height = ih;
+                    ctx.drawImage( img, 0, 0 );
+                    data = ctx.getImageData( 0, 0, 1, ih ).data;
+    
+                    // search image edge pixel position in case
+                    // it is squashed vertically.
+                    while ( py > sy ) {
+                        alpha = data[ (py - 1) * 4 + 3 ];
+    
+                        if ( alpha === 0 ) {
+                            ey = py;
+                        } else {
+                            sy = py;
+                        }
+    
+                        py = (ey + sy) >> 1;
+                    }
+    
+                    ratio = (py / ih);
+                    return (ratio === 0) ? 1 : ratio;
+                }
+    
+                // fix ie7 bug
+                // http://stackoverflow.com/questions/11929099/
+                // html5-canvas-drawimage-ratio-bug-ios
+                if ( Base.os.ios >= 7 ) {
+                    return function( canvas, img, x, y, w, h ) {
+                        var iw = img.naturalWidth,
+                            ih = img.naturalHeight,
+                            vertSquashRatio = detectVerticalSquash( img, iw, ih );
+    
+                        return canvas.getContext('2d').drawImage( img, 0, 0,
+                            iw * vertSquashRatio, ih * vertSquashRatio,
+                            x, y, w, h );
+                    };
+                }
+    
+                /**
+                 * Detect subsampling in loaded image.
+                 * In iOS, larger images than 2M pixels may be
+                 * subsampled in rendering.
+                 */
+                function detectSubsampling( img ) {
+                    var iw = img.naturalWidth,
+                        ih = img.naturalHeight,
+                        canvas, ctx;
+    
+                    // subsampling may happen overmegapixel image
+                    if ( iw * ih > 1024 * 1024 ) {
+                        canvas = document.createElement('canvas');
+                        canvas.width = canvas.height = 1;
+                        ctx = canvas.getContext('2d');
+                        ctx.drawImage( img, -iw + 1, 0 );
+    
+                        // subsampled image becomes half smaller in rendering size.
+                        // check alpha channel value to confirm image is covering
+                        // edge pixel or not. if alpha value is 0
+                        // image is not covering, hence subsampled.
+                        return ctx.getImageData( 0, 0, 1, 1 ).data[ 3 ] === 0;
+                    } else {
+                        return false;
+                    }
+                }
+    
+    
+                return function( canvas, img, x, y, width, height ) {
+                    var iw = img.naturalWidth,
+                        ih = img.naturalHeight,
+                        ctx = canvas.getContext('2d'),
+                        subsampled = detectSubsampling( img ),
+                        doSquash = this.type === 'image/jpeg',
+                        d = 1024,
+                        sy = 0,
+                        dy = 0,
+                        tmpCanvas, tmpCtx, vertSquashRatio, dw, dh, sx, dx;
+    
+                    if ( subsampled ) {
+                        iw /= 2;
+                        ih /= 2;
+                    }
+    
+                    ctx.save();
+                    tmpCanvas = document.createElement('canvas');
+                    tmpCanvas.width = tmpCanvas.height = d;
+    
+                    tmpCtx = tmpCanvas.getContext('2d');
+                    vertSquashRatio = doSquash ?
+                            detectVerticalSquash( img, iw, ih ) : 1;
+    
+                    dw = Math.ceil( d * width / iw );
+                    dh = Math.ceil( d * height / ih / vertSquashRatio );
+    
+                    while ( sy < ih ) {
+                        sx = 0;
+                        dx = 0;
+                        while ( sx < iw ) {
+                            tmpCtx.clearRect( 0, 0, d, d );
+                            tmpCtx.drawImage( img, -sx, -sy );
+                            ctx.drawImage( tmpCanvas, 0, 0, d, d,
+                                    x + dx, y + dy, dw, dh );
+                            sx += d;
+                            dx += dw;
+                        }
+                        sy += d;
+                        dy += dh;
+                    }
+                    ctx.restore();
+                    tmpCanvas = tmpCtx = null;
+                };
+            })()
+        });
+    });
+    /**
+     * 这个方式性能不行，但是可以解决android里面的toDataUrl的bug
+     * android里面toDataUrl('image/jpege')得到的结果却是png.
+     *
+     * 所以这里没辙，只能借助这个工具
+     * @fileOverview jpeg encoder
+     */
+    define('runtime/html5/jpegencoder',[], function( require, exports, module ) {
+    
+        /*
+          Copyright (c) 2008, Adobe Systems Incorporated
+          All rights reserved.
+    
+          Redistribution and use in source and binary forms, with or without
+          modification, are permitted provided that the following conditions are
+          met:
+    
+          * Redistributions of source code must retain the above copyright notice,
+            this list of conditions and the following disclaimer.
+    
+          * Redistributions in binary form must reproduce the above copyright
+            notice, this list of conditions and the following disclaimer in the
+            documentation and/or other materials provided with the distribution.
+    
+          * Neither the name of Adobe Systems Incorporated nor the names of its
+            contributors may be used to endorse or promote products derived from
+            this software without specific prior written permission.
+    
+          THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+          IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+          THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+          PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+          CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+          EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+          PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+          PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+          LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+          NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+          SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+        */
+        /*
+        JPEG encoder ported to JavaScript and optimized by Andreas Ritter, www.bytestrom.eu, 11/2009
+    
+        Basic GUI blocking jpeg encoder
+        */
+    
+        function JPEGEncoder(quality) {
+          var self = this;
+            var fround = Math.round;
+            var ffloor = Math.floor;
+            var YTable = new Array(64);
+            var UVTable = new Array(64);
+            var fdtbl_Y = new Array(64);
+            var fdtbl_UV = new Array(64);
+            var YDC_HT;
+            var UVDC_HT;
+            var YAC_HT;
+            var UVAC_HT;
+    
+            var bitcode = new Array(65535);
+            var category = new Array(65535);
+            var outputfDCTQuant = new Array(64);
+            var DU = new Array(64);
+            var byteout = [];
+            var bytenew = 0;
+            var bytepos = 7;
+    
+            var YDU = new Array(64);
+            var UDU = new Array(64);
+            var VDU = new Array(64);
+            var clt = new Array(256);
+            var RGB_YUV_TABLE = new Array(2048);
+            var currentQuality;
+    
+            var ZigZag = [
+                     0, 1, 5, 6,14,15,27,28,
+                     2, 4, 7,13,16,26,29,42,
+                     3, 8,12,17,25,30,41,43,
+                     9,11,18,24,31,40,44,53,
+                    10,19,23,32,39,45,52,54,
+                    20,22,33,38,46,51,55,60,
+                    21,34,37,47,50,56,59,61,
+                    35,36,48,49,57,58,62,63
+                ];
+    
+            var std_dc_luminance_nrcodes = [0,0,1,5,1,1,1,1,1,1,0,0,0,0,0,0,0];
+            var std_dc_luminance_values = [0,1,2,3,4,5,6,7,8,9,10,11];
+            var std_ac_luminance_nrcodes = [0,0,2,1,3,3,2,4,3,5,5,4,4,0,0,1,0x7d];
+            var std_ac_luminance_values = [
+                    0x01,0x02,0x03,0x00,0x04,0x11,0x05,0x12,
+                    0x21,0x31,0x41,0x06,0x13,0x51,0x61,0x07,
+                    0x22,0x71,0x14,0x32,0x81,0x91,0xa1,0x08,
+                    0x23,0x42,0xb1,0xc1,0x15,0x52,0xd1,0xf0,
+                    0x24,0x33,0x62,0x72,0x82,0x09,0x0a,0x16,
+                    0x17,0x18,0x19,0x1a,0x25,0x26,0x27,0x28,
+                    0x29,0x2a,0x34,0x35,0x36,0x37,0x38,0x39,
+                    0x3a,0x43,0x44,0x45,0x46,0x47,0x48,0x49,
+                    0x4a,0x53,0x54,0x55,0x56,0x57,0x58,0x59,
+                    0x5a,0x63,0x64,0x65,0x66,0x67,0x68,0x69,
+                    0x6a,0x73,0x74,0x75,0x76,0x77,0x78,0x79,
+                    0x7a,0x83,0x84,0x85,0x86,0x87,0x88,0x89,
+                    0x8a,0x92,0x93,0x94,0x95,0x96,0x97,0x98,
+                    0x99,0x9a,0xa2,0xa3,0xa4,0xa5,0xa6,0xa7,
+                    0xa8,0xa9,0xaa,0xb2,0xb3,0xb4,0xb5,0xb6,
+                    0xb7,0xb8,0xb9,0xba,0xc2,0xc3,0xc4,0xc5,
+                    0xc6,0xc7,0xc8,0xc9,0xca,0xd2,0xd3,0xd4,
+                    0xd5,0xd6,0xd7,0xd8,0xd9,0xda,0xe1,0xe2,
+                    0xe3,0xe4,0xe5,0xe6,0xe7,0xe8,0xe9,0xea,
+                    0xf1,0xf2,0xf3,0xf4,0xf5,0xf6,0xf7,0xf8,
+                    0xf9,0xfa
+                ];
+    
+            var std_dc_chrominance_nrcodes = [0,0,3,1,1,1,1,1,1,1,1,1,0,0,0,0,0];
+            var std_dc_chrominance_values = [0,1,2,3,4,5,6,7,8,9,10,11];
+            var std_ac_chrominance_nrcodes = [0,0,2,1,2,4,4,3,4,7,5,4,4,0,1,2,0x77];
+            var std_ac_chrominance_values = [
+                    0x00,0x01,0x02,0x03,0x11,0x04,0x05,0x21,
+                    0x31,0x06,0x12,0x41,0x51,0x07,0x61,0x71,
+                    0x13,0x22,0x32,0x81,0x08,0x14,0x42,0x91,
+                    0xa1,0xb1,0xc1,0x09,0x23,0x33,0x52,0xf0,
+                    0x15,0x62,0x72,0xd1,0x0a,0x16,0x24,0x34,
+                    0xe1,0x25,0xf1,0x17,0x18,0x19,0x1a,0x26,
+                    0x27,0x28,0x29,0x2a,0x35,0x36,0x37,0x38,
+                    0x39,0x3a,0x43,0x44,0x45,0x46,0x47,0x48,
+                    0x49,0x4a,0x53,0x54,0x55,0x56,0x57,0x58,
+                    0x59,0x5a,0x63,0x64,0x65,0x66,0x67,0x68,
+                    0x69,0x6a,0x73,0x74,0x75,0x76,0x77,0x78,
+                    0x79,0x7a,0x82,0x83,0x84,0x85,0x86,0x87,
+                    0x88,0x89,0x8a,0x92,0x93,0x94,0x95,0x96,
+                    0x97,0x98,0x99,0x9a,0xa2,0xa3,0xa4,0xa5,
+                    0xa6,0xa7,0xa8,0xa9,0xaa,0xb2,0xb3,0xb4,
+                    0xb5,0xb6,0xb7,0xb8,0xb9,0xba,0xc2,0xc3,
+                    0xc4,0xc5,0xc6,0xc7,0xc8,0xc9,0xca,0xd2,
+                    0xd3,0xd4,0xd5,0xd6,0xd7,0xd8,0xd9,0xda,
+                    0xe2,0xe3,0xe4,0xe5,0xe6,0xe7,0xe8,0xe9,
+                    0xea,0xf2,0xf3,0xf4,0xf5,0xf6,0xf7,0xf8,
+                    0xf9,0xfa
+                ];
+    
+            function initQuantTables(sf){
+                    var YQT = [
+                        16, 11, 10, 16, 24, 40, 51, 61,
+                        12, 12, 14, 19, 26, 58, 60, 55,
+                        14, 13, 16, 24, 40, 57, 69, 56,
+                        14, 17, 22, 29, 51, 87, 80, 62,
+                        18, 22, 37, 56, 68,109,103, 77,
+                        24, 35, 55, 64, 81,104,113, 92,
+                        49, 64, 78, 87,103,121,120,101,
+                        72, 92, 95, 98,112,100,103, 99
+                    ];
+    
+                    for (var i = 0; i < 64; i++) {
+                        var t = ffloor((YQT[i]*sf+50)/100);
+                        if (t < 1) {
+                            t = 1;
+                        } else if (t > 255) {
+                            t = 255;
+                        }
+                        YTable[ZigZag[i]] = t;
+                    }
+                    var UVQT = [
+                        17, 18, 24, 47, 99, 99, 99, 99,
+                        18, 21, 26, 66, 99, 99, 99, 99,
+                        24, 26, 56, 99, 99, 99, 99, 99,
+                        47, 66, 99, 99, 99, 99, 99, 99,
+                        99, 99, 99, 99, 99, 99, 99, 99,
+                        99, 99, 99, 99, 99, 99, 99, 99,
+                        99, 99, 99, 99, 99, 99, 99, 99,
+                        99, 99, 99, 99, 99, 99, 99, 99
+                    ];
+                    for (var j = 0; j < 64; j++) {
+                        var u = ffloor((UVQT[j]*sf+50)/100);
+                        if (u < 1) {
+                            u = 1;
+                        } else if (u > 255) {
+                            u = 255;
+                        }
+                        UVTable[ZigZag[j]] = u;
+                    }
+                    var aasf = [
+                        1.0, 1.387039845, 1.306562965, 1.175875602,
+                        1.0, 0.785694958, 0.541196100, 0.275899379
+                    ];
+                    var k = 0;
+                    for (var row = 0; row < 8; row++)
+                    {
+                        for (var col = 0; col < 8; col++)
+                        {
+                            fdtbl_Y[k]  = (1.0 / (YTable [ZigZag[k]] * aasf[row] * aasf[col] * 8.0));
+                            fdtbl_UV[k] = (1.0 / (UVTable[ZigZag[k]] * aasf[row] * aasf[col] * 8.0));
+                            k++;
+                        }
+                    }
+                }
+    
+                function computeHuffmanTbl(nrcodes, std_table){
+                    var codevalue = 0;
+                    var pos_in_table = 0;
+                    var HT = new Array();
+                    for (var k = 1; k <= 16; k++) {
+                        for (var j = 1; j <= nrcodes[k]; j++) {
+                            HT[std_table[pos_in_table]] = [];
+                            HT[std_table[pos_in_table]][0] = codevalue;
+                            HT[std_table[pos_in_table]][1] = k;
+                            pos_in_table++;
+                            codevalue++;
+                        }
+                        codevalue*=2;
+                    }
+                    return HT;
+                }
+    
+                function initHuffmanTbl()
+                {
+                    YDC_HT = computeHuffmanTbl(std_dc_luminance_nrcodes,std_dc_luminance_values);
+                    UVDC_HT = computeHuffmanTbl(std_dc_chrominance_nrcodes,std_dc_chrominance_values);
+                    YAC_HT = computeHuffmanTbl(std_ac_luminance_nrcodes,std_ac_luminance_values);
+                    UVAC_HT = computeHuffmanTbl(std_ac_chrominance_nrcodes,std_ac_chrominance_values);
+                }
+    
+                function initCategoryNumber()
+                {
+                    var nrlower = 1;
+                    var nrupper = 2;
+                    for (var cat = 1; cat <= 15; cat++) {
+                        //Positive numbers
+                        for (var nr = nrlower; nr<nrupper; nr++) {
+                            category[32767+nr] = cat;
+                            bitcode[32767+nr] = [];
+                            bitcode[32767+nr][1] = cat;
+                            bitcode[32767+nr][0] = nr;
+                        }
+                        //Negative numbers
+                        for (var nrneg =-(nrupper-1); nrneg<=-nrlower; nrneg++) {
+                            category[32767+nrneg] = cat;
+                            bitcode[32767+nrneg] = [];
+                            bitcode[32767+nrneg][1] = cat;
+                            bitcode[32767+nrneg][0] = nrupper-1+nrneg;
+                        }
+                        nrlower <<= 1;
+                        nrupper <<= 1;
+                    }
+                }
+    
+                function initRGBYUVTable() {
+                    for(var i = 0; i < 256;i++) {
+                        RGB_YUV_TABLE[i]            =  19595 * i;
+                        RGB_YUV_TABLE[(i+ 256)>>0]  =  38470 * i;
+                        RGB_YUV_TABLE[(i+ 512)>>0]  =   7471 * i + 0x8000;
+                        RGB_YUV_TABLE[(i+ 768)>>0]  = -11059 * i;
+                        RGB_YUV_TABLE[(i+1024)>>0]  = -21709 * i;
+                        RGB_YUV_TABLE[(i+1280)>>0]  =  32768 * i + 0x807FFF;
+                        RGB_YUV_TABLE[(i+1536)>>0]  = -27439 * i;
+                        RGB_YUV_TABLE[(i+1792)>>0]  = - 5329 * i;
+                    }
+                }
+    
+                // IO functions
+                function writeBits(bs)
+                {
+                    var value = bs[0];
+                    var posval = bs[1]-1;
+                    while ( posval >= 0 ) {
+                        if (value & (1 << posval) ) {
+                            bytenew |= (1 << bytepos);
+                        }
+                        posval--;
+                        bytepos--;
+                        if (bytepos < 0) {
+                            if (bytenew == 0xFF) {
+                                writeByte(0xFF);
+                                writeByte(0);
+                            }
+                            else {
+                                writeByte(bytenew);
+                            }
+                            bytepos=7;
+                            bytenew=0;
+                        }
+                    }
+                }
+    
+                function writeByte(value)
+                {
+                    byteout.push(clt[value]); // write char directly instead of converting later
+                }
+    
+                function writeWord(value)
+                {
+                    writeByte((value>>8)&0xFF);
+                    writeByte((value   )&0xFF);
+                }
+    
+                // DCT & quantization core
+                function fDCTQuant(data, fdtbl)
+                {
+                    var d0, d1, d2, d3, d4, d5, d6, d7;
+                    /* Pass 1: process rows. */
+                    var dataOff=0;
+                    var i;
+                    var I8 = 8;
+                    var I64 = 64;
+                    for (i=0; i<I8; ++i)
+                    {
+                        d0 = data[dataOff];
+                        d1 = data[dataOff+1];
+                        d2 = data[dataOff+2];
+                        d3 = data[dataOff+3];
+                        d4 = data[dataOff+4];
+                        d5 = data[dataOff+5];
+                        d6 = data[dataOff+6];
+                        d7 = data[dataOff+7];
+    
+                        var tmp0 = d0 + d7;
+                        var tmp7 = d0 - d7;
+                        var tmp1 = d1 + d6;
+                        var tmp6 = d1 - d6;
+                        var tmp2 = d2 + d5;
+                        var tmp5 = d2 - d5;
+                        var tmp3 = d3 + d4;
+                        var tmp4 = d3 - d4;
+    
+                        /* Even part */
+                        var tmp10 = tmp0 + tmp3;    /* phase 2 */
+                        var tmp13 = tmp0 - tmp3;
+                        var tmp11 = tmp1 + tmp2;
+                        var tmp12 = tmp1 - tmp2;
+    
+                        data[dataOff] = tmp10 + tmp11; /* phase 3 */
+                        data[dataOff+4] = tmp10 - tmp11;
+    
+                        var z1 = (tmp12 + tmp13) * 0.707106781; /* c4 */
+                        data[dataOff+2] = tmp13 + z1; /* phase 5 */
+                        data[dataOff+6] = tmp13 - z1;
+    
+                        /* Odd part */
+                        tmp10 = tmp4 + tmp5; /* phase 2 */
+                        tmp11 = tmp5 + tmp6;
+                        tmp12 = tmp6 + tmp7;
+    
+                        /* The rotator is modified from fig 4-8 to avoid extra negations. */
+                        var z5 = (tmp10 - tmp12) * 0.382683433; /* c6 */
+                        var z2 = 0.541196100 * tmp10 + z5; /* c2-c6 */
+                        var z4 = 1.306562965 * tmp12 + z5; /* c2+c6 */
+                        var z3 = tmp11 * 0.707106781; /* c4 */
+    
+                        var z11 = tmp7 + z3;    /* phase 5 */
+                        var z13 = tmp7 - z3;
+    
+                        data[dataOff+5] = z13 + z2; /* phase 6 */
+                        data[dataOff+3] = z13 - z2;
+                        data[dataOff+1] = z11 + z4;
+                        data[dataOff+7] = z11 - z4;
+    
+                        dataOff += 8; /* advance pointer to next row */
+                    }
+    
+                    /* Pass 2: process columns. */
+                    dataOff = 0;
+                    for (i=0; i<I8; ++i)
+                    {
+                        d0 = data[dataOff];
+                        d1 = data[dataOff + 8];
+                        d2 = data[dataOff + 16];
+                        d3 = data[dataOff + 24];
+                        d4 = data[dataOff + 32];
+                        d5 = data[dataOff + 40];
+                        d6 = data[dataOff + 48];
+                        d7 = data[dataOff + 56];
+    
+                        var tmp0p2 = d0 + d7;
+                        var tmp7p2 = d0 - d7;
+                        var tmp1p2 = d1 + d6;
+                        var tmp6p2 = d1 - d6;
+                        var tmp2p2 = d2 + d5;
+                        var tmp5p2 = d2 - d5;
+                        var tmp3p2 = d3 + d4;
+                        var tmp4p2 = d3 - d4;
+    
+                        /* Even part */
+                        var tmp10p2 = tmp0p2 + tmp3p2;  /* phase 2 */
+                        var tmp13p2 = tmp0p2 - tmp3p2;
+                        var tmp11p2 = tmp1p2 + tmp2p2;
+                        var tmp12p2 = tmp1p2 - tmp2p2;
+    
+                        data[dataOff] = tmp10p2 + tmp11p2; /* phase 3 */
+                        data[dataOff+32] = tmp10p2 - tmp11p2;
+    
+                        var z1p2 = (tmp12p2 + tmp13p2) * 0.707106781; /* c4 */
+                        data[dataOff+16] = tmp13p2 + z1p2; /* phase 5 */
+                        data[dataOff+48] = tmp13p2 - z1p2;
+    
+                        /* Odd part */
+                        tmp10p2 = tmp4p2 + tmp5p2; /* phase 2 */
+                        tmp11p2 = tmp5p2 + tmp6p2;
+                        tmp12p2 = tmp6p2 + tmp7p2;
+    
+                        /* The rotator is modified from fig 4-8 to avoid extra negations. */
+                        var z5p2 = (tmp10p2 - tmp12p2) * 0.382683433; /* c6 */
+                        var z2p2 = 0.541196100 * tmp10p2 + z5p2; /* c2-c6 */
+                        var z4p2 = 1.306562965 * tmp12p2 + z5p2; /* c2+c6 */
+                        var z3p2 = tmp11p2 * 0.707106781; /* c4 */
+    
+                        var z11p2 = tmp7p2 + z3p2;  /* phase 5 */
+                        var z13p2 = tmp7p2 - z3p2;
+    
+                        data[dataOff+40] = z13p2 + z2p2; /* phase 6 */
+                        data[dataOff+24] = z13p2 - z2p2;
+                        data[dataOff+ 8] = z11p2 + z4p2;
+                        data[dataOff+56] = z11p2 - z4p2;
+    
+                        dataOff++; /* advance pointer to next column */
+                    }
+    
+                    // Quantize/descale the coefficients
+                    var fDCTQuant;
+                    for (i=0; i<I64; ++i)
+                    {
+                        // Apply the quantization and scaling factor & Round to nearest integer
+                        fDCTQuant = data[i]*fdtbl[i];
+                        outputfDCTQuant[i] = (fDCTQuant > 0.0) ? ((fDCTQuant + 0.5)|0) : ((fDCTQuant - 0.5)|0);
+                        //outputfDCTQuant[i] = fround(fDCTQuant);
+    
+                    }
+                    return outputfDCTQuant;
+                }
+    
+                function writeAPP0()
+                {
+                    writeWord(0xFFE0); // marker
+                    writeWord(16); // length
+                    writeByte(0x4A); // J
+                    writeByte(0x46); // F
+                    writeByte(0x49); // I
+                    writeByte(0x46); // F
+                    writeByte(0); // = "JFIF",'\0'
+                    writeByte(1); // versionhi
+                    writeByte(1); // versionlo
+                    writeByte(0); // xyunits
+                    writeWord(1); // xdensity
+                    writeWord(1); // ydensity
+                    writeByte(0); // thumbnwidth
+                    writeByte(0); // thumbnheight
+                }
+    
+                function writeSOF0(width, height)
+                {
+                    writeWord(0xFFC0); // marker
+                    writeWord(17);   // length, truecolor YUV JPG
+                    writeByte(8);    // precision
+                    writeWord(height);
+                    writeWord(width);
+                    writeByte(3);    // nrofcomponents
+                    writeByte(1);    // IdY
+                    writeByte(0x11); // HVY
+                    writeByte(0);    // QTY
+                    writeByte(2);    // IdU
+                    writeByte(0x11); // HVU
+                    writeByte(1);    // QTU
+                    writeByte(3);    // IdV
+                    writeByte(0x11); // HVV
+                    writeByte(1);    // QTV
+                }
+    
+                function writeDQT()
+                {
+                    writeWord(0xFFDB); // marker
+                    writeWord(132);    // length
+                    writeByte(0);
+                    for (var i=0; i<64; i++) {
+                        writeByte(YTable[i]);
+                    }
+                    writeByte(1);
+                    for (var j=0; j<64; j++) {
+                        writeByte(UVTable[j]);
+                    }
+                }
+    
+                function writeDHT()
+                {
+                    writeWord(0xFFC4); // marker
+                    writeWord(0x01A2); // length
+    
+                    writeByte(0); // HTYDCinfo
+                    for (var i=0; i<16; i++) {
+                        writeByte(std_dc_luminance_nrcodes[i+1]);
+                    }
+                    for (var j=0; j<=11; j++) {
+                        writeByte(std_dc_luminance_values[j]);
+                    }
+    
+                    writeByte(0x10); // HTYACinfo
+                    for (var k=0; k<16; k++) {
+                        writeByte(std_ac_luminance_nrcodes[k+1]);
+                    }
+                    for (var l=0; l<=161; l++) {
+                        writeByte(std_ac_luminance_values[l]);
+                    }
+    
+                    writeByte(1); // HTUDCinfo
+                    for (var m=0; m<16; m++) {
+                        writeByte(std_dc_chrominance_nrcodes[m+1]);
+                    }
+                    for (var n=0; n<=11; n++) {
+                        writeByte(std_dc_chrominance_values[n]);
+                    }
+    
+                    writeByte(0x11); // HTUACinfo
+                    for (var o=0; o<16; o++) {
+                        writeByte(std_ac_chrominance_nrcodes[o+1]);
+                    }
+                    for (var p=0; p<=161; p++) {
+                        writeByte(std_ac_chrominance_values[p]);
+                    }
+                }
+    
+                function writeSOS()
+                {
+                    writeWord(0xFFDA); // marker
+                    writeWord(12); // length
+                    writeByte(3); // nrofcomponents
+                    writeByte(1); // IdY
+                    writeByte(0); // HTY
+                    writeByte(2); // IdU
+                    writeByte(0x11); // HTU
+                    writeByte(3); // IdV
+                    writeByte(0x11); // HTV
+                    writeByte(0); // Ss
+                    writeByte(0x3f); // Se
+                    writeByte(0); // Bf
+                }
+    
+                function processDU(CDU, fdtbl, DC, HTDC, HTAC){
+                    var EOB = HTAC[0x00];
+                    var M16zeroes = HTAC[0xF0];
+                    var pos;
+                    var I16 = 16;
+                    var I63 = 63;
+                    var I64 = 64;
+                    var DU_DCT = fDCTQuant(CDU, fdtbl);
+                    //ZigZag reorder
+                    for (var j=0;j<I64;++j) {
+                        DU[ZigZag[j]]=DU_DCT[j];
+                    }
+                    var Diff = DU[0] - DC; DC = DU[0];
+                    //Encode DC
+                    if (Diff==0) {
+                        writeBits(HTDC[0]); // Diff might be 0
+                    } else {
+                        pos = 32767+Diff;
+                        writeBits(HTDC[category[pos]]);
+                        writeBits(bitcode[pos]);
+                    }
+                    //Encode ACs
+                    var end0pos = 63; // was const... which is crazy
+                    for (; (end0pos>0)&&(DU[end0pos]==0); end0pos--) {};
+                    //end0pos = first element in reverse order !=0
+                    if ( end0pos == 0) {
+                        writeBits(EOB);
+                        return DC;
+                    }
+                    var i = 1;
+                    var lng;
+                    while ( i <= end0pos ) {
+                        var startpos = i;
+                        for (; (DU[i]==0) && (i<=end0pos); ++i) {}
+                        var nrzeroes = i-startpos;
+                        if ( nrzeroes >= I16 ) {
+                            lng = nrzeroes>>4;
+                            for (var nrmarker=1; nrmarker <= lng; ++nrmarker)
+                                writeBits(M16zeroes);
+                            nrzeroes = nrzeroes&0xF;
+                        }
+                        pos = 32767+DU[i];
+                        writeBits(HTAC[(nrzeroes<<4)+category[pos]]);
+                        writeBits(bitcode[pos]);
+                        i++;
+                    }
+                    if ( end0pos != I63 ) {
+                        writeBits(EOB);
+                    }
+                    return DC;
+                }
+    
+                function initCharLookupTable(){
+                    var sfcc = String.fromCharCode;
+                    for(var i=0; i < 256; i++){ ///// ACHTUNG // 255
+                        clt[i] = sfcc(i);
+                    }
+                }
+    
+                this.encode = function(image,quality) // image data object
+                {
+                    // var time_start = new Date().getTime();
+    
+                    if(quality) setQuality(quality);
+    
+                    // Initialize bit writer
+                    byteout = new Array();
+                    bytenew=0;
+                    bytepos=7;
+    
+                    // Add JPEG headers
+                    writeWord(0xFFD8); // SOI
+                    writeAPP0();
+                    writeDQT();
+                    writeSOF0(image.width,image.height);
+                    writeDHT();
+                    writeSOS();
+    
+    
+                    // Encode 8x8 macroblocks
+                    var DCY=0;
+                    var DCU=0;
+                    var DCV=0;
+    
+                    bytenew=0;
+                    bytepos=7;
+    
+    
+                    this.encode.displayName = "_encode_";
+    
+                    var imageData = image.data;
+                    var width = image.width;
+                    var height = image.height;
+    
+                    var quadWidth = width*4;
+                    var tripleWidth = width*3;
+    
+                    var x, y = 0;
+                    var r, g, b;
+                    var start,p, col,row,pos;
+                    while(y < height){
+                        x = 0;
+                        while(x < quadWidth){
+                        start = quadWidth * y + x;
+                        p = start;
+                        col = -1;
+                        row = 0;
+    
+                        for(pos=0; pos < 64; pos++){
+                            row = pos >> 3;// /8
+                            col = ( pos & 7 ) * 4; // %8
+                            p = start + ( row * quadWidth ) + col;
+    
+                            if(y+row >= height){ // padding bottom
+                                p-= (quadWidth*(y+1+row-height));
+                            }
+    
+                            if(x+col >= quadWidth){ // padding right
+                                p-= ((x+col) - quadWidth +4)
+                            }
+    
+                            r = imageData[ p++ ];
+                            g = imageData[ p++ ];
+                            b = imageData[ p++ ];
+    
+    
+                            /* // calculate YUV values dynamically
+                            YDU[pos]=((( 0.29900)*r+( 0.58700)*g+( 0.11400)*b))-128; //-0x80
+                            UDU[pos]=(((-0.16874)*r+(-0.33126)*g+( 0.50000)*b));
+                            VDU[pos]=((( 0.50000)*r+(-0.41869)*g+(-0.08131)*b));
+                            */
+    
+                            // use lookup table (slightly faster)
+                            YDU[pos] = ((RGB_YUV_TABLE[r]             + RGB_YUV_TABLE[(g +  256)>>0] + RGB_YUV_TABLE[(b +  512)>>0]) >> 16)-128;
+                            UDU[pos] = ((RGB_YUV_TABLE[(r +  768)>>0] + RGB_YUV_TABLE[(g + 1024)>>0] + RGB_YUV_TABLE[(b + 1280)>>0]) >> 16)-128;
+                            VDU[pos] = ((RGB_YUV_TABLE[(r + 1280)>>0] + RGB_YUV_TABLE[(g + 1536)>>0] + RGB_YUV_TABLE[(b + 1792)>>0]) >> 16)-128;
+    
+                        }
+    
+                        DCY = processDU(YDU, fdtbl_Y, DCY, YDC_HT, YAC_HT);
+                        DCU = processDU(UDU, fdtbl_UV, DCU, UVDC_HT, UVAC_HT);
+                        DCV = processDU(VDU, fdtbl_UV, DCV, UVDC_HT, UVAC_HT);
+                        x+=32;
+                        }
+                        y+=8;
+                    }
+    
+    
+                    ////////////////////////////////////////////////////////////////
+    
+                    // Do the bit alignment of the EOI marker
+                    if ( bytepos >= 0 ) {
+                        var fillbits = [];
+                        fillbits[1] = bytepos+1;
+                        fillbits[0] = (1<<(bytepos+1))-1;
+                        writeBits(fillbits);
+                    }
+    
+                    writeWord(0xFFD9); //EOI
+    
+                    var jpegDataUri = 'data:image/jpeg;base64,' + btoa(byteout.join(''));
+    
+                    byteout = [];
+    
+                    // benchmarking
+                    // var duration = new Date().getTime() - time_start;
+                    // console.log('Encoding time: '+ currentQuality + 'ms');
+                    //
+    
+                    return jpegDataUri
+            }
+    
+            function setQuality(quality){
+                if (quality <= 0) {
+                    quality = 1;
+                }
+                if (quality > 100) {
+                    quality = 100;
+                }
+    
+                if(currentQuality == quality) return // don't recalc if unchanged
+    
+                var sf = 0;
+                if (quality < 50) {
+                    sf = Math.floor(5000 / quality);
+                } else {
+                    sf = Math.floor(200 - quality*2);
+                }
+    
+                initQuantTables(sf);
+                currentQuality = quality;
+                // console.log('Quality set to: '+quality +'%');
+            }
+    
+            function init(){
+                // var time_start = new Date().getTime();
+                if(!quality) quality = 50;
+                // Create tables
+                initCharLookupTable()
+                initHuffmanTbl();
+                initCategoryNumber();
+                initRGBYUVTable();
+    
+                setQuality(quality);
+                // var duration = new Date().getTime() - time_start;
+                // console.log('Initialization '+ duration + 'ms');
+            }
+    
+            init();
+    
+        };
+    
+        JPEGEncoder.encode = function( data, quality ) {
+            var encoder = new JPEGEncoder( quality );
+    
+            return encoder.encode( data );
+        }
+    
+        return JPEGEncoder;
+    });
+    /**
+     * @fileOverview Fix android canvas.toDataUrl bug.
+     */
+    define('runtime/html5/androidpatch',[
+        'runtime/html5/util',
+        'runtime/html5/jpegencoder',
+        'base'
+    ], function( Util, encoder, Base ) {
+        var origin = Util.canvasToDataUrl,
+            supportJpeg;
+    
+        Util.canvasToDataUrl = function( canvas, type, quality ) {
+            var ctx, w, h, fragement, parts;
+    
+            // 非android手机直接跳过。
+            if ( !Base.os.android ) {
+                return origin.apply( null, arguments );
+            }
+    
+            // 检测是否canvas支持jpeg导出，根据数据格式来判断。
+            // JPEG 前两位分别是：255, 216
+            if ( type === 'image/jpeg' && typeof supportJpeg === 'undefined' ) {
+                fragement = origin.apply( null, arguments );
+    
+                parts = fragement.split(',');
+    
+                if ( ~parts[ 0 ].indexOf('base64') ) {
+                    fragement = atob( parts[ 1 ] );
+                } else {
+                    fragement = decodeURIComponent( parts[ 1 ] );
+                }
+    
+                fragement = fragement.substring( 0, 2 );
+    
+                supportJpeg = fragement.charCodeAt( 0 ) === 255 &&
+                        fragement.charCodeAt( 1 ) === 216;
+            }
+    
+            // 只有在android环境下才修复
+            if ( type === 'image/jpeg' && !supportJpeg ) {
+                w = canvas.width;
+                h = canvas.height;
+                ctx = canvas.getContext('2d');
+    
+                return encoder.encode( ctx.getImageData( 0, 0, w, h ), quality );
+            }
+    
+            return origin.apply( null, arguments );
+        };
+    });
+    /**
+     * @fileOverview Transport
+     * @todo 支持chunked传输，优势：
+     * 可以将大文件分成小块，挨个传输，可以提高大文件成功率，当失败的时候，也只需要重传那小部分，
+     * 而不需要重头再传一次。另外断点续传也需要用chunked方式。
+     */
+    define('runtime/html5/transport',[
+        'base',
+        'runtime/html5/runtime'
+    ], function( Base, Html5Runtime ) {
+    
+        var noop = Base.noop,
+            $ = Base.$;
+    
+        return Html5Runtime.register( 'Transport', {
+            init: function() {
+                this._status = 0;
+                this._response = null;
+            },
+    
+            send: function() {
+                var owner = this.owner,
+                    opts = this.options,
+                    xhr = this._initAjax(),
+                    blob = owner._blob,
+                    server = opts.server,
+                    formData, binary, fr;
+    
+                if ( opts.sendAsBinary ) {
+                    server += (/\?/.test( server ) ? '&' : '?') +
+                            $.param( owner._formData );
+    
+                    binary = blob.getSource();
+                } else {
+                    formData = new FormData();
+                    $.each( owner._formData, function( k, v ) {
+                        formData.append( k, v );
+                    });
+    
+                    formData.append( opts.fileVal, blob.getSource(),
+                            opts.filename || owner._formData.name || '' );
+                }
+    
+                if ( opts.withCredentials && 'withCredentials' in xhr ) {
+                    xhr.open( opts.method, server, true );
+                    xhr.withCredentials = true;
+                } else {
+                    xhr.open( opts.method, server );
+                }
+    
+                this._setRequestHeader( xhr, opts.headers );
+    
+                if ( binary ) {
+                    xhr.overrideMimeType('application/octet-stream');
+    
+                    // android直接发送blob会导致服务端接收到的是空文件。
+                    // bug详情。
+                    // https://code.google.com/p/android/issues/detail?id=39882
+                    // 所以先用fileReader读取出来再通过arraybuffer的方式发送。
+                    if ( Base.os.android ) {
+                        fr = new FileReader();
+    
+                        fr.onload = function() {
+                            xhr.send( this.result );
+                            fr = fr.onload = null;
+                        };
+    
+                        fr.readAsArrayBuffer( binary );
+                    } else {
+                        xhr.send( binary );
+                    }
+                } else {
+                    xhr.send( formData );
+                }
+            },
+    
+            getResponse: function() {
+                return this._response;
+            },
+    
+            getResponseAsJson: function() {
+                return this._parseJson( this._response );
+            },
+    
+            getStatus: function() {
+                return this._status;
+            },
+    
+            abort: function() {
+                var xhr = this._xhr;
+    
+                if ( xhr ) {
+                    xhr.upload.onprogress = noop;
+                    xhr.onreadystatechange = noop;
+                    xhr.abort();
+    
+                    this._xhr = xhr = null;
+                }
+            },
+    
+            destroy: function() {
+                this.abort();
+            },
+    
+            _initAjax: function() {
+                var me = this,
+                    xhr = new XMLHttpRequest(),
+                    opts = this.options;
+    
+                if ( opts.withCredentials && !('withCredentials' in xhr) &&
+                        typeof XDomainRequest !== 'undefined' ) {
+                    xhr = new XDomainRequest();
+                }
+    
+                xhr.upload.onprogress = function( e ) {
+                    var percentage = 0;
+    
+                    if ( e.lengthComputable ) {
+                        percentage = e.loaded / e.total;
+                    }
+    
+                    return me.trigger( 'progress', percentage );
+                };
+    
+                xhr.onreadystatechange = function() {
+    
+                    if ( xhr.readyState !== 4 ) {
+                        return;
+                    }
+    
+                    xhr.upload.onprogress = noop;
+                    xhr.onreadystatechange = noop;
+                    me._xhr = null;
+                    me._status = xhr.status;
+    
+                    if ( xhr.status >= 200 && xhr.status < 300 ) {
+                        me._response = xhr.responseText;
+                        return me.trigger('load');
+                    } else if ( xhr.status >= 500 && xhr.status < 600 ) {
+                        me._response = xhr.responseText;
+                        return me.trigger( 'error', 'server' );
+                    }
+    
+    
+                    return me.trigger( 'error', me._status ? 'http' : 'abort' );
+                };
+    
+                me._xhr = xhr;
+                return xhr;
+            },
+    
+            _setRequestHeader: function( xhr, headers ) {
+                $.each( headers, function( key, val ) {
+                    xhr.setRequestHeader( key, val );
+                });
+            },
+    
+            _parseJson: function( str ) {
+                var json;
+    
+                try {
+                    json = JSON.parse( str );
+                } catch ( ex ) {
+                    json = {};
+                }
+    
+                return json;
+            }
+        });
+    });
+    define('webuploader',[
+        'base',
+        'widgets/filepicker',
+        'widgets/image',
+        'widgets/queue',
+        'widgets/runtime',
+        'widgets/upload',
+        'runtime/html5/blob',
+        'runtime/html5/filepicker',
+        'runtime/html5/imagemeta/exif',
+        'runtime/html5/image',
+        'runtime/html5/androidpatch',
+        'runtime/html5/transport'
+    ], function( Base ) {
+        return Base;
+    });
+    return require('webuploader');
+});
diff --git a/public/js/ueditor/third-party/webuploader/webuploader.flashonly.js b/public/js/ueditor/third-party/webuploader/webuploader.flashonly.js
new file mode 100644
index 0000000..10f4496
--- /dev/null
+++ b/public/js/ueditor/third-party/webuploader/webuploader.flashonly.js
@@ -0,0 +1,4176 @@
+/*! WebUploader 0.1.2 */
+
+
+/**
+ * @fileOverview 让内部各个部件的代码可以用[amd](https://github.com/amdjs/amdjs-api/wiki/AMD)模块定义方式组织起来。
+ *
+ * AMD API 内部的简单不完全实现，请忽略。只有当WebUploader被合并成一个文件的时候才会引入。
+ */
+(function( root, factory ) {
+    var modules = {},
+
+        // 内部require, 简单不完全实现。
+        // https://github.com/amdjs/amdjs-api/wiki/require
+        _require = function( deps, callback ) {
+            var args, len, i;
+
+            // 如果deps不是数组，则直接返回指定module
+            if ( typeof deps === 'string' ) {
+                return getModule( deps );
+            } else {
+                args = [];
+                for( len = deps.length, i = 0; i < len; i++ ) {
+                    args.push( getModule( deps[ i ] ) );
+                }
+
+                return callback.apply( null, args );
+            }
+        },
+
+        // 内部define，暂时不支持不指定id.
+        _define = function( id, deps, factory ) {
+            if ( arguments.length === 2 ) {
+                factory = deps;
+                deps = null;
+            }
+
+            _require( deps || [], function() {
+                setModule( id, factory, arguments );
+            });
+        },
+
+        // 设置module, 兼容CommonJs写法。
+        setModule = function( id, factory, args ) {
+            var module = {
+                    exports: factory
+                },
+                returned;
+
+            if ( typeof factory === 'function' ) {
+                args.length || (args = [ _require, module.exports, module ]);
+                returned = factory.apply( null, args );
+                returned !== undefined && (module.exports = returned);
+            }
+
+            modules[ id ] = module.exports;
+        },
+
+        // 根据id获取module
+        getModule = function( id ) {
+            var module = modules[ id ] || root[ id ];
+
+            if ( !module ) {
+                throw new Error( '`' + id + '` is undefined' );
+            }
+
+            return module;
+        },
+
+        // 将所有modules，将路径ids装换成对象。
+        exportsTo = function( obj ) {
+            var key, host, parts, part, last, ucFirst;
+
+            // make the first character upper case.
+            ucFirst = function( str ) {
+                return str && (str.charAt( 0 ).toUpperCase() + str.substr( 1 ));
+            };
+
+            for ( key in modules ) {
+                host = obj;
+
+                if ( !modules.hasOwnProperty( key ) ) {
+                    continue;
+                }
+
+                parts = key.split('/');
+                last = ucFirst( parts.pop() );
+
+                while( (part = ucFirst( parts.shift() )) ) {
+                    host[ part ] = host[ part ] || {};
+                    host = host[ part ];
+                }
+
+                host[ last ] = modules[ key ];
+            }
+        },
+
+        exports = factory( root, _define, _require ),
+        origin;
+
+    // exports every module.
+    exportsTo( exports );
+
+    if ( typeof module === 'object' && typeof module.exports === 'object' ) {
+
+        // For CommonJS and CommonJS-like environments where a proper window is present,
+        module.exports = exports;
+    } else if ( typeof define === 'function' && define.amd ) {
+
+        // Allow using this built library as an AMD module
+        // in another project. That other project will only
+        // see this AMD call, not the internal modules in
+        // the closure below.
+        define([], exports );
+    } else {
+
+        // Browser globals case. Just assign the
+        // result to a property on the global.
+        origin = root.WebUploader;
+        root.WebUploader = exports;
+        root.WebUploader.noConflict = function() {
+            root.WebUploader = origin;
+        };
+    }
+})( this, function( window, define, require ) {
+
+
+    /**
+     * @fileOverview jQuery or Zepto
+     */
+    define('dollar-third',[],function() {
+        return window.jQuery || window.Zepto;
+    });
+    /**
+     * @fileOverview Dom 操作相关
+     */
+    define('dollar',[
+        'dollar-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 使用jQuery的Promise
+     */
+    define('promise-third',[
+        'dollar'
+    ], function( $ ) {
+        return {
+            Deferred: $.Deferred,
+            when: $.when,
+    
+            isPromise: function( anything ) {
+                return anything && typeof anything.then === 'function';
+            }
+        };
+    });
+    /**
+     * @fileOverview Promise/A+
+     */
+    define('promise',[
+        'promise-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 基础类方法。
+     */
+    
+    /**
+     * Web Uploader内部类的详细说明，以下提及的功能类，都可以在`WebUploader`这个变量中访问到。
+     *
+     * As you know, Web Uploader的每个文件都是用过[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)规范中的`define`组织起来的, 每个Module都会有个module id.
+     * 默认module id该文件的路径，而此路径将会转化成名字空间存放在WebUploader中。如：
+     *
+     * * module `base`：WebUploader.Base
+     * * module `file`: WebUploader.File
+     * * module `lib/dnd`: WebUploader.Lib.Dnd
+     * * module `runtime/html5/dnd`: WebUploader.Runtime.Html5.Dnd
+     *
+     *
+     * 以下文档将可能省略`WebUploader`前缀。
+     * @module WebUploader
+     * @title WebUploader API文档
+     */
+    define('base',[
+        'dollar',
+        'promise'
+    ], function( $, promise ) {
+    
+        var noop = function() {},
+            call = Function.call;
+    
+        // http://jsperf.com/uncurrythis
+        // 反科里化
+        function uncurryThis( fn ) {
+            return function() {
+                return call.apply( fn, arguments );
+            };
+        }
+    
+        function bindFn( fn, context ) {
+            return function() {
+                return fn.apply( context, arguments );
+            };
+        }
+    
+        function createObject( proto ) {
+            var f;
+    
+            if ( Object.create ) {
+                return Object.create( proto );
+            } else {
+                f = function() {};
+                f.prototype = proto;
+                return new f();
+            }
+        }
+    
+    
+        /**
+         * 基础类，提供一些简单常用的方法。
+         * @class Base
+         */
+        return {
+    
+            /**
+             * @property {String} version 当前版本号。
+             */
+            version: '0.1.2',
+    
+            /**
+             * @property {jQuery|Zepto} $ 引用依赖的jQuery或者Zepto对象。
+             */
+            $: $,
+    
+            Deferred: promise.Deferred,
+    
+            isPromise: promise.isPromise,
+    
+            when: promise.when,
+    
+            /**
+             * @description  简单的浏览器检查结果。
+             *
+             * * `webkit`  webkit版本号，如果浏览器为非webkit内核，此属性为`undefined`。
+             * * `chrome`  chrome浏览器版本号，如果浏览器为chrome，此属性为`undefined`。
+             * * `ie`  ie浏览器版本号，如果浏览器为非ie，此属性为`undefined`。**暂不支持ie10+**
+             * * `firefox`  firefox浏览器版本号，如果浏览器为非firefox，此属性为`undefined`。
+             * * `safari`  safari浏览器版本号，如果浏览器为非safari，此属性为`undefined`。
+             * * `opera`  opera浏览器版本号，如果浏览器为非opera，此属性为`undefined`。
+             *
+             * @property {Object} [browser]
+             */
+            browser: (function( ua ) {
+                var ret = {},
+                    webkit = ua.match( /WebKit\/([\d.]+)/ ),
+                    chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
+                        ua.match( /CriOS\/([\d.]+)/ ),
+    
+                    ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
+                        ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i),
+                    firefox = ua.match( /Firefox\/([\d.]+)/ ),
+                    safari = ua.match( /Safari\/([\d.]+)/ ),
+                    opera = ua.match( /OPR\/([\d.]+)/ );
+    
+                webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
+                chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
+                ie && (ret.ie = parseFloat( ie[ 1 ] ));
+                firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
+                safari && (ret.safari = parseFloat( safari[ 1 ] ));
+                opera && (ret.opera = parseFloat( opera[ 1 ] ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * @description  操作系统检查结果。
+             *
+             * * `android`  如果在android浏览器环境下，此值为对应的android版本号，否则为`undefined`。
+             * * `ios` 如果在ios浏览器环境下，此值为对应的ios版本号，否则为`undefined`。
+             * @property {Object} [os]
+             */
+            os: (function( ua ) {
+                var ret = {},
+    
+                    // osx = !!ua.match( /\(Macintosh\; Intel / ),
+                    android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
+                    ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );
+    
+                // osx && (ret.osx = true);
+                android && (ret.android = parseFloat( android[ 1 ] ));
+                ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * 实现类与类之间的继承。
+             * @method inherits
+             * @grammar Base.inherits( super ) => child
+             * @grammar Base.inherits( super, protos ) => child
+             * @grammar Base.inherits( super, protos, statics ) => child
+             * @param  {Class} super 父类
+             * @param  {Object | Function} [protos] 子类或者对象。如果对象中包含constructor，子类将是用此属性值。
+             * @param  {Function} [protos.constructor] 子类构造器，不指定的话将创建个临时的直接执行父类构造器的方法。
+             * @param  {Object} [statics] 静态属性或方法。
+             * @return {Class} 返回子类。
+             * @example
+             * function Person() {
+             *     console.log( 'Super' );
+             * }
+             * Person.prototype.hello = function() {
+             *     console.log( 'hello' );
+             * };
+             *
+             * var Manager = Base.inherits( Person, {
+             *     world: function() {
+             *         console.log( 'World' );
+             *     }
+             * });
+             *
+             * // 因为没有指定构造器，父类的构造器将会执行。
+             * var instance = new Manager();    // => Super
+             *
+             * // 继承子父类的方法
+             * instance.hello();    // => hello
+             * instance.world();    // => World
+             *
+             * // 子类的__super__属性指向父类
+             * console.log( Manager.__super__ === Person );    // => true
+             */
+            inherits: function( Super, protos, staticProtos ) {
+                var child;
+    
+                if ( typeof protos === 'function' ) {
+                    child = protos;
+                    protos = null;
+                } else if ( protos && protos.hasOwnProperty('constructor') ) {
+                    child = protos.constructor;
+                } else {
+                    child = function() {
+                        return Super.apply( this, arguments );
+                    };
+                }
+    
+                // 复制静态方法
+                $.extend( true, child, Super, staticProtos || {} );
+    
+                /* jshint camelcase: false */
+    
+                // 让子类的__super__属性指向父类。
+                child.__super__ = Super.prototype;
+    
+                // 构建原型，添加原型方法或属性。
+                // 暂时用Object.create实现。
+                child.prototype = createObject( Super.prototype );
+                protos && $.extend( true, child.prototype, protos );
+    
+                return child;
+            },
+    
+            /**
+             * 一个不做任何事情的方法。可以用来赋值给默认的callback.
+             * @method noop
+             */
+            noop: noop,
+    
+            /**
+             * 返回一个新的方法，此方法将已指定的`context`来执行。
+             * @grammar Base.bindFn( fn, context ) => Function
+             * @method bindFn
+             * @example
+             * var doSomething = function() {
+             *         console.log( this.name );
+             *     },
+             *     obj = {
+             *         name: 'Object Name'
+             *     },
+             *     aliasFn = Base.bind( doSomething, obj );
+             *
+             *  aliasFn();    // => Object Name
+             *
+             */
+            bindFn: bindFn,
+    
+            /**
+             * 引用Console.log如果存在的话，否则引用一个[空函数loop](#WebUploader:Base.log)。
+             * @grammar Base.log( args... ) => undefined
+             * @method log
+             */
+            log: (function() {
+                if ( window.console ) {
+                    return bindFn( console.log, console );
+                }
+                return noop;
+            })(),
+    
+            nextTick: (function() {
+    
+                return function( cb ) {
+                    setTimeout( cb, 1 );
+                };
+    
+                // @bug 当浏览器不在当前窗口时就停了。
+                // var next = window.requestAnimationFrame ||
+                //     window.webkitRequestAnimationFrame ||
+                //     window.mozRequestAnimationFrame ||
+                //     function( cb ) {
+                //         window.setTimeout( cb, 1000 / 60 );
+                //     };
+    
+                // // fix: Uncaught TypeError: Illegal invocation
+                // return bindFn( next, window );
+            })(),
+    
+            /**
+             * 被[uncurrythis](http://www.2ality.com/2011/11/uncurrying-this.html)的数组slice方法。
+             * 将用来将非数组对象转化成数组对象。
+             * @grammar Base.slice( target, start[, end] ) => Array
+             * @method slice
+             * @example
+             * function doSomthing() {
+             *     var args = Base.slice( arguments, 1 );
+             *     console.log( args );
+             * }
+             *
+             * doSomthing( 'ignored', 'arg2', 'arg3' );    // => Array ["arg2", "arg3"]
+             */
+            slice: uncurryThis( [].slice ),
+    
+            /**
+             * 生成唯一的ID
+             * @method guid
+             * @grammar Base.guid() => String
+             * @grammar Base.guid( prefx ) => String
+             */
+            guid: (function() {
+                var counter = 0;
+    
+                return function( prefix ) {
+                    var guid = (+new Date()).toString( 32 ),
+                        i = 0;
+    
+                    for ( ; i < 5; i++ ) {
+                        guid += Math.floor( Math.random() * 65535 ).toString( 32 );
+                    }
+    
+                    return (prefix || 'wu_') + guid + (counter++).toString( 32 );
+                };
+            })(),
+    
+            /**
+             * 格式化文件大小, 输出成带单位的字符串
+             * @method formatSize
+             * @grammar Base.formatSize( size ) => String
+             * @grammar Base.formatSize( size, pointLength ) => String
+             * @grammar Base.formatSize( size, pointLength, units ) => String
+             * @param {Number} size 文件大小
+             * @param {Number} [pointLength=2] 精确到的小数点数。
+             * @param {Array} [units=[ 'B', 'K', 'M', 'G', 'TB' ]] 单位数组。从字节，到千字节，一直往上指定。如果单位数组里面只指定了到了K(千字节)，同时文件大小大于M, 此方法的输出将还是显示成多少K.
+             * @example
+             * console.log( Base.formatSize( 100 ) );    // => 100B
+             * console.log( Base.formatSize( 1024 ) );    // => 1.00K
+             * console.log( Base.formatSize( 1024, 0 ) );    // => 1K
+             * console.log( Base.formatSize( 1024 * 1024 ) );    // => 1.00M
+             * console.log( Base.formatSize( 1024 * 1024 * 1024 ) );    // => 1.00G
+             * console.log( Base.formatSize( 1024 * 1024 * 1024, 0, ['B', 'KB', 'MB'] ) );    // => 1024MB
+             */
+            formatSize: function( size, pointLength, units ) {
+                var unit;
+    
+                units = units || [ 'B', 'K', 'M', 'G', 'TB' ];
+    
+                while ( (unit = units.shift()) && size > 1024 ) {
+                    size = size / 1024;
+                }
+    
+                return (unit === 'B' ? size : size.toFixed( pointLength || 2 )) +
+                        unit;
+            }
+        };
+    });
+    /**
+     * 事件处理类，可以独立使用，也可以扩展给对象使用。
+     * @fileOverview Mediator
+     */
+    define('mediator',[
+        'base'
+    ], function( Base ) {
+        var $ = Base.$,
+            slice = [].slice,
+            separator = /\s+/,
+            protos;
+    
+        // 根据条件过滤出事件handlers.
+        function findHandlers( arr, name, callback, context ) {
+            return $.grep( arr, function( handler ) {
+                return handler &&
+                        (!name || handler.e === name) &&
+                        (!callback || handler.cb === callback ||
+                        handler.cb._cb === callback) &&
+                        (!context || handler.ctx === context);
+            });
+        }
+    
+        function eachEvent( events, callback, iterator ) {
+            // 不支持对象，只支持多个event用空格隔开
+            $.each( (events || '').split( separator ), function( _, key ) {
+                iterator( key, callback );
+            });
+        }
+    
+        function triggerHanders( events, args ) {
+            var stoped = false,
+                i = -1,
+                len = events.length,
+                handler;
+    
+            while ( ++i < len ) {
+                handler = events[ i ];
+    
+                if ( handler.cb.apply( handler.ctx2, args ) === false ) {
+                    stoped = true;
+                    break;
+                }
+            }
+    
+            return !stoped;
+        }
+    
+        protos = {
+    
+            /**
+             * 绑定事件。
+             *
+             * `callback`方法在执行时，arguments将会来源于trigger的时候携带的参数。如
+             * ```javascript
+             * var obj = {};
+             *
+             * // 使得obj有事件行为
+             * Mediator.installTo( obj );
+             *
+             * obj.on( 'testa', function( arg1, arg2 ) {
+             *     console.log( arg1, arg2 ); // => 'arg1', 'arg2'
+             * });
+             *
+             * obj.trigger( 'testa', 'arg1', 'arg2' );
+             * ```
+             *
+             * 如果`callback`中，某一个方法`return false`了，则后续的其他`callback`都不会被执行到。
+             * 切会影响到`trigger`方法的返回值，为`false`。
+             *
+             * `on`还可以用来添加一个特殊事件`all`, 这样所有的事件触发都会响应到。同时此类`callback`中的arguments有一个不同处，
+             * 就是第一个参数为`type`，记录当前是什么事件在触发。此类`callback`的优先级比脚低，会再正常`callback`执行完后触发。
+             * ```javascript
+             * obj.on( 'all', function( type, arg1, arg2 ) {
+             *     console.log( type, arg1, arg2 ); // => 'testa', 'arg1', 'arg2'
+             * });
+             * ```
+             *
+             * @method on
+             * @grammar on( name, callback[, context] ) => self
+             * @param  {String}   name     事件名，支持多个事件用空格隔开
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             * @class Mediator
+             */
+            on: function( name, callback, context ) {
+                var me = this,
+                    set;
+    
+                if ( !callback ) {
+                    return this;
+                }
+    
+                set = this._events || (this._events = []);
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var handler = { e: name };
+    
+                    handler.cb = callback;
+                    handler.ctx = context;
+                    handler.ctx2 = context || me;
+                    handler.id = set.length;
+    
+                    set.push( handler );
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 绑定事件，且当handler执行完后，自动解除绑定。
+             * @method once
+             * @grammar once( name, callback[, context] ) => self
+             * @param  {String}   name     事件名
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            once: function( name, callback, context ) {
+                var me = this;
+    
+                if ( !callback ) {
+                    return me;
+                }
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var once = function() {
+                            me.off( name, once );
+                            return callback.apply( context || me, arguments );
+                        };
+    
+                    once._cb = callback;
+                    me.on( name, once, context );
+                });
+    
+                return me;
+            },
+    
+            /**
+             * 解除事件绑定
+             * @method off
+             * @grammar off( [name[, callback[, context] ] ] ) => self
+             * @param  {String}   [name]     事件名
+             * @param  {Function} [callback] 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            off: function( name, cb, ctx ) {
+                var events = this._events;
+    
+                if ( !events ) {
+                    return this;
+                }
+    
+                if ( !name && !cb && !ctx ) {
+                    this._events = [];
+                    return this;
+                }
+    
+                eachEvent( name, cb, function( name, cb ) {
+                    $.each( findHandlers( events, name, cb, ctx ), function() {
+                        delete events[ this.id ];
+                    });
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 触发事件
+             * @method trigger
+             * @grammar trigger( name[, args...] ) => self
+             * @param  {String}   type     事件名
+             * @param  {*} [...] 任意参数
+             * @return {Boolean} 如果handler中return false了，则返回false, 否则返回true
+             */
+            trigger: function( type ) {
+                var args, events, allEvents;
+    
+                if ( !this._events || !type ) {
+                    return this;
+                }
+    
+                args = slice.call( arguments, 1 );
+                events = findHandlers( this._events, type );
+                allEvents = findHandlers( this._events, 'all' );
+    
+                return triggerHanders( events, args ) &&
+                        triggerHanders( allEvents, arguments );
+            }
+        };
+    
+        /**
+         * 中介者，它本身是个单例，但可以通过[installTo](#WebUploader:Mediator:installTo)方法，使任何对象具备事件行为。
+         * 主要目的是负责模块与模块之间的合作，降低耦合度。
+         *
+         * @class Mediator
+         */
+        return $.extend({
+    
+            /**
+             * 可以通过这个接口，使任何对象具备事件功能。
+             * @method installTo
+             * @param  {Object} obj 需要具备事件行为的对象。
+             * @return {Object} 返回obj.
+             */
+            installTo: function( obj ) {
+                return $.extend( obj, protos );
+            }
+    
+        }, protos );
+    });
+    /**
+     * @fileOverview Uploader上传类
+     */
+    define('uploader',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$;
+    
+        /**
+         * 上传入口类。
+         * @class Uploader
+         * @constructor
+         * @grammar new Uploader( opts ) => Uploader
+         * @example
+         * var uploader = WebUploader.Uploader({
+         *     swf: 'path_of_swf/Uploader.swf',
+         *
+         *     // 开起分片上传。
+         *     chunked: true
+         * });
+         */
+        function Uploader( opts ) {
+            this.options = $.extend( true, {}, Uploader.options, opts );
+            this._init( this.options );
+        }
+    
+        // default Options
+        // widgets中有相应扩展
+        Uploader.options = {};
+        Mediator.installTo( Uploader.prototype );
+    
+        // 批量添加纯命令式方法。
+        $.each({
+            upload: 'start-upload',
+            stop: 'stop-upload',
+            getFile: 'get-file',
+            getFiles: 'get-files',
+            addFile: 'add-file',
+            addFiles: 'add-file',
+            sort: 'sort-files',
+            removeFile: 'remove-file',
+            skipFile: 'skip-file',
+            retry: 'retry',
+            isInProgress: 'is-in-progress',
+            makeThumb: 'make-thumb',
+            getDimension: 'get-dimension',
+            addButton: 'add-btn',
+            getRuntimeType: 'get-runtime-type',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable',
+            reset: 'reset'
+        }, function( fn, command ) {
+            Uploader.prototype[ fn ] = function() {
+                return this.request( command, arguments );
+            };
+        });
+    
+        $.extend( Uploader.prototype, {
+            state: 'pending',
+    
+            _init: function( opts ) {
+                var me = this;
+    
+                me.request( 'init', opts, function() {
+                    me.state = 'ready';
+                    me.trigger('ready');
+                });
+            },
+    
+            /**
+             * 获取或者设置Uploader配置项。
+             * @method option
+             * @grammar option( key ) => *
+             * @grammar option( key, val ) => self
+             * @example
+             *
+             * // 初始状态图片上传前不会压缩
+             * var uploader = new WebUploader.Uploader({
+             *     resize: null;
+             * });
+             *
+             * // 修改后图片上传前，尝试将图片压缩到1600 * 1600
+             * uploader.options( 'resize', {
+             *     width: 1600,
+             *     height: 1600
+             * });
+             */
+            option: function( key, val ) {
+                var opts = this.options;
+    
+                // setter
+                if ( arguments.length > 1 ) {
+    
+                    if ( $.isPlainObject( val ) &&
+                            $.isPlainObject( opts[ key ] ) ) {
+                        $.extend( opts[ key ], val );
+                    } else {
+                        opts[ key ] = val;
+                    }
+    
+                } else {    // getter
+                    return key ? opts[ key ] : opts;
+                }
+            },
+    
+            /**
+             * 获取文件统计信息。返回一个包含一下信息的对象。
+             * * `successNum` 上传成功的文件数
+             * * `uploadFailNum` 上传失败的文件数
+             * * `cancelNum` 被删除的文件数
+             * * `invalidNum` 无效的文件数
+             * * `queueNum` 还在队列中的文件数
+             * @method getStats
+             * @grammar getStats() => Object
+             */
+            getStats: function() {
+                // return this._mgr.getStats.apply( this._mgr, arguments );
+                var stats = this.request('get-stats');
+    
+                return {
+                    successNum: stats.numOfSuccess,
+    
+                    // who care?
+                    // queueFailNum: 0,
+                    cancelNum: stats.numOfCancel,
+                    invalidNum: stats.numOfInvalid,
+                    uploadFailNum: stats.numOfUploadFailed,
+                    queueNum: stats.numOfQueue
+                };
+            },
+    
+            // 需要重写此方法来来支持opts.onEvent和instance.onEvent的处理器
+            trigger: function( type/*, args...*/ ) {
+                var args = [].slice.call( arguments, 1 ),
+                    opts = this.options,
+                    name = 'on' + type.substring( 0, 1 ).toUpperCase() +
+                        type.substring( 1 );
+    
+                if (
+                        // 调用通过on方法注册的handler.
+                        Mediator.trigger.apply( this, arguments ) === false ||
+    
+                        // 调用opts.onEvent
+                        $.isFunction( opts[ name ] ) &&
+                        opts[ name ].apply( this, args ) === false ||
+    
+                        // 调用this.onEvent
+                        $.isFunction( this[ name ] ) &&
+                        this[ name ].apply( this, args ) === false ||
+    
+                        // 广播所有uploader的事件。
+                        Mediator.trigger.apply( Mediator,
+                        [ this, type ].concat( args ) ) === false ) {
+    
+                    return false;
+                }
+    
+                return true;
+            },
+    
+            // widgets/widget.js将补充此方法的详细文档。
+            request: Base.noop
+        });
+    
+        /**
+         * 创建Uploader实例，等同于new Uploader( opts );
+         * @method create
+         * @class Base
+         * @static
+         * @grammar Base.create( opts ) => Uploader
+         */
+        Base.create = Uploader.create = function( opts ) {
+            return new Uploader( opts );
+        };
+    
+        // 暴露Uploader，可以通过它来扩展业务逻辑。
+        Base.Uploader = Uploader;
+    
+        return Uploader;
+    });
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/runtime',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            factories = {},
+    
+            // 获取对象的第一个key
+            getFirstKey = function( obj ) {
+                for ( var key in obj ) {
+                    if ( obj.hasOwnProperty( key ) ) {
+                        return key;
+                    }
+                }
+                return null;
+            };
+    
+        // 接口类。
+        function Runtime( options ) {
+            this.options = $.extend({
+                container: document.body
+            }, options );
+            this.uid = Base.guid('rt_');
+        }
+    
+        $.extend( Runtime.prototype, {
+    
+            getContainer: function() {
+                var opts = this.options,
+                    parent, container;
+    
+                if ( this._container ) {
+                    return this._container;
+                }
+    
+                parent = $( opts.container || document.body );
+                container = $( document.createElement('div') );
+    
+                container.attr( 'id', 'rt_' + this.uid );
+                container.css({
+                    position: 'absolute',
+                    top: '0px',
+                    left: '0px',
+                    width: '1px',
+                    height: '1px',
+                    overflow: 'hidden'
+                });
+    
+                parent.append( container );
+                parent.addClass('webuploader-container');
+                this._container = container;
+                return container;
+            },
+    
+            init: Base.noop,
+            exec: Base.noop,
+    
+            destroy: function() {
+                if ( this._container ) {
+                    this._container.parentNode.removeChild( this.__container );
+                }
+    
+                this.off();
+            }
+        });
+    
+        Runtime.orders = 'html5,flash';
+    
+    
+        /**
+         * 添加Runtime实现。
+         * @param {String} type    类型
+         * @param {Runtime} factory 具体Runtime实现。
+         */
+        Runtime.addRuntime = function( type, factory ) {
+            factories[ type ] = factory;
+        };
+    
+        Runtime.hasRuntime = function( type ) {
+            return !!(type ? factories[ type ] : getFirstKey( factories ));
+        };
+    
+        Runtime.create = function( opts, orders ) {
+            var type, runtime;
+    
+            orders = orders || Runtime.orders;
+            $.each( orders.split( /\s*,\s*/g ), function() {
+                if ( factories[ this ] ) {
+                    type = this;
+                    return false;
+                }
+            });
+    
+            type = type || getFirstKey( factories );
+    
+            if ( !type ) {
+                throw new Error('Runtime Error');
+            }
+    
+            runtime = new factories[ type ]( opts );
+            return runtime;
+        };
+    
+        Mediator.installTo( Runtime.prototype );
+        return Runtime;
+    });
+    
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/client',[
+        'base',
+        'mediator',
+        'runtime/runtime'
+    ], function( Base, Mediator, Runtime ) {
+    
+        var cache;
+    
+        cache = (function() {
+            var obj = {};
+    
+            return {
+                add: function( runtime ) {
+                    obj[ runtime.uid ] = runtime;
+                },
+    
+                get: function( ruid, standalone ) {
+                    var i;
+    
+                    if ( ruid ) {
+                        return obj[ ruid ];
+                    }
+    
+                    for ( i in obj ) {
+                        // 有些类型不能重用，比如filepicker.
+                        if ( standalone && obj[ i ].__standalone ) {
+                            continue;
+                        }
+    
+                        return obj[ i ];
+                    }
+    
+                    return null;
+                },
+    
+                remove: function( runtime ) {
+                    delete obj[ runtime.uid ];
+                }
+            };
+        })();
+    
+        function RuntimeClient( component, standalone ) {
+            var deferred = Base.Deferred(),
+                runtime;
+    
+            this.uid = Base.guid('client_');
+    
+            // 允许runtime没有初始化之前，注册一些方法在初始化后执行。
+            this.runtimeReady = function( cb ) {
+                return deferred.done( cb );
+            };
+    
+            this.connectRuntime = function( opts, cb ) {
+    
+                // already connected.
+                if ( runtime ) {
+                    throw new Error('already connected!');
+                }
+    
+                deferred.done( cb );
+    
+                if ( typeof opts === 'string' && cache.get( opts ) ) {
+                    runtime = cache.get( opts );
+                }
+    
+                // 像filePicker只能独立存在，不能公用。
+                runtime = runtime || cache.get( null, standalone );
+    
+                // 需要创建
+                if ( !runtime ) {
+                    runtime = Runtime.create( opts, opts.runtimeOrder );
+                    runtime.__promise = deferred.promise();
+                    runtime.once( 'ready', deferred.resolve );
+                    runtime.init();
+                    cache.add( runtime );
+                    runtime.__client = 1;
+                } else {
+                    // 来自cache
+                    Base.$.extend( runtime.options, opts );
+                    runtime.__promise.then( deferred.resolve );
+                    runtime.__client++;
+                }
+    
+                standalone && (runtime.__standalone = standalone);
+                return runtime;
+            };
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.disconnectRuntime = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                runtime.__client--;
+    
+                if ( runtime.__client <= 0 ) {
+                    cache.remove( runtime );
+                    delete runtime.__promise;
+                    runtime.destroy();
+                }
+    
+                runtime = null;
+            };
+    
+            this.exec = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                var args = Base.slice( arguments );
+                component && args.unshift( component );
+    
+                return runtime.exec.apply( this, args );
+            };
+    
+            this.getRuid = function() {
+                return runtime && runtime.uid;
+            };
+    
+            this.destroy = (function( destroy ) {
+                return function() {
+                    destroy && destroy.apply( this, arguments );
+                    this.trigger('destroy');
+                    this.off();
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                };
+            })( this.destroy );
+        }
+    
+        Mediator.installTo( RuntimeClient.prototype );
+        return RuntimeClient;
+    });
+    /**
+     * @fileOverview Blob
+     */
+    define('lib/blob',[
+        'base',
+        'runtime/client'
+    ], function( Base, RuntimeClient ) {
+    
+        function Blob( ruid, source ) {
+            var me = this;
+    
+            me.source = source;
+            me.ruid = ruid;
+    
+            RuntimeClient.call( me, 'Blob' );
+    
+            this.uid = source.uid || this.uid;
+            this.type = source.type || '';
+            this.size = source.size || 0;
+    
+            if ( ruid ) {
+                me.connectRuntime( ruid );
+            }
+        }
+    
+        Base.inherits( RuntimeClient, {
+            constructor: Blob,
+    
+            slice: function( start, end ) {
+                return this.exec( 'slice', start, end );
+            },
+    
+            getSource: function() {
+                return this.source;
+            }
+        });
+    
+        return Blob;
+    });
+    /**
+     * 为了统一化Flash的File和HTML5的File而存在。
+     * 以至于要调用Flash里面的File，也可以像调用HTML5版本的File一下。
+     * @fileOverview File
+     */
+    define('lib/file',[
+        'base',
+        'lib/blob'
+    ], function( Base, Blob ) {
+    
+        var uid = 1,
+            rExt = /\.([^.]+)$/;
+    
+        function File( ruid, file ) {
+            var ext;
+    
+            Blob.apply( this, arguments );
+            this.name = file.name || ('untitled' + uid++);
+            ext = rExt.exec( file.name ) ? RegExp.$1.toLowerCase() : '';
+    
+            // todo 支持其他类型文件的转换。
+    
+            // 如果有mimetype, 但是文件名里面没有找出后缀规律
+            if ( !ext && this.type ) {
+                ext = /\/(jpg|jpeg|png|gif|bmp)$/i.exec( this.type ) ?
+                        RegExp.$1.toLowerCase() : '';
+                this.name += '.' + ext;
+            }
+    
+            // 如果没有指定mimetype, 但是知道文件后缀。
+            if ( !this.type &&  ~'jpg,jpeg,png,gif,bmp'.indexOf( ext ) ) {
+                this.type = 'image/' + (ext === 'jpg' ? 'jpeg' : ext);
+            }
+    
+            this.ext = ext;
+            this.lastModifiedDate = file.lastModifiedDate ||
+                    (new Date()).toLocaleString();
+        }
+    
+        return Base.inherits( Blob, File );
+    });
+    
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/filepicker',[
+        'base',
+        'runtime/client',
+        'lib/file'
+    ], function( Base, RuntimeClent, File ) {
+    
+        var $ = Base.$;
+    
+        function FilePicker( opts ) {
+            opts = this.options = $.extend({}, FilePicker.options, opts );
+    
+            opts.container = $( opts.id );
+    
+            if ( !opts.container.length ) {
+                throw new Error('按钮指定错误');
+            }
+    
+            opts.innerHTML = opts.innerHTML || opts.label ||
+                    opts.container.html() || '';
+    
+            opts.button = $( opts.button || document.createElement('div') );
+            opts.button.html( opts.innerHTML );
+            opts.container.html( opts.button );
+    
+            RuntimeClent.call( this, 'FilePicker', true );
+        }
+    
+        FilePicker.options = {
+            button: null,
+            container: null,
+            label: null,
+            innerHTML: null,
+            multiple: true,
+            accept: null,
+            name: 'file'
+        };
+    
+        Base.inherits( RuntimeClent, {
+            constructor: FilePicker,
+    
+            init: function() {
+                var me = this,
+                    opts = me.options,
+                    button = opts.button;
+    
+                button.addClass('webuploader-pick');
+    
+                me.on( 'all', function( type ) {
+                    var files;
+    
+                    switch ( type ) {
+                        case 'mouseenter':
+                            button.addClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'mouseleave':
+                            button.removeClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'change':
+                            files = me.exec('getFiles');
+                            me.trigger( 'select', $.map( files, function( file ) {
+                                file = new File( me.getRuid(), file );
+    
+                                // 记录来源。
+                                file._refer = opts.container;
+                                return file;
+                            }), opts.container );
+                            break;
+                    }
+                });
+    
+                me.connectRuntime( opts, function() {
+                    me.refresh();
+                    me.exec( 'init', opts );
+                    me.trigger('ready');
+                });
+    
+                $( window ).on( 'resize', function() {
+                    me.refresh();
+                });
+            },
+    
+            refresh: function() {
+                var shimContainer = this.getRuntime().getContainer(),
+                    button = this.options.button,
+                    width = button.outerWidth ?
+                            button.outerWidth() : button.width(),
+    
+                    height = button.outerHeight ?
+                            button.outerHeight() : button.height(),
+    
+                    pos = button.offset();
+    
+                width && height && shimContainer.css({
+                    bottom: 'auto',
+                    right: 'auto',
+                    width: width + 'px',
+                    height: height + 'px'
+                }).offset( pos );
+            },
+    
+            enable: function() {
+                var btn = this.options.button;
+    
+                btn.removeClass('webuploader-pick-disable');
+                this.refresh();
+            },
+    
+            disable: function() {
+                var btn = this.options.button;
+    
+                this.getRuntime().getContainer().css({
+                    top: '-99999px'
+                });
+    
+                btn.addClass('webuploader-pick-disable');
+            },
+    
+            destroy: function() {
+                if ( this.runtime ) {
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                }
+            }
+        });
+    
+        return FilePicker;
+    });
+    
+    /**
+     * @fileOverview 组件基类。
+     */
+    define('widgets/widget',[
+        'base',
+        'uploader'
+    ], function( Base, Uploader ) {
+    
+        var $ = Base.$,
+            _init = Uploader.prototype._init,
+            IGNORE = {},
+            widgetClass = [];
+    
+        function isArrayLike( obj ) {
+            if ( !obj ) {
+                return false;
+            }
+    
+            var length = obj.length,
+                type = $.type( obj );
+    
+            if ( obj.nodeType === 1 && length ) {
+                return true;
+            }
+    
+            return type === 'array' || type !== 'function' && type !== 'string' &&
+                    (length === 0 || typeof length === 'number' && length > 0 &&
+                    (length - 1) in obj);
+        }
+    
+        function Widget( uploader ) {
+            this.owner = uploader;
+            this.options = uploader.options;
+        }
+    
+        $.extend( Widget.prototype, {
+    
+            init: Base.noop,
+    
+            // 类Backbone的事件监听声明，监听uploader实例上的事件
+            // widget直接无法监听事件，事件只能通过uploader来传递
+            invoke: function( apiName, args ) {
+    
+                /*
+                    {
+                        'make-thumb': 'makeThumb'
+                    }
+                 */
+                var map = this.responseMap;
+    
+                // 如果无API响应声明则忽略
+                if ( !map || !(apiName in map) || !(map[ apiName ] in this) ||
+                        !$.isFunction( this[ map[ apiName ] ] ) ) {
+    
+                    return IGNORE;
+                }
+    
+                return this[ map[ apiName ] ].apply( this, args );
+    
+            },
+    
+            /**
+             * 发送命令。当传入`callback`或者`handler`中返回`promise`时。返回一个当所有`handler`中的promise都完成后完成的新`promise`。
+             * @method request
+             * @grammar request( command, args ) => * | Promise
+             * @grammar request( command, args, callback ) => Promise
+             * @for  Uploader
+             */
+            request: function() {
+                return this.owner.request.apply( this.owner, arguments );
+            }
+        });
+    
+        // 扩展Uploader.
+        $.extend( Uploader.prototype, {
+    
+            // 覆写_init用来初始化widgets
+            _init: function() {
+                var me = this,
+                    widgets = me._widgets = [];
+    
+                $.each( widgetClass, function( _, klass ) {
+                    widgets.push( new klass( me ) );
+                });
+    
+                return _init.apply( me, arguments );
+            },
+    
+            request: function( apiName, args, callback ) {
+                var i = 0,
+                    widgets = this._widgets,
+                    len = widgets.length,
+                    rlts = [],
+                    dfds = [],
+                    widget, rlt, promise, key;
+    
+                args = isArrayLike( args ) ? args : [ args ];
+    
+                for ( ; i < len; i++ ) {
+                    widget = widgets[ i ];
+                    rlt = widget.invoke( apiName, args );
+    
+                    if ( rlt !== IGNORE ) {
+    
+                        // Deferred对象
+                        if ( Base.isPromise( rlt ) ) {
+                            dfds.push( rlt );
+                        } else {
+                            rlts.push( rlt );
+                        }
+                    }
+                }
+    
+                // 如果有callback，则用异步方式。
+                if ( callback || dfds.length ) {
+                    promise = Base.when.apply( Base, dfds );
+                    key = promise.pipe ? 'pipe' : 'then';
+    
+                    // 很重要不能删除。删除了会死循环。
+                    // 保证执行顺序。让callback总是在下一个tick中执行。
+                    return promise[ key ](function() {
+                                var deferred = Base.Deferred(),
+                                    args = arguments;
+    
+                                setTimeout(function() {
+                                    deferred.resolve.apply( deferred, args );
+                                }, 1 );
+    
+                                return deferred.promise();
+                            })[ key ]( callback || Base.noop );
+                } else {
+                    return rlts[ 0 ];
+                }
+            }
+        });
+    
+        /**
+         * 添加组件
+         * @param  {object} widgetProto 组件原型，构造函数通过constructor属性定义
+         * @param  {object} responseMap API名称与函数实现的映射
+         * @example
+         *     Uploader.register( {
+         *         init: function( options ) {},
+         *         makeThumb: function() {}
+         *     }, {
+         *         'make-thumb': 'makeThumb'
+         *     } );
+         */
+        Uploader.register = Widget.register = function( responseMap, widgetProto ) {
+            var map = { init: 'init' },
+                klass;
+    
+            if ( arguments.length === 1 ) {
+                widgetProto = responseMap;
+                widgetProto.responseMap = map;
+            } else {
+                widgetProto.responseMap = $.extend( map, responseMap );
+            }
+    
+            klass = Base.inherits( Widget, widgetProto );
+            widgetClass.push( klass );
+    
+            return klass;
+        };
+    
+        return Widget;
+    });
+    /**
+     * @fileOverview 文件选择相关
+     */
+    define('widgets/filepicker',[
+        'base',
+        'uploader',
+        'lib/filepicker',
+        'widgets/widget'
+    ], function( Base, Uploader, FilePicker ) {
+        var $ = Base.$;
+    
+        $.extend( Uploader.options, {
+    
+            /**
+             * @property {Selector | Object} [pick=undefined]
+             * @namespace options
+             * @for Uploader
+             * @description 指定选择文件的按钮容器，不指定则不创建按钮。
+             *
+             * * `id` {Seletor} 指定选择文件的按钮容器，不指定则不创建按钮。
+             * * `label` {String} 请采用 `innerHTML` 代替
+             * * `innerHTML` {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
+             * * `multiple` {Boolean} 是否开起同时选择多个文件能力。
+             */
+            pick: null,
+    
+            /**
+             * @property {Arroy} [accept=null]
+             * @namespace options
+             * @for Uploader
+             * @description 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
+             *
+             * * `title` {String} 文字描述
+             * * `extensions` {String} 允许的文件后缀，不带点，多个用逗号分割。
+             * * `mimeTypes` {String} 多个用逗号分割。
+             *
+             * 如：
+             *
+             * ```
+             * {
+             *     title: 'Images',
+             *     extensions: 'gif,jpg,jpeg,bmp,png',
+             *     mimeTypes: 'image/*'
+             * }
+             * ```
+             */
+            accept: null/*{
+                title: 'Images',
+                extensions: 'gif,jpg,jpeg,bmp,png',
+                mimeTypes: 'image/*'
+            }*/
+        });
+    
+        return Uploader.register({
+            'add-btn': 'addButton',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable'
+        }, {
+    
+            init: function( opts ) {
+                this.pickers = [];
+                return opts.pick && this.addButton( opts.pick );
+            },
+    
+            refresh: function() {
+                $.each( this.pickers, function() {
+                    this.refresh();
+                });
+            },
+    
+            /**
+             * @method addButton
+             * @for Uploader
+             * @grammar addButton( pick ) => Promise
+             * @description
+             * 添加文件选择按钮，如果一个按钮不够，需要调用此方法来添加。参数跟[options.pick](#WebUploader:Uploader:options)一致。
+             * @example
+             * uploader.addButton({
+             *     id: '#btnContainer',
+             *     innerHTML: '选择文件'
+             * });
+             */
+            addButton: function( pick ) {
+                var me = this,
+                    opts = me.options,
+                    accept = opts.accept,
+                    options, picker, deferred;
+    
+                if ( !pick ) {
+                    return;
+                }
+    
+                deferred = Base.Deferred();
+                $.isPlainObject( pick ) || (pick = {
+                    id: pick
+                });
+    
+                options = $.extend({}, pick, {
+                    accept: $.isPlainObject( accept ) ? [ accept ] : accept,
+                    swf: opts.swf,
+                    runtimeOrder: opts.runtimeOrder
+                });
+    
+                picker = new FilePicker( options );
+    
+                picker.once( 'ready', deferred.resolve );
+                picker.on( 'select', function( files ) {
+                    me.owner.request( 'add-file', [ files ]);
+                });
+                picker.init();
+    
+                this.pickers.push( picker );
+    
+                return deferred.promise();
+            },
+    
+            disable: function() {
+                $.each( this.pickers, function() {
+                    this.disable();
+                });
+            },
+    
+            enable: function() {
+                $.each( this.pickers, function() {
+                    this.enable();
+                });
+            }
+        });
+    });
+    /**
+     * @fileOverview Image
+     */
+    define('lib/image',[
+        'base',
+        'runtime/client',
+        'lib/blob'
+    ], function( Base, RuntimeClient, Blob ) {
+        var $ = Base.$;
+    
+        // 构造器。
+        function Image( opts ) {
+            this.options = $.extend({}, Image.options, opts );
+            RuntimeClient.call( this, 'Image' );
+    
+            this.on( 'load', function() {
+                this._info = this.exec('info');
+                this._meta = this.exec('meta');
+            });
+        }
+    
+        // 默认选项。
+        Image.options = {
+    
+            // 默认的图片处理质量
+            quality: 90,
+    
+            // 是否裁剪
+            crop: false,
+    
+            // 是否保留头部信息
+            preserveHeaders: true,
+    
+            // 是否允许放大。
+            allowMagnify: true
+        };
+    
+        // 继承RuntimeClient.
+        Base.inherits( RuntimeClient, {
+            constructor: Image,
+    
+            info: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._info = val;
+                    return this;
+                }
+    
+                // getter
+                return this._info;
+            },
+    
+            meta: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._meta = val;
+                    return this;
+                }
+    
+                // getter
+                return this._meta;
+            },
+    
+            loadFromBlob: function( blob ) {
+                var me = this,
+                    ruid = blob.getRuid();
+    
+                this.connectRuntime( ruid, function() {
+                    me.exec( 'init', me.options );
+                    me.exec( 'loadFromBlob', blob );
+                });
+            },
+    
+            resize: function() {
+                var args = Base.slice( arguments );
+                return this.exec.apply( this, [ 'resize' ].concat( args ) );
+            },
+    
+            getAsDataUrl: function( type ) {
+                return this.exec( 'getAsDataUrl', type );
+            },
+    
+            getAsBlob: function( type ) {
+                var blob = this.exec( 'getAsBlob', type );
+    
+                return new Blob( this.getRuid(), blob );
+            }
+        });
+    
+        return Image;
+    });
+    /**
+     * @fileOverview 图片操作, 负责预览图片和上传前压缩图片
+     */
+    define('widgets/image',[
+        'base',
+        'uploader',
+        'lib/image',
+        'widgets/widget'
+    ], function( Base, Uploader, Image ) {
+    
+        var $ = Base.$,
+            throttle;
+    
+        // 根据要处理的文件大小来节流，一次不能处理太多，会卡。
+        throttle = (function( max ) {
+            var occupied = 0,
+                waiting = [],
+                tick = function() {
+                    var item;
+    
+                    while ( waiting.length && occupied < max ) {
+                        item = waiting.shift();
+                        occupied += item[ 0 ];
+                        item[ 1 ]();
+                    }
+                };
+    
+            return function( emiter, size, cb ) {
+                waiting.push([ size, cb ]);
+                emiter.once( 'destroy', function() {
+                    occupied -= size;
+                    setTimeout( tick, 1 );
+                });
+                setTimeout( tick, 1 );
+            };
+        })( 5 * 1024 * 1024 );
+    
+        $.extend( Uploader.options, {
+    
+            /**
+             * @property {Object} [thumb]
+             * @namespace options
+             * @for Uploader
+             * @description 配置生成缩略图的选项。
+             *
+             * 默认为：
+             *
+             * ```javascript
+             * {
+             *     width: 110,
+             *     height: 110,
+             *
+             *     // 图片质量，只有type为`image/jpeg`的时候才有效。
+             *     quality: 70,
+             *
+             *     // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+             *     allowMagnify: true,
+             *
+             *     // 是否允许裁剪。
+             *     crop: true,
+             *
+             *     // 是否保留头部meta信息。
+             *     preserveHeaders: false,
+             *
+             *     // 为空的话则保留原有图片格式。
+             *     // 否则强制转换成指定的类型。
+             *     type: 'image/jpeg'
+             * }
+             * ```
+             */
+            thumb: {
+                width: 110,
+                height: 110,
+                quality: 70,
+                allowMagnify: true,
+                crop: true,
+                preserveHeaders: false,
+    
+                // 为空的话则保留原有图片格式。
+                // 否则强制转换成指定的类型。
+                // IE 8下面 base64 大小不能超过 32K 否则预览失败，而非 jpeg 编码的图片很可
+                // 能会超过 32k, 所以这里设置成预览的时候都是 image/jpeg
+                type: 'image/jpeg'
+            },
+    
+            /**
+             * @property {Object} [compress]
+             * @namespace options
+             * @for Uploader
+             * @description 配置压缩的图片的选项。如果此选项为`false`, 则图片在上传前不进行压缩。
+             *
+             * 默认为：
+             *
+             * ```javascript
+             * {
+             *     width: 1600,
+             *     height: 1600,
+             *
+             *     // 图片质量，只有type为`image/jpeg`的时候才有效。
+             *     quality: 90,
+             *
+             *     // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+             *     allowMagnify: false,
+             *
+             *     // 是否允许裁剪。
+             *     crop: false,
+             *
+             *     // 是否保留头部meta信息。
+             *     preserveHeaders: true
+             * }
+             * ```
+             */
+            compress: {
+                width: 1600,
+                height: 1600,
+                quality: 90,
+                allowMagnify: false,
+                crop: false,
+                preserveHeaders: true
+            }
+        });
+    
+        return Uploader.register({
+            'make-thumb': 'makeThumb',
+            'before-send-file': 'compressImage'
+        }, {
+    
+    
+            /**
+             * 生成缩略图，此过程为异步，所以需要传入`callback`。
+             * 通常情况在图片加入队里后调用此方法来生成预览图以增强交互效果。
+             *
+             * `callback`中可以接收到两个参数。
+             * * 第一个为error，如果生成缩略图有错误，此error将为真。
+             * * 第二个为ret, 缩略图的Data URL值。
+             *
+             * **注意**
+             * Date URL在IE6/7中不支持，所以不用调用此方法了，直接显示一张暂不支持预览图片好了。
+             *
+             *
+             * @method makeThumb
+             * @grammar makeThumb( file, callback ) => undefined
+             * @grammar makeThumb( file, callback, width, height ) => undefined
+             * @for Uploader
+             * @example
+             *
+             * uploader.on( 'fileQueued', function( file ) {
+             *     var $li = ...;
+             *
+             *     uploader.makeThumb( file, function( error, ret ) {
+             *         if ( error ) {
+             *             $li.text('预览错误');
+             *         } else {
+             *             $li.append('<img alt="" src="' + ret + '" />');
+             *         }
+             *     });
+             *
+             * });
+             */
+            makeThumb: function( file, cb, width, height ) {
+                var opts, image;
+    
+                file = this.request( 'get-file', file );
+    
+                // 只预览图片格式。
+                if ( !file.type.match( /^image/ ) ) {
+                    cb( true );
+                    return;
+                }
+    
+                opts = $.extend({}, this.options.thumb );
+    
+                // 如果传入的是object.
+                if ( $.isPlainObject( width ) ) {
+                    opts = $.extend( opts, width );
+                    width = null;
+                }
+    
+                width = width || opts.width;
+                height = height || opts.height;
+    
+                image = new Image( opts );
+    
+                image.once( 'load', function() {
+                    file._info = file._info || image.info();
+                    file._meta = file._meta || image.meta();
+                    image.resize( width, height );
+                });
+    
+                image.once( 'complete', function() {
+                    cb( false, image.getAsDataUrl( opts.type ) );
+                    image.destroy();
+                });
+    
+                image.once( 'error', function() {
+                    cb( true );
+                    image.destroy();
+                });
+    
+                throttle( image, file.source.size, function() {
+                    file._info && image.info( file._info );
+                    file._meta && image.meta( file._meta );
+                    image.loadFromBlob( file.source );
+                });
+            },
+    
+            compressImage: function( file ) {
+                var opts = this.options.compress || this.options.resize,
+                    compressSize = opts && opts.compressSize || 300 * 1024,
+                    image, deferred;
+    
+                file = this.request( 'get-file', file );
+    
+                // 只预览图片格式。
+                if ( !opts || !~'image/jpeg,image/jpg'.indexOf( file.type ) ||
+                        file.size < compressSize ||
+                        file._compressed ) {
+                    return;
+                }
+    
+                opts = $.extend({}, opts );
+                deferred = Base.Deferred();
+    
+                image = new Image( opts );
+    
+                deferred.always(function() {
+                    image.destroy();
+                    image = null;
+                });
+                image.once( 'error', deferred.reject );
+                image.once( 'load', function() {
+                    file._info = file._info || image.info();
+                    file._meta = file._meta || image.meta();
+                    image.resize( opts.width, opts.height );
+                });
+    
+                image.once( 'complete', function() {
+                    var blob, size;
+    
+                    // 移动端 UC / qq 浏览器的无图模式下
+                    // ctx.getImageData 处理大图的时候会报 Exception
+                    // INDEX_SIZE_ERR: DOM Exception 1
+                    try {
+                        blob = image.getAsBlob( opts.type );
+    
+                        size = file.size;
+    
+                        // 如果压缩后，比原来还大则不用压缩后的。
+                        if ( blob.size < size ) {
+                            // file.source.destroy && file.source.destroy();
+                            file.source = blob;
+                            file.size = blob.size;
+    
+                            file.trigger( 'resize', blob.size, size );
+                        }
+    
+                        // 标记，避免重复压缩。
+                        file._compressed = true;
+                        deferred.resolve();
+                    } catch ( e ) {
+                        // 出错了直接继续，让其上传原始图片
+                        deferred.resolve();
+                    }
+                });
+    
+                file._info && image.info( file._info );
+                file._meta && image.meta( file._meta );
+    
+                image.loadFromBlob( file.source );
+                return deferred.promise();
+            }
+        });
+    });
+    /**
+     * @fileOverview 文件属性封装
+     */
+    define('file',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            idPrefix = 'WU_FILE_',
+            idSuffix = 0,
+            rExt = /\.([^.]+)$/,
+            statusMap = {};
+    
+        function gid() {
+            return idPrefix + idSuffix++;
+        }
+    
+        /**
+         * 文件类
+         * @class File
+         * @constructor 构造函数
+         * @grammar new File( source ) => File
+         * @param {Lib.File} source [lib.File](#Lib.File)实例, 此source对象是带有Runtime信息的。
+         */
+        function WUFile( source ) {
+    
+            /**
+             * 文件名，包括扩展名（后缀）
+             * @property name
+             * @type {string}
+             */
+            this.name = source.name || 'Untitled';
+    
+            /**
+             * 文件体积（字节）
+             * @property size
+             * @type {uint}
+             * @default 0
+             */
+            this.size = source.size || 0;
+    
+            /**
+             * 文件MIMETYPE类型，与文件类型的对应关系请参考[http://t.cn/z8ZnFny](http://t.cn/z8ZnFny)
+             * @property type
+             * @type {string}
+             * @default 'application'
+             */
+            this.type = source.type || 'application';
+    
+            /**
+             * 文件最后修改日期
+             * @property lastModifiedDate
+             * @type {int}
+             * @default 当前时间戳
+             */
+            this.lastModifiedDate = source.lastModifiedDate || (new Date() * 1);
+    
+            /**
+             * 文件ID，每个对象具有唯一ID，与文件名无关
+             * @property id
+             * @type {string}
+             */
+            this.id = gid();
+    
+            /**
+             * 文件扩展名，通过文件名获取，例如test.png的扩展名为png
+             * @property ext
+             * @type {string}
+             */
+            this.ext = rExt.exec( this.name ) ? RegExp.$1 : '';
+    
+    
+            /**
+             * 状态文字说明。在不同的status语境下有不同的用途。
+             * @property statusText
+             * @type {string}
+             */
+            this.statusText = '';
+    
+            // 存储文件状态，防止通过属性直接修改
+            statusMap[ this.id ] = WUFile.Status.INITED;
+    
+            this.source = source;
+            this.loaded = 0;
+    
+            this.on( 'error', function( msg ) {
+                this.setStatus( WUFile.Status.ERROR, msg );
+            });
+        }
+    
+        $.extend( WUFile.prototype, {
+    
+            /**
+             * 设置状态，状态变化时会触发`change`事件。
+             * @method setStatus
+             * @grammar setStatus( status[, statusText] );
+             * @param {File.Status|String} status [文件状态值](#WebUploader:File:File.Status)
+             * @param {String} [statusText=''] 状态说明，常在error时使用，用http, abort,server等来标记是由于什么原因导致文件错误。
+             */
+            setStatus: function( status, text ) {
+    
+                var prevStatus = statusMap[ this.id ];
+    
+                typeof text !== 'undefined' && (this.statusText = text);
+    
+                if ( status !== prevStatus ) {
+                    statusMap[ this.id ] = status;
+                    /**
+                     * 文件状态变化
+                     * @event statuschange
+                     */
+                    this.trigger( 'statuschange', status, prevStatus );
+                }
+    
+            },
+    
+            /**
+             * 获取文件状态
+             * @return {File.Status}
+             * @example
+                     文件状态具体包括以下几种类型：
+                     {
+                         // 初始化
+                        INITED:     0,
+                        // 已入队列
+                        QUEUED:     1,
+                        // 正在上传
+                        PROGRESS:     2,
+                        // 上传出错
+                        ERROR:         3,
+                        // 上传成功
+                        COMPLETE:     4,
+                        // 上传取消
+                        CANCELLED:     5
+                    }
+             */
+            getStatus: function() {
+                return statusMap[ this.id ];
+            },
+    
+            /**
+             * 获取文件原始信息。
+             * @return {*}
+             */
+            getSource: function() {
+                return this.source;
+            },
+    
+            destory: function() {
+                delete statusMap[ this.id ];
+            }
+        });
+    
+        Mediator.installTo( WUFile.prototype );
+    
+        /**
+         * 文件状态值，具体包括以下几种类型：
+         * * `inited` 初始状态
+         * * `queued` 已经进入队列, 等待上传
+         * * `progress` 上传中
+         * * `complete` 上传完成。
+         * * `error` 上传出错，可重试
+         * * `interrupt` 上传中断，可续传。
+         * * `invalid` 文件不合格，不能重试上传。会自动从队列中移除。
+         * * `cancelled` 文件被移除。
+         * @property {Object} Status
+         * @namespace File
+         * @class File
+         * @static
+         */
+        WUFile.Status = {
+            INITED:     'inited',    // 初始状态
+            QUEUED:     'queued',    // 已经进入队列, 等待上传
+            PROGRESS:   'progress',    // 上传中
+            ERROR:      'error',    // 上传出错，可重试
+            COMPLETE:   'complete',    // 上传完成。
+            CANCELLED:  'cancelled',    // 上传取消。
+            INTERRUPT:  'interrupt',    // 上传中断，可续传。
+            INVALID:    'invalid'    // 文件不合格，不能重试上传。
+        };
+    
+        return WUFile;
+    });
+    
+    /**
+     * @fileOverview 文件队列
+     */
+    define('queue',[
+        'base',
+        'mediator',
+        'file'
+    ], function( Base, Mediator, WUFile ) {
+    
+        var $ = Base.$,
+            STATUS = WUFile.Status;
+    
+        /**
+         * 文件队列, 用来存储各个状态中的文件。
+         * @class Queue
+         * @extends Mediator
+         */
+        function Queue() {
+    
+            /**
+             * 统计文件数。
+             * * `numOfQueue` 队列中的文件数。
+             * * `numOfSuccess` 上传成功的文件数
+             * * `numOfCancel` 被移除的文件数
+             * * `numOfProgress` 正在上传中的文件数
+             * * `numOfUploadFailed` 上传错误的文件数。
+             * * `numOfInvalid` 无效的文件数。
+             * @property {Object} stats
+             */
+            this.stats = {
+                numOfQueue: 0,
+                numOfSuccess: 0,
+                numOfCancel: 0,
+                numOfProgress: 0,
+                numOfUploadFailed: 0,
+                numOfInvalid: 0
+            };
+    
+            // 上传队列，仅包括等待上传的文件
+            this._queue = [];
+    
+            // 存储所有文件
+            this._map = {};
+        }
+    
+        $.extend( Queue.prototype, {
+    
+            /**
+             * 将新文件加入对队列尾部
+             *
+             * @method append
+             * @param  {File} file   文件对象
+             */
+            append: function( file ) {
+                this._queue.push( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 将新文件加入对队列头部
+             *
+             * @method prepend
+             * @param  {File} file   文件对象
+             */
+            prepend: function( file ) {
+                this._queue.unshift( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 获取文件对象
+             *
+             * @method getFile
+             * @param  {String} fileId   文件ID
+             * @return {File}
+             */
+            getFile: function( fileId ) {
+                if ( typeof fileId !== 'string' ) {
+                    return fileId;
+                }
+                return this._map[ fileId ];
+            },
+    
+            /**
+             * 从队列中取出一个指定状态的文件。
+             * @grammar fetch( status ) => File
+             * @method fetch
+             * @param {String} status [文件状态值](#WebUploader:File:File.Status)
+             * @return {File} [File](#WebUploader:File)
+             */
+            fetch: function( status ) {
+                var len = this._queue.length,
+                    i, file;
+    
+                status = status || STATUS.QUEUED;
+    
+                for ( i = 0; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( status === file.getStatus() ) {
+                        return file;
+                    }
+                }
+    
+                return null;
+            },
+    
+            /**
+             * 对队列进行排序，能够控制文件上传顺序。
+             * @grammar sort( fn ) => undefined
+             * @method sort
+             * @param {Function} fn 排序方法
+             */
+            sort: function( fn ) {
+                if ( typeof fn === 'function' ) {
+                    this._queue.sort( fn );
+                }
+            },
+    
+            /**
+             * 获取指定类型的文件列表, 列表中每一个成员为[File](#WebUploader:File)对象。
+             * @grammar getFiles( [status1[, status2 ...]] ) => Array
+             * @method getFiles
+             * @param {String} [status] [文件状态值](#WebUploader:File:File.Status)
+             */
+            getFiles: function() {
+                var sts = [].slice.call( arguments, 0 ),
+                    ret = [],
+                    i = 0,
+                    len = this._queue.length,
+                    file;
+    
+                for ( ; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( sts.length && !~$.inArray( file.getStatus(), sts ) ) {
+                        continue;
+                    }
+    
+                    ret.push( file );
+                }
+    
+                return ret;
+            },
+    
+            _fileAdded: function( file ) {
+                var me = this,
+                    existing = this._map[ file.id ];
+    
+                if ( !existing ) {
+                    this._map[ file.id ] = file;
+    
+                    file.on( 'statuschange', function( cur, pre ) {
+                        me._onFileStatusChange( cur, pre );
+                    });
+                }
+    
+                file.setStatus( STATUS.QUEUED );
+            },
+    
+            _onFileStatusChange: function( curStatus, preStatus ) {
+                var stats = this.stats;
+    
+                switch ( preStatus ) {
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress--;
+                        break;
+    
+                    case STATUS.QUEUED:
+                        stats.numOfQueue --;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed--;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid--;
+                        break;
+                }
+    
+                switch ( curStatus ) {
+                    case STATUS.QUEUED:
+                        stats.numOfQueue++;
+                        break;
+    
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress++;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed++;
+                        break;
+    
+                    case STATUS.COMPLETE:
+                        stats.numOfSuccess++;
+                        break;
+    
+                    case STATUS.CANCELLED:
+                        stats.numOfCancel++;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid++;
+                        break;
+                }
+            }
+    
+        });
+    
+        Mediator.installTo( Queue.prototype );
+    
+        return Queue;
+    });
+    /**
+     * @fileOverview 队列
+     */
+    define('widgets/queue',[
+        'base',
+        'uploader',
+        'queue',
+        'file',
+        'lib/file',
+        'runtime/client',
+        'widgets/widget'
+    ], function( Base, Uploader, Queue, WUFile, File, RuntimeClient ) {
+    
+        var $ = Base.$,
+            rExt = /\.\w+$/,
+            Status = WUFile.Status;
+    
+        return Uploader.register({
+            'sort-files': 'sortFiles',
+            'add-file': 'addFiles',
+            'get-file': 'getFile',
+            'fetch-file': 'fetchFile',
+            'get-stats': 'getStats',
+            'get-files': 'getFiles',
+            'remove-file': 'removeFile',
+            'retry': 'retry',
+            'reset': 'reset',
+            'accept-file': 'acceptFile'
+        }, {
+    
+            init: function( opts ) {
+                var me = this,
+                    deferred, len, i, item, arr, accept, runtime;
+    
+                if ( $.isPlainObject( opts.accept ) ) {
+                    opts.accept = [ opts.accept ];
+                }
+    
+                // accept中的中生成匹配正则。
+                if ( opts.accept ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        item = opts.accept[ i ].extensions;
+                        item && arr.push( item );
+                    }
+    
+                    if ( arr.length ) {
+                        accept = '\\.' + arr.join(',')
+                                .replace( /,/g, '$|\\.' )
+                                .replace( /\*/g, '.*' ) + '$';
+                    }
+    
+                    me.accept = new RegExp( accept, 'i' );
+                }
+    
+                me.queue = new Queue();
+                me.stats = me.queue.stats;
+    
+                // 如果当前不是html5运行时，那就算了。
+                // 不执行后续操作
+                if ( this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                // 创建一个 html5 运行时的 placeholder
+                // 以至于外部添加原生 File 对象的时候能正确包裹一下供 webuploader 使用。
+                deferred = Base.Deferred();
+                runtime = new RuntimeClient('Placeholder');
+                runtime.connectRuntime({
+                    runtimeOrder: 'html5'
+                }, function() {
+                    me._ruid = runtime.getRuid();
+                    deferred.resolve();
+                });
+                return deferred.promise();
+            },
+    
+    
+            // 为了支持外部直接添加一个原生File对象。
+            _wrapFile: function( file ) {
+                if ( !(file instanceof WUFile) ) {
+    
+                    if ( !(file instanceof File) ) {
+                        if ( !this._ruid ) {
+                            throw new Error('Can\'t add external files.');
+                        }
+                        file = new File( this._ruid, file );
+                    }
+    
+                    file = new WUFile( file );
+                }
+    
+                return file;
+            },
+    
+            // 判断文件是否可以被加入队列
+            acceptFile: function( file ) {
+                var invalid = !file || file.size < 6 || this.accept &&
+    
+                        // 如果名字中有后缀，才做后缀白名单处理。
+                        rExt.exec( file.name ) && !this.accept.test( file.name );
+    
+                return !invalid;
+            },
+    
+    
+            /**
+             * @event beforeFileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列之前触发，此事件的handler返回值为`false`，则此文件不会被添加进入队列。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event fileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列以后触发。
+             * @for  Uploader
+             */
+    
+            _addFile: function( file ) {
+                var me = this;
+    
+                file = me._wrapFile( file );
+    
+                // 不过类型判断允许不允许，先派送 `beforeFileQueued`
+                if ( !me.owner.trigger( 'beforeFileQueued', file ) ) {
+                    return;
+                }
+    
+                // 类型不匹配，则派送错误事件，并返回。
+                if ( !me.acceptFile( file ) ) {
+                    me.owner.trigger( 'error', 'Q_TYPE_DENIED', file );
+                    return;
+                }
+    
+                me.queue.append( file );
+                me.owner.trigger( 'fileQueued', file );
+                return file;
+            },
+    
+            getFile: function( fileId ) {
+                return this.queue.getFile( fileId );
+            },
+    
+            /**
+             * @event filesQueued
+             * @param {File} files 数组，内容为原始File(lib/File）对象。
+             * @description 当一批文件添加进队列以后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method addFiles
+             * @grammar addFiles( file ) => undefined
+             * @grammar addFiles( [file1, file2 ...] ) => undefined
+             * @param {Array of File or File} [files] Files 对象 数组
+             * @description 添加文件到队列
+             * @for  Uploader
+             */
+            addFiles: function( files ) {
+                var me = this;
+    
+                if ( !files.length ) {
+                    files = [ files ];
+                }
+    
+                files = $.map( files, function( file ) {
+                    return me._addFile( file );
+                });
+    
+                me.owner.trigger( 'filesQueued', files );
+    
+                if ( me.options.auto ) {
+                    me.request('start-upload');
+                }
+            },
+    
+            getStats: function() {
+                return this.stats;
+            },
+    
+            /**
+             * @event fileDequeued
+             * @param {File} file File对象
+             * @description 当文件被移除队列后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method removeFile
+             * @grammar removeFile( file ) => undefined
+             * @grammar removeFile( id ) => undefined
+             * @param {File|id} file File对象或这File对象的id
+             * @description 移除某一文件。
+             * @for  Uploader
+             * @example
+             *
+             * $li.on('click', '.remove-this', function() {
+             *     uploader.removeFile( file );
+             * })
+             */
+            removeFile: function( file ) {
+                var me = this;
+    
+                file = file.id ? file : me.queue.getFile( file );
+    
+                file.setStatus( Status.CANCELLED );
+                me.owner.trigger( 'fileDequeued', file );
+            },
+    
+            /**
+             * @method getFiles
+             * @grammar getFiles() => Array
+             * @grammar getFiles( status1, status2, status... ) => Array
+             * @description 返回指定状态的文件集合，不传参数将返回所有状态的文件。
+             * @for  Uploader
+             * @example
+             * console.log( uploader.getFiles() );    // => all files
+             * console.log( uploader.getFiles('error') )    // => all error files.
+             */
+            getFiles: function() {
+                return this.queue.getFiles.apply( this.queue, arguments );
+            },
+    
+            fetchFile: function() {
+                return this.queue.fetch.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method retry
+             * @grammar retry() => undefined
+             * @grammar retry( file ) => undefined
+             * @description 重试上传，重试指定文件，或者从出错的文件开始重新上传。
+             * @for  Uploader
+             * @example
+             * function retry() {
+             *     uploader.retry();
+             * }
+             */
+            retry: function( file, noForceStart ) {
+                var me = this,
+                    files, i, len;
+    
+                if ( file ) {
+                    file = file.id ? file : me.queue.getFile( file );
+                    file.setStatus( Status.QUEUED );
+                    noForceStart || me.request('start-upload');
+                    return;
+                }
+    
+                files = me.queue.getFiles( Status.ERROR );
+                i = 0;
+                len = files.length;
+    
+                for ( ; i < len; i++ ) {
+                    file = files[ i ];
+                    file.setStatus( Status.QUEUED );
+                }
+    
+                me.request('start-upload');
+            },
+    
+            /**
+             * @method sort
+             * @grammar sort( fn ) => undefined
+             * @description 排序队列中的文件，在上传之前调整可以控制上传顺序。
+             * @for  Uploader
+             */
+            sortFiles: function() {
+                return this.queue.sort.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method reset
+             * @grammar reset() => undefined
+             * @description 重置uploader。目前只重置了队列。
+             * @for  Uploader
+             * @example
+             * uploader.reset();
+             */
+            reset: function() {
+                this.queue = new Queue();
+                this.stats = this.queue.stats;
+            }
+        });
+    
+    });
+    /**
+     * @fileOverview 添加获取Runtime相关信息的方法。
+     */
+    define('widgets/runtime',[
+        'uploader',
+        'runtime/runtime',
+        'widgets/widget'
+    ], function( Uploader, Runtime ) {
+    
+        Uploader.support = function() {
+            return Runtime.hasRuntime.apply( Runtime, arguments );
+        };
+    
+        return Uploader.register({
+            'predict-runtime-type': 'predictRuntmeType'
+        }, {
+    
+            init: function() {
+                if ( !this.predictRuntmeType() ) {
+                    throw Error('Runtime Error');
+                }
+            },
+    
+            /**
+             * 预测Uploader将采用哪个`Runtime`
+             * @grammar predictRuntmeType() => String
+             * @method predictRuntmeType
+             * @for  Uploader
+             */
+            predictRuntmeType: function() {
+                var orders = this.options.runtimeOrder || Runtime.orders,
+                    type = this.type,
+                    i, len;
+    
+                if ( !type ) {
+                    orders = orders.split( /\s*,\s*/g );
+    
+                    for ( i = 0, len = orders.length; i < len; i++ ) {
+                        if ( Runtime.hasRuntime( orders[ i ] ) ) {
+                            this.type = type = orders[ i ];
+                            break;
+                        }
+                    }
+                }
+    
+                return type;
+            }
+        });
+    });
+    /**
+     * @fileOverview Transport
+     */
+    define('lib/transport',[
+        'base',
+        'runtime/client',
+        'mediator'
+    ], function( Base, RuntimeClient, Mediator ) {
+    
+        var $ = Base.$;
+    
+        function Transport( opts ) {
+            var me = this;
+    
+            opts = me.options = $.extend( true, {}, Transport.options, opts || {} );
+            RuntimeClient.call( this, 'Transport' );
+    
+            this._blob = null;
+            this._formData = opts.formData || {};
+            this._headers = opts.headers || {};
+    
+            this.on( 'progress', this._timeout );
+            this.on( 'load error', function() {
+                me.trigger( 'progress', 1 );
+                clearTimeout( me._timer );
+            });
+        }
+    
+        Transport.options = {
+            server: '',
+            method: 'POST',
+    
+            // 跨域时，是否允许携带cookie, 只有html5 runtime才有效
+            withCredentials: false,
+            fileVal: 'file',
+            timeout: 2 * 60 * 1000,    // 2分钟
+            formData: {},
+            headers: {},
+            sendAsBinary: false
+        };
+    
+        $.extend( Transport.prototype, {
+    
+            // 添加Blob, 只能添加一次，最后一次有效。
+            appendBlob: function( key, blob, filename ) {
+                var me = this,
+                    opts = me.options;
+    
+                if ( me.getRuid() ) {
+                    me.disconnectRuntime();
+                }
+    
+                // 连接到blob归属的同一个runtime.
+                me.connectRuntime( blob.ruid, function() {
+                    me.exec('init');
+                });
+    
+                me._blob = blob;
+                opts.fileVal = key || opts.fileVal;
+                opts.filename = filename || opts.filename;
+            },
+    
+            // 添加其他字段
+            append: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._formData, key );
+                } else {
+                    this._formData[ key ] = value;
+                }
+            },
+    
+            setRequestHeader: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._headers, key );
+                } else {
+                    this._headers[ key ] = value;
+                }
+            },
+    
+            send: function( method ) {
+                this.exec( 'send', method );
+                this._timeout();
+            },
+    
+            abort: function() {
+                clearTimeout( this._timer );
+                return this.exec('abort');
+            },
+    
+            destroy: function() {
+                this.trigger('destroy');
+                this.off();
+                this.exec('destroy');
+                this.disconnectRuntime();
+            },
+    
+            getResponse: function() {
+                return this.exec('getResponse');
+            },
+    
+            getResponseAsJson: function() {
+                return this.exec('getResponseAsJson');
+            },
+    
+            getStatus: function() {
+                return this.exec('getStatus');
+            },
+    
+            _timeout: function() {
+                var me = this,
+                    duration = me.options.timeout;
+    
+                if ( !duration ) {
+                    return;
+                }
+    
+                clearTimeout( me._timer );
+                me._timer = setTimeout(function() {
+                    me.abort();
+                    me.trigger( 'error', 'timeout' );
+                }, duration );
+            }
+    
+        });
+    
+        // 让Transport具备事件功能。
+        Mediator.installTo( Transport.prototype );
+    
+        return Transport;
+    });
+    /**
+     * @fileOverview 负责文件上传相关。
+     */
+    define('widgets/upload',[
+        'base',
+        'uploader',
+        'file',
+        'lib/transport',
+        'widgets/widget'
+    ], function( Base, Uploader, WUFile, Transport ) {
+    
+        var $ = Base.$,
+            isPromise = Base.isPromise,
+            Status = WUFile.Status;
+    
+        // 添加默认配置项
+        $.extend( Uploader.options, {
+    
+    
+            /**
+             * @property {Boolean} [prepareNextFile=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否允许在文件传输时提前把下一个文件准备好。
+             * 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。
+             * 如果能提前在当前文件传输期处理，可以节省总体耗时。
+             */
+            prepareNextFile: false,
+    
+            /**
+             * @property {Boolean} [chunked=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否要分片处理大文件上传。
+             */
+            chunked: false,
+    
+            /**
+             * @property {Boolean} [chunkSize=5242880]
+             * @namespace options
+             * @for Uploader
+             * @description 如果要分片，分多大一片？ 默认大小为5M.
+             */
+            chunkSize: 5 * 1024 * 1024,
+    
+            /**
+             * @property {Boolean} [chunkRetry=2]
+             * @namespace options
+             * @for Uploader
+             * @description 如果某个分片由于网络问题出错，允许自动重传多少次？
+             */
+            chunkRetry: 2,
+    
+            /**
+             * @property {Boolean} [threads=3]
+             * @namespace options
+             * @for Uploader
+             * @description 上传并发数。允许同时最大上传进程数。
+             */
+            threads: 3,
+    
+    
+            /**
+             * @property {Object} [formData]
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传请求的参数表，每次发送都会发送此对象中的参数。
+             */
+            formData: null
+    
+            /**
+             * @property {Object} [fileVal='file']
+             * @namespace options
+             * @for Uploader
+             * @description 设置文件上传域的name。
+             */
+    
+            /**
+             * @property {Object} [method='POST']
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传方式，`POST`或者`GET`。
+             */
+    
+            /**
+             * @property {Object} [sendAsBinary=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否已二进制的流的方式发送文件，这样整个上传内容`php://input`都为文件内容，
+             * 其他参数在$_GET数组中。
+             */
+        });
+    
+        // 负责将文件切片。
+        function CuteFile( file, chunkSize ) {
+            var pending = [],
+                blob = file.source,
+                total = blob.size,
+                chunks = chunkSize ? Math.ceil( total / chunkSize ) : 1,
+                start = 0,
+                index = 0,
+                len;
+    
+            while ( index < chunks ) {
+                len = Math.min( chunkSize, total - start );
+    
+                pending.push({
+                    file: file,
+                    start: start,
+                    end: chunkSize ? (start + len) : total,
+                    total: total,
+                    chunks: chunks,
+                    chunk: index++
+                });
+                start += len;
+            }
+    
+            file.blocks = pending.concat();
+            file.remaning = pending.length;
+    
+            return {
+                file: file,
+    
+                has: function() {
+                    return !!pending.length;
+                },
+    
+                fetch: function() {
+                    return pending.shift();
+                }
+            };
+        }
+    
+        Uploader.register({
+            'start-upload': 'start',
+            'stop-upload': 'stop',
+            'skip-file': 'skipFile',
+            'is-in-progress': 'isInProgress'
+        }, {
+    
+            init: function() {
+                var owner = this.owner;
+    
+                this.runing = false;
+    
+                // 记录当前正在传的数据，跟threads相关
+                this.pool = [];
+    
+                // 缓存即将上传的文件。
+                this.pending = [];
+    
+                // 跟踪还有多少分片没有完成上传。
+                this.remaning = 0;
+                this.__tick = Base.bindFn( this._tick, this );
+    
+                owner.on( 'uploadComplete', function( file ) {
+                    // 把其他块取消了。
+                    file.blocks && $.each( file.blocks, function( _, v ) {
+                        v.transport && (v.transport.abort(), v.transport.destroy());
+                        delete v.transport;
+                    });
+    
+                    delete file.blocks;
+                    delete file.remaning;
+                });
+            },
+    
+            /**
+             * @event startUpload
+             * @description 当开始上传流程时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。
+             * @grammar upload() => undefined
+             * @method upload
+             * @for  Uploader
+             */
+            start: function() {
+                var me = this;
+    
+                // 移出invalid的文件
+                $.each( me.request( 'get-files', Status.INVALID ), function() {
+                    me.request( 'remove-file', this );
+                });
+    
+                if ( me.runing ) {
+                    return;
+                }
+    
+                me.runing = true;
+    
+                // 如果有暂停的，则续传
+                $.each( me.pool, function( _, v ) {
+                    var file = v.file;
+    
+                    if ( file.getStatus() === Status.INTERRUPT ) {
+                        file.setStatus( Status.PROGRESS );
+                        me._trigged = false;
+                        v.transport && v.transport.send();
+                    }
+                });
+    
+                me._trigged = false;
+                me.owner.trigger('startUpload');
+                Base.nextTick( me.__tick );
+            },
+    
+            /**
+             * @event stopUpload
+             * @description 当开始上传流程暂停时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 暂停上传。第一个参数为是否中断上传当前正在上传的文件。
+             * @grammar stop() => undefined
+             * @grammar stop( true ) => undefined
+             * @method stop
+             * @for  Uploader
+             */
+            stop: function( interrupt ) {
+                var me = this;
+    
+                if ( me.runing === false ) {
+                    return;
+                }
+    
+                me.runing = false;
+    
+                interrupt && $.each( me.pool, function( _, v ) {
+                    v.transport && v.transport.abort();
+                    v.file.setStatus( Status.INTERRUPT );
+                });
+    
+                me.owner.trigger('stopUpload');
+            },
+    
+            /**
+             * 判断`Uplaode`r是否正在上传中。
+             * @grammar isInProgress() => Boolean
+             * @method isInProgress
+             * @for  Uploader
+             */
+            isInProgress: function() {
+                return !!this.runing;
+            },
+    
+            getStats: function() {
+                return this.request('get-stats');
+            },
+    
+            /**
+             * 掉过一个文件上传，直接标记指定文件为已上传状态。
+             * @grammar skipFile( file ) => undefined
+             * @method skipFile
+             * @for  Uploader
+             */
+            skipFile: function( file, status ) {
+                file = this.request( 'get-file', file );
+    
+                file.setStatus( status || Status.COMPLETE );
+                file.skipped = true;
+    
+                // 如果正在上传。
+                file.blocks && $.each( file.blocks, function( _, v ) {
+                    var _tr = v.transport;
+    
+                    if ( _tr ) {
+                        _tr.abort();
+                        _tr.destroy();
+                        delete v.transport;
+                    }
+                });
+    
+                this.owner.trigger( 'uploadSkip', file );
+            },
+    
+            /**
+             * @event uploadFinished
+             * @description 当所有文件上传结束时触发。
+             * @for  Uploader
+             */
+            _tick: function() {
+                var me = this,
+                    opts = me.options,
+                    fn, val;
+    
+                // 上一个promise还没有结束，则等待完成后再执行。
+                if ( me._promise ) {
+                    return me._promise.always( me.__tick );
+                }
+    
+                // 还有位置，且还有文件要处理的话。
+                if ( me.pool.length < opts.threads && (val = me._nextBlock()) ) {
+                    me._trigged = false;
+    
+                    fn = function( val ) {
+                        me._promise = null;
+    
+                        // 有可能是reject过来的，所以要检测val的类型。
+                        val && val.file && me._startSend( val );
+                        Base.nextTick( me.__tick );
+                    };
+    
+                    me._promise = isPromise( val ) ? val.always( fn ) : fn( val );
+    
+                // 没有要上传的了，且没有正在传输的了。
+                } else if ( !me.remaning && !me.getStats().numOfQueue ) {
+                    me.runing = false;
+    
+                    me._trigged || Base.nextTick(function() {
+                        me.owner.trigger('uploadFinished');
+                    });
+                    me._trigged = true;
+                }
+            },
+    
+            _nextBlock: function() {
+                var me = this,
+                    act = me._act,
+                    opts = me.options,
+                    next, done;
+    
+                // 如果当前文件还有没有需要传输的，则直接返回剩下的。
+                if ( act && act.has() &&
+                        act.file.getStatus() === Status.PROGRESS ) {
+    
+                    // 是否提前准备下一个文件
+                    if ( opts.prepareNextFile && !me.pending.length ) {
+                        me._prepareNextFile();
+                    }
+    
+                    return act.fetch();
+    
+                // 否则，如果正在运行，则准备下一个文件，并等待完成后返回下个分片。
+                } else if ( me.runing ) {
+    
+                    // 如果缓存中有，则直接在缓存中取，没有则去queue中取。
+                    if ( !me.pending.length && me.getStats().numOfQueue ) {
+                        me._prepareNextFile();
+                    }
+    
+                    next = me.pending.shift();
+                    done = function( file ) {
+                        if ( !file ) {
+                            return null;
+                        }
+    
+                        act = CuteFile( file, opts.chunked ? opts.chunkSize : 0 );
+                        me._act = act;
+                        return act.fetch();
+                    };
+    
+                    // 文件可能还在prepare中，也有可能已经完全准备好了。
+                    return isPromise( next ) ?
+                            next[ next.pipe ? 'pipe' : 'then']( done ) :
+                            done( next );
+                }
+            },
+    
+    
+            /**
+             * @event uploadStart
+             * @param {File} file File对象
+             * @description 某个文件开始上传前触发，一个文件只会触发一次。
+             * @for  Uploader
+             */
+            _prepareNextFile: function() {
+                var me = this,
+                    file = me.request('fetch-file'),
+                    pending = me.pending,
+                    promise;
+    
+                if ( file ) {
+                    promise = me.request( 'before-send-file', file, function() {
+    
+                        // 有可能文件被skip掉了。文件被skip掉后，状态坑定不是Queued.
+                        if ( file.getStatus() === Status.QUEUED ) {
+                            me.owner.trigger( 'uploadStart', file );
+                            file.setStatus( Status.PROGRESS );
+                            return file;
+                        }
+    
+                        return me._finishFile( file );
+                    });
+    
+                    // 如果还在pending中，则替换成文件本身。
+                    promise.done(function() {
+                        var idx = $.inArray( promise, pending );
+    
+                        ~idx && pending.splice( idx, 1, file );
+                    });
+    
+                    // befeore-send-file的钩子就有错误发生。
+                    promise.fail(function( reason ) {
+                        file.setStatus( Status.ERROR, reason );
+                        me.owner.trigger( 'uploadError', file, reason );
+                        me.owner.trigger( 'uploadComplete', file );
+                    });
+    
+                    pending.push( promise );
+                }
+            },
+    
+            // 让出位置了，可以让其他分片开始上传
+            _popBlock: function( block ) {
+                var idx = $.inArray( block, this.pool );
+    
+                this.pool.splice( idx, 1 );
+                block.file.remaning--;
+                this.remaning--;
+            },
+    
+            // 开始上传，可以被掉过。如果promise被reject了，则表示跳过此分片。
+            _startSend: function( block ) {
+                var me = this,
+                    file = block.file,
+                    promise;
+    
+                me.pool.push( block );
+                me.remaning++;
+    
+                // 如果没有分片，则直接使用原始的。
+                // 不会丢失content-type信息。
+                block.blob = block.chunks === 1 ? file.source :
+                        file.source.slice( block.start, block.end );
+    
+                // hook, 每个分片发送之前可能要做些异步的事情。
+                promise = me.request( 'before-send', block, function() {
+    
+                    // 有可能文件已经上传出错了，所以不需要再传输了。
+                    if ( file.getStatus() === Status.PROGRESS ) {
+                        me._doSend( block );
+                    } else {
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+    
+                // 如果为fail了，则跳过此分片。
+                promise.fail(function() {
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file ).always(function() {
+                            block.percentage = 1;
+                            me._popBlock( block );
+                            me.owner.trigger( 'uploadComplete', file );
+                            Base.nextTick( me.__tick );
+                        });
+                    } else {
+                        block.percentage = 1;
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+            },
+    
+    
+            /**
+             * @event uploadBeforeSend
+             * @param {Object} object
+             * @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数。
+             * @description 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadAccept
+             * @param {Object} object
+             * @param {Object} ret 服务端的返回数据，json格式，如果服务端不是json格式，从ret._raw中取数据，自行解析。
+             * @description 当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为`false`, 则此文件将派送`server`类型的`uploadError`事件。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadProgress
+             * @param {File} file File对象
+             * @param {Number} percentage 上传进度
+             * @description 上传过程中触发，携带上传进度。
+             * @for  Uploader
+             */
+    
+    
+            /**
+             * @event uploadError
+             * @param {File} file File对象
+             * @param {String} reason 出错的code
+             * @description 当文件上传出错时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadSuccess
+             * @param {File} file File对象
+             * @param {Object} response 服务端返回的数据
+             * @description 当文件上传成功时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadComplete
+             * @param {File} [file] File对象
+             * @description 不管成功或者失败，文件上传完成时触发。
+             * @for  Uploader
+             */
+    
+            // 做上传操作。
+            _doSend: function( block ) {
+                var me = this,
+                    owner = me.owner,
+                    opts = me.options,
+                    file = block.file,
+                    tr = new Transport( opts ),
+                    data = $.extend({}, opts.formData ),
+                    headers = $.extend({}, opts.headers ),
+                    requestAccept, ret;
+    
+                block.transport = tr;
+    
+                tr.on( 'destroy', function() {
+                    delete block.transport;
+                    me._popBlock( block );
+                    Base.nextTick( me.__tick );
+                });
+    
+                // 广播上传进度。以文件为单位。
+                tr.on( 'progress', function( percentage ) {
+                    var totalPercent = 0,
+                        uploaded = 0;
+    
+                    // 可能没有abort掉，progress还是执行进来了。
+                    // if ( !file.blocks ) {
+                    //     return;
+                    // }
+    
+                    totalPercent = block.percentage = percentage;
+    
+                    if ( block.chunks > 1 ) {    // 计算文件的整体速度。
+                        $.each( file.blocks, function( _, v ) {
+                            uploaded += (v.percentage || 0) * (v.end - v.start);
+                        });
+    
+                        totalPercent = uploaded / file.size;
+                    }
+    
+                    owner.trigger( 'uploadProgress', file, totalPercent || 0 );
+                });
+    
+                // 用来询问，是否返回的结果是有错误的。
+                requestAccept = function( reject ) {
+                    var fn;
+    
+                    ret = tr.getResponseAsJson() || {};
+                    ret._raw = tr.getResponse();
+                    fn = function( value ) {
+                        reject = value;
+                    };
+    
+                    // 服务端响应了，不代表成功了，询问是否响应正确。
+                    if ( !owner.trigger( 'uploadAccept', block, ret, fn ) ) {
+                        reject = reject || 'server';
+                    }
+    
+                    return reject;
+                };
+    
+                // 尝试重试，然后广播文件上传出错。
+                tr.on( 'error', function( type, flag ) {
+                    block.retried = block.retried || 0;
+    
+                    // 自动重试
+                    if ( block.chunks > 1 && ~'http,abort'.indexOf( type ) &&
+                            block.retried < opts.chunkRetry ) {
+    
+                        block.retried++;
+                        tr.send();
+    
+                    } else {
+    
+                        // http status 500 ~ 600
+                        if ( !flag && type === 'server' ) {
+                            type = requestAccept( type );
+                        }
+    
+                        file.setStatus( Status.ERROR, type );
+                        owner.trigger( 'uploadError', file, type );
+                        owner.trigger( 'uploadComplete', file );
+                    }
+                });
+    
+                // 上传成功
+                tr.on( 'load', function() {
+                    var reason;
+    
+                    // 如果非预期，转向上传出错。
+                    if ( (reason = requestAccept()) ) {
+                        tr.trigger( 'error', reason, true );
+                        return;
+                    }
+    
+                    // 全部上传完成。
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file, ret );
+                    } else {
+                        tr.destroy();
+                    }
+                });
+    
+                // 配置默认的上传字段。
+                data = $.extend( data, {
+                    id: file.id,
+                    name: file.name,
+                    type: file.type,
+                    lastModifiedDate: file.lastModifiedDate,
+                    size: file.size
+                });
+    
+                block.chunks > 1 && $.extend( data, {
+                    chunks: block.chunks,
+                    chunk: block.chunk
+                });
+    
+                // 在发送之间可以添加字段什么的。。。
+                // 如果默认的字段不够使用，可以通过监听此事件来扩展
+                owner.trigger( 'uploadBeforeSend', block, data, headers );
+    
+                // 开始发送。
+                tr.appendBlob( opts.fileVal, block.blob, file.name );
+                tr.append( data );
+                tr.setRequestHeader( headers );
+                tr.send();
+            },
+    
+            // 完成上传。
+            _finishFile: function( file, ret, hds ) {
+                var owner = this.owner;
+    
+                return owner
+                        .request( 'after-send-file', arguments, function() {
+                            file.setStatus( Status.COMPLETE );
+                            owner.trigger( 'uploadSuccess', file, ret, hds );
+                        })
+                        .fail(function( reason ) {
+    
+                            // 如果外部已经标记为invalid什么的，不再改状态。
+                            if ( file.getStatus() === Status.PROGRESS ) {
+                                file.setStatus( Status.ERROR, reason );
+                            }
+    
+                            owner.trigger( 'uploadError', file, reason );
+                        })
+                        .always(function() {
+                            owner.trigger( 'uploadComplete', file );
+                        });
+            }
+    
+        });
+    });
+    /**
+     * @fileOverview 各种验证，包括文件总大小是否超出、单文件是否超出和文件是否重复。
+     */
+    
+    define('widgets/validator',[
+        'base',
+        'uploader',
+        'file',
+        'widgets/widget'
+    ], function( Base, Uploader, WUFile ) {
+    
+        var $ = Base.$,
+            validators = {},
+            api;
+    
+        /**
+         * @event error
+         * @param {String} type 错误类型。
+         * @description 当validate不通过时，会以派送错误事件的形式通知调用者。通过`upload.on('error', handler)`可以捕获到此类错误，目前有以下错误会在特定的情况下派送错来。
+         *
+         * * `Q_EXCEED_NUM_LIMIT` 在设置了`fileNumLimit`且尝试给`uploader`添加的文件数量超出这个值时派送。
+         * * `Q_EXCEED_SIZE_LIMIT` 在设置了`Q_EXCEED_SIZE_LIMIT`且尝试给`uploader`添加的文件总大小超出这个值时派送。
+         * @for  Uploader
+         */
+    
+        // 暴露给外面的api
+        api = {
+    
+            // 添加验证器
+            addValidator: function( type, cb ) {
+                validators[ type ] = cb;
+            },
+    
+            // 移除验证器
+            removeValidator: function( type ) {
+                delete validators[ type ];
+            }
+        };
+    
+        // 在Uploader初始化的时候启动Validators的初始化
+        Uploader.register({
+            init: function() {
+                var me = this;
+                $.each( validators, function() {
+                    this.call( me.owner );
+                });
+            }
+        });
+    
+        /**
+         * @property {int} [fileNumLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证文件总数量, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileNumLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                count = 0,
+                max = opts.fileNumLimit >> 0,
+                flag = true;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+    
+                if ( count >= max && flag ) {
+                    flag = false;
+                    this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
+                    setTimeout(function() {
+                        flag = true;
+                    }, 1 );
+                }
+    
+                return count >= max ? false : true;
+            });
+    
+            uploader.on( 'fileQueued', function() {
+                count++;
+            });
+    
+            uploader.on( 'fileDequeued', function() {
+                count--;
+            });
+    
+            uploader.on( 'uploadFinished', function() {
+                count = 0;
+            });
+        });
+    
+    
+        /**
+         * @property {int} [fileSizeLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证文件总大小是否超出限制, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileSizeLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                count = 0,
+                max = opts.fileSizeLimit >> 0,
+                flag = true;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+                var invalid = count + file.size > max;
+    
+                if ( invalid && flag ) {
+                    flag = false;
+                    this.trigger( 'error', 'Q_EXCEED_SIZE_LIMIT', max, file );
+                    setTimeout(function() {
+                        flag = true;
+                    }, 1 );
+                }
+    
+                return invalid ? false : true;
+            });
+    
+            uploader.on( 'fileQueued', function( file ) {
+                count += file.size;
+            });
+    
+            uploader.on( 'fileDequeued', function( file ) {
+                count -= file.size;
+            });
+    
+            uploader.on( 'uploadFinished', function() {
+                count = 0;
+            });
+        });
+    
+        /**
+         * @property {int} [fileSingleSizeLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证单个文件大小是否超出限制, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileSingleSizeLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                max = opts.fileSingleSizeLimit;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+    
+                if ( file.size > max ) {
+                    file.setStatus( WUFile.Status.INVALID, 'exceed_size' );
+                    this.trigger( 'error', 'F_EXCEED_SIZE', file );
+                    return false;
+                }
+    
+            });
+    
+        });
+    
+        /**
+         * @property {int} [duplicate=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
+         */
+        api.addValidator( 'duplicate', function() {
+            var uploader = this,
+                opts = uploader.options,
+                mapping = {};
+    
+            if ( opts.duplicate ) {
+                return;
+            }
+    
+            function hashString( str ) {
+                var hash = 0,
+                    i = 0,
+                    len = str.length,
+                    _char;
+    
+                for ( ; i < len; i++ ) {
+                    _char = str.charCodeAt( i );
+                    hash = _char + (hash << 6) + (hash << 16) - hash;
+                }
+    
+                return hash;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+                var hash = file.__hash || (file.__hash = hashString( file.name +
+                        file.size + file.lastModifiedDate ));
+    
+                // 已经重复了
+                if ( mapping[ hash ] ) {
+                    this.trigger( 'error', 'F_DUPLICATE', file );
+                    return false;
+                }
+            });
+    
+            uploader.on( 'fileQueued', function( file ) {
+                var hash = file.__hash;
+    
+                hash && (mapping[ hash ] = true);
+            });
+    
+            uploader.on( 'fileDequeued', function( file ) {
+                var hash = file.__hash;
+    
+                hash && (delete mapping[ hash ]);
+            });
+        });
+    
+        return api;
+    });
+    
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/compbase',[],function() {
+    
+        function CompBase( owner, runtime ) {
+    
+            this.owner = owner;
+            this.options = owner.options;
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.getRuid = function() {
+                return runtime.uid;
+            };
+    
+            this.trigger = function() {
+                return owner.trigger.apply( owner, arguments );
+            };
+        }
+    
+        return CompBase;
+    });
+    /**
+     * @fileOverview FlashRuntime
+     */
+    define('runtime/flash/runtime',[
+        'base',
+        'runtime/runtime',
+        'runtime/compbase'
+    ], function( Base, Runtime, CompBase ) {
+    
+        var $ = Base.$,
+            type = 'flash',
+            components = {};
+    
+    
+        function getFlashVersion() {
+            var version;
+    
+            try {
+                version = navigator.plugins[ 'Shockwave Flash' ];
+                version = version.description;
+            } catch ( ex ) {
+                try {
+                    version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
+                            .GetVariable('$version');
+                } catch ( ex2 ) {
+                    version = '0.0';
+                }
+            }
+            version = version.match( /\d+/g );
+            return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
+        }
+    
+        function FlashRuntime() {
+            var pool = {},
+                clients = {},
+                destory = this.destory,
+                me = this,
+                jsreciver = Base.guid('webuploader_');
+    
+            Runtime.apply( me, arguments );
+            me.type = type;
+    
+    
+            // 这个方法的调用者，实际上是RuntimeClient
+            me.exec = function( comp, fn/*, args...*/ ) {
+                var client = this,
+                    uid = client.uid,
+                    args = Base.slice( arguments, 2 ),
+                    instance;
+    
+                clients[ uid ] = client;
+    
+                if ( components[ comp ] ) {
+                    if ( !pool[ uid ] ) {
+                        pool[ uid ] = new components[ comp ]( client, me );
+                    }
+    
+                    instance = pool[ uid ];
+    
+                    if ( instance[ fn ] ) {
+                        return instance[ fn ].apply( instance, args );
+                    }
+                }
+    
+                return me.flashExec.apply( client, arguments );
+            };
+    
+            function handler( evt, obj ) {
+                var type = evt.type || evt,
+                    parts, uid;
+    
+                parts = type.split('::');
+                uid = parts[ 0 ];
+                type = parts[ 1 ];
+    
+                // console.log.apply( console, arguments );
+    
+                if ( type === 'Ready' && uid === me.uid ) {
+                    me.trigger('ready');
+                } else if ( clients[ uid ] ) {
+                    clients[ uid ].trigger( type.toLowerCase(), evt, obj );
+                }
+    
+                // Base.log( evt, obj );
+            }
+    
+            // flash的接受器。
+            window[ jsreciver ] = function() {
+                var args = arguments;
+    
+                // 为了能捕获得到。
+                setTimeout(function() {
+                    handler.apply( null, args );
+                }, 1 );
+            };
+    
+            this.jsreciver = jsreciver;
+    
+            this.destory = function() {
+                // @todo 删除池子中的所有实例
+                return destory && destory.apply( this, arguments );
+            };
+    
+            this.flashExec = function( comp, fn ) {
+                var flash = me.getFlash(),
+                    args = Base.slice( arguments, 2 );
+    
+                return flash.exec( this.uid, comp, fn, args );
+            };
+    
+            // @todo
+        }
+    
+        Base.inherits( Runtime, {
+            constructor: FlashRuntime,
+    
+            init: function() {
+                var container = this.getContainer(),
+                    opts = this.options,
+                    html;
+    
+                // if not the minimal height, shims are not initialized
+                // in older browsers (e.g FF3.6, IE6,7,8, Safari 4.0,5.0, etc)
+                container.css({
+                    position: 'absolute',
+                    top: '-8px',
+                    left: '-8px',
+                    width: '9px',
+                    height: '9px',
+                    overflow: 'hidden'
+                });
+    
+                // insert flash object
+                html = '<object id="' + this.uid + '" type="application/' +
+                        'x-shockwave-flash" data="' +  opts.swf + '" ';
+    
+                if ( Base.browser.ie ) {
+                    html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
+                }
+    
+                html += 'width="100%" height="100%" style="outline:0">'  +
+                    '<param name="movie" value="' + opts.swf + '" />' +
+                    '<param name="flashvars" value="uid=' + this.uid +
+                    '&jsreciver=' + this.jsreciver + '" />' +
+                    '<param name="wmode" value="transparent" />' +
+                    '<param name="allowscriptaccess" value="always" />' +
+                '</object>';
+    
+                container.html( html );
+            },
+    
+            getFlash: function() {
+                if ( this._flash ) {
+                    return this._flash;
+                }
+    
+                this._flash = $( '#' + this.uid ).get( 0 );
+                return this._flash;
+            }
+    
+        });
+    
+        FlashRuntime.register = function( name, component ) {
+            component = components[ name ] = Base.inherits( CompBase, $.extend({
+    
+                // @todo fix this later
+                flashExec: function() {
+                    var owner = this.owner,
+                        runtime = this.getRuntime();
+    
+                    return runtime.flashExec.apply( owner, arguments );
+                }
+            }, component ) );
+    
+            return component;
+        };
+    
+        if ( getFlashVersion() >= 11.4 ) {
+            Runtime.addRuntime( type, FlashRuntime );
+        }
+    
+        return FlashRuntime;
+    });
+    /**
+     * @fileOverview FilePicker
+     */
+    define('runtime/flash/filepicker',[
+        'base',
+        'runtime/flash/runtime'
+    ], function( Base, FlashRuntime ) {
+        var $ = Base.$;
+    
+        return FlashRuntime.register( 'FilePicker', {
+            init: function( opts ) {
+                var copy = $.extend({}, opts ),
+                    len, i;
+    
+                // 修复Flash再没有设置title的情况下无法弹出flash文件选择框的bug.
+                len = copy.accept && copy.accept.length;
+                for (  i = 0; i < len; i++ ) {
+                    if ( !copy.accept[ i ].title ) {
+                        copy.accept[ i ].title = 'Files';
+                    }
+                }
+    
+                delete copy.button;
+                delete copy.container;
+    
+                this.flashExec( 'FilePicker', 'init', copy );
+            },
+    
+            destroy: function() {
+                // todo
+            }
+        });
+    });
+    /**
+     * @fileOverview 图片压缩
+     */
+    define('runtime/flash/image',[
+        'runtime/flash/runtime'
+    ], function( FlashRuntime ) {
+    
+        return FlashRuntime.register( 'Image', {
+            // init: function( options ) {
+            //     var owner = this.owner;
+    
+            //     this.flashExec( 'Image', 'init', options );
+            //     owner.on( 'load', function() {
+            //         debugger;
+            //     });
+            // },
+    
+            loadFromBlob: function( blob ) {
+                var owner = this.owner;
+    
+                owner.info() && this.flashExec( 'Image', 'info', owner.info() );
+                owner.meta() && this.flashExec( 'Image', 'meta', owner.meta() );
+    
+                this.flashExec( 'Image', 'loadFromBlob', blob.uid );
+            }
+        });
+    });
+    /**
+     * @fileOverview  Transport flash实现
+     */
+    define('runtime/flash/transport',[
+        'base',
+        'runtime/flash/runtime',
+        'runtime/client'
+    ], function( Base, FlashRuntime, RuntimeClient ) {
+        var $ = Base.$;
+    
+        return FlashRuntime.register( 'Transport', {
+            init: function() {
+                this._status = 0;
+                this._response = null;
+                this._responseJson = null;
+            },
+    
+            send: function() {
+                var owner = this.owner,
+                    opts = this.options,
+                    xhr = this._initAjax(),
+                    blob = owner._blob,
+                    server = opts.server,
+                    binary;
+    
+                xhr.connectRuntime( blob.ruid );
+    
+                if ( opts.sendAsBinary ) {
+                    server += (/\?/.test( server ) ? '&' : '?') +
+                            $.param( owner._formData );
+    
+                    binary = blob.uid;
+                } else {
+                    $.each( owner._formData, function( k, v ) {
+                        xhr.exec( 'append', k, v );
+                    });
+    
+                    xhr.exec( 'appendBlob', opts.fileVal, blob.uid,
+                            opts.filename || owner._formData.name || '' );
+                }
+    
+                this._setRequestHeader( xhr, opts.headers );
+                xhr.exec( 'send', {
+                    method: opts.method,
+                    url: server
+                }, binary );
+            },
+    
+            getStatus: function() {
+                return this._status;
+            },
+    
+            getResponse: function() {
+                return this._response;
+            },
+    
+            getResponseAsJson: function() {
+                return this._responseJson;
+            },
+    
+            abort: function() {
+                var xhr = this._xhr;
+    
+                if ( xhr ) {
+                    xhr.exec('abort');
+                    xhr.destroy();
+                    this._xhr = xhr = null;
+                }
+            },
+    
+            destroy: function() {
+                this.abort();
+            },
+    
+            _initAjax: function() {
+                var me = this,
+                    xhr = new RuntimeClient('XMLHttpRequest');
+    
+                xhr.on( 'uploadprogress progress', function( e ) {
+                    return me.trigger( 'progress', e.loaded / e.total );
+                });
+    
+                xhr.on( 'load', function() {
+                    var status = xhr.exec('getStatus'),
+                        err = '';
+    
+                    xhr.off();
+                    me._xhr = null;
+    
+                    if ( status >= 200 && status < 300 ) {
+                        me._response = xhr.exec('getResponse');
+                        me._responseJson = xhr.exec('getResponseAsJson');
+                    } else if ( status >= 500 && status < 600 ) {
+                        me._response = xhr.exec('getResponse');
+                        me._responseJson = xhr.exec('getResponseAsJson');
+                        err = 'server';
+                    } else {
+                        err = 'http';
+                    }
+    
+                    xhr.destroy();
+                    xhr = null;
+    
+                    return err ? me.trigger( 'error', err ) : me.trigger('load');
+                });
+    
+                xhr.on( 'error', function() {
+                    xhr.off();
+                    me._xhr = null;
+                    me.trigger( 'error', 'http' );
+                });
+    
+                me._xhr = xhr;
+                return xhr;
+            },
+    
+            _setRequestHeader: function( xhr, headers ) {
+                $.each( headers, function( key, val ) {
+                    xhr.exec( 'setRequestHeader', key, val );
+                });
+            }
+        });
+    });
+    /**
+     * @fileOverview 只有flash实现的文件版本。
+     */
+    define('preset/flashonly',[
+        'base',
+    
+        // widgets
+        'widgets/filepicker',
+        'widgets/image',
+        'widgets/queue',
+        'widgets/runtime',
+        'widgets/upload',
+        'widgets/validator',
+    
+        // runtimes
+    
+        // flash
+        'runtime/flash/filepicker',
+        'runtime/flash/image',
+        'runtime/flash/transport'
+    ], function( Base ) {
+        return Base;
+    });
+    define('webuploader',[
+        'preset/flashonly'
+    ], function( preset ) {
+        return preset;
+    });
+    return require('webuploader');
+});
diff --git a/public/js/ueditor/third-party/webuploader/webuploader.html5only.js b/public/js/ueditor/third-party/webuploader/webuploader.html5only.js
new file mode 100644
index 0000000..5dd4813
--- /dev/null
+++ b/public/js/ueditor/third-party/webuploader/webuploader.html5only.js
@@ -0,0 +1,5559 @@
+/*! WebUploader 0.1.2 */
+
+
+/**
+ * @fileOverview 让内部各个部件的代码可以用[amd](https://github.com/amdjs/amdjs-api/wiki/AMD)模块定义方式组织起来。
+ *
+ * AMD API 内部的简单不完全实现，请忽略。只有当WebUploader被合并成一个文件的时候才会引入。
+ */
+(function( root, factory ) {
+    var modules = {},
+
+        // 内部require, 简单不完全实现。
+        // https://github.com/amdjs/amdjs-api/wiki/require
+        _require = function( deps, callback ) {
+            var args, len, i;
+
+            // 如果deps不是数组，则直接返回指定module
+            if ( typeof deps === 'string' ) {
+                return getModule( deps );
+            } else {
+                args = [];
+                for( len = deps.length, i = 0; i < len; i++ ) {
+                    args.push( getModule( deps[ i ] ) );
+                }
+
+                return callback.apply( null, args );
+            }
+        },
+
+        // 内部define，暂时不支持不指定id.
+        _define = function( id, deps, factory ) {
+            if ( arguments.length === 2 ) {
+                factory = deps;
+                deps = null;
+            }
+
+            _require( deps || [], function() {
+                setModule( id, factory, arguments );
+            });
+        },
+
+        // 设置module, 兼容CommonJs写法。
+        setModule = function( id, factory, args ) {
+            var module = {
+                    exports: factory
+                },
+                returned;
+
+            if ( typeof factory === 'function' ) {
+                args.length || (args = [ _require, module.exports, module ]);
+                returned = factory.apply( null, args );
+                returned !== undefined && (module.exports = returned);
+            }
+
+            modules[ id ] = module.exports;
+        },
+
+        // 根据id获取module
+        getModule = function( id ) {
+            var module = modules[ id ] || root[ id ];
+
+            if ( !module ) {
+                throw new Error( '`' + id + '` is undefined' );
+            }
+
+            return module;
+        },
+
+        // 将所有modules，将路径ids装换成对象。
+        exportsTo = function( obj ) {
+            var key, host, parts, part, last, ucFirst;
+
+            // make the first character upper case.
+            ucFirst = function( str ) {
+                return str && (str.charAt( 0 ).toUpperCase() + str.substr( 1 ));
+            };
+
+            for ( key in modules ) {
+                host = obj;
+
+                if ( !modules.hasOwnProperty( key ) ) {
+                    continue;
+                }
+
+                parts = key.split('/');
+                last = ucFirst( parts.pop() );
+
+                while( (part = ucFirst( parts.shift() )) ) {
+                    host[ part ] = host[ part ] || {};
+                    host = host[ part ];
+                }
+
+                host[ last ] = modules[ key ];
+            }
+        },
+
+        exports = factory( root, _define, _require ),
+        origin;
+
+    // exports every module.
+    exportsTo( exports );
+
+    if ( typeof module === 'object' && typeof module.exports === 'object' ) {
+
+        // For CommonJS and CommonJS-like environments where a proper window is present,
+        module.exports = exports;
+    } else if ( typeof define === 'function' && define.amd ) {
+
+        // Allow using this built library as an AMD module
+        // in another project. That other project will only
+        // see this AMD call, not the internal modules in
+        // the closure below.
+        define([], exports );
+    } else {
+
+        // Browser globals case. Just assign the
+        // result to a property on the global.
+        origin = root.WebUploader;
+        root.WebUploader = exports;
+        root.WebUploader.noConflict = function() {
+            root.WebUploader = origin;
+        };
+    }
+})( this, function( window, define, require ) {
+
+
+    /**
+     * @fileOverview jQuery or Zepto
+     */
+    define('dollar-third',[],function() {
+        return window.jQuery || window.Zepto;
+    });
+    /**
+     * @fileOverview Dom 操作相关
+     */
+    define('dollar',[
+        'dollar-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 使用jQuery的Promise
+     */
+    define('promise-third',[
+        'dollar'
+    ], function( $ ) {
+        return {
+            Deferred: $.Deferred,
+            when: $.when,
+    
+            isPromise: function( anything ) {
+                return anything && typeof anything.then === 'function';
+            }
+        };
+    });
+    /**
+     * @fileOverview Promise/A+
+     */
+    define('promise',[
+        'promise-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 基础类方法。
+     */
+    
+    /**
+     * Web Uploader内部类的详细说明，以下提及的功能类，都可以在`WebUploader`这个变量中访问到。
+     *
+     * As you know, Web Uploader的每个文件都是用过[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)规范中的`define`组织起来的, 每个Module都会有个module id.
+     * 默认module id该文件的路径，而此路径将会转化成名字空间存放在WebUploader中。如：
+     *
+     * * module `base`：WebUploader.Base
+     * * module `file`: WebUploader.File
+     * * module `lib/dnd`: WebUploader.Lib.Dnd
+     * * module `runtime/html5/dnd`: WebUploader.Runtime.Html5.Dnd
+     *
+     *
+     * 以下文档将可能省略`WebUploader`前缀。
+     * @module WebUploader
+     * @title WebUploader API文档
+     */
+    define('base',[
+        'dollar',
+        'promise'
+    ], function( $, promise ) {
+    
+        var noop = function() {},
+            call = Function.call;
+    
+        // http://jsperf.com/uncurrythis
+        // 反科里化
+        function uncurryThis( fn ) {
+            return function() {
+                return call.apply( fn, arguments );
+            };
+        }
+    
+        function bindFn( fn, context ) {
+            return function() {
+                return fn.apply( context, arguments );
+            };
+        }
+    
+        function createObject( proto ) {
+            var f;
+    
+            if ( Object.create ) {
+                return Object.create( proto );
+            } else {
+                f = function() {};
+                f.prototype = proto;
+                return new f();
+            }
+        }
+    
+    
+        /**
+         * 基础类，提供一些简单常用的方法。
+         * @class Base
+         */
+        return {
+    
+            /**
+             * @property {String} version 当前版本号。
+             */
+            version: '0.1.2',
+    
+            /**
+             * @property {jQuery|Zepto} $ 引用依赖的jQuery或者Zepto对象。
+             */
+            $: $,
+    
+            Deferred: promise.Deferred,
+    
+            isPromise: promise.isPromise,
+    
+            when: promise.when,
+    
+            /**
+             * @description  简单的浏览器检查结果。
+             *
+             * * `webkit`  webkit版本号，如果浏览器为非webkit内核，此属性为`undefined`。
+             * * `chrome`  chrome浏览器版本号，如果浏览器为chrome，此属性为`undefined`。
+             * * `ie`  ie浏览器版本号，如果浏览器为非ie，此属性为`undefined`。**暂不支持ie10+**
+             * * `firefox`  firefox浏览器版本号，如果浏览器为非firefox，此属性为`undefined`。
+             * * `safari`  safari浏览器版本号，如果浏览器为非safari，此属性为`undefined`。
+             * * `opera`  opera浏览器版本号，如果浏览器为非opera，此属性为`undefined`。
+             *
+             * @property {Object} [browser]
+             */
+            browser: (function( ua ) {
+                var ret = {},
+                    webkit = ua.match( /WebKit\/([\d.]+)/ ),
+                    chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
+                        ua.match( /CriOS\/([\d.]+)/ ),
+    
+                    ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
+                        ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i),
+                    firefox = ua.match( /Firefox\/([\d.]+)/ ),
+                    safari = ua.match( /Safari\/([\d.]+)/ ),
+                    opera = ua.match( /OPR\/([\d.]+)/ );
+    
+                webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
+                chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
+                ie && (ret.ie = parseFloat( ie[ 1 ] ));
+                firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
+                safari && (ret.safari = parseFloat( safari[ 1 ] ));
+                opera && (ret.opera = parseFloat( opera[ 1 ] ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * @description  操作系统检查结果。
+             *
+             * * `android`  如果在android浏览器环境下，此值为对应的android版本号，否则为`undefined`。
+             * * `ios` 如果在ios浏览器环境下，此值为对应的ios版本号，否则为`undefined`。
+             * @property {Object} [os]
+             */
+            os: (function( ua ) {
+                var ret = {},
+    
+                    // osx = !!ua.match( /\(Macintosh\; Intel / ),
+                    android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
+                    ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );
+    
+                // osx && (ret.osx = true);
+                android && (ret.android = parseFloat( android[ 1 ] ));
+                ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * 实现类与类之间的继承。
+             * @method inherits
+             * @grammar Base.inherits( super ) => child
+             * @grammar Base.inherits( super, protos ) => child
+             * @grammar Base.inherits( super, protos, statics ) => child
+             * @param  {Class} super 父类
+             * @param  {Object | Function} [protos] 子类或者对象。如果对象中包含constructor，子类将是用此属性值。
+             * @param  {Function} [protos.constructor] 子类构造器，不指定的话将创建个临时的直接执行父类构造器的方法。
+             * @param  {Object} [statics] 静态属性或方法。
+             * @return {Class} 返回子类。
+             * @example
+             * function Person() {
+             *     console.log( 'Super' );
+             * }
+             * Person.prototype.hello = function() {
+             *     console.log( 'hello' );
+             * };
+             *
+             * var Manager = Base.inherits( Person, {
+             *     world: function() {
+             *         console.log( 'World' );
+             *     }
+             * });
+             *
+             * // 因为没有指定构造器，父类的构造器将会执行。
+             * var instance = new Manager();    // => Super
+             *
+             * // 继承子父类的方法
+             * instance.hello();    // => hello
+             * instance.world();    // => World
+             *
+             * // 子类的__super__属性指向父类
+             * console.log( Manager.__super__ === Person );    // => true
+             */
+            inherits: function( Super, protos, staticProtos ) {
+                var child;
+    
+                if ( typeof protos === 'function' ) {
+                    child = protos;
+                    protos = null;
+                } else if ( protos && protos.hasOwnProperty('constructor') ) {
+                    child = protos.constructor;
+                } else {
+                    child = function() {
+                        return Super.apply( this, arguments );
+                    };
+                }
+    
+                // 复制静态方法
+                $.extend( true, child, Super, staticProtos || {} );
+    
+                /* jshint camelcase: false */
+    
+                // 让子类的__super__属性指向父类。
+                child.__super__ = Super.prototype;
+    
+                // 构建原型，添加原型方法或属性。
+                // 暂时用Object.create实现。
+                child.prototype = createObject( Super.prototype );
+                protos && $.extend( true, child.prototype, protos );
+    
+                return child;
+            },
+    
+            /**
+             * 一个不做任何事情的方法。可以用来赋值给默认的callback.
+             * @method noop
+             */
+            noop: noop,
+    
+            /**
+             * 返回一个新的方法，此方法将已指定的`context`来执行。
+             * @grammar Base.bindFn( fn, context ) => Function
+             * @method bindFn
+             * @example
+             * var doSomething = function() {
+             *         console.log( this.name );
+             *     },
+             *     obj = {
+             *         name: 'Object Name'
+             *     },
+             *     aliasFn = Base.bind( doSomething, obj );
+             *
+             *  aliasFn();    // => Object Name
+             *
+             */
+            bindFn: bindFn,
+    
+            /**
+             * 引用Console.log如果存在的话，否则引用一个[空函数loop](#WebUploader:Base.log)。
+             * @grammar Base.log( args... ) => undefined
+             * @method log
+             */
+            log: (function() {
+                if ( window.console ) {
+                    return bindFn( console.log, console );
+                }
+                return noop;
+            })(),
+    
+            nextTick: (function() {
+    
+                return function( cb ) {
+                    setTimeout( cb, 1 );
+                };
+    
+                // @bug 当浏览器不在当前窗口时就停了。
+                // var next = window.requestAnimationFrame ||
+                //     window.webkitRequestAnimationFrame ||
+                //     window.mozRequestAnimationFrame ||
+                //     function( cb ) {
+                //         window.setTimeout( cb, 1000 / 60 );
+                //     };
+    
+                // // fix: Uncaught TypeError: Illegal invocation
+                // return bindFn( next, window );
+            })(),
+    
+            /**
+             * 被[uncurrythis](http://www.2ality.com/2011/11/uncurrying-this.html)的数组slice方法。
+             * 将用来将非数组对象转化成数组对象。
+             * @grammar Base.slice( target, start[, end] ) => Array
+             * @method slice
+             * @example
+             * function doSomthing() {
+             *     var args = Base.slice( arguments, 1 );
+             *     console.log( args );
+             * }
+             *
+             * doSomthing( 'ignored', 'arg2', 'arg3' );    // => Array ["arg2", "arg3"]
+             */
+            slice: uncurryThis( [].slice ),
+    
+            /**
+             * 生成唯一的ID
+             * @method guid
+             * @grammar Base.guid() => String
+             * @grammar Base.guid( prefx ) => String
+             */
+            guid: (function() {
+                var counter = 0;
+    
+                return function( prefix ) {
+                    var guid = (+new Date()).toString( 32 ),
+                        i = 0;
+    
+                    for ( ; i < 5; i++ ) {
+                        guid += Math.floor( Math.random() * 65535 ).toString( 32 );
+                    }
+    
+                    return (prefix || 'wu_') + guid + (counter++).toString( 32 );
+                };
+            })(),
+    
+            /**
+             * 格式化文件大小, 输出成带单位的字符串
+             * @method formatSize
+             * @grammar Base.formatSize( size ) => String
+             * @grammar Base.formatSize( size, pointLength ) => String
+             * @grammar Base.formatSize( size, pointLength, units ) => String
+             * @param {Number} size 文件大小
+             * @param {Number} [pointLength=2] 精确到的小数点数。
+             * @param {Array} [units=[ 'B', 'K', 'M', 'G', 'TB' ]] 单位数组。从字节，到千字节，一直往上指定。如果单位数组里面只指定了到了K(千字节)，同时文件大小大于M, 此方法的输出将还是显示成多少K.
+             * @example
+             * console.log( Base.formatSize( 100 ) );    // => 100B
+             * console.log( Base.formatSize( 1024 ) );    // => 1.00K
+             * console.log( Base.formatSize( 1024, 0 ) );    // => 1K
+             * console.log( Base.formatSize( 1024 * 1024 ) );    // => 1.00M
+             * console.log( Base.formatSize( 1024 * 1024 * 1024 ) );    // => 1.00G
+             * console.log( Base.formatSize( 1024 * 1024 * 1024, 0, ['B', 'KB', 'MB'] ) );    // => 1024MB
+             */
+            formatSize: function( size, pointLength, units ) {
+                var unit;
+    
+                units = units || [ 'B', 'K', 'M', 'G', 'TB' ];
+    
+                while ( (unit = units.shift()) && size > 1024 ) {
+                    size = size / 1024;
+                }
+    
+                return (unit === 'B' ? size : size.toFixed( pointLength || 2 )) +
+                        unit;
+            }
+        };
+    });
+    /**
+     * 事件处理类，可以独立使用，也可以扩展给对象使用。
+     * @fileOverview Mediator
+     */
+    define('mediator',[
+        'base'
+    ], function( Base ) {
+        var $ = Base.$,
+            slice = [].slice,
+            separator = /\s+/,
+            protos;
+    
+        // 根据条件过滤出事件handlers.
+        function findHandlers( arr, name, callback, context ) {
+            return $.grep( arr, function( handler ) {
+                return handler &&
+                        (!name || handler.e === name) &&
+                        (!callback || handler.cb === callback ||
+                        handler.cb._cb === callback) &&
+                        (!context || handler.ctx === context);
+            });
+        }
+    
+        function eachEvent( events, callback, iterator ) {
+            // 不支持对象，只支持多个event用空格隔开
+            $.each( (events || '').split( separator ), function( _, key ) {
+                iterator( key, callback );
+            });
+        }
+    
+        function triggerHanders( events, args ) {
+            var stoped = false,
+                i = -1,
+                len = events.length,
+                handler;
+    
+            while ( ++i < len ) {
+                handler = events[ i ];
+    
+                if ( handler.cb.apply( handler.ctx2, args ) === false ) {
+                    stoped = true;
+                    break;
+                }
+            }
+    
+            return !stoped;
+        }
+    
+        protos = {
+    
+            /**
+             * 绑定事件。
+             *
+             * `callback`方法在执行时，arguments将会来源于trigger的时候携带的参数。如
+             * ```javascript
+             * var obj = {};
+             *
+             * // 使得obj有事件行为
+             * Mediator.installTo( obj );
+             *
+             * obj.on( 'testa', function( arg1, arg2 ) {
+             *     console.log( arg1, arg2 ); // => 'arg1', 'arg2'
+             * });
+             *
+             * obj.trigger( 'testa', 'arg1', 'arg2' );
+             * ```
+             *
+             * 如果`callback`中，某一个方法`return false`了，则后续的其他`callback`都不会被执行到。
+             * 切会影响到`trigger`方法的返回值，为`false`。
+             *
+             * `on`还可以用来添加一个特殊事件`all`, 这样所有的事件触发都会响应到。同时此类`callback`中的arguments有一个不同处，
+             * 就是第一个参数为`type`，记录当前是什么事件在触发。此类`callback`的优先级比脚低，会再正常`callback`执行完后触发。
+             * ```javascript
+             * obj.on( 'all', function( type, arg1, arg2 ) {
+             *     console.log( type, arg1, arg2 ); // => 'testa', 'arg1', 'arg2'
+             * });
+             * ```
+             *
+             * @method on
+             * @grammar on( name, callback[, context] ) => self
+             * @param  {String}   name     事件名，支持多个事件用空格隔开
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             * @class Mediator
+             */
+            on: function( name, callback, context ) {
+                var me = this,
+                    set;
+    
+                if ( !callback ) {
+                    return this;
+                }
+    
+                set = this._events || (this._events = []);
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var handler = { e: name };
+    
+                    handler.cb = callback;
+                    handler.ctx = context;
+                    handler.ctx2 = context || me;
+                    handler.id = set.length;
+    
+                    set.push( handler );
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 绑定事件，且当handler执行完后，自动解除绑定。
+             * @method once
+             * @grammar once( name, callback[, context] ) => self
+             * @param  {String}   name     事件名
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            once: function( name, callback, context ) {
+                var me = this;
+    
+                if ( !callback ) {
+                    return me;
+                }
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var once = function() {
+                            me.off( name, once );
+                            return callback.apply( context || me, arguments );
+                        };
+    
+                    once._cb = callback;
+                    me.on( name, once, context );
+                });
+    
+                return me;
+            },
+    
+            /**
+             * 解除事件绑定
+             * @method off
+             * @grammar off( [name[, callback[, context] ] ] ) => self
+             * @param  {String}   [name]     事件名
+             * @param  {Function} [callback] 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            off: function( name, cb, ctx ) {
+                var events = this._events;
+    
+                if ( !events ) {
+                    return this;
+                }
+    
+                if ( !name && !cb && !ctx ) {
+                    this._events = [];
+                    return this;
+                }
+    
+                eachEvent( name, cb, function( name, cb ) {
+                    $.each( findHandlers( events, name, cb, ctx ), function() {
+                        delete events[ this.id ];
+                    });
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 触发事件
+             * @method trigger
+             * @grammar trigger( name[, args...] ) => self
+             * @param  {String}   type     事件名
+             * @param  {*} [...] 任意参数
+             * @return {Boolean} 如果handler中return false了，则返回false, 否则返回true
+             */
+            trigger: function( type ) {
+                var args, events, allEvents;
+    
+                if ( !this._events || !type ) {
+                    return this;
+                }
+    
+                args = slice.call( arguments, 1 );
+                events = findHandlers( this._events, type );
+                allEvents = findHandlers( this._events, 'all' );
+    
+                return triggerHanders( events, args ) &&
+                        triggerHanders( allEvents, arguments );
+            }
+        };
+    
+        /**
+         * 中介者，它本身是个单例，但可以通过[installTo](#WebUploader:Mediator:installTo)方法，使任何对象具备事件行为。
+         * 主要目的是负责模块与模块之间的合作，降低耦合度。
+         *
+         * @class Mediator
+         */
+        return $.extend({
+    
+            /**
+             * 可以通过这个接口，使任何对象具备事件功能。
+             * @method installTo
+             * @param  {Object} obj 需要具备事件行为的对象。
+             * @return {Object} 返回obj.
+             */
+            installTo: function( obj ) {
+                return $.extend( obj, protos );
+            }
+    
+        }, protos );
+    });
+    /**
+     * @fileOverview Uploader上传类
+     */
+    define('uploader',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$;
+    
+        /**
+         * 上传入口类。
+         * @class Uploader
+         * @constructor
+         * @grammar new Uploader( opts ) => Uploader
+         * @example
+         * var uploader = WebUploader.Uploader({
+         *     swf: 'path_of_swf/Uploader.swf',
+         *
+         *     // 开起分片上传。
+         *     chunked: true
+         * });
+         */
+        function Uploader( opts ) {
+            this.options = $.extend( true, {}, Uploader.options, opts );
+            this._init( this.options );
+        }
+    
+        // default Options
+        // widgets中有相应扩展
+        Uploader.options = {};
+        Mediator.installTo( Uploader.prototype );
+    
+        // 批量添加纯命令式方法。
+        $.each({
+            upload: 'start-upload',
+            stop: 'stop-upload',
+            getFile: 'get-file',
+            getFiles: 'get-files',
+            addFile: 'add-file',
+            addFiles: 'add-file',
+            sort: 'sort-files',
+            removeFile: 'remove-file',
+            skipFile: 'skip-file',
+            retry: 'retry',
+            isInProgress: 'is-in-progress',
+            makeThumb: 'make-thumb',
+            getDimension: 'get-dimension',
+            addButton: 'add-btn',
+            getRuntimeType: 'get-runtime-type',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable',
+            reset: 'reset'
+        }, function( fn, command ) {
+            Uploader.prototype[ fn ] = function() {
+                return this.request( command, arguments );
+            };
+        });
+    
+        $.extend( Uploader.prototype, {
+            state: 'pending',
+    
+            _init: function( opts ) {
+                var me = this;
+    
+                me.request( 'init', opts, function() {
+                    me.state = 'ready';
+                    me.trigger('ready');
+                });
+            },
+    
+            /**
+             * 获取或者设置Uploader配置项。
+             * @method option
+             * @grammar option( key ) => *
+             * @grammar option( key, val ) => self
+             * @example
+             *
+             * // 初始状态图片上传前不会压缩
+             * var uploader = new WebUploader.Uploader({
+             *     resize: null;
+             * });
+             *
+             * // 修改后图片上传前，尝试将图片压缩到1600 * 1600
+             * uploader.options( 'resize', {
+             *     width: 1600,
+             *     height: 1600
+             * });
+             */
+            option: function( key, val ) {
+                var opts = this.options;
+    
+                // setter
+                if ( arguments.length > 1 ) {
+    
+                    if ( $.isPlainObject( val ) &&
+                            $.isPlainObject( opts[ key ] ) ) {
+                        $.extend( opts[ key ], val );
+                    } else {
+                        opts[ key ] = val;
+                    }
+    
+                } else {    // getter
+                    return key ? opts[ key ] : opts;
+                }
+            },
+    
+            /**
+             * 获取文件统计信息。返回一个包含一下信息的对象。
+             * * `successNum` 上传成功的文件数
+             * * `uploadFailNum` 上传失败的文件数
+             * * `cancelNum` 被删除的文件数
+             * * `invalidNum` 无效的文件数
+             * * `queueNum` 还在队列中的文件数
+             * @method getStats
+             * @grammar getStats() => Object
+             */
+            getStats: function() {
+                // return this._mgr.getStats.apply( this._mgr, arguments );
+                var stats = this.request('get-stats');
+    
+                return {
+                    successNum: stats.numOfSuccess,
+    
+                    // who care?
+                    // queueFailNum: 0,
+                    cancelNum: stats.numOfCancel,
+                    invalidNum: stats.numOfInvalid,
+                    uploadFailNum: stats.numOfUploadFailed,
+                    queueNum: stats.numOfQueue
+                };
+            },
+    
+            // 需要重写此方法来来支持opts.onEvent和instance.onEvent的处理器
+            trigger: function( type/*, args...*/ ) {
+                var args = [].slice.call( arguments, 1 ),
+                    opts = this.options,
+                    name = 'on' + type.substring( 0, 1 ).toUpperCase() +
+                        type.substring( 1 );
+    
+                if (
+                        // 调用通过on方法注册的handler.
+                        Mediator.trigger.apply( this, arguments ) === false ||
+    
+                        // 调用opts.onEvent
+                        $.isFunction( opts[ name ] ) &&
+                        opts[ name ].apply( this, args ) === false ||
+    
+                        // 调用this.onEvent
+                        $.isFunction( this[ name ] ) &&
+                        this[ name ].apply( this, args ) === false ||
+    
+                        // 广播所有uploader的事件。
+                        Mediator.trigger.apply( Mediator,
+                        [ this, type ].concat( args ) ) === false ) {
+    
+                    return false;
+                }
+    
+                return true;
+            },
+    
+            // widgets/widget.js将补充此方法的详细文档。
+            request: Base.noop
+        });
+    
+        /**
+         * 创建Uploader实例，等同于new Uploader( opts );
+         * @method create
+         * @class Base
+         * @static
+         * @grammar Base.create( opts ) => Uploader
+         */
+        Base.create = Uploader.create = function( opts ) {
+            return new Uploader( opts );
+        };
+    
+        // 暴露Uploader，可以通过它来扩展业务逻辑。
+        Base.Uploader = Uploader;
+    
+        return Uploader;
+    });
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/runtime',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            factories = {},
+    
+            // 获取对象的第一个key
+            getFirstKey = function( obj ) {
+                for ( var key in obj ) {
+                    if ( obj.hasOwnProperty( key ) ) {
+                        return key;
+                    }
+                }
+                return null;
+            };
+    
+        // 接口类。
+        function Runtime( options ) {
+            this.options = $.extend({
+                container: document.body
+            }, options );
+            this.uid = Base.guid('rt_');
+        }
+    
+        $.extend( Runtime.prototype, {
+    
+            getContainer: function() {
+                var opts = this.options,
+                    parent, container;
+    
+                if ( this._container ) {
+                    return this._container;
+                }
+    
+                parent = $( opts.container || document.body );
+                container = $( document.createElement('div') );
+    
+                container.attr( 'id', 'rt_' + this.uid );
+                container.css({
+                    position: 'absolute',
+                    top: '0px',
+                    left: '0px',
+                    width: '1px',
+                    height: '1px',
+                    overflow: 'hidden'
+                });
+    
+                parent.append( container );
+                parent.addClass('webuploader-container');
+                this._container = container;
+                return container;
+            },
+    
+            init: Base.noop,
+            exec: Base.noop,
+    
+            destroy: function() {
+                if ( this._container ) {
+                    this._container.parentNode.removeChild( this.__container );
+                }
+    
+                this.off();
+            }
+        });
+    
+        Runtime.orders = 'html5,flash';
+    
+    
+        /**
+         * 添加Runtime实现。
+         * @param {String} type    类型
+         * @param {Runtime} factory 具体Runtime实现。
+         */
+        Runtime.addRuntime = function( type, factory ) {
+            factories[ type ] = factory;
+        };
+    
+        Runtime.hasRuntime = function( type ) {
+            return !!(type ? factories[ type ] : getFirstKey( factories ));
+        };
+    
+        Runtime.create = function( opts, orders ) {
+            var type, runtime;
+    
+            orders = orders || Runtime.orders;
+            $.each( orders.split( /\s*,\s*/g ), function() {
+                if ( factories[ this ] ) {
+                    type = this;
+                    return false;
+                }
+            });
+    
+            type = type || getFirstKey( factories );
+    
+            if ( !type ) {
+                throw new Error('Runtime Error');
+            }
+    
+            runtime = new factories[ type ]( opts );
+            return runtime;
+        };
+    
+        Mediator.installTo( Runtime.prototype );
+        return Runtime;
+    });
+    
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/client',[
+        'base',
+        'mediator',
+        'runtime/runtime'
+    ], function( Base, Mediator, Runtime ) {
+    
+        var cache;
+    
+        cache = (function() {
+            var obj = {};
+    
+            return {
+                add: function( runtime ) {
+                    obj[ runtime.uid ] = runtime;
+                },
+    
+                get: function( ruid, standalone ) {
+                    var i;
+    
+                    if ( ruid ) {
+                        return obj[ ruid ];
+                    }
+    
+                    for ( i in obj ) {
+                        // 有些类型不能重用，比如filepicker.
+                        if ( standalone && obj[ i ].__standalone ) {
+                            continue;
+                        }
+    
+                        return obj[ i ];
+                    }
+    
+                    return null;
+                },
+    
+                remove: function( runtime ) {
+                    delete obj[ runtime.uid ];
+                }
+            };
+        })();
+    
+        function RuntimeClient( component, standalone ) {
+            var deferred = Base.Deferred(),
+                runtime;
+    
+            this.uid = Base.guid('client_');
+    
+            // 允许runtime没有初始化之前，注册一些方法在初始化后执行。
+            this.runtimeReady = function( cb ) {
+                return deferred.done( cb );
+            };
+    
+            this.connectRuntime = function( opts, cb ) {
+    
+                // already connected.
+                if ( runtime ) {
+                    throw new Error('already connected!');
+                }
+    
+                deferred.done( cb );
+    
+                if ( typeof opts === 'string' && cache.get( opts ) ) {
+                    runtime = cache.get( opts );
+                }
+    
+                // 像filePicker只能独立存在，不能公用。
+                runtime = runtime || cache.get( null, standalone );
+    
+                // 需要创建
+                if ( !runtime ) {
+                    runtime = Runtime.create( opts, opts.runtimeOrder );
+                    runtime.__promise = deferred.promise();
+                    runtime.once( 'ready', deferred.resolve );
+                    runtime.init();
+                    cache.add( runtime );
+                    runtime.__client = 1;
+                } else {
+                    // 来自cache
+                    Base.$.extend( runtime.options, opts );
+                    runtime.__promise.then( deferred.resolve );
+                    runtime.__client++;
+                }
+    
+                standalone && (runtime.__standalone = standalone);
+                return runtime;
+            };
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.disconnectRuntime = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                runtime.__client--;
+    
+                if ( runtime.__client <= 0 ) {
+                    cache.remove( runtime );
+                    delete runtime.__promise;
+                    runtime.destroy();
+                }
+    
+                runtime = null;
+            };
+    
+            this.exec = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                var args = Base.slice( arguments );
+                component && args.unshift( component );
+    
+                return runtime.exec.apply( this, args );
+            };
+    
+            this.getRuid = function() {
+                return runtime && runtime.uid;
+            };
+    
+            this.destroy = (function( destroy ) {
+                return function() {
+                    destroy && destroy.apply( this, arguments );
+                    this.trigger('destroy');
+                    this.off();
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                };
+            })( this.destroy );
+        }
+    
+        Mediator.installTo( RuntimeClient.prototype );
+        return RuntimeClient;
+    });
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/dnd',[
+        'base',
+        'mediator',
+        'runtime/client'
+    ], function( Base, Mediator, RuntimeClent ) {
+    
+        var $ = Base.$;
+    
+        function DragAndDrop( opts ) {
+            opts = this.options = $.extend({}, DragAndDrop.options, opts );
+    
+            opts.container = $( opts.container );
+    
+            if ( !opts.container.length ) {
+                return;
+            }
+    
+            RuntimeClent.call( this, 'DragAndDrop' );
+        }
+    
+        DragAndDrop.options = {
+            accept: null,
+            disableGlobalDnd: false
+        };
+    
+        Base.inherits( RuntimeClent, {
+            constructor: DragAndDrop,
+    
+            init: function() {
+                var me = this;
+    
+                me.connectRuntime( me.options, function() {
+                    me.exec('init');
+                    me.trigger('ready');
+                });
+            },
+    
+            destroy: function() {
+                this.disconnectRuntime();
+            }
+        });
+    
+        Mediator.installTo( DragAndDrop.prototype );
+    
+        return DragAndDrop;
+    });
+    /**
+     * @fileOverview 组件基类。
+     */
+    define('widgets/widget',[
+        'base',
+        'uploader'
+    ], function( Base, Uploader ) {
+    
+        var $ = Base.$,
+            _init = Uploader.prototype._init,
+            IGNORE = {},
+            widgetClass = [];
+    
+        function isArrayLike( obj ) {
+            if ( !obj ) {
+                return false;
+            }
+    
+            var length = obj.length,
+                type = $.type( obj );
+    
+            if ( obj.nodeType === 1 && length ) {
+                return true;
+            }
+    
+            return type === 'array' || type !== 'function' && type !== 'string' &&
+                    (length === 0 || typeof length === 'number' && length > 0 &&
+                    (length - 1) in obj);
+        }
+    
+        function Widget( uploader ) {
+            this.owner = uploader;
+            this.options = uploader.options;
+        }
+    
+        $.extend( Widget.prototype, {
+    
+            init: Base.noop,
+    
+            // 类Backbone的事件监听声明，监听uploader实例上的事件
+            // widget直接无法监听事件，事件只能通过uploader来传递
+            invoke: function( apiName, args ) {
+    
+                /*
+                    {
+                        'make-thumb': 'makeThumb'
+                    }
+                 */
+                var map = this.responseMap;
+    
+                // 如果无API响应声明则忽略
+                if ( !map || !(apiName in map) || !(map[ apiName ] in this) ||
+                        !$.isFunction( this[ map[ apiName ] ] ) ) {
+    
+                    return IGNORE;
+                }
+    
+                return this[ map[ apiName ] ].apply( this, args );
+    
+            },
+    
+            /**
+             * 发送命令。当传入`callback`或者`handler`中返回`promise`时。返回一个当所有`handler`中的promise都完成后完成的新`promise`。
+             * @method request
+             * @grammar request( command, args ) => * | Promise
+             * @grammar request( command, args, callback ) => Promise
+             * @for  Uploader
+             */
+            request: function() {
+                return this.owner.request.apply( this.owner, arguments );
+            }
+        });
+    
+        // 扩展Uploader.
+        $.extend( Uploader.prototype, {
+    
+            // 覆写_init用来初始化widgets
+            _init: function() {
+                var me = this,
+                    widgets = me._widgets = [];
+    
+                $.each( widgetClass, function( _, klass ) {
+                    widgets.push( new klass( me ) );
+                });
+    
+                return _init.apply( me, arguments );
+            },
+    
+            request: function( apiName, args, callback ) {
+                var i = 0,
+                    widgets = this._widgets,
+                    len = widgets.length,
+                    rlts = [],
+                    dfds = [],
+                    widget, rlt, promise, key;
+    
+                args = isArrayLike( args ) ? args : [ args ];
+    
+                for ( ; i < len; i++ ) {
+                    widget = widgets[ i ];
+                    rlt = widget.invoke( apiName, args );
+    
+                    if ( rlt !== IGNORE ) {
+    
+                        // Deferred对象
+                        if ( Base.isPromise( rlt ) ) {
+                            dfds.push( rlt );
+                        } else {
+                            rlts.push( rlt );
+                        }
+                    }
+                }
+    
+                // 如果有callback，则用异步方式。
+                if ( callback || dfds.length ) {
+                    promise = Base.when.apply( Base, dfds );
+                    key = promise.pipe ? 'pipe' : 'then';
+    
+                    // 很重要不能删除。删除了会死循环。
+                    // 保证执行顺序。让callback总是在下一个tick中执行。
+                    return promise[ key ](function() {
+                                var deferred = Base.Deferred(),
+                                    args = arguments;
+    
+                                setTimeout(function() {
+                                    deferred.resolve.apply( deferred, args );
+                                }, 1 );
+    
+                                return deferred.promise();
+                            })[ key ]( callback || Base.noop );
+                } else {
+                    return rlts[ 0 ];
+                }
+            }
+        });
+    
+        /**
+         * 添加组件
+         * @param  {object} widgetProto 组件原型，构造函数通过constructor属性定义
+         * @param  {object} responseMap API名称与函数实现的映射
+         * @example
+         *     Uploader.register( {
+         *         init: function( options ) {},
+         *         makeThumb: function() {}
+         *     }, {
+         *         'make-thumb': 'makeThumb'
+         *     } );
+         */
+        Uploader.register = Widget.register = function( responseMap, widgetProto ) {
+            var map = { init: 'init' },
+                klass;
+    
+            if ( arguments.length === 1 ) {
+                widgetProto = responseMap;
+                widgetProto.responseMap = map;
+            } else {
+                widgetProto.responseMap = $.extend( map, responseMap );
+            }
+    
+            klass = Base.inherits( Widget, widgetProto );
+            widgetClass.push( klass );
+    
+            return klass;
+        };
+    
+        return Widget;
+    });
+    /**
+     * @fileOverview DragAndDrop Widget。
+     */
+    define('widgets/filednd',[
+        'base',
+        'uploader',
+        'lib/dnd',
+        'widgets/widget'
+    ], function( Base, Uploader, Dnd ) {
+        var $ = Base.$;
+    
+        Uploader.options.dnd = '';
+    
+        /**
+         * @property {Selector} [dnd=undefined]  指定Drag And Drop拖拽的容器，如果不指定，则不启动。
+         * @namespace options
+         * @for Uploader
+         */
+    
+        /**
+         * @event dndAccept
+         * @param {DataTransferItemList} items DataTransferItem
+         * @description 阻止此事件可以拒绝某些类型的文件拖入进来。目前只有 chrome 提供这样的 API，且只能通过 mime-type 验证。
+         * @for  Uploader
+         */
+        return Uploader.register({
+            init: function( opts ) {
+    
+                if ( !opts.dnd ||
+                        this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                var me = this,
+                    deferred = Base.Deferred(),
+                    options = $.extend({}, {
+                        disableGlobalDnd: opts.disableGlobalDnd,
+                        container: opts.dnd,
+                        accept: opts.accept
+                    }),
+                    dnd;
+    
+                dnd = new Dnd( options );
+    
+                dnd.once( 'ready', deferred.resolve );
+                dnd.on( 'drop', function( files ) {
+                    me.request( 'add-file', [ files ]);
+                });
+    
+                // 检测文件是否全部允许添加。
+                dnd.on( 'accept', function( items ) {
+                    return me.owner.trigger( 'dndAccept', items );
+                });
+    
+                dnd.init();
+    
+                return deferred.promise();
+            }
+        });
+    });
+    
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/filepaste',[
+        'base',
+        'mediator',
+        'runtime/client'
+    ], function( Base, Mediator, RuntimeClent ) {
+    
+        var $ = Base.$;
+    
+        function FilePaste( opts ) {
+            opts = this.options = $.extend({}, opts );
+            opts.container = $( opts.container || document.body );
+            RuntimeClent.call( this, 'FilePaste' );
+        }
+    
+        Base.inherits( RuntimeClent, {
+            constructor: FilePaste,
+    
+            init: function() {
+                var me = this;
+    
+                me.connectRuntime( me.options, function() {
+                    me.exec('init');
+                    me.trigger('ready');
+                });
+            },
+    
+            destroy: function() {
+                this.exec('destroy');
+                this.disconnectRuntime();
+                this.off();
+            }
+        });
+    
+        Mediator.installTo( FilePaste.prototype );
+    
+        return FilePaste;
+    });
+    /**
+     * @fileOverview 组件基类。
+     */
+    define('widgets/filepaste',[
+        'base',
+        'uploader',
+        'lib/filepaste',
+        'widgets/widget'
+    ], function( Base, Uploader, FilePaste ) {
+        var $ = Base.$;
+    
+        /**
+         * @property {Selector} [paste=undefined]  指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为`document.body`.
+         * @namespace options
+         * @for Uploader
+         */
+        return Uploader.register({
+            init: function( opts ) {
+    
+                if ( !opts.paste ||
+                        this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                var me = this,
+                    deferred = Base.Deferred(),
+                    options = $.extend({}, {
+                        container: opts.paste,
+                        accept: opts.accept
+                    }),
+                    paste;
+    
+                paste = new FilePaste( options );
+    
+                paste.once( 'ready', deferred.resolve );
+                paste.on( 'paste', function( files ) {
+                    me.owner.request( 'add-file', [ files ]);
+                });
+                paste.init();
+    
+                return deferred.promise();
+            }
+        });
+    });
+    /**
+     * @fileOverview Blob
+     */
+    define('lib/blob',[
+        'base',
+        'runtime/client'
+    ], function( Base, RuntimeClient ) {
+    
+        function Blob( ruid, source ) {
+            var me = this;
+    
+            me.source = source;
+            me.ruid = ruid;
+    
+            RuntimeClient.call( me, 'Blob' );
+    
+            this.uid = source.uid || this.uid;
+            this.type = source.type || '';
+            this.size = source.size || 0;
+    
+            if ( ruid ) {
+                me.connectRuntime( ruid );
+            }
+        }
+    
+        Base.inherits( RuntimeClient, {
+            constructor: Blob,
+    
+            slice: function( start, end ) {
+                return this.exec( 'slice', start, end );
+            },
+    
+            getSource: function() {
+                return this.source;
+            }
+        });
+    
+        return Blob;
+    });
+    /**
+     * 为了统一化Flash的File和HTML5的File而存在。
+     * 以至于要调用Flash里面的File，也可以像调用HTML5版本的File一下。
+     * @fileOverview File
+     */
+    define('lib/file',[
+        'base',
+        'lib/blob'
+    ], function( Base, Blob ) {
+    
+        var uid = 1,
+            rExt = /\.([^.]+)$/;
+    
+        function File( ruid, file ) {
+            var ext;
+    
+            Blob.apply( this, arguments );
+            this.name = file.name || ('untitled' + uid++);
+            ext = rExt.exec( file.name ) ? RegExp.$1.toLowerCase() : '';
+    
+            // todo 支持其他类型文件的转换。
+    
+            // 如果有mimetype, 但是文件名里面没有找出后缀规律
+            if ( !ext && this.type ) {
+                ext = /\/(jpg|jpeg|png|gif|bmp)$/i.exec( this.type ) ?
+                        RegExp.$1.toLowerCase() : '';
+                this.name += '.' + ext;
+            }
+    
+            // 如果没有指定mimetype, 但是知道文件后缀。
+            if ( !this.type &&  ~'jpg,jpeg,png,gif,bmp'.indexOf( ext ) ) {
+                this.type = 'image/' + (ext === 'jpg' ? 'jpeg' : ext);
+            }
+    
+            this.ext = ext;
+            this.lastModifiedDate = file.lastModifiedDate ||
+                    (new Date()).toLocaleString();
+        }
+    
+        return Base.inherits( Blob, File );
+    });
+    
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/filepicker',[
+        'base',
+        'runtime/client',
+        'lib/file'
+    ], function( Base, RuntimeClent, File ) {
+    
+        var $ = Base.$;
+    
+        function FilePicker( opts ) {
+            opts = this.options = $.extend({}, FilePicker.options, opts );
+    
+            opts.container = $( opts.id );
+    
+            if ( !opts.container.length ) {
+                throw new Error('按钮指定错误');
+            }
+    
+            opts.innerHTML = opts.innerHTML || opts.label ||
+                    opts.container.html() || '';
+    
+            opts.button = $( opts.button || document.createElement('div') );
+            opts.button.html( opts.innerHTML );
+            opts.container.html( opts.button );
+    
+            RuntimeClent.call( this, 'FilePicker', true );
+        }
+    
+        FilePicker.options = {
+            button: null,
+            container: null,
+            label: null,
+            innerHTML: null,
+            multiple: true,
+            accept: null,
+            name: 'file'
+        };
+    
+        Base.inherits( RuntimeClent, {
+            constructor: FilePicker,
+    
+            init: function() {
+                var me = this,
+                    opts = me.options,
+                    button = opts.button;
+    
+                button.addClass('webuploader-pick');
+    
+                me.on( 'all', function( type ) {
+                    var files;
+    
+                    switch ( type ) {
+                        case 'mouseenter':
+                            button.addClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'mouseleave':
+                            button.removeClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'change':
+                            files = me.exec('getFiles');
+                            me.trigger( 'select', $.map( files, function( file ) {
+                                file = new File( me.getRuid(), file );
+    
+                                // 记录来源。
+                                file._refer = opts.container;
+                                return file;
+                            }), opts.container );
+                            break;
+                    }
+                });
+    
+                me.connectRuntime( opts, function() {
+                    me.refresh();
+                    me.exec( 'init', opts );
+                    me.trigger('ready');
+                });
+    
+                $( window ).on( 'resize', function() {
+                    me.refresh();
+                });
+            },
+    
+            refresh: function() {
+                var shimContainer = this.getRuntime().getContainer(),
+                    button = this.options.button,
+                    width = button.outerWidth ?
+                            button.outerWidth() : button.width(),
+    
+                    height = button.outerHeight ?
+                            button.outerHeight() : button.height(),
+    
+                    pos = button.offset();
+    
+                width && height && shimContainer.css({
+                    bottom: 'auto',
+                    right: 'auto',
+                    width: width + 'px',
+                    height: height + 'px'
+                }).offset( pos );
+            },
+    
+            enable: function() {
+                var btn = this.options.button;
+    
+                btn.removeClass('webuploader-pick-disable');
+                this.refresh();
+            },
+    
+            disable: function() {
+                var btn = this.options.button;
+    
+                this.getRuntime().getContainer().css({
+                    top: '-99999px'
+                });
+    
+                btn.addClass('webuploader-pick-disable');
+            },
+    
+            destroy: function() {
+                if ( this.runtime ) {
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                }
+            }
+        });
+    
+        return FilePicker;
+    });
+    
+    /**
+     * @fileOverview 文件选择相关
+     */
+    define('widgets/filepicker',[
+        'base',
+        'uploader',
+        'lib/filepicker',
+        'widgets/widget'
+    ], function( Base, Uploader, FilePicker ) {
+        var $ = Base.$;
+    
+        $.extend( Uploader.options, {
+    
+            /**
+             * @property {Selector | Object} [pick=undefined]
+             * @namespace options
+             * @for Uploader
+             * @description 指定选择文件的按钮容器，不指定则不创建按钮。
+             *
+             * * `id` {Seletor} 指定选择文件的按钮容器，不指定则不创建按钮。
+             * * `label` {String} 请采用 `innerHTML` 代替
+             * * `innerHTML` {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
+             * * `multiple` {Boolean} 是否开起同时选择多个文件能力。
+             */
+            pick: null,
+    
+            /**
+             * @property {Arroy} [accept=null]
+             * @namespace options
+             * @for Uploader
+             * @description 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
+             *
+             * * `title` {String} 文字描述
+             * * `extensions` {String} 允许的文件后缀，不带点，多个用逗号分割。
+             * * `mimeTypes` {String} 多个用逗号分割。
+             *
+             * 如：
+             *
+             * ```
+             * {
+             *     title: 'Images',
+             *     extensions: 'gif,jpg,jpeg,bmp,png',
+             *     mimeTypes: 'image/*'
+             * }
+             * ```
+             */
+            accept: null/*{
+                title: 'Images',
+                extensions: 'gif,jpg,jpeg,bmp,png',
+                mimeTypes: 'image/*'
+            }*/
+        });
+    
+        return Uploader.register({
+            'add-btn': 'addButton',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable'
+        }, {
+    
+            init: function( opts ) {
+                this.pickers = [];
+                return opts.pick && this.addButton( opts.pick );
+            },
+    
+            refresh: function() {
+                $.each( this.pickers, function() {
+                    this.refresh();
+                });
+            },
+    
+            /**
+             * @method addButton
+             * @for Uploader
+             * @grammar addButton( pick ) => Promise
+             * @description
+             * 添加文件选择按钮，如果一个按钮不够，需要调用此方法来添加。参数跟[options.pick](#WebUploader:Uploader:options)一致。
+             * @example
+             * uploader.addButton({
+             *     id: '#btnContainer',
+             *     innerHTML: '选择文件'
+             * });
+             */
+            addButton: function( pick ) {
+                var me = this,
+                    opts = me.options,
+                    accept = opts.accept,
+                    options, picker, deferred;
+    
+                if ( !pick ) {
+                    return;
+                }
+    
+                deferred = Base.Deferred();
+                $.isPlainObject( pick ) || (pick = {
+                    id: pick
+                });
+    
+                options = $.extend({}, pick, {
+                    accept: $.isPlainObject( accept ) ? [ accept ] : accept,
+                    swf: opts.swf,
+                    runtimeOrder: opts.runtimeOrder
+                });
+    
+                picker = new FilePicker( options );
+    
+                picker.once( 'ready', deferred.resolve );
+                picker.on( 'select', function( files ) {
+                    me.owner.request( 'add-file', [ files ]);
+                });
+                picker.init();
+    
+                this.pickers.push( picker );
+    
+                return deferred.promise();
+            },
+    
+            disable: function() {
+                $.each( this.pickers, function() {
+                    this.disable();
+                });
+            },
+    
+            enable: function() {
+                $.each( this.pickers, function() {
+                    this.enable();
+                });
+            }
+        });
+    });
+    /**
+     * @fileOverview Image
+     */
+    define('lib/image',[
+        'base',
+        'runtime/client',
+        'lib/blob'
+    ], function( Base, RuntimeClient, Blob ) {
+        var $ = Base.$;
+    
+        // 构造器。
+        function Image( opts ) {
+            this.options = $.extend({}, Image.options, opts );
+            RuntimeClient.call( this, 'Image' );
+    
+            this.on( 'load', function() {
+                this._info = this.exec('info');
+                this._meta = this.exec('meta');
+            });
+        }
+    
+        // 默认选项。
+        Image.options = {
+    
+            // 默认的图片处理质量
+            quality: 90,
+    
+            // 是否裁剪
+            crop: false,
+    
+            // 是否保留头部信息
+            preserveHeaders: true,
+    
+            // 是否允许放大。
+            allowMagnify: true
+        };
+    
+        // 继承RuntimeClient.
+        Base.inherits( RuntimeClient, {
+            constructor: Image,
+    
+            info: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._info = val;
+                    return this;
+                }
+    
+                // getter
+                return this._info;
+            },
+    
+            meta: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._meta = val;
+                    return this;
+                }
+    
+                // getter
+                return this._meta;
+            },
+    
+            loadFromBlob: function( blob ) {
+                var me = this,
+                    ruid = blob.getRuid();
+    
+                this.connectRuntime( ruid, function() {
+                    me.exec( 'init', me.options );
+                    me.exec( 'loadFromBlob', blob );
+                });
+            },
+    
+            resize: function() {
+                var args = Base.slice( arguments );
+                return this.exec.apply( this, [ 'resize' ].concat( args ) );
+            },
+    
+            getAsDataUrl: function( type ) {
+                return this.exec( 'getAsDataUrl', type );
+            },
+    
+            getAsBlob: function( type ) {
+                var blob = this.exec( 'getAsBlob', type );
+    
+                return new Blob( this.getRuid(), blob );
+            }
+        });
+    
+        return Image;
+    });
+    /**
+     * @fileOverview 图片操作, 负责预览图片和上传前压缩图片
+     */
+    define('widgets/image',[
+        'base',
+        'uploader',
+        'lib/image',
+        'widgets/widget'
+    ], function( Base, Uploader, Image ) {
+    
+        var $ = Base.$,
+            throttle;
+    
+        // 根据要处理的文件大小来节流，一次不能处理太多，会卡。
+        throttle = (function( max ) {
+            var occupied = 0,
+                waiting = [],
+                tick = function() {
+                    var item;
+    
+                    while ( waiting.length && occupied < max ) {
+                        item = waiting.shift();
+                        occupied += item[ 0 ];
+                        item[ 1 ]();
+                    }
+                };
+    
+            return function( emiter, size, cb ) {
+                waiting.push([ size, cb ]);
+                emiter.once( 'destroy', function() {
+                    occupied -= size;
+                    setTimeout( tick, 1 );
+                });
+                setTimeout( tick, 1 );
+            };
+        })( 5 * 1024 * 1024 );
+    
+        $.extend( Uploader.options, {
+    
+            /**
+             * @property {Object} [thumb]
+             * @namespace options
+             * @for Uploader
+             * @description 配置生成缩略图的选项。
+             *
+             * 默认为：
+             *
+             * ```javascript
+             * {
+             *     width: 110,
+             *     height: 110,
+             *
+             *     // 图片质量，只有type为`image/jpeg`的时候才有效。
+             *     quality: 70,
+             *
+             *     // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+             *     allowMagnify: true,
+             *
+             *     // 是否允许裁剪。
+             *     crop: true,
+             *
+             *     // 是否保留头部meta信息。
+             *     preserveHeaders: false,
+             *
+             *     // 为空的话则保留原有图片格式。
+             *     // 否则强制转换成指定的类型。
+             *     type: 'image/jpeg'
+             * }
+             * ```
+             */
+            thumb: {
+                width: 110,
+                height: 110,
+                quality: 70,
+                allowMagnify: true,
+                crop: true,
+                preserveHeaders: false,
+    
+                // 为空的话则保留原有图片格式。
+                // 否则强制转换成指定的类型。
+                // IE 8下面 base64 大小不能超过 32K 否则预览失败，而非 jpeg 编码的图片很可
+                // 能会超过 32k, 所以这里设置成预览的时候都是 image/jpeg
+                type: 'image/jpeg'
+            },
+    
+            /**
+             * @property {Object} [compress]
+             * @namespace options
+             * @for Uploader
+             * @description 配置压缩的图片的选项。如果此选项为`false`, 则图片在上传前不进行压缩。
+             *
+             * 默认为：
+             *
+             * ```javascript
+             * {
+             *     width: 1600,
+             *     height: 1600,
+             *
+             *     // 图片质量，只有type为`image/jpeg`的时候才有效。
+             *     quality: 90,
+             *
+             *     // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+             *     allowMagnify: false,
+             *
+             *     // 是否允许裁剪。
+             *     crop: false,
+             *
+             *     // 是否保留头部meta信息。
+             *     preserveHeaders: true
+             * }
+             * ```
+             */
+            compress: {
+                width: 1600,
+                height: 1600,
+                quality: 90,
+                allowMagnify: false,
+                crop: false,
+                preserveHeaders: true
+            }
+        });
+    
+        return Uploader.register({
+            'make-thumb': 'makeThumb',
+            'before-send-file': 'compressImage'
+        }, {
+    
+    
+            /**
+             * 生成缩略图，此过程为异步，所以需要传入`callback`。
+             * 通常情况在图片加入队里后调用此方法来生成预览图以增强交互效果。
+             *
+             * `callback`中可以接收到两个参数。
+             * * 第一个为error，如果生成缩略图有错误，此error将为真。
+             * * 第二个为ret, 缩略图的Data URL值。
+             *
+             * **注意**
+             * Date URL在IE6/7中不支持，所以不用调用此方法了，直接显示一张暂不支持预览图片好了。
+             *
+             *
+             * @method makeThumb
+             * @grammar makeThumb( file, callback ) => undefined
+             * @grammar makeThumb( file, callback, width, height ) => undefined
+             * @for Uploader
+             * @example
+             *
+             * uploader.on( 'fileQueued', function( file ) {
+             *     var $li = ...;
+             *
+             *     uploader.makeThumb( file, function( error, ret ) {
+             *         if ( error ) {
+             *             $li.text('预览错误');
+             *         } else {
+             *             $li.append('<img alt="" src="' + ret + '" />');
+             *         }
+             *     });
+             *
+             * });
+             */
+            makeThumb: function( file, cb, width, height ) {
+                var opts, image;
+    
+                file = this.request( 'get-file', file );
+    
+                // 只预览图片格式。
+                if ( !file.type.match( /^image/ ) ) {
+                    cb( true );
+                    return;
+                }
+    
+                opts = $.extend({}, this.options.thumb );
+    
+                // 如果传入的是object.
+                if ( $.isPlainObject( width ) ) {
+                    opts = $.extend( opts, width );
+                    width = null;
+                }
+    
+                width = width || opts.width;
+                height = height || opts.height;
+    
+                image = new Image( opts );
+    
+                image.once( 'load', function() {
+                    file._info = file._info || image.info();
+                    file._meta = file._meta || image.meta();
+                    image.resize( width, height );
+                });
+    
+                image.once( 'complete', function() {
+                    cb( false, image.getAsDataUrl( opts.type ) );
+                    image.destroy();
+                });
+    
+                image.once( 'error', function() {
+                    cb( true );
+                    image.destroy();
+                });
+    
+                throttle( image, file.source.size, function() {
+                    file._info && image.info( file._info );
+                    file._meta && image.meta( file._meta );
+                    image.loadFromBlob( file.source );
+                });
+            },
+    
+            compressImage: function( file ) {
+                var opts = this.options.compress || this.options.resize,
+                    compressSize = opts && opts.compressSize || 300 * 1024,
+                    image, deferred;
+    
+                file = this.request( 'get-file', file );
+    
+                // 只预览图片格式。
+                if ( !opts || !~'image/jpeg,image/jpg'.indexOf( file.type ) ||
+                        file.size < compressSize ||
+                        file._compressed ) {
+                    return;
+                }
+    
+                opts = $.extend({}, opts );
+                deferred = Base.Deferred();
+    
+                image = new Image( opts );
+    
+                deferred.always(function() {
+                    image.destroy();
+                    image = null;
+                });
+                image.once( 'error', deferred.reject );
+                image.once( 'load', function() {
+                    file._info = file._info || image.info();
+                    file._meta = file._meta || image.meta();
+                    image.resize( opts.width, opts.height );
+                });
+    
+                image.once( 'complete', function() {
+                    var blob, size;
+    
+                    // 移动端 UC / qq 浏览器的无图模式下
+                    // ctx.getImageData 处理大图的时候会报 Exception
+                    // INDEX_SIZE_ERR: DOM Exception 1
+                    try {
+                        blob = image.getAsBlob( opts.type );
+    
+                        size = file.size;
+    
+                        // 如果压缩后，比原来还大则不用压缩后的。
+                        if ( blob.size < size ) {
+                            // file.source.destroy && file.source.destroy();
+                            file.source = blob;
+                            file.size = blob.size;
+    
+                            file.trigger( 'resize', blob.size, size );
+                        }
+    
+                        // 标记，避免重复压缩。
+                        file._compressed = true;
+                        deferred.resolve();
+                    } catch ( e ) {
+                        // 出错了直接继续，让其上传原始图片
+                        deferred.resolve();
+                    }
+                });
+    
+                file._info && image.info( file._info );
+                file._meta && image.meta( file._meta );
+    
+                image.loadFromBlob( file.source );
+                return deferred.promise();
+            }
+        });
+    });
+    /**
+     * @fileOverview 文件属性封装
+     */
+    define('file',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            idPrefix = 'WU_FILE_',
+            idSuffix = 0,
+            rExt = /\.([^.]+)$/,
+            statusMap = {};
+    
+        function gid() {
+            return idPrefix + idSuffix++;
+        }
+    
+        /**
+         * 文件类
+         * @class File
+         * @constructor 构造函数
+         * @grammar new File( source ) => File
+         * @param {Lib.File} source [lib.File](#Lib.File)实例, 此source对象是带有Runtime信息的。
+         */
+        function WUFile( source ) {
+    
+            /**
+             * 文件名，包括扩展名（后缀）
+             * @property name
+             * @type {string}
+             */
+            this.name = source.name || 'Untitled';
+    
+            /**
+             * 文件体积（字节）
+             * @property size
+             * @type {uint}
+             * @default 0
+             */
+            this.size = source.size || 0;
+    
+            /**
+             * 文件MIMETYPE类型，与文件类型的对应关系请参考[http://t.cn/z8ZnFny](http://t.cn/z8ZnFny)
+             * @property type
+             * @type {string}
+             * @default 'application'
+             */
+            this.type = source.type || 'application';
+    
+            /**
+             * 文件最后修改日期
+             * @property lastModifiedDate
+             * @type {int}
+             * @default 当前时间戳
+             */
+            this.lastModifiedDate = source.lastModifiedDate || (new Date() * 1);
+    
+            /**
+             * 文件ID，每个对象具有唯一ID，与文件名无关
+             * @property id
+             * @type {string}
+             */
+            this.id = gid();
+    
+            /**
+             * 文件扩展名，通过文件名获取，例如test.png的扩展名为png
+             * @property ext
+             * @type {string}
+             */
+            this.ext = rExt.exec( this.name ) ? RegExp.$1 : '';
+    
+    
+            /**
+             * 状态文字说明。在不同的status语境下有不同的用途。
+             * @property statusText
+             * @type {string}
+             */
+            this.statusText = '';
+    
+            // 存储文件状态，防止通过属性直接修改
+            statusMap[ this.id ] = WUFile.Status.INITED;
+    
+            this.source = source;
+            this.loaded = 0;
+    
+            this.on( 'error', function( msg ) {
+                this.setStatus( WUFile.Status.ERROR, msg );
+            });
+        }
+    
+        $.extend( WUFile.prototype, {
+    
+            /**
+             * 设置状态，状态变化时会触发`change`事件。
+             * @method setStatus
+             * @grammar setStatus( status[, statusText] );
+             * @param {File.Status|String} status [文件状态值](#WebUploader:File:File.Status)
+             * @param {String} [statusText=''] 状态说明，常在error时使用，用http, abort,server等来标记是由于什么原因导致文件错误。
+             */
+            setStatus: function( status, text ) {
+    
+                var prevStatus = statusMap[ this.id ];
+    
+                typeof text !== 'undefined' && (this.statusText = text);
+    
+                if ( status !== prevStatus ) {
+                    statusMap[ this.id ] = status;
+                    /**
+                     * 文件状态变化
+                     * @event statuschange
+                     */
+                    this.trigger( 'statuschange', status, prevStatus );
+                }
+    
+            },
+    
+            /**
+             * 获取文件状态
+             * @return {File.Status}
+             * @example
+                     文件状态具体包括以下几种类型：
+                     {
+                         // 初始化
+                        INITED:     0,
+                        // 已入队列
+                        QUEUED:     1,
+                        // 正在上传
+                        PROGRESS:     2,
+                        // 上传出错
+                        ERROR:         3,
+                        // 上传成功
+                        COMPLETE:     4,
+                        // 上传取消
+                        CANCELLED:     5
+                    }
+             */
+            getStatus: function() {
+                return statusMap[ this.id ];
+            },
+    
+            /**
+             * 获取文件原始信息。
+             * @return {*}
+             */
+            getSource: function() {
+                return this.source;
+            },
+    
+            destory: function() {
+                delete statusMap[ this.id ];
+            }
+        });
+    
+        Mediator.installTo( WUFile.prototype );
+    
+        /**
+         * 文件状态值，具体包括以下几种类型：
+         * * `inited` 初始状态
+         * * `queued` 已经进入队列, 等待上传
+         * * `progress` 上传中
+         * * `complete` 上传完成。
+         * * `error` 上传出错，可重试
+         * * `interrupt` 上传中断，可续传。
+         * * `invalid` 文件不合格，不能重试上传。会自动从队列中移除。
+         * * `cancelled` 文件被移除。
+         * @property {Object} Status
+         * @namespace File
+         * @class File
+         * @static
+         */
+        WUFile.Status = {
+            INITED:     'inited',    // 初始状态
+            QUEUED:     'queued',    // 已经进入队列, 等待上传
+            PROGRESS:   'progress',    // 上传中
+            ERROR:      'error',    // 上传出错，可重试
+            COMPLETE:   'complete',    // 上传完成。
+            CANCELLED:  'cancelled',    // 上传取消。
+            INTERRUPT:  'interrupt',    // 上传中断，可续传。
+            INVALID:    'invalid'    // 文件不合格，不能重试上传。
+        };
+    
+        return WUFile;
+    });
+    
+    /**
+     * @fileOverview 文件队列
+     */
+    define('queue',[
+        'base',
+        'mediator',
+        'file'
+    ], function( Base, Mediator, WUFile ) {
+    
+        var $ = Base.$,
+            STATUS = WUFile.Status;
+    
+        /**
+         * 文件队列, 用来存储各个状态中的文件。
+         * @class Queue
+         * @extends Mediator
+         */
+        function Queue() {
+    
+            /**
+             * 统计文件数。
+             * * `numOfQueue` 队列中的文件数。
+             * * `numOfSuccess` 上传成功的文件数
+             * * `numOfCancel` 被移除的文件数
+             * * `numOfProgress` 正在上传中的文件数
+             * * `numOfUploadFailed` 上传错误的文件数。
+             * * `numOfInvalid` 无效的文件数。
+             * @property {Object} stats
+             */
+            this.stats = {
+                numOfQueue: 0,
+                numOfSuccess: 0,
+                numOfCancel: 0,
+                numOfProgress: 0,
+                numOfUploadFailed: 0,
+                numOfInvalid: 0
+            };
+    
+            // 上传队列，仅包括等待上传的文件
+            this._queue = [];
+    
+            // 存储所有文件
+            this._map = {};
+        }
+    
+        $.extend( Queue.prototype, {
+    
+            /**
+             * 将新文件加入对队列尾部
+             *
+             * @method append
+             * @param  {File} file   文件对象
+             */
+            append: function( file ) {
+                this._queue.push( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 将新文件加入对队列头部
+             *
+             * @method prepend
+             * @param  {File} file   文件对象
+             */
+            prepend: function( file ) {
+                this._queue.unshift( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 获取文件对象
+             *
+             * @method getFile
+             * @param  {String} fileId   文件ID
+             * @return {File}
+             */
+            getFile: function( fileId ) {
+                if ( typeof fileId !== 'string' ) {
+                    return fileId;
+                }
+                return this._map[ fileId ];
+            },
+    
+            /**
+             * 从队列中取出一个指定状态的文件。
+             * @grammar fetch( status ) => File
+             * @method fetch
+             * @param {String} status [文件状态值](#WebUploader:File:File.Status)
+             * @return {File} [File](#WebUploader:File)
+             */
+            fetch: function( status ) {
+                var len = this._queue.length,
+                    i, file;
+    
+                status = status || STATUS.QUEUED;
+    
+                for ( i = 0; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( status === file.getStatus() ) {
+                        return file;
+                    }
+                }
+    
+                return null;
+            },
+    
+            /**
+             * 对队列进行排序，能够控制文件上传顺序。
+             * @grammar sort( fn ) => undefined
+             * @method sort
+             * @param {Function} fn 排序方法
+             */
+            sort: function( fn ) {
+                if ( typeof fn === 'function' ) {
+                    this._queue.sort( fn );
+                }
+            },
+    
+            /**
+             * 获取指定类型的文件列表, 列表中每一个成员为[File](#WebUploader:File)对象。
+             * @grammar getFiles( [status1[, status2 ...]] ) => Array
+             * @method getFiles
+             * @param {String} [status] [文件状态值](#WebUploader:File:File.Status)
+             */
+            getFiles: function() {
+                var sts = [].slice.call( arguments, 0 ),
+                    ret = [],
+                    i = 0,
+                    len = this._queue.length,
+                    file;
+    
+                for ( ; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( sts.length && !~$.inArray( file.getStatus(), sts ) ) {
+                        continue;
+                    }
+    
+                    ret.push( file );
+                }
+    
+                return ret;
+            },
+    
+            _fileAdded: function( file ) {
+                var me = this,
+                    existing = this._map[ file.id ];
+    
+                if ( !existing ) {
+                    this._map[ file.id ] = file;
+    
+                    file.on( 'statuschange', function( cur, pre ) {
+                        me._onFileStatusChange( cur, pre );
+                    });
+                }
+    
+                file.setStatus( STATUS.QUEUED );
+            },
+    
+            _onFileStatusChange: function( curStatus, preStatus ) {
+                var stats = this.stats;
+    
+                switch ( preStatus ) {
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress--;
+                        break;
+    
+                    case STATUS.QUEUED:
+                        stats.numOfQueue --;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed--;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid--;
+                        break;
+                }
+    
+                switch ( curStatus ) {
+                    case STATUS.QUEUED:
+                        stats.numOfQueue++;
+                        break;
+    
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress++;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed++;
+                        break;
+    
+                    case STATUS.COMPLETE:
+                        stats.numOfSuccess++;
+                        break;
+    
+                    case STATUS.CANCELLED:
+                        stats.numOfCancel++;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid++;
+                        break;
+                }
+            }
+    
+        });
+    
+        Mediator.installTo( Queue.prototype );
+    
+        return Queue;
+    });
+    /**
+     * @fileOverview 队列
+     */
+    define('widgets/queue',[
+        'base',
+        'uploader',
+        'queue',
+        'file',
+        'lib/file',
+        'runtime/client',
+        'widgets/widget'
+    ], function( Base, Uploader, Queue, WUFile, File, RuntimeClient ) {
+    
+        var $ = Base.$,
+            rExt = /\.\w+$/,
+            Status = WUFile.Status;
+    
+        return Uploader.register({
+            'sort-files': 'sortFiles',
+            'add-file': 'addFiles',
+            'get-file': 'getFile',
+            'fetch-file': 'fetchFile',
+            'get-stats': 'getStats',
+            'get-files': 'getFiles',
+            'remove-file': 'removeFile',
+            'retry': 'retry',
+            'reset': 'reset',
+            'accept-file': 'acceptFile'
+        }, {
+    
+            init: function( opts ) {
+                var me = this,
+                    deferred, len, i, item, arr, accept, runtime;
+    
+                if ( $.isPlainObject( opts.accept ) ) {
+                    opts.accept = [ opts.accept ];
+                }
+    
+                // accept中的中生成匹配正则。
+                if ( opts.accept ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        item = opts.accept[ i ].extensions;
+                        item && arr.push( item );
+                    }
+    
+                    if ( arr.length ) {
+                        accept = '\\.' + arr.join(',')
+                                .replace( /,/g, '$|\\.' )
+                                .replace( /\*/g, '.*' ) + '$';
+                    }
+    
+                    me.accept = new RegExp( accept, 'i' );
+                }
+    
+                me.queue = new Queue();
+                me.stats = me.queue.stats;
+    
+                // 如果当前不是html5运行时，那就算了。
+                // 不执行后续操作
+                if ( this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                // 创建一个 html5 运行时的 placeholder
+                // 以至于外部添加原生 File 对象的时候能正确包裹一下供 webuploader 使用。
+                deferred = Base.Deferred();
+                runtime = new RuntimeClient('Placeholder');
+                runtime.connectRuntime({
+                    runtimeOrder: 'html5'
+                }, function() {
+                    me._ruid = runtime.getRuid();
+                    deferred.resolve();
+                });
+                return deferred.promise();
+            },
+    
+    
+            // 为了支持外部直接添加一个原生File对象。
+            _wrapFile: function( file ) {
+                if ( !(file instanceof WUFile) ) {
+    
+                    if ( !(file instanceof File) ) {
+                        if ( !this._ruid ) {
+                            throw new Error('Can\'t add external files.');
+                        }
+                        file = new File( this._ruid, file );
+                    }
+    
+                    file = new WUFile( file );
+                }
+    
+                return file;
+            },
+    
+            // 判断文件是否可以被加入队列
+            acceptFile: function( file ) {
+                var invalid = !file || file.size < 6 || this.accept &&
+    
+                        // 如果名字中有后缀，才做后缀白名单处理。
+                        rExt.exec( file.name ) && !this.accept.test( file.name );
+    
+                return !invalid;
+            },
+    
+    
+            /**
+             * @event beforeFileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列之前触发，此事件的handler返回值为`false`，则此文件不会被添加进入队列。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event fileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列以后触发。
+             * @for  Uploader
+             */
+    
+            _addFile: function( file ) {
+                var me = this;
+    
+                file = me._wrapFile( file );
+    
+                // 不过类型判断允许不允许，先派送 `beforeFileQueued`
+                if ( !me.owner.trigger( 'beforeFileQueued', file ) ) {
+                    return;
+                }
+    
+                // 类型不匹配，则派送错误事件，并返回。
+                if ( !me.acceptFile( file ) ) {
+                    me.owner.trigger( 'error', 'Q_TYPE_DENIED', file );
+                    return;
+                }
+    
+                me.queue.append( file );
+                me.owner.trigger( 'fileQueued', file );
+                return file;
+            },
+    
+            getFile: function( fileId ) {
+                return this.queue.getFile( fileId );
+            },
+    
+            /**
+             * @event filesQueued
+             * @param {File} files 数组，内容为原始File(lib/File）对象。
+             * @description 当一批文件添加进队列以后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method addFiles
+             * @grammar addFiles( file ) => undefined
+             * @grammar addFiles( [file1, file2 ...] ) => undefined
+             * @param {Array of File or File} [files] Files 对象 数组
+             * @description 添加文件到队列
+             * @for  Uploader
+             */
+            addFiles: function( files ) {
+                var me = this;
+    
+                if ( !files.length ) {
+                    files = [ files ];
+                }
+    
+                files = $.map( files, function( file ) {
+                    return me._addFile( file );
+                });
+    
+                me.owner.trigger( 'filesQueued', files );
+    
+                if ( me.options.auto ) {
+                    me.request('start-upload');
+                }
+            },
+    
+            getStats: function() {
+                return this.stats;
+            },
+    
+            /**
+             * @event fileDequeued
+             * @param {File} file File对象
+             * @description 当文件被移除队列后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method removeFile
+             * @grammar removeFile( file ) => undefined
+             * @grammar removeFile( id ) => undefined
+             * @param {File|id} file File对象或这File对象的id
+             * @description 移除某一文件。
+             * @for  Uploader
+             * @example
+             *
+             * $li.on('click', '.remove-this', function() {
+             *     uploader.removeFile( file );
+             * })
+             */
+            removeFile: function( file ) {
+                var me = this;
+    
+                file = file.id ? file : me.queue.getFile( file );
+    
+                file.setStatus( Status.CANCELLED );
+                me.owner.trigger( 'fileDequeued', file );
+            },
+    
+            /**
+             * @method getFiles
+             * @grammar getFiles() => Array
+             * @grammar getFiles( status1, status2, status... ) => Array
+             * @description 返回指定状态的文件集合，不传参数将返回所有状态的文件。
+             * @for  Uploader
+             * @example
+             * console.log( uploader.getFiles() );    // => all files
+             * console.log( uploader.getFiles('error') )    // => all error files.
+             */
+            getFiles: function() {
+                return this.queue.getFiles.apply( this.queue, arguments );
+            },
+    
+            fetchFile: function() {
+                return this.queue.fetch.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method retry
+             * @grammar retry() => undefined
+             * @grammar retry( file ) => undefined
+             * @description 重试上传，重试指定文件，或者从出错的文件开始重新上传。
+             * @for  Uploader
+             * @example
+             * function retry() {
+             *     uploader.retry();
+             * }
+             */
+            retry: function( file, noForceStart ) {
+                var me = this,
+                    files, i, len;
+    
+                if ( file ) {
+                    file = file.id ? file : me.queue.getFile( file );
+                    file.setStatus( Status.QUEUED );
+                    noForceStart || me.request('start-upload');
+                    return;
+                }
+    
+                files = me.queue.getFiles( Status.ERROR );
+                i = 0;
+                len = files.length;
+    
+                for ( ; i < len; i++ ) {
+                    file = files[ i ];
+                    file.setStatus( Status.QUEUED );
+                }
+    
+                me.request('start-upload');
+            },
+    
+            /**
+             * @method sort
+             * @grammar sort( fn ) => undefined
+             * @description 排序队列中的文件，在上传之前调整可以控制上传顺序。
+             * @for  Uploader
+             */
+            sortFiles: function() {
+                return this.queue.sort.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method reset
+             * @grammar reset() => undefined
+             * @description 重置uploader。目前只重置了队列。
+             * @for  Uploader
+             * @example
+             * uploader.reset();
+             */
+            reset: function() {
+                this.queue = new Queue();
+                this.stats = this.queue.stats;
+            }
+        });
+    
+    });
+    /**
+     * @fileOverview 添加获取Runtime相关信息的方法。
+     */
+    define('widgets/runtime',[
+        'uploader',
+        'runtime/runtime',
+        'widgets/widget'
+    ], function( Uploader, Runtime ) {
+    
+        Uploader.support = function() {
+            return Runtime.hasRuntime.apply( Runtime, arguments );
+        };
+    
+        return Uploader.register({
+            'predict-runtime-type': 'predictRuntmeType'
+        }, {
+    
+            init: function() {
+                if ( !this.predictRuntmeType() ) {
+                    throw Error('Runtime Error');
+                }
+            },
+    
+            /**
+             * 预测Uploader将采用哪个`Runtime`
+             * @grammar predictRuntmeType() => String
+             * @method predictRuntmeType
+             * @for  Uploader
+             */
+            predictRuntmeType: function() {
+                var orders = this.options.runtimeOrder || Runtime.orders,
+                    type = this.type,
+                    i, len;
+    
+                if ( !type ) {
+                    orders = orders.split( /\s*,\s*/g );
+    
+                    for ( i = 0, len = orders.length; i < len; i++ ) {
+                        if ( Runtime.hasRuntime( orders[ i ] ) ) {
+                            this.type = type = orders[ i ];
+                            break;
+                        }
+                    }
+                }
+    
+                return type;
+            }
+        });
+    });
+    /**
+     * @fileOverview Transport
+     */
+    define('lib/transport',[
+        'base',
+        'runtime/client',
+        'mediator'
+    ], function( Base, RuntimeClient, Mediator ) {
+    
+        var $ = Base.$;
+    
+        function Transport( opts ) {
+            var me = this;
+    
+            opts = me.options = $.extend( true, {}, Transport.options, opts || {} );
+            RuntimeClient.call( this, 'Transport' );
+    
+            this._blob = null;
+            this._formData = opts.formData || {};
+            this._headers = opts.headers || {};
+    
+            this.on( 'progress', this._timeout );
+            this.on( 'load error', function() {
+                me.trigger( 'progress', 1 );
+                clearTimeout( me._timer );
+            });
+        }
+    
+        Transport.options = {
+            server: '',
+            method: 'POST',
+    
+            // 跨域时，是否允许携带cookie, 只有html5 runtime才有效
+            withCredentials: false,
+            fileVal: 'file',
+            timeout: 2 * 60 * 1000,    // 2分钟
+            formData: {},
+            headers: {},
+            sendAsBinary: false
+        };
+    
+        $.extend( Transport.prototype, {
+    
+            // 添加Blob, 只能添加一次，最后一次有效。
+            appendBlob: function( key, blob, filename ) {
+                var me = this,
+                    opts = me.options;
+    
+                if ( me.getRuid() ) {
+                    me.disconnectRuntime();
+                }
+    
+                // 连接到blob归属的同一个runtime.
+                me.connectRuntime( blob.ruid, function() {
+                    me.exec('init');
+                });
+    
+                me._blob = blob;
+                opts.fileVal = key || opts.fileVal;
+                opts.filename = filename || opts.filename;
+            },
+    
+            // 添加其他字段
+            append: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._formData, key );
+                } else {
+                    this._formData[ key ] = value;
+                }
+            },
+    
+            setRequestHeader: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._headers, key );
+                } else {
+                    this._headers[ key ] = value;
+                }
+            },
+    
+            send: function( method ) {
+                this.exec( 'send', method );
+                this._timeout();
+            },
+    
+            abort: function() {
+                clearTimeout( this._timer );
+                return this.exec('abort');
+            },
+    
+            destroy: function() {
+                this.trigger('destroy');
+                this.off();
+                this.exec('destroy');
+                this.disconnectRuntime();
+            },
+    
+            getResponse: function() {
+                return this.exec('getResponse');
+            },
+    
+            getResponseAsJson: function() {
+                return this.exec('getResponseAsJson');
+            },
+    
+            getStatus: function() {
+                return this.exec('getStatus');
+            },
+    
+            _timeout: function() {
+                var me = this,
+                    duration = me.options.timeout;
+    
+                if ( !duration ) {
+                    return;
+                }
+    
+                clearTimeout( me._timer );
+                me._timer = setTimeout(function() {
+                    me.abort();
+                    me.trigger( 'error', 'timeout' );
+                }, duration );
+            }
+    
+        });
+    
+        // 让Transport具备事件功能。
+        Mediator.installTo( Transport.prototype );
+    
+        return Transport;
+    });
+    /**
+     * @fileOverview 负责文件上传相关。
+     */
+    define('widgets/upload',[
+        'base',
+        'uploader',
+        'file',
+        'lib/transport',
+        'widgets/widget'
+    ], function( Base, Uploader, WUFile, Transport ) {
+    
+        var $ = Base.$,
+            isPromise = Base.isPromise,
+            Status = WUFile.Status;
+    
+        // 添加默认配置项
+        $.extend( Uploader.options, {
+    
+    
+            /**
+             * @property {Boolean} [prepareNextFile=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否允许在文件传输时提前把下一个文件准备好。
+             * 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。
+             * 如果能提前在当前文件传输期处理，可以节省总体耗时。
+             */
+            prepareNextFile: false,
+    
+            /**
+             * @property {Boolean} [chunked=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否要分片处理大文件上传。
+             */
+            chunked: false,
+    
+            /**
+             * @property {Boolean} [chunkSize=5242880]
+             * @namespace options
+             * @for Uploader
+             * @description 如果要分片，分多大一片？ 默认大小为5M.
+             */
+            chunkSize: 5 * 1024 * 1024,
+    
+            /**
+             * @property {Boolean} [chunkRetry=2]
+             * @namespace options
+             * @for Uploader
+             * @description 如果某个分片由于网络问题出错，允许自动重传多少次？
+             */
+            chunkRetry: 2,
+    
+            /**
+             * @property {Boolean} [threads=3]
+             * @namespace options
+             * @for Uploader
+             * @description 上传并发数。允许同时最大上传进程数。
+             */
+            threads: 3,
+    
+    
+            /**
+             * @property {Object} [formData]
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传请求的参数表，每次发送都会发送此对象中的参数。
+             */
+            formData: null
+    
+            /**
+             * @property {Object} [fileVal='file']
+             * @namespace options
+             * @for Uploader
+             * @description 设置文件上传域的name。
+             */
+    
+            /**
+             * @property {Object} [method='POST']
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传方式，`POST`或者`GET`。
+             */
+    
+            /**
+             * @property {Object} [sendAsBinary=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否已二进制的流的方式发送文件，这样整个上传内容`php://input`都为文件内容，
+             * 其他参数在$_GET数组中。
+             */
+        });
+    
+        // 负责将文件切片。
+        function CuteFile( file, chunkSize ) {
+            var pending = [],
+                blob = file.source,
+                total = blob.size,
+                chunks = chunkSize ? Math.ceil( total / chunkSize ) : 1,
+                start = 0,
+                index = 0,
+                len;
+    
+            while ( index < chunks ) {
+                len = Math.min( chunkSize, total - start );
+    
+                pending.push({
+                    file: file,
+                    start: start,
+                    end: chunkSize ? (start + len) : total,
+                    total: total,
+                    chunks: chunks,
+                    chunk: index++
+                });
+                start += len;
+            }
+    
+            file.blocks = pending.concat();
+            file.remaning = pending.length;
+    
+            return {
+                file: file,
+    
+                has: function() {
+                    return !!pending.length;
+                },
+    
+                fetch: function() {
+                    return pending.shift();
+                }
+            };
+        }
+    
+        Uploader.register({
+            'start-upload': 'start',
+            'stop-upload': 'stop',
+            'skip-file': 'skipFile',
+            'is-in-progress': 'isInProgress'
+        }, {
+    
+            init: function() {
+                var owner = this.owner;
+    
+                this.runing = false;
+    
+                // 记录当前正在传的数据，跟threads相关
+                this.pool = [];
+    
+                // 缓存即将上传的文件。
+                this.pending = [];
+    
+                // 跟踪还有多少分片没有完成上传。
+                this.remaning = 0;
+                this.__tick = Base.bindFn( this._tick, this );
+    
+                owner.on( 'uploadComplete', function( file ) {
+                    // 把其他块取消了。
+                    file.blocks && $.each( file.blocks, function( _, v ) {
+                        v.transport && (v.transport.abort(), v.transport.destroy());
+                        delete v.transport;
+                    });
+    
+                    delete file.blocks;
+                    delete file.remaning;
+                });
+            },
+    
+            /**
+             * @event startUpload
+             * @description 当开始上传流程时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。
+             * @grammar upload() => undefined
+             * @method upload
+             * @for  Uploader
+             */
+            start: function() {
+                var me = this;
+    
+                // 移出invalid的文件
+                $.each( me.request( 'get-files', Status.INVALID ), function() {
+                    me.request( 'remove-file', this );
+                });
+    
+                if ( me.runing ) {
+                    return;
+                }
+    
+                me.runing = true;
+    
+                // 如果有暂停的，则续传
+                $.each( me.pool, function( _, v ) {
+                    var file = v.file;
+    
+                    if ( file.getStatus() === Status.INTERRUPT ) {
+                        file.setStatus( Status.PROGRESS );
+                        me._trigged = false;
+                        v.transport && v.transport.send();
+                    }
+                });
+    
+                me._trigged = false;
+                me.owner.trigger('startUpload');
+                Base.nextTick( me.__tick );
+            },
+    
+            /**
+             * @event stopUpload
+             * @description 当开始上传流程暂停时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 暂停上传。第一个参数为是否中断上传当前正在上传的文件。
+             * @grammar stop() => undefined
+             * @grammar stop( true ) => undefined
+             * @method stop
+             * @for  Uploader
+             */
+            stop: function( interrupt ) {
+                var me = this;
+    
+                if ( me.runing === false ) {
+                    return;
+                }
+    
+                me.runing = false;
+    
+                interrupt && $.each( me.pool, function( _, v ) {
+                    v.transport && v.transport.abort();
+                    v.file.setStatus( Status.INTERRUPT );
+                });
+    
+                me.owner.trigger('stopUpload');
+            },
+    
+            /**
+             * 判断`Uplaode`r是否正在上传中。
+             * @grammar isInProgress() => Boolean
+             * @method isInProgress
+             * @for  Uploader
+             */
+            isInProgress: function() {
+                return !!this.runing;
+            },
+    
+            getStats: function() {
+                return this.request('get-stats');
+            },
+    
+            /**
+             * 掉过一个文件上传，直接标记指定文件为已上传状态。
+             * @grammar skipFile( file ) => undefined
+             * @method skipFile
+             * @for  Uploader
+             */
+            skipFile: function( file, status ) {
+                file = this.request( 'get-file', file );
+    
+                file.setStatus( status || Status.COMPLETE );
+                file.skipped = true;
+    
+                // 如果正在上传。
+                file.blocks && $.each( file.blocks, function( _, v ) {
+                    var _tr = v.transport;
+    
+                    if ( _tr ) {
+                        _tr.abort();
+                        _tr.destroy();
+                        delete v.transport;
+                    }
+                });
+    
+                this.owner.trigger( 'uploadSkip', file );
+            },
+    
+            /**
+             * @event uploadFinished
+             * @description 当所有文件上传结束时触发。
+             * @for  Uploader
+             */
+            _tick: function() {
+                var me = this,
+                    opts = me.options,
+                    fn, val;
+    
+                // 上一个promise还没有结束，则等待完成后再执行。
+                if ( me._promise ) {
+                    return me._promise.always( me.__tick );
+                }
+    
+                // 还有位置，且还有文件要处理的话。
+                if ( me.pool.length < opts.threads && (val = me._nextBlock()) ) {
+                    me._trigged = false;
+    
+                    fn = function( val ) {
+                        me._promise = null;
+    
+                        // 有可能是reject过来的，所以要检测val的类型。
+                        val && val.file && me._startSend( val );
+                        Base.nextTick( me.__tick );
+                    };
+    
+                    me._promise = isPromise( val ) ? val.always( fn ) : fn( val );
+    
+                // 没有要上传的了，且没有正在传输的了。
+                } else if ( !me.remaning && !me.getStats().numOfQueue ) {
+                    me.runing = false;
+    
+                    me._trigged || Base.nextTick(function() {
+                        me.owner.trigger('uploadFinished');
+                    });
+                    me._trigged = true;
+                }
+            },
+    
+            _nextBlock: function() {
+                var me = this,
+                    act = me._act,
+                    opts = me.options,
+                    next, done;
+    
+                // 如果当前文件还有没有需要传输的，则直接返回剩下的。
+                if ( act && act.has() &&
+                        act.file.getStatus() === Status.PROGRESS ) {
+    
+                    // 是否提前准备下一个文件
+                    if ( opts.prepareNextFile && !me.pending.length ) {
+                        me._prepareNextFile();
+                    }
+    
+                    return act.fetch();
+    
+                // 否则，如果正在运行，则准备下一个文件，并等待完成后返回下个分片。
+                } else if ( me.runing ) {
+    
+                    // 如果缓存中有，则直接在缓存中取，没有则去queue中取。
+                    if ( !me.pending.length && me.getStats().numOfQueue ) {
+                        me._prepareNextFile();
+                    }
+    
+                    next = me.pending.shift();
+                    done = function( file ) {
+                        if ( !file ) {
+                            return null;
+                        }
+    
+                        act = CuteFile( file, opts.chunked ? opts.chunkSize : 0 );
+                        me._act = act;
+                        return act.fetch();
+                    };
+    
+                    // 文件可能还在prepare中，也有可能已经完全准备好了。
+                    return isPromise( next ) ?
+                            next[ next.pipe ? 'pipe' : 'then']( done ) :
+                            done( next );
+                }
+            },
+    
+    
+            /**
+             * @event uploadStart
+             * @param {File} file File对象
+             * @description 某个文件开始上传前触发，一个文件只会触发一次。
+             * @for  Uploader
+             */
+            _prepareNextFile: function() {
+                var me = this,
+                    file = me.request('fetch-file'),
+                    pending = me.pending,
+                    promise;
+    
+                if ( file ) {
+                    promise = me.request( 'before-send-file', file, function() {
+    
+                        // 有可能文件被skip掉了。文件被skip掉后，状态坑定不是Queued.
+                        if ( file.getStatus() === Status.QUEUED ) {
+                            me.owner.trigger( 'uploadStart', file );
+                            file.setStatus( Status.PROGRESS );
+                            return file;
+                        }
+    
+                        return me._finishFile( file );
+                    });
+    
+                    // 如果还在pending中，则替换成文件本身。
+                    promise.done(function() {
+                        var idx = $.inArray( promise, pending );
+    
+                        ~idx && pending.splice( idx, 1, file );
+                    });
+    
+                    // befeore-send-file的钩子就有错误发生。
+                    promise.fail(function( reason ) {
+                        file.setStatus( Status.ERROR, reason );
+                        me.owner.trigger( 'uploadError', file, reason );
+                        me.owner.trigger( 'uploadComplete', file );
+                    });
+    
+                    pending.push( promise );
+                }
+            },
+    
+            // 让出位置了，可以让其他分片开始上传
+            _popBlock: function( block ) {
+                var idx = $.inArray( block, this.pool );
+    
+                this.pool.splice( idx, 1 );
+                block.file.remaning--;
+                this.remaning--;
+            },
+    
+            // 开始上传，可以被掉过。如果promise被reject了，则表示跳过此分片。
+            _startSend: function( block ) {
+                var me = this,
+                    file = block.file,
+                    promise;
+    
+                me.pool.push( block );
+                me.remaning++;
+    
+                // 如果没有分片，则直接使用原始的。
+                // 不会丢失content-type信息。
+                block.blob = block.chunks === 1 ? file.source :
+                        file.source.slice( block.start, block.end );
+    
+                // hook, 每个分片发送之前可能要做些异步的事情。
+                promise = me.request( 'before-send', block, function() {
+    
+                    // 有可能文件已经上传出错了，所以不需要再传输了。
+                    if ( file.getStatus() === Status.PROGRESS ) {
+                        me._doSend( block );
+                    } else {
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+    
+                // 如果为fail了，则跳过此分片。
+                promise.fail(function() {
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file ).always(function() {
+                            block.percentage = 1;
+                            me._popBlock( block );
+                            me.owner.trigger( 'uploadComplete', file );
+                            Base.nextTick( me.__tick );
+                        });
+                    } else {
+                        block.percentage = 1;
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+            },
+    
+    
+            /**
+             * @event uploadBeforeSend
+             * @param {Object} object
+             * @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数。
+             * @description 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadAccept
+             * @param {Object} object
+             * @param {Object} ret 服务端的返回数据，json格式，如果服务端不是json格式，从ret._raw中取数据，自行解析。
+             * @description 当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为`false`, 则此文件将派送`server`类型的`uploadError`事件。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadProgress
+             * @param {File} file File对象
+             * @param {Number} percentage 上传进度
+             * @description 上传过程中触发，携带上传进度。
+             * @for  Uploader
+             */
+    
+    
+            /**
+             * @event uploadError
+             * @param {File} file File对象
+             * @param {String} reason 出错的code
+             * @description 当文件上传出错时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadSuccess
+             * @param {File} file File对象
+             * @param {Object} response 服务端返回的数据
+             * @description 当文件上传成功时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadComplete
+             * @param {File} [file] File对象
+             * @description 不管成功或者失败，文件上传完成时触发。
+             * @for  Uploader
+             */
+    
+            // 做上传操作。
+            _doSend: function( block ) {
+                var me = this,
+                    owner = me.owner,
+                    opts = me.options,
+                    file = block.file,
+                    tr = new Transport( opts ),
+                    data = $.extend({}, opts.formData ),
+                    headers = $.extend({}, opts.headers ),
+                    requestAccept, ret;
+    
+                block.transport = tr;
+    
+                tr.on( 'destroy', function() {
+                    delete block.transport;
+                    me._popBlock( block );
+                    Base.nextTick( me.__tick );
+                });
+    
+                // 广播上传进度。以文件为单位。
+                tr.on( 'progress', function( percentage ) {
+                    var totalPercent = 0,
+                        uploaded = 0;
+    
+                    // 可能没有abort掉，progress还是执行进来了。
+                    // if ( !file.blocks ) {
+                    //     return;
+                    // }
+    
+                    totalPercent = block.percentage = percentage;
+    
+                    if ( block.chunks > 1 ) {    // 计算文件的整体速度。
+                        $.each( file.blocks, function( _, v ) {
+                            uploaded += (v.percentage || 0) * (v.end - v.start);
+                        });
+    
+                        totalPercent = uploaded / file.size;
+                    }
+    
+                    owner.trigger( 'uploadProgress', file, totalPercent || 0 );
+                });
+    
+                // 用来询问，是否返回的结果是有错误的。
+                requestAccept = function( reject ) {
+                    var fn;
+    
+                    ret = tr.getResponseAsJson() || {};
+                    ret._raw = tr.getResponse();
+                    fn = function( value ) {
+                        reject = value;
+                    };
+    
+                    // 服务端响应了，不代表成功了，询问是否响应正确。
+                    if ( !owner.trigger( 'uploadAccept', block, ret, fn ) ) {
+                        reject = reject || 'server';
+                    }
+    
+                    return reject;
+                };
+    
+                // 尝试重试，然后广播文件上传出错。
+                tr.on( 'error', function( type, flag ) {
+                    block.retried = block.retried || 0;
+    
+                    // 自动重试
+                    if ( block.chunks > 1 && ~'http,abort'.indexOf( type ) &&
+                            block.retried < opts.chunkRetry ) {
+    
+                        block.retried++;
+                        tr.send();
+    
+                    } else {
+    
+                        // http status 500 ~ 600
+                        if ( !flag && type === 'server' ) {
+                            type = requestAccept( type );
+                        }
+    
+                        file.setStatus( Status.ERROR, type );
+                        owner.trigger( 'uploadError', file, type );
+                        owner.trigger( 'uploadComplete', file );
+                    }
+                });
+    
+                // 上传成功
+                tr.on( 'load', function() {
+                    var reason;
+    
+                    // 如果非预期，转向上传出错。
+                    if ( (reason = requestAccept()) ) {
+                        tr.trigger( 'error', reason, true );
+                        return;
+                    }
+    
+                    // 全部上传完成。
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file, ret );
+                    } else {
+                        tr.destroy();
+                    }
+                });
+    
+                // 配置默认的上传字段。
+                data = $.extend( data, {
+                    id: file.id,
+                    name: file.name,
+                    type: file.type,
+                    lastModifiedDate: file.lastModifiedDate,
+                    size: file.size
+                });
+    
+                block.chunks > 1 && $.extend( data, {
+                    chunks: block.chunks,
+                    chunk: block.chunk
+                });
+    
+                // 在发送之间可以添加字段什么的。。。
+                // 如果默认的字段不够使用，可以通过监听此事件来扩展
+                owner.trigger( 'uploadBeforeSend', block, data, headers );
+    
+                // 开始发送。
+                tr.appendBlob( opts.fileVal, block.blob, file.name );
+                tr.append( data );
+                tr.setRequestHeader( headers );
+                tr.send();
+            },
+    
+            // 完成上传。
+            _finishFile: function( file, ret, hds ) {
+                var owner = this.owner;
+    
+                return owner
+                        .request( 'after-send-file', arguments, function() {
+                            file.setStatus( Status.COMPLETE );
+                            owner.trigger( 'uploadSuccess', file, ret, hds );
+                        })
+                        .fail(function( reason ) {
+    
+                            // 如果外部已经标记为invalid什么的，不再改状态。
+                            if ( file.getStatus() === Status.PROGRESS ) {
+                                file.setStatus( Status.ERROR, reason );
+                            }
+    
+                            owner.trigger( 'uploadError', file, reason );
+                        })
+                        .always(function() {
+                            owner.trigger( 'uploadComplete', file );
+                        });
+            }
+    
+        });
+    });
+    /**
+     * @fileOverview 各种验证，包括文件总大小是否超出、单文件是否超出和文件是否重复。
+     */
+    
+    define('widgets/validator',[
+        'base',
+        'uploader',
+        'file',
+        'widgets/widget'
+    ], function( Base, Uploader, WUFile ) {
+    
+        var $ = Base.$,
+            validators = {},
+            api;
+    
+        /**
+         * @event error
+         * @param {String} type 错误类型。
+         * @description 当validate不通过时，会以派送错误事件的形式通知调用者。通过`upload.on('error', handler)`可以捕获到此类错误，目前有以下错误会在特定的情况下派送错来。
+         *
+         * * `Q_EXCEED_NUM_LIMIT` 在设置了`fileNumLimit`且尝试给`uploader`添加的文件数量超出这个值时派送。
+         * * `Q_EXCEED_SIZE_LIMIT` 在设置了`Q_EXCEED_SIZE_LIMIT`且尝试给`uploader`添加的文件总大小超出这个值时派送。
+         * @for  Uploader
+         */
+    
+        // 暴露给外面的api
+        api = {
+    
+            // 添加验证器
+            addValidator: function( type, cb ) {
+                validators[ type ] = cb;
+            },
+    
+            // 移除验证器
+            removeValidator: function( type ) {
+                delete validators[ type ];
+            }
+        };
+    
+        // 在Uploader初始化的时候启动Validators的初始化
+        Uploader.register({
+            init: function() {
+                var me = this;
+                $.each( validators, function() {
+                    this.call( me.owner );
+                });
+            }
+        });
+    
+        /**
+         * @property {int} [fileNumLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证文件总数量, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileNumLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                count = 0,
+                max = opts.fileNumLimit >> 0,
+                flag = true;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+    
+                if ( count >= max && flag ) {
+                    flag = false;
+                    this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
+                    setTimeout(function() {
+                        flag = true;
+                    }, 1 );
+                }
+    
+                return count >= max ? false : true;
+            });
+    
+            uploader.on( 'fileQueued', function() {
+                count++;
+            });
+    
+            uploader.on( 'fileDequeued', function() {
+                count--;
+            });
+    
+            uploader.on( 'uploadFinished', function() {
+                count = 0;
+            });
+        });
+    
+    
+        /**
+         * @property {int} [fileSizeLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证文件总大小是否超出限制, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileSizeLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                count = 0,
+                max = opts.fileSizeLimit >> 0,
+                flag = true;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+                var invalid = count + file.size > max;
+    
+                if ( invalid && flag ) {
+                    flag = false;
+                    this.trigger( 'error', 'Q_EXCEED_SIZE_LIMIT', max, file );
+                    setTimeout(function() {
+                        flag = true;
+                    }, 1 );
+                }
+    
+                return invalid ? false : true;
+            });
+    
+            uploader.on( 'fileQueued', function( file ) {
+                count += file.size;
+            });
+    
+            uploader.on( 'fileDequeued', function( file ) {
+                count -= file.size;
+            });
+    
+            uploader.on( 'uploadFinished', function() {
+                count = 0;
+            });
+        });
+    
+        /**
+         * @property {int} [fileSingleSizeLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证单个文件大小是否超出限制, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileSingleSizeLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                max = opts.fileSingleSizeLimit;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+    
+                if ( file.size > max ) {
+                    file.setStatus( WUFile.Status.INVALID, 'exceed_size' );
+                    this.trigger( 'error', 'F_EXCEED_SIZE', file );
+                    return false;
+                }
+    
+            });
+    
+        });
+    
+        /**
+         * @property {int} [duplicate=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
+         */
+        api.addValidator( 'duplicate', function() {
+            var uploader = this,
+                opts = uploader.options,
+                mapping = {};
+    
+            if ( opts.duplicate ) {
+                return;
+            }
+    
+            function hashString( str ) {
+                var hash = 0,
+                    i = 0,
+                    len = str.length,
+                    _char;
+    
+                for ( ; i < len; i++ ) {
+                    _char = str.charCodeAt( i );
+                    hash = _char + (hash << 6) + (hash << 16) - hash;
+                }
+    
+                return hash;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+                var hash = file.__hash || (file.__hash = hashString( file.name +
+                        file.size + file.lastModifiedDate ));
+    
+                // 已经重复了
+                if ( mapping[ hash ] ) {
+                    this.trigger( 'error', 'F_DUPLICATE', file );
+                    return false;
+                }
+            });
+    
+            uploader.on( 'fileQueued', function( file ) {
+                var hash = file.__hash;
+    
+                hash && (mapping[ hash ] = true);
+            });
+    
+            uploader.on( 'fileDequeued', function( file ) {
+                var hash = file.__hash;
+    
+                hash && (delete mapping[ hash ]);
+            });
+        });
+    
+        return api;
+    });
+    
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/compbase',[],function() {
+    
+        function CompBase( owner, runtime ) {
+    
+            this.owner = owner;
+            this.options = owner.options;
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.getRuid = function() {
+                return runtime.uid;
+            };
+    
+            this.trigger = function() {
+                return owner.trigger.apply( owner, arguments );
+            };
+        }
+    
+        return CompBase;
+    });
+    /**
+     * @fileOverview Html5Runtime
+     */
+    define('runtime/html5/runtime',[
+        'base',
+        'runtime/runtime',
+        'runtime/compbase'
+    ], function( Base, Runtime, CompBase ) {
+    
+        var type = 'html5',
+            components = {};
+    
+        function Html5Runtime() {
+            var pool = {},
+                me = this,
+                destory = this.destory;
+    
+            Runtime.apply( me, arguments );
+            me.type = type;
+    
+    
+            // 这个方法的调用者，实际上是RuntimeClient
+            me.exec = function( comp, fn/*, args...*/) {
+                var client = this,
+                    uid = client.uid,
+                    args = Base.slice( arguments, 2 ),
+                    instance;
+    
+                if ( components[ comp ] ) {
+                    instance = pool[ uid ] = pool[ uid ] ||
+                            new components[ comp ]( client, me );
+    
+                    if ( instance[ fn ] ) {
+                        return instance[ fn ].apply( instance, args );
+                    }
+                }
+            };
+    
+            me.destory = function() {
+                // @todo 删除池子中的所有实例
+                return destory && destory.apply( this, arguments );
+            };
+        }
+    
+        Base.inherits( Runtime, {
+            constructor: Html5Runtime,
+    
+            // 不需要连接其他程序，直接执行callback
+            init: function() {
+                var me = this;
+                setTimeout(function() {
+                    me.trigger('ready');
+                }, 1 );
+            }
+    
+        });
+    
+        // 注册Components
+        Html5Runtime.register = function( name, component ) {
+            var klass = components[ name ] = Base.inherits( CompBase, component );
+            return klass;
+        };
+    
+        // 注册html5运行时。
+        // 只有在支持的前提下注册。
+        if ( window.Blob && window.FileReader && window.DataView ) {
+            Runtime.addRuntime( type, Html5Runtime );
+        }
+    
+        return Html5Runtime;
+    });
+    /**
+     * @fileOverview Blob Html实现
+     */
+    define('runtime/html5/blob',[
+        'runtime/html5/runtime',
+        'lib/blob'
+    ], function( Html5Runtime, Blob ) {
+    
+        return Html5Runtime.register( 'Blob', {
+            slice: function( start, end ) {
+                var blob = this.owner.source,
+                    slice = blob.slice || blob.webkitSlice || blob.mozSlice;
+    
+                blob = slice.call( blob, start, end );
+    
+                return new Blob( this.getRuid(), blob );
+            }
+        });
+    });
+    /**
+     * @fileOverview FilePaste
+     */
+    define('runtime/html5/dnd',[
+        'base',
+        'runtime/html5/runtime',
+        'lib/file'
+    ], function( Base, Html5Runtime, File ) {
+    
+        var $ = Base.$,
+            prefix = 'webuploader-dnd-';
+    
+        return Html5Runtime.register( 'DragAndDrop', {
+            init: function() {
+                var elem = this.elem = this.options.container;
+    
+                this.dragEnterHandler = Base.bindFn( this._dragEnterHandler, this );
+                this.dragOverHandler = Base.bindFn( this._dragOverHandler, this );
+                this.dragLeaveHandler = Base.bindFn( this._dragLeaveHandler, this );
+                this.dropHandler = Base.bindFn( this._dropHandler, this );
+                this.dndOver = false;
+    
+                elem.on( 'dragenter', this.dragEnterHandler );
+                elem.on( 'dragover', this.dragOverHandler );
+                elem.on( 'dragleave', this.dragLeaveHandler );
+                elem.on( 'drop', this.dropHandler );
+    
+                if ( this.options.disableGlobalDnd ) {
+                    $( document ).on( 'dragover', this.dragOverHandler );
+                    $( document ).on( 'drop', this.dropHandler );
+                }
+            },
+    
+            _dragEnterHandler: function( e ) {
+                var me = this,
+                    denied = me._denied || false,
+                    items;
+    
+                e = e.originalEvent || e;
+    
+                if ( !me.dndOver ) {
+                    me.dndOver = true;
+    
+                    // 注意只有 chrome 支持。
+                    items = e.dataTransfer.items;
+    
+                    if ( items && items.length ) {
+                        me._denied = denied = !me.trigger( 'accept', items );
+                    }
+    
+                    me.elem.addClass( prefix + 'over' );
+                    me.elem[ denied ? 'addClass' :
+                            'removeClass' ]( prefix + 'denied' );
+                }
+    
+    
+                e.dataTransfer.dropEffect = denied ? 'none' : 'copy';
+    
+                return false;
+            },
+    
+            _dragOverHandler: function( e ) {
+                // 只处理框内的。
+                var parentElem = this.elem.parent().get( 0 );
+                if ( parentElem && !$.contains( parentElem, e.currentTarget ) ) {
+                    return false;
+                }
+    
+                clearTimeout( this._leaveTimer );
+                this._dragEnterHandler.call( this, e );
+    
+                return false;
+            },
+    
+            _dragLeaveHandler: function() {
+                var me = this,
+                    handler;
+    
+                handler = function() {
+                    me.dndOver = false;
+                    me.elem.removeClass( prefix + 'over ' + prefix + 'denied' );
+                };
+    
+                clearTimeout( me._leaveTimer );
+                me._leaveTimer = setTimeout( handler, 100 );
+                return false;
+            },
+    
+            _dropHandler: function( e ) {
+                var me = this,
+                    ruid = me.getRuid(),
+                    parentElem = me.elem.parent().get( 0 );
+    
+                // 只处理框内的。
+                if ( parentElem && !$.contains( parentElem, e.currentTarget ) ) {
+                    return false;
+                }
+    
+                me._getTansferFiles( e, function( results ) {
+                    me.trigger( 'drop', $.map( results, function( file ) {
+                        return new File( ruid, file );
+                    }) );
+                });
+    
+                me.dndOver = false;
+                me.elem.removeClass( prefix + 'over' );
+                return false;
+            },
+    
+            // 如果传入 callback 则去查看文件夹，否则只管当前文件夹。
+            _getTansferFiles: function( e, callback ) {
+                var results  = [],
+                    promises = [],
+                    items, files, dataTransfer, file, item, i, len, canAccessFolder;
+    
+                e = e.originalEvent || e;
+    
+                dataTransfer = e.dataTransfer;
+                items = dataTransfer.items;
+                files = dataTransfer.files;
+    
+                canAccessFolder = !!(items && items[ 0 ].webkitGetAsEntry);
+    
+                for ( i = 0, len = files.length; i < len; i++ ) {
+                    file = files[ i ];
+                    item = items && items[ i ];
+    
+                    if ( canAccessFolder && item.webkitGetAsEntry().isDirectory ) {
+    
+                        promises.push( this._traverseDirectoryTree(
+                                item.webkitGetAsEntry(), results ) );
+                    } else {
+                        results.push( file );
+                    }
+                }
+    
+                Base.when.apply( Base, promises ).done(function() {
+    
+                    if ( !results.length ) {
+                        return;
+                    }
+    
+                    callback( results );
+                });
+            },
+    
+            _traverseDirectoryTree: function( entry, results ) {
+                var deferred = Base.Deferred(),
+                    me = this;
+    
+                if ( entry.isFile ) {
+                    entry.file(function( file ) {
+                        results.push( file );
+                        deferred.resolve();
+                    });
+                } else if ( entry.isDirectory ) {
+                    entry.createReader().readEntries(function( entries ) {
+                        var len = entries.length,
+                            promises = [],
+                            arr = [],    // 为了保证顺序。
+                            i;
+    
+                        for ( i = 0; i < len; i++ ) {
+                            promises.push( me._traverseDirectoryTree(
+                                    entries[ i ], arr ) );
+                        }
+    
+                        Base.when.apply( Base, promises ).then(function() {
+                            results.push.apply( results, arr );
+                            deferred.resolve();
+                        }, deferred.reject );
+                    });
+                }
+    
+                return deferred.promise();
+            },
+    
+            destroy: function() {
+                var elem = this.elem;
+    
+                elem.off( 'dragenter', this.dragEnterHandler );
+                elem.off( 'dragover', this.dragEnterHandler );
+                elem.off( 'dragleave', this.dragLeaveHandler );
+                elem.off( 'drop', this.dropHandler );
+    
+                if ( this.options.disableGlobalDnd ) {
+                    $( document ).off( 'dragover', this.dragOverHandler );
+                    $( document ).off( 'drop', this.dropHandler );
+                }
+            }
+        });
+    });
+    
+    /**
+     * @fileOverview FilePaste
+     */
+    define('runtime/html5/filepaste',[
+        'base',
+        'runtime/html5/runtime',
+        'lib/file'
+    ], function( Base, Html5Runtime, File ) {
+    
+        return Html5Runtime.register( 'FilePaste', {
+            init: function() {
+                var opts = this.options,
+                    elem = this.elem = opts.container,
+                    accept = '.*',
+                    arr, i, len, item;
+    
+                // accetp的mimeTypes中生成匹配正则。
+                if ( opts.accept ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        item = opts.accept[ i ].mimeTypes;
+                        item && arr.push( item );
+                    }
+    
+                    if ( arr.length ) {
+                        accept = arr.join(',');
+                        accept = accept.replace( /,/g, '|' ).replace( /\*/g, '.*' );
+                    }
+                }
+                this.accept = accept = new RegExp( accept, 'i' );
+                this.hander = Base.bindFn( this._pasteHander, this );
+                elem.on( 'paste', this.hander );
+            },
+    
+            _pasteHander: function( e ) {
+                var allowed = [],
+                    ruid = this.getRuid(),
+                    items, item, blob, i, len;
+    
+                e = e.originalEvent || e;
+                items = e.clipboardData.items;
+    
+                for ( i = 0, len = items.length; i < len; i++ ) {
+                    item = items[ i ];
+    
+                    if ( item.kind !== 'file' || !(blob = item.getAsFile()) ) {
+                        continue;
+                    }
+    
+                    allowed.push( new File( ruid, blob ) );
+                }
+    
+                if ( allowed.length ) {
+                    // 不阻止非文件粘贴（文字粘贴）的事件冒泡
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.trigger( 'paste', allowed );
+                }
+            },
+    
+            destroy: function() {
+                this.elem.off( 'paste', this.hander );
+            }
+        });
+    });
+    
+    /**
+     * @fileOverview FilePicker
+     */
+    define('runtime/html5/filepicker',[
+        'base',
+        'runtime/html5/runtime'
+    ], function( Base, Html5Runtime ) {
+    
+        var $ = Base.$;
+    
+        return Html5Runtime.register( 'FilePicker', {
+            init: function() {
+                var container = this.getRuntime().getContainer(),
+                    me = this,
+                    owner = me.owner,
+                    opts = me.options,
+                    lable = $( document.createElement('label') ),
+                    input = $( document.createElement('input') ),
+                    arr, i, len, mouseHandler;
+    
+                input.attr( 'type', 'file' );
+                input.attr( 'name', opts.name );
+                input.addClass('webuploader-element-invisible');
+    
+                lable.on( 'click', function() {
+                    input.trigger('click');
+                });
+    
+                lable.css({
+                    opacity: 0,
+                    width: '100%',
+                    height: '100%',
+                    display: 'block',
+                    cursor: 'pointer',
+                    background: '#ffffff'
+                });
+    
+                if ( opts.multiple ) {
+                    input.attr( 'multiple', 'multiple' );
+                }
+    
+                // @todo Firefox不支持单独指定后缀
+                if ( opts.accept && opts.accept.length > 0 ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        arr.push( opts.accept[ i ].mimeTypes );
+                    }
+    
+                    input.attr( 'accept', arr.join(',') );
+                }
+    
+                container.append( input );
+                container.append( lable );
+    
+                mouseHandler = function( e ) {
+                    owner.trigger( e.type );
+                };
+    
+                input.on( 'change', function( e ) {
+                    var fn = arguments.callee,
+                        clone;
+    
+                    me.files = e.target.files;
+    
+                    // reset input
+                    clone = this.cloneNode( true );
+                    this.parentNode.replaceChild( clone, this );
+    
+                    input.off();
+                    input = $( clone ).on( 'change', fn )
+                            .on( 'mouseenter mouseleave', mouseHandler );
+    
+                    owner.trigger('change');
+                });
+    
+                lable.on( 'mouseenter mouseleave', mouseHandler );
+    
+            },
+    
+    
+            getFiles: function() {
+                return this.files;
+            },
+    
+            destroy: function() {
+                // todo
+            }
+        });
+    });
+    /**
+     * Terms:
+     *
+     * Uint8Array, FileReader, BlobBuilder, atob, ArrayBuffer
+     * @fileOverview Image控件
+     */
+    define('runtime/html5/util',[
+        'base'
+    ], function( Base ) {
+    
+        var urlAPI = window.createObjectURL && window ||
+                window.URL && URL.revokeObjectURL && URL ||
+                window.webkitURL,
+            createObjectURL = Base.noop,
+            revokeObjectURL = createObjectURL;
+    
+        if ( urlAPI ) {
+    
+            // 更安全的方式调用，比如android里面就能把context改成其他的对象。
+            createObjectURL = function() {
+                return urlAPI.createObjectURL.apply( urlAPI, arguments );
+            };
+    
+            revokeObjectURL = function() {
+                return urlAPI.revokeObjectURL.apply( urlAPI, arguments );
+            };
+        }
+    
+        return {
+            createObjectURL: createObjectURL,
+            revokeObjectURL: revokeObjectURL,
+    
+            dataURL2Blob: function( dataURI ) {
+                var byteStr, intArray, ab, i, mimetype, parts;
+    
+                parts = dataURI.split(',');
+    
+                if ( ~parts[ 0 ].indexOf('base64') ) {
+                    byteStr = atob( parts[ 1 ] );
+                } else {
+                    byteStr = decodeURIComponent( parts[ 1 ] );
+                }
+    
+                ab = new ArrayBuffer( byteStr.length );
+                intArray = new Uint8Array( ab );
+    
+                for ( i = 0; i < byteStr.length; i++ ) {
+                    intArray[ i ] = byteStr.charCodeAt( i );
+                }
+    
+                mimetype = parts[ 0 ].split(':')[ 1 ].split(';')[ 0 ];
+    
+                return this.arrayBufferToBlob( ab, mimetype );
+            },
+    
+            dataURL2ArrayBuffer: function( dataURI ) {
+                var byteStr, intArray, i, parts;
+    
+                parts = dataURI.split(',');
+    
+                if ( ~parts[ 0 ].indexOf('base64') ) {
+                    byteStr = atob( parts[ 1 ] );
+                } else {
+                    byteStr = decodeURIComponent( parts[ 1 ] );
+                }
+    
+                intArray = new Uint8Array( byteStr.length );
+    
+                for ( i = 0; i < byteStr.length; i++ ) {
+                    intArray[ i ] = byteStr.charCodeAt( i );
+                }
+    
+                return intArray.buffer;
+            },
+    
+            arrayBufferToBlob: function( buffer, type ) {
+                var builder = window.BlobBuilder || window.WebKitBlobBuilder,
+                    bb;
+    
+                // android不支持直接new Blob, 只能借助blobbuilder.
+                if ( builder ) {
+                    bb = new builder();
+                    bb.append( buffer );
+                    return bb.getBlob( type );
+                }
+    
+                return new Blob([ buffer ], type ? { type: type } : {} );
+            },
+    
+            // 抽出来主要是为了解决android下面canvas.toDataUrl不支持jpeg.
+            // 你得到的结果是png.
+            canvasToDataUrl: function( canvas, type, quality ) {
+                return canvas.toDataURL( type, quality / 100 );
+            },
+    
+            // imagemeat会复写这个方法，如果用户选择加载那个文件了的话。
+            parseMeta: function( blob, callback ) {
+                callback( false, {});
+            },
+    
+            // imagemeat会复写这个方法，如果用户选择加载那个文件了的话。
+            updateImageHead: function( data ) {
+                return data;
+            }
+        };
+    });
+    /**
+     * Terms:
+     *
+     * Uint8Array, FileReader, BlobBuilder, atob, ArrayBuffer
+     * @fileOverview Image控件
+     */
+    define('runtime/html5/imagemeta',[
+        'runtime/html5/util'
+    ], function( Util ) {
+    
+        var api;
+    
+        api = {
+            parsers: {
+                0xffe1: []
+            },
+    
+            maxMetaDataSize: 262144,
+    
+            parse: function( blob, cb ) {
+                var me = this,
+                    fr = new FileReader();
+    
+                fr.onload = function() {
+                    cb( false, me._parse( this.result ) );
+                    fr = fr.onload = fr.onerror = null;
+                };
+    
+                fr.onerror = function( e ) {
+                    cb( e.message );
+                    fr = fr.onload = fr.onerror = null;
+                };
+    
+                blob = blob.slice( 0, me.maxMetaDataSize );
+                fr.readAsArrayBuffer( blob.getSource() );
+            },
+    
+            _parse: function( buffer, noParse ) {
+                if ( buffer.byteLength < 6 ) {
+                    return;
+                }
+    
+                var dataview = new DataView( buffer ),
+                    offset = 2,
+                    maxOffset = dataview.byteLength - 4,
+                    headLength = offset,
+                    ret = {},
+                    markerBytes, markerLength, parsers, i;
+    
+                if ( dataview.getUint16( 0 ) === 0xffd8 ) {
+    
+                    while ( offset < maxOffset ) {
+                        markerBytes = dataview.getUint16( offset );
+    
+                        if ( markerBytes >= 0xffe0 && markerBytes <= 0xffef ||
+                                markerBytes === 0xfffe ) {
+    
+                            markerLength = dataview.getUint16( offset + 2 ) + 2;
+    
+                            if ( offset + markerLength > dataview.byteLength ) {
+                                break;
+                            }
+    
+                            parsers = api.parsers[ markerBytes ];
+    
+                            if ( !noParse && parsers ) {
+                                for ( i = 0; i < parsers.length; i += 1 ) {
+                                    parsers[ i ].call( api, dataview, offset,
+                                            markerLength, ret );
+                                }
+                            }
+    
+                            offset += markerLength;
+                            headLength = offset;
+                        } else {
+                            break;
+                        }
+                    }
+    
+                    if ( headLength > 6 ) {
+                        if ( buffer.slice ) {
+                            ret.imageHead = buffer.slice( 2, headLength );
+                        } else {
+                            // Workaround for IE10, which does not yet
+                            // support ArrayBuffer.slice:
+                            ret.imageHead = new Uint8Array( buffer )
+                                    .subarray( 2, headLength );
+                        }
+                    }
+                }
+    
+                return ret;
+            },
+    
+            updateImageHead: function( buffer, head ) {
+                var data = this._parse( buffer, true ),
+                    buf1, buf2, bodyoffset;
+    
+    
+                bodyoffset = 2;
+                if ( data.imageHead ) {
+                    bodyoffset = 2 + data.imageHead.byteLength;
+                }
+    
+                if ( buffer.slice ) {
+                    buf2 = buffer.slice( bodyoffset );
+                } else {
+                    buf2 = new Uint8Array( buffer ).subarray( bodyoffset );
+                }
+    
+                buf1 = new Uint8Array( head.byteLength + 2 + buf2.byteLength );
+    
+                buf1[ 0 ] = 0xFF;
+                buf1[ 1 ] = 0xD8;
+                buf1.set( new Uint8Array( head ), 2 );
+                buf1.set( new Uint8Array( buf2 ), head.byteLength + 2 );
+    
+                return buf1.buffer;
+            }
+        };
+    
+        Util.parseMeta = function() {
+            return api.parse.apply( api, arguments );
+        };
+    
+        Util.updateImageHead = function() {
+            return api.updateImageHead.apply( api, arguments );
+        };
+    
+        return api;
+    });
+    /**
+     * 代码来自于：https://github.com/blueimp/JavaScript-Load-Image
+     * 暂时项目中只用了orientation.
+     *
+     * 去除了 Exif Sub IFD Pointer, GPS Info IFD Pointer, Exif Thumbnail.
+     * @fileOverview EXIF解析
+     */
+    
+    // Sample
+    // ====================================
+    // Make : Apple
+    // Model : iPhone 4S
+    // Orientation : 1
+    // XResolution : 72 [72/1]
+    // YResolution : 72 [72/1]
+    // ResolutionUnit : 2
+    // Software : QuickTime 7.7.1
+    // DateTime : 2013:09:01 22:53:55
+    // ExifIFDPointer : 190
+    // ExposureTime : 0.058823529411764705 [1/17]
+    // FNumber : 2.4 [12/5]
+    // ExposureProgram : Normal program
+    // ISOSpeedRatings : 800
+    // ExifVersion : 0220
+    // DateTimeOriginal : 2013:09:01 22:52:51
+    // DateTimeDigitized : 2013:09:01 22:52:51
+    // ComponentsConfiguration : YCbCr
+    // ShutterSpeedValue : 4.058893515764426
+    // ApertureValue : 2.5260688216892597 [4845/1918]
+    // BrightnessValue : -0.3126686601998395
+    // MeteringMode : Pattern
+    // Flash : Flash did not fire, compulsory flash mode
+    // FocalLength : 4.28 [107/25]
+    // SubjectArea : [4 values]
+    // FlashpixVersion : 0100
+    // ColorSpace : 1
+    // PixelXDimension : 2448
+    // PixelYDimension : 3264
+    // SensingMethod : One-chip color area sensor
+    // ExposureMode : 0
+    // WhiteBalance : Auto white balance
+    // FocalLengthIn35mmFilm : 35
+    // SceneCaptureType : Standard
+    define('runtime/html5/imagemeta/exif',[
+        'base',
+        'runtime/html5/imagemeta'
+    ], function( Base, ImageMeta ) {
+    
+        var EXIF = {};
+    
+        EXIF.ExifMap = function() {
+            return this;
+        };
+    
+        EXIF.ExifMap.prototype.map = {
+            'Orientation': 0x0112
+        };
+    
+        EXIF.ExifMap.prototype.get = function( id ) {
+            return this[ id ] || this[ this.map[ id ] ];
+        };
+    
+        EXIF.exifTagTypes = {
+            // byte, 8-bit unsigned int:
+            1: {
+                getValue: function( dataView, dataOffset ) {
+                    return dataView.getUint8( dataOffset );
+                },
+                size: 1
+            },
+    
+            // ascii, 8-bit byte:
+            2: {
+                getValue: function( dataView, dataOffset ) {
+                    return String.fromCharCode( dataView.getUint8( dataOffset ) );
+                },
+                size: 1,
+                ascii: true
+            },
+    
+            // short, 16 bit int:
+            3: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getUint16( dataOffset, littleEndian );
+                },
+                size: 2
+            },
+    
+            // long, 32 bit int:
+            4: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getUint32( dataOffset, littleEndian );
+                },
+                size: 4
+            },
+    
+            // rational = two long values,
+            // first is numerator, second is denominator:
+            5: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getUint32( dataOffset, littleEndian ) /
+                        dataView.getUint32( dataOffset + 4, littleEndian );
+                },
+                size: 8
+            },
+    
+            // slong, 32 bit signed int:
+            9: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getInt32( dataOffset, littleEndian );
+                },
+                size: 4
+            },
+    
+            // srational, two slongs, first is numerator, second is denominator:
+            10: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getInt32( dataOffset, littleEndian ) /
+                        dataView.getInt32( dataOffset + 4, littleEndian );
+                },
+                size: 8
+            }
+        };
+    
+        // undefined, 8-bit byte, value depending on field:
+        EXIF.exifTagTypes[ 7 ] = EXIF.exifTagTypes[ 1 ];
+    
+        EXIF.getExifValue = function( dataView, tiffOffset, offset, type, length,
+                littleEndian ) {
+    
+            var tagType = EXIF.exifTagTypes[ type ],
+                tagSize, dataOffset, values, i, str, c;
+    
+            if ( !tagType ) {
+                Base.log('Invalid Exif data: Invalid tag type.');
+                return;
+            }
+    
+            tagSize = tagType.size * length;
+    
+            // Determine if the value is contained in the dataOffset bytes,
+            // or if the value at the dataOffset is a pointer to the actual data:
+            dataOffset = tagSize > 4 ? tiffOffset + dataView.getUint32( offset + 8,
+                    littleEndian ) : (offset + 8);
+    
+            if ( dataOffset + tagSize > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid data offset.');
+                return;
+            }
+    
+            if ( length === 1 ) {
+                return tagType.getValue( dataView, dataOffset, littleEndian );
+            }
+    
+            values = [];
+    
+            for ( i = 0; i < length; i += 1 ) {
+                values[ i ] = tagType.getValue( dataView,
+                        dataOffset + i * tagType.size, littleEndian );
+            }
+    
+            if ( tagType.ascii ) {
+                str = '';
+    
+                // Concatenate the chars:
+                for ( i = 0; i < values.length; i += 1 ) {
+                    c = values[ i ];
+    
+                    // Ignore the terminating NULL byte(s):
+                    if ( c === '\u0000' ) {
+                        break;
+                    }
+                    str += c;
+                }
+    
+                return str;
+            }
+            return values;
+        };
+    
+        EXIF.parseExifTag = function( dataView, tiffOffset, offset, littleEndian,
+                data ) {
+    
+            var tag = dataView.getUint16( offset, littleEndian );
+            data.exif[ tag ] = EXIF.getExifValue( dataView, tiffOffset, offset,
+                    dataView.getUint16( offset + 2, littleEndian ),    // tag type
+                    dataView.getUint32( offset + 4, littleEndian ),    // tag length
+                    littleEndian );
+        };
+    
+        EXIF.parseExifTags = function( dataView, tiffOffset, dirOffset,
+                littleEndian, data ) {
+    
+            var tagsNumber, dirEndOffset, i;
+    
+            if ( dirOffset + 6 > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid directory offset.');
+                return;
+            }
+    
+            tagsNumber = dataView.getUint16( dirOffset, littleEndian );
+            dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+    
+            if ( dirEndOffset + 4 > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid directory size.');
+                return;
+            }
+    
+            for ( i = 0; i < tagsNumber; i += 1 ) {
+                this.parseExifTag( dataView, tiffOffset,
+                        dirOffset + 2 + 12 * i,    // tag offset
+                        littleEndian, data );
+            }
+    
+            // Return the offset to the next directory:
+            return dataView.getUint32( dirEndOffset, littleEndian );
+        };
+    
+        // EXIF.getExifThumbnail = function(dataView, offset, length) {
+        //     var hexData,
+        //         i,
+        //         b;
+        //     if (!length || offset + length > dataView.byteLength) {
+        //         Base.log('Invalid Exif data: Invalid thumbnail data.');
+        //         return;
+        //     }
+        //     hexData = [];
+        //     for (i = 0; i < length; i += 1) {
+        //         b = dataView.getUint8(offset + i);
+        //         hexData.push((b < 16 ? '0' : '') + b.toString(16));
+        //     }
+        //     return 'data:image/jpeg,%' + hexData.join('%');
+        // };
+    
+        EXIF.parseExifData = function( dataView, offset, length, data ) {
+    
+            var tiffOffset = offset + 10,
+                littleEndian, dirOffset;
+    
+            // Check for the ASCII code for "Exif" (0x45786966):
+            if ( dataView.getUint32( offset + 4 ) !== 0x45786966 ) {
+                // No Exif data, might be XMP data instead
+                return;
+            }
+            if ( tiffOffset + 8 > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid segment size.');
+                return;
+            }
+    
+            // Check for the two null bytes:
+            if ( dataView.getUint16( offset + 8 ) !== 0x0000 ) {
+                Base.log('Invalid Exif data: Missing byte alignment offset.');
+                return;
+            }
+    
+            // Check the byte alignment:
+            switch ( dataView.getUint16( tiffOffset ) ) {
+                case 0x4949:
+                    littleEndian = true;
+                    break;
+    
+                case 0x4D4D:
+                    littleEndian = false;
+                    break;
+    
+                default:
+                    Base.log('Invalid Exif data: Invalid byte alignment marker.');
+                    return;
+            }
+    
+            // Check for the TIFF tag marker (0x002A):
+            if ( dataView.getUint16( tiffOffset + 2, littleEndian ) !== 0x002A ) {
+                Base.log('Invalid Exif data: Missing TIFF marker.');
+                return;
+            }
+    
+            // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+            dirOffset = dataView.getUint32( tiffOffset + 4, littleEndian );
+            // Create the exif object to store the tags:
+            data.exif = new EXIF.ExifMap();
+            // Parse the tags of the main image directory and retrieve the
+            // offset to the next directory, usually the thumbnail directory:
+            dirOffset = EXIF.parseExifTags( dataView, tiffOffset,
+                    tiffOffset + dirOffset, littleEndian, data );
+    
+            // 尝试读取缩略图
+            // if ( dirOffset ) {
+            //     thumbnailData = {exif: {}};
+            //     dirOffset = EXIF.parseExifTags(
+            //         dataView,
+            //         tiffOffset,
+            //         tiffOffset + dirOffset,
+            //         littleEndian,
+            //         thumbnailData
+            //     );
+    
+            //     // Check for JPEG Thumbnail offset:
+            //     if (thumbnailData.exif[0x0201]) {
+            //         data.exif.Thumbnail = EXIF.getExifThumbnail(
+            //             dataView,
+            //             tiffOffset + thumbnailData.exif[0x0201],
+            //             thumbnailData.exif[0x0202] // Thumbnail data length
+            //         );
+            //     }
+            // }
+        };
+    
+        ImageMeta.parsers[ 0xffe1 ].push( EXIF.parseExifData );
+        return EXIF;
+    });
+    /**
+     * @fileOverview Image
+     */
+    define('runtime/html5/image',[
+        'base',
+        'runtime/html5/runtime',
+        'runtime/html5/util'
+    ], function( Base, Html5Runtime, Util ) {
+    
+        var BLANK = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D';
+    
+        return Html5Runtime.register( 'Image', {
+    
+            // flag: 标记是否被修改过。
+            modified: false,
+    
+            init: function() {
+                var me = this,
+                    img = new Image();
+    
+                img.onload = function() {
+    
+                    me._info = {
+                        type: me.type,
+                        width: this.width,
+                        height: this.height
+                    };
+    
+                    // 读取meta信息。
+                    if ( !me._metas && 'image/jpeg' === me.type ) {
+                        Util.parseMeta( me._blob, function( error, ret ) {
+                            me._metas = ret;
+                            me.owner.trigger('load');
+                        });
+                    } else {
+                        me.owner.trigger('load');
+                    }
+                };
+    
+                img.onerror = function() {
+                    me.owner.trigger('error');
+                };
+    
+                me._img = img;
+            },
+    
+            loadFromBlob: function( blob ) {
+                var me = this,
+                    img = me._img;
+    
+                me._blob = blob;
+                me.type = blob.type;
+                img.src = Util.createObjectURL( blob.getSource() );
+                me.owner.once( 'load', function() {
+                    Util.revokeObjectURL( img.src );
+                });
+            },
+    
+            resize: function( width, height ) {
+                var canvas = this._canvas ||
+                        (this._canvas = document.createElement('canvas'));
+    
+                this._resize( this._img, canvas, width, height );
+                this._blob = null;    // 没用了，可以删掉了。
+                this.modified = true;
+                this.owner.trigger('complete');
+            },
+    
+            getAsBlob: function( type ) {
+                var blob = this._blob,
+                    opts = this.options,
+                    canvas;
+    
+                type = type || this.type;
+    
+                // blob需要重新生成。
+                if ( this.modified || this.type !== type ) {
+                    canvas = this._canvas;
+    
+                    if ( type === 'image/jpeg' ) {
+    
+                        blob = Util.canvasToDataUrl( canvas, 'image/jpeg',
+                                opts.quality );
+    
+                        if ( opts.preserveHeaders && this._metas &&
+                                this._metas.imageHead ) {
+    
+                            blob = Util.dataURL2ArrayBuffer( blob );
+                            blob = Util.updateImageHead( blob,
+                                    this._metas.imageHead );
+                            blob = Util.arrayBufferToBlob( blob, type );
+                            return blob;
+                        }
+                    } else {
+                        blob = Util.canvasToDataUrl( canvas, type );
+                    }
+    
+                    blob = Util.dataURL2Blob( blob );
+                }
+    
+                return blob;
+            },
+    
+            getAsDataUrl: function( type ) {
+                var opts = this.options;
+    
+                type = type || this.type;
+    
+                if ( type === 'image/jpeg' ) {
+                    return Util.canvasToDataUrl( this._canvas, type, opts.quality );
+                } else {
+                    return this._canvas.toDataURL( type );
+                }
+            },
+    
+            getOrientation: function() {
+                return this._metas && this._metas.exif &&
+                        this._metas.exif.get('Orientation') || 1;
+            },
+    
+            info: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._info = val;
+                    return this;
+                }
+    
+                // getter
+                return this._info;
+            },
+    
+            meta: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._meta = val;
+                    return this;
+                }
+    
+                // getter
+                return this._meta;
+            },
+    
+            destroy: function() {
+                var canvas = this._canvas;
+                this._img.onload = null;
+    
+                if ( canvas ) {
+                    canvas.getContext('2d')
+                            .clearRect( 0, 0, canvas.width, canvas.height );
+                    canvas.width = canvas.height = 0;
+                    this._canvas = null;
+                }
+    
+                // 释放内存。非常重要，否则释放不了image的内存。
+                this._img.src = BLANK;
+                this._img = this._blob = null;
+            },
+    
+            _resize: function( img, cvs, width, height ) {
+                var opts = this.options,
+                    naturalWidth = img.width,
+                    naturalHeight = img.height,
+                    orientation = this.getOrientation(),
+                    scale, w, h, x, y;
+    
+                // values that require 90 degree rotation
+                if ( ~[ 5, 6, 7, 8 ].indexOf( orientation ) ) {
+    
+                    // 交换width, height的值。
+                    width ^= height;
+                    height ^= width;
+                    width ^= height;
+                }
+    
+                scale = Math[ opts.crop ? 'max' : 'min' ]( width / naturalWidth,
+                        height / naturalHeight );
+    
+                // 不允许放大。
+                opts.allowMagnify || (scale = Math.min( 1, scale ));
+    
+                w = naturalWidth * scale;
+                h = naturalHeight * scale;
+    
+                if ( opts.crop ) {
+                    cvs.width = width;
+                    cvs.height = height;
+                } else {
+                    cvs.width = w;
+                    cvs.height = h;
+                }
+    
+                x = (cvs.width - w) / 2;
+                y = (cvs.height - h) / 2;
+    
+                opts.preserveHeaders || this._rotate2Orientaion( cvs, orientation );
+    
+                this._renderImageToCanvas( cvs, img, x, y, w, h );
+            },
+    
+            _rotate2Orientaion: function( canvas, orientation ) {
+                var width = canvas.width,
+                    height = canvas.height,
+                    ctx = canvas.getContext('2d');
+    
+                switch ( orientation ) {
+                    case 5:
+                    case 6:
+                    case 7:
+                    case 8:
+                        canvas.width = height;
+                        canvas.height = width;
+                        break;
+                }
+    
+                switch ( orientation ) {
+                    case 2:    // horizontal flip
+                        ctx.translate( width, 0 );
+                        ctx.scale( -1, 1 );
+                        break;
+    
+                    case 3:    // 180 rotate left
+                        ctx.translate( width, height );
+                        ctx.rotate( Math.PI );
+                        break;
+    
+                    case 4:    // vertical flip
+                        ctx.translate( 0, height );
+                        ctx.scale( 1, -1 );
+                        break;
+    
+                    case 5:    // vertical flip + 90 rotate right
+                        ctx.rotate( 0.5 * Math.PI );
+                        ctx.scale( 1, -1 );
+                        break;
+    
+                    case 6:    // 90 rotate right
+                        ctx.rotate( 0.5 * Math.PI );
+                        ctx.translate( 0, -height );
+                        break;
+    
+                    case 7:    // horizontal flip + 90 rotate right
+                        ctx.rotate( 0.5 * Math.PI );
+                        ctx.translate( width, -height );
+                        ctx.scale( -1, 1 );
+                        break;
+    
+                    case 8:    // 90 rotate left
+                        ctx.rotate( -0.5 * Math.PI );
+                        ctx.translate( -width, 0 );
+                        break;
+                }
+            },
+    
+            // https://github.com/stomita/ios-imagefile-megapixel/
+            // blob/master/src/megapix-image.js
+            _renderImageToCanvas: (function() {
+    
+                // 如果不是ios, 不需要这么复杂！
+                if ( !Base.os.ios ) {
+                    return function( canvas, img, x, y, w, h ) {
+                        canvas.getContext('2d').drawImage( img, x, y, w, h );
+                    };
+                }
+    
+                /**
+                 * Detecting vertical squash in loaded image.
+                 * Fixes a bug which squash image vertically while drawing into
+                 * canvas for some images.
+                 */
+                function detectVerticalSquash( img, iw, ih ) {
+                    var canvas = document.createElement('canvas'),
+                        ctx = canvas.getContext('2d'),
+                        sy = 0,
+                        ey = ih,
+                        py = ih,
+                        data, alpha, ratio;
+    
+    
+                    canvas.width = 1;
+                    canvas.height = ih;
+                    ctx.drawImage( img, 0, 0 );
+                    data = ctx.getImageData( 0, 0, 1, ih ).data;
+    
+                    // search image edge pixel position in case
+                    // it is squashed vertically.
+                    while ( py > sy ) {
+                        alpha = data[ (py - 1) * 4 + 3 ];
+    
+                        if ( alpha === 0 ) {
+                            ey = py;
+                        } else {
+                            sy = py;
+                        }
+    
+                        py = (ey + sy) >> 1;
+                    }
+    
+                    ratio = (py / ih);
+                    return (ratio === 0) ? 1 : ratio;
+                }
+    
+                // fix ie7 bug
+                // http://stackoverflow.com/questions/11929099/
+                // html5-canvas-drawimage-ratio-bug-ios
+                if ( Base.os.ios >= 7 ) {
+                    return function( canvas, img, x, y, w, h ) {
+                        var iw = img.naturalWidth,
+                            ih = img.naturalHeight,
+                            vertSquashRatio = detectVerticalSquash( img, iw, ih );
+    
+                        return canvas.getContext('2d').drawImage( img, 0, 0,
+                            iw * vertSquashRatio, ih * vertSquashRatio,
+                            x, y, w, h );
+                    };
+                }
+    
+                /**
+                 * Detect subsampling in loaded image.
+                 * In iOS, larger images than 2M pixels may be
+                 * subsampled in rendering.
+                 */
+                function detectSubsampling( img ) {
+                    var iw = img.naturalWidth,
+                        ih = img.naturalHeight,
+                        canvas, ctx;
+    
+                    // subsampling may happen overmegapixel image
+                    if ( iw * ih > 1024 * 1024 ) {
+                        canvas = document.createElement('canvas');
+                        canvas.width = canvas.height = 1;
+                        ctx = canvas.getContext('2d');
+                        ctx.drawImage( img, -iw + 1, 0 );
+    
+                        // subsampled image becomes half smaller in rendering size.
+                        // check alpha channel value to confirm image is covering
+                        // edge pixel or not. if alpha value is 0
+                        // image is not covering, hence subsampled.
+                        return ctx.getImageData( 0, 0, 1, 1 ).data[ 3 ] === 0;
+                    } else {
+                        return false;
+                    }
+                }
+    
+    
+                return function( canvas, img, x, y, width, height ) {
+                    var iw = img.naturalWidth,
+                        ih = img.naturalHeight,
+                        ctx = canvas.getContext('2d'),
+                        subsampled = detectSubsampling( img ),
+                        doSquash = this.type === 'image/jpeg',
+                        d = 1024,
+                        sy = 0,
+                        dy = 0,
+                        tmpCanvas, tmpCtx, vertSquashRatio, dw, dh, sx, dx;
+    
+                    if ( subsampled ) {
+                        iw /= 2;
+                        ih /= 2;
+                    }
+    
+                    ctx.save();
+                    tmpCanvas = document.createElement('canvas');
+                    tmpCanvas.width = tmpCanvas.height = d;
+    
+                    tmpCtx = tmpCanvas.getContext('2d');
+                    vertSquashRatio = doSquash ?
+                            detectVerticalSquash( img, iw, ih ) : 1;
+    
+                    dw = Math.ceil( d * width / iw );
+                    dh = Math.ceil( d * height / ih / vertSquashRatio );
+    
+                    while ( sy < ih ) {
+                        sx = 0;
+                        dx = 0;
+                        while ( sx < iw ) {
+                            tmpCtx.clearRect( 0, 0, d, d );
+                            tmpCtx.drawImage( img, -sx, -sy );
+                            ctx.drawImage( tmpCanvas, 0, 0, d, d,
+                                    x + dx, y + dy, dw, dh );
+                            sx += d;
+                            dx += dw;
+                        }
+                        sy += d;
+                        dy += dh;
+                    }
+                    ctx.restore();
+                    tmpCanvas = tmpCtx = null;
+                };
+            })()
+        });
+    });
+    /**
+     * @fileOverview Transport
+     * @todo 支持chunked传输，优势：
+     * 可以将大文件分成小块，挨个传输，可以提高大文件成功率，当失败的时候，也只需要重传那小部分，
+     * 而不需要重头再传一次。另外断点续传也需要用chunked方式。
+     */
+    define('runtime/html5/transport',[
+        'base',
+        'runtime/html5/runtime'
+    ], function( Base, Html5Runtime ) {
+    
+        var noop = Base.noop,
+            $ = Base.$;
+    
+        return Html5Runtime.register( 'Transport', {
+            init: function() {
+                this._status = 0;
+                this._response = null;
+            },
+    
+            send: function() {
+                var owner = this.owner,
+                    opts = this.options,
+                    xhr = this._initAjax(),
+                    blob = owner._blob,
+                    server = opts.server,
+                    formData, binary, fr;
+    
+                if ( opts.sendAsBinary ) {
+                    server += (/\?/.test( server ) ? '&' : '?') +
+                            $.param( owner._formData );
+    
+                    binary = blob.getSource();
+                } else {
+                    formData = new FormData();
+                    $.each( owner._formData, function( k, v ) {
+                        formData.append( k, v );
+                    });
+    
+                    formData.append( opts.fileVal, blob.getSource(),
+                            opts.filename || owner._formData.name || '' );
+                }
+    
+                if ( opts.withCredentials && 'withCredentials' in xhr ) {
+                    xhr.open( opts.method, server, true );
+                    xhr.withCredentials = true;
+                } else {
+                    xhr.open( opts.method, server );
+                }
+    
+                this._setRequestHeader( xhr, opts.headers );
+    
+                if ( binary ) {
+                    xhr.overrideMimeType('application/octet-stream');
+    
+                    // android直接发送blob会导致服务端接收到的是空文件。
+                    // bug详情。
+                    // https://code.google.com/p/android/issues/detail?id=39882
+                    // 所以先用fileReader读取出来再通过arraybuffer的方式发送。
+                    if ( Base.os.android ) {
+                        fr = new FileReader();
+    
+                        fr.onload = function() {
+                            xhr.send( this.result );
+                            fr = fr.onload = null;
+                        };
+    
+                        fr.readAsArrayBuffer( binary );
+                    } else {
+                        xhr.send( binary );
+                    }
+                } else {
+                    xhr.send( formData );
+                }
+            },
+    
+            getResponse: function() {
+                return this._response;
+            },
+    
+            getResponseAsJson: function() {
+                return this._parseJson( this._response );
+            },
+    
+            getStatus: function() {
+                return this._status;
+            },
+    
+            abort: function() {
+                var xhr = this._xhr;
+    
+                if ( xhr ) {
+                    xhr.upload.onprogress = noop;
+                    xhr.onreadystatechange = noop;
+                    xhr.abort();
+    
+                    this._xhr = xhr = null;
+                }
+            },
+    
+            destroy: function() {
+                this.abort();
+            },
+    
+            _initAjax: function() {
+                var me = this,
+                    xhr = new XMLHttpRequest(),
+                    opts = this.options;
+    
+                if ( opts.withCredentials && !('withCredentials' in xhr) &&
+                        typeof XDomainRequest !== 'undefined' ) {
+                    xhr = new XDomainRequest();
+                }
+    
+                xhr.upload.onprogress = function( e ) {
+                    var percentage = 0;
+    
+                    if ( e.lengthComputable ) {
+                        percentage = e.loaded / e.total;
+                    }
+    
+                    return me.trigger( 'progress', percentage );
+                };
+    
+                xhr.onreadystatechange = function() {
+    
+                    if ( xhr.readyState !== 4 ) {
+                        return;
+                    }
+    
+                    xhr.upload.onprogress = noop;
+                    xhr.onreadystatechange = noop;
+                    me._xhr = null;
+                    me._status = xhr.status;
+    
+                    if ( xhr.status >= 200 && xhr.status < 300 ) {
+                        me._response = xhr.responseText;
+                        return me.trigger('load');
+                    } else if ( xhr.status >= 500 && xhr.status < 600 ) {
+                        me._response = xhr.responseText;
+                        return me.trigger( 'error', 'server' );
+                    }
+    
+    
+                    return me.trigger( 'error', me._status ? 'http' : 'abort' );
+                };
+    
+                me._xhr = xhr;
+                return xhr;
+            },
+    
+            _setRequestHeader: function( xhr, headers ) {
+                $.each( headers, function( key, val ) {
+                    xhr.setRequestHeader( key, val );
+                });
+            },
+    
+            _parseJson: function( str ) {
+                var json;
+    
+                try {
+                    json = JSON.parse( str );
+                } catch ( ex ) {
+                    json = {};
+                }
+    
+                return json;
+            }
+        });
+    });
+    /**
+     * @fileOverview 只有html5实现的文件版本。
+     */
+    define('preset/html5only',[
+        'base',
+    
+        // widgets
+        'widgets/filednd',
+        'widgets/filepaste',
+        'widgets/filepicker',
+        'widgets/image',
+        'widgets/queue',
+        'widgets/runtime',
+        'widgets/upload',
+        'widgets/validator',
+    
+        // runtimes
+        // html5
+        'runtime/html5/blob',
+        'runtime/html5/dnd',
+        'runtime/html5/filepaste',
+        'runtime/html5/filepicker',
+        'runtime/html5/imagemeta/exif',
+        'runtime/html5/image',
+        'runtime/html5/transport'
+    ], function( Base ) {
+        return Base;
+    });
+    define('webuploader',[
+        'preset/html5only'
+    ], function( preset ) {
+        return preset;
+    });
+    return require('webuploader');
+});
diff --git a/public/js/ueditor/third-party/webuploader/webuploader.js b/public/js/ueditor/third-party/webuploader/webuploader.js
new file mode 100644
index 0000000..39d9351
--- /dev/null
+++ b/public/js/ueditor/third-party/webuploader/webuploader.js
@@ -0,0 +1,6733 @@
+/*! WebUploader 0.1.2 */
+
+
+/**
+ * @fileOverview 让内部各个部件的代码可以用[amd](https://github.com/amdjs/amdjs-api/wiki/AMD)模块定义方式组织起来。
+ *
+ * AMD API 内部的简单不完全实现，请忽略。只有当WebUploader被合并成一个文件的时候才会引入。
+ */
+(function( root, factory ) {
+    var modules = {},
+
+        // 内部require, 简单不完全实现。
+        // https://github.com/amdjs/amdjs-api/wiki/require
+        _require = function( deps, callback ) {
+            var args, len, i;
+
+            // 如果deps不是数组，则直接返回指定module
+            if ( typeof deps === 'string' ) {
+                return getModule( deps );
+            } else {
+                args = [];
+                for( len = deps.length, i = 0; i < len; i++ ) {
+                    args.push( getModule( deps[ i ] ) );
+                }
+
+                return callback.apply( null, args );
+            }
+        },
+
+        // 内部define，暂时不支持不指定id.
+        _define = function( id, deps, factory ) {
+            if ( arguments.length === 2 ) {
+                factory = deps;
+                deps = null;
+            }
+
+            _require( deps || [], function() {
+                setModule( id, factory, arguments );
+            });
+        },
+
+        // 设置module, 兼容CommonJs写法。
+        setModule = function( id, factory, args ) {
+            var module = {
+                    exports: factory
+                },
+                returned;
+
+            if ( typeof factory === 'function' ) {
+                args.length || (args = [ _require, module.exports, module ]);
+                returned = factory.apply( null, args );
+                returned !== undefined && (module.exports = returned);
+            }
+
+            modules[ id ] = module.exports;
+        },
+
+        // 根据id获取module
+        getModule = function( id ) {
+            var module = modules[ id ] || root[ id ];
+
+            if ( !module ) {
+                throw new Error( '`' + id + '` is undefined' );
+            }
+
+            return module;
+        },
+
+        // 将所有modules，将路径ids装换成对象。
+        exportsTo = function( obj ) {
+            var key, host, parts, part, last, ucFirst;
+
+            // make the first character upper case.
+            ucFirst = function( str ) {
+                return str && (str.charAt( 0 ).toUpperCase() + str.substr( 1 ));
+            };
+
+            for ( key in modules ) {
+                host = obj;
+
+                if ( !modules.hasOwnProperty( key ) ) {
+                    continue;
+                }
+
+                parts = key.split('/');
+                last = ucFirst( parts.pop() );
+
+                while( (part = ucFirst( parts.shift() )) ) {
+                    host[ part ] = host[ part ] || {};
+                    host = host[ part ];
+                }
+
+                host[ last ] = modules[ key ];
+            }
+        },
+
+        exports = factory( root, _define, _require ),
+        origin;
+
+    // exports every module.
+    exportsTo( exports );
+
+    if ( typeof module === 'object' && typeof module.exports === 'object' ) {
+
+        // For CommonJS and CommonJS-like environments where a proper window is present,
+        module.exports = exports;
+    } else if ( typeof define === 'function' && define.amd ) {
+
+        // Allow using this built library as an AMD module
+        // in another project. That other project will only
+        // see this AMD call, not the internal modules in
+        // the closure below.
+        define([], exports );
+    } else {
+
+        // Browser globals case. Just assign the
+        // result to a property on the global.
+        origin = root.WebUploader;
+        root.WebUploader = exports;
+        root.WebUploader.noConflict = function() {
+            root.WebUploader = origin;
+        };
+    }
+})( this, function( window, define, require ) {
+
+
+    /**
+     * @fileOverview jQuery or Zepto
+     */
+    define('dollar-third',[],function() {
+        return window.jQuery || window.Zepto;
+    });
+    /**
+     * @fileOverview Dom 操作相关
+     */
+    define('dollar',[
+        'dollar-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 使用jQuery的Promise
+     */
+    define('promise-third',[
+        'dollar'
+    ], function( $ ) {
+        return {
+            Deferred: $.Deferred,
+            when: $.when,
+    
+            isPromise: function( anything ) {
+                return anything && typeof anything.then === 'function';
+            }
+        };
+    });
+    /**
+     * @fileOverview Promise/A+
+     */
+    define('promise',[
+        'promise-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 基础类方法。
+     */
+    
+    /**
+     * Web Uploader内部类的详细说明，以下提及的功能类，都可以在`WebUploader`这个变量中访问到。
+     *
+     * As you know, Web Uploader的每个文件都是用过[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)规范中的`define`组织起来的, 每个Module都会有个module id.
+     * 默认module id该文件的路径，而此路径将会转化成名字空间存放在WebUploader中。如：
+     *
+     * * module `base`：WebUploader.Base
+     * * module `file`: WebUploader.File
+     * * module `lib/dnd`: WebUploader.Lib.Dnd
+     * * module `runtime/html5/dnd`: WebUploader.Runtime.Html5.Dnd
+     *
+     *
+     * 以下文档将可能省略`WebUploader`前缀。
+     * @module WebUploader
+     * @title WebUploader API文档
+     */
+    define('base',[
+        'dollar',
+        'promise'
+    ], function( $, promise ) {
+    
+        var noop = function() {},
+            call = Function.call;
+    
+        // http://jsperf.com/uncurrythis
+        // 反科里化
+        function uncurryThis( fn ) {
+            return function() {
+                return call.apply( fn, arguments );
+            };
+        }
+    
+        function bindFn( fn, context ) {
+            return function() {
+                return fn.apply( context, arguments );
+            };
+        }
+    
+        function createObject( proto ) {
+            var f;
+    
+            if ( Object.create ) {
+                return Object.create( proto );
+            } else {
+                f = function() {};
+                f.prototype = proto;
+                return new f();
+            }
+        }
+    
+    
+        /**
+         * 基础类，提供一些简单常用的方法。
+         * @class Base
+         */
+        return {
+    
+            /**
+             * @property {String} version 当前版本号。
+             */
+            version: '0.1.2',
+    
+            /**
+             * @property {jQuery|Zepto} $ 引用依赖的jQuery或者Zepto对象。
+             */
+            $: $,
+    
+            Deferred: promise.Deferred,
+    
+            isPromise: promise.isPromise,
+    
+            when: promise.when,
+    
+            /**
+             * @description  简单的浏览器检查结果。
+             *
+             * * `webkit`  webkit版本号，如果浏览器为非webkit内核，此属性为`undefined`。
+             * * `chrome`  chrome浏览器版本号，如果浏览器为chrome，此属性为`undefined`。
+             * * `ie`  ie浏览器版本号，如果浏览器为非ie，此属性为`undefined`。**暂不支持ie10+**
+             * * `firefox`  firefox浏览器版本号，如果浏览器为非firefox，此属性为`undefined`。
+             * * `safari`  safari浏览器版本号，如果浏览器为非safari，此属性为`undefined`。
+             * * `opera`  opera浏览器版本号，如果浏览器为非opera，此属性为`undefined`。
+             *
+             * @property {Object} [browser]
+             */
+            browser: (function( ua ) {
+                var ret = {},
+                    webkit = ua.match( /WebKit\/([\d.]+)/ ),
+                    chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
+                        ua.match( /CriOS\/([\d.]+)/ ),
+    
+                    ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
+                        ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i),
+                    firefox = ua.match( /Firefox\/([\d.]+)/ ),
+                    safari = ua.match( /Safari\/([\d.]+)/ ),
+                    opera = ua.match( /OPR\/([\d.]+)/ );
+    
+                webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
+                chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
+                ie && (ret.ie = parseFloat( ie[ 1 ] ));
+                firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
+                safari && (ret.safari = parseFloat( safari[ 1 ] ));
+                opera && (ret.opera = parseFloat( opera[ 1 ] ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * @description  操作系统检查结果。
+             *
+             * * `android`  如果在android浏览器环境下，此值为对应的android版本号，否则为`undefined`。
+             * * `ios` 如果在ios浏览器环境下，此值为对应的ios版本号，否则为`undefined`。
+             * @property {Object} [os]
+             */
+            os: (function( ua ) {
+                var ret = {},
+    
+                    // osx = !!ua.match( /\(Macintosh\; Intel / ),
+                    android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
+                    ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );
+    
+                // osx && (ret.osx = true);
+                android && (ret.android = parseFloat( android[ 1 ] ));
+                ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * 实现类与类之间的继承。
+             * @method inherits
+             * @grammar Base.inherits( super ) => child
+             * @grammar Base.inherits( super, protos ) => child
+             * @grammar Base.inherits( super, protos, statics ) => child
+             * @param  {Class} super 父类
+             * @param  {Object | Function} [protos] 子类或者对象。如果对象中包含constructor，子类将是用此属性值。
+             * @param  {Function} [protos.constructor] 子类构造器，不指定的话将创建个临时的直接执行父类构造器的方法。
+             * @param  {Object} [statics] 静态属性或方法。
+             * @return {Class} 返回子类。
+             * @example
+             * function Person() {
+             *     console.log( 'Super' );
+             * }
+             * Person.prototype.hello = function() {
+             *     console.log( 'hello' );
+             * };
+             *
+             * var Manager = Base.inherits( Person, {
+             *     world: function() {
+             *         console.log( 'World' );
+             *     }
+             * });
+             *
+             * // 因为没有指定构造器，父类的构造器将会执行。
+             * var instance = new Manager();    // => Super
+             *
+             * // 继承子父类的方法
+             * instance.hello();    // => hello
+             * instance.world();    // => World
+             *
+             * // 子类的__super__属性指向父类
+             * console.log( Manager.__super__ === Person );    // => true
+             */
+            inherits: function( Super, protos, staticProtos ) {
+                var child;
+    
+                if ( typeof protos === 'function' ) {
+                    child = protos;
+                    protos = null;
+                } else if ( protos && protos.hasOwnProperty('constructor') ) {
+                    child = protos.constructor;
+                } else {
+                    child = function() {
+                        return Super.apply( this, arguments );
+                    };
+                }
+    
+                // 复制静态方法
+                $.extend( true, child, Super, staticProtos || {} );
+    
+                /* jshint camelcase: false */
+    
+                // 让子类的__super__属性指向父类。
+                child.__super__ = Super.prototype;
+    
+                // 构建原型，添加原型方法或属性。
+                // 暂时用Object.create实现。
+                child.prototype = createObject( Super.prototype );
+                protos && $.extend( true, child.prototype, protos );
+    
+                return child;
+            },
+    
+            /**
+             * 一个不做任何事情的方法。可以用来赋值给默认的callback.
+             * @method noop
+             */
+            noop: noop,
+    
+            /**
+             * 返回一个新的方法，此方法将已指定的`context`来执行。
+             * @grammar Base.bindFn( fn, context ) => Function
+             * @method bindFn
+             * @example
+             * var doSomething = function() {
+             *         console.log( this.name );
+             *     },
+             *     obj = {
+             *         name: 'Object Name'
+             *     },
+             *     aliasFn = Base.bind( doSomething, obj );
+             *
+             *  aliasFn();    // => Object Name
+             *
+             */
+            bindFn: bindFn,
+    
+            /**
+             * 引用Console.log如果存在的话，否则引用一个[空函数loop](#WebUploader:Base.log)。
+             * @grammar Base.log( args... ) => undefined
+             * @method log
+             */
+            log: (function() {
+                if ( window.console ) {
+                    return bindFn( console.log, console );
+                }
+                return noop;
+            })(),
+    
+            nextTick: (function() {
+    
+                return function( cb ) {
+                    setTimeout( cb, 1 );
+                };
+    
+                // @bug 当浏览器不在当前窗口时就停了。
+                // var next = window.requestAnimationFrame ||
+                //     window.webkitRequestAnimationFrame ||
+                //     window.mozRequestAnimationFrame ||
+                //     function( cb ) {
+                //         window.setTimeout( cb, 1000 / 60 );
+                //     };
+    
+                // // fix: Uncaught TypeError: Illegal invocation
+                // return bindFn( next, window );
+            })(),
+    
+            /**
+             * 被[uncurrythis](http://www.2ality.com/2011/11/uncurrying-this.html)的数组slice方法。
+             * 将用来将非数组对象转化成数组对象。
+             * @grammar Base.slice( target, start[, end] ) => Array
+             * @method slice
+             * @example
+             * function doSomthing() {
+             *     var args = Base.slice( arguments, 1 );
+             *     console.log( args );
+             * }
+             *
+             * doSomthing( 'ignored', 'arg2', 'arg3' );    // => Array ["arg2", "arg3"]
+             */
+            slice: uncurryThis( [].slice ),
+    
+            /**
+             * 生成唯一的ID
+             * @method guid
+             * @grammar Base.guid() => String
+             * @grammar Base.guid( prefx ) => String
+             */
+            guid: (function() {
+                var counter = 0;
+    
+                return function( prefix ) {
+                    var guid = (+new Date()).toString( 32 ),
+                        i = 0;
+    
+                    for ( ; i < 5; i++ ) {
+                        guid += Math.floor( Math.random() * 65535 ).toString( 32 );
+                    }
+    
+                    return (prefix || 'wu_') + guid + (counter++).toString( 32 );
+                };
+            })(),
+    
+            /**
+             * 格式化文件大小, 输出成带单位的字符串
+             * @method formatSize
+             * @grammar Base.formatSize( size ) => String
+             * @grammar Base.formatSize( size, pointLength ) => String
+             * @grammar Base.formatSize( size, pointLength, units ) => String
+             * @param {Number} size 文件大小
+             * @param {Number} [pointLength=2] 精确到的小数点数。
+             * @param {Array} [units=[ 'B', 'K', 'M', 'G', 'TB' ]] 单位数组。从字节，到千字节，一直往上指定。如果单位数组里面只指定了到了K(千字节)，同时文件大小大于M, 此方法的输出将还是显示成多少K.
+             * @example
+             * console.log( Base.formatSize( 100 ) );    // => 100B
+             * console.log( Base.formatSize( 1024 ) );    // => 1.00K
+             * console.log( Base.formatSize( 1024, 0 ) );    // => 1K
+             * console.log( Base.formatSize( 1024 * 1024 ) );    // => 1.00M
+             * console.log( Base.formatSize( 1024 * 1024 * 1024 ) );    // => 1.00G
+             * console.log( Base.formatSize( 1024 * 1024 * 1024, 0, ['B', 'KB', 'MB'] ) );    // => 1024MB
+             */
+            formatSize: function( size, pointLength, units ) {
+                var unit;
+    
+                units = units || [ 'B', 'K', 'M', 'G', 'TB' ];
+    
+                while ( (unit = units.shift()) && size > 1024 ) {
+                    size = size / 1024;
+                }
+    
+                return (unit === 'B' ? size : size.toFixed( pointLength || 2 )) +
+                        unit;
+            }
+        };
+    });
+    /**
+     * 事件处理类，可以独立使用，也可以扩展给对象使用。
+     * @fileOverview Mediator
+     */
+    define('mediator',[
+        'base'
+    ], function( Base ) {
+        var $ = Base.$,
+            slice = [].slice,
+            separator = /\s+/,
+            protos;
+    
+        // 根据条件过滤出事件handlers.
+        function findHandlers( arr, name, callback, context ) {
+            return $.grep( arr, function( handler ) {
+                return handler &&
+                        (!name || handler.e === name) &&
+                        (!callback || handler.cb === callback ||
+                        handler.cb._cb === callback) &&
+                        (!context || handler.ctx === context);
+            });
+        }
+    
+        function eachEvent( events, callback, iterator ) {
+            // 不支持对象，只支持多个event用空格隔开
+            $.each( (events || '').split( separator ), function( _, key ) {
+                iterator( key, callback );
+            });
+        }
+    
+        function triggerHanders( events, args ) {
+            var stoped = false,
+                i = -1,
+                len = events.length,
+                handler;
+    
+            while ( ++i < len ) {
+                handler = events[ i ];
+    
+                if ( handler.cb.apply( handler.ctx2, args ) === false ) {
+                    stoped = true;
+                    break;
+                }
+            }
+    
+            return !stoped;
+        }
+    
+        protos = {
+    
+            /**
+             * 绑定事件。
+             *
+             * `callback`方法在执行时，arguments将会来源于trigger的时候携带的参数。如
+             * ```javascript
+             * var obj = {};
+             *
+             * // 使得obj有事件行为
+             * Mediator.installTo( obj );
+             *
+             * obj.on( 'testa', function( arg1, arg2 ) {
+             *     console.log( arg1, arg2 ); // => 'arg1', 'arg2'
+             * });
+             *
+             * obj.trigger( 'testa', 'arg1', 'arg2' );
+             * ```
+             *
+             * 如果`callback`中，某一个方法`return false`了，则后续的其他`callback`都不会被执行到。
+             * 切会影响到`trigger`方法的返回值，为`false`。
+             *
+             * `on`还可以用来添加一个特殊事件`all`, 这样所有的事件触发都会响应到。同时此类`callback`中的arguments有一个不同处，
+             * 就是第一个参数为`type`，记录当前是什么事件在触发。此类`callback`的优先级比脚低，会再正常`callback`执行完后触发。
+             * ```javascript
+             * obj.on( 'all', function( type, arg1, arg2 ) {
+             *     console.log( type, arg1, arg2 ); // => 'testa', 'arg1', 'arg2'
+             * });
+             * ```
+             *
+             * @method on
+             * @grammar on( name, callback[, context] ) => self
+             * @param  {String}   name     事件名，支持多个事件用空格隔开
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             * @class Mediator
+             */
+            on: function( name, callback, context ) {
+                var me = this,
+                    set;
+    
+                if ( !callback ) {
+                    return this;
+                }
+    
+                set = this._events || (this._events = []);
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var handler = { e: name };
+    
+                    handler.cb = callback;
+                    handler.ctx = context;
+                    handler.ctx2 = context || me;
+                    handler.id = set.length;
+    
+                    set.push( handler );
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 绑定事件，且当handler执行完后，自动解除绑定。
+             * @method once
+             * @grammar once( name, callback[, context] ) => self
+             * @param  {String}   name     事件名
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            once: function( name, callback, context ) {
+                var me = this;
+    
+                if ( !callback ) {
+                    return me;
+                }
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var once = function() {
+                            me.off( name, once );
+                            return callback.apply( context || me, arguments );
+                        };
+    
+                    once._cb = callback;
+                    me.on( name, once, context );
+                });
+    
+                return me;
+            },
+    
+            /**
+             * 解除事件绑定
+             * @method off
+             * @grammar off( [name[, callback[, context] ] ] ) => self
+             * @param  {String}   [name]     事件名
+             * @param  {Function} [callback] 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            off: function( name, cb, ctx ) {
+                var events = this._events;
+    
+                if ( !events ) {
+                    return this;
+                }
+    
+                if ( !name && !cb && !ctx ) {
+                    this._events = [];
+                    return this;
+                }
+    
+                eachEvent( name, cb, function( name, cb ) {
+                    $.each( findHandlers( events, name, cb, ctx ), function() {
+                        delete events[ this.id ];
+                    });
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 触发事件
+             * @method trigger
+             * @grammar trigger( name[, args...] ) => self
+             * @param  {String}   type     事件名
+             * @param  {*} [...] 任意参数
+             * @return {Boolean} 如果handler中return false了，则返回false, 否则返回true
+             */
+            trigger: function( type ) {
+                var args, events, allEvents;
+    
+                if ( !this._events || !type ) {
+                    return this;
+                }
+    
+                args = slice.call( arguments, 1 );
+                events = findHandlers( this._events, type );
+                allEvents = findHandlers( this._events, 'all' );
+    
+                return triggerHanders( events, args ) &&
+                        triggerHanders( allEvents, arguments );
+            }
+        };
+    
+        /**
+         * 中介者，它本身是个单例，但可以通过[installTo](#WebUploader:Mediator:installTo)方法，使任何对象具备事件行为。
+         * 主要目的是负责模块与模块之间的合作，降低耦合度。
+         *
+         * @class Mediator
+         */
+        return $.extend({
+    
+            /**
+             * 可以通过这个接口，使任何对象具备事件功能。
+             * @method installTo
+             * @param  {Object} obj 需要具备事件行为的对象。
+             * @return {Object} 返回obj.
+             */
+            installTo: function( obj ) {
+                return $.extend( obj, protos );
+            }
+    
+        }, protos );
+    });
+    /**
+     * @fileOverview Uploader上传类
+     */
+    define('uploader',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$;
+    
+        /**
+         * 上传入口类。
+         * @class Uploader
+         * @constructor
+         * @grammar new Uploader( opts ) => Uploader
+         * @example
+         * var uploader = WebUploader.Uploader({
+         *     swf: 'path_of_swf/Uploader.swf',
+         *
+         *     // 开起分片上传。
+         *     chunked: true
+         * });
+         */
+        function Uploader( opts ) {
+            this.options = $.extend( true, {}, Uploader.options, opts );
+            this._init( this.options );
+        }
+    
+        // default Options
+        // widgets中有相应扩展
+        Uploader.options = {};
+        Mediator.installTo( Uploader.prototype );
+    
+        // 批量添加纯命令式方法。
+        $.each({
+            upload: 'start-upload',
+            stop: 'stop-upload',
+            getFile: 'get-file',
+            getFiles: 'get-files',
+            addFile: 'add-file',
+            addFiles: 'add-file',
+            sort: 'sort-files',
+            removeFile: 'remove-file',
+            skipFile: 'skip-file',
+            retry: 'retry',
+            isInProgress: 'is-in-progress',
+            makeThumb: 'make-thumb',
+            getDimension: 'get-dimension',
+            addButton: 'add-btn',
+            getRuntimeType: 'get-runtime-type',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable',
+            reset: 'reset'
+        }, function( fn, command ) {
+            Uploader.prototype[ fn ] = function() {
+                return this.request( command, arguments );
+            };
+        });
+    
+        $.extend( Uploader.prototype, {
+            state: 'pending',
+    
+            _init: function( opts ) {
+                var me = this;
+    
+                me.request( 'init', opts, function() {
+                    me.state = 'ready';
+                    me.trigger('ready');
+                });
+            },
+    
+            /**
+             * 获取或者设置Uploader配置项。
+             * @method option
+             * @grammar option( key ) => *
+             * @grammar option( key, val ) => self
+             * @example
+             *
+             * // 初始状态图片上传前不会压缩
+             * var uploader = new WebUploader.Uploader({
+             *     resize: null;
+             * });
+             *
+             * // 修改后图片上传前，尝试将图片压缩到1600 * 1600
+             * uploader.options( 'resize', {
+             *     width: 1600,
+             *     height: 1600
+             * });
+             */
+            option: function( key, val ) {
+                var opts = this.options;
+    
+                // setter
+                if ( arguments.length > 1 ) {
+    
+                    if ( $.isPlainObject( val ) &&
+                            $.isPlainObject( opts[ key ] ) ) {
+                        $.extend( opts[ key ], val );
+                    } else {
+                        opts[ key ] = val;
+                    }
+    
+                } else {    // getter
+                    return key ? opts[ key ] : opts;
+                }
+            },
+    
+            /**
+             * 获取文件统计信息。返回一个包含一下信息的对象。
+             * * `successNum` 上传成功的文件数
+             * * `uploadFailNum` 上传失败的文件数
+             * * `cancelNum` 被删除的文件数
+             * * `invalidNum` 无效的文件数
+             * * `queueNum` 还在队列中的文件数
+             * @method getStats
+             * @grammar getStats() => Object
+             */
+            getStats: function() {
+                // return this._mgr.getStats.apply( this._mgr, arguments );
+                var stats = this.request('get-stats');
+    
+                return {
+                    successNum: stats.numOfSuccess,
+    
+                    // who care?
+                    // queueFailNum: 0,
+                    cancelNum: stats.numOfCancel,
+                    invalidNum: stats.numOfInvalid,
+                    uploadFailNum: stats.numOfUploadFailed,
+                    queueNum: stats.numOfQueue
+                };
+            },
+    
+            // 需要重写此方法来来支持opts.onEvent和instance.onEvent的处理器
+            trigger: function( type/*, args...*/ ) {
+                var args = [].slice.call( arguments, 1 ),
+                    opts = this.options,
+                    name = 'on' + type.substring( 0, 1 ).toUpperCase() +
+                        type.substring( 1 );
+    
+                if (
+                        // 调用通过on方法注册的handler.
+                        Mediator.trigger.apply( this, arguments ) === false ||
+    
+                        // 调用opts.onEvent
+                        $.isFunction( opts[ name ] ) &&
+                        opts[ name ].apply( this, args ) === false ||
+    
+                        // 调用this.onEvent
+                        $.isFunction( this[ name ] ) &&
+                        this[ name ].apply( this, args ) === false ||
+    
+                        // 广播所有uploader的事件。
+                        Mediator.trigger.apply( Mediator,
+                        [ this, type ].concat( args ) ) === false ) {
+    
+                    return false;
+                }
+    
+                return true;
+            },
+    
+            // widgets/widget.js将补充此方法的详细文档。
+            request: Base.noop
+        });
+    
+        /**
+         * 创建Uploader实例，等同于new Uploader( opts );
+         * @method create
+         * @class Base
+         * @static
+         * @grammar Base.create( opts ) => Uploader
+         */
+        Base.create = Uploader.create = function( opts ) {
+            return new Uploader( opts );
+        };
+    
+        // 暴露Uploader，可以通过它来扩展业务逻辑。
+        Base.Uploader = Uploader;
+    
+        return Uploader;
+    });
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/runtime',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            factories = {},
+    
+            // 获取对象的第一个key
+            getFirstKey = function( obj ) {
+                for ( var key in obj ) {
+                    if ( obj.hasOwnProperty( key ) ) {
+                        return key;
+                    }
+                }
+                return null;
+            };
+    
+        // 接口类。
+        function Runtime( options ) {
+            this.options = $.extend({
+                container: document.body
+            }, options );
+            this.uid = Base.guid('rt_');
+        }
+    
+        $.extend( Runtime.prototype, {
+    
+            getContainer: function() {
+                var opts = this.options,
+                    parent, container;
+    
+                if ( this._container ) {
+                    return this._container;
+                }
+    
+                parent = $( opts.container || document.body );
+                container = $( document.createElement('div') );
+    
+                container.attr( 'id', 'rt_' + this.uid );
+                container.css({
+                    position: 'absolute',
+                    top: '0px',
+                    left: '0px',
+                    width: '1px',
+                    height: '1px',
+                    overflow: 'hidden'
+                });
+    
+                parent.append( container );
+                parent.addClass('webuploader-container');
+                this._container = container;
+                return container;
+            },
+    
+            init: Base.noop,
+            exec: Base.noop,
+    
+            destroy: function() {
+                if ( this._container ) {
+                    this._container.parentNode.removeChild( this.__container );
+                }
+    
+                this.off();
+            }
+        });
+    
+        Runtime.orders = 'html5,flash';
+    
+    
+        /**
+         * 添加Runtime实现。
+         * @param {String} type    类型
+         * @param {Runtime} factory 具体Runtime实现。
+         */
+        Runtime.addRuntime = function( type, factory ) {
+            factories[ type ] = factory;
+        };
+    
+        Runtime.hasRuntime = function( type ) {
+            return !!(type ? factories[ type ] : getFirstKey( factories ));
+        };
+    
+        Runtime.create = function( opts, orders ) {
+            var type, runtime;
+    
+            orders = orders || Runtime.orders;
+            $.each( orders.split( /\s*,\s*/g ), function() {
+                if ( factories[ this ] ) {
+                    type = this;
+                    return false;
+                }
+            });
+    
+            type = type || getFirstKey( factories );
+    
+            if ( !type ) {
+                throw new Error('Runtime Error');
+            }
+    
+            runtime = new factories[ type ]( opts );
+            return runtime;
+        };
+    
+        Mediator.installTo( Runtime.prototype );
+        return Runtime;
+    });
+    
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/client',[
+        'base',
+        'mediator',
+        'runtime/runtime'
+    ], function( Base, Mediator, Runtime ) {
+    
+        var cache;
+    
+        cache = (function() {
+            var obj = {};
+    
+            return {
+                add: function( runtime ) {
+                    obj[ runtime.uid ] = runtime;
+                },
+    
+                get: function( ruid, standalone ) {
+                    var i;
+    
+                    if ( ruid ) {
+                        return obj[ ruid ];
+                    }
+    
+                    for ( i in obj ) {
+                        // 有些类型不能重用，比如filepicker.
+                        if ( standalone && obj[ i ].__standalone ) {
+                            continue;
+                        }
+    
+                        return obj[ i ];
+                    }
+    
+                    return null;
+                },
+    
+                remove: function( runtime ) {
+                    delete obj[ runtime.uid ];
+                }
+            };
+        })();
+    
+        function RuntimeClient( component, standalone ) {
+            var deferred = Base.Deferred(),
+                runtime;
+    
+            this.uid = Base.guid('client_');
+    
+            // 允许runtime没有初始化之前，注册一些方法在初始化后执行。
+            this.runtimeReady = function( cb ) {
+                return deferred.done( cb );
+            };
+    
+            this.connectRuntime = function( opts, cb ) {
+    
+                // already connected.
+                if ( runtime ) {
+                    throw new Error('already connected!');
+                }
+    
+                deferred.done( cb );
+    
+                if ( typeof opts === 'string' && cache.get( opts ) ) {
+                    runtime = cache.get( opts );
+                }
+    
+                // 像filePicker只能独立存在，不能公用。
+                runtime = runtime || cache.get( null, standalone );
+    
+                // 需要创建
+                if ( !runtime ) {
+                    runtime = Runtime.create( opts, opts.runtimeOrder );
+                    runtime.__promise = deferred.promise();
+                    runtime.once( 'ready', deferred.resolve );
+                    runtime.init();
+                    cache.add( runtime );
+                    runtime.__client = 1;
+                } else {
+                    // 来自cache
+                    Base.$.extend( runtime.options, opts );
+                    runtime.__promise.then( deferred.resolve );
+                    runtime.__client++;
+                }
+    
+                standalone && (runtime.__standalone = standalone);
+                return runtime;
+            };
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.disconnectRuntime = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                runtime.__client--;
+    
+                if ( runtime.__client <= 0 ) {
+                    cache.remove( runtime );
+                    delete runtime.__promise;
+                    runtime.destroy();
+                }
+    
+                runtime = null;
+            };
+    
+            this.exec = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                var args = Base.slice( arguments );
+                component && args.unshift( component );
+    
+                return runtime.exec.apply( this, args );
+            };
+    
+            this.getRuid = function() {
+                return runtime && runtime.uid;
+            };
+    
+            this.destroy = (function( destroy ) {
+                return function() {
+                    destroy && destroy.apply( this, arguments );
+                    this.trigger('destroy');
+                    this.off();
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                };
+            })( this.destroy );
+        }
+    
+        Mediator.installTo( RuntimeClient.prototype );
+        return RuntimeClient;
+    });
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/dnd',[
+        'base',
+        'mediator',
+        'runtime/client'
+    ], function( Base, Mediator, RuntimeClent ) {
+    
+        var $ = Base.$;
+    
+        function DragAndDrop( opts ) {
+            opts = this.options = $.extend({}, DragAndDrop.options, opts );
+    
+            opts.container = $( opts.container );
+    
+            if ( !opts.container.length ) {
+                return;
+            }
+    
+            RuntimeClent.call( this, 'DragAndDrop' );
+        }
+    
+        DragAndDrop.options = {
+            accept: null,
+            disableGlobalDnd: false
+        };
+    
+        Base.inherits( RuntimeClent, {
+            constructor: DragAndDrop,
+    
+            init: function() {
+                var me = this;
+    
+                me.connectRuntime( me.options, function() {
+                    me.exec('init');
+                    me.trigger('ready');
+                });
+            },
+    
+            destroy: function() {
+                this.disconnectRuntime();
+            }
+        });
+    
+        Mediator.installTo( DragAndDrop.prototype );
+    
+        return DragAndDrop;
+    });
+    /**
+     * @fileOverview 组件基类。
+     */
+    define('widgets/widget',[
+        'base',
+        'uploader'
+    ], function( Base, Uploader ) {
+    
+        var $ = Base.$,
+            _init = Uploader.prototype._init,
+            IGNORE = {},
+            widgetClass = [];
+    
+        function isArrayLike( obj ) {
+            if ( !obj ) {
+                return false;
+            }
+    
+            var length = obj.length,
+                type = $.type( obj );
+    
+            if ( obj.nodeType === 1 && length ) {
+                return true;
+            }
+    
+            return type === 'array' || type !== 'function' && type !== 'string' &&
+                    (length === 0 || typeof length === 'number' && length > 0 &&
+                    (length - 1) in obj);
+        }
+    
+        function Widget( uploader ) {
+            this.owner = uploader;
+            this.options = uploader.options;
+        }
+    
+        $.extend( Widget.prototype, {
+    
+            init: Base.noop,
+    
+            // 类Backbone的事件监听声明，监听uploader实例上的事件
+            // widget直接无法监听事件，事件只能通过uploader来传递
+            invoke: function( apiName, args ) {
+    
+                /*
+                    {
+                        'make-thumb': 'makeThumb'
+                    }
+                 */
+                var map = this.responseMap;
+    
+                // 如果无API响应声明则忽略
+                if ( !map || !(apiName in map) || !(map[ apiName ] in this) ||
+                        !$.isFunction( this[ map[ apiName ] ] ) ) {
+    
+                    return IGNORE;
+                }
+    
+                return this[ map[ apiName ] ].apply( this, args );
+    
+            },
+    
+            /**
+             * 发送命令。当传入`callback`或者`handler`中返回`promise`时。返回一个当所有`handler`中的promise都完成后完成的新`promise`。
+             * @method request
+             * @grammar request( command, args ) => * | Promise
+             * @grammar request( command, args, callback ) => Promise
+             * @for  Uploader
+             */
+            request: function() {
+                return this.owner.request.apply( this.owner, arguments );
+            }
+        });
+    
+        // 扩展Uploader.
+        $.extend( Uploader.prototype, {
+    
+            // 覆写_init用来初始化widgets
+            _init: function() {
+                var me = this,
+                    widgets = me._widgets = [];
+    
+                $.each( widgetClass, function( _, klass ) {
+                    widgets.push( new klass( me ) );
+                });
+    
+                return _init.apply( me, arguments );
+            },
+    
+            request: function( apiName, args, callback ) {
+                var i = 0,
+                    widgets = this._widgets,
+                    len = widgets.length,
+                    rlts = [],
+                    dfds = [],
+                    widget, rlt, promise, key;
+    
+                args = isArrayLike( args ) ? args : [ args ];
+    
+                for ( ; i < len; i++ ) {
+                    widget = widgets[ i ];
+                    rlt = widget.invoke( apiName, args );
+    
+                    if ( rlt !== IGNORE ) {
+    
+                        // Deferred对象
+                        if ( Base.isPromise( rlt ) ) {
+                            dfds.push( rlt );
+                        } else {
+                            rlts.push( rlt );
+                        }
+                    }
+                }
+    
+                // 如果有callback，则用异步方式。
+                if ( callback || dfds.length ) {
+                    promise = Base.when.apply( Base, dfds );
+                    key = promise.pipe ? 'pipe' : 'then';
+    
+                    // 很重要不能删除。删除了会死循环。
+                    // 保证执行顺序。让callback总是在下一个tick中执行。
+                    return promise[ key ](function() {
+                                var deferred = Base.Deferred(),
+                                    args = arguments;
+    
+                                setTimeout(function() {
+                                    deferred.resolve.apply( deferred, args );
+                                }, 1 );
+    
+                                return deferred.promise();
+                            })[ key ]( callback || Base.noop );
+                } else {
+                    return rlts[ 0 ];
+                }
+            }
+        });
+    
+        /**
+         * 添加组件
+         * @param  {object} widgetProto 组件原型，构造函数通过constructor属性定义
+         * @param  {object} responseMap API名称与函数实现的映射
+         * @example
+         *     Uploader.register( {
+         *         init: function( options ) {},
+         *         makeThumb: function() {}
+         *     }, {
+         *         'make-thumb': 'makeThumb'
+         *     } );
+         */
+        Uploader.register = Widget.register = function( responseMap, widgetProto ) {
+            var map = { init: 'init' },
+                klass;
+    
+            if ( arguments.length === 1 ) {
+                widgetProto = responseMap;
+                widgetProto.responseMap = map;
+            } else {
+                widgetProto.responseMap = $.extend( map, responseMap );
+            }
+    
+            klass = Base.inherits( Widget, widgetProto );
+            widgetClass.push( klass );
+    
+            return klass;
+        };
+    
+        return Widget;
+    });
+    /**
+     * @fileOverview DragAndDrop Widget。
+     */
+    define('widgets/filednd',[
+        'base',
+        'uploader',
+        'lib/dnd',
+        'widgets/widget'
+    ], function( Base, Uploader, Dnd ) {
+        var $ = Base.$;
+    
+        Uploader.options.dnd = '';
+    
+        /**
+         * @property {Selector} [dnd=undefined]  指定Drag And Drop拖拽的容器，如果不指定，则不启动。
+         * @namespace options
+         * @for Uploader
+         */
+    
+        /**
+         * @event dndAccept
+         * @param {DataTransferItemList} items DataTransferItem
+         * @description 阻止此事件可以拒绝某些类型的文件拖入进来。目前只有 chrome 提供这样的 API，且只能通过 mime-type 验证。
+         * @for  Uploader
+         */
+        return Uploader.register({
+            init: function( opts ) {
+    
+                if ( !opts.dnd ||
+                        this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                var me = this,
+                    deferred = Base.Deferred(),
+                    options = $.extend({}, {
+                        disableGlobalDnd: opts.disableGlobalDnd,
+                        container: opts.dnd,
+                        accept: opts.accept
+                    }),
+                    dnd;
+    
+                dnd = new Dnd( options );
+    
+                dnd.once( 'ready', deferred.resolve );
+                dnd.on( 'drop', function( files ) {
+                    me.request( 'add-file', [ files ]);
+                });
+    
+                // 检测文件是否全部允许添加。
+                dnd.on( 'accept', function( items ) {
+                    return me.owner.trigger( 'dndAccept', items );
+                });
+    
+                dnd.init();
+    
+                return deferred.promise();
+            }
+        });
+    });
+    
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/filepaste',[
+        'base',
+        'mediator',
+        'runtime/client'
+    ], function( Base, Mediator, RuntimeClent ) {
+    
+        var $ = Base.$;
+    
+        function FilePaste( opts ) {
+            opts = this.options = $.extend({}, opts );
+            opts.container = $( opts.container || document.body );
+            RuntimeClent.call( this, 'FilePaste' );
+        }
+    
+        Base.inherits( RuntimeClent, {
+            constructor: FilePaste,
+    
+            init: function() {
+                var me = this;
+    
+                me.connectRuntime( me.options, function() {
+                    me.exec('init');
+                    me.trigger('ready');
+                });
+            },
+    
+            destroy: function() {
+                this.exec('destroy');
+                this.disconnectRuntime();
+                this.off();
+            }
+        });
+    
+        Mediator.installTo( FilePaste.prototype );
+    
+        return FilePaste;
+    });
+    /**
+     * @fileOverview 组件基类。
+     */
+    define('widgets/filepaste',[
+        'base',
+        'uploader',
+        'lib/filepaste',
+        'widgets/widget'
+    ], function( Base, Uploader, FilePaste ) {
+        var $ = Base.$;
+    
+        /**
+         * @property {Selector} [paste=undefined]  指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为`document.body`.
+         * @namespace options
+         * @for Uploader
+         */
+        return Uploader.register({
+            init: function( opts ) {
+    
+                if ( !opts.paste ||
+                        this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                var me = this,
+                    deferred = Base.Deferred(),
+                    options = $.extend({}, {
+                        container: opts.paste,
+                        accept: opts.accept
+                    }),
+                    paste;
+    
+                paste = new FilePaste( options );
+    
+                paste.once( 'ready', deferred.resolve );
+                paste.on( 'paste', function( files ) {
+                    me.owner.request( 'add-file', [ files ]);
+                });
+                paste.init();
+    
+                return deferred.promise();
+            }
+        });
+    });
+    /**
+     * @fileOverview Blob
+     */
+    define('lib/blob',[
+        'base',
+        'runtime/client'
+    ], function( Base, RuntimeClient ) {
+    
+        function Blob( ruid, source ) {
+            var me = this;
+    
+            me.source = source;
+            me.ruid = ruid;
+    
+            RuntimeClient.call( me, 'Blob' );
+    
+            this.uid = source.uid || this.uid;
+            this.type = source.type || '';
+            this.size = source.size || 0;
+    
+            if ( ruid ) {
+                me.connectRuntime( ruid );
+            }
+        }
+    
+        Base.inherits( RuntimeClient, {
+            constructor: Blob,
+    
+            slice: function( start, end ) {
+                return this.exec( 'slice', start, end );
+            },
+    
+            getSource: function() {
+                return this.source;
+            }
+        });
+    
+        return Blob;
+    });
+    /**
+     * 为了统一化Flash的File和HTML5的File而存在。
+     * 以至于要调用Flash里面的File，也可以像调用HTML5版本的File一下。
+     * @fileOverview File
+     */
+    define('lib/file',[
+        'base',
+        'lib/blob'
+    ], function( Base, Blob ) {
+    
+        var uid = 1,
+            rExt = /\.([^.]+)$/;
+    
+        function File( ruid, file ) {
+            var ext;
+    
+            Blob.apply( this, arguments );
+            this.name = file.name || ('untitled' + uid++);
+            ext = rExt.exec( file.name ) ? RegExp.$1.toLowerCase() : '';
+    
+            // todo 支持其他类型文件的转换。
+    
+            // 如果有mimetype, 但是文件名里面没有找出后缀规律
+            if ( !ext && this.type ) {
+                ext = /\/(jpg|jpeg|png|gif|bmp)$/i.exec( this.type ) ?
+                        RegExp.$1.toLowerCase() : '';
+                this.name += '.' + ext;
+            }
+    
+            // 如果没有指定mimetype, 但是知道文件后缀。
+            if ( !this.type &&  ~'jpg,jpeg,png,gif,bmp'.indexOf( ext ) ) {
+                this.type = 'image/' + (ext === 'jpg' ? 'jpeg' : ext);
+            }
+    
+            this.ext = ext;
+            this.lastModifiedDate = file.lastModifiedDate ||
+                    (new Date()).toLocaleString();
+        }
+    
+        return Base.inherits( Blob, File );
+    });
+    
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/filepicker',[
+        'base',
+        'runtime/client',
+        'lib/file'
+    ], function( Base, RuntimeClent, File ) {
+    
+        var $ = Base.$;
+    
+        function FilePicker( opts ) {
+            opts = this.options = $.extend({}, FilePicker.options, opts );
+    
+            opts.container = $( opts.id );
+    
+            if ( !opts.container.length ) {
+                throw new Error('按钮指定错误');
+            }
+    
+            opts.innerHTML = opts.innerHTML || opts.label ||
+                    opts.container.html() || '';
+    
+            opts.button = $( opts.button || document.createElement('div') );
+            opts.button.html( opts.innerHTML );
+            opts.container.html( opts.button );
+    
+            RuntimeClent.call( this, 'FilePicker', true );
+        }
+    
+        FilePicker.options = {
+            button: null,
+            container: null,
+            label: null,
+            innerHTML: null,
+            multiple: true,
+            accept: null,
+            name: 'file'
+        };
+    
+        Base.inherits( RuntimeClent, {
+            constructor: FilePicker,
+    
+            init: function() {
+                var me = this,
+                    opts = me.options,
+                    button = opts.button;
+    
+                button.addClass('webuploader-pick');
+    
+                me.on( 'all', function( type ) {
+                    var files;
+    
+                    switch ( type ) {
+                        case 'mouseenter':
+                            button.addClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'mouseleave':
+                            button.removeClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'change':
+                            files = me.exec('getFiles');
+                            me.trigger( 'select', $.map( files, function( file ) {
+                                file = new File( me.getRuid(), file );
+    
+                                // 记录来源。
+                                file._refer = opts.container;
+                                return file;
+                            }), opts.container );
+                            break;
+                    }
+                });
+    
+                me.connectRuntime( opts, function() {
+                    me.refresh();
+                    me.exec( 'init', opts );
+                    me.trigger('ready');
+                });
+    
+                $( window ).on( 'resize', function() {
+                    me.refresh();
+                });
+            },
+    
+            refresh: function() {
+                var shimContainer = this.getRuntime().getContainer(),
+                    button = this.options.button,
+                    width = button.outerWidth ?
+                            button.outerWidth() : button.width(),
+    
+                    height = button.outerHeight ?
+                            button.outerHeight() : button.height(),
+    
+                    pos = button.offset();
+    
+                width && height && shimContainer.css({
+                    bottom: 'auto',
+                    right: 'auto',
+                    width: width + 'px',
+                    height: height + 'px'
+                }).offset( pos );
+            },
+    
+            enable: function() {
+                var btn = this.options.button;
+    
+                btn.removeClass('webuploader-pick-disable');
+                this.refresh();
+            },
+    
+            disable: function() {
+                var btn = this.options.button;
+    
+                this.getRuntime().getContainer().css({
+                    top: '-99999px'
+                });
+    
+                btn.addClass('webuploader-pick-disable');
+            },
+    
+            destroy: function() {
+                if ( this.runtime ) {
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                }
+            }
+        });
+    
+        return FilePicker;
+    });
+    
+    /**
+     * @fileOverview 文件选择相关
+     */
+    define('widgets/filepicker',[
+        'base',
+        'uploader',
+        'lib/filepicker',
+        'widgets/widget'
+    ], function( Base, Uploader, FilePicker ) {
+        var $ = Base.$;
+    
+        $.extend( Uploader.options, {
+    
+            /**
+             * @property {Selector | Object} [pick=undefined]
+             * @namespace options
+             * @for Uploader
+             * @description 指定选择文件的按钮容器，不指定则不创建按钮。
+             *
+             * * `id` {Seletor} 指定选择文件的按钮容器，不指定则不创建按钮。
+             * * `label` {String} 请采用 `innerHTML` 代替
+             * * `innerHTML` {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
+             * * `multiple` {Boolean} 是否开起同时选择多个文件能力。
+             */
+            pick: null,
+    
+            /**
+             * @property {Arroy} [accept=null]
+             * @namespace options
+             * @for Uploader
+             * @description 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
+             *
+             * * `title` {String} 文字描述
+             * * `extensions` {String} 允许的文件后缀，不带点，多个用逗号分割。
+             * * `mimeTypes` {String} 多个用逗号分割。
+             *
+             * 如：
+             *
+             * ```
+             * {
+             *     title: 'Images',
+             *     extensions: 'gif,jpg,jpeg,bmp,png',
+             *     mimeTypes: 'image/*'
+             * }
+             * ```
+             */
+            accept: null/*{
+                title: 'Images',
+                extensions: 'gif,jpg,jpeg,bmp,png',
+                mimeTypes: 'image/*'
+            }*/
+        });
+    
+        return Uploader.register({
+            'add-btn': 'addButton',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable'
+        }, {
+    
+            init: function( opts ) {
+                this.pickers = [];
+                return opts.pick && this.addButton( opts.pick );
+            },
+    
+            refresh: function() {
+                $.each( this.pickers, function() {
+                    this.refresh();
+                });
+            },
+    
+            /**
+             * @method addButton
+             * @for Uploader
+             * @grammar addButton( pick ) => Promise
+             * @description
+             * 添加文件选择按钮，如果一个按钮不够，需要调用此方法来添加。参数跟[options.pick](#WebUploader:Uploader:options)一致。
+             * @example
+             * uploader.addButton({
+             *     id: '#btnContainer',
+             *     innerHTML: '选择文件'
+             * });
+             */
+            addButton: function( pick ) {
+                var me = this,
+                    opts = me.options,
+                    accept = opts.accept,
+                    options, picker, deferred;
+    
+                if ( !pick ) {
+                    return;
+                }
+    
+                deferred = Base.Deferred();
+                $.isPlainObject( pick ) || (pick = {
+                    id: pick
+                });
+    
+                options = $.extend({}, pick, {
+                    accept: $.isPlainObject( accept ) ? [ accept ] : accept,
+                    swf: opts.swf,
+                    runtimeOrder: opts.runtimeOrder
+                });
+    
+                picker = new FilePicker( options );
+    
+                picker.once( 'ready', deferred.resolve );
+                picker.on( 'select', function( files ) {
+                    me.owner.request( 'add-file', [ files ]);
+                });
+                picker.init();
+    
+                this.pickers.push( picker );
+    
+                return deferred.promise();
+            },
+    
+            disable: function() {
+                $.each( this.pickers, function() {
+                    this.disable();
+                });
+            },
+    
+            enable: function() {
+                $.each( this.pickers, function() {
+                    this.enable();
+                });
+            }
+        });
+    });
+    /**
+     * @fileOverview Image
+     */
+    define('lib/image',[
+        'base',
+        'runtime/client',
+        'lib/blob'
+    ], function( Base, RuntimeClient, Blob ) {
+        var $ = Base.$;
+    
+        // 构造器。
+        function Image( opts ) {
+            this.options = $.extend({}, Image.options, opts );
+            RuntimeClient.call( this, 'Image' );
+    
+            this.on( 'load', function() {
+                this._info = this.exec('info');
+                this._meta = this.exec('meta');
+            });
+        }
+    
+        // 默认选项。
+        Image.options = {
+    
+            // 默认的图片处理质量
+            quality: 90,
+    
+            // 是否裁剪
+            crop: false,
+    
+            // 是否保留头部信息
+            preserveHeaders: true,
+    
+            // 是否允许放大。
+            allowMagnify: true
+        };
+    
+        // 继承RuntimeClient.
+        Base.inherits( RuntimeClient, {
+            constructor: Image,
+    
+            info: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._info = val;
+                    return this;
+                }
+    
+                // getter
+                return this._info;
+            },
+    
+            meta: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._meta = val;
+                    return this;
+                }
+    
+                // getter
+                return this._meta;
+            },
+    
+            loadFromBlob: function( blob ) {
+                var me = this,
+                    ruid = blob.getRuid();
+    
+                this.connectRuntime( ruid, function() {
+                    me.exec( 'init', me.options );
+                    me.exec( 'loadFromBlob', blob );
+                });
+            },
+    
+            resize: function() {
+                var args = Base.slice( arguments );
+                return this.exec.apply( this, [ 'resize' ].concat( args ) );
+            },
+    
+            getAsDataUrl: function( type ) {
+                return this.exec( 'getAsDataUrl', type );
+            },
+    
+            getAsBlob: function( type ) {
+                var blob = this.exec( 'getAsBlob', type );
+    
+                return new Blob( this.getRuid(), blob );
+            }
+        });
+    
+        return Image;
+    });
+    /**
+     * @fileOverview 图片操作, 负责预览图片和上传前压缩图片
+     */
+    define('widgets/image',[
+        'base',
+        'uploader',
+        'lib/image',
+        'widgets/widget'
+    ], function( Base, Uploader, Image ) {
+    
+        var $ = Base.$,
+            throttle;
+    
+        // 根据要处理的文件大小来节流，一次不能处理太多，会卡。
+        throttle = (function( max ) {
+            var occupied = 0,
+                waiting = [],
+                tick = function() {
+                    var item;
+    
+                    while ( waiting.length && occupied < max ) {
+                        item = waiting.shift();
+                        occupied += item[ 0 ];
+                        item[ 1 ]();
+                    }
+                };
+    
+            return function( emiter, size, cb ) {
+                waiting.push([ size, cb ]);
+                emiter.once( 'destroy', function() {
+                    occupied -= size;
+                    setTimeout( tick, 1 );
+                });
+                setTimeout( tick, 1 );
+            };
+        })( 5 * 1024 * 1024 );
+    
+        $.extend( Uploader.options, {
+    
+            /**
+             * @property {Object} [thumb]
+             * @namespace options
+             * @for Uploader
+             * @description 配置生成缩略图的选项。
+             *
+             * 默认为：
+             *
+             * ```javascript
+             * {
+             *     width: 110,
+             *     height: 110,
+             *
+             *     // 图片质量，只有type为`image/jpeg`的时候才有效。
+             *     quality: 70,
+             *
+             *     // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+             *     allowMagnify: true,
+             *
+             *     // 是否允许裁剪。
+             *     crop: true,
+             *
+             *     // 是否保留头部meta信息。
+             *     preserveHeaders: false,
+             *
+             *     // 为空的话则保留原有图片格式。
+             *     // 否则强制转换成指定的类型。
+             *     type: 'image/jpeg'
+             * }
+             * ```
+             */
+            thumb: {
+                width: 110,
+                height: 110,
+                quality: 70,
+                allowMagnify: true,
+                crop: true,
+                preserveHeaders: false,
+    
+                // 为空的话则保留原有图片格式。
+                // 否则强制转换成指定的类型。
+                // IE 8下面 base64 大小不能超过 32K 否则预览失败，而非 jpeg 编码的图片很可
+                // 能会超过 32k, 所以这里设置成预览的时候都是 image/jpeg
+                type: 'image/jpeg'
+            },
+    
+            /**
+             * @property {Object} [compress]
+             * @namespace options
+             * @for Uploader
+             * @description 配置压缩的图片的选项。如果此选项为`false`, 则图片在上传前不进行压缩。
+             *
+             * 默认为：
+             *
+             * ```javascript
+             * {
+             *     width: 1600,
+             *     height: 1600,
+             *
+             *     // 图片质量，只有type为`image/jpeg`的时候才有效。
+             *     quality: 90,
+             *
+             *     // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+             *     allowMagnify: false,
+             *
+             *     // 是否允许裁剪。
+             *     crop: false,
+             *
+             *     // 是否保留头部meta信息。
+             *     preserveHeaders: true
+             * }
+             * ```
+             */
+            compress: {
+                width: 1600,
+                height: 1600,
+                quality: 90,
+                allowMagnify: false,
+                crop: false,
+                preserveHeaders: true
+            }
+        });
+    
+        return Uploader.register({
+            'make-thumb': 'makeThumb',
+            'before-send-file': 'compressImage'
+        }, {
+    
+    
+            /**
+             * 生成缩略图，此过程为异步，所以需要传入`callback`。
+             * 通常情况在图片加入队里后调用此方法来生成预览图以增强交互效果。
+             *
+             * `callback`中可以接收到两个参数。
+             * * 第一个为error，如果生成缩略图有错误，此error将为真。
+             * * 第二个为ret, 缩略图的Data URL值。
+             *
+             * **注意**
+             * Date URL在IE6/7中不支持，所以不用调用此方法了，直接显示一张暂不支持预览图片好了。
+             *
+             *
+             * @method makeThumb
+             * @grammar makeThumb( file, callback ) => undefined
+             * @grammar makeThumb( file, callback, width, height ) => undefined
+             * @for Uploader
+             * @example
+             *
+             * uploader.on( 'fileQueued', function( file ) {
+             *     var $li = ...;
+             *
+             *     uploader.makeThumb( file, function( error, ret ) {
+             *         if ( error ) {
+             *             $li.text('预览错误');
+             *         } else {
+             *             $li.append('<img alt="" src="' + ret + '" />');
+             *         }
+             *     });
+             *
+             * });
+             */
+            makeThumb: function( file, cb, width, height ) {
+                var opts, image;
+    
+                file = this.request( 'get-file', file );
+    
+                // 只预览图片格式。
+                if ( !file.type.match( /^image/ ) ) {
+                    cb( true );
+                    return;
+                }
+    
+                opts = $.extend({}, this.options.thumb );
+    
+                // 如果传入的是object.
+                if ( $.isPlainObject( width ) ) {
+                    opts = $.extend( opts, width );
+                    width = null;
+                }
+    
+                width = width || opts.width;
+                height = height || opts.height;
+    
+                image = new Image( opts );
+    
+                image.once( 'load', function() {
+                    file._info = file._info || image.info();
+                    file._meta = file._meta || image.meta();
+                    image.resize( width, height );
+                });
+    
+                image.once( 'complete', function() {
+                    cb( false, image.getAsDataUrl( opts.type ) );
+                    image.destroy();
+                });
+    
+                image.once( 'error', function() {
+                    cb( true );
+                    image.destroy();
+                });
+    
+                throttle( image, file.source.size, function() {
+                    file._info && image.info( file._info );
+                    file._meta && image.meta( file._meta );
+                    image.loadFromBlob( file.source );
+                });
+            },
+    
+            compressImage: function( file ) {
+                var opts = this.options.compress || this.options.resize,
+                    compressSize = opts && opts.compressSize || 300 * 1024,
+                    image, deferred;
+    
+                file = this.request( 'get-file', file );
+    
+                // 只预览图片格式。
+                if ( !opts || !~'image/jpeg,image/jpg'.indexOf( file.type ) ||
+                        file.size < compressSize ||
+                        file._compressed ) {
+                    return;
+                }
+    
+                opts = $.extend({}, opts );
+                deferred = Base.Deferred();
+    
+                image = new Image( opts );
+    
+                deferred.always(function() {
+                    image.destroy();
+                    image = null;
+                });
+                image.once( 'error', deferred.reject );
+                image.once( 'load', function() {
+                    file._info = file._info || image.info();
+                    file._meta = file._meta || image.meta();
+                    image.resize( opts.width, opts.height );
+                });
+    
+                image.once( 'complete', function() {
+                    var blob, size;
+    
+                    // 移动端 UC / qq 浏览器的无图模式下
+                    // ctx.getImageData 处理大图的时候会报 Exception
+                    // INDEX_SIZE_ERR: DOM Exception 1
+                    try {
+                        blob = image.getAsBlob( opts.type );
+    
+                        size = file.size;
+    
+                        // 如果压缩后，比原来还大则不用压缩后的。
+                        if ( blob.size < size ) {
+                            // file.source.destroy && file.source.destroy();
+                            file.source = blob;
+                            file.size = blob.size;
+    
+                            file.trigger( 'resize', blob.size, size );
+                        }
+    
+                        // 标记，避免重复压缩。
+                        file._compressed = true;
+                        deferred.resolve();
+                    } catch ( e ) {
+                        // 出错了直接继续，让其上传原始图片
+                        deferred.resolve();
+                    }
+                });
+    
+                file._info && image.info( file._info );
+                file._meta && image.meta( file._meta );
+    
+                image.loadFromBlob( file.source );
+                return deferred.promise();
+            }
+        });
+    });
+    /**
+     * @fileOverview 文件属性封装
+     */
+    define('file',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            idPrefix = 'WU_FILE_',
+            idSuffix = 0,
+            rExt = /\.([^.]+)$/,
+            statusMap = {};
+    
+        function gid() {
+            return idPrefix + idSuffix++;
+        }
+    
+        /**
+         * 文件类
+         * @class File
+         * @constructor 构造函数
+         * @grammar new File( source ) => File
+         * @param {Lib.File} source [lib.File](#Lib.File)实例, 此source对象是带有Runtime信息的。
+         */
+        function WUFile( source ) {
+    
+            /**
+             * 文件名，包括扩展名（后缀）
+             * @property name
+             * @type {string}
+             */
+            this.name = source.name || 'Untitled';
+    
+            /**
+             * 文件体积（字节）
+             * @property size
+             * @type {uint}
+             * @default 0
+             */
+            this.size = source.size || 0;
+    
+            /**
+             * 文件MIMETYPE类型，与文件类型的对应关系请参考[http://t.cn/z8ZnFny](http://t.cn/z8ZnFny)
+             * @property type
+             * @type {string}
+             * @default 'application'
+             */
+            this.type = source.type || 'application';
+    
+            /**
+             * 文件最后修改日期
+             * @property lastModifiedDate
+             * @type {int}
+             * @default 当前时间戳
+             */
+            this.lastModifiedDate = source.lastModifiedDate || (new Date() * 1);
+    
+            /**
+             * 文件ID，每个对象具有唯一ID，与文件名无关
+             * @property id
+             * @type {string}
+             */
+            this.id = gid();
+    
+            /**
+             * 文件扩展名，通过文件名获取，例如test.png的扩展名为png
+             * @property ext
+             * @type {string}
+             */
+            this.ext = rExt.exec( this.name ) ? RegExp.$1 : '';
+    
+    
+            /**
+             * 状态文字说明。在不同的status语境下有不同的用途。
+             * @property statusText
+             * @type {string}
+             */
+            this.statusText = '';
+    
+            // 存储文件状态，防止通过属性直接修改
+            statusMap[ this.id ] = WUFile.Status.INITED;
+    
+            this.source = source;
+            this.loaded = 0;
+    
+            this.on( 'error', function( msg ) {
+                this.setStatus( WUFile.Status.ERROR, msg );
+            });
+        }
+    
+        $.extend( WUFile.prototype, {
+    
+            /**
+             * 设置状态，状态变化时会触发`change`事件。
+             * @method setStatus
+             * @grammar setStatus( status[, statusText] );
+             * @param {File.Status|String} status [文件状态值](#WebUploader:File:File.Status)
+             * @param {String} [statusText=''] 状态说明，常在error时使用，用http, abort,server等来标记是由于什么原因导致文件错误。
+             */
+            setStatus: function( status, text ) {
+    
+                var prevStatus = statusMap[ this.id ];
+    
+                typeof text !== 'undefined' && (this.statusText = text);
+    
+                if ( status !== prevStatus ) {
+                    statusMap[ this.id ] = status;
+                    /**
+                     * 文件状态变化
+                     * @event statuschange
+                     */
+                    this.trigger( 'statuschange', status, prevStatus );
+                }
+    
+            },
+    
+            /**
+             * 获取文件状态
+             * @return {File.Status}
+             * @example
+                     文件状态具体包括以下几种类型：
+                     {
+                         // 初始化
+                        INITED:     0,
+                        // 已入队列
+                        QUEUED:     1,
+                        // 正在上传
+                        PROGRESS:     2,
+                        // 上传出错
+                        ERROR:         3,
+                        // 上传成功
+                        COMPLETE:     4,
+                        // 上传取消
+                        CANCELLED:     5
+                    }
+             */
+            getStatus: function() {
+                return statusMap[ this.id ];
+            },
+    
+            /**
+             * 获取文件原始信息。
+             * @return {*}
+             */
+            getSource: function() {
+                return this.source;
+            },
+    
+            destory: function() {
+                delete statusMap[ this.id ];
+            }
+        });
+    
+        Mediator.installTo( WUFile.prototype );
+    
+        /**
+         * 文件状态值，具体包括以下几种类型：
+         * * `inited` 初始状态
+         * * `queued` 已经进入队列, 等待上传
+         * * `progress` 上传中
+         * * `complete` 上传完成。
+         * * `error` 上传出错，可重试
+         * * `interrupt` 上传中断，可续传。
+         * * `invalid` 文件不合格，不能重试上传。会自动从队列中移除。
+         * * `cancelled` 文件被移除。
+         * @property {Object} Status
+         * @namespace File
+         * @class File
+         * @static
+         */
+        WUFile.Status = {
+            INITED:     'inited',    // 初始状态
+            QUEUED:     'queued',    // 已经进入队列, 等待上传
+            PROGRESS:   'progress',    // 上传中
+            ERROR:      'error',    // 上传出错，可重试
+            COMPLETE:   'complete',    // 上传完成。
+            CANCELLED:  'cancelled',    // 上传取消。
+            INTERRUPT:  'interrupt',    // 上传中断，可续传。
+            INVALID:    'invalid'    // 文件不合格，不能重试上传。
+        };
+    
+        return WUFile;
+    });
+    
+    /**
+     * @fileOverview 文件队列
+     */
+    define('queue',[
+        'base',
+        'mediator',
+        'file'
+    ], function( Base, Mediator, WUFile ) {
+    
+        var $ = Base.$,
+            STATUS = WUFile.Status;
+    
+        /**
+         * 文件队列, 用来存储各个状态中的文件。
+         * @class Queue
+         * @extends Mediator
+         */
+        function Queue() {
+    
+            /**
+             * 统计文件数。
+             * * `numOfQueue` 队列中的文件数。
+             * * `numOfSuccess` 上传成功的文件数
+             * * `numOfCancel` 被移除的文件数
+             * * `numOfProgress` 正在上传中的文件数
+             * * `numOfUploadFailed` 上传错误的文件数。
+             * * `numOfInvalid` 无效的文件数。
+             * @property {Object} stats
+             */
+            this.stats = {
+                numOfQueue: 0,
+                numOfSuccess: 0,
+                numOfCancel: 0,
+                numOfProgress: 0,
+                numOfUploadFailed: 0,
+                numOfInvalid: 0
+            };
+    
+            // 上传队列，仅包括等待上传的文件
+            this._queue = [];
+    
+            // 存储所有文件
+            this._map = {};
+        }
+    
+        $.extend( Queue.prototype, {
+    
+            /**
+             * 将新文件加入对队列尾部
+             *
+             * @method append
+             * @param  {File} file   文件对象
+             */
+            append: function( file ) {
+                this._queue.push( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 将新文件加入对队列头部
+             *
+             * @method prepend
+             * @param  {File} file   文件对象
+             */
+            prepend: function( file ) {
+                this._queue.unshift( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 获取文件对象
+             *
+             * @method getFile
+             * @param  {String} fileId   文件ID
+             * @return {File}
+             */
+            getFile: function( fileId ) {
+                if ( typeof fileId !== 'string' ) {
+                    return fileId;
+                }
+                return this._map[ fileId ];
+            },
+    
+            /**
+             * 从队列中取出一个指定状态的文件。
+             * @grammar fetch( status ) => File
+             * @method fetch
+             * @param {String} status [文件状态值](#WebUploader:File:File.Status)
+             * @return {File} [File](#WebUploader:File)
+             */
+            fetch: function( status ) {
+                var len = this._queue.length,
+                    i, file;
+    
+                status = status || STATUS.QUEUED;
+    
+                for ( i = 0; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( status === file.getStatus() ) {
+                        return file;
+                    }
+                }
+    
+                return null;
+            },
+    
+            /**
+             * 对队列进行排序，能够控制文件上传顺序。
+             * @grammar sort( fn ) => undefined
+             * @method sort
+             * @param {Function} fn 排序方法
+             */
+            sort: function( fn ) {
+                if ( typeof fn === 'function' ) {
+                    this._queue.sort( fn );
+                }
+            },
+    
+            /**
+             * 获取指定类型的文件列表, 列表中每一个成员为[File](#WebUploader:File)对象。
+             * @grammar getFiles( [status1[, status2 ...]] ) => Array
+             * @method getFiles
+             * @param {String} [status] [文件状态值](#WebUploader:File:File.Status)
+             */
+            getFiles: function() {
+                var sts = [].slice.call( arguments, 0 ),
+                    ret = [],
+                    i = 0,
+                    len = this._queue.length,
+                    file;
+    
+                for ( ; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( sts.length && !~$.inArray( file.getStatus(), sts ) ) {
+                        continue;
+                    }
+    
+                    ret.push( file );
+                }
+    
+                return ret;
+            },
+    
+            _fileAdded: function( file ) {
+                var me = this,
+                    existing = this._map[ file.id ];
+    
+                if ( !existing ) {
+                    this._map[ file.id ] = file;
+    
+                    file.on( 'statuschange', function( cur, pre ) {
+                        me._onFileStatusChange( cur, pre );
+                    });
+                }
+    
+                file.setStatus( STATUS.QUEUED );
+            },
+    
+            _onFileStatusChange: function( curStatus, preStatus ) {
+                var stats = this.stats;
+    
+                switch ( preStatus ) {
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress--;
+                        break;
+    
+                    case STATUS.QUEUED:
+                        stats.numOfQueue --;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed--;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid--;
+                        break;
+                }
+    
+                switch ( curStatus ) {
+                    case STATUS.QUEUED:
+                        stats.numOfQueue++;
+                        break;
+    
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress++;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed++;
+                        break;
+    
+                    case STATUS.COMPLETE:
+                        stats.numOfSuccess++;
+                        break;
+    
+                    case STATUS.CANCELLED:
+                        stats.numOfCancel++;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid++;
+                        break;
+                }
+            }
+    
+        });
+    
+        Mediator.installTo( Queue.prototype );
+    
+        return Queue;
+    });
+    /**
+     * @fileOverview 队列
+     */
+    define('widgets/queue',[
+        'base',
+        'uploader',
+        'queue',
+        'file',
+        'lib/file',
+        'runtime/client',
+        'widgets/widget'
+    ], function( Base, Uploader, Queue, WUFile, File, RuntimeClient ) {
+    
+        var $ = Base.$,
+            rExt = /\.\w+$/,
+            Status = WUFile.Status;
+    
+        return Uploader.register({
+            'sort-files': 'sortFiles',
+            'add-file': 'addFiles',
+            'get-file': 'getFile',
+            'fetch-file': 'fetchFile',
+            'get-stats': 'getStats',
+            'get-files': 'getFiles',
+            'remove-file': 'removeFile',
+            'retry': 'retry',
+            'reset': 'reset',
+            'accept-file': 'acceptFile'
+        }, {
+    
+            init: function( opts ) {
+                var me = this,
+                    deferred, len, i, item, arr, accept, runtime;
+    
+                if ( $.isPlainObject( opts.accept ) ) {
+                    opts.accept = [ opts.accept ];
+                }
+    
+                // accept中的中生成匹配正则。
+                if ( opts.accept ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        item = opts.accept[ i ].extensions;
+                        item && arr.push( item );
+                    }
+    
+                    if ( arr.length ) {
+                        accept = '\\.' + arr.join(',')
+                                .replace( /,/g, '$|\\.' )
+                                .replace( /\*/g, '.*' ) + '$';
+                    }
+    
+                    me.accept = new RegExp( accept, 'i' );
+                }
+    
+                me.queue = new Queue();
+                me.stats = me.queue.stats;
+    
+                // 如果当前不是html5运行时，那就算了。
+                // 不执行后续操作
+                if ( this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                // 创建一个 html5 运行时的 placeholder
+                // 以至于外部添加原生 File 对象的时候能正确包裹一下供 webuploader 使用。
+                deferred = Base.Deferred();
+                runtime = new RuntimeClient('Placeholder');
+                runtime.connectRuntime({
+                    runtimeOrder: 'html5'
+                }, function() {
+                    me._ruid = runtime.getRuid();
+                    deferred.resolve();
+                });
+                return deferred.promise();
+            },
+    
+    
+            // 为了支持外部直接添加一个原生File对象。
+            _wrapFile: function( file ) {
+                if ( !(file instanceof WUFile) ) {
+    
+                    if ( !(file instanceof File) ) {
+                        if ( !this._ruid ) {
+                            throw new Error('Can\'t add external files.');
+                        }
+                        file = new File( this._ruid, file );
+                    }
+    
+                    file = new WUFile( file );
+                }
+    
+                return file;
+            },
+    
+            // 判断文件是否可以被加入队列
+            acceptFile: function( file ) {
+                var invalid = !file || file.size < 6 || this.accept &&
+    
+                        // 如果名字中有后缀，才做后缀白名单处理。
+                        rExt.exec( file.name ) && !this.accept.test( file.name );
+    
+                return !invalid;
+            },
+    
+    
+            /**
+             * @event beforeFileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列之前触发，此事件的handler返回值为`false`，则此文件不会被添加进入队列。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event fileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列以后触发。
+             * @for  Uploader
+             */
+    
+            _addFile: function( file ) {
+                var me = this;
+    
+                file = me._wrapFile( file );
+    
+                // 不过类型判断允许不允许，先派送 `beforeFileQueued`
+                if ( !me.owner.trigger( 'beforeFileQueued', file ) ) {
+                    return;
+                }
+    
+                // 类型不匹配，则派送错误事件，并返回。
+                if ( !me.acceptFile( file ) ) {
+                    me.owner.trigger( 'error', 'Q_TYPE_DENIED', file );
+                    return;
+                }
+    
+                me.queue.append( file );
+                me.owner.trigger( 'fileQueued', file );
+                return file;
+            },
+    
+            getFile: function( fileId ) {
+                return this.queue.getFile( fileId );
+            },
+    
+            /**
+             * @event filesQueued
+             * @param {File} files 数组，内容为原始File(lib/File）对象。
+             * @description 当一批文件添加进队列以后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method addFiles
+             * @grammar addFiles( file ) => undefined
+             * @grammar addFiles( [file1, file2 ...] ) => undefined
+             * @param {Array of File or File} [files] Files 对象 数组
+             * @description 添加文件到队列
+             * @for  Uploader
+             */
+            addFiles: function( files ) {
+                var me = this;
+    
+                if ( !files.length ) {
+                    files = [ files ];
+                }
+    
+                files = $.map( files, function( file ) {
+                    return me._addFile( file );
+                });
+    
+                me.owner.trigger( 'filesQueued', files );
+    
+                if ( me.options.auto ) {
+                    me.request('start-upload');
+                }
+            },
+    
+            getStats: function() {
+                return this.stats;
+            },
+    
+            /**
+             * @event fileDequeued
+             * @param {File} file File对象
+             * @description 当文件被移除队列后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method removeFile
+             * @grammar removeFile( file ) => undefined
+             * @grammar removeFile( id ) => undefined
+             * @param {File|id} file File对象或这File对象的id
+             * @description 移除某一文件。
+             * @for  Uploader
+             * @example
+             *
+             * $li.on('click', '.remove-this', function() {
+             *     uploader.removeFile( file );
+             * })
+             */
+            removeFile: function( file ) {
+                var me = this;
+    
+                file = file.id ? file : me.queue.getFile( file );
+    
+                file.setStatus( Status.CANCELLED );
+                me.owner.trigger( 'fileDequeued', file );
+            },
+    
+            /**
+             * @method getFiles
+             * @grammar getFiles() => Array
+             * @grammar getFiles( status1, status2, status... ) => Array
+             * @description 返回指定状态的文件集合，不传参数将返回所有状态的文件。
+             * @for  Uploader
+             * @example
+             * console.log( uploader.getFiles() );    // => all files
+             * console.log( uploader.getFiles('error') )    // => all error files.
+             */
+            getFiles: function() {
+                return this.queue.getFiles.apply( this.queue, arguments );
+            },
+    
+            fetchFile: function() {
+                return this.queue.fetch.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method retry
+             * @grammar retry() => undefined
+             * @grammar retry( file ) => undefined
+             * @description 重试上传，重试指定文件，或者从出错的文件开始重新上传。
+             * @for  Uploader
+             * @example
+             * function retry() {
+             *     uploader.retry();
+             * }
+             */
+            retry: function( file, noForceStart ) {
+                var me = this,
+                    files, i, len;
+    
+                if ( file ) {
+                    file = file.id ? file : me.queue.getFile( file );
+                    file.setStatus( Status.QUEUED );
+                    noForceStart || me.request('start-upload');
+                    return;
+                }
+    
+                files = me.queue.getFiles( Status.ERROR );
+                i = 0;
+                len = files.length;
+    
+                for ( ; i < len; i++ ) {
+                    file = files[ i ];
+                    file.setStatus( Status.QUEUED );
+                }
+    
+                me.request('start-upload');
+            },
+    
+            /**
+             * @method sort
+             * @grammar sort( fn ) => undefined
+             * @description 排序队列中的文件，在上传之前调整可以控制上传顺序。
+             * @for  Uploader
+             */
+            sortFiles: function() {
+                return this.queue.sort.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method reset
+             * @grammar reset() => undefined
+             * @description 重置uploader。目前只重置了队列。
+             * @for  Uploader
+             * @example
+             * uploader.reset();
+             */
+            reset: function() {
+                this.queue = new Queue();
+                this.stats = this.queue.stats;
+            }
+        });
+    
+    });
+    /**
+     * @fileOverview 添加获取Runtime相关信息的方法。
+     */
+    define('widgets/runtime',[
+        'uploader',
+        'runtime/runtime',
+        'widgets/widget'
+    ], function( Uploader, Runtime ) {
+    
+        Uploader.support = function() {
+            return Runtime.hasRuntime.apply( Runtime, arguments );
+        };
+    
+        return Uploader.register({
+            'predict-runtime-type': 'predictRuntmeType'
+        }, {
+    
+            init: function() {
+                if ( !this.predictRuntmeType() ) {
+                    throw Error('Runtime Error');
+                }
+            },
+    
+            /**
+             * 预测Uploader将采用哪个`Runtime`
+             * @grammar predictRuntmeType() => String
+             * @method predictRuntmeType
+             * @for  Uploader
+             */
+            predictRuntmeType: function() {
+                var orders = this.options.runtimeOrder || Runtime.orders,
+                    type = this.type,
+                    i, len;
+    
+                if ( !type ) {
+                    orders = orders.split( /\s*,\s*/g );
+    
+                    for ( i = 0, len = orders.length; i < len; i++ ) {
+                        if ( Runtime.hasRuntime( orders[ i ] ) ) {
+                            this.type = type = orders[ i ];
+                            break;
+                        }
+                    }
+                }
+    
+                return type;
+            }
+        });
+    });
+    /**
+     * @fileOverview Transport
+     */
+    define('lib/transport',[
+        'base',
+        'runtime/client',
+        'mediator'
+    ], function( Base, RuntimeClient, Mediator ) {
+    
+        var $ = Base.$;
+    
+        function Transport( opts ) {
+            var me = this;
+    
+            opts = me.options = $.extend( true, {}, Transport.options, opts || {} );
+            RuntimeClient.call( this, 'Transport' );
+    
+            this._blob = null;
+            this._formData = opts.formData || {};
+            this._headers = opts.headers || {};
+    
+            this.on( 'progress', this._timeout );
+            this.on( 'load error', function() {
+                me.trigger( 'progress', 1 );
+                clearTimeout( me._timer );
+            });
+        }
+    
+        Transport.options = {
+            server: '',
+            method: 'POST',
+    
+            // 跨域时，是否允许携带cookie, 只有html5 runtime才有效
+            withCredentials: false,
+            fileVal: 'file',
+            timeout: 2 * 60 * 1000,    // 2分钟
+            formData: {},
+            headers: {},
+            sendAsBinary: false
+        };
+    
+        $.extend( Transport.prototype, {
+    
+            // 添加Blob, 只能添加一次，最后一次有效。
+            appendBlob: function( key, blob, filename ) {
+                var me = this,
+                    opts = me.options;
+    
+                if ( me.getRuid() ) {
+                    me.disconnectRuntime();
+                }
+    
+                // 连接到blob归属的同一个runtime.
+                me.connectRuntime( blob.ruid, function() {
+                    me.exec('init');
+                });
+    
+                me._blob = blob;
+                opts.fileVal = key || opts.fileVal;
+                opts.filename = filename || opts.filename;
+            },
+    
+            // 添加其他字段
+            append: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._formData, key );
+                } else {
+                    this._formData[ key ] = value;
+                }
+            },
+    
+            setRequestHeader: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._headers, key );
+                } else {
+                    this._headers[ key ] = value;
+                }
+            },
+    
+            send: function( method ) {
+                this.exec( 'send', method );
+                this._timeout();
+            },
+    
+            abort: function() {
+                clearTimeout( this._timer );
+                return this.exec('abort');
+            },
+    
+            destroy: function() {
+                this.trigger('destroy');
+                this.off();
+                this.exec('destroy');
+                this.disconnectRuntime();
+            },
+    
+            getResponse: function() {
+                return this.exec('getResponse');
+            },
+    
+            getResponseAsJson: function() {
+                return this.exec('getResponseAsJson');
+            },
+    
+            getStatus: function() {
+                return this.exec('getStatus');
+            },
+    
+            _timeout: function() {
+                var me = this,
+                    duration = me.options.timeout;
+    
+                if ( !duration ) {
+                    return;
+                }
+    
+                clearTimeout( me._timer );
+                me._timer = setTimeout(function() {
+                    me.abort();
+                    me.trigger( 'error', 'timeout' );
+                }, duration );
+            }
+    
+        });
+    
+        // 让Transport具备事件功能。
+        Mediator.installTo( Transport.prototype );
+    
+        return Transport;
+    });
+    /**
+     * @fileOverview 负责文件上传相关。
+     */
+    define('widgets/upload',[
+        'base',
+        'uploader',
+        'file',
+        'lib/transport',
+        'widgets/widget'
+    ], function( Base, Uploader, WUFile, Transport ) {
+    
+        var $ = Base.$,
+            isPromise = Base.isPromise,
+            Status = WUFile.Status;
+    
+        // 添加默认配置项
+        $.extend( Uploader.options, {
+    
+    
+            /**
+             * @property {Boolean} [prepareNextFile=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否允许在文件传输时提前把下一个文件准备好。
+             * 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。
+             * 如果能提前在当前文件传输期处理，可以节省总体耗时。
+             */
+            prepareNextFile: false,
+    
+            /**
+             * @property {Boolean} [chunked=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否要分片处理大文件上传。
+             */
+            chunked: false,
+    
+            /**
+             * @property {Boolean} [chunkSize=5242880]
+             * @namespace options
+             * @for Uploader
+             * @description 如果要分片，分多大一片？ 默认大小为5M.
+             */
+            chunkSize: 5 * 1024 * 1024,
+    
+            /**
+             * @property {Boolean} [chunkRetry=2]
+             * @namespace options
+             * @for Uploader
+             * @description 如果某个分片由于网络问题出错，允许自动重传多少次？
+             */
+            chunkRetry: 2,
+    
+            /**
+             * @property {Boolean} [threads=3]
+             * @namespace options
+             * @for Uploader
+             * @description 上传并发数。允许同时最大上传进程数。
+             */
+            threads: 3,
+    
+    
+            /**
+             * @property {Object} [formData]
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传请求的参数表，每次发送都会发送此对象中的参数。
+             */
+            formData: null
+    
+            /**
+             * @property {Object} [fileVal='file']
+             * @namespace options
+             * @for Uploader
+             * @description 设置文件上传域的name。
+             */
+    
+            /**
+             * @property {Object} [method='POST']
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传方式，`POST`或者`GET`。
+             */
+    
+            /**
+             * @property {Object} [sendAsBinary=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否已二进制的流的方式发送文件，这样整个上传内容`php://input`都为文件内容，
+             * 其他参数在$_GET数组中。
+             */
+        });
+    
+        // 负责将文件切片。
+        function CuteFile( file, chunkSize ) {
+            var pending = [],
+                blob = file.source,
+                total = blob.size,
+                chunks = chunkSize ? Math.ceil( total / chunkSize ) : 1,
+                start = 0,
+                index = 0,
+                len;
+    
+            while ( index < chunks ) {
+                len = Math.min( chunkSize, total - start );
+    
+                pending.push({
+                    file: file,
+                    start: start,
+                    end: chunkSize ? (start + len) : total,
+                    total: total,
+                    chunks: chunks,
+                    chunk: index++
+                });
+                start += len;
+            }
+    
+            file.blocks = pending.concat();
+            file.remaning = pending.length;
+    
+            return {
+                file: file,
+    
+                has: function() {
+                    return !!pending.length;
+                },
+    
+                fetch: function() {
+                    return pending.shift();
+                }
+            };
+        }
+    
+        Uploader.register({
+            'start-upload': 'start',
+            'stop-upload': 'stop',
+            'skip-file': 'skipFile',
+            'is-in-progress': 'isInProgress'
+        }, {
+    
+            init: function() {
+                var owner = this.owner;
+    
+                this.runing = false;
+    
+                // 记录当前正在传的数据，跟threads相关
+                this.pool = [];
+    
+                // 缓存即将上传的文件。
+                this.pending = [];
+    
+                // 跟踪还有多少分片没有完成上传。
+                this.remaning = 0;
+                this.__tick = Base.bindFn( this._tick, this );
+    
+                owner.on( 'uploadComplete', function( file ) {
+                    // 把其他块取消了。
+                    file.blocks && $.each( file.blocks, function( _, v ) {
+                        v.transport && (v.transport.abort(), v.transport.destroy());
+                        delete v.transport;
+                    });
+    
+                    delete file.blocks;
+                    delete file.remaning;
+                });
+            },
+    
+            /**
+             * @event startUpload
+             * @description 当开始上传流程时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。
+             * @grammar upload() => undefined
+             * @method upload
+             * @for  Uploader
+             */
+            start: function() {
+                var me = this;
+    
+                // 移出invalid的文件
+                $.each( me.request( 'get-files', Status.INVALID ), function() {
+                    me.request( 'remove-file', this );
+                });
+    
+                if ( me.runing ) {
+                    return;
+                }
+    
+                me.runing = true;
+    
+                // 如果有暂停的，则续传
+                $.each( me.pool, function( _, v ) {
+                    var file = v.file;
+    
+                    if ( file.getStatus() === Status.INTERRUPT ) {
+                        file.setStatus( Status.PROGRESS );
+                        me._trigged = false;
+                        v.transport && v.transport.send();
+                    }
+                });
+    
+                me._trigged = false;
+                me.owner.trigger('startUpload');
+                Base.nextTick( me.__tick );
+            },
+    
+            /**
+             * @event stopUpload
+             * @description 当开始上传流程暂停时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 暂停上传。第一个参数为是否中断上传当前正在上传的文件。
+             * @grammar stop() => undefined
+             * @grammar stop( true ) => undefined
+             * @method stop
+             * @for  Uploader
+             */
+            stop: function( interrupt ) {
+                var me = this;
+    
+                if ( me.runing === false ) {
+                    return;
+                }
+    
+                me.runing = false;
+    
+                interrupt && $.each( me.pool, function( _, v ) {
+                    v.transport && v.transport.abort();
+                    v.file.setStatus( Status.INTERRUPT );
+                });
+    
+                me.owner.trigger('stopUpload');
+            },
+    
+            /**
+             * 判断`Uplaode`r是否正在上传中。
+             * @grammar isInProgress() => Boolean
+             * @method isInProgress
+             * @for  Uploader
+             */
+            isInProgress: function() {
+                return !!this.runing;
+            },
+    
+            getStats: function() {
+                return this.request('get-stats');
+            },
+    
+            /**
+             * 掉过一个文件上传，直接标记指定文件为已上传状态。
+             * @grammar skipFile( file ) => undefined
+             * @method skipFile
+             * @for  Uploader
+             */
+            skipFile: function( file, status ) {
+                file = this.request( 'get-file', file );
+    
+                file.setStatus( status || Status.COMPLETE );
+                file.skipped = true;
+    
+                // 如果正在上传。
+                file.blocks && $.each( file.blocks, function( _, v ) {
+                    var _tr = v.transport;
+    
+                    if ( _tr ) {
+                        _tr.abort();
+                        _tr.destroy();
+                        delete v.transport;
+                    }
+                });
+    
+                this.owner.trigger( 'uploadSkip', file );
+            },
+    
+            /**
+             * @event uploadFinished
+             * @description 当所有文件上传结束时触发。
+             * @for  Uploader
+             */
+            _tick: function() {
+                var me = this,
+                    opts = me.options,
+                    fn, val;
+    
+                // 上一个promise还没有结束，则等待完成后再执行。
+                if ( me._promise ) {
+                    return me._promise.always( me.__tick );
+                }
+    
+                // 还有位置，且还有文件要处理的话。
+                if ( me.pool.length < opts.threads && (val = me._nextBlock()) ) {
+                    me._trigged = false;
+    
+                    fn = function( val ) {
+                        me._promise = null;
+    
+                        // 有可能是reject过来的，所以要检测val的类型。
+                        val && val.file && me._startSend( val );
+                        Base.nextTick( me.__tick );
+                    };
+    
+                    me._promise = isPromise( val ) ? val.always( fn ) : fn( val );
+    
+                // 没有要上传的了，且没有正在传输的了。
+                } else if ( !me.remaning && !me.getStats().numOfQueue ) {
+                    me.runing = false;
+    
+                    me._trigged || Base.nextTick(function() {
+                        me.owner.trigger('uploadFinished');
+                    });
+                    me._trigged = true;
+                }
+            },
+    
+            _nextBlock: function() {
+                var me = this,
+                    act = me._act,
+                    opts = me.options,
+                    next, done;
+    
+                // 如果当前文件还有没有需要传输的，则直接返回剩下的。
+                if ( act && act.has() &&
+                        act.file.getStatus() === Status.PROGRESS ) {
+    
+                    // 是否提前准备下一个文件
+                    if ( opts.prepareNextFile && !me.pending.length ) {
+                        me._prepareNextFile();
+                    }
+    
+                    return act.fetch();
+    
+                // 否则，如果正在运行，则准备下一个文件，并等待完成后返回下个分片。
+                } else if ( me.runing ) {
+    
+                    // 如果缓存中有，则直接在缓存中取，没有则去queue中取。
+                    if ( !me.pending.length && me.getStats().numOfQueue ) {
+                        me._prepareNextFile();
+                    }
+    
+                    next = me.pending.shift();
+                    done = function( file ) {
+                        if ( !file ) {
+                            return null;
+                        }
+    
+                        act = CuteFile( file, opts.chunked ? opts.chunkSize : 0 );
+                        me._act = act;
+                        return act.fetch();
+                    };
+    
+                    // 文件可能还在prepare中，也有可能已经完全准备好了。
+                    return isPromise( next ) ?
+                            next[ next.pipe ? 'pipe' : 'then']( done ) :
+                            done( next );
+                }
+            },
+    
+    
+            /**
+             * @event uploadStart
+             * @param {File} file File对象
+             * @description 某个文件开始上传前触发，一个文件只会触发一次。
+             * @for  Uploader
+             */
+            _prepareNextFile: function() {
+                var me = this,
+                    file = me.request('fetch-file'),
+                    pending = me.pending,
+                    promise;
+    
+                if ( file ) {
+                    promise = me.request( 'before-send-file', file, function() {
+    
+                        // 有可能文件被skip掉了。文件被skip掉后，状态坑定不是Queued.
+                        if ( file.getStatus() === Status.QUEUED ) {
+                            me.owner.trigger( 'uploadStart', file );
+                            file.setStatus( Status.PROGRESS );
+                            return file;
+                        }
+    
+                        return me._finishFile( file );
+                    });
+    
+                    // 如果还在pending中，则替换成文件本身。
+                    promise.done(function() {
+                        var idx = $.inArray( promise, pending );
+    
+                        ~idx && pending.splice( idx, 1, file );
+                    });
+    
+                    // befeore-send-file的钩子就有错误发生。
+                    promise.fail(function( reason ) {
+                        file.setStatus( Status.ERROR, reason );
+                        me.owner.trigger( 'uploadError', file, reason );
+                        me.owner.trigger( 'uploadComplete', file );
+                    });
+    
+                    pending.push( promise );
+                }
+            },
+    
+            // 让出位置了，可以让其他分片开始上传
+            _popBlock: function( block ) {
+                var idx = $.inArray( block, this.pool );
+    
+                this.pool.splice( idx, 1 );
+                block.file.remaning--;
+                this.remaning--;
+            },
+    
+            // 开始上传，可以被掉过。如果promise被reject了，则表示跳过此分片。
+            _startSend: function( block ) {
+                var me = this,
+                    file = block.file,
+                    promise;
+    
+                me.pool.push( block );
+                me.remaning++;
+    
+                // 如果没有分片，则直接使用原始的。
+                // 不会丢失content-type信息。
+                block.blob = block.chunks === 1 ? file.source :
+                        file.source.slice( block.start, block.end );
+    
+                // hook, 每个分片发送之前可能要做些异步的事情。
+                promise = me.request( 'before-send', block, function() {
+    
+                    // 有可能文件已经上传出错了，所以不需要再传输了。
+                    if ( file.getStatus() === Status.PROGRESS ) {
+                        me._doSend( block );
+                    } else {
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+    
+                // 如果为fail了，则跳过此分片。
+                promise.fail(function() {
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file ).always(function() {
+                            block.percentage = 1;
+                            me._popBlock( block );
+                            me.owner.trigger( 'uploadComplete', file );
+                            Base.nextTick( me.__tick );
+                        });
+                    } else {
+                        block.percentage = 1;
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+            },
+    
+    
+            /**
+             * @event uploadBeforeSend
+             * @param {Object} object
+             * @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数。
+             * @description 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadAccept
+             * @param {Object} object
+             * @param {Object} ret 服务端的返回数据，json格式，如果服务端不是json格式，从ret._raw中取数据，自行解析。
+             * @description 当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为`false`, 则此文件将派送`server`类型的`uploadError`事件。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadProgress
+             * @param {File} file File对象
+             * @param {Number} percentage 上传进度
+             * @description 上传过程中触发，携带上传进度。
+             * @for  Uploader
+             */
+    
+    
+            /**
+             * @event uploadError
+             * @param {File} file File对象
+             * @param {String} reason 出错的code
+             * @description 当文件上传出错时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadSuccess
+             * @param {File} file File对象
+             * @param {Object} response 服务端返回的数据
+             * @description 当文件上传成功时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadComplete
+             * @param {File} [file] File对象
+             * @description 不管成功或者失败，文件上传完成时触发。
+             * @for  Uploader
+             */
+    
+            // 做上传操作。
+            _doSend: function( block ) {
+                var me = this,
+                    owner = me.owner,
+                    opts = me.options,
+                    file = block.file,
+                    tr = new Transport( opts ),
+                    data = $.extend({}, opts.formData ),
+                    headers = $.extend({}, opts.headers ),
+                    requestAccept, ret;
+    
+                block.transport = tr;
+    
+                tr.on( 'destroy', function() {
+                    delete block.transport;
+                    me._popBlock( block );
+                    Base.nextTick( me.__tick );
+                });
+    
+                // 广播上传进度。以文件为单位。
+                tr.on( 'progress', function( percentage ) {
+                    var totalPercent = 0,
+                        uploaded = 0;
+    
+                    // 可能没有abort掉，progress还是执行进来了。
+                    // if ( !file.blocks ) {
+                    //     return;
+                    // }
+    
+                    totalPercent = block.percentage = percentage;
+    
+                    if ( block.chunks > 1 ) {    // 计算文件的整体速度。
+                        $.each( file.blocks, function( _, v ) {
+                            uploaded += (v.percentage || 0) * (v.end - v.start);
+                        });
+    
+                        totalPercent = uploaded / file.size;
+                    }
+    
+                    owner.trigger( 'uploadProgress', file, totalPercent || 0 );
+                });
+    
+                // 用来询问，是否返回的结果是有错误的。
+                requestAccept = function( reject ) {
+                    var fn;
+    
+                    ret = tr.getResponseAsJson() || {};
+                    ret._raw = tr.getResponse();
+                    fn = function( value ) {
+                        reject = value;
+                    };
+    
+                    // 服务端响应了，不代表成功了，询问是否响应正确。
+                    if ( !owner.trigger( 'uploadAccept', block, ret, fn ) ) {
+                        reject = reject || 'server';
+                    }
+    
+                    return reject;
+                };
+    
+                // 尝试重试，然后广播文件上传出错。
+                tr.on( 'error', function( type, flag ) {
+                    block.retried = block.retried || 0;
+    
+                    // 自动重试
+                    if ( block.chunks > 1 && ~'http,abort'.indexOf( type ) &&
+                            block.retried < opts.chunkRetry ) {
+    
+                        block.retried++;
+                        tr.send();
+    
+                    } else {
+    
+                        // http status 500 ~ 600
+                        if ( !flag && type === 'server' ) {
+                            type = requestAccept( type );
+                        }
+    
+                        file.setStatus( Status.ERROR, type );
+                        owner.trigger( 'uploadError', file, type );
+                        owner.trigger( 'uploadComplete', file );
+                    }
+                });
+    
+                // 上传成功
+                tr.on( 'load', function() {
+                    var reason;
+    
+                    // 如果非预期，转向上传出错。
+                    if ( (reason = requestAccept()) ) {
+                        tr.trigger( 'error', reason, true );
+                        return;
+                    }
+    
+                    // 全部上传完成。
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file, ret );
+                    } else {
+                        tr.destroy();
+                    }
+                });
+    
+                // 配置默认的上传字段。
+                data = $.extend( data, {
+                    id: file.id,
+                    name: file.name,
+                    type: file.type,
+                    lastModifiedDate: file.lastModifiedDate,
+                    size: file.size
+                });
+    
+                block.chunks > 1 && $.extend( data, {
+                    chunks: block.chunks,
+                    chunk: block.chunk
+                });
+    
+                // 在发送之间可以添加字段什么的。。。
+                // 如果默认的字段不够使用，可以通过监听此事件来扩展
+                owner.trigger( 'uploadBeforeSend', block, data, headers );
+    
+                // 开始发送。
+                tr.appendBlob( opts.fileVal, block.blob, file.name );
+                tr.append( data );
+                tr.setRequestHeader( headers );
+                tr.send();
+            },
+    
+            // 完成上传。
+            _finishFile: function( file, ret, hds ) {
+                var owner = this.owner;
+    
+                return owner
+                        .request( 'after-send-file', arguments, function() {
+                            file.setStatus( Status.COMPLETE );
+                            owner.trigger( 'uploadSuccess', file, ret, hds );
+                        })
+                        .fail(function( reason ) {
+    
+                            // 如果外部已经标记为invalid什么的，不再改状态。
+                            if ( file.getStatus() === Status.PROGRESS ) {
+                                file.setStatus( Status.ERROR, reason );
+                            }
+    
+                            owner.trigger( 'uploadError', file, reason );
+                        })
+                        .always(function() {
+                            owner.trigger( 'uploadComplete', file );
+                        });
+            }
+    
+        });
+    });
+    /**
+     * @fileOverview 各种验证，包括文件总大小是否超出、单文件是否超出和文件是否重复。
+     */
+    
+    define('widgets/validator',[
+        'base',
+        'uploader',
+        'file',
+        'widgets/widget'
+    ], function( Base, Uploader, WUFile ) {
+    
+        var $ = Base.$,
+            validators = {},
+            api;
+    
+        /**
+         * @event error
+         * @param {String} type 错误类型。
+         * @description 当validate不通过时，会以派送错误事件的形式通知调用者。通过`upload.on('error', handler)`可以捕获到此类错误，目前有以下错误会在特定的情况下派送错来。
+         *
+         * * `Q_EXCEED_NUM_LIMIT` 在设置了`fileNumLimit`且尝试给`uploader`添加的文件数量超出这个值时派送。
+         * * `Q_EXCEED_SIZE_LIMIT` 在设置了`Q_EXCEED_SIZE_LIMIT`且尝试给`uploader`添加的文件总大小超出这个值时派送。
+         * @for  Uploader
+         */
+    
+        // 暴露给外面的api
+        api = {
+    
+            // 添加验证器
+            addValidator: function( type, cb ) {
+                validators[ type ] = cb;
+            },
+    
+            // 移除验证器
+            removeValidator: function( type ) {
+                delete validators[ type ];
+            }
+        };
+    
+        // 在Uploader初始化的时候启动Validators的初始化
+        Uploader.register({
+            init: function() {
+                var me = this;
+                $.each( validators, function() {
+                    this.call( me.owner );
+                });
+            }
+        });
+    
+        /**
+         * @property {int} [fileNumLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证文件总数量, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileNumLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                count = 0,
+                max = opts.fileNumLimit >> 0,
+                flag = true;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+    
+                if ( count >= max && flag ) {
+                    flag = false;
+                    this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
+                    setTimeout(function() {
+                        flag = true;
+                    }, 1 );
+                }
+    
+                return count >= max ? false : true;
+            });
+    
+            uploader.on( 'fileQueued', function() {
+                count++;
+            });
+    
+            uploader.on( 'fileDequeued', function() {
+                count--;
+            });
+    
+            uploader.on( 'uploadFinished', function() {
+                count = 0;
+            });
+        });
+    
+    
+        /**
+         * @property {int} [fileSizeLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证文件总大小是否超出限制, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileSizeLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                count = 0,
+                max = opts.fileSizeLimit >> 0,
+                flag = true;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+                var invalid = count + file.size > max;
+    
+                if ( invalid && flag ) {
+                    flag = false;
+                    this.trigger( 'error', 'Q_EXCEED_SIZE_LIMIT', max, file );
+                    setTimeout(function() {
+                        flag = true;
+                    }, 1 );
+                }
+    
+                return invalid ? false : true;
+            });
+    
+            uploader.on( 'fileQueued', function( file ) {
+                count += file.size;
+            });
+    
+            uploader.on( 'fileDequeued', function( file ) {
+                count -= file.size;
+            });
+    
+            uploader.on( 'uploadFinished', function() {
+                count = 0;
+            });
+        });
+    
+        /**
+         * @property {int} [fileSingleSizeLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证单个文件大小是否超出限制, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileSingleSizeLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                max = opts.fileSingleSizeLimit;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+    
+                if ( file.size > max ) {
+                    file.setStatus( WUFile.Status.INVALID, 'exceed_size' );
+                    this.trigger( 'error', 'F_EXCEED_SIZE', file );
+                    return false;
+                }
+    
+            });
+    
+        });
+    
+        /**
+         * @property {int} [duplicate=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
+         */
+        api.addValidator( 'duplicate', function() {
+            var uploader = this,
+                opts = uploader.options,
+                mapping = {};
+    
+            if ( opts.duplicate ) {
+                return;
+            }
+    
+            function hashString( str ) {
+                var hash = 0,
+                    i = 0,
+                    len = str.length,
+                    _char;
+    
+                for ( ; i < len; i++ ) {
+                    _char = str.charCodeAt( i );
+                    hash = _char + (hash << 6) + (hash << 16) - hash;
+                }
+    
+                return hash;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+                var hash = file.__hash || (file.__hash = hashString( file.name +
+                        file.size + file.lastModifiedDate ));
+    
+                // 已经重复了
+                if ( mapping[ hash ] ) {
+                    this.trigger( 'error', 'F_DUPLICATE', file );
+                    return false;
+                }
+            });
+    
+            uploader.on( 'fileQueued', function( file ) {
+                var hash = file.__hash;
+    
+                hash && (mapping[ hash ] = true);
+            });
+    
+            uploader.on( 'fileDequeued', function( file ) {
+                var hash = file.__hash;
+    
+                hash && (delete mapping[ hash ]);
+            });
+        });
+    
+        return api;
+    });
+    
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/compbase',[],function() {
+    
+        function CompBase( owner, runtime ) {
+    
+            this.owner = owner;
+            this.options = owner.options;
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.getRuid = function() {
+                return runtime.uid;
+            };
+    
+            this.trigger = function() {
+                return owner.trigger.apply( owner, arguments );
+            };
+        }
+    
+        return CompBase;
+    });
+    /**
+     * @fileOverview Html5Runtime
+     */
+    define('runtime/html5/runtime',[
+        'base',
+        'runtime/runtime',
+        'runtime/compbase'
+    ], function( Base, Runtime, CompBase ) {
+    
+        var type = 'html5',
+            components = {};
+    
+        function Html5Runtime() {
+            var pool = {},
+                me = this,
+                destory = this.destory;
+    
+            Runtime.apply( me, arguments );
+            me.type = type;
+    
+    
+            // 这个方法的调用者，实际上是RuntimeClient
+            me.exec = function( comp, fn/*, args...*/) {
+                var client = this,
+                    uid = client.uid,
+                    args = Base.slice( arguments, 2 ),
+                    instance;
+    
+                if ( components[ comp ] ) {
+                    instance = pool[ uid ] = pool[ uid ] ||
+                            new components[ comp ]( client, me );
+    
+                    if ( instance[ fn ] ) {
+                        return instance[ fn ].apply( instance, args );
+                    }
+                }
+            };
+    
+            me.destory = function() {
+                // @todo 删除池子中的所有实例
+                return destory && destory.apply( this, arguments );
+            };
+        }
+    
+        Base.inherits( Runtime, {
+            constructor: Html5Runtime,
+    
+            // 不需要连接其他程序，直接执行callback
+            init: function() {
+                var me = this;
+                setTimeout(function() {
+                    me.trigger('ready');
+                }, 1 );
+            }
+    
+        });
+    
+        // 注册Components
+        Html5Runtime.register = function( name, component ) {
+            var klass = components[ name ] = Base.inherits( CompBase, component );
+            return klass;
+        };
+    
+        // 注册html5运行时。
+        // 只有在支持的前提下注册。
+        if ( window.Blob && window.FileReader && window.DataView ) {
+            Runtime.addRuntime( type, Html5Runtime );
+        }
+    
+        return Html5Runtime;
+    });
+    /**
+     * @fileOverview Blob Html实现
+     */
+    define('runtime/html5/blob',[
+        'runtime/html5/runtime',
+        'lib/blob'
+    ], function( Html5Runtime, Blob ) {
+    
+        return Html5Runtime.register( 'Blob', {
+            slice: function( start, end ) {
+                var blob = this.owner.source,
+                    slice = blob.slice || blob.webkitSlice || blob.mozSlice;
+    
+                blob = slice.call( blob, start, end );
+    
+                return new Blob( this.getRuid(), blob );
+            }
+        });
+    });
+    /**
+     * @fileOverview FilePaste
+     */
+    define('runtime/html5/dnd',[
+        'base',
+        'runtime/html5/runtime',
+        'lib/file'
+    ], function( Base, Html5Runtime, File ) {
+    
+        var $ = Base.$,
+            prefix = 'webuploader-dnd-';
+    
+        return Html5Runtime.register( 'DragAndDrop', {
+            init: function() {
+                var elem = this.elem = this.options.container;
+    
+                this.dragEnterHandler = Base.bindFn( this._dragEnterHandler, this );
+                this.dragOverHandler = Base.bindFn( this._dragOverHandler, this );
+                this.dragLeaveHandler = Base.bindFn( this._dragLeaveHandler, this );
+                this.dropHandler = Base.bindFn( this._dropHandler, this );
+                this.dndOver = false;
+    
+                elem.on( 'dragenter', this.dragEnterHandler );
+                elem.on( 'dragover', this.dragOverHandler );
+                elem.on( 'dragleave', this.dragLeaveHandler );
+                elem.on( 'drop', this.dropHandler );
+    
+                if ( this.options.disableGlobalDnd ) {
+                    $( document ).on( 'dragover', this.dragOverHandler );
+                    $( document ).on( 'drop', this.dropHandler );
+                }
+            },
+    
+            _dragEnterHandler: function( e ) {
+                var me = this,
+                    denied = me._denied || false,
+                    items;
+    
+                e = e.originalEvent || e;
+    
+                if ( !me.dndOver ) {
+                    me.dndOver = true;
+    
+                    // 注意只有 chrome 支持。
+                    items = e.dataTransfer.items;
+    
+                    if ( items && items.length ) {
+                        me._denied = denied = !me.trigger( 'accept', items );
+                    }
+    
+                    me.elem.addClass( prefix + 'over' );
+                    me.elem[ denied ? 'addClass' :
+                            'removeClass' ]( prefix + 'denied' );
+                }
+    
+    
+                e.dataTransfer.dropEffect = denied ? 'none' : 'copy';
+    
+                return false;
+            },
+    
+            _dragOverHandler: function( e ) {
+                // 只处理框内的。
+                var parentElem = this.elem.parent().get( 0 );
+                if ( parentElem && !$.contains( parentElem, e.currentTarget ) ) {
+                    return false;
+                }
+    
+                clearTimeout( this._leaveTimer );
+                this._dragEnterHandler.call( this, e );
+    
+                return false;
+            },
+    
+            _dragLeaveHandler: function() {
+                var me = this,
+                    handler;
+    
+                handler = function() {
+                    me.dndOver = false;
+                    me.elem.removeClass( prefix + 'over ' + prefix + 'denied' );
+                };
+    
+                clearTimeout( me._leaveTimer );
+                me._leaveTimer = setTimeout( handler, 100 );
+                return false;
+            },
+    
+            _dropHandler: function( e ) {
+                var me = this,
+                    ruid = me.getRuid(),
+                    parentElem = me.elem.parent().get( 0 );
+    
+                // 只处理框内的。
+                if ( parentElem && !$.contains( parentElem, e.currentTarget ) ) {
+                    return false;
+                }
+    
+                me._getTansferFiles( e, function( results ) {
+                    me.trigger( 'drop', $.map( results, function( file ) {
+                        return new File( ruid, file );
+                    }) );
+                });
+    
+                me.dndOver = false;
+                me.elem.removeClass( prefix + 'over' );
+                return false;
+            },
+    
+            // 如果传入 callback 则去查看文件夹，否则只管当前文件夹。
+            _getTansferFiles: function( e, callback ) {
+                var results  = [],
+                    promises = [],
+                    items, files, dataTransfer, file, item, i, len, canAccessFolder;
+    
+                e = e.originalEvent || e;
+    
+                dataTransfer = e.dataTransfer;
+                items = dataTransfer.items;
+                files = dataTransfer.files;
+    
+                canAccessFolder = !!(items && items[ 0 ].webkitGetAsEntry);
+    
+                for ( i = 0, len = files.length; i < len; i++ ) {
+                    file = files[ i ];
+                    item = items && items[ i ];
+    
+                    if ( canAccessFolder && item.webkitGetAsEntry().isDirectory ) {
+    
+                        promises.push( this._traverseDirectoryTree(
+                                item.webkitGetAsEntry(), results ) );
+                    } else {
+                        results.push( file );
+                    }
+                }
+    
+                Base.when.apply( Base, promises ).done(function() {
+    
+                    if ( !results.length ) {
+                        return;
+                    }
+    
+                    callback( results );
+                });
+            },
+    
+            _traverseDirectoryTree: function( entry, results ) {
+                var deferred = Base.Deferred(),
+                    me = this;
+    
+                if ( entry.isFile ) {
+                    entry.file(function( file ) {
+                        results.push( file );
+                        deferred.resolve();
+                    });
+                } else if ( entry.isDirectory ) {
+                    entry.createReader().readEntries(function( entries ) {
+                        var len = entries.length,
+                            promises = [],
+                            arr = [],    // 为了保证顺序。
+                            i;
+    
+                        for ( i = 0; i < len; i++ ) {
+                            promises.push( me._traverseDirectoryTree(
+                                    entries[ i ], arr ) );
+                        }
+    
+                        Base.when.apply( Base, promises ).then(function() {
+                            results.push.apply( results, arr );
+                            deferred.resolve();
+                        }, deferred.reject );
+                    });
+                }
+    
+                return deferred.promise();
+            },
+    
+            destroy: function() {
+                var elem = this.elem;
+    
+                elem.off( 'dragenter', this.dragEnterHandler );
+                elem.off( 'dragover', this.dragEnterHandler );
+                elem.off( 'dragleave', this.dragLeaveHandler );
+                elem.off( 'drop', this.dropHandler );
+    
+                if ( this.options.disableGlobalDnd ) {
+                    $( document ).off( 'dragover', this.dragOverHandler );
+                    $( document ).off( 'drop', this.dropHandler );
+                }
+            }
+        });
+    });
+    
+    /**
+     * @fileOverview FilePaste
+     */
+    define('runtime/html5/filepaste',[
+        'base',
+        'runtime/html5/runtime',
+        'lib/file'
+    ], function( Base, Html5Runtime, File ) {
+    
+        return Html5Runtime.register( 'FilePaste', {
+            init: function() {
+                var opts = this.options,
+                    elem = this.elem = opts.container,
+                    accept = '.*',
+                    arr, i, len, item;
+    
+                // accetp的mimeTypes中生成匹配正则。
+                if ( opts.accept ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        item = opts.accept[ i ].mimeTypes;
+                        item && arr.push( item );
+                    }
+    
+                    if ( arr.length ) {
+                        accept = arr.join(',');
+                        accept = accept.replace( /,/g, '|' ).replace( /\*/g, '.*' );
+                    }
+                }
+                this.accept = accept = new RegExp( accept, 'i' );
+                this.hander = Base.bindFn( this._pasteHander, this );
+                elem.on( 'paste', this.hander );
+            },
+    
+            _pasteHander: function( e ) {
+                var allowed = [],
+                    ruid = this.getRuid(),
+                    items, item, blob, i, len;
+    
+                e = e.originalEvent || e;
+                items = e.clipboardData.items;
+    
+                for ( i = 0, len = items.length; i < len; i++ ) {
+                    item = items[ i ];
+    
+                    if ( item.kind !== 'file' || !(blob = item.getAsFile()) ) {
+                        continue;
+                    }
+    
+                    allowed.push( new File( ruid, blob ) );
+                }
+    
+                if ( allowed.length ) {
+                    // 不阻止非文件粘贴（文字粘贴）的事件冒泡
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.trigger( 'paste', allowed );
+                }
+            },
+    
+            destroy: function() {
+                this.elem.off( 'paste', this.hander );
+            }
+        });
+    });
+    
+    /**
+     * @fileOverview FilePicker
+     */
+    define('runtime/html5/filepicker',[
+        'base',
+        'runtime/html5/runtime'
+    ], function( Base, Html5Runtime ) {
+    
+        var $ = Base.$;
+    
+        return Html5Runtime.register( 'FilePicker', {
+            init: function() {
+                var container = this.getRuntime().getContainer(),
+                    me = this,
+                    owner = me.owner,
+                    opts = me.options,
+                    lable = $( document.createElement('label') ),
+                    input = $( document.createElement('input') ),
+                    arr, i, len, mouseHandler;
+    
+                input.attr( 'type', 'file' );
+                input.attr( 'name', opts.name );
+                input.addClass('webuploader-element-invisible');
+    
+                lable.on( 'click', function() {
+                    input.trigger('click');
+                });
+    
+                lable.css({
+                    opacity: 0,
+                    width: '100%',
+                    height: '100%',
+                    display: 'block',
+                    cursor: 'pointer',
+                    background: '#ffffff'
+                });
+    
+                if ( opts.multiple ) {
+                    input.attr( 'multiple', 'multiple' );
+                }
+    
+                // @todo Firefox不支持单独指定后缀
+                if ( opts.accept && opts.accept.length > 0 ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        arr.push( opts.accept[ i ].mimeTypes );
+                    }
+    
+                    input.attr( 'accept', arr.join(',') );
+                }
+    
+                container.append( input );
+                container.append( lable );
+    
+                mouseHandler = function( e ) {
+                    owner.trigger( e.type );
+                };
+    
+                input.on( 'change', function( e ) {
+                    var fn = arguments.callee,
+                        clone;
+    
+                    me.files = e.target.files;
+    
+                    // reset input
+                    clone = this.cloneNode( true );
+                    this.parentNode.replaceChild( clone, this );
+    
+                    input.off();
+                    input = $( clone ).on( 'change', fn )
+                            .on( 'mouseenter mouseleave', mouseHandler );
+    
+                    owner.trigger('change');
+                });
+    
+                lable.on( 'mouseenter mouseleave', mouseHandler );
+    
+            },
+    
+    
+            getFiles: function() {
+                return this.files;
+            },
+    
+            destroy: function() {
+                // todo
+            }
+        });
+    });
+    /**
+     * Terms:
+     *
+     * Uint8Array, FileReader, BlobBuilder, atob, ArrayBuffer
+     * @fileOverview Image控件
+     */
+    define('runtime/html5/util',[
+        'base'
+    ], function( Base ) {
+    
+        var urlAPI = window.createObjectURL && window ||
+                window.URL && URL.revokeObjectURL && URL ||
+                window.webkitURL,
+            createObjectURL = Base.noop,
+            revokeObjectURL = createObjectURL;
+    
+        if ( urlAPI ) {
+    
+            // 更安全的方式调用，比如android里面就能把context改成其他的对象。
+            createObjectURL = function() {
+                return urlAPI.createObjectURL.apply( urlAPI, arguments );
+            };
+    
+            revokeObjectURL = function() {
+                return urlAPI.revokeObjectURL.apply( urlAPI, arguments );
+            };
+        }
+    
+        return {
+            createObjectURL: createObjectURL,
+            revokeObjectURL: revokeObjectURL,
+    
+            dataURL2Blob: function( dataURI ) {
+                var byteStr, intArray, ab, i, mimetype, parts;
+    
+                parts = dataURI.split(',');
+    
+                if ( ~parts[ 0 ].indexOf('base64') ) {
+                    byteStr = atob( parts[ 1 ] );
+                } else {
+                    byteStr = decodeURIComponent( parts[ 1 ] );
+                }
+    
+                ab = new ArrayBuffer( byteStr.length );
+                intArray = new Uint8Array( ab );
+    
+                for ( i = 0; i < byteStr.length; i++ ) {
+                    intArray[ i ] = byteStr.charCodeAt( i );
+                }
+    
+                mimetype = parts[ 0 ].split(':')[ 1 ].split(';')[ 0 ];
+    
+                return this.arrayBufferToBlob( ab, mimetype );
+            },
+    
+            dataURL2ArrayBuffer: function( dataURI ) {
+                var byteStr, intArray, i, parts;
+    
+                parts = dataURI.split(',');
+    
+                if ( ~parts[ 0 ].indexOf('base64') ) {
+                    byteStr = atob( parts[ 1 ] );
+                } else {
+                    byteStr = decodeURIComponent( parts[ 1 ] );
+                }
+    
+                intArray = new Uint8Array( byteStr.length );
+    
+                for ( i = 0; i < byteStr.length; i++ ) {
+                    intArray[ i ] = byteStr.charCodeAt( i );
+                }
+    
+                return intArray.buffer;
+            },
+    
+            arrayBufferToBlob: function( buffer, type ) {
+                var builder = window.BlobBuilder || window.WebKitBlobBuilder,
+                    bb;
+    
+                // android不支持直接new Blob, 只能借助blobbuilder.
+                if ( builder ) {
+                    bb = new builder();
+                    bb.append( buffer );
+                    return bb.getBlob( type );
+                }
+    
+                return new Blob([ buffer ], type ? { type: type } : {} );
+            },
+    
+            // 抽出来主要是为了解决android下面canvas.toDataUrl不支持jpeg.
+            // 你得到的结果是png.
+            canvasToDataUrl: function( canvas, type, quality ) {
+                return canvas.toDataURL( type, quality / 100 );
+            },
+    
+            // imagemeat会复写这个方法，如果用户选择加载那个文件了的话。
+            parseMeta: function( blob, callback ) {
+                callback( false, {});
+            },
+    
+            // imagemeat会复写这个方法，如果用户选择加载那个文件了的话。
+            updateImageHead: function( data ) {
+                return data;
+            }
+        };
+    });
+    /**
+     * Terms:
+     *
+     * Uint8Array, FileReader, BlobBuilder, atob, ArrayBuffer
+     * @fileOverview Image控件
+     */
+    define('runtime/html5/imagemeta',[
+        'runtime/html5/util'
+    ], function( Util ) {
+    
+        var api;
+    
+        api = {
+            parsers: {
+                0xffe1: []
+            },
+    
+            maxMetaDataSize: 262144,
+    
+            parse: function( blob, cb ) {
+                var me = this,
+                    fr = new FileReader();
+    
+                fr.onload = function() {
+                    cb( false, me._parse( this.result ) );
+                    fr = fr.onload = fr.onerror = null;
+                };
+    
+                fr.onerror = function( e ) {
+                    cb( e.message );
+                    fr = fr.onload = fr.onerror = null;
+                };
+    
+                blob = blob.slice( 0, me.maxMetaDataSize );
+                fr.readAsArrayBuffer( blob.getSource() );
+            },
+    
+            _parse: function( buffer, noParse ) {
+                if ( buffer.byteLength < 6 ) {
+                    return;
+                }
+    
+                var dataview = new DataView( buffer ),
+                    offset = 2,
+                    maxOffset = dataview.byteLength - 4,
+                    headLength = offset,
+                    ret = {},
+                    markerBytes, markerLength, parsers, i;
+    
+                if ( dataview.getUint16( 0 ) === 0xffd8 ) {
+    
+                    while ( offset < maxOffset ) {
+                        markerBytes = dataview.getUint16( offset );
+    
+                        if ( markerBytes >= 0xffe0 && markerBytes <= 0xffef ||
+                                markerBytes === 0xfffe ) {
+    
+                            markerLength = dataview.getUint16( offset + 2 ) + 2;
+    
+                            if ( offset + markerLength > dataview.byteLength ) {
+                                break;
+                            }
+    
+                            parsers = api.parsers[ markerBytes ];
+    
+                            if ( !noParse && parsers ) {
+                                for ( i = 0; i < parsers.length; i += 1 ) {
+                                    parsers[ i ].call( api, dataview, offset,
+                                            markerLength, ret );
+                                }
+                            }
+    
+                            offset += markerLength;
+                            headLength = offset;
+                        } else {
+                            break;
+                        }
+                    }
+    
+                    if ( headLength > 6 ) {
+                        if ( buffer.slice ) {
+                            ret.imageHead = buffer.slice( 2, headLength );
+                        } else {
+                            // Workaround for IE10, which does not yet
+                            // support ArrayBuffer.slice:
+                            ret.imageHead = new Uint8Array( buffer )
+                                    .subarray( 2, headLength );
+                        }
+                    }
+                }
+    
+                return ret;
+            },
+    
+            updateImageHead: function( buffer, head ) {
+                var data = this._parse( buffer, true ),
+                    buf1, buf2, bodyoffset;
+    
+    
+                bodyoffset = 2;
+                if ( data.imageHead ) {
+                    bodyoffset = 2 + data.imageHead.byteLength;
+                }
+    
+                if ( buffer.slice ) {
+                    buf2 = buffer.slice( bodyoffset );
+                } else {
+                    buf2 = new Uint8Array( buffer ).subarray( bodyoffset );
+                }
+    
+                buf1 = new Uint8Array( head.byteLength + 2 + buf2.byteLength );
+    
+                buf1[ 0 ] = 0xFF;
+                buf1[ 1 ] = 0xD8;
+                buf1.set( new Uint8Array( head ), 2 );
+                buf1.set( new Uint8Array( buf2 ), head.byteLength + 2 );
+    
+                return buf1.buffer;
+            }
+        };
+    
+        Util.parseMeta = function() {
+            return api.parse.apply( api, arguments );
+        };
+    
+        Util.updateImageHead = function() {
+            return api.updateImageHead.apply( api, arguments );
+        };
+    
+        return api;
+    });
+    /**
+     * 代码来自于：https://github.com/blueimp/JavaScript-Load-Image
+     * 暂时项目中只用了orientation.
+     *
+     * 去除了 Exif Sub IFD Pointer, GPS Info IFD Pointer, Exif Thumbnail.
+     * @fileOverview EXIF解析
+     */
+    
+    // Sample
+    // ====================================
+    // Make : Apple
+    // Model : iPhone 4S
+    // Orientation : 1
+    // XResolution : 72 [72/1]
+    // YResolution : 72 [72/1]
+    // ResolutionUnit : 2
+    // Software : QuickTime 7.7.1
+    // DateTime : 2013:09:01 22:53:55
+    // ExifIFDPointer : 190
+    // ExposureTime : 0.058823529411764705 [1/17]
+    // FNumber : 2.4 [12/5]
+    // ExposureProgram : Normal program
+    // ISOSpeedRatings : 800
+    // ExifVersion : 0220
+    // DateTimeOriginal : 2013:09:01 22:52:51
+    // DateTimeDigitized : 2013:09:01 22:52:51
+    // ComponentsConfiguration : YCbCr
+    // ShutterSpeedValue : 4.058893515764426
+    // ApertureValue : 2.5260688216892597 [4845/1918]
+    // BrightnessValue : -0.3126686601998395
+    // MeteringMode : Pattern
+    // Flash : Flash did not fire, compulsory flash mode
+    // FocalLength : 4.28 [107/25]
+    // SubjectArea : [4 values]
+    // FlashpixVersion : 0100
+    // ColorSpace : 1
+    // PixelXDimension : 2448
+    // PixelYDimension : 3264
+    // SensingMethod : One-chip color area sensor
+    // ExposureMode : 0
+    // WhiteBalance : Auto white balance
+    // FocalLengthIn35mmFilm : 35
+    // SceneCaptureType : Standard
+    define('runtime/html5/imagemeta/exif',[
+        'base',
+        'runtime/html5/imagemeta'
+    ], function( Base, ImageMeta ) {
+    
+        var EXIF = {};
+    
+        EXIF.ExifMap = function() {
+            return this;
+        };
+    
+        EXIF.ExifMap.prototype.map = {
+            'Orientation': 0x0112
+        };
+    
+        EXIF.ExifMap.prototype.get = function( id ) {
+            return this[ id ] || this[ this.map[ id ] ];
+        };
+    
+        EXIF.exifTagTypes = {
+            // byte, 8-bit unsigned int:
+            1: {
+                getValue: function( dataView, dataOffset ) {
+                    return dataView.getUint8( dataOffset );
+                },
+                size: 1
+            },
+    
+            // ascii, 8-bit byte:
+            2: {
+                getValue: function( dataView, dataOffset ) {
+                    return String.fromCharCode( dataView.getUint8( dataOffset ) );
+                },
+                size: 1,
+                ascii: true
+            },
+    
+            // short, 16 bit int:
+            3: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getUint16( dataOffset, littleEndian );
+                },
+                size: 2
+            },
+    
+            // long, 32 bit int:
+            4: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getUint32( dataOffset, littleEndian );
+                },
+                size: 4
+            },
+    
+            // rational = two long values,
+            // first is numerator, second is denominator:
+            5: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getUint32( dataOffset, littleEndian ) /
+                        dataView.getUint32( dataOffset + 4, littleEndian );
+                },
+                size: 8
+            },
+    
+            // slong, 32 bit signed int:
+            9: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getInt32( dataOffset, littleEndian );
+                },
+                size: 4
+            },
+    
+            // srational, two slongs, first is numerator, second is denominator:
+            10: {
+                getValue: function( dataView, dataOffset, littleEndian ) {
+                    return dataView.getInt32( dataOffset, littleEndian ) /
+                        dataView.getInt32( dataOffset + 4, littleEndian );
+                },
+                size: 8
+            }
+        };
+    
+        // undefined, 8-bit byte, value depending on field:
+        EXIF.exifTagTypes[ 7 ] = EXIF.exifTagTypes[ 1 ];
+    
+        EXIF.getExifValue = function( dataView, tiffOffset, offset, type, length,
+                littleEndian ) {
+    
+            var tagType = EXIF.exifTagTypes[ type ],
+                tagSize, dataOffset, values, i, str, c;
+    
+            if ( !tagType ) {
+                Base.log('Invalid Exif data: Invalid tag type.');
+                return;
+            }
+    
+            tagSize = tagType.size * length;
+    
+            // Determine if the value is contained in the dataOffset bytes,
+            // or if the value at the dataOffset is a pointer to the actual data:
+            dataOffset = tagSize > 4 ? tiffOffset + dataView.getUint32( offset + 8,
+                    littleEndian ) : (offset + 8);
+    
+            if ( dataOffset + tagSize > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid data offset.');
+                return;
+            }
+    
+            if ( length === 1 ) {
+                return tagType.getValue( dataView, dataOffset, littleEndian );
+            }
+    
+            values = [];
+    
+            for ( i = 0; i < length; i += 1 ) {
+                values[ i ] = tagType.getValue( dataView,
+                        dataOffset + i * tagType.size, littleEndian );
+            }
+    
+            if ( tagType.ascii ) {
+                str = '';
+    
+                // Concatenate the chars:
+                for ( i = 0; i < values.length; i += 1 ) {
+                    c = values[ i ];
+    
+                    // Ignore the terminating NULL byte(s):
+                    if ( c === '\u0000' ) {
+                        break;
+                    }
+                    str += c;
+                }
+    
+                return str;
+            }
+            return values;
+        };
+    
+        EXIF.parseExifTag = function( dataView, tiffOffset, offset, littleEndian,
+                data ) {
+    
+            var tag = dataView.getUint16( offset, littleEndian );
+            data.exif[ tag ] = EXIF.getExifValue( dataView, tiffOffset, offset,
+                    dataView.getUint16( offset + 2, littleEndian ),    // tag type
+                    dataView.getUint32( offset + 4, littleEndian ),    // tag length
+                    littleEndian );
+        };
+    
+        EXIF.parseExifTags = function( dataView, tiffOffset, dirOffset,
+                littleEndian, data ) {
+    
+            var tagsNumber, dirEndOffset, i;
+    
+            if ( dirOffset + 6 > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid directory offset.');
+                return;
+            }
+    
+            tagsNumber = dataView.getUint16( dirOffset, littleEndian );
+            dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+    
+            if ( dirEndOffset + 4 > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid directory size.');
+                return;
+            }
+    
+            for ( i = 0; i < tagsNumber; i += 1 ) {
+                this.parseExifTag( dataView, tiffOffset,
+                        dirOffset + 2 + 12 * i,    // tag offset
+                        littleEndian, data );
+            }
+    
+            // Return the offset to the next directory:
+            return dataView.getUint32( dirEndOffset, littleEndian );
+        };
+    
+        // EXIF.getExifThumbnail = function(dataView, offset, length) {
+        //     var hexData,
+        //         i,
+        //         b;
+        //     if (!length || offset + length > dataView.byteLength) {
+        //         Base.log('Invalid Exif data: Invalid thumbnail data.');
+        //         return;
+        //     }
+        //     hexData = [];
+        //     for (i = 0; i < length; i += 1) {
+        //         b = dataView.getUint8(offset + i);
+        //         hexData.push((b < 16 ? '0' : '') + b.toString(16));
+        //     }
+        //     return 'data:image/jpeg,%' + hexData.join('%');
+        // };
+    
+        EXIF.parseExifData = function( dataView, offset, length, data ) {
+    
+            var tiffOffset = offset + 10,
+                littleEndian, dirOffset;
+    
+            // Check for the ASCII code for "Exif" (0x45786966):
+            if ( dataView.getUint32( offset + 4 ) !== 0x45786966 ) {
+                // No Exif data, might be XMP data instead
+                return;
+            }
+            if ( tiffOffset + 8 > dataView.byteLength ) {
+                Base.log('Invalid Exif data: Invalid segment size.');
+                return;
+            }
+    
+            // Check for the two null bytes:
+            if ( dataView.getUint16( offset + 8 ) !== 0x0000 ) {
+                Base.log('Invalid Exif data: Missing byte alignment offset.');
+                return;
+            }
+    
+            // Check the byte alignment:
+            switch ( dataView.getUint16( tiffOffset ) ) {
+                case 0x4949:
+                    littleEndian = true;
+                    break;
+    
+                case 0x4D4D:
+                    littleEndian = false;
+                    break;
+    
+                default:
+                    Base.log('Invalid Exif data: Invalid byte alignment marker.');
+                    return;
+            }
+    
+            // Check for the TIFF tag marker (0x002A):
+            if ( dataView.getUint16( tiffOffset + 2, littleEndian ) !== 0x002A ) {
+                Base.log('Invalid Exif data: Missing TIFF marker.');
+                return;
+            }
+    
+            // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+            dirOffset = dataView.getUint32( tiffOffset + 4, littleEndian );
+            // Create the exif object to store the tags:
+            data.exif = new EXIF.ExifMap();
+            // Parse the tags of the main image directory and retrieve the
+            // offset to the next directory, usually the thumbnail directory:
+            dirOffset = EXIF.parseExifTags( dataView, tiffOffset,
+                    tiffOffset + dirOffset, littleEndian, data );
+    
+            // 尝试读取缩略图
+            // if ( dirOffset ) {
+            //     thumbnailData = {exif: {}};
+            //     dirOffset = EXIF.parseExifTags(
+            //         dataView,
+            //         tiffOffset,
+            //         tiffOffset + dirOffset,
+            //         littleEndian,
+            //         thumbnailData
+            //     );
+    
+            //     // Check for JPEG Thumbnail offset:
+            //     if (thumbnailData.exif[0x0201]) {
+            //         data.exif.Thumbnail = EXIF.getExifThumbnail(
+            //             dataView,
+            //             tiffOffset + thumbnailData.exif[0x0201],
+            //             thumbnailData.exif[0x0202] // Thumbnail data length
+            //         );
+            //     }
+            // }
+        };
+    
+        ImageMeta.parsers[ 0xffe1 ].push( EXIF.parseExifData );
+        return EXIF;
+    });
+    /**
+     * 这个方式性能不行，但是可以解决android里面的toDataUrl的bug
+     * android里面toDataUrl('image/jpege')得到的结果却是png.
+     *
+     * 所以这里没辙，只能借助这个工具
+     * @fileOverview jpeg encoder
+     */
+    define('runtime/html5/jpegencoder',[], function( require, exports, module ) {
+    
+        /*
+          Copyright (c) 2008, Adobe Systems Incorporated
+          All rights reserved.
+    
+          Redistribution and use in source and binary forms, with or without
+          modification, are permitted provided that the following conditions are
+          met:
+    
+          * Redistributions of source code must retain the above copyright notice,
+            this list of conditions and the following disclaimer.
+    
+          * Redistributions in binary form must reproduce the above copyright
+            notice, this list of conditions and the following disclaimer in the
+            documentation and/or other materials provided with the distribution.
+    
+          * Neither the name of Adobe Systems Incorporated nor the names of its
+            contributors may be used to endorse or promote products derived from
+            this software without specific prior written permission.
+    
+          THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+          IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+          THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+          PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+          CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+          EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+          PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+          PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+          LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+          NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+          SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+        */
+        /*
+        JPEG encoder ported to JavaScript and optimized by Andreas Ritter, www.bytestrom.eu, 11/2009
+    
+        Basic GUI blocking jpeg encoder
+        */
+    
+        function JPEGEncoder(quality) {
+          var self = this;
+            var fround = Math.round;
+            var ffloor = Math.floor;
+            var YTable = new Array(64);
+            var UVTable = new Array(64);
+            var fdtbl_Y = new Array(64);
+            var fdtbl_UV = new Array(64);
+            var YDC_HT;
+            var UVDC_HT;
+            var YAC_HT;
+            var UVAC_HT;
+    
+            var bitcode = new Array(65535);
+            var category = new Array(65535);
+            var outputfDCTQuant = new Array(64);
+            var DU = new Array(64);
+            var byteout = [];
+            var bytenew = 0;
+            var bytepos = 7;
+    
+            var YDU = new Array(64);
+            var UDU = new Array(64);
+            var VDU = new Array(64);
+            var clt = new Array(256);
+            var RGB_YUV_TABLE = new Array(2048);
+            var currentQuality;
+    
+            var ZigZag = [
+                     0, 1, 5, 6,14,15,27,28,
+                     2, 4, 7,13,16,26,29,42,
+                     3, 8,12,17,25,30,41,43,
+                     9,11,18,24,31,40,44,53,
+                    10,19,23,32,39,45,52,54,
+                    20,22,33,38,46,51,55,60,
+                    21,34,37,47,50,56,59,61,
+                    35,36,48,49,57,58,62,63
+                ];
+    
+            var std_dc_luminance_nrcodes = [0,0,1,5,1,1,1,1,1,1,0,0,0,0,0,0,0];
+            var std_dc_luminance_values = [0,1,2,3,4,5,6,7,8,9,10,11];
+            var std_ac_luminance_nrcodes = [0,0,2,1,3,3,2,4,3,5,5,4,4,0,0,1,0x7d];
+            var std_ac_luminance_values = [
+                    0x01,0x02,0x03,0x00,0x04,0x11,0x05,0x12,
+                    0x21,0x31,0x41,0x06,0x13,0x51,0x61,0x07,
+                    0x22,0x71,0x14,0x32,0x81,0x91,0xa1,0x08,
+                    0x23,0x42,0xb1,0xc1,0x15,0x52,0xd1,0xf0,
+                    0x24,0x33,0x62,0x72,0x82,0x09,0x0a,0x16,
+                    0x17,0x18,0x19,0x1a,0x25,0x26,0x27,0x28,
+                    0x29,0x2a,0x34,0x35,0x36,0x37,0x38,0x39,
+                    0x3a,0x43,0x44,0x45,0x46,0x47,0x48,0x49,
+                    0x4a,0x53,0x54,0x55,0x56,0x57,0x58,0x59,
+                    0x5a,0x63,0x64,0x65,0x66,0x67,0x68,0x69,
+                    0x6a,0x73,0x74,0x75,0x76,0x77,0x78,0x79,
+                    0x7a,0x83,0x84,0x85,0x86,0x87,0x88,0x89,
+                    0x8a,0x92,0x93,0x94,0x95,0x96,0x97,0x98,
+                    0x99,0x9a,0xa2,0xa3,0xa4,0xa5,0xa6,0xa7,
+                    0xa8,0xa9,0xaa,0xb2,0xb3,0xb4,0xb5,0xb6,
+                    0xb7,0xb8,0xb9,0xba,0xc2,0xc3,0xc4,0xc5,
+                    0xc6,0xc7,0xc8,0xc9,0xca,0xd2,0xd3,0xd4,
+                    0xd5,0xd6,0xd7,0xd8,0xd9,0xda,0xe1,0xe2,
+                    0xe3,0xe4,0xe5,0xe6,0xe7,0xe8,0xe9,0xea,
+                    0xf1,0xf2,0xf3,0xf4,0xf5,0xf6,0xf7,0xf8,
+                    0xf9,0xfa
+                ];
+    
+            var std_dc_chrominance_nrcodes = [0,0,3,1,1,1,1,1,1,1,1,1,0,0,0,0,0];
+            var std_dc_chrominance_values = [0,1,2,3,4,5,6,7,8,9,10,11];
+            var std_ac_chrominance_nrcodes = [0,0,2,1,2,4,4,3,4,7,5,4,4,0,1,2,0x77];
+            var std_ac_chrominance_values = [
+                    0x00,0x01,0x02,0x03,0x11,0x04,0x05,0x21,
+                    0x31,0x06,0x12,0x41,0x51,0x07,0x61,0x71,
+                    0x13,0x22,0x32,0x81,0x08,0x14,0x42,0x91,
+                    0xa1,0xb1,0xc1,0x09,0x23,0x33,0x52,0xf0,
+                    0x15,0x62,0x72,0xd1,0x0a,0x16,0x24,0x34,
+                    0xe1,0x25,0xf1,0x17,0x18,0x19,0x1a,0x26,
+                    0x27,0x28,0x29,0x2a,0x35,0x36,0x37,0x38,
+                    0x39,0x3a,0x43,0x44,0x45,0x46,0x47,0x48,
+                    0x49,0x4a,0x53,0x54,0x55,0x56,0x57,0x58,
+                    0x59,0x5a,0x63,0x64,0x65,0x66,0x67,0x68,
+                    0x69,0x6a,0x73,0x74,0x75,0x76,0x77,0x78,
+                    0x79,0x7a,0x82,0x83,0x84,0x85,0x86,0x87,
+                    0x88,0x89,0x8a,0x92,0x93,0x94,0x95,0x96,
+                    0x97,0x98,0x99,0x9a,0xa2,0xa3,0xa4,0xa5,
+                    0xa6,0xa7,0xa8,0xa9,0xaa,0xb2,0xb3,0xb4,
+                    0xb5,0xb6,0xb7,0xb8,0xb9,0xba,0xc2,0xc3,
+                    0xc4,0xc5,0xc6,0xc7,0xc8,0xc9,0xca,0xd2,
+                    0xd3,0xd4,0xd5,0xd6,0xd7,0xd8,0xd9,0xda,
+                    0xe2,0xe3,0xe4,0xe5,0xe6,0xe7,0xe8,0xe9,
+                    0xea,0xf2,0xf3,0xf4,0xf5,0xf6,0xf7,0xf8,
+                    0xf9,0xfa
+                ];
+    
+            function initQuantTables(sf){
+                    var YQT = [
+                        16, 11, 10, 16, 24, 40, 51, 61,
+                        12, 12, 14, 19, 26, 58, 60, 55,
+                        14, 13, 16, 24, 40, 57, 69, 56,
+                        14, 17, 22, 29, 51, 87, 80, 62,
+                        18, 22, 37, 56, 68,109,103, 77,
+                        24, 35, 55, 64, 81,104,113, 92,
+                        49, 64, 78, 87,103,121,120,101,
+                        72, 92, 95, 98,112,100,103, 99
+                    ];
+    
+                    for (var i = 0; i < 64; i++) {
+                        var t = ffloor((YQT[i]*sf+50)/100);
+                        if (t < 1) {
+                            t = 1;
+                        } else if (t > 255) {
+                            t = 255;
+                        }
+                        YTable[ZigZag[i]] = t;
+                    }
+                    var UVQT = [
+                        17, 18, 24, 47, 99, 99, 99, 99,
+                        18, 21, 26, 66, 99, 99, 99, 99,
+                        24, 26, 56, 99, 99, 99, 99, 99,
+                        47, 66, 99, 99, 99, 99, 99, 99,
+                        99, 99, 99, 99, 99, 99, 99, 99,
+                        99, 99, 99, 99, 99, 99, 99, 99,
+                        99, 99, 99, 99, 99, 99, 99, 99,
+                        99, 99, 99, 99, 99, 99, 99, 99
+                    ];
+                    for (var j = 0; j < 64; j++) {
+                        var u = ffloor((UVQT[j]*sf+50)/100);
+                        if (u < 1) {
+                            u = 1;
+                        } else if (u > 255) {
+                            u = 255;
+                        }
+                        UVTable[ZigZag[j]] = u;
+                    }
+                    var aasf = [
+                        1.0, 1.387039845, 1.306562965, 1.175875602,
+                        1.0, 0.785694958, 0.541196100, 0.275899379
+                    ];
+                    var k = 0;
+                    for (var row = 0; row < 8; row++)
+                    {
+                        for (var col = 0; col < 8; col++)
+                        {
+                            fdtbl_Y[k]  = (1.0 / (YTable [ZigZag[k]] * aasf[row] * aasf[col] * 8.0));
+                            fdtbl_UV[k] = (1.0 / (UVTable[ZigZag[k]] * aasf[row] * aasf[col] * 8.0));
+                            k++;
+                        }
+                    }
+                }
+    
+                function computeHuffmanTbl(nrcodes, std_table){
+                    var codevalue = 0;
+                    var pos_in_table = 0;
+                    var HT = new Array();
+                    for (var k = 1; k <= 16; k++) {
+                        for (var j = 1; j <= nrcodes[k]; j++) {
+                            HT[std_table[pos_in_table]] = [];
+                            HT[std_table[pos_in_table]][0] = codevalue;
+                            HT[std_table[pos_in_table]][1] = k;
+                            pos_in_table++;
+                            codevalue++;
+                        }
+                        codevalue*=2;
+                    }
+                    return HT;
+                }
+    
+                function initHuffmanTbl()
+                {
+                    YDC_HT = computeHuffmanTbl(std_dc_luminance_nrcodes,std_dc_luminance_values);
+                    UVDC_HT = computeHuffmanTbl(std_dc_chrominance_nrcodes,std_dc_chrominance_values);
+                    YAC_HT = computeHuffmanTbl(std_ac_luminance_nrcodes,std_ac_luminance_values);
+                    UVAC_HT = computeHuffmanTbl(std_ac_chrominance_nrcodes,std_ac_chrominance_values);
+                }
+    
+                function initCategoryNumber()
+                {
+                    var nrlower = 1;
+                    var nrupper = 2;
+                    for (var cat = 1; cat <= 15; cat++) {
+                        //Positive numbers
+                        for (var nr = nrlower; nr<nrupper; nr++) {
+                            category[32767+nr] = cat;
+                            bitcode[32767+nr] = [];
+                            bitcode[32767+nr][1] = cat;
+                            bitcode[32767+nr][0] = nr;
+                        }
+                        //Negative numbers
+                        for (var nrneg =-(nrupper-1); nrneg<=-nrlower; nrneg++) {
+                            category[32767+nrneg] = cat;
+                            bitcode[32767+nrneg] = [];
+                            bitcode[32767+nrneg][1] = cat;
+                            bitcode[32767+nrneg][0] = nrupper-1+nrneg;
+                        }
+                        nrlower <<= 1;
+                        nrupper <<= 1;
+                    }
+                }
+    
+                function initRGBYUVTable() {
+                    for(var i = 0; i < 256;i++) {
+                        RGB_YUV_TABLE[i]            =  19595 * i;
+                        RGB_YUV_TABLE[(i+ 256)>>0]  =  38470 * i;
+                        RGB_YUV_TABLE[(i+ 512)>>0]  =   7471 * i + 0x8000;
+                        RGB_YUV_TABLE[(i+ 768)>>0]  = -11059 * i;
+                        RGB_YUV_TABLE[(i+1024)>>0]  = -21709 * i;
+                        RGB_YUV_TABLE[(i+1280)>>0]  =  32768 * i + 0x807FFF;
+                        RGB_YUV_TABLE[(i+1536)>>0]  = -27439 * i;
+                        RGB_YUV_TABLE[(i+1792)>>0]  = - 5329 * i;
+                    }
+                }
+    
+                // IO functions
+                function writeBits(bs)
+                {
+                    var value = bs[0];
+                    var posval = bs[1]-1;
+                    while ( posval >= 0 ) {
+                        if (value & (1 << posval) ) {
+                            bytenew |= (1 << bytepos);
+                        }
+                        posval--;
+                        bytepos--;
+                        if (bytepos < 0) {
+                            if (bytenew == 0xFF) {
+                                writeByte(0xFF);
+                                writeByte(0);
+                            }
+                            else {
+                                writeByte(bytenew);
+                            }
+                            bytepos=7;
+                            bytenew=0;
+                        }
+                    }
+                }
+    
+                function writeByte(value)
+                {
+                    byteout.push(clt[value]); // write char directly instead of converting later
+                }
+    
+                function writeWord(value)
+                {
+                    writeByte((value>>8)&0xFF);
+                    writeByte((value   )&0xFF);
+                }
+    
+                // DCT & quantization core
+                function fDCTQuant(data, fdtbl)
+                {
+                    var d0, d1, d2, d3, d4, d5, d6, d7;
+                    /* Pass 1: process rows. */
+                    var dataOff=0;
+                    var i;
+                    var I8 = 8;
+                    var I64 = 64;
+                    for (i=0; i<I8; ++i)
+                    {
+                        d0 = data[dataOff];
+                        d1 = data[dataOff+1];
+                        d2 = data[dataOff+2];
+                        d3 = data[dataOff+3];
+                        d4 = data[dataOff+4];
+                        d5 = data[dataOff+5];
+                        d6 = data[dataOff+6];
+                        d7 = data[dataOff+7];
+    
+                        var tmp0 = d0 + d7;
+                        var tmp7 = d0 - d7;
+                        var tmp1 = d1 + d6;
+                        var tmp6 = d1 - d6;
+                        var tmp2 = d2 + d5;
+                        var tmp5 = d2 - d5;
+                        var tmp3 = d3 + d4;
+                        var tmp4 = d3 - d4;
+    
+                        /* Even part */
+                        var tmp10 = tmp0 + tmp3;    /* phase 2 */
+                        var tmp13 = tmp0 - tmp3;
+                        var tmp11 = tmp1 + tmp2;
+                        var tmp12 = tmp1 - tmp2;
+    
+                        data[dataOff] = tmp10 + tmp11; /* phase 3 */
+                        data[dataOff+4] = tmp10 - tmp11;
+    
+                        var z1 = (tmp12 + tmp13) * 0.707106781; /* c4 */
+                        data[dataOff+2] = tmp13 + z1; /* phase 5 */
+                        data[dataOff+6] = tmp13 - z1;
+    
+                        /* Odd part */
+                        tmp10 = tmp4 + tmp5; /* phase 2 */
+                        tmp11 = tmp5 + tmp6;
+                        tmp12 = tmp6 + tmp7;
+    
+                        /* The rotator is modified from fig 4-8 to avoid extra negations. */
+                        var z5 = (tmp10 - tmp12) * 0.382683433; /* c6 */
+                        var z2 = 0.541196100 * tmp10 + z5; /* c2-c6 */
+                        var z4 = 1.306562965 * tmp12 + z5; /* c2+c6 */
+                        var z3 = tmp11 * 0.707106781; /* c4 */
+    
+                        var z11 = tmp7 + z3;    /* phase 5 */
+                        var z13 = tmp7 - z3;
+    
+                        data[dataOff+5] = z13 + z2; /* phase 6 */
+                        data[dataOff+3] = z13 - z2;
+                        data[dataOff+1] = z11 + z4;
+                        data[dataOff+7] = z11 - z4;
+    
+                        dataOff += 8; /* advance pointer to next row */
+                    }
+    
+                    /* Pass 2: process columns. */
+                    dataOff = 0;
+                    for (i=0; i<I8; ++i)
+                    {
+                        d0 = data[dataOff];
+                        d1 = data[dataOff + 8];
+                        d2 = data[dataOff + 16];
+                        d3 = data[dataOff + 24];
+                        d4 = data[dataOff + 32];
+                        d5 = data[dataOff + 40];
+                        d6 = data[dataOff + 48];
+                        d7 = data[dataOff + 56];
+    
+                        var tmp0p2 = d0 + d7;
+                        var tmp7p2 = d0 - d7;
+                        var tmp1p2 = d1 + d6;
+                        var tmp6p2 = d1 - d6;
+                        var tmp2p2 = d2 + d5;
+                        var tmp5p2 = d2 - d5;
+                        var tmp3p2 = d3 + d4;
+                        var tmp4p2 = d3 - d4;
+    
+                        /* Even part */
+                        var tmp10p2 = tmp0p2 + tmp3p2;  /* phase 2 */
+                        var tmp13p2 = tmp0p2 - tmp3p2;
+                        var tmp11p2 = tmp1p2 + tmp2p2;
+                        var tmp12p2 = tmp1p2 - tmp2p2;
+    
+                        data[dataOff] = tmp10p2 + tmp11p2; /* phase 3 */
+                        data[dataOff+32] = tmp10p2 - tmp11p2;
+    
+                        var z1p2 = (tmp12p2 + tmp13p2) * 0.707106781; /* c4 */
+                        data[dataOff+16] = tmp13p2 + z1p2; /* phase 5 */
+                        data[dataOff+48] = tmp13p2 - z1p2;
+    
+                        /* Odd part */
+                        tmp10p2 = tmp4p2 + tmp5p2; /* phase 2 */
+                        tmp11p2 = tmp5p2 + tmp6p2;
+                        tmp12p2 = tmp6p2 + tmp7p2;
+    
+                        /* The rotator is modified from fig 4-8 to avoid extra negations. */
+                        var z5p2 = (tmp10p2 - tmp12p2) * 0.382683433; /* c6 */
+                        var z2p2 = 0.541196100 * tmp10p2 + z5p2; /* c2-c6 */
+                        var z4p2 = 1.306562965 * tmp12p2 + z5p2; /* c2+c6 */
+                        var z3p2 = tmp11p2 * 0.707106781; /* c4 */
+    
+                        var z11p2 = tmp7p2 + z3p2;  /* phase 5 */
+                        var z13p2 = tmp7p2 - z3p2;
+    
+                        data[dataOff+40] = z13p2 + z2p2; /* phase 6 */
+                        data[dataOff+24] = z13p2 - z2p2;
+                        data[dataOff+ 8] = z11p2 + z4p2;
+                        data[dataOff+56] = z11p2 - z4p2;
+    
+                        dataOff++; /* advance pointer to next column */
+                    }
+    
+                    // Quantize/descale the coefficients
+                    var fDCTQuant;
+                    for (i=0; i<I64; ++i)
+                    {
+                        // Apply the quantization and scaling factor & Round to nearest integer
+                        fDCTQuant = data[i]*fdtbl[i];
+                        outputfDCTQuant[i] = (fDCTQuant > 0.0) ? ((fDCTQuant + 0.5)|0) : ((fDCTQuant - 0.5)|0);
+                        //outputfDCTQuant[i] = fround(fDCTQuant);
+    
+                    }
+                    return outputfDCTQuant;
+                }
+    
+                function writeAPP0()
+                {
+                    writeWord(0xFFE0); // marker
+                    writeWord(16); // length
+                    writeByte(0x4A); // J
+                    writeByte(0x46); // F
+                    writeByte(0x49); // I
+                    writeByte(0x46); // F
+                    writeByte(0); // = "JFIF",'\0'
+                    writeByte(1); // versionhi
+                    writeByte(1); // versionlo
+                    writeByte(0); // xyunits
+                    writeWord(1); // xdensity
+                    writeWord(1); // ydensity
+                    writeByte(0); // thumbnwidth
+                    writeByte(0); // thumbnheight
+                }
+    
+                function writeSOF0(width, height)
+                {
+                    writeWord(0xFFC0); // marker
+                    writeWord(17);   // length, truecolor YUV JPG
+                    writeByte(8);    // precision
+                    writeWord(height);
+                    writeWord(width);
+                    writeByte(3);    // nrofcomponents
+                    writeByte(1);    // IdY
+                    writeByte(0x11); // HVY
+                    writeByte(0);    // QTY
+                    writeByte(2);    // IdU
+                    writeByte(0x11); // HVU
+                    writeByte(1);    // QTU
+                    writeByte(3);    // IdV
+                    writeByte(0x11); // HVV
+                    writeByte(1);    // QTV
+                }
+    
+                function writeDQT()
+                {
+                    writeWord(0xFFDB); // marker
+                    writeWord(132);    // length
+                    writeByte(0);
+                    for (var i=0; i<64; i++) {
+                        writeByte(YTable[i]);
+                    }
+                    writeByte(1);
+                    for (var j=0; j<64; j++) {
+                        writeByte(UVTable[j]);
+                    }
+                }
+    
+                function writeDHT()
+                {
+                    writeWord(0xFFC4); // marker
+                    writeWord(0x01A2); // length
+    
+                    writeByte(0); // HTYDCinfo
+                    for (var i=0; i<16; i++) {
+                        writeByte(std_dc_luminance_nrcodes[i+1]);
+                    }
+                    for (var j=0; j<=11; j++) {
+                        writeByte(std_dc_luminance_values[j]);
+                    }
+    
+                    writeByte(0x10); // HTYACinfo
+                    for (var k=0; k<16; k++) {
+                        writeByte(std_ac_luminance_nrcodes[k+1]);
+                    }
+                    for (var l=0; l<=161; l++) {
+                        writeByte(std_ac_luminance_values[l]);
+                    }
+    
+                    writeByte(1); // HTUDCinfo
+                    for (var m=0; m<16; m++) {
+                        writeByte(std_dc_chrominance_nrcodes[m+1]);
+                    }
+                    for (var n=0; n<=11; n++) {
+                        writeByte(std_dc_chrominance_values[n]);
+                    }
+    
+                    writeByte(0x11); // HTUACinfo
+                    for (var o=0; o<16; o++) {
+                        writeByte(std_ac_chrominance_nrcodes[o+1]);
+                    }
+                    for (var p=0; p<=161; p++) {
+                        writeByte(std_ac_chrominance_values[p]);
+                    }
+                }
+    
+                function writeSOS()
+                {
+                    writeWord(0xFFDA); // marker
+                    writeWord(12); // length
+                    writeByte(3); // nrofcomponents
+                    writeByte(1); // IdY
+                    writeByte(0); // HTY
+                    writeByte(2); // IdU
+                    writeByte(0x11); // HTU
+                    writeByte(3); // IdV
+                    writeByte(0x11); // HTV
+                    writeByte(0); // Ss
+                    writeByte(0x3f); // Se
+                    writeByte(0); // Bf
+                }
+    
+                function processDU(CDU, fdtbl, DC, HTDC, HTAC){
+                    var EOB = HTAC[0x00];
+                    var M16zeroes = HTAC[0xF0];
+                    var pos;
+                    var I16 = 16;
+                    var I63 = 63;
+                    var I64 = 64;
+                    var DU_DCT = fDCTQuant(CDU, fdtbl);
+                    //ZigZag reorder
+                    for (var j=0;j<I64;++j) {
+                        DU[ZigZag[j]]=DU_DCT[j];
+                    }
+                    var Diff = DU[0] - DC; DC = DU[0];
+                    //Encode DC
+                    if (Diff==0) {
+                        writeBits(HTDC[0]); // Diff might be 0
+                    } else {
+                        pos = 32767+Diff;
+                        writeBits(HTDC[category[pos]]);
+                        writeBits(bitcode[pos]);
+                    }
+                    //Encode ACs
+                    var end0pos = 63; // was const... which is crazy
+                    for (; (end0pos>0)&&(DU[end0pos]==0); end0pos--) {};
+                    //end0pos = first element in reverse order !=0
+                    if ( end0pos == 0) {
+                        writeBits(EOB);
+                        return DC;
+                    }
+                    var i = 1;
+                    var lng;
+                    while ( i <= end0pos ) {
+                        var startpos = i;
+                        for (; (DU[i]==0) && (i<=end0pos); ++i) {}
+                        var nrzeroes = i-startpos;
+                        if ( nrzeroes >= I16 ) {
+                            lng = nrzeroes>>4;
+                            for (var nrmarker=1; nrmarker <= lng; ++nrmarker)
+                                writeBits(M16zeroes);
+                            nrzeroes = nrzeroes&0xF;
+                        }
+                        pos = 32767+DU[i];
+                        writeBits(HTAC[(nrzeroes<<4)+category[pos]]);
+                        writeBits(bitcode[pos]);
+                        i++;
+                    }
+                    if ( end0pos != I63 ) {
+                        writeBits(EOB);
+                    }
+                    return DC;
+                }
+    
+                function initCharLookupTable(){
+                    var sfcc = String.fromCharCode;
+                    for(var i=0; i < 256; i++){ ///// ACHTUNG // 255
+                        clt[i] = sfcc(i);
+                    }
+                }
+    
+                this.encode = function(image,quality) // image data object
+                {
+                    // var time_start = new Date().getTime();
+    
+                    if(quality) setQuality(quality);
+    
+                    // Initialize bit writer
+                    byteout = new Array();
+                    bytenew=0;
+                    bytepos=7;
+    
+                    // Add JPEG headers
+                    writeWord(0xFFD8); // SOI
+                    writeAPP0();
+                    writeDQT();
+                    writeSOF0(image.width,image.height);
+                    writeDHT();
+                    writeSOS();
+    
+    
+                    // Encode 8x8 macroblocks
+                    var DCY=0;
+                    var DCU=0;
+                    var DCV=0;
+    
+                    bytenew=0;
+                    bytepos=7;
+    
+    
+                    this.encode.displayName = "_encode_";
+    
+                    var imageData = image.data;
+                    var width = image.width;
+                    var height = image.height;
+    
+                    var quadWidth = width*4;
+                    var tripleWidth = width*3;
+    
+                    var x, y = 0;
+                    var r, g, b;
+                    var start,p, col,row,pos;
+                    while(y < height){
+                        x = 0;
+                        while(x < quadWidth){
+                        start = quadWidth * y + x;
+                        p = start;
+                        col = -1;
+                        row = 0;
+    
+                        for(pos=0; pos < 64; pos++){
+                            row = pos >> 3;// /8
+                            col = ( pos & 7 ) * 4; // %8
+                            p = start + ( row * quadWidth ) + col;
+    
+                            if(y+row >= height){ // padding bottom
+                                p-= (quadWidth*(y+1+row-height));
+                            }
+    
+                            if(x+col >= quadWidth){ // padding right
+                                p-= ((x+col) - quadWidth +4)
+                            }
+    
+                            r = imageData[ p++ ];
+                            g = imageData[ p++ ];
+                            b = imageData[ p++ ];
+    
+    
+                            /* // calculate YUV values dynamically
+                            YDU[pos]=((( 0.29900)*r+( 0.58700)*g+( 0.11400)*b))-128; //-0x80
+                            UDU[pos]=(((-0.16874)*r+(-0.33126)*g+( 0.50000)*b));
+                            VDU[pos]=((( 0.50000)*r+(-0.41869)*g+(-0.08131)*b));
+                            */
+    
+                            // use lookup table (slightly faster)
+                            YDU[pos] = ((RGB_YUV_TABLE[r]             + RGB_YUV_TABLE[(g +  256)>>0] + RGB_YUV_TABLE[(b +  512)>>0]) >> 16)-128;
+                            UDU[pos] = ((RGB_YUV_TABLE[(r +  768)>>0] + RGB_YUV_TABLE[(g + 1024)>>0] + RGB_YUV_TABLE[(b + 1280)>>0]) >> 16)-128;
+                            VDU[pos] = ((RGB_YUV_TABLE[(r + 1280)>>0] + RGB_YUV_TABLE[(g + 1536)>>0] + RGB_YUV_TABLE[(b + 1792)>>0]) >> 16)-128;
+    
+                        }
+    
+                        DCY = processDU(YDU, fdtbl_Y, DCY, YDC_HT, YAC_HT);
+                        DCU = processDU(UDU, fdtbl_UV, DCU, UVDC_HT, UVAC_HT);
+                        DCV = processDU(VDU, fdtbl_UV, DCV, UVDC_HT, UVAC_HT);
+                        x+=32;
+                        }
+                        y+=8;
+                    }
+    
+    
+                    ////////////////////////////////////////////////////////////////
+    
+                    // Do the bit alignment of the EOI marker
+                    if ( bytepos >= 0 ) {
+                        var fillbits = [];
+                        fillbits[1] = bytepos+1;
+                        fillbits[0] = (1<<(bytepos+1))-1;
+                        writeBits(fillbits);
+                    }
+    
+                    writeWord(0xFFD9); //EOI
+    
+                    var jpegDataUri = 'data:image/jpeg;base64,' + btoa(byteout.join(''));
+    
+                    byteout = [];
+    
+                    // benchmarking
+                    // var duration = new Date().getTime() - time_start;
+                    // console.log('Encoding time: '+ currentQuality + 'ms');
+                    //
+    
+                    return jpegDataUri
+            }
+    
+            function setQuality(quality){
+                if (quality <= 0) {
+                    quality = 1;
+                }
+                if (quality > 100) {
+                    quality = 100;
+                }
+    
+                if(currentQuality == quality) return // don't recalc if unchanged
+    
+                var sf = 0;
+                if (quality < 50) {
+                    sf = Math.floor(5000 / quality);
+                } else {
+                    sf = Math.floor(200 - quality*2);
+                }
+    
+                initQuantTables(sf);
+                currentQuality = quality;
+                // console.log('Quality set to: '+quality +'%');
+            }
+    
+            function init(){
+                // var time_start = new Date().getTime();
+                if(!quality) quality = 50;
+                // Create tables
+                initCharLookupTable()
+                initHuffmanTbl();
+                initCategoryNumber();
+                initRGBYUVTable();
+    
+                setQuality(quality);
+                // var duration = new Date().getTime() - time_start;
+                // console.log('Initialization '+ duration + 'ms');
+            }
+    
+            init();
+    
+        };
+    
+        JPEGEncoder.encode = function( data, quality ) {
+            var encoder = new JPEGEncoder( quality );
+    
+            return encoder.encode( data );
+        }
+    
+        return JPEGEncoder;
+    });
+    /**
+     * @fileOverview Fix android canvas.toDataUrl bug.
+     */
+    define('runtime/html5/androidpatch',[
+        'runtime/html5/util',
+        'runtime/html5/jpegencoder',
+        'base'
+    ], function( Util, encoder, Base ) {
+        var origin = Util.canvasToDataUrl,
+            supportJpeg;
+    
+        Util.canvasToDataUrl = function( canvas, type, quality ) {
+            var ctx, w, h, fragement, parts;
+    
+            // 非android手机直接跳过。
+            if ( !Base.os.android ) {
+                return origin.apply( null, arguments );
+            }
+    
+            // 检测是否canvas支持jpeg导出，根据数据格式来判断。
+            // JPEG 前两位分别是：255, 216
+            if ( type === 'image/jpeg' && typeof supportJpeg === 'undefined' ) {
+                fragement = origin.apply( null, arguments );
+    
+                parts = fragement.split(',');
+    
+                if ( ~parts[ 0 ].indexOf('base64') ) {
+                    fragement = atob( parts[ 1 ] );
+                } else {
+                    fragement = decodeURIComponent( parts[ 1 ] );
+                }
+    
+                fragement = fragement.substring( 0, 2 );
+    
+                supportJpeg = fragement.charCodeAt( 0 ) === 255 &&
+                        fragement.charCodeAt( 1 ) === 216;
+            }
+    
+            // 只有在android环境下才修复
+            if ( type === 'image/jpeg' && !supportJpeg ) {
+                w = canvas.width;
+                h = canvas.height;
+                ctx = canvas.getContext('2d');
+    
+                return encoder.encode( ctx.getImageData( 0, 0, w, h ), quality );
+            }
+    
+            return origin.apply( null, arguments );
+        };
+    });
+    /**
+     * @fileOverview Image
+     */
+    define('runtime/html5/image',[
+        'base',
+        'runtime/html5/runtime',
+        'runtime/html5/util'
+    ], function( Base, Html5Runtime, Util ) {
+    
+        var BLANK = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D';
+    
+        return Html5Runtime.register( 'Image', {
+    
+            // flag: 标记是否被修改过。
+            modified: false,
+    
+            init: function() {
+                var me = this,
+                    img = new Image();
+    
+                img.onload = function() {
+    
+                    me._info = {
+                        type: me.type,
+                        width: this.width,
+                        height: this.height
+                    };
+    
+                    // 读取meta信息。
+                    if ( !me._metas && 'image/jpeg' === me.type ) {
+                        Util.parseMeta( me._blob, function( error, ret ) {
+                            me._metas = ret;
+                            me.owner.trigger('load');
+                        });
+                    } else {
+                        me.owner.trigger('load');
+                    }
+                };
+    
+                img.onerror = function() {
+                    me.owner.trigger('error');
+                };
+    
+                me._img = img;
+            },
+    
+            loadFromBlob: function( blob ) {
+                var me = this,
+                    img = me._img;
+    
+                me._blob = blob;
+                me.type = blob.type;
+                img.src = Util.createObjectURL( blob.getSource() );
+                me.owner.once( 'load', function() {
+                    Util.revokeObjectURL( img.src );
+                });
+            },
+    
+            resize: function( width, height ) {
+                var canvas = this._canvas ||
+                        (this._canvas = document.createElement('canvas'));
+    
+                this._resize( this._img, canvas, width, height );
+                this._blob = null;    // 没用了，可以删掉了。
+                this.modified = true;
+                this.owner.trigger('complete');
+            },
+    
+            getAsBlob: function( type ) {
+                var blob = this._blob,
+                    opts = this.options,
+                    canvas;
+    
+                type = type || this.type;
+    
+                // blob需要重新生成。
+                if ( this.modified || this.type !== type ) {
+                    canvas = this._canvas;
+    
+                    if ( type === 'image/jpeg' ) {
+    
+                        blob = Util.canvasToDataUrl( canvas, 'image/jpeg',
+                                opts.quality );
+    
+                        if ( opts.preserveHeaders && this._metas &&
+                                this._metas.imageHead ) {
+    
+                            blob = Util.dataURL2ArrayBuffer( blob );
+                            blob = Util.updateImageHead( blob,
+                                    this._metas.imageHead );
+                            blob = Util.arrayBufferToBlob( blob, type );
+                            return blob;
+                        }
+                    } else {
+                        blob = Util.canvasToDataUrl( canvas, type );
+                    }
+    
+                    blob = Util.dataURL2Blob( blob );
+                }
+    
+                return blob;
+            },
+    
+            getAsDataUrl: function( type ) {
+                var opts = this.options;
+    
+                type = type || this.type;
+    
+                if ( type === 'image/jpeg' ) {
+                    return Util.canvasToDataUrl( this._canvas, type, opts.quality );
+                } else {
+                    return this._canvas.toDataURL( type );
+                }
+            },
+    
+            getOrientation: function() {
+                return this._metas && this._metas.exif &&
+                        this._metas.exif.get('Orientation') || 1;
+            },
+    
+            info: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._info = val;
+                    return this;
+                }
+    
+                // getter
+                return this._info;
+            },
+    
+            meta: function( val ) {
+    
+                // setter
+                if ( val ) {
+                    this._meta = val;
+                    return this;
+                }
+    
+                // getter
+                return this._meta;
+            },
+    
+            destroy: function() {
+                var canvas = this._canvas;
+                this._img.onload = null;
+    
+                if ( canvas ) {
+                    canvas.getContext('2d')
+                            .clearRect( 0, 0, canvas.width, canvas.height );
+                    canvas.width = canvas.height = 0;
+                    this._canvas = null;
+                }
+    
+                // 释放内存。非常重要，否则释放不了image的内存。
+                this._img.src = BLANK;
+                this._img = this._blob = null;
+            },
+    
+            _resize: function( img, cvs, width, height ) {
+                var opts = this.options,
+                    naturalWidth = img.width,
+                    naturalHeight = img.height,
+                    orientation = this.getOrientation(),
+                    scale, w, h, x, y;
+    
+                // values that require 90 degree rotation
+                if ( ~[ 5, 6, 7, 8 ].indexOf( orientation ) ) {
+    
+                    // 交换width, height的值。
+                    width ^= height;
+                    height ^= width;
+                    width ^= height;
+                }
+    
+                scale = Math[ opts.crop ? 'max' : 'min' ]( width / naturalWidth,
+                        height / naturalHeight );
+    
+                // 不允许放大。
+                opts.allowMagnify || (scale = Math.min( 1, scale ));
+    
+                w = naturalWidth * scale;
+                h = naturalHeight * scale;
+    
+                if ( opts.crop ) {
+                    cvs.width = width;
+                    cvs.height = height;
+                } else {
+                    cvs.width = w;
+                    cvs.height = h;
+                }
+    
+                x = (cvs.width - w) / 2;
+                y = (cvs.height - h) / 2;
+    
+                opts.preserveHeaders || this._rotate2Orientaion( cvs, orientation );
+    
+                this._renderImageToCanvas( cvs, img, x, y, w, h );
+            },
+    
+            _rotate2Orientaion: function( canvas, orientation ) {
+                var width = canvas.width,
+                    height = canvas.height,
+                    ctx = canvas.getContext('2d');
+    
+                switch ( orientation ) {
+                    case 5:
+                    case 6:
+                    case 7:
+                    case 8:
+                        canvas.width = height;
+                        canvas.height = width;
+                        break;
+                }
+    
+                switch ( orientation ) {
+                    case 2:    // horizontal flip
+                        ctx.translate( width, 0 );
+                        ctx.scale( -1, 1 );
+                        break;
+    
+                    case 3:    // 180 rotate left
+                        ctx.translate( width, height );
+                        ctx.rotate( Math.PI );
+                        break;
+    
+                    case 4:    // vertical flip
+                        ctx.translate( 0, height );
+                        ctx.scale( 1, -1 );
+                        break;
+    
+                    case 5:    // vertical flip + 90 rotate right
+                        ctx.rotate( 0.5 * Math.PI );
+                        ctx.scale( 1, -1 );
+                        break;
+    
+                    case 6:    // 90 rotate right
+                        ctx.rotate( 0.5 * Math.PI );
+                        ctx.translate( 0, -height );
+                        break;
+    
+                    case 7:    // horizontal flip + 90 rotate right
+                        ctx.rotate( 0.5 * Math.PI );
+                        ctx.translate( width, -height );
+                        ctx.scale( -1, 1 );
+                        break;
+    
+                    case 8:    // 90 rotate left
+                        ctx.rotate( -0.5 * Math.PI );
+                        ctx.translate( -width, 0 );
+                        break;
+                }
+            },
+    
+            // https://github.com/stomita/ios-imagefile-megapixel/
+            // blob/master/src/megapix-image.js
+            _renderImageToCanvas: (function() {
+    
+                // 如果不是ios, 不需要这么复杂！
+                if ( !Base.os.ios ) {
+                    return function( canvas, img, x, y, w, h ) {
+                        canvas.getContext('2d').drawImage( img, x, y, w, h );
+                    };
+                }
+    
+                /**
+                 * Detecting vertical squash in loaded image.
+                 * Fixes a bug which squash image vertically while drawing into
+                 * canvas for some images.
+                 */
+                function detectVerticalSquash( img, iw, ih ) {
+                    var canvas = document.createElement('canvas'),
+                        ctx = canvas.getContext('2d'),
+                        sy = 0,
+                        ey = ih,
+                        py = ih,
+                        data, alpha, ratio;
+    
+    
+                    canvas.width = 1;
+                    canvas.height = ih;
+                    ctx.drawImage( img, 0, 0 );
+                    data = ctx.getImageData( 0, 0, 1, ih ).data;
+    
+                    // search image edge pixel position in case
+                    // it is squashed vertically.
+                    while ( py > sy ) {
+                        alpha = data[ (py - 1) * 4 + 3 ];
+    
+                        if ( alpha === 0 ) {
+                            ey = py;
+                        } else {
+                            sy = py;
+                        }
+    
+                        py = (ey + sy) >> 1;
+                    }
+    
+                    ratio = (py / ih);
+                    return (ratio === 0) ? 1 : ratio;
+                }
+    
+                // fix ie7 bug
+                // http://stackoverflow.com/questions/11929099/
+                // html5-canvas-drawimage-ratio-bug-ios
+                if ( Base.os.ios >= 7 ) {
+                    return function( canvas, img, x, y, w, h ) {
+                        var iw = img.naturalWidth,
+                            ih = img.naturalHeight,
+                            vertSquashRatio = detectVerticalSquash( img, iw, ih );
+    
+                        return canvas.getContext('2d').drawImage( img, 0, 0,
+                            iw * vertSquashRatio, ih * vertSquashRatio,
+                            x, y, w, h );
+                    };
+                }
+    
+                /**
+                 * Detect subsampling in loaded image.
+                 * In iOS, larger images than 2M pixels may be
+                 * subsampled in rendering.
+                 */
+                function detectSubsampling( img ) {
+                    var iw = img.naturalWidth,
+                        ih = img.naturalHeight,
+                        canvas, ctx;
+    
+                    // subsampling may happen overmegapixel image
+                    if ( iw * ih > 1024 * 1024 ) {
+                        canvas = document.createElement('canvas');
+                        canvas.width = canvas.height = 1;
+                        ctx = canvas.getContext('2d');
+                        ctx.drawImage( img, -iw + 1, 0 );
+    
+                        // subsampled image becomes half smaller in rendering size.
+                        // check alpha channel value to confirm image is covering
+                        // edge pixel or not. if alpha value is 0
+                        // image is not covering, hence subsampled.
+                        return ctx.getImageData( 0, 0, 1, 1 ).data[ 3 ] === 0;
+                    } else {
+                        return false;
+                    }
+                }
+    
+    
+                return function( canvas, img, x, y, width, height ) {
+                    var iw = img.naturalWidth,
+                        ih = img.naturalHeight,
+                        ctx = canvas.getContext('2d'),
+                        subsampled = detectSubsampling( img ),
+                        doSquash = this.type === 'image/jpeg',
+                        d = 1024,
+                        sy = 0,
+                        dy = 0,
+                        tmpCanvas, tmpCtx, vertSquashRatio, dw, dh, sx, dx;
+    
+                    if ( subsampled ) {
+                        iw /= 2;
+                        ih /= 2;
+                    }
+    
+                    ctx.save();
+                    tmpCanvas = document.createElement('canvas');
+                    tmpCanvas.width = tmpCanvas.height = d;
+    
+                    tmpCtx = tmpCanvas.getContext('2d');
+                    vertSquashRatio = doSquash ?
+                            detectVerticalSquash( img, iw, ih ) : 1;
+    
+                    dw = Math.ceil( d * width / iw );
+                    dh = Math.ceil( d * height / ih / vertSquashRatio );
+    
+                    while ( sy < ih ) {
+                        sx = 0;
+                        dx = 0;
+                        while ( sx < iw ) {
+                            tmpCtx.clearRect( 0, 0, d, d );
+                            tmpCtx.drawImage( img, -sx, -sy );
+                            ctx.drawImage( tmpCanvas, 0, 0, d, d,
+                                    x + dx, y + dy, dw, dh );
+                            sx += d;
+                            dx += dw;
+                        }
+                        sy += d;
+                        dy += dh;
+                    }
+                    ctx.restore();
+                    tmpCanvas = tmpCtx = null;
+                };
+            })()
+        });
+    });
+    /**
+     * @fileOverview Transport
+     * @todo 支持chunked传输，优势：
+     * 可以将大文件分成小块，挨个传输，可以提高大文件成功率，当失败的时候，也只需要重传那小部分，
+     * 而不需要重头再传一次。另外断点续传也需要用chunked方式。
+     */
+    define('runtime/html5/transport',[
+        'base',
+        'runtime/html5/runtime'
+    ], function( Base, Html5Runtime ) {
+    
+        var noop = Base.noop,
+            $ = Base.$;
+    
+        return Html5Runtime.register( 'Transport', {
+            init: function() {
+                this._status = 0;
+                this._response = null;
+            },
+    
+            send: function() {
+                var owner = this.owner,
+                    opts = this.options,
+                    xhr = this._initAjax(),
+                    blob = owner._blob,
+                    server = opts.server,
+                    formData, binary, fr;
+    
+                if ( opts.sendAsBinary ) {
+                    server += (/\?/.test( server ) ? '&' : '?') +
+                            $.param( owner._formData );
+    
+                    binary = blob.getSource();
+                } else {
+                    formData = new FormData();
+                    $.each( owner._formData, function( k, v ) {
+                        formData.append( k, v );
+                    });
+    
+                    formData.append( opts.fileVal, blob.getSource(),
+                            opts.filename || owner._formData.name || '' );
+                }
+    
+                if ( opts.withCredentials && 'withCredentials' in xhr ) {
+                    xhr.open( opts.method, server, true );
+                    xhr.withCredentials = true;
+                } else {
+                    xhr.open( opts.method, server );
+                }
+    
+                this._setRequestHeader( xhr, opts.headers );
+    
+                if ( binary ) {
+                    xhr.overrideMimeType('application/octet-stream');
+    
+                    // android直接发送blob会导致服务端接收到的是空文件。
+                    // bug详情。
+                    // https://code.google.com/p/android/issues/detail?id=39882
+                    // 所以先用fileReader读取出来再通过arraybuffer的方式发送。
+                    if ( Base.os.android ) {
+                        fr = new FileReader();
+    
+                        fr.onload = function() {
+                            xhr.send( this.result );
+                            fr = fr.onload = null;
+                        };
+    
+                        fr.readAsArrayBuffer( binary );
+                    } else {
+                        xhr.send( binary );
+                    }
+                } else {
+                    xhr.send( formData );
+                }
+            },
+    
+            getResponse: function() {
+                return this._response;
+            },
+    
+            getResponseAsJson: function() {
+                return this._parseJson( this._response );
+            },
+    
+            getStatus: function() {
+                return this._status;
+            },
+    
+            abort: function() {
+                var xhr = this._xhr;
+    
+                if ( xhr ) {
+                    xhr.upload.onprogress = noop;
+                    xhr.onreadystatechange = noop;
+                    xhr.abort();
+    
+                    this._xhr = xhr = null;
+                }
+            },
+    
+            destroy: function() {
+                this.abort();
+            },
+    
+            _initAjax: function() {
+                var me = this,
+                    xhr = new XMLHttpRequest(),
+                    opts = this.options;
+    
+                if ( opts.withCredentials && !('withCredentials' in xhr) &&
+                        typeof XDomainRequest !== 'undefined' ) {
+                    xhr = new XDomainRequest();
+                }
+    
+                xhr.upload.onprogress = function( e ) {
+                    var percentage = 0;
+    
+                    if ( e.lengthComputable ) {
+                        percentage = e.loaded / e.total;
+                    }
+    
+                    return me.trigger( 'progress', percentage );
+                };
+    
+                xhr.onreadystatechange = function() {
+    
+                    if ( xhr.readyState !== 4 ) {
+                        return;
+                    }
+    
+                    xhr.upload.onprogress = noop;
+                    xhr.onreadystatechange = noop;
+                    me._xhr = null;
+                    me._status = xhr.status;
+    
+                    if ( xhr.status >= 200 && xhr.status < 300 ) {
+                        me._response = xhr.responseText;
+                        return me.trigger('load');
+                    } else if ( xhr.status >= 500 && xhr.status < 600 ) {
+                        me._response = xhr.responseText;
+                        return me.trigger( 'error', 'server' );
+                    }
+    
+    
+                    return me.trigger( 'error', me._status ? 'http' : 'abort' );
+                };
+    
+                me._xhr = xhr;
+                return xhr;
+            },
+    
+            _setRequestHeader: function( xhr, headers ) {
+                $.each( headers, function( key, val ) {
+                    xhr.setRequestHeader( key, val );
+                });
+            },
+    
+            _parseJson: function( str ) {
+                var json;
+    
+                try {
+                    json = JSON.parse( str );
+                } catch ( ex ) {
+                    json = {};
+                }
+    
+                return json;
+            }
+        });
+    });
+    /**
+     * @fileOverview FlashRuntime
+     */
+    define('runtime/flash/runtime',[
+        'base',
+        'runtime/runtime',
+        'runtime/compbase'
+    ], function( Base, Runtime, CompBase ) {
+    
+        var $ = Base.$,
+            type = 'flash',
+            components = {};
+    
+    
+        function getFlashVersion() {
+            var version;
+    
+            try {
+                version = navigator.plugins[ 'Shockwave Flash' ];
+                version = version.description;
+            } catch ( ex ) {
+                try {
+                    version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
+                            .GetVariable('$version');
+                } catch ( ex2 ) {
+                    version = '0.0';
+                }
+            }
+            version = version.match( /\d+/g );
+            return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
+        }
+    
+        function FlashRuntime() {
+            var pool = {},
+                clients = {},
+                destory = this.destory,
+                me = this,
+                jsreciver = Base.guid('webuploader_');
+    
+            Runtime.apply( me, arguments );
+            me.type = type;
+    
+    
+            // 这个方法的调用者，实际上是RuntimeClient
+            me.exec = function( comp, fn/*, args...*/ ) {
+                var client = this,
+                    uid = client.uid,
+                    args = Base.slice( arguments, 2 ),
+                    instance;
+    
+                clients[ uid ] = client;
+    
+                if ( components[ comp ] ) {
+                    if ( !pool[ uid ] ) {
+                        pool[ uid ] = new components[ comp ]( client, me );
+                    }
+    
+                    instance = pool[ uid ];
+    
+                    if ( instance[ fn ] ) {
+                        return instance[ fn ].apply( instance, args );
+                    }
+                }
+    
+                return me.flashExec.apply( client, arguments );
+            };
+    
+            function handler( evt, obj ) {
+                var type = evt.type || evt,
+                    parts, uid;
+    
+                parts = type.split('::');
+                uid = parts[ 0 ];
+                type = parts[ 1 ];
+    
+                // console.log.apply( console, arguments );
+    
+                if ( type === 'Ready' && uid === me.uid ) {
+                    me.trigger('ready');
+                } else if ( clients[ uid ] ) {
+                    clients[ uid ].trigger( type.toLowerCase(), evt, obj );
+                }
+    
+                // Base.log( evt, obj );
+            }
+    
+            // flash的接受器。
+            window[ jsreciver ] = function() {
+                var args = arguments;
+    
+                // 为了能捕获得到。
+                setTimeout(function() {
+                    handler.apply( null, args );
+                }, 1 );
+            };
+    
+            this.jsreciver = jsreciver;
+    
+            this.destory = function() {
+                // @todo 删除池子中的所有实例
+                return destory && destory.apply( this, arguments );
+            };
+    
+            this.flashExec = function( comp, fn ) {
+                var flash = me.getFlash(),
+                    args = Base.slice( arguments, 2 );
+    
+                return flash.exec( this.uid, comp, fn, args );
+            };
+    
+            // @todo
+        }
+    
+        Base.inherits( Runtime, {
+            constructor: FlashRuntime,
+    
+            init: function() {
+                var container = this.getContainer(),
+                    opts = this.options,
+                    html;
+    
+                // if not the minimal height, shims are not initialized
+                // in older browsers (e.g FF3.6, IE6,7,8, Safari 4.0,5.0, etc)
+                container.css({
+                    position: 'absolute',
+                    top: '-8px',
+                    left: '-8px',
+                    width: '9px',
+                    height: '9px',
+                    overflow: 'hidden'
+                });
+    
+                // insert flash object
+                html = '<object id="' + this.uid + '" type="application/' +
+                        'x-shockwave-flash" data="' +  opts.swf + '" ';
+    
+                if ( Base.browser.ie ) {
+                    html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
+                }
+    
+                html += 'width="100%" height="100%" style="outline:0">'  +
+                    '<param name="movie" value="' + opts.swf + '" />' +
+                    '<param name="flashvars" value="uid=' + this.uid +
+                    '&jsreciver=' + this.jsreciver + '" />' +
+                    '<param name="wmode" value="transparent" />' +
+                    '<param name="allowscriptaccess" value="always" />' +
+                '</object>';
+    
+                container.html( html );
+            },
+    
+            getFlash: function() {
+                if ( this._flash ) {
+                    return this._flash;
+                }
+    
+                this._flash = $( '#' + this.uid ).get( 0 );
+                return this._flash;
+            }
+    
+        });
+    
+        FlashRuntime.register = function( name, component ) {
+            component = components[ name ] = Base.inherits( CompBase, $.extend({
+    
+                // @todo fix this later
+                flashExec: function() {
+                    var owner = this.owner,
+                        runtime = this.getRuntime();
+    
+                    return runtime.flashExec.apply( owner, arguments );
+                }
+            }, component ) );
+    
+            return component;
+        };
+    
+        if ( getFlashVersion() >= 11.4 ) {
+            Runtime.addRuntime( type, FlashRuntime );
+        }
+    
+        return FlashRuntime;
+    });
+    /**
+     * @fileOverview FilePicker
+     */
+    define('runtime/flash/filepicker',[
+        'base',
+        'runtime/flash/runtime'
+    ], function( Base, FlashRuntime ) {
+        var $ = Base.$;
+    
+        return FlashRuntime.register( 'FilePicker', {
+            init: function( opts ) {
+                var copy = $.extend({}, opts ),
+                    len, i;
+    
+                // 修复Flash再没有设置title的情况下无法弹出flash文件选择框的bug.
+                len = copy.accept && copy.accept.length;
+                for (  i = 0; i < len; i++ ) {
+                    if ( !copy.accept[ i ].title ) {
+                        copy.accept[ i ].title = 'Files';
+                    }
+                }
+    
+                delete copy.button;
+                delete copy.container;
+    
+                this.flashExec( 'FilePicker', 'init', copy );
+            },
+    
+            destroy: function() {
+                // todo
+            }
+        });
+    });
+    /**
+     * @fileOverview 图片压缩
+     */
+    define('runtime/flash/image',[
+        'runtime/flash/runtime'
+    ], function( FlashRuntime ) {
+    
+        return FlashRuntime.register( 'Image', {
+            // init: function( options ) {
+            //     var owner = this.owner;
+    
+            //     this.flashExec( 'Image', 'init', options );
+            //     owner.on( 'load', function() {
+            //         debugger;
+            //     });
+            // },
+    
+            loadFromBlob: function( blob ) {
+                var owner = this.owner;
+    
+                owner.info() && this.flashExec( 'Image', 'info', owner.info() );
+                owner.meta() && this.flashExec( 'Image', 'meta', owner.meta() );
+    
+                this.flashExec( 'Image', 'loadFromBlob', blob.uid );
+            }
+        });
+    });
+    /**
+     * @fileOverview  Transport flash实现
+     */
+    define('runtime/flash/transport',[
+        'base',
+        'runtime/flash/runtime',
+        'runtime/client'
+    ], function( Base, FlashRuntime, RuntimeClient ) {
+        var $ = Base.$;
+    
+        return FlashRuntime.register( 'Transport', {
+            init: function() {
+                this._status = 0;
+                this._response = null;
+                this._responseJson = null;
+            },
+    
+            send: function() {
+                var owner = this.owner,
+                    opts = this.options,
+                    xhr = this._initAjax(),
+                    blob = owner._blob,
+                    server = opts.server,
+                    binary;
+    
+                xhr.connectRuntime( blob.ruid );
+    
+                if ( opts.sendAsBinary ) {
+                    server += (/\?/.test( server ) ? '&' : '?') +
+                            $.param( owner._formData );
+    
+                    binary = blob.uid;
+                } else {
+                    $.each( owner._formData, function( k, v ) {
+                        xhr.exec( 'append', k, v );
+                    });
+    
+                    xhr.exec( 'appendBlob', opts.fileVal, blob.uid,
+                            opts.filename || owner._formData.name || '' );
+                }
+    
+                this._setRequestHeader( xhr, opts.headers );
+                xhr.exec( 'send', {
+                    method: opts.method,
+                    url: server
+                }, binary );
+            },
+    
+            getStatus: function() {
+                return this._status;
+            },
+    
+            getResponse: function() {
+                return this._response;
+            },
+    
+            getResponseAsJson: function() {
+                return this._responseJson;
+            },
+    
+            abort: function() {
+                var xhr = this._xhr;
+    
+                if ( xhr ) {
+                    xhr.exec('abort');
+                    xhr.destroy();
+                    this._xhr = xhr = null;
+                }
+            },
+    
+            destroy: function() {
+                this.abort();
+            },
+    
+            _initAjax: function() {
+                var me = this,
+                    xhr = new RuntimeClient('XMLHttpRequest');
+    
+                xhr.on( 'uploadprogress progress', function( e ) {
+                    return me.trigger( 'progress', e.loaded / e.total );
+                });
+    
+                xhr.on( 'load', function() {
+                    var status = xhr.exec('getStatus'),
+                        err = '';
+    
+                    xhr.off();
+                    me._xhr = null;
+    
+                    if ( status >= 200 && status < 300 ) {
+                        me._response = xhr.exec('getResponse');
+                        me._responseJson = xhr.exec('getResponseAsJson');
+                    } else if ( status >= 500 && status < 600 ) {
+                        me._response = xhr.exec('getResponse');
+                        me._responseJson = xhr.exec('getResponseAsJson');
+                        err = 'server';
+                    } else {
+                        err = 'http';
+                    }
+    
+                    xhr.destroy();
+                    xhr = null;
+    
+                    return err ? me.trigger( 'error', err ) : me.trigger('load');
+                });
+    
+                xhr.on( 'error', function() {
+                    xhr.off();
+                    me._xhr = null;
+                    me.trigger( 'error', 'http' );
+                });
+    
+                me._xhr = xhr;
+                return xhr;
+            },
+    
+            _setRequestHeader: function( xhr, headers ) {
+                $.each( headers, function( key, val ) {
+                    xhr.exec( 'setRequestHeader', key, val );
+                });
+            }
+        });
+    });
+    /**
+     * @fileOverview 完全版本。
+     */
+    define('preset/all',[
+        'base',
+    
+        // widgets
+        'widgets/filednd',
+        'widgets/filepaste',
+        'widgets/filepicker',
+        'widgets/image',
+        'widgets/queue',
+        'widgets/runtime',
+        'widgets/upload',
+        'widgets/validator',
+    
+        // runtimes
+        // html5
+        'runtime/html5/blob',
+        'runtime/html5/dnd',
+        'runtime/html5/filepaste',
+        'runtime/html5/filepicker',
+        'runtime/html5/imagemeta/exif',
+        'runtime/html5/androidpatch',
+        'runtime/html5/image',
+        'runtime/html5/transport',
+    
+        // flash
+        'runtime/flash/filepicker',
+        'runtime/flash/image',
+        'runtime/flash/transport'
+    ], function( Base ) {
+        return Base;
+    });
+    define('webuploader',[
+        'preset/all'
+    ], function( preset ) {
+        return preset;
+    });
+    return require('webuploader');
+});
diff --git a/public/js/ueditor/third-party/webuploader/webuploader.withoutimage.js b/public/js/ueditor/third-party/webuploader/webuploader.withoutimage.js
new file mode 100644
index 0000000..1b921c3
--- /dev/null
+++ b/public/js/ueditor/third-party/webuploader/webuploader.withoutimage.js
@@ -0,0 +1,4593 @@
+/*! WebUploader 0.1.2 */
+
+
+/**
+ * @fileOverview 让内部各个部件的代码可以用[amd](https://github.com/amdjs/amdjs-api/wiki/AMD)模块定义方式组织起来。
+ *
+ * AMD API 内部的简单不完全实现，请忽略。只有当WebUploader被合并成一个文件的时候才会引入。
+ */
+(function( root, factory ) {
+    var modules = {},
+
+        // 内部require, 简单不完全实现。
+        // https://github.com/amdjs/amdjs-api/wiki/require
+        _require = function( deps, callback ) {
+            var args, len, i;
+
+            // 如果deps不是数组，则直接返回指定module
+            if ( typeof deps === 'string' ) {
+                return getModule( deps );
+            } else {
+                args = [];
+                for( len = deps.length, i = 0; i < len; i++ ) {
+                    args.push( getModule( deps[ i ] ) );
+                }
+
+                return callback.apply( null, args );
+            }
+        },
+
+        // 内部define，暂时不支持不指定id.
+        _define = function( id, deps, factory ) {
+            if ( arguments.length === 2 ) {
+                factory = deps;
+                deps = null;
+            }
+
+            _require( deps || [], function() {
+                setModule( id, factory, arguments );
+            });
+        },
+
+        // 设置module, 兼容CommonJs写法。
+        setModule = function( id, factory, args ) {
+            var module = {
+                    exports: factory
+                },
+                returned;
+
+            if ( typeof factory === 'function' ) {
+                args.length || (args = [ _require, module.exports, module ]);
+                returned = factory.apply( null, args );
+                returned !== undefined && (module.exports = returned);
+            }
+
+            modules[ id ] = module.exports;
+        },
+
+        // 根据id获取module
+        getModule = function( id ) {
+            var module = modules[ id ] || root[ id ];
+
+            if ( !module ) {
+                throw new Error( '`' + id + '` is undefined' );
+            }
+
+            return module;
+        },
+
+        // 将所有modules，将路径ids装换成对象。
+        exportsTo = function( obj ) {
+            var key, host, parts, part, last, ucFirst;
+
+            // make the first character upper case.
+            ucFirst = function( str ) {
+                return str && (str.charAt( 0 ).toUpperCase() + str.substr( 1 ));
+            };
+
+            for ( key in modules ) {
+                host = obj;
+
+                if ( !modules.hasOwnProperty( key ) ) {
+                    continue;
+                }
+
+                parts = key.split('/');
+                last = ucFirst( parts.pop() );
+
+                while( (part = ucFirst( parts.shift() )) ) {
+                    host[ part ] = host[ part ] || {};
+                    host = host[ part ];
+                }
+
+                host[ last ] = modules[ key ];
+            }
+        },
+
+        exports = factory( root, _define, _require ),
+        origin;
+
+    // exports every module.
+    exportsTo( exports );
+
+    if ( typeof module === 'object' && typeof module.exports === 'object' ) {
+
+        // For CommonJS and CommonJS-like environments where a proper window is present,
+        module.exports = exports;
+    } else if ( typeof define === 'function' && define.amd ) {
+
+        // Allow using this built library as an AMD module
+        // in another project. That other project will only
+        // see this AMD call, not the internal modules in
+        // the closure below.
+        define([], exports );
+    } else {
+
+        // Browser globals case. Just assign the
+        // result to a property on the global.
+        origin = root.WebUploader;
+        root.WebUploader = exports;
+        root.WebUploader.noConflict = function() {
+            root.WebUploader = origin;
+        };
+    }
+})( this, function( window, define, require ) {
+
+
+    /**
+     * @fileOverview jQuery or Zepto
+     */
+    define('dollar-third',[],function() {
+        return window.jQuery || window.Zepto;
+    });
+    /**
+     * @fileOverview Dom 操作相关
+     */
+    define('dollar',[
+        'dollar-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 使用jQuery的Promise
+     */
+    define('promise-third',[
+        'dollar'
+    ], function( $ ) {
+        return {
+            Deferred: $.Deferred,
+            when: $.when,
+    
+            isPromise: function( anything ) {
+                return anything && typeof anything.then === 'function';
+            }
+        };
+    });
+    /**
+     * @fileOverview Promise/A+
+     */
+    define('promise',[
+        'promise-third'
+    ], function( _ ) {
+        return _;
+    });
+    /**
+     * @fileOverview 基础类方法。
+     */
+    
+    /**
+     * Web Uploader内部类的详细说明，以下提及的功能类，都可以在`WebUploader`这个变量中访问到。
+     *
+     * As you know, Web Uploader的每个文件都是用过[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)规范中的`define`组织起来的, 每个Module都会有个module id.
+     * 默认module id该文件的路径，而此路径将会转化成名字空间存放在WebUploader中。如：
+     *
+     * * module `base`：WebUploader.Base
+     * * module `file`: WebUploader.File
+     * * module `lib/dnd`: WebUploader.Lib.Dnd
+     * * module `runtime/html5/dnd`: WebUploader.Runtime.Html5.Dnd
+     *
+     *
+     * 以下文档将可能省略`WebUploader`前缀。
+     * @module WebUploader
+     * @title WebUploader API文档
+     */
+    define('base',[
+        'dollar',
+        'promise'
+    ], function( $, promise ) {
+    
+        var noop = function() {},
+            call = Function.call;
+    
+        // http://jsperf.com/uncurrythis
+        // 反科里化
+        function uncurryThis( fn ) {
+            return function() {
+                return call.apply( fn, arguments );
+            };
+        }
+    
+        function bindFn( fn, context ) {
+            return function() {
+                return fn.apply( context, arguments );
+            };
+        }
+    
+        function createObject( proto ) {
+            var f;
+    
+            if ( Object.create ) {
+                return Object.create( proto );
+            } else {
+                f = function() {};
+                f.prototype = proto;
+                return new f();
+            }
+        }
+    
+    
+        /**
+         * 基础类，提供一些简单常用的方法。
+         * @class Base
+         */
+        return {
+    
+            /**
+             * @property {String} version 当前版本号。
+             */
+            version: '0.1.2',
+    
+            /**
+             * @property {jQuery|Zepto} $ 引用依赖的jQuery或者Zepto对象。
+             */
+            $: $,
+    
+            Deferred: promise.Deferred,
+    
+            isPromise: promise.isPromise,
+    
+            when: promise.when,
+    
+            /**
+             * @description  简单的浏览器检查结果。
+             *
+             * * `webkit`  webkit版本号，如果浏览器为非webkit内核，此属性为`undefined`。
+             * * `chrome`  chrome浏览器版本号，如果浏览器为chrome，此属性为`undefined`。
+             * * `ie`  ie浏览器版本号，如果浏览器为非ie，此属性为`undefined`。**暂不支持ie10+**
+             * * `firefox`  firefox浏览器版本号，如果浏览器为非firefox，此属性为`undefined`。
+             * * `safari`  safari浏览器版本号，如果浏览器为非safari，此属性为`undefined`。
+             * * `opera`  opera浏览器版本号，如果浏览器为非opera，此属性为`undefined`。
+             *
+             * @property {Object} [browser]
+             */
+            browser: (function( ua ) {
+                var ret = {},
+                    webkit = ua.match( /WebKit\/([\d.]+)/ ),
+                    chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
+                        ua.match( /CriOS\/([\d.]+)/ ),
+    
+                    ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
+                        ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i),
+                    firefox = ua.match( /Firefox\/([\d.]+)/ ),
+                    safari = ua.match( /Safari\/([\d.]+)/ ),
+                    opera = ua.match( /OPR\/([\d.]+)/ );
+    
+                webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
+                chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
+                ie && (ret.ie = parseFloat( ie[ 1 ] ));
+                firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
+                safari && (ret.safari = parseFloat( safari[ 1 ] ));
+                opera && (ret.opera = parseFloat( opera[ 1 ] ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * @description  操作系统检查结果。
+             *
+             * * `android`  如果在android浏览器环境下，此值为对应的android版本号，否则为`undefined`。
+             * * `ios` 如果在ios浏览器环境下，此值为对应的ios版本号，否则为`undefined`。
+             * @property {Object} [os]
+             */
+            os: (function( ua ) {
+                var ret = {},
+    
+                    // osx = !!ua.match( /\(Macintosh\; Intel / ),
+                    android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
+                    ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );
+    
+                // osx && (ret.osx = true);
+                android && (ret.android = parseFloat( android[ 1 ] ));
+                ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));
+    
+                return ret;
+            })( navigator.userAgent ),
+    
+            /**
+             * 实现类与类之间的继承。
+             * @method inherits
+             * @grammar Base.inherits( super ) => child
+             * @grammar Base.inherits( super, protos ) => child
+             * @grammar Base.inherits( super, protos, statics ) => child
+             * @param  {Class} super 父类
+             * @param  {Object | Function} [protos] 子类或者对象。如果对象中包含constructor，子类将是用此属性值。
+             * @param  {Function} [protos.constructor] 子类构造器，不指定的话将创建个临时的直接执行父类构造器的方法。
+             * @param  {Object} [statics] 静态属性或方法。
+             * @return {Class} 返回子类。
+             * @example
+             * function Person() {
+             *     console.log( 'Super' );
+             * }
+             * Person.prototype.hello = function() {
+             *     console.log( 'hello' );
+             * };
+             *
+             * var Manager = Base.inherits( Person, {
+             *     world: function() {
+             *         console.log( 'World' );
+             *     }
+             * });
+             *
+             * // 因为没有指定构造器，父类的构造器将会执行。
+             * var instance = new Manager();    // => Super
+             *
+             * // 继承子父类的方法
+             * instance.hello();    // => hello
+             * instance.world();    // => World
+             *
+             * // 子类的__super__属性指向父类
+             * console.log( Manager.__super__ === Person );    // => true
+             */
+            inherits: function( Super, protos, staticProtos ) {
+                var child;
+    
+                if ( typeof protos === 'function' ) {
+                    child = protos;
+                    protos = null;
+                } else if ( protos && protos.hasOwnProperty('constructor') ) {
+                    child = protos.constructor;
+                } else {
+                    child = function() {
+                        return Super.apply( this, arguments );
+                    };
+                }
+    
+                // 复制静态方法
+                $.extend( true, child, Super, staticProtos || {} );
+    
+                /* jshint camelcase: false */
+    
+                // 让子类的__super__属性指向父类。
+                child.__super__ = Super.prototype;
+    
+                // 构建原型，添加原型方法或属性。
+                // 暂时用Object.create实现。
+                child.prototype = createObject( Super.prototype );
+                protos && $.extend( true, child.prototype, protos );
+    
+                return child;
+            },
+    
+            /**
+             * 一个不做任何事情的方法。可以用来赋值给默认的callback.
+             * @method noop
+             */
+            noop: noop,
+    
+            /**
+             * 返回一个新的方法，此方法将已指定的`context`来执行。
+             * @grammar Base.bindFn( fn, context ) => Function
+             * @method bindFn
+             * @example
+             * var doSomething = function() {
+             *         console.log( this.name );
+             *     },
+             *     obj = {
+             *         name: 'Object Name'
+             *     },
+             *     aliasFn = Base.bind( doSomething, obj );
+             *
+             *  aliasFn();    // => Object Name
+             *
+             */
+            bindFn: bindFn,
+    
+            /**
+             * 引用Console.log如果存在的话，否则引用一个[空函数loop](#WebUploader:Base.log)。
+             * @grammar Base.log( args... ) => undefined
+             * @method log
+             */
+            log: (function() {
+                if ( window.console ) {
+                    return bindFn( console.log, console );
+                }
+                return noop;
+            })(),
+    
+            nextTick: (function() {
+    
+                return function( cb ) {
+                    setTimeout( cb, 1 );
+                };
+    
+                // @bug 当浏览器不在当前窗口时就停了。
+                // var next = window.requestAnimationFrame ||
+                //     window.webkitRequestAnimationFrame ||
+                //     window.mozRequestAnimationFrame ||
+                //     function( cb ) {
+                //         window.setTimeout( cb, 1000 / 60 );
+                //     };
+    
+                // // fix: Uncaught TypeError: Illegal invocation
+                // return bindFn( next, window );
+            })(),
+    
+            /**
+             * 被[uncurrythis](http://www.2ality.com/2011/11/uncurrying-this.html)的数组slice方法。
+             * 将用来将非数组对象转化成数组对象。
+             * @grammar Base.slice( target, start[, end] ) => Array
+             * @method slice
+             * @example
+             * function doSomthing() {
+             *     var args = Base.slice( arguments, 1 );
+             *     console.log( args );
+             * }
+             *
+             * doSomthing( 'ignored', 'arg2', 'arg3' );    // => Array ["arg2", "arg3"]
+             */
+            slice: uncurryThis( [].slice ),
+    
+            /**
+             * 生成唯一的ID
+             * @method guid
+             * @grammar Base.guid() => String
+             * @grammar Base.guid( prefx ) => String
+             */
+            guid: (function() {
+                var counter = 0;
+    
+                return function( prefix ) {
+                    var guid = (+new Date()).toString( 32 ),
+                        i = 0;
+    
+                    for ( ; i < 5; i++ ) {
+                        guid += Math.floor( Math.random() * 65535 ).toString( 32 );
+                    }
+    
+                    return (prefix || 'wu_') + guid + (counter++).toString( 32 );
+                };
+            })(),
+    
+            /**
+             * 格式化文件大小, 输出成带单位的字符串
+             * @method formatSize
+             * @grammar Base.formatSize( size ) => String
+             * @grammar Base.formatSize( size, pointLength ) => String
+             * @grammar Base.formatSize( size, pointLength, units ) => String
+             * @param {Number} size 文件大小
+             * @param {Number} [pointLength=2] 精确到的小数点数。
+             * @param {Array} [units=[ 'B', 'K', 'M', 'G', 'TB' ]] 单位数组。从字节，到千字节，一直往上指定。如果单位数组里面只指定了到了K(千字节)，同时文件大小大于M, 此方法的输出将还是显示成多少K.
+             * @example
+             * console.log( Base.formatSize( 100 ) );    // => 100B
+             * console.log( Base.formatSize( 1024 ) );    // => 1.00K
+             * console.log( Base.formatSize( 1024, 0 ) );    // => 1K
+             * console.log( Base.formatSize( 1024 * 1024 ) );    // => 1.00M
+             * console.log( Base.formatSize( 1024 * 1024 * 1024 ) );    // => 1.00G
+             * console.log( Base.formatSize( 1024 * 1024 * 1024, 0, ['B', 'KB', 'MB'] ) );    // => 1024MB
+             */
+            formatSize: function( size, pointLength, units ) {
+                var unit;
+    
+                units = units || [ 'B', 'K', 'M', 'G', 'TB' ];
+    
+                while ( (unit = units.shift()) && size > 1024 ) {
+                    size = size / 1024;
+                }
+    
+                return (unit === 'B' ? size : size.toFixed( pointLength || 2 )) +
+                        unit;
+            }
+        };
+    });
+    /**
+     * 事件处理类，可以独立使用，也可以扩展给对象使用。
+     * @fileOverview Mediator
+     */
+    define('mediator',[
+        'base'
+    ], function( Base ) {
+        var $ = Base.$,
+            slice = [].slice,
+            separator = /\s+/,
+            protos;
+    
+        // 根据条件过滤出事件handlers.
+        function findHandlers( arr, name, callback, context ) {
+            return $.grep( arr, function( handler ) {
+                return handler &&
+                        (!name || handler.e === name) &&
+                        (!callback || handler.cb === callback ||
+                        handler.cb._cb === callback) &&
+                        (!context || handler.ctx === context);
+            });
+        }
+    
+        function eachEvent( events, callback, iterator ) {
+            // 不支持对象，只支持多个event用空格隔开
+            $.each( (events || '').split( separator ), function( _, key ) {
+                iterator( key, callback );
+            });
+        }
+    
+        function triggerHanders( events, args ) {
+            var stoped = false,
+                i = -1,
+                len = events.length,
+                handler;
+    
+            while ( ++i < len ) {
+                handler = events[ i ];
+    
+                if ( handler.cb.apply( handler.ctx2, args ) === false ) {
+                    stoped = true;
+                    break;
+                }
+            }
+    
+            return !stoped;
+        }
+    
+        protos = {
+    
+            /**
+             * 绑定事件。
+             *
+             * `callback`方法在执行时，arguments将会来源于trigger的时候携带的参数。如
+             * ```javascript
+             * var obj = {};
+             *
+             * // 使得obj有事件行为
+             * Mediator.installTo( obj );
+             *
+             * obj.on( 'testa', function( arg1, arg2 ) {
+             *     console.log( arg1, arg2 ); // => 'arg1', 'arg2'
+             * });
+             *
+             * obj.trigger( 'testa', 'arg1', 'arg2' );
+             * ```
+             *
+             * 如果`callback`中，某一个方法`return false`了，则后续的其他`callback`都不会被执行到。
+             * 切会影响到`trigger`方法的返回值，为`false`。
+             *
+             * `on`还可以用来添加一个特殊事件`all`, 这样所有的事件触发都会响应到。同时此类`callback`中的arguments有一个不同处，
+             * 就是第一个参数为`type`，记录当前是什么事件在触发。此类`callback`的优先级比脚低，会再正常`callback`执行完后触发。
+             * ```javascript
+             * obj.on( 'all', function( type, arg1, arg2 ) {
+             *     console.log( type, arg1, arg2 ); // => 'testa', 'arg1', 'arg2'
+             * });
+             * ```
+             *
+             * @method on
+             * @grammar on( name, callback[, context] ) => self
+             * @param  {String}   name     事件名，支持多个事件用空格隔开
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             * @class Mediator
+             */
+            on: function( name, callback, context ) {
+                var me = this,
+                    set;
+    
+                if ( !callback ) {
+                    return this;
+                }
+    
+                set = this._events || (this._events = []);
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var handler = { e: name };
+    
+                    handler.cb = callback;
+                    handler.ctx = context;
+                    handler.ctx2 = context || me;
+                    handler.id = set.length;
+    
+                    set.push( handler );
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 绑定事件，且当handler执行完后，自动解除绑定。
+             * @method once
+             * @grammar once( name, callback[, context] ) => self
+             * @param  {String}   name     事件名
+             * @param  {Function} callback 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            once: function( name, callback, context ) {
+                var me = this;
+    
+                if ( !callback ) {
+                    return me;
+                }
+    
+                eachEvent( name, callback, function( name, callback ) {
+                    var once = function() {
+                            me.off( name, once );
+                            return callback.apply( context || me, arguments );
+                        };
+    
+                    once._cb = callback;
+                    me.on( name, once, context );
+                });
+    
+                return me;
+            },
+    
+            /**
+             * 解除事件绑定
+             * @method off
+             * @grammar off( [name[, callback[, context] ] ] ) => self
+             * @param  {String}   [name]     事件名
+             * @param  {Function} [callback] 事件处理器
+             * @param  {Object}   [context]  事件处理器的上下文。
+             * @return {self} 返回自身，方便链式
+             * @chainable
+             */
+            off: function( name, cb, ctx ) {
+                var events = this._events;
+    
+                if ( !events ) {
+                    return this;
+                }
+    
+                if ( !name && !cb && !ctx ) {
+                    this._events = [];
+                    return this;
+                }
+    
+                eachEvent( name, cb, function( name, cb ) {
+                    $.each( findHandlers( events, name, cb, ctx ), function() {
+                        delete events[ this.id ];
+                    });
+                });
+    
+                return this;
+            },
+    
+            /**
+             * 触发事件
+             * @method trigger
+             * @grammar trigger( name[, args...] ) => self
+             * @param  {String}   type     事件名
+             * @param  {*} [...] 任意参数
+             * @return {Boolean} 如果handler中return false了，则返回false, 否则返回true
+             */
+            trigger: function( type ) {
+                var args, events, allEvents;
+    
+                if ( !this._events || !type ) {
+                    return this;
+                }
+    
+                args = slice.call( arguments, 1 );
+                events = findHandlers( this._events, type );
+                allEvents = findHandlers( this._events, 'all' );
+    
+                return triggerHanders( events, args ) &&
+                        triggerHanders( allEvents, arguments );
+            }
+        };
+    
+        /**
+         * 中介者，它本身是个单例，但可以通过[installTo](#WebUploader:Mediator:installTo)方法，使任何对象具备事件行为。
+         * 主要目的是负责模块与模块之间的合作，降低耦合度。
+         *
+         * @class Mediator
+         */
+        return $.extend({
+    
+            /**
+             * 可以通过这个接口，使任何对象具备事件功能。
+             * @method installTo
+             * @param  {Object} obj 需要具备事件行为的对象。
+             * @return {Object} 返回obj.
+             */
+            installTo: function( obj ) {
+                return $.extend( obj, protos );
+            }
+    
+        }, protos );
+    });
+    /**
+     * @fileOverview Uploader上传类
+     */
+    define('uploader',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$;
+    
+        /**
+         * 上传入口类。
+         * @class Uploader
+         * @constructor
+         * @grammar new Uploader( opts ) => Uploader
+         * @example
+         * var uploader = WebUploader.Uploader({
+         *     swf: 'path_of_swf/Uploader.swf',
+         *
+         *     // 开起分片上传。
+         *     chunked: true
+         * });
+         */
+        function Uploader( opts ) {
+            this.options = $.extend( true, {}, Uploader.options, opts );
+            this._init( this.options );
+        }
+    
+        // default Options
+        // widgets中有相应扩展
+        Uploader.options = {};
+        Mediator.installTo( Uploader.prototype );
+    
+        // 批量添加纯命令式方法。
+        $.each({
+            upload: 'start-upload',
+            stop: 'stop-upload',
+            getFile: 'get-file',
+            getFiles: 'get-files',
+            addFile: 'add-file',
+            addFiles: 'add-file',
+            sort: 'sort-files',
+            removeFile: 'remove-file',
+            skipFile: 'skip-file',
+            retry: 'retry',
+            isInProgress: 'is-in-progress',
+            makeThumb: 'make-thumb',
+            getDimension: 'get-dimension',
+            addButton: 'add-btn',
+            getRuntimeType: 'get-runtime-type',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable',
+            reset: 'reset'
+        }, function( fn, command ) {
+            Uploader.prototype[ fn ] = function() {
+                return this.request( command, arguments );
+            };
+        });
+    
+        $.extend( Uploader.prototype, {
+            state: 'pending',
+    
+            _init: function( opts ) {
+                var me = this;
+    
+                me.request( 'init', opts, function() {
+                    me.state = 'ready';
+                    me.trigger('ready');
+                });
+            },
+    
+            /**
+             * 获取或者设置Uploader配置项。
+             * @method option
+             * @grammar option( key ) => *
+             * @grammar option( key, val ) => self
+             * @example
+             *
+             * // 初始状态图片上传前不会压缩
+             * var uploader = new WebUploader.Uploader({
+             *     resize: null;
+             * });
+             *
+             * // 修改后图片上传前，尝试将图片压缩到1600 * 1600
+             * uploader.options( 'resize', {
+             *     width: 1600,
+             *     height: 1600
+             * });
+             */
+            option: function( key, val ) {
+                var opts = this.options;
+    
+                // setter
+                if ( arguments.length > 1 ) {
+    
+                    if ( $.isPlainObject( val ) &&
+                            $.isPlainObject( opts[ key ] ) ) {
+                        $.extend( opts[ key ], val );
+                    } else {
+                        opts[ key ] = val;
+                    }
+    
+                } else {    // getter
+                    return key ? opts[ key ] : opts;
+                }
+            },
+    
+            /**
+             * 获取文件统计信息。返回一个包含一下信息的对象。
+             * * `successNum` 上传成功的文件数
+             * * `uploadFailNum` 上传失败的文件数
+             * * `cancelNum` 被删除的文件数
+             * * `invalidNum` 无效的文件数
+             * * `queueNum` 还在队列中的文件数
+             * @method getStats
+             * @grammar getStats() => Object
+             */
+            getStats: function() {
+                // return this._mgr.getStats.apply( this._mgr, arguments );
+                var stats = this.request('get-stats');
+    
+                return {
+                    successNum: stats.numOfSuccess,
+    
+                    // who care?
+                    // queueFailNum: 0,
+                    cancelNum: stats.numOfCancel,
+                    invalidNum: stats.numOfInvalid,
+                    uploadFailNum: stats.numOfUploadFailed,
+                    queueNum: stats.numOfQueue
+                };
+            },
+    
+            // 需要重写此方法来来支持opts.onEvent和instance.onEvent的处理器
+            trigger: function( type/*, args...*/ ) {
+                var args = [].slice.call( arguments, 1 ),
+                    opts = this.options,
+                    name = 'on' + type.substring( 0, 1 ).toUpperCase() +
+                        type.substring( 1 );
+    
+                if (
+                        // 调用通过on方法注册的handler.
+                        Mediator.trigger.apply( this, arguments ) === false ||
+    
+                        // 调用opts.onEvent
+                        $.isFunction( opts[ name ] ) &&
+                        opts[ name ].apply( this, args ) === false ||
+    
+                        // 调用this.onEvent
+                        $.isFunction( this[ name ] ) &&
+                        this[ name ].apply( this, args ) === false ||
+    
+                        // 广播所有uploader的事件。
+                        Mediator.trigger.apply( Mediator,
+                        [ this, type ].concat( args ) ) === false ) {
+    
+                    return false;
+                }
+    
+                return true;
+            },
+    
+            // widgets/widget.js将补充此方法的详细文档。
+            request: Base.noop
+        });
+    
+        /**
+         * 创建Uploader实例，等同于new Uploader( opts );
+         * @method create
+         * @class Base
+         * @static
+         * @grammar Base.create( opts ) => Uploader
+         */
+        Base.create = Uploader.create = function( opts ) {
+            return new Uploader( opts );
+        };
+    
+        // 暴露Uploader，可以通过它来扩展业务逻辑。
+        Base.Uploader = Uploader;
+    
+        return Uploader;
+    });
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/runtime',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            factories = {},
+    
+            // 获取对象的第一个key
+            getFirstKey = function( obj ) {
+                for ( var key in obj ) {
+                    if ( obj.hasOwnProperty( key ) ) {
+                        return key;
+                    }
+                }
+                return null;
+            };
+    
+        // 接口类。
+        function Runtime( options ) {
+            this.options = $.extend({
+                container: document.body
+            }, options );
+            this.uid = Base.guid('rt_');
+        }
+    
+        $.extend( Runtime.prototype, {
+    
+            getContainer: function() {
+                var opts = this.options,
+                    parent, container;
+    
+                if ( this._container ) {
+                    return this._container;
+                }
+    
+                parent = $( opts.container || document.body );
+                container = $( document.createElement('div') );
+    
+                container.attr( 'id', 'rt_' + this.uid );
+                container.css({
+                    position: 'absolute',
+                    top: '0px',
+                    left: '0px',
+                    width: '1px',
+                    height: '1px',
+                    overflow: 'hidden'
+                });
+    
+                parent.append( container );
+                parent.addClass('webuploader-container');
+                this._container = container;
+                return container;
+            },
+    
+            init: Base.noop,
+            exec: Base.noop,
+    
+            destroy: function() {
+                if ( this._container ) {
+                    this._container.parentNode.removeChild( this.__container );
+                }
+    
+                this.off();
+            }
+        });
+    
+        Runtime.orders = 'html5,flash';
+    
+    
+        /**
+         * 添加Runtime实现。
+         * @param {String} type    类型
+         * @param {Runtime} factory 具体Runtime实现。
+         */
+        Runtime.addRuntime = function( type, factory ) {
+            factories[ type ] = factory;
+        };
+    
+        Runtime.hasRuntime = function( type ) {
+            return !!(type ? factories[ type ] : getFirstKey( factories ));
+        };
+    
+        Runtime.create = function( opts, orders ) {
+            var type, runtime;
+    
+            orders = orders || Runtime.orders;
+            $.each( orders.split( /\s*,\s*/g ), function() {
+                if ( factories[ this ] ) {
+                    type = this;
+                    return false;
+                }
+            });
+    
+            type = type || getFirstKey( factories );
+    
+            if ( !type ) {
+                throw new Error('Runtime Error');
+            }
+    
+            runtime = new factories[ type ]( opts );
+            return runtime;
+        };
+    
+        Mediator.installTo( Runtime.prototype );
+        return Runtime;
+    });
+    
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/client',[
+        'base',
+        'mediator',
+        'runtime/runtime'
+    ], function( Base, Mediator, Runtime ) {
+    
+        var cache;
+    
+        cache = (function() {
+            var obj = {};
+    
+            return {
+                add: function( runtime ) {
+                    obj[ runtime.uid ] = runtime;
+                },
+    
+                get: function( ruid, standalone ) {
+                    var i;
+    
+                    if ( ruid ) {
+                        return obj[ ruid ];
+                    }
+    
+                    for ( i in obj ) {
+                        // 有些类型不能重用，比如filepicker.
+                        if ( standalone && obj[ i ].__standalone ) {
+                            continue;
+                        }
+    
+                        return obj[ i ];
+                    }
+    
+                    return null;
+                },
+    
+                remove: function( runtime ) {
+                    delete obj[ runtime.uid ];
+                }
+            };
+        })();
+    
+        function RuntimeClient( component, standalone ) {
+            var deferred = Base.Deferred(),
+                runtime;
+    
+            this.uid = Base.guid('client_');
+    
+            // 允许runtime没有初始化之前，注册一些方法在初始化后执行。
+            this.runtimeReady = function( cb ) {
+                return deferred.done( cb );
+            };
+    
+            this.connectRuntime = function( opts, cb ) {
+    
+                // already connected.
+                if ( runtime ) {
+                    throw new Error('already connected!');
+                }
+    
+                deferred.done( cb );
+    
+                if ( typeof opts === 'string' && cache.get( opts ) ) {
+                    runtime = cache.get( opts );
+                }
+    
+                // 像filePicker只能独立存在，不能公用。
+                runtime = runtime || cache.get( null, standalone );
+    
+                // 需要创建
+                if ( !runtime ) {
+                    runtime = Runtime.create( opts, opts.runtimeOrder );
+                    runtime.__promise = deferred.promise();
+                    runtime.once( 'ready', deferred.resolve );
+                    runtime.init();
+                    cache.add( runtime );
+                    runtime.__client = 1;
+                } else {
+                    // 来自cache
+                    Base.$.extend( runtime.options, opts );
+                    runtime.__promise.then( deferred.resolve );
+                    runtime.__client++;
+                }
+    
+                standalone && (runtime.__standalone = standalone);
+                return runtime;
+            };
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.disconnectRuntime = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                runtime.__client--;
+    
+                if ( runtime.__client <= 0 ) {
+                    cache.remove( runtime );
+                    delete runtime.__promise;
+                    runtime.destroy();
+                }
+    
+                runtime = null;
+            };
+    
+            this.exec = function() {
+                if ( !runtime ) {
+                    return;
+                }
+    
+                var args = Base.slice( arguments );
+                component && args.unshift( component );
+    
+                return runtime.exec.apply( this, args );
+            };
+    
+            this.getRuid = function() {
+                return runtime && runtime.uid;
+            };
+    
+            this.destroy = (function( destroy ) {
+                return function() {
+                    destroy && destroy.apply( this, arguments );
+                    this.trigger('destroy');
+                    this.off();
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                };
+            })( this.destroy );
+        }
+    
+        Mediator.installTo( RuntimeClient.prototype );
+        return RuntimeClient;
+    });
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/dnd',[
+        'base',
+        'mediator',
+        'runtime/client'
+    ], function( Base, Mediator, RuntimeClent ) {
+    
+        var $ = Base.$;
+    
+        function DragAndDrop( opts ) {
+            opts = this.options = $.extend({}, DragAndDrop.options, opts );
+    
+            opts.container = $( opts.container );
+    
+            if ( !opts.container.length ) {
+                return;
+            }
+    
+            RuntimeClent.call( this, 'DragAndDrop' );
+        }
+    
+        DragAndDrop.options = {
+            accept: null,
+            disableGlobalDnd: false
+        };
+    
+        Base.inherits( RuntimeClent, {
+            constructor: DragAndDrop,
+    
+            init: function() {
+                var me = this;
+    
+                me.connectRuntime( me.options, function() {
+                    me.exec('init');
+                    me.trigger('ready');
+                });
+            },
+    
+            destroy: function() {
+                this.disconnectRuntime();
+            }
+        });
+    
+        Mediator.installTo( DragAndDrop.prototype );
+    
+        return DragAndDrop;
+    });
+    /**
+     * @fileOverview 组件基类。
+     */
+    define('widgets/widget',[
+        'base',
+        'uploader'
+    ], function( Base, Uploader ) {
+    
+        var $ = Base.$,
+            _init = Uploader.prototype._init,
+            IGNORE = {},
+            widgetClass = [];
+    
+        function isArrayLike( obj ) {
+            if ( !obj ) {
+                return false;
+            }
+    
+            var length = obj.length,
+                type = $.type( obj );
+    
+            if ( obj.nodeType === 1 && length ) {
+                return true;
+            }
+    
+            return type === 'array' || type !== 'function' && type !== 'string' &&
+                    (length === 0 || typeof length === 'number' && length > 0 &&
+                    (length - 1) in obj);
+        }
+    
+        function Widget( uploader ) {
+            this.owner = uploader;
+            this.options = uploader.options;
+        }
+    
+        $.extend( Widget.prototype, {
+    
+            init: Base.noop,
+    
+            // 类Backbone的事件监听声明，监听uploader实例上的事件
+            // widget直接无法监听事件，事件只能通过uploader来传递
+            invoke: function( apiName, args ) {
+    
+                /*
+                    {
+                        'make-thumb': 'makeThumb'
+                    }
+                 */
+                var map = this.responseMap;
+    
+                // 如果无API响应声明则忽略
+                if ( !map || !(apiName in map) || !(map[ apiName ] in this) ||
+                        !$.isFunction( this[ map[ apiName ] ] ) ) {
+    
+                    return IGNORE;
+                }
+    
+                return this[ map[ apiName ] ].apply( this, args );
+    
+            },
+    
+            /**
+             * 发送命令。当传入`callback`或者`handler`中返回`promise`时。返回一个当所有`handler`中的promise都完成后完成的新`promise`。
+             * @method request
+             * @grammar request( command, args ) => * | Promise
+             * @grammar request( command, args, callback ) => Promise
+             * @for  Uploader
+             */
+            request: function() {
+                return this.owner.request.apply( this.owner, arguments );
+            }
+        });
+    
+        // 扩展Uploader.
+        $.extend( Uploader.prototype, {
+    
+            // 覆写_init用来初始化widgets
+            _init: function() {
+                var me = this,
+                    widgets = me._widgets = [];
+    
+                $.each( widgetClass, function( _, klass ) {
+                    widgets.push( new klass( me ) );
+                });
+    
+                return _init.apply( me, arguments );
+            },
+    
+            request: function( apiName, args, callback ) {
+                var i = 0,
+                    widgets = this._widgets,
+                    len = widgets.length,
+                    rlts = [],
+                    dfds = [],
+                    widget, rlt, promise, key;
+    
+                args = isArrayLike( args ) ? args : [ args ];
+    
+                for ( ; i < len; i++ ) {
+                    widget = widgets[ i ];
+                    rlt = widget.invoke( apiName, args );
+    
+                    if ( rlt !== IGNORE ) {
+    
+                        // Deferred对象
+                        if ( Base.isPromise( rlt ) ) {
+                            dfds.push( rlt );
+                        } else {
+                            rlts.push( rlt );
+                        }
+                    }
+                }
+    
+                // 如果有callback，则用异步方式。
+                if ( callback || dfds.length ) {
+                    promise = Base.when.apply( Base, dfds );
+                    key = promise.pipe ? 'pipe' : 'then';
+    
+                    // 很重要不能删除。删除了会死循环。
+                    // 保证执行顺序。让callback总是在下一个tick中执行。
+                    return promise[ key ](function() {
+                                var deferred = Base.Deferred(),
+                                    args = arguments;
+    
+                                setTimeout(function() {
+                                    deferred.resolve.apply( deferred, args );
+                                }, 1 );
+    
+                                return deferred.promise();
+                            })[ key ]( callback || Base.noop );
+                } else {
+                    return rlts[ 0 ];
+                }
+            }
+        });
+    
+        /**
+         * 添加组件
+         * @param  {object} widgetProto 组件原型，构造函数通过constructor属性定义
+         * @param  {object} responseMap API名称与函数实现的映射
+         * @example
+         *     Uploader.register( {
+         *         init: function( options ) {},
+         *         makeThumb: function() {}
+         *     }, {
+         *         'make-thumb': 'makeThumb'
+         *     } );
+         */
+        Uploader.register = Widget.register = function( responseMap, widgetProto ) {
+            var map = { init: 'init' },
+                klass;
+    
+            if ( arguments.length === 1 ) {
+                widgetProto = responseMap;
+                widgetProto.responseMap = map;
+            } else {
+                widgetProto.responseMap = $.extend( map, responseMap );
+            }
+    
+            klass = Base.inherits( Widget, widgetProto );
+            widgetClass.push( klass );
+    
+            return klass;
+        };
+    
+        return Widget;
+    });
+    /**
+     * @fileOverview DragAndDrop Widget。
+     */
+    define('widgets/filednd',[
+        'base',
+        'uploader',
+        'lib/dnd',
+        'widgets/widget'
+    ], function( Base, Uploader, Dnd ) {
+        var $ = Base.$;
+    
+        Uploader.options.dnd = '';
+    
+        /**
+         * @property {Selector} [dnd=undefined]  指定Drag And Drop拖拽的容器，如果不指定，则不启动。
+         * @namespace options
+         * @for Uploader
+         */
+    
+        /**
+         * @event dndAccept
+         * @param {DataTransferItemList} items DataTransferItem
+         * @description 阻止此事件可以拒绝某些类型的文件拖入进来。目前只有 chrome 提供这样的 API，且只能通过 mime-type 验证。
+         * @for  Uploader
+         */
+        return Uploader.register({
+            init: function( opts ) {
+    
+                if ( !opts.dnd ||
+                        this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                var me = this,
+                    deferred = Base.Deferred(),
+                    options = $.extend({}, {
+                        disableGlobalDnd: opts.disableGlobalDnd,
+                        container: opts.dnd,
+                        accept: opts.accept
+                    }),
+                    dnd;
+    
+                dnd = new Dnd( options );
+    
+                dnd.once( 'ready', deferred.resolve );
+                dnd.on( 'drop', function( files ) {
+                    me.request( 'add-file', [ files ]);
+                });
+    
+                // 检测文件是否全部允许添加。
+                dnd.on( 'accept', function( items ) {
+                    return me.owner.trigger( 'dndAccept', items );
+                });
+    
+                dnd.init();
+    
+                return deferred.promise();
+            }
+        });
+    });
+    
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/filepaste',[
+        'base',
+        'mediator',
+        'runtime/client'
+    ], function( Base, Mediator, RuntimeClent ) {
+    
+        var $ = Base.$;
+    
+        function FilePaste( opts ) {
+            opts = this.options = $.extend({}, opts );
+            opts.container = $( opts.container || document.body );
+            RuntimeClent.call( this, 'FilePaste' );
+        }
+    
+        Base.inherits( RuntimeClent, {
+            constructor: FilePaste,
+    
+            init: function() {
+                var me = this;
+    
+                me.connectRuntime( me.options, function() {
+                    me.exec('init');
+                    me.trigger('ready');
+                });
+            },
+    
+            destroy: function() {
+                this.exec('destroy');
+                this.disconnectRuntime();
+                this.off();
+            }
+        });
+    
+        Mediator.installTo( FilePaste.prototype );
+    
+        return FilePaste;
+    });
+    /**
+     * @fileOverview 组件基类。
+     */
+    define('widgets/filepaste',[
+        'base',
+        'uploader',
+        'lib/filepaste',
+        'widgets/widget'
+    ], function( Base, Uploader, FilePaste ) {
+        var $ = Base.$;
+    
+        /**
+         * @property {Selector} [paste=undefined]  指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为`document.body`.
+         * @namespace options
+         * @for Uploader
+         */
+        return Uploader.register({
+            init: function( opts ) {
+    
+                if ( !opts.paste ||
+                        this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                var me = this,
+                    deferred = Base.Deferred(),
+                    options = $.extend({}, {
+                        container: opts.paste,
+                        accept: opts.accept
+                    }),
+                    paste;
+    
+                paste = new FilePaste( options );
+    
+                paste.once( 'ready', deferred.resolve );
+                paste.on( 'paste', function( files ) {
+                    me.owner.request( 'add-file', [ files ]);
+                });
+                paste.init();
+    
+                return deferred.promise();
+            }
+        });
+    });
+    /**
+     * @fileOverview Blob
+     */
+    define('lib/blob',[
+        'base',
+        'runtime/client'
+    ], function( Base, RuntimeClient ) {
+    
+        function Blob( ruid, source ) {
+            var me = this;
+    
+            me.source = source;
+            me.ruid = ruid;
+    
+            RuntimeClient.call( me, 'Blob' );
+    
+            this.uid = source.uid || this.uid;
+            this.type = source.type || '';
+            this.size = source.size || 0;
+    
+            if ( ruid ) {
+                me.connectRuntime( ruid );
+            }
+        }
+    
+        Base.inherits( RuntimeClient, {
+            constructor: Blob,
+    
+            slice: function( start, end ) {
+                return this.exec( 'slice', start, end );
+            },
+    
+            getSource: function() {
+                return this.source;
+            }
+        });
+    
+        return Blob;
+    });
+    /**
+     * 为了统一化Flash的File和HTML5的File而存在。
+     * 以至于要调用Flash里面的File，也可以像调用HTML5版本的File一下。
+     * @fileOverview File
+     */
+    define('lib/file',[
+        'base',
+        'lib/blob'
+    ], function( Base, Blob ) {
+    
+        var uid = 1,
+            rExt = /\.([^.]+)$/;
+    
+        function File( ruid, file ) {
+            var ext;
+    
+            Blob.apply( this, arguments );
+            this.name = file.name || ('untitled' + uid++);
+            ext = rExt.exec( file.name ) ? RegExp.$1.toLowerCase() : '';
+    
+            // todo 支持其他类型文件的转换。
+    
+            // 如果有mimetype, 但是文件名里面没有找出后缀规律
+            if ( !ext && this.type ) {
+                ext = /\/(jpg|jpeg|png|gif|bmp)$/i.exec( this.type ) ?
+                        RegExp.$1.toLowerCase() : '';
+                this.name += '.' + ext;
+            }
+    
+            // 如果没有指定mimetype, 但是知道文件后缀。
+            if ( !this.type &&  ~'jpg,jpeg,png,gif,bmp'.indexOf( ext ) ) {
+                this.type = 'image/' + (ext === 'jpg' ? 'jpeg' : ext);
+            }
+    
+            this.ext = ext;
+            this.lastModifiedDate = file.lastModifiedDate ||
+                    (new Date()).toLocaleString();
+        }
+    
+        return Base.inherits( Blob, File );
+    });
+    
+    /**
+     * @fileOverview 错误信息
+     */
+    define('lib/filepicker',[
+        'base',
+        'runtime/client',
+        'lib/file'
+    ], function( Base, RuntimeClent, File ) {
+    
+        var $ = Base.$;
+    
+        function FilePicker( opts ) {
+            opts = this.options = $.extend({}, FilePicker.options, opts );
+    
+            opts.container = $( opts.id );
+    
+            if ( !opts.container.length ) {
+                throw new Error('按钮指定错误');
+            }
+    
+            opts.innerHTML = opts.innerHTML || opts.label ||
+                    opts.container.html() || '';
+    
+            opts.button = $( opts.button || document.createElement('div') );
+            opts.button.html( opts.innerHTML );
+            opts.container.html( opts.button );
+    
+            RuntimeClent.call( this, 'FilePicker', true );
+        }
+    
+        FilePicker.options = {
+            button: null,
+            container: null,
+            label: null,
+            innerHTML: null,
+            multiple: true,
+            accept: null,
+            name: 'file'
+        };
+    
+        Base.inherits( RuntimeClent, {
+            constructor: FilePicker,
+    
+            init: function() {
+                var me = this,
+                    opts = me.options,
+                    button = opts.button;
+    
+                button.addClass('webuploader-pick');
+    
+                me.on( 'all', function( type ) {
+                    var files;
+    
+                    switch ( type ) {
+                        case 'mouseenter':
+                            button.addClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'mouseleave':
+                            button.removeClass('webuploader-pick-hover');
+                            break;
+    
+                        case 'change':
+                            files = me.exec('getFiles');
+                            me.trigger( 'select', $.map( files, function( file ) {
+                                file = new File( me.getRuid(), file );
+    
+                                // 记录来源。
+                                file._refer = opts.container;
+                                return file;
+                            }), opts.container );
+                            break;
+                    }
+                });
+    
+                me.connectRuntime( opts, function() {
+                    me.refresh();
+                    me.exec( 'init', opts );
+                    me.trigger('ready');
+                });
+    
+                $( window ).on( 'resize', function() {
+                    me.refresh();
+                });
+            },
+    
+            refresh: function() {
+                var shimContainer = this.getRuntime().getContainer(),
+                    button = this.options.button,
+                    width = button.outerWidth ?
+                            button.outerWidth() : button.width(),
+    
+                    height = button.outerHeight ?
+                            button.outerHeight() : button.height(),
+    
+                    pos = button.offset();
+    
+                width && height && shimContainer.css({
+                    bottom: 'auto',
+                    right: 'auto',
+                    width: width + 'px',
+                    height: height + 'px'
+                }).offset( pos );
+            },
+    
+            enable: function() {
+                var btn = this.options.button;
+    
+                btn.removeClass('webuploader-pick-disable');
+                this.refresh();
+            },
+    
+            disable: function() {
+                var btn = this.options.button;
+    
+                this.getRuntime().getContainer().css({
+                    top: '-99999px'
+                });
+    
+                btn.addClass('webuploader-pick-disable');
+            },
+    
+            destroy: function() {
+                if ( this.runtime ) {
+                    this.exec('destroy');
+                    this.disconnectRuntime();
+                }
+            }
+        });
+    
+        return FilePicker;
+    });
+    
+    /**
+     * @fileOverview 文件选择相关
+     */
+    define('widgets/filepicker',[
+        'base',
+        'uploader',
+        'lib/filepicker',
+        'widgets/widget'
+    ], function( Base, Uploader, FilePicker ) {
+        var $ = Base.$;
+    
+        $.extend( Uploader.options, {
+    
+            /**
+             * @property {Selector | Object} [pick=undefined]
+             * @namespace options
+             * @for Uploader
+             * @description 指定选择文件的按钮容器，不指定则不创建按钮。
+             *
+             * * `id` {Seletor} 指定选择文件的按钮容器，不指定则不创建按钮。
+             * * `label` {String} 请采用 `innerHTML` 代替
+             * * `innerHTML` {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
+             * * `multiple` {Boolean} 是否开起同时选择多个文件能力。
+             */
+            pick: null,
+    
+            /**
+             * @property {Arroy} [accept=null]
+             * @namespace options
+             * @for Uploader
+             * @description 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
+             *
+             * * `title` {String} 文字描述
+             * * `extensions` {String} 允许的文件后缀，不带点，多个用逗号分割。
+             * * `mimeTypes` {String} 多个用逗号分割。
+             *
+             * 如：
+             *
+             * ```
+             * {
+             *     title: 'Images',
+             *     extensions: 'gif,jpg,jpeg,bmp,png',
+             *     mimeTypes: 'image/*'
+             * }
+             * ```
+             */
+            accept: null/*{
+                title: 'Images',
+                extensions: 'gif,jpg,jpeg,bmp,png',
+                mimeTypes: 'image/*'
+            }*/
+        });
+    
+        return Uploader.register({
+            'add-btn': 'addButton',
+            refresh: 'refresh',
+            disable: 'disable',
+            enable: 'enable'
+        }, {
+    
+            init: function( opts ) {
+                this.pickers = [];
+                return opts.pick && this.addButton( opts.pick );
+            },
+    
+            refresh: function() {
+                $.each( this.pickers, function() {
+                    this.refresh();
+                });
+            },
+    
+            /**
+             * @method addButton
+             * @for Uploader
+             * @grammar addButton( pick ) => Promise
+             * @description
+             * 添加文件选择按钮，如果一个按钮不够，需要调用此方法来添加。参数跟[options.pick](#WebUploader:Uploader:options)一致。
+             * @example
+             * uploader.addButton({
+             *     id: '#btnContainer',
+             *     innerHTML: '选择文件'
+             * });
+             */
+            addButton: function( pick ) {
+                var me = this,
+                    opts = me.options,
+                    accept = opts.accept,
+                    options, picker, deferred;
+    
+                if ( !pick ) {
+                    return;
+                }
+    
+                deferred = Base.Deferred();
+                $.isPlainObject( pick ) || (pick = {
+                    id: pick
+                });
+    
+                options = $.extend({}, pick, {
+                    accept: $.isPlainObject( accept ) ? [ accept ] : accept,
+                    swf: opts.swf,
+                    runtimeOrder: opts.runtimeOrder
+                });
+    
+                picker = new FilePicker( options );
+    
+                picker.once( 'ready', deferred.resolve );
+                picker.on( 'select', function( files ) {
+                    me.owner.request( 'add-file', [ files ]);
+                });
+                picker.init();
+    
+                this.pickers.push( picker );
+    
+                return deferred.promise();
+            },
+    
+            disable: function() {
+                $.each( this.pickers, function() {
+                    this.disable();
+                });
+            },
+    
+            enable: function() {
+                $.each( this.pickers, function() {
+                    this.enable();
+                });
+            }
+        });
+    });
+    /**
+     * @fileOverview 文件属性封装
+     */
+    define('file',[
+        'base',
+        'mediator'
+    ], function( Base, Mediator ) {
+    
+        var $ = Base.$,
+            idPrefix = 'WU_FILE_',
+            idSuffix = 0,
+            rExt = /\.([^.]+)$/,
+            statusMap = {};
+    
+        function gid() {
+            return idPrefix + idSuffix++;
+        }
+    
+        /**
+         * 文件类
+         * @class File
+         * @constructor 构造函数
+         * @grammar new File( source ) => File
+         * @param {Lib.File} source [lib.File](#Lib.File)实例, 此source对象是带有Runtime信息的。
+         */
+        function WUFile( source ) {
+    
+            /**
+             * 文件名，包括扩展名（后缀）
+             * @property name
+             * @type {string}
+             */
+            this.name = source.name || 'Untitled';
+    
+            /**
+             * 文件体积（字节）
+             * @property size
+             * @type {uint}
+             * @default 0
+             */
+            this.size = source.size || 0;
+    
+            /**
+             * 文件MIMETYPE类型，与文件类型的对应关系请参考[http://t.cn/z8ZnFny](http://t.cn/z8ZnFny)
+             * @property type
+             * @type {string}
+             * @default 'application'
+             */
+            this.type = source.type || 'application';
+    
+            /**
+             * 文件最后修改日期
+             * @property lastModifiedDate
+             * @type {int}
+             * @default 当前时间戳
+             */
+            this.lastModifiedDate = source.lastModifiedDate || (new Date() * 1);
+    
+            /**
+             * 文件ID，每个对象具有唯一ID，与文件名无关
+             * @property id
+             * @type {string}
+             */
+            this.id = gid();
+    
+            /**
+             * 文件扩展名，通过文件名获取，例如test.png的扩展名为png
+             * @property ext
+             * @type {string}
+             */
+            this.ext = rExt.exec( this.name ) ? RegExp.$1 : '';
+    
+    
+            /**
+             * 状态文字说明。在不同的status语境下有不同的用途。
+             * @property statusText
+             * @type {string}
+             */
+            this.statusText = '';
+    
+            // 存储文件状态，防止通过属性直接修改
+            statusMap[ this.id ] = WUFile.Status.INITED;
+    
+            this.source = source;
+            this.loaded = 0;
+    
+            this.on( 'error', function( msg ) {
+                this.setStatus( WUFile.Status.ERROR, msg );
+            });
+        }
+    
+        $.extend( WUFile.prototype, {
+    
+            /**
+             * 设置状态，状态变化时会触发`change`事件。
+             * @method setStatus
+             * @grammar setStatus( status[, statusText] );
+             * @param {File.Status|String} status [文件状态值](#WebUploader:File:File.Status)
+             * @param {String} [statusText=''] 状态说明，常在error时使用，用http, abort,server等来标记是由于什么原因导致文件错误。
+             */
+            setStatus: function( status, text ) {
+    
+                var prevStatus = statusMap[ this.id ];
+    
+                typeof text !== 'undefined' && (this.statusText = text);
+    
+                if ( status !== prevStatus ) {
+                    statusMap[ this.id ] = status;
+                    /**
+                     * 文件状态变化
+                     * @event statuschange
+                     */
+                    this.trigger( 'statuschange', status, prevStatus );
+                }
+    
+            },
+    
+            /**
+             * 获取文件状态
+             * @return {File.Status}
+             * @example
+                     文件状态具体包括以下几种类型：
+                     {
+                         // 初始化
+                        INITED:     0,
+                        // 已入队列
+                        QUEUED:     1,
+                        // 正在上传
+                        PROGRESS:     2,
+                        // 上传出错
+                        ERROR:         3,
+                        // 上传成功
+                        COMPLETE:     4,
+                        // 上传取消
+                        CANCELLED:     5
+                    }
+             */
+            getStatus: function() {
+                return statusMap[ this.id ];
+            },
+    
+            /**
+             * 获取文件原始信息。
+             * @return {*}
+             */
+            getSource: function() {
+                return this.source;
+            },
+    
+            destory: function() {
+                delete statusMap[ this.id ];
+            }
+        });
+    
+        Mediator.installTo( WUFile.prototype );
+    
+        /**
+         * 文件状态值，具体包括以下几种类型：
+         * * `inited` 初始状态
+         * * `queued` 已经进入队列, 等待上传
+         * * `progress` 上传中
+         * * `complete` 上传完成。
+         * * `error` 上传出错，可重试
+         * * `interrupt` 上传中断，可续传。
+         * * `invalid` 文件不合格，不能重试上传。会自动从队列中移除。
+         * * `cancelled` 文件被移除。
+         * @property {Object} Status
+         * @namespace File
+         * @class File
+         * @static
+         */
+        WUFile.Status = {
+            INITED:     'inited',    // 初始状态
+            QUEUED:     'queued',    // 已经进入队列, 等待上传
+            PROGRESS:   'progress',    // 上传中
+            ERROR:      'error',    // 上传出错，可重试
+            COMPLETE:   'complete',    // 上传完成。
+            CANCELLED:  'cancelled',    // 上传取消。
+            INTERRUPT:  'interrupt',    // 上传中断，可续传。
+            INVALID:    'invalid'    // 文件不合格，不能重试上传。
+        };
+    
+        return WUFile;
+    });
+    
+    /**
+     * @fileOverview 文件队列
+     */
+    define('queue',[
+        'base',
+        'mediator',
+        'file'
+    ], function( Base, Mediator, WUFile ) {
+    
+        var $ = Base.$,
+            STATUS = WUFile.Status;
+    
+        /**
+         * 文件队列, 用来存储各个状态中的文件。
+         * @class Queue
+         * @extends Mediator
+         */
+        function Queue() {
+    
+            /**
+             * 统计文件数。
+             * * `numOfQueue` 队列中的文件数。
+             * * `numOfSuccess` 上传成功的文件数
+             * * `numOfCancel` 被移除的文件数
+             * * `numOfProgress` 正在上传中的文件数
+             * * `numOfUploadFailed` 上传错误的文件数。
+             * * `numOfInvalid` 无效的文件数。
+             * @property {Object} stats
+             */
+            this.stats = {
+                numOfQueue: 0,
+                numOfSuccess: 0,
+                numOfCancel: 0,
+                numOfProgress: 0,
+                numOfUploadFailed: 0,
+                numOfInvalid: 0
+            };
+    
+            // 上传队列，仅包括等待上传的文件
+            this._queue = [];
+    
+            // 存储所有文件
+            this._map = {};
+        }
+    
+        $.extend( Queue.prototype, {
+    
+            /**
+             * 将新文件加入对队列尾部
+             *
+             * @method append
+             * @param  {File} file   文件对象
+             */
+            append: function( file ) {
+                this._queue.push( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 将新文件加入对队列头部
+             *
+             * @method prepend
+             * @param  {File} file   文件对象
+             */
+            prepend: function( file ) {
+                this._queue.unshift( file );
+                this._fileAdded( file );
+                return this;
+            },
+    
+            /**
+             * 获取文件对象
+             *
+             * @method getFile
+             * @param  {String} fileId   文件ID
+             * @return {File}
+             */
+            getFile: function( fileId ) {
+                if ( typeof fileId !== 'string' ) {
+                    return fileId;
+                }
+                return this._map[ fileId ];
+            },
+    
+            /**
+             * 从队列中取出一个指定状态的文件。
+             * @grammar fetch( status ) => File
+             * @method fetch
+             * @param {String} status [文件状态值](#WebUploader:File:File.Status)
+             * @return {File} [File](#WebUploader:File)
+             */
+            fetch: function( status ) {
+                var len = this._queue.length,
+                    i, file;
+    
+                status = status || STATUS.QUEUED;
+    
+                for ( i = 0; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( status === file.getStatus() ) {
+                        return file;
+                    }
+                }
+    
+                return null;
+            },
+    
+            /**
+             * 对队列进行排序，能够控制文件上传顺序。
+             * @grammar sort( fn ) => undefined
+             * @method sort
+             * @param {Function} fn 排序方法
+             */
+            sort: function( fn ) {
+                if ( typeof fn === 'function' ) {
+                    this._queue.sort( fn );
+                }
+            },
+    
+            /**
+             * 获取指定类型的文件列表, 列表中每一个成员为[File](#WebUploader:File)对象。
+             * @grammar getFiles( [status1[, status2 ...]] ) => Array
+             * @method getFiles
+             * @param {String} [status] [文件状态值](#WebUploader:File:File.Status)
+             */
+            getFiles: function() {
+                var sts = [].slice.call( arguments, 0 ),
+                    ret = [],
+                    i = 0,
+                    len = this._queue.length,
+                    file;
+    
+                for ( ; i < len; i++ ) {
+                    file = this._queue[ i ];
+    
+                    if ( sts.length && !~$.inArray( file.getStatus(), sts ) ) {
+                        continue;
+                    }
+    
+                    ret.push( file );
+                }
+    
+                return ret;
+            },
+    
+            _fileAdded: function( file ) {
+                var me = this,
+                    existing = this._map[ file.id ];
+    
+                if ( !existing ) {
+                    this._map[ file.id ] = file;
+    
+                    file.on( 'statuschange', function( cur, pre ) {
+                        me._onFileStatusChange( cur, pre );
+                    });
+                }
+    
+                file.setStatus( STATUS.QUEUED );
+            },
+    
+            _onFileStatusChange: function( curStatus, preStatus ) {
+                var stats = this.stats;
+    
+                switch ( preStatus ) {
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress--;
+                        break;
+    
+                    case STATUS.QUEUED:
+                        stats.numOfQueue --;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed--;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid--;
+                        break;
+                }
+    
+                switch ( curStatus ) {
+                    case STATUS.QUEUED:
+                        stats.numOfQueue++;
+                        break;
+    
+                    case STATUS.PROGRESS:
+                        stats.numOfProgress++;
+                        break;
+    
+                    case STATUS.ERROR:
+                        stats.numOfUploadFailed++;
+                        break;
+    
+                    case STATUS.COMPLETE:
+                        stats.numOfSuccess++;
+                        break;
+    
+                    case STATUS.CANCELLED:
+                        stats.numOfCancel++;
+                        break;
+    
+                    case STATUS.INVALID:
+                        stats.numOfInvalid++;
+                        break;
+                }
+            }
+    
+        });
+    
+        Mediator.installTo( Queue.prototype );
+    
+        return Queue;
+    });
+    /**
+     * @fileOverview 队列
+     */
+    define('widgets/queue',[
+        'base',
+        'uploader',
+        'queue',
+        'file',
+        'lib/file',
+        'runtime/client',
+        'widgets/widget'
+    ], function( Base, Uploader, Queue, WUFile, File, RuntimeClient ) {
+    
+        var $ = Base.$,
+            rExt = /\.\w+$/,
+            Status = WUFile.Status;
+    
+        return Uploader.register({
+            'sort-files': 'sortFiles',
+            'add-file': 'addFiles',
+            'get-file': 'getFile',
+            'fetch-file': 'fetchFile',
+            'get-stats': 'getStats',
+            'get-files': 'getFiles',
+            'remove-file': 'removeFile',
+            'retry': 'retry',
+            'reset': 'reset',
+            'accept-file': 'acceptFile'
+        }, {
+    
+            init: function( opts ) {
+                var me = this,
+                    deferred, len, i, item, arr, accept, runtime;
+    
+                if ( $.isPlainObject( opts.accept ) ) {
+                    opts.accept = [ opts.accept ];
+                }
+    
+                // accept中的中生成匹配正则。
+                if ( opts.accept ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        item = opts.accept[ i ].extensions;
+                        item && arr.push( item );
+                    }
+    
+                    if ( arr.length ) {
+                        accept = '\\.' + arr.join(',')
+                                .replace( /,/g, '$|\\.' )
+                                .replace( /\*/g, '.*' ) + '$';
+                    }
+    
+                    me.accept = new RegExp( accept, 'i' );
+                }
+    
+                me.queue = new Queue();
+                me.stats = me.queue.stats;
+    
+                // 如果当前不是html5运行时，那就算了。
+                // 不执行后续操作
+                if ( this.request('predict-runtime-type') !== 'html5' ) {
+                    return;
+                }
+    
+                // 创建一个 html5 运行时的 placeholder
+                // 以至于外部添加原生 File 对象的时候能正确包裹一下供 webuploader 使用。
+                deferred = Base.Deferred();
+                runtime = new RuntimeClient('Placeholder');
+                runtime.connectRuntime({
+                    runtimeOrder: 'html5'
+                }, function() {
+                    me._ruid = runtime.getRuid();
+                    deferred.resolve();
+                });
+                return deferred.promise();
+            },
+    
+    
+            // 为了支持外部直接添加一个原生File对象。
+            _wrapFile: function( file ) {
+                if ( !(file instanceof WUFile) ) {
+    
+                    if ( !(file instanceof File) ) {
+                        if ( !this._ruid ) {
+                            throw new Error('Can\'t add external files.');
+                        }
+                        file = new File( this._ruid, file );
+                    }
+    
+                    file = new WUFile( file );
+                }
+    
+                return file;
+            },
+    
+            // 判断文件是否可以被加入队列
+            acceptFile: function( file ) {
+                var invalid = !file || file.size < 6 || this.accept &&
+    
+                        // 如果名字中有后缀，才做后缀白名单处理。
+                        rExt.exec( file.name ) && !this.accept.test( file.name );
+    
+                return !invalid;
+            },
+    
+    
+            /**
+             * @event beforeFileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列之前触发，此事件的handler返回值为`false`，则此文件不会被添加进入队列。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event fileQueued
+             * @param {File} file File对象
+             * @description 当文件被加入队列以后触发。
+             * @for  Uploader
+             */
+    
+            _addFile: function( file ) {
+                var me = this;
+    
+                file = me._wrapFile( file );
+    
+                // 不过类型判断允许不允许，先派送 `beforeFileQueued`
+                if ( !me.owner.trigger( 'beforeFileQueued', file ) ) {
+                    return;
+                }
+    
+                // 类型不匹配，则派送错误事件，并返回。
+                if ( !me.acceptFile( file ) ) {
+                    me.owner.trigger( 'error', 'Q_TYPE_DENIED', file );
+                    return;
+                }
+    
+                me.queue.append( file );
+                me.owner.trigger( 'fileQueued', file );
+                return file;
+            },
+    
+            getFile: function( fileId ) {
+                return this.queue.getFile( fileId );
+            },
+    
+            /**
+             * @event filesQueued
+             * @param {File} files 数组，内容为原始File(lib/File）对象。
+             * @description 当一批文件添加进队列以后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method addFiles
+             * @grammar addFiles( file ) => undefined
+             * @grammar addFiles( [file1, file2 ...] ) => undefined
+             * @param {Array of File or File} [files] Files 对象 数组
+             * @description 添加文件到队列
+             * @for  Uploader
+             */
+            addFiles: function( files ) {
+                var me = this;
+    
+                if ( !files.length ) {
+                    files = [ files ];
+                }
+    
+                files = $.map( files, function( file ) {
+                    return me._addFile( file );
+                });
+    
+                me.owner.trigger( 'filesQueued', files );
+    
+                if ( me.options.auto ) {
+                    me.request('start-upload');
+                }
+            },
+    
+            getStats: function() {
+                return this.stats;
+            },
+    
+            /**
+             * @event fileDequeued
+             * @param {File} file File对象
+             * @description 当文件被移除队列后触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @method removeFile
+             * @grammar removeFile( file ) => undefined
+             * @grammar removeFile( id ) => undefined
+             * @param {File|id} file File对象或这File对象的id
+             * @description 移除某一文件。
+             * @for  Uploader
+             * @example
+             *
+             * $li.on('click', '.remove-this', function() {
+             *     uploader.removeFile( file );
+             * })
+             */
+            removeFile: function( file ) {
+                var me = this;
+    
+                file = file.id ? file : me.queue.getFile( file );
+    
+                file.setStatus( Status.CANCELLED );
+                me.owner.trigger( 'fileDequeued', file );
+            },
+    
+            /**
+             * @method getFiles
+             * @grammar getFiles() => Array
+             * @grammar getFiles( status1, status2, status... ) => Array
+             * @description 返回指定状态的文件集合，不传参数将返回所有状态的文件。
+             * @for  Uploader
+             * @example
+             * console.log( uploader.getFiles() );    // => all files
+             * console.log( uploader.getFiles('error') )    // => all error files.
+             */
+            getFiles: function() {
+                return this.queue.getFiles.apply( this.queue, arguments );
+            },
+    
+            fetchFile: function() {
+                return this.queue.fetch.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method retry
+             * @grammar retry() => undefined
+             * @grammar retry( file ) => undefined
+             * @description 重试上传，重试指定文件，或者从出错的文件开始重新上传。
+             * @for  Uploader
+             * @example
+             * function retry() {
+             *     uploader.retry();
+             * }
+             */
+            retry: function( file, noForceStart ) {
+                var me = this,
+                    files, i, len;
+    
+                if ( file ) {
+                    file = file.id ? file : me.queue.getFile( file );
+                    file.setStatus( Status.QUEUED );
+                    noForceStart || me.request('start-upload');
+                    return;
+                }
+    
+                files = me.queue.getFiles( Status.ERROR );
+                i = 0;
+                len = files.length;
+    
+                for ( ; i < len; i++ ) {
+                    file = files[ i ];
+                    file.setStatus( Status.QUEUED );
+                }
+    
+                me.request('start-upload');
+            },
+    
+            /**
+             * @method sort
+             * @grammar sort( fn ) => undefined
+             * @description 排序队列中的文件，在上传之前调整可以控制上传顺序。
+             * @for  Uploader
+             */
+            sortFiles: function() {
+                return this.queue.sort.apply( this.queue, arguments );
+            },
+    
+            /**
+             * @method reset
+             * @grammar reset() => undefined
+             * @description 重置uploader。目前只重置了队列。
+             * @for  Uploader
+             * @example
+             * uploader.reset();
+             */
+            reset: function() {
+                this.queue = new Queue();
+                this.stats = this.queue.stats;
+            }
+        });
+    
+    });
+    /**
+     * @fileOverview 添加获取Runtime相关信息的方法。
+     */
+    define('widgets/runtime',[
+        'uploader',
+        'runtime/runtime',
+        'widgets/widget'
+    ], function( Uploader, Runtime ) {
+    
+        Uploader.support = function() {
+            return Runtime.hasRuntime.apply( Runtime, arguments );
+        };
+    
+        return Uploader.register({
+            'predict-runtime-type': 'predictRuntmeType'
+        }, {
+    
+            init: function() {
+                if ( !this.predictRuntmeType() ) {
+                    throw Error('Runtime Error');
+                }
+            },
+    
+            /**
+             * 预测Uploader将采用哪个`Runtime`
+             * @grammar predictRuntmeType() => String
+             * @method predictRuntmeType
+             * @for  Uploader
+             */
+            predictRuntmeType: function() {
+                var orders = this.options.runtimeOrder || Runtime.orders,
+                    type = this.type,
+                    i, len;
+    
+                if ( !type ) {
+                    orders = orders.split( /\s*,\s*/g );
+    
+                    for ( i = 0, len = orders.length; i < len; i++ ) {
+                        if ( Runtime.hasRuntime( orders[ i ] ) ) {
+                            this.type = type = orders[ i ];
+                            break;
+                        }
+                    }
+                }
+    
+                return type;
+            }
+        });
+    });
+    /**
+     * @fileOverview Transport
+     */
+    define('lib/transport',[
+        'base',
+        'runtime/client',
+        'mediator'
+    ], function( Base, RuntimeClient, Mediator ) {
+    
+        var $ = Base.$;
+    
+        function Transport( opts ) {
+            var me = this;
+    
+            opts = me.options = $.extend( true, {}, Transport.options, opts || {} );
+            RuntimeClient.call( this, 'Transport' );
+    
+            this._blob = null;
+            this._formData = opts.formData || {};
+            this._headers = opts.headers || {};
+    
+            this.on( 'progress', this._timeout );
+            this.on( 'load error', function() {
+                me.trigger( 'progress', 1 );
+                clearTimeout( me._timer );
+            });
+        }
+    
+        Transport.options = {
+            server: '',
+            method: 'POST',
+    
+            // 跨域时，是否允许携带cookie, 只有html5 runtime才有效
+            withCredentials: false,
+            fileVal: 'file',
+            timeout: 2 * 60 * 1000,    // 2分钟
+            formData: {},
+            headers: {},
+            sendAsBinary: false
+        };
+    
+        $.extend( Transport.prototype, {
+    
+            // 添加Blob, 只能添加一次，最后一次有效。
+            appendBlob: function( key, blob, filename ) {
+                var me = this,
+                    opts = me.options;
+    
+                if ( me.getRuid() ) {
+                    me.disconnectRuntime();
+                }
+    
+                // 连接到blob归属的同一个runtime.
+                me.connectRuntime( blob.ruid, function() {
+                    me.exec('init');
+                });
+    
+                me._blob = blob;
+                opts.fileVal = key || opts.fileVal;
+                opts.filename = filename || opts.filename;
+            },
+    
+            // 添加其他字段
+            append: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._formData, key );
+                } else {
+                    this._formData[ key ] = value;
+                }
+            },
+    
+            setRequestHeader: function( key, value ) {
+                if ( typeof key === 'object' ) {
+                    $.extend( this._headers, key );
+                } else {
+                    this._headers[ key ] = value;
+                }
+            },
+    
+            send: function( method ) {
+                this.exec( 'send', method );
+                this._timeout();
+            },
+    
+            abort: function() {
+                clearTimeout( this._timer );
+                return this.exec('abort');
+            },
+    
+            destroy: function() {
+                this.trigger('destroy');
+                this.off();
+                this.exec('destroy');
+                this.disconnectRuntime();
+            },
+    
+            getResponse: function() {
+                return this.exec('getResponse');
+            },
+    
+            getResponseAsJson: function() {
+                return this.exec('getResponseAsJson');
+            },
+    
+            getStatus: function() {
+                return this.exec('getStatus');
+            },
+    
+            _timeout: function() {
+                var me = this,
+                    duration = me.options.timeout;
+    
+                if ( !duration ) {
+                    return;
+                }
+    
+                clearTimeout( me._timer );
+                me._timer = setTimeout(function() {
+                    me.abort();
+                    me.trigger( 'error', 'timeout' );
+                }, duration );
+            }
+    
+        });
+    
+        // 让Transport具备事件功能。
+        Mediator.installTo( Transport.prototype );
+    
+        return Transport;
+    });
+    /**
+     * @fileOverview 负责文件上传相关。
+     */
+    define('widgets/upload',[
+        'base',
+        'uploader',
+        'file',
+        'lib/transport',
+        'widgets/widget'
+    ], function( Base, Uploader, WUFile, Transport ) {
+    
+        var $ = Base.$,
+            isPromise = Base.isPromise,
+            Status = WUFile.Status;
+    
+        // 添加默认配置项
+        $.extend( Uploader.options, {
+    
+    
+            /**
+             * @property {Boolean} [prepareNextFile=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否允许在文件传输时提前把下一个文件准备好。
+             * 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。
+             * 如果能提前在当前文件传输期处理，可以节省总体耗时。
+             */
+            prepareNextFile: false,
+    
+            /**
+             * @property {Boolean} [chunked=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否要分片处理大文件上传。
+             */
+            chunked: false,
+    
+            /**
+             * @property {Boolean} [chunkSize=5242880]
+             * @namespace options
+             * @for Uploader
+             * @description 如果要分片，分多大一片？ 默认大小为5M.
+             */
+            chunkSize: 5 * 1024 * 1024,
+    
+            /**
+             * @property {Boolean} [chunkRetry=2]
+             * @namespace options
+             * @for Uploader
+             * @description 如果某个分片由于网络问题出错，允许自动重传多少次？
+             */
+            chunkRetry: 2,
+    
+            /**
+             * @property {Boolean} [threads=3]
+             * @namespace options
+             * @for Uploader
+             * @description 上传并发数。允许同时最大上传进程数。
+             */
+            threads: 3,
+    
+    
+            /**
+             * @property {Object} [formData]
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传请求的参数表，每次发送都会发送此对象中的参数。
+             */
+            formData: null
+    
+            /**
+             * @property {Object} [fileVal='file']
+             * @namespace options
+             * @for Uploader
+             * @description 设置文件上传域的name。
+             */
+    
+            /**
+             * @property {Object} [method='POST']
+             * @namespace options
+             * @for Uploader
+             * @description 文件上传方式，`POST`或者`GET`。
+             */
+    
+            /**
+             * @property {Object} [sendAsBinary=false]
+             * @namespace options
+             * @for Uploader
+             * @description 是否已二进制的流的方式发送文件，这样整个上传内容`php://input`都为文件内容，
+             * 其他参数在$_GET数组中。
+             */
+        });
+    
+        // 负责将文件切片。
+        function CuteFile( file, chunkSize ) {
+            var pending = [],
+                blob = file.source,
+                total = blob.size,
+                chunks = chunkSize ? Math.ceil( total / chunkSize ) : 1,
+                start = 0,
+                index = 0,
+                len;
+    
+            while ( index < chunks ) {
+                len = Math.min( chunkSize, total - start );
+    
+                pending.push({
+                    file: file,
+                    start: start,
+                    end: chunkSize ? (start + len) : total,
+                    total: total,
+                    chunks: chunks,
+                    chunk: index++
+                });
+                start += len;
+            }
+    
+            file.blocks = pending.concat();
+            file.remaning = pending.length;
+    
+            return {
+                file: file,
+    
+                has: function() {
+                    return !!pending.length;
+                },
+    
+                fetch: function() {
+                    return pending.shift();
+                }
+            };
+        }
+    
+        Uploader.register({
+            'start-upload': 'start',
+            'stop-upload': 'stop',
+            'skip-file': 'skipFile',
+            'is-in-progress': 'isInProgress'
+        }, {
+    
+            init: function() {
+                var owner = this.owner;
+    
+                this.runing = false;
+    
+                // 记录当前正在传的数据，跟threads相关
+                this.pool = [];
+    
+                // 缓存即将上传的文件。
+                this.pending = [];
+    
+                // 跟踪还有多少分片没有完成上传。
+                this.remaning = 0;
+                this.__tick = Base.bindFn( this._tick, this );
+    
+                owner.on( 'uploadComplete', function( file ) {
+                    // 把其他块取消了。
+                    file.blocks && $.each( file.blocks, function( _, v ) {
+                        v.transport && (v.transport.abort(), v.transport.destroy());
+                        delete v.transport;
+                    });
+    
+                    delete file.blocks;
+                    delete file.remaning;
+                });
+            },
+    
+            /**
+             * @event startUpload
+             * @description 当开始上传流程时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。
+             * @grammar upload() => undefined
+             * @method upload
+             * @for  Uploader
+             */
+            start: function() {
+                var me = this;
+    
+                // 移出invalid的文件
+                $.each( me.request( 'get-files', Status.INVALID ), function() {
+                    me.request( 'remove-file', this );
+                });
+    
+                if ( me.runing ) {
+                    return;
+                }
+    
+                me.runing = true;
+    
+                // 如果有暂停的，则续传
+                $.each( me.pool, function( _, v ) {
+                    var file = v.file;
+    
+                    if ( file.getStatus() === Status.INTERRUPT ) {
+                        file.setStatus( Status.PROGRESS );
+                        me._trigged = false;
+                        v.transport && v.transport.send();
+                    }
+                });
+    
+                me._trigged = false;
+                me.owner.trigger('startUpload');
+                Base.nextTick( me.__tick );
+            },
+    
+            /**
+             * @event stopUpload
+             * @description 当开始上传流程暂停时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * 暂停上传。第一个参数为是否中断上传当前正在上传的文件。
+             * @grammar stop() => undefined
+             * @grammar stop( true ) => undefined
+             * @method stop
+             * @for  Uploader
+             */
+            stop: function( interrupt ) {
+                var me = this;
+    
+                if ( me.runing === false ) {
+                    return;
+                }
+    
+                me.runing = false;
+    
+                interrupt && $.each( me.pool, function( _, v ) {
+                    v.transport && v.transport.abort();
+                    v.file.setStatus( Status.INTERRUPT );
+                });
+    
+                me.owner.trigger('stopUpload');
+            },
+    
+            /**
+             * 判断`Uplaode`r是否正在上传中。
+             * @grammar isInProgress() => Boolean
+             * @method isInProgress
+             * @for  Uploader
+             */
+            isInProgress: function() {
+                return !!this.runing;
+            },
+    
+            getStats: function() {
+                return this.request('get-stats');
+            },
+    
+            /**
+             * 掉过一个文件上传，直接标记指定文件为已上传状态。
+             * @grammar skipFile( file ) => undefined
+             * @method skipFile
+             * @for  Uploader
+             */
+            skipFile: function( file, status ) {
+                file = this.request( 'get-file', file );
+    
+                file.setStatus( status || Status.COMPLETE );
+                file.skipped = true;
+    
+                // 如果正在上传。
+                file.blocks && $.each( file.blocks, function( _, v ) {
+                    var _tr = v.transport;
+    
+                    if ( _tr ) {
+                        _tr.abort();
+                        _tr.destroy();
+                        delete v.transport;
+                    }
+                });
+    
+                this.owner.trigger( 'uploadSkip', file );
+            },
+    
+            /**
+             * @event uploadFinished
+             * @description 当所有文件上传结束时触发。
+             * @for  Uploader
+             */
+            _tick: function() {
+                var me = this,
+                    opts = me.options,
+                    fn, val;
+    
+                // 上一个promise还没有结束，则等待完成后再执行。
+                if ( me._promise ) {
+                    return me._promise.always( me.__tick );
+                }
+    
+                // 还有位置，且还有文件要处理的话。
+                if ( me.pool.length < opts.threads && (val = me._nextBlock()) ) {
+                    me._trigged = false;
+    
+                    fn = function( val ) {
+                        me._promise = null;
+    
+                        // 有可能是reject过来的，所以要检测val的类型。
+                        val && val.file && me._startSend( val );
+                        Base.nextTick( me.__tick );
+                    };
+    
+                    me._promise = isPromise( val ) ? val.always( fn ) : fn( val );
+    
+                // 没有要上传的了，且没有正在传输的了。
+                } else if ( !me.remaning && !me.getStats().numOfQueue ) {
+                    me.runing = false;
+    
+                    me._trigged || Base.nextTick(function() {
+                        me.owner.trigger('uploadFinished');
+                    });
+                    me._trigged = true;
+                }
+            },
+    
+            _nextBlock: function() {
+                var me = this,
+                    act = me._act,
+                    opts = me.options,
+                    next, done;
+    
+                // 如果当前文件还有没有需要传输的，则直接返回剩下的。
+                if ( act && act.has() &&
+                        act.file.getStatus() === Status.PROGRESS ) {
+    
+                    // 是否提前准备下一个文件
+                    if ( opts.prepareNextFile && !me.pending.length ) {
+                        me._prepareNextFile();
+                    }
+    
+                    return act.fetch();
+    
+                // 否则，如果正在运行，则准备下一个文件，并等待完成后返回下个分片。
+                } else if ( me.runing ) {
+    
+                    // 如果缓存中有，则直接在缓存中取，没有则去queue中取。
+                    if ( !me.pending.length && me.getStats().numOfQueue ) {
+                        me._prepareNextFile();
+                    }
+    
+                    next = me.pending.shift();
+                    done = function( file ) {
+                        if ( !file ) {
+                            return null;
+                        }
+    
+                        act = CuteFile( file, opts.chunked ? opts.chunkSize : 0 );
+                        me._act = act;
+                        return act.fetch();
+                    };
+    
+                    // 文件可能还在prepare中，也有可能已经完全准备好了。
+                    return isPromise( next ) ?
+                            next[ next.pipe ? 'pipe' : 'then']( done ) :
+                            done( next );
+                }
+            },
+    
+    
+            /**
+             * @event uploadStart
+             * @param {File} file File对象
+             * @description 某个文件开始上传前触发，一个文件只会触发一次。
+             * @for  Uploader
+             */
+            _prepareNextFile: function() {
+                var me = this,
+                    file = me.request('fetch-file'),
+                    pending = me.pending,
+                    promise;
+    
+                if ( file ) {
+                    promise = me.request( 'before-send-file', file, function() {
+    
+                        // 有可能文件被skip掉了。文件被skip掉后，状态坑定不是Queued.
+                        if ( file.getStatus() === Status.QUEUED ) {
+                            me.owner.trigger( 'uploadStart', file );
+                            file.setStatus( Status.PROGRESS );
+                            return file;
+                        }
+    
+                        return me._finishFile( file );
+                    });
+    
+                    // 如果还在pending中，则替换成文件本身。
+                    promise.done(function() {
+                        var idx = $.inArray( promise, pending );
+    
+                        ~idx && pending.splice( idx, 1, file );
+                    });
+    
+                    // befeore-send-file的钩子就有错误发生。
+                    promise.fail(function( reason ) {
+                        file.setStatus( Status.ERROR, reason );
+                        me.owner.trigger( 'uploadError', file, reason );
+                        me.owner.trigger( 'uploadComplete', file );
+                    });
+    
+                    pending.push( promise );
+                }
+            },
+    
+            // 让出位置了，可以让其他分片开始上传
+            _popBlock: function( block ) {
+                var idx = $.inArray( block, this.pool );
+    
+                this.pool.splice( idx, 1 );
+                block.file.remaning--;
+                this.remaning--;
+            },
+    
+            // 开始上传，可以被掉过。如果promise被reject了，则表示跳过此分片。
+            _startSend: function( block ) {
+                var me = this,
+                    file = block.file,
+                    promise;
+    
+                me.pool.push( block );
+                me.remaning++;
+    
+                // 如果没有分片，则直接使用原始的。
+                // 不会丢失content-type信息。
+                block.blob = block.chunks === 1 ? file.source :
+                        file.source.slice( block.start, block.end );
+    
+                // hook, 每个分片发送之前可能要做些异步的事情。
+                promise = me.request( 'before-send', block, function() {
+    
+                    // 有可能文件已经上传出错了，所以不需要再传输了。
+                    if ( file.getStatus() === Status.PROGRESS ) {
+                        me._doSend( block );
+                    } else {
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+    
+                // 如果为fail了，则跳过此分片。
+                promise.fail(function() {
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file ).always(function() {
+                            block.percentage = 1;
+                            me._popBlock( block );
+                            me.owner.trigger( 'uploadComplete', file );
+                            Base.nextTick( me.__tick );
+                        });
+                    } else {
+                        block.percentage = 1;
+                        me._popBlock( block );
+                        Base.nextTick( me.__tick );
+                    }
+                });
+            },
+    
+    
+            /**
+             * @event uploadBeforeSend
+             * @param {Object} object
+             * @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数。
+             * @description 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadAccept
+             * @param {Object} object
+             * @param {Object} ret 服务端的返回数据，json格式，如果服务端不是json格式，从ret._raw中取数据，自行解析。
+             * @description 当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为`false`, 则此文件将派送`server`类型的`uploadError`事件。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadProgress
+             * @param {File} file File对象
+             * @param {Number} percentage 上传进度
+             * @description 上传过程中触发，携带上传进度。
+             * @for  Uploader
+             */
+    
+    
+            /**
+             * @event uploadError
+             * @param {File} file File对象
+             * @param {String} reason 出错的code
+             * @description 当文件上传出错时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadSuccess
+             * @param {File} file File对象
+             * @param {Object} response 服务端返回的数据
+             * @description 当文件上传成功时触发。
+             * @for  Uploader
+             */
+    
+            /**
+             * @event uploadComplete
+             * @param {File} [file] File对象
+             * @description 不管成功或者失败，文件上传完成时触发。
+             * @for  Uploader
+             */
+    
+            // 做上传操作。
+            _doSend: function( block ) {
+                var me = this,
+                    owner = me.owner,
+                    opts = me.options,
+                    file = block.file,
+                    tr = new Transport( opts ),
+                    data = $.extend({}, opts.formData ),
+                    headers = $.extend({}, opts.headers ),
+                    requestAccept, ret;
+    
+                block.transport = tr;
+    
+                tr.on( 'destroy', function() {
+                    delete block.transport;
+                    me._popBlock( block );
+                    Base.nextTick( me.__tick );
+                });
+    
+                // 广播上传进度。以文件为单位。
+                tr.on( 'progress', function( percentage ) {
+                    var totalPercent = 0,
+                        uploaded = 0;
+    
+                    // 可能没有abort掉，progress还是执行进来了。
+                    // if ( !file.blocks ) {
+                    //     return;
+                    // }
+    
+                    totalPercent = block.percentage = percentage;
+    
+                    if ( block.chunks > 1 ) {    // 计算文件的整体速度。
+                        $.each( file.blocks, function( _, v ) {
+                            uploaded += (v.percentage || 0) * (v.end - v.start);
+                        });
+    
+                        totalPercent = uploaded / file.size;
+                    }
+    
+                    owner.trigger( 'uploadProgress', file, totalPercent || 0 );
+                });
+    
+                // 用来询问，是否返回的结果是有错误的。
+                requestAccept = function( reject ) {
+                    var fn;
+    
+                    ret = tr.getResponseAsJson() || {};
+                    ret._raw = tr.getResponse();
+                    fn = function( value ) {
+                        reject = value;
+                    };
+    
+                    // 服务端响应了，不代表成功了，询问是否响应正确。
+                    if ( !owner.trigger( 'uploadAccept', block, ret, fn ) ) {
+                        reject = reject || 'server';
+                    }
+    
+                    return reject;
+                };
+    
+                // 尝试重试，然后广播文件上传出错。
+                tr.on( 'error', function( type, flag ) {
+                    block.retried = block.retried || 0;
+    
+                    // 自动重试
+                    if ( block.chunks > 1 && ~'http,abort'.indexOf( type ) &&
+                            block.retried < opts.chunkRetry ) {
+    
+                        block.retried++;
+                        tr.send();
+    
+                    } else {
+    
+                        // http status 500 ~ 600
+                        if ( !flag && type === 'server' ) {
+                            type = requestAccept( type );
+                        }
+    
+                        file.setStatus( Status.ERROR, type );
+                        owner.trigger( 'uploadError', file, type );
+                        owner.trigger( 'uploadComplete', file );
+                    }
+                });
+    
+                // 上传成功
+                tr.on( 'load', function() {
+                    var reason;
+    
+                    // 如果非预期，转向上传出错。
+                    if ( (reason = requestAccept()) ) {
+                        tr.trigger( 'error', reason, true );
+                        return;
+                    }
+    
+                    // 全部上传完成。
+                    if ( file.remaning === 1 ) {
+                        me._finishFile( file, ret );
+                    } else {
+                        tr.destroy();
+                    }
+                });
+    
+                // 配置默认的上传字段。
+                data = $.extend( data, {
+                    id: file.id,
+                    name: file.name,
+                    type: file.type,
+                    lastModifiedDate: file.lastModifiedDate,
+                    size: file.size
+                });
+    
+                block.chunks > 1 && $.extend( data, {
+                    chunks: block.chunks,
+                    chunk: block.chunk
+                });
+    
+                // 在发送之间可以添加字段什么的。。。
+                // 如果默认的字段不够使用，可以通过监听此事件来扩展
+                owner.trigger( 'uploadBeforeSend', block, data, headers );
+    
+                // 开始发送。
+                tr.appendBlob( opts.fileVal, block.blob, file.name );
+                tr.append( data );
+                tr.setRequestHeader( headers );
+                tr.send();
+            },
+    
+            // 完成上传。
+            _finishFile: function( file, ret, hds ) {
+                var owner = this.owner;
+    
+                return owner
+                        .request( 'after-send-file', arguments, function() {
+                            file.setStatus( Status.COMPLETE );
+                            owner.trigger( 'uploadSuccess', file, ret, hds );
+                        })
+                        .fail(function( reason ) {
+    
+                            // 如果外部已经标记为invalid什么的，不再改状态。
+                            if ( file.getStatus() === Status.PROGRESS ) {
+                                file.setStatus( Status.ERROR, reason );
+                            }
+    
+                            owner.trigger( 'uploadError', file, reason );
+                        })
+                        .always(function() {
+                            owner.trigger( 'uploadComplete', file );
+                        });
+            }
+    
+        });
+    });
+    /**
+     * @fileOverview 各种验证，包括文件总大小是否超出、单文件是否超出和文件是否重复。
+     */
+    
+    define('widgets/validator',[
+        'base',
+        'uploader',
+        'file',
+        'widgets/widget'
+    ], function( Base, Uploader, WUFile ) {
+    
+        var $ = Base.$,
+            validators = {},
+            api;
+    
+        /**
+         * @event error
+         * @param {String} type 错误类型。
+         * @description 当validate不通过时，会以派送错误事件的形式通知调用者。通过`upload.on('error', handler)`可以捕获到此类错误，目前有以下错误会在特定的情况下派送错来。
+         *
+         * * `Q_EXCEED_NUM_LIMIT` 在设置了`fileNumLimit`且尝试给`uploader`添加的文件数量超出这个值时派送。
+         * * `Q_EXCEED_SIZE_LIMIT` 在设置了`Q_EXCEED_SIZE_LIMIT`且尝试给`uploader`添加的文件总大小超出这个值时派送。
+         * @for  Uploader
+         */
+    
+        // 暴露给外面的api
+        api = {
+    
+            // 添加验证器
+            addValidator: function( type, cb ) {
+                validators[ type ] = cb;
+            },
+    
+            // 移除验证器
+            removeValidator: function( type ) {
+                delete validators[ type ];
+            }
+        };
+    
+        // 在Uploader初始化的时候启动Validators的初始化
+        Uploader.register({
+            init: function() {
+                var me = this;
+                $.each( validators, function() {
+                    this.call( me.owner );
+                });
+            }
+        });
+    
+        /**
+         * @property {int} [fileNumLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证文件总数量, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileNumLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                count = 0,
+                max = opts.fileNumLimit >> 0,
+                flag = true;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+    
+                if ( count >= max && flag ) {
+                    flag = false;
+                    this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
+                    setTimeout(function() {
+                        flag = true;
+                    }, 1 );
+                }
+    
+                return count >= max ? false : true;
+            });
+    
+            uploader.on( 'fileQueued', function() {
+                count++;
+            });
+    
+            uploader.on( 'fileDequeued', function() {
+                count--;
+            });
+    
+            uploader.on( 'uploadFinished', function() {
+                count = 0;
+            });
+        });
+    
+    
+        /**
+         * @property {int} [fileSizeLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证文件总大小是否超出限制, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileSizeLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                count = 0,
+                max = opts.fileSizeLimit >> 0,
+                flag = true;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+                var invalid = count + file.size > max;
+    
+                if ( invalid && flag ) {
+                    flag = false;
+                    this.trigger( 'error', 'Q_EXCEED_SIZE_LIMIT', max, file );
+                    setTimeout(function() {
+                        flag = true;
+                    }, 1 );
+                }
+    
+                return invalid ? false : true;
+            });
+    
+            uploader.on( 'fileQueued', function( file ) {
+                count += file.size;
+            });
+    
+            uploader.on( 'fileDequeued', function( file ) {
+                count -= file.size;
+            });
+    
+            uploader.on( 'uploadFinished', function() {
+                count = 0;
+            });
+        });
+    
+        /**
+         * @property {int} [fileSingleSizeLimit=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 验证单个文件大小是否超出限制, 超出则不允许加入队列。
+         */
+        api.addValidator( 'fileSingleSizeLimit', function() {
+            var uploader = this,
+                opts = uploader.options,
+                max = opts.fileSingleSizeLimit;
+    
+            if ( !max ) {
+                return;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+    
+                if ( file.size > max ) {
+                    file.setStatus( WUFile.Status.INVALID, 'exceed_size' );
+                    this.trigger( 'error', 'F_EXCEED_SIZE', file );
+                    return false;
+                }
+    
+            });
+    
+        });
+    
+        /**
+         * @property {int} [duplicate=undefined]
+         * @namespace options
+         * @for Uploader
+         * @description 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
+         */
+        api.addValidator( 'duplicate', function() {
+            var uploader = this,
+                opts = uploader.options,
+                mapping = {};
+    
+            if ( opts.duplicate ) {
+                return;
+            }
+    
+            function hashString( str ) {
+                var hash = 0,
+                    i = 0,
+                    len = str.length,
+                    _char;
+    
+                for ( ; i < len; i++ ) {
+                    _char = str.charCodeAt( i );
+                    hash = _char + (hash << 6) + (hash << 16) - hash;
+                }
+    
+                return hash;
+            }
+    
+            uploader.on( 'beforeFileQueued', function( file ) {
+                var hash = file.__hash || (file.__hash = hashString( file.name +
+                        file.size + file.lastModifiedDate ));
+    
+                // 已经重复了
+                if ( mapping[ hash ] ) {
+                    this.trigger( 'error', 'F_DUPLICATE', file );
+                    return false;
+                }
+            });
+    
+            uploader.on( 'fileQueued', function( file ) {
+                var hash = file.__hash;
+    
+                hash && (mapping[ hash ] = true);
+            });
+    
+            uploader.on( 'fileDequeued', function( file ) {
+                var hash = file.__hash;
+    
+                hash && (delete mapping[ hash ]);
+            });
+        });
+    
+        return api;
+    });
+    
+    /**
+     * @fileOverview Runtime管理器，负责Runtime的选择, 连接
+     */
+    define('runtime/compbase',[],function() {
+    
+        function CompBase( owner, runtime ) {
+    
+            this.owner = owner;
+            this.options = owner.options;
+    
+            this.getRuntime = function() {
+                return runtime;
+            };
+    
+            this.getRuid = function() {
+                return runtime.uid;
+            };
+    
+            this.trigger = function() {
+                return owner.trigger.apply( owner, arguments );
+            };
+        }
+    
+        return CompBase;
+    });
+    /**
+     * @fileOverview Html5Runtime
+     */
+    define('runtime/html5/runtime',[
+        'base',
+        'runtime/runtime',
+        'runtime/compbase'
+    ], function( Base, Runtime, CompBase ) {
+    
+        var type = 'html5',
+            components = {};
+    
+        function Html5Runtime() {
+            var pool = {},
+                me = this,
+                destory = this.destory;
+    
+            Runtime.apply( me, arguments );
+            me.type = type;
+    
+    
+            // 这个方法的调用者，实际上是RuntimeClient
+            me.exec = function( comp, fn/*, args...*/) {
+                var client = this,
+                    uid = client.uid,
+                    args = Base.slice( arguments, 2 ),
+                    instance;
+    
+                if ( components[ comp ] ) {
+                    instance = pool[ uid ] = pool[ uid ] ||
+                            new components[ comp ]( client, me );
+    
+                    if ( instance[ fn ] ) {
+                        return instance[ fn ].apply( instance, args );
+                    }
+                }
+            };
+    
+            me.destory = function() {
+                // @todo 删除池子中的所有实例
+                return destory && destory.apply( this, arguments );
+            };
+        }
+    
+        Base.inherits( Runtime, {
+            constructor: Html5Runtime,
+    
+            // 不需要连接其他程序，直接执行callback
+            init: function() {
+                var me = this;
+                setTimeout(function() {
+                    me.trigger('ready');
+                }, 1 );
+            }
+    
+        });
+    
+        // 注册Components
+        Html5Runtime.register = function( name, component ) {
+            var klass = components[ name ] = Base.inherits( CompBase, component );
+            return klass;
+        };
+    
+        // 注册html5运行时。
+        // 只有在支持的前提下注册。
+        if ( window.Blob && window.FileReader && window.DataView ) {
+            Runtime.addRuntime( type, Html5Runtime );
+        }
+    
+        return Html5Runtime;
+    });
+    /**
+     * @fileOverview Blob Html实现
+     */
+    define('runtime/html5/blob',[
+        'runtime/html5/runtime',
+        'lib/blob'
+    ], function( Html5Runtime, Blob ) {
+    
+        return Html5Runtime.register( 'Blob', {
+            slice: function( start, end ) {
+                var blob = this.owner.source,
+                    slice = blob.slice || blob.webkitSlice || blob.mozSlice;
+    
+                blob = slice.call( blob, start, end );
+    
+                return new Blob( this.getRuid(), blob );
+            }
+        });
+    });
+    /**
+     * @fileOverview FilePaste
+     */
+    define('runtime/html5/dnd',[
+        'base',
+        'runtime/html5/runtime',
+        'lib/file'
+    ], function( Base, Html5Runtime, File ) {
+    
+        var $ = Base.$,
+            prefix = 'webuploader-dnd-';
+    
+        return Html5Runtime.register( 'DragAndDrop', {
+            init: function() {
+                var elem = this.elem = this.options.container;
+    
+                this.dragEnterHandler = Base.bindFn( this._dragEnterHandler, this );
+                this.dragOverHandler = Base.bindFn( this._dragOverHandler, this );
+                this.dragLeaveHandler = Base.bindFn( this._dragLeaveHandler, this );
+                this.dropHandler = Base.bindFn( this._dropHandler, this );
+                this.dndOver = false;
+    
+                elem.on( 'dragenter', this.dragEnterHandler );
+                elem.on( 'dragover', this.dragOverHandler );
+                elem.on( 'dragleave', this.dragLeaveHandler );
+                elem.on( 'drop', this.dropHandler );
+    
+                if ( this.options.disableGlobalDnd ) {
+                    $( document ).on( 'dragover', this.dragOverHandler );
+                    $( document ).on( 'drop', this.dropHandler );
+                }
+            },
+    
+            _dragEnterHandler: function( e ) {
+                var me = this,
+                    denied = me._denied || false,
+                    items;
+    
+                e = e.originalEvent || e;
+    
+                if ( !me.dndOver ) {
+                    me.dndOver = true;
+    
+                    // 注意只有 chrome 支持。
+                    items = e.dataTransfer.items;
+    
+                    if ( items && items.length ) {
+                        me._denied = denied = !me.trigger( 'accept', items );
+                    }
+    
+                    me.elem.addClass( prefix + 'over' );
+                    me.elem[ denied ? 'addClass' :
+                            'removeClass' ]( prefix + 'denied' );
+                }
+    
+    
+                e.dataTransfer.dropEffect = denied ? 'none' : 'copy';
+    
+                return false;
+            },
+    
+            _dragOverHandler: function( e ) {
+                // 只处理框内的。
+                var parentElem = this.elem.parent().get( 0 );
+                if ( parentElem && !$.contains( parentElem, e.currentTarget ) ) {
+                    return false;
+                }
+    
+                clearTimeout( this._leaveTimer );
+                this._dragEnterHandler.call( this, e );
+    
+                return false;
+            },
+    
+            _dragLeaveHandler: function() {
+                var me = this,
+                    handler;
+    
+                handler = function() {
+                    me.dndOver = false;
+                    me.elem.removeClass( prefix + 'over ' + prefix + 'denied' );
+                };
+    
+                clearTimeout( me._leaveTimer );
+                me._leaveTimer = setTimeout( handler, 100 );
+                return false;
+            },
+    
+            _dropHandler: function( e ) {
+                var me = this,
+                    ruid = me.getRuid(),
+                    parentElem = me.elem.parent().get( 0 );
+    
+                // 只处理框内的。
+                if ( parentElem && !$.contains( parentElem, e.currentTarget ) ) {
+                    return false;
+                }
+    
+                me._getTansferFiles( e, function( results ) {
+                    me.trigger( 'drop', $.map( results, function( file ) {
+                        return new File( ruid, file );
+                    }) );
+                });
+    
+                me.dndOver = false;
+                me.elem.removeClass( prefix + 'over' );
+                return false;
+            },
+    
+            // 如果传入 callback 则去查看文件夹，否则只管当前文件夹。
+            _getTansferFiles: function( e, callback ) {
+                var results  = [],
+                    promises = [],
+                    items, files, dataTransfer, file, item, i, len, canAccessFolder;
+    
+                e = e.originalEvent || e;
+    
+                dataTransfer = e.dataTransfer;
+                items = dataTransfer.items;
+                files = dataTransfer.files;
+    
+                canAccessFolder = !!(items && items[ 0 ].webkitGetAsEntry);
+    
+                for ( i = 0, len = files.length; i < len; i++ ) {
+                    file = files[ i ];
+                    item = items && items[ i ];
+    
+                    if ( canAccessFolder && item.webkitGetAsEntry().isDirectory ) {
+    
+                        promises.push( this._traverseDirectoryTree(
+                                item.webkitGetAsEntry(), results ) );
+                    } else {
+                        results.push( file );
+                    }
+                }
+    
+                Base.when.apply( Base, promises ).done(function() {
+    
+                    if ( !results.length ) {
+                        return;
+                    }
+    
+                    callback( results );
+                });
+            },
+    
+            _traverseDirectoryTree: function( entry, results ) {
+                var deferred = Base.Deferred(),
+                    me = this;
+    
+                if ( entry.isFile ) {
+                    entry.file(function( file ) {
+                        results.push( file );
+                        deferred.resolve();
+                    });
+                } else if ( entry.isDirectory ) {
+                    entry.createReader().readEntries(function( entries ) {
+                        var len = entries.length,
+                            promises = [],
+                            arr = [],    // 为了保证顺序。
+                            i;
+    
+                        for ( i = 0; i < len; i++ ) {
+                            promises.push( me._traverseDirectoryTree(
+                                    entries[ i ], arr ) );
+                        }
+    
+                        Base.when.apply( Base, promises ).then(function() {
+                            results.push.apply( results, arr );
+                            deferred.resolve();
+                        }, deferred.reject );
+                    });
+                }
+    
+                return deferred.promise();
+            },
+    
+            destroy: function() {
+                var elem = this.elem;
+    
+                elem.off( 'dragenter', this.dragEnterHandler );
+                elem.off( 'dragover', this.dragEnterHandler );
+                elem.off( 'dragleave', this.dragLeaveHandler );
+                elem.off( 'drop', this.dropHandler );
+    
+                if ( this.options.disableGlobalDnd ) {
+                    $( document ).off( 'dragover', this.dragOverHandler );
+                    $( document ).off( 'drop', this.dropHandler );
+                }
+            }
+        });
+    });
+    
+    /**
+     * @fileOverview FilePaste
+     */
+    define('runtime/html5/filepaste',[
+        'base',
+        'runtime/html5/runtime',
+        'lib/file'
+    ], function( Base, Html5Runtime, File ) {
+    
+        return Html5Runtime.register( 'FilePaste', {
+            init: function() {
+                var opts = this.options,
+                    elem = this.elem = opts.container,
+                    accept = '.*',
+                    arr, i, len, item;
+    
+                // accetp的mimeTypes中生成匹配正则。
+                if ( opts.accept ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        item = opts.accept[ i ].mimeTypes;
+                        item && arr.push( item );
+                    }
+    
+                    if ( arr.length ) {
+                        accept = arr.join(',');
+                        accept = accept.replace( /,/g, '|' ).replace( /\*/g, '.*' );
+                    }
+                }
+                this.accept = accept = new RegExp( accept, 'i' );
+                this.hander = Base.bindFn( this._pasteHander, this );
+                elem.on( 'paste', this.hander );
+            },
+    
+            _pasteHander: function( e ) {
+                var allowed = [],
+                    ruid = this.getRuid(),
+                    items, item, blob, i, len;
+    
+                e = e.originalEvent || e;
+                items = e.clipboardData.items;
+    
+                for ( i = 0, len = items.length; i < len; i++ ) {
+                    item = items[ i ];
+    
+                    if ( item.kind !== 'file' || !(blob = item.getAsFile()) ) {
+                        continue;
+                    }
+    
+                    allowed.push( new File( ruid, blob ) );
+                }
+    
+                if ( allowed.length ) {
+                    // 不阻止非文件粘贴（文字粘贴）的事件冒泡
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.trigger( 'paste', allowed );
+                }
+            },
+    
+            destroy: function() {
+                this.elem.off( 'paste', this.hander );
+            }
+        });
+    });
+    
+    /**
+     * @fileOverview FilePicker
+     */
+    define('runtime/html5/filepicker',[
+        'base',
+        'runtime/html5/runtime'
+    ], function( Base, Html5Runtime ) {
+    
+        var $ = Base.$;
+    
+        return Html5Runtime.register( 'FilePicker', {
+            init: function() {
+                var container = this.getRuntime().getContainer(),
+                    me = this,
+                    owner = me.owner,
+                    opts = me.options,
+                    lable = $( document.createElement('label') ),
+                    input = $( document.createElement('input') ),
+                    arr, i, len, mouseHandler;
+    
+                input.attr( 'type', 'file' );
+                input.attr( 'name', opts.name );
+                input.addClass('webuploader-element-invisible');
+    
+                lable.on( 'click', function() {
+                    input.trigger('click');
+                });
+    
+                lable.css({
+                    opacity: 0,
+                    width: '100%',
+                    height: '100%',
+                    display: 'block',
+                    cursor: 'pointer',
+                    background: '#ffffff'
+                });
+    
+                if ( opts.multiple ) {
+                    input.attr( 'multiple', 'multiple' );
+                }
+    
+                // @todo Firefox不支持单独指定后缀
+                if ( opts.accept && opts.accept.length > 0 ) {
+                    arr = [];
+    
+                    for ( i = 0, len = opts.accept.length; i < len; i++ ) {
+                        arr.push( opts.accept[ i ].mimeTypes );
+                    }
+    
+                    input.attr( 'accept', arr.join(',') );
+                }
+    
+                container.append( input );
+                container.append( lable );
+    
+                mouseHandler = function( e ) {
+                    owner.trigger( e.type );
+                };
+    
+                input.on( 'change', function( e ) {
+                    var fn = arguments.callee,
+                        clone;
+    
+                    me.files = e.target.files;
+    
+                    // reset input
+                    clone = this.cloneNode( true );
+                    this.parentNode.replaceChild( clone, this );
+    
+                    input.off();
+                    input = $( clone ).on( 'change', fn )
+                            .on( 'mouseenter mouseleave', mouseHandler );
+    
+                    owner.trigger('change');
+                });
+    
+                lable.on( 'mouseenter mouseleave', mouseHandler );
+    
+            },
+    
+    
+            getFiles: function() {
+                return this.files;
+            },
+    
+            destroy: function() {
+                // todo
+            }
+        });
+    });
+    /**
+     * @fileOverview Transport
+     * @todo 支持chunked传输，优势：
+     * 可以将大文件分成小块，挨个传输，可以提高大文件成功率，当失败的时候，也只需要重传那小部分，
+     * 而不需要重头再传一次。另外断点续传也需要用chunked方式。
+     */
+    define('runtime/html5/transport',[
+        'base',
+        'runtime/html5/runtime'
+    ], function( Base, Html5Runtime ) {
+    
+        var noop = Base.noop,
+            $ = Base.$;
+    
+        return Html5Runtime.register( 'Transport', {
+            init: function() {
+                this._status = 0;
+                this._response = null;
+            },
+    
+            send: function() {
+                var owner = this.owner,
+                    opts = this.options,
+                    xhr = this._initAjax(),
+                    blob = owner._blob,
+                    server = opts.server,
+                    formData, binary, fr;
+    
+                if ( opts.sendAsBinary ) {
+                    server += (/\?/.test( server ) ? '&' : '?') +
+                            $.param( owner._formData );
+    
+                    binary = blob.getSource();
+                } else {
+                    formData = new FormData();
+                    $.each( owner._formData, function( k, v ) {
+                        formData.append( k, v );
+                    });
+    
+                    formData.append( opts.fileVal, blob.getSource(),
+                            opts.filename || owner._formData.name || '' );
+                }
+    
+                if ( opts.withCredentials && 'withCredentials' in xhr ) {
+                    xhr.open( opts.method, server, true );
+                    xhr.withCredentials = true;
+                } else {
+                    xhr.open( opts.method, server );
+                }
+    
+                this._setRequestHeader( xhr, opts.headers );
+    
+                if ( binary ) {
+                    xhr.overrideMimeType('application/octet-stream');
+    
+                    // android直接发送blob会导致服务端接收到的是空文件。
+                    // bug详情。
+                    // https://code.google.com/p/android/issues/detail?id=39882
+                    // 所以先用fileReader读取出来再通过arraybuffer的方式发送。
+                    if ( Base.os.android ) {
+                        fr = new FileReader();
+    
+                        fr.onload = function() {
+                            xhr.send( this.result );
+                            fr = fr.onload = null;
+                        };
+    
+                        fr.readAsArrayBuffer( binary );
+                    } else {
+                        xhr.send( binary );
+                    }
+                } else {
+                    xhr.send( formData );
+                }
+            },
+    
+            getResponse: function() {
+                return this._response;
+            },
+    
+            getResponseAsJson: function() {
+                return this._parseJson( this._response );
+            },
+    
+            getStatus: function() {
+                return this._status;
+            },
+    
+            abort: function() {
+                var xhr = this._xhr;
+    
+                if ( xhr ) {
+                    xhr.upload.onprogress = noop;
+                    xhr.onreadystatechange = noop;
+                    xhr.abort();
+    
+                    this._xhr = xhr = null;
+                }
+            },
+    
+            destroy: function() {
+                this.abort();
+            },
+    
+            _initAjax: function() {
+                var me = this,
+                    xhr = new XMLHttpRequest(),
+                    opts = this.options;
+    
+                if ( opts.withCredentials && !('withCredentials' in xhr) &&
+                        typeof XDomainRequest !== 'undefined' ) {
+                    xhr = new XDomainRequest();
+                }
+    
+                xhr.upload.onprogress = function( e ) {
+                    var percentage = 0;
+    
+                    if ( e.lengthComputable ) {
+                        percentage = e.loaded / e.total;
+                    }
+    
+                    return me.trigger( 'progress', percentage );
+                };
+    
+                xhr.onreadystatechange = function() {
+    
+                    if ( xhr.readyState !== 4 ) {
+                        return;
+                    }
+    
+                    xhr.upload.onprogress = noop;
+                    xhr.onreadystatechange = noop;
+                    me._xhr = null;
+                    me._status = xhr.status;
+    
+                    if ( xhr.status >= 200 && xhr.status < 300 ) {
+                        me._response = xhr.responseText;
+                        return me.trigger('load');
+                    } else if ( xhr.status >= 500 && xhr.status < 600 ) {
+                        me._response = xhr.responseText;
+                        return me.trigger( 'error', 'server' );
+                    }
+    
+    
+                    return me.trigger( 'error', me._status ? 'http' : 'abort' );
+                };
+    
+                me._xhr = xhr;
+                return xhr;
+            },
+    
+            _setRequestHeader: function( xhr, headers ) {
+                $.each( headers, function( key, val ) {
+                    xhr.setRequestHeader( key, val );
+                });
+            },
+    
+            _parseJson: function( str ) {
+                var json;
+    
+                try {
+                    json = JSON.parse( str );
+                } catch ( ex ) {
+                    json = {};
+                }
+    
+                return json;
+            }
+        });
+    });
+    /**
+     * @fileOverview FlashRuntime
+     */
+    define('runtime/flash/runtime',[
+        'base',
+        'runtime/runtime',
+        'runtime/compbase'
+    ], function( Base, Runtime, CompBase ) {
+    
+        var $ = Base.$,
+            type = 'flash',
+            components = {};
+    
+    
+        function getFlashVersion() {
+            var version;
+    
+            try {
+                version = navigator.plugins[ 'Shockwave Flash' ];
+                version = version.description;
+            } catch ( ex ) {
+                try {
+                    version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
+                            .GetVariable('$version');
+                } catch ( ex2 ) {
+                    version = '0.0';
+                }
+            }
+            version = version.match( /\d+/g );
+            return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
+        }
+    
+        function FlashRuntime() {
+            var pool = {},
+                clients = {},
+                destory = this.destory,
+                me = this,
+                jsreciver = Base.guid('webuploader_');
+    
+            Runtime.apply( me, arguments );
+            me.type = type;
+    
+    
+            // 这个方法的调用者，实际上是RuntimeClient
+            me.exec = function( comp, fn/*, args...*/ ) {
+                var client = this,
+                    uid = client.uid,
+                    args = Base.slice( arguments, 2 ),
+                    instance;
+    
+                clients[ uid ] = client;
+    
+                if ( components[ comp ] ) {
+                    if ( !pool[ uid ] ) {
+                        pool[ uid ] = new components[ comp ]( client, me );
+                    }
+    
+                    instance = pool[ uid ];
+    
+                    if ( instance[ fn ] ) {
+                        return instance[ fn ].apply( instance, args );
+                    }
+                }
+    
+                return me.flashExec.apply( client, arguments );
+            };
+    
+            function handler( evt, obj ) {
+                var type = evt.type || evt,
+                    parts, uid;
+    
+                parts = type.split('::');
+                uid = parts[ 0 ];
+                type = parts[ 1 ];
+    
+                // console.log.apply( console, arguments );
+    
+                if ( type === 'Ready' && uid === me.uid ) {
+                    me.trigger('ready');
+                } else if ( clients[ uid ] ) {
+                    clients[ uid ].trigger( type.toLowerCase(), evt, obj );
+                }
+    
+                // Base.log( evt, obj );
+            }
+    
+            // flash的接受器。
+            window[ jsreciver ] = function() {
+                var args = arguments;
+    
+                // 为了能捕获得到。
+                setTimeout(function() {
+                    handler.apply( null, args );
+                }, 1 );
+            };
+    
+            this.jsreciver = jsreciver;
+    
+            this.destory = function() {
+                // @todo 删除池子中的所有实例
+                return destory && destory.apply( this, arguments );
+            };
+    
+            this.flashExec = function( comp, fn ) {
+                var flash = me.getFlash(),
+                    args = Base.slice( arguments, 2 );
+    
+                return flash.exec( this.uid, comp, fn, args );
+            };
+    
+            // @todo
+        }
+    
+        Base.inherits( Runtime, {
+            constructor: FlashRuntime,
+    
+            init: function() {
+                var container = this.getContainer(),
+                    opts = this.options,
+                    html;
+    
+                // if not the minimal height, shims are not initialized
+                // in older browsers (e.g FF3.6, IE6,7,8, Safari 4.0,5.0, etc)
+                container.css({
+                    position: 'absolute',
+                    top: '-8px',
+                    left: '-8px',
+                    width: '9px',
+                    height: '9px',
+                    overflow: 'hidden'
+                });
+    
+                // insert flash object
+                html = '<object id="' + this.uid + '" type="application/' +
+                        'x-shockwave-flash" data="' +  opts.swf + '" ';
+    
+                if ( Base.browser.ie ) {
+                    html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
+                }
+    
+                html += 'width="100%" height="100%" style="outline:0">'  +
+                    '<param name="movie" value="' + opts.swf + '" />' +
+                    '<param name="flashvars" value="uid=' + this.uid +
+                    '&jsreciver=' + this.jsreciver + '" />' +
+                    '<param name="wmode" value="transparent" />' +
+                    '<param name="allowscriptaccess" value="always" />' +
+                '</object>';
+    
+                container.html( html );
+            },
+    
+            getFlash: function() {
+                if ( this._flash ) {
+                    return this._flash;
+                }
+    
+                this._flash = $( '#' + this.uid ).get( 0 );
+                return this._flash;
+            }
+    
+        });
+    
+        FlashRuntime.register = function( name, component ) {
+            component = components[ name ] = Base.inherits( CompBase, $.extend({
+    
+                // @todo fix this later
+                flashExec: function() {
+                    var owner = this.owner,
+                        runtime = this.getRuntime();
+    
+                    return runtime.flashExec.apply( owner, arguments );
+                }
+            }, component ) );
+    
+            return component;
+        };
+    
+        if ( getFlashVersion() >= 11.4 ) {
+            Runtime.addRuntime( type, FlashRuntime );
+        }
+    
+        return FlashRuntime;
+    });
+    /**
+     * @fileOverview FilePicker
+     */
+    define('runtime/flash/filepicker',[
+        'base',
+        'runtime/flash/runtime'
+    ], function( Base, FlashRuntime ) {
+        var $ = Base.$;
+    
+        return FlashRuntime.register( 'FilePicker', {
+            init: function( opts ) {
+                var copy = $.extend({}, opts ),
+                    len, i;
+    
+                // 修复Flash再没有设置title的情况下无法弹出flash文件选择框的bug.
+                len = copy.accept && copy.accept.length;
+                for (  i = 0; i < len; i++ ) {
+                    if ( !copy.accept[ i ].title ) {
+                        copy.accept[ i ].title = 'Files';
+                    }
+                }
+    
+                delete copy.button;
+                delete copy.container;
+    
+                this.flashExec( 'FilePicker', 'init', copy );
+            },
+    
+            destroy: function() {
+                // todo
+            }
+        });
+    });
+    /**
+     * @fileOverview  Transport flash实现
+     */
+    define('runtime/flash/transport',[
+        'base',
+        'runtime/flash/runtime',
+        'runtime/client'
+    ], function( Base, FlashRuntime, RuntimeClient ) {
+        var $ = Base.$;
+    
+        return FlashRuntime.register( 'Transport', {
+            init: function() {
+                this._status = 0;
+                this._response = null;
+                this._responseJson = null;
+            },
+    
+            send: function() {
+                var owner = this.owner,
+                    opts = this.options,
+                    xhr = this._initAjax(),
+                    blob = owner._blob,
+                    server = opts.server,
+                    binary;
+    
+                xhr.connectRuntime( blob.ruid );
+    
+                if ( opts.sendAsBinary ) {
+                    server += (/\?/.test( server ) ? '&' : '?') +
+                            $.param( owner._formData );
+    
+                    binary = blob.uid;
+                } else {
+                    $.each( owner._formData, function( k, v ) {
+                        xhr.exec( 'append', k, v );
+                    });
+    
+                    xhr.exec( 'appendBlob', opts.fileVal, blob.uid,
+                            opts.filename || owner._formData.name || '' );
+                }
+    
+                this._setRequestHeader( xhr, opts.headers );
+                xhr.exec( 'send', {
+                    method: opts.method,
+                    url: server
+                }, binary );
+            },
+    
+            getStatus: function() {
+                return this._status;
+            },
+    
+            getResponse: function() {
+                return this._response;
+            },
+    
+            getResponseAsJson: function() {
+                return this._responseJson;
+            },
+    
+            abort: function() {
+                var xhr = this._xhr;
+    
+                if ( xhr ) {
+                    xhr.exec('abort');
+                    xhr.destroy();
+                    this._xhr = xhr = null;
+                }
+            },
+    
+            destroy: function() {
+                this.abort();
+            },
+    
+            _initAjax: function() {
+                var me = this,
+                    xhr = new RuntimeClient('XMLHttpRequest');
+    
+                xhr.on( 'uploadprogress progress', function( e ) {
+                    return me.trigger( 'progress', e.loaded / e.total );
+                });
+    
+                xhr.on( 'load', function() {
+                    var status = xhr.exec('getStatus'),
+                        err = '';
+    
+                    xhr.off();
+                    me._xhr = null;
+    
+                    if ( status >= 200 && status < 300 ) {
+                        me._response = xhr.exec('getResponse');
+                        me._responseJson = xhr.exec('getResponseAsJson');
+                    } else if ( status >= 500 && status < 600 ) {
+                        me._response = xhr.exec('getResponse');
+                        me._responseJson = xhr.exec('getResponseAsJson');
+                        err = 'server';
+                    } else {
+                        err = 'http';
+                    }
+    
+                    xhr.destroy();
+                    xhr = null;
+    
+                    return err ? me.trigger( 'error', err ) : me.trigger('load');
+                });
+    
+                xhr.on( 'error', function() {
+                    xhr.off();
+                    me._xhr = null;
+                    me.trigger( 'error', 'http' );
+                });
+    
+                me._xhr = xhr;
+                return xhr;
+            },
+    
+            _setRequestHeader: function( xhr, headers ) {
+                $.each( headers, function( key, val ) {
+                    xhr.exec( 'setRequestHeader', key, val );
+                });
+            }
+        });
+    });
+    /**
+     * @fileOverview 没有图像处理的版本。
+     */
+    define('preset/withoutimage',[
+        'base',
+    
+        // widgets
+        'widgets/filednd',
+        'widgets/filepaste',
+        'widgets/filepicker',
+        'widgets/queue',
+        'widgets/runtime',
+        'widgets/upload',
+        'widgets/validator',
+    
+        // runtimes
+        // html5
+        'runtime/html5/blob',
+        'runtime/html5/dnd',
+        'runtime/html5/filepaste',
+        'runtime/html5/filepicker',
+        'runtime/html5/transport',
+    
+        // flash
+        'runtime/flash/filepicker',
+        'runtime/flash/transport'
+    ], function( Base ) {
+        return Base;
+    });
+    define('webuploader',[
+        'preset/withoutimage'
+    ], function( preset ) {
+        return preset;
+    });
+    return require('webuploader');
+});
diff --git a/public/js/ueditor/third-party/zeroclipboard/ZeroClipboard.js b/public/js/ueditor/third-party/zeroclipboard/ZeroClipboard.js
new file mode 100644
index 0000000..1d5d868
--- /dev/null
+++ b/public/js/ueditor/third-party/zeroclipboard/ZeroClipboard.js
@@ -0,0 +1,1256 @@
+/*!
+* ZeroClipboard
+* The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
+* Copyright (c) 2014 Jon Rohan, James M. Greene
+* Licensed MIT
+* http://zeroclipboard.org/
+* v2.0.0-beta.5
+*/
+(function(window) {
+  "use strict";
+  var _currentElement;
+  var _flashState = {
+    bridge: null,
+    version: "0.0.0",
+    pluginType: "unknown",
+    disabled: null,
+    outdated: null,
+    unavailable: null,
+    deactivated: null,
+    overdue: null,
+    ready: null
+  };
+  var _clipData = {};
+  var _clipDataFormatMap = null;
+  var _clientIdCounter = 0;
+  var _clientMeta = {};
+  var _elementIdCounter = 0;
+  var _elementMeta = {};
+  var _swfPath = function() {
+    var i, jsDir, tmpJsPath, jsPath, swfPath = "ZeroClipboard.swf";
+    if (!(document.currentScript && (jsPath = document.currentScript.src))) {
+      var scripts = document.getElementsByTagName("script");
+      if ("readyState" in scripts[0]) {
+        for (i = scripts.length; i--; ) {
+          if (scripts[i].readyState === "interactive" && (jsPath = scripts[i].src)) {
+            break;
+          }
+        }
+      } else if (document.readyState === "loading") {
+        jsPath = scripts[scripts.length - 1].src;
+      } else {
+        for (i = scripts.length; i--; ) {
+          tmpJsPath = scripts[i].src;
+          if (!tmpJsPath) {
+            jsDir = null;
+            break;
+          }
+          tmpJsPath = tmpJsPath.split("#")[0].split("?")[0];
+          tmpJsPath = tmpJsPath.slice(0, tmpJsPath.lastIndexOf("/") + 1);
+          if (jsDir == null) {
+            jsDir = tmpJsPath;
+          } else if (jsDir !== tmpJsPath) {
+            jsDir = null;
+            break;
+          }
+        }
+        if (jsDir !== null) {
+          jsPath = jsDir;
+        }
+      }
+    }
+    if (jsPath) {
+      jsPath = jsPath.split("#")[0].split("?")[0];
+      swfPath = jsPath.slice(0, jsPath.lastIndexOf("/") + 1) + swfPath;
+    }
+    return swfPath;
+  }();
+  var _camelizeCssPropName = function() {
+    var matcherRegex = /\-([a-z])/g, replacerFn = function(match, group) {
+      return group.toUpperCase();
+    };
+    return function(prop) {
+      return prop.replace(matcherRegex, replacerFn);
+    };
+  }();
+  var _getStyle = function(el, prop) {
+    var value, camelProp, tagName;
+    if (window.getComputedStyle) {
+      value = window.getComputedStyle(el, null).getPropertyValue(prop);
+    } else {
+      camelProp = _camelizeCssPropName(prop);
+      if (el.currentStyle) {
+        value = el.currentStyle[camelProp];
+      } else {
+        value = el.style[camelProp];
+      }
+    }
+    if (prop === "cursor") {
+      if (!value || value === "auto") {
+        tagName = el.tagName.toLowerCase();
+        if (tagName === "a") {
+          return "pointer";
+        }
+      }
+    }
+    return value;
+  };
+  var _elementMouseOver = function(event) {
+    if (!event) {
+      event = window.event;
+    }
+    var target;
+    if (this !== window) {
+      target = this;
+    } else if (event.target) {
+      target = event.target;
+    } else if (event.srcElement) {
+      target = event.srcElement;
+    }
+    ZeroClipboard.activate(target);
+  };
+  var _addEventHandler = function(element, method, func) {
+    if (!element || element.nodeType !== 1) {
+      return;
+    }
+    if (element.addEventListener) {
+      element.addEventListener(method, func, false);
+    } else if (element.attachEvent) {
+      element.attachEvent("on" + method, func);
+    }
+  };
+  var _removeEventHandler = function(element, method, func) {
+    if (!element || element.nodeType !== 1) {
+      return;
+    }
+    if (element.removeEventListener) {
+      element.removeEventListener(method, func, false);
+    } else if (element.detachEvent) {
+      element.detachEvent("on" + method, func);
+    }
+  };
+  var _addClass = function(element, value) {
+    if (!element || element.nodeType !== 1) {
+      return element;
+    }
+    if (element.classList) {
+      if (!element.classList.contains(value)) {
+        element.classList.add(value);
+      }
+      return element;
+    }
+    if (value && typeof value === "string") {
+      var classNames = (value || "").split(/\s+/);
+      if (element.nodeType === 1) {
+        if (!element.className) {
+          element.className = value;
+        } else {
+          var className = " " + element.className + " ", setClass = element.className;
+          for (var c = 0, cl = classNames.length; c < cl; c++) {
+            if (className.indexOf(" " + classNames[c] + " ") < 0) {
+              setClass += " " + classNames[c];
+            }
+          }
+          element.className = setClass.replace(/^\s+|\s+$/g, "");
+        }
+      }
+    }
+    return element;
+  };
+  var _removeClass = function(element, value) {
+    if (!element || element.nodeType !== 1) {
+      return element;
+    }
+    if (element.classList) {
+      if (element.classList.contains(value)) {
+        element.classList.remove(value);
+      }
+      return element;
+    }
+    if (value && typeof value === "string" || value === undefined) {
+      var classNames = (value || "").split(/\s+/);
+      if (element.nodeType === 1 && element.className) {
+        if (value) {
+          var className = (" " + element.className + " ").replace(/[\n\t]/g, " ");
+          for (var c = 0, cl = classNames.length; c < cl; c++) {
+            className = className.replace(" " + classNames[c] + " ", " ");
+          }
+          element.className = className.replace(/^\s+|\s+$/g, "");
+        } else {
+          element.className = "";
+        }
+      }
+    }
+    return element;
+  };
+  var _getZoomFactor = function() {
+    var rect, physicalWidth, logicalWidth, zoomFactor = 1;
+    if (typeof document.body.getBoundingClientRect === "function") {
+      rect = document.body.getBoundingClientRect();
+      physicalWidth = rect.right - rect.left;
+      logicalWidth = document.body.offsetWidth;
+      zoomFactor = Math.round(physicalWidth / logicalWidth * 100) / 100;
+    }
+    return zoomFactor;
+  };
+  var _getDOMObjectPosition = function(obj, defaultZIndex) {
+    var info = {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+      zIndex: _getSafeZIndex(defaultZIndex) - 1
+    };
+    if (obj.getBoundingClientRect) {
+      var rect = obj.getBoundingClientRect();
+      var pageXOffset, pageYOffset, zoomFactor;
+      if ("pageXOffset" in window && "pageYOffset" in window) {
+        pageXOffset = window.pageXOffset;
+        pageYOffset = window.pageYOffset;
+      } else {
+        zoomFactor = _getZoomFactor();
+        pageXOffset = Math.round(document.documentElement.scrollLeft / zoomFactor);
+        pageYOffset = Math.round(document.documentElement.scrollTop / zoomFactor);
+      }
+      var leftBorderWidth = document.documentElement.clientLeft || 0;
+      var topBorderWidth = document.documentElement.clientTop || 0;
+      info.left = rect.left + pageXOffset - leftBorderWidth;
+      info.top = rect.top + pageYOffset - topBorderWidth;
+      info.width = "width" in rect ? rect.width : rect.right - rect.left;
+      info.height = "height" in rect ? rect.height : rect.bottom - rect.top;
+    }
+    return info;
+  };
+  var _cacheBust = function(path, options) {
+    var cacheBust = options == null || options && options.cacheBust === true;
+    if (cacheBust) {
+      return (path.indexOf("?") === -1 ? "?" : "&") + "noCache=" + new Date().getTime();
+    } else {
+      return "";
+    }
+  };
+  var _vars = function(options) {
+    var i, len, domain, domains, str = "", trustedOriginsExpanded = [];
+    if (options.trustedDomains) {
+      if (typeof options.trustedDomains === "string") {
+        domains = [ options.trustedDomains ];
+      } else if (typeof options.trustedDomains === "object" && "length" in options.trustedDomains) {
+        domains = options.trustedDomains;
+      }
+    }
+    if (domains && domains.length) {
+      for (i = 0, len = domains.length; i < len; i++) {
+        if (domains.hasOwnProperty(i) && domains[i] && typeof domains[i] === "string") {
+          domain = _extractDomain(domains[i]);
+          if (!domain) {
+            continue;
+          }
+          if (domain === "*") {
+            trustedOriginsExpanded = [ domain ];
+            break;
+          }
+          trustedOriginsExpanded.push.apply(trustedOriginsExpanded, [ domain, "//" + domain, window.location.protocol + "//" + domain ]);
+        }
+      }
+    }
+    if (trustedOriginsExpanded.length) {
+      str += "trustedOrigins=" + encodeURIComponent(trustedOriginsExpanded.join(","));
+    }
+    if (options.forceEnhancedClipboard === true) {
+      str += (str ? "&" : "") + "forceEnhancedClipboard=true";
+    }
+    return str;
+  };
+  var _inArray = function(elem, array, fromIndex) {
+    if (typeof array.indexOf === "function") {
+      return array.indexOf(elem, fromIndex);
+    }
+    var i, len = array.length;
+    if (typeof fromIndex === "undefined") {
+      fromIndex = 0;
+    } else if (fromIndex < 0) {
+      fromIndex = len + fromIndex;
+    }
+    for (i = fromIndex; i < len; i++) {
+      if (array.hasOwnProperty(i) && array[i] === elem) {
+        return i;
+      }
+    }
+    return -1;
+  };
+  var _prepClip = function(elements) {
+    if (typeof elements === "string") {
+      throw new TypeError("ZeroClipboard doesn't accept query strings.");
+    }
+    return typeof elements.length !== "number" ? [ elements ] : elements;
+  };
+  var _dispatchCallback = function(func, context, args, async) {
+    if (async) {
+      window.setTimeout(function() {
+        func.apply(context, args);
+      }, 0);
+    } else {
+      func.apply(context, args);
+    }
+  };
+  var _getSafeZIndex = function(val) {
+    var zIndex, tmp;
+    if (val) {
+      if (typeof val === "number" && val > 0) {
+        zIndex = val;
+      } else if (typeof val === "string" && (tmp = parseInt(val, 10)) && !isNaN(tmp) && tmp > 0) {
+        zIndex = tmp;
+      }
+    }
+    if (!zIndex) {
+      if (typeof _globalConfig.zIndex === "number" && _globalConfig.zIndex > 0) {
+        zIndex = _globalConfig.zIndex;
+      } else if (typeof _globalConfig.zIndex === "string" && (tmp = parseInt(_globalConfig.zIndex, 10)) && !isNaN(tmp) && tmp > 0) {
+        zIndex = tmp;
+      }
+    }
+    return zIndex || 0;
+  };
+  var _extend = function() {
+    var i, len, arg, prop, src, copy, target = arguments[0] || {};
+    for (i = 1, len = arguments.length; i < len; i++) {
+      if ((arg = arguments[i]) != null) {
+        for (prop in arg) {
+          if (arg.hasOwnProperty(prop)) {
+            src = target[prop];
+            copy = arg[prop];
+            if (target === copy) {
+              continue;
+            }
+            if (copy !== undefined) {
+              target[prop] = copy;
+            }
+          }
+        }
+      }
+    }
+    return target;
+  };
+  var _extractDomain = function(originOrUrl) {
+    if (originOrUrl == null || originOrUrl === "") {
+      return null;
+    }
+    originOrUrl = originOrUrl.replace(/^\s+|\s+$/g, "");
+    if (originOrUrl === "") {
+      return null;
+    }
+    var protocolIndex = originOrUrl.indexOf("//");
+    originOrUrl = protocolIndex === -1 ? originOrUrl : originOrUrl.slice(protocolIndex + 2);
+    var pathIndex = originOrUrl.indexOf("/");
+    originOrUrl = pathIndex === -1 ? originOrUrl : protocolIndex === -1 || pathIndex === 0 ? null : originOrUrl.slice(0, pathIndex);
+    if (originOrUrl && originOrUrl.slice(-4).toLowerCase() === ".swf") {
+      return null;
+    }
+    return originOrUrl || null;
+  };
+  var _determineScriptAccess = function() {
+    var _extractAllDomains = function(origins, resultsArray) {
+      var i, len, tmp;
+      if (origins == null || resultsArray[0] === "*") {
+        return;
+      }
+      if (typeof origins === "string") {
+        origins = [ origins ];
+      }
+      if (!(typeof origins === "object" && typeof origins.length === "number")) {
+        return;
+      }
+      for (i = 0, len = origins.length; i < len; i++) {
+        if (origins.hasOwnProperty(i) && (tmp = _extractDomain(origins[i]))) {
+          if (tmp === "*") {
+            resultsArray.length = 0;
+            resultsArray.push("*");
+            break;
+          }
+          if (_inArray(tmp, resultsArray) === -1) {
+            resultsArray.push(tmp);
+          }
+        }
+      }
+    };
+    return function(currentDomain, configOptions) {
+      var swfDomain = _extractDomain(configOptions.swfPath);
+      if (swfDomain === null) {
+        swfDomain = currentDomain;
+      }
+      var trustedDomains = [];
+      _extractAllDomains(configOptions.trustedOrigins, trustedDomains);
+      _extractAllDomains(configOptions.trustedDomains, trustedDomains);
+      var len = trustedDomains.length;
+      if (len > 0) {
+        if (len === 1 && trustedDomains[0] === "*") {
+          return "always";
+        }
+        if (_inArray(currentDomain, trustedDomains) !== -1) {
+          if (len === 1 && currentDomain === swfDomain) {
+            return "sameDomain";
+          }
+          return "always";
+        }
+      }
+      return "never";
+    };
+  }();
+  var _objectKeys = function(obj) {
+    if (obj == null) {
+      return [];
+    }
+    if (Object.keys) {
+      return Object.keys(obj);
+    }
+    var keys = [];
+    for (var prop in obj) {
+      if (obj.hasOwnProperty(prop)) {
+        keys.push(prop);
+      }
+    }
+    return keys;
+  };
+  var _deleteOwnProperties = function(obj) {
+    if (obj) {
+      for (var prop in obj) {
+        if (obj.hasOwnProperty(prop)) {
+          delete obj[prop];
+        }
+      }
+    }
+    return obj;
+  };
+  var _safeActiveElement = function() {
+    try {
+      return document.activeElement;
+    } catch (err) {}
+    return null;
+  };
+  var _pick = function(obj, keys) {
+    var newObj = {};
+    for (var i = 0, len = keys.length; i < len; i++) {
+      if (keys[i] in obj) {
+        newObj[keys[i]] = obj[keys[i]];
+      }
+    }
+    return newObj;
+  };
+  var _omit = function(obj, keys) {
+    var newObj = {};
+    for (var prop in obj) {
+      if (_inArray(prop, keys) === -1) {
+        newObj[prop] = obj[prop];
+      }
+    }
+    return newObj;
+  };
+  var _mapClipDataToFlash = function(clipData) {
+    var newClipData = {}, formatMap = {};
+    if (!(typeof clipData === "object" && clipData)) {
+      return;
+    }
+    for (var dataFormat in clipData) {
+      if (dataFormat && clipData.hasOwnProperty(dataFormat) && typeof clipData[dataFormat] === "string" && clipData[dataFormat]) {
+        switch (dataFormat.toLowerCase()) {
+         case "text/plain":
+         case "text":
+         case "air:text":
+         case "flash:text":
+          newClipData.text = clipData[dataFormat];
+          formatMap.text = dataFormat;
+          break;
+
+         case "text/html":
+         case "html":
+         case "air:html":
+         case "flash:html":
+          newClipData.html = clipData[dataFormat];
+          formatMap.html = dataFormat;
+          break;
+
+         case "application/rtf":
+         case "text/rtf":
+         case "rtf":
+         case "richtext":
+         case "air:rtf":
+         case "flash:rtf":
+          newClipData.rtf = clipData[dataFormat];
+          formatMap.rtf = dataFormat;
+          break;
+
+         default:
+          break;
+        }
+      }
+    }
+    return {
+      data: newClipData,
+      formatMap: formatMap
+    };
+  };
+  var _mapClipResultsFromFlash = function(clipResults, formatMap) {
+    if (!(typeof clipResults === "object" && clipResults && typeof formatMap === "object" && formatMap)) {
+      return clipResults;
+    }
+    var newResults = {};
+    for (var prop in clipResults) {
+      if (clipResults.hasOwnProperty(prop)) {
+        if (prop !== "success" && prop !== "data") {
+          newResults[prop] = clipResults[prop];
+          continue;
+        }
+        newResults[prop] = {};
+        var tmpHash = clipResults[prop];
+        for (var dataFormat in tmpHash) {
+          if (dataFormat && tmpHash.hasOwnProperty(dataFormat) && formatMap.hasOwnProperty(dataFormat)) {
+            newResults[prop][formatMap[dataFormat]] = tmpHash[dataFormat];
+          }
+        }
+      }
+    }
+    return newResults;
+  };
+  var _args = function(arraySlice) {
+    return function(args) {
+      return arraySlice.call(args, 0);
+    };
+  }(window.Array.prototype.slice);
+  var _detectFlashSupport = function() {
+    var plugin, ax, mimeType, hasFlash = false, isActiveX = false, isPPAPI = false, flashVersion = "";
+    function parseFlashVersion(desc) {
+      var matches = desc.match(/[\d]+/g);
+      matches.length = 3;
+      return matches.join(".");
+    }
+    function isPepperFlash(flashPlayerFileName) {
+      return !!flashPlayerFileName && (flashPlayerFileName = flashPlayerFileName.toLowerCase()) && (/^(pepflashplayer\.dll|libpepflashplayer\.so|pepperflashplayer\.plugin)$/.test(flashPlayerFileName) || flashPlayerFileName.slice(-13) === "chrome.plugin");
+    }
+    function inspectPlugin(plugin) {
+      if (plugin) {
+        hasFlash = true;
+        if (plugin.version) {
+          flashVersion = parseFlashVersion(plugin.version);
+        }
+        if (!flashVersion && plugin.description) {
+          flashVersion = parseFlashVersion(plugin.description);
+        }
+        if (plugin.filename) {
+          isPPAPI = isPepperFlash(plugin.filename);
+        }
+      }
+    }
+    if (navigator.plugins && navigator.plugins.length) {
+      plugin = navigator.plugins["Shockwave Flash"];
+      inspectPlugin(plugin);
+      if (navigator.plugins["Shockwave Flash 2.0"]) {
+        hasFlash = true;
+        flashVersion = "2.0.0.11";
+      }
+    } else if (navigator.mimeTypes && navigator.mimeTypes.length) {
+      mimeType = navigator.mimeTypes["application/x-shockwave-flash"];
+      plugin = mimeType && mimeType.enabledPlugin;
+      inspectPlugin(plugin);
+    } else if (typeof ActiveXObject !== "undefined") {
+      isActiveX = true;
+      try {
+        ax = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
+        hasFlash = true;
+        flashVersion = parseFlashVersion(ax.GetVariable("$version"));
+      } catch (e1) {
+        try {
+          ax = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
+          hasFlash = true;
+          flashVersion = "6.0.21";
+        } catch (e2) {
+          try {
+            ax = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
+            hasFlash = true;
+            flashVersion = parseFlashVersion(ax.GetVariable("$version"));
+          } catch (e3) {
+            isActiveX = false;
+          }
+        }
+      }
+    }
+    _flashState.disabled = hasFlash !== true;
+    _flashState.outdated = flashVersion && parseFloat(flashVersion) < 11;
+    _flashState.version = flashVersion || "0.0.0";
+    _flashState.pluginType = isPPAPI ? "pepper" : isActiveX ? "activex" : hasFlash ? "netscape" : "unknown";
+  };
+  _detectFlashSupport();
+  var ZeroClipboard = function(elements) {
+    if (!(this instanceof ZeroClipboard)) {
+      return new ZeroClipboard(elements);
+    }
+    this.id = "" + _clientIdCounter++;
+    _clientMeta[this.id] = {
+      instance: this,
+      elements: [],
+      handlers: {}
+    };
+    if (elements) {
+      this.clip(elements);
+    }
+    if (typeof _flashState.ready !== "boolean") {
+      _flashState.ready = false;
+    }
+    if (!ZeroClipboard.isFlashUnusable() && _flashState.bridge === null) {
+      var _client = this;
+      var maxWait = _globalConfig.flashLoadTimeout;
+      if (typeof maxWait === "number" && maxWait >= 0) {
+        setTimeout(function() {
+          if (typeof _flashState.deactivated !== "boolean") {
+            _flashState.deactivated = true;
+          }
+          if (_flashState.deactivated === true) {
+            ZeroClipboard.emit({
+              type: "error",
+              name: "flash-deactivated",
+              client: _client
+            });
+          }
+        }, maxWait);
+      }
+      _flashState.overdue = false;
+      _bridge();
+    }
+  };
+  ZeroClipboard.prototype.setText = function(text) {
+    ZeroClipboard.setData("text/plain", text);
+    return this;
+  };
+  ZeroClipboard.prototype.setHtml = function(html) {
+    ZeroClipboard.setData("text/html", html);
+    return this;
+  };
+  ZeroClipboard.prototype.setRichText = function(richText) {
+    ZeroClipboard.setData("application/rtf", richText);
+    return this;
+  };
+  ZeroClipboard.prototype.setData = function() {
+    ZeroClipboard.setData.apply(ZeroClipboard, _args(arguments));
+    return this;
+  };
+  ZeroClipboard.prototype.clearData = function() {
+    ZeroClipboard.clearData.apply(ZeroClipboard, _args(arguments));
+    return this;
+  };
+  ZeroClipboard.prototype.setSize = function(width, height) {
+    _setSize(width, height);
+    return this;
+  };
+  var _setHandCursor = function(enabled) {
+    if (_flashState.ready === true && _flashState.bridge && typeof _flashState.bridge.setHandCursor === "function") {
+      _flashState.bridge.setHandCursor(enabled);
+    } else {
+      _flashState.ready = false;
+    }
+  };
+  ZeroClipboard.prototype.destroy = function() {
+    this.unclip();
+    this.off();
+    delete _clientMeta[this.id];
+  };
+  var _getAllClients = function() {
+    var i, len, client, clients = [], clientIds = _objectKeys(_clientMeta);
+    for (i = 0, len = clientIds.length; i < len; i++) {
+      client = _clientMeta[clientIds[i]].instance;
+      if (client && client instanceof ZeroClipboard) {
+        clients.push(client);
+      }
+    }
+    return clients;
+  };
+  ZeroClipboard.version = "2.0.0-beta.5";
+  var _globalConfig = {
+    swfPath: _swfPath,
+    trustedDomains: window.location.host ? [ window.location.host ] : [],
+    cacheBust: true,
+    forceHandCursor: false,
+    forceEnhancedClipboard: false,
+    zIndex: 999999999,
+    debug: false,
+    title: null,
+    autoActivate: true,
+    flashLoadTimeout: 3e4
+  };
+  ZeroClipboard.isFlashUnusable = function() {
+    return !!(_flashState.disabled || _flashState.outdated || _flashState.unavailable || _flashState.deactivated);
+  };
+  ZeroClipboard.config = function(options) {
+    if (typeof options === "object" && options !== null) {
+      _extend(_globalConfig, options);
+    }
+    if (typeof options === "string" && options) {
+      if (_globalConfig.hasOwnProperty(options)) {
+        return _globalConfig[options];
+      }
+      return;
+    }
+    var copy = {};
+    for (var prop in _globalConfig) {
+      if (_globalConfig.hasOwnProperty(prop)) {
+        if (typeof _globalConfig[prop] === "object" && _globalConfig[prop] !== null) {
+          if ("length" in _globalConfig[prop]) {
+            copy[prop] = _globalConfig[prop].slice(0);
+          } else {
+            copy[prop] = _extend({}, _globalConfig[prop]);
+          }
+        } else {
+          copy[prop] = _globalConfig[prop];
+        }
+      }
+    }
+    return copy;
+  };
+  ZeroClipboard.destroy = function() {
+    ZeroClipboard.deactivate();
+    for (var clientId in _clientMeta) {
+      if (_clientMeta.hasOwnProperty(clientId) && _clientMeta[clientId]) {
+        var client = _clientMeta[clientId].instance;
+        if (client && typeof client.destroy === "function") {
+          client.destroy();
+        }
+      }
+    }
+    var flashBridge = _flashState.bridge;
+    if (flashBridge) {
+      var htmlBridge = _getHtmlBridge(flashBridge);
+      if (htmlBridge) {
+        if (_flashState.pluginType === "activex" && "readyState" in flashBridge) {
+          flashBridge.style.display = "none";
+          (function removeSwfFromIE() {
+            if (flashBridge.readyState === 4) {
+              for (var prop in flashBridge) {
+                if (typeof flashBridge[prop] === "function") {
+                  flashBridge[prop] = null;
+                }
+              }
+              flashBridge.parentNode.removeChild(flashBridge);
+              if (htmlBridge.parentNode) {
+                htmlBridge.parentNode.removeChild(htmlBridge);
+              }
+            } else {
+              setTimeout(removeSwfFromIE, 10);
+            }
+          })();
+        } else {
+          flashBridge.parentNode.removeChild(flashBridge);
+          if (htmlBridge.parentNode) {
+            htmlBridge.parentNode.removeChild(htmlBridge);
+          }
+        }
+      }
+      _flashState.ready = null;
+      _flashState.bridge = null;
+      _flashState.deactivated = null;
+    }
+    ZeroClipboard.clearData();
+  };
+  ZeroClipboard.activate = function(element) {
+    if (_currentElement) {
+      _removeClass(_currentElement, _globalConfig.hoverClass);
+      _removeClass(_currentElement, _globalConfig.activeClass);
+    }
+    _currentElement = element;
+    _addClass(element, _globalConfig.hoverClass);
+    _reposition();
+    var newTitle = _globalConfig.title || element.getAttribute("title");
+    if (newTitle) {
+      var htmlBridge = _getHtmlBridge(_flashState.bridge);
+      if (htmlBridge) {
+        htmlBridge.setAttribute("title", newTitle);
+      }
+    }
+    var useHandCursor = _globalConfig.forceHandCursor === true || _getStyle(element, "cursor") === "pointer";
+    _setHandCursor(useHandCursor);
+  };
+  ZeroClipboard.deactivate = function() {
+    var htmlBridge = _getHtmlBridge(_flashState.bridge);
+    if (htmlBridge) {
+      htmlBridge.removeAttribute("title");
+      htmlBridge.style.left = "0px";
+      htmlBridge.style.top = "-9999px";
+      _setSize(1, 1);
+    }
+    if (_currentElement) {
+      _removeClass(_currentElement, _globalConfig.hoverClass);
+      _removeClass(_currentElement, _globalConfig.activeClass);
+      _currentElement = null;
+    }
+  };
+  ZeroClipboard.state = function() {
+    return {
+      browser: _pick(window.navigator, [ "userAgent", "platform", "appName" ]),
+      flash: _omit(_flashState, [ "bridge" ]),
+      zeroclipboard: {
+        version: ZeroClipboard.version,
+        config: ZeroClipboard.config()
+      }
+    };
+  };
+  ZeroClipboard.setData = function(format, data) {
+    var dataObj;
+    if (typeof format === "object" && format && typeof data === "undefined") {
+      dataObj = format;
+      ZeroClipboard.clearData();
+    } else if (typeof format === "string" && format) {
+      dataObj = {};
+      dataObj[format] = data;
+    } else {
+      return;
+    }
+    for (var dataFormat in dataObj) {
+      if (dataFormat && dataObj.hasOwnProperty(dataFormat) && typeof dataObj[dataFormat] === "string" && dataObj[dataFormat]) {
+        _clipData[dataFormat] = dataObj[dataFormat];
+      }
+    }
+  };
+  ZeroClipboard.clearData = function(format) {
+    if (typeof format === "undefined") {
+      _deleteOwnProperties(_clipData);
+      _clipDataFormatMap = null;
+    } else if (typeof format === "string" && _clipData.hasOwnProperty(format)) {
+      delete _clipData[format];
+    }
+  };
+  var _bridge = function() {
+    var flashBridge, len;
+    var container = document.getElementById("global-zeroclipboard-html-bridge");
+    if (!container) {
+      var allowScriptAccess = _determineScriptAccess(window.location.host, _globalConfig);
+      var allowNetworking = allowScriptAccess === "never" ? "none" : "all";
+      var flashvars = _vars(_globalConfig);
+      var swfUrl = _globalConfig.swfPath + _cacheBust(_globalConfig.swfPath, _globalConfig);
+      container = _createHtmlBridge();
+      var divToBeReplaced = document.createElement("div");
+      container.appendChild(divToBeReplaced);
+      document.body.appendChild(container);
+      var tmpDiv = document.createElement("div");
+      var oldIE = _flashState.pluginType === "activex";
+      tmpDiv.innerHTML = '<object id="global-zeroclipboard-flash-bridge" name="global-zeroclipboard-flash-bridge" ' + 'width="100%" height="100%" ' + (oldIE ? 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"' : 'type="application/x-shockwave-flash" data="' + swfUrl + '"') + ">" + (oldIE ? '<param name="movie" value="' + swfUrl + '"/>' : "") + '<param name="allowScriptAccess" value="' + allowScriptAccess + '"/>' + '<param name="allowNetworking" value="' + allowNetworking + '"/>' + '<param name="menu" value="false"/>' + '<param name="wmode" value="transparent"/>' + '<param name="flashvars" value="' + flashvars + '"/>' + "</object>";
+      flashBridge = tmpDiv.firstChild;
+      tmpDiv = null;
+      flashBridge.ZeroClipboard = ZeroClipboard;
+      container.replaceChild(flashBridge, divToBeReplaced);
+    }
+    if (!flashBridge) {
+      flashBridge = document["global-zeroclipboard-flash-bridge"];
+      if (flashBridge && (len = flashBridge.length)) {
+        flashBridge = flashBridge[len - 1];
+      }
+      if (!flashBridge) {
+        flashBridge = container.firstChild;
+      }
+    }
+    _flashState.bridge = flashBridge || null;
+  };
+  var _createHtmlBridge = function() {
+    var container = document.createElement("div");
+    container.id = "global-zeroclipboard-html-bridge";
+    container.className = "global-zeroclipboard-container";
+    container.style.position = "absolute";
+    container.style.left = "0px";
+    container.style.top = "-9999px";
+    container.style.width = "1px";
+    container.style.height = "1px";
+    container.style.zIndex = "" + _getSafeZIndex(_globalConfig.zIndex);
+    return container;
+  };
+  var _getHtmlBridge = function(flashBridge) {
+    var htmlBridge = flashBridge && flashBridge.parentNode;
+    while (htmlBridge && htmlBridge.nodeName === "OBJECT" && htmlBridge.parentNode) {
+      htmlBridge = htmlBridge.parentNode;
+    }
+    return htmlBridge || null;
+  };
+  var _reposition = function() {
+    if (_currentElement) {
+      var pos = _getDOMObjectPosition(_currentElement, _globalConfig.zIndex);
+      var htmlBridge = _getHtmlBridge(_flashState.bridge);
+      if (htmlBridge) {
+        htmlBridge.style.top = pos.top + "px";
+        htmlBridge.style.left = pos.left + "px";
+        htmlBridge.style.width = pos.width + "px";
+        htmlBridge.style.height = pos.height + "px";
+        htmlBridge.style.zIndex = pos.zIndex + 1;
+      }
+      _setSize(pos.width, pos.height);
+    }
+  };
+  var _setSize = function(width, height) {
+    var htmlBridge = _getHtmlBridge(_flashState.bridge);
+    if (htmlBridge) {
+      htmlBridge.style.width = width + "px";
+      htmlBridge.style.height = height + "px";
+    }
+  };
+  ZeroClipboard.emit = function(event) {
+    var eventType, eventObj, performCallbackAsync, clients, i, len, eventCopy, returnVal, tmp;
+    if (typeof event === "string" && event) {
+      eventType = event;
+    }
+    if (typeof event === "object" && event && typeof event.type === "string" && event.type) {
+      eventType = event.type;
+      eventObj = event;
+    }
+    if (!eventType) {
+      return;
+    }
+    event = _createEvent(eventType, eventObj);
+    _preprocessEvent(event);
+    if (event.type === "ready" && _flashState.overdue === true) {
+      return ZeroClipboard.emit({
+        type: "error",
+        name: "flash-overdue"
+      });
+    }
+    performCallbackAsync = !/^(before)?copy$/.test(event.type);
+    if (event.client) {
+      _dispatchClientCallbacks.call(event.client, event, performCallbackAsync);
+    } else {
+      clients = event.target && event.target !== window && _globalConfig.autoActivate === true ? _getAllClientsClippedToElement(event.target) : _getAllClients();
+      for (i = 0, len = clients.length; i < len; i++) {
+        eventCopy = _extend({}, event, {
+          client: clients[i]
+        });
+        _dispatchClientCallbacks.call(clients[i], eventCopy, performCallbackAsync);
+      }
+    }
+    if (event.type === "copy") {
+      tmp = _mapClipDataToFlash(_clipData);
+      returnVal = tmp.data;
+      _clipDataFormatMap = tmp.formatMap;
+    }
+    return returnVal;
+  };
+  var _dispatchClientCallbacks = function(event, async) {
+    var handlers = _clientMeta[this.id] && _clientMeta[this.id].handlers[event.type];
+    if (handlers && handlers.length) {
+      var i, len, func, context, originalContext = this;
+      for (i = 0, len = handlers.length; i < len; i++) {
+        func = handlers[i];
+        context = originalContext;
+        if (typeof func === "string" && typeof window[func] === "function") {
+          func = window[func];
+        }
+        if (typeof func === "object" && func && typeof func.handleEvent === "function") {
+          context = func;
+          func = func.handleEvent;
+        }
+        if (typeof func === "function") {
+          _dispatchCallback(func, context, [ event ], async);
+        }
+      }
+    }
+    return this;
+  };
+  var _eventMessages = {
+    ready: "Flash communication is established",
+    error: {
+      "flash-disabled": "Flash is disabled or not installed",
+      "flash-outdated": "Flash is too outdated to support ZeroClipboard",
+      "flash-unavailable": "Flash is unable to communicate bidirectionally with JavaScript",
+      "flash-deactivated": "Flash is too outdated for your browser and/or is configured as click-to-activate",
+      "flash-overdue": "Flash communication was established but NOT within the acceptable time limit"
+    }
+  };
+  var _createEvent = function(eventType, event) {
+    if (!(eventType || event && event.type)) {
+      return;
+    }
+    event = event || {};
+    eventType = (eventType || event.type).toLowerCase();
+    _extend(event, {
+      type: eventType,
+      target: event.target || _currentElement || null,
+      relatedTarget: event.relatedTarget || null,
+      currentTarget: _flashState && _flashState.bridge || null
+    });
+    var msg = _eventMessages[event.type];
+    if (event.type === "error" && event.name && msg) {
+      msg = msg[event.name];
+    }
+    if (msg) {
+      event.message = msg;
+    }
+    if (event.type === "ready") {
+      _extend(event, {
+        target: null,
+        version: _flashState.version
+      });
+    }
+    if (event.type === "error") {
+      event.target = null;
+      if (/^flash-(outdated|unavailable|deactivated|overdue)$/.test(event.name)) {
+        _extend(event, {
+          version: _flashState.version,
+          minimumVersion: "11.0.0"
+        });
+      }
+    }
+    if (event.type === "copy") {
+      event.clipboardData = {
+        setData: ZeroClipboard.setData,
+        clearData: ZeroClipboard.clearData
+      };
+    }
+    if (event.type === "aftercopy") {
+      event = _mapClipResultsFromFlash(event, _clipDataFormatMap);
+    }
+    if (event.target && !event.relatedTarget) {
+      event.relatedTarget = _getRelatedTarget(event.target);
+    }
+    return event;
+  };
+  var _getRelatedTarget = function(targetEl) {
+    var relatedTargetId = targetEl && targetEl.getAttribute && targetEl.getAttribute("data-clipboard-target");
+    return relatedTargetId ? document.getElementById(relatedTargetId) : null;
+  };
+  var _preprocessEvent = function(event) {
+    var element = event.target || _currentElement;
+    switch (event.type) {
+     case "error":
+      if (_inArray(event.name, [ "flash-disabled", "flash-outdated", "flash-deactivated", "flash-overdue" ])) {
+        _extend(_flashState, {
+          disabled: event.name === "flash-disabled",
+          outdated: event.name === "flash-outdated",
+          unavailable: event.name === "flash-unavailable",
+          deactivated: event.name === "flash-deactivated",
+          overdue: event.name === "flash-overdue",
+          ready: false
+        });
+      }
+      break;
+
+     case "ready":
+      var wasDeactivated = _flashState.deactivated === true;
+      _extend(_flashState, {
+        disabled: false,
+        outdated: false,
+        unavailable: false,
+        deactivated: false,
+        overdue: wasDeactivated,
+        ready: !wasDeactivated
+      });
+      break;
+
+     case "copy":
+      var textContent, htmlContent, targetEl = event.relatedTarget;
+      if (!(_clipData["text/html"] || _clipData["text/plain"]) && targetEl && (htmlContent = targetEl.value || targetEl.outerHTML || targetEl.innerHTML) && (textContent = targetEl.value || targetEl.textContent || targetEl.innerText)) {
+        event.clipboardData.clearData();
+        event.clipboardData.setData("text/plain", textContent);
+        if (htmlContent !== textContent) {
+          event.clipboardData.setData("text/html", htmlContent);
+        }
+      } else if (!_clipData["text/plain"] && event.target && (textContent = event.target.getAttribute("data-clipboard-text"))) {
+        event.clipboardData.clearData();
+        event.clipboardData.setData("text/plain", textContent);
+      }
+      break;
+
+     case "aftercopy":
+      ZeroClipboard.clearData();
+      if (element && element !== _safeActiveElement() && element.focus) {
+        element.focus();
+      }
+      break;
+
+     case "mouseover":
+      _addClass(element, _globalConfig.hoverClass);
+      break;
+
+     case "mouseout":
+      if (_globalConfig.autoActivate === true) {
+        ZeroClipboard.deactivate();
+      }
+      break;
+
+     case "mousedown":
+      _addClass(element, _globalConfig.activeClass);
+      break;
+
+     case "mouseup":
+      _removeClass(element, _globalConfig.activeClass);
+      break;
+    }
+  };
+  ZeroClipboard.prototype.on = function(eventName, func) {
+    var i, len, events, added = {}, handlers = _clientMeta[this.id] && _clientMeta[this.id].handlers;
+    if (typeof eventName === "string" && eventName) {
+      events = eventName.toLowerCase().split(/\s+/);
+    } else if (typeof eventName === "object" && eventName && typeof func === "undefined") {
+      for (i in eventName) {
+        if (eventName.hasOwnProperty(i) && typeof i === "string" && i && typeof eventName[i] === "function") {
+          this.on(i, eventName[i]);
+        }
+      }
+    }
+    if (events && events.length) {
+      for (i = 0, len = events.length; i < len; i++) {
+        eventName = events[i].replace(/^on/, "");
+        added[eventName] = true;
+        if (!handlers[eventName]) {
+          handlers[eventName] = [];
+        }
+        handlers[eventName].push(func);
+      }
+      if (added.ready && _flashState.ready) {
+        ZeroClipboard.emit({
+          type: "ready",
+          client: this
+        });
+      }
+      if (added.error) {
+        var errorTypes = [ "disabled", "outdated", "unavailable", "deactivated", "overdue" ];
+        for (i = 0, len = errorTypes.length; i < len; i++) {
+          if (_flashState[errorTypes[i]]) {
+            ZeroClipboard.emit({
+              type: "error",
+              name: "flash-" + errorTypes[i],
+              client: this
+            });
+            break;
+          }
+        }
+      }
+    }
+    return this;
+  };
+  ZeroClipboard.prototype.off = function(eventName, func) {
+    var i, len, foundIndex, events, perEventHandlers, handlers = _clientMeta[this.id] && _clientMeta[this.id].handlers;
+    if (arguments.length === 0) {
+      events = _objectKeys(handlers);
+    } else if (typeof eventName === "string" && eventName) {
+      events = eventName.split(/\s+/);
+    } else if (typeof eventName === "object" && eventName && typeof func === "undefined") {
+      for (i in eventName) {
+        if (eventName.hasOwnProperty(i) && typeof i === "string" && i && typeof eventName[i] === "function") {
+          this.off(i, eventName[i]);
+        }
+      }
+    }
+    if (events && events.length) {
+      for (i = 0, len = events.length; i < len; i++) {
+        eventName = events[i].toLowerCase().replace(/^on/, "");
+        perEventHandlers = handlers[eventName];
+        if (perEventHandlers && perEventHandlers.length) {
+          if (func) {
+            foundIndex = _inArray(func, perEventHandlers);
+            while (foundIndex !== -1) {
+              perEventHandlers.splice(foundIndex, 1);
+              foundIndex = _inArray(func, perEventHandlers, foundIndex);
+            }
+          } else {
+            handlers[eventName].length = 0;
+          }
+        }
+      }
+    }
+    return this;
+  };
+  ZeroClipboard.prototype.handlers = function(eventName) {
+    var prop, copy = null, handlers = _clientMeta[this.id] && _clientMeta[this.id].handlers;
+    if (handlers) {
+      if (typeof eventName === "string" && eventName) {
+        return handlers[eventName] ? handlers[eventName].slice(0) : null;
+      }
+      copy = {};
+      for (prop in handlers) {
+        if (handlers.hasOwnProperty(prop) && handlers[prop]) {
+          copy[prop] = handlers[prop].slice(0);
+        }
+      }
+    }
+    return copy;
+  };
+  ZeroClipboard.prototype.clip = function(elements) {
+    elements = _prepClip(elements);
+    for (var i = 0; i < elements.length; i++) {
+      if (elements.hasOwnProperty(i) && elements[i] && elements[i].nodeType === 1) {
+        if (!elements[i].zcClippingId) {
+          elements[i].zcClippingId = "zcClippingId_" + _elementIdCounter++;
+          _elementMeta[elements[i].zcClippingId] = [ this.id ];
+          if (_globalConfig.autoActivate === true) {
+            _addEventHandler(elements[i], "mouseover", _elementMouseOver);
+          }
+        } else if (_inArray(this.id, _elementMeta[elements[i].zcClippingId]) === -1) {
+          _elementMeta[elements[i].zcClippingId].push(this.id);
+        }
+        var clippedElements = _clientMeta[this.id].elements;
+        if (_inArray(elements[i], clippedElements) === -1) {
+          clippedElements.push(elements[i]);
+        }
+      }
+    }
+    return this;
+  };
+  ZeroClipboard.prototype.unclip = function(elements) {
+    var meta = _clientMeta[this.id];
+    if (!meta) {
+      return this;
+    }
+    var clippedElements = meta.elements;
+    var arrayIndex;
+    if (typeof elements === "undefined") {
+      elements = clippedElements.slice(0);
+    } else {
+      elements = _prepClip(elements);
+    }
+    for (var i = elements.length; i--; ) {
+      if (elements.hasOwnProperty(i) && elements[i] && elements[i].nodeType === 1) {
+        arrayIndex = 0;
+        while ((arrayIndex = _inArray(elements[i], clippedElements, arrayIndex)) !== -1) {
+          clippedElements.splice(arrayIndex, 1);
+        }
+        var clientIds = _elementMeta[elements[i].zcClippingId];
+        if (clientIds) {
+          arrayIndex = 0;
+          while ((arrayIndex = _inArray(this.id, clientIds, arrayIndex)) !== -1) {
+            clientIds.splice(arrayIndex, 1);
+          }
+          if (clientIds.length === 0) {
+            if (_globalConfig.autoActivate === true) {
+              _removeEventHandler(elements[i], "mouseover", _elementMouseOver);
+            }
+            delete elements[i].zcClippingId;
+          }
+        }
+      }
+    }
+    return this;
+  };
+  ZeroClipboard.prototype.elements = function() {
+    var meta = _clientMeta[this.id];
+    return meta && meta.elements ? meta.elements.slice(0) : [];
+  };
+  var _getAllClientsClippedToElement = function(element) {
+    var elementMetaId, clientIds, i, len, client, clients = [];
+    if (element && element.nodeType === 1 && (elementMetaId = element.zcClippingId) && _elementMeta.hasOwnProperty(elementMetaId)) {
+      clientIds = _elementMeta[elementMetaId];
+      if (clientIds && clientIds.length) {
+        for (i = 0, len = clientIds.length; i < len; i++) {
+          client = _clientMeta[clientIds[i]].instance;
+          if (client && client instanceof ZeroClipboard) {
+            clients.push(client);
+          }
+        }
+      }
+    }
+    return clients;
+  };
+  _globalConfig.hoverClass = "zeroclipboard-is-hover";
+  _globalConfig.activeClass = "zeroclipboard-is-active";
+  if (typeof define === "function" && define.amd) {
+    define(function() {
+      return ZeroClipboard;
+    });
+  } else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
+    module.exports = ZeroClipboard;
+  } else {
+    window.ZeroClipboard = ZeroClipboard;
+  }
+})(function() {
+  return this;
+}());
\ No newline at end of file
diff --git a/public/js/ueditor/ueditor.all.js b/public/js/ueditor/ueditor.all.js
new file mode 100644
index 0000000..d2003b2
--- /dev/null
+++ b/public/js/ueditor/ueditor.all.js
@@ -0,0 +1,32409 @@
+/*!
+ * UEditorPlus
+ * version: 2.0.0
+*/
+(function(){
+
+// editor.js
+UEDITOR_CONFIG = window.UEDITOR_CONFIG || {};
+
+var baidu = window.baidu || {};
+
+window.baidu = baidu;
+
+window.UE = baidu.editor = {
+  plugins: {},
+  commands: {},
+  instants: {},
+  I18N: {},
+  _customizeUI: {},
+  version: "2.6.0"
+};
+var dom = (UE.dom = {});
+
+
+// core/browser.js
+/**
+ * 浏览器判断模块
+ * @file
+ * @module UE.browser
+ * @since 1.2.6.1
+ */
+
+/**
+ * 提供浏览器检测的模块
+ * @unfile
+ * @module UE.browser
+ */
+var browser = (UE.browser = (function() {
+  var agent = navigator.userAgent.toLowerCase(),
+    opera = window.opera,
+    browser = {
+      /**
+         * @property {boolean} ie 检测当前浏览器是否为IE
+         * @example
+         * ```javascript
+         * if ( UE.browser.ie ) {
+         *     console.log( '当前浏览器是IE' );
+         * }
+         * ```
+         */
+      ie: /(msie\s|trident.*rv:)([\w.]+)/i.test(agent),
+
+      /**
+         * @property {boolean} opera 检测当前浏览器是否为Opera
+         * @example
+         * ```javascript
+         * if ( UE.browser.opera ) {
+         *     console.log( '当前浏览器是Opera' );
+         * }
+         * ```
+         */
+      opera: !!opera && opera.version,
+
+      /**
+         * @property {boolean} webkit 检测当前浏览器是否是webkit内核的浏览器
+         * @example
+         * ```javascript
+         * if ( UE.browser.webkit ) {
+         *     console.log( '当前浏览器是webkit内核浏览器' );
+         * }
+         * ```
+         */
+      webkit: agent.indexOf(" applewebkit/") > -1,
+
+      /**
+         * @property {boolean} mac 检测当前浏览器是否是运行在mac平台下
+         * @example
+         * ```javascript
+         * if ( UE.browser.mac ) {
+         *     console.log( '当前浏览器运行在mac平台下' );
+         * }
+         * ```
+         */
+      mac: agent.indexOf("macintosh") > -1,
+
+      /**
+         * @property {boolean} quirks 检测当前浏览器是否处于“怪异模式”下
+         * @example
+         * ```javascript
+         * if ( UE.browser.quirks ) {
+         *     console.log( '当前浏览器运行处于“怪异模式”' );
+         * }
+         * ```
+         */
+      quirks: document.compatMode == "BackCompat"
+    };
+
+  /**
+    * @property {boolean} gecko 检测当前浏览器内核是否是gecko内核
+    * @example
+    * ```javascript
+    * if ( UE.browser.gecko ) {
+    *     console.log( '当前浏览器内核是gecko内核' );
+    * }
+    * ```
+    */
+  browser.gecko =
+    navigator.product == "Gecko" &&
+    !browser.webkit &&
+    !browser.opera &&
+    !browser.ie;
+
+  var version = 0;
+
+  // Internet Explorer 6.0+
+  if (browser.ie) {
+    var v1 = agent.match(/(?:msie\s([\w.]+))/);
+    var v2 = agent.match(/(?:trident.*rv:([\w.]+))/);
+    if (v1 && v2 && v1[1] && v2[1]) {
+      version = Math.max(v1[1] * 1, v2[1] * 1);
+    } else if (v1 && v1[1]) {
+      version = v1[1] * 1;
+    } else if (v2 && v2[1]) {
+      version = v2[1] * 1;
+    } else {
+      version = 0;
+    }
+
+    browser.ie11Compat = document.documentMode == 11;
+    /**
+         * @property { boolean } ie9Compat 检测浏览器模式是否为 IE9 兼容模式
+         * @warning 如果浏览器不是IE， 则该值为undefined
+         * @example
+         * ```javascript
+         * if ( UE.browser.ie9Compat ) {
+         *     console.log( '当前浏览器运行在IE9兼容模式下' );
+         * }
+         * ```
+         */
+    browser.ie9Compat = document.documentMode == 9;
+
+    /**
+         * @property { boolean } ie8 检测浏览器是否是IE8浏览器
+         * @warning 如果浏览器不是IE， 则该值为undefined
+         * @example
+         * ```javascript
+         * if ( UE.browser.ie8 ) {
+         *     console.log( '当前浏览器是IE8浏览器' );
+         * }
+         * ```
+         */
+    browser.ie8 = !!document.documentMode;
+
+    /**
+         * @property { boolean } ie8Compat 检测浏览器模式是否为 IE8 兼容模式
+         * @warning 如果浏览器不是IE， 则该值为undefined
+         * @example
+         * ```javascript
+         * if ( UE.browser.ie8Compat ) {
+         *     console.log( '当前浏览器运行在IE8兼容模式下' );
+         * }
+         * ```
+         */
+    browser.ie8Compat = document.documentMode == 8;
+
+    /**
+         * @property { boolean } ie7Compat 检测浏览器模式是否为 IE7 兼容模式
+         * @warning 如果浏览器不是IE， 则该值为undefined
+         * @example
+         * ```javascript
+         * if ( UE.browser.ie7Compat ) {
+         *     console.log( '当前浏览器运行在IE7兼容模式下' );
+         * }
+         * ```
+         */
+    browser.ie7Compat =
+      (version == 7 && !document.documentMode) || document.documentMode == 7;
+
+    /**
+         * @property { boolean } ie6Compat 检测浏览器模式是否为 IE6 模式 或者怪异模式
+         * @warning 如果浏览器不是IE， 则该值为undefined
+         * @example
+         * ```javascript
+         * if ( UE.browser.ie6Compat ) {
+         *     console.log( '当前浏览器运行在IE6模式或者怪异模式下' );
+         * }
+         * ```
+         */
+    browser.ie6Compat = version < 7 || browser.quirks;
+
+    browser.ie9above = version > 8;
+
+    browser.ie9below = version < 9;
+
+    browser.ie11above = version > 10;
+
+    browser.ie11below = version < 11;
+  }
+
+  // Gecko.
+  if (browser.gecko) {
+    var geckoRelease = agent.match(/rv:([\d\.]+)/);
+    if (geckoRelease) {
+      geckoRelease = geckoRelease[1].split(".");
+      version =
+        geckoRelease[0] * 10000 +
+        (geckoRelease[1] || 0) * 100 +
+        (geckoRelease[2] || 0) * 1;
+    }
+  }
+
+  /**
+     * @property { Number } chrome 检测当前浏览器是否为Chrome, 如果是，则返回Chrome的大版本号
+     * @warning 如果浏览器不是chrome， 则该值为undefined
+     * @example
+     * ```javascript
+     * if ( UE.browser.chrome ) {
+     *     console.log( '当前浏览器是Chrome' );
+     * }
+     * ```
+     */
+  if (/chrome\/(\d+\.\d)/i.test(agent)) {
+    browser.chrome = +RegExp["\x241"];
+  }
+
+  /**
+     * @property { Number } safari 检测当前浏览器是否为Safari, 如果是，则返回Safari的大版本号
+     * @warning 如果浏览器不是safari， 则该值为undefined
+     * @example
+     * ```javascript
+     * if ( UE.browser.safari ) {
+     *     console.log( '当前浏览器是Safari' );
+     * }
+     * ```
+     */
+  if (
+    /(\d+\.\d)?(?:\.\d)?\s+safari\/?(\d+\.\d+)?/i.test(agent) &&
+    !/chrome/i.test(agent)
+  ) {
+    browser.safari = +(RegExp["\x241"] || RegExp["\x242"]);
+  }
+
+  // Opera 9.50+
+  if (browser.opera) version = parseFloat(opera.version());
+
+  // WebKit 522+ (Safari 3+)
+  if (browser.webkit)
+    version = parseFloat(agent.match(/ applewebkit\/(\d+)/)[1]);
+
+  /**
+     * @property { Number } version 检测当前浏览器版本号
+     * @remind
+     * <ul>
+     *     <li>IE系列返回值为5,6,7,8,9,10等</li>
+     *     <li>gecko系列会返回10900，158900等</li>
+     *     <li>webkit系列会返回其build号 (如 522等)</li>
+     * </ul>
+     * @example
+     * ```javascript
+     * console.log( '当前浏览器版本号是： ' + UE.browser.version );
+     * ```
+     */
+  browser.version = version;
+
+  /**
+     * @property { boolean } isCompatible 检测当前浏览器是否能够与UEditor良好兼容
+     * @example
+     * ```javascript
+     * if ( UE.browser.isCompatible ) {
+     *     console.log( '浏览器与UEditor能够良好兼容' );
+     * }
+     * ```
+     */
+  browser.isCompatible =
+    !browser.mobile &&
+    ((browser.ie && version >= 6) ||
+      (browser.gecko && version >= 10801) ||
+      (browser.opera && version >= 9.5) ||
+      (browser.air && version >= 1) ||
+      (browser.webkit && version >= 522) ||
+      false);
+  return browser;
+})());
+//快捷方式
+var ie = browser.ie,
+  webkit = browser.webkit,
+  gecko = browser.gecko,
+  opera = browser.opera;
+
+
+// core/utils.js
+/**
+ * 工具函数包
+ * @file
+ * @module UE.utils
+ * @since 1.2.6.1
+ */
+
+/**
+ * UEditor封装使用的静态工具函数
+ * @module UE.utils
+ * @unfile
+ */
+
+var utils = (UE.utils = {
+  /**
+     * 用给定的迭代器遍历对象
+     * @method each
+     * @param { Object } obj 需要遍历的对象
+     * @param { Function } iterator 迭代器， 该方法接受两个参数， 第一个参数是当前所处理的value， 第二个参数是当前遍历对象的key
+     * @example
+     * ```javascript
+     * var demoObj = {
+     *     key1: 1,
+     *     key2: 2
+     * };
+     *
+     * //output: key1: 1, key2: 2
+     * UE.utils.each( demoObj, funciton ( value, key ) {
+     *
+     *     console.log( key + ":" + value );
+     *
+     * } );
+     * ```
+     */
+
+  /**
+     * 用给定的迭代器遍历数组或类数组对象
+     * @method each
+     * @param { Array } array 需要遍历的数组或者类数组
+     * @param { Function } iterator 迭代器， 该方法接受两个参数， 第一个参数是当前所处理的value， 第二个参数是当前遍历对象的key
+     * @example
+     * ```javascript
+     * var divs = document.getElmentByTagNames( "div" );
+     *
+     * //output: 0: DIV, 1: DIV ...
+     * UE.utils.each( divs, funciton ( value, key ) {
+     *
+     *     console.log( key + ":" + value.tagName );
+     *
+     * } );
+     * ```
+     */
+  each: function(obj, iterator, context) {
+    if (obj == null) return;
+    if (obj.length === +obj.length) {
+      for (var i = 0, l = obj.length; i < l; i++) {
+        if (iterator.call(context, obj[i], i, obj) === false) return false;
+      }
+    } else {
+      for (var key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          if (iterator.call(context, obj[key], key, obj) === false)
+            return false;
+        }
+      }
+    }
+  },
+
+  /**
+     * 以给定对象作为原型创建一个新对象
+     * @method makeInstance
+     * @param { Object } protoObject 该对象将作为新创建对象的原型
+     * @return { Object } 新的对象， 该对象的原型是给定的protoObject对象
+     * @example
+     * ```javascript
+     *
+     * var protoObject = { sayHello: function () { console.log('Hello UEditor!'); } };
+     *
+     * var newObject = UE.utils.makeInstance( protoObject );
+     * //output: Hello UEditor!
+     * newObject.sayHello();
+     * ```
+     */
+  makeInstance: function(obj) {
+    var noop = new Function();
+    noop.prototype = obj;
+    obj = new noop();
+    noop.prototype = null;
+    return obj;
+  },
+
+  /**
+     * 将source对象中的属性扩展到target对象上
+     * @method extend
+     * @remind 该方法将强制把source对象上的属性复制到target对象上
+     * @see UE.utils.extend(Object,Object,Boolean)
+     * @param { Object } target 目标对象， 新的属性将附加到该对象上
+     * @param { Object } source 源对象， 该对象的属性会被附加到target对象上
+     * @return { Object } 返回target对象
+     * @example
+     * ```javascript
+     *
+     * var target = { name: 'target', sex: 1 },
+     *      source = { name: 'source', age: 17 };
+     *
+     * UE.utils.extend( target, source );
+     *
+     * //output: { name: 'source', sex: 1, age: 17 }
+     * console.log( target );
+     *
+     * ```
+     */
+
+  /**
+     * 将source对象中的属性扩展到target对象上， 根据指定的isKeepTarget值决定是否保留目标对象中与
+     * 源对象属性名相同的属性值。
+     * @method extend
+     * @param { Object } target 目标对象， 新的属性将附加到该对象上
+     * @param { Object } source 源对象， 该对象的属性会被附加到target对象上
+     * @param { Boolean } isKeepTarget 是否保留目标对象中与源对象中属性名相同的属性
+     * @return { Object } 返回target对象
+     * @example
+     * ```javascript
+     *
+     * var target = { name: 'target', sex: 1 },
+     *      source = { name: 'source', age: 17 };
+     *
+     * UE.utils.extend( target, source, true );
+     *
+     * //output: { name: 'target', sex: 1, age: 17 }
+     * console.log( target );
+     *
+     * ```
+     */
+  extend: function(t, s, b) {
+    if (s) {
+      for (var k in s) {
+        if (!b || !t.hasOwnProperty(k)) {
+          t[k] = s[k];
+        }
+      }
+    }
+    return t;
+  },
+
+  /**
+     * 将给定的多个对象的属性复制到目标对象target上
+     * @method extend2
+     * @remind 该方法将强制把源对象上的属性复制到target对象上
+     * @remind 该方法支持两个及以上的参数， 从第二个参数开始， 其属性都会被复制到第一个参数上。 如果遇到同名的属性，
+     *          将会覆盖掉之前的值。
+     * @param { Object } target 目标对象， 新的属性将附加到该对象上
+     * @param { Object... } source 源对象， 支持多个对象， 该对象的属性会被附加到target对象上
+     * @return { Object } 返回target对象
+     * @example
+     * ```javascript
+     *
+     * var target = {},
+     *     source1 = { name: 'source', age: 17 },
+     *     source2 = { title: 'dev' };
+     *
+     * UE.utils.extend2( target, source1, source2 );
+     *
+     * //output: { name: 'source', age: 17, title: 'dev' }
+     * console.log( target );
+     *
+     * ```
+     */
+  extend2: function(t) {
+    var a = arguments;
+    for (var i = 1; i < a.length; i++) {
+      var x = a[i];
+      for (var k in x) {
+        if (!t.hasOwnProperty(k)) {
+          t[k] = x[k];
+        }
+      }
+    }
+    return t;
+  },
+
+  /**
+     * 模拟继承机制， 使得subClass继承自superClass
+     * @method inherits
+     * @param { Object } subClass 子类对象
+     * @param { Object } superClass 超类对象
+     * @warning 该方法只能让subClass继承超类的原型， subClass对象自身的属性和方法不会被继承
+     * @return { Object } 继承superClass后的子类对象
+     * @example
+     * ```javascript
+     * function SuperClass(){
+     *     this.name = "小李";
+     * }
+     *
+     * SuperClass.prototype = {
+     *     hello:function(str){
+     *         console.log(this.name + str);
+     *     }
+     * }
+     *
+     * function SubClass(){
+     *     this.name = "小张";
+     * }
+     *
+     * UE.utils.inherits(SubClass,SuperClass);
+     *
+     * var sub = new SubClass();
+     * //output: '小张早上好!
+     * sub.hello("早上好!");
+     * ```
+     */
+  inherits: function(subClass, superClass) {
+    var oldP = subClass.prototype,
+      newP = utils.makeInstance(superClass.prototype);
+    utils.extend(newP, oldP, true);
+    subClass.prototype = newP;
+    return (newP.constructor = subClass);
+  },
+
+  /**
+     * 用指定的context对象作为函数fn的上下文
+     * @method bind
+     * @param { Function } fn 需要绑定上下文的函数对象
+     * @param { Object } content 函数fn新的上下文对象
+     * @return { Function } 一个新的函数， 该函数作为原始函数fn的代理， 将完成fn的上下文调换工作。
+     * @example
+     * ```javascript
+     *
+     * var name = 'window',
+     *     newTest = null;
+     *
+     * function test () {
+     *     console.log( this.name );
+     * }
+     *
+     * newTest = UE.utils.bind( test, { name: 'object' } );
+     *
+     * //output: object
+     * newTest();
+     *
+     * //output: window
+     * test();
+     *
+     * ```
+     */
+  bind: function(fn, context) {
+    return function() {
+      return fn.apply(context, arguments);
+    };
+  },
+
+  /**
+     * 创建延迟指定时间后执行的函数fn
+     * @method defer
+     * @param { Function } fn 需要延迟执行的函数对象
+     * @param { int } delay 延迟的时间， 单位是毫秒
+     * @warning 该方法的时间控制是不精确的，仅仅只能保证函数的执行是在给定的时间之后，
+     *           而不能保证刚好到达延迟时间时执行。
+     * @return { Function } 目标函数fn的代理函数， 只有执行该函数才能起到延时效果
+     * @example
+     * ```javascript
+     * var start = 0;
+     *
+     * function test(){
+     *     console.log( new Date() - start );
+     * }
+     *
+     * var testDefer = UE.utils.defer( test, 1000 );
+     * //
+     * start = new Date();
+     * //output: (大约在1000毫秒之后输出) 1000
+     * testDefer();
+     * ```
+     */
+
+  /**
+     * 创建延迟指定时间后执行的函数fn, 如果在延迟时间内再次执行该方法， 将会根据指定的exclusion的值，
+     * 决定是否取消前一次函数的执行， 如果exclusion的值为true， 则取消执行，反之，将继续执行前一个方法。
+     * @method defer
+     * @param { Function } fn 需要延迟执行的函数对象
+     * @param { int } delay 延迟的时间， 单位是毫秒
+     * @param { Boolean } exclusion 如果在延迟时间内再次执行该函数，该值将决定是否取消执行前一次函数的执行，
+     *                     值为true表示取消执行， 反之则将在执行前一次函数之后才执行本次函数调用。
+     * @warning 该方法的时间控制是不精确的，仅仅只能保证函数的执行是在给定的时间之后，
+     *           而不能保证刚好到达延迟时间时执行。
+     * @return { Function } 目标函数fn的代理函数， 只有执行该函数才能起到延时效果
+     * @example
+     * ```javascript
+     *
+     * function test(){
+     *     console.log(1);
+     * }
+     *
+     * var testDefer = UE.utils.defer( test, 1000, true );
+     *
+     * //output: (两次调用仅有一次输出) 1
+     * testDefer();
+     * testDefer();
+     * ```
+     */
+  defer: function(fn, delay, exclusion) {
+    var timerID;
+    return function() {
+      if (exclusion) {
+        clearTimeout(timerID);
+      }
+      timerID = setTimeout(fn, delay);
+    };
+  },
+
+  /**
+     * 获取元素item在数组array中首次出现的位置, 如果未找到item， 则返回-1
+     * @method indexOf
+     * @remind 该方法的匹配过程使用的是恒等“===”
+     * @param { Array } array 需要查找的数组对象
+     * @param { * } item 需要在目标数组中查找的值
+     * @return { int } 返回item在目标数组array中首次出现的位置， 如果在数组中未找到item， 则返回-1
+     * @example
+     * ```javascript
+     * var item = 1,
+     *     arr = [ 3, 4, 6, 8, 1, 1, 2 ];
+     *
+     * //output: 4
+     * console.log( UE.utils.indexOf( arr, item ) );
+     * ```
+     */
+
+  /**
+     * 获取元素item数组array中首次出现的位置, 如果未找到item， 则返回-1。通过start的值可以指定搜索的起始位置。
+     * @method indexOf
+     * @remind 该方法的匹配过程使用的是恒等“===”
+     * @param { Array } array 需要查找的数组对象
+     * @param { * } item 需要在目标数组中查找的值
+     * @param { int } start 搜索的起始位置
+     * @return { int } 返回item在目标数组array中的start位置之后首次出现的位置， 如果在数组中未找到item， 则返回-1
+     * @example
+     * ```javascript
+     * var item = 1,
+     *     arr = [ 3, 4, 6, 8, 1, 2, 8, 3, 2, 1, 1, 4 ];
+     *
+     * //output: 9
+     * console.log( UE.utils.indexOf( arr, item, 5 ) );
+     * ```
+     */
+  indexOf: function(array, item, start) {
+    var index = -1;
+    start = this.isNumber(start) ? start : 0;
+    this.each(array, function(v, i) {
+      if (i >= start && v === item) {
+        index = i;
+        return false;
+      }
+    });
+    return index;
+  },
+
+  /**
+     * 移除数组array中所有的元素item
+     * @method removeItem
+     * @param { Array } array 要移除元素的目标数组
+     * @param { * } item 将要被移除的元素
+     * @remind 该方法的匹配过程使用的是恒等“===”
+     * @example
+     * ```javascript
+     * var arr = [ 4, 5, 7, 1, 3, 4, 6 ];
+     *
+     * UE.utils.removeItem( arr, 4 );
+     * //output: [ 5, 7, 1, 3, 6 ]
+     * console.log( arr );
+     *
+     * ```
+     */
+  removeItem: function(array, item) {
+    for (var i = 0, l = array.length; i < l; i++) {
+      if (array[i] === item) {
+        array.splice(i, 1);
+        i--;
+      }
+    }
+  },
+
+  /**
+     * 删除字符串str的首尾空格
+     * @method trim
+     * @param { String } str 需要删除首尾空格的字符串
+     * @return { String } 删除了首尾的空格后的字符串
+     * @example
+     * ```javascript
+     *
+     * var str = " UEdtior ";
+     *
+     * //output: 9
+     * console.log( str.length );
+     *
+     * //output: 7
+     * console.log( UE.utils.trim( " UEdtior " ).length );
+     *
+     * //output: 9
+     * console.log( str.length );
+     *
+     *  ```
+     */
+  trim: function(str) {
+    return str.replace(/(^[ \t\n\r]+)|([ \t\n\r]+$)/g, "");
+  },
+
+  /**
+     * 将字符串str以','分隔成数组后，将该数组转换成哈希对象， 其生成的hash对象的key为数组中的元素， value为1
+     * @method listToMap
+     * @warning 该方法在生成的hash对象中，会为每一个key同时生成一个另一个全大写的key。
+     * @param { String } str 该字符串将被以','分割为数组， 然后进行转化
+     * @return { Object } 转化之后的hash对象
+     * @example
+     * ```javascript
+     *
+     * //output: Object {UEdtior: 1, UEDTIOR: 1, Hello: 1, HELLO: 1}
+     * console.log( UE.utils.listToMap( 'UEdtior,Hello' ) );
+     *
+     * ```
+     */
+
+  /**
+     * 将字符串数组转换成哈希对象， 其生成的hash对象的key为数组中的元素， value为1
+     * @method listToMap
+     * @warning 该方法在生成的hash对象中，会为每一个key同时生成一个另一个全大写的key。
+     * @param { Array } arr 字符串数组
+     * @return { Object } 转化之后的hash对象
+     * @example
+     * ```javascript
+     *
+     * //output: Object {UEdtior: 1, UEDTIOR: 1, Hello: 1, HELLO: 1}
+     * console.log( UE.utils.listToMap( [ 'UEdtior', 'Hello' ] ) );
+     *
+     * ```
+     */
+  listToMap: function(list) {
+    if (!list) return {};
+    list = utils.isArray(list) ? list : list.split(",");
+    for (var i = 0, ci, obj = {}; (ci = list[i++]); ) {
+      obj[ci.toUpperCase()] = obj[ci] = 1;
+    }
+    return obj;
+  },
+
+  /**
+     * 将str中的html符号转义,将转义“'，&，<，"，>，”，“”七个字符
+     * @method unhtml
+     * @param { String } str 需要转义的字符串
+     * @return { String } 转义后的字符串
+     * @example
+     * ```javascript
+     * var html = '<body>&</body>';
+     *
+     * //output: &lt;body&gt;&amp;&lt;/body&gt;
+     * console.log( UE.utils.unhtml( html ) );
+     *
+     * ```
+     */
+  unhtml: function(str, reg) {
+    return str
+      ? str.replace(
+          reg || /[&<">'](?:(amp|lt|ldquo|rdquo|quot|gt|#39|nbsp|#\d+);)?/g,
+          function(a, b) {
+            if (b) {
+              return a;
+            } else {
+              return {
+                "<": "&lt;",
+                "&": "&amp;",
+                '"': "&quot;",
+                "“": "&ldquo;",
+                "”": "&rdquo;",
+                ">": "&gt;",
+                "'": "&#39;"
+              }[a];
+            }
+          }
+        )
+      : "";
+  },
+
+  /**
+     * 将str中的转义字符还原成html字符
+     * @see UE.utils.unhtml(String);
+     * @method html
+     * @param { String } str 需要逆转义的字符串
+     * @return { String } 逆转义后的字符串
+     * @example
+     * ```javascript
+     *
+     * var str = '&lt;body&gt;&amp;&lt;/body&gt;';
+     *
+     * //output: <body>&</body>
+     * console.log( UE.utils.html( str ) );
+     *
+     * ```
+     */
+  html: function(str) {
+    return str
+      ? str.replace(/&((g|l|quo|ldquo|rdquo)t|amp|#39|nbsp);/g, function(m) {
+          return {
+            "&lt;": "<",
+            "&amp;": "&",
+            "&quot;": '"',
+            "&ldquo;": "“",
+            "&rdquo;": "”",
+            "&gt;": ">",
+            "&#39;": "'",
+            "&nbsp;": " "
+          }[m];
+        })
+      : "";
+  },
+
+  /**
+     * 将css样式转换为驼峰的形式
+     * @method cssStyleToDomStyle
+     * @param { String } cssName 需要转换的css样式名
+     * @return { String } 转换成驼峰形式后的css样式名
+     * @example
+     * ```javascript
+     *
+     * var str = 'border-top';
+     *
+     * //output: borderTop
+     * console.log( UE.utils.cssStyleToDomStyle( str ) );
+     *
+     * ```
+     */
+  cssStyleToDomStyle: (function() {
+    var test = document.createElement("div").style,
+      cache = {
+        float: test.cssFloat != undefined
+          ? "cssFloat"
+          : test.styleFloat != undefined ? "styleFloat" : "float"
+      };
+
+    return function(cssName) {
+      return (
+        cache[cssName] ||
+        (cache[cssName] = cssName.toLowerCase().replace(/-./g, function(match) {
+          return match.charAt(1).toUpperCase();
+        }))
+      );
+    };
+  })(),
+
+  /**
+     * 动态加载文件到doc中
+     * @method loadFile
+     * @param { DomDocument } document 需要加载资源文件的文档对象
+     * @param { Object } options 加载资源文件的属性集合， 取值请参考代码示例
+     * @example
+     * ```javascript
+     *
+     * UE.utils.loadFile( document, {
+     *     src:"test.js",
+     *     tag:"script",
+     *     type:"text/javascript",
+     *     defer:"defer"
+     * } );
+     *
+     * ```
+     */
+
+  /**
+     * 动态加载文件到doc中，加载成功后执行的回调函数fn
+     * @method loadFile
+     * @param { DomDocument } document 需要加载资源文件的文档对象
+     * @param { Object } options 加载资源文件的属性集合， 该集合支持的值是script标签和style标签支持的所有属性。
+     * @param { Function } fn 资源文件加载成功之后执行的回调
+     * @warning 对于在同一个文档中多次加载同一URL的文件， 该方法会在第一次加载之后缓存该请求，
+     *           在此之后的所有同一URL的请求， 将会直接触发回调。
+     * @example
+     * ```javascript
+     *
+     * UE.utils.loadFile( document, {
+     *     src:"test.js",
+     *     tag:"script",
+     *     type:"text/javascript",
+     *     defer:"defer"
+     * }, function () {
+     *     console.log('加载成功');
+     * } );
+     *
+     * ```
+     */
+  loadFile: (function() {
+    var tmpList = [];
+
+    function getItem(doc, obj) {
+      try {
+        for (var i = 0, ci; (ci = tmpList[i++]); ) {
+          if (ci.doc === doc && ci.url == (obj.src || obj.href)) {
+            return ci;
+          }
+        }
+      } catch (e) {
+        return null;
+      }
+    }
+
+    return function(doc, obj, fn) {
+      var item = getItem(doc, obj);
+      if (item) {
+        if (item.ready) {
+          fn && fn();
+        } else {
+          item.funs.push(fn);
+        }
+        return;
+      }
+      tmpList.push({
+        doc: doc,
+        url: obj.src || obj.href,
+        funs: [fn]
+      });
+      if (!doc.body) {
+        var html = [];
+        for (var p in obj) {
+          if (p == "tag") continue;
+          html.push(p + '="' + obj[p] + '"');
+        }
+        doc.write(
+          "<" + obj.tag + " " + html.join(" ") + " ></" + obj.tag + ">"
+        );
+        return;
+      }
+      if (obj.id && doc.getElementById(obj.id)) {
+        return;
+      }
+      var element = doc.createElement(obj.tag);
+      delete obj.tag;
+      for (var p in obj) {
+        element.setAttribute(p, obj[p]);
+      }
+      element.onload = element.onreadystatechange = function() {
+        if (!this.readyState || /loaded|complete/.test(this.readyState)) {
+          item = getItem(doc, obj);
+          if (item.funs.length > 0) {
+            item.ready = 1;
+            for (var fi; (fi = item.funs.pop()); ) {
+              fi();
+            }
+          }
+          element.onload = element.onreadystatechange = null;
+        }
+      };
+      element.onerror = function() {
+        throw Error(
+          "The load " +
+            (obj.href || obj.src) +
+            " fails,check the url settings of file ueditor.config.js "
+        );
+      };
+      doc.getElementsByTagName("head")[0].appendChild(element);
+    };
+  })(),
+
+  /**
+     * 判断obj对象是否为空
+     * @method isEmptyObject
+     * @param { * } obj 需要判断的对象
+     * @remind 如果判断的对象是NULL， 将直接返回true， 如果是数组且为空， 返回true， 如果是字符串， 且字符串为空，
+     *          返回true， 如果是普通对象， 且该对象没有任何实例属性， 返回true
+     * @return { Boolean } 对象是否为空
+     * @example
+     * ```javascript
+     *
+     * //output: true
+     * console.log( UE.utils.isEmptyObject( {} ) );
+     *
+     * //output: true
+     * console.log( UE.utils.isEmptyObject( [] ) );
+     *
+     * //output: true
+     * console.log( UE.utils.isEmptyObject( "" ) );
+     *
+     * //output: false
+     * console.log( UE.utils.isEmptyObject( { key: 1 } ) );
+     *
+     * //output: false
+     * console.log( UE.utils.isEmptyObject( [1] ) );
+     *
+     * //output: false
+     * console.log( UE.utils.isEmptyObject( "1" ) );
+     *
+     * ```
+     */
+  isEmptyObject: function(obj) {
+    if (obj == null) return true;
+    if (this.isArray(obj) || this.isString(obj)) return obj.length === 0;
+    for (var key in obj) if (obj.hasOwnProperty(key)) return false;
+    return true;
+  },
+
+  /**
+     * 把rgb格式的颜色值转换成16进制格式
+     * @method fixColor
+     * @param { String } rgb格式的颜色值
+     * @param { String }
+     * @example
+     * rgb(255,255,255)  => "#ffffff"
+     */
+  fixColor: function(name, value) {
+    if (/color/i.test(name) && /rgba?/.test(value)) {
+      var array = value.split(",");
+      if (array.length > 3) return "";
+      value = "#";
+      for (var i = 0, color; (color = array[i++]); ) {
+        color = parseInt(color.replace(/[^\d]/gi, ""), 10).toString(16);
+        value += color.length == 1 ? "0" + color : color;
+      }
+      value = value.toUpperCase();
+    }
+    return value;
+  },
+  /**
+     * 只针对border,padding,margin做了处理，因为性能问题
+     * @public
+     * @function
+     * @param {String}    val style字符串
+     */
+  optCss: function(val) {
+    var padding, margin, border;
+    val = val.replace(/(padding|margin|border)\-([^:]+):([^;]+);?/gi, function(
+      str,
+      key,
+      name,
+      val
+    ) {
+      if (val.split(" ").length == 1) {
+        switch (key) {
+          case "padding":
+            !padding && (padding = {});
+            padding[name] = val;
+            return "";
+          case "margin":
+            !margin && (margin = {});
+            margin[name] = val;
+            return "";
+          case "border":
+            return val == "initial" ? "" : str;
+        }
+      }
+      return str;
+    });
+
+    function opt(obj, name) {
+      if (!obj) {
+        return "";
+      }
+      var t = obj.top,
+        b = obj.bottom,
+        l = obj.left,
+        r = obj.right,
+        val = "";
+      if (!t || !l || !b || !r) {
+        for (var p in obj) {
+          val += ";" + name + "-" + p + ":" + obj[p] + ";";
+        }
+      } else {
+        val +=
+          ";" +
+          name +
+          ":" +
+          (t == b && b == l && l == r
+            ? t
+            : t == b && l == r
+              ? t + " " + l
+              : l == r
+                ? t + " " + l + " " + b
+                : t + " " + r + " " + b + " " + l) +
+          ";";
+      }
+      return val;
+    }
+
+    val += opt(padding, "padding") + opt(margin, "margin");
+    return val
+      .replace(/^[ \n\r\t;]*|[ \n\r\t]*$/, "")
+      .replace(/;([ \n\r\t]+)|\1;/g, ";")
+      .replace(/(&((l|g)t|quot|#39))?;{2,}/g, function(a, b) {
+        return b ? b + ";;" : ";";
+      });
+  },
+
+  /**
+     * 克隆对象
+     * @method clone
+     * @param { Object } source 源对象
+     * @return { Object } source的一个副本
+     */
+
+  /**
+     * 深度克隆对象，将source的属性克隆到target对象， 会覆盖target重名的属性。
+     * @method clone
+     * @param { Object } source 源对象
+     * @param { Object } target 目标对象
+     * @return { Object } 附加了source对象所有属性的target对象
+     */
+  clone: function(source, target) {
+    var tmp;
+    target = target || {};
+    for (var i in source) {
+      if (source.hasOwnProperty(i)) {
+        tmp = source[i];
+        if (typeof tmp == "object") {
+          target[i] = utils.isArray(tmp) ? [] : {};
+          utils.clone(source[i], target[i]);
+        } else {
+          target[i] = tmp;
+        }
+      }
+    }
+    return target;
+  },
+
+  /**
+     * 把cm／pt为单位的值转换为px为单位的值
+     * @method transUnitToPx
+     * @param { String } 待转换的带单位的字符串
+     * @return { String } 转换为px为计量单位的值的字符串
+     * @example
+     * ```javascript
+     *
+     * //output: 500px
+     * console.log( UE.utils.transUnitToPx( '20cm' ) );
+     *
+     * //output: 27px
+     * console.log( UE.utils.transUnitToPx( '20pt' ) );
+     *
+     * ```
+     */
+  transUnitToPx: function(val) {
+    if (!/(pt|cm)/.test(val)) {
+      return val;
+    }
+    var unit;
+    val.replace(/([\d.]+)(\w+)/, function(str, v, u) {
+      val = v;
+      unit = u;
+    });
+    switch (unit) {
+      case "cm":
+        val = parseFloat(val) * 25;
+        break;
+      case "pt":
+        val = Math.round(parseFloat(val) * 96 / 72);
+    }
+    return val + (val ? "px" : "");
+  },
+
+  /**
+     * 在dom树ready之后执行给定的回调函数
+     * @method domReady
+     * @remind 如果在执行该方法的时候， dom树已经ready， 那么回调函数将立刻执行
+     * @param { Function } fn dom树ready之后的回调函数
+     * @example
+     * ```javascript
+     *
+     * UE.utils.domReady( function () {
+     *
+     *     console.log('123');
+     *
+     * } );
+     *
+     * ```
+     */
+  domReady: (function() {
+    var fnArr = [];
+
+    function doReady(doc) {
+      //确保onready只执行一次
+      doc.isReady = true;
+      for (var ci; (ci = fnArr.pop()); ci()) {}
+    }
+
+    return function(onready, win) {
+      win = win || window;
+      var doc = win.document;
+      onready && fnArr.push(onready);
+      if (doc.readyState === "complete") {
+        doReady(doc);
+      } else {
+        doc.isReady && doReady(doc);
+        if (browser.ie && browser.version != 11) {
+          (function() {
+            if (doc.isReady) return;
+            try {
+              doc.documentElement.doScroll("left");
+            } catch (error) {
+              setTimeout(arguments.callee, 0);
+              return;
+            }
+            doReady(doc);
+          })();
+          win.attachEvent("onload", function() {
+            doReady(doc);
+          });
+        } else {
+          doc.addEventListener(
+            "DOMContentLoaded",
+            function() {
+              doc.removeEventListener(
+                "DOMContentLoaded",
+                arguments.callee,
+                false
+              );
+              doReady(doc);
+            },
+            false
+          );
+          win.addEventListener(
+            "load",
+            function() {
+              doReady(doc);
+            },
+            false
+          );
+        }
+      }
+    };
+  })(),
+
+  /**
+     * 动态添加css样式
+     * @method cssRule
+     * @param { String } 节点名称
+     * @grammar UE.utils.cssRule('添加的样式的节点名称',['样式'，'放到哪个document上'])
+     * @grammar UE.utils.cssRule('body','body{background:#ccc}') => null  //给body添加背景颜色
+     * @grammar UE.utils.cssRule('body') =>样式的字符串  //取得key值为body的样式的内容,如果没有找到key值先关的样式将返回空，例如刚才那个背景颜色，将返回 body{background:#ccc}
+     * @grammar UE.utils.cssRule('body',document) => 返回指定key的样式，并且指定是哪个document
+     * @grammar UE.utils.cssRule('body','') =>null //清空给定的key值的背景颜色
+     */
+  cssRule: browser.ie && browser.version != 11
+    ? function(key, style, doc) {
+        var indexList, index;
+        if (
+          style === undefined ||
+          (style && style.nodeType && style.nodeType == 9)
+        ) {
+          //获取样式
+          doc = style && style.nodeType && style.nodeType == 9
+            ? style
+            : doc || document;
+          indexList = doc.indexList || (doc.indexList = {});
+          index = indexList[key];
+          if (index !== undefined) {
+            return doc.styleSheets[index].cssText;
+          }
+          return undefined;
+        }
+        doc = doc || document;
+        indexList = doc.indexList || (doc.indexList = {});
+        index = indexList[key];
+        //清除样式
+        if (style === "") {
+          if (index !== undefined) {
+            doc.styleSheets[index].cssText = "";
+            delete indexList[key];
+            return true;
+          }
+          return false;
+        }
+
+        //添加样式
+        if (index !== undefined) {
+          sheetStyle = doc.styleSheets[index];
+        } else {
+          sheetStyle = doc.createStyleSheet(
+            "",
+            (index = doc.styleSheets.length)
+          );
+          indexList[key] = index;
+        }
+        sheetStyle.cssText = style;
+      }
+    : function(key, style, doc) {
+        var head, node;
+        if (
+          style === undefined ||
+          (style && style.nodeType && style.nodeType == 9)
+        ) {
+          //获取样式
+          doc = style && style.nodeType && style.nodeType == 9
+            ? style
+            : doc || document;
+          node = doc.getElementById(key);
+          return node ? node.innerHTML : undefined;
+        }
+        doc = doc || document;
+        node = doc.getElementById(key);
+
+        //清除样式
+        if (style === "") {
+          if (node) {
+            node.parentNode.removeChild(node);
+            return true;
+          }
+          return false;
+        }
+
+        //添加样式
+        if (node) {
+          node.innerHTML = style;
+        } else {
+          node = doc.createElement("style");
+          node.id = key;
+          node.innerHTML = style;
+          doc.getElementsByTagName("head")[0].appendChild(node);
+        }
+      },
+  sort: function(array, compareFn) {
+    compareFn =
+      compareFn ||
+      function(item1, item2) {
+        return item1.localeCompare(item2);
+      };
+    for (var i = 0, len = array.length; i < len; i++) {
+      for (var j = i, length = array.length; j < length; j++) {
+        if (compareFn(array[i], array[j]) > 0) {
+          var t = array[i];
+          array[i] = array[j];
+          array[j] = t;
+        }
+      }
+    }
+    return array;
+  },
+  serializeParam: function(json) {
+    var strArr = [];
+    for (var i in json) {
+      //忽略默认的几个参数
+      if (i == "method" || i == "timeout" || i == "async") continue;
+      //传递过来的对象和函数不在提交之列
+      if (
+        !(
+          (typeof json[i]).toLowerCase() == "function" ||
+          (typeof json[i]).toLowerCase() == "object"
+        )
+      ) {
+        strArr.push(encodeURIComponent(i) + "=" + encodeURIComponent(json[i]));
+      } else if (utils.isArray(json[i])) {
+        //支持传数组内容
+        for (var j = 0; j < json[i].length; j++) {
+          strArr.push(
+            encodeURIComponent(i) + "[]=" + encodeURIComponent(json[i][j])
+          );
+        }
+      }
+    }
+    return strArr.join("&");
+  },
+  formatUrl: function(url) {
+    var u = url.replace(/&&/g, "&");
+    u = u.replace(/\?&/g, "?");
+    u = u.replace(/&$/g, "");
+    u = u.replace(/&#/g, "#");
+    u = u.replace(/&+/g, "&");
+    return u;
+  },
+  addStyleContent: function(cssContent){
+    var style = document.createElement("style");
+    style.innerHTML = cssContent;
+    document.head.appendChild(style);
+  },
+  isCrossDomainUrl: function(url) {
+    var a = document.createElement("a");
+    a.href = url;
+    if (browser.ie) {
+      a.href = a.href;
+    }
+    return !(
+      a.protocol == location.protocol &&
+      a.hostname == location.hostname &&
+      (a.port == location.port ||
+        (a.port == "80" && location.port == "") ||
+        (a.port == "" && location.port == "80"))
+    );
+  },
+  clearEmptyAttrs: function(obj) {
+    for (var p in obj) {
+      if (obj[p] === "") {
+        delete obj[p];
+      }
+    }
+    return obj;
+  },
+  str2json: function(s) {
+    if (!utils.isString(s)) return null;
+    if (window.JSON) {
+      return JSON.parse(s);
+    } else {
+      return new Function("return " + utils.trim(s || ""))();
+    }
+  },
+  json2str: (function() {
+    if (window.JSON) {
+      return JSON.stringify;
+    } else {
+      var escapeMap = {
+        "\b": "\\b",
+        "\t": "\\t",
+        "\n": "\\n",
+        "\f": "\\f",
+        "\r": "\\r",
+        '"': '\\"',
+        "\\": "\\\\"
+      };
+
+      function encodeString(source) {
+        if (/["\\\x00-\x1f]/.test(source)) {
+          source = source.replace(/["\\\x00-\x1f]/g, function(match) {
+            var c = escapeMap[match];
+            if (c) {
+              return c;
+            }
+            c = match.charCodeAt();
+            return (
+              "\\u00" + Math.floor(c / 16).toString(16) + (c % 16).toString(16)
+            );
+          });
+        }
+        return '"' + source + '"';
+      }
+
+      function encodeArray(source) {
+        var result = ["["],
+          l = source.length,
+          preComma,
+          i,
+          item;
+
+        for (i = 0; i < l; i++) {
+          item = source[i];
+
+          switch (typeof item) {
+            case "undefined":
+            case "function":
+            case "unknown":
+              break;
+            default:
+              if (preComma) {
+                result.push(",");
+              }
+              result.push(utils.json2str(item));
+              preComma = 1;
+          }
+        }
+        result.push("]");
+        return result.join("");
+      }
+
+      function pad(source) {
+        return source < 10 ? "0" + source : source;
+      }
+
+      function encodeDate(source) {
+        return (
+          '"' +
+          source.getFullYear() +
+          "-" +
+          pad(source.getMonth() + 1) +
+          "-" +
+          pad(source.getDate()) +
+          "T" +
+          pad(source.getHours()) +
+          ":" +
+          pad(source.getMinutes()) +
+          ":" +
+          pad(source.getSeconds()) +
+          '"'
+        );
+      }
+
+      return function(value) {
+        switch (typeof value) {
+          case "undefined":
+            return "undefined";
+
+          case "number":
+            return isFinite(value) ? String(value) : "null";
+
+          case "string":
+            return encodeString(value);
+
+          case "boolean":
+            return String(value);
+
+          default:
+            if (value === null) {
+              return "null";
+            } else if (utils.isArray(value)) {
+              return encodeArray(value);
+            } else if (utils.isDate(value)) {
+              return encodeDate(value);
+            } else {
+              var result = ["{"],
+                encode = utils.json2str,
+                preComma,
+                item;
+
+              for (var key in value) {
+                if (Object.prototype.hasOwnProperty.call(value, key)) {
+                  item = value[key];
+                  switch (typeof item) {
+                    case "undefined":
+                    case "unknown":
+                    case "function":
+                      break;
+                    default:
+                      if (preComma) {
+                        result.push(",");
+                      }
+                      preComma = 1;
+                      result.push(encode(key) + ":" + encode(item));
+                  }
+                }
+              }
+              result.push("}");
+              return result.join("");
+            }
+        }
+      };
+    }
+  })()
+});
+/**
+ * 判断给定的对象是否是字符串
+ * @method isString
+ * @param { * } object 需要判断的对象
+ * @return { Boolean } 给定的对象是否是字符串
+ */
+
+/**
+ * 判断给定的对象是否是数组
+ * @method isArray
+ * @param { * } object 需要判断的对象
+ * @return { Boolean } 给定的对象是否是数组
+ */
+
+/**
+ * 判断给定的对象是否是一个Function
+ * @method isFunction
+ * @param { * } object 需要判断的对象
+ * @return { Boolean } 给定的对象是否是Function
+ */
+
+/**
+ * 判断给定的对象是否是Number
+ * @method isNumber
+ * @param { * } object 需要判断的对象
+ * @return { Boolean } 给定的对象是否是Number
+ */
+
+/**
+ * 判断给定的对象是否是一个正则表达式
+ * @method isRegExp
+ * @param { * } object 需要判断的对象
+ * @return { Boolean } 给定的对象是否是正则表达式
+ */
+
+/**
+ * 判断给定的对象是否是一个普通对象
+ * @method isObject
+ * @param { * } object 需要判断的对象
+ * @return { Boolean } 给定的对象是否是普通对象
+ */
+utils.each(
+  ["String", "Function", "Array", "Number", "RegExp", "Object", "Date"],
+  function(v) {
+    UE.utils["is" + v] = function(obj) {
+      return Object.prototype.toString.apply(obj) == "[object " + v + "]";
+    };
+  }
+);
+
+
+// core/EventBase.js
+/**
+ * UE采用的事件基类
+ * @file
+ * @module UE
+ * @class EventBase
+ * @since 1.2.6.1
+ */
+
+/**
+ * UEditor公用空间，UEditor所有的功能都挂载在该空间下
+ * @unfile
+ * @module UE
+ */
+
+/**
+ * UE采用的事件基类，继承此类的对应类将获取addListener,removeListener,fireEvent方法。
+ * 在UE中，Editor以及所有ui实例都继承了该类，故可以在对应的ui对象以及editor对象上使用上述方法。
+ * @unfile
+ * @module UE
+ * @class EventBase
+ */
+
+/**
+ * 通过此构造器，子类可以继承EventBase获取事件监听的方法
+ * @constructor
+ * @example
+ * ```javascript
+ * UE.EventBase.call(editor);
+ * ```
+ */
+var EventBase = (UE.EventBase = function() {});
+
+EventBase.prototype = {
+  /**
+     * 注册事件监听器
+     * @method addListener
+     * @param { String } types 监听的事件名称，同时监听多个事件使用空格分隔
+     * @param { Function } fn 监听的事件被触发时，会执行该回调函数
+     * @waining 事件被触发时，监听的函数假如返回的值恒等于true，回调函数的队列中后面的函数将不执行
+     * @example
+     * ```javascript
+     * editor.addListener('selectionchange',function(){
+     *      console.log("选区已经变化！");
+     * })
+     * editor.addListener('beforegetcontent aftergetcontent',function(type){
+     *         if(type == 'beforegetcontent'){
+     *             //do something
+     *         }else{
+     *             //do something
+     *         }
+     *         console.log(this.getContent) // this是注册的事件的编辑器实例
+     * })
+     * ```
+     * @see UE.EventBase:fireEvent(String)
+     */
+  addListener: function(types, listener) {
+    types = utils.trim(types).split(/\s+/);
+    for (var i = 0, ti; (ti = types[i++]); ) {
+      getListener(this, ti, true).push(listener);
+    }
+  },
+
+  on: function(types, listener) {
+    return this.addListener(types, listener);
+  },
+  off: function(types, listener) {
+    return this.removeListener(types, listener);
+  },
+  trigger: function() {
+    return this.fireEvent.apply(this, arguments);
+  },
+  /**
+     * 移除事件监听器
+     * @method removeListener
+     * @param { String } types 移除的事件名称，同时移除多个事件使用空格分隔
+     * @param { Function } fn 移除监听事件的函数引用
+     * @example
+     * ```javascript
+     * //changeCallback为方法体
+     * editor.removeListener("selectionchange",changeCallback);
+     * ```
+     */
+  removeListener: function(types, listener) {
+    types = utils.trim(types).split(/\s+/);
+    for (var i = 0, ti; (ti = types[i++]); ) {
+      utils.removeItem(getListener(this, ti) || [], listener);
+    }
+  },
+
+  /**
+     * 触发事件
+     * @method fireEvent
+     * @param { String } types 触发的事件名称，同时触发多个事件使用空格分隔
+     * @remind 该方法会触发addListener
+     * @return { * } 返回触发事件的队列中，最后执行的回调函数的返回值
+     * @example
+     * ```javascript
+     * editor.fireEvent("selectionchange");
+     * ```
+     */
+
+  /**
+     * 触发事件
+     * @method fireEvent
+     * @param { String } types 触发的事件名称，同时触发多个事件使用空格分隔
+     * @param { *... } options 可选参数，可以传入一个或多个参数，会传给事件触发的回调函数
+     * @return { * } 返回触发事件的队列中，最后执行的回调函数的返回值
+     * @example
+     * ```javascript
+     *
+     * editor.addListener( "selectionchange", function ( type, arg1, arg2 ) {
+     *
+     *     console.log( arg1 + " " + arg2 );
+     *
+     * } );
+     *
+     * //触发selectionchange事件， 会执行上面的事件监听器
+     * //output: Hello World
+     * editor.fireEvent("selectionchange", "Hello", "World");
+     * ```
+     */
+  fireEvent: function() {
+    var types = arguments[0];
+    types = utils.trim(types).split(" ");
+    for (var i = 0, ti; (ti = types[i++]); ) {
+      var listeners = getListener(this, ti),
+        r,
+        t,
+        k;
+      if (listeners) {
+        k = listeners.length;
+        while (k--) {
+          if (!listeners[k]) continue;
+          t = listeners[k].apply(this, arguments);
+          if (t === true) {
+            return t;
+          }
+          if (t !== undefined) {
+            r = t;
+          }
+        }
+      }
+      if ((t = this["on" + ti.toLowerCase()])) {
+        r = t.apply(this, arguments);
+      }
+    }
+    return r;
+  }
+};
+/**
+ * 获得对象所拥有监听类型的所有监听器
+ * @unfile
+ * @module UE
+ * @since 1.2.6.1
+ * @method getListener
+ * @public
+ * @param { Object } obj  查询监听器的对象
+ * @param { String } type 事件类型
+ * @param { Boolean } force  为true且当前所有type类型的侦听器不存在时，创建一个空监听器数组
+ * @return { Array } 监听器数组
+ */
+function getListener(obj, type, force) {
+  var allListeners;
+  type = type.toLowerCase();
+  return (
+    (allListeners =
+      obj.__allListeners || (force && (obj.__allListeners = {}))) &&
+    (allListeners[type] || (force && (allListeners[type] = [])))
+  );
+}
+
+
+// core/dtd.js
+///import editor.js
+///import core/dom/dom.js
+///import core/utils.js
+/**
+ * dtd html语义化的体现类
+ * @constructor
+ * @namespace dtd
+ */
+var dtd = (dom.dtd = (function() {
+  function _(s) {
+    for (var k in s) {
+      s[k.toUpperCase()] = s[k];
+    }
+    return s;
+  }
+  var X = utils.extend2;
+  var A = _({ isindex: 1, fieldset: 1 }),
+    B = _({ input: 1, button: 1, select: 1, textarea: 1, label: 1 }),
+    C = X(_({ a: 1 }), B),
+    D = X({ iframe: 1 }, C),
+    E = _({
+      hr: 1,
+      ul: 1,
+      menu: 1,
+      div: 1,
+      blockquote: 1,
+      noscript: 1,
+      table: 1,
+      center: 1,
+      address: 1,
+      dir: 1,
+      pre: 1,
+      h5: 1,
+      dl: 1,
+      h4: 1,
+      noframes: 1,
+      h6: 1,
+      ol: 1,
+      h1: 1,
+      h3: 1,
+      h2: 1
+    }),
+    F = _({ ins: 1, del: 1, script: 1, style: 1 }),
+    G = X(
+      _({
+        mark: 1,
+        b: 1,
+        acronym: 1,
+        bdo: 1,
+        var: 1,
+        "#": 1,
+        abbr: 1,
+        code: 1,
+        br: 1,
+        i: 1,
+        cite: 1,
+        kbd: 1,
+        u: 1,
+        strike: 1,
+        s: 1,
+        tt: 1,
+        strong: 1,
+        q: 1,
+        samp: 1,
+        em: 1,
+        dfn: 1,
+        span: 1
+      }),
+      F
+    ),
+    H = X(
+      _({
+        sub: 1,
+        img: 1,
+        embed: 1,
+        object: 1,
+        sup: 1,
+        basefont: 1,
+        map: 1,
+        applet: 1,
+        font: 1,
+        big: 1,
+        small: 1
+      }),
+      G
+    ),
+    I = X(_({ p: 1 }), H),
+    J = X(_({ iframe: 1 }), H, B),
+    K = _({
+      img: 1,
+      embed: 1,
+      noscript: 1,
+      br: 1,
+      kbd: 1,
+      center: 1,
+      button: 1,
+      basefont: 1,
+      h5: 1,
+      h4: 1,
+      samp: 1,
+      h6: 1,
+      ol: 1,
+      h1: 1,
+      h3: 1,
+      h2: 1,
+      form: 1,
+      font: 1,
+      "#": 1,
+      select: 1,
+      menu: 1,
+      ins: 1,
+      abbr: 1,
+      label: 1,
+      code: 1,
+      table: 1,
+      script: 1,
+      cite: 1,
+      input: 1,
+      iframe: 1,
+      strong: 1,
+      textarea: 1,
+      noframes: 1,
+      big: 1,
+      small: 1,
+      span: 1,
+      hr: 1,
+      sub: 1,
+      bdo: 1,
+      var: 1,
+      div: 1,
+      object: 1,
+      sup: 1,
+      strike: 1,
+      dir: 1,
+      map: 1,
+      dl: 1,
+      applet: 1,
+      del: 1,
+      isindex: 1,
+      fieldset: 1,
+      ul: 1,
+      b: 1,
+      acronym: 1,
+      a: 1,
+      blockquote: 1,
+      i: 1,
+      u: 1,
+      s: 1,
+      tt: 1,
+      address: 1,
+      q: 1,
+      pre: 1,
+      p: 1,
+      em: 1,
+      dfn: 1
+    }),
+    L = X(_({ a: 0 }), J), //a不能被切开，所以把他
+    M = _({ tr: 1 }),
+    N = _({ "#": 1 }),
+    O = X(_({ param: 1 }), K),
+    P = X(_({ form: 1 }), A, D, E, I),
+    Q = _({ li: 1, ol: 1, ul: 1 }),
+    R = _({ style: 1, script: 1 }),
+    S = _({ base: 1, link: 1, meta: 1, title: 1 }),
+    T = X(S, R),
+    U = _({ head: 1, body: 1 }),
+    V = _({ html: 1 });
+
+  var block = _({
+    address: 1,
+    blockquote: 1,
+    center: 1,
+    dir: 1,
+    div: 1,
+    dl: 1,
+    fieldset: 1,
+    form: 1,
+    h1: 1,
+    h2: 1,
+    h3: 1,
+    h4: 1,
+    h5: 1,
+    h6: 1,
+    hr: 1,
+    isindex: 1,
+    menu: 1,
+    noframes: 1,
+    ol: 1,
+    p: 1,
+    pre: 1,
+    table: 1,
+    ul: 1
+  }),
+    empty = _({
+      area: 1,
+      base: 1,
+      basefont: 1,
+      br: 1,
+      col: 1,
+      command: 1,
+      dialog: 1,
+      embed: 1,
+      hr: 1,
+      img: 1,
+      input: 1,
+      isindex: 1,
+      keygen: 1,
+      link: 1,
+      meta: 1,
+      param: 1,
+      source: 1,
+      track: 1,
+      wbr: 1
+    });
+
+  return _({
+    // $ 表示自定的属性
+
+    // body外的元素列表.
+    $nonBodyContent: X(V, U, S),
+
+    //块结构元素列表
+    $block: block,
+
+    //内联元素列表
+    $inline: L,
+
+    $inlineWithA: X(_({ a: 1 }), L),
+
+    $body: X(_({ script: 1, style: 1 }), block),
+
+    $cdata: _({ script: 1, style: 1 }),
+
+    //自闭和元素
+    $empty: empty,
+
+    //不是自闭合，但不能让range选中里边
+    $nonChild: _({ iframe: 1, textarea: 1 }),
+    //列表元素列表
+    $listItem: _({ dd: 1, dt: 1, li: 1 }),
+
+    //列表根元素列表
+    $list: _({ ul: 1, ol: 1, dl: 1 }),
+
+    //不能认为是空的元素
+    $isNotEmpty: _({
+      table: 1,
+      ul: 1,
+      ol: 1,
+      dl: 1,
+      iframe: 1,
+      area: 1,
+      base: 1,
+      col: 1,
+      hr: 1,
+      img: 1,
+      embed: 1,
+      input: 1,
+      textarea: 1,
+      link: 1,
+      meta: 1,
+      param: 1,
+      h1: 1,
+      h2: 1,
+      h3: 1,
+      h4: 1,
+      h5: 1,
+      h6: 1
+    }),
+
+    //如果没有子节点就可以删除的元素列表，像span,a
+    $removeEmpty: _({
+      a: 1,
+      abbr: 1,
+      acronym: 1,
+      address: 1,
+      b: 1,
+      bdo: 1,
+      big: 1,
+      cite: 1,
+      code: 1,
+      del: 1,
+      dfn: 1,
+      em: 1,
+      font: 1,
+      i: 1,
+      ins: 1,
+      label: 1,
+      kbd: 1,
+      q: 1,
+      s: 1,
+      samp: 1,
+      small: 1,
+      span: 1,
+      strike: 1,
+      strong: 1,
+      sub: 1,
+      sup: 1,
+      tt: 1,
+      u: 1,
+      var: 1
+    }),
+
+    $removeEmptyBlock: _({ p: 1, div: 1 }),
+
+    //在table元素里的元素列表
+    $tableContent: _({
+      caption: 1,
+      col: 1,
+      colgroup: 1,
+      tbody: 1,
+      td: 1,
+      tfoot: 1,
+      th: 1,
+      thead: 1,
+      tr: 1,
+      table: 1
+    }),
+    //不转换的标签
+    $notTransContent: _({ pre: 1, script: 1, style: 1, textarea: 1 }),
+    html: U,
+    head: T,
+    style: N,
+    script: N,
+    body: P,
+    base: {},
+    link: {},
+    meta: {},
+    title: N,
+    col: {},
+    tr: _({ td: 1, th: 1 }),
+    img: {},
+    embed: {},
+    colgroup: _({ thead: 1, col: 1, tbody: 1, tr: 1, tfoot: 1 }),
+    noscript: P,
+    td: P,
+    br: {},
+    th: P,
+    center: P,
+    kbd: L,
+    button: X(I, E),
+    basefont: {},
+    h5: L,
+    h4: L,
+    samp: L,
+    h6: L,
+    ol: Q,
+    h1: L,
+    h3: L,
+    option: N,
+    h2: L,
+    form: X(A, D, E, I),
+    select: _({ optgroup: 1, option: 1 }),
+    font: L,
+    ins: L,
+    menu: Q,
+    abbr: L,
+    label: L,
+    table: _({
+      thead: 1,
+      col: 1,
+      tbody: 1,
+      tr: 1,
+      colgroup: 1,
+      caption: 1,
+      tfoot: 1
+    }),
+    code: L,
+    tfoot: M,
+    cite: L,
+    li: P,
+    input: {},
+    iframe: P,
+    strong: L,
+    textarea: N,
+    noframes: P,
+    big: L,
+    small: L,
+    //trace:
+    span: _({
+      "#": 1,
+      br: 1,
+      b: 1,
+      strong: 1,
+      u: 1,
+      i: 1,
+      em: 1,
+      sub: 1,
+      sup: 1,
+      strike: 1,
+      span: 1
+    }),
+    hr: L,
+    dt: L,
+    sub: L,
+    optgroup: _({ option: 1 }),
+    param: {},
+    bdo: L,
+    var: L,
+    div: P,
+    object: O,
+    sup: L,
+    dd: P,
+    strike: L,
+    area: {},
+    dir: Q,
+    map: X(_({ area: 1, form: 1, p: 1 }), A, F, E),
+    applet: O,
+    dl: _({ dt: 1, dd: 1 }),
+    del: L,
+    isindex: {},
+    fieldset: X(_({ legend: 1 }), K),
+    thead: M,
+    ul: Q,
+    acronym: L,
+    b: L,
+    a: X(_({ a: 1 }), J),
+    blockquote: X(_({ td: 1, tr: 1, tbody: 1, li: 1 }), P),
+    caption: L,
+    i: L,
+    u: L,
+    tbody: M,
+    s: L,
+    address: X(D, I),
+    tt: L,
+    legend: L,
+    q: L,
+    pre: X(G, C),
+    p: X(_({ a: 1 }), L),
+    em: L,
+    dfn: L,
+    mark: L
+  });
+})());
+
+
+// core/domUtils.js
+/**
+ * Dom操作工具包
+ * @file
+ * @module UE.dom.domUtils
+ * @since 1.2.6.1
+ */
+
+/**
+ * Dom操作工具包
+ * @unfile
+ * @module UE.dom.domUtils
+ */
+function getDomNode(node, start, ltr, startFromChild, fn, guard) {
+  var tmpNode = startFromChild && node[start],
+    parent;
+  !tmpNode && (tmpNode = node[ltr]);
+  while (!tmpNode && (parent = (parent || node).parentNode)) {
+    if (parent.tagName == "BODY" || (guard && !guard(parent))) {
+      return null;
+    }
+    tmpNode = parent[ltr];
+  }
+  if (tmpNode && fn && !fn(tmpNode)) {
+    return getDomNode(tmpNode, start, ltr, false, fn);
+  }
+  return tmpNode;
+}
+var attrFix = ie && browser.version < 9
+  ? {
+      tabindex: "tabIndex",
+      readonly: "readOnly",
+      for: "htmlFor",
+      class: "className",
+      maxlength: "maxLength",
+      cellspacing: "cellSpacing",
+      cellpadding: "cellPadding",
+      rowspan: "rowSpan",
+      colspan: "colSpan",
+      usemap: "useMap",
+      frameborder: "frameBorder"
+    }
+  : {
+      tabindex: "tabIndex",
+      readonly: "readOnly"
+    },
+  styleBlock = utils.listToMap([
+    "-webkit-box",
+    "-moz-box",
+    "block",
+    "list-item",
+    "table",
+    "table-row-group",
+    "table-header-group",
+    "table-footer-group",
+    "table-row",
+    "table-column-group",
+    "table-column",
+    "table-cell",
+    "table-caption"
+  ]);
+var domUtils = (dom.domUtils = {
+  //节点常量
+  NODE_ELEMENT: 1,
+  NODE_DOCUMENT: 9,
+  NODE_TEXT: 3,
+  NODE_COMMENT: 8,
+  NODE_DOCUMENT_FRAGMENT: 11,
+
+  //位置关系
+  POSITION_IDENTICAL: 0,
+  POSITION_DISCONNECTED: 1,
+  POSITION_FOLLOWING: 2,
+  POSITION_PRECEDING: 4,
+  POSITION_IS_CONTAINED: 8,
+  POSITION_CONTAINS: 16,
+  //ie6使用其他的会有一段空白出现
+  fillChar: ie && browser.version == "6" ? "\ufeff" : "\u200B",
+  //-------------------------Node部分--------------------------------
+  keys: {
+    /*Backspace*/ 8: 1,
+    /*Delete*/ 46: 1,
+    /*Shift*/ 16: 1,
+    /*Ctrl*/ 17: 1,
+    /*Alt*/ 18: 1,
+    37: 1,
+    38: 1,
+    39: 1,
+    40: 1,
+    13: 1 /*enter*/
+  },
+  /**
+     * 获取节点A相对于节点B的位置关系
+     * @method getPosition
+     * @param { Node } nodeA 需要查询位置关系的节点A
+     * @param { Node } nodeB 需要查询位置关系的节点B
+     * @return { Number } 节点A与节点B的关系
+     * @example
+     * ```javascript
+     * //output: 20
+     * var position = UE.dom.domUtils.getPosition( document.documentElement, document.body );
+     *
+     * switch ( position ) {
+     *
+     *      //0
+     *      case UE.dom.domUtils.POSITION_IDENTICAL:
+     *          console.log('元素相同');
+     *          break;
+     *      //1
+     *      case UE.dom.domUtils.POSITION_DISCONNECTED:
+     *          console.log('两个节点在不同的文档中');
+     *          break;
+     *      //2
+     *      case UE.dom.domUtils.POSITION_FOLLOWING:
+     *          console.log('节点A在节点B之后');
+     *          break;
+     *      //4
+     *      case UE.dom.domUtils.POSITION_PRECEDING;
+     *          console.log('节点A在节点B之前');
+     *          break;
+     *      //8
+     *      case UE.dom.domUtils.POSITION_IS_CONTAINED:
+     *          console.log('节点A被节点B包含');
+     *          break;
+     *      case 10:
+     *          console.log('节点A被节点B包含且节点A在节点B之后');
+     *          break;
+     *      //16
+     *      case UE.dom.domUtils.POSITION_CONTAINS:
+     *          console.log('节点A包含节点B');
+     *          break;
+     *      case 20:
+     *          console.log('节点A包含节点B且节点A在节点B之前');
+     *          break;
+     *
+     * }
+     * ```
+     */
+  getPosition: function(nodeA, nodeB) {
+    // 如果两个节点是同一个节点
+    if (nodeA === nodeB) {
+      // domUtils.POSITION_IDENTICAL
+      return 0;
+    }
+    var node,
+      parentsA = [nodeA],
+      parentsB = [nodeB];
+    node = nodeA;
+    while ((node = node.parentNode)) {
+      // 如果nodeB是nodeA的祖先节点
+      if (node === nodeB) {
+        // domUtils.POSITION_IS_CONTAINED + domUtils.POSITION_FOLLOWING
+        return 10;
+      }
+      parentsA.push(node);
+    }
+    node = nodeB;
+    while ((node = node.parentNode)) {
+      // 如果nodeA是nodeB的祖先节点
+      if (node === nodeA) {
+        // domUtils.POSITION_CONTAINS + domUtils.POSITION_PRECEDING
+        return 20;
+      }
+      parentsB.push(node);
+    }
+    parentsA.reverse();
+    parentsB.reverse();
+    if (parentsA[0] !== parentsB[0]) {
+      // domUtils.POSITION_DISCONNECTED
+      return 1;
+    }
+    var i = -1;
+    while ((i++, parentsA[i] === parentsB[i])) {}
+    nodeA = parentsA[i];
+    nodeB = parentsB[i];
+    while ((nodeA = nodeA.nextSibling)) {
+      if (nodeA === nodeB) {
+        // domUtils.POSITION_PRECEDING
+        return 4;
+      }
+    }
+    // domUtils.POSITION_FOLLOWING
+    return 2;
+  },
+
+  /**
+     * 检测节点node在父节点中的索引位置
+     * @method getNodeIndex
+     * @param { Node } node 需要检测的节点对象
+     * @return { Number } 该节点在父节点中的位置
+     * @see UE.dom.domUtils.getNodeIndex(Node,Boolean)
+     */
+
+  /**
+     * 检测节点node在父节点中的索引位置， 根据给定的mergeTextNode参数决定是否要合并多个连续的文本节点为一个节点
+     * @method getNodeIndex
+     * @param { Node } node 需要检测的节点对象
+     * @param { Boolean } mergeTextNode 是否合并多个连续的文本节点为一个节点
+     * @return { Number } 该节点在父节点中的位置
+     * @example
+     * ```javascript
+     *
+     *      var node = document.createElement("div");
+     *
+     *      node.appendChild( document.createTextNode( "hello" ) );
+     *      node.appendChild( document.createTextNode( "world" ) );
+     *      node.appendChild( node = document.createElement( "div" ) );
+     *
+     *      //output: 2
+     *      console.log( UE.dom.domUtils.getNodeIndex( node ) );
+     *
+     *      //output: 1
+     *      console.log( UE.dom.domUtils.getNodeIndex( node, true ) );
+     *
+     * ```
+     */
+  getNodeIndex: function(node, ignoreTextNode) {
+    var preNode = node,
+      i = 0;
+    while ((preNode = preNode.previousSibling)) {
+      if (ignoreTextNode && preNode.nodeType == 3) {
+        if (preNode.nodeType != preNode.nextSibling.nodeType) {
+          i++;
+        }
+        continue;
+      }
+      i++;
+    }
+    return i;
+  },
+
+  /**
+     * 检测节点node是否在给定的document对象上
+     * @method inDoc
+     * @param { Node } node 需要检测的节点对象
+     * @param { DomDocument } doc 需要检测的document对象
+     * @return { Boolean } 该节点node是否在给定的document的dom树上
+     * @example
+     * ```javascript
+     *
+     * var node = document.createElement("div");
+     *
+     * //output: false
+     * console.log( UE.do.domUtils.inDoc( node, document ) );
+     *
+     * document.body.appendChild( node );
+     *
+     * //output: true
+     * console.log( UE.do.domUtils.inDoc( node, document ) );
+     *
+     * ```
+     */
+  inDoc: function(node, doc) {
+    return domUtils.getPosition(node, doc) == 10;
+  },
+  /**
+     * 根据给定的过滤规则filterFn， 查找符合该过滤规则的node节点的第一个祖先节点，
+     * 查找的起点是给定node节点的父节点。
+     * @method findParent
+     * @param { Node } node 需要查找的节点
+     * @param { Function } filterFn 自定义的过滤方法。
+     * @warning 查找的终点是到body节点为止
+     * @remind 自定义的过滤方法filterFn接受一个Node对象作为参数， 该对象代表当前执行检测的祖先节点。 如果该
+     *          节点满足过滤条件， 则要求返回true， 这时将直接返回该节点作为findParent()的结果， 否则， 请返回false。
+     * @return { Node | Null } 如果找到符合过滤条件的节点， 就返回该节点， 否则返回NULL
+     * @example
+     * ```javascript
+     * var filterNode = UE.dom.domUtils.findParent( document.body.firstChild, function ( node ) {
+     *
+     *     //由于查找的终点是body节点， 所以永远也不会匹配当前过滤器的条件， 即这里永远会返回false
+     *     return node.tagName === "HTML";
+     *
+     * } );
+     *
+     * //output: true
+     * console.log( filterNode === null );
+     * ```
+     */
+
+  /**
+     * 根据给定的过滤规则filterFn， 查找符合该过滤规则的node节点的第一个祖先节点，
+     * 如果includeSelf的值为true，则查找的起点是给定的节点node， 否则， 起点是node的父节点
+     * @method findParent
+     * @param { Node } node 需要查找的节点
+     * @param { Function } filterFn 自定义的过滤方法。
+     * @param { Boolean } includeSelf 查找过程是否包含自身
+     * @warning 查找的终点是到body节点为止
+     * @remind 自定义的过滤方法filterFn接受一个Node对象作为参数， 该对象代表当前执行检测的祖先节点。 如果该
+     *          节点满足过滤条件， 则要求返回true， 这时将直接返回该节点作为findParent()的结果， 否则， 请返回false。
+     * @remind 如果includeSelf为true， 则过滤器第一次执行时的参数会是节点本身。
+     *          反之， 过滤器第一次执行时的参数将是该节点的父节点。
+     * @return { Node | Null } 如果找到符合过滤条件的节点， 就返回该节点， 否则返回NULL
+     * @example
+     * ```html
+     * <body>
+     *
+     *      <div id="test">
+     *      </div>
+     *
+     *      <script type="text/javascript">
+     *
+     *          //output: DIV, BODY
+     *          var filterNode = UE.dom.domUtils.findParent( document.getElementById( "test" ), function ( node ) {
+     *
+     *              console.log( node.tagName );
+     *              return false;
+     *
+     *          }, true );
+     *
+     *      </script>
+     * </body>
+     * ```
+     */
+  findParent: function(node, filterFn, includeSelf) {
+    if (node && !domUtils.isBody(node)) {
+      node = includeSelf ? node : node.parentNode;
+      while (node) {
+        if (!filterFn || filterFn(node) || domUtils.isBody(node)) {
+          return filterFn && !filterFn(node) && domUtils.isBody(node)
+            ? null
+            : node;
+        }
+        node = node.parentNode;
+      }
+    }
+    return null;
+  },
+  /**
+     * 查找node的节点名为tagName的第一个祖先节点， 查找的起点是node节点的父节点。
+     * @method findParentByTagName
+     * @param { Node } node 需要查找的节点对象
+     * @param { Array } tagNames 需要查找的父节点的名称数组
+     * @warning 查找的终点是到body节点为止
+     * @return { Node | NULL } 如果找到符合条件的节点， 则返回该节点， 否则返回NULL
+     * @example
+     * ```javascript
+     * var node = UE.dom.domUtils.findParentByTagName( document.getElementsByTagName("div")[0], [ "BODY" ] );
+     * //output: BODY
+     * console.log( node.tagName );
+     * ```
+     */
+
+  /**
+     * 查找node的节点名为tagName的祖先节点， 如果includeSelf的值为true，则查找的起点是给定的节点node，
+     * 否则， 起点是node的父节点。
+     * @method findParentByTagName
+     * @param { Node } node 需要查找的节点对象
+     * @param { Array } tagNames 需要查找的父节点的名称数组
+     * @param { Boolean } includeSelf 查找过程是否包含node节点自身
+     * @warning 查找的终点是到body节点为止
+     * @return { Node | NULL } 如果找到符合条件的节点， 则返回该节点， 否则返回NULL
+     * @example
+     * ```javascript
+     * var queryTarget = document.getElementsByTagName("div")[0];
+     * var node = UE.dom.domUtils.findParentByTagName( queryTarget, [ "DIV" ], true );
+     * //output: true
+     * console.log( queryTarget === node );
+     * ```
+     */
+  findParentByTagName: function(node, tagNames, includeSelf, excludeFn) {
+    tagNames = utils.listToMap(utils.isArray(tagNames) ? tagNames : [tagNames]);
+    return domUtils.findParent(
+      node,
+      function(node) {
+        return tagNames[node.tagName] && !(excludeFn && excludeFn(node));
+      },
+      includeSelf
+    );
+  },
+  /**
+     * 查找节点node的祖先节点集合， 查找的起点是给定节点的父节点，结果集中不包含给定的节点。
+     * @method findParents
+     * @param { Node } node 需要查找的节点对象
+     * @return { Array } 给定节点的祖先节点数组
+     * @grammar UE.dom.domUtils.findParents(node)  => Array  //返回一个祖先节点数组集合，不包含自身
+     * @grammar UE.dom.domUtils.findParents(node,includeSelf)  => Array  //返回一个祖先节点数组集合，includeSelf指定是否包含自身
+     * @grammar UE.dom.domUtils.findParents(node,includeSelf,filterFn)  => Array  //返回一个祖先节点数组集合，filterFn指定过滤条件，返回true的node将被选取
+     * @grammar UE.dom.domUtils.findParents(node,includeSelf,filterFn,closerFirst)  => Array  //返回一个祖先节点数组集合，closerFirst为true的话，node的直接父亲节点是数组的第0个
+     */
+
+  /**
+     * 查找节点node的祖先节点集合， 如果includeSelf的值为true，
+     * 则返回的结果集中允许出现当前给定的节点， 否则， 该节点不会出现在其结果集中。
+     * @method findParents
+     * @param { Node } node 需要查找的节点对象
+     * @param { Boolean } includeSelf 查找的结果中是否允许包含当前查找的节点对象
+     * @return { Array } 给定节点的祖先节点数组
+     */
+  findParents: function(node, includeSelf, filterFn, closerFirst) {
+    var parents = includeSelf && ((filterFn && filterFn(node)) || !filterFn)
+      ? [node]
+      : [];
+    while ((node = domUtils.findParent(node, filterFn))) {
+      parents.push(node);
+    }
+    return closerFirst ? parents : parents.reverse();
+  },
+
+  /**
+     * 在节点node后面插入新节点newNode
+     * @method insertAfter
+     * @param { Node } node 目标节点
+     * @param { Node } newNode 新插入的节点， 该节点将置于目标节点之后
+     * @return { Node } 新插入的节点
+     */
+  insertAfter: function(node, newNode) {
+    return node.nextSibling
+      ? node.parentNode.insertBefore(newNode, node.nextSibling)
+      : node.parentNode.appendChild(newNode);
+  },
+
+  /**
+     * 删除节点node及其下属的所有节点
+     * @method remove
+     * @param { Node } node 需要删除的节点对象
+     * @return { Node } 返回刚删除的节点对象
+     * @example
+     * ```html
+     * <div id="test">
+     *     <div id="child">你好</div>
+     * </div>
+     * <script>
+     *     UE.dom.domUtils.remove( document.body, false );
+     *     //output: false
+     *     console.log( document.getElementById( "child" ) !== null );
+     * </script>
+     * ```
+     */
+
+  /**
+     * 删除节点node，并根据keepChildren的值决定是否保留子节点
+     * @method remove
+     * @param { Node } node 需要删除的节点对象
+     * @param { Boolean } keepChildren 是否需要保留子节点
+     * @return { Node } 返回刚删除的节点对象
+     * @example
+     * ```html
+     * <div id="test">
+     *     <div id="child">你好</div>
+     * </div>
+     * <script>
+     *     UE.dom.domUtils.remove( document.body, true );
+     *     //output: true
+     *     console.log( document.getElementById( "child" ) !== null );
+     * </script>
+     * ```
+     */
+  remove: function(node, keepChildren) {
+    var parent = node.parentNode,
+      child;
+    if (parent) {
+      if (keepChildren && node.hasChildNodes()) {
+        while ((child = node.firstChild)) {
+          parent.insertBefore(child, node);
+        }
+      }
+      parent.removeChild(node);
+    }
+    return node;
+  },
+
+  /**
+     * 取得node节点的下一个兄弟节点， 如果该节点其后没有兄弟节点， 则递归查找其父节点之后的第一个兄弟节点，
+     * 直到找到满足条件的节点或者递归到BODY节点之后才会结束。
+     * @method getNextDomNode
+     * @param { Node } node 需要获取其后的兄弟节点的节点对象
+     * @return { Node | NULL } 如果找满足条件的节点， 则返回该节点， 否则返回NULL
+     * @example
+     * ```html
+     *     <body>
+     *      <div id="test">
+     *          <span></span>
+     *      </div>
+     *      <i>xxx</i>
+     * </body>
+     * <script>
+     *
+     *     //output: i节点
+     *     console.log( UE.dom.domUtils.getNextDomNode( document.getElementById( "test" ) ) );
+     *
+     * </script>
+     * ```
+     * @example
+     * ```html
+     * <body>
+     *      <div>
+     *          <span></span>
+     *          <i id="test">xxx</i>
+     *      </div>
+     *      <b>xxx</b>
+     * </body>
+     * <script>
+     *
+     *     //由于id为test的i节点之后没有兄弟节点， 则查找其父节点（div）后面的兄弟节点
+     *     //output: b节点
+     *     console.log( UE.dom.domUtils.getNextDomNode( document.getElementById( "test" ) ) );
+     *
+     * </script>
+     * ```
+     */
+
+  /**
+     * 取得node节点的下一个兄弟节点， 如果startFromChild的值为ture，则先获取其子节点，
+     * 如果有子节点则直接返回第一个子节点；如果没有子节点或者startFromChild的值为false，
+     * 则执行<a href="#UE.dom.domUtils.getNextDomNode(Node)">getNextDomNode(Node node)</a>的查找过程。
+     * @method getNextDomNode
+     * @param { Node } node 需要获取其后的兄弟节点的节点对象
+     * @param { Boolean } startFromChild 查找过程是否从其子节点开始
+     * @return { Node | NULL } 如果找满足条件的节点， 则返回该节点， 否则返回NULL
+     * @see UE.dom.domUtils.getNextDomNode(Node)
+     */
+  getNextDomNode: function(node, startFromChild, filterFn, guard) {
+    return getDomNode(
+      node,
+      "firstChild",
+      "nextSibling",
+      startFromChild,
+      filterFn,
+      guard
+    );
+  },
+  getPreDomNode: function(node, startFromChild, filterFn, guard) {
+    return getDomNode(
+      node,
+      "lastChild",
+      "previousSibling",
+      startFromChild,
+      filterFn,
+      guard
+    );
+  },
+  /**
+     * 检测节点node是否属是UEditor定义的bookmark节点
+     * @method isBookmarkNode
+     * @private
+     * @param { Node } node 需要检测的节点对象
+     * @return { Boolean } 是否是bookmark节点
+     * @example
+     * ```html
+     * <span id="_baidu_bookmark_1"></span>
+     * <script>
+     *      var bookmarkNode = document.getElementById("_baidu_bookmark_1");
+     *      //output: true
+     *      console.log( UE.dom.domUtils.isBookmarkNode( bookmarkNode ) );
+     * </script>
+     * ```
+     */
+  isBookmarkNode: function(node) {
+    return node.nodeType == 1 && node.id && /^_baidu_bookmark_/i.test(node.id);
+  },
+  /**
+     * 获取节点node所属的window对象
+     * @method  getWindow
+     * @param { Node } node 节点对象
+     * @return { Window } 当前节点所属的window对象
+     * @example
+     * ```javascript
+     * //output: true
+     * console.log( UE.dom.domUtils.getWindow( document.body ) === window );
+     * ```
+     */
+  getWindow: function(node) {
+    var doc = node.ownerDocument || node;
+    return doc.defaultView || doc.parentWindow;
+  },
+  /**
+     * 获取离nodeA与nodeB最近的公共的祖先节点
+     * @method  getCommonAncestor
+     * @param { Node } nodeA 第一个节点
+     * @param { Node } nodeB 第二个节点
+     * @remind 如果给定的两个节点是同一个节点， 将直接返回该节点。
+     * @return { Node | NULL } 如果未找到公共节点， 返回NULL， 否则返回最近的公共祖先节点。
+     * @example
+     * ```javascript
+     * var commonAncestor = UE.dom.domUtils.getCommonAncestor( document.body, document.body.firstChild );
+     * //output: true
+     * console.log( commonAncestor.tagName.toLowerCase() === 'body' );
+     * ```
+     */
+  getCommonAncestor: function(nodeA, nodeB) {
+    if (nodeA === nodeB) return nodeA;
+    var parentsA = [nodeA],
+      parentsB = [nodeB],
+      parent = nodeA,
+      i = -1;
+    while ((parent = parent.parentNode)) {
+      if (parent === nodeB) {
+        return parent;
+      }
+      parentsA.push(parent);
+    }
+    parent = nodeB;
+    while ((parent = parent.parentNode)) {
+      if (parent === nodeA) return parent;
+      parentsB.push(parent);
+    }
+    parentsA.reverse();
+    parentsB.reverse();
+    while ((i++, parentsA[i] === parentsB[i])) {}
+    return i == 0 ? null : parentsA[i - 1];
+  },
+  /**
+     * 清除node节点左右连续为空的兄弟inline节点
+     * @method clearEmptySibling
+     * @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
+     * 则这些兄弟节点将被删除
+     * @grammar UE.dom.domUtils.clearEmptySibling(node,ignoreNext)  //ignoreNext指定是否忽略右边空节点
+     * @grammar UE.dom.domUtils.clearEmptySibling(node,ignoreNext,ignorePre)  //ignorePre指定是否忽略左边空节点
+     * @example
+     * ```html
+     * <body>
+     *     <div></div>
+     *     <span id="test"></span>
+     *     <i></i>
+     *     <b></b>
+     *     <em>xxx</em>
+     *     <span></span>
+     * </body>
+     * <script>
+     *
+     *      UE.dom.domUtils.clearEmptySibling( document.getElementById( "test" ) );
+     *
+     *      //output: <div></div><span id="test"></span><em>xxx</em><span></span>
+     *      console.log( document.body.innerHTML );
+     *
+     * </script>
+     * ```
+     */
+
+  /**
+     * 清除node节点左右连续为空的兄弟inline节点， 如果ignoreNext的值为true，
+     * 则忽略对右边兄弟节点的操作。
+     * @method clearEmptySibling
+     * @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
+     * @param { Boolean } ignoreNext 是否忽略忽略对右边的兄弟节点的操作
+     * 则这些兄弟节点将被删除
+     * @see UE.dom.domUtils.clearEmptySibling(Node)
+     */
+
+  /**
+     * 清除node节点左右连续为空的兄弟inline节点， 如果ignoreNext的值为true，
+     * 则忽略对右边兄弟节点的操作， 如果ignorePre的值为true，则忽略对左边兄弟节点的操作。
+     * @method clearEmptySibling
+     * @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
+     * @param { Boolean } ignoreNext 是否忽略忽略对右边的兄弟节点的操作
+     * @param { Boolean } ignorePre 是否忽略忽略对左边的兄弟节点的操作
+     * 则这些兄弟节点将被删除
+     * @see UE.dom.domUtils.clearEmptySibling(Node)
+     */
+  clearEmptySibling: function(node, ignoreNext, ignorePre) {
+    function clear(next, dir) {
+      var tmpNode;
+      while (
+        next &&
+        !domUtils.isBookmarkNode(next) &&
+        (domUtils.isEmptyInlineElement(next) ||
+          //这里不能把空格算进来会吧空格干掉，出现文字间的空格丢掉了
+          !new RegExp("[^\t\n\r" + domUtils.fillChar + "]").test(
+            next.nodeValue
+          ))
+      ) {
+        tmpNode = next[dir];
+        domUtils.remove(next);
+        next = tmpNode;
+      }
+    }
+    !ignoreNext && clear(node.nextSibling, "nextSibling");
+    !ignorePre && clear(node.previousSibling, "previousSibling");
+  },
+  /**
+     * 将一个文本节点textNode拆分成两个文本节点，offset指定拆分位置
+     * @method split
+     * @param { Node } textNode 需要拆分的文本节点对象
+     * @param { int } offset 需要拆分的位置， 位置计算从0开始
+     * @return { Node } 拆分后形成的新节点
+     * @example
+     * ```html
+     * <div id="test">abcdef</div>
+     * <script>
+     *      var newNode = UE.dom.domUtils.split( document.getElementById( "test" ).firstChild, 3 );
+     *      //output: def
+     *      console.log( newNode.nodeValue );
+     * </script>
+     * ```
+     */
+  split: function(node, offset) {
+    var doc = node.ownerDocument;
+    if (browser.ie && offset == node.nodeValue.length) {
+      var next = doc.createTextNode("");
+      return domUtils.insertAfter(node, next);
+    }
+    var retval = node.splitText(offset);
+    //ie8下splitText不会跟新childNodes,我们手动触发他的更新
+    if (browser.ie8) {
+      var tmpNode = doc.createTextNode("");
+      domUtils.insertAfter(retval, tmpNode);
+      domUtils.remove(tmpNode);
+    }
+    return retval;
+  },
+
+  /**
+     * 检测文本节点textNode是否为空节点（包括空格、换行、占位符等字符）
+     * @method  isWhitespace
+     * @param { Node } node 需要检测的节点对象
+     * @return { Boolean } 检测的节点是否为空
+     * @example
+     * ```html
+     * <div id="test">
+     *
+     * </div>
+     * <script>
+     *      //output: true
+     *      console.log( UE.dom.domUtils.isWhitespace( document.getElementById("test").firstChild ) );
+     * </script>
+     * ```
+     */
+  isWhitespace: function(node) {
+    return !new RegExp("[^ \t\n\r" + domUtils.fillChar + "]").test(
+      node.nodeValue
+    );
+  },
+  /**
+     * 获取元素element相对于viewport的位置坐标
+     * @method getXY
+     * @param { Node } element 需要计算位置的节点对象
+     * @return { Object } 返回形如{x:left,y:top}的一个key-value映射对象， 其中键x代表水平偏移距离，
+     *                          y代表垂直偏移距离。
+     *
+     * @example
+     * ```javascript
+     * var location = UE.dom.domUtils.getXY( document.getElementById("test") );
+     * //output: test的坐标为: 12, 24
+     * console.log( 'test的坐标为： ', location.x, ',', location.y );
+     * ```
+     */
+  getXY: function(element) {
+    var x = 0,
+      y = 0;
+    while (element.offsetParent) {
+      y += element.offsetTop;
+      x += element.offsetLeft;
+      element = element.offsetParent;
+    }
+    return { x: x, y: y };
+  },
+  /**
+     * 为元素element绑定原生DOM事件，type为事件类型，handler为处理函数
+     * @method on
+     * @param { Node } element 需要绑定事件的节点对象
+     * @param { String } type 绑定的事件类型
+     * @param { Function } handler 事件处理器
+     * @example
+     * ```javascript
+     * UE.dom.domUtils.on(document.body,"click",function(e){
+     *     //e为事件对象，this为被点击元素对戏那个
+     * });
+     * ```
+     */
+
+  /**
+     * 为元素element绑定原生DOM事件，type为事件类型，handler为处理函数
+     * @method on
+     * @param { Node } element 需要绑定事件的节点对象
+     * @param { Array } type 绑定的事件类型数组
+     * @param { Function } handler 事件处理器
+     * @example
+     * ```javascript
+     * UE.dom.domUtils.on(document.body,["click","mousedown"],function(evt){
+     *     //evt为事件对象，this为被点击元素对象
+     * });
+     * ```
+     */
+  on: function(element, type, handler) {
+    var types = utils.isArray(type) ? type : utils.trim(type).split(/\s+/),
+      k = types.length;
+    if (k)
+      while (k--) {
+        type = types[k];
+        if (element.addEventListener) {
+          element.addEventListener(type, handler, false);
+        } else {
+          if (!handler._d) {
+            handler._d = {
+              els: []
+            };
+          }
+          var key = type + handler.toString(),
+            index = utils.indexOf(handler._d.els, element);
+          if (!handler._d[key] || index == -1) {
+            if (index == -1) {
+              handler._d.els.push(element);
+            }
+            if (!handler._d[key]) {
+              handler._d[key] = function(evt) {
+                return handler.call(evt.srcElement, evt || window.event);
+              };
+            }
+
+            element.attachEvent("on" + type, handler._d[key]);
+          }
+        }
+      }
+    element = null;
+  },
+  /**
+     * 解除DOM事件绑定
+     * @method un
+     * @param { Node } element 需要解除事件绑定的节点对象
+     * @param { String } type 需要接触绑定的事件类型
+     * @param { Function } handler 对应的事件处理器
+     * @example
+     * ```javascript
+     * UE.dom.domUtils.un(document.body,"click",function(evt){
+     *     //evt为事件对象，this为被点击元素对象
+     * });
+     * ```
+     */
+
+  /**
+     * 解除DOM事件绑定
+     * @method un
+     * @param { Node } element 需要解除事件绑定的节点对象
+     * @param { Array } type 需要接触绑定的事件类型数组
+     * @param { Function } handler 对应的事件处理器
+     * @example
+     * ```javascript
+     * UE.dom.domUtils.un(document.body, ["click","mousedown"],function(evt){
+     *     //evt为事件对象，this为被点击元素对象
+     * });
+     * ```
+     */
+  un: function(element, type, handler) {
+    var types = utils.isArray(type) ? type : utils.trim(type).split(/\s+/),
+      k = types.length;
+    if (k)
+      while (k--) {
+        type = types[k];
+        if (element.removeEventListener) {
+          element.removeEventListener(type, handler, false);
+        } else {
+          var key = type + handler.toString();
+          try {
+            element.detachEvent(
+              "on" + type,
+              handler._d ? handler._d[key] : handler
+            );
+          } catch (e) {}
+          if (handler._d && handler._d[key]) {
+            var index = utils.indexOf(handler._d.els, element);
+            if (index != -1) {
+              handler._d.els.splice(index, 1);
+            }
+            handler._d.els.length == 0 && delete handler._d[key];
+          }
+        }
+      }
+  },
+
+  /**
+     * 比较节点nodeA与节点nodeB是否具有相同的标签名、属性名以及属性值
+     * @method  isSameElement
+     * @param { Node } nodeA 需要比较的节点
+     * @param { Node } nodeB 需要比较的节点
+     * @return { Boolean } 两个节点是否具有相同的标签名、属性名以及属性值
+     * @example
+     * ```html
+     * <span style="font-size:12px">ssss</span>
+     * <span style="font-size:12px">bbbbb</span>
+     * <span style="font-size:13px">ssss</span>
+     * <span style="font-size:14px">bbbbb</span>
+     *
+     * <script>
+     *
+     *     var nodes = document.getElementsByTagName( "span" );
+     *
+     *     //output: true
+     *     console.log( UE.dom.domUtils.isSameElement( nodes[0], nodes[1] ) );
+     *
+     *     //output: false
+     *     console.log( UE.dom.domUtils.isSameElement( nodes[2], nodes[3] ) );
+     *
+     * </script>
+     * ```
+     */
+  isSameElement: function(nodeA, nodeB) {
+    if (nodeA.tagName != nodeB.tagName) {
+      return false;
+    }
+    var thisAttrs = nodeA.attributes,
+      otherAttrs = nodeB.attributes;
+    if (!ie && thisAttrs.length != otherAttrs.length) {
+      return false;
+    }
+    var attrA,
+      attrB,
+      al = 0,
+      bl = 0;
+    for (var i = 0; (attrA = thisAttrs[i++]); ) {
+      if (attrA.nodeName == "style") {
+        if (attrA.specified) {
+          al++;
+        }
+        if (domUtils.isSameStyle(nodeA, nodeB)) {
+          continue;
+        } else {
+          return false;
+        }
+      }
+      if (ie) {
+        if (attrA.specified) {
+          al++;
+          attrB = otherAttrs.getNamedItem(attrA.nodeName);
+        } else {
+          continue;
+        }
+      } else {
+        attrB = nodeB.attributes[attrA.nodeName];
+      }
+      if (!attrB.specified || attrA.nodeValue != attrB.nodeValue) {
+        return false;
+      }
+    }
+    // 有可能attrB的属性包含了attrA的属性之外还有自己的属性
+    if (ie) {
+      for (i = 0; (attrB = otherAttrs[i++]); ) {
+        if (attrB.specified) {
+          bl++;
+        }
+      }
+      if (al != bl) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /**
+     * 判断节点nodeA与节点nodeB的元素的style属性是否一致
+     * @method isSameStyle
+     * @param { Node } nodeA 需要比较的节点
+     * @param { Node } nodeB 需要比较的节点
+     * @return { Boolean } 两个节点是否具有相同的style属性值
+     * @example
+     * ```html
+     * <span style="font-size:12px">ssss</span>
+     * <span style="font-size:12px">bbbbb</span>
+     * <span style="font-size:13px">ssss</span>
+     * <span style="font-size:14px">bbbbb</span>
+     *
+     * <script>
+     *
+     *     var nodes = document.getElementsByTagName( "span" );
+     *
+     *     //output: true
+     *     console.log( UE.dom.domUtils.isSameStyle( nodes[0], nodes[1] ) );
+     *
+     *     //output: false
+     *     console.log( UE.dom.domUtils.isSameStyle( nodes[2], nodes[3] ) );
+     *
+     * </script>
+     * ```
+     */
+  isSameStyle: function(nodeA, nodeB) {
+    var styleA = nodeA.style.cssText
+      .replace(/( ?; ?)/g, ";")
+      .replace(/( ?: ?)/g, ":"),
+      styleB = nodeB.style.cssText
+        .replace(/( ?; ?)/g, ";")
+        .replace(/( ?: ?)/g, ":");
+    if (browser.opera) {
+      styleA = nodeA.style;
+      styleB = nodeB.style;
+      if (styleA.length != styleB.length) return false;
+      for (var p in styleA) {
+        if (/^(\d+|csstext)$/i.test(p)) {
+          continue;
+        }
+        if (styleA[p] != styleB[p]) {
+          return false;
+        }
+      }
+      return true;
+    }
+    if (!styleA || !styleB) {
+      return styleA == styleB;
+    }
+    styleA = styleA.split(";");
+    styleB = styleB.split(";");
+    if (styleA.length != styleB.length) {
+      return false;
+    }
+    for (var i = 0, ci; (ci = styleA[i++]); ) {
+      if (utils.indexOf(styleB, ci) == -1) {
+        return false;
+      }
+    }
+    return true;
+  },
+  /**
+     * 检查节点node是否为block元素
+     * @method isBlockElm
+     * @param { Node } node 需要检测的节点对象
+     * @return { Boolean } 是否是block元素节点
+     * @warning 该方法的判断规则如下： 如果该元素原本是block元素， 则不论该元素当前的css样式是什么都会返回true；
+     *          否则，检测该元素的css样式， 如果该元素当前是block元素， 则返回true。 其余情况下都返回false。
+     * @example
+     * ```html
+     * <span id="test1" style="display: block"></span>
+     * <span id="test2"></span>
+     * <div id="test3" style="display: inline"></div>
+     *
+     * <script>
+     *
+     *     //output: true
+     *     console.log( UE.dom.domUtils.isBlockElm( document.getElementById("test1") ) );
+     *
+     *     //output: false
+     *     console.log( UE.dom.domUtils.isBlockElm( document.getElementById("test2") ) );
+     *
+     *     //output: true
+     *     console.log( UE.dom.domUtils.isBlockElm( document.getElementById("test3") ) );
+     *
+     * </script>
+     * ```
+     */
+  isBlockElm: function(node) {
+    return (
+      node.nodeType == 1 &&
+      (dtd.$block[node.tagName] ||
+        styleBlock[domUtils.getComputedStyle(node, "display")]) &&
+      !dtd.$nonChild[node.tagName]
+    );
+  },
+  /**
+     * 检测node节点是否为body节点
+     * @method isBody
+     * @param { Element } node 需要检测的dom元素
+     * @return { Boolean } 给定的元素是否是body元素
+     * @example
+     * ```javascript
+     * //output: true
+     * console.log( UE.dom.domUtils.isBody( document.body ) );
+     * ```
+     */
+  isBody: function(node) {
+    return node && node.nodeType == 1 && node.tagName.toLowerCase() == "body";
+  },
+  /**
+     * 以node节点为分界，将该节点的指定祖先节点parent拆分成两个独立的节点，
+     * 拆分形成的两个节点之间是node节点
+     * @method breakParent
+     * @param { Node } node 作为分界的节点对象
+     * @param { Node } parent 该节点必须是node节点的祖先节点， 且是block节点。
+     * @return { Node } 给定的node分界节点
+     * @example
+     * ```javascript
+     *
+     *      var node = document.createElement("span"),
+     *          wrapNode = document.createElement( "div" ),
+     *          parent = document.createElement("p");
+     *
+     *      parent.appendChild( node );
+     *      wrapNode.appendChild( parent );
+     *
+     *      //拆分前
+     *      //output: <p><span></span></p>
+     *      console.log( wrapNode.innerHTML );
+     *
+     *
+     *      UE.dom.domUtils.breakParent( node, parent );
+     *      //拆分后
+     *      //output: <p></p><span></span><p></p>
+     *      console.log( wrapNode.innerHTML );
+     *
+     * ```
+     */
+  breakParent: function(node, parent) {
+    var tmpNode,
+      parentClone = node,
+      clone = node,
+      leftNodes,
+      rightNodes;
+    do {
+      parentClone = parentClone.parentNode;
+      if (leftNodes) {
+        tmpNode = parentClone.cloneNode(false);
+        tmpNode.appendChild(leftNodes);
+        leftNodes = tmpNode;
+        tmpNode = parentClone.cloneNode(false);
+        tmpNode.appendChild(rightNodes);
+        rightNodes = tmpNode;
+      } else {
+        leftNodes = parentClone.cloneNode(false);
+        rightNodes = leftNodes.cloneNode(false);
+      }
+      while ((tmpNode = clone.previousSibling)) {
+        leftNodes.insertBefore(tmpNode, leftNodes.firstChild);
+      }
+      while ((tmpNode = clone.nextSibling)) {
+        rightNodes.appendChild(tmpNode);
+      }
+      clone = parentClone;
+    } while (parent !== parentClone);
+    tmpNode = parent.parentNode;
+    tmpNode.insertBefore(leftNodes, parent);
+    tmpNode.insertBefore(rightNodes, parent);
+    tmpNode.insertBefore(node, rightNodes);
+    domUtils.remove(parent);
+    return node;
+  },
+  /**
+     * 检查节点node是否是空inline节点
+     * @method  isEmptyInlineElement
+     * @param { Node } node 需要检测的节点对象
+     * @return { Number }  如果给定的节点是空的inline节点， 则返回1, 否则返回0。
+     * @example
+     * ```html
+     * <b><i></i></b> => 1
+     * <b><i></i><u></u></b> => 1
+     * <b></b> => 1
+     * <b>xx<i></i></b> => 0
+     * ```
+     */
+  isEmptyInlineElement: function(node) {
+    if (node.nodeType != 1 || !dtd.$removeEmpty[node.tagName]) {
+      return 0;
+    }
+    node = node.firstChild;
+    while (node) {
+      //如果是创建的bookmark就跳过
+      if (domUtils.isBookmarkNode(node)) {
+        return 0;
+      }
+      if (
+        (node.nodeType == 1 && !domUtils.isEmptyInlineElement(node)) ||
+        (node.nodeType == 3 && !domUtils.isWhitespace(node))
+      ) {
+        return 0;
+      }
+      node = node.nextSibling;
+    }
+    return 1;
+  },
+
+  /**
+     * 删除node节点下首尾两端的空白文本子节点
+     * @method trimWhiteTextNode
+     * @param { Element } node 需要执行删除操作的元素对象
+     * @example
+     * ```javascript
+     *      var node = document.createElement("div");
+     *
+     *      node.appendChild( document.createTextNode( "" ) );
+     *
+     *      node.appendChild( document.createElement("div") );
+     *
+     *      node.appendChild( document.createTextNode( "" ) );
+     *
+     *      //3
+     *      console.log( node.childNodes.length );
+     *
+     *      UE.dom.domUtils.trimWhiteTextNode( node );
+     *
+     *      //1
+     *      console.log( node.childNodes.length );
+     * ```
+     */
+  trimWhiteTextNode: function(node) {
+    function remove(dir) {
+      var child;
+      while (
+        (child = node[dir]) &&
+        child.nodeType == 3 &&
+        domUtils.isWhitespace(child)
+      ) {
+        node.removeChild(child);
+      }
+    }
+    remove("firstChild");
+    remove("lastChild");
+  },
+
+  /**
+     * 合并node节点下相同的子节点
+     * @name mergeChild
+     * @desc
+     * UE.dom.domUtils.mergeChild(node,tagName) //tagName要合并的子节点的标签
+     * @example
+     * <p><span style="font-size:12px;">xx<span style="font-size:12px;">aa</span>xx</span></p>
+     * ==> UE.dom.domUtils.mergeChild(node,'span')
+     * <p><span style="font-size:12px;">xxaaxx</span></p>
+     */
+  mergeChild: function(node, tagName, attrs) {
+    var list = domUtils.getElementsByTagName(node, node.tagName.toLowerCase());
+    for (var i = 0, ci; (ci = list[i++]); ) {
+      if (!ci.parentNode || domUtils.isBookmarkNode(ci)) {
+        continue;
+      }
+      //span单独处理
+      if (ci.tagName.toLowerCase() == "span") {
+        if (node === ci.parentNode) {
+          domUtils.trimWhiteTextNode(node);
+          if (node.childNodes.length == 1) {
+            node.style.cssText = ci.style.cssText + ";" + node.style.cssText;
+            domUtils.remove(ci, true);
+            continue;
+          }
+        }
+        ci.style.cssText = node.style.cssText + ";" + ci.style.cssText;
+        if (attrs) {
+          var style = attrs.style;
+          if (style) {
+            style = style.split(";");
+            for (var j = 0, s; (s = style[j++]); ) {
+              ci.style[utils.cssStyleToDomStyle(s.split(":")[0])] = s.split(
+                ":"
+              )[1];
+            }
+          }
+        }
+        if (domUtils.isSameStyle(ci, node)) {
+          domUtils.remove(ci, true);
+        }
+        continue;
+      }
+      if (domUtils.isSameElement(node, ci)) {
+        domUtils.remove(ci, true);
+      }
+    }
+  },
+
+  /**
+     * 原生方法getElementsByTagName的封装
+     * @method getElementsByTagName
+     * @param { Node } node 目标节点对象
+     * @param { String } tagName 需要查找的节点的tagName， 多个tagName以空格分割
+     * @return { Array } 符合条件的节点集合
+     */
+  getElementsByTagName: function(node, name, filter) {
+    if (filter && utils.isString(filter)) {
+      var className = filter;
+      filter = function(node) {
+        return domUtils.hasClass(node, className);
+      };
+    }
+    name = utils.trim(name).replace(/[ ]{2,}/g, " ").split(" ");
+    var arr = [];
+    for (var n = 0, ni; (ni = name[n++]); ) {
+      var list = node.getElementsByTagName(ni);
+      for (var i = 0, ci; (ci = list[i++]); ) {
+        if (!filter || filter(ci)) arr.push(ci);
+      }
+    }
+
+    return arr;
+  },
+  /**
+     * 将节点node提取到父节点上
+     * @method mergeToParent
+     * @param { Element } node 需要提取的元素对象
+     * @example
+     * ```html
+     * <div id="parent">
+     *     <div id="sub">
+     *         <span id="child"></span>
+     *     </div>
+     * </div>
+     *
+     * <script>
+     *
+     *     var child = document.getElementById( "child" );
+     *
+     *     //output: sub
+     *     console.log( child.parentNode.id );
+     *
+     *     UE.dom.domUtils.mergeToParent( child );
+     *
+     *     //output: parent
+     *     console.log( child.parentNode.id );
+     *
+     * </script>
+     * ```
+     */
+  mergeToParent: function(node) {
+    var parent = node.parentNode;
+    while (parent && dtd.$removeEmpty[parent.tagName]) {
+      if (parent.tagName == node.tagName || parent.tagName == "A") {
+        //针对a标签单独处理
+        domUtils.trimWhiteTextNode(parent);
+        //span需要特殊处理  不处理这样的情况 <span stlye="color:#fff">xxx<span style="color:#ccc">xxx</span>xxx</span>
+        if (
+          (parent.tagName == "SPAN" && !domUtils.isSameStyle(parent, node)) ||
+          (parent.tagName == "A" && node.tagName == "SPAN")
+        ) {
+          if (parent.childNodes.length > 1 || parent !== node.parentNode) {
+            node.style.cssText =
+              parent.style.cssText + ";" + node.style.cssText;
+            parent = parent.parentNode;
+            continue;
+          } else {
+            parent.style.cssText += ";" + node.style.cssText;
+            //trace:952 a标签要保持下划线
+            if (parent.tagName == "A") {
+              parent.style.textDecoration = "underline";
+            }
+          }
+        }
+        if (parent.tagName != "A") {
+          parent === node.parentNode && domUtils.remove(node, true);
+          break;
+        }
+      }
+      parent = parent.parentNode;
+    }
+  },
+  /**
+     * 合并节点node的左右兄弟节点
+     * @method mergeSibling
+     * @param { Element } node 需要合并的目标节点
+     * @example
+     * ```html
+     * <b>xxxx</b><b id="test">ooo</b><b>xxxx</b>
+     *
+     * <script>
+     *     var demoNode = document.getElementById("test");
+     *     UE.dom.domUtils.mergeSibling( demoNode );
+     *     //output: xxxxoooxxxx
+     *     console.log( demoNode.innerHTML );
+     * </script>
+     * ```
+     */
+
+  /**
+     * 合并节点node的左右兄弟节点， 可以根据给定的条件选择是否忽略合并左节点。
+     * @method mergeSibling
+     * @param { Element } node 需要合并的目标节点
+     * @param { Boolean } ignorePre 是否忽略合并左节点
+     * @example
+     * ```html
+     * <b>xxxx</b><b id="test">ooo</b><b>xxxx</b>
+     *
+     * <script>
+     *     var demoNode = document.getElementById("test");
+     *     UE.dom.domUtils.mergeSibling( demoNode, true );
+     *     //output: oooxxxx
+     *     console.log( demoNode.innerHTML );
+     * </script>
+     * ```
+     */
+
+  /**
+     * 合并节点node的左右兄弟节点，可以根据给定的条件选择是否忽略合并左右节点。
+     * @method mergeSibling
+     * @param { Element } node 需要合并的目标节点
+     * @param { Boolean } ignorePre 是否忽略合并左节点
+     * @param { Boolean } ignoreNext 是否忽略合并右节点
+     * @remind 如果同时忽略左右节点， 则该操作什么也不会做
+     * @example
+     * ```html
+     * <b>xxxx</b><b id="test">ooo</b><b>xxxx</b>
+     *
+     * <script>
+     *     var demoNode = document.getElementById("test");
+     *     UE.dom.domUtils.mergeSibling( demoNode, false, true );
+     *     //output: xxxxooo
+     *     console.log( demoNode.innerHTML );
+     * </script>
+     * ```
+     */
+  mergeSibling: function(node, ignorePre, ignoreNext) {
+    function merge(rtl, start, node) {
+      var next;
+      if (
+        (next = node[rtl]) &&
+        !domUtils.isBookmarkNode(next) &&
+        next.nodeType == 1 &&
+        domUtils.isSameElement(node, next)
+      ) {
+        while (next.firstChild) {
+          if (start == "firstChild") {
+            node.insertBefore(next.lastChild, node.firstChild);
+          } else {
+            node.appendChild(next.firstChild);
+          }
+        }
+        domUtils.remove(next);
+      }
+    }
+    !ignorePre && merge("previousSibling", "firstChild", node);
+    !ignoreNext && merge("nextSibling", "lastChild", node);
+  },
+
+  /**
+     * 设置节点node及其子节点不会被选中
+     * @method unSelectable
+     * @param { Element } node 需要执行操作的dom元素
+     * @remind 执行该操作后的节点， 将不能被鼠标选中
+     * @example
+     * ```javascript
+     * UE.dom.domUtils.unSelectable( document.body );
+     * ```
+     */
+  unSelectable: (ie && browser.ie9below) || browser.opera
+    ? function(node) {
+        //for ie9
+        node.onselectstart = function() {
+          return false;
+        };
+        node.onclick = node.onkeyup = node.onkeydown = function() {
+          return false;
+        };
+        node.unselectable = "on";
+        node.setAttribute("unselectable", "on");
+        for (var i = 0, ci; (ci = node.all[i++]); ) {
+          switch (ci.tagName.toLowerCase()) {
+            case "iframe":
+            case "textarea":
+            case "input":
+            case "select":
+              break;
+            default:
+              ci.unselectable = "on";
+              node.setAttribute("unselectable", "on");
+          }
+        }
+      }
+    : function(node) {
+        node.style.MozUserSelect = node.style.webkitUserSelect = node.style.msUserSelect = node.style.KhtmlUserSelect =
+          "none";
+      },
+  /**
+     * 删除节点node上的指定属性名称的属性
+     * @method  removeAttributes
+     * @param { Node } node 需要删除属性的节点对象
+     * @param { String } attrNames 可以是空格隔开的多个属性名称，该操作将会依次删除相应的属性
+     * @example
+     * ```html
+     * <div id="wrap">
+     *      <span style="font-size:14px;" id="test" name="followMe">xxxxx</span>
+     * </div>
+     *
+     * <script>
+     *
+     *     UE.dom.domUtils.removeAttributes( document.getElementById( "test" ), "id name" );
+     *
+     *     //output: <span style="font-size:14px;">xxxxx</span>
+     *     console.log( document.getElementById("wrap").innerHTML );
+     *
+     * </script>
+     * ```
+     */
+
+  /**
+     * 删除节点node上的指定属性名称的属性
+     * @method  removeAttributes
+     * @param { Node } node 需要删除属性的节点对象
+     * @param { Array } attrNames 需要删除的属性名数组
+     * @example
+     * ```html
+     * <div id="wrap">
+     *      <span style="font-size:14px;" id="test" name="followMe">xxxxx</span>
+     * </div>
+     *
+     * <script>
+     *
+     *     UE.dom.domUtils.removeAttributes( document.getElementById( "test" ), ["id", "name"] );
+     *
+     *     //output: <span style="font-size:14px;">xxxxx</span>
+     *     console.log( document.getElementById("wrap").innerHTML );
+     *
+     * </script>
+     * ```
+     */
+  removeAttributes: function(node, attrNames) {
+    attrNames = utils.isArray(attrNames)
+      ? attrNames
+      : utils.trim(attrNames).replace(/[ ]{2,}/g, " ").split(" ");
+    for (var i = 0, ci; (ci = attrNames[i++]); ) {
+      ci = attrFix[ci] || ci;
+      switch (ci) {
+        case "className":
+          node[ci] = "";
+          break;
+        case "style":
+          node.style.cssText = "";
+          var val = node.getAttributeNode("style");
+          !browser.ie && val && node.removeAttributeNode(val);
+      }
+      node.removeAttribute(ci);
+    }
+  },
+  /**
+     * 在doc下创建一个标签名为tag，属性为attrs的元素
+     * @method createElement
+     * @param { DomDocument } doc 新创建的元素属于该document节点创建
+     * @param { String } tagName 需要创建的元素的标签名
+     * @param { Object } attrs 新创建的元素的属性key-value集合
+     * @return { Element } 新创建的元素对象
+     * @example
+     * ```javascript
+     * var ele = UE.dom.domUtils.createElement( document, 'div', {
+     *     id: 'test'
+     * } );
+     *
+     * //output: DIV
+     * console.log( ele.tagName );
+     *
+     * //output: test
+     * console.log( ele.id );
+     *
+     * ```
+     */
+  createElement: function(doc, tag, attrs) {
+    return domUtils.setAttributes(doc.createElement(tag), attrs);
+  },
+  /**
+     * 为节点node添加属性attrs，attrs为属性键值对
+     * @method setAttributes
+     * @param { Element } node 需要设置属性的元素对象
+     * @param { Object } attrs 需要设置的属性名-值对
+     * @return { Element } 设置属性的元素对象
+     * @example
+     * ```html
+     * <span id="test"></span>
+     *
+     * <script>
+     *
+     *     var testNode = UE.dom.domUtils.setAttributes( document.getElementById( "test" ), {
+     *         id: 'demo'
+     *     } );
+     *
+     *     //output: demo
+     *     console.log( testNode.id );
+     *
+     * </script>
+     *
+     */
+  setAttributes: function(node, attrs) {
+    for (var attr in attrs) {
+      if('_propertyDelete'===attr){
+        for(var j=0;j<attrs[attr].length;j++){
+          if(node.hasAttribute(attrs[attr][j])){
+            node.removeAttribute(attrs[attr][j]);
+          }
+        }
+        continue;
+      }
+      if (attrs.hasOwnProperty(attr)) {
+        var value = attrs[attr];
+        switch (attr) {
+          case "class":
+            //ie下要这样赋值，setAttribute不起作用
+            node.className = value;
+            break;
+          case "style":
+            node.style.cssText = node.style.cssText + ";" + value;
+            break;
+          case "innerHTML":
+            node[attr] = value;
+            break;
+          case "value":
+            node.value = value;
+            break;
+          default:
+            node.setAttribute(attrFix[attr] || attr, value);
+        }
+      }
+    }
+    return node;
+  },
+
+  /**
+     * 获取元素element经过计算后的样式值
+     * @method getComputedStyle
+     * @param { Element } element 需要获取样式的元素对象
+     * @param { String } styleName 需要获取的样式名
+     * @return { String } 获取到的样式值
+     * @example
+     * ```html
+     * <style type="text/css">
+     *      #test {
+     *          font-size: 15px;
+     *      }
+     * </style>
+     *
+     * <span id="test"></span>
+     *
+     * <script>
+     *     //output: 15px
+     *     console.log( UE.dom.domUtils.getComputedStyle( document.getElementById( "test" ), 'font-size' ) );
+     * </script>
+     * ```
+     */
+  getComputedStyle: function(element, styleName) {
+    //一下的属性单独处理
+    var pros = "width height top left";
+
+    if (pros.indexOf(styleName) > -1) {
+      return (
+        element[
+          "offset" +
+            styleName.replace(/^\w/, function(s) {
+              return s.toUpperCase();
+            })
+        ] + "px"
+      );
+    }
+    //忽略文本节点
+    if (element.nodeType == 3) {
+      element = element.parentNode;
+    }
+    //ie下font-size若body下定义了font-size，则从currentStyle里会取到这个font-size. 取不到实际值，故此修改.
+    if (
+      browser.ie &&
+      browser.version < 9 &&
+      styleName == "font-size" &&
+      !element.style.fontSize &&
+      !dtd.$empty[element.tagName] &&
+      !dtd.$nonChild[element.tagName]
+    ) {
+      var span = element.ownerDocument.createElement("span");
+      span.style.cssText = "padding:0;border:0;font-family:simsun;";
+      span.innerHTML = ".";
+      element.appendChild(span);
+      var result = span.offsetHeight;
+      element.removeChild(span);
+      span = null;
+      return result + "px";
+    }
+    try {
+      var value =
+        domUtils.getStyle(element, styleName) ||
+        (window.getComputedStyle
+          ? domUtils
+              .getWindow(element)
+              .getComputedStyle(element, "")
+              .getPropertyValue(styleName)
+          : (element.currentStyle || element.style)[
+              utils.cssStyleToDomStyle(styleName)
+            ]);
+    } catch (e) {
+      return "";
+    }
+    return utils.transUnitToPx(utils.fixColor(styleName, value));
+  },
+  /**
+     * 删除元素element指定的className
+     * @method removeClasses
+     * @param { Element } ele 需要删除class的元素节点
+     * @param { String } classNames 需要删除的className， 多个className之间以空格分开
+     * @example
+     * ```html
+     * <span id="test" class="test1 test2 test3">xxx</span>
+     *
+     * <script>
+     *
+     *     var testNode = document.getElementById( "test" );
+     *     UE.dom.domUtils.removeClasses( testNode, "test1 test2" );
+     *
+     *     //output: test3
+     *     console.log( testNode.className );
+     *
+     * </script>
+     * ```
+     */
+
+  /**
+     * 删除元素element指定的className
+     * @method removeClasses
+     * @param { Element } ele 需要删除class的元素节点
+     * @param { Array } classNames 需要删除的className数组
+     * @example
+     * ```html
+     * <span id="test" class="test1 test2 test3">xxx</span>
+     *
+     * <script>
+     *
+     *     var testNode = document.getElementById( "test" );
+     *     UE.dom.domUtils.removeClasses( testNode, ["test1", "test2"] );
+     *
+     *     //output: test3
+     *     console.log( testNode.className );
+     *
+     * </script>
+     * ```
+     */
+  removeClasses: function(elm, classNames) {
+    classNames = utils.isArray(classNames)
+      ? classNames
+      : utils.trim(classNames).replace(/[ ]{2,}/g, " ").split(" ");
+    for (var i = 0, ci, cls = elm.className; (ci = classNames[i++]); ) {
+      cls = cls.replace(new RegExp("\\b" + ci + "\\b"), "");
+    }
+    cls = utils.trim(cls).replace(/[ ]{2,}/g, " ");
+    if (cls) {
+      elm.className = cls;
+    } else {
+      domUtils.removeAttributes(elm, ["class"]);
+    }
+  },
+  /**
+     * 给元素element添加className
+     * @method addClass
+     * @param { Node } ele 需要增加className的元素
+     * @param { String } classNames 需要添加的className， 多个className之间以空格分割
+     * @remind 相同的类名不会被重复添加
+     * @example
+     * ```html
+     * <span id="test" class="cls1 cls2"></span>
+     *
+     * <script>
+     *     var testNode = document.getElementById("test");
+     *
+     *     UE.dom.domUtils.addClass( testNode, "cls2 cls3 cls4" );
+     *
+     *     //output: cl1 cls2 cls3 cls4
+     *     console.log( testNode.className );
+     *
+     * <script>
+     * ```
+     */
+
+  /**
+     * 给元素element添加className
+     * @method addClass
+     * @param { Node } ele 需要增加className的元素
+     * @param { Array } classNames 需要添加的className的数组
+     * @remind 相同的类名不会被重复添加
+     * @example
+     * ```html
+     * <span id="test" class="cls1 cls2"></span>
+     *
+     * <script>
+     *     var testNode = document.getElementById("test");
+     *
+     *     UE.dom.domUtils.addClass( testNode, ["cls2", "cls3", "cls4"] );
+     *
+     *     //output: cl1 cls2 cls3 cls4
+     *     console.log( testNode.className );
+     *
+     * <script>
+     * ```
+     */
+  addClass: function(elm, classNames) {
+    if (!elm) return;
+    classNames = utils.trim(classNames).replace(/[ ]{2,}/g, " ").split(" ");
+    for (var i = 0, ci, cls = elm.className; (ci = classNames[i++]); ) {
+      if (!new RegExp("\\b" + ci + "\\b").test(cls)) {
+        cls += " " + ci;
+      }
+    }
+    elm.className = utils.trim(cls);
+  },
+  /**
+     * 判断元素element是否包含给定的样式类名className
+     * @method hasClass
+     * @param { Node } ele 需要检测的元素
+     * @param { String } classNames 需要检测的className， 多个className之间用空格分割
+     * @return { Boolean } 元素是否包含所有给定的className
+     * @example
+     * ```html
+     * <span id="test1" class="cls1 cls2"></span>
+     *
+     * <script>
+     *     var test1 = document.getElementById("test1");
+     *
+     *     //output: false
+     *     console.log( UE.dom.domUtils.hasClass( test1, "cls2 cls1 cls3" ) );
+     *
+     *     //output: true
+     *     console.log( UE.dom.domUtils.hasClass( test1, "cls2 cls1" ) );
+     * </script>
+     * ```
+     */
+
+  /**
+     * 判断元素element是否包含给定的样式类名className
+     * @method hasClass
+     * @param { Node } ele 需要检测的元素
+     * @param { Array } classNames 需要检测的className数组
+     * @return { Boolean } 元素是否包含所有给定的className
+     * @example
+     * ```html
+     * <span id="test1" class="cls1 cls2"></span>
+     *
+     * <script>
+     *     var test1 = document.getElementById("test1");
+     *
+     *     //output: false
+     *     console.log( UE.dom.domUtils.hasClass( test1, [ "cls2", "cls1", "cls3" ] ) );
+     *
+     *     //output: true
+     *     console.log( UE.dom.domUtils.hasClass( test1, [ "cls2", "cls1" ]) );
+     * </script>
+     * ```
+     */
+  hasClass: function(element, className) {
+    if (utils.isRegExp(className)) {
+      return className.test(element.className);
+    }
+    className = utils.trim(className).replace(/[ ]{2,}/g, " ").split(" ");
+    for (var i = 0, ci, cls = element.className; (ci = className[i++]); ) {
+      if (!new RegExp("\\b" + ci + "\\b", "i").test(cls)) {
+        return false;
+      }
+    }
+    return i - 1 == className.length;
+  },
+
+  /**
+     * 阻止事件默认行为
+     * @method preventDefault
+     * @param { Event } evt 需要阻止默认行为的事件对象
+     * @example
+     * ```javascript
+     * UE.dom.domUtils.preventDefault( evt );
+     * ```
+     */
+  preventDefault: function(evt) {
+    evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
+  },
+  /**
+     * 删除元素element指定的样式
+     * @method removeStyle
+     * @param { Element } element 需要删除样式的元素
+     * @param { String } styleName 需要删除的样式名
+     * @example
+     * ```html
+     * <span id="test" style="color: red; background: blue;"></span>
+     *
+     * <script>
+     *
+     *     var testNode = document.getElementById("test");
+     *
+     *     UE.dom.domUtils.removeStyle( testNode, 'color' );
+     *
+     *     //output: background: blue;
+     *     console.log( testNode.style.cssText );
+     *
+     * </script>
+     * ```
+     */
+  removeStyle: function(element, name) {
+    if (browser.ie) {
+      //针对color先单独处理一下
+      if (name == "color") {
+        name = "(^|;)" + name;
+      }
+      element.style.cssText = element.style.cssText.replace(
+        new RegExp(name + "[^:]*:[^;]+;?", "ig"),
+        ""
+      );
+    } else {
+      if (element.style.removeProperty) {
+        element.style.removeProperty(name);
+      } else {
+        element.style.removeAttribute(utils.cssStyleToDomStyle(name));
+      }
+    }
+
+    if (!element.style.cssText) {
+      domUtils.removeAttributes(element, ["style"]);
+    }
+  },
+  /**
+     * 获取元素element的style属性的指定值
+     * @method getStyle
+     * @param { Element } element 需要获取属性值的元素
+     * @param { String } styleName 需要获取的style的名称
+     * @warning 该方法仅获取元素style属性中所标明的值
+     * @return { String } 该元素包含指定的style属性值
+     * @example
+     * ```html
+     * <div id="test" style="color: red;"></div>
+     *
+     * <script>
+     *
+     *      var testNode = document.getElementById( "test" );
+     *
+     *      //output: red
+     *      console.log( UE.dom.domUtils.getStyle( testNode, "color" ) );
+     *
+     *      //output: ""
+     *      console.log( UE.dom.domUtils.getStyle( testNode, "background" ) );
+     *
+     * </script>
+     * ```
+     */
+  getStyle: function(element, name) {
+    var value = element.style[utils.cssStyleToDomStyle(name)];
+    return utils.fixColor(name, value);
+  },
+  /**
+     * 为元素element设置样式属性值
+     * @method setStyle
+     * @param { Element } element 需要设置样式的元素
+     * @param { String } styleName 样式名
+     * @param { String } styleValue 样式值
+     * @example
+     * ```html
+     * <div id="test"></div>
+     *
+     * <script>
+     *
+     *      var testNode = document.getElementById( "test" );
+     *
+     *      //output: ""
+     *      console.log( testNode.style.color );
+     *
+     *      UE.dom.domUtils.setStyle( testNode, 'color', 'red' );
+     *      //output: "red"
+     *      console.log( testNode.style.color );
+     *
+     * </script>
+     * ```
+     */
+  setStyle: function(element, name, value) {
+    element.style[utils.cssStyleToDomStyle(name)] = value;
+    if (!utils.trim(element.style.cssText)) {
+      this.removeAttributes(element, "style");
+    }
+  },
+  /**
+     * 为元素element设置多个样式属性值
+     * @method setStyles
+     * @param { Element } element 需要设置样式的元素
+     * @param { Object } styles 样式名值对
+     * @example
+     * ```html
+     * <div id="test"></div>
+     *
+     * <script>
+     *
+     *      var testNode = document.getElementById( "test" );
+     *
+     *      //output: ""
+     *      console.log( testNode.style.color );
+     *
+     *      UE.dom.domUtils.setStyles( testNode, {
+     *          'color': 'red'
+     *      } );
+     *      //output: "red"
+     *      console.log( testNode.style.color );
+     *
+     * </script>
+     * ```
+     */
+  setStyles: function(element, styles) {
+    for (var name in styles) {
+      if (styles.hasOwnProperty(name)) {
+        domUtils.setStyle(element, name, styles[name]);
+      }
+    }
+  },
+  /**
+     * 删除_moz_dirty属性
+     * @private
+     * @method removeDirtyAttr
+     */
+  removeDirtyAttr: function(node) {
+    for (
+      var i = 0, ci, nodes = node.getElementsByTagName("*");
+      (ci = nodes[i++]);
+
+    ) {
+      ci.removeAttribute("_moz_dirty");
+    }
+    node.removeAttribute("_moz_dirty");
+  },
+  /**
+     * 获取子节点的数量
+     * @method getChildCount
+     * @param { Element } node 需要检测的元素
+     * @return { Number } 给定的node元素的子节点数量
+     * @example
+     * ```html
+     * <div id="test">
+     *      <span></span>
+     * </div>
+     *
+     * <script>
+     *
+     *     //output: 3
+     *     console.log( UE.dom.domUtils.getChildCount( document.getElementById("test") ) );
+     *
+     * </script>
+     * ```
+     */
+
+  /**
+     * 根据给定的过滤规则， 获取符合条件的子节点的数量
+     * @method getChildCount
+     * @param { Element } node 需要检测的元素
+     * @param { Function } fn 过滤器， 要求对符合条件的子节点返回true， 反之则要求返回false
+     * @return { Number } 符合过滤条件的node元素的子节点数量
+     * @example
+     * ```html
+     * <div id="test">
+     *      <span></span>
+     * </div>
+     *
+     * <script>
+     *
+     *     //output: 1
+     *     console.log( UE.dom.domUtils.getChildCount( document.getElementById("test"), function ( node ) {
+     *
+     *         return node.nodeType === 1;
+     *
+     *     } ) );
+     *
+     * </script>
+     * ```
+     */
+  getChildCount: function(node, fn) {
+    var count = 0,
+      first = node.firstChild;
+    fn =
+      fn ||
+      function() {
+        return 1;
+      };
+    while (first) {
+      if (fn(first)) {
+        count++;
+      }
+      first = first.nextSibling;
+    }
+    return count;
+  },
+
+  /**
+     * 判断给定节点是否为空节点
+     * @method isEmptyNode
+     * @param { Node } node 需要检测的节点对象
+     * @return { Boolean } 节点是否为空
+     * @example
+     * ```javascript
+     * UE.dom.domUtils.isEmptyNode( document.body );
+     * ```
+     */
+  isEmptyNode: function(node) {
+    return (
+      !node.firstChild ||
+      domUtils.getChildCount(node, function(node) {
+        return (
+          !domUtils.isBr(node) &&
+          !domUtils.isBookmarkNode(node) &&
+          !domUtils.isWhitespace(node)
+        );
+      }) == 0
+    );
+  },
+  clearSelectedArr: function(nodes) {
+    var node;
+    while ((node = nodes.pop())) {
+      domUtils.removeAttributes(node, ["class"]);
+    }
+  },
+  /**
+     * 将显示区域滚动到指定节点的位置
+     * @method scrollToView
+     * @param    {Node}   node    节点
+     * @param    {window}   win      window对象
+     * @param    {Number}    offsetTop    距离上方的偏移量
+     */
+  scrollToView: function(node, win, offsetTop) {
+    var getViewPaneSize = function() {
+      var doc = win.document,
+        mode = doc.compatMode == "CSS1Compat";
+      return {
+        width:
+          (mode ? doc.documentElement.clientWidth : doc.body.clientWidth) || 0,
+        height:
+          (mode ? doc.documentElement.clientHeight : doc.body.clientHeight) || 0
+      };
+    },
+      getScrollPosition = function(win) {
+        if ("pageXOffset" in win) {
+          return {
+            x: win.pageXOffset || 0,
+            y: win.pageYOffset || 0
+          };
+        } else {
+          var doc = win.document;
+          return {
+            x: doc.documentElement.scrollLeft || doc.body.scrollLeft || 0,
+            y: doc.documentElement.scrollTop || doc.body.scrollTop || 0
+          };
+        }
+      };
+    var winHeight = getViewPaneSize().height,
+      offset = winHeight * -1 + offsetTop;
+    offset += node.offsetHeight || 0;
+    var elementPosition = domUtils.getXY(node);
+    offset += elementPosition.y;
+    var currentScroll = getScrollPosition(win).y;
+    // offset += 50;
+    if (offset > currentScroll || offset < currentScroll - winHeight) {
+      win.scrollTo(0, offset + (offset < 0 ? -20 : 20));
+    }
+  },
+  /**
+     * 判断给定节点是否为br
+     * @method isBr
+     * @param { Node } node 需要判断的节点对象
+     * @return { Boolean } 给定的节点是否是br节点
+     */
+  isBr: function(node) {
+    return node.nodeType == 1 && node.tagName == "BR";
+  },
+  /**
+     * 判断给定的节点是否是一个“填充”节点
+     * @private
+     * @method isFillChar
+     * @param { Node } node 需要判断的节点
+     * @param { Boolean } isInStart 是否从节点内容的开始位置匹配
+     * @returns { Boolean } 节点是否是填充节点
+     */
+  isFillChar: function(node, isInStart) {
+    if (node.nodeType != 3) return false;
+    var text = node.nodeValue;
+    if (isInStart) {
+      return new RegExp("^" + domUtils.fillChar).test(text);
+    }
+    return !text.replace(new RegExp(domUtils.fillChar, "g"), "").length;
+  },
+  isStartInblock: function(range) {
+    var tmpRange = range.cloneRange(),
+      flag = 0,
+      start = tmpRange.startContainer,
+      tmp;
+    if (start.nodeType == 1 && start.childNodes[tmpRange.startOffset]) {
+      start = start.childNodes[tmpRange.startOffset];
+      var pre = start.previousSibling;
+      while (pre && domUtils.isFillChar(pre)) {
+        start = pre;
+        pre = pre.previousSibling;
+      }
+    }
+    if (this.isFillChar(start, true) && tmpRange.startOffset == 1) {
+      tmpRange.setStartBefore(start);
+      start = tmpRange.startContainer;
+    }
+
+    while (start && domUtils.isFillChar(start)) {
+      tmp = start;
+      start = start.previousSibling;
+    }
+    if (tmp) {
+      tmpRange.setStartBefore(tmp);
+      start = tmpRange.startContainer;
+    }
+    if (
+      start.nodeType == 1 &&
+      domUtils.isEmptyNode(start) &&
+      tmpRange.startOffset == 1
+    ) {
+      tmpRange.setStart(start, 0).collapse(true);
+    }
+    while (!tmpRange.startOffset) {
+      start = tmpRange.startContainer;
+      if (domUtils.isBlockElm(start) || domUtils.isBody(start)) {
+        flag = 1;
+        break;
+      }
+      var pre = tmpRange.startContainer.previousSibling,
+        tmpNode;
+      if (!pre) {
+        tmpRange.setStartBefore(tmpRange.startContainer);
+      } else {
+        while (pre && domUtils.isFillChar(pre)) {
+          tmpNode = pre;
+          pre = pre.previousSibling;
+        }
+        if (tmpNode) {
+          tmpRange.setStartBefore(tmpNode);
+        } else {
+          tmpRange.setStartBefore(tmpRange.startContainer);
+        }
+      }
+    }
+    return flag && !domUtils.isBody(tmpRange.startContainer) ? 1 : 0;
+  },
+
+  /**
+     * 判断给定的元素是否是一个空元素
+     * @method isEmptyBlock
+     * @param { Element } node 需要判断的元素
+     * @return { Boolean } 是否是空元素
+     * @example
+     * ```html
+     * <div id="test"></div>
+     *
+     * <script>
+     *     //output: true
+     *     console.log( UE.dom.domUtils.isEmptyBlock( document.getElementById("test") ) );
+     * </script>
+     * ```
+     */
+
+  /**
+     * 根据指定的判断规则判断给定的元素是否是一个空元素
+     * @method isEmptyBlock
+     * @param { Element } node 需要判断的元素
+     * @param { RegExp } reg 对内容执行判断的正则表达式对象
+     * @return { Boolean } 是否是空元素
+     */
+  isEmptyBlock: function(node, reg) {
+    if (node.nodeType != 1) return 0;
+    reg = reg || new RegExp("[ \xa0\t\r\n" + domUtils.fillChar + "]", "g");
+
+    if (
+      node[browser.ie ? "innerText" : "textContent"].replace(reg, "").length > 0
+    ) {
+      return 0;
+    }
+    for (var n in dtd.$isNotEmpty) {
+      if (node.getElementsByTagName(n).length) {
+        return 0;
+      }
+    }
+    return 1;
+  },
+
+  /**
+     * 移动元素使得该元素的位置移动指定的偏移量的距离
+     * @method setViewportOffset
+     * @param { Element } element 需要设置偏移量的元素
+     * @param { Object } offset 偏移量， 形如{ left: 100, top: 50 }的一个键值对， 表示该元素将在
+     *                                  现有的位置上向水平方向偏移offset.left的距离， 在竖直方向上偏移
+     *                                  offset.top的距离
+     * @example
+     * ```html
+     * <div id="test" style="top: 100px; left: 50px; position: absolute;"></div>
+     *
+     * <script>
+     *
+     *     var testNode = document.getElementById("test");
+     *
+     *     UE.dom.domUtils.setViewportOffset( testNode, {
+     *         left: 200,
+     *         top: 50
+     *     } );
+     *
+     *     //output: top: 300px; left: 100px; position: absolute;
+     *     console.log( testNode.style.cssText );
+     *
+     * </script>
+     * ```
+     */
+  setViewportOffset: function(element, offset) {
+    var left = parseInt(element.style.left) | 0;
+    var top = parseInt(element.style.top) | 0;
+    var rect = element.getBoundingClientRect();
+    var offsetLeft = offset.left - rect.left;
+    var offsetTop = offset.top - rect.top;
+    if (offsetLeft) {
+      element.style.left = left + offsetLeft + "px";
+    }
+    if (offsetTop) {
+      element.style.top = top + offsetTop + "px";
+    }
+  },
+
+  /**
+     * 用“填充字符”填充节点
+     * @method fillNode
+     * @private
+     * @param { DomDocument } doc 填充的节点所在的docment对象
+     * @param { Node } node 需要填充的节点对象
+     * @example
+     * ```html
+     * <div id="test"></div>
+     *
+     * <script>
+     *     var testNode = document.getElementById("test");
+     *
+     *     //output: 0
+     *     console.log( testNode.childNodes.length );
+     *
+     *     UE.dom.domUtils.fillNode( document, testNode );
+     *
+     *     //output: 1
+     *     console.log( testNode.childNodes.length );
+     *
+     * </script>
+     * ```
+     */
+  fillNode: function(doc, node) {
+    var tmpNode = browser.ie
+      ? doc.createTextNode(domUtils.fillChar)
+      : doc.createElement("br");
+    node.innerHTML = "";
+    node.appendChild(tmpNode);
+  },
+
+  /**
+     * 把节点src的所有子节点追加到另一个节点tag上去
+     * @method moveChild
+     * @param { Node } src 源节点， 该节点下的所有子节点将被移除
+     * @param { Node } tag 目标节点， 从源节点移除的子节点将被追加到该节点下
+     * @example
+     * ```html
+     * <div id="test1">
+     *      <span></span>
+     * </div>
+     * <div id="test2">
+     *     <div></div>
+     * </div>
+     *
+     * <script>
+     *
+     *     var test1 = document.getElementById("test1"),
+     *         test2 = document.getElementById("test2");
+     *
+     *     UE.dom.domUtils.moveChild( test1, test2 );
+     *
+     *     //output: ""（空字符串）
+     *     console.log( test1.innerHTML );
+     *
+     *     //output: "<div></div><span></span>"
+     *     console.log( test2.innerHTML );
+     *
+     * </script>
+     * ```
+     */
+
+  /**
+     * 把节点src的所有子节点移动到另一个节点tag上去, 可以通过dir参数控制附加的行为是“追加”还是“插入顶部”
+     * @method moveChild
+     * @param { Node } src 源节点， 该节点下的所有子节点将被移除
+     * @param { Node } tag 目标节点， 从源节点移除的子节点将被附加到该节点下
+     * @param { Boolean } dir 附加方式， 如果为true， 则附加进去的节点将被放到目标节点的顶部， 反之，则放到末尾
+     * @example
+     * ```html
+     * <div id="test1">
+     *      <span></span>
+     * </div>
+     * <div id="test2">
+     *     <div></div>
+     * </div>
+     *
+     * <script>
+     *
+     *     var test1 = document.getElementById("test1"),
+     *         test2 = document.getElementById("test2");
+     *
+     *     UE.dom.domUtils.moveChild( test1, test2, true );
+     *
+     *     //output: ""（空字符串）
+     *     console.log( test1.innerHTML );
+     *
+     *     //output: "<span></span><div></div>"
+     *     console.log( test2.innerHTML );
+     *
+     * </script>
+     * ```
+     */
+  moveChild: function(src, tag, dir) {
+    while (src.firstChild) {
+      if (dir && tag.firstChild) {
+        tag.insertBefore(src.lastChild, tag.firstChild);
+      } else {
+        tag.appendChild(src.firstChild);
+      }
+    }
+  },
+
+  /**
+     * 判断节点的标签上是否不存在任何属性
+     * @method hasNoAttributes
+     * @private
+     * @param { Node } node 需要检测的节点对象
+     * @return { Boolean } 节点是否不包含任何属性
+     * @example
+     * ```html
+     * <div id="test"><span>xxxx</span></div>
+     *
+     * <script>
+     *
+     *     //output: false
+     *     console.log( UE.dom.domUtils.hasNoAttributes( document.getElementById("test") ) );
+     *
+     *     //output: true
+     *     console.log( UE.dom.domUtils.hasNoAttributes( document.getElementById("test").firstChild ) );
+     *
+     * </script>
+     * ```
+     */
+  hasNoAttributes: function(node) {
+    return browser.ie
+      ? /^<\w+\s*?>/.test(node.outerHTML)
+      : node.attributes.length == 0;
+  },
+
+  /**
+     * 检测节点是否是UEditor所使用的辅助节点
+     * @method isCustomeNode
+     * @private
+     * @param { Node } node 需要检测的节点
+     * @remind 辅助节点是指编辑器要完成工作临时添加的节点， 在输出的时候将会从编辑器内移除， 不会影响最终的结果。
+     * @return { Boolean } 给定的节点是否是一个辅助节点
+     */
+  isCustomeNode: function(node) {
+    return node.nodeType == 1 && node.getAttribute("_ue_custom_node_");
+  },
+
+  /**
+     * 检测节点的标签是否是给定的标签
+     * @method isTagNode
+     * @param { Node } node 需要检测的节点对象
+     * @param { String } tagName 标签
+     * @return { Boolean } 节点的标签是否是给定的标签
+     * @example
+     * ```html
+     * <div id="test"></div>
+     *
+     * <script>
+     *
+     *     //output: true
+     *     console.log( UE.dom.domUtils.isTagNode( document.getElementById("test"), "div" ) );
+     *
+     * </script>
+     * ```
+     */
+  isTagNode: function(node, tagNames) {
+    return (
+      node.nodeType == 1 &&
+      new RegExp("\\b" + node.tagName + "\\b", "i").test(tagNames)
+    );
+  },
+
+  /**
+     * 给定一个节点数组，在通过指定的过滤器过滤后， 获取其中满足过滤条件的第一个节点
+     * @method filterNodeList
+     * @param { Array } nodeList 需要过滤的节点数组
+     * @param { Function } fn 过滤器， 对符合条件的节点， 执行结果返回true， 反之则返回false
+     * @return { Node | NULL } 如果找到符合过滤条件的节点， 则返回该节点， 否则返回NULL
+     * @example
+     * ```javascript
+     * var divNodes = document.getElementsByTagName("div");
+     * divNodes = [].slice.call( divNodes, 0 );
+     *
+     * //output: null
+     * console.log( UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
+     *     return node.tagName.toLowerCase() !== 'div';
+     * } ) );
+     * ```
+     */
+
+  /**
+     * 给定一个节点数组nodeList和一组标签名tagNames， 获取其中能够匹配标签名的节点集合中的第一个节点
+     * @method filterNodeList
+     * @param { Array } nodeList 需要过滤的节点数组
+     * @param { String } tagNames 需要匹配的标签名， 多个标签名之间用空格分割
+     * @return { Node | NULL } 如果找到标签名匹配的节点， 则返回该节点， 否则返回NULL
+     * @example
+     * ```javascript
+     * var divNodes = document.getElementsByTagName("div");
+     * divNodes = [].slice.call( divNodes, 0 );
+     *
+     * //output: null
+     * console.log( UE.dom.domUtils.filterNodeList( divNodes, 'a span' ) );
+     * ```
+     */
+
+  /**
+     * 给定一个节点数组，在通过指定的过滤器过滤后， 如果参数forAll为true， 则会返回所有满足过滤
+     * 条件的节点集合， 否则， 返回满足条件的节点集合中的第一个节点
+     * @method filterNodeList
+     * @param { Array } nodeList 需要过滤的节点数组
+     * @param { Function } fn 过滤器， 对符合条件的节点， 执行结果返回true， 反之则返回false
+     * @param { Boolean } forAll 是否返回整个节点数组, 如果该参数为false， 则返回节点集合中的第一个节点
+     * @return { Array | Node | NULL } 如果找到符合过滤条件的节点， 则根据参数forAll的值决定返回满足
+     *                                      过滤条件的节点数组或第一个节点， 否则返回NULL
+     * @example
+     * ```javascript
+     * var divNodes = document.getElementsByTagName("div");
+     * divNodes = [].slice.call( divNodes, 0 );
+     *
+     * //output: 3（假定有3个div）
+     * console.log( divNodes.length );
+     *
+     * var nodes = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
+     *     return node.tagName.toLowerCase() === 'div';
+     * }, true );
+     *
+     * //output: 3
+     * console.log( nodes.length );
+     *
+     * var node = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
+     *     return node.tagName.toLowerCase() === 'div';
+     * }, false );
+     *
+     * //output: div
+     * console.log( node.nodeName );
+     * ```
+     */
+  filterNodeList: function(nodelist, filter, forAll) {
+    var results = [];
+    if (!utils.isFunction(filter)) {
+      var str = filter;
+      filter = function(n) {
+        return (
+          utils.indexOf(
+            utils.isArray(str) ? str : str.split(" "),
+            n.tagName.toLowerCase()
+          ) != -1
+        );
+      };
+    }
+    utils.each(nodelist, function(n) {
+      filter(n) && results.push(n);
+    });
+    return results.length == 0
+      ? null
+      : results.length == 1 || !forAll ? results[0] : results;
+  },
+
+  /**
+     * 查询给定的range选区是否在给定的node节点内，且在该节点的最末尾
+     * @method isInNodeEndBoundary
+     * @param { UE.dom.Range } rng 需要判断的range对象， 该对象的startContainer不能为NULL
+     * @param node 需要检测的节点对象
+     * @return { Number } 如果给定的选取range对象是在node内部的最末端， 则返回1, 否则返回0
+     */
+  isInNodeEndBoundary: function(rng, node) {
+    var start = rng.startContainer;
+    if (start.nodeType == 3 && rng.startOffset != start.nodeValue.length) {
+      return 0;
+    }
+    if (start.nodeType == 1 && rng.startOffset != start.childNodes.length) {
+      return 0;
+    }
+    while (start !== node) {
+      if (start.nextSibling) {
+        return 0;
+      }
+      start = start.parentNode;
+    }
+    return 1;
+  },
+  isBoundaryNode: function(node, dir) {
+    var tmp;
+    while (!domUtils.isBody(node)) {
+      tmp = node;
+      node = node.parentNode;
+      if (tmp !== node[dir]) {
+        return false;
+      }
+    }
+    return true;
+  },
+  fillHtml: browser.ie11below ? "&nbsp;" : "<br/>"
+});
+var fillCharReg = new RegExp(domUtils.fillChar, "g");
+
+
+// core/Range.js
+/**
+ * Range封装
+ * @file
+ * @module UE.dom
+ * @class Range
+ * @since 1.2.6.1
+ */
+
+/**
+ * dom操作封装
+ * @unfile
+ * @module UE.dom
+ */
+
+/**
+ * Range实现类，本类是UEditor底层核心类，封装不同浏览器之间的Range操作。
+ * @unfile
+ * @module UE.dom
+ * @class Range
+ */
+
+(function() {
+  var guid = 0,
+    fillChar = domUtils.fillChar,
+    fillData;
+
+  /**
+     * 更新range的collapse状态
+     * @param  {Range}   range    range对象
+     */
+  function updateCollapse(range) {
+    range.collapsed =
+      range.startContainer &&
+      range.endContainer &&
+      range.startContainer === range.endContainer &&
+      range.startOffset == range.endOffset;
+  }
+
+  function selectOneNode(rng) {
+    return (
+      !rng.collapsed &&
+      rng.startContainer.nodeType == 1 &&
+      rng.startContainer === rng.endContainer &&
+      rng.endOffset - rng.startOffset == 1
+    );
+  }
+  function setEndPoint(toStart, node, offset, range) {
+    //如果node是自闭合标签要处理
+    if (
+      node.nodeType == 1 &&
+      (dtd.$empty[node.tagName] || dtd.$nonChild[node.tagName])
+    ) {
+      offset = domUtils.getNodeIndex(node) + (toStart ? 0 : 1);
+      node = node.parentNode;
+    }
+    if (toStart) {
+      range.startContainer = node;
+      range.startOffset = offset;
+      if (!range.endContainer) {
+        range.collapse(true);
+      }
+    } else {
+      range.endContainer = node;
+      range.endOffset = offset;
+      if (!range.startContainer) {
+        range.collapse(false);
+      }
+    }
+    updateCollapse(range);
+    return range;
+  }
+
+  function execContentsAction(range, action) {
+    //调整边界
+    //range.includeBookmark();
+    var start = range.startContainer,
+      end = range.endContainer,
+      startOffset = range.startOffset,
+      endOffset = range.endOffset,
+      doc = range.document,
+      frag = doc.createDocumentFragment(),
+      tmpStart,
+      tmpEnd;
+    if (start.nodeType == 1) {
+      start =
+        start.childNodes[startOffset] ||
+        (tmpStart = start.appendChild(doc.createTextNode("")));
+    }
+    if (end.nodeType == 1) {
+      end =
+        end.childNodes[endOffset] ||
+        (tmpEnd = end.appendChild(doc.createTextNode("")));
+    }
+    if (start === end && start.nodeType == 3) {
+      frag.appendChild(
+        doc.createTextNode(
+          start.substringData(startOffset, endOffset - startOffset)
+        )
+      );
+      //is not clone
+      if (action) {
+        start.deleteData(startOffset, endOffset - startOffset);
+        range.collapse(true);
+      }
+      return frag;
+    }
+    var current,
+      currentLevel,
+      clone = frag,
+      startParents = domUtils.findParents(start, true),
+      endParents = domUtils.findParents(end, true);
+    for (var i = 0; startParents[i] == endParents[i]; ) {
+      i++;
+    }
+    for (var j = i, si; (si = startParents[j]); j++) {
+      current = si.nextSibling;
+      if (si == start) {
+        if (!tmpStart) {
+          if (range.startContainer.nodeType == 3) {
+            clone.appendChild(
+              doc.createTextNode(start.nodeValue.slice(startOffset))
+            );
+            //is not clone
+            if (action) {
+              start.deleteData(
+                startOffset,
+                start.nodeValue.length - startOffset
+              );
+            }
+          } else {
+            clone.appendChild(!action ? start.cloneNode(true) : start);
+          }
+        }
+      } else {
+        currentLevel = si.cloneNode(false);
+        clone.appendChild(currentLevel);
+      }
+      while (current) {
+        if (current === end || current === endParents[j]) {
+          break;
+        }
+        si = current.nextSibling;
+        clone.appendChild(!action ? current.cloneNode(true) : current);
+        current = si;
+      }
+      clone = currentLevel;
+    }
+    clone = frag;
+    if (!startParents[i]) {
+      clone.appendChild(startParents[i - 1].cloneNode(false));
+      clone = clone.firstChild;
+    }
+    for (var j = i, ei; (ei = endParents[j]); j++) {
+      current = ei.previousSibling;
+      if (ei == end) {
+        if (!tmpEnd && range.endContainer.nodeType == 3) {
+          clone.appendChild(
+            doc.createTextNode(end.substringData(0, endOffset))
+          );
+          //is not clone
+          if (action) {
+            end.deleteData(0, endOffset);
+          }
+        }
+      } else {
+        currentLevel = ei.cloneNode(false);
+        clone.appendChild(currentLevel);
+      }
+      //如果两端同级，右边第一次已经被开始做了
+      if (j != i || !startParents[i]) {
+        while (current) {
+          if (current === start) {
+            break;
+          }
+          ei = current.previousSibling;
+          clone.insertBefore(
+            !action ? current.cloneNode(true) : current,
+            clone.firstChild
+          );
+          current = ei;
+        }
+      }
+      clone = currentLevel;
+    }
+    if (action) {
+      range
+        .setStartBefore(
+          !endParents[i]
+            ? endParents[i - 1]
+            : !startParents[i] ? startParents[i - 1] : endParents[i]
+        )
+        .collapse(true);
+    }
+    tmpStart && domUtils.remove(tmpStart);
+    tmpEnd && domUtils.remove(tmpEnd);
+    return frag;
+  }
+
+  /**
+     * 创建一个跟document绑定的空的Range实例
+     * @constructor
+     * @param { Document } document 新建的选区所属的文档对象
+     */
+
+  /**
+     * @property { Node } startContainer 当前Range的开始边界的容器节点, 可以是一个元素节点或者是文本节点
+     */
+
+  /**
+     * @property { Node } startOffset 当前Range的开始边界容器节点的偏移量, 如果是元素节点，
+     *                              该值就是childNodes中的第几个节点， 如果是文本节点就是文本内容的第几个字符
+     */
+
+  /**
+     * @property { Node } endContainer 当前Range的结束边界的容器节点, 可以是一个元素节点或者是文本节点
+     */
+
+  /**
+     * @property { Node } endOffset 当前Range的结束边界容器节点的偏移量, 如果是元素节点，
+     *                              该值就是childNodes中的第几个节点， 如果是文本节点就是文本内容的第几个字符
+     */
+
+  /**
+     * @property { Boolean } collapsed 当前Range是否闭合
+     * @default true
+     * @remind Range是闭合的时候， startContainer === endContainer && startOffset === endOffset
+     */
+
+  /**
+     * @property { Document } document 当前Range所属的Document对象
+     * @remind 不同range的的document属性可以是不同的
+     */
+  var Range = (dom.Range = function(document) {
+    var me = this;
+    me.startContainer = me.startOffset = me.endContainer = me.endOffset = null;
+    me.document = document;
+    me.collapsed = true;
+  });
+
+  /**
+     * 删除fillData
+     * @param doc
+     * @param excludeNode
+     */
+  function removeFillData(doc, excludeNode) {
+    try {
+      if (fillData && domUtils.inDoc(fillData, doc)) {
+        if (!fillData.nodeValue.replace(fillCharReg, "").length) {
+          var tmpNode = fillData.parentNode;
+          domUtils.remove(fillData);
+          while (
+            tmpNode &&
+            domUtils.isEmptyInlineElement(tmpNode) &&
+            //safari的contains有bug
+            (browser.safari
+              ? !(
+                  domUtils.getPosition(tmpNode, excludeNode) &
+                  domUtils.POSITION_CONTAINS
+                )
+              : !tmpNode.contains(excludeNode))
+          ) {
+            fillData = tmpNode.parentNode;
+            domUtils.remove(tmpNode);
+            tmpNode = fillData;
+          }
+        } else {
+          fillData.nodeValue = fillData.nodeValue.replace(fillCharReg, "");
+        }
+      }
+    } catch (e) {}
+  }
+
+  /**
+     * @param node
+     * @param dir
+     */
+  function mergeSibling(node, dir) {
+    var tmpNode;
+    node = node[dir];
+    while (node && domUtils.isFillChar(node)) {
+      tmpNode = node[dir];
+      domUtils.remove(node);
+      node = tmpNode;
+    }
+  }
+
+  Range.prototype = {
+    /**
+         * 克隆选区的内容到一个DocumentFragment里
+         * @method cloneContents
+         * @return { DocumentFragment | NULL } 如果选区是闭合的将返回null， 否则， 返回包含所clone内容的DocumentFragment元素
+         * @example
+         * ```html
+         * <body>
+         *      <!-- 中括号表示选区 -->
+         *      <b>x<i>x[x</i>xx]x</b>
+         *
+         *      <script>
+         *          //range是已选中的选区
+         *          var fragment = range.cloneContents(),
+         *              node = document.createElement("div");
+         *
+         *          node.appendChild( fragment );
+         *
+         *          //output: <i>x</i>xx
+         *          console.log( node.innerHTML );
+         *
+         *      </script>
+         * </body>
+         * ```
+         */
+    cloneContents: function() {
+      return this.collapsed ? null : execContentsAction(this, 0);
+    },
+
+    /**
+         * 删除当前选区范围中的所有内容
+         * @method deleteContents
+         * @remind 执行完该操作后， 当前Range对象变成了闭合状态
+         * @return { UE.dom.Range } 当前操作的Range对象
+         * @example
+         * ```html
+         * <body>
+         *      <!-- 中括号表示选区 -->
+         *      <b>x<i>x[x</i>xx]x</b>
+         *
+         *      <script>
+         *          //range是已选中的选区
+         *          range.deleteContents();
+         *
+         *          //竖线表示闭合后的选区位置
+         *          //output: <b>x<i>x</i>|x</b>
+         *          console.log( document.body.innerHTML );
+         *
+         *          //此时， range的各项属性为
+         *          //output: B
+         *          console.log( range.startContainer.tagName );
+         *          //output: 2
+         *          console.log( range.startOffset );
+         *          //output: B
+         *          console.log( range.endContainer.tagName );
+         *          //output: 2
+         *          console.log( range.endOffset );
+         *          //output: true
+         *          console.log( range.collapsed );
+         *
+         *      </script>
+         * </body>
+         * ```
+         */
+    deleteContents: function() {
+      var txt;
+      if (!this.collapsed) {
+        execContentsAction(this, 1);
+      }
+      if (browser.webkit) {
+        txt = this.startContainer;
+        if (txt.nodeType == 3 && !txt.nodeValue.length) {
+          this.setStartBefore(txt).collapse(true);
+          domUtils.remove(txt);
+        }
+      }
+      return this;
+    },
+
+    /**
+         * 将当前选区的内容提取到一个DocumentFragment里
+         * @method extractContents
+         * @remind 执行该操作后， 选区将变成闭合状态
+         * @warning 执行该操作后， 原来选区所选中的内容将从dom树上剥离出来
+         * @return { DocumentFragment } 返回包含所提取内容的DocumentFragment对象
+         * @example
+         * ```html
+         * <body>
+         *      <!-- 中括号表示选区 -->
+         *      <b>x<i>x[x</i>xx]x</b>
+         *
+         *      <script>
+         *          //range是已选中的选区
+         *          var fragment = range.extractContents(),
+         *              node = document.createElement( "div" );
+         *
+         *          node.appendChild( fragment );
+         *
+         *          //竖线表示闭合后的选区位置
+         *
+         *          //output: <b>x<i>x</i>|x</b>
+         *          console.log( document.body.innerHTML );
+         *          //output: <i>x</i>xx
+         *          console.log( node.innerHTML );
+         *
+         *          //此时， range的各项属性为
+         *          //output: B
+         *          console.log( range.startContainer.tagName );
+         *          //output: 2
+         *          console.log( range.startOffset );
+         *          //output: B
+         *          console.log( range.endContainer.tagName );
+         *          //output: 2
+         *          console.log( range.endOffset );
+         *          //output: true
+         *          console.log( range.collapsed );
+         *
+         *      </script>
+         * </body>
+         */
+    extractContents: function() {
+      return this.collapsed ? null : execContentsAction(this, 2);
+    },
+
+    /**
+         * 设置Range的开始容器节点和偏移量
+         * @method  setStart
+         * @remind 如果给定的节点是元素节点，那么offset指的是其子元素中索引为offset的元素，
+         *          如果是文本节点，那么offset指的是其文本内容的第offset个字符
+         * @remind 如果提供的容器节点是一个不能包含子元素的节点， 则该选区的开始容器将被设置
+         *          为该节点的父节点， 此时， 其距离开始容器的偏移量也变成了该节点在其父节点
+         *          中的索引
+         * @param { Node } node 将被设为当前选区开始边界容器的节点对象
+         * @param { int } offset 选区的开始位置偏移量
+         * @return { UE.dom.Range } 当前range对象
+         * @example
+         * ```html
+         * <!-- 选区 -->
+         * <b>xxx<i>x<span>xx</span>xx<em>xx</em>xxx</i>[xxx]</b>
+         *
+         * <script>
+         *
+         *     //执行操作
+         *     range.setStart( document.getElementsByTagName("i")[0], 1 );
+         *
+         *     //此时， 选区变成了
+         *     //<b>xxx<i>x[<span>xx</span>xx<em>xx</em>xxx</i>xxx]</b>
+         *
+         * </script>
+         * ```
+         * @example
+         * ```html
+         * <!-- 选区 -->
+         * <b>xxx<img>[xx]x</b>
+         *
+         * <script>
+         *
+         *     //执行操作
+         *     range.setStart( document.getElementsByTagName("img")[0], 3 );
+         *
+         *     //此时， 选区变成了
+         *     //<b>xxx[<img>xx]x</b>
+         *
+         * </script>
+         * ```
+         */
+    setStart: function(node, offset) {
+      return setEndPoint(true, node, offset, this);
+    },
+
+    /**
+         * 设置Range的结束容器和偏移量
+         * @method  setEnd
+         * @param { Node } node 作为当前选区结束边界容器的节点对象
+         * @param { int } offset 结束边界的偏移量
+         * @see UE.dom.Range:setStart(Node,int)
+         * @return { UE.dom.Range } 当前range对象
+         */
+    setEnd: function(node, offset) {
+      return setEndPoint(false, node, offset, this);
+    },
+
+    /**
+         * 将Range开始位置设置到node节点之后
+         * @method  setStartAfter
+         * @remind 该操作将会把给定节点的父节点作为range的开始容器， 且偏移量是该节点在其父节点中的位置索引+1
+         * @param { Node } node 选区的开始边界将紧接着该节点之后
+         * @return { UE.dom.Range } 当前range对象
+         * @example
+         * ```html
+         * <!-- 选区示例 -->
+         * <b>xx<i>xxx</i><span>xx[x</span>xxx]</b>
+         *
+         * <script>
+         *
+         *     //执行操作
+         *     range.setStartAfter( document.getElementsByTagName("i")[0] );
+         *
+         *     //结果选区
+         *     //<b>xx<i>xxx</i>[<span>xxx</span>xxx]</b>
+         *
+         * </script>
+         * ```
+         */
+    setStartAfter: function(node) {
+      return this.setStart(node.parentNode, domUtils.getNodeIndex(node) + 1);
+    },
+
+    /**
+         * 将Range开始位置设置到node节点之前
+         * @method  setStartBefore
+         * @remind 该操作将会把给定节点的父节点作为range的开始容器， 且偏移量是该节点在其父节点中的位置索引
+         * @param { Node } node 新的选区开始位置在该节点之前
+         * @see UE.dom.Range:setStartAfter(Node)
+         * @return { UE.dom.Range } 当前range对象
+         */
+    setStartBefore: function(node) {
+      return this.setStart(node.parentNode, domUtils.getNodeIndex(node));
+    },
+
+    /**
+         * 将Range结束位置设置到node节点之后
+         * @method  setEndAfter
+         * @remind 该操作将会把给定节点的父节点作为range的结束容器， 且偏移量是该节点在其父节点中的位置索引+1
+         * @param { Node } node 目标节点
+         * @see UE.dom.Range:setStartAfter(Node)
+         * @return { UE.dom.Range } 当前range对象
+         * @example
+         * ```html
+         * <!-- 选区示例 -->
+         * <b>[xx<i>xxx</i><span>xx]x</span>xxx</b>
+         *
+         * <script>
+         *
+         *     //执行操作
+         *     range.setStartAfter( document.getElementsByTagName("span")[0] );
+         *
+         *     //结果选区
+         *     //<b>[xx<i>xxx</i><span>xxx</span>]xxx</b>
+         *
+         * </script>
+         * ```
+         */
+    setEndAfter: function(node) {
+      return this.setEnd(node.parentNode, domUtils.getNodeIndex(node) + 1);
+    },
+
+    /**
+         * 将Range结束位置设置到node节点之前
+         * @method  setEndBefore
+         * @remind 该操作将会把给定节点的父节点作为range的结束容器， 且偏移量是该节点在其父节点中的位置索引
+         * @param { Node } node 目标节点
+         * @see UE.dom.Range:setEndAfter(Node)
+         * @return { UE.dom.Range } 当前range对象
+         */
+    setEndBefore: function(node) {
+      return this.setEnd(node.parentNode, domUtils.getNodeIndex(node));
+    },
+
+    /**
+         * 设置Range的开始位置到node节点内的第一个子节点之前
+         * @method  setStartAtFirst
+         * @remind 选区的开始容器将变成给定的节点， 且偏移量为0
+         * @remind 如果给定的节点是元素节点， 则该节点必须是允许包含子节点的元素。
+         * @param { Node } node 目标节点
+         * @see UE.dom.Range:setStartBefore(Node)
+         * @return { UE.dom.Range } 当前range对象
+         * @example
+         * ```html
+         * <!-- 选区示例 -->
+         * <b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
+         *
+         * <script>
+         *
+         *     //执行操作
+         *     range.setStartAtFirst( document.getElementsByTagName("i")[0] );
+         *
+         *     //结果选区
+         *     //<b>xx<i>[xxx</i><span>xx]x</span>xxx</b>
+         *
+         * </script>
+         * ```
+         */
+    setStartAtFirst: function(node) {
+      return this.setStart(node, 0);
+    },
+
+    /**
+         * 设置Range的开始位置到node节点内的最后一个节点之后
+         * @method setStartAtLast
+         * @remind 选区的开始容器将变成给定的节点， 且偏移量为该节点的子节点数
+         * @remind 如果给定的节点是元素节点， 则该节点必须是允许包含子节点的元素。
+         * @param { Node } node 目标节点
+         * @see UE.dom.Range:setStartAtFirst(Node)
+         * @return { UE.dom.Range } 当前range对象
+         */
+    setStartAtLast: function(node) {
+      return this.setStart(
+        node,
+        node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length
+      );
+    },
+
+    /**
+         * 设置Range的结束位置到node节点内的第一个节点之前
+         * @method  setEndAtFirst
+         * @param { Node } node 目标节点
+         * @remind 选区的结束容器将变成给定的节点， 且偏移量为0
+         * @remind node必须是一个元素节点， 且必须是允许包含子节点的元素。
+         * @see UE.dom.Range:setStartAtFirst(Node)
+         * @return { UE.dom.Range } 当前range对象
+         */
+    setEndAtFirst: function(node) {
+      return this.setEnd(node, 0);
+    },
+
+    /**
+         * 设置Range的结束位置到node节点内的最后一个节点之后
+         * @method  setEndAtLast
+         * @param { Node } node 目标节点
+         * @remind 选区的结束容器将变成给定的节点， 且偏移量为该节点的子节点数量
+         * @remind node必须是一个元素节点， 且必须是允许包含子节点的元素。
+         * @see UE.dom.Range:setStartAtFirst(Node)
+         * @return { UE.dom.Range } 当前range对象
+         */
+    setEndAtLast: function(node) {
+      return this.setEnd(
+        node,
+        node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length
+      );
+    },
+
+    /**
+         * 选中给定节点
+         * @method  selectNode
+         * @remind 此时， 选区的开始容器和结束容器都是该节点的父节点， 其startOffset是该节点在父节点中的位置索引，
+         *          而endOffset为startOffset+1
+         * @param { Node } node 需要选中的节点
+         * @return { UE.dom.Range } 当前range对象，此时的range仅包含当前给定的节点对象
+         * @example
+         * ```html
+         * <!-- 选区示例 -->
+         * <b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
+         *
+         * <script>
+         *
+         *     //执行操作
+         *     range.selectNode( document.getElementsByTagName("i")[0] );
+         *
+         *     //结果选区
+         *     //<b>xx[<i>xxx</i>]<span>xxx</span>xxx</b>
+         *
+         * </script>
+         * ```
+         */
+    selectNode: function(node) {
+      return this.setStartBefore(node).setEndAfter(node);
+    },
+
+    /**
+         * 选中给定节点内部的所有节点
+         * @method  selectNodeContents
+         * @remind 此时， 选区的开始容器和结束容器都是该节点， 其startOffset为0，
+         *          而endOffset是该节点的子节点数。
+         * @param { Node } node 目标节点， 当前range将包含该节点内的所有节点
+         * @return { UE.dom.Range } 当前range对象， 此时range仅包含给定节点的所有子节点
+         * @example
+         * ```html
+         * <!-- 选区示例 -->
+         * <b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
+         *
+         * <script>
+         *
+         *     //执行操作
+         *     range.selectNode( document.getElementsByTagName("b")[0] );
+         *
+         *     //结果选区
+         *     //<b>[xx<i>xxx</i><span>xxx</span>xxx]</b>
+         *
+         * </script>
+         * ```
+         */
+    selectNodeContents: function(node) {
+      return this.setStart(node, 0).setEndAtLast(node);
+    },
+
+    /**
+         * clone当前Range对象
+         * @method  cloneRange
+         * @remind 返回的range是一个全新的range对象， 其内部所有属性与当前被clone的range相同。
+         * @return { UE.dom.Range } 当前range对象的一个副本
+         */
+    cloneRange: function() {
+      var me = this;
+      return new Range(me.document)
+        .setStart(me.startContainer, me.startOffset)
+        .setEnd(me.endContainer, me.endOffset);
+    },
+
+    /**
+         * 向当前选区的结束处闭合选区
+         * @method  collapse
+         * @return { UE.dom.Range } 当前range对象
+         * @example
+         * ```html
+         * <!-- 选区示例 -->
+         * <b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
+         *
+         * <script>
+         *
+         *     //执行操作
+         *     range.collapse();
+         *
+         *     //结果选区
+         *     //“|”表示选区已闭合
+         *     //<b>xx<i>xxx</i><span>xx|x</span>xxx</b>
+         *
+         * </script>
+         * ```
+         */
+
+    /**
+         * 闭合当前选区，根据给定的toStart参数项决定是向当前选区开始处闭合还是向结束处闭合，
+         * 如果toStart的值为true，则向开始位置闭合， 反之，向结束位置闭合。
+         * @method  collapse
+         * @param { Boolean } toStart 是否向选区开始处闭合
+         * @return { UE.dom.Range } 当前range对象，此时range对象处于闭合状态
+         * @see UE.dom.Range:collapse()
+         * @example
+         * ```html
+         * <!-- 选区示例 -->
+         * <b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
+         *
+         * <script>
+         *
+         *     //执行操作
+         *     range.collapse( true );
+         *
+         *     //结果选区
+         *     //“|”表示选区已闭合
+         *     //<b>xx<i>xxx</i><span>|xxx</span>xxx</b>
+         *
+         * </script>
+         * ```
+         */
+    collapse: function(toStart) {
+      var me = this;
+      if (toStart) {
+        me.endContainer = me.startContainer;
+        me.endOffset = me.startOffset;
+      } else {
+        me.startContainer = me.endContainer;
+        me.startOffset = me.endOffset;
+      }
+      me.collapsed = true;
+      return me;
+    },
+
+    /**
+         * 调整range的开始位置和结束位置，使其"收缩"到最小的位置
+         * @method  shrinkBoundary
+         * @return { UE.dom.Range } 当前range对象
+         * @example
+         * ```html
+         * <span>xx<b>xx[</b>xxxxx]</span> => <span>xx<b>xx</b>[xxxxx]</span>
+         * ```
+         *
+         * @example
+         * ```html
+         * <!-- 选区示例 -->
+         * <b>x[xx</b><i>]xxx</i>
+         *
+         * <script>
+         *
+         *     //执行收缩
+         *     range.shrinkBoundary();
+         *
+         *     //结果选区
+         *     //<b>x[xx]</b><i>xxx</i>
+         * </script>
+         * ```
+         *
+         * @example
+         * ```html
+         * [<b><i>xxxx</i>xxxxxxx</b>] => <b><i>[xxxx</i>xxxxxxx]</b>
+         * ```
+         */
+
+    /**
+         * 调整range的开始位置和结束位置，使其"收缩"到最小的位置，
+         * 如果ignoreEnd的值为true，则忽略对结束位置的调整
+         * @method  shrinkBoundary
+         * @param { Boolean } ignoreEnd 是否忽略对结束位置的调整
+         * @return { UE.dom.Range } 当前range对象
+         * @see UE.dom.domUtils.Range:shrinkBoundary()
+         */
+    shrinkBoundary: function(ignoreEnd) {
+      var me = this,
+        child,
+        collapsed = me.collapsed;
+      function check(node) {
+        return (
+          node.nodeType == 1 &&
+          !domUtils.isBookmarkNode(node) &&
+          !dtd.$empty[node.tagName] &&
+          !dtd.$nonChild[node.tagName]
+        );
+      }
+      while (
+        me.startContainer.nodeType == 1 && //是element
+        (child = me.startContainer.childNodes[me.startOffset]) && //子节点也是element
+        check(child)
+      ) {
+        me.setStart(child, 0);
+      }
+      if (collapsed) {
+        return me.collapse(true);
+      }
+      if (!ignoreEnd) {
+        while (
+          me.endContainer.nodeType == 1 && //是element
+          me.endOffset > 0 && //如果是空元素就退出 endOffset=0那么endOffst-1为负值，childNodes[endOffset]报错
+          (child = me.endContainer.childNodes[me.endOffset - 1]) && //子节点也是element
+          check(child)
+        ) {
+          me.setEnd(child, child.childNodes.length);
+        }
+      }
+      return me;
+    },
+
+    /**
+         * 获取离当前选区内包含的所有节点最近的公共祖先节点，
+         * @method  getCommonAncestor
+         * @remind 返回的公共祖先节点一定不是range自身的容器节点， 但有可能是一个文本节点
+         * @return { Node } 当前range对象内所有节点的公共祖先节点
+         * @example
+         * ```html
+         * //选区示例
+         * <span>xxx<b>x[x<em>xx]x</em>xxx</b>xx</span>
+         * <script>
+         *
+         *     var node = range.getCommonAncestor();
+         *
+         *     //公共祖先节点是： b节点
+         *     //输出： B
+         *     console.log(node.tagName);
+         *
+         * </script>
+         * ```
+         */
+
+    /**
+         * 获取当前选区所包含的所有节点的公共祖先节点， 可以根据给定的参数 includeSelf 决定获取到
+         * 的公共祖先节点是否可以是当前选区的startContainer或endContainer节点， 如果 includeSelf
+         * 的取值为true， 则返回的节点可以是自身的容器节点， 否则， 则不能是容器节点
+         * @method  getCommonAncestor
+         * @param { Boolean } includeSelf 是否允许获取到的公共祖先节点是当前range对象的容器节点
+         * @return { Node } 当前range对象内所有节点的公共祖先节点
+         * @see UE.dom.Range:getCommonAncestor()
+         * @example
+         * ```html
+         * <body>
+         *
+         *     <!-- 选区示例 -->
+         *     <b>xxx<i>xxxx<span>xx[x</span>xx]x</i>xxxxxxx</b>
+         *
+         *     <script>
+         *
+         *         var node = range.getCommonAncestor( false );
+         *
+         *         //这里的公共祖先节点是B而不是I， 是因为参数限制了获取到的节点不能是容器节点
+         *         //output: B
+         *         console.log( node.tagName );
+         *
+         *     </script>
+         *
+         * </body>
+         * ```
+         */
+
+    /**
+         * 获取当前选区所包含的所有节点的公共祖先节点， 可以根据给定的参数 includeSelf 决定获取到
+         * 的公共祖先节点是否可以是当前选区的startContainer或endContainer节点， 如果 includeSelf
+         * 的取值为true， 则返回的节点可以是自身的容器节点， 否则， 则不能是容器节点； 同时可以根据
+         * ignoreTextNode 参数的取值决定是否忽略类型为文本节点的祖先节点。
+         * @method  getCommonAncestor
+         * @param { Boolean } includeSelf 是否允许获取到的公共祖先节点是当前range对象的容器节点
+         * @param { Boolean } ignoreTextNode 获取祖先节点的过程中是否忽略类型为文本节点的祖先节点
+         * @return { Node } 当前range对象内所有节点的公共祖先节点
+         * @see UE.dom.Range:getCommonAncestor()
+         * @see UE.dom.Range:getCommonAncestor(Boolean)
+         * @example
+         * ```html
+         * <body>
+         *
+         *     <!-- 选区示例 -->
+         *     <b>xxx<i>xxxx<span>x[x]x</span>xxx</i>xxxxxxx</b>
+         *
+         *     <script>
+         *
+         *         var node = range.getCommonAncestor( true, false );
+         *
+         *         //output: SPAN
+         *         console.log( node.tagName );
+         *
+         *     </script>
+         *
+         * </body>
+         * ```
+         */
+    getCommonAncestor: function(includeSelf, ignoreTextNode) {
+      var me = this,
+        start = me.startContainer,
+        end = me.endContainer;
+      if (start === end) {
+        if (includeSelf && selectOneNode(this)) {
+          start = start.childNodes[me.startOffset];
+          if (start.nodeType == 1) return start;
+        }
+        //只有在上来就相等的情况下才会出现是文本的情况
+        return ignoreTextNode && start.nodeType == 3 ? start.parentNode : start;
+      }
+      return domUtils.getCommonAncestor(start, end);
+    },
+
+    /**
+         * 调整当前Range的开始和结束边界容器，如果是容器节点是文本节点,就调整到包含该文本节点的父节点上
+         * @method trimBoundary
+         * @remind 该操作有可能会引起文本节点被切开
+         * @return { UE.dom.Range } 当前range对象
+         * @example
+         * ```html
+         *
+         * //选区示例
+         * <b>xxx<i>[xxxxx]</i>xxx</b>
+         *
+         * <script>
+         *     //未调整前， 选区的开始容器和结束都是文本节点
+         *     //执行调整
+         *     range.trimBoundary();
+         *
+         *     //调整之后， 容器节点变成了i节点
+         *     //<b>xxx[<i>xxxxx</i>]xxx</b>
+         * </script>
+         * ```
+         */
+
+    /**
+         * 调整当前Range的开始和结束边界容器，如果是容器节点是文本节点,就调整到包含该文本节点的父节点上，
+         * 可以根据 ignoreEnd 参数的值决定是否调整对结束边界的调整
+         * @method trimBoundary
+         * @param { Boolean } ignoreEnd 是否忽略对结束边界的调整
+         * @return { UE.dom.Range } 当前range对象
+         * @example
+         * ```html
+         *
+         * //选区示例
+         * <b>xxx<i>[xxxxx]</i>xxx</b>
+         *
+         * <script>
+         *     //未调整前， 选区的开始容器和结束都是文本节点
+         *     //执行调整
+         *     range.trimBoundary( true );
+         *
+         *     //调整之后， 开始容器节点变成了i节点
+         *     //但是， 结束容器没有发生变化
+         *     //<b>xxx[<i>xxxxx]</i>xxx</b>
+         * </script>
+         * ```
+         */
+    trimBoundary: function(ignoreEnd) {
+      this.txtToElmBoundary();
+      var start = this.startContainer,
+        offset = this.startOffset,
+        collapsed = this.collapsed,
+        end = this.endContainer;
+      if (start.nodeType == 3) {
+        if (offset == 0) {
+          this.setStartBefore(start);
+        } else {
+          if (offset >= start.nodeValue.length) {
+            this.setStartAfter(start);
+          } else {
+            var textNode = domUtils.split(start, offset);
+            //跟新结束边界
+            if (start === end) {
+              this.setEnd(textNode, this.endOffset - offset);
+            } else if (start.parentNode === end) {
+              this.endOffset += 1;
+            }
+            this.setStartBefore(textNode);
+          }
+        }
+        if (collapsed) {
+          return this.collapse(true);
+        }
+      }
+      if (!ignoreEnd) {
+        offset = this.endOffset;
+        end = this.endContainer;
+        if (end.nodeType == 3) {
+          if (offset == 0) {
+            this.setEndBefore(end);
+          } else {
+            offset < end.nodeValue.length && domUtils.split(end, offset);
+            this.setEndAfter(end);
+          }
+        }
+      }
+      return this;
+    },
+
+    /**
+         * 如果选区在文本的边界上，就扩展选区到文本的父节点上, 如果当前选区是闭合的， 则什么也不做
+         * @method txtToElmBoundary
+         * @remind 该操作不会修改dom节点
+         * @return { UE.dom.Range } 当前range对象
+         */
+
+    /**
+         * 如果选区在文本的边界上，就扩展选区到文本的父节点上, 如果当前选区是闭合的， 则根据参数项
+         * ignoreCollapsed 的值决定是否执行该调整
+         * @method txtToElmBoundary
+         * @param { Boolean } ignoreCollapsed 是否忽略选区的闭合状态， 如果该参数取值为true， 则
+         *                      不论选区是否闭合， 都会执行该操作， 反之， 则不会对闭合的选区执行该操作
+         * @return { UE.dom.Range } 当前range对象
+         */
+    txtToElmBoundary: function(ignoreCollapsed) {
+      function adjust(r, c) {
+        var container = r[c + "Container"],
+          offset = r[c + "Offset"];
+        if (container.nodeType == 3) {
+          if (!offset) {
+            r[
+              "set" +
+                c.replace(/(\w)/, function(a) {
+                  return a.toUpperCase();
+                }) +
+                "Before"
+            ](container);
+          } else if (offset >= container.nodeValue.length) {
+            r[
+              "set" +
+                c.replace(/(\w)/, function(a) {
+                  return a.toUpperCase();
+                }) +
+                "After"
+            ](container);
+          }
+        }
+      }
+
+      if (ignoreCollapsed || !this.collapsed) {
+        adjust(this, "start");
+        adjust(this, "end");
+      }
+      return this;
+    },
+
+    /**
+         * 在当前选区的开始位置前插入节点，新插入的节点会被该range包含
+         * @method  insertNode
+         * @param { Node } node 需要插入的节点
+         * @remind 插入的节点可以是一个DocumentFragment依次插入多个节点
+         * @return { UE.dom.Range } 当前range对象
+         */
+    insertNode: function(node) {
+      var first = node,
+        length = 1;
+      if (node.nodeType == 11) {
+        first = node.firstChild;
+        length = node.childNodes.length;
+      }
+      this.trimBoundary(true);
+      var start = this.startContainer,
+        offset = this.startOffset;
+      var nextNode = start.childNodes[offset];
+      if (nextNode) {
+        start.insertBefore(node, nextNode);
+      } else {
+        start.appendChild(node);
+      }
+      if (first.parentNode === this.endContainer) {
+        this.endOffset = this.endOffset + length;
+      }
+      return this.setStartBefore(first);
+    },
+
+    /**
+         * 闭合选区到当前选区的开始位置， 并且定位光标到闭合后的位置
+         * @method  setCursor
+         * @return { UE.dom.Range } 当前range对象
+         * @see UE.dom.Range:collapse()
+         */
+
+    /**
+         * 闭合选区，可以根据参数toEnd的值控制选区是向前闭合还是向后闭合， 并且定位光标到闭合后的位置。
+         * @method  setCursor
+         * @param { Boolean } toEnd 是否向后闭合， 如果为true， 则闭合选区时， 将向结束容器方向闭合，
+         *                      反之，则向开始容器方向闭合
+         * @return { UE.dom.Range } 当前range对象
+         * @see UE.dom.Range:collapse(Boolean)
+         */
+    setCursor: function(toEnd, noFillData) {
+      return this.collapse(!toEnd).select(noFillData);
+    },
+
+    /**
+         * 创建当前range的一个书签，记录下当前range的位置，方便当dom树改变时，还能找回原来的选区位置
+         * @method createBookmark
+         * @param { Boolean } serialize 控制返回的标记位置是对当前位置的引用还是ID，如果该值为true，则
+         *                              返回标记位置的ID， 反之则返回标记位置节点的引用
+         * @return { Object } 返回一个书签记录键值对， 其包含的key有： start => 开始标记的ID或者引用，
+         *                          end => 结束标记的ID或引用， id => 当前标记的类型， 如果为true，则表示
+         *                          返回的记录的类型为ID， 反之则为引用
+         */
+    createBookmark: function(serialize, same) {
+      var endNode,
+        startNode = this.document.createElement("span");
+      startNode.style.cssText = "display:none;line-height:0px;";
+      startNode.appendChild(this.document.createTextNode("\u200D"));
+      startNode.id = "_baidu_bookmark_start_" + (same ? "" : guid++);
+
+      if (!this.collapsed) {
+        endNode = startNode.cloneNode(true);
+        endNode.id = "_baidu_bookmark_end_" + (same ? "" : guid++);
+      }
+      this.insertNode(startNode);
+      if (endNode) {
+        this.collapse().insertNode(endNode).setEndBefore(endNode);
+      }
+      this.setStartAfter(startNode);
+      return {
+        start: serialize ? startNode.id : startNode,
+        end: endNode ? (serialize ? endNode.id : endNode) : null,
+        id: serialize
+      };
+    },
+
+    /**
+         *  调整当前range的边界到书签位置，并删除该书签对象所标记的位置内的节点
+         *  @method  moveToBookmark
+         *  @param { BookMark } bookmark createBookmark所创建的标签对象
+         *  @return { UE.dom.Range } 当前range对象
+         *  @see UE.dom.Range:createBookmark(Boolean)
+         */
+    moveToBookmark: function(bookmark) {
+      var start = bookmark.id
+        ? this.document.getElementById(bookmark.start)
+        : bookmark.start,
+        end = bookmark.end && bookmark.id
+          ? this.document.getElementById(bookmark.end)
+          : bookmark.end;
+      this.setStartBefore(start);
+      domUtils.remove(start);
+      if (end) {
+        this.setEndBefore(end);
+        domUtils.remove(end);
+      } else {
+        this.collapse(true);
+      }
+      return this;
+    },
+
+    /**
+         * 调整range的边界，使其"放大"到最近的父节点
+         * @method  enlarge
+         * @remind 会引起选区的变化
+         * @return { UE.dom.Range } 当前range对象
+         */
+
+    /**
+         * 调整range的边界，使其"放大"到最近的父节点，根据参数 toBlock 的取值， 可以
+         * 要求扩大之后的父节点是block节点
+         * @method  enlarge
+         * @param { Boolean } toBlock 是否要求扩大之后的父节点必须是block节点
+         * @return { UE.dom.Range } 当前range对象
+         */
+    enlarge: function(toBlock, stopFn) {
+      var isBody = domUtils.isBody,
+        pre,
+        node,
+        tmp = this.document.createTextNode("");
+      if (toBlock) {
+        node = this.startContainer;
+        if (node.nodeType == 1) {
+          if (node.childNodes[this.startOffset]) {
+            pre = node = node.childNodes[this.startOffset];
+          } else {
+            node.appendChild(tmp);
+            pre = node = tmp;
+          }
+        } else {
+          pre = node;
+        }
+        while (1) {
+          if (domUtils.isBlockElm(node)) {
+            node = pre;
+            while ((pre = node.previousSibling) && !domUtils.isBlockElm(pre)) {
+              node = pre;
+            }
+            this.setStartBefore(node);
+            break;
+          }
+          pre = node;
+          node = node.parentNode;
+        }
+        node = this.endContainer;
+        if (node.nodeType == 1) {
+          if ((pre = node.childNodes[this.endOffset])) {
+            node.insertBefore(tmp, pre);
+          } else {
+            node.appendChild(tmp);
+          }
+          pre = node = tmp;
+        } else {
+          pre = node;
+        }
+        while (1) {
+          if (domUtils.isBlockElm(node)) {
+            node = pre;
+            while ((pre = node.nextSibling) && !domUtils.isBlockElm(pre)) {
+              node = pre;
+            }
+            this.setEndAfter(node);
+            break;
+          }
+          pre = node;
+          node = node.parentNode;
+        }
+        if (tmp.parentNode === this.endContainer) {
+          this.endOffset--;
+        }
+        domUtils.remove(tmp);
+      }
+
+      // 扩展边界到最大
+      if (!this.collapsed) {
+        while (this.startOffset == 0) {
+          if (stopFn && stopFn(this.startContainer)) {
+            break;
+          }
+          if (isBody(this.startContainer)) {
+            break;
+          }
+          this.setStartBefore(this.startContainer);
+        }
+        while (
+          this.endOffset ==
+          (this.endContainer.nodeType == 1
+            ? this.endContainer.childNodes.length
+            : this.endContainer.nodeValue.length)
+        ) {
+          if (stopFn && stopFn(this.endContainer)) {
+            break;
+          }
+          if (isBody(this.endContainer)) {
+            break;
+          }
+          this.setEndAfter(this.endContainer);
+        }
+      }
+      return this;
+    },
+    enlargeToBlockElm: function(ignoreEnd) {
+      while (!domUtils.isBlockElm(this.startContainer)) {
+        this.setStartBefore(this.startContainer);
+      }
+      if (!ignoreEnd) {
+        while (!domUtils.isBlockElm(this.endContainer)) {
+          this.setEndAfter(this.endContainer);
+        }
+      }
+      return this;
+    },
+    /**
+         * 调整Range的边界，使其"缩小"到最合适的位置
+         * @method adjustmentBoundary
+         * @return { UE.dom.Range } 当前range对象
+         * @see UE.dom.Range:shrinkBoundary()
+         */
+    adjustmentBoundary: function() {
+      if (!this.collapsed) {
+        while (
+          !domUtils.isBody(this.startContainer) &&
+          this.startOffset ==
+            this.startContainer[
+              this.startContainer.nodeType == 3 ? "nodeValue" : "childNodes"
+            ].length &&
+          this.startContainer[
+            this.startContainer.nodeType == 3 ? "nodeValue" : "childNodes"
+          ].length
+        ) {
+          this.setStartAfter(this.startContainer);
+        }
+        while (
+          !domUtils.isBody(this.endContainer) &&
+          !this.endOffset &&
+          this.endContainer[
+            this.endContainer.nodeType == 3 ? "nodeValue" : "childNodes"
+          ].length
+        ) {
+          this.setEndBefore(this.endContainer);
+        }
+      }
+      return this;
+    },
+
+    /**
+         * 给range选区中的内容添加给定的inline标签
+         * @method applyInlineStyle
+         * @param { String } tagName 需要添加的标签名
+         * @example
+         * ```html
+         * <p>xxxx[xxxx]x</p>  ==>  range.applyInlineStyle("strong")  ==>  <p>xxxx[<strong>xxxx</strong>]x</p>
+         * ```
+         */
+
+    /**
+         * 给range选区中的内容添加给定的inline标签， 并且为标签附加上一些初始化属性。
+         * @method applyInlineStyle
+         * @param { String } tagName 需要添加的标签名
+         * @param { Object } attrs 跟随新添加的标签的属性
+         * @return { UE.dom.Range } 当前选区
+         * @example
+         * ```html
+         * <p>xxxx[xxxx]x</p>
+         *
+         * ==>
+         *
+         * <!-- 执行操作 -->
+         * range.applyInlineStyle("strong",{"style":"font-size:12px"})
+         *
+         * ==>
+         *
+         * <p>xxxx[<strong style="font-size:12px">xxxx</strong>]x</p>
+         * ```
+         */
+    applyInlineStyle: function(tagName, attrs, list) {
+      if (this.collapsed) return this;
+      this.trimBoundary()
+        .enlarge(false, function(node) {
+          return node.nodeType == 1 && domUtils.isBlockElm(node);
+        })
+        .adjustmentBoundary();
+      var bookmark = this.createBookmark(),
+        end = bookmark.end,
+        filterFn = function(node) {
+          return node.nodeType == 1
+            ? node.tagName.toLowerCase() != "br"
+            : !domUtils.isWhitespace(node);
+        },
+        current = domUtils.getNextDomNode(bookmark.start, false, filterFn),
+        node,
+        pre,
+        range = this.cloneRange();
+      while (
+        current &&
+        domUtils.getPosition(current, end) & domUtils.POSITION_PRECEDING
+      ) {
+        if (current.nodeType == 3 || dtd[tagName][current.tagName]) {
+          range.setStartBefore(current);
+          node = current;
+          while (
+            node &&
+            (node.nodeType == 3 || dtd[tagName][node.tagName]) &&
+            node !== end
+          ) {
+            pre = node;
+            node = domUtils.getNextDomNode(
+              node,
+              node.nodeType == 1,
+              null,
+              function(parent) {
+                return dtd[tagName][parent.tagName];
+              }
+            );
+          }
+          var frag = range.setEndAfter(pre).extractContents(),
+            elm;
+          if (list && list.length > 0) {
+            var level, top;
+            top = level = list[0].cloneNode(false);
+            for (var i = 1, ci; (ci = list[i++]); ) {
+              level.appendChild(ci.cloneNode(false));
+              level = level.firstChild;
+            }
+            elm = level;
+          } else {
+            elm = range.document.createElement(tagName);
+          }
+          if (attrs) {
+            domUtils.setAttributes(elm, attrs);
+          }
+          elm.appendChild(frag);
+          //针对嵌套span的全局样式指定，做容错处理
+          if (elm.tagName == "SPAN" && attrs && attrs.style) {
+            utils.each(elm.getElementsByTagName("span"), function(s) {
+              s.style.cssText = s.style.cssText + ";" + attrs.style;
+            });
+          }
+          range.insertNode(list ? top : elm);
+          //处理下滑线在a上的情况
+          var aNode;
+          if (
+            tagName == "span" &&
+            attrs.style &&
+            /text\-decoration/.test(attrs.style) &&
+            (aNode = domUtils.findParentByTagName(elm, "a", true))
+          ) {
+            domUtils.setAttributes(aNode, attrs);
+            domUtils.remove(elm, true);
+            elm = aNode;
+          } else {
+            domUtils.mergeSibling(elm);
+            domUtils.clearEmptySibling(elm);
+          }
+          //去除子节点相同的
+          domUtils.mergeChild(elm, attrs);
+          current = domUtils.getNextDomNode(elm, false, filterFn);
+          domUtils.mergeToParent(elm);
+          if (node === end) {
+            break;
+          }
+        } else {
+          current = domUtils.getNextDomNode(current, true, filterFn);
+        }
+      }
+      return this.moveToBookmark(bookmark);
+    },
+
+    /**
+         * 移除当前选区内指定的inline标签，但保留其中的内容
+         * @method removeInlineStyle
+         * @param { String } tagName 需要移除的标签名
+         * @return { UE.dom.Range } 当前的range对象
+         * @example
+         * ```html
+         * xx[x<span>xxx<em>yyy</em>zz]z</span>  => range.removeInlineStyle(["em"])  => xx[x<span>xxxyyyzz]z</span>
+         * ```
+         */
+
+    /**
+         * 移除当前选区内指定的一组inline标签，但保留其中的内容
+         * @method removeInlineStyle
+         * @param { Array } tagNameArr 需要移除的标签名的数组
+         * @return { UE.dom.Range } 当前的range对象
+         * @see UE.dom.Range:removeInlineStyle(String)
+         */
+    removeInlineStyle: function(tagNames) {
+      if (this.collapsed) return this;
+      tagNames = utils.isArray(tagNames) ? tagNames : [tagNames];
+      this.shrinkBoundary().adjustmentBoundary();
+      var start = this.startContainer,
+        end = this.endContainer;
+      while (1) {
+        if (start.nodeType == 1) {
+          if (utils.indexOf(tagNames, start.tagName.toLowerCase()) > -1) {
+            break;
+          }
+          if (start.tagName.toLowerCase() == "body") {
+            start = null;
+            break;
+          }
+        }
+        start = start.parentNode;
+      }
+      while (1) {
+        if (end.nodeType == 1) {
+          if (utils.indexOf(tagNames, end.tagName.toLowerCase()) > -1) {
+            break;
+          }
+          if (end.tagName.toLowerCase() == "body") {
+            end = null;
+            break;
+          }
+        }
+        end = end.parentNode;
+      }
+      var bookmark = this.createBookmark(),
+        frag,
+        tmpRange;
+      if (start) {
+        tmpRange = this.cloneRange()
+          .setEndBefore(bookmark.start)
+          .setStartBefore(start);
+        frag = tmpRange.extractContents();
+        tmpRange.insertNode(frag);
+        domUtils.clearEmptySibling(start, true);
+        start.parentNode.insertBefore(bookmark.start, start);
+      }
+      if (end) {
+        tmpRange = this.cloneRange()
+          .setStartAfter(bookmark.end)
+          .setEndAfter(end);
+        frag = tmpRange.extractContents();
+        tmpRange.insertNode(frag);
+        domUtils.clearEmptySibling(end, false, true);
+        end.parentNode.insertBefore(bookmark.end, end.nextSibling);
+      }
+      var current = domUtils.getNextDomNode(bookmark.start, false, function(
+        node
+      ) {
+        return node.nodeType == 1;
+      }),
+        next;
+      while (current && current !== bookmark.end) {
+        next = domUtils.getNextDomNode(current, true, function(node) {
+          return node.nodeType == 1;
+        });
+        if (utils.indexOf(tagNames, current.tagName.toLowerCase()) > -1) {
+          domUtils.remove(current, true);
+        }
+        current = next;
+      }
+      return this.moveToBookmark(bookmark);
+    },
+
+    /**
+         * 获取当前选中的自闭合的节点
+         * @method  getClosedNode
+         * @return { Node | NULL } 如果当前选中的是自闭合节点， 则返回该节点， 否则返回NULL
+         */
+    getClosedNode: function() {
+      var node;
+      if (!this.collapsed) {
+        var range = this.cloneRange().adjustmentBoundary().shrinkBoundary();
+        if (selectOneNode(range)) {
+          var child = range.startContainer.childNodes[range.startOffset];
+          if (
+            child &&
+            child.nodeType == 1 &&
+            (dtd.$empty[child.tagName] || dtd.$nonChild[child.tagName])
+          ) {
+            node = child;
+          }
+        }
+      }
+      return node;
+    },
+
+    /**
+         * 在页面上高亮range所表示的选区
+         * @method select
+         * @return { UE.dom.Range } 返回当前Range对象
+         */
+    //这里不区分ie9以上，trace:3824
+    select: browser.ie
+      ? function(noFillData, textRange) {
+          var nativeRange;
+          if (!this.collapsed) this.shrinkBoundary();
+          var node = this.getClosedNode();
+          if (node && !textRange) {
+            try {
+              nativeRange = this.document.body.createControlRange();
+              nativeRange.addElement(node);
+              nativeRange.select();
+            } catch (e) {}
+            return this;
+          }
+          var bookmark = this.createBookmark(),
+            start = bookmark.start,
+            end;
+          nativeRange = this.document.body.createTextRange();
+          nativeRange.moveToElementText(start);
+          nativeRange.moveStart("character", 1);
+          if (!this.collapsed) {
+            var nativeRangeEnd = this.document.body.createTextRange();
+            end = bookmark.end;
+            nativeRangeEnd.moveToElementText(end);
+            nativeRange.setEndPoint("EndToEnd", nativeRangeEnd);
+          } else {
+            if (!noFillData && this.startContainer.nodeType != 3) {
+              //使用<span>|x<span>固定住光标
+              var tmpText = this.document.createTextNode(fillChar),
+                tmp = this.document.createElement("span");
+              tmp.appendChild(this.document.createTextNode(fillChar));
+              start.parentNode.insertBefore(tmp, start);
+              start.parentNode.insertBefore(tmpText, start);
+              //当点b,i,u时，不能清除i上边的b
+              removeFillData(this.document, tmpText);
+              fillData = tmpText;
+              mergeSibling(tmp, "previousSibling");
+              mergeSibling(start, "nextSibling");
+              nativeRange.moveStart("character", -1);
+              nativeRange.collapse(true);
+            }
+          }
+          this.moveToBookmark(bookmark);
+          tmp && domUtils.remove(tmp);
+          //IE在隐藏状态下不支持range操作，catch一下
+          try {
+            nativeRange.select();
+          } catch (e) {}
+          return this;
+        }
+      : function(notInsertFillData) {
+          function checkOffset(rng) {
+            function check(node, offset, dir) {
+              if (node.nodeType == 3 && node.nodeValue.length < offset) {
+                rng[dir + "Offset"] = node.nodeValue.length;
+              }
+            }
+            check(rng.startContainer, rng.startOffset, "start");
+            check(rng.endContainer, rng.endOffset, "end");
+          }
+          var win = domUtils.getWindow(this.document),
+            sel = win.getSelection(),
+            txtNode;
+          //FF下关闭自动长高时滚动条在关闭dialog时会跳
+          //ff下如果不body.focus将不能定位闭合光标到编辑器内
+          browser.gecko ? this.document.body.focus() : win.focus();
+          if (sel) {
+            sel.removeAllRanges();
+            // trace:870 chrome/safari后边是br对于闭合得range不能定位 所以去掉了判断
+            // this.startContainer.nodeType != 3 &&! ((child = this.startContainer.childNodes[this.startOffset]) && child.nodeType == 1 && child.tagName == 'BR'
+            if (this.collapsed && !notInsertFillData) {
+              //                    //opear如果没有节点接着，原生的不能够定位,不能在body的第一级插入空白节点
+              //                    if (notInsertFillData && browser.opera && !domUtils.isBody(this.startContainer) && this.startContainer.nodeType == 1) {
+              //                        var tmp = this.document.createTextNode('');
+              //                        this.insertNode(tmp).setStart(tmp, 0).collapse(true);
+              //                    }
+              //
+              //处理光标落在文本节点的情况
+              //处理以下的情况
+              //<b>|xxxx</b>
+              //<b>xxxx</b>|xxxx
+              //xxxx<b>|</b>
+              var start = this.startContainer,
+                child = start;
+              if (start.nodeType == 1) {
+                child = start.childNodes[this.startOffset];
+              }
+              if (
+                !(start.nodeType == 3 && this.startOffset) &&
+                (child
+                  ? !child.previousSibling ||
+                      child.previousSibling.nodeType != 3
+                  : !start.lastChild || start.lastChild.nodeType != 3)
+              ) {
+                txtNode = this.document.createTextNode(fillChar);
+                //跟着前边走
+                this.insertNode(txtNode);
+                removeFillData(this.document, txtNode);
+                mergeSibling(txtNode, "previousSibling");
+                mergeSibling(txtNode, "nextSibling");
+                fillData = txtNode;
+                this.setStart(txtNode, browser.webkit ? 1 : 0).collapse(true);
+              }
+            }
+            var nativeRange = this.document.createRange();
+            if (
+              this.collapsed &&
+              browser.opera &&
+              this.startContainer.nodeType == 1
+            ) {
+              var child = this.startContainer.childNodes[this.startOffset];
+              if (!child) {
+                //往前靠拢
+                child = this.startContainer.lastChild;
+                if (child && domUtils.isBr(child)) {
+                  this.setStartBefore(child).collapse(true);
+                }
+              } else {
+                //向后靠拢
+                while (child && domUtils.isBlockElm(child)) {
+                  if (child.nodeType == 1 && child.childNodes[0]) {
+                    child = child.childNodes[0];
+                  } else {
+                    break;
+                  }
+                }
+                child && this.setStartBefore(child).collapse(true);
+              }
+            }
+            //是createAddress最后一位算的不准，现在这里进行微调
+            checkOffset(this);
+            nativeRange.setStart(this.startContainer, this.startOffset);
+            nativeRange.setEnd(this.endContainer, this.endOffset);
+            sel.addRange(nativeRange);
+          }
+          return this;
+        },
+
+    /**
+         * 滚动到当前range开始的位置
+         * @method scrollToView
+         * @param { Window } win 当前range对象所属的window对象
+         * @return { UE.dom.Range } 当前Range对象
+         */
+
+    /**
+         * 滚动到距离当前range开始位置 offset 的位置处
+         * @method scrollToView
+         * @param { Window } win 当前range对象所属的window对象
+         * @param { Number } offset 距离range开始位置处的偏移量， 如果为正数， 则向下偏移， 反之， 则向上偏移
+         * @return { UE.dom.Range } 当前Range对象
+         */
+    scrollToView: function(win, offset) {
+      win = win ? window : domUtils.getWindow(this.document);
+      var me = this,
+        span = me.document.createElement("span");
+      //trace:717
+      span.innerHTML = "&nbsp;";
+      me.cloneRange().insertNode(span);
+      domUtils.scrollToView(span, win, offset);
+      domUtils.remove(span);
+      return me;
+    },
+
+    /**
+         * 判断当前选区内容是否占位符
+         * @private
+         * @method inFillChar
+         * @return { Boolean } 如果是占位符返回true，否则返回false
+         */
+    inFillChar: function() {
+      var start = this.startContainer;
+      if (
+        this.collapsed &&
+        start.nodeType == 3 &&
+        start.nodeValue.replace(new RegExp("^" + domUtils.fillChar), "")
+          .length +
+          1 ==
+          start.nodeValue.length
+      ) {
+        return true;
+      }
+      return false;
+    },
+
+    /**
+         * 保存
+         * @method createAddress
+         * @private
+         * @return { Boolean } 返回开始和结束的位置
+         * @example
+         * ```html
+         * <body>
+         *     <p>
+         *         aaaa
+         *         <em>
+         *             <!-- 选区开始 -->
+         *             bbbb
+         *             <!-- 选区结束 -->
+         *         </em>
+         *     </p>
+         *
+         *     <script>
+         *         //output: {startAddress:[0,1,0,0],endAddress:[0,1,0,4]}
+         *         console.log( range.createAddress() );
+         *     </script>
+         * </body>
+         * ```
+         */
+    createAddress: function(ignoreEnd, ignoreTxt) {
+      var addr = {},
+        me = this;
+
+      function getAddress(isStart) {
+        var node = isStart ? me.startContainer : me.endContainer;
+        var parents = domUtils.findParents(node, true, function(node) {
+          return !domUtils.isBody(node);
+        }),
+          addrs = [];
+        for (var i = 0, ci; (ci = parents[i++]); ) {
+          addrs.push(domUtils.getNodeIndex(ci, ignoreTxt));
+        }
+        var firstIndex = 0;
+
+        if (ignoreTxt) {
+          if (node.nodeType == 3) {
+            var tmpNode = node.previousSibling;
+            while (tmpNode && tmpNode.nodeType == 3) {
+              firstIndex += tmpNode.nodeValue.replace(fillCharReg, "").length;
+              tmpNode = tmpNode.previousSibling;
+            }
+            firstIndex += isStart ? me.startOffset : me.endOffset; // - (fillCharReg.test(node.nodeValue) ? 1 : 0 )
+          } else {
+            node = node.childNodes[isStart ? me.startOffset : me.endOffset];
+            if (node) {
+              firstIndex = domUtils.getNodeIndex(node, ignoreTxt);
+            } else {
+              node = isStart ? me.startContainer : me.endContainer;
+              var first = node.firstChild;
+              while (first) {
+                if (domUtils.isFillChar(first)) {
+                  first = first.nextSibling;
+                  continue;
+                }
+                firstIndex++;
+                if (first.nodeType == 3) {
+                  while (first && first.nodeType == 3) {
+                    first = first.nextSibling;
+                  }
+                } else {
+                  first = first.nextSibling;
+                }
+              }
+            }
+          }
+        } else {
+          firstIndex = isStart
+            ? domUtils.isFillChar(node) ? 0 : me.startOffset
+            : me.endOffset;
+        }
+        if (firstIndex < 0) {
+          firstIndex = 0;
+        }
+        addrs.push(firstIndex);
+        return addrs;
+      }
+      addr.startAddress = getAddress(true);
+      if (!ignoreEnd) {
+        addr.endAddress = me.collapsed
+          ? [].concat(addr.startAddress)
+          : getAddress();
+      }
+      return addr;
+    },
+
+    /**
+         * 保存
+         * @method createAddress
+         * @private
+         * @return { Boolean } 返回开始和结束的位置
+         * @example
+         * ```html
+         * <body>
+         *     <p>
+         *         aaaa
+         *         <em>
+         *             <!-- 选区开始 -->
+         *             bbbb
+         *             <!-- 选区结束 -->
+         *         </em>
+         *     </p>
+         *
+         *     <script>
+         *         var range = editor.selection.getRange();
+         *         range.moveToAddress({startAddress:[0,1,0,0],endAddress:[0,1,0,4]});
+         *         range.select();
+         *         //output: 'bbbb'
+         *         console.log(editor.selection.getText());
+         *     </script>
+         * </body>
+         * ```
+         */
+    moveToAddress: function(addr, ignoreEnd) {
+      var me = this;
+      function getNode(address, isStart) {
+        var tmpNode = me.document.body,
+          parentNode,
+          offset;
+        for (var i = 0, ci, l = address.length; i < l; i++) {
+          ci = address[i];
+          parentNode = tmpNode;
+          tmpNode = tmpNode.childNodes[ci];
+          if (!tmpNode) {
+            offset = ci;
+            break;
+          }
+        }
+        if (isStart) {
+          if (tmpNode) {
+            me.setStartBefore(tmpNode);
+          } else {
+            me.setStart(parentNode, offset);
+          }
+        } else {
+          if (tmpNode) {
+            me.setEndBefore(tmpNode);
+          } else {
+            me.setEnd(parentNode, offset);
+          }
+        }
+      }
+      getNode(addr.startAddress, true);
+      !ignoreEnd && addr.endAddress && getNode(addr.endAddress);
+      return me;
+    },
+
+    /**
+         * 判断给定的Range对象是否和当前Range对象表示的是同一个选区
+         * @method equals
+         * @param { UE.dom.Range } 需要判断的Range对象
+         * @return { Boolean } 如果给定的Range对象与当前Range对象表示的是同一个选区， 则返回true， 否则返回false
+         */
+    equals: function(rng) {
+      for (var p in this) {
+        if (this.hasOwnProperty(p)) {
+          if (this[p] !== rng[p]) return false;
+        }
+      }
+      return true;
+    },
+
+    /**
+         * 遍历range内的节点。每当遍历一个节点时， 都会执行参数项 doFn 指定的函数， 该函数的接受当前遍历的节点
+         * 作为其参数。
+         * @method traversal
+         * @param { Function }  doFn 对每个遍历的节点要执行的方法， 该方法接受当前遍历的节点作为其参数
+         * @return { UE.dom.Range } 当前range对象
+         * @example
+         * ```html
+         *
+         * <body>
+         *
+         *     <!-- 选区开始 -->
+         *     <span></span>
+         *     <a></a>
+         *     <!-- 选区结束 -->
+         * </body>
+         *
+         * <script>
+         *
+         *     //output: <span></span><a></a>
+         *     console.log( range.cloneContents() );
+         *
+         *     range.traversal( function ( node ) {
+         *
+         *         if ( node.nodeType === 1 ) {
+         *             node.className = "test";
+         *         }
+         *
+         *     } );
+         *
+         *     //output: <span class="test"></span><a class="test"></a>
+         *     console.log( range.cloneContents() );
+         *
+         * </script>
+         * ```
+         */
+
+    /**
+         * 遍历range内的节点。
+         * 每当遍历一个节点时， 都会执行参数项 doFn 指定的函数， 该函数的接受当前遍历的节点
+         * 作为其参数。
+         * 可以通过参数项 filterFn 来指定一个过滤器， 只有符合该过滤器过滤规则的节点才会触
+         * 发doFn函数的执行
+         * @method traversal
+         * @param { Function } doFn 对每个遍历的节点要执行的方法， 该方法接受当前遍历的节点作为其参数
+         * @param { Function } filterFn 过滤器， 该函数接受当前遍历的节点作为参数， 如果该节点满足过滤
+         *                      规则， 请返回true， 该节点会触发doFn， 否则， 请返回false， 则该节点不
+         *                      会触发doFn。
+         * @return { UE.dom.Range } 当前range对象
+         * @see UE.dom.Range:traversal(Function)
+         * @example
+         * ```html
+         *
+         * <body>
+         *
+         *     <!-- 选区开始 -->
+         *     <span></span>
+         *     <a></a>
+         *     <!-- 选区结束 -->
+         * </body>
+         *
+         * <script>
+         *
+         *     //output: <span></span><a></a>
+         *     console.log( range.cloneContents() );
+         *
+         *     range.traversal( function ( node ) {
+         *
+         *         node.className = "test";
+         *
+         *     }, function ( node ) {
+         *          return node.nodeType === 1;
+         *     } );
+         *
+         *     //output: <span class="test"></span><a class="test"></a>
+         *     console.log( range.cloneContents() );
+         *
+         * </script>
+         * ```
+         */
+    traversal: function(doFn, filterFn) {
+      if (this.collapsed) return this;
+      var bookmark = this.createBookmark(),
+        end = bookmark.end,
+        current = domUtils.getNextDomNode(bookmark.start, false, filterFn);
+      while (
+        current &&
+        current !== end &&
+        domUtils.getPosition(current, end) & domUtils.POSITION_PRECEDING
+      ) {
+        var tmpNode = domUtils.getNextDomNode(current, false, filterFn);
+        doFn(current);
+        current = tmpNode;
+      }
+      return this.moveToBookmark(bookmark);
+    }
+  };
+})();
+
+
+// core/Selection.js
+/**
+ * 选集
+ * @file
+ * @module UE.dom
+ * @class Selection
+ * @since 1.2.6.1
+ */
+
+/**
+ * 选区集合
+ * @unfile
+ * @module UE.dom
+ * @class Selection
+ */
+(function() {
+  function getBoundaryInformation(range, start) {
+    var getIndex = domUtils.getNodeIndex;
+    range = range.duplicate();
+    range.collapse(start);
+    var parent = range.parentElement();
+    //如果节点里没有子节点，直接退出
+    if (!parent.hasChildNodes()) {
+      return { container: parent, offset: 0 };
+    }
+    var siblings = parent.children,
+      child,
+      testRange = range.duplicate(),
+      startIndex = 0,
+      endIndex = siblings.length - 1,
+      index = -1,
+      distance;
+    while (startIndex <= endIndex) {
+      index = Math.floor((startIndex + endIndex) / 2);
+      child = siblings[index];
+      testRange.moveToElementText(child);
+      var position = testRange.compareEndPoints("StartToStart", range);
+      if (position > 0) {
+        endIndex = index - 1;
+      } else if (position < 0) {
+        startIndex = index + 1;
+      } else {
+        //trace:1043
+        return { container: parent, offset: getIndex(child) };
+      }
+    }
+    if (index == -1) {
+      testRange.moveToElementText(parent);
+      testRange.setEndPoint("StartToStart", range);
+      distance = testRange.text.replace(/(\r\n|\r)/g, "\n").length;
+      siblings = parent.childNodes;
+      if (!distance) {
+        child = siblings[siblings.length - 1];
+        return { container: child, offset: child.nodeValue.length };
+      }
+
+      var i = siblings.length;
+      while (distance > 0) {
+        distance -= siblings[--i].nodeValue.length;
+      }
+      return { container: siblings[i], offset: -distance };
+    }
+    testRange.collapse(position > 0);
+    testRange.setEndPoint(position > 0 ? "StartToStart" : "EndToStart", range);
+    distance = testRange.text.replace(/(\r\n|\r)/g, "\n").length;
+    if (!distance) {
+      return dtd.$empty[child.tagName] || dtd.$nonChild[child.tagName]
+        ? {
+            container: parent,
+            offset: getIndex(child) + (position > 0 ? 0 : 1)
+          }
+        : {
+            container: child,
+            offset: position > 0 ? 0 : child.childNodes.length
+          };
+    }
+    while (distance > 0) {
+      try {
+        var pre = child;
+        child = child[position > 0 ? "previousSibling" : "nextSibling"];
+        distance -= child.nodeValue.length;
+      } catch (e) {
+        return { container: parent, offset: getIndex(pre) };
+      }
+    }
+    return {
+      container: child,
+      offset: position > 0 ? -distance : child.nodeValue.length + distance
+    };
+  }
+
+  /**
+     * 将ieRange转换为Range对象
+     * @param {Range}   ieRange    ieRange对象
+     * @param {Range}   range      Range对象
+     * @return  {Range}  range       返回转换后的Range对象
+     */
+  function transformIERangeToRange(ieRange, range) {
+    if (ieRange.item) {
+      range.selectNode(ieRange.item(0));
+    } else {
+      var bi = getBoundaryInformation(ieRange, true);
+      range.setStart(bi.container, bi.offset);
+      if (ieRange.compareEndPoints("StartToEnd", ieRange) != 0) {
+        bi = getBoundaryInformation(ieRange, false);
+        range.setEnd(bi.container, bi.offset);
+      }
+    }
+    return range;
+  }
+
+  /**
+     * 获得ieRange
+     * @param {Selection} sel    Selection对象
+     * @return {ieRange}    得到ieRange
+     */
+  function _getIERange(sel) {
+    var ieRange;
+    //ie下有可能报错
+    try {
+      ieRange = sel.getNative().createRange();
+    } catch (e) {
+      return null;
+    }
+    var el = ieRange.item ? ieRange.item(0) : ieRange.parentElement();
+    if ((el.ownerDocument || el) === sel.document) {
+      return ieRange;
+    }
+    return null;
+  }
+
+  var Selection = (dom.Selection = function(doc) {
+    var me = this,
+      iframe;
+    me.document = doc;
+    if (browser.ie9below) {
+      iframe = domUtils.getWindow(doc).frameElement;
+      domUtils.on(iframe, "beforedeactivate", function() {
+        me._bakIERange = me.getIERange();
+      });
+      domUtils.on(iframe, "activate", function() {
+        try {
+          if (!_getIERange(me) && me._bakIERange) {
+            me._bakIERange.select();
+          }
+        } catch (ex) {}
+        me._bakIERange = null;
+      });
+    }
+    iframe = doc = null;
+  });
+
+  Selection.prototype = {
+    rangeInBody: function(rng, txtRange) {
+      var node = browser.ie9below || txtRange
+        ? rng.item ? rng.item() : rng.parentElement()
+        : rng.startContainer;
+
+      return node === this.document.body || domUtils.inDoc(node, this.document);
+    },
+
+    /**
+         * 获取原生seleciton对象
+         * @method getNative
+         * @return { Object } 获得selection对象
+         * @example
+         * ```javascript
+         * editor.selection.getNative();
+         * ```
+         */
+    getNative: function() {
+      var doc = this.document;
+      try {
+        return !doc
+          ? null
+          : browser.ie9below
+            ? doc.selection
+            : domUtils.getWindow(doc).getSelection();
+      } catch (e) {
+        return null;
+      }
+    },
+
+    /**
+         * 获得ieRange
+         * @method getIERange
+         * @return { Object } 返回ie原生的Range
+         * @example
+         * ```javascript
+         * editor.selection.getIERange();
+         * ```
+         */
+    getIERange: function() {
+      var ieRange = _getIERange(this);
+      if (!ieRange) {
+        if (this._bakIERange) {
+          return this._bakIERange;
+        }
+      }
+      return ieRange;
+    },
+
+    /**
+         * 缓存当前选区的range和选区的开始节点
+         * @method cache
+         */
+    cache: function() {
+      this.clear();
+      this._cachedRange = this.getRange();
+      this._cachedStartElement = this.getStart();
+      this._cachedStartElementPath = this.getStartElementPath();
+    },
+
+    /**
+         * 获取选区开始位置的父节点到body
+         * @method getStartElementPath
+         * @return { Array } 返回父节点集合
+         * @example
+         * ```javascript
+         * editor.selection.getStartElementPath();
+         * ```
+         */
+    getStartElementPath: function() {
+      if (this._cachedStartElementPath) {
+        return this._cachedStartElementPath;
+      }
+      var start = this.getStart();
+      if (start) {
+        return domUtils.findParents(start, true, null, true);
+      }
+      return [];
+    },
+
+    /**
+         * 清空缓存
+         * @method clear
+         */
+    clear: function() {
+      this._cachedStartElementPath = this._cachedRange = this._cachedStartElement = null;
+    },
+
+    /**
+         * 编辑器是否得到了选区
+         * @method isFocus
+         */
+    isFocus: function() {
+      try {
+        if (browser.ie9below) {
+          var nativeRange = _getIERange(this);
+          return !!(nativeRange && this.rangeInBody(nativeRange));
+        } else {
+          return !!this.getNative().rangeCount;
+        }
+      } catch (e) {
+        return false;
+      }
+    },
+
+    /**
+         * 获取选区对应的Range
+         * @method getRange
+         * @return { Object } 得到Range对象
+         * @example
+         * ```javascript
+         * editor.selection.getRange();
+         * ```
+         */
+    getRange: function() {
+      var me = this;
+      function optimze(range) {
+        var child = me.document.body.firstChild,
+          collapsed = range.collapsed;
+        while (child && child.firstChild) {
+          range.setStart(child, 0);
+          child = child.firstChild;
+        }
+        if (!range.startContainer) {
+          range.setStart(me.document.body, 0);
+        }
+        if (collapsed) {
+          range.collapse(true);
+        }
+      }
+
+      if (me._cachedRange != null) {
+        return this._cachedRange;
+      }
+      var range = new baidu.editor.dom.Range(me.document);
+
+      if (browser.ie9below) {
+        var nativeRange = me.getIERange();
+        if (nativeRange) {
+          //备份的_bakIERange可能已经实效了，dom树发生了变化比如从源码模式切回来，所以try一下，实效就放到body开始位置
+          try {
+            transformIERangeToRange(nativeRange, range);
+          } catch (e) {
+            optimze(range);
+          }
+        } else {
+          optimze(range);
+        }
+      } else {
+        var sel = me.getNative();
+        if (sel && sel.rangeCount) {
+          var firstRange = sel.getRangeAt(0);
+          var lastRange = sel.getRangeAt(sel.rangeCount - 1);
+          range
+            .setStart(firstRange.startContainer, firstRange.startOffset)
+            .setEnd(lastRange.endContainer, lastRange.endOffset);
+          if (
+            range.collapsed &&
+            domUtils.isBody(range.startContainer) &&
+            !range.startOffset
+          ) {
+            optimze(range);
+          }
+        } else {
+          //trace:1734 有可能已经不在dom树上了，标识的节点
+          if (
+            this._bakRange &&
+            domUtils.inDoc(this._bakRange.startContainer, this.document)
+          ) {
+            return this._bakRange;
+          }
+          optimze(range);
+        }
+      }
+      return (this._bakRange = range);
+    },
+
+    /**
+         * 获取开始元素，用于状态反射
+         * @method getStart
+         * @return { Element } 获得开始元素
+         * @example
+         * ```javascript
+         * editor.selection.getStart();
+         * ```
+         */
+    getStart: function() {
+      if (this._cachedStartElement) {
+        return this._cachedStartElement;
+      }
+      var range = browser.ie9below ? this.getIERange() : this.getRange(),
+        tmpRange,
+        start,
+        tmp,
+        parent;
+      if (browser.ie9below) {
+        if (!range) {
+          //todo 给第一个值可能会有问题
+          return this.document.body.firstChild;
+        }
+        //control元素
+        if (range.item) {
+          return range.item(0);
+        }
+        tmpRange = range.duplicate();
+        //修正ie下<b>x</b>[xx] 闭合后 <b>x|</b>xx
+        tmpRange.text.length > 0 && tmpRange.moveStart("character", 1);
+        tmpRange.collapse(1);
+        start = tmpRange.parentElement();
+        parent = tmp = range.parentElement();
+        while ((tmp = tmp.parentNode)) {
+          if (tmp == start) {
+            start = parent;
+            break;
+          }
+        }
+      } else {
+        range.shrinkBoundary();
+        start = range.startContainer;
+        if (start.nodeType == 1 && start.hasChildNodes()) {
+          start =
+            start.childNodes[
+              Math.min(start.childNodes.length - 1, range.startOffset)
+            ];
+        }
+        if (start.nodeType == 3) {
+          return start.parentNode;
+        }
+      }
+      return start;
+    },
+
+    /**
+         * 得到选区中的文本
+         * @method getText
+         * @return { String } 选区中包含的文本
+         * @example
+         * ```javascript
+         * editor.selection.getText();
+         * ```
+         */
+    getText: function() {
+      var nativeSel, nativeRange;
+      if (this.isFocus() && (nativeSel = this.getNative())) {
+        nativeRange = browser.ie9below
+          ? nativeSel.createRange()
+          : nativeSel.getRangeAt(0);
+        return browser.ie9below ? nativeRange.text : nativeRange.toString();
+      }
+      return "";
+    },
+
+    /**
+         * 清除选区
+         * @method clearRange
+         * @example
+         * ```javascript
+         * editor.selection.clearRange();
+         * ```
+         */
+    clearRange: function() {
+      this.getNative()[browser.ie9below ? "empty" : "removeAllRanges"]();
+    }
+  };
+})();
+
+
+// core/Editor.js
+/**
+ * 编辑器主类，包含编辑器提供的大部分公用接口
+ * @file
+ * @module UE
+ * @class Editor
+ * @since 1.2.6.1
+ */
+
+/**
+ * UEditor公用空间，UEditor所有的功能都挂载在该空间下
+ * @unfile
+ * @module UE
+ */
+
+/**
+ * UEditor的核心类，为用户提供与编辑器交互的接口。
+ * @unfile
+ * @module UE
+ * @class Editor
+ */
+
+(function() {
+  var uid = 0,
+    _selectionChangeTimer;
+
+  /**
+     * 获取编辑器的html内容，赋值到编辑器所在表单的textarea文本域里面
+     * @private
+     * @method setValue
+     * @param { UE.Editor } editor 编辑器事例
+     */
+  function setValue(form, editor) {
+    var textarea;
+    if (editor.options.textarea) {
+      if (utils.isString(editor.options.textarea)) {
+        for (
+          var i = 0, ti, tis = domUtils.getElementsByTagName(form, "textarea");
+          (ti = tis[i++]);
+
+        ) {
+          if (ti.id == "ueditor_textarea_" + editor.options.textarea) {
+            textarea = ti;
+            break;
+          }
+        }
+      } else {
+        textarea = editor.textarea;
+      }
+    }
+    if (!textarea) {
+      form.appendChild(
+        (textarea = domUtils.createElement(document, "textarea", {
+          name: editor.options.textarea,
+          id: "ueditor_textarea_" + editor.options.textarea,
+          style: "display:none"
+        }))
+      );
+      //不要产生多个textarea
+      editor.textarea = textarea;
+    }
+    !textarea.getAttribute("name") &&
+      textarea.setAttribute("name", editor.options.textarea);
+    textarea.value = editor.hasContents()
+      ? editor.options.allHtmlEnabled
+        ? editor.getAllHtml()
+        : editor.getContent(null, null, true)
+      : "";
+  }
+  function loadPlugins(me) {
+    //初始化插件
+    for (var pi in UE.plugins) {
+      UE.plugins[pi].call(me);
+    }
+  }
+  function checkCurLang(I18N) {
+    for (var lang in I18N) {
+      return lang;
+    }
+  }
+
+  function langReadied(me) {
+    me.langIsReady = true;
+
+    me.fireEvent("langReady");
+  }
+
+  /**
+     * 编辑器准备就绪后会触发该事件
+     * @module UE
+     * @class Editor
+     * @event ready
+     * @remind render方法执行完成之后,会触发该事件
+     * @remind
+     * @example
+     * ```javascript
+     * editor.addListener( 'ready', function( editor ) {
+     *     editor.execCommand( 'focus' ); //编辑器家在完成后，让编辑器拿到焦点
+     * } );
+     * ```
+     */
+  /**
+     * 执行destroy方法,会触发该事件
+     * @module UE
+     * @class Editor
+     * @event destroy
+     * @see UE.Editor:destroy()
+     */
+  /**
+     * 执行reset方法,会触发该事件
+     * @module UE
+     * @class Editor
+     * @event reset
+     * @see UE.Editor:reset()
+     */
+  /**
+     * 执行focus方法,会触发该事件
+     * @module UE
+     * @class Editor
+     * @event focus
+     * @see UE.Editor:focus(Boolean)
+     */
+  /**
+     * 语言加载完成会触发该事件
+     * @module UE
+     * @class Editor
+     * @event langReady
+     */
+  /**
+     * 运行命令之后会触发该命令
+     * @module UE
+     * @class Editor
+     * @event beforeExecCommand
+     */
+  /**
+     * 运行命令之后会触发该命令
+     * @module UE
+     * @class Editor
+     * @event afterExecCommand
+     */
+  /**
+     * 运行命令之前会触发该命令
+     * @module UE
+     * @class Editor
+     * @event firstBeforeExecCommand
+     */
+  /**
+     * 在getContent方法执行之前会触发该事件
+     * @module UE
+     * @class Editor
+     * @event beforeGetContent
+     * @see UE.Editor:getContent()
+     */
+  /**
+     * 在getContent方法执行之后会触发该事件
+     * @module UE
+     * @class Editor
+     * @event afterGetContent
+     * @see UE.Editor:getContent()
+     */
+  /**
+     * 在getAllHtml方法执行时会触发该事件
+     * @module UE
+     * @class Editor
+     * @event getAllHtml
+     * @see UE.Editor:getAllHtml()
+     */
+  /**
+     * 在setContent方法执行之前会触发该事件
+     * @module UE
+     * @class Editor
+     * @event beforeSetContent
+     * @see UE.Editor:setContent(String)
+     */
+  /**
+     * 在setContent方法执行之后会触发该事件
+     * @module UE
+     * @class Editor
+     * @event afterSetContent
+     * @see UE.Editor:setContent(String)
+     */
+  /**
+     * 每当编辑器内部选区发生改变时，将触发该事件
+     * @event selectionchange
+     * @warning 该事件的触发非常频繁，不建议在该事件的处理过程中做重量级的处理
+     * @example
+     * ```javascript
+     * editor.addListener( 'selectionchange', function( editor ) {
+     *     console.log('选区发生改变');
+     * }
+     */
+  /**
+     * 在所有selectionchange的监听函数执行之前，会触发该事件
+     * @module UE
+     * @class Editor
+     * @event beforeSelectionChange
+     * @see UE.Editor:selectionchange
+     */
+  /**
+     * 在所有selectionchange的监听函数执行完之后，会触发该事件
+     * @module UE
+     * @class Editor
+     * @event afterSelectionChange
+     * @see UE.Editor:selectionchange
+     */
+  /**
+     * 编辑器内容发生改变时会触发该事件
+     * @module UE
+     * @class Editor
+     * @event contentChange
+     */
+
+  /**
+     * 以默认参数构建一个编辑器实例
+     * @constructor
+     * @remind 通过 改构造方法实例化的编辑器,不带ui层.需要render到一个容器,编辑器实例才能正常渲染到页面
+     * @example
+     * ```javascript
+     * var editor = new UE.Editor();
+     * editor.execCommand('blod');
+     * ```
+     * @see UE.Config
+     */
+
+  /**
+     * 以给定的参数集合创建一个编辑器实例，对于未指定的参数，将应用默认参数。
+     * @constructor
+     * @remind 通过 改构造方法实例化的编辑器,不带ui层.需要render到一个容器,编辑器实例才能正常渲染到页面
+     * @param { Object } setting 创建编辑器的参数
+     * @example
+     * ```javascript
+     * var editor = new UE.Editor();
+     * editor.execCommand('blod');
+     * ```
+     * @see UE.Config
+     */
+  var Editor = (UE.Editor = function(options) {
+    var me = this;
+    me.uid = uid++;
+    EventBase.call(me);
+    me.commands = {};
+    me.options = utils.extend(utils.clone(options || {}), UEDITOR_CONFIG, true);
+    me.shortcutkeys = {};
+    me.inputRules = [];
+    me.outputRules = [];
+    //设置默认的常用属性
+    me.setOpt(Editor.defaultOptions(me));
+
+    /* 尝试异步加载后台配置 */
+    me.loadServerConfig();
+
+    if (!utils.isEmptyObject(UE.I18N)) {
+      //修改默认的语言类型
+      me.options.lang = checkCurLang(UE.I18N);
+      UE.plugin.load(me);
+      langReadied(me);
+    } else {
+      utils.loadFile(
+        document,
+        {
+          src:
+            me.options.langPath +
+              me.options.lang +
+              "/" +
+              me.options.lang +
+              ".js?20220907",
+          tag: "script",
+          type: "text/javascript",
+          defer: "defer"
+        },
+        function() {
+          UE.plugin.load(me);
+          langReadied(me);
+        }
+      );
+    }
+
+    UE.instants["ueditorInstant" + me.uid] = me;
+  });
+  Editor.prototype = {
+    registerCommand: function(name, obj) {
+      this.commands[name] = obj;
+    },
+    /**
+         * 编辑器对外提供的监听ready事件的接口， 通过调用该方法，达到的效果与监听ready事件是一致的
+         * @method ready
+         * @param { Function } fn 编辑器ready之后所执行的回调, 如果在注册事件之前编辑器已经ready，将会
+         * 立即触发该回调。
+         * @remind 需要等待编辑器加载完成后才能执行的代码,可以使用该方法传入
+         * @example
+         * ```javascript
+         * editor.ready( function( editor ) {
+         *     editor.setContent('初始化完毕');
+         * } );
+         * ```
+         * @see UE.Editor.event:ready
+         */
+    ready: function(fn) {
+      var me = this;
+      if (fn) {
+        me.isReady ? fn.apply(me) : me.addListener("ready", fn);
+      }
+    },
+
+    /**
+         * 该方法是提供给插件里面使用，设置配置项默认值
+         * @method setOpt
+         * @warning 三处设置配置项的优先级: 实例化时传入参数 > setOpt()设置 > config文件里设置
+         * @warning 该方法仅供编辑器插件内部和编辑器初始化时调用，其他地方不能调用。
+         * @param { String } key 编辑器的可接受的选项名称
+         * @param { * } val  该选项可接受的值
+         * @example
+         * ```javascript
+         * editor.setOpt( 'initContent', '欢迎使用编辑器' );
+         * ```
+         */
+
+    /**
+         * 该方法是提供给插件里面使用，以{key:value}集合的方式设置插件内用到的配置项默认值
+         * @method setOpt
+         * @warning 三处设置配置项的优先级: 实例化时传入参数 > setOpt()设置 > config文件里设置
+         * @warning 该方法仅供编辑器插件内部和编辑器初始化时调用，其他地方不能调用。
+         * @param { Object } options 将要设置的选项的键值对对象
+         * @example
+         * ```javascript
+         * editor.setOpt( {
+         *     'initContent': '欢迎使用编辑器'
+         * } );
+         * ```
+         */
+    setOpt: function(key, val) {
+      var obj = {};
+      if (utils.isString(key)) {
+        obj[key] = val;
+      } else {
+        obj = key;
+      }
+      utils.extend(this.options, obj, true);
+    },
+    getOpt: function(key) {
+      return this.options[key];
+    },
+    /**
+         * 销毁编辑器实例，使用textarea代替
+         * @method destroy
+         * @example
+         * ```javascript
+         * editor.destroy();
+         * ```
+         */
+    destroy: function() {
+      var me = this;
+      me.fireEvent("destroy");
+      var container = me.container.parentNode;
+      var textarea = me.textarea;
+      if (!textarea) {
+        textarea = document.createElement("textarea");
+        container.parentNode.insertBefore(textarea, container);
+      } else {
+        textarea.style.display = "";
+      }
+
+      textarea.style.width = me.iframe.offsetWidth + "px";
+      textarea.style.height = me.iframe.offsetHeight + "px";
+      textarea.value = me.getContent();
+      textarea.id = me.key;
+      container.innerHTML = "";
+      domUtils.remove(container);
+      var key = me.key;
+      //trace:2004
+      for (var p in me) {
+        if (me.hasOwnProperty(p)) {
+          delete this[p];
+        }
+      }
+      UE.delEditor(key);
+    },
+
+    /**
+         * 渲染编辑器的DOM到指定容器
+         * @method render
+         * @param { String } containerId 指定一个容器ID
+         * @remind 执行该方法,会触发ready事件
+         * @warning 必须且只能调用一次
+         */
+
+    /**
+         * 渲染编辑器的DOM到指定容器
+         * @method render
+         * @param { Element } containerDom 直接指定容器对象
+         * @remind 执行该方法,会触发ready事件
+         * @warning 必须且只能调用一次
+         */
+    render: function(container) {
+      var me = this,
+        options = me.options,
+        getStyleValue = function(attr) {
+          return parseInt(domUtils.getComputedStyle(container, attr));
+        };
+      if (utils.isString(container)) {
+        container = document.getElementById(container);
+      }
+      if (container) {
+        if (options.initialFrameWidth) {
+          options.minFrameWidth = options.initialFrameWidth;
+        } else {
+          options.minFrameWidth = options.initialFrameWidth =
+            container.offsetWidth;
+        }
+        if (options.initialFrameHeight) {
+          options.minFrameHeight = options.initialFrameHeight;
+        } else {
+          options.initialFrameHeight = options.minFrameHeight =
+            container.offsetHeight;
+        }
+
+        container.style.width = /%$/.test(options.initialFrameWidth)
+          ? "100%"
+          : options.initialFrameWidth -
+              getStyleValue("padding-left") -
+              getStyleValue("padding-right") +
+              "px";
+        container.style.height = /%$/.test(options.initialFrameHeight)
+          ? "100%"
+          : options.initialFrameHeight -
+              getStyleValue("padding-top") -
+              getStyleValue("padding-bottom") +
+              "px";
+
+        container.style.zIndex = options.zIndex;
+        var additionCssHtml = [];
+        for(var i in options.iframeCssUrlsAddition){
+            additionCssHtml.push("<link rel='stylesheet' type='text/css' href='" + utils.unhtml(options.iframeCssUrlsAddition[i]) + "'/>")
+        }
+        var html =
+          (ie && browser.version < 9 ? "" : "<!DOCTYPE html>") +
+          "<html xmlns='http://www.w3.org/1999/xhtml' class='view' >" +
+          "<head>" +
+          "<style type='text/css'>" +
+          //设置四周的留边
+          ".view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n" +
+          //设置默认字体和字号
+          //font-family不能呢随便改，在safari下fillchar会有解析问题
+          "body{margin:8px;font-family:sans-serif;font-size:16px;}" +
+          //设置段落间距
+          "p{margin:5px 0;}</style>" +
+          (options.iframeCssUrl
+            ? "<link rel='stylesheet' type='text/css' href='" +
+                utils.unhtml(options.iframeCssUrl) +
+                "'/>"
+            : "") +
+          (options.initialStyle
+            ? "<style>" + options.initialStyle + "</style>"
+            : "") +
+          additionCssHtml.join("") +
+          "</head>" +
+          "<body class='view' ></body>" +
+          "<script type='text/javascript' " +
+          (ie ? "defer='defer'" : "") +
+          " id='_initialScript'>" +
+          "setTimeout(function(){editor = window.parent.UE.instants['ueditorInstant" +
+          me.uid +
+          "'];editor._setup(document);},0);" +
+          "var _tmpScript = document.getElementById('_initialScript');_tmpScript.parentNode.removeChild(_tmpScript);" +
+          "</script>" +
+          (options.iframeJsUrl
+            ? "<script type='text/javascript' src='" +
+                utils.unhtml(options.iframeJsUrl) +
+                "'></script>"
+            : "") +
+          "</html>";
+
+        container.appendChild(
+          domUtils.createElement(document, "iframe", {
+            id: "ueditor_" + me.uid,
+            width: "100%",
+            height: "100%",
+            frameborder: "0",
+            //先注释掉了，加的原因忘记了，但开启会直接导致全屏模式下内容多时不会出现滚动条
+            //                    scrolling :'no',
+            src:
+              "javascript:void(function(){document.open();" +
+                (options.customDomain && document.domain != location.hostname
+                  ? 'document.domain="' + document.domain + '";'
+                  : "") +
+                'document.write("' +
+                html +
+                '");document.close();}())'
+          })
+        );
+        container.style.overflow = "hidden";
+        //解决如果是给定的百分比，会导致高度算不对的问题
+        setTimeout(function() {
+          if (/%$/.test(options.initialFrameWidth)) {
+            options.minFrameWidth = options.initialFrameWidth =
+              container.offsetWidth;
+            //如果这里给定宽度，会导致ie在拖动窗口大小时，编辑区域不随着变化
+            //                        container.style.width = options.initialFrameWidth + 'px';
+          }
+          if (/%$/.test(options.initialFrameHeight)) {
+            options.minFrameHeight = options.initialFrameHeight =
+              container.offsetHeight;
+            container.style.height = options.initialFrameHeight + "px";
+          }
+        });
+      }
+    },
+
+    /**
+         * 编辑器初始化
+         * @method _setup
+         * @private
+         * @param { Element } doc 编辑器Iframe中的文档对象
+         */
+    _setup: function(doc) {
+      var me = this,
+        options = me.options;
+      if (ie) {
+        doc.body.disabled = true;
+        doc.body.contentEditable = true;
+        doc.body.disabled = false;
+      } else {
+        doc.body.contentEditable = true;
+      }
+      doc.body.spellcheck = false;
+      me.document = doc;
+      me.window = doc.defaultView || doc.parentWindow;
+      me.iframe = me.window.frameElement;
+      me.body = doc.body;
+      me.selection = new dom.Selection(doc);
+      //gecko初始化就能得到range,无法判断isFocus了
+      var geckoSel;
+      if (browser.gecko && (geckoSel = this.selection.getNative())) {
+        geckoSel.removeAllRanges();
+      }
+      this._initEvents();
+      //为form提交提供一个隐藏的textarea
+      for (
+        var form = this.iframe.parentNode;
+        !domUtils.isBody(form);
+        form = form.parentNode
+      ) {
+        if (form.tagName == "FORM") {
+          me.form = form;
+          if (me.options.autoSyncData) {
+            domUtils.on(me.window, "blur", function() {
+              setValue(form, me);
+            });
+          } else {
+            domUtils.on(form, "submit", function() {
+              setValue(this, me);
+            });
+          }
+          break;
+        }
+      }
+      if (options.initialContent) {
+        if (options.autoClearinitialContent) {
+          var oldExecCommand = me.execCommand;
+          me.execCommand = function() {
+            me.fireEvent("firstBeforeExecCommand");
+            return oldExecCommand.apply(me, arguments);
+          };
+          this._setDefaultContent(options.initialContent);
+        } else this.setContent(options.initialContent, false, true);
+      }
+
+      //编辑器不能为空内容
+
+      if (domUtils.isEmptyNode(me.body)) {
+        me.body.innerHTML = "<p>" + (browser.ie ? "" : "<br/>") + "</p>";
+      }
+      //如果要求focus, 就把光标定位到内容开始
+      if (options.focus) {
+        setTimeout(function() {
+          me.focus(me.options.focusInEnd);
+          //如果自动清除开着，就不需要做selectionchange;
+          !me.options.autoClearinitialContent && me._selectionChange();
+        }, 0);
+      }
+      if (!me.container) {
+        me.container = this.iframe.parentNode;
+      }
+      if (options.fullscreen && me.ui) {
+        me.ui.setFullScreen(true);
+      }
+
+      try {
+        me.document.execCommand("2D-position", false, false);
+      } catch (e) {}
+      try {
+        me.document.execCommand("enableInlineTableEditing", false, false);
+      } catch (e) {}
+      try {
+        me.document.execCommand("enableObjectResizing", false, false);
+      } catch (e) {}
+
+      //挂接快捷键
+      me._bindshortcutKeys();
+      me.isReady = 1;
+      me.fireEvent("ready");
+      options.onready && options.onready.call(me);
+      if (!browser.ie9below) {
+        domUtils.on(me.window, ["blur", "focus"], function(e) {
+          //chrome下会出现alt+tab切换时，导致选区位置不对
+          if (e.type == "blur") {
+            me._bakRange = me.selection.getRange();
+            try {
+              me._bakNativeRange = me.selection.getNative().getRangeAt(0);
+              me.selection.getNative().removeAllRanges();
+            } catch (e) {
+              me._bakNativeRange = null;
+            }
+          } else {
+            try {
+              me._bakRange && me._bakRange.select();
+            } catch (e) {}
+          }
+        });
+      }
+      //trace:1518 ff3.6body不够寛，会导致点击空白处无法获得焦点
+      if (browser.gecko && browser.version <= 10902) {
+        //修复ff3.6初始化进来，不能点击获得焦点
+        me.body.contentEditable = false;
+        setTimeout(function() {
+          me.body.contentEditable = true;
+        }, 100);
+        setInterval(function() {
+          me.body.style.height = me.iframe.offsetHeight - 20 + "px";
+        }, 100);
+      }
+
+      !options.isShow && me.setHide();
+      options.readonly && me.setDisabled();
+    },
+
+    /**
+         * 同步数据到编辑器所在的form
+         * 从编辑器的容器节点向上查找form元素，若找到，就同步编辑内容到找到的form里，为提交数据做准备，主要用于是手动提交的情况
+         * 后台取得数据的键值，使用你容器上的name属性，如果没有就使用参数里的textarea项
+         * @method sync
+         * @example
+         * ```javascript
+         * editor.sync();
+         * form.sumbit(); //form变量已经指向了form元素
+         * ```
+         */
+
+    /**
+         * 根据传入的formId，在页面上查找要同步数据的表单，若找到，就同步编辑内容到找到的form里，为提交数据做准备
+         * 后台取得数据的键值，该键值默认使用给定的编辑器容器的name属性，如果没有name属性则使用参数项里给定的“textarea”项
+         * @method sync
+         * @param { String } formID 指定一个要同步数据的form的id,编辑器的数据会同步到你指定form下
+         */
+    sync: function(formId) {
+      var me = this,
+        form = formId
+          ? document.getElementById(formId)
+          : domUtils.findParent(
+              me.iframe.parentNode,
+              function(node) {
+                return node.tagName == "FORM";
+              },
+              true
+            );
+      form && setValue(form, me);
+    },
+
+    /**
+     * 手动触发更新按钮栏状态
+     */
+    syncCommandState: function(){
+      this.fireEvent("selectionchange");
+    },
+
+    /**
+     * 设置编辑器宽度
+     * @param width
+     */
+    setWidth: function(width){
+      if (width !== parseInt(this.iframe.parentNode.parentNode.style.width)) {
+        this.iframe.parentNode.parentNode.style.width = width + "px";
+      }
+    },
+
+    /**
+         * 设置编辑器高度
+         * @method setHeight
+         * @remind 当配置项autoHeightEnabled为真时,该方法无效
+         * @param { Number } number 设置的高度值，纯数值，不带单位
+         * @example
+         * ```javascript
+         * editor.setHeight(number);
+         * ```
+         */
+    setHeight: function(height, notSetHeight) {
+      if (height !== parseInt(this.iframe.parentNode.style.height)) {
+        this.iframe.parentNode.style.height = height + "px";
+      }
+      !notSetHeight &&
+        (this.options.minFrameHeight = this.options.initialFrameHeight = height);
+      this.body.style.height = height + "px";
+      !notSetHeight && this.trigger("setHeight");
+    },
+
+    /**
+         * 为编辑器的编辑命令提供快捷键
+         * 这个接口是为插件扩展提供的接口,主要是为新添加的插件，如果需要添加快捷键，所提供的接口
+         * @method addshortcutkey
+         * @param { Object } keyset 命令名和快捷键键值对对象，多个按钮的快捷键用“＋”分隔
+         * @example
+         * ```javascript
+         * editor.addshortcutkey({
+         *     "Bold" : "ctrl+66",//^B
+         *     "Italic" : "ctrl+73", //^I
+         * });
+         * ```
+         */
+    /**
+         * 这个接口是为插件扩展提供的接口,主要是为新添加的插件，如果需要添加快捷键，所提供的接口
+         * @method addshortcutkey
+         * @param { String } cmd 触发快捷键时，响应的命令
+         * @param { String } keys 快捷键的字符串，多个按钮用“＋”分隔
+         * @example
+         * ```javascript
+         * editor.addshortcutkey("Underline", "ctrl+85"); //^U
+         * ```
+         */
+    addshortcutkey: function(cmd, keys) {
+      var obj = {};
+      if (keys) {
+        obj[cmd] = keys;
+      } else {
+        obj = cmd;
+      }
+      utils.extend(this.shortcutkeys, obj);
+    },
+
+    /**
+         * 对编辑器设置keydown事件监听，绑定快捷键和命令，当快捷键组合触发成功，会响应对应的命令
+         * @method _bindshortcutKeys
+         * @private
+         */
+    _bindshortcutKeys: function() {
+      var me = this,
+        shortcutkeys = this.shortcutkeys;
+      me.addListener("keydown", function(type, e) {
+        var keyCode = e.keyCode || e.which;
+        for (var i in shortcutkeys) {
+          var tmp = shortcutkeys[i].split(",");
+          for (var t = 0, ti; (ti = tmp[t++]); ) {
+            ti = ti.split(":");
+            var key = ti[0],
+              param = ti[1];
+            if (
+              /^(ctrl)(\+shift)?\+(\d+)$/.test(key.toLowerCase()) ||
+              /^(\d+)$/.test(key)
+            ) {
+              if (
+                ((RegExp.$1 == "ctrl" ? e.ctrlKey || e.metaKey : 0) &&
+                  (RegExp.$2 != "" ? e[RegExp.$2.slice(1) + "Key"] : 1) &&
+                  keyCode == RegExp.$3) ||
+                keyCode == RegExp.$1
+              ) {
+                if (me.queryCommandState(i, param) != -1)
+                  me.execCommand(i, param);
+                domUtils.preventDefault(e);
+              }
+            }
+          }
+        }
+      });
+    },
+
+    /**
+         * 获取编辑器的内容
+         * @method getContent
+         * @warning 该方法获取到的是经过编辑器内置的过滤规则进行过滤后得到的内容
+         * @return { String } 编辑器的内容字符串, 如果编辑器的内容为空，或者是空的标签内容（如:”&lt;p&gt;&lt;br/&gt;&lt;/p&gt;“）， 则返回空字符串
+         * @example
+         * ```javascript
+         * //编辑器html内容:<p>1<strong>2<em>34</em>5</strong>6</p>
+         * var content = editor.getContent(); //返回值:<p>1<strong>2<em>34</em>5</strong>6</p>
+         * ```
+         */
+
+    /**
+         * 获取编辑器的内容。 可以通过参数定义编辑器内置的判空规则
+         * @method getContent
+         * @param { Function } fn 自定的判空规则， 要求该方法返回一个boolean类型的值，
+         *                      代表当前编辑器的内容是否空，
+         *                      如果返回true， 则该方法将直接返回空字符串；如果返回false，则编辑器将返回
+         *                      经过内置过滤规则处理后的内容。
+         * @remind 该方法在处理包含有初始化内容的时候能起到很好的作用。
+         * @warning 该方法获取到的是经过编辑器内置的过滤规则进行过滤后得到的内容
+         * @return { String } 编辑器的内容字符串
+         * @example
+         * ```javascript
+         * // editor 是一个编辑器的实例
+         * var content = editor.getContent( function ( editor ) {
+         *      return editor.body.innerHTML === '欢迎使用UEditor'; //返回空字符串
+         * } );
+         * ```
+         */
+    getContent: function(cmd, fn, notSetCursor, ignoreBlank, formatter) {
+      var me = this;
+      if (cmd && utils.isFunction(cmd)) {
+        fn = cmd;
+        cmd = "";
+      }
+      if (fn ? !fn() : !this.hasContents()) {
+        return "";
+      }
+      me.fireEvent("beforegetcontent");
+      var root = UE.htmlparser(me.body.innerHTML, ignoreBlank);
+      me.filterOutputRule(root);
+      me.fireEvent("aftergetcontent", cmd, root);
+      return root.toHtml(formatter);
+    },
+
+    /**
+         * 取得完整的html代码，可以直接显示成完整的html文档
+         * @method getAllHtml
+         * @return { String } 编辑器的内容html文档字符串
+         * @eaxmple
+         * ```javascript
+         * editor.getAllHtml(); //返回格式大致是: <html><head>...</head><body>...</body></html>
+         * ```
+         */
+    getAllHtml: function() {
+      var me = this,
+        headHtml = [],
+        html = "";
+      me.fireEvent("getAllHtml", headHtml);
+      if (browser.ie && browser.version > 8) {
+        var headHtmlForIE9 = "";
+        utils.each(me.document.styleSheets, function(si) {
+          headHtmlForIE9 += si.href
+            ? '<link rel="stylesheet" type="text/css" href="' + si.href + '" />'
+            : "<style>" + si.cssText + "</style>";
+        });
+        utils.each(me.document.getElementsByTagName("script"), function(si) {
+          headHtmlForIE9 += si.outerHTML;
+        });
+      }
+      return (
+        "<html><head>" +
+        (me.options.charset
+          ? '<meta http-equiv="Content-Type" content="text/html; charset=' +
+              me.options.charset +
+              '"/>'
+          : "") +
+        (headHtmlForIE9 ||
+          me.document.getElementsByTagName("head")[0].innerHTML) +
+        headHtml.join("\n") +
+        "</head>" +
+        "<body " +
+        (ie && browser.version < 9 ? 'class="view"' : "") +
+        ">" +
+        me.getContent(null, null, true) +
+        "</body></html>"
+      );
+    },
+
+    /**
+         * 得到编辑器的纯文本内容，但会保留段落格式
+         * @method getPlainTxt
+         * @return { String } 编辑器带段落格式的纯文本内容字符串
+         * @example
+         * ```javascript
+         * //编辑器html内容:<p><strong>1</strong></p><p><strong>2</strong></p>
+         * console.log(editor.getPlainTxt()); //输出:"1\n2\n
+         * ```
+         */
+    getPlainTxt: function() {
+      var reg = new RegExp(domUtils.fillChar, "g"),
+        html = this.body.innerHTML.replace(/[\n\r]/g, ""); //ie要先去了\n在处理
+      html = html
+        .replace(/<(p|div)[^>]*>(<br\/?>|&nbsp;)<\/\1>/gi, "\n")
+        .replace(/<br\/?>/gi, "\n")
+        .replace(/<[^>/]+>/g, "")
+        .replace(/(\n)?<\/([^>]+)>/g, function(a, b, c) {
+          return dtd.$block[c] ? "\n" : b ? b : "";
+        });
+      //取出来的空格会有c2a0会变成乱码，处理这种情况\u00a0
+      return html
+        .replace(reg, "")
+        .replace(/\u00a0/g, " ")
+        .replace(/&nbsp;/g, " ");
+    },
+
+    /**
+         * 获取编辑器中的纯文本内容,没有段落格式
+         * @method getContentTxt
+         * @return { String } 编辑器不带段落格式的纯文本内容字符串
+         * @example
+         * ```javascript
+         * //编辑器html内容:<p><strong>1</strong></p><p><strong>2</strong></p>
+         * console.log(editor.getPlainTxt()); //输出:"12
+         * ```
+         */
+    getContentTxt: function() {
+      var reg = new RegExp(domUtils.fillChar, "g");
+      //取出来的空格会有c2a0会变成乱码，处理这种情况\u00a0
+      return this.body[browser.ie ? "innerText" : "textContent"]
+        .replace(reg, "")
+        .replace(/\u00a0/g, " ");
+    },
+
+    /**
+         * 设置编辑器的内容，可修改编辑器当前的html内容
+         * @method setContent
+         * @warning 通过该方法插入的内容，是经过编辑器内置的过滤规则进行过滤后得到的内容
+         * @warning 该方法会触发selectionchange事件
+         * @param { String } html 要插入的html内容
+         * @example
+         * ```javascript
+         * editor.getContent('<p>test</p>');
+         * ```
+         */
+
+    /**
+         * 设置编辑器的内容，可修改编辑器当前的html内容
+         * @method setContent
+         * @warning 通过该方法插入的内容，是经过编辑器内置的过滤规则进行过滤后得到的内容
+         * @warning 该方法会触发selectionchange事件
+         * @param { String } html 要插入的html内容
+         * @param { Boolean } isAppendTo 若传入true，不清空原来的内容，在最后插入内容，否则，清空内容再插入
+         * @example
+         * ```javascript
+         * //假设设置前的编辑器内容是 <p>old text</p>
+         * editor.setContent('<p>new text</p>', true); //插入的结果是<p>old text</p><p>new text</p>
+         * ```
+         */
+    setContent: function(html, isAppendTo, notFireSelectionchange) {
+      var me = this;
+
+      me.fireEvent("beforesetcontent", html);
+      var root = UE.htmlparser(html);
+      me.filterInputRule(root);
+      html = root.toHtml();
+
+      me.body.innerHTML = (isAppendTo ? me.body.innerHTML : "") + html;
+
+      function isCdataDiv(node) {
+        return node.tagName == "DIV" && node.getAttribute("cdata_tag");
+      }
+      //给文本或者inline节点套p标签
+      if (me.options.enterTag == "p") {
+        var child = this.body.firstChild,
+          tmpNode;
+        if (
+          !child ||
+          (child.nodeType == 1 &&
+            (dtd.$cdata[child.tagName] ||
+              isCdataDiv(child) ||
+              domUtils.isCustomeNode(child)) &&
+            child === this.body.lastChild)
+        ) {
+          this.body.innerHTML =
+            "<p>" +
+            (browser.ie ? "&nbsp;" : "<br/>") +
+            "</p>" +
+            this.body.innerHTML;
+        } else {
+          var p = me.document.createElement("p");
+          while (child) {
+            while (
+              child &&
+              (child.nodeType == 3 ||
+                (child.nodeType == 1 &&
+                  dtd.p[child.tagName] &&
+                  !dtd.$cdata[child.tagName]))
+            ) {
+              tmpNode = child.nextSibling;
+              p.appendChild(child);
+              child = tmpNode;
+            }
+            if (p.firstChild) {
+              if (!child) {
+                me.body.appendChild(p);
+                break;
+              } else {
+                child.parentNode.insertBefore(p, child);
+                p = me.document.createElement("p");
+              }
+            }
+            child = child.nextSibling;
+          }
+        }
+      }
+      me.fireEvent("aftersetcontent");
+      me.fireEvent("contentchange");
+
+      !notFireSelectionchange && me._selectionChange();
+      //清除保存的选区
+      me._bakRange = me._bakIERange = me._bakNativeRange = null;
+      //trace:1742 setContent后gecko能得到焦点问题
+      var geckoSel;
+      if (browser.gecko && (geckoSel = this.selection.getNative())) {
+        geckoSel.removeAllRanges();
+      }
+      if (me.options.autoSyncData) {
+        me.form && setValue(me.form, me);
+      }
+    },
+
+    /**
+         * 让编辑器获得焦点，默认focus到编辑器头部
+         * @method focus
+         * @example
+         * ```javascript
+         * editor.focus()
+         * ```
+         */
+
+    /**
+         * 让编辑器获得焦点，toEnd确定focus位置
+         * @method focus
+         * @param { Boolean } toEnd 默认focus到编辑器头部，toEnd为true时focus到内容尾部
+         * @example
+         * ```javascript
+         * editor.focus(true)
+         * ```
+         */
+    focus: function(toEnd) {
+      try {
+        var me = this,
+          rng = me.selection.getRange();
+        if (toEnd) {
+          var node = me.body.lastChild;
+          if (node && node.nodeType == 1 && !dtd.$empty[node.tagName]) {
+            if (domUtils.isEmptyBlock(node)) {
+              rng.setStartAtFirst(node);
+            } else {
+              rng.setStartAtLast(node);
+            }
+            rng.collapse(true);
+          }
+          rng.setCursor(true);
+        } else {
+          if (
+            !rng.collapsed &&
+            domUtils.isBody(rng.startContainer) &&
+            rng.startOffset == 0
+          ) {
+            var node = me.body.firstChild;
+            if (node && node.nodeType == 1 && !dtd.$empty[node.tagName]) {
+              rng.setStartAtFirst(node).collapse(true);
+            }
+          }
+
+          rng.select(true);
+        }
+        this.fireEvent("focus selectionchange");
+      } catch (e) {}
+    },
+    isFocus: function() {
+      return this.selection.isFocus();
+    },
+    blur: function() {
+      var sel = this.selection.getNative();
+      if (sel.empty && browser.ie) {
+        var nativeRng = document.body.createTextRange();
+        nativeRng.moveToElementText(document.body);
+        nativeRng.collapse(true);
+        nativeRng.select();
+        sel.empty();
+      } else {
+        sel.removeAllRanges();
+      }
+
+      //this.fireEvent('blur selectionchange');
+    },
+    /**
+         * 初始化UE事件及部分事件代理
+         * @method _initEvents
+         * @private
+         */
+    _initEvents: function() {
+      var me = this,
+        doc = me.document,
+        win = me.window;
+      me._proxyDomEvent = utils.bind(me._proxyDomEvent, me);
+      domUtils.on(
+        doc,
+        [
+          "click",
+          "contextmenu",
+          "mousedown",
+          "keydown",
+          "keyup",
+          "keypress",
+          "mouseup",
+          "mouseover",
+          "mouseout",
+          "selectstart"
+        ],
+        me._proxyDomEvent
+      );
+      domUtils.on(win, ["focus", "blur"], me._proxyDomEvent);
+      domUtils.on(me.body, "drop", function(e) {
+        //阻止ff下默认的弹出新页面打开图片
+        if (browser.gecko && e.stopPropagation) {
+          e.stopPropagation();
+        }
+        me.fireEvent("contentchange");
+      });
+      domUtils.on(doc, ["mouseup", "keydown"], function(evt) {
+        //特殊键不触发selectionchange
+        if (
+          evt.type == "keydown" &&
+          (evt.ctrlKey || evt.metaKey || evt.shiftKey || evt.altKey)
+        ) {
+          return;
+        }
+        if (evt.button == 2) return;
+        me._selectionChange(250, evt);
+      });
+    },
+    /**
+         * 触发事件代理
+         * @method _proxyDomEvent
+         * @private
+         * @return { * } fireEvent的返回值
+         * @see UE.EventBase:fireEvent(String)
+         */
+    _proxyDomEvent: function(evt) {
+      if (
+        this.fireEvent("before" + evt.type.replace(/^on/, "").toLowerCase()) ===
+        false
+      ) {
+        return false;
+      }
+      if (this.fireEvent(evt.type.replace(/^on/, ""), evt) === false) {
+        return false;
+      }
+      return this.fireEvent(
+        "after" + evt.type.replace(/^on/, "").toLowerCase()
+      );
+    },
+    /**
+         * 变化选区
+         * @method _selectionChange
+         * @private
+         */
+    _selectionChange: function(delay, evt) {
+      var me = this;
+      //有光标才做selectionchange 为了解决未focus时点击source不能触发更改工具栏状态的问题（source命令notNeedUndo=1）
+      //            if ( !me.selection.isFocus() ){
+      //                return;
+      //            }
+
+      var hackForMouseUp = false;
+      var mouseX, mouseY;
+      if (browser.ie && browser.version < 9 && evt && evt.type == "mouseup") {
+        var range = this.selection.getRange();
+        if (!range.collapsed) {
+          hackForMouseUp = true;
+          mouseX = evt.clientX;
+          mouseY = evt.clientY;
+        }
+      }
+      clearTimeout(_selectionChangeTimer);
+      _selectionChangeTimer = setTimeout(function() {
+        if (!me.selection || !me.selection.getNative()) {
+          return;
+        }
+        //修复一个IE下的bug: 鼠标点击一段已选择的文本中间时，可能在mouseup后的一段时间内取到的range是在selection的type为None下的错误值.
+        //IE下如果用户是拖拽一段已选择文本，则不会触发mouseup事件，所以这里的特殊处理不会对其有影响
+        var ieRange;
+        if (hackForMouseUp && me.selection.getNative().type == "None") {
+          ieRange = me.document.body.createTextRange();
+          try {
+            ieRange.moveToPoint(mouseX, mouseY);
+          } catch (ex) {
+            ieRange = null;
+          }
+        }
+        var bakGetIERange;
+        if (ieRange) {
+          bakGetIERange = me.selection.getIERange;
+          me.selection.getIERange = function() {
+            return ieRange;
+          };
+        }
+        me.selection.cache();
+        if (bakGetIERange) {
+          me.selection.getIERange = bakGetIERange;
+        }
+        if (me.selection._cachedRange && me.selection._cachedStartElement) {
+          me.fireEvent("beforeselectionchange");
+          // 第二个参数causeByUi为true代表由用户交互造成的selectionchange.
+          me.fireEvent("selectionchange", !!evt);
+          me.fireEvent("afterselectionchange");
+          me.selection.clear();
+        }
+      }, delay || 50);
+    },
+
+    /**
+         * 执行编辑命令
+         * @method _callCmdFn
+         * @private
+         * @param { String } fnName 函数名称
+         * @param { * } args 传给命令函数的参数
+         * @return { * } 返回命令函数运行的返回值
+         */
+    _callCmdFn: function(fnName, args) {
+      var cmdName = args[0].toLowerCase(),
+        cmd,
+        cmdFn;
+      cmd = this.commands[cmdName] || UE.commands[cmdName];
+      cmdFn = cmd && cmd[fnName];
+      //没有querycommandstate或者没有command的都默认返回0
+      if ((!cmd || !cmdFn) && fnName == "queryCommandState") {
+        return 0;
+      } else if (cmdFn) {
+        return cmdFn.apply(this, args);
+      }
+    },
+
+    /**
+         * 执行编辑命令cmdName，完成富文本编辑效果
+         * @method execCommand
+         * @param { String } cmdName 需要执行的命令
+         * @remind 具体命令的使用请参考<a href="#COMMAND.LIST">命令列表</a>
+         * @return { * } 返回命令函数运行的返回值
+         * @example
+         * ```javascript
+         * editor.execCommand(cmdName);
+         * ```
+         */
+    execCommand: function(cmdName) {
+      cmdName = cmdName.toLowerCase();
+      var me = this,
+        result,
+        cmd = me.commands[cmdName] || UE.commands[cmdName];
+      if (!cmd || !cmd.execCommand) {
+        return null;
+      }
+      if (!cmd.notNeedUndo && !me.__hasEnterExecCommand) {
+        me.__hasEnterExecCommand = true;
+        if (me.queryCommandState.apply(me, arguments) != -1) {
+          me.fireEvent("saveScene");
+          me.fireEvent.apply(
+            me,
+            ["beforeexeccommand", cmdName].concat(arguments)
+          );
+          result = this._callCmdFn("execCommand", arguments);
+          //保存场景时，做了内容对比，再看是否进行contentchange触发，这里多触发了一次，去掉
+          //                    (!cmd.ignoreContentChange && !me._ignoreContentChange) && me.fireEvent('contentchange');
+          me.fireEvent.apply(
+            me,
+            ["afterexeccommand", cmdName].concat(arguments)
+          );
+          me.fireEvent("saveScene");
+        }
+        me.__hasEnterExecCommand = false;
+      } else {
+        result = this._callCmdFn("execCommand", arguments);
+        !me.__hasEnterExecCommand &&
+          !cmd.ignoreContentChange &&
+          !me._ignoreContentChange &&
+          me.fireEvent("contentchange");
+      }
+      !me.__hasEnterExecCommand &&
+        !cmd.ignoreContentChange &&
+        !me._ignoreContentChange &&
+        me._selectionChange();
+      return result;
+    },
+
+    /**
+         * 根据传入的command命令，查选编辑器当前的选区，返回命令的状态
+         * @method  queryCommandState
+         * @param { String } cmdName 需要查询的命令名称
+         * @remind 具体命令的使用请参考<a href="#COMMAND.LIST">命令列表</a>
+         * @return { Number } number 返回放前命令的状态，返回值三种情况：(-1|0|1)
+         * @example
+         * ```javascript
+         * editor.queryCommandState(cmdName)  => (-1|0|1)
+         * ```
+         * @see COMMAND.LIST
+         */
+    queryCommandState: function(cmdName) {
+      return this._callCmdFn("queryCommandState", arguments);
+    },
+
+    /**
+         * 根据传入的command命令，查选编辑器当前的选区，根据命令返回相关的值
+         * @method queryCommandValue
+         * @param { String } cmdName 需要查询的命令名称
+         * @remind 具体命令的使用请参考<a href="#COMMAND.LIST">命令列表</a>
+         * @remind 只有部分插件有此方法
+         * @return { * } 返回每个命令特定的当前状态值
+         * @grammar editor.queryCommandValue(cmdName)  =>  {*}
+         * @see COMMAND.LIST
+         */
+    queryCommandValue: function(cmdName) {
+      return this._callCmdFn("queryCommandValue", arguments);
+    },
+
+    /**
+         * 检查编辑区域中是否有内容
+         * @method  hasContents
+         * @remind 默认有文本内容，或者有以下节点都不认为是空
+         * table,ul,ol,dl,iframe,area,base,col,hr,img,embed,input,link,meta,param
+         * @return { Boolean } 检查有内容返回true，否则返回false
+         * @example
+         * ```javascript
+         * editor.hasContents()
+         * ```
+         */
+
+    /**
+         * 检查编辑区域中是否有内容，若包含参数tags中的节点类型，直接返回true
+         * @method  hasContents
+         * @param { Array } tags 传入数组判断时用到的节点类型
+         * @return { Boolean } 若文档中包含tags数组里对应的tag，返回true，否则返回false
+         * @example
+         * ```javascript
+         * editor.hasContents(['span']);
+         * ```
+         */
+    hasContents: function(tags) {
+      if (tags) {
+        for (var i = 0, ci; (ci = tags[i++]); ) {
+          if (this.document.getElementsByTagName(ci).length > 0) {
+            return true;
+          }
+        }
+      }
+      if (!domUtils.isEmptyBlock(this.body)) {
+        return true;
+      }
+      // 随时添加,定义的特殊标签如果存在，不能认为是空
+      tags = ["div"];
+      for (i = 0; (ci = tags[i++]); ) {
+        var nodes = domUtils.getElementsByTagName(this.document, ci);
+        for (var n = 0, cn; (cn = nodes[n++]); ) {
+          if (domUtils.isCustomeNode(cn)) {
+            return true;
+          }
+        }
+      }
+      // 部分如媒体标签，不能认为为空
+      tags = [ "video","iframe" ]
+      for (i = 0; (ci = tags[i++]); ) {
+        var nodes = domUtils.getElementsByTagName(this.document, ci);
+        for (var n = 0, cn; (cn = nodes[n++]); ) {
+          return true;
+        }
+      }
+      return false;
+    },
+
+    /**
+         * 重置编辑器，可用来做多个tab使用同一个编辑器实例
+         * @method  reset
+         * @remind 此方法会清空编辑器内容，清空回退列表，会触发reset事件
+         * @example
+         * ```javascript
+         * editor.reset()
+         * ```
+         */
+    reset: function() {
+      this.fireEvent("reset");
+    },
+
+    /**
+         * 设置当前编辑区域可以编辑
+         * @method setEnabled
+         * @example
+         * ```javascript
+         * editor.setEnabled()
+         * ```
+         */
+    setEnabled: function() {
+      var me = this,
+        range;
+      if (me.body.contentEditable == "false") {
+        me.body.contentEditable = true;
+        range = me.selection.getRange();
+        //有可能内容丢失了
+        try {
+          range.moveToBookmark(me.lastBk);
+          delete me.lastBk;
+        } catch (e) {
+          range.setStartAtFirst(me.body).collapse(true);
+        }
+        range.select(true);
+        if (me.bkqueryCommandState) {
+          me.queryCommandState = me.bkqueryCommandState;
+          delete me.bkqueryCommandState;
+        }
+        if (me.bkqueryCommandValue) {
+          me.queryCommandValue = me.bkqueryCommandValue;
+          delete me.bkqueryCommandValue;
+        }
+        me.fireEvent("selectionchange");
+      }
+    },
+    enable: function() {
+      return this.setEnabled();
+    },
+
+    /** 设置当前编辑区域不可编辑
+         * @method setDisabled
+         */
+
+    /** 设置当前编辑区域不可编辑,except中的命令除外
+         * @method setDisabled
+         * @param { String } except 例外命令的字符串
+         * @remind 即使设置了disable，此处配置的例外命令仍然可以执行
+         * @example
+         * ```javascript
+         * editor.setDisabled('bold'); //禁用工具栏中除加粗之外的所有功能
+         * ```
+         */
+
+    /** 设置当前编辑区域不可编辑,except中的命令除外
+         * @method setDisabled
+         * @param { Array } except 例外命令的字符串数组，数组中的命令仍然可以执行
+         * @remind 即使设置了disable，此处配置的例外命令仍然可以执行
+         * @example
+         * ```javascript
+         * editor.setDisabled(['bold','insertimage']); //禁用工具栏中除加粗和插入图片之外的所有功能
+         * ```
+         */
+    setDisabled: function(except) {
+      var me = this;
+      except = except ? (utils.isArray(except) ? except : [except]) : [];
+      if (me.body.contentEditable == "true") {
+        if (!me.lastBk) {
+          me.lastBk = me.selection.getRange().createBookmark(true);
+        }
+        me.body.contentEditable = false;
+        me.bkqueryCommandState = me.queryCommandState;
+        me.bkqueryCommandValue = me.queryCommandValue;
+        me.queryCommandState = function(type) {
+          if (utils.indexOf(except, type) != -1) {
+            return me.bkqueryCommandState.apply(me, arguments);
+          }
+          return -1;
+        };
+        me.queryCommandValue = function(type) {
+          if (utils.indexOf(except, type) != -1) {
+            return me.bkqueryCommandValue.apply(me, arguments);
+          }
+          return null;
+        };
+        me.fireEvent("selectionchange");
+      }
+    },
+    disable: function(except) {
+      return this.setDisabled(except);
+    },
+
+    /**
+         * 设置默认内容
+         * @method _setDefaultContent
+         * @private
+         * @param  { String } cont 要存入的内容
+         */
+    _setDefaultContent: (function() {
+      function clear() {
+        var me = this;
+        if (me.document.getElementById("initContent")) {
+          me.body.innerHTML = "<p>" + (ie ? "" : "<br/>") + "</p>";
+          me.removeListener("firstBeforeExecCommand focus", clear);
+          setTimeout(function() {
+            me.focus();
+            me._selectionChange();
+          }, 0);
+        }
+      }
+
+      return function(cont) {
+        var me = this;
+        me.body.innerHTML = '<p id="initContent">' + cont + "</p>";
+
+        me.addListener("firstBeforeExecCommand focus", clear);
+      };
+    })(),
+
+    /**
+         * 显示编辑器
+         * @method setShow
+         * @example
+         * ```javascript
+         * editor.setShow()
+         * ```
+         */
+    setShow: function() {
+      var me = this,
+        range = me.selection.getRange();
+      if (me.container.style.display == "none") {
+        //有可能内容丢失了
+        try {
+          range.moveToBookmark(me.lastBk);
+          delete me.lastBk;
+        } catch (e) {
+          range.setStartAtFirst(me.body).collapse(true);
+        }
+        //ie下focus实效，所以做了个延迟
+        setTimeout(function() {
+          range.select(true);
+        }, 100);
+        me.container.style.display = "";
+      }
+    },
+    show: function() {
+      return this.setShow();
+    },
+    /**
+         * 隐藏编辑器
+         * @method setHide
+         * @example
+         * ```javascript
+         * editor.setHide()
+         * ```
+         */
+    setHide: function() {
+      var me = this;
+      if (!me.lastBk) {
+        me.lastBk = me.selection.getRange().createBookmark(true);
+      }
+      me.container.style.display = "none";
+    },
+    hide: function() {
+      return this.setHide();
+    },
+
+    /**
+         * 根据指定的路径，获取对应的语言资源
+         * @method getLang
+         * @param { String } path 路径根据的是lang目录下的语言文件的路径结构
+         * @return { Object | String } 根据路径返回语言资源的Json格式对象或者语言字符串
+         * @example
+         * ```javascript
+         * editor.getLang('contextMenu.delete'); //如果当前是中文，那返回是的是'删除'
+         * ```
+         */
+    getLang: function(path) {
+      var lang = UE.I18N[this.options.lang];
+      if (!lang) {
+        throw Error("not import language file");
+      }
+      path = (path || "").split(".");
+      for (var i = 0, ci; (ci = path[i++]); ) {
+        lang = lang[ci];
+        if (!lang) break;
+      }
+      return lang;
+    },
+
+    /**
+         * 计算编辑器html内容字符串的长度
+         * @method  getContentLength
+         * @return { Number } 返回计算的长度
+         * @example
+         * ```javascript
+         * //编辑器html内容<p><strong>132</strong></p>
+         * editor.getContentLength() //返回27
+         * ```
+         */
+    /**
+         * 计算编辑器当前纯文本内容的长度
+         * @method  getContentLength
+         * @param { Boolean } ingoneHtml 传入true时，只按照纯文本来计算
+         * @return { Number } 返回计算的长度，内容中有hr/img/iframe标签，长度加1
+         * @example
+         * ```javascript
+         * //编辑器html内容<p><strong>132</strong></p>
+         * editor.getContentLength() //返回3
+         * ```
+         */
+    getContentLength: function(ingoneHtml, tagNames) {
+      var count = this.getContent(false, false, true).length;
+      if (ingoneHtml) {
+        tagNames = (tagNames || []).concat(["hr", "img", "iframe"]);
+        count = this.getContentTxt().replace(/[\t\r\n]+/g, "").length;
+        for (var i = 0, ci; (ci = tagNames[i++]); ) {
+          count += this.document.getElementsByTagName(ci).length;
+        }
+      }
+      return count;
+    },
+
+    /**
+         * 注册输入过滤规则
+         * @method  addInputRule
+         * @param { Function } rule 要添加的过滤规则
+         * @example
+         * ```javascript
+         * editor.addInputRule(function(root){
+         *   $.each(root.getNodesByTagName('div'),function(i,node){
+         *       node.tagName="p";
+         *   });
+         * });
+         * ```
+         */
+    addInputRule: function(rule) {
+      this.inputRules.push(rule);
+    },
+
+    /**
+         * 执行注册的过滤规则
+         * @method  filterInputRule
+         * @param { UE.uNode } root 要过滤的uNode节点
+         * @remind 执行editor.setContent方法和执行'inserthtml'命令后，会运行该过滤函数
+         * @example
+         * ```javascript
+         * editor.filterInputRule(editor.body);
+         * ```
+         * @see UE.Editor:addInputRule
+         */
+    filterInputRule: function(root) {
+      for (var i = 0, ci; (ci = this.inputRules[i++]); ) {
+        ci.call(this, root);
+      }
+    },
+
+    /**
+         * 注册输出过滤规则
+         * @method  addOutputRule
+         * @param { Function } rule 要添加的过滤规则
+         * @example
+         * ```javascript
+         * editor.addOutputRule(function(root){
+         *   $.each(root.getNodesByTagName('p'),function(i,node){
+         *       node.tagName="div";
+         *   });
+         * });
+         * ```
+         */
+    addOutputRule: function(rule) {
+      this.outputRules.push(rule);
+    },
+
+    /**
+         * 根据输出过滤规则，过滤编辑器内容
+         * @method  filterOutputRule
+         * @remind 执行editor.getContent方法的时候，会先运行该过滤函数
+         * @param { UE.uNode } root 要过滤的uNode节点
+         * @example
+         * ```javascript
+         * editor.filterOutputRule(editor.body);
+         * ```
+         * @see UE.Editor:addOutputRule
+         */
+    filterOutputRule: function(root) {
+      for (var i = 0, ci; (ci = this.outputRules[i++]); ) {
+        ci.call(this, root);
+      }
+    },
+
+    /**
+         * 根据action名称获取请求的路径
+         * @method  getActionUrl
+         * @remind 假如没有设置serverUrl,会根据imageUrl设置默认的controller路径
+         * @param { String } action action名称
+         * @example
+         * ```javascript
+         * editor.getActionUrl('config'); //返回 "/ueditor/php/controller.php?action=config"
+         * editor.getActionUrl('image'); //返回 "/ueditor/php/controller.php?action=uplaodimage"
+         * editor.getActionUrl('scrawl'); //返回 "/ueditor/php/controller.php?action=uplaodscrawl"
+         * editor.getActionUrl('imageManager'); //返回 "/ueditor/php/controller.php?action=listimage"
+         * ```
+         */
+    getActionUrl: function(action) {
+      var actionName = this.getOpt(action) || action,
+        imageUrl = this.getOpt("imageUrl"),
+        serverUrl = this.getOpt("serverUrl");
+
+      if (!serverUrl && imageUrl) {
+        serverUrl = imageUrl.replace(/^(.*[\/]).+([\.].+)$/, "$1controller$2");
+      }
+
+      if (serverUrl) {
+        serverUrl =
+          serverUrl +
+          (serverUrl.indexOf("?") == -1 ? "?" : "&") +
+          "action=" +
+          (actionName || "");
+        return utils.formatUrl(serverUrl);
+      } else {
+        return "";
+      }
+    }
+  };
+  utils.inherits(Editor, EventBase);
+})();
+
+
+// core/Editor.defaultoptions.js
+//维护编辑器一下默认的不在插件中的配置项
+UE.Editor.defaultOptions = function(editor) {
+  var _url = editor.options.UEDITOR_HOME_URL;
+  return {
+    isShow: true,
+    initialContent: "",
+    initialStyle: "",
+    autoClearinitialContent: false,
+    iframeCssUrl: _url + "themes/iframe.css?20220503",
+      iframeCssUrlsAddition: [],
+    textarea: "editorValue",
+    focus: false,
+    focusInEnd: true,
+    autoClearEmptyNode: true,
+    fullscreen: false,
+    readonly: false,
+    zIndex: 999,
+    imagePopup: true,
+    enterTag: "p",
+    customDomain: false,
+    lang: "zh-cn",
+    langPath: _url + "lang/",
+    theme: "default",
+    themePath: _url + "themes/",
+    allHtmlEnabled: false,
+    scaleEnabled: false,
+    tableNativeEditInFF: false,
+    autoSyncData: true,
+    fileNameFormat: "{time}{rand:6}"
+  };
+};
+
+
+// core/loadconfig.js
+(function() {
+  UE.Editor.prototype.loadServerConfig = function() {
+    var me = this;
+    setTimeout(function() {
+      try {
+        me.options.imageUrl &&
+          me.setOpt(
+            "serverUrl",
+            me.options.imageUrl.replace(
+              /^(.*[\/]).+([\.].+)$/,
+              "$1controller$2"
+            )
+          );
+
+        var configUrl = me.getActionUrl("config"),
+          isJsonp = utils.isCrossDomainUrl(configUrl);
+
+        /* 发出ajax请求 */
+        me._serverConfigLoaded = false;
+
+        configUrl &&
+          UE.ajax.request(configUrl, {
+            method: "GET",
+            dataType: isJsonp ? "jsonp" : "",
+            onsuccess: function(r) {
+              try {
+                var config = isJsonp ? r : eval("(" + r.responseText + ")");
+                utils.extend(me.options, config);
+                // console.log('me.options.before',me.options);
+                // console.log('server.config',config);
+                // console.log('me.options.after',me.options);
+                me.fireEvent("serverConfigLoaded");
+                me._serverConfigLoaded = true;
+              } catch (e) {
+                showErrorMsg(me.getLang("loadconfigFormatError"));
+              }
+            },
+            onerror: function() {
+              showErrorMsg(me.getLang("loadconfigHttpError"));
+            }
+          });
+      } catch (e) {
+        showErrorMsg(me.getLang("loadconfigError"));
+      }
+    });
+
+    function showErrorMsg(msg) {
+      console && console.error(msg);
+      //me.fireEvent('showMessage', {
+      //    'title': msg,
+      //    'type': 'error'
+      //});
+    }
+  };
+
+  UE.Editor.prototype.isServerConfigLoaded = function() {
+    var me = this;
+    return me._serverConfigLoaded || false;
+  };
+
+  UE.Editor.prototype.afterConfigReady = function(handler) {
+    if (!handler || !utils.isFunction(handler)) return;
+    var me = this;
+    var readyHandler = function() {
+      handler.apply(me, arguments);
+      me.removeListener("serverConfigLoaded", readyHandler);
+    };
+
+    if (me.isServerConfigLoaded()) {
+      handler.call(me, "serverConfigLoaded");
+    } else {
+      me.addListener("serverConfigLoaded", readyHandler);
+    }
+  };
+})();
+
+
+// core/ajax.js
+/**
+ * @file
+ * @module UE.ajax
+ * @since 1.2.6.1
+ */
+
+/**
+ * 提供对ajax请求的支持
+ * @module UE.ajax
+ */
+UE.ajax = (function() {
+  //创建一个ajaxRequest对象
+  var fnStr = "XMLHttpRequest()";
+  try {
+    new ActiveXObject("Msxml2.XMLHTTP");
+    fnStr = "ActiveXObject('Msxml2.XMLHTTP')";
+  } catch (e) {
+    try {
+      new ActiveXObject("Microsoft.XMLHTTP");
+      fnStr = "ActiveXObject('Microsoft.XMLHTTP')";
+    } catch (e) {}
+  }
+  var creatAjaxRequest = new Function("return new " + fnStr);
+
+  /**
+     * 将json参数转化成适合ajax提交的参数列表
+     * @param json
+     */
+  function json2str(json) {
+    var strArr = [];
+    for (var i in json) {
+      //忽略默认的几个参数
+      if (
+        i == "method" ||
+        i == "timeout" ||
+        i == "async" ||
+        i == "dataType" ||
+        i == "callback"
+      )
+        continue;
+      //忽略控制
+      if (json[i] == undefined || json[i] == null) continue;
+      //传递过来的对象和函数不在提交之列
+      if (
+        !(
+          (typeof json[i]).toLowerCase() == "function" ||
+          (typeof json[i]).toLowerCase() == "object"
+        )
+      ) {
+        strArr.push(encodeURIComponent(i) + "=" + encodeURIComponent(json[i]));
+      } else if (utils.isArray(json[i])) {
+        //支持传数组内容
+        for (var j = 0; j < json[i].length; j++) {
+          strArr.push(
+            encodeURIComponent(i) + "[]=" + encodeURIComponent(json[i][j])
+          );
+        }
+      }
+    }
+    return strArr.join("&");
+  }
+
+  function doAjax(url, ajaxOptions) {
+    var xhr = creatAjaxRequest(),
+      //是否超时
+      timeIsOut = false,
+      //默认参数
+      defaultAjaxOptions = {
+        method: "POST",
+        timeout: 5000,
+        async: true,
+        data: {}, //需要传递对象的话只能覆盖
+        onsuccess: function() {},
+        onerror: function() {}
+      };
+
+    if (typeof url === "object") {
+      ajaxOptions = url;
+      url = ajaxOptions.url;
+    }
+    if (!xhr || !url) return;
+    var ajaxOpts = ajaxOptions
+      ? utils.extend(defaultAjaxOptions, ajaxOptions)
+      : defaultAjaxOptions;
+
+    var submitStr = json2str(ajaxOpts); // { name:"Jim",city:"Beijing" } --> "name=Jim&city=Beijing"
+    //如果用户直接通过data参数传递json对象过来，则也要将此json对象转化为字符串
+    if (!utils.isEmptyObject(ajaxOpts.data)) {
+      submitStr += (submitStr ? "&" : "") + json2str(ajaxOpts.data);
+    }
+    //超时检测
+    var timerID = setTimeout(function() {
+      if (xhr.readyState != 4) {
+        timeIsOut = true;
+        xhr.abort();
+        clearTimeout(timerID);
+      }
+    }, ajaxOpts.timeout);
+
+    var method = ajaxOpts.method.toUpperCase();
+    var str =
+      url +
+      (url.indexOf("?") == -1 ? "?" : "&") +
+      (method == "POST" ? "" : submitStr + "&noCache=" + +new Date());
+    xhr.open(method, str, ajaxOpts.async);
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState == 4) {
+        if (!timeIsOut && xhr.status == 200) {
+          ajaxOpts.onsuccess(xhr);
+        } else {
+          ajaxOpts.onerror(xhr);
+        }
+      }
+    };
+    if (method == "POST") {
+      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+      xhr.send(submitStr);
+    } else {
+      xhr.send(null);
+    }
+  }
+
+  function doJsonp(url, opts) {
+    var successhandler = opts.onsuccess || function() {},
+      scr = document.createElement("SCRIPT"),
+      options = opts || {},
+      charset = options["charset"],
+      callbackField = options["jsonp"] || "callback",
+      callbackFnName,
+      timeOut = options["timeOut"] || 0,
+      timer,
+      reg = new RegExp("(\\?|&)" + callbackField + "=([^&]*)"),
+      matches;
+
+    if (utils.isFunction(successhandler)) {
+      callbackFnName =
+        "bd__editor__" + Math.floor(Math.random() * 2147483648).toString(36);
+      window[callbackFnName] = getCallBack(0);
+    } else if (utils.isString(successhandler)) {
+      callbackFnName = successhandler;
+    } else {
+      if ((matches = reg.exec(url))) {
+        callbackFnName = matches[2];
+      }
+    }
+
+    url = url.replace(reg, "\x241" + callbackField + "=" + callbackFnName);
+
+    if (url.search(reg) < 0) {
+      url +=
+        (url.indexOf("?") < 0 ? "?" : "&") +
+        callbackField +
+        "=" +
+        callbackFnName;
+    }
+
+    var queryStr = json2str(opts); // { name:"Jim",city:"Beijing" } --> "name=Jim&city=Beijing"
+    //如果用户直接通过data参数传递json对象过来，则也要将此json对象转化为字符串
+    if (!utils.isEmptyObject(opts.data)) {
+      queryStr += (queryStr ? "&" : "") + json2str(opts.data);
+    }
+    if (queryStr) {
+      url = url.replace(/\?/, "?" + queryStr + "&");
+    }
+
+    scr.onerror = getCallBack(1);
+    if (timeOut) {
+      timer = setTimeout(getCallBack(1), timeOut);
+    }
+    createScriptTag(scr, url, charset);
+
+    function createScriptTag(scr, url, charset) {
+      scr.setAttribute("type", "text/javascript");
+      scr.setAttribute("defer", "defer");
+      charset && scr.setAttribute("charset", charset);
+      scr.setAttribute("src", url);
+      document.getElementsByTagName("head")[0].appendChild(scr);
+    }
+
+    function getCallBack(onTimeOut) {
+      return function() {
+        try {
+          if (onTimeOut) {
+            options.onerror && options.onerror();
+          } else {
+            try {
+              clearTimeout(timer);
+              successhandler.apply(window, arguments);
+            } catch (e) {}
+          }
+        } catch (exception) {
+          options.onerror && options.onerror.call(window, exception);
+        } finally {
+          options.oncomplete && options.oncomplete.apply(window, arguments);
+          scr.parentNode && scr.parentNode.removeChild(scr);
+          window[callbackFnName] = null;
+          try {
+            delete window[callbackFnName];
+          } catch (e) {}
+        }
+      };
+    }
+  }
+
+  return {
+    /**
+         * 根据给定的参数项，向指定的url发起一个ajax请求。 ajax请求完成后，会根据请求结果调用相应回调： 如果请求
+         * 成功， 则调用onsuccess回调， 失败则调用 onerror 回调
+         * @method request
+         * @param { URLString } url ajax请求的url地址
+         * @param { Object } ajaxOptions ajax请求选项的键值对，支持的选项如下：
+         * @example
+         * ```javascript
+         * //向sayhello.php发起一个异步的Ajax GET请求, 请求超时时间为10s， 请求完成后执行相应的回调。
+         * UE.ajax.requeset( 'sayhello.php', {
+         *
+         *     //请求方法。可选值： 'GET', 'POST'，默认值是'POST'
+         *     method: 'GET',
+         *
+         *     //超时时间。 默认为5000， 单位是ms
+         *     timeout: 10000,
+         *
+         *     //是否是异步请求。 true为异步请求， false为同步请求
+         *     async: true,
+         *
+         *     //请求携带的数据。如果请求为GET请求， data会经过stringify后附加到请求url之后。
+         *     data: {
+         *         name: 'ueditor'
+         *     },
+         *
+         *     //请求成功后的回调， 该回调接受当前的XMLHttpRequest对象作为参数。
+         *     onsuccess: function ( xhr ) {
+         *         console.log( xhr.responseText );
+         *     },
+         *
+         *     //请求失败或者超时后的回调。
+         *     onerror: function ( xhr ) {
+         *          alert( 'Ajax请求失败' );
+         *     }
+         *
+         * } );
+         * ```
+         */
+
+    /**
+         * 根据给定的参数项发起一个ajax请求， 参数项里必须包含一个url地址。 ajax请求完成后，会根据请求结果调用相应回调： 如果请求
+         * 成功， 则调用onsuccess回调， 失败则调用 onerror 回调。
+         * @method request
+         * @warning 如果在参数项里未提供一个key为“url”的地址值，则该请求将直接退出。
+         * @param { Object } ajaxOptions ajax请求选项的键值对，支持的选项如下：
+         * @example
+         * ```javascript
+         *
+         * //向sayhello.php发起一个异步的Ajax POST请求, 请求超时时间为5s， 请求完成后不执行任何回调。
+         * UE.ajax.requeset( 'sayhello.php', {
+         *
+         *     //请求的地址， 该项是必须的。
+         *     url: 'sayhello.php'
+         *
+         * } );
+         * ```
+         */
+    request: function(url, opts) {
+      if (opts && opts.dataType == "jsonp") {
+        doJsonp(url, opts);
+      } else {
+        doAjax(url, opts);
+      }
+    },
+    getJSONP: function(url, data, fn) {
+      var opts = {
+        data: data,
+        oncomplete: fn
+      };
+      doJsonp(url, opts);
+    }
+  };
+})();
+
+
+// core/filterword.js
+/**
+ * UE过滤word的静态方法
+ * @file
+ */
+
+/**
+ * UEditor公用空间，UEditor所有的功能都挂载在该空间下
+ * @module UE
+ */
+
+/**
+ * 根据传入html字符串过滤word
+ * @module UE
+ * @since 1.2.6.1
+ * @method filterWord
+ * @param { String } html html字符串
+ * @return { String } 已过滤后的结果字符串
+ * @example
+ * ```javascript
+ * UE.filterWord(html);
+ * ```
+ */
+var filterWord = (UE.filterWord = (function() {
+  //是否是word过来的内容
+  function isWordDocument(str) {
+    return /(class="?Mso|style="[^"]*\bmso\-|w:WordDocument|<(v|o):|lang=)/gi.test(
+      str
+    );
+  }
+  //去掉小数
+  function transUnit(v) {
+    v = v.replace(/[\d.]+\w+/g, function(m) {
+      return utils.transUnitToPx(m);
+    });
+    return v;
+  }
+
+  function filterPasteWord(str) {
+    return (
+      str
+        .replace(/[\t\r\n]+/g, " ")
+        .replace(/<!--[\s\S]*?-->/gi, "")
+        //转换图片
+        .replace(/<v:shape [^>]*>[\s\S]*?.<\/v:shape>/gi, function(str) {
+          //opera能自己解析出image所这里直接返回空
+          if (browser.opera) {
+            return "";
+          }
+          try {
+            //有可能是bitmap占为图，无用，直接过滤掉，主要体现在粘贴excel表格中
+            if (/Bitmap/i.test(str)) {
+              return "";
+            }
+            var width = str.match(/width:([ \d.]*p[tx])/i)[1],
+              height = str.match(/height:([ \d.]*p[tx])/i)[1],
+              src = str.match(/src=\s*"([^"]*)"/i)[1];
+            return (
+              '<img width="' +
+              transUnit(width) +
+              '" height="' +
+              transUnit(height) +
+              '" src="' +
+              src +
+              '" />'
+            );
+          } catch (e) {
+            return "";
+          }
+        })
+        //针对wps添加的多余标签处理
+        .replace(/<\/?div[^>]*>/g, "")
+        //去掉多余的属性
+        .replace(/v:\w+=(["']?)[^'"]+\1/g, "")
+        .replace(
+          /<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|xml|meta|link|style|\w+:\w+)(?=[\s\/>]))[^>]*>/gi,
+          ""
+        )
+        .replace(
+          /<p [^>]*class="?MsoHeading"?[^>]*>(.*?)<\/p>/gi,
+          "<p><strong>$1</strong></p>"
+        )
+        //去掉多余的属性
+        .replace(/\s+(class|lang|align)\s*=\s*(['"]?)([\w-]+)\2/gi, function(
+          str,
+          name,
+          marks,
+          val
+        ) {
+          //保留list的标示
+          return name == "class" && val == "MsoListParagraph" ? str : "";
+        })
+        //清除多余的font/span不能匹配&nbsp;有可能是空格
+        .replace(/<(font|span)[^>]*>(\s*)<\/\1>/gi, function(a, b, c) {
+          return c.replace(/[\t\r\n ]+/g, " ");
+        })
+        //处理style的问题
+        .replace(/(<[a-z][^>]*)\sstyle=(["'])([^\2]*?)\2/gi, function(
+          str,
+          tag,
+          tmp,
+          style
+        ) {
+          var n = [],
+            s = style
+              .replace(/^\s+|\s+$/, "")
+              .replace(/&#39;/g, "'")
+              .replace(/&quot;/gi, "'")
+              .replace(/[\d.]+(cm|pt)/g, function(str) {
+                return utils.transUnitToPx(str);
+              })
+              .split(/;\s*/g);
+
+          for (var i = 0, v; (v = s[i]); i++) {
+            var name,
+              value,
+              parts = v.split(":");
+
+            if (parts.length == 2) {
+              name = parts[0].toLowerCase();
+              value = parts[1].toLowerCase();
+              if (
+                (/^(background)\w*/.test(name) &&
+                  value.replace(/(initial|\s)/g, "").length == 0) ||
+                (/^(margin)\w*/.test(name) && /^0\w+$/.test(value))
+              ) {
+                continue;
+              }
+
+              switch (name) {
+                case "mso-padding-alt":
+                case "mso-padding-top-alt":
+                case "mso-padding-right-alt":
+                case "mso-padding-bottom-alt":
+                case "mso-padding-left-alt":
+                case "mso-margin-alt":
+                case "mso-margin-top-alt":
+                case "mso-margin-right-alt":
+                case "mso-margin-bottom-alt":
+                case "mso-margin-left-alt":
+                //ie下会出现挤到一起的情况
+                //case "mso-table-layout-alt":
+                case "mso-height":
+                case "mso-width":
+                case "mso-vertical-align-alt":
+                  //trace:1819 ff下会解析出padding在table上
+                  if (!/<table/.test(tag))
+                    n[i] =
+                      name.replace(/^mso-|-alt$/g, "") + ":" + transUnit(value);
+                  continue;
+                case "horiz-align":
+                  n[i] = "text-align:" + value;
+                  continue;
+
+                case "vert-align":
+                  n[i] = "vertical-align:" + value;
+                  continue;
+
+                case "font-color":
+                case "mso-foreground":
+                  n[i] = "color:" + value;
+                  continue;
+
+                case "mso-background":
+                case "mso-highlight":
+                  n[i] = "background:" + value;
+                  continue;
+
+                case "mso-default-height":
+                  n[i] = "min-height:" + transUnit(value);
+                  continue;
+
+                case "mso-default-width":
+                  n[i] = "min-width:" + transUnit(value);
+                  continue;
+
+                case "mso-padding-between-alt":
+                  n[i] =
+                    "border-collapse:separate;border-spacing:" +
+                    transUnit(value);
+                  continue;
+
+                case "text-line-through":
+                  if (value == "single" || value == "double") {
+                    n[i] = "text-decoration:line-through";
+                  }
+                  continue;
+                case "mso-zero-height":
+                  if (value == "yes") {
+                    n[i] = "display:none";
+                  }
+                  continue;
+                //                                case 'background':
+                //                                    break;
+                case "margin":
+                  if (!/[1-9]/.test(value)) {
+                    continue;
+                  }
+              }
+
+              if (
+                /^(mso|column|font-emph|lang|layout|line-break|list-image|nav|panose|punct|row|ruby|sep|size|src|tab-|table-border|text-(?:decor|trans)|top-bar|version|vnd|word-break)/.test(
+                  name
+                ) ||
+                (/text\-indent|padding|margin/.test(name) &&
+                  /\-[\d.]+/.test(value))
+              ) {
+                continue;
+              }
+
+              n[i] = name + ":" + parts[1];
+            }
+          }
+          return (
+            tag +
+            (n.length
+              ? ' style="' + n.join(";").replace(/;{2,}/g, ";") + '"'
+              : "")
+          );
+        })
+    );
+  }
+
+  return function(html) {
+    return isWordDocument(html) ? filterPasteWord(html) : html;
+  };
+})());
+
+
+// core/node.js
+/**
+ * 编辑器模拟的节点类
+ * @file
+ * @module UE
+ * @class uNode
+ * @since 1.2.6.1
+ */
+
+/**
+ * UEditor公用空间，UEditor所有的功能都挂载在该空间下
+ * @unfile
+ * @module UE
+ */
+
+(function() {
+  /**
+     * 编辑器模拟的节点类
+     * @unfile
+     * @module UE
+     * @class uNode
+     */
+
+  /**
+     * 通过一个键值对，创建一个uNode对象
+     * @constructor
+     * @param { Object } attr 传入要创建的uNode的初始属性
+     * @example
+     * ```javascript
+     * var node = new uNode({
+     *     type:'element',
+     *     tagName:'span',
+     *     attrs:{style:'font-size:14px;'}
+     * })
+     * ```
+     */
+  var uNode = (UE.uNode = function(obj) {
+    this.type = obj.type;
+    this.data = obj.data;
+    this.tagName = obj.tagName;
+    this.parentNode = obj.parentNode;
+    this.attrs = obj.attrs || {};
+    this.children = obj.children;
+  });
+
+  var notTransAttrs = {
+    href: 1,
+    src: 1,
+    _src: 1,
+    _href: 1,
+    cdata_data: 1
+  };
+
+  var notTransTagName = {
+    style: 1,
+    script: 1
+  };
+
+  var indentChar = "    ",
+    breakChar = "\n";
+
+  function insertLine(arr, current, begin) {
+    arr.push(breakChar);
+    return current + (begin ? 1 : -1);
+  }
+
+  function insertIndent(arr, current) {
+    //插入缩进
+    for (var i = 0; i < current; i++) {
+      arr.push(indentChar);
+    }
+  }
+
+  //创建uNode的静态方法
+  //支持标签和html
+  uNode.createElement = function(html) {
+    if (/[<>]/.test(html)) {
+      return UE.htmlparser(html).children[0];
+    } else {
+      return new uNode({
+        type: "element",
+        children: [],
+        tagName: html
+      });
+    }
+  };
+  uNode.createText = function(data, noTrans) {
+    return new UE.uNode({
+      type: "text",
+      data: noTrans ? data : utils.unhtml(data || "")
+    });
+  };
+  function nodeToHtml(node, arr, formatter, current) {
+    switch (node.type) {
+      case "root":
+        for (var i = 0, ci; (ci = node.children[i++]); ) {
+          //插入新行
+          if (
+            formatter &&
+            ci.type == "element" &&
+            !dtd.$inlineWithA[ci.tagName] &&
+            i > 1
+          ) {
+            insertLine(arr, current, true);
+            insertIndent(arr, current);
+          }
+          nodeToHtml(ci, arr, formatter, current);
+        }
+        break;
+      case "text":
+        isText(node, arr);
+        break;
+      case "element":
+        isElement(node, arr, formatter, current);
+        break;
+      case "comment":
+        isComment(node, arr, formatter);
+    }
+    return arr;
+  }
+
+  function isText(node, arr) {
+    if (node.parentNode.tagName == "pre") {
+      //源码模式下输入html标签，不能做转换处理，直接输出
+      arr.push(node.data);
+    } else {
+      arr.push(
+        notTransTagName[node.parentNode.tagName]
+          ? utils.html(node.data)
+          : node.data.replace(/[ ]{2}/g, " &nbsp;")
+      );
+    }
+  }
+
+  function isElement(node, arr, formatter, current) {
+    var attrhtml = "";
+    if (node.attrs) {
+      attrhtml = [];
+      var attrs = node.attrs;
+      for (var a in attrs) {
+        //这里就针对
+        //<p>'<img src='http://nsclick.baidu.com/u.gif?&asdf=\"sdf&asdfasdfs;asdf'></p>
+        //这里边的\"做转换，要不用innerHTML直接被截断了，属性src
+        //有可能做的不够
+        attrhtml.push(
+          a +
+            (attrs[a] !== undefined
+              ? '="' +
+                  (notTransAttrs[a]
+                    ? utils.html(attrs[a]).replace(/["]/g, function(a) {
+                        return "&quot;";
+                      })
+                    : utils.unhtml(attrs[a])) +
+                  '"'
+              : "")
+        );
+      }
+      attrhtml = attrhtml.join(" ");
+    }
+    arr.push(
+      "<" +
+        node.tagName +
+        (attrhtml ? " " + attrhtml : "") +
+        (dtd.$empty[node.tagName] ? "/" : "") +
+        ">"
+    );
+    //插入新行
+    if (formatter && !dtd.$inlineWithA[node.tagName] && node.tagName != "pre") {
+      if (node.children && node.children.length) {
+        current = insertLine(arr, current, true);
+        insertIndent(arr, current);
+      }
+    }
+    if (node.children && node.children.length) {
+      for (var i = 0, ci; (ci = node.children[i++]); ) {
+        if (
+          formatter &&
+          ci.type == "element" &&
+          !dtd.$inlineWithA[ci.tagName] &&
+          i > 1
+        ) {
+          insertLine(arr, current);
+          insertIndent(arr, current);
+        }
+        nodeToHtml(ci, arr, formatter, current);
+      }
+    }
+    if (!dtd.$empty[node.tagName]) {
+      if (
+        formatter &&
+        !dtd.$inlineWithA[node.tagName] &&
+        node.tagName != "pre"
+      ) {
+        if (node.children && node.children.length) {
+          current = insertLine(arr, current);
+          insertIndent(arr, current);
+        }
+      }
+      arr.push("</" + node.tagName + ">");
+    }
+  }
+
+  function isComment(node, arr) {
+    arr.push("<!--" + node.data + "-->");
+  }
+
+  function getNodeById(root, id) {
+    var node;
+    if (root.type == "element" && root.getAttr("id") == id) {
+      return root;
+    }
+    if (root.children && root.children.length) {
+      for (var i = 0, ci; (ci = root.children[i++]); ) {
+        if ((node = getNodeById(ci, id))) {
+          return node;
+        }
+      }
+    }
+  }
+
+  function getNodesByTagName(node, tagName, arr) {
+    if (node.type == "element" && node.tagName == tagName) {
+      arr.push(node);
+    }
+    if (node.children && node.children.length) {
+      for (var i = 0, ci; (ci = node.children[i++]); ) {
+        getNodesByTagName(ci, tagName, arr);
+      }
+    }
+  }
+  function nodeTraversal(root, fn) {
+    if (root.children && root.children.length) {
+      for (var i = 0, ci; (ci = root.children[i]); ) {
+        nodeTraversal(ci, fn);
+        //ci被替换的情况，这里就不再走 fn了
+        if (ci.parentNode) {
+          if (ci.children && ci.children.length) {
+            fn(ci);
+          }
+          if (ci.parentNode) i++;
+        }
+      }
+    } else {
+      fn(root);
+    }
+  }
+  uNode.prototype = {
+    /**
+         * 当前节点对象，转换成html文本
+         * @method toHtml
+         * @return { String } 返回转换后的html字符串
+         * @example
+         * ```javascript
+         * node.toHtml();
+         * ```
+         */
+
+    /**
+         * 当前节点对象，转换成html文本
+         * @method toHtml
+         * @param { Boolean } formatter 是否格式化返回值
+         * @return { String } 返回转换后的html字符串
+         * @example
+         * ```javascript
+         * node.toHtml( true );
+         * ```
+         */
+    toHtml: function(formatter) {
+      var arr = [];
+      nodeToHtml(this, arr, formatter, 0);
+      return arr.join("");
+    },
+
+    /**
+         * 获取节点的html内容
+         * @method innerHTML
+         * @warning 假如节点的type不是'element'，或节点的标签名称不在dtd列表里，直接返回当前节点
+         * @return { String } 返回节点的html内容
+         * @example
+         * ```javascript
+         * var htmlstr = node.innerHTML();
+         * ```
+         */
+
+    /**
+         * 设置节点的html内容
+         * @method innerHTML
+         * @warning 假如节点的type不是'element'，或节点的标签名称不在dtd列表里，直接返回当前节点
+         * @param { String } htmlstr 传入要设置的html内容
+         * @return { UE.uNode } 返回节点本身
+         * @example
+         * ```javascript
+         * node.innerHTML('<span>text</span>');
+         * ```
+         */
+    innerHTML: function(htmlstr) {
+      if (this.type != "element" || dtd.$empty[this.tagName]) {
+        return this;
+      }
+      if (utils.isString(htmlstr)) {
+        if (this.children) {
+          for (var i = 0, ci; (ci = this.children[i++]); ) {
+            ci.parentNode = null;
+          }
+        }
+        this.children = [];
+        var tmpRoot = UE.htmlparser(htmlstr);
+        for (var i = 0, ci; (ci = tmpRoot.children[i++]); ) {
+          this.children.push(ci);
+          ci.parentNode = this;
+        }
+        return this;
+      } else {
+        var tmpRoot = new UE.uNode({
+          type: "root",
+          children: this.children
+        });
+        return tmpRoot.toHtml();
+      }
+    },
+
+    /**
+         * 获取节点的纯文本内容
+         * @method innerText
+         * @warning 假如节点的type不是'element'，或节点的标签名称不在dtd列表里，直接返回当前节点
+         * @return { String } 返回节点的存文本内容
+         * @example
+         * ```javascript
+         * var textStr = node.innerText();
+         * ```
+         */
+
+    /**
+         * 设置节点的纯文本内容
+         * @method innerText
+         * @warning 假如节点的type不是'element'，或节点的标签名称不在dtd列表里，直接返回当前节点
+         * @param { String } textStr 传入要设置的文本内容
+         * @return { UE.uNode } 返回节点本身
+         * @example
+         * ```javascript
+         * node.innerText('<span>text</span>');
+         * ```
+         */
+    innerText: function(textStr, noTrans) {
+      if (this.type != "element" || dtd.$empty[this.tagName]) {
+        return this;
+      }
+      if (textStr) {
+        if (this.children) {
+          for (var i = 0, ci; (ci = this.children[i++]); ) {
+            ci.parentNode = null;
+          }
+        }
+        this.children = [];
+        this.appendChild(uNode.createText(textStr, noTrans));
+        return this;
+      } else {
+        return this.toHtml().replace(/<[^>]+>/g, "");
+      }
+    },
+
+    /**
+         * 获取当前对象的data属性
+         * @method getData
+         * @return { Object } 若节点的type值是elemenet，返回空字符串，否则返回节点的data属性
+         * @example
+         * ```javascript
+         * node.getData();
+         * ```
+         */
+    getData: function() {
+      if (this.type == "element") return "";
+      return this.data;
+    },
+
+    /**
+         * 获取当前节点下的第一个子节点
+         * @method firstChild
+         * @return { UE.uNode } 返回第一个子节点
+         * @example
+         * ```javascript
+         * node.firstChild(); //返回第一个子节点
+         * ```
+         */
+    firstChild: function() {
+      //            if (this.type != 'element' || dtd.$empty[this.tagName]) {
+      //                return this;
+      //            }
+      return this.children ? this.children[0] : null;
+    },
+
+    /**
+         * 获取当前节点下的最后一个子节点
+         * @method lastChild
+         * @return { UE.uNode } 返回最后一个子节点
+         * @example
+         * ```javascript
+         * node.lastChild(); //返回最后一个子节点
+         * ```
+         */
+    lastChild: function() {
+      //            if (this.type != 'element' || dtd.$empty[this.tagName] ) {
+      //                return this;
+      //            }
+      return this.children ? this.children[this.children.length - 1] : null;
+    },
+
+    /**
+         * 获取和当前节点有相同父亲节点的前一个节点
+         * @method previousSibling
+         * @return { UE.uNode } 返回前一个节点
+         * @example
+         * ```javascript
+         * node.children[2].previousSibling(); //返回子节点node.children[1]
+         * ```
+         */
+    previousSibling: function() {
+      var parent = this.parentNode;
+      for (var i = 0, ci; (ci = parent.children[i]); i++) {
+        if (ci === this) {
+          return i == 0 ? null : parent.children[i - 1];
+        }
+      }
+    },
+
+    /**
+         * 获取和当前节点有相同父亲节点的后一个节点
+         * @method nextSibling
+         * @return { UE.uNode } 返回后一个节点,找不到返回null
+         * @example
+         * ```javascript
+         * node.children[2].nextSibling(); //如果有，返回子节点node.children[3]
+         * ```
+         */
+    nextSibling: function() {
+      var parent = this.parentNode;
+      for (var i = 0, ci; (ci = parent.children[i++]); ) {
+        if (ci === this) {
+          return parent.children[i];
+        }
+      }
+    },
+
+    /**
+         * 用新的节点替换当前节点
+         * @method replaceChild
+         * @param { UE.uNode } target 要替换成该节点参数
+         * @param { UE.uNode } source 要被替换掉的节点
+         * @return { UE.uNode } 返回替换之后的节点对象
+         * @example
+         * ```javascript
+         * node.replaceChild(newNode, childNode); //用newNode替换childNode,childNode是node的子节点
+         * ```
+         */
+    replaceChild: function(target, source) {
+      if (this.children) {
+        if (target.parentNode) {
+          target.parentNode.removeChild(target);
+        }
+        for (var i = 0, ci; (ci = this.children[i]); i++) {
+          if (ci === source) {
+            this.children.splice(i, 1, target);
+            source.parentNode = null;
+            target.parentNode = this;
+            return target;
+          }
+        }
+      }
+    },
+
+    /**
+         * 在节点的子节点列表最后位置插入一个节点
+         * @method appendChild
+         * @param { UE.uNode } node 要插入的节点
+         * @return { UE.uNode } 返回刚插入的子节点
+         * @example
+         * ```javascript
+         * node.appendChild( newNode ); //在node内插入子节点newNode
+         * ```
+         */
+    appendChild: function(node) {
+      if (
+        this.type == "root" ||
+        (this.type == "element" && !dtd.$empty[this.tagName])
+      ) {
+        if (!this.children) {
+          this.children = [];
+        }
+        if (node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+        for (var i = 0, ci; (ci = this.children[i]); i++) {
+          if (ci === node) {
+            this.children.splice(i, 1);
+            break;
+          }
+        }
+        this.children.push(node);
+        node.parentNode = this;
+        return node;
+      }
+    },
+
+    /**
+         * 在传入节点的前面插入一个节点
+         * @method insertBefore
+         * @param { UE.uNode } target 要插入的节点
+         * @param { UE.uNode } source 在该参数节点前面插入
+         * @return { UE.uNode } 返回刚插入的子节点
+         * @example
+         * ```javascript
+         * node.parentNode.insertBefore(newNode, node); //在node节点后面插入newNode
+         * ```
+         */
+    insertBefore: function(target, source) {
+      if (this.children) {
+        if (target.parentNode) {
+          target.parentNode.removeChild(target);
+        }
+        for (var i = 0, ci; (ci = this.children[i]); i++) {
+          if (ci === source) {
+            this.children.splice(i, 0, target);
+            target.parentNode = this;
+            return target;
+          }
+        }
+      }
+    },
+
+    /**
+         * 在传入节点的后面插入一个节点
+         * @method insertAfter
+         * @param { UE.uNode } target 要插入的节点
+         * @param { UE.uNode } source 在该参数节点后面插入
+         * @return { UE.uNode } 返回刚插入的子节点
+         * @example
+         * ```javascript
+         * node.parentNode.insertAfter(newNode, node); //在node节点后面插入newNode
+         * ```
+         */
+    insertAfter: function(target, source) {
+      if (this.children) {
+        if (target.parentNode) {
+          target.parentNode.removeChild(target);
+        }
+        for (var i = 0, ci; (ci = this.children[i]); i++) {
+          if (ci === source) {
+            this.children.splice(i + 1, 0, target);
+            target.parentNode = this;
+            return target;
+          }
+        }
+      }
+    },
+
+    /**
+         * 从当前节点的子节点列表中，移除节点
+         * @method removeChild
+         * @param { UE.uNode } node 要移除的节点引用
+         * @param { Boolean } keepChildren 是否保留移除节点的子节点，若传入true，自动把移除节点的子节点插入到移除的位置
+         * @return { * } 返回刚移除的子节点
+         * @example
+         * ```javascript
+         * node.removeChild(childNode,true); //在node的子节点列表中移除child节点，并且吧child的子节点插入到移除的位置
+         * ```
+         */
+    removeChild: function(node, keepChildren) {
+      if (this.children) {
+        for (var i = 0, ci; (ci = this.children[i]); i++) {
+          if (ci === node) {
+            this.children.splice(i, 1);
+            ci.parentNode = null;
+            if (keepChildren && ci.children && ci.children.length) {
+              for (var j = 0, cj; (cj = ci.children[j]); j++) {
+                this.children.splice(i + j, 0, cj);
+                cj.parentNode = this;
+              }
+            }
+            return ci;
+          }
+        }
+      }
+    },
+
+    /**
+         * 获取当前节点所代表的元素属性，即获取attrs对象下的属性值
+         * @method getAttr
+         * @param { String } attrName 要获取的属性名称
+         * @return { * } 返回attrs对象下的属性值
+         * @example
+         * ```javascript
+         * node.getAttr('title');
+         * ```
+         */
+    getAttr: function(attrName) {
+      return this.attrs && this.attrs[attrName.toLowerCase()];
+    },
+
+    /**
+         * 设置当前节点所代表的元素属性，即设置attrs对象下的属性值
+         * @method setAttr
+         * @param { String } attrName 要设置的属性名称
+         * @param { * } attrVal 要设置的属性值，类型视设置的属性而定
+         * @return { * } 返回attrs对象下的属性值
+         * @example
+         * ```javascript
+         * node.setAttr('title','标题');
+         * ```
+         */
+    setAttr: function(attrName, attrVal) {
+      if (!attrName) {
+        delete this.attrs;
+        return;
+      }
+      if (!this.attrs) {
+        this.attrs = {};
+      }
+      if (utils.isObject(attrName)) {
+        for (var a in attrName) {
+          if (!attrName[a]) {
+            delete this.attrs[a];
+          } else {
+            this.attrs[a.toLowerCase()] = attrName[a];
+          }
+        }
+      } else {
+        if (!attrVal) {
+          delete this.attrs[attrName];
+        } else {
+          this.attrs[attrName.toLowerCase()] = attrVal;
+        }
+      }
+    },
+
+    /**
+         * 获取当前节点在父节点下的位置索引
+         * @method getIndex
+         * @return { Number } 返回索引数值，如果没有父节点，返回-1
+         * @example
+         * ```javascript
+         * node.getIndex();
+         * ```
+         */
+    getIndex: function() {
+      var parent = this.parentNode;
+      for (var i = 0, ci; (ci = parent.children[i]); i++) {
+        if (ci === this) {
+          return i;
+        }
+      }
+      return -1;
+    },
+
+    /**
+         * 在当前节点下，根据id查找节点
+         * @method getNodeById
+         * @param { String } id 要查找的id
+         * @return { UE.uNode } 返回找到的节点
+         * @example
+         * ```javascript
+         * node.getNodeById('textId');
+         * ```
+         */
+    getNodeById: function(id) {
+      var node;
+      if (this.children && this.children.length) {
+        for (var i = 0, ci; (ci = this.children[i++]); ) {
+          if ((node = getNodeById(ci, id))) {
+            return node;
+          }
+        }
+      }
+    },
+
+    /**
+         * 在当前节点下，根据元素名称查找节点列表
+         * @method getNodesByTagName
+         * @param { String } tagNames 要查找的元素名称
+         * @return { Array } 返回找到的节点列表
+         * @example
+         * ```javascript
+         * node.getNodesByTagName('span');
+         * ```
+         */
+    getNodesByTagName: function(tagNames) {
+      tagNames = utils.trim(tagNames).replace(/[ ]{2,}/g, " ").split(" ");
+      var arr = [],
+        me = this;
+      utils.each(tagNames, function(tagName) {
+        if (me.children && me.children.length) {
+          for (var i = 0, ci; (ci = me.children[i++]); ) {
+            getNodesByTagName(ci, tagName, arr);
+          }
+        }
+      });
+      return arr;
+    },
+
+    /**
+         * 根据样式名称，获取节点的样式值
+         * @method getStyle
+         * @param { String } name 要获取的样式名称
+         * @return { String } 返回样式值
+         * @example
+         * ```javascript
+         * node.getStyle('font-size');
+         * ```
+         */
+    getStyle: function(name) {
+      var cssStyle = this.getAttr("style");
+      if (!cssStyle) {
+        return "";
+      }
+      var reg = new RegExp("(^|;)\\s*" + name + ":([^;]+)", "i");
+      var match = cssStyle.match(reg);
+      if (match && match[0]) {
+        return match[2];
+      }
+      return "";
+    },
+
+    /**
+         * 给节点设置样式
+         * @method setStyle
+         * @param { String } name 要设置的的样式名称
+         * @param { String } val 要设置的的样值
+         * @example
+         * ```javascript
+         * node.setStyle('font-size', '12px');
+         * ```
+         */
+    setStyle: function(name, val) {
+      function exec(name, val) {
+        var reg = new RegExp("(^|;)\\s*" + name + ":([^;]+;?)", "gi");
+        cssStyle = cssStyle.replace(reg, "$1");
+        if (val) {
+          cssStyle = name + ":" + utils.unhtml(val) + ";" + cssStyle;
+        }
+      }
+
+      var cssStyle = this.getAttr("style");
+      if (!cssStyle) {
+        cssStyle = "";
+      }
+      if (utils.isObject(name)) {
+        for (var a in name) {
+          exec(a, name[a]);
+        }
+      } else {
+        exec(name, val);
+      }
+      this.setAttr("style", utils.trim(cssStyle));
+    },
+
+    /**
+         * 传入一个函数，递归遍历当前节点下的所有节点
+         * @method traversal
+         * @param { Function } fn 遍历到节点的时，传入节点作为参数，运行此函数
+         * @example
+         * ```javascript
+         * traversal(node, function(){
+         *     console.log(node.type);
+         * });
+         * ```
+         */
+    traversal: function(fn) {
+      if (this.children && this.children.length) {
+        nodeTraversal(this, fn);
+      }
+      return this;
+    }
+  };
+})();
+
+
+// core/htmlparser.js
+/**
+ * html字符串转换成uNode节点
+ * @file
+ * @module UE
+ * @since 1.2.6.1
+ */
+
+/**
+ * UEditor公用空间，UEditor所有的功能都挂载在该空间下
+ * @unfile
+ * @module UE
+ */
+
+/**
+ * html字符串转换成uNode节点的静态方法
+ * @method htmlparser
+ * @param { String } htmlstr 要转换的html代码
+ * @param { Boolean } ignoreBlank 若设置为true，转换的时候忽略\n\r\t等空白字符
+ * @return { uNode } 给定的html片段转换形成的uNode对象
+ * @example
+ * ```javascript
+ * var root = UE.htmlparser('<p><b>htmlparser</b></p>', true);
+ * ```
+ */
+
+var htmlparser = (UE.htmlparser = function(htmlstr, ignoreBlank) {
+  //todo 原来的方式  [^"'<>\/] 有\/就不能配对上 <TD vAlign=top background=../AAA.JPG> 这样的标签了
+  //先去掉了，加上的原因忘了，这里先记录
+  //var re_tag = /<(?:(?:\/([^>]+)>)|(?:!--([\S|\s]*?)-->)|(?:([^\s\/<>]+)\s*((?:(?:"[^"]*")|(?:'[^']*')|[^"'<>])*)\/?>))/g,
+  //以上的正则表达式无法匹配:<div style="text-align:center;font-family:" font-size:14px;"=""><img src="http://hs-album.oss.aliyuncs.com/static/27/78/35/image/20161206/20161206174331_41105.gif" alt="" /><br /></div>
+  //修改为如下正则表达式:
+  var re_tag = /<(?:(?:\/([^>]+)>)|(?:!--([\S|\s]*?)-->)|(?:([^\/\s>]+)((?:\s+[\w\-:.]+(?:\s*=\s*?(?:(?:"[^"]*")|(?:'[^']*')|[^\s"'\/>]+))?)*)[\S\s]*?(\/?)>))/g,
+    re_attr = /([\w\-:.]+)(?:(?:\s*=\s*(?:(?:"([^"]*)")|(?:'([^']*)')|([^\s>]+)))|(?=\s|$))/g;
+
+  //ie下取得的html可能会有\n存在，要去掉，在处理replace(/[\t\r\n]*/g,'');代码高量的\n不能去除
+  var allowEmptyTags = {
+    b: 1,
+    code: 1,
+    i: 1,
+    u: 1,
+    strike: 1,
+    s: 1,
+    tt: 1,
+    strong: 1,
+    q: 1,
+    samp: 1,
+    em: 1,
+    span: 1,
+    sub: 1,
+    img: 1,
+    sup: 1,
+    font: 1,
+    big: 1,
+    small: 1,
+    iframe: 1,
+    a: 1,
+    br: 1,
+    pre: 1
+  };
+  htmlstr = htmlstr.replace(new RegExp(domUtils.fillChar, "g"), "");
+  if (!ignoreBlank) {
+    htmlstr = htmlstr.replace(
+      new RegExp(
+        "[\\r\\t\\n" +
+          (ignoreBlank ? "" : " ") +
+          "]*</?(\\w+)\\s*(?:[^>]*)>[\\r\\t\\n" +
+          (ignoreBlank ? "" : " ") +
+          "]*",
+        "g"
+      ),
+      function(a, b) {
+        //br暂时单独处理
+        if (b && allowEmptyTags[b.toLowerCase()]) {
+          return a.replace(/(^[\n\r]+)|([\n\r]+$)/g, "");
+        }
+        return a
+          .replace(new RegExp("^[\\r\\n" + (ignoreBlank ? "" : " ") + "]+"), "")
+          .replace(
+            new RegExp("[\\r\\n" + (ignoreBlank ? "" : " ") + "]+$"),
+            ""
+          );
+      }
+    );
+  }
+
+  var notTransAttrs = {
+    href: 1,
+    src: 1
+  };
+
+  var uNode = UE.uNode,
+    needParentNode = {
+      td: "tr",
+      tr: ["tbody", "thead", "tfoot"],
+      tbody: "table",
+      th: "tr",
+      thead: "table",
+      tfoot: "table",
+      caption: "table",
+      li: ["ul", "ol"],
+      dt: "dl",
+      dd: "dl",
+      option: "select"
+    },
+    needChild = {
+      ol: "li",
+      ul: "li"
+    };
+
+  function text(parent, data) {
+    if (needChild[parent.tagName]) {
+      var tmpNode = uNode.createElement(needChild[parent.tagName]);
+      parent.appendChild(tmpNode);
+      tmpNode.appendChild(uNode.createText(data));
+      parent = tmpNode;
+    } else {
+      parent.appendChild(uNode.createText(data));
+    }
+  }
+
+  function element(parent, tagName, htmlattr) {
+    var needParentTag;
+    if ((needParentTag = needParentNode[tagName])) {
+      var tmpParent = parent,
+        hasParent;
+      while (tmpParent.type != "root") {
+        if (
+          utils.isArray(needParentTag)
+            ? utils.indexOf(needParentTag, tmpParent.tagName) != -1
+            : needParentTag == tmpParent.tagName
+        ) {
+          parent = tmpParent;
+          hasParent = true;
+          break;
+        }
+        tmpParent = tmpParent.parentNode;
+      }
+      if (!hasParent) {
+        parent = element(
+          parent,
+          utils.isArray(needParentTag) ? needParentTag[0] : needParentTag
+        );
+      }
+    }
+    //按dtd处理嵌套
+    //        if(parent.type != 'root' && !dtd[parent.tagName][tagName])
+    //            parent = parent.parentNode;
+    var elm = new uNode({
+      parentNode: parent,
+      type: "element",
+      tagName: tagName.toLowerCase(),
+      //是自闭合的处理一下
+      children: dtd.$empty[tagName] ? null : []
+    });
+    //如果属性存在，处理属性
+    if (htmlattr) {
+      var attrs = {},
+        match;
+      while ((match = re_attr.exec(htmlattr))) {
+        attrs[match[1].toLowerCase()] = notTransAttrs[match[1].toLowerCase()]
+          ? match[2] || match[3] || match[4]
+          : utils.unhtml(match[2] || match[3] || match[4]);
+      }
+      elm.attrs = attrs;
+    }
+    //trace:3970
+    //        //如果parent下不能放elm
+    //        if(dtd.$inline[parent.tagName] && dtd.$block[elm.tagName] && !dtd[parent.tagName][elm.tagName]){
+    //            parent = parent.parentNode;
+    //            elm.parentNode = parent;
+    //        }
+    parent.children.push(elm);
+    //如果是自闭合节点返回父亲节点
+    return dtd.$empty[tagName] ? parent : elm;
+  }
+
+  function comment(parent, data) {
+    parent.children.push(
+      new uNode({
+        type: "comment",
+        data: data,
+        parentNode: parent
+      })
+    );
+  }
+
+  var match,
+    currentIndex = 0,
+    nextIndex = 0;
+  //设置根节点
+  var root = new uNode({
+    type: "root",
+    children: []
+  });
+  var currentParent = root;
+
+  while ((match = re_tag.exec(htmlstr))) {
+    currentIndex = match.index;
+    try {
+      if (currentIndex > nextIndex) {
+        //text node
+        text(currentParent, htmlstr.slice(nextIndex, currentIndex));
+      }
+      if (match[3]) {
+        if (dtd.$cdata[currentParent.tagName]) {
+          text(currentParent, match[0]);
+        } else {
+          //start tag
+          currentParent = element(
+            currentParent,
+            match[3].toLowerCase(),
+            match[4]
+          );
+        }
+      } else if (match[1]) {
+        if (currentParent.type != "root") {
+          if (dtd.$cdata[currentParent.tagName] && !dtd.$cdata[match[1]]) {
+            text(currentParent, match[0]);
+          } else {
+            var tmpParent = currentParent;
+            while (
+              currentParent.type == "element" &&
+              currentParent.tagName != match[1].toLowerCase()
+            ) {
+              currentParent = currentParent.parentNode;
+              if (currentParent.type == "root") {
+                currentParent = tmpParent;
+                throw "break";
+              }
+            }
+            //end tag
+            currentParent = currentParent.parentNode;
+          }
+        }
+      } else if (match[2]) {
+        //comment
+        comment(currentParent, match[2]);
+      }
+    } catch (e) {}
+
+    nextIndex = re_tag.lastIndex;
+  }
+  //如果结束是文本，就有可能丢掉，所以这里手动判断一下
+  //例如 <li>sdfsdfsdf<li>sdfsdfsdfsdf
+  if (nextIndex < htmlstr.length) {
+    text(currentParent, htmlstr.slice(nextIndex));
+  }
+  return root;
+});
+
+
+// core/filternode.js
+/**
+ * UE过滤节点的静态方法
+ * @file
+ */
+
+/**
+ * UEditor公用空间，UEditor所有的功能都挂载在该空间下
+ * @module UE
+ */
+
+/**
+ * 根据传入节点和过滤规则过滤相应节点
+ * @module UE
+ * @since 1.2.6.1
+ * @method filterNode
+ * @param { Object } root 指定root节点
+ * @param { Object } rules 过滤规则json对象
+ * @example
+ * ```javascript
+ * UE.filterNode(root,editor.options.filterRules);
+ * ```
+ */
+var filterNode = (UE.filterNode = (function() {
+  function filterNode(node, rules) {
+    switch (node.type) {
+      case "text":
+        break;
+      case "element":
+        var val;
+        if ((val = rules[node.tagName])) {
+          if (val === "-") {
+            node.parentNode.removeChild(node);
+          } else if (utils.isFunction(val)) {
+            var parentNode = node.parentNode,
+              index = node.getIndex();
+            val(node);
+            if (node.parentNode) {
+              if (node.children) {
+                for (var i = 0, ci; (ci = node.children[i]); ) {
+                  filterNode(ci, rules);
+                  if (ci.parentNode) {
+                    i++;
+                  }
+                }
+              }
+            } else {
+              for (var i = index, ci; (ci = parentNode.children[i]); ) {
+                filterNode(ci, rules);
+                if (ci.parentNode) {
+                  i++;
+                }
+              }
+            }
+          } else {
+            var attrs = val["$"];
+            if (attrs && node.attrs) {
+              var tmpAttrs = {},
+                tmpVal;
+              for (var a in attrs) {
+                tmpVal = node.getAttr(a);
+                //todo 只先对style单独处理
+                if (a == "style" && utils.isArray(attrs[a])) {
+                  var tmpCssStyle = [];
+                  utils.each(attrs[a], function(v) {
+                    var tmp;
+                    if ((tmp = node.getStyle(v))) {
+                      tmpCssStyle.push(v + ":" + tmp);
+                    }
+                  });
+                  tmpVal = tmpCssStyle.join(";");
+                }
+                if (tmpVal) {
+                  tmpAttrs[a] = tmpVal;
+                }
+              }
+              node.attrs = tmpAttrs;
+            }
+            if (node.children) {
+              for (var i = 0, ci; (ci = node.children[i]); ) {
+                filterNode(ci, rules);
+                if (ci.parentNode) {
+                  i++;
+                }
+              }
+            }
+          }
+        } else {
+          //如果不在名单里扣出子节点并删除该节点,cdata除外
+          if (dtd.$cdata[node.tagName]) {
+            node.parentNode.removeChild(node);
+          } else {
+            var parentNode = node.parentNode,
+              index = node.getIndex();
+            node.parentNode.removeChild(node, true);
+            for (var i = index, ci; (ci = parentNode.children[i]); ) {
+              filterNode(ci, rules);
+              if (ci.parentNode) {
+                i++;
+              }
+            }
+          }
+        }
+        break;
+      case "comment":
+        node.parentNode.removeChild(node);
+    }
+  }
+  return function(root, rules) {
+    if (utils.isEmptyObject(rules)) {
+      return root;
+    }
+    var val;
+    if ((val = rules["-"])) {
+      utils.each(val.split(" "), function(k) {
+        rules[k] = "-";
+      });
+    }
+    for (var i = 0, ci; (ci = root.children[i]); ) {
+      filterNode(ci, rules);
+      if (ci.parentNode) {
+        i++;
+      }
+    }
+    return root;
+  };
+})());
+
+
+// core/plugin.js
+/**
+ * Created with JetBrains PhpStorm.
+ * User: campaign
+ * Date: 10/8/13
+ * Time: 6:15 PM
+ * To change this template use File | Settings | File Templates.
+ */
+UE.plugin = (function() {
+  var _plugins = {};
+  return {
+    register: function(pluginName, fn, oldOptionName, afterDisabled) {
+      if (oldOptionName && utils.isFunction(oldOptionName)) {
+        afterDisabled = oldOptionName;
+        oldOptionName = null;
+      }
+      _plugins[pluginName] = {
+        optionName: oldOptionName || pluginName,
+        execFn: fn,
+        //当插件被禁用时执行
+        afterDisabled: afterDisabled
+      };
+    },
+    load: function(editor) {
+      utils.each(_plugins, function(plugin) {
+        var _export = plugin.execFn.call(editor);
+        if (editor.options[plugin.optionName] !== false) {
+          if (_export) {
+            //后边需要再做扩展
+            utils.each(_export, function(v, k) {
+              switch (k.toLowerCase()) {
+                case "shortcutkey":
+                  editor.addshortcutkey(v);
+                  break;
+                case "bindevents":
+                  utils.each(v, function(fn, eventName) {
+                    editor.addListener(eventName, fn);
+                  });
+                  break;
+                case "bindmultievents":
+                  utils.each(utils.isArray(v) ? v : [v], function(event) {
+                    var types = utils.trim(event.type).split(/\s+/);
+                    utils.each(types, function(eventName) {
+                      editor.addListener(eventName, event.handler);
+                    });
+                  });
+                  break;
+                case "commands":
+                  utils.each(v, function(execFn, execName) {
+                    editor.commands[execName] = execFn;
+                  });
+                  break;
+                case "outputrule":
+                  editor.addOutputRule(v);
+                  break;
+                case "inputrule":
+                  editor.addInputRule(v);
+                  break;
+                case "defaultoptions":
+                  editor.setOpt(v);
+              }
+            });
+          }
+        } else if (plugin.afterDisabled) {
+          plugin.afterDisabled.call(editor);
+        }
+      });
+      //向下兼容
+      utils.each(UE.plugins, function(plugin) {
+        plugin.call(editor);
+      });
+    },
+    run: function(pluginName, editor) {
+      var plugin = _plugins[pluginName];
+      if (plugin) {
+        plugin.exeFn.call(editor);
+      }
+    }
+  };
+})();
+
+
+// core/keymap.js
+var keymap = (UE.keymap = {
+  Backspace: 8,
+  Tab: 9,
+  Enter: 13,
+
+  Shift: 16,
+  Control: 17,
+  Alt: 18,
+  CapsLock: 20,
+
+  Esc: 27,
+
+  Spacebar: 32,
+
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
+
+  Left: 37,
+  Up: 38,
+  Right: 39,
+  Down: 40,
+
+  Insert: 45,
+
+  Del: 46,
+
+  NumLock: 144,
+
+  Cmd: 91,
+
+  "=": 187,
+  "-": 189,
+
+  b: 66,
+  i: 73,
+  //回退
+  z: 90,
+  y: 89,
+  //粘贴
+  v: 86,
+  x: 88,
+
+  s: 83,
+
+  n: 78
+});
+
+
+// core/localstorage.js
+var LocalStorage = (UE.LocalStorage = (function () {
+
+    var storage = window.localStorage
+
+    return {
+        saveLocalData: function (key, data) {
+            // console.log('saveLocalData', key, data);
+            if (!storage) {
+                return false;
+            }
+            storage.setItem(key, data);
+            return true;
+        },
+        getLocalData: function (key) {
+            // console.log('getLocalData', key);
+            if (!storage) {
+                return null;
+            }
+            return storage.getItem(key) || null;
+        },
+        removeItem: function (key) {
+            // console.log('removeItem', key);
+            storage && storage.removeItem(key);
+        }
+    };
+
+})());
+
+(function () {
+
+    var ROOT_KEY = "UEditorPlusPref";
+
+    UE.Editor.prototype.setPreferences = function (key, value) {
+        // console.log('setPreferences', key, value);
+        var obj = {};
+        if (utils.isString(key)) {
+            obj[key] = value;
+        } else {
+            obj = key;
+        }
+        var data = LocalStorage.getLocalData(ROOT_KEY);
+        if (data && (data = utils.str2json(data))) {
+            utils.extend(data, obj);
+        } else {
+            data = obj;
+        }
+        data && LocalStorage.saveLocalData(ROOT_KEY, utils.json2str(data));
+    };
+
+    UE.Editor.prototype.getPreferences = function (key) {
+        // console.log('getPreferences', key);
+        var data = LocalStorage.getLocalData(ROOT_KEY);
+        if (data && (data = utils.str2json(data))) {
+            return key ? data[key] : data;
+        }
+        return null;
+    };
+
+    UE.Editor.prototype.removePreferences = function (key) {
+        // console.log('removePreferences', key);
+        var data = LocalStorage.getLocalData(ROOT_KEY);
+        if (data && (data = utils.str2json(data))) {
+            data[key] = undefined;
+            delete data[key];
+        }
+        data && LocalStorage.saveLocalData(ROOT_KEY, utils.json2str(data));
+    };
+})();
+
+
+// plugins/defaultfilter.js
+///import core
+///plugin 编辑器默认的过滤转换机制
+
+UE.plugins["defaultfilter"] = function() {
+  var me = this;
+  me.setOpt({
+    allowDivTransToP: true,
+    disabledTableInTable: true,
+    rgb2Hex: true
+  });
+  //默认的过滤处理
+  //进入编辑器的内容处理
+  me.addInputRule(function(root) {
+    var allowDivTransToP = this.options.allowDivTransToP;
+    var val;
+    function tdParent(node) {
+      while (node && node.type == "element") {
+        if (node.tagName == "td") {
+          return true;
+        }
+        node = node.parentNode;
+      }
+      return false;
+    }
+    //进行默认的处理
+    root.traversal(function(node) {
+      if (node.type == "element") {
+        if (
+          !dtd.$cdata[node.tagName] &&
+          me.options.autoClearEmptyNode &&
+          dtd.$inline[node.tagName] &&
+          !dtd.$empty[node.tagName] &&
+          (!node.attrs || utils.isEmptyObject(node.attrs))
+        ) {
+          if (!node.firstChild()) node.parentNode.removeChild(node);
+          else if (
+            node.tagName == "span" &&
+            (!node.attrs || utils.isEmptyObject(node.attrs))
+          ) {
+            node.parentNode.removeChild(node, true);
+          }
+          return;
+        }
+        switch (node.tagName) {
+          case "style":
+          case "script":
+            node.setAttr({
+              cdata_tag: node.tagName,
+              cdata_data: node.innerHTML() || "",
+              _ue_custom_node_: "true"
+            });
+            node.tagName = "div";
+            node.innerHTML("");
+            break;
+          case "a":
+            if ((val = node.getAttr("href"))) {
+              node.setAttr("_href", val);
+            }
+            break;
+          case "img":
+            //todo base64暂时去掉，后边做远程图片上传后，干掉这个
+            if ((val = node.getAttr("src"))) {
+              if (/^data:/.test(val)) {
+                node.parentNode.removeChild(node);
+                break;
+              }
+            }
+            node.setAttr("_src", node.getAttr("src"));
+            break;
+          case "span":
+            if (browser.webkit && (val = node.getStyle("white-space"))) {
+              if (/nowrap|normal/.test(val)) {
+                node.setStyle("white-space", "");
+                if (
+                  me.options.autoClearEmptyNode &&
+                  utils.isEmptyObject(node.attrs)
+                ) {
+                  node.parentNode.removeChild(node, true);
+                }
+              }
+            }
+            val = node.getAttr("id");
+            if (val && /^_baidu_bookmark_/i.test(val)) {
+              node.parentNode.removeChild(node);
+            }
+            break;
+          case "p":
+            if ((val = node.getAttr("align"))) {
+              node.setAttr("align");
+              node.setStyle("text-align", val);
+            }
+            //trace:3431
+            //                        var cssStyle = node.getAttr('style');
+            //                        if (cssStyle) {
+            //                            cssStyle = cssStyle.replace(/(margin|padding)[^;]+/g, '');
+            //                            node.setAttr('style', cssStyle)
+            //
+            //                        }
+            //p标签不允许嵌套
+            utils.each(node.children, function(n) {
+              if (n.type == "element" && n.tagName == "p") {
+                var next = n.nextSibling();
+                node.parentNode.insertAfter(n, node);
+                var last = n;
+                while (next) {
+                  var tmp = next.nextSibling();
+                  node.parentNode.insertAfter(next, last);
+                  last = next;
+                  next = tmp;
+                }
+                return false;
+              }
+            });
+            if (!node.firstChild()) {
+              node.innerHTML(browser.ie ? "&nbsp;" : "<br/>");
+            }
+            break;
+          case "div":
+            if (node.getAttr("cdata_tag")) {
+              break;
+            }
+            //针对代码这里不处理插入代码的div
+            val = node.getAttr("class");
+            if (val && /^line number\d+/.test(val)) {
+              break;
+            }
+            if (!allowDivTransToP) {
+              break;
+            }
+            var tmpNode,
+              p = UE.uNode.createElement("p");
+            while ((tmpNode = node.firstChild())) {
+              if (
+                tmpNode.type == "text" ||
+                !UE.dom.dtd.$block[tmpNode.tagName]
+              ) {
+                p.appendChild(tmpNode);
+              } else {
+                if (p.firstChild()) {
+                  node.parentNode.insertBefore(p, node);
+                  p = UE.uNode.createElement("p");
+                } else {
+                  node.parentNode.insertBefore(tmpNode, node);
+                }
+              }
+            }
+            if (p.firstChild()) {
+              node.parentNode.insertBefore(p, node);
+            }
+            node.parentNode.removeChild(node);
+            break;
+          case "dl":
+            node.tagName = "ul";
+            break;
+          case "dt":
+          case "dd":
+            node.tagName = "li";
+            break;
+          case "li":
+            var className = node.getAttr("class");
+            if (!className || !/list\-/.test(className)) {
+              node.setAttr();
+            }
+            var tmpNodes = node.getNodesByTagName("ol ul");
+            UE.utils.each(tmpNodes, function(n) {
+              node.parentNode.insertAfter(n, node);
+            });
+            break;
+          case "td":
+          case "th":
+          case "caption":
+            if (!node.children || !node.children.length) {
+              node.appendChild(
+                browser.ie11below
+                  ? UE.uNode.createText(" ")
+                  : UE.uNode.createElement("br")
+              );
+            }
+            break;
+          case "table":
+            if (me.options.disabledTableInTable && tdParent(node)) {
+              node.parentNode.insertBefore(
+                UE.uNode.createText(node.innerText()),
+                node
+              );
+              node.parentNode.removeChild(node);
+            }
+        }
+      }
+      //            if(node.type == 'comment'){
+      //                node.parentNode.removeChild(node);
+      //            }
+    });
+  });
+
+  //从编辑器出去的内容处理
+  me.addOutputRule(function(root) {
+    var val;
+    root.traversal(function(node) {
+      if (node.type == "element") {
+        if (
+          me.options.autoClearEmptyNode &&
+          dtd.$inline[node.tagName] &&
+          !dtd.$empty[node.tagName] &&
+          (!node.attrs || utils.isEmptyObject(node.attrs))
+        ) {
+          if (!node.firstChild()) node.parentNode.removeChild(node);
+          else if (
+            node.tagName == "span" &&
+            (!node.attrs || utils.isEmptyObject(node.attrs))
+          ) {
+            node.parentNode.removeChild(node, true);
+          }
+          return;
+        }
+        switch (node.tagName) {
+          case "div":
+            if ((val = node.getAttr("cdata_tag"))) {
+              node.tagName = val;
+              node.appendChild(UE.uNode.createText(node.getAttr("cdata_data")));
+              node.setAttr({
+                cdata_tag: "",
+                cdata_data: "",
+                _ue_custom_node_: ""
+              });
+            }
+            break;
+          case "a":
+            if ((val = node.getAttr("_href"))) {
+              node.setAttr({
+                href: utils.html(val),
+                _href: ""
+              });
+            }
+            break;
+            break;
+          case "span":
+            val = node.getAttr("id");
+            if (val && /^_baidu_bookmark_/i.test(val)) {
+              node.parentNode.removeChild(node);
+            }
+            //将color的rgb格式转换为#16进制格式
+            if (me.getOpt("rgb2Hex")) {
+              var cssStyle = node.getAttr("style");
+              if (cssStyle) {
+                node.setAttr(
+                  "style",
+                  cssStyle.replace(/rgba?\(([\d,\s]+)\)/g, function(a, value) {
+                    var array = value.split(",");
+                    if (array.length > 3) return "";
+                    value = "#";
+                    for (var i = 0, color; (color = array[i++]); ) {
+                      color = parseInt(
+                        color.replace(/[^\d]/gi, ""),
+                        10
+                      ).toString(16);
+                      value += color.length == 1 ? "0" + color : color;
+                    }
+                    return value.toUpperCase();
+                  })
+                );
+              }
+            }
+            break;
+          case "img":
+            if ((val = node.getAttr("_src"))) {
+              node.setAttr({
+                src: node.getAttr("_src"),
+                _src: ""
+              });
+            }
+        }
+      }
+    });
+  });
+};
+
+
+// plugins/inserthtml.js
+/**
+ * 插入html字符串插件
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 插入html代码
+ * @command inserthtml
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { String } html 插入的html字符串
+ * @remaind 插入的标签内容是在当前的选区位置上插入，如果当前是闭合状态，那直接插入内容， 如果当前是选中状态，将先清除当前选中内容后，再做插入
+ * @warning 注意:该命令会对当前选区的位置，对插入的内容进行过滤转换处理。 过滤的规则遵循html语意化的原则。
+ * @example
+ * ```javascript
+ * //xxx[BB]xxx 当前选区为非闭合选区，选中BB这两个文本
+ * //执行命令，插入<b>CC</b>
+ * //插入后的效果 xxx<b>CC</b>xxx
+ * //<p>xx|xxx</p> 当前选区为闭合状态
+ * //插入<p>CC</p>
+ * //结果 <p>xx</p><p>CC</p><p>xxx</p>
+ * //<p>xxxx</p>|</p>xxx</p> 当前选区在两个p标签之间
+ * //插入 xxxx
+ * //结果 <p>xxxx</p><p>xxxx</p></p>xxx</p>
+ * ```
+ */
+
+UE.commands["inserthtml"] = {
+  execCommand: function(command, html, notNeedFilter) {
+    var me = this,
+      range,
+      div;
+    if (!html) {
+      return;
+    }
+    if (me.fireEvent("beforeinserthtml", html) === true) {
+      return;
+    }
+    range = me.selection.getRange();
+    div = range.document.createElement("div");
+    div.style.display = "inline";
+
+    if (!notNeedFilter) {
+      var root = UE.htmlparser(html);
+      //如果给了过滤规则就先进行过滤
+      if (me.options.filterRules) {
+        UE.filterNode(root, me.options.filterRules);
+      }
+      //执行默认的处理
+      me.filterInputRule(root);
+      html = root.toHtml();
+    }
+    div.innerHTML = utils.trim(html);
+
+    if (!range.collapsed) {
+      var tmpNode = range.startContainer;
+      if (domUtils.isFillChar(tmpNode)) {
+        range.setStartBefore(tmpNode);
+      }
+      tmpNode = range.endContainer;
+      if (domUtils.isFillChar(tmpNode)) {
+        range.setEndAfter(tmpNode);
+      }
+      range.txtToElmBoundary();
+      //结束边界可能放到了br的前边，要把br包含进来
+      // x[xxx]<br/>
+      if (range.endContainer && range.endContainer.nodeType == 1) {
+        tmpNode = range.endContainer.childNodes[range.endOffset];
+        if (tmpNode && domUtils.isBr(tmpNode)) {
+          range.setEndAfter(tmpNode);
+        }
+      }
+      if (range.startOffset == 0) {
+        tmpNode = range.startContainer;
+        if (domUtils.isBoundaryNode(tmpNode, "firstChild")) {
+          tmpNode = range.endContainer;
+          if (
+            range.endOffset ==
+              (tmpNode.nodeType == 3
+                ? tmpNode.nodeValue.length
+                : tmpNode.childNodes.length) &&
+            domUtils.isBoundaryNode(tmpNode, "lastChild")
+          ) {
+            me.body.innerHTML = "<p>" + (browser.ie ? "" : "<br/>") + "</p>";
+            range.setStart(me.body.firstChild, 0).collapse(true);
+          }
+        }
+      }
+      !range.collapsed && range.deleteContents();
+      if (range.startContainer.nodeType == 1) {
+        var child = range.startContainer.childNodes[range.startOffset],
+          pre;
+        if (
+          child &&
+          domUtils.isBlockElm(child) &&
+          (pre = child.previousSibling) &&
+          domUtils.isBlockElm(pre)
+        ) {
+          range.setEnd(pre, pre.childNodes.length).collapse();
+          while (child.firstChild) {
+            pre.appendChild(child.firstChild);
+          }
+          domUtils.remove(child);
+        }
+      }
+    }
+
+    var child,
+      parent,
+      pre,
+      tmp,
+      hadBreak = 0,
+      nextNode;
+    //如果当前位置选中了fillchar要干掉，要不会产生空行
+    if (range.inFillChar()) {
+      child = range.startContainer;
+      if (domUtils.isFillChar(child)) {
+        range.setStartBefore(child).collapse(true);
+        domUtils.remove(child);
+      } else if (domUtils.isFillChar(child, true)) {
+        child.nodeValue = child.nodeValue.replace(fillCharReg, "");
+        range.startOffset--;
+        range.collapsed && range.collapse(true);
+      }
+    }
+    //列表单独处理
+    var li = domUtils.findParentByTagName(range.startContainer, "li", true);
+    if (li) {
+      var next, last;
+      while ((child = div.firstChild)) {
+        //针对hr单独处理一下先
+        while (
+          child &&
+          (child.nodeType == 3 ||
+            !domUtils.isBlockElm(child) ||
+            child.tagName == "HR")
+        ) {
+          next = child.nextSibling;
+          range.insertNode(child).collapse();
+          last = child;
+          child = next;
+        }
+        if (child) {
+          if (/^(ol|ul)$/i.test(child.tagName)) {
+            while (child.firstChild) {
+              last = child.firstChild;
+              domUtils.insertAfter(li, child.firstChild);
+              li = li.nextSibling;
+            }
+            domUtils.remove(child);
+          } else {
+            var tmpLi;
+            next = child.nextSibling;
+            tmpLi = me.document.createElement("li");
+            domUtils.insertAfter(li, tmpLi);
+            tmpLi.appendChild(child);
+            last = child;
+            child = next;
+            li = tmpLi;
+          }
+        }
+      }
+      li = domUtils.findParentByTagName(range.startContainer, "li", true);
+      if (domUtils.isEmptyBlock(li)) {
+        domUtils.remove(li);
+      }
+      if (last) {
+        range.setStartAfter(last).collapse(true).select(true);
+      }
+    } else {
+      while ((child = div.firstChild)) {
+        if (hadBreak) {
+          var p = me.document.createElement("p");
+          while (child && (child.nodeType == 3 || !dtd.$block[child.tagName])) {
+            nextNode = child.nextSibling;
+            p.appendChild(child);
+            child = nextNode;
+          }
+          if (p.firstChild) {
+            child = p;
+          }
+        }
+        range.insertNode(child);
+        nextNode = child.nextSibling;
+        if (
+          !hadBreak &&
+          child.nodeType == domUtils.NODE_ELEMENT &&
+          domUtils.isBlockElm(child)
+        ) {
+          parent = domUtils.findParent(child, function(node) {
+            return domUtils.isBlockElm(node);
+          });
+          if (
+            parent &&
+            parent.tagName.toLowerCase() != "body" &&
+            !(
+              dtd[parent.tagName][child.nodeName] && child.parentNode === parent
+            )
+          ) {
+            if (!dtd[parent.tagName][child.nodeName]) {
+              pre = parent;
+            } else {
+              tmp = child.parentNode;
+              while (tmp !== parent) {
+                pre = tmp;
+                tmp = tmp.parentNode;
+              }
+            }
+
+            domUtils.breakParent(child, pre || tmp);
+            //去掉break后前一个多余的节点  <p>|<[p> ==> <p></p><div></div><p>|</p>
+            var pre = child.previousSibling;
+            domUtils.trimWhiteTextNode(pre);
+            if (!pre.childNodes.length) {
+              domUtils.remove(pre);
+            }
+            //trace:2012,在非ie的情况，切开后剩下的节点有可能不能点入光标添加br占位
+
+            if (
+              !browser.ie &&
+              (next = child.nextSibling) &&
+              domUtils.isBlockElm(next) &&
+              next.lastChild &&
+              !domUtils.isBr(next.lastChild)
+            ) {
+              next.appendChild(me.document.createElement("br"));
+            }
+            hadBreak = 1;
+          }
+        }
+        var next = child.nextSibling;
+        if (!div.firstChild && next && domUtils.isBlockElm(next)) {
+          range.setStart(next, 0).collapse(true);
+          break;
+        }
+        range.setEndAfter(child).collapse();
+      }
+
+      child = range.startContainer;
+
+      if (nextNode && domUtils.isBr(nextNode)) {
+        domUtils.remove(nextNode);
+      }
+      //用chrome可能有空白展位符
+      if (domUtils.isBlockElm(child) && domUtils.isEmptyNode(child)) {
+        if ((nextNode = child.nextSibling)) {
+          domUtils.remove(child);
+          if (nextNode.nodeType == 1 && dtd.$block[nextNode.tagName]) {
+            range.setStart(nextNode, 0).collapse(true).shrinkBoundary();
+          }
+        } else {
+          try {
+            child.innerHTML = browser.ie ? domUtils.fillChar : "<br/>";
+          } catch (e) {
+            range.setStartBefore(child);
+            domUtils.remove(child);
+          }
+        }
+      }
+      //加上true因为在删除表情等时会删两次，第一次是删的fillData
+      try {
+        range.select(true);
+      } catch (e) {}
+    }
+
+    setTimeout(function() {
+      range = me.selection.getRange();
+      range.scrollToView(
+        me.autoHeightEnabled,
+        me.autoHeightEnabled ? domUtils.getXY(me.iframe).y : 0
+      );
+      me.fireEvent("afterinserthtml", html);
+    }, 200);
+  }
+};
+
+
+// plugins/autotypeset.js
+/**
+ * 自动排版
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 对当前编辑器的内容执行自动排版， 排版的行为根据config配置文件里的“autotypeset”选项进行控制。
+ * @command autotypeset
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'autotypeset' );
+ * ```
+ */
+
+UE.plugins["autotypeset"] = function() {
+  this.setOpt({
+    autotypeset: {
+      mergeEmptyline: true, //合并空行
+      removeClass: true, //去掉冗余的class
+      removeEmptyline: false, //去掉空行
+      textAlign: "left", //段落的排版方式，可以是 left,right,center,justify 去掉这个属性表示不执行排版
+      imageBlockLine: "center", //图片的浮动方式，独占一行剧中,左右浮动，默认: center,left,right,none 去掉这个属性表示不执行排版
+      pasteFilter: false, //根据规则过滤没事粘贴进来的内容
+      clearFontSize: false, //去掉所有的内嵌字号，使用编辑器默认的字号
+      clearFontFamily: false, //去掉所有的内嵌字体，使用编辑器默认的字体
+      removeEmptyNode: false, // 去掉空节点
+      //可以去掉的标签
+      removeTagNames: utils.extend({ div: 1 }, dtd.$removeEmpty),
+      indent: false, // 行首缩进
+      indentValue: "2em", //行首缩进的大小
+      bdc2sb: false,
+      tobdc: false
+    }
+  });
+
+  var me = this,
+    opt = me.options.autotypeset,
+    remainClass = {
+      selectTdClass: 1,
+      pagebreak: 1,
+      anchorclass: 1
+    },
+    remainTag = {
+      li: 1
+    },
+    tags = {
+      div: 1,
+      p: 1,
+      //trace:2183 这些也认为是行
+      blockquote: 1,
+      center: 1,
+      h1: 1,
+      h2: 1,
+      h3: 1,
+      h4: 1,
+      h5: 1,
+      h6: 1,
+      span: 1
+    },
+    highlightCont;
+  //升级了版本，但配置项目里没有autotypeset
+  if (!opt) {
+    return;
+  }
+
+  readLocalOpts();
+
+  function isLine(node, notEmpty) {
+    if (!node || node.nodeType == 3) return 0;
+    if (domUtils.isBr(node)) return 1;
+    if (node && node.parentNode && tags[node.tagName.toLowerCase()]) {
+      if (
+        (highlightCont && highlightCont.contains(node)) ||
+        node.getAttribute("pagebreak")
+      ) {
+        return 0;
+      }
+
+      return notEmpty
+        ? !domUtils.isEmptyBlock(node)
+        : domUtils.isEmptyBlock(
+            node,
+            new RegExp("[\\s" + domUtils.fillChar + "]", "g")
+          );
+    }
+  }
+
+  function removeNotAttributeSpan(node) {
+    if (!node.style.cssText) {
+      domUtils.removeAttributes(node, ["style"]);
+      if (
+        node.tagName.toLowerCase() == "span" &&
+        domUtils.hasNoAttributes(node)
+      ) {
+        domUtils.remove(node, true);
+      }
+    }
+  }
+  function autotype(type, html) {
+    var me = this,
+      cont;
+    if (html) {
+      if (!opt.pasteFilter) {
+        return;
+      }
+      cont = me.document.createElement("div");
+      cont.innerHTML = html.html;
+    } else {
+      cont = me.document.body;
+    }
+    var nodes = domUtils.getElementsByTagName(cont, "*");
+
+    // 行首缩进，段落方向，段间距，段内间距
+    for (var i = 0, ci; (ci = nodes[i++]); ) {
+      if (me.fireEvent("excludeNodeinautotype", ci) === true) {
+        continue;
+      }
+      //font-size
+      if (opt.clearFontSize && ci.style.fontSize) {
+        domUtils.removeStyle(ci, "font-size");
+
+        removeNotAttributeSpan(ci);
+      }
+      //font-family
+      if (opt.clearFontFamily && ci.style.fontFamily) {
+        domUtils.removeStyle(ci, "font-family");
+        removeNotAttributeSpan(ci);
+      }
+
+      if (isLine(ci)) {
+        //合并空行
+        if (opt.mergeEmptyline) {
+          var next = ci.nextSibling,
+            tmpNode,
+            isBr = domUtils.isBr(ci);
+          while (isLine(next)) {
+            tmpNode = next;
+            next = tmpNode.nextSibling;
+            if (isBr && (!next || (next && !domUtils.isBr(next)))) {
+              break;
+            }
+            domUtils.remove(tmpNode);
+          }
+        }
+        //去掉空行，保留占位的空行
+        if (
+          opt.removeEmptyline &&
+          domUtils.inDoc(ci, cont) &&
+          !remainTag[ci.parentNode.tagName.toLowerCase()]
+        ) {
+          if (domUtils.isBr(ci)) {
+            next = ci.nextSibling;
+            if (next && !domUtils.isBr(next)) {
+              continue;
+            }
+          }
+          domUtils.remove(ci);
+          continue;
+        }
+      }
+      if (isLine(ci, true) && ci.tagName != "SPAN") {
+        if (opt.indent) {
+          ci.style.textIndent = opt.indentValue;
+        }
+        if (opt.textAlign) {
+          ci.style.textAlign = opt.textAlign;
+        }
+        // if(opt.lineHeight)
+        //     ci.style.lineHeight = opt.lineHeight + 'cm';
+      }
+
+      //去掉class,保留的class不去掉
+      if (
+        opt.removeClass &&
+        ci.className &&
+        !remainClass[ci.className.toLowerCase()]
+      ) {
+        if (highlightCont && highlightCont.contains(ci)) {
+          continue;
+        }
+        domUtils.removeAttributes(ci, ["class"]);
+      }
+
+      //表情不处理
+      if (
+        opt.imageBlockLine &&
+        ci.tagName.toLowerCase() == "img" &&
+        !ci.getAttribute("emotion")
+      ) {
+        if (html) {
+          var img = ci;
+          switch (opt.imageBlockLine) {
+            case "left":
+            case "right":
+            case "none":
+              var pN = img.parentNode,
+                tmpNode,
+                pre,
+                next;
+              while (dtd.$inline[pN.tagName] || pN.tagName == "A") {
+                pN = pN.parentNode;
+              }
+              tmpNode = pN;
+              if (
+                tmpNode.tagName == "P" &&
+                domUtils.getStyle(tmpNode, "text-align") == "center"
+              ) {
+                if (
+                  !domUtils.isBody(tmpNode) &&
+                  domUtils.getChildCount(tmpNode, function(node) {
+                    return !domUtils.isBr(node) && !domUtils.isWhitespace(node);
+                  }) == 1
+                ) {
+                  pre = tmpNode.previousSibling;
+                  next = tmpNode.nextSibling;
+                  if (
+                    pre &&
+                    next &&
+                    pre.nodeType == 1 &&
+                    next.nodeType == 1 &&
+                    pre.tagName == next.tagName &&
+                    domUtils.isBlockElm(pre)
+                  ) {
+                    pre.appendChild(tmpNode.firstChild);
+                    while (next.firstChild) {
+                      pre.appendChild(next.firstChild);
+                    }
+                    domUtils.remove(tmpNode);
+                    domUtils.remove(next);
+                  } else {
+                    domUtils.setStyle(tmpNode, "text-align", "");
+                  }
+                }
+              }
+              domUtils.setStyle(img, "float", opt.imageBlockLine);
+              break;
+            case "center":
+              if (me.queryCommandValue("imagefloat") != "center") {
+                pN = img.parentNode;
+                domUtils.setStyle(img, "float", "none");
+                tmpNode = img;
+                while (
+                  pN &&
+                  domUtils.getChildCount(pN, function(node) {
+                    return !domUtils.isBr(node) && !domUtils.isWhitespace(node);
+                  }) == 1 &&
+                  (dtd.$inline[pN.tagName] || pN.tagName == "A")
+                ) {
+                  tmpNode = pN;
+                  pN = pN.parentNode;
+                }
+                var pNode = me.document.createElement("p");
+                domUtils.setAttributes(pNode, {
+                  style: "text-align:center"
+                });
+                tmpNode.parentNode.insertBefore(pNode, tmpNode);
+                pNode.appendChild(tmpNode);
+                domUtils.setStyle(tmpNode, "float", "");
+              }
+          }
+        } else {
+          var range = me.selection.getRange();
+          range.selectNode(ci).select();
+          me.execCommand("imagefloat", opt.imageBlockLine);
+        }
+      }
+
+      //去掉冗余的标签
+      if (opt.removeEmptyNode) {
+        if (
+          opt.removeTagNames[ci.tagName.toLowerCase()] &&
+          domUtils.hasNoAttributes(ci) &&
+          domUtils.isEmptyBlock(ci)
+        ) {
+          domUtils.remove(ci);
+        }
+      }
+    }
+    if (opt.tobdc) {
+      var root = UE.htmlparser(cont.innerHTML);
+      root.traversal(function(node) {
+        if (node.type == "text") {
+          node.data = ToDBC(node.data);
+        }
+      });
+      cont.innerHTML = root.toHtml();
+    }
+    if (opt.bdc2sb) {
+      var root = UE.htmlparser(cont.innerHTML);
+      root.traversal(function(node) {
+        if (node.type == "text") {
+          node.data = DBC2SB(node.data);
+        }
+      });
+      cont.innerHTML = root.toHtml();
+    }
+    if (html) {
+      html.html = cont.innerHTML;
+    }
+  }
+  if (opt.pasteFilter) {
+    me.addListener("beforepaste", autotype);
+  }
+
+  function DBC2SB(str) {
+    var result = "";
+    for (var i = 0; i < str.length; i++) {
+      var code = str.charCodeAt(i); //获取当前字符的unicode编码
+      if (code >= 65281 && code <= 65373) {
+        //在这个unicode编码范围中的是所有的英文字母已经各种字符
+        result += String.fromCharCode(str.charCodeAt(i) - 65248); //把全角字符的unicode编码转换为对应半角字符的unicode码
+      } else if (code == 12288) {
+        //空格
+        result += String.fromCharCode(str.charCodeAt(i) - 12288 + 32);
+      } else {
+        result += str.charAt(i);
+      }
+    }
+    return result;
+  }
+  function ToDBC(txtstring) {
+    txtstring = utils.html(txtstring);
+    var tmp = "";
+    var mark = ""; /*用于判断,如果是html尖括里的标记,则不进行全角的转换*/
+    for (var i = 0; i < txtstring.length; i++) {
+      if (txtstring.charCodeAt(i) == 32) {
+        tmp = tmp + String.fromCharCode(12288);
+      } else if (txtstring.charCodeAt(i) < 127) {
+        tmp = tmp + String.fromCharCode(txtstring.charCodeAt(i) + 65248);
+      } else {
+        tmp += txtstring.charAt(i);
+      }
+    }
+    return tmp;
+  }
+
+  function readLocalOpts() {
+    var cookieOpt = me.getPreferences("autotypeset");
+    utils.extend(me.options.autotypeset, cookieOpt);
+  }
+
+  me.commands["autotypeset"] = {
+    execCommand: function() {
+      me.removeListener("beforepaste", autotype);
+      if (opt.pasteFilter) {
+        me.addListener("beforepaste", autotype);
+      }
+      autotype.call(me);
+    }
+  };
+};
+
+
+// plugins/autosubmit.js
+/**
+ * 快捷键提交
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 提交表单
+ * @command autosubmit
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'autosubmit' );
+ * ```
+ */
+
+UE.plugin.register("autosubmit", function() {
+  return {
+    shortcutkey: {
+      autosubmit: "ctrl+13" //手动提交
+    },
+    commands: {
+      autosubmit: {
+        execCommand: function() {
+          var me = this,
+            form = domUtils.findParentByTagName(me.iframe, "form", false);
+          if (form) {
+            if (me.fireEvent("beforesubmit") === false) {
+              return;
+            }
+            me.sync();
+            form.submit();
+          }
+        }
+      }
+    }
+  };
+});
+
+
+// plugins/background.js
+/**
+ * 背景插件，为UEditor提供设置背景功能
+ * @file
+ * @since 1.2.6.1
+ */
+UE.plugin.register("background", function() {
+  var me = this,
+    cssRuleId = "editor_background",
+    isSetColored,
+    reg = new RegExp("body[\\s]*\\{(.+)\\}", "i");
+
+  function stringToObj(str) {
+    var obj = {},
+      styles = str.split(";");
+    utils.each(styles, function(v) {
+      var index = v.indexOf(":"),
+        key = utils.trim(v.substr(0, index)).toLowerCase();
+      key && (obj[key] = utils.trim(v.substr(index + 1) || ""));
+    });
+    return obj;
+  }
+
+  function setBackground(obj) {
+    if (obj) {
+      var styles = [];
+      for (var name in obj) {
+        if (obj.hasOwnProperty(name)) {
+          styles.push(name + ":" + obj[name] + "; ");
+        }
+      }
+      utils.cssRule(
+        cssRuleId,
+        styles.length ? "body{" + styles.join("") + "}" : "",
+        me.document
+      );
+    } else {
+      utils.cssRule(cssRuleId, "", me.document);
+    }
+  }
+  //重写editor.hasContent方法
+
+  var orgFn = me.hasContents;
+  me.hasContents = function() {
+    if (me.queryCommandValue("background")) {
+      return true;
+    }
+    return orgFn.apply(me, arguments);
+  };
+  return {
+    bindEvents: {
+      getAllHtml: function(type, headHtml) {
+        var body = this.body,
+          su = domUtils.getComputedStyle(body, "background-image"),
+          url = "";
+        if (su.indexOf(me.options.imagePath) > 0) {
+          url = su
+            .substring(su.indexOf(me.options.imagePath), su.length - 1)
+            .replace(/"|\(|\)/gi, "");
+        } else {
+          url = su != "none" ? su.replace(/url\("?|"?\)/gi, "") : "";
+        }
+        var html = '<style type="text/css">body{';
+        var bgObj = {
+          "background-color":
+            domUtils.getComputedStyle(body, "background-color") || "#ffffff",
+          "background-image": url ? "url(" + url + ")" : "",
+          "background-repeat":
+            domUtils.getComputedStyle(body, "background-repeat") || "",
+          "background-position": browser.ie
+            ? domUtils.getComputedStyle(body, "background-position-x") +
+                " " +
+                domUtils.getComputedStyle(body, "background-position-y")
+            : domUtils.getComputedStyle(body, "background-position"),
+          height: domUtils.getComputedStyle(body, "height")
+        };
+        for (var name in bgObj) {
+          if (bgObj.hasOwnProperty(name)) {
+            html += name + ":" + bgObj[name] + "; ";
+          }
+        }
+        html += "}</style> ";
+        headHtml.push(html);
+      },
+      aftersetcontent: function() {
+        if (isSetColored == false) setBackground();
+      }
+    },
+    inputRule: function(root) {
+      isSetColored = false;
+      utils.each(root.getNodesByTagName("p"), function(p) {
+        var styles = p.getAttr("data-background");
+        if (styles) {
+          isSetColored = true;
+          setBackground(stringToObj(styles));
+          p.parentNode.removeChild(p);
+        }
+      });
+    },
+    outputRule: function(root) {
+      var me = this,
+        styles = (utils.cssRule(cssRuleId, me.document) || "")
+          .replace(/[\n\r]+/g, "")
+          .match(reg);
+      if (styles) {
+        root.appendChild(
+          UE.uNode.createElement(
+            '<p style="display:none;" data-background="' +
+              utils.trim(styles[1].replace(/"/g, "").replace(/[\s]+/g, " ")) +
+              '"><br/></p>'
+          )
+        );
+      }
+    },
+    commands: {
+      background: {
+        execCommand: function(cmd, obj) {
+          setBackground(obj);
+        },
+        queryCommandValue: function() {
+          var me = this,
+            styles = (utils.cssRule(cssRuleId, me.document) || "")
+              .replace(/[\n\r]+/g, "")
+              .match(reg);
+          return styles ? stringToObj(styles[1]) : null;
+        },
+        notNeedUndo: true
+      }
+    }
+  };
+});
+
+
+// plugins/image.js
+/**
+ * 图片插入、排版插件
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 图片对齐方式
+ * @command imagefloat
+ * @method execCommand
+ * @remind 值center为独占一行居中
+ * @param { String } cmd 命令字符串
+ * @param { String } align 对齐方式，可传left、right、none、center
+ * @remaind center表示图片独占一行
+ * @example
+ * ```javascript
+ * editor.execCommand( 'imagefloat', 'center' );
+ * ```
+ */
+
+/**
+ * 如果选区所在位置是图片区域
+ * @command imagefloat
+ * @method queryCommandValue
+ * @param { String } cmd 命令字符串
+ * @return { String } 返回图片对齐方式
+ * @example
+ * ```javascript
+ * editor.queryCommandValue( 'imagefloat' );
+ * ```
+ */
+
+UE.commands["imagefloat"] = {
+  execCommand: function(cmd, align) {
+    var me = this,
+      range = me.selection.getRange();
+    if (!range.collapsed) {
+      var img = range.getClosedNode();
+      if (img && img.tagName == "IMG") {
+        switch (align) {
+          case "left":
+          case "right":
+          case "none":
+            var pN = img.parentNode,
+              tmpNode,
+              pre,
+              next;
+            while (dtd.$inline[pN.tagName] || pN.tagName == "A") {
+              pN = pN.parentNode;
+            }
+            tmpNode = pN;
+            if (
+              tmpNode.tagName == "P" &&
+              domUtils.getStyle(tmpNode, "text-align") == "center"
+            ) {
+              if (
+                !domUtils.isBody(tmpNode) &&
+                domUtils.getChildCount(tmpNode, function(node) {
+                  return !domUtils.isBr(node) && !domUtils.isWhitespace(node);
+                }) == 1
+              ) {
+                pre = tmpNode.previousSibling;
+                next = tmpNode.nextSibling;
+                if (
+                  pre &&
+                  next &&
+                  pre.nodeType == 1 &&
+                  next.nodeType == 1 &&
+                  pre.tagName == next.tagName &&
+                  domUtils.isBlockElm(pre)
+                ) {
+                  pre.appendChild(tmpNode.firstChild);
+                  while (next.firstChild) {
+                    pre.appendChild(next.firstChild);
+                  }
+                  domUtils.remove(tmpNode);
+                  domUtils.remove(next);
+                } else {
+                  domUtils.setStyle(tmpNode, "text-align", "");
+                }
+              }
+
+              range.selectNode(img).select();
+            }
+            domUtils.setStyle(img, "float", align == "none" ? "" : align);
+            if (align == "none") {
+              domUtils.removeAttributes(img, "align");
+            }
+
+            break;
+          case "center":
+            if (me.queryCommandValue("imagefloat") != "center") {
+              pN = img.parentNode;
+              domUtils.setStyle(img, "float", "");
+              domUtils.removeAttributes(img, "align");
+              tmpNode = img;
+              while (
+                pN &&
+                domUtils.getChildCount(pN, function(node) {
+                  return !domUtils.isBr(node) && !domUtils.isWhitespace(node);
+                }) == 1 &&
+                (dtd.$inline[pN.tagName] || pN.tagName == "A")
+              ) {
+                tmpNode = pN;
+                pN = pN.parentNode;
+              }
+              range.setStartBefore(tmpNode).setCursor(false);
+              pN = me.document.createElement("div");
+              pN.appendChild(tmpNode);
+              domUtils.setStyle(tmpNode, "float", "");
+
+              me.execCommand(
+                "insertHtml",
+                '<p id="_img_parent_tmp" style="text-align:center">' +
+                  pN.innerHTML +
+                  "</p>"
+              );
+
+              tmpNode = me.document.getElementById("_img_parent_tmp");
+              tmpNode.removeAttribute("id");
+              tmpNode = tmpNode.firstChild;
+              range.selectNode(tmpNode).select();
+              //去掉后边多余的元素
+              next = tmpNode.parentNode.nextSibling;
+              if (next && domUtils.isEmptyNode(next)) {
+                domUtils.remove(next);
+              }
+            }
+
+            break;
+        }
+      }
+    }
+  },
+  queryCommandValue: function() {
+    var range = this.selection.getRange(),
+      startNode,
+      floatStyle;
+    if (range.collapsed) {
+      return "none";
+    }
+    startNode = range.getClosedNode();
+    if (startNode && startNode.nodeType == 1 && startNode.tagName == "IMG") {
+      floatStyle =
+        domUtils.getComputedStyle(startNode, "float") ||
+        startNode.getAttribute("align");
+
+      if (floatStyle == "none") {
+        floatStyle = domUtils.getComputedStyle(
+          startNode.parentNode,
+          "text-align"
+        ) == "center"
+          ? "center"
+          : floatStyle;
+      }
+      return {
+        left: 1,
+        right: 1,
+        center: 1
+      }[floatStyle]
+        ? floatStyle
+        : "none";
+    }
+    return "none";
+  },
+  queryCommandState: function() {
+    var range = this.selection.getRange(),
+      startNode;
+
+    if (range.collapsed) return -1;
+
+    startNode = range.getClosedNode();
+    if (startNode && startNode.nodeType == 1 && startNode.tagName == "IMG") {
+      return 0;
+    }
+    return -1;
+  }
+};
+
+/**
+ * 插入图片
+ * @command insertimage
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { Object } opt 属性键值对，这些属性都将被复制到当前插入图片
+ * @remind 该命令第二个参数可接受一个图片配置项对象的数组，可以插入多张图片，
+ * 此时数组的每一个元素都是一个Object类型的图片属性集合。
+ * @example
+ * ```javascript
+ * editor.execCommand( 'insertimage', {
+ *     src:'a/b/c.jpg',
+ *     width:'100',
+ *     height:'100'
+ * } );
+ * ```
+ * @example
+ * ```javascript
+ * editor.execCommand( 'insertimage', [{
+ *     src:'a/b/c.jpg',
+ *     width:'100',
+ *     height:'100'
+ * },{
+ *     src:'a/b/d.jpg',
+ *     width:'100',
+ *     height:'100'
+ * }] );
+ * ```
+ */
+
+UE.commands["insertimage"] = {
+  execCommand: function(cmd, opt) {
+    opt = utils.isArray(opt) ? opt : [opt];
+    if (!opt.length) {
+      return;
+    }
+    var me = this,
+      range = me.selection.getRange(),
+      img = range.getClosedNode();
+
+    if (me.fireEvent("beforeinsertimage", opt) === true) {
+      return;
+    }
+
+    if (
+      img &&
+      /img/i.test(img.tagName) &&
+      (img.className != "edui-faked-video" ||
+        img.className.indexOf("edui-upload-video") != -1) &&
+      !img.getAttribute("data-word-image")
+    ) {
+      var first = opt.shift();
+      var floatStyle = first["floatStyle"];
+      delete first["floatStyle"];
+      ////                img.style.border = (first.border||0) +"px solid #000";
+      ////                img.style.margin = (first.margin||0) +"px";
+      //                img.style.cssText += ';margin:' + (first.margin||0) +"px;" + 'border:' + (first.border||0) +"px solid #000";
+      domUtils.setAttributes(img, first);
+      me.execCommand("imagefloat", floatStyle);
+      if (opt.length > 0) {
+        range.setStartAfter(img).setCursor(false, true);
+        me.execCommand("insertimage", opt);
+      }
+    } else {
+      var html = [],
+        str = "",
+        ci;
+      ci = opt[0];
+      if (opt.length == 1) {
+        str =
+          '<img src="' +
+          ci.src +
+          '" ' +
+          (ci._src ? ' _src="' + ci._src + '" ' : "") +
+          (ci.width ? 'width="' + ci.width + '" ' : "") +
+          (ci.height ? ' height="' + ci.height + '" ' : "") +
+          (ci["floatStyle"] == "left" || ci["floatStyle"] == "right"
+            ? ' style="float:' + ci["floatStyle"] + ';"'
+            : "") +
+          (ci.title && ci.title != "" ? ' title="' + ci.title + '"' : "") +
+          (ci.border && ci.border != "0" ? ' border="' + ci.border + '"' : "") +
+          (ci.alt && ci.alt != "" ? ' alt="' + ci.alt + '"' : "") +
+          (ci.hspace && ci.hspace != "0"
+            ? ' hspace = "' + ci.hspace + '"'
+            : "") +
+          (ci.vspace && ci.vspace != "0"
+            ? ' vspace = "' + ci.vspace + '"'
+            : "") +
+          "/>";
+        if (ci["floatStyle"] == "center") {
+          str = '<p style="text-align: center">' + str + "</p>";
+        }
+        html.push(str);
+      } else {
+        for (var i = 0; (ci = opt[i++]); ) {
+          str =
+            "<p " +
+            (ci["floatStyle"] == "center"
+              ? 'style="text-align: center" '
+              : "") +
+            '><img src="' +
+            ci.src +
+            '" ' +
+            (ci.width ? 'width="' + ci.width + '" ' : "") +
+            (ci._src ? ' _src="' + ci._src + '" ' : "") +
+            (ci.height ? ' height="' + ci.height + '" ' : "") +
+            ' style="' +
+            (ci["floatStyle"] && ci["floatStyle"] != "center"
+              ? "float:" + ci["floatStyle"] + ";"
+              : "") +
+            (ci.border || "") +
+            '" ' +
+            (ci.title ? ' title="' + ci.title + '"' : "") +
+            " /></p>";
+          html.push(str);
+        }
+      }
+
+      me.execCommand("insertHtml", html.join(""));
+    }
+
+    me.fireEvent("afterinsertimage", opt);
+  }
+};
+
+
+// plugins/justify.js
+/**
+ * 段落格式
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 段落对齐方式
+ * @command justify
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { String } align 对齐方式：left => 居左，right => 居右，center => 居中，justify => 两端对齐
+ * @example
+ * ```javascript
+ * editor.execCommand( 'justify', 'center' );
+ * ```
+ */
+/**
+ * 如果选区所在位置是段落区域，返回当前段落对齐方式
+ * @command justify
+ * @method queryCommandValue
+ * @param { String } cmd 命令字符串
+ * @return { String } 返回段落对齐方式
+ * @example
+ * ```javascript
+ * editor.queryCommandValue( 'justify' );
+ * ```
+ */
+
+UE.plugins["justify"] = function() {
+  var me = this,
+    block = domUtils.isBlockElm,
+    defaultValue = {
+      left: 1,
+      right: 1,
+      center: 1,
+      justify: 1
+    },
+    doJustify = function(range, style) {
+      var bookmark = range.createBookmark(),
+        filterFn = function(node) {
+          return node.nodeType == 1
+            ? node.tagName.toLowerCase() != "br" &&
+                !domUtils.isBookmarkNode(node)
+            : !domUtils.isWhitespace(node);
+        };
+
+      range.enlarge(true);
+      var bookmark2 = range.createBookmark(),
+        current = domUtils.getNextDomNode(bookmark2.start, false, filterFn),
+        tmpRange = range.cloneRange(),
+        tmpNode;
+      while (
+        current &&
+        !(
+          domUtils.getPosition(current, bookmark2.end) &
+          domUtils.POSITION_FOLLOWING
+        )
+      ) {
+        if (current.nodeType == 3 || !block(current)) {
+          tmpRange.setStartBefore(current);
+          while (current && current !== bookmark2.end && !block(current)) {
+            tmpNode = current;
+            current = domUtils.getNextDomNode(current, false, null, function(
+              node
+            ) {
+              return !block(node);
+            });
+          }
+          tmpRange.setEndAfter(tmpNode);
+          var common = tmpRange.getCommonAncestor();
+          if (!domUtils.isBody(common) && block(common)) {
+            domUtils.setStyles(
+              common,
+              utils.isString(style) ? { "text-align": style } : style
+            );
+            current = common;
+          } else {
+            var p = range.document.createElement("p");
+            domUtils.setStyles(
+              p,
+              utils.isString(style) ? { "text-align": style } : style
+            );
+            var frag = tmpRange.extractContents();
+            p.appendChild(frag);
+            tmpRange.insertNode(p);
+            current = p;
+          }
+          current = domUtils.getNextDomNode(current, false, filterFn);
+        } else {
+          current = domUtils.getNextDomNode(current, true, filterFn);
+        }
+      }
+      return range.moveToBookmark(bookmark2).moveToBookmark(bookmark);
+    };
+
+  UE.commands["justify"] = {
+    execCommand: function(cmdName, align) {
+      var range = this.selection.getRange(),
+        txt;
+
+      //闭合时单独处理
+      if (range.collapsed) {
+        txt = this.document.createTextNode("p");
+        range.insertNode(txt);
+      }
+      doJustify(range, align);
+      if (txt) {
+        range.setStartBefore(txt).collapse(true);
+        domUtils.remove(txt);
+      }
+
+      range.select();
+
+      return true;
+    },
+    queryCommandValue: function() {
+      var startNode = this.selection.getStart(),
+        value = domUtils.getComputedStyle(startNode, "text-align");
+      return defaultValue[value] ? value : "left";
+    },
+    queryCommandState: function() {
+      var start = this.selection.getStart(),
+        cell =
+          start &&
+          domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
+
+      return cell ? -1 : 0;
+    }
+  };
+};
+
+
+// plugins/font.js
+/**
+ * 字体颜色,背景色,字号,字体,下划线,删除线
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 字体颜色
+ * @command forecolor
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { String } value 色值(必须十六进制)
+ * @example
+ * ```javascript
+ * editor.execCommand( 'forecolor', '#000' );
+ * ```
+ */
+/**
+ * 返回选区字体颜色
+ * @command forecolor
+ * @method queryCommandValue
+ * @param { String } cmd 命令字符串
+ * @return { String } 返回字体颜色
+ * @example
+ * ```javascript
+ * editor.queryCommandValue( 'forecolor' );
+ * ```
+ */
+
+/**
+ * 字体背景颜色
+ * @command backcolor
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { String } value 色值(必须十六进制)
+ * @example
+ * ```javascript
+ * editor.execCommand( 'backcolor', '#000' );
+ * ```
+ */
+/**
+ * 返回选区字体颜色
+ * @command backcolor
+ * @method queryCommandValue
+ * @param { String } cmd 命令字符串
+ * @return { String } 返回字体背景颜色
+ * @example
+ * ```javascript
+ * editor.queryCommandValue( 'backcolor' );
+ * ```
+ */
+
+/**
+ * 字体大小
+ * @command fontsize
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { String } value 字体大小
+ * @example
+ * ```javascript
+ * editor.execCommand( 'fontsize', '14px' );
+ * ```
+ */
+/**
+ * 返回选区字体大小
+ * @command fontsize
+ * @method queryCommandValue
+ * @param { String } cmd 命令字符串
+ * @return { String } 返回字体大小
+ * @example
+ * ```javascript
+ * editor.queryCommandValue( 'fontsize' );
+ * ```
+ */
+
+/**
+ * 字体样式
+ * @command fontfamily
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { String } value 字体样式
+ * @example
+ * ```javascript
+ * editor.execCommand( 'fontfamily', '微软雅黑' );
+ * ```
+ */
+/**
+ * 返回选区字体样式
+ * @command fontfamily
+ * @method queryCommandValue
+ * @param { String } cmd 命令字符串
+ * @return { String } 返回字体样式
+ * @example
+ * ```javascript
+ * editor.queryCommandValue( 'fontfamily' );
+ * ```
+ */
+
+/**
+ * 字体下划线,与删除线互斥
+ * @command underline
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'underline' );
+ * ```
+ */
+
+/**
+ * 字体删除线,与下划线互斥
+ * @command strikethrough
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'strikethrough' );
+ * ```
+ */
+
+/**
+ * 字体边框
+ * @command fontborder
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'fontborder' );
+ * ```
+ */
+
+UE.plugins["font"] = function() {
+  var me = this,
+    fonts = {
+      forecolor: "color",
+      backcolor: "background-color",
+      fontsize: "font-size",
+      fontfamily: "font-family",
+      underline: "text-decoration",
+      strikethrough: "text-decoration",
+      fontborder: "border"
+    },
+    needCmd = { underline: 1, strikethrough: 1, fontborder: 1 },
+    needSetChild = {
+      forecolor: "color",
+      backcolor: "background-color",
+      fontsize: "font-size",
+      fontfamily: "font-family"
+    };
+  me.setOpt({
+    fontfamily: [
+      { name: "songti", val: "宋体,SimSun" },
+      { name: "yahei", val: "微软雅黑,Microsoft YaHei" },
+      { name: "kaiti", val: "楷体,楷体_GB2312, SimKai" },
+      { name: "heiti", val: "黑体, SimHei" },
+      { name: "lishu", val: "隶书, SimLi" },
+      { name: "andaleMono", val: "andale mono" },
+      { name: "arial", val: "arial, helvetica,sans-serif" },
+      { name: "arialBlack", val: "arial black,avant garde" },
+      { name: "comicSansMs", val: "comic sans ms" },
+      { name: "impact", val: "impact,chicago" },
+      { name: "timesNewRoman", val: "times new roman" }
+    ],
+    fontsize: [10, 11, 12, 14, 16, 18, 20, 24, 36]
+  });
+
+  function mergeWithParent(node) {
+    var parent;
+    while ((parent = node.parentNode)) {
+      if (
+        parent.tagName == "SPAN" &&
+        domUtils.getChildCount(parent, function(child) {
+          return !domUtils.isBookmarkNode(child) && !domUtils.isBr(child);
+        }) == 1
+      ) {
+        parent.style.cssText += node.style.cssText;
+        domUtils.remove(node, true);
+        node = parent;
+      } else {
+        break;
+      }
+    }
+  }
+  function mergeChild(rng, cmdName, value) {
+    if (needSetChild[cmdName]) {
+      rng.adjustmentBoundary();
+      if (!rng.collapsed && rng.startContainer.nodeType == 1) {
+        var start = rng.startContainer.childNodes[rng.startOffset];
+        if (start && domUtils.isTagNode(start, "span")) {
+          var bk = rng.createBookmark();
+          utils.each(domUtils.getElementsByTagName(start, "span"), function(
+            span
+          ) {
+            if (!span.parentNode || domUtils.isBookmarkNode(span)) return;
+            if (
+              cmdName == "backcolor" &&
+              domUtils
+                .getComputedStyle(span, "background-color")
+                .toLowerCase() === value
+            ) {
+              return;
+            }
+            domUtils.removeStyle(span, needSetChild[cmdName]);
+            if (span.style.cssText.replace(/^\s+$/, "").length == 0) {
+              domUtils.remove(span, true);
+            }
+          });
+          rng.moveToBookmark(bk);
+        }
+      }
+    }
+  }
+  function mergesibling(rng, cmdName, value) {
+    var collapsed = rng.collapsed,
+      bk = rng.createBookmark(),
+      common;
+    if (collapsed) {
+      common = bk.start.parentNode;
+      while (dtd.$inline[common.tagName]) {
+        common = common.parentNode;
+      }
+    } else {
+      common = domUtils.getCommonAncestor(bk.start, bk.end);
+    }
+    utils.each(domUtils.getElementsByTagName(common, "span"), function(span) {
+      if (!span.parentNode || domUtils.isBookmarkNode(span)) return;
+      if (/\s*border\s*:\s*none;?\s*/i.test(span.style.cssText)) {
+        if (/^\s*border\s*:\s*none;?\s*$/.test(span.style.cssText)) {
+          domUtils.remove(span, true);
+        } else {
+          domUtils.removeStyle(span, "border");
+        }
+        return;
+      }
+      if (
+        /border/i.test(span.style.cssText) &&
+        span.parentNode.tagName == "SPAN" &&
+        /border/i.test(span.parentNode.style.cssText)
+      ) {
+        span.style.cssText = span.style.cssText.replace(
+          /border[^:]*:[^;]+;?/gi,
+          ""
+        );
+      }
+      if (!(cmdName == "fontborder" && value == "none")) {
+        var next = span.nextSibling;
+        while (next && next.nodeType == 1 && next.tagName == "SPAN") {
+          if (domUtils.isBookmarkNode(next) && cmdName == "fontborder") {
+            span.appendChild(next);
+            next = span.nextSibling;
+            continue;
+          }
+          if (next.style.cssText == span.style.cssText) {
+            domUtils.moveChild(next, span);
+            domUtils.remove(next);
+          }
+          if (span.nextSibling === next) break;
+          next = span.nextSibling;
+        }
+      }
+
+      mergeWithParent(span);
+      if (browser.ie && browser.version > 8) {
+        //拷贝父亲们的特别的属性,这里只做背景颜色的处理
+        var parent = domUtils.findParent(span, function(n) {
+          return (
+            n.tagName == "SPAN" && /background-color/.test(n.style.cssText)
+          );
+        });
+        if (parent && !/background-color/.test(span.style.cssText)) {
+          span.style.backgroundColor = parent.style.backgroundColor;
+        }
+      }
+    });
+    rng.moveToBookmark(bk);
+    mergeChild(rng, cmdName, value);
+  }
+
+  me.addInputRule(function(root) {
+    utils.each(root.getNodesByTagName("u s del font strike"), function(node) {
+      if (node.tagName == "font") {
+        var cssStyle = [];
+        for (var p in node.attrs) {
+          switch (p) {
+            case "size":
+              cssStyle.push(
+                "font-size:" +
+                  ({
+                    "1": "10",
+                    "2": "12",
+                    "3": "16",
+                    "4": "18",
+                    "5": "24",
+                    "6": "32",
+                    "7": "48"
+                  }[node.attrs[p]] || node.attrs[p]) +
+                  "px"
+              );
+              break;
+            case "color":
+              cssStyle.push("color:" + node.attrs[p]);
+              break;
+            case "face":
+              cssStyle.push("font-family:" + node.attrs[p]);
+              break;
+            case "style":
+              cssStyle.push(node.attrs[p]);
+          }
+        }
+        node.attrs = {
+          style: cssStyle.join(";")
+        };
+      } else {
+        var val = node.tagName == "u" ? "underline" : "line-through";
+        node.attrs = {
+          style: (node.getAttr("style") || "") + "text-decoration:" + val + ";"
+        };
+      }
+      node.tagName = "span";
+    });
+    //        utils.each(root.getNodesByTagName('span'), function (node) {
+    //            var val;
+    //            if(val = node.getAttr('class')){
+    //                if(/fontstrikethrough/.test(val)){
+    //                    node.setStyle('text-decoration','line-through');
+    //                    if(node.attrs['class']){
+    //                        node.attrs['class'] = node.attrs['class'].replace(/fontstrikethrough/,'');
+    //                    }else{
+    //                        node.setAttr('class')
+    //                    }
+    //                }
+    //                if(/fontborder/.test(val)){
+    //                    node.setStyle('border','1px solid #000');
+    //                    if(node.attrs['class']){
+    //                        node.attrs['class'] = node.attrs['class'].replace(/fontborder/,'');
+    //                    }else{
+    //                        node.setAttr('class')
+    //                    }
+    //                }
+    //            }
+    //        });
+  });
+  //    me.addOutputRule(function(root){
+  //        utils.each(root.getNodesByTagName('span'), function (node) {
+  //            var val;
+  //            if(val = node.getStyle('text-decoration')){
+  //                if(/line-through/.test(val)){
+  //                    if(node.attrs['class']){
+  //                        node.attrs['class'] += ' fontstrikethrough';
+  //                    }else{
+  //                        node.setAttr('class','fontstrikethrough')
+  //                    }
+  //                }
+  //
+  //                node.setStyle('text-decoration')
+  //            }
+  //            if(val = node.getStyle('border')){
+  //                if(/1px/.test(val) && /solid/.test(val)){
+  //                    if(node.attrs['class']){
+  //                        node.attrs['class'] += ' fontborder';
+  //
+  //                    }else{
+  //                        node.setAttr('class','fontborder')
+  //                    }
+  //                }
+  //                node.setStyle('border')
+  //
+  //            }
+  //        });
+  //    });
+  for (var p in fonts) {
+    (function(cmd, style) {
+      UE.commands[cmd] = {
+        execCommand: function(cmdName, value) {
+          value =
+            value ||
+            (this.queryCommandState(cmdName)
+              ? "none"
+              : cmdName == "underline"
+                ? "underline"
+                : cmdName == "fontborder" ? "1px solid #000" : "line-through");
+          var me = this,
+            range = this.selection.getRange(),
+            text;
+
+          if (value == "default") {
+            if (range.collapsed) {
+              text = me.document.createTextNode("font");
+              range.insertNode(text).select();
+            }
+            me.execCommand("removeFormat", "span,a", style);
+            if (text) {
+              range.setStartBefore(text).collapse(true);
+              domUtils.remove(text);
+            }
+            mergesibling(range, cmdName, value);
+            range.select();
+          } else {
+            if (!range.collapsed) {
+              if (needCmd[cmd] && me.queryCommandValue(cmd)) {
+                me.execCommand("removeFormat", "span,a", style);
+              }
+              range = me.selection.getRange();
+
+              range.applyInlineStyle("span", { style: style + ":" + value });
+              mergesibling(range, cmdName, value);
+              range.select();
+            } else {
+              var span = domUtils.findParentByTagName(
+                range.startContainer,
+                "span",
+                true
+              );
+              text = me.document.createTextNode("font");
+              if (
+                span &&
+                !span.children.length &&
+                !span[browser.ie ? "innerText" : "textContent"].replace(
+                  fillCharReg,
+                  ""
+                ).length
+              ) {
+                //for ie hack when enter
+                range.insertNode(text);
+                if (needCmd[cmd]) {
+                  range.selectNode(text).select();
+                  me.execCommand("removeFormat", "span,a", style, null);
+
+                  span = domUtils.findParentByTagName(text, "span", true);
+                  range.setStartBefore(text);
+                }
+                span && (span.style.cssText += ";" + style + ":" + value);
+                range.collapse(true).select();
+              } else {
+                range.insertNode(text);
+                range.selectNode(text).select();
+                span = range.document.createElement("span");
+
+                if (needCmd[cmd]) {
+                  //a标签内的不处理跳过
+                  if (domUtils.findParentByTagName(text, "a", true)) {
+                    range.setStartBefore(text).setCursor();
+                    domUtils.remove(text);
+                    return;
+                  }
+                  me.execCommand("removeFormat", "span,a", style);
+                }
+
+                span.style.cssText = style + ":" + value;
+
+                text.parentNode.insertBefore(span, text);
+                //修复，span套span 但样式不继承的问题
+                if (!browser.ie || (browser.ie && browser.version == 9)) {
+                  var spanParent = span.parentNode;
+                  while (!domUtils.isBlockElm(spanParent)) {
+                    if (spanParent.tagName == "SPAN") {
+                      //opera合并style不会加入";"
+                      span.style.cssText =
+                        spanParent.style.cssText + ";" + span.style.cssText;
+                    }
+                    spanParent = spanParent.parentNode;
+                  }
+                }
+
+                if (opera) {
+                  setTimeout(function() {
+                    range.setStart(span, 0).collapse(true);
+                    mergesibling(range, cmdName, value);
+                    range.select();
+                  });
+                } else {
+                  range.setStart(span, 0).collapse(true);
+                  mergesibling(range, cmdName, value);
+                  range.select();
+                }
+
+                //trace:981
+                //domUtils.mergeToParent(span)
+              }
+              domUtils.remove(text);
+            }
+          }
+          return true;
+        },
+        queryCommandValue: function(cmdName) {
+          var startNode = this.selection.getStart();
+
+          //trace:946
+          if (cmdName == "underline" || cmdName == "strikethrough") {
+            var tmpNode = startNode,
+              value;
+            while (
+              tmpNode &&
+              !domUtils.isBlockElm(tmpNode) &&
+              !domUtils.isBody(tmpNode)
+            ) {
+              if (tmpNode.nodeType == 1) {
+                value = domUtils.getComputedStyle(tmpNode, style);
+                if (value != "none") {
+                  return value;
+                }
+              }
+
+              tmpNode = tmpNode.parentNode;
+            }
+            return "none";
+          }
+          if (cmdName == "fontborder") {
+            var tmp = startNode,
+              val;
+            while (tmp && dtd.$inline[tmp.tagName]) {
+              if ((val = domUtils.getComputedStyle(tmp, "border"))) {
+                if (/1px/.test(val) && /solid/.test(val)) {
+                  return val;
+                }
+              }
+              tmp = tmp.parentNode;
+            }
+            return "";
+          }
+
+          if (cmdName == "FontSize") {
+            var styleVal = domUtils.getComputedStyle(startNode, style),
+              tmp = /^([\d\.]+)(\w+)$/.exec(styleVal);
+
+            if (tmp) {
+              return Math.floor(tmp[1]) + tmp[2];
+            }
+
+            return styleVal;
+          }
+
+          return domUtils.getComputedStyle(startNode, style);
+        },
+        queryCommandState: function(cmdName) {
+          if (!needCmd[cmdName]) return 0;
+          var val = this.queryCommandValue(cmdName);
+          if (cmdName == "fontborder") {
+            return /1px/.test(val) && /solid/.test(val);
+          } else {
+            return cmdName == "underline"
+              ? /underline/.test(val)
+              : /line\-through/.test(val);
+          }
+        }
+      };
+    })(p, fonts[p]);
+  }
+};
+
+
+// plugins/link.js
+/**
+ * 超链接
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 插入超链接
+ * @command link
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { Object } options   设置自定义属性，例如：url、title、target
+ * @example
+ * ```javascript
+ * editor.execCommand( 'link', '{
+ *     url:'ueditor.baidu.com',
+ *     title:'ueditor',
+ *     target:'_blank'
+ * }' );
+ * ```
+ */
+/**
+ * 返回当前选中的第一个超链接节点
+ * @command link
+ * @method queryCommandValue
+ * @param { String } cmd 命令字符串
+ * @return { Element } 超链接节点
+ * @example
+ * ```javascript
+ * editor.queryCommandValue( 'link' );
+ * ```
+ */
+
+/**
+ * 取消超链接
+ * @command unlink
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'unlink');
+ * ```
+ */
+
+UE.plugins["link"] = function() {
+  function optimize(range) {
+    var start = range.startContainer,
+      end = range.endContainer;
+
+    if ((start = domUtils.findParentByTagName(start, "a", true))) {
+      range.setStartBefore(start);
+    }
+    if ((end = domUtils.findParentByTagName(end, "a", true))) {
+      range.setEndAfter(end);
+    }
+  }
+
+  UE.commands["unlink"] = {
+    execCommand: function() {
+      var range = this.selection.getRange(),
+        bookmark;
+      if (
+        range.collapsed &&
+        !domUtils.findParentByTagName(range.startContainer, "a", true)
+      ) {
+        return;
+      }
+      bookmark = range.createBookmark();
+      optimize(range);
+      range.removeInlineStyle("a").moveToBookmark(bookmark).select();
+    },
+    queryCommandState: function() {
+      return !this.highlight && this.queryCommandValue("link") ? 0 : -1;
+    }
+  };
+  function doLink(range, opt, me) {
+    var rngClone = range.cloneRange(),
+      link = me.queryCommandValue("link");
+    optimize((range = range.adjustmentBoundary()));
+    var start = range.startContainer;
+    if (start.nodeType == 1 && link) {
+      start = start.childNodes[range.startOffset];
+      if (
+        start &&
+        start.nodeType == 1 &&
+        start.tagName == "A" &&
+        /^(?:https?|ftp|file)\s*:\s*\/\//.test(
+          start[browser.ie ? "innerText" : "textContent"]
+        )
+      ) {
+        start[browser.ie ? "innerText" : "textContent"] = utils.html(
+          opt.textValue || opt.href
+        );
+      }
+    }
+    if (!rngClone.collapsed || link) {
+      range.removeInlineStyle("a");
+      rngClone = range.cloneRange();
+    }
+
+    if (rngClone.collapsed) {
+      var a = range.document.createElement("a"),
+        text = "";
+      if (opt.textValue) {
+        text = utils.html(opt.textValue);
+        delete opt.textValue;
+      } else {
+        text = utils.html(opt.href);
+      }
+      domUtils.setAttributes(a, opt);
+      start = domUtils.findParentByTagName(rngClone.startContainer, "a", true);
+      if (start && domUtils.isInNodeEndBoundary(rngClone, start)) {
+        range.setStartAfter(start).collapse(true);
+      }
+      a[browser.ie ? "innerText" : "textContent"] = text;
+      range.insertNode(a).selectNode(a);
+    } else {
+      range.applyInlineStyle("a", opt);
+    }
+  }
+  UE.commands["link"] = {
+    execCommand: function(cmdName, opt) {
+      var range;
+      opt._href && (opt._href = utils.unhtml(opt._href, /[<">]/g));
+      opt.href && (opt.href = utils.unhtml(opt.href, /[<">]/g));
+      opt.textValue && (opt.textValue = utils.unhtml(opt.textValue, /[<">]/g));
+      doLink((range = this.selection.getRange()), opt, this);
+      //闭合都不加占位符，如果加了会在a后边多个占位符节点，导致a是图片背景组成的列表，出现空白问题
+      range.collapse().select(true);
+    },
+    queryCommandValue: function() {
+      var range = this.selection.getRange(),
+        node;
+      if (range.collapsed) {
+        //                    node = this.selection.getStart();
+        //在ie下getstart()取值偏上了
+        node = range.startContainer;
+        node = node.nodeType == 1 ? node : node.parentNode;
+
+        if (
+          node &&
+          (node = domUtils.findParentByTagName(node, "a", true)) &&
+          !domUtils.isInNodeEndBoundary(range, node)
+        ) {
+          return node;
+        }
+      } else {
+        //trace:1111  如果是<p><a>xx</a></p> startContainer是p就会找不到a
+        range.shrinkBoundary();
+        var start = range.startContainer.nodeType == 3 ||
+          !range.startContainer.childNodes[range.startOffset]
+          ? range.startContainer
+          : range.startContainer.childNodes[range.startOffset],
+          end = range.endContainer.nodeType == 3 || range.endOffset == 0
+            ? range.endContainer
+            : range.endContainer.childNodes[range.endOffset - 1],
+          common = range.getCommonAncestor();
+        node = domUtils.findParentByTagName(common, "a", true);
+        if (!node && common.nodeType == 1) {
+          var as = common.getElementsByTagName("a"),
+            ps,
+            pe;
+
+          for (var i = 0, ci; (ci = as[i++]); ) {
+            (ps = domUtils.getPosition(ci, start)), (pe = domUtils.getPosition(
+              ci,
+              end
+            ));
+            if (
+              (ps & domUtils.POSITION_FOLLOWING ||
+                ps & domUtils.POSITION_CONTAINS) &&
+              (pe & domUtils.POSITION_PRECEDING ||
+                pe & domUtils.POSITION_CONTAINS)
+            ) {
+              node = ci;
+              break;
+            }
+          }
+        }
+        return node;
+      }
+    },
+    queryCommandState: function() {
+      //判断如果是视频的话连接不可用
+      //fix 853
+      var img = this.selection.getRange().getClosedNode(),
+        flag =
+          img &&
+          (img.className == "edui-faked-video" ||
+            img.className.indexOf("edui-upload-video") != -1);
+      return flag ? -1 : 0;
+    }
+  };
+};
+
+
+// plugins/iframe.js
+///import core
+///import plugins\inserthtml.js
+///commands 插入框架
+///commandsName  InsertFrame
+///commandsTitle  插入Iframe
+///commandsDialog  dialogs\insertframe
+
+UE.plugins["insertframe"] = function() {
+  var me = this;
+  function deleteIframe() {
+    me._iframe && delete me._iframe;
+  }
+
+  me.addListener("selectionchange", function() {
+    deleteIframe();
+  });
+};
+
+
+// plugins/scrawl.js
+///import core
+///commands 涂鸦
+///commandsName  Scrawl
+///commandsTitle  涂鸦
+///commandsDialog  dialogs\scrawl
+UE.commands["scrawl"] = {
+  queryCommandState: function() {
+    return browser.ie && browser.version <= 8 ? -1 : 0;
+  }
+};
+
+
+// plugins/removeformat.js
+/**
+ * 清除格式
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 清除文字样式
+ * @command removeformat
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param   {String}   tags     以逗号隔开的标签。如：strong
+ * @param   {String}   style    样式如：color
+ * @param   {String}   attrs    属性如:width
+ * @example
+ * ```javascript
+ * editor.execCommand( 'removeformat', 'strong','color','width' );
+ * ```
+ */
+
+UE.plugins["removeformat"] = function() {
+  var me = this;
+  me.setOpt({
+    removeFormatTags:
+      "b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var",
+    removeFormatAttributes: "class,style,lang,width,height,align,hspace,valign"
+  });
+  me.commands["removeformat"] = {
+    execCommand: function(cmdName, tags, style, attrs, notIncludeA) {
+      var tagReg = new RegExp(
+        "^(?:" +
+          (tags || this.options.removeFormatTags).replace(/,/g, "|") +
+          ")$",
+        "i"
+      ),
+        removeFormatAttributes = style
+          ? []
+          : (attrs || this.options.removeFormatAttributes).split(","),
+        range = new dom.Range(this.document),
+        bookmark,
+        node,
+        parent,
+        filter = function(node) {
+          return node.nodeType == 1;
+        };
+
+      function isRedundantSpan(node) {
+        if (node.nodeType == 3 || node.tagName.toLowerCase() != "span") {
+          return 0;
+        }
+        if (browser.ie) {
+          //ie 下判断实效，所以只能简单用style来判断
+          //return node.style.cssText == '' ? 1 : 0;
+          var attrs = node.attributes;
+          if (attrs.length) {
+            for (var i = 0, l = attrs.length; i < l; i++) {
+              if (attrs[i].specified) {
+                return 0;
+              }
+            }
+            return 1;
+          }
+        }
+        return !node.attributes.length;
+      }
+      function doRemove(range) {
+        var bookmark1 = range.createBookmark();
+        if (range.collapsed) {
+          range.enlarge(true);
+        }
+
+        //不能把a标签切了
+        if (!notIncludeA) {
+          var aNode = domUtils.findParentByTagName(
+            range.startContainer,
+            "a",
+            true
+          );
+          if (aNode) {
+            range.setStartBefore(aNode);
+          }
+
+          aNode = domUtils.findParentByTagName(range.endContainer, "a", true);
+          if (aNode) {
+            range.setEndAfter(aNode);
+          }
+        }
+
+        bookmark = range.createBookmark();
+
+        node = bookmark.start;
+
+        //切开始
+        while ((parent = node.parentNode) && !domUtils.isBlockElm(parent)) {
+          domUtils.breakParent(node, parent);
+
+          domUtils.clearEmptySibling(node);
+        }
+        if (bookmark.end) {
+          //切结束
+          node = bookmark.end;
+          while ((parent = node.parentNode) && !domUtils.isBlockElm(parent)) {
+            domUtils.breakParent(node, parent);
+            domUtils.clearEmptySibling(node);
+          }
+
+          //开始去除样式
+          var current = domUtils.getNextDomNode(bookmark.start, false, filter),
+            next;
+          while (current) {
+            if (current == bookmark.end) {
+              break;
+            }
+
+            next = domUtils.getNextDomNode(current, true, filter);
+
+            if (
+              !dtd.$empty[current.tagName.toLowerCase()] &&
+              !domUtils.isBookmarkNode(current)
+            ) {
+              if (tagReg.test(current.tagName)) {
+                if (style) {
+                  domUtils.removeStyle(current, style);
+                  if (isRedundantSpan(current) && style != "text-decoration") {
+                    domUtils.remove(current, true);
+                  }
+                } else {
+                  domUtils.remove(current, true);
+                }
+              } else {
+                //trace:939  不能把list上的样式去掉
+                if (
+                  !dtd.$tableContent[current.tagName] &&
+                  !dtd.$list[current.tagName]
+                ) {
+                  domUtils.removeAttributes(current, removeFormatAttributes);
+                  if (isRedundantSpan(current)) {
+                    domUtils.remove(current, true);
+                  }
+                }
+              }
+            }
+            current = next;
+          }
+        }
+        //trace:1035
+        //trace:1096 不能把td上的样式去掉，比如边框
+        var pN = bookmark.start.parentNode;
+        if (
+          domUtils.isBlockElm(pN) &&
+          !dtd.$tableContent[pN.tagName] &&
+          !dtd.$list[pN.tagName]
+        ) {
+          domUtils.removeAttributes(pN, removeFormatAttributes);
+        }
+        pN = bookmark.end.parentNode;
+        if (
+          bookmark.end &&
+          domUtils.isBlockElm(pN) &&
+          !dtd.$tableContent[pN.tagName] &&
+          !dtd.$list[pN.tagName]
+        ) {
+          domUtils.removeAttributes(pN, removeFormatAttributes);
+        }
+        range.moveToBookmark(bookmark).moveToBookmark(bookmark1);
+        //清除冗余的代码 <b><bookmark></b>
+        var node = range.startContainer,
+          tmp,
+          collapsed = range.collapsed;
+        while (
+          node.nodeType == 1 &&
+          domUtils.isEmptyNode(node) &&
+          dtd.$removeEmpty[node.tagName]
+        ) {
+          tmp = node.parentNode;
+          range.setStartBefore(node);
+          //trace:937
+          //更新结束边界
+          if (range.startContainer === range.endContainer) {
+            range.endOffset--;
+          }
+          domUtils.remove(node);
+          node = tmp;
+        }
+
+        if (!collapsed) {
+          node = range.endContainer;
+          while (
+            node.nodeType == 1 &&
+            domUtils.isEmptyNode(node) &&
+            dtd.$removeEmpty[node.tagName]
+          ) {
+            tmp = node.parentNode;
+            range.setEndBefore(node);
+            domUtils.remove(node);
+
+            node = tmp;
+          }
+        }
+      }
+
+      range = this.selection.getRange();
+      doRemove(range);
+      range.select();
+    }
+  };
+};
+
+
+// plugins/blockquote.js
+/**
+ * 添加引用
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 添加引用
+ * @command blockquote
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'blockquote' );
+ * ```
+ */
+
+/**
+ * 添加引用
+ * @command blockquote
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { Object } attrs 节点属性
+ * @example
+ * ```javascript
+ * editor.execCommand( 'blockquote',{
+ *     style: "color: red;"
+ * } );
+ * ```
+ */
+
+UE.plugins["blockquote"] = function() {
+  var me = this;
+  function getObj(editor) {
+    return domUtils.filterNodeList(
+      editor.selection.getStartElementPath(),
+      "blockquote"
+    );
+  }
+  me.commands["blockquote"] = {
+    execCommand: function(cmdName, attrs) {
+      var range = this.selection.getRange(),
+        obj = getObj(this),
+        blockquote = dtd.blockquote,
+        bookmark = range.createBookmark();
+
+      if (obj) {
+        var start = range.startContainer,
+          startBlock = domUtils.isBlockElm(start)
+            ? start
+            : domUtils.findParent(start, function(node) {
+                return domUtils.isBlockElm(node);
+              }),
+          end = range.endContainer,
+          endBlock = domUtils.isBlockElm(end)
+            ? end
+            : domUtils.findParent(end, function(node) {
+                return domUtils.isBlockElm(node);
+              });
+
+        //处理一下li
+        startBlock =
+          domUtils.findParentByTagName(startBlock, "li", true) || startBlock;
+        endBlock =
+          domUtils.findParentByTagName(endBlock, "li", true) || endBlock;
+
+        if (
+          startBlock.tagName == "LI" ||
+          startBlock.tagName == "TD" ||
+          startBlock === obj ||
+          domUtils.isBody(startBlock)
+        ) {
+          domUtils.remove(obj, true);
+        } else {
+          domUtils.breakParent(startBlock, obj);
+        }
+
+        if (startBlock !== endBlock) {
+          obj = domUtils.findParentByTagName(endBlock, "blockquote");
+          if (obj) {
+            if (
+              endBlock.tagName == "LI" ||
+              endBlock.tagName == "TD" ||
+              domUtils.isBody(endBlock)
+            ) {
+              obj.parentNode && domUtils.remove(obj, true);
+            } else {
+              domUtils.breakParent(endBlock, obj);
+            }
+          }
+        }
+
+        var blockquotes = domUtils.getElementsByTagName(
+          this.document,
+          "blockquote"
+        );
+        for (var i = 0, bi; (bi = blockquotes[i++]); ) {
+          if (!bi.childNodes.length) {
+            domUtils.remove(bi);
+          } else if (
+            domUtils.getPosition(bi, startBlock) &
+              domUtils.POSITION_FOLLOWING &&
+            domUtils.getPosition(bi, endBlock) & domUtils.POSITION_PRECEDING
+          ) {
+            domUtils.remove(bi, true);
+          }
+        }
+      } else {
+        var tmpRange = range.cloneRange(),
+          node = tmpRange.startContainer.nodeType == 1
+            ? tmpRange.startContainer
+            : tmpRange.startContainer.parentNode,
+          preNode = node,
+          doEnd = 1;
+
+        //调整开始
+        while (1) {
+          if (domUtils.isBody(node)) {
+            if (preNode !== node) {
+              if (range.collapsed) {
+                tmpRange.selectNode(preNode);
+                doEnd = 0;
+              } else {
+                tmpRange.setStartBefore(preNode);
+              }
+            } else {
+              tmpRange.setStart(node, 0);
+            }
+
+            break;
+          }
+          if (!blockquote[node.tagName]) {
+            if (range.collapsed) {
+              tmpRange.selectNode(preNode);
+            } else {
+              tmpRange.setStartBefore(preNode);
+            }
+            break;
+          }
+
+          preNode = node;
+          node = node.parentNode;
+        }
+
+        //调整结束
+        if (doEnd) {
+          preNode = node = node = tmpRange.endContainer.nodeType == 1
+            ? tmpRange.endContainer
+            : tmpRange.endContainer.parentNode;
+          while (1) {
+            if (domUtils.isBody(node)) {
+              if (preNode !== node) {
+                tmpRange.setEndAfter(preNode);
+              } else {
+                tmpRange.setEnd(node, node.childNodes.length);
+              }
+
+              break;
+            }
+            if (!blockquote[node.tagName]) {
+              tmpRange.setEndAfter(preNode);
+              break;
+            }
+
+            preNode = node;
+            node = node.parentNode;
+          }
+        }
+
+        node = range.document.createElement("blockquote");
+        domUtils.setAttributes(node, attrs);
+        node.appendChild(tmpRange.extractContents());
+        tmpRange.insertNode(node);
+        //去除重复的
+        var childs = domUtils.getElementsByTagName(node, "blockquote");
+        for (var i = 0, ci; (ci = childs[i++]); ) {
+          if (ci.parentNode) {
+            domUtils.remove(ci, true);
+          }
+        }
+      }
+      range.moveToBookmark(bookmark).select();
+    },
+    queryCommandState: function() {
+      return getObj(this) ? 1 : 0;
+    }
+  };
+};
+
+
+// plugins/convertcase.js
+/**
+ * 大小写转换
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 把选区内文本变大写，与“tolowercase”命令互斥
+ * @command touppercase
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'touppercase' );
+ * ```
+ */
+
+/**
+ * 把选区内文本变小写，与“touppercase”命令互斥
+ * @command tolowercase
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'tolowercase' );
+ * ```
+ */
+UE.commands["touppercase"] = UE.commands["tolowercase"] = {
+  execCommand: function(cmd) {
+    var me = this;
+    var rng = me.selection.getRange();
+    if (rng.collapsed) {
+      return rng;
+    }
+    var bk = rng.createBookmark(),
+      bkEnd = bk.end,
+      filterFn = function(node) {
+        return !domUtils.isBr(node) && !domUtils.isWhitespace(node);
+      },
+      curNode = domUtils.getNextDomNode(bk.start, false, filterFn);
+    while (
+      curNode &&
+      domUtils.getPosition(curNode, bkEnd) & domUtils.POSITION_PRECEDING
+    ) {
+      if (curNode.nodeType == 3) {
+        curNode.nodeValue = curNode.nodeValue[
+          cmd == "touppercase" ? "toUpperCase" : "toLowerCase"
+        ]();
+      }
+      curNode = domUtils.getNextDomNode(curNode, true, filterFn);
+      if (curNode === bkEnd) {
+        break;
+      }
+    }
+    rng.moveToBookmark(bk).select();
+  }
+};
+
+
+// plugins/indent.js
+/**
+ * 首行缩进
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 缩进
+ * @command indent
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'indent' );
+ * ```
+ */
+UE.commands["indent"] = {
+  execCommand: function() {
+    var me = this,
+      value = me.queryCommandState("indent")
+        ? "0em"
+        : me.options.indentValue || "2em";
+    me.execCommand("Paragraph", "p", { style: "text-indent:" + value });
+  },
+  queryCommandState: function() {
+    var pN = domUtils.filterNodeList(
+      this.selection.getStartElementPath(),
+      "p h1 h2 h3 h4 h5 h6"
+    );
+    return pN && pN.style.textIndent && parseInt(pN.style.textIndent) ? 1 : 0;
+  }
+};
+
+
+// plugins/print.js
+/**
+ * 打印
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 打印
+ * @command print
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'print' );
+ * ```
+ */
+UE.commands["print"] = {
+  execCommand: function() {
+    this.window.print();
+  },
+  notNeedUndo: 1
+};
+
+
+// plugins/preview.js
+/**
+ * 预览
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 预览
+ * @command preview
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'preview' );
+ * ```
+ */
+UE.commands["preview"] = {
+  execCommand: function() {
+    var w = window.open("", "_blank", ""),
+      d = w.document;
+    d.open();
+    d.write(
+      '<!DOCTYPE html><html><head><meta charset="utf-8"/><script src="' +
+        this.options.UEDITOR_HOME_URL +
+        'ueditor.parse.js"></script><script>' +
+        "setTimeout(function(){uParse('div',{rootPath: '" +
+        this.options.UEDITOR_HOME_URL +
+        "'})},300)" +
+        "</script></head><body><div>" +
+        this.getContent(null, null, true) +
+        "</div></body></html>"
+    );
+    d.close();
+  },
+  notNeedUndo: 1
+};
+
+
+// plugins/selectall.js
+/**
+ * 全选
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 选中所有内容
+ * @command selectall
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'selectall' );
+ * ```
+ */
+UE.plugins["selectall"] = function() {
+  var me = this;
+  me.commands["selectall"] = {
+    execCommand: function() {
+      //去掉了原生的selectAll,因为会出现报错和当内容为空时，不能出现闭合状态的光标
+      var me = this,
+        body = me.body,
+        range = me.selection.getRange();
+      range.selectNodeContents(body);
+      if (domUtils.isEmptyBlock(body)) {
+        //opera不能自动合并到元素的里边，要手动处理一下
+        if (browser.opera && body.firstChild && body.firstChild.nodeType == 1) {
+          range.setStartAtFirst(body.firstChild);
+        }
+        range.collapse(true);
+      }
+      range.select(true);
+    },
+    notNeedUndo: 1
+  };
+
+  //快捷键
+  me.addshortcutkey({
+    selectAll: "ctrl+65"
+  });
+};
+
+
+// plugins/paragraph.js
+/**
+ * 段落样式
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 段落格式
+ * @command paragraph
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param {String}   style               标签值为：'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
+ * @param {Object}   attrs               标签的属性
+ * @example
+ * ```javascript
+ * editor.execCommand( 'Paragraph','h1','{
+ *     class:'test'
+ * }' );
+ * ```
+ */
+
+/**
+ * 返回选区内节点标签名
+ * @command paragraph
+ * @method queryCommandValue
+ * @param { String } cmd 命令字符串
+ * @return { String } 节点标签名
+ * @example
+ * ```javascript
+ * editor.queryCommandValue( 'Paragraph' );
+ * ```
+ */
+
+UE.plugins["paragraph"] = function() {
+  var me = this,
+    block = domUtils.isBlockElm,
+    notExchange = ["TD", "LI", "PRE"],
+    doParagraph = function(range, style, attrs, sourceCmdName) {
+      var bookmark = range.createBookmark(),
+        filterFn = function(node) {
+          return node.nodeType == 1
+            ? node.tagName.toLowerCase() != "br" &&
+                !domUtils.isBookmarkNode(node)
+            : !domUtils.isWhitespace(node);
+        },
+        para;
+
+      range.enlarge(true);
+      var bookmark2 = range.createBookmark(),
+        current = domUtils.getNextDomNode(bookmark2.start, false, filterFn),
+        tmpRange = range.cloneRange(),
+        tmpNode;
+      while (
+        current &&
+        !(
+          domUtils.getPosition(current, bookmark2.end) &
+          domUtils.POSITION_FOLLOWING
+        )
+      ) {
+        if (current.nodeType == 3 || !block(current)) {
+          tmpRange.setStartBefore(current);
+          while (current && current !== bookmark2.end && !block(current)) {
+            tmpNode = current;
+            current = domUtils.getNextDomNode(current, false, null, function(
+              node
+            ) {
+              return !block(node);
+            });
+          }
+          tmpRange.setEndAfter(tmpNode);
+
+          para = range.document.createElement(style);
+          if (attrs) {
+            domUtils.setAttributes(para, attrs);
+            if (
+              sourceCmdName &&
+              sourceCmdName == "customstyle" &&
+              attrs.style
+            ) {
+              para.style.cssText = attrs.style;
+            }
+          }
+          para.appendChild(tmpRange.extractContents());
+          //需要内容占位
+          if (domUtils.isEmptyNode(para)) {
+            domUtils.fillChar(range.document, para);
+          }
+
+          tmpRange.insertNode(para);
+
+          var parent = para.parentNode;
+          //如果para上一级是一个block元素且不是body,td就删除它
+          if (
+            block(parent) &&
+            !domUtils.isBody(para.parentNode) &&
+            utils.indexOf(notExchange, parent.tagName) == -1
+          ) {
+            //存储dir,style
+            if (!(sourceCmdName && sourceCmdName == "customstyle")) {
+              parent.getAttribute("dir") &&
+                para.setAttribute("dir", parent.getAttribute("dir"));
+              //trace:1070
+              parent.style.cssText &&
+                (para.style.cssText =
+                  parent.style.cssText + ";" + para.style.cssText);
+              //trace:1030
+              parent.style.textAlign &&
+                !para.style.textAlign &&
+                (para.style.textAlign = parent.style.textAlign);
+              parent.style.textIndent &&
+                !para.style.textIndent &&
+                (para.style.textIndent = parent.style.textIndent);
+              parent.style.padding &&
+                !para.style.padding &&
+                (para.style.padding = parent.style.padding);
+            }
+
+            //trace:1706 选择的就是h1-6要删除
+            if (
+              attrs &&
+              /h\d/i.test(parent.tagName) &&
+              !/h\d/i.test(para.tagName)
+            ) {
+              domUtils.setAttributes(parent, attrs);
+              if (
+                sourceCmdName &&
+                sourceCmdName == "customstyle" &&
+                attrs.style
+              ) {
+                parent.style.cssText = attrs.style;
+              }
+              domUtils.remove(para.parentNode, true);
+              para = parent;
+            } else {
+              domUtils.remove(para.parentNode, true);
+            }
+          }
+          if (utils.indexOf(notExchange, parent.tagName) != -1) {
+            current = parent;
+          } else {
+            current = para;
+          }
+
+          current = domUtils.getNextDomNode(current, false, filterFn);
+        } else {
+          current = domUtils.getNextDomNode(current, true, filterFn);
+        }
+      }
+      return range.moveToBookmark(bookmark2).moveToBookmark(bookmark);
+    };
+  me.setOpt("paragraph", {
+    p: "",
+    h1: "",
+    h2: "",
+    h3: "",
+    h4: "",
+    h5: "",
+    h6: ""
+  });
+  me.commands["paragraph"] = {
+    execCommand: function(cmdName, style, attrs, sourceCmdName) {
+      var range = this.selection.getRange();
+      //闭合时单独处理
+      if (range.collapsed) {
+        var txt = this.document.createTextNode("p");
+        range.insertNode(txt);
+        //去掉冗余的fillchar
+        if (browser.ie) {
+          var node = txt.previousSibling;
+          if (node && domUtils.isWhitespace(node)) {
+            domUtils.remove(node);
+          }
+          node = txt.nextSibling;
+          if (node && domUtils.isWhitespace(node)) {
+            domUtils.remove(node);
+          }
+        }
+      }
+      range = doParagraph(range, style, attrs, sourceCmdName);
+      if (txt) {
+        range.setStartBefore(txt).collapse(true);
+        pN = txt.parentNode;
+
+        domUtils.remove(txt);
+
+        if (domUtils.isBlockElm(pN) && domUtils.isEmptyNode(pN)) {
+          domUtils.fillNode(this.document, pN);
+        }
+      }
+
+      if (
+        browser.gecko &&
+        range.collapsed &&
+        range.startContainer.nodeType == 1
+      ) {
+        var child = range.startContainer.childNodes[range.startOffset];
+        if (
+          child &&
+          child.nodeType == 1 &&
+          child.tagName.toLowerCase() == style
+        ) {
+          range.setStart(child, 0).collapse(true);
+        }
+      }
+      //trace:1097 原来有true，原因忘了，但去了就不能清除多余的占位符了
+      range.select();
+
+      return true;
+    },
+    queryCommandValue: function() {
+      var node = domUtils.filterNodeList(
+        this.selection.getStartElementPath(),
+        "p h1 h2 h3 h4 h5 h6"
+      );
+      return node ? node.tagName.toLowerCase() : "";
+    }
+  };
+};
+
+
+// plugins/directionality.js
+/**
+ * 设置文字输入的方向的插件
+ * @file
+ * @since 1.2.6.1
+ */
+(function() {
+  var block = domUtils.isBlockElm,
+    getObj = function(editor) {
+      //            var startNode = editor.selection.getStart(),
+      //                parents;
+      //            if ( startNode ) {
+      //                //查找所有的是block的父亲节点
+      //                parents = domUtils.findParents( startNode, true, block, true );
+      //                for ( var i = 0,ci; ci = parents[i++]; ) {
+      //                    if ( ci.getAttribute( 'dir' ) ) {
+      //                        return ci;
+      //                    }
+      //                }
+      //            }
+      return domUtils.filterNodeList(
+        editor.selection.getStartElementPath(),
+        function(n) {
+          return n && n.nodeType == 1 && n.getAttribute("dir");
+        }
+      );
+    },
+    doDirectionality = function(range, editor, forward) {
+      var bookmark,
+        filterFn = function(node) {
+          return node.nodeType == 1
+            ? !domUtils.isBookmarkNode(node)
+            : !domUtils.isWhitespace(node);
+        },
+        obj = getObj(editor);
+
+      if (obj && range.collapsed) {
+        obj.setAttribute("dir", forward);
+        return range;
+      }
+      bookmark = range.createBookmark();
+      range.enlarge(true);
+      var bookmark2 = range.createBookmark(),
+        current = domUtils.getNextDomNode(bookmark2.start, false, filterFn),
+        tmpRange = range.cloneRange(),
+        tmpNode;
+      while (
+        current &&
+        !(
+          domUtils.getPosition(current, bookmark2.end) &
+          domUtils.POSITION_FOLLOWING
+        )
+      ) {
+        if (current.nodeType == 3 || !block(current)) {
+          tmpRange.setStartBefore(current);
+          while (current && current !== bookmark2.end && !block(current)) {
+            tmpNode = current;
+            current = domUtils.getNextDomNode(current, false, null, function(
+              node
+            ) {
+              return !block(node);
+            });
+          }
+          tmpRange.setEndAfter(tmpNode);
+          var common = tmpRange.getCommonAncestor();
+          if (!domUtils.isBody(common) && block(common)) {
+            //遍历到了block节点
+            common.setAttribute("dir", forward);
+            current = common;
+          } else {
+            //没有遍历到，添加一个block节点
+            var p = range.document.createElement("p");
+            p.setAttribute("dir", forward);
+            var frag = tmpRange.extractContents();
+            p.appendChild(frag);
+            tmpRange.insertNode(p);
+            current = p;
+          }
+
+          current = domUtils.getNextDomNode(current, false, filterFn);
+        } else {
+          current = domUtils.getNextDomNode(current, true, filterFn);
+        }
+      }
+      return range.moveToBookmark(bookmark2).moveToBookmark(bookmark);
+    };
+
+  /**
+     * 文字输入方向
+     * @command directionality
+     * @method execCommand
+     * @param { String } cmdName 命令字符串
+     * @param { String } forward 传入'ltr'表示从左向右输入，传入'rtl'表示从右向左输入
+     * @example
+     * ```javascript
+     * editor.execCommand( 'directionality', 'ltr');
+     * ```
+     */
+
+  /**
+     * 查询当前选区的文字输入方向
+     * @command directionality
+     * @method queryCommandValue
+     * @param { String } cmdName 命令字符串
+     * @return { String } 返回'ltr'表示从左向右输入，返回'rtl'表示从右向左输入
+     * @example
+     * ```javascript
+     * editor.queryCommandValue( 'directionality');
+     * ```
+     */
+  UE.commands["directionality"] = {
+    execCommand: function(cmdName, forward) {
+      var range = this.selection.getRange();
+      //闭合时单独处理
+      if (range.collapsed) {
+        var txt = this.document.createTextNode("d");
+        range.insertNode(txt);
+      }
+      doDirectionality(range, this, forward);
+      if (txt) {
+        range.setStartBefore(txt).collapse(true);
+        domUtils.remove(txt);
+      }
+
+      range.select();
+      return true;
+    },
+    queryCommandValue: function() {
+      var node = getObj(this);
+      return node ? node.getAttribute("dir") : "ltr";
+    }
+  };
+})();
+
+
+// plugins/horizontal.js
+/**
+ * 插入分割线插件
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 插入分割线
+ * @command horizontal
+ * @method execCommand
+ * @param { String } cmdName 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'horizontal' );
+ * ```
+ */
+UE.plugins["horizontal"] = function() {
+  var me = this;
+  me.commands["horizontal"] = {
+    execCommand: function(cmdName) {
+      var me = this;
+      if (me.queryCommandState(cmdName) !== -1) {
+        me.execCommand("insertHtml", "<hr>");
+        var range = me.selection.getRange(),
+          start = range.startContainer;
+        if (start.nodeType == 1 && !start.childNodes[range.startOffset]) {
+          var tmp;
+          if ((tmp = start.childNodes[range.startOffset - 1])) {
+            if (tmp.nodeType == 1 && tmp.tagName == "HR") {
+              if (me.options.enterTag == "p") {
+                tmp = me.document.createElement("p");
+                range.insertNode(tmp);
+                range.setStart(tmp, 0).setCursor();
+              } else {
+                tmp = me.document.createElement("br");
+                range.insertNode(tmp);
+                range.setStartBefore(tmp).setCursor();
+              }
+            }
+          }
+        }
+        return true;
+      }
+    },
+    //边界在table里不能加分隔线
+    queryCommandState: function() {
+      return domUtils.filterNodeList(
+        this.selection.getStartElementPath(),
+        "table"
+      )
+        ? -1
+        : 0;
+    }
+  };
+  //    me.addListener('delkeyup',function(){
+  //        var rng = this.selection.getRange();
+  //        if(browser.ie && browser.version > 8){
+  //            rng.txtToElmBoundary(true);
+  //            if(domUtils.isStartInblock(rng)){
+  //                var tmpNode = rng.startContainer;
+  //                var pre = tmpNode.previousSibling;
+  //                if(pre && domUtils.isTagNode(pre,'hr')){
+  //                    domUtils.remove(pre);
+  //                    rng.select();
+  //                    return;
+  //                }
+  //            }
+  //        }
+  //        if(domUtils.isBody(rng.startContainer)){
+  //            var hr = rng.startContainer.childNodes[rng.startOffset -1];
+  //            if(hr && hr.nodeName == 'HR'){
+  //                var next = hr.nextSibling;
+  //                if(next){
+  //                    rng.setStart(next,0)
+  //                }else if(hr.previousSibling){
+  //                    rng.setStartAtLast(hr.previousSibling)
+  //                }else{
+  //                    var p = this.document.createElement('p');
+  //                    hr.parentNode.insertBefore(p,hr);
+  //                    domUtils.fillNode(this.document,p);
+  //                    rng.setStart(p,0);
+  //                }
+  //                domUtils.remove(hr);
+  //                rng.setCursor(false,true);
+  //            }
+  //        }
+  //    })
+  me.addListener("delkeydown", function(name, evt) {
+    var rng = this.selection.getRange();
+    rng.txtToElmBoundary(true);
+    if (domUtils.isStartInblock(rng)) {
+      var tmpNode = rng.startContainer;
+      var pre = tmpNode.previousSibling;
+      if (pre && domUtils.isTagNode(pre, "hr")) {
+        domUtils.remove(pre);
+        rng.select();
+        domUtils.preventDefault(evt);
+        return true;
+      }
+    }
+  });
+};
+
+
+// plugins/time.js
+/**
+ * 插入时间和日期
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 插入时间，默认格式：12:59:59
+ * @command time
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'time');
+ * ```
+ */
+
+/**
+ * 插入日期，默认格式：2013-08-30
+ * @command date
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'date');
+ * ```
+ */
+UE.commands["time"] = UE.commands["date"] = {
+  execCommand: function(cmd, format) {
+    var date = new Date();
+
+    function formatTime(date, format) {
+      var hh = ("0" + date.getHours()).slice(-2),
+        ii = ("0" + date.getMinutes()).slice(-2),
+        ss = ("0" + date.getSeconds()).slice(-2);
+      format = format || "hh:ii:ss";
+      return format.replace(/hh/gi, hh).replace(/ii/gi, ii).replace(/ss/gi, ss);
+    }
+    function formatDate(date, format) {
+      var yyyy = ("000" + date.getFullYear()).slice(-4),
+        yy = yyyy.slice(-2),
+        mm = ("0" + (date.getMonth() + 1)).slice(-2),
+        dd = ("0" + date.getDate()).slice(-2);
+      format = format || "yyyy-mm-dd";
+      return format
+        .replace(/yyyy/gi, yyyy)
+        .replace(/yy/gi, yy)
+        .replace(/mm/gi, mm)
+        .replace(/dd/gi, dd);
+    }
+
+    this.execCommand(
+      "insertHtml",
+      cmd == "time" ? formatTime(date, format) : formatDate(date, format)
+    );
+  }
+};
+
+
+// plugins/rowspacing.js
+/**
+ * 段前段后间距插件
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 设置段间距
+ * @command rowspacing
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @param { String } value 段间距的值，以px为单位
+ * @param { String } dir 间距位置，top或bottom，分别表示段前和段后
+ * @example
+ * ```javascript
+ * editor.execCommand( 'rowspacing', '10', 'top' );
+ * ```
+ */
+
+UE.plugins["rowspacing"] = function() {
+  var me = this;
+  me.setOpt({
+    rowspacingtop: ["5", "10", "15", "20", "25"],
+    rowspacingbottom: ["5", "10", "15", "20", "25"]
+  });
+  me.commands["rowspacing"] = {
+    execCommand: function(cmdName, value, dir) {
+      this.execCommand("paragraph", "p", {
+        style: "margin-" + dir + ":" + value + "px"
+      });
+      return true;
+    },
+    queryCommandValue: function(cmdName, dir) {
+      var pN = domUtils.filterNodeList(
+        this.selection.getStartElementPath(),
+        function(node) {
+          return domUtils.isBlockElm(node);
+        }
+      ),
+        value;
+      //trace:1026
+      if (pN) {
+        value = domUtils
+          .getComputedStyle(pN, "margin-" + dir)
+          .replace(/[^\d]/g, "");
+        return !value ? 0 : value;
+      }
+      return 0;
+    }
+  };
+};
+
+
+// plugins/lineheight.js
+/**
+ * 设置行内间距
+ * @file
+ * @since 1.2.6.1
+ */
+UE.plugins["lineheight"] = function() {
+  var me = this;
+  me.setOpt({ lineheight: ["1", "1.5", "1.75", "2", "3", "4", "5"] });
+
+  /**
+     * 行距
+     * @command lineheight
+     * @method execCommand
+     * @param { String } cmdName 命令字符串
+     * @param { String } value 传入的行高值， 该值是当前字体的倍数， 例如： 1.5, 1.75
+     * @example
+     * ```javascript
+     * editor.execCommand( 'lineheight', 1.5);
+     * ```
+     */
+  /**
+     * 查询当前选区内容的行高大小
+     * @command lineheight
+     * @method queryCommandValue
+     * @param { String } cmd 命令字符串
+     * @return { String } 返回当前行高大小
+     * @example
+     * ```javascript
+     * editor.queryCommandValue( 'lineheight' );
+     * ```
+     */
+
+  me.commands["lineheight"] = {
+    execCommand: function(cmdName, value) {
+      this.execCommand("paragraph", "p", {
+        style: "line-height:" + (value == "1" ? "normal" : value + "em")
+      });
+      return true;
+    },
+    queryCommandValue: function() {
+      var pN = domUtils.filterNodeList(
+        this.selection.getStartElementPath(),
+        function(node) {
+          return domUtils.isBlockElm(node);
+        }
+      );
+      if (pN) {
+        var value = domUtils.getComputedStyle(pN, "line-height");
+        return value == "normal" ? 1 : value.replace(/[^\d.]*/gi, "");
+      }
+    }
+  };
+};
+
+
+// plugins/insertcode.js
+/**
+ * 插入代码插件
+ * @file
+ * @since 1.2.6.1
+ */
+
+UE.plugins["insertcode"] = function() {
+  var me = this;
+  me.setOpt("insertcode", {
+    as3: "ActionScript3",
+    bash: "Bash/Shell",
+    cpp: "C/C++",
+    css: "Css",
+    cf: "CodeFunction",
+    "c#": "C#",
+    delphi: "Delphi",
+    diff: "Diff",
+    erlang: "Erlang",
+    groovy: "Groovy",
+    html: "Html",
+    java: "Java",
+    jfx: "JavaFx",
+    js: "Javascript",
+    pl: "Perl",
+    php: "Php",
+    plain: "Plain Text",
+    ps: "PowerShell",
+    python: "Python",
+    ruby: "Ruby",
+    scala: "Scala",
+    sql: "Sql",
+    vb: "Vb",
+    xml: "Xml"
+  });
+
+  /**
+     * 插入代码
+     * @command insertcode
+     * @method execCommand
+     * @param { String } cmd 命令字符串
+     * @param { String } lang 插入代码的语言
+     * @example
+     * ```javascript
+     * editor.execCommand( 'insertcode', 'javascript' );
+     * ```
+     */
+
+  /**
+     * 如果选区所在位置是插入插入代码区域，返回代码的语言
+     * @command insertcode
+     * @method queryCommandValue
+     * @param { String } cmd 命令字符串
+     * @return { String } 返回代码的语言
+     * @example
+     * ```javascript
+     * editor.queryCommandValue( 'insertcode' );
+     * ```
+     */
+
+  me.commands["insertcode"] = {
+    execCommand: function(cmd, lang) {
+      var me = this,
+        rng = me.selection.getRange(),
+        pre = domUtils.findParentByTagName(rng.startContainer, "pre", true);
+      if (pre) {
+        pre.className = "brush:" + lang + ";toolbar:false;";
+      } else {
+        var code = "";
+        if (rng.collapsed) {
+          code = browser.ie && browser.ie11below
+            ? browser.version <= 8 ? "&nbsp;" : ""
+            : "<br/>";
+        } else {
+          var frag = rng.extractContents();
+          var div = me.document.createElement("div");
+          div.appendChild(frag);
+
+          utils.each(
+            UE.filterNode(
+              UE.htmlparser(div.innerHTML.replace(/[\r\t]/g, "")),
+              me.options.filterTxtRules
+            ).children,
+            function(node) {
+              if (browser.ie && browser.ie11below && browser.version > 8) {
+                if (node.type == "element") {
+                  if (node.tagName == "br") {
+                    code += "\n";
+                  } else if (!dtd.$empty[node.tagName]) {
+                    utils.each(node.children, function(cn) {
+                      if (cn.type == "element") {
+                        if (cn.tagName == "br") {
+                          code += "\n";
+                        } else if (!dtd.$empty[node.tagName]) {
+                          code += cn.innerText();
+                        }
+                      } else {
+                        code += cn.data;
+                      }
+                    });
+                    if (!/\n$/.test(code)) {
+                      code += "\n";
+                    }
+                  }
+                } else {
+                  code += node.data + "\n";
+                }
+                if (!node.nextSibling() && /\n$/.test(code)) {
+                  code = code.replace(/\n$/, "");
+                }
+              } else {
+                if (browser.ie && browser.ie11below) {
+                  if (node.type == "element") {
+                    if (node.tagName == "br") {
+                      code += "<br>";
+                    } else if (!dtd.$empty[node.tagName]) {
+                      utils.each(node.children, function(cn) {
+                        if (cn.type == "element") {
+                          if (cn.tagName == "br") {
+                            code += "<br>";
+                          } else if (!dtd.$empty[node.tagName]) {
+                            code += cn.innerText();
+                          }
+                        } else {
+                          code += cn.data;
+                        }
+                      });
+                      if (!/br>$/.test(code)) {
+                        code += "<br>";
+                      }
+                    }
+                  } else {
+                    code += node.data + "<br>";
+                  }
+                  if (!node.nextSibling() && /<br>$/.test(code)) {
+                    code = code.replace(/<br>$/, "");
+                  }
+                } else {
+                  code += node.type == "element"
+                    ? dtd.$empty[node.tagName] ? "" : node.innerText()
+                    : node.data;
+                  if (!/br\/?\s*>$/.test(code)) {
+                    if (!node.nextSibling()) return;
+                    code += "<br>";
+                  }
+                }
+              }
+            }
+          );
+        }
+        me.execCommand(
+          "inserthtml",
+          '<pre id="coder"class="brush:' +
+            lang +
+            ';toolbar:false">' +
+            code +
+            "</pre>",
+          true
+        );
+
+        pre = me.document.getElementById("coder");
+        domUtils.removeAttributes(pre, "id");
+        var tmpNode = pre.previousSibling;
+
+        if (
+          tmpNode &&
+          ((tmpNode.nodeType == 3 &&
+            tmpNode.nodeValue.length == 1 &&
+            browser.ie &&
+            browser.version == 6) ||
+            domUtils.isEmptyBlock(tmpNode))
+        ) {
+          domUtils.remove(tmpNode);
+        }
+        var rng = me.selection.getRange();
+        if (domUtils.isEmptyBlock(pre)) {
+          rng.setStart(pre, 0).setCursor(false, true);
+        } else {
+          rng.selectNodeContents(pre).select();
+        }
+      }
+    },
+    queryCommandValue: function() {
+      var path = this.selection.getStartElementPath();
+      var lang = "";
+      utils.each(path, function(node) {
+        if (node.nodeName == "PRE") {
+          var match = node.className.match(/brush:([^;]+)/);
+          lang = match && match[1] ? match[1] : "";
+          return false;
+        }
+      });
+      return lang;
+    }
+  };
+
+  me.addInputRule(function(root) {
+    utils.each(root.getNodesByTagName("pre"), function(pre) {
+      var brs = pre.getNodesByTagName("br");
+      if (brs.length) {
+        browser.ie &&
+          browser.ie11below &&
+          browser.version > 8 &&
+          utils.each(brs, function(br) {
+            var txt = UE.uNode.createText("\n");
+            br.parentNode.insertBefore(txt, br);
+            br.parentNode.removeChild(br);
+          });
+        return;
+      }
+      if (browser.ie && browser.ie11below && browser.version > 8) return;
+      var code = pre.innerText().split(/\n/);
+      pre.innerHTML("");
+      utils.each(code, function(c) {
+        if (c.length) {
+          pre.appendChild(UE.uNode.createText(c));
+        }
+        pre.appendChild(UE.uNode.createElement("br"));
+      });
+    });
+  });
+  me.addOutputRule(function(root) {
+    utils.each(root.getNodesByTagName("pre"), function(pre) {
+      var code = "";
+      utils.each(pre.children, function(n) {
+        if (n.type == "text") {
+          //在ie下文本内容有可能末尾带有\n要去掉
+          //trace:3396
+          code += n.data.replace(/[ ]/g, "&nbsp;").replace(/\n$/, "");
+        } else {
+          if (n.tagName == "br") {
+            code += "\n";
+          } else {
+            code += !dtd.$empty[n.tagName] ? "" : n.innerText();
+          }
+        }
+      });
+
+      pre.innerText(code.replace(/(&nbsp;|\n)+$/, ""));
+    });
+  });
+  //不需要判断highlight的command列表
+  me.notNeedCodeQuery = {
+    help: 1,
+    undo: 1,
+    redo: 1,
+    source: 1,
+    print: 1,
+    searchreplace: 1,
+    fullscreen: 1,
+    preview: 1,
+    insertparagraph: 1,
+    elementpath: 1,
+    insertcode: 1,
+    inserthtml: 1,
+    selectall: 1
+  };
+  //将queyCommamndState重置
+  var orgQuery = me.queryCommandState;
+  me.queryCommandState = function(cmd) {
+    var me = this;
+
+    if (
+      !me.notNeedCodeQuery[cmd.toLowerCase()] &&
+      me.selection &&
+      me.queryCommandValue("insertcode")
+    ) {
+      return -1;
+    }
+    return UE.Editor.prototype.queryCommandState.apply(this, arguments);
+  };
+  me.addListener("beforeenterkeydown", function() {
+    var rng = me.selection.getRange();
+    var pre = domUtils.findParentByTagName(rng.startContainer, "pre", true);
+    if (pre) {
+      me.fireEvent("saveScene");
+      if (!rng.collapsed) {
+        rng.deleteContents();
+      }
+      if (!browser.ie || browser.ie9above) {
+        var tmpNode = me.document.createElement("br"),
+          pre;
+        rng.insertNode(tmpNode).setStartAfter(tmpNode).collapse(true);
+        var next = tmpNode.nextSibling;
+        if (!next && (!browser.ie || browser.version > 10)) {
+          rng.insertNode(tmpNode.cloneNode(false));
+        } else {
+          rng.setStartAfter(tmpNode);
+        }
+        pre = tmpNode.previousSibling;
+        var tmp;
+        while (pre) {
+          tmp = pre;
+          pre = pre.previousSibling;
+          if (!pre || pre.nodeName == "BR") {
+            pre = tmp;
+            break;
+          }
+        }
+        if (pre) {
+          var str = "";
+          while (
+            pre &&
+            pre.nodeName != "BR" &&
+            new RegExp("^[\\s" + domUtils.fillChar + "]*$").test(pre.nodeValue)
+          ) {
+            str += pre.nodeValue;
+            pre = pre.nextSibling;
+          }
+          if (pre.nodeName != "BR") {
+            var match = pre.nodeValue.match(
+              new RegExp("^([\\s" + domUtils.fillChar + "]+)")
+            );
+            if (match && match[1]) {
+              str += match[1];
+            }
+          }
+          if (str) {
+            str = me.document.createTextNode(str);
+            rng.insertNode(str).setStartAfter(str);
+          }
+        }
+        rng.collapse(true).select(true);
+      } else {
+        if (browser.version > 8) {
+          var txt = me.document.createTextNode("\n");
+          var start = rng.startContainer;
+          if (rng.startOffset == 0) {
+            var preNode = start.previousSibling;
+            if (preNode) {
+              rng.insertNode(txt);
+              var fillchar = me.document.createTextNode(" ");
+              rng
+                .setStartAfter(txt)
+                .insertNode(fillchar)
+                .setStart(fillchar, 0)
+                .collapse(true)
+                .select(true);
+            }
+          } else {
+            rng.insertNode(txt).setStartAfter(txt);
+            var fillchar = me.document.createTextNode(" ");
+            start = rng.startContainer.childNodes[rng.startOffset];
+            if (start && !/^\n/.test(start.nodeValue)) {
+              rng.setStartBefore(txt);
+            }
+            rng
+              .insertNode(fillchar)
+              .setStart(fillchar, 0)
+              .collapse(true)
+              .select(true);
+          }
+        } else {
+          var tmpNode = me.document.createElement("br");
+          rng.insertNode(tmpNode);
+          rng.insertNode(me.document.createTextNode(domUtils.fillChar));
+          rng.setStartAfter(tmpNode);
+          pre = tmpNode.previousSibling;
+          var tmp;
+          while (pre) {
+            tmp = pre;
+            pre = pre.previousSibling;
+            if (!pre || pre.nodeName == "BR") {
+              pre = tmp;
+              break;
+            }
+          }
+          if (pre) {
+            var str = "";
+            while (
+              pre &&
+              pre.nodeName != "BR" &&
+              new RegExp("^[ " + domUtils.fillChar + "]*$").test(pre.nodeValue)
+            ) {
+              str += pre.nodeValue;
+              pre = pre.nextSibling;
+            }
+            if (pre.nodeName != "BR") {
+              var match = pre.nodeValue.match(
+                new RegExp("^([ " + domUtils.fillChar + "]+)")
+              );
+              if (match && match[1]) {
+                str += match[1];
+              }
+            }
+
+            str = me.document.createTextNode(str);
+            rng.insertNode(str).setStartAfter(str);
+          }
+          rng.collapse(true).select();
+        }
+      }
+      me.fireEvent("saveScene");
+      return true;
+    }
+  });
+
+  me.addListener("tabkeydown", function(cmd, evt) {
+    var rng = me.selection.getRange();
+    var pre = domUtils.findParentByTagName(rng.startContainer, "pre", true);
+    if (pre) {
+      me.fireEvent("saveScene");
+      if (evt.shiftKey) {
+      } else {
+        if (!rng.collapsed) {
+          var bk = rng.createBookmark();
+          var start = bk.start.previousSibling;
+
+          while (start) {
+            if (pre.firstChild === start && !domUtils.isBr(start)) {
+              pre.insertBefore(me.document.createTextNode("    "), start);
+
+              break;
+            }
+            if (domUtils.isBr(start)) {
+              pre.insertBefore(
+                me.document.createTextNode("    "),
+                start.nextSibling
+              );
+
+              break;
+            }
+            start = start.previousSibling;
+          }
+          var end = bk.end;
+          start = bk.start.nextSibling;
+          if (pre.firstChild === bk.start) {
+            pre.insertBefore(
+              me.document.createTextNode("    "),
+              start.nextSibling
+            );
+          }
+          while (start && start !== end) {
+            if (domUtils.isBr(start) && start.nextSibling) {
+              if (start.nextSibling === end) {
+                break;
+              }
+              pre.insertBefore(
+                me.document.createTextNode("    "),
+                start.nextSibling
+              );
+            }
+
+            start = start.nextSibling;
+          }
+          rng.moveToBookmark(bk).select();
+        } else {
+          var tmpNode = me.document.createTextNode("    ");
+          rng
+            .insertNode(tmpNode)
+            .setStartAfter(tmpNode)
+            .collapse(true)
+            .select(true);
+        }
+      }
+
+      me.fireEvent("saveScene");
+      return true;
+    }
+  });
+
+  me.addListener("beforeinserthtml", function(evtName, html) {
+    var me = this,
+      rng = me.selection.getRange(),
+      pre = domUtils.findParentByTagName(rng.startContainer, "pre", true);
+    if (pre) {
+      if (!rng.collapsed) {
+        rng.deleteContents();
+      }
+      var htmlstr = "";
+      if (browser.ie && browser.version > 8) {
+        utils.each(
+          UE.filterNode(UE.htmlparser(html), me.options.filterTxtRules)
+            .children,
+          function(node) {
+            if (node.type == "element") {
+              if (node.tagName == "br") {
+                htmlstr += "\n";
+              } else if (!dtd.$empty[node.tagName]) {
+                utils.each(node.children, function(cn) {
+                  if (cn.type == "element") {
+                    if (cn.tagName == "br") {
+                      htmlstr += "\n";
+                    } else if (!dtd.$empty[node.tagName]) {
+                      htmlstr += cn.innerText();
+                    }
+                  } else {
+                    htmlstr += cn.data;
+                  }
+                });
+                if (!/\n$/.test(htmlstr)) {
+                  htmlstr += "\n";
+                }
+              }
+            } else {
+              htmlstr += node.data + "\n";
+            }
+            if (!node.nextSibling() && /\n$/.test(htmlstr)) {
+              htmlstr = htmlstr.replace(/\n$/, "");
+            }
+          }
+        );
+        var tmpNode = me.document.createTextNode(
+          utils.html(htmlstr.replace(/&nbsp;/g, " "))
+        );
+        rng.insertNode(tmpNode).selectNode(tmpNode).select();
+      } else {
+        var frag = me.document.createDocumentFragment();
+
+        utils.each(
+          UE.filterNode(UE.htmlparser(html), me.options.filterTxtRules)
+            .children,
+          function(node) {
+            if (node.type == "element") {
+              if (node.tagName == "br") {
+                frag.appendChild(me.document.createElement("br"));
+              } else if (!dtd.$empty[node.tagName]) {
+                utils.each(node.children, function(cn) {
+                  if (cn.type == "element") {
+                    if (cn.tagName == "br") {
+                      frag.appendChild(me.document.createElement("br"));
+                    } else if (!dtd.$empty[node.tagName]) {
+                      frag.appendChild(
+                        me.document.createTextNode(
+                          utils.html(cn.innerText().replace(/&nbsp;/g, " "))
+                        )
+                      );
+                    }
+                  } else {
+                    frag.appendChild(
+                      me.document.createTextNode(
+                        utils.html(cn.data.replace(/&nbsp;/g, " "))
+                      )
+                    );
+                  }
+                });
+                if (frag.lastChild.nodeName != "BR") {
+                  frag.appendChild(me.document.createElement("br"));
+                }
+              }
+            } else {
+              frag.appendChild(
+                me.document.createTextNode(
+                  utils.html(node.data.replace(/&nbsp;/g, " "))
+                )
+              );
+            }
+            if (!node.nextSibling() && frag.lastChild.nodeName == "BR") {
+              frag.removeChild(frag.lastChild);
+            }
+          }
+        );
+        rng.insertNode(frag).select();
+      }
+
+      return true;
+    }
+  });
+  //方向键的处理
+  me.addListener("keydown", function(cmd, evt) {
+    var me = this,
+      keyCode = evt.keyCode || evt.which;
+    if (keyCode == 40) {
+      var rng = me.selection.getRange(),
+        pre,
+        start = rng.startContainer;
+      if (
+        rng.collapsed &&
+        (pre = domUtils.findParentByTagName(rng.startContainer, "pre", true)) &&
+        !pre.nextSibling
+      ) {
+        var last = pre.lastChild;
+        while (last && last.nodeName == "BR") {
+          last = last.previousSibling;
+        }
+        if (
+          last === start ||
+          (rng.startContainer === pre &&
+            rng.startOffset == pre.childNodes.length)
+        ) {
+          me.execCommand("insertparagraph");
+          domUtils.preventDefault(evt);
+        }
+      }
+    }
+  });
+  //trace:3395
+  me.addListener("delkeydown", function(type, evt) {
+    var rng = this.selection.getRange();
+    rng.txtToElmBoundary(true);
+    var start = rng.startContainer;
+    if (
+      domUtils.isTagNode(start, "pre") &&
+      rng.collapsed &&
+      domUtils.isStartInblock(rng)
+    ) {
+      var p = me.document.createElement("p");
+      domUtils.fillNode(me.document, p);
+      start.parentNode.insertBefore(p, start);
+      domUtils.remove(start);
+      rng.setStart(p, 0).setCursor(false, true);
+      domUtils.preventDefault(evt);
+      return true;
+    }
+  });
+};
+
+
+// plugins/cleardoc.js
+/**
+ * 清空文档插件
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 清空文档
+ * @command cleardoc
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * //editor 是编辑器实例
+ * editor.execCommand('cleardoc');
+ * ```
+ */
+
+UE.commands["cleardoc"] = {
+  execCommand: function(cmdName) {
+    var me = this,
+      enterTag = me.options.enterTag,
+      range = me.selection.getRange();
+    if (enterTag == "br") {
+      me.body.innerHTML = "<br/>";
+      range.setStart(me.body, 0).setCursor();
+    } else {
+      me.body.innerHTML = "<p>" + (ie ? "" : "<br/>") + "</p>";
+      range.setStart(me.body.firstChild, 0).setCursor(false, true);
+    }
+    setTimeout(function() {
+      me.fireEvent("clearDoc");
+    }, 0);
+  }
+};
+
+
+// plugins/anchor.js
+/**
+ * 锚点插件，为UEditor提供插入锚点支持
+ * @file
+ * @since 1.2.6.1
+ */
+UE.plugin.register("anchor", function() {
+  return {
+    bindEvents: {
+      ready: function() {
+        utils.cssRule(
+          "anchor",
+          ".anchorclass{background: url('" +
+            this.options.themePath +
+            this.options.theme +
+            "/images/anchor.gif') no-repeat scroll left center transparent;cursor: auto;display: inline-block;height: 16px;width: 15px;}",
+          this.document
+        );
+      }
+    },
+    outputRule: function(root) {
+      utils.each(root.getNodesByTagName("img"), function(a) {
+        var val;
+        if ((val = a.getAttr("anchorname"))) {
+          a.tagName = "a";
+          a.setAttr({
+            anchorname: "",
+            name: val,
+            class: ""
+          });
+        }
+      });
+    },
+    inputRule: function(root) {
+      utils.each(root.getNodesByTagName("a"), function(a) {
+        var val;
+        if ((val = a.getAttr("name")) && !a.getAttr("href")) {
+          //过滤掉word冗余标签
+          //_Toc\d+有可能勿命中
+          if (/^\_Toc\d+$/.test(val)) {
+            a.parentNode.removeChild(a);
+            return;
+          }
+          a.tagName = "img";
+          a.setAttr({
+            anchorname: a.getAttr("name"),
+            class: "anchorclass"
+          });
+          a.setAttr("name");
+        }
+      });
+    },
+    commands: {
+      /**
+            * 插入锚点
+            * @command anchor
+            * @method execCommand
+            * @param { String } cmd 命令字符串
+            * @param { String } name 锚点名称字符串
+            * @example
+            * ```javascript
+            * //editor 是编辑器实例
+            * editor.execCommand('anchor', 'anchor1');
+            * ```
+            */
+      anchor: {
+        execCommand: function(cmd, name) {
+          var range = this.selection.getRange(),
+            img = range.getClosedNode();
+          if (img && img.getAttribute("anchorname")) {
+            if (name) {
+              img.setAttribute("anchorname", name);
+            } else {
+              range.setStartBefore(img).setCursor();
+              domUtils.remove(img);
+            }
+          } else {
+            if (name) {
+              //只在选区的开始插入
+              var anchor = this.document.createElement("img");
+              range.collapse(true);
+              domUtils.setAttributes(anchor, {
+                anchorname: name,
+                class: "anchorclass"
+              });
+              range
+                .insertNode(anchor)
+                .setStartAfter(anchor)
+                .setCursor(false, true);
+            }
+          }
+        }
+      }
+    }
+  };
+});
+
+
+// plugins/wordcount.js
+///import core
+///commands 字数统计
+///commandsName  WordCount,wordCount
+///commandsTitle  字数统计
+/*
+ * Created by JetBrains WebStorm.
+ * User: taoqili
+ * Date: 11-9-7
+ * Time: 下午8:18
+ * To change this template use File | Settings | File Templates.
+ */
+
+UE.plugins["wordcount"] = function() {
+  var me = this;
+  me.setOpt("wordCount", true);
+  me.addListener("contentchange", function() {
+    me.fireEvent("wordcount");
+  });
+  var timer;
+  me.addListener("ready", function() {
+    var me = this;
+    domUtils.on(me.body, "keyup", function(evt) {
+      var code = evt.keyCode || evt.which,
+        //忽略的按键,ctr,alt,shift,方向键
+        ignores = {
+          "16": 1,
+          "18": 1,
+          "20": 1,
+          "37": 1,
+          "38": 1,
+          "39": 1,
+          "40": 1
+        };
+      if (code in ignores) return;
+      clearTimeout(timer);
+      timer = setTimeout(function() {
+        me.fireEvent("wordcount");
+      }, 200);
+    });
+  });
+};
+
+
+// plugins/pagebreak.js
+/**
+ * 分页功能插件
+ * @file
+ * @since 1.2.6.1
+ */
+UE.plugins["pagebreak"] = function() {
+  var me = this,
+    notBreakTags = ["td"];
+  me.setOpt("pageBreakTag", "_ueditor_page_break_tag_");
+
+  function fillNode(node) {
+    if (domUtils.isEmptyBlock(node)) {
+      var firstChild = node.firstChild,
+        tmpNode;
+
+      while (
+        firstChild &&
+        firstChild.nodeType == 1 &&
+        domUtils.isEmptyBlock(firstChild)
+      ) {
+        tmpNode = firstChild;
+        firstChild = firstChild.firstChild;
+      }
+      !tmpNode && (tmpNode = node);
+      domUtils.fillNode(me.document, tmpNode);
+    }
+  }
+  //分页符样式添加
+
+  me.ready(function() {
+    utils.cssRule(
+      "pagebreak",
+      ".pagebreak{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}",
+      me.document
+    );
+  });
+  function isHr(node) {
+    return (
+      node &&
+      node.nodeType == 1 &&
+      node.tagName == "HR" &&
+      node.className == "pagebreak"
+    );
+  }
+  me.addInputRule(function(root) {
+    root.traversal(function(node) {
+      if (node.type == "text" && node.data == me.options.pageBreakTag) {
+        var hr = UE.uNode.createElement(
+          '<hr class="pagebreak" noshade="noshade" size="5" style="-webkit-user-select: none;">'
+        );
+        node.parentNode.insertBefore(hr, node);
+        node.parentNode.removeChild(node);
+      }
+    });
+  });
+  me.addOutputRule(function(node) {
+    utils.each(node.getNodesByTagName("hr"), function(n) {
+      if (n.getAttr("class") == "pagebreak") {
+        var txt = UE.uNode.createText(me.options.pageBreakTag);
+        n.parentNode.insertBefore(txt, n);
+        n.parentNode.removeChild(n);
+      }
+    });
+  });
+
+  /**
+     * 插入分页符
+     * @command pagebreak
+     * @method execCommand
+     * @param { String } cmd 命令字符串
+     * @remind 在表格中插入分页符会把表格切分成两部分
+     * @remind 获取编辑器内的数据时， 编辑器会把分页符转换成“_ueditor_page_break_tag_”字符串，
+     *          以便于提交数据到服务器端后处理分页。
+     * @example
+     * ```javascript
+     * editor.execCommand( 'pagebreak'); //插入一个hr标签，带有样式类名pagebreak
+     * ```
+     */
+
+  me.commands["pagebreak"] = {
+    execCommand: function() {
+      var range = me.selection.getRange(),
+        hr = me.document.createElement("hr");
+      domUtils.setAttributes(hr, {
+        class: "pagebreak",
+        noshade: "noshade",
+        size: "5"
+      });
+      domUtils.unSelectable(hr);
+      //table单独处理
+      var node = domUtils.findParentByTagName(
+        range.startContainer,
+        notBreakTags,
+        true
+      ),
+        parents = [],
+        pN;
+      if (node) {
+        switch (node.tagName) {
+          case "TD":
+            pN = node.parentNode;
+            if (!pN.previousSibling) {
+              var table = domUtils.findParentByTagName(pN, "table");
+              //                            var tableWrapDiv = table.parentNode;
+              //                            if(tableWrapDiv && tableWrapDiv.nodeType == 1
+              //                                && tableWrapDiv.tagName == 'DIV'
+              //                                && tableWrapDiv.getAttribute('dropdrag')
+              //                                ){
+              //                                domUtils.remove(tableWrapDiv,true);
+              //                            }
+              table.parentNode.insertBefore(hr, table);
+              parents = domUtils.findParents(hr, true);
+            } else {
+              pN.parentNode.insertBefore(hr, pN);
+              parents = domUtils.findParents(hr);
+            }
+            pN = parents[1];
+            if (hr !== pN) {
+              domUtils.breakParent(hr, pN);
+            }
+            //table要重写绑定一下拖拽
+            me.fireEvent("afteradjusttable", me.document);
+        }
+      } else {
+        if (!range.collapsed) {
+          range.deleteContents();
+          var start = range.startContainer;
+          while (
+            !domUtils.isBody(start) &&
+            domUtils.isBlockElm(start) &&
+            domUtils.isEmptyNode(start)
+          ) {
+            range.setStartBefore(start).collapse(true);
+            domUtils.remove(start);
+            start = range.startContainer;
+          }
+        }
+        range.insertNode(hr);
+
+        var pN = hr.parentNode,
+          nextNode;
+        while (!domUtils.isBody(pN)) {
+          domUtils.breakParent(hr, pN);
+          nextNode = hr.nextSibling;
+          if (nextNode && domUtils.isEmptyBlock(nextNode)) {
+            domUtils.remove(nextNode);
+          }
+          pN = hr.parentNode;
+        }
+        nextNode = hr.nextSibling;
+        var pre = hr.previousSibling;
+        if (isHr(pre)) {
+          domUtils.remove(pre);
+        } else {
+          pre && fillNode(pre);
+        }
+
+        if (!nextNode) {
+          var p = me.document.createElement("p");
+
+          hr.parentNode.appendChild(p);
+          domUtils.fillNode(me.document, p);
+          range.setStart(p, 0).collapse(true);
+        } else {
+          if (isHr(nextNode)) {
+            domUtils.remove(nextNode);
+          } else {
+            fillNode(nextNode);
+          }
+          range.setEndAfter(hr).collapse(false);
+        }
+
+        range.select(true);
+      }
+    }
+  };
+};
+
+
+// plugins/wordimage.js
+///import core
+///commands 本地图片引导上传
+///commandsName  WordImage
+///commandsTitle  本地图片引导上传
+///commandsDialog  dialogs\wordimage
+
+UE.plugin.register("wordimage", function() {
+  var me = this,
+    images = [];
+
+  this.addListener("click", function (type, evt) {
+    var el = evt.target || evt.srcElement;
+    if ('IMG' == el.tagName && el.getAttribute('data-word-image')) {
+      me.ui._dialogs.wordimageDialog && me.ui._dialogs.wordimageDialog.open();
+    }
+  });
+
+  return {
+    commands: {
+      wordimage: {
+        execCommand: function() {
+          var images = domUtils.getElementsByTagName(me.body, "img");
+          var urlList = [];
+          for (var i = 0, ci; (ci = images[i++]); ) {
+            var url = ci.getAttribute("data-word-image");
+            url && urlList.push(url);
+          }
+          return urlList;
+        },
+        queryCommandState: function() {
+          images = domUtils.getElementsByTagName(me.body, "img");
+          for (var i = 0, ci; (ci = images[i++]); ) {
+            if (ci.getAttribute("data-word-image")) {
+              return 1;
+            }
+          }
+          return -1;
+        },
+        notNeedUndo: true
+      }
+    },
+    inputRule: function(root) {
+      utils.each(root.getNodesByTagName("img"), function(img) {
+        var attrs = img.attrs,
+          flag = parseInt(attrs.width) < 128 || parseInt(attrs.height) < 43,
+          opt = me.options,
+          src = opt.UEDITOR_HOME_URL + "themes/default/images/spacer.gif";
+        if (attrs["src"] && /^(?:(file:\/+))/.test(attrs["src"])) {
+          img.setAttr({
+            width: attrs.width,
+            height: attrs.height,
+            alt: attrs.alt,
+            'data-word-image': attrs.src,
+            src: src,
+            style:
+              "background:url(" +
+                (flag
+                  ? opt.themePath + opt.theme + "/images/word.gif"
+                  : opt.langPath + opt.lang + "/images/localimage.png") +
+                ") no-repeat center center;border:1px solid #ddd"
+          });
+        }
+      });
+    }
+  };
+});
+
+
+// plugins/autosave.js
+UE.plugin.register("autosave", function () {
+    var me = this, saveKey = null;
+
+    function save(editor) {
+        var saveData;
+
+        if (!editor.hasContents()) {
+            //这里不能调用命令来删除， 会造成事件死循环
+            saveKey && me.removePreferences(saveKey);
+            return;
+        }
+
+        editor._autoSaveTimer = null;
+
+        saveData = me.body.innerHTML;
+
+        if (
+            editor.fireEvent("beforeautosave", {
+                content: saveData
+            }) === false
+        ) {
+            return;
+        }
+
+        me.setPreferences(saveKey, saveData);
+
+        editor.fireEvent("afterautosave", {
+            content: saveData
+        });
+    }
+
+    return {
+        defaultOptions: {
+            autoSaveEnable: true,
+            autoSaveRestore: false,
+            autoSaveKey: null,
+        },
+        bindEvents: {
+            ready: function () {
+                saveKey = me.getOpt('autoSaveKey');
+                if (!saveKey) {
+                    var _suffix = "_DraftsData", key = null;
+
+                    if (me.key) {
+                        key = me.key + _suffix;
+                    } else {
+                        key = (me.container.parentNode.id || "ue-common") + _suffix;
+                    }
+                    saveKey = (location.protocol + location.host + location.pathname).replace(
+                        /[.:\/]/g,
+                        "_"
+                    ) + key;
+                }
+                if (me.getOpt('autoSaveRestore')) {
+                    var data = me.getPreferences(saveKey);
+                    if (data) {
+                        me.body.innerHTML = data;
+                    }
+                }
+                // console.log('saveKey', saveKey);
+            },
+            contentchange: function () {
+                if (!me.getOpt("autoSaveEnable")) {
+                    return;
+                }
+
+                if (!saveKey) {
+                    return;
+                }
+
+                if (me._autoSaveTimer) {
+                    window.clearTimeout(me._autoSaveTimer);
+                }
+
+                me._autoSaveTimer = window.setTimeout(function () {
+                    save(me);
+                }, 500);
+            }
+        },
+        commands: {
+            clear_auto_save_content: {
+                execCommand: function (cmd, name) {
+                    if (saveKey && me.getPreferences(saveKey)) {
+                        me.removePreferences(saveKey);
+                    }
+                },
+                notNeedUndo: true,
+                ignoreContentChange: true
+            },
+
+            set_auto_save_content: {
+                execCommand: function (cmd, name) {
+                    save(me);
+                },
+                notNeedUndo: true,
+                ignoreContentChange: true
+            },
+
+            get_auto_save_content: {
+                execCommand: function (cmd, name) {
+                    return me.getPreferences(saveKey) || "";
+                },
+                notNeedUndo: true,
+                ignoreContentChange: true
+            },
+
+            auto_save_restore: {
+                execCommand: function (cmd, name) {
+                    if (saveKey) {
+                        me.body.innerHTML =
+                            me.getPreferences(saveKey) || "<p>" + domUtils.fillHtml + "</p>";
+                        me.focus(true);
+                    }
+                },
+                queryCommandState: function () {
+                    return saveKey ? (me.getPreferences(saveKey) === null ? -1 : 0) : -1;
+                },
+                notNeedUndo: true,
+                ignoreContentChange: true
+            }
+        }
+    };
+});
+
+
+// plugins/formula.js
+UE.plugin.register("formula", function () {
+  var me = this, images = [];
+
+  return {
+    commands: {
+      formula: {
+        execCommand: function (cmdName, value) {
+          var range = me.selection.getRange(),
+            img = range.getClosedNode();
+
+          value = encodeURIComponent(value);
+          var formulaConfig = me.getOpt('formulaConfig');
+          var src = formulaConfig.imageUrlTemplate.replace(/\{\}/, value);
+
+          if (img) {
+            img.setAttribute("src", src);
+          } else {
+            me.execCommand("insertHtml", '<img src="' + src + '" data-formula-image="' + value + '" />');
+          }
+        },
+      }
+    },
+  };
+});
+
+
+// plugins/dragdrop.js
+UE.plugins["dragdrop"] = function() {
+  var me = this;
+  me.ready(function() {
+    domUtils.on(this.body, "dragend", function() {
+      var rng = me.selection.getRange();
+      var node = rng.getClosedNode() || me.selection.getStart();
+
+      if (node && node.tagName == "IMG") {
+        var pre = node.previousSibling,
+          next;
+        while ((next = node.nextSibling)) {
+          if (
+            next.nodeType == 1 &&
+            next.tagName == "SPAN" &&
+            !next.firstChild
+          ) {
+            domUtils.remove(next);
+          } else {
+            break;
+          }
+        }
+
+        if (
+          ((pre && pre.nodeType == 1 && !domUtils.isEmptyBlock(pre)) || !pre) &&
+          (!next || (next && !domUtils.isEmptyBlock(next)))
+        ) {
+          if (pre && pre.tagName == "P" && !domUtils.isEmptyBlock(pre)) {
+            pre.appendChild(node);
+            domUtils.moveChild(next, pre);
+            domUtils.remove(next);
+          } else if (
+            next &&
+            next.tagName == "P" &&
+            !domUtils.isEmptyBlock(next)
+          ) {
+            next.insertBefore(node, next.firstChild);
+          }
+
+          if (pre && pre.tagName == "P" && domUtils.isEmptyBlock(pre)) {
+            domUtils.remove(pre);
+          }
+          if (next && next.tagName == "P" && domUtils.isEmptyBlock(next)) {
+            domUtils.remove(next);
+          }
+          rng.selectNode(node).select();
+          me.fireEvent("saveScene");
+        }
+      }
+    });
+  });
+  me.addListener("keyup", function(type, evt) {
+    var keyCode = evt.keyCode || evt.which;
+    if (keyCode == 13) {
+      var rng = me.selection.getRange(),
+        node;
+      if (
+        (node = domUtils.findParentByTagName(rng.startContainer, "p", true))
+      ) {
+        if (domUtils.getComputedStyle(node, "text-align") == "center") {
+          domUtils.removeStyle(node, "text-align");
+        }
+      }
+    }
+  });
+};
+
+
+// plugins/undo.js
+/**
+ * undo redo
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 撤销上一次执行的命令
+ * @command undo
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'undo' );
+ * ```
+ */
+
+/**
+ * 重做上一次执行的命令
+ * @command redo
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'redo' );
+ * ```
+ */
+
+UE.plugins["undo"] = function() {
+  var saveSceneTimer;
+  var me = this,
+    maxUndoCount = me.options.maxUndoCount || 20,
+    maxInputCount = me.options.maxInputCount || 20,
+    fillchar = new RegExp(domUtils.fillChar + "|</hr>", "gi"); // ie会产生多余的</hr>
+  var noNeedFillCharTags = {
+    ol: 1,
+    ul: 1,
+    table: 1,
+    tbody: 1,
+    tr: 1,
+    body: 1
+  };
+  var orgState = me.options.autoClearEmptyNode;
+  function compareAddr(indexA, indexB) {
+    if (indexA.length != indexB.length) return 0;
+    for (var i = 0, l = indexA.length; i < l; i++) {
+      if (indexA[i] != indexB[i]) return 0;
+    }
+    return 1;
+  }
+
+  function compareRangeAddress(rngAddrA, rngAddrB) {
+    if (rngAddrA.collapsed != rngAddrB.collapsed) {
+      return 0;
+    }
+    if (
+      !compareAddr(rngAddrA.startAddress, rngAddrB.startAddress) ||
+      !compareAddr(rngAddrA.endAddress, rngAddrB.endAddress)
+    ) {
+      return 0;
+    }
+    return 1;
+  }
+
+  function UndoManager() {
+    this.list = [];
+    this.index = 0;
+    this.hasUndo = false;
+    this.hasRedo = false;
+    this.undo = function() {
+      if (this.hasUndo) {
+        if (!this.list[this.index - 1] && this.list.length == 1) {
+          this.reset();
+          return;
+        }
+        while (
+          this.list[this.index].content == this.list[this.index - 1].content
+        ) {
+          this.index--;
+          if (this.index == 0) {
+            return this.restore(0);
+          }
+        }
+        this.restore(--this.index);
+      }
+    };
+    this.redo = function() {
+      if (this.hasRedo) {
+        while (
+          this.list[this.index].content == this.list[this.index + 1].content
+        ) {
+          this.index++;
+          if (this.index == this.list.length - 1) {
+            return this.restore(this.index);
+          }
+        }
+        this.restore(++this.index);
+      }
+    };
+
+    this.restore = function() {
+      var me = this.editor;
+      var scene = this.list[this.index];
+      var root = UE.htmlparser(scene.content.replace(fillchar, ""));
+      me.options.autoClearEmptyNode = false;
+      me.filterInputRule(root);
+      me.options.autoClearEmptyNode = orgState;
+      //trace:873
+      //去掉展位符
+      me.document.body.innerHTML = root.toHtml();
+      me.fireEvent("afterscencerestore");
+      //处理undo后空格不展位的问题
+      if (browser.ie) {
+        utils.each(
+          domUtils.getElementsByTagName(me.document, "td th caption p"),
+          function(node) {
+            if (domUtils.isEmptyNode(node)) {
+              domUtils.fillNode(me.document, node);
+            }
+          }
+        );
+      }
+
+      try {
+        var rng = new dom.Range(me.document).moveToAddress(scene.address);
+        rng.select(
+          noNeedFillCharTags[rng.startContainer.nodeName.toLowerCase()]
+        );
+      } catch (e) {}
+
+      this.update();
+      this.clearKey();
+      //不能把自己reset了
+      me.fireEvent("reset", true);
+    };
+
+    this.getScene = function() {
+      var me = this.editor;
+      var rng = me.selection.getRange(),
+        rngAddress = rng.createAddress(false, true);
+      me.fireEvent("beforegetscene");
+      var root = UE.htmlparser(me.body.innerHTML);
+      me.options.autoClearEmptyNode = false;
+      me.filterOutputRule(root);
+      me.options.autoClearEmptyNode = orgState;
+      var cont = root.toHtml();
+      //trace:3461
+      //这个会引起回退时导致空格丢失的情况
+      //            browser.ie && (cont = cont.replace(/>&nbsp;</g, '><').replace(/\s*</g, '<').replace(/>\s*/g, '>'));
+      me.fireEvent("aftergetscene");
+
+      return {
+        address: rngAddress,
+        content: cont
+      };
+    };
+    this.save = function(notCompareRange, notSetCursor) {
+
+      clearTimeout(saveSceneTimer);
+      var currentScene = this.getScene(notSetCursor),
+        lastScene = this.list[this.index];
+      if (lastScene && lastScene.content != currentScene.content) {
+        me.trigger("contentchange");
+      }
+      //内容相同位置相同不存
+      if (
+        lastScene &&
+        lastScene.content == currentScene.content &&
+        (notCompareRange
+          ? 1
+          : compareRangeAddress(lastScene.address, currentScene.address))
+      ) {
+        return;
+      }
+      this.list = this.list.slice(0, this.index + 1);
+      this.list.push(currentScene);
+      //如果大于最大数量了，就把最前的剔除
+      if (this.list.length > maxUndoCount) {
+        this.list.shift();
+      }
+      this.index = this.list.length - 1;
+      this.clearKey();
+      //跟新undo/redo状态
+      this.update();
+    };
+    this.update = function() {
+      this.hasRedo = !!this.list[this.index + 1];
+      this.hasUndo = !!this.list[this.index - 1];
+    };
+    this.reset = function() {
+      this.list = [];
+      this.index = 0;
+      this.hasUndo = false;
+      this.hasRedo = false;
+      this.clearKey();
+    };
+    this.clearKey = function() {
+      keycont = 0;
+      lastKeyCode = null;
+    };
+  }
+
+  me.undoManger = new UndoManager();
+  me.undoManger.editor = me;
+  function saveScene() {
+    this.undoManger.save();
+  }
+
+  me.addListener("saveScene", function() {
+    var args = Array.prototype.splice.call(arguments, 1);
+    this.undoManger.save.apply(this.undoManger, args);
+  });
+
+  //    me.addListener('beforeexeccommand', saveScene);
+  //    me.addListener('afterexeccommand', saveScene);
+
+  me.addListener("reset", function(type, exclude) {
+    if (!exclude) {
+      this.undoManger.reset();
+    }
+  });
+  me.commands["redo"] = me.commands["undo"] = {
+    execCommand: function(cmdName) {
+      this.undoManger[cmdName]();
+    },
+    queryCommandState: function(cmdName) {
+      return this.undoManger[
+        "has" + (cmdName.toLowerCase() == "undo" ? "Undo" : "Redo")
+      ]
+        ? 0
+        : -1;
+    },
+    notNeedUndo: 1
+  };
+
+  var keys = {
+    //  /*Backspace*/ 8:1, /*Delete*/ 46:1,
+    /*Shift*/ 16: 1,
+    /*Ctrl*/ 17: 1,
+    /*Alt*/ 18: 1,
+    37: 1,
+    38: 1,
+    39: 1,
+    40: 1
+  },
+    keycont = 0,
+    lastKeyCode;
+  //输入法状态下不计算字符数
+  var inputType = false;
+  me.addListener("ready", function() {
+    domUtils.on(this.body, "compositionstart", function() {
+      inputType = true;
+    });
+    domUtils.on(this.body, "compositionend", function() {
+      inputType = false;
+    });
+  });
+  //快捷键
+  me.addshortcutkey({
+    Undo: "ctrl+90", //undo
+    Redo: "ctrl+89" //redo
+  });
+  var isCollapsed = true;
+  me.addListener("keydown", function(type, evt) {
+    var me = this;
+    var keyCode = evt.keyCode || evt.which;
+    if (
+      !keys[keyCode] &&
+      !evt.ctrlKey &&
+      !evt.metaKey &&
+      !evt.shiftKey &&
+      !evt.altKey
+    ) {
+      if (inputType) return;
+
+      if (!me.selection.getRange().collapsed) {
+        me.undoManger.save(false, true);
+        isCollapsed = false;
+        return;
+      }
+      if (me.undoManger.list.length == 0) {
+        me.undoManger.save(true);
+      }
+      clearTimeout(saveSceneTimer);
+      function save(cont) {
+        cont.undoManger.save(false, true);
+        cont.fireEvent("selectionchange");
+      }
+      saveSceneTimer = setTimeout(function() {
+        if (inputType) {
+          var interalTimer = setInterval(function() {
+            if (!inputType) {
+              save(me);
+              clearInterval(interalTimer);
+            }
+          }, 300);
+          return;
+        }
+        save(me);
+      }, 200);
+
+      lastKeyCode = keyCode;
+      keycont++;
+      if (keycont >= maxInputCount) {
+        save(me);
+      }
+    }
+  });
+  me.addListener("keyup", function(type, evt) {
+    var keyCode = evt.keyCode || evt.which;
+    if (
+      !keys[keyCode] &&
+      !evt.ctrlKey &&
+      !evt.metaKey &&
+      !evt.shiftKey &&
+      !evt.altKey
+    ) {
+      if (inputType) return;
+      if (!isCollapsed) {
+        this.undoManger.save(false, true);
+        isCollapsed = true;
+      }
+    }
+  });
+  //扩展实例，添加关闭和开启命令undo
+  me.stopCmdUndo = function() {
+    me.__hasEnterExecCommand = true;
+  };
+  me.startCmdUndo = function() {
+    me.__hasEnterExecCommand = false;
+  };
+};
+
+
+// plugins/copy.js
+UE.plugin.register("copy", function() {
+  var me = this;
+
+  function initZeroClipboard() {
+    ZeroClipboard.config({
+      debug: false,
+      swfPath:
+        me.options.UEDITOR_HOME_URL +
+          "third-party/zeroclipboard/ZeroClipboard.swf"
+    });
+
+    var client = (me.zeroclipboard = new ZeroClipboard());
+
+    // 复制内容
+    client.on("copy", function(e) {
+      var client = e.client,
+        rng = me.selection.getRange(),
+        div = document.createElement("div");
+
+      div.appendChild(rng.cloneContents());
+      client.setText(div.innerText || div.textContent);
+      client.setHtml(div.innerHTML);
+      rng.select();
+    });
+    // hover事件传递到target
+    client.on("mouseover mouseout", function(e) {
+      var target = e.target;
+      if (target) {
+        if (e.type == "mouseover") {
+          domUtils.addClass(target, "edui-state-hover");
+        } else if (e.type == "mouseout") {
+          domUtils.removeClasses(target, "edui-state-hover");
+        }
+      }
+    });
+    // flash加载不成功
+    client.on("wrongflash noflash", function() {
+      ZeroClipboard.destroy();
+    });
+
+    // 触发事件
+    me.fireEvent("zeroclipboardready", client);
+  }
+
+  return {
+    bindEvents: {
+      ready: function() {
+        if (!browser.ie) {
+          if (window.ZeroClipboard) {
+            initZeroClipboard();
+          } else {
+            utils.loadFile(
+              document,
+              {
+                src:
+                  me.options.UEDITOR_HOME_URL +
+                    "third-party/zeroclipboard/ZeroClipboard.js",
+                tag: "script",
+                type: "text/javascript",
+                defer: "defer"
+              },
+              function() {
+                initZeroClipboard();
+              }
+            );
+          }
+        }
+      }
+    },
+    commands: {
+      copy: {
+        execCommand: function(cmd) {
+          if (!me.document.execCommand("copy")) {
+            alert(me.getLang("copymsg"));
+          }
+        }
+      }
+    }
+  };
+});
+
+
+// plugins/paste.js
+///import core
+///import plugins/inserthtml.js
+///import plugins/undo.js
+///import plugins/serialize.js
+///commands 粘贴
+///commandsName  PastePlain
+///commandsTitle  纯文本粘贴模式
+/**
+ * @description 粘贴
+ * @author zhanyi
+ */
+UE.plugins["paste"] = function() {
+  function getClipboardData(callback) {
+    var doc = this.document;
+    if (doc.getElementById("baidu_pastebin")) {
+      return;
+    }
+    var range = this.selection.getRange(),
+      bk = range.createBookmark(),
+      //创建剪贴的容器div
+      pastebin = doc.createElement("div");
+    pastebin.id = "baidu_pastebin";
+    // Safari 要求div必须有内容，才能粘贴内容进来
+    browser.webkit &&
+      pastebin.appendChild(
+        doc.createTextNode(domUtils.fillChar + domUtils.fillChar)
+      );
+    doc.body.appendChild(pastebin);
+    //trace:717 隐藏的span不能得到top
+    //bk.start.innerHTML = '&nbsp;';
+    bk.start.style.display = "";
+    pastebin.style.cssText =
+      "position:absolute;width:1px;height:1px;overflow:hidden;left:-1000px;white-space:nowrap;top:" +
+      //要在现在光标平行的位置加入，否则会出现跳动的问题
+      domUtils.getXY(bk.start).y +
+      "px";
+
+    range.selectNodeContents(pastebin).select(true);
+
+    setTimeout(function() {
+      if (browser.webkit) {
+        for (
+          var i = 0, pastebins = doc.querySelectorAll("#baidu_pastebin"), pi;
+          (pi = pastebins[i++]);
+
+        ) {
+          if (domUtils.isEmptyNode(pi)) {
+            domUtils.remove(pi);
+          } else {
+            pastebin = pi;
+            break;
+          }
+        }
+      }
+      try {
+        pastebin.parentNode.removeChild(pastebin);
+      } catch (e) {}
+      range.moveToBookmark(bk).select(true);
+      callback(pastebin);
+    }, 0);
+  }
+
+  var me = this;
+
+  me.setOpt({
+    retainOnlyLabelPasted: false
+  });
+
+  var txtContent, htmlContent, address;
+
+  function getPureHtml(html) {
+    return html.replace(/<(\/?)([\w\-]+)([^>]*)>/gi, function(
+      a,
+      b,
+      tagName,
+      attrs
+    ) {
+      tagName = tagName.toLowerCase();
+      if ({ img: 1 }[tagName]) {
+        return a;
+      }
+      attrs = attrs.replace(
+        /([\w\-]*?)\s*=\s*(("([^"]*)")|('([^']*)')|([^\s>]+))/gi,
+        function(str, atr, val) {
+          if (
+            {
+              src: 1,
+              href: 1,
+              name: 1
+            }[atr.toLowerCase()]
+          ) {
+            return atr + "=" + val + " ";
+          }
+          return "";
+        }
+      );
+      if (
+        {
+          span: 1,
+          div: 1
+        }[tagName]
+      ) {
+        return "";
+      } else {
+        return "<" + b + tagName + " " + utils.trim(attrs) + ">";
+      }
+    });
+  }
+  function filter(div) {
+    var html;
+    if (div.firstChild) {
+      //去掉cut中添加的边界值
+      var nodes = domUtils.getElementsByTagName(div, "span");
+      for (var i = 0, ni; (ni = nodes[i++]); ) {
+        if (ni.id == "_baidu_cut_start" || ni.id == "_baidu_cut_end") {
+          domUtils.remove(ni);
+        }
+      }
+
+      if (browser.webkit) {
+        var brs = div.querySelectorAll("div br");
+        for (var i = 0, bi; (bi = brs[i++]); ) {
+          var pN = bi.parentNode;
+          if (pN.tagName == "DIV" && pN.childNodes.length == 1) {
+            pN.innerHTML = "<p><br/></p>";
+            domUtils.remove(pN);
+          }
+        }
+        var divs = div.querySelectorAll("#baidu_pastebin");
+        for (var i = 0, di; (di = divs[i++]); ) {
+          var tmpP = me.document.createElement("p");
+          di.parentNode.insertBefore(tmpP, di);
+          while (di.firstChild) {
+            tmpP.appendChild(di.firstChild);
+          }
+          domUtils.remove(di);
+        }
+
+        var metas = div.querySelectorAll("meta");
+        for (var i = 0, ci; (ci = metas[i++]); ) {
+          domUtils.remove(ci);
+        }
+
+        var brs = div.querySelectorAll("br");
+        for (i = 0; (ci = brs[i++]); ) {
+          if (/^apple-/i.test(ci.className)) {
+            domUtils.remove(ci);
+          }
+        }
+      }
+      if (browser.gecko) {
+        var dirtyNodes = div.querySelectorAll("[_moz_dirty]");
+        for (i = 0; (ci = dirtyNodes[i++]); ) {
+          ci.removeAttribute("_moz_dirty");
+        }
+      }
+      if (!browser.ie) {
+        var spans = div.querySelectorAll("span.Apple-style-span");
+        for (var i = 0, ci; (ci = spans[i++]); ) {
+          domUtils.remove(ci, true);
+        }
+      }
+
+      //ie下使用innerHTML会产生多余的\r\n字符，也会产生&nbsp;这里过滤掉
+      html = div.innerHTML; //.replace(/>(?:(\s|&nbsp;)*?)</g,'><');
+
+      //过滤word粘贴过来的冗余属性
+      html = UE.filterWord(html);
+      //取消了忽略空白的第二个参数，粘贴过来的有些是有空白的，会被套上相关的标签
+      var root = UE.htmlparser(html);
+      //如果给了过滤规则就先进行过滤
+      if (me.options.filterRules) {
+        UE.filterNode(root, me.options.filterRules);
+      }
+      //执行默认的处理
+      me.filterInputRule(root);
+      //针对chrome的处理
+      if (browser.webkit) {
+        var br = root.lastChild();
+        if (br && br.type == "element" && br.tagName == "br") {
+          root.removeChild(br);
+        }
+        utils.each(me.body.querySelectorAll("div"), function(node) {
+          if (domUtils.isEmptyBlock(node)) {
+            domUtils.remove(node, true);
+          }
+        });
+      }
+      html = { html: root.toHtml() };
+      me.fireEvent("beforepaste", html, root);
+      //抢了默认的粘贴，那后边的内容就不执行了，比如表格粘贴
+      if (!html.html) {
+        return;
+      }
+      root = UE.htmlparser(html.html, true);
+      //如果开启了纯文本模式
+      if (me.queryCommandState("pasteplain") === 1) {
+        me.execCommand(
+          "insertHtml",
+          UE.filterNode(root, me.options.filterTxtRules).toHtml(),
+          true
+        );
+      } else {
+        //文本模式
+        UE.filterNode(root, me.options.filterTxtRules);
+        txtContent = root.toHtml();
+        //完全模式
+        htmlContent = html.html;
+
+        address = me.selection.getRange().createAddress(true);
+        me.execCommand(
+          "insertHtml",
+          me.getOpt("retainOnlyLabelPasted") === true
+            ? getPureHtml(htmlContent)
+            : htmlContent,
+          true
+        );
+      }
+      me.fireEvent("afterpaste", html);
+    }
+  }
+
+  me.addListener("pasteTransfer", function(cmd, plainType) {
+    if (address && txtContent && htmlContent && txtContent != htmlContent) {
+      var range = me.selection.getRange();
+      range.moveToAddress(address, true);
+
+      if (!range.collapsed) {
+        while (!domUtils.isBody(range.startContainer)) {
+          var start = range.startContainer;
+          if (start.nodeType == 1) {
+            start = start.childNodes[range.startOffset];
+            if (!start) {
+              range.setStartBefore(range.startContainer);
+              continue;
+            }
+            var pre = start.previousSibling;
+
+            if (
+              pre &&
+              pre.nodeType == 3 &&
+              new RegExp("^[\n\r\t " + domUtils.fillChar + "]*$").test(
+                pre.nodeValue
+              )
+            ) {
+              range.setStartBefore(pre);
+            }
+          }
+          if (range.startOffset == 0) {
+            range.setStartBefore(range.startContainer);
+          } else {
+            break;
+          }
+        }
+        while (!domUtils.isBody(range.endContainer)) {
+          var end = range.endContainer;
+          if (end.nodeType == 1) {
+            end = end.childNodes[range.endOffset];
+            if (!end) {
+              range.setEndAfter(range.endContainer);
+              continue;
+            }
+            var next = end.nextSibling;
+            if (
+              next &&
+              next.nodeType == 3 &&
+              new RegExp("^[\n\r\t" + domUtils.fillChar + "]*$").test(
+                next.nodeValue
+              )
+            ) {
+              range.setEndAfter(next);
+            }
+          }
+          if (
+            range.endOffset ==
+            range.endContainer[
+              range.endContainer.nodeType == 3 ? "nodeValue" : "childNodes"
+            ].length
+          ) {
+            range.setEndAfter(range.endContainer);
+          } else {
+            break;
+          }
+        }
+      }
+
+      range.deleteContents();
+      range.select(true);
+      me.__hasEnterExecCommand = true;
+      var html = htmlContent;
+      if (plainType === 2) {
+        html = getPureHtml(html);
+      } else if (plainType) {
+        html = txtContent;
+      }
+      me.execCommand("inserthtml", html, true);
+      me.__hasEnterExecCommand = false;
+      var rng = me.selection.getRange();
+      while (
+        !domUtils.isBody(rng.startContainer) &&
+        !rng.startOffset &&
+        rng.startContainer[
+          rng.startContainer.nodeType == 3 ? "nodeValue" : "childNodes"
+        ].length
+      ) {
+        rng.setStartBefore(rng.startContainer);
+      }
+      var tmpAddress = rng.createAddress(true);
+      address.endAddress = tmpAddress.startAddress;
+    }
+  });
+
+  me.addListener("ready", function() {
+    domUtils.on(me.body, "cut", function() {
+      var range = me.selection.getRange();
+      if (!range.collapsed && me.undoManger) {
+        me.undoManger.save();
+      }
+    });
+
+    //ie下beforepaste在点击右键时也会触发，所以用监控键盘才处理
+    domUtils.on(
+      me.body,
+      browser.ie || browser.opera ? "keydown" : "paste",
+      function(e) {
+        if (
+          (browser.ie || browser.opera) &&
+          ((!e.ctrlKey && !e.metaKey) || e.keyCode != "86")
+        ) {
+          return;
+        }
+        getClipboardData.call(me, function(div) {
+          filter(div);
+        });
+      }
+    );
+  });
+
+  me.commands["paste"] = {
+    execCommand: function(cmd) {
+      if (browser.ie) {
+        getClipboardData.call(me, function(div) {
+          filter(div);
+        });
+        me.document.execCommand("paste");
+      } else {
+        alert(me.getLang("pastemsg"));
+      }
+    }
+  };
+};
+
+
+// plugins/puretxtpaste.js
+/**
+ * 纯文本粘贴插件
+ * @file
+ * @since 1.2.6.1
+ */
+
+UE.plugins["pasteplain"] = function() {
+  var me = this;
+  me.setOpt({
+    pasteplain: false,
+    filterTxtRules: (function() {
+      function transP(node) {
+        node.tagName = "p";
+        node.setStyle();
+      }
+      function removeNode(node) {
+        node.parentNode.removeChild(node, true);
+      }
+      return {
+        //直接删除及其字节点内容
+        "-": "script style object iframe embed input select",
+        p: { $: {} },
+        br: { $: {} },
+        div: function(node) {
+          var tmpNode,
+            p = UE.uNode.createElement("p");
+          while ((tmpNode = node.firstChild())) {
+            if (tmpNode.type == "text" || !UE.dom.dtd.$block[tmpNode.tagName]) {
+              p.appendChild(tmpNode);
+            } else {
+              if (p.firstChild()) {
+                node.parentNode.insertBefore(p, node);
+                p = UE.uNode.createElement("p");
+              } else {
+                node.parentNode.insertBefore(tmpNode, node);
+              }
+            }
+          }
+          if (p.firstChild()) {
+            node.parentNode.insertBefore(p, node);
+          }
+          node.parentNode.removeChild(node);
+        },
+        ol: removeNode,
+        ul: removeNode,
+        dl: removeNode,
+        dt: removeNode,
+        dd: removeNode,
+        li: removeNode,
+        caption: transP,
+        th: transP,
+        tr: transP,
+        h1: transP,
+        h2: transP,
+        h3: transP,
+        h4: transP,
+        h5: transP,
+        h6: transP,
+        td: function(node) {
+          //没有内容的td直接删掉
+          var txt = !!node.innerText();
+          if (txt) {
+            node.parentNode.insertAfter(
+              UE.uNode.createText(" &nbsp; &nbsp;"),
+              node
+            );
+          }
+          node.parentNode.removeChild(node, node.innerText());
+        }
+      };
+    })()
+  });
+  //暂时这里支持一下老版本的属性
+  var pasteplain = me.options.pasteplain;
+
+  /**
+     * 启用或取消纯文本粘贴模式
+     * @command pasteplain
+     * @method execCommand
+     * @param { String } cmd 命令字符串
+     * @example
+     * ```javascript
+     * editor.queryCommandState( 'pasteplain' );
+     * ```
+     */
+
+  /**
+     * 查询当前是否处于纯文本粘贴模式
+     * @command pasteplain
+     * @method queryCommandState
+     * @param { String } cmd 命令字符串
+     * @return { int } 如果处于纯文本模式，返回1，否则，返回0
+     * @example
+     * ```javascript
+     * editor.queryCommandState( 'pasteplain' );
+     * ```
+     */
+  me.commands["pasteplain"] = {
+    queryCommandState: function() {
+      return pasteplain ? 1 : 0;
+    },
+    execCommand: function() {
+      pasteplain = !pasteplain | 0;
+    },
+    notNeedUndo: 1
+  };
+};
+
+
+// plugins/list.js
+/**
+ * 有序列表,无序列表插件
+ * @file
+ * @since 1.2.6.1
+ */
+
+UE.plugins["list"] = function() {
+  var me = this,
+    notExchange = {
+      TD: 1,
+      PRE: 1,
+      BLOCKQUOTE: 1
+    };
+  var customStyle = {
+    cn: "cn-1-",
+    cn1: "cn-2-",
+    cn2: "cn-3-",
+    num: "num-1-",
+    num1: "num-2-",
+    num2: "num-3-",
+    dash: "dash",
+    dot: "dot"
+  };
+
+  me.setOpt({
+    autoTransWordToList: false,
+    insertorderedlist: {
+      num: "",
+      num1: "",
+      num2: "",
+      cn: "",
+      cn1: "",
+      cn2: "",
+      decimal: "",
+      "lower-alpha": "",
+      "lower-roman": "",
+      "upper-alpha": "",
+      "upper-roman": ""
+    },
+    insertunorderedlist: {
+      circle: "",
+      disc: "",
+      square: "",
+      dash: "",
+      dot: ""
+    },
+    listDefaultPaddingLeft: "30",
+    listiconpath: "http://bs.baidu.com/listicon/",
+    maxListLevel: -1, //-1不限制
+    disablePInList: false
+  });
+  function listToArray(list) {
+    var arr = [];
+    for (var p in list) {
+      arr.push(p);
+    }
+    return arr;
+  }
+  var listStyle = {
+    OL: listToArray(me.options.insertorderedlist),
+    UL: listToArray(me.options.insertunorderedlist)
+  };
+  var liiconpath = me.options.listiconpath;
+
+  //根据用户配置，调整customStyle
+  for (var s in customStyle) {
+    if (
+      !me.options.insertorderedlist.hasOwnProperty(s) &&
+      !me.options.insertunorderedlist.hasOwnProperty(s)
+    ) {
+      delete customStyle[s];
+    }
+  }
+
+  me.ready(function() {
+    var customCss = [];
+    for (var p in customStyle) {
+      if (p == "dash" || p == "dot") {
+        customCss.push(
+          "li.list-" +
+            customStyle[p] +
+            "{background-image:url(" +
+            liiconpath +
+            customStyle[p] +
+            ".gif)}"
+        );
+        customCss.push(
+          "ul.custom_" +
+            p +
+            "{list-style:none;}ul.custom_" +
+            p +
+            " li{background-position:0 3px;background-repeat:no-repeat}"
+        );
+      } else {
+        for (var i = 0; i < 99; i++) {
+          customCss.push(
+            "li.list-" +
+              customStyle[p] +
+              i +
+              "{background-image:url(" +
+              liiconpath +
+              "list-" +
+              customStyle[p] +
+              i +
+              ".gif)}"
+          );
+        }
+        customCss.push(
+          "ol.custom_" +
+            p +
+            "{list-style:none;}ol.custom_" +
+            p +
+            " li{background-position:0 3px;background-repeat:no-repeat}"
+        );
+      }
+      switch (p) {
+        case "cn":
+          customCss.push("li.list-" + p + "-paddingleft-1{padding-left:25px}");
+          customCss.push("li.list-" + p + "-paddingleft-2{padding-left:40px}");
+          customCss.push("li.list-" + p + "-paddingleft-3{padding-left:55px}");
+          break;
+        case "cn1":
+          customCss.push("li.list-" + p + "-paddingleft-1{padding-left:30px}");
+          customCss.push("li.list-" + p + "-paddingleft-2{padding-left:40px}");
+          customCss.push("li.list-" + p + "-paddingleft-3{padding-left:55px}");
+          break;
+        case "cn2":
+          customCss.push("li.list-" + p + "-paddingleft-1{padding-left:40px}");
+          customCss.push("li.list-" + p + "-paddingleft-2{padding-left:55px}");
+          customCss.push("li.list-" + p + "-paddingleft-3{padding-left:68px}");
+          break;
+        case "num":
+        case "num1":
+          customCss.push("li.list-" + p + "-paddingleft-1{padding-left:25px}");
+          break;
+        case "num2":
+          customCss.push("li.list-" + p + "-paddingleft-1{padding-left:35px}");
+          customCss.push("li.list-" + p + "-paddingleft-2{padding-left:40px}");
+          break;
+        case "dash":
+          customCss.push("li.list-" + p + "-paddingleft{padding-left:35px}");
+          break;
+        case "dot":
+          customCss.push("li.list-" + p + "-paddingleft{padding-left:20px}");
+      }
+    }
+    customCss.push(".list-paddingleft-1{padding-left:0}");
+    customCss.push(
+      ".list-paddingleft-2{padding-left:" +
+        me.options.listDefaultPaddingLeft +
+        "px}"
+    );
+    customCss.push(
+      ".list-paddingleft-3{padding-left:" +
+        me.options.listDefaultPaddingLeft * 2 +
+        "px}"
+    );
+    //如果不给宽度会在自定应样式里出现滚动条
+    utils.cssRule(
+      "list",
+      "ol,ul{margin:0;pading:0;" +
+        (browser.ie ? "" : "width:95%") +
+        "}li{clear:both;}" +
+        customCss.join("\n"),
+      me.document
+    );
+  });
+  //单独处理剪切的问题
+  me.ready(function() {
+    domUtils.on(me.body, "cut", function() {
+      setTimeout(function() {
+        var rng = me.selection.getRange(),
+          li;
+        //trace:3416
+        if (!rng.collapsed) {
+          if (
+            (li = domUtils.findParentByTagName(rng.startContainer, "li", true))
+          ) {
+            if (!li.nextSibling && domUtils.isEmptyBlock(li)) {
+              var pn = li.parentNode,
+                node;
+              if ((node = pn.previousSibling)) {
+                domUtils.remove(pn);
+                rng.setStartAtLast(node).collapse(true);
+                rng.select(true);
+              } else if ((node = pn.nextSibling)) {
+                domUtils.remove(pn);
+                rng.setStartAtFirst(node).collapse(true);
+                rng.select(true);
+              } else {
+                var tmpNode = me.document.createElement("p");
+                domUtils.fillNode(me.document, tmpNode);
+                pn.parentNode.insertBefore(tmpNode, pn);
+                domUtils.remove(pn);
+                rng.setStart(tmpNode, 0).collapse(true);
+                rng.select(true);
+              }
+            }
+          }
+        }
+      });
+    });
+  });
+
+  function getStyle(node) {
+    var cls = node.className;
+    if (domUtils.hasClass(node, /custom_/)) {
+      return cls.match(/custom_(\w+)/)[1];
+    }
+    return domUtils.getStyle(node, "list-style-type");
+  }
+
+  me.addListener("beforepaste", function(type, html) {
+    var me = this,
+      rng = me.selection.getRange(),
+      li;
+    var root = UE.htmlparser(html.html, true);
+    if ((li = domUtils.findParentByTagName(rng.startContainer, "li", true))) {
+      var list = li.parentNode,
+        tagName = list.tagName == "OL" ? "ul" : "ol";
+      utils.each(root.getNodesByTagName(tagName), function(n) {
+        n.tagName = list.tagName;
+        n.setAttr();
+        if (n.parentNode === root) {
+          type = getStyle(list) || (list.tagName == "OL" ? "decimal" : "disc");
+        } else {
+          var className = n.parentNode.getAttr("class");
+          if (className && /custom_/.test(className)) {
+            type = className.match(/custom_(\w+)/)[1];
+          } else {
+            type = n.parentNode.getStyle("list-style-type");
+          }
+          if (!type) {
+            type = list.tagName == "OL" ? "decimal" : "disc";
+          }
+        }
+        var index = utils.indexOf(listStyle[list.tagName], type);
+        if (n.parentNode !== root)
+          index = index + 1 == listStyle[list.tagName].length ? 0 : index + 1;
+        var currentStyle = listStyle[list.tagName][index];
+        if (customStyle[currentStyle]) {
+          n.setAttr("class", "custom_" + currentStyle);
+        } else {
+          n.setStyle("list-style-type", currentStyle);
+        }
+      });
+    }
+
+    html.html = root.toHtml();
+  });
+  //导出时，去掉p标签
+  me.getOpt("disablePInList") === true &&
+    me.addOutputRule(function(root) {
+      utils.each(root.getNodesByTagName("li"), function(li) {
+        var newChildrens = [],
+          index = 0;
+        utils.each(li.children, function(n) {
+          if (n.tagName == "p") {
+            var tmpNode;
+            while ((tmpNode = n.children.pop())) {
+              newChildrens.splice(index, 0, tmpNode);
+              tmpNode.parentNode = li;
+              lastNode = tmpNode;
+            }
+            tmpNode = newChildrens[newChildrens.length - 1];
+            if (
+              !tmpNode ||
+              tmpNode.type != "element" ||
+              tmpNode.tagName != "br"
+            ) {
+              var br = UE.uNode.createElement("br");
+              br.parentNode = li;
+              newChildrens.push(br);
+            }
+
+            index = newChildrens.length;
+          }
+        });
+        if (newChildrens.length) {
+          li.children = newChildrens;
+        }
+      });
+    });
+  //进入编辑器的li要套p标签
+  me.addInputRule(function(root) {
+    utils.each(root.getNodesByTagName("li"), function(li) {
+      var tmpP = UE.uNode.createElement("p");
+      for (var i = 0, ci; (ci = li.children[i]); ) {
+        if (ci.type == "text" || dtd.p[ci.tagName]) {
+          tmpP.appendChild(ci);
+        } else {
+          if (tmpP.firstChild()) {
+            li.insertBefore(tmpP, ci);
+            tmpP = UE.uNode.createElement("p");
+            i = i + 2;
+          } else {
+            i++;
+          }
+        }
+      }
+      if ((tmpP.firstChild() && !tmpP.parentNode) || !li.firstChild()) {
+        li.appendChild(tmpP);
+      }
+      //trace:3357
+      //p不能为空
+      if (!tmpP.firstChild()) {
+        tmpP.innerHTML(browser.ie ? "&nbsp;" : "<br/>");
+      }
+      //去掉末尾的空白
+      var p = li.firstChild();
+      var lastChild = p.lastChild();
+      if (
+        lastChild &&
+        lastChild.type == "text" &&
+        /^\s*$/.test(lastChild.data)
+      ) {
+        p.removeChild(lastChild);
+      }
+    });
+    if (me.options.autoTransWordToList) {
+      var orderlisttype = {
+        num1: /^\d+\)/,
+        decimal: /^\d+\./,
+        "lower-alpha": /^[a-z]+\)/,
+        "upper-alpha": /^[A-Z]+\./,
+        cn: /^[\u4E00\u4E8C\u4E09\u56DB\u516d\u4e94\u4e03\u516b\u4e5d]+[\u3001]/,
+        cn2: /^\([\u4E00\u4E8C\u4E09\u56DB\u516d\u4e94\u4e03\u516b\u4e5d]+\)/
+      },
+        unorderlisttype = {
+          square: "n"
+        };
+      function checkListType(content, container) {
+        var span = container.firstChild();
+        if (
+          span &&
+          span.type == "element" &&
+          span.tagName == "span" &&
+          /Wingdings|Symbol/.test(span.getStyle("font-family"))
+        ) {
+          for (var p in unorderlisttype) {
+            if (unorderlisttype[p] == span.data) {
+              return p;
+            }
+          }
+          return "disc";
+        }
+        for (var p in orderlisttype) {
+          if (orderlisttype[p].test(content)) {
+            return p;
+          }
+        }
+      }
+      utils.each(root.getNodesByTagName("p"), function(node) {
+        if (node.getAttr("class") != "MsoListParagraph") {
+          return;
+        }
+
+        //word粘贴过来的会带有margin要去掉,但这样也可能会误命中一些央视
+        node.setStyle("margin", "");
+        node.setStyle("margin-left", "");
+        node.setAttr("class", "");
+
+        function appendLi(list, p, type) {
+          if (list.tagName == "ol") {
+            if (browser.ie) {
+              var first = p.firstChild();
+              if (
+                first.type == "element" &&
+                first.tagName == "span" &&
+                orderlisttype[type].test(first.innerText())
+              ) {
+                p.removeChild(first);
+              }
+            } else {
+              p.innerHTML(p.innerHTML().replace(orderlisttype[type], ""));
+            }
+          } else {
+            p.removeChild(p.firstChild());
+          }
+
+          var li = UE.uNode.createElement("li");
+          li.appendChild(p);
+          list.appendChild(li);
+        }
+        var tmp = node,
+          type,
+          cacheNode = node;
+
+        if (
+          node.parentNode.tagName != "li" &&
+          (type = checkListType(node.innerText(), node))
+        ) {
+          var list = UE.uNode.createElement(
+            me.options.insertorderedlist.hasOwnProperty(type) ? "ol" : "ul"
+          );
+          if (customStyle[type]) {
+            list.setAttr("class", "custom_" + type);
+          } else {
+            list.setStyle("list-style-type", type);
+          }
+          while (
+            node &&
+            node.parentNode.tagName != "li" &&
+            checkListType(node.innerText(), node)
+          ) {
+            tmp = node.nextSibling();
+            if (!tmp) {
+              node.parentNode.insertBefore(list, node);
+            }
+            appendLi(list, node, type);
+            node = tmp;
+          }
+          if (!list.parentNode && node && node.parentNode) {
+            node.parentNode.insertBefore(list, node);
+          }
+        }
+        var span = cacheNode.firstChild();
+        if (
+          span &&
+          span.type == "element" &&
+          span.tagName == "span" &&
+          /^\s*(&nbsp;)+\s*$/.test(span.innerText())
+        ) {
+          span.parentNode.removeChild(span);
+        }
+      });
+    }
+  });
+
+  //调整索引标签
+  me.addListener("contentchange", function() {
+    adjustListStyle(me.document);
+  });
+
+  function adjustListStyle(doc, ignore) {
+    utils.each(domUtils.getElementsByTagName(doc, "ol ul"), function(node) {
+      if (!domUtils.inDoc(node, doc)) return;
+
+      var parent = node.parentNode;
+      if (parent.tagName == node.tagName) {
+        var nodeStyleType =
+          getStyle(node) || (node.tagName == "OL" ? "decimal" : "disc"),
+          parentStyleType =
+            getStyle(parent) || (parent.tagName == "OL" ? "decimal" : "disc");
+        if (nodeStyleType == parentStyleType) {
+          var styleIndex = utils.indexOf(
+            listStyle[node.tagName],
+            nodeStyleType
+          );
+          styleIndex = styleIndex + 1 == listStyle[node.tagName].length
+            ? 0
+            : styleIndex + 1;
+          setListStyle(node, listStyle[node.tagName][styleIndex]);
+        }
+      }
+      var index = 0,
+        type = 2;
+      if (domUtils.hasClass(node, /custom_/)) {
+        if (
+          !(
+            /[ou]l/i.test(parent.tagName) &&
+            domUtils.hasClass(parent, /custom_/)
+          )
+        ) {
+          type = 1;
+        }
+      } else {
+        if (
+          /[ou]l/i.test(parent.tagName) &&
+          domUtils.hasClass(parent, /custom_/)
+        ) {
+          type = 3;
+        }
+      }
+
+      var style = domUtils.getStyle(node, "list-style-type");
+      style && (node.style.cssText = "list-style-type:" + style);
+      node.className =
+        utils.trim(node.className.replace(/list-paddingleft-\w+/, "")) +
+        " list-paddingleft-" +
+        type;
+      utils.each(domUtils.getElementsByTagName(node, "li"), function(li) {
+        li.style.cssText && (li.style.cssText = "");
+        if (!li.firstChild) {
+          domUtils.remove(li);
+          return;
+        }
+        if (li.parentNode !== node) {
+          return;
+        }
+        index++;
+        if (domUtils.hasClass(node, /custom_/)) {
+          var paddingLeft = 1,
+            currentStyle = getStyle(node);
+          if (node.tagName == "OL") {
+            if (currentStyle) {
+              switch (currentStyle) {
+                case "cn":
+                case "cn1":
+                case "cn2":
+                  if (
+                    index > 10 &&
+                    (index % 10 == 0 || (index > 10 && index < 20))
+                  ) {
+                    paddingLeft = 2;
+                  } else if (index > 20) {
+                    paddingLeft = 3;
+                  }
+                  break;
+                case "num2":
+                  if (index > 9) {
+                    paddingLeft = 2;
+                  }
+              }
+            }
+            li.className =
+              "list-" +
+              customStyle[currentStyle] +
+              index +
+              " " +
+              "list-" +
+              currentStyle +
+              "-paddingleft-" +
+              paddingLeft;
+          } else {
+            li.className =
+              "list-" +
+              customStyle[currentStyle] +
+              " " +
+              "list-" +
+              currentStyle +
+              "-paddingleft";
+          }
+        } else {
+          li.className = li.className.replace(/list-[\w\-]+/gi, "");
+        }
+        var className = li.getAttribute("class");
+        if (className !== null && !className.replace(/\s/g, "")) {
+          domUtils.removeAttributes(li, "class");
+        }
+      });
+      !ignore &&
+        adjustList(
+          node,
+          node.tagName.toLowerCase(),
+          getStyle(node) || domUtils.getStyle(node, "list-style-type"),
+          true
+        );
+    });
+  }
+  function adjustList(list, tag, style, ignoreEmpty) {
+    var nextList = list.nextSibling;
+    if (
+      nextList &&
+      nextList.nodeType == 1 &&
+      nextList.tagName.toLowerCase() == tag &&
+      (getStyle(nextList) ||
+        domUtils.getStyle(nextList, "list-style-type") ||
+        (tag == "ol" ? "decimal" : "disc")) == style
+    ) {
+      domUtils.moveChild(nextList, list);
+      if (nextList.childNodes.length == 0) {
+        domUtils.remove(nextList);
+      }
+    }
+    if (nextList && domUtils.isFillChar(nextList)) {
+      domUtils.remove(nextList);
+    }
+    var preList = list.previousSibling;
+    if (
+      preList &&
+      preList.nodeType == 1 &&
+      preList.tagName.toLowerCase() == tag &&
+      (getStyle(preList) ||
+        domUtils.getStyle(preList, "list-style-type") ||
+        (tag == "ol" ? "decimal" : "disc")) == style
+    ) {
+      domUtils.moveChild(list, preList);
+    }
+    if (preList && domUtils.isFillChar(preList)) {
+      domUtils.remove(preList);
+    }
+    !ignoreEmpty && domUtils.isEmptyBlock(list) && domUtils.remove(list);
+    if (getStyle(list)) {
+      adjustListStyle(list.ownerDocument, true);
+    }
+  }
+
+  function setListStyle(list, style) {
+    if (customStyle[style]) {
+      list.className = "custom_" + style;
+    }
+    try {
+      domUtils.setStyle(list, "list-style-type", style);
+    } catch (e) {}
+  }
+  function clearEmptySibling(node) {
+    var tmpNode = node.previousSibling;
+    if (tmpNode && domUtils.isEmptyBlock(tmpNode)) {
+      domUtils.remove(tmpNode);
+    }
+    tmpNode = node.nextSibling;
+    if (tmpNode && domUtils.isEmptyBlock(tmpNode)) {
+      domUtils.remove(tmpNode);
+    }
+  }
+
+  me.addListener("keydown", function(type, evt) {
+    function preventAndSave() {
+      evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
+      me.fireEvent("contentchange");
+      me.undoManger && me.undoManger.save();
+    }
+    function findList(node, filterFn) {
+      while (node && !domUtils.isBody(node)) {
+        if (filterFn(node)) {
+          return null;
+        }
+        if (node.nodeType == 1 && /[ou]l/i.test(node.tagName)) {
+          return node;
+        }
+        node = node.parentNode;
+      }
+      return null;
+    }
+    var keyCode = evt.keyCode || evt.which;
+    if (keyCode == 13 && !evt.shiftKey) {
+      //回车
+      var rng = me.selection.getRange(),
+        parent = domUtils.findParent(
+          rng.startContainer,
+          function(node) {
+            return domUtils.isBlockElm(node);
+          },
+          true
+        ),
+        li = domUtils.findParentByTagName(rng.startContainer, "li", true);
+      if (parent && parent.tagName != "PRE" && !li) {
+        var html = parent.innerHTML.replace(
+          new RegExp(domUtils.fillChar, "g"),
+          ""
+        );
+        if (/^\s*1\s*\.[^\d]/.test(html)) {
+          parent.innerHTML = html.replace(/^\s*1\s*\./, "");
+          rng.setStartAtLast(parent).collapse(true).select();
+          me.__hasEnterExecCommand = true;
+          me.execCommand("insertorderedlist");
+          me.__hasEnterExecCommand = false;
+        }
+      }
+      var range = me.selection.getRange(),
+        start = findList(range.startContainer, function(node) {
+          return node.tagName == "TABLE";
+        }),
+        end = range.collapsed
+          ? start
+          : findList(range.endContainer, function(node) {
+              return node.tagName == "TABLE";
+            });
+
+      if (start && end && start === end) {
+        if (!range.collapsed) {
+          start = domUtils.findParentByTagName(
+            range.startContainer,
+            "li",
+            true
+          );
+          end = domUtils.findParentByTagName(range.endContainer, "li", true);
+          if (start && end && start === end) {
+            range.deleteContents();
+            li = domUtils.findParentByTagName(range.startContainer, "li", true);
+            if (li && domUtils.isEmptyBlock(li)) {
+              pre = li.previousSibling;
+              next = li.nextSibling;
+              p = me.document.createElement("p");
+
+              domUtils.fillNode(me.document, p);
+              parentList = li.parentNode;
+              if (pre && next) {
+                range.setStart(next, 0).collapse(true).select(true);
+                domUtils.remove(li);
+              } else {
+                if ((!pre && !next) || !pre) {
+                  parentList.parentNode.insertBefore(p, parentList);
+                } else {
+                  li.parentNode.parentNode.insertBefore(
+                    p,
+                    parentList.nextSibling
+                  );
+                }
+                domUtils.remove(li);
+                if (!parentList.firstChild) {
+                  domUtils.remove(parentList);
+                }
+                range.setStart(p, 0).setCursor();
+              }
+              preventAndSave();
+              return;
+            }
+          } else {
+            var tmpRange = range.cloneRange(),
+              bk = tmpRange.collapse(false).createBookmark();
+
+            range.deleteContents();
+            tmpRange.moveToBookmark(bk);
+            var li = domUtils.findParentByTagName(
+              tmpRange.startContainer,
+              "li",
+              true
+            );
+
+            clearEmptySibling(li);
+            tmpRange.select();
+            preventAndSave();
+            return;
+          }
+        }
+
+        li = domUtils.findParentByTagName(range.startContainer, "li", true);
+
+        if (li) {
+          if (domUtils.isEmptyBlock(li)) {
+            bk = range.createBookmark();
+            var parentList = li.parentNode;
+            if (li !== parentList.lastChild) {
+              domUtils.breakParent(li, parentList);
+              clearEmptySibling(li);
+            } else {
+              parentList.parentNode.insertBefore(li, parentList.nextSibling);
+              if (domUtils.isEmptyNode(parentList)) {
+                domUtils.remove(parentList);
+              }
+            }
+            //嵌套不处理
+            if (!dtd.$list[li.parentNode.tagName]) {
+              if (!domUtils.isBlockElm(li.firstChild)) {
+                p = me.document.createElement("p");
+                li.parentNode.insertBefore(p, li);
+                while (li.firstChild) {
+                  p.appendChild(li.firstChild);
+                }
+                domUtils.remove(li);
+              } else {
+                domUtils.remove(li, true);
+              }
+            }
+            range.moveToBookmark(bk).select();
+          } else {
+            var first = li.firstChild;
+            if (!first || !domUtils.isBlockElm(first)) {
+              var p = me.document.createElement("p");
+
+              !li.firstChild && domUtils.fillNode(me.document, p);
+              while (li.firstChild) {
+                p.appendChild(li.firstChild);
+              }
+              li.appendChild(p);
+              first = p;
+            }
+
+            var span = me.document.createElement("span");
+
+            range.insertNode(span);
+            domUtils.breakParent(span, li);
+
+            var nextLi = span.nextSibling;
+            first = nextLi.firstChild;
+
+            if (!first) {
+              p = me.document.createElement("p");
+
+              domUtils.fillNode(me.document, p);
+              nextLi.appendChild(p);
+              first = p;
+            }
+            if (domUtils.isEmptyNode(first)) {
+              first.innerHTML = "";
+              domUtils.fillNode(me.document, first);
+            }
+
+            range.setStart(first, 0).collapse(true).shrinkBoundary().select();
+            domUtils.remove(span);
+            var pre = nextLi.previousSibling;
+            if (pre && domUtils.isEmptyBlock(pre)) {
+              pre.innerHTML = "<p></p>";
+              domUtils.fillNode(me.document, pre.firstChild);
+            }
+          }
+          //                        }
+          preventAndSave();
+        }
+      }
+    }
+    if (keyCode == 8) {
+      //修中ie中li下的问题
+      range = me.selection.getRange();
+      if (range.collapsed && domUtils.isStartInblock(range)) {
+        tmpRange = range.cloneRange().trimBoundary();
+        li = domUtils.findParentByTagName(range.startContainer, "li", true);
+        //要在li的最左边，才能处理
+        if (li && domUtils.isStartInblock(tmpRange)) {
+          start = domUtils.findParentByTagName(range.startContainer, "p", true);
+          if (start && start !== li.firstChild) {
+            var parentList = domUtils.findParentByTagName(start, ["ol", "ul"]);
+            domUtils.breakParent(start, parentList);
+            clearEmptySibling(start);
+            me.fireEvent("contentchange");
+            range.setStart(start, 0).setCursor(false, true);
+            me.fireEvent("saveScene");
+            domUtils.preventDefault(evt);
+            return;
+          }
+
+          if (li && (pre = li.previousSibling)) {
+            if (keyCode == 46 && li.childNodes.length) {
+              return;
+            }
+            //有可能上边的兄弟节点是个2级菜单，要追加到2级菜单的最后的li
+            if (dtd.$list[pre.tagName]) {
+              pre = pre.lastChild;
+            }
+            me.undoManger && me.undoManger.save();
+            first = li.firstChild;
+            if (domUtils.isBlockElm(first)) {
+              if (domUtils.isEmptyNode(first)) {
+                //                                    range.setEnd(pre, pre.childNodes.length).shrinkBoundary().collapse().select(true);
+                pre.appendChild(first);
+                range.setStart(first, 0).setCursor(false, true);
+                //first不是唯一的节点
+                while (li.firstChild) {
+                  pre.appendChild(li.firstChild);
+                }
+              } else {
+                span = me.document.createElement("span");
+                range.insertNode(span);
+                //判断pre是否是空的节点,如果是<p><br/></p>类型的空节点，干掉p标签防止它占位
+                if (domUtils.isEmptyBlock(pre)) {
+                  pre.innerHTML = "";
+                }
+                domUtils.moveChild(li, pre);
+                range.setStartBefore(span).collapse(true).select(true);
+
+                domUtils.remove(span);
+              }
+            } else {
+              if (domUtils.isEmptyNode(li)) {
+                var p = me.document.createElement("p");
+                pre.appendChild(p);
+                range.setStart(p, 0).setCursor();
+                //                                    range.setEnd(pre, pre.childNodes.length).shrinkBoundary().collapse().select(true);
+              } else {
+                range
+                  .setEnd(pre, pre.childNodes.length)
+                  .collapse()
+                  .select(true);
+                while (li.firstChild) {
+                  pre.appendChild(li.firstChild);
+                }
+              }
+            }
+            domUtils.remove(li);
+            me.fireEvent("contentchange");
+            me.fireEvent("saveScene");
+            domUtils.preventDefault(evt);
+            return;
+          }
+          //trace:980
+
+          if (li && !li.previousSibling) {
+            var parentList = li.parentNode;
+            var bk = range.createBookmark();
+            if (domUtils.isTagNode(parentList.parentNode, "ol ul")) {
+              parentList.parentNode.insertBefore(li, parentList);
+              if (domUtils.isEmptyNode(parentList)) {
+                domUtils.remove(parentList);
+              }
+            } else {
+              while (li.firstChild) {
+                parentList.parentNode.insertBefore(li.firstChild, parentList);
+              }
+
+              domUtils.remove(li);
+              if (domUtils.isEmptyNode(parentList)) {
+                domUtils.remove(parentList);
+              }
+            }
+            range.moveToBookmark(bk).setCursor(false, true);
+            me.fireEvent("contentchange");
+            me.fireEvent("saveScene");
+            domUtils.preventDefault(evt);
+            return;
+          }
+        }
+      }
+    }
+  });
+
+  me.addListener("keyup", function(type, evt) {
+    var keyCode = evt.keyCode || evt.which;
+    if (keyCode == 8) {
+      var rng = me.selection.getRange(),
+        list;
+      if (
+        (list = domUtils.findParentByTagName(
+          rng.startContainer,
+          ["ol", "ul"],
+          true
+        ))
+      ) {
+        adjustList(
+          list,
+          list.tagName.toLowerCase(),
+          getStyle(list) || domUtils.getComputedStyle(list, "list-style-type"),
+          true
+        );
+      }
+    }
+  });
+  //处理tab键
+  me.addListener("tabkeydown", function() {
+    var range = me.selection.getRange();
+
+    //控制级数
+    function checkLevel(li) {
+      if (me.options.maxListLevel != -1) {
+        var level = li.parentNode,
+          levelNum = 0;
+        while (/[ou]l/i.test(level.tagName)) {
+          levelNum++;
+          level = level.parentNode;
+        }
+        if (levelNum >= me.options.maxListLevel) {
+          return true;
+        }
+      }
+    }
+    //只以开始为准
+    //todo 后续改进
+    var li = domUtils.findParentByTagName(range.startContainer, "li", true);
+    if (li) {
+      var bk;
+      if (range.collapsed) {
+        if (checkLevel(li)) return true;
+        var parentLi = li.parentNode,
+          list = me.document.createElement(parentLi.tagName),
+          index = utils.indexOf(
+            listStyle[list.tagName],
+            getStyle(parentLi) ||
+              domUtils.getComputedStyle(parentLi, "list-style-type")
+          );
+        index = index + 1 == listStyle[list.tagName].length ? 0 : index + 1;
+        var currentStyle = listStyle[list.tagName][index];
+        setListStyle(list, currentStyle);
+        if (domUtils.isStartInblock(range)) {
+          me.fireEvent("saveScene");
+          bk = range.createBookmark();
+          parentLi.insertBefore(list, li);
+          list.appendChild(li);
+          adjustList(list, list.tagName.toLowerCase(), currentStyle);
+          me.fireEvent("contentchange");
+          range.moveToBookmark(bk).select(true);
+          return true;
+        }
+      } else {
+        me.fireEvent("saveScene");
+        bk = range.createBookmark();
+        for (
+          var i = 0, closeList, parents = domUtils.findParents(li), ci;
+          (ci = parents[i++]);
+
+        ) {
+          if (domUtils.isTagNode(ci, "ol ul")) {
+            closeList = ci;
+            break;
+          }
+        }
+        var current = li;
+        if (bk.end) {
+          while (
+            current &&
+            !(
+              domUtils.getPosition(current, bk.end) &
+              domUtils.POSITION_FOLLOWING
+            )
+          ) {
+            if (checkLevel(current)) {
+              current = domUtils.getNextDomNode(current, false, null, function(
+                node
+              ) {
+                return node !== closeList;
+              });
+              continue;
+            }
+            var parentLi = current.parentNode,
+              list = me.document.createElement(parentLi.tagName),
+              index = utils.indexOf(
+                listStyle[list.tagName],
+                getStyle(parentLi) ||
+                  domUtils.getComputedStyle(parentLi, "list-style-type")
+              );
+            var currentIndex = index + 1 == listStyle[list.tagName].length
+              ? 0
+              : index + 1;
+            var currentStyle = listStyle[list.tagName][currentIndex];
+            setListStyle(list, currentStyle);
+            parentLi.insertBefore(list, current);
+            while (
+              current &&
+              !(
+                domUtils.getPosition(current, bk.end) &
+                domUtils.POSITION_FOLLOWING
+              )
+            ) {
+              li = current.nextSibling;
+              list.appendChild(current);
+              if (!li || domUtils.isTagNode(li, "ol ul")) {
+                if (li) {
+                  while ((li = li.firstChild)) {
+                    if (li.tagName == "LI") {
+                      break;
+                    }
+                  }
+                } else {
+                  li = domUtils.getNextDomNode(current, false, null, function(
+                    node
+                  ) {
+                    return node !== closeList;
+                  });
+                }
+                break;
+              }
+              current = li;
+            }
+            adjustList(list, list.tagName.toLowerCase(), currentStyle);
+            current = li;
+          }
+        }
+        me.fireEvent("contentchange");
+        range.moveToBookmark(bk).select();
+        return true;
+      }
+    }
+  });
+  function getLi(start) {
+    while (start && !domUtils.isBody(start)) {
+      if (start.nodeName == "TABLE") {
+        return null;
+      }
+      if (start.nodeName == "LI") {
+        return start;
+      }
+      start = start.parentNode;
+    }
+  }
+
+  /**
+     * 有序列表，与“insertunorderedlist”命令互斥
+     * @command insertorderedlist
+     * @method execCommand
+     * @param { String } command 命令字符串
+     * @param { String } style 插入的有序列表类型，值为：decimal,lower-alpha,lower-roman,upper-alpha,upper-roman,cn,cn1,cn2,num,num1,num2
+     * @example
+     * ```javascript
+     * editor.execCommand( 'insertorderedlist','decimal');
+     * ```
+     */
+  /**
+     * 查询当前选区内容是否有序列表
+     * @command insertorderedlist
+     * @method queryCommandState
+     * @param { String } cmd 命令字符串
+     * @return { int } 如果当前选区是有序列表返回1，否则返回0
+     * @example
+     * ```javascript
+     * editor.queryCommandState( 'insertorderedlist' );
+     * ```
+     */
+  /**
+     * 查询当前选区内容是否有序列表
+     * @command insertorderedlist
+     * @method queryCommandValue
+     * @param { String } cmd 命令字符串
+     * @return { String } 返回当前有序列表的类型，值为null或decimal,lower-alpha,lower-roman,upper-alpha,upper-roman,cn,cn1,cn2,num,num1,num2
+     * @example
+     * ```javascript
+     * editor.queryCommandValue( 'insertorderedlist' );
+     * ```
+     */
+
+  /**
+     * 无序列表，与“insertorderedlist”命令互斥
+     * @command insertunorderedlist
+     * @method execCommand
+     * @param { String } command 命令字符串
+     * @param { String } style 插入的无序列表类型，值为：circle,disc,square,dash,dot
+     * @example
+     * ```javascript
+     * editor.execCommand( 'insertunorderedlist','circle');
+     * ```
+     */
+  /**
+     * 查询当前是否有word文档粘贴进来的图片
+     * @command insertunorderedlist
+     * @method insertunorderedlist
+     * @param { String } command 命令字符串
+     * @return { int } 如果当前选区是无序列表返回1，否则返回0
+     * @example
+     * ```javascript
+     * editor.queryCommandState( 'insertunorderedlist' );
+     * ```
+     */
+  /**
+     * 查询当前选区内容是否有序列表
+     * @command insertunorderedlist
+     * @method queryCommandValue
+     * @param { String } command 命令字符串
+     * @return { String } 返回当前无序列表的类型，值为null或circle,disc,square,dash,dot
+     * @example
+     * ```javascript
+     * editor.queryCommandValue( 'insertunorderedlist' );
+     * ```
+     */
+
+  me.commands["insertorderedlist"] = me.commands["insertunorderedlist"] = {
+    execCommand: function(command, style) {
+      if (!style) {
+        style = command.toLowerCase() == "insertorderedlist"
+          ? "decimal"
+          : "disc";
+      }
+      var me = this,
+        range = this.selection.getRange(),
+        filterFn = function(node) {
+          return node.nodeType == 1
+            ? node.tagName.toLowerCase() != "br"
+            : !domUtils.isWhitespace(node);
+        },
+        tag = command.toLowerCase() == "insertorderedlist" ? "ol" : "ul",
+        frag = me.document.createDocumentFragment();
+      //去掉是因为会出现选到末尾，导致adjustmentBoundary缩到ol/ul的位置
+      //range.shrinkBoundary();//.adjustmentBoundary();
+      range.adjustmentBoundary().shrinkBoundary();
+      var bko = range.createBookmark(true),
+        start = getLi(me.document.getElementById(bko.start)),
+        modifyStart = 0,
+        end = getLi(me.document.getElementById(bko.end)),
+        modifyEnd = 0,
+        startParent,
+        endParent,
+        list,
+        tmp;
+
+      if (start || end) {
+        start && (startParent = start.parentNode);
+        if (!bko.end) {
+          end = start;
+        }
+        end && (endParent = end.parentNode);
+
+        if (startParent === endParent) {
+          while (start !== end) {
+            tmp = start;
+            start = start.nextSibling;
+            if (!domUtils.isBlockElm(tmp.firstChild)) {
+              var p = me.document.createElement("p");
+              while (tmp.firstChild) {
+                p.appendChild(tmp.firstChild);
+              }
+              tmp.appendChild(p);
+            }
+            frag.appendChild(tmp);
+          }
+          tmp = me.document.createElement("span");
+          startParent.insertBefore(tmp, end);
+          if (!domUtils.isBlockElm(end.firstChild)) {
+            p = me.document.createElement("p");
+            while (end.firstChild) {
+              p.appendChild(end.firstChild);
+            }
+            end.appendChild(p);
+          }
+          frag.appendChild(end);
+          domUtils.breakParent(tmp, startParent);
+          if (domUtils.isEmptyNode(tmp.previousSibling)) {
+            domUtils.remove(tmp.previousSibling);
+          }
+          if (domUtils.isEmptyNode(tmp.nextSibling)) {
+            domUtils.remove(tmp.nextSibling);
+          }
+          var nodeStyle =
+            getStyle(startParent) ||
+            domUtils.getComputedStyle(startParent, "list-style-type") ||
+            (command.toLowerCase() == "insertorderedlist" ? "decimal" : "disc");
+          if (startParent.tagName.toLowerCase() == tag && nodeStyle == style) {
+            for (
+              var i = 0, ci, tmpFrag = me.document.createDocumentFragment();
+              (ci = frag.firstChild);
+
+            ) {
+              if (domUtils.isTagNode(ci, "ol ul")) {
+                //                                  删除时，子列表不处理
+                //                                  utils.each(domUtils.getElementsByTagName(ci,'li'),function(li){
+                //                                        while(li.firstChild){
+                //                                            tmpFrag.appendChild(li.firstChild);
+                //                                        }
+                //
+                //                                    });
+                tmpFrag.appendChild(ci);
+              } else {
+                while (ci.firstChild) {
+                  tmpFrag.appendChild(ci.firstChild);
+                  domUtils.remove(ci);
+                }
+              }
+            }
+            tmp.parentNode.insertBefore(tmpFrag, tmp);
+          } else {
+            list = me.document.createElement(tag);
+            setListStyle(list, style);
+            list.appendChild(frag);
+            tmp.parentNode.insertBefore(list, tmp);
+          }
+
+          domUtils.remove(tmp);
+          list && adjustList(list, tag, style);
+          range.moveToBookmark(bko).select();
+          return;
+        }
+        //开始
+        if (start) {
+          while (start) {
+            tmp = start.nextSibling;
+            if (domUtils.isTagNode(start, "ol ul")) {
+              frag.appendChild(start);
+            } else {
+              var tmpfrag = me.document.createDocumentFragment(),
+                hasBlock = 0;
+              while (start.firstChild) {
+                if (domUtils.isBlockElm(start.firstChild)) {
+                  hasBlock = 1;
+                }
+                tmpfrag.appendChild(start.firstChild);
+              }
+              if (!hasBlock) {
+                var tmpP = me.document.createElement("p");
+                tmpP.appendChild(tmpfrag);
+                frag.appendChild(tmpP);
+              } else {
+                frag.appendChild(tmpfrag);
+              }
+              domUtils.remove(start);
+            }
+
+            start = tmp;
+          }
+          startParent.parentNode.insertBefore(frag, startParent.nextSibling);
+          if (domUtils.isEmptyNode(startParent)) {
+            range.setStartBefore(startParent);
+            domUtils.remove(startParent);
+          } else {
+            range.setStartAfter(startParent);
+          }
+          modifyStart = 1;
+        }
+
+        if (end && domUtils.inDoc(endParent, me.document)) {
+          //结束
+          start = endParent.firstChild;
+          while (start && start !== end) {
+            tmp = start.nextSibling;
+            if (domUtils.isTagNode(start, "ol ul")) {
+              frag.appendChild(start);
+            } else {
+              tmpfrag = me.document.createDocumentFragment();
+              hasBlock = 0;
+              while (start.firstChild) {
+                if (domUtils.isBlockElm(start.firstChild)) {
+                  hasBlock = 1;
+                }
+                tmpfrag.appendChild(start.firstChild);
+              }
+              if (!hasBlock) {
+                tmpP = me.document.createElement("p");
+                tmpP.appendChild(tmpfrag);
+                frag.appendChild(tmpP);
+              } else {
+                frag.appendChild(tmpfrag);
+              }
+              domUtils.remove(start);
+            }
+            start = tmp;
+          }
+          var tmpDiv = domUtils.createElement(me.document, "div", {
+            tmpDiv: 1
+          });
+          domUtils.moveChild(end, tmpDiv);
+
+          frag.appendChild(tmpDiv);
+          domUtils.remove(end);
+          endParent.parentNode.insertBefore(frag, endParent);
+          range.setEndBefore(endParent);
+          if (domUtils.isEmptyNode(endParent)) {
+            domUtils.remove(endParent);
+          }
+
+          modifyEnd = 1;
+        }
+      }
+
+      if (!modifyStart) {
+        range.setStartBefore(me.document.getElementById(bko.start));
+      }
+      if (bko.end && !modifyEnd) {
+        range.setEndAfter(me.document.getElementById(bko.end));
+      }
+      range.enlarge(true, function(node) {
+        return notExchange[node.tagName];
+      });
+
+      frag = me.document.createDocumentFragment();
+
+      var bk = range.createBookmark(),
+        current = domUtils.getNextDomNode(bk.start, false, filterFn),
+        tmpRange = range.cloneRange(),
+        tmpNode,
+        block = domUtils.isBlockElm;
+
+      while (
+        current &&
+        current !== bk.end &&
+        domUtils.getPosition(current, bk.end) & domUtils.POSITION_PRECEDING
+      ) {
+        if (current.nodeType == 3 || dtd.li[current.tagName]) {
+          if (current.nodeType == 1 && dtd.$list[current.tagName]) {
+            while (current.firstChild) {
+              frag.appendChild(current.firstChild);
+            }
+            tmpNode = domUtils.getNextDomNode(current, false, filterFn);
+            domUtils.remove(current);
+            current = tmpNode;
+            continue;
+          }
+          tmpNode = current;
+          tmpRange.setStartBefore(current);
+
+          while (
+            current &&
+            current !== bk.end &&
+            (!block(current) || domUtils.isBookmarkNode(current))
+          ) {
+            tmpNode = current;
+            current = domUtils.getNextDomNode(current, false, null, function(
+              node
+            ) {
+              return !notExchange[node.tagName];
+            });
+          }
+
+          if (current && block(current)) {
+            tmp = domUtils.getNextDomNode(tmpNode, false, filterFn);
+            if (tmp && domUtils.isBookmarkNode(tmp)) {
+              current = domUtils.getNextDomNode(tmp, false, filterFn);
+              tmpNode = tmp;
+            }
+          }
+          tmpRange.setEndAfter(tmpNode);
+
+          current = domUtils.getNextDomNode(tmpNode, false, filterFn);
+
+          var li = range.document.createElement("li");
+
+          li.appendChild(tmpRange.extractContents());
+          if (domUtils.isEmptyNode(li)) {
+            var tmpNode = range.document.createElement("p");
+            while (li.firstChild) {
+              tmpNode.appendChild(li.firstChild);
+            }
+            li.appendChild(tmpNode);
+          }
+          frag.appendChild(li);
+        } else {
+          current = domUtils.getNextDomNode(current, true, filterFn);
+        }
+      }
+      range.moveToBookmark(bk).collapse(true);
+      list = me.document.createElement(tag);
+      setListStyle(list, style);
+      list.appendChild(frag);
+      range.insertNode(list);
+      //当前list上下看能否合并
+      adjustList(list, tag, style);
+      //去掉冗余的tmpDiv
+      for (
+        var i = 0, ci, tmpDivs = domUtils.getElementsByTagName(list, "div");
+        (ci = tmpDivs[i++]);
+
+      ) {
+        if (ci.getAttribute("tmpDiv")) {
+          domUtils.remove(ci, true);
+        }
+      }
+      range.moveToBookmark(bko).select();
+    },
+    queryCommandState: function(command) {
+      var tag = command.toLowerCase() == "insertorderedlist" ? "ol" : "ul";
+      var path = this.selection.getStartElementPath();
+      for (var i = 0, ci; (ci = path[i++]); ) {
+        if (ci.nodeName == "TABLE") {
+          return 0;
+        }
+        if (tag == ci.nodeName.toLowerCase()) {
+          return 1;
+        }
+      }
+      return 0;
+    },
+    queryCommandValue: function(command) {
+      var tag = command.toLowerCase() == "insertorderedlist" ? "ol" : "ul";
+      var path = this.selection.getStartElementPath(),
+        node;
+      for (var i = 0, ci; (ci = path[i++]); ) {
+        if (ci.nodeName == "TABLE") {
+          node = null;
+          break;
+        }
+        if (tag == ci.nodeName.toLowerCase()) {
+          node = ci;
+          break;
+        }
+      }
+      return node
+        ? getStyle(node) || domUtils.getComputedStyle(node, "list-style-type")
+        : null;
+    }
+  };
+};
+
+
+// plugins/source.js
+/**
+ * 源码编辑插件
+ * @file
+ * @since 1.2.6.1
+ */
+
+(function() {
+  var sourceEditors = {
+    textarea: function(editor, holder) {
+      var textarea = holder.ownerDocument.createElement("textarea");
+      textarea.style.cssText =
+        "position:absolute;resize:none;width:100%;height:100%;border:0;padding:0;margin:0;overflow-y:auto;";
+      // todo: IE下只有onresize属性可用... 很纠结
+      if (browser.ie && browser.version < 8) {
+        textarea.style.width = holder.offsetWidth + "px";
+        textarea.style.height = holder.offsetHeight + "px";
+        holder.onresize = function() {
+          textarea.style.width = holder.offsetWidth + "px";
+          textarea.style.height = holder.offsetHeight + "px";
+        };
+      }
+      holder.appendChild(textarea);
+      return {
+        setContent: function(content) {
+          textarea.value = content;
+        },
+        getContent: function() {
+          return textarea.value;
+        },
+        select: function() {
+          var range;
+          if (browser.ie) {
+            range = textarea.createTextRange();
+            range.collapse(true);
+            range.select();
+          } else {
+            //todo: chrome下无法设置焦点
+            textarea.setSelectionRange(0, 0);
+            textarea.focus();
+          }
+        },
+        dispose: function() {
+          holder.removeChild(textarea);
+          // todo
+          holder.onresize = null;
+          textarea = null;
+          holder = null;
+        },
+        focus: function (){
+          textarea.focus();
+        },
+        blur: function (){
+          textarea.blur();
+        }
+      };
+    },
+    codemirror: function(editor, holder) {
+      var codeEditor = window.CodeMirror(holder, {
+        mode: "text/html",
+        tabMode: "indent",
+        lineNumbers: true,
+        lineWrapping: true
+      });
+      var dom = codeEditor.getWrapperElement();
+      dom.style.cssText =
+        'position:absolute;left:0;top:0;width:100%;height:100%;font-family:consolas,"Courier new",monospace;font-size:13px;';
+      codeEditor.getScrollerElement().style.cssText =
+        "position:absolute;left:0;top:0;width:100%;height:100%;";
+      codeEditor.refresh();
+      return {
+        getCodeMirror: function() {
+          return codeEditor;
+        },
+        setContent: function(content) {
+          codeEditor.setValue(content);
+        },
+        getContent: function() {
+          return codeEditor.getValue();
+        },
+        select: function() {
+          codeEditor.focus();
+        },
+        dispose: function() {
+          holder.removeChild(dom);
+          dom = null;
+          codeEditor = null;
+        },
+        focus: function (){
+          codeEditor.focus();
+        },
+        blur: function (){
+          // codeEditor.blur();
+          // since codemirror not support blur()
+          codeEditor.setOption('readOnly', true);
+          codeEditor.setOption('readOnly', false);
+        }
+      };
+    }
+  };
+
+  UE.plugins["source"] = function() {
+    var me = this;
+    var opt = this.options;
+    var sourceMode = false;
+    var sourceEditor;
+    var orgSetContent;
+    var orgFocus;
+    var orgBlur;
+    opt.sourceEditor = browser.ie
+      ? "textarea"
+      : opt.sourceEditor || "codemirror";
+
+    me.setOpt({
+      sourceEditorFirst: false
+    });
+    function createSourceEditor(holder) {
+      return sourceEditors[
+        opt.sourceEditor == "codemirror" && window.CodeMirror
+          ? "codemirror"
+          : "textarea"
+      ](me, holder);
+    }
+
+    var bakCssText;
+    //解决在源码模式下getContent不能得到最新的内容问题
+    var oldGetContent, bakAddress;
+
+    /**
+         * 切换源码模式和编辑模式
+         * @command source
+         * @method execCommand
+         * @param { String } cmd 命令字符串
+         * @example
+         * ```javascript
+         * editor.execCommand( 'source');
+         * ```
+         */
+
+    /**
+         * 查询当前编辑区域的状态是源码模式还是可视化模式
+         * @command source
+         * @method queryCommandState
+         * @param { String } cmd 命令字符串
+         * @return { int } 如果当前是源码编辑模式，返回1，否则返回0
+         * @example
+         * ```javascript
+         * editor.queryCommandState( 'source' );
+         * ```
+         */
+
+    me.commands["source"] = {
+      execCommand: function() {
+        sourceMode = !sourceMode;
+        if (sourceMode) {
+          bakAddress = me.selection.getRange().createAddress(false, true);
+          me.undoManger && me.undoManger.save(true);
+          if (browser.gecko) {
+            me.body.contentEditable = false;
+          }
+
+          bakCssText = me.iframe.style.cssText;
+          me.iframe.style.cssText +=
+            "position:absolute;left:-32768px;top:-32768px;";
+
+          me.fireEvent("beforegetcontent");
+          var root = UE.htmlparser(me.body.innerHTML);
+          me.filterOutputRule(root);
+          root.traversal(function(node) {
+            if (node.type == "element") {
+              switch (node.tagName) {
+                case "td":
+                case "th":
+                case "caption":
+                  if (node.children && node.children.length == 1) {
+                    if (node.firstChild().tagName == "br") {
+                      node.removeChild(node.firstChild());
+                    }
+                  }
+                  break;
+                case "pre":
+                  node.innerText(node.innerText().replace(/&nbsp;/g, " "));
+              }
+            }
+          });
+
+          me.fireEvent("aftergetcontent");
+
+          var content = root.toHtml(true);
+
+          sourceEditor = createSourceEditor(me.iframe.parentNode);
+
+          sourceEditor.setContent(content);
+
+          orgSetContent = me.setContent;
+
+          me.setContent = function(html) {
+            //这里暂时不触发事件，防止报错
+            var root = UE.htmlparser(html);
+            me.filterInputRule(root);
+            html = root.toHtml();
+            sourceEditor.setContent(html);
+          };
+
+          setTimeout(function() {
+            sourceEditor.select();
+            me.addListener("fullscreenchanged", function() {
+              try {
+                sourceEditor.getCodeMirror().refresh();
+              } catch (e) {}
+            });
+          });
+
+          //重置getContent，源码模式下取值也能是最新的数据
+          oldGetContent = me.getContent;
+          me.getContent = function() {
+            return (
+              sourceEditor.getContent() ||
+              "<p>" + (browser.ie ? "" : "<br/>") + "</p>"
+            );
+          };
+
+          orgFocus = me.focus;
+          orgBlur = me.blur;
+
+          me.focus = function(){
+            sourceEditor.focus();
+          };
+
+          me.blur = function(){
+            orgBlur.call(me);
+            sourceEditor.blur();
+          };
+        } else {
+          me.iframe.style.cssText = bakCssText;
+          var cont =
+            sourceEditor.getContent() ||
+            "<p>" + (browser.ie ? "" : "<br/>") + "</p>";
+          //处理掉block节点前后的空格,有可能会误命中，暂时不考虑
+          cont = cont.replace(
+            new RegExp("[\\r\\t\\n ]*</?(\\w+)\\s*(?:[^>]*)>", "g"),
+            function(a, b) {
+              if (b && !dtd.$inlineWithA[b.toLowerCase()]) {
+                return a.replace(/(^[\n\r\t ]*)|([\n\r\t ]*$)/g, "");
+              }
+              return a.replace(/(^[\n\r\t]*)|([\n\r\t]*$)/g, "");
+            }
+          );
+
+          me.setContent = orgSetContent;
+
+          me.setContent(cont);
+          sourceEditor.dispose();
+          sourceEditor = null;
+          //还原getContent方法
+          me.getContent = oldGetContent;
+
+          me.focus = orgFocus;
+          me.blur = orgBlur;
+
+          var first = me.body.firstChild;
+          //trace:1106 都删除空了，下边会报错，所以补充一个p占位
+          if (!first) {
+            me.body.innerHTML = "<p>" + (browser.ie ? "" : "<br/>") + "</p>";
+            first = me.body.firstChild;
+          }
+
+          //要在ifm为显示时ff才能取到selection,否则报错
+          //这里不能比较位置了
+          me.undoManger && me.undoManger.save(true);
+
+          if (browser.gecko) {
+            var input = document.createElement("input");
+            input.style.cssText = "position:absolute;left:0;top:-32768px";
+
+            document.body.appendChild(input);
+
+            me.body.contentEditable = false;
+            setTimeout(function() {
+              domUtils.setViewportOffset(input, { left: -32768, top: 0 });
+              input.focus();
+              setTimeout(function() {
+                me.body.contentEditable = true;
+                me.selection.getRange().moveToAddress(bakAddress).select(true);
+                domUtils.remove(input);
+              });
+            });
+          } else {
+            //ie下有可能报错，比如在代码顶头的情况
+            try {
+              me.selection.getRange().moveToAddress(bakAddress).select(true);
+            } catch (e) {}
+          }
+        }
+        this.fireEvent("sourcemodechanged", sourceMode);
+      },
+      queryCommandState: function() {
+        return sourceMode | 0;
+      },
+      notNeedUndo: 1
+    };
+    var oldQueryCommandState = me.queryCommandState;
+
+    me.queryCommandState = function(cmdName) {
+      cmdName = cmdName.toLowerCase();
+      if (sourceMode) {
+        //源码模式下可以开启的命令
+        return cmdName in
+          {
+            source: 1,
+            fullscreen: 1
+          }
+          ? 1
+          : -1;
+      }
+      return oldQueryCommandState.apply(this, arguments);
+    };
+
+    if (opt.sourceEditor == "codemirror") {
+      me.addListener("ready", function() {
+        utils.loadFile(
+          document,
+          {
+            src:
+              opt.codeMirrorJsUrl ||
+                opt.UEDITOR_HOME_URL + "third-party/codemirror/codemirror.js",
+            tag: "script",
+            type: "text/javascript",
+            defer: "defer"
+          },
+          function() {
+            if (opt.sourceEditorFirst) {
+              setTimeout(function() {
+                me.execCommand("source");
+              }, 0);
+            }
+          }
+        );
+        utils.loadFile(document, {
+          tag: "link",
+          rel: "stylesheet",
+          type: "text/css",
+          href:
+            opt.codeMirrorCssUrl ||
+              opt.UEDITOR_HOME_URL + "third-party/codemirror/codemirror.css?220922"
+        });
+      });
+    }
+  };
+})();
+
+
+// plugins/enterkey.js
+///import core
+///import plugins/undo.js
+///commands 设置回车标签p或br
+///commandsName  EnterKey
+///commandsTitle  设置回车标签p或br
+/**
+ * @description 处理回车
+ * @author zhanyi
+ */
+UE.plugins["enterkey"] = function() {
+  var hTag,
+    me = this,
+    tag = me.options.enterTag;
+  me.addListener("keyup", function(type, evt) {
+    var keyCode = evt.keyCode || evt.which;
+    if (keyCode == 13) {
+      var range = me.selection.getRange(),
+        start = range.startContainer,
+        doSave;
+
+      //修正在h1-h6里边回车后不能嵌套p的问题
+      if (!browser.ie) {
+        if (/h\d/i.test(hTag)) {
+          if (browser.gecko) {
+            var h = domUtils.findParentByTagName(
+              start,
+              [
+                "h1",
+                "h2",
+                "h3",
+                "h4",
+                "h5",
+                "h6",
+                "blockquote",
+                "caption",
+                "table"
+              ],
+              true
+            );
+            if (!h) {
+              me.document.execCommand("formatBlock", false, "<p>");
+              doSave = 1;
+            }
+          } else {
+            //chrome remove div
+            if (start.nodeType == 1) {
+              var tmp = me.document.createTextNode(""),
+                div;
+              range.insertNode(tmp);
+              div = domUtils.findParentByTagName(tmp, "div", true);
+              if (div) {
+                var p = me.document.createElement("p");
+                while (div.firstChild) {
+                  p.appendChild(div.firstChild);
+                }
+                div.parentNode.insertBefore(p, div);
+                domUtils.remove(div);
+                range.setStartBefore(tmp).setCursor();
+                doSave = 1;
+              }
+              domUtils.remove(tmp);
+            }
+          }
+
+          if (me.undoManger && doSave) {
+            me.undoManger.save();
+          }
+        }
+        //没有站位符，会出现多行的问题
+        browser.opera && range.select();
+      } else {
+        me.fireEvent("saveScene", true, true);
+      }
+    }
+  });
+
+  me.addListener("keydown", function(type, evt) {
+    var keyCode = evt.keyCode || evt.which;
+    if (keyCode == 13) {
+      //回车
+      if (me.fireEvent("beforeenterkeydown")) {
+        domUtils.preventDefault(evt);
+        return;
+      }
+      me.fireEvent("saveScene", true, true);
+      hTag = "";
+
+      var range = me.selection.getRange();
+
+      if (!range.collapsed) {
+        //跨td不能删
+        var start = range.startContainer,
+          end = range.endContainer,
+          startTd = domUtils.findParentByTagName(start, "td", true),
+          endTd = domUtils.findParentByTagName(end, "td", true);
+        if (
+          (startTd && endTd && startTd !== endTd) ||
+          (!startTd && endTd) ||
+          (startTd && !endTd)
+        ) {
+          evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
+          return;
+        }
+      }
+      if (tag == "p") {
+        if (!browser.ie) {
+          start = domUtils.findParentByTagName(
+            range.startContainer,
+            [
+              "ol",
+              "ul",
+              "p",
+              "h1",
+              "h2",
+              "h3",
+              "h4",
+              "h5",
+              "h6",
+              "blockquote",
+              "caption"
+            ],
+            true
+          );
+
+          //opera下执行formatblock会在table的场景下有问题，回车在opera原生支持很好，所以暂时在opera去掉调用这个原生的command
+          //trace:2431
+          if (!start && !browser.opera) {
+            me.document.execCommand("formatBlock", false, "<p>");
+
+            if (browser.gecko) {
+              range = me.selection.getRange();
+              start = domUtils.findParentByTagName(
+                range.startContainer,
+                "p",
+                true
+              );
+              start && domUtils.removeDirtyAttr(start);
+            }
+          } else {
+            hTag = start.tagName;
+            start.tagName.toLowerCase() == "p" &&
+              browser.gecko &&
+              domUtils.removeDirtyAttr(start);
+          }
+        }
+      } else {
+        evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
+
+        if (!range.collapsed) {
+          range.deleteContents();
+          start = range.startContainer;
+          if (
+            start.nodeType == 1 &&
+            (start = start.childNodes[range.startOffset])
+          ) {
+            while (start.nodeType == 1) {
+              if (dtd.$empty[start.tagName]) {
+                range.setStartBefore(start).setCursor();
+                if (me.undoManger) {
+                  me.undoManger.save();
+                }
+                return false;
+              }
+              if (!start.firstChild) {
+                var br = range.document.createElement("br");
+                start.appendChild(br);
+                range.setStart(start, 0).setCursor();
+                if (me.undoManger) {
+                  me.undoManger.save();
+                }
+                return false;
+              }
+              start = start.firstChild;
+            }
+            if (start === range.startContainer.childNodes[range.startOffset]) {
+              br = range.document.createElement("br");
+              range.insertNode(br).setCursor();
+            } else {
+              range.setStart(start, 0).setCursor();
+            }
+          } else {
+            br = range.document.createElement("br");
+            range.insertNode(br).setStartAfter(br).setCursor();
+          }
+        } else {
+          br = range.document.createElement("br");
+          range.insertNode(br);
+          var parent = br.parentNode;
+          if (parent.lastChild === br) {
+            br.parentNode.insertBefore(br.cloneNode(true), br);
+            range.setStartBefore(br);
+          } else {
+            range.setStartAfter(br);
+          }
+          range.setCursor();
+        }
+      }
+    }
+  });
+};
+
+
+// plugins/keystrokes.js
+/* 处理特殊键的兼容性问题 */
+UE.plugins["keystrokes"] = function() {
+  var me = this;
+  var collapsed = true;
+  me.addListener("keydown", function(type, evt) {
+    var keyCode = evt.keyCode || evt.which,
+      rng = me.selection.getRange();
+
+    //处理全选的情况
+    if (
+      !rng.collapsed &&
+      !(evt.ctrlKey || evt.shiftKey || evt.altKey || evt.metaKey) &&
+      ((keyCode >= 65 && keyCode <= 90) ||
+        (keyCode >= 48 && keyCode <= 57) ||
+        (keyCode >= 96 && keyCode <= 111) ||
+        {
+          13: 1,
+          8: 1,
+          46: 1
+        }[keyCode])
+    ) {
+      var tmpNode = rng.startContainer;
+      if (domUtils.isFillChar(tmpNode)) {
+        rng.setStartBefore(tmpNode);
+      }
+      tmpNode = rng.endContainer;
+      if (domUtils.isFillChar(tmpNode)) {
+        rng.setEndAfter(tmpNode);
+      }
+      rng.txtToElmBoundary();
+      //结束边界可能放到了br的前边，要把br包含进来
+      // x[xxx]<br/>
+      if (rng.endContainer && rng.endContainer.nodeType == 1) {
+        tmpNode = rng.endContainer.childNodes[rng.endOffset];
+        if (tmpNode && domUtils.isBr(tmpNode)) {
+          rng.setEndAfter(tmpNode);
+        }
+      }
+      if (rng.startOffset == 0) {
+        tmpNode = rng.startContainer;
+        if (domUtils.isBoundaryNode(tmpNode, "firstChild")) {
+          tmpNode = rng.endContainer;
+          if (
+            rng.endOffset ==
+              (tmpNode.nodeType == 3
+                ? tmpNode.nodeValue.length
+                : tmpNode.childNodes.length) &&
+            domUtils.isBoundaryNode(tmpNode, "lastChild")
+          ) {
+            me.fireEvent("saveScene");
+            me.body.innerHTML = "<p>" + (browser.ie ? "" : "<br/>") + "</p>";
+            rng.setStart(me.body.firstChild, 0).setCursor(false, true);
+            me._selectionChange();
+            return;
+          }
+        }
+      }
+    }
+
+    //处理backspace
+    if (keyCode == keymap.Backspace) {
+      rng = me.selection.getRange();
+      collapsed = rng.collapsed;
+      if (me.fireEvent("delkeydown", evt)) {
+        return;
+      }
+      var start, end;
+      //避免按两次删除才能生效的问题
+      if (rng.collapsed && rng.inFillChar()) {
+        start = rng.startContainer;
+
+        if (domUtils.isFillChar(start)) {
+          rng.setStartBefore(start).shrinkBoundary(true).collapse(true);
+          domUtils.remove(start);
+        } else {
+          start.nodeValue = start.nodeValue.replace(
+            new RegExp("^" + domUtils.fillChar),
+            ""
+          );
+          rng.startOffset--;
+          rng.collapse(true).select(true);
+        }
+      }
+
+      //解决选中control元素不能删除的问题
+      if ((start = rng.getClosedNode())) {
+        me.fireEvent("saveScene");
+        rng.setStartBefore(start);
+        domUtils.remove(start);
+        rng.setCursor();
+        me.fireEvent("saveScene");
+        domUtils.preventDefault(evt);
+        return;
+      }
+      //阻止在table上的删除
+      if (!browser.ie) {
+        start = domUtils.findParentByTagName(rng.startContainer, "table", true);
+        end = domUtils.findParentByTagName(rng.endContainer, "table", true);
+        if ((start && !end) || (!start && end) || start !== end) {
+          evt.preventDefault();
+          return;
+        }
+      }
+    }
+    //处理tab键的逻辑
+    if (keyCode == keymap.Tab) {
+      //不处理以下标签
+      var excludeTagNameForTabKey = {
+        ol: 1,
+        ul: 1,
+        table: 1
+      };
+      //处理组件里的tab按下事件
+      if (me.fireEvent("tabkeydown", evt)) {
+        domUtils.preventDefault(evt);
+        return;
+      }
+      var range = me.selection.getRange();
+      me.fireEvent("saveScene");
+      for (
+        var i = 0,
+          txt = "",
+          tabSize = me.options.tabSize || 4,
+          tabNode = me.options.tabNode || "&nbsp;";
+        i < tabSize;
+        i++
+      ) {
+        txt += tabNode;
+      }
+      var span = me.document.createElement("span");
+      span.innerHTML = txt + domUtils.fillChar;
+      if (range.collapsed) {
+        range.insertNode(span.cloneNode(true).firstChild).setCursor(true);
+      } else {
+        var filterFn = function(node) {
+          return (
+            domUtils.isBlockElm(node) &&
+            !excludeTagNameForTabKey[node.tagName.toLowerCase()]
+          );
+        };
+        //普通的情况
+        start = domUtils.findParent(range.startContainer, filterFn, true);
+        end = domUtils.findParent(range.endContainer, filterFn, true);
+        if (start && end && start === end) {
+          range.deleteContents();
+          range.insertNode(span.cloneNode(true).firstChild).setCursor(true);
+        } else {
+          var bookmark = range.createBookmark();
+          range.enlarge(true);
+          var bookmark2 = range.createBookmark(),
+            current = domUtils.getNextDomNode(bookmark2.start, false, filterFn);
+          while (
+            current &&
+            !(
+              domUtils.getPosition(current, bookmark2.end) &
+              domUtils.POSITION_FOLLOWING
+            )
+          ) {
+            current.insertBefore(
+              span.cloneNode(true).firstChild,
+              current.firstChild
+            );
+            current = domUtils.getNextDomNode(current, false, filterFn);
+          }
+          range.moveToBookmark(bookmark2).moveToBookmark(bookmark).select();
+        }
+      }
+      domUtils.preventDefault(evt);
+    }
+    //trace:1634
+    //ff的del键在容器空的时候，也会删除
+    if (browser.gecko && keyCode == 46) {
+      range = me.selection.getRange();
+      if (range.collapsed) {
+        start = range.startContainer;
+        if (domUtils.isEmptyBlock(start)) {
+          var parent = start.parentNode;
+          while (
+            domUtils.getChildCount(parent) == 1 &&
+            !domUtils.isBody(parent)
+          ) {
+            start = parent;
+            parent = parent.parentNode;
+          }
+          if (start === parent.lastChild) evt.preventDefault();
+          return;
+        }
+      }
+    }
+
+    /* 修复在编辑区域快捷键 (Mac:meta+alt+I; Win:ctrl+shift+I) 打不开 chrome 控制台的问题 */
+    browser.chrome &&
+      me.on("keydown", function(type, e) {
+        var keyCode = e.keyCode || e.which;
+        if (
+          ((e.metaKey && e.altKey) || (e.ctrlKey && e.shiftKey)) &&
+          keyCode == 73
+        ) {
+          return true;
+        }
+      });
+  });
+  me.addListener("keyup", function(type, evt) {
+    var keyCode = evt.keyCode || evt.which,
+      rng,
+      me = this;
+    if (keyCode == keymap.Backspace) {
+      if (me.fireEvent("delkeyup")) {
+        return;
+      }
+      rng = me.selection.getRange();
+      if (rng.collapsed) {
+        var tmpNode,
+          autoClearTagName = ["h1", "h2", "h3", "h4", "h5", "h6"];
+        if (
+          (tmpNode = domUtils.findParentByTagName(
+            rng.startContainer,
+            autoClearTagName,
+            true
+          ))
+        ) {
+          if (domUtils.isEmptyBlock(tmpNode)) {
+            var pre = tmpNode.previousSibling;
+            if (pre && pre.nodeName != "TABLE") {
+              domUtils.remove(tmpNode);
+              rng.setStartAtLast(pre).setCursor(false, true);
+              return;
+            } else {
+              var next = tmpNode.nextSibling;
+              if (next && next.nodeName != "TABLE") {
+                domUtils.remove(tmpNode);
+                rng.setStartAtFirst(next).setCursor(false, true);
+                return;
+              }
+            }
+          }
+        }
+        //处理当删除到body时，要重新给p标签展位
+        if (domUtils.isBody(rng.startContainer)) {
+          var tmpNode = domUtils.createElement(me.document, "p", {
+            innerHTML: browser.ie ? domUtils.fillChar : "<br/>"
+          });
+          rng.insertNode(tmpNode).setStart(tmpNode, 0).setCursor(false, true);
+        }
+      }
+
+      //chrome下如果删除了inline标签，浏览器会有记忆，在输入文字还是会套上刚才删除的标签，所以这里再选一次就不会了
+      if (
+        !collapsed &&
+        (rng.startContainer.nodeType == 3 ||
+          (rng.startContainer.nodeType == 1 &&
+            domUtils.isEmptyBlock(rng.startContainer)))
+      ) {
+        if (browser.ie) {
+          var span = rng.document.createElement("span");
+          rng.insertNode(span).setStartBefore(span).collapse(true);
+          rng.select();
+          domUtils.remove(span);
+        } else {
+          rng.select();
+        }
+      }
+    }
+  });
+};
+
+
+// plugins/fiximgclick.js
+///import core
+///commands 修复chrome下图片不能点击的问题，出现八个角可改变大小
+///commandsName  FixImgClick
+///commandsTitle  修复chrome下图片不能点击的问题，出现八个角可改变大小
+//修复chrome下图片不能点击的问题，出现八个角可改变大小
+
+UE.plugins["fiximgclick"] = (function() {
+  var elementUpdated = false;
+  function Scale() {
+    this.editor = null;
+    this.resizer = null;
+    this.cover = null;
+    this.doc = document;
+    this.prePos = { x: 0, y: 0 };
+    this.startPos = { x: 0, y: 0 };
+  }
+
+  (function() {
+    var rect = [
+      //[left, top, width, height]
+      [0, 0, -1, -1],
+      [0, 0, 0, -1],
+      [0, 0, 1, -1],
+      [0, 0, -1, 0],
+      [0, 0, 1, 0],
+      [0, 0, -1, 1],
+      [0, 0, 0, 1],
+      [0, 0, 1, 1]
+    ];
+
+    Scale.prototype = {
+      init: function(editor) {
+        var me = this;
+        me.editor = editor;
+        me.startPos = this.prePos = { x: 0, y: 0 };
+        me.dragId = -1;
+
+        var hands = [],
+          cover = (me.cover = document.createElement("div")),
+          resizer = (me.resizer = document.createElement("div"));
+
+        cover.id = me.editor.ui.id + "_imagescale_cover";
+        cover.style.cssText =
+          "position:absolute;display:none;z-index:" +
+          me.editor.options.zIndex +
+          ";filter:alpha(opacity=0); opacity:0;background:#CCC;";
+        domUtils.on(cover, "mousedown click", function() {
+          me.hide();
+        });
+
+        for (i = 0; i < 8; i++) {
+          hands.push(
+            '<span class="edui-editor-imagescale-hand' + i + '"></span>'
+          );
+        }
+        resizer.id = me.editor.ui.id + "_imagescale";
+        resizer.className = "edui-editor-imagescale";
+        resizer.innerHTML = hands.join("");
+        resizer.style.cssText +=
+          ";display:none;border:1px solid #3b77ff;z-index:" +
+          me.editor.options.zIndex +
+          ";";
+
+        me.editor.ui.getDom().appendChild(cover);
+        me.editor.ui.getDom().appendChild(resizer);
+
+        me.initStyle();
+        me.initEvents();
+      },
+      initStyle: function() {
+        utils.cssRule(
+          "imagescale",
+          ".edui-editor-imagescale{display:none;position:absolute;border:1px solid #38B2CE;cursor:hand;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}" +
+            ".edui-editor-imagescale span{position:absolute;width:6px;height:6px;overflow:hidden;font-size:0px;display:block;background-color:#3C9DD0;}" +
+            ".edui-editor-imagescale .edui-editor-imagescale-hand0{cursor:nw-resize;top:0;margin-top:-4px;left:0;margin-left:-4px;}" +
+            ".edui-editor-imagescale .edui-editor-imagescale-hand1{cursor:n-resize;top:0;margin-top:-4px;left:50%;margin-left:-4px;}" +
+            ".edui-editor-imagescale .edui-editor-imagescale-hand2{cursor:ne-resize;top:0;margin-top:-4px;left:100%;margin-left:-3px;}" +
+            ".edui-editor-imagescale .edui-editor-imagescale-hand3{cursor:w-resize;top:50%;margin-top:-4px;left:0;margin-left:-4px;}" +
+            ".edui-editor-imagescale .edui-editor-imagescale-hand4{cursor:e-resize;top:50%;margin-top:-4px;left:100%;margin-left:-3px;}" +
+            ".edui-editor-imagescale .edui-editor-imagescale-hand5{cursor:sw-resize;top:100%;margin-top:-3px;left:0;margin-left:-4px;}" +
+            ".edui-editor-imagescale .edui-editor-imagescale-hand6{cursor:s-resize;top:100%;margin-top:-3px;left:50%;margin-left:-4px;}" +
+            ".edui-editor-imagescale .edui-editor-imagescale-hand7{cursor:se-resize;top:100%;margin-top:-3px;left:100%;margin-left:-3px;}"
+        );
+      },
+      initEvents: function() {
+        var me = this;
+
+        me.startPos.x = me.startPos.y = 0;
+        me.isDraging = false;
+      },
+      _eventHandler: function(e) {
+        var me = this;
+        switch (e.type) {
+          case "mousedown":
+            var hand = e.target || e.srcElement,
+              hand;
+            if (
+              hand.className.indexOf("edui-editor-imagescale-hand") != -1 &&
+              me.dragId == -1
+            ) {
+              me.dragId = hand.className.slice(-1);
+              me.startPos.x = me.prePos.x = e.clientX;
+              me.startPos.y = me.prePos.y = e.clientY;
+              domUtils.on(me.doc, "mousemove", me.proxy(me._eventHandler, me));
+            }
+            break;
+          case "mousemove":
+            if (me.dragId != -1) {
+              me.updateContainerStyle(me.dragId, {
+                x: e.clientX - me.prePos.x,
+                y: e.clientY - me.prePos.y
+              });
+              me.prePos.x = e.clientX;
+              me.prePos.y = e.clientY;
+              elementUpdated = true;
+              me.updateTargetElement();
+            }
+            break;
+          case "mouseup":
+            if (me.dragId != -1) {
+              me.updateContainerStyle(me.dragId, {
+                x: e.clientX - me.prePos.x,
+                y: e.clientY - me.prePos.y
+              });
+              me.updateTargetElement();
+              if (me.target.parentNode) me.attachTo(me.target);
+              me.dragId = -1;
+            }
+            domUtils.un(me.doc, "mousemove", me.proxy(me._eventHandler, me));
+            //修复只是点击挪动点，但没有改变大小，不应该触发contentchange
+            if (elementUpdated) {
+              elementUpdated = false;
+              me.editor.fireEvent("contentchange");
+            }
+
+            break;
+          default:
+            break;
+        }
+      },
+      updateTargetElement: function() {
+        var me = this;
+        domUtils.setStyles(me.target, {
+          width: me.resizer.style.width,
+          height: me.resizer.style.height
+        });
+        me.target.width = parseInt(me.resizer.style.width);
+        me.target.height = parseInt(me.resizer.style.height);
+        me.attachTo(me.target);
+      },
+      updateContainerStyle: function(dir, offset) {
+        var me = this,
+          dom = me.resizer,
+          tmp;
+
+        if (rect[dir][0] != 0) {
+          tmp = parseInt(dom.style.left) + offset.x;
+          dom.style.left = me._validScaledProp("left", tmp) + "px";
+        }
+        if (rect[dir][1] != 0) {
+          tmp = parseInt(dom.style.top) + offset.y;
+          dom.style.top = me._validScaledProp("top", tmp) + "px";
+        }
+        if (rect[dir][2] != 0) {
+          tmp = dom.clientWidth + rect[dir][2] * offset.x;
+          dom.style.width = me._validScaledProp("width", tmp) + "px";
+        }
+        if (rect[dir][3] != 0) {
+          tmp = dom.clientHeight + rect[dir][3] * offset.y;
+          dom.style.height = me._validScaledProp("height", tmp) + "px";
+        }
+      },
+      _validScaledProp: function(prop, value) {
+        var ele = this.resizer,
+          wrap = document;
+
+        value = isNaN(value) ? 0 : value;
+        switch (prop) {
+          case "left":
+            return value < 0
+              ? 0
+              : value + ele.clientWidth > wrap.clientWidth
+                ? wrap.clientWidth - ele.clientWidth
+                : value;
+          case "top":
+            return value < 0
+              ? 0
+              : value + ele.clientHeight > wrap.clientHeight
+                ? wrap.clientHeight - ele.clientHeight
+                : value;
+          case "width":
+            return value <= 0
+              ? 1
+              : value + ele.offsetLeft > wrap.clientWidth
+                ? wrap.clientWidth - ele.offsetLeft
+                : value;
+          case "height":
+            return value <= 0
+              ? 1
+              : value + ele.offsetTop > wrap.clientHeight
+                ? wrap.clientHeight - ele.offsetTop
+                : value;
+        }
+      },
+      hideCover: function() {
+        this.cover.style.display = "none";
+      },
+      showCover: function() {
+        var me = this,
+          editorPos = domUtils.getXY(me.editor.ui.getDom()),
+          iframePos = domUtils.getXY(me.editor.iframe);
+
+        domUtils.setStyles(me.cover, {
+          width: me.editor.iframe.offsetWidth + "px",
+          height: me.editor.iframe.offsetHeight + "px",
+          top: iframePos.y - editorPos.y + "px",
+          left: iframePos.x - editorPos.x + "px",
+          position: "absolute",
+          display: ""
+        });
+      },
+      show: function(targetObj) {
+        var me = this;
+        me.resizer.style.display = "block";
+        if (targetObj) me.attachTo(targetObj);
+
+        domUtils.on(this.resizer, "mousedown", me.proxy(me._eventHandler, me));
+        domUtils.on(me.doc, "mouseup", me.proxy(me._eventHandler, me));
+
+        me.showCover();
+        me.editor.fireEvent("afterscaleshow", me);
+        me.editor.fireEvent("saveScene");
+      },
+      hide: function() {
+        var me = this;
+        me.hideCover();
+        me.resizer.style.display = "none";
+
+        domUtils.un(me.resizer, "mousedown", me.proxy(me._eventHandler, me));
+        domUtils.un(me.doc, "mouseup", me.proxy(me._eventHandler, me));
+        me.editor.fireEvent("afterscalehide", me);
+      },
+      proxy: function(fn, context) {
+        return function(e) {
+          return fn.apply(context || this, arguments);
+        };
+      },
+      attachTo: function(targetObj) {
+        var me = this,
+          target = (me.target = targetObj),
+          resizer = this.resizer,
+          imgPos = domUtils.getXY(target),
+          iframePos = domUtils.getXY(me.editor.iframe),
+          editorPos = domUtils.getXY(resizer.parentNode);
+
+        domUtils.setStyles(resizer, {
+          width: target.width + "px",
+          height: target.height + "px",
+          left:
+            iframePos.x +
+              imgPos.x -
+              me.editor.document.body.scrollLeft -
+              editorPos.x -
+              parseInt(resizer.style.borderLeftWidth) +
+              "px",
+          top:
+            iframePos.y +
+              imgPos.y -
+              me.editor.document.body.scrollTop -
+              editorPos.y -
+              parseInt(resizer.style.borderTopWidth) +
+              "px"
+        });
+      }
+    };
+  })();
+
+  return function() {
+    var me = this,
+      imageScale;
+
+    me.setOpt("imageScaleEnabled", true);
+
+    if (!browser.ie && me.options.imageScaleEnabled) {
+      me.addListener("click", function(type, e) {
+        if(e.target.tagName!=="IMG" && e.target.tagName !== "VIDEO"){
+          return;
+        }
+        var range = me.selection.getRange(),
+          img = range.getClosedNode();
+        if(img.tagName == 'SOURCE') {
+          try {
+            img = img.parentNode
+          } catch(e){
+            console.error(e)
+          }
+        }
+        if (img && (img.tagName == "IMG" || img.tagName == "VIDEO") && me.body.contentEditable != "false") {
+          if (
+            img.getAttribute("anchorname") ||
+            domUtils.hasClass(img, "loadingclass") ||
+            domUtils.hasClass(img, "loaderrorclass")
+          ) {
+            return;
+          }
+
+          if (!imageScale) {
+            imageScale = new Scale();
+            imageScale.init(me);
+            me.ui.getDom().appendChild(imageScale.resizer);
+
+            var _keyDownHandler = function(e) {
+              imageScale.hide();
+              if (imageScale.target)
+                me.selection.getRange().selectNode(imageScale.target).select();
+            },
+              _mouseDownHandler = function(e) {
+                var ele = e.target || e.srcElement;
+                if (
+                  ele &&
+                  (ele.className === undefined ||
+                    ele.className.indexOf("edui-editor-imagescale") == -1)
+                ) {
+                  _keyDownHandler(e);
+                }
+              },
+              timer;
+
+            me.addListener("afterscaleshow", function(e) {
+              me.addListener("beforekeydown", _keyDownHandler);
+              me.addListener("beforemousedown", _mouseDownHandler);
+              domUtils.on(document, "keydown", _keyDownHandler);
+              domUtils.on(document, "mousedown", _mouseDownHandler);
+              me.selection.getNative().removeAllRanges();
+            });
+            me.addListener("afterscalehide", function(e) {
+              me.removeListener("beforekeydown", _keyDownHandler);
+              me.removeListener("beforemousedown", _mouseDownHandler);
+              domUtils.un(document, "keydown", _keyDownHandler);
+              domUtils.un(document, "mousedown", _mouseDownHandler);
+              var target = imageScale.target;
+              if (target.parentNode) {
+                me.selection.getRange().selectNode(target).select();
+              }
+            });
+            //TODO 有iframe的情况，mousedown不能往下传。。
+            domUtils.on(imageScale.resizer, "mousedown", function(e) {
+              me.selection.getNative().removeAllRanges();
+              var ele = e.target || e.srcElement;
+              if (
+                ele &&
+                ele.className.indexOf("edui-editor-imagescale-hand") == -1
+              ) {
+                timer = setTimeout(function() {
+                  imageScale.hide();
+                  if (imageScale.target)
+                    me.selection.getRange().selectNode(ele).select();
+                }, 200);
+              }
+            });
+            domUtils.on(imageScale.resizer, "mouseup", function(e) {
+              var ele = e.target || e.srcElement;
+              if (
+                ele &&
+                ele.className.indexOf("edui-editor-imagescale-hand") == -1
+              ) {
+                clearTimeout(timer);
+              }
+            });
+          }
+          imageScale.show(img);
+        } else {
+          if (imageScale && imageScale.resizer.style.display != "none")
+            imageScale.hide();
+        }
+      });
+    }
+
+    if (browser.webkit) {
+      me.addListener("click", function(type, e) {
+        if ((e.target.tagName == "IMG" || e.target.tagName == "VIDEO" ) && me.body.contentEditable != "false") {
+          var range = new dom.Range(me.document);
+          range.selectNode(e.target).select();
+        }
+      });
+    }
+  };
+})();
+
+
+// plugins/autolink.js
+///import core
+///commands 为非ie浏览器自动添加a标签
+///commandsName  AutoLink
+///commandsTitle  自动增加链接
+/**
+ * @description 为非ie浏览器自动添加a标签
+ * @author zhanyi
+ */
+
+UE.plugin.register(
+  "autolink",
+  function() {
+    var cont = 0;
+
+    return !browser.ie
+      ? {
+          bindEvents: {
+            reset: function() {
+              cont = 0;
+            },
+            keydown: function(type, evt) {
+              var me = this;
+              var keyCode = evt.keyCode || evt.which;
+
+              if (keyCode == 32 || keyCode == 13) {
+                var sel = me.selection.getNative(),
+                  range = sel.getRangeAt(0).cloneRange(),
+                  offset,
+                  charCode;
+
+                var start = range.startContainer;
+                while (start.nodeType == 1 && range.startOffset > 0) {
+                  start =
+                    range.startContainer.childNodes[range.startOffset - 1];
+                  if (!start) {
+                    break;
+                  }
+                  range.setStart(
+                    start,
+                    start.nodeType == 1
+                      ? start.childNodes.length
+                      : start.nodeValue.length
+                  );
+                  range.collapse(true);
+                  start = range.startContainer;
+                }
+
+                do {
+                  if (range.startOffset == 0) {
+                    start = range.startContainer.previousSibling;
+
+                    while (start && start.nodeType == 1) {
+                      start = start.lastChild;
+                    }
+                    if (!start || domUtils.isFillChar(start)) {
+                      break;
+                    }
+                    offset = start.nodeValue.length;
+                  } else {
+                    start = range.startContainer;
+                    offset = range.startOffset;
+                  }
+                  range.setStart(start, offset - 1);
+                  charCode = range.toString().charCodeAt(0);
+                } while (charCode != 160 && charCode != 32);
+
+                if (
+                  range
+                    .toString()
+                    .replace(new RegExp(domUtils.fillChar, "g"), "")
+                    .match(/(?:https?:\/\/|ssh:\/\/|ftp:\/\/|file:\/|www\.)/i)
+                ) {
+                  while (range.toString().length) {
+                    if (
+                      /^(?:https?:\/\/|ssh:\/\/|ftp:\/\/|file:\/|www\.)/i.test(
+                        range.toString()
+                      )
+                    ) {
+                      break;
+                    }
+                    try {
+                      range.setStart(
+                        range.startContainer,
+                        range.startOffset + 1
+                      );
+                    } catch (e) {
+                      //trace:2121
+                      var start = range.startContainer;
+                      while (!(next = start.nextSibling)) {
+                        if (domUtils.isBody(start)) {
+                          return;
+                        }
+                        start = start.parentNode;
+                      }
+                      range.setStart(next, 0);
+                    }
+                  }
+                  //range的开始边界已经在a标签里的不再处理
+                  if (
+                    domUtils.findParentByTagName(
+                      range.startContainer,
+                      "a",
+                      true
+                    )
+                  ) {
+                    return;
+                  }
+                  var a = me.document.createElement("a"),
+                    text = me.document.createTextNode(" "),
+                    href;
+
+                  me.undoManger && me.undoManger.save();
+                  a.appendChild(range.extractContents());
+                  a.href = a.innerHTML = a.innerHTML.replace(/<[^>]+>/g, "");
+                  href = a
+                    .getAttribute("href")
+                    .replace(new RegExp(domUtils.fillChar, "g"), "");
+                  href = /^(?:https?:\/\/)/gi.test(href)
+                    ? href
+                    : "http://" + href;
+                  a.setAttribute("_src", utils.html(href));
+                  a.href = utils.html(href);
+
+                  range.insertNode(a);
+                  a.parentNode.insertBefore(text, a.nextSibling);
+                  range.setStart(text, 0);
+                  range.collapse(true);
+                  sel.removeAllRanges();
+                  sel.addRange(range);
+                  me.undoManger && me.undoManger.save();
+                }
+              }
+            }
+          }
+        }
+      : {};
+  },
+  function() {
+    var keyCodes = {
+      37: 1,
+      38: 1,
+      39: 1,
+      40: 1,
+      13: 1,
+      32: 1
+    };
+    function checkIsCludeLink(node) {
+      if (node.nodeType == 3) {
+        return null;
+      }
+      if (node.nodeName == "A") {
+        return node;
+      }
+      var lastChild = node.lastChild;
+
+      while (lastChild) {
+        if (lastChild.nodeName == "A") {
+          return lastChild;
+        }
+        if (lastChild.nodeType == 3) {
+          if (domUtils.isWhitespace(lastChild)) {
+            lastChild = lastChild.previousSibling;
+            continue;
+          }
+          return null;
+        }
+        lastChild = lastChild.lastChild;
+      }
+    }
+    browser.ie &&
+      this.addListener("keyup", function(cmd, evt) {
+        var me = this,
+          keyCode = evt.keyCode;
+        if (keyCodes[keyCode]) {
+          var rng = me.selection.getRange();
+          var start = rng.startContainer;
+
+          if (keyCode == 13) {
+            while (
+              start &&
+              !domUtils.isBody(start) &&
+              !domUtils.isBlockElm(start)
+            ) {
+              start = start.parentNode;
+            }
+            if (start && !domUtils.isBody(start) && start.nodeName == "P") {
+              var pre = start.previousSibling;
+              if (pre && pre.nodeType == 1) {
+                var pre = checkIsCludeLink(pre);
+                if (pre && !pre.getAttribute("_href")) {
+                  domUtils.remove(pre, true);
+                }
+              }
+            }
+          } else if (keyCode == 32) {
+            if (start.nodeType == 3 && /^\s$/.test(start.nodeValue)) {
+              start = start.previousSibling;
+              if (
+                start &&
+                start.nodeName == "A" &&
+                !start.getAttribute("_href")
+              ) {
+                domUtils.remove(start, true);
+              }
+            }
+          } else {
+            start = domUtils.findParentByTagName(start, "a", true);
+            if (start && !start.getAttribute("_href")) {
+              var bk = rng.createBookmark();
+
+              domUtils.remove(start, true);
+              rng.moveToBookmark(bk).select(true);
+            }
+          }
+        }
+      });
+  }
+);
+
+
+// plugins/autoheight.js
+///import core
+///commands 当输入内容超过编辑器高度时，编辑器自动增高
+///commandsName  AutoHeight,autoHeightEnabled
+///commandsTitle  自动增高
+/**
+ * @description 自动伸展
+ * @author zhanyi
+ */
+UE.plugins["autoheight"] = function() {
+  var me = this;
+  //提供开关，就算加载也可以关闭
+  me.autoHeightEnabled = me.options.autoHeightEnabled !== false;
+  if (!me.autoHeightEnabled) {
+    return;
+  }
+
+  var bakOverflow,
+    lastHeight = 0,
+    options = me.options,
+    currentHeight,
+    timer;
+
+  function adjustHeight() {
+    var me = this;
+    clearTimeout(timer);
+    if (isFullscreen) return;
+    if (
+      !me.queryCommandState ||
+      (me.queryCommandState && me.queryCommandState("source") != 1)
+    ) {
+      timer = setTimeout(function() {
+        var node = me.body.lastChild;
+        while (node && node.nodeType != 1) {
+          node = node.previousSibling;
+        }
+        if (node && node.nodeType == 1) {
+          node.style.clear = "both";
+          currentHeight = Math.max(
+            domUtils.getXY(node).y + node.offsetHeight + 25,
+            Math.max(options.minFrameHeight, options.initialFrameHeight)
+          );
+          if (currentHeight != lastHeight) {
+            if (currentHeight !== parseInt(me.iframe.parentNode.style.height)) {
+              me.iframe.parentNode.style.height = currentHeight + "px";
+            }
+            me.body.style.height = currentHeight + "px";
+            lastHeight = currentHeight;
+          }
+          domUtils.removeStyle(node, "clear");
+        }
+      }, 50);
+    }
+  }
+  var isFullscreen;
+  me.addListener("fullscreenchanged", function(cmd, f) {
+    isFullscreen = f;
+  });
+  me.addListener("destroy", function() {
+    domUtils.un(me.window, "scroll", fixedScrollTop);
+    me.removeListener(
+      "contentchange afterinserthtml keyup mouseup",
+      adjustHeight
+    );
+  });
+  me.enableAutoHeight = function() {
+    var me = this;
+    if (!me.autoHeightEnabled) {
+      return;
+    }
+    var doc = me.document;
+    me.autoHeightEnabled = true;
+    bakOverflow = doc.body.style.overflowY;
+    doc.body.style.overflowY = "hidden";
+    me.addListener("contentchange afterinserthtml keyup mouseup", adjustHeight);
+    //ff不给事件算得不对
+
+    setTimeout(function() {
+      adjustHeight.call(me);
+    }, browser.gecko ? 100 : 0);
+    me.fireEvent("autoheightchanged", me.autoHeightEnabled);
+  };
+  me.disableAutoHeight = function() {
+    me.body.style.overflowY = bakOverflow || "";
+
+    me.removeListener("contentchange", adjustHeight);
+    me.removeListener("keyup", adjustHeight);
+    me.removeListener("mouseup", adjustHeight);
+    me.autoHeightEnabled = false;
+    me.fireEvent("autoheightchanged", me.autoHeightEnabled);
+  };
+
+  me.on("setHeight", function() {
+    me.disableAutoHeight();
+  });
+  me.addListener("ready", function() {
+    me.enableAutoHeight();
+    //trace:1764
+    var timer;
+    domUtils.on(
+      browser.ie ? me.body : me.document,
+      browser.webkit ? "dragover" : "drop",
+      function() {
+        clearTimeout(timer);
+        timer = setTimeout(function() {
+          //trace:3681
+          adjustHeight.call(me);
+        }, 100);
+      }
+    );
+    //修复内容过多时，回到顶部，顶部内容被工具栏遮挡问题
+    domUtils.on(me.window, "scroll", fixedScrollTop);
+  });
+
+  var lastScrollY;
+
+  function fixedScrollTop() {
+    if (!me.window) return;
+    if (lastScrollY === null) {
+      lastScrollY = me.window.scrollY;
+    } else if (me.window.scrollY == 0 && lastScrollY != 0) {
+      me.window.scrollTo(0, 0);
+      lastScrollY = null;
+    }
+  }
+};
+
+
+// plugins/autofloat.js
+///import core
+///commands 悬浮工具栏
+///commandsName  AutoFloat,autoFloatEnabled
+///commandsTitle  悬浮工具栏
+/**
+ *  modified by chengchao01
+ *  注意： 引入此功能后，在IE6下会将body的背景图片覆盖掉！
+ */
+UE.plugins["autofloat"] = function() {
+  var me = this,
+    lang = me.getLang();
+  me.setOpt({
+    topOffset: 0
+  });
+  var optsAutoFloatEnabled = me.options.autoFloatEnabled !== false,
+    topOffset = me.options.topOffset;
+
+  //如果不固定toolbar的位置，则直接退出
+  if (!optsAutoFloatEnabled) {
+    return;
+  }
+  var uiUtils = UE.ui.uiUtils,
+    LteIE6 = browser.ie && browser.version <= 6,
+    quirks = browser.quirks;
+
+  function checkHasUI() {
+    if (!UE.ui) {
+      alert(lang.autofloatMsg);
+      return 0;
+    }
+    return 1;
+  }
+  function fixIE6FixedPos() {
+    var docStyle = document.body.style;
+    docStyle.backgroundImage = 'url("about:blank")';
+    docStyle.backgroundAttachment = "fixed";
+  }
+  var bakCssText,
+    placeHolder = document.createElement("div"),
+    toolbarBox,
+    orgTop,
+    getPosition,
+    flag = true; //ie7模式下需要偏移
+  function setFloating() {
+    var toobarBoxPos = domUtils.getXY(toolbarBox),
+      origalFloat = domUtils.getComputedStyle(toolbarBox, "position"),
+      origalLeft = domUtils.getComputedStyle(toolbarBox, "left");
+    toolbarBox.style.width = toolbarBox.offsetWidth + "px";
+    toolbarBox.style.zIndex = me.options.zIndex * 1 + 1;
+    toolbarBox.parentNode.insertBefore(placeHolder, toolbarBox);
+    if (LteIE6 || (quirks && browser.ie)) {
+      if (toolbarBox.style.position != "absolute") {
+        toolbarBox.style.position = "absolute";
+      }
+      toolbarBox.style.top =
+        (document.body.scrollTop || document.documentElement.scrollTop) -
+        orgTop +
+        topOffset +
+        "px";
+    } else {
+      if (browser.ie7Compat && flag) {
+        flag = false;
+        toolbarBox.style.left =
+          domUtils.getXY(toolbarBox).x -
+          document.documentElement.getBoundingClientRect().left +
+          2 +
+          "px";
+      }
+      if (toolbarBox.style.position != "fixed") {
+        toolbarBox.style.position = "fixed";
+        toolbarBox.style.top = topOffset + "px";
+        (origalFloat == "absolute" || origalFloat == "relative") &&
+          parseFloat(origalLeft) &&
+          (toolbarBox.style.left = toobarBoxPos.x + "px");
+      }
+    }
+  }
+  function unsetFloating() {
+    flag = true;
+    if (placeHolder.parentNode) {
+      placeHolder.parentNode.removeChild(placeHolder);
+    }
+
+    toolbarBox.style.cssText = bakCssText;
+  }
+
+  me.unsetFloating = unsetFloating;
+
+  function updateFloating() {
+    var rect3 = getPosition(me.container);
+    var offset = me.options.toolbarTopOffset || 0;
+    if (rect3.top < 0 && rect3.bottom - toolbarBox.offsetHeight > offset) {
+      setFloating();
+    } else {
+      unsetFloating();
+    }
+  }
+  var defer_updateFloating = utils.defer(
+    function() {
+      updateFloating();
+    },
+    browser.ie ? 200 : 100,
+    true
+  );
+
+  me.addListener("destroy", function() {
+    domUtils.un(window, ["scroll", "resize"], updateFloating);
+    me.removeListener("keydown", defer_updateFloating);
+  });
+
+  me.addListener("ready", function() {
+    if (checkHasUI(me)) {
+      //加载了ui组件，但在new时，没有加载ui，导致编辑器实例上没有ui类，所以这里做判断
+      if (!me.ui) {
+        return;
+      }
+      getPosition = uiUtils.getClientRect;
+      toolbarBox = me.ui.getDom("toolbarbox");
+      orgTop = getPosition(toolbarBox).top;
+      bakCssText = toolbarBox.style.cssText;
+      placeHolder.style.height = toolbarBox.offsetHeight + "px";
+      if (LteIE6) {
+        fixIE6FixedPos();
+      }
+      domUtils.on(window, ["scroll", "resize"], updateFloating);
+      me.addListener("keydown", defer_updateFloating);
+
+      me.addListener("beforefullscreenchange", function(t, enabled) {
+        if (enabled) {
+          unsetFloating();
+        }
+      });
+      me.addListener("fullscreenchanged", function(t, enabled) {
+        if (!enabled) {
+          updateFloating();
+        }
+      });
+      me.addListener("sourcemodechanged", function(t, enabled) {
+        setTimeout(function() {
+          updateFloating();
+        }, 0);
+      });
+      me.addListener("clearDoc", function() {
+        setTimeout(function() {
+          updateFloating();
+        }, 0);
+      });
+    }
+  });
+};
+
+
+// plugins/video.js
+/**
+ * video插件， 为UEditor提供视频插入支持
+ * @file
+ * @since 1.2.6.1
+ */
+
+UE.plugins["video"] = function() {
+  var me = this;
+
+  /**
+     * 创建插入视频字符窜
+     * @param url 视频地址
+     * @param width 视频宽度
+     * @param height 视频高度
+     * @param align 视频对齐
+     * @param toEmbed 是否以flash代替显示
+     * @param addParagraph  是否需要添加P 标签
+     */
+  function creatInsertStr(url, width, height, id, align, classname, type) {
+    var str;
+    switch (type) {
+      case 'iframe':
+        str = '<iframe class="' + classname + '" ' +
+          ' src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"' +
+          ' frameborder=0 allowfullscreen>';
+        break;
+      case "image":
+        str =
+          "<img " +
+          (id ? 'id="' + id + '"' : "") +
+          ' width="' +
+          width +
+          '" height="' +
+          height +
+          '" _url="' +
+          url +
+          '" class="' +
+          '"' +
+          ' src="' +
+          me.options.UEDITOR_HOME_URL +
+          'themes/default/images/spacer.gif" style="background:url(' +
+          me.options.UEDITOR_HOME_URL +
+          "themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;" +
+          (align ? "float:" + align + ";" : "") +
+          '" />';
+        break;
+      case "embed":
+        str =
+          '<embed type="application/x-shockwave-flash" class="' +
+          classname +
+          '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
+          ' src="' +
+          utils.html(url) +
+          '" width="' +
+          width +
+          '" height="' +
+          height +
+          '"' +
+          (align ? ' style="float:' + align + '"' : "") +
+          ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
+        break;
+      case "video":
+        var ext = url.substr(url.lastIndexOf(".") + 1);
+        if (ext == "ogv") ext = "ogg";
+        str =
+          "<video" +
+          (id ? ' id="' + id + '"' : "") +
+          ' class="' +
+          classname +
+          '" ' +
+          (align ? ' style="float:' + align + '"' : "") +
+          ' controls preload="none" width="' +
+          width +
+          '" height="' +
+          height +
+          '" src="' +
+          url +
+          '" data-setup="{}">' +
+          '<source src="' +
+          url +
+          '" type="video/' +
+          ext +
+          '" /></video><span></span><br />';
+        break;
+    }
+    return str;
+  }
+
+  function switchImgAndVideo(root, img2video) {
+    utils.each(
+      root.getNodesByTagName(img2video ? "img" : "embed video"),
+      function(node) {
+        var className = node.getAttr("class");
+        if (className && className.indexOf("edui-faked-video") != -1) {
+          var html = creatInsertStr(
+            img2video ? node.getAttr("_url") : node.getAttr("src"),
+            node.getAttr("width"),
+            node.getAttr("height"),
+            null,
+            node.getStyle("float") || "",
+            className,
+            img2video ? "embed" : "image"
+          );
+          node.parentNode.replaceChild(UE.uNode.createElement(html), node);
+        }
+        if (className && className.indexOf("edui-upload-video") != -1) {
+          var html = creatInsertStr(
+            img2video ? node.getAttr("_url") : node.getAttr("src"),
+            node.getAttr("width"),
+            node.getAttr("height"),
+            null,
+            node.getStyle("float") || "",
+            className,
+            img2video ? "video" : "image"
+          );
+          node.parentNode.replaceChild(UE.uNode.createElement(html), node);
+        }
+      }
+    );
+  }
+
+  me.addOutputRule(function(root) {
+    switchImgAndVideo(root, true);
+  });
+  me.addInputRule(function(root) {
+    switchImgAndVideo(root);
+  });
+
+  /**
+     * 插入视频
+     * @command insertvideo
+     * @method execCommand
+     * @param { String } cmd 命令字符串
+     * @param { Object } videoAttr 键值对对象， 描述一个视频的所有属性
+     * @example
+     * ```javascript
+     *
+     * var videoAttr = {
+     *      //视频地址
+     *      url: 'http://www.youku.com/xxx',
+     *      //视频宽高值， 单位px
+     *      width: 200,
+     *      height: 100
+     * };
+     *
+     * //editor 是编辑器实例
+     * //向编辑器插入单个视频
+     * editor.execCommand( 'insertvideo', videoAttr );
+     * ```
+     */
+
+  /**
+     * 插入视频
+     * @command insertvideo
+     * @method execCommand
+     * @param { String } cmd 命令字符串
+     * @param { Array } videoArr 需要插入的视频的数组， 其中的每一个元素都是一个键值对对象， 描述了一个视频的所有属性
+     * @example
+     * ```javascript
+     *
+     * var videoAttr1 = {
+     *      //视频地址
+     *      url: 'http://www.youku.com/xxx',
+     *      //视频宽高值， 单位px
+     *      width: 200,
+     *      height: 100
+     * },
+     * videoAttr2 = {
+     *      //视频地址
+     *      url: 'http://www.youku.com/xxx',
+     *      //视频宽高值， 单位px
+     *      width: 200,
+     *      height: 100
+     * }
+     *
+     * //editor 是编辑器实例
+     * //该方法将会向编辑器内插入两个视频
+     * editor.execCommand( 'insertvideo', [ videoAttr1, videoAttr2 ] );
+     * ```
+     */
+
+  /**
+     * 查询当前光标所在处是否是一个视频
+     * @command insertvideo
+     * @method queryCommandState
+     * @param { String } cmd 需要查询的命令字符串
+     * @return { int } 如果当前光标所在处的元素是一个视频对象， 则返回1，否则返回0
+     * @example
+     * ```javascript
+     *
+     * //editor 是编辑器实例
+     * editor.queryCommandState( 'insertvideo' );
+     * ```
+     */
+  me.commands["insertvideo"] = {
+    execCommand: function(cmd, videoObjs, type) {
+      videoObjs = utils.isArray(videoObjs) ? videoObjs : [videoObjs];
+
+      if (me.fireEvent("beforeinsertvideo", videoObjs) === true) {
+        return;
+      }
+
+      var html = [],
+        id = "tmpVideo",
+        cl;
+      for (var i = 0, vi, len = videoObjs.length; i < len; i++) {
+        vi = videoObjs[i];
+        var videoType = 'iframe';
+        if(vi.url.match(/.mp4$/)){
+          videoType = 'video';
+        }
+        cl = videoType == "iframe"
+          ? "edui-video-iframe"
+          : "edui-video-video";
+        html.push(
+          creatInsertStr(
+            vi.url,
+            vi.width || 420,
+            vi.height || 280,
+            id + i,
+            null,
+            cl,
+            videoType
+          )
+        );
+      }
+      me.execCommand("inserthtml", html.join(""), true);
+      var rng = this.selection.getRange();
+      // for (var i = 0, len = videoObjs.length; i < len; i++) {
+      //   var img = this.document.getElementById("tmpVideo" + i);
+      //   domUtils.removeAttributes(img, "id");
+      //   rng.selectNode(img).select();
+      //   me.execCommand("imagefloat", videoObjs[i].align);
+      // }
+
+      me.fireEvent("afterinsertvideo", videoObjs);
+    },
+    queryCommandState: function() {
+      var img = me.selection.getRange().getClosedNode(),
+        flag =
+          img &&
+          (img.className == "edui-video-iframe" ||
+            img.className.indexOf("edui-video-iframe") != -1 ||
+            img.className == "edui-video-video" ||
+      img.className.indexOf("edui-video-video") != -1);
+      return flag ? 1 : 0;
+    }
+  };
+};
+
+
+// plugins/table.core.js
+/**
+ * Created with JetBrains WebStorm.
+ * User: taoqili
+ * Date: 13-1-18
+ * Time: 上午11:09
+ * To change this template use File | Settings | File Templates.
+ */
+/**
+ * UE表格操作类
+ * @param table
+ * @constructor
+ */
+(function() {
+  var UETable = (UE.UETable = function(table) {
+    this.table = table;
+    this.indexTable = [];
+    this.selectedTds = [];
+    this.cellsRange = {};
+    this.update(table);
+  });
+
+  //===以下为静态工具方法===
+  UETable.removeSelectedClass = function(cells) {
+    utils.each(cells, function(cell) {
+      domUtils.removeClasses(cell, "selectTdClass");
+    });
+  };
+  UETable.addSelectedClass = function(cells) {
+    utils.each(cells, function(cell) {
+      domUtils.addClass(cell, "selectTdClass");
+    });
+  };
+  UETable.isEmptyBlock = function(node) {
+    var reg = new RegExp(domUtils.fillChar, "g");
+    if (
+      node[browser.ie ? "innerText" : "textContent"]
+        .replace(/^\s*$/, "")
+        .replace(reg, "").length > 0
+    ) {
+      return 0;
+    }
+    for (var i in dtd.$isNotEmpty)
+      if (dtd.$isNotEmpty.hasOwnProperty(i)) {
+        if (node.getElementsByTagName(i).length) {
+          return 0;
+        }
+      }
+    return 1;
+  };
+  UETable.getWidth = function(cell) {
+    if (!cell) return 0;
+    return parseInt(domUtils.getComputedStyle(cell, "width"), 10);
+  };
+
+  /**
+     * 获取单元格或者单元格组的“对齐”状态。 如果当前的检测对象是一个单元格组， 只有在满足所有单元格的 水平和竖直 对齐属性都相同的
+     * 条件时才会返回其状态值，否则将返回null； 如果当前只检测了一个单元格， 则直接返回当前单元格的对齐状态；
+     * @param table cell or table cells , 支持单个单元格dom对象 或者 单元格dom对象数组
+     * @return { align: 'left' || 'right' || 'center', valign: 'top' || 'middle' || 'bottom' } 或者 null
+     */
+  UETable.getTableCellAlignState = function(cells) {
+    !utils.isArray(cells) && (cells = [cells]);
+
+    var result = {},
+      status = ["align", "valign"],
+      tempStatus = null,
+      isSame = true; //状态是否相同
+
+    utils.each(cells, function(cellNode) {
+      utils.each(status, function(currentState) {
+        tempStatus = cellNode.getAttribute(currentState);
+
+        if (!result[currentState] && tempStatus) {
+          result[currentState] = tempStatus;
+        } else if (
+          !result[currentState] ||
+          tempStatus !== result[currentState]
+        ) {
+          isSame = false;
+          return false;
+        }
+      });
+
+      return isSame;
+    });
+
+    return isSame ? result : null;
+  };
+
+  /**
+     * 根据当前选区获取相关的table信息
+     * @return {Object}
+     */
+  UETable.getTableItemsByRange = function(editor) {
+    var start = editor.selection.getStart();
+
+    //ff下会选中bookmark
+    if (
+      start &&
+      start.id &&
+      start.id.indexOf("_baidu_bookmark_start_") === 0 &&
+      start.nextSibling
+    ) {
+      start = start.nextSibling;
+    }
+
+    //在table或者td边缘有可能存在选中tr的情况
+    var cell = start && domUtils.findParentByTagName(start, ["td", "th"], true),
+      tr = cell && cell.parentNode,
+      table = tr && domUtils.findParentByTagName(tr, ["table"]),
+      caption = table && table.getElementsByTagName("caption")[0];
+
+    return {
+      cell: cell,
+      tr: tr,
+      table: table,
+      caption: caption
+    };
+  };
+  UETable.getUETableBySelected = function(editor) {
+    var table = UETable.getTableItemsByRange(editor).table;
+    if (table && table.ueTable && table.ueTable.selectedTds.length) {
+      return table.ueTable;
+    }
+    return null;
+  };
+
+  UETable.getDefaultValue = function(editor, table) {
+    var borderMap = {
+      thin: "0px",
+      medium: "1px",
+      thick: "2px"
+    },
+      tableBorder,
+      tdPadding,
+      tdBorder,
+      tmpValue;
+    if (!table) {
+      table = editor.document.createElement("table");
+      table.insertRow(0).insertCell(0).innerHTML = "xxx";
+      editor.body.appendChild(table);
+      var td = table.getElementsByTagName("td")[0];
+      tmpValue = domUtils.getComputedStyle(table, "border-left-width");
+      tableBorder = parseInt(borderMap[tmpValue] || tmpValue, 10);
+      tmpValue = domUtils.getComputedStyle(td, "padding-left");
+      tdPadding = parseInt(borderMap[tmpValue] || tmpValue, 10);
+      tmpValue = domUtils.getComputedStyle(td, "border-left-width");
+      tdBorder = parseInt(borderMap[tmpValue] || tmpValue, 10);
+      domUtils.remove(table);
+      return {
+        tableBorder: tableBorder,
+        tdPadding: tdPadding,
+        tdBorder: tdBorder
+      };
+    } else {
+      td = table.getElementsByTagName("td")[0];
+      tmpValue = domUtils.getComputedStyle(table, "border-left-width");
+      tableBorder = parseInt(borderMap[tmpValue] || tmpValue, 10);
+      tmpValue = domUtils.getComputedStyle(td, "padding-left");
+      tdPadding = parseInt(borderMap[tmpValue] || tmpValue, 10);
+      tmpValue = domUtils.getComputedStyle(td, "border-left-width");
+      tdBorder = parseInt(borderMap[tmpValue] || tmpValue, 10);
+      return {
+        tableBorder: tableBorder,
+        tdPadding: tdPadding,
+        tdBorder: tdBorder
+      };
+    }
+  };
+  /**
+     * 根据当前点击的td或者table获取索引对象
+     * @param tdOrTable
+     */
+  UETable.getUETable = function(tdOrTable) {
+    var tag = tdOrTable.tagName.toLowerCase();
+    tdOrTable = tag == "td" || tag == "th" || tag == "caption"
+      ? domUtils.findParentByTagName(tdOrTable, "table", true)
+      : tdOrTable;
+    if (!tdOrTable.ueTable) {
+      tdOrTable.ueTable = new UETable(tdOrTable);
+    }
+    return tdOrTable.ueTable;
+  };
+
+  UETable.cloneCell = function(cell, ignoreMerge, keepPro) {
+    if (!cell || utils.isString(cell)) {
+      return this.table.ownerDocument.createElement(cell || "td");
+    }
+    var flag = domUtils.hasClass(cell, "selectTdClass");
+    flag && domUtils.removeClasses(cell, "selectTdClass");
+    var tmpCell = cell.cloneNode(true);
+    if (ignoreMerge) {
+      tmpCell.rowSpan = tmpCell.colSpan = 1;
+    }
+    //去掉宽高
+    !keepPro && domUtils.removeAttributes(tmpCell, "width height");
+    !keepPro && domUtils.removeAttributes(tmpCell, "style");
+
+    tmpCell.style.borderLeftStyle = "";
+    tmpCell.style.borderTopStyle = "";
+    tmpCell.style.borderLeftColor = cell.style.borderRightColor;
+    tmpCell.style.borderLeftWidth = cell.style.borderRightWidth;
+    tmpCell.style.borderTopColor = cell.style.borderBottomColor;
+    tmpCell.style.borderTopWidth = cell.style.borderBottomWidth;
+    flag && domUtils.addClass(cell, "selectTdClass");
+    return tmpCell;
+  };
+
+  UETable.prototype = {
+    getMaxRows: function() {
+      var rows = this.table.rows,
+        maxLen = 1;
+      for (var i = 0, row; (row = rows[i]); i++) {
+        var currentMax = 1;
+        for (var j = 0, cj; (cj = row.cells[j++]); ) {
+          currentMax = Math.max(cj.rowSpan || 1, currentMax);
+        }
+        maxLen = Math.max(currentMax + i, maxLen);
+      }
+      return maxLen;
+    },
+    /**
+         * 获取当前表格的最大列数
+         */
+    getMaxCols: function() {
+      var rows = this.table.rows,
+        maxLen = 0,
+        cellRows = {};
+      for (var i = 0, row; (row = rows[i]); i++) {
+        var cellsNum = 0;
+        for (var j = 0, cj; (cj = row.cells[j++]); ) {
+          cellsNum += cj.colSpan || 1;
+          if (cj.rowSpan && cj.rowSpan > 1) {
+            for (var k = 1; k < cj.rowSpan; k++) {
+              if (!cellRows["row_" + (i + k)]) {
+                cellRows["row_" + (i + k)] = cj.colSpan || 1;
+              } else {
+                cellRows["row_" + (i + k)]++;
+              }
+            }
+          }
+        }
+        cellsNum += cellRows["row_" + i] || 0;
+        maxLen = Math.max(cellsNum, maxLen);
+      }
+      return maxLen;
+    },
+    getCellColIndex: function(cell) {},
+    /**
+         * 获取当前cell旁边的单元格，
+         * @param cell
+         * @param right
+         */
+    getHSideCell: function(cell, right) {
+      try {
+        var cellInfo = this.getCellInfo(cell),
+          previewRowIndex,
+          previewColIndex;
+        var len = this.selectedTds.length,
+          range = this.cellsRange;
+        //首行或者首列没有前置单元格
+        if (
+          (!right && (!len ? !cellInfo.colIndex : !range.beginColIndex)) ||
+          (right &&
+            (!len
+              ? cellInfo.colIndex == this.colsNum - 1
+              : range.endColIndex == this.colsNum - 1))
+        )
+          return null;
+
+        previewRowIndex = !len ? cellInfo.rowIndex : range.beginRowIndex;
+        previewColIndex = !right
+          ? !len
+            ? cellInfo.colIndex < 1 ? 0 : cellInfo.colIndex - 1
+            : range.beginColIndex - 1
+          : !len ? cellInfo.colIndex + 1 : range.endColIndex + 1;
+        return this.getCell(
+          this.indexTable[previewRowIndex][previewColIndex].rowIndex,
+          this.indexTable[previewRowIndex][previewColIndex].cellIndex
+        );
+      } catch (e) {
+        showError(e);
+      }
+    },
+    getTabNextCell: function(cell, preRowIndex) {
+      var cellInfo = this.getCellInfo(cell),
+        rowIndex = preRowIndex || cellInfo.rowIndex,
+        colIndex = cellInfo.colIndex + 1 + (cellInfo.colSpan - 1),
+        nextCell;
+      try {
+        nextCell = this.getCell(
+          this.indexTable[rowIndex][colIndex].rowIndex,
+          this.indexTable[rowIndex][colIndex].cellIndex
+        );
+      } catch (e) {
+        try {
+          rowIndex = rowIndex * 1 + 1;
+          colIndex = 0;
+          nextCell = this.getCell(
+            this.indexTable[rowIndex][colIndex].rowIndex,
+            this.indexTable[rowIndex][colIndex].cellIndex
+          );
+        } catch (e) {}
+      }
+      return nextCell;
+    },
+    /**
+         * 获取视觉上的后置单元格
+         * @param cell
+         * @param bottom
+         */
+    getVSideCell: function(cell, bottom, ignoreRange) {
+      try {
+        var cellInfo = this.getCellInfo(cell),
+          nextRowIndex,
+          nextColIndex;
+        var len = this.selectedTds.length && !ignoreRange,
+          range = this.cellsRange;
+        //末行或者末列没有后置单元格
+        if (
+          (!bottom && cellInfo.rowIndex == 0) ||
+          (bottom &&
+            (!len
+              ? cellInfo.rowIndex + cellInfo.rowSpan > this.rowsNum - 1
+              : range.endRowIndex == this.rowsNum - 1))
+        )
+          return null;
+
+        nextRowIndex = !bottom
+          ? !len ? cellInfo.rowIndex - 1 : range.beginRowIndex - 1
+          : !len ? cellInfo.rowIndex + cellInfo.rowSpan : range.endRowIndex + 1;
+        nextColIndex = !len ? cellInfo.colIndex : range.beginColIndex;
+        return this.getCell(
+          this.indexTable[nextRowIndex][nextColIndex].rowIndex,
+          this.indexTable[nextRowIndex][nextColIndex].cellIndex
+        );
+      } catch (e) {
+        showError(e);
+      }
+    },
+    /**
+         * 获取相同结束位置的单元格，xOrY指代了是获取x轴相同还是y轴相同
+         */
+    getSameEndPosCells: function(cell, xOrY) {
+      try {
+        var flag = xOrY.toLowerCase() === "x",
+          end =
+            domUtils.getXY(cell)[flag ? "x" : "y"] +
+            cell["offset" + (flag ? "Width" : "Height")],
+          rows = this.table.rows,
+          cells = null,
+          returns = [];
+        for (var i = 0; i < this.rowsNum; i++) {
+          cells = rows[i].cells;
+          for (var j = 0, tmpCell; (tmpCell = cells[j++]); ) {
+            var tmpEnd =
+              domUtils.getXY(tmpCell)[flag ? "x" : "y"] +
+              tmpCell["offset" + (flag ? "Width" : "Height")];
+            //对应行的td已经被上面行rowSpan了
+            if (tmpEnd > end && flag) break;
+            if (cell == tmpCell || end == tmpEnd) {
+              //只获取单一的单元格
+              //todo 仅获取单一单元格在特定情况下会造成returns为空，从而影响后续的拖拽实现，修正这个。需考虑性能
+              if (tmpCell[flag ? "colSpan" : "rowSpan"] == 1) {
+                returns.push(tmpCell);
+              }
+              if (flag) break;
+            }
+          }
+        }
+        return returns;
+      } catch (e) {
+        showError(e);
+      }
+    },
+    setCellContent: function(cell, content) {
+      cell.innerHTML = content || (browser.ie ? domUtils.fillChar : "<br />");
+    },
+    cloneCell: UETable.cloneCell,
+    /**
+         * 获取跟当前单元格的右边竖线为左边的所有未合并单元格
+         */
+    getSameStartPosXCells: function(cell) {
+      try {
+        var start = domUtils.getXY(cell).x + cell.offsetWidth,
+          rows = this.table.rows,
+          cells,
+          returns = [];
+        for (var i = 0; i < this.rowsNum; i++) {
+          cells = rows[i].cells;
+          for (var j = 0, tmpCell; (tmpCell = cells[j++]); ) {
+            var tmpStart = domUtils.getXY(tmpCell).x;
+            if (tmpStart > start) break;
+            if (tmpStart == start && tmpCell.colSpan == 1) {
+              returns.push(tmpCell);
+              break;
+            }
+          }
+        }
+        return returns;
+      } catch (e) {
+        showError(e);
+      }
+    },
+    /**
+         * 更新table对应的索引表
+         */
+    update: function(table) {
+      this.table = table || this.table;
+      this.selectedTds = [];
+      this.cellsRange = {};
+      this.indexTable = [];
+      var rows = this.table.rows,
+        rowsNum = this.getMaxRows(),
+        dNum = rowsNum - rows.length,
+        colsNum = this.getMaxCols();
+      while (dNum--) {
+        this.table.insertRow(rows.length);
+      }
+      this.rowsNum = rowsNum;
+      this.colsNum = colsNum;
+      for (var i = 0, len = rows.length; i < len; i++) {
+        this.indexTable[i] = new Array(colsNum);
+      }
+      //填充索引表
+      for (var rowIndex = 0, row; (row = rows[rowIndex]); rowIndex++) {
+        for (
+          var cellIndex = 0, cell, cells = row.cells;
+          (cell = cells[cellIndex]);
+          cellIndex++
+        ) {
+          //修正整行被rowSpan时导致的行数计算错误
+          if (cell.rowSpan > rowsNum) {
+            cell.rowSpan = rowsNum;
+          }
+          var colIndex = cellIndex,
+            rowSpan = cell.rowSpan || 1,
+            colSpan = cell.colSpan || 1;
+          //当已经被上一行rowSpan或者被前一列colSpan了，则跳到下一个单元格进行
+          while (this.indexTable[rowIndex][colIndex]) colIndex++;
+          for (var j = 0; j < rowSpan; j++) {
+            for (var k = 0; k < colSpan; k++) {
+              this.indexTable[rowIndex + j][colIndex + k] = {
+                rowIndex: rowIndex,
+                cellIndex: cellIndex,
+                colIndex: colIndex,
+                rowSpan: rowSpan,
+                colSpan: colSpan
+              };
+            }
+          }
+        }
+      }
+      //修复残缺td
+      for (j = 0; j < rowsNum; j++) {
+        for (k = 0; k < colsNum; k++) {
+          if (this.indexTable[j][k] === undefined) {
+            row = rows[j];
+            cell = row.cells[row.cells.length - 1];
+            cell = cell
+              ? cell.cloneNode(true)
+              : this.table.ownerDocument.createElement("td");
+            this.setCellContent(cell);
+            if (cell.colSpan !== 1) cell.colSpan = 1;
+            if (cell.rowSpan !== 1) cell.rowSpan = 1;
+            row.appendChild(cell);
+            this.indexTable[j][k] = {
+              rowIndex: j,
+              cellIndex: cell.cellIndex,
+              colIndex: k,
+              rowSpan: 1,
+              colSpan: 1
+            };
+          }
+        }
+      }
+      //当框选后删除行或者列后撤销，需要重建选区。
+      var tds = domUtils.getElementsByTagName(this.table, "td"),
+        selectTds = [];
+      utils.each(tds, function(td) {
+        if (domUtils.hasClass(td, "selectTdClass")) {
+          selectTds.push(td);
+        }
+      });
+      if (selectTds.length) {
+        var start = selectTds[0],
+          end = selectTds[selectTds.length - 1],
+          startInfo = this.getCellInfo(start),
+          endInfo = this.getCellInfo(end);
+        this.selectedTds = selectTds;
+        this.cellsRange = {
+          beginRowIndex: startInfo.rowIndex,
+          beginColIndex: startInfo.colIndex,
+          endRowIndex: endInfo.rowIndex + endInfo.rowSpan - 1,
+          endColIndex: endInfo.colIndex + endInfo.colSpan - 1
+        };
+      }
+      //给第一行设置firstRow的样式名称,在排序图标的样式上使用到
+      if (!domUtils.hasClass(this.table.rows[0], "firstRow")) {
+        domUtils.addClass(this.table.rows[0], "firstRow");
+        for (var i = 1; i < this.table.rows.length; i++) {
+          domUtils.removeClasses(this.table.rows[i], "firstRow");
+        }
+      }
+    },
+    /**
+         * 获取单元格的索引信息
+         */
+    getCellInfo: function(cell) {
+      if (!cell) return;
+      var cellIndex = cell.cellIndex,
+        rowIndex = cell.parentNode.rowIndex,
+        rowInfo = this.indexTable[rowIndex],
+        numCols = this.colsNum;
+      for (var colIndex = cellIndex; colIndex < numCols; colIndex++) {
+        var cellInfo = rowInfo[colIndex];
+        if (
+          cellInfo.rowIndex === rowIndex &&
+          cellInfo.cellIndex === cellIndex
+        ) {
+          return cellInfo;
+        }
+      }
+    },
+    /**
+         * 根据行列号获取单元格
+         */
+    getCell: function(rowIndex, cellIndex) {
+      return (
+        (rowIndex < this.rowsNum &&
+          this.table.rows[rowIndex].cells[cellIndex]) ||
+        null
+      );
+    },
+    /**
+         * 删除单元格
+         */
+    deleteCell: function(cell, rowIndex) {
+      rowIndex = typeof rowIndex == "number"
+        ? rowIndex
+        : cell.parentNode.rowIndex;
+      var row = this.table.rows[rowIndex];
+      row.deleteCell(cell.cellIndex);
+    },
+    /**
+         * 根据始末两个单元格获取被框选的所有单元格范围
+         */
+    getCellsRange: function(cellA, cellB) {
+      function checkRange(
+        beginRowIndex,
+        beginColIndex,
+        endRowIndex,
+        endColIndex
+      ) {
+        var tmpBeginRowIndex = beginRowIndex,
+          tmpBeginColIndex = beginColIndex,
+          tmpEndRowIndex = endRowIndex,
+          tmpEndColIndex = endColIndex,
+          cellInfo,
+          colIndex,
+          rowIndex;
+        // 通过indexTable检查是否存在超出TableRange上边界的情况
+        if (beginRowIndex > 0) {
+          for (colIndex = beginColIndex; colIndex < endColIndex; colIndex++) {
+            cellInfo = me.indexTable[beginRowIndex][colIndex];
+            rowIndex = cellInfo.rowIndex;
+            if (rowIndex < beginRowIndex) {
+              tmpBeginRowIndex = Math.min(rowIndex, tmpBeginRowIndex);
+            }
+          }
+        }
+        // 通过indexTable检查是否存在超出TableRange右边界的情况
+        if (endColIndex < me.colsNum) {
+          for (rowIndex = beginRowIndex; rowIndex < endRowIndex; rowIndex++) {
+            cellInfo = me.indexTable[rowIndex][endColIndex];
+            colIndex = cellInfo.colIndex + cellInfo.colSpan - 1;
+            if (colIndex > endColIndex) {
+              tmpEndColIndex = Math.max(colIndex, tmpEndColIndex);
+            }
+          }
+        }
+        // 检查是否有超出TableRange下边界的情况
+        if (endRowIndex < me.rowsNum) {
+          for (colIndex = beginColIndex; colIndex < endColIndex; colIndex++) {
+            cellInfo = me.indexTable[endRowIndex][colIndex];
+            rowIndex = cellInfo.rowIndex + cellInfo.rowSpan - 1;
+            if (rowIndex > endRowIndex) {
+              tmpEndRowIndex = Math.max(rowIndex, tmpEndRowIndex);
+            }
+          }
+        }
+        // 检查是否有超出TableRange左边界的情况
+        if (beginColIndex > 0) {
+          for (rowIndex = beginRowIndex; rowIndex < endRowIndex; rowIndex++) {
+            cellInfo = me.indexTable[rowIndex][beginColIndex];
+            colIndex = cellInfo.colIndex;
+            if (colIndex < beginColIndex) {
+              tmpBeginColIndex = Math.min(cellInfo.colIndex, tmpBeginColIndex);
+            }
+          }
+        }
+        //递归调用直至所有完成所有框选单元格的扩展
+        if (
+          tmpBeginRowIndex != beginRowIndex ||
+          tmpBeginColIndex != beginColIndex ||
+          tmpEndRowIndex != endRowIndex ||
+          tmpEndColIndex != endColIndex
+        ) {
+          return checkRange(
+            tmpBeginRowIndex,
+            tmpBeginColIndex,
+            tmpEndRowIndex,
+            tmpEndColIndex
+          );
+        } else {
+          // 不需要扩展TableRange的情况
+          return {
+            beginRowIndex: beginRowIndex,
+            beginColIndex: beginColIndex,
+            endRowIndex: endRowIndex,
+            endColIndex: endColIndex
+          };
+        }
+      }
+
+      try {
+        var me = this,
+          cellAInfo = me.getCellInfo(cellA);
+        if (cellA === cellB) {
+          return {
+            beginRowIndex: cellAInfo.rowIndex,
+            beginColIndex: cellAInfo.colIndex,
+            endRowIndex: cellAInfo.rowIndex + cellAInfo.rowSpan - 1,
+            endColIndex: cellAInfo.colIndex + cellAInfo.colSpan - 1
+          };
+        }
+        var cellBInfo = me.getCellInfo(cellB);
+        // 计算TableRange的四个边
+        var beginRowIndex = Math.min(cellAInfo.rowIndex, cellBInfo.rowIndex),
+          beginColIndex = Math.min(cellAInfo.colIndex, cellBInfo.colIndex),
+          endRowIndex = Math.max(
+            cellAInfo.rowIndex + cellAInfo.rowSpan - 1,
+            cellBInfo.rowIndex + cellBInfo.rowSpan - 1
+          ),
+          endColIndex = Math.max(
+            cellAInfo.colIndex + cellAInfo.colSpan - 1,
+            cellBInfo.colIndex + cellBInfo.colSpan - 1
+          );
+
+        return checkRange(
+          beginRowIndex,
+          beginColIndex,
+          endRowIndex,
+          endColIndex
+        );
+      } catch (e) {
+        //throw e;
+      }
+    },
+    /**
+         * 依据cellsRange获取对应的单元格集合
+         */
+    getCells: function(range) {
+      //每次获取cells之前必须先清除上次的选择，否则会对后续获取操作造成影响
+      this.clearSelected();
+      var beginRowIndex = range.beginRowIndex,
+        beginColIndex = range.beginColIndex,
+        endRowIndex = range.endRowIndex,
+        endColIndex = range.endColIndex,
+        cellInfo,
+        rowIndex,
+        colIndex,
+        tdHash = {},
+        returnTds = [];
+      for (var i = beginRowIndex; i <= endRowIndex; i++) {
+        for (var j = beginColIndex; j <= endColIndex; j++) {
+          cellInfo = this.indexTable[i][j];
+          rowIndex = cellInfo.rowIndex;
+          colIndex = cellInfo.colIndex;
+          // 如果Cells里已经包含了此Cell则跳过
+          var key = rowIndex + "|" + colIndex;
+          if (tdHash[key]) continue;
+          tdHash[key] = 1;
+          if (
+            rowIndex < i ||
+            colIndex < j ||
+            rowIndex + cellInfo.rowSpan - 1 > endRowIndex ||
+            colIndex + cellInfo.colSpan - 1 > endColIndex
+          ) {
+            return null;
+          }
+          returnTds.push(this.getCell(rowIndex, cellInfo.cellIndex));
+        }
+      }
+      return returnTds;
+    },
+    /**
+         * 清理已经选中的单元格
+         */
+    clearSelected: function() {
+      UETable.removeSelectedClass(this.selectedTds);
+      this.selectedTds = [];
+      this.cellsRange = {};
+    },
+    /**
+         * 根据range设置已经选中的单元格
+         */
+    setSelected: function(range) {
+      var cells = this.getCells(range);
+      UETable.addSelectedClass(cells);
+      this.selectedTds = cells;
+      this.cellsRange = range;
+    },
+    isFullRow: function() {
+      var range = this.cellsRange;
+      return range.endColIndex - range.beginColIndex + 1 == this.colsNum;
+    },
+    isFullCol: function() {
+      var range = this.cellsRange,
+        table = this.table,
+        ths = table.getElementsByTagName("th"),
+        rows = range.endRowIndex - range.beginRowIndex + 1;
+      return !ths.length
+        ? rows == this.rowsNum
+        : rows == this.rowsNum || rows == this.rowsNum - 1;
+    },
+    /**
+         * 获取视觉上的前置单元格，默认是左边，top传入时
+         * @param cell
+         * @param top
+         */
+    getNextCell: function(cell, bottom, ignoreRange) {
+      try {
+        var cellInfo = this.getCellInfo(cell),
+          nextRowIndex,
+          nextColIndex;
+        var len = this.selectedTds.length && !ignoreRange,
+          range = this.cellsRange;
+        //末行或者末列没有后置单元格
+        if (
+          (!bottom && cellInfo.rowIndex == 0) ||
+          (bottom &&
+            (!len
+              ? cellInfo.rowIndex + cellInfo.rowSpan > this.rowsNum - 1
+              : range.endRowIndex == this.rowsNum - 1))
+        )
+          return null;
+
+        nextRowIndex = !bottom
+          ? !len ? cellInfo.rowIndex - 1 : range.beginRowIndex - 1
+          : !len ? cellInfo.rowIndex + cellInfo.rowSpan : range.endRowIndex + 1;
+        nextColIndex = !len ? cellInfo.colIndex : range.beginColIndex;
+        return this.getCell(
+          this.indexTable[nextRowIndex][nextColIndex].rowIndex,
+          this.indexTable[nextRowIndex][nextColIndex].cellIndex
+        );
+      } catch (e) {
+        showError(e);
+      }
+    },
+    getPreviewCell: function(cell, top) {
+      try {
+        var cellInfo = this.getCellInfo(cell),
+          previewRowIndex,
+          previewColIndex;
+        var len = this.selectedTds.length,
+          range = this.cellsRange;
+        //首行或者首列没有前置单元格
+        if (
+          (!top && (!len ? !cellInfo.colIndex : !range.beginColIndex)) ||
+          (top &&
+            (!len
+              ? cellInfo.rowIndex > this.colsNum - 1
+              : range.endColIndex == this.colsNum - 1))
+        )
+          return null;
+
+        previewRowIndex = !top
+          ? !len ? cellInfo.rowIndex : range.beginRowIndex
+          : !len
+            ? cellInfo.rowIndex < 1 ? 0 : cellInfo.rowIndex - 1
+            : range.beginRowIndex;
+        previewColIndex = !top
+          ? !len
+            ? cellInfo.colIndex < 1 ? 0 : cellInfo.colIndex - 1
+            : range.beginColIndex - 1
+          : !len ? cellInfo.colIndex : range.endColIndex + 1;
+        return this.getCell(
+          this.indexTable[previewRowIndex][previewColIndex].rowIndex,
+          this.indexTable[previewRowIndex][previewColIndex].cellIndex
+        );
+      } catch (e) {
+        showError(e);
+      }
+    },
+    /**
+         * 移动单元格中的内容
+         */
+    moveContent: function(cellTo, cellFrom) {
+      if (UETable.isEmptyBlock(cellFrom)) return;
+      if (UETable.isEmptyBlock(cellTo)) {
+        cellTo.innerHTML = cellFrom.innerHTML;
+        return;
+      }
+      var child = cellTo.lastChild;
+      if (child.nodeType == 3 || !dtd.$block[child.tagName]) {
+        cellTo.appendChild(cellTo.ownerDocument.createElement("br"));
+      }
+      while ((child = cellFrom.firstChild)) {
+        cellTo.appendChild(child);
+      }
+    },
+    /**
+         * 向右合并单元格
+         */
+    mergeRight: function(cell) {
+      var cellInfo = this.getCellInfo(cell),
+        rightColIndex = cellInfo.colIndex + cellInfo.colSpan,
+        rightCellInfo = this.indexTable[cellInfo.rowIndex][rightColIndex],
+        rightCell = this.getCell(
+          rightCellInfo.rowIndex,
+          rightCellInfo.cellIndex
+        );
+      //合并
+      cell.colSpan = cellInfo.colSpan + rightCellInfo.colSpan;
+      //被合并的单元格不应存在宽度属性
+      cell.removeAttribute("width");
+      //移动内容
+      this.moveContent(cell, rightCell);
+      //删掉被合并的Cell
+      this.deleteCell(rightCell, rightCellInfo.rowIndex);
+      this.update();
+    },
+    /**
+         * 向下合并单元格
+         */
+    mergeDown: function(cell) {
+      var cellInfo = this.getCellInfo(cell),
+        downRowIndex = cellInfo.rowIndex + cellInfo.rowSpan,
+        downCellInfo = this.indexTable[downRowIndex][cellInfo.colIndex],
+        downCell = this.getCell(downCellInfo.rowIndex, downCellInfo.cellIndex);
+      cell.rowSpan = cellInfo.rowSpan + downCellInfo.rowSpan;
+      cell.removeAttribute("height");
+      this.moveContent(cell, downCell);
+      this.deleteCell(downCell, downCellInfo.rowIndex);
+      this.update();
+    },
+    /**
+         * 合并整个range中的内容
+         */
+    mergeRange: function() {
+      //由于合并操作可以在任意时刻进行，所以无法通过鼠标位置等信息实时生成range，只能通过缓存实例中的cellsRange对象来访问
+      var range = this.cellsRange,
+        leftTopCell = this.getCell(
+          range.beginRowIndex,
+          this.indexTable[range.beginRowIndex][range.beginColIndex].cellIndex
+        );
+
+      // 这段关于行表头或者列表头的特殊处理会导致表头合并范围错误
+      // 为什么有这段代码的原因未明，暂且注释掉，希望原作者看到后出面说明下
+      // if (
+      //   leftTopCell.tagName == "TH" &&
+      //   range.endRowIndex !== range.beginRowIndex
+      // ) {
+      //   var index = this.indexTable,
+      //     info = this.getCellInfo(leftTopCell);
+      //   leftTopCell = this.getCell(1, index[1][info.colIndex].cellIndex);
+      //   range = this.getCellsRange(
+      //     leftTopCell,
+      //     this.getCell(
+      //       index[this.rowsNum - 1][info.colIndex].rowIndex,
+      //       index[this.rowsNum - 1][info.colIndex].cellIndex
+      //     )
+      //   );
+      // }
+
+      // 删除剩余的Cells
+      var cells = this.getCells(range);
+      for (var i = 0, ci; (ci = cells[i++]); ) {
+        if (ci !== leftTopCell) {
+          this.moveContent(leftTopCell, ci);
+          this.deleteCell(ci);
+        }
+      }
+      // 修改左上角Cell的rowSpan和colSpan，并调整宽度属性设置
+      leftTopCell.rowSpan = range.endRowIndex - range.beginRowIndex + 1;
+      leftTopCell.rowSpan > 1 && leftTopCell.removeAttribute("height");
+      leftTopCell.colSpan = range.endColIndex - range.beginColIndex + 1;
+      leftTopCell.colSpan > 1 && leftTopCell.removeAttribute("width");
+      if (leftTopCell.rowSpan == this.rowsNum && leftTopCell.colSpan != 1) {
+        leftTopCell.colSpan = 1;
+      }
+
+      if (leftTopCell.colSpan == this.colsNum && leftTopCell.rowSpan != 1) {
+        var rowIndex = leftTopCell.parentNode.rowIndex;
+        //解决IE下的表格操作问题
+        if (this.table.deleteRow) {
+          for (
+            var i = rowIndex + 1,
+              curIndex = rowIndex + 1,
+              len = leftTopCell.rowSpan;
+            i < len;
+            i++
+          ) {
+            this.table.deleteRow(curIndex);
+          }
+        } else {
+          for (var i = 0, len = leftTopCell.rowSpan - 1; i < len; i++) {
+            var row = this.table.rows[rowIndex + 1];
+            row.parentNode.removeChild(row);
+          }
+        }
+        leftTopCell.rowSpan = 1;
+      }
+      this.update();
+    },
+    /**
+         * 插入一行单元格
+         */
+    insertRow: function(rowIndex, sourceCell) {
+      var numCols = this.colsNum,
+        table = this.table,
+        row = table.insertRow(rowIndex),
+        cell,
+        thead = null,
+        isInsertTitle =
+          typeof sourceCell == "string" && sourceCell.toUpperCase() == "TH";
+
+      function replaceTdToTh(colIndex, cell, tableRow) {
+        if (colIndex == 0) {
+          var tr = tableRow.nextSibling || tableRow.previousSibling,
+            th = tr.cells[colIndex];
+          if (th.tagName == "TH") {
+            th = cell.ownerDocument.createElement("th");
+            th.appendChild(cell.firstChild);
+            tableRow.insertBefore(th, cell);
+            domUtils.remove(cell);
+          }
+        } else {
+          if (cell.tagName == "TH") {
+            var td = cell.ownerDocument.createElement("td");
+            td.appendChild(cell.firstChild);
+            tableRow.insertBefore(td, cell);
+            domUtils.remove(cell);
+          }
+        }
+      }
+
+      //首行直接插入,无需考虑部分单元格被rowspan的情况
+      if (rowIndex == 0 || rowIndex == this.rowsNum) {
+        for (var colIndex = 0; colIndex < numCols; colIndex++) {
+          cell = this.cloneCell(sourceCell, true);
+          this.setCellContent(cell);
+          cell.getAttribute("vAlign") &&
+            cell.setAttribute("vAlign", cell.getAttribute("vAlign"));
+          row.appendChild(cell);
+          if (!isInsertTitle) replaceTdToTh(colIndex, cell, row);
+        }
+
+        if (isInsertTitle) {
+          thead = table.createTHead();
+          thead.insertBefore(row, thead.firstChild);
+        }
+      } else {
+        var infoRow = this.indexTable[rowIndex],
+          cellIndex = 0;
+        for (colIndex = 0; colIndex < numCols; colIndex++) {
+          var cellInfo = infoRow[colIndex];
+          //如果存在某个单元格的rowspan穿过待插入行的位置，则修改该单元格的rowspan即可，无需插入单元格
+          if (cellInfo.rowIndex < rowIndex) {
+            cell = this.getCell(cellInfo.rowIndex, cellInfo.cellIndex);
+            cell.rowSpan = cellInfo.rowSpan + 1;
+          } else {
+            cell = this.cloneCell(sourceCell, true);
+            this.setCellContent(cell);
+            row.appendChild(cell);
+          }
+          if (!isInsertTitle) replaceTdToTh(colIndex, cell, row);
+        }
+      }
+      //框选时插入不触发contentchange，需要手动更新索引。
+      this.update();
+      return row;
+    },
+    /**
+         * 删除一行单元格
+         * @param rowIndex
+         */
+    deleteRow: function(rowIndex) {
+      var row = this.table.rows[rowIndex],
+        infoRow = this.indexTable[rowIndex],
+        colsNum = this.colsNum,
+        count = 0; //处理计数
+      for (var colIndex = 0; colIndex < colsNum; ) {
+        var cellInfo = infoRow[colIndex],
+          cell = this.getCell(cellInfo.rowIndex, cellInfo.cellIndex);
+        if (cell.rowSpan > 1) {
+          if (cellInfo.rowIndex == rowIndex) {
+            var clone = cell.cloneNode(true);
+            clone.rowSpan = cell.rowSpan - 1;
+            clone.innerHTML = "";
+            cell.rowSpan = 1;
+            var nextRowIndex = rowIndex + 1,
+              nextRow = this.table.rows[nextRowIndex],
+              insertCellIndex,
+              preMerged =
+                this.getPreviewMergedCellsNum(nextRowIndex, colIndex) - count;
+            if (preMerged < colIndex) {
+              insertCellIndex = colIndex - preMerged - 1;
+              //nextRow.insertCell(insertCellIndex);
+              domUtils.insertAfter(nextRow.cells[insertCellIndex], clone);
+            } else {
+              if (nextRow.cells.length)
+                nextRow.insertBefore(clone, nextRow.cells[0]);
+            }
+            count += 1;
+            //cell.parentNode.removeChild(cell);
+          }
+        }
+        colIndex += cell.colSpan || 1;
+      }
+      var deleteTds = [],
+        cacheMap = {};
+      for (colIndex = 0; colIndex < colsNum; colIndex++) {
+        var tmpRowIndex = infoRow[colIndex].rowIndex,
+          tmpCellIndex = infoRow[colIndex].cellIndex,
+          key = tmpRowIndex + "_" + tmpCellIndex;
+        if (cacheMap[key]) continue;
+        cacheMap[key] = 1;
+        cell = this.getCell(tmpRowIndex, tmpCellIndex);
+        deleteTds.push(cell);
+      }
+      var mergeTds = [];
+      utils.each(deleteTds, function(td) {
+        if (td.rowSpan == 1) {
+          td.parentNode.removeChild(td);
+        } else {
+          mergeTds.push(td);
+        }
+      });
+      utils.each(mergeTds, function(td) {
+        td.rowSpan--;
+      });
+      row.parentNode.removeChild(row);
+      //浏览器方法本身存在bug,采用自定义方法删除
+      //this.table.deleteRow(rowIndex);
+      this.update();
+    },
+    insertCol: function(colIndex, sourceCell, defaultValue) {
+      var rowsNum = this.rowsNum,
+        rowIndex = 0,
+        tableRow,
+        cell,
+        backWidth = parseInt(
+          (this.table.offsetWidth -
+            (this.colsNum + 1) * 20 -
+            (this.colsNum + 1)) /
+            (this.colsNum + 1),
+          10
+        ),
+        isInsertTitleCol =
+          typeof sourceCell == "string" && sourceCell.toUpperCase() == "TH";
+
+      function replaceTdToTh(rowIndex, cell, tableRow) {
+        if (rowIndex == 0) {
+          var th = cell.nextSibling || cell.previousSibling;
+          if (th.tagName == "TH") {
+            th = cell.ownerDocument.createElement("th");
+            th.appendChild(cell.firstChild);
+            tableRow.insertBefore(th, cell);
+            domUtils.remove(cell);
+          }
+        } else {
+          if (cell.tagName == "TH") {
+            var td = cell.ownerDocument.createElement("td");
+            td.appendChild(cell.firstChild);
+            tableRow.insertBefore(td, cell);
+            domUtils.remove(cell);
+          }
+        }
+      }
+
+      var preCell;
+      if (colIndex == 0 || colIndex == this.colsNum) {
+        for (; rowIndex < rowsNum; rowIndex++) {
+          tableRow = this.table.rows[rowIndex];
+          preCell =
+            tableRow.cells[colIndex == 0 ? colIndex : tableRow.cells.length];
+          cell = this.cloneCell(sourceCell, true); //tableRow.insertCell(colIndex == 0 ? colIndex : tableRow.cells.length);
+          this.setCellContent(cell);
+          cell.setAttribute("vAlign", cell.getAttribute("vAlign"));
+          preCell && cell.setAttribute("width", preCell.getAttribute("width"));
+          if (!colIndex) {
+            tableRow.insertBefore(cell, tableRow.cells[0]);
+          } else {
+            domUtils.insertAfter(
+              tableRow.cells[tableRow.cells.length - 1],
+              cell
+            );
+          }
+          if (!isInsertTitleCol) replaceTdToTh(rowIndex, cell, tableRow);
+        }
+      } else {
+        for (; rowIndex < rowsNum; rowIndex++) {
+          var cellInfo = this.indexTable[rowIndex][colIndex];
+          if (cellInfo.colIndex < colIndex) {
+            cell = this.getCell(cellInfo.rowIndex, cellInfo.cellIndex);
+            cell.colSpan = cellInfo.colSpan + 1;
+          } else {
+            tableRow = this.table.rows[rowIndex];
+            preCell = tableRow.cells[cellInfo.cellIndex];
+
+            cell = this.cloneCell(sourceCell, true); //tableRow.insertCell(cellInfo.cellIndex);
+            this.setCellContent(cell);
+            cell.setAttribute("vAlign", cell.getAttribute("vAlign"));
+            preCell &&
+              cell.setAttribute("width", preCell.getAttribute("width"));
+            //防止IE下报错
+            preCell
+              ? tableRow.insertBefore(cell, preCell)
+              : tableRow.appendChild(cell);
+          }
+          if (!isInsertTitleCol) replaceTdToTh(rowIndex, cell, tableRow);
+        }
+      }
+      //框选时插入不触发contentchange，需要手动更新索引
+      this.update();
+      this.updateWidth(
+        backWidth,
+        defaultValue || { tdPadding: 10, tdBorder: 1 }
+      );
+    },
+    updateWidth: function(width, defaultValue) {
+      var table = this.table,
+        tmpWidth =
+          UETable.getWidth(table) -
+          defaultValue.tdPadding * 2 -
+          defaultValue.tdBorder +
+          width;
+      if (tmpWidth < table.ownerDocument.body.offsetWidth) {
+        table.setAttribute("width", tmpWidth);
+        return;
+      }
+      var tds = domUtils.getElementsByTagName(this.table, "td th");
+      utils.each(tds, function(td) {
+        td.setAttribute("width", width);
+      });
+    },
+    deleteCol: function(colIndex) {
+      var indexTable = this.indexTable,
+        tableRows = this.table.rows,
+        backTableWidth = this.table.getAttribute("width"),
+        backTdWidth = 0,
+        rowsNum = this.rowsNum,
+        cacheMap = {};
+      for (var rowIndex = 0; rowIndex < rowsNum; ) {
+        var infoRow = indexTable[rowIndex],
+          cellInfo = infoRow[colIndex],
+          key = cellInfo.rowIndex + "_" + cellInfo.colIndex;
+        // 跳过已经处理过的Cell
+        if (cacheMap[key]) continue;
+        cacheMap[key] = 1;
+        var cell = this.getCell(cellInfo.rowIndex, cellInfo.cellIndex);
+        if (!backTdWidth)
+          backTdWidth =
+            cell && parseInt(cell.offsetWidth / cell.colSpan, 10).toFixed(0);
+        // 如果Cell的colSpan大于1, 就修改colSpan, 否则就删掉这个Cell
+        if (cell.colSpan > 1) {
+          cell.colSpan--;
+        } else {
+          tableRows[rowIndex].deleteCell(cellInfo.cellIndex);
+        }
+        rowIndex += cellInfo.rowSpan || 1;
+      }
+      this.table.setAttribute("width", backTableWidth - backTdWidth);
+      this.update();
+    },
+    splitToCells: function(cell) {
+      var me = this,
+        cells = this.splitToRows(cell);
+      utils.each(cells, function(cell) {
+        me.splitToCols(cell);
+      });
+    },
+    splitToRows: function(cell) {
+      var cellInfo = this.getCellInfo(cell),
+        rowIndex = cellInfo.rowIndex,
+        colIndex = cellInfo.colIndex,
+        results = [];
+      // 修改Cell的rowSpan
+      cell.rowSpan = 1;
+      results.push(cell);
+      // 补齐单元格
+      for (
+        var i = rowIndex, endRow = rowIndex + cellInfo.rowSpan;
+        i < endRow;
+        i++
+      ) {
+        if (i == rowIndex) continue;
+        var tableRow = this.table.rows[i],
+          tmpCell = tableRow.insertCell(
+            colIndex - this.getPreviewMergedCellsNum(i, colIndex)
+          );
+        tmpCell.colSpan = cellInfo.colSpan;
+        this.setCellContent(tmpCell);
+        tmpCell.setAttribute("vAlign", cell.getAttribute("vAlign"));
+        tmpCell.setAttribute("align", cell.getAttribute("align"));
+        if (cell.style.cssText) {
+          tmpCell.style.cssText = cell.style.cssText;
+        }
+        results.push(tmpCell);
+      }
+      this.update();
+      return results;
+    },
+    getPreviewMergedCellsNum: function(rowIndex, colIndex) {
+      var indexRow = this.indexTable[rowIndex],
+        num = 0;
+      for (var i = 0; i < colIndex; ) {
+        var colSpan = indexRow[i].colSpan,
+          tmpRowIndex = indexRow[i].rowIndex;
+        num += colSpan - (tmpRowIndex == rowIndex ? 1 : 0);
+        i += colSpan;
+      }
+      return num;
+    },
+    splitToCols: function(cell) {
+      var backWidth = (cell.offsetWidth / cell.colSpan - 22).toFixed(0),
+        cellInfo = this.getCellInfo(cell),
+        rowIndex = cellInfo.rowIndex,
+        colIndex = cellInfo.colIndex,
+        results = [];
+      // 修改Cell的rowSpan
+      cell.colSpan = 1;
+      cell.setAttribute("width", backWidth);
+      results.push(cell);
+      // 补齐单元格
+      for (
+        var j = colIndex, endCol = colIndex + cellInfo.colSpan;
+        j < endCol;
+        j++
+      ) {
+        if (j == colIndex) continue;
+        var tableRow = this.table.rows[rowIndex],
+          tmpCell = tableRow.insertCell(
+            this.indexTable[rowIndex][j].cellIndex + 1
+          );
+        tmpCell.rowSpan = cellInfo.rowSpan;
+        this.setCellContent(tmpCell);
+        tmpCell.setAttribute("vAlign", cell.getAttribute("vAlign"));
+        tmpCell.setAttribute("align", cell.getAttribute("align"));
+        tmpCell.setAttribute("width", backWidth);
+        if (cell.style.cssText) {
+          tmpCell.style.cssText = cell.style.cssText;
+        }
+        //处理th的情况
+        if (cell.tagName == "TH") {
+          var th = cell.ownerDocument.createElement("th");
+          th.appendChild(tmpCell.firstChild);
+          th.setAttribute("vAlign", cell.getAttribute("vAlign"));
+          th.rowSpan = tmpCell.rowSpan;
+          tableRow.insertBefore(th, tmpCell);
+          domUtils.remove(tmpCell);
+        }
+        results.push(tmpCell);
+      }
+      this.update();
+      return results;
+    },
+    isLastCell: function(cell, rowsNum, colsNum) {
+      rowsNum = rowsNum || this.rowsNum;
+      colsNum = colsNum || this.colsNum;
+      var cellInfo = this.getCellInfo(cell);
+      return (
+        cellInfo.rowIndex + cellInfo.rowSpan == rowsNum &&
+        cellInfo.colIndex + cellInfo.colSpan == colsNum
+      );
+    },
+    getLastCell: function(cells) {
+      cells = cells || this.table.getElementsByTagName("td");
+      var firstInfo = this.getCellInfo(cells[0]);
+      var me = this,
+        last = cells[0],
+        tr = last.parentNode,
+        cellsNum = 0,
+        cols = 0,
+        rows;
+      utils.each(cells, function(cell) {
+        if (cell.parentNode == tr) cols += cell.colSpan || 1;
+        cellsNum += cell.rowSpan * cell.colSpan || 1;
+      });
+      rows = cellsNum / cols;
+      utils.each(cells, function(cell) {
+        if (me.isLastCell(cell, rows, cols)) {
+          last = cell;
+          return false;
+        }
+      });
+      return last;
+    },
+    selectRow: function(rowIndex) {
+      var indexRow = this.indexTable[rowIndex],
+        start = this.getCell(indexRow[0].rowIndex, indexRow[0].cellIndex),
+        end = this.getCell(
+          indexRow[this.colsNum - 1].rowIndex,
+          indexRow[this.colsNum - 1].cellIndex
+        ),
+        range = this.getCellsRange(start, end);
+      this.setSelected(range);
+    },
+    selectTable: function() {
+      var tds = this.table.getElementsByTagName("td"),
+        range = this.getCellsRange(tds[0], tds[tds.length - 1]);
+      this.setSelected(range);
+    },
+    setBackground: function(cells, value) {
+      if (typeof value === "string") {
+        utils.each(cells, function(cell) {
+          cell.style.backgroundColor = value;
+        });
+      } else if (typeof value === "object") {
+        value = utils.extend(
+          {
+            repeat: true,
+            colorList: ["#ddd", "#fff"]
+          },
+          value
+        );
+        var rowIndex = this.getCellInfo(cells[0]).rowIndex,
+          count = 0,
+          colors = value.colorList,
+          getColor = function(list, index, repeat) {
+            return list[index]
+              ? list[index]
+              : repeat ? list[index % list.length] : "";
+          };
+        for (var i = 0, cell; (cell = cells[i++]); ) {
+          var cellInfo = this.getCellInfo(cell);
+          cell.style.backgroundColor = getColor(
+            colors,
+            rowIndex + count == cellInfo.rowIndex ? count : ++count,
+            value.repeat
+          );
+        }
+      }
+    },
+    removeBackground: function(cells) {
+      utils.each(cells, function(cell) {
+        cell.style.backgroundColor = "";
+      });
+    }
+  };
+  function showError(e) {}
+})();
+
+
+// plugins/table.cmds.js
+/**
+ * Created with JetBrains PhpStorm.
+ * User: taoqili
+ * Date: 13-2-20
+ * Time: 下午6:25
+ * To change this template use File | Settings | File Templates.
+ */
+(function() {
+  var UT = UE.UETable,
+    getTableItemsByRange = function(editor) {
+      return UT.getTableItemsByRange(editor);
+    },
+    getUETableBySelected = function(editor) {
+      return UT.getUETableBySelected(editor);
+    },
+    getDefaultValue = function(editor, table) {
+      return UT.getDefaultValue(editor, table);
+    },
+    getUETable = function(tdOrTable) {
+      return UT.getUETable(tdOrTable);
+    };
+
+  UE.commands["inserttable"] = {
+    queryCommandState: function() {
+      return getTableItemsByRange(this).table ? -1 : 0;
+    },
+    execCommand: function(cmd, opt) {
+      function createTable(opt, tdWidth) {
+        var html = [],
+          rowsNum = opt.numRows,
+          colsNum = opt.numCols;
+        for (var r = 0; r < rowsNum; r++) {
+          html.push("<tr" + (r == 0 ? ' class="firstRow"' : "") + ">");
+          for (var c = 0; c < colsNum; c++) {
+            html.push(
+              '<td width="' +
+                tdWidth +
+                '"  vAlign="' +
+                opt.tdvalign +
+                '" >' +
+                (browser.ie && browser.version < 11
+                  ? domUtils.fillChar
+                  : "<br/>") +
+                "</td>"
+            );
+          }
+          html.push("</tr>");
+        }
+        //禁止指定table-width
+        return "<table><tbody>" + html.join("") + "</tbody></table>";
+      }
+
+      if (!opt) {
+        opt = utils.extend(
+          {},
+          {
+            numCols: this.options.defaultCols,
+            numRows: this.options.defaultRows,
+            tdvalign: this.options.tdvalign
+          }
+        );
+      }
+      var me = this;
+      var range = this.selection.getRange(),
+        start = range.startContainer,
+        firstParentBlock =
+          domUtils.findParent(
+            start,
+            function(node) {
+              return domUtils.isBlockElm(node);
+            },
+            true
+          ) || me.body;
+
+      var defaultValue = getDefaultValue(me),
+        tableWidth = firstParentBlock.offsetWidth,
+        tdWidth = Math.floor(
+          tableWidth / opt.numCols -
+            defaultValue.tdPadding * 2 -
+            defaultValue.tdBorder
+        );
+
+      //todo其他属性
+      !opt.tdvalign && (opt.tdvalign = me.options.tdvalign);
+      me.execCommand("inserthtml", createTable(opt, tdWidth));
+    }
+  };
+
+  UE.commands["insertparagraphbeforetable"] = {
+    queryCommandState: function() {
+      return getTableItemsByRange(this).cell ? 0 : -1;
+    },
+    execCommand: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        var p = this.document.createElement("p");
+        p.innerHTML = browser.ie ? "&nbsp;" : "<br />";
+        table.parentNode.insertBefore(p, table);
+        this.selection.getRange().setStart(p, 0).setCursor();
+      }
+    }
+  };
+
+  UE.commands["deletetable"] = {
+    queryCommandState: function() {
+      var rng = this.selection.getRange();
+      return domUtils.findParentByTagName(rng.startContainer, "table", true)
+        ? 0
+        : -1;
+    },
+    execCommand: function(cmd, table) {
+      var rng = this.selection.getRange();
+      table =
+        table ||
+        domUtils.findParentByTagName(rng.startContainer, "table", true);
+      if (table) {
+        var next = table.nextSibling;
+        if (!next) {
+          next = domUtils.createElement(this.document, "p", {
+            innerHTML: browser.ie ? domUtils.fillChar : "<br/>"
+          });
+          table.parentNode.insertBefore(next, table);
+        }
+        domUtils.remove(table);
+        rng = this.selection.getRange();
+        if (next.nodeType == 3) {
+          rng.setStartBefore(next);
+        } else {
+          rng.setStart(next, 0);
+        }
+        rng.setCursor(false, true);
+        this.fireEvent("tablehasdeleted");
+      }
+    }
+  };
+  UE.commands["cellalign"] = {
+    queryCommandState: function() {
+      return getSelectedArr(this).length ? 0 : -1;
+    },
+    execCommand: function(cmd, align) {
+      var selectedTds = getSelectedArr(this);
+      if (selectedTds.length) {
+        for (var i = 0, ci; (ci = selectedTds[i++]); ) {
+          ci.setAttribute("align", align);
+        }
+      }
+    }
+  };
+  UE.commands["cellvalign"] = {
+    queryCommandState: function() {
+      return getSelectedArr(this).length ? 0 : -1;
+    },
+    execCommand: function(cmd, valign) {
+      var selectedTds = getSelectedArr(this);
+      if (selectedTds.length) {
+        for (var i = 0, ci; (ci = selectedTds[i++]); ) {
+          ci.setAttribute("vAlign", valign);
+        }
+      }
+    }
+  };
+  UE.commands["insertcaption"] = {
+    queryCommandState: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        return table.getElementsByTagName("caption").length == 0 ? 1 : -1;
+      }
+      return -1;
+    },
+    execCommand: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        var caption = this.document.createElement("caption");
+        caption.innerHTML = browser.ie ? domUtils.fillChar : "<br/>";
+        table.insertBefore(caption, table.firstChild);
+        var range = this.selection.getRange();
+        range.setStart(caption, 0).setCursor();
+      }
+    }
+  };
+  UE.commands["deletecaption"] = {
+    queryCommandState: function() {
+      var rng = this.selection.getRange(),
+        table = domUtils.findParentByTagName(rng.startContainer, "table");
+      if (table) {
+        return table.getElementsByTagName("caption").length == 0 ? -1 : 1;
+      }
+      return -1;
+    },
+    execCommand: function() {
+      var rng = this.selection.getRange(),
+        table = domUtils.findParentByTagName(rng.startContainer, "table");
+      if (table) {
+        domUtils.remove(table.getElementsByTagName("caption")[0]);
+        var range = this.selection.getRange();
+        range.setStart(table.rows[0].cells[0], 0).setCursor();
+      }
+    }
+  };
+  UE.commands["inserttitle"] = {
+    queryCommandState: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        var firstRow = table.rows[0];
+        return firstRow.cells[
+          firstRow.cells.length - 1
+        ].tagName.toLowerCase() != "th"
+          ? 0
+          : -1;
+      }
+      return -1;
+    },
+    execCommand: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        getUETable(table).insertRow(0, "th");
+      }
+      var th = table.getElementsByTagName("th")[0];
+      this.selection.getRange().setStart(th, 0).setCursor(false, true);
+    }
+  };
+  UE.commands["deletetitle"] = {
+    queryCommandState: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        var firstRow = table.rows[0];
+        return firstRow.cells[
+          firstRow.cells.length - 1
+        ].tagName.toLowerCase() == "th"
+          ? 0
+          : -1;
+      }
+      return -1;
+    },
+    execCommand: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        domUtils.remove(table.rows[0]);
+      }
+      var td = table.getElementsByTagName("td")[0];
+      this.selection.getRange().setStart(td, 0).setCursor(false, true);
+    }
+  };
+  UE.commands["inserttitlecol"] = {
+    queryCommandState: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        var lastRow = table.rows[table.rows.length - 1];
+        return lastRow.getElementsByTagName("th").length ? -1 : 0;
+      }
+      return -1;
+    },
+    execCommand: function(cmd) {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        getUETable(table).insertCol(0, "th");
+      }
+      resetTdWidth(table, this);
+      var th = table.getElementsByTagName("th")[0];
+      this.selection.getRange().setStart(th, 0).setCursor(false, true);
+    }
+  };
+  UE.commands["deletetitlecol"] = {
+    queryCommandState: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        var lastRow = table.rows[table.rows.length - 1];
+        return lastRow.getElementsByTagName("th").length ? 0 : -1;
+      }
+      return -1;
+    },
+    execCommand: function() {
+      var table = getTableItemsByRange(this).table;
+      if (table) {
+        for (var i = 0; i < table.rows.length; i++) {
+          domUtils.remove(table.rows[i].children[0]);
+        }
+      }
+      resetTdWidth(table, this);
+      var td = table.getElementsByTagName("td")[0];
+      this.selection.getRange().setStart(td, 0).setCursor(false, true);
+    }
+  };
+
+  UE.commands["mergeright"] = {
+    queryCommandState: function(cmd) {
+      var tableItems = getTableItemsByRange(this),
+        table = tableItems.table,
+        cell = tableItems.cell;
+
+      if (!table || !cell) return -1;
+      var ut = getUETable(table);
+      if (ut.selectedTds.length) return -1;
+
+      var cellInfo = ut.getCellInfo(cell),
+        rightColIndex = cellInfo.colIndex + cellInfo.colSpan;
+      if (rightColIndex >= ut.colsNum) return -1; // 如果处于最右边则不能向右合并
+
+      var rightCellInfo = ut.indexTable[cellInfo.rowIndex][rightColIndex],
+        rightCell =
+          table.rows[rightCellInfo.rowIndex].cells[rightCellInfo.cellIndex];
+      if (!rightCell || cell.tagName != rightCell.tagName) return -1; // TH和TD不能相互合并
+
+      // 当且仅当两个Cell的开始列号和结束列号一致时能进行合并
+      return rightCellInfo.rowIndex == cellInfo.rowIndex &&
+        rightCellInfo.rowSpan == cellInfo.rowSpan
+        ? 0
+        : -1;
+    },
+    execCommand: function(cmd) {
+      var rng = this.selection.getRange(),
+        bk = rng.createBookmark(true);
+      var cell = getTableItemsByRange(this).cell,
+        ut = getUETable(cell);
+      ut.mergeRight(cell);
+      rng.moveToBookmark(bk).select();
+    }
+  };
+  UE.commands["mergedown"] = {
+    queryCommandState: function(cmd) {
+      var tableItems = getTableItemsByRange(this),
+        table = tableItems.table,
+        cell = tableItems.cell;
+
+      if (!table || !cell) return -1;
+      var ut = getUETable(table);
+      if (ut.selectedTds.length) return -1;
+
+      var cellInfo = ut.getCellInfo(cell),
+        downRowIndex = cellInfo.rowIndex + cellInfo.rowSpan;
+      if (downRowIndex >= ut.rowsNum) return -1; // 如果处于最下边则不能向下合并
+
+      var downCellInfo = ut.indexTable[downRowIndex][cellInfo.colIndex],
+        downCell =
+          table.rows[downCellInfo.rowIndex].cells[downCellInfo.cellIndex];
+      if (!downCell || cell.tagName != downCell.tagName) return -1; // TH和TD不能相互合并
+
+      // 当且仅当两个Cell的开始列号和结束列号一致时能进行合并
+      return downCellInfo.colIndex == cellInfo.colIndex &&
+        downCellInfo.colSpan == cellInfo.colSpan
+        ? 0
+        : -1;
+    },
+    execCommand: function() {
+      var rng = this.selection.getRange(),
+        bk = rng.createBookmark(true);
+      var cell = getTableItemsByRange(this).cell,
+        ut = getUETable(cell);
+      ut.mergeDown(cell);
+      rng.moveToBookmark(bk).select();
+    }
+  };
+  UE.commands["mergecells"] = {
+    queryCommandState: function() {
+      return getUETableBySelected(this) ? 0 : -1;
+    },
+    execCommand: function() {
+      var ut = getUETableBySelected(this);
+      if (ut && ut.selectedTds.length) {
+        var cell = ut.selectedTds[0];
+        ut.mergeRange();
+        var rng = this.selection.getRange();
+        if (domUtils.isEmptyBlock(cell)) {
+          rng.setStart(cell, 0).collapse(true);
+        } else {
+          rng.selectNodeContents(cell);
+        }
+        rng.select();
+      }
+    }
+  };
+  UE.commands["insertrow"] = {
+    queryCommandState: function() {
+      var tableItems = getTableItemsByRange(this),
+        cell = tableItems.cell;
+      return cell &&
+        (cell.tagName == "TD" ||
+          (cell.tagName == "TH" &&
+            tableItems.tr !== tableItems.table.rows[0])) &&
+        getUETable(tableItems.table).rowsNum < this.options.maxRowNum
+        ? 0
+        : -1;
+    },
+    execCommand: function() {
+      var rng = this.selection.getRange(),
+        bk = rng.createBookmark(true);
+      var tableItems = getTableItemsByRange(this),
+        cell = tableItems.cell,
+        table = tableItems.table,
+        ut = getUETable(table),
+        cellInfo = ut.getCellInfo(cell);
+      //ut.insertRow(!ut.selectedTds.length ? cellInfo.rowIndex:ut.cellsRange.beginRowIndex,'');
+      if (!ut.selectedTds.length) {
+        ut.insertRow(cellInfo.rowIndex, cell);
+      } else {
+        var range = ut.cellsRange;
+        for (
+          var i = 0, len = range.endRowIndex - range.beginRowIndex + 1;
+          i < len;
+          i++
+        ) {
+          ut.insertRow(range.beginRowIndex, cell);
+        }
+      }
+      rng.moveToBookmark(bk).select();
+      if (table.getAttribute("interlaced") === "enabled")
+        this.fireEvent("interlacetable", table);
+    }
+  };
+  //后插入行
+  UE.commands["insertrownext"] = {
+    queryCommandState: function() {
+      var tableItems = getTableItemsByRange(this),
+        cell = tableItems.cell;
+      return cell &&
+        cell.tagName == "TD" &&
+        getUETable(tableItems.table).rowsNum < this.options.maxRowNum
+        ? 0
+        : -1;
+    },
+    execCommand: function() {
+      var rng = this.selection.getRange(),
+        bk = rng.createBookmark(true);
+      var tableItems = getTableItemsByRange(this),
+        cell = tableItems.cell,
+        table = tableItems.table,
+        ut = getUETable(table),
+        cellInfo = ut.getCellInfo(cell);
+      //ut.insertRow(!ut.selectedTds.length? cellInfo.rowIndex + cellInfo.rowSpan : ut.cellsRange.endRowIndex + 1,'');
+      if (!ut.selectedTds.length) {
+        ut.insertRow(cellInfo.rowIndex + cellInfo.rowSpan, cell);
+      } else {
+        var range = ut.cellsRange;
+        for (
+          var i = 0, len = range.endRowIndex - range.beginRowIndex + 1;
+          i < len;
+          i++
+        ) {
+          ut.insertRow(range.endRowIndex + 1, cell);
+        }
+      }
+      rng.moveToBookmark(bk).select();
+      if (table.getAttribute("interlaced") === "enabled")
+        this.fireEvent("interlacetable", table);
+    }
+  };
+  UE.commands["deleterow"] = {
+    queryCommandState: function() {
+      var tableItems = getTableItemsByRange(this);
+      return tableItems.cell ? 0 : -1;
+    },
+    execCommand: function() {
+      var cell = getTableItemsByRange(this).cell,
+        ut = getUETable(cell),
+        cellsRange = ut.cellsRange,
+        cellInfo = ut.getCellInfo(cell),
+        preCell = ut.getVSideCell(cell),
+        nextCell = ut.getVSideCell(cell, true),
+        rng = this.selection.getRange();
+      if (utils.isEmptyObject(cellsRange)) {
+        ut.deleteRow(cellInfo.rowIndex);
+      } else {
+        for (
+          var i = cellsRange.beginRowIndex;
+          i < cellsRange.endRowIndex + 1;
+          i++
+        ) {
+          ut.deleteRow(cellsRange.beginRowIndex);
+        }
+      }
+      var table = ut.table;
+      if (!table.getElementsByTagName("td").length) {
+        var nextSibling = table.nextSibling;
+        domUtils.remove(table);
+        if (nextSibling) {
+          rng.setStart(nextSibling, 0).setCursor(false, true);
+        }
+      } else {
+        if (
+          cellInfo.rowSpan == 1 ||
+          cellInfo.rowSpan ==
+            cellsRange.endRowIndex - cellsRange.beginRowIndex + 1
+        ) {
+          if (nextCell || preCell)
+            rng.selectNodeContents(nextCell || preCell).setCursor(false, true);
+        } else {
+          var newCell = ut.getCell(
+            cellInfo.rowIndex,
+            ut.indexTable[cellInfo.rowIndex][cellInfo.colIndex].cellIndex
+          );
+          if (newCell) rng.selectNodeContents(newCell).setCursor(false, true);
+        }
+      }
+      if (table.getAttribute("interlaced") === "enabled")
+        this.fireEvent("interlacetable", table);
+    }
+  };
+  UE.commands["insertcol"] = {
+    queryCommandState: function(cmd) {
+      var tableItems = getTableItemsByRange(this),
+        cell = tableItems.cell;
+      return cell &&
+        (cell.tagName == "TD" ||
+          (cell.tagName == "TH" && cell !== tableItems.tr.cells[0])) &&
+        getUETable(tableItems.table).colsNum < this.options.maxColNum
+        ? 0
+        : -1;
+    },
+    execCommand: function(cmd) {
+      var rng = this.selection.getRange(),
+        bk = rng.createBookmark(true);
+      if (this.queryCommandState(cmd) == -1) return;
+      var cell = getTableItemsByRange(this).cell,
+        ut = getUETable(cell),
+        cellInfo = ut.getCellInfo(cell);
+
+      //ut.insertCol(!ut.selectedTds.length ? cellInfo.colIndex:ut.cellsRange.beginColIndex);
+      if (!ut.selectedTds.length) {
+        ut.insertCol(cellInfo.colIndex, cell);
+      } else {
+        var range = ut.cellsRange;
+        for (
+          var i = 0, len = range.endColIndex - range.beginColIndex + 1;
+          i < len;
+          i++
+        ) {
+          ut.insertCol(range.beginColIndex, cell);
+        }
+      }
+      rng.moveToBookmark(bk).select(true);
+    }
+  };
+  UE.commands["insertcolnext"] = {
+    queryCommandState: function() {
+      var tableItems = getTableItemsByRange(this),
+        cell = tableItems.cell;
+      return cell &&
+        getUETable(tableItems.table).colsNum < this.options.maxColNum
+        ? 0
+        : -1;
+    },
+    execCommand: function() {
+      var rng = this.selection.getRange(),
+        bk = rng.createBookmark(true);
+      var cell = getTableItemsByRange(this).cell,
+        ut = getUETable(cell),
+        cellInfo = ut.getCellInfo(cell);
+      //ut.insertCol(!ut.selectedTds.length ? cellInfo.colIndex + cellInfo.colSpan:ut.cellsRange.endColIndex +1);
+      if (!ut.selectedTds.length) {
+        ut.insertCol(cellInfo.colIndex + cellInfo.colSpan, cell);
+      } else {
+        var range = ut.cellsRange;
+        for (
+          var i = 0, len = range.endColIndex - range.beginColIndex + 1;
+          i < len;
+          i++
+        ) {
+          ut.insertCol(range.endColIndex + 1, cell);
+        }
+      }
+      rng.moveToBookmark(bk).select();
+    }
+  };
+
+  UE.commands["deletecol"] = {
+    queryCommandState: function() {
+      var tableItems = getTableItemsByRange(this);
+      return tableItems.cell ? 0 : -1;
+    },
+    execCommand: function() {
+      var cell = getTableItemsByRange(this).cell,
+        ut = getUETable(cell),
+        range = ut.cellsRange,
+        cellInfo = ut.getCellInfo(cell),
+        preCell = ut.getHSideCell(cell),
+        nextCell = ut.getHSideCell(cell, true);
+      if (utils.isEmptyObject(range)) {
+        ut.deleteCol(cellInfo.colIndex);
+      } else {
+        for (var i = range.beginColIndex; i < range.endColIndex + 1; i++) {
+          ut.deleteCol(range.beginColIndex);
+        }
+      }
+      var table = ut.table,
+        rng = this.selection.getRange();
+
+      if (!table.getElementsByTagName("td").length) {
+        var nextSibling = table.nextSibling;
+        domUtils.remove(table);
+        if (nextSibling) {
+          rng.setStart(nextSibling, 0).setCursor(false, true);
+        }
+      } else {
+        if (domUtils.inDoc(cell, this.document)) {
+          rng.setStart(cell, 0).setCursor(false, true);
+        } else {
+          if (nextCell && domUtils.inDoc(nextCell, this.document)) {
+            rng.selectNodeContents(nextCell).setCursor(false, true);
+          } else {
+            if (preCell && domUtils.inDoc(preCell, this.document)) {
+              rng.selectNodeContents(preCell).setCursor(true, true);
+            }
+          }
+        }
+      }
+    }
+  };
+  UE.commands["splittocells"] = {
+    queryCommandState: function() {
+      var tableItems = getTableItemsByRange(this),
+        cell = tableItems.cell;
+      if (!cell) return -1;
+      var ut = getUETable(tableItems.table);
+      if (ut.selectedTds.length > 0) return -1;
+      return cell && (cell.colSpan > 1 || cell.rowSpan > 1) ? 0 : -1;
+    },
+    execCommand: function() {
+      var rng = this.selection.getRange(),
+        bk = rng.createBookmark(true);
+      var cell = getTableItemsByRange(this).cell,
+        ut = getUETable(cell);
+      ut.splitToCells(cell);
+      rng.moveToBookmark(bk).select();
+    }
+  };
+  UE.commands["splittorows"] = {
+    queryCommandState: function() {
+      var tableItems = getTableItemsByRange(this),
+        cell = tableItems.cell;
+      if (!cell) return -1;
+      var ut = getUETable(tableItems.table);
+      if (ut.selectedTds.length > 0) return -1;
+      return cell && cell.rowSpan > 1 ? 0 : -1;
+    },
+    execCommand: function() {
+      var rng = this.selection.getRange(),
+        bk = rng.createBookmark(true);
+      var cell = getTableItemsByRange(this).cell,
+        ut = getUETable(cell);
+      ut.splitToRows(cell);
+      rng.moveToBookmark(bk).select();
+    }
+  };
+  UE.commands["splittocols"] = {
+    queryCommandState: function() {
+      var tableItems = getTableItemsByRange(this),
+        cell = tableItems.cell;
+      if (!cell) return -1;
+      var ut = getUETable(tableItems.table);
+      if (ut.selectedTds.length > 0) return -1;
+      return cell && cell.colSpan > 1 ? 0 : -1;
+    },
+    execCommand: function() {
+      var rng = this.selection.getRange(),
+        bk = rng.createBookmark(true);
+      var cell = getTableItemsByRange(this).cell,
+        ut = getUETable(cell);
+      ut.splitToCols(cell);
+      rng.moveToBookmark(bk).select();
+    }
+  };
+
+  UE.commands["adaptbytext"] = UE.commands["adaptbywindow"] = {
+    queryCommandState: function() {
+      return getTableItemsByRange(this).table ? 0 : -1;
+    },
+    execCommand: function(cmd) {
+      var tableItems = getTableItemsByRange(this),
+        table = tableItems.table;
+      if (table) {
+        if (cmd == "adaptbywindow") {
+          resetTdWidth(table, this);
+        } else {
+          var cells = domUtils.getElementsByTagName(table, "td th");
+          utils.each(cells, function(cell) {
+            cell.removeAttribute("width");
+          });
+          table.removeAttribute("width");
+        }
+      }
+    }
+  };
+
+  //平均分配各列
+  UE.commands["averagedistributecol"] = {
+    queryCommandState: function() {
+      var ut = getUETableBySelected(this);
+      if (!ut) return -1;
+      return ut.isFullRow() || ut.isFullCol() ? 0 : -1;
+    },
+    execCommand: function(cmd) {
+      var me = this,
+        ut = getUETableBySelected(me);
+
+      function getAverageWidth() {
+        var tb = ut.table,
+          averageWidth,
+          sumWidth = 0,
+          colsNum = 0,
+          tbAttr = getDefaultValue(me, tb);
+
+        if (ut.isFullRow()) {
+          sumWidth = tb.offsetWidth;
+          colsNum = ut.colsNum;
+        } else {
+          var begin = ut.cellsRange.beginColIndex,
+            end = ut.cellsRange.endColIndex,
+            node;
+          for (var i = begin; i <= end; ) {
+            node = ut.selectedTds[i];
+            sumWidth += node.offsetWidth;
+            i += node.colSpan;
+            colsNum += 1;
+          }
+        }
+        averageWidth =
+          Math.ceil(sumWidth / colsNum) -
+          tbAttr.tdBorder * 2 -
+          tbAttr.tdPadding * 2;
+        return averageWidth;
+      }
+
+      function setAverageWidth(averageWidth) {
+        utils.each(domUtils.getElementsByTagName(ut.table, "th"), function(
+          node
+        ) {
+          node.setAttribute("width", "");
+        });
+        var cells = ut.isFullRow()
+          ? domUtils.getElementsByTagName(ut.table, "td")
+          : ut.selectedTds;
+
+        utils.each(cells, function(node) {
+          if (node.colSpan == 1) {
+            node.setAttribute("width", averageWidth);
+          }
+        });
+      }
+
+      if (ut && ut.selectedTds.length) {
+        setAverageWidth(getAverageWidth());
+      }
+    }
+  };
+  //平均分配各行
+  UE.commands["averagedistributerow"] = {
+    queryCommandState: function() {
+      var ut = getUETableBySelected(this);
+      if (!ut) return -1;
+      if (ut.selectedTds && /th/gi.test(ut.selectedTds[0].tagName)) return -1;
+      return ut.isFullRow() || ut.isFullCol() ? 0 : -1;
+    },
+    execCommand: function(cmd) {
+      var me = this,
+        ut = getUETableBySelected(me);
+
+      function getAverageHeight() {
+        var averageHeight,
+          rowNum,
+          sumHeight = 0,
+          tb = ut.table,
+          tbAttr = getDefaultValue(me, tb),
+          tdpadding = parseInt(
+            domUtils.getComputedStyle(
+              tb.getElementsByTagName("td")[0],
+              "padding-top"
+            )
+          );
+
+        if (ut.isFullCol()) {
+          var captionArr = domUtils.getElementsByTagName(tb, "caption"),
+            thArr = domUtils.getElementsByTagName(tb, "th"),
+            captionHeight,
+            thHeight;
+
+          if (captionArr.length > 0) {
+            captionHeight = captionArr[0].offsetHeight;
+          }
+          if (thArr.length > 0) {
+            thHeight = thArr[0].offsetHeight;
+          }
+
+          sumHeight = tb.offsetHeight - (captionHeight || 0) - (thHeight || 0);
+          rowNum = thArr.length == 0 ? ut.rowsNum : ut.rowsNum - 1;
+        } else {
+          var begin = ut.cellsRange.beginRowIndex,
+            end = ut.cellsRange.endRowIndex,
+            count = 0,
+            trs = domUtils.getElementsByTagName(tb, "tr");
+          for (var i = begin; i <= end; i++) {
+            sumHeight += trs[i].offsetHeight;
+            count += 1;
+          }
+          rowNum = count;
+        }
+        //ie8下是混杂模式
+        if (browser.ie && browser.version < 9) {
+          averageHeight = Math.ceil(sumHeight / rowNum);
+        } else {
+          averageHeight =
+            Math.ceil(sumHeight / rowNum) - tbAttr.tdBorder * 2 - tdpadding * 2;
+        }
+        return averageHeight;
+      }
+
+      function setAverageHeight(averageHeight) {
+        var cells = ut.isFullCol()
+          ? domUtils.getElementsByTagName(ut.table, "td")
+          : ut.selectedTds;
+        utils.each(cells, function(node) {
+          if (node.rowSpan == 1) {
+            node.setAttribute("height", averageHeight);
+          }
+        });
+      }
+
+      if (ut && ut.selectedTds.length) {
+        setAverageHeight(getAverageHeight());
+      }
+    }
+  };
+
+  //单元格对齐方式
+  UE.commands["cellalignment"] = {
+    queryCommandState: function() {
+      return getTableItemsByRange(this).table ? 0 : -1;
+    },
+    execCommand: function(cmd, data) {
+      var me = this,
+        ut = getUETableBySelected(me);
+
+      if (!ut) {
+        var start = me.selection.getStart(),
+          cell =
+            start &&
+            domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
+        if (!/caption/gi.test(cell.tagName)) {
+          domUtils.setAttributes(cell, data);
+        } else {
+          cell.style.textAlign = data.align;
+          cell.style.verticalAlign = data.vAlign;
+        }
+        me.selection.getRange().setCursor(true);
+      } else {
+        utils.each(ut.selectedTds, function(cell) {
+          domUtils.setAttributes(cell, data);
+        });
+      }
+    },
+    /**
+         * 查询当前点击的单元格的对齐状态， 如果当前已经选择了多个单元格， 则会返回所有单元格经过统一协调过后的状态
+         * @see UE.UETable.getTableCellAlignState
+         */
+    queryCommandValue: function(cmd) {
+      var activeMenuCell = getTableItemsByRange(this).cell;
+
+      if (!activeMenuCell) {
+        activeMenuCell = getSelectedArr(this)[0];
+      }
+
+      if (!activeMenuCell) {
+        return null;
+      } else {
+        //获取同时选中的其他单元格
+        var cells = UE.UETable.getUETable(activeMenuCell).selectedTds;
+
+        !cells.length && (cells = activeMenuCell);
+
+        return UE.UETable.getTableCellAlignState(cells);
+      }
+    }
+  };
+  //表格对齐方式
+  UE.commands["tablealignment"] = {
+    queryCommandState: function() {
+      if (browser.ie && browser.version < 8) {
+        return -1;
+      }
+      return getTableItemsByRange(this).table ? 0 : -1;
+    },
+    execCommand: function(cmd, value) {
+      var me = this,
+        start = me.selection.getStart(),
+        table = start && domUtils.findParentByTagName(start, ["table"], true);
+
+      if (table) {
+        table.setAttribute("align", value);
+      }
+    }
+  };
+
+  //表格属性
+  UE.commands["edittable"] = {
+    queryCommandState: function() {
+      return getTableItemsByRange(this).table ? 0 : -1;
+    },
+    execCommand: function(cmd, color) {
+      var rng = this.selection.getRange(),
+        table = domUtils.findParentByTagName(rng.startContainer, "table");
+      if (table) {
+        var arr = domUtils
+          .getElementsByTagName(table, "td")
+          .concat(
+            domUtils.getElementsByTagName(table, "th"),
+            domUtils.getElementsByTagName(table, "caption")
+          );
+        utils.each(arr, function(node) {
+          node.style.borderColor = color;
+        });
+      }
+    }
+  };
+  //单元格属性
+  UE.commands["edittd"] = {
+    queryCommandState: function() {
+      return getTableItemsByRange(this).table ? 0 : -1;
+    },
+    execCommand: function(cmd, bkColor) {
+      var me = this,
+        ut = getUETableBySelected(me);
+
+      if (!ut) {
+        var start = me.selection.getStart(),
+          cell =
+            start &&
+            domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
+        if (cell) {
+          cell.style.backgroundColor = bkColor;
+        }
+      } else {
+        utils.each(ut.selectedTds, function(cell) {
+          cell.style.backgroundColor = bkColor;
+        });
+      }
+    }
+  };
+
+  UE.commands["settablebackground"] = {
+    queryCommandState: function() {
+      return getSelectedArr(this).length > 1 ? 0 : -1;
+    },
+    execCommand: function(cmd, value) {
+      var cells, ut;
+      cells = getSelectedArr(this);
+      ut = getUETable(cells[0]);
+      ut.setBackground(cells, value);
+    }
+  };
+
+  UE.commands["cleartablebackground"] = {
+    queryCommandState: function() {
+      var cells = getSelectedArr(this);
+      if (!cells.length) return -1;
+      for (var i = 0, cell; (cell = cells[i++]); ) {
+        if (cell.style.backgroundColor !== "") return 0;
+      }
+      return -1;
+    },
+    execCommand: function() {
+      var cells = getSelectedArr(this),
+        ut = getUETable(cells[0]);
+      ut.removeBackground(cells);
+    }
+  };
+
+  UE.commands["interlacetable"] = UE.commands["uninterlacetable"] = {
+    queryCommandState: function(cmd) {
+      var table = getTableItemsByRange(this).table;
+      if (!table) return -1;
+      var interlaced = table.getAttribute("interlaced");
+      if (cmd == "interlacetable") {
+        //TODO 待定
+        //是否需要待定，如果设置，则命令只能单次执行成功，但反射具备toggle效果；否则可以覆盖前次命令，但反射将不存在toggle效果
+        return interlaced === "enabled" ? -1 : 0;
+      } else {
+        return !interlaced || interlaced === "disabled" ? -1 : 0;
+      }
+    },
+    execCommand: function(cmd, classList) {
+      var table = getTableItemsByRange(this).table;
+      if (cmd == "interlacetable") {
+        table.setAttribute("interlaced", "enabled");
+        this.fireEvent("interlacetable", table, classList);
+      } else {
+        table.setAttribute("interlaced", "disabled");
+        this.fireEvent("uninterlacetable", table);
+      }
+    }
+  };
+  UE.commands["setbordervisible"] = {
+    queryCommandState: function(cmd) {
+      var table = getTableItemsByRange(this).table;
+      if (!table) return -1;
+      return 0;
+    },
+    execCommand: function() {
+      var table = getTableItemsByRange(this).table;
+      utils.each(domUtils.getElementsByTagName(table, "td"), function(td) {
+        td.style.borderWidth = "1px";
+        td.style.borderStyle = "solid";
+      });
+    }
+  };
+  function resetTdWidth(table, editor) {
+    var tds = domUtils.getElementsByTagName(table, "td th");
+    utils.each(tds, function(td) {
+      td.removeAttribute("width");
+    });
+    table.setAttribute(
+      "width",
+      getTableWidth(editor, true, getDefaultValue(editor, table))
+    );
+    var tdsWidths = [];
+    setTimeout(function() {
+      utils.each(tds, function(td) {
+        td.colSpan == 1 && tdsWidths.push(td.offsetWidth);
+      });
+      utils.each(tds, function(td, i) {
+        td.colSpan == 1 && td.setAttribute("width", tdsWidths[i] + "");
+      });
+    }, 0);
+  }
+
+  function getTableWidth(editor, needIEHack, defaultValue) {
+    var body = editor.body;
+    return (
+      body.offsetWidth -
+      (needIEHack
+        ? parseInt(domUtils.getComputedStyle(body, "margin-left"), 10) * 2
+        : 0) -
+      defaultValue.tableBorder * 2 -
+      (editor.options.offsetWidth || 0)
+    );
+  }
+
+  function getSelectedArr(editor) {
+    var cell = getTableItemsByRange(editor).cell;
+    if (cell) {
+      var ut = getUETable(cell);
+      return ut.selectedTds.length ? ut.selectedTds : [cell];
+    } else {
+      return [];
+    }
+  }
+})();
+
+
+// plugins/table.action.js
+/**
+ * Created with JetBrains PhpStorm.
+ * User: taoqili
+ * Date: 12-10-12
+ * Time: 上午10:05
+ * To change this template use File | Settings | File Templates.
+ */
+UE.plugins["table"] = function() {
+  var me = this,
+    tabTimer = null,
+    //拖动计时器
+    tableDragTimer = null,
+    //双击计时器
+    tableResizeTimer = null,
+    //单元格最小宽度
+    cellMinWidth = 5,
+    isInResizeBuffer = false,
+    //单元格边框大小
+    cellBorderWidth = 5,
+    //鼠标偏移距离
+    offsetOfTableCell = 10,
+    //记录在有限时间内的点击状态， 共有3个取值， 0, 1, 2。 0代表未初始化， 1代表单击了1次，2代表2次
+    singleClickState = 0,
+    userActionStatus = null,
+    //双击允许的时间范围
+    dblclickTime = 200,
+    UT = UE.UETable,
+    getUETable = function(tdOrTable) {
+      return UT.getUETable(tdOrTable);
+    },
+    getUETableBySelected = function(editor) {
+      return UT.getUETableBySelected(editor);
+    },
+    getDefaultValue = function(editor, table) {
+      return UT.getDefaultValue(editor, table);
+    },
+    removeSelectedClass = function(cells) {
+      return UT.removeSelectedClass(cells);
+    };
+
+  function showError(e) {
+    //        throw e;
+  }
+  me.ready(function() {
+    var me = this;
+    var orgGetText = me.selection.getText;
+    me.selection.getText = function() {
+      var table = getUETableBySelected(me);
+      if (table) {
+        var str = "";
+        utils.each(table.selectedTds, function(td) {
+          str += td[browser.ie ? "innerText" : "textContent"];
+        });
+        return str;
+      } else {
+        return orgGetText.call(me.selection);
+      }
+    };
+  });
+
+  //处理拖动及框选相关方法
+  var startTd = null, //鼠标按下时的锚点td
+    currentTd = null, //当前鼠标经过时的td
+    onDrag = "", //指示当前拖动状态，其值可为"","h","v" ,分别表示未拖动状态，横向拖动状态，纵向拖动状态，用于鼠标移动过程中的判断
+    onBorder = false, //检测鼠标按下时是否处在单元格边缘位置
+    dragButton = null,
+    dragOver = false,
+    dragLine = null, //模拟的拖动线
+    dragTd = null; //发生拖动的目标td
+
+  var mousedown = false,
+    //todo 判断混乱模式
+    needIEHack = true;
+
+  me.setOpt({
+    maxColNum: 20,
+    maxRowNum: 100,
+    defaultCols: 5,
+    defaultRows: 5,
+    tdvalign: "top",
+    cursorpath: me.options.UEDITOR_HOME_URL + "themes/default/images/cursor_",
+    tableDragable: false,
+    classList: [
+      "ue-table-interlace-color-single",
+      "ue-table-interlace-color-double"
+    ]
+  });
+  me.getUETable = getUETable;
+  var commands = {
+    deletetable: 1,
+    inserttable: 1,
+    cellvalign: 1,
+    insertcaption: 1,
+    deletecaption: 1,
+    inserttitle: 1,
+    deletetitle: 1,
+    mergeright: 1,
+    mergedown: 1,
+    mergecells: 1,
+    insertrow: 1,
+    insertrownext: 1,
+    deleterow: 1,
+    insertcol: 1,
+    insertcolnext: 1,
+    deletecol: 1,
+    splittocells: 1,
+    splittorows: 1,
+    splittocols: 1,
+    adaptbytext: 1,
+    adaptbywindow: 1,
+    adaptbycustomer: 1,
+    insertparagraph: 1,
+    insertparagraphbeforetable: 1,
+    averagedistributecol: 1,
+    averagedistributerow: 1
+  };
+  me.ready(function() {
+    utils.cssRule(
+      "table",
+      //选中的td上的样式
+      ".selectTdClass{background-color:#edf5fa !important}" +
+        "table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}" +
+        //插入的表格的默认样式
+        "table{margin-bottom:10px;border-collapse:collapse;display:table;}" +
+        "td,th{padding: 5px 10px;border: 1px solid #DDD;}" +
+        "caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}" +
+        "th{border-top:1px solid #BBB;background-color:#F7F7F7;}" +
+        "table tr.firstRow th{border-top-width:2px;}" +
+        ".ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }" +
+        "td p{margin:0;padding:0;}",
+      me.document
+    );
+
+    var tableCopyList, isFullCol, isFullRow;
+    //注册del/backspace事件
+    me.addListener("keydown", function(cmd, evt) {
+      var me = this;
+      var keyCode = evt.keyCode || evt.which;
+
+      if (keyCode == 8) {
+        var ut = getUETableBySelected(me);
+        if (ut && ut.selectedTds.length) {
+          if (ut.isFullCol()) {
+            me.execCommand("deletecol");
+          } else if (ut.isFullRow()) {
+            me.execCommand("deleterow");
+          } else {
+            me.fireEvent("delcells");
+          }
+          domUtils.preventDefault(evt);
+        }
+
+        var caption = domUtils.findParentByTagName(
+          me.selection.getStart(),
+          "caption",
+          true
+        ),
+          range = me.selection.getRange();
+        if (range.collapsed && caption && isEmptyBlock(caption)) {
+          me.fireEvent("saveScene");
+          var table = caption.parentNode;
+          domUtils.remove(caption);
+          if (table) {
+            range.setStart(table.rows[0].cells[0], 0).setCursor(false, true);
+          }
+          me.fireEvent("saveScene");
+        }
+      }
+
+      if (keyCode == 46) {
+        ut = getUETableBySelected(me);
+        if (ut) {
+          me.fireEvent("saveScene");
+          for (var i = 0, ci; (ci = ut.selectedTds[i++]); ) {
+            domUtils.fillNode(me.document, ci);
+          }
+          me.fireEvent("saveScene");
+          domUtils.preventDefault(evt);
+        }
+      }
+      if (keyCode == 13) {
+        var rng = me.selection.getRange(),
+          caption = domUtils.findParentByTagName(
+            rng.startContainer,
+            "caption",
+            true
+          );
+        if (caption) {
+          var table = domUtils.findParentByTagName(caption, "table");
+          if (!rng.collapsed) {
+            rng.deleteContents();
+            me.fireEvent("saveScene");
+          } else {
+            if (caption) {
+              rng.setStart(table.rows[0].cells[0], 0).setCursor(false, true);
+            }
+          }
+          domUtils.preventDefault(evt);
+          return;
+        }
+        if (rng.collapsed) {
+          var table = domUtils.findParentByTagName(rng.startContainer, "table");
+          if (table) {
+            var cell = table.rows[0].cells[0],
+              start = domUtils.findParentByTagName(
+                me.selection.getStart(),
+                ["td", "th"],
+                true
+              ),
+              preNode = table.previousSibling;
+            if (
+              cell === start &&
+              (!preNode ||
+                (preNode.nodeType == 1 && preNode.tagName == "TABLE")) &&
+              domUtils.isStartInblock(rng)
+            ) {
+              var first = domUtils.findParent(
+                me.selection.getStart(),
+                function(n) {
+                  return domUtils.isBlockElm(n);
+                },
+                true
+              );
+              if (
+                first &&
+                (/t(h|d)/i.test(first.tagName) || first === start.firstChild)
+              ) {
+                me.execCommand("insertparagraphbeforetable");
+                domUtils.preventDefault(evt);
+              }
+            }
+          }
+        }
+      }
+
+      if ((evt.ctrlKey || evt.metaKey) && evt.keyCode == "67") {
+        tableCopyList = null;
+        var ut = getUETableBySelected(me);
+        if (ut) {
+          var tds = ut.selectedTds;
+          isFullCol = ut.isFullCol();
+          isFullRow = ut.isFullRow();
+          tableCopyList = [[ut.cloneCell(tds[0], null, true)]];
+          for (var i = 1, ci; (ci = tds[i]); i++) {
+            if (ci.parentNode !== tds[i - 1].parentNode) {
+              tableCopyList.push([ut.cloneCell(ci, null, true)]);
+            } else {
+              tableCopyList[tableCopyList.length - 1].push(
+                ut.cloneCell(ci, null, true)
+              );
+            }
+          }
+        }
+      }
+    });
+    me.addListener("tablehasdeleted", function() {
+      toggleDraggableState(this, false, "", null);
+      if (dragButton) domUtils.remove(dragButton);
+    });
+
+    me.addListener("beforepaste", function(cmd, html) {
+      var me = this;
+      var rng = me.selection.getRange();
+      if (domUtils.findParentByTagName(rng.startContainer, "caption", true)) {
+        var div = me.document.createElement("div");
+        div.innerHTML = html.html;
+        //trace:3729
+        html.html = div[browser.ie9below ? "innerText" : "textContent"];
+        return;
+      }
+      var table = getUETableBySelected(me);
+      if (tableCopyList) {
+        me.fireEvent("saveScene");
+        var rng = me.selection.getRange();
+        var td = domUtils.findParentByTagName(
+          rng.startContainer,
+          ["td", "th"],
+          true
+        ),
+          tmpNode,
+          preNode;
+        if (td) {
+          var ut = getUETable(td);
+          if (isFullRow) {
+            var rowIndex = ut.getCellInfo(td).rowIndex;
+            if (td.tagName == "TH") {
+              rowIndex++;
+            }
+            for (var i = 0, ci; (ci = tableCopyList[i++]); ) {
+              var tr = ut.insertRow(rowIndex++, "td");
+              for (var j = 0, cj; (cj = ci[j]); j++) {
+                var cell = tr.cells[j];
+                if (!cell) {
+                  cell = tr.insertCell(j);
+                }
+                cell.innerHTML = cj.innerHTML;
+                cj.getAttribute("width") &&
+                  cell.setAttribute("width", cj.getAttribute("width"));
+                cj.getAttribute("vAlign") &&
+                  cell.setAttribute("vAlign", cj.getAttribute("vAlign"));
+                cj.getAttribute("align") &&
+                  cell.setAttribute("align", cj.getAttribute("align"));
+                cj.style.cssText && (cell.style.cssText = cj.style.cssText);
+              }
+              for (var j = 0, cj; (cj = tr.cells[j]); j++) {
+                if (!ci[j]) break;
+                cj.innerHTML = ci[j].innerHTML;
+                ci[j].getAttribute("width") &&
+                  cj.setAttribute("width", ci[j].getAttribute("width"));
+                ci[j].getAttribute("vAlign") &&
+                  cj.setAttribute("vAlign", ci[j].getAttribute("vAlign"));
+                ci[j].getAttribute("align") &&
+                  cj.setAttribute("align", ci[j].getAttribute("align"));
+                ci[j].style.cssText && (cj.style.cssText = ci[j].style.cssText);
+              }
+            }
+          } else {
+            if (isFullCol) {
+              cellInfo = ut.getCellInfo(td);
+              var maxColNum = 0;
+              for (var j = 0, ci = tableCopyList[0], cj; (cj = ci[j++]); ) {
+                maxColNum += cj.colSpan || 1;
+              }
+              me.__hasEnterExecCommand = true;
+              for (i = 0; i < maxColNum; i++) {
+                me.execCommand("insertcol");
+              }
+              me.__hasEnterExecCommand = false;
+              td = ut.table.rows[0].cells[cellInfo.cellIndex];
+              if (td.tagName == "TH") {
+                td = ut.table.rows[1].cells[cellInfo.cellIndex];
+              }
+            }
+            for (var i = 0, ci; (ci = tableCopyList[i++]); ) {
+              tmpNode = td;
+              for (var j = 0, cj; (cj = ci[j++]); ) {
+                if (td) {
+                  td.innerHTML = cj.innerHTML;
+                  //todo 定制处理
+                  cj.getAttribute("width") &&
+                    td.setAttribute("width", cj.getAttribute("width"));
+                  cj.getAttribute("vAlign") &&
+                    td.setAttribute("vAlign", cj.getAttribute("vAlign"));
+                  cj.getAttribute("align") &&
+                    td.setAttribute("align", cj.getAttribute("align"));
+                  cj.style.cssText && (td.style.cssText = cj.style.cssText);
+                  preNode = td;
+                  td = td.nextSibling;
+                } else {
+                  var cloneTd = cj.cloneNode(true);
+                  domUtils.removeAttributes(cloneTd, [
+                    "class",
+                    "rowSpan",
+                    "colSpan"
+                  ]);
+
+                  preNode.parentNode.appendChild(cloneTd);
+                }
+              }
+              td = ut.getNextCell(tmpNode, true, true);
+              if (!tableCopyList[i]) break;
+              if (!td) {
+                var cellInfo = ut.getCellInfo(tmpNode);
+                ut.table.insertRow(ut.table.rows.length);
+                ut.update();
+                td = ut.getVSideCell(tmpNode, true);
+              }
+            }
+          }
+          ut.update();
+        } else {
+          table = me.document.createElement("table");
+          for (var i = 0, ci; (ci = tableCopyList[i++]); ) {
+            var tr = table.insertRow(table.rows.length);
+            for (var j = 0, cj; (cj = ci[j++]); ) {
+              cloneTd = UT.cloneCell(cj, null, true);
+              domUtils.removeAttributes(cloneTd, ["class"]);
+              tr.appendChild(cloneTd);
+            }
+            if (j == 2 && cloneTd.rowSpan > 1) {
+              cloneTd.rowSpan = 1;
+            }
+          }
+
+          var defaultValue = getDefaultValue(me),
+            width =
+              me.body.offsetWidth -
+              (needIEHack
+                ? parseInt(
+                    domUtils.getComputedStyle(me.body, "margin-left"),
+                    10
+                  ) * 2
+                : 0) -
+              defaultValue.tableBorder * 2 -
+              (me.options.offsetWidth || 0);
+          me.execCommand(
+            "insertHTML",
+            "<table  " +
+              (isFullCol && isFullRow ? 'width="' + width + '"' : "") +
+              ">" +
+              table.innerHTML
+                .replace(/>\s*</g, "><")
+                .replace(/\bth\b/gi, "td") +
+              "</table>"
+          );
+        }
+        me.fireEvent("contentchange");
+        me.fireEvent("saveScene");
+        html.html = "";
+        return true;
+      } else {
+        var div = me.document.createElement("div"),
+          tables;
+        div.innerHTML = html.html;
+        tables = div.getElementsByTagName("table");
+        if (domUtils.findParentByTagName(me.selection.getStart(), "table")) {
+          utils.each(tables, function(t) {
+            domUtils.remove(t);
+          });
+          if (
+            domUtils.findParentByTagName(
+              me.selection.getStart(),
+              "caption",
+              true
+            )
+          ) {
+            div.innerHTML = div[browser.ie ? "innerText" : "textContent"];
+          }
+        } else {
+          utils.each(tables, function(table) {
+            removeStyleSize(table, true);
+            domUtils.removeAttributes(table, ["style", "border"]);
+            utils.each(domUtils.getElementsByTagName(table, "td"), function(
+              td
+            ) {
+              if (isEmptyBlock(td)) {
+                domUtils.fillNode(me.document, td);
+              }
+              removeStyleSize(td, true);
+              //                            domUtils.removeAttributes(td, ['style'])
+            });
+          });
+        }
+        html.html = div.innerHTML;
+      }
+    });
+
+    me.addListener("afterpaste", function() {
+      utils.each(domUtils.getElementsByTagName(me.body, "table"), function(
+        table
+      ) {
+        if (table.offsetWidth > me.body.offsetWidth) {
+          var defaultValue = getDefaultValue(me, table);
+          table.style.width =
+            me.body.offsetWidth -
+            (needIEHack
+              ? parseInt(
+                  domUtils.getComputedStyle(me.body, "margin-left"),
+                  10
+                ) * 2
+              : 0) -
+            defaultValue.tableBorder * 2 -
+            (me.options.offsetWidth || 0) +
+            "px";
+        }
+      });
+    });
+    me.addListener("blur", function() {
+      tableCopyList = null;
+    });
+    var timer;
+    me.addListener("keydown", function() {
+      clearTimeout(timer);
+      timer = setTimeout(function() {
+        var rng = me.selection.getRange(),
+          cell = domUtils.findParentByTagName(
+            rng.startContainer,
+            ["th", "td"],
+            true
+          );
+        if (cell) {
+          var table = cell.parentNode.parentNode.parentNode;
+          if (table.offsetWidth > table.getAttribute("width")) {
+            cell.style.wordBreak = "break-all";
+          }
+        }
+      }, 100);
+    });
+    me.addListener("selectionchange", function() {
+      toggleDraggableState(me, false, "", null);
+    });
+
+    //内容变化时触发索引更新
+    //todo 可否考虑标记检测，如果不涉及表格的变化就不进行索引重建和更新
+    me.addListener("contentchange", function() {
+      var me = this;
+      //尽可能排除一些不需要更新的状况
+      hideDragLine(me);
+      if (getUETableBySelected(me)) return;
+      var rng = me.selection.getRange();
+      var start = rng.startContainer;
+      start = domUtils.findParentByTagName(start, ["td", "th"], true);
+      utils.each(domUtils.getElementsByTagName(me.document, "table"), function(
+        table
+      ) {
+        if (me.fireEvent("excludetable", table) === true) return;
+        table.ueTable = new UT(table);
+        //trace:3742
+        //                utils.each(domUtils.getElementsByTagName(me.document, 'td'), function (td) {
+        //
+        //                    if (domUtils.isEmptyBlock(td) && td !== start) {
+        //                        domUtils.fillNode(me.document, td);
+        //                        if (browser.ie && browser.version == 6) {
+        //                            td.innerHTML = '&nbsp;'
+        //                        }
+        //                    }
+        //                });
+        //                utils.each(domUtils.getElementsByTagName(me.document, 'th'), function (th) {
+        //                    if (domUtils.isEmptyBlock(th) && th !== start) {
+        //                        domUtils.fillNode(me.document, th);
+        //                        if (browser.ie && browser.version == 6) {
+        //                            th.innerHTML = '&nbsp;'
+        //                        }
+        //                    }
+        //                });
+        table.onmouseover = function() {
+          me.fireEvent("tablemouseover", table);
+        };
+        table.onmousemove = function() {
+          me.fireEvent("tablemousemove", table);
+          me.options.tableDragable && toggleDragButton(true, this, me);
+          utils.defer(function() {
+            me.fireEvent("contentchange", 50);
+          }, true);
+        };
+        table.onmouseout = function() {
+          me.fireEvent("tablemouseout", table);
+          toggleDraggableState(me, false, "", null);
+          hideDragLine(me);
+        };
+        table.onclick = function(evt) {
+          evt = me.window.event || evt;
+          var target = getParentTdOrTh(evt.target || evt.srcElement);
+          if (!target) return;
+          var ut = getUETable(target),
+            table = ut.table,
+            cellInfo = ut.getCellInfo(target),
+            cellsRange,
+            rng = me.selection.getRange();
+          //                    if ("topLeft" == inPosition(table, mouseCoords(evt))) {
+          //                        cellsRange = ut.getCellsRange(ut.table.rows[0].cells[0], ut.getLastCell());
+          //                        ut.setSelected(cellsRange);
+          //                        return;
+          //                    }
+          //                    if ("bottomRight" == inPosition(table, mouseCoords(evt))) {
+          //
+          //                        return;
+          //                    }
+          if (inTableSide(table, target, evt, true)) {
+            var endTdCol = ut.getCell(
+              ut.indexTable[ut.rowsNum - 1][cellInfo.colIndex].rowIndex,
+              ut.indexTable[ut.rowsNum - 1][cellInfo.colIndex].cellIndex
+            );
+            if (evt.shiftKey && ut.selectedTds.length) {
+              if (ut.selectedTds[0] !== endTdCol) {
+                cellsRange = ut.getCellsRange(ut.selectedTds[0], endTdCol);
+                ut.setSelected(cellsRange);
+              } else {
+                rng && rng.selectNodeContents(endTdCol).select();
+              }
+            } else {
+              if (target !== endTdCol) {
+                cellsRange = ut.getCellsRange(target, endTdCol);
+                ut.setSelected(cellsRange);
+              } else {
+                rng && rng.selectNodeContents(endTdCol).select();
+              }
+            }
+            return;
+          }
+          if (inTableSide(table, target, evt)) {
+            var endTdRow = ut.getCell(
+              ut.indexTable[cellInfo.rowIndex][ut.colsNum - 1].rowIndex,
+              ut.indexTable[cellInfo.rowIndex][ut.colsNum - 1].cellIndex
+            );
+            if (evt.shiftKey && ut.selectedTds.length) {
+              if (ut.selectedTds[0] !== endTdRow) {
+                cellsRange = ut.getCellsRange(ut.selectedTds[0], endTdRow);
+                ut.setSelected(cellsRange);
+              } else {
+                rng && rng.selectNodeContents(endTdRow).select();
+              }
+            } else {
+              if (target !== endTdRow) {
+                cellsRange = ut.getCellsRange(target, endTdRow);
+                ut.setSelected(cellsRange);
+              } else {
+                rng && rng.selectNodeContents(endTdRow).select();
+              }
+            }
+          }
+        };
+      });
+
+      switchBorderColor(me, true);
+    });
+
+    domUtils.on(me.document, "mousemove", mouseMoveEvent);
+
+    domUtils.on(me.document, "mouseout", function(evt) {
+      var target = evt.target || evt.srcElement;
+      if (target.tagName == "TABLE") {
+        toggleDraggableState(me, false, "", null);
+      }
+    });
+    /**
+         * 表格隔行变色
+         */
+    me.addListener("interlacetable", function(type, table, classList) {
+      if (!table) return;
+      var me = this,
+        rows = table.rows,
+        len = rows.length,
+        getClass = function(list, index, repeat) {
+          return list[index]
+            ? list[index]
+            : repeat ? list[index % list.length] : "";
+        };
+      for (var i = 0; i < len; i++) {
+        rows[i].className = getClass(
+          classList || me.options.classList,
+          i,
+          true
+        );
+      }
+    });
+    me.addListener("uninterlacetable", function(type, table) {
+      if (!table) return;
+      var me = this,
+        rows = table.rows,
+        classList = me.options.classList,
+        len = rows.length;
+      for (var i = 0; i < len; i++) {
+        domUtils.removeClasses(rows[i], classList);
+      }
+    });
+
+    me.addListener("mousedown", mouseDownEvent);
+    me.addListener("mouseup", mouseUpEvent);
+    //拖动的时候触发mouseup
+    domUtils.on(me.body, "dragstart", function(evt) {
+      mouseUpEvent.call(me, "dragstart", evt);
+    });
+    me.addOutputRule(function(root) {
+      utils.each(root.getNodesByTagName("div"), function(n) {
+        if (n.getAttr("id") == "ue_tableDragLine") {
+          n.parentNode.removeChild(n);
+        }
+      });
+    });
+
+    var currentRowIndex = 0;
+    me.addListener("mousedown", function() {
+      currentRowIndex = 0;
+    });
+    me.addListener("tabkeydown", function() {
+      var range = this.selection.getRange(),
+        common = range.getCommonAncestor(true, true),
+        table = domUtils.findParentByTagName(common, "table");
+      if (table) {
+        if (domUtils.findParentByTagName(common, "caption", true)) {
+          var cell = domUtils.getElementsByTagName(table, "th td");
+          if (cell && cell.length) {
+            range.setStart(cell[0], 0).setCursor(false, true);
+          }
+        } else {
+          var cell = domUtils.findParentByTagName(common, ["td", "th"], true),
+            ua = getUETable(cell);
+          currentRowIndex = cell.rowSpan > 1
+            ? currentRowIndex
+            : ua.getCellInfo(cell).rowIndex;
+          var nextCell = ua.getTabNextCell(cell, currentRowIndex);
+          if (nextCell) {
+            if (isEmptyBlock(nextCell)) {
+              range.setStart(nextCell, 0).setCursor(false, true);
+            } else {
+              range.selectNodeContents(nextCell).select();
+            }
+          } else {
+            me.fireEvent("saveScene");
+            me.__hasEnterExecCommand = true;
+            this.execCommand("insertrownext");
+            me.__hasEnterExecCommand = false;
+            range = this.selection.getRange();
+            range
+              .setStart(table.rows[table.rows.length - 1].cells[0], 0)
+              .setCursor();
+            me.fireEvent("saveScene");
+          }
+        }
+        return true;
+      }
+    });
+    browser.ie &&
+      me.addListener("selectionchange", function() {
+        toggleDraggableState(this, false, "", null);
+      });
+    me.addListener("keydown", function(type, evt) {
+      var me = this;
+      //处理在表格的最后一个输入tab产生新的表格
+      var keyCode = evt.keyCode || evt.which;
+      if (keyCode == 8 || keyCode == 46) {
+        return;
+      }
+      var notCtrlKey =
+        !evt.ctrlKey && !evt.metaKey && !evt.shiftKey && !evt.altKey;
+      notCtrlKey &&
+        removeSelectedClass(domUtils.getElementsByTagName(me.body, "td"));
+      var ut = getUETableBySelected(me);
+      if (!ut) return;
+      notCtrlKey && ut.clearSelected();
+    });
+
+    me.addListener("beforegetcontent", function() {
+      switchBorderColor(this, false);
+      browser.ie &&
+        utils.each(this.document.getElementsByTagName("caption"), function(ci) {
+          if (domUtils.isEmptyNode(ci)) {
+            ci.innerHTML = "&nbsp;";
+          }
+        });
+    });
+    me.addListener("aftergetcontent", function() {
+      switchBorderColor(this, true);
+    });
+    me.addListener("getAllHtml", function() {
+      removeSelectedClass(me.document.getElementsByTagName("td"));
+    });
+    //修正全屏状态下插入的表格宽度在非全屏状态下撑开编辑器的情况
+    me.addListener("fullscreenchanged", function(type, fullscreen) {
+      if (!fullscreen) {
+        var ratio = this.body.offsetWidth / document.body.offsetWidth,
+          tables = domUtils.getElementsByTagName(this.body, "table");
+        utils.each(tables, function(table) {
+          if (table.offsetWidth < me.body.offsetWidth) return false;
+          var tds = domUtils.getElementsByTagName(table, "td"),
+            backWidths = [];
+          utils.each(tds, function(td) {
+            backWidths.push(td.offsetWidth);
+          });
+          for (var i = 0, td; (td = tds[i]); i++) {
+            td.setAttribute("width", Math.floor(backWidths[i] * ratio));
+          }
+          table.setAttribute(
+            "width",
+            Math.floor(getTableWidth(me, needIEHack, getDefaultValue(me)))
+          );
+        });
+      }
+    });
+
+    //重写execCommand命令，用于处理框选时的处理
+    var oldExecCommand = me.execCommand;
+    me.execCommand = function(cmd, datatat) {
+      var me = this,
+        args = arguments;
+
+      cmd = cmd.toLowerCase();
+      var ut = getUETableBySelected(me),
+        tds,
+        range = new dom.Range(me.document),
+        cmdFun = me.commands[cmd] || UE.commands[cmd],
+        result;
+      if (!cmdFun) return;
+      if (
+        ut &&
+        !commands[cmd] &&
+        !cmdFun.notNeedUndo &&
+        !me.__hasEnterExecCommand
+      ) {
+        me.__hasEnterExecCommand = true;
+        me.fireEvent("beforeexeccommand", cmd);
+        tds = ut.selectedTds;
+        var lastState = -2,
+          lastValue = -2,
+          value,
+          state;
+        for (var i = 0, td; (td = tds[i]); i++) {
+          if (isEmptyBlock(td)) {
+            range.setStart(td, 0).setCursor(false, true);
+          } else {
+            range.selectNode(td).select(true);
+          }
+          state = me.queryCommandState(cmd);
+          value = me.queryCommandValue(cmd);
+          if (state != -1) {
+            if (lastState !== state || lastValue !== value) {
+              me._ignoreContentChange = true;
+              result = oldExecCommand.apply(me, arguments);
+              me._ignoreContentChange = false;
+            }
+            lastState = me.queryCommandState(cmd);
+            lastValue = me.queryCommandValue(cmd);
+            if (domUtils.isEmptyBlock(td)) {
+              domUtils.fillNode(me.document, td);
+            }
+          }
+        }
+        range.setStart(tds[0], 0).shrinkBoundary(true).setCursor(false, true);
+        me.fireEvent("contentchange");
+        me.fireEvent("afterexeccommand", cmd);
+        me.__hasEnterExecCommand = false;
+        me._selectionChange();
+      } else {
+        result = oldExecCommand.apply(me, arguments);
+      }
+      return result;
+    };
+  });
+  /**
+     * 删除obj的宽高style，改成属性宽高
+     * @param obj
+     * @param replaceToProperty
+     */
+  function removeStyleSize(obj, replaceToProperty) {
+    removeStyle(obj, "width", true);
+    removeStyle(obj, "height", true);
+  }
+
+  function removeStyle(obj, styleName, replaceToProperty) {
+    if (obj.style[styleName]) {
+      replaceToProperty &&
+        obj.setAttribute(styleName, parseInt(obj.style[styleName], 10));
+      obj.style[styleName] = "";
+    }
+  }
+
+  function getParentTdOrTh(ele) {
+    if (ele.tagName == "TD" || ele.tagName == "TH") return ele;
+    var td;
+    if (
+      (td =
+        domUtils.findParentByTagName(ele, "td", true) ||
+        domUtils.findParentByTagName(ele, "th", true))
+    )
+      return td;
+    return null;
+  }
+
+  function isEmptyBlock(node) {
+    var reg = new RegExp(domUtils.fillChar, "g");
+    if (
+      node[browser.ie ? "innerText" : "textContent"]
+        .replace(/^\s*$/, "")
+        .replace(reg, "").length > 0
+    ) {
+      return 0;
+    }
+    for (var n in dtd.$isNotEmpty) {
+      if (node.getElementsByTagName(n).length) {
+        return 0;
+      }
+    }
+    return 1;
+  }
+
+  function mouseCoords(evt) {
+    if (evt.pageX || evt.pageY) {
+      return { x: evt.pageX, y: evt.pageY };
+    }
+    return {
+      x:
+        evt.clientX + me.document.body.scrollLeft - me.document.body.clientLeft,
+      y: evt.clientY + me.document.body.scrollTop - me.document.body.clientTop
+    };
+  }
+
+  function mouseMoveEvent(evt) {
+    if (isEditorDisabled()) {
+      return;
+    }
+
+    try {
+      //普通状态下鼠标移动
+      var target = getParentTdOrTh(evt.target || evt.srcElement),
+        pos;
+
+      //区分用户的行为是拖动还是双击
+      if (isInResizeBuffer) {
+        me.body.style.webkitUserSelect = "none";
+
+        if (
+          Math.abs(userActionStatus.x - evt.clientX) > offsetOfTableCell ||
+          Math.abs(userActionStatus.y - evt.clientY) > offsetOfTableCell
+        ) {
+          clearTableDragTimer();
+          isInResizeBuffer = false;
+          singleClickState = 0;
+          //drag action
+          tableBorderDrag(evt);
+        }
+      }
+
+      //修改单元格大小时的鼠标移动
+      if (onDrag && dragTd) {
+        singleClickState = 0;
+        me.body.style.webkitUserSelect = "none";
+        me.selection.getNative()[
+          browser.ie9below ? "empty" : "removeAllRanges"
+        ]();
+        pos = mouseCoords(evt);
+        toggleDraggableState(me, true, onDrag, pos, target);
+        if (onDrag == "h") {
+          dragLine.style.left = getPermissionX(dragTd, evt) + "px";
+        } else if (onDrag == "v") {
+          dragLine.style.top = getPermissionY(dragTd, evt) + "px";
+        }
+        return;
+      }
+      //当鼠标处于table上时，修改移动过程中的光标状态
+      if (target) {
+        //针对使用table作为容器的组件不触发拖拽效果
+        if (me.fireEvent("excludetable", target) === true) return;
+        pos = mouseCoords(evt);
+        var state = getRelation(target, pos),
+          table = domUtils.findParentByTagName(target, "table", true);
+
+        if (inTableSide(table, target, evt, true)) {
+          if (me.fireEvent("excludetable", table) === true) return;
+          me.body.style.cursor =
+            "url(" + me.options.cursorpath + "h.png),pointer";
+        } else if (inTableSide(table, target, evt)) {
+          if (me.fireEvent("excludetable", table) === true) return;
+          me.body.style.cursor =
+            "url(" + me.options.cursorpath + "v.png),pointer";
+        } else {
+          me.body.style.cursor = "text";
+          var curCell = target;
+          if (/\d/.test(state)) {
+            state = state.replace(/\d/, "");
+            target = getUETable(target).getPreviewCell(target, state == "v");
+          }
+          //位于第一行的顶部或者第一列的左边时不可拖动
+          toggleDraggableState(
+            me,
+            target ? !!state : false,
+            target ? state : "",
+            pos,
+            target
+          );
+        }
+      } else {
+        toggleDragButton(false, table, me);
+      }
+    } catch (e) {
+      showError(e);
+    }
+  }
+
+  var dragButtonTimer;
+
+  function toggleDragButton(show, table, editor) {
+    if (!show) {
+      if (dragOver) return;
+      dragButtonTimer = setTimeout(function() {
+        !dragOver &&
+          dragButton &&
+          dragButton.parentNode &&
+          dragButton.parentNode.removeChild(dragButton);
+      }, 2000);
+    } else {
+      createDragButton(table, editor);
+    }
+  }
+
+  function createDragButton(table, editor) {
+    var pos = domUtils.getXY(table),
+      doc = table.ownerDocument;
+    if (dragButton && dragButton.parentNode) return dragButton;
+    dragButton = doc.createElement("div");
+    dragButton.contentEditable = false;
+    dragButton.innerHTML = "";
+    dragButton.style.cssText =
+      "width:15px;height:15px;background-image:url(" +
+      editor.options.UEDITOR_HOME_URL +
+      "dialogs/table/dragicon.png);position: absolute;cursor:move;top:" +
+      (pos.y - 15) +
+      "px;left:" +
+      pos.x +
+      "px;";
+    domUtils.unSelectable(dragButton);
+    dragButton.onmouseover = function(evt) {
+      dragOver = true;
+    };
+    dragButton.onmouseout = function(evt) {
+      dragOver = false;
+    };
+    domUtils.on(dragButton, "click", function(type, evt) {
+      doClick(evt, this);
+    });
+    domUtils.on(dragButton, "dblclick", function(type, evt) {
+      doDblClick(evt);
+    });
+    domUtils.on(dragButton, "dragstart", function(type, evt) {
+      domUtils.preventDefault(evt);
+    });
+    var timer;
+
+    function doClick(evt, button) {
+      // 部分浏览器下需要清理
+      clearTimeout(timer);
+      timer = setTimeout(function() {
+        editor.fireEvent("tableClicked", table, button);
+      }, 300);
+    }
+
+    function doDblClick(evt) {
+      clearTimeout(timer);
+      var ut = getUETable(table),
+        start = table.rows[0].cells[0],
+        end = ut.getLastCell(),
+        range = ut.getCellsRange(start, end);
+      editor.selection.getRange().setStart(start, 0).setCursor(false, true);
+      ut.setSelected(range);
+    }
+
+    doc.body.appendChild(dragButton);
+  }
+
+  //    function inPosition(table, pos) {
+  //        var tablePos = domUtils.getXY(table),
+  //            width = table.offsetWidth,
+  //            height = table.offsetHeight;
+  //        if (pos.x - tablePos.x < 5 && pos.y - tablePos.y < 5) {
+  //            return "topLeft";
+  //        } else if (tablePos.x + width - pos.x < 5 && tablePos.y + height - pos.y < 5) {
+  //            return "bottomRight";
+  //        }
+  //    }
+
+  function inTableSide(table, cell, evt, top) {
+    var pos = mouseCoords(evt),
+      state = getRelation(cell, pos);
+
+    if (top) {
+      var caption = table.getElementsByTagName("caption")[0],
+        capHeight = caption ? caption.offsetHeight : 0;
+      return state == "v1" && pos.y - domUtils.getXY(table).y - capHeight < 8;
+    } else {
+      return state == "h1" && pos.x - domUtils.getXY(table).x < 8;
+    }
+  }
+
+  /**
+     * 获取拖动时允许的X轴坐标
+     * @param dragTd
+     * @param evt
+     */
+  function getPermissionX(dragTd, evt) {
+    var ut = getUETable(dragTd);
+    if (ut) {
+      var preTd = ut.getSameEndPosCells(dragTd, "x")[0],
+        nextTd = ut.getSameStartPosXCells(dragTd)[0],
+        mouseX = mouseCoords(evt).x,
+        left =
+          (preTd ? domUtils.getXY(preTd).x : domUtils.getXY(ut.table).x) + 20,
+        right = nextTd
+          ? domUtils.getXY(nextTd).x + nextTd.offsetWidth - 20
+          : me.body.offsetWidth + 5 ||
+              parseInt(domUtils.getComputedStyle(me.body, "width"), 10);
+
+      left += cellMinWidth;
+      right -= cellMinWidth;
+
+      return mouseX < left ? left : mouseX > right ? right : mouseX;
+    }
+  }
+
+  /**
+     * 获取拖动时允许的Y轴坐标
+     */
+  function getPermissionY(dragTd, evt) {
+    try {
+      var top = domUtils.getXY(dragTd).y,
+        mousePosY = mouseCoords(evt).y;
+      return mousePosY < top ? top : mousePosY;
+    } catch (e) {
+      showError(e);
+    }
+  }
+
+  /**
+     * 移动状态切换
+     */
+  function toggleDraggableState(editor, draggable, dir, mousePos, cell) {
+    try {
+      editor.body.style.cursor = dir == "h"
+        ? "col-resize"
+        : dir == "v" ? "row-resize" : "text";
+      if (browser.ie) {
+        if (dir && !mousedown && !getUETableBySelected(editor)) {
+          getDragLine(editor, editor.document);
+          showDragLineAt(dir, cell);
+        } else {
+          hideDragLine(editor);
+        }
+      }
+      onBorder = draggable;
+    } catch (e) {
+      showError(e);
+    }
+  }
+
+  /**
+     * 获取与UETable相关的resize line
+     * @param uetable UETable对象
+     */
+  function getResizeLineByUETable() {
+    var lineId = "_UETableResizeLine",
+      line = this.document.getElementById(lineId);
+
+    if (!line) {
+      line = this.document.createElement("div");
+      line.id = lineId;
+      line.contnetEditable = false;
+      line.setAttribute("unselectable", "on");
+
+      var styles = {
+        width: 2 * cellBorderWidth + 1 + "px",
+        position: "absolute",
+        "z-index": 100000,
+        cursor: "col-resize",
+        background: "red",
+        display: "none"
+      };
+
+      //切换状态
+      line.onmouseout = function() {
+        this.style.display = "none";
+      };
+
+      utils.extend(line.style, styles);
+
+      this.document.body.appendChild(line);
+    }
+
+    return line;
+  }
+
+  /**
+     * 更新resize-line
+     */
+  function updateResizeLine(cell, uetable) {
+    var line = getResizeLineByUETable.call(this),
+      table = uetable.table,
+      styles = {
+        top: domUtils.getXY(table).y + "px",
+        left:
+          domUtils.getXY(cell).x + cell.offsetWidth - cellBorderWidth + "px",
+        display: "block",
+        height: table.offsetHeight + "px"
+      };
+
+    utils.extend(line.style, styles);
+  }
+
+  /**
+     * 显示resize-line
+     */
+  function showResizeLine(cell) {
+    var uetable = getUETable(cell);
+
+    updateResizeLine.call(this, cell, uetable);
+  }
+
+  /**
+     * 获取鼠标与当前单元格的相对位置
+     * @param ele
+     * @param mousePos
+     */
+  function getRelation(ele, mousePos) {
+    var elePos = domUtils.getXY(ele);
+
+    if (!elePos) {
+      return "";
+    }
+
+    if (elePos.x + ele.offsetWidth - mousePos.x < cellBorderWidth) {
+      return "h";
+    }
+    if (mousePos.x - elePos.x < cellBorderWidth) {
+      return "h1";
+    }
+    if (elePos.y + ele.offsetHeight - mousePos.y < cellBorderWidth) {
+      return "v";
+    }
+    if (mousePos.y - elePos.y < cellBorderWidth) {
+      return "v1";
+    }
+    return "";
+  }
+
+  function mouseDownEvent(type, evt) {
+    if (isEditorDisabled()) {
+      return;
+    }
+
+    userActionStatus = {
+      x: evt.clientX,
+      y: evt.clientY
+    };
+
+    //右键菜单单独处理
+    if (evt.button == 2) {
+      var ut = getUETableBySelected(me),
+        flag = false;
+
+      if (ut) {
+        var td = getTargetTd(me, evt);
+        utils.each(ut.selectedTds, function(ti) {
+          if (ti === td) {
+            flag = true;
+          }
+        });
+        if (!flag) {
+          removeSelectedClass(domUtils.getElementsByTagName(me.body, "th td"));
+          ut.clearSelected();
+        } else {
+          td = ut.selectedTds[0];
+          setTimeout(function() {
+            me.selection.getRange().setStart(td, 0).setCursor(false, true);
+          }, 0);
+        }
+      }
+    } else {
+      tableClickHander(evt);
+    }
+  }
+
+  //清除表格的计时器
+  function clearTableTimer() {
+    tabTimer && clearTimeout(tabTimer);
+    tabTimer = null;
+  }
+
+  //双击收缩
+  function tableDbclickHandler(evt) {
+    singleClickState = 0;
+    evt = evt || me.window.event;
+    var target = getParentTdOrTh(evt.target || evt.srcElement);
+    if (target) {
+      var h;
+      if ((h = getRelation(target, mouseCoords(evt)))) {
+        hideDragLine(me);
+
+        if (h == "h1") {
+          h = "h";
+          if (
+            inTableSide(
+              domUtils.findParentByTagName(target, "table"),
+              target,
+              evt
+            )
+          ) {
+            me.execCommand("adaptbywindow");
+          } else {
+            target = getUETable(target).getPreviewCell(target);
+            if (target) {
+              var rng = me.selection.getRange();
+              rng.selectNodeContents(target).setCursor(true, true);
+            }
+          }
+        }
+        if (h == "h") {
+          var ut = getUETable(target),
+            table = ut.table,
+            cells = getCellsByMoveBorder(target, table, true);
+
+          cells = extractArray(cells, "left");
+
+          ut.width = ut.offsetWidth;
+
+          var oldWidth = [],
+            newWidth = [];
+
+          utils.each(cells, function(cell) {
+            oldWidth.push(cell.offsetWidth);
+          });
+
+          utils.each(cells, function(cell) {
+            cell.removeAttribute("width");
+          });
+
+          window.setTimeout(function() {
+            //是否允许改变
+            var changeable = true;
+
+            utils.each(cells, function(cell, index) {
+              var width = cell.offsetWidth;
+
+              if (width > oldWidth[index]) {
+                changeable = false;
+                return false;
+              }
+
+              newWidth.push(width);
+            });
+
+            var change = changeable ? newWidth : oldWidth;
+
+            utils.each(cells, function(cell, index) {
+              cell.width = change[index] - getTabcellSpace();
+            });
+          }, 0);
+
+          //                    minWidth -= cellMinWidth;
+          //
+          //                    table.removeAttribute("width");
+          //                    utils.each(cells, function (cell) {
+          //                        cell.style.width = "";
+          //                        cell.width -= minWidth;
+          //                    });
+        }
+      }
+    }
+  }
+
+  function tableClickHander(evt) {
+    removeSelectedClass(domUtils.getElementsByTagName(me.body, "td th"));
+    //trace:3113
+    //选中单元格，点击table外部，不会清掉table上挂的ueTable,会引起getUETableBySelected方法返回值
+    utils.each(me.document.getElementsByTagName("table"), function(t) {
+      t.ueTable = null;
+    });
+    startTd = getTargetTd(me, evt);
+    if (!startTd) return;
+    var table = domUtils.findParentByTagName(startTd, "table", true);
+    ut = getUETable(table);
+    ut && ut.clearSelected();
+
+    //判断当前鼠标状态
+    if (!onBorder) {
+      me.document.body.style.webkitUserSelect = "";
+      mousedown = true;
+      me.addListener("mouseover", mouseOverEvent);
+    } else {
+      //边框上的动作处理
+      borderActionHandler(evt);
+    }
+  }
+
+  //处理表格边框上的动作, 这里做延时处理，避免两种动作互相影响
+  function borderActionHandler(evt) {
+    if (browser.ie) {
+      evt = reconstruct(evt);
+    }
+
+    clearTableDragTimer();
+
+    //是否正在等待resize的缓冲中
+    isInResizeBuffer = true;
+
+    tableDragTimer = setTimeout(function() {
+      tableBorderDrag(evt);
+    }, dblclickTime);
+  }
+
+  function extractArray(originArr, key) {
+    var result = [],
+      tmp = null;
+
+    for (var i = 0, len = originArr.length; i < len; i++) {
+      tmp = originArr[i][key];
+
+      if (tmp) {
+        result.push(tmp);
+      }
+    }
+
+    return result;
+  }
+
+  function clearTableDragTimer() {
+    tableDragTimer && clearTimeout(tableDragTimer);
+    tableDragTimer = null;
+  }
+
+  function reconstruct(obj) {
+    var attrs = [
+      "pageX",
+      "pageY",
+      "clientX",
+      "clientY",
+      "srcElement",
+      "target"
+    ],
+      newObj = {};
+
+    if (obj) {
+      for (var i = 0, key, val; (key = attrs[i]); i++) {
+        val = obj[key];
+        val && (newObj[key] = val);
+      }
+    }
+
+    return newObj;
+  }
+
+  //边框拖动
+  function tableBorderDrag(evt) {
+    isInResizeBuffer = false;
+
+    startTd = evt.target || evt.srcElement;
+    if (!startTd) return;
+    var state = getRelation(startTd, mouseCoords(evt));
+    if (/\d/.test(state)) {
+      state = state.replace(/\d/, "");
+      startTd = getUETable(startTd).getPreviewCell(startTd, state == "v");
+    }
+    hideDragLine(me);
+    getDragLine(me, me.document);
+    me.fireEvent("saveScene");
+    showDragLineAt(state, startTd);
+    mousedown = true;
+    //拖动开始
+    onDrag = state;
+    dragTd = startTd;
+  }
+
+  function mouseUpEvent(type, evt) {
+    if (isEditorDisabled()) {
+      return;
+    }
+
+    clearTableDragTimer();
+
+    isInResizeBuffer = false;
+
+    if (onBorder) {
+      singleClickState = ++singleClickState % 3;
+
+      userActionStatus = {
+        x: evt.clientX,
+        y: evt.clientY
+      };
+
+      tableResizeTimer = setTimeout(function() {
+        singleClickState > 0 && singleClickState--;
+      }, dblclickTime);
+
+      if (singleClickState === 2) {
+        singleClickState = 0;
+        tableDbclickHandler(evt);
+        return;
+      }
+    }
+
+    if (evt.button == 2) return;
+    var me = this;
+    //清除表格上原生跨选问题
+    var range = me.selection.getRange(),
+      start = domUtils.findParentByTagName(range.startContainer, "table", true),
+      end = domUtils.findParentByTagName(range.endContainer, "table", true);
+
+    if (start || end) {
+      if (start === end) {
+        start = domUtils.findParentByTagName(
+          range.startContainer,
+          ["td", "th", "caption"],
+          true
+        );
+        end = domUtils.findParentByTagName(
+          range.endContainer,
+          ["td", "th", "caption"],
+          true
+        );
+        if (start !== end) {
+          me.selection.clearRange();
+        }
+      } else {
+        me.selection.clearRange();
+      }
+    }
+    mousedown = false;
+    me.document.body.style.webkitUserSelect = "";
+    //拖拽状态下的mouseUP
+    if (onDrag && dragTd) {
+      me.selection.getNative()[
+        browser.ie9below ? "empty" : "removeAllRanges"
+      ]();
+
+      singleClickState = 0;
+      dragLine = me.document.getElementById("ue_tableDragLine");
+
+      // trace 3973
+      if (dragLine) {
+        var dragTdPos = domUtils.getXY(dragTd),
+          dragLinePos = domUtils.getXY(dragLine);
+
+        switch (onDrag) {
+          case "h":
+            changeColWidth(dragTd, dragLinePos.x - dragTdPos.x);
+            break;
+          case "v":
+            changeRowHeight(
+              dragTd,
+              dragLinePos.y - dragTdPos.y - dragTd.offsetHeight
+            );
+            break;
+          default:
+        }
+        onDrag = "";
+        dragTd = null;
+
+        hideDragLine(me);
+        me.fireEvent("saveScene");
+        return;
+      }
+    }
+    //正常状态下的mouseup
+    if (!startTd) {
+      var target = domUtils.findParentByTagName(
+        evt.target || evt.srcElement,
+        "td",
+        true
+      );
+      if (!target)
+        target = domUtils.findParentByTagName(
+          evt.target || evt.srcElement,
+          "th",
+          true
+        );
+      if (target && (target.tagName == "TD" || target.tagName == "TH")) {
+        if (me.fireEvent("excludetable", target) === true) return;
+        range = new dom.Range(me.document);
+        range.setStart(target, 0).setCursor(false, true);
+      }
+    } else {
+      var ut = getUETable(startTd),
+        cell = ut ? ut.selectedTds[0] : null;
+      if (cell) {
+        range = new dom.Range(me.document);
+        if (domUtils.isEmptyBlock(cell)) {
+          range.setStart(cell, 0).setCursor(false, true);
+        } else {
+          range
+            .selectNodeContents(cell)
+            .shrinkBoundary()
+            .setCursor(false, true);
+        }
+      } else {
+        range = me.selection.getRange().shrinkBoundary();
+        if (!range.collapsed) {
+          var start = domUtils.findParentByTagName(
+            range.startContainer,
+            ["td", "th"],
+            true
+          ),
+            end = domUtils.findParentByTagName(
+              range.endContainer,
+              ["td", "th"],
+              true
+            );
+          //在table里边的不能清除
+          if (
+            (start && !end) ||
+            (!start && end) ||
+            (start && end && start !== end)
+          ) {
+            range.setCursor(false, true);
+          }
+        }
+      }
+      startTd = null;
+      me.removeListener("mouseover", mouseOverEvent);
+    }
+    me._selectionChange(250, evt);
+  }
+
+  function mouseOverEvent(type, evt) {
+    if (isEditorDisabled()) {
+      return;
+    }
+
+    var me = this,
+      tar = evt.target || evt.srcElement;
+    currentTd =
+      domUtils.findParentByTagName(tar, "td", true) ||
+      domUtils.findParentByTagName(tar, "th", true);
+    //需要判断两个TD是否位于同一个表格内
+    if (
+      startTd &&
+      currentTd &&
+      ((startTd.tagName == "TD" && currentTd.tagName == "TD") ||
+        (startTd.tagName == "TH" && currentTd.tagName == "TH")) &&
+      domUtils.findParentByTagName(startTd, "table") ==
+        domUtils.findParentByTagName(currentTd, "table")
+    ) {
+      var ut = getUETable(currentTd);
+      if (startTd != currentTd) {
+        me.document.body.style.webkitUserSelect = "none";
+        me.selection.getNative()[
+          browser.ie9below ? "empty" : "removeAllRanges"
+        ]();
+        var range = ut.getCellsRange(startTd, currentTd);
+        ut.setSelected(range);
+      } else {
+        me.document.body.style.webkitUserSelect = "";
+        ut.clearSelected();
+      }
+    }
+    evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
+  }
+
+  function setCellHeight(cell, height, backHeight) {
+    var lineHight = parseInt(
+      domUtils.getComputedStyle(cell, "line-height"),
+      10
+    ),
+      tmpHeight = backHeight + height;
+    height = tmpHeight < lineHight ? lineHight : tmpHeight;
+    if (cell.style.height) cell.style.height = "";
+    cell.rowSpan == 1
+      ? cell.setAttribute("height", height)
+      : cell.removeAttribute && cell.removeAttribute("height");
+  }
+
+  function getWidth(cell) {
+    if (!cell) return 0;
+    return parseInt(domUtils.getComputedStyle(cell, "width"), 10);
+  }
+
+  function changeColWidth(cell, changeValue) {
+    var ut = getUETable(cell);
+    if (ut) {
+      //根据当前移动的边框获取相关的单元格
+      var table = ut.table,
+        cells = getCellsByMoveBorder(cell, table);
+
+      table.style.width = "";
+      table.removeAttribute("width");
+
+      //修正改变量
+      changeValue = correctChangeValue(changeValue, cell, cells);
+
+      if (cell.nextSibling) {
+        var i = 0;
+
+        utils.each(cells, function(cellGroup) {
+          cellGroup.left.width = +cellGroup.left.width + changeValue;
+          cellGroup.right &&
+            (cellGroup.right.width = +cellGroup.right.width - changeValue);
+        });
+      } else {
+        utils.each(cells, function(cellGroup) {
+          cellGroup.left.width -= -changeValue;
+        });
+      }
+    }
+  }
+
+  function isEditorDisabled() {
+    return me.body.contentEditable === "false";
+  }
+
+  function changeRowHeight(td, changeValue) {
+    if (Math.abs(changeValue) < 10) return;
+    var ut = getUETable(td);
+    if (ut) {
+      var cells = ut.getSameEndPosCells(td, "y"),
+        //备份需要连带变化的td的原始高度，否则后期无法获取正确的值
+        backHeight = cells[0] ? cells[0].offsetHeight : 0;
+      for (var i = 0, cell; (cell = cells[i++]); ) {
+        setCellHeight(cell, changeValue, backHeight);
+      }
+    }
+  }
+
+  /**
+     * 获取调整单元格大小的相关单元格
+     * @isContainMergeCell 返回的结果中是否包含发生合并后的单元格
+     */
+  function getCellsByMoveBorder(cell, table, isContainMergeCell) {
+    if (!table) {
+      table = domUtils.findParentByTagName(cell, "table");
+    }
+
+    if (!table) {
+      return null;
+    }
+
+    //获取到该单元格所在行的序列号
+    var index = domUtils.getNodeIndex(cell),
+      temp = cell,
+      rows = table.rows,
+      colIndex = 0;
+
+    while (temp) {
+      //获取到当前单元格在未发生单元格合并时的序列
+      if (temp.nodeType === 1) {
+        colIndex += temp.colSpan || 1;
+      }
+      temp = temp.previousSibling;
+    }
+
+    temp = null;
+
+    //记录想关的单元格
+    var borderCells = [];
+
+    utils.each(rows, function(tabRow) {
+      var cells = tabRow.cells,
+        currIndex = 0;
+
+      utils.each(cells, function(tabCell) {
+        currIndex += tabCell.colSpan || 1;
+
+        if (currIndex === colIndex) {
+          borderCells.push({
+            left: tabCell,
+            right: tabCell.nextSibling || null
+          });
+
+          return false;
+        } else if (currIndex > colIndex) {
+          if (isContainMergeCell) {
+            borderCells.push({
+              left: tabCell
+            });
+          }
+
+          return false;
+        }
+      });
+    });
+
+    return borderCells;
+  }
+
+  /**
+     * 通过给定的单元格集合获取最小的单元格width
+     */
+  function getMinWidthByTableCells(cells) {
+    var minWidth = Number.MAX_VALUE;
+
+    for (var i = 0, curCell; (curCell = cells[i]); i++) {
+      minWidth = Math.min(
+        minWidth,
+        curCell.width || getTableCellWidth(curCell)
+      );
+    }
+
+    return minWidth;
+  }
+
+  function correctChangeValue(changeValue, relatedCell, cells) {
+    //为单元格的paading预留空间
+    changeValue -= getTabcellSpace();
+
+    if (changeValue < 0) {
+      return 0;
+    }
+
+    changeValue -= getTableCellWidth(relatedCell);
+
+    //确定方向
+    var direction = changeValue < 0 ? "left" : "right";
+
+    changeValue = Math.abs(changeValue);
+
+    //只关心非最后一个单元格就可以
+    utils.each(cells, function(cellGroup) {
+      var curCell = cellGroup[direction];
+
+      //为单元格保留最小空间
+      if (curCell) {
+        changeValue = Math.min(
+          changeValue,
+          getTableCellWidth(curCell) - cellMinWidth
+        );
+      }
+    });
+
+    //修正越界
+    changeValue = changeValue < 0 ? 0 : changeValue;
+
+    return direction === "left" ? -changeValue : changeValue;
+  }
+
+  function getTableCellWidth(cell) {
+    var width = 0,
+      //偏移纠正量
+      offset = 0,
+      width = cell.offsetWidth - getTabcellSpace();
+
+    //最后一个节点纠正一下
+    if (!cell.nextSibling) {
+      width -= getTableCellOffset(cell);
+    }
+
+    width = width < 0 ? 0 : width;
+
+    try {
+      cell.width = width;
+    } catch (e) {}
+
+    return width;
+  }
+
+  /**
+     * 获取单元格所在表格的最末单元格的偏移量
+     */
+  function getTableCellOffset(cell) {
+    tab = domUtils.findParentByTagName(cell, "table", false);
+
+    if (tab.offsetVal === undefined) {
+      var prev = cell.previousSibling;
+
+      if (prev) {
+        //最后一个单元格和前一个单元格的width diff结果 如果恰好为一个border width， 则条件成立
+        tab.offsetVal = cell.offsetWidth - prev.offsetWidth === UT.borderWidth
+          ? UT.borderWidth
+          : 0;
+      } else {
+        tab.offsetVal = 0;
+      }
+    }
+
+    return tab.offsetVal;
+  }
+
+  function getTabcellSpace() {
+    if (UT.tabcellSpace === undefined) {
+      var cell = null,
+        tab = me.document.createElement("table"),
+        tbody = me.document.createElement("tbody"),
+        trow = me.document.createElement("tr"),
+        tabcell = me.document.createElement("td"),
+        mirror = null;
+
+      tabcell.style.cssText = "border: 0;";
+      tabcell.width = 1;
+
+      trow.appendChild(tabcell);
+      trow.appendChild((mirror = tabcell.cloneNode(false)));
+
+      tbody.appendChild(trow);
+
+      tab.appendChild(tbody);
+
+      tab.style.cssText = "visibility: hidden;";
+
+      me.body.appendChild(tab);
+
+      UT.paddingSpace = tabcell.offsetWidth - 1;
+
+      var tmpTabWidth = tab.offsetWidth;
+
+      tabcell.style.cssText = "";
+      mirror.style.cssText = "";
+
+      UT.borderWidth = (tab.offsetWidth - tmpTabWidth) / 3;
+
+      UT.tabcellSpace = UT.paddingSpace + UT.borderWidth;
+
+      me.body.removeChild(tab);
+    }
+
+    getTabcellSpace = function() {
+      return UT.tabcellSpace;
+    };
+
+    return UT.tabcellSpace;
+  }
+
+  function getDragLine(editor, doc) {
+    if (mousedown) return;
+    dragLine = editor.document.createElement("div");
+    domUtils.setAttributes(dragLine, {
+      id: "ue_tableDragLine",
+      unselectable: "on",
+      contenteditable: false,
+      onresizestart: "return false",
+      ondragstart: "return false",
+      onselectstart: "return false",
+      style:
+        "background-color:blue;position:absolute;padding:0;margin:0;background-image:none;border:0px none;opacity:0;filter:alpha(opacity=0)"
+    });
+    editor.body.appendChild(dragLine);
+  }
+
+  function hideDragLine(editor) {
+    if (mousedown) return;
+    var line;
+    while ((line = editor.document.getElementById("ue_tableDragLine"))) {
+      domUtils.remove(line);
+    }
+  }
+
+  /**
+     * 依据state（v|h）在cell位置显示横线
+     * @param state
+     * @param cell
+     */
+  function showDragLineAt(state, cell) {
+    if (!cell) return;
+    var table = domUtils.findParentByTagName(cell, "table"),
+      caption = table.getElementsByTagName("caption"),
+      width = table.offsetWidth,
+      height =
+        table.offsetHeight - (caption.length > 0 ? caption[0].offsetHeight : 0),
+      tablePos = domUtils.getXY(table),
+      cellPos = domUtils.getXY(cell),
+      css;
+    switch (state) {
+      case "h":
+        css =
+          "height:" +
+          height +
+          "px;top:" +
+          (tablePos.y + (caption.length > 0 ? caption[0].offsetHeight : 0)) +
+          "px;left:" +
+          (cellPos.x + cell.offsetWidth);
+        dragLine.style.cssText =
+          css +
+          "px;position: absolute;display:block;background-color:blue;width:1px;border:0; color:blue;opacity:.3;filter:alpha(opacity=30)";
+        break;
+      case "v":
+        css =
+          "width:" +
+          width +
+          "px;left:" +
+          tablePos.x +
+          "px;top:" +
+          (cellPos.y + cell.offsetHeight);
+        //必须加上border:0和color:blue，否则低版ie不支持背景色显示
+        dragLine.style.cssText =
+          css +
+          "px;overflow:hidden;position: absolute;display:block;background-color:blue;height:1px;border:0;color:blue;opacity:.2;filter:alpha(opacity=20)";
+        break;
+      default:
+    }
+  }
+
+  /**
+     * 当表格边框颜色为白色时设置为虚线,true为添加虚线
+     * @param editor
+     * @param flag
+     */
+  function switchBorderColor(editor, flag) {
+    var tableArr = domUtils.getElementsByTagName(editor.body, "table"),
+      color;
+    for (var i = 0, node; (node = tableArr[i++]); ) {
+      var td = domUtils.getElementsByTagName(node, "td");
+      if (td[0]) {
+        if (flag) {
+          color = td[0].style.borderColor.replace(/\s/g, "");
+          if (/(#ffffff)|(rgb\(255,255,255\))/gi.test(color))
+            domUtils.addClass(node, "noBorderTable");
+        } else {
+          domUtils.removeClasses(node, "noBorderTable");
+        }
+      }
+    }
+  }
+
+  function getTableWidth(editor, needIEHack, defaultValue) {
+    var body = editor.body;
+    return (
+      body.offsetWidth -
+      (needIEHack
+        ? parseInt(domUtils.getComputedStyle(body, "margin-left"), 10) * 2
+        : 0) -
+      defaultValue.tableBorder * 2 -
+      (editor.options.offsetWidth || 0)
+    );
+  }
+
+  /**
+     * 获取当前拖动的单元格
+     */
+  function getTargetTd(editor, evt) {
+    var target = domUtils.findParentByTagName(
+      evt.target || evt.srcElement,
+      ["td", "th"],
+      true
+    ),
+      dir = null;
+
+    if (!target) {
+      return null;
+    }
+
+    dir = getRelation(target, mouseCoords(evt));
+
+    //如果有前一个节点， 需要做一个修正， 否则可能会得到一个错误的td
+
+    if (!target) {
+      return null;
+    }
+
+    if (dir === "h1" && target.previousSibling) {
+      var position = domUtils.getXY(target),
+        cellWidth = target.offsetWidth;
+
+      if (Math.abs(position.x + cellWidth - evt.clientX) > cellWidth / 3) {
+        target = target.previousSibling;
+      }
+    } else if (dir === "v1" && target.parentNode.previousSibling) {
+      var position = domUtils.getXY(target),
+        cellHeight = target.offsetHeight;
+
+      if (Math.abs(position.y + cellHeight - evt.clientY) > cellHeight / 3) {
+        target = target.parentNode.previousSibling.firstChild;
+      }
+    }
+
+    //排除了非td内部以及用于代码高亮部分的td
+    return target && !(editor.fireEvent("excludetable", target) === true)
+      ? target
+      : null;
+  }
+};
+
+
+// plugins/table.sort.js
+/**
+ * Created with JetBrains PhpStorm.
+ * User: Jinqn
+ * Date: 13-10-12
+ * Time: 上午10:20
+ * To change this template use File | Settings | File Templates.
+ */
+
+UE.UETable.prototype.sortTable = function(sortByCellIndex, compareFn) {
+  var table = this.table,
+    rows = table.rows,
+    trArray = [],
+    flag = rows[0].cells[0].tagName === "TH",
+    lastRowIndex = 0;
+  if (this.selectedTds.length) {
+    var range = this.cellsRange,
+      len = range.endRowIndex + 1;
+    for (var i = range.beginRowIndex; i < len; i++) {
+      trArray[i] = rows[i];
+    }
+    trArray.splice(0, range.beginRowIndex);
+    lastRowIndex = range.endRowIndex + 1 === this.rowsNum
+      ? 0
+      : range.endRowIndex + 1;
+  } else {
+    for (var i = 0, len = rows.length; i < len; i++) {
+      trArray[i] = rows[i];
+    }
+  }
+
+  var Fn = {
+    reversecurrent: function(td1, td2) {
+      return 1;
+    },
+    orderbyasc: function(td1, td2) {
+      var value1 = td1.innerText || td1.textContent,
+        value2 = td2.innerText || td2.textContent;
+      return value1.localeCompare(value2);
+    },
+    reversebyasc: function(td1, td2) {
+      var value1 = td1.innerHTML,
+        value2 = td2.innerHTML;
+      return value2.localeCompare(value1);
+    },
+    orderbynum: function(td1, td2) {
+      var value1 = td1[browser.ie ? "innerText" : "textContent"].match(/\d+/),
+        value2 = td2[browser.ie ? "innerText" : "textContent"].match(/\d+/);
+      if (value1) value1 = +value1[0];
+      if (value2) value2 = +value2[0];
+      return (value1 || 0) - (value2 || 0);
+    },
+    reversebynum: function(td1, td2) {
+      var value1 = td1[browser.ie ? "innerText" : "textContent"].match(/\d+/),
+        value2 = td2[browser.ie ? "innerText" : "textContent"].match(/\d+/);
+      if (value1) value1 = +value1[0];
+      if (value2) value2 = +value2[0];
+      return (value2 || 0) - (value1 || 0);
+    }
+  };
+
+  //对表格设置排序的标记data-sort-type
+  table.setAttribute(
+    "data-sort-type",
+    compareFn && typeof compareFn === "string" && Fn[compareFn] ? compareFn : ""
+  );
+
+  //th不参与排序
+  flag && trArray.splice(0, 1);
+  trArray = utils.sort(trArray, function(tr1, tr2) {
+    var result;
+    if (compareFn && typeof compareFn === "function") {
+      result = compareFn.call(
+        this,
+        tr1.cells[sortByCellIndex],
+        tr2.cells[sortByCellIndex]
+      );
+    } else if (compareFn && typeof compareFn === "number") {
+      result = 1;
+    } else if (compareFn && typeof compareFn === "string" && Fn[compareFn]) {
+      result = Fn[compareFn].call(
+        this,
+        tr1.cells[sortByCellIndex],
+        tr2.cells[sortByCellIndex]
+      );
+    } else {
+      result = Fn["orderbyasc"].call(
+        this,
+        tr1.cells[sortByCellIndex],
+        tr2.cells[sortByCellIndex]
+      );
+    }
+    return result;
+  });
+  var fragment = table.ownerDocument.createDocumentFragment();
+  for (var j = 0, len = trArray.length; j < len; j++) {
+    fragment.appendChild(trArray[j]);
+  }
+  var tbody = table.getElementsByTagName("tbody")[0];
+  if (!lastRowIndex) {
+    tbody.appendChild(fragment);
+  } else {
+    tbody.insertBefore(
+      fragment,
+      rows[lastRowIndex - range.endRowIndex + range.beginRowIndex - 1]
+    );
+  }
+};
+
+UE.plugins["tablesort"] = function() {
+  var me = this,
+    UT = UE.UETable,
+    getUETable = function(tdOrTable) {
+      return UT.getUETable(tdOrTable);
+    },
+    getTableItemsByRange = function(editor) {
+      return UT.getTableItemsByRange(editor);
+    };
+
+  me.ready(function() {
+    //添加表格可排序的样式
+    utils.cssRule(
+      "tablesort",
+      "table.sortEnabled tr.firstRow th,table.sortEnabled tr.firstRow td{padding-right:20px;background-repeat: no-repeat;background-position: center right;" +
+        "   background-image:url(" +
+        me.options.themePath +
+        me.options.theme +
+        "/images/sortable.png);}",
+      me.document
+    );
+
+    //做单元格合并操作时,清除可排序标识
+    me.addListener("afterexeccommand", function(type, cmd) {
+      if (cmd == "mergeright" || cmd == "mergedown" || cmd == "mergecells") {
+        this.execCommand("disablesort");
+      }
+    });
+  });
+
+  //表格排序
+  UE.commands["sorttable"] = {
+    queryCommandState: function() {
+      var me = this,
+        tableItems = getTableItemsByRange(me);
+      if (!tableItems.cell) return -1;
+      var table = tableItems.table,
+        cells = table.getElementsByTagName("td");
+      for (var i = 0, cell; (cell = cells[i++]); ) {
+        if (cell.rowSpan != 1 || cell.colSpan != 1) return -1;
+      }
+      return 0;
+    },
+    execCommand: function(cmd, fn) {
+      var me = this,
+        range = me.selection.getRange(),
+        bk = range.createBookmark(true),
+        tableItems = getTableItemsByRange(me),
+        cell = tableItems.cell,
+        ut = getUETable(tableItems.table),
+        cellInfo = ut.getCellInfo(cell);
+      ut.sortTable(cellInfo.cellIndex, fn);
+      range.moveToBookmark(bk);
+      try {
+        range.select();
+      } catch (e) {}
+    }
+  };
+
+  //设置表格可排序,清除表格可排序
+  UE.commands["enablesort"] = UE.commands["disablesort"] = {
+    queryCommandState: function(cmd) {
+      var table = getTableItemsByRange(this).table;
+      if (table && cmd == "enablesort") {
+        var cells = domUtils.getElementsByTagName(table, "th td");
+        for (var i = 0; i < cells.length; i++) {
+          if (
+            cells[i].getAttribute("colspan") > 1 ||
+            cells[i].getAttribute("rowspan") > 1
+          )
+            return -1;
+        }
+      }
+
+      return !table
+        ? -1
+        : (cmd == "enablesort") ^
+            (table.getAttribute("data-sort") != "sortEnabled")
+          ? -1
+          : 0;
+    },
+    execCommand: function(cmd) {
+      var table = getTableItemsByRange(this).table;
+      table.setAttribute(
+        "data-sort",
+        cmd == "enablesort" ? "sortEnabled" : "sortDisabled"
+      );
+      cmd == "enablesort"
+        ? domUtils.addClass(table, "sortEnabled")
+        : domUtils.removeClasses(table, "sortEnabled");
+    }
+  };
+};
+
+
+// plugins/contextmenu.js
+///import core
+///commands 右键菜单
+///commandsName  ContextMenu
+///commandsTitle  右键菜单
+/**
+ * 右键菜单
+ * @function
+ * @name baidu.editor.plugins.contextmenu
+ * @author zhanyi
+ */
+
+UE.plugins["contextmenu"] = function() {
+  var me = this;
+
+  me.setOpt("enableContextMenu", me.getOpt("enableContextMenu") || true);
+
+  if (me.getOpt("enableContextMenu") === false) {
+    return;
+  }
+  var lang = me.getLang("contextMenu"),
+    menu,
+    items = me.options.contextMenu || [
+      { label: lang["selectall"], cmdName: "selectall" },
+      {
+        label: lang.cleardoc,
+        cmdName: "cleardoc",
+        exec: function() {
+          if (confirm(lang.confirmclear)) {
+            this.execCommand("cleardoc");
+          }
+        }
+      },
+      "-",
+      {
+        label: lang.unlink,
+        cmdName: "unlink"
+      },
+      "-",
+      {
+        group: lang.paragraph,
+        icon: "justifyjustify",
+        subMenu: [
+          {
+            label: lang.justifyleft,
+            cmdName: "justify",
+            value: "left"
+          },
+          {
+            label: lang.justifyright,
+            cmdName: "justify",
+            value: "right"
+          },
+          {
+            label: lang.justifycenter,
+            cmdName: "justify",
+            value: "center"
+          },
+          {
+            label: lang.justifyjustify,
+            cmdName: "justify",
+            value: "justify"
+          }
+        ]
+      },
+      "-",
+      {
+        group: lang.table,
+        icon: "table",
+        subMenu: [
+          {
+            label: lang.inserttable,
+            cmdName: "inserttable"
+          },
+          {
+            label: lang.deletetable,
+            cmdName: "deletetable"
+          },
+          "-",
+          {
+            label: lang.deleterow,
+            cmdName: "deleterow"
+          },
+          {
+            label: lang.deletecol,
+            cmdName: "deletecol"
+          },
+          {
+            label: lang.insertcol,
+            cmdName: "insertcol"
+          },
+          {
+            label: lang.insertcolnext,
+            cmdName: "insertcolnext"
+          },
+          {
+            label: lang.insertrow,
+            cmdName: "insertrow"
+          },
+          {
+            label: lang.insertrownext,
+            cmdName: "insertrownext"
+          },
+          "-",
+          {
+            label: lang.insertcaption,
+            cmdName: "insertcaption"
+          },
+          {
+            label: lang.deletecaption,
+            cmdName: "deletecaption"
+          },
+          {
+            label: lang.inserttitle,
+            cmdName: "inserttitle"
+          },
+          {
+            label: lang.deletetitle,
+            cmdName: "deletetitle"
+          },
+          {
+            label: lang.inserttitlecol,
+            cmdName: "inserttitlecol"
+          },
+          {
+            label: lang.deletetitlecol,
+            cmdName: "deletetitlecol"
+          },
+          "-",
+          {
+            label: lang.mergecells,
+            cmdName: "mergecells"
+          },
+          {
+            label: lang.mergeright,
+            cmdName: "mergeright"
+          },
+          {
+            label: lang.mergedown,
+            cmdName: "mergedown"
+          },
+          "-",
+          {
+            label: lang.splittorows,
+            cmdName: "splittorows"
+          },
+          {
+            label: lang.splittocols,
+            cmdName: "splittocols"
+          },
+          {
+            label: lang.splittocells,
+            cmdName: "splittocells"
+          },
+          "-",
+          {
+            label: lang.averageDiseRow,
+            cmdName: "averagedistributerow"
+          },
+          {
+            label: lang.averageDisCol,
+            cmdName: "averagedistributecol"
+          },
+          "-",
+          {
+            label: lang.edittd,
+            cmdName: "edittd",
+            exec: function() {
+              if (UE.ui["edittd"]) {
+                new UE.ui["edittd"](this);
+              }
+              this.getDialog("edittd").open();
+            }
+          },
+          {
+            label: lang.edittable,
+            cmdName: "edittable",
+            exec: function() {
+              if (UE.ui["edittable"]) {
+                new UE.ui["edittable"](this);
+              }
+              this.getDialog("edittable").open();
+            }
+          },
+          {
+            label: lang.setbordervisible,
+            cmdName: "setbordervisible"
+          }
+        ]
+      },
+      {
+        group: lang.tablesort,
+        icon: "tablesort",
+        subMenu: [
+          {
+            label: lang.enablesort,
+            cmdName: "enablesort"
+          },
+          {
+            label: lang.disablesort,
+            cmdName: "disablesort"
+          },
+          "-",
+          {
+            label: lang.reversecurrent,
+            cmdName: "sorttable",
+            value: "reversecurrent"
+          },
+          {
+            label: lang.orderbyasc,
+            cmdName: "sorttable",
+            value: "orderbyasc"
+          },
+          {
+            label: lang.reversebyasc,
+            cmdName: "sorttable",
+            value: "reversebyasc"
+          },
+          {
+            label: lang.orderbynum,
+            cmdName: "sorttable",
+            value: "orderbynum"
+          },
+          {
+            label: lang.reversebynum,
+            cmdName: "sorttable",
+            value: "reversebynum"
+          }
+        ]
+      },
+      {
+        group: lang.borderbk,
+        icon: "borderBack",
+        subMenu: [
+          {
+            label: lang.setcolor,
+            cmdName: "interlacetable",
+            exec: function() {
+              this.execCommand("interlacetable");
+            }
+          },
+          {
+            label: lang.unsetcolor,
+            cmdName: "uninterlacetable",
+            exec: function() {
+              this.execCommand("uninterlacetable");
+            }
+          },
+          {
+            label: lang.setbackground,
+            cmdName: "settablebackground",
+            exec: function() {
+              this.execCommand("settablebackground", {
+                repeat: true,
+                colorList: ["#bbb", "#ccc"]
+              });
+            }
+          },
+          {
+            label: lang.unsetbackground,
+            cmdName: "cleartablebackground",
+            exec: function() {
+              this.execCommand("cleartablebackground");
+            }
+          },
+          {
+            label: lang.redandblue,
+            cmdName: "settablebackground",
+            exec: function() {
+              this.execCommand("settablebackground", {
+                repeat: true,
+                colorList: ["red", "blue"]
+              });
+            }
+          },
+          {
+            label: lang.threecolorgradient,
+            cmdName: "settablebackground",
+            exec: function() {
+              this.execCommand("settablebackground", {
+                repeat: true,
+                colorList: ["#aaa", "#bbb", "#ccc"]
+              });
+            }
+          }
+        ]
+      },
+      {
+        group: lang.aligntd,
+        icon: "aligntd",
+        subMenu: [
+          {
+            cmdName: "cellalignment",
+            value: { align: "left", vAlign: "top" }
+          },
+          {
+            cmdName: "cellalignment",
+            value: { align: "center", vAlign: "top" }
+          },
+          {
+            cmdName: "cellalignment",
+            value: { align: "right", vAlign: "top" }
+          },
+          {
+            cmdName: "cellalignment",
+            value: { align: "left", vAlign: "middle" }
+          },
+          {
+            cmdName: "cellalignment",
+            value: { align: "center", vAlign: "middle" }
+          },
+          {
+            cmdName: "cellalignment",
+            value: { align: "right", vAlign: "middle" }
+          },
+          {
+            cmdName: "cellalignment",
+            value: { align: "left", vAlign: "bottom" }
+          },
+          {
+            cmdName: "cellalignment",
+            value: { align: "center", vAlign: "bottom" }
+          },
+          {
+            cmdName: "cellalignment",
+            value: { align: "right", vAlign: "bottom" }
+          }
+        ]
+      },
+      {
+        group: lang.aligntable,
+        icon: "aligntable",
+        subMenu: [
+          {
+            cmdName: "tablealignment",
+            className: "left",
+            label: lang.tableleft,
+            value: "left"
+          },
+          {
+            cmdName: "tablealignment",
+            className: "center",
+            label: lang.tablecenter,
+            value: "center"
+          },
+          {
+            cmdName: "tablealignment",
+            className: "right",
+            label: lang.tableright,
+            value: "right"
+          }
+        ]
+      },
+      "-",
+      {
+        label: lang.insertparagraphbefore,
+        cmdName: "insertparagraph",
+        value: true
+      },
+      {
+        label: lang.insertparagraphafter,
+        cmdName: "insertparagraph"
+      },
+      {
+        label: lang["copy"],
+        cmdName: "copy"
+      },
+      {
+        label: lang["paste"],
+        cmdName: "paste"
+      }
+    ];
+  if (!items.length) {
+    return;
+  }
+  var uiUtils = UE.ui.uiUtils;
+
+  me.addListener("contextmenu", function(type, evt) {
+    var offset = uiUtils.getViewportOffsetByEvent(evt);
+    me.fireEvent("beforeselectionchange");
+    if (menu) {
+      menu.destroy();
+    }
+    for (var i = 0, ti, contextItems = []; (ti = items[i]); i++) {
+      var last;
+      (function(item) {
+        if (item == "-") {
+          if ((last = contextItems[contextItems.length - 1]) && last !== "-") {
+            contextItems.push("-");
+          }
+        } else if (item.hasOwnProperty("group")) {
+          for (var j = 0, cj, subMenu = []; (cj = item.subMenu[j]); j++) {
+            (function(subItem) {
+              if (subItem == "-") {
+                if ((last = subMenu[subMenu.length - 1]) && last !== "-") {
+                  subMenu.push("-");
+                } else {
+                  subMenu.splice(subMenu.length - 1);
+                }
+              } else {
+                if (
+                  (me.commands[subItem.cmdName] ||
+                    UE.commands[subItem.cmdName] ||
+                    subItem.query) &&
+                  (subItem.query
+                    ? subItem.query()
+                    : me.queryCommandState(subItem.cmdName)) > -1
+                ) {
+                  subMenu.push({
+                    label:
+                      subItem.label ||
+                        me.getLang(
+                          "contextMenu." +
+                            subItem.cmdName +
+                            (subItem.value || "")
+                        ) ||
+                        "",
+                    className:
+                      "edui-for-" +
+                        subItem.cmdName +
+                        (subItem.className
+                          ? " edui-for-" +
+                              subItem.cmdName +
+                              "-" +
+                              subItem.className
+                          : ""),
+                    onclick: subItem.exec
+                      ? function() {
+                          subItem.exec.call(me);
+                        }
+                      : function() {
+                          me.execCommand(subItem.cmdName, subItem.value);
+                        }
+                  });
+                }
+              }
+            })(cj);
+          }
+          if (subMenu.length) {
+            function getLabel() {
+              switch (item.icon) {
+                case "table":
+                  return me.getLang("contextMenu.table");
+                case "justifyjustify":
+                  return me.getLang("contextMenu.paragraph");
+                case "aligntd":
+                  return me.getLang("contextMenu.aligntd");
+                case "aligntable":
+                  return me.getLang("contextMenu.aligntable");
+                case "tablesort":
+                  return lang.tablesort;
+                case "borderBack":
+                  return lang.borderbk;
+                default:
+                  return "";
+              }
+            }
+            contextItems.push({
+              //todo 修正成自动获取方式
+              label: getLabel(),
+              className: "edui-for-" + item.icon,
+              subMenu: {
+                items: subMenu,
+                editor: me
+              }
+            });
+          }
+        } else {
+          //有可能commmand没有加载右键不能出来，或者没有command也想能展示出来添加query方法
+          if (
+            (me.commands[item.cmdName] ||
+              UE.commands[item.cmdName] ||
+              item.query) &&
+            (item.query
+              ? item.query.call(me)
+              : me.queryCommandState(item.cmdName)) > -1
+          ) {
+            contextItems.push({
+              label: item.label || me.getLang("contextMenu." + item.cmdName),
+              className:
+                "edui-for-" +
+                  (item.icon ? item.icon : item.cmdName + (item.value || "")),
+              onclick: item.exec
+                ? function() {
+                    item.exec.call(me);
+                  }
+                : function() {
+                    me.execCommand(item.cmdName, item.value);
+                  }
+            });
+          }
+        }
+      })(ti);
+    }
+    if (contextItems[contextItems.length - 1] == "-") {
+      contextItems.pop();
+    }
+
+    menu = new UE.ui.Menu({
+      items: contextItems,
+      className: "edui-contextmenu",
+      editor: me
+    });
+    menu.render();
+    menu.showAt(offset);
+
+    me.fireEvent("aftershowcontextmenu", menu);
+
+    domUtils.preventDefault(evt);
+    if (browser.ie) {
+      var ieRange;
+      try {
+        ieRange = me.selection.getNative().createRange();
+      } catch (e) {
+        return;
+      }
+      if (ieRange.item) {
+        var range = new dom.Range(me.document);
+        range.selectNode(ieRange.item(0)).select(true, true);
+      }
+    }
+  });
+
+  // 添加复制的flash按钮
+  me.addListener("aftershowcontextmenu", function(type, menu) {
+    if (me.zeroclipboard) {
+      var items = menu.items;
+      for (var key in items) {
+        if (items[key].className == "edui-for-copy") {
+          me.zeroclipboard.clip(items[key].getDom());
+        }
+      }
+    }
+  });
+};
+
+
+// plugins/shortcutmenu.js
+///import core
+///commands       弹出菜单
+// commandsName  popupmenu
+///commandsTitle  弹出菜单
+/**
+ * 弹出菜单
+ * @function
+ * @name baidu.editor.plugins.popupmenu
+ * @author xuheng
+ */
+
+UE.plugins["shortcutmenu"] = function() {
+  var me = this,
+    menu,
+    items = me.options.shortcutMenu || [];
+
+  if (!items.length) {
+    return;
+  }
+
+  me.addListener("contextmenu mouseup", function(type, e) {
+    var me = this,
+      customEvt = {
+        type: type,
+        target: e.target || e.srcElement,
+        screenX: e.screenX,
+        screenY: e.screenY,
+        clientX: e.clientX,
+        clientY: e.clientY
+      };
+
+    setTimeout(function() {
+      var rng = me.selection.getRange();
+      if (rng.collapsed === false || type == "contextmenu") {
+        // 未选中文字情况下不显示
+        if(!me.selection.getText()){
+          return
+        }
+        if (!menu) {
+          menu = new baidu.editor.ui.ShortCutMenu({
+            editor: me,
+            items: items,
+            theme: me.options.theme,
+            className: "edui-shortcutmenu"
+          });
+
+          menu.render();
+          me.fireEvent("afterrendershortcutmenu", menu);
+        }
+
+        menu.show(customEvt, !!UE.plugins["contextmenu"]);
+      }
+    });
+
+    if (type == "contextmenu") {
+      domUtils.preventDefault(e);
+      if (browser.ie9below) {
+        var ieRange;
+        try {
+          ieRange = me.selection.getNative().createRange();
+        } catch (e) {
+          return;
+        }
+        if (ieRange.item) {
+          var range = new dom.Range(me.document);
+          range.selectNode(ieRange.item(0)).select(true, true);
+        }
+      }
+    }
+  });
+
+  me.addListener("keydown", function(type) {
+    if (type == "keydown") {
+      menu && !menu.isHidden && menu.hide();
+    }
+  });
+};
+
+
+// plugins/basestyle.js
+/**
+ * B、I、sub、super命令支持
+ * @file
+ * @since 1.2.6.1
+ */
+
+UE.plugins["basestyle"] = function() {
+  /**
+     * 字体加粗
+     * @command bold
+     * @param { String } cmd 命令字符串
+     * @remind 对已加粗的文本内容执行该命令， 将取消加粗
+     * @method execCommand
+     * @example
+     * ```javascript
+     * //editor是编辑器实例
+     * //对当前选中的文本内容执行加粗操作
+     * //第一次执行， 文本内容加粗
+     * editor.execCommand( 'bold' );
+     *
+     * //第二次执行， 文本内容取消加粗
+     * editor.execCommand( 'bold' );
+     * ```
+     */
+
+  /**
+     * 字体倾斜
+     * @command italic
+     * @method execCommand
+     * @param { String } cmd 命令字符串
+     * @remind 对已倾斜的文本内容执行该命令， 将取消倾斜
+     * @example
+     * ```javascript
+     * //editor是编辑器实例
+     * //对当前选中的文本内容执行斜体操作
+     * //第一次操作， 文本内容将变成斜体
+     * editor.execCommand( 'italic' );
+     *
+     * //再次对同一文本内容执行， 则文本内容将恢复正常
+     * editor.execCommand( 'italic' );
+     * ```
+     */
+
+  /**
+     * 下标文本，与“superscript”命令互斥
+     * @command subscript
+     * @method execCommand
+     * @remind  把选中的文本内容切换成下标文本， 如果当前选中的文本已经是下标， 则该操作会把文本内容还原成正常文本
+     * @param { String } cmd 命令字符串
+     * @example
+     * ```javascript
+     * //editor是编辑器实例
+     * //对当前选中的文本内容执行下标操作
+     * //第一次操作， 文本内容将变成下标文本
+     * editor.execCommand( 'subscript' );
+     *
+     * //再次对同一文本内容执行， 则文本内容将恢复正常
+     * editor.execCommand( 'subscript' );
+     * ```
+     */
+
+  /**
+     * 上标文本，与“subscript”命令互斥
+     * @command superscript
+     * @method execCommand
+     * @remind 把选中的文本内容切换成上标文本， 如果当前选中的文本已经是上标， 则该操作会把文本内容还原成正常文本
+     * @param { String } cmd 命令字符串
+     * @example
+     * ```javascript
+     * //editor是编辑器实例
+     * //对当前选中的文本内容执行上标操作
+     * //第一次操作， 文本内容将变成上标文本
+     * editor.execCommand( 'superscript' );
+     *
+     * //再次对同一文本内容执行， 则文本内容将恢复正常
+     * editor.execCommand( 'superscript' );
+     * ```
+     */
+  var basestyles = {
+    bold: ["strong", "b"],
+    italic: ["em", "i"],
+    subscript: ["sub"],
+    superscript: ["sup"]
+  },
+    getObj = function(editor, tagNames) {
+      return domUtils.filterNodeList(
+        editor.selection.getStartElementPath(),
+        tagNames
+      );
+    },
+    me = this;
+  //添加快捷键
+  me.addshortcutkey({
+    Bold: "ctrl+66", //^B
+    Italic: "ctrl+73", //^I
+    Underline: "ctrl+85" //^U
+  });
+  me.addInputRule(function(root) {
+    utils.each(root.getNodesByTagName("b i"), function(node) {
+      switch (node.tagName) {
+        case "b":
+          node.tagName = "strong";
+          break;
+        case "i":
+          node.tagName = "em";
+      }
+    });
+  });
+  for (var style in basestyles) {
+    (function(cmd, tagNames) {
+      me.commands[cmd] = {
+        execCommand: function(cmdName) {
+          var range = me.selection.getRange(),
+            obj = getObj(this, tagNames);
+          if (range.collapsed) {
+            if (obj) {
+              var tmpText = me.document.createTextNode("");
+              range.insertNode(tmpText).removeInlineStyle(tagNames);
+              range.setStartBefore(tmpText);
+              domUtils.remove(tmpText);
+            } else {
+              var tmpNode = range.document.createElement(tagNames[0]);
+              if (cmdName == "superscript" || cmdName == "subscript") {
+                tmpText = me.document.createTextNode("");
+                range
+                  .insertNode(tmpText)
+                  .removeInlineStyle(["sub", "sup"])
+                  .setStartBefore(tmpText)
+                  .collapse(true);
+              }
+              range.insertNode(tmpNode).setStart(tmpNode, 0);
+            }
+            range.collapse(true);
+          } else {
+            if (cmdName == "superscript" || cmdName == "subscript") {
+              if (!obj || obj.tagName.toLowerCase() != cmdName) {
+                range.removeInlineStyle(["sub", "sup"]);
+              }
+            }
+            obj
+              ? range.removeInlineStyle(tagNames)
+              : range.applyInlineStyle(tagNames[0]);
+          }
+          range.select();
+        },
+        queryCommandState: function() {
+          return getObj(this, tagNames) ? 1 : 0;
+        }
+      };
+    })(style, basestyles[style]);
+  }
+};
+
+
+// plugins/elementpath.js
+/**
+ * 选取路径命令
+ * @file
+ */
+UE.plugins["elementpath"] = function() {
+  var currentLevel,
+    tagNames,
+    me = this;
+  me.setOpt("elementPathEnabled", true);
+  if (!me.options.elementPathEnabled) {
+    return;
+  }
+  me.commands["elementpath"] = {
+    execCommand: function(cmdName, level) {
+      var start = tagNames[level],
+        range = me.selection.getRange();
+      currentLevel = level * 1;
+      range.selectNode(start).select();
+    },
+    queryCommandValue: function() {
+      //产生一个副本，不能修改原来的startElementPath;
+      var parents = [].concat(this.selection.getStartElementPath()).reverse(),
+        names = [];
+      tagNames = parents;
+      for (var i = 0, ci; (ci = parents[i]); i++) {
+        if (ci.nodeType == 3) {
+          continue;
+        }
+        var name = ci.tagName.toLowerCase();
+        if (name == "img" && ci.getAttribute("anchorname")) {
+          name = "anchor";
+        }
+        names[i] = name;
+        if (currentLevel == i) {
+          currentLevel = -1;
+          break;
+        }
+      }
+      return names;
+    }
+  };
+};
+
+
+// plugins/formatmatch.js
+/**
+ * 格式刷，只格式inline的
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 格式刷
+ * @command formatmatch
+ * @method execCommand
+ * @remind 该操作不能复制段落格式
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * //editor是编辑器实例
+ * //获取格式刷
+ * editor.execCommand( 'formatmatch' );
+ * ```
+ */
+UE.plugins["formatmatch"] = function() {
+  var me = this,
+    list = [],
+    img,
+    flag = 0;
+
+  me.addListener("reset", function() {
+    list = [];
+    flag = 0;
+  });
+
+  function addList(type, evt) {
+    if (browser.webkit) {
+      var target = evt.target.tagName == "IMG" ? evt.target : null;
+    }
+
+    function addFormat(range) {
+      if (text) {
+        range.selectNode(text);
+      }
+      return range.applyInlineStyle(list[list.length - 1].tagName, null, list);
+    }
+
+    me.undoManger && me.undoManger.save();
+
+    var range = me.selection.getRange(),
+      imgT = target || range.getClosedNode();
+    if (img && imgT && imgT.tagName == "IMG") {
+      //trace:964
+
+      imgT.style.cssText +=
+        ";float:" +
+        (img.style.cssFloat || img.style.styleFloat || "none") +
+        ";display:" +
+        (img.style.display || "inline");
+
+      img = null;
+    } else {
+      if (!img) {
+        var collapsed = range.collapsed;
+        if (collapsed) {
+          var text = me.document.createTextNode("match");
+          range.insertNode(text).select();
+        }
+        me.__hasEnterExecCommand = true;
+        //不能把block上的属性干掉
+        //trace:1553
+        var removeFormatAttributes = me.options.removeFormatAttributes;
+        me.options.removeFormatAttributes = "";
+        me.execCommand("removeformat");
+        me.options.removeFormatAttributes = removeFormatAttributes;
+        me.__hasEnterExecCommand = false;
+        //trace:969
+        range = me.selection.getRange();
+        if (list.length) {
+          addFormat(range);
+        }
+        if (text) {
+          range.setStartBefore(text).collapse(true);
+        }
+        range.select();
+        text && domUtils.remove(text);
+      }
+    }
+
+    me.undoManger && me.undoManger.save();
+    me.removeListener("mouseup", addList);
+    flag = 0;
+  }
+
+  me.commands["formatmatch"] = {
+    execCommand: function(cmdName) {
+      if (flag) {
+        flag = 0;
+        list = [];
+        me.removeListener("mouseup", addList);
+        return;
+      }
+
+      var range = me.selection.getRange();
+      img = range.getClosedNode();
+      if (!img || img.tagName != "IMG") {
+        range.collapse(true).shrinkBoundary();
+        var start = range.startContainer;
+        list = domUtils.findParents(start, true, function(node) {
+          return !domUtils.isBlockElm(node) && node.nodeType == 1;
+        });
+        //a不能加入格式刷, 并且克隆节点
+        for (var i = 0, ci; (ci = list[i]); i++) {
+          if (ci.tagName == "A") {
+            list.splice(i, 1);
+            break;
+          }
+        }
+      }
+
+      me.addListener("mouseup", addList);
+      flag = 1;
+    },
+    queryCommandState: function() {
+      return flag;
+    },
+    notNeedUndo: 1
+  };
+};
+
+
+// plugins/searchreplace.js
+///import core
+///commands 查找替换
+///commandsName  SearchReplace
+///commandsTitle  查询替换
+///commandsDialog  dialogs\searchreplace
+/**
+ * @description 查找替换
+ * @author zhanyi
+ */
+
+UE.plugin.register("searchreplace", function() {
+  var me = this;
+
+  var _blockElm = { table: 1, tbody: 1, tr: 1, ol: 1, ul: 1 };
+
+  var lastRng = null;
+
+  function getText(node) {
+    var text = node.nodeType == 3
+      ? node.nodeValue
+      : node[browser.ie ? "innerText" : "textContent"];
+    return text.replace(domUtils.fillChar, "");
+  }
+
+  function findTextInString(textContent, opt, currentIndex) {
+    var str = opt.searchStr;
+
+    var reg = new RegExp(str, "g" + (opt.casesensitive ? "" : "i")),
+      match;
+
+    if (opt.dir == -1) {
+      textContent = textContent.substr(0, currentIndex);
+      textContent = textContent.split("").reverse().join("");
+      str = str.split("").reverse().join("");
+      match = reg.exec(textContent);
+      if (match) {
+        return currentIndex - match.index - str.length;
+      }
+    } else {
+      textContent = textContent.substr(currentIndex);
+      match = reg.exec(textContent);
+      if (match) {
+        return match.index + currentIndex;
+      }
+    }
+
+    return -1;
+  }
+  function findTextBlockElm(node, currentIndex, opt) {
+    var textContent,
+      index,
+      methodName = opt.all || opt.dir == 1 ? "getNextDomNode" : "getPreDomNode";
+    if (domUtils.isBody(node)) {
+      node = node.firstChild;
+    }
+    var first = 1;
+    while (node) {
+      textContent = getText(node);
+      index = findTextInString(textContent, opt, currentIndex);
+      first = 0;
+      if (index != -1) {
+        return {
+          node: node,
+          index: index
+        };
+      }
+      node = domUtils[methodName](node);
+      while (node && _blockElm[node.nodeName.toLowerCase()]) {
+        node = domUtils[methodName](node, true);
+      }
+      if (node) {
+        currentIndex = opt.dir == -1 ? getText(node).length : 0;
+      }
+    }
+  }
+  function findNTextInBlockElm(node, index, str) {
+    var currentIndex = 0,
+      currentNode = node.firstChild,
+      currentNodeLength = 0,
+      result;
+    while (currentNode) {
+      if (currentNode.nodeType == 3) {
+        currentNodeLength = getText(currentNode).replace(
+          /(^[\t\r\n]+)|([\t\r\n]+$)/,
+          ""
+        ).length;
+        currentIndex += currentNodeLength;
+        if (currentIndex >= index) {
+          return {
+            node: currentNode,
+            index: currentNodeLength - (currentIndex - index)
+          };
+        }
+      } else if (!dtd.$empty[currentNode.tagName]) {
+        currentNodeLength = getText(currentNode).replace(
+          /(^[\t\r\n]+)|([\t\r\n]+$)/,
+          ""
+        ).length;
+        currentIndex += currentNodeLength;
+        if (currentIndex >= index) {
+          result = findNTextInBlockElm(
+            currentNode,
+            currentNodeLength - (currentIndex - index),
+            str
+          );
+          if (result) {
+            return result;
+          }
+        }
+      }
+      currentNode = domUtils.getNextDomNode(currentNode);
+    }
+  }
+
+  function searchReplace(me, opt) {
+    var rng = lastRng || me.selection.getRange(),
+      startBlockNode,
+      searchStr = opt.searchStr,
+      span = me.document.createElement("span");
+    span.innerHTML = "$$ueditor_searchreplace_key$$";
+
+    rng.shrinkBoundary(true);
+
+    //判断是不是第一次选中
+    if (!rng.collapsed) {
+      rng.select();
+      var rngText = me.selection.getText();
+      if (
+        new RegExp(
+          "^" + opt.searchStr + "$",
+          opt.casesensitive ? "" : "i"
+        ).test(rngText)
+      ) {
+        if (opt.replaceStr != undefined) {
+          replaceText(rng, opt.replaceStr);
+          rng.select();
+          return true;
+        } else {
+          rng.collapse(opt.dir == -1);
+        }
+      }
+    }
+
+    rng.insertNode(span);
+    rng.enlargeToBlockElm(true);
+    startBlockNode = rng.startContainer;
+    var currentIndex = getText(startBlockNode).indexOf(
+      "$$ueditor_searchreplace_key$$"
+    );
+    rng.setStartBefore(span);
+    domUtils.remove(span);
+    var result = findTextBlockElm(startBlockNode, currentIndex, opt);
+    if (result) {
+      var rngStart = findNTextInBlockElm(result.node, result.index, searchStr);
+      var rngEnd = findNTextInBlockElm(
+        result.node,
+        result.index + searchStr.length,
+        searchStr
+      );
+      rng
+        .setStart(rngStart.node, rngStart.index)
+        .setEnd(rngEnd.node, rngEnd.index);
+
+      if (opt.replaceStr !== undefined) {
+        replaceText(rng, opt.replaceStr);
+      }
+      rng.select();
+      return true;
+    } else {
+      rng.setCursor();
+    }
+  }
+  function replaceText(rng, str) {
+    str = me.document.createTextNode(str);
+    rng.deleteContents().insertNode(str);
+  }
+  return {
+    commands: {
+      searchreplace: {
+        execCommand: function(cmdName, opt) {
+          utils.extend(
+            opt,
+            {
+              all: false,
+              casesensitive: false,
+              dir: 1
+            },
+            true
+          );
+          var num = 0;
+          if (opt.all) {
+            lastRng = null;
+            var rng = me.selection.getRange(),
+              first = me.body.firstChild;
+            if (first && first.nodeType == 1) {
+              rng.setStart(first, 0);
+              rng.shrinkBoundary(true);
+            } else if (first.nodeType == 3) {
+              rng.setStartBefore(first);
+            }
+            rng.collapse(true).select(true);
+            if (opt.replaceStr !== undefined) {
+              me.fireEvent("saveScene");
+            }
+            while (searchReplace(this, opt)) {
+              num++;
+              lastRng = me.selection.getRange();
+              lastRng.collapse(opt.dir == -1);
+            }
+            if (num) {
+              me.fireEvent("saveScene");
+            }
+          } else {
+            if (opt.replaceStr !== undefined) {
+              me.fireEvent("saveScene");
+            }
+            if (searchReplace(this, opt)) {
+              num++;
+              lastRng = me.selection.getRange();
+              lastRng.collapse(opt.dir == -1);
+            }
+            if (num) {
+              me.fireEvent("saveScene");
+            }
+          }
+
+          return num;
+        },
+        notNeedUndo: 1
+      }
+    },
+    bindEvents: {
+      clearlastSearchResult: function() {
+        lastRng = null;
+      }
+    }
+  };
+});
+
+
+// plugins/customstyle.js
+/**
+ * 自定义样式
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 根据config配置文件里“customstyle”选项的值对匹配的标签执行样式替换。
+ * @command customstyle
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * editor.execCommand( 'customstyle' );
+ * ```
+ */
+UE.plugins["customstyle"] = function() {
+  var me = this;
+  me.setOpt({
+    customstyle: [
+      {
+        tag: "h1",
+        name: "tc",
+        style:
+          "font-size:32px;line-height:40px;font-weight:bold;border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;"
+      },
+      {
+        tag: "h1",
+        name: "tl",
+        style:
+          "font-size:32px;line-height:40px;font-weight:bold;border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:left;"
+      },
+      {
+        tag: "span",
+        name: "im",
+        style:
+          "font-size:16px;font-style:italic;font-weight:bold;line-height:18px;"
+      },
+      {
+        tag: "span",
+        name: "hi",
+        style:
+          "font-size:16px;font-style:italic;font-weight:bold;color:rgb(51, 153, 204);line-height:18px;"
+      }
+    ]
+  });
+  me.commands["customstyle"] = {
+    execCommand: function(cmdName, obj) {
+      var me = this,
+        tagName = obj.tag,
+        node = domUtils.findParent(
+          me.selection.getStart(),
+          function(node) {
+            return node.getAttribute("label");
+          },
+          true
+        ),
+        range,
+        bk,
+        tmpObj = {};
+      for (var p in obj) {
+        if (obj[p] !== undefined) tmpObj[p] = obj[p];
+      }
+      delete tmpObj.tag;
+      if (node && node.getAttribute("label") == obj.label) {
+        range = this.selection.getRange();
+        bk = range.createBookmark();
+        if (range.collapsed) {
+          //trace:1732 删掉自定义标签，要有p来回填站位
+          if (dtd.$block[node.tagName]) {
+            var fillNode = me.document.createElement("p");
+            domUtils.moveChild(node, fillNode);
+            node.parentNode.insertBefore(fillNode, node);
+            domUtils.remove(node);
+          } else {
+            domUtils.remove(node, true);
+          }
+        } else {
+          var common = domUtils.getCommonAncestor(bk.start, bk.end),
+            nodes = domUtils.getElementsByTagName(common, tagName);
+          if (new RegExp(tagName, "i").test(common.tagName)) {
+            nodes.push(common);
+          }
+          for (var i = 0, ni; (ni = nodes[i++]); ) {
+            if (ni.getAttribute("label") == obj.label) {
+              var ps = domUtils.getPosition(ni, bk.start),
+                pe = domUtils.getPosition(ni, bk.end);
+              if (
+                (ps & domUtils.POSITION_FOLLOWING ||
+                  ps & domUtils.POSITION_CONTAINS) &&
+                (pe & domUtils.POSITION_PRECEDING ||
+                  pe & domUtils.POSITION_CONTAINS)
+              )
+                if (dtd.$block[tagName]) {
+                  var fillNode = me.document.createElement("p");
+                  domUtils.moveChild(ni, fillNode);
+                  ni.parentNode.insertBefore(fillNode, ni);
+                }
+              domUtils.remove(ni, true);
+            }
+          }
+          node = domUtils.findParent(
+            common,
+            function(node) {
+              return node.getAttribute("label") == obj.label;
+            },
+            true
+          );
+          if (node) {
+            domUtils.remove(node, true);
+          }
+        }
+        range.moveToBookmark(bk).select();
+      } else {
+        if (dtd.$block[tagName]) {
+          this.execCommand("paragraph", tagName, tmpObj, "customstyle");
+          range = me.selection.getRange();
+          if (!range.collapsed) {
+            range.collapse();
+            node = domUtils.findParent(
+              me.selection.getStart(),
+              function(node) {
+                return node.getAttribute("label") == obj.label;
+              },
+              true
+            );
+            var pNode = me.document.createElement("p");
+            domUtils.insertAfter(node, pNode);
+            domUtils.fillNode(me.document, pNode);
+            range.setStart(pNode, 0).setCursor();
+          }
+        } else {
+          range = me.selection.getRange();
+          if (range.collapsed) {
+            node = me.document.createElement(tagName);
+            domUtils.setAttributes(node, tmpObj);
+            range.insertNode(node).setStart(node, 0).setCursor();
+
+            return;
+          }
+
+          bk = range.createBookmark();
+          range.applyInlineStyle(tagName, tmpObj).moveToBookmark(bk).select();
+        }
+      }
+    },
+    queryCommandValue: function() {
+      var parent = domUtils.filterNodeList(
+        this.selection.getStartElementPath(),
+        function(node) {
+          return node.getAttribute("label");
+        }
+      );
+      return parent ? parent.getAttribute("label") : "";
+    }
+  };
+  //当去掉customstyle是，如果是块元素，用p代替
+  me.addListener("keyup", function(type, evt) {
+    var keyCode = evt.keyCode || evt.which;
+
+    if (keyCode == 32 || keyCode == 13) {
+      var range = me.selection.getRange();
+      if (range.collapsed) {
+        var node = domUtils.findParent(
+          me.selection.getStart(),
+          function(node) {
+            return node.getAttribute("label");
+          },
+          true
+        );
+        if (node && dtd.$block[node.tagName] && domUtils.isEmptyNode(node)) {
+          var p = me.document.createElement("p");
+          domUtils.insertAfter(node, p);
+          domUtils.fillNode(me.document, p);
+          domUtils.remove(node);
+          range.setStart(p, 0).setCursor();
+        }
+      }
+    }
+  });
+};
+
+
+// plugins/catchremoteimage.js
+///import core
+///commands 远程图片抓取
+///commandsName  catchRemoteImage,catchremoteimageenable
+///commandsTitle  远程图片抓取
+/**
+ * 远程图片抓取,当开启本插件时所有不符合本地域名的图片都将被抓取成为本地服务器上的图片
+ */
+UE.plugins["catchremoteimage"] = function () {
+  var me = this,
+    ajax = UE.ajax;
+
+  /* 设置默认值 */
+  if (me.options.catchRemoteImageEnable === false) {
+    return;
+  }
+  me.setOpt({
+    catchRemoteImageEnable: false
+  });
+
+  var catcherLocalDomain = me.getOpt("catcherLocalDomain"),
+    catcherActionUrl = me.getActionUrl(me.getOpt("catcherActionName")),
+    catcherUrlPrefix = me.getOpt("catcherUrlPrefix"),
+    catcherFieldName = me.getOpt("catcherFieldName");
+
+  me.addListener('serverConfigLoaded', function () {
+    catcherLocalDomain = me.getOpt("catcherLocalDomain");
+    catcherActionUrl = me.getActionUrl(me.getOpt("catcherActionName"));
+    catcherUrlPrefix = me.getOpt("catcherUrlPrefix");
+    catcherFieldName = me.getOpt("catcherFieldName");
+  });
+
+  me.addListener("afterpaste", function () {
+    me.fireEvent("catchremoteimage");
+  });
+
+  var catchRemoteImageCatching = false;
+
+  function sendApi(imgs, callbacks) {
+    var params = utils.serializeParam(me.queryCommandValue("serverparam")) || "",
+      url = utils.formatUrl(
+        catcherActionUrl +
+        (catcherActionUrl.indexOf("?") === -1 ? "?" : "&") +
+        params
+      ),
+      isJsonp = utils.isCrossDomainUrl(url),
+      opt = {
+        method: "POST",
+        dataType: isJsonp ? "jsonp" : "",
+        timeout: 60000, //单位：毫秒，回调请求超时设置。目标用户如果网速不是很快的话此处建议设置一个较大的数值
+        onsuccess: callbacks["success"],
+        onerror: callbacks["error"]
+      };
+    opt[catcherFieldName] = imgs;
+    ajax.request(url, opt);
+  }
+
+  function catchElement(type, ele, imageUrl) {
+    sendApi([imageUrl], {
+      //成功抓取
+      success: function (r) {
+        try {
+          var info = r.state !== undefined
+            ? r
+            : eval("(" + r.responseText + ")");
+        } catch (e) {
+          return;
+        }
+
+        /* 获取源路径和新路径 */
+        var oldSrc,
+          newSrc,
+          oldBgIMG,
+          newBgIMG,
+          list = info.list;
+        var catchFailList = [];
+        var catchSuccessList = [];
+        var failIMG = me.options.themePath + me.options.theme + '/images/img-cracked.png';
+
+        var cj = list[0];
+        switch (type) {
+          case 'image':
+            oldSrc = ele.getAttribute("_src") || ele.src || "";
+            if (cj.state === "SUCCESS") {
+              newSrc = catcherUrlPrefix + cj.url;
+              // 上传成功是删除uploading动画
+              domUtils.removeClasses(ele, "loadingclass");
+              domUtils.setAttributes(ele, {
+                "src": newSrc,
+                "_src": newSrc,
+                "data-catch-result": "success"
+              });
+              catchSuccessList.push(ele);
+            } else {
+              // 替换成统一的失败图片
+              domUtils.removeClasses(ele, "loadingclass");
+              domUtils.setAttributes(ele, {
+                "src": failIMG,
+                "_src": failIMG,
+                "data-catch-result": "fail" // 添加catch失败标记
+              });
+              catchFailList.push(ele);
+            }
+            break;
+          case 'background':
+            oldBgIMG = ele.getAttribute("data-background") || "";
+            if (cj.state === "SUCCESS") {
+              newBgIMG = catcherUrlPrefix + cj.url;
+              ele.style.cssText = ele.style.cssText.replace(loadingIMG, newBgIMG);
+              domUtils.removeAttributes(ele, "data-background");
+              domUtils.setAttributes(ele, {
+                "data-catch-result": "success"   // 添加catch成功标记
+              });
+              catchSuccessList.push(ele);
+            } else {
+              ele.style.cssText = ele.style.cssText.replace(loadingIMG, failIMG);
+              domUtils.removeAttributes(ele, "data-background");
+              domUtils.setAttributes(ele, {
+                "data-catch-result": "fail"   // 添加catch失败标记
+              });
+              catchFailList.push(ele);
+            }
+            break;
+        }
+        // 监听事件添加成功抓取和抓取失败的dom列表参数
+        me.fireEvent('catchremotesuccess', catchSuccessList, catchFailList);
+        catchRemoteImageCatching = false;
+        setTimeout(function () {
+          me.fireEvent('catchremoteimage');
+        }, 0);
+      },
+      //回调失败，本次请求超时
+      error: function () {
+        me.fireEvent('catchremoteerror');
+        catchRemoteImageCatching = false;
+        setTimeout(function () {
+          me.fireEvent('catchremoteimage');
+        }, 0);
+      }
+    });
+  }
+
+  function catchRemoteImage() {
+    if (catchRemoteImageCatching) {
+      return;
+    }
+    catchRemoteImageCatching = true;
+
+    var loadingIMG = me.options.themePath + me.options.theme + '/images/spacer.gif',
+      imgs = me.document.querySelectorAll('[style*="url"],img'),
+      test = function (src, urls) {
+        if (src.indexOf(location.host) !== -1 || /(^\.)|(^\/)/.test(src)) {
+          return true;
+        }
+        if (urls) {
+          for (var j = 0, url; (url = urls[j++]);) {
+            if (src.indexOf(url) !== -1) {
+              return true;
+            }
+          }
+        }
+        return false;
+      };
+
+    for (var i = 0, ci; (ci = imgs[i++]);) {
+      if (ci.getAttribute("data-word-image") || ci.getAttribute('data-catch-result')) {
+        continue;
+      }
+      if (ci.nodeName === "IMG") {
+        var src = ci.getAttribute("_src") || ci.src || "";
+        if (/^(https?|ftp):/i.test(src) && !test(src, catcherLocalDomain)) {
+          catchElement('image', ci, src);
+          domUtils.setAttributes(ci, {
+            class: "loadingclass",
+            _src: src,
+            src: loadingIMG
+          })
+          return;
+        }
+      } else {
+        var backgroundImageurl = ci.style.cssText.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '');
+        if (/^(https?|ftp):/i.test(backgroundImageurl) && !test(backgroundImageurl, catcherLocalDomain)) {
+          catchElement('background', ci, backgroundImageurl);
+          ci.style.cssText = ci.style.cssText.replace(backgroundImageurl, loadingIMG);
+          domUtils.setAttributes(ci, {
+            "data-background": backgroundImageurl
+          })
+          return;
+        }
+      }
+    }
+
+  };
+
+  me.addListener("catchremoteimage", function () {
+    catchRemoteImage();
+  });
+};
+
+
+// plugins/insertparagraph.js
+/**
+ * 插入段落
+ * @file
+ * @since 1.2.6.1
+ */
+
+/**
+ * 插入段落
+ * @command insertparagraph
+ * @method execCommand
+ * @param { String } cmd 命令字符串
+ * @example
+ * ```javascript
+ * //editor是编辑器实例
+ * editor.execCommand( 'insertparagraph' );
+ * ```
+ */
+
+UE.commands["insertparagraph"] = {
+  execCommand: function(cmdName, front) {
+    var me = this,
+      range = me.selection.getRange(),
+      start = range.startContainer,
+      tmpNode;
+    while (start) {
+      if (domUtils.isBody(start)) {
+        break;
+      }
+      tmpNode = start;
+      start = start.parentNode;
+    }
+    if (tmpNode) {
+      var p = me.document.createElement("p");
+      if (front) {
+        tmpNode.parentNode.insertBefore(p, tmpNode);
+      } else {
+        tmpNode.parentNode.insertBefore(p, tmpNode.nextSibling);
+      }
+      domUtils.fillNode(me.document, p);
+      range.setStart(p, 0).setCursor(false, true);
+    }
+  }
+};
+
+
+// plugins/template.js
+///import core
+///import plugins\inserthtml.js
+///import plugins\cleardoc.js
+///commands 模板
+///commandsName  template
+///commandsTitle  模板
+///commandsDialog  dialogs\template
+UE.plugins["template"] = function() {
+  UE.commands["template"] = {
+    execCommand: function(cmd, obj) {
+      obj.html && this.execCommand("inserthtml", obj.html);
+    }
+  };
+  this.addListener("click", function(type, evt) {
+    var el = evt.target || evt.srcElement,
+      range = this.selection.getRange();
+    var tnode = domUtils.findParent(
+      el,
+      function(node) {
+        if (node.className && domUtils.hasClass(node, "ue_t")) {
+          return node;
+        }
+      },
+      true
+    );
+    tnode && range.selectNode(tnode).shrinkBoundary().select();
+  });
+  this.addListener("keydown", function(type, evt) {
+    var range = this.selection.getRange();
+    if (!range.collapsed) {
+      if (!evt.ctrlKey && !evt.metaKey && !evt.shiftKey && !evt.altKey) {
+        var tnode = domUtils.findParent(
+          range.startContainer,
+          function(node) {
+            if (node.className && domUtils.hasClass(node, "ue_t")) {
+              return node;
+            }
+          },
+          true
+        );
+        if (tnode) {
+          domUtils.removeClasses(tnode, ["ue_t"]);
+        }
+      }
+    }
+  });
+};
+
+
+// plugins/autoupload.js
+/**
+ * @description
+ * 1.拖放文件到编辑区域，自动上传并插入到选区
+ * 2.插入粘贴板的图片，自动上传并插入到选区
+ * @author Jinqn
+ * @date 2013-10-14
+ */
+UE.plugin.register("autoupload", function() {
+  function sendAndInsertFile(file, editor) {
+    var me = editor;
+    //模拟数据
+    var fieldName,
+      urlPrefix,
+      maxSize,
+      allowFiles,
+      actionUrl,
+      loadingHtml,
+      errorHandler,
+      successHandler,
+      filetype = /image\/\w+/i.test(file.type) ? "image" : "file",
+      loadingId = "loading_" + (+new Date()).toString(36);
+
+    fieldName = me.getOpt(filetype + "FieldName");
+    urlPrefix = me.getOpt(filetype + "UrlPrefix");
+    maxSize = me.getOpt(filetype + "MaxSize");
+    allowFiles = me.getOpt(filetype + "AllowFiles");
+    actionUrl = me.getActionUrl(me.getOpt(filetype + "ActionName"));
+    errorHandler = function(title) {
+      var loader = me.document.getElementById(loadingId);
+      loader && domUtils.remove(loader);
+      me.fireEvent("showmessage", {
+        id: loadingId,
+        content: title,
+        type: "error",
+        timeout: 4000
+      });
+    };
+
+    if (filetype == "image") {
+      loadingHtml =
+        '<img class="loadingclass" id="' +
+        loadingId +
+        '" src="' +
+        me.options.themePath +
+        me.options.theme +
+        '/images/spacer.gif">';
+      successHandler = function(data) {
+        var link = urlPrefix + data.url,
+          loader = me.document.getElementById(loadingId);
+        if (loader) {
+          domUtils.removeClasses(loader, "loadingclass");
+          loader.setAttribute("src", link);
+          loader.setAttribute("_src", link);
+          loader.setAttribute("alt", data.original || "");
+          loader.removeAttribute("id");
+          me.trigger("contentchange", loader);
+        }
+      };
+    } else {
+      loadingHtml =
+        "<p>" +
+        '<img class="loadingclass" id="' +
+        loadingId +
+        '" src="' +
+        me.options.themePath +
+        me.options.theme +
+        '/images/spacer.gif">' +
+        "</p>";
+      successHandler = function(data) {
+        var link = urlPrefix + data.url,
+          loader = me.document.getElementById(loadingId);
+
+        var rng = me.selection.getRange(),
+          bk = rng.createBookmark();
+        rng.selectNode(loader).select();
+        me.execCommand("insertfile", { url: link });
+        rng.moveToBookmark(bk).select();
+      };
+    }
+
+    /* 插入loading的占位符 */
+    me.execCommand("inserthtml", loadingHtml);
+    /* 判断后端配置是否没有加载成功 */
+    if (!me.getOpt(filetype + "ActionName")) {
+      errorHandler(me.getLang("autoupload.errorLoadConfig"));
+      return;
+    }
+    /* 判断文件大小是否超出限制 */
+    if (file.size > maxSize) {
+      errorHandler(me.getLang("autoupload.exceedSizeError"));
+      return;
+    }
+    /* 判断文件格式是否超出允许 */
+    var fileext = file.name ? file.name.substr(file.name.lastIndexOf(".")) : "";
+    if (
+      (fileext && filetype != "image") ||
+      (allowFiles &&
+        (allowFiles.join("") + ".").indexOf(fileext.toLowerCase() + ".") == -1)
+    ) {
+      errorHandler(me.getLang("autoupload.exceedTypeError"));
+      return;
+    }
+
+    /* 创建Ajax并提交 */
+    var xhr = new XMLHttpRequest(),
+      fd = new FormData(),
+      params = utils.serializeParam(me.queryCommandValue("serverparam")) || "",
+      url = utils.formatUrl(
+        actionUrl + (actionUrl.indexOf("?") == -1 ? "?" : "&") + params
+      );
+
+    fd.append(
+      fieldName,
+      file,
+      file.name || "blob." + file.type.substr("image/".length)
+    );
+    fd.append("type", "ajax");
+    xhr.open("post", url, true);
+    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+    xhr.addEventListener("load", function(e) {
+      try {
+        var json = new Function("return " + utils.trim(e.target.response))();
+        if (json.state == "SUCCESS" && json.url) {
+          successHandler(json);
+        } else {
+          errorHandler(json.state);
+        }
+      } catch (er) {
+        errorHandler(me.getLang("autoupload.loadError"));
+      }
+    });
+    xhr.send(fd);
+  }
+
+  function getPasteImage(e) {
+    return e.clipboardData &&
+      e.clipboardData.items &&
+      e.clipboardData.items.length == 1 &&
+      /^image\//.test(e.clipboardData.items[0].type)
+      ? e.clipboardData.items
+      : null;
+  }
+  function getDropImage(e) {
+    return e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files : null;
+  }
+
+  return {
+    outputRule: function(root) {
+      utils.each(root.getNodesByTagName("img"), function(n) {
+        if (/\b(loaderrorclass)|(bloaderrorclass)\b/.test(n.getAttr("class"))) {
+          n.parentNode.removeChild(n);
+        }
+      });
+      utils.each(root.getNodesByTagName("p"), function(n) {
+        if (/\bloadpara\b/.test(n.getAttr("class"))) {
+          n.parentNode.removeChild(n);
+        }
+      });
+    },
+    bindEvents: {
+      defaultOptions: {
+        //默认间隔时间
+        enableDragUpload: true,
+        enablePasteUpload: true
+      },
+      //插入粘贴板的图片，拖放插入图片
+      ready: function(e) {
+        var me = this;
+        if (window.FormData && window.FileReader) {
+          var handler = function(e) {
+            var hasImg = false,
+              items;
+            //获取粘贴板文件列表或者拖放文件列表
+            items = e.type == "paste" ? getPasteImage(e) : getDropImage(e);
+            if (items) {
+              var len = items.length,
+                file;
+              while (len--) {
+                file = items[len];
+                if (file.getAsFile) file = file.getAsFile();
+                if (file && file.size > 0) {
+                  sendAndInsertFile(file, me);
+                  hasImg = true;
+                }
+              }
+              hasImg && e.preventDefault();
+            }
+          };
+
+          if (me.getOpt("enablePasteUpload") !== false) {
+            domUtils.on(me.body, "paste ", handler);
+          }
+          if (me.getOpt("enableDragUpload") !== false) {
+            domUtils.on(me.body, "drop", handler);
+            //取消拖放图片时出现的文字光标位置提示
+            domUtils.on(me.body, "dragover", function(e) {
+              if (e.dataTransfer.types[0] == "Files") {
+                e.preventDefault();
+              }
+            });
+          } else {
+            if (browser.gecko) {
+              domUtils.on(me.body, "drop", function(e) {
+                if (getDropImage(e)) {
+                  e.preventDefault();
+                }
+              });
+            }
+          }
+
+          //设置loading的样式
+          utils.cssRule(
+            "loading",
+            ".loadingclass{display:inline-block;cursor:default;background: url('" +
+              this.options.themePath +
+              this.options.theme +
+              "/images/loading.gif') no-repeat center center transparent;border-radius:3px;outline:1px solid #EEE;margin-left:1px;height:22px;width:22px;}\n" +
+              ".loaderrorclass{display:inline-block;cursor:default;background: url('" +
+              this.options.themePath +
+              this.options.theme +
+              "/images/loaderror.png') no-repeat center center transparent;border-radius:3px;outline:1px solid #EEE;margin-right:1px;height:22px;width:22px;" +
+              "}",
+            this.document
+          );
+        }
+      }
+    }
+  };
+});
+
+
+// plugins/section.js
+/**
+ * 目录大纲支持插件
+ * @file
+ * @since 1.3.0
+ */
+UE.plugin.register("section", function() {
+  /* 目录节点对象 */
+  function Section(option) {
+    this.tag = "";
+    (this.level = -1), (this.dom = null);
+    this.nextSection = null;
+    this.previousSection = null;
+    this.parentSection = null;
+    this.startAddress = [];
+    this.endAddress = [];
+    this.children = [];
+  }
+  function getSection(option) {
+    var section = new Section();
+    return utils.extend(section, option);
+  }
+  function getNodeFromAddress(startAddress, root) {
+    var current = root;
+    for (var i = 0; i < startAddress.length; i++) {
+      if (!current.childNodes) return null;
+      current = current.childNodes[startAddress[i]];
+    }
+    return current;
+  }
+
+  var me = this;
+
+  return {
+    bindMultiEvents: {
+      type: "aftersetcontent afterscencerestore",
+      handler: function() {
+        me.fireEvent("updateSections");
+      }
+    },
+    bindEvents: {
+      /* 初始化、拖拽、粘贴、执行setcontent之后 */
+      ready: function() {
+        me.fireEvent("updateSections");
+        domUtils.on(me.body, "drop paste", function() {
+          me.fireEvent("updateSections");
+        });
+      },
+      /* 执行paragraph命令之后 */
+      afterexeccommand: function(type, cmd) {
+        if (cmd == "paragraph") {
+          me.fireEvent("updateSections");
+        }
+      },
+      /* 部分键盘操作，触发updateSections事件 */
+      keyup: function(type, e) {
+        var me = this,
+          range = me.selection.getRange();
+        if (range.collapsed != true) {
+          me.fireEvent("updateSections");
+        } else {
+          var keyCode = e.keyCode || e.which;
+          if (keyCode == 13 || keyCode == 8 || keyCode == 46) {
+            me.fireEvent("updateSections");
+          }
+        }
+      }
+    },
+    commands: {
+      getsections: {
+        execCommand: function(cmd, levels) {
+          var levelFn = levels || ["h1", "h2", "h3", "h4", "h5", "h6"];
+
+          for (var i = 0; i < levelFn.length; i++) {
+            if (typeof levelFn[i] == "string") {
+              levelFn[i] = (function(fn) {
+                return function(node) {
+                  return node.tagName == fn.toUpperCase();
+                };
+              })(levelFn[i]);
+            } else if (typeof levelFn[i] != "function") {
+              levelFn[i] = function(node) {
+                return null;
+              };
+            }
+          }
+          function getSectionLevel(node) {
+            for (var i = 0; i < levelFn.length; i++) {
+              if (levelFn[i](node)) return i;
+            }
+            return -1;
+          }
+
+          var me = this,
+            Directory = getSection({ level: -1, title: "root" }),
+            previous = Directory;
+
+          function traversal(node, Directory) {
+            var level,
+              tmpSection = null,
+              parent,
+              child,
+              children = node.childNodes;
+            for (var i = 0, len = children.length; i < len; i++) {
+              child = children[i];
+              level = getSectionLevel(child);
+              if (level >= 0) {
+                var address = me.selection
+                  .getRange()
+                  .selectNode(child)
+                  .createAddress(true).startAddress,
+                  current = getSection({
+                    tag: child.tagName,
+                    title: child.innerText || child.textContent || "",
+                    level: level,
+                    dom: child,
+                    startAddress: utils.clone(address, []),
+                    endAddress: utils.clone(address, []),
+                    children: []
+                  });
+                previous.nextSection = current;
+                current.previousSection = previous;
+                parent = previous;
+                while (level <= parent.level) {
+                  parent = parent.parentSection;
+                }
+                current.parentSection = parent;
+                parent.children.push(current);
+                tmpSection = previous = current;
+              } else {
+                child.nodeType === 1 && traversal(child, Directory);
+                tmpSection &&
+                  tmpSection.endAddress[tmpSection.endAddress.length - 1]++;
+              }
+            }
+          }
+          traversal(me.body, Directory);
+          return Directory;
+        },
+        notNeedUndo: true
+      },
+      movesection: {
+        execCommand: function(cmd, sourceSection, targetSection, isAfter) {
+          var me = this,
+            targetAddress,
+            target;
+
+          if (!sourceSection || !targetSection || targetSection.level == -1)
+            return;
+
+          targetAddress = isAfter
+            ? targetSection.endAddress
+            : targetSection.startAddress;
+          target = getNodeFromAddress(targetAddress, me.body);
+
+          /* 判断目标地址是否被源章节包含 */
+          if (
+            !targetAddress ||
+            !target ||
+            isContainsAddress(
+              sourceSection.startAddress,
+              sourceSection.endAddress,
+              targetAddress
+            )
+          )
+            return;
+
+          var startNode = getNodeFromAddress(
+            sourceSection.startAddress,
+            me.body
+          ),
+            endNode = getNodeFromAddress(sourceSection.endAddress, me.body),
+            current,
+            nextNode;
+
+          if (isAfter) {
+            current = endNode;
+            while (
+              current &&
+              !(
+                domUtils.getPosition(startNode, current) &
+                domUtils.POSITION_FOLLOWING
+              )
+            ) {
+              nextNode = current.previousSibling;
+              domUtils.insertAfter(target, current);
+              if (current == startNode) break;
+              current = nextNode;
+            }
+          } else {
+            current = startNode;
+            while (
+              current &&
+              !(
+                domUtils.getPosition(current, endNode) &
+                domUtils.POSITION_FOLLOWING
+              )
+            ) {
+              nextNode = current.nextSibling;
+              target.parentNode.insertBefore(current, target);
+              if (current == endNode) break;
+              current = nextNode;
+            }
+          }
+
+          me.fireEvent("updateSections");
+
+          /* 获取地址的包含关系 */
+          function isContainsAddress(startAddress, endAddress, addressTarget) {
+            var isAfterStartAddress = false,
+              isBeforeEndAddress = false;
+            for (var i = 0; i < startAddress.length; i++) {
+              if (i >= addressTarget.length) break;
+              if (addressTarget[i] > startAddress[i]) {
+                isAfterStartAddress = true;
+                break;
+              } else if (addressTarget[i] < startAddress[i]) {
+                break;
+              }
+            }
+            for (var i = 0; i < endAddress.length; i++) {
+              if (i >= addressTarget.length) break;
+              if (addressTarget[i] < startAddress[i]) {
+                isBeforeEndAddress = true;
+                break;
+              } else if (addressTarget[i] > startAddress[i]) {
+                break;
+              }
+            }
+            return isAfterStartAddress && isBeforeEndAddress;
+          }
+        }
+      },
+      deletesection: {
+        execCommand: function(cmd, section, keepChildren) {
+          var me = this;
+
+          if (!section) return;
+
+          function getNodeFromAddress(startAddress) {
+            var current = me.body;
+            for (var i = 0; i < startAddress.length; i++) {
+              if (!current.childNodes) return null;
+              current = current.childNodes[startAddress[i]];
+            }
+            return current;
+          }
+
+          var startNode = getNodeFromAddress(section.startAddress),
+            endNode = getNodeFromAddress(section.endAddress),
+            current = startNode,
+            nextNode;
+
+          if (!keepChildren) {
+            while (
+              current &&
+              domUtils.inDoc(endNode, me.document) &&
+              !(
+                domUtils.getPosition(current, endNode) &
+                domUtils.POSITION_FOLLOWING
+              )
+            ) {
+              nextNode = current.nextSibling;
+              domUtils.remove(current);
+              current = nextNode;
+            }
+          } else {
+            domUtils.remove(current);
+          }
+
+          me.fireEvent("updateSections");
+        }
+      },
+      selectsection: {
+        execCommand: function(cmd, section) {
+          if (!section && !section.dom) return false;
+          var me = this,
+            range = me.selection.getRange(),
+            address = {
+              startAddress: utils.clone(section.startAddress, []),
+              endAddress: utils.clone(section.endAddress, [])
+            };
+          address.endAddress[address.endAddress.length - 1]++;
+          range.moveToAddress(address).select().scrollToView();
+          return true;
+        },
+        notNeedUndo: true
+      },
+      scrolltosection: {
+        execCommand: function(cmd, section) {
+          if (!section && !section.dom) return false;
+          var me = this,
+            range = me.selection.getRange(),
+            address = {
+              startAddress: section.startAddress,
+              endAddress: section.endAddress
+            };
+          address.endAddress[address.endAddress.length - 1]++;
+          range.moveToAddress(address).scrollToView();
+          return true;
+        },
+        notNeedUndo: true
+      }
+    }
+  };
+});
+
+
+// plugins/simpleupload.js
+/**
+ * @description
+ * 简单上传:点击按钮,直接选择文件上传
+ * @author Jinqn
+ * @date 2014-03-31
+ */
+UE.plugin.register("simpleupload", function() {
+  var me = this,
+    isLoaded = false,
+    containerBtn;
+
+  function initUploadBtn() {
+    var w = containerBtn.offsetWidth || 20,
+      h = containerBtn.offsetHeight || 20,
+      btnIframe = document.createElement("iframe"),
+      btnStyle =
+        "display:block;width:" +
+        w +
+        "px;height:" +
+        h +
+        "px;overflow:hidden;border:0;margin:0;padding:0;position:absolute;top:0;left:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;cursor:pointer;";
+
+    domUtils.on(btnIframe, "load", function() {
+      var timestrap = (+new Date()).toString(36),
+        wrapper,
+        btnIframeDoc,
+        btnIframeBody;
+
+      btnIframeDoc =
+        btnIframe.contentDocument || btnIframe.contentWindow.document;
+      btnIframeBody = btnIframeDoc.body;
+      wrapper = btnIframeDoc.createElement("div");
+
+      wrapper.innerHTML =
+        '<form id="edui_form_' +
+        timestrap +
+        '" target="edui_iframe_' +
+        timestrap +
+        '" method="POST" enctype="multipart/form-data" action="' +
+        me.getOpt("serverUrl") +
+        '" ' +
+        'style="' +
+        btnStyle +
+        '">' +
+        '<input id="edui_input_' +
+        timestrap +
+        '" type="file" accept="image/*" name="' +
+        me.options.imageFieldName +
+        '" ' +
+        'style="' +
+        btnStyle +
+        '">' +
+        "</form>" +
+        '<iframe id="edui_iframe_' +
+        timestrap +
+        '" name="edui_iframe_' +
+        timestrap +
+        '" style="display:none;width:0;height:0;border:0;margin:0;padding:0;position:absolute;"></iframe>';
+
+      wrapper.className = "edui-" + me.options.theme;
+      wrapper.id = me.ui.id + "_iframeupload";
+      btnIframeBody.style.cssText = btnStyle;
+      btnIframeBody.style.width = w + "px";
+      btnIframeBody.style.height = h + "px";
+      btnIframeBody.appendChild(wrapper);
+
+      if (btnIframeBody.parentNode) {
+        btnIframeBody.parentNode.style.width = w + "px";
+        btnIframeBody.parentNode.style.height = w + "px";
+      }
+
+      var form = btnIframeDoc.getElementById("edui_form_" + timestrap);
+      var input = btnIframeDoc.getElementById("edui_input_" + timestrap);
+      var iframe = btnIframeDoc.getElementById("edui_iframe_" + timestrap);
+
+      domUtils.on(input, "change", function() {
+        if (!input.value) return;
+        var loadingId = "loading_" + (+new Date()).toString(36);
+        var params =
+          utils.serializeParam(me.queryCommandValue("serverparam")) || "";
+
+        var imageActionUrl = me.getActionUrl(me.getOpt("imageActionName"));
+        var allowFiles = me.getOpt("imageAllowFiles");
+
+        me.focus();
+        me.execCommand(
+          "inserthtml",
+          '<img class="loadingclass" id="' +
+            loadingId +
+            '" src="' +
+            me.options.themePath +
+            me.options.theme +
+            '/images/spacer.gif">'
+        );
+
+        function callback() {
+          try {
+            var link,
+              json,
+              loader,
+              body = (iframe.contentDocument || iframe.contentWindow.document)
+                .body,
+              result = body.innerText || body.textContent || "";
+            json = new Function("return " + result)();
+            link = me.options.imageUrlPrefix + json.url;
+            if (json.state == "SUCCESS" && json.url) {
+              loader = me.document.getElementById(loadingId);
+              domUtils.removeClasses(loader, "loadingclass");
+              loader.setAttribute("src", link);
+              loader.setAttribute("_src", link);
+              loader.setAttribute("alt", json.original || "");
+              loader.removeAttribute("id");
+              me.fireEvent("contentchange");
+            } else {
+              showErrorLoader && showErrorLoader(json.state);
+            }
+          } catch (er) {
+            showErrorLoader &&
+              showErrorLoader(me.getLang("simpleupload.loadError"));
+          }
+          form.reset();
+          domUtils.un(iframe, "load", callback);
+        }
+        function showErrorLoader(title) {
+          if (loadingId) {
+            var loader = me.document.getElementById(loadingId);
+            loader && domUtils.remove(loader);
+            me.fireEvent("showmessage", {
+              id: loadingId,
+              content: title,
+              type: "error",
+              timeout: 4000
+            });
+          }
+        }
+
+        /* 判断后端配置是否没有加载成功 */
+        if (!me.getOpt("imageActionName")) {
+          errorHandler(me.getLang("autoupload.errorLoadConfig"));
+          return;
+        }
+        // 判断文件格式是否错误
+        var filename = input.value,
+          fileext = filename ? filename.substr(filename.lastIndexOf(".")) : "";
+        if (
+          !fileext ||
+          (allowFiles &&
+            (allowFiles.join("") + ".").indexOf(fileext.toLowerCase() + ".") ==
+              -1)
+        ) {
+          showErrorLoader(me.getLang("simpleupload.exceedTypeError"));
+          return;
+        }
+
+        domUtils.on(iframe, "load", callback);
+        form.action = utils.formatUrl(
+          imageActionUrl +
+            (imageActionUrl.indexOf("?") == -1 ? "?" : "&") +
+            params
+        );
+        form.submit();
+      });
+
+      var stateTimer;
+      me.addListener("selectionchange", function() {
+        clearTimeout(stateTimer);
+        stateTimer = setTimeout(function() {
+          var state = me.queryCommandState("simpleupload");
+          if (state == -1) {
+            input.disabled = "disabled";
+          } else {
+            input.disabled = false;
+          }
+        }, 400);
+      });
+      isLoaded = true;
+    });
+
+    btnIframe.style.cssText = btnStyle;
+    containerBtn.appendChild(btnIframe);
+  }
+
+  return {
+    bindEvents: {
+      ready: function() {
+        //设置loading的样式
+        utils.cssRule(
+          "loading",
+          ".loadingclass{display:inline-block;cursor:default;background: url('" +
+            this.options.themePath +
+            this.options.theme +
+            "/images/loading.gif') no-repeat center center transparent;border-radius:3px;outline:1px solid #EEE;margin-right:1px;height:22px;width:22px;}\n" +
+            ".loaderrorclass{display:inline-block;cursor:default;background: url('" +
+            this.options.themePath +
+            this.options.theme +
+            "/images/loaderror.png') no-repeat center center transparent;border-radius:3px;outline:1px solid #EEE;margin-right:1px;height:22px;width:22px;" +
+            "}",
+          this.document
+        );
+      },
+      /* 初始化简单上传按钮 */
+      simpleuploadbtnready: function(type, container) {
+        containerBtn = container;
+        me.afterConfigReady(initUploadBtn);
+      }
+    },
+    outputRule: function(root) {
+      utils.each(root.getNodesByTagName("img"), function(n) {
+        if (/\b(loaderrorclass)|(bloaderrorclass)\b/.test(n.getAttr("class"))) {
+          n.parentNode.removeChild(n);
+        }
+      });
+    },
+    commands: {
+      simpleupload: {
+        queryCommandState: function() {
+          return isLoaded ? 0 : -1;
+        }
+      }
+    }
+  };
+});
+
+
+// plugins/serverparam.js
+/**
+ * 服务器提交的额外参数列表设置插件
+ * @file
+ * @since 1.2.6.1
+ */
+UE.plugin.register("serverparam", function() {
+  var me = this,
+    serverParam = {};
+
+  return {
+    commands: {
+      /**
+             * 修改服务器提交的额外参数列表,清除所有项
+             * @command serverparam
+             * @method execCommand
+             * @param { String } cmd 命令字符串
+             * @example
+             * ```javascript
+             * editor.execCommand('serverparam');
+             * editor.queryCommandValue('serverparam'); //返回空
+             * ```
+             */
+      /**
+             * 修改服务器提交的额外参数列表,删除指定项
+             * @command serverparam
+             * @method execCommand
+             * @param { String } cmd 命令字符串
+             * @param { String } key 要清除的属性
+             * @example
+             * ```javascript
+             * editor.execCommand('serverparam', 'name'); //删除属性name
+             * ```
+             */
+      /**
+             * 修改服务器提交的额外参数列表,使用键值添加项
+             * @command serverparam
+             * @method execCommand
+             * @param { String } cmd 命令字符串
+             * @param { String } key 要添加的属性
+             * @param { String } value 要添加属性的值
+             * @example
+             * ```javascript
+             * editor.execCommand('serverparam', 'name', 'hello');
+             * editor.queryCommandValue('serverparam'); //返回对象 {'name': 'hello'}
+             * ```
+             */
+      /**
+             * 修改服务器提交的额外参数列表,传入键值对对象添加多项
+             * @command serverparam
+             * @method execCommand
+             * @param { String } cmd 命令字符串
+             * @param { Object } key 传入的键值对对象
+             * @example
+             * ```javascript
+             * editor.execCommand('serverparam', {'name': 'hello'});
+             * editor.queryCommandValue('serverparam'); //返回对象 {'name': 'hello'}
+             * ```
+             */
+      /**
+             * 修改服务器提交的额外参数列表,使用自定义函数添加多项
+             * @command serverparam
+             * @method execCommand
+             * @param { String } cmd 命令字符串
+             * @param { Function } key 自定义获取参数的函数
+             * @example
+             * ```javascript
+             * editor.execCommand('serverparam', function(editor){
+             *     return {'key': 'value'};
+             * });
+             * editor.queryCommandValue('serverparam'); //返回对象 {'key': 'value'}
+             * ```
+             */
+
+      /**
+             * 获取服务器提交的额外参数列表
+             * @command serverparam
+             * @method queryCommandValue
+             * @param { String } cmd 命令字符串
+             * @example
+             * ```javascript
+             * editor.queryCommandValue( 'serverparam' ); //返回对象 {'key': 'value'}
+             * ```
+             */
+      serverparam: {
+        execCommand: function(cmd, key, value) {
+          if (key === undefined || key === null) {
+            //不传参数,清空列表
+            serverParam = {};
+          } else if (utils.isString(key)) {
+            //传入键值
+            if (value === undefined || value === null) {
+              delete serverParam[key];
+            } else {
+              serverParam[key] = value;
+            }
+          } else if (utils.isObject(key)) {
+            //传入对象,覆盖列表项
+            utils.extend(serverParam, key, false);
+          } else if (utils.isFunction(key)) {
+            //传入函数,添加列表项
+            utils.extend(serverParam, key(), false);
+          }
+        },
+        queryCommandValue: function() {
+          return serverParam || {};
+        }
+      }
+    }
+  };
+});
+
+
+// plugins/insertfile.js
+/**
+ * 插入附件
+ */
+UE.plugin.register("insertfile", function() {
+  var me = this;
+
+  function getFileIcon(url) {
+    var ext = url.substr(url.lastIndexOf(".") + 1).toLowerCase(),
+      maps = {
+        rar: "icon_rar.gif",
+        zip: "icon_rar.gif",
+        tar: "icon_rar.gif",
+        gz: "icon_rar.gif",
+        bz2: "icon_rar.gif",
+        doc: "icon_doc.gif",
+        docx: "icon_doc.gif",
+        pdf: "icon_pdf.gif",
+        mp3: "icon_mp3.gif",
+        xls: "icon_xls.gif",
+        chm: "icon_chm.gif",
+        ppt: "icon_ppt.gif",
+        pptx: "icon_ppt.gif",
+        avi: "icon_mv.gif",
+        rmvb: "icon_mv.gif",
+        wmv: "icon_mv.gif",
+        flv: "icon_mv.gif",
+        swf: "icon_mv.gif",
+        rm: "icon_mv.gif",
+        exe: "icon_exe.gif",
+        psd: "icon_psd.gif",
+        txt: "icon_txt.gif",
+        jpg: "icon_jpg.gif",
+        png: "icon_jpg.gif",
+        jpeg: "icon_jpg.gif",
+        gif: "icon_jpg.gif",
+        ico: "icon_jpg.gif",
+        bmp: "icon_jpg.gif"
+      };
+    return maps[ext] ? maps[ext] : maps["txt"];
+  }
+
+  return {
+    commands: {
+      insertfile: {
+        execCommand: function(command, filelist) {
+          filelist = utils.isArray(filelist) ? filelist : [filelist];
+
+          if (me.fireEvent("beforeinsertfile", filelist) === true) {
+            return;
+          }
+
+          var i,
+            item,
+            icon,
+            title,
+            html = "",
+            URL = me.getOpt("UEDITOR_HOME_URL"),
+            iconDir =
+              URL +
+              (URL.substr(URL.length - 1) == "/" ? "" : "/") +
+              "dialogs/attachment/fileTypeImages/";
+          for (i = 0; i < filelist.length; i++) {
+            item = filelist[i];
+            icon = iconDir + getFileIcon(item.url);
+            title =
+              item.title || item.url.substr(item.url.lastIndexOf("/") + 1);
+            html +=
+              '<p style="line-height: 16px;">' +
+              '<img style="vertical-align: middle; margin-right: 2px;" src="' +
+              icon +
+              '" _src="' +
+              icon +
+              '" />' +
+              '<a style="font-size:12px; color:#0066cc;" href="' +
+              item.url +
+              '" title="' +
+              title +
+              '">' +
+              title +
+              "</a>" +
+              "</p>";
+          }
+          me.execCommand("insertHtml", html);
+
+          me.fireEvent("afterinsertfile", filelist);
+        }
+      }
+    }
+  };
+});
+
+
+// ui/ui.js
+var baidu = baidu || {};
+baidu.editor = baidu.editor || {};
+UE.ui = baidu.editor.ui = {};
+
+
+// ui/uiutils.js
+(function() {
+  var browser = baidu.editor.browser,
+    domUtils = baidu.editor.dom.domUtils;
+
+  var magic = "$EDITORUI";
+  var root = (window[magic] = {});
+  var uidMagic = "ID" + magic;
+  var uidCount = 0;
+
+  var uiUtils = (baidu.editor.ui.uiUtils = {
+    uid: function(obj) {
+      return obj ? obj[uidMagic] || (obj[uidMagic] = ++uidCount) : ++uidCount;
+    },
+    hook: function(fn, callback) {
+      var dg;
+      if (fn && fn._callbacks) {
+        dg = fn;
+      } else {
+        dg = function() {
+          var q;
+          if (fn) {
+            q = fn.apply(this, arguments);
+          }
+          var callbacks = dg._callbacks;
+          var k = callbacks.length;
+          while (k--) {
+            var r = callbacks[k].apply(this, arguments);
+            if (q === undefined) {
+              q = r;
+            }
+          }
+          return q;
+        };
+        dg._callbacks = [];
+      }
+      dg._callbacks.push(callback);
+      return dg;
+    },
+    createElementByHtml: function(html) {
+      var el = document.createElement("div");
+      el.innerHTML = html;
+      el = el.firstChild;
+      el.parentNode.removeChild(el);
+      return el;
+    },
+    getViewportElement: function() {
+      return browser.ie && browser.quirks
+        ? document.body
+        : document.documentElement;
+    },
+    getClientRect: function(element) {
+      var bcr;
+      //trace  IE6下在控制编辑器显隐时可能会报错，catch一下
+      try {
+        bcr = element.getBoundingClientRect();
+      } catch (e) {
+        bcr = { left: 0, top: 0, height: 0, width: 0 };
+      }
+      var rect = {
+        left: Math.round(bcr.left),
+        top: Math.round(bcr.top),
+        height: Math.round(bcr.bottom - bcr.top),
+        width: Math.round(bcr.right - bcr.left)
+      };
+      var doc;
+      while (
+        (doc = element.ownerDocument) !== document &&
+        (element = domUtils.getWindow(doc).frameElement)
+      ) {
+        bcr = element.getBoundingClientRect();
+        rect.left += bcr.left;
+        rect.top += bcr.top;
+      }
+      rect.bottom = rect.top + rect.height;
+      rect.right = rect.left + rect.width;
+      return rect;
+    },
+    getViewportRect: function() {
+      var viewportEl = uiUtils.getViewportElement();
+      var width = (window.innerWidth || viewportEl.clientWidth) | 0;
+      var height = (window.innerHeight || viewportEl.clientHeight) | 0;
+      return {
+        left: 0,
+        top: 0,
+        height: height,
+        width: width,
+        bottom: height,
+        right: width
+      };
+    },
+    setViewportOffset: function(element, offset) {
+      var rect;
+      var fixedLayer = uiUtils.getFixedLayer();
+      if (element.parentNode === fixedLayer) {
+        element.style.left = offset.left + "px";
+        element.style.top = offset.top + "px";
+      } else {
+        domUtils.setViewportOffset(element, offset);
+      }
+    },
+    getEventOffset: function(evt) {
+      var el = evt.target || evt.srcElement;
+      var rect = uiUtils.getClientRect(el);
+      var offset = uiUtils.getViewportOffsetByEvent(evt);
+      return {
+        left: offset.left - rect.left,
+        top: offset.top - rect.top
+      };
+    },
+    getViewportOffsetByEvent: function(evt) {
+      var el = evt.target || evt.srcElement;
+      var frameEl = domUtils.getWindow(el).frameElement;
+      var offset = {
+        left: evt.clientX,
+        top: evt.clientY
+      };
+      if (frameEl && el.ownerDocument !== document) {
+        var rect = uiUtils.getClientRect(frameEl);
+        offset.left += rect.left;
+        offset.top += rect.top;
+      }
+      return offset;
+    },
+    setGlobal: function(id, obj) {
+      root[id] = obj;
+      return magic + '["' + id + '"]';
+    },
+    unsetGlobal: function(id) {
+      delete root[id];
+    },
+    copyAttributes: function(tgt, src) {
+      var attributes = src.attributes;
+      var k = attributes.length;
+      while (k--) {
+        var attrNode = attributes[k];
+        if (
+          attrNode.nodeName != "style" &&
+          attrNode.nodeName != "class" &&
+          (!browser.ie || attrNode.specified)
+        ) {
+          tgt.setAttribute(attrNode.nodeName, attrNode.nodeValue);
+        }
+      }
+      if (src.className) {
+        domUtils.addClass(tgt, src.className);
+      }
+      if (src.style.cssText) {
+        tgt.style.cssText += ";" + src.style.cssText;
+      }
+    },
+    removeStyle: function(el, styleName) {
+      if (el.style.removeProperty) {
+        el.style.removeProperty(styleName);
+      } else if (el.style.removeAttribute) {
+        el.style.removeAttribute(styleName);
+      } else throw "";
+    },
+    contains: function(elA, elB) {
+      return (
+        elA &&
+        elB &&
+        (elA === elB
+          ? false
+          : elA.contains
+            ? elA.contains(elB)
+            : elA.compareDocumentPosition(elB) & 16)
+      );
+    },
+    startDrag: function(evt, callbacks, doc) {
+      var doc = doc || document;
+      var startX = evt.clientX;
+      var startY = evt.clientY;
+      function handleMouseMove(evt) {
+        var x = evt.clientX - startX;
+        var y = evt.clientY - startY;
+        callbacks.ondragmove(x, y, evt);
+        if (evt.stopPropagation) {
+          evt.stopPropagation();
+        } else {
+          evt.cancelBubble = true;
+        }
+      }
+      if (doc.addEventListener) {
+        function handleMouseUp(evt) {
+          doc.removeEventListener("mousemove", handleMouseMove, true);
+          doc.removeEventListener("mouseup", handleMouseUp, true);
+          window.removeEventListener("mouseup", handleMouseUp, true);
+          callbacks.ondragstop();
+        }
+        doc.addEventListener("mousemove", handleMouseMove, true);
+        doc.addEventListener("mouseup", handleMouseUp, true);
+        window.addEventListener("mouseup", handleMouseUp, true);
+
+        evt.preventDefault();
+      } else {
+        var elm = evt.srcElement;
+        elm.setCapture();
+        function releaseCaptrue() {
+          elm.releaseCapture();
+          elm.detachEvent("onmousemove", handleMouseMove);
+          elm.detachEvent("onmouseup", releaseCaptrue);
+          elm.detachEvent("onlosecaptrue", releaseCaptrue);
+          callbacks.ondragstop();
+        }
+        elm.attachEvent("onmousemove", handleMouseMove);
+        elm.attachEvent("onmouseup", releaseCaptrue);
+        elm.attachEvent("onlosecaptrue", releaseCaptrue);
+        evt.returnValue = false;
+      }
+      callbacks.ondragstart();
+    },
+    getFixedLayer: function() {
+      var layer = document.getElementById("edui_fixedlayer");
+      if (layer == null) {
+        layer = document.createElement("div");
+        layer.id = "edui_fixedlayer";
+        document.body.appendChild(layer);
+        if (browser.ie && browser.version <= 8) {
+          layer.style.position = "absolute";
+          bindFixedLayer();
+          setTimeout(updateFixedOffset);
+        } else {
+          layer.style.position = "fixed";
+        }
+        layer.style.left = "0";
+        layer.style.top = "0";
+        layer.style.width = "0";
+        layer.style.height = "0";
+        layer.style.margin = "0";
+      }
+      return layer;
+    },
+    makeUnselectable: function(element) {
+      if (browser.opera || (browser.ie && browser.version < 9)) {
+        element.unselectable = "on";
+        if (element.hasChildNodes()) {
+          for (var i = 0; i < element.childNodes.length; i++) {
+            if (element.childNodes[i].nodeType == 1) {
+              uiUtils.makeUnselectable(element.childNodes[i]);
+            }
+          }
+        }
+      } else {
+        if (element.style.MozUserSelect !== undefined) {
+          element.style.MozUserSelect = "none";
+        } else if (element.style.WebkitUserSelect !== undefined) {
+          element.style.WebkitUserSelect = "none";
+        } else if (element.style.KhtmlUserSelect !== undefined) {
+          element.style.KhtmlUserSelect = "none";
+        }
+      }
+    }
+  });
+  function updateFixedOffset() {
+    var layer = document.getElementById("edui_fixedlayer");
+    uiUtils.setViewportOffset(layer, {
+      left: 0,
+      top: 0
+    });
+    //        layer.style.display = 'none';
+    //        layer.style.display = 'block';
+
+    //#trace: 1354
+    //        setTimeout(updateFixedOffset);
+  }
+  function bindFixedLayer(adjOffset) {
+    domUtils.on(window, "scroll", updateFixedOffset);
+    domUtils.on(
+      window,
+      "resize",
+      baidu.editor.utils.defer(updateFixedOffset, 0, true)
+    );
+  }
+})();
+
+
+// ui/uibase.js
+(function() {
+  var utils = baidu.editor.utils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    EventBase = baidu.editor.EventBase,
+    UIBase = (baidu.editor.ui.UIBase = function() {});
+
+  UIBase.prototype = {
+    className: "",
+    uiName: "",
+    initOptions: function(options) {
+      var me = this;
+      for (var k in options) {
+        me[k] = options[k];
+      }
+      this.id = this.id || "edui" + uiUtils.uid();
+    },
+    initUIBase: function() {
+      this._globalKey = utils.unhtml(uiUtils.setGlobal(this.id, this));
+    },
+    render: function(holder) {
+      var html = this.renderHtml();
+      var el = uiUtils.createElementByHtml(html);
+
+      //by xuheng 给每个node添加class
+      var list = domUtils.getElementsByTagName(el, "*");
+      var theme = "edui-" + (this.theme || this.editor.options.theme);
+      var layer = document.getElementById("edui_fixedlayer");
+      for (var i = 0, node; (node = list[i++]); ) {
+        domUtils.addClass(node, theme);
+      }
+      domUtils.addClass(el, theme);
+      if (layer) {
+        layer.className = "";
+        domUtils.addClass(layer, theme);
+      }
+
+      var seatEl = this.getDom();
+      if (seatEl != null) {
+        seatEl.parentNode.replaceChild(el, seatEl);
+        uiUtils.copyAttributes(el, seatEl);
+      } else {
+        if (typeof holder == "string") {
+          holder = document.getElementById(holder);
+        }
+        holder = holder || uiUtils.getFixedLayer();
+        // console.log('Uibase.render',holder,el);
+        domUtils.addClass(holder, theme);
+        holder.appendChild(el);
+      }
+      this.postRender();
+    },
+    getDom: function(name) {
+      if (!name) {
+        return document.getElementById(this.id);
+      } else {
+        return document.getElementById(this.id + "_" + name);
+      }
+    },
+    postRender: function() {
+      this.fireEvent("postrender");
+    },
+    getHtmlTpl: function() {
+      return "";
+    },
+    formatHtml: function(tpl) {
+      var prefix = "edui-" + this.uiName;
+      return tpl
+        .replace(/##/g, this.id)
+        .replace(/%%-/g, this.uiName ? prefix + "-" : "")
+        .replace(/%%/g, (this.uiName ? prefix : "") + " " + this.className)
+        .replace(/\$\$/g, this._globalKey);
+    },
+    renderHtml: function() {
+      return this.formatHtml(this.getHtmlTpl());
+    },
+    dispose: function() {
+      var box = this.getDom();
+      if (box) baidu.editor.dom.domUtils.remove(box);
+      uiUtils.unsetGlobal(this.id);
+    }
+  };
+  utils.inherits(UIBase, EventBase);
+})();
+
+
+// ui/separator.js
+(function() {
+  var utils = baidu.editor.utils,
+    UIBase = baidu.editor.ui.UIBase,
+    Separator = (baidu.editor.ui.Separator = function(options) {
+      this.initOptions(options);
+      this.initSeparator();
+    });
+  Separator.prototype = {
+    uiName: "separator",
+    initSeparator: function() {
+      this.initUIBase();
+    },
+    getHtmlTpl: function() {
+      return '<div id="##" class="edui-box %%"></div>';
+    }
+  };
+  utils.inherits(Separator, UIBase);
+})();
+
+
+// ui/mask.js
+///import core
+///import uicore
+(function() {
+  var utils = baidu.editor.utils,
+    domUtils = baidu.editor.dom.domUtils,
+    UIBase = baidu.editor.ui.UIBase,
+    uiUtils = baidu.editor.ui.uiUtils;
+
+  var Mask = (baidu.editor.ui.Mask = function(options) {
+    this.initOptions(options);
+    this.initUIBase();
+  });
+  Mask.prototype = {
+    getHtmlTpl: function() {
+      return '<div id="##" class="edui-mask %%" onclick="return $$._onClick(event, this);" onmousedown="return $$._onMouseDown(event, this);"></div>';
+    },
+    postRender: function() {
+      var me = this;
+      domUtils.on(window, "resize", function() {
+        setTimeout(function() {
+          if (!me.isHidden()) {
+            me._fill();
+          }
+        });
+      });
+    },
+    show: function(zIndex) {
+      this._fill();
+      this.getDom().style.display = "";
+      this.getDom().style.zIndex = zIndex;
+    },
+    hide: function() {
+      this.getDom().style.display = "none";
+      this.getDom().style.zIndex = "";
+    },
+    isHidden: function() {
+      return this.getDom().style.display == "none";
+    },
+    _onMouseDown: function() {
+      return false;
+    },
+    _onClick: function(e, target) {
+      this.fireEvent("click", e, target);
+    },
+    _fill: function() {
+      var el = this.getDom();
+      var vpRect = uiUtils.getViewportRect();
+      el.style.width = vpRect.width + "px";
+      el.style.height = vpRect.height + "px";
+    }
+  };
+  utils.inherits(Mask, UIBase);
+})();
+
+
+// ui/popup.js
+///import core
+///import uicore
+(function() {
+  var utils = baidu.editor.utils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    domUtils = baidu.editor.dom.domUtils,
+    UIBase = baidu.editor.ui.UIBase,
+    Popup = (baidu.editor.ui.Popup = function(options) {
+      this.initOptions(options);
+      this.initPopup();
+    });
+
+  var allPopups = [];
+  function closeAllPopup(evt, el) {
+    for (var i = 0; i < allPopups.length; i++) {
+      var pop = allPopups[i];
+      if (!pop.isHidden()) {
+        if (pop.queryAutoHide(el) !== false) {
+          if (
+            evt &&
+            /scroll/gi.test(evt.type) &&
+            pop.className == "edui-wordpastepop"
+          )
+            return;
+          pop.hide();
+        }
+      }
+    }
+
+    if (allPopups.length) pop.editor.fireEvent("afterhidepop");
+  }
+
+  Popup.postHide = closeAllPopup;
+
+  var ANCHOR_CLASSES = [
+    "edui-anchor-topleft",
+    "edui-anchor-topright",
+    "edui-anchor-bottomleft",
+    "edui-anchor-bottomright"
+  ];
+  Popup.prototype = {
+    SHADOW_RADIUS: 5,
+    content: null,
+    _hidden: false,
+    autoRender: true,
+    canSideLeft: true,
+    canSideUp: true,
+    initPopup: function() {
+      this.initUIBase();
+      allPopups.push(this);
+    },
+    getHtmlTpl: function() {
+      return (
+        '<div id="##" class="edui-popup %%" onmousedown="return false;">' +
+        ' <div id="##_body" class="edui-popup-body">' +
+        ' <iframe style="position:absolute;z-index:-1;left:0;top:0;background-color: transparent;" frameborder="0" width="100%" height="100%" src="about:blank"></iframe>' +
+        ' <div class="edui-shadow"></div>' +
+        ' <div id="##_content" class="edui-popup-content">' +
+        this.getContentHtmlTpl() +
+        "  </div>" +
+        " </div>" +
+        "</div>"
+      );
+    },
+    getContentHtmlTpl: function() {
+      if (this.content) {
+        if (typeof this.content == "string") {
+          return this.content;
+        }
+        return this.content.renderHtml();
+      } else {
+        return "";
+      }
+    },
+    _UIBase_postRender: UIBase.prototype.postRender,
+    postRender: function() {
+      if (this.content instanceof UIBase) {
+        this.content.postRender();
+      }
+
+      //捕获鼠标滚轮
+      if (this.captureWheel && !this.captured) {
+        this.captured = true;
+
+        var winHeight =
+          (document.documentElement.clientHeight ||
+            document.body.clientHeight) - 80,
+          _height = this.getDom().offsetHeight,
+          _top = uiUtils.getClientRect(this.combox.getDom()).top,
+          content = this.getDom("content"),
+          ifr = this.getDom("body").getElementsByTagName("iframe"),
+          me = this;
+
+        ifr.length && (ifr = ifr[0]);
+
+        while (_top + _height > winHeight) {
+          _height -= 30;
+        }
+        content.style.height = _height + "px";
+        //同步更改iframe高度
+        ifr && (ifr.style.height = _height + "px");
+
+        //阻止在combox上的鼠标滚轮事件, 防止用户的正常操作被误解
+        domUtils.on(
+            content,
+            "onmousewheel" in document.body ? "mousewheel" : "DOMMouseScroll",
+            function(e) {
+              if (e.preventDefault) {
+                e.preventDefault();
+              } else {
+                e.returnValue = false;
+              }
+
+              if (e.wheelDelta) {
+                content.scrollTop -= e.wheelDelta / 120 * 60;
+              } else {
+                content.scrollTop -= e.detail / -3 * 60;
+              }
+            }
+        );
+      }
+      this.fireEvent("postRenderAfter");
+      this.hide(true);
+      this._UIBase_postRender();
+    },
+    _doAutoRender: function() {
+      if (!this.getDom() && this.autoRender) {
+        this.render();
+      }
+    },
+    mesureSize: function() {
+      var box = this.getDom("content");
+      return uiUtils.getClientRect(box);
+    },
+    fitSize: function() {
+      // console.log('fitSize.popup')
+      if (this.captureWheel && this.sized) {
+        return this.__size;
+      }
+      this.sized = true;
+      var popBodyEl = this.getDom("body");
+      popBodyEl.style.width = "";
+      popBodyEl.style.height = "";
+      var size = this.mesureSize();
+      if (this.captureWheel) {
+        popBodyEl.style.width = -(-20 - size.width) + "px";
+        var height = parseInt(this.getDom("content").style.height, 10);
+        !window.isNaN(height) && (size.height = height);
+      } else {
+        popBodyEl.style.width = size.width + "px";
+      }
+      popBodyEl.style.height = size.height + "px";
+      this.__size = size;
+      this.captureWheel && (this.getDom("content").style.overflow = "auto");
+      return size;
+    },
+    showAnchor: function(element, hoz) {
+      this.showAnchorRect(uiUtils.getClientRect(element), hoz);
+    },
+    showAnchorRect: function(rect, hoz, adj) {
+      this._doAutoRender();
+      var vpRect = uiUtils.getViewportRect();
+      this.getDom().style.visibility = "hidden";
+      this._show();
+      var popSize = this.fitSize();
+
+      var sideLeft, sideUp, left, top;
+      if (hoz) {
+        sideLeft =
+          this.canSideLeft &&
+          (rect.right + popSize.width > vpRect.right &&
+            rect.left > popSize.width);
+        sideUp =
+          this.canSideUp &&
+          (rect.top + popSize.height > vpRect.bottom &&
+            rect.bottom > popSize.height);
+        left = sideLeft ? rect.left - popSize.width : rect.right;
+        top = sideUp ? rect.bottom - popSize.height : rect.top;
+      } else {
+        sideLeft =
+          this.canSideLeft &&
+          (rect.right + popSize.width > vpRect.right &&
+            rect.left > popSize.width);
+        sideUp =
+          this.canSideUp &&
+          (rect.top + popSize.height > vpRect.bottom &&
+            rect.bottom > popSize.height);
+        left = sideLeft ? rect.right - popSize.width : rect.left;
+        top = sideUp ? rect.top - popSize.height : rect.bottom;
+      }
+      if(!sideUp){
+        if(top + popSize.height > vpRect.bottom){
+          top = vpRect.bottom - popSize.height
+        }
+      }
+      // console.log('popup.showAnchorRect', vpRect, rect, hoz, sideUp, sideLeft, left, top);
+
+      var popEl = this.getDom();
+      uiUtils.setViewportOffset(popEl, {
+        left: left,
+        top: top
+      });
+      domUtils.removeClasses(popEl, ANCHOR_CLASSES);
+      popEl.className +=
+        " " + ANCHOR_CLASSES[(sideUp ? 1 : 0) * 2 + (sideLeft ? 1 : 0)];
+      if (this.editor) {
+        popEl.style.zIndex = this.editor.container.style.zIndex * 1 + 10;
+        baidu.editor.ui.uiUtils.getFixedLayer().style.zIndex =
+          popEl.style.zIndex - 1;
+      }
+      this.getDom().style.visibility = "visible";
+    },
+    showAt: function(offset) {
+      var left = offset.left;
+      var top = offset.top;
+      var rect = {
+        left: left,
+        top: top,
+        right: left,
+        bottom: top,
+        height: 0,
+        width: 0
+      };
+      this.showAnchorRect(rect, false, true);
+    },
+    _show: function() {
+      if (this._hidden) {
+        var box = this.getDom();
+        box.style.display = "";
+        this._hidden = false;
+        //                if (box.setActive) {
+        //                    box.setActive();
+        //                }
+        this.fireEvent("show");
+      }
+    },
+    isHidden: function() {
+      return this._hidden;
+    },
+    show: function() {
+      this._doAutoRender();
+      this._show();
+    },
+    hide: function(notNofity) {
+      if (!this._hidden && this.getDom()) {
+        this.getDom().style.display = "none";
+        this._hidden = true;
+        if (!notNofity) {
+          this.fireEvent("hide");
+        }
+      }
+    },
+    queryAutoHide: function(el) {
+      return !el || !uiUtils.contains(this.getDom(), el);
+    }
+  };
+  utils.inherits(Popup, UIBase);
+
+  domUtils.on(document, "mousedown", function(evt) {
+    var el = evt.target || evt.srcElement;
+    closeAllPopup(evt, el);
+  });
+  domUtils.on(window, "scroll", function(evt, el) {
+    closeAllPopup(evt, el);
+  });
+})();
+
+
+// ui/colorpicker.js
+///import core
+///import uicore
+(function() {
+  var utils = baidu.editor.utils,
+    UIBase = baidu.editor.ui.UIBase,
+    ColorPicker = (baidu.editor.ui.ColorPicker = function(options) {
+      this.initOptions(options);
+      this.noColorText = this.noColorText || this.editor.getLang("clearColor");
+      this.initUIBase();
+    });
+
+  ColorPicker.prototype = {
+    getHtmlTpl: function() {
+      return genColorPicker(this.noColorText, this.editor);
+    },
+    _onTableClick: function(evt) {
+      var tgt = evt.target || evt.srcElement;
+      var color = tgt.getAttribute("data-color");
+      if (color) {
+        this.fireEvent("pickcolor", color);
+      }
+    },
+    _onTableOver: function(evt) {
+      var tgt = evt.target || evt.srcElement;
+      var color = tgt.getAttribute("data-color");
+      if (color) {
+        this.getDom("preview").style.backgroundColor = color;
+      }
+    },
+    _onTableOut: function() {
+      this.getDom("preview").style.backgroundColor = "";
+    },
+    _onPickNoColor: function() {
+      this.fireEvent("picknocolor");
+    }
+  };
+  utils.inherits(ColorPicker, UIBase);
+
+  var COLORS = ("ffffff,000000,eeece1,1f497d,4f81bd,c0504d,9bbb59,8064a2,4bacc6,f79646," +
+    "f2f2f2,7f7f7f,ddd9c3,c6d9f0,dbe5f1,f2dcdb,ebf1dd,e5e0ec,dbeef3,fdeada," +
+    "d8d8d8,595959,c4bd97,8db3e2,b8cce4,e5b9b7,d7e3bc,ccc1d9,b7dde8,fbd5b5," +
+    "bfbfbf,3f3f3f,938953,548dd4,95b3d7,d99694,c3d69b,b2a2c7,92cddc,fac08f," +
+    "a5a5a5,262626,494429,17365d,366092,953734,76923c,5f497a,31859b,e36c09," +
+    "7f7f7f,0c0c0c,1d1b10,0f243e,244061,632423,4f6128,3f3151,205867,974806," +
+    "c00000,ff0000,ffc000,ffff00,92d050,00b050,00b0f0,0070c0,002060,7030a0,").split(
+    ","
+  );
+
+  function genColorPicker(noColorText, editor) {
+    var html =
+      '<div id="##" class="edui-colorpicker %%">' +
+      '<div class="edui-colorpicker-topbar edui-clearfix">' +
+      '<div unselectable="on" id="##_preview" class="edui-colorpicker-preview"></div>' +
+      '<div unselectable="on" class="edui-colorpicker-nocolor" onclick="$$._onPickNoColor(event, this);">' +
+      noColorText +
+      "</div>" +
+      "</div>" +
+      '<table  class="edui-box" style="border-collapse: collapse;" onmouseover="$$._onTableOver(event, this);" onmouseout="$$._onTableOut(event, this);" onclick="return $$._onTableClick(event, this);" cellspacing="0" cellpadding="0">' +
+      '<tr style="border-bottom: 1px solid #ddd;font-size: 13px;line-height: 25px;color:#39C;padding-top: 2px"><td colspan="10">' +
+      editor.getLang("themeColor") +
+      "</td> </tr>" +
+      '<tr class="edui-colorpicker-tablefirstrow" >';
+    for (var i = 0; i < COLORS.length; i++) {
+      if (i && i % 10 === 0) {
+        html +=
+          "</tr>" +
+          (i == 60
+            ? '<tr style="border-bottom: 1px solid #ddd;font-size: 13px;line-height: 25px;color:#39C;"><td colspan="10">' +
+                editor.getLang("standardColor") +
+                "</td></tr>"
+            : "") +
+          "<tr" +
+          (i == 60 ? ' class="edui-colorpicker-tablefirstrow"' : "") +
+          ">";
+      }
+      html += i < 70
+        ? '<td style="padding: 0 2px;"><a hidefocus title="' +
+            COLORS[i] +
+            '" onclick="return false;" href="javascript:" unselectable="on" class="edui-box edui-colorpicker-colorcell"' +
+            ' data-color="#' +
+            COLORS[i] +
+            '"' +
+            ' style="background-color:#' +
+            COLORS[i] +
+            ";border:solid #ccc;" +
+            (i < 10 || i >= 60
+              ? "border-width:1px;"
+              : i >= 10 && i < 20
+                ? "border-width:1px 1px 0 1px;"
+                : "border-width:0 1px 0 1px;") +
+            '"' +
+            "></a></td>"
+        : "";
+    }
+    html += "</tr></table></div>";
+    return html;
+  }
+})();
+
+
+// ui/tablepicker.js
+///import core
+///import uicore
+(function() {
+  var utils = baidu.editor.utils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    UIBase = baidu.editor.ui.UIBase;
+
+  var TablePicker = (baidu.editor.ui.TablePicker = function(options) {
+    this.initOptions(options);
+    this.initTablePicker();
+  });
+  TablePicker.prototype = {
+    defaultNumRows: 10,
+    defaultNumCols: 10,
+    maxNumRows: 20,
+    maxNumCols: 20,
+    numRows: 10,
+    numCols: 10,
+    lengthOfCellSide: 22,
+    initTablePicker: function() {
+      this.initUIBase();
+    },
+    getHtmlTpl: function() {
+      var me = this;
+      return (
+        '<div id="##" class="edui-tablepicker %%">' +
+        '<div class="edui-tablepicker-body">' +
+        '<div class="edui-infoarea">' +
+        '<span id="##_label" class="edui-label"></span>' +
+        "</div>" +
+        '<div class="edui-pickarea"' +
+        ' onmousemove="$$._onMouseMove(event, this);"' +
+        ' onmouseover="$$._onMouseOver(event, this);"' +
+        ' onmouseout="$$._onMouseOut(event, this);"' +
+        ' onclick="$$._onClick(event, this);"' +
+        ">" +
+        '<div id="##_overlay" class="edui-overlay"></div>' +
+        "</div>" +
+        "</div>" +
+        "</div>"
+      );
+    },
+    _UIBase_render: UIBase.prototype.render,
+    render: function(holder) {
+      this._UIBase_render(holder);
+      this.getDom("label").innerHTML =
+        "0" +
+        this.editor.getLang("t_row") +
+        " x 0" +
+        this.editor.getLang("t_col");
+    },
+    _track: function(numCols, numRows) {
+      var style = this.getDom("overlay").style;
+      var sideLen = this.lengthOfCellSide;
+      style.width = numCols * sideLen + "px";
+      style.height = numRows * sideLen + "px";
+      var label = this.getDom("label");
+      label.innerHTML =
+        numCols +
+        this.editor.getLang("t_col") +
+        " x " +
+        numRows +
+        this.editor.getLang("t_row");
+      this.numCols = numCols;
+      this.numRows = numRows;
+    },
+    _onMouseOver: function(evt, el) {
+      var rel = evt.relatedTarget || evt.fromElement;
+      if (!uiUtils.contains(el, rel) && el !== rel) {
+        this.getDom("label").innerHTML =
+          "0" +
+          this.editor.getLang("t_col") +
+          " x 0" +
+          this.editor.getLang("t_row");
+        this.getDom("overlay").style.visibility = "";
+      }
+    },
+    _onMouseOut: function(evt, el) {
+      var rel = evt.relatedTarget || evt.toElement;
+      if (!uiUtils.contains(el, rel) && el !== rel) {
+        this.getDom("label").innerHTML =
+          "0" +
+          this.editor.getLang("t_col") +
+          " x 0" +
+          this.editor.getLang("t_row");
+        this.getDom("overlay").style.visibility = "hidden";
+      }
+    },
+    _onMouseMove: function(evt, el) {
+      var style = this.getDom("overlay").style;
+      var offset = uiUtils.getEventOffset(evt);
+      var sideLen = this.lengthOfCellSide;
+      var numCols = Math.ceil(offset.left / sideLen);
+      var numRows = Math.ceil(offset.top / sideLen);
+      this._track(numCols, numRows);
+    },
+    _onClick: function() {
+      this.fireEvent("picktable", this.numCols, this.numRows);
+    }
+  };
+  utils.inherits(TablePicker, UIBase);
+})();
+
+
+// ui/stateful.js
+(function() {
+  var browser = baidu.editor.browser,
+    domUtils = baidu.editor.dom.domUtils,
+    uiUtils = baidu.editor.ui.uiUtils;
+
+  var TPL_STATEFUL =
+    'onmousedown="$$.Stateful_onMouseDown(event, this);"' +
+    ' onmouseup="$$.Stateful_onMouseUp(event, this);"' +
+    (browser.ie
+      ? ' onmouseenter="$$.Stateful_onMouseEnter(event, this);"' +
+          ' onmouseleave="$$.Stateful_onMouseLeave(event, this);"'
+      : ' onmouseover="$$.Stateful_onMouseOver(event, this);"' +
+          ' onmouseout="$$.Stateful_onMouseOut(event, this);"');
+
+  baidu.editor.ui.Stateful = {
+    alwalysHoverable: false,
+    target: null, //目标元素和this指向dom不一样
+    Stateful_init: function() {
+      this._Stateful_dGetHtmlTpl = this.getHtmlTpl;
+      this.getHtmlTpl = this.Stateful_getHtmlTpl;
+    },
+    Stateful_getHtmlTpl: function() {
+      var tpl = this._Stateful_dGetHtmlTpl();
+      // 使用function避免$转义
+      return tpl.replace(/stateful/g, function() {
+        return TPL_STATEFUL;
+      });
+    },
+    Stateful_onMouseEnter: function(evt, el) {
+      this.target = el;
+      if (!this.isDisabled() || this.alwalysHoverable) {
+        this.addState("hover");
+        this.fireEvent("over");
+      }
+    },
+    Stateful_onMouseLeave: function(evt, el) {
+      if (!this.isDisabled() || this.alwalysHoverable) {
+        this.removeState("hover");
+        this.removeState("active");
+        this.fireEvent("out");
+      }
+    },
+    Stateful_onMouseOver: function(evt, el) {
+      var rel = evt.relatedTarget;
+      if (!uiUtils.contains(el, rel) && el !== rel) {
+        this.Stateful_onMouseEnter(evt, el);
+      }
+    },
+    Stateful_onMouseOut: function(evt, el) {
+      var rel = evt.relatedTarget;
+      if (!uiUtils.contains(el, rel) && el !== rel) {
+        this.Stateful_onMouseLeave(evt, el);
+      }
+    },
+    Stateful_onMouseDown: function(evt, el) {
+      if (!this.isDisabled()) {
+        this.addState("active");
+      }
+    },
+    Stateful_onMouseUp: function(evt, el) {
+      if (!this.isDisabled()) {
+        this.removeState("active");
+      }
+    },
+    Stateful_postRender: function() {
+      if (this.disabled && !this.hasState("disabled")) {
+        this.addState("disabled");
+      }
+    },
+    hasState: function(state) {
+      return domUtils.hasClass(this.getStateDom(), "edui-state-" + state);
+    },
+    addState: function(state) {
+      if (!this.hasState(state)) {
+        this.getStateDom().className += " edui-state-" + state;
+      }
+    },
+    removeState: function(state) {
+      if (this.hasState(state)) {
+        domUtils.removeClasses(this.getStateDom(), ["edui-state-" + state]);
+      }
+    },
+    getStateDom: function() {
+      return this.getDom("state");
+    },
+    isChecked: function() {
+      return this.hasState("checked");
+    },
+    setChecked: function(checked) {
+      if (!this.isDisabled() && checked) {
+        this.addState("checked");
+      } else {
+        this.removeState("checked");
+      }
+    },
+    isDisabled: function() {
+      return this.hasState("disabled");
+    },
+    setDisabled: function(disabled) {
+      if (disabled) {
+        this.removeState("hover");
+        this.removeState("checked");
+        this.removeState("active");
+        this.addState("disabled");
+      } else {
+        this.removeState("disabled");
+      }
+    }
+  };
+})();
+
+
+// ui/button.js
+///import core
+///import uicore
+///import ui/stateful.js
+(function() {
+  var utils = baidu.editor.utils,
+    UIBase = baidu.editor.ui.UIBase,
+    Stateful = baidu.editor.ui.Stateful,
+    Button = (baidu.editor.ui.Button = function(options) {
+      if (options.name) {
+        var btnName = options.name;
+        var cssRules = options.cssRules;
+        if (!options.className) {
+          options.className = "edui-for-" + btnName;
+        }
+        options.cssRules =
+          ".edui-" +
+          (options.theme || "default") +
+          " .edui-toolbar .edui-button.edui-for-" +
+          btnName +
+          " .edui-icon {" +
+          cssRules +
+          "}";
+      }
+      this.initOptions(options);
+      this.initButton();
+    });
+  Button.prototype = {
+    uiName: "button",
+    label: "",
+    title: "",
+    showIcon: true,
+    showText: true,
+    cssRules: "",
+    initButton: function() {
+      this.initUIBase();
+      this.Stateful_init();
+      if (this.cssRules) {
+        utils.cssRule("edui-customize-" + this.name + "-style", this.cssRules);
+      }
+    },
+    getHtmlTpl: function() {
+      return (
+        '<div id="##" class="edui-box %%">' +
+        '<div id="##_state" stateful>' +
+        '<div class="%%-wrap"><div id="##_body" unselectable="on" ' +
+        (this.title ? 'title="' + this.title + '"' : "") +
+        ' class="%%-body" onmousedown="return $$._onMouseDown(event, this);" onclick="return $$._onClick(event, this);">' +
+        (this.showIcon ? '<div class="edui-box edui-icon"></div>' : "") +
+        (this.showText
+          ? '<div class="edui-box edui-label">' + this.label + "</div>"
+          : "") +
+        "</div>" +
+        "</div>" +
+        "</div></div>"
+      );
+    },
+    postRender: function() {
+      this.Stateful_postRender();
+      this.setDisabled(this.disabled);
+    },
+    _onMouseDown: function(e) {
+      var target = e.target || e.srcElement,
+        tagName = target && target.tagName && target.tagName.toLowerCase();
+      if (tagName == "input" || tagName == "object" || tagName == "object") {
+        return false;
+      }
+    },
+    _onClick: function() {
+      if (!this.isDisabled()) {
+        this.fireEvent("click");
+      }
+    },
+    setTitle: function(text) {
+      var label = this.getDom("label");
+      label.innerHTML = text;
+    }
+  };
+  utils.inherits(Button, UIBase);
+  utils.extend(Button.prototype, Stateful);
+})();
+
+
+// ui/splitbutton.js
+///import core
+///import uicore
+///import ui/stateful.js
+(function() {
+  var utils = baidu.editor.utils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    domUtils = baidu.editor.dom.domUtils,
+    UIBase = baidu.editor.ui.UIBase,
+    Stateful = baidu.editor.ui.Stateful,
+    SplitButton = (baidu.editor.ui.SplitButton = function(options) {
+      this.initOptions(options);
+      this.initSplitButton();
+    });
+  SplitButton.prototype = {
+    popup: null,
+    uiName: "splitbutton",
+    title: "",
+    initSplitButton: function() {
+      this.initUIBase();
+      this.Stateful_init();
+      var me = this;
+      if (this.popup != null) {
+        var popup = this.popup;
+        this.popup = null;
+        this.setPopup(popup);
+      }
+    },
+    _UIBase_postRender: UIBase.prototype.postRender,
+    postRender: function() {
+      this.Stateful_postRender();
+      this._UIBase_postRender();
+    },
+    setPopup: function(popup) {
+      if (this.popup === popup) return;
+      if (this.popup != null) {
+        this.popup.dispose();
+      }
+      popup.addListener("show", utils.bind(this._onPopupShow, this));
+      popup.addListener("hide", utils.bind(this._onPopupHide, this));
+      popup.addListener(
+        "postrender",
+        utils.bind(function() {
+          popup
+            .getDom("body")
+            .appendChild(
+              uiUtils.createElementByHtml(
+                '<div id="' +
+                  this.popup.id +
+                  '_bordereraser" class="edui-bordereraser edui-background" style="width:' +
+                  (uiUtils.getClientRect(this.getDom()).width + 20) +
+                  'px"></div>'
+              )
+            );
+          popup.getDom().className += " " + this.className;
+        }, this)
+      );
+      this.popup = popup;
+    },
+    _onPopupShow: function() {
+      this.addState("opened");
+    },
+    _onPopupHide: function() {
+      this.removeState("opened");
+    },
+    getHtmlTpl: function() {
+      return (
+        '<div id="##" class="edui-box %%">' +
+        "<div " +
+        (this.title ? 'title="' + this.title + '"' : "") +
+        ' id="##_state" stateful><div class="%%-body">' +
+        '<div id="##_button_body" class="edui-box edui-button-body" onclick="$$._onButtonClick(event, this);">' +
+        '<div class="edui-box edui-icon"></div>' +
+        "</div>" +
+        '<div class="edui-box edui-splitborder"></div>' +
+        '<div class="edui-box edui-arrow" onclick="$$._onArrowClick();"></div>' +
+        "</div></div></div>"
+      );
+    },
+    showPopup: function() {
+      // 当popup往上弹出的时候，做特殊处理
+      var rect = uiUtils.getClientRect(this.getDom());
+      rect.top -= this.popup.SHADOW_RADIUS;
+      rect.height += this.popup.SHADOW_RADIUS;
+      this.popup.showAnchorRect(rect);
+    },
+    _onArrowClick: function(event, el) {
+      if (!this.isDisabled()) {
+        this.showPopup();
+      }
+    },
+    _onButtonClick: function() {
+      if (!this.isDisabled()) {
+        this.fireEvent("buttonclick");
+      }
+    }
+  };
+  utils.inherits(SplitButton, UIBase);
+  utils.extend(SplitButton.prototype, Stateful, true);
+})();
+
+
+// ui/colorbutton.js
+///import core
+///import uicore
+///import ui/colorpicker.js
+///import ui/popup.js
+///import ui/splitbutton.js
+(function() {
+  var utils = baidu.editor.utils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    ColorPicker = baidu.editor.ui.ColorPicker,
+    Popup = baidu.editor.ui.Popup,
+    SplitButton = baidu.editor.ui.SplitButton,
+    ColorButton = (baidu.editor.ui.ColorButton = function(options) {
+      this.initOptions(options);
+      this.initColorButton();
+    });
+  ColorButton.prototype = {
+    initColorButton: function() {
+      var me = this;
+      this.popup = new Popup({
+        content: new ColorPicker({
+          noColorText: me.editor.getLang("clearColor"),
+          editor: me.editor,
+          onpickcolor: function(t, color) {
+            me._onPickColor(color);
+          },
+          onpicknocolor: function(t, color) {
+            me._onPickNoColor(color);
+          }
+        }),
+        editor: me.editor
+      });
+      this.initSplitButton();
+    },
+    _SplitButton_postRender: SplitButton.prototype.postRender,
+    postRender: function() {
+      this._SplitButton_postRender();
+      this.getDom("button_body").appendChild(
+        uiUtils.createElementByHtml(
+          '<div id="' + this.id + '_colorlump" class="edui-colorlump"></div>'
+        )
+      );
+      this.getDom().className += " edui-colorbutton";
+    },
+    setColor: function(color) {
+      this.getDom("colorlump").style.backgroundColor = color;
+      this.color = color;
+    },
+    _onPickColor: function(color) {
+      if (this.fireEvent("pickcolor", color) !== false) {
+        this.setColor(color);
+        this.popup.hide();
+      }
+    },
+    _onPickNoColor: function(color) {
+      if (this.fireEvent("picknocolor") !== false) {
+        this.popup.hide();
+      }
+    }
+  };
+  utils.inherits(ColorButton, SplitButton);
+})();
+
+
+// ui/tablebutton.js
+///import core
+///import uicore
+///import ui/popup.js
+///import ui/tablepicker.js
+///import ui/splitbutton.js
+(function() {
+  var utils = baidu.editor.utils,
+    Popup = baidu.editor.ui.Popup,
+    TablePicker = baidu.editor.ui.TablePicker,
+    SplitButton = baidu.editor.ui.SplitButton,
+    TableButton = (baidu.editor.ui.TableButton = function(options) {
+      this.initOptions(options);
+      this.initTableButton();
+    });
+  TableButton.prototype = {
+    initTableButton: function() {
+      var me = this;
+      this.popup = new Popup({
+        content: new TablePicker({
+          editor: me.editor,
+          onpicktable: function(t, numCols, numRows) {
+            me._onPickTable(numCols, numRows);
+          }
+        }),
+        editor: me.editor
+      });
+      this.initSplitButton();
+    },
+    _onPickTable: function(numCols, numRows) {
+      if (this.fireEvent("picktable", numCols, numRows) !== false) {
+        this.popup.hide();
+      }
+    }
+  };
+  utils.inherits(TableButton, SplitButton);
+})();
+
+
+// ui/autotypesetpicker.js
+///import core
+///import uicore
+(function() {
+  var utils = baidu.editor.utils,
+    UIBase = baidu.editor.ui.UIBase;
+
+  var AutoTypeSetPicker = (baidu.editor.ui.AutoTypeSetPicker = function(
+    options
+  ) {
+    this.initOptions(options);
+    this.initAutoTypeSetPicker();
+  });
+  AutoTypeSetPicker.prototype = {
+    initAutoTypeSetPicker: function() {
+      this.initUIBase();
+    },
+    getHtmlTpl: function() {
+      var me = this.editor,
+        opt = me.options.autotypeset,
+        lang = me.getLang("autoTypeSet");
+
+      var textAlignInputName = "textAlignValue" + me.uid,
+        imageBlockInputName = "imageBlockLineValue" + me.uid,
+        symbolConverInputName = "symbolConverValue" + me.uid;
+
+      return (
+        '<div id="##" class="edui-autotypesetpicker %%">' +
+        '<div class="edui-autotypesetpicker-body">' +
+        "<table >" +
+        '<tr><td nowrap><input type="checkbox" name="mergeEmptyline" ' +
+        (opt["mergeEmptyline"] ? "checked" : "") +
+        ">" +
+        lang.mergeLine +
+        '</td><td colspan="2"><input type="checkbox" name="removeEmptyline" ' +
+        (opt["removeEmptyline"] ? "checked" : "") +
+        ">" +
+        lang.delLine +
+        "</td></tr>" +
+        '<tr><td nowrap><input type="checkbox" name="removeClass" ' +
+        (opt["removeClass"] ? "checked" : "") +
+        ">" +
+        lang.removeFormat +
+        '</td><td colspan="2"><input type="checkbox" name="indent" ' +
+        (opt["indent"] ? "checked" : "") +
+        ">" +
+        lang.indent +
+        "</td></tr>" +
+        "<tr>" +
+        '<td nowrap><input type="checkbox" name="textAlign" ' +
+        (opt["textAlign"] ? "checked" : "") +
+        ">" +
+        lang.alignment +
+        "</td>" +
+        '<td colspan="2" id="' +
+        textAlignInputName +
+        '">' +
+        '<input type="radio" name="' +
+        textAlignInputName +
+        '" value="left" ' +
+        (opt["textAlign"] && opt["textAlign"] == "left" ? "checked" : "") +
+        ">" +
+        me.getLang("justifyleft") +
+        '<input type="radio" name="' +
+        textAlignInputName +
+        '" value="center" ' +
+        (opt["textAlign"] && opt["textAlign"] == "center" ? "checked" : "") +
+        ">" +
+        me.getLang("justifycenter") +
+        '<input type="radio" name="' +
+        textAlignInputName +
+        '" value="right" ' +
+        (opt["textAlign"] && opt["textAlign"] == "right" ? "checked" : "") +
+        ">" +
+        me.getLang("justifyright") +
+        "</td>" +
+        "</tr>" +
+        "<tr>" +
+        '<td nowrap><input type="checkbox" name="imageBlockLine" ' +
+        (opt["imageBlockLine"] ? "checked" : "") +
+        ">" +
+        lang.imageFloat +
+        "</td>" +
+        '<td nowrap id="' +
+        imageBlockInputName +
+        '">' +
+        '<input type="radio" name="' +
+        imageBlockInputName +
+        '" value="none" ' +
+        (opt["imageBlockLine"] && opt["imageBlockLine"] == "none"
+          ? "checked"
+          : "") +
+        ">" +
+        me.getLang("default") +
+        '<input type="radio" name="' +
+        imageBlockInputName +
+        '" value="left" ' +
+        (opt["imageBlockLine"] && opt["imageBlockLine"] == "left"
+          ? "checked"
+          : "") +
+        ">" +
+        me.getLang("justifyleft") +
+        '<input type="radio" name="' +
+        imageBlockInputName +
+        '" value="center" ' +
+        (opt["imageBlockLine"] && opt["imageBlockLine"] == "center"
+          ? "checked"
+          : "") +
+        ">" +
+        me.getLang("justifycenter") +
+        '<input type="radio" name="' +
+        imageBlockInputName +
+        '" value="right" ' +
+        (opt["imageBlockLine"] && opt["imageBlockLine"] == "right"
+          ? "checked"
+          : "") +
+        ">" +
+        me.getLang("justifyright") +
+        "</td>" +
+        "</tr>" +
+        '<tr><td nowrap><input type="checkbox" name="clearFontSize" ' +
+        (opt["clearFontSize"] ? "checked" : "") +
+        ">" +
+        lang.removeFontsize +
+        '</td><td colspan="2"><input type="checkbox" name="clearFontFamily" ' +
+        (opt["clearFontFamily"] ? "checked" : "") +
+        ">" +
+        lang.removeFontFamily +
+        "</td></tr>" +
+        '<tr><td nowrap colspan="3"><input type="checkbox" name="removeEmptyNode" ' +
+        (opt["removeEmptyNode"] ? "checked" : "") +
+        ">" +
+        lang.removeHtml +
+        "</td></tr>" +
+        '<tr><td nowrap colspan="3"><input type="checkbox" name="pasteFilter" ' +
+        (opt["pasteFilter"] ? "checked" : "") +
+        ">" +
+        lang.pasteFilter +
+        "</td></tr>" +
+        "<tr>" +
+        '<td nowrap><input type="checkbox" name="symbolConver" ' +
+        (opt["bdc2sb"] || opt["tobdc"] ? "checked" : "") +
+        ">" +
+        lang.symbol +
+        "</td>" +
+        '<td id="' +
+        symbolConverInputName +
+        '">' +
+        '<input type="radio" name="bdc" value="bdc2sb" ' +
+        (opt["bdc2sb"] ? "checked" : "") +
+        ">" +
+        lang.bdc2sb +
+        '<input type="radio" name="bdc" value="tobdc" ' +
+        (opt["tobdc"] ? "checked" : "") +
+        ">" +
+        lang.tobdc +
+        "" +
+        "</td>" +
+        '<td nowrap align="right"><button >' +
+        lang.run +
+        "</button></td>" +
+        "</tr>" +
+        "</table>" +
+        "</div>" +
+        "</div>"
+      );
+    },
+    _UIBase_render: UIBase.prototype.render
+  };
+  utils.inherits(AutoTypeSetPicker, UIBase);
+})();
+
+
+// ui/autotypesetbutton.js
+///import core
+///import uicore
+///import ui/popup.js
+///import ui/autotypesetpicker.js
+///import ui/splitbutton.js
+(function() {
+  var utils = baidu.editor.utils,
+    Popup = baidu.editor.ui.Popup,
+    AutoTypeSetPicker = baidu.editor.ui.AutoTypeSetPicker,
+    SplitButton = baidu.editor.ui.SplitButton,
+    AutoTypeSetButton = (baidu.editor.ui.AutoTypeSetButton = function(options) {
+      this.initOptions(options);
+      this.initAutoTypeSetButton();
+    });
+  function getPara(me) {
+    var opt = {},
+      cont = me.getDom(),
+      editorId = me.editor.uid,
+      inputType = null,
+      attrName = null,
+      ipts = domUtils.getElementsByTagName(cont, "input");
+    for (var i = ipts.length - 1, ipt; (ipt = ipts[i--]); ) {
+      inputType = ipt.getAttribute("type");
+      if (inputType == "checkbox") {
+        attrName = ipt.getAttribute("name");
+        opt[attrName] && delete opt[attrName];
+        if (ipt.checked) {
+          var attrValue = document.getElementById(
+            attrName + "Value" + editorId
+          );
+          if (attrValue) {
+            if (/input/gi.test(attrValue.tagName)) {
+              opt[attrName] = attrValue.value;
+            } else {
+              var iptChilds = attrValue.getElementsByTagName("input");
+              for (
+                var j = iptChilds.length - 1, iptchild;
+                (iptchild = iptChilds[j--]);
+
+              ) {
+                if (iptchild.checked) {
+                  opt[attrName] = iptchild.value;
+                  break;
+                }
+              }
+            }
+          } else {
+            opt[attrName] = true;
+          }
+        } else {
+          opt[attrName] = false;
+        }
+      } else {
+        opt[ipt.getAttribute("value")] = ipt.checked;
+      }
+    }
+
+    var selects = domUtils.getElementsByTagName(cont, "select");
+    for (var i = 0, si; (si = selects[i++]); ) {
+      var attr = si.getAttribute("name");
+      opt[attr] = opt[attr] ? si.value : "";
+    }
+
+    utils.extend(me.editor.options.autotypeset, opt);
+
+    me.editor.setPreferences("autotypeset", opt);
+  }
+
+  AutoTypeSetButton.prototype = {
+    initAutoTypeSetButton: function() {
+      var me = this;
+      this.popup = new Popup({
+        //传入配置参数
+        content: new AutoTypeSetPicker({ editor: me.editor }),
+        editor: me.editor,
+        hide: function() {
+          if (!this._hidden && this.getDom()) {
+            getPara(this);
+            this.getDom().style.display = "none";
+            this._hidden = true;
+            this.fireEvent("hide");
+          }
+        }
+      });
+      var flag = 0;
+      this.popup.addListener("postRenderAfter", function() {
+        var popupUI = this;
+        if (flag) return;
+        var cont = this.getDom(),
+          btn = cont.getElementsByTagName("button")[0];
+
+        btn.onclick = function() {
+          getPara(popupUI);
+          me.editor.execCommand("autotypeset");
+          popupUI.hide();
+        };
+
+        domUtils.on(cont, "click", function(e) {
+          var target = e.target || e.srcElement,
+            editorId = me.editor.uid;
+          if (target && target.tagName == "INPUT") {
+            // 点击图片浮动的checkbox,去除对应的radio
+            if (
+              target.name == "imageBlockLine" ||
+              target.name == "textAlign" ||
+              target.name == "symbolConver"
+            ) {
+              var checked = target.checked,
+                radioTd = document.getElementById(
+                  target.name + "Value" + editorId
+                ),
+                radios = radioTd.getElementsByTagName("input"),
+                defalutSelect = {
+                  imageBlockLine: "none",
+                  textAlign: "left",
+                  symbolConver: "tobdc"
+                };
+
+              for (var i = 0; i < radios.length; i++) {
+                if (checked) {
+                  if (radios[i].value == defalutSelect[target.name]) {
+                    radios[i].checked = "checked";
+                  }
+                } else {
+                  radios[i].checked = false;
+                }
+              }
+            }
+            // 点击radio,选中对应的checkbox
+            if (
+              target.name == "imageBlockLineValue" + editorId ||
+              target.name == "textAlignValue" + editorId ||
+              target.name == "bdc"
+            ) {
+              var checkboxs = target.parentNode.previousSibling.getElementsByTagName(
+                "input"
+              );
+              checkboxs && (checkboxs[0].checked = true);
+            }
+
+            getPara(popupUI);
+          }
+        });
+
+        flag = 1;
+      });
+      this.initSplitButton();
+    }
+  };
+  utils.inherits(AutoTypeSetButton, SplitButton);
+})();
+
+
+// ui/cellalignpicker.js
+///import core
+///import uicore
+(function() {
+  var utils = baidu.editor.utils,
+    Popup = baidu.editor.ui.Popup,
+    Stateful = baidu.editor.ui.Stateful,
+    UIBase = baidu.editor.ui.UIBase;
+
+  /**
+     * 该参数将新增一个参数： selected， 参数类型为一个Object， 形如{ 'align': 'center', 'valign': 'top' }， 表示单元格的初始
+     * 对齐状态为： 竖直居上，水平居中; 其中 align的取值为：'center', 'left', 'right'; valign的取值为: 'top', 'middle', 'bottom'
+     * @update 2013/4/2 hancong03@baidu.com
+     */
+  var CellAlignPicker = (baidu.editor.ui.CellAlignPicker = function(options) {
+    this.initOptions(options);
+    this.initSelected();
+    this.initCellAlignPicker();
+  });
+  CellAlignPicker.prototype = {
+    //初始化选中状态， 该方法将根据传递进来的参数获取到应该选中的对齐方式图标的索引
+    initSelected: function() {
+      var status = {
+        valign: {
+          top: 0,
+          middle: 1,
+          bottom: 2
+        },
+        align: {
+          left: 0,
+          center: 1,
+          right: 2
+        },
+        count: 3
+      },
+        result = -1;
+
+      if (this.selected) {
+        this.selectedIndex =
+          status.valign[this.selected.valign] * status.count +
+          status.align[this.selected.align];
+      }
+    },
+    initCellAlignPicker: function() {
+      this.initUIBase();
+      this.Stateful_init();
+    },
+    getHtmlTpl: function() {
+      var alignType = ["left", "center", "right"],
+        COUNT = 9,
+        tempClassName = null,
+        tempIndex = -1,
+        tmpl = [];
+
+      for (var i = 0; i < COUNT; i++) {
+        tempClassName = this.selectedIndex === i
+          ? ' class="edui-cellalign-selected" '
+          : "";
+        tempIndex = i % 3;
+
+        tempIndex === 0 && tmpl.push("<tr>");
+
+        tmpl.push(
+          '<td index="' +
+            i +
+            '" ' +
+            tempClassName +
+            ' stateful><div class="edui-icon edui-' +
+            alignType[tempIndex] +
+            '"></div></td>'
+        );
+
+        tempIndex === 2 && tmpl.push("</tr>");
+      }
+
+      return (
+        '<div id="##" class="edui-cellalignpicker %%">' +
+        '<div class="edui-cellalignpicker-body">' +
+        '<table onclick="$$._onClick(event);">' +
+        tmpl.join("") +
+        "</table>" +
+        "</div>" +
+        "</div>"
+      );
+    },
+    getStateDom: function() {
+      return this.target;
+    },
+    _onClick: function(evt) {
+      var target = evt.target || evt.srcElement;
+      if (/icon/.test(target.className)) {
+        this.items[target.parentNode.getAttribute("index")].onclick();
+        Popup.postHide(evt);
+      }
+    },
+    _UIBase_render: UIBase.prototype.render
+  };
+  utils.inherits(CellAlignPicker, UIBase);
+  utils.extend(CellAlignPicker.prototype, Stateful, true);
+})();
+
+
+// ui/pastepicker.js
+///import core
+///import uicore
+(function() {
+  var utils = baidu.editor.utils,
+    Stateful = baidu.editor.ui.Stateful,
+    uiUtils = baidu.editor.ui.uiUtils,
+    UIBase = baidu.editor.ui.UIBase;
+
+  var PastePicker = (baidu.editor.ui.PastePicker = function(options) {
+    this.initOptions(options);
+    this.initPastePicker();
+  });
+  PastePicker.prototype = {
+    initPastePicker: function() {
+      this.initUIBase();
+      this.Stateful_init();
+    },
+    getHtmlTpl: function() {
+      return (
+        '<div class="edui-pasteicon" onclick="$$._onClick(this)"></div>' +
+        '<div class="edui-pastecontainer">' +
+        '<div class="edui-title">' +
+        this.editor.getLang("pasteOpt") +
+        "</div>" +
+        '<div class="edui-button">' +
+        '<div title="' +
+        this.editor.getLang("pasteSourceFormat") +
+        '" onclick="$$.format(false)" stateful>' +
+        '<div class="edui-richtxticon"></div></div>' +
+        '<div title="' +
+        this.editor.getLang("tagFormat") +
+        '" onclick="$$.format(2)" stateful>' +
+        '<div class="edui-tagicon"></div></div>' +
+        '<div title="' +
+        this.editor.getLang("pasteTextFormat") +
+        '" onclick="$$.format(true)" stateful>' +
+        '<div class="edui-plaintxticon"></div></div>' +
+        "</div>" +
+        "</div>" +
+        "</div>"
+      );
+    },
+    getStateDom: function() {
+      return this.target;
+    },
+    format: function(param) {
+      this.editor.ui._isTransfer = true;
+      this.editor.fireEvent("pasteTransfer", param);
+    },
+    _onClick: function(cur) {
+      var node = domUtils.getNextDomNode(cur),
+        screenHt = uiUtils.getViewportRect().height,
+        subPop = uiUtils.getClientRect(node);
+
+      if (subPop.top + subPop.height > screenHt)
+        node.style.top = -subPop.height - cur.offsetHeight + "px";
+      else node.style.top = "";
+
+      if (/hidden/gi.test(domUtils.getComputedStyle(node, "visibility"))) {
+        node.style.visibility = "visible";
+        domUtils.addClass(cur, "edui-state-opened");
+      } else {
+        node.style.visibility = "hidden";
+        domUtils.removeClasses(cur, "edui-state-opened");
+      }
+    },
+    _UIBase_render: UIBase.prototype.render
+  };
+  utils.inherits(PastePicker, UIBase);
+  utils.extend(PastePicker.prototype, Stateful, true);
+})();
+
+
+// ui/toolbar.js
+(function() {
+  var utils = baidu.editor.utils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    UIBase = baidu.editor.ui.UIBase,
+    Toolbar = (baidu.editor.ui.Toolbar = function(options) {
+      this.initOptions(options);
+      this.initToolbar();
+    });
+  Toolbar.prototype = {
+    items: null,
+    initToolbar: function() {
+      this.items = this.items || [];
+      this.initUIBase();
+    },
+    add: function(item, index) {
+      if (index === undefined) {
+        this.items.push(item);
+      } else {
+        this.items.splice(index, 0, item);
+      }
+    },
+    getHtmlTpl: function() {
+      var buff = [];
+      for (var i = 0; i < this.items.length; i++) {
+        buff[i] = this.items[i].renderHtml();
+      }
+      return (
+        '<div id="##" class="edui-toolbar %%" onselectstart="return false;" onmousedown="return $$._onMouseDown(event, this);">' +
+        buff.join("") +
+        "</div>"
+      );
+    },
+    postRender: function() {
+      var box = this.getDom();
+      for (var i = 0; i < this.items.length; i++) {
+        this.items[i].postRender();
+      }
+      uiUtils.makeUnselectable(box);
+    },
+    _onMouseDown: function(e) {
+      var target = e.target || e.srcElement,
+        tagName = target && target.tagName && target.tagName.toLowerCase();
+      if (tagName == "input" || tagName == "object" || tagName == "object") {
+        return false;
+      }
+    }
+  };
+  utils.inherits(Toolbar, UIBase);
+})();
+
+
+// ui/menu.js
+///import core
+///import uicore
+///import ui\popup.js
+///import ui\stateful.js
+(function() {
+  var utils = baidu.editor.utils,
+    domUtils = baidu.editor.dom.domUtils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    UIBase = baidu.editor.ui.UIBase,
+    Popup = baidu.editor.ui.Popup,
+    Stateful = baidu.editor.ui.Stateful,
+    CellAlignPicker = baidu.editor.ui.CellAlignPicker,
+    Menu = (baidu.editor.ui.Menu = function(options) {
+      this.initOptions(options);
+      this.initMenu();
+    });
+
+  var menuSeparator = {
+    renderHtml: function() {
+      return '<div class="edui-menuitem edui-menuseparator"><div class="edui-menuseparator-inner"></div></div>';
+    },
+    postRender: function() {},
+    queryAutoHide: function() {
+      return true;
+    }
+  };
+  Menu.prototype = {
+    items: null,
+    uiName: "menu",
+    initMenu: function() {
+      this.items = this.items || [];
+      this.initPopup();
+      this.initItems();
+    },
+    initItems: function() {
+      for (var i = 0; i < this.items.length; i++) {
+        var item = this.items[i];
+        if (item == "-") {
+          this.items[i] = this.getSeparator();
+        } else if (!(item instanceof MenuItem)) {
+          item.editor = this.editor;
+          item.theme = this.editor.options.theme;
+          this.items[i] = this.createItem(item);
+        }
+      }
+    },
+    getSeparator: function() {
+      return menuSeparator;
+    },
+    createItem: function(item) {
+      //新增一个参数menu, 该参数存储了menuItem所对应的menu引用
+      item.menu = this;
+      return new MenuItem(item);
+    },
+    _Popup_getContentHtmlTpl: Popup.prototype.getContentHtmlTpl,
+    getContentHtmlTpl: function() {
+      if (this.items.length == 0) {
+        return this._Popup_getContentHtmlTpl();
+      }
+      var buff = [];
+      for (var i = 0; i < this.items.length; i++) {
+        var item = this.items[i];
+        buff[i] = item.renderHtml();
+      }
+      return '<div class="%%-body">' + buff.join("") + "</div>";
+    },
+    _Popup_postRender: Popup.prototype.postRender,
+    postRender: function() {
+      var me = this;
+      for (var i = 0; i < this.items.length; i++) {
+        var item = this.items[i];
+        item.ownerMenu = this;
+        item.postRender();
+      }
+      domUtils.on(this.getDom(), "mouseover", function(evt) {
+        evt = evt || event;
+        var rel = evt.relatedTarget || evt.fromElement;
+        var el = me.getDom();
+        if (!uiUtils.contains(el, rel) && el !== rel) {
+          me.fireEvent("over");
+        }
+      });
+      this._Popup_postRender();
+    },
+    queryAutoHide: function(el) {
+      if (el) {
+        if (uiUtils.contains(this.getDom(), el)) {
+          return false;
+        }
+        for (var i = 0; i < this.items.length; i++) {
+          var item = this.items[i];
+          if (item.queryAutoHide(el) === false) {
+            return false;
+          }
+        }
+      }
+    },
+    clearItems: function() {
+      for (var i = 0; i < this.items.length; i++) {
+        var item = this.items[i];
+        clearTimeout(item._showingTimer);
+        clearTimeout(item._closingTimer);
+        if (item.subMenu) {
+          item.subMenu.destroy();
+        }
+      }
+      this.items = [];
+    },
+    destroy: function() {
+      if (this.getDom()) {
+        domUtils.remove(this.getDom());
+      }
+      this.clearItems();
+    },
+    dispose: function() {
+      this.destroy();
+    }
+  };
+  utils.inherits(Menu, Popup);
+
+  /**
+     * @update 2013/04/03 hancong03 新增一个参数menu, 该参数存储了menuItem所对应的menu引用
+     * @type {Function}
+     */
+  var MenuItem = (baidu.editor.ui.MenuItem = function(options) {
+    this.initOptions(options);
+    this.initUIBase();
+    this.Stateful_init();
+    if (this.subMenu && !(this.subMenu instanceof Menu)) {
+      if (options.className && options.className.indexOf("aligntd") != -1) {
+        var me = this;
+
+        //获取单元格对齐初始状态
+        this.subMenu.selected = this.editor.queryCommandValue("cellalignment");
+
+        this.subMenu = new Popup({
+          content: new CellAlignPicker(this.subMenu),
+          parentMenu: me,
+          editor: me.editor,
+          destroy: function() {
+            if (this.getDom()) {
+              domUtils.remove(this.getDom());
+            }
+          }
+        });
+        this.subMenu.addListener("postRenderAfter", function() {
+          domUtils.on(this.getDom(), "mouseover", function() {
+            me.addState("opened");
+          });
+        });
+      } else {
+        this.subMenu = new Menu(this.subMenu);
+      }
+    }
+  });
+  MenuItem.prototype = {
+    label: "",
+    subMenu: null,
+    ownerMenu: null,
+    uiName: "menuitem",
+    alwalysHoverable: true,
+    getHtmlTpl: function() {
+      return (
+        '<div id="##" class="%%" stateful onclick="$$._onClick(event, this);">' +
+        '<div class="%%-body">' +
+        this.renderLabelHtml() +
+        "</div>" +
+        "</div>"
+      );
+    },
+    postRender: function() {
+      var me = this;
+      this.addListener("over", function() {
+        me.ownerMenu.fireEvent("submenuover", me);
+        if (me.subMenu) {
+          me.delayShowSubMenu();
+        }
+      });
+      if (this.subMenu) {
+        this.getDom().className += " edui-hassubmenu";
+        this.subMenu.render();
+        this.addListener("out", function() {
+          me.delayHideSubMenu();
+        });
+        this.subMenu.addListener("over", function() {
+          clearTimeout(me._closingTimer);
+          me._closingTimer = null;
+          me.addState("opened");
+        });
+        this.ownerMenu.addListener("hide", function() {
+          me.hideSubMenu();
+        });
+        this.ownerMenu.addListener("submenuover", function(t, subMenu) {
+          if (subMenu !== me) {
+            me.delayHideSubMenu();
+          }
+        });
+        this.subMenu._bakQueryAutoHide = this.subMenu.queryAutoHide;
+        this.subMenu.queryAutoHide = function(el) {
+          if (el && uiUtils.contains(me.getDom(), el)) {
+            return false;
+          }
+          return this._bakQueryAutoHide(el);
+        };
+      }
+      this.getDom().style.tabIndex = "-1";
+      uiUtils.makeUnselectable(this.getDom());
+      this.Stateful_postRender();
+    },
+    delayShowSubMenu: function() {
+      var me = this;
+      if (!me.isDisabled()) {
+        me.addState("opened");
+        clearTimeout(me._showingTimer);
+        clearTimeout(me._closingTimer);
+        me._closingTimer = null;
+        me._showingTimer = setTimeout(function() {
+          me.showSubMenu();
+        }, 250);
+      }
+    },
+    delayHideSubMenu: function() {
+      var me = this;
+      if (!me.isDisabled()) {
+        me.removeState("opened");
+        clearTimeout(me._showingTimer);
+        if (!me._closingTimer) {
+          me._closingTimer = setTimeout(function() {
+            if (!me.hasState("opened")) {
+              me.hideSubMenu();
+            }
+            me._closingTimer = null;
+          }, 400);
+        }
+      }
+    },
+    renderLabelHtml: function() {
+      return (
+        '<div class="edui-arrow"></div>' +
+        '<div class="edui-box edui-icon"></div>' +
+        '<div class="edui-box edui-label %%-label">' +
+        (this.label || "") +
+        "</div>"
+      );
+    },
+    getStateDom: function() {
+      return this.getDom();
+    },
+    queryAutoHide: function(el) {
+      if (this.subMenu && this.hasState("opened")) {
+        return this.subMenu.queryAutoHide(el);
+      }
+    },
+    _onClick: function(event, this_) {
+      if (this.hasState("disabled")) return;
+      if (this.fireEvent("click", event, this_) !== false) {
+        if (this.subMenu) {
+          this.showSubMenu();
+        } else {
+          Popup.postHide(event);
+        }
+      }
+    },
+    showSubMenu: function() {
+      var rect = uiUtils.getClientRect(this.getDom());
+      rect.right -= 5;
+      rect.left += 2;
+      rect.width -= 7;
+      rect.top -= 4;
+      rect.bottom += 4;
+      rect.height += 8;
+      this.subMenu.showAnchorRect(rect, true, true);
+    },
+    hideSubMenu: function() {
+      this.subMenu.hide();
+    }
+  };
+  utils.inherits(MenuItem, UIBase);
+  utils.extend(MenuItem.prototype, Stateful, true);
+})();
+
+
+// ui/combox.js
+///import core
+///import uicore
+///import ui/menu.js
+///import ui/splitbutton.js
+(function() {
+  // todo: menu和item提成通用list
+  var utils = baidu.editor.utils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    Menu = baidu.editor.ui.Menu,
+    SplitButton = baidu.editor.ui.SplitButton,
+    Combox = (baidu.editor.ui.Combox = function(options) {
+      this.initOptions(options);
+      this.initCombox();
+    });
+  Combox.prototype = {
+    uiName: "combox",
+    onbuttonclick: function() {
+      this.showPopup();
+    },
+    initCombox: function() {
+      var me = this;
+      this.items = this.items || [];
+      for (var i = 0; i < this.items.length; i++) {
+        var item = this.items[i];
+        item.uiName = "listitem";
+        item.index = i;
+        item.onclick = function() {
+          me.selectByIndex(this.index);
+        };
+      }
+      this.popup = new Menu({
+        items: this.items,
+        uiName: "list",
+        editor: this.editor,
+        captureWheel: true,
+        combox: this
+      });
+
+      this.initSplitButton();
+    },
+    _SplitButton_postRender: SplitButton.prototype.postRender,
+    postRender: function() {
+      this._SplitButton_postRender();
+      this.setLabel(this.label || "");
+      this.setValue(this.initValue || "");
+    },
+    showPopup: function() {
+      var rect = uiUtils.getClientRect(this.getDom());
+      rect.top += 1;
+      rect.bottom -= 1;
+      rect.height -= 2;
+      this.popup.showAnchorRect(rect);
+    },
+    getValue: function() {
+      return this.value;
+    },
+    setValue: function(value) {
+      var index = this.indexByValue(value);
+      if (index != -1) {
+        this.selectedIndex = index;
+        this.setLabel(this.items[index].label);
+        this.value = this.items[index].value;
+      } else {
+        this.selectedIndex = -1;
+        this.setLabel(this.getLabelForUnknowValue(value));
+        this.value = value;
+      }
+    },
+    setLabel: function(label) {
+      this.getDom("button_body").innerHTML = label;
+      this.label = label;
+    },
+    getLabelForUnknowValue: function(value) {
+      return value;
+    },
+    indexByValue: function(value) {
+      for (var i = 0; i < this.items.length; i++) {
+        if (value == this.items[i].value) {
+          return i;
+        }
+      }
+      return -1;
+    },
+    getItem: function(index) {
+      return this.items[index];
+    },
+    selectByIndex: function(index) {
+      if (
+        index < this.items.length &&
+        this.fireEvent("select", index) !== false
+      ) {
+        this.selectedIndex = index;
+        this.value = this.items[index].value;
+        this.setLabel(this.items[index].label);
+      }
+    }
+  };
+  utils.inherits(Combox, SplitButton);
+})();
+
+
+// ui/dialog.js
+///import core
+///import uicore
+///import ui/mask.js
+///import ui/button.js
+(function() {
+  var utils = baidu.editor.utils,
+    domUtils = baidu.editor.dom.domUtils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    Mask = baidu.editor.ui.Mask,
+    UIBase = baidu.editor.ui.UIBase,
+    Button = baidu.editor.ui.Button,
+    Dialog = (baidu.editor.ui.Dialog = function(options) {
+      if (options.name) {
+        var name = options.name;
+        var cssRules = options.cssRules;
+        if (!options.className) {
+          options.className = "edui-for-" + name;
+        }
+        if (cssRules) {
+          options.cssRules =
+            ".edui-for-" + name + " .edui-dialog-content  {" + cssRules + "}";
+        }
+      }
+      this.initOptions(
+        utils.extend(
+          {
+            autoReset: true,
+            draggable: true,
+            onok: function() {},
+            oncancel: function() {},
+            onclose: function(t, ok) {
+              return ok ? this.onok() : this.oncancel();
+            },
+            //是否控制dialog中的scroll事件， 默认为不阻止
+            holdScroll: false
+          },
+          options
+        )
+      );
+      this.initDialog();
+    });
+  var modalMask;
+  var dragMask;
+  var activeDialog;
+  Dialog.prototype = {
+    draggable: false,
+    uiName: "dialog",
+    initDialog: function() {
+      var me = this,
+        theme = this.editor.options.theme;
+      if (this.cssRules) {
+        this.cssRules = ".edui-" + theme + " " + this.cssRules;
+        utils.cssRule("edui-customize-" + this.name + "-style", this.cssRules);
+      }
+      this.initUIBase();
+      this.modalMask =
+        modalMask ||
+        (modalMask = new Mask({
+          className: "edui-dialog-modalmask",
+          theme: theme,
+          onclick: function() {
+            activeDialog && activeDialog.close(false);
+          }
+        }));
+      this.dragMask =
+        dragMask ||
+        (dragMask = new Mask({
+          className: "edui-dialog-dragmask",
+          theme: theme
+        }));
+      this.closeButton = new Button({
+        className: "edui-dialog-closebutton",
+        title: me.closeDialog,
+        theme: theme,
+        onclick: function() {
+          me.close(false);
+        }
+      });
+
+      this.fullscreen && this.initResizeEvent();
+
+      if (this.buttons) {
+        for (var i = 0; i < this.buttons.length; i++) {
+          if (!(this.buttons[i] instanceof Button)) {
+            this.buttons[i] = new Button(
+              utils.extend(
+                this.buttons[i],
+                {
+                  editor: this.editor
+                },
+                true
+              )
+            );
+          }
+        }
+      }
+    },
+    initResizeEvent: function() {
+      var me = this;
+
+
+
+      domUtils.on(window, "resize", function() {
+
+        if (me._hidden || me._hidden === undefined) {
+          return;
+        }
+
+        if (me.__resizeTimer) {
+          window.clearTimeout(me.__resizeTimer);
+        }
+
+        me.__resizeTimer = window.setTimeout(function() {
+          me.__resizeTimer = null;
+
+
+
+          var dialogWrapNode = me.getDom(),
+            contentNode = me.getDom("content"),
+            wrapRect = UE.ui.uiUtils.getClientRect(dialogWrapNode),
+            contentRect = UE.ui.uiUtils.getClientRect(contentNode),
+            vpRect = uiUtils.getViewportRect();
+
+          contentNode.style.width =
+            vpRect.width - wrapRect.width + contentRect.width + "px";
+          contentNode.style.height =
+            vpRect.height - wrapRect.height + contentRect.height + "px";
+
+          dialogWrapNode.style.width = vpRect.width + "px";
+          dialogWrapNode.style.height = vpRect.height + "px";
+
+          me.fireEvent("resize");
+        }, 100);
+      });
+    },
+    fitSize: function() {
+      // console.log('fitSize.dialog')
+      var popBodyEl = this.getDom("body");
+      var $foot = popBodyEl.querySelector('.edui-dialog-foot');
+      var heightWithoutBody = 70;
+      if(!$foot){
+         heightWithoutBody = 30;
+      }
+      var size = this.mesureSize();
+      var winSize = uiUtils.getViewportRect();
+      var width = size.width;
+      var height = size.height - heightWithoutBody;
+      var maxWidth = winSize.width - 2;
+      var maxHeight = winSize.height - heightWithoutBody - 2;
+      if(width > maxWidth){
+        height = height * maxWidth / width;
+        width = maxWidth;
+      }
+      if(height > maxHeight){
+        width = width * maxHeight / height;
+        height = maxHeight;
+      }
+      var scale = (width / size.width);
+      // console.log('size', {sizeWidth:size.width,sizeHeight:size.height,width,height,scale});
+      // console.log('popBodyEl',popBodyEl, popBodyEl.querySelector('.edui-dialog-foot'));
+      // window._xxx = popBodyEl;
+      var $content = popBodyEl.querySelector('.edui-dialog-content');
+      if(!$content.dataset.dialogScaled){
+        $content.dataset.dialogScaled = true
+        $content.style.width = (width)+'px';
+        $content.style.height = (height)+'px';
+        var $iframe = popBodyEl.querySelector('.edui-dialog-content iframe');
+        $iframe.style.width = (size.width) +'px';
+        $iframe.style.height = (size.height) +'px';
+        $iframe.style.transformOrigin = '0 0';
+        $iframe.style.transform = 'scale('+scale+')';
+        size.width = width
+        size.height = height + heightWithoutBody
+      }
+      popBodyEl.style.width = size.width + "px";
+      popBodyEl.style.height = size.height + "px";
+      return size;
+    },
+    safeSetOffset: function(offset) {
+      var me = this;
+      var el = me.getDom();
+      var vpRect = uiUtils.getViewportRect();
+      var rect = uiUtils.getClientRect(el);
+      var left = offset.left;
+      if (left + rect.width > vpRect.right) {
+        left = vpRect.right - rect.width;
+      }
+      var top = offset.top;
+      if (top + rect.height > vpRect.bottom) {
+        top = vpRect.bottom - rect.height;
+      }
+      el.style.left = Math.max(left, 0) + "px";
+      el.style.top = Math.max(top, 0) + "px";
+    },
+    showAtCenter: function() {
+      var vpRect = uiUtils.getViewportRect();
+
+      if (!this.fullscreen) {
+        this.getDom().style.display = "";
+        var popSize = this.fitSize();
+        var titleHeight = this.getDom("titlebar").offsetHeight | 0;
+        var left = vpRect.width / 2 - popSize.width / 2;
+        var top =
+          vpRect.height / 2 - (popSize.height - titleHeight) / 2 - titleHeight;
+        var popEl = this.getDom();
+        this.safeSetOffset({
+          left: Math.max(left | 0, 0),
+          top: Math.max(top | 0, 0)
+        });
+        if (!domUtils.hasClass(popEl, "edui-state-centered")) {
+          popEl.className += " edui-state-centered";
+        }
+      } else {
+        var dialogWrapNode = this.getDom(),
+          contentNode = this.getDom("content");
+
+        dialogWrapNode.style.display = "block";
+
+        var wrapRect = UE.ui.uiUtils.getClientRect(dialogWrapNode),
+          contentRect = UE.ui.uiUtils.getClientRect(contentNode);
+        dialogWrapNode.style.left = "-100000px";
+
+        contentNode.style.width =
+          vpRect.width - wrapRect.width + contentRect.width + "px";
+        contentNode.style.height =
+          vpRect.height - wrapRect.height + contentRect.height + "px";
+
+        dialogWrapNode.style.width = vpRect.width + "px";
+        dialogWrapNode.style.height = vpRect.height + "px";
+        dialogWrapNode.style.left = 0;
+
+        //保存环境的overflow值
+        this._originalContext = {
+          html: {
+            overflowX: document.documentElement.style.overflowX,
+            overflowY: document.documentElement.style.overflowY
+          },
+          body: {
+            overflowX: document.body.style.overflowX,
+            overflowY: document.body.style.overflowY
+          }
+        };
+
+        document.documentElement.style.overflowX = "hidden";
+        document.documentElement.style.overflowY = "hidden";
+        document.body.style.overflowX = "hidden";
+        document.body.style.overflowY = "hidden";
+      }
+
+      this._show();
+    },
+    getContentHtml: function() {
+      var contentHtml = "";
+      if (typeof this.content == "string") {
+        contentHtml = this.content;
+      } else if (this.iframeUrl) {
+        contentHtml =
+          '<span id="' +
+          this.id +
+          '_contmask" class="dialogcontmask"></span><iframe id="' +
+          this.id +
+          '_iframe" class="%%-iframe" height="100%" width="100%" frameborder="0" src="' +
+          this.iframeUrl +
+          '"></iframe>';
+      }
+      return contentHtml;
+    },
+    getHtmlTpl: function() {
+      var footHtml = "";
+
+      if (this.buttons) {
+        var buff = [];
+        for (var i = 0; i < this.buttons.length; i++) {
+          buff[i] = this.buttons[i].renderHtml();
+        }
+        footHtml =
+          '<div class="%%-foot">' +
+          '<div id="##_buttons" class="%%-buttons">' +
+          buff.join("") +
+          "</div>" +
+          "</div>";
+      }
+
+      return (
+        '<div id="##" class="%%"><div ' +
+        (!this.fullscreen
+          ? 'class="%%"'
+          : 'class="%%-wrap edui-dialog-fullscreen-flag"') +
+        '><div id="##_body" class="%%-body">' +
+        '<div class="%%-shadow"></div>' +
+        '<div id="##_titlebar" class="%%-titlebar">' +
+        '<div class="%%-draghandle" onmousedown="$$._onTitlebarMouseDown(event, this);">' +
+        '<span class="%%-caption">' +
+        (this.title || "") +
+        "</span>" +
+        "</div>" +
+        this.closeButton.renderHtml() +
+        "</div>" +
+        '<div id="##_content" class="%%-content">' +
+        (this.autoReset ? "" : this.getContentHtml()) +
+        "</div>" +
+        footHtml +
+        "</div></div></div>"
+      );
+    },
+    postRender: function() {
+      // todo: 保持居中/记住上次关闭位置选项
+      if (!this.modalMask.getDom()) {
+        this.modalMask.render();
+        this.modalMask.hide();
+      }
+      if (!this.dragMask.getDom()) {
+        this.dragMask.render();
+        this.dragMask.hide();
+      }
+      var me = this;
+      this.addListener("show", function() {
+        me.modalMask.show(this.getDom().style.zIndex - 2);
+      });
+      this.addListener("hide", function() {
+        me.modalMask.hide();
+      });
+      if (this.buttons) {
+        for (var i = 0; i < this.buttons.length; i++) {
+          this.buttons[i].postRender();
+        }
+      }
+      domUtils.on(window, "resize", function() {
+        setTimeout(function() {
+          if (!me.isHidden()) {
+            me.safeSetOffset(uiUtils.getClientRect(me.getDom()));
+          }
+        });
+      });
+
+      //hold住scroll事件，防止dialog的滚动影响页面
+      //            if( this.holdScroll ) {
+      //
+      //                if( !me.iframeUrl ) {
+      //                    domUtils.on( document.getElementById( me.id + "_iframe"), !browser.gecko ? "mousewheel" : "DOMMouseScroll", function(e){
+      //                        domUtils.preventDefault(e);
+      //                    } );
+      //                } else {
+      //                    me.addListener('dialogafterreset', function(){
+      //                        window.setTimeout(function(){
+      //                            var iframeWindow = document.getElementById( me.id + "_iframe").contentWindow;
+      //
+      //                            if( browser.ie ) {
+      //
+      //                                var timer = window.setInterval(function(){
+      //
+      //                                    if( iframeWindow.document && iframeWindow.document.body ) {
+      //                                        window.clearInterval( timer );
+      //                                        timer = null;
+      //                                        domUtils.on( iframeWindow.document.body, !browser.gecko ? "mousewheel" : "DOMMouseScroll", function(e){
+      //                                            domUtils.preventDefault(e);
+      //                                        } );
+      //                                    }
+      //
+      //                                }, 100);
+      //
+      //                            } else {
+      //                                domUtils.on( iframeWindow, !browser.gecko ? "mousewheel" : "DOMMouseScroll", function(e){
+      //                                    domUtils.preventDefault(e);
+      //                                } );
+      //                            }
+      //
+      //                        }, 1);
+      //                    });
+      //                }
+      //
+      //            }
+      this._hide();
+    },
+    mesureSize: function() {
+      var body = this.getDom("body");
+      var width = uiUtils.getClientRect(this.getDom("content")).width;
+      var dialogBodyStyle = body.style;
+      dialogBodyStyle.width = width;
+      return uiUtils.getClientRect(body);
+    },
+    _onTitlebarMouseDown: function(evt, el) {
+      if (this.draggable) {
+        var rect;
+        var vpRect = uiUtils.getViewportRect();
+        var me = this;
+        uiUtils.startDrag(evt, {
+          ondragstart: function() {
+            rect = uiUtils.getClientRect(me.getDom());
+            me.getDom("contmask").style.visibility = "visible";
+            me.dragMask.show(me.getDom().style.zIndex - 1);
+          },
+          ondragmove: function(x, y) {
+            var left = rect.left + x;
+            var top = rect.top + y;
+            me.safeSetOffset({
+              left: left,
+              top: top
+            });
+          },
+          ondragstop: function() {
+            me.getDom("contmask").style.visibility = "hidden";
+            domUtils.removeClasses(me.getDom(), ["edui-state-centered"]);
+            me.dragMask.hide();
+          }
+        });
+      }
+    },
+    reset: function() {
+      this.getDom("content").innerHTML = this.getContentHtml();
+      this.fireEvent("dialogafterreset");
+    },
+    _show: function() {
+      if (this._hidden) {
+        this.getDom().style.display = "";
+
+        //要高过编辑器的zindxe
+        this.editor.container.style.zIndex &&
+          (this.getDom().style.zIndex =
+            this.editor.container.style.zIndex * 1 + 10);
+        this._hidden = false;
+        this.fireEvent("show");
+        baidu.editor.ui.uiUtils.getFixedLayer().style.zIndex =
+          this.getDom().style.zIndex - 4;
+      }
+    },
+    isHidden: function() {
+      return this._hidden;
+    },
+    _hide: function() {
+      if (!this._hidden) {
+        var wrapNode = this.getDom();
+        wrapNode.style.display = "none";
+        wrapNode.style.zIndex = "";
+        wrapNode.style.width = "";
+        wrapNode.style.height = "";
+        this._hidden = true;
+        this.fireEvent("hide");
+      }
+    },
+    open: function() {
+      if (this.autoReset) {
+        //有可能还没有渲染
+        try {
+          this.reset();
+        } catch (e) {
+          this.render();
+          this.open();
+        }
+      }
+      this.showAtCenter();
+      if (this.iframeUrl) {
+        try {
+          this.getDom("iframe").focus();
+        } catch (ex) {}
+      }
+      activeDialog = this;
+    },
+    _onCloseButtonClick: function(evt, el) {
+      this.close(false);
+    },
+    close: function(ok) {
+      if (this.fireEvent("close", ok) !== false) {
+        //还原环境
+        if (this.fullscreen) {
+          document.documentElement.style.overflowX = this._originalContext.html.overflowX;
+          document.documentElement.style.overflowY = this._originalContext.html.overflowY;
+          document.body.style.overflowX = this._originalContext.body.overflowX;
+          document.body.style.overflowY = this._originalContext.body.overflowY;
+          delete this._originalContext;
+        }
+        this._hide();
+
+        //销毁content
+        var content = this.getDom("content");
+        var iframe = this.getDom("iframe");
+        if (content && iframe) {
+          var doc = iframe.contentDocument || iframe.contentWindow.document;
+          doc && (doc.body.innerHTML = "");
+          domUtils.remove(content);
+        }
+      }
+    }
+  };
+  utils.inherits(Dialog, UIBase);
+})();
+
+
+// ui/menubutton.js
+///import core
+///import uicore
+///import ui/menu.js
+///import ui/splitbutton.js
+(function() {
+  var utils = baidu.editor.utils,
+    Menu = baidu.editor.ui.Menu,
+    SplitButton = baidu.editor.ui.SplitButton,
+    MenuButton = (baidu.editor.ui.MenuButton = function(options) {
+      this.initOptions(options);
+      this.initMenuButton();
+    });
+  MenuButton.prototype = {
+    initMenuButton: function() {
+      var me = this;
+      this.uiName = "menubutton";
+      this.popup = new Menu({
+        items: me.items,
+        className: me.className,
+        editor: me.editor
+      });
+      this.popup.addListener("show", function() {
+        var list = this;
+        for (var i = 0; i < list.items.length; i++) {
+          list.items[i].removeState("checked");
+          if (list.items[i].value == me._value) {
+            list.items[i].addState("checked");
+            this.value = me._value;
+          }
+        }
+      });
+      this.initSplitButton();
+    },
+    setValue: function(value) {
+      this._value = value;
+    }
+  };
+  utils.inherits(MenuButton, SplitButton);
+})();
+
+
+// ui/multiMenu.js
+///import core
+///import uicore
+///commands 表情
+(function() {
+  var utils = baidu.editor.utils,
+    Popup = baidu.editor.ui.Popup,
+    SplitButton = baidu.editor.ui.SplitButton,
+    MultiMenuPop = (baidu.editor.ui.MultiMenuPop = function(options) {
+      this.initOptions(options);
+      this.initMultiMenu();
+    });
+
+  MultiMenuPop.prototype = {
+    initMultiMenu: function() {
+      var me = this;
+      this.popup = new Popup({
+        content: "",
+        editor: me.editor,
+        iframe_rendered: false,
+        onshow: function() {
+          if (!this.iframe_rendered) {
+            this.iframe_rendered = true;
+            this.getDom("content").innerHTML =
+              '<iframe id="' +
+              me.id +
+              '_iframe" src="' +
+              me.iframeUrl +
+              '" frameborder="0"></iframe>';
+            me.editor.container.style.zIndex &&
+              (this.getDom().style.zIndex =
+                me.editor.container.style.zIndex * 1 + 1);
+          }
+        }
+        // canSideUp:false,
+        // canSideLeft:false
+      });
+      this.onbuttonclick = function() {
+        this.showPopup();
+      };
+      this.initSplitButton();
+    }
+  };
+
+  utils.inherits(MultiMenuPop, SplitButton);
+})();
+
+
+// ui/shortcutmenu.js
+(function() {
+  var UI = baidu.editor.ui,
+    UIBase = UI.UIBase,
+    uiUtils = UI.uiUtils,
+    utils = baidu.editor.utils,
+    domUtils = baidu.editor.dom.domUtils;
+
+  var allMenus = [], //存储所有快捷菜单
+    timeID,
+    isSubMenuShow = false; //是否有子pop显示
+
+  var ShortCutMenu = (UI.ShortCutMenu = function(options) {
+    this.initOptions(options);
+    this.initShortCutMenu();
+  });
+
+  ShortCutMenu.postHide = hideAllMenu;
+
+  ShortCutMenu.prototype = {
+    isHidden: true,
+    SPACE: 5,
+    initShortCutMenu: function() {
+      this.items = this.items || [];
+      this.initUIBase();
+      this.initItems();
+      this.initEvent();
+      allMenus.push(this);
+    },
+    initEvent: function() {
+      var me = this,
+        doc = me.editor.document;
+
+      /*
+      domUtils.on(doc, "mousemove", function(e) {
+        if (me.isHidden === false) {
+          //有pop显示就不隐藏快捷菜单
+          if (me.getSubMenuMark() || me.eventType == "contextmenu") return;
+
+          var flag = true,
+            el = me.getDom(),
+            wt = el.offsetWidth,
+            ht = el.offsetHeight,
+            distanceX = wt / 2 + me.SPACE, //距离中心X标准
+            distanceY = ht / 2, //距离中心Y标准
+            x = Math.abs(e.screenX - me.left), //离中心距离横坐标
+            y = Math.abs(e.screenY - me.top); //离中心距离纵坐标
+
+          clearTimeout(timeID);
+          timeID = setTimeout(function() {
+            if (y > 0 && y < distanceY) {
+              me.setOpacity(el, "1");
+            } else if (y > distanceY && y < distanceY + 70) {
+              me.setOpacity(el, "0.5");
+              flag = false;
+            } else if (y > distanceY + 70 && y < distanceY + 140) {
+              me.hide();
+            }
+
+            if (flag && x > 0 && x < distanceX) {
+              me.setOpacity(el, "1");
+            } else if (x > distanceX && x < distanceX + 70) {
+              me.setOpacity(el, "0.5");
+            } else if (x > distanceX + 70 && x < distanceX + 140) {
+                console.log('hide')
+              me.hide();
+            }
+          });
+        }
+      });
+      */
+      //ie\ff下 mouseout不准
+      /*
+      if (browser.chrome) {
+        domUtils.on(doc, "mouseout", function(e) {
+          var relatedTgt = e.relatedTarget || e.toElement;
+
+          if (relatedTgt == null || relatedTgt.tagName == "HTML") {
+            me.hide();
+          }
+        });
+      }
+       */
+
+      me.editor.addListener("afterhidepop", function() {
+        if (!me.isHidden) {
+          isSubMenuShow = true;
+        }
+      });
+    },
+    initItems: function() {
+      if (utils.isArray(this.items)) {
+        for (var i = 0, len = this.items.length; i < len; i++) {
+          var item = this.items[i].toLowerCase();
+
+          if (UI[item]) {
+            this.items[i] = new UI[item](this.editor);
+            this.items[i].className += " edui-shortcutsubmenu ";
+          }
+        }
+      }
+    },
+    setOpacity: function(el, value) {
+      if (browser.ie && browser.version < 9) {
+        el.style.filter = "alpha(opacity = " + parseFloat(value) * 100 + ");";
+      } else {
+        el.style.opacity = value;
+      }
+    },
+    getSubMenuMark: function() {
+      isSubMenuShow = false;
+      var layerEle = uiUtils.getFixedLayer();
+      var list = domUtils.getElementsByTagName(layerEle, "div", function(node) {
+        return domUtils.hasClass(node, "edui-shortcutsubmenu edui-popup");
+      });
+
+      for (var i = 0, node; (node = list[i++]); ) {
+        if (node.style.display != "none") {
+          isSubMenuShow = true;
+        }
+      }
+      return isSubMenuShow;
+    },
+    show: function(e, hasContextmenu) {
+      var me = this,
+        offset = {},
+        el = this.getDom(),
+        fixedlayer = uiUtils.getFixedLayer();
+
+      function setPos(offset) {
+        if (offset.left < 0) {
+          offset.left = 0;
+        }
+        if (offset.top < 0) {
+          offset.top = 0;
+        }
+        el.style.cssText =
+          "position:absolute;left:" +
+          offset.left +
+          "px;top:" +
+          offset.top +
+          "px;";
+      }
+
+      function setPosByCxtMenu(menu) {
+        if (!menu.tagName) {
+          menu = menu.getDom();
+        }
+        offset.left = parseInt(menu.style.left);
+        offset.top = parseInt(menu.style.top);
+        offset.top -= el.offsetHeight + 15;
+        setPos(offset);
+      }
+
+      me.eventType = e.type;
+      el.style.cssText = "display:block;left:-9999px";
+
+      if (e.type == "contextmenu" && hasContextmenu) {
+        var menu = domUtils.getElementsByTagName(
+          fixedlayer,
+          "div",
+          "edui-contextmenu"
+        )[0];
+        if (menu) {
+          setPosByCxtMenu(menu);
+        } else {
+          me.editor.addListener("aftershowcontextmenu", function(type, menu) {
+            setPosByCxtMenu(menu);
+          });
+        }
+      } else {
+        offset = uiUtils.getViewportOffsetByEvent(e);
+        offset.top -= el.offsetHeight + me.SPACE;
+        offset.left += me.SPACE + 20;
+        setPos(offset);
+        me.setOpacity(el, 1);
+      }
+
+      me.isHidden = false;
+      me.left = e.screenX + el.offsetWidth / 2 - me.SPACE;
+      me.top = e.screenY - el.offsetHeight / 2 - me.SPACE;
+
+      if (me.editor) {
+        el.style.zIndex = me.editor.container.style.zIndex * 1 + 10;
+        fixedlayer.style.zIndex = el.style.zIndex - 1;
+      }
+    },
+    hide: function() {
+      if (this.getDom()) {
+        this.getDom().style.display = "none";
+      }
+      this.isHidden = true;
+    },
+    postRender: function() {
+      if (utils.isArray(this.items)) {
+        for (var i = 0, item; (item = this.items[i++]); ) {
+          item.postRender();
+        }
+      }
+    },
+    getHtmlTpl: function() {
+      var buff;
+      if (utils.isArray(this.items)) {
+        buff = [];
+        for (var i = 0; i < this.items.length; i++) {
+          buff[i] = this.items[i].renderHtml();
+        }
+        buff = buff.join("");
+      } else {
+        buff = this.items;
+      }
+
+      return (
+        '<div id="##" class="%% edui-toolbar" data-src="shortcutmenu" onmousedown="return false;" onselectstart="return false;" >' +
+        buff +
+        "</div>"
+      );
+    }
+  };
+
+  utils.inherits(ShortCutMenu, UIBase);
+
+  function hideAllMenu(e) {
+    var tgt = e.target || e.srcElement,
+      cur = domUtils.findParent(
+        tgt,
+        function(node) {
+          return (
+            domUtils.hasClass(node, "edui-shortcutmenu") ||
+            domUtils.hasClass(node, "edui-popup")
+          );
+        },
+        true
+      );
+
+    if (!cur) {
+      for (var i = 0, menu; (menu = allMenus[i++]); ) {
+        menu.hide();
+      }
+    }
+  }
+
+  domUtils.on(document, "mousedown", function(e) {
+    hideAllMenu(e);
+  });
+
+  domUtils.on(window, "scroll", function(e) {
+    hideAllMenu(e);
+  });
+})();
+
+
+// ui/breakline.js
+(function() {
+  var utils = baidu.editor.utils,
+    UIBase = baidu.editor.ui.UIBase,
+    Breakline = (baidu.editor.ui.Breakline = function(options) {
+      this.initOptions(options);
+      this.initSeparator();
+    });
+  Breakline.prototype = {
+    uiName: "Breakline",
+    initSeparator: function() {
+      this.initUIBase();
+    },
+    getHtmlTpl: function() {
+      return "<br/>";
+    }
+  };
+  utils.inherits(Breakline, UIBase);
+})();
+
+
+// ui/message.js
+///import core
+///import uicore
+(function() {
+  var utils = baidu.editor.utils,
+    domUtils = baidu.editor.dom.domUtils,
+    UIBase = baidu.editor.ui.UIBase,
+    Message = (baidu.editor.ui.Message = function(options) {
+      this.initOptions(options);
+      this.initMessage();
+    });
+
+  Message.prototype = {
+    initMessage: function() {
+      this.initUIBase();
+    },
+    getHtmlTpl: function() {
+      return (
+        '<div id="##" class="edui-message %%">' +
+        ' <div id="##_closer" class="edui-message-closer">×</div>' +
+        ' <div id="##_body" class="edui-message-body edui-message-type-info">' +
+        ' <iframe style="position:absolute;z-index:-1;left:0;top:0;background-color: transparent;" frameborder="0" width="100%" height="100%" src="about:blank"></iframe>' +
+        ' <div class="edui-shadow"></div>' +
+        ' <div id="##_content" class="edui-message-content">' +
+        "  </div>" +
+        " </div>" +
+        "</div>"
+      );
+    },
+    reset: function(opt) {
+      var me = this;
+      if (!opt.keepshow) {
+        clearTimeout(this.timer);
+        me.timer = setTimeout(function() {
+          me.hide();
+        }, opt.timeout || 4000);
+      }
+
+      opt.content !== undefined && me.setContent(opt.content);
+      opt.type !== undefined && me.setType(opt.type);
+
+      me.show();
+    },
+    postRender: function() {
+      var me = this,
+        closer = this.getDom("closer");
+      closer &&
+        domUtils.on(closer, "click", function() {
+          me.hide();
+        });
+    },
+    setContent: function(content) {
+      this.getDom("content").innerHTML = content;
+    },
+    setType: function(type) {
+      type = type || "info";
+      var body = this.getDom("body");
+      body.className = body.className.replace(
+        /edui-message-type-[\w-]+/,
+        "edui-message-type-" + type
+      );
+    },
+    getContent: function() {
+      return this.getDom("content").innerHTML;
+    },
+    getType: function() {
+      var arr = this.getDom("body").match(/edui-message-type-([\w-]+)/);
+      return arr ? arr[1] : "";
+    },
+    show: function() {
+      this.getDom().style.display = "block";
+    },
+    hide: function() {
+      var dom = this.getDom();
+      if (dom) {
+        dom.style.display = "none";
+        dom.parentNode && dom.parentNode.removeChild(dom);
+      }
+    }
+  };
+
+  utils.inherits(Message, UIBase);
+})();
+
+
+// adapter/editorui.js
+//ui跟编辑器的适配層
+//那个按钮弹出是dialog，是下拉筐等都是在这个js中配置
+//自己写的ui也要在这里配置，放到baidu.editor.ui下边，当编辑器实例化的时候会根据ueditor.config中的toolbars找到相应的进行实例化
+(function() {
+  var utils = baidu.editor.utils;
+  var editorui = baidu.editor.ui;
+  var _Dialog = editorui.Dialog;
+  editorui.buttons = {};
+
+  editorui.Dialog = function(options) {
+    var dialog = new _Dialog(options);
+    dialog.addListener("hide", function() {
+      if (dialog.editor) {
+        var editor = dialog.editor;
+        try {
+          if (browser.gecko) {
+            var y = editor.window.scrollY,
+              x = editor.window.scrollX;
+            editor.body.focus();
+            editor.window.scrollTo(x, y);
+          } else {
+            editor.focus();
+          }
+        } catch (ex) {}
+      }
+    });
+    return dialog;
+  };
+
+  var iframeUrlMap = {
+    anchor: "~/dialogs/anchor/anchor.html?20220503",
+    insertimage: "~/dialogs/image/image.html?20220503",
+    link: "~/dialogs/link/link.html?20220503",
+    spechars: "~/dialogs/spechars/spechars.html?20220503",
+    searchreplace: "~/dialogs/searchreplace/searchreplace.html?20220503",
+    insertvideo: "~/dialogs/video/video.html?20220503",
+    help: "~/dialogs/help/help.html?20220503",
+    preview: "~/dialogs/preview/preview.html?20220503",
+    emotion: "~/dialogs/emotion/emotion.html?20220503",
+    wordimage: "~/dialogs/wordimage/wordimage.html?20220902",
+    formula: "~/dialogs/formula/formula.html?20220902",
+    attachment: "~/dialogs/attachment/attachment.html?20220503",
+    insertframe: "~/dialogs/insertframe/insertframe.html?20220503",
+    edittip: "~/dialogs/table/edittip.html?20220503",
+    edittable: "~/dialogs/table/edittable.html?20220503",
+    edittd: "~/dialogs/table/edittd.html?20220503",
+    scrawl: "~/dialogs/scrawl/scrawl.html?20220503",
+    template: "~/dialogs/template/template.html?20220503",
+    background: "~/dialogs/background/background.html?20220503",
+  };
+  //为工具栏添加按钮，以下都是统一的按钮触发命令，所以写在一起
+  var btnCmds = [
+    "undo",
+    "redo",
+    "formatmatch",
+    "bold",
+    "italic",
+    "underline",
+    "fontborder",
+    "touppercase",
+    "tolowercase",
+    "strikethrough",
+    "subscript",
+    "superscript",
+    "source",
+    "indent",
+    "outdent",
+    "blockquote",
+    "pasteplain",
+    "pagebreak",
+    "selectall",
+    "print",
+    "horizontal",
+    "removeformat",
+    "time",
+    "date",
+    "unlink",
+    "insertparagraphbeforetable",
+    "insertrow",
+    "insertcol",
+    "mergeright",
+    "mergedown",
+    "deleterow",
+    "deletecol",
+    "splittorows",
+    "splittocols",
+    "splittocells",
+    "mergecells",
+    "deletetable",
+  ];
+
+  for (var i = 0, ci; (ci = btnCmds[i++]); ) {
+    ci = ci.toLowerCase();
+    editorui[ci] = (function(cmd) {
+      return function(editor) {
+        var ui = new editorui.Button({
+          className: "edui-for-" + cmd,
+          title:
+            editor.options.labelMap[cmd] ||
+              editor.getLang("labelMap." + cmd) ||
+              "",
+          onclick: function() {
+            editor.execCommand(cmd);
+          },
+          theme: editor.options.theme,
+          showText: false
+        });
+        editorui.buttons[cmd] = ui;
+        editor.addListener("selectionchange", function(
+          type,
+          causeByUi,
+          uiReady
+        ) {
+          var state = editor.queryCommandState(cmd);
+          // console.log('selectionchange',cmd,uiReady,state);
+          if (state == -1) {
+            ui.setDisabled(true);
+            ui.setChecked(false);
+          } else {
+            if (!uiReady) {
+              ui.setDisabled(false);
+              ui.setChecked(state);
+            }
+          }
+        });
+        return ui;
+      };
+    })(ci);
+  }
+
+  //清除文档
+  editorui.cleardoc = function(editor) {
+    var ui = new editorui.Button({
+      className: "edui-for-cleardoc",
+      title:
+        editor.options.labelMap.cleardoc ||
+          editor.getLang("labelMap.cleardoc") ||
+          "",
+      theme: editor.options.theme,
+      onclick: function() {
+        if (confirm(editor.getLang("confirmClear"))) {
+          editor.execCommand("cleardoc");
+        }
+      }
+    });
+    editorui.buttons["cleardoc"] = ui;
+    editor.addListener("selectionchange", function() {
+      ui.setDisabled(editor.queryCommandState("cleardoc") == -1);
+    });
+    return ui;
+  };
+
+  //排版，图片排版，文字方向
+  var typeset = {
+    justify: ["left", "right", "center", "justify"],
+    imagefloat: ["none", "left", "center", "right"],
+    directionality: ["ltr", "rtl"]
+  };
+
+  for (var p in typeset) {
+    (function(cmd, val) {
+      for (var i = 0, ci; (ci = val[i++]); ) {
+        (function(cmd2) {
+          editorui[cmd.replace("float", "") + cmd2] = function(editor) {
+            var ui = new editorui.Button({
+              className: "edui-for-" + cmd.replace("float", "") + cmd2,
+              title:
+                editor.options.labelMap[cmd.replace("float", "") + cmd2] ||
+                  editor.getLang(
+                    "labelMap." + cmd.replace("float", "") + cmd2
+                  ) ||
+                  "",
+              theme: editor.options.theme,
+              onclick: function() {
+                editor.execCommand(cmd, cmd2);
+              }
+            });
+            editorui.buttons[cmd] = ui;
+            editor.addListener("selectionchange", function(
+              type,
+              causeByUi,
+              uiReady
+            ) {
+              ui.setDisabled(editor.queryCommandState(cmd) == -1);
+              ui.setChecked(editor.queryCommandValue(cmd) == cmd2 && !uiReady);
+            });
+            return ui;
+          };
+        })(ci);
+      }
+    })(p, typeset[p]);
+  }
+
+  //字体颜色和背景颜色
+  for (var i = 0, ci; (ci = ["backcolor", "forecolor"][i++]); ) {
+    editorui[ci] = (function(cmd) {
+      return function(editor) {
+        var ui = new editorui.ColorButton({
+          className: "edui-for-" + cmd,
+          color: "default",
+          title:
+            editor.options.labelMap[cmd] ||
+              editor.getLang("labelMap." + cmd) ||
+              "",
+          editor: editor,
+          onpickcolor: function(t, color) {
+            editor.execCommand(cmd, color);
+          },
+          onpicknocolor: function() {
+            editor.execCommand(cmd, "default");
+            this.setColor("transparent");
+            this.color = "default";
+          },
+          onbuttonclick: function() {
+            editor.execCommand(cmd, this.color);
+          }
+        });
+        editorui.buttons[cmd] = ui;
+        editor.addListener("selectionchange", function() {
+          ui.setDisabled(editor.queryCommandState(cmd) == -1);
+        });
+        return ui;
+      };
+    })(ci);
+  }
+
+  var dialogBtns = {
+    noOk: ["searchreplace", "help", "spechars", "preview"],
+    ok: [
+      "attachment",
+      "anchor",
+      "link",
+      "insertimage",
+      "insertframe",
+      "wordimage",
+      "insertvideo",
+      "insertframe",
+      "edittip",
+      "edittable",
+      "edittd",
+      "scrawl",
+      "template",
+      "formula",
+      "background",
+    ]
+  };
+
+  for (var p in dialogBtns) {
+    (function(type, vals) {
+      for (var i = 0, ci; (ci = vals[i++]); ) {
+        //todo opera下存在问题
+        if (browser.opera && ci === "searchreplace") {
+          continue;
+        }
+        (function(cmd) {
+          editorui[cmd] = function(editor, iframeUrl, title) {
+            iframeUrl =
+              iframeUrl ||
+              (editor.options.iframeUrlMap || {})[cmd] ||
+              iframeUrlMap[cmd];
+            title =
+              editor.options.labelMap[cmd] ||
+              editor.getLang("labelMap." + cmd) ||
+              "";
+
+            var dialog;
+            //没有iframeUrl不创建dialog
+            if (iframeUrl) {
+              dialog = new editorui.Dialog(
+                utils.extend(
+                  {
+                    iframeUrl: editor.ui.mapUrl(iframeUrl),
+                    editor: editor,
+                    className: "edui-for-" + cmd,
+                    title: title,
+                    holdScroll: cmd === "insertimage",
+                    fullscreen: /preview/.test(cmd),
+                    closeDialog: editor.getLang("closeDialog")
+                  },
+                  type == "ok"
+                    ? {
+                        buttons: [
+                          {
+                            className: "edui-okbutton",
+                            label: editor.getLang("ok"),
+                            editor: editor,
+                            onclick: function() {
+                              dialog.close(true);
+                            }
+                          },
+                          {
+                            className: "edui-cancelbutton",
+                            label: editor.getLang("cancel"),
+                            editor: editor,
+                            onclick: function() {
+                              dialog.close(false);
+                            }
+                          }
+                        ]
+                      }
+                    : {}
+                )
+              );
+
+              editor.ui._dialogs[cmd + "Dialog"] = dialog;
+            }
+
+            var ui = new editorui.Button({
+              className: "edui-for-" + cmd,
+              title: title,
+              onclick: function() {
+                if(editor.options.toolbarCallback){
+                    if(true === editor.options.toolbarCallback(cmd,editor)){
+                       return;
+                    }
+                }
+                if (dialog) {
+                  switch (cmd) {
+                    case "wordimage":
+                      var images = editor.execCommand("wordimage");
+                      if (images && images.length) {
+                        dialog.render();
+                        dialog.open();
+                      }
+                      break;
+                    case "scrawl":
+                      if (editor.queryCommandState("scrawl") != -1) {
+                        dialog.render();
+                        dialog.open();
+                      }
+
+                      break;
+                    default:
+                      dialog.render();
+                      dialog.open();
+                  }
+                }
+              },
+              theme: editor.options.theme,
+              disabled:
+                (cmd == "scrawl" && editor.queryCommandState("scrawl") == -1)
+            });
+            editorui.buttons[cmd] = ui;
+            editor.addListener("selectionchange", function() {
+              //只存在于右键菜单而无工具栏按钮的ui不需要检测状态
+              var unNeedCheckState = { edittable: 1 };
+              if (cmd in unNeedCheckState) return;
+
+              var state = editor.queryCommandState(cmd);
+              if (ui.getDom()) {
+                ui.setDisabled(state == -1);
+                ui.setChecked(state);
+              }
+            });
+
+            return ui;
+          };
+        })(ci.toLowerCase());
+      }
+    })(p, dialogBtns[p]);
+  }
+
+  editorui.insertcode = function(editor, list, title) {
+    list = editor.options["insertcode"] || [];
+    title =
+      editor.options.labelMap["insertcode"] ||
+      editor.getLang("labelMap.insertcode") ||
+      "";
+    // if (!list.length) return;
+    var items = [];
+    utils.each(list, function(key, val) {
+      items.push({
+        label: key,
+        value: val,
+        theme: editor.options.theme,
+        renderLabelHtml: function() {
+          return (
+            '<div class="edui-label %%-label" >' + (this.label || "") + "</div>"
+          );
+        }
+      });
+    });
+
+    var ui = new editorui.Combox({
+      editor: editor,
+      items: items,
+      onselect: function(t, index) {
+        editor.execCommand("insertcode", this.items[index].value);
+      },
+      onbuttonclick: function() {
+        this.showPopup();
+      },
+      title: title,
+      initValue: title,
+      className: "edui-for-insertcode",
+      indexByValue: function(value) {
+        if (value) {
+          for (var i = 0, ci; (ci = this.items[i]); i++) {
+            if (ci.value.indexOf(value) != -1) return i;
+          }
+        }
+
+        return -1;
+      }
+    });
+    editorui.buttons["insertcode"] = ui;
+    editor.addListener("selectionchange", function(type, causeByUi, uiReady) {
+      if (!uiReady) {
+        var state = editor.queryCommandState("insertcode");
+        if (state == -1) {
+          ui.setDisabled(true);
+        } else {
+          ui.setDisabled(false);
+          var value = editor.queryCommandValue("insertcode");
+          if (!value) {
+            ui.setValue(title);
+            return;
+          }
+          //trace:1871 ie下从源码模式切换回来时，字体会带单引号，而且会有逗号
+          value && (value = value.replace(/['"]/g, "").split(",")[0]);
+          ui.setValue(value);
+        }
+      }
+    });
+    return ui;
+  };
+  editorui.fontfamily = function(editor, list, title) {
+    list = editor.options["fontfamily"] || [];
+    title =
+      editor.options.labelMap["fontfamily"] ||
+      editor.getLang("labelMap.fontfamily") ||
+      "";
+    if (!list.length) return;
+    for (var i = 0, ci, items = []; (ci = list[i]); i++) {
+      var langLabel = editor.getLang("fontfamily")[ci.name] || "";
+      (function(key, val) {
+        items.push({
+          label: key,
+          value: val,
+          theme: editor.options.theme,
+          renderLabelHtml: function() {
+            return (
+              '<div class="edui-label %%-label" style="font-family:' +
+              utils.unhtml(this.value) +
+              '">' +
+              (this.label || "") +
+              "</div>"
+            );
+          }
+        });
+      })(ci.label || langLabel, ci.val);
+    }
+    var ui = new editorui.Combox({
+      editor: editor,
+      items: items,
+      onselect: function(t, index) {
+        editor.execCommand("FontFamily", this.items[index].value);
+      },
+      onbuttonclick: function() {
+        this.showPopup();
+      },
+      title: title,
+      initValue: title,
+      className: "edui-for-fontfamily",
+      indexByValue: function(value) {
+        if (value) {
+          for (var i = 0, ci; (ci = this.items[i]); i++) {
+            if (ci.value.indexOf(value) != -1) return i;
+          }
+        }
+
+        return -1;
+      }
+    });
+    editorui.buttons["fontfamily"] = ui;
+    editor.addListener("selectionchange", function(type, causeByUi, uiReady) {
+      if (!uiReady) {
+        var state = editor.queryCommandState("FontFamily");
+        if (state == -1) {
+          ui.setDisabled(true);
+        } else {
+          ui.setDisabled(false);
+          var value = editor.queryCommandValue("FontFamily");
+          //trace:1871 ie下从源码模式切换回来时，字体会带单引号，而且会有逗号
+          value && (value = value.replace(/['"]/g, "").split(",")[0]);
+          ui.setValue(value);
+        }
+      }
+    });
+    return ui;
+  };
+
+  editorui.fontsize = function(editor, list, title) {
+    title =
+      editor.options.labelMap["fontsize"] ||
+      editor.getLang("labelMap.fontsize") ||
+      "";
+    list = list || editor.options["fontsize"] || [];
+    if (!list.length) return;
+    var items = [];
+    for (var i = 0; i < list.length; i++) {
+      var size = list[i] + "px";
+      items.push({
+        label: size,
+        value: size,
+        theme: editor.options.theme,
+        renderLabelHtml: function() {
+          return (
+            '<div class="edui-label %%-label" style="line-height:1;font-size:' +
+            this.value +
+            '">' +
+            (this.label || "") +
+            "</div>"
+          );
+        }
+      });
+    }
+    var ui = new editorui.Combox({
+      editor: editor,
+      items: items,
+      title: title,
+      initValue: title,
+      onselect: function(t, index) {
+        editor.execCommand("FontSize", this.items[index].value);
+      },
+      onbuttonclick: function() {
+        this.showPopup();
+      },
+      className: "edui-for-fontsize"
+    });
+    editorui.buttons["fontsize"] = ui;
+    editor.addListener("selectionchange", function(type, causeByUi, uiReady) {
+      if (!uiReady) {
+        var state = editor.queryCommandState("FontSize");
+        if (state == -1) {
+          ui.setDisabled(true);
+        } else {
+          ui.setDisabled(false);
+          ui.setValue(editor.queryCommandValue("FontSize"));
+        }
+      }
+    });
+    return ui;
+  };
+
+  editorui.paragraph = function(editor, list, title) {
+    title =
+      editor.options.labelMap["paragraph"] ||
+      editor.getLang("labelMap.paragraph") ||
+      "";
+    list = editor.options["paragraph"] || [];
+    if (utils.isEmptyObject(list)) return;
+    var items = [];
+    for (var i in list) {
+      items.push({
+        value: i,
+        label: list[i] || editor.getLang("paragraph")[i],
+        theme: editor.options.theme,
+        renderLabelHtml: function() {
+          return (
+            '<div class="edui-label %%-label"><span class="edui-for-' +
+            this.value +
+            '">' +
+            (this.label || "") +
+            "</span></div>"
+          );
+        }
+      });
+    }
+    var ui = new editorui.Combox({
+      editor: editor,
+      items: items,
+      title: title,
+      initValue: title,
+      className: "edui-for-paragraph",
+      onselect: function(t, index) {
+        editor.execCommand("Paragraph", this.items[index].value);
+      },
+      onbuttonclick: function() {
+        this.showPopup();
+      }
+    });
+    editorui.buttons["paragraph"] = ui;
+    editor.addListener("selectionchange", function(type, causeByUi, uiReady) {
+      if (!uiReady) {
+        var state = editor.queryCommandState("Paragraph");
+        if (state == -1) {
+          ui.setDisabled(true);
+        } else {
+          ui.setDisabled(false);
+          var value = editor.queryCommandValue("Paragraph");
+          var index = ui.indexByValue(value);
+          if (index != -1) {
+            ui.setValue(value);
+          } else {
+            ui.setValue(ui.initValue);
+          }
+        }
+      }
+    });
+    return ui;
+  };
+
+  //自定义标题
+  editorui.customstyle = function(editor) {
+    var list = editor.options["customstyle"] || [],
+      title =
+        editor.options.labelMap["customstyle"] ||
+        editor.getLang("labelMap.customstyle") ||
+        "";
+    if (!list.length) return;
+    var langCs = editor.getLang("customstyle");
+    for (var i = 0, items = [], t; (t = list[i++]); ) {
+      (function(t) {
+        var ck = {};
+        ck.label = t.label ? t.label : langCs[t.name];
+        ck.style = t.style;
+        ck.className = t.className;
+        ck.tag = t.tag;
+        items.push({
+          label: ck.label,
+          value: ck,
+          theme: editor.options.theme,
+          renderLabelHtml: function() {
+            return (
+              '<div class="edui-label %%-label">' +
+              "<" +
+              ck.tag +
+              " " +
+              (ck.className ? ' class="' + ck.className + '"' : "") +
+              (ck.style ? ' style="' + ck.style + '"' : "") +
+              ">" +
+              ck.label +
+              "</" +
+              ck.tag +
+              ">" +
+              "</div>"
+            );
+          }
+        });
+      })(t);
+    }
+
+    var ui = new editorui.Combox({
+      editor: editor,
+      items: items,
+      title: title,
+      initValue: title,
+      className: "edui-for-customstyle",
+      onselect: function(t, index) {
+        editor.execCommand("customstyle", this.items[index].value);
+      },
+      onbuttonclick: function() {
+        this.showPopup();
+      },
+      indexByValue: function(value) {
+        for (var i = 0, ti; (ti = this.items[i++]); ) {
+          if (ti.label == value) {
+            return i - 1;
+          }
+        }
+        return -1;
+      }
+    });
+    editorui.buttons["customstyle"] = ui;
+    editor.addListener("selectionchange", function(type, causeByUi, uiReady) {
+      if (!uiReady) {
+        var state = editor.queryCommandState("customstyle");
+        if (state == -1) {
+          ui.setDisabled(true);
+        } else {
+          ui.setDisabled(false);
+          var value = editor.queryCommandValue("customstyle");
+          var index = ui.indexByValue(value);
+          if (index != -1) {
+            ui.setValue(value);
+          } else {
+            ui.setValue(ui.initValue);
+          }
+        }
+      }
+    });
+    return ui;
+  };
+  editorui.inserttable = function(editor, iframeUrl, title) {
+    title =
+      editor.options.labelMap["inserttable"] ||
+      editor.getLang("labelMap.inserttable") ||
+      "";
+    var ui = new editorui.TableButton({
+      editor: editor,
+      title: title,
+      className: "edui-for-inserttable",
+      onpicktable: function(t, numCols, numRows) {
+        editor.execCommand("InsertTable", {
+          numRows: numRows,
+          numCols: numCols,
+          border: 1
+        });
+      },
+      onbuttonclick: function() {
+        this.showPopup();
+      }
+    });
+    editorui.buttons["inserttable"] = ui;
+    editor.addListener("selectionchange", function() {
+      ui.setDisabled(editor.queryCommandState("inserttable") == -1);
+    });
+    return ui;
+  };
+
+  editorui.lineheight = function(editor) {
+    var val = editor.options.lineheight || [];
+    if (!val.length) return;
+    for (var i = 0, ci, items = []; (ci = val[i++]); ) {
+      items.push({
+        //todo:写死了
+        label: ci,
+        value: ci,
+        theme: editor.options.theme,
+        onclick: function() {
+          editor.execCommand("lineheight", this.value);
+        }
+      });
+    }
+    var ui = new editorui.MenuButton({
+      editor: editor,
+      className: "edui-for-lineheight",
+      title:
+        editor.options.labelMap["lineheight"] ||
+          editor.getLang("labelMap.lineheight") ||
+          "",
+      items: items,
+      onbuttonclick: function() {
+        var value = editor.queryCommandValue("LineHeight") || this.value;
+        editor.execCommand("LineHeight", value);
+      }
+    });
+    editorui.buttons["lineheight"] = ui;
+    editor.addListener("selectionchange", function() {
+      var state = editor.queryCommandState("LineHeight");
+      if (state == -1) {
+        ui.setDisabled(true);
+      } else {
+        ui.setDisabled(false);
+        var value = editor.queryCommandValue("LineHeight");
+        value && ui.setValue((value + "").replace(/cm/, ""));
+        ui.setChecked(state);
+      }
+    });
+    return ui;
+  };
+
+  var rowspacings = ["top", "bottom"];
+  for (var r = 0, ri; (ri = rowspacings[r++]); ) {
+    (function(cmd) {
+      editorui["rowspacing" + cmd] = function(editor) {
+        var val = editor.options["rowspacing" + cmd] || [];
+        if (!val.length) return null;
+        for (var i = 0, ci, items = []; (ci = val[i++]); ) {
+          items.push({
+            label: ci,
+            value: ci,
+            theme: editor.options.theme,
+            onclick: function() {
+              editor.execCommand("rowspacing", this.value, cmd);
+            }
+          });
+        }
+        var ui = new editorui.MenuButton({
+          editor: editor,
+          className: "edui-for-rowspacing" + cmd,
+          title:
+            editor.options.labelMap["rowspacing" + cmd] ||
+              editor.getLang("labelMap.rowspacing" + cmd) ||
+              "",
+          items: items,
+          onbuttonclick: function() {
+            var value =
+              editor.queryCommandValue("rowspacing", cmd) || this.value;
+            editor.execCommand("rowspacing", value, cmd);
+          }
+        });
+        editorui.buttons[cmd] = ui;
+        editor.addListener("selectionchange", function() {
+          var state = editor.queryCommandState("rowspacing", cmd);
+          if (state == -1) {
+            ui.setDisabled(true);
+          } else {
+            ui.setDisabled(false);
+            var value = editor.queryCommandValue("rowspacing", cmd);
+            value && ui.setValue((value + "").replace(/%/, ""));
+            ui.setChecked(state);
+          }
+        });
+        return ui;
+      };
+    })(ri);
+  }
+  //有序，无序列表
+  var lists = ["insertorderedlist", "insertunorderedlist"];
+  for (var l = 0, cl; (cl = lists[l++]); ) {
+    (function(cmd) {
+      editorui[cmd] = function(editor) {
+        var vals = editor.options[cmd],
+          _onMenuClick = function() {
+            editor.execCommand(cmd, this.value);
+          },
+          items = [];
+        for (var i in vals) {
+          items.push({
+            label: vals[i] || editor.getLang()[cmd][i] || "",
+            value: i,
+            theme: editor.options.theme,
+            onclick: _onMenuClick
+          });
+        }
+        var ui = new editorui.MenuButton({
+          editor: editor,
+          className: "edui-for-" + cmd,
+          title: editor.getLang("labelMap." + cmd) || "",
+          items: items,
+          onbuttonclick: function() {
+            var value = editor.queryCommandValue(cmd) || this.value;
+            editor.execCommand(cmd, value);
+          }
+        });
+        editorui.buttons[cmd] = ui;
+        editor.addListener("selectionchange", function() {
+          var state = editor.queryCommandState(cmd);
+          if (state == -1) {
+            ui.setDisabled(true);
+          } else {
+            ui.setDisabled(false);
+            var value = editor.queryCommandValue(cmd);
+            ui.setValue(value);
+            ui.setChecked(state);
+          }
+        });
+        return ui;
+      };
+    })(cl);
+  }
+
+  editorui.fullscreen = function(editor, title) {
+    title =
+      editor.options.labelMap["fullscreen"] ||
+      editor.getLang("labelMap.fullscreen") ||
+      "";
+    var ui = new editorui.Button({
+      className: "edui-for-fullscreen",
+      title: title,
+      theme: editor.options.theme,
+      onclick: function() {
+        if (editor.ui) {
+          editor.ui.setFullScreen(!editor.ui.isFullScreen());
+        }
+        this.setChecked(editor.ui.isFullScreen());
+      }
+    });
+    editorui.buttons["fullscreen"] = ui;
+    editor.addListener("selectionchange", function() {
+      var state = editor.queryCommandState("fullscreen");
+      ui.setDisabled(state == -1);
+      ui.setChecked(editor.ui.isFullScreen());
+    });
+    return ui;
+  };
+
+  // 表情
+  editorui["emotion"] = function(editor, iframeUrl) {
+    var cmd = "emotion";
+    var ui = new editorui.MultiMenuPop({
+      title:
+        editor.options.labelMap[cmd] ||
+          editor.getLang("labelMap." + cmd + "") ||
+          "",
+      editor: editor,
+      className: "edui-for-" + cmd,
+      iframeUrl: editor.ui.mapUrl(
+        iframeUrl ||
+          (editor.options.iframeUrlMap || {})[cmd] ||
+          iframeUrlMap[cmd]
+      )
+    });
+    editorui.buttons[cmd] = ui;
+
+    editor.addListener("selectionchange", function() {
+      ui.setDisabled(editor.queryCommandState(cmd) == -1);
+    });
+    return ui;
+  };
+
+  editorui.autotypeset = function(editor) {
+    var ui = new editorui.AutoTypeSetButton({
+      editor: editor,
+      title:
+        editor.options.labelMap["autotypeset"] ||
+          editor.getLang("labelMap.autotypeset") ||
+          "",
+      className: "edui-for-autotypeset",
+      onbuttonclick: function() {
+        editor.execCommand("autotypeset");
+      }
+    });
+    editorui.buttons["autotypeset"] = ui;
+    editor.addListener("selectionchange", function() {
+      ui.setDisabled(editor.queryCommandState("autotypeset") == -1);
+    });
+    return ui;
+  };
+
+  /* 简单上传插件 */
+  editorui["simpleupload"] = function(editor) {
+    var name = "simpleupload",
+      ui = new editorui.Button({
+        className: "edui-for-" + name,
+        title:
+          editor.options.labelMap[name] ||
+            editor.getLang("labelMap." + name) ||
+            "",
+        onclick: function() {},
+        theme: editor.options.theme,
+        showText: false
+      });
+    editorui.buttons[name] = ui;
+    editor.addListener("ready", function() {
+      var b = ui.getDom("body"),
+        iconSpan = b.children[0];
+      editor.fireEvent("simpleuploadbtnready", iconSpan);
+    });
+    editor.addListener("selectionchange", function(type, causeByUi, uiReady) {
+      var state = editor.queryCommandState(name);
+      if (state == -1) {
+        ui.setDisabled(true);
+        ui.setChecked(false);
+      } else {
+        if (!uiReady) {
+          ui.setDisabled(false);
+          ui.setChecked(state);
+        }
+      }
+    });
+    return ui;
+  };
+})();
+
+
+// adapter/editor.js
+///import core
+///commands 全屏
+///commandsName FullScreen
+///commandsTitle  全屏
+(function () {
+  var utils = baidu.editor.utils,
+    uiUtils = baidu.editor.ui.uiUtils,
+    UIBase = baidu.editor.ui.UIBase,
+    domUtils = baidu.editor.dom.domUtils;
+  var nodeStack = [];
+
+  function EditorUI(options) {
+    this.initOptions(options);
+    this.initEditorUI();
+  }
+
+  EditorUI.prototype = {
+    uiName: "editor",
+    initEditorUI: function () {
+      this.editor.ui = this;
+      this._dialogs = {};
+      this.initUIBase();
+      this._initToolbars();
+      var editor = this.editor,
+        me = this;
+
+      editor.addListener("ready", function () {
+        //提供getDialog方法
+        editor.getDialog = function (name) {
+          return editor.ui._dialogs[name + "Dialog"];
+        };
+        domUtils.on(editor.window, "scroll", function (evt) {
+          baidu.editor.ui.Popup.postHide(evt);
+        });
+        //提供编辑器实时宽高(全屏时宽高不变化)
+        editor.ui._actualFrameWidth = editor.options.initialFrameWidth;
+
+        UE.browser.ie &&
+        UE.browser.version === 6 &&
+        editor.container.ownerDocument.execCommand(
+          "BackgroundImageCache",
+          false,
+          true
+        );
+
+        //display bottom-bar label based on config
+        if (editor.options.elementPathEnabled) {
+          editor.ui.getDom("elementpath").innerHTML =
+            '<div class="edui-editor-breadcrumb">' +
+            editor.getLang("elementPathTip") +
+            ":</div>";
+        }
+        if (editor.options.wordCount) {
+          function countFn() {
+            setCount(editor, me);
+            domUtils.un(editor.document, "click", arguments.callee);
+          }
+
+          domUtils.on(editor.document, "click", countFn);
+          editor.ui.getDom("wordcount").innerHTML = editor.getLang(
+            "wordCountTip"
+          );
+        }
+        editor.ui._scale();
+        if (editor.options.scaleEnabled) {
+          if (editor.autoHeightEnabled) {
+            editor.disableAutoHeight();
+          }
+          me.enableScale();
+        } else {
+          me.disableScale();
+        }
+        if (
+          !editor.options.elementPathEnabled &&
+          !editor.options.wordCount &&
+          !editor.options.scaleEnabled
+        ) {
+          editor.ui.getDom("elementpath").style.display = "none";
+          editor.ui.getDom("wordcount").style.display = "none";
+          editor.ui.getDom("scale").style.display = "none";
+        }
+
+        if (!editor.selection.isFocus()) return;
+        editor.fireEvent("selectionchange", false, true);
+      });
+
+      editor.addListener("mousedown", function (t, evt) {
+        var el = evt.target || evt.srcElement;
+        baidu.editor.ui.Popup.postHide(evt, el);
+        baidu.editor.ui.ShortCutMenu.postHide(evt);
+      });
+      editor.addListener("delcells", function () {
+        if (UE.ui["edittip"]) {
+          new UE.ui["edittip"](editor);
+        }
+        editor.getDialog("edittip").open();
+      });
+
+      var pastePop,
+        isPaste = false,
+        timer;
+      editor.addListener("afterpaste", function () {
+        if (editor.queryCommandState("pasteplain")) return;
+        if (baidu.editor.ui.PastePicker) {
+          pastePop = new baidu.editor.ui.Popup({
+            content: new baidu.editor.ui.PastePicker({editor: editor}),
+            editor: editor,
+            className: "edui-wordpastepop"
+          });
+          pastePop.render();
+        }
+        isPaste = true;
+      });
+
+      editor.addListener("afterinserthtml", function () {
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+          if (pastePop && (isPaste || editor.ui._isTransfer)) {
+            if (pastePop.isHidden()) {
+              var span = domUtils.createElement(editor.document, "span", {
+                  style: "line-height:0px;",
+                  innerHTML: "\ufeff"
+                }),
+                range = editor.selection.getRange();
+              range.insertNode(span);
+              var tmp = getDomNode(span, "firstChild", "previousSibling");
+              tmp &&
+              pastePop.showAnchor(tmp.nodeType == 3 ? tmp.parentNode : tmp);
+              domUtils.remove(span);
+            } else {
+              pastePop.show();
+            }
+            delete editor.ui._isTransfer;
+            isPaste = false;
+          }
+        }, 200);
+      });
+      editor.addListener("contextmenu", function (t, evt) {
+        baidu.editor.ui.Popup.postHide(evt);
+      });
+      editor.addListener("keydown", function (t, evt) {
+        if (pastePop) pastePop.dispose(evt);
+        var keyCode = evt.keyCode || evt.which;
+        if (evt.altKey && keyCode == 90) {
+          UE.ui.buttons["fullscreen"].onclick();
+        }
+      });
+      editor.addListener("wordcount", function (type) {
+        setCount(this, me);
+      });
+
+      function setCount(editor, ui) {
+        editor.setOpt({
+          wordCount: true,
+          maximumWords: 10000,
+          wordCountMsg:
+            editor.options.wordCountMsg || editor.getLang("wordCountMsg"),
+          wordOverFlowMsg:
+            editor.options.wordOverFlowMsg || editor.getLang("wordOverFlowMsg")
+        });
+        var opt = editor.options,
+          max = opt.maximumWords,
+          msg = opt.wordCountMsg,
+          errMsg = opt.wordOverFlowMsg,
+          countDom = ui.getDom("wordcount");
+        if (!opt.wordCount) {
+          return;
+        }
+        var count = editor.getContentLength(true);
+        if (count > max) {
+          countDom.innerHTML = errMsg;
+          editor.fireEvent("wordcountoverflow");
+        } else {
+          countDom.innerHTML = msg
+            .replace("{#leave}", max - count)
+            .replace("{#count}", count);
+        }
+      }
+
+      editor.addListener("selectionchange", function () {
+        if (editor.options.elementPathEnabled) {
+          me[
+          (editor.queryCommandState("elementpath") == -1 ? "dis" : "en") +
+          "ableElementPath"
+            ]();
+        }
+        if (editor.options.scaleEnabled) {
+          me[
+          (editor.queryCommandState("scale") == -1 ? "dis" : "en") +
+          "ableScale"
+            ]();
+        }
+      });
+      var popup = new baidu.editor.ui.Popup({
+        editor: editor,
+        content: "",
+        className: "edui-bubble",
+        _onEditButtonClick: function () {
+          this.hide();
+          editor.ui._dialogs.linkDialog.open();
+        },
+        _onImgEditButtonClick: function (name) {
+          this.hide();
+          editor.ui._dialogs[name] && editor.ui._dialogs[name].open();
+        },
+        _onImgSetFloat: function (value) {
+          this.hide();
+          editor.execCommand("imagefloat", value);
+        },
+        _setIframeAlign: function (value) {
+          var frame = popup.anchorEl;
+          var newFrame = frame.cloneNode(true);
+          switch (value) {
+            case -2:
+              newFrame.setAttribute("align", "");
+              break;
+            case -1:
+              newFrame.setAttribute("align", "left");
+              break;
+            case 1:
+              newFrame.setAttribute("align", "right");
+              break;
+          }
+          frame.parentNode.insertBefore(newFrame, frame);
+          domUtils.remove(frame);
+          popup.anchorEl = newFrame;
+          popup.showAnchor(popup.anchorEl);
+        },
+        _updateIframe: function () {
+          var frame = (editor._iframe = popup.anchorEl);
+          if (domUtils.hasClass(frame, "ueditor_baidumap")) {
+            editor.selection.getRange().selectNode(frame).select();
+            editor.ui._dialogs.mapDialog.open();
+            popup.hide();
+          } else {
+            editor.ui._dialogs.insertframeDialog.open();
+            popup.hide();
+          }
+        },
+        _onRemoveButtonClick: function (cmdName) {
+          editor.execCommand(cmdName);
+          this.hide();
+        },
+        queryAutoHide: function (el) {
+          if (el && el.ownerDocument == editor.document) {
+            if (
+              el.tagName.toLowerCase() == "img" ||
+              domUtils.findParentByTagName(el, "a", true)
+            ) {
+              return el !== popup.anchorEl;
+            }
+          }
+          return baidu.editor.ui.Popup.prototype.queryAutoHide.call(this, el);
+        }
+      });
+      popup.render();
+      if (editor.options.imagePopup) {
+        editor.addListener("mouseover", function (t, evt) {
+          evt = evt || window.event;
+          var el = evt.target || evt.srcElement;
+          if (
+            editor.ui._dialogs.insertframeDialog &&
+            /iframe/gi.test(el.tagName)
+          ) {
+            var html = popup.formatHtml(
+              "<nobr>" +
+              '<span onclick=$$._setIframeAlign(-2) class="edui-clickable">' +
+              editor.getLang("default") +
+              '</span>&nbsp;&nbsp;<span onclick=$$._setIframeAlign(-1) class="edui-clickable">' +
+              editor.getLang("justifyleft") +
+              '</span>&nbsp;&nbsp;<span onclick=$$._setIframeAlign(1) class="edui-clickable">' +
+              editor.getLang("justifyright") +
+              "</span>&nbsp;&nbsp;" +
+              ' <span onclick="$$._updateIframe( this);" class="edui-clickable">' +
+              editor.getLang("modify") +
+              "</span></nobr>"
+            );
+            if (html) {
+              popup.getDom("content").innerHTML = html;
+              popup.anchorEl = el;
+              popup.showAnchor(popup.anchorEl);
+            } else {
+              popup.hide();
+            }
+          }
+        });
+        editor.addListener("selectionchange", function (t, causeByUi) {
+          if (!causeByUi) return;
+          var html = "",
+            str = "",
+            img = editor.selection.getRange().getClosedNode(),
+            dialogs = editor.ui._dialogs;
+          if (img && img.tagName == "IMG") {
+            var dialogName = "insertimageDialog";
+            if (
+              img.className.indexOf("edui-faked-video") != -1 ||
+              img.className.indexOf("edui-upload-video") != -1
+            ) {
+              dialogName = "insertvideoDialog";
+            }
+            if (img.getAttribute("anchorname")) {
+              dialogName = "anchorDialog";
+              html = popup.formatHtml(
+                "<nobr>" +
+                '<span onclick=$$._onImgEditButtonClick("anchorDialog") class="edui-clickable">' +
+                editor.getLang("modify") +
+                "</span>&nbsp;&nbsp;" +
+                "<span onclick=$$._onRemoveButtonClick('anchor') class=\"edui-clickable\">" +
+                editor.getLang("delete") +
+                "</span></nobr>"
+              );
+            }
+            // if (img.getAttribute("data-word-image")) {
+            //   //todo 放到dialog去做查询
+            //   editor['data-word-image'] = [img.getAttribute("data-word-image")];
+            //   dialogName = "wordimageDialog";
+            // }
+            if (
+              domUtils.hasClass(img, "loadingclass") ||
+              domUtils.hasClass(img, "loaderrorclass")
+            ) {
+              dialogName = "";
+            }
+            if (!dialogs[dialogName]) {
+              return;
+            }
+
+            var actions = [];
+            actions.push('<nobr />');
+            actions.push('<span onclick=$$._onImgSetFloat("none") class="edui-clickable edui-popup-action-item">' +
+              editor.getLang("default") +
+              "</span>");
+            actions.push('<span onclick=$$._onImgSetFloat("none") class="edui-clickable edui-popup-action-item">' +
+              editor.getLang("default") +
+              "</span>");
+            actions.push('<span onclick=$$._onImgSetFloat("left") class="edui-clickable edui-popup-action-item">' +
+              editor.getLang("justifyleft") +
+              "</span>");
+            actions.push('<span onclick=$$._onImgSetFloat("right") class="edui-clickable edui-popup-action-item">' +
+              editor.getLang("justifyright") +
+              "</span>");
+            actions.push('<span onclick=$$._onImgSetFloat("center") class="edui-clickable edui-popup-action-item">' +
+              editor.getLang("justifycenter") +
+              "</span>");
+            if (img.getAttribute('data-formula-image') !== null) {
+              actions.push("<span onclick=\"$$._onImgEditButtonClick('formulaDialog');\" class='edui-clickable edui-popup-action-item'>" +
+                 editor.getLang("formulaedit") + "</span>");
+            }
+            if (img.getAttribute("data-word-image")) {
+              actions.push("<span onclick=\"$$._onImgEditButtonClick('wordimageDialog');\" class='edui-clickable edui-popup-action-item'>" +
+                editor.getLang("save") +
+                "</span>");
+            } else {
+              actions.push("<span onclick=\"$$._onImgEditButtonClick('" + dialogName + '\');" class="edui-clickable edui-popup-action-item">' +
+                editor.getLang("modify") +
+                "</span>");
+            }
+            actions.push("</nobr>");
+
+            !html && (html = popup.formatHtml(actions.join("")));
+          }
+          if (editor.ui._dialogs.linkDialog) {
+            var link = editor.queryCommandValue("link");
+            var url;
+            if (
+              link &&
+              (url = link.getAttribute("_href") || link.getAttribute("href", 2))
+            ) {
+              var txt = url;
+              if (url.length > 30) {
+                txt = url.substring(0, 20) + "...";
+              }
+              if (html) {
+                html += '<div style="height:5px;"></div>';
+              }
+              html += popup.formatHtml(
+                "<nobr>" +
+                editor.getLang("anchorMsg") +
+                ': <a target="_blank" href="' +
+                url +
+                '" title="' +
+                url +
+                '" >' +
+                txt +
+                "</a>" +
+                ' <span class="edui-clickable" onclick="$$._onEditButtonClick();">' +
+                editor.getLang("modify") +
+                "</span>" +
+                ' <span class="edui-clickable" onclick="$$._onRemoveButtonClick(\'unlink\');"> ' +
+                editor.getLang("clear") +
+                "</span></nobr>"
+              );
+              popup.showAnchor(link);
+            }
+          }
+
+          if (html) {
+            popup.getDom("content").innerHTML = html;
+            popup.anchorEl = img || link;
+            popup.showAnchor(popup.anchorEl);
+          } else {
+            popup.hide();
+          }
+        });
+      }
+    },
+    _initToolbars: function () {
+      var editor = this.editor;
+      var toolbars = this.toolbars || [];
+      var toolbarUis = [];
+      var extraUIs = [];
+      for (var i = 0; i < toolbars.length; i++) {
+        var toolbar = toolbars[i];
+        var toolbarUi = new baidu.editor.ui.Toolbar({
+          theme: editor.options.theme
+        });
+        for (var j = 0; j < toolbar.length; j++) {
+          var toolbarItem = toolbar[j];
+          var toolbarItemUi = null;
+          if (typeof toolbarItem == "string") {
+            toolbarItem = toolbarItem.toLowerCase();
+            if (toolbarItem == "|") {
+              toolbarItem = "Separator";
+            }
+            if (toolbarItem == "||") {
+              toolbarItem = "Breakline";
+            }
+            var ui = baidu.editor.ui[toolbarItem];
+            if (ui) {
+              if (utils.isFunction(ui)) {
+                toolbarItemUi = new baidu.editor.ui[toolbarItem](editor);
+              } else {
+                if (ui.id && ui.id != editor.key) {
+                  continue;
+                }
+                var itemUI = ui.execFn.call(editor, editor, toolbarItem);
+                if (itemUI) {
+                  if (ui.index === undefined) {
+                    toolbarUi.add(itemUI);
+                    continue;
+                  } else {
+                    extraUIs.push({
+                      index: ui.index,
+                      itemUI: itemUI
+                    });
+                  }
+                }
+              }
+            }
+            //fullscreen这里单独处理一下，放到首行去
+            if (toolbarItem == "fullscreen") {
+              if (toolbarUis && toolbarUis[0]) {
+                toolbarUis[0].items.splice(0, 0, toolbarItemUi);
+              } else {
+                toolbarItemUi && toolbarUi.items.splice(0, 0, toolbarItemUi);
+              }
+              continue;
+            }
+          } else {
+            toolbarItemUi = toolbarItem;
+          }
+          if (toolbarItemUi && toolbarItemUi.id) {
+            toolbarUi.add(toolbarItemUi);
+          }
+        }
+        toolbarUis[i] = toolbarUi;
+      }
+
+      //接受外部定制的UI
+
+      utils.each(extraUIs, function (obj) {
+        toolbarUi.add(obj.itemUI, obj.index);
+      });
+      this.toolbars = toolbarUis;
+    },
+    getHtmlTpl: function () {
+      return (
+        '<div id="##" class="%%">' +
+        '<div id="##_toolbarbox" class="%%-toolbarbox">' +
+        (this.toolbars.length
+          ? '<div id="##_toolbarboxouter" class="%%-toolbarboxouter"><div class="%%-toolbarboxinner">' +
+          this.renderToolbarBoxHtml() +
+          "</div></div>"
+          : "") +
+        '<div id="##_toolbarmsg" class="%%-toolbarmsg" style="display:none;">' +
+        '<div id = "##_upload_dialog" class="%%-toolbarmsg-upload" onclick="$$.showWordImageDialog();">' +
+        this.editor.getLang("clickToUpload") +
+        "</div>" +
+        '<div class="%%-toolbarmsg-close" onclick="$$.hideToolbarMsg();">x</div>' +
+        '<div id="##_toolbarmsg_label" class="%%-toolbarmsg-label"></div>' +
+        '<div style="height:0;overflow:hidden;clear:both;"></div>' +
+        "</div>" +
+        '<div id="##_message_holder" class="%%-messageholder"></div>' +
+        "</div>" +
+        '<div id="##_iframeholder" class="%%-iframeholder">' +
+        "</div>" +
+        //modify wdcount by matao
+        '<div id="##_bottombar" class="%%-bottomContainer"><table><tr>' +
+        '<td id="##_elementpath" class="%%-bottombar"></td>' +
+        '<td id="##_wordcount" class="%%-wordcount"></td>' +
+        '<td id="##_scale" class="%%-scale"><div class="%%-icon"></div></td>' +
+        "</tr></table></div>" +
+        '<div id="##_scalelayer"></div>' +
+        "</div>"
+      );
+    },
+    showWordImageDialog: function () {
+      this._dialogs["wordimageDialog"].open();
+    },
+    renderToolbarBoxHtml: function () {
+      var buff = [];
+      for (var i = 0; i < this.toolbars.length; i++) {
+        buff.push(this.toolbars[i].renderHtml());
+      }
+      return buff.join("");
+    },
+    setFullScreen: function (fullscreen) {
+      var editor = this.editor,
+        container = editor.container.parentNode.parentNode;
+      if (this._fullscreen != fullscreen) {
+        this._fullscreen = fullscreen;
+        this.editor.fireEvent("beforefullscreenchange", fullscreen);
+        if (baidu.editor.browser.gecko) {
+          var bk = editor.selection.getRange().createBookmark();
+        }
+        if (fullscreen) {
+          while (container.tagName != "BODY") {
+            var position = baidu.editor.dom.domUtils.getComputedStyle(
+              container,
+              "position"
+            );
+            nodeStack.push(position);
+            container.style.position = "static";
+            container = container.parentNode;
+          }
+          this._bakHtmlOverflow = document.documentElement.style.overflow;
+          this._bakBodyOverflow = document.body.style.overflow;
+          this._bakAutoHeight = this.editor.autoHeightEnabled;
+          this._bakScrollTop = Math.max(
+            document.documentElement.scrollTop,
+            document.body.scrollTop
+          );
+
+          this._bakEditorContaninerWidth = editor.iframe.parentNode.offsetWidth;
+          if (this._bakAutoHeight) {
+            //当全屏时不能执行自动长高
+            editor.autoHeightEnabled = false;
+            this.editor.disableAutoHeight();
+          }
+
+          document.documentElement.style.overflow = "hidden";
+          //修复，滚动条不收起的问题
+
+          window.scrollTo(0, window.scrollY);
+          this._bakCssText = this.getDom().style.cssText;
+          this._bakCssText1 = this.getDom("iframeholder").style.cssText;
+          editor.iframe.parentNode.style.width = "";
+          this._updateFullScreen();
+        } else {
+          while (container.tagName != "BODY") {
+            container.style.position = nodeStack.shift();
+            container = container.parentNode;
+          }
+          this.getDom().style.cssText = this._bakCssText;
+          this.getDom("iframeholder").style.cssText = this._bakCssText1;
+          if (this._bakAutoHeight) {
+            editor.autoHeightEnabled = true;
+            this.editor.enableAutoHeight();
+          }
+
+          document.documentElement.style.overflow = this._bakHtmlOverflow;
+          document.body.style.overflow = this._bakBodyOverflow;
+          editor.iframe.parentNode.style.width =
+            this._bakEditorContaninerWidth + "px";
+          window.scrollTo(0, this._bakScrollTop);
+        }
+        if (browser.gecko && editor.body.contentEditable === "true") {
+          var input = document.createElement("input");
+          document.body.appendChild(input);
+          editor.body.contentEditable = false;
+          setTimeout(function () {
+            input.focus();
+            setTimeout(function () {
+              editor.body.contentEditable = true;
+              editor.fireEvent("fullscreenchanged", fullscreen);
+              editor.selection.getRange().moveToBookmark(bk).select(true);
+              baidu.editor.dom.domUtils.remove(input);
+              fullscreen && window.scroll(0, 0);
+            }, 0);
+          }, 0);
+        }
+
+        if (editor.body.contentEditable === "true") {
+          this.editor.fireEvent("fullscreenchanged", fullscreen);
+          this.triggerLayout();
+        }
+      }
+    },
+    _updateFullScreen: function () {
+      if (this._fullscreen) {
+        var vpRect = uiUtils.getViewportRect();
+        this.getDom().style.cssText =
+          "border:0;position:absolute;left:0;top:" +
+          (this.editor.options.topOffset || 0) +
+          "px;width:" +
+          vpRect.width +
+          "px;height:" +
+          vpRect.height +
+          "px;z-index:" +
+          (this.getDom().style.zIndex * 1 + 100);
+        uiUtils.setViewportOffset(this.getDom(), {
+          left: 0,
+          top: this.editor.options.topOffset || 0
+        });
+        this.editor.setHeight(
+          vpRect.height -
+          this.getDom("toolbarbox").offsetHeight -
+          this.getDom("bottombar").offsetHeight -
+          (this.editor.options.topOffset || 0),
+          true
+        );
+        //不手动调一下，会导致全屏失效
+        if (browser.gecko) {
+          try {
+            window.onresize();
+          } catch (e) {
+          }
+        }
+      }
+    },
+    _updateElementPath: function () {
+      var bottom = this.getDom("elementpath"),
+        list;
+      if (
+        this.elementPathEnabled &&
+        (list = this.editor.queryCommandValue("elementpath"))
+      ) {
+        var buff = [];
+        for (var i = 0, ci; (ci = list[i]); i++) {
+          buff[i] = this.formatHtml(
+            '<span unselectable="on" onclick="$$.editor.execCommand(&quot;elementpath&quot;, &quot;' +
+            i +
+            '&quot;);">' +
+            ci +
+            "</span>"
+          );
+        }
+        bottom.innerHTML =
+          '<div class="edui-editor-breadcrumb" onmousedown="return false;">' +
+          this.editor.getLang("elementPathTip") +
+          ": " +
+          buff.join(" &gt; ") +
+          "</div>";
+      } else {
+        bottom.style.display = "none";
+      }
+    },
+    disableElementPath: function () {
+      var bottom = this.getDom("elementpath");
+      bottom.innerHTML = "";
+      bottom.style.display = "none";
+      this.elementPathEnabled = false;
+    },
+    enableElementPath: function () {
+      var bottom = this.getDom("elementpath");
+      bottom.style.display = "";
+      this.elementPathEnabled = true;
+      this._updateElementPath();
+    },
+    _scale: function () {
+      var doc = document,
+        editor = this.editor,
+        editorHolder = editor.container,
+        editorDocument = editor.document,
+        toolbarBox = this.getDom("toolbarbox"),
+        bottombar = this.getDom("bottombar"),
+        scale = this.getDom("scale"),
+        scalelayer = this.getDom("scalelayer");
+
+      var isMouseMove = false,
+        position = null,
+        minEditorHeight = 0,
+        minEditorWidth = editor.options.minFrameWidth,
+        pageX = 0,
+        pageY = 0,
+        scaleWidth = 0,
+        scaleHeight = 0;
+
+      function down() {
+        position = domUtils.getXY(editorHolder);
+
+        if (!minEditorHeight) {
+          minEditorHeight =
+            editor.options.minFrameHeight +
+            toolbarBox.offsetHeight +
+            bottombar.offsetHeight;
+        }
+
+        scalelayer.style.cssText =
+          "position:absolute;left:0;display:;top:0;background-color:#41ABFF;opacity:0.4;filter: Alpha(opacity=40);width:" +
+          editorHolder.offsetWidth +
+          "px;height:" +
+          editorHolder.offsetHeight +
+          "px;z-index:" +
+          (editor.options.zIndex + 1);
+
+        domUtils.on(doc, "mousemove", move);
+        domUtils.on(editorDocument, "mouseup", up);
+        domUtils.on(doc, "mouseup", up);
+      }
+
+      var me = this;
+      //by xuheng 全屏时关掉缩放
+      this.editor.addListener("fullscreenchanged", function (e, fullScreen) {
+        if (fullScreen) {
+          me.disableScale();
+        } else {
+          if (me.editor.options.scaleEnabled) {
+            me.enableScale();
+            var tmpNode = me.editor.document.createElement("span");
+            me.editor.body.appendChild(tmpNode);
+            me.editor.body.style.height =
+              Math.max(
+                domUtils.getXY(tmpNode).y,
+                me.editor.iframe.offsetHeight - 20
+              ) + "px";
+            domUtils.remove(tmpNode);
+          }
+        }
+      });
+
+      function move(event) {
+        clearSelection();
+        var e = event || window.event;
+        pageX = e.pageX || doc.documentElement.scrollLeft + e.clientX;
+        pageY = e.pageY || doc.documentElement.scrollTop + e.clientY;
+        scaleWidth = pageX - position.x;
+        scaleHeight = pageY - position.y;
+
+        if (scaleWidth >= minEditorWidth) {
+          isMouseMove = true;
+          scalelayer.style.width = scaleWidth + "px";
+        }
+        if (scaleHeight >= minEditorHeight) {
+          isMouseMove = true;
+          scalelayer.style.height = scaleHeight + "px";
+        }
+      }
+
+      function up() {
+        if (isMouseMove) {
+          isMouseMove = false;
+          editor.ui._actualFrameWidth = scalelayer.offsetWidth - 2;
+          editorHolder.style.width = editor.ui._actualFrameWidth + "px";
+
+          editor.setHeight(
+            scalelayer.offsetHeight -
+            bottombar.offsetHeight -
+            toolbarBox.offsetHeight -
+            2,
+            true
+          );
+        }
+        if (scalelayer) {
+          scalelayer.style.display = "none";
+        }
+        clearSelection();
+        domUtils.un(doc, "mousemove", move);
+        domUtils.un(editorDocument, "mouseup", up);
+        domUtils.un(doc, "mouseup", up);
+      }
+
+      function clearSelection() {
+        if (browser.ie) doc.selection.clear();
+        else window.getSelection().removeAllRanges();
+      }
+
+      this.enableScale = function () {
+        //trace:2868
+        if (editor.queryCommandState("source") == 1) return;
+        scale.style.display = "";
+        this.scaleEnabled = true;
+        domUtils.on(scale, "mousedown", down);
+      };
+      this.disableScale = function () {
+        scale.style.display = "none";
+        this.scaleEnabled = false;
+        domUtils.un(scale, "mousedown", down);
+      };
+    },
+    isFullScreen: function () {
+      return this._fullscreen;
+    },
+    postRender: function () {
+      UIBase.prototype.postRender.call(this);
+      for (var i = 0; i < this.toolbars.length; i++) {
+        this.toolbars[i].postRender();
+      }
+      var me = this;
+      var timerId,
+        domUtils = baidu.editor.dom.domUtils,
+        updateFullScreenTime = function () {
+          clearTimeout(timerId);
+          timerId = setTimeout(function () {
+            me._updateFullScreen();
+          });
+        };
+      domUtils.on(window, "resize", updateFullScreenTime);
+
+      me.addListener("destroy", function () {
+        domUtils.un(window, "resize", updateFullScreenTime);
+        clearTimeout(timerId);
+      });
+    },
+    showToolbarMsg: function (msg, flag) {
+      this.getDom("toolbarmsg_label").innerHTML = msg;
+      this.getDom("toolbarmsg").style.display = "";
+      //
+      if (!flag) {
+        var w = this.getDom("upload_dialog");
+        w.style.display = "none";
+      }
+    },
+    hideToolbarMsg: function () {
+      this.getDom("toolbarmsg").style.display = "none";
+    },
+    mapUrl: function (url) {
+      return url
+        ? url.replace("~/", this.editor.options.UEDITOR_HOME_URL || "")
+        : "";
+    },
+    triggerLayout: function () {
+      var dom = this.getDom();
+      if (dom.style.zoom == "1") {
+        dom.style.zoom = "100%";
+      } else {
+        dom.style.zoom = "1";
+      }
+    }
+  };
+  utils.inherits(EditorUI, baidu.editor.ui.UIBase);
+
+  var instances = {};
+
+  UE.ui.Editor = function (options) {
+    var editor = new UE.Editor(options);
+    editor.options.editor = editor;
+    utils.loadFile(document, {
+      href:
+        editor.options.themePath + editor.options.theme + "/css/ueditor.css?20220907",
+      tag: "link",
+      type: "text/css",
+      rel: "stylesheet"
+    });
+
+    var oldRender = editor.render;
+    editor.render = function (holder) {
+      if (holder.constructor === String) {
+        editor.key = holder;
+        instances[holder] = editor;
+      }
+      utils.domReady(function () {
+        editor.langIsReady
+          ? renderUI()
+          : editor.addListener("langReady", renderUI);
+
+        function renderUI() {
+          editor.setOpt({
+            labelMap: editor.options.labelMap || editor.getLang("labelMap")
+          });
+          new EditorUI(editor.options);
+          if (holder) {
+            if (holder.constructor === String) {
+              holder = document.getElementById(holder);
+            }
+            holder &&
+            holder.getAttribute("name") &&
+            (editor.options.textarea = holder.getAttribute("name"));
+            if (holder && /script|textarea/gi.test(holder.tagName)) {
+              var newDiv = document.createElement("div");
+              holder.parentNode.insertBefore(newDiv, holder);
+              var cont = holder.value || holder.innerHTML;
+              editor.options.initialContent = /^[\t\r\n ]*$/.test(cont)
+                ? editor.options.initialContent
+                : cont
+                  .replace(/>[\n\r\t]+([ ]{4})+/g, ">")
+                  .replace(/[\n\r\t]+([ ]{4})+</g, "<")
+                  .replace(/>[\n\r\t]+</g, "><");
+              holder.className && (newDiv.className = holder.className);
+              holder.style.cssText &&
+              (newDiv.style.cssText = holder.style.cssText);
+              if (/textarea/i.test(holder.tagName)) {
+                editor.textarea = holder;
+                editor.textarea.style.display = "none";
+              } else {
+                holder.parentNode.removeChild(holder);
+              }
+              if (holder.id) {
+                newDiv.id = holder.id;
+                domUtils.removeAttributes(holder, "id");
+              }
+              holder = newDiv;
+              holder.innerHTML = "";
+            }
+          }
+          domUtils.addClass(holder, "edui-" + editor.options.theme);
+          editor.ui.render(holder);
+          var opt = editor.options;
+          //给实例添加一个编辑器的容器引用
+          editor.container = editor.ui.getDom();
+          var parents = domUtils.findParents(holder, true);
+          var displays = [];
+          for (var i = 0, ci; (ci = parents[i]); i++) {
+            displays[i] = ci.style.display;
+            ci.style.display = "block";
+          }
+          if (opt.initialFrameWidth) {
+            opt.minFrameWidth = opt.initialFrameWidth;
+          } else {
+            opt.minFrameWidth = opt.initialFrameWidth = holder.offsetWidth;
+            var styleWidth = holder.style.width;
+            if (/%$/.test(styleWidth)) {
+              opt.initialFrameWidth = styleWidth;
+            }
+          }
+          if (opt.initialFrameHeight) {
+            opt.minFrameHeight = opt.initialFrameHeight;
+          } else {
+            opt.initialFrameHeight = opt.minFrameHeight = holder.offsetHeight;
+          }
+          for (var i = 0, ci; (ci = parents[i]); i++) {
+            ci.style.display = displays[i];
+          }
+          //编辑器最外容器设置了高度，会导致，编辑器不占位
+          //todo 先去掉，没有找到原因
+          if (holder.style.height) {
+            holder.style.height = "";
+          }
+          editor.container.style.width =
+            opt.initialFrameWidth +
+            (/%$/.test(opt.initialFrameWidth) ? "" : "px");
+          editor.container.style.zIndex = opt.zIndex;
+          oldRender.call(editor, editor.ui.getDom("iframeholder"));
+          editor.fireEvent("afteruiready");
+        }
+      });
+    };
+    return editor;
+  };
+
+  /**
+   * @file
+   * @name UE
+   * @short UE
+   * @desc UEditor的顶部命名空间
+   */
+  /**
+   * @name getEditor
+   * @since 1.2.4+
+   * @grammar UE.getEditor(id,[opt])  =>  Editor实例
+   * @desc 提供一个全局的方法得到编辑器实例
+   *
+   * * ''id''  放置编辑器的容器id, 如果容器下的编辑器已经存在，就直接返回
+   * * ''opt'' 编辑器的可选参数
+   * @example
+   *  UE.getEditor('containerId',{onready:function(){//创建一个编辑器实例
+   *      this.setContent('hello')
+   *  }});
+   *  UE.getEditor('containerId'); //返回刚创建的实例
+   *
+   */
+  UE.getEditor = function (id, opt) {
+    var editor = instances[id];
+    if (!editor) {
+      editor = instances[id] = new UE.ui.Editor(opt);
+      editor.render(id);
+    }
+    return editor;
+  };
+
+  UE.delEditor = function (id) {
+    var editor;
+    if ((editor = instances[id])) {
+      editor.key && editor.destroy();
+      delete instances[id];
+    }
+  };
+
+  UE.registerUI = function (uiName, fn, index, editorId) {
+    utils.each(uiName.split(/\s+/), function (name) {
+      baidu.editor.ui[name] = {
+        id: editorId,
+        execFn: fn,
+        index: index
+      };
+    });
+  };
+})();
+
+
+// adapter/message.js
+UE.registerUI("message", function(editor) {
+  var editorui = baidu.editor.ui;
+  var Message = editorui.Message;
+  var holder;
+  var _messageItems = [];
+  var me = editor;
+
+  me.setOpt("enableMessageShow", true);
+  if (me.getOpt("enableMessageShow") === false) {
+    return;
+  }
+
+  me.addListener("ready", function() {
+    holder = document.getElementById(me.ui.id + "_message_holder");
+    updateHolderPos();
+    setTimeout(function() {
+      updateHolderPos();
+    }, 500);
+  });
+
+  me.addListener("showmessage", function(type, opt) {
+    opt = utils.isString(opt)
+      ? {
+          content: opt
+        }
+      : opt;
+    var message = new Message({
+      timeout: opt.timeout,
+      type: opt.type,
+      content: opt.content,
+      keepshow: opt.keepshow,
+      editor: me
+    }),
+      mid = opt.id || "msg_" + (+new Date()).toString(36);
+    message.render(holder);
+    _messageItems[mid] = message;
+    message.reset(opt);
+    updateHolderPos();
+    return mid;
+  });
+
+  me.addListener("updatemessage", function(type, id, opt) {
+    opt = utils.isString(opt)
+      ? {
+          content: opt
+        }
+      : opt;
+    var message = _messageItems[id];
+    message.render(holder);
+    message && message.reset(opt);
+  });
+
+  me.addListener("hidemessage", function(type, id) {
+    var message = _messageItems[id];
+    message && message.hide();
+  });
+
+  function updateHolderPos() {
+    if (!holder || !me.ui) return;
+    var toolbarbox = me.ui.getDom("toolbarbox");
+    if (toolbarbox) {
+      holder.style.top = toolbarbox.offsetHeight + 3 + "px";
+    }
+    holder.style.zIndex =
+      Math.max(me.options.zIndex, me.iframe.style.zIndex) + 1;
+  }
+});
+
+
+
+})();
diff --git a/public/js/ueditor/ueditor.config.js b/public/js/ueditor/ueditor.config.js
new file mode 100644
index 0000000..434056d
--- /dev/null
+++ b/public/js/ueditor/ueditor.config.js
@@ -0,0 +1,605 @@
+/**
+ * ueditor plus 完整配置项
+ * 可以在这里配置整个编辑器的特性
+ */
+/**************************提示********************************
+ * 所有被注释的配置项均为UEditor默认值。
+ * 修改默认配置请首先确保已经完全明确该参数的真实用途。
+ * 主要有两种修改方案，一种是取消此处注释，然后修改成对应参数；另一种是在实例化编辑器时传入对应参数。
+ * 当升级编辑器时，可直接使用旧版配置文件替换新版配置文件,不用担心旧版配置文件中因缺少新功能所需的参数而导致脚本报错。
+ **************************提示********************************/
+
+(function () {
+  /**
+   * 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。
+   * 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
+   * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
+   * 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。
+   * 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
+   * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
+   */
+  var URL, CORS_URL;
+  if (window.UEDITOR_HOME_URL) {
+    URL = window.UEDITOR_HOME_URL;
+  } else if (window.__msCDN) {
+    URL = window.__msCDN + 'asset/vendor/ueditor/';
+  } else if (window.__msRoot) {
+    URL = window.__msRoot + 'asset/vendor/ueditor/';
+  } else {
+    URL = getUEBasePath();
+  }
+  if (window.__msRoot) {
+    CORS_URL = window.__msRoot + 'asset/vendor/ueditor/';
+  } else {
+    CORS_URL = getUEBasePath();
+  }
+
+  /**
+   * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
+   */
+  window.UEDITOR_CONFIG = {
+
+    //为编辑器实例添加一个路径，这个不能被注释
+    UEDITOR_HOME_URL: URL,
+    UEDITOR_CORS_URL: CORS_URL,
+
+    // 服务器统一请求接口路径
+    serverUrl: "/ueditor-plus/_demo_server/handle.php",
+
+    //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
+    toolbars: [
+      [
+        "fullscreen",   // 全屏
+        "source",       // 源代码
+        "|",
+        "undo",         // 撤销
+        "redo",         // 重做
+        "|",
+        "bold",         // 加粗
+        "italic",       // 斜体
+        "underline",    // 下划线
+        "fontborder",   // 字符边框
+        "strikethrough",// 删除线
+        "superscript",  // 上标
+        "subscript",    // 下标
+        "removeformat", // 清除格式
+        "formatmatch",  // 格式刷
+        "autotypeset",  // 自动排版
+        "blockquote",   // 引用
+        "pasteplain",   // 纯文本粘贴模式
+        "|",
+        "forecolor",    // 字体颜色
+        "backcolor",    // 背景色
+        "insertorderedlist",   // 有序列表
+        "insertunorderedlist", // 无序列表
+        "selectall",    // 全选
+        "cleardoc",     // 清空文档
+        "|",
+        "rowspacingtop",// 段前距
+        "rowspacingbottom",    // 段后距
+        "lineheight",          // 行间距
+        "|",
+        "customstyle",         // 自定义标题
+        "paragraph",           // 段落格式
+        "fontfamily",          // 字体
+        "fontsize",            // 字号
+        "|",
+        "directionalityltr",   // 从左向右输入
+        "directionalityrtl",   // 从右向左输入
+        "indent",              // 首行缩进
+        "|",
+        "justifyleft",         // 居左对齐
+        "justifycenter",       // 居中对齐
+        "justifyright",
+        "justifyjustify",      // 两端对齐
+        "|",
+        "touppercase",         // 字母大写
+        "tolowercase",         // 字母小写
+        "|",
+        "link",                // 超链接
+        "unlink",              // 取消链接
+        "anchor",              // 锚点
+        "|",
+        "imagenone",           // 图片默认
+        "imageleft",           // 图片左浮动
+        "imageright",          // 图片右浮动
+        "imagecenter",         // 图片居中
+        "|",
+        "simpleupload",        // 单图上传
+        "insertimage",         // 多图上传
+        "emotion",             // 表情
+        "scrawl",              // 涂鸦
+        "insertvideo",         // 视频
+        "attachment",          // 附件
+        "insertframe",         // 插入Iframe
+        "insertcode",          // 插入代码
+        "pagebreak",           // 分页
+        "template",            // 模板
+        "background",          // 背景
+        "formula",             // 公式
+        "|",
+        "horizontal",          // 分隔线
+        "date",                // 日期
+        "time",                // 时间
+        "spechars",            // 特殊字符
+        "wordimage",           // Word图片转存
+        "|",
+        "inserttable",         // 插入表格
+        "deletetable",         // 删除表格
+        "insertparagraphbeforetable",     // 表格前插入行
+        "insertrow",           // 前插入行
+        "deleterow",           // 删除行
+        "insertcol",           // 前插入列
+        "deletecol",           // 删除列
+        "mergecells",          // 合并多个单元格
+        "mergeright",          // 右合并单元格
+        "mergedown",           // 下合并单元格
+        "splittocells",        // 完全拆分单元格
+        "splittorows",         // 拆分成行
+        "splittocols",         // 拆分成列
+        "|",
+        "print",               // 打印
+        "preview",             // 预览
+        "searchreplace",       // 查询替换
+        "help",                // 帮助
+      ]
+    ]
+
+    // 自定义工具栏按钮点击，返回 true 表示已经处理点击，会阻止默认事件
+    , toolbarCallback: function (cmd, editor) {
+      // switch(cmd){
+      //   case 'insertimage':
+      //     editor.execCommand('insertHtml', '<p><img src="xxxxx" /></p>');
+      //     console.log('toolbarCallback',cmd, editor)
+      //     return true;
+      //   case 'insertvideo':
+      //     editor.execCommand('insertHtml', '<p><img src="xxxxx" /></p>');
+      //     console.log('toolbarCallback',cmd, editor)
+      //     return true;
+      // }
+    }
+
+    // 插入图片自定义配置
+    , imageConfig: {
+      // 禁止本地上传
+      disableUpload: false,
+      // 禁止在线管理
+      disableOnline: false,
+      // 自定义选择按钮
+      selectCallback: null,
+      // selectCallback: function(editor,cb){
+      //     console.log('selectCallback',cb);
+      //     setTimeout(function(){
+      //       cb({
+      //         path:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
+      //         name:'测试图片'
+      //       });
+      //     },1000);
+      // }
+    }
+
+    // 插入视频配置
+    , videoConfig: {
+      // 禁止本地上传,
+      disableUpload: false,
+      // 自定义选择按钮
+      selectCallback: null,
+      // selectCallback: function(editor,cb){
+      //     console.log('selectCallback',cb);
+      //     setTimeout(function(){
+      //       cb({
+      //         path:'https://www.bilibili.com/video/BV1y44y1g7NR?spm_id_from=333.1007.tianma.1-1-1.click',
+      //         name:'测试视频'
+      //       });
+      //     },1000);
+      // }
+    }
+
+    // 公式配置
+    , formulaConfig: {
+       // 公式渲染链接模板
+       imageUrlTemplate: 'https://latex.codecogs.com/svg.image?{}',
+       // 为了更稳定的公式渲染服务，可以使用 魔众官方公式转图片渲染引擎 https://api.tecmz.com
+    }
+
+    // 自动保存
+    , autoSaveEnable: true
+    // 浏览器初始化时自动恢复上一次的内容
+    , autoSaveRestore: false
+    // 自动保存Key，为空时根据网址自动计算
+    , autoSaveKey: null
+
+    //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准
+    //,labelMap:{
+    //    'anchor':'', 'undo':''
+    //}
+
+    //语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
+    //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
+    //,lang:"zh-cn"
+    //,langPath:URL +"lang/"
+
+    //主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：
+    //现有如下皮肤:default
+    //,theme:'default'
+    //,themePath:URL +"themes/"
+
+    //,zIndex : 900     //编辑器层级的基数,默认是900
+
+    //针对getAllHtml方法，会在对应的head标签中增加该编码设置。
+    //,charset:"utf-8"
+
+    //若实例化编辑器的页面手动修改的domain，此处需要设置为true
+    //,customDomain:false
+
+    //常用配置项目
+    //,isShow : true    //默认显示编辑器
+
+    //,textarea:'editorValue' // 提交表单时，服务器获取编辑器提交内容的所用的参数，多实例时可以给容器name属性，会将name给定的值最为每个实例的键值，不用每次实例化的时候都设置这个值
+
+    //,initialContent:'欢迎使用ueditor!'    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
+
+    //,autoClearinitialContent:true //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
+
+    //,focus:false //初始化时，是否让编辑器获得焦点true或false
+
+    //如果自定义，最好给p标签如下的行高，要不输入中文时，会有跳动感
+    //,initialStyle:'p{line-height:1em}'//编辑器层级的基数,可以用来改变字体等
+
+    //,iframeJsUrl: '' //给编辑区域的iframe引入一个js文件
+    //,iframeCssUrl: URL + '/themes/iframe.css' //给编辑区域的iframe引入一个css文件
+    // 给编辑器引入更多样式文件
+    //,iframeCssUrlsAddition: []
+
+    //indentValue
+    //首行缩进距离,默认是2em
+    //,indentValue:'2em'
+
+    ,initialFrameWidth:'100%'  //初始化编辑器宽度,默认1000
+    ,initialFrameHeight:450  //初始化编辑器高度,默认320
+
+    //,readonly : false //编辑器初始化结束后,编辑区域是否是只读的，默认是false
+
+    //,autoClearEmptyNode : true //getContent时，是否删除空的inlineElement节点（包括嵌套的情况）
+
+    //启用拖放上传
+    //,enableDragUpload: true
+    //启用粘贴上传
+    //,enablePasteUpload: true
+
+    //启用图片拉伸缩放
+    //,imageScaleEnabled: true
+
+    //,fullscreen : false //是否开启初始化时即全屏，默认关闭
+
+    //,imagePopup:true      //图片操作的浮层开关，默认打开
+
+    //,autoSyncData:true //自动同步编辑器要提交的数据
+    //,emotionLocalization:false //是否开启表情本地化，默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹
+
+    //粘贴只保留标签，去除标签所有属性
+    //,retainOnlyLabelPasted: false
+
+    //,pasteplain:false  //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
+    //纯文本粘贴模式下的过滤规则
+    //'filterTxtRules' : function(){
+    //    function transP(node){
+    //        node.tagName = 'p';
+    //        node.setStyle();
+    //    }
+    //    return {
+    //        //直接删除及其字节点内容
+    //        '-' : 'script style object iframe embed input select',
+    //        'p': {$:{}},
+    //        'br':{$:{}},
+    //        'div':{'$':{}},
+    //        'li':{'$':{}},
+    //        'caption':transP,
+    //        'th':transP,
+    //        'tr':transP,
+    //        'h1':transP,'h2':transP,'h3':transP,'h4':transP,'h5':transP,'h6':transP,
+    //        'td':function(node){
+    //            //没有内容的td直接删掉
+    //            var txt = !!node.innerText();
+    //            if(txt){
+    //                node.parentNode.insertAfter(UE.uNode.createText(' &nbsp; &nbsp;'),node);
+    //            }
+    //            node.parentNode.removeChild(node,node.innerText())
+    //        }
+    //    }
+    //}()
+
+    //,allHtmlEnabled:false //提交到后台的数据是否包含整个html字符串
+
+    //insertorderedlist
+    //有序列表的下拉配置,值留空时支持多语言自动识别，若配置值，则以此值为准
+    //,'insertorderedlist':{
+    //      //自定的样式
+    //        'num':'1,2,3...',
+    //        'num1':'1),2),3)...',
+    //        'num2':'(1),(2),(3)...',
+    //        'cn':'一,二,三....',
+    //        'cn1':'一),二),三)....',
+    //        'cn2':'(一),(二),(三)....',
+    //     //系统自带
+    //     'decimal' : '' ,         //'1,2,3...'
+    //     'lower-alpha' : '' ,    // 'a,b,c...'
+    //     'lower-roman' : '' ,    //'i,ii,iii...'
+    //     'upper-alpha' : '' , lang   //'A,B,C'
+    //     'upper-roman' : ''      //'I,II,III...'
+    //}
+
+    //insertunorderedlist
+    //无序列表的下拉配置，值留空时支持多语言自动识别，若配置值，则以此值为准
+    //,insertunorderedlist : { //自定的样式
+    //    'dash' :'— 破折号', //-破折号
+    //    'dot':' 。 小圆圈', //系统自带
+    //    'circle' : '',  // '○ 小圆圈'
+    //    'disc' : '',    // '● 小圆点'
+    //    'square' : ''   //'■ 小方块'
+    //}
+    //,listDefaultPaddingLeft : '30'//默认的左边缩进的基数倍
+    //,listiconpath : 'http://bs.baidu.com/listicon/'//自定义标号的路径
+    //,maxListLevel : 3 //限制可以tab的级数, 设置-1为不限制
+
+    //,autoTransWordToList:false  //禁止word中粘贴进来的列表自动变成列表标签
+
+    //fontfamily
+    //字体设置 label留空支持多语言自动切换，若配置，则以配置值为准
+    //,'fontfamily':[
+    //    { label:'',name:'songti',val:'宋体,SimSun'},
+    //    { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
+    //    { label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
+    //    { label:'',name:'heiti',val:'黑体, SimHei'},
+    //    { label:'',name:'lishu',val:'隶书, SimLi'},
+    //    { label:'',name:'andaleMono',val:'andale mono'},
+    //    { label:'',name:'arial',val:'arial, helvetica,sans-serif'},
+    //    { label:'',name:'arialBlack',val:'arial black,avant garde'},
+    //    { label:'',name:'comicSansMs',val:'comic sans ms'},
+    //    { label:'',name:'impact',val:'impact,chicago'},
+    //    { label:'',name:'timesNewRoman',val:'times new roman'}
+    //]
+
+    //fontsize
+    //字号
+    //,'fontsize':[10, 11, 12, 14, 16, 18, 20, 24, 36]
+
+    //paragraph
+    //段落格式 值留空时支持多语言自动识别，若配置，则以配置值为准
+    //,'paragraph':{'p':'', 'h1':'', 'h2':'', 'h3':'', 'h4':'', 'h5':'', 'h6':''}
+
+    //rowspacingtop
+    //段间距 值和显示的名字相同
+    //,'rowspacingtop':['5', '10', '15', '20', '25']
+
+    //rowspacingBottom
+    //段间距 值和显示的名字相同
+    //,'rowspacingbottom':['5', '10', '15', '20', '25']
+
+    //lineheight
+    //行内间距 值和显示的名字相同
+    //,'lineheight':['1', '1.5','1.75','2', '3', '4', '5']
+
+    //customstyle
+    //自定义样式，不支持国际化，此处配置值即可最后显示值
+    //block的元素是依据设置段落的逻辑设置的，inline的元素依据BIU的逻辑设置
+    //尽量使用一些常用的标签
+    //参数说明
+    //tag 使用的标签名字
+    //label 显示的名字也是用来标识不同类型的标识符，注意这个值每个要不同，
+    //style 添加的样式
+    //每一个对象就是一个自定义的样式
+    //,'customstyle':[
+    //    {tag:'h1', name:'tc', label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'},
+    //    {tag:'h1', name:'tl',label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:0 0 10px 0;'},
+    //    {tag:'span',name:'im', label:'', style:'font-style:italic;font-weight:bold'},
+    //    {tag:'span',name:'hi', label:'', style:'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'}
+    //]
+
+    //打开右键菜单功能
+    //,enableContextMenu: true
+    //右键菜单的内容，可以参考plugins/contextmenu.js里边的默认菜单的例子，label留空支持国际化，否则以此配置为准
+    //,contextMenu:[
+    //    {
+    //        label:'',       //显示的名称
+    //        cmdName:'selectall',//执行的command命令，当点击这个右键菜单时
+    //        //exec可选，有了exec就会在点击时执行这个function，优先级高于cmdName
+    //        exec:function () {
+    //            //this是当前编辑器的实例
+    //            //this.ui._dialogs['inserttableDialog'].open();
+    //        }
+    //    }
+    //]
+
+    //快捷菜单
+    , shortcutMenu: [
+      "fontfamily",   // 字体
+      "fontsize",     // 字号
+      "bold",         // 加粗
+      "italic",       // 斜体
+      "underline",    // 下划线
+      "strikethrough",// 删除线
+      "fontborder",   // 字符边框
+      "forecolor",    // 字体颜色
+      // "shadowcolor", // 字体阴影
+      // "backcolor",   // 背景色
+      "justifyleft",    // 居左对齐
+      "justifycenter",  // 居中对齐
+      "justifyright",   // 居右对齐
+      "justifyjustify", // 两端对齐
+      // "textindent",  // 首行缩进
+      // "rowspacingtop",     // 段前距
+      // "rowspacingbottom",  // 段后距
+      // "outpadding",        // 两侧距离
+      "lineheight",           // 行间距
+      // "letterspacing" ,    // 字间距
+      "insertorderedlist",    // 有序列表
+      "insertunorderedlist",  // 无序列表
+      "superscript",    // 上标
+      "subscript",      // 下标
+      "link",           // 超链接
+      "unlink",         // 取消链接
+      "touppercase",    // 字母大写
+      "tolowercase"     // 字母小写
+    ]
+
+    //elementPathEnabled
+    //是否启用元素路径，默认是显示
+    //,elementPathEnabled : true
+
+    //wordCount
+    //,wordCount:true          //是否开启字数统计
+    ,maximumWords:500000       //允许的最大字符数
+    //字数统计提示，{#count}代表当前字数，{#leave}代表还可以输入多少字符数,留空支持多语言自动切换，否则按此配置显示
+    //,wordCountMsg:''   //当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符
+    //超出字数限制提示  留空支持多语言自动切换，否则按此配置显示
+    //,wordOverFlowMsg:''    //<span style="color:red;">你输入的字符个数已经超出最大允许值，服务器可能会拒绝保存！</span>
+
+    //tab
+    //点击tab键时移动的距离,tabSize倍数，tabNode什么字符做为单位
+    //,tabSize:4
+    //,tabNode:'&nbsp;'
+
+    //removeFormat
+    //清除格式时可以删除的标签和属性
+    //removeForamtTags标签
+    //,removeFormatTags:'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var'
+    //removeFormatAttributes属性
+    //,removeFormatAttributes:'class,style,lang,width,height,align,hspace,valign'
+
+    //undo
+    //可以最多回退的次数,默认20
+    //,maxUndoCount:20
+    //当输入的字符数超过该值时，保存一次现场
+    //,maxInputCount:1
+
+    //autoHeightEnabled
+    // 是否自动长高,默认true
+    //,autoHeightEnabled:true
+
+    //scaleEnabled
+    //是否可以拉伸长高,默认true(当开启时，自动长高失效)
+    //,scaleEnabled:false
+    //,minFrameWidth:800    //编辑器拖动时最小宽度,默认800
+    //,minFrameHeight:220  //编辑器拖动时最小高度,默认220
+
+    //autoFloatEnabled
+    //是否保持toolbar的位置不动,默认true
+    ,autoFloatEnabled:false
+    //浮动时工具栏距离浏览器顶部的高度，用于某些具有固定头部的页面
+    //,topOffset:30
+    //编辑器底部距离工具栏高度(如果参数大于等于编辑器高度，则设置无效)
+    //,toolbarTopOffset:400
+
+    //设置远程图片是否抓取到本地保存
+    //,catchRemoteImageEnable: true //设置是否抓取远程图片
+
+    //pageBreakTag
+    //分页标识符,默认是_ueditor_page_break_tag_
+    //,pageBreakTag:'_ueditor_page_break_tag_'
+
+    //autotypeset
+    //自动排版参数
+    //,autotypeset: {
+    //    mergeEmptyline: true,           //合并空行
+    //    removeClass: true,              //去掉冗余的class
+    //    removeEmptyline: false,         //去掉空行
+    //    textAlign:"left",               //段落的排版方式，可以是 left,right,center,justify 去掉这个属性表示不执行排版
+    //    imageBlockLine: 'center',       //图片的浮动方式，独占一行剧中,左右浮动，默认: center,left,right,none 去掉这个属性表示不执行排版
+    //    pasteFilter: false,             //根据规则过滤没事粘贴进来的内容
+    //    clearFontSize: false,           //去掉所有的内嵌字号，使用编辑器默认的字号
+    //    clearFontFamily: false,         //去掉所有的内嵌字体，使用编辑器默认的字体
+    //    removeEmptyNode: false,         // 去掉空节点
+    //    //可以去掉的标签
+    //    removeTagNames: {标签名字:1},
+    //    indent: false,                  // 行首缩进
+    //    indentValue : '2em',            //行首缩进的大小
+    //    bdc2sb: false,
+    //    tobdc: false
+    //}
+
+    //tableDragable
+    //表格是否可以拖拽
+    //,tableDragable: true
+
+    //sourceEditor
+    //源码的查看方式,codemirror 是代码高亮，textarea是文本框,默认是codemirror
+    //注意默认codemirror只能在ie8+和非ie中使用
+    //,sourceEditor:"codemirror"
+    //如果sourceEditor是codemirror，还用配置一下两个参数
+    //codeMirrorJsUrl js加载的路径，默认是 URL + "third-party/codemirror/codemirror.js"
+    //,codeMirrorJsUrl:URL + "third-party/codemirror/codemirror.js"
+    //codeMirrorCssUrl css加载的路径，默认是 URL + "third-party/codemirror/codemirror.css"
+    //,codeMirrorCssUrl:URL + "third-party/codemirror/codemirror.css"
+    //编辑器初始化完成后是否进入源码模式，默认为否。
+    //,sourceEditorFirst:false
+
+    //iframeUrlMap
+    //dialog内容的路径 ～会被替换成URL,垓属性一旦打开，将覆盖所有的dialog的默认路径
+    //,iframeUrlMap:{
+    //    'anchor':'~/dialogs/anchor/anchor.html',
+    //}
+
+    //allowLinkProtocol 允许的链接地址，有这些前缀的链接地址不会自动添加http
+    //, allowLinkProtocols: ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:', 'git:', 'svn:']
+
+    //默认过滤规则相关配置项目
+    //,disabledTableInTable:true  //禁止表格嵌套
+    //,allowDivTransToP:true      //允许进入编辑器的div标签自动变成p标签
+    //,rgb2Hex:true               //默认产出的数据中的color自动从rgb格式变成16进制格式
+  };
+
+  function getUEBasePath(docUrl, confUrl) {
+    return getBasePath(
+      docUrl || self.document.URL || self.location.href,
+      confUrl || getConfigFilePath()
+    );
+  }
+
+  function getConfigFilePath() {
+    var configPath = document.getElementsByTagName("script");
+
+    return configPath[configPath.length - 1].src;
+  }
+
+  function getBasePath(docUrl, confUrl) {
+    var basePath = confUrl;
+
+    if (/^(\/|\\\\)/.test(confUrl)) {
+      basePath =
+        /^.+?\w(\/|\\\\)/.exec(docUrl)[0] + confUrl.replace(/^(\/|\\\\)/, "");
+    } else if (!/^[a-z]+:/i.test(confUrl)) {
+      docUrl = docUrl.split("#")[0].split("?")[0].replace(/[^\\\/]+$/, "");
+
+      basePath = docUrl + "" + confUrl;
+    }
+
+    return optimizationPath(basePath);
+  }
+
+  function optimizationPath(path) {
+    var protocol = /^[a-z]+:\/\//.exec(path)[0],
+      tmp = null,
+      res = [];
+
+    path = path.replace(protocol, "").split("?")[0].split("#")[0];
+
+    path = path.replace(/\\/g, "/").split(/\//);
+
+    path[path.length - 1] = "";
+
+    while (path.length) {
+      if ((tmp = path.shift()) === "..") {
+        res.pop();
+      } else if (tmp !== ".") {
+        res.push(tmp);
+      }
+    }
+
+    return protocol + res.join("/");
+  }
+
+  window.UE = {
+    getUEBasePath: getUEBasePath
+  };
+})();
diff --git a/public/js/ueditor/ueditor.parse.js b/public/js/ueditor/ueditor.parse.js
new file mode 100644
index 0000000..dcb0bf6
--- /dev/null
+++ b/public/js/ueditor/ueditor.parse.js
@@ -0,0 +1,900 @@
+/*!
+ * UEditorPlus parse
+ * version: 2.0.0
+*/
+(function(){
+
+(function() {
+  UE = window.UE || {};
+  var isIE = !!window.ActiveXObject;
+  //定义utils工具
+  var utils = {
+    removeLastbs: function(url) {
+      return url.replace(/\/$/, "");
+    },
+    extend: function(t, s) {
+      var a = arguments,
+        notCover = this.isBoolean(a[a.length - 1]) ? a[a.length - 1] : false,
+        len = this.isBoolean(a[a.length - 1]) ? a.length - 1 : a.length;
+      for (var i = 1; i < len; i++) {
+        var x = a[i];
+        for (var k in x) {
+          if (!notCover || !t.hasOwnProperty(k)) {
+            t[k] = x[k];
+          }
+        }
+      }
+      return t;
+    },
+    isIE: isIE,
+    cssRule: isIE
+      ? function(key, style, doc) {
+          var indexList, index;
+          doc = doc || document;
+          if (doc.indexList) {
+            indexList = doc.indexList;
+          } else {
+            indexList = doc.indexList = {};
+          }
+          var sheetStyle;
+          if (!indexList[key]) {
+            if (style === undefined) {
+              return "";
+            }
+            sheetStyle = doc.createStyleSheet(
+              "",
+              (index = doc.styleSheets.length)
+            );
+            indexList[key] = index;
+          } else {
+            sheetStyle = doc.styleSheets[indexList[key]];
+          }
+          if (style === undefined) {
+            return sheetStyle.cssText;
+          }
+          sheetStyle.cssText = sheetStyle.cssText + "\n" + (style || "");
+        }
+      : function(key, style, doc) {
+          doc = doc || document;
+          var head = doc.getElementsByTagName("head")[0],
+            node;
+          if (!(node = doc.getElementById(key))) {
+            if (style === undefined) {
+              return "";
+            }
+            node = doc.createElement("style");
+            node.id = key;
+            head.appendChild(node);
+          }
+          if (style === undefined) {
+            return node.innerHTML;
+          }
+          if (style !== "") {
+            node.innerHTML = node.innerHTML + "\n" + style;
+          } else {
+            head.removeChild(node);
+          }
+        },
+    domReady: function(onready) {
+      var doc = window.document;
+      if (doc.readyState === "complete") {
+        onready();
+      } else {
+        if (isIE) {
+          (function() {
+            if (doc.isReady) return;
+            try {
+              doc.documentElement.doScroll("left");
+            } catch (error) {
+              setTimeout(arguments.callee, 0);
+              return;
+            }
+            onready();
+          })();
+          window.attachEvent("onload", function() {
+            onready();
+          });
+        } else {
+          doc.addEventListener(
+            "DOMContentLoaded",
+            function() {
+              doc.removeEventListener(
+                "DOMContentLoaded",
+                arguments.callee,
+                false
+              );
+              onready();
+            },
+            false
+          );
+          window.addEventListener(
+            "load",
+            function() {
+              onready();
+            },
+            false
+          );
+        }
+      }
+    },
+    each: function(obj, iterator, context) {
+      if (obj == null) return;
+      if (obj.length === +obj.length) {
+        for (var i = 0, l = obj.length; i < l; i++) {
+          if (iterator.call(context, obj[i], i, obj) === false) return false;
+        }
+      } else {
+        for (var key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            if (iterator.call(context, obj[key], key, obj) === false)
+              return false;
+          }
+        }
+      }
+    },
+    inArray: function(arr, item) {
+      var index = -1;
+      this.each(arr, function(v, i) {
+        if (v === item) {
+          index = i;
+          return false;
+        }
+      });
+      return index;
+    },
+    pushItem: function(arr, item) {
+      if (this.inArray(arr, item) == -1) {
+        arr.push(item);
+      }
+    },
+    trim: function(str) {
+      return str.replace(/(^[ \t\n\r]+)|([ \t\n\r]+$)/g, "");
+    },
+    indexOf: function(array, item, start) {
+      var index = -1;
+      start = this.isNumber(start) ? start : 0;
+      this.each(array, function(v, i) {
+        if (i >= start && v === item) {
+          index = i;
+          return false;
+        }
+      });
+      return index;
+    },
+    hasClass: function(element, className) {
+      className = className
+        .replace(/(^[ ]+)|([ ]+$)/g, "")
+        .replace(/[ ]{2,}/g, " ")
+        .split(" ");
+      for (var i = 0, ci, cls = element.className; (ci = className[i++]); ) {
+        if (!new RegExp("\\b" + ci + "\\b", "i").test(cls)) {
+          return false;
+        }
+      }
+      return i - 1 == className.length;
+    },
+    addClass: function(elm, classNames) {
+      if (!elm) return;
+      classNames = this.trim(classNames).replace(/[ ]{2,}/g, " ").split(" ");
+      for (var i = 0, ci, cls = elm.className; (ci = classNames[i++]); ) {
+        if (!new RegExp("\\b" + ci + "\\b").test(cls)) {
+          cls += " " + ci;
+        }
+      }
+      elm.className = utils.trim(cls);
+    },
+    removeClass: function(elm, classNames) {
+      classNames = this.isArray(classNames)
+        ? classNames
+        : this.trim(classNames).replace(/[ ]{2,}/g, " ").split(" ");
+      for (var i = 0, ci, cls = elm.className; (ci = classNames[i++]); ) {
+        cls = cls.replace(new RegExp("\\b" + ci + "\\b"), "");
+      }
+      cls = this.trim(cls).replace(/[ ]{2,}/g, " ");
+      elm.className = cls;
+      !cls && elm.removeAttribute("className");
+    },
+    on: function(element, type, handler) {
+      var types = this.isArray(type) ? type : type.split(/\s+/),
+        k = types.length;
+      if (k)
+        while (k--) {
+          type = types[k];
+          if (element.addEventListener) {
+            element.addEventListener(type, handler, false);
+          } else {
+            if (!handler._d) {
+              handler._d = {
+                els: []
+              };
+            }
+            var key = type + handler.toString(),
+              index = utils.indexOf(handler._d.els, element);
+            if (!handler._d[key] || index == -1) {
+              if (index == -1) {
+                handler._d.els.push(element);
+              }
+              if (!handler._d[key]) {
+                handler._d[key] = function(evt) {
+                  return handler.call(evt.srcElement, evt || window.event);
+                };
+              }
+
+              element.attachEvent("on" + type, handler._d[key]);
+            }
+          }
+        }
+      element = null;
+    },
+    off: function(element, type, handler) {
+      var types = this.isArray(type) ? type : type.split(/\s+/),
+        k = types.length;
+      if (k)
+        while (k--) {
+          type = types[k];
+          if (element.removeEventListener) {
+            element.removeEventListener(type, handler, false);
+          } else {
+            var key = type + handler.toString();
+            try {
+              element.detachEvent(
+                "on" + type,
+                handler._d ? handler._d[key] : handler
+              );
+            } catch (e) {}
+            if (handler._d && handler._d[key]) {
+              var index = utils.indexOf(handler._d.els, element);
+              if (index != -1) {
+                handler._d.els.splice(index, 1);
+              }
+              handler._d.els.length == 0 && delete handler._d[key];
+            }
+          }
+        }
+    },
+    loadFile: (function() {
+      var tmpList = [];
+      function getItem(doc, obj) {
+        try {
+          for (var i = 0, ci; (ci = tmpList[i++]); ) {
+            if (ci.doc === doc && ci.url == (obj.src || obj.href)) {
+              return ci;
+            }
+          }
+        } catch (e) {
+          return null;
+        }
+      }
+      return function(doc, obj, fn) {
+        var item = getItem(doc, obj);
+        if (item) {
+          if (item.ready) {
+            fn && fn();
+          } else {
+            item.funs.push(fn);
+          }
+          return;
+        }
+        tmpList.push({
+          doc: doc,
+          url: obj.src || obj.href,
+          funs: [fn]
+        });
+        if (!doc.body) {
+          var html = [];
+          for (var p in obj) {
+            if (p == "tag") continue;
+            html.push(p + '="' + obj[p] + '"');
+          }
+          doc.write(
+            "<" + obj.tag + " " + html.join(" ") + " ></" + obj.tag + ">"
+          );
+          return;
+        }
+        if (obj.id && doc.getElementById(obj.id)) {
+          return;
+        }
+        var element = doc.createElement(obj.tag);
+        delete obj.tag;
+        for (var p in obj) {
+          element.setAttribute(p, obj[p]);
+        }
+        element.onload = element.onreadystatechange = function() {
+          if (!this.readyState || /loaded|complete/.test(this.readyState)) {
+            item = getItem(doc, obj);
+            if (item.funs.length > 0) {
+              item.ready = 1;
+              for (var fi; (fi = item.funs.pop()); ) {
+                fi();
+              }
+            }
+            element.onload = element.onreadystatechange = null;
+          }
+        };
+        element.onerror = function() {
+          throw Error(
+            "The load " + (obj.href || obj.src) + " fails,check the url"
+          );
+        };
+        doc.getElementsByTagName("head")[0].appendChild(element);
+      };
+    })()
+  };
+  utils.each(
+    ["String", "Function", "Array", "Number", "RegExp", "Object", "Boolean"],
+    function(v) {
+      utils["is" + v] = function(obj) {
+        return Object.prototype.toString.apply(obj) == "[object " + v + "]";
+      };
+    }
+  );
+  var parselist = {};
+  UE.parse = {
+    register: function(parseName, fn) {
+      parselist[parseName] = fn;
+    },
+    load: function(opt) {
+      utils.each(parselist, function(v) {
+        v.call(opt, utils);
+      });
+    }
+  };
+  uParse = function(selector, opt) {
+    utils.domReady(function() {
+      var contents;
+      if (document.querySelectorAll) {
+        contents = document.querySelectorAll(selector);
+      } else {
+        if (/^#/.test(selector)) {
+          contents = [document.getElementById(selector.replace(/^#/, ""))];
+        } else if (/^\./.test(selector)) {
+          var contents = [];
+          utils.each(document.getElementsByTagName("*"), function(node) {
+            if (
+              node.className &&
+              new RegExp("\\b" + selector.replace(/^\./, "") + "\\b", "i").test(
+                node.className
+              )
+            ) {
+              contents.push(node);
+            }
+          });
+        } else {
+          contents = document.getElementsByTagName(selector);
+        }
+      }
+      utils.each(contents, function(v) {
+        UE.parse.load(utils.extend({ root: v, selector: selector }, opt));
+      });
+    });
+  };
+})();
+
+UE.parse.register("insertcode", function(utils) {
+  var pres = this.root.getElementsByTagName("pre");
+  if (pres.length) {
+    if (typeof XRegExp == "undefined") {
+      var jsurl, cssurl;
+      if (this.rootPath !== undefined) {
+        jsurl =
+          utils.removeLastbs(this.rootPath) +
+          "/third-party/SyntaxHighlighter/shCore.js";
+        cssurl =
+          utils.removeLastbs(this.rootPath) +
+          "/third-party/SyntaxHighlighter/shCoreDefault.css";
+      } else {
+        jsurl = this.highlightJsUrl;
+        cssurl = this.highlightCssUrl;
+      }
+      utils.loadFile(document, {
+        id: "syntaxhighlighter_css",
+        tag: "link",
+        rel: "stylesheet",
+        type: "text/css",
+        href: cssurl
+      });
+      utils.loadFile(
+        document,
+        {
+          id: "syntaxhighlighter_js",
+          src: jsurl,
+          tag: "script",
+          type: "text/javascript",
+          defer: "defer"
+        },
+        function() {
+          utils.each(pres, function(pi) {
+            if (pi && /brush/i.test(pi.className)) {
+              SyntaxHighlighter.highlight(pi);
+            }
+          });
+        }
+      );
+    } else {
+      utils.each(pres, function(pi) {
+        if (pi && /brush/i.test(pi.className)) {
+          SyntaxHighlighter.highlight(pi);
+        }
+      });
+    }
+  }
+});
+
+UE.parse.register("table", function(utils) {
+  var me = this,
+    root = this.root,
+    tables = root.getElementsByTagName("table");
+  if (tables.length) {
+    var selector = this.selector;
+    //追加默认的表格样式
+    utils.cssRule(
+      "table",
+      selector +
+        " table.noBorderTable td," +
+        selector +
+        " table.noBorderTable th," +
+        selector +
+        " table.noBorderTable caption{border:1px dashed #ddd !important}" +
+        selector +
+        " table.sortEnabled tr.firstRow th," +
+        selector +
+        " table.sortEnabled tr.firstRow td{padding-right:20px; background-repeat: no-repeat;" +
+        "background-position: center right; background-image:url(" +
+        this.rootPath +
+        "themes/default/images/sortable.png);}" +
+        selector +
+        " table.sortEnabled tr.firstRow th:hover," +
+        selector +
+        " table.sortEnabled tr.firstRow td:hover{background-color: #EEE;}" +
+        selector +
+        " table{margin-bottom:10px;border-collapse:collapse;display:table;}" +
+        selector +
+        " td," +
+        selector +
+        " th{padding: 5px 10px;border: 1px solid #DDD;}" +
+        selector +
+        " caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}" +
+        selector +
+        " th{border-top:1px solid #BBB;background:#F7F7F7;}" +
+        selector +
+        " table tr.firstRow th{border-top:2px solid #BBB;background:#F7F7F7;}" +
+        selector +
+        " tr.ue-table-interlace-color-single td{ background: #fcfcfc; }" +
+        selector +
+        " tr.ue-table-interlace-color-double td{ background: #f7faff; }" +
+        selector +
+        " td p{margin:0;padding:0;width:auto;height:auto;}",
+      document
+    );
+    //填充空的单元格
+
+    utils.each("td th caption".split(" "), function(tag) {
+      var cells = root.getElementsByTagName(tag);
+      cells.length &&
+        utils.each(cells, function(node) {
+          if (!node.firstChild) {
+            node.innerHTML = "&nbsp;";
+          }
+        });
+    });
+
+    //表格可排序
+    var tables = root.getElementsByTagName("table");
+    utils.each(tables, function(table) {
+      if (/\bsortEnabled\b/.test(table.className)) {
+        utils.on(table, "click", function(e) {
+          var target = e.target || e.srcElement,
+            cell = findParentByTagName(target, ["td", "th"]);
+          var table = findParentByTagName(target, "table"),
+            colIndex = utils.indexOf(table.rows[0].cells, cell),
+            sortType = table.getAttribute("data-sort-type");
+          if (colIndex != -1) {
+            sortTable(table, colIndex, me.tableSortCompareFn || sortType);
+            updateTable(table);
+          }
+        });
+      }
+    });
+
+    //按照标签名查找父节点
+    function findParentByTagName(target, tagNames) {
+      var i,
+        current = target;
+      tagNames = utils.isArray(tagNames) ? tagNames : [tagNames];
+      while (current) {
+        for (i = 0; i < tagNames.length; i++) {
+          if (current.tagName == tagNames[i].toUpperCase()) return current;
+        }
+        current = current.parentNode;
+      }
+      return null;
+    }
+    //表格排序
+    function sortTable(table, sortByCellIndex, compareFn) {
+      var rows = table.rows,
+        trArray = [],
+        flag = rows[0].cells[0].tagName === "TH",
+        lastRowIndex = 0;
+
+      for (var i = 0, len = rows.length; i < len; i++) {
+        trArray[i] = rows[i];
+      }
+
+      var Fn = {
+        reversecurrent: function(td1, td2) {
+          return 1;
+        },
+        orderbyasc: function(td1, td2) {
+          var value1 = td1.innerText || td1.textContent,
+            value2 = td2.innerText || td2.textContent;
+          return value1.localeCompare(value2);
+        },
+        reversebyasc: function(td1, td2) {
+          var value1 = td1.innerHTML,
+            value2 = td2.innerHTML;
+          return value2.localeCompare(value1);
+        },
+        orderbynum: function(td1, td2) {
+          var value1 = td1[utils.isIE ? "innerText" : "textContent"].match(
+            /\d+/
+          ),
+            value2 = td2[utils.isIE ? "innerText" : "textContent"].match(/\d+/);
+          if (value1) value1 = +value1[0];
+          if (value2) value2 = +value2[0];
+          return (value1 || 0) - (value2 || 0);
+        },
+        reversebynum: function(td1, td2) {
+          var value1 = td1[utils.isIE ? "innerText" : "textContent"].match(
+            /\d+/
+          ),
+            value2 = td2[utils.isIE ? "innerText" : "textContent"].match(/\d+/);
+          if (value1) value1 = +value1[0];
+          if (value2) value2 = +value2[0];
+          return (value2 || 0) - (value1 || 0);
+        }
+      };
+
+      //对表格设置排序的标记data-sort-type
+      table.setAttribute(
+        "data-sort-type",
+        compareFn && typeof compareFn === "string" && Fn[compareFn]
+          ? compareFn
+          : ""
+      );
+
+      //th不参与排序
+      flag && trArray.splice(0, 1);
+      trArray = sort(trArray, function(tr1, tr2) {
+        var result;
+        if (compareFn && typeof compareFn === "function") {
+          result = compareFn.call(
+            this,
+            tr1.cells[sortByCellIndex],
+            tr2.cells[sortByCellIndex]
+          );
+        } else if (compareFn && typeof compareFn === "number") {
+          result = 1;
+        } else if (
+          compareFn &&
+          typeof compareFn === "string" &&
+          Fn[compareFn]
+        ) {
+          result = Fn[compareFn].call(
+            this,
+            tr1.cells[sortByCellIndex],
+            tr2.cells[sortByCellIndex]
+          );
+        } else {
+          result = Fn["orderbyasc"].call(
+            this,
+            tr1.cells[sortByCellIndex],
+            tr2.cells[sortByCellIndex]
+          );
+        }
+        return result;
+      });
+      var fragment = table.ownerDocument.createDocumentFragment();
+      for (var j = 0, len = trArray.length; j < len; j++) {
+        fragment.appendChild(trArray[j]);
+      }
+      var tbody = table.getElementsByTagName("tbody")[0];
+      if (!lastRowIndex) {
+        tbody.appendChild(fragment);
+      } else {
+        tbody.insertBefore(
+          fragment,
+          rows[lastRowIndex - range.endRowIndex + range.beginRowIndex - 1]
+        );
+      }
+    }
+    //冒泡排序
+    function sort(array, compareFn) {
+      compareFn =
+        compareFn ||
+        function(item1, item2) {
+          return item1.localeCompare(item2);
+        };
+      for (var i = 0, len = array.length; i < len; i++) {
+        for (var j = i, length = array.length; j < length; j++) {
+          if (compareFn(array[i], array[j]) > 0) {
+            var t = array[i];
+            array[i] = array[j];
+            array[j] = t;
+          }
+        }
+      }
+      return array;
+    }
+    //更新表格
+    function updateTable(table) {
+      //给第一行设置firstRow的样式名称,在排序图标的样式上使用到
+      if (!utils.hasClass(table.rows[0], "firstRow")) {
+        for (var i = 1; i < table.rows.length; i++) {
+          utils.removeClass(table.rows[i], "firstRow");
+        }
+        utils.addClass(table.rows[0], "firstRow");
+      }
+    }
+  }
+});
+
+UE.parse.register("background", function(utils) {
+  var me = this,
+    root = me.root,
+    p = root.getElementsByTagName("p"),
+    styles;
+
+  for (var i = 0, ci; (ci = p[i++]); ) {
+    styles = ci.getAttribute("data-background");
+    if (styles) {
+      ci.parentNode.removeChild(ci);
+    }
+  }
+
+  //追加默认的表格样式
+  styles &&
+    utils.cssRule(
+      "ueditor_background",
+      me.selector + "{" + styles + "}",
+      document
+    );
+});
+
+UE.parse.register("list", function(utils) {
+  var customCss = [],
+    customStyle = {
+      cn: "cn-1-",
+      cn1: "cn-2-",
+      cn2: "cn-3-",
+      num: "num-1-",
+      num1: "num-2-",
+      num2: "num-3-",
+      dash: "dash",
+      dot: "dot"
+    };
+
+  utils.extend(this, {
+    liiconpath: "http://bs.baidu.com/listicon/",
+    listDefaultPaddingLeft: "20"
+  });
+
+  var root = this.root,
+    ols = root.getElementsByTagName("ol"),
+    uls = root.getElementsByTagName("ul"),
+    selector = this.selector;
+
+  if (ols.length) {
+    applyStyle.call(this, ols);
+  }
+
+  if (uls.length) {
+    applyStyle.call(this, uls);
+  }
+
+  if (ols.length || uls.length) {
+    customCss.push(selector + " .list-paddingleft-1{padding-left:0}");
+    customCss.push(
+      selector +
+        " .list-paddingleft-2{padding-left:" +
+        this.listDefaultPaddingLeft +
+        "px}"
+    );
+    customCss.push(
+      selector +
+        " .list-paddingleft-3{padding-left:" +
+        this.listDefaultPaddingLeft * 2 +
+        "px}"
+    );
+
+    utils.cssRule(
+      "list",
+      selector +
+        " ol," +
+        selector +
+        " ul{margin:0;padding:0;}\n" +
+        selector +
+        " li{clear:both;}\n" +
+        customCss.join("\n"),
+      document
+    );
+  }
+  function applyStyle(nodes) {
+    var T = this;
+    utils.each(nodes, function(list) {
+      if (list.className && /custom_/i.test(list.className)) {
+        var listStyle = list.className.match(/custom_(\w+)/)[1];
+        if (listStyle == "dash" || listStyle == "dot") {
+          utils.pushItem(
+            customCss,
+            selector +
+              " li.list-" +
+              customStyle[listStyle] +
+              "{background-image:url(" +
+              T.liiconpath +
+              customStyle[listStyle] +
+              ".gif)}"
+          );
+          utils.pushItem(
+            customCss,
+            selector +
+              " ul.custom_" +
+              listStyle +
+              "{list-style:none;} " +
+              selector +
+              " ul.custom_" +
+              listStyle +
+              " li{background-position:0 3px;background-repeat:no-repeat}"
+          );
+        } else {
+          var index = 1;
+          utils.each(list.childNodes, function(li) {
+            if (li.tagName == "LI") {
+              utils.pushItem(
+                customCss,
+                selector +
+                  " li.list-" +
+                  customStyle[listStyle] +
+                  index +
+                  "{background-image:url(" +
+                  T.liiconpath +
+                  "list-" +
+                  customStyle[listStyle] +
+                  index +
+                  ".gif)}"
+              );
+              index++;
+            }
+          });
+          utils.pushItem(
+            customCss,
+            selector +
+              " ol.custom_" +
+              listStyle +
+              "{list-style:none;}" +
+              selector +
+              " ol.custom_" +
+              listStyle +
+              " li{background-position:0 3px;background-repeat:no-repeat}"
+          );
+        }
+        switch (listStyle) {
+          case "cn":
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-1{padding-left:25px}"
+            );
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-2{padding-left:40px}"
+            );
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-3{padding-left:55px}"
+            );
+            break;
+          case "cn1":
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-1{padding-left:30px}"
+            );
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-2{padding-left:40px}"
+            );
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-3{padding-left:55px}"
+            );
+            break;
+          case "cn2":
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-1{padding-left:40px}"
+            );
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-2{padding-left:55px}"
+            );
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-3{padding-left:68px}"
+            );
+            break;
+          case "num":
+          case "num1":
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-1{padding-left:25px}"
+            );
+            break;
+          case "num2":
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-1{padding-left:35px}"
+            );
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft-2{padding-left:40px}"
+            );
+            break;
+          case "dash":
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft{padding-left:35px}"
+            );
+            break;
+          case "dot":
+            utils.pushItem(
+              customCss,
+              selector +
+                " li.list-" +
+                listStyle +
+                "-paddingleft{padding-left:20px}"
+            );
+        }
+      }
+    });
+  }
+});
+
+
+})();
diff --git a/shim.d.ts b/shim.d.ts
new file mode 100644
index 0000000..3e9bfd0
--- /dev/null
+++ b/shim.d.ts
@@ -0,0 +1,13 @@
+/* eslint-disable */
+
+// 声明文件，*.vue 后缀的文件交给 vue 模块来处理
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
+
+// 声明文件，定义全局变量。其它 app.config.globalProperties.xxx，使用 getCurrentInstance() 来获取
+interface Window {
+	nextLoading: boolean;
+}
diff --git a/source.d.ts b/source.d.ts
new file mode 100644
index 0000000..2f9c768
--- /dev/null
+++ b/source.d.ts
@@ -0,0 +1,6 @@
+declare module '*.json';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.scss';
+declare module '*.ts';
+declare module '*.js';
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..eb9bda8
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,98 @@
+<template>
+	<el-config-provider :size="getGlobalComponentSize" :locale="i18nLocale">
+		<router-view v-show="themeConfig.lockScreenTime > 1" />
+		<LockScreen v-if="themeConfig.isLockScreen" />
+		<Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
+		<CloseFull v-if="!themeConfig.isLockScreen" />
+	</el-config-provider>
+  <BigUploader></BigUploader>
+</template>
+
+<script lang="ts">
+import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch, reactive, toRefs } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import other from '/@/utils/other';
+import { Local, Session } from '/@/utils/storage';
+import setIntroduction from '/@/utils/setIconfont';
+import LockScreen from '/@/layout/lockScreen/index.vue';
+import Setings from '/@/layout/navBars/breadcrumb/setings.vue';
+import CloseFull from '/@/layout/navBars/breadcrumb/closeFull.vue';
+import BigUploader from '/@/components/bigUploader/index.vue'
+
+export default defineComponent({
+	name: 'app',
+	components: { LockScreen, Setings, CloseFull,BigUploader },
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const setingsRef = ref();
+		const route = useRoute();
+		const stores = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const state = reactive({
+			i18nLocale: null,
+		});
+		// 获取全局组件大小
+		const getGlobalComponentSize = computed(() => {
+			return other.globalComponentSize();
+		});
+		// 布局配置弹窗打开
+		const openSetingsDrawer = () => {
+			setingsRef.value.openDrawer();
+		};
+		// 设置初始化，防止刷新时恢复默认
+		onBeforeMount(() => {
+			// 设置批量第三方 icon 图标
+			setIntroduction.cssCdn();
+			// 设置批量第三方 js
+			setIntroduction.jsCdn();
+		});
+		// 页面加载时
+		onMounted(() => {
+			nextTick(() => {
+				// 监听布局配置弹窗点击打开
+				proxy.mittBus.on('openSetingsDrawer', () => {
+					openSetingsDrawer();
+				});
+				// 设置 i18n，App.vue 中的 el-config-provider
+				proxy.mittBus.on('getI18nConfig', (locale: string) => {
+					(state.i18nLocale as string | null) = locale;
+				});
+				// 获取缓存中的布局配置
+				if (Local.get('themeConfig')) {
+					storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
+					document.documentElement.style.cssText = Local.get('themeConfigStyle');
+				}
+				// 获取缓存中的全屏配置
+				if (Session.get('isTagsViewCurrenFull')) {
+					stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
+				}
+			});
+		});
+		// 页面销毁时，关闭监听布局配置/i18n监听
+		onUnmounted(() => {
+			proxy.mittBus.off('openSetingsDrawer', () => {});
+			proxy.mittBus.off('getI18nConfig', () => {});
+		});
+		// 监听路由的变化，设置网站标题
+		watch(
+			() => route.path,
+			() => {
+				other.useTitle();
+			},
+			{
+				deep: true,
+			}
+		);
+		return {
+			themeConfig,
+			setingsRef,
+			getGlobalComponentSize,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/api/items.ts b/src/api/items.ts
new file mode 100644
index 0000000..0a4300e
--- /dev/null
+++ b/src/api/items.ts
@@ -0,0 +1,53 @@
+// 查询列表
+export function getItems(f: Function, query: Object) {
+	query = query || { pageSize: 10000 };
+	return f(query);
+}
+
+export function setItems(response: any, k: string, v: string):Array<ItemOptions> {
+	const data: Array<ItemOptions> = [];
+	k = k || 'id';
+	v = v || 'name';
+	if (response.data && response.data.list && response.data.list.length > 0) {
+		response.data.list.forEach((e: any) => {
+			data.push({
+				key: e[k].toString(),
+				value: e[v].toString(),
+			});
+		});
+	}
+	return data;
+}
+
+// 选项类型接口
+export interface ItemOptions {
+	key:string,
+	value:string
+}
+
+/** 通过 options 数组获取 key 对应的 value */
+export function getOptionValue(key: any, options: Array<any>,keyName:string,valName:string) {
+	keyName = keyName??'key'
+	valName = valName??'value'
+	const option = options.find((value) => {
+		return key + '' === value[keyName];
+	});
+	if (option !== undefined) {
+		return option[valName];
+	}
+}
+
+export function isEmpty(v: any) {
+	if (v === '' || v === undefined || v === null) {
+		return true;
+	}
+
+	if (typeof v === 'object') {
+		if (Array.isArray(v)) {
+			return v.length === 0;
+		} else {
+			return Object.keys(v).length === 0;
+		}
+	}
+	return false;
+}
diff --git a/src/api/login/index.ts b/src/api/login/index.ts
new file mode 100644
index 0000000..b22986f
--- /dev/null
+++ b/src/api/login/index.ts
@@ -0,0 +1,33 @@
+import request from '/@/utils/request';
+
+/**
+ * 登录api接口集合
+ * @method signIn 用户登录
+ */
+export function login(params: object){
+	return request({
+		url: '/api/v1/system/login',
+		method: 'post',
+		data: params,
+	});
+}
+
+/**
+ * 获取验证码
+ */
+export function captcha(){
+	return request({
+		url:"/api/v1/pub/captcha/get",
+		method:"get"
+	})
+}
+
+/**
+ * 退出登录
+ */
+export function logout(){
+	return request({
+		url: '/api/v1/system/logout',
+		method: 'get',
+	});
+}
diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
new file mode 100644
index 0000000..9c16bb7
--- /dev/null
+++ b/src/api/menu/index.ts
@@ -0,0 +1,26 @@
+import request from '/@/utils/request';
+
+/**
+ * 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu
+ * 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+ * @method getMenuAdmin 获取后端动态路由菜单(admin)
+ * @method getMenuTest 获取后端动态路由菜单(test)
+ */
+export function useMenuApi() {
+	return {
+		getMenuAdmin: (params?: object) => {
+			return request({
+				url: '/gitee/lyt-top/vue-next-admin-images/raw/master/menu/adminMenu.json',
+				method: 'get',
+				params,
+			});
+		},
+		getMenuTest: (params?: object) => {
+			return request({
+				url: '/gitee/lyt-top/vue-next-admin-images/raw/master/menu/testMenu.json',
+				method: 'get',
+				params,
+			});
+		},
+	};
+}
diff --git a/src/api/system/bigFile/index.ts b/src/api/system/bigFile/index.ts
new file mode 100644
index 0000000..e3b91ec
--- /dev/null
+++ b/src/api/system/bigFile/index.ts
@@ -0,0 +1,49 @@
+import request from '/@/utils/request';
+
+// 获取列表
+export function getBigFileList (query:Object) {
+    return request({
+        url: '/api/v1/system/bigFile/list',
+        method: 'get',
+        params:query
+    })
+}
+
+
+// 获取一条数据
+export function getBigFile(id:number) {
+    return request({
+        url: '/api/v1/system/bigFile/get',
+        method: 'get',
+        params:{id}
+    })
+}
+
+// 添加文件
+export function addBigFile(data:any) {
+    return request({
+        url: '/api/v1/system/bigFile/add',
+        method: 'post',
+        data:data
+    })
+}
+
+// 编辑文件夹
+export function editBigFile(data:any) {
+    return request({
+        url: '/api/v1/system/bigFile/edit',
+        method: 'put',
+        data:data
+    })
+}
+
+
+// 删除文件
+export function deleteBigFile(ids:number[]) {
+    return request({
+        url: '/api/v1/system/bigFile/delete',
+        method: 'delete',
+        data:{ids}
+    })
+}
+
diff --git a/src/api/system/config/index.ts b/src/api/system/config/index.ts
new file mode 100644
index 0000000..c3824c6
--- /dev/null
+++ b/src/api/system/config/index.ts
@@ -0,0 +1,42 @@
+import request from '/@/utils/request';
+
+
+export function getConfigList(query:Object) {
+    return request({
+        url: '/api/v1/system/config/list',
+        method: 'get',
+        params:query
+    })
+}
+
+export function getConfig(id:number) {
+    return request({
+        url: '/api/v1/system/config/get',
+        method: 'get',
+        params:{id}
+    })
+}
+
+export function addConfig(data:any) {
+    return request({
+        url: '/api/v1/system/config/add',
+        method: 'post',
+        data:data
+    })
+}
+
+export function editConfig(data:any) {
+    return request({
+        url: '/api/v1/system/config/edit',
+        method: 'put',
+        data:data
+    })
+}
+
+export function deleteConfig(ids:number[]) {
+    return request({
+        url: '/api/v1/system/config/delete',
+        method: 'delete',
+        data:{ids}
+    })
+}
diff --git a/src/api/system/dept/index.ts b/src/api/system/dept/index.ts
new file mode 100644
index 0000000..95a9b42
--- /dev/null
+++ b/src/api/system/dept/index.ts
@@ -0,0 +1,36 @@
+import request from '/@/utils/request';
+
+export function getDeptList(query?:Object) {
+    return request({
+        url: '/api/v1/system/dept/list',
+        method: 'get',
+        params:query
+    })
+}
+
+
+export function addDept(data:object) {
+    return request({
+        url: '/api/v1/system/dept/add',
+        method: 'post',
+        data:data
+    })
+}
+
+
+export function editDept(data:object) {
+    return request({
+        url: '/api/v1/system/dept/edit',
+        method: 'put',
+        data:data
+    })
+}
+
+
+export function deleteDept(id:number) {
+    return request({
+        url: '/api/v1/system/dept/delete',
+        method: 'delete',
+        data:{id}
+    })
+}
diff --git a/src/api/system/dict/data.ts b/src/api/system/dict/data.ts
new file mode 100644
index 0000000..c97ae71
--- /dev/null
+++ b/src/api/system/dict/data.ts
@@ -0,0 +1,70 @@
+import request from '/@/utils/request';
+import {ref ,toRefs,ToRefs} from 'vue'
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType :string,defaultValue?:string):Promise<any> {
+    let dv = defaultValue??''
+    let params ={
+        dictType:dictType,
+        defaultValue:dv
+    }
+    return request({
+        url: '/api/v1/system/dict/data/getDictData',
+        method: 'get',
+        params:params
+    })
+}
+
+/**
+ * 获取字典数据
+ */
+export function useDict(...args:string[]):ToRefs<any>{
+    const res:any = ref({});
+    args.forEach((d:string) => {
+        res.value[d] = [];
+        getDicts(d).then(resp => {
+            res.value[d] = resp.data.values.map((p:any) =>  ({ label: p.value, value: p.key, isDefault: p.isDefault }))
+        })
+    })
+    return toRefs(res.value);
+}
+
+
+export function getDataList(query:Object) {
+    return request({
+        url: '/api/v1/system/dict/data/list',
+        method: 'get',
+        params:query
+    })
+}
+
+export function getData(dictCode:number) {
+    return request({
+        url: '/api/v1/system/dict/data/get',
+        method: 'get',
+        params:{dictCode}
+    })
+}
+
+export function addData(data:any) {
+    return request({
+        url: '/api/v1/system/dict/data/add',
+        method: 'post',
+        data:data
+    })
+}
+
+export function editData(data:any) {
+    return request({
+        url: '/api/v1/system/dict/data/edit',
+        method: 'put',
+        data:data
+    })
+}
+
+export function deleteData(ids:number[]) {
+    return request({
+        url: '/api/v1/system/dict/data/delete',
+        method: 'delete',
+        data:{ids}
+    })
+}
diff --git a/src/api/system/dict/type.ts b/src/api/system/dict/type.ts
new file mode 100644
index 0000000..0163dbc
--- /dev/null
+++ b/src/api/system/dict/type.ts
@@ -0,0 +1,52 @@
+import request from '/@/utils/request';
+
+export function getTypeList(query:Object) {
+    return request({
+        url: '/api/v1/system/dict/type/list',
+        method: 'get',
+        params:query
+    })
+}
+
+export function getType(dictId:number) {
+    return request({
+        url: '/api/v1/system/dict/type/get',
+        method: 'get',
+        params:{dictId}
+    })
+}
+
+export function addType(data:any) {
+    return request({
+        url: '/api/v1/system/dict/type/add',
+        method: 'post',
+        data:data
+    })
+}
+
+export function editType(data:any) {
+    return request({
+        url: '/api/v1/system/dict/type/edit',
+        method: 'put',
+        data:data
+    })
+}
+
+
+export function deleteType(dictIds:number[]) {
+    return request({
+        url: '/api/v1/system/dict/type/delete',
+        method: 'delete',
+        data:{dictIds}
+    })
+}
+
+
+// 获取字典选择框列表
+export function optionselect() {
+    return request({
+        url: '/api/v1/system/dict/type/optionSelect',
+        method: 'get'
+    })
+}
+
diff --git a/src/api/system/menu/index.ts b/src/api/system/menu/index.ts
new file mode 100644
index 0000000..758ea1c
--- /dev/null
+++ b/src/api/system/menu/index.ts
@@ -0,0 +1,57 @@
+import request from '/@/utils/request';
+
+export function getMenuList(query:Object) {
+    return request({
+        url: '/api/v1/system/menu/list',
+        method: 'get',
+        params:query
+    })
+}
+
+export function getUserMenus() {
+    return request({
+        url: '/api/v1/system/user/getUserMenus',
+        method: 'get'
+    })
+}
+
+export function getMenuParams() {
+    return request({
+        url: '/api/v1/system/menu/getParams',
+        method: 'get'
+    })
+}
+
+export function addMenu(data:Object) {
+    return request({
+        url: '/api/v1/system/menu/add',
+        method: 'post',
+        data:data
+    })
+}
+
+export function getMenuInfo(id:number) {
+    return request({
+        url: '/api/v1/system/menu/get',
+        method: 'get',
+        params:{id}
+    })
+}
+
+export function updateMenu(data:Object) {
+    return request({
+        url: '/api/v1/system/menu/update',
+        method: 'put',
+        data:data
+    })
+}
+
+
+// 删除菜单
+export function delMenu(menuId:number) {
+    return request({
+        url: '/api/v1/system/menu/delete',
+        method: 'delete',
+        data:{ids:[menuId]}
+    })
+}
diff --git a/src/api/system/monitor/loginLog/index.ts b/src/api/system/monitor/loginLog/index.ts
new file mode 100644
index 0000000..d2fcb61
--- /dev/null
+++ b/src/api/system/monitor/loginLog/index.ts
@@ -0,0 +1,28 @@
+import request from '/@/utils/request';
+
+
+export function logList(query:object) {
+    return request({
+        url: '/api/v1/system/loginLog/list',
+        method: 'get',
+        params:query
+    })
+}
+
+
+export function deleteLog(ids:number[]) {
+    return request({
+        url: '/api/v1/system/loginLog/delete',
+        method: 'delete',
+        params:{ids}
+    })
+}
+
+
+
+export function clearLog() {
+    return request({
+        url: '/api/v1/system/loginLog/clear',
+        method: 'delete',
+    })
+}
diff --git a/src/api/system/monitor/operLog/index.ts b/src/api/system/monitor/operLog/index.ts
new file mode 100644
index 0000000..569ec7a
--- /dev/null
+++ b/src/api/system/monitor/operLog/index.ts
@@ -0,0 +1,37 @@
+import request from '/@/utils/request'
+// 查询操作日志列表
+export function listSysOperLog(query:object) {
+    return request({
+        url: '/api/v1/system/operLog/list',
+        method: 'get',
+        params: query
+    })
+}
+// 查询操作日志详细
+export function getSysOperLog(operId:number) {
+    return request({
+        url: '/api/v1/system/operLog/get',
+        method: 'get',
+        params: {
+            operId: operId.toString()
+        }
+    })
+}
+// 删除操作日志
+export function delSysOperLog(operIds:number[]) {
+    return request({
+        url: '/api/v1/system/operLog/delete',
+        method: 'delete',
+        data:{
+            operIds:operIds
+        }
+    })
+}
+
+
+export function clearOperLog() {
+    return request({
+        url: '/api/v1/system/operLog/clear',
+        method: 'delete',
+    })
+}
diff --git a/src/api/system/monitor/server/index.ts b/src/api/system/monitor/server/index.ts
new file mode 100644
index 0000000..6603ce1
--- /dev/null
+++ b/src/api/system/monitor/server/index.ts
@@ -0,0 +1,9 @@
+import request from '/@/utils/request';
+
+
+export function getSysInfo() {
+    return request({
+        url: '/api/v1/system/monitor/server',
+        method: 'get'
+    })
+}
diff --git a/src/api/system/monitor/userOnline/index.ts b/src/api/system/monitor/userOnline/index.ts
new file mode 100644
index 0000000..ed49e1b
--- /dev/null
+++ b/src/api/system/monitor/userOnline/index.ts
@@ -0,0 +1,18 @@
+import request from '/@/utils/request';
+
+// 查询列表
+export function listSysUserOnline(query:object) {
+    return request({
+        url: '/api/v1/system/online/list',
+        method: 'get',
+        params: query
+    })
+}
+
+export function forceLogout(ids:number[]) {
+    return request({
+        url: '/api/v1/system/online/forceLogout',
+        method: 'delete',
+        data: {ids}
+    })
+}
diff --git a/src/api/system/personal/index.ts b/src/api/system/personal/index.ts
new file mode 100644
index 0000000..24eb1f6
--- /dev/null
+++ b/src/api/system/personal/index.ts
@@ -0,0 +1,28 @@
+import request from '/@/utils/request';
+
+export function getPersonalInfo() {
+    return request({
+        url: '/api/v1/system/personal/getPersonalInfo',
+        method: 'get',
+    })
+}
+
+
+export function editPersonal(data:object) {
+    return request({
+        url: '/api/v1/system/personal/edit',
+        method: 'put',
+        data:data
+    })
+}
+
+//重置個人密碼
+export function resetPwdPersonal(data:object) {
+    return request({
+        url: '/api/v1/system/personal/resetPwd',
+        method: 'put',
+        data:data
+    })
+}
+
+
diff --git a/src/api/system/post/index.ts b/src/api/system/post/index.ts
new file mode 100644
index 0000000..a84f0bc
--- /dev/null
+++ b/src/api/system/post/index.ts
@@ -0,0 +1,35 @@
+import request from '/@/utils/request';
+
+export function getPostList(query:Object) {
+    return request({
+        url: '/api/v1/system/post/list',
+        method: 'get',
+        params:query
+    })
+}
+
+export function addPost(data:object) {
+    return request({
+        url: '/api/v1/system/post/add',
+        method: 'post',
+        data:data
+    })
+}
+
+
+export function editPost(data:object) {
+    return request({
+        url: '/api/v1/system/post/edit',
+        method: 'put',
+        data:data
+    })
+}
+
+
+export function deletePost(ids:number[]) {
+    return request({
+        url: '/api/v1/system/post/delete',
+        method: 'delete',
+        data:{ids}
+    })
+}
diff --git a/src/api/system/role/index.ts b/src/api/system/role/index.ts
new file mode 100644
index 0000000..68dc955
--- /dev/null
+++ b/src/api/system/role/index.ts
@@ -0,0 +1,70 @@
+import request from '/@/utils/request';
+
+export function getRoleList(query:Object) {
+    return request({
+        url: '/api/v1/system/role/list',
+        method: 'get',
+        params:query
+    })
+}
+
+export function getRoleParams() {
+    return request({
+        url: '/api/v1/system/role/getParams',
+        method: 'get'
+    })
+}
+
+export function addRole(data:object) {
+    return request({
+        url: '/api/v1/system/role/add',
+        method: 'post',
+        data:data
+    })
+}
+
+export function getRole(id:number) {
+    return request({
+        url: '/api/v1/system/role/get',
+        method: 'get',
+        params:{id}
+    })
+}
+
+
+export function editRole(data:object) {
+    return request({
+        url: '/api/v1/system/role/edit',
+        method: 'put',
+        data:data
+    })
+}
+
+
+export function deleteRole(id:number) {
+    return request({
+        url: '/api/v1/system/role/delete',
+        method: 'delete',
+        data:{ids:[id]}
+    })
+}
+
+export function dataScope(data:any) {
+    return request({
+        url: '/api/v1/system/role/dataScope',
+        method: 'put',
+        data:data
+    })
+}
+
+
+// 根据角色ID查询部门树结构
+export function roleDeptTreeSelect(roleId:number) {
+    return request({
+        url: '/api/v1/system/role/deptTreeSelect',
+        method: 'get',
+        params:{roleId}
+    })
+}
+
+
diff --git a/src/api/system/tools/gen/index.ts b/src/api/system/tools/gen/index.ts
new file mode 100644
index 0000000..baa5c35
--- /dev/null
+++ b/src/api/system/tools/gen/index.ts
@@ -0,0 +1,74 @@
+import request from '/@/utils/request';
+
+export function getTableList(query:Object) {
+    return request({
+        url: '/api/v1/system/tools/gen/tableList',
+        method: 'get',
+        params:query
+    })
+}
+
+export function getImportTableList(query:Object) {
+    return request({
+        url: '/api/v1/system/tools/gen/dataList',
+        method: 'get',
+        params:query
+    })
+}
+
+
+export function importTable(tables:string[]) {
+    return request({
+        url: '/api/v1/system/tools/gen/importTableSave',
+        method: 'post',
+        data:{tables:tables}
+    })
+}
+
+export function deleteTables(query:number[]) {
+    return request({
+        url: '/api/v1/system/tools/gen/tableDelete',
+        method: 'delete',
+        params:{ids:query}
+    })
+}
+
+export function getGenTable(tableId:any){
+    return request({
+        url: '/api/v1/system/tools/gen/columnList',
+        method: 'get',
+        params:{tableId}
+    })
+}
+
+export function getRelationTable(){
+    return request({
+        url: '/api/v1/system/tools/gen/relationTable',
+        method: 'get',
+    })
+}
+
+
+export function saveEdit(data:any) {
+    return request({
+        url: '/api/v1/system/tools/gen/editSave',
+        method: 'post',
+        data:data
+    })
+}
+
+export function showPreview(tableId:number){
+    return request({
+        url: '/api/v1/system/tools/gen/preview',
+        method: 'get',
+        params: {tableId}
+    })
+}
+
+export function batchGenCode(ids:number[]){
+    return request({
+        url: '/api/v1/system/tools/gen/batchGenCode',
+        method: 'post',
+        data: {ids}
+    })
+}
diff --git a/src/api/system/tools/job/sysJob.ts b/src/api/system/tools/job/sysJob.ts
new file mode 100644
index 0000000..66d0ab3
--- /dev/null
+++ b/src/api/system/tools/job/sysJob.ts
@@ -0,0 +1,99 @@
+import request from '/@/utils/request'
+import {SysJobLog} from "/@/views/system/sysJob/list/component/model";
+// 查询定时任务列表
+export function listSysJob(query:object) {
+  return request({
+    url: '/api/v1/system/sysJob/list',
+    method: 'get',
+    params: query
+  })
+}
+// 查询定时任务详细
+export function getSysJob(jobId:number) {
+  return request({
+    url: '/api/v1/system/sysJob/get',
+    method: 'get',
+    params: {
+      jobId: jobId.toString()
+    }
+  })
+}
+// 新增定时任务
+export function addSysJob(data:object) {
+  return request({
+    url: '/api/v1/system/sysJob/add',
+    method: 'post',
+    data: data
+  })
+}
+// 修改定时任务
+export function updateSysJob(data:object) {
+  return request({
+    url: '/api/v1/system/sysJob/edit',
+    method: 'put',
+    data: data
+  })
+}
+// 删除定时任务
+export function delSysJob(jobIds:number[]) {
+  return request({
+    url: '/api/v1/system/sysJob/delete',
+    method: 'delete',
+    data:{
+      jobIds:jobIds
+    }
+  })
+}
+//获取用户信息列表
+export function getUserList(uIds:number[]){
+    return request({
+     url: '/api/v1/system/user/getUsers',
+     method: 'get',
+     params: {ids:uIds}
+   })
+}
+
+export function runJob(jobId:number){
+  return request({
+    url: '/api/v1/system/sysJob/run',
+    method: 'put',
+    data: {jobId}
+  })
+}
+
+export function startJob(jobId:number){
+  return request({
+    url: '/api/v1/system/sysJob/start',
+    method: 'put',
+    data: {jobId}
+  })
+}
+
+
+export function stopJob(jobId:number){
+  return request({
+    url: '/api/v1/system/sysJob/stop',
+    method: 'put',
+    data: {jobId}
+  })
+}
+
+
+export function getJobLogs(req:object){
+  return request({
+    url: '/api/v1/system/sysJob/logs',
+    method: 'get',
+    params: req
+  })
+}
+
+// 删除定时任务日志
+export function delSysJobLog(logIds:number[]) {
+  return request({
+    url: '/api/v1/system/sysJob/deleteLogs',
+    method: 'delete',
+    data:{
+      logIds:logIds
+    }
+  })
+}
diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
new file mode 100644
index 0000000..e036799
--- /dev/null
+++ b/src/api/system/user/index.ts
@@ -0,0 +1,75 @@
+import request from '/@/utils/request';
+
+export function getUserList(query:Object) {
+    return request({
+        url: '/api/v1/system/user/list',
+        method: 'get',
+        params:query
+    })
+}
+
+export function getDeptTree() {
+    return request({
+        url: '/api/v1/system/dept/treeSelect',
+        method: 'get'
+    })
+}
+
+export function getParams() {
+    return request({
+        url: '/api/v1/system/user/params',
+        method: 'get'
+    })
+}
+
+export function getEditUser(id:number) {
+    return request({
+        url: '/api/v1/system/user/getEdit',
+        method: 'get',
+        params:{id}
+    })
+}
+
+export function addUser(data:object) {
+    return request({
+        url: '/api/v1/system/user/add',
+        method: 'post',
+        data:data
+    })
+}
+
+
+export function editUser(data:object) {
+    return request({
+        url: '/api/v1/system/user/edit',
+        method: 'put',
+        data:data
+    })
+}
+
+export function resetUserPwd(userId:number, password:string) {
+    return request({
+        url: '/api/v1/system/user/resetPwd',
+        method: 'put',
+        data:{userId,password}
+    })
+}
+
+export function changeUserStatus(userId:number, status:number) {
+    return request({
+        url: '/api/v1/system/user/setStatus',
+        method: 'put',
+        data:{userId,status}
+    })
+}
+
+
+export function deleteUser(ids:number[]) {
+    return request({
+        url: '/api/v1/system/user/delete',
+        method: 'delete',
+        data:{ids}
+    })
+}
+
+
diff --git a/src/assets/401.png b/src/assets/401.png
new file mode 100644
index 0000000..ce306da
Binary files /dev/null and b/src/assets/401.png differ
diff --git a/src/assets/404.png b/src/assets/404.png
new file mode 100644
index 0000000..903c8e0
Binary files /dev/null and b/src/assets/404.png differ
diff --git a/src/assets/bg.jpg b/src/assets/bg.jpg
new file mode 100644
index 0000000..4272d37
Binary files /dev/null and b/src/assets/bg.jpg differ
diff --git a/src/assets/login-icon-two.svg b/src/assets/login-icon-two.svg
new file mode 100644
index 0000000..ef48bc2
--- /dev/null
+++ b/src/assets/login-icon-two.svg
@@ -0,0 +1,9 @@
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        data-name="Layer 1"
+        width="1151.5635"
+        height="842.24197"
+        viewBox="0 0 1151.5635 842.24197"
+        xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>sunlight</title>
+    <path d="M1080.33549,309.07821h-.00006c-22.0216,0-39.87364,19.81184-39.87364,44.251v31.0502h9.54961l5.52868-11.50435-1.38218,11.50435h61.38126l5.02608-10.4585-1.25651,10.4585h6.91087v-24.38C1126.2196,331.87644,1105.67658,309.07821,1080.33549,309.07821Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><path d="M1042.88322,452.6347l-6.62276,25.38724,61.81242-2.20758-1.1038-20.97207S1050.60977,442.70056,1042.88322,452.6347Z" transform="translate(-24.21825 -28.87901)" fill="#ffb9b9"/><polygon points="959.06 525.305 978.928 569.456 997.693 546.277 982.24 515.371 959.06 525.305" fill="#ffb9b9"/><polygon points="1008.731 687.562 1010.938 738.337 1035.222 738.337 1031.91 687.562 1008.731 687.562" fill="#ffb9b9"/><path d="M1004.25045,507.82436l11.03794,36.42517,16.55689,176.60691s15.45311,4.41518,26.491-1.10379l2.20759-24.28345,4.41517-139.07794s20.97207-11.03793,18.76448-26.491-7.72655-36.42517-7.72655-36.42517Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><path d="M1038.468,755.074h-6.62276s-18.76448,19.86828-25.38724,22.07587-40.84035,20.97207-13.24552,24.28345,45.25552-11.03794,45.25552-11.03794,8.83035,5.519,20.97207,1.1038,5.519-17.66069,5.519-17.66069-6.16367-20.18749-6.39321-20.02789S1051.71356,763.90438,1038.468,755.074Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><circle cx="1048.46738" cy="323.31051" r="25.38724" fill="#ffb9b9"/><path d="M1110.2146,385.30331l-11.67815,9.73547-1.56737,1.30247-1.10379,13.24551h-43.04794s5.87219-5.08847,11.32493-10.35358c.11036-.1214.23176-.25385.36427-.37532.73953-.71743,1.40178-1.37974,1.99787-1.97577.32007-.33112.6291-.64021.90505-.92721.45259-.47462.89414-.92715,1.33561-1.37974a.03829.03829,0,0,0,.01105-.022,43.07955,43.07955,0,0,0,3.17893-3.73083l.01105-.011a12.81791,12.81791,0,0,0,.73952-1.09274c3.31138-5.519-4.41517-16.5569-4.41517-16.5569l24.28345-12.14173c.84994,11.96508,10.97171,19.95654,15.49723,22.95889C1109.37571,384.85072,1110.2146,385.30331,1110.2146,385.30331Z" transform="translate(-24.21825 -28.87901)" fill="#ffb9b9"/><path d="M1169.81943,570.74057c-16.5569,4.41517-17.66069-28.69862-17.66069-28.69862l-22.59765-45.1953a104.51533,104.51533,0,0,1-9.73594-30.31979l-5.19538-32.65665-1.57841,1.88745v.01105l-2.83676,1.41288-17.24124-27.59483-4.83462-7.72655v-8.83034l16.55689-7.72656h6.62276s.1435-.02209.39735-.04419c3.04648-.32008,22.87063-1.64464,23.8861,17.70489.39969,7.59413.36519,13.88569.15854,18.82226a145.76191,145.76191,0,0,0,3.84972,40.63177c1.16857,4.79412,2.44343,8.95772,3.7183,11.18873,4.41517,7.72655,19.86827,68.43518,19.86827,68.43518S1186.37633,566.3254,1169.81943,570.74057Z" transform="translate(-24.21825 -28.87901)" fill="#ffb9b9"/><path d="M1068.27046,397.445l-4.18335,7.62718-2.47256,4.51454L1049.506,431.66263s-3.43278,2.80361-8.99594,6.42408c-9.24979,6.01562-24.4159,14.272-39.571,15.65178-24.28345,2.20759-1.10379-76.16173-1.10379-76.16173s7.72655-30.90621,18.76449-27.59483,2.20758,14.34931-5.519,35.32138S1011.977,429.455,1011.977,429.455s23.17965-14.34931,35.32138-25.38724c6.32471-5.75079,11.75542-7.30711,15.49723-7.4727h.011a14.05473,14.05473,0,0,1,3.69775.287A8.35071,8.35071,0,0,1,1068.27046,397.445Z" transform="translate(-24.21825 -28.87901)" fill="#ffb9b9"/><path d="M1071.93506,390.82228c-.04413.1214-.56294,1.10379-4.52559,5.1326A53.271,53.271,0,0,0,1071.93506,390.82228Z" transform="translate(-24.21825 -28.87901)" fill="#d0cde1"/><path d="M1114.07788,434.42211l-1.02652,1.3466-16.08228,27.90392s-20.97207-7.72655-36.42517-9.93414a21.64727,21.64727,0,0,0-22.06482,9.901l4.40413-17.62754-2.37319-7.92523c-.27594-.92721-.596-1.95373-.93819-3.1127-3.31138-11.03793,8.83034-23.17966,8.83034-23.17966l14.39344-15.19925h.011a14.05473,14.05473,0,0,1,3.69775.287c-.59609.596-1.25834,1.25834-1.99787,1.97577-.13251.12147-.25391.25392-.36427.37532-4.22754,4.3158-2.031,5.519-.05517,5.839a9.71986,9.71986,0,0,0,1.97576.09937c4.6028.66225,14.68044-3.3776,22.07587-6.75521,5.03329-2.29591,8.83034-4.28272,8.83034-4.28272l9.63609-8.83035,1.446-1.32456c1.32457.872,2.16346,1.32456,2.16346,1.32456h1.10379s.1435-.02209.39735-.04419l-5.02587,3.72943a18.68469,18.68469,0,0,0-7.5132,16.183h0Z" transform="translate(-24.21825 -28.87901)" fill="#d0cde1"/><path d="M1053.92115,465.88022l-16.1372,6.30165s-87.61936-33.89648-100.86488-6.30165,46.35931,93.82242,46.35931,93.82242l26.491-12.14173-11.03793-33.11379s64.02,54.08586,90.511,24.28345,8.83035-71.94211,8.83035-71.94211S1081.516,453.73849,1053.92115,465.88022Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><path d="M1007.56183,586.19367l-9.93413,7.72656s8.83034,35.32138,5.519,40.84034-9.93414,20.97208,2.20759,19.86828,25.38724-19.86828,26.491-26.491,8.83035-26.491,8.83035-26.491,13.24552-30.90621,3.31138-32.01-25.75662-1.84256-25.75662-1.84256Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><path d="M1091.67085,321.26789a20.91185,20.91185,0,0,0-16.50006-8.4201h-.78284c-15.09365,0-27.32941,13.658-27.32941,30.50606v.00006h5.05749l.81677-6.217,1.19755,6.217H1084.126l2.51307-5.25968-.62828,5.25968h5.901q4.13043,20.51274-11.86947,41.02548h10.05221l5.02608-10.51935-1.2565,10.51935h19.162l3.76958-24.19458C1116.79567,342.06532,1106.26771,326.70034,1091.67085,321.26789Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><circle cx="971.03374" cy="113.59071" r="91" fill="#ff6584"/><path d="M771.29477,567.032c-1.6806,13.391-3.05862,26.28082-4.18757,38.571h36.55924q1.99625-19.38064,5.00548-38.571Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M801.19676,703.21105q-1.17629-19.19032-.9509-38.571H763.184c-.60171,14.7787-.83742,27.751-.88075,38.571Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M864.4142,361.58256C894.89157,280.388,924.75032,225.797,924.75032,225.797L893.6574,207.29872c-32.37571,48.82045-56.84558,101.59229-75.3218,154.28384Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M766.21242,615.836c-1.14212,13.751-1.97242,26.66388-2.56481,38.571h36.792q.53185-19.28516,2.25137-38.571Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M778.50126,518.22788c-2.24695,13.1965-4.19314,26.08124-5.8747,38.571h37.70491q3.28452-19.4853,7.41146-38.571Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M814.82354,371.81567q-6.5049,19.34635-11.981,38.571h44.39012c4.3882-13.35371,8.88306-26.24037,13.39195-38.571Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M787.981,469.42381q-4.29519,19.6076-7.68675,38.571H820.004q4.44783-19.61091,9.56837-38.571Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M762.3185,713.44417c.12069,16.62136.66994,25.97636.66994,25.97636l-.39358,7.478h43.29393q-2.59815-16.58382-3.96368-33.4544Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M799.97844,420.61974q-5.32646,19.46534-9.69876,38.571H832.379q5.53043-19.7784,11.542-38.571Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M1110.252,261.1651c-15.40963-32.21182-30.90977-56.23791-46.0196-73.94267l-7.89046,12.123.671-20.13755a158.22113,158.22113,0,0,0-16.6583-15.2789L1029.57149,180.496l.78947-23.69016a99.14041,99.14041,0,0,0-20.48314-10.11247l-7.97482,12.25252.48352-14.50965c-27.51475-6.905-50.1228,2.55337-63.22081,10.629l-7.86615-1.17354,13.49035-5.63347a99.1429,99.1429,0,0,0-6.25118-21.97146l-23.44384-3.4975L933.3355,115.172a158.21342,158.21342,0,0,0-12.02277-19.14149l-19.92822-2.973,13.34774-5.574c-14.68838-18.056-35.52378-37.63644-64.42682-58.60454,0,0-2.13827,18.67657-3.3293,44.71673l19.575,20.025-20.111-5.20116c-.21044,7.9976-.30047,16.41755-.20141,25.00812l14.43606,14.76794-14.20045-3.67257c.20688,6.56884.54118,13.17147,1.02835,19.7a77.7484,77.7484,0,0,0-37.38522.21323l.48352,14.50965-7.97482-12.25252A99.14066,99.14066,0,0,0,782.143,156.80588l.78947,23.69016L772.14939,163.929a158.22118,158.22118,0,0,0-16.65831,15.2789l.671,20.13755-7.89046-12.123c-15.10983,17.70476-30.61,41.73085-46.0195,73.94267,0,0,18.75584-1.2664,44.58355-4.79292l16.16488-22.86653L761.513,254.225c7.90429-1.2359,16.20236-2.66638,24.63409-4.31364l11.92111-16.86355-1.05035,14.63006c11.76-2.54214,23.55587-5.52,34.6978-8.989l8.00048,7.44239-14.31143-2.98448a99.14327,99.14327,0,0,0-7.27222,21.65494l17.35524,16.14443-19.35091-4.03541a158.216,158.216,0,0,0-.91179,22.58566l14.75256,13.72341-14.16008-2.95292c1.90026,23.19813,8.00769,51.13034,19.98347,84.7701,0,0,12.327-14.19261,28.03786-34.99356l-4.81657-27.58585,13.64313,15.66426c4.697-6.47636,9.53377-13.36913,14.311-20.50951l-3.55213-20.344L893.0578,318.329c9.67465-15.1043,18.722-30.948,25.38657-46.03838A385.08247,385.08247,0,0,0,946.086,304.50881l7.38-12.67579.33948,20.64894c6.03555,6.11391,12.08293,11.97343,17.91467,17.45027l10.45191-17.95172.46027,27.99943c19.34428,17.473,34.12174,29.09258,34.12174,29.09258,5.43182-35.29231,6.17421-63.8748,3.67531-87.01609l-13.35149,5.56466,11.9067-16.25425a158.22134,158.22134,0,0,0-5.14539-22.01061l-18.246,7.60454,8.67646-11.84438q5.59182,1.34816,11.21649,2.56145l-1.05035-14.63006,11.92111,16.86355c8.43173,1.64726,16.7298,3.07774,24.63409,4.31364l-1.48755-20.71932,16.16488,22.86653C1091.49615,259.8987,1110.252,261.1651,1110.252,261.1651Z" transform="translate(-24.21825 -28.87901)" fill="#e6a23c"/><path d="M706.516,543.343c1.1863,9.45251,2.159,18.55119,2.95593,27.2266H683.6654q-1.40913-13.68048-3.53328-27.2266Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M685.40871,639.4695q.83031-13.54614.67122-27.2266h26.16136c.42474,10.432.59112,19.589.62171,27.2266Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M640.78457,398.31967c-21.51346-57.31385-42.59025-95.84872-42.59025-95.84872l21.948-13.05765c22.85347,34.46154,40.12634,71.71229,53.16839,108.90637Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M710.10356,577.79293c.8062,9.70662,1.3923,18.82158,1.81046,27.22659H685.94319q-.37542-13.61307-1.5892-27.22659Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M701.42907,508.893c1.58609,9.31519,2.95987,18.41031,4.14686,27.22659H678.96066q-2.31847-13.75434-5.23162-27.22659Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M675.78979,405.54305q4.59169,13.65627,8.45716,27.2266H652.91271c-3.09755-9.42616-6.2704-18.52264-9.45315-27.2266Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M694.73746,474.443q3.0319,13.84068,5.42595,27.2266H672.133q-3.13965-13.843-6.75415-27.2266Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M712.85221,646.69288c-.08519,11.73274-.47289,18.33627-.47289,18.33627l.27782,5.27863H682.09668q1.834-11.70624,2.79789-23.6149Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M686.26869,439.993q3.75987,13.74026,6.8462,27.22659H663.39766q-3.90382-13.96124-8.14726-27.22659Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M467.25181,327.43668c10.87739-22.73779,21.81868-39.6974,32.48446-52.1949l5.56974,8.55742-.47364-14.21476a111.68489,111.68489,0,0,1,11.75882-10.78512l7.61163,11.69442-.55728-16.72249a69.98142,69.98142,0,0,1,14.4587-7.13822l5.6293,8.64885-.34131-10.24212c19.4222-4.8741,35.38084,1.80238,44.62651,7.50279l5.55258-.82838-9.52261-3.97657a69.98374,69.98374,0,0,1,4.4126-15.50928l16.54861-2.46883-12.87573-5.37687a111.68,111.68,0,0,1,8.48667-13.51166l14.067-2.09862-9.422-3.93455c10.36829-12.74544,25.07564-26.56694,45.47782-41.368,0,0,1.50937,13.18347,2.35009,31.56478l-13.81766,14.1353,14.196-3.67141c.14854,5.64537.21209,11.58887.14216,17.65281l-10.19016,10.42444,10.02385-2.59241c-.146,4.63684-.382,9.29752-.72589,13.90591a54.88123,54.88123,0,0,1,26.3896.15051l-.34131,10.24212,5.62929-8.64885a69.98117,69.98117,0,0,1,14.4587,7.13822l-.55727,16.72249,7.61163-11.69442a111.68687,111.68687,0,0,1,11.75882,10.78512l-.47364,14.21476,5.56974-8.55742c10.66577,12.4975,21.60706,29.45711,32.48439,52.1949,0,0-13.23943-.89394-31.47078-3.38325l-11.41052-16.1411,1.05,14.62542c-5.57951-.8724-11.437-1.88215-17.38879-3.04492l-8.41491-11.9037.74142,10.32711c-8.30116-1.79445-16.62769-3.8965-24.49259-6.34518l-5.6474,5.25346,10.10219-2.10669a69.98325,69.98325,0,0,1,5.13334,15.28586L661.2033,341.39976l13.65948-2.84853a111.68285,111.68285,0,0,1,.64362,15.94284l-10.41359,9.68713,9.99537-2.08442c-1.34137,16.37518-5.6525,36.092-14.106,59.83779,0,0-8.70142-10.01832-19.79145-24.70136l3.39993-19.47239L634.96021,388.818c-3.31556-4.57156-6.72974-9.437-10.10193-14.47732l2.50739-14.36046-6.80014,7.80752A247.60106,247.60106,0,0,1,602.64558,335.29a271.82334,271.82334,0,0,1-19.51173,22.74229l-5.20944-8.94763-.23963,14.57574c-4.2604,4.31571-8.52914,8.45185-12.64567,12.31786l-7.37783-12.67182-.32489,19.76432c-13.65481,12.33393-24.086,20.536-24.086,20.536-3.83423-24.91224-4.35827-45.08815-2.59434-61.4232l9.4246,3.928-8.40474-11.47361a111.68612,111.68612,0,0,1,3.632-15.53692l12.87953,5.36792-6.12457-8.36075q-3.94716.95164-7.91753,1.80808l.74143-10.32711-8.41492,11.9037c-5.95181,1.16277-11.80928,2.17252-17.38879,3.04492l1.05-14.62542-11.41052,16.1411C480.49124,326.54274,467.25181,327.43668,467.25181,327.43668Z" transform="translate(-24.21825 -28.87901)" fill="#e6a23c"/><ellipse cx="379.53374" cy="720.59071" rx="147.5" ry="14" fill="#3f3d56"/><ellipse cx="734.53374" cy="720.59071" rx="147.5" ry="14" fill="#3f3d56"/><path d="M870.752,606.96972s10.65,73.95-40.48,117.67c-33.09,28.29-80.27,32.92-118.99,13.01-14.38-7.39-29.72-18.62-44.37006-35.57a191.08437,191.08437,0,0,1-15.26-20.3,242.48469,242.48469,0,0,1-17.73-32.37q-4.8-10.485-9.17-22.44c-.56-1.53-1.08-3.03-1.58-4.52-26.55-78.91,25.09-101.93,72.49-107.45a243.44911,243.44911,0,0,1,29.96-1.51,268.64314,268.64314,0,0,1,35.13,2.48s.97.01,2.72.08a210.98673,210.98673,0,0,1,26.93005,2.99C827.022,525.46972,883.072,545.38971,870.752,606.96972Z" transform="translate(-24.21825 -28.87901)" fill="#e6a23c"/><path d="M544.752,626.96972c-23.34,64.07-56.95,95.47-86.53,110.68-38.72,19.91-85.9,15.28-118.99-13.01a104.52345,104.52345,0,0,1-9-8.67,108.90024,108.90024,0,0,1-15.01-20.66,128.65459,128.65459,0,0,1-12.09-30.09,161.53735,161.53735,0,0,1-5.17-35.23,140.93566,140.93566,0,0,1,.79-23.02c-11.53-57.65,36.85-78.78,73.12-86.52a215.32462,215.32462,0,0,1,31.83-4.29c3.21-.18,5.05-.19,5.05-.19a276.07877,276.07877,0,0,1,57.57-1.71C516.412,518.29968,576.402,540.09973,544.752,626.96972Z" transform="translate(-24.21825 -28.87901)" fill="#e6a23c"/><path d="M403.702,516.15973l-100.57,149.06a161.53735,161.53735,0,0,1-5.17-35.23l73.91-109.54A215.32462,215.32462,0,0,1,403.702,516.15973Z" transform="translate(-24.21825 -28.87901)" fill="#fff" opacity="0.2"/><path d="M466.322,514.2597l-136.09,201.71a108.90024,108.90024,0,0,1-15.01-20.66l122.6-181.71A262.51415,262.51415,0,0,1,466.322,514.2597Z" transform="translate(-24.21825 -28.87901)" fill="#fff" opacity="0.2"/><path d="M725.622,513.48968l-91.7,135.92q-4.8-10.485-9.17-22.44c-.56-1.53-1.08-3.03-1.58-4.52l72.49-107.45A243.44911,243.44911,0,0,1,725.622,513.48968Z" transform="translate(-24.21825 -28.87901)" fill="#fff" opacity="0.2"/><path d="M790.402,519.03973l-123.49,183.04a191.08437,191.08437,0,0,1-15.26-20.3l111.81995-165.73A210.98673,210.98673,0,0,1,790.402,519.03973Z" transform="translate(-24.21825 -28.87901)" fill="#fff" opacity="0.2"/><path d="M894.752,599.96972H871.86472c10.12915-83.03949-111.11273-84-111.11273-84a276.47448,276.47448,0,0,0-58-1.67132v-.32868h-237v.24872a276.75793,276.75793,0,0,0-57,1.75128s-121.24188.96051-111.11273,84H275.752v22H297.8389c-.22119,23.90107,4.52283,71.14319,41.39307,102.67,33.09,28.29,80.27,32.92,118.99,13.01,29.58-15.21,63.19-46.61,86.53-110.68,7.996-21.94982,10.13965-39.74377,8.07287-54.14819a635.39219,635.39219,0,0,1,63.85425,0c-2.06677,14.40442.07684,32.19837,8.07288,54.14819,23.34,64.07,56.95,95.47,86.53,110.68,38.72,19.91,85.9,15.28,118.99-13.01,36.87024-31.5268,41.61425-78.76892,41.39306-102.67H894.752Zm-360.54,27.41c-22.21,60.97-54.61,89.49-82.4,102.65-33.81,16.01-74.1,11.56-103.12-12.03-35.08-28.52-39.75-72.35-39.62-94.69.06-8.88-.34-17.74-.69-26.61-2.77-69.71,101.83-70.53,101.83-70.53S580.722,499.72973,534.212,627.3797Zm83.38928-59.56537a424.54686,424.54686,0,0,0-65.69861,0c-5.48632-24.48639-23.97729-38.28705-45.937-45.84461H663.53824C641.57859,529.52728,623.08762,543.32794,617.60129,567.81433ZM862.202,596.3797c-.36,8.95-.76,17.9-.7,26.85.14,22.55-4.58,66.79-39.98,95.56-29.28,23.81-69.92005,28.31-104.03,12.17-28.06-13.27-60.78-42.05-83.21-103.62-46.93006-128.83,125.15-102.14,125.15-102.14S864.992,526.01971,862.202,596.3797Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M428.14356,741.71275c-.11325-.18506-2.78356-4.64376-3.70932-13.90237-.84914-8.49429-.30313-22.81207,7.12226-42.7842,14.06719-37.83586-3.24186-68.36391-3.41872-68.668l.854-.49541a75.78134,75.78134,0,0,1,7.14973,20.25453,88.3638,88.3638,0,0,1-3.65968,49.253c-14.04309,37.77129-3.60282,55.65189-3.49584,55.82827Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><circle cx="398.4247" cy="578.84223" r="6.41529" fill="#3f3d56"/><circle cx="418.65754" cy="602.52946" r="6.41529" fill="#3f3d56"/><circle cx="404.83999" cy="618.32095" r="6.41529" fill="#fff"/><circle cx="421.61845" cy="631.64502" r="6.41529" fill="#fff"/><circle cx="399.90515" cy="652.37134" r="6.41529" fill="#3f3d56"/><path d="M432.01914,741.94889s-6.41529-15.79149,12.83059-27.63511Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M424.12933,741.66244s-2.91966-16.79294-25.51732-16.649Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/><path d="M363.072,370.10974a6.35543,6.35543,0,0,1-2.83,5.21l-.24.15h-106.8l.43-1.31c.07-.23,7.89-22.92005,42.5-18.54,3.26-1.12,35.12-11.52,54.19.17C358.782,360.96972,363.072,365.78973,363.072,370.10974Z" transform="translate(-24.21825 -28.87901)" fill="#f1f1f1"/><path d="M561.072,447.10974a6.35543,6.35543,0,0,1-2.83,5.21l-.24.15h-106.8l.43-1.31c.07-.23,7.89-22.92005,42.5-18.54,3.26-1.12,35.12-11.52,54.19.17C556.782,437.96972,561.072,442.78973,561.072,447.10974Z" transform="translate(-24.21825 -28.87901)" fill="#f1f1f1"/><path d="M606.072,137.10974a6.35543,6.35543,0,0,1-2.83,5.21l-.24.15h-106.8l.43-1.31c.07-.23,7.89-22.92,42.5-18.54,3.26-1.12,35.12-11.52,54.19.17C601.782,127.96972,606.072,132.78973,606.072,137.10974Z" transform="translate(-24.21825 -28.87901)" fill="#f1f1f1"/><path d="M53.17754,652.8835l9.13713,28.28159s-8.26692,26.54118-4.351,56.12807,1.7404,30.4571,1.7404,30.4571-39.12624-2.25247-35.21033,9.49526,42.172,4.86308,42.172,4.86308,7.34723-1.97821,10.828-22.86308S89.72606,698.134,89.72606,698.134l-8.22935-37.97489Z" transform="translate(-24.21825 -28.87901)" fill="#ffb8b8"/><path d="M56.22325,595.015S39.6894,601.10644,39.6894,617.64029s6.09142,39.15912,10.00733,40.46443,30.022,19.14446,34.80811,6.52652S56.22325,595.015,56.22325,595.015Z" transform="translate(-24.21825 -28.87901)" fill="#d0cde1"/><polygon points="170.367 761.932 205.175 760.626 231.717 756.71 223.885 782.816 159.49 784.557 170.367 761.932" fill="#ffb8b8"/><path d="M244.62214,794.29144s-.43511-9.57223-4.351-9.13713-1.3053-3.48081,2.17551-4.351,13.48814-5.22122,13.48814-5.22122l39.59422,2.61061S321.2,800.818,310.75754,813.0008s-37.41872,1.3053-37.41872,1.3053l-29.15179.4351S234.6148,799.07755,244.62214,794.29144Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><polygon points="236.068 731.91 248.685 791.083 274.792 785.862 259.998 711.895 244.334 703.628 236.068 731.91" fill="#ffb8b8"/><path d="M110.17582,753.39191s-73.097,33.0677-42.20483,66.57051c0,0,0,15.66365,32.6326,12.61794s95.7223-8.702,98.768-6.96162,12.61793-34.373,4.351-36.11342-18.27426-3.91591-18.27426-3.91591,8.702-1.3053,8.702-8.702c0,0,24.80078-1.7404,32.1975-17.404S240.70622,732.072,240.70622,732.072l16.969,43.51013s19.57956-36.11341,34.373-20.01466c0,0-16.53385-103.98922-29.15179-113.56145s-21.32-12.61794-33.0677-3.91591-22.62527,30.89219-22.62527,30.89219Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><path d="M284.65146,802.12326a98.03577,98.03577,0,0,0-8.702,7.39673c-3.48081,3.48081-8.26692,1.7404-8.702,0s-8.26692,1.3053-9.13712,13.92324-6.09142,23.93057,7.83182,27.84648,13.48814,15.22855,13.48814,15.22855a46.93427,46.93427,0,0,0,35.24321,2.17551c19.57956-6.52652,12.61794-13.48814,12.61794-13.48814l-26.10608-43.075S294.22369,799.07755,284.65146,802.12326Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><path d="M212.42464,586.313s41.76972,14.35834,46.12074,17.404,23.93057,17.404,14.35834,24.80078-17.40405,12.18283-36.11341,6.52652S197.19609,611.984,197.19609,611.984Z" transform="translate(-24.21825 -28.87901)" fill="#ffb8b8"/><path d="M170.65491,567.16854s16.53385-3.04571,28.28158,3.48081,21.75507,19.57956,21.75507,19.57956S209.814,613.28928,201.9822,616.77009,179.792,602.84685,179.792,602.84685Z" transform="translate(-24.21825 -28.87901)" fill="#d0cde1"/><path d="M94.51217,554.5506s.4351,16.96895-1.3053,18.70936,20.88486,53.08236,45.68564,30.45709,5.65632-31.7624,5.65632-31.7624-9.13713-16.969-8.702-18.70936-40.46443,0-40.46443,0Z" transform="translate(-24.21825 -28.87901)" fill="#ffb8b8"/><path d="M94.51217,554.5506s.4351,16.96895-1.3053,18.70936,20.88486,53.08236,45.68564,30.45709,5.65632-31.7624,5.65632-31.7624-9.13713-16.969-8.702-18.70936-40.46443,0-40.46443,0Z" transform="translate(-24.21825 -28.87901)" opacity="0.1"/><path d="M101.47379,587.1832s16.53385,11.31263,23.49548,8.702,15.66364-13.92325,16.53385-14.79345,45.25054,88.32557,45.25054,88.32557-6.52652,32.6326-23.93058,42.20483-17.1865,17.18651-19.362,23.713-30.23954-20.66732-30.23954-20.66732L95.38237,638.96026V592.83952Z" transform="translate(-24.21825 -28.87901)" fill="#d0cde1"/><path d="M94.29462,566.951s-5.43877-1.08776-11.09508,3.69836S51.002,593.27462,52.30734,595.015s13.053,26.54118,15.66365,36.54852,6.52652,11.31263,6.52652,11.31263,9.13713,6.52652,7.83182,11.31264-6.96162,70.05131.87021,84.40966,6.52652,26.97628,4.351,30.45709,20.88486-10.00733,20.88486-10.00733,34.373-27.84649,36.98362-36.11341a97.263,97.263,0,0,0,3.48081-17.40406s-22.19017-87.89047-29.15179-92.67658S94.29462,566.951,94.29462,566.951Z" transform="translate(-24.21825 -28.87901)" fill="#575a89"/><path d="M142.0946,567.29509s10.72115-6.65307,12.89666-4.91267,22.62527,1.74041,23.06037,3.48081,1.3053,43.51014,16.09875,54.38767,5.22122,32.6326,5.22122,32.6326l10.87753,17.40406s-59.17285,56.99362-55.25787,37.41871c.21755-1.08775,0-1.3053,0-1.3053s-23.06037-98.768-20.01466-103.98922S143.55629,573.51306,142.0946,567.29509Z" transform="translate(-24.21825 -28.87901)" fill="#575a89"/><path d="M233.3095,607.19786l-59.17378,20.44976s-58.73868,13.92325-49.60156,30.022S172.39531,646.357,172.39531,646.357l78.7996-8.82909S282.476,611.11377,233.3095,607.19786Z" transform="translate(-24.21825 -28.87901)" fill="#ffb8b8"/><circle cx="93.78939" cy="509.57283" r="32.1975" fill="#ffb8b8"/><path d="M92.36668,506.4531l-5.95587-2.16578s12.45312-12.45312,29.77934-11.37019l-4.8731-4.873s11.91174-4.33148,22.74055,7.03872c5.69249,5.97707,12.27878,13.00279,16.38465,20.91719h6.37832l-2.66208,5.32415,9.31726,5.32415-9.56325-.95636a26.866,26.866,0,0,1-.90453,13.789l-2.16569,5.95579s-8.66312-17.32606-8.66312-19.49184v5.4144s-5.95587-4.87294-5.95587-8.12156l-3.24862,3.79009-1.62432-5.95587-20.0333,5.95587,3.24863-4.87294-12.45312,1.62431,4.8731-5.95587s-14.07744,7.03872-14.619,12.99459-7.58,13.536-7.58,13.536L81.538,538.93944S76.66493,514.57467,92.36668,506.4531Z" transform="translate(-24.21825 -28.87901)" fill="#2f2e41"/><path d="M146.61566,540.19858s1.05805,7.34674-4.02158,11.6902a10.68163,10.68163,0,0,1-11.82134,1.29251,14.7297,14.7297,0,0,1-4.40805-3.53378,18.98358,18.98358,0,0,1-1.516-2.01675,24.0899,24.0899,0,0,1-1.76144-3.21588q-.47687-1.04165-.911-2.22935c-.05564-.152-.1073-.301-.157-.449-2.63767-7.8395,2.49263-10.12648,7.20169-10.67488a24.18681,24.18681,0,0,1,2.97645-.15,26.68959,26.68959,0,0,1,3.49007.24639s.09637.001.27022.00794a20.96175,20.96175,0,0,1,2.67543.29706C142.2712,532.10177,147.83962,534.08077,146.61566,540.19858Z" transform="translate(-24.21825 -28.87901)" fill="#e6a23c"/><path d="M114.22842,542.18553c-2.31877,6.36518-5.65784,9.48469-8.59653,10.99576a10.68165,10.68165,0,0,1-11.82135-1.29251,10.38378,10.38378,0,0,1-.89412-.86134,10.81892,10.81892,0,0,1-1.49121-2.05252,12.78124,12.78124,0,0,1-1.2011-2.98936,16.04808,16.04808,0,0,1-.51363-3.5,14.00278,14.00278,0,0,1,.07848-2.287c-1.14547-5.72738,3.661-7.82659,7.26428-8.59554a21.39066,21.39066,0,0,1,3.16223-.42619c.3189-.01789.50171-.01888.50171-.01888a27.42839,27.42839,0,0,1,5.71942-.16989C111.41291,531.38944,117.37277,533.55522,114.22842,542.18553Z" transform="translate(-24.21825 -28.87901)" fill="#e6a23c"/><path d="M100.21547,531.17685l-9.99136,14.80871a16.04808,16.04808,0,0,1-.51363-3.5L97.05324,531.603A21.39066,21.39066,0,0,1,100.21547,531.17685Z" transform="translate(-24.21825 -28.87901)" fill="#fff" opacity="0.2"/><path d="M106.4366,530.98808,92.91642,551.02744a10.81892,10.81892,0,0,1-1.49121-2.05252l12.18-18.0524A26.08038,26.08038,0,0,1,106.4366,530.98808Z" transform="translate(-24.21825 -28.87901)" fill="#fff" opacity="0.2"/><path d="M132.19738,530.91158l-9.11016,13.5033q-.47687-1.04165-.911-2.22935c-.05564-.152-.1073-.301-.157-.449l7.20169-10.67488A24.18681,24.18681,0,0,1,132.19738,530.91158Z" transform="translate(-24.21825 -28.87901)" fill="#fff" opacity="0.2"/><path d="M138.6331,531.463l-12.26841,18.18454a18.98358,18.98358,0,0,1-1.516-2.01675l11.109-16.46485A20.96175,20.96175,0,0,1,138.6331,531.463Z" transform="translate(-24.21825 -28.87901)" fill="#fff" opacity="0.2"/><path d="M149,539.50315h-2.27379c1.0063-8.24976-11.03876-8.34518-11.03876-8.34518a27.46661,27.46661,0,0,0-5.76215-.166v-.03266H106.38v.02471a27.49535,27.49535,0,0,0-5.6628.174s-12.04507.09542-11.03876,8.34518H87.504v2.18564h2.19428c-.022,2.37451.44933,7.06789,4.11229,10.2a10.68165,10.68165,0,0,0,11.82135,1.29251c2.93869-1.51107,6.27776-4.63058,8.59653-10.99576a11.22868,11.22868,0,0,0,.802-5.37948,63.12484,63.12484,0,0,1,6.34375,0,11.22856,11.22856,0,0,0,.802,5.37948c2.31877,6.36518,5.65783,9.48469,8.59653,10.99576a10.68163,10.68163,0,0,0,11.82134-1.29251c3.663-3.1321,4.13427-7.82548,4.1123-10.2H149Zm-35.8187,2.72311c-2.20651,6.05721-5.42537,8.89059-8.18623,10.198a9.69145,9.69145,0,0,1-10.2447-1.19515c-3.48511-2.83339-3.94906-7.18778-3.93614-9.40721.006-.8822-.03378-1.76242-.06855-2.64363-.27519-6.92551,10.11654-7.007,10.11654-7.007S117.80194,529.54457,113.1813,542.22626Zm8.28451-5.91767a42.17881,42.17881,0,0,0-6.527,0c-.54505-2.43265-2.38208-3.80371-4.56371-4.55454h15.65441C123.84789,532.50488,122.01086,533.87594,121.46581,536.30859Zm24.30043,2.8379c-.03576.88916-.0755,1.77832-.06954,2.66748.01391,2.24028-.455,6.63541-3.97191,9.49363a9.77755,9.77755,0,0,1-10.33511,1.20906c-2.78768-1.31834-6.03833-4.17756-8.26669-10.29437-4.66238-12.79893,12.43332-10.14735,12.43332-10.14735S146.04342,532.15641,145.76624,539.14649Z" transform="translate(-24.21825 -28.87901)" fill="#3f3d56"/></svg>
diff --git a/src/assets/logo-mini.svg b/src/assets/logo-mini.svg
new file mode 100644
index 0000000..4d687f6
--- /dev/null
+++ b/src/assets/logo-mini.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 50" width="64" height="50">
+	<defs>
+		<image width="64" height="50" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAACXCAYAAACvIjFeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjMDZhMjc3NS1iYTM0LTJlNGMtOGYyYS1kN2E4OGI1ZGIxNzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjlCQ0RBQ0RCQzcyMTFFQ0E1RTlEN0EwMjJFNzY0NkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjlCQ0RBQ0NCQzcyMTFFQ0E1RTlEN0EwMjJFNzY0NkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDJhZWU3MzgtNGQzMC0yNzQxLThmMmYtMTM2NmM0MTg2Y2RhIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmMwNmEyNzc1LWJhMzQtMmU0Yy04ZjJhLWQ3YTg4YjVkYjE3MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po6REBkAABNySURBVHja7F1rsBxFFT4D1xAgIPKUoiwKi0cFJQkiEATl4Q+hFFRUVN6IKCAlD8EbscAnGN5IgrzCU4QIiECAAEJilBASIIAhJJeQEAJJgIgJkJAbcm/ac6Zn7s7sTs90z/TM9u6er6p3emdnZmd2v/nm9Olzuj0hBDAYnYL1+CdgMOEZDCY8g8GEZzCY8AwGE57BYMIzGEx4BoMJz2Aw4RkMJjyDwYRnMJjwDCY8g8GEZzCY8AwGE57BYMIzGEx4BoMJz2Aw4RkMJjyDwYRnMJjwDAYTnsGEZzCY8AwGE57BYMIzGK2ArrIOvMtU+DoursOyjb8iHKQYlx7U6vGlqH0e/Syoe7X6fFyeh+XvWO+V60X8O0TjMQbWiWBl/brod8fWRY4dPbes6zLeViTu5ymOob1tfR1qv8Gzpw/qKMJ7ZQ2XjYQfjIuTsYzG33WD6A/tqcge/cOSCBtfPw+X5+L294TkjREb0ogsGrabtf3oIVi7GssWwVZe3Rl6kfVJ66JU8hKOobOt6nuzjltPadXnXspxVeeT5xxMfisq54i9f9nT0oQPSE/qfiNe0lctqnt0/TRcfyzu+6oNdZ+1w+hDsfYAP/grxcVYupHwrW/D9+wLbyORLsfqwsbHqeLxrGsWyJtgL1xxBlaHKB/bIi4pMbLXYdiCURNwcQtzsDLMxnJ+WzVae/aDSbi4Hkm22lNulaDukbqnJv36WD8KyyExG1ZB/MSbSsSf2YizsCxhLpaOfiw/wLKmrQi/y5M+l27H8mAudYe0xpn/shmWn2N1aKa6C4W6R8yaYfNHLcfaSczHSkyZGVV/aRUKL7C8gcS7Bt++rmKxpyB6Ijkb65/Hchpuu0lBdZeknzfqYTZtSjdlft2ML67SDz8VyXSV/yhLU3mR7VKLqHuUuMdg+ZaS5NFGsULday4OEZo2bzI3raMPy9FYPmprws/9on+Bd2OZmEvdRbrZ46s7wI+x7KplzyvUPVw//JVuMm1+xPy0jj9geaFZX15pT+vcL8EbSKhpiSqv66FJVvfw/UgsFw54bXTVHRrUPSQ93Zw3M0et4SUsv23mCTQjtGAslimJ6q7jilSaOAM4FD8/H9d1QQbBPZVZEz/emWzaWDNlDguWnUP4ufvD+0go8p0vS1N3z1zdw/d0TadgOSDWq5pht6swvKf7vcC04Rmci+FULK81+ySaEjw29wCYRbYcknCtZXUP3Y5k0lyGZSsTdVfFzCDpybS5iTmbG48B9bg7gKZFS849wLsCF09oqzvUqXuGLY7vd0N1P1fZMDXRa7ntz7C8wdw1xrtYjsSyrqMJP3SyIEH9DVaXaoYRNHymUPeoiJ/k98Jq+eJFqit0+FzftPkhmzZG6MVyREB66GjCzznQE3MO8p7G6p/8u9+uuofRlxvj8S7A5Sei23ppXqGUz4bP6X6MTRttrAL5209y6aSanwAiO6MmZKo7GKl79GYYga+Xxq5VJKi77g0gvTaLmM+pIPPlXyB97sCEj4O8Nr/C5RIvq/EqNJS5cTvi8xFYDk5Vd5F5Y/r7jpjT/QHIWBs2bdQgpwR1AvYz4ZPxItKHOiQ+SlZ30UC8eoJnhACT14aOv6kijCCzDRHFiJd90+YG5nUi5mM5x9UGflfTz6Bmu9+C9e9jdf9Mdc8TAizgc578I6ih3JfS0aRU97ptf4pl8UD7IBlenZPIq1uvujKhOI6necYW/pHY+amuI3rOlOG2GqTn7XFX78ZSM560vDWPx2Lhh2F5BGvb1hRaNNrcqXmoQp3mJ2AlER9keiBdvNqsERmEN9kWhHI/7TxY0MxXjTwRdSJNnzmrs3JanTBpInLxH7+hI2CtyqwomOBBps1puG7Dguputq3IvO7KnqSlPx+Y8AZ/iPwjyE05wUsLI1Cu0woBptDUw/LY7vnIIzRVuWR1Z7hB+ITHLrXsRwEFbGmoe44Q4M2xUK/pznaJ3SLqzoR3RN3jJJ6HK8dA2CGl5Y40CgHeA2Q+ZVfmuRS6IYTZfrbUnU2bFjFp4u+pQ+psLMtVDTAjdY+vXw+XFCZwbFAvrPRGjU+21zuY8OoQ4F5c/BnLP7Ibp7kSPGjAJQr73THT29KO6s6Ed4P0db2t/8VyGf7pMxPVPYPgGgkee2Od/OkbdZy6Cya8I6RvCBJ7Bstf8f2alCCxIiHA3wOZLLKePXU33K+wuhu2N1jhHVH35BBgWnMblnuV6p5G8OwEDzJtfoFlp0LqXm9iVarugtW9NU0aZQjwW1hoXJtXddXdM/v+/fD1BKCOqbzqblnpPWHhxiuyDxO+XGgkeDyF6y7Bdb1a6m4eAkxuykPKUvdSVFWwurewSZOZ4EEdUrcG9ny/kbrrhRFshZ+f6lGHlI745e2U0jhGZeregeRvevDYro+IxCAxRfAXYR+s34mE3z51u1iwmXaQWL8nk0VGaQaJbYq1PbG+pX9DChFGGJJv30toBAsQweeyU60WhRjZPmi3ND6YCgSJpXjDxMCZRbeo6Un0/Nanc/cojFvA1OmjBrXc8CVdzpyJfoLHbCzjsEYDig9ubJjmUvdwX/pDj6M/E8IsLPW2ISEp3Hhk6eque+wyTJv4jUI3M01e8F1owfF6mk74HAke7+MKmmRhR9z3uKwbJ0eQ2CeBRiOmBrKAORnbUmL3dCz7GgeJFfBmKW13fdKmkz/9mJSk8zdwYIyZ1vbSmCV4LMVCEy3M0xknMkdYL3ltKEVtA41tn4cwoSSPJ8Rmw7Z8dYfgyfdHNGc+YMIX/Zd0ZvCoJXiQ+pJps0blrSkYAnz0gNcmfVs8D7HQSN11bg6bIcD21H0Rfn4lkn0Ze2lsqBIYJXjQqGXksZloWd1DUIcUDQ+3U8a2z2P9vlzqXuLvaEXd49fSF3jJprWyl8ZNk0a5riFIjCZY+B2ue9myuoc4EOvUOEvJgxM0JMV4oPxWVxI8dEMPhNH7Kfj+DlT3fia8zQaseYLHTE9On/JuHnXPuAmoUU8dUkfRqaQEic0KzKt2VXfyxozG0gMtDjdMmuIJHncGKpus7mkmVDZBdvAJL+DTKQcjzwVNkjyjEnXPcRN7pjdD3CM/Bl8no7oLJrxNda+3rTVMHS8knPDng31OZ8qcHEq/vye9NpumEPJFkEPLrWiJBA/N/Tw5gthdrW7KuNloNUnwaPTKkHtwDKr7h7rfZaCUoWkzMoMxk3C1HCuz2epe/xQzcVPW3tP0nWPxfdsMLejGMB0640Sq1T1K/vuBOkUsj0DghV4bAd243D5lv5UePf7DUOZmqrsFP7wnfe4TUN3XMeEr89QYJXiswPJ7AN+8sKXuURyI5WQsG6bs9xZQ2IPweyMtqbt2e8OmutNwgpdP7x60BtoILg7TUTTB4xV8dxFQt7/N5Oza2xPxJjw4g5B0DpQvSzH8vdZkvTp1n4/Xch6S/RVoMzjuh8+d4PEAlr9YVfdanabRoXFtdss4xv+AMqmEf/O9k0vdzbxJttSdPE7XIdlnQBvCKT98qrpDuurXuSJX4Vsa3fc5654OeRPu65s2IpL8rQ4uuzJ44tDcpH3GQlC9uj8WPJmACV92IyxT8cEkBPgFkFNk9mqrOyieBMlEoTFtDsfyMaUCi4F2xVVY/w4uz8PyppMJHnLbhWS3z+getJIJX4FJkzHGu666R//oB4PYeWFF6ePpezQwK4URf0XjGKTslI97CUh/Ps0w2JN9XvlDgA0apyGocXolkn0ytDGcM2ksqXsIGtfmCt+0sTEKcCPIjj/Bk4FmOjcSzUD+MMgR1Y7EOnVU0fDgS3I9Ee2GAN8DMjisrdH0FL/P3r/OdIz3GMk10/eOoQ4hL5yS3u4Y76twW5poeVzOjiaaUGFkMHLCPli2w/pg/HBrrA8umL6np+7Cv+EOR3Wf3u6EdzvFDwAsJXjc50kf+vGxXFMTdVfbyhuDnA2EGsjP5zA5aOzMiUHZDmSeLCWebINlLyyfCspBuP8g6+ouk+Opd/gZ6AA4MeWNIsEj09wxCAGm7ByaUW53LCPMvTSZ6Xu7Yf0nIOPnP9LqOErehkKMF0dCgB/FxdaBzd+lc3o5QoCn4OvNqO7rOoHw7vrh7al7uC+lA5KLMHWS3AJjvNP8VKeDTAS3iS/73iCh+V+ZqTt5ZS5Gsi+BDoFjjVatGTxM1T0KapiNN0u9007OJp/8iVj/gqbtrqjHEjyGgWwfbKRzrYYhwJSHOxbJ/ih0ENwILTCbwUNf3Rv/bJod+hqVvWphBo9dsJBps6WFn2aT4Fh75XZLpu9HM+3dDh0Gh4LHco3xnv6nJ3c0zQZKC5QTIuuru76n5BtAnVLFQ4BpCJKjdb/bUN0X4HsKsnubCe+YPa8xxnueEGBStzuN1F2fXORhOWagcZzvN/gMvp7imzL2Ezzok4cgzM5iwjeD4FoJHmZ/cnoYwWr8nDqkpuc0jbLqw/H1XCyb51B3ClU4E8uuuiQ2DBKbGMQZrWXCt4C6K8Z4Nyeo7Nonr807yepeaIx32uybIMMIhhj+BhSj820wI7HuZwsDc26WwbUw4a3b7lCpuke3vQfr4wubDMn1Lk/65vc0MJWot5Vcmx8vQd0/9BvsojM6mNxWeJ0ED7Cq7iH6kDDXQ30YsUrdze3p7QJF3VnjRMlePxHCOHv76k52O5ky/Z2q7s4Q3miMd3vqHtZn+6aN8GPXrdnxkZuDhtM+HoIwYsV10BDUNKzf10xIbKDuPcE1Ltf+TZnw1djtKtXXmMEjnyJKUATjuDR1L0COQYHH5VBIiIAOXobigp4EW5ag7pQPQInlTwHDwSTu4mO859mW0vHItJmp9RTSV/dw/WZAIcHC75iqxxBPxuAMtaruNdC4l7elRlMy4Ss0Z4qqu4VE7QDzUd1pCO73dM0WQ1DoL3lgNqlTd4qTOa7wkyq5l3UhyJ7lD4DhZqO1CeoeghpzNK7NXWHDLlXdDW36ACfV2enUwUQJ4Rsb31zZN1442u/USidGZsIXs+krUvdwA8rlvAir/8xB5nRCye3JRj8D67vjCqqfjU+4YabqrhkCTMnYY+tv3k5trIbocongJYzxrr+tiJg2ANeBdA9uXYIi7gHS1764wStjT90XgJyc7V2jJxUTvjlmTZPUPVolnzVlGJ1sovSaYQTr48th5D3B7bcoQd1Dr8zkFPXvWKl3ZpiOStQdtEOAqVfyBi9pyD47oDzWbWOXbW+M9/ggVKzubjdarai70X7KEGByUVII7VvOzuDRuB+Na0n5qcu01J07npoDiwkeeg1K/RBgGj33FgiHvy75KWe8XeN+FAw3g9XddZPGboKHDXUPsQbr1ICdZlXdc5BfQ90pxv82oNBnVnd3CV9SgocNdQ9B8xtRh9TSUhTdThjBgsD8Wsrq3iKN1jxE8WyQKnu/Pr8hKMOI+5qm7uprWONP9wPwbz3TRzDhXWq0lhACDBYSPPqCxuAjDqo7Bb5dndTO8GyIDBPegSdBWeqefoxX/QZsJMTWgRk8FuJnNEjTewYNW1Z4Vxqtpao7aKh7NjmoYTg2991jV917A6/MVKPzEEx49xS8iLqXY8eHdVJSCsh62oEx3mkOqZtVx+nkEOCWaLRaS/AwG+M9z/eRR4S67pfpnVcp6j4XaPZxAe+zurdqo1XThClhjPcU0yexLjw5xjuFEa/Nfexi5Cdln1NY3bmntTloYpBYXqVf4SssRMKIE4+TfwaPlCCxB3zPjDAZV4bV3TmTpuIQYH0FVh9jEQ1GCjLM1775lfzZ6yAzmF7SvlFY3d0ivLPqrndzkF/+Jn/rPEFiZupO00lei+VRo9+F1d1hG95FdU8HkZCG7HuiAnWnUQfuTtuT1b1VCO+yumeHESzH+oUQTkxWjrovDtT9dY0ZPVjdW8KGt0LsStU9iimQNZlvsQQPaqjeCykTG7O6t6LCK/6UkkOAbaTvrfNteUHx8yL3OXvJW5L7k+J41rK6txPhmxsCbANk0lwQeFLydWo1EngRyHHsX9J6qrG6t6DCV5vgAZbT9ygHdryXYnoYmFfUIL4xMJeA1b3DvDSOq3sICui6Psg+yuuNkZ8If1CoMQB1A6DabIdwT2s7qbvhfoXVfYCAFGtDUYxLjdQ9/tnLIHtyV+RSdyZ3e3tpjEKAy74QuaCpIMdivT/Hda/Ez67C5bNZ31gowYN7WttA3S0rfcEQYEoJnJRD3ckFebeemjO5W7/RWqK6l/LHq0OAXwvMknkGBJwVZDAtz30yfAO0npemrASPgmO8m954tCWFHFykimysU/fVgVdmps71cghwh3tpjNRd2Dzv1BBgWkuDOd2n8d0P4We35ieruSuSZ/FzSd2bl+ChVnfdY8f3fweke3FxyveTV+byAa9MmerOoQVtpO5QsrrnT/B4EmgIbum18dPWIzcJmTLX4tpprO4d5qVxLMHDZkNbgIx2fDg4nWgaAAWF3a57zEJhBGzPt76XJre669wcRUcBjh+Lkr5pwKRlke8gT8444+kkC4YReEz4Dlb3Ks0zadrcEExaAMENMNU6UUWBdW2OLmfPzJ0ED5tjvK/yZNz8NoHY3NHgsuQgsVLhCcG/GINNGgaDCc9gMOEZDCY8g8GEZzCY8AwGE57BYMIzGEx4BoMJz2Aw4RkMJjyDCc9gMOEZjPbA/wUYABFcLRS95DJ0AAAAAElFTkSuQmCC"/>
+	</defs>
+	<style>
+		tspan { white-space:pre }
+	</style>
+	<use id="Background" href="#img1" x="0" y="0" />
+</svg>
diff --git a/src/components/auth/auth.vue b/src/components/auth/auth.vue
new file mode 100644
index 0000000..ae010d4
--- /dev/null
+++ b/src/components/auth/auth.vue
@@ -0,0 +1,30 @@
+<template>
+	<slot v-if="getUserAuthBtnList" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '/@/stores/userInfo';
+
+export default defineComponent({
+	name: 'auth',
+	props: {
+		value: {
+			type: String,
+			default: () => '',
+		},
+	},
+	setup(props) {
+		const stores = useUserInfo();
+		const { userInfos } = storeToRefs(stores);
+		// 获取 vuex 中的用户权限
+		const getUserAuthBtnList = computed(() => {
+			return userInfos.value.authBtnList.some((v: string) => v === props.value);
+		});
+		return {
+			getUserAuthBtnList,
+		};
+	},
+});
+</script>
diff --git a/src/components/auth/authAll.vue b/src/components/auth/authAll.vue
new file mode 100644
index 0000000..76c5e01
--- /dev/null
+++ b/src/components/auth/authAll.vue
@@ -0,0 +1,31 @@
+<template>
+	<slot v-if="getUserAuthBtnList" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '/@/stores/userInfo';
+import { judementSameArr } from '/@/utils/arrayOperation';
+
+export default defineComponent({
+	name: 'authAll',
+	props: {
+		value: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	setup(props) {
+		const stores = useUserInfo();
+		const { userInfos } = storeToRefs(stores);
+		// 获取 pinia 中的用户权限
+		const getUserAuthBtnList = computed(() => {
+			return judementSameArr(props.value, userInfos.value.authBtnList);
+		});
+		return {
+			getUserAuthBtnList,
+		};
+	},
+});
+</script>
diff --git a/src/components/auth/auths.vue b/src/components/auth/auths.vue
new file mode 100644
index 0000000..ef31019
--- /dev/null
+++ b/src/components/auth/auths.vue
@@ -0,0 +1,36 @@
+<template>
+	<slot v-if="getUserAuthBtnList" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '/@/stores/userInfo';
+
+export default defineComponent({
+	name: 'auths',
+	props: {
+		value: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	setup(props) {
+		const stores = useUserInfo();
+		const { userInfos } = storeToRefs(stores);
+		// 获取 vuex 中的用户权限
+		const getUserAuthBtnList = computed(() => {
+			let flag = false;
+			userInfos.value.authBtnList.map((val: string) => {
+				props.value.map((v) => {
+					if (val === v) flag = true;
+				});
+			});
+			return flag;
+		});
+		return {
+			getUserAuthBtnList,
+		};
+	},
+});
+</script>
diff --git a/src/components/bigUploader/index.vue b/src/components/bigUploader/index.vue
new file mode 100644
index 0000000..eb39bba
--- /dev/null
+++ b/src/components/bigUploader/index.vue
@@ -0,0 +1,369 @@
+<template>
+
+  <div class="uploader-min" v-show="!panelShow" @click="openHandle">
+    <el-icon style="vertical-align: middle"><ele-DArrowLeft/></el-icon>
+  </div>
+
+  <div class="uploader-container" v-show="panelShow">
+    <div class="header">
+      <span>文件列表</span>
+      <span class="shrink" @click="closeHandle">
+        <el-icon style="vertical-align: middle"><ele-DArrowRight /></el-icon>
+      </span>
+    </div>
+
+    <div class="box">
+      <uploader :options="options"
+                :file-status-text="handleFileStatusText"
+                :autoStart="false"
+                @file-added="onFileAdded"
+                @file-success="onFileSuccess"
+                @file-progress="onFileProgress"
+                @file-error="onFileError"
+                class="uploader-example">
+
+        <uploader-unsupport></uploader-unsupport>
+
+        <div v-show="false">
+          <uploader-btn ref="uploadBtn" :attrs="all">选择文件</uploader-btn>
+          <uploader-btn :attrs="image">选择图片</uploader-btn>
+          <uploader-btn :directory="true">选择文件夹</uploader-btn>
+        </div>
+
+        <uploader-list>
+          <template v-slot="props">
+            <ul class="file-list">
+              <li v-for="file in props.fileList" :key="file.id">
+                <uploader-file :ref="'file_' + file.id" :class="'file_' + file.id" :file="file" :list="true"></uploader-file>
+              </li>
+              <div class="no-file" v-if="!props.fileList.length">暂无待上传文件</div>
+            </ul>
+          </template>
+        </uploader-list>
+      </uploader>
+
+    </div>
+
+
+  </div>
+
+</template>
+
+<script>
+import SparkMD5 from 'spark-md5';
+import axios from "axios"
+import {bigUpload} from "/@/stores/bigUpload";
+import {getToken} from "/@/utils/gfast"
+const stores = bigUpload();
+
+const baseURL = import.meta.env.VITE_API_URL
+const instance = axios.create({
+  baseURL: baseURL,
+  timeout: 1000 * 30,
+});
+const acceptConfig  = {
+  image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],
+  video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],
+  audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac'],
+  document: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx'],
+  all() {
+    return [...this.image, ...this.video, ...this.audio, ...this.document]
+  }
+}
+export default {
+  name: "bigUploader",
+  data () {
+    return {
+      options: {
+        target: baseURL + 'api/v1/system/bigUpload/upload',   // 目标上传 URL
+        chunkSize: '2048000',         // 分片大小
+        fileParameterName: 'upfile',      //上传文件时文件的参数名，默认 file
+        maxChunkRetries: 3,             //最大自动失败重试上传次数
+        testChunks: true,   //是否开启服务器分片校验
+        // 服务器分片校验函数，秒传及断点续传基础
+        // 可选的函数用于根据 XHR 响应内容检测每个块是否上传成功了，传入的参数是：Uploader.Chunk 实例以及请求响应信息。
+        // 这样就没必要上传（测试）所有的块了
+        checkChunkUploadedByResponse: function (chunk, message) {
+          try {
+            let objMessage = JSON.parse(message)
+            const {code, data} = objMessage
+            if (code === 0) {
+              if (data.skipUpload) {
+                return true
+              }
+              return (data.uploaded || []).indexOf(chunk.offset + 1) >= 0
+            }
+          } catch (e) {
+            console.error(e)
+          }
+
+          return false
+        },
+        headers: {
+          Authorization:"Bearer "+getToken()
+        },
+        query: (file, chunk) => {
+          return {
+            ...file.params,
+          }
+        },
+      },
+      image: {
+        accept: 'image/*'
+      },
+      all: {
+        accept: acceptConfig.all()
+      },
+      statusText: {
+        success: '成功了',
+        error: '出错了',
+        uploading: '上传中',
+        paused: '暂停中',
+        waiting: '等待中'
+      }
+    }
+  },
+  mounted() {
+     this.$nextTick(()=> {
+       this.mittBus.on("bigUploader.uploadFile", this.uploadFile)
+     })
+  },
+  computed:{
+    panelShow() {
+      return stores.panelShow
+    },
+    uploadBtn () {
+      return this.$refs.uploadBtn && this.$refs.uploadBtn.btn
+    }
+  },
+  methods: {
+    openHandle () {
+      stores.setPanelShow(true)
+    },
+    closeHandle() {
+      stores.setPanelShow(false)
+    },
+    uploadFile () {
+      // console.log("uploadFile")
+
+      if (this.uploadBtn) {
+        this.uploadBtn.click()
+      }
+
+    },
+
+    handleFileStatusText (status, response) {
+      //console.log(status, response)
+      if (status === "success") {
+        const {code, data} = response
+        if (code === 0 && data.needMerge === true) {
+          return "文件合并中..."
+        } else {
+          return this.statusText[status]
+        }
+      } else {
+        return this.statusText[status]
+      }
+    },
+
+    //上传过程中出错了
+    onFileError(rootFile, file, response, chunk) {
+      console.error(rootFile, file, response, chunk)
+    },
+
+    // 设置自定义状态
+    setStatus (id, text) {
+      this.$nextTick(()=> {
+        const el = this.$refs['file_'+ id][0].$el.getElementsByClassName("uploader-file-status")[0].getElementsByTagName("span")[0]
+        const parent = el.parentNode
+        const  para = document.createElement("span")
+        para.appendChild(document.createTextNode(text));
+        para.className = "para"
+        el.style.display = 'none'
+        parent.appendChild(para)
+      })
+    },
+    // 删除自定义状态
+    removeStatus (id) {
+      try{
+        const els = this.$refs['file_'+ id][0].$el.getElementsByClassName("uploader-file-status")[0].getElementsByClassName("para")
+        if (els && els.length > 0) {
+          const parent = els[0].parentNode
+          for (let i = 0; i < els.length; i++) {
+            parent.removeChild(els[i])
+          }
+        }
+        const firstSpan = this.$refs['file_'+ id][0].$el.getElementsByClassName("uploader-file-status")[0].getElementsByTagName("span")[0]
+        firstSpan.style.display = ''
+      } catch (e) {
+        console.error(e)
+      }
+
+    },
+
+    /**
+     文件上传成功事件
+     第一个参数 rootFile 就是成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件；
+     第二个参数 file 就是当前成功的 Uploader.File 对象本身；
+     第三个参数 message 就是服务端响应内容，永远都是字符串；
+     第四个参数 chunk 就是 Uploader.Chunk 实例， 它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status 就是。
+     */
+    onFileSuccess(rootFile, file, response, chunk) {
+      try{
+        // console.log(rootFile, file, response, chunk)
+        let res = JSON.parse(response);
+        // console.log(res)
+        const {code, data} = res
+        if (code === 0) {
+          // 如果服务端返回需要合并
+          if (data.needMerge) {
+            // 文件合并操作
+            instance.post(baseURL+'api/v1/system/bigUpload/uploadMerge', {
+              identifier: data.identifier,
+              totalChunks: data.totalChunks,
+              totalSize: data.totalSize,
+              filename: data.filename,
+              token:getToken()
+            }).then(res=> {
+              const {status, data}  = res
+              return data
+            }).then(res => {
+              let {code, data} = res
+              if(code === 0) {
+                this.setStatus(file.id, this.statusText["success"])
+                this.mittBus.emit("bigUploader.uploadFileSuccess", {...data, fileType: file.fileType})
+              }
+            })
+          } else {
+            // 不需要合并
+            // 秒传或普通上传
+            this.mittBus.emit("bigUploader.uploadFileSuccess", {...data, fileType: file.fileType})
+          }
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    // 一个文件在上传中
+    onFileProgress(rootFile, file, chunk) {
+      console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
+    },
+    // 这个事件一般用作文件校验，如果说返回了 false，那么这个文件就会被忽略，不会添加到文件上传列表中。
+    onFileAdded(file) {
+      this.computeMD5(file);
+      // 2022/1/10 将额外的参数赋值到每个文件上，解决了不同文件使用不同params的需求
+      file.params = this.params
+
+      this.openHandle()
+    },
+    computeMD5(file) {
+      let fileReader = new FileReader();
+      let time = new Date().getTime();
+      let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
+      // 分片序号
+      let currentChunk = 0;
+      // 分片大小
+      const chunkSize = 10 * 1024 * 1000;
+      // 分片总数量
+      let chunks = Math.ceil(file.size / chunkSize);
+      let spark = new SparkMD5.ArrayBuffer();
+
+      this.setStatus(file.id, "md5计算中")
+      file.pause();
+
+      loadNext();
+
+      fileReader.onload = (e => {
+        spark.append(e.target.result);
+
+        if (currentChunk < chunks) {
+          currentChunk++;
+          loadNext();
+          // 实时展示MD5的计算进度
+          this.$nextTick(() => {
+            console.log('校验MD5 '+ ((currentChunk/chunks)*100).toFixed(0)+'%')
+          })
+        } else {
+          let md5 = spark.end();
+          this.computeMD5Success(md5, file);
+          this.removeStatus(file.id)
+          console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`);
+        }
+      });
+
+      fileReader.onerror = function () {
+        console.error(`文件${file.name}读取出错，请检查该文件`)
+        file.cancel();
+      };
+
+      function loadNext() {
+        let start = currentChunk * chunkSize;
+        let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
+        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
+      }
+    },
+    // md5 计算完毕
+    computeMD5Success(md5, file) {
+      file.uniqueIdentifier = md5;
+      file.resume();
+    }
+  }
+}
+</script>
+
+<style scoped  lang="scss">
+.uploader-min {
+  background-color:#fff;
+  z-index: 9999;
+  position: absolute;
+  right: 0;
+  bottom:10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
+  padding:15px;
+  cursor: pointer;
+}
+.uploader-container {
+  background-color:#fff;
+  z-index: 9999;
+  position: absolute;
+  right: 0;
+  bottom:10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
+}
+
+.header {
+  background-color:#fff;
+  height:35px;
+  line-height: 35px;
+  display: flex;
+  padding: 0 10px;
+  justify-content:space-between;
+  .shrink {
+    cursor: pointer;
+  }
+}
+.box {
+  max-height: 200px;
+  overflow-y: scroll;
+}
+
+
+
+.uploader-example {
+  width: 550px;
+  padding: 15px;
+  font-size: 12px;
+
+
+}
+.uploader-example .uploader-btn {
+  margin-right: 4px;
+}
+.uploader-example .uploader-list {
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+
+
+</style>
diff --git a/src/components/cropper/index.vue b/src/components/cropper/index.vue
new file mode 100644
index 0000000..b23a266
--- /dev/null
+++ b/src/components/cropper/index.vue
@@ -0,0 +1,149 @@
+<template>
+	<div>
+		<el-dialog title="更换头像" v-model="isShowDialog" width="769px">
+			<div class="cropper-warp">
+				<div class="cropper-warp-left">
+					<img :src="cropperImg" class="cropper-warp-left-img" />
+				</div>
+				<div class="cropper-warp-right">
+					<div class="cropper-warp-right-title">预览</div>
+					<div class="cropper-warp-right-item">
+						<div class="cropper-warp-right-value">
+							<img :src="cropperImgBase64" class="cropper-warp-right-value-img" />
+						</div>
+						<div class="cropper-warp-right-label">100 x 100</div>
+					</div>
+					<div class="cropper-warp-right-item">
+						<div class="cropper-warp-right-value">
+							<img :src="cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
+						</div>
+						<div class="cropper-warp-right-label">50 x 50</div>
+					</div>
+				</div>
+			</div>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">更 换</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, nextTick, defineComponent } from 'vue';
+import Cropper from 'cropperjs';
+import 'cropperjs/dist/cropper.css';
+
+export default defineComponent({
+	name: 'cropperIndex',
+	setup() {
+		const state = reactive({
+			isShowDialog: false,
+			cropperImg: '',
+			cropperImgBase64: '',
+			cropper: null,
+		});
+		// 打开弹窗
+		const openDialog = (imgs: any) => {
+			state.cropperImg = imgs;
+			state.isShowDialog = true;
+			nextTick(() => {
+				initCropper();
+			});
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 更换
+		const onSubmit = () => {
+			// state.cropperImgBase64 = state.cropper.getCroppedCanvas().toDataURL('image/jpeg');
+		};
+		// 初始化cropperjs图片裁剪
+		const initCropper = () => {
+			const letImg: any = document.querySelector('.cropper-warp-left-img');
+			(<any>state.cropper) = new Cropper(letImg, {
+				viewMode: 1,
+				dragMode: 'none',
+				initialAspectRatio: 1,
+				aspectRatio: 1,
+				preview: '.before',
+				background: false,
+				autoCropArea: 0.6,
+				zoomOnWheel: false,
+				crop: () => {
+					state.cropperImgBase64 = (<any>state.cropper).getCroppedCanvas().toDataURL('image/jpeg');
+				},
+			});
+		};
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+			initCropper,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.cropper-warp {
+	display: flex;
+	.cropper-warp-left {
+		position: relative;
+		display: inline-block;
+		height: 350px;
+		flex: 1;
+		border: 1px solid var(--el-border-color);
+		background: var(--el-color-white);
+		overflow: hidden;
+		background-repeat: no-repeat;
+		cursor: move;
+		border-radius: var(--el-border-radius-base);
+		.cropper-warp-left-img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.cropper-warp-right {
+		width: 150px;
+		height: 350px;
+		.cropper-warp-right-title {
+			text-align: center;
+			height: 20px;
+			line-height: 20px;
+		}
+		.cropper-warp-right-item {
+			margin: 15px 0;
+			.cropper-warp-right-value {
+				display: flex;
+				.cropper-warp-right-value-img {
+					width: 100px;
+					height: 100px;
+					border-radius: var(--el-border-radius-circle);
+					margin: auto;
+				}
+				.cropper-size {
+					width: 50px;
+					height: 50px;
+				}
+			}
+			.cropper-warp-right-label {
+				text-align: center;
+				font-size: 12px;
+				color: var(--el-text-color-primary);
+				height: 30px;
+				line-height: 30px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/components/editor/index.vue b/src/components/editor/index.vue
new file mode 100644
index 0000000..78e5726
--- /dev/null
+++ b/src/components/editor/index.vue
@@ -0,0 +1,115 @@
+<template>
+	<div class="editor-container">
+		<div ref="editorToolbar"></div>
+		<div ref="editorContent" :style="{ height }"></div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, watch, defineComponent } from 'vue';
+import { createEditor, createToolbar, IEditorConfig, IToolbarConfig, IDomEditor } from '@wangeditor/editor';
+import '@wangeditor/editor/dist/css/style.css';
+import { toolbarKeys } from './toolbar';
+
+// 定义接口来定义对象的类型
+interface WangeditorState {
+	editorToolbar: HTMLDivElement | null;
+	editorContent: HTMLDivElement | null;
+	editor: any;
+}
+
+export default defineComponent({
+	name: 'wngEditor',
+	props: {
+		// 节点 id
+		id: {
+			type: String,
+			default: () => 'wangeditor',
+		},
+		// 是否禁用
+		isDisable: {
+			type: Boolean,
+			default: () => false,
+		},
+		// 内容框默认 placeholder
+		placeholder: {
+			type: String,
+			default: () => '请输入内容',
+		},
+		// 双向绑定：双向绑定值，字段名为固定，改了之后将不生效
+		// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
+		modelValue: String,
+		// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
+		// 模式，可选 <default|simple>，默认 default
+		mode: {
+			type: String,
+			default: () => 'default',
+		},
+		// 高度
+		height: {
+			type: String,
+			default: () => '310px',
+		},
+	},
+	setup(props, { emit }) {
+		const state = reactive<WangeditorState>({
+			editorToolbar: null,
+			editor: null,
+			editorContent: null,
+		});
+		// 富文本配置
+		const wangeditorConfig = () => {
+			const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
+			props.isDisable ? (editorConfig.readOnly = true) : (editorConfig.readOnly = false);
+			editorConfig.placeholder = props.placeholder;
+			editorConfig.onChange = (editor: IDomEditor) => {
+				// console.log('content', editor.children);
+				// console.log('html', editor.getHtml());
+				emit('update:modelValue', editor.getHtml());
+			};
+			(<any>editorConfig).MENU_CONF['uploadImage'] = {
+				base64LimitSize: 10 * 1024 * 1024,
+			};
+			return editorConfig;
+		};
+		//
+		const toolbarConfig = () => {
+			const toolbarConfig: Partial<IToolbarConfig> = {};
+			toolbarConfig.toolbarKeys = toolbarKeys;
+			return toolbarConfig;
+		};
+		// 初始化富文本
+		// https://www.wangeditor.com/
+		const initWangeditor = () => {
+			state.editor = createEditor({
+				html: props.modelValue,
+				selector: state.editorContent!,
+				config: wangeditorConfig(),
+				mode: props.mode,
+			});
+			createToolbar({
+				editor: state.editor,
+				selector: state.editorToolbar!,
+				mode: props.mode,
+				config: toolbarConfig(),
+			});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initWangeditor();
+		});
+		// 监听双向绑定值的改变
+		// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
+		watch(
+			() => props.modelValue,
+			(value) => {
+				state.editor.clear();
+				state.editor.dangerouslyInsertHtml(value);
+			}
+		);
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/components/editor/toolbar.ts b/src/components/editor/toolbar.ts
new file mode 100644
index 0000000..14a9bf3
--- /dev/null
+++ b/src/components/editor/toolbar.ts
@@ -0,0 +1,60 @@
+/**
+ * 工具栏配置
+ */
+export const toolbarKeys = [
+	'headerSelect',
+	'blockquote',
+	'|',
+	'bold',
+	'underline',
+	'italic',
+	{
+		key: 'group-more-style',
+		title: '更多',
+		iconSvg:
+			'<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
+		menuKeys: ['through', 'code', 'sup', 'sub', 'clearStyle'],
+	},
+	'color',
+	'bgColor',
+	'|',
+	'fontSize',
+	'fontFamily',
+	'lineHeight',
+	'|',
+	'bulletedList',
+	'numberedList',
+	'todo',
+	{
+		key: 'group-justify',
+		title: '对齐',
+		iconSvg:
+			'<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
+		menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify'],
+	},
+	{
+		key: 'group-indent',
+		title: '缩进',
+		iconSvg:
+			'<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
+		menuKeys: ['indent', 'delIndent'],
+	},
+	'|',
+	'emotion',
+	'insertLink',
+	{
+		key: 'group-image',
+		title: '图片',
+		iconSvg:
+			'<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
+		menuKeys: ['uploadImage'],
+	},
+	'insertTable',
+	'codeBlock',
+	'divider',
+	'|',
+	'undo',
+	'redo',
+	'|',
+	'fullScreen',
+];
diff --git a/src/components/iconSelector/index.vue b/src/components/iconSelector/index.vue
new file mode 100644
index 0000000..07de786
--- /dev/null
+++ b/src/components/iconSelector/index.vue
@@ -0,0 +1,252 @@
+<template>
+	<div class="icon-selector w100 h100">
+		<el-popover
+			placement="bottom"
+			:width="fontIconWidth"
+			trigger="click"
+			transition="el-zoom-in-top"
+			popper-class="icon-selector-popper"
+			@show="onPopoverShow"
+		>
+			<template #reference>
+				<el-input
+					v-model="fontIconSearch"
+					:placeholder="fontIconPlaceholder"
+					:clearable="clearable"
+					:disabled="disabled"
+					:size="size"
+					ref="inputWidthRef"
+					@clear="onClearFontIcon"
+					@focus="onIconFocus"
+					@blur="onIconBlur"
+				>
+					<template #prepend>
+						<SvgIcon
+							:name="fontIconPrefix === '' ? prepend : fontIconPrefix"
+							class="font14"
+							v-if="fontIconPrefix === '' ? prepend?.indexOf('ele-') > -1 : fontIconPrefix?.indexOf('ele-') > -1"
+						/>
+						<i v-else :class="fontIconPrefix === '' ? prepend : fontIconPrefix" class="font14"></i>
+					</template>
+				</el-input>
+			</template>
+			<template #default>
+				<div class="icon-selector-warp">
+					<div class="icon-selector-warp-title flex">
+						<div class="flex-auto">{{ title }}</div>
+						<div class="icon-selector-warp-title-tab" v-if="type === 'all'">
+							<span :class="{ 'span-active': fontIconType === 'ali' }" @click="onIconChange('ali')" class="ml10" title="iconfont 图标">ali</span>
+							<span :class="{ 'span-active': fontIconType === 'ele' }" @click="onIconChange('ele')" class="ml10" title="elementPlus 图标">ele</span>
+							<span :class="{ 'span-active': fontIconType === 'awe' }" @click="onIconChange('awe')" class="ml10" title="fontawesome 图标">awe</span>
+						</div>
+					</div>
+					<div class="icon-selector-warp-row">
+						<el-scrollbar ref="selectorScrollbarRef">
+							<el-row :gutter="10" v-if="fontIconSheetsFilterList.length > 0">
+								<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" @click="onColClick(v)" v-for="(v, k) in fontIconSheetsFilterList" :key="k">
+									<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': fontIconPrefix === v }">
+										<div class="flex-margin">
+											<div class="icon-selector-warp-item-value">
+												<SvgIcon :name="v" />
+											</div>
+										</div>
+									</div>
+								</el-col>
+							</el-row>
+							<el-empty :image-size="100" v-if="fontIconSheetsFilterList.length <= 0" :description="emptyDescription"></el-empty>
+						</el-scrollbar>
+					</div>
+				</div>
+			</template>
+		</el-popover>
+	</div>
+</template>
+
+<script lang="ts">
+import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';
+import initIconfont from '/@/utils/getStyleSheets';
+
+export default defineComponent({
+	name: 'iconSelector',
+	emits: ['update:modelValue', 'get', 'clear'],
+	props: {
+		// 输入框前置内容
+		prepend: {
+			type: String,
+			default: () => 'ele-Pointer',
+		},
+		// 输入框占位文本
+		placeholder: {
+			type: String,
+			default: () => '请输入内容搜索图标或者选择图标',
+		},
+		// 输入框占位文本
+		size: {
+			type: String,
+			default: () => 'default',
+		},
+		// 弹窗标题
+		title: {
+			type: String,
+			default: () => '请选择图标',
+		},
+		// icon 图标类型
+		type: {
+			type: String,
+			default: () => 'ele',
+		},
+		// 禁用
+		disabled: {
+			type: Boolean,
+			default: () => false,
+		},
+		// 是否可清空
+		clearable: {
+			type: Boolean,
+			default: () => true,
+		},
+		// 自定义空状态描述文字
+		emptyDescription: {
+			type: String,
+			default: () => '无相关图标',
+		},
+		// 双向绑定值，默认为 modelValue，
+		// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
+		// 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
+		modelValue: String,
+	},
+	setup(props, { emit }) {
+		const inputWidthRef = ref();
+		const selectorScrollbarRef = ref();
+		const state = reactive({
+			fontIconPrefix: '',
+			fontIconWidth: 0,
+			fontIconSearch: '',
+			fontIconTabsIndex: 0,
+			fontIconSheetsList: [],
+			fontIconPlaceholder: '',
+			fontIconType: 'ali',
+			fontIconShow: true,
+		});
+		// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
+		const onIconFocus = () => {
+			if (!props.modelValue) return false;
+			state.fontIconSearch = '';
+			state.fontIconPlaceholder = props.modelValue;
+		};
+		// 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
+		const onIconBlur = () => {
+			setTimeout(() => {
+				const icon = state.fontIconSheetsList.filter((icon: string) => icon === state.fontIconSearch);
+				if (icon.length <= 0) state.fontIconSearch = '';
+			}, 300);
+		};
+		// 处理 icon 双向绑定数值回显
+		const initModeValueEcho = () => {
+			if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
+			(<string | undefined>state.fontIconPlaceholder) = props.modelValue;
+			(<string | undefined>state.fontIconPrefix) = props.modelValue;
+		};
+		// 处理 icon type 类型为 all 时，类型 ali、ele、awe 回显问题
+		const initFontIconTypeEcho = () => {
+			if ((<any>props.modelValue)?.indexOf('iconfont') > -1) onIconChange('ali');
+			else if ((<any>props.modelValue)?.indexOf('ele-') > -1) onIconChange('ele');
+			else if ((<any>props.modelValue)?.indexOf('fa') > -1) onIconChange('awe');
+			else onIconChange('ali');
+		};
+		// 图标搜索及图标数据显示
+		const fontIconSheetsFilterList = computed(() => {
+			if (!state.fontIconSearch) return state.fontIconSheetsList;
+			let search = state.fontIconSearch.trim().toLowerCase();
+			return state.fontIconSheetsList.filter((item: any) => {
+				if (item.toLowerCase().indexOf(search) !== -1) return item;
+			});
+		});
+		// 获取 input 的宽度
+		const getInputWidth = () => {
+			nextTick(() => {
+				state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
+			});
+		};
+		// 监听页面宽度改变
+		const initResize = () => {
+			window.addEventListener('resize', () => {
+				getInputWidth();
+			});
+		};
+		// 初始化数据
+		const initFontIconData = async (type: string) => {
+			state.fontIconSheetsList = [];
+			if (type === 'ali') {
+				await initIconfont.ali().then((res: any) => {
+					// 阿里字体图标使用 `iconfont xxx`
+					state.fontIconSheetsList = res.map((i: string) => `iconfont ${i}`);
+				});
+			} else if (type === 'ele') {
+				await initIconfont.ele().then((res: any) => {
+					state.fontIconSheetsList = res;
+				});
+			} else if (type === 'awe') {
+				await initIconfont.awe().then((res: any) => {
+					// fontawesome字体图标使用 `fa xxx`
+					state.fontIconSheetsList = res.map((i: string) => `fa ${i}`);
+				});
+			}
+			// 初始化 input 的 placeholder
+			// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
+			state.fontIconPlaceholder = props.placeholder;
+			// 初始化双向绑定回显
+			initModeValueEcho();
+		};
+		// 图标点击切换
+		const onIconChange = (type: string) => {
+			state.fontIconType = type;
+			initFontIconData(type);
+		};
+		// 获取当前点击的 icon 图标
+		const onColClick = (v: any) => {
+			state.fontIconPlaceholder = v;
+			state.fontIconPrefix = v;
+			emit('get', state.fontIconPrefix);
+			emit('update:modelValue', state.fontIconPrefix);
+		};
+		// 清空当前点击的 icon 图标
+		const onClearFontIcon = () => {
+			state.fontIconPrefix = '';
+			emit('clear', state.fontIconPrefix);
+			emit('update:modelValue', state.fontIconPrefix);
+		};
+		// 监听 Popover 打开，用于双向绑定值回显
+		const onPopoverShow = () => {
+			initModeValueEcho();
+			initFontIconTypeEcho();
+		};
+		// 页面加载时
+		onMounted(() => {
+			initModeValueEcho();
+			initResize();
+			getInputWidth();
+		});
+
+		// 监听双向绑定 modelValue 的变化
+		watch(
+			() => props.modelValue,
+			() => {
+				initModeValueEcho();
+			}
+		);
+		return {
+			inputWidthRef,
+			selectorScrollbarRef,
+			fontIconSheetsFilterList,
+			onColClick,
+			onIconChange,
+			onClearFontIcon,
+			onIconFocus,
+			onIconBlur,
+			onPopoverShow,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/components/myCodeMirror/index.vue b/src/components/myCodeMirror/index.vue
new file mode 100644
index 0000000..7b380cf
--- /dev/null
+++ b/src/components/myCodeMirror/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <codemirror
+      v-model="code"
+      placeholder="Code goes here..."
+      :style="{ height: editHeight+'px' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tab-size="2"
+      :extensions="extensions"
+      @ready="handleReady"
+  />
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, ref, shallowRef} from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { javascript } from '@codemirror/lang-javascript'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+export default defineComponent({
+  name:"myCodeMirror",
+  components: {
+    Codemirror
+  },
+  props: {
+    // 外部传入的内容，用于实现双向绑定
+    modelValue: {
+      type:String,
+      default:`console.log('Hello, world!')`
+    },
+    height:{
+      type:Number,
+      default:400
+    }
+  },
+  setup(props) {
+    const code = ref('')
+    const extensions = [javascript(), oneDark]
+
+    // Codemirror EditorView instance ref
+    const view = shallowRef()
+
+    const handleReady = (payload:any) => {
+      code.value = props.modelValue
+      view.value = payload.view
+    }
+    const editHeight = computed(()=>props.height)
+    return {
+      code,
+      extensions,
+      handleReady,
+      editHeight,
+    }
+  }
+})
+</script>
diff --git a/src/components/noticeBar/index.vue b/src/components/noticeBar/index.vue
new file mode 100644
index 0000000..b982ba7
--- /dev/null
+++ b/src/components/noticeBar/index.vue
@@ -0,0 +1,195 @@
+<template>
+	<div class="notice-bar" :style="{ background, height: `${height}px` }" v-show="!isMode">
+		<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
+			<i v-if="leftIcon" class="notice-bar-warp-left-icon" :class="leftIcon"></i>
+			<div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
+				<div class="notice-bar-warp-text" ref="noticeBarTextRef" v-if="!scrollable">{{ text }}</div>
+				<div class="notice-bar-warp-slot" v-else><slot /></div>
+			</div>
+			<SvgIcon :name="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent, ref, onMounted, nextTick } from 'vue';
+
+export default defineComponent({
+	name: 'noticeBar',
+	props: {
+		// 通知栏模式，可选值为 closeable link
+		mode: {
+			type: String,
+			default: () => '',
+		},
+		// 通知文本内容
+		text: {
+			type: String,
+			default: () => '',
+		},
+		// 通知文本颜色
+		color: {
+			type: String,
+			default: () => 'var(--el-color-warning)',
+		},
+		// 通知背景色
+		background: {
+			type: String,
+			default: () => 'var(--el-color-warning-light-9)',
+		},
+		// 字体大小，单位px
+		size: {
+			type: [Number, String],
+			default: () => 14,
+		},
+		// 通知栏高度，单位px
+		height: {
+			type: Number,
+			default: () => 40,
+		},
+		// 动画延迟时间 (s)
+		delay: {
+			type: Number,
+			default: () => 1,
+		},
+		// 滚动速率 (px/s)
+		speed: {
+			type: Number,
+			default: () => 100,
+		},
+		// 是否开启垂直滚动
+		scrollable: {
+			type: Boolean,
+			default: () => false,
+		},
+		// 自定义左侧图标
+		leftIcon: {
+			type: String,
+			default: () => '',
+		},
+		// 自定义右侧图标
+		rightIcon: {
+			type: String,
+			default: () => '',
+		},
+	},
+	setup(props, { emit }) {
+		const noticeBarWarpRef = ref();
+		const noticeBarTextRef = ref();
+		const state = reactive({
+			order: 1,
+			oneTime: 0,
+			twoTime: 0,
+			warpOWidth: 0,
+			textOWidth: 0,
+			isMode: false,
+		});
+		// 初始化 animation 各项参数
+		const initAnimation = () => {
+			nextTick(() => {
+				state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
+				state.textOWidth = noticeBarTextRef.value.offsetWidth;
+				document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
+				document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
+				computeAnimationTime();
+				setTimeout(() => {
+					changeAnimation();
+				}, props.delay * 1000);
+			});
+		};
+		// 计算 animation 滚动时长
+		const computeAnimationTime = () => {
+			state.oneTime = state.textOWidth / props.speed;
+			state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
+		};
+		// 改变 animation 动画调用
+		const changeAnimation = () => {
+			if (state.order === 1) {
+				noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
+				state.order = 2;
+			} else {
+				noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
+			}
+		};
+		// 监听 animation 动画的结束
+		const listenerAnimationend = () => {
+			noticeBarTextRef.value.addEventListener(
+				'animationend',
+				() => {
+					changeAnimation();
+				},
+				false
+			);
+		};
+		// 右侧 icon 图标点击
+		const onRightIconClick = () => {
+			if (!props.mode) return false;
+			if (props.mode === 'closeable') {
+				state.isMode = true;
+				emit('close');
+			} else if (props.mode === 'link') {
+				emit('link');
+			}
+		};
+		// 页面加载时
+		onMounted(() => {
+			if (props.scrollable) return false;
+			initAnimation();
+			listenerAnimationend();
+		});
+		return {
+			noticeBarWarpRef,
+			noticeBarTextRef,
+			onRightIconClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.notice-bar {
+	padding: 0 15px;
+	width: 100%;
+	border-radius: 4px;
+	.notice-bar-warp {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: inherit;
+		.notice-bar-warp-text-box {
+			flex: 1;
+			height: inherit;
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+			position: relative;
+			.notice-bar-warp-text {
+				white-space: nowrap;
+				position: absolute;
+				left: 0;
+			}
+			.notice-bar-warp-slot {
+				width: 100%;
+				white-space: nowrap;
+				:deep(.el-carousel__item) {
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+		.notice-bar-warp-left-icon {
+			width: 24px;
+			font-size: inherit !important;
+		}
+		.notice-bar-warp-right-icon {
+			width: 24px;
+			text-align: right;
+			font-size: inherit !important;
+			&:hover {
+				cursor: pointer;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/components/pagination/index.vue b/src/components/pagination/index.vue
new file mode 100644
index 0000000..ee3e06a
--- /dev/null
+++ b/src/components/pagination/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+        :background="background"
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :layout="layout"
+        :page-sizes="pageSizes"
+        :pager-count="pagerCount"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, defineComponent,computed } from 'vue';
+const props = {
+  total: {
+    required: true,
+    type: Number
+  },
+  page: {
+    type: Number,
+    default: 1
+  },
+  limit: {
+    type: Number,
+    default: 20
+  },
+  pageSizes: {
+    type: Array,
+    default() {
+      return [10, 20, 30, 50]
+    }
+  },
+  // 移动端页码按钮的数量端默认值5
+  pagerCount: {
+    type: Number,
+    default: document.body.clientWidth < 992 ? 5 : 7
+  },
+  layout: {
+    type: String,
+    default: 'total, sizes, prev, pager, next, jumper'
+  },
+  background: {
+    type: Boolean,
+    default: true
+  },
+  hidden: {
+    type: Boolean,
+    default: false
+  }
+};
+export default defineComponent({
+  name: 'pagination',
+  props: props,
+  setup(props,{emit}){
+    const { page,limit,pageSizes } = toRefs(props);
+    const currentPage = computed({
+      get() {
+        return page.value;
+      },
+      set(val) {
+        emit('update:page', val)
+      }
+    });
+    const pageSize = computed({
+      get() {
+        return limit.value
+      },
+      set(val) {
+        emit('update:limit', val)
+      }
+    });
+    const handleSizeChange = (val:number) => {
+      emit('pagination', { page: currentPage.value, limit: val })
+    };
+    const handleCurrentChange=(val:number) => {
+      emit('pagination', { page: val, limit: pageSizes.value })
+    }
+    return {
+      currentPage,
+      pageSize,
+      handleSizeChange,
+      handleCurrentChange
+    }
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.pagination-container {
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>
diff --git a/src/components/svgIcon/index.vue b/src/components/svgIcon/index.vue
new file mode 100644
index 0000000..1fab298
--- /dev/null
+++ b/src/components/svgIcon/index.vue
@@ -0,0 +1,73 @@
+<template>
+	<i v-if="isShowIconSvg" class="el-icon" :style="setIconSvgStyle">
+		<component :is="getIconName" />
+	</i>
+	<div v-else-if="isShowIconImg" :style="setIconImgOutStyle">
+		<img :src="getIconName" :style="setIconSvgInsStyle" />
+	</div>
+	<i v-else :class="getIconName" :style="setIconSvgStyle" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'svgIcon',
+	props: {
+		// svg 图标组件名字
+		name: {
+			type: String,
+		},
+		// svg 大小
+		size: {
+			type: Number,
+			default: () => 14,
+		},
+		// svg 颜色
+		color: {
+			type: String,
+		},
+	},
+	setup(props) {
+		// 在线链接、本地引入地址前缀
+		const linesString = ['https', 'http', '/src', '/assets', import.meta.env.VITE_PUBLIC_PATH];
+
+		// 获取 icon 图标名称
+		const getIconName = computed(() => {
+			return props?.name;
+		});
+		// 用于判断 element plus 自带 svg 图标的显示、隐藏
+		const isShowIconSvg = computed(() => {
+			return props?.name?.startsWith('ele-');
+		});
+		// 用于判断在线链接、本地引入等图标显示、隐藏
+		const isShowIconImg = computed(() => {
+			return linesString.find((str) => props.name?.startsWith(str));
+		});
+		// 设置图标样式
+		const setIconSvgStyle = computed(() => {
+			return `font-size: ${props.size}px;color: ${props.color};`;
+		});
+		// 设置图片样式
+		const setIconImgOutStyle = computed(() => {
+			return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;`;
+		});
+		// 设置图片样式
+		// https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0
+		const setIconSvgInsStyle = computed(() => {
+			const filterStyle: string[] = [];
+			const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz'];
+			compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} 30px 0);`));
+			return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`;
+		});
+		return {
+			getIconName,
+			isShowIconSvg,
+			isShowIconImg,
+			setIconSvgStyle,
+			setIconImgOutStyle,
+			setIconSvgInsStyle,
+		};
+	},
+});
+</script>
diff --git a/src/components/ueditor/index.vue b/src/components/ueditor/index.vue
new file mode 100644
index 0000000..c4e783c
--- /dev/null
+++ b/src/components/ueditor/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="ue-content">
+    <vue-ueditor-wrap v-model="html" :config="editorConfig" :editor-id="editorId"
+                      :editorDependencies="['ueditor.config.js','ueditor.all.js']"></vue-ueditor-wrap>
+  </div>
+</template>
+
+
+<script lang="ts">
+import { getToken,baseURL } from '/@/utils/gfast';
+import {defineComponent, reactive, computed} from "vue";
+import {toolbar} from "/@/components/ueditor/model";
+
+export default defineComponent({
+  name:'GfUeditor',
+  props: {
+    editorId: {
+      type: String,
+      default: 'vueEditorId01'
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    ueditorConfig: {
+      type: Object,
+      default(){
+        return {
+          initialFrameWidth: '100%',
+          initialFrameHeight: 400,
+          maximumWords: 5000,
+          topOffset: 80,
+          zIndex:9000
+        }
+      }
+    },
+    toolBars: {
+      type: Array,
+      default() {
+        return toolbar
+      }
+    }
+  },
+  setup(props,{emit}){
+    const config = Object.assign({
+      elementPathEnabled: false,
+      maximumWords: 10000,
+      headers: {
+        Authorization: 'Bearer ' + getToken()
+      },
+      toolbars: [props.toolBars],
+      UEDITOR_HOME_URL: import.meta.env.BASE_URL + "js/ueditor/", // 访问 UEditor 静态资源的根路径，可参考常见问题1
+      serverUrl: baseURL+'api/v1/system/uEditor/action?token='+encodeURIComponent(getToken()), // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
+    },props.ueditorConfig)
+    const editorConfig = reactive(config)
+    const html =computed({
+      get:()=>{
+        return props.modelValue
+      },
+      set:(newVal)=>{
+        emit('setEditContent',newVal)
+      }
+    })
+    return {
+      html,
+      editorConfig
+    }
+  }
+})
+</script>
+
+<style scoped>
+.ue-content{line-height: normal!important;width: 100%;}
+.ue-content .ue-container{
+
+}
+</style>
diff --git a/src/components/ueditor/model/index.ts b/src/components/ueditor/model/index.ts
new file mode 100644
index 0000000..2d6263b
--- /dev/null
+++ b/src/components/ueditor/model/index.ts
@@ -0,0 +1,95 @@
+export const toolbar = [
+    "fullscreen",   // 全屏
+    "source",       // 源代码
+    "|",
+    "undo",         // 撤销
+    "redo",         // 重做
+    "|",
+    "bold",         // 加粗
+    "italic",       // 斜体
+    "underline",    // 下划线
+    "fontborder",   // 字符边框
+    "strikethrough",// 删除线
+    "superscript",  // 上标
+    "subscript",    // 下标
+    "removeformat", // 清除格式
+    "formatmatch",  // 格式刷
+    "autotypeset",  // 自动排版
+    "blockquote",   // 引用
+    "pasteplain",   // 纯文本粘贴模式
+    "|",
+    "forecolor",    // 字体颜色
+    "backcolor",    // 背景色
+    "insertorderedlist",   // 有序列表
+    "insertunorderedlist", // 无序列表
+    "selectall",    // 全选
+    "cleardoc",     // 清空文档
+    "|",
+    "rowspacingtop",// 段前距
+    "rowspacingbottom",    // 段后距
+    "lineheight",          // 行间距
+    "|",
+    "customstyle",         // 自定义标题
+    "paragraph",           // 段落格式
+    "fontfamily",          // 字体
+    "fontsize",            // 字号
+    "|",
+    "directionalityltr",   // 从左向右输入
+    "directionalityrtl",   // 从右向左输入
+    "indent",              // 首行缩进
+    "|",
+    "justifyleft",         // 居左对齐
+    "justifycenter",       // 居中对齐
+    "justifyright",
+    "justifyjustify",      // 两端对齐
+    "|",
+    "touppercase",         // 字母大写
+    "tolowercase",         // 字母小写
+    "|",
+    "link",                // 超链接
+    "unlink",              // 取消链接
+    "anchor",              // 锚点
+    "|",
+    "imagenone",           // 图片默认
+    "imageleft",           // 图片左浮动
+    "imageright",          // 图片右浮动
+    "imagecenter",         // 图片居中
+    "|",
+    "simpleupload",        // 单图上传
+    "insertimage",         // 多图上传
+    "emotion",             // 表情
+    "scrawl",              // 涂鸦
+    "insertvideo",         // 视频
+    "attachment",          // 附件
+    "insertframe",         // 插入Iframe
+    "insertcode",          // 插入代码
+    "pagebreak",           // 分页
+    "template",            // 模板
+    "background",          // 背景
+    "formula",             // 公式
+    "|",
+    "horizontal",          // 分隔线
+    "date",                // 日期
+    "time",                // 时间
+    "spechars",            // 特殊字符
+    "wordimage",           // Word图片转存
+    "|",
+    "inserttable",         // 插入表格
+    "deletetable",         // 删除表格
+    "insertparagraphbeforetable",     // 表格前插入行
+    "insertrow",           // 前插入行
+    "deleterow",           // 删除行
+    "insertcol",           // 前插入列
+    "deletecol",           // 删除列
+    "mergecells",          // 合并多个单元格
+    "mergeright",          // 右合并单元格
+    "mergedown",           // 下合并单元格
+    "splittocells",        // 完全拆分单元格
+    "splittorows",         // 拆分成行
+    "splittocols",         // 拆分成列
+    "|",
+    "print",               // 打印
+    "preview",             // 预览
+    "searchreplace",       // 查询替换
+    "help",                // 帮助
+]
diff --git a/src/components/uploadFile/index.vue b/src/components/uploadFile/index.vue
new file mode 100644
index 0000000..0cd6d5d
--- /dev/null
+++ b/src/components/uploadFile/index.vue
@@ -0,0 +1,147 @@
+<template>
+    <el-upload
+        v-model:file-list="dataFileList"
+        class="upload-demo"
+        :action="action"
+        :multiple="multiple"
+        :drag="drag"
+        :on-remove="handleRemove"
+        :before-remove="beforeRemove"
+        :limit="limit"
+        :on-exceed="handleExceed"
+        :before-upload="beforeUpload"
+        :on-change="handleChange"
+        :on-success="handleSuccess"
+        :data="dataParam"
+    >
+    <el-icon class="el-icon--upload"><ele-UploadFilled /></el-icon>
+    <div class="el-upload__text">
+      拖拽文件至此 或<em>点击上传</em>
+    </div>
+    <template #tip>
+      <div class="el-upload__tip">
+        请上传{{uploadSize}} M 以内
+      </div>
+    </template>
+  </el-upload>
+</template>
+
+<script  lang="ts">
+import {computed, defineComponent, getCurrentInstance, reactive, ref} from "vue";
+import type { UploadProps, UploadUserFile } from 'element-plus'
+import { ElMessage ,ElMessageBox} from 'element-plus'
+import {getToken} from "/@/utils/gfast";
+import _ from 'lodash'
+export default defineComponent({
+  name: 'uploadFile',
+  props: {
+    action:      { type : String, default : '' },//上传地址
+    name:         { type : String, default : 'file' },//上传文件类型
+    method:       { type : String, default : 'post' },//设置上传请求方法
+    multiple:     { type : Boolean, default : true },//是否支持多选文件
+    showFileList: { type : Boolean, default : true },//是否显示已上传文件列表
+    drag:         { type : Boolean, default : true },//是否启用拖拽上传
+    accept:       { type : String, default : '.txt,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.rar' },//上传文件格式
+    disabled:     { type : Boolean, default : false },//是否禁止
+    listType:     { type : String, default : 'picture-card' },//
+    uploadSize:   { type : Number, default : 200 },//上传文件大小M
+    limit:        { type : Number, default : 5 },//上传最大数量
+    modelValue:{
+      type:Array,
+      default:function(){
+        return []
+      }
+    },
+  },
+  setup(props,{ emit }) {
+    let  uploadedFile:Array<any> = [] ;
+    const {proxy} = <any>getCurrentInstance();
+    const dataParam = reactive({
+      token:getToken(),
+    })
+    const dataFileList = computed({
+      get: () => {
+        let value:Array<UploadUserFile> = props.modelValue as UploadUserFile[]|| [];
+        value.map((item: UploadUserFile)=>{
+          if(item.url){
+            item.url = proxy.getUpFileUrl(item.url)
+          }
+          return item
+        })
+        uploadedFile = _.cloneDeep(value)
+        return value
+      },
+      set: val => {
+        emit('upFileData', val)
+      }
+    });
+    const beforeUpload: UploadProps['beforeUpload'] = () => {
+      return true
+    };
+    const handleChange: UploadProps['onChange'] = () => {
+
+    };
+    const handleExceed = () => {
+      ElMessage.error('最多可上传'+props.limit+'个文件,已超出最大限制数。');
+    }
+    const handleSuccess: UploadProps['onSuccess'] = (
+        response,
+        uploadFile
+    ) => {
+      uploadedFile=uploadedFile.filter((item:UploadUserFile)=>{
+        return item.raw?.uid != uploadFile.raw?.uid
+      })
+      if(response.code===0){
+        uploadedFile.push({
+          name:response.data.name,
+          url:response.data.path,
+          fullUrl:response.data.fullPath,
+          fileType:response.data.type,
+          size:response.data.size
+        })
+      }else{
+        ElMessage.error(response.message)
+      }
+      setDataFileList();
+
+    };
+    const beforeRemove: UploadProps['beforeRemove'] = (uploadFile) => {
+      return ElMessageBox.confirm(
+          `您确定要删除 ${uploadFile.name} ?`,
+          '提示',
+          {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+      ).then(
+          () => true,
+          () => false
+      )
+    };
+    const handleRemove: UploadProps['onRemove'] = (file) => {//移除后
+      uploadedFile.splice(uploadedFile.findIndex((item: any) => item.name === file.name),1)
+      setDataFileList()
+    };
+    const setDataFileList = () => {
+      dataFileList.value = uploadedFile
+    };
+    return {
+      dataFileList,
+      handleSuccess,
+      beforeRemove,
+      handleRemove,
+      beforeUpload,
+      handleChange,
+      handleExceed,
+      dataParam
+    };
+  },
+});
+</script>
+<style>
+.el-upload.is-drag {
+  display: block;
+  width: 200px;height: 200px;
+}
+</style>
diff --git a/src/components/uploadImg/index.vue b/src/components/uploadImg/index.vue
new file mode 100644
index 0000000..fa6cf13
--- /dev/null
+++ b/src/components/uploadImg/index.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="up-img" v-if="limit > 1">
+    <el-upload
+        v-model:file-list="dataFileList"
+        :limit="limit"
+        :action="action"
+        :multiple="multiple"
+        :list-type="listType"
+        :on-success="handleAvatarSuccess"
+        :on-preview="handlePictureCardPreview"
+        :on-remove="handleRemove"
+        :on-exceed = "handleExceed"
+        :before-upload="beforeAvatarUpload"
+        :data="dataParam"
+    >
+      <el-icon><ele-Plus  /></el-icon>
+    </el-upload>
+
+    <el-dialog v-model="dialogVisible">
+      <img w-full :src="dialogImageUrl" alt="Preview Image" />
+    </el-dialog>
+  </div>
+  <div v-else>
+
+    <div class="up-img">
+      <el-upload
+          v-model:file-list="dataFileList"
+          :limit="limit"
+          class="avatar-uploader"
+          :action="action"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :data="dataParam"
+      >
+        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+        <el-icon v-else class="avatar-uploader-icon"><ele-Plus /></el-icon>
+      </el-upload>
+    </div>
+  </div>
+
+</template>
+
+<script lang="ts">
+import {defineComponent, ref, computed, getCurrentInstance, reactive} from 'vue';
+import type {UploadProps,UploadUserFile} from 'element-plus'
+import { ElMessage } from 'element-plus'
+import {getToken} from "/@/utils/gfast";
+import _ from 'lodash'
+export default defineComponent({
+  name: 'uploadImg',
+  props: {
+    action:      { type : String, default : '' },//上传地址
+    name:         { type : String, default : 'file' },//上传文件类型
+    limit:        { type : Number, default : 1 },//上传最大数量
+    method:       { type : String, default : 'post' },//设置上传请求方法
+    multiple:     { type : Boolean, default : true },//是否支持多选文件
+    showFileList: { type : Boolean, default : true },//是否显示已上传文件列表
+    drag:         { type : Boolean, default : false },//是否启用拖拽上传
+    // accept:       { type : String, default : '.jpg,.jpeg,.png,.gif' },//接受上传的文件类型格式
+    disabled:     { type : Boolean, default : false },//是否是否禁止上传
+    listType:     { type : String, default : 'picture-card' },//是否启用拖拽上传
+    uploadSize:   { type : Number, default : 10 },//上传文件大小
+    modelValue:{
+      type:Array,
+      default:function(){
+        return []
+      }
+    },
+  },
+  setup(props,{ emit }) {
+    const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
+    const {proxy} = <any>getCurrentInstance();
+    const dialogImageUrl = ref('')
+    const dialogVisible = ref(false)
+    const imageUrl = ref('')
+    const dataParam = reactive({
+      token:getToken(),
+    })
+    let uploadedFile:Array<any>=[];
+    const dataFileList = computed({
+      get: () => {
+        let value:Array<UploadUserFile> = props.modelValue as UploadUserFile[]|| [];
+        value.map((item: UploadUserFile)=>{
+          if(item.url){
+            item.url = proxy.getUpFileUrl(item.url)
+          }
+          return item
+        })
+        uploadedFile = _.cloneDeep(value)
+        return value
+      },
+      set: val => {
+        emit('uploadData', val)
+      }
+    });
+
+    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+      if (rawFile.type.substring(0, 5) !== 'image') {
+        ElMessage.error('请上传图片文件')
+        return false
+      } else if (rawFile.size / 1024 / 1024 > props.uploadSize) {
+        ElMessage.error('上传文件超过'+props.uploadSize+'M');
+        return false
+      }
+      return true
+    };
+    const handleRemove: UploadProps['onRemove'] = (file) => {
+      uploadedFile.splice(uploadedFile.findIndex((item: any) => item.name === file.name),1)
+      setDataFileList()
+    };
+    const  handleExceed=() => {
+      ElMessage.error('最多可上传'+props.limit+'个文件,已超出最大限制数。');
+    };
+    const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+      dialogImageUrl.value = uploadFile.url!
+      dialogVisible.value = true
+    };
+    const handleAvatarSuccess: UploadProps['onSuccess'] = (
+        response,
+        uploadFile
+    ) => {
+      if(props.limit == 1){
+        uploadedFile = [];
+        imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+      }
+      uploadedFile=uploadedFile.filter((item:UploadUserFile)=>{
+        return item.raw?.uid != uploadFile.raw?.uid
+      })
+      if(response.code===0){
+        uploadedFile.push({
+          name:response.data.name,
+          url:response.data.path,
+          fileType:response.data.type,
+          size:response.data.size
+        })
+      }else{
+        ElMessage.error(response.message)
+      }
+      setDataFileList();
+    };
+    const setDataFileList = () => {
+      dataFileList.value = uploadedFile
+    };
+    return {
+      dataFileList,
+      imageUrl,
+      baseURL,
+      dialogVisible,
+      dialogImageUrl,
+      handleExceed,
+      beforeAvatarUpload,
+      handleRemove,
+      handlePictureCardPreview,
+      handleAvatarSuccess,
+      dataParam
+    };
+  },
+});
+</script>
+
+
+<style scoped>
+.up-img :deep(.avatar-uploader .avatar) {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.up-img :deep(.avatar-uploader .el-upload) {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.up-img :deep(.avatar-uploader .el-upload:hover) {
+  border-color: var(--el-color-primary);
+}
+
+.up-img :deep(.el-icon.avatar-uploader-icon) {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..561a823
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,68 @@
+import { createI18n } from 'vue-i18n';
+import pinia from '/@/stores/index';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import zhcnLocale from 'element-plus/lib/locale/lang/zh-cn';
+import enLocale from 'element-plus/lib/locale/lang/en';
+import zhtwLocale from 'element-plus/lib/locale/lang/zh-tw';
+
+import nextZhcn from '/@/i18n/lang/zh-cn';
+import nextEn from '/@/i18n/lang/en';
+import nextZhtw from '/@/i18n/lang/zh-tw';
+
+import pagesLoginZhcn from '/@/i18n/pages/login/zh-cn';
+import pagesLoginEn from '/@/i18n/pages/login/en';
+import pagesLoginZhtw from '/@/i18n/pages/login/zh-tw';
+import pagesFormI18nZhcn from '/@/i18n/pages/formI18n/zh-cn';
+import pagesFormI18nEn from '/@/i18n/pages/formI18n/en';
+import pagesFormI18nZhtw from '/@/i18n/pages/formI18n/zh-tw';
+
+// 定义语言国际化内容
+/**
+ * 说明：
+ * /src/i18n/lang 下的 ts 为框架的国际化内容
+ * /src/i18n/pages 下的 ts 为各界面的国际化内容
+ */
+const messages = {
+	[zhcnLocale.name]: {
+		...zhcnLocale,
+		message: {
+			...nextZhcn,
+			...pagesLoginZhcn,
+			...pagesFormI18nZhcn,
+		},
+	},
+	[enLocale.name]: {
+		...enLocale,
+		message: {
+			...nextEn,
+			...pagesLoginEn,
+			...pagesFormI18nEn,
+		},
+	},
+	[zhtwLocale.name]: {
+		...zhtwLocale,
+		message: {
+			...nextZhtw,
+			...pagesLoginZhtw,
+			...pagesFormI18nZhtw,
+		},
+	},
+};
+
+// 读取 pinia 默认语言
+const stores = useThemeConfig(pinia);
+const { themeConfig } = storeToRefs(stores);
+
+// 导出语言国际化
+// https://vue-i18n.intlify.dev/guide/essentials/fallback.html#explicit-fallback-with-one-locale
+export const i18n = createI18n({
+	silentTranslationWarn: true,
+	missingWarn: false,
+	silentFallbackWarn: true,
+	fallbackWarn: false,
+	locale: themeConfig.value.globalI18n,
+	fallbackLocale: zhcnLocale.name,
+	legacy: false,
+	messages,
+});
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
new file mode 100644
index 0000000..46ae830
--- /dev/null
+++ b/src/i18n/lang/en.ts
@@ -0,0 +1,180 @@
+// 定义内容
+export default {
+	router: {
+		home: 'home',
+		system: 'system',
+		systemMenu: 'systemMenu',
+		systemRole: 'systemRole',
+		systemUser: 'systemUser',
+		systemDept: 'systemDept',
+		systemDic: 'systemDic',
+		limits: 'limits',
+		limitsFrontEnd: 'FrontEnd',
+		limitsFrontEndPage: 'FrontEndPage',
+		limitsFrontEndBtn: 'FrontEndBtn',
+		limitsBackEnd: 'BackEnd',
+		limitsBackEndEndPage: 'BackEndEndPage',
+		menu: 'menu',
+		menu1: 'menu1',
+		menu11: 'menu11',
+		menu12: 'menu12',
+		menu121: 'menu121',
+		menu122: 'menu122',
+		menu13: 'menu13',
+		menu2: 'menu2',
+		funIndex: 'function',
+		funTagsView: 'funTagsView',
+		funCountup: 'countup',
+		funWangEditor: 'wangEditor',
+		funCropper: 'cropper',
+		funQrcode: 'qrcode',
+		funEchartsMap: 'EchartsMap',
+		funPrintJs: 'PrintJs',
+		funClipboard: 'Copy cut',
+		funGridLayout: 'Drag layout',
+		funSplitpanes: 'Pane splitter',
+		funDragVerify: 'Validator',
+		pagesIndex: 'pages',
+		pagesFiltering: 'Filtering',
+		pagesFilteringDetails: 'FilteringDetails',
+		pagesFilteringDetails1: 'FilteringDetails1',
+		pagesIocnfont: 'iconfont icon',
+		pagesElement: 'element icon',
+		pagesAwesome: 'awesome icon',
+		pagesFormAdapt: 'FormAdapt',
+		pagesTableRules: 'pagesTableRules',
+		pagesFormI18n: 'FormI18n',
+		pagesFormRules: 'Multi form validation',
+		pagesDynamicForm: 'Dynamic complex form',
+		pagesWorkflow: 'Workflow',
+		pagesListAdapt: 'ListAdapt',
+		pagesWaterfall: 'Waterfall',
+		pagesSteps: 'Steps',
+		pagesPreview: 'Large preview',
+		pagesWaves: 'Wave effect',
+		pagesTree: 'tree alter table',
+		pagesDrag: 'Drag command',
+		pagesLazyImg: 'Image lazy loading',
+		makeIndex: 'makeIndex',
+		makeSelector: 'Icon selector',
+		makeNoticeBar: 'notification bar',
+		makeSvgDemo: 'Svgicon demo',
+		paramsIndex: 'Routing parameters',
+		paramsCommon: 'General routing',
+		paramsDynamic: 'Dynamic routing',
+		paramsCommonDetails: 'General routing details',
+		paramsDynamicDetails: 'Dynamic routing details',
+		chartIndex: 'chartIndex',
+		visualizingIndex: 'visualizingIndex',
+		visualizingLinkDemo1: 'visualizingLinkDemo1',
+		visualizingLinkDemo2: 'visualizingLinkDemo2',
+		personal: 'personal',
+		tools: 'tools',
+		layoutLinkView: 'LinkView',
+		layoutIfameView: 'IfameView',
+	},
+	staticRoutes: {
+		signIn: 'signIn',
+		notFound: 'notFound',
+		noPower: 'noPower',
+	},
+	user: {
+		title0: 'Component size',
+		title1: 'Language switching',
+		title2: 'Menu search',
+		title3: 'Layout configuration',
+		title4: 'news',
+		title5: 'Full screen on',
+		title6: 'Full screen off',
+		dropdownLarge: 'large',
+		dropdownDefault: 'default',
+		dropdownSmall: 'small',
+		dropdown1: 'home page',
+		dropdown2: 'Personal Center',
+		dropdown3: '404',
+		dropdown4: '401',
+		dropdown5: 'Log out',
+		dropdown6: 'Code warehouse',
+		searchPlaceholder: 'Menu search: support Chinese, routing path',
+		newTitle: 'notice',
+		newBtn: 'All read',
+		newGo: 'Go to the notification center',
+		newDesc: 'No notice',
+		logOutTitle: 'Tips',
+		logOutMessage: 'This operation will log out. Do you want to continue?',
+		logOutConfirm: 'determine',
+		logOutCancel: 'cancel',
+		logOutExit: 'Exiting',
+	},
+	tagsView: {
+		refresh: 'refresh',
+		close: 'close',
+		closeOther: 'closeOther',
+		closeAll: 'closeAll',
+		fullscreen: 'fullscreen',
+		closeFullscreen: 'closeFullscreen',
+	},
+	notFound: {
+		foundTitle: 'Wrong address input, please re-enter the address~',
+		foundMsg: 'You can check the web address first, and then re-enter or give us feedback.',
+		foundBtn: 'Back to home page',
+	},
+	noAccess: {
+		accessTitle: 'You are not authorized to operate~',
+		accessMsg: 'Contact information: add QQ group discussion 665452019',
+		accessBtn: 'Reauthorization',
+	},
+	layout: {
+		configTitle: 'Layout configuration',
+		oneTitle: 'Global Themes',
+		twoTopTitle: 'top bar set up',
+		twoMenuTitle: 'Menu set up',
+		twoColumnsTitle: 'Columns set up',
+		twoTopBar: 'Top bar background',
+		twoTopBarColor: 'Top bar default font color',
+		twoIsTopBarColorGradual: 'Top bar gradient',
+		twoMenuBar: 'Menu background',
+		twoMenuBarColor: 'Menu default font color',
+		twoIsMenuBarColorGradual: 'Menu gradient',
+		twoColumnsMenuBar: 'Column menu background',
+		twoColumnsMenuBarColor: 'Default font color bar menu',
+		twoIsColumnsMenuBarColorGradual: 'Column gradient',
+		threeTitle: 'Interface settings',
+		threeIsCollapse: 'Menu horizontal collapse',
+		threeIsUniqueOpened: 'Menu accordion',
+		threeIsFixedHeader: 'Fixed header',
+		threeIsClassicSplitMenu: 'Classic layout split menu',
+		threeIsLockScreen: 'Open the lock screen',
+		threeLockScreenTime: 'screen locking(s/s)',
+		fourTitle: 'Interface display',
+		fourIsShowLogo: 'Sidebar logo',
+		fourIsBreadcrumb: 'Open breadcrumb',
+		fourIsBreadcrumbIcon: 'Open breadcrumb icon',
+		fourIsTagsview: 'Open tagsview',
+		fourIsTagsviewIcon: 'Open tagsview Icon',
+		fourIsCacheTagsView: 'Enable tagsview cache',
+		fourIsSortableTagsView: 'Enable tagsview drag',
+		fourIsShareTagsView: 'Enable tagsview sharing',
+		fourIsFooter: 'Open footer',
+		fourIsGrayscale: 'Grey model',
+		fourIsInvert: 'Color weak mode',
+		fourIsDark: 'Dark Mode',
+		fourIsWartermark: 'Turn on watermark',
+		fourWartermarkText: 'Watermark copy',
+		fiveTitle: 'Other settings',
+		fiveTagsStyle: 'Tagsview style',
+		fiveAnimation: 'page animation',
+		fiveColumnsAsideStyle: 'Column style',
+		fiveColumnsAsideLayout: 'Column layout',
+		sixTitle: 'Layout switch',
+		sixDefaults: 'One',
+		sixClassic: 'Two',
+		sixTransverse: 'Three',
+		sixColumns: 'Four',
+		tipText: 'Click the button below to copy the layout configuration to `/src/stores/themeConfig.ts` It has been modified in.',
+		copyText: 'replication configuration',
+		resetText: 'restore default',
+		copyTextSuccess: 'Copy succeeded!',
+		copyTextError: 'Copy failed!',
+	},
+};
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
new file mode 100644
index 0000000..79ef328
--- /dev/null
+++ b/src/i18n/lang/zh-cn.ts
@@ -0,0 +1,180 @@
+// 定义内容
+export default {
+	router: {
+		home: '首页',
+		system: '系统设置',
+		systemMenu: '菜单管理',
+		systemRole: '角色管理',
+		systemUser: '用户管理',
+		systemDept: '部门管理',
+		systemDic: '字典管理',
+		limits: '权限管理',
+		limitsFrontEnd: '前端控制',
+		limitsFrontEndPage: '页面权限',
+		limitsFrontEndBtn: '按钮权限',
+		limitsBackEnd: '后端控制',
+		limitsBackEndEndPage: '页面权限',
+		menu: '菜单嵌套',
+		menu1: '菜单1',
+		menu11: '菜单11',
+		menu12: '菜单12',
+		menu121: '菜单121',
+		menu122: '菜单122',
+		menu13: '菜单13',
+		menu2: '菜单2',
+		funIndex: '功能',
+		funTagsView: 'tagsView 操作',
+		funCountup: '数字滚动',
+		funWangEditor: 'Editor 编辑器',
+		funCropper: '图片裁剪',
+		funQrcode: '二维码生成',
+		funEchartsMap: '地理坐标/地图',
+		funPrintJs: '页面打印',
+		funClipboard: '复制剪切',
+		funGridLayout: '拖拽布局',
+		funSplitpanes: '窗格拆分器',
+		funDragVerify: '验证器',
+		pagesIndex: '页面',
+		pagesFiltering: '过滤筛选组件',
+		pagesFilteringDetails: '过滤筛选组件详情',
+		pagesFilteringDetails1: '过滤筛选组件详情111',
+		pagesIocnfont: 'ali 字体图标',
+		pagesElement: 'ele 字体图标',
+		pagesAwesome: 'awe 字体图标',
+		pagesFormAdapt: '表单自适应',
+		pagesTableRules: '表单表格验证',
+		pagesFormI18n: '表单国际化',
+		pagesFormRules: '多表单验证',
+		pagesDynamicForm: '动态复杂表单',
+		pagesWorkflow: '工作流',
+		pagesListAdapt: '列表自适应',
+		pagesWaterfall: '瀑布屏',
+		pagesSteps: '步骤条',
+		pagesPreview: '大图预览',
+		pagesWaves: '波浪效果',
+		pagesTree: '树形改表格',
+		pagesDrag: '拖动指令',
+		pagesLazyImg: '图片懒加载',
+		makeIndex: '组件封装',
+		makeSelector: '图标选择器',
+		makeNoticeBar: '滚动通知栏',
+		makeSvgDemo: 'svgIcon 演示',
+		paramsIndex: '路由参数',
+		paramsCommon: '普通路由',
+		paramsDynamic: '动态路由',
+		paramsCommonDetails: '普通路由详情',
+		paramsDynamicDetails: '动态路由详情',
+		chartIndex: '大数据图表',
+		visualizingIndex: '数据可视化',
+		visualizingLinkDemo1: '数据可视化演示1',
+		visualizingLinkDemo2: '数据可视化演示2',
+		personal: '个人中心',
+		tools: '工具类集合',
+		layoutLinkView: '外链',
+		layoutIfameView: '内嵌 iframe',
+	},
+	staticRoutes: {
+		signIn: '登录',
+		notFound: '找不到此页面',
+		noPower: '没有权限',
+	},
+	user: {
+		title0: '组件大小',
+		title1: '语言切换',
+		title2: '菜单搜索',
+		title3: '布局配置',
+		title4: '消息',
+		title5: '开全屏',
+		title6: '关全屏',
+		dropdownLarge: '大型',
+		dropdownDefault: '默认',
+		dropdownSmall: '小型',
+		dropdown1: '首页',
+		dropdown2: '个人中心',
+		dropdown3: '404',
+		dropdown4: '401',
+		dropdown5: '退出登录',
+		dropdown6: '代码仓库',
+		searchPlaceholder: '菜单搜索：支持中文、路由路径',
+		newTitle: '通知',
+		newBtn: '全部已读',
+		newGo: '前往通知中心',
+		newDesc: '暂无通知',
+		logOutTitle: '提示',
+		logOutMessage: '此操作将退出登录, 是否继续?',
+		logOutConfirm: '确定',
+		logOutCancel: '取消',
+		logOutExit: '退出中',
+	},
+	tagsView: {
+		refresh: '刷新',
+		close: '关闭',
+		closeOther: '关闭其它',
+		closeAll: '全部关闭',
+		fullscreen: '当前页全屏',
+		closeFullscreen: '关闭全屏',
+	},
+	notFound: {
+		foundTitle: '地址输入错误，请重新输入地址~',
+		foundMsg: '您可以先检查网址，然后重新输入或给我们反馈问题。',
+		foundBtn: '返回首页',
+	},
+	noAccess: {
+		accessTitle: '您未被授权，没有操作权限~',
+		accessMsg: '联系方式：加QQ群探讨 665452019',
+		accessBtn: '重新授权',
+	},
+	layout: {
+		configTitle: '布局配置',
+		oneTitle: '全局主题',
+		twoTopTitle: '顶栏设置',
+		twoMenuTitle: '菜单设置',
+		twoColumnsTitle: '分栏设置',
+		twoTopBar: '顶栏背景',
+		twoTopBarColor: '顶栏默认字体颜色',
+		twoIsTopBarColorGradual: '顶栏背景渐变',
+		twoMenuBar: '菜单背景',
+		twoMenuBarColor: '菜单默认字体颜色',
+		twoIsMenuBarColorGradual: '菜单背景渐变',
+		twoColumnsMenuBar: '分栏菜单背景',
+		twoColumnsMenuBarColor: '分栏菜单默认字体颜色',
+		twoIsColumnsMenuBarColorGradual: '分栏菜单背景渐变',
+		threeTitle: '界面设置',
+		threeIsCollapse: '菜单水平折叠',
+		threeIsUniqueOpened: '菜单手风琴',
+		threeIsFixedHeader: '固定 Header',
+		threeIsClassicSplitMenu: '经典布局分割菜单',
+		threeIsLockScreen: '开启锁屏',
+		threeLockScreenTime: '自动锁屏(s/秒)',
+		fourTitle: '界面显示',
+		fourIsShowLogo: '侧边栏 Logo',
+		fourIsBreadcrumb: '开启 Breadcrumb',
+		fourIsBreadcrumbIcon: '开启 Breadcrumb 图标',
+		fourIsTagsview: '开启 Tagsview',
+		fourIsTagsviewIcon: '开启 Tagsview 图标',
+		fourIsCacheTagsView: '开启 TagsView 缓存',
+		fourIsSortableTagsView: '开启 TagsView 拖拽',
+		fourIsShareTagsView: '开启 TagsView 共用',
+		fourIsFooter: '开启 Footer',
+		fourIsGrayscale: '灰色模式',
+		fourIsInvert: '色弱模式',
+		fourIsDark: '深色模式',
+		fourIsWartermark: '开启水印',
+		fourWartermarkText: '水印文案',
+		fiveTitle: '其它设置',
+		fiveTagsStyle: 'Tagsview 风格',
+		fiveAnimation: '主页面切换动画',
+		fiveColumnsAsideStyle: '分栏高亮风格',
+		fiveColumnsAsideLayout: '分栏布局风格',
+		sixTitle: '布局切换',
+		sixDefaults: '默认',
+		sixClassic: '经典',
+		sixTransverse: '横向',
+		sixColumns: '分栏',
+		tipText: '点击下方按钮，复制布局配置去 `src/stores/themeConfig.ts` 中修改。',
+		copyText: '一键复制配置',
+		resetText: '一键恢复默认',
+		copyTextSuccess: '复制成功！',
+		copyTextError: '复制失败！',
+	},
+};
diff --git a/src/i18n/lang/zh-tw.ts b/src/i18n/lang/zh-tw.ts
new file mode 100644
index 0000000..d900abb
--- /dev/null
+++ b/src/i18n/lang/zh-tw.ts
@@ -0,0 +1,180 @@
+// 定义内容
+export default {
+	router: {
+		home: '首頁',
+		system: '系統設置',
+		systemMenu: '選單管理',
+		systemRole: '角色管理',
+		systemUser: '用戶管理',
+		systemDept: '部門管理',
+		systemDic: '字典管理',
+		limits: '許可權管理',
+		limitsFrontEnd: '前端控制',
+		limitsFrontEndPage: '頁面許可權',
+		limitsFrontEndBtn: '按鈕許可權',
+		limitsBackEnd: '後端控制',
+		limitsBackEndEndPage: '頁面許可權',
+		menu: '選單嵌套',
+		menu1: '選單1',
+		menu11: '選單11',
+		menu12: '選單12',
+		menu121: '選單121',
+		menu122: '選單122',
+		menu13: '選單13',
+		menu2: '選單2',
+		funIndex: '功能',
+		funTagsView: 'tagsView 操作',
+		funCountup: '數位滾動',
+		funWangEditor: 'Editor 編輯器',
+		funCropper: '圖片裁剪',
+		funQrcode: '二維碼生成',
+		funEchartsMap: '地理座標/地圖',
+		funPrintJs: '頁面列印',
+		funClipboard: '複製剪切',
+		funGridLayout: '拖拽佈局',
+		funSplitpanes: '窗格折開器',
+		funDragVerify: '驗證器',
+		pagesIndex: '頁面',
+		pagesFiltering: '過濾篩選組件',
+		pagesFilteringDetails: '過濾篩選組件詳情',
+		pagesFilteringDetails1: '過濾篩選組件詳情111',
+		pagesIocnfont: 'ali 字體圖標',
+		pagesElement: 'ele 字體圖標',
+		pagesAwesome: 'awe 字體圖標',
+		pagesFormAdapt: '表單自我調整',
+		pagesTableRules: '表單表格驗證',
+		pagesFormI18n: '表單國際化',
+		pagesFormRules: '多表單驗證',
+		pagesDynamicForm: '動態複雜表單',
+		pagesWorkflow: '工作流',
+		pagesListAdapt: '清單自我調整',
+		pagesWaterfall: '瀑布屏',
+		pagesSteps: '步驟條',
+		pagesPreview: '大圖預覽',
+		pagesWaves: '波浪效果',
+		pagesTree: '樹形改表格',
+		pagesDrag: '拖動指令',
+		pagesLazyImg: '圖片懶加載',
+		makeIndex: '組件封裝',
+		makeSelector: '圖標選擇器',
+		makeNoticeBar: '滾動通知欄',
+		makeSvgDemo: 'svgIcon 演示',
+		paramsIndex: '路由參數',
+		paramsCommon: '普通路由',
+		paramsDynamic: '動態路由',
+		paramsCommonDetails: '普通路由詳情',
+		paramsDynamicDetails: '動態路由詳情',
+		chartIndex: '大資料圖表',
+		visualizingIndex: '數據視覺化',
+		visualizingLinkDemo1: '數據視覺化演示1',
+		visualizingLinkDemo2: '數據視覺化演示2',
+		personal: '個人中心',
+		tools: '工具類集合',
+		layoutLinkView: '外鏈',
+		layoutIfameView: '内嵌 iframe',
+	},
+	staticRoutes: {
+		signIn: '登入',
+		notFound: '找不到此頁面',
+		noPower: '沒有許可權',
+	},
+	user: {
+		title0: '組件大小',
+		title1: '語言切換',
+		title2: '選單蒐索',
+		title3: '佈局配寘',
+		title4: '消息',
+		title5: '開全屏',
+		title6: '關全屏',
+		dropdownLarge: '大型',
+		dropdownDefault: '默認',
+		dropdownSmall: '小型',
+		dropdown1: '首頁',
+		dropdown2: '個人中心',
+		dropdown3: '404',
+		dropdown4: '401',
+		dropdown5: '登出',
+		dropdown6: '程式碼倉庫',
+		searchPlaceholder: '選單蒐索：支援中文、路由路徑',
+		newTitle: '通知',
+		newBtn: '全部已讀',
+		newGo: '前往通知中心',
+		newDesc: '暫無通知',
+		logOutTitle: '提示',
+		logOutMessage: '此操作將登出，是否繼續？',
+		logOutConfirm: '確定',
+		logOutCancel: '取消',
+		logOutExit: '退出中',
+	},
+	tagsView: {
+		refresh: '重繪',
+		close: '關閉',
+		closeOther: '關閉其它',
+		closeAll: '全部關閉',
+		fullscreen: '當前頁全屏',
+		closeFullscreen: '關閉全屏',
+	},
+	notFound: {
+		foundTitle: '地址輸入錯誤，請重新輸入地址~',
+		foundMsg: '您可以先檢查網址，然後重新輸入或給我們迴響問題。',
+		foundBtn: '返回首頁',
+	},
+	noAccess: {
+		accessTitle: '您未被授權，沒有操作許可權~',
+		accessMsg: '聯繫方式：加QQ群探討665452019',
+		accessBtn: '重新授權',
+	},
+	layout: {
+		configTitle: '佈局配寘',
+		oneTitle: '全域主題',
+		twoTopTitle: '頂欄設定',
+		twoMenuTitle: '選單設定',
+		twoColumnsTitle: '分欄設定',
+		twoTopBar: '頂欄背景',
+		twoTopBarColor: '頂欄默認字體顏色',
+		twoIsTopBarColorGradual: '頂欄背景漸變',
+		twoMenuBar: '選單背景',
+		twoMenuBarColor: '選單默認字體顏色',
+		twoIsMenuBarColorGradual: '選單背景漸變',
+		twoColumnsMenuBar: '分欄選單背景',
+		twoColumnsMenuBarColor: '分欄選單默認字體顏色',
+		twoIsColumnsMenuBarColorGradual: '分欄選單背景漸變',
+		threeTitle: '介面設定',
+		threeIsCollapse: '選單水准折疊',
+		threeIsUniqueOpened: '選單手風琴',
+		threeIsFixedHeader: '固定 Header',
+		threeIsClassicSplitMenu: '經典佈局分割選單',
+		threeIsLockScreen: '開啟鎖屏',
+		threeLockScreenTime: '自動鎖屏(s/秒)',
+		fourTitle: '介面顯示',
+		fourIsShowLogo: '側邊欄 Logo',
+		fourIsBreadcrumb: '開啟 Breadcrumb',
+		fourIsBreadcrumbIcon: '開啟 Breadcrumb 圖標',
+		fourIsTagsview: '開啟 Tagsview',
+		fourIsTagsviewIcon: '開啟 Tagsview 圖標',
+		fourIsCacheTagsView: '開啟 TagsView 緩存',
+		fourIsSortableTagsView: '開啟 TagsView 拖拽',
+		fourIsShareTagsView: '開啟 TagsView 共用',
+		fourIsFooter: '開啟 Footer',
+		fourIsGrayscale: '灰色模式',
+		fourIsInvert: '色弱模式',
+		fourIsDark: '深色模式',
+		fourIsWartermark: '開啟浮水印',
+		fourWartermarkText: '浮水印文案',
+		fiveTitle: '其它設定',
+		fiveTagsStyle: 'Tagsview 風格',
+		fiveAnimation: '主頁面切換動畫',
+		fiveColumnsAsideStyle: '分欄高亮風格',
+		fiveColumnsAsideLayout: '分欄佈局風格',
+		sixTitle: '佈局切換',
+		sixDefaults: '默認',
+		sixClassic: '經典',
+		sixTransverse: '橫向',
+		sixColumns: '分欄',
+		tipText: '點擊下方按鈕，複製佈局配寘去`src/stores/themeConfig.ts`中修改。',
+		copyText: '一鍵複製配寘',
+		resetText: '一鍵恢復默認',
+		copyTextSuccess: '複製成功！',
+		copyTextError: '複製失敗！',
+	},
+};
diff --git a/src/i18n/pages/formI18n/en.ts b/src/i18n/pages/formI18n/en.ts
new file mode 100644
index 0000000..b3c54d6
--- /dev/null
+++ b/src/i18n/pages/formI18n/en.ts
@@ -0,0 +1,13 @@
+// 定义内容
+export default {
+	formI18nLabel: {
+		name: 'name',
+		email: 'email',
+		autograph: 'autograph',
+	},
+	formI18nPlaceholder: {
+		name: 'Please enter your name',
+		email: 'Please enter the users Department',
+		autograph: 'Please enter the login account name',
+	},
+};
diff --git a/src/i18n/pages/formI18n/zh-cn.ts b/src/i18n/pages/formI18n/zh-cn.ts
new file mode 100644
index 0000000..0bed3ec
--- /dev/null
+++ b/src/i18n/pages/formI18n/zh-cn.ts
@@ -0,0 +1,13 @@
+// 定义内容
+export default {
+	formI18nLabel: {
+		name: '姓名',
+		email: '用户归属部门',
+		autograph: '登陆账户名',
+	},
+	formI18nPlaceholder: {
+		name: '请输入姓名',
+		email: '请输入用户归属部门',
+		autograph: '请输入登陆账户名',
+	},
+};
diff --git a/src/i18n/pages/formI18n/zh-tw.ts b/src/i18n/pages/formI18n/zh-tw.ts
new file mode 100644
index 0000000..393ac03
--- /dev/null
+++ b/src/i18n/pages/formI18n/zh-tw.ts
@@ -0,0 +1,13 @@
+// 定义内容
+export default {
+	formI18nLabel: {
+		name: '姓名',
+		email: '用戶歸屬部門',
+		autograph: '登入帳戶名',
+	},
+	formI18nPlaceholder: {
+		name: '請輸入姓名',
+		email: '請輸入用戶歸屬部門',
+		autograph: '請輸入登入帳戶名',
+	},
+};
diff --git a/src/i18n/pages/login/en.ts b/src/i18n/pages/login/en.ts
new file mode 100644
index 0000000..2654a18
--- /dev/null
+++ b/src/i18n/pages/login/en.ts
@@ -0,0 +1,29 @@
+// 定义内容
+export default {
+	label: {
+		one1: 'User name login',
+		two2: 'Mobile number',
+	},
+	link: {
+		one3: 'Third party login',
+		two4: 'Links',
+	},
+	account: {
+		accountPlaceholder1: 'The user name admin or not is common',
+		accountPlaceholder2: 'Password: 123456',
+		accountPlaceholder3: 'Please enter the verification code',
+		accountBtnText: 'Sign in',
+	},
+	mobile: {
+		placeholder1: 'Please input mobile phone number',
+		placeholder2: 'Please enter the verification code',
+		codeText: 'Get code',
+		btnText: 'Sign in',
+		msgText:
+			'Warm tip: it is recommended to use Google, Microsoft edge, version 79.0.1072.62 and above browsers, and 360 browser, please use speed mode',
+	},
+	scan: {
+		text: 'Open the mobile phone to scan and quickly log in / register',
+	},
+	signInText: 'welcome back!',
+};
diff --git a/src/i18n/pages/login/zh-cn.ts b/src/i18n/pages/login/zh-cn.ts
new file mode 100644
index 0000000..3148c1f
--- /dev/null
+++ b/src/i18n/pages/login/zh-cn.ts
@@ -0,0 +1,28 @@
+// 定义内容
+export default {
+	label: {
+		one1: '用户名登录',
+		two2: '手机号登录',
+	},
+	link: {
+		one3: '第三方登录',
+		two4: '友情链接',
+	},
+	account: {
+		accountPlaceholder1: '用户名 admin',
+		accountPlaceholder2: '密码：123456',
+		accountPlaceholder3: '请输入验证码',
+		accountBtnText: '登 录',
+	},
+	mobile: {
+		placeholder1: '请输入手机号',
+		placeholder2: '请输入验证码',
+		codeText: '获取验证码',
+		btnText: '登 录',
+		msgText: '* 温馨提示：建议使用谷歌、Microsoft Edge，版本 79.0.1072.62 及以上浏览器，360浏览器请使用极速模式',
+	},
+	scan: {
+		text: '打开手机扫一扫，快速登录/注册',
+	},
+	signInText: '欢迎回来！',
+};
diff --git a/src/i18n/pages/login/zh-tw.ts b/src/i18n/pages/login/zh-tw.ts
new file mode 100644
index 0000000..138e8c8
--- /dev/null
+++ b/src/i18n/pages/login/zh-tw.ts
@@ -0,0 +1,28 @@
+// 定义内容
+export default {
+	label: {
+		one1: '用戶名登入',
+		two2: '手機號登入',
+	},
+	link: {
+		one3: '協力廠商登入',
+		two4: '友情連結',
+	},
+	account: {
+		accountPlaceholder1: '用戶名admin或不輸均為common',
+		accountPlaceholder2: '密碼：123456',
+		accountPlaceholder3: '請輸入驗證碼',
+		accountBtnText: '登入',
+	},
+	mobile: {
+		placeholder1: '請輸入手機號',
+		placeholder2: '請輸入驗證碼',
+		codeText: '獲取驗證碼',
+		btnText: '登入',
+		msgText: '* 溫馨提示：建議使用穀歌、Microsoft Edge，版本79.0.1072.62及以上瀏覽器，360瀏覽器請使用極速模式',
+	},
+	scan: {
+		text: '打開手機掃一掃，快速登錄/注册',
+	},
+	signInText: '歡迎回來！',
+};
diff --git a/src/layout/component/aside.vue b/src/layout/component/aside.vue
new file mode 100644
index 0000000..d4ee363
--- /dev/null
+++ b/src/layout/component/aside.vue
@@ -0,0 +1,163 @@
+<template>
+	<div class="h100" v-show="!isTagsViewCurrenFull">
+		<el-aside class="layout-aside" :class="setCollapseStyle">
+			<Logo v-if="setShowLogo" />
+			<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef" @mouseenter="onAsideEnterLeave(true)" @mouseleave="onAsideEnterLeave(false)">
+				<Vertical :menuList="menuList" />
+			</el-scrollbar>
+		</el-aside>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import pinia from '/@/stores/index';
+import { useRoutesList } from '/@/stores/routesList';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import Logo from '/@/layout/logo/index.vue';
+import Vertical from '/@/layout/navMenu/vertical.vue';
+
+export default defineComponent({
+	name: 'layoutAside',
+	components: { Logo, Vertical },
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const stores = useRoutesList();
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { routesList } = storeToRefs(stores);
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const state = reactive({
+			menuList: [],
+			clientWidth: 0,
+		});
+		// 设置菜单展开/收起时的宽度
+		const setCollapseStyle = computed(() => {
+			const { layout, isCollapse, menuBar } = themeConfig.value;
+			const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
+			const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
+			// 判断是否是手机端
+			if (state.clientWidth <= 1000) {
+				if (isCollapse) {
+					document.body.setAttribute('class', 'el-popup-parent--hidden');
+					const asideEle = document.querySelector('.layout-container') as HTMLElement;
+					const modeDivs = document.createElement('div');
+					modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
+					asideEle.appendChild(modeDivs);
+					modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
+					return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
+				} else {
+					// 关闭弹窗
+					closeLayoutAsideMobileMode();
+					return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
+				}
+			} else {
+				if (layout === 'columns') {
+					// 分栏布局，菜单收起时宽度给 1px
+					if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
+					else return [asideBrColor, 'layout-aside-pc-220'];
+				} else {
+					// 其它布局给 64px
+					if (isCollapse) return [asideBrColor, 'layout-aside-pc-64'];
+					else return [asideBrColor, 'layout-aside-pc-220'];
+				}
+			}
+		});
+		// 关闭移动端蒙版
+		const closeLayoutAsideMobileMode = () => {
+			const el = document.querySelector('.layout-aside-mobile-mode');
+			el?.setAttribute('style', 'animation: error-img-two 0.3s');
+			setTimeout(() => {
+				el?.parentNode?.removeChild(el);
+			}, 300);
+			const clientWidth = document.body.clientWidth;
+			if (clientWidth < 1000) themeConfig.value.isCollapse = false;
+			document.body.setAttribute('class', '');
+		};
+		// 设置显示/隐藏 logo
+		const setShowLogo = computed(() => {
+			let { layout, isShowLogo } = themeConfig.value;
+			return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
+		});
+		// 设置/过滤路由（非静态路由/是否显示在菜单中）
+		const setFilterRoutes = () => {
+			if (themeConfig.value.layout === 'columns') return false;
+			(state.menuList as any) = filterRoutesFun(routesList.value);
+		};
+		// 路由过滤递归函数
+		const filterRoutesFun = (arr: Array<string>) => {
+			return arr
+				.filter((item: any) => !item.meta.isHide)
+				.map((item: any) => {
+					item = Object.assign({}, item);
+					if (item.children) item.children = filterRoutesFun(item.children);
+					return item;
+				});
+		};
+		// 设置菜单导航是否固定（移动端）
+		const initMenuFixed = (clientWidth: number) => {
+			state.clientWidth = clientWidth;
+		};
+		// 鼠标移入、移出
+		const onAsideEnterLeave = (bool: Boolean) => {
+			let { layout } = themeConfig.value;
+			if (layout !== 'columns') return false;
+			if (!bool) proxy.mittBus.emit('restoreDefault');
+			stores.setColumnsMenuHover(bool);
+		};
+		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+		watch(themeConfig.value, (val) => {
+			if (val.isShowLogoChange !== val.isShowLogo) {
+				if (!proxy.$refs.layoutAsideScrollbarRef) return false;
+				proxy.$refs.layoutAsideScrollbarRef.update();
+			}
+		});
+		// 监听vuex值的变化，动态赋值给菜单中
+		watch(
+			pinia.state,
+			(val) => {
+				let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
+				if (layout === 'classic' && isClassicSplitMenu) return false;
+				setFilterRoutes();
+			},
+			{
+				deep: true,
+			}
+		);
+		// 页面加载前
+		onBeforeMount(() => {
+			initMenuFixed(document.body.clientWidth);
+			setFilterRoutes();
+			// 此界面不需要取消监听(proxy.mittBus.off('setSendColumnsChildren))
+			// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
+			proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
+				state.menuList = res.children;
+			});
+			proxy.mittBus.on('setSendClassicChildren', (res: any) => {
+				let { layout, isClassicSplitMenu } = themeConfig.value;
+				if (layout === 'classic' && isClassicSplitMenu) {
+					state.menuList = [];
+					state.menuList = res.children;
+				}
+			});
+			proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
+				setFilterRoutes();
+			});
+			proxy.mittBus.on('layoutMobileResize', (res: any) => {
+				initMenuFixed(res.clientWidth);
+				closeLayoutAsideMobileMode();
+			});
+		});
+		return {
+			setCollapseStyle,
+			setShowLogo,
+			isTagsViewCurrenFull,
+			onAsideEnterLeave,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/layout/component/columnsAside.vue b/src/layout/component/columnsAside.vue
new file mode 100644
index 0000000..7fd7806
--- /dev/null
+++ b/src/layout/component/columnsAside.vue
@@ -0,0 +1,292 @@
+<template>
+	<div class="layout-columns-aside">
+		<el-scrollbar>
+			<ul @mouseleave="onColumnsAsideMenuMouseleave()">
+				<li
+					v-for="(v, k) in columnsAsideList"
+					:key="k"
+					@click="onColumnsAsideMenuClick(v, k)"
+					@mouseenter="onColumnsAsideMenuMouseenter(v, k)"
+					:ref="
+						(el) => {
+							if (el) columnsAsideOffsetTopRefs[k] = el;
+						}
+					"
+					:class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }"
+					:title="$t(v.meta.title)"
+				>
+					<div :class="themeConfig.columnsAsideLayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
+						<SvgIcon :name="v.meta.icon" />
+						<div class="columns-vertical-title font12">
+							{{
+								$t(v.meta.title) && $t(v.meta.title).length >= 4
+									? $t(v.meta.title).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3)
+									: $t(v.meta.title)
+							}}
+						</div>
+					</div>
+					<div :class="themeConfig.columnsAsideLayout" v-else>
+						<a :href="v.meta.isLink" target="_blank">
+							<SvgIcon :name="v.meta.icon" />
+							<div class="columns-vertical-title font12">
+								{{
+									$t(v.meta.title) && $t(v.meta.title).length >= 4
+										? $t(v.meta.title).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3)
+										: $t(v.meta.title)
+								}}
+							</div>
+						</a>
+					</div>
+				</li>
+				<div ref="columnsAsideActiveRef" :class="themeConfig.columnsAsideStyle"></div>
+			</ul>
+		</el-scrollbar>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, ref, onMounted, nextTick, getCurrentInstance, watch, onUnmounted, defineComponent } from 'vue';
+import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import pinia from '/@/stores/index';
+import { useRoutesList } from '/@/stores/routesList';
+import { useThemeConfig } from '/@/stores/themeConfig';
+
+// 定义接口来定义对象的类型
+interface ColumnsAsideState {
+	columnsAsideList: any[];
+	liIndex: number;
+	liOldIndex: null | number;
+	liHoverIndex: null | number;
+	liOldPath: null | string;
+	difference: number;
+	routeSplit: string[];
+}
+
+export default defineComponent({
+	name: 'layoutColumnsAside',
+	setup() {
+		const columnsAsideOffsetTopRefs: any = ref([]);
+		const columnsAsideActiveRef = ref();
+		const { proxy } = <any>getCurrentInstance();
+		const stores = useRoutesList();
+		const storesThemeConfig = useThemeConfig();
+		const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const route = useRoute();
+		const router = useRouter();
+		const state = reactive<ColumnsAsideState>({
+			columnsAsideList: [],
+			liIndex: 0,
+			liOldIndex: null,
+			liHoverIndex: null,
+			liOldPath: null,
+			difference: 0,
+			routeSplit: [],
+		});
+		// 设置菜单高亮位置移动
+		const setColumnsAsideMove = (k: number) => {
+			state.liIndex = k;
+			columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
+		};
+		// 菜单高亮点击事件
+		const onColumnsAsideMenuClick = (v: Object, k: number) => {
+			setColumnsAsideMove(k);
+			let { path, redirect } = v as any;
+			if (redirect) router.push(redirect);
+			else router.push(path);
+		};
+		// 鼠标移入时，显示当前的子级菜单
+		const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
+			let { path } = v;
+			state.liOldPath = path;
+			state.liOldIndex = k;
+			state.liHoverIndex = k;
+			proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(path));
+			stores.setColumnsMenuHover(false);
+			stores.setColumnsNavHover(true);
+		};
+		// 鼠标移走时，显示原来的子级菜单
+		const onColumnsAsideMenuMouseleave = async () => {
+			await stores.setColumnsNavHover(false);
+			// 添加延时器，防止拿到的 store.state.routesList 值不是最新的
+			setTimeout(() => {
+				if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit('restoreDefault');
+			}, 100);
+		};
+		// 设置高亮动态位置
+		const onColumnsAsideDown = (k: number) => {
+			nextTick(() => {
+				setColumnsAsideMove(k);
+			});
+		};
+		// 设置/过滤路由（非静态路由/是否显示在菜单中）
+		const setFilterRoutes = () => {
+			state.columnsAsideList = filterRoutesFun(routesList.value);
+			const resData: any = setSendChildren(route.path);
+			if (Object.keys(resData).length <= 0) return false;
+			onColumnsAsideDown(resData.item[0].k);
+			proxy.mittBus.emit('setSendColumnsChildren', resData);
+		};
+		// 传送当前子级数据到菜单中
+		const setSendChildren = (path: string) => {
+			const currentPathSplit = path.split('/');
+			let currentData: any = {};
+			state.columnsAsideList.map((v: any, k: number) => {
+				if (v.path === `/${currentPathSplit[1]}`) {
+					v['k'] = k;
+					currentData['item'] = [{ ...v }];
+					currentData['children'] = [{ ...v }];
+					if (v.children) currentData['children'] = v.children;
+				}
+			});
+			return currentData;
+		};
+		// 路由过滤递归函数
+		const filterRoutesFun = (arr: Array<string>) => {
+			return arr
+				.filter((item: any) => !item.meta.isHide)
+				.map((item: any) => {
+					item = Object.assign({}, item);
+					if (item.children) item.children = filterRoutesFun(item.children);
+					return item;
+				});
+		};
+		// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
+		const setColumnsMenuHighlight = (path: string) => {
+			state.routeSplit = path.split('/');
+			state.routeSplit.shift();
+			const routeFirst = `/${state.routeSplit[0]}`;
+			const currentSplitRoute = state.columnsAsideList.find((v: any) => v.path === routeFirst);
+			if (!currentSplitRoute) return false;
+			// 延迟拿值，防止取不到
+			setTimeout(() => {
+				onColumnsAsideDown((<any>currentSplitRoute).k);
+			}, 0);
+		};
+		// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
+		watch(
+			pinia.state,
+			(val) => {
+				val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
+				if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
+					state.liHoverIndex = null;
+					proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
+				} else {
+					state.liHoverIndex = state.liOldIndex;
+					if (!state.liOldPath) return false;
+					proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
+				}
+			},
+			{
+				deep: true,
+			}
+		);
+		// 页面加载时
+		onMounted(() => {
+			setFilterRoutes();
+			// 销毁变量，防止鼠标再次移入时，保留了上次的记录
+			proxy.mittBus.on('restoreDefault', () => {
+				state.liOldIndex = null;
+				state.liOldPath = null;
+			});
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			proxy.mittBus.off('restoreDefault', () => {});
+		});
+		// 路由更新时
+		onBeforeRouteUpdate((to) => {
+			setColumnsMenuHighlight(to.path);
+			proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
+		});
+		return {
+			themeConfig,
+			columnsAsideOffsetTopRefs,
+			columnsAsideActiveRef,
+			onColumnsAsideDown,
+			onColumnsAsideMenuClick,
+			onColumnsAsideMenuMouseenter,
+			onColumnsAsideMenuMouseleave,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-columns-aside {
+	width: 70px;
+	height: 100%;
+	background: var(--next-bg-columnsMenuBar);
+	ul {
+		position: relative;
+		li {
+			color: var(--next-bg-columnsMenuBarColor);
+			width: 100%;
+			height: 50px;
+			text-align: center;
+			display: flex;
+			cursor: pointer;
+			position: relative;
+			z-index: 1;
+			.columns-vertical {
+				margin: auto;
+				.columns-vertical-title {
+					padding-top: 1px;
+				}
+			}
+			.columns-horizontal {
+				display: flex;
+				height: 50px;
+				width: 100%;
+				align-items: center;
+				padding: 0 5px;
+				i {
+					margin-right: 3px;
+				}
+				a {
+					display: flex;
+					.columns-horizontal-title {
+						padding-top: 1px;
+					}
+				}
+			}
+			a {
+				text-decoration: none;
+				color: var(--next-bg-columnsMenuBarColor);
+			}
+		}
+		.layout-columns-active {
+			color: var(--next-bg-columnsMenuBarColor) !important;
+			transition: 0.3s ease-in-out;
+		}
+		.layout-columns-hover {
+			color: var(--el-color-primary);
+			a {
+				color: var(--el-color-primary);
+			}
+		}
+		.columns-round {
+			background: var(--el-color-primary);
+			color: var(--el-color-white);
+			position: absolute;
+			left: 50%;
+			top: 2px;
+			height: 44px;
+			width: 65px;
+			transform: translateX(-50%);
+			z-index: 0;
+			transition: 0.3s ease-in-out;
+			border-radius: 5px;
+		}
+		.columns-card {
+			@extend .columns-round;
+			top: 0;
+			height: 50px;
+			width: 100%;
+			border-radius: 0;
+		}
+	}
+}
+</style>
diff --git a/src/layout/component/header.vue b/src/layout/component/header.vue
new file mode 100644
index 0000000..21c9e2d
--- /dev/null
+++ b/src/layout/component/header.vue
@@ -0,0 +1,34 @@
+<template>
+	<el-header class="layout-header" :height="setHeaderHeight" v-show="!isTagsViewCurrenFull">
+		<NavBarsIndex />
+	</el-header>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import NavBarsIndex from '/@/layout/navBars/index.vue';
+
+export default defineComponent({
+	name: 'layoutHeader',
+	components: { NavBarsIndex },
+	setup() {
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		// 设置 header 的高度
+		const setHeaderHeight = computed(() => {
+			let { isTagsview, layout } = themeConfig.value;
+			if (isTagsview && layout !== 'classic') return '84px';
+			else return '50px';
+		});
+		return {
+			setHeaderHeight,
+			isTagsViewCurrenFull,
+		};
+	},
+});
+</script>
diff --git a/src/layout/component/main.vue b/src/layout/component/main.vue
new file mode 100644
index 0000000..18eba60
--- /dev/null
+++ b/src/layout/component/main.vue
@@ -0,0 +1,101 @@
+<template>
+	<el-main class="layout-main">
+		<el-scrollbar
+			ref="layoutScrollbarRef"
+			:class="{
+				'layout-scrollbar':
+					(!isClassicOrTransverse && !currentRouteMeta.isLink && !currentRouteMeta.isIframe) ||
+					(!isClassicOrTransverse && currentRouteMeta.isLink && !currentRouteMeta.isIframe),
+			}"
+		>
+			<LayoutParentView
+				:style="{
+					padding: !isClassicOrTransverse || (currentRouteMeta.isLink && currentRouteMeta.isIframe) ? '0' : '15px',
+					transition: 'padding 0.3s ease-in-out',
+				}"
+			/>
+			<Footer v-if="themeConfig.isFooter" />
+		</el-scrollbar>
+	</el-main>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, getCurrentInstance, watch, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { NextLoading } from '/@/utils/loading';
+import LayoutParentView from '/@/layout/routerView/parent.vue';
+import Footer from '/@/layout/footer/index.vue';
+
+// 定义接口来定义对象的类型
+interface MainState {
+	headerHeight: string | number;
+	currentRouteMeta: any;
+}
+
+export default defineComponent({
+	name: 'layoutMain',
+	components: { LayoutParentView, Footer },
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const route = useRoute();
+		const state = reactive<MainState>({
+			headerHeight: '',
+			currentRouteMeta: {},
+		});
+		// 判断布局
+		const isClassicOrTransverse = computed(() => {
+			const { layout } = themeConfig.value;
+			return layout === 'classic' || layout === 'transverse';
+		});
+		// 设置 main 的高度
+		const initHeaderHeight = () => {
+			const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
+			let { isTagsview } = themeConfig.value;
+			if (isTagsview) return (state.headerHeight = bool ? `86px` : `115px`);
+			else return (state.headerHeight = `80px`);
+		};
+		// 初始化获取当前路由 meta，用于设置 iframes padding
+		const initGetMeta = () => {
+			state.currentRouteMeta = route.meta;
+		};
+		// 页面加载前
+		onMounted(async () => {
+			await initGetMeta();
+			initHeaderHeight();
+			NextLoading.done();
+		});
+		// 监听路由变化
+		watch(
+			() => route.path,
+			() => {
+				state.currentRouteMeta = route.meta;
+				const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
+				state.headerHeight = bool ? `86px` : `115px`;
+				proxy.$refs.layoutScrollbarRef.update();
+			}
+		);
+		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+		watch(
+			themeConfig,
+			(val) => {
+				state.currentRouteMeta = route.meta;
+				const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
+				state.headerHeight = val.isTagsview ? (bool ? `86px` : `115px`) : '51px';
+				proxy.$refs?.layoutScrollbarRef?.update();
+			},
+			{
+				deep: true,
+			}
+		);
+		return {
+			themeConfig,
+			isClassicOrTransverse,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/layout/footer/index.vue b/src/layout/footer/index.vue
new file mode 100644
index 0000000..7074293
--- /dev/null
+++ b/src/layout/footer/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="layout-footer mt15" v-show="isDelayFooter">
+    <div class="layout-footer-warp">
+      <div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div>
+      <div class="mt5">云南奇讯科技有限公司版权所有</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+import { onBeforeRouteUpdate } from 'vue-router';
+
+export default defineComponent({
+	name: 'layoutFooter',
+	setup() {
+		const state = reactive({
+			isDelayFooter: true,
+		});
+		// 路由改变时，等主界面动画加载完毕再显示 footer
+		onBeforeRouteUpdate(() => {
+			setTimeout(() => {
+				state.isDelayFooter = false;
+				setTimeout(() => {
+					state.isDelayFooter = true;
+				}, 800);
+			}, 0);
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-footer {
+	width: 100%;
+	display: flex;
+	&-warp {
+		margin: auto;
+		color: var(--el-text-color-secondary);
+		text-align: center;
+		animation: error-num 1s ease-in-out;
+	}
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
new file mode 100644
index 0000000..50643a4
--- /dev/null
+++ b/src/layout/index.vue
@@ -0,0 +1,54 @@
+<template>
+	<component :is="themeConfig.layout" />
+</template>
+
+<script lang="ts">
+import { onBeforeMount, onUnmounted, getCurrentInstance, defineComponent, defineAsyncComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { Local } from '/@/utils/storage';
+
+export default defineComponent({
+	name: 'layout',
+	components: {
+		defaults: defineAsyncComponent(() => import('/@/layout/main/defaults.vue')),
+		classic: defineAsyncComponent(() => import('/@/layout/main/classic.vue')),
+		transverse: defineAsyncComponent(() => import('/@/layout/main/transverse.vue')),
+		columns: defineAsyncComponent(() => import('/@/layout/main/columns.vue')),
+	},
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		// 窗口大小改变时(适配移动端)
+		const onLayoutResize = () => {
+			if (!Local.get('oldLayout')) Local.set('oldLayout', themeConfig.value.layout);
+			const clientWidth = document.body.clientWidth;
+			if (clientWidth < 1000) {
+				themeConfig.value.isCollapse = false;
+				proxy.mittBus.emit('layoutMobileResize', {
+					layout: 'defaults',
+					clientWidth,
+				});
+			} else {
+				proxy.mittBus.emit('layoutMobileResize', {
+					layout: Local.get('oldLayout') ? Local.get('oldLayout') : themeConfig.value.layout,
+					clientWidth,
+				});
+			}
+		};
+		// 页面加载前
+		onBeforeMount(() => {
+			onLayoutResize();
+			window.addEventListener('resize', onLayoutResize);
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			window.removeEventListener('resize', onLayoutResize);
+		});
+		return {
+			themeConfig,
+		};
+	},
+});
+</script>
diff --git a/src/layout/lockScreen/index.vue b/src/layout/lockScreen/index.vue
new file mode 100644
index 0000000..b9173c2
--- /dev/null
+++ b/src/layout/lockScreen/index.vue
@@ -0,0 +1,372 @@
+<template>
+	<div v-show="isShowLockScreen">
+		<div class="layout-lock-screen-mask"></div>
+		<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': isShowLoockLogin }"></div>
+		<div class="layout-lock-screen">
+			<div
+				class="layout-lock-screen-date"
+				ref="layoutLockScreenDateRef"
+				@mousedown="onDown"
+				@mousemove="onMove"
+				@mouseup="onEnd"
+				@touchstart.stop="onDown"
+				@touchmove.stop="onMove"
+				@touchend.stop="onEnd"
+			>
+				<div class="layout-lock-screen-date-box">
+					<div class="layout-lock-screen-date-box-time">
+						{{ time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ time.s }}</span>
+					</div>
+					<div class="layout-lock-screen-date-box-info">{{ time.mdq }}</div>
+				</div>
+				<div class="layout-lock-screen-date-top">
+					<SvgIcon name="ele-Top" />
+					<div class="layout-lock-screen-date-top-text">上滑解锁</div>
+				</div>
+			</div>
+			<transition name="el-zoom-in-center">
+				<div v-show="isShowLoockLogin" class="layout-lock-screen-login">
+					<div class="layout-lock-screen-login-box">
+						<div class="layout-lock-screen-login-box-img">
+							<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
+						</div>
+						<div class="layout-lock-screen-login-box-name">Administrator</div>
+						<div class="layout-lock-screen-login-box-value">
+							<el-input
+								placeholder="请输入密码"
+								ref="layoutLockScreenInputRef"
+								v-model="lockScreenPassword"
+								@keyup.enter.native.stop="onLockScreenSubmit()"
+							>
+								<template #append>
+									<el-button @click="onLockScreenSubmit">
+										<el-icon class="el-input__icon">
+											<ele-Right />
+										</el-icon>
+									</el-button>
+								</template>
+							</el-input>
+						</div>
+					</div>
+					<div class="layout-lock-screen-login-icon">
+						<SvgIcon name="ele-Microphone" :size="20" />
+						<SvgIcon name="ele-AlarmClock" :size="20" />
+						<SvgIcon name="ele-SwitchButton" :size="20" />
+					</div>
+				</div>
+			</transition>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
+import { formatDate } from '/@/utils/formatTime';
+import { Local } from '/@/utils/storage';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+
+// 定义接口来定义对象的类型
+interface LockScreenState {
+	transparency: number;
+	downClientY: number;
+	moveDifference: number;
+	isShowLoockLogin: boolean;
+	isFlags: boolean;
+	querySelectorEl: HTMLElement | string;
+	time: {
+		hm: string;
+		s: string;
+		mdq: string;
+	};
+	setIntervalTime: number;
+	isShowLockScreen: boolean;
+	isShowLockScreenIntervalTime: number;
+	lockScreenPassword: string;
+}
+
+export default defineComponent({
+	name: 'layoutLockScreen',
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const layoutLockScreenInputRef = ref();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const state = reactive<LockScreenState>({
+			transparency: 1,
+			downClientY: 0,
+			moveDifference: 0,
+			isShowLoockLogin: false,
+			isFlags: false,
+			querySelectorEl: '',
+			time: {
+				hm: '',
+				s: '',
+				mdq: '',
+			},
+			setIntervalTime: 0,
+			isShowLockScreen: false,
+			isShowLockScreenIntervalTime: 0,
+			lockScreenPassword: '',
+		});
+		// 鼠标按下
+		const onDown = (down: any) => {
+			state.isFlags = true;
+			state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
+		};
+		// 鼠标移动
+		const onMove = (move: any) => {
+			if (state.isFlags) {
+				const el = <HTMLElement>state.querySelectorEl;
+				const opacitys = (state.transparency -= 1 / 200);
+				if (move.touches) {
+					state.moveDifference = move.touches[0].clientY - state.downClientY;
+				} else {
+					state.moveDifference = move.clientY - state.downClientY;
+				}
+				if (state.moveDifference >= 0) return false;
+				el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
+				if (state.moveDifference < -400) {
+					el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
+					state.moveDifference = -el.clientHeight;
+					setTimeout(() => {
+						el && el.parentNode?.removeChild(el);
+					}, 300);
+				}
+				if (state.moveDifference === -el.clientHeight) {
+					state.isShowLoockLogin = true;
+					layoutLockScreenInputRef.value.focus();
+				}
+			}
+		};
+		// 鼠标松开
+		const onEnd = () => {
+			state.isFlags = false;
+			state.transparency = 1;
+			if (state.moveDifference >= -400) {
+				(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
+			}
+		};
+		// 获取要拖拽的初始元素
+		const initGetElement = () => {
+			nextTick(() => {
+				state.querySelectorEl = proxy.$refs.layoutLockScreenDateRef;
+			});
+		};
+		// 时间初始化
+		const initTime = () => {
+			state.time.hm = formatDate(new Date(), 'HH:MM');
+			state.time.s = formatDate(new Date(), 'SS');
+			state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
+		};
+		// 时间初始化定时器
+		const initSetTime = () => {
+			initTime();
+			state.setIntervalTime = window.setInterval(() => {
+				initTime();
+			}, 1000);
+		};
+		// 锁屏时间定时器
+		const initLockScreen = () => {
+			if (themeConfig.value.isLockScreen) {
+				state.isShowLockScreenIntervalTime = window.setInterval(() => {
+					if (themeConfig.value.lockScreenTime <= 1) {
+						state.isShowLockScreen = true;
+						setLocalThemeConfig();
+						return false;
+					}
+					themeConfig.value.lockScreenTime--;
+				}, 1000);
+			} else {
+				clearInterval(state.isShowLockScreenIntervalTime);
+			}
+		};
+		// 存储布局配置
+		const setLocalThemeConfig = () => {
+			themeConfig.value.isDrawer = false;
+			Local.set('themeConfig', themeConfig.value);
+		};
+		// 密码输入点击事件
+		const onLockScreenSubmit = () => {
+			themeConfig.value.isLockScreen = false;
+			themeConfig.value.lockScreenTime = 30;
+			setLocalThemeConfig();
+		};
+		// 页面加载时
+		onMounted(() => {
+			initGetElement();
+			initSetTime();
+			initLockScreen();
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			window.clearInterval(state.setIntervalTime);
+			window.clearInterval(state.isShowLockScreenIntervalTime);
+		});
+		return {
+			layoutLockScreenInputRef,
+			onDown,
+			onMove,
+			onEnd,
+			onLockScreenSubmit,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-lock-screen-fixed {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.layout-lock-screen-filter {
+	filter: blur(1px);
+}
+.layout-lock-screen-mask {
+	background: var(--el-color-white);
+	@extend .layout-lock-screen-fixed;
+	z-index: 9999990;
+}
+.layout-lock-screen-img {
+	@extend .layout-lock-screen-fixed;
+	background-image: url('https://img-blog.csdnimg.cn/afa9c317667f47d5bea34b85af45979e.png#pic_center');
+	background-size: 100% 100%;
+	z-index: 9999991;
+}
+.layout-lock-screen {
+	@extend .layout-lock-screen-fixed;
+	z-index: 9999992;
+	&-date {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		color: var(--el-color-white);
+		z-index: 9999993;
+		user-select: none;
+		&-box {
+			position: absolute;
+			left: 30px;
+			bottom: 50px;
+			&-time {
+				font-size: 100px;
+				color: var(--el-color-white);
+			}
+			&-info {
+				font-size: 40px;
+				color: var(--el-color-white);
+			}
+			&-minutes {
+				font-size: 16px;
+			}
+		}
+		&-top {
+			width: 40px;
+			height: 40px;
+			line-height: 40px;
+			border-radius: 100%;
+			border: 1px solid var(--el-border-color-light, #ebeef5);
+			background: rgba(255, 255, 255, 0.1);
+			color: var(--el-color-white);
+			opacity: 0.8;
+			position: absolute;
+			right: 30px;
+			bottom: 50px;
+			text-align: center;
+			overflow: hidden;
+			transition: all 0.3s ease;
+			i {
+				transition: all 0.3s ease;
+			}
+			&-text {
+				opacity: 0;
+				position: absolute;
+				top: 150%;
+				font-size: 12px;
+				color: var(--el-color-white);
+				left: 50%;
+				line-height: 1.2;
+				transform: translate(-50%, -50%);
+				transition: all 0.3s ease;
+				width: 35px;
+			}
+			&:hover {
+				border: 1px solid rgba(255, 255, 255, 0.5);
+				background: rgba(255, 255, 255, 0.2);
+				box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
+				color: var(--el-color-white);
+				opacity: 1;
+				transition: all 0.3s ease;
+				i {
+					transform: translateY(-40px);
+					transition: all 0.3s ease;
+				}
+				.layout-lock-screen-date-top-text {
+					opacity: 1;
+					top: 50%;
+					transition: all 0.3s ease;
+				}
+			}
+		}
+	}
+	&-login {
+		position: relative;
+		z-index: 9999994;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		color: var(--el-color-white);
+		&-box {
+			text-align: center;
+			margin: auto;
+			&-img {
+				width: 180px;
+				height: 180px;
+				margin: auto;
+				img {
+					width: 100%;
+					height: 100%;
+					border-radius: 100%;
+				}
+			}
+			&-name {
+				font-size: 26px;
+				margin: 15px 0 30px;
+			}
+		}
+		&-icon {
+			position: absolute;
+			right: 30px;
+			bottom: 30px;
+			i {
+				font-size: 20px;
+				margin-left: 15px;
+				cursor: pointer;
+				opacity: 0.8;
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+	}
+}
+:deep(.el-input-group__append) {
+	background: var(--el-color-white);
+	padding: 0px 15px;
+}
+:deep(.el-input__inner) {
+	border-right-color: var(--el-border-color-extra-light);
+	&:hover {
+		border-color: var(--el-border-color-extra-light);
+	}
+}
+</style>
diff --git a/src/layout/logo/index.vue b/src/layout/logo/index.vue
new file mode 100644
index 0000000..67178af
--- /dev/null
+++ b/src/layout/logo/index.vue
@@ -0,0 +1,84 @@
+<template>
+	<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
+		<img :src="logoMini" class="layout-logo-medium-img" />
+		<span>{{ themeConfig.globalTitle }}</span>
+	</div>
+	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
+		<img :src="logoMini" class="layout-logo-size-img" />
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+
+import logoMini from '/@/assets/logo-mini.svg';
+
+export default defineComponent({
+	name: 'layoutLogo',
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		// 设置 logo 的显示。classic 经典布局默认显示 logo
+		const setShowLogo = computed(() => {
+			let { isCollapse, layout } = themeConfig.value;
+			return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
+		});
+		// logo 点击实现菜单展开/收起
+		const onThemeConfigChange = () => {
+			if (themeConfig.value.layout === 'transverse') return false;
+			themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
+		};
+		return {
+			logoMini,
+			setShowLogo,
+			themeConfig,
+			onThemeConfigChange,
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-logo {
+	width: 220px;
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
+	color: var(--el-color-primary);
+	font-size: 16px;
+	cursor: pointer;
+	animation: logoAnimation 0.3s ease-in-out;
+	span {
+		white-space: nowrap;
+		display: inline-block;
+	}
+	&:hover {
+		span {
+			color: var(--color-primary-light-2);
+		}
+	}
+	&-medium-img {
+		width: 40px;
+	}
+}
+.layout-logo-size {
+	width: 100%;
+	height: 50px;
+	display: flex;
+	cursor: pointer;
+	animation: logoAnimation 0.3s ease-in-out;
+	&-img {
+		width: 20px;
+		margin: auto;
+	}
+	&:hover {
+		img {
+			animation: logoAnimation 0.3s ease-in-out;
+		}
+	}
+}
+</style>
diff --git a/src/layout/main/classic.vue b/src/layout/main/classic.vue
new file mode 100644
index 0000000..b92290f
--- /dev/null
+++ b/src/layout/main/classic.vue
@@ -0,0 +1,35 @@
+<template>
+	<el-container class="layout-container flex-center">
+		<Header />
+		<el-container class="layout-mian-height-50">
+			<Aside />
+			<div class="flex-center layout-backtop">
+				<TagsView v-if="themeConfig.isTagsview" />
+				<Main />
+			</div>
+		</el-container>
+		<el-backtop target=".layout-backtop .el-main .el-scrollbar__wrap"></el-backtop>
+	</el-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import Aside from '/@/layout/component/aside.vue';
+import Header from '/@/layout/component/header.vue';
+import Main from '/@/layout/component/main.vue';
+import TagsView from '/@/layout/navBars/tagsView/tagsView.vue';
+
+export default defineComponent({
+	name: 'layoutClassic',
+	components: { Aside, Header, Main, TagsView },
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		return {
+			themeConfig,
+		};
+	},
+});
+</script>
diff --git a/src/layout/main/columns.vue b/src/layout/main/columns.vue
new file mode 100644
index 0000000..0aa1d31
--- /dev/null
+++ b/src/layout/main/columns.vue
@@ -0,0 +1,41 @@
+<template>
+	<el-container class="layout-container">
+		<ColumnsAside />
+		<div class="layout-columns-warp">
+			<Aside />
+			<el-container class="flex-center layout-backtop" :class="{ 'layout-backtop': !isFixedHeader }">
+				<Header v-if="isFixedHeader" />
+				<el-scrollbar :class="{ 'layout-backtop': isFixedHeader }">
+					<Header v-if="!isFixedHeader" />
+					<Main />
+				</el-scrollbar>
+			</el-container>
+		</div>
+		<el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
+	</el-container>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import Aside from '/@/layout/component/aside.vue';
+import Header from '/@/layout/component/header.vue';
+import Main from '/@/layout/component/main.vue';
+import ColumnsAside from '/@/layout/component/columnsAside.vue';
+
+export default defineComponent({
+	name: 'layoutColumns',
+	components: { Aside, Header, Main, ColumnsAside },
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const isFixedHeader = computed(() => {
+			return themeConfig.value.isFixedHeader;
+		});
+		return {
+			isFixedHeader,
+		};
+	},
+});
+</script>
diff --git a/src/layout/main/defaults.vue b/src/layout/main/defaults.vue
new file mode 100644
index 0000000..0cabb0c
--- /dev/null
+++ b/src/layout/main/defaults.vue
@@ -0,0 +1,47 @@
+<template>
+	<el-container class="layout-container">
+		<Aside />
+		<el-container class="flex-center" :class="{ 'layout-backtop': !isFixedHeader }">
+			<Header v-if="isFixedHeader" />
+			<el-scrollbar ref="layoutDefaultsScrollbarRef" :class="{ 'layout-backtop': isFixedHeader }">
+				<Header v-if="!isFixedHeader" />
+				<Main />
+			</el-scrollbar>
+		</el-container>
+		<el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
+	</el-container>
+</template>
+
+<script lang="ts">
+import { computed, getCurrentInstance, watch, defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import Aside from '/@/layout/component/aside.vue';
+import Header from '/@/layout/component/header.vue';
+import Main from '/@/layout/component/main.vue';
+
+export default defineComponent({
+	name: 'layoutDefaults',
+	components: { Aside, Header, Main },
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const route = useRoute();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const isFixedHeader = computed(() => {
+			return themeConfig.value.isFixedHeader;
+		});
+		// 监听路由的变化
+		watch(
+			() => route.path,
+			() => {
+				proxy.$refs.layoutDefaultsScrollbarRef.wrap$.scrollTop = 0;
+			}
+		);
+		return {
+			isFixedHeader,
+		};
+	},
+});
+</script>
diff --git a/src/layout/main/transverse.vue b/src/layout/main/transverse.vue
new file mode 100644
index 0000000..538f911
--- /dev/null
+++ b/src/layout/main/transverse.vue
@@ -0,0 +1,17 @@
+<template>
+	<el-container class="layout-container flex-center layout-backtop">
+		<Header />
+		<Main />
+		<el-backtop target=".layout-backtop .el-main .el-scrollbar__wrap"></el-backtop>
+	</el-container>
+</template>
+
+<script lang="ts">
+import Header from '/@/layout/component/header.vue';
+import Main from '/@/layout/component/main.vue';
+
+export default {
+	name: 'layoutTransverse',
+	components: { Header, Main },
+};
+</script>
diff --git a/src/layout/navBars/breadcrumb/breadcrumb.vue b/src/layout/navBars/breadcrumb/breadcrumb.vue
new file mode 100644
index 0000000..609dee9
--- /dev/null
+++ b/src/layout/navBars/breadcrumb/breadcrumb.vue
@@ -0,0 +1,163 @@
+<template>
+	<div v-if="isShowBreadcrumb" class="layout-navbars-breadcrumb">
+		<SvgIcon
+			class="layout-navbars-breadcrumb-icon"
+			:name="themeConfig.isCollapse ? 'ele-Expand' : 'ele-Fold'"
+			:size="16"
+			@click="onThemeConfigChange"
+		/>
+		<el-breadcrumb class="layout-navbars-breadcrumb-hide">
+			<transition-group name="breadcrumb">
+				<el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
+					<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
+						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
+						<div v-if="!v.meta.tagsViewName">{{ $t(v.meta.title) }}</div>
+						<div v-else>{{ v.meta.tagsViewName }}</div>
+					</span>
+					<a v-else @click.prevent="onBreadcrumbClick(v)">
+						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
+					</a>
+				</el-breadcrumb-item>
+			</transition-group>
+		</el-breadcrumb>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+import { Local } from '/@/utils/storage';
+import other from '/@/utils/other';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useRoutesList } from '/@/stores/routesList';
+
+// 定义接口来定义对象的类型
+interface BreadcrumbState {
+	breadcrumbList: Array<any>;
+	routeSplit: Array<string>;
+	routeSplitFirst: string;
+	routeSplitIndex: number;
+}
+
+export default defineComponent({
+	name: 'layoutBreadcrumb',
+	setup() {
+		const stores = useRoutesList();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { routesList } = storeToRefs(stores);
+		const route = useRoute();
+		const router = useRouter();
+		const state = reactive<BreadcrumbState>({
+			breadcrumbList: [],
+			routeSplit: [],
+			routeSplitFirst: '',
+			routeSplitIndex: 1,
+		});
+		// 动态设置经典、横向布局不显示
+		const isShowBreadcrumb = computed(() => {
+			initRouteSplit(route.path);
+			const { layout, isBreadcrumb } = themeConfig.value;
+			if (layout === 'classic' || layout === 'transverse') return false;
+			else return isBreadcrumb ? true : false;
+		});
+		// 面包屑点击时
+		const onBreadcrumbClick = (v: any) => {
+			const { redirect, path } = v;
+			if (redirect) router.push(redirect);
+			else router.push(path);
+		};
+		// 展开/收起左侧菜单点击
+		const onThemeConfigChange = () => {
+			themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
+			setLocalThemeConfig();
+		};
+		// 存储布局配置
+		const setLocalThemeConfig = () => {
+			Local.remove('themeConfig');
+			Local.set('themeConfig', themeConfig.value);
+		};
+		// 处理面包屑数据
+		const getBreadcrumbList = (arr: Array<string>) => {
+			arr.forEach((item: any) => {
+				state.routeSplit.forEach((v: any, k: number, arrs: any) => {
+					if (state.routeSplitFirst === item.path) {
+						state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
+						state.breadcrumbList.push(item);
+						state.routeSplitIndex++;
+						if (item.children) getBreadcrumbList(item.children);
+					}
+				});
+			});
+		};
+		// 当前路由字符串切割成数组，并删除第一项空内容
+		const initRouteSplit = (path: string) => {
+			if (!themeConfig.value.isBreadcrumb) return false;
+			state.breadcrumbList = [routesList.value[0]];
+			state.routeSplit = path.split('/');
+			state.routeSplit.shift();
+			state.routeSplitFirst = `/${state.routeSplit[0]}`;
+			state.routeSplitIndex = 1;
+			getBreadcrumbList(routesList.value);
+			if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
+			if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
+		};
+		// 页面加载时
+		onMounted(() => {
+			initRouteSplit(route.path);
+		});
+		// 路由更新时
+		onBeforeRouteUpdate((to) => {
+			initRouteSplit(to.path);
+		});
+		return {
+			onThemeConfigChange,
+			isShowBreadcrumb,
+			themeConfig,
+			onBreadcrumbClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-breadcrumb {
+	flex: 1;
+	height: inherit;
+	display: flex;
+	align-items: center;
+	.layout-navbars-breadcrumb-icon {
+		cursor: pointer;
+		font-size: 18px;
+		color: var(--next-bg-topBarColor);
+		height: 100%;
+		width: 40px;
+		opacity: 0.8;
+		&:hover {
+			opacity: 1;
+		}
+	}
+	.layout-navbars-breadcrumb-span {
+		display: flex;
+		opacity: 0.7;
+		color: var(--next-bg-topBarColor);
+	}
+	.layout-navbars-breadcrumb-iconfont {
+		font-size: 14px;
+		margin-right: 5px;
+	}
+	:deep(.el-breadcrumb__separator) {
+		opacity: 0.7;
+		color: var(--next-bg-topBarColor);
+	}
+	:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
+		font-weight: unset !important;
+		color: var(--next-bg-topBarColor);
+		&:hover {
+			color: var(--el-color-primary) !important;
+		}
+	}
+}
+</style>
diff --git a/src/layout/navBars/breadcrumb/closeFull.vue b/src/layout/navBars/breadcrumb/closeFull.vue
new file mode 100644
index 0000000..6c786bb
--- /dev/null
+++ b/src/layout/navBars/breadcrumb/closeFull.vue
@@ -0,0 +1,61 @@
+<template>
+	<div class="layout-navbars-close-full" v-if="isTagsViewCurrenFull">
+		<div class="layout-navbars-close-full-icon">
+			<SvgIcon name="ele-Close" :title="$t('message.tagsView.closeFullscreen')" @click="onCloseFullscreen" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+export default defineComponent({
+	name: 'layoutCloseFull',
+	setup() {
+		const stores = useTagsViewRoutes();
+		const { isTagsViewCurrenFull } = storeToRefs(stores);
+		// 关闭当前全屏
+		const onCloseFullscreen = () => {
+			stores.setCurrenFullscreen(false);
+		};
+		return {
+			isTagsViewCurrenFull,
+			onCloseFullscreen,
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-close-full {
+	position: fixed;
+	z-index: 9999999999;
+	right: -30px;
+	top: -30px;
+	.layout-navbars-close-full-icon {
+		width: 60px;
+		height: 60px;
+		border-radius: 100%;
+		cursor: pointer;
+		background: rgba(0, 0, 0, 0.1);
+		transition: all 0.3s ease;
+		position: relative;
+		:deep(i) {
+			position: absolute;
+			left: 10px;
+			top: 35px;
+			color: #333333;
+			transition: all 0.3s ease;
+		}
+	}
+	&:hover {
+		transition: all 0.3s ease;
+		:deep(i) {
+			color: var(--el-color-primary);
+			transition: all 0.3s ease;
+		}
+	}
+}
+</style>
diff --git a/src/layout/navBars/breadcrumb/index.vue b/src/layout/navBars/breadcrumb/index.vue
new file mode 100644
index 0000000..2810718
--- /dev/null
+++ b/src/layout/navBars/breadcrumb/index.vue
@@ -0,0 +1,119 @@
+<template>
+	<div class="layout-navbars-breadcrumb-index">
+		<Logo v-if="setIsShowLogo" />
+		<Breadcrumb />
+		<Horizontal :menuList="menuList" v-if="isLayoutTransverse" />
+		<User />
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, reactive, toRefs, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useRoutesList } from '/@/stores/routesList';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import Breadcrumb from '/@/layout/navBars/breadcrumb/breadcrumb.vue';
+import User from '/@/layout/navBars/breadcrumb/user.vue';
+import Logo from '/@/layout/logo/index.vue';
+import Horizontal from '/@/layout/navMenu/horizontal.vue';
+
+// 定义接口来定义对象的类型
+interface IndexState {
+	menuList: object[];
+}
+
+export default defineComponent({
+	name: 'layoutBreadcrumbIndex',
+	components: { Breadcrumb, User, Logo, Horizontal },
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const stores = useRoutesList();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { routesList } = storeToRefs(stores);
+		const route = useRoute();
+		const state = reactive<IndexState>({
+			menuList: [],
+		});
+		// 设置 logo 显示/隐藏
+		const setIsShowLogo = computed(() => {
+			let { isShowLogo, layout } = themeConfig.value;
+			return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse');
+		});
+		// 设置是否显示横向导航菜单
+		const isLayoutTransverse = computed(() => {
+			let { layout, isClassicSplitMenu } = themeConfig.value;
+			return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic');
+		});
+		// 设置/过滤路由（非静态路由/是否显示在菜单中）
+		const setFilterRoutes = () => {
+			let { layout, isClassicSplitMenu } = themeConfig.value;
+			if (layout === 'classic' && isClassicSplitMenu) {
+				state.menuList = delClassicChildren(filterRoutesFun(routesList.value));
+				const resData = setSendClassicChildren(route.path);
+				proxy.mittBus.emit('setSendClassicChildren', resData);
+			} else {
+				state.menuList = filterRoutesFun(routesList.value);
+			}
+		};
+		// 设置了分割菜单时，删除底下 children
+		const delClassicChildren = (arr: Array<object>) => {
+			arr.map((v: any) => {
+				if (v.children) delete v.children;
+			});
+			return arr;
+		};
+		// 路由过滤递归函数
+		const filterRoutesFun = (arr: Array<string>) => {
+			return arr
+				.filter((item: any) => !item.meta.isHide)
+				.map((item: any) => {
+					item = Object.assign({}, item);
+					if (item.children) item.children = filterRoutesFun(item.children);
+					return item;
+				});
+		};
+		// 传送当前子级数据到菜单中
+		const setSendClassicChildren = (path: string) => {
+			const currentPathSplit = path.split('/');
+			let currentData: any = {};
+			filterRoutesFun(routesList.value).map((v, k) => {
+				if (v.path === `/${currentPathSplit[1]}`) {
+					v['k'] = k;
+					currentData['item'] = [{ ...v }];
+					currentData['children'] = [{ ...v }];
+					if (v.children) currentData['children'] = v.children;
+				}
+			});
+			return currentData;
+		};
+		// 页面加载时
+		onMounted(() => {
+			setFilterRoutes();
+			proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
+				setFilterRoutes();
+			});
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes', () => {});
+		});
+		return {
+			setIsShowLogo,
+			isLayoutTransverse,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-breadcrumb-index {
+	height: 50px;
+	display: flex;
+	align-items: center;
+	background: var(--next-bg-topBar);
+	border-bottom: 1px solid var(--next-border-color-light);
+}
+</style>
diff --git a/src/layout/navBars/breadcrumb/search.vue b/src/layout/navBars/breadcrumb/search.vue
new file mode 100644
index 0000000..d2a5713
--- /dev/null
+++ b/src/layout/navBars/breadcrumb/search.vue
@@ -0,0 +1,138 @@
+<template>
+	<div class="layout-search-dialog">
+		<el-dialog v-model="isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
+			<el-autocomplete
+				v-model="menuQuery"
+				:fetch-suggestions="menuSearch"
+				:placeholder="$t('message.user.searchPlaceholder')"
+				ref="layoutMenuAutocompleteRef"
+				@select="onHandleSelect"
+				@blur="onSearchBlur"
+			>
+				<template #prefix>
+					<el-icon class="el-input__icon">
+						<ele-Search />
+					</el-icon>
+				</template>
+				<template #default="{ item }">
+					<div>
+						<SvgIcon :name="item.meta.icon" class="mr5" />
+						{{ $t(item.meta.title) }}
+					</div>
+				</template>
+			</el-autocomplete>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+// 定义接口来定义对象的类型
+interface SearchState {
+	isShowSearch: boolean;
+	menuQuery: string;
+	tagsViewList: object[];
+}
+interface Restaurant {
+	path: string;
+	meta: {
+		title: string;
+	};
+}
+
+export default defineComponent({
+	name: 'layoutBreadcrumbSearch',
+	setup() {
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
+		const layoutMenuAutocompleteRef = ref();
+		const { t } = useI18n();
+		const router = useRouter();
+		const state = reactive<SearchState>({
+			isShowSearch: false,
+			menuQuery: '',
+			tagsViewList: [],
+		});
+		// 搜索弹窗打开
+		const openSearch = () => {
+			state.menuQuery = '';
+			state.isShowSearch = true;
+			initTageView();
+			nextTick(() => {
+				setTimeout(() => {
+					layoutMenuAutocompleteRef.value.focus();
+				});
+			});
+		};
+		// 搜索弹窗关闭
+		const closeSearch = () => {
+			state.isShowSearch = false;
+		};
+		// 菜单搜索数据过滤
+		const menuSearch = (queryString: string, cb: Function) => {
+			let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
+			cb(results);
+		};
+		// 菜单搜索过滤
+		const createFilter: any = (queryString: string) => {
+			return (restaurant: Restaurant) => {
+				return (
+					restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
+					restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
+					t(restaurant.meta.title).indexOf(queryString.toLowerCase()) > -1
+				);
+			};
+		};
+		// 初始化菜单数据
+		const initTageView = () => {
+			if (state.tagsViewList.length > 0) return false;
+			tagsViewRoutes.value.map((v: any) => {
+				if (!v.meta.isHide) state.tagsViewList.push({ ...v });
+			});
+		};
+		// 当前菜单选中时
+		const onHandleSelect = (item: any) => {
+			let { path, redirect } = item;
+			if (item.meta.isLink && !item.meta.isIframe) window.open(item.meta.isLink);
+			else if (redirect) router.push(redirect);
+			else router.push(path);
+			closeSearch();
+		};
+		// input 失去焦点时
+		const onSearchBlur = () => {
+			closeSearch();
+		};
+		return {
+			layoutMenuAutocompleteRef,
+			openSearch,
+			closeSearch,
+			menuSearch,
+			onHandleSelect,
+			onSearchBlur,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-search-dialog {
+	:deep(.el-dialog) {
+		box-shadow: unset !important;
+		border-radius: 0 !important;
+		background: rgba(0, 0, 0, 0.5);
+	}
+	:deep(.el-autocomplete) {
+		width: 560px;
+		position: absolute;
+		top: 100px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+</style>
diff --git a/src/layout/navBars/breadcrumb/setings.vue b/src/layout/navBars/breadcrumb/setings.vue
new file mode 100644
index 0000000..b7e5263
--- /dev/null
+++ b/src/layout/navBars/breadcrumb/setings.vue
@@ -0,0 +1,816 @@
+<template>
+	<div class="layout-breadcrumb-seting">
+		<el-drawer
+			:title="$t('message.layout.configTitle')"
+			v-model="getThemeConfig.isDrawer"
+			direction="rtl"
+			destroy-on-close
+			size="260px"
+			@close="onDrawerClose"
+		>
+			<el-scrollbar class="layout-breadcrumb-seting-bar">
+				<!-- 全局主题 -->
+				<el-divider content-position="left">{{ $t('message.layout.oneTitle') }}</el-divider>
+				<div class="layout-breadcrumb-seting-bar-flex">
+					<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-color-picker v-model="getThemeConfig.primary" size="default" @change="onColorPickerChange"> </el-color-picker>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsDark') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isIsDark" size="small" @change="onAddDarkChange"></el-switch>
+					</div>
+				</div>
+
+				<!-- 顶栏设置 -->
+				<el-divider content-position="left">{{ $t('message.layout.twoTopTitle') }}</el-divider>
+				<div class="layout-breadcrumb-seting-bar-flex">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoTopBar') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-color-picker v-model="getThemeConfig.topBar" size="default" @change="onBgColorPickerChange('topBar')"> </el-color-picker>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoTopBarColor') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-color-picker v-model="getThemeConfig.topBarColor" size="default" @change="onBgColorPickerChange('topBarColor')"> </el-color-picker>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt10">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsTopBarColorGradual') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isTopBarColorGradual" size="small" @change="onTopBarGradualChange"></el-switch>
+					</div>
+				</div>
+
+				<!-- 菜单设置 -->
+				<el-divider content-position="left">{{ $t('message.layout.twoMenuTitle') }}</el-divider>
+				<div class="layout-breadcrumb-seting-bar-flex">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoMenuBar') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-color-picker v-model="getThemeConfig.menuBar" size="default" @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoMenuBarColor') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-color-picker v-model="getThemeConfig.menuBarColor" size="default" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt14">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsMenuBarColorGradual') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isMenuBarColorGradual" size="small" @change="onMenuBarGradualChange"></el-switch>
+					</div>
+				</div>
+
+				<!-- 分栏设置 -->
+				<el-divider content-position="left" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">{{
+					$t('message.layout.twoColumnsTitle')
+				}}</el-divider>
+				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBar') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-color-picker
+							v-model="getThemeConfig.columnsMenuBar"
+							size="default"
+							@change="onBgColorPickerChange('columnsMenuBar')"
+							:disabled="getThemeConfig.layout !== 'columns'"
+						>
+						</el-color-picker>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBarColor') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-color-picker
+							v-model="getThemeConfig.columnsMenuBarColor"
+							size="default"
+							@change="onBgColorPickerChange('columnsMenuBarColor')"
+							:disabled="getThemeConfig.layout !== 'columns'"
+						>
+						</el-color-picker>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt14" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsColumnsMenuBarColorGradual') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch
+							v-model="getThemeConfig.isColumnsMenuBarColorGradual"
+							size="small"
+							@change="onColumnsMenuBarGradualChange"
+							:disabled="getThemeConfig.layout !== 'columns'"
+						></el-switch>
+					</div>
+				</div>
+
+				<!-- 界面设置 -->
+				<el-divider content-position="left">{{ $t('message.layout.threeTitle') }}</el-divider>
+				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsCollapse') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch
+							v-model="getThemeConfig.isCollapse"
+							:disabled="getThemeConfig.layout === 'transverse'"
+							size="small"
+							@change="onThemeConfigChange"
+						></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsUniqueOpened') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch
+							v-model="getThemeConfig.isUniqueOpened"
+							:disabled="getThemeConfig.layout === 'transverse'"
+							size="small"
+							@change="setLocalThemeConfig"
+						></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsFixedHeader') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isFixedHeader" size="small" @change="onIsFixedHeaderChange"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout !== 'classic' ? 0.5 : 1 }">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsClassicSplitMenu') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch
+							v-model="getThemeConfig.isClassicSplitMenu"
+							:disabled="getThemeConfig.layout !== 'classic'"
+							size="small"
+							@change="onClassicSplitMenuChange"
+						>
+						</el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsLockScreen') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isLockScreen" size="small" @change="setLocalThemeConfig"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt11">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeLockScreenTime') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-input-number
+							v-model="getThemeConfig.lockScreenTime"
+							controls-position="right"
+							:min="1"
+							:max="9999"
+							@change="setLocalThemeConfig"
+							size="default"
+							style="width: 90px"
+						>
+						</el-input-number>
+					</div>
+				</div>
+
+				<!-- 界面显示 -->
+				<el-divider content-position="left">{{ $t('message.layout.fourTitle') }}</el-divider>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsShowLogo') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isShowLogo" size="small" @change="onIsShowLogoChange"></el-switch>
+					</div>
+				</div>
+				<div
+					class="layout-breadcrumb-seting-bar-flex mt15"
+					:style="{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }"
+				>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumb') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch
+							v-model="getThemeConfig.isBreadcrumb"
+							:disabled="getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse'"
+							size="small"
+							@change="onIsBreadcrumbChange"
+						></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumbIcon') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isBreadcrumbIcon" size="small" @change="setLocalThemeConfig"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsTagsview') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isTagsview" size="small" @change="setLocalThemeConfig"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsTagsviewIcon') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isTagsviewIcon" size="small" @change="setLocalThemeConfig"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsCacheTagsView') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isCacheTagsView" size="small" @change="setLocalThemeConfig"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: isMobile ? 0.5 : 1 }">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsSortableTagsView') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch
+							v-model="getThemeConfig.isSortableTagsView"
+							:disabled="isMobile ? true : false"
+							size="small"
+							@change="onSortableTagsViewChange"
+						></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsShareTagsView') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isShareTagsView" size="small" @change="onShareTagsViewChange"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsFooter') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isFooter" size="small" @change="setLocalThemeConfig"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsGrayscale') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isGrayscale" size="small" @change="onAddFilterChange('grayscale')"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsInvert') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isInvert" size="small" @change="onAddFilterChange('invert')"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsWartermark') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isWartermark" size="small" @change="onWartermarkChange"></el-switch>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt14">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourWartermarkText') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-input v-model="getThemeConfig.wartermarkText" size="default" style="width: 90px" @input="onWartermarkTextInput($event)"></el-input>
+					</div>
+				</div>
+
+				<!-- 其它设置 -->
+				<el-divider content-position="left">{{ $t('message.layout.fiveTitle') }}</el-divider>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveTagsStyle') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="default" style="width: 90px" @change="setLocalThemeConfig">
+							<el-option label="风格1" value="tags-style-one"></el-option>
+							<el-option label="风格4" value="tags-style-four"></el-option>
+							<el-option label="风格5" value="tags-style-five"></el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveAnimation') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="default" style="width: 90px" @change="setLocalThemeConfig">
+							<el-option label="slide-right" value="slide-right"></el-option>
+							<el-option label="slide-left" value="slide-left"></el-option>
+							<el-option label="opacitys" value="opacitys"></el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideStyle') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-select
+							v-model="getThemeConfig.columnsAsideStyle"
+							placeholder="请选择"
+							size="default"
+							style="width: 90px"
+							:disabled="getThemeConfig.layout !== 'columns' ? true : false"
+							@change="setLocalThemeConfig"
+						>
+							<el-option label="圆角" value="columns-round"></el-option>
+							<el-option label="卡片" value="columns-card"></el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15 mb27" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideLayout') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-select
+							v-model="getThemeConfig.columnsAsideLayout"
+							placeholder="请选择"
+							size="default"
+							style="width: 90px"
+							:disabled="getThemeConfig.layout !== 'columns' ? true : false"
+							@change="setLocalThemeConfig"
+						>
+							<el-option label="水平" value="columns-horizontal"></el-option>
+							<el-option label="垂直" value="columns-vertical"></el-option>
+						</el-select>
+					</div>
+				</div>
+
+				<!-- 布局切换 -->
+				<el-divider content-position="left">{{ $t('message.layout.sixTitle') }}</el-divider>
+				<div class="layout-drawer-content-flex">
+					<!-- defaults 布局 -->
+					<div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
+						<section class="el-container el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'defaults' }">
+							<aside class="el-aside" style="width: 20px"></aside>
+							<section class="el-container is-vertical">
+								<header class="el-header" style="height: 10px"></header>
+								<main class="el-main"></main>
+							</section>
+						</section>
+						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'defaults' }">
+							<div class="layout-tips-box">
+								<p class="layout-tips-txt">{{ $t('message.layout.sixDefaults') }}</p>
+							</div>
+						</div>
+					</div>
+					<!-- classic 布局 -->
+					<div class="layout-drawer-content-item" @click="onSetLayout('classic')">
+						<section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'classic' }">
+							<header class="el-header" style="height: 10px"></header>
+							<section class="el-container">
+								<aside class="el-aside" style="width: 20px"></aside>
+								<section class="el-container is-vertical">
+									<main class="el-main"></main>
+								</section>
+							</section>
+						</section>
+						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'classic' }">
+							<div class="layout-tips-box">
+								<p class="layout-tips-txt">{{ $t('message.layout.sixClassic') }}</p>
+							</div>
+						</div>
+					</div>
+					<!-- transverse 布局 -->
+					<div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
+						<section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'transverse' }">
+							<header class="el-header" style="height: 10px"></header>
+							<section class="el-container">
+								<section class="el-container is-vertical">
+									<main class="el-main"></main>
+								</section>
+							</section>
+						</section>
+						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'transverse' }">
+							<div class="layout-tips-box">
+								<p class="layout-tips-txt">{{ $t('message.layout.sixTransverse') }}</p>
+							</div>
+						</div>
+					</div>
+					<!-- columns 布局 -->
+					<div class="layout-drawer-content-item" @click="onSetLayout('columns')">
+						<section class="el-container el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'columns' }">
+							<aside class="el-aside-dark" style="width: 10px"></aside>
+							<aside class="el-aside" style="width: 20px"></aside>
+							<section class="el-container is-vertical">
+								<header class="el-header" style="height: 10px"></header>
+								<main class="el-main"></main>
+							</section>
+						</section>
+						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'columns' }">
+							<div class="layout-tips-box">
+								<p class="layout-tips-txt">{{ $t('message.layout.sixColumns') }}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="copy-config">
+					<el-alert :title="$t('message.layout.tipText')" type="warning" :closable="false"> </el-alert>
+					<el-button size="default" class="copy-config-btn" type="primary" ref="copyConfigBtnRef" @click="onCopyConfigClick">
+						<el-icon class="mr5">
+							<ele-CopyDocument />
+						</el-icon>
+						{{ $t('message.layout.copyText') }}
+					</el-button>
+					<el-button size="default" class="copy-config-btn-reset" type="info" @click="onResetConfigClick">
+						<el-icon class="mr5">
+							<ele-RefreshRight />
+						</el-icon>
+						{{ $t('message.layout.resetText') }}
+					</el-button>
+				</div>
+			</el-scrollbar>
+		</el-drawer>
+	</div>
+</template>
+
+<script lang="ts">
+import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed, reactive, toRefs } from 'vue';
+import { ElMessage } from 'element-plus';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { getLightColor, getDarkColor } from '/@/utils/theme';
+import { verifyAndSpace } from '/@/utils/toolsValidate';
+import { Local } from '/@/utils/storage';
+import Watermark from '/@/utils/wartermark';
+import commonFunction from '/@/utils/commonFunction';
+import other from '/@/utils/other';
+
+export default defineComponent({
+	name: 'layoutBreadcrumbSeting',
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { copyText } = commonFunction();
+		const state = reactive({
+			isMobile: false,
+		});
+		// 获取布局配置信息
+		const getThemeConfig = computed(() => {
+			return themeConfig.value;
+		});
+		// 1、全局主题
+		const onColorPickerChange = () => {
+			if (!getThemeConfig.value.primary) return ElMessage.warning('全局主题 primary 颜色值不能为空');
+			// 颜色加深
+			document.documentElement.style.setProperty('--el-color-primary-dark-2', `${getDarkColor(getThemeConfig.value.primary, 0.1)}`);
+			document.documentElement.style.setProperty('--el-color-primary', getThemeConfig.value.primary);
+			// 颜色变浅
+			for (let i = 1; i <= 9; i++) {
+				document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(getThemeConfig.value.primary, i / 10)}`);
+			}
+			setDispatchThemeConfig();
+		};
+		// 2、菜单 / 顶栏
+		const onBgColorPickerChange = (bg: string) => {
+			document.documentElement.style.setProperty(`--next-bg-${bg}`, (<any>getThemeConfig.value)[bg]);
+			if (bg === 'menuBar') {
+				document.documentElement.style.setProperty(`--next-bg-menuBar-light-1`, <any>getLightColor(getThemeConfig.value.menuBar, 0.05));
+			}
+			onTopBarGradualChange();
+			onMenuBarGradualChange();
+			onColumnsMenuBarGradualChange();
+			setDispatchThemeConfig();
+		};
+		// 2、菜单 / 顶栏 --> 顶栏背景渐变
+		const onTopBarGradualChange = () => {
+			setGraduaFun('.layout-navbars-breadcrumb-index', getThemeConfig.value.isTopBarColorGradual, getThemeConfig.value.topBar);
+		};
+		// 2、菜单 / 顶栏 --> 菜单背景渐变
+		const onMenuBarGradualChange = () => {
+			setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
+		};
+		// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
+		const onColumnsMenuBarGradualChange = () => {
+			setGraduaFun('.layout-container .layout-columns-aside', getThemeConfig.value.isColumnsMenuBarColorGradual, getThemeConfig.value.columnsMenuBar);
+		};
+		// 2、菜单 / 顶栏 --> 背景渐变函数
+		const setGraduaFun = (el: string, bool: boolean, color: string) => {
+			setTimeout(() => {
+				let els = document.querySelector(el);
+				if (!els) return false;
+				document.documentElement.style.setProperty('--el-menu-bg-color', document.documentElement.style.getPropertyValue('--next-bg-menuBar'));
+				if (bool) els.setAttribute('style', `background:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)}) !important;`);
+				else els.setAttribute('style', ``);
+				setLocalThemeConfig();
+			}, 200);
+		};
+		// 3、界面设置 --> 菜单水平折叠
+		const onThemeConfigChange = () => {
+			setDispatchThemeConfig();
+		};
+		// 3、界面设置 --> 固定 Header
+		const onIsFixedHeaderChange = () => {
+			getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value.isFixedHeader ? false : true;
+			setLocalThemeConfig();
+		};
+		// 3、界面设置 --> 经典布局分割菜单
+		const onClassicSplitMenuChange = () => {
+			getThemeConfig.value.isBreadcrumb = false;
+			setLocalThemeConfig();
+			proxy.mittBus.emit('getBreadcrumbIndexSetFilterRoutes');
+		};
+		// 4、界面显示 --> 侧边栏 Logo
+		const onIsShowLogoChange = () => {
+			getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo ? false : true;
+			setLocalThemeConfig();
+		};
+		// 4、界面显示 --> 面包屑 Breadcrumb
+		const onIsBreadcrumbChange = () => {
+			if (getThemeConfig.value.layout === 'classic') {
+				getThemeConfig.value.isClassicSplitMenu = false;
+			}
+			setLocalThemeConfig();
+		};
+		// 4、界面显示 --> 开启 TagsView 拖拽
+		const onSortableTagsViewChange = () => {
+			proxy.mittBus.emit('openOrCloseSortable');
+			setLocalThemeConfig();
+		};
+		// 4、界面显示 --> 开启 TagsView 共用
+		const onShareTagsViewChange = () => {
+			proxy.mittBus.emit('openShareTagsView');
+			setLocalThemeConfig();
+		};
+		// 4、界面显示 --> 灰色模式/色弱模式
+		const onAddFilterChange = (attr: string) => {
+			if (attr === 'grayscale') {
+				if (getThemeConfig.value.isGrayscale) getThemeConfig.value.isInvert = false;
+			} else {
+				if (getThemeConfig.value.isInvert) getThemeConfig.value.isGrayscale = false;
+			}
+			const cssAttr =
+				attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
+			const appEle: any = document.body;
+			appEle.setAttribute('style', `filter: ${cssAttr}`);
+			setLocalThemeConfig();
+		};
+		// 4、界面显示 --> 深色模式
+		const onAddDarkChange = () => {
+			const body = document.documentElement as HTMLElement;
+			if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
+			else body.setAttribute('data-theme', '');
+		};
+		// 4、界面显示 --> 开启水印
+		const onWartermarkChange = () => {
+			getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
+			setLocalThemeConfig();
+		};
+		// 4、界面显示 --> 水印文案
+		const onWartermarkTextInput = (val: any) => {
+			getThemeConfig.value.wartermarkText = verifyAndSpace(val);
+			if (getThemeConfig.value.wartermarkText === '') return false;
+			if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText);
+			setLocalThemeConfig();
+		};
+		// 5、布局切换
+		const onSetLayout = (layout: string) => {
+			Local.set('oldLayout', layout);
+			if (getThemeConfig.value.layout === layout) return false;
+			if (layout === 'transverse') getThemeConfig.value.isCollapse = false;
+			getThemeConfig.value.layout = layout;
+			getThemeConfig.value.isDrawer = false;
+			initLayoutChangeFun();
+		};
+		// 设置布局切换函数
+		const initLayoutChangeFun = () => {
+			onBgColorPickerChange('menuBar');
+			onBgColorPickerChange('menuBarColor');
+			onBgColorPickerChange('topBar');
+			onBgColorPickerChange('topBarColor');
+			onBgColorPickerChange('columnsMenuBar');
+			onBgColorPickerChange('columnsMenuBarColor');
+		};
+		// 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
+		const onDrawerClose = () => {
+			getThemeConfig.value.isFixedHeaderChange = false;
+			getThemeConfig.value.isShowLogoChange = false;
+			getThemeConfig.value.isDrawer = false;
+			setLocalThemeConfig();
+		};
+		// 布局配置弹窗打开
+		const openDrawer = () => {
+			getThemeConfig.value.isDrawer = true;
+		};
+		// 触发 store 布局配置更新
+		const setDispatchThemeConfig = () => {
+			setLocalThemeConfig();
+			setLocalThemeConfigStyle();
+		};
+		// 存储布局配置
+		const setLocalThemeConfig = () => {
+			Local.remove('themeConfig');
+			Local.set('themeConfig', getThemeConfig.value);
+		};
+		// 存储布局配置全局主题样式（html根标签）
+		const setLocalThemeConfigStyle = () => {
+			Local.set('themeConfigStyle', document.documentElement.style.cssText);
+		};
+		// 一键复制配置
+		const onCopyConfigClick = () => {
+			let copyThemeConfig = Local.get('themeConfig');
+			copyThemeConfig.isDrawer = false;
+			copyText(JSON.stringify(copyThemeConfig)).then(() => {
+				getThemeConfig.value.isDrawer = false;
+			});
+		};
+		// 一键恢复默认
+		const onResetConfigClick = () => {
+			Local.clear();
+			window.location.reload();
+		};
+		// 初始化菜单样式等
+		const initSetStyle = () => {
+			// 2、菜单 / 顶栏 --> 顶栏背景渐变
+			onTopBarGradualChange();
+			// 2、菜单 / 顶栏 --> 菜单背景渐变
+			onMenuBarGradualChange();
+			// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
+			onColumnsMenuBarGradualChange();
+		};
+		onMounted(() => {
+			nextTick(() => {
+				// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
+				if (!Local.get('frequency')) initLayoutChangeFun();
+				Local.set('frequency', 1);
+				// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
+				proxy.mittBus.on('layoutMobileResize', (res: any) => {
+					getThemeConfig.value.layout = res.layout;
+					getThemeConfig.value.isDrawer = false;
+					initLayoutChangeFun();
+					state.isMobile = other.isMobile();
+				});
+				setTimeout(() => {
+					// 默认样式
+					onColorPickerChange();
+					// 灰色模式
+					if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
+					// 色弱模式
+					if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
+					// 深色模式
+					if (getThemeConfig.value.isIsDark) onAddDarkChange();
+					// 开启水印
+					onWartermarkChange();
+					// 语言国际化
+					if (Local.get('themeConfig')) proxy.$i18n.locale = Local.get('themeConfig').globalI18n;
+					// 初始化菜单样式等
+					initSetStyle();
+				}, 100);
+			});
+		});
+		onUnmounted(() => {
+			proxy.mittBus.off('layoutMobileResize', () => {});
+		});
+		return {
+			openDrawer,
+			onColorPickerChange,
+			onBgColorPickerChange,
+			onTopBarGradualChange,
+			onMenuBarGradualChange,
+			onColumnsMenuBarGradualChange,
+			onThemeConfigChange,
+			onIsFixedHeaderChange,
+			onIsShowLogoChange,
+			getThemeConfig,
+			onDrawerClose,
+			onAddFilterChange,
+			onAddDarkChange,
+			onWartermarkChange,
+			onWartermarkTextInput,
+			onSetLayout,
+			setLocalThemeConfig,
+			onClassicSplitMenuChange,
+			onIsBreadcrumbChange,
+			onSortableTagsViewChange,
+			onShareTagsViewChange,
+			onCopyConfigClick,
+			onResetConfigClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-breadcrumb-seting-bar {
+	height: calc(100vh - 50px);
+	padding: 0 15px;
+	:deep(.el-scrollbar__view) {
+		overflow-x: hidden !important;
+	}
+	.layout-breadcrumb-seting-bar-flex {
+		display: flex;
+		align-items: center;
+		margin-bottom: 5px;
+		&-label {
+			flex: 1;
+			color: var(--el-text-color-primary);
+		}
+	}
+	.layout-drawer-content-flex {
+		overflow: hidden;
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		margin: 0 -5px;
+		.layout-drawer-content-item {
+			width: 50%;
+			height: 70px;
+			cursor: pointer;
+			border: 1px solid transparent;
+			position: relative;
+			padding: 5px;
+			.el-container {
+				height: 100%;
+				.el-aside-dark {
+					background-color: var(--next-color-seting-header);
+				}
+				.el-aside {
+					background-color: var(--next-color-seting-aside);
+				}
+				.el-header {
+					background-color: var(--next-color-seting-header);
+				}
+				.el-main {
+					background-color: var(--next-color-seting-main);
+				}
+			}
+			.el-circular {
+				border-radius: 2px;
+				overflow: hidden;
+				border: 1px solid transparent;
+				transition: all 0.3s ease-in-out;
+			}
+			.drawer-layout-active {
+				border: 1px solid;
+				border-color: var(--el-color-primary);
+			}
+			.layout-tips-warp,
+			.layout-tips-warp-active {
+				transition: all 0.3s ease-in-out;
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				border: 1px solid;
+				border-color: var(--el-color-primary-light-5);
+				border-radius: 100%;
+				padding: 4px;
+				.layout-tips-box {
+					transition: inherit;
+					width: 30px;
+					height: 30px;
+					z-index: 9;
+					border: 1px solid;
+					border-color: var(--el-color-primary-light-5);
+					border-radius: 100%;
+					.layout-tips-txt {
+						transition: inherit;
+						position: relative;
+						top: 5px;
+						font-size: 12px;
+						line-height: 1;
+						letter-spacing: 2px;
+						white-space: nowrap;
+						color: var(--el-color-primary-light-5);
+						text-align: center;
+						transform: rotate(30deg);
+						left: -1px;
+						background-color: var(--next-color-seting-main);
+						width: 32px;
+						height: 17px;
+						line-height: 17px;
+					}
+				}
+			}
+			.layout-tips-warp-active {
+				border: 1px solid;
+				border-color: var(--el-color-primary);
+				.layout-tips-box {
+					border: 1px solid;
+					border-color: var(--el-color-primary);
+					.layout-tips-txt {
+						color: var(--el-color-primary) !important;
+						background-color: var(--next-color-seting-main) !important;
+					}
+				}
+			}
+			&:hover {
+				.el-circular {
+					transition: all 0.3s ease-in-out;
+					border: 1px solid;
+					border-color: var(--el-color-primary);
+				}
+				.layout-tips-warp {
+					transition: all 0.3s ease-in-out;
+					border-color: var(--el-color-primary);
+					.layout-tips-box {
+						transition: inherit;
+						border-color: var(--el-color-primary);
+						.layout-tips-txt {
+							transition: inherit;
+							color: var(--el-color-primary) !important;
+							background-color: var(--next-color-seting-main) !important;
+						}
+					}
+				}
+			}
+		}
+	}
+	.copy-config {
+		margin: 10px 0;
+		.copy-config-btn {
+			width: 100%;
+			margin-top: 15px;
+		}
+		.copy-config-btn-reset {
+			width: 100%;
+			margin: 10px 0 0;
+		}
+	}
+}
+</style>
diff --git a/src/layout/navBars/breadcrumb/user.vue b/src/layout/navBars/breadcrumb/user.vue
new file mode 100644
index 0000000..3569f4e
--- /dev/null
+++ b/src/layout/navBars/breadcrumb/user.vue
@@ -0,0 +1,303 @@
+<template>
+	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
+		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
+			<div class="layout-navbars-breadcrumb-user-icon">
+				<i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
+			</div>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
+					<el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
+					<el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
+			<div class="layout-navbars-breadcrumb-user-icon">
+				<i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>
+			</div>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>
+					<el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>
+					<el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
+			<el-icon :title="$t('message.user.title2')">
+				<ele-Search />
+			</el-icon>
+		</div>
+		<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
+			<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
+		</div>
+		<div class="layout-navbars-breadcrumb-user-icon">
+			<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
+				<template #reference>
+					<el-badge :is-dot="true">
+						<el-icon :title="$t('message.user.title4')">
+							<ele-Bell />
+						</el-icon>
+					</el-badge>
+				</template>
+				<template #default>
+					<UserNews />
+				</template>
+			</el-popover>
+		</div>
+		<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
+			<i
+				class="iconfont"
+				:title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
+				:class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
+			></i>
+		</div>
+		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
+			<span class="layout-navbars-breadcrumb-user-link">
+				<img :src="userInfos.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+				{{ userInfos.userName === '' ? 'common' : userInfos.userName }}
+				<el-icon class="el-icon--right">
+					<ele-ArrowDown />
+				</el-icon>
+			</span>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
+					<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
+					<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
+					<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
+					<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>
+					<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+		<Search ref="searchRef" />
+	</div>
+</template>
+
+<script lang="ts">
+import { ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import screenfull from 'screenfull';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '/@/stores/userInfo';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import other from '/@/utils/other';
+import { Session, Local } from '/@/utils/storage';
+import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
+import Search from '/@/layout/navBars/breadcrumb/search.vue';
+import {logout} from "/@/api/login";
+
+export default defineComponent({
+	name: 'layoutBreadcrumbUser',
+	components: { UserNews, Search },
+	setup() {
+		const { t } = useI18n();
+		const { proxy } = <any>getCurrentInstance();
+		const router = useRouter();
+		const stores = useUserInfo();
+		const storesThemeConfig = useThemeConfig();
+		const { userInfos } = storeToRefs(stores);
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const searchRef = ref();
+		const state = reactive({
+			isScreenfull: false,
+			disabledI18n: 'zh-cn',
+			disabledSize: 'large',
+		});
+		// 设置分割样式
+		const layoutUserFlexNum = computed(() => {
+			let num: string | number = '';
+			const { layout, isClassicSplitMenu } = themeConfig.value;
+			const layoutArr: string[] = ['defaults', 'columns'];
+			if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
+			else num = '';
+			return num;
+		});
+		// 全屏点击时
+		const onScreenfullClick = () => {
+			if (!screenfull.isEnabled) {
+				ElMessage.warning('暂不不支持全屏');
+				return false;
+			}
+			screenfull.toggle();
+			screenfull.on('change', () => {
+				if (screenfull.isFullscreen) state.isScreenfull = true;
+				else state.isScreenfull = false;
+			});
+		};
+		// 布局配置 icon 点击时
+		const onLayoutSetingClick = () => {
+			proxy.mittBus.emit('openSetingsDrawer');
+		};
+		// 下拉菜单点击时
+		const onHandleCommandClick = (path: string) => {
+			if (path === 'logOut') {
+				ElMessageBox({
+					closeOnClickModal: false,
+					closeOnPressEscape: false,
+					title: t('message.user.logOutTitle'),
+					message: t('message.user.logOutMessage'),
+					showCancelButton: true,
+					confirmButtonText: t('message.user.logOutConfirm'),
+					cancelButtonText: t('message.user.logOutCancel'),
+					buttonSize: 'default',
+					beforeClose: (action, instance, done) => {
+						if (action === 'confirm') {
+              //后端退出
+              logout().then(()=>{
+                instance.confirmButtonLoading = true;
+                instance.confirmButtonText = t('message.user.logOutExit');
+                setTimeout(() => {
+                  done();
+                  setTimeout(() => {
+                    instance.confirmButtonLoading = false;
+                  }, 300);
+                }, 500);
+              })
+						} else {
+							done();
+						}
+					},
+				})
+					.then(async () => {
+						// 清除缓存/token等
+						Session.clear();
+						// 使用 reload 时，不需要调用 resetRoute() 重置路由
+						window.location.reload();
+					})
+					.catch(() => {});
+			} else if (path === 'wareHouse') {
+				window.open('https://gitee.com/lyt-top/vue-next-admin');
+			} else {
+				router.push(path);
+			}
+		};
+		// 菜单搜索点击
+		const onSearchClick = () => {
+			searchRef.value.openSearch();
+		};
+		// 组件大小改变
+		const onComponentSizeChange = (size: string) => {
+			Local.remove('themeConfig');
+			themeConfig.value.globalComponentSize = size;
+			Local.set('themeConfig', themeConfig.value);
+			initComponentSize();
+			window.location.reload();
+		};
+		// 语言切换
+		const onLanguageChange = (lang: string) => {
+			Local.remove('themeConfig');
+			themeConfig.value.globalI18n = lang;
+			Local.set('themeConfig', themeConfig.value);
+			proxy.$i18n.locale = lang;
+			initI18n();
+			other.useTitle();
+		};
+		// 设置 element plus 组件的国际化
+		const setI18nConfig = (locale: string) => {
+      proxy.mittBus.emit('getI18nConfig',proxy.i18n.global.messages.value[locale]);
+		};
+		// 初始化言语国际化
+		const initI18n = () => {
+			switch (Local.get('themeConfig').globalI18n) {
+				case 'zh-cn':
+					state.disabledI18n = 'zh-cn';
+					setI18nConfig('zh-cn');
+					break;
+				case 'en':
+					state.disabledI18n = 'en';
+					setI18nConfig('en');
+					break;
+				case 'zh-tw':
+					state.disabledI18n = 'zh-tw';
+					setI18nConfig('zh-tw');
+					break;
+			}
+		};
+		// 初始化全局组件大小
+		const initComponentSize = () => {
+			switch (Local.get('themeConfig').globalComponentSize) {
+				case 'large':
+					state.disabledSize = 'large';
+					break;
+				case 'default':
+					state.disabledSize = 'default';
+					break;
+				case 'small':
+					state.disabledSize = 'small';
+					break;
+			}
+		};
+		// 页面加载时
+		onMounted(() => {
+			if (Local.get('themeConfig')) {
+				initI18n();
+				initComponentSize();
+			}
+		});
+		return {
+			userInfos,
+			onLayoutSetingClick,
+			onHandleCommandClick,
+			onScreenfullClick,
+			onSearchClick,
+			onComponentSizeChange,
+			onLanguageChange,
+			searchRef,
+			layoutUserFlexNum,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-breadcrumb-user {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	&-link {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+		&-photo {
+			width: 25px;
+			height: 25px;
+			border-radius: 100%;
+		}
+	}
+	&-icon {
+		padding: 0 10px;
+		cursor: pointer;
+		color: var(--next-bg-topBarColor);
+		height: 50px;
+		line-height: 50px;
+		display: flex;
+		align-items: center;
+		&:hover {
+			background: var(--next-color-user-hover);
+			i {
+				display: inline-block;
+				animation: logoAnimation 0.3s ease-in-out;
+			}
+		}
+	}
+	:deep(.el-dropdown) {
+		color: var(--next-bg-topBarColor);
+	}
+	:deep(.el-badge) {
+		height: 40px;
+		line-height: 40px;
+		display: flex;
+		align-items: center;
+	}
+	:deep(.el-badge__content.is-fixed) {
+		top: 12px;
+	}
+}
+</style>
diff --git a/src/layout/navBars/breadcrumb/userNews.vue b/src/layout/navBars/breadcrumb/userNews.vue
new file mode 100644
index 0000000..99bf204
--- /dev/null
+++ b/src/layout/navBars/breadcrumb/userNews.vue
@@ -0,0 +1,115 @@
+<template>
+	<div class="layout-navbars-breadcrumb-user-news">
+		<div class="head-box">
+			<div class="head-box-title">{{ $t('message.user.newTitle') }}</div>
+			<div class="head-box-btn" v-if="newsList.length > 0" @click="onAllReadClick">{{ $t('message.user.newBtn') }}</div>
+		</div>
+		<div class="content-box">
+			<template v-if="newsList.length > 0">
+				<div class="content-box-item" v-for="(v, k) in newsList" :key="k">
+					<div>{{ v.label }}</div>
+					<div class="content-box-msg">
+						{{ v.value }}
+					</div>
+					<div class="content-box-time">{{ v.time }}</div>
+				</div>
+			</template>
+			<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
+		</div>
+		<div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">{{ $t('message.user.newGo') }}</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'layoutBreadcrumbUserNews',
+	setup() {
+		const state = reactive({
+			newsList: [
+				{
+					label: '关于版本发布的通知',
+					value: 'vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，正式发布时间：2021年02月28日！',
+					time: '2020-12-08',
+				},
+				{
+					label: '关于学习交流的通知',
+					value: 'QQ群号码 665452019，欢迎小伙伴入群学习交流探讨！',
+					time: '2020-12-08',
+				},
+			],
+		});
+		// 全部已读点击
+		const onAllReadClick = () => {
+			state.newsList = [];
+		};
+		// 前往通知中心点击
+		const onGoToGiteeClick = () => {
+			window.open('https://gitee.com/lyt-top/vue-next-admin');
+		};
+		return {
+			onAllReadClick,
+			onGoToGiteeClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-breadcrumb-user-news {
+	.head-box {
+		display: flex;
+		border-bottom: 1px solid var(--el-border-color-lighter);
+		box-sizing: border-box;
+		color: var(--el-text-color-primary);
+		justify-content: space-between;
+		height: 35px;
+		align-items: center;
+		.head-box-btn {
+			color: var(--el-color-primary);
+			font-size: 13px;
+			cursor: pointer;
+			opacity: 0.8;
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+	.content-box {
+		font-size: 13px;
+		.content-box-item {
+			padding-top: 12px;
+			&:last-of-type {
+				padding-bottom: 12px;
+			}
+			.content-box-msg {
+				color: var(--el-text-color-secondary);
+				margin-top: 5px;
+				margin-bottom: 5px;
+			}
+			.content-box-time {
+				color: var(--el-text-color-secondary);
+			}
+		}
+	}
+	.foot-box {
+		height: 35px;
+		color: var(--el-color-primary);
+		font-size: 13px;
+		cursor: pointer;
+		opacity: 0.8;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-top: 1px solid var(--el-border-color-lighter);
+		&:hover {
+			opacity: 1;
+		}
+	}
+	:deep(.el-empty__description p) {
+		font-size: 13px;
+	}
+}
+</style>
diff --git a/src/layout/navBars/index.vue b/src/layout/navBars/index.vue
new file mode 100644
index 0000000..f41a0cf
--- /dev/null
+++ b/src/layout/navBars/index.vue
@@ -0,0 +1,40 @@
+<template>
+	<div class="layout-navbars-container">
+		<BreadcrumbIndex />
+		<TagsView v-if="setShowTagsView" />
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import BreadcrumbIndex from '/@/layout/navBars/breadcrumb/index.vue';
+import TagsView from '/@/layout/navBars/tagsView/tagsView.vue';
+
+export default defineComponent({
+	name: 'layoutNavBars',
+	components: { BreadcrumbIndex, TagsView },
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		// 是否显示 tagsView
+		const setShowTagsView = computed(() => {
+			let { layout, isTagsview } = themeConfig.value;
+			return layout !== 'classic' && isTagsview;
+		});
+		return {
+			setShowTagsView,
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+}
+</style>
diff --git a/src/layout/navBars/tagsView/contextmenu.vue b/src/layout/navBars/tagsView/contextmenu.vue
new file mode 100644
index 0000000..c717aae
--- /dev/null
+++ b/src/layout/navBars/tagsView/contextmenu.vue
@@ -0,0 +1,138 @@
+<template>
+	<transition name="el-zoom-in-center">
+		<div
+			aria-hidden="true"
+			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
+			role="tooltip"
+			data-popper-placement="bottom"
+			:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
+			:key="Math.random()"
+			v-show="isShow"
+		>
+			<ul class="el-dropdown-menu">
+				<template v-for="(v, k) in dropdownList">
+					<li
+						class="el-dropdown-menu__item"
+						aria-disabled="false"
+						tabindex="-1"
+						:key="k"
+						v-if="!v.affix"
+						@click="onCurrentContextmenuClick(v.contextMenuClickId)"
+					>
+						<SvgIcon :name="v.icon" />
+						<span>{{ $t(v.txt) }}</span>
+					</li>
+				</template>
+			</ul>
+			<div class="el-popper__arrow" :style="{ left: `${arrowLeft}px` }"></div>
+		</div>
+	</transition>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted, watch } from 'vue';
+
+export default defineComponent({
+	name: 'layoutTagsViewContextmenu',
+	props: {
+		dropdown: {
+			type: Object,
+			default: () => {
+				return {
+					x: 0,
+					y: 0,
+				};
+			},
+		},
+	},
+	setup(props, { emit }) {
+		const state = reactive({
+			isShow: false,
+			dropdownList: [
+				{ contextMenuClickId: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'ele-RefreshRight' },
+				{ contextMenuClickId: 1, txt: 'message.tagsView.close', affix: false, icon: 'ele-Close' },
+				{ contextMenuClickId: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'ele-CircleClose' },
+				{ contextMenuClickId: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'ele-FolderDelete' },
+				{
+					contextMenuClickId: 4,
+					txt: 'message.tagsView.fullscreen',
+					affix: false,
+					icon: 'iconfont icon-fullscreen',
+				},
+			],
+			item: {},
+			arrowLeft: 10,
+		});
+		// 父级传过来的坐标 x,y 值
+		const dropdowns = computed(() => {
+			// 117 为 `Dropdown 下拉菜单` 的宽度
+			if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
+				return {
+					x: document.documentElement.clientWidth - 117 - 5,
+					y: props.dropdown.y,
+				};
+			} else {
+				return props.dropdown;
+			}
+		});
+		// 当前项菜单点击
+		const onCurrentContextmenuClick = (contextMenuClickId: number) => {
+			emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
+		};
+		// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
+		const openContextmenu = (item: any) => {
+			state.item = item;
+			item.meta.isAffix ? (state.dropdownList[1].affix = true) : (state.dropdownList[1].affix = false);
+			closeContextmenu();
+			setTimeout(() => {
+				state.isShow = true;
+			}, 10);
+		};
+		// 关闭右键菜单
+		const closeContextmenu = () => {
+			state.isShow = false;
+		};
+		// 监听页面监听进行右键菜单的关闭
+		onMounted(() => {
+			document.body.addEventListener('click', closeContextmenu);
+		});
+		// 页面卸载时，移除右键菜单监听事件
+		onUnmounted(() => {
+			document.body.removeEventListener('click', closeContextmenu);
+		});
+		// 监听下拉菜单位置
+		watch(
+			() => props.dropdown,
+			({ x }) => {
+				if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
+				else state.arrowLeft = 10;
+			},
+			{
+				deep: true,
+			}
+		);
+		return {
+			dropdowns,
+			openContextmenu,
+			closeContextmenu,
+			onCurrentContextmenuClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.custom-contextmenu {
+	transform-origin: center top;
+	z-index: 2190;
+	position: fixed;
+	.el-dropdown-menu__item {
+		font-size: 12px !important;
+		white-space: nowrap;
+		i {
+			font-size: 12px !important;
+		}
+	}
+}
+</style>
diff --git a/src/layout/navBars/tagsView/tagsView.vue b/src/layout/navBars/tagsView/tagsView.vue
new file mode 100644
index 0000000..83f272d
--- /dev/null
+++ b/src/layout/navBars/tagsView/tagsView.vue
@@ -0,0 +1,734 @@
+<template>
+	<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }">
+		<el-scrollbar ref="scrollbarRef" @wheel.prevent="onHandleScroll">
+			<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
+				<li
+					v-for="(v, k) in tagsViewList"
+					:key="k"
+					class="layout-navbars-tagsview-ul-li"
+					:data-url="v.url"
+					:class="{ 'is-active': isActive(v) }"
+					@contextmenu.prevent="onContextmenu(v, $event)"
+					@click="onTagsClick(v, k)"
+					:ref="
+						(el) => {
+							if (el) tagsRefs[k] = el;
+						}
+					"
+				>
+					<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont" v-if="isActive(v)"></i>
+					<SvgIcon :name="v.meta.icon" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" class="pr5" />
+					<span>{{ setTagsViewNameI18n(v) }}</span>
+					<template v-if="isActive(v)">
+						<SvgIcon
+							name="ele-RefreshRight"
+							class="ml5 layout-navbars-tagsview-ul-li-refresh"
+							@click.stop="refreshCurrentTagsView($route.fullPath)"
+						/>
+						<SvgIcon
+							name="ele-Close"
+							class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
+							v-if="!v.meta.isAffix"
+							@click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
+						/>
+					</template>
+					<SvgIcon
+						name="ele-Close"
+						class="layout-navbars-tagsview-ul-li-icon layout-icon-three"
+						v-if="!v.meta.isAffix"
+						@click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
+					/>
+				</li>
+			</ul>
+		</el-scrollbar>
+		<Contextmenu :dropdown="dropdown" ref="contextmenuRef" @currentContextmenuClick="onCurrentContextmenuClick" />
+	</div>
+</template>
+
+<script lang="ts">
+import {
+	toRefs,
+	reactive,
+	onMounted,
+	computed,
+	ref,
+	nextTick,
+	onBeforeUpdate,
+	onBeforeMount,
+	onUnmounted,
+	getCurrentInstance,
+	watch,
+	defineComponent,
+} from 'vue';
+import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
+import Sortable from 'sortablejs';
+import { ElMessage } from 'element-plus';
+import { storeToRefs } from 'pinia';
+import pinia from '/@/stores/index';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useKeepALiveNames } from '/@/stores/keepAliveNames';
+import { Session } from '/@/utils/storage';
+import { isObjectValueEqual } from '/@/utils/arrayOperation';
+import other from '/@/utils/other';
+import Contextmenu from '/@/layout/navBars/tagsView/contextmenu.vue';
+
+// 定义接口来定义对象的类型
+interface TagsViewState {
+	routeActive: string;
+	routePath: string | unknown;
+	dropdown: {
+		x: string | number;
+		y: string | number;
+	};
+	sortable: any;
+	tagsRefsIndex: number;
+	tagsViewList: any[];
+	tagsViewRoutesList: any[];
+}
+interface RouteParams {
+	path: string;
+	url: string;
+	query: object;
+	params: object;
+}
+interface CurrentContextmenu {
+	meta: {
+		isDynamic: boolean;
+	};
+	params: any;
+	query: any;
+	path: string;
+	contextMenuClickId: string | number;
+}
+
+export default defineComponent({
+	name: 'layoutTagsView',
+	components: { Contextmenu },
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const tagsRefs = ref<any[]>([]);
+		const scrollbarRef = ref();
+		const contextmenuRef = ref();
+		const tagsUlRef = ref();
+		const stores = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
+		const storesKeepALiveNames = useKeepALiveNames();
+		const route = useRoute();
+		const router = useRouter();
+		const state = reactive<TagsViewState>({
+			routeActive: '',
+			routePath: route.path,
+			dropdown: { x: '', y: '' },
+			sortable: '',
+			tagsRefsIndex: 0,
+			tagsViewList: [],
+			tagsViewRoutesList: [],
+		});
+		// 动态设置 tagsView 风格样式
+		const setTagsStyle = computed(() => {
+			return themeConfig.value.tagsStyle;
+		});
+		// 获取布局配置信息
+		const getThemeConfig = computed(() => {
+			return themeConfig.value;
+		});
+		// 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
+		const setTagsViewNameI18n = computed(() => {
+			return (v: any) => {
+				return other.setTagsViewNameI18n(v);
+			};
+		});
+		// 设置 tagsView 高亮
+		const isActive = (v: RouteParams) => {
+			if (getThemeConfig.value.isShareTagsView) {
+				return v.path === state.routePath;
+			} else {
+				if ((v.query && Object.keys(v.query).length) || (v.params && Object.keys(v.params).length)) {
+					// 普通传参
+					return v.url ? v.url === state.routeActive : v.path === state.routeActive;
+				} else {
+					// 通过 name 传参，params 取值，刷新页面参数消失
+					// https://gitee.com/lyt-top/vue-next-admin/issues/I51RS9
+					return v.path === state.routePath;
+				}
+			}
+		};
+		// 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
+		const addBrowserSetSession = (tagsViewList: Array<object>) => {
+			Session.set('tagsViewList', tagsViewList);
+		};
+		// 获取 vuex 中的 tagsViewRoutes 列表
+		const getTagsViewRoutes = async () => {
+			state.routeActive = await setTagsViewHighlight(route);
+			state.routePath = (await route.meta.isDynamic) ? route.meta.isDynamicPath : route.path;
+			state.tagsViewList = [];
+			state.tagsViewRoutesList = tagsViewRoutes.value;
+			initTagsView();
+		};
+		// vuex 中获取路由信息：如果是设置了固定的（isAffix），进行初始化显示
+		const initTagsView = async () => {
+			if (Session.get('tagsViewList') && getThemeConfig.value.isCacheTagsView) {
+				state.tagsViewList = await Session.get('tagsViewList');
+			} else {
+				await state.tagsViewRoutesList.map((v: any) => {
+					if (v.meta.isAffix && !v.meta.isHide) {
+						v.url = setTagsViewHighlight(v);
+						state.tagsViewList.push({ ...v });
+						storesKeepALiveNames.addCachedView(v);
+					}
+				});
+				await addTagsView(route.path, route);
+			}
+			// 初始化当前元素(li)的下标
+			getTagsRefsIndex(getThemeConfig.value.isShareTagsView ? state.routePath : state.routeActive);
+		};
+		// 处理可开启多标签详情，单标签详情（动态路由（xxx/:id/:name"），普通路由处理）
+		const solveAddTagsView = async (path: string, to?: any) => {
+			let isDynamicPath = to.meta.isDynamic ? to.meta.isDynamicPath : path;
+			let current = state.tagsViewList.filter(
+				(v: any) =>
+					v.path === isDynamicPath &&
+					isObjectValueEqual(
+						to.meta.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
+						to.meta.isDynamic ? (to?.params ? to?.params : null) : to?.query ? to?.query : null
+					)
+			);
+			if (current.length <= 0) {
+				// 防止：Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.
+				let findItem = state.tagsViewRoutesList.find((v: any) => v.path === isDynamicPath);
+				if (!findItem) return false;
+				if (findItem.meta.isAffix) return false;
+				if (findItem.meta.isLink && !findItem.meta.isIframe) return false;
+				to.meta.isDynamic ? (findItem.params = to.params) : (findItem.query = to.query);
+				findItem.url = setTagsViewHighlight(findItem);
+				state.tagsViewList.push({ ...findItem });
+				await storesKeepALiveNames.addCachedView(findItem);
+				addBrowserSetSession(state.tagsViewList);
+			}
+		};
+		// 处理单标签时，第二次的值未覆盖第一次的 tagsViewList 值（Session Storage）
+		const singleAddTagsView = (path: string, to?: any) => {
+			let isDynamicPath = to.meta.isDynamic ? to.meta.isDynamicPath : path;
+			state.tagsViewList.forEach((v) => {
+				if (
+					v.path === isDynamicPath &&
+					!isObjectValueEqual(
+						to.meta.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
+						to.meta.isDynamic ? (to?.params ? to?.params : null) : to?.query ? to?.query : null
+					)
+				) {
+					to.meta.isDynamic ? (v.params = to.params) : (v.query = to.query);
+					v.url = setTagsViewHighlight(v);
+					addBrowserSetSession(state.tagsViewList);
+				}
+			});
+		};
+		// 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中（可开启多标签详情，单标签详情）
+		const addTagsView = (path: string, to?: any) => {
+			// 防止拿取不到路由信息
+			nextTick(async () => {
+				// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+				let item: any = '';
+				if (to && to.meta.isDynamic) {
+					// 动态路由（xxx/:id/:name"）：参数不同，开启多个 tagsview
+					if (!getThemeConfig.value.isShareTagsView) await solveAddTagsView(path, to);
+					else await singleAddTagsView(path, to);
+					if (state.tagsViewList.some((v: any) => v.path === to.meta.isDynamicPath)) return false;
+					item = state.tagsViewRoutesList.find((v: any) => v.path === to.meta.isDynamicPath);
+				} else {
+					// 普通路由：参数不同，开启多个 tagsview
+					if (!getThemeConfig.value.isShareTagsView) await solveAddTagsView(path, to);
+					else await singleAddTagsView(path, to);
+					if (state.tagsViewList.some((v: any) => v.path === path)) return false;
+					item = state.tagsViewRoutesList.find((v: any) => v.path === path);
+				}
+				if (!item) return false;
+				if (item.meta.isLink && !item.meta.isIframe) return false;
+				if (to && to.meta.isDynamic) item.params = to?.params ? to?.params : route.params;
+				else item.query = to?.query ? to?.query : route.query;
+				item.url = setTagsViewHighlight(item);
+				await storesKeepALiveNames.addCachedView(item);
+				await state.tagsViewList.push({ ...item });
+				await addBrowserSetSession(state.tagsViewList);
+			});
+		};
+		// 2、刷新当前 tagsView：
+		const refreshCurrentTagsView = async (fullPath: string) => {
+			const item = state.tagsViewList.find((v: any) => (getThemeConfig.value.isShareTagsView ? v.path === fullPath : v.url === fullPath));
+			if (item != null) {
+				await storesKeepALiveNames.delCachedView(item);
+				proxy.mittBus.emit('onTagsViewRefreshRouterView', fullPath);
+				if (item.meta.isKeepAlive) storesKeepALiveNames.addCachedView(item);
+			}
+		};
+		// 3、关闭当前 tagsView：如果是设置了固定的（isAffix），不可以关闭
+		const closeCurrentTagsView = (path: string) => {
+			state.tagsViewList.map((v: any, k: number, arr: any) => {
+				if (!v.meta.isAffix) {
+					if (getThemeConfig.value.isShareTagsView ? v.path === path : v.url === path) {
+						storesKeepALiveNames.delCachedView(v);
+						state.tagsViewList.splice(k, 1);
+						setTimeout(() => {
+							if (state.tagsViewList.length === k && getThemeConfig.value.isShareTagsView ? state.routePath === path : state.routeActive === path) {
+								// 最后一个且高亮时
+								if (arr[arr.length - 1].meta.isDynamic) {
+									// 动态路由（xxx/:id/:name"）
+									if (k !== arr.length) router.push({ name: arr[k].name, params: arr[k].params });
+									else router.push({ name: arr[arr.length - 1].name, params: arr[arr.length - 1].params });
+								} else {
+									// 普通路由
+									if (k !== arr.length) router.push({ path: arr[k].path, query: arr[k].query });
+									else router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
+								}
+							} else {
+								// 非最后一个且高亮时，跳转到下一个
+								if (state.tagsViewList.length !== k && getThemeConfig.value.isShareTagsView ? state.routePath === path : state.routeActive === path) {
+									if (arr[k].meta.isDynamic) {
+										// 动态路由（xxx/:id/:name"）
+										router.push({ name: arr[k].name, params: arr[k].params });
+									} else {
+										// 普通路由
+										router.push({ path: arr[k].path, query: arr[k].query });
+									}
+								}
+							}
+						}, 0);
+					}
+				}
+			});
+			addBrowserSetSession(state.tagsViewList);
+		};
+		// 4、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭
+		const closeOtherTagsView = (path: string) => {
+			if (Session.get('tagsViewList')) {
+				state.tagsViewList = [];
+				Session.get('tagsViewList').map((v: any) => {
+					if (v.meta.isAffix && !v.meta.isHide) {
+						v.url = setTagsViewHighlight(v);
+						storesKeepALiveNames.delOthersCachedViews(v);
+						state.tagsViewList.push({ ...v });
+					}
+				});
+				addTagsView(path, route);
+				addBrowserSetSession(state.tagsViewList);
+			}
+		};
+		// 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
+		const closeAllTagsView = () => {
+			if (Session.get('tagsViewList')) {
+				storesKeepALiveNames.delAllCachedViews();
+				state.tagsViewList = [];
+				Session.get('tagsViewList').map((v: any) => {
+					if (v.meta.isAffix && !v.meta.isHide) {
+						v.url = setTagsViewHighlight(v);
+						state.tagsViewList.push({ ...v });
+						router.push({ path: state.tagsViewList[state.tagsViewList.length - 1].path });
+					}
+				});
+				addBrowserSetSession(state.tagsViewList);
+			}
+		};
+		// 6、开启当前页面全屏
+		const openCurrenFullscreen = async (path: string) => {
+			const item = state.tagsViewList.find((v: any) => (getThemeConfig.value.isShareTagsView ? v.path === path : v.url === path));
+			if (item.meta.isDynamic) await router.push({ name: item.name, params: item.params });
+			else await router.push({ name: item.name, query: item.query });
+			stores.setCurrenFullscreen(true);
+		};
+		// 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息
+		// 防止 tagsView 非当前页演示时，操作异常
+		const getCurrentRouteItem = (path: string, cParams: any) => {
+			const itemRoute = Session.get('tagsViewList') ? Session.get('tagsViewList') : state.tagsViewList;
+			return itemRoute.find((v: any) => {
+				if (
+					v.path === path &&
+					isObjectValueEqual(
+						v.meta.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
+						cParams && Object.keys(cParams ? cParams : {}).length > 0 ? cParams : null
+					)
+				) {
+					return v;
+				} else if (v.path === path && Object.keys(cParams ? cParams : {}).length <= 0) {
+					return v;
+				}
+			});
+		};
+		// 当前项右键菜单点击
+		const onCurrentContextmenuClick = async (item: CurrentContextmenu) => {
+			const cParams = item.meta.isDynamic ? item.params : item.query;
+			if (!getCurrentRouteItem(item.path, cParams)) return ElMessage({ type: 'warning', message: '请正确输入路径及完整参数（query、params）' });
+			const { path, name, params, query, meta, url } = getCurrentRouteItem(item.path, cParams);
+			switch (item.contextMenuClickId) {
+				case 0:
+					// 刷新当前
+					if (meta.isDynamic) await router.push({ name, params });
+					else await router.push({ path, query });
+					refreshCurrentTagsView(route.fullPath);
+					break;
+				case 1:
+					// 关闭当前
+					closeCurrentTagsView(getThemeConfig.value.isShareTagsView ? path : url);
+					break;
+				case 2:
+					// 关闭其它
+					if (meta.isDynamic) await router.push({ name, params });
+					else await router.push({ path, query });
+					closeOtherTagsView(path);
+					break;
+				case 3:
+					// 关闭全部
+					closeAllTagsView();
+					break;
+				case 4:
+					// 开启当前页面全屏
+					openCurrenFullscreen(getThemeConfig.value.isShareTagsView ? path : url);
+					break;
+			}
+		};
+		// 右键点击时：传 x,y 坐标值到子组件中（props）
+		const onContextmenu = (v: any, e: any) => {
+			const { clientX, clientY } = e;
+			state.dropdown.x = clientX;
+			state.dropdown.y = clientY;
+			contextmenuRef.value.openContextmenu(v);
+		};
+		// 当前的 tagsView 项点击时
+		const onTagsClick = (v: any, k: number) => {
+			state.tagsRefsIndex = k;
+			router.push(v);
+		};
+		// 处理 tagsView 高亮（多标签详情时使用，单标签详情未使用）
+		const setTagsViewHighlight = (v: any) => {
+			let params = v.query && Object.keys(v.query).length > 0 ? v.query : v.params;
+			if (!params || Object.keys(params).length <= 0) return v.path;
+			let path = '';
+			for (let i in params) {
+				path += params[i];
+			}
+			// 判断是否是动态路由（xxx/:id/:name"）
+			return `${v.meta.isDynamic ? v.meta.isDynamicPath : v.path}-${path}`;
+		};
+		// 更新滚动条显示
+		const updateScrollbar = () => {
+			proxy.$refs.scrollbarRef.update();
+		};
+		// 鼠标滚轮滚动
+		const onHandleScroll = (e: any) => {
+			proxy.$refs.scrollbarRef.$refs.wrap$.scrollLeft += e.wheelDelta / 4;
+		};
+		// tagsView 横向滚动
+		const tagsViewmoveToCurrentTag = () => {
+			nextTick(() => {
+				if (tagsRefs.value.length <= 0) return false;
+				// 当前 li 元素
+				let liDom = tagsRefs.value[state.tagsRefsIndex];
+				// 当前 li 元素下标
+				let liIndex = state.tagsRefsIndex;
+				// 当前 ul 下 li 元素总长度
+				let liLength = tagsRefs.value.length;
+				// 最前 li
+				let liFirst: any = tagsRefs.value[0];
+				// 最后 li
+				let liLast: any = tagsRefs.value[tagsRefs.value.length - 1];
+				// 当前滚动条的值
+				let scrollRefs = proxy.$refs.scrollbarRef.$refs.wrap$;
+				// 当前滚动条滚动宽度
+				let scrollS = scrollRefs.scrollWidth;
+				// 当前滚动条偏移宽度
+				let offsetW = scrollRefs.offsetWidth;
+				// 当前滚动条偏移距离
+				let scrollL = scrollRefs.scrollLeft;
+				// 上一个 tags li dom
+				let liPrevTag: any = tagsRefs.value[state.tagsRefsIndex - 1];
+				// 下一个 tags li dom
+				let liNextTag: any = tagsRefs.value[state.tagsRefsIndex + 1];
+				// 上一个 tags li dom 的偏移距离
+				let beforePrevL: any = '';
+				// 下一个 tags li dom 的偏移距离
+				let afterNextL: any = '';
+				if (liDom === liFirst) {
+					// 头部
+					scrollRefs.scrollLeft = 0;
+				} else if (liDom === liLast) {
+					// 尾部
+					scrollRefs.scrollLeft = scrollS - offsetW;
+				} else {
+					// 非头/尾部
+					if (liIndex === 0) beforePrevL = liFirst.offsetLeft - 5;
+					else beforePrevL = liPrevTag?.offsetLeft - 5;
+					if (liIndex === liLength) afterNextL = liLast.offsetLeft + liLast.offsetWidth + 5;
+					else afterNextL = liNextTag.offsetLeft + liNextTag.offsetWidth + 5;
+					if (afterNextL > scrollL + offsetW) {
+						scrollRefs.scrollLeft = afterNextL - offsetW;
+					} else if (beforePrevL < scrollL) {
+						scrollRefs.scrollLeft = beforePrevL;
+					}
+				}
+				// 更新滚动条，防止不出现
+				updateScrollbar();
+			});
+		};
+		// 获取 tagsView 的下标：用于处理 tagsView 点击时的横向滚动
+		const getTagsRefsIndex = (path: string | unknown) => {
+			nextTick(async () => {
+				// await 使用该写法，防止拿取不到 tagsViewList 列表数据不完整
+				let tagsViewList = await state.tagsViewList;
+				state.tagsRefsIndex = tagsViewList.findIndex((v: any) => {
+					if (getThemeConfig.value.isShareTagsView) {
+						return v.path === path;
+					} else {
+						return v.url === path;
+					}
+				});
+				// 添加初始化横向滚动条移动到对应位置
+				tagsViewmoveToCurrentTag();
+			});
+		};
+		// 设置 tagsView 可以进行拖拽
+		const initSortable = async () => {
+			const el = <HTMLElement>document.querySelector('.layout-navbars-tagsview-ul');
+			if (!el) return false;
+			state.sortable.el && state.sortable.destroy();
+			state.sortable = Sortable.create(el, {
+				animation: 300,
+				dataIdAttr: 'data-url',
+				disabled: getThemeConfig.value.isSortableTagsView ? false : true,
+				onEnd: () => {
+					const sortEndList: any = [];
+					state.sortable.toArray().map((val: any) => {
+						state.tagsViewList.map((v: any) => {
+							if (v.url === val) sortEndList.push({ ...v });
+						});
+					});
+					addBrowserSetSession(sortEndList);
+				},
+			});
+		};
+		// 拖动问题，https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI
+		const onSortableResize = async () => {
+			await initSortable();
+			if (other.isMobile()) state.sortable.el && state.sortable.destroy();
+		};
+		// 页面加载前
+		onBeforeMount(() => {
+			// 初始化，防止手机端直接访问时还可以拖拽
+			onSortableResize();
+			// 拖动问题，https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI
+			window.addEventListener('resize', onSortableResize);
+			// 监听非本页面调用 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
+			proxy.mittBus.on('onCurrentContextmenuClick', (data: CurrentContextmenu) => {
+				onCurrentContextmenuClick(data);
+			});
+			// 监听布局配置界面开启/关闭拖拽
+			proxy.mittBus.on('openOrCloseSortable', () => {
+				initSortable();
+			});
+			// 监听布局配置开启 TagsView 共用，为了演示还原默认值
+			proxy.mittBus.on('openShareTagsView', () => {
+				if (getThemeConfig.value.isShareTagsView) {
+					router.push('/home');
+					state.tagsViewList = [];
+					state.tagsViewRoutesList.map((v: any) => {
+						if (v.meta.isAffix && !v.meta.isHide) {
+							v.url = setTagsViewHighlight(v);
+							state.tagsViewList.push({ ...v });
+						}
+					});
+				}
+			});
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			// 取消非本页面调用监听
+			proxy.mittBus.off('onCurrentContextmenuClick', () => {});
+			// 取消监听布局配置界面开启/关闭拖拽
+			proxy.mittBus.off('openOrCloseSortable', () => {});
+			// 取消监听布局配置开启 TagsView 共用
+			proxy.mittBus.off('openShareTagsView', () => {});
+			// 取消窗口 resize 监听
+			window.removeEventListener('resize', onSortableResize);
+		});
+		// 页面更新时
+		onBeforeUpdate(() => {
+			tagsRefs.value = [];
+		});
+		// 页面加载时
+		onMounted(() => {
+			// 初始化 pinia 中的 tagsViewRoutes 列表
+			getTagsViewRoutes();
+			initSortable();
+		});
+		// 路由更新时（组件内生命钩子）
+		onBeforeRouteUpdate(async (to) => {
+			state.routeActive = setTagsViewHighlight(to);
+			state.routePath = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
+			await addTagsView(to.path, to);
+			getTagsRefsIndex(getThemeConfig.value.isShareTagsView ? state.routePath : state.routeActive);
+		});
+		// 监听路由的变化，动态赋值给 tagsView
+		watch(
+			pinia.state,
+			(val) => {
+				if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
+				getTagsViewRoutes();
+			},
+			{
+				deep: true,
+			}
+		);
+		return {
+			isActive,
+			onContextmenu,
+			onTagsClick,
+			tagsRefs,
+			contextmenuRef,
+			scrollbarRef,
+			tagsUlRef,
+			onHandleScroll,
+			getThemeConfig,
+			setTagsStyle,
+			setTagsViewNameI18n,
+			refreshCurrentTagsView,
+			closeCurrentTagsView,
+			onCurrentContextmenuClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-tagsview {
+	background-color: var(--el-color-white);
+	border-bottom: 1px solid var(--next-border-color-light);
+	position: relative;
+	z-index: 4;
+	:deep(.el-scrollbar__wrap) {
+		overflow-x: auto !important;
+	}
+	&-ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		height: 34px;
+		display: flex;
+		align-items: center;
+		color: var(--el-text-color-regular);
+		font-size: 12px;
+		white-space: nowrap;
+		padding: 0 15px;
+		&-li {
+			height: 26px;
+			line-height: 26px;
+			display: flex;
+			align-items: center;
+			border: 1px solid var(--el-border-color-lighter);
+			padding: 0 15px;
+			margin-right: 5px;
+			border-radius: 2px;
+			position: relative;
+			z-index: 0;
+			cursor: pointer;
+			justify-content: space-between;
+			&:hover {
+				background-color: var(--el-color-primary-light-9);
+				color: var(--el-color-primary);
+				border-color: var(--el-color-primary-light-5);
+			}
+			&-iconfont {
+				position: relative;
+				left: -5px;
+				font-size: 12px;
+			}
+			&-icon {
+				border-radius: 100%;
+				position: relative;
+				height: 14px;
+				width: 14px;
+				text-align: center;
+				line-height: 14px;
+				right: -5px;
+				&:hover {
+					color: var(--el-color-white);
+					background-color: var(--el-color-primary-light-3);
+				}
+			}
+			.layout-icon-active {
+				display: block;
+			}
+			.layout-icon-three {
+				display: none;
+			}
+		}
+		.is-active {
+			color: var(--el-color-white);
+			background: var(--el-color-primary);
+			border-color: var(--el-color-primary);
+			transition: border-color 3s ease;
+		}
+	}
+	// 风格4
+	.tags-style-four {
+		.layout-navbars-tagsview-ul-li {
+			margin-right: 0 !important;
+			border: none !important;
+			position: relative;
+			border-radius: 3px !important;
+			.layout-icon-active {
+				display: none;
+			}
+			.layout-icon-three {
+				display: block;
+			}
+			&:hover {
+				background: none !important;
+			}
+		}
+		.is-active {
+			background: none !important;
+			color: var(--el-color-primary) !important;
+		}
+	}
+	// 风格5
+	.tags-style-five {
+		align-items: flex-end;
+		.tags-style-five-svg {
+			-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
+				12 27 15;
+		}
+		.layout-navbars-tagsview-ul-li {
+			padding: 0 5px;
+			border-width: 15px 27px 15px;
+			border-style: solid;
+			border-color: transparent;
+			margin: 0 -15px;
+			.layout-icon-active,
+			.layout-navbars-tagsview-ul-li-iconfont,
+			.layout-navbars-tagsview-ul-li-refresh {
+				display: none;
+			}
+			.layout-icon-three {
+				display: block;
+			}
+			&:hover {
+				@extend .tags-style-five-svg;
+				background: var(--el-color-primary-light-9);
+				color: unset;
+			}
+		}
+		.is-active {
+			@extend .tags-style-five-svg;
+			background: var(--el-color-primary-light-9) !important;
+			color: var(--el-color-primary) !important;
+			z-index: 1;
+		}
+	}
+}
+.layout-navbars-tagsview-shadow {
+	box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;
+}
+</style>
diff --git a/src/layout/navMenu/horizontal.vue b/src/layout/navMenu/horizontal.vue
new file mode 100644
index 0000000..022668b
--- /dev/null
+++ b/src/layout/navMenu/horizontal.vue
@@ -0,0 +1,157 @@
+<template>
+	<div class="el-menu-horizontal-warp">
+		<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
+			<el-menu router :default-active="defaultActive" :ellipsis="false" background-color="transparent" mode="horizontal">
+				<template v-for="val in menuLists">
+					<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
+						<template #title>
+							<SvgIcon :name="val.meta.icon" />
+							<span>{{ $t(val.meta.title) }}</span>
+						</template>
+						<SubItem :chil="val.children" />
+					</el-sub-menu>
+					<template v-else>
+						<el-menu-item :index="val.path" :key="val.path">
+							<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
+								<SvgIcon :name="val.meta.icon" />
+								{{ $t(val.meta.title) }}
+							</template>
+							<template #title v-else>
+								<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">
+									<SvgIcon :name="val.meta.icon" />
+									{{ $t(val.meta.title) }}
+								</a>
+							</template>
+						</el-menu-item>
+					</template>
+				</template>
+			</el-menu>
+		</el-scrollbar>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, nextTick, onBeforeMount } from 'vue';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useRoutesList } from '/@/stores/routesList';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import SubItem from '/@/layout/navMenu/subItem.vue';
+
+export default defineComponent({
+	name: 'navMenuHorizontal',
+	components: { SubItem },
+	props: {
+		menuList: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	setup(props) {
+		const { proxy } = <any>getCurrentInstance();
+		const stores = useRoutesList();
+		const storesThemeConfig = useThemeConfig();
+		const { routesList } = storeToRefs(stores);
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const route = useRoute();
+		const state = reactive({
+			defaultActive: null,
+		});
+		// 获取父级菜单数据
+		const menuLists = computed(() => {
+			return <any>props.menuList;
+		});
+		// 设置横向滚动条可以鼠标滚轮滚动
+		const onElMenuHorizontalScroll = (e: any) => {
+			const eventDelta = e.wheelDelta || -e.deltaY * 40;
+			proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap$.scrollLeft = proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap$.scrollLeft + eventDelta / 4;
+		};
+		// 初始化数据，页面刷新时，滚动条滚动到对应位置
+		const initElMenuOffsetLeft = () => {
+			nextTick(() => {
+				let els: any = document.querySelector('.el-menu.el-menu--horizontal li.is-active');
+				if (!els) return false;
+				proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap$.scrollLeft = els.offsetLeft;
+			});
+		};
+		// 路由过滤递归函数
+		const filterRoutesFun = (arr: Array<string>) => {
+			return arr
+				.filter((item: any) => !item.meta.isHide)
+				.map((item: any) => {
+					item = Object.assign({}, item);
+					if (item.children) item.children = filterRoutesFun(item.children);
+					return item;
+				});
+		};
+		// 传送当前子级数据到菜单中
+		const setSendClassicChildren = (path: string) => {
+			const currentPathSplit = path.split('/');
+			let currentData: any = {};
+			filterRoutesFun(routesList.value).map((v, k) => {
+				if (v.path === `/${currentPathSplit[1]}`) {
+					v['k'] = k;
+					currentData['item'] = [{ ...v }];
+					currentData['children'] = [{ ...v }];
+					if (v.children) currentData['children'] = v.children;
+				}
+			});
+			return currentData;
+		};
+		// 设置页面当前路由高亮
+		const setCurrentRouterHighlight = (currentRoute: any) => {
+			const { path, meta } = currentRoute;
+			if (themeConfig.value.layout === 'classic') {
+				(<any>state.defaultActive) = `/${path.split('/')[1]}`;
+			} else {
+				const pathSplit = meta.isDynamic ? meta.isDynamicPath.split('/') : path.split('/');
+				if (pathSplit.length >= 4 && meta.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/');
+				else state.defaultActive = path;
+			}
+		};
+		// 页面加载前
+		onBeforeMount(() => {
+			setCurrentRouterHighlight(route);
+		});
+		// 页面加载时
+		onMounted(() => {
+			initElMenuOffsetLeft();
+		});
+		// 路由更新时
+		onBeforeRouteUpdate((to) => {
+			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			setCurrentRouterHighlight(to);
+			// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
+			let { layout, isClassicSplitMenu } = themeConfig.value;
+			if (layout === 'classic' && isClassicSplitMenu) {
+				proxy.mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path));
+			}
+		});
+		return {
+			menuLists,
+			onElMenuHorizontalScroll,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.el-menu-horizontal-warp {
+	flex: 1;
+	overflow: hidden;
+	margin-right: 30px;
+	:deep(.el-scrollbar__bar.is-vertical) {
+		display: none;
+	}
+	:deep(a) {
+		width: 100%;
+	}
+	.el-menu.el-menu--horizontal {
+		display: flex;
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+	}
+}
+</style>
diff --git a/src/layout/navMenu/subItem.vue b/src/layout/navMenu/subItem.vue
new file mode 100644
index 0000000..3fcefd3
--- /dev/null
+++ b/src/layout/navMenu/subItem.vue
@@ -0,0 +1,48 @@
+<template>
+	<template v-for="val in chils">
+		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
+			<template #title>
+				<SvgIcon :name="val.meta.icon" />
+				<span>{{ $t(val.meta.title) }}</span>
+			</template>
+			<sub-item :chil="val.children" />
+		</el-sub-menu>
+		<template v-else>
+			<el-menu-item :index="val.path" :key="val.path">
+				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
+					<SvgIcon :name="val.meta.icon" />
+					<span>{{ $t(val.meta.title) }}</span>
+				</template>
+				<template v-else>
+					<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">
+						<SvgIcon :name="val.meta.icon" />
+						{{ $t(val.meta.title) }}
+					</a>
+				</template>
+			</el-menu-item>
+		</template>
+	</template>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'navMenuSubItem',
+	props: {
+		chil: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	setup(props) {
+		// 获取父级菜单数据
+		const chils = computed(() => {
+			return <any>props.chil;
+		});
+		return {
+			chils,
+		};
+	},
+});
+</script>
diff --git a/src/layout/navMenu/vertical.vue b/src/layout/navMenu/vertical.vue
new file mode 100644
index 0000000..1bfa825
--- /dev/null
+++ b/src/layout/navMenu/vertical.vue
@@ -0,0 +1,101 @@
+<template>
+	<el-menu
+		router
+		:default-active="defaultActive"
+		background-color="transparent"
+		:collapse="isCollapse"
+		:unique-opened="getThemeConfig.isUniqueOpened"
+		:collapse-transition="false"
+	>
+		<template v-for="val in menuLists">
+			<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
+				<template #title>
+					<SvgIcon :name="val.meta.icon" />
+					<span>{{ $t(val.meta.title) }}</span>
+				</template>
+				<SubItem :chil="val.children" />
+			</el-sub-menu>
+			<template v-else>
+				<el-menu-item :index="val.path" :key="val.path">
+					<SvgIcon :name="val.meta.icon" />
+					<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
+						<span>{{ $t(val.meta.title) }}</span>
+					</template>
+					<template #title v-else>
+						<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">{{ $t(val.meta.title) }}</a>
+					</template>
+				</el-menu-item>
+			</template>
+		</template>
+	</el-menu>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, defineComponent, onMounted, watch } from 'vue';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import SubItem from '/@/layout/navMenu/subItem.vue';
+
+export default defineComponent({
+	name: 'navMenuVertical',
+	components: { SubItem },
+	props: {
+		menuList: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	setup(props) {
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const route = useRoute();
+		const state = reactive({
+			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
+			isCollapse: false,
+		});
+		// 获取父级菜单数据
+		const menuLists = computed(() => {
+			return <any>props.menuList;
+		});
+		// 获取布局配置信息
+		const getThemeConfig = computed(() => {
+			return themeConfig.value;
+		});
+		// 菜单高亮（详情时，父级高亮）
+		const setParentHighlight = (currentRoute: any) => {
+			const { path, meta } = currentRoute;
+			const pathSplit = meta.isDynamic ? meta.isDynamicPath.split('/') : path.split('/');
+			if (pathSplit.length >= 4 && meta.isHide) return pathSplit.splice(0, 3).join('/');
+			else return path;
+		};
+		// 设置菜单的收起/展开
+		watch(
+			themeConfig.value,
+			() => {
+				document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
+			},
+			{
+				immediate: true,
+			}
+		);
+		// 页面加载时
+		onMounted(() => {
+			state.defaultActive = setParentHighlight(route);
+		});
+		// 路由更新时
+		onBeforeRouteUpdate((to) => {
+			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			state.defaultActive = setParentHighlight(to);
+			const clientWidth = document.body.clientWidth;
+			if (clientWidth < 1000) themeConfig.value.isCollapse = false;
+		});
+		return {
+			menuLists,
+			getThemeConfig,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/layout/routerView/iframes.vue b/src/layout/routerView/iframes.vue
new file mode 100644
index 0000000..43e71c5
--- /dev/null
+++ b/src/layout/routerView/iframes.vue
@@ -0,0 +1,66 @@
+<template>
+	<div class="layout-view-bg-white flex mt1" :style="{ height: `calc(100vh - ${setIframeHeight}`, border: 'none' }" v-loading="iframeLoading">
+		<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" ref="iframeDom" v-show="!iframeLoading"></iframe>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, onMounted, nextTick, watch, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+export default defineComponent({
+	name: 'layoutIfameView',
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const route = useRoute();
+		const state = reactive({
+			iframeDom: null as HTMLIFrameElement | null,
+			iframeLoading: true,
+			iframeUrl: '',
+		});
+		// 初始化页面加载 loading
+		const initIframeLoad = () => {
+			state.iframeUrl = <any>route.meta.isLink;
+			nextTick(() => {
+				state.iframeLoading = true;
+				const iframe = state.iframeDom;
+				if (!iframe) return false;
+				iframe.onload = () => {
+					state.iframeLoading = false;
+				};
+			});
+		};
+		// 设置 iframe 的高度
+		const setIframeHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `1px`;
+			} else {
+				if (isTagsview) return `86px`;
+				else return `51px`;
+			}
+		});
+		// 页面加载时
+		onMounted(() => {
+			initIframeLoad();
+		});
+		// 监听路由变化，多个 iframe 时使用
+		watch(
+			() => route.path,
+			() => {
+				initIframeLoad();
+			}
+		);
+		return {
+			setIframeHeight,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/layout/routerView/link.vue b/src/layout/routerView/link.vue
new file mode 100644
index 0000000..a48f002
--- /dev/null
+++ b/src/layout/routerView/link.vue
@@ -0,0 +1,61 @@
+<template>
+	<div class="layout-view-bg-white flex layout-view-link" :style="{ height: `calc(100vh - ${setLinkHeight}` }">
+		<a :href="currentRouteMeta.isLink" target="_blank" rel="opener" class="flex-margin">
+			{{ $t(currentRouteMeta.title) }}：{{ currentRouteMeta.isLink }}
+		</a>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed, watch } from 'vue';
+import { useRoute, RouteMeta } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+
+// 定义接口来定义对象的类型
+interface LinkViewState {
+	currentRouteMeta: {
+		isLink: string;
+		title: string;
+	};
+}
+interface LinkViewRouteMeta extends RouteMeta {
+	isLink: string;
+	title: string;
+}
+
+export default defineComponent({
+	name: 'layoutLinkView',
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const route = useRoute();
+		const state = reactive<LinkViewState>({
+			currentRouteMeta: {
+				isLink: '',
+				title: '',
+			},
+		});
+		// 设置 link 的高度
+		const setLinkHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsview) return `115px`;
+			else return `80px`;
+		});
+		// 监听路由的变化，设置内容
+		watch(
+			() => route.path,
+			() => {
+				state.currentRouteMeta = <LinkViewRouteMeta>route.meta;
+			},
+			{
+				immediate: true,
+			}
+		);
+		return {
+			setLinkHeight,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/layout/routerView/parent.vue b/src/layout/routerView/parent.vue
new file mode 100644
index 0000000..db22141
--- /dev/null
+++ b/src/layout/routerView/parent.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="h100">
+		<router-view v-slot="{ Component }">
+			<transition :name="setTransitionName" mode="out-in">
+				<keep-alive :include="getKeepAliveNames">
+					<component :is="Component" :key="refreshRouterViewKey" class="w100" />
+				</keep-alive>
+			</transition>
+		</router-view>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, toRefs, reactive, getCurrentInstance, onBeforeMount, onUnmounted, nextTick, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useKeepALiveNames } from '/@/stores/keepAliveNames';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { Session } from '/@/utils/storage';
+
+// 定义接口来定义对象的类型
+interface ParentViewState {
+	refreshRouterViewKey: null | string;
+	keepAliveNameList: string[];
+}
+
+export default defineComponent({
+	name: 'layoutParentView',
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const route = useRoute();
+		const storesKeepAliveNames = useKeepALiveNames();
+		const storesThemeConfig = useThemeConfig();
+		const { keepAliveNames, cachedViews } = storeToRefs(storesKeepAliveNames);
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const state = reactive<ParentViewState>({
+			refreshRouterViewKey: null,
+			keepAliveNameList: [],
+		});
+		// 设置主界面切换动画
+		const setTransitionName = computed(() => {
+			return themeConfig.value.animation;
+		});
+		// 获取组件缓存列表(name值)
+		const getKeepAliveNames = computed(() => {
+			return themeConfig.value.isTagsview ? cachedViews.value : state.keepAliveNameList;
+		});
+		// 页面加载前，处理缓存，页面刷新时路由缓存处理
+		onBeforeMount(() => {
+			state.keepAliveNameList = keepAliveNames.value;
+			proxy.mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
+				state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
+				state.refreshRouterViewKey = null;
+				nextTick(() => {
+					state.refreshRouterViewKey = fullPath;
+					state.keepAliveNameList = keepAliveNames.value;
+				});
+			});
+		});
+		// 页面加载时
+		onMounted(() => {
+			// https://gitee.com/lyt-top/vue-next-admin/issues/I58U75
+			// https://gitee.com/lyt-top/vue-next-admin/issues/I59RXK
+			nextTick(() => {
+				setTimeout(() => {
+					if (themeConfig.value.isCacheTagsView) cachedViews.value = Session.get('tagsViewList')?.map((item: any) => item.name);
+				}, 0);
+			});
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			proxy.mittBus.off('onTagsViewRefreshRouterView', () => {});
+		});
+		// 监听路由变化，防止 tagsView 多标签时，切换动画消失
+		watch(
+			() => route.fullPath,
+			() => {
+				state.refreshRouterViewKey = decodeURI(route.fullPath);
+			}
+		);
+		return {
+			setTransitionName,
+			getKeepAliveNames,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..c092855
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,64 @@
+import { createApp } from 'vue';
+import pinia from '/@/stores/index';
+import App from './App.vue';
+import router from './router';
+import { directive } from '/@/utils/directive';
+import { i18n } from '/@/i18n/index';
+import other from '/@/utils/other';
+
+import ElementPlus from 'element-plus';
+
+import 'element-plus/dist/index.css';
+import '/@/theme/index.scss';
+import mitt from 'mitt';
+import VueGridLayout from 'vue-grid-layout';
+import {getUpFileUrl, handleTree, parseTime, selectDictLabel} from '/@/utils/gfast';
+import {useDict} from '/@/api/system/dict/data';
+import {getItems, setItems, getOptionValue, isEmpty} from '/@/api/items'
+// 分页组件
+import pagination from '/@/components/pagination/index.vue'
+
+// 大文件上传组件
+// @ts-ignore
+import uploader from 'vue-simple-uploader'
+import 'vue-simple-uploader/dist/style.css'
+import VueUeditorWrap from 'vue-ueditor-wrap';
+
+
+const app = createApp(App);
+
+directive(app);
+other.elSvg(app);
+
+app.component('pagination', pagination)
+app.use(pinia)
+    .use(uploader)
+    .use(router)
+    .use(ElementPlus, { i18n: i18n.global.t })
+    .use(i18n)
+    .use(VueGridLayout)
+    .use(VueUeditorWrap)
+    .mount('#app');
+
+app.config.globalProperties.getUpFileUrl=getUpFileUrl
+app.config.globalProperties.handleTree=handleTree
+app.config.globalProperties.useDict=useDict
+app.config.globalProperties.selectDictLabel=selectDictLabel
+
+app.config.globalProperties.getItems=getItems
+app.config.globalProperties.setItems=setItems
+app.config.globalProperties.getOptionValue=getOptionValue
+app.config.globalProperties.isEmpty=isEmpty
+app.config.globalProperties.parseTime=parseTime
+
+const globalProperties={
+    mittBus: mitt(),
+    i18n
+}
+
+
+//必须合并vue默认的变量，否则有问题
+app.config.globalProperties = Object.assign(
+    app.config.globalProperties,
+    globalProperties
+);
diff --git a/src/router/backEnd.ts b/src/router/backEnd.ts
new file mode 100644
index 0000000..7c2d78e
--- /dev/null
+++ b/src/router/backEnd.ts
@@ -0,0 +1,170 @@
+import { RouteRecordRaw } from 'vue-router';
+import pinia from '/@/stores/index';
+import { useUserInfo } from '/@/stores/userInfo';
+import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
+import { Session } from '/@/utils/storage';
+import { NextLoading } from '/@/utils/loading';
+import { demoRoutes,dynamicRoutes, notFoundAndNoPower } from '/@/router/route';
+import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
+import { useRoutesList } from '/@/stores/routesList';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { getUserMenus } from '/@/api/system/menu/index';
+
+
+
+const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}');
+const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
+
+// 后端控制路由
+
+/**
+ * 获取目录下的 .vue、.tsx 全部文件
+ * @method import.meta.glob
+ * @link 参考：https://cn.vitejs.dev/guide/features.html#json
+ */
+const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...layouModules }, { ...viewsModules });
+
+/**
+ * 后端控制路由：初始化方法，防止刷新时路由丢失
+ * @method NextLoading 界面 loading 动画开始执行
+ * @method useUserInfo().setUserInfos() 触发初始化用户信息 pinia
+ * @method useRequestOldRoutes().setRequestOldRoutes() 存储接口原始路由（未处理component），根据需求选择使用
+ * @method setAddRoute 添加动态路由
+ * @method setFilterMenuAndCacheTagsViewRoutes 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
+ */
+export async function initBackEndControlRoutes() {
+	// 界面 loading 动画开始执行
+	if (window.nextLoading === undefined) NextLoading.start();
+	// 无 token 停止执行下一步
+	if (!Session.get('token')) return false;
+	// 触发初始化用户信息 pinia
+	// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
+	await useUserInfo().setUserInfos();
+	await useUserInfo().setPermissions();
+	// 获取路由菜单数据
+	await getBackEndControlRoutes();
+	let menuRoute = Session.get('userMenu')
+	// 存储接口原始路由（未处理component），根据需求选择使用
+	useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(menuRoute)));
+	// 处理路由（component），替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
+	dynamicRoutes[0].children?.push(...await backEndComponent(menuRoute),...demoRoutes);
+	// 添加动态路由
+	await setAddRoute();
+	// 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
+	await setFilterMenuAndCacheTagsViewRoutes();
+}
+
+/**
+ * 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
+ * @description 用于左侧菜单、横向菜单的显示
+ * @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
+ */
+export function setFilterMenuAndCacheTagsViewRoutes() {
+	const storesRoutesList = useRoutesList(pinia);
+	storesRoutesList.setRoutesList(dynamicRoutes[0].children as any);
+	setCacheTagsViewRoutes();
+}
+
+/**
+ * 缓存多级嵌套数组处理后的一维数组
+ * @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
+ */
+export function setCacheTagsViewRoutes() {
+	const storesTagsView = useTagsViewRoutes(pinia);
+	storesTagsView.setTagsViewRoutes(formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children);
+}
+
+/**
+ * 处理路由格式及添加捕获所有路由或 404 Not found 路由
+ * @description 替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
+ * @returns 返回替换后的路由数组
+ */
+export function setFilterRouteEnd() {
+	let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
+	filterRouteEnd[0].children = [...filterRouteEnd[0].children, ...notFoundAndNoPower];
+	return filterRouteEnd;
+}
+
+/**
+ * 添加动态路由
+ * @method router.addRoute
+ * @description 此处循环为 dynamicRoutes（/@/router/route）第一个顶级 children 的路由一维数组，非多级嵌套
+ * @link 参考：https://next.router.vuejs.org/zh/api/#addroute
+ */
+export async function setAddRoute() {
+	await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
+		const routeName: any = route.name;
+		if (!router.hasRoute(routeName)) router.addRoute(route);
+	});
+}
+
+/**
+ * 请求后端路由菜单接口
+ * @description isRequestRoutes 为 true，则开启后端控制路由
+ * @returns 返回后端路由菜单数据
+ */
+export async function getBackEndControlRoutes() {
+	let menuRoute = Session.get('userMenu')
+	let permissions = Session.get('permissions')
+	if (!menuRoute || !permissions) {
+		await refreshBackEndControlRoutes()
+	}
+}
+
+/**
+ * 请求后端路由菜单接口刷新菜单及权限
+ * @description isRequestRoutes 为 true，则开启后端控制路由
+ * @returns 返回后端路由菜单数据
+ */
+export async function refreshBackEndControlRoutes() {
+	// 获取路由
+	await getUserMenus().then((res:any)=>{
+		Session.set('userMenu',res.data.menuList)
+		Session.set('permissions',res.data.permissions)
+	})
+	await useUserInfo().setPermissions()
+}
+
+/**
+ * 重新请求后端路由菜单接口
+ * @description 用于菜单管理界面刷新菜单（未进行测试）
+ * @description 路径：/src/views/system/menu/component/addMenu.vue
+ */
+export function setBackEndControlRefreshRoutes() {
+	getBackEndControlRoutes();
+}
+
+/**
+ * 后端路由 component 转换
+ * @param routes 后端返回的路由表数组
+ * @returns 返回处理成函数后的 component
+ */
+export function backEndComponent(routes: any) {
+	if (!routes) return;
+	return routes.map((item: any) => {
+		if (item.component) item.component = dynamicImport(dynamicViewsModules, item.component as string);
+		item.children && backEndComponent(item.children);
+		return item;
+	});
+}
+
+/**
+ * 后端路由 component 转换函数
+ * @param dynamicViewsModules 获取目录下的 .vue、.tsx 全部文件
+ * @param component 当前要处理项 component
+ * @returns 返回处理成函数后的 component
+ */
+export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
+	const keys = Object.keys(dynamicViewsModules);
+	const matchKeys = keys.filter((key) => {
+		const k = key.replace(/..\/views|../, '');
+		return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
+	});
+	if (matchKeys?.length === 1) {
+		const matchKey = matchKeys[0];
+		return dynamicViewsModules[matchKey];
+	}
+	if (matchKeys?.length > 1) {
+		return false;
+	}
+}
diff --git a/src/router/frontEnd.ts b/src/router/frontEnd.ts
new file mode 100644
index 0000000..67fc3fa
--- /dev/null
+++ b/src/router/frontEnd.ts
@@ -0,0 +1,148 @@
+import { RouteRecordRaw } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
+import { dynamicRoutes, notFoundAndNoPower } from '/@/router/route';
+import pinia from '/@/stores/index';
+import { Session } from '/@/utils/storage';
+import { useUserInfo } from '/@/stores/userInfo';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { useRoutesList } from '/@/stores/routesList';
+import { NextLoading } from '/@/utils/loading';
+
+// 前端控制路由
+
+/**
+ * 前端控制路由：初始化方法，防止刷新时路由丢失
+ * @method  NextLoading 界面 loading 动画开始执行
+ * @method useUserInfo(pinia).setUserInfos() 触发初始化用户信息 pinia
+ * @method setAddRoute 添加动态路由
+ * @method setFilterMenuAndCacheTagsViewRoutes 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
+ */
+export async function initFrontEndControlRoutes() {
+	// 界面 loading 动画开始执行
+	if (window.nextLoading === undefined) NextLoading.start();
+	// 无 token 停止执行下一步
+	if (!Session.get('token')) return false;
+	// 触发初始化用户信息 pinia
+	// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
+	await useUserInfo(pinia).setUserInfos();
+	// 添加动态路由
+	await setAddRoute();
+	// 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
+	await setFilterMenuAndCacheTagsViewRoutes();
+}
+
+/**
+ * 添加动态路由
+ * @method router.addRoute
+ * @description 此处循环为 dynamicRoutes（/@/router/route）第一个顶级 children 的路由一维数组，非多级嵌套
+ * @link 参考：https://next.router.vuejs.org/zh/api/#addroute
+ */
+export async function setAddRoute() {
+	await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
+		router.addRoute(route);
+	});
+}
+
+/**
+ * 删除/重置路由
+ * @method router.removeRoute
+ * @description 此处循环为 dynamicRoutes（/@/router/route）第一个顶级 children 的路由一维数组，非多级嵌套
+ * @link 参考：https://next.router.vuejs.org/zh/api/#push
+ */
+export async function frontEndsResetRoute() {
+	await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
+		const routeName: any = route.name;
+		router.hasRoute(routeName) && router.removeRoute(routeName);
+	});
+}
+
+/**
+ * 获取有当前用户权限标识的路由数组，进行对原路由的替换
+ * @description 替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
+ * @returns 返回替换后的路由数组
+ */
+export function setFilterRouteEnd() {
+	let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
+	filterRouteEnd[0].children = [...setFilterRoute(filterRouteEnd[0].children), ...notFoundAndNoPower];
+	return filterRouteEnd;
+}
+
+/**
+ * 获取当前用户权限标识去比对路由表（未处理成多级嵌套路由）
+ * @description 这里主要用于动态路由的添加，router.addRoute
+ * @link 参考：https://next.router.vuejs.org/zh/api/#addroute
+ * @param chil dynamicRoutes（/@/router/route）第一个顶级 children 的下路由集合
+ * @returns 返回有当前用户权限标识的路由数组
+ */
+export function setFilterRoute(chil: any) {
+	const stores = useUserInfo(pinia);
+	const { userInfos } = storeToRefs(stores);
+	let filterRoute: any = [];
+	chil.forEach((route: any) => {
+		if (route.meta.roles) {
+			route.meta.roles.forEach((metaRoles: any) => {
+				userInfos.value.roles.forEach((roles: any) => {
+					if (metaRoles === roles) filterRoute.push({ ...route });
+				});
+			});
+		}
+	});
+	return filterRoute;
+}
+
+/**
+ * 缓存多级嵌套数组处理后的一维数组
+ * @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
+ */
+export function setCacheTagsViewRoutes() {
+	// 获取有权限的路由，否则 tagsView、菜单搜索中无权限的路由也将显示
+	const stores = useUserInfo(pinia);
+	const storesTagsView = useTagsViewRoutes(pinia);
+	const { userInfos } = storeToRefs(stores);
+	let rolesRoutes = setFilterHasRolesMenu(dynamicRoutes, userInfos.value.roles);
+	// 添加到 pinia setTagsViewRoutes 中
+	storesTagsView.setTagsViewRoutes(formatTwoStageRoutes(formatFlatteningRoutes(rolesRoutes))[0].children);
+}
+
+/**
+ * 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
+ * @description 用于左侧菜单、横向菜单的显示
+ * @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
+ */
+export function setFilterMenuAndCacheTagsViewRoutes() {
+	const stores = useUserInfo(pinia);
+	const storesRoutesList = useRoutesList(pinia);
+	const { userInfos } = storeToRefs(stores);
+	storesRoutesList.setRoutesList(setFilterHasRolesMenu(dynamicRoutes[0].children, userInfos.value.roles));
+	setCacheTagsViewRoutes();
+}
+
+/**
+ * 判断路由 `meta.roles` 中是否包含当前登录用户权限字段
+ * @param roles 用户权限标识，在 userInfos（用户信息）的 roles（登录页登录时缓存到浏览器）数组
+ * @param route 当前循环时的路由项
+ * @returns 返回对比后有权限的路由项
+ */
+export function hasRoles(roles: any, route: any) {
+	if (route.meta && route.meta.roles) return roles.some((role: any) => route.meta.roles.includes(role));
+	else return true;
+}
+
+/**
+ * 获取当前用户权限标识去比对路由表，设置递归过滤有权限的路由
+ * @param routes 当前路由 children
+ * @param roles 用户权限标识，在 userInfos（用户信息）的 roles（登录页登录时缓存到浏览器）数组
+ * @returns 返回有权限的路由数组 `meta.roles` 中控制
+ */
+export function setFilterHasRolesMenu(routes: any, roles: any) {
+	const menu: any = [];
+	routes.forEach((route: any) => {
+		const item = { ...route };
+		if (hasRoles(roles, item)) {
+			if (item.children) item.children = setFilterHasRolesMenu(item.children, roles);
+			menu.push(item);
+		}
+	});
+	return menu;
+}
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..da607b1
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,131 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+import pinia from '/@/stores/index';
+import { storeToRefs } from 'pinia';
+import { useKeepALiveNames } from '/@/stores/keepAliveNames';
+import { useRoutesList } from '/@/stores/routesList';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { Session } from '/@/utils/storage';
+import { staticRoutes } from '/@/router/route';
+import { initFrontEndControlRoutes } from '/@/router/frontEnd';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+
+/**
+ * 1、前端控制路由时：isRequestRoutes 为 false，需要写 roles，需要走 setFilterRoute 方法。
+ * 2、后端控制路由时：isRequestRoutes 为 true，不需要写 roles，不需要走 setFilterRoute 方法），
+ * 相关方法已拆解到对应的 `backEnd.ts` 与 `frontEnd.ts`（他们互不影响，不需要同时改 2 个文件）。
+ * 特别说明：
+ * 1、前端控制：路由菜单由前端去写（无菜单管理界面，有角色管理界面），角色管理中有 roles 属性，需返回到 userInfo 中。
+ * 2、后端控制：路由菜单由后端返回（有菜单管理界面、有角色管理界面）
+ */
+
+// 读取 `/src/stores/themeConfig.ts` 是否开启后端控制路由配置
+const storesThemeConfig = useThemeConfig(pinia);
+const { themeConfig } = storeToRefs(storesThemeConfig);
+const { isRequestRoutes } = themeConfig.value;
+
+/**
+ * 创建一个可以被 Vue 应用程序使用的路由实例
+ * @method createRouter(options: RouterOptions): Router
+ * @link 参考：https://next.router.vuejs.org/zh/api/#createrouter
+ */
+export const router = createRouter({
+	history: createWebHashHistory(),
+	routes: staticRoutes,
+});
+
+/**
+ * 路由多级嵌套数组处理成一维数组
+ * @param arr 传入路由菜单数据数组
+ * @returns 返回处理后的一维路由菜单数组
+ */
+export function formatFlatteningRoutes(arr: any) {
+	if (arr.length <= 0) return false;
+	for (let i = 0; i < arr.length; i++) {
+		if (arr[i].children) {
+			arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
+		}
+	}
+	return arr;
+}
+
+/**
+ * 一维数组处理成多级嵌套数组（只保留二级：也就是二级以上全部处理成只有二级，keep-alive 支持二级缓存）
+ * @description isKeepAlive 处理 `name` 值，进行缓存。顶级关闭，全部不缓存
+ * @link 参考：https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive
+ * @param arr 处理后的一维路由菜单数组
+ * @returns 返回将一维数组重新处理成 `定义动态路由（dynamicRoutes）` 的格式
+ */
+export function formatTwoStageRoutes(arr: any) {
+	if (arr.length <= 0) return false;
+	const newArr: any = [];
+	const cacheList: Array<string> = [];
+	arr.forEach((v: any) => {
+		if (v.path === '/') {
+			newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
+		} else {
+			// 判断是否是动态路由（xx/:id/:name），用于 tagsView 等中使用
+			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			if (v.path.indexOf('/:') > -1) {
+				v.meta['isDynamic'] = true;
+				v.meta['isDynamicPath'] = v.path;
+			}
+			newArr[0].children.push({ ...v });
+			// 存 name 值，keep-alive 中 include 使用，实现路由的缓存
+			// 路径：/@/layout/routerView/parent.vue
+			if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive) {
+				cacheList.push(v.name);
+				const stores = useKeepALiveNames(pinia);
+				stores.setCacheKeepAlive(cacheList);
+			}
+		}
+	});
+	return newArr;
+}
+
+// 路由加载前
+router.beforeEach(async (to, from, next) => {
+	NProgress.configure({ showSpinner: false });
+	if (to.meta.title) NProgress.start();
+	const token = Session.get('token');
+	if (to.path === '/login' && !token) {
+		next();
+		NProgress.done();
+	} else {
+		if (!token) {
+			next(`/login?redirect=${to.path}&params=${JSON.stringify(to.query ? to.query : to.params)}`);
+			Session.clear();
+			NProgress.done();
+		} else if (token && to.path === '/login') {
+			next('/home');
+			NProgress.done();
+		} else {
+			const storesRoutesList = useRoutesList(pinia);
+			const { routesList } = storeToRefs(storesRoutesList);
+			if (routesList.value.length === 0) {
+				if (isRequestRoutes) {
+					// 后端控制路由：路由数据初始化，防止刷新时丢失
+					await initBackEndControlRoutes();
+					// 动态添加路由：防止非首页刷新时跳转回首页的问题
+					// 确保 addRoute() 时动态添加的路由已经被完全加载上去
+					next({ ...to, replace: true });
+				} else {
+					// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
+					await initFrontEndControlRoutes();
+					next({ ...to, replace: true });
+				}
+			} else {
+				next();
+			}
+		}
+	}
+});
+
+// 路由加载后
+router.afterEach(() => {
+	NProgress.done();
+});
+
+// 导出路由
+export default router;
diff --git a/src/router/route.ts b/src/router/route.ts
new file mode 100644
index 0000000..6cf4eb6
--- /dev/null
+++ b/src/router/route.ts
@@ -0,0 +1,1166 @@
+import { RouteRecordRaw } from 'vue-router';
+
+/**
+ * 路由meta对象参数说明
+ * meta: {
+ *      title:          菜单栏及 tagsView 栏、菜单搜索名称（国际化）
+ *      isLink：        是否超链接菜单，开启外链条件，`1、isLink: 链接地址不为空`
+ *      isHide：        是否隐藏此路由
+ *      isKeepAlive：   是否缓存组件状态
+ *      isAffix：       是否固定在 tagsView 栏上
+ *      isIframe：      是否内嵌窗口，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
+ *      roles：         当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common
+ *      icon：          菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
+ * }
+ */
+
+/**
+ * 定义动态路由
+ * 前端添加路由，请在顶级节点的 `children 数组` 里添加
+ * @description 未开启 isRequestRoutes 为 true 时使用（前端控制路由），开启时第一个顶级 children 的路由将被替换成接口请求回来的路由数据
+ * @description 各字段请查看 `/@/views/system/menu/component/addMenu.vue 下的 ruleForm`
+ * @returns 返回路由菜单数据
+ */
+export const dynamicRoutes: Array<RouteRecordRaw> = [
+	{
+		path: '/',
+		name: '/',
+		component: () => import('/@/layout/index.vue'),
+		redirect: '/home',
+		meta: {
+			isKeepAlive: true,
+		},
+		children: [
+			{
+				path: '/home',
+				name: 'home',
+				component: () => import('/@/views/home/index.vue'),
+				meta: {
+					title: 'message.router.home',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: true,
+					isIframe: false,
+					roles: ['admin', 'common'],
+					icon: 'iconfont icon-shouye',
+				},
+			},
+			{
+				path: '/personal',
+				name: 'personals',
+				component: () => import('/@/views/system/personal/index.vue'),
+				meta: {
+					title: '个人中心',
+					isLink: '',
+					isHide: true,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin'],
+					icon: 'iconfont icon-diannao',
+				},
+			},
+			{
+				path: '/bigUpload',
+				name: 'bigUpload',
+				component: () => import('/@/layout/routerView/parent.vue'),
+				redirect: '/bigUpload',
+				meta:{
+					title: '大文件上传',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin'],
+					icon: 'iconfont icon-diannao',
+				},
+				children:[
+					{
+						path: '/bigUpload',
+						name: 'bigUpload',
+						component: () => import('/@/views/bigUpload/index.vue'),
+						meta: {
+							title: '大文件上传',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-shouye',
+						},
+					},
+				]
+			}
+		],
+	},
+];
+
+export const demoRoutes:Array<RouteRecordRaw> = [
+	{
+		path: '/demo',
+		name: 'demo',
+		component: () => import('/@/layout/routerView/parent.vue'),
+		redirect: '/demo/system/menu',
+		meta: {
+			title: '案例演示',
+			isLink: '',
+			isHide: false,
+			isKeepAlive: true,
+			isAffix: false,
+			isIframe: false,
+			roles: ['admin'],
+			icon: 'iconfont icon-diannao',
+		},
+		children:[
+			{
+				path: '/demo/system',
+				name: 'system',
+				component: () => import('/@/layout/routerView/parent.vue'),
+				redirect: '/system/menu',
+				meta: {
+					title: 'message.router.system',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin'],
+					icon: 'iconfont icon-xitongshezhi',
+				},
+				children: [
+					{
+						path: '/demo/system/menu',
+						name: 'systemMenu',
+						component: () => import('/@/views/system/menu/index.vue'),
+						meta: {
+							title: 'message.router.systemMenu',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'iconfont icon-caidan',
+						},
+					},
+					{
+						path: '/demo/system/role',
+						name: 'systemRole',
+						component: () => import('/@/views/system/role/index.vue'),
+						meta: {
+							title: 'message.router.systemRole',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'ele-ColdDrink',
+						},
+					},
+					{
+						path: '/demo/system/user',
+						name: 'systemUser',
+						component: () => import('/@/views/system/user/index.vue'),
+						meta: {
+							title: 'message.router.systemUser',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'iconfont icon-icon-',
+						},
+					},
+					{
+						path: '/demo/system/dept',
+						name: 'systemDept',
+						component: () => import('/@/views/system/dept/index.vue'),
+						meta: {
+							title: 'message.router.systemDept',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'ele-OfficeBuilding',
+						},
+					},
+				],
+			},
+			{
+				path: '/demo/menu',
+				name: 'menu',
+				component: () => import('/@/layout/routerView/parent.vue'),
+				redirect: '/menu/menu1',
+				meta: {
+					title: 'message.router.menu',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin', 'common'],
+					icon: 'iconfont icon-caidan',
+				},
+				children: [
+					{
+						path: '/demo/menu/menu1',
+						name: 'menu1',
+						component: () => import('/@/layout/routerView/parent.vue'),
+						redirect: '/menu/menu1/menu11',
+						meta: {
+							title: 'message.router.menu1',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-caidan',
+						},
+						children: [
+							{
+								path: '/demo/menu/menu1/menu11',
+								name: 'menu11',
+								component: () => import('/@/views/menu/menu1/menu11/index.vue'),
+								meta: {
+									title: 'message.router.menu11',
+									isLink: '',
+									isHide: false,
+									isKeepAlive: true,
+									isAffix: false,
+									isIframe: false,
+									roles: ['admin', 'common'],
+									icon: 'iconfont icon-caidan',
+								},
+							},
+							{
+								path: '/demo/menu/menu1/menu12',
+								name: 'menu12',
+								component: () => import('/@/layout/routerView/parent.vue'),
+								redirect: '/menu/menu1/menu12/menu121',
+								meta: {
+									title: 'message.router.menu12',
+									isLink: '',
+									isHide: false,
+									isKeepAlive: true,
+									isAffix: false,
+									isIframe: false,
+									roles: ['admin', 'common'],
+									icon: 'iconfont icon-caidan',
+								},
+								children: [
+									{
+										path: '/demo/menu/menu1/menu12/menu121',
+										name: 'menu121',
+										component: () => import('/@/views/menu/menu1/menu12/menu121/index.vue'),
+										meta: {
+											title: 'message.router.menu121',
+											isLink: '',
+											isHide: false,
+											isKeepAlive: true,
+											isAffix: false,
+											isIframe: false,
+											roles: ['admin', 'common'],
+											icon: 'iconfont icon-caidan',
+										},
+									},
+									{
+										path: '/demo/menu/menu1/menu12/menu122',
+										name: 'menu122',
+										component: () => import('/@/views/menu/menu1/menu12/menu122/index.vue'),
+										meta: {
+											title: 'message.router.menu122',
+											isLink: '',
+											isHide: false,
+											isKeepAlive: true,
+											isAffix: false,
+											isIframe: false,
+											roles: ['admin', 'common'],
+											icon: 'iconfont icon-caidan',
+										},
+									},
+								],
+							},
+							{
+								path: '/demo/menu/menu1/menu13',
+								name: 'menu13',
+								component: () => import('/@/views/menu/menu1/menu13/index.vue'),
+								meta: {
+									title: 'message.router.menu13',
+									isLink: '',
+									isHide: false,
+									isKeepAlive: true,
+									isAffix: false,
+									isIframe: false,
+									roles: ['admin', 'common'],
+									icon: 'iconfont icon-caidan',
+								},
+							},
+						],
+					},
+					{
+						path: '/demo/menu/menu2',
+						name: 'menu2',
+						component: () => import('/@/views/menu/menu2/index.vue'),
+						meta: {
+							title: 'message.router.menu2',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-caidan',
+						},
+					},
+				],
+			},
+			{
+				path: '/demo/fun',
+				name: 'funIndex',
+				component: () => import('/@/layout/routerView/parent.vue'),
+				redirect: '/fun/tagsView',
+				meta: {
+					title: 'message.router.funIndex',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin', 'common'],
+					icon: 'iconfont icon-crew_feature',
+				},
+				children: [
+					{
+						path: '/demo/fun/tagsView',
+						name: 'funTagsView',
+						component: () => import('/@/views/fun/tagsView/index.vue'),
+						meta: {
+							title: 'message.router.funTagsView',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Pointer',
+						},
+					},
+					{
+						path: '/demo/fun/countup',
+						name: 'funCountup',
+						component: () => import('/@/views/fun/countup/index.vue'),
+						meta: {
+							title: 'message.router.funCountup',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Odometer',
+						},
+					},
+					{
+						path: '/demo/fun/codemirror',
+						name: 'demoCodeMirror',
+						component: () => import('/@/views/fun/codemirror/index.vue'),
+						meta: {
+							title: '代码编辑器',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Odometer',
+						},
+					},
+					{
+						path: '/demo/fun/ueditor',
+						name: 'demoUeditor',
+						component: () => import('/@/views/fun/ueditor/index.vue'),
+						meta: {
+							title: '富文本编辑器',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Odometer',
+						},
+					},
+					{
+						path: '/demo/fun/cropper',
+						name: 'funCropper',
+						component: () => import('/@/views/fun/cropper/index.vue'),
+						meta: {
+							title: 'message.router.funCropper',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-caijian',
+						},
+					},
+					{
+						path: '/demo/fun/qrcode',
+						name: 'funQrcode',
+						component: () => import('/@/views/fun/qrcode/index.vue'),
+						meta: {
+							title: 'message.router.funQrcode',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-ico',
+						},
+					},
+					{
+						path: '/demo/fun/echartsMap',
+						name: 'funEchartsMap',
+						component: () => import('/@/views/fun/echartsMap/index.vue'),
+						meta: {
+							title: 'message.router.funEchartsMap',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-ditu',
+						},
+					},
+					{
+						path: '/demo/fun/printJs',
+						name: 'funPrintJs',
+						component: () => import('/@/views/fun/printJs/index.vue'),
+						meta: {
+							title: 'message.router.funPrintJs',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Printer',
+						},
+					},
+					{
+						path: '/demo/fun/clipboard',
+						name: 'funClipboard',
+						component: () => import('/@/views/fun/clipboard/index.vue'),
+						meta: {
+							title: 'message.router.funClipboard',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-DocumentCopy',
+						},
+					},
+					{
+						path: '/demo/fun/gridLayout',
+						name: 'funGridLayout',
+						component: () => import('/@/views/fun/gridLayout/index.vue'),
+						meta: {
+							title: 'message.router.funGridLayout',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-tuodong',
+						},
+					},
+					{
+						path: '/demo/fun/splitpanes',
+						name: 'funSplitpanes',
+						component: () => import('/@/views/fun/splitpanes/index.vue'),
+						meta: {
+							title: 'message.router.funSplitpanes',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon--chaifenlie',
+						},
+					},
+				],
+			},
+			{
+				path: '/demo/pages',
+				name: 'pagesIndex',
+				component: () => import('/@/layout/routerView/parent.vue'),
+				redirect: '/pages/filtering',
+				meta: {
+					title: 'message.router.pagesIndex',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin', 'common'],
+					icon: 'iconfont icon-fuzhiyemian',
+				},
+				children: [
+					{
+						path: '/demo/pages/filtering',
+						name: 'pagesFiltering',
+						component: () => import('/@/views/pages/filtering/index.vue'),
+						meta: {
+							title: 'message.router.pagesFiltering',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Sell',
+						},
+						/**
+						 * 注意此处详情写法：
+						 * 1、嵌套进父级里时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
+						 * 2、不嵌套进父级时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
+						 * 3、想要父级不高亮，面包屑显示为：首页/页面/过滤筛选组件详情，设置路径为：/pages/filteringDetails
+						 */
+						children: [
+							{
+								path: '/demo/pages/filtering/details',
+								name: 'pagesFilteringDetails',
+								component: () => import('/@/views/pages/filtering/details.vue'),
+								meta: {
+									title: 'message.router.pagesFilteringDetails',
+									isLink: '',
+									isHide: true,
+									isKeepAlive: false,
+									isAffix: false,
+									isIframe: false,
+									roles: ['admin', 'common'],
+									icon: 'ele-Sunny',
+								},
+							},
+						],
+					},
+					{
+						path: '/demo/pages/filtering/details1',
+						name: 'pagesFilteringDetails1',
+						component: () => import('/@/views/pages/filtering/details1.vue'),
+						meta: {
+							title: 'message.router.pagesFilteringDetails1',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Sunny',
+						},
+					},
+					{
+						path: '/demo/pages/iocnfont',
+						name: 'pagesIocnfont',
+						component: () => import('/@/views/pages/iocnfont/index.vue'),
+						meta: {
+							title: 'message.router.pagesIocnfont',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Present',
+						},
+					},
+					{
+						path: '/demo/pages/element',
+						name: 'pagesElement',
+						component: () => import('/@/views/pages/element/index.vue'),
+						meta: {
+							title: 'message.router.pagesElement',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Eleme',
+						},
+					},
+					{
+						path: '/demo/pages/awesome',
+						name: 'pagesAwesome',
+						component: () => import('/@/views/pages/awesome/index.vue'),
+						meta: {
+							title: 'message.router.pagesAwesome',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-SetUp',
+						},
+					},
+					{
+						path: '/demo/pages/formAdapt',
+						name: 'pagesFormAdapt',
+						component: () => import('/@/views/pages/formAdapt/index.vue'),
+						meta: {
+							title: 'message.router.pagesFormAdapt',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-biaodan',
+						},
+					},
+					{
+						path: '/demo/pages/tableRules',
+						name: 'pagesTableRules',
+						component: () => import('/@/views/pages/tableRules/index.vue'),
+						meta: {
+							title: 'message.router.pagesTableRules',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-jiliandongxuanzeqi',
+						},
+					},
+					{
+						path: '/demo/pages/formI18n',
+						name: 'pagesFormI18n',
+						component: () => import('/@/views/pages/formI18n/index.vue'),
+						meta: {
+							title: 'message.router.pagesFormI18n',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-diqiu',
+						},
+					},
+					{
+						path: '/demo/pages/formRules',
+						name: 'pagesFormRules',
+						component: () => import('/@/views/pages/formRules/index.vue'),
+						meta: {
+							title: 'message.router.pagesFormRules',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-shuxing',
+						},
+					},
+					{
+						path: '/demo/pages/listAdapt',
+						name: 'pagesListAdapt',
+						component: () => import('/@/views/pages/listAdapt/index.vue'),
+						meta: {
+							title: 'message.router.pagesListAdapt',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-chazhaobiaodanliebiao',
+						},
+					},
+					{
+						path: '/demo/pages/waterfall',
+						name: 'pagesWaterfall',
+						component: () => import('/@/views/pages/waterfall/index.vue'),
+						meta: {
+							title: 'message.router.pagesWaterfall',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-zidingyibuju',
+						},
+					},
+					{
+						path: '/demo/pages/steps',
+						name: 'pagesSteps',
+						component: () => import('/@/views/pages/steps/index.vue'),
+						meta: {
+							title: 'message.router.pagesSteps',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-step',
+						},
+					},
+					{
+						path: '/demo/pages/preview',
+						name: 'pagesPreview',
+						component: () => import('/@/views/pages/preview/index.vue'),
+						meta: {
+							title: 'message.router.pagesPreview',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-15tupianyulan',
+						},
+					},
+					{
+						path: '/demo/pages/waves',
+						name: 'pagesWaves',
+						component: () => import('/@/views/pages/waves/index.vue'),
+						meta: {
+							title: 'message.router.pagesWaves',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-bolangneng',
+						},
+					},
+					{
+						path: '/demo/pages/tree',
+						name: 'pagesTree',
+						component: () => import('/@/views/pages/tree/index.vue'),
+						meta: {
+							title: 'message.router.pagesTree',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-shuxingtu',
+						},
+					},
+					{
+						path: '/demo/pages/drag',
+						name: 'pagesDrag',
+						component: () => import('/@/views/pages/drag/index.vue'),
+						meta: {
+							title: 'message.router.pagesDrag',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Pointer',
+						},
+					},
+					{
+						path: '/demo/pages/lazyImg',
+						name: 'pagesLazyImg',
+						component: () => import('/@/views/pages/lazyImg/index.vue'),
+						meta: {
+							title: 'message.router.pagesLazyImg',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'ele-PictureFilled',
+						},
+					},
+					{
+						path: '/demo/pages/dynamicForm',
+						name: 'pagesDynamicForm',
+						component: () => import('/@/views/pages/dynamicForm/index.vue'),
+						meta: {
+							title: 'message.router.pagesDynamicForm',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'iconfont icon-diannao',
+						},
+					},
+					{
+						path: '/demo/pages/workflow',
+						name: 'pagesWorkflow',
+						component: () => import('/@/views/pages/workflow/index.vue'),
+						meta: {
+							title: 'message.router.pagesWorkflow',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'ele-Connection',
+						},
+					},
+				],
+			},
+			{
+				path: '/demo/make',
+				name: 'makeIndex',
+				component: () => import('/@/layout/routerView/parent.vue'),
+				redirect: '/make/selector',
+				meta: {
+					title: 'message.router.makeIndex',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin'],
+					icon: 'iconfont icon-siweidaotu',
+				},
+				children: [
+					{
+						path: '/demo/make/selector',
+						name: 'makeSelector',
+						component: () => import('/@/views/make/selector/index.vue'),
+						meta: {
+							title: 'message.router.makeSelector',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'iconfont icon-xuanzeqi',
+						},
+					},
+					{
+						path: '/demo/make/noticeBar',
+						name: 'makeNoticeBar',
+						component: () => import('/@/views/make/noticeBar/index.vue'),
+						meta: {
+							title: 'message.router.makeNoticeBar',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'ele-Bell',
+						},
+					},
+					{
+						path: '/demo/make/svgDemo',
+						name: 'makeSvgDemo',
+						component: () => import('/@/views/make/svgDemo/index.vue'),
+						meta: {
+							title: 'message.router.makeSvgDemo',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin', 'common'],
+							icon: 'fa fa-thumbs-o-up',
+						},
+					},
+				],
+			},
+			{
+				path: '/demo/params',
+				name: 'paramsIndex',
+				component: () => import('/@/layout/routerView/parent.vue'),
+				redirect: '/params/common',
+				meta: {
+					title: 'message.router.paramsIndex',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin'],
+					icon: 'iconfont icon-zhongduancanshu',
+				},
+				children: [
+					{
+						path: '/demo/params/common',
+						name: 'paramsCommon',
+						component: () => import('/@/views/params/common/index.vue'),
+						meta: {
+							title: 'message.router.paramsCommon',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'iconfont icon-putong',
+						},
+					},
+					{
+						path: '/demo/params/common/details',
+						name: 'paramsCommonDetails',
+						component: () => import('/@/views/params/common/details.vue'),
+						meta: {
+							title: 'message.router.paramsCommonDetails',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'ele-Comment',
+						},
+					},
+					{
+						path: '/demo/params/dynamic',
+						name: 'paramsDynamic',
+						component: () => import('/@/views/params/dynamic/index.vue'),
+						meta: {
+							title: 'message.router.paramsDynamic',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'iconfont icon-dongtai',
+						},
+					},
+					/**
+					 * tagsViewName 为要设置不同的 "tagsView 名称" 字段
+					 * 如若需设置不同 "tagsView 名称"，tagsViewName 字段必须要有
+					 */
+					{
+						path: '/demo/params/dynamic/details/:t/:id/:tagsViewName',
+						name: 'paramsDynamicDetails',
+						component: () => import('/@/views/params/dynamic/details.vue'),
+						meta: {
+							title: 'message.router.paramsDynamicDetails',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'ele-Lightning',
+						},
+					},
+				],
+			},
+			{
+				path: '/demo/visualizing',
+				name: 'visualizingIndex',
+				component: () => import('/@/layout/routerView/parent.vue'),
+				redirect: '/visualizing/visualizingLinkDemo1',
+				meta: {
+					title: 'message.router.visualizingIndex',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin'],
+					icon: 'ele-ChatLineRound',
+				},
+				children: [
+					{
+						path: '/demo/visualizing/visualizingLinkDemo1',
+						name: 'visualizingLinkDemo1',
+						component: () => import('/@/layout/routerView/link.vue'),
+						meta: {
+							title: 'message.router.visualizingLinkDemo1',
+							isLink: `#/visualizingDemo1`,
+							isHide: false,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'iconfont icon-caozuo-wailian',
+						},
+					},
+					{
+						path: '/demo/visualizing/visualizingLinkDemo2',
+						name: 'visualizingLinkDemo2',
+						component: () => import('/@/layout/routerView/link.vue'),
+						meta: {
+							title: 'message.router.visualizingLinkDemo2',
+							isLink: `#/visualizingDemo2`,
+							isHide: false,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'iconfont icon-caozuo-wailian',
+						},
+					},
+				],
+			},
+			{
+				path: '/demo/chart',
+				name: 'chartIndex',
+				component: () => import('/@/views/chart/index.vue'),
+				meta: {
+					title: 'message.router.chartIndex',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin', 'common'],
+					icon: 'iconfont icon-ico_shuju',
+				},
+			},
+			{
+				path: '/demo/personal',
+				name: 'personal',
+				component: () => import('/@/views/personal/index.vue'),
+				meta: {
+					title: 'message.router.personal',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin', 'common'],
+					icon: 'iconfont icon-gerenzhongxin',
+				},
+			},
+			{
+				path: '/demo/tools',
+				name: 'tools',
+				component: () => import('/@/views/tools/index.vue'),
+				meta: {
+					title: 'message.router.tools',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin', 'common'],
+					icon: 'iconfont icon-gongju',
+				},
+			},
+			{
+				path: '/demo/link',
+				name: 'layoutLinkView',
+				component: () => import('/@/layout/routerView/link.vue'),
+				meta: {
+					title: 'message.router.layoutLinkView',
+					isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation',
+					isHide: false,
+					isKeepAlive: false,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin'],
+					icon: 'iconfont icon-caozuo-wailian',
+				},
+			},
+			{
+				path: '/demo/iframes',
+				name: 'layoutIfameView',
+				component: () => import('/@/layout/routerView/iframes.vue'),
+				meta: {
+					title: 'message.router.layoutIfameView',
+					isLink: 'https://nodejs.org/zh-cn/',
+					isHide: false,
+					isKeepAlive: false,
+					isAffix: false,
+					isIframe: true,
+					roles: ['admin'],
+					icon: 'iconfont icon-neiqianshujuchucun',
+				},
+			},
+		]
+	}
+]
+
+/**
+ * 定义404、401界面
+ * @link 参考：https://next.router.vuejs.org/zh/guide/essentials/history-mode.html#netlify
+ */
+export const notFoundAndNoPower = [
+	{
+		path: '/:path(.*)*',
+		name: 'notFound',
+		component: () => import('/@/views/error/404.vue'),
+		meta: {
+			title: 'message.staticRoutes.notFound',
+			isHide: true,
+		},
+	},
+	{
+		path: '/401',
+		name: 'noPower',
+		component: () => import('/@/views/error/401.vue'),
+		meta: {
+			title: 'message.staticRoutes.noPower',
+			isHide: true,
+		},
+	},
+];
+
+/**
+ * 定义静态路由（默认路由）
+ * 此路由不要动，前端添加路由的话，请在 `dynamicRoutes 数组` 中添加
+ * @description 前端控制直接改 dynamicRoutes 中的路由，后端控制不需要修改，请求接口路由数据时，会覆盖 dynamicRoutes 第一个顶级 children 的内容（全屏，不包含 layout 中的路由出口）
+ * @returns 返回路由菜单数据
+ */
+export const staticRoutes: Array<RouteRecordRaw> = [
+	{
+		path: '/login',
+		name: 'login',
+		component: () => import('/@/views/login/index.vue'),
+		meta: {
+			title: '登录',
+		},
+	},
+	/**
+	 * 提示：写在这里的为全屏界面，不建议写在这里
+	 * 请写在 `dynamicRoutes` 路由数组中
+	 */
+	{
+		path: '/visualizingDemo1',
+		name: 'visualizingDemo1',
+		component: () => import('/@/views/visualizing/demo1.vue'),
+		meta: {
+			title: 'message.router.visualizingLinkDemo1',
+		},
+	},
+	{
+		path: '/visualizingDemo2',
+		name: 'visualizingDemo2',
+		component: () => import('/@/views/visualizing/demo2.vue'),
+		meta: {
+			title: 'message.router.visualizingLinkDemo2',
+		},
+	},
+];
diff --git a/src/stores/bigUpload.ts b/src/stores/bigUpload.ts
new file mode 100644
index 0000000..5418d6b
--- /dev/null
+++ b/src/stores/bigUpload.ts
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+import {bigUploadStates} from "/@/stores/interface";
+
+export const bigUpload = defineStore('bigUpload', {
+    state:():bigUploadStates=>({
+        panelShow:false
+    }),
+    actions: {
+        async setPanelShow(bool: boolean) {
+            this.panelShow = bool;
+        }
+    },
+})
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..27c377e
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,8 @@
+// https://pinia.vuejs.org/
+import { createPinia } from 'pinia';
+
+// 创建
+const pinia = createPinia();
+
+// 导出
+export default pinia;
diff --git a/src/stores/interface/index.ts b/src/stores/interface/index.ts
new file mode 100644
index 0000000..336b021
--- /dev/null
+++ b/src/stores/interface/index.ts
@@ -0,0 +1,97 @@
+/**
+ * 定义接口来定义对象的类型
+ * `stores` 全部类型定义在这里
+ */
+
+// 用户信息
+export interface UserInfosState {
+	id:number
+	authBtnList: string[];
+	avatar: string;
+	roles: string[];
+	time: number;
+	userName: string;
+	userNickname:string
+}
+export interface UserInfosStates {
+	userInfos: UserInfosState;
+	permissions:string[]
+}
+
+// 路由缓存列表
+export interface KeepAliveNamesState {
+	keepAliveNames: string[];
+	cachedViews: string[];
+}
+
+// 后端返回原始路由(未处理时)
+export interface RequestOldRoutesState {
+	requestOldRoutes: string[];
+}
+
+// TagsView 路由列表
+export interface TagsViewRoutesState {
+	tagsViewRoutes: string[];
+	isTagsViewCurrenFull: Boolean;
+}
+
+// 路由列表
+export interface RoutesListState {
+	routesList: string[];
+	isColumnsMenuHover: Boolean;
+	isColumnsNavHover: Boolean;
+}
+
+// 布局配置
+export interface ThemeConfigState {
+	isDrawer: boolean;
+	primary: string;
+	topBar: string;
+	topBarColor: string;
+	isTopBarColorGradual: boolean;
+	menuBar: string;
+	menuBarColor: string;
+	isMenuBarColorGradual: boolean;
+	columnsMenuBar: string;
+	columnsMenuBarColor: string;
+	isColumnsMenuBarColorGradual: boolean;
+	isCollapse: boolean;
+	isUniqueOpened: boolean;
+	isFixedHeader: boolean;
+	isFixedHeaderChange: boolean;
+	isClassicSplitMenu: boolean;
+	isLockScreen: boolean;
+	lockScreenTime: number;
+	isShowLogo: boolean;
+	isShowLogoChange: boolean;
+	isBreadcrumb: boolean;
+	isTagsview: boolean;
+	isBreadcrumbIcon: boolean;
+	isTagsviewIcon: boolean;
+	isCacheTagsView: boolean;
+	isSortableTagsView: boolean;
+	isShareTagsView: boolean;
+	isFooter: boolean;
+	isGrayscale: boolean;
+	isInvert: boolean;
+	isIsDark: boolean;
+	isWartermark: boolean;
+	wartermarkText: string;
+	tagsStyle: string;
+	animation: string;
+	columnsAsideStyle: string;
+	columnsAsideLayout: string;
+	layout: string;
+	isRequestRoutes: boolean;
+	globalTitle: string;
+	globalViceTitle: string;
+	globalI18n: string;
+	globalComponentSize: string;
+}
+export interface ThemeConfigStates {
+	themeConfig: ThemeConfigState;
+}
+
+export interface bigUploadStates {
+	panelShow : boolean
+}
diff --git a/src/stores/keepAliveNames.ts b/src/stores/keepAliveNames.ts
new file mode 100644
index 0000000..32e0389
--- /dev/null
+++ b/src/stores/keepAliveNames.ts
@@ -0,0 +1,37 @@
+import { defineStore } from 'pinia';
+import { KeepAliveNamesState } from './interface';
+
+/**
+ * 路由缓存列表
+ * @methods setCacheKeepAlive 设置要缓存的路由 names（开启 Tagsview）
+ * @methods addCachedView 添加要缓存的路由 names（关闭 Tagsview）
+ * @methods delCachedView 删除要缓存的路由 names（关闭 Tagsview）
+ * @methods delOthersCachedViews 右键菜单`关闭其它`，删除要缓存的路由 names（关闭 Tagsview）
+ * @methods delAllCachedViews 右键菜单`全部关闭`，删除要缓存的路由 names（关闭 Tagsview）
+ */
+export const useKeepALiveNames = defineStore('keepALiveNames', {
+	state: (): KeepAliveNamesState => ({
+		keepAliveNames: [],
+		cachedViews: [],
+	}),
+	actions: {
+		async setCacheKeepAlive(data: Array<string>) {
+			this.keepAliveNames = data;
+		},
+		async addCachedView(view: any) {
+			if (this.cachedViews.includes(view.name)) return;
+			if (view.meta.isKeepAlive) this.cachedViews.push(view.name);
+		},
+		async delCachedView(view: any) {
+			const index = this.cachedViews.indexOf(view.name);
+			index > -1 && this.cachedViews.splice(index, 1);
+		},
+		async delOthersCachedViews(view: any) {
+			if (view.meta.isKeepAlive) this.cachedViews = [view.name];
+			else this.cachedViews = [];
+		},
+		async delAllCachedViews() {
+			this.cachedViews = [];
+		},
+	},
+});
diff --git a/src/stores/requestOldRoutes.ts b/src/stores/requestOldRoutes.ts
new file mode 100644
index 0000000..be9b5cd
--- /dev/null
+++ b/src/stores/requestOldRoutes.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+import { RequestOldRoutesState } from './interface';
+
+/**
+ * 后端返回原始路由(未处理时)
+ * @methods setCacheKeepAlive 设置接口原始路由数据
+ */
+export const useRequestOldRoutes = defineStore('requestOldRoutes', {
+	state: (): RequestOldRoutesState => ({
+		requestOldRoutes: [],
+	}),
+	actions: {
+		async setRequestOldRoutes(routes: Array<string>) {
+			this.requestOldRoutes = routes;
+		},
+	},
+});
diff --git a/src/stores/routesList.ts b/src/stores/routesList.ts
new file mode 100644
index 0000000..7dd2b28
--- /dev/null
+++ b/src/stores/routesList.ts
@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia';
+import { RoutesListState } from './interface';
+
+/**
+ * 路由列表
+ * @methods setRoutesList 设置路由数据
+ * @methods setColumnsMenuHover 设置分栏布局菜单鼠标移入 boolean
+ * @methods setColumnsNavHover 设置分栏布局最左侧导航鼠标移入 boolean
+ */
+export const useRoutesList = defineStore('routesList', {
+	state: (): RoutesListState => ({
+		routesList: [],
+		isColumnsMenuHover: false,
+		isColumnsNavHover: false,
+	}),
+	actions: {
+		async setRoutesList(data: Array<string>) {
+			this.routesList = data;
+		},
+		async setColumnsMenuHover(bool: Boolean) {
+			this.isColumnsMenuHover = bool;
+		},
+		async setColumnsNavHover(bool: Boolean) {
+			this.isColumnsNavHover = bool;
+		},
+	},
+});
diff --git a/src/stores/tagsViewRoutes.ts b/src/stores/tagsViewRoutes.ts
new file mode 100644
index 0000000..7a5e6f4
--- /dev/null
+++ b/src/stores/tagsViewRoutes.ts
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia';
+import { TagsViewRoutesState } from './interface';
+import { Session } from '/@/utils/storage';
+
+/**
+ * TagsView 路由列表
+ * @methods setTagsViewRoutes 设置 TagsView 路由列表
+ * @methods setCurrenFullscreen 设置开启/关闭全屏时的 boolean 状态
+ */
+export const useTagsViewRoutes = defineStore('tagsViewRoutes', {
+	state: (): TagsViewRoutesState => ({
+		tagsViewRoutes: [],
+		isTagsViewCurrenFull: false,
+	}),
+	actions: {
+		async setTagsViewRoutes(data: Array<string>) {
+			this.tagsViewRoutes = data;
+		},
+		setCurrenFullscreen(bool: Boolean) {
+			Session.set('isTagsViewCurrenFull', bool);
+			this.isTagsViewCurrenFull = bool;
+		},
+	},
+});
diff --git a/src/stores/themeConfig.ts b/src/stores/themeConfig.ts
new file mode 100644
index 0000000..2c12fb1
--- /dev/null
+++ b/src/stores/themeConfig.ts
@@ -0,0 +1,146 @@
+import { defineStore } from 'pinia';
+import { ThemeConfigStates, ThemeConfigState } from './interface';
+
+/**
+ * 布局配置
+ * 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I567R1，感谢@lanbao123
+ * 2020.05.28 by lyt 优化。开发时配置不生效问题
+ * 修改配置时：
+ * 1、需要每次都清理 `window.localStorage` 浏览器永久缓存
+ * 2、或者点击布局配置最底部 `一键恢复默认` 按钮即可看到效果
+ */
+export const useThemeConfig = defineStore('themeConfig', {
+	state: (): ThemeConfigStates => ({
+		themeConfig: {
+			// 是否开启布局配置抽屉
+			isDrawer: false,
+
+			/**
+			 * 全局主题
+			 */
+			// 默认 primary 主题颜色
+			primary: '#409eff',
+			// 是否开启深色模式
+			isIsDark: false,
+
+			/**
+			 * 菜单 / 顶栏
+			 * 注意：v1.0.17 版本去除设置布局切换，重置主题样式（initSetLayoutChange），
+			 * 切换布局需手动设置样式，设置的样式自动同步各布局，
+			 * 代码位置：/@/layout/navBars/breadcrumb/setings.vue
+			 */
+			// 默认顶栏导航背景颜色
+			topBar: '#ffffff',
+			// 默认顶栏导航字体颜色
+			topBarColor: '#606266',
+			// 是否开启顶栏背景颜色渐变
+			isTopBarColorGradual: false,
+			// 默认菜单导航背景颜色
+			menuBar: '#354E67',
+			// 默认菜单导航字体颜色
+			menuBarColor: '#eaeaea',
+			// 是否开启菜单背景颜色渐变
+			isMenuBarColorGradual: false,
+			// 默认分栏菜单背景颜色
+			columnsMenuBar: '#545c64',
+			// 默认分栏菜单字体颜色
+			columnsMenuBarColor: '#e6e6e6',
+			// 是否开启分栏菜单背景颜色渐变
+			isColumnsMenuBarColorGradual: false,
+
+			/**
+			 * 界面设置
+			 */
+			// 是否开启菜单水平折叠效果
+			isCollapse: false,
+			// 是否开启菜单手风琴效果
+			isUniqueOpened: false,
+			// 是否开启固定 Header
+			isFixedHeader: false,
+			// 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
+			isFixedHeaderChange: false,
+			// 是否开启经典布局分割菜单（仅经典布局生效）
+			isClassicSplitMenu: false,
+			// 是否开启自动锁屏
+			isLockScreen: false,
+			// 开启自动锁屏倒计时(s/秒)
+			lockScreenTime: 30,
+
+			/**
+			 * 界面显示
+			 */
+			// 是否开启侧边栏 Logo
+			isShowLogo: true,
+			// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
+			isShowLogoChange: false,
+			// 是否开启 Breadcrumb，强制经典、横向布局不显示
+			isBreadcrumb: true,
+			// 是否开启 Tagsview
+			isTagsview: true,
+			// 是否开启 Breadcrumb 图标
+			isBreadcrumbIcon: false,
+			// 是否开启 Tagsview 图标
+			isTagsviewIcon: false,
+			// 是否开启 TagsView 缓存
+			isCacheTagsView: false,
+			// 是否开启 TagsView 拖拽
+			isSortableTagsView: true,
+			// 是否开启 TagsView 共用
+			isShareTagsView: false,
+			// 是否开启 Footer 底部版权信息
+			isFooter: false,
+			// 是否开启灰色模式
+			isGrayscale: false,
+			// 是否开启色弱模式
+			isInvert: false,
+			// 是否开启水印
+			isWartermark: false,
+			// 水印文案
+			wartermarkText: 'GFastV3',
+
+			/**
+			 * 其它设置
+			 */
+			// Tagsview 风格：可选值"<tags-style-one|tags-style-four|tags-style-five>"，默认 tags-style-five
+			// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
+			tagsStyle: 'tags-style-five',
+			// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
+			animation: 'slide-right',
+			// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
+			columnsAsideStyle: 'columns-round',
+			// 分栏布局风格：可选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
+			columnsAsideLayout: 'columns-vertical',
+
+			/**
+			 * 布局切换
+			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/setings.vue
+			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
+			 */
+			// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
+			layout: 'defaults',
+
+			/**
+			 * 后端控制路由
+			 */
+			// 是否开启后端控制路由
+			isRequestRoutes: true,
+
+			/**
+			 * 全局网站标题 / 副标题
+			 */
+			// 网站主标题（菜单导航、浏览器当前网页标题）
+			globalTitle: 'gfast3.2后台管理系统',
+			// 网站副标题（登录页顶部文字）
+			globalViceTitle: 'gfast3.2后台管理系统',
+			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
+			globalI18n: 'zh-cn',
+			// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
+			globalComponentSize: 'large',
+		},
+	}),
+	actions: {
+		setThemeConfig(data: ThemeConfigState) {
+			this.themeConfig = data;
+		},
+	},
+});
diff --git a/src/stores/userInfo.ts b/src/stores/userInfo.ts
new file mode 100644
index 0000000..aaebd87
--- /dev/null
+++ b/src/stores/userInfo.ts
@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia';
+import Cookies from 'js-cookie';
+import { UserInfosStates } from './interface';
+import { Session } from '/@/utils/storage';
+
+/**
+ * 用户信息
+ * @methods setUserInfos 设置用户信息
+ */
+export const useUserInfo = defineStore('userInfo', {
+	state: (): UserInfosStates => ({
+		userInfos: {
+			id:0,
+			userName: '',
+			userNickname:'',
+			avatar: '',
+			roles: [],
+			time: 0,
+			authBtnList:[],
+		},
+		permissions:[],
+	}),
+	actions: {
+		async setUserInfos() {
+			// 模拟数据，请求接口时，记得删除多余代码及对应依赖的引入
+			const userName = Cookies.get('userName');
+			// 模拟数据
+			let defaultRoles: Array<string> = [];
+			let defaultAuthBtnList: Array<string> = [];
+			// admin 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
+			let adminRoles: Array<string> = ['admin'];
+			// admin 按钮权限标识
+			let adminAuthBtnList: Array<string> = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
+			// test 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
+			let testRoles: Array<string> = ['common'];
+			// test 按钮权限标识
+			let testAuthBtnList: Array<string> = ['btn.add', 'btn.link'];
+			// 不同用户模拟不同的用户权限
+			if (userName === 'admin') {
+				defaultRoles = adminRoles;
+				defaultAuthBtnList = adminAuthBtnList;
+			} else {
+				defaultRoles = testRoles;
+				defaultAuthBtnList = testAuthBtnList;
+			}
+			// 用户信息模拟数据
+			const userInfos = {
+				id:0,
+				userName: userName,
+				userNickname: "",
+				avatar:
+					userName === 'admin'
+						? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
+						: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
+				time: new Date().getTime(),
+				roles: defaultRoles,
+				authBtnList: defaultAuthBtnList,
+			};
+			if (Session.get('userInfo')) {
+				this.userInfos = Session.get('userInfo');
+			} else {
+				this.userInfos = userInfos;
+			}
+		},
+		async setPermissions() {
+			this.permissions = Session.get('permissions')
+		},
+	},
+});
diff --git a/src/theme/app.scss b/src/theme/app.scss
new file mode 100644
index 0000000..9684db4
--- /dev/null
+++ b/src/theme/app.scss
@@ -0,0 +1,287 @@
+/* 初始化样式
+------------------------------- */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	outline: none !important;
+}
+
+:root {
+	--next-color-white: #ffffff;
+	--next-bg-main-color: #f8f8f8;
+	--next-bg-color: #f5f5ff;
+	--next-border-color-light: #f1f2f3;
+	--next-color-primary-lighter: #ecf5ff;
+	--next-color-success-lighter: #f0f9eb;
+	--next-color-warning-lighter: #fdf6ec;
+	--next-color-danger-lighter: #fef0f0;
+	--next-color-dark-hover: #0000001a;
+	--next-color-menu-hover: rgba(0, 0, 0, 0.2);
+	--next-color-user-hover: rgba(0, 0, 0, 0.04);
+	--next-color-seting-main: #e9eef3;
+	--next-color-seting-aside: #d3dce6;
+	--next-color-seting-header: #b3c0d1;
+}
+
+html,
+body,
+#app {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+	font-weight: 400;
+	-webkit-font-smoothing: antialiased;
+	-webkit-tap-highlight-color: transparent;
+	background-color: var(--next-bg-main-color);
+	font-size: 14px;
+	overflow: hidden;
+	position: relative;
+}
+
+/* 主布局样式
+------------------------------- */
+.layout-container {
+	width: 100%;
+	height: 100%;
+	.layout-aside {
+		background: var(--next-bg-menuBar);
+		box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
+		height: inherit;
+		position: relative;
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		overflow-x: hidden !important;
+		.el-scrollbar__view {
+			overflow: hidden;
+		}
+	}
+	.layout-header {
+		padding: 0 !important;
+	}
+	.layout-main {
+		padding: 0 !important;
+		overflow: hidden;
+		width: 100%;
+		background-color: var(--next-bg-main-color);
+	}
+	.el-scrollbar {
+		width: 100%;
+	}
+	// 此字段多次用到，建议不删除，如需修改，请重写覆盖样式
+	.layout-view-bg-white {
+		background: var(--el-color-white);
+		width: 100%;
+		height: 100%;
+		border-radius: 4px;
+		border: 1px solid var(--el-border-color-light, #ebeef5);
+	}
+	.layout-el-aside-br-color {
+		border-right: 1px solid var(--el-border-color-light, #ebeef5);
+	}
+	// pc端左侧导航样式
+	.layout-aside-pc-220 {
+		width: 220px !important;
+		transition: width 0.3s ease;
+	}
+	.layout-aside-pc-64 {
+		width: 64px !important;
+		transition: width 0.3s ease;
+	}
+	.layout-aside-pc-1 {
+		width: 1px !important;
+		transition: width 0.3s ease;
+	}
+	// 手机端左侧导航样式
+	.layout-aside-mobile {
+		position: fixed;
+		top: 0;
+		left: -220px;
+		width: 220px;
+		z-index: 9999999;
+	}
+	.layout-aside-mobile-close {
+		left: -220px;
+		transition: all 0.3s cubic-bezier(0.39, 0.58, 0.57, 1);
+	}
+	.layout-aside-mobile-open {
+		left: 0;
+		transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+	}
+	.layout-aside-mobile-mode {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 9999998;
+		animation: error-img 0.3s;
+	}
+	.layout-scrollbar {
+		@extend .el-scrollbar;
+		padding: 15px;
+	}
+	.layout-mian-height-50 {
+		height: calc(100vh - 50px);
+	}
+	.layout-columns-warp {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+	}
+	.layout-hide {
+		display: none;
+	}
+}
+
+/* element plus 全局样式
+------------------------------- */
+.layout-breadcrumb-seting {
+	.el-divider {
+		background-color: rgb(230, 230, 230);
+	}
+}
+
+/* nprogress 进度条跟随主题颜色
+------------------------------- */
+#nprogress {
+	.bar {
+		background: var(--el-color-primary) !important;
+		z-index: 9999999 !important;
+	}
+}
+
+/* flex 弹性布局
+------------------------------- */
+.flex {
+	display: flex;
+}
+.flex-auto {
+	flex: 1;
+	overflow: hidden;
+}
+.flex-center {
+	@extend .flex;
+	flex-direction: column;
+	width: 100%;
+	overflow: hidden;
+}
+.flex-margin {
+	margin: auto;
+}
+.flex-warp {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+	margin: 0 -5px;
+	.flex-warp-item {
+		padding: 5px;
+		.flex-warp-item-box {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+
+/* cursor 鼠标形状
+------------------------------- */
+// 默认
+.cursor-default {
+	cursor: default !important;
+}
+// 帮助
+.cursor-help {
+	cursor: help !important;
+}
+// 手指
+.cursor-pointer {
+	cursor: pointer !important;
+}
+// 移动
+.cursor-move {
+	cursor: move !important;
+}
+
+/* 宽高 100%
+------------------------------- */
+.w100 {
+	width: 100% !important;
+}
+.h100 {
+	height: 100% !important;
+}
+.vh100 {
+	height: 100vh !important;
+}
+.max100vh {
+	max-height: 100vh !important;
+}
+.min100vh {
+	min-height: 100vh !important;
+}
+
+/* 颜色值
+------------------------------- */
+.color-primary {
+	color: var(--el-color-primary);
+}
+.color-success {
+	color: var(--el-color-success);
+}
+.color-warning {
+	color: var(--el-color-warning);
+}
+.color-danger {
+	color: var(--el-color-danger);
+}
+.color-info {
+	color: var(--el-color-info);
+}
+
+/* 字体大小全局样式
+------------------------------- */
+@for $i from 10 through 32 {
+	.font#{$i} {
+		font-size: #{$i}px !important;
+	}
+}
+
+/* 外边距、内边距全局样式
+------------------------------- */
+@for $i from 1 through 35 {
+	.mt#{$i} {
+		margin-top: #{$i}px !important;
+	}
+	.mr#{$i} {
+		margin-right: #{$i}px !important;
+	}
+	.mb#{$i} {
+		margin-bottom: #{$i}px !important;
+	}
+	.ml#{$i} {
+		margin-left: #{$i}px !important;
+	}
+	.pt#{$i} {
+		padding-top: #{$i}px !important;
+	}
+	.pr#{$i} {
+		padding-right: #{$i}px !important;
+	}
+	.pb#{$i} {
+		padding-bottom: #{$i}px !important;
+	}
+	.pl#{$i} {
+		padding-left: #{$i}px !important;
+	}
+}
+
+.link-type, .link-type:focus {
+	color: #337ab7;
+	cursor: pointer;
+	text-decoration: none;
+}
diff --git a/src/theme/common/transition.scss b/src/theme/common/transition.scss
new file mode 100644
index 0000000..a03a7bb
--- /dev/null
+++ b/src/theme/common/transition.scss
@@ -0,0 +1,94 @@
+/* 页面切换动画
+------------------------------- */
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-left-enter-active,
+.slide-left-leave-active {
+	will-change: transform;
+	transition: all 0.3s ease;
+}
+// slide-right
+.slide-right-enter-from {
+	opacity: 0;
+	transform: translateX(-20px);
+}
+.slide-right-leave-to {
+	opacity: 0;
+	transform: translateX(20px);
+}
+// slide-left
+.slide-left-enter-from {
+	@extend .slide-right-leave-to;
+}
+.slide-left-leave-to {
+	@extend .slide-right-enter-from;
+}
+// opacitys
+.opacitys-enter-active,
+.opacitys-leave-active {
+	will-change: transform;
+	transition: all 0.3s ease;
+}
+.opacitys-enter-from,
+.opacitys-leave-to {
+	opacity: 0;
+}
+
+/* Breadcrumb 面包屑过渡动画
+------------------------------- */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+	transition: all 0.5s ease;
+}
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+	opacity: 0;
+	transform: translateX(20px);
+}
+.breadcrumb-leave-active {
+	position: absolute;
+	z-index: -1;
+}
+
+/* logo 过渡动画
+------------------------------- */
+@keyframes logoAnimation {
+	0% {
+		transform: scale(0);
+	}
+	80% {
+		transform: scale(1.2);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+/* 404、401 过渡动画
+------------------------------- */
+@keyframes error-num {
+	0% {
+		transform: translateY(60px);
+		opacity: 0;
+	}
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+@keyframes error-img {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes error-img-two {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
diff --git a/src/theme/dark.scss b/src/theme/dark.scss
new file mode 100644
index 0000000..593b757
--- /dev/null
+++ b/src/theme/dark.scss
@@ -0,0 +1,245 @@
+/* 深色模式样式
+------------------------------- */
+[data-theme='dark'] {
+	// 变量(自定义时，只需修改这里的值)
+	--next-bg-main: #1f1f1f;
+	--next-color-white: #ffffff;
+	--next-color-disabled: #191919;
+	--next-color-bar: #dadada;
+	--next-color-primary: #303030;
+	--next-border-color: #424242;
+	--next-border-black: #333333;
+	--next-border-columns: #2a2a2a;
+	--next-color-seting: #505050;
+	--next-text-color-regular: #9b9da1;
+	--next-text-color-placeholder: #7a7a7a;
+	--next-color-hover: #3c3c3c;
+	--next-color-hover-rgba: rgba(0, 0, 0, 0.3);
+
+	// root
+	--next-bg-main-color: var(--next-bg-main) !important;
+	--next-bg-topBar: var(--next-color-disabled) !important;
+	--next-bg-topBarColor: var(--next-color-bar) !important;
+	--next-bg-menuBar: var(--next-color-disabled) !important;
+	--next-bg-menuBarColor: var(--next-color-bar) !important;
+	--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
+	--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
+	--next-border-color-light: var(--next-border-black) !important;
+	--next-color-primary-lighter: var(--next-color-primary) !important;
+	--next-color-success-lighter: var(--next-color-primary) !important;
+	--next-color-warning-lighter: var(--next-color-primary) !important;
+	--next-color-danger-lighter: var(--next-color-primary) !important;
+	--next-bg-color: var(--next-color-primary) !important;
+	--next-color-dark-hover: var(--next-color-hover) !important;
+	--next-color-menu-hover: var(--next-color-hover-rgba) !important;
+	--next-color-user-hover: var(--next-color-hover-rgba) !important;
+	--next-color-seting-main: var(--next-color-seting) !important;
+	--next-color-seting-aside: var(--next-color-hover) !important;
+	--next-color-seting-header: var(--next-color-primary) !important;
+
+	// element plus
+	--el-color-white: var(--next-color-disabled) !important;
+	--el-text-color-primary: var(--next-color-bar) !important;
+	--el-border-color: var(--next-border-black) !important;
+	--el-border-color-light: var(--next-border-black) !important;
+	--el-border-color-lighter: var(--next-border-black) !important;
+	--el-border-color-extra-light: var(--el-color-primary-light-8) !important;
+	--el-text-color-regular: var(--next-text-color-regular) !important;
+	--el-bg-color: var(--next-color-disabled) !important;
+	--el-color-primary-light-9: var(--next-color-hover) !important;
+	--el-text-color-disabled: var(--next-text-color-placeholder) !important;
+	--el-text-color-disabled-base: var(--el-color-primary) !important;
+	--el-text-color-placeholder: var(--next-text-color-placeholder) !important;
+	--el-disabled-bg-color: var(--next-color-disabled) !important;
+	--el-fill-base: var(--next-color-white) !important;
+	--el-fill-colo: var(--next-color-hover-rgba) !important;
+	--el-fill-color: var(--next-color-hover-rgba) !important;
+	--el-fill-color-blank: var(--next-color-disabled) !important;
+	--el-fill-color-light: var(--next-color-hover-rgba) !important;
+	--el-bg-color-overlay: var(--el-color-primary-light-9) !important;
+	--el-mask-color: rgb(42 42 42 / 80%);
+	--el-color-success-light-9: #1c2518;
+	--el-color-warning-light-9: #292218;
+	--el-color-danger-light-9: #2b1d1d;
+	--el-color-info-light-9: #202121;
+	--el-color-primary-light-8: #1d3043;
+	--el-color-success-light-8: #25371c;
+	--el-color-warning-light-8: #3e301c;
+	--el-color-info-light-8: #2d2d2f;
+	--el-color-danger-light-8: #412626;
+
+	// button
+	.el-button {
+		&:hover {
+			border-color: var(--next-border-color) !important;
+		}
+	}
+	.el-button--primary,
+	.el-button--info,
+	.el-button--danger,
+	.el-button--success,
+	.el-button--warning {
+		--el-button-text-color: var(--next-color-white) !important;
+		--el-button-hover-text-color: var(--next-color-white) !important;
+		--el-button-disabled-text-color: var(--next-color-white) !important;
+		&:hover {
+			border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
+		}
+	}
+
+	// drawer
+	.el-divider__text {
+		background-color: var(--el-color-white) !important;
+	}
+	.el-drawer {
+		border-left: 1px solid var(--next-border-color-light) !important;
+	}
+
+	// tabs
+	.el-tabs--border-card {
+		background-color: var(--el-color-white) !important;
+	}
+	.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+		background: var(--next-color-primary-lighter);
+	}
+
+	// alert / notice-bar
+	.home-card-item {
+		border: 1px solid var(--next-border-color-light) !important;
+	}
+	.el-alert,
+	.notice-bar {
+		border: 1px solid var(--next-border-color) !important;
+		background-color: var(--next-color-disabled) !important;
+	}
+
+	// menu
+	.layout-aside {
+		border-right: 1px solid var(--next-border-color-light) !important;
+	}
+
+	// colorPicker
+	.el-color-picker__mask {
+		background: unset !important;
+	}
+	.el-color-picker__trigger {
+		border: 1px solid var(--next-border-color-light) !important;
+	}
+
+	// popper / dropdown
+	.el-popper {
+		border: 1px solid var(--next-border-color) !important;
+		color: var(--el-text-color-primary) !important;
+		.el-popper__arrow:before {
+			background: var(--el-color-white) !important;
+			border: 1px solid var(--next-border-color);
+		}
+		a {
+			color: var(--el-text-color-primary) !important;
+		}
+	}
+	.el-popper,
+	.el-dropdown-menu {
+		background: var(--el-color-white) !important;
+	}
+	.el-dropdown-menu__item:hover:not(.is-disabled) {
+		background: var(--el-bg-color) !important;
+	}
+	.el-dropdown-menu__item.is-disabled {
+		font-weight: 700 !important;
+	}
+
+	// input
+	.el-input-group__append,
+	.el-input-group__prepend {
+		border: var(--el-input-border) !important;
+		border-right: none !important;
+		background: var(--next-color-disabled) !important;
+		border-left: 0 !important;
+	}
+	.el-input-number__decrease,
+	.el-input-number__increase {
+		background: var(--next-color-disabled) !important;
+	}
+
+	// tag
+	.el-select .el-select__tags .el-tag {
+		background-color: var(--next-bg-color) !important;
+	}
+
+	// pagination
+	.el-pagination.is-background .el-pager li:not(.disabled).active {
+		color: var(--next-color-white) !important;
+	}
+	.el-pagination.is-background .btn-next,
+	.el-pagination.is-background .btn-prev,
+	.el-pagination.is-background .el-pager li {
+		background-color: var(--next-bg-color);
+	}
+
+	// radio
+	.el-radio-button:not(.is-active) .el-radio-button__inner {
+		border: 1px solid var(--next-border-color-light) !important;
+		border-left: 0 !important;
+	}
+	.el-radio-button.is-active .el-radio-button__inner {
+		color: var(--next-color-white) !important;
+	}
+
+	// countup
+	.countup-card-item-flex {
+		color: var(--el-text-color-primary) !important;
+	}
+
+	// editor
+	.editor-container {
+		.w-e-toolbar {
+			background: var(--el-color-white) !important;
+			border: 1px solid var(--next-border-color-light) !important;
+			.w-e-menu:hover {
+				background: var(--next-color-user-hover) !important;
+				i {
+					color: var(--el-text-color-primary) !important;
+				}
+			}
+		}
+		.w-e-text-container {
+			border: 1px solid var(--next-border-color-light) !important;
+			border-top: none !important;
+			.w-e-text {
+				background: var(--el-color-white) !important;
+			}
+		}
+	}
+
+	// date-picker
+	.el-picker-panel {
+		background: var(--el-color-white) !important;
+	}
+
+	// dialog
+	.el-dialog {
+		border: 1px solid var(--el-border-color-lighter);
+		.el-dialog__header {
+			color: var(--el-text-color-primary) !important;
+		}
+	}
+
+	// columns
+	.layout-columns-aside ul .layout-columns-active {
+		color: var(--next-color-white) !important;
+	}
+	.layout-columns-aside {
+		border-right: 1px solid var(--next-border-columns);
+	}
+
+	// tagsView
+	.tags-style-one {
+		.is-active {
+			color: var(--el-text-color-primary) !important;
+		}
+		.layout-navbars-tagsview-ul-li:hover {
+			border-color: var(--el-border-color-lighter) !important;
+		}
+	}
+}
diff --git a/src/theme/element.scss b/src/theme/element.scss
new file mode 100644
index 0000000..11c720b
--- /dev/null
+++ b/src/theme/element.scss
@@ -0,0 +1,293 @@
+@import 'mixins/index.scss';
+
+/* Button 按钮
+------------------------------- */
+// 第三方字体图标大小
+.el-button i.el-icon,
+.el-button i.iconfont,
+.el-button i.fa,
+.el-button--default i.iconfont,
+.el-button--default i.fa {
+	font-size: 14px !important;
+	margin-right: 5px;
+}
+.el-button--small i.iconfont,
+.el-button--small i.fa {
+	font-size: 12px !important;
+	margin-right: 5px;
+}
+
+/* Input 输入框、InputNumber 计数器
+------------------------------- */
+.el-input {
+	height: 100%;
+}
+// 菜单搜索
+.el-autocomplete-suggestion__wrap {
+	max-height: 280px !important;
+}
+
+/* Form 表单
+------------------------------- */
+.el-form {
+	// 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
+	.el-form-item:last-of-type {
+		margin-bottom: 0 !important;
+	}
+	// 修复行内表单最后一个 el-form-item 位置下移问题
+	&.el-form--inline {
+		.el-form-item--large.el-form-item:last-of-type {
+			margin-bottom: 22px !important;
+		}
+		.el-form-item--default.el-form-item:last-of-type,
+		.el-form-item--small.el-form-item:last-of-type {
+			margin-bottom: 18px !important;
+		}
+	}
+}
+
+/* Alert 警告
+------------------------------- */
+.el-alert {
+	border: 1px solid;
+}
+.el-alert__title {
+	word-break: break-all;
+}
+
+/* Message 消息提示
+------------------------------- */
+.el-message {
+	min-width: unset !important;
+	padding: 15px !important;
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.02);
+}
+
+/* NavMenu 导航菜单
+------------------------------- */
+// 鼠标 hover 时颜色
+.el-menu-hover-bg-color {
+	background-color: var(--next-color-menu-hover) !important;
+}
+// 默认样式修改
+.el-menu {
+	border-right: none !important;
+	width: 220px;
+}
+.el-menu-item {
+	height: 56px !important;
+	line-height: 56px !important;
+}
+.el-menu-item,
+.el-sub-menu__title {
+	color: var(--next-bg-menuBarColor);
+}
+// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
+.el-menu--collapse {
+	width: 64px !important;
+}
+// 外部链接时
+.el-menu-item a,
+.el-menu-item a:hover,
+.el-menu-item i,
+.el-sub-menu__title i {
+	color: inherit;
+	text-decoration: none;
+}
+// 第三方图标字体间距/大小设置
+.el-menu-item .iconfont,
+.el-sub-menu .iconfont,
+.el-menu-item .fa,
+.el-sub-menu .fa {
+	@include generalIcon;
+}
+// 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
+.el-menu-item.is-active,
+.el-sub-menu.is-active .el-sub-menu__title,
+.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
+	@extend .el-menu-hover-bg-color;
+}
+.el-sub-menu.is-active.is-opened .el-sub-menu__title {
+	background-color: unset !important;
+}
+// 子级菜单背景颜色
+// .el-menu--inline {
+// 	background: var(--next-bg-menuBar-light-1);
+// }
+// 水平菜单、横向菜单折叠 a 标签
+.el-popper.is-dark a {
+	color: var(--el-color-white) !important;
+	text-decoration: none;
+}
+// 水平菜单、横向菜单折叠背景色
+.el-popper.is-pure.is-light {
+	// 水平菜单
+	.el-menu--vertical {
+		background: var(--next-bg-menuBar);
+		.el-sub-menu.is-active .el-sub-menu__title {
+			color: var(--el-menu-active-color);
+		}
+		.el-popper.is-pure.is-light {
+			.el-menu--vertical {
+				.el-sub-menu .el-sub-menu__title {
+					background-color: unset !important;
+					color: var(--next-bg-menuBarColor);
+				}
+				.el-sub-menu.is-active .el-sub-menu__title {
+					color: var(--el-menu-active-color);
+				}
+			}
+		}
+	}
+	// 横向菜单
+	.el-menu--horizontal {
+		background: var(--next-bg-topBar);
+		.el-menu-item,
+		.el-sub-menu {
+			height: 50px !important;
+			line-height: 50px !important;
+			color: var(--next-bg-topBarColor);
+			.el-sub-menu__title {
+				height: 50px !important;
+				line-height: 50px !important;
+				color: var(--next-bg-topBarColor);
+			}
+			.el-popper.is-pure.is-light {
+				.el-menu--horizontal {
+					.el-sub-menu .el-sub-menu__title {
+						background-color: unset !important;
+						color: var(--next-bg-topBarColor);
+					}
+					.el-sub-menu.is-active .el-sub-menu__title {
+						color: var(--el-menu-active-color);
+					}
+				}
+			}
+		}
+		.el-menu-item.is-active,
+		.el-sub-menu.is-active .el-sub-menu__title {
+			color: var(--el-menu-active-color);
+		}
+	}
+}
+// 横向菜单（经典、横向）布局
+.el-menu.el-menu--horizontal {
+	border-bottom: none !important;
+	width: 100% !important;
+	.el-menu-item,
+	.el-sub-menu__title {
+		height: 50px !important;
+		color: var(--next-bg-topBarColor);
+	}
+	.el-menu-item:not(.is-active):hover,
+	.el-sub-menu:not(.is-active):hover .el-sub-menu__title {
+		color: var(--next-bg-topBarColor);
+	}
+}
+
+/* Tabs 标签页
+------------------------------- */
+.el-tabs__nav-wrap::after {
+	height: 1px !important;
+}
+
+/* Dropdown 下拉菜单
+------------------------------- */
+.el-dropdown-menu {
+	list-style: none !important; /*修复 Dropdown 下拉菜单样式问题 2022.03.04*/
+}
+.el-dropdown-menu .el-dropdown-menu__item {
+	white-space: nowrap;
+	&:not(.is-disabled):hover {
+		background-color: var(--el-dropdown-menuItem-hover-fill);
+		color: var(--el-dropdown-menuItem-hover-color);
+	}
+}
+
+/* Steps 步骤条
+------------------------------- */
+.el-step__icon-inner {
+	font-size: 30px !important;
+	font-weight: 400 !important;
+}
+.el-step__title {
+	font-size: 14px;
+}
+
+/* Dialog 对话框
+------------------------------- */
+.el-overlay {
+	overflow: hidden;
+	.el-overlay-dialog {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: unset !important;
+		width: 100%;
+		height: 100%;
+		.el-dialog {
+			margin: 0 auto !important;
+			position: absolute;
+			.el-dialog__body {
+				padding: 20px !important;
+			}
+		}
+	}
+}
+.el-dialog__body {
+	max-height: calc(90vh - 111px) !important;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+/* Card 卡片
+------------------------------- */
+.el-card__header {
+	padding: 15px 20px;
+}
+
+/* Table 表格 element plus 2.2.0 版本
+------------------------------- */
+.el-table {
+	.el-button.is-text {
+		padding: 0;
+	}
+}
+
+/* scrollbar
+------------------------------- */
+.el-scrollbar__bar {
+	z-index: 4;
+}
+.el-scrollbar__wrap {
+	max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
+}
+.el-select-dropdown .el-scrollbar__wrap {
+	overflow-x: scroll !important;
+}
+.el-select-dropdown__wrap {
+	max-height: 274px !important; /*修复Select 选择器高度问题*/
+}
+.el-cascader-menu__wrap.el-scrollbar__wrap {
+	height: 204px !important; /*修复Cascader 级联选择器高度问题*/
+}
+
+/* Drawer 抽屉
+------------------------------- */
+.el-drawer {
+	--el-drawer-padding-primary: unset !important;
+	.el-drawer__header {
+		padding: 0 15px !important;
+		height: 50px;
+		display: flex;
+		align-items: center;
+		margin-bottom: 0 !important;
+		border-bottom: 1px solid var(--el-border-color);
+		color: var(--el-text-color-primary);
+	}
+	.el-drawer__body {
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+	}
+}
diff --git a/src/theme/iconSelector.scss b/src/theme/iconSelector.scss
new file mode 100644
index 0000000..970201e
--- /dev/null
+++ b/src/theme/iconSelector.scss
@@ -0,0 +1,70 @@
+/* Popover 弹出框(图标选择器)
+------------------------------- */
+.icon-selector-popper {
+	padding: 0 !important;
+	.icon-selector-warp {
+		height: 260px;
+		overflow: hidden;
+		.icon-selector-warp-title {
+			height: 40px;
+			line-height: 40px;
+			padding: 0 15px;
+			.icon-selector-warp-title-tab {
+				span {
+					cursor: pointer;
+					&:hover {
+						color: var(--el-color-primary);
+						text-decoration: underline;
+					}
+				}
+				.span-active {
+					color: var(--el-color-primary);
+					text-decoration: underline;
+				}
+			}
+		}
+		.icon-selector-warp-row {
+			height: 230px;
+			overflow: hidden;
+			border-top: 1px solid var(--el-border-color);
+			.el-row {
+				padding: 15px;
+			}
+			.el-scrollbar__bar.is-horizontal {
+				display: none;
+			}
+			.icon-selector-warp-item {
+				display: flex;
+				border: 1px solid var(--el-border-color);
+				padding: 5px;
+				border-radius: 5px;
+				margin-bottom: 10px;
+				.icon-selector-warp-item-value {
+					i {
+						font-size: 20px;
+						color: var(--el-text-color-regular);
+					}
+				}
+				&:hover {
+					cursor: pointer;
+					background-color: var(--el-color-primary-light-9);
+					border: 1px solid var(--el-color-primary-light-5);
+					.icon-selector-warp-item-value {
+						i {
+							color: var(--el-color-primary);
+						}
+					}
+				}
+			}
+			.icon-selector-active {
+				background-color: var(--el-color-primary-light-9);
+				border: 1px solid var(--el-color-primary-light-5);
+				.icon-selector-warp-item-value {
+					i {
+						color: var(--el-color-primary);
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/src/theme/index.scss b/src/theme/index.scss
new file mode 100644
index 0000000..c574e00
--- /dev/null
+++ b/src/theme/index.scss
@@ -0,0 +1,8 @@
+@import './app.scss';
+@import 'common/transition.scss';
+@import './other.scss';
+@import './element.scss';
+@import './iconSelector.scss';
+@import './media/media.scss';
+@import './waves.scss';
+@import './dark.scss';
diff --git a/src/theme/loading.scss b/src/theme/loading.scss
new file mode 100644
index 0000000..c28c7b9
--- /dev/null
+++ b/src/theme/loading.scss
@@ -0,0 +1,51 @@
+.loading-next {
+	width: 100%;
+	height: 100%;
+}
+.loading-next .loading-next-box {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+.loading-next .loading-next-box-warp {
+	width: 80px;
+	height: 80px;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item {
+	width: 33.333333%;
+	height: 33.333333%;
+	background: var(--el-color-primary);
+	float: left;
+	animation: loading-next-animation 1.2s infinite ease;
+	border-radius: 1px;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
+	animation-delay: 0s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
+	animation-delay: 0.1s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
+	animation-delay: 0.2s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
+	animation-delay: 0.3s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
+	animation-delay: 0.4s;
+}
+@keyframes loading-next-animation {
+	0%,
+	70%,
+	100% {
+		transform: scale3D(1, 1, 1);
+	}
+	35% {
+		transform: scale3D(0, 0, 1);
+	}
+}
diff --git a/src/theme/media/chart.scss b/src/theme/media/chart.scss
new file mode 100644
index 0000000..8485e39
--- /dev/null
+++ b/src/theme/media/chart.scss
@@ -0,0 +1,94 @@
+@import './index.scss';
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+	.big-data-down-left {
+		width: 100% !important;
+		flex-direction: unset !important;
+		flex-wrap: wrap;
+		.flex-warp-item {
+			min-height: 196.24px;
+			padding: 0 7.5px 15px 15px !important;
+			.flex-warp-item-box {
+				border: none !important;
+				border-bottom: 1px solid #ebeef5 !important;
+			}
+		}
+	}
+	.big-data-down-center {
+		width: 100% !important;
+		.big-data-down-center-one,
+		.big-data-down-center-two {
+			min-height: 196.24px;
+			padding-left: 15px !important;
+			.big-data-down-center-one-content {
+				border: none !important;
+				border-bottom: 1px solid #ebeef5 !important;
+			}
+			.flex-warp-item-box {
+				@extend .big-data-down-center-one-content;
+			}
+		}
+	}
+	.big-data-down-right {
+		.flex-warp-item {
+			.flex-warp-item-box {
+				border: none !important;
+				border-bottom: 1px solid #ebeef5 !important;
+			}
+			&:nth-of-type(2) {
+				padding-left: 15px !important;
+			}
+			&:last-of-type {
+				.flex-warp-item-box {
+					border: none !important;
+				}
+			}
+		}
+	}
+}
+
+/* 页面宽度大于768px小于1200px
+------------------------------- */
+@media screen and (min-width: $sm) and (max-width: $lg) {
+	.chart-warp-bottom {
+		.big-data-down-left {
+			width: 50% !important;
+		}
+		.big-data-down-center {
+			width: 50% !important;
+		}
+		.big-data-down-right {
+			.flex-warp-item {
+				width: 50% !important;
+				&:nth-of-type(2) {
+					padding-left: 7.5px !important;
+				}
+			}
+		}
+	}
+}
+
+/* 页面宽度小于1200px
+------------------------------- */
+@media screen and (max-width: $lg) {
+	.chart-warp-top {
+		.up-left {
+			display: none;
+		}
+	}
+	.chart-warp-bottom {
+		overflow-y: auto !important;
+		flex-wrap: wrap;
+		.big-data-down-right {
+			width: 100% !important;
+			flex-direction: unset !important;
+			flex-wrap: wrap;
+			.flex-warp-item {
+				min-height: 196.24px;
+				padding: 0 7.5px 15px 15px !important;
+			}
+		}
+	}
+}
diff --git a/src/theme/media/cityLinkage.scss b/src/theme/media/cityLinkage.scss
new file mode 100644
index 0000000..1394156
--- /dev/null
+++ b/src/theme/media/cityLinkage.scss
@@ -0,0 +1,10 @@
+@import './index.scss';
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+	.el-cascader__dropdown.el-popper {
+		overflow: auto;
+		max-width: 100%;
+	}
+}
diff --git a/src/theme/media/date.scss b/src/theme/media/date.scss
new file mode 100644
index 0000000..1a50397
--- /dev/null
+++ b/src/theme/media/date.scss
@@ -0,0 +1,25 @@
+@import './index.scss';
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+	// 时间选择器适配
+	.el-date-range-picker {
+		width: 100vw;
+		.el-picker-panel__body {
+			min-width: 100%;
+			.el-date-range-picker__content {
+				.el-date-range-picker__header div {
+					margin-left: 22px;
+					margin-right: 0px;
+				}
+				& + .el-date-range-picker__content {
+					.el-date-range-picker__header div {
+						margin-left: 0px;
+						margin-right: 22px;
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/src/theme/media/dialog.scss b/src/theme/media/dialog.scss
new file mode 100644
index 0000000..023ccae
--- /dev/null
+++ b/src/theme/media/dialog.scss
@@ -0,0 +1,12 @@
+@import './index.scss';
+
+/* 页面宽度小于800px
+------------------------------- */
+@media screen and (max-width: 800px) {
+	.el-dialog {
+		width: 90% !important;
+	}
+	.el-dialog.is-fullscreen {
+		width: 100% !important;
+	}
+}
diff --git a/src/theme/media/error.scss b/src/theme/media/error.scss
new file mode 100644
index 0000000..f35015f
--- /dev/null
+++ b/src/theme/media/error.scss
@@ -0,0 +1,45 @@
+@import './index.scss';
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+	.error {
+		.error-flex {
+			flex-direction: column-reverse !important;
+			height: auto !important;
+			width: 100% !important;
+		}
+		.right,
+		.left {
+			flex: unset !important;
+			display: flex !important;
+		}
+		.left-item {
+			margin: auto !important;
+		}
+		.right img {
+			max-width: 450px !important;
+			@extend .left-item;
+		}
+	}
+}
+
+/* 页面宽度大于768px小于992px
+------------------------------- */
+@media screen and (min-width: $sm) and (max-width: $md) {
+	.error {
+		.error-flex {
+			padding-left: 30px !important;
+		}
+	}
+}
+
+/* 页面宽度小于1200px
+------------------------------- */
+@media screen and (max-width: $lg) {
+	.error {
+		.error-flex {
+			padding: 0 30px;
+		}
+	}
+}
diff --git a/src/theme/media/form.scss b/src/theme/media/form.scss
new file mode 100644
index 0000000..6fe0a8c
--- /dev/null
+++ b/src/theme/media/form.scss
@@ -0,0 +1,18 @@
+@import './index.scss';
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+	.el-form-item__label {
+		width: 100% !important;
+		text-align: left !important;
+		// 移动端 label 右对齐问题
+		justify-content: flex-start !important;
+	}
+	.el-form-item__content {
+		margin-left: 0 !important;
+	}
+	.el-form-item {
+		display: unset !important;
+	}
+}
diff --git a/src/theme/media/home.scss b/src/theme/media/home.scss
new file mode 100644
index 0000000..5a2417e
--- /dev/null
+++ b/src/theme/media/home.scss
@@ -0,0 +1,23 @@
+@import './index.scss';
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+	.home-media,
+	.home-media-sm {
+		margin-top: 15px;
+	}
+}
+
+/* 页面宽度小于1200px
+------------------------------- */
+@media screen and (max-width: $lg) {
+	.home-media-lg {
+		margin-top: 15px;
+	}
+	.home-monitor {
+		.flex-warp-item {
+			width: 33.33% !important;
+		}
+	}
+}
diff --git a/src/theme/media/index.scss b/src/theme/media/index.scss
new file mode 100644
index 0000000..4761c0c
--- /dev/null
+++ b/src/theme/media/index.scss
@@ -0,0 +1,15 @@
+/* 栅格布局（媒体查询变量）
+* https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries
+* $us ≥376px  响应式栅格
+* $xs ≥576px  响应式栅格
+* $sm ≥768px  响应式栅格
+* $md ≥992px  响应式栅格
+* $lg ≥1200px 响应式栅格
+* $xl ≥1920px 响应式栅格
+------------------------------- */
+$us: 376px;
+$xs: 576px;
+$sm: 768px;
+$md: 992px;
+$lg: 1200px;
+$xl: 1920px;
diff --git a/src/theme/media/layout.scss b/src/theme/media/layout.scss
new file mode 100644
index 0000000..77cbec0
--- /dev/null
+++ b/src/theme/media/layout.scss
@@ -0,0 +1,55 @@
+@import './index.scss';
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+	// MessageBox 弹框
+	.el-message-box {
+		width: 80% !important;
+	}
+}
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+	// Breadcrumb 面包屑
+	.layout-navbars-breadcrumb-hide {
+		display: none;
+	}
+	// 外链视图
+	.layout-view-link {
+		a {
+			max-width: 80%;
+			text-align: center;
+		}
+	}
+	// 菜单搜索
+	.layout-search-dialog {
+		.el-autocomplete {
+			width: 80% !important;
+		}
+	}
+}
+
+/* 页面宽度小于1000px
+------------------------------- */
+@media screen and (max-width: 1000px) {
+	// 布局配置
+	.layout-drawer-content-flex {
+		position: relative;
+		&::after {
+			content: '手机版不支持切换布局';
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 1;
+			text-align: center;
+			height: 140px;
+			line-height: 140px;
+			background: rgba(255, 255, 255, 0.9);
+			color: #666666;
+		}
+	}
+}
diff --git a/src/theme/media/login.scss b/src/theme/media/login.scss
new file mode 100644
index 0000000..41a0159
--- /dev/null
+++ b/src/theme/media/login.scss
@@ -0,0 +1,63 @@
+@import './index.scss';
+
+/* 页面宽度小于992px
+------------------------------- */
+@media screen and (max-width: $lg) {
+	.login-container {
+		.login-icon-group {
+			&::before {
+				content: '';
+				height: 70% !important;
+				transition: all 0.3s ease;
+			}
+			&::after {
+				content: '';
+				width: 100px !important;
+				height: 200px !important;
+				transition: all 0.3s ease;
+			}
+		}
+	}
+}
+
+/* 页面宽度小于992px
+------------------------------- */
+@media screen and (max-width: $md) {
+	.login-content {
+		right: unset !important;
+		left: 50% !important;
+		transform: translate(-50%, -50%) translate3d(0, 0, 0) !important;
+	}
+}
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+	.login-container {
+		.login-icon-group {
+			display: none !important;
+		}
+		.login-content {
+			width: 100% !important;
+			height: 100% !important;
+			padding: 20px 0 !important;
+			border-radius: 0 !important;
+			box-shadow: unset !important;
+			border: none !important;
+		}
+		.el-form-item {
+			display: flex !important;
+		}
+	}
+}
+
+/* 页面宽度小于375px
+------------------------------- */
+@media screen and (max-width: $us) {
+	.login-container {
+		.login-content-title {
+			font-size: 18px !important;
+			transition: all 0.3s ease;
+		}
+	}
+}
diff --git a/src/theme/media/media.scss b/src/theme/media/media.scss
new file mode 100644
index 0000000..bed1c35
--- /dev/null
+++ b/src/theme/media/media.scss
@@ -0,0 +1,13 @@
+@import './login.scss';
+@import './error.scss';
+@import './layout.scss';
+@import './personal.scss';
+@import './tagsView.scss';
+@import './home.scss';
+@import './chart.scss';
+@import './form.scss';
+@import './scrollbar.scss';
+@import './pagination.scss';
+@import './dialog.scss';
+@import './cityLinkage.scss';
+@import './date.scss';
diff --git a/src/theme/media/pagination.scss b/src/theme/media/pagination.scss
new file mode 100644
index 0000000..400ebaa
--- /dev/null
+++ b/src/theme/media/pagination.scss
@@ -0,0 +1,15 @@
+@import './index.scss';
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+	.el-pager,
+	.el-pagination__jump {
+		display: none !important;
+	}
+}
+
+// 默认居中对齐
+.el-pagination {
+	text-align: center !important;
+}
diff --git a/src/theme/media/personal.scss b/src/theme/media/personal.scss
new file mode 100644
index 0000000..7ec0d4a
--- /dev/null
+++ b/src/theme/media/personal.scss
@@ -0,0 +1,16 @@
+@import './index.scss';
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+	.personal-info {
+		padding-left: 0 !important;
+		margin-top: 15px;
+	}
+	.personal-recommend-col {
+		margin-bottom: 15px;
+		&:last-of-type {
+			margin-bottom: 0;
+		}
+	}
+}
diff --git a/src/theme/media/scrollbar.scss b/src/theme/media/scrollbar.scss
new file mode 100644
index 0000000..968a79d
--- /dev/null
+++ b/src/theme/media/scrollbar.scss
@@ -0,0 +1,56 @@
+@import './index.scss';
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+	// 滚动条的宽度
+	::-webkit-scrollbar {
+		width: 3px !important;
+		height: 3px !important;
+	}
+	::-webkit-scrollbar-track-piece {
+		background-color: var(--next-bg-main-color);
+	}
+	// 滚动条的设置
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(144, 147, 153, 0.3);
+		background-clip: padding-box;
+		min-height: 28px;
+		border-radius: 5px;
+		transition: 0.3s background-color;
+	}
+	::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(144, 147, 153, 0.5);
+	}
+	// element plus scrollbar
+	.el-scrollbar__bar.is-vertical {
+		width: 2px !important;
+	}
+	.el-scrollbar__bar.is-horizontal {
+		height: 2px !important;
+	}
+}
+
+/* 页面宽度大于768px
+------------------------------- */
+@media screen and (min-width: 769px) {
+	// 滚动条的宽度
+	::-webkit-scrollbar {
+		width: 7px;
+		height: 7px;
+	}
+	::-webkit-scrollbar-track-piece {
+		background-color: var(--next-bg-main-color);
+	}
+	// 滚动条的设置
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(144, 147, 153, 0.3);
+		background-clip: padding-box;
+		min-height: 28px;
+		border-radius: 5px;
+		transition: 0.3s background-color;
+	}
+	::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(144, 147, 153, 0.5);
+	}
+}
diff --git a/src/theme/media/tagsView.scss b/src/theme/media/tagsView.scss
new file mode 100644
index 0000000..b71674e
--- /dev/null
+++ b/src/theme/media/tagsView.scss
@@ -0,0 +1,11 @@
+@import './index.scss';
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+	.tags-view-form {
+		.tags-view-form-col {
+			margin-bottom: 20px;
+		}
+	}
+}
diff --git a/src/theme/mixins/index.scss b/src/theme/mixins/index.scss
new file mode 100644
index 0000000..61f3c6b
--- /dev/null
+++ b/src/theme/mixins/index.scss
@@ -0,0 +1,56 @@
+/* 第三方图标字体间距/大小设置
+------------------------------- */
+@mixin generalIcon {
+	font-size: 14px !important;
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 5px;
+	width: 24px;
+	text-align: center;
+	justify-content: center;
+}
+
+/* 文本不换行
+------------------------------- */
+@mixin text-no-wrap() {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+/* 多行文本溢出
+  ------------------------------- */
+@mixin text-ellipsis($line: 2) {
+	overflow: hidden;
+	word-break: break-all;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: $line;
+	-webkit-box-orient: vertical;
+}
+
+/* 滚动条(页面未使用) div 中使用：
+  ------------------------------- */
+// .test {
+//   @include scrollBar;
+// }
+@mixin scrollBar {
+	// 滚动条凹槽的颜色，还可以设置边框属性
+	&::-webkit-scrollbar-track-piece {
+		background-color: #f8f8f8;
+	}
+	// 滚动条的宽度
+	&::-webkit-scrollbar {
+		width: 9px;
+		height: 9px;
+	}
+	// 滚动条的设置
+	&::-webkit-scrollbar-thumb {
+		background-color: #dddddd;
+		background-clip: padding-box;
+		min-height: 28px;
+	}
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: #bbb;
+	}
+}
diff --git a/src/theme/other.scss b/src/theme/other.scss
new file mode 100644
index 0000000..a0451b8
--- /dev/null
+++ b/src/theme/other.scss
@@ -0,0 +1,36 @@
+/* wangeditor富文本编辑器
+------------------------------- */
+.editor-container {
+	z-index: 9999;
+	.w-e-toolbar {
+		border: 1px solid var(--el-border-color-light, #ebeef5) !important;
+		border-bottom: 1px solid var(--el-border-color-light, #ebeef5) !important;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		z-index: 2 !important;
+	}
+	.w-e-text-container {
+		border: 1px solid var(--el-border-color-light, #ebeef5) !important;
+		border-top: none !important;
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+		z-index: 1 !important;
+	}
+}
+
+[data-theme='dark'] {
+	// textarea - css vars
+	--w-e-textarea-bg-color: var(--el-color-white) !important;
+	--w-e-textarea-color: var(--el-text-color-primary) !important;
+
+	// toolbar - css vars
+	--w-e-toolbar-color: var(--el-text-color-primary) !important;
+	--w-e-toolbar-bg-color: var(--el-color-white) !important;
+	--w-e-toolbar-active-color: var(--el-text-color-primary) !important;
+	--w-e-toolbar-active-bg-color: var(--next-color-menu-hover) !important;
+	--w-e-toolbar-border-color: var(--el-border-color-light, #ebeef5) !important;
+
+	// modal - css vars
+	--w-e-modal-button-bg-color: var(--el-color-primary) !important;
+	--w-e-modal-button-border-color: var(--el-color-primary) !important;
+}
diff --git a/src/theme/waves.scss b/src/theme/waves.scss
new file mode 100644
index 0000000..23add2c
--- /dev/null
+++ b/src/theme/waves.scss
@@ -0,0 +1,101 @@
+/* Waves v0.6.0
+* http://fian.my.id/Waves
+*
+* Copyright 2014 Alfiana E. Sibuea and other contributors
+* Released under the MIT license
+* https://github.com/fians/Waves/blob/master/LICENSE
+*/
+.waves-effect {
+	position: relative;
+	cursor: pointer;
+	display: inline-block;
+	overflow: hidden;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	vertical-align: middle;
+	z-index: 1;
+	will-change: opacity, transform;
+	transition: all 0.3s ease-out;
+}
+.waves-effect .waves-ripple {
+	position: absolute;
+	border-radius: 50%;
+	width: 20px;
+	height: 20px;
+	margin-top: -10px;
+	margin-left: -10px;
+	opacity: 0;
+	background: rgba(0, 0, 0, 0.2);
+	transition: all 0.7s ease-out;
+	transition-property: opacity, -webkit-transform;
+	transition-property: transform, opacity;
+	transition-property: transform, opacity, -webkit-transform;
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	pointer-events: none;
+}
+.waves-effect.waves-light .waves-ripple {
+	background-color: rgba(255, 255, 255, 0.45);
+}
+.waves-effect.waves-red .waves-ripple {
+	background-color: rgba(244, 67, 54, 0.7);
+}
+.waves-effect.waves-yellow .waves-ripple {
+	background-color: rgba(255, 235, 59, 0.7);
+}
+.waves-effect.waves-orange .waves-ripple {
+	background-color: rgba(255, 152, 0, 0.7);
+}
+.waves-effect.waves-purple .waves-ripple {
+	background-color: rgba(156, 39, 176, 0.7);
+}
+.waves-effect.waves-green .waves-ripple {
+	background-color: rgba(76, 175, 80, 0.7);
+}
+.waves-effect.waves-teal .waves-ripple {
+	background-color: rgba(0, 150, 136, 0.7);
+}
+.waves-effect input[type='button'],
+.waves-effect input[type='reset'],
+.waves-effect input[type='submit'] {
+	border: 0;
+	font-style: normal;
+	font-size: inherit;
+	text-transform: inherit;
+	background: none;
+}
+.waves-notransition {
+	transition: none !important;
+}
+.waves-circle {
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
+	-webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
+}
+.waves-input-wrapper {
+	border-radius: 0.2em;
+	vertical-align: bottom;
+}
+.waves-input-wrapper .waves-button-input {
+	position: relative;
+	top: 0;
+	left: 0;
+	z-index: 1;
+}
+.waves-circle {
+	text-align: center;
+	width: 2.5em;
+	height: 2.5em;
+	line-height: 2.5em;
+	border-radius: 50%;
+	-webkit-mask-image: none;
+}
+.waves-block {
+	display: block;
+}
+a.waves-effect .waves-ripple {
+	z-index: -1;
+}
diff --git a/src/utils/arrayOperation.ts b/src/utils/arrayOperation.ts
new file mode 100644
index 0000000..f71620d
--- /dev/null
+++ b/src/utils/arrayOperation.ts
@@ -0,0 +1,66 @@
+/**
+ * 判断两数组字符串是否相同（用于按钮权限验证），数组字符串中存在相同时会自动去重（按钮权限标识不会重复）
+ * @param news 新数据
+ * @param old 源数据
+ * @returns 两数组相同返回 `true`，反之则反
+ */
+export function judementSameArr(newArr: unknown[] | string[], oldArr: string[]): boolean {
+	const news = removeDuplicate(newArr);
+	const olds = removeDuplicate(oldArr);
+	let count = 0;
+	const leng = news.length;
+	for (let i in olds) {
+		for (let j in news) {
+			if (olds[i] === news[j]) count++;
+		}
+	}
+	return count === leng ? true : false;
+}
+
+/**
+ * 判断两个对象是否相同
+ * @param a 要比较的对象一
+ * @param b 要比较的对象二
+ * @returns 相同返回 true，反之则反
+ */
+export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]: any }) {
+	if (!a || !b) return false;
+	let aProps = Object.getOwnPropertyNames(a);
+	let bProps = Object.getOwnPropertyNames(b);
+	if (aProps.length != bProps.length) return false;
+	for (let i = 0; i < aProps.length; i++) {
+		let propName = aProps[i];
+		let propA = a[propName];
+		let propB = b[propName];
+		if (!b.hasOwnProperty(propName)) return false;
+		if (propA instanceof Object) {
+			if (!isObjectValueEqual(propA, propB)) return false;
+		} else if (propA !== propB) {
+			return false;
+		}
+	}
+	return true;
+}
+
+/**
+ * 数组、数组对象去重
+ * @param arr 数组内容
+ * @param attr 需要去重的键值（数组对象）
+ * @returns
+ */
+export function removeDuplicate(arr: any, attr?: string) {
+	if (!arr && !arr.length) {
+		return arr;
+	} else {
+		if (attr) {
+			const obj: any = {};
+			const newArr = arr.reduce((cur: any, item: any) => {
+				obj[item[attr]] ? '' : (obj[item[attr]] = true && item[attr] && cur.push(item));
+				return cur;
+			}, []);
+			return newArr;
+		} else {
+			return Array.from(new Set([...arr]));
+		}
+	}
+}
diff --git a/src/utils/authDirective.ts b/src/utils/authDirective.ts
new file mode 100644
index 0000000..9d30bc3
--- /dev/null
+++ b/src/utils/authDirective.ts
@@ -0,0 +1,42 @@
+import type { App } from 'vue';
+import { useUserInfo } from '/@/stores/userInfo';
+import { judementSameArr } from '/@/utils/arrayOperation';
+
+/**
+ * 用户权限指令
+ * @directive 单个权限验证（v-auth="xxx"）
+ * @directive 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
+ * @directive 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
+ */
+export function authDirective(app: App) {
+	const allPermissions = "*/*/*"
+	const stores = useUserInfo();
+	// 单个权限验证（v-auth="xxx"）
+	app.directive('auth', {
+		mounted(el, binding) {
+			if (stores.permissions.includes(allPermissions)) return
+			if (!stores.permissions.some((v: string) => v === binding.value)) el.parentNode.removeChild(el);
+		},
+	});
+	// 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
+	app.directive('auths', {
+		mounted(el, binding) {
+			if (stores.permissions.includes(allPermissions)) return
+			let flag = false;
+			stores.permissions.map((val: string) => {
+				binding.value.map((v: string) => {
+					if (val === v) flag = true;
+				});
+			});
+			if (!flag) el.parentNode.removeChild(el);
+		},
+	});
+	// 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
+	app.directive('auth-all', {
+		mounted(el, binding) {
+			if (stores.permissions.includes(allPermissions)) return
+			const flag = judementSameArr(binding.value, stores.permissions);
+			if (!flag) el.parentNode.removeChild(el);
+		},
+	});
+}
diff --git a/src/utils/authFunction.ts b/src/utils/authFunction.ts
new file mode 100644
index 0000000..84c0ab4
--- /dev/null
+++ b/src/utils/authFunction.ts
@@ -0,0 +1,38 @@
+import { useUserInfo } from '/@/stores/userInfo';
+import { judementSameArr } from '/@/utils/arrayOperation';
+
+/**
+ * 单个权限验证
+ * @param value 权限值
+ * @returns 有权限，返回 `true`，反之则反
+ */
+export function auth(value: string): boolean {
+	const stores = useUserInfo();
+	return stores.userInfos.authBtnList.some((v: string) => v === value);
+}
+
+/**
+ * 多个权限验证，满足一个则为 true
+ * @param value 权限值
+ * @returns 有权限，返回 `true`，反之则反
+ */
+export function auths(value: Array<string>): boolean {
+	let flag = false;
+	const stores = useUserInfo();
+	stores.userInfos.authBtnList.map((val: string) => {
+		value.map((v: string) => {
+			if (val === v) flag = true;
+		});
+	});
+	return flag;
+}
+
+/**
+ * 多个权限验证，全部满足则为 true
+ * @param value 权限值
+ * @returns 有权限，返回 `true`，反之则反
+ */
+export function authAll(value: Array<string>): boolean {
+	const stores = useUserInfo();
+	return judementSameArr(value, stores.userInfos.authBtnList);
+}
diff --git a/src/utils/commonFunction.ts b/src/utils/commonFunction.ts
new file mode 100644
index 0000000..1c069e6
--- /dev/null
+++ b/src/utils/commonFunction.ts
@@ -0,0 +1,65 @@
+// 通用函数
+import useClipboard from 'vue-clipboard3';
+import { ElMessage } from 'element-plus';
+import { formatDate } from '/@/utils/formatTime';
+import { useI18n } from 'vue-i18n';
+
+export default function () {
+	const { t } = useI18n();
+	const { toClipboard } = useClipboard();
+	//百分比格式化
+	const percentFormat = (row: any, column: number, cellValue: any) => {
+		return cellValue ? `${cellValue}%` : '-';
+	};
+	//列表日期时间格式化
+	const dateFormatYMD = (row: any, column: number, cellValue: any) => {
+		if (!cellValue) return '-';
+		return formatDate(new Date(cellValue), 'YYYY-mm-dd');
+	};
+	//列表日期时间格式化
+	const dateFormatYMDHMS = (row: any, column: number, cellValue: any) => {
+		if (!cellValue) return '-';
+		return formatDate(new Date(cellValue), 'YYYY-mm-dd HH:MM:SS');
+	};
+	//列表日期时间格式化
+	const dateFormatHMS = (row: any, column: number, cellValue: any) => {
+		if (!cellValue) return '-';
+		let time = 0;
+		if (typeof row === 'number') time = row;
+		if (typeof cellValue === 'number') time = cellValue;
+		return formatDate(new Date(time * 1000), 'HH:MM:SS');
+	};
+	// 小数格式化
+	const scaleFormat = (value: any = 0, scale: number = 4) => {
+		return Number.parseFloat(value).toFixed(scale);
+	};
+	// 小数格式化
+	const scale2Format = (value: any = 0) => {
+		return Number.parseFloat(value).toFixed(2);
+	};
+	// 点击复制文本
+	const copyText = (text: string) => {
+		return new Promise((resolve, reject) => {
+			try {
+				//复制
+				toClipboard(text);
+				//下面可以设置复制成功的提示框等操作
+				ElMessage.success(t('message.layout.copyTextSuccess'));
+				resolve(text);
+			} catch (e) {
+				//复制失败
+				ElMessage.error(t('message.layout.copyTextError'));
+				reject(e);
+			}
+		});
+	};
+	return {
+		percentFormat,
+		dateFormatYMD,
+		dateFormatYMDHMS,
+		dateFormatHMS,
+		scaleFormat,
+		scale2Format,
+		copyText,
+	};
+}
diff --git a/src/utils/customDirective.ts b/src/utils/customDirective.ts
new file mode 100644
index 0000000..c67350f
--- /dev/null
+++ b/src/utils/customDirective.ts
@@ -0,0 +1,178 @@
+import type { App } from 'vue';
+
+/**
+ * 按钮波浪指令
+ * @directive 默认方式：v-waves，如 `<div v-waves></div>`
+ * @directive 参数方式：v-waves=" |light|red|orange|purple|green|teal"，如 `<div v-waves="'light'"></div>`
+ */
+export function wavesDirective(app: App) {
+	app.directive('waves', {
+		mounted(el, binding) {
+			el.classList.add('waves-effect');
+			binding.value && el.classList.add(`waves-${binding.value}`);
+			function setConvertStyle(obj: { [key: string]: unknown }) {
+				let style: string = '';
+				for (let i in obj) {
+					if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`;
+				}
+				return style;
+			}
+			function onCurrentClick(e: { [key: string]: unknown }) {
+				let elDiv = document.createElement('div');
+				elDiv.classList.add('waves-ripple');
+				el.appendChild(elDiv);
+				let styles = {
+					left: `${e.layerX}px`,
+					top: `${e.layerY}px`,
+					opacity: 1,
+					transform: `scale(${(el.clientWidth / 100) * 10})`,
+					'transition-duration': `750ms`,
+					'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`,
+				};
+				elDiv.setAttribute('style', setConvertStyle(styles));
+				setTimeout(() => {
+					elDiv.setAttribute(
+						'style',
+						setConvertStyle({
+							opacity: 0,
+							transform: styles.transform,
+							left: styles.left,
+							top: styles.top,
+						})
+					);
+					setTimeout(() => {
+						elDiv && el.removeChild(elDiv);
+					}, 750);
+				}, 450);
+			}
+			el.addEventListener('mousedown', onCurrentClick, false);
+		},
+		unmounted(el) {
+			el.addEventListener('mousedown', () => {});
+		},
+	});
+}
+
+/**
+ * 自定义拖动指令
+ * @description  使用方式：v-drag="[dragDom,dragHeader]"，如 `<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']"></div>`
+ * @description dragDom 要拖动的元素，dragHeader 要拖动的 Header 位置
+ * @link 注意：https://github.com/element-plus/element-plus/issues/522
+ * @lick 参考：https://blog.csdn.net/weixin_46391323/article/details/105228020?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-10&spm=1001.2101.3001.4242
+ */
+export function dragDirective(app: App) {
+	app.directive('drag', {
+		mounted(el, binding) {
+			if (!binding.value) return false;
+
+			const dragDom = document.querySelector(binding.value[0]) as HTMLElement;
+			const dragHeader = document.querySelector(binding.value[1]) as HTMLElement;
+
+			dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`);
+
+			function down(e: any, type: string) {
+				// 鼠标按下，计算当前元素距离可视区的距离
+				const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft;
+				const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop;
+
+				// body当前宽度
+				const screenWidth = document.body.clientWidth;
+				// 可见区域高度(应为body高度，可某些环境下无法获取)
+				const screenHeight = document.documentElement.clientHeight;
+
+				// 对话框宽度
+				const dragDomWidth = dragDom.offsetWidth;
+				// 对话框高度
+				const dragDomheight = dragDom.offsetHeight;
+
+				const minDragDomLeft = dragDom.offsetLeft;
+				const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+
+				const minDragDomTop = dragDom.offsetTop;
+				const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+
+				// 获取到的值带px 正则匹配替换
+				let styL: any = getComputedStyle(dragDom).left;
+				let styT: any = getComputedStyle(dragDom).top;
+
+				// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+				if (styL.includes('%')) {
+					styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
+					styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
+				} else {
+					styL = +styL.replace(/\px/g, '');
+					styT = +styT.replace(/\px/g, '');
+				}
+
+				return {
+					disX,
+					disY,
+					minDragDomLeft,
+					maxDragDomLeft,
+					minDragDomTop,
+					maxDragDomTop,
+					styL,
+					styT,
+				};
+			}
+
+			function move(e: any, type: string, obj: any) {
+				let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;
+
+				// 通过事件委托，计算移动的距离
+				let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX;
+				let top = type === 'pc' ? e.clientY - disY : e.touches[0].clientY - disY;
+
+				// 边界处理
+				if (-left > minDragDomLeft) {
+					left = -minDragDomLeft;
+				} else if (left > maxDragDomLeft) {
+					left = maxDragDomLeft;
+				}
+
+				if (-top > minDragDomTop) {
+					top = -minDragDomTop;
+				} else if (top > maxDragDomTop) {
+					top = maxDragDomTop;
+				}
+
+				// 移动当前元素
+				dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
+			}
+
+			/**
+			 * pc端
+			 * onmousedown 鼠标按下触发事件
+			 * onmousemove 鼠标按下时持续触发事件
+			 * onmouseup 鼠标抬起触发事件
+			 */
+			dragHeader.onmousedown = (e) => {
+				const obj = down(e, 'pc');
+				document.onmousemove = (e) => {
+					move(e, 'pc', obj);
+				};
+				document.onmouseup = () => {
+					document.onmousemove = null;
+					document.onmouseup = null;
+				};
+			};
+
+			/**
+			 * 移动端
+			 * ontouchstart 当按下手指时，触发ontouchstart
+			 * ontouchmove 当移动手指时，触发ontouchmove
+			 * ontouchend 当移走手指时，触发ontouchend
+			 */
+			dragHeader.ontouchstart = (e) => {
+				const obj = down(e, 'app');
+				document.ontouchmove = (e) => {
+					move(e, 'app', obj);
+				};
+				document.ontouchend = () => {
+					document.ontouchmove = null;
+					document.ontouchend = null;
+				};
+			};
+		},
+	});
+}
diff --git a/src/utils/directive.ts b/src/utils/directive.ts
new file mode 100644
index 0000000..a75b187
--- /dev/null
+++ b/src/utils/directive.ts
@@ -0,0 +1,18 @@
+import type { App } from 'vue';
+import { authDirective } from '/@/utils/authDirective';
+import { wavesDirective, dragDirective } from '/@/utils/customDirective';
+
+/**
+ * 导出指令方法：v-xxx
+ * @methods authDirective 用户权限指令，用法：v-auth
+ * @methods wavesDirective 按钮波浪指令，用法：v-waves
+ * @methods dragDirective 自定义拖动指令，用法：v-drag
+ */
+export function directive(app: App) {
+	// 用户权限指令
+	authDirective(app);
+	// 按钮波浪指令
+	wavesDirective(app);
+	// 自定义拖动指令
+	dragDirective(app);
+}
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
new file mode 100644
index 0000000..441e30c
--- /dev/null
+++ b/src/utils/formatTime.ts
@@ -0,0 +1,137 @@
+/**
+ * 时间日期转换
+ * @param date 当前时间，new Date() 格式
+ * @param format 需要转换的时间格式字符串
+ * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
+ * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
+ * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
+ * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
+ * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatDate(date: Date, format: string): string {
+	let we = date.getDay(); // 星期
+	let z = getWeek(date); // 周
+	let qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
+	const opt: { [key: string]: string } = {
+		'Y+': date.getFullYear().toString(), // 年
+		'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
+		'd+': date.getDate().toString(), // 日
+		'H+': date.getHours().toString(), // 时
+		'M+': date.getMinutes().toString(), // 分
+		'S+': date.getSeconds().toString(), // 秒
+		'q+': qut, // 季度
+	};
+	// 中文数字 (星期)
+	const week: { [key: string]: string } = {
+		'0': '日',
+		'1': '一',
+		'2': '二',
+		'3': '三',
+		'4': '四',
+		'5': '五',
+		'6': '六',
+	};
+	// 中文数字（季度）
+	const quarter: { [key: string]: string } = {
+		'1': '一',
+		'2': '二',
+		'3': '三',
+		'4': '四',
+	};
+	if (/(W+)/.test(format))
+		format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
+	if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
+	if (/(Z+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 3 ? '第' + z + '周' : z + '');
+	for (let k in opt) {
+		let r = new RegExp('(' + k + ')').exec(format);
+		// 若输入的长度不为1，则前面补零
+		if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'));
+	}
+	return format;
+}
+
+/**
+ * 获取当前日期是第几周
+ * @param dateTime 当前传入的日期值
+ * @returns 返回第几周数字值
+ */
+export function getWeek(dateTime: Date): number {
+	let temptTime = new Date(dateTime.getTime());
+	// 周几
+	let weekday = temptTime.getDay() || 7;
+	// 周1+5天=周六
+	temptTime.setDate(temptTime.getDate() - weekday + 1 + 5);
+	let firstDay = new Date(temptTime.getFullYear(), 0, 1);
+	let dayOfWeek = firstDay.getDay();
+	let spendDay = 1;
+	if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1;
+	firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
+	let d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000);
+	let result = Math.ceil(d / 7);
+	return result;
+}
+
+/**
+ * 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
+ * @param param 当前时间，new Date() 格式或者字符串时间格式
+ * @param format 需要转换的时间格式字符串
+ * @description param 10秒：  10 * 1000
+ * @description param 1分：   60 * 1000
+ * @description param 1小时： 60 * 60 * 1000
+ * @description param 24小时：60 * 60 * 24 * 1000
+ * @description param 3天：   60 * 60* 24 * 1000 * 3
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatPast(param: string | Date, format: string = 'YYYY-mm-dd'): string {
+	// 传入格式处理、存储转换值
+	let t: any, s: number;
+	// 获取js 时间戳
+	let time: number = new Date().getTime();
+	// 是否是对象
+	typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
+	// 当前时间戳 - 传入时间戳
+	time = Number.parseInt(`${time - t}`);
+	if (time < 10000) {
+		// 10秒内
+		return '刚刚';
+	} else if (time < 60000 && time >= 10000) {
+		// 超过10秒少于1分钟内
+		s = Math.floor(time / 1000);
+		return `${s}秒前`;
+	} else if (time < 3600000 && time >= 60000) {
+		// 超过1分钟少于1小时
+		s = Math.floor(time / 60000);
+		return `${s}分钟前`;
+	} else if (time < 86400000 && time >= 3600000) {
+		// 超过1小时少于24小时
+		s = Math.floor(time / 3600000);
+		return `${s}小时前`;
+	} else if (time < 259200000 && time >= 86400000) {
+		// 超过1天少于3天内
+		s = Math.floor(time / 86400000);
+		return `${s}天前`;
+	} else {
+		// 超过3天
+		let date = typeof param === 'string' || 'object' ? new Date(param) : param;
+		return formatDate(date, format);
+	}
+}
+
+/**
+ * 时间问候语
+ * @param param 当前时间，new Date() 格式
+ * @description param 调用 `formatAxis(new Date())` 输出 `上午好`
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatAxis(param: Date): string {
+	let hour: number = new Date(param).getHours();
+	if (hour < 6) return '凌晨好';
+	else if (hour < 9) return '早上好';
+	else if (hour < 12) return '上午好';
+	else if (hour < 14) return '中午好';
+	else if (hour < 17) return '下午好';
+	else if (hour < 19) return '傍晚好';
+	else if (hour < 22) return '晚上好';
+	else return '夜里好';
+}
diff --git a/src/utils/getStyleSheets.ts b/src/utils/getStyleSheets.ts
new file mode 100644
index 0000000..90252c3
--- /dev/null
+++ b/src/utils/getStyleSheets.ts
@@ -0,0 +1,101 @@
+import { nextTick } from 'vue';
+import * as svg from '@element-plus/icons-vue';
+
+// 获取阿里字体图标
+const getAlicdnIconfont = () => {
+	return new Promise((resolve, reject) => {
+		nextTick(() => {
+			const styles: any = document.styleSheets;
+			let sheetsList = [];
+			let sheetsIconList = [];
+			for (let i = 0; i < styles.length; i++) {
+				if (styles[i].href && styles[i].href.indexOf('at.alicdn.com') > -1) {
+					sheetsList.push(styles[i]);
+				}
+			}
+			for (let i = 0; i < sheetsList.length; i++) {
+				for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
+					if (sheetsList[i].cssRules[j].selectorText && sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1) {
+						sheetsIconList.push(
+							`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
+						);
+					}
+				}
+			}
+			if (sheetsIconList.length > 0) resolve(sheetsIconList);
+			else reject('未获取到值，请刷新重试');
+		});
+	});
+};
+
+// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
+const getElementPlusIconfont = () => {
+	return new Promise((resolve, reject) => {
+		nextTick(() => {
+			const icons = svg as any;
+			const sheetsIconList = [];
+			for (const i in icons) {
+				sheetsIconList.push(`ele-${icons[i].name}`);
+			}
+			if (sheetsIconList.length > 0) resolve(sheetsIconList);
+			else reject('未获取到值，请刷新重试');
+		});
+	});
+};
+
+// 初始化获取 css 样式，这里使用 fontawesome 的图标
+const getAwesomeIconfont = () => {
+	return new Promise((resolve, reject) => {
+		nextTick(() => {
+			const styles: any = document.styleSheets;
+			let sheetsList = [];
+			let sheetsIconList = [];
+			for (let i = 0; i < styles.length; i++) {
+				if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.com') > -1) {
+					sheetsList.push(styles[i]);
+				}
+			}
+			for (let i = 0; i < sheetsList.length; i++) {
+				for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
+					if (
+						sheetsList[i].cssRules[j].selectorText &&
+						sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 &&
+						sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1
+					) {
+						if (/::before/.test(sheetsList[i].cssRules[j].selectorText)) {
+							sheetsIconList.push(
+								`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
+							);
+						}
+					}
+				}
+			}
+			if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
+			else reject('未获取到值，请刷新重试');
+		});
+	});
+};
+
+/**
+ * 获取字体图标 `document.styleSheets`
+ * @method ali 获取阿里字体图标 `<i class="iconfont 图标类名"></i>`
+ * @method ele 获取 element plus 自带图标 `<i class="图标类名"></i>`
+ * @method ali 获取 fontawesome 的图标 `<i class="fa 图标类名"></i>`
+ */
+const initIconfont = {
+	// iconfont
+	ali: () => {
+		return getAlicdnIconfont();
+	},
+	// element plus
+	ele: () => {
+		return getElementPlusIconfont();
+	},
+	// fontawesome
+	awe: () => {
+		return getAwesomeIconfont();
+	},
+};
+
+// 导出方法
+export default initIconfont;
diff --git a/src/utils/gfast.ts b/src/utils/gfast.ts
new file mode 100644
index 0000000..7902b71
--- /dev/null
+++ b/src/utils/gfast.ts
@@ -0,0 +1,108 @@
+import {Session} from "/@/utils/storage";
+
+/**
+ * 通用js方法封装处理
+ * Copyright (c) 2022 gfast
+ */
+
+export const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
+
+
+export function getUpFileUrl(url:string){
+    if(!url){
+        return url
+    }
+    if (/^http|^blob/i.test(url)) {
+        return url
+    }
+    let reg = new RegExp('^/*' + baseURL + "/*");
+    return baseURL+url.replace(reg,'')
+}
+
+
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ * @param {*} rootId 根Id 默认 0
+ */
+export function handleTree(data:any[], id:string, parentId:string, children:string, rootId:number):any[] {
+    id = id || 'id'
+    parentId = parentId || 'parentId'
+    children = children || 'children'
+    rootId = rootId || 0
+    //对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data))
+    //循环所有项
+    const treeData =  cloneData.filter((father:any) => {
+        let branchArr = cloneData.filter((child:any) => {
+            //返回每一项的子级数组
+            return father[id] === child[parentId]
+        });
+        branchArr.length > 0 ? father[children] = branchArr : '';
+        //返回第一层
+        return father[parentId] === rootId;
+    });
+    return treeData != '' ? treeData : data;
+}
+
+
+// 回显数据字典
+export function selectDictLabel(data:any[], value:string):string {
+    let actions:string[]=[]
+    data.map((item) => {
+        if (item.value == value) {
+            actions.push(item.label);
+            return false;
+        }
+    })
+    return actions.join('');
+}
+
+export function getToken():string{
+    return Session.get('token')
+}
+
+// 日期格式化
+export function parseTime(time:any, pattern:string) {
+    if (arguments.length === 0 || !time) {
+        return null
+    }
+    const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+    let date
+    if (typeof time === 'object') {
+        date = time
+    } else {
+        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+            time = parseInt(time)
+        } else if (typeof time === 'string') {
+            time = time.replace(new RegExp(/-/gm), '/');
+        }
+        if ((typeof time === 'number') && (time.toString().length === 10)) {
+            time = time * 1000
+        }
+        date = new Date(time)
+    }
+    const formatObj:any = {
+        y: date.getFullYear(),
+        m: date.getMonth() + 1,
+        d: date.getDate(),
+        h: date.getHours(),
+        i: date.getMinutes(),
+        s: date.getSeconds(),
+        a: date.getDay()
+    }
+    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+        let value = formatObj[key]
+        // Note: getDay() returns 0 on Sunday
+        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+        if (result.length > 0 && value < 10) {
+            value = '0' + value
+        }
+        return value || 0
+    })
+    return time_str
+}
diff --git a/src/utils/loading.ts b/src/utils/loading.ts
new file mode 100644
index 0000000..c23fb77
--- /dev/null
+++ b/src/utils/loading.ts
@@ -0,0 +1,42 @@
+import { nextTick } from 'vue';
+import '/@/theme/loading.scss';
+
+/**
+ * 页面全局 Loading
+ * @method start 创建 loading
+ * @method done 移除 loading
+ */
+export const NextLoading = {
+	// 创建 loading
+	start: () => {
+		const bodys: Element = document.body;
+		const div = <HTMLElement>document.createElement('div');
+		div.setAttribute('class', 'loading-next');
+		const htmls = `
+			<div class="loading-next-box">
+				<div class="loading-next-box-warp">
+					<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+				</div>
+			</div>
+		`;
+		div.innerHTML = htmls;
+		bodys.insertBefore(div, bodys.childNodes[0]);
+		window.nextLoading = true;
+	},
+	// 移除 loading
+	done: () => {
+		nextTick(() => {
+			window.nextLoading = false;
+			const el = <HTMLElement>document.querySelector('.loading-next');
+			el?.parentNode?.removeChild(el);
+		});
+	},
+};
diff --git a/src/utils/other.ts b/src/utils/other.ts
new file mode 100644
index 0000000..6bb4fbd
--- /dev/null
+++ b/src/utils/other.ts
@@ -0,0 +1,200 @@
+import { nextTick } from 'vue';
+import type { App } from 'vue';
+import * as svg from '@element-plus/icons-vue';
+import router from '/@/router/index';
+import pinia from '/@/stores/index';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { i18n } from '/@/i18n/index';
+import { Local } from '/@/utils/storage';
+import SvgIcon from '/@/components/svgIcon/index.vue';
+
+/**
+ * 导出全局注册 element plus svg 图标
+ * @param app vue 实例
+ * @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html
+ */
+export function elSvg(app: App) {
+	const icons = svg as any;
+	for (const i in icons) {
+		app.component(`ele-${icons[i].name}`, icons[i]);
+	}
+	app.component('SvgIcon', SvgIcon);
+}
+
+/**
+ * 设置浏览器标题国际化
+ * @method const title = useTitle(); ==> title()
+ */
+export function useTitle() {
+	const stores = useThemeConfig(pinia);
+	const { themeConfig } = storeToRefs(stores);
+	nextTick(() => {
+		let webTitle = '';
+		let globalTitle: string = themeConfig.value.globalTitle;
+		const { path, meta } = router.currentRoute.value;
+		if (path === '/login') {
+			webTitle = <any>meta.title;
+		} else {
+			webTitle = setTagsViewNameI18n(router.currentRoute.value);
+		}
+		document.title = `${webTitle} - ${globalTitle}` || globalTitle;
+	});
+}
+
+/**
+ * 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
+ * @param params 路由 query、params 中的 tagsViewName
+ * @returns 返回当前 tagsViewName 名称
+ */
+export function setTagsViewNameI18n(item: any) {
+	let tagsViewName: any = '';
+	const { query, params, meta } = item;
+	if (query?.tagsViewName || params?.tagsViewName) {
+		if (/\/zh-cn|en|zh-tw\//.test(query?.tagsViewName) || /\/(zh-cn|en|zh-tw)\//.test(params?.tagsViewName)) {
+			// 国际化
+			const urlTagsParams = (query?.tagsViewName && JSON.parse(query?.tagsViewName)) || (params?.tagsViewName && JSON.parse(params?.tagsViewName));
+			tagsViewName = urlTagsParams[i18n.global.locale];
+		} else {
+			// 非国际化
+			tagsViewName = query?.tagsViewName || params?.tagsViewName;
+		}
+	} else {
+		// 非自定义 tagsView 名称
+		tagsViewName = i18n.global.t(<any>meta.title);
+	}
+	return tagsViewName;
+}
+
+/**
+ * 图片懒加载
+ * @param el dom 目标元素
+ * @param arr 列表数据
+ * @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
+ */
+export const lazyImg = (el: any, arr: any) => {
+	const io = new IntersectionObserver((res) => {
+		res.forEach((v: any) => {
+			if (v.isIntersecting) {
+				const { img, key } = v.target.dataset;
+				v.target.src = img;
+				v.target.onload = () => {
+					io.unobserve(v.target);
+					arr[key]['loading'] = false;
+				};
+			}
+		});
+	});
+	nextTick(() => {
+		document.querySelectorAll(el).forEach((img) => io.observe(img));
+	});
+};
+
+/**
+ * 全局组件大小
+ * @returns 返回 `window.localStorage` 中读取的缓存值 `globalComponentSize`
+ */
+export const globalComponentSize = (): string => {
+	const stores = useThemeConfig(pinia);
+	const { themeConfig } = storeToRefs(stores);
+	return Local.get('themeConfig')?.globalComponentSize || themeConfig.value?.globalComponentSize;
+};
+
+/**
+ * 对象深克隆
+ * @param obj 源对象
+ * @returns 克隆后的对象
+ */
+export function deepClone(obj: any) {
+	let newObj: any;
+	try {
+		newObj = obj.push ? [] : {};
+	} catch (error) {
+		newObj = {};
+	}
+	for (let attr in obj) {
+		if (obj[attr] && typeof obj[attr] === 'object') {
+			newObj[attr] = deepClone(obj[attr]);
+		} else {
+			newObj[attr] = obj[attr];
+		}
+	}
+	return newObj;
+}
+
+/**
+ * 判断是否是移动端
+ */
+export function isMobile() {
+	if (
+		navigator.userAgent.match(
+			/('phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone')/i
+		)
+	) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+/**
+ * 判断数组对象中所有属性是否为空，为空则删除当前行对象
+ * @description @感谢大黄
+ * @param list 数组对象
+ * @returns 删除空值后的数组对象
+ */
+export function handleEmpty(list: any) {
+	const arr = [];
+	for (const i in list) {
+		const d = [];
+		for (const j in list[i]) {
+			d.push(list[i][j]);
+		}
+		const leng = d.filter((item) => item === '').length;
+		if (leng !== d.length) {
+			arr.push(list[i]);
+		}
+	}
+	return arr;
+}
+
+/**
+ * 统一批量导出
+ * @method elSvg 导出全局注册 element plus svg 图标
+ * @method useTitle 设置浏览器标题国际化
+ * @method setTagsViewNameI18n 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
+ * @method lazyImg 图片懒加载
+ * @method globalComponentSize() element plus 全局组件大小
+ * @method deepClone 对象深克隆
+ * @method isMobile 判断是否是移动端
+ * @method handleEmpty 判断数组对象中所有属性是否为空，为空则删除当前行对象
+ */
+const other = {
+	elSvg: (app: App) => {
+		elSvg(app);
+	},
+	useTitle: () => {
+		useTitle();
+	},
+	setTagsViewNameI18n(route: any) {
+		return setTagsViewNameI18n(route);
+	},
+	lazyImg: (el: any, arr: any) => {
+		lazyImg(el, arr);
+	},
+	globalComponentSize: () => {
+		return globalComponentSize();
+	},
+	deepClone: (obj: any) => {
+		return deepClone(obj);
+	},
+	isMobile: () => {
+		return isMobile();
+	},
+	handleEmpty: (list: any) => {
+		return handleEmpty(list);
+	},
+};
+
+// 统一批量导出
+export default other;
diff --git a/src/utils/request.ts b/src/utils/request.ts
new file mode 100644
index 0000000..2da0bda
--- /dev/null
+++ b/src/utils/request.ts
@@ -0,0 +1,62 @@
+import axios from 'axios';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Session } from '/@/utils/storage';
+
+// 配置新建一个 axios 实例
+const service = axios.create({
+	baseURL: import.meta.env.VITE_API_URL as any,
+	timeout: 50000,
+	headers: { 'Content-Type': 'application/json' },
+});
+
+// 添加请求拦截器
+service.interceptors.request.use(
+	(config) => {
+		// 在发送请求之前做些什么 token
+		if (Session.get('token')) {
+			(<any>config.headers).common['Authorization'] = `Bearer ${Session.get('token')}`;
+		}
+		return config;
+	},
+	(error) => {
+		// 对请求错误做些什么
+		return Promise.reject(error);
+	}
+);
+
+// 添加响应拦截器
+service.interceptors.response.use(
+	(response) => {
+		// 对响应数据做点什么
+		const res = response.data;
+		const code = response.data.code
+		if (code === 401) {
+			ElMessageBox.alert('登录状态已过期，请重新登录', '提示', {confirmButtonText:'确定'})
+				.then(() => {
+					Session.clear(); // 清除浏览器全部临时缓存
+					window.location.href = '/'; // 去登录页
+				})
+				.catch(() => {});
+		} else if (code !== 0) {
+			ElMessage.error(res.message)
+			return Promise.reject(new Error(res.message))
+		} else {
+			return res
+		}
+	},
+	(error) => {
+		// 对响应错误做点什么
+		if (error.message.indexOf('timeout') != -1) {
+			ElMessage.error('网络超时');
+		} else if (error.message == 'Network Error') {
+			ElMessage.error('网络连接错误');
+		} else {
+			if (error.response.data) ElMessage.error(error.response.statusText);
+			else ElMessage.error('接口路径找不到');
+		}
+		return Promise.reject(error);
+	}
+);
+
+// 导出 axios 实例
+export default service;
diff --git a/src/utils/setIconfont.ts b/src/utils/setIconfont.ts
new file mode 100644
index 0000000..a6acf68
--- /dev/null
+++ b/src/utils/setIconfont.ts
@@ -0,0 +1,48 @@
+// 字体图标 url
+const cssCdnUrlList: Array<string> = [
+	'//at.alicdn.com/t/font_2298093_y6u00apwst.css',
+	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+];
+// 第三方 js url
+const jsCdnUrlList: Array<string> = [];
+
+// 动态批量设置字体图标
+export function setCssCdn() {
+	if (cssCdnUrlList.length <= 0) return false;
+	cssCdnUrlList.map((v) => {
+		let link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = v;
+		link.crossOrigin = 'anonymous';
+		document.getElementsByTagName('head')[0].appendChild(link);
+	});
+}
+
+// 动态批量设置第三方js
+export function setJsCdn() {
+	if (jsCdnUrlList.length <= 0) return false;
+	jsCdnUrlList.map((v) => {
+		let link = document.createElement('script');
+		link.src = v;
+		document.body.appendChild(link);
+	});
+}
+
+/**
+ * 批量设置字体图标、动态js
+ * @method cssCdn 动态批量设置字体图标
+ * @method jsCdn 动态批量设置第三方js
+ */
+const setIntroduction = {
+	// 设置css
+	cssCdn: () => {
+		setCssCdn();
+	},
+	// 设置js
+	jsCdn: () => {
+		setJsCdn();
+	},
+};
+
+// 导出函数方法
+export default setIntroduction;
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 0000000..a983f80
--- /dev/null
+++ b/src/utils/storage.ts
@@ -0,0 +1,59 @@
+import Cookies from 'js-cookie';
+
+/**
+ * window.localStorage 浏览器永久缓存
+ * @method set 设置永久缓存
+ * @method get 获取永久缓存
+ * @method remove 移除永久缓存
+ * @method clear 移除全部永久缓存
+ */
+export const Local = {
+	// 设置永久缓存
+	set(key: string, val: any) {
+		window.localStorage.setItem(key, JSON.stringify(val));
+	},
+	// 获取永久缓存
+	get(key: string) {
+		let json: any = window.localStorage.getItem(key);
+		return JSON.parse(json);
+	},
+	// 移除永久缓存
+	remove(key: string) {
+		window.localStorage.removeItem(key);
+	},
+	// 移除全部永久缓存
+	clear() {
+		window.localStorage.clear();
+	},
+};
+
+/**
+ * window.sessionStorage 浏览器临时缓存
+ * @method set 设置临时缓存
+ * @method get 获取临时缓存
+ * @method remove 移除临时缓存
+ * @method clear 移除全部临时缓存
+ */
+export const Session = {
+	// 设置临时缓存
+	set(key: string, val: any) {
+		if (key === 'token') return Cookies.set(key, val);
+		window.sessionStorage.setItem(key, JSON.stringify(val));
+	},
+	// 获取临时缓存
+	get(key: string) {
+		if (key === 'token') return Cookies.get(key);
+		let json: any = window.sessionStorage.getItem(key);
+		return JSON.parse(json);
+	},
+	// 移除临时缓存
+	remove(key: string) {
+		if (key === 'token') return Cookies.remove(key);
+		window.sessionStorage.removeItem(key);
+	},
+	// 移除全部临时缓存
+	clear() {
+		Cookies.remove('token');
+		window.sessionStorage.clear();
+	},
+};
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
new file mode 100644
index 0000000..5561e64
--- /dev/null
+++ b/src/utils/theme.ts
@@ -0,0 +1,59 @@
+import { ElMessage } from 'element-plus';
+
+/**
+ * hex颜色转rgb颜色
+ * @param str 颜色值字符串
+ * @returns 返回处理后的颜色值
+ */
+export function hexToRgb(str: any) {
+	let hexs: any = '';
+	let reg = /^\#?[0-9A-Fa-f]{6}$/;
+	if (!reg.test(str)) return ElMessage.warning('输入错误的hex');
+	str = str.replace('#', '');
+	hexs = str.match(/../g);
+	for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
+	return hexs;
+}
+
+/**
+ * rgb颜色转Hex颜色
+ * @param r 代表红色
+ * @param g 代表绿色
+ * @param b 代表蓝色
+ * @returns 返回处理后的颜色值
+ */
+export function rgbToHex(r: any, g: any, b: any) {
+	let reg = /^\d{1,3}$/;
+	if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning('输入错误的rgb颜色值');
+	let hexs = [r.toString(16), g.toString(16), b.toString(16)];
+	for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
+	return `#${hexs.join('')}`;
+}
+
+/**
+ * 加深颜色值
+ * @param color 颜色值字符串
+ * @param level 加深的程度，限0-1之间
+ * @returns 返回处理后的颜色值
+ */
+export function getDarkColor(color: string, level: number) {
+	let reg = /^\#?[0-9A-Fa-f]{6}$/;
+	if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
+	let rgb = hexToRgb(color);
+	for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
+	return rgbToHex(rgb[0], rgb[1], rgb[2]);
+}
+
+/**
+ * 变浅颜色值
+ * @param color 颜色值字符串
+ * @param level 加深的程度，限0-1之间
+ * @returns 返回处理后的颜色值
+ */
+export function getLightColor(color: string, level: number) {
+	let reg = /^\#?[0-9A-Fa-f]{6}$/;
+	if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
+	let rgb = hexToRgb(color);
+	for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
+	return rgbToHex(rgb[0], rgb[1], rgb[2]);
+}
diff --git a/src/utils/toolsValidate.ts b/src/utils/toolsValidate.ts
new file mode 100644
index 0000000..f2cb9d6
--- /dev/null
+++ b/src/utils/toolsValidate.ts
@@ -0,0 +1,370 @@
+/**
+ * 2020.11.29 lyt 整理
+ * 工具类集合，适用于平时开发
+ * 新增多行注释信息，鼠标放到方法名即可查看
+ */
+
+/**
+ * 验证百分比（不可以小数）
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberPercentage(val: string): string {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 只能是数字和小数点，不能是其他输入
+	v = v.replace(/[^\d]/g, '');
+	// 不能以0开始
+	v = v.replace(/^0/g, '');
+	// 数字超过100，赋值成最大值100
+	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 验证百分比（可以小数）
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberPercentageFloat(val: string): string {
+	let v = verifyNumberIntegerAndFloat(val);
+	// 数字超过100，赋值成最大值100
+	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
+	// 超过100之后不给再输入值
+	v = v.replace(/^100\.$/, '100');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 小数或整数(不可以负数)
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberIntegerAndFloat(val: string) {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 只能是数字和小数点，不能是其他输入
+	v = v.replace(/[^\d.]/g, '');
+	// 以0开始只能输入一个
+	v = v.replace(/^0{2}$/g, '0');
+	// 保证第一位只能是数字，不能是点
+	v = v.replace(/^\./g, '');
+	// 小数只能出现1位
+	v = v.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
+	// 小数点后面保留2位
+	v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 正整数验证
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifiyNumberInteger(val: string) {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 去掉 '.' , 防止贴贴的时候出现问题 如 0.1.12.12
+	v = v.replace(/[\.]*/g, '');
+	// 去掉以 0 开始后面的数, 防止贴贴的时候出现问题 如 00121323
+	v = v.replace(/(^0[\d]*)$/g, '0');
+	// 首位是0,只能出现一次
+	v = v.replace(/^0\d$/g, '0');
+	// 只匹配数字
+	v = v.replace(/[^\d]/g, '');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 去掉中文及空格
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyCnAndSpace(val: string) {
+	// 匹配中文与空格
+	let v = val.replace(/[\u4e00-\u9fa5\s]+/g, '');
+	// 匹配空格
+	v = v.replace(/(^\s*)|(\s*$)/g, '');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 去掉英文及空格
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyEnAndSpace(val: string) {
+	// 匹配英文与空格
+	let v = val.replace(/[a-zA-Z]+/g, '');
+	// 匹配空格
+	v = v.replace(/(^\s*)|(\s*$)/g, '');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 禁止输入空格
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyAndSpace(val: string) {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 金额用 `,` 区分开
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberComma(val: string) {
+	// 调用小数或整数(不可以负数)方法
+	let v: any = verifyNumberIntegerAndFloat(val);
+	// 字符串转成数组
+	v = v.toString().split('.');
+	// \B 匹配非单词边界，两边都是单词字符或者两边都是非单词字符
+	v[0] = v[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+	// 数组转字符串
+	v = v.join('.');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 匹配文字变色（搜索时）
+ * @param val 当前值字符串
+ * @param text 要处理的字符串值
+ * @param color 搜索到时字体高亮颜色
+ * @returns 返回处理后的字符串
+ */
+export function verifyTextColor(val: string, text = '', color = 'red') {
+	// 返回内容，添加颜色
+	let v = text.replace(new RegExp(val, 'gi'), `<span style='color: ${color}'>${val}</span>`);
+	// 返回结果
+	return v;
+}
+
+/**
+ * 数字转中文大写
+ * @param val 当前值字符串
+ * @param unit 默认：仟佰拾亿仟佰拾万仟佰拾元角分
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberCnUppercase(val: any, unit = '仟佰拾亿仟佰拾万仟佰拾元角分', v = '') {
+	// 当前内容字符串添加 2个0，为什么??
+	val += '00';
+	// 返回某个指定的字符串值在字符串中首次出现的位置，没有出现，则该方法返回 -1
+	let lookup = val.indexOf('.');
+	// substring：不包含结束下标内容，substr：包含结束下标内容
+	if (lookup >= 0) val = val.substring(0, lookup) + val.substr(lookup + 1, 2);
+	// 根据内容 val 的长度，截取返回对应大写
+	unit = unit.substr(unit.length - val.length);
+	// 循环截取拼接大写
+	for (let i = 0; i < val.length; i++) {
+		v += '零壹贰叁肆伍陆柒捌玖'.substr(val.substr(i, 1), 1) + unit.substr(i, 1);
+	}
+	// 正则处理
+	v = v
+		.replace(/零角零分$/, '整')
+		.replace(/零[仟佰拾]/g, '零')
+		.replace(/零{2,}/g, '零')
+		.replace(/零([亿|万])/g, '$1')
+		.replace(/零+元/, '元')
+		.replace(/亿零{0,3}万/, '亿')
+		.replace(/^元/, '零元');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 手机号码
+ * @param val 当前值字符串
+ * @returns 返回 true: 手机号码正确
+ */
+export function verifyPhone(val: string) {
+	// false: 手机号码不正确
+	if (!/^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0|1,5-9]))\d{8}$/.test(val)) return false;
+	// true: 手机号码正确
+	else return true;
+}
+
+/**
+ * 国内电话号码
+ * @param val 当前值字符串
+ * @returns 返回 true: 国内电话号码正确
+ */
+export function verifyTelPhone(val: string) {
+	// false: 国内电话号码不正确
+	if (!/\d{3}-\d{8}|\d{4}-\d{7}/.test(val)) return false;
+	// true: 国内电话号码正确
+	else return true;
+}
+
+/**
+ * 登录账号 (字母开头，允许5-16字节，允许字母数字下划线)
+ * @param val 当前值字符串
+ * @returns 返回 true: 登录账号正确
+ */
+export function verifyAccount(val: string) {
+	// false: 登录账号不正确
+	if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(val)) return false;
+	// true: 登录账号正确
+	else return true;
+}
+
+/**
+ * 密码 (以字母开头，长度在6~16之间，只能包含字母、数字和下划线)
+ * @param val 当前值字符串
+ * @returns 返回 true: 密码正确
+ */
+export function verifyPassword(val: string) {
+	// false: 密码不正确
+	if (!/^[a-zA-Z]\w{5,15}$/.test(val)) return false;
+	// true: 密码正确
+	else return true;
+}
+
+/**
+ * 强密码 (字母+数字+特殊字符，长度在6-16之间)
+ * @param val 当前值字符串
+ * @returns 返回 true: 强密码正确
+ */
+export function verifyPasswordPowerful(val: string) {
+	// false: 强密码不正确
+	if (!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
+		return false;
+	// true: 强密码正确
+	else return true;
+}
+
+/**
+ * 密码强度
+ * @param val 当前值字符串
+ * @description 弱：纯数字，纯字母，纯特殊字符
+ * @description 中：字母+数字，字母+特殊字符，数字+特殊字符
+ * @description 强：字母+数字+特殊字符
+ * @returns 返回处理后的字符串：弱、中、强
+ */
+export function verifyPasswordStrength(val: string) {
+	let v = '';
+	// 弱：纯数字，纯字母，纯特殊字符
+	if (/^(?:\d+|[a-zA-Z]+|[!@#$%^&\.*]+){6,16}$/.test(val)) v = '弱';
+	// 中：字母+数字，字母+特殊字符，数字+特殊字符
+	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '中';
+	// 强：字母+数字+特殊字符
+	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
+		v = '强';
+	// 返回结果
+	return v;
+}
+
+/**
+ * IP地址
+ * @param val 当前值字符串
+ * @returns 返回 true: IP地址正确
+ */
+export function verifyIPAddress(val: string) {
+	// false: IP地址不正确
+	if (
+		!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+			val
+		)
+	)
+		return false;
+	// true: IP地址正确
+	else return true;
+}
+
+/**
+ * 邮箱
+ * @param val 当前值字符串
+ * @returns 返回 true: 邮箱正确
+ */
+export function verifyEmail(val: string) {
+	// false: 邮箱不正确
+	if (
+		!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+			val
+		)
+	)
+		return false;
+	// true: 邮箱正确
+	else return true;
+}
+
+/**
+ * 身份证
+ * @param val 当前值字符串
+ * @returns 返回 true: 身份证正确
+ */
+export function verifyIdCard(val: string) {
+	// false: 身份证不正确
+	if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)) return false;
+	// true: 身份证正确
+	else return true;
+}
+
+/**
+ * 姓名
+ * @param val 当前值字符串
+ * @returns 返回 true: 姓名正确
+ */
+export function verifyFullName(val: string) {
+	// false: 姓名不正确
+	if (!/^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/.test(val)) return false;
+	// true: 姓名正确
+	else return true;
+}
+
+/**
+ * 邮政编码
+ * @param val 当前值字符串
+ * @returns 返回 true: 邮政编码正确
+ */
+export function verifyPostalCode(val: string) {
+	// false: 邮政编码不正确
+	if (!/^[1-9][0-9]{5}$/.test(val)) return false;
+	// true: 邮政编码正确
+	else return true;
+}
+
+/**
+ * url 处理
+ * @param val 当前值字符串
+ * @returns 返回 true: url 正确
+ */
+export function verifyUrl(val: string) {
+	// false: url不正确
+	if (
+		!/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
+			val
+		)
+	)
+		return false;
+	// true: url正确
+	else return true;
+}
+
+/**
+ * 车牌号
+ * @param val 当前值字符串
+ * @returns 返回 true：车牌号正确
+ */
+export function verifyCarNum(val: string) {
+	// false: 车牌号不正确
+	if (
+		!/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(
+			val
+		)
+	)
+		return false;
+	// true：车牌号正确
+	else return true;
+}
diff --git a/src/utils/wartermark.ts b/src/utils/wartermark.ts
new file mode 100644
index 0000000..b897ed1
--- /dev/null
+++ b/src/utils/wartermark.ts
@@ -0,0 +1,47 @@
+// 页面添加水印效果
+const setWatermark = (str: string) => {
+	const id = '1.23452384164.123412416';
+	if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
+	const can = document.createElement('canvas');
+	can.width = 200;
+	can.height = 130;
+	const cans: any = can.getContext('2d');
+	cans.rotate((-20 * Math.PI) / 180);
+	cans.font = '12px Vedana';
+	cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
+	cans.textBaseline = 'Middle';
+	cans.fillText(str, can.width / 10, can.height / 2);
+	const div = document.createElement('div');
+	div.id = id;
+	div.style.pointerEvents = 'none';
+	div.style.top = '15px';
+	div.style.left = '0px';
+	div.style.position = 'fixed';
+	div.style.zIndex = '10000000';
+	div.style.width = `${document.documentElement.clientWidth}px`;
+	div.style.height = `${document.documentElement.clientHeight}px`;
+	div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;
+	document.body.appendChild(div);
+	return id;
+};
+
+/**
+ * 页面添加水印效果
+ * @method set 设置水印
+ * @method del 删除水印
+ */
+const watermark = {
+	// 设置水印
+	set: (str: string) => {
+		let id = setWatermark(str);
+		if (document.getElementById(id) === null) id = setWatermark(str);
+	},
+	// 删除水印
+	del: () => {
+		let id = '1.23452384164.123412416';
+		if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
+	},
+};
+
+// 导出方法
+export default watermark;
diff --git a/src/views/bigUpload/component/editBigUpload.vue b/src/views/bigUpload/component/editBigUpload.vue
new file mode 100644
index 0000000..d73b5df
--- /dev/null
+++ b/src/views/bigUpload/component/editBigUpload.vue
@@ -0,0 +1,93 @@
+<template>
+  <el-dialog v-model="isShowDialog" width="769px">
+    <template #header>修改</template>
+    <el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
+      <el-form-item label="标题" prop="name">
+        <el-input v-model="ruleForm.name" placeholder="请输入标题" />
+      </el-form-item>
+      <el-form-item label="备注" prop="describe">
+        <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入描述" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+				<span class="dialog-footer">
+					<el-button @click="closeDialog" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">修改</el-button>
+				</span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import {ref, reactive, defineComponent} from 'vue';
+import {getBigFile, editBigFile} from "/@/api/system/bigFile";
+
+import {ElMessage} from "element-plus";
+export default defineComponent({
+  name: "editBigUpload",
+  props:{},
+  emits: ["success"],
+  setup(prop, {emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+    const isShowDialog = ref<boolean>(false)
+    const ruleForm = reactive<any>({id:0, name:"", describe:""})
+    const rules = reactive<any>({
+      name: [
+        { required: true, message: "标题不能为空", trigger: "blur" }
+      ],
+    })
+    const openDialog = async (id:number) => {
+      resetForm()
+      const result = await getBigFile(id).then((res:any) => res.code === 0? res.data || {} : {})
+      const {name, describe} = result
+      ruleForm.id = result.id
+      ruleForm.name = name
+      ruleForm.describe = describe
+      isShowDialog.value = true
+    }
+    const closeDialog =  () => {
+      isShowDialog.value = false
+    }
+
+
+    const resetForm = () => {
+      ruleForm.id = 0
+      ruleForm.name = ""
+      ruleForm.describe = ""
+    }
+
+    const  onSubmit = async () => {
+      const formWrap = formRef.value as any
+      if (!formWrap) return;
+
+      formWrap.validate(async (valid: boolean) => {
+        if (valid) {
+          const result:any = await editBigFile(ruleForm)
+          if (result.code === 0) {
+            ElMessage.success('修改成功');
+            closeDialog()
+            emit('success')
+          } else {
+            ElMessage.error("修改失败")
+          }
+        }
+      });
+    }
+
+    return {
+      openDialog,
+      closeDialog,
+      isShowDialog,
+      ruleForm,
+      rules,
+      onSubmit,
+      formRef,
+      resetForm
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/bigUpload/index.vue b/src/views/bigUpload/index.vue
new file mode 100644
index 0000000..1f9cb6b
--- /dev/null
+++ b/src/views/bigUpload/index.vue
@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
+          <el-form-item label="文件名称" prop="name">
+            <el-input
+                v-model="queryParams.name"
+                placeholder="请输入文件名称"
+                clearable
+                size="default"
+                @keyup.enter.native="getBigFileList"
+            />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="getBigFileList">
+              <el-icon>
+                <ele-Search/>
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh/>
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="uploadHandle">
+              <el-icon>
+                <ele-FolderAdd/>
+              </el-icon>
+              文件上传
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="delMult">
+              <el-icon>
+                <ele-Delete/>
+              </el-icon>
+              删除文件
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center"/>
+        <el-table-column label="标题" align="center" prop="name"/>
+        <el-table-column label="大小" align="center" prop="size">
+          <template #default="scope">
+            {{byteText(scope.row.size)}}
+          </template>
+        </el-table-column>
+        <el-table-column label="文件类型" align="center" prop="mimeType"/>
+<!--        <el-table-column label="文件描述" align="center" prop="describe"/>-->
+        <el-table-column label="创建时间" align="center" prop="createdAt"/>
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button size="small" text type="primary" @click="edit(scope.row)">修改</el-button>
+            <el-button size="small" text type="primary" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+          v-show="total>0"
+          :total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getBigFileList"
+      />
+
+
+      <EditBigUpload ref="editBigUploadRef" @success="getBigFileList"></EditBigUpload>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+
+import { onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
+import getTableData from '/@/views/bigUpload/tableData'
+import {addBigFile, deleteBigFile} from "/@/api/system/bigFile";
+import {ElMessage, ElMessageBox} from "element-plus";
+import EditBigUpload from '/@/views/bigUpload/component/editBigUpload.vue'
+
+
+export default defineComponent({
+  name: "bigUpload",
+  components:{
+    EditBigUpload
+  },
+  setup() {
+
+    const {
+      total,
+      queryParams,
+      tableData,
+      queryRef,
+      resetQuery,
+      getBigFileList,
+      resetBigFileList
+    } = getTableData()
+
+
+    const editBigUploadRef = ref();
+
+
+    const {proxy} = <any>getCurrentInstance();
+
+    const selected = ref<number[]>([])
+
+    // 文件上传
+    const uploadHandle = function () {
+      proxy.mittBus.emit("bigUploader.uploadFile")
+    }
+
+    onMounted(()=> {
+      proxy.mittBus.on("bigUploader.uploadFileSuccess", (res:any) => {
+        //console.log(res)
+        if (res.skipUpload === true) {
+          // 秒传
+        }
+        const {filename, totalSize, url, identifier,  fileType} = res
+        addBigFile({
+          name: filename,
+          size: totalSize,
+          path: url,
+          mimeType: fileType,
+          source: 0,
+          md5: identifier
+        }).then(() => {
+          resetBigFileList()
+        })
+      })
+    })
+
+
+    const handleSelectionChange =  (selection:any[]) => {
+      selected.value = selection.map(item => item.id)
+    }
+
+    const edit = function (row:any) {
+      editBigUploadRef.value.openDialog(row.id)
+    }
+
+    const del = function (row:any) {
+      ElMessageBox.confirm(`是否删除文件:${row.name}`, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(()=> {
+        deleteBigFile([row.id]).then(()=> {
+          getBigFileList()
+        })
+      })
+    }
+
+
+    const delMult = function () {
+      if(selected.value.length===0) {
+        ElMessage.error('请选择要删除的数据。');
+        return
+      }
+      ElMessageBox.confirm(`确定删除所选数据?`, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(()=> {
+        deleteBigFile([...selected.value]).then(()=> {
+          getBigFileList()
+        })
+      })
+
+    }
+
+
+
+    const byteText  = function (value:number) :string {
+      if (value > 1048576 ) {
+        return (value / 1024 / 1024).toFixed(2) + "MB"
+      } else if (value > 0)  {
+        return (value / 1024).toFixed(2) + "KB"
+      } else {
+        return ""
+      }
+    }
+
+
+    return {
+      total,
+      queryParams,
+      tableData,
+      queryRef,
+      resetQuery,
+      getBigFileList,
+      resetBigFileList,
+      uploadHandle,
+      handleSelectionChange,
+      byteText,
+      edit,
+      del,
+      delMult,
+      editBigUploadRef
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/bigUpload/tableData.ts b/src/views/bigUpload/tableData.ts
new file mode 100644
index 0000000..656ee59
--- /dev/null
+++ b/src/views/bigUpload/tableData.ts
@@ -0,0 +1,48 @@
+import {onMounted, reactive, ref} from "vue";
+import {getBigFileList as apiGetBigFileList} from "/@/api/system/bigFile";
+import {FormInstance} from "element-plus/es";
+
+export default function () {
+    const tableData = ref<any[]>([])
+    let total = ref<number>(0)
+    const queryParams = reactive({
+        pageNum: 1,
+        pageSize: 10,
+        name: '',
+        orderBy:'created_at desc'
+    })
+    const queryRef = ref<FormInstance>();
+
+    const resetQuery = (formEl: FormInstance | undefined) => {
+        if (!formEl) return
+        formEl.resetFields()
+        getBigFileList()
+    }
+
+
+    const getBigFileList = async () =>  {
+        const result:any = await apiGetBigFileList(queryParams).then((res:any) => res.code === 0 ? res.data : {})
+        tableData.value =  Array.isArray(result.list) ? result.list : []
+        total.value = result.total || 0
+    }
+
+    const resetBigFileList = async () => {
+        queryParams.pageNum = 1
+        queryParams.pageSize = 10
+        queryParams.name = ''
+        await getBigFileList()
+    }
+
+
+    onMounted(getBigFileList)
+
+    return {
+        total,
+        queryParams,
+        tableData,
+        queryRef,
+        resetQuery,
+        getBigFileList,
+        resetBigFileList
+    }
+}
diff --git a/src/views/chart/chart.scss b/src/views/chart/chart.scss
new file mode 100644
index 0000000..9ba92cb
--- /dev/null
+++ b/src/views/chart/chart.scss
@@ -0,0 +1,434 @@
+.chart-scrollbar {
+	.chart-warp {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.chart-warp-bottom {
+			flex: 1;
+			overflow: hidden;
+			display: flex;
+			.big-data-down-left,
+			.big-data-down-right {
+				width: 30%;
+				display: flex;
+				flex-direction: column;
+				.flex-warp-item {
+					padding: 0 7.5px 15px 15px;
+					width: 100%;
+					height: 33.33%;
+					.flex-warp-item-box {
+						width: 100%;
+						height: 100%;
+						background: var(--el-color-white);
+						border: 1px solid var(--el-border-color-lighter);
+						border-radius: 4px;
+						display: flex;
+						flex-direction: column;
+						padding: 15px;
+						transition: all ease 0.3s;
+						&:hover {
+							box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+							transition: all ease 0.3s;
+						}
+						.flex-title {
+							margin-bottom: 15px;
+							display: flex;
+							justify-content: space-between;
+							.flex-title-small {
+								font-size: 12px;
+							}
+						}
+						.flex-content {
+							flex: 1;
+							font-size: 12px;
+						}
+						.flex-content-overflow {
+							overflow: hidden;
+						}
+					}
+				}
+			}
+			.big-data-down-left {
+				color: var(--el-text-color-primary);
+				.sky {
+					display: flex;
+					align-items: center;
+					.sky-left {
+						font-size: 30px;
+					}
+					.sky-center {
+						flex: 1;
+						overflow: hidden;
+						padding: 0 10px;
+						font {
+							margin-right: 15px;
+						}
+						.span {
+							background: #22bc76;
+							border-radius: 2px;
+							padding: 0 5px;
+							color: var(--el-color-white);
+						}
+					}
+					.sky-right {
+						span {
+							font-size: 30px;
+						}
+						font {
+							font-size: 20px;
+						}
+					}
+				}
+				.sky-dd {
+					.sky-dl {
+						display: flex;
+						align-items: center;
+						height: 28px;
+						overflow: hidden;
+						div {
+							flex: 1;
+							overflow: hidden;
+							i {
+								font-size: 14px;
+							}
+						}
+						.tip {
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+						}
+					}
+					.sky-dl-first {
+						color: var(--el-color-primary);
+					}
+				}
+				.d-states {
+					display: flex;
+					.d-states-item {
+						flex: 1;
+						display: flex;
+						align-items: center;
+						overflow: hidden;
+						i {
+							font-size: 20px;
+							height: 33px;
+							width: 33px;
+							line-height: 33px;
+							text-align: center;
+							border-radius: 100%;
+							flex-shrink: 1;
+							color: var(--el-color-white);
+							display: flex;
+							align-items: center;
+							justify-content: center;
+						}
+						.i-bg1 {
+							background: #22bc76;
+						}
+						.i-bg2 {
+							background: #e2356d;
+						}
+						.i-bg3 {
+							background: #43bbef;
+						}
+						.d-states-flex {
+							overflow: hidden;
+							padding: 0 10px 0;
+							.d-states-item-label {
+								color: var(--el-color-primary);
+								overflow: hidden;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+							}
+							.d-states-item-value {
+								font-size: 14px;
+								text-align: center;
+								margin-top: 3px;
+								color: var(--el-color-primary);
+							}
+						}
+					}
+				}
+				.d-btn {
+					margin-top: 5px;
+					.d-btn-item {
+						border: 1px solid var(--el-color-primary);
+						display: flex;
+						width: 100%;
+						border-radius: 35px;
+						align-items: center;
+						padding: 5px;
+						margin-top: 15px;
+						cursor: pointer;
+						transition: all ease 0.3s;
+						color: var(--el-color-primary);
+						.d-btn-item-left {
+							font-size: 20px;
+							border: 1px solid var(--el-color-primary);
+							width: 25px;
+							height: 25px;
+							line-height: 25px;
+							border-radius: 100%;
+							text-align: center;
+							font-size: 14px;
+						}
+						.d-btn-item-center {
+							padding: 0 10px;
+							flex: 1;
+						}
+						.d-btn-item-eight {
+							text-align: right;
+							padding-right: 10px;
+						}
+					}
+				}
+			}
+			.big-data-down-center {
+				width: 40%;
+				display: flex;
+				flex-direction: column;
+				.big-data-down-center-one {
+					height: 66.67%;
+					padding: 0 7.5px 15px;
+					.big-data-down-center-one-content {
+						height: 100%;
+						background: var(--el-color-white);
+						padding: 15px;
+						border: 1px solid var(--el-border-color-lighter);
+						border-radius: 4px;
+						transition: all ease 0.3s;
+						&:hover {
+							box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+							transition: all ease 0.3s;
+						}
+					}
+				}
+				.big-data-down-center-two {
+					padding: 0 7.5px 15px;
+					height: 33.33%;
+					.flex-warp-item-box {
+						width: 100%;
+						height: 100%;
+						background: var(--el-color-white);
+						display: flex;
+						flex-direction: column;
+						padding: 15px;
+						border: 1px solid var(--el-border-color-lighter);
+						border-radius: 4px;
+						transition: all ease 0.3s;
+						&:hover {
+							box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+							transition: all ease 0.3s;
+						}
+						.flex-title {
+							margin-bottom: 15px;
+							color: var(--el-text-color-primary);
+							display: flex;
+							justify-content: space-between;
+							.flex-title-small {
+								font-size: 12px;
+							}
+						}
+						.flex-content {
+							flex: 1;
+							font-size: 12px;
+							display: flex;
+							height: calc(100% - 30px);
+							.flex-content-left {
+								display: flex;
+								flex-wrap: wrap;
+								width: 120px;
+								height: 100%;
+								.monitor-item {
+									width: 50%;
+									display: flex;
+									align-items: center;
+									.monitor-wave {
+										cursor: pointer;
+										width: 40px;
+										height: 40px;
+										position: relative;
+										background-color: var(--el-color-primary);
+										border-radius: 50%;
+										overflow: hidden;
+										text-align: center;
+										&::before,
+										&::after {
+											content: '';
+											position: absolute;
+											left: 50%;
+											width: 40px;
+											height: 40px;
+											background: #f4f4f4;
+											animation: roateOne 10s linear infinite;
+											transform: translateX(-50%);
+											z-index: 1;
+										}
+										&::before {
+											bottom: 10px;
+											border-radius: 60%;
+										}
+										&::after {
+											bottom: 8px;
+											opacity: 0.7;
+											border-radius: 37%;
+										}
+										.monitor-z-index {
+											position: relative;
+											z-index: 2;
+											color: var(--el-color-primary);
+											display: flex;
+											align-items: center;
+											height: 100%;
+											justify-content: center;
+										}
+									}
+									@keyframes roateOne {
+										0% {
+											transform: translate(-50%, 0) rotateZ(0deg);
+										}
+										50% {
+											transform: translate(-50%, -2%) rotateZ(180deg);
+										}
+										100% {
+											transform: translate(-50%, 0%) rotateZ(360deg);
+										}
+									}
+									.monitor-active {
+										background-color: #22bc76;
+										.monitor-z-index {
+											color: #22bc76;
+										}
+									}
+								}
+							}
+							.flex-content-right {
+								flex: 1;
+							}
+						}
+					}
+				}
+			}
+			.big-data-down-right {
+				.flex-warp-item {
+					padding: 0 15px 15px 7.5px;
+					.flex-title {
+						color: var(--el-text-color-primary);
+					}
+					.flex-content {
+						display: flex;
+						flex-direction: column;
+						.task {
+							display: flex;
+							height: 45px;
+							.task-item {
+								flex: 1;
+								color: var(--el-color-white);
+								display: flex;
+								justify-content: center;
+								.task-item-box {
+									position: relative;
+									width: 45px;
+									height: 45px;
+									overflow: hidden;
+									border-radius: 100%;
+									z-index: 0;
+									display: flex;
+									align-items: center;
+									flex-direction: column;
+									justify-content: center;
+									box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
+									&::before {
+										content: '';
+										position: absolute;
+										z-index: -2;
+										left: -50%;
+										top: -50%;
+										width: 200%;
+										height: 200%;
+										background-repeat: no-repeat;
+										background-size: 50% 50%, 50% 50%;
+										background-position: 0 0, 100% 0, 100% 100%, 0 100%;
+										background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
+											linear-gradient(#ffb980, #ffb980);
+										animation: rotate 2s linear infinite;
+									}
+									&::after {
+										content: '';
+										position: absolute;
+										z-index: -1;
+										left: 1px;
+										top: 1px;
+										width: calc(100% - 2px);
+										height: calc(100% - 2px);
+										border-radius: 100%;
+									}
+									.task-item-value {
+										text-align: center;
+										font-size: 14px;
+										font-weight: bold;
+									}
+									.task-item-label {
+										text-align: center;
+									}
+								}
+								.task1 {
+									&::after {
+										background: #5492be;
+									}
+								}
+								.task2 {
+									&::after {
+										background: #43a177;
+									}
+								}
+								.task3 {
+									&::after {
+										background: #a76077;
+									}
+								}
+							}
+							.task-first-item {
+								flex-direction: column;
+								text-align: center;
+								color: var(--el-color-primary);
+								.task-first {
+									font-size: 20px;
+								}
+							}
+						}
+						.progress {
+							color: var(--el-text-color-primary);
+							display: flex;
+							flex-direction: column;
+							flex: 1;
+							justify-content: space-between;
+							margin-top: 15px;
+							.progress-item {
+								height: 33.33%;
+								display: flex;
+								align-items: center;
+								.progress-box {
+									flex: 1;
+									width: 100%;
+									margin-left: 10px;
+									:deep(.el-progress__text) {
+										color: var(--el-text-color-primary);
+										font-size: 12px !important;
+										text-align: right;
+									}
+									:deep(.el-progress-bar__outer) {
+										background-color: rgba(0, 0, 0, 0.1) !important;
+									}
+									:deep(.el-progress-bar) {
+										margin-right: -22px !important;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/src/views/chart/chart.ts b/src/views/chart/chart.ts
new file mode 100644
index 0000000..6d10fd6
--- /dev/null
+++ b/src/views/chart/chart.ts
@@ -0,0 +1,59 @@
+/**
+ * sky 天气
+ * @returns 返回模拟数据
+ */
+export const skyList = [
+	{
+		v1: '时间',
+		v2: '天气',
+		v3: '温度',
+		v5: '降水',
+		v7: '风力',
+		type: 'title',
+	},
+	{
+		v1: '今天',
+		v2: 'ele-Sunny',
+		v3: '20°/26°',
+		v5: '50%',
+		v7: '13m/s',
+	},
+	{
+		v1: '明天',
+		v2: 'ele-Lightning',
+		v3: '20°/26°',
+		v5: '50%',
+		v7: '13m/s',
+	},
+];
+
+/**
+ * 当前设置状态
+ * @returns 返回模拟数据
+ */
+export const dBtnList = [
+	{
+		v2: '阳光玫瑰种植',
+		v3: '126天',
+		v4: '设备在线',
+	},
+];
+
+/**
+ * 当前设备监测
+ * @returns 返回模拟数据
+ */
+export const chartData4List = [
+	{
+		label: '温度',
+	},
+	{
+		label: '光照',
+	},
+	{
+		label: '湿度',
+	},
+	{
+		label: '风力',
+	},
+];
diff --git a/src/views/chart/head.vue b/src/views/chart/head.vue
new file mode 100644
index 0000000..82842e8
--- /dev/null
+++ b/src/views/chart/head.vue
@@ -0,0 +1,107 @@
+<template>
+	<div class="big-data-up mb15">
+		<div class="up-left">
+			<i class="el-icon-time mr5"></i>
+			<span>{{ time.txt }}</span>
+		</div>
+		<div class="up-center">
+			<span>智慧农业系统平台</span>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, onBeforeMount, onUnmounted, defineComponent } from 'vue';
+import { formatDate } from '/@/utils/formatTime';
+
+export default defineComponent({
+	name: 'chartHead',
+	setup() {
+		const state = reactive({
+			time: {
+				txt: '',
+				fun: 0,
+			},
+		});
+		// 初始化时间
+		const initTime = () => {
+			state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
+			state.time.fun = window.setInterval(() => {
+				state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
+			}, 1000);
+		};
+		// 页面加载前
+		onBeforeMount(() => {
+			initTime();
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			window.clearInterval(state.time.fun);
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.big-data-up {
+	height: 55px;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 0 15px;
+	color: var(--el-color-primary);
+	overflow: hidden;
+	position: relative;
+	.up-left {
+		position: absolute;
+	}
+	.up-center {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		font-size: 18px;
+		letter-spacing: 5px;
+		background-image: -webkit-linear-gradient(
+			left,
+			var(--el-color-primary),
+			var(--el-color-primary-light-3) 25%,
+			var(--el-color-primary) 50%,
+			var(--el-color-primary-light-3) 75%,
+			var(--el-color-primary)
+		);
+		-webkit-text-fill-color: transparent;
+		-webkit-background-clip: text;
+		background-clip: text;
+		background-size: 200% 100%;
+		-webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
+		animation: masked-animation-data-v-b02d8052 4s linear infinite;
+		-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.1)));
+		position: relative;
+		@keyframes masked-animation {
+			0% {
+				background-position: 0 0;
+			}
+			100% {
+				background-position: -100% 0;
+			}
+		}
+		position: relative;
+		&::after {
+			content: '';
+			width: 250px;
+			position: absolute;
+			bottom: -15px;
+			left: 50%;
+			transform: translateX(-50%);
+			border: 1px transparent solid;
+			border-image: linear-gradient(to right, var(--el-color-primary-light-9), var(--el-color-primary)) 1 10;
+		}
+		span {
+			cursor: pointer;
+		}
+	}
+}
+</style>
diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue
new file mode 100644
index 0000000..6e1c431
--- /dev/null
+++ b/src/views/chart/index.vue
@@ -0,0 +1,492 @@
+<template>
+	<div class="chart-scrollbar layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
+		<div class="chart-warp">
+			<div class="chart-warp-top">
+				<ChartHead />
+			</div>
+			<div class="chart-warp-bottom">
+				<!-- 左边 -->
+				<div class="big-data-down-left">
+					<div class="flex-warp-item">
+						<div class="flex-warp-item-box">
+							<div class="flex-title">天气预报</div>
+							<div class="flex-content">
+								<div class="sky">
+									<SvgIcon name="ele-Sunny" class="sky-left" />
+									<div class="sky-center">
+										<div class="mb2">
+											<span>多云转晴</span>
+											<span>东南风</span>
+											<span class="span ml5">良</span>
+										</div>
+									</div>
+									<div class="sky-right">
+										<span>25</span>
+										<span>°C</span>
+									</div>
+								</div>
+								<div class="sky-dd">
+									<div class="sky-dl" v-for="(v, k) in skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
+										<div>{{ v.v1 }}</div>
+										<div v-if="v.type === 'title'">{{ v.v2 }}</div>
+										<div v-else>
+											<SvgIcon :name="v.v2" />
+										</div>
+										<div>{{ v.v3 }}</div>
+										<div class="tip">{{ v.v5 }}</div>
+										<div>{{ v.v7 }}</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="flex-warp-item">
+						<div class="flex-warp-item-box">
+							<div class="flex-title">当前设备状态</div>
+							<div class="flex-content flex-content-overflow">
+								<div class="d-states">
+									<div class="d-states-item">
+										<SvgIcon name="ele-Odometer" class="i-bg1" />
+										<div class="d-states-flex">
+											<div class="d-states-item-label">园区设备数</div>
+											<div class="d-states-item-value">99</div>
+										</div>
+									</div>
+									<div class="d-states-item">
+										<SvgIcon name="ele-FirstAidKit" class="i-bg2" />
+										<div class="d-states-flex">
+											<div class="d-states-item-label">预警设备数</div>
+											<div class="d-states-item-value">10</div>
+										</div>
+									</div>
+									<div class="d-states-item">
+										<SvgIcon name="ele-VideoPlay" class="i-bg3" />
+										<div class="d-states-flex">
+											<div class="d-states-item-label">运行设备数</div>
+											<div class="d-states-item-value">20</div>
+										</div>
+									</div>
+								</div>
+								<div class="d-btn">
+									<div class="d-btn-item" v-for="(v, k) in dBtnList" :key="k">
+										<i class="d-btn-item-left el-icon-money"></i>
+										<div class="d-btn-item-center">
+											<div>{{ v.v2 }}|{{ v.v3 }}</div>
+										</div>
+										<div class="d-btn-item-eight">{{ v.v4 }}</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="flex-warp-item">
+						<div class="flex-warp-item-box">
+							<div class="flex-title">近30天预警总数</div>
+							<div class="flex-content">
+								<div style="height: 100%" ref="chartsWarningRef"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- 中间 -->
+				<div class="big-data-down-center">
+					<div class="big-data-down-center-one">
+						<div class="big-data-down-center-one-content">
+							<div style="height: 100%" ref="chartsCenterOneRef"></div>
+						</div>
+					</div>
+					<div class="big-data-down-center-two">
+						<div class="flex-warp-item-box">
+							<div class="flex-title">
+								<span>当前设备监测</span>
+								<span class="flex-title-small">单位：次</span>
+							</div>
+							<div class="flex-content">
+								<div class="flex-content-left">
+									<div class="monitor-item" v-for="(v, k) in chartData4List" :key="k">
+										<div class="monitor-wave">
+											<div class="monitor-z-index">
+												<div class="monitor-item-label">{{ v.label }}</div>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="flex-content-right">
+									<div style="height: 100%" ref="chartsMonitorRef"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- 右边 -->
+				<div class="big-data-down-right">
+					<div class="flex-warp-item">
+						<div class="flex-warp-item-box">
+							<div class="flex-title">
+								<span>近7天产品追溯扫码统计</span>
+								<span class="flex-title-small">单位：次</span>
+							</div>
+							<div class="flex-content">
+								<div style="height: 100%" ref="chartsSevenDaysRef"></div>
+							</div>
+						</div>
+					</div>
+					<div class="flex-warp-item">
+						<div class="flex-warp-item-box">
+							<div class="flex-title">当前任务统计</div>
+							<div class="flex-content">
+								<div class="task">
+									<div class="task-item task-first-item">
+										<div class="task-item-value task-first">25</div>
+										<div class="task-item-label">待办任务</div>
+									</div>
+									<div class="task-item">
+										<div class="task-item-box task1">
+											<div class="task-item-value">12</div>
+											<div class="task-item-label">施肥</div>
+										</div>
+									</div>
+									<div class="task-item">
+										<div class="task-item-box task2">
+											<div class="task-item-value">3</div>
+											<div class="task-item-label">施药</div>
+										</div>
+									</div>
+									<div class="task-item">
+										<div class="task-item-box task3">
+											<div class="task-item-value">5</div>
+											<div class="task-item-label">农事</div>
+										</div>
+									</div>
+								</div>
+								<div class="progress">
+									<div class="progress-item">
+										<span>施肥率</span>
+										<div class="progress-box">
+											<el-progress :percentage="70" color="#43bdf0"></el-progress>
+										</div>
+									</div>
+									<div class="progress-item">
+										<span>施药率</span>
+										<div class="progress-box">
+											<el-progress :percentage="36" color="#43bdf0"></el-progress>
+										</div>
+									</div>
+									<div class="progress-item">
+										<span>农事率</span>
+										<div class="progress-box">
+											<el-progress :percentage="91" color="#43bdf0"></el-progress>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="flex-warp-item">
+						<div class="flex-warp-item-box">
+							<div class="flex-title">
+								<span>近7天投入品记录</span>
+								<span class="flex-title-small">单位：件</span>
+							</div>
+							<div class="flex-content">
+								<div style="height: 100%" ref="chartsInvestmentRef"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick, onActivated, defineComponent } from 'vue';
+import ChartHead from '/@/views/chart/head.vue';
+import * as echarts from 'echarts';
+import 'echarts-wordcloud';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { skyList, dBtnList, chartData4List } from '/@/views/chart/chart';
+
+export default defineComponent({
+	name: 'chartIndex',
+	components: { ChartHead },
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const state = reactive({
+			skyList,
+			dBtnList,
+			chartData4List,
+			myCharts: [],
+		});
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		// 初始化中间图表1
+		const initChartsCenterOne = () => {
+			const myChart = echarts.init(proxy.$refs.chartsCenterOneRef);
+			const option = {
+				grid: {
+					top: 15,
+					right: 15,
+					bottom: 20,
+					left: 30,
+				},
+				tooltip: {},
+				series: [
+					{
+						type: 'wordCloud',
+						sizeRange: [12, 40],
+						rotationRange: [0, 0],
+						rotationStep: 45,
+						gridSize: Math.random() * 20 + 5,
+						shape: 'circle',
+						width: '100%',
+						height: '100%',
+						textStyle: {
+							fontFamily: 'sans-serif',
+							fontWeight: 'bold',
+							color: function () {
+								return `rgb(${[Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',')})`;
+							},
+						},
+						data: [
+							{ name: 'gfastV3', value: 520 },
+							{ name: 'lyt', value: 520 },
+							{ name: 'next-admin', value: 500 },
+							{ name: '更名', value: 420 },
+							{ name: '智慧农业', value: 520 },
+							{ name: '男神', value: 2.64 },
+							{ name: '好身材', value: 4.03 },
+							{ name: '校草', value: 24.95 },
+							{ name: '酷', value: 4.04 },
+							{ name: '时尚', value: 5.27 },
+							{ name: '阳光活力', value: 5.8 },
+							{ name: '初恋', value: 3.09 },
+							{ name: '英俊潇洒', value: 24.71 },
+							{ name: '霸气', value: 6.33 },
+							{ name: '腼腆', value: 2.55 },
+							{ name: '蠢萌', value: 3.88 },
+							{ name: '青春', value: 8.04 },
+							{ name: '网红', value: 5.87 },
+							{ name: '萌', value: 6.97 },
+							{ name: '认真', value: 2.53 },
+							{ name: '古典', value: 2.49 },
+							{ name: '温柔', value: 3.91 },
+							{ name: '有个性', value: 3.25 },
+							{ name: '可爱', value: 9.93 },
+							{ name: '幽默诙谐', value: 3.65 },
+						],
+					},
+				],
+			};
+			myChart.setOption(option);
+			(<any>state.myCharts).push(myChart);
+		};
+		// 初始化近7天产品追溯扫码统计
+		const initChartsSevenDays = () => {
+			const myChart = echarts.init(proxy.$refs.chartsSevenDaysRef);
+			const option = {
+				grid: {
+					top: 15,
+					right: 15,
+					bottom: 20,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				xAxis: {
+					type: 'category',
+					boundaryGap: false,
+					data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
+				},
+				yAxis: {
+					type: 'value',
+				},
+				series: [
+					{
+						name: '邮件营销',
+						type: 'line',
+						stack: '总量',
+						data: [12, 32, 11, 34, 90, 23, 21],
+					},
+					{
+						name: '联盟广告',
+						type: 'line',
+						stack: '总量',
+						data: [22, 82, 91, 24, 90, 30, 30],
+					},
+					{
+						name: '视频广告',
+						type: 'line',
+						stack: '总量',
+						data: [50, 32, 18, 14, 90, 30, 50],
+					},
+				],
+			};
+			myChart.setOption(option);
+			(<any>state.myCharts).push(myChart);
+		};
+		// 初始化近30天预警总数
+		const initChartsWarning = () => {
+			const myChart = echarts.init(proxy.$refs.chartsWarningRef);
+			const option = {
+				grid: {
+					top: 50,
+					right: 20,
+					bottom: 30,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'item',
+				},
+				series: [
+					{
+						name: '面积模式',
+						type: 'pie',
+						radius: [20, 50],
+						center: ['50%', '50%'],
+						roseType: 'area',
+						itemStyle: {
+							borderRadius: 8,
+						},
+						data: [
+							{ value: 40, name: '监测设备预警' },
+							{ value: 38, name: '天气预警' },
+							{ value: 32, name: '任务预警' },
+							{ value: 30, name: '病虫害预警' },
+						],
+					},
+				],
+			};
+			myChart.setOption(option);
+			(<any>state.myCharts).push(myChart);
+		};
+		// 初始化当前设备监测
+		const initChartsMonitor = () => {
+			const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
+			const option = {
+				grid: {
+					top: 15,
+					right: 15,
+					bottom: 20,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				xAxis: {
+					type: 'category',
+					boundaryGap: false,
+					data: ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00'],
+				},
+				yAxis: {
+					type: 'value',
+				},
+				series: [
+					{
+						itemStyle: {
+							color: '#289df5',
+							borderColor: '#289df5',
+							areaStyle: {
+								type: 'default',
+								opacity: 0.1,
+							},
+						},
+						data: [20, 32, 31, 34, 12, 13, 20],
+						type: 'line',
+						areaStyle: {},
+					},
+				],
+			};
+			myChart.setOption(option);
+			(<any>state.myCharts).push(myChart);
+		};
+		// 初始化近7天投入品记录
+		const initChartsInvestment = () => {
+			const myChart = echarts.init(proxy.$refs.chartsInvestmentRef);
+			const option = {
+				grid: {
+					top: 15,
+					right: 15,
+					bottom: 20,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				xAxis: {
+					type: 'category',
+					data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
+				},
+				yAxis: {
+					type: 'value',
+				},
+				series: [
+					{
+						data: [10, 20, 15, 80, 70, 11, 30],
+						type: 'bar',
+					},
+				],
+			};
+			myChart.setOption(option);
+			(<any>state.myCharts).push(myChart);
+		};
+		// 批量设置 echarts resize
+		const initEchartsResizeFun = () => {
+			nextTick(() => {
+				for (let i = 0; i < state.myCharts.length; i++) {
+					(<any>state.myCharts[i]).resize();
+				}
+			});
+		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
+			window.addEventListener('resize', initEchartsResizeFun);
+		};
+		// 页面加载时
+		onMounted(() => {
+			initChartsCenterOne();
+			initChartsSevenDays();
+			initChartsWarning();
+			initChartsMonitor();
+			initChartsInvestment();
+			initEchartsResize();
+		});
+		// 由于页面缓存原因，keep-alive
+		onActivated(() => {
+			initEchartsResizeFun();
+		});
+		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
+		watch(
+			() => isTagsViewCurrenFull.value,
+			() => {
+				initEchartsResizeFun();
+			}
+		);
+		return {
+			initTagViewHeight,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+@import './chart.scss';
+</style>
diff --git a/src/views/demo/map2.ts b/src/views/demo/map2.ts
new file mode 100644
index 0000000..fcd7490
--- /dev/null
+++ b/src/views/demo/map2.ts
@@ -0,0 +1,16 @@
+import {defineComponent,h} from "vue";
+
+export default defineComponent({
+    name:"baiduMap",
+    props:{
+        src:{
+            type:String,
+            default:'',
+        }
+    },
+    setup(prop){
+        return ()=>{
+            return h('script',{src:prop.src,type:'text/javascript'})
+        }
+    },
+})
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
new file mode 100644
index 0000000..711fa25
--- /dev/null
+++ b/src/views/error/401.vue
@@ -0,0 +1,118 @@
+<template>
+	<div class="error layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
+		<div class="error-flex">
+			<div class="left">
+				<div class="left-item">
+					<div class="left-item-animation left-item-num">401</div>
+					<div class="left-item-animation left-item-title">{{ $t('message.noAccess.accessTitle') }}</div>
+					<div class="left-item-animation left-item-msg">{{ $t('message.noAccess.accessMsg') }}</div>
+					<div class="left-item-animation left-item-btn">
+						<el-button type="primary" round @click="onSetAuth">{{ $t('message.noAccess.accessBtn') }}</el-button>
+					</div>
+				</div>
+			</div>
+			<div class="right">
+				<img
+					src="https://img-blog.csdnimg.cn/3333f265772a4fa89287993500ecbf96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { Session } from '/@/utils/storage';
+
+export default defineComponent({
+	name: '401',
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const onSetAuth = () => {
+			// https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
+			// 清除缓存/token等
+			Session.clear();
+			// 使用 reload 时，不需要调用 resetRoute() 重置路由
+			window.location.reload();
+		};
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		return {
+			onSetAuth,
+			initTagViewHeight,
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.error {
+	height: 100%;
+	background-color: var(--el-color-white);
+	display: flex;
+	.error-flex {
+		margin: auto;
+		display: flex;
+		height: 350px;
+		width: 900px;
+		.left {
+			flex: 1;
+			height: 100%;
+			align-items: center;
+			display: flex;
+			.left-item {
+				.left-item-animation {
+					opacity: 0;
+					animation-name: error-num;
+					animation-duration: 0.5s;
+					animation-fill-mode: forwards;
+				}
+				.left-item-num {
+					color: var(--el-color-info);
+					font-size: 55px;
+				}
+				.left-item-title {
+					font-size: 20px;
+					color: var(--el-text-color-primary);
+					margin: 15px 0 5px 0;
+					animation-delay: 0.1s;
+				}
+				.left-item-msg {
+					color: var(--el-text-color-secondary);
+					font-size: 12px;
+					margin-bottom: 30px;
+					animation-delay: 0.2s;
+				}
+				.left-item-btn {
+					animation-delay: 0.2s;
+				}
+			}
+		}
+		.right {
+			flex: 1;
+			opacity: 0;
+			animation-name: error-img;
+			animation-duration: 2s;
+			animation-fill-mode: forwards;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
new file mode 100644
index 0000000..3a7ce22
--- /dev/null
+++ b/src/views/error/404.vue
@@ -0,0 +1,115 @@
+<template>
+	<div class="error layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
+		<div class="error-flex">
+			<div class="left">
+				<div class="left-item">
+					<div class="left-item-animation left-item-num">404</div>
+					<div class="left-item-animation left-item-title">{{ $t('message.notFound.foundTitle') }}</div>
+					<div class="left-item-animation left-item-msg">{{ $t('message.notFound.foundMsg') }}</div>
+					<div class="left-item-animation left-item-btn">
+						<el-button type="primary" round @click="onGoHome">{{ $t('message.notFound.foundBtn') }}</el-button>
+					</div>
+				</div>
+			</div>
+			<div class="right">
+				<img
+					src="https://img-blog.csdnimg.cn/9eb1d85a417f4ed1ba7107f149ce3da1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+export default defineComponent({
+	name: '404',
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const router = useRouter();
+		const onGoHome = () => {
+			router.push('/');
+		};
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		return {
+			onGoHome,
+			initTagViewHeight,
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.error {
+	height: 100%;
+	background-color: var(--el-color-white);
+	display: flex;
+	.error-flex {
+		margin: auto;
+		display: flex;
+		height: 350px;
+		width: 900px;
+		.left {
+			flex: 1;
+			height: 100%;
+			align-items: center;
+			display: flex;
+			.left-item {
+				.left-item-animation {
+					opacity: 0;
+					animation-name: error-num;
+					animation-duration: 0.5s;
+					animation-fill-mode: forwards;
+				}
+				.left-item-num {
+					color: var(--el-color-info);
+					font-size: 55px;
+				}
+				.left-item-title {
+					font-size: 20px;
+					color: var(--el-text-color-primary);
+					margin: 15px 0 5px 0;
+					animation-delay: 0.1s;
+				}
+				.left-item-msg {
+					color: var(--el-text-color-secondary);
+					font-size: 12px;
+					margin-bottom: 30px;
+					animation-delay: 0.2s;
+				}
+				.left-item-btn {
+					animation-delay: 0.2s;
+				}
+			}
+		}
+		.right {
+			flex: 1;
+			opacity: 0;
+			animation-name: error-img;
+			animation-duration: 2s;
+			animation-fill-mode: forwards;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/fun/clipboard/index.vue b/src/views/fun/clipboard/index.vue
new file mode 100644
index 0000000..a92eed0
--- /dev/null
+++ b/src/views/fun/clipboard/index.vue
@@ -0,0 +1,38 @@
+<template>
+	<el-card shadow="hover" header="复制剪切演示">
+		<el-alert
+			title="感谢优秀的 `vue-clipboard3`，项目地址：https://github.com/JamieCurnow/vue-clipboard3`"
+			type="success"
+			:closable="false"
+			class="mb15"
+		></el-alert>
+		<el-input placeholder="请输入内容" v-model="copyVal">
+			<template #append>
+				<el-button @click="copyText(copyVal)">复制链接</el-button>
+			</template>
+		</el-input>
+		<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="shearVal" class="mt15"> </el-input>
+	</el-card>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import commonFunction from '/@/utils/commonFunction';
+
+export default defineComponent({
+	name: 'funClipboard',
+	setup() {
+		const { copyText } = commonFunction();
+		const state = reactive({
+			copyVal: 'https://gitee.com/lyt-top/vue-next-admin',
+			shearVal: '',
+		});
+		// 页面加载时
+		onMounted(() => {});
+		return {
+			copyText,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/fun/codemirror/index.vue b/src/views/fun/codemirror/index.vue
new file mode 100644
index 0000000..1e0385a
--- /dev/null
+++ b/src/views/fun/codemirror/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <codemirror
+      v-model="code"
+      placeholder="Code goes here..."
+      :style="{ height: '400px' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tab-size="2"
+      :extensions="extensions"
+      @ready="handleReady"
+      @change="log('change', $event)"
+      @focus="log('focus', $event)"
+      @blur="log('blur', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,shallowRef } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { javascript } from '@codemirror/lang-javascript'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+export default defineComponent({
+  name:"demoCodeMirror",
+  components: {
+    Codemirror
+  },
+  setup() {
+    const code = ref(`console.log('Hello, world!')`)
+    const extensions = [javascript(), oneDark]
+
+    // Codemirror EditorView instance ref
+    const view = shallowRef()
+    const handleReady = (payload) => {
+      view.value = payload.view
+    }
+
+    // Status is available at all times via Codemirror EditorView
+    const getCodemirrorStates = () => {
+      const state = view.value.state
+      const ranges = state.selection.ranges
+      const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
+      const cursor = ranges[0].anchor
+      const length = state.doc.length
+      const lines = state.doc.lines
+      // more state info ...
+      // return ...
+    }
+
+    return {
+      code,
+      extensions,
+      handleReady,
+      log: console.log
+    }
+  }
+})
+</script>
diff --git a/src/views/fun/countup/index.vue b/src/views/fun/countup/index.vue
new file mode 100644
index 0000000..267570c
--- /dev/null
+++ b/src/views/fun/countup/index.vue
@@ -0,0 +1,159 @@
+<template>
+	<div>
+		<el-card shadow="hover" header="数字滚动演示">
+			<el-alert
+				title="感谢优秀的 `countup.js`，项目地址：https://github.com/inorganik/countUp.js"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<el-row :gutter="20">
+				<el-col :sm="6" class="mb15" v-for="(v, k) in topCardItemList" :key="k">
+					<div class="countup-card-item countup-card-item-box" :style="{ background: `var(${v.color})` }">
+						<div class="countup-card-item-flex" ref="topCardItemRefs">
+							<div class="countup-card-item-title pb3">{{ v.title }}</div>
+							<div class="countup-card-item-title-num pb6"></div>
+							<div class="countup-card-item-tip pb3">{{ v.tip }}</div>
+							<div class="countup-card-item-tip-num"></div>
+						</div>
+						<i :class="v.icon" :style="{ color: v.iconColor }"></i>
+					</div>
+				</el-col>
+			</el-row>
+			<div class="flex-warp">
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="primary" size="default" @click="refreshCurrent">
+							<el-icon>
+								<ele-RefreshRight />
+							</el-icon>
+							重置/刷新数值
+						</el-button>
+					</div>
+				</div>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, onMounted, nextTick, defineComponent } from 'vue';
+import { CountUp } from 'countup.js';
+
+export default defineComponent({
+	name: 'funCountup',
+	setup() {
+		const state = reactive({
+			topCardItemRefs: null as any,
+			topCardItemList: [
+				{
+					title: '今日访问人数',
+					titleNum: '123',
+					tip: '在场人数',
+					tipNum: '911',
+					color: '--el-color-primary',
+					iconColor: '#ffcb47',
+					icon: 'iconfont icon-jinridaiban',
+				},
+				{
+					title: '实验室总数',
+					titleNum: '123',
+					tip: '使用中',
+					tipNum: '611',
+					color: '--el-color-success',
+					iconColor: '#70cf41',
+					icon: 'iconfont icon-AIshiyanshi',
+				},
+				{
+					title: '申请人数（月）',
+					titleNum: '123',
+					tip: '通过人数',
+					tipNum: '911',
+					color: '--el-color-warning',
+					iconColor: '#dfae64',
+					icon: 'iconfont icon-shenqingkaiban',
+				},
+				{
+					title: '销售情况',
+					titleNum: '123',
+					tip: '销售数',
+					tipNum: '911',
+					color: '--el-color-danger',
+					iconColor: '#e56565',
+					icon: 'iconfont icon-ditu',
+				},
+			],
+		});
+		// 初始化数字滚动
+		const initNumCountUp = () => {
+			nextTick(() => {
+				state.topCardItemRefs.forEach((v: HTMLDivElement) => {
+					new CountUp(v.querySelector('.countup-card-item-title-num') as HTMLDivElement, Math.random() * 10000).start();
+					new CountUp(v.querySelector('.countup-card-item-tip-num') as HTMLDivElement, Math.random() * 1000).start();
+				});
+			});
+		};
+		// 重置/刷新数值
+		const refreshCurrent = () => {
+			initNumCountUp();
+		};
+		// 页面加载时
+		onMounted(() => {
+			initNumCountUp();
+		});
+		return {
+			refreshCurrent,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.countup-card-item {
+	width: 100%;
+	height: 103px;
+	background: var(--el-text-color-secondary);
+	border-radius: 4px;
+	transition: all ease 0.3s;
+	&:hover {
+		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+		transition: all ease 0.3s;
+	}
+}
+.countup-card-item-box {
+	display: flex;
+	align-items: center;
+	position: relative;
+	overflow: hidden;
+	&:hover {
+		i {
+			right: 0px !important;
+			bottom: 0px !important;
+			transition: all ease 0.3s;
+		}
+	}
+	i {
+		position: absolute;
+		right: -10px;
+		bottom: -10px;
+		font-size: 70px;
+		transform: rotate(-30deg);
+		transition: all ease 0.3s;
+	}
+	.countup-card-item-flex {
+		padding: 0 20px;
+		color: var(--el-color-white);
+		.countup-card-item-title,
+		.countup-card-item-tip {
+			font-size: 13px;
+		}
+		.countup-card-item-title-num {
+			font-size: 18px;
+		}
+		.countup-card-item-tip-num {
+			font-size: 13px;
+		}
+	}
+}
+</style>
diff --git a/src/views/fun/cropper/index.vue b/src/views/fun/cropper/index.vue
new file mode 100644
index 0000000..83ebfc7
--- /dev/null
+++ b/src/views/fun/cropper/index.vue
@@ -0,0 +1,63 @@
+<template>
+	<div class="croppers-container">
+		<el-card shadow="hover" header="cropper 图片裁剪">
+			<el-alert
+				title="感谢优秀的 `cropperjs`，项目地址：https://github.com/fengyuanchen/cropperjs"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<div class="cropper-img-warp">
+				<div class="mb15 mt15">
+					<img class="cropper-img" :src="cropperImg" />
+				</div>
+				<el-button type="primary" size="default" @click="onCropperDialogOpen">
+					<el-icon>
+						<ele-Crop />
+					</el-icon>
+					更换头像
+				</el-button>
+			</div>
+		</el-card>
+		<CropperDialog ref="cropperDialogRef" />
+	</div>
+</template>
+
+<script lang="ts">
+import { ref, toRefs, reactive, defineComponent } from 'vue';
+import CropperDialog from '/@/components/cropper/index.vue';
+
+export default defineComponent({
+	name: 'funCropper',
+	components: { CropperDialog },
+	setup() {
+		const cropperDialogRef = ref();
+		const state = reactive({
+			cropperImg: 'https://yxh-1301841944.cos.ap-chongqing.myqcloud.com/gfast/2022-06-08/timg.jpg',
+		});
+		// 打开裁剪弹窗
+		const onCropperDialogOpen = () => {
+			cropperDialogRef.value.openDialog(state.cropperImg);
+		};
+		return {
+			cropperDialogRef,
+			onCropperDialogOpen,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.croppers-container {
+	.cropper-img-warp {
+		text-align: center;
+		.cropper-img {
+			margin: auto;
+			width: 150px;
+			height: 150px;
+			border-radius: 100%;
+		}
+	}
+}
+</style>
diff --git a/src/views/fun/echartsMap/index.vue b/src/views/fun/echartsMap/index.vue
new file mode 100644
index 0000000..633c673
--- /dev/null
+++ b/src/views/fun/echartsMap/index.vue
@@ -0,0 +1,141 @@
+<template>
+	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
+		<div class="layout-view-bg-white">
+			<div ref="echartsMap" style="height: 100%"></div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
+import * as echarts from 'echarts';
+import 'echarts/extension/bmap/bmap';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { echartsMapList, echartsMapData } from './mock';
+
+export default defineComponent({
+	name: 'funEchartsMap',
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const state: any = reactive({
+			echartsMap: null,
+			echartsMapList,
+			echartsMapData,
+		});
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		// echartsMap 将坐标信息和对应物理量的值合在一起
+		const convertData = (data: any) => {
+			let res = [];
+			for (let i = 0; i < data.length; i++) {
+				let geoCoord = state.echartsMapData[data[i].name];
+				if (geoCoord) {
+					res.push({
+						name: data[i].name,
+						value: geoCoord.concat(data[i].value),
+					});
+				}
+			}
+			return res;
+		};
+		// 初始化 echartsMap
+		const initEchartsMap = () => {
+			const myChart = echarts.init(<HTMLElement>state.echartsMap);
+			const option = {
+				tooltip: {
+					trigger: 'item',
+				},
+				color: ['#9a60b4', '#ea7ccc'],
+				bmap: {
+					center: [104.114129, 37.550339],
+					zoom: 5,
+					roam: true,
+					mapStyle: {},
+				},
+				series: [
+					{
+						name: 'pm2.5',
+						type: 'scatter',
+						coordinateSystem: 'bmap',
+						data: convertData(state.echartsMapList),
+						symbolSize: function (val: any) {
+							return val[2] / 10;
+						},
+						encode: {
+							value: 2,
+						},
+						label: {
+							formatter: '{b}',
+							position: 'right',
+							show: false,
+						},
+						emphasis: {
+							label: {
+								show: true,
+							},
+						},
+					},
+					{
+						name: 'Top 5',
+						type: 'effectScatter',
+						coordinateSystem: 'bmap',
+						data: convertData(
+							state.echartsMapList
+								.sort(function (a: any, b: any) {
+									return b.value - a.value;
+								})
+								.slice(0, 6)
+						),
+						symbolSize: function (val: any) {
+							return val[2] / 10;
+						},
+						encode: {
+							value: 2,
+						},
+						showEffectOn: 'render',
+						rippleEffect: {
+							brushType: 'stroke',
+						},
+						hoverAnimation: true,
+						label: {
+							formatter: '{b}',
+							position: 'right',
+							show: true,
+						},
+						itemStyle: {
+							shadowBlur: 10,
+							shadowColor: '#333',
+						},
+						zlevel: 1,
+					},
+				],
+			};
+			myChart.setOption(option);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 页面加载时
+		onMounted(() => {
+			//initEchartsMap();
+		});
+		return {
+			initTagViewHeight,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/fun/echartsMap/mock.ts b/src/views/fun/echartsMap/mock.ts
new file mode 100644
index 0000000..16623c7
--- /dev/null
+++ b/src/views/fun/echartsMap/mock.ts
@@ -0,0 +1,387 @@
+// 地图模拟数据
+export const echartsMapList = [
+	{ name: '海门', value: 9 },
+	{ name: '鄂尔多斯', value: 12 },
+	{ name: '招远', value: 12 },
+	{ name: '舟山', value: 12 },
+	{ name: '齐齐哈尔', value: 14 },
+	{ name: '盐城', value: 15 },
+	{ name: '赤峰', value: 16 },
+	{ name: '青岛', value: 18 },
+	{ name: '乳山', value: 18 },
+	{ name: '金昌', value: 19 },
+	{ name: '泉州', value: 21 },
+	{ name: '莱西', value: 21 },
+	{ name: '日照', value: 21 },
+	{ name: '胶南', value: 22 },
+	{ name: '南通', value: 23 },
+	{ name: '拉萨', value: 24 },
+	{ name: '云浮', value: 24 },
+	{ name: '梅州', value: 25 },
+	{ name: '文登', value: 25 },
+	{ name: '上海', value: 25 },
+	{ name: '攀枝花', value: 25 },
+	{ name: '威海', value: 25 },
+	{ name: '承德', value: 25 },
+	{ name: '厦门', value: 26 },
+	{ name: '汕尾', value: 26 },
+	{ name: '潮州', value: 26 },
+	{ name: '丹东', value: 27 },
+	{ name: '太仓', value: 27 },
+	{ name: '曲靖', value: 27 },
+	{ name: '烟台', value: 28 },
+	{ name: '福州', value: 29 },
+	{ name: '瓦房店', value: 30 },
+	{ name: '即墨', value: 30 },
+	{ name: '抚顺', value: 31 },
+	{ name: '玉溪', value: 31 },
+	{ name: '张家口', value: 31 },
+	{ name: '阳泉', value: 31 },
+	{ name: '莱州', value: 32 },
+	{ name: '湖州', value: 32 },
+	{ name: '汕头', value: 32 },
+	{ name: '昆山', value: 33 },
+	{ name: '宁波', value: 33 },
+	{ name: '湛江', value: 33 },
+	{ name: '揭阳', value: 34 },
+	{ name: '荣成', value: 34 },
+	{ name: '连云港', value: 35 },
+	{ name: '葫芦岛', value: 35 },
+	{ name: '常熟', value: 36 },
+	{ name: '东莞', value: 36 },
+	{ name: '河源', value: 36 },
+	{ name: '淮安', value: 36 },
+	{ name: '泰州', value: 36 },
+	{ name: '南宁', value: 37 },
+	{ name: '营口', value: 37 },
+	{ name: '惠州', value: 37 },
+	{ name: '江阴', value: 37 },
+	{ name: '蓬莱', value: 37 },
+	{ name: '韶关', value: 38 },
+	{ name: '嘉峪关', value: 38 },
+	{ name: '广州', value: 38 },
+	{ name: '延安', value: 38 },
+	{ name: '太原', value: 39 },
+	{ name: '清远', value: 39 },
+	{ name: '中山', value: 39 },
+	{ name: '昆明', value: 39 },
+	{ name: '寿光', value: 40 },
+	{ name: '盘锦', value: 40 },
+	{ name: '长治', value: 41 },
+	{ name: '深圳', value: 360 },
+	{ name: '珠海', value: 42 },
+	{ name: '宿迁', value: 43 },
+	{ name: '咸阳', value: 43 },
+	{ name: '铜川', value: 44 },
+	{ name: '平度', value: 44 },
+	{ name: '佛山', value: 44 },
+	{ name: '海口', value: 44 },
+	{ name: '江门', value: 45 },
+	{ name: '章丘', value: 45 },
+	{ name: '肇庆', value: 46 },
+	{ name: '大连', value: 47 },
+	{ name: '临汾', value: 47 },
+	{ name: '吴江', value: 47 },
+	{ name: '石嘴山', value: 49 },
+	{ name: '沈阳', value: 50 },
+	{ name: '苏州', value: 50 },
+	{ name: '茂名', value: 50 },
+	{ name: '嘉兴', value: 51 },
+	{ name: '长春', value: 51 },
+	{ name: '胶州', value: 52 },
+	{ name: '银川', value: 52 },
+	{ name: '张家港', value: 52 },
+	{ name: '三门峡', value: 53 },
+	{ name: '锦州', value: 54 },
+	{ name: '南昌', value: 54 },
+	{ name: '柳州', value: 54 },
+	{ name: '三亚', value: 54 },
+	{ name: '自贡', value: 56 },
+	{ name: '吉林', value: 56 },
+	{ name: '阳江', value: 57 },
+	{ name: '泸州', value: 57 },
+	{ name: '西宁', value: 57 },
+	{ name: '宜宾', value: 58 },
+	{ name: '呼和浩特', value: 58 },
+	{ name: '成都', value: 58 },
+	{ name: '大同', value: 58 },
+	{ name: '镇江', value: 59 },
+	{ name: '桂林', value: 59 },
+	{ name: '张家界', value: 59 },
+	{ name: '宜兴', value: 59 },
+	{ name: '北海', value: 60 },
+	{ name: '西安', value: 61 },
+	{ name: '金坛', value: 62 },
+	{ name: '东营', value: 62 },
+	{ name: '牡丹江', value: 63 },
+	{ name: '遵义', value: 63 },
+	{ name: '绍兴', value: 63 },
+	{ name: '扬州', value: 64 },
+	{ name: '常州', value: 64 },
+	{ name: '潍坊', value: 65 },
+	{ name: '重庆', value: 66 },
+	{ name: '台州', value: 67 },
+	{ name: '南京', value: 67 },
+	{ name: '滨州', value: 70 },
+	{ name: '贵阳', value: 71 },
+	{ name: '无锡', value: 71 },
+	{ name: '本溪', value: 71 },
+	{ name: '克拉玛依', value: 72 },
+	{ name: '渭南', value: 72 },
+	{ name: '马鞍山', value: 72 },
+	{ name: '宝鸡', value: 72 },
+	{ name: '焦作', value: 75 },
+	{ name: '句容', value: 75 },
+	{ name: '北京', value: 79 },
+	{ name: '徐州', value: 79 },
+	{ name: '衡水', value: 80 },
+	{ name: '包头', value: 80 },
+	{ name: '绵阳', value: 80 },
+	{ name: '乌鲁木齐', value: 84 },
+	{ name: '枣庄', value: 84 },
+	{ name: '杭州', value: 84 },
+	{ name: '淄博', value: 85 },
+	{ name: '鞍山', value: 86 },
+	{ name: '溧阳', value: 86 },
+	{ name: '库尔勒', value: 86 },
+	{ name: '安阳', value: 90 },
+	{ name: '开封', value: 90 },
+	{ name: '济南', value: 92 },
+	{ name: '德阳', value: 93 },
+	{ name: '温州', value: 95 },
+	{ name: '九江', value: 96 },
+	{ name: '邯郸', value: 98 },
+	{ name: '临安', value: 99 },
+	{ name: '兰州', value: 99 },
+	{ name: '沧州', value: 100 },
+	{ name: '临沂', value: 103 },
+	{ name: '南充', value: 104 },
+	{ name: '天津', value: 105 },
+	{ name: '富阳', value: 106 },
+	{ name: '泰安', value: 112 },
+	{ name: '诸暨', value: 112 },
+	{ name: '郑州', value: 113 },
+	{ name: '哈尔滨', value: 114 },
+	{ name: '聊城', value: 116 },
+	{ name: '芜湖', value: 117 },
+	{ name: '唐山', value: 119 },
+	{ name: '平顶山', value: 119 },
+	{ name: '邢台', value: 119 },
+	{ name: '德州', value: 120 },
+	{ name: '济宁', value: 120 },
+	{ name: '荆州', value: 127 },
+	{ name: '宜昌', value: 130 },
+	{ name: '义乌', value: 132 },
+	{ name: '丽水', value: 133 },
+	{ name: '洛阳', value: 134 },
+	{ name: '秦皇岛', value: 136 },
+	{ name: '株洲', value: 143 },
+	{ name: '石家庄', value: 147 },
+	{ name: '莱芜', value: 148 },
+	{ name: '常德', value: 152 },
+	{ name: '保定', value: 153 },
+	{ name: '湘潭', value: 154 },
+	{ name: '金华', value: 157 },
+	{ name: '岳阳', value: 169 },
+	{ name: '长沙', value: 175 },
+	{ name: '衢州', value: 177 },
+	{ name: '廊坊', value: 93 },
+	{ name: '菏泽', value: 194 },
+	{ name: '合肥', value: 229 },
+	{ name: '武汉', value: 273 },
+	{ name: '大庆', value: 279 },
+];
+
+// 地图经纬度数据
+export const echartsMapData = {
+	海门: [121.15, 31.89],
+	鄂尔多斯: [109.781327, 39.608266],
+	招远: [120.38, 37.35],
+	舟山: [122.207216, 29.985295],
+	齐齐哈尔: [123.97, 47.33],
+	盐城: [120.13, 33.38],
+	赤峰: [118.87, 42.28],
+	青岛: [120.33, 36.07],
+	乳山: [121.52, 36.89],
+	金昌: [102.188043, 38.520089],
+	泉州: [118.58, 24.93],
+	莱西: [120.53, 36.86],
+	日照: [119.46, 35.42],
+	胶南: [119.97, 35.88],
+	南通: [121.05, 32.08],
+	拉萨: [91.11, 29.97],
+	云浮: [112.02, 22.93],
+	梅州: [116.1, 24.55],
+	文登: [122.05, 37.2],
+	上海: [121.48, 31.22],
+	攀枝花: [101.718637, 26.582347],
+	威海: [122.1, 37.5],
+	承德: [117.93, 40.97],
+	厦门: [118.1, 24.46],
+	汕尾: [115.375279, 22.786211],
+	潮州: [116.63, 23.68],
+	丹东: [124.37, 40.13],
+	太仓: [121.1, 31.45],
+	曲靖: [103.79, 25.51],
+	烟台: [121.39, 37.52],
+	福州: [119.3, 26.08],
+	瓦房店: [121.979603, 39.627114],
+	即墨: [120.45, 36.38],
+	抚顺: [123.97, 41.97],
+	玉溪: [102.52, 24.35],
+	张家口: [114.87, 40.82],
+	阳泉: [113.57, 37.85],
+	莱州: [119.942327, 37.177017],
+	湖州: [120.1, 30.86],
+	汕头: [116.69, 23.39],
+	昆山: [120.95, 31.39],
+	宁波: [121.56, 29.86],
+	湛江: [110.359377, 21.270708],
+	揭阳: [116.35, 23.55],
+	荣成: [122.41, 37.16],
+	连云港: [119.16, 34.59],
+	葫芦岛: [120.836932, 40.711052],
+	常熟: [120.74, 31.64],
+	东莞: [113.75, 23.04],
+	河源: [114.68, 23.73],
+	淮安: [119.15, 33.5],
+	泰州: [119.9, 32.49],
+	南宁: [108.33, 22.84],
+	营口: [122.18, 40.65],
+	惠州: [114.4, 23.09],
+	江阴: [120.26, 31.91],
+	蓬莱: [120.75, 37.8],
+	韶关: [113.62, 24.84],
+	嘉峪关: [98.289152, 39.77313],
+	广州: [113.23, 23.16],
+	延安: [109.47, 36.6],
+	太原: [112.53, 37.87],
+	清远: [113.01, 23.7],
+	中山: [113.38, 22.52],
+	昆明: [102.73, 25.04],
+	寿光: [118.73, 36.86],
+	盘锦: [122.070714, 41.119997],
+	长治: [113.08, 36.18],
+	深圳: [114.07, 22.62],
+	珠海: [113.52, 22.3],
+	宿迁: [118.3, 33.96],
+	咸阳: [108.72, 34.36],
+	铜川: [109.11, 35.09],
+	平度: [119.97, 36.77],
+	佛山: [113.11, 23.05],
+	海口: [110.35, 20.02],
+	江门: [113.06, 22.61],
+	章丘: [117.53, 36.72],
+	肇庆: [112.44, 23.05],
+	大连: [121.62, 38.92],
+	临汾: [111.5, 36.08],
+	吴江: [120.63, 31.16],
+	石嘴山: [106.39, 39.04],
+	沈阳: [123.38, 41.8],
+	苏州: [120.62, 31.32],
+	茂名: [110.88, 21.68],
+	嘉兴: [120.76, 30.77],
+	长春: [125.35, 43.88],
+	胶州: [120.03336, 36.264622],
+	银川: [106.27, 38.47],
+	张家港: [120.555821, 31.875428],
+	三门峡: [111.19, 34.76],
+	锦州: [121.15, 41.13],
+	南昌: [115.89, 28.68],
+	柳州: [109.4, 24.33],
+	三亚: [109.511909, 18.252847],
+	自贡: [104.778442, 29.33903],
+	吉林: [126.57, 43.87],
+	阳江: [111.95, 21.85],
+	泸州: [105.39, 28.91],
+	西宁: [101.74, 36.56],
+	宜宾: [104.56, 29.77],
+	呼和浩特: [111.65, 40.82],
+	成都: [104.06, 30.67],
+	大同: [113.3, 40.12],
+	镇江: [119.44, 32.2],
+	桂林: [110.28, 25.29],
+	张家界: [110.479191, 29.117096],
+	宜兴: [119.82, 31.36],
+	北海: [109.12, 21.49],
+	西安: [108.95, 34.27],
+	金坛: [119.56, 31.74],
+	东营: [118.49, 37.46],
+	牡丹江: [129.58, 44.6],
+	遵义: [106.9, 27.7],
+	绍兴: [120.58, 30.01],
+	扬州: [119.42, 32.39],
+	常州: [119.95, 31.79],
+	潍坊: [119.1, 36.62],
+	重庆: [106.54, 29.59],
+	台州: [121.420757, 28.656386],
+	南京: [118.78, 32.04],
+	滨州: [118.03, 37.36],
+	贵阳: [106.71, 26.57],
+	无锡: [120.29, 31.59],
+	本溪: [123.73, 41.3],
+	克拉玛依: [84.77, 45.59],
+	渭南: [109.5, 34.52],
+	马鞍山: [118.48, 31.56],
+	宝鸡: [107.15, 34.38],
+	焦作: [113.21, 35.24],
+	句容: [119.16, 31.95],
+	北京: [116.46, 39.92],
+	徐州: [117.2, 34.26],
+	衡水: [115.72, 37.72],
+	包头: [110, 40.58],
+	绵阳: [104.73, 31.48],
+	乌鲁木齐: [87.68, 43.77],
+	枣庄: [117.57, 34.86],
+	杭州: [120.19, 30.26],
+	淄博: [118.05, 36.78],
+	鞍山: [122.85, 41.12],
+	溧阳: [119.48, 31.43],
+	库尔勒: [86.06, 41.68],
+	安阳: [114.35, 36.1],
+	开封: [114.35, 34.79],
+	济南: [117, 36.65],
+	德阳: [104.37, 31.13],
+	温州: [120.65, 28.01],
+	九江: [115.97, 29.71],
+	邯郸: [114.47, 36.6],
+	临安: [119.72, 30.23],
+	兰州: [103.73, 36.03],
+	沧州: [116.83, 38.33],
+	临沂: [118.35, 35.05],
+	南充: [106.110698, 30.837793],
+	天津: [117.2, 39.13],
+	富阳: [119.95, 30.07],
+	泰安: [117.13, 36.18],
+	诸暨: [120.23, 29.71],
+	郑州: [113.65, 34.76],
+	哈尔滨: [126.63, 45.75],
+	聊城: [115.97, 36.45],
+	芜湖: [118.38, 31.33],
+	唐山: [118.02, 39.63],
+	平顶山: [113.29, 33.75],
+	邢台: [114.48, 37.05],
+	德州: [116.29, 37.45],
+	济宁: [116.59, 35.38],
+	荆州: [112.239741, 30.335165],
+	宜昌: [111.3, 30.7],
+	义乌: [120.06, 29.32],
+	丽水: [119.92, 28.45],
+	洛阳: [112.44, 34.7],
+	秦皇岛: [119.57, 39.95],
+	株洲: [113.16, 27.83],
+	石家庄: [114.48, 38.03],
+	莱芜: [117.67, 36.19],
+	常德: [111.69, 29.05],
+	保定: [115.48, 38.85],
+	湘潭: [112.91, 27.87],
+	金华: [119.64, 29.12],
+	岳阳: [113.09, 29.37],
+	长沙: [113, 28.21],
+	衢州: [118.88, 28.97],
+	廊坊: [116.7, 39.53],
+	菏泽: [115.480656, 35.23375],
+	合肥: [117.27, 31.86],
+	武汉: [114.31, 30.52],
+	大庆: [125.03, 46.58],
+};
diff --git a/src/views/fun/gridLayout/index.vue b/src/views/fun/gridLayout/index.vue
new file mode 100644
index 0000000..2a8c666
--- /dev/null
+++ b/src/views/fun/gridLayout/index.vue
@@ -0,0 +1,62 @@
+<template>
+	<div class="grid-layout-container">
+		<el-card shadow="hover" header="vue-grid-layout 拖拽布局演示">
+			<el-alert
+				title="感谢优秀的 `vue-grid-layout`，项目地址：https://github.com/jbaysolutions/vue-grid-layout"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<grid-layout
+				v-model:layout="layouts"
+				:col-num="12"
+				:row-height="30"
+				:is-draggable="true"
+				:is-resizable="true"
+				:is-mirrored="false"
+				:vertical-compact="true"
+				:margin="[10, 10]"
+				:use-css-transforms="true"
+			>
+				<grid-item v-for="item in layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
+					<div class="w100 h100 flex">
+						<span class="flex-margin font14">{{ item.i }}</span>
+					</div>
+				</grid-item>
+			</grid-layout>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'FunGridLayout',
+	setup() {
+		const state = reactive({
+			layouts: [
+				{ x: 0, y: 0, w: 2, h: 2, i: '0' },
+				{ x: 2, y: 0, w: 2, h: 4, i: '1' },
+				{ x: 4, y: 0, w: 2, h: 5, i: '2' },
+				{ x: 6, y: 0, w: 2, h: 3, i: '3' },
+				{ x: 8, y: 0, w: 2, h: 3, i: '4' },
+				{ x: 10, y: 0, w: 2, h: 3, i: '5' },
+				{ x: 0, y: 5, w: 2, h: 5, i: '6' },
+			],
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.grid-layout-container {
+	.vue-grid-item {
+		background: var(--el-color-primary);
+		color: var(--el-color-white);
+	}
+}
+</style>
diff --git a/src/views/fun/printJs/index.vue b/src/views/fun/printJs/index.vue
new file mode 100644
index 0000000..0340612
--- /dev/null
+++ b/src/views/fun/printJs/index.vue
@@ -0,0 +1,44 @@
+<template>
+	<div ref="printRef">
+		<el-card shadow="hover" header="打印演示">
+			<el-alert
+				title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<el-button @click="onPrintJs" size="default" type="primary">
+				<SvgIcon name="iconfont icon-dayin" />
+				点击打印演示
+			</el-button>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent } from 'vue';
+import printJs from 'print-js';
+
+export default defineComponent({
+	name: 'funPrintJs',
+	setup() {
+		const state = reactive({
+			printRef: null as null | HTMLDivElement,
+		});
+		// 打印点击
+		const onPrintJs = () => {
+			printJs({
+				printable: state.printRef,
+				type: 'html',
+				css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', '//unpkg.com/element-plus/dist/index.css'],
+				scanStyles: false,
+				style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
+			});
+		};
+		return {
+			onPrintJs,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/fun/qrcode/index.vue b/src/views/fun/qrcode/index.vue
new file mode 100644
index 0000000..e4a36e5
--- /dev/null
+++ b/src/views/fun/qrcode/index.vue
@@ -0,0 +1,79 @@
+<template>
+	<div class="qrcode-container">
+		<el-card shadow="hover" header="qrcodejs2 二维码生成">
+			<el-alert
+				title="感谢优秀的 `qrcodejs2`，项目地址：https://github.com/davidshimjs/qrcodejs"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<div class="qrcode-img-warp">
+				<div class="mb30 mt30 qrcode-img">
+					<div class="qrcode" ref="qrcodeRef"></div>
+				</div>
+				<el-button type="primary" size="default" @click="onInitQrcode">
+					<el-icon>
+						<ele-Refresh />
+					</el-icon>
+					重新生成
+				</el-button>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
+import QRCode from 'qrcodejs2-fixes';
+
+export default defineComponent({
+	name: 'funQrcode',
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		const state = reactive({
+			qrcode: '',
+		});
+		// 初始化生成二维码
+		const initQrcode = () => {
+			new QRCode(proxy.$refs.qrcodeRef, {
+				text: `https://lyt-top.gitee.io/vue-next-admin-preview/#/login?t=${new Date().getTime()}`,
+				width: 125,
+				height: 125,
+				colorDark: '#000000',
+				colorLight: '#ffffff',
+			});
+		};
+		// 重新生成
+		const onInitQrcode = () => {
+			proxy.$refs.qrcodeRef.innerHTML = '';
+			initQrcode();
+		};
+		// 页面加载时
+		onMounted(() => {
+			initQrcode();
+		});
+		return {
+			onInitQrcode,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.qrcode-container {
+	.qrcode-img-warp {
+		text-align: center;
+		.qrcode-img {
+			display: flex;
+			width: 100%;
+			height: 125px;
+			.qrcode {
+				margin: auto;
+				width: 125px;
+				height: 125px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/fun/splitpanes/index.vue b/src/views/fun/splitpanes/index.vue
new file mode 100644
index 0000000..eb70c61
--- /dev/null
+++ b/src/views/fun/splitpanes/index.vue
@@ -0,0 +1,54 @@
+<template>
+	<div class="splitpanes-container">
+		<el-card shadow="hover" header="splitpanes 窗格拆分器">
+			<el-alert
+				title="感谢优秀的 `splitpanes`，项目地址：https://github.com/antoniandre/splitpanes"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<splitpanes class="default-theme" @resize="paneSize = $event[0].size" style="height: 500px">
+				<pane :size="32"> 1 </pane>
+				<pane :size="36">
+					<splitpanes class="default-theme" :horizontal="true">
+						<pane :size="100"> 2 </pane>
+						<pane :size="100"> 3 </pane>
+					</splitpanes>
+				</pane>
+				<pane :size="32"> 4 </pane>
+			</splitpanes>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+
+export default defineComponent({
+	name: 'funSplitpanes',
+	components: { Splitpanes, Pane },
+	setup() {
+		const state = reactive({
+			paneSize: 50,
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.splitpanes__pane {
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	position: relative;
+	font-size: 70px;
+	color: var(--el-color-primary-light-5);
+	border: 1px solid var(--el-border-color-lighter);
+	background-color: var(--el-color-primary) !important;
+}
+</style>
diff --git a/src/views/fun/tagsView/index.vue b/src/views/fun/tagsView/index.vue
new file mode 100644
index 0000000..7c65fc6
--- /dev/null
+++ b/src/views/fun/tagsView/index.vue
@@ -0,0 +1,118 @@
+<template>
+	<div class="fun-tagsview">
+		<NoticeBar
+			text="已删除非当前页 tagsView 演示，后续有时间可以再加回来！，tagsview 支持多标签（参数不同）、单标签共用（参数不同）"
+			background="#ecf5ff"
+			color="#409eff"
+		/>
+		<el-card shadow="hover" header="tagsView 当前页演示" class="mt15">
+			<div class="flex-warp">
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="primary" size="default" @click="refreshCurrentTagsView">
+							<el-icon>
+								<ele-RefreshRight />
+							</el-icon>
+							刷新当前页
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="info" size="default" @click="closeCurrentTagsView">
+							<el-icon>
+								<ele-Close />
+							</el-icon>
+							关闭当前页
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="warning" size="default" @click="closeOtherTagsView">
+							<el-icon>
+								<ele-CircleClose />
+							</el-icon>
+							关闭其它
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="danger" size="default" @click="closeAllTagsView">
+							<el-icon>
+								<ele-FolderDelete />
+							</el-icon>
+							全部关闭
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="success" size="default" @click="openCurrenFullscreen">
+							<el-icon>
+								<ele-FullScreen />
+							</el-icon>
+							当前页全屏
+						</el-button>
+					</div>
+				</div>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { getCurrentInstance, reactive, toRefs, defineComponent } from 'vue';
+import NoticeBar from '/@/components/noticeBar/index.vue';
+import { useRoute } from 'vue-router';
+
+export default defineComponent({
+	name: 'funTagsView',
+	components: { NoticeBar },
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		const route = useRoute();
+		const state = reactive({});
+		// 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
+		// 1、刷新当前 tagsView
+		const refreshCurrentTagsView = () => {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 0, ...route }));
+		};
+		// 2、关闭当前 tagsView
+		const closeCurrentTagsView = () => {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+		};
+		// 3、关闭其它 tagsView
+		const closeOtherTagsView = () => {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 2, ...route }));
+		};
+		// 4、关闭全部 tagsView
+		const closeAllTagsView = () => {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 3, ...route }));
+		};
+		// 5、开启当前页面全屏
+		const openCurrenFullscreen = () => {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 4, ...route }));
+		};
+		return {
+			refreshCurrentTagsView,
+			closeCurrentTagsView,
+			closeOtherTagsView,
+			closeAllTagsView,
+			openCurrenFullscreen,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.fun-tagsview {
+	.fun-tagsview-from-item {
+		:deep(.el-form-item__content) {
+			margin-left: 0 !important;
+		}
+	}
+}
+</style>
diff --git a/src/views/fun/ueditor/index.vue b/src/views/fun/ueditor/index.vue
new file mode 100644
index 0000000..09791cd
--- /dev/null
+++ b/src/views/fun/ueditor/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <gf-ueditor v-if="show" editorId="demoEdit01" v-model="content" @setEditContent="setEditContent"></gf-ueditor>
+    <h3>同步获取编辑器内容如下：</h3>
+    <div v-html="content"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent,ref,onActivated,onDeactivated} from "vue";
+import GfUeditor from "/@/components/ueditor/index.vue"
+export default defineComponent({
+  name:'demoUeditor',
+  components:{GfUeditor},
+  setup(){
+    const show=ref(true)
+    const content = ref(`<P>这是有一个测试内容</P>
+    <p><img src="https://yxh-1301841944.cos.ap-chongqing.myqcloud.com/gfast/2022-06-08/timg.jpg"/></p>
+    <p style="text-indent: 2em;">在软件工程中，有些主题和写程序并没有直接的关联，但它们为你提供了工具和基础设施 支持，使得软件对每个人都变得更易用。这些主题包括：
+文档：通过附带的 rustdoc 生成库文档给用户。
+测试：为库创建测试套件，确保库准确地实现了你想要的功能。
+基准测试（benchmark）：对功能进行基准测试，保证其运行速度足够快。</p>
+    <p style="text-indent: 2em;">Rust 是一门注重安全（safety）、速度（speed）和并发（concurrency）的现代系统编程语言。Rust 通过内存安全来实现以上目标，但不使用垃圾回收机制（garbage collection, GC）。
+《通过例子学 Rust》（Rust By Example, RBE）内容由一系列可运行的实例组成，通过这些例子阐明了各种 Rust 的概念和基本库。想获取这些例子外的更多内容，不要忘了安装 Rust 到本地并查阅官方标准库文档。另外为了满足您的好奇心，您还可以查阅本网站的源代码。</p>`)
+    const setEditContent = (data:string)=>{
+      content.value = data
+    }
+    onActivated(()=>{
+      if(!show.value){
+        show.value=true
+      }
+    })
+    onDeactivated(()=>{
+      show.value=false
+    })
+    return {
+      show,
+      content,
+      setEditContent
+    }
+  }
+})
+</script>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 0000000..6475fba
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,643 @@
+<template>
+	<div class="home-container">
+		<el-row :gutter="15" class="home-card-one mb15">
+			<el-col
+				:xs="24"
+				:sm="12"
+				:md="12"
+				:lg="6"
+				:xl="6"
+				v-for="(v, k) in homeOne"
+				:key="k"
+				:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
+			>
+				<div class="home-card-item flex">
+					<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
+						<div class="flex-auto">
+							<span class="font30">{{ v.num1 }}</span>
+							<span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span>
+							<div class="mt10">{{ v.num3 }}</div>
+						</div>
+						<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
+							<i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
+						</div>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-row :gutter="15" class="home-card-two mb15">
+			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
+				<div class="home-card-item">
+					<div style="height: 100%" ref="homeLineRef"></div>
+				</div>
+			</el-col>
+			<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
+				<div class="home-card-item">
+					<div style="height: 100%" ref="homePieRef"></div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-row :gutter="15" class="home-card-three">
+			<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
+				<div class="home-card-item">
+					<div class="home-card-item-title">快捷导航工具</div>
+					<div class="home-monitor">
+						<div class="flex-warp">
+							<div class="flex-warp-item" v-for="(v, k) in homeThree" :key="k">
+								<div class="flex-warp-item-box" :class="`home-animation${k}`">
+									<div class="flex-margin">
+										<i :class="v.icon" :style="{ color: v.iconColor }"></i>
+										<span class="pl5">{{ v.label }}</span>
+										<div class="mt10">{{ v.value }}</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</el-col>
+			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media">
+				<div class="home-card-item">
+					<div style="height: 100%" ref="homeBarRef"></div>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
+import * as echarts from 'echarts';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+let global: any = {
+	homeChartOne: null,
+	homeChartTwo: null,
+	homeCharThree: null,
+	dispose: [null, '', undefined],
+};
+
+export default defineComponent({
+	name: 'home',
+	setup() {
+		const homeLineRef = ref();
+		const homePieRef = ref();
+		const homeBarRef = ref();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const state = reactive({
+			homeOne: [
+				{
+					num1: '125,12',
+					num2: '-12.32',
+					num3: '订单统计信息',
+					num4: 'fa fa-meetup',
+					color1: '#FF6462',
+					color2: '--next-color-primary-lighter',
+					color3: '--el-color-primary',
+				},
+				{
+					num1: '653,33',
+					num2: '+42.32',
+					num3: '月度计划信息',
+					num4: 'iconfont icon-ditu',
+					color1: '#6690F9',
+					color2: '--next-color-success-lighter',
+					color3: '--el-color-success',
+				},
+				{
+					num1: '125,65',
+					num2: '+17.32',
+					num3: '年度计划信息',
+					num4: 'iconfont icon-zaosheng',
+					color1: '#6690F9',
+					color2: '--next-color-warning-lighter',
+					color3: '--el-color-warning',
+				},
+				{
+					num1: '520,43',
+					num2: '-10.01',
+					num3: '访问统计信息',
+					num4: 'fa fa-github-alt',
+					color1: '#FF6462',
+					color2: '--next-color-danger-lighter',
+					color3: '--el-color-danger',
+				},
+			],
+			homeThree: [
+				{
+					icon: 'iconfont icon-yangan',
+					label: '浅粉红',
+					value: '2.1%OBS/M',
+					iconColor: '#F72B3F',
+				},
+				{
+					icon: 'iconfont icon-wendu',
+					label: '深红(猩红)',
+					value: '30℃',
+					iconColor: '#91BFF8',
+				},
+				{
+					icon: 'iconfont icon-shidu',
+					label: '淡紫红',
+					value: '57%RH',
+					iconColor: '#88D565',
+				},
+				{
+					icon: 'iconfont icon-shidu',
+					label: '弱紫罗兰红',
+					value: '107w',
+					iconColor: '#88D565',
+				},
+				{
+					icon: 'iconfont icon-zaosheng',
+					label: '中紫罗兰红',
+					value: '57DB',
+					iconColor: '#FBD4A0',
+				},
+				{
+					icon: 'iconfont icon-zaosheng',
+					label: '紫罗兰',
+					value: '57PV',
+					iconColor: '#FBD4A0',
+				},
+				{
+					icon: 'iconfont icon-zaosheng',
+					label: '暗紫罗兰',
+					value: '517Cpd',
+					iconColor: '#FBD4A0',
+				},
+				{
+					icon: 'iconfont icon-zaosheng',
+					label: '幽灵白',
+					value: '12kg',
+					iconColor: '#FBD4A0',
+				},
+				{
+					icon: 'iconfont icon-zaosheng',
+					label: '海军蓝',
+					value: '64fm',
+					iconColor: '#FBD4A0',
+				},
+			],
+			myCharts: [],
+			charts: {
+				theme: '',
+				bgColor: '',
+				color: '#303133',
+			},
+		});
+		// 折线图
+		const initLineChart = () => {
+			if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
+			global.homeChartOne = <any>echarts.init(homeLineRef.value, state.charts.theme);
+			const option = {
+				backgroundColor: state.charts.bgColor,
+				title: {
+					text: '政策补贴额度',
+					x: 'left',
+					textStyle: { fontSize: '15', color: state.charts.color },
+				},
+				grid: { top: 70, right: 20, bottom: 30, left: 30 },
+				tooltip: { trigger: 'axis' },
+				legend: { data: ['预购队列', '最新成交价'], right: 0 },
+				xAxis: {
+					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+				},
+				yAxis: [
+					{
+						type: 'value',
+						name: '价格',
+						splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+					},
+				],
+				series: [
+					{
+						name: '预购队列',
+						type: 'line',
+						symbolSize: 6,
+						symbol: 'circle',
+						smooth: true,
+						data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
+						lineStyle: { color: '#fe9a8b' },
+						itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{ offset: 0, color: '#fe9a8bb3' },
+								{ offset: 1, color: '#fe9a8b03' },
+							]),
+						},
+					},
+					{
+						name: '最新成交价',
+						type: 'line',
+						symbolSize: 6,
+						symbol: 'circle',
+						smooth: true,
+						data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
+						lineStyle: { color: '#9E87FF' },
+						itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{ offset: 0, color: '#9E87FFb3' },
+								{ offset: 1, color: '#9E87FF03' },
+							]),
+						},
+						emphasis: {
+							itemStyle: {
+								color: {
+									type: 'radial',
+									x: 0.5,
+									y: 0.5,
+									r: 0.5,
+									colorStops: [
+										{ offset: 0, color: '#9E87FF' },
+										{ offset: 0.4, color: '#9E87FF' },
+										{ offset: 0.5, color: '#fff' },
+										{ offset: 0.7, color: '#fff' },
+										{ offset: 0.8, color: '#fff' },
+										{ offset: 1, color: '#fff' },
+									],
+								},
+								borderColor: '#9E87FF',
+								borderWidth: 2,
+							},
+						},
+					},
+				],
+			};
+			(<any>global.homeChartOne).setOption(option);
+			(<any>state.myCharts).push(global.homeChartOne);
+		};
+		// 饼图
+		const initPieChart = () => {
+			if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
+			global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
+			var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
+			var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
+			var data = [];
+			for (var i = 0; i < getname.length; i++) {
+				data.push({ name: getname[i], value: getvalue[i] });
+			}
+			const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
+			const option = {
+				backgroundColor: state.charts.bgColor,
+				title: {
+					text: '房屋建筑工程',
+					x: 'left',
+					textStyle: { fontSize: '15', color: state.charts.color },
+				},
+				tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
+				graphic: {
+					elements: [
+						{
+							type: 'image',
+							z: -1,
+							style: {
+								image: themeConfig.value.isIsDark
+									? ''
+									: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK0AAACtCAYAAADCr/9DAAAcoElEQVR4Xu19e7wcRZn28/ZM90xXzzknOYEkIAEiBAUUFyFc4wKCCAt8gHhBUEDFG8K3Iri6+3ETL0hQ9FthvYC4gAb0cwFRQcUlKiIIbpRbEBGUREJIyHWmq2e6Z+r9fjU5iQnJOWcuPV195nT/l5yq93nep57p6amueouQXV0rwMzW6tWrS4XCsFvPVQWIyAphKweR3ShUGw2EAwMIAfhE1OgacJIHoEme/7jpM3O+UgnnWFZuDpF6pQJ2JtDOBJ4JwgxmmgbwEABr3GAAM1Ah8CqAVgC8nEBLFWgJQz1Liv7sefZTRBS0EGvSNslMu9nQL1u2TEyZsv3rARygwK8nxuvIwh7McBJ0iL4T/xXgR8DW75nxcL2ef2jKFFqTIIdUQ01q02qTDg5v/wZLqSMZ9I8AtGHtFI6YAmExFO4jsu6N3Ny9Q0SrU8gzEUqTzrSrV8ud7aJ1okW54wg4jJmLiSgdL4i+Gz8Moh9xQ91ZKhUeizd8uqNNCtNKya9QqnYqWdbbAcwF0Fd5M/AnZv5/UFgwMFBYnG7Ldc+urwZvczmY2Q6CxolMfDaYjwKQ616uCRHhd2BcX63at0ybRusnBOM2SfadaYOAd2Wun8PgMwFMb1OPvmlORBUGfw8K13qes6hvEuunr0nfD/dn4gsJdAqAfD8NUpe5MBF+wWR9QRRydxMRdxnPePcJf6etBNGRFvNFDBxuXM20EyA8QWx9xnVz3yMilXa6o/GbsKYNgugNivlzAOZNVPGN8SY8rpgvK7nObRPxzjvhTFsu1/ay8rgKTP9kbND7BZixyLLoQte1F06klCaMadetWzecz7uXg/DB7Jk1bovRD3JW42PFYvHZuCP3Il7qTcvMJKvRe8D0eYC374UIWcymAlUwf14I5/NEVEuzJqk27bp11Tm2bV3HwGFpFrGfuDHwlKLG+wdd97605pVK0+q7axBE/8zAZwGItIrXx7wUA9esWfXiJ2fNmpW6FWepM63v8w6M6EYivKmPTTExUiM8wQ2cXio5j6SJcKpMu96vnZQj6zqAt0uTSJOcS41B/+a5+S+lZXosFaZduJDzcw+MPk/Ax/rpLV1/mZ1+FLn5M6aQ+XW9xk1bLvN0ykXfpeyN1kTw+F9Y4WTTjwtGTavXC4DodoB3mggjlnFsrun0AT5LiML3TelhzLRS1t7KoBuz2QFTQ98VrgLzJZ5X0LM7iV9GTCtl+FEGvtjiZsDERckAW1SAcN1DD9rnHHEE1VvsEUuzxE1bkbX5BPp4LOyzIOYVYP6hEM7biaiaFJnETKtrA8hq9DUw3p9UchlOMgro9bpu0T5BLzxPAjER0zJzTlajG8A4I4mkMozkFSDggWq1cuzw8PC6XqP33LT6DhtUo/9kxrt7nUwW37gCD/iVtUdPnz69p3fcnpvW98PrQXifcTkzAokoQET3rnpp+fG9XLPQU9NKGX2RwfotV3ZNIgWY+S5POCcRUdSLtHtm2oqMLiTwVb0gncVMvwIM3Oq59mm9WK/QE9NKWX8HQy2YZPOwzIz1ROQDqqbvMrp4HYAiQLqKjS5SN1lqLzQ/VQSeL0ThE3F/xGI3rZTRwQzWe44KcZM1Ha9ZS4D5CRAeJcZitqxnuK6WAOGLnue9RDT6JLv+QVoul4cLhYHpzPVZjQbvRkSvAngfxdiHCMOm8+sBPoNwtuc6N8QZO1bTrpJyVhH2wwDPiJOkqVjMWG0R7mELv2LLvt+z8Vivtl5Xq9XdmfOHKqh5YD4GoL5Yj0GEEExHCmH/Oq5xjM20upCbDCK9RWP/uMiZiEOEv0DXxYJ1h+vmHzJVBLlcq72GFE4gJl1/7B9MaBEj5ouE+v5CiL/FETM20/p+eJ3+KoiDVNIxGCgT4RZifEsI58Gk8cfDq1Z5j7oK30OwzgR4h/Hap/TvDwjXPiyOGYVYTFsJwncT46aUijUqLQKeZsaXhLBvTuoVZDca6R92QdA4iaEuAHBQN7FM9CXQ1ULYmntXV9emXVetzrHZ+h9mDHTFJMHOzHiEiS8vuc4dvXpG7XU6UkaHKlaXENHRvcaKMT6DreM9L39XNzG7Mq3+5Mugfj/AB3RDIqm+uo6rBesi1819vxfzh0nlsTmOlNE8Bl8xccpD0YvCzb+WiFZ2qldXpvWD6FIwX9YpeFL9mLHWIvq06+avISJ9ykzfXXpuHFBXMrBL2pMj0B1C2Cd3yrNj01Yq4T+QhYdSekbBZnrwf4Hr53me90KnIk2UfsuXL/dKg8OXE/DPaX+RwcTvKrmF73SibUembS41DCJtWH2wRiovZqxQxB8aFIXbU0mwh6R8358L2P8Jwl49hOkyNL2kGvm9Bgbaf0zoyLRSRh9jsN4uk86L+W6lnLMGBvRZXZPz0vPmQRB9gYFz0rotnwg3C9dpe41126aVUu7EyD8JoJRCOzT0M7YQzmf75YdWtxo3N5ASfROMwW5j9aA/W0RHtltqtAPThrcwcGoPEugyJK1hhXeWSvZPuwzUd911Td9cnu5gxpzUJUd4/KEH7X3b2RzZlmmljA5hsH6H3Fa/3gvFf1UNHDcZjiPqVEtmHg6C6HYG9CF/6boYH/E85z9aJdWy+Zp1YoPoAQAHtho8iXbM/Aewc0ypRC8mgTeRMZi5IGW4AERvSVkeK4Vr707U2hFSLZtWytopDDJWVWQUkR8Urn0sEa1N2SCkls7IJlP9jKuPrErPxfwZzytc3Aqhlkw7sv37cTD2bCVoQm30AoyjJ8KagYT0aBlmZDyvB+M9LXfqfcOKatR2GxgYGHfGpyXTVoLaacTU0URwj3JdFNb8I6dOnZrdYTsUWBvXD6LvUIp+VOvtWUIU/mW8lMY1bTM5GT5ORCm5y/KzquEc1Mmk9HhiTLa/66NYfRn9OC0FrPW3Zj0KZg8ODr401liMa9r1snZyDnRbOgaUXmpYjUMHi8U/pYPPxGfBzEO+jO4nwt6pyIb5cs8rXNqVaaUMf8PAwSlIqG4RHeW69i9TwKWvKAQB76K4/rt0VGCnVcLN70xEcjSRx7zTShkexICe5jJ+sVIXlErFq40T6VMClWp0FCn+SRoW2ijGOQOe89VOTbuAgXeaHye+zRMFfVBzdvVQAd+vXQyiy3sI0VJoZiwuec6ojyuj3mnL5fL0XL6whNn0VnD6Wz3Kv25oiFa3lHHWqGMF9ByuH0QLCXhDx0Fi6qiIDh8Y5VFwVNNWZPXjBGt+TBw6DaMXVLzJde3/7jRA1q89BfTzbYOjxwhmt08RsEAI5/RtsR/VtH4QLjb+MoFwvec6WT3b9nzXdWvfDz8CwjVdB+ouQBDW7B2nTt36bec2TeuH4f6o4+HuMLvszbw8FM6eU7NXtF0K2X735huzDTUsDmm/d4w9GB/0POcbL4+4TdNWZO0qAl0YI3zboSyyznLdvD5IJLsMKDCynep3JmcTGPhlSTiHj2va5rm01egvzAY3yDEeFsI+MFvIbcCtm0H6fvh1ED5gkIWSHM3a3vOWbc5hqzvtSAG53xgkCovo8OwlgskR2IDt+/4OIPvPRo/NYpzrec61Y5u2Gs1nxeZOn2H83POc7DBn855tMpCydhWbfFQk3OO5zhYFSba60/p++BgIrzGlGYEOFcI2eqc3lXsacZl5uyCI/sqAZ4hfrbzenjZzpq77u+HawrRSylmM/HMGt9Pc7wlnniFxMthRFPD98BoQPmJMIMs6wSvmf7RN0/p++H4QtppiSIwsWyd7Xv6OxPAyoJYUqFZ5t4aKnjI4k/AfnnA2fWi2uNNWZKhPA9f1UA1cvES4zuyJWhDOgGCJQvoy+gHA/ytR0I2PA4Q/Cdd51bbvtDL6G8CvMEFM1yvwvMKnjGBnoOMq4PvV40HWD8dt2JsGrBr2zI3FVzbdadcGwWybc8/2BnPcqKpWrc8eHhZLxm2ZNTCiQHNDpAyXgshIUWcCv0WMlLjaZNogqJ+uWH3bhCIE/EII5wgT2Blm6wpIGV3N4PNb7xFfSwJ9QQi7ORW7ybS+rF8DKDO/ENss1hCfFFmkdhQw+eKJQPcLYTdnljYzbajnRk1sq2GCPUsIer4dAbO2ySuwoWBL/XlD5z74wrUH9Q/1pmlHVvWsh5kJ5Ec94bwu+SHIEDtRwPfDb4Lw3k76dtsnZ6lXF4vFp5qmXVutvtJW1jPdBu2kP4Pnl3pwql8nXLI+4ytQlrVTLdAt47eMvwWBTxGicFvTtL5fPx6kjExnsEXHlIpZpcP4h7g3ESuVykyyHL3qatzyA7EzILrYc+3PNIErsno+wTKx07UhXHsqEZVjTzAL2DMFpAyfZmD3ngGMFphxk+c5Z47cacNrQc2K0YlezHii5DnGFuckmmwfgckgvJkZ7zKQUnNtygbTyuiHAB+fNAkiLBDutjevJc0lw2tdASnD8xlI/JuZQH8Twp614fHADx8hwj6t046nJYE+KYR9ZTzRsihJKVCpRG8ii3+WFN5mOPpxsrjxTrsC4O0TJ8HqRM8r3pk4bgbYlQJS8ixGZOSVO8HeiRYu5PwBB0Y1AFZXmXTQmRXvUyoVHuuga9bFoAIj8/oBACdxGoz9SFeSsXIFI6XfhWsPZEWREx/2WAB9WXsaoMRnEFipN1O1Wt2joSy9wDfZi7HW85ypyYJmaHEpUJGhLp+01fbuuOKPFofA7yDfD/cHJV+YQx+uXBJ/X9jb62Sz+PEqYGzDAOMDVC4Hh1m53C/iTamlaL/1hHNQSy2zRqlTwA/Cr4HxwaSJ6XN/qVKpHkOWdbcB8IVCOG9MGjfDi0cBKcOrGUh8ba2eJiXfrx4HsjbtdIwnpRaiEP3Ec+1jW2iZNUmhAhVZu0IbKHFqRBeR79dOBJGBHbB8pycKJyaedAYYiwK+X7sMRGOejRAL0MuDEF1m7k7L/GPPKyT+6rgnQk7CoL5f+xSILkk8deZLTZr2p55XOCbxpDPAWBSoyNqVBBr3zK9YwDYLwuB/pSCIjlDM98YdvIV4v/aEY7xMegs8sybbUEDK8N8ZOC9pcQh0AZk6wYYZj5U8J/FFOkmL3K94MghvYsa7E8/PwoepVqu9pt4gA+//6QVP2DsmnnQGGIsCfhDdBebEZ3+Y+F0kJe/EiJbGkkl7QerNZWZEjfa6Za3ToIAvw0UA9k2aCyt1LC1btkwMTdluUxnFJElUg/rO06YJEx+YJNPsS6yKH75EhGmJJ8eYO7KeNtR7tEpJExjrrKikuWR4rSuwevXqoUKxZOQEeIvs2U3TyiB8mtnARjULH/SKW59e0rp8WUsTCvh+OBeEh0xgN5ezamBTy8wAXOsJ51wTyWeYnStQCcKziPGtziN02pPWeMIeHtkjVruRiM7oNFSn/Ri4ryScf+y0f9bPjAIVGf5fAv63AfRmNaINz7RBdAmYE68NS4SKW2zWPagbECCD7FABX4b6ZHoDy0rpdk/Yb2maNgjqpylW3+kwh+66Mfb3POd/uguS9U5KAWZ2ZRDpH2GJ7w8ji64SRftfNtxpw3A/1KFP50v8YqjzS6L45cSBM8COFAiC6DDFbGLTgC7E9D7PdW7YWDVRyCDSVRNzHWXSRSdmvrvkFf6pixBZ1wQVKPu1T1tEFyUIuQmKgIOFcB7cVERMBuEfmbHpMIYESQXCtYeJqJogZgbVoQK+DPVB3/t32L2bbg2/Yk+ZPp0qfzetDG9h4NRuonbcl9UJnldMfvdEx4QnZ0cp5U4j58wlXyMD/FRJFF6tld9k2oqMLiTwVUaGg3CT5zpnGsHOQFtWwFQNL02Qwd8uiUJzVdkm066Xcl4O+ftaziDGhsxYv3LF8zNmz56dPSLEqGvcoXwZPgjgwLjjthKPoM4TonjNFqZl5uLIVEahlSBxt2HFp5VKBSMVpuPOpR/jlcu1Pa0cPWGkmLIWNI/Xe47z+y1Mq/9RkeGvCDCym4CBhaVsS3lq/S5l9EUGf8wMQVor3Py0jad5blGC3A+iT4E5+c1qG5TgRl3tOThYTL5Ek5mRmDCoS5cudYenzVwC8HZmSNOdnrA37dx+2Snk0TwGG3mu1WJYhK+7rvMhM8JkqKMpYPqgbwLOE8JpPs9u9XjAzHlfRiuJMMXQEAaqUdt1YGBghSH8DPZlCuiynn4QLSYYmcNvsqlHao+hoeLT2zSt/k8pw1sZeIep0dPTbkIUEt+abCrftONWgtppxGRmXcqGX31PCeE052fHMG3tnQxaYFBMySrcrVQqLTfIIYPecChiLqhGi5mxhylBNi6SGdO0zFwKqvUXmVmYIgpY13oiny0ONzcATWTfD84G5a4zSYPyOEg4zm/HNO0GsrXvg+gUg2TrqsH7DgwUHjfIYVJDr1y5ckB4g08BtIMpIYjwnFu0ZxMRj2taKetvY6jvmSLbxCX6uefabzLKYRKDSxnNZ3DzqHpTF4GuFMLeqjLjNo+K1NvKB4e2e4EIg6YIa1yLcIbrOjeb5DAZsf0w3Bf15sbFvMn8VYNfu61v21HPNy374TcswvtNkmbGKk/YexLRSpM8JhO2nvaUQaSfIV9vNG/Gw57nHLAtDqOaVsrwAAa2eAA2kgTznZ6X1bFNSvuyX/uUZaKE58sTHKO8wJgnSfsy1Hu3zH7idDKMD3ue87WkBm6y4qyX8tA88r9gw48FAK3zK2t2mj59eqWtO61uHAThexTjhhQMomSFQ0sl5w8p4NKXFJh5uyCIfsfALilI8CuecEbdoj7mnZaZCzKoPwfwjBQk8qxw7f2JaE0KuPQVBf0SQVbrPwHzUSlIrFGP1KuHhop/Ho3LmKbVnfwguhjMl6cgGT0Ndo8o5o8joigVfPqEhJTRlxj80XSkw7d7ovCWsbiMa9p163g4b0fPmShQt03ijBs8z3lfOgSe+CykDM9l4CtpyYSAA4VwxqwTNq5pdTIVWZtPIKMTzVuIyvxpzyuYWveblvHtmoeUtVMY9F0TpQO2RZ4Z95Q85+jxEmvJtCOHPj8LwBsvYFJ/14dUCGGb2YiZVJI9xPH96rEg63YARrZXbXtWgOYJYd8/Xtotmbb5bOvXPgeifx0vYIJ/Z333F8L+YoKYfQGlDUtW7r90iaPUJMR8t9di0ZaWTbuGeYoTRM8AGE5NopoI0WWeaydePC9VGrRBpixrp1horo9NzR0WgGKF/Vqd0mzZtBuebcOPEvClNjRKpinjq0LY52XnN4wtd9kPP2xR80dX4uWvxmTGuNHznLNaNUtbpn3iCXZ2mR0+TqA5rQIk1o75LimdU7ffnnQp/uzaTAE9D+sH0XwCDO2mHXM4fIL9KiHo+VYHrS3T6qDVanRMQ3Hip5a3lBDjSaX4lIGBwpMttZ8EjZh5WFbDBWB6cxrTZaJ/K7n2Fe1wa9u0OriU0W0MPrkdoKTaMlC2wB8QonBrUphpxZEyOoShFgCUhlezW8nE4Kc819mHiMJ2NOzQtHInhbzeoTnQDliSbQm42XXtc4lIlzCdVNfChZw/4KD6RWD+P6bXxI4hPCuiNw64dtu1bjsyrSbi++E5IFybcjcsgWWd4xXzP045z9joVSo1fef6JshIOc7W8yBc77lOR+u1OzYtM+vDoO9l4PDWmZppyeDvWmhcIIRo+WHfDNPOUVes4JIohZcQSK8hsDuPlEjPpbVq5bXDw8PrOkHr2LQabE0Q7Gqr3COmt+W0kjgRlRnqqvK6NVfPnDnTyAmVrfBst82GFVrRmVD8GZC5TYht8FYW0dGua/93G322aNqVaXWkShCeQYwbOyWQfD9eTqDPua593USuPq4rv1SC8K0W0aVg7JW8jp0hMvDlknDO76z3hl5dm7ZpXBl+m4DTuyGSdF9mvEjgaxqN2lcHBwdXJY3fKZ4uyVqR0Rk5C+czY4vKK53GTLDfomXPP3fInDlzat1gxmJavUfeKw09NAFFBBH5DL6FGNcLsWVRiG6Ejbvvump195yiswnWewHePu74vY7HjHWNnJo7VPx7Ta5OMWMxrQav1Wp7N5T1oK5Q0ykZ0/0Y/Eci61ZVV99LwwsKn3lHDqK3EfB2AAfH9c1oQGdW4LcOiMJtcWDHZlpNRsra20bWZ8YaN45E247BeJKI7lIW7vEK+d/oH3Jtx2izw9NPP12Y8YpXzM1x7kgiOpaBubr8Q5th0tec+bOeV4jtGKfYzeX7tU/D0DlTPRytBoBHwc0t9Y8Q0aNRJP84NDS0ulPMFStWlDxvyhzLsvZpsNrHAh3AYH3UUbHTmOnsR3cKN3/yxirecXCM3bQj87e6XKj+Suv3S88z/oWZl1sWrVSMVcRcgYUqM+o5siwFFJnZI8I0KF1Jm2YwsCsRJtxzaQeD+YfyenvezJkU6xRj7KbViW0odz7j5wAO6SDRrEtfKMBLwPWDPc9bFnc6PTGtJrmWeWpehvcR0d5xk87ipV6Bl/I5PqxQKCzuBdOemVaT9X1/R7Ls+5jxyl6Qz2KmUoG1YBzpec6iXrHrqWmbd9y1wWzbsX4J0KxeJZHFTYcCRFQB481C2L/pJaOem1aTX7euunvepnsz4/ZyKM3G1i9pGnWcMDBgL+w1k0RMq5MIAp6tONTG3bXXSWXxk1VAz2ETcLzr2r9KAjkx0+pk9CnWinM/I6I9k0guw0hCAVpVBx83lOAr8ERNqyVk5mkyiH4E4KAkJM0weqkAL1ENHDsw0JtZgtGYJ27aEeO6MqgvAPikXkqaxe6pAr8H28d7HsU+DzseayOmHTGuFQThlQy6YAIvBBlP3z79O93pV9acPlrR414nbcy0GxPTi8gt0NdSVaKn16pP3PgM5iuEcC6Ocy1Bu3IYN60m7PvhfiD+fjaz0O7wJdder4dl4vfGtbywG+apMK1OQL/2tYPwWwBtOiK9m8SyvrEqsChn2e8oFmnU6tyxoo0TLDWm3cizLMNzLWA+gPRU9EtyRNKFpRj4d8+1P9FuQY1eppE60+pky+XaXlaObgKwXy+Tz2KPqcBSVvTeUsnWq/VSdaXStCOzC3k/qF9A4Euzu26inlEgfF0U7U+mtTpPak27cZiq1erudWV9g4AjEh26yQjGeLJB9Q8MCvHrNKefetOO3HXJ98PTybKuAHinNAs6EbkxYz2YP/fCC0u+3O327iTynxCm3SgEMwtZrX8C3DwdO/uh1r1DGmgWWoku8jzvhe7DJRNhQpl2oyRS8iwmfb4ZdPXotNetSmYk20NhgH/Mii5utWR8e+F723pCmvbvz7v8ykYjuoQIp5s/z7W3AxVbdKKfEvMl453VFRteDwJNaNNuZt7dGxx9HIwz+m8LdiyjrgC6k8BXCuE8GEtEg0H6wrQb9SuXebqVr38IjA8BvINBXVMBrauiE3Bjo66+MjhY/FMqSMVAoq9Mu9kPNrsShCdZZJ0N5iNTd5pLDAM3TohFYFwnpf2dfjw4pS9Nu/mASilnKcq9i0CngfGa3vvFGMJSBt+KHL5dKhQeNcYiAeC+N+3mGpZrtb0shVNY0UlE2Heir+Mlwp9B9AMo3Oa6+QeIiBPwjHGISWXazdX2fd4RiI4lwlEMvBHAdOOjMQ4B/YwK5vssop/V6/zTwcHCH9POuRf8Jq1pXy5muVzb08rTPCg+CBbNBUNvvsz3QvQWYzIB+hDthxXUb4mt+4WwF2WnUsZUCbzFQZhQzZr1yGbM2Jsb2Nti3pMZc0C0GzN2IcKUGJPxwVgComcY/Azp9/+NxuJ6PXi004M0YuSWylDZnbaDYdGFo2u12g5K5WbUWW1nWTTFYgwo6OqIVgEKNpPKE6MGywqJEQJcY4ZPZK1pEK9GXa1Qylk+NEQdlwvtgHpfdPn/ixNifr4QLGYAAAAASUVORK5CYII=',
+								width: 230,
+								height: 230,
+							},
+							left: '16.5%',
+							top: 'center',
+						},
+					],
+				},
+				legend: {
+					type: 'scroll',
+					orient: 'vertical',
+					right: '0%',
+					left: '65%',
+					top: 'center',
+					itemWidth: 14,
+					itemHeight: 14,
+					data: getname,
+					textStyle: {
+						rich: {
+							name: {
+								fontSize: 14,
+								fontWeight: 400,
+								width: 200,
+								height: 35,
+								padding: [0, 0, 0, 60],
+								color: state.charts.color,
+							},
+							rate: {
+								fontSize: 15,
+								fontWeight: 500,
+								height: 35,
+								width: 40,
+								padding: [0, 0, 0, 30],
+								color: state.charts.color,
+							},
+						},
+					},
+				},
+				series: [
+					{
+						type: 'pie',
+						radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
+						center: ['32%', '50%'],
+						itemStyle: {
+							color: function (params: any) {
+								return colorList[params.dataIndex];
+							},
+						},
+						label: { show: false },
+						labelLine: { show: false },
+						data: data,
+					},
+				],
+			};
+			(<any>global.homeChartTwo).setOption(option);
+			(<any>state.myCharts).push(global.homeChartTwo);
+		};
+		// 柱状图
+		const initBarChart = () => {
+			if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
+			global.homeCharThree = <any>echarts.init(homeBarRef.value, state.charts.theme);
+			const option = {
+				backgroundColor: state.charts.bgColor,
+				title: {
+					text: '地热开发利用',
+					x: 'left',
+					textStyle: { fontSize: '15', color: state.charts.color },
+				},
+				tooltip: { trigger: 'axis' },
+				legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 },
+				grid: { top: 70, right: 80, bottom: 30, left: 80 },
+				xAxis: [
+					{
+						type: 'category',
+						data: ['1km', '2km', '3km', '4km', '5km', '6km'],
+						boundaryGap: true,
+						axisTick: { show: false },
+					},
+				],
+				yAxis: [
+					{
+						name: '供回温度(℃）',
+						nameLocation: 'middle',
+						nameTextStyle: { padding: [3, 4, 50, 6] },
+						splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+						axisLine: { show: false },
+						axisTick: { show: false },
+						axisLabel: { color: state.charts.color, formatter: '{value} ' },
+					},
+					{
+						name: '压力值(Mpa)',
+						nameLocation: 'middle',
+						nameTextStyle: { padding: [50, 4, 5, 6] },
+						splitLine: { show: false },
+						axisLine: { show: false },
+						axisTick: { show: false },
+						axisLabel: { color: state.charts.color, formatter: '{value} ' },
+					},
+				],
+				series: [
+					{
+						name: '供温',
+						type: 'line',
+						smooth: true,
+						showSymbol: true,
+						// 矢量画五角星
+						symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
+						symbolSize: 12,
+						yAxisIndex: 0,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{ offset: 0, color: 'rgba(250,180,101,0.3)' },
+								{ offset: 1, color: 'rgba(250,180,101,0)' },
+							]),
+							shadowColor: 'rgba(250,180,101,0.2)',
+							shadowBlur: 20,
+						},
+						itemStyle: { color: '#FF8000' },
+						// data中可以使用对象，value代表相应的值，另外可加入自定义的属性
+						data: [
+							{ value: 1, stationName: 's1' },
+							{ value: 3, stationName: 's2' },
+							{ value: 4, stationName: 's3' },
+							{ value: 9, stationName: 's4' },
+							{ value: 3, stationName: 's5' },
+							{ value: 2, stationName: 's6' },
+						],
+					},
+					{
+						name: '回温',
+						type: 'line',
+						smooth: true,
+						showSymbol: true,
+						symbol: 'emptyCircle',
+						symbolSize: 12,
+						yAxisIndex: 0,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(
+								0,
+								0,
+								0,
+								1,
+								[
+									{ offset: 0, color: 'rgba(199, 237, 250,0.5)' },
+									{ offset: 1, color: 'rgba(199, 237, 250,0.2)' },
+								],
+								false
+							),
+						},
+						itemStyle: {
+							color: '#3bbc86',
+						},
+						data: [
+							{ value: 31, stationName: 's1' },
+							{ value: 36, stationName: 's2' },
+							{ value: 54, stationName: 's3' },
+							{ value: 24, stationName: 's4' },
+							{ value: 73, stationName: 's5' },
+							{ value: 22, stationName: 's6' },
+						],
+					},
+					{
+						name: '压力值(Mpa)',
+						type: 'bar',
+						barWidth: 30,
+						yAxisIndex: 1,
+						itemStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{ offset: 0, color: 'rgba(108,80,243,0.3)' },
+								{ offset: 1, color: 'rgba(108,80,243,0)' },
+							]),
+							//柱状图圆角
+							borderRadius: [30, 30, 0, 0],
+						},
+						data: [
+							{ value: 11, stationName: 's1' },
+							{ value: 34, stationName: 's2' },
+							{ value: 54, stationName: 's3' },
+							{ value: 39, stationName: 's4' },
+							{ value: 63, stationName: 's5' },
+							{ value: 24, stationName: 's6' },
+						],
+					},
+				],
+			};
+			(<any>global.homeCharThree).setOption(option);
+			(<any>state.myCharts).push(global.homeCharThree);
+		};
+		// 批量设置 echarts resize
+		const initEchartsResizeFun = () => {
+			nextTick(() => {
+				for (let i = 0; i < state.myCharts.length; i++) {
+					setTimeout(() => {
+						(<any>state.myCharts[i]).resize();
+					}, i * 1000);
+				}
+			});
+		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
+			window.addEventListener('resize', initEchartsResizeFun);
+		};
+		// 页面加载时
+		onMounted(() => {
+			initEchartsResize();
+		});
+		// 由于页面缓存原因，keep-alive
+		onActivated(() => {
+			initEchartsResizeFun();
+		});
+		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
+		watch(
+			() => isTagsViewCurrenFull.value,
+			() => {
+				initEchartsResizeFun();
+			}
+		);
+		// 监听 vuex 中是否开启深色主题
+		watch(
+			() => themeConfig.value.isIsDark,
+			(isIsDark) => {
+				nextTick(() => {
+					state.charts.theme = isIsDark ? 'dark' : '';
+					state.charts.bgColor = isIsDark ? 'transparent' : '';
+					state.charts.color = isIsDark ? '#dadada' : '#303133';
+					setTimeout(() => {
+						initLineChart();
+					}, 500);
+					setTimeout(() => {
+						initPieChart();
+					}, 700);
+					setTimeout(() => {
+						initBarChart();
+					}, 1000);
+				});
+			},
+			{
+				deep: true,
+				immediate: true,
+			}
+		);
+		return {
+			homeLineRef,
+			homePieRef,
+			homeBarRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+$homeNavLengh: 8;
+.home-container {
+	overflow: hidden;
+	.home-card-one,
+	.home-card-two,
+	.home-card-three {
+		.home-card-item {
+			width: 100%;
+			height: 130px;
+			border-radius: 4px;
+			transition: all ease 0.3s;
+			padding: 20px;
+			overflow: hidden;
+			background: var(--el-color-white);
+			color: var(--el-text-color-primary);
+			border: 1px solid var(--next-border-color-light);
+			&:hover {
+				box-shadow: 0 2px 12px var(--next-color-dark-hover);
+				transition: all ease 0.3s;
+			}
+			&-icon {
+				width: 70px;
+				height: 70px;
+				border-radius: 100%;
+				flex-shrink: 1;
+				i {
+					color: var(--el-text-color-placeholder);
+				}
+			}
+			&-title {
+				font-size: 15px;
+				font-weight: bold;
+				height: 30px;
+			}
+		}
+	}
+	.home-card-one {
+		@for $i from 0 through 3 {
+			.home-one-animation#{$i} {
+				opacity: 0;
+				animation-name: error-num;
+				animation-duration: 0.5s;
+				animation-fill-mode: forwards;
+				animation-delay: calc($i/10) + s;
+			}
+		}
+	}
+	.home-card-two,
+	.home-card-three {
+		.home-card-item {
+			height: 400px;
+			width: 100%;
+			overflow: hidden;
+			.home-monitor {
+				height: 100%;
+				.flex-warp-item {
+					width: 25%;
+					height: 111px;
+					display: flex;
+					.flex-warp-item-box {
+						margin: auto;
+						text-align: center;
+						color: var(--el-text-color-primary);
+						display: flex;
+						border-radius: 5px;
+						background: var(--next-bg-color);
+						cursor: pointer;
+						transition: all 0.3s ease;
+						&:hover {
+							background: var(--el-color-primary-light-9);
+							transition: all 0.3s ease;
+						}
+					}
+					@for $i from 0 through $homeNavLengh {
+						.home-animation#{$i} {
+							opacity: 0;
+							animation-name: error-num;
+							animation-duration: 0.5s;
+							animation-fill-mode: forwards;
+							animation-delay: calc($i/10) + s;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/login/component/account.vue b/src/views/login/component/account.vue
new file mode 100644
index 0000000..0b234e3
--- /dev/null
+++ b/src/views/login/component/account.vue
@@ -0,0 +1,258 @@
+<template>
+  <el-form ref="loginForm" size="large" class="login-content-form" :model="ruleForm"  :rules="formRules">
+    <el-form-item class="login-animation1" prop="username">
+      <el-input
+          type="text"
+          :placeholder="$t('message.account.accountPlaceholder1')"
+          v-model="ruleForm.username"
+          clearable autocomplete="off">
+        <template #prefix>
+          <el-icon class="el-input__icon"><ele-User /></el-icon>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item class="login-animation2" prop="password">
+      <el-input
+          :type="isShowPassword ? 'text' : 'password'"
+          :placeholder="$t('message.account.accountPlaceholder2')"
+          v-model="ruleForm.password"
+          autocomplete="off"
+          @keyup.enter="onSignIn"
+      >
+        <template #prefix>
+          <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
+        </template>
+        <template #suffix>
+          <i
+              class="iconfont el-input__icon login-content-password"
+              :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
+              @click="isShowPassword = !isShowPassword"
+          >
+          </i>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item class="login-animation3" prop="verifyCode">
+      <el-col :span="15">
+        <el-input
+            type="text"
+            maxlength="4"
+            :placeholder="$t('message.account.accountPlaceholder3')"
+            v-model="ruleForm.verifyCode"
+            clearable
+            autocomplete="off"
+            @keyup.enter="onSignIn"
+        >
+          <template #prefix>
+            <el-icon class="el-input__icon"><ele-Position /></el-icon>
+          </template>
+        </el-input>
+      </el-col>
+      <el-col :span="1"></el-col>
+      <el-col :span="8">
+        <div class="login-content-code">
+          <img
+              class="login-content-code-img"
+              @click="getCaptcha"
+              width="130"
+              height="38"
+              :src="captchaSrc"
+              style="cursor: pointer"
+          />
+        </div>
+      </el-col>
+    </el-form-item>
+    <el-form-item class="login-animation4">
+      <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
+        <span>{{ $t('message.account.accountBtnText') }}</span>
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts">
+import {
+  toRefs,
+  reactive,
+  defineComponent,
+  computed,
+  onMounted,
+  getCurrentInstance,
+  ref, unref
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+import Cookies from 'js-cookie';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { initFrontEndControlRoutes } from '/@/router/frontEnd';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { Session } from '/@/utils/storage';
+import { formatAxis } from '/@/utils/formatTime';
+import { NextLoading } from '/@/utils/loading';
+import {login,captcha} from "/@/api/login";
+export default defineComponent({
+	name: 'loginAccount',
+	setup() {
+		const { t } = useI18n();
+    const {proxy} = <any>getCurrentInstance();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const route = useRoute();
+		const router = useRouter();
+    const loginForm = ref(null)
+		const state = reactive({
+			isShowPassword: false,
+			ruleForm: {
+        username: 'demo',
+				password: '123456',
+        verifyCode: '',
+        verifyKey:''
+			},
+      formRules:{
+        username: [
+          { required: true, trigger: "blur", message: "用户名不能为空" }
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "密码不能为空" }
+        ],
+        verifyCode: [{ required: true, trigger: "blur", message: "验证码不能为空" }]
+      },
+			loading: {
+				signIn: false,
+			},
+      captchaSrc:'',
+		});
+    onMounted(() => {
+      getCaptcha();
+    });
+    const getCaptcha = () => {
+      captcha().then((res:any)=>{
+        state.captchaSrc = res.data.img
+        state.ruleForm.verifyKey = res.data.key
+      })
+    };
+		// 时间获取
+		const currentTime = computed(() => {
+			return formatAxis(new Date());
+		});
+		// 登录
+		const onSignIn = async () => {
+      const formWrap = unref(loginForm) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if(valid){
+          state.loading.signIn = true;
+          login(state.ruleForm).then(async (res:any)=>{
+            const userInfo = res.data.userInfo
+            userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar)
+            // 存储 token 到浏览器缓存
+            Session.set('token', res.data.token);
+            // 存储用户信息到浏览器缓存
+            Session.set('userInfo', userInfo);
+            // 设置用户菜单
+            Session.set('userMenu',res.data.menuList)
+            // 设置按钮权限
+            Session.set('permissions',res.data.permissions)
+            // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
+            Cookies.set('username', state.ruleForm.username);
+            if (!themeConfig.value.isRequestRoutes) {
+              // 前端控制路由，2、请注意执行顺序
+              await initFrontEndControlRoutes();
+              signInSuccess();
+            } else {
+              // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+              // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
+              await initBackEndControlRoutes();
+              // 执行完 initBackEndControlRoutes，再执行 signInSuccess
+              signInSuccess();
+            }
+          }).catch(()=>{
+            state.loading.signIn = false;
+            getCaptcha();
+          })
+        }
+      })
+		};
+		// 登录成功后的跳转
+		const signInSuccess = () => {
+			// 初始化登录成功时间问候语
+			let currentTimeInfo = currentTime.value;
+			// 登录成功，跳到转首页
+			// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
+			if (route.query?.redirect) {
+				router.push({
+					path: <string>route.query?.redirect,
+					query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
+				});
+			} else {
+				router.push('/');
+			}
+			// 登录成功提示
+			// 关闭 loading
+			state.loading.signIn = true;
+			const signInText = t('message.signInText');
+			ElMessage.success(`${currentTimeInfo}，${signInText}`);
+			// 添加 loading，防止第一次进入界面时出现短暂空白
+			NextLoading.start();
+		};
+		return {
+			onSignIn,
+      getCaptcha,
+      loginForm,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+
+<style scoped lang="scss">
+.login-content-form {
+  margin-top: 20px;
+  @for $i from 1 through 4 {
+    .login-animation#{$i} {
+      opacity: 0;
+      animation-name: error-num;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+      animation-delay: calc($i/10) + s;
+    }
+  }
+  .login-content-password {
+    display: inline-block;
+    width: 20px;
+    cursor: pointer;
+    &:hover {
+      color: #909399;
+    }
+  }
+  .login-content-code {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .login-content-code-img {
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      background-color: #ffffff;
+      border: 1px solid rgb(220, 223, 230);
+      cursor: pointer;
+      transition: all ease 0.2s;
+      border-radius: 4px;
+      user-select: none;
+      &:hover {
+        border-color: #c0c4cc;
+        transition: all ease 0.2s;
+      }
+    }
+  }
+  .login-content-submit {
+    width: 100%;
+    letter-spacing: 2px;
+    font-weight: 300;
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/login/component/mobile.vue b/src/views/login/component/mobile.vue
new file mode 100644
index 0000000..9664bb0
--- /dev/null
+++ b/src/views/login/component/mobile.vue
@@ -0,0 +1,84 @@
+<template>
+	<el-form size="large" class="login-content-form">
+		<el-form-item class="login-animation1">
+			<el-input type="text" :placeholder="$t('message.mobile.placeholder1')" v-model="ruleForm.userName" clearable autocomplete="off">
+				<template #prefix>
+					<i class="iconfont icon-dianhua el-input__icon"></i>
+				</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item class="login-animation2">
+			<el-col :span="15">
+				<el-input type="text" maxlength="4" :placeholder="$t('message.mobile.placeholder2')" v-model="ruleForm.code" clearable autocomplete="off">
+					<template #prefix>
+						<el-icon class="el-input__icon"><ele-Position /></el-icon>
+					</template>
+				</el-input>
+			</el-col>
+			<el-col :span="1"></el-col>
+			<el-col :span="8">
+				<el-button class="login-content-code">{{ $t('message.mobile.codeText') }}</el-button>
+			</el-col>
+		</el-form-item>
+		<el-form-item class="login-animation3">
+			<el-button round type="primary" class="login-content-submit">
+				<span>{{ $t('message.mobile.btnText') }}</span>
+			</el-button>
+		</el-form-item>
+		<div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div>
+	</el-form>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+// 定义接口来定义对象的类型
+interface LoginMobileState {
+	userName: any;
+	code: string | number | undefined;
+}
+
+// 定义对象与类型
+const ruleForm: LoginMobileState = {
+	userName: '',
+	code: '',
+};
+
+export default defineComponent({
+	name: 'loginMobile',
+	setup() {
+		const state = reactive({ ruleForm });
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.login-content-form {
+	margin-top: 20px;
+	@for $i from 1 through 4 {
+		.login-animation#{$i} {
+			opacity: 0;
+			animation-name: error-num;
+			animation-duration: 0.5s;
+			animation-fill-mode: forwards;
+			animation-delay: calc($i/10) + s;
+		}
+	}
+	.login-content-code {
+		width: 100%;
+		padding: 0;
+	}
+	.login-content-submit {
+		width: 100%;
+		letter-spacing: 2px;
+		font-weight: 300;
+		margin-top: 15px;
+	}
+	.login-msg {
+		color: var(--el-text-color-placeholder);
+	}
+}
+</style>
diff --git a/src/views/login/component/scan.vue b/src/views/login/component/scan.vue
new file mode 100644
index 0000000..27a93f9
--- /dev/null
+++ b/src/views/login/component/scan.vue
@@ -0,0 +1,59 @@
+<template>
+	<div class="login-scan-container">
+		<div ref="qrcodeRef"></div>
+		<div class="font12 mt20 login-msg">{{ $t('message.scan.text') }}</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, onMounted } from 'vue';
+import QRCode from 'qrcodejs2-fixes';
+
+export default defineComponent({
+	name: 'loginScan',
+	setup() {
+		const qrcodeRef = ref<HTMLElement | null>(null);
+		// 初始化生成二维码
+		const initQrcode = () => {
+			(qrcodeRef.value as HTMLElement).innerHTML = '';
+			new QRCode(qrcodeRef.value, {
+				text: `https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi`,
+				width: 260,
+				height: 260,
+				colorDark: '#000000',
+				colorLight: '#ffffff',
+			});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initQrcode();
+		});
+		return { qrcodeRef };
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.login-scan-animation {
+	opacity: 0;
+	animation-name: error-num;
+	animation-duration: 0.5s;
+	animation-fill-mode: forwards;
+}
+.login-scan-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	@extend .login-scan-animation;
+	animation-delay: 0.1s;
+	:deep(img) {
+		margin: auto;
+	}
+	.login-msg {
+		color: var(--el-text-color-placeholder);
+		@extend .login-scan-animation;
+		animation-delay: 0.2s;
+	}
+}
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..9361370
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="login-container">
+    <div class="login-content-out">
+      <div class="login-content">
+        <div class="login-content-main">
+          <div class="login-icon-group">
+            <div class="login-icon-group-title">
+              <img :src="logoMini" />
+              <div class="login-icon-group-title-text font25">{{ getThemeConfig.globalViceTitle }}</div>
+            </div>
+          </div>
+          <div v-if="!isScan">
+            <el-tabs v-model="tabsActiveName">
+              <el-tab-pane :label="$t('message.label.one1')" name="account">
+                <Account />
+              </el-tab-pane>
+              <el-tab-pane :label="$t('message.label.two2')" name="mobile">
+                <Mobile />
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+          <Scan v-if="isScan" />
+          <div class="login-content-main-sacn" @click="isScan = !isScan">
+            <i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
+            <div class="login-content-main-sacn-delta"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="login-footer">
+      <div class="login-footer-content mt15">
+        <div class="login-footer-content-warp">
+          <div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div>
+          <div class="mt5">云南奇讯科技有限公司版权所有</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import logoMini from '/@/assets/logo-mini.svg';
+import loginIconTwo from '/@/assets/login-icon-two.svg';
+import { NextLoading } from '/@/utils/loading';
+import Account from '/@/views/login/component/account.vue';
+import Mobile from '/@/views/login/component/mobile.vue';
+import Scan from '/@/views/login/component/scan.vue';
+
+// 定义接口来定义对象的类型
+interface LoginState {
+	tabsActiveName: string;
+	isScan: boolean;
+}
+
+export default defineComponent({
+	name: 'loginIndex',
+	components: { Account, Mobile, Scan },
+	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const state = reactive<LoginState>({
+			tabsActiveName: 'account',
+			isScan: false,
+		});
+		// 获取布局配置信息
+		const getThemeConfig = computed(() => {
+			return themeConfig.value;
+		});
+		// 页面加载时
+		onMounted(() => {
+			NextLoading.done();
+		});
+		return {
+			logoMini,
+			loginIconTwo,
+			getThemeConfig,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+
+<style scoped lang="scss">
+.login-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-image: url("/@/assets/bg.jpg");
+  background-size: cover;
+  .login-icon-group {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .login-icon-group-title {
+      display: flex;
+      align-items: center;
+      img {
+        width: 80px;
+        height: 70px;
+      }
+      &-text {
+        padding-left: 5px;
+        color: var(--el-color-primary);
+      }
+    }
+    &-icon {
+      width: 60%;
+      height: 70%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
+  .login-content-out {
+    width: 100%;
+    height: 100%;
+    padding-top: 150px;
+  }
+  .login-content {
+    width: 500px;
+    padding: 20px;
+    margin: auto;
+    background-color: var(--el-color-white);
+    border: 5px solid var(--el-color-primary-light-8);
+    border-radius: 5px;
+    overflow: hidden;
+    z-index: 1;
+    position: relative;
+    .login-content-main {
+      margin: 0 auto;
+      width: 80%;
+      .login-content-title {
+        color: var(--el-text-color-primary);
+        font-weight: 500;
+        font-size: 22px;
+        text-align: center;
+        letter-spacing: 4px;
+        margin: 15px 0 30px;
+        white-space: nowrap;
+        z-index: 5;
+        position: relative;
+        transition: all 0.3s ease;
+      }
+    }
+    .login-content-main-sacn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 50px;
+      height: 50px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all ease 0.3s;
+      color: var(--el-text-color-primary);
+      &-delta {
+        position: absolute;
+        width: 35px;
+        height: 70px;
+        z-index: 2;
+        top: 2px;
+        right: 21px;
+        background: var(--el-color-white);
+        transform: rotate(-45deg);
+      }
+      &:hover {
+        opacity: 1;
+        transition: all ease 0.3s;
+        color: var(--el-color-primary) !important;
+      }
+      i {
+        width: 47px;
+        height: 50px;
+        display: inline-block;
+        font-size: 48px;
+        position: absolute;
+        right: 2px;
+        top: -1px;
+      }
+    }
+  }
+  .login-footer{
+    position: absolute;
+    bottom: 5px;
+    width: 100%;
+    &-content {
+      width: 100%;
+      display: flex;
+      &-warp {
+        margin: auto;
+        color: #e0e3e9;
+        text-align: center;
+        animation: error-num 1s ease-in-out;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/make/noticeBar/index.vue b/src/views/make/noticeBar/index.vue
new file mode 100644
index 0000000..2bb8730
--- /dev/null
+++ b/src/views/make/noticeBar/index.vue
@@ -0,0 +1,164 @@
+<template>
+	<div class="notice-bar-container">
+		<el-card shadow="hover" header="滚动通知栏：默认">
+			<NoticeBar
+				text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
+				的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
+			/>
+		</el-card>
+
+		<el-card shadow="hover" header="滚动通知栏：设置样式" class="mt15">
+			<NoticeBar
+				text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
+				的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
+				leftIcon="iconfont icon-tongzhi2"
+				rightIcon="ele-ArrowRight"
+				background="#ecf5ff"
+				color="#409eff"
+			/>
+		</el-card>
+
+		<el-card shadow="hover" header="滚动通知栏：搭配 NoticeBar 和 Carousel 走马灯 组件可以实现垂直滚动的效果" class="mt15">
+			<NoticeBar :scrollable="true">
+				<el-carousel height="40px" direction="vertical" :autoplay="true" indicator-position="none" :interval="3000">
+					<el-carousel-item v-for="v in noticeList" :key="v">{{ v }} </el-carousel-item>
+				</el-carousel>
+			</NoticeBar>
+		</el-card>
+
+		<el-card shadow="hover" header="滚动通知栏：参数" class="mt15">
+			<el-table :data="tableData" style="width: 100%">
+				<el-table-column prop="a1" label="参数"> </el-table-column>
+				<el-table-column prop="a2" label="说明"> </el-table-column>
+				<el-table-column prop="a3" label="类型"> </el-table-column>
+				<el-table-column prop="a4" label="可选值"> </el-table-column>
+				<el-table-column prop="a5" label="默认值"> </el-table-column>
+			</el-table>
+		</el-card>
+
+		<el-card shadow="hover" header="图标选择器(宽度自动)：事件" class="mt15">
+			<el-table :data="tableData1" style="width: 100%">
+				<el-table-column prop="a1" label="事件名称"> </el-table-column>
+				<el-table-column prop="a2" label="说明"> </el-table-column>
+				<el-table-column prop="a3" label="类型"> </el-table-column>
+				<el-table-column prop="a4" label="回调参数"> </el-table-column>
+			</el-table>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+import NoticeBar from '/@/components/noticeBar/index.vue';
+
+export default defineComponent({
+	name: 'makeNoticeBar',
+	components: { NoticeBar },
+	setup() {
+		const state = reactive({
+			noticeList: [
+				'🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等',
+				'适配手机、平板、pc的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）',
+				'仓库地址：https://gitee.com/lyt-top/vue-next-admin',
+				'演示地址：https://lyt-top.gitee.io/vue-next-admin-preview/#/login',
+			],
+			tableData: [
+				{
+					a1: 'mode',
+					a2: '通知栏模式，用于右侧 icon 图标点击',
+					a3: 'string',
+					a4: 'closeable / link',
+					a5: '',
+				},
+				{
+					a1: 'text',
+					a2: '通知文本内容，scrollable 为 false 时生效',
+					a3: 'string',
+					a4: '',
+					a5: '',
+				},
+				{
+					a1: 'color',
+					a2: '通知文本颜色',
+					a3: 'string',
+					a4: '',
+					a5: '#e6a23c',
+				},
+				{
+					a1: 'background',
+					a2: '通知背景色',
+					a3: 'string',
+					a4: '',
+					a5: '#fdf6ec',
+				},
+				{
+					a1: 'size',
+					a2: '字体大小，单位px',
+					a3: 'number / string',
+					a4: '',
+					a5: '14',
+				},
+				{
+					a1: 'height',
+					a2: '通知栏高度，单位px',
+					a3: 'number / string',
+					a4: '',
+					a5: '40',
+				},
+				{
+					a1: 'delay',
+					a2: '动画延迟时间 (s)',
+					a3: 'number / string',
+					a4: '',
+					a5: '1',
+				},
+				{
+					a1: 'speed',
+					a2: '滚动速率 (px/s)',
+					a3: 'number / string',
+					a4: '',
+					a5: '100',
+				},
+				{
+					a1: 'scrollable',
+					a2: '是否开启垂直滚动',
+					a3: 'boolean',
+					a4: 'true',
+					a5: 'false',
+				},
+				{
+					a1: 'leftIcon',
+					a2: '自定义左侧图标',
+					a3: 'string',
+					a4: '',
+					a5: '',
+				},
+				{
+					a1: 'rightIcon',
+					a2: '自定义右侧图标',
+					a3: 'string',
+					a4: '',
+					a5: '',
+				},
+			],
+			tableData1: [
+				{
+					a1: 'close',
+					a2: '通知栏模式（mode）closeable 时回调事件',
+					a3: 'function',
+					a4: '',
+				},
+				{
+					a1: 'link',
+					a2: '通知栏模式（mode）link 时回调事件',
+					a3: 'function',
+					a4: '',
+				},
+			],
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/make/selector/index.vue b/src/views/make/selector/index.vue
new file mode 100644
index 0000000..db7c34a
--- /dev/null
+++ b/src/views/make/selector/index.vue
@@ -0,0 +1,126 @@
+<template>
+	<div class="selector-container">
+		<el-card shadow="hover" header="图标选择器(宽度自动)：">
+			<IconSelector @get="onGetIcon" @clear="onClearIcon" v-model="modelIcon" />
+		</el-card>
+
+		<el-card shadow="hover" header="图标选择器(宽度自动)：参数" class="mt15">
+			<el-table :data="tableData" style="width: 100%">
+				<el-table-column prop="a1" label="参数"> </el-table-column>
+				<el-table-column prop="a2" label="说明"> </el-table-column>
+				<el-table-column prop="a3" label="类型"> </el-table-column>
+				<el-table-column prop="a4" label="可选值"> </el-table-column>
+				<el-table-column prop="a5" label="默认值"> </el-table-column>
+			</el-table>
+		</el-card>
+
+		<el-card shadow="hover" header="图标选择器(宽度自动)：事件" class="mt15">
+			<el-table :data="tableData1" style="width: 100%">
+				<el-table-column prop="a1" label="事件名称"> </el-table-column>
+				<el-table-column prop="a2" label="说明"> </el-table-column>
+				<el-table-column prop="a3" label="类型"> </el-table-column>
+				<el-table-column prop="a4" label="回调参数"> </el-table-column>
+			</el-table>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+import IconSelector from '/@/components/iconSelector/index.vue';
+
+export default defineComponent({
+	name: 'makeSelector',
+	components: { IconSelector },
+	setup() {
+		const state = reactive({
+			modelIcon: '',
+			tableData: [
+				{
+					a1: 'prepend',
+					a2: '输入框前置内容，只能字体图标',
+					a3: 'string',
+					a4: '',
+					a5: 'ele-Pointer',
+				},
+				{
+					a1: 'placeholder',
+					a2: '输入框占位文本',
+					a3: 'string',
+					a4: '',
+					a5: '请输入内容搜索图标或者选择图标',
+				},
+				{
+					a1: 'size',
+					a2: '尺寸',
+					a3: 'string',
+					a4: 'large / default / small',
+					a5: 'default',
+				},
+				{
+					a1: 'title',
+					a2: '弹窗标题',
+					a3: 'string',
+					a4: '',
+					a5: '请选择图标',
+				},
+				{
+					a1: 'type',
+					a2: 'icon 图标类型',
+					a3: 'string',
+					a4: 'ali / ele / awe / all',
+					a5: 'ele',
+				},
+				{
+					a1: 'disabled',
+					a2: '禁用',
+					a3: 'boolean',
+					a4: 'true',
+					a5: 'false',
+				},
+				{
+					a1: 'clearable',
+					a2: '是否可清空',
+					a3: 'boolean',
+					a4: 'false',
+					a5: 'true',
+				},
+				{
+					a1: 'emptyDescription',
+					a2: '自定义空状态描述文字',
+					a3: 'String',
+					a4: '',
+					a5: '无相关图标',
+				},
+			],
+			tableData1: [
+				{
+					a1: 'get',
+					a2: '获取当前点击的 icon 图标',
+					a3: 'function',
+					a4: '(icon: string)',
+				},
+				{
+					a1: 'clear',
+					a2: '清空当前点击的 icon 图标',
+					a3: 'function',
+					a4: '(icon: string)',
+				},
+			],
+		});
+		// 获取当前点击的 icon 图标
+		const onGetIcon = (icon: string) => {
+			console.log(icon);
+		};
+		// 清空当前点击的 icon 图标
+		const onClearIcon = (icon: string) => {
+			console.log(icon);
+		};
+		return {
+			onGetIcon,
+			onClearIcon,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/make/svgDemo/index.vue b/src/views/make/svgDemo/index.vue
new file mode 100644
index 0000000..36fd320
--- /dev/null
+++ b/src/views/make/svgDemo/index.vue
@@ -0,0 +1,59 @@
+<template>
+	<div class="svg-demo-container">
+		<el-card shadow="hover" header="svgIcon：演示（支持本地svg）">
+			<SvgIcon name="iconfont icon-shuju1" color="red" :size="30" />
+			<SvgIcon name="ele-Trophy" color="var(--el-color-primary)" :size="30" />
+			<SvgIcon name="fa fa-flag-checkered" color="#09f" :size="30" />
+			<SvgIcon :name="logoMini" color="#09f" :size="30" />
+		</el-card>
+		<el-card shadow="hover" header="svgIcon：参数" class="mt15">
+			<el-table :data="tableData" style="width: 100%">
+				<el-table-column prop="a1" label="参数"> </el-table-column>
+				<el-table-column prop="a2" label="说明"> </el-table-column>
+				<el-table-column prop="a3" label="类型"> </el-table-column>
+				<el-table-column prop="a4" label="可选值"> </el-table-column>
+				<el-table-column prop="a5" label="默认值"> </el-table-column>
+			</el-table>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+import logoMini from '/@/assets/logo-mini.svg';
+
+export default defineComponent({
+	name: 'makeSvgDemo',
+	setup() {
+		const state = reactive({
+			tableData: [
+				{
+					a1: 'name',
+					a2: 'svg 图标组件名字 / svg 路径 url',
+					a3: 'string',
+					a4: '',
+					a5: '',
+				},
+				{
+					a1: 'size',
+					a2: 'svg 大小',
+					a3: 'number',
+					a4: '',
+					a5: 14,
+				},
+				{
+					a1: 'color',
+					a2: 'svg 颜色',
+					a3: 'string',
+					a4: '',
+					a5: '',
+				},
+			],
+		});
+		return {
+			logoMini,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/menu/menu1/menu11/index.vue b/src/views/menu/menu1/menu11/index.vue
new file mode 100644
index 0000000..944beb8
--- /dev/null
+++ b/src/views/menu/menu1/menu11/index.vue
@@ -0,0 +1,21 @@
+<template>
+	<div>
+		<el-input v-model="val" placeholder="menu11：请输入内容测试路由缓存"></el-input>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'menu11',
+	setup() {
+		const state = reactive({
+			val: '',
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/menu/menu1/menu12/menu121/index.vue b/src/views/menu/menu1/menu12/menu121/index.vue
new file mode 100644
index 0000000..791130b
--- /dev/null
+++ b/src/views/menu/menu1/menu12/menu121/index.vue
@@ -0,0 +1,21 @@
+<template>
+	<div>
+		<el-input v-model="val" placeholder="menu121：请输入内容测试路由缓存"></el-input>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'menu121',
+	setup() {
+		const state = reactive({
+			val: '',
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/menu/menu1/menu12/menu122/index.vue b/src/views/menu/menu1/menu12/menu122/index.vue
new file mode 100644
index 0000000..3db8096
--- /dev/null
+++ b/src/views/menu/menu1/menu12/menu122/index.vue
@@ -0,0 +1,21 @@
+<template>
+	<div>
+		<el-input v-model="val" placeholder="menu122：请输入内容测试路由缓存"></el-input>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'menu122',
+	setup() {
+		const state = reactive({
+			val: '',
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/menu/menu1/menu13/index.vue b/src/views/menu/menu1/menu13/index.vue
new file mode 100644
index 0000000..f984dcc
--- /dev/null
+++ b/src/views/menu/menu1/menu13/index.vue
@@ -0,0 +1,27 @@
+<template>
+	<div>
+		<el-input v-model="val" placeholder="menu13：请输入内容测试路由缓存"></el-input>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onActivated, onMounted, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'menu13',
+	setup() {
+		const state = reactive({
+			val: '',
+		});
+		onMounted(() => {
+			console.log(2222);
+		});
+		onActivated(() => {
+			console.log(1111);
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/menu/menu2/index.vue b/src/views/menu/menu2/index.vue
new file mode 100644
index 0000000..0081506
--- /dev/null
+++ b/src/views/menu/menu2/index.vue
@@ -0,0 +1,21 @@
+<template>
+	<div>
+		<el-input v-model="val" placeholder="menu2：请输入内容测试路由缓存"></el-input>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'menu2',
+	setup() {
+		const state = reactive({
+			val: '',
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/awesome/index.vue b/src/views/pages/awesome/index.vue
new file mode 100644
index 0000000..52b53bb
--- /dev/null
+++ b/src/views/pages/awesome/index.vue
@@ -0,0 +1,87 @@
+<template>
+	<div class="awesome-container">
+		<el-card shadow="hover" :header="`fontawesome 字体图标(自动载入)：${sheetsIconList.length - 24}个`">
+			<el-row class="iconfont-row">
+				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
+					<div class="iconfont-warp">
+						<div class="flex-margin">
+							<div class="iconfont-warp-value">
+								<i :class="v" class="fa"></i>
+							</div>
+							<div class="iconfont-warp-label mt10">{{ v }}</div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+import initIconfont from '/@/utils/getStyleSheets';
+
+export default defineComponent({
+	name: 'pagesAwesome',
+	setup() {
+		const state = reactive({
+			sheetsIconList: [],
+		});
+		// 初始化获取 css 样式，这里使用fontawesome的图标(记得加上前缀 `fa`)，其它第三方请自行做判断
+		const initGetStyleSheets = () => {
+			initIconfont.awe().then((res: any) => (state.sheetsIconList = res));
+		};
+		// 页面加载时
+		onMounted(() => {
+			initGetStyleSheets();
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.awesome-container {
+	.iconfont-row {
+		border-top: 1px solid var(--next-border-color-light);
+		border-left: 1px solid var(--next-border-color-light);
+		.iconfont-warp {
+			text-align: center;
+			border-right: 1px solid var(--next-border-color-light);
+			border-bottom: 1px solid var(--next-border-color-light);
+			height: 120px;
+			overflow: hidden;
+			display: flex;
+			transition: all 0.3s ease;
+			&:hover {
+				box-shadow: 0 2px 12px var(--next-color-dark-hover);
+				cursor: pointer;
+				transition: all 0.3s ease;
+				.iconfont-warp-value {
+					i {
+						color: var(--el-color-primary);
+						transition: all 0.3s ease;
+					}
+				}
+				.iconfont-warp-label {
+					color: var(--el-color-primary);
+					transition: all 0.3s ease;
+				}
+			}
+			.iconfont-warp-value {
+				i {
+					color: #606266;
+					font-size: 32px;
+					transition: all 0.3s ease;
+				}
+			}
+			.iconfont-warp-label {
+				color: #99a9bf;
+				transition: all 0.3s ease;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/drag/index.vue b/src/views/pages/drag/index.vue
new file mode 100644
index 0000000..1b79498
--- /dev/null
+++ b/src/views/pages/drag/index.vue
@@ -0,0 +1,66 @@
+<template>
+	<div class="drag-container">
+		<el-card shadow="hover" header="拖动指令效果（v-drag）作用于 Dialog 对话框">
+			<el-button type="primary" @click="dialogVisible = true" size="default">
+				<el-icon>
+					<ele-Pointer />
+				</el-icon>
+				点击打开 Dialog
+			</el-button>
+		</el-card>
+
+		<el-card shadow="hover" header="自定义div" class="mt15">
+			<div class="drag-dom">
+				<div class="drag-header">
+					<el-button type="success" size="default" v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']">
+						<el-icon>
+							<ele-Pointer />
+						</el-icon>
+						按住进行拖动测试
+					</el-button>
+				</div>
+			</div>
+		</el-card>
+
+		<el-dialog v-model="dialogVisible" width="769px">
+			<template #header>
+				<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']">拖动指令效果（v-drag）</div>
+			</template>
+			<p>鼠标放标题头进行 Dialog 对话框拖动</p>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="dialogVisible = false" size="default">取 消</el-button>
+					<el-button type="primary" @click="dialogVisible = false" size="default">确 定</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesDrag',
+	setup() {
+		const state = reactive({
+			dialogVisible: false,
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.drag-container {
+	.drag-dom {
+		position: relative;
+		display: inline-block;
+		.drag-header {
+			display: inline-block;
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/dynamicForm/index.vue b/src/views/pages/dynamicForm/index.vue
new file mode 100644
index 0000000..d6a7a68
--- /dev/null
+++ b/src/views/pages/dynamicForm/index.vue
@@ -0,0 +1,204 @@
+<template>
+	<div class="dynamic-form-container">
+		<el-card shadow="hover" header="动态复杂表单">
+			<el-form :model="form" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
+				<el-row :gutter="35">
+					<el-col
+						:xs="val.xs"
+						:sm="val.sm"
+						:md="val.md"
+						:lg="val.md"
+						:xl="val.xl"
+						class="mb20"
+						v-show="val.isShow"
+						v-for="(val, key) in formData"
+						:key="key"
+					>
+						<template v-if="val.type !== ''">
+							<el-form-item
+								:label="val.label"
+								:prop="val.prop"
+								:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
+								v-if="val.type !== ''"
+							>
+								<el-input
+									v-model="form[val.prop]"
+									:placeholder="val.placeholder"
+									clearable
+									v-if="val.type === 'input'"
+									style="width: 100%"
+									:disabled="val.disabled"
+								></el-input>
+								<el-date-picker
+									v-model="form[val.prop]"
+									type="date"
+									:placeholder="val.placeholder"
+									v-else-if="val.type === 'date'"
+									style="width: 100%"
+									:disabled="val.disabled"
+								>
+								</el-date-picker>
+								<el-select
+									v-model="form[val.prop]"
+									:placeholder="val.placeholder"
+									v-else-if="val.type === 'select'"
+									style="width: 100%"
+									:disabled="val.disabled"
+								>
+									<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+								</el-select>
+								<el-input
+									type="textarea"
+									v-model="form[val.prop]"
+									:placeholder="val.placeholder"
+									clearable
+									v-if="val.type === 'textarea'"
+									style="width: 100%"
+									:disabled="val.disabled"
+								></el-input>
+							</el-form-item>
+						</template>
+						<template v-else>
+							<el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
+								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
+									<el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
+										<template #label>
+											<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
+												<el-icon>
+													<ele-Plus />
+												</el-icon>
+											</el-button>
+											<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
+												<el-icon>
+													<ele-Delete />
+												</el-icon>
+											</el-button>
+											<span class="ml10">年度</span>
+										</template>
+										<el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
+									</el-form-item>
+								</el-col>
+								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
+									<el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
+										<el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
+									</el-form-item>
+								</el-col>
+								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
+									<el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
+										<el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
+									</el-form-item>
+								</el-col>
+							</el-row>
+						</template>
+					</el-col>
+				</el-row>
+			</el-form>
+		</el-card>
+		<el-row class="flex mt15">
+			<div class="flex-margin">
+				<el-button size="default" @click="onResetForm">
+					<el-icon>
+						<ele-RefreshRight />
+					</el-icon>
+					重置表单
+				</el-button>
+				<el-button size="default" type="primary" @click="onSubmitForm">
+					<SvgIcon name="iconfont icon-shuxing" />
+					验证表单
+				</el-button>
+			</div>
+		</el-row>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
+import { formData } from './mock';
+
+// 定义接口来定义对象的类型
+interface FormDataOptions {
+	label: string;
+	value: string;
+}
+interface FormDataState {
+	label: string;
+	prop: string;
+	placeholder: string;
+	clearable: boolean;
+	disabled: boolean;
+	required: boolean;
+	type: string;
+	i18n: boolean;
+	i18nText: string;
+	isShow: boolean;
+	xs: number;
+	sm: number;
+	md: number;
+	lg: number;
+	xl: number;
+	options?: FormDataOptions[];
+}
+interface DynamicFormState {
+	formData: FormDataState[];
+	form: any;
+}
+
+export default defineComponent({
+	name: 'pagesDynamicForm',
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const state = reactive<DynamicFormState>({
+			formData,
+			form: {
+				name: '',
+				email: '',
+				autograph: '',
+				occupation: '',
+				list: [
+					{
+						year: '',
+						month: '',
+						day: '',
+					},
+				],
+				remarks: '',
+			},
+		});
+		// 新增行
+		const onAddRow = () => {
+			state.form.list.push({
+				year: '',
+				month: '',
+				day: '',
+			});
+		};
+		// 删除行
+		const onDelRow = (k: number) => {
+			state.form.list.splice(k, 1);
+		};
+		// 表单验证
+		const onSubmitForm = () => {
+			proxy.$refs.formRulesOneRef.validate((valid: boolean) => {
+				if (valid) {
+					proxy.$message.success('验证成功');
+				} else {
+					return false;
+				}
+			});
+		};
+		// 重置表单
+		const onResetForm = () => {
+			proxy.$refs.formRulesOneRef.resetFields();
+		};
+		// 页面加载时
+		onMounted(() => {});
+		return {
+			onAddRow,
+			onDelRow,
+			onSubmitForm,
+			onResetForm,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/dynamicForm/mock.ts b/src/views/pages/dynamicForm/mock.ts
new file mode 100644
index 0000000..2293fe9
--- /dev/null
+++ b/src/views/pages/dynamicForm/mock.ts
@@ -0,0 +1,119 @@
+// 表单数据选项(自行扩展)
+export const formData = [
+	{
+		label: '姓名',
+		prop: 'name',
+		placeholder: '请输入姓名',
+		clearable: true,
+		disabled: false,
+		required: true,
+		type: 'input',
+		i18n: false,
+		i18nText: '',
+		isShow: true,
+		xs: 24,
+		sm: 12,
+		md: 8,
+		lg: 6,
+		xl: 4,
+	},
+	{
+		label: '邮箱',
+		prop: 'email',
+		placeholder: '请输入用户邮箱',
+		clearable: true,
+		disabled: false,
+		required: true,
+		type: 'input',
+		i18n: false,
+		i18nText: '',
+		isShow: true,
+		xs: 24,
+		sm: 12,
+		md: 8,
+		lg: 6,
+		xl: 4,
+	},
+	{
+		label: '登陆时间',
+		prop: 'autograph',
+		placeholder: '选择时间',
+		clearable: true,
+		disabled: false,
+		required: true,
+		type: 'date',
+		i18n: false,
+		i18nText: '',
+		isShow: true,
+		xs: 24,
+		sm: 12,
+		md: 8,
+		lg: 6,
+		xl: 4,
+	},
+	{
+		label: '职务',
+		prop: 'occupation',
+		placeholder: '请选择职务',
+		clearable: true,
+		disabled: false,
+		required: true,
+		type: 'select',
+		i18n: false,
+		i18nText: '',
+		options: [
+			{
+				label: '计算机 / 互联网 / 通信',
+				value: '1',
+			},
+			{
+				label: '生产 / 工艺 / 制造',
+				value: '2',
+			},
+			{
+				label: '医疗 / 护理 / 制药',
+				value: '3',
+			},
+		],
+		isShow: true,
+		xs: 24,
+		sm: 12,
+		md: 8,
+		lg: 6,
+		xl: 4,
+	},
+	{
+		label: '',
+		prop: '',
+		placeholder: '',
+		clearable: true,
+		disabled: false,
+		required: true,
+		type: '',
+		i18n: false,
+		i18nText: '',
+		isShow: true,
+		xs: 24,
+		sm: 24,
+		md: 24,
+		lg: 24,
+		xl: 24,
+	},
+	{
+		label: '备注',
+		prop: 'remarks',
+		placeholder: '请输入',
+		clearable: true,
+		disabled: false,
+		required: true,
+		type: 'textarea',
+		i18n: false,
+		i18nText: '',
+		isShow: true,
+		xs: 24,
+		sm: 24,
+		md: 24,
+		lg: 24,
+		xl: 24,
+	},
+];
diff --git a/src/views/pages/element/index.vue b/src/views/pages/element/index.vue
new file mode 100644
index 0000000..0bb2454
--- /dev/null
+++ b/src/views/pages/element/index.vue
@@ -0,0 +1,89 @@
+<template>
+	<div class="element-container">
+		<el-card shadow="hover" :header="`element plus 字体图标(自动载入，增加了 ele- 前缀，使用时：ele-Aim)：${sheetsIconList.length}个`">
+			<el-row class="iconfont-row">
+				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
+					<div class="iconfont-warp">
+						<div class="flex-margin">
+							<div class="iconfont-warp-value">
+								<SvgIcon :name="v" :size="30" />
+							</div>
+							<div class="iconfont-warp-label mt10">{{ v }}</div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+import initIconfont from '/@/utils/getStyleSheets';
+
+export default defineComponent({
+	name: 'pagesElement',
+	setup() {
+		const state = reactive({
+			sheetsIconList: [],
+		});
+		// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
+		const initGetStyleSheets = () => {
+			initIconfont.ele().then((res: any) => {
+				state.sheetsIconList = res;
+			});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initGetStyleSheets();
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.element-container {
+	.iconfont-row {
+		border-top: 1px solid var(--next-border-color-light);
+		border-left: 1px solid var(--next-border-color-light);
+		.iconfont-warp {
+			text-align: center;
+			border-right: 1px solid var(--next-border-color-light);
+			border-bottom: 1px solid var(--next-border-color-light);
+			height: 120px;
+			overflow: hidden;
+			display: flex;
+			transition: all 0.3s ease;
+			&:hover {
+				box-shadow: 0 2px 12px var(--next-color-dark-hover);
+				cursor: pointer;
+				transition: all 0.3s ease;
+				.iconfont-warp-value {
+					i {
+						color: var(--el-color-primary);
+						transition: all 0.3s ease;
+					}
+				}
+				.iconfont-warp-label {
+					color: var(--el-color-primary);
+					transition: all 0.3s ease;
+				}
+			}
+			.iconfont-warp-value {
+				i {
+					color: #606266;
+					font-size: 32px;
+					transition: all 0.3s ease;
+				}
+			}
+			.iconfont-warp-label {
+				color: #99a9bf;
+				transition: all 0.3s ease;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/filtering/details.vue b/src/views/pages/filtering/details.vue
new file mode 100644
index 0000000..a2e5417
--- /dev/null
+++ b/src/views/pages/filtering/details.vue
@@ -0,0 +1,39 @@
+<template>
+	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
+		<div class="layout-view-bg-white">
+			<div class="w100 h100 flex">
+				<div class="flex-margin color-primary">filtering-details 测试界面</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+export default defineComponent({
+	name: 'pagesFilteringDetails',
+	setup() {
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		return {
+			initTagViewHeight,
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/filtering/details1.vue b/src/views/pages/filtering/details1.vue
new file mode 100644
index 0000000..2fde1b4
--- /dev/null
+++ b/src/views/pages/filtering/details1.vue
@@ -0,0 +1,39 @@
+<template>
+	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
+		<div class="layout-view-bg-white">
+			<div class="w100 h100 flex">
+				<div class="flex-margin color-primary">测试界面</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+export default defineComponent({
+	name: 'pagesFilteringDetails1',
+	setup() {
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		return {
+			initTagViewHeight,
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/filtering/index.vue b/src/views/pages/filtering/index.vue
new file mode 100644
index 0000000..82ea3fd
--- /dev/null
+++ b/src/views/pages/filtering/index.vue
@@ -0,0 +1,355 @@
+<template>
+	<div class="filtering">
+		<el-card
+			shadow="hover"
+			class="filtering-list br-top-no"
+			v-loading="tableData.loading"
+			element-loading-text="加载中..."
+			element-loading-background="rgba(255, 255, 255, 0.1)"
+			:class="{ 'min-h-360': tableData.data.length <= 0 }"
+		>
+			<div
+				v-for="(val, key) in filtering"
+				:key="key"
+				:ref="
+					(el) => {
+						if (el) dlRefs[key] = el;
+					}
+				"
+				class="filtering-list-flex"
+			>
+				<div class="filtering-list-title">{{ val.title }}</div>
+				<div class="filtering-list-item" :style="{ height: val.isMore ? 'auto' : '50px' }">
+					<span class="span" :class="v.active ? 'dd-active' : ''" v-for="(v, k) in val.children" :key="k" @click="onSelItem(val, v)">{{
+						v.label
+					}}</span>
+					<div class="dd-more" v-if="val.isShowMore" @click="val.isMore = !val.isMore">
+						<span>{{ val.isMore ? '收起' : '展开' }}</span>
+						<i :class="val.isMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
+					</div>
+				</div>
+			</div>
+			<div class="flex-warp mt15 mb15" v-if="tableData.data.length > 0">
+				<el-row :gutter="15">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
+						<div class="flex-warp-item">
+							<div class="flex-warp-item-box">
+								<div class="item-img">
+									<img :src="v.img" />
+								</div>
+								<div class="item-txt">
+									<div class="item-txt-title">{{ v.title }}</div>
+									<div class="item-txt-other">
+										<div style="width: 100%">
+											<div class="item-txt-msg mb10">
+												<span>评价 {{ v.evaluate }}</span>
+												<span class="ml10">收藏 {{ v.collection }}</span>
+											</div>
+											<div class="item-txt-msg item-txt-price">
+												<span class="font-price">
+													<span>￥</span>
+													<span class="font">{{ v.price }}</span>
+												</span>
+												<span>月销{{ v.monSales }}笔</span>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+			<div v-else class="filtering-no-data">
+				<div class="no-data-box">
+					<i class="el-icon-search"></i>
+					<div class="no-txt">暂无数据</div>
+				</div>
+			</div>
+			<template v-if="tableData.data.length > 0">
+				<el-pagination
+					style="text-align: right"
+					background
+					@size-change="onHandleSizeChange"
+					@current-change="onHandleCurrentChange"
+					:page-sizes="[10, 20, 30]"
+					:current-page="tableData.param.pageNum"
+					:page-size="tableData.param.pageSize"
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="tableData.total"
+				>
+				</el-pagination>
+			</template>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { ref, toRefs, reactive, onMounted, nextTick, defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import { filtering, filterList } from './mock';
+
+export default defineComponent({
+	name: 'pagesFiltering',
+	setup() {
+		const dlRefs: any = ref([]);
+		const router = useRouter();
+		const state = reactive({
+			filtering,
+			tableData: {
+				data: filterList,
+				total: 99,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+				},
+			},
+		});
+		// 页面加载时
+		onMounted(() => {
+			initBtnToggle();
+			window.onresize = () => {
+				initBtnToggle();
+			};
+		});
+		// 初始化 `收起、展开` 按钮
+		const initBtnToggle = () => {
+			nextTick(() => {
+				const els = dlRefs.value;
+				els.map((v: any, k: number) => {
+					v.scrollHeight < v.lastChild.scrollHeight ? (state.filtering[k].isShowMore = true) : (state.filtering[k].isShowMore = false);
+				});
+			});
+		};
+		// 过滤当前选中的数据
+		const onSelItem = (val: any, v: any) => {
+			val.children.map((v: any) => (v.active = false));
+			v.active = true;
+			let arr = [];
+			state.filtering.map((item: any) => {
+				item.children.map((chil: any) => {
+					if (chil.active) {
+						arr.push({
+							...item,
+							children: [{ ...chil }],
+						});
+					}
+				});
+			});
+			state.tableData.loading = true;
+			setTimeout(() => {
+				state.tableData.loading = false;
+			}, 500);
+		};
+		// 当前列表项点击
+		const onTableItemClick = (v: any) => {
+			if (v.id === 1) {
+				router.push({
+					path: '/pages/filtering/details',
+					query: { id: v.id },
+				});
+			} else {
+				router.push({
+					path: '/pages/filtering/details1',
+					query: { id: v.id },
+				});
+			}
+		};
+		// 分页点击
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页点击
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+		return {
+			dlRefs,
+			onSelItem,
+			onTableItemClick,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.filtering {
+	.filtering-list {
+		overflow: hidden;
+		border-bottom: none !important;
+		.filtering-list-flex {
+			&:last-of-type {
+				.filtering-list-item {
+					border-bottom: none !important;
+				}
+			}
+			.filtering-list-title {
+				float: left;
+				width: 64px;
+				font-weight: 700;
+				position: relative;
+				color: #909399;
+				margin: 15px 0;
+				&:after {
+					content: '';
+					position: absolute;
+					border: 1px solid #909399;
+					border-width: 0 1px 1px 0;
+					width: 4px;
+					height: 4px;
+					transform: rotate(-45deg) translateY(-50%);
+					right: 10px;
+					top: 50%;
+				}
+			}
+			.filtering-list-item {
+				border-bottom: 1px dotted var(--next-border-color-light);
+				margin-left: 64px;
+				overflow: hidden;
+				position: relative;
+				.span {
+					color: #8d8d91;
+					font-size: 14px;
+					float: left;
+					padding: 0 15px;
+					margin: 15px 0;
+					&:hover {
+						color: var(--el-color-primary);
+						cursor: pointer;
+					}
+				}
+				.dd-active {
+					color: var(--el-color-primary);
+				}
+				.dd-more {
+					font-size: 12px;
+					position: absolute;
+					right: 0;
+					top: 16px;
+					color: #a5a5a5;
+					&:hover {
+						cursor: pointer;
+						color: #8d8d91;
+					}
+				}
+			}
+		}
+	}
+	.br-top-no {
+		border-top: none;
+		.flex-warp {
+			display: flex;
+			flex-wrap: wrap;
+			align-content: flex-start;
+			margin: 0 -5px;
+			.flex-warp-item {
+				padding: 5px;
+				width: 100%;
+				height: 360px;
+				.flex-warp-item-box {
+					border: 1px solid var(--next-border-color-light);
+					width: 100%;
+					height: 100%;
+					border-radius: 2px;
+					display: flex;
+					flex-direction: column;
+					transition: all 0.3s ease;
+					&:hover {
+						cursor: pointer;
+						border: 1px solid var(--el-color-primary);
+						transition: all 0.3s ease;
+						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
+						.item-txt-title {
+							color: var(--el-color-primary) !important;
+							transition: all 0.3s ease;
+						}
+						.item-img {
+							img {
+								transition: all 0.3s ease;
+								transform: translateZ(0) scale(1.05);
+							}
+						}
+					}
+					.item-img {
+						width: 100%;
+						height: 215px;
+						overflow: hidden;
+						img {
+							transition: all 0.3s ease;
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.item-txt {
+						flex: 1;
+						padding: 15px;
+						display: flex;
+						flex-direction: column;
+						overflow: hidden;
+						.item-txt-title {
+							text-overflow: ellipsis;
+							overflow: hidden;
+							-webkit-line-clamp: 2;
+							-webkit-box-orient: vertical;
+							display: -webkit-box;
+							color: #666666;
+							transition: all 0.3s ease;
+							&:hover {
+								color: var(--el-color-primary);
+								text-decoration: underline;
+								transition: all 0.3s ease;
+							}
+						}
+						.item-txt-other {
+							flex: 1;
+							align-items: flex-end;
+							display: flex;
+							.item-txt-msg {
+								font-size: 12px;
+								color: #8d8d91;
+							}
+							.item-txt-price {
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+								.font-price {
+									color: #ff5000;
+									.font {
+										font-size: 22px;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+		:deep(.el-card__body) {
+			height: 100%;
+			.filtering-no-data {
+				display: flex;
+				height: 100%;
+				.no-data-box {
+					color: #cccccc;
+					margin: auto;
+					i {
+						font-size: 70px;
+					}
+					.no-txt {
+						font-size: 14px;
+						text-align: center;
+						margin-top: 15px;
+					}
+				}
+			}
+		}
+	}
+	.min-h-360 {
+		height: 360px;
+	}
+}
+</style>
diff --git a/src/views/pages/filtering/mock.ts b/src/views/pages/filtering/mock.ts
new file mode 100644
index 0000000..22e0f38
--- /dev/null
+++ b/src/views/pages/filtering/mock.ts
@@ -0,0 +1,201 @@
+// 导航数据
+export const filtering = [
+	{
+		title: '权限',
+		isMore: false,
+		isShowMore: false,
+		id: 0,
+		children: [
+			{
+				id: '01',
+				label: '全部',
+				active: true,
+			},
+			{
+				id: '02',
+				label: '普通用户',
+				active: false,
+			},
+			{
+				id: '03',
+				label: '管理员',
+				active: false,
+			},
+		],
+	},
+	{
+		title: '布局',
+		isMore: false,
+		isShowMore: false,
+		id: 1,
+		children: [
+			{
+				id: 11,
+				label: '全部',
+				active: true,
+			},
+			{
+				id: 12,
+				label: '默认',
+				active: false,
+			},
+			{
+				id: 13,
+				label: '经典',
+				active: false,
+			},
+			{
+				id: 14,
+				label: '横向',
+				active: false,
+			},
+			{
+				id: 15,
+				label: '分栏',
+				active: false,
+			},
+		],
+	},
+	{
+		title: '配置',
+		isMore: false,
+		isShowMore: false,
+		id: 2,
+		children: [
+			{
+				id: 21,
+				label: '全部',
+				active: true,
+			},
+			{
+				id: 22,
+				label: '开启 Breadcrumb',
+				active: false,
+			},
+			{
+				id: 23,
+				label: '开启 Tags-View',
+				active: false,
+			},
+			{
+				id: 24,
+				label: '固定 Header',
+				active: false,
+			},
+			{
+				id: 25,
+				label: '侧边栏 Logo',
+				active: false,
+			},
+			{
+				id: 26,
+				label: '开启折叠 NavMenu',
+				active: false,
+			},
+			{
+				id: 27,
+				label: '开启一个 NavMenu 展开',
+				active: false,
+			},
+			{
+				id: 28,
+				label: '登录用户头像',
+				active: false,
+			},
+		],
+	},
+];
+
+// 列表数据
+export const filterList = [
+	{
+		img: 'http://news.sznews.com/pic/2020-08/14/9d9c9a60-f0af-41aa-b617-683b07c87642.jpg',
+		title: '嘉陵江2020年第1号洪水”在嘉陵江支流涪江形成',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 1,
+	},
+	{
+		img: 'http://www.sznews.com/news/pic/2020-08/13/0ea47d3c-feb9-4bd7-8597-a8a373aa6340c6ec12c7-3b33-4528-91a6-85ec8ca1df67_watermark.png',
+		title: '让《民法典》走近群众 盐田街道开展人民调解宣传活动',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 2,
+	},
+	{
+		img: 'http://www.sznews.com/photo/pic/2020-08/12/a08d6eb0-1d53-4f76-a313-ad3e5d701f98.jpg',
+		title: '记者手记：可可西里，“挪”向“藏羚羊大产房”的14个半小时',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 3,
+	},
+	{
+		img: 'http://www.sznews.com/photo/pic/2020-08/11/43cc0e14-9bca-45b9-9a8b-342e09d6a4c7.jpg',
+		title: '以优异成绩庆祝深圳经济特区建立40周年',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 4,
+	},
+	{
+		img: 'http://www.sznews.com/photo/pic/2020-08/11/a4dc322b-68ec-40e6-8906-3124142c3e49.jpg',
+		title: '草原上的“太阳姑娘”',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 5,
+	},
+	{
+		img: 'http://www.sznews.com/zhuanti/pic/2020-08/07/57f087b4-4812-46cc-adb9-ead73621284e.png',
+		title: '奇观天下|带你走进非洲野生动物观光第一目的地',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 6,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2020-09/02/t2_(101X54X600X335)7cd39301-d9cf-45f1-91c3-9575b1e5ce0e.jpg.2',
+		title: '五角大楼发布“中国军力报告” 华春莹： 罔顾事实，充满偏见',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 7,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2020-09/02/b8b41d9c-0508-4498-8d37-6e597493769f.jpg',
+		title: '最新地铁消息汇总：4号线北延、2号线三期、8号线一期等今年通车',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 8,
+	},
+	{
+		img: 'http://www.sznews.com/photo/pic/2020-08/10/1635374c-f4d6-475c-ac47-1334176f365d.png',
+		title: '9月1日深圳新增5例无症状感染者！钟南山这段话冲上热搜！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 9,
+	},
+	{
+		img: 'http://www.sznews.com/news/pic/2020-08/13/646e5458-92b7-4636-9940-9b0799babfe1.png',
+		title: '全能“小福宝” 为文明社区建设添砖加瓦',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+	},
+];
diff --git a/src/views/pages/formAdapt/index.vue b/src/views/pages/formAdapt/index.vue
new file mode 100644
index 0000000..3bbfe04
--- /dev/null
+++ b/src/views/pages/formAdapt/index.vue
@@ -0,0 +1,114 @@
+<template>
+	<div class="form-adapt-container">
+		<el-card shadow="hover" header="表单自适应演示(改变窗口查看效果)">
+			<el-form :model="form" size="default" label-width="100px" class="mt35 mb35">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="姓名">
+							<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="用户归属部门">
+							<el-input v-model="form.email" placeholder="请输入用户归属部门" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="登陆账户名">
+							<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="职务">
+							<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
+								<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
+								<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
+								<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="手机">
+							<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="性别">
+							<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
+								<el-option label="男" value="1"></el-option>
+								<el-option label="女" value="2"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="登录密码">
+							<el-input v-model="form.phone1" placeholder="请输入登录密码" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="权限角色">
+							<el-input v-model="form.phone2" placeholder="请输入权限角色" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="创建用户">
+							<el-input v-model="form.phone3" placeholder="请输入创建用户" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="修改用户">
+							<el-input v-model="form.phone4" placeholder="请输入修改用户" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="所属用户">
+							<el-input v-model="form.phone5" placeholder="请输入所属用户" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="所属部门">
+							<el-input v-model="form.phone6" placeholder="请输入所属部门" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+						<el-form-item>
+							<el-button type="primary">
+								<SvgIcon name="iconfont icon-biaodan" />
+								更新个人信息
+							</el-button>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesFormAdapt',
+	setup() {
+		const state = reactive({
+			form: {
+				name: '',
+				email: '',
+				autograph: '',
+				occupation: '',
+				phone: '',
+				sex: '',
+				phone1: '',
+				phone2: '',
+				phone3: '',
+				phone4: '',
+				phone5: '',
+				phone6: '',
+			},
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/formI18n/index.vue b/src/views/pages/formI18n/index.vue
new file mode 100644
index 0000000..b9fe6b8
--- /dev/null
+++ b/src/views/pages/formI18n/index.vue
@@ -0,0 +1,59 @@
+<template>
+	<div class="form-i18n-container">
+		<el-card shadow="hover" header="表单国际化演示(不适用于动态项 form-item)">
+			<div style="text-align: center; margin-top: 15px">
+				<el-radio-group v-model="radio" size="default" @change="onRadioChange">
+					<el-radio-button label="zh-cn">中文简体</el-radio-button>
+					<el-radio-button label="en">英文</el-radio-button>
+					<el-radio-button label="zh-tw">中文繁体</el-radio-button>
+				</el-radio-group>
+			</div>
+			<el-form :model="form" size="default" label-width="100px" class="mt35 mb35">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
+						<el-form-item :label="$t('message.formI18nLabel.name')">
+							<el-input v-model="form.name" :placeholder="$t('message.formI18nPlaceholder.name')" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
+						<el-form-item :label="$t('message.formI18nLabel.email')">
+							<el-input v-model="form.email" :placeholder="$t('message.formI18nPlaceholder.email')" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
+						<el-form-item :label="$t('message.formI18nLabel.autograph')">
+							<el-input v-model="form.autograph" :placeholder="$t('message.formI18nPlaceholder.autograph')" clearable></el-input>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
+
+export default defineComponent({
+	name: 'pagesFormI18n',
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const state = reactive({
+			radio: 'zh-cn',
+			form: {
+				name: '',
+				email: '',
+				autograph: '',
+			},
+		});
+		// 单选框改变时
+		const onRadioChange = () => {
+			proxy.$i18n.locale = state.radio;
+		};
+		return {
+			onRadioChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/formRules/component/formRulesOne.vue b/src/views/pages/formRules/component/formRulesOne.vue
new file mode 100644
index 0000000..ff9e568
--- /dev/null
+++ b/src/views/pages/formRules/component/formRulesOne.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="form-rules-one-container">
+		<el-form :model="form" :rules="rules" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
+			<el-row :gutter="35">
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="姓名" prop="name">
+						<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="邮箱" prop="email">
+						<el-input v-model="form.email" placeholder="请输入用户邮箱" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="登陆账户名" prop="autograph">
+						<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="职务" prop="occupation">
+						<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
+							<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
+							<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
+							<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
+						</el-select>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesFormRulesOne',
+	props: {
+		data: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	setup(props) {
+		const state = reactive({
+			form: { name: '', email: '', autograph: '', occupation: '' },
+			rules: {
+				name: { required: true, message: '请输入姓名', trigger: 'blur' },
+				email: { required: true, message: '请输入用户邮箱', trigger: 'blur' },
+				autograph: { required: true, message: '请输入登陆账户名', trigger: 'blur' },
+				occupation: { required: true, message: '请选择职务', trigger: 'change' },
+			},
+		});
+		// 赋值回显
+		const initForm = () => {
+			state.form = <any>props.data;
+		};
+		// 页面加载时
+		onMounted(() => {
+			initForm();
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/formRules/component/formRulesThree.vue b/src/views/pages/formRules/component/formRulesThree.vue
new file mode 100644
index 0000000..145aed4
--- /dev/null
+++ b/src/views/pages/formRules/component/formRulesThree.vue
@@ -0,0 +1,50 @@
+<template>
+	<div class="form-rules-three-container">
+		<el-form :model="form" :rules="rules" ref="formRulesThreeRef" size="default" label-width="100px" class="mt35">
+			<el-row :gutter="35">
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="创建用户" prop="createUser">
+						<el-input v-model="form.createUser" placeholder="请输入创建用户" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="修改用户" prop="editUser">
+						<el-input v-model="form.editUser" placeholder="请输入修改用户" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="所属用户" prop="user">
+						<el-input v-model="form.user" placeholder="请输入所属用户" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="所属部门" prop="department">
+						<el-input v-model="form.department" placeholder="请输入所属部门" clearable></el-input>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesFormRulesThree',
+	setup() {
+		const state = reactive({
+			form: { createUser: '', editUser: '', user: '', department: '' },
+			rules: {
+				createUser: { required: true, message: '请输入创建用户', trigger: 'blur' },
+				editUser: { required: true, message: '请输入修改用户', trigger: 'blur' },
+				user: { required: true, message: '请输入所属用户', trigger: 'blur' },
+				department: { required: true, message: '请输入所属部门', trigger: 'blur' },
+			},
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/formRules/component/formRulesTwo.vue b/src/views/pages/formRules/component/formRulesTwo.vue
new file mode 100644
index 0000000..fcb0604
--- /dev/null
+++ b/src/views/pages/formRules/component/formRulesTwo.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="form-rules-two-container">
+		<el-form :model="form" :rules="rules" ref="formRulesTwoRef" size="default" label-width="100px" class="mt35">
+			<el-row :gutter="35">
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="手机" prop="phone">
+						<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="性别">
+						<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
+							<el-option label="男" value="1"></el-option>
+							<el-option label="女" value="2"></el-option>
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="登录密码" prop="password">
+						<el-input v-model="form.password" placeholder="请输入登录密码" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="权限角色" prop="auth">
+						<el-input v-model="form.auth" placeholder="请输入权限角色" clearable></el-input>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesFormRulesTwo',
+	setup() {
+		const state = reactive({
+			form: { phone: '', sex: '', password: '', auth: '' },
+			rules: {
+				phone: { required: true, message: '请输入手机', trigger: 'blur' },
+				password: { required: true, message: '请输入登录密码', trigger: 'blur' },
+				auth: { required: true, message: '请输入权限角色', trigger: 'blur' },
+			},
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/formRules/index.vue b/src/views/pages/formRules/index.vue
new file mode 100644
index 0000000..9c24343
--- /dev/null
+++ b/src/views/pages/formRules/index.vue
@@ -0,0 +1,80 @@
+<template>
+	<div class="form-rules-container">
+		<el-card shadow="hover" header="表单组件1"> <FormRulesOne :data="formRulesOneData" ref="pagesFormRulesOneRef" /></el-card>
+		<el-card shadow="hover" header="表单组件2" class="mt15"><FormRulesTwo ref="pagesFormRulesTwoRef" /> </el-card>
+		<el-card shadow="hover" header="表单组件3" class="mt15"> <FormRulesThree ref="pagesFormRulesThreeRef" /></el-card>
+		<el-row class="flex mt15">
+			<div class="flex-margin">
+				<el-button size="default" @click="onResetForm">
+					<SvgIcon name="ele-RefreshRight" />
+					重置表单
+				</el-button>
+				<el-button size="default" type="primary" @click="onSubmitForm">
+					<SvgIcon name="iconfont icon-shuxing" />
+					验证表单
+				</el-button>
+			</div>
+		</el-row>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
+import { ElMessage } from 'element-plus';
+import FormRulesOne from '/@/views/pages/formRules/component/formRulesOne.vue';
+import FormRulesTwo from '/@/views/pages/formRules/component/formRulesTwo.vue';
+import FormRulesThree from '/@/views/pages/formRules/component/formRulesThree.vue';
+
+export default defineComponent({
+	name: 'pagesFormRules',
+	components: {
+		FormRulesOne,
+		FormRulesTwo,
+		FormRulesThree,
+	},
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const state = reactive({
+			formRulesOneData: {
+				name: 'lyt',
+				email: 'lyt123@.com',
+				autograph: 'lyt123456',
+				occupation: '1',
+			},
+		});
+		// 表单组件验证
+		const formRulesValidate = (pageRef: string, sonRef: string) => {
+			return new Promise((resolve) => {
+				proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
+					if (valid) resolve(valid);
+				});
+			});
+		};
+		// 表单组件重置
+		const formRulesResetFields = () => {
+			proxy.$refs.pagesFormRulesOneRef.$refs.formRulesOneRef.resetFields();
+			proxy.$refs.pagesFormRulesTwoRef.$refs.formRulesTwoRef.resetFields();
+			proxy.$refs.pagesFormRulesThreeRef.$refs.formRulesThreeRef.resetFields();
+		};
+		// 验证表单
+		const onSubmitForm = () => {
+			Promise.all([
+				formRulesValidate('pagesFormRulesOneRef', 'formRulesOneRef'),
+				formRulesValidate('pagesFormRulesTwoRef', 'formRulesTwoRef'),
+				formRulesValidate('pagesFormRulesThreeRef', 'formRulesThreeRef'),
+			]).then(() => {
+				ElMessage.success('表单全部验证成功');
+			});
+		};
+		// 重置表单
+		const onResetForm = () => {
+			formRulesResetFields();
+		};
+		return {
+			onSubmitForm,
+			onResetForm,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/iocnfont/index.vue b/src/views/pages/iocnfont/index.vue
new file mode 100644
index 0000000..48a44f9
--- /dev/null
+++ b/src/views/pages/iocnfont/index.vue
@@ -0,0 +1,87 @@
+<template>
+	<div class="iconfont-container">
+		<el-card shadow="hover" :header="`iconfont 字体图标(自动载入)：${sheetsIconList.length}个`">
+			<el-row class="iconfont-row">
+				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
+					<div class="iconfont-warp">
+						<div class="flex-margin">
+							<div class="iconfont-warp-value">
+								<i :class="v" class="iconfont"></i>
+							</div>
+							<div class="iconfont-warp-label mt10">{{ v }}</div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+import initIconfont from '/@/utils/getStyleSheets';
+
+export default defineComponent({
+	name: 'pagesIocnfont',
+	setup() {
+		const state = reactive({
+			sheetsIconList: [],
+		});
+		// 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
+		const initGetStyleSheets = () => {
+			initIconfont.ali().then((res: any) => (state.sheetsIconList = res));
+		};
+		// 页面加载时
+		onMounted(() => {
+			initGetStyleSheets();
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.iconfont-container {
+	.iconfont-row {
+		border-top: 1px solid var(--next-border-color-light);
+		border-left: 1px solid var(--next-border-color-light);
+		.iconfont-warp {
+			text-align: center;
+			border-right: 1px solid var(--next-border-color-light);
+			border-bottom: 1px solid var(--next-border-color-light);
+			height: 120px;
+			overflow: hidden;
+			display: flex;
+			transition: all 0.3s ease;
+			&:hover {
+				box-shadow: 0 2px 12px var(--next-color-dark-hover);
+				cursor: pointer;
+				transition: all 0.3s ease;
+				.iconfont-warp-value {
+					i {
+						color: var(--el-color-primary);
+						transition: all 0.3s ease;
+					}
+				}
+				.iconfont-warp-label {
+					color: var(--el-color-primary);
+					transition: all 0.3s ease;
+				}
+			}
+			.iconfont-warp-value {
+				i {
+					color: #606266;
+					font-size: 32px;
+					transition: all 0.3s ease;
+				}
+			}
+			.iconfont-warp-label {
+				color: #99a9bf;
+				transition: all 0.3s ease;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/lazyImg/index.vue b/src/views/pages/lazyImg/index.vue
new file mode 100644
index 0000000..ad63f8a
--- /dev/null
+++ b/src/views/pages/lazyImg/index.vue
@@ -0,0 +1,194 @@
+<template>
+	<div class="lazy-img-container">
+		<el-card shadow="hover" header="图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）">
+			<div class="flex-warp" v-if="tableData.data.length > 0">
+				<el-row :gutter="15">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
+						<div class="flex-warp-item">
+							<div class="flex-warp-item-box">
+								<div class="item-img" v-loading="v.loading">
+									<img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
+								</div>
+								<div class="item-txt">
+									<div class="item-txt-title">{{ v.title }}</div>
+									<div class="item-txt-other">
+										<div style="width: 100%">
+											<div class="item-txt-msg mb10">
+												<span>评价 {{ v.evaluate }}</span>
+												<span class="ml10">收藏 {{ v.collection }}</span>
+											</div>
+											<div class="item-txt-msg item-txt-price">
+												<span class="font-price">
+													<span>￥</span>
+													<span class="font">{{ v.price }}</span>
+												</span>
+												<span>月销{{ v.monSales }}笔</span>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+			<el-empty v-else description="暂无数据"></el-empty>
+			<template v-if="tableData.data.length > 0">
+				<el-pagination
+					style="text-align: right"
+					background
+					@size-change="onHandleSizeChange"
+					@current-change="onHandleCurrentChange"
+					:page-sizes="[10, 20, 30]"
+					:current-page="tableData.param.pageNum"
+					:page-size="tableData.param.pageSize"
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="tableData.total"
+				>
+				</el-pagination>
+			</template>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import other from '/@/utils/other';
+import { filterList } from './mock';
+
+export default defineComponent({
+	name: 'pagesListAdapt',
+	setup() {
+		const router = useRouter();
+		const state = reactive({
+			tableData: {
+				data: filterList,
+				total: 99,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+				},
+			},
+		});
+		// 当前列表项点击
+		const onTableItemClick = (v: any) => {
+			router.push({
+				path: '/pages/filteringDetails',
+				query: { id: v.id },
+			});
+		};
+		// 分页点击
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页点击
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+		// 页面加载时
+		onMounted(() => {
+			other.lazyImg('[data-lazy-img-list]', state.tableData.data);
+		});
+		return {
+			onTableItemClick,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.lazy-img-container {
+	.flex-warp {
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		margin: 0 -5px;
+		.flex-warp-item {
+			padding: 5px;
+			width: 100%;
+			height: 360px;
+			.flex-warp-item-box {
+				border: 1px solid var(--next-border-color-light);
+				width: 100%;
+				height: 100%;
+				border-radius: 2px;
+				display: flex;
+				flex-direction: column;
+				transition: all 0.3s ease;
+				&:hover {
+					cursor: pointer;
+					border: 1px solid var(--el-color-primary);
+					transition: all 0.3s ease;
+					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
+					.item-txt-title {
+						color: var(--el-color-primary) !important;
+						transition: all 0.3s ease;
+					}
+					.item-img {
+						img {
+							transition: all 0.3s ease;
+							transform: translateZ(0) scale(1.05);
+						}
+					}
+				}
+				.item-img {
+					width: 100%;
+					height: 215px;
+					overflow: hidden;
+					img {
+						transition: all 0.3s ease;
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.item-txt {
+					flex: 1;
+					padding: 15px;
+					display: flex;
+					flex-direction: column;
+					overflow: hidden;
+					.item-txt-title {
+						text-overflow: ellipsis;
+						overflow: hidden;
+						-webkit-line-clamp: 2;
+						-webkit-box-orient: vertical;
+						display: -webkit-box;
+						color: #666666;
+						transition: all 0.3s ease;
+						&:hover {
+							color: var(--el-color-primary);
+							text-decoration: underline;
+							transition: all 0.3s ease;
+						}
+					}
+					.item-txt-other {
+						flex: 1;
+						align-items: flex-end;
+						display: flex;
+						.item-txt-msg {
+							font-size: 12px;
+							color: #8d8d91;
+						}
+						.item-txt-price {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							.font-price {
+								color: #ff5000;
+								.font {
+									font-size: 22px;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/lazyImg/mock.ts b/src/views/pages/lazyImg/mock.ts
new file mode 100644
index 0000000..4eb3d29
--- /dev/null
+++ b/src/views/pages/lazyImg/mock.ts
@@ -0,0 +1,313 @@
+// 列表数据
+export const filterList = [
+	{
+		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
+		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 1,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
+		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 2,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
+		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 3,
+		loading: true,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
+		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 4,
+		loading: true,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
+		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 5,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
+		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 6,
+		loading: true,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
+		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 7,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
+		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 8,
+		loading: true,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
+		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 9,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
+		title: '深圳湾公园一女子落水，三名男子接力及时施救',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/653/w930h523/20210704/d5d2-krwipas6444058.jpg',
+		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 1,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/766/w930h636/20210704/b1ae-krwipas6332914.jpg',
+		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 2,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/2886-krwipas6264821.jpg',
+		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 3,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/767c-krwipas6387862.jpg',
+		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 4,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/111/w1024h687/20210704/1f65-krwipas5871436.jpg',
+		title: '盛夏的那考河湿地公园！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 5,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/657/w930h527/20210704/7eae-krwipas5866609.jpg',
+		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 6,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/760/w930h630/20210703/124e-krwipas5596390.jpg',
+		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 7,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/27/w930h697/20210703/9630-krwipas5514972.jpg',
+		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 8,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/2fe3-krwipas5388050.jpg',
+		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 9,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/724/w930h594/20210703/98b6-krwipas5234060.jpg',
+		title: '深圳湾公园一女子落水，三名男子接力及时施救',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/f765-krwipas5194727.jpg',
+		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 1,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5dde-krwipas4724976.jpg',
+		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 2,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f45e-krwipas4566804.jpg',
+		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 3,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5579-krwipas4551382.jpg',
+		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 4,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/7c75-krwipas4543661.jpg',
+		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 5,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/653/w930h523/20210702/ece2-krwipas4411140.jpg',
+		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 6,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f5c2-krwipas4215211.jpg',
+		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 7,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/720/w930h590/20210701/eabc-krwipas3509204.jpg',
+		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 8,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/797/w930h667/20210701/4667-krwipas3365057.jpg',
+		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 9,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/750/w930h620/20210701/baea-krwipas2976622.jpg',
+		title: '民众前往中共一大纪念馆参观',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210630/617/w850h567/20210630/5c96-krwipas1819108.jpg',
+		title: '延吉灯光秀美轮美奂 市民徜徉璀璨夜景',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+		loading: true,
+	},
+];
diff --git a/src/views/pages/listAdapt/index.vue b/src/views/pages/listAdapt/index.vue
new file mode 100644
index 0000000..15e27bc
--- /dev/null
+++ b/src/views/pages/listAdapt/index.vue
@@ -0,0 +1,209 @@
+<template>
+	<div class="list-adapt-container">
+		<el-card shadow="hover" header="列表自适应演示(改变窗口查看效果)">
+			<div class="flex-warp" v-if="tableData.data.length > 0">
+				<el-row :gutter="15">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
+						<div class="flex-warp-item">
+							<div class="flex-warp-item-box">
+								<div class="item-img">
+									<img :src="v.img" />
+								</div>
+								<div class="item-txt">
+									<div class="item-txt-title">{{ v.title }}</div>
+									<div class="item-txt-other">
+										<div style="width: 100%">
+											<div class="item-txt-msg mb10">
+												<span>评价 {{ v.evaluate }}</span>
+												<span class="ml10">收藏 {{ v.collection }}</span>
+											</div>
+											<div class="item-txt-msg item-txt-price">
+												<span class="font-price">
+													<span>￥</span>
+													<span class="font">{{ v.price }}</span>
+												</span>
+												<span>月销{{ v.monSales }}笔</span>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+			<el-empty v-else description="暂无数据"></el-empty>
+			<template v-if="tableData.data.length > 0">
+				<el-pagination
+					style="text-align: right"
+					background
+					@size-change="onHandleSizeChange"
+					@current-change="onHandleCurrentChange"
+					:page-sizes="[10, 20, 30]"
+					:current-page="tableData.param.pageNum"
+					:page-size="tableData.param.pageSize"
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="tableData.total"
+				>
+				</el-pagination>
+			</template>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import { filterList } from './mock';
+
+// 定义接口来定义对象的类型
+interface ListAdaptRow {
+	img: string;
+	title: string;
+	evaluate: string;
+	collection: string;
+	price: string;
+	monSales: string;
+	id: number;
+}
+interface TableDataState {
+	tableData: {
+		data: Array<ListAdaptRow>;
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+		};
+	};
+}
+
+export default defineComponent({
+	name: 'pagesListAdapt',
+	setup() {
+		const router = useRouter();
+		const state = reactive<TableDataState>({
+			tableData: {
+				data: filterList,
+				total: 99,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+				},
+			},
+		});
+		// 当前列表项点击
+		const onTableItemClick = (v: ListAdaptRow) => {
+			router.push({
+				path: '/pages/filteringDetails',
+				query: { id: v.id },
+			});
+		};
+		// 分页点击
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页点击
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+		return {
+			onTableItemClick,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.flex-warp {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+	margin: 0 -5px;
+	.flex-warp-item {
+		padding: 5px;
+		width: 100%;
+		height: 360px;
+		.flex-warp-item-box {
+			border: 1px solid var(--next-border-color-light);
+			width: 100%;
+			height: 100%;
+			border-radius: 2px;
+			display: flex;
+			flex-direction: column;
+			transition: all 0.3s ease;
+			&:hover {
+				cursor: pointer;
+				border: 1px solid var(--el-color-primary);
+				transition: all 0.3s ease;
+				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
+				.item-txt-title {
+					color: var(--el-color-primary) !important;
+					transition: all 0.3s ease;
+				}
+				.item-img {
+					img {
+						transition: all 0.3s ease;
+						transform: translateZ(0) scale(1.05);
+					}
+				}
+			}
+			.item-img {
+				width: 100%;
+				height: 215px;
+				overflow: hidden;
+				img {
+					transition: all 0.3s ease;
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.item-txt {
+				flex: 1;
+				padding: 15px;
+				display: flex;
+				flex-direction: column;
+				overflow: hidden;
+				.item-txt-title {
+					text-overflow: ellipsis;
+					overflow: hidden;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+					display: -webkit-box;
+					color: #666666;
+					transition: all 0.3s ease;
+					&:hover {
+						color: var(--el-color-primary);
+						text-decoration: underline;
+						transition: all 0.3s ease;
+					}
+				}
+				.item-txt-other {
+					flex: 1;
+					align-items: flex-end;
+					display: flex;
+					.item-txt-msg {
+						font-size: 12px;
+						color: #8d8d91;
+					}
+					.item-txt-price {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						.font-price {
+							color: #ff5000;
+							.font {
+								font-size: 22px;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/listAdapt/mock.ts b/src/views/pages/listAdapt/mock.ts
new file mode 100644
index 0000000..a31e9e3
--- /dev/null
+++ b/src/views/pages/listAdapt/mock.ts
@@ -0,0 +1,93 @@
+// 列表数据
+export const filterList = [
+	{
+		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
+		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 1,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
+		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 2,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
+		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 3,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
+		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 4,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
+		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 5,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
+		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 6,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
+		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 7,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
+		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 8,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
+		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 9,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
+		title: '深圳湾公园一女子落水，三名男子接力及时施救',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+	},
+];
diff --git a/src/views/pages/preview/index.vue b/src/views/pages/preview/index.vue
new file mode 100644
index 0000000..c52baee
--- /dev/null
+++ b/src/views/pages/preview/index.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="preview-container">
+		<el-card shadow="hover" header="element-plus 大图预览">
+			<el-image style="width: 100px; height: 100px; border-radius: 5px" :src="url" :preview-src-list="srcList" title="点击查看大图预览"> </el-image>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesPreview',
+	setup() {
+		const state = reactive({
+			url: 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
+			srcList: [
+				'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
+				'https://img2.baidu.com/it/u=2370931438,70387529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+				'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+			],
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/steps/index.vue b/src/views/pages/steps/index.vue
new file mode 100644
index 0000000..becc196
--- /dev/null
+++ b/src/views/pages/steps/index.vue
@@ -0,0 +1,51 @@
+<template>
+	<div class="steps-container">
+		<el-card shadow="hover" header="element-plus 步骤条">
+			<el-steps :active="stepsActive">
+				<el-step title="第一步">
+					<template #icon>
+						<SvgIcon name="iconfont icon-0_round_solid" :size="20" />
+					</template>
+				</el-step>
+				<el-step title="第二步">
+					<template #icon>
+						<SvgIcon name="iconfont icon-2_round_solid" :size="20" />
+					</template>
+				</el-step>
+				<el-step title="第三步">
+					<template #icon>
+						<SvgIcon name="iconfont icon-3_round_solid" :size="20" />
+					</template>
+				</el-step>
+			</el-steps>
+			<el-result icon="success" title="成功提示" subTitle="请根据提示进行操作" v-if="stepsActive === 1"> </el-result>
+			<el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 2"> </el-result>
+			<el-result icon="error" title="错误提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 3"> </el-result>
+			<el-button @click="onNextSteps" size="default" class="mt15" type="primary">
+				<SvgIcon name="iconfont icon-step" />
+				下一步
+			</el-button>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesSteps',
+	setup() {
+		const state = reactive({
+			stepsActive: 1,
+		});
+		// 下一步点击
+		const onNextSteps = () => {
+			if (state.stepsActive++ > 2) state.stepsActive = 1;
+		};
+		return {
+			onNextSteps,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/tableRules/index.vue b/src/views/pages/tableRules/index.vue
new file mode 100644
index 0000000..2e17cde
--- /dev/null
+++ b/src/views/pages/tableRules/index.vue
@@ -0,0 +1,129 @@
+<template>
+	<el-card shadow="hover" header="表单表格验证">
+		<el-form ref="tableRulesRef" :model="tableData" size="default">
+			<el-table :data="tableData.data" border class="module-table-uncollected">
+				<el-table-column
+					v-for="(item, index) in tableData.header"
+					:key="index"
+					show-overflow-tooltip
+					:prop="item.prop"
+					:width="item.width"
+					:label="item.label"
+				>
+					<template v-slot:header>
+						<span v-if="item.isRequired" class="color-danger">*</span>
+						<span class="pl5">{{ item.label }}</span>
+						<el-tooltip v-if="item.isTooltip" effect="dark" content="这是tooltip" placement="top">
+							<i class="iconfont icon-quanxian" />
+						</el-tooltip>
+					</template>
+					<template v-slot="scope">
+						<el-form-item
+							:prop="`data.${scope.$index}.${item.prop}`"
+							:rules="[{ required: item.isRequired, message: '不能为空', trigger: `${item.type}` == 'input' ? 'blur' : 'change' }]"
+						>
+							<el-select v-if="item.type === 'select'" v-model="scope.row[item.prop]" placeholder="请选择">
+								<el-option v-for="sel in tableData.option" :key="sel.id" :label="sel.label" :value="sel.value" />
+							</el-select>
+							<el-date-picker
+								v-else-if="item.type === 'date'"
+								v-model="scope.row[item.prop]"
+								type="date"
+								placeholder="选择日期"
+								style="width: 100%"
+							/>
+							<el-input v-else-if="item.type === 'input'" v-model="scope.row[item.prop]" placeholder="请输入内容" />
+							<el-input v-else-if="item.type === 'dialog'" v-model="scope.row[item.prop]" readonly placeholder="请输入内容">
+								<template v-slot:suffix>
+									<i class="iconfont icon-shouye_dongtaihui" />
+								</template>
+							</el-input>
+						</el-form-item>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-form>
+		<el-row class="flex mt15">
+			<div class="flex-margin">
+				<el-button size="default" type="success" @click="onValidate">表格验证</el-button>
+				<el-button size="default" type="primary" @click="onAddRow">新增一行</el-button>
+			</div>
+		</el-row>
+	</el-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 定义接口来定义对象的类型
+interface TableHeader {
+	prop: string;
+	width: string | number;
+	label: string;
+	isRequired?: boolean;
+	isTooltip?: boolean;
+	type: string;
+}
+interface TableRulesState {
+	tableData: {
+		data: any[];
+		header: TableHeader[];
+		option: any[];
+	};
+}
+
+export default defineComponent({
+	name: 'pagesTableRules',
+	setup() {
+		const tableRulesRef = ref();
+		const state = reactive<TableRulesState>({
+			tableData: {
+				data: [],
+				header: [
+					{ prop: 'a1', width: '', label: '一级分类', isRequired: true, type: 'select' },
+					{ prop: 'a2', width: '', label: '二级分类', isRequired: true, type: 'select' },
+					{ prop: 'a3', width: '', label: '三级分类', isRequired: true, type: 'select' },
+					{ prop: 'a4', width: '', label: '四级分类', isRequired: true, type: 'date' },
+					{ prop: 'a5', width: '', label: '五级分类', isRequired: true, type: 'input' },
+					{ prop: 'a6', width: '', label: '六级分类', isTooltip: true, type: 'dialog' },
+					{ prop: 'a7', width: '', label: '演示级分类', type: 'input' },
+					{ prop: 'a8', width: '', label: '颜色是分类', type: 'input' },
+				],
+				option: [
+					{ value: '选项1', label: '黄金糕' },
+					{ value: '选项2', label: '双皮奶' },
+					{ value: '选项3', label: '蚵仔煎' },
+				],
+			},
+		});
+		// 表格验证
+		const onValidate = () => {
+			if (state.tableData.data.length <= 0) return ElMessage.warning('请先点击增加一行');
+			tableRulesRef.value.validate((valid: any) => {
+				if (!valid) return ElMessage.warning('表格项必填未填');
+				ElMessage.success('全部验证通过');
+			});
+		};
+		// 新增一行
+		const onAddRow = () => {
+			state.tableData.data.push({
+				a1: '',
+				a2: '',
+				a3: '',
+				a4: '',
+				a5: '',
+				a6: '',
+				a7: '',
+				a8: '',
+			});
+		};
+		return {
+			onValidate,
+			onAddRow,
+			tableRulesRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/tree/index.vue b/src/views/pages/tree/index.vue
new file mode 100644
index 0000000..c079f84
--- /dev/null
+++ b/src/views/pages/tree/index.vue
@@ -0,0 +1,258 @@
+<template>
+	<div class="tree-container">
+		<el-card shadow="hover" header="element plus Tree 树形控件改成表格">
+			<div v-loading="treeLoading">
+				<div class="tree-head">
+					<div class="tree-head-check"><el-checkbox v-model="treeCheckAll" @change="onCheckAllChange"></el-checkbox></div>
+					<div class="tree-head-one">商品 ID</div>
+					<div style="flex: 1; display: flex">
+						<div class="tree-head-two">商品名称</div>
+						<div class="tree-head-three">描述</div>
+					</div>
+				</div>
+				<el-tree :data="treeTableData" show-checkbox node-key="id" ref="treeTable" :props="treeDefaultProps" @check="onCheckTree">
+					<template #default="{ node, data }">
+						<span class="tree-custom-node">
+							<span style="flex: 1">{{ node.label }}</span>
+							<span v-if="data.isShow" style="flex: 1; display: flex">
+								<span type="text" size="default" style="flex: 1">{{ data.label1 }}</span>
+								<span type="text" size="default" style="flex: 1">{{ data.label2 }}</span>
+							</span>
+						</span>
+					</template>
+				</el-tree>
+			</div>
+			<el-button @click="onSelect" class="mt15" size="default" type="primary">
+				<SvgIcon name="iconfont icon-shuxingtu" />
+				选择元素
+			</el-button>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onBeforeMount, getCurrentInstance, defineComponent } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 定义接口来定义对象的类型
+interface TreeDataState {
+	id: number;
+	label: string;
+	label1: string;
+	label2: string;
+	isShow: boolean;
+	children?: TreeDataState[];
+}
+interface TreeSate {
+	treeCheckAll: boolean;
+	treeLoading: boolean;
+	treeTableData: TreeDataState[];
+	treeDefaultProps: {
+		children: string;
+		label: string;
+	};
+	treeSelArr: TreeDataState[];
+	treeLength: number;
+}
+
+export default defineComponent({
+	name: 'pagesTree',
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const state = reactive<TreeSate>({
+			treeCheckAll: false,
+			treeLoading: false,
+			treeTableData: [],
+			treeDefaultProps: {
+				children: 'children',
+				label: 'label',
+			},
+			treeSelArr: [],
+			treeLength: 0,
+		});
+		// 初始化树的长度
+		const initTreeLengh = (arr: TreeDataState[]) => {
+			let count = 0;
+			arr.map((item) => {
+				if (item.children) {
+					count += item.children.length;
+				}
+			});
+			state.treeLength = count + arr.length;
+		};
+		// 全选改变时
+		const onCheckAllChange = () => {
+			if (state.treeCheckAll) {
+				proxy.$refs.treeTable.setCheckedNodes(state.treeTableData);
+			} else {
+				proxy.$refs.treeTable.setCheckedKeys([]);
+			}
+		};
+		// 节点选中状态发生变化时的回调
+		const onCheckTree = () => {
+			state.treeSelArr = [];
+			state.treeSelArr = proxy.$refs.treeTable.getCheckedNodes();
+			state.treeSelArr.length == state.treeLength ? (state.treeCheckAll = true) : (state.treeCheckAll = false);
+		};
+		// 选择元素按钮
+		const onSelect = () => {
+			let treeArr = proxy.$refs.treeTable.getCheckedNodes();
+			if (treeArr.length <= 0) {
+				ElMessage.warning('请选择元素');
+				return;
+			} else {
+				// console.log(proxy.$refs.treeTable.getCheckedNodes());
+			}
+		};
+		// 初始化树模拟数据
+		const getTreeData = () => {
+			state.treeTableData = [
+				{
+					id: 1,
+					label: '12987121',
+					label1: '好滋好味鸡蛋仔',
+					label2: '荷兰优质淡奶，奶香浓而不腻',
+					isShow: true,
+					children: [
+						{
+							id: 11,
+							label: '一级 1-1',
+							label1: '好滋好味鸡蛋仔',
+							label2: '荷兰优质淡奶，奶香浓而不腻',
+							isShow: false,
+						},
+						{
+							id: 12,
+							label: '一级 1-2',
+							label1: '好滋好味鸡蛋仔',
+							label2: '荷兰优质淡奶，奶香浓而不腻',
+							isShow: false,
+						},
+					],
+				},
+				{
+					id: 2,
+					label: '12987122',
+					label1: '好滋好味鸡蛋仔',
+					label2: '荷兰优质淡奶，奶香浓而不腻',
+					isShow: true,
+					children: [
+						{
+							id: 21,
+							label: '二级 2-1',
+							label1: '好滋好味鸡蛋仔',
+							label2: '荷兰优质淡奶，奶香浓而不腻',
+							isShow: false,
+						},
+						{
+							id: 22,
+							label: '二级 2-2',
+							label1: '好滋好味鸡蛋仔',
+							label2: '荷兰优质淡奶，奶香浓而不腻',
+							isShow: false,
+						},
+					],
+				},
+				{
+					id: 3,
+					label: '12987123',
+					label1: '好滋好味鸡蛋仔',
+					label2: '荷兰优质淡奶，奶香浓而不腻',
+					isShow: true,
+					children: [
+						{
+							id: 31,
+							label: '二级 3-1',
+							label1: '好滋好味鸡蛋仔',
+							label2: '荷兰优质淡奶，奶香浓而不腻',
+							isShow: false,
+						},
+						{
+							id: 32,
+							label: '二级 3-2',
+							label1: '好滋好味鸡蛋仔',
+							label2: '荷兰优质淡奶，奶香浓而不腻',
+							isShow: false,
+						},
+						{
+							id: 33,
+							label: '二级 3-3',
+							label1: '好滋好味鸡蛋仔',
+							label2: '荷兰优质淡奶，奶香浓而不腻',
+							isShow: false,
+						},
+					],
+				},
+			];
+			initTreeLengh(state.treeTableData);
+		};
+		// 页面加载前
+		onBeforeMount(() => {
+			getTreeData();
+		});
+		return {
+			getTreeData,
+			onCheckAllChange,
+			onCheckTree,
+			onSelect,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.tree-container {
+	.tree-head {
+		height: 48px;
+		line-height: 48px;
+		border: 1px solid var(--next-border-color-light);
+		border-bottom: none;
+		display: flex;
+		padding-right: 8px;
+		font-weight: bold;
+		color: #909399;
+		.tree-head-check {
+			width: 38px;
+			text-align: right;
+		}
+		.tree-head-one,
+		.tree-head-two,
+		.tree-head-three {
+			flex: 1;
+		}
+		.tree-head-one {
+			padding-left: 8px;
+		}
+	}
+	.el-tree {
+		overflow: hidden;
+		border-bottom: 1px solid var(--next-border-color-light);
+		.tree-custom-node {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding-right: 8px;
+			width: 100%;
+		}
+		&:deep(.el-tree-node) {
+			border: 1px solid var(--next-border-color-light);
+			border-bottom: none;
+			color: #606266;
+			.el-tree-node__content {
+				line-height: 57px !important;
+				height: 57px !important;
+			}
+			.el-tree-node__children {
+				.el-tree-node {
+					border: none;
+				}
+				.el-tree-node__content {
+					border-top: 1px solid var(--next-border-color-light);
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/waterfall/index.vue b/src/views/pages/waterfall/index.vue
new file mode 100644
index 0000000..48b48ea
--- /dev/null
+++ b/src/views/pages/waterfall/index.vue
@@ -0,0 +1,174 @@
+<template>
+	<div class="waterfall-container">
+		<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
+			<div class="waterfall-first">
+				<div class="waterfall-first-item" v-for="v in 30" :key="v" v-waves>
+					<div class="w100 h100 flex">
+						<span class="flex-margin">{{ v }}</span>
+					</div>
+				</div>
+			</div>
+		</el-card>
+		<el-card shadow="hover" header="瀑布屏（布局二）">
+			<div class="waterfall-last">
+				<div class="waterfall-last-item" v-for="v in 30" :key="v" v-waves="'light'">
+					<div class="w100 h100 flex">
+						<span class="flex-margin">{{ v }}</span>
+					</div>
+				</div>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesWaterfall',
+	setup() {
+		const state = reactive({});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.waterfall-container {
+	.waterfall-first {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
+		grid-gap: 0.25em;
+		grid-auto-flow: row dense;
+		grid-auto-rows: 20px;
+		.waterfall-first-item {
+			width: 100%;
+			background: var(--el-color-primary);
+			color: var(--el-color-white);
+			transition: all 0.3s ease;
+			border-radius: 3px;
+			&:nth-of-type(3n + 1) {
+				grid-row: auto / span 5;
+			}
+			&:nth-of-type(3n + 2) {
+				grid-row: auto / span 6;
+			}
+			&:nth-of-type(3n + 3) {
+				grid-row: auto / span 8;
+			}
+			&:hover {
+				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+				transition: all 0.3s ease;
+				cursor: pointer;
+			}
+		}
+	}
+	.waterfall-last {
+		display: grid;
+		grid-gap: 0.25em;
+		grid-auto-flow: row dense;
+		grid-auto-rows: minmax(188px, 20vmin);
+		grid-template-columns: 1fr;
+		.waterfall-last-item {
+			height: 100%;
+			background: var(--el-color-primary);
+			color: var(--el-color-white);
+			transition: all 0.3s ease;
+			border-radius: 3px;
+			&:hover {
+				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+				transition: all 0.3s ease;
+				cursor: pointer;
+			}
+		}
+	}
+	@media (min-width: 576px) {
+		.waterfall-last {
+			grid-template-columns: repeat(7, 1fr);
+			.waterfall-last-item {
+				&:nth-of-type(9n + 9) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 8) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 7) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(9n + 6) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 5) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(9n + 4) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 3) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(9n + 2) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 1) {
+					grid-column: auto / span 2;
+				}
+			}
+		}
+	}
+	@media (min-width: 576px) and (min-width: 1024px) {
+		.waterfall-last {
+			grid-template-columns: repeat(14, 1fr);
+			.waterfall-last-item {
+				&:nth-of-type(15n + 15) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 14) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 13) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(15n + 12) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 11) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 10) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(15n + 9) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 8) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 7) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 6) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 5) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 4) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 3) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 2) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 1) {
+					grid-column: auto / span 2;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/waves/index.vue b/src/views/pages/waves/index.vue
new file mode 100644
index 0000000..405c71a
--- /dev/null
+++ b/src/views/pages/waves/index.vue
@@ -0,0 +1,134 @@
+<template>
+	<div class="preview-container">
+		<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 btn">
+			<el-row class="mb10" style="color: #808080">可选参数 v-waves=" |light|red|orange|purple|green|teal"</el-row>
+			<div class="flex-warp">
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button size="default" v-waves>
+							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
+							默认效果
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="primary" size="default" v-waves="'light'">
+							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
+							light 效果
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="success" size="default" v-waves="'red'">
+							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
+							red 效果
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="info" size="default" v-waves="'orange'">
+							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
+							orange 效果
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="warning" size="default" v-waves="'purple'">
+							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
+							purple 效果
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="danger" size="default" v-waves="'green'">
+							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
+							green 效果
+						</el-button>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<el-button type="primary" size="default" v-waves="'teal'">
+							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
+							teal 效果
+						</el-button>
+					</div>
+				</div>
+			</div>
+		</el-card>
+		<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 div" class="mt15">
+			<div class="waterfall-first">
+				<div class="waterfall-first-item" v-for="v in 12" :key="v" v-waves>
+					<div class="w100 h100 flex">
+						<span class="flex-margin">{{ v }}</span>
+					</div>
+				</div>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesWaves',
+	setup() {
+		const state = reactive({});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.preview-container {
+	.flex-warp {
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		margin: 0 -5px;
+		.flex-warp-item {
+			padding: 5px;
+			.flex-warp-item-box {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+	.waterfall-first {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
+		grid-gap: 0.25em;
+		grid-auto-flow: row dense;
+		grid-auto-rows: 20px;
+		.waterfall-first-item {
+			width: 100%;
+			background: var(--el-color-primary);
+			color: var(--el-color-white);
+			transition: all 0.3s ease;
+			border-radius: 3px;
+			&:nth-of-type(3n + 1) {
+				grid-row: auto / span 5;
+			}
+			&:nth-of-type(3n + 2) {
+				grid-row: auto / span 6;
+			}
+			&:nth-of-type(3n + 3) {
+				grid-row: auto / span 8;
+			}
+			&:hover {
+				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+				transition: all 0.3s ease;
+				cursor: pointer;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/workflow/component/contextmenu/index.vue b/src/views/pages/workflow/component/contextmenu/index.vue
new file mode 100644
index 0000000..f55e06f
--- /dev/null
+++ b/src/views/pages/workflow/component/contextmenu/index.vue
@@ -0,0 +1,107 @@
+<template>
+	<transition name="el-zoom-in-center">
+		<div
+			aria-hidden="true"
+			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
+			role="tooltip"
+			data-popper-placement="bottom"
+			:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
+			:key="Math.random()"
+			v-show="isShow"
+		>
+			<ul class="el-dropdown-menu">
+				<li
+					v-for="(v, k) in dropdownList"
+					class="el-dropdown-menu__item"
+					aria-disabled="false"
+					tabindex="-1"
+					:key="k"
+					@click="onCurrentClick(v.contextMenuClickId)"
+				>
+					<SvgIcon :name="v.icon" />
+					<span>{{ v.txt }}{{ item.type === 'line' ? '线' : '节点' }}</span>
+				</li>
+			</ul>
+			<div class="el-popper__arrow" style="left: 10px"></div>
+		</div>
+	</transition>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted } from 'vue';
+
+export default defineComponent({
+	name: 'pagesWorkflowContextmenu',
+	props: {
+		dropdown: {
+			type: Object,
+		},
+	},
+	setup(props, { emit }) {
+		const state = reactive({
+			isShow: false,
+			dropdownList: [
+				{ contextMenuClickId: 0, txt: '删除', icon: 'ele-Delete' },
+				{ contextMenuClickId: 1, txt: '编辑', icon: 'ele-Edit' },
+			],
+			item: {
+				type: 'node',
+			},
+			conn: {},
+		});
+		// 父级传过来的坐标 x,y 值
+		const dropdowns = computed(() => {
+			return <any>props.dropdown;
+		});
+		// 当前项菜单点击
+		const onCurrentClick = (contextMenuClickId: number) => {
+			emit('current', Object.assign({}, { contextMenuClickId }, state.item), state.conn);
+		};
+		// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
+		const openContextmenu = (item: any, conn = {}) => {
+			state.item = item;
+			state.conn = conn;
+			closeContextmenu();
+			setTimeout(() => {
+				state.isShow = true;
+			}, 10);
+		};
+		// 关闭右键菜单
+		const closeContextmenu = () => {
+			state.isShow = false;
+		};
+		// 监听页面监听进行右键菜单的关闭
+		onMounted(() => {
+			document.body.addEventListener('click', closeContextmenu);
+			document.body.addEventListener('contextmenu', closeContextmenu);
+		});
+		// 页面卸载时，移除右键菜单监听事件
+		onUnmounted(() => {
+			document.body.removeEventListener('click', closeContextmenu);
+			document.body.removeEventListener('contextmenu', closeContextmenu);
+		});
+		return {
+			dropdowns,
+			openContextmenu,
+			closeContextmenu,
+			onCurrentClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.custom-contextmenu {
+	transform-origin: center top;
+	z-index: 2190;
+	position: fixed;
+	.el-dropdown-menu__item {
+		font-size: 12px !important;
+		white-space: nowrap;
+		i {
+			font-size: 12px !important;
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/workflow/component/drawer/index.vue b/src/views/pages/workflow/component/drawer/index.vue
new file mode 100644
index 0000000..74478a2
--- /dev/null
+++ b/src/views/pages/workflow/component/drawer/index.vue
@@ -0,0 +1,73 @@
+<template>
+	<div>
+		<el-drawer :title="`${nodeData.type === 'line' ? '线' : '节点'}操作`" v-model="isOpen" size="320px">
+			<el-scrollbar>
+				<Line v-if="nodeData.type === 'line'" @change="onLineChange" @close="close" ref="lineRef" />
+				<Node v-else @submit="onNodeSubmit" @close="close" ref="nodeRef" />
+			</el-scrollbar>
+		</el-drawer>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref, nextTick } from 'vue';
+import Line from './line.vue';
+import Node from './node.vue';
+
+// 定义接口来定义对象的类型
+interface WorkflowDrawerState {
+	isOpen: boolean;
+	nodeData: {
+		type: string;
+	};
+	jsplumbConn: any;
+}
+
+export default defineComponent({
+	name: 'pagesWorkflowDrawer',
+	components: { Line, Node },
+	setup(props, { emit }) {
+		const lineRef = ref();
+		const nodeRef = ref();
+		const state = reactive<WorkflowDrawerState>({
+			isOpen: false,
+			nodeData: {
+				type: 'node',
+			},
+			jsplumbConn: {},
+		});
+		// 打开抽屉
+		const open = (item: any, conn: any) => {
+			state.isOpen = true;
+			state.jsplumbConn = conn;
+			state.nodeData = item;
+			nextTick(() => {
+				if (item.type === 'line') lineRef.value.getParentData(item);
+				else nodeRef.value.getParentData(item);
+			});
+		};
+		// 关闭
+		const close = () => {
+			state.isOpen = false;
+		};
+		// 线 label 内容改变时
+		const onLineChange = (label: any) => {
+			state.jsplumbConn.label = label;
+			emit('label', state.jsplumbConn);
+		};
+		// 节点内容改变时
+		const onNodeSubmit = (data: object) => {
+			emit('node', data);
+		};
+		return {
+			lineRef,
+			nodeRef,
+			open,
+			close,
+			onLineChange,
+			onNodeSubmit,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/workflow/component/drawer/line.vue b/src/views/pages/workflow/component/drawer/line.vue
new file mode 100644
index 0000000..a19c92a
--- /dev/null
+++ b/src/views/pages/workflow/component/drawer/line.vue
@@ -0,0 +1,62 @@
+<template>
+	<div class="pt15 pr15 pb15 pl15">
+		<el-form :model="line" size="default" label-width="50px">
+			<el-form-item label="来往">
+				<el-input v-model="line.contact" placeholder="来往" clearable disabled></el-input>
+			</el-form-item>
+			<el-form-item label="类型">
+				<el-input v-model="line.type" placeholder="类型" clearable disabled></el-input>
+			</el-form-item>
+			<el-form-item label="label">
+				<el-input v-model="line.label" placeholder="请输入label内容" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<el-button @click="onLineTextReset">
+					<SvgIcon name="ele-RefreshRight" />
+					重置
+				</el-button>
+				<el-button @click="onLineTextChange" type="primary">
+					<SvgIcon name="ele-Check" />
+					保存
+				</el-button>
+			</el-form-item>
+		</el-form>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from 'vue';
+
+// 定义接口来定义对象的类型
+interface WorkflowDrawerLineState {
+	line: any;
+}
+
+export default defineComponent({
+	name: 'pagesWorkflowDrawerLine',
+	setup(props, { emit }) {
+		const state = reactive<WorkflowDrawerLineState>({
+			line: {},
+		});
+		// 获取父组件数据
+		const getParentData = (data: object) => {
+			state.line = data;
+		};
+		// 重置
+		const onLineTextReset = () => {
+			state.line.label = '';
+		};
+		// 保存
+		const onLineTextChange = () => {
+			emit('change', state.line.label);
+			emit('close');
+		};
+		return {
+			getParentData,
+			onLineTextReset,
+			onLineTextChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/workflow/component/drawer/node.vue b/src/views/pages/workflow/component/drawer/node.vue
new file mode 100644
index 0000000..8270d2d
--- /dev/null
+++ b/src/views/pages/workflow/component/drawer/node.vue
@@ -0,0 +1,272 @@
+<template>
+	<div class="workflow-drawer-node">
+		<el-tabs type="border-card" v-model="tabsActive">
+			<!-- 节点编辑 -->
+			<el-tab-pane label="节点编辑" name="1">
+				<el-scrollbar>
+					<el-form :model="node" :rules="nodeRules" ref="nodeFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
+						<el-form-item label="数据id" prop="id">
+							<el-input v-model="node.id" placeholder="请输入数据id" clearable disabled></el-input>
+						</el-form-item>
+						<el-form-item label="节点id" prop="nodeId">
+							<el-input v-model="node.nodeId" placeholder="请输入节点id" clearable disabled></el-input>
+						</el-form-item>
+						<el-form-item label="类型" prop="type">
+							<el-input v-model="node.type" placeholder="请输入类型" clearable disabled></el-input>
+						</el-form-item>
+						<el-form-item label="left坐标" prop="left">
+							<el-input v-model="node.left" placeholder="请输入left坐标" clearable disabled></el-input>
+						</el-form-item>
+						<el-form-item label="top坐标" prop="top">
+							<el-input v-model="node.top" placeholder="请输入top坐标" clearable disabled></el-input>
+						</el-form-item>
+						<el-form-item label="icon图标" prop="icon">
+							<el-input v-model="node.icon" placeholder="请输入icon图标" clearable></el-input>
+						</el-form-item>
+						<el-form-item label="名称" prop="name">
+							<el-input v-model="node.name" placeholder="请输入名称" clearable></el-input>
+						</el-form-item>
+						<el-form-item>
+							<el-button class="mb15" @click="onNodeRefresh">
+								<SvgIcon name="ele-RefreshRight" />
+								重置
+							</el-button>
+							<el-button type="primary" class="mb15" @click="onNodeSubmit">
+								<SvgIcon name="ele-Check" />
+								保存
+							</el-button>
+						</el-form-item>
+					</el-form>
+				</el-scrollbar>
+			</el-tab-pane>
+
+			<!-- 扩展表单 -->
+			<el-tab-pane label="扩展表单" name="2">
+				<el-scrollbar>
+					<el-form :model="form" ref="extendFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
+						<el-form-item
+							:label="val.label"
+							:prop="val.prop"
+							v-for="(val, key) in node.from"
+							:key="key"
+							:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: 'blur' }]"
+						>
+							<el-input
+								v-model="form[val.prop]"
+								:placeholder="val.placeholder"
+								clearable
+								v-if="val.type === 'input'"
+								:disabled="val.disabled"
+							></el-input>
+							<el-select v-model="form[val.prop]" placeholder="请选择" v-if="val.type === 'select'" clearable :disabled="val.disabled">
+								<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+							</el-select>
+							<el-checkbox-group v-model="form[val.prop]" v-if="val.type === 'checkbox'" :disabled="val.disabled">
+								<el-checkbox label="美食推荐" name="type"></el-checkbox>
+								<el-checkbox label="统计分析" name="type"></el-checkbox>
+							</el-checkbox-group>
+						</el-form-item>
+						<el-form-item>
+							<el-button class="mb15" @click="onExtendRefresh">
+								<SvgIcon name="ele-RefreshRight" />
+								重置
+							</el-button>
+							<el-button type="primary" class="mb15" @click="onExtendSubmit" :loading="loading.extend">
+								<SvgIcon name="ele-Check" />
+								保存
+							</el-button>
+						</el-form-item>
+					</el-form>
+				</el-scrollbar>
+			</el-tab-pane>
+
+			<!-- 图表可视化 -->
+			<el-tab-pane label="图表可视化" name="3">
+				<el-scrollbar>
+					<div class="flex-content-right">
+						<div style="height: 200px; width: 320px" ref="chartsMonitorRef"></div>
+					</div>
+				</el-scrollbar>
+			</el-tab-pane>
+		</el-tabs>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref, nextTick, getCurrentInstance } from 'vue';
+import { ElMessage } from 'element-plus';
+import * as echarts from 'echarts';
+
+// 定义接口来定义对象的类型
+interface WorkflowDrawerNodeState {
+	node: { [key: string]: any };
+	nodeRules: any;
+	form: any;
+	tabsActive: string;
+	loading: {
+		extend: boolean;
+	};
+}
+
+export default defineComponent({
+	name: 'pagesWorkflowDrawerNode',
+	setup(props, { emit }) {
+		const { proxy } = <any>getCurrentInstance();
+		const nodeFormRef = ref();
+		const extendFormRef = ref();
+		const chartsMonitorRef = ref();
+		const state = reactive<WorkflowDrawerNodeState>({
+			node: {},
+			nodeRules: {
+				id: [{ required: true, message: '请输入数据id', trigger: 'blur' }],
+				nodeId: [{ required: true, message: '请输入节点id', trigger: 'blur' }],
+				type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
+				left: [{ required: true, message: '请输入left坐标', trigger: 'blur' }],
+				top: [{ required: true, message: '请输入top坐标', trigger: 'blur' }],
+				icon: [{ required: true, message: '请输入icon图标', trigger: 'blur' }],
+				name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+			},
+			form: {
+				module: [],
+			},
+			tabsActive: '1',
+			loading: {
+				extend: false,
+			},
+		});
+		// 获取父组件数据
+		const getParentData = (data: object) => {
+			state.tabsActive = '1';
+			state.node = data;
+			initChartsMonitor();
+		};
+		// 节点编辑-重置
+		const onNodeRefresh = () => {
+			state.node.icon = '';
+			state.node.name = '';
+		};
+		// 节点编辑-保存
+		const onNodeSubmit = () => {
+			nodeFormRef.value.validate((valid: boolean) => {
+				if (valid) {
+					emit('submit', state.node);
+					emit('close');
+				} else {
+					return false;
+				}
+			});
+		};
+		// 扩展表单-重置
+		const onExtendRefresh = () => {
+			extendFormRef.value.resetFields();
+		};
+		// 扩展表单-保存
+		const onExtendSubmit = () => {
+			extendFormRef.value.validate((valid: boolean) => {
+				if (valid) {
+					state.loading.extend = true;
+					setTimeout(() => {
+						state.loading.extend = false;
+						ElMessage.success('保存成功');
+						emit('close');
+					}, 1000);
+				} else {
+					return false;
+				}
+			});
+		};
+		// 图表可视化-初始化
+		const initChartsMonitor = () => {
+			const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
+			const numsOne = [];
+			const numsTwo = [];
+			for (let i = 0; i < 7; i++) {
+				numsOne.push(`${Math.floor(Math.random() * 52 + 10)}:${Math.floor(Math.random() * 52 + 1)}`);
+				numsTwo.push(Math.floor(Math.random() * 52 + 1));
+			}
+			const option = {
+				grid: {
+					top: 50,
+					right: 30,
+					bottom: 30,
+					left: 50,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				xAxis: {
+					type: 'category',
+					boundaryGap: false,
+					data: numsOne,
+				},
+				yAxis: {
+					type: 'value',
+				},
+				series: [
+					{
+						itemStyle: {
+							color: '#289df5',
+							borderColor: '#289df5',
+							areaStyle: {
+								type: 'default',
+								opacity: 0.1,
+							},
+						},
+						data: numsTwo,
+						type: 'line',
+						areaStyle: {},
+					},
+				],
+			};
+			myChart.setOption(option);
+			nextTick(() => {
+				myChart.resize();
+			});
+		};
+		return {
+			nodeFormRef,
+			extendFormRef,
+			chartsMonitorRef,
+			getParentData,
+			onNodeRefresh,
+			onNodeSubmit,
+			onExtendRefresh,
+			onExtendSubmit,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.workflow-drawer-node {
+	:deep {
+		.el-tabs {
+			box-shadow: unset;
+			border: unset;
+			.el-tabs__nav {
+				display: flex;
+				width: 100%;
+				.el-tabs__item {
+					flex: 1;
+					padding: unset;
+					text-align: center;
+					&:first-of-type.is-active {
+						border-left-color: transparent;
+					}
+					&:last-of-type.is-active {
+						border-right-color: transparent;
+					}
+				}
+			}
+			.el-tabs__content {
+				padding: 0;
+				height: calc(100vh - 90px);
+				.el-tab-pane {
+					height: 100%;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/workflow/component/tool/help.vue b/src/views/pages/workflow/component/tool/help.vue
new file mode 100644
index 0000000..09198b5
--- /dev/null
+++ b/src/views/pages/workflow/component/tool/help.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="workflow-tool-help">
+		<el-dialog v-model="isShow" width="769px">
+			<template #header>
+				<div v-drag="['.workflow-tool-help .el-dialog', '.workflow-tool-help .el-dialog__header']">使用帮助</div>
+			</template>
+			<div>1、拖入：鼠标移入左侧导航中，鼠标形状改变时拖动到右侧网格状的视图中。</div>
+			<div class="mt10">2、移动：鼠标移入到视图中的某个节点元素，鼠标形状改变时拖动改变位置。</div>
+			<div class="mt10">3、连线：鼠标移入到视图中的某个节点元素的icon(图标)，鼠标形状改变（变成"+"），按下鼠标左键进行拖线连接。</div>
+			<div class="mt10">4、节点：鼠标移入到视图中的某个节点元素，点击鼠标右键可进行删除、编辑节点。</div>
+			<div class="mt10 mb10">5、线条：鼠标移入到视图中的某个线条，线条颜色改变时，点击鼠标右键可进行删除、编辑线条。</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from 'vue';
+export default defineComponent({
+	name: 'pagesWorkflowToolHelp',
+	setup() {
+		const state = reactive({
+			isShow: false,
+		});
+		// 打开弹窗
+		const open = () => {
+			state.isShow = true;
+		};
+		// 关闭弹窗
+		const close = () => {
+			state.isShow = false;
+		};
+		return {
+			open,
+			close,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/pages/workflow/component/tool/index.vue b/src/views/pages/workflow/component/tool/index.vue
new file mode 100644
index 0000000..2cb9940
--- /dev/null
+++ b/src/views/pages/workflow/component/tool/index.vue
@@ -0,0 +1,79 @@
+<template>
+	<div class="workflow-tool">
+		<div class="pl15">{{ setToolTitle }}</div>
+		<div class="workflow-tool-right">
+			<div class="workflow-tool-icon" v-for="(v, k) in toolList" :key="k" :title="v.title" @click="onToolClick(v.fnName)">
+				<SvgIcon :name="v.icon" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, reactive, toRefs } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+
+export default defineComponent({
+	name: 'pagesWorkflowTool',
+	setup(props, { emit }) {
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const state = reactive({
+			toolList: [
+				{ icon: 'ele-Help', title: '帮助', fnName: 'help' },
+				{ icon: 'ele-Download', title: '下载', fnName: 'download' },
+				{ icon: 'ele-Check', title: '提交', fnName: 'submit' },
+				{ icon: 'ele-DocumentCopy', title: '复制', fnName: 'copy' },
+				{ icon: 'ele-Delete', title: '删除', fnName: 'del' },
+				{ icon: 'ele-FullScreen', title: '全屏', fnName: 'fullscreen' },
+			],
+		});
+		// 设置 tool 标题
+		const setToolTitle = computed(() => {
+			let { globalTitle } = themeConfig.value;
+			return `${globalTitle}工作流`;
+		});
+		// 顶部工具栏
+		const onToolClick = (fnName: string) => {
+			emit('tool', fnName);
+		};
+		return {
+			setToolTitle,
+			onToolClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.workflow-tool {
+	height: 35px;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
+	color: var(--el-text-color-primary);
+	.workflow-tool-right {
+		flex: 1;
+		display: flex;
+		justify-content: flex-end;
+	}
+	&-icon {
+		padding: 0 10px;
+		cursor: pointer;
+		color: var(--next-bg-topBarColor);
+		height: 35px;
+		line-height: 35px;
+		display: flex;
+		align-items: center;
+		&:hover {
+			background: rgba(0, 0, 0, 0.04);
+			i {
+				display: inline-block;
+				animation: logoAnimation 0.3s ease-in-out;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/workflow/index.vue b/src/views/pages/workflow/index.vue
new file mode 100644
index 0000000..8a2a687
--- /dev/null
+++ b/src/views/pages/workflow/index.vue
@@ -0,0 +1,693 @@
+<template>
+	<div class="workflow-container">
+		<div class="workflow-mask" v-if="isShow"></div>
+		<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+			<div class="workflow">
+				<!-- 顶部工具栏 -->
+				<Tool @tool="onToolClick" />
+
+				<!-- 左侧导航区 -->
+				<div class="workflow-content">
+					<div class="workflow-left">
+						<el-scrollbar>
+							<div
+								ref="leftNavRefs"
+								v-for="(val, key) in leftNavList"
+								:key="val.id"
+								:style="{ height: val.isOpen ? 'auto' : '50px', overflow: 'hidden' }"
+								class="workflow-left-id"
+							>
+								<div class="workflow-left-title" @click="onTitleClick(val)">
+									<span>{{ val.title }}</span>
+									<SvgIcon :name="val.isOpen ? 'ele-ArrowDown' : 'ele-ArrowRight'" />
+								</div>
+								<div class="workflow-left-item" v-for="(v, k) in val.children" :key="k" :data-name="v.name" :data-icon="v.icon" :data-id="v.id">
+									<div class="workflow-left-item-icon">
+										<SvgIcon :name="v.icon" class="workflow-icon-drag" />
+										<div class="font10 pl5 name">{{ v.name }}</div>
+									</div>
+								</div>
+							</div>
+						</el-scrollbar>
+					</div>
+
+					<!-- 右侧绘画区 -->
+					<div class="workflow-right" ref="workflowRightRef">
+						<div
+							v-for="(v, k) in jsplumbData.nodeList"
+							:key="v.nodeId"
+							:id="v.nodeId"
+							:data-node-id="v.nodeId"
+							:class="v.class"
+							:style="{ left: v.left, top: v.top }"
+							@click="onItemCloneClick(k)"
+							@contextmenu.prevent="onContextmenu(v, k, $event)"
+						>
+							<div class="workflow-right-box" :class="{ 'workflow-right-active': jsPlumbNodeIndex === k }">
+								<div class="workflow-left-item-icon">
+									<SvgIcon :name="v.icon" class="workflow-icon-drag" />
+									<div class="font10 pl5 name">{{ v.name }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- 节点右键菜单 -->
+		<Contextmenu :dropdown="dropdownNode" ref="contextmenuNodeRef" @current="onCurrentNodeClick" />
+		<!-- 线右键菜单 -->
+		<Contextmenu :dropdown="dropdownLine" ref="contextmenuLineRef" @current="onCurrentLineClick" />
+		<!-- 抽屉表单、线 -->
+		<Drawer ref="drawerRef" @label="setLineLabel" @node="setNodeContent" />
+
+		<!-- 顶部工具栏-帮助弹窗 -->
+		<Help ref="helpRef" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed, onMounted, onUnmounted, nextTick, ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { jsPlumb } from 'jsplumb';
+import Sortable from 'sortablejs';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import Tool from './component/tool/index.vue';
+import Help from './component/tool/help.vue';
+import Contextmenu from './component/contextmenu/index.vue';
+import Drawer from './component/drawer/index.vue';
+import commonFunction from '/@/utils/commonFunction';
+import { leftNavList } from './js/mock';
+import { jsplumbDefaults, jsplumbMakeSource, jsplumbMakeTarget, jsplumbConnect } from './js/config';
+
+// 定义接口来定义对象的类型
+interface NodeListState {
+	id: string | number;
+	nodeId: string | undefined;
+	class: HTMLElement | string;
+	left: number | string;
+	top: number | string;
+	icon: string;
+	name: string;
+}
+interface LineListState {
+	sourceId: string;
+	targetId: string;
+	label: string;
+}
+interface XyState {
+	x: string | number;
+	y: string | number;
+}
+interface WorkflowState {
+	workflowRightRef: HTMLDivElement | null;
+	leftNavRefs: any[];
+	leftNavList: any[];
+	dropdownNode: XyState;
+	dropdownLine: XyState;
+	isShow: boolean;
+	jsPlumb: any;
+	jsPlumbNodeIndex: null | number;
+	jsplumbDefaults: any;
+	jsplumbMakeSource: any;
+	jsplumbMakeTarget: any;
+	jsplumbConnect: any;
+	jsplumbData: {
+		nodeList: Array<NodeListState>;
+		lineList: Array<LineListState>;
+	};
+}
+
+export default defineComponent({
+	name: 'pagesWorkflow',
+	components: { Tool, Contextmenu, Drawer, Help },
+	setup() {
+		const contextmenuNodeRef = ref();
+		const contextmenuLineRef = ref();
+		const drawerRef = ref();
+		const helpRef = ref();
+		const stores = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(stores);
+		const { copyText } = commonFunction();
+		const state = reactive<WorkflowState>({
+			workflowRightRef: null as HTMLDivElement | null,
+			leftNavRefs: [],
+			leftNavList: [],
+			dropdownNode: { x: '', y: '' },
+			dropdownLine: { x: '', y: '' },
+			isShow: false,
+			jsPlumb: null,
+			jsPlumbNodeIndex: null,
+			jsplumbDefaults,
+			jsplumbMakeSource,
+			jsplumbMakeTarget,
+			jsplumbConnect,
+			jsplumbData: {
+				nodeList: [],
+				lineList: [],
+			},
+		});
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		// 设置 宽度小于 768，不支持操
+		const setClientWidth = () => {
+			const clientWidth = document.body.clientWidth;
+			clientWidth < 768 ? (state.isShow = true) : (state.isShow = false);
+		};
+		// 左侧导航-数据初始化
+		const initLeftNavList = () => {
+			state.leftNavList = leftNavList;
+			state.jsplumbData = {
+				nodeList: [
+					{ nodeId: 'huej738hbji', left: '148px', top: '93px', class: 'workflow-right-clone', icon: 'iconfont icon-gongju', name: '引擎', id: '11' },
+					{
+						nodeId: '52kcszzyxrd',
+						left: '458px',
+						top: '203px',
+						class: 'workflow-right-clone',
+						icon: 'iconfont icon-shouye_dongtaihui',
+						name: '模版',
+						id: '12',
+					},
+					{
+						nodeId: 'nltskl6k4me',
+						left: '164px',
+						top: '350px',
+						class: 'workflow-right-clone',
+						icon: 'iconfont icon-zhongduancanshuchaxun',
+						name: '名称',
+						id: '13',
+					},
+				],
+				lineList: [
+					{ sourceId: 'huej738hbji', targetId: '52kcszzyxrd', label: '传送' },
+					{ sourceId: 'huej738hbji', targetId: 'nltskl6k4me', label: '' },
+				],
+			};
+		};
+		// 左侧导航-初始化拖动
+		const initSortable = () => {
+			state.leftNavRefs.forEach((v) => {
+				Sortable.create(v as HTMLDivElement, {
+					group: {
+						name: 'vue-next-admin-1',
+						pull: 'clone',
+						put: false,
+					},
+					animation: 0,
+					sort: false,
+					draggable: '.workflow-left-item',
+					forceFallback: true,
+					onEnd: function (evt: any) {
+						const { name, icon, id } = evt.clone.dataset;
+						const { layerX, layerY, clientX, clientY } = evt.originalEvent;
+						const el = state.workflowRightRef!;
+						const { x, y, width, height } = el.getBoundingClientRect();
+						if (clientX < x || clientX > width + x || clientY < y || y > y + height) {
+							ElMessage.warning('请把节点拖入到画布中');
+						} else {
+							// 节点id（唯一）
+							const nodeId = Math.random().toString(36).substr(2, 12);
+							// 处理节点数据
+							const node = {
+								nodeId,
+								left: `${layerX - 40}px`,
+								top: `${layerY - 15}px`,
+								class: 'workflow-right-clone',
+								name,
+								icon,
+								id,
+							};
+							// 右侧视图内容数组
+							state.jsplumbData.nodeList.push(node);
+							// 元素加载完毕时
+							nextTick(() => {
+								// 整个节点作为source或者target
+								state.jsPlumb.makeSource(nodeId, state.jsplumbMakeSource);
+								// // 整个节点作为source或者target
+								state.jsPlumb.makeTarget(nodeId, state.jsplumbMakeTarget, jsplumbConnect);
+								// 设置节点可以拖拽（此处为id值，非class）
+								state.jsPlumb.draggable(nodeId, {
+									containment: 'parent',
+									stop: (el: any) => {
+										state.jsplumbData.nodeList.forEach((v) => {
+											if (v.nodeId === el.el.id) {
+												// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
+												v.left = `${el.pos[0]}px`;
+												v.top = `${el.pos[1]}px`;
+											}
+										});
+									},
+								});
+							});
+						}
+					},
+				});
+			});
+		};
+		// 初始化 jsPlumb
+		const initJsPlumb = () => {
+			(<any>jsPlumb).ready(() => {
+				state.jsPlumb = (<any>jsPlumb).getInstance({
+					detachable: false,
+					Container: 'workflow-right',
+				});
+				state.jsPlumb.fire('jsPlumbDemoLoaded', state.jsPlumb);
+				// 导入默认配置
+				state.jsPlumb.importDefaults(state.jsplumbDefaults);
+				// 会使整个jsPlumb立即重绘。
+				state.jsPlumb.setSuspendDrawing(false, true);
+				// 初始化节点、线的链接
+				initJsPlumbConnection();
+				// 点击线弹出右键菜单
+				state.jsPlumb.bind('contextmenu', (conn: any, originalEvent: MouseEvent) => {
+					originalEvent.preventDefault();
+					const { sourceId, targetId } = conn;
+					const { clientX, clientY } = originalEvent;
+					state.dropdownLine.x = clientX;
+					state.dropdownLine.y = clientY;
+					const v: any = state.jsplumbData.nodeList.find((v) => v.nodeId === targetId);
+					const line: any = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
+					v.type = 'line';
+					v.label = line.label;
+					contextmenuLineRef.value.openContextmenu(v, conn);
+				});
+				// 连线之前
+				state.jsPlumb.bind('beforeDrop', (conn: any) => {
+					const { sourceId, targetId } = conn;
+					const item = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
+					if (item) {
+						ElMessage.warning('关系已存在，不可重复连接');
+						return false;
+					} else {
+						return true;
+					}
+				});
+				// 连线时
+				state.jsPlumb.bind('connection', (conn: any) => {
+					const { sourceId, targetId } = conn;
+					state.jsplumbData.lineList.push({
+						sourceId,
+						targetId,
+						label: '',
+					});
+				});
+				// 删除连线时回调函数
+				state.jsPlumb.bind('connectionDetached', (conn: any) => {
+					const { sourceId, targetId } = conn;
+					state.jsplumbData.lineList = state.jsplumbData.lineList.filter((line) => {
+						if (line.sourceId == sourceId && line.targetId == targetId) {
+							return false;
+						}
+						return true;
+					});
+				});
+			});
+		};
+		// 初始化节点、线的链接
+		const initJsPlumbConnection = () => {
+			// 节点
+			state.jsplumbData.nodeList.forEach((v) => {
+				// 整个节点作为source或者target
+				state.jsPlumb.makeSource(v.nodeId, state.jsplumbMakeSource);
+				// 整个节点作为source或者target
+				state.jsPlumb.makeTarget(v.nodeId, state.jsplumbMakeTarget, jsplumbConnect);
+				// 设置节点可以拖拽（此处为id值，非class）
+				state.jsPlumb.draggable(v.nodeId, {
+					containment: 'parent',
+					stop: (el: any) => {
+						state.jsplumbData.nodeList.forEach((v) => {
+							if (v.nodeId === el.el.id) {
+								// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
+								v.left = `${el.pos[0]}px`;
+								v.top = `${el.pos[1]}px`;
+							}
+						});
+					},
+				});
+			});
+			// 线
+			state.jsplumbData.lineList.forEach((v) => {
+				state.jsPlumb.connect(
+					{
+						source: v.sourceId,
+						target: v.targetId,
+						label: v.label,
+					},
+					state.jsplumbConnect
+				);
+			});
+		};
+		// 左侧导航-菜单标题点击
+		const onTitleClick = (val: any) => {
+			val.isOpen = !val.isOpen;
+		};
+		// 右侧内容区-当前项点击
+		const onItemCloneClick = (k: number) => {
+			state.jsPlumbNodeIndex = k;
+		};
+		// 右侧内容区-当前项右键菜单点击
+		const onContextmenu = (v: any, k: number, e: MouseEvent) => {
+			state.jsPlumbNodeIndex = k;
+			const { clientX, clientY } = e;
+			state.dropdownNode.x = clientX;
+			state.dropdownNode.y = clientY;
+			v.type = 'node';
+			v.label = '';
+			let item: any = {};
+			state.leftNavList.forEach((l) => {
+				if (l.children) if (l.children.find((c: any) => c.id === v.id)) item = l.children.find((c: any) => c.id === v.id);
+			});
+			v.from = item.form;
+			contextmenuNodeRef.value.openContextmenu(v);
+		};
+		// 右侧内容区-当前项右键菜单点击回调(节点)
+		const onCurrentNodeClick = (item: any) => {
+			const { contextMenuClickId, nodeId } = item;
+			if (contextMenuClickId === 0) {
+				const nodeIndex = state.jsplumbData.nodeList.findIndex((item) => item.nodeId === nodeId);
+				state.jsplumbData.nodeList.splice(nodeIndex, 1);
+				state.jsPlumb.removeAllEndpoints(nodeId);
+				state.jsPlumbNodeIndex = null;
+			} else if (contextMenuClickId === 1) {
+				drawerRef.value.open(item);
+			}
+		};
+		// 右侧内容区-当前项右键菜单点击回调(线)
+		const onCurrentLineClick = (item: any, conn: any) => {
+			const { contextMenuClickId } = item;
+			const { endpoints } = conn;
+			const intercourse: any = [];
+			endpoints.forEach((v: any) => {
+				intercourse.push({
+					id: v.element.id,
+					innerText: v.element.innerText,
+				});
+			});
+			item.contact = `${intercourse[0].innerText}(${intercourse[0].id}) => ${intercourse[1].innerText}(${intercourse[1].id})`;
+			if (contextMenuClickId === 0) state.jsPlumb.deleteConnection(conn);
+			else if (contextMenuClickId === 1) drawerRef.value.open(item, conn);
+		};
+		// 设置线的 label
+		const setLineLabel = (obj: any) => {
+			const { sourceId, targetId, label } = obj;
+			const conn = state.jsPlumb.getConnections({
+				source: sourceId,
+				target: targetId,
+			})[0];
+			conn.setLabel(label);
+			if (!label || label === '') {
+				conn.addClass('workflow-right-empty-label');
+			} else {
+				conn.removeClass('workflow-right-empty-label');
+				conn.addClass('workflow-right-label');
+			}
+			state.jsplumbData.lineList.forEach((v) => {
+				if (v.sourceId === sourceId && v.targetId === targetId) v.label = label;
+			});
+		};
+		// 设置节点内容
+		const setNodeContent = (obj: any) => {
+			const { nodeId, name, icon } = obj;
+			// 设置节点 name 与 icon
+			state.jsplumbData.nodeList.forEach((v) => {
+				if (v.nodeId === nodeId) {
+					v.name = name;
+					v.icon = icon;
+				}
+			});
+			// 重绘
+			nextTick(() => {
+				state.jsPlumb.setSuspendDrawing(false, true);
+			});
+		};
+		// 顶部工具栏-当前项点击
+		const onToolClick = (fnName: String) => {
+			switch (fnName) {
+				case 'help':
+					onToolHelp();
+					break;
+				case 'download':
+					onToolDownload();
+					break;
+				case 'submit':
+					onToolSubmit();
+					break;
+				case 'copy':
+					onToolCopy();
+					break;
+				case 'del':
+					onToolDel();
+					break;
+				case 'fullscreen':
+					onToolFullscreen();
+					break;
+			}
+		};
+		// 顶部工具栏-帮助
+		const onToolHelp = () => {
+			nextTick(() => {
+				helpRef.value.open();
+			});
+		};
+		// 顶部工具栏-下载
+		const onToolDownload = () => {
+			const { globalTitle } = themeConfig.value;
+			const href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(state.jsplumbData, null, '\t'));
+			const aLink = document.createElement('a');
+			aLink.setAttribute('href', href);
+			aLink.setAttribute('download', `${globalTitle}工作流.json`);
+			aLink.click();
+			aLink.remove();
+			ElMessage.success('下载成功');
+		};
+		// 顶部工具栏-提交
+		const onToolSubmit = () => {
+			// console.log(state.jsplumbData);
+			ElMessage.success('数据提交成功');
+		};
+		// 顶部工具栏-复制
+		const onToolCopy = () => {
+			copyText(JSON.stringify(state.jsplumbData));
+		};
+		// 顶部工具栏-删除
+		const onToolDel = () => {
+			ElMessageBox.confirm('此操作将清空画布，是否继续？', '提示', {
+				confirmButtonText: '清空',
+				cancelButtonText: '取消',
+			})
+				.then(() => {
+					state.jsplumbData.nodeList.forEach((v) => {
+						state.jsPlumb.removeAllEndpoints(v.nodeId);
+					});
+					nextTick(() => {
+						state.jsplumbData = {
+							nodeList: [],
+							lineList: [],
+						};
+						ElMessage.success('清空画布成功');
+					});
+				})
+				.catch(() => {});
+		};
+		// 顶部工具栏-全屏
+		const onToolFullscreen = () => {
+			stores.setCurrenFullscreen(true);
+		};
+		// 页面加载时
+		onMounted(async () => {
+			await initLeftNavList();
+			initSortable();
+			initJsPlumb();
+			setClientWidth();
+			window.addEventListener('resize', setClientWidth);
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			window.removeEventListener('resize', setClientWidth);
+		});
+		return {
+			setViewHeight,
+			setClientWidth,
+			setLineLabel,
+			setNodeContent,
+			onTitleClick,
+			onItemCloneClick,
+			onContextmenu,
+			onCurrentNodeClick,
+			onCurrentLineClick,
+			contextmenuNodeRef,
+			contextmenuLineRef,
+			drawerRef,
+			helpRef,
+			onToolClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.workflow-container {
+	position: relative;
+	.workflow {
+		display: flex;
+		height: 100%;
+		width: 100%;
+		flex-direction: column;
+		.workflow-content {
+			display: flex;
+			height: calc(100% - 35px);
+			.workflow-left {
+				width: 220px;
+				height: 100%;
+				border-right: 1px solid var(--el-border-color-light, #ebeef5);
+				:deep(.el-collapse-item__content) {
+					padding-bottom: 0;
+				}
+				.workflow-left-title {
+					height: 50px;
+					display: flex;
+					align-items: center;
+					padding: 0 10px;
+					border-top: 1px solid var(--el-border-color-light, #ebeef5);
+					color: var(--el-text-color-primary);
+					cursor: default;
+					span {
+						flex: 1;
+					}
+				}
+				.workflow-left-item {
+					display: inline-block;
+					width: calc(50% - 15px);
+					position: relative;
+					cursor: move;
+					margin: 0 0 10px 10px;
+					.workflow-left-item-icon {
+						height: 35px;
+						display: flex;
+						align-items: center;
+						transition: all 0.3s ease;
+						padding: 5px 10px;
+						border: 1px dashed transparent;
+						background: var(--next-bg-color);
+						border-radius: 3px;
+						i,
+						.name {
+							color: var(--el-text-color-secondary);
+							transition: all 0.3s ease;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							overflow: hidden;
+						}
+						&:hover {
+							transition: all 0.3s ease;
+							border: 1px dashed var(--el-color-primary);
+							background: var(--el-color-primary-light-9);
+							border-radius: 5px;
+							i,
+							.name {
+								transition: all 0.3s ease;
+								color: var(--el-color-primary);
+							}
+						}
+					}
+				}
+				& .workflow-left-id:first-of-type {
+					.workflow-left-title {
+						border-top: none;
+					}
+				}
+			}
+			.workflow-right {
+				flex: 1;
+				position: relative;
+				overflow: hidden;
+				height: 100%;
+				background-image: linear-gradient(90deg, rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%),
+					linear-gradient(rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%);
+				background-size: 10px 10px;
+				.workflow-right-clone {
+					position: absolute;
+					.workflow-right-box {
+						height: 35px;
+						align-items: center;
+						color: var(--el-text-color-secondary);
+						padding: 0 10px;
+						border-radius: 3px;
+						cursor: move;
+						transition: all 0.3s ease;
+						min-width: 94.5px;
+						background: var(--el-color-white);
+						border: 1px solid var(--el-border-color-light, #ebeef5);
+						.workflow-left-item-icon {
+							display: flex;
+							align-items: center;
+							height: 35px;
+						}
+						&:hover {
+							border: 1px dashed var(--el-color-primary);
+							background: var(--el-color-primary-light-9);
+							transition: all 0.3s ease;
+							color: var(--el-color-primary);
+							i {
+								cursor: Crosshair;
+							}
+						}
+					}
+					.workflow-right-active {
+						border: 1px dashed var(--el-color-primary);
+						background: var(--el-color-primary-light-9);
+						color: var(--el-color-primary);
+					}
+				}
+				:deep(.jtk-overlay):not(.aLabel) {
+					padding: 4px 10px;
+					border: 1px solid var(--el-border-color-light, #ebeef5) !important;
+					color: var(--el-text-color-secondary) !important;
+					background: var(--el-color-white) !important;
+					border-radius: 3px;
+					font-size: 10px;
+				}
+				:deep(.jtk-overlay.workflow-right-empty-label) {
+					display: none;
+				}
+			}
+		}
+	}
+	.workflow-mask {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		&::after {
+			content: '手机版不支持 jsPlumb 操作';
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 1;
+			background: rgba(255, 255, 255, 0.9);
+			color: #666666;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/workflow/js/config.ts b/src/views/pages/workflow/js/config.ts
new file mode 100644
index 0000000..3784c02
--- /dev/null
+++ b/src/views/pages/workflow/js/config.ts
@@ -0,0 +1,99 @@
+// jsplumb 默认配置
+export const jsplumbDefaults = {
+	// 多个锚点 [源锚点，目标锚点]
+	Anchors: [
+		'Top',
+		'TopCenter',
+		'TopRight',
+		'TopLeft',
+		'Right',
+		'RightMiddle',
+		'Bottom',
+		'BottomCenter',
+		'BottomRight',
+		'BottomLeft',
+		'Left',
+		'LeftMiddle',
+	],
+	// 连线的容器id
+	Container: 'workflow-right',
+	// 设置链接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。可选值"<Bezier|Flowchart|StateMachine|Straight>"
+	Connector: ['Bezier', { curviness: 100 }],
+	// 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开
+	ConnectionsDetachable: false,
+	// 删除线的时候节点不删除
+	DeleteEndpointsOnDetach: false,
+	//  每当添加或以其他方式创建 Endpoint 并且 jsPlumb 尚未给出任何明确的 Endpoint 定义时将使用
+	Endpoint: ['Blank', { Overlays: '' }],
+	// 连接中源和目标端点的默认外观
+	EndpointStyle: { fill: '#1879ffa1', outlineWidth: 1 },
+	// jsPlumb 的内部日志记录是否打开
+	LogEnabled: true,
+	// 连接器的默认外观
+	PaintStyle: {
+		stroke: '#E0E3E7',
+		strokeWidth: 1,
+		outlineStroke: 'transparent',
+		outlineWidth: 10,
+	},
+	// 用于配置任何可拖动元素的默认选项jsPlumb.draggable
+	DragOptions: { cursor: 'pointer', zIndex: 2000 },
+	// 添加到连接器和端点的默认叠加层。已弃用：从 4.x 开始，将不支持此功能。并非所有叠加层都可以连接到连接器和端点。
+	Overlays: [
+		[
+			'Arrow',
+			{
+				width: 10, // 箭头尾部的宽度
+				length: 8, // 从箭头的尾部到头部的距离
+				location: 1, // 位置，建议使用0～1之间
+				direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
+				foldback: 0.623, // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
+			},
+		],
+		[
+			'Label',
+			{
+				label: '',
+				location: 0.5,
+				cssClass: 'aLabel',
+			},
+		],
+	],
+	// 默认渲染模式 svg、canvas
+	RenderMode: 'svg',
+	// 悬停状态下连接的默认外观
+	HoverPaintStyle: { stroke: '#b0b2b5', strokeWidth: 1 },
+	// 悬停状态下端点的默认外观
+	EndpointHoverStyle: { fill: 'red' },
+	// 端点和连接的默认范围。范围提供了对哪些端点可以连接到哪些其他端点的基本控制
+	Scope: 'jsPlumb_DefaultScope',
+};
+
+// 整个节点作为source或者target
+export const jsplumbMakeSource = {
+	// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
+	filter: '.workflow-icon-drag',
+	filterExclude: false,
+	anchor: 'Continuous',
+	// 是否允许自己连接自己
+	allowLoopback: true,
+	maxConnections: -1,
+};
+
+// 整个节点作为source或者target
+export const jsplumbMakeTarget = {
+	filter: '.workflow-icon-drag',
+	filterExclude: false,
+	// 是否允许自己连接自己
+	anchor: 'Continuous',
+	allowLoopback: true,
+	dropOptions: { hoverClass: 'ef-drop-hover' },
+};
+
+// 连线参数
+export const jsplumbConnect = {
+	isSource: true,
+	isTarget: true,
+	// 动态锚点、提供了4个方向 Continuous、AutoDefault
+	anchor: 'Continuous',
+};
diff --git a/src/views/pages/workflow/js/mock.ts b/src/views/pages/workflow/js/mock.ts
new file mode 100644
index 0000000..151c3ac
--- /dev/null
+++ b/src/views/pages/workflow/js/mock.ts
@@ -0,0 +1,262 @@
+// 左侧菜单导航数据
+export const leftNavList = [
+	{
+		title: '工作流',
+		icon: 'iconfont icon-shouye',
+		isOpen: true,
+		id: '1',
+		children: [
+			{
+				icon: 'iconfont icon-gongju',
+				name: '引擎',
+				id: '11',
+				form: [
+					{
+						type: 'input',
+						label: '客户姓名',
+						prop: 'name',
+						placeholder: '请输入客户姓名',
+						required: true,
+						disabled: false,
+					},
+					{
+						type: 'select',
+						label: '性别',
+						prop: 'sex',
+						placeholder: '请选择性别',
+						required: true,
+						disabled: false,
+						options: [
+							{
+								value: '0',
+								label: '女',
+							},
+							{
+								value: '1',
+								label: '男',
+							},
+						],
+					},
+					{
+						type: 'input',
+						label: '员工编号',
+						prop: 'number',
+						placeholder: '请输入员工编号',
+						required: true,
+						disabled: false,
+					},
+					{
+						type: 'input',
+						label: '办公电话',
+						prop: 'mobile',
+						placeholder: '请输入办公电话',
+						required: true,
+						disabled: false,
+					},
+					{
+						type: 'select',
+						label: '权限分配',
+						prop: 'role',
+						placeholder: '请选择性别',
+						required: true,
+						disabled: false,
+						options: [
+							{
+								value: '0',
+								label: '编辑权限',
+							},
+							{
+								value: '1',
+								label: '删除权限',
+							},
+						],
+					},
+					{
+						type: 'checkbox',
+						label: '模块选择',
+						prop: 'module',
+						placeholder: '请选择模块',
+						required: true,
+						disabled: false,
+					},
+				],
+			},
+			{
+				icon: 'iconfont icon-shouye_dongtaihui',
+				name: '模版',
+				id: '12',
+				form: [
+					{
+						type: 'input',
+						label: '等级',
+						prop: 'grade',
+						placeholder: '请输入等级',
+						required: true,
+						disabled: false,
+					},
+					{
+						type: 'input',
+						label: '登记密码',
+						prop: 'password',
+						placeholder: '请输入登记密码',
+						required: true,
+						disabled: false,
+					},
+				],
+			},
+			{
+				icon: 'iconfont icon-zhongduancanshuchaxun',
+				name: '名称',
+				id: '13',
+				form: [
+					{
+						type: 'input',
+						label: '数据表',
+						prop: 'dataSheet',
+						placeholder: '请输入数据表',
+						required: true,
+						disabled: false,
+					},
+					{
+						type: 'input',
+						label: '字段配置',
+						prop: 'field',
+						placeholder: '请输入字段配置',
+						required: true,
+						disabled: false,
+					},
+				],
+			},
+			{
+				icon: 'iconfont icon-zhongduancanshu',
+				name: '版本',
+				id: '14',
+				form: [
+					{
+						type: 'input',
+						label: '发布模板',
+						prop: 'publish',
+						placeholder: '请输入发布模板',
+						required: true,
+						disabled: false,
+					},
+				],
+			},
+			{
+				icon: 'iconfont icon-bolangnengshiyanchang',
+				name: '建模',
+				id: '15',
+				form: [
+					{
+						type: 'input',
+						label: '内容模板',
+						prop: 'content',
+						placeholder: '请输入内容模板',
+						required: true,
+						disabled: false,
+					},
+				],
+			},
+			{
+				icon: 'iconfont icon-xingqiu',
+				name: '节点',
+				id: '16',
+				form: [
+					{
+						type: 'input',
+						label: '活动名称6',
+						prop: 'name16',
+					},
+				],
+			},
+		],
+	},
+	{
+		title: '流程',
+		isOpen: true,
+		icon: 'iconfont icon-caijian',
+		id: '2',
+		children: [
+			{
+				icon: 'iconfont icon-fuwenben',
+				name: '实例',
+				id: '21',
+				form: [
+					{
+						type: 'input',
+						label: '活动名称7',
+						prop: 'name21',
+					},
+				],
+			},
+			{
+				icon: 'iconfont icon-fuwenbenkuang',
+				name: '轨迹',
+				id: '22',
+				form: [
+					{
+						type: 'input',
+						label: '活动名称8',
+						prop: 'name22',
+					},
+				],
+			},
+			{
+				icon: 'iconfont icon-shangchuan',
+				name: '数据',
+				id: '23',
+				form: [
+					{
+						type: 'input',
+						label: '活动名称9',
+						prop: 'name23',
+					},
+				],
+			},
+		],
+	},
+	{
+		title: '任务',
+		isOpen: true,
+		icon: 'iconfont icon-shuju',
+		id: '3',
+		children: [
+			{
+				icon: 'iconfont icon-icon-',
+				name: '参与人',
+				id: '31',
+				form: [
+					{
+						type: 'input',
+						label: '活动名称1',
+						prop: 'name31',
+					},
+				],
+			},
+			{
+				icon: 'iconfont icon-gerenzhongxin',
+				name: '执行人',
+				id: '32',
+				form: [
+					{
+						type: 'input',
+						label: '活动名称2',
+						prop: 'name32',
+					},
+				],
+			},
+			{
+				icon: 'iconfont icon-fangkuang',
+				name: '工单',
+				id: '33',
+				form: [
+					{
+						type: 'input',
+						label: '活动名称3',
+						prop: 'name33',
+					},
+				],
+			},
+		],
+	},
+];
diff --git a/src/views/params/common/details.vue b/src/views/params/common/details.vue
new file mode 100644
index 0000000..9ba885e
--- /dev/null
+++ b/src/views/params/common/details.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+		<div class="flex-margin color-primary">
+			<div>paramsCommonDetails</div>
+			<div class="mt10 mb10">路径：path: {{ params.path }}</div>
+			<div>参数：query: {{ params.query }}</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+export default defineComponent({
+	name: 'paramsCommonDetails',
+	setup() {
+		const route = useRoute();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const state = reactive({
+			params: {
+				path: '',
+				query: '',
+			},
+		});
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		// 页面加载时
+		onMounted(() => {
+			state.params = <any>route;
+		});
+		return {
+			setViewHeight,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/params/common/index.vue b/src/views/params/common/index.vue
new file mode 100644
index 0000000..733156c
--- /dev/null
+++ b/src/views/params/common/index.vue
@@ -0,0 +1,100 @@
+<template>
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+		<div class="flex-margin" style="width: 400px">
+			<el-result icon="success" title="普通路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
+				<template #extra>
+					<el-alert type="success" :closable="false" class="mb30">
+						<template #default>
+							<div>1、设置非国际化：格式：tagsViewName=xxx</div>
+							<br />
+							<div>2、设置国际化：格式：tagsViewName=JSON.stringify({"zh-cn":"测试用","en":"test+page","zh-tw":"測試用"})</div>
+							<br />
+							<div>3、设置国际化后，去顶栏切换语言查看演示效果</div>
+							<br />
+							<div>
+								4、 <a href="https://gitee.com/q7but" target="_black">感谢@q7but</a>、
+								<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/22/files" target="_black">!22 add 添加自定义 tagVIewName 拓展,支持国际化</a>
+							</div>
+						</template>
+					</el-alert>
+					<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
+					<el-input v-model="value" placeholder="请输入路由参数 id 值" clearable style="width: 400px"></el-input>
+					<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
+						<SvgIcon name="iconfont icon-putong" />
+						普通路由传参
+					</el-button>
+					<el-button type="primary" size="default" class="mt15" @click="onChangeI18n">
+						<SvgIcon name="iconfont icon-fuhao-zhongwen" />
+						{{ tagsViewNameIsI18n ? '普通的演示' : '国际化演示' }}
+					</el-button>
+				</template>
+			</el-result>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+export default defineComponent({
+	name: 'paramsCommon',
+	setup() {
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const state = reactive({
+			value: '',
+			tagsViewName: '',
+			tagsViewNameIsI18n: false,
+		});
+		const router = useRouter();
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		// 跳转到详情
+		/**
+		 * 设置 tagsView 名称：
+		 * 传不同的 tagsViewName 值
+		 */
+		const onGoDetailsClick = () => {
+			const params: any = { id: state.value };
+			if (state.tagsViewName) params.tagsViewName = state.tagsViewName;
+			router.push({
+				path: '/params/common/details',
+				query: params,
+			});
+			state.value = '';
+		};
+		const onChangeI18n = () => {
+			state.tagsViewNameIsI18n = !state.tagsViewNameIsI18n;
+			if (state.tagsViewNameIsI18n) {
+				state.tagsViewName = JSON.stringify({
+					'zh-cn': '测试用',
+					en: 'test page',
+					'zh-tw': '測試用',
+				});
+			} else {
+				state.tagsViewName = '我是普通路由测试tagsViewName(非国际化)';
+			}
+		};
+		return {
+			setViewHeight,
+			onGoDetailsClick,
+			onChangeI18n,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/params/dynamic/details.vue b/src/views/params/dynamic/details.vue
new file mode 100644
index 0000000..7283ba1
--- /dev/null
+++ b/src/views/params/dynamic/details.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+		<div class="flex-margin color-primary">
+			<div>paramsDynamicDetails</div>
+			<div class="mt10 mb10">路径：path: {{ params.path }}</div>
+			<div>参数：params: {{ params.params }}</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+export default defineComponent({
+	name: 'paramsDynamicDetails',
+	setup() {
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const route = useRoute();
+		const state = reactive({
+			params: {
+				path: '',
+				params: '',
+			},
+		});
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		// 页面加载时
+		onMounted(() => {
+			state.params = <any>route;
+		});
+		return {
+			setViewHeight,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/params/dynamic/index.vue b/src/views/params/dynamic/index.vue
new file mode 100644
index 0000000..e5246fe
--- /dev/null
+++ b/src/views/params/dynamic/index.vue
@@ -0,0 +1,102 @@
+<template>
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+		<div class="flex-margin" style="width: 400px">
+			<el-result icon="warning" title="动态路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
+				<template #extra>
+					<el-alert type="success" :closable="false" class="mb30">
+						<template #default>
+							<div>1、设置非国际化：格式：tagsViewName=xxx</div>
+							<br />
+							<div>2、设置国际化：格式：tagsViewName=JSON.stringify({"zh-cn":"测试用","en":"test+page","zh-tw":"測試用"})</div>
+							<br />
+							<div>3、设置国际化后，去顶栏切换语言查看演示效果</div>
+							<br />
+							<div>
+								4、 <a href="https://gitee.com/q7but" target="_black">感谢@q7but</a>、
+								<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/22/files" target="_black">!22 add 添加自定义 tagVIewName 拓展,支持国际化</a>
+							</div>
+						</template>
+					</el-alert>
+					<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
+					<el-input v-model="value" placeholder="请输入路由参数id值" clearable style="width: 400px"></el-input>
+					<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
+						<SvgIcon name="iconfont icon-dongtai" />
+						动态路由传参
+					</el-button>
+					<el-button type="primary" size="default" class="mt15" @click="onChangeI18n">
+						<SvgIcon name="iconfont icon-fuhao-zhongwen" />
+						{{ tagsViewNameIsI18n ? '普通的演示' : '国际化演示' }}
+					</el-button>
+				</template>
+			</el-result>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+
+export default defineComponent({
+	name: 'paramsDynamic',
+	setup() {
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const state = reactive({
+			value: '',
+			tagsViewName: '',
+			tagsViewNameIsI18n: false,
+		});
+		const router = useRouter();
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		// 跳转到详情
+		const onGoDetailsClick = () => {
+			if (!state.tagsViewName) return ElMessage.warning('动态路由tagsViewName为必填，因为路由配置了');
+			if (!state.value) return ElMessage.warning('路由参数id值为必填');
+			// name 值为路由中的 name
+			router.push({
+				name: 'paramsDynamicDetails',
+				params: {
+					t: 'gfast3.2后台管理系统',
+					id: state.value,
+					tagsViewName: state.tagsViewName,
+				},
+			});
+			state.value = '';
+		};
+		const onChangeI18n = () => {
+			state.tagsViewNameIsI18n = !state.tagsViewNameIsI18n;
+			if (state.tagsViewNameIsI18n) {
+				state.tagsViewName = JSON.stringify({
+					'zh-cn': '我是动态路由',
+					en: 'Im dynamic routing',
+					'zh-tw': '我是動態路由',
+				});
+			} else {
+				state.tagsViewName = '我是动态路由测试tagsViewName(非国际化)';
+			}
+		};
+		return {
+			setViewHeight,
+			onGoDetailsClick,
+			onChangeI18n,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/personal/index.vue b/src/views/personal/index.vue
new file mode 100644
index 0000000..baa4639
--- /dev/null
+++ b/src/views/personal/index.vue
@@ -0,0 +1,387 @@
+<template>
+	<div class="personal">
+		<el-row>
+			<!-- 个人信息 -->
+			<el-col :xs="24" :sm="16">
+				<el-card shadow="hover" header="个人信息">
+					<div class="personal-user">
+						<div class="personal-user-left">
+							<el-upload class="h100 personal-user-left-upload" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
+								<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
+							</el-upload>
+						</div>
+						<div class="personal-user-right">
+							<el-row>
+								<el-col :span="24" class="personal-title mb18">{{ currentTime }}，admin，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
+								<el-col :span="24">
+									<el-row>
+										<el-col :xs="24" :sm="8" class="personal-item mb6">
+											<div class="personal-item-label">昵称：</div>
+											<div class="personal-item-value">小柒</div>
+										</el-col>
+										<el-col :xs="24" :sm="16" class="personal-item mb6">
+											<div class="personal-item-label">身份：</div>
+											<div class="personal-item-value">超级管理</div>
+										</el-col>
+									</el-row>
+								</el-col>
+								<el-col :span="24">
+									<el-row>
+										<el-col :xs="24" :sm="8" class="personal-item mb6">
+											<div class="personal-item-label">登录IP：</div>
+											<div class="personal-item-value">192.168.1.1</div>
+										</el-col>
+										<el-col :xs="24" :sm="16" class="personal-item mb6">
+											<div class="personal-item-label">登录时间：</div>
+											<div class="personal-item-value">2021-02-05 18:47:26</div>
+										</el-col>
+									</el-row>
+								</el-col>
+							</el-row>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+
+			<!-- 消息通知 -->
+			<el-col :xs="24" :sm="8" class="pl15 personal-info">
+				<el-card shadow="hover">
+					<template #header>
+						<span>消息通知</span>
+						<span class="personal-info-more">更多</span>
+					</template>
+					<div class="personal-info-box">
+						<ul class="personal-info-ul">
+							<li v-for="(v, k) in newsInfoList" :key="k" class="personal-info-li">
+								<a :href="v.link" target="_block" class="personal-info-li-title">{{ v.title }}</a>
+							</li>
+						</ul>
+					</div>
+				</el-card>
+			</el-col>
+
+			<!-- 营销推荐 -->
+			<el-col :span="24">
+				<el-card shadow="hover" class="mt15" header="营销推荐">
+					<el-row :gutter="15" class="personal-recommend-row">
+						<el-col :sm="6" v-for="(v, k) in recommendList" :key="k" class="personal-recommend-col">
+							<div class="personal-recommend" :style="{ 'background-color': v.bg }">
+								<SvgIcon :name="v.icon" :size="70" :style="{ color: v.iconColor }" />
+								<div class="personal-recommend-auto">
+									<div>{{ v.title }}</div>
+									<div class="personal-recommend-msg">{{ v.msg }}</div>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+				</el-card>
+			</el-col>
+
+			<!-- 更新信息 -->
+			<el-col :span="24">
+				<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
+					<div class="personal-edit-title">基本信息</div>
+					<el-form :model="personalForm" size="default" label-width="40px" class="mt35 mb35">
+						<el-row :gutter="35">
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="昵称">
+									<el-input v-model="personalForm.name" placeholder="请输入昵称" clearable></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="邮箱">
+									<el-input v-model="personalForm.email" placeholder="请输入邮箱" clearable></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="签名">
+									<el-input v-model="personalForm.autograph" placeholder="请输入签名" clearable></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="职业">
+									<el-select v-model="personalForm.occupation" placeholder="请选择职业" clearable class="w100">
+										<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
+										<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
+										<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
+									</el-select>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="手机">
+									<el-input v-model="personalForm.phone" placeholder="请输入手机" clearable></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="性别">
+									<el-select v-model="personalForm.sex" placeholder="请选择性别" clearable class="w100">
+										<el-option label="男" value="1"></el-option>
+										<el-option label="女" value="2"></el-option>
+									</el-select>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+								<el-form-item>
+									<el-button type="primary">
+										<el-icon>
+											<ele-Position />
+										</el-icon>
+										更新个人信息
+									</el-button>
+								</el-form-item>
+							</el-col>
+						</el-row>
+					</el-form>
+					<div class="personal-edit-title mb15">账号安全</div>
+					<div class="personal-edit-safe-box">
+						<div class="personal-edit-safe-item">
+							<div class="personal-edit-safe-item-left">
+								<div class="personal-edit-safe-item-left-label">账户密码</div>
+								<div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
+							</div>
+							<div class="personal-edit-safe-item-right">
+								<el-button text type="primary">立即修改</el-button>
+							</div>
+						</div>
+					</div>
+					<div class="personal-edit-safe-box">
+						<div class="personal-edit-safe-item">
+							<div class="personal-edit-safe-item-left">
+								<div class="personal-edit-safe-item-left-label">密保手机</div>
+								<div class="personal-edit-safe-item-left-value">已绑定手机：132****4108</div>
+							</div>
+							<div class="personal-edit-safe-item-right">
+								<el-button text type="primary">立即修改</el-button>
+							</div>
+						</div>
+					</div>
+					<div class="personal-edit-safe-box">
+						<div class="personal-edit-safe-item">
+							<div class="personal-edit-safe-item-left">
+								<div class="personal-edit-safe-item-left-label">密保问题</div>
+								<div class="personal-edit-safe-item-left-value">已设置密保问题，账号安全大幅度提升</div>
+							</div>
+							<div class="personal-edit-safe-item-right">
+								<el-button text type="primary">立即设置</el-button>
+							</div>
+						</div>
+					</div>
+					<div class="personal-edit-safe-box">
+						<div class="personal-edit-safe-item">
+							<div class="personal-edit-safe-item-left">
+								<div class="personal-edit-safe-item-left-label">绑定QQ</div>
+								<div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
+							</div>
+							<div class="personal-edit-safe-item-right">
+								<el-button text type="primary">立即设置</el-button>
+							</div>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, defineComponent } from 'vue';
+import { formatAxis } from '/@/utils/formatTime';
+import { newsInfoList, recommendList } from './mock';
+
+// 定义接口来定义对象的类型
+interface PersonalState {
+	newsInfoList: any;
+	recommendList: any;
+	personalForm: any;
+}
+
+export default defineComponent({
+	name: 'personal',
+	setup() {
+		const state = reactive<PersonalState>({
+			newsInfoList,
+			recommendList,
+			personalForm: {
+				name: '',
+				email: '',
+				autograph: '',
+				occupation: '',
+				phone: '',
+				sex: '',
+			},
+		});
+		// 当前时间提示语
+		const currentTime = computed(() => {
+			return formatAxis(new Date());
+		});
+		return {
+			currentTime,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../theme/mixins/index.scss';
+.personal {
+	.personal-user {
+		height: 130px;
+		display: flex;
+		align-items: center;
+		.personal-user-left {
+			width: 100px;
+			height: 130px;
+			border-radius: 3px;
+			:deep(.el-upload) {
+				height: 100%;
+			}
+			.personal-user-left-upload {
+				img {
+					width: 100%;
+					height: 100%;
+					border-radius: 3px;
+				}
+				&:hover {
+					img {
+						animation: logoAnimation 0.3s ease-in-out;
+					}
+				}
+			}
+		}
+		.personal-user-right {
+			flex: 1;
+			padding: 0 15px;
+			.personal-title {
+				font-size: 18px;
+				@include text-ellipsis(1);
+			}
+			.personal-item {
+				display: flex;
+				align-items: center;
+				font-size: 13px;
+				.personal-item-label {
+					color: var(--el-text-color-secondary);
+					@include text-ellipsis(1);
+				}
+				.personal-item-value {
+					@include text-ellipsis(1);
+				}
+			}
+		}
+	}
+	.personal-info {
+		.personal-info-more {
+			float: right;
+			color: var(--el-text-color-secondary);
+			font-size: 13px;
+			&:hover {
+				color: var(--el-color-primary);
+				cursor: pointer;
+			}
+		}
+		.personal-info-box {
+			height: 130px;
+			overflow: hidden;
+			.personal-info-ul {
+				list-style: none;
+				.personal-info-li {
+					font-size: 13px;
+					padding-bottom: 10px;
+					.personal-info-li-title {
+						display: inline-block;
+						@include text-ellipsis(1);
+						color: var(--el-text-color-secondary);
+						text-decoration: none;
+					}
+					& a:hover {
+						color: var(--el-color-primary);
+						cursor: pointer;
+					}
+				}
+			}
+		}
+	}
+	.personal-recommend-row {
+		.personal-recommend-col {
+			.personal-recommend {
+				position: relative;
+				height: 100px;
+				border-radius: 3px;
+				overflow: hidden;
+				cursor: pointer;
+				&:hover {
+					i {
+						right: 0px !important;
+						bottom: 0px !important;
+						transition: all ease 0.3s;
+					}
+				}
+				i {
+					position: absolute;
+					right: -10px;
+					bottom: -10px;
+					font-size: 70px;
+					transform: rotate(-30deg);
+					transition: all ease 0.3s;
+				}
+				.personal-recommend-auto {
+					padding: 15px;
+					position: absolute;
+					left: 0;
+					top: 5%;
+					color: var(--next-color-white);
+					.personal-recommend-msg {
+						font-size: 12px;
+						margin-top: 10px;
+					}
+				}
+			}
+		}
+	}
+	.personal-edit {
+		.personal-edit-title {
+			position: relative;
+			padding-left: 10px;
+			color: var(--el-text-color-regular);
+			&::after {
+				content: '';
+				width: 2px;
+				height: 10px;
+				position: absolute;
+				left: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				background: var(--el-color-primary);
+			}
+		}
+		.personal-edit-safe-box {
+			border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
+			padding: 15px 0;
+			.personal-edit-safe-item {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.personal-edit-safe-item-left {
+					flex: 1;
+					overflow: hidden;
+					.personal-edit-safe-item-left-label {
+						color: var(--el-text-color-regular);
+						margin-bottom: 5px;
+					}
+					.personal-edit-safe-item-left-value {
+						color: var(--el-text-color-secondary);
+						@include text-ellipsis(1);
+						margin-right: 15px;
+					}
+				}
+			}
+			&:last-of-type {
+				padding-bottom: 0;
+				border-bottom: none;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/personal/mock.ts b/src/views/personal/mock.ts
new file mode 100644
index 0000000..ff57575
--- /dev/null
+++ b/src/views/personal/mock.ts
@@ -0,0 +1,66 @@
+/**
+ * 消息通知
+ * @returns 返回模拟数据
+ */
+export const newsInfoList: Array<object> = [
+	{
+		title: '[发布] 2021年02月28日发布基于 vue3.x + vite v1.0.0 版本',
+		date: '02/28',
+		link: 'https://gitee.com/lyt-top/vue-next-admin',
+	},
+	{
+		title: '[发布] 2021年04月15日发布 vue2.x + webpack 重构版本',
+		date: '04/15',
+		link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
+	},
+	{
+		title: '[重构] 2021年04月10日 重构 vue2.x + webpack v1.0.0 版本',
+		date: '04/10',
+		link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
+	},
+	{
+		title: '[预览] 2020年12月08日，基于 vue3.x 版本后台模板的预览',
+		date: '12/08',
+		link: 'http://lyt-top.gitee.io/vue-next-admin-preview/#/login',
+	},
+	{
+		title: '[预览] 2020年11月15日，基于 vue2.x 版本后台模板的预览',
+		date: '11/15',
+		link: 'https://lyt-top.gitee.io/vue-prev-admin-preview/#/login',
+	},
+];
+
+/**
+ * 营销推荐
+ * @returns 返回模拟数据
+ */
+export const recommendList: Array<object> = [
+	{
+		title: '优惠券',
+		msg: '现金券、折扣券、营销必备',
+		icon: 'ele-Food',
+		bg: '#48D18D',
+		iconColor: '#64d89d',
+	},
+	{
+		title: '多人拼团',
+		msg: '社交电商、开辟流量',
+		icon: 'ele-ShoppingCart',
+		bg: '#F95959',
+		iconColor: '#F86C6B',
+	},
+	{
+		title: '分销中心',
+		msg: '轻松招募分销员，成功推广奖励',
+		icon: 'ele-School',
+		bg: '#8595F4',
+		iconColor: '#92A1F4',
+	},
+	{
+		title: '秒杀',
+		msg: '超低价抢购引导更多销量',
+		icon: 'ele-AlarmClock',
+		bg: '#FEBB50',
+		iconColor: '#FDC566',
+	},
+];
diff --git a/src/views/system/config/component/editConfig.vue b/src/views/system/config/component/editConfig.vue
new file mode 100644
index 0000000..6aa6f86
--- /dev/null
+++ b/src/views/system/config/component/editConfig.vue
@@ -0,0 +1,152 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog :title="(ruleForm.configId!==0?'修改':'添加')+'参数'" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
+        <el-form-item label="参数名称" prop="configName">
+          <el-input v-model="ruleForm.configName" placeholder="请输入参数名称" />
+        </el-form-item>
+        <el-form-item label="参数键名" prop="configKey">
+          <el-input v-model="ruleForm.configKey" placeholder="请输入参数键名" />
+        </el-form-item>
+        <el-form-item label="参数键值" prop="configValue">
+          <el-input v-model="ruleForm.configValue" placeholder="请输入参数键值" />
+        </el-form-item>
+        <el-form-item label="系统内置" prop="configType">
+          <el-radio-group v-model="ruleForm.configType">
+            <el-radio
+                v-for="dict in sysYesNoOptions"
+                :key="dict.value"
+                :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.configId!==0?'修 改':'添 加'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import {ElMessage} from "element-plus";
+import {addConfig, editConfig, getConfig} from "/@/api/system/config";
+interface RuleFormState {
+  configId: number;
+  configName: string;
+  configKey: string;
+  configValue: string;
+  configType: string;
+  remark: string
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+  rules:{}
+}
+
+export default defineComponent({
+	name: 'systemEditDicData',
+  props:{
+    sysYesNoOptions:{
+      type:Array,
+      default:()=>[]
+    }
+  },
+	setup(prop,{emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			isShowDialog: false,
+			ruleForm: {
+        configId: 0,
+        configName: '',
+        configKey: '',
+        configValue: '',
+        configType: '0',
+        remark: '',
+			},
+      rules: {
+        configName: [
+          { required: true, message: "参数名称不能为空", trigger: "blur" }
+        ],
+        configKey: [
+          { required: true, message: "参数键名不能为空", trigger: "blur" }
+        ],
+        configValue: [
+          { required: true, message: "参数键值不能为空", trigger: "blur" }
+        ]
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row: RuleFormState|null) => {
+      resetForm();
+      if (row){
+        getConfig(row.configId).then((res:any)=>{
+          const data:RuleFormState = res.data.data
+          data.configType = String(data.configType)
+          state.ruleForm = data
+        })
+        state.ruleForm = row;
+      }
+			state.isShowDialog = true;
+		};
+    const resetForm = ()=>{
+      state.ruleForm = {
+        configId: 0,
+        configName: '',
+        configKey: '',
+        configValue: '',
+        configType: '0',
+        remark: '',
+      }
+    };
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.configId!==0){
+            //修改
+            editConfig(state.ruleForm).then(()=>{
+              ElMessage.success('参数修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('dataList')
+            })
+          }else{
+            //添加
+            addConfig(state.ruleForm).then(()=>{
+              ElMessage.success('参数添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('dataList')
+            })
+          }
+        }
+      });
+		};
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
new file mode 100644
index 0000000..e758f31
--- /dev/null
+++ b/src/views/system/config/index.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+          <el-form-item label="参数名称" prop="configName">
+            <el-input
+                v-model="tableData.param.configName"
+                placeholder="请输入参数名称"
+                clearable
+                size="default"
+                @keyup.enter.native="dataList"
+            />
+          </el-form-item>
+          <el-form-item label="参数键名" prop="configKey">
+            <el-input
+                v-model="tableData.param.configKey"
+                placeholder="请输入参数键名"
+                clearable
+                size="default"
+                @keyup.enter.native="dataList"
+            />
+          </el-form-item>
+          <el-form-item label="系统内置" prop="configType" style="width: 200px;">
+            <el-select
+                v-model="tableData.param.configType"
+                placeholder="系统内置"
+                clearable
+                size="default"
+                style="width: 240px"
+            >
+              <el-option v-for="dict in sys_yes_no"
+                 :key="dict.value"
+                 :label="dict.label"
+                 :value="dict.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间" prop="dateRange">
+            <el-date-picker
+                v-model="tableData.param.dateRange"
+                size="default"
+                style="width: 240px"
+                value-format="YYYY-MM-DD"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="dataList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增参数
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              删除参数
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="参数主键" align="center" prop="configId" />
+        <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
+        <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
+        <el-table-column label="参数键值" align="center" prop="configValue" />
+        <el-table-column label="系统内置" align="center" prop="configType" :formatter="typeFormat" />
+        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+        <el-table-column label="创建时间" align="center" prop="createdAt" width="180" />
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
+            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="dataList"
+      />
+    </el-card>
+    <EditConfig ref="editDicRef" @dataList="dataList" :sysYesNoOptions="sys_yes_no"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {toRefs,reactive,onMounted,ref,defineComponent,unref,getCurrentInstance} from 'vue';
+import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
+import EditConfig from '/@/views/system/config/component/editConfig.vue';
+import {deleteConfig, getConfigList} from "/@/api/system/config";
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  configId: number;
+  configName: string;
+  configKey: string;
+  configValue: string,
+  configType: number,
+  remark: string,
+  createdAt: string,
+}
+interface TableDataState {
+  ids:number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      configName:string;
+      configKey:string;
+      configType:string;
+      dateRange:string[];
+    };
+  };
+}
+
+export default defineComponent({
+  name: 'apiV1SystemDictDataList',
+  components: { EditConfig },
+  setup() {
+    const {proxy} = getCurrentInstance() as any;
+    const addDicRef = ref();
+    const editDicRef = ref();
+    const queryRef = ref();
+    const {sys_yes_no} = proxy.useDict('sys_yes_no')
+    const state = reactive<TableDataState>({
+      ids:[],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          dateRange:[],
+          pageNum: 1,
+          pageSize: 10,
+          configName:'',
+          configKey:'',
+          configType:''
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      dataList()
+    };
+    const dataList=()=>{
+      getConfigList(state.tableData.param).then((res:any)=>{
+        state.tableData.data = res.data.list;
+        state.tableData.total = res.data.total;
+      });
+    };
+    // 打开新增字典弹窗
+    const onOpenAddDic = () => {
+      editDicRef.value.openDialog();
+    };
+    // 打开修改字典弹窗
+    const onOpenEditDic = (row: TableDataRow) => {
+      editDicRef.value.openDialog(row);
+    };
+    // 删除字典
+    const onRowDel = (row: TableDataRow) => {
+      let msg = '你确定要删除所选数据？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `此操作将永久删除用户：“${row.configName}”，是否继续?`
+        ids = [row.configId]
+      }else{
+        ids = state.ids
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要删除的数据。');
+        return
+      }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+          .then(() => {
+            deleteConfig(ids).then(()=>{
+              ElMessage.success('删除成功');
+              dataList();
+            })
+          })
+          .catch(() => {});
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return
+      formEl.resetFields()
+      dataList()
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection:TableDataRow[])=> {
+      state.ids = selection.map(item => item.configId)
+    };
+    // 参数系统内置字典翻译
+    const typeFormat=(row:TableDataRow) => {
+      return proxy.selectDictLabel(unref(sys_yes_no), row.configType);
+    };
+    return {
+      addDicRef,
+      editDicRef,
+      queryRef,
+      sys_yes_no,
+      onOpenAddDic,
+      onOpenEditDic,
+      onRowDel,
+      dataList,
+      resetQuery,
+      handleSelectionChange,
+      typeFormat,
+      ...toRefs(state),
+    };
+  },
+});
+</script>
diff --git a/src/views/system/dept/component/editDept.vue b/src/views/system/dept/component/editDept.vue
new file mode 100644
index 0000000..23fa4bf
--- /dev/null
+++ b/src/views/system/dept/component/editDept.vue
@@ -0,0 +1,185 @@
+<template>
+	<div class="system-edit-dept-container">
+		<el-dialog :title="(ruleForm.deptId!==0?'修改':'添加')+'部门'" v-model="isShowDialog" width="769px">
+			<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="上级部门">
+							<el-cascader
+								:options="deptData"
+								:props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName' }"
+								placeholder="请选择部门"
+								clearable
+								class="w100"
+								v-model="ruleForm.parentId"
+							>
+								<template #default="{ node, data }">
+									<span>{{ data.deptName }}</span>
+									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+								</template>
+							</el-cascader>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="部门名称" prop="deptName">
+							<el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="负责人">
+							<el-input v-model="ruleForm.leader" placeholder="请输入负责人" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="手机号">
+							<el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="邮箱">
+							<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="排序">
+							<el-input-number v-model="ruleForm.orderNum" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="部门状态">
+							<el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.deptId!==0?'修 改':'添 加'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
+import {addDept,editDept, getDeptList} from "/@/api/system/dept";
+import {ElMessage} from "element-plus";
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+	deptName: string;
+	id: number;
+  parentId:number;
+	children?: TableDataRow[];
+}
+interface RuleFormState {
+  deptId:number;
+	parentId: number;
+	deptName: string;
+  orderNum: number;
+  leader: string;
+	phone: string | number;
+	email: string;
+	status: number;
+}
+interface DeptSate {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+	deptData: Array<TableDataRow>;
+  rules: object;
+}
+
+export default defineComponent({
+	name: 'systemEditDept',
+	setup(prop,{emit}) {
+    const {proxy} = getCurrentInstance() as any;
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DeptSate>({
+			isShowDialog: false,
+			ruleForm: {
+        deptId:0,
+        parentId: 0, // 上级部门
+				deptName: '', // 部门名称
+        orderNum:0,
+        leader: '',
+        phone: '',
+        email: '',
+        status: 1,
+			},
+			deptData: [], // 部门数据
+      rules: {
+        deptName:[
+          {required: true, message: "部门名称不能为空", trigger: "blur"},
+        ]
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row?: RuleFormState|number) => {
+      resetForm()
+      getDeptList().then((res:any)=>{
+        state.deptData =  proxy.handleTree(res.data.deptList??[], "deptId","parentId");
+      });
+      if(row && typeof row === "object"){
+        state.ruleForm = row;
+      }else if(row && typeof row === 'number'){
+        state.ruleForm.parentId = row
+      }
+			state.isShowDialog = true;
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.deptId===0){
+            //添加
+            addDept(state.ruleForm).then(()=>{
+              ElMessage.success('角色添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('deptList')
+            });
+          }else{
+            //修改
+            editDept(state.ruleForm).then(()=>{
+              ElMessage.success('角色修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('deptList')
+            });
+          }
+        }
+      });
+		};
+    const resetForm = ()=>{
+      state.ruleForm = {
+        deptId:0,
+        parentId: 0, // 上级部门
+        deptName: '', // 部门名称
+        orderNum:0,
+        leader: '',
+        phone: '',
+        email: '',
+        status: 1,
+      }
+    };
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
new file mode 100644
index 0000000..931b861
--- /dev/null
+++ b/src/views/system/dept/index.vue
@@ -0,0 +1,153 @@
+<template>
+	<div class="system-dept-container">
+		<el-card shadow="hover">
+			<div class="system-dept-search mb15">
+        <el-form :inline="true">
+          <el-form-item label="部门名称">
+            <el-input size="default" v-model="tableData.param.deptName" placeholder="请输入部门名称" class="w-50 m-2" clearable/>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status" clearable>
+              <el-option label="启用"  value="1" />
+              <el-option label="禁用"  value="0" />
+            </el-select>
+          </el-form-item>
+				  <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="deptList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddDept">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增部门
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+			<el-table
+				:data="tableData.data"
+				style="width: 100%"
+				row-key="deptId"
+				default-expand-all
+				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+			>
+				<el-table-column prop="deptName" label="部门名称" show-overflow-tooltip> </el-table-column>
+				<el-table-column prop="status" label="部门状态" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
+						<el-tag type="info" v-else>禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="orderNum" label="排序" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作" width="200">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="onOpenAddDept(scope.row)">新增</el-button>
+						<el-button size="small" text type="primary" @click="onOpenEditDept(scope.row)">修改</el-button>
+						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-card>
+		<EditDept ref="editDeptRef" @deptList="deptList"/>
+	</div>
+</template>
+
+<script lang="ts">
+import { ref, toRefs, reactive, onMounted, defineComponent,getCurrentInstance } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import EditDept from '/@/views/system/dept/component/editDept.vue';
+import {deleteDept, getDeptList} from "/@/api/system/dept";
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  deptId:number;
+  parentId:number;
+  deptName:string;
+  status:number;
+  orderNum:number;
+  createdAt:string;
+	children?:TableDataRow[];
+}
+interface TableDataState {
+	tableData: {
+		data: Array<TableDataRow>;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+      deptName:string;
+      status:string;
+		};
+	};
+}
+
+export default defineComponent({
+	name: 'systemDept',
+	components: { EditDept },
+	setup() {
+    const {proxy} = getCurrentInstance() as any;
+		const editDeptRef = ref();
+		const state = reactive<TableDataState>({
+			tableData: {
+				data: [],
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+          deptName:'',
+          status:''
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+      deptList();
+		};
+    const deptList = ()=>{
+      getDeptList(state.tableData.param).then((res:any)=>{
+        state.tableData.data = proxy.handleTree(res.data.deptList??[], "deptId","parentId");
+      });
+    };
+		// 打开新增菜单弹窗
+		const onOpenAddDept = (row?: TableDataRow) => {
+      editDeptRef.value.openDialog(row?.deptId);
+		};
+		// 打开编辑菜单弹窗
+		const onOpenEditDept = (row: TableDataRow) => {
+			editDeptRef.value.openDialog(row);
+		};
+		// 删除当前行
+		const onTabelRowDel = (row: TableDataRow) => {
+			ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
+				confirmButtonText: '删除',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+          deleteDept(row.deptId).then(()=>{
+					  ElMessage.success('删除成功');
+            deptList();
+          })
+				})
+				.catch(() => {});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+		return {
+			editDeptRef,
+      deptList,
+			onOpenAddDept,
+			onOpenEditDept,
+			onTabelRowDel,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/dict/component/editDic.vue b/src/views/system/dict/component/editDic.vue
new file mode 100644
index 0000000..7b93641
--- /dev/null
+++ b/src/views/system/dict/component/editDic.vue
@@ -0,0 +1,134 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog :title="(ruleForm.dictId!==0?'修改':'添加')+'字典'" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input v-model="ruleForm.dictName" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典类型" prop="dictType">
+          <el-input v-model="ruleForm.dictType" placeholder="请输入字典类型" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="ruleForm.status">
+            <el-radio :label="1" >启用</el-radio>
+            <el-radio :label="0" >禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.dictId!==0?'修 改':'添 加'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import { getType,addType,editType } from '/@/api/system/dict/type';
+import {ElMessage} from "element-plus";
+interface RuleFormState {
+  dictId:number;
+  dictName:string;
+  dictType:string;
+  status:number;
+  remark:string;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+  rules:{}
+}
+
+export default defineComponent({
+	name: 'systemEditDic',
+	setup(prop,{emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			isShowDialog: false,
+			ruleForm: {
+        dictId:0,
+        dictName:'',
+        dictType:'',
+        status:1,
+        remark:''
+			},
+      rules: {
+        dictName: [
+          { required: true, message: "字典名称不能为空", trigger: "blur" }
+        ],
+        dictType: [
+          { required: true, message: "字典类型不能为空", trigger: "blur" }
+        ]
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row: RuleFormState|null) => {
+      resetForm();
+      if (row){
+        getType(row.dictId).then((res:any)=>{
+          state.ruleForm = res.data.dictType
+        })
+        state.ruleForm = row;
+      }
+			state.isShowDialog = true;
+		};
+    const resetForm = ()=>{
+      state.ruleForm = {
+        dictId:0,
+        dictName:'',
+        dictType:'',
+        status:1,
+        remark:''
+      }
+    };
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.dictId!==0){
+            //修改
+            editType(state.ruleForm).then(()=>{
+              ElMessage.success('字典类型修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }else{
+            //添加
+            addType(state.ruleForm).then(()=>{
+              ElMessage.success('字典类型添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }
+        }
+      });
+		};
+
+
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/dict/component/editDicData.vue b/src/views/system/dict/component/editDicData.vue
new file mode 100644
index 0000000..8b90f37
--- /dev/null
+++ b/src/views/system/dict/component/editDicData.vue
@@ -0,0 +1,166 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog :title="(ruleForm.dictCode!==0?'修改':'添加')+'字典'" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
+        <el-form-item label="字典类型">
+          <el-input v-model="ruleForm.dictType" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="数据标签" prop="dictLabel">
+          <el-input v-model="ruleForm.dictLabel" placeholder="请输入数据标签" />
+        </el-form-item>
+        <el-form-item label="数据键值" prop="dictValue">
+          <el-input v-model="ruleForm.dictValue" placeholder="请输入数据键值" />
+        </el-form-item>
+        <el-form-item label="显示排序" prop="dictSort">
+          <el-input-number v-model="ruleForm.dictSort" controls-position="right" :min="0" />
+        </el-form-item>
+
+        <el-form-item label="系统默认">
+          <el-switch v-model="ruleForm.isDefault"
+                     active-text="是"
+                     inactive-text="否"
+                     :active-value="1"
+                     :inactive-value="0"
+          ></el-switch>
+        </el-form-item>
+
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="ruleForm.status">
+            <el-radio :label="1" >启用</el-radio>
+            <el-radio :label="0" >禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.dictCode!==0?'修 改':'添 加'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import { getData,addData,editData } from '/@/api/system/dict/data';
+import {ElMessage} from "element-plus";
+interface RuleFormState {
+  dictCode: number;
+  dictLabel: string;
+  dictValue: string;
+  dictSort:number;
+  isDefault:number;
+  status:number;
+  remark:string;
+  dictType:string;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+  rules:{}
+}
+
+export default defineComponent({
+	name: 'systemEditDicData',
+  props:{
+    dictType:{
+      type:String,
+      default:()=>''
+    }
+  },
+	setup(prop,{emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			isShowDialog: false,
+			ruleForm: {
+        dictCode: 0,
+        dictLabel: '',
+        dictValue: '',
+        dictSort: 0,
+        isDefault:0,
+        status: 1,
+        remark: '',
+        dictType:prop.dictType
+			},
+      rules: {
+        dictLabel: [
+          { required: true, message: "数据标签不能为空", trigger: "blur" }
+        ],
+        dictValue: [
+          { required: true, message: "数据键值不能为空", trigger: "blur" }
+        ],
+        dictSort: [
+          { required: true, message: "数据顺序不能为空", trigger: "blur" }
+        ]
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row: RuleFormState|null) => {
+      resetForm();
+      if (row){
+        getData(row.dictCode).then((res:any)=>{
+          state.ruleForm = res.data.dict
+        })
+        state.ruleForm = row;
+      }
+			state.isShowDialog = true;
+		};
+    const resetForm = ()=>{
+      state.ruleForm = {
+        dictCode: 0,
+        dictLabel: '',
+        dictValue: '',
+        dictSort: 0,
+        isDefault:0,
+        status: 1,
+        remark: '',
+        dictType:prop.dictType
+      }
+    };
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.dictCode!==0){
+            //修改
+            editData(state.ruleForm).then(()=>{
+              ElMessage.success('字典数据修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('dataList')
+            })
+          }else{
+            //添加
+            addData(state.ruleForm).then(()=>{
+              ElMessage.success('字典数据添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('dataList')
+            })
+          }
+        }
+      });
+		};
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/dict/dataList.vue b/src/views/system/dict/dataList.vue
new file mode 100644
index 0000000..96351bf
--- /dev/null
+++ b/src/views/system/dict/dataList.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+          <el-form-item label="字典类型" prop="dictType">
+            <el-input
+                v-model="tableData.param.dictType"
+                placeholder="请输入字典类型"
+                clearable
+                size="default"
+                @keyup.enter.native="dataList"
+            />
+          </el-form-item>
+          <el-form-item label="字典标签" prop="dictLabel">
+            <el-input
+                v-model="tableData.param.dictLabel"
+                placeholder="请输入字典标签"
+                clearable
+                size="default"
+                @keyup.enter.native="dataList"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status" style="width: 200px;">
+            <el-select
+                v-model="tableData.param.status"
+                placeholder="字典状态"
+                clearable
+                size="default"
+                style="width: 240px"
+            >
+              <el-option label="启用"  :value="1"/>
+              <el-option label="禁用"  :value="0"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="dataList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增字典
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              删除字典
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="字典编码" align="center" prop="dictCode" />
+        <el-table-column label="字典标签" align="center" prop="dictLabel" />
+        <el-table-column label="字典键值" align="center" prop="dictValue" />
+        <el-table-column label="字典排序" align="center" prop="dictSort" />
+        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+        <el-table-column label="创建时间" align="center" prop="createdAt" width="180"/>
+        <el-table-column prop="status" label="字典状态" show-overflow-tooltip>
+          <template #default="scope">
+            <el-tag type="success" v-if="scope.row.status">启用</el-tag>
+            <el-tag type="info" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
+            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="dataList"
+      />
+    </el-card>
+    <EditDic ref="editDicRef" @dataList="dataList" :dict-type="tableData.param.dictType"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
+import EditDic from '/@/views/system/dict/component/editDicData.vue';
+import {getDataList,deleteData} from "/@/api/system/dict/data";
+import { useRoute } from 'vue-router';
+
+
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  dictCode: number;
+  dictSort: number;
+  dictLabel: string;
+  dictValue: string;
+  dictType: string;
+  status: number,
+  remark: string;
+  createdAt: string
+}
+interface TableDataState {
+  ids:number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      dictType: string;
+      dictLabel:string;
+      status: string;
+    };
+  };
+}
+
+export default defineComponent({
+  name: 'apiV1SystemDictDataList',
+  components: { EditDic },
+  setup() {
+    const route = useRoute();
+    const addDicRef = ref();
+    const editDicRef = ref();
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      ids:[],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+          dictLabel:'',
+          dictType:'',
+          status:''
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      dataList()
+    };
+    const dataList=()=>{
+      getDataList(state.tableData.param).then((res:any)=>{
+        state.tableData.data = res.data.list;
+        state.tableData.total = res.data.total;
+      });
+    };
+    // 打开新增字典弹窗
+    const onOpenAddDic = () => {
+      editDicRef.value.openDialog();
+    };
+    // 打开修改字典弹窗
+    const onOpenEditDic = (row: TableDataRow) => {
+      editDicRef.value.openDialog(row);
+    };
+    // 删除字典
+    const onRowDel = (row: TableDataRow) => {
+      let msg = '你确定要删除所选数据？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `此操作将永久删除用户：“${row.dictLabel}”，是否继续?`
+        ids = [row.dictCode]
+      }else{
+        ids = state.ids
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要删除的数据。');
+        return
+      }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+          .then(() => {
+            deleteData(ids).then(()=>{
+              ElMessage.success('删除成功');
+              dataList();
+            })
+          })
+          .catch(() => {});
+    };
+    // 页面加载时
+    onMounted(() => {
+      const dictType = route.params && route.params.dictType;
+      state.tableData.param.dictType = <string>dictType
+      initTableData();
+    });
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return
+      formEl.resetFields()
+      dataList()
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection:TableDataRow[])=> {
+      state.ids = selection.map(item => item.dictCode)
+    };
+    return {
+      addDicRef,
+      editDicRef,
+      queryRef,
+      onOpenAddDic,
+      onOpenEditDic,
+      onRowDel,
+      dataList,
+      resetQuery,
+      handleSelectionChange,
+      ...toRefs(state),
+    };
+  },
+});
+</script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
new file mode 100644
index 0000000..fd47b00
--- /dev/null
+++ b/src/views/system/dict/index.vue
@@ -0,0 +1,245 @@
+<template>
+	<div class="system-dic-container">
+		<el-card shadow="hover">
+			<div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+          <el-form-item label="字典名称" prop="dictName">
+            <el-input
+                v-model="tableData.param.dictName"
+                placeholder="请输入字典名称"
+                clearable
+                size="default"
+                style="width: 240px"
+                @keyup.enter.native="typeList"
+            />
+          </el-form-item>
+          <el-form-item label="字典类型" prop="dictType">
+            <el-input
+                v-model="tableData.param.dictType"
+                placeholder="请输入字典类型"
+                clearable
+                size="default"
+                style="width: 240px"
+                @keyup.enter.native="typeList"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status" style="width: 200px;">
+            <el-select
+                v-model="tableData.param.status"
+                placeholder="字典状态"
+                clearable
+                size="default"
+                style="width: 240px"
+            >
+              <el-option label="启用"  :value="1"/>
+              <el-option label="禁用"  :value="0"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间" prop="dateRange">
+            <el-date-picker
+                v-model="tableData.param.dateRange"
+                size="default"
+                style="width: 240px"
+                value-format="YYYY-MM-DD"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="typeList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增字典
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              删除字典
+            </el-button>
+          </el-form-item>
+        </el-form>
+			</div>
+			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="字典ID" align="center" prop="dictId" width="120"/>
+        <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
+        <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+          <template #default="scope">
+            <router-link :to="'/system/dict/data/list/' + scope.row.dictType" class="link-type">
+              <span>{{ scope.row.dictType }}</span>
+            </router-link>
+          </template>
+        </el-table-column>
+				<el-table-column prop="status" label="字典状态" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tag type="success" v-if="scope.row.status">启用</el-tag>
+						<el-tag type="info" v-else>禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="remark" label="字典描述" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip width="180"></el-table-column>
+				<el-table-column label="操作" width="200">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
+						<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="typeList"
+      />
+		</el-card>
+		<EditDic ref="editDicRef" @typeList="typeList"/>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
+import EditDic from '/@/views/system/dict/component/editDic.vue';
+import {deleteType, getTypeList} from "/@/api/system/dict/type";
+
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  dictId:number;
+  dictName: string;
+  dictType: string;
+  status: number;
+  remark:string;
+  createdAt:string;
+}
+interface TableDataState {
+  ids:number[];
+	tableData: {
+		data: Array<TableDataRow>;
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+      dictName: string;
+      dictType: string;
+      status: string;
+      dateRange:string[];
+		};
+	};
+}
+
+export default defineComponent({
+	name: 'systemDic',
+	components: { EditDic },
+	setup() {
+		const addDicRef = ref();
+		const editDicRef = ref();
+    const queryRef = ref();
+		const state = reactive<TableDataState>({
+      ids:[],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+          dictName:'',
+          dictType:'',
+          status:'',
+          dateRange:[],
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+      typeList()
+		};
+    const typeList=()=>{
+      getTypeList(state.tableData.param).then((res:any)=>{
+        state.tableData.data = res.data.dictTypeList;
+        state.tableData.total = res.data.total;
+      });
+    };
+		// 打开新增字典弹窗
+		const onOpenAddDic = () => {
+      editDicRef.value.openDialog();
+		};
+		// 打开修改字典弹窗
+		const onOpenEditDic = (row: TableDataRow) => {
+			editDicRef.value.openDialog(row);
+		};
+		// 删除字典
+		const onRowDel = (row: TableDataRow) => {
+      let msg = '你确定要删除所选数据？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `此操作将永久删除用户：“${row.dictName}”，是否继续?`
+        ids = [row.dictId]
+      }else{
+        ids = state.ids
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要删除的数据。');
+        return
+      }
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+          deleteType(ids).then(()=>{
+            ElMessage.success('删除成功');
+            typeList();
+          })
+				})
+				.catch(() => {});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return
+      formEl.resetFields()
+      typeList()
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection:TableDataRow[])=> {
+      state.ids = selection.map(item => item.dictId)
+    };
+		return {
+			addDicRef,
+			editDicRef,
+      queryRef,
+			onOpenAddDic,
+			onOpenEditDic,
+			onRowDel,
+      typeList,
+      resetQuery,
+      handleSelectionChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/menu/component/editMenu.vue b/src/views/system/menu/component/editMenu.vue
new file mode 100644
index 0000000..e817728
--- /dev/null
+++ b/src/views/system/menu/component/editMenu.vue
@@ -0,0 +1,334 @@
+<template>
+	<div class="system-edit-menu-container">
+		<el-dialog :title="(acType==='add'?'新增':'修改')+'菜单'" v-model="isShowDialog"
+               width="769px" :close-on-click-modal="false">
+			<el-form :model="ruleForm" :rules="rules"
+               ref="ruleFormRef" size="default" label-width="80px">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="上级菜单">
+							<el-cascader
+								:options="menuData"
+								:props="{ label: 'title',value: 'id',checkStrictly: true,emitPath: false }"
+								placeholder="请选择上级菜单"
+								clearable
+								class="w100"
+								v-model="ruleForm.pid"
+							>
+								<template #default="{ node, data }">
+									<span>{{ data.title }}</span>
+									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+								</template>
+							</el-cascader>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="菜单类型" prop="menuType">
+							<el-radio-group v-model="ruleForm.menuType">
+                <el-radio label="0">目录</el-radio>
+                <el-radio label="1">菜单</el-radio>
+                <el-radio label="2">按钮</el-radio>
+							</el-radio-group>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="菜单名称" prop="menuName">
+							<el-input v-model="ruleForm.menuName" placeholder="请填写菜单名称" clearable></el-input>
+						</el-form-item>
+					</el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="接口规则" prop="name">
+              <el-input v-model="ruleForm.name" placeholder="后端 aip 地址" clearable></el-input>
+            </el-form-item>
+          </el-col>
+					<template v-if="ruleForm.menuType === '0'||ruleForm.menuType === '1'">
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="路由路径" prop="path">
+								<el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="重定向">
+								<el-input v-model="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="菜单图标">
+								<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.icon" type="all" />
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="组件路径" prop="component">
+								<el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="链接地址">
+								<el-input v-model="ruleForm.linkUrl" placeholder="外链/内嵌时链接地址（http:xxx.com）" clearable :disabled="ruleForm.isLink===0">
+								</el-input>
+							</el-form-item>
+						</el-col>
+					</template>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="权限标识">
+              <el-select v-model="ruleForm.roles" multiple placeholder="选择角色" clearable class="w100">
+                <el-option v-for="role in roles" :key="'role_'+role.id" :label="role.name" :value="role.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="菜单排序">
+							<el-input-number v-model="ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
+						</el-form-item>
+					</el-col>
+					<template v-if="ruleForm.menuType === '0'||ruleForm.menuType === '1'">
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="是否隐藏">
+								<el-radio-group v-model="ruleForm.isHide">
+                  <el-radio
+                      v-for="dict in visibleOptions"
+                      :key="dict.value"
+                      :label="dict.value"
+                  >{{ dict.label }}</el-radio>
+								</el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="页面缓存">
+								<el-radio-group v-model="ruleForm.isKeepAlive">
+									<el-radio :label="1">缓存</el-radio>
+									<el-radio :label="0">不缓存</el-radio>
+								</el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="是否固定">
+								<el-radio-group v-model="ruleForm.isAffix">
+									<el-radio :label="1">固定</el-radio>
+									<el-radio :label="0">不固定</el-radio>
+								</el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="是否外链">
+								<el-radio-group v-model="ruleForm.isLink" :disabled="ruleForm.isIframe===1">
+									<el-radio :label="1">是</el-radio>
+									<el-radio :label="0">否</el-radio>
+								</el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+							<el-form-item label="是否内嵌">
+								<el-radio-group v-model="ruleForm.isIframe" @change="onSelectIframeChange">
+									<el-radio :label="1">是</el-radio>
+									<el-radio :label="0">否</el-radio>
+								</el-radio-group>
+							</el-form-item>
+						</el-col>
+					</template>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{acType==='add'?'新 增':'修 改'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,nextTick } from 'vue';
+import IconSelector from '/@/components/iconSelector/index.vue';
+import { refreshBackEndControlRoutes } from "/@/router/backEnd";
+import {getMenuParams, addMenu, getMenuInfo, updateMenu} from "/@/api/system/menu";
+import {ElMessage} from "element-plus"
+
+
+export default defineComponent({
+	name: 'systemEditMenu',
+	components: { IconSelector },
+  props:{
+    visibleOptions:{
+      type:Array,
+      default:()=>[],
+    },
+    acType:{
+      type:String,
+      default:()=>'add'
+    }
+  },
+	setup(props,{emit}) {
+    const ruleFormRef = ref<HTMLElement | null>(null);
+    const {proxy} = getCurrentInstance() as any;
+		const state = reactive({
+      loading: false,
+			isShowDialog: false,
+      roles:[],
+			// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
+			ruleForm: {
+        id:undefined,
+				pid: 0, // 上级菜单
+				menuType: '0', // 菜单类型
+        menuName:'', // 菜单名称
+				name: '', // 接口规则
+				component: '', // 组件路径
+				isLink: 0, // 是否外链
+				menuSort: 0, // 菜单排序
+				path: '', // 路由路径
+				redirect: '', // 路由重定向，有子集 children 时
+        icon: '', // 菜单图标
+        roles: [], // 权限标识，取角色管理
+        isHide: '0', // 是否隐藏
+        isKeepAlive: 1, // 是否缓存
+        isAffix: 0, // 是否固定
+        linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
+        isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
+			},
+      // 表单校验
+      rules: {
+        parentId: [
+          {required: true, message: "父菜单不能为空", trigger: "blur"},
+        ],
+        name:[
+          {required: true, message: "接口规则不能为空", trigger: "blur"},
+        ],
+        path:[
+          {required: true, message: "路由地址不能为空", trigger: "blur"},
+        ],
+        menuName: [
+          {required: true, message: "菜单名称不能为空", trigger: "blur"},
+        ],
+        menuType: [
+          {required: true, message: "菜单类型不能为空", trigger: "blur"},
+        ],
+      },
+			menuData: [], // 上级菜单数据
+		});
+
+		// 打开弹窗
+		const openDialog = (row: any) => {
+      initForm();
+      nextTick(()=>{
+        //获取角色信息
+        getMenuParams().then((res:any)=>{
+          state.roles = res.data.roles;
+          const menu = { id: 0, title: '主类目', children: [] };
+          menu.children = proxy.handleTree(res.data.menus, "id","pid");
+          state.menuData=new Array(menu) as any;
+        });
+        if(row) {
+          if (props.acType === 'add') {
+            state.ruleForm.pid = row.id
+          } else if (props.acType === 'edit') {
+            getMenuInfo(row.id).then(res => {
+              const data = res.data.rule;
+              state.ruleForm = {
+                id: data.id,
+                pid: data.pid, // 上级菜单
+                menuType: '' + data.menuType, // 菜单类型
+                menuName: data.title, // 菜单名称
+                name: data.name, // 接口规则
+                component: data.component, // 组件路径
+                isLink: data.isLink, // 是否外链
+                menuSort: data.weigh, // 菜单排序
+                path: data.path, // 路由路径
+                redirect: data.redirect, // 路由重定向，有子集 children 时
+                icon: data.icon, // 菜单图标
+                roles: res.data.roleIds, // 权限标识，取角色管理
+                isHide: '' + data.isHide, // 是否隐藏
+                isKeepAlive: data.isCached, // 是否缓存
+                isAffix: data.isAffix, // 是否固定
+                linkUrl: data.linkUrl, // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
+                isIframe: data.isIframe, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
+              }
+            })
+          }
+        }
+        state.isShowDialog = true;
+        state.loading = false;
+      })
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 是否内嵌下拉改变
+		const onSelectIframeChange = () => {
+			if (state.ruleForm.isIframe===1) state.ruleForm.isLink = 1;
+			else state.ruleForm.isLink = 0;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(ruleFormRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          state.loading = true;
+          if(props.acType==='add'){
+            //添加
+            addMenu(state.ruleForm).then(()=>{
+              ElMessage.success('菜单添加成功');
+              closeDialog(); // 关闭弹窗
+              resetMenuSession()
+              emit('menuList')
+            }).finally(()=>{
+              state.loading = false;
+            })
+          }else{
+            //修改
+            updateMenu(state.ruleForm).then(()=>{
+              ElMessage.success('菜单修改成功');
+              closeDialog(); // 关闭弹窗
+              resetMenuSession()
+              emit('menuList')
+            }).finally(()=>{
+              state.loading = false;
+            })
+          }
+        }
+      })
+		};
+    // 重置菜单session
+    const resetMenuSession = () => {
+      refreshBackEndControlRoutes();
+    };
+    const initForm=()=>{
+      state.ruleForm =  {
+        id:undefined,
+        pid: 0, // 上级菜单
+        menuType: '0', // 菜单类型
+        menuName:'', // 菜单名称
+        name: '', // 接口规则
+        component: '', // 组件路径
+        isLink: 0, // 是否外链
+        menuSort: 0, // 菜单排序
+        path: '', // 路由路径
+        redirect: '', // 路由重定向，有子集 children 时
+        icon: '', // 菜单图标
+        roles: [], // 权限标识，取角色管理
+        isHide: '0', // 是否隐藏
+        isKeepAlive: 1, // 是否缓存
+        isAffix: 0, // 是否固定
+        linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
+        isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
+      }
+    };
+		return {
+      ruleFormRef,
+			openDialog,
+			closeDialog,
+			onSelectIframeChange,
+			onCancel,
+			onSubmit,
+      resetMenuSession,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
new file mode 100644
index 0000000..228558f
--- /dev/null
+++ b/src/views/system/menu/index.vue
@@ -0,0 +1,157 @@
+<template>
+	<div class="system-menu-container">
+		<el-card shadow="hover">
+			<div class="system-menu-search mb15">
+        <el-form :inline="true">
+          <el-form-item label="菜单名称">
+            <el-input
+                v-model="queryParams.title"
+                placeholder="请输入菜单名称"
+                clearable
+                class="w-50 m-2"
+                size="default"
+            />
+          </el-form-item>
+          <el-form-item label="组件路径">
+            <el-input
+                v-model="queryParams.component"
+                placeholder="请输入组件路径"
+                clearable
+                size="default"
+                class="w-50 m-2"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="handleQuery">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddMenu(null)" v-auth="'api/v1/system/menu/add'">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增菜单
+            </el-button>
+          </el-form-item>
+        </el-form>
+			</div>
+			<el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+				<el-table-column label="菜单名称" show-overflow-tooltip>
+					<template #default="scope">
+						<SvgIcon :name="scope.row.icon" />
+						<span class="ml10">{{ scope.row.title }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
+				<el-table-column label="组件路径" show-overflow-tooltip>
+					<template #default="scope">
+						<span>{{ scope.row.component }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="api接口" show-overflow-tooltip>
+					<template #default="scope">
+						<span>{{ scope.row.name }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="排序" show-overflow-tooltip width="80">
+					<template #default="scope">
+						{{ scope.row.weigh }}
+					</template>
+				</el-table-column>
+				<el-table-column label="类型" show-overflow-tooltip width="80">
+					<template #default="scope">
+						<el-tag :type="scope.row.menuType===0?'danger':(scope.row.menuType===1?'success':'warning')"
+                    size="small">{{scope.row.menuType===0?'目录':(scope.row.menuType===1?'菜单':'按钮') }}</el-tag>
+					</template>
+				</el-table-column>
+        <el-table-column prop="isHide" label="显示状态" :formatter="formatIsHide" width="120"></el-table-column>
+				<el-table-column label="操作"  width="240">
+					<template #default="scope">
+						<el-button v-if="scope.row.menuType!==2" size="small" text type="primary" @click="onOpenAddMenu(scope.row)" v-auth="'api/v1/system/menu/add'">新增</el-button>
+						<el-button size="small" text type="primary" @click="onOpenEditMenu(scope.row)" v-auth="'api/v1/system/menu/update'">修改</el-button>
+						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)" v-auth="'api/v1/system/menu/delete'">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-card>
+		<EditMenu ref="editMenuRef" @menuList="menuList" :visibleOptions="sys_show_hide" :acType="acType"/>
+	</div>
+</template>
+
+<script lang="ts">
+import {ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance, unref} from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import EditMenu from '/@/views/system/menu/component/editMenu.vue';
+import {delMenu, getMenuList} from "/@/api/system/menu";
+export default defineComponent({
+	name: 'apiV1SystemAuthMenuList',
+	components: { EditMenu },
+	setup() {
+		const editMenuRef = ref();
+		const state = reactive({
+      queryParams:{
+        title:"",
+        component:""
+      },
+      menuTableData:[],
+    });
+    const {proxy} = getCurrentInstance() as any;
+    const {sys_show_hide} = proxy.useDict('sys_show_hide')
+    const acType = ref('add')
+		// 打开新增菜单弹窗
+		const onOpenAddMenu = (row:any) => {
+      acType.value = 'add'
+      editMenuRef.value.openDialog(row);
+		};
+		// 打开编辑菜单弹窗
+		const onOpenEditMenu = (row: any) => {
+      acType.value='edit'
+			editMenuRef.value.openDialog(row);
+		};
+		// 删除当前行
+		const onTabelRowDel = (row: any) => {
+			ElMessageBox.confirm(`此操作将永久删除菜单：“${row.title}”, 是否继续?`, '提示', {
+				confirmButtonText: '删除',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+          delMenu(row.id).then(()=>{
+            ElMessage.success('删除成功');
+            proxy.$refs['editMenuRef'].resetMenuSession()
+            menuList();
+          })
+				})
+				.catch(() => {});
+		};
+    const formatIsHide = (row:any)=>{
+      return proxy.selectDictLabel(unref(sys_show_hide), ''+row.isHide);
+    };
+    onBeforeMount(()=>{
+      menuList()
+    });
+    const handleQuery=() => {
+      menuList();
+    };
+    const menuList = ()=>{
+      getMenuList(state.queryParams).then(res=>{
+        state.menuTableData = proxy.handleTree(res.data.rules??[], "id","pid");
+      })
+    };
+		return {
+			editMenuRef,
+			onOpenAddMenu,
+			onOpenEditMenu,
+			onTabelRowDel,
+      formatIsHide,
+      menuList,
+      handleQuery,
+			...toRefs(state),
+      sys_show_hide,
+      acType
+		};
+	},
+});
+</script>
diff --git a/src/views/system/monitor/loginLog/index.vue b/src/views/system/monitor/loginLog/index.vue
new file mode 100644
index 0000000..002564c
--- /dev/null
+++ b/src/views/system/monitor/loginLog/index.vue
@@ -0,0 +1,262 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+          <el-form-item label="登录IP" prop="ipaddr">
+            <el-input
+                v-model="tableData.param.ipaddr"
+                placeholder="请输入登录地址"
+                clearable
+                style="width: 180px;"
+                size="default"
+                @keyup.enter.native="dataList"
+            />
+          </el-form-item>
+
+          <el-form-item label="登录地点" prop="loginLocation">
+            <el-input
+                v-model="tableData.param.loginLocation"
+                placeholder="请输入登录地点"
+                clearable
+                style="width: 180px;"
+                size="default"
+                @keyup.enter.native="dataList"
+            />
+          </el-form-item>
+
+          <el-form-item label="用户名称" prop="userName">
+            <el-input
+                v-model="tableData.param.userName"
+                placeholder="请输入用户名称"
+                clearable
+                style="width: 180px;"
+                size="default"
+                @keyup.enter.native="dataList"
+            />
+          </el-form-item>
+
+          <el-form-item label="状态" prop="status">
+            <el-select
+                v-model="tableData.param.status"
+                placeholder="登录状态"
+                clearable
+                size="default"
+                style="width: 180px"
+            >
+              <el-option
+                  v-for="dict in admin_login_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="登录时间" prop="dateRange">
+            <el-date-picker
+                v-model="tableData.param.dateRange"
+                size="default"
+                style="width: 240px"
+                value-format="YYYY-MM-DD"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="dataList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              删除日志
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="onRowClear()">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              清空日志
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="编号" align="center" prop="infoId" />
+        <el-table-column label="登录名称" align="center" prop="loginName" />
+        <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
+        <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+        <el-table-column label="浏览器" align="center" prop="browser" />
+        <el-table-column label="操作系统" align="center" prop="os" />
+        <el-table-column label="登录状态" align="center" prop="status" :formatter="statusFormat" />
+        <el-table-column label="操作信息" align="center" prop="msg" />
+        <el-table-column label="登录日期" align="center" prop="loginTime" width="180" />
+        <el-table-column label="登录模块" alian="center" prop="module"></el-table-column>
+      </el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="dataList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent,getCurrentInstance,unref } from 'vue';
+import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
+import { logList,deleteLog,clearLog } from '/@/api/system/monitor/loginLog';
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  infoId:number;
+  loginName:string;
+  ipaddr:string;
+  loginLocation:string;
+  browser:string;
+  os:string;
+  status:number;
+  msg:string;
+  loginTime:string;
+  module:string;
+}
+interface TableDataState {
+  ids:number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      dateRange: string[];
+      status: string;
+      ipaddr:string;
+      loginLocation:string;
+      userName:string;
+    };
+  };
+}
+
+export default defineComponent({
+  name: 'apiV1SystemLoginLogList',
+  setup() {
+    const {proxy} = getCurrentInstance() as any;
+    const queryRef = ref();
+    const {admin_login_status} = proxy.useDict('admin_login_status')
+    const state = reactive<TableDataState>({
+      ids:[],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+          dateRange: [],
+          status: '',
+          ipaddr:'',
+          loginLocation:'',
+          userName:''
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      dataList()
+    };
+    const dataList=()=>{
+      logList(state.tableData.param).then((res:any)=>{
+        state.tableData.data = res.data.list;
+        state.tableData.total = res.data.total;
+      });
+    };
+    // 删除日志
+    const onRowDel = (row: TableDataRow) => {
+      let msg = '你确定要删除所选数据？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `此操作将永久删除：“${row.loginName}”，是否继续?`
+        ids = [row.infoId]
+      }else{
+        ids = state.ids
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要删除的数据。');
+        return
+      }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+          .then(() => {
+            deleteLog(ids).then(()=>{
+              ElMessage.success('删除成功');
+              dataList();
+            })
+          })
+          .catch(() => {});
+    };
+    // 清空日志
+    const onRowClear = () => {
+      ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+          .then(() => {
+            clearLog().then(()=>{
+              ElMessage.success('清除成功');
+              dataList();
+            })
+          })
+          .catch(() => {});
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return
+      formEl.resetFields()
+      dataList()
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection:TableDataRow[])=> {
+      state.ids = selection.map(item => item.infoId)
+    };
+    // 登录状态字典翻译
+    const statusFormat = (row:TableDataRow) => {
+      return proxy.selectDictLabel(unref(admin_login_status), row.status);
+    };
+    return {
+      queryRef,
+      onRowDel,
+      dataList,
+      resetQuery,
+      handleSelectionChange,
+      statusFormat,
+      onRowClear,
+      admin_login_status,
+      ...toRefs(state),
+    };
+  },
+});
+</script>
diff --git a/src/views/system/monitor/operLog/component/detail.vue b/src/views/system/monitor/operLog/component/detail.vue
new file mode 100644
index 0000000..120bfa0
--- /dev/null
+++ b/src/views/system/monitor/operLog/component/detail.vue
@@ -0,0 +1,194 @@
+<template>
+  <!-- 操作日志详情抽屉 -->
+  <div class="system-sysOperLog-detail">
+    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
+      <template #header>
+        <h4>操作日志详情</h4>
+      </template>
+      <el-form ref="formRef" :model="formData" label-width="100px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="日志编号">{{ formData.operId }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="系统模块">{{ formData.title }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作方法">{{ formData.method }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="请求方式">{{ proxy.getOptionValue(formData.requestMethod, requestMethodOptions,'value','label') }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作人员">{{ formData.operName }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门名称">{{formData.deptName}}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="请求URL">{{ formData.operUrl }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="主机地址">{{ formData.operIp }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作地点">{{ formData.operLocation }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="请求参数">{{ formData.operParam }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="错误消息">{{ formData.errorMsg }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作时间">{{ proxy.parseTime(formData.operTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-drawer>
+  </div>
+</template>
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref,getCurrentInstance,computed } from 'vue';
+import {
+  getSysOperLog
+} from "/@/api/system/monitor/operLog";
+import {
+  SysOperLogInfoData,
+  SysOperLogEditState,
+} from "/@/views/system/monitor/operLog/component/model"
+export default defineComponent({
+  name:"apiV1SystemSysOperLogDetail",
+  components:{
+  },
+  props:{
+    requestMethodOptions:{
+      type:Array,
+      default:()=>[]
+    },
+  },
+  setup(props,{emit}) {
+    const {proxy} = <any>getCurrentInstance()
+    const formRef = ref<HTMLElement | null>(null);
+    const menuRef = ref();
+    const state = reactive<SysOperLogEditState>({
+      loading:false,
+      isShowDialog: false,
+      formData: {
+        operId: undefined,
+        title: undefined,
+        businessType: undefined,
+        method: undefined,
+        requestMethod: undefined,
+        operatorType: undefined,
+        operName: undefined,
+        deptName: undefined,
+        operUrl: undefined,
+        operIp: undefined,
+        operLocation: undefined,
+        operParam: undefined,
+        jsonResult: undefined,
+        status: false ,
+        errorMsg: undefined,
+        operTime: undefined,
+        linkedSysOperLogSysDept: {
+          deptId:undefined,    // 部门id
+          deptName:undefined,    // 部门名称
+        },
+      },
+      // 表单校验
+      rules: {
+        operId : [
+          { required: true, message: "日志编号不能为空", trigger: "blur" }
+        ],
+        operName : [
+          { required: true, message: "操作人员不能为空", trigger: "blur" }
+        ],
+        deptName : [
+          { required: true, message: "部门名称不能为空", trigger: "blur" }
+        ],
+        status : [
+          { required: true, message: "操作状态（0正常 1异常）不能为空", trigger: "blur" }
+        ],
+      }
+    });
+    // 打开弹窗
+    const openDialog = (row?: SysOperLogInfoData) => {
+      resetForm();
+      if(row) {
+        getSysOperLog(row.operId!).then((res:any)=>{
+          const data = res.data;
+          state.formData = data;
+        })
+      }
+      state.isShowDialog = true;
+    };
+    // 关闭弹窗
+    const closeDialog = () => {
+      state.isShowDialog = false;
+    };
+    // 取消
+    const onCancel = () => {
+      closeDialog();
+    };
+    const resetForm = ()=>{
+      state.formData = {
+        operId: undefined,
+        title: undefined,
+        businessType: undefined,
+        method: undefined,
+        requestMethod: undefined,
+        operatorType: undefined,
+        operName: undefined,
+        deptName: undefined,
+        operUrl: undefined,
+        operIp: undefined,
+        operLocation: undefined,
+        operParam: undefined,
+        jsonResult: undefined,
+        status: false ,
+        errorMsg: undefined,
+        operTime: undefined,
+        linkedSysOperLogSysDept: {
+          deptId:undefined,    // 部门id
+          deptName:undefined,    // 部门名称
+        },
+      }
+    };
+    //关联sys_dept表选项
+    const getSysDeptItemsDeptName = () => {
+      emit("getSysDeptItemsDeptName")
+    }
+    return {
+      proxy,
+      openDialog,
+      closeDialog,
+      onCancel,
+      menuRef,
+      formRef,
+      getSysDeptItemsDeptName,
+      ...toRefs(state),
+    };
+  }
+})
+</script>
+<style scoped>
+.system-sysOperLog-detail :deep(.el-form-item--large .el-form-item__label){
+  font-weight: bolder;
+}
+.pic-block{
+  margin-right: 8px;
+}
+.file-block{
+  width: 100%;
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+  margin-bottom: 5px;
+  padding: 3px 6px;
+}
+.ml-2{margin-right: 5px;}
+</style>
diff --git a/src/views/system/monitor/operLog/component/model.ts b/src/views/system/monitor/operLog/component/model.ts
new file mode 100644
index 0000000..4b04ae3
--- /dev/null
+++ b/src/views/system/monitor/operLog/component/model.ts
@@ -0,0 +1,68 @@
+export interface SysOperLogTableColumns {
+    operId:number;  // 日志编号
+    title:string;  // 系统模块
+    requestMethod:string;  // 请求方式
+    operName:string;  // 操作人员
+    deptName:string;  // 部门名称
+    operUrl:string;  // 请求URL
+    operIp:string;  // 主机地址
+    operLocation:string;  // 操作地点
+    operParam:string;  // 请求参数
+    status:number;  // 操作状态（0正常 1异常）
+    operTime:string;  // 操作时间
+    linkedSysOperLogSysDept:LinkedSysOperLogSysDept;
+}
+
+
+export interface SysOperLogInfoData {
+    operId:number|undefined;        // 日志编号
+    title:string|undefined; // 系统模块
+    businessType:number|undefined; // 操作类型
+    method:string|undefined; // 操作方法
+    requestMethod:string|undefined; // 请求方式
+    operatorType:number|undefined; // 操作类别
+    operName:string|undefined; // 操作人员
+    deptName:string|undefined; // 部门名称
+    operUrl:string|undefined; // 请求URL
+    operIp:string|undefined; // 主机地址
+    operLocation:string|undefined; // 操作地点
+    operParam:string|undefined; // 请求参数
+    jsonResult:string|undefined; // 返回参数
+    status:boolean; // 操作状态（0正常 1异常）
+    errorMsg:string|undefined; // 错误消息
+    operTime:string|undefined; // 操作时间
+    linkedSysOperLogSysDept:LinkedSysOperLogSysDept;
+}
+
+
+export interface LinkedSysOperLogSysDept {
+    deptId:number|undefined;    // 部门id
+    deptName:string|undefined;    // 部门名称
+}
+
+
+export interface SysOperLogTableDataState {
+    operIds:any[];
+    tableData: {
+        data: Array<SysOperLogTableColumns>;
+        total: number;
+        loading: boolean;
+        param: {
+            pageNum: number;
+            pageSize: number;
+            title: string|undefined;
+            requestMethod: string|undefined;
+            operName: string|undefined;
+            status: number|undefined;
+            dateRange: string[];
+        };
+    };
+}
+
+
+export interface SysOperLogEditState{
+    loading:boolean;
+    isShowDialog: boolean;
+    formData:SysOperLogInfoData;
+    rules: object;
+}
diff --git a/src/views/system/monitor/operLog/index.vue b/src/views/system/monitor/operLog/index.vue
new file mode 100644
index 0000000..4db5728
--- /dev/null
+++ b/src/views/system/monitor/operLog/index.vue
@@ -0,0 +1,361 @@
+<template>
+  <div class="system-sysOperLog-container">
+    <el-card shadow="hover">
+      <div class="system-sysOperLog-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
+          <el-row>
+            <el-col :span="8" class="colBlock">
+              <el-form-item label="系统模块" prop="title">
+                <el-input
+                    v-model="tableData.param.title"
+                    placeholder="请输入系统模块"
+                    clearable
+                    size="small"
+                    @keyup.enter.native="sysOperLogList"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" class="colBlock">
+              <el-form-item label="请求方式" prop="requestMethod">
+                <el-select v-model="tableData.param.requestMethod" placeholder="请选择请求方式" clearable size="small">
+                  <el-option
+                      v-for="dict in sys_oper_log_type"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" :class="!showAll ? 'colBlock' : 'colNone'">
+              <el-form-item>
+                <el-button type="primary" size="small" @click="sysOperLogList"><el-icon><ele-Search /></el-icon>搜索</el-button>
+                <el-button size="small" @click="resetQuery(queryRef)"><el-icon><ele-Refresh /></el-icon>重置</el-button>
+                <el-button type="primary" link size="small" @click="toggleSearch">
+                  {{ word }}
+                  <el-icon v-show="showAll"><ele-ArrowUp/></el-icon>
+                  <el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
+                </el-button>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+              <el-form-item label="操作人员" prop="operName">
+                <el-input
+                    v-model="tableData.param.operName"
+                    placeholder="请输入操作人员"
+                    clearable
+                    size="small"
+                    @keyup.enter.native="sysOperLogList"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+              <el-form-item label="操作时间" prop="dateRange">
+                <el-date-picker
+                    clearable size="small" style="width: 200px"
+                    v-model="tableData.param.dateRange"
+                    type="daterange"
+                    range-separator="-"
+                    value-format="YYYY-MM-DD"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                ></el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+              <el-form-item>
+                <el-button type="primary" size="small" @click="sysOperLogList"><el-icon><ele-Search /></el-icon>搜索</el-button>
+                <el-button size="small" @click="resetQuery(queryRef)"><el-icon><ele-Refresh /></el-icon>重置</el-button>
+                <el-button type="primary" link size="small" @click="toggleSearch">
+                  {{ word }}
+                  <el-icon v-show="showAll"><ele-ArrowUp/></el-icon>
+                  <el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
+                </el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button
+                type="danger"
+                size="small"
+                :disabled="multiple"
+                @click="handleDelete(null)"
+                v-auth="'api/v1/system/sysOperLog/delete'"
+            ><el-icon><ele-Delete /></el-icon>删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button size="small" type="danger" class="ml10" @click="onRowClear()">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              清空日志
+            </el-button>
+          </el-col>
+        </el-row>
+      </div>
+      <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="日志编号" align="center" prop="operId"
+                         min-width="100px"
+        />
+        <el-table-column label="系统模块" align="center" prop="title"
+                         min-width="100px"
+        />
+        <el-table-column label="请求方式" align="center" prop="requestMethod" :formatter="requestMethodFormat"
+                         min-width="100px"
+        />
+        <el-table-column label="操作人员" align="center" prop="operName"
+                         min-width="100px"
+        />
+        <el-table-column label="部门名称" align="center" prop="deptName"
+                         min-width="100px"
+        />
+        <el-table-column label="请求URL" align="center" prop="operUrl"
+                         min-width="100px"
+                         :show-overflow-tooltip="true"
+        />
+        <el-table-column label="主机地址" align="center" prop="operIp"
+                         min-width="100px"
+        />
+        <el-table-column label="操作地点" align="center" prop="operLocation"
+                         min-width="100px"
+        />
+        <el-table-column label="操作时间" align="center" prop="operTime"
+                         min-width="120px"
+        >
+          <template #default="scope">
+            <span>{{ proxy.parseTime(scope.row.operTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding" min-width="120px" fixed="right">
+          <template #default="scope">
+            <el-button
+                size="small"
+                type="primary"
+                link
+                icon="el-icon-view"
+                @click="handleView(scope.row)"
+                v-auth="'api/v1/system/sysOperLog/view'"
+            >详情</el-button>
+            <el-button
+                size="small"
+                type="primary"
+                link
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-auth="'api/v1/system/sysOperLog/delete'"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="sysOperLogList"
+      />
+    </el-card>
+    <apiV1SystemSysOperLogDetail
+        ref="detailRef"
+        :requestMethodOptions="sys_oper_log_type"
+        :deptNameOptions="deptNameOptions"
+        @sysOperLogList="sysOperLogList"
+    ></apiV1SystemSysOperLogDetail>
+  </div>
+</template>
+<script lang="ts">
+import {ItemOptions} from "/@/api/items";
+import {toRefs, reactive, onMounted, ref, defineComponent, computed,getCurrentInstance,toRaw} from 'vue';
+import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
+import {
+  listSysOperLog,
+  delSysOperLog,
+  clearOperLog,
+} from "/@/api/system/monitor/operLog";
+import {
+  SysOperLogTableColumns,
+  SysOperLogInfoData,
+  SysOperLogTableDataState,
+} from "/@/views/system/monitor/operLog/component/model"
+import apiV1SystemSysOperLogDetail from "/@/views/system/monitor/operLog/component/detail.vue"
+export default defineComponent({
+  name: "apiV1SystemSysOperLogList",
+  components:{
+    apiV1SystemSysOperLogDetail
+  },
+  setup() {
+    const {proxy} = <any>getCurrentInstance()
+    const loading = ref(false)
+    const queryRef = ref()
+    const editRef = ref();
+    const detailRef = ref();
+    // 是否显示所有搜索选项
+    const showAll =  ref(false)
+    // 非单个禁用
+    const single = ref(true)
+    // 非多个禁用
+    const multiple =ref(true)
+    const word = computed(()=>{
+      if(showAll.value === false) {
+        //对文字进行处理
+        return "展开搜索";
+      } else {
+        return "收起搜索";
+      }
+    })
+    // 字典选项数据
+    const {
+      sys_oper_log_type,
+    } = proxy.useDict(
+      'sys_oper_log_type',
+    )
+    // deptNameOptions关联表数据
+    const deptNameOptions = ref<Array<ItemOptions>>([])
+    const state = reactive<SysOperLogTableDataState>({
+      operIds:[],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+          title: undefined,
+          requestMethod: undefined,
+          operName: undefined,
+          status: undefined,
+          dateRange: []
+        },
+      },
+    });
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      sysOperLogList()
+    };
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return
+      formEl.resetFields()
+      sysOperLogList()
+    };
+    // 获取列表数据
+    const sysOperLogList = ()=>{
+      loading.value = true
+      listSysOperLog(state.tableData.param).then((res:any)=>{
+        let list = res.data.list??[];
+        state.tableData.data = list;
+        state.tableData.total = res.data.total;
+        loading.value = false
+      })
+    };
+    const toggleSearch = () => {
+      showAll.value = !showAll.value;
+    }
+    // 请求方式字典翻译
+    const requestMethodFormat = (row:SysOperLogTableColumns) => {
+      return proxy.selectDictLabel(sys_oper_log_type.value, row.requestMethod);
+    }
+    // 多选框选中数据
+    const handleSelectionChange = (selection:Array<SysOperLogInfoData>) => {
+      state.operIds = selection.map(item => item.operId)
+      single.value = selection.length!=1
+      multiple.value = !selection.length
+    }
+    const handleAdd =  ()=>{
+      editRef.value.openDialog()
+    }
+    const handleUpdate = (row: SysOperLogTableColumns) => {
+      if(!row){
+        row = state.tableData.data.find((item:SysOperLogTableColumns)=>{
+          return item.operId ===state.operIds[0]
+        }) as SysOperLogTableColumns
+      }
+      editRef.value.openDialog(toRaw(row));
+    };
+    const handleDelete = (row: SysOperLogTableColumns) => {
+      let msg = '你确定要删除所选数据？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `此操作将永久删除数据，是否继续?`
+        ids = [row.operId]
+      }else{
+        ids = state.operIds
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要删除的数据。');
+        return
+      }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+          .then(() => {
+            delSysOperLog(ids).then(()=>{
+              ElMessage.success('删除成功');
+              sysOperLogList();
+            })
+          })
+          .catch(() => {});
+    }
+    // 清空日志
+    const onRowClear = () => {
+      ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+          .then(() => {
+            clearOperLog().then(()=>{
+              ElMessage.success('清除成功');
+              sysOperLogList();
+            })
+          })
+          .catch(() => {});
+    };
+    const handleView = (row:SysOperLogTableColumns)=>{
+      detailRef.value.openDialog(toRaw(row));
+    }
+    return {
+      proxy,
+      editRef,
+      detailRef,
+      showAll,
+      loading,
+      single,
+      multiple,
+      word,
+      queryRef,
+      resetQuery,
+      sysOperLogList,
+      toggleSearch,
+      requestMethodFormat,
+      sys_oper_log_type,
+      //关联表数据选项
+      deptNameOptions,
+      handleSelectionChange,
+      handleAdd,
+      handleUpdate,
+      handleDelete,
+      handleView,
+      onRowClear,
+      ...toRefs(state),
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+.colBlock {
+  display: block;
+}
+.colNone {
+  display: none;
+}
+</style>
diff --git a/src/views/system/monitor/server/index.vue b/src/views/system/monitor/server/index.vue
new file mode 100644
index 0000000..d4bd9e8
--- /dev/null
+++ b/src/views/system/monitor/server/index.vue
@@ -0,0 +1,508 @@
+<template>
+    <div class="system-user-container">
+        <el-row :gutter="30">
+            <el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
+                <el-card class="box-card">
+                    <template #header>
+                        <div class="card-header">
+                            <span>运行资源</span>
+                        </div>
+                    </template>
+                    <div class=" el-table--enable-row-hover el-table--medium">
+                        <table cellspacing="0" style="width: 100%;">
+                            <tbody>
+                            <tr>
+                                <td>
+                                    <div class="cell">操作系统:</div>
+                                </td>
+                                <td>
+                                    <div class="cell">{{sysInfo.sysOsName}}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell">系统架构:</div>
+                                </td>
+                                <td>
+                                    <div class="cell">{{sysInfo.sysOsArch}}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                              <td>
+                                <div class="cell">服务器名称:</div>
+                              </td>
+                              <td>
+                                <div class="cell">{{sysInfo.sysComputerName}}</div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td>
+                                <div class="cell">服务器IP:</div>
+                              </td>
+                              <td>
+                                <div class="cell">{{sysInfo.sysComputerIp}}</div>
+                              </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell">Go语言版本</div>
+                                </td>
+                                <td>
+                                    <div class="cell">{{sysInfo.goVersion}}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                              <td>
+                                <div class="cell">启动时间</div>
+                              </td>
+                              <td>
+                                <div class="cell">{{sysInfo.goStartTime}}</div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td>
+                                <div class="cell">运行时长:</div>
+                              </td>
+                              <td>
+                                <div class="cell">{{timeFormat(sysInfo.goRunTime)}}</div>
+                              </td>
+                            </tr>
+                            </tbody>
+                        </table>
+
+                    </div>
+                </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
+                <el-card class="box-card">
+                    <template #header>
+                        <div class="card-header">
+                            <span>硬盘资源</span>
+                        </div>
+                    </template>
+                  <div class=" el-table--enable-row-hover el-table--medium">
+                    <table cellspacing="0" style="width: 100%;">
+                      <tbody>
+                      <tr>
+                        <td>
+                          <div class="cell">盘符路径</div>
+                        </td>
+                        <td>
+                          <div class="cell">文件系统</div>
+                        </td>
+                        <td>
+                          <div class="cell">总大小</div>
+                        </td>
+                        <td>
+                          <div class="cell">可用大小</div>
+                        </td>
+                        <td>
+                          <div class="cell">已用大小</div>
+                        </td>
+                        <td>
+                          <div class="cell">已用百分比</div>
+                        </td>
+                      </tr>
+                      <tr v-for="(sysFile, index) in sysInfo.diskList" :key="index">
+                        <td>
+                          <div class="cell">{{ sysFile.path }}</div>
+                        </td>
+                        <td>
+                          <div class="cell">{{ sysFile.fstype }}</div>
+                        </td>
+                        <td>
+                          <div class="cell">{{ memorySizeFormat(sysFile.total) }}</div>
+                        </td>
+                        <td>
+                          <div class="cell">{{ memorySizeFormat(sysFile.free) }}</div>
+                        </td>
+                        <td>
+                          <div class="cell">{{ memorySizeFormat(sysFile.used) }}</div>
+                        </td>
+                        <td>
+                          <div class="cell">{{ sysFile.usedPercent }}%</div>
+                        </td>
+                      </tr>
+                      </tbody>
+                    </table>
+
+                  </div>
+                </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
+                <el-card class="box-card">
+                    <template #header>
+                        <div class="card-header">
+                            <span>CPU</span>
+                        </div>
+                    </template>
+                    <div class=" el-table--enable-row-hover el-table--medium">
+                        <el-row :gutter="30">
+                            <el-col :xs="24" :sm="24" :md="12">
+                                <table cellspacing="0" style="width: 100%;">
+                                    <tbody>
+                                    <tr>
+                                        <td>
+                                            <div class="cell">核心数:</div>
+                                        </td>
+                                        <td>
+                                            <div class="cell">{{sysInfo.cpuNum}}</div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div class="cell">使用率:</div>
+                                        </td>
+                                        <td>
+                                            <div class="cell">{{sysInfo.cpuUsed}}%</div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div class="cell">Load Avg 5:</div>
+                                        </td>
+                                        <td>
+                                            <div class="cell">{{sysInfo.cpuAvg5}}%</div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                      <td>
+                                        <div class="cell">Load Avg 15:</div>
+                                      </td>
+                                      <td>
+                                        <div class="cell">{{sysInfo.cpuAvg15}}%</div>
+                                      </td>
+                                    </tr>
+                                    </tbody>
+                                </table>
+                            </el-col>
+                            <el-col :xs="24" :sm="24" :md="12">
+                                <div style="min-height: 280px;" ref="chartsWarningRef1"></div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
+                <el-card class="box-card">
+                    <template #header>
+                        <div class="card-header">
+                            <span>内存</span>
+                        </div>
+                    </template>
+                    <div class=" el-table--enable-row-hover el-table--medium">
+                        <el-row :gutter="30">
+                            <el-col :xs="24" :sm="24" :md="12">
+                                <table cellspacing="0" style="width: 100%;">
+                                    <tbody>
+                                    <tr>
+                                        <td>
+                                            <div class="cell">总数:</div>
+                                        </td>
+                                        <td>
+                                            <div class="cell">{{ memorySizeFormat(sysInfo.memTotal) }}</div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div class="cell">已使用:</div>
+                                        </td>
+                                        <td>
+                                            <div class="cell">{{ memorySizeFormat(sysInfo.memUsed)}}</div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div class="cell">剩余:</div>
+                                        </td>
+                                        <td>
+                                            <div class="cell">{{ memorySizeFormat(sysInfo.memFree) }}</div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                      <td>
+                                        <div class="cell">GFast系统使用:</div>
+                                      </td>
+                                      <td>
+                                        <div class="cell">{{ memorySizeFormat(sysInfo.goUsed)}}</div>
+                                      </td>
+                                    </tr>
+                                    </tbody>
+                                </table>
+                            </el-col>
+                            <el-col :xs="24" :sm="24" :md="12">
+                                <div style="min-height: 280px;" ref="chartsWarningRef2"></div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script lang="ts">
+	import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent  } from 'vue';
+	import * as echarts from 'echarts';
+	import 'echarts-wordcloud';
+  import { getSysInfo } from "/@/api/system/monitor/server";
+  let interval: any = null
+	export default defineComponent({
+		name: 'monitor',
+		components: {},
+		setup() {
+			const { proxy } = getCurrentInstance() as any;
+			const state: any = reactive({
+				myCharts: [],
+        sysInfo:{}
+			});
+
+
+      let myChart1: any;
+      let myChart2: any;
+      function setOptChart1 (value:number) {
+        myChart1.setOption({
+          series: [
+            {
+              data: [{
+                value: value,
+                name: 'CPU使用率',
+              }],
+            },
+          ],
+        })
+      }
+
+      function setOptChart2 (value:number) {
+        myChart2.setOption({
+          series: [
+            {
+              data: [{
+                value: value,
+                name: '内存使用率',
+              }],
+            },
+          ],
+        })
+      }
+
+			//CPU
+			const initChartCPU = () => {
+        myChart1 = echarts.init(proxy.$refs.chartsWarningRef1);
+				const option = {
+					tooltip: {
+						formatter: '{a} <br/>{b} : {c}%',
+					},
+					series: [
+						{
+							type: 'gauge',
+							name: 'CPU',
+							radius: '80%', //修改表盘大小
+							title: {
+								'show': true,             		//控制表盘title(今日预计用电量)字体是否显示
+								'fontSize': 14,           		//控制表盘title(今日预计用电量)字体大小
+								// 'color': 'red',           		//控制表盘title(今日预计用电量)字体颜色
+								'offsetCenter': [0, '40%'],    //设置表盘title(今日预计用电量)位置
+							},
+							axisLine: {
+								show: true,
+								lineStyle: { // 属性lineStyle控制线条样式
+									color: [
+										[0.3, '#4dabf7'],
+										[0.6, '#69db7c'],
+										[0.8, '#ffa94d'],
+										[1, '#ff6b6b'],
+									],
+								},
+							},
+							detail: {
+								valueAnimation: true,
+								formatter: '{value}%',
+								textStyle: {
+									fontSize: 36,
+									color: 'red',
+								},
+								offsetCenter: ['0', '80%'],    //表盘数据(30%)位置
+							},
+							// data: [
+							// 	{
+							// 		value: 15,
+							// 		name: 'CPU使用率',
+							// 	},
+							// ],
+						},
+					],
+				};
+				myChart1.setOption(option);
+				state.myCharts.push(myChart1);
+			};
+
+			//内存
+			const initChartRAM = () => {
+        myChart2 = echarts.init(proxy.$refs.chartsWarningRef2);
+				const option = {
+					tooltip: {
+						formatter: '{a} <br/>{b} : {c}%',
+					},
+					series: [
+						{
+							type: 'gauge',
+							name: '内存',
+							radius: '80%', //修改表盘大小
+							title: {
+								'show': true,             		//控制表盘title(今日预计用电量)字体是否显示
+								'fontSize': 14,           		//控制表盘title(今日预计用电量)字体大小
+								// 'color': 'red',           		//控制表盘title(今日预计用电量)字体颜色
+								'offsetCenter': [0, '40%'],    //设置表盘title(今日预计用电量)位置
+							},
+							axisLine: {
+								show: true,
+								lineStyle: { // 属性lineStyle控制线条样式
+									color: [
+										[0.3, '#4dabf7'],
+										[0.6, '#69db7c'],
+										[0.8, '#ffa94d'],
+										[1, '#ff6b6b'],
+									],
+								},
+							},
+							detail: {
+								valueAnimation: true,
+								formatter: '{value}%',
+								textStyle: {
+									fontSize: 36,
+									color: 'red',
+								},
+								offsetCenter: ['0', '80%'],    //表盘数据(30%)位置
+							},
+							// data: [
+							// 	{
+							// 		value: 30,
+							// 		name: '内存使用率',
+							// 	},
+							// ],
+						},
+					],
+				};
+				myChart2.setOption(option);
+				state.myCharts.push(myChart2);
+			};
+
+
+			// 页面加载时
+			onMounted(() => {
+				initChartCPU();
+				initChartRAM();
+			});
+
+
+      function getSystemInfo() {
+       getSysInfo().then((res:any)=>{
+          const {code , data} = res
+          if(code === 0) {
+            state.sysInfo = data
+            setOptChart1(data.cpuUsed)
+            setOptChart2(data.memUsage)
+          }
+        })
+      }
+
+			return {
+				...toRefs(state),
+        getSystemInfo,
+        setOptChart1,
+        setOptChart2,
+			};
+		},
+    created() {
+      this.getSystemInfo()
+      if (interval === null) {
+        interval = setInterval(()=> {
+          this.getSystemInfo()
+        }, 5000)
+      }
+    },
+    unmounted() {
+      if (interval !== null) {
+        clearInterval(interval)
+        interval = null
+      }
+    },
+    data() {
+      return {}
+    },
+    methods:{
+      memorySizeFormat(size:any){
+        size  = parseFloat(size);
+        let rank =0;
+        let rankchar ='Bytes';
+        while(size>1024&&rankchar!='TB'){
+          size = size/1024;
+          rank++;
+          if(rank==1){
+            rankchar="KB";
+          }
+          else if(rank==2){
+            rankchar="MB";
+          }
+          else if(rank==3){
+            rankchar="GB";
+          }else if(rank==4){
+            rankchar="TB";
+          }
+        }
+        return size.toFixed(2)+ " "+ rankchar;
+      },
+      timeFormat(second:any){
+        second = parseFloat(second)
+        let rank = 0
+        let rankchar = '秒'
+        while((second>60&&rankchar!='小时'&&rankchar!='天')||(second>24&&rankchar=='小时')){
+          if(rankchar=='小时'){
+            second = second/24;
+          }else{
+            second = second/60;
+          }
+          rank++
+          if(rank==1){
+            rankchar = '分'
+          }else if(rank==2){
+            rankchar='小时'
+          }else if(rank==3){
+            rankchar='天'
+          }
+        }
+        return second.toFixed(2)+" "+rankchar
+      }
+    }
+  });
+</script>
+
+<style scoped lang="scss">
+    .el-card{
+      height:300px;
+      overflow-y: auto;
+    }
+    .system-user-container {
+    }
+
+    .marg-b-15 {
+        margin-bottom: 15px;
+    }
+
+    .cell {
+        box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        word-break: break-all;
+        line-height: 36px;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    .box-card {
+        min-height: 372px;
+    }
+</style>
+
diff --git a/src/views/system/monitor/userOnline/index.vue b/src/views/system/monitor/userOnline/index.vue
new file mode 100644
index 0000000..6743f2e
--- /dev/null
+++ b/src/views/system/monitor/userOnline/index.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="system-post-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true">
+          <el-form-item label="登录IP" prop="ipaddr">
+            <el-input size="default" v-model="tableData.param.ipaddr" placeholder="请输入登录IP" class="w-50 m-2" clearable/>
+          </el-form-item>
+          <el-form-item label="用户名称" prop="userName">
+            <el-input size="default" v-model="tableData.param.userName" placeholder="请输入登录名称" class="w-50 m-2" clearable/>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="getList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              强制退出
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="60" />
+        <el-table-column prop="uuid" label="会话编号" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="userName" label="登录名称"></el-table-column>
+        <el-table-column prop="ip" label="主机" ></el-table-column>
+        <el-table-column prop="explorer" label="浏览器" show-overflow-tooltip></el-table-column>
+        <el-table-column label="操作系统" align="center" prop="os" />
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column label="操作" width="100">
+          <template #default="scope">
+            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">强退</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="getList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import {toRefs, reactive, onMounted, defineComponent, ref} from 'vue';
+import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
+import { forceLogout, listSysUserOnline} from "/@/api/system/monitor/userOnline";
+// 定义接口来定义对象的类型
+interface TableData {
+  id: number;
+  uuid: string;
+  token: string;
+  createTime: string;
+  userName: string;
+  ip: string;
+  explorer: string;
+  os: string;
+}
+interface TableDataState {
+  ids:number[];
+  tableData: {
+    data: Array<TableData>;
+    total: number;
+    loading: boolean;
+    param: {
+      ipaddr:string;
+      userName:string;
+      pageNum: number;
+      pageSize: number;
+    };
+  };
+}
+
+export default defineComponent({
+  name: 'apiV1SystemOnlineList',
+  setup() {
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      ids:[],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          ipaddr:'',
+          userName:'',
+          pageNum: 1,
+          pageSize: 10,
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      getList()
+    };
+    const getList = ()=>{
+      listSysUserOnline(state.tableData.param).then(res=>{
+        state.tableData.data = res.data.list??[];
+        state.tableData.total = res.data.total;
+      })
+    };
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return
+      formEl.resetFields()
+      getList()
+    };
+    // 删除岗位
+    const onRowDel = (row: TableData) => {
+      let msg = '你确定要强制退出用户登录？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `将强制用户下线，是否继续?`
+        ids = [row.id]
+      }else{
+        ids = state.ids
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要强制退出登录的用户。');
+        return
+      }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+          .then(() => {
+            forceLogout(ids).then(()=>{
+              ElMessage.success('退出成功');
+              getList();
+            })
+          })
+          .catch(() => {});
+    };
+    // 分页改变
+    const onHandleSizeChange = (val: number) => {
+      state.tableData.param.pageSize = val;
+    };
+    // 分页改变
+    const onHandleCurrentChange = (val: number) => {
+      state.tableData.param.pageNum = val;
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    // 多选框选中数据
+    const handleSelectionChange = (selection:Array<TableData>)=> {
+      state.ids = selection.map(item => item.id)
+    };
+    return {
+      queryRef,
+      onRowDel,
+      onHandleSizeChange,
+      onHandleCurrentChange,
+      getList,
+      handleSelectionChange,
+      resetQuery,
+      ...toRefs(state),
+    };
+  },
+});
+</script>
diff --git a/src/views/system/personal/index.vue b/src/views/system/personal/index.vue
new file mode 100644
index 0000000..7eb6270
--- /dev/null
+++ b/src/views/system/personal/index.vue
@@ -0,0 +1,508 @@
+<template>
+  <div class="personal">
+    <el-row>
+      <!-- 个人信息 -->
+      <el-col :xs="24" :sm="16">
+        <el-card shadow="hover" header="个人信息">
+          <div class="personal-user">
+            <div class="personal-user-left">
+              <el-upload
+                  class=" h100 personal-user-left-upload avatar-uploader"
+                  :action="baseURL+'/api/v1/system/upload/singleImg'"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess"
+                  :data="dataParam"
+              >
+                <img v-if="imageUrl" :src="proxy.getUpFileUrl(imageUrl)" class="avatar" />
+                <el-icon v-else class="avatar-uploader-icon"><ele-Plus  /></el-icon>
+
+              </el-upload>
+            </div>
+            <div class="personal-user-right">
+              <el-row>
+                <el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{ personalForm.nickname }}，{{ personalForm.describe }}！ </el-col>
+                <el-col :span="24">
+                  <el-row>
+                    <el-col :xs="24" :sm="8" class="personal-item mb6">
+                      <div class="personal-item-label">昵称：</div>
+                      <div class="personal-item-value">	{{ personalForm.nickname }}</div>
+                    </el-col>
+                    <el-col :xs="24" :sm="16" class="personal-item mb6">
+                      <div class="personal-item-label">联系电话：</div>
+                      <div class="personal-item-value">{{ personalForm.mobile }}</div>
+                    </el-col>
+                  </el-row>
+                </el-col>
+                <el-col :span="24">
+                  <el-row>
+                    <el-col :xs="24" :sm="8" class="personal-item mb6">
+                      <div class="personal-item-label">登录IP：</div>
+                      <div class="personal-item-value">{{personalForm.lastLoginIp}}</div>
+                    </el-col>
+                    <el-col :xs="24" :sm="16" class="personal-item mb6">
+                      <div class="personal-item-label">登录时间：</div>
+                      <div class="personal-item-value">{{personalForm.lastLoginTime}}</div>
+                    </el-col>
+                  </el-row>
+                </el-col>
+                <el-col :span="24">
+                  <el-row>
+                    <el-col :xs="24" :sm="8" class="personal-item mb6">
+                      <div class="personal-item-label">所属部门：</div>
+                      <div class="personal-item-value">{{ deptName }}</div>
+                    </el-col>
+                    <el-col :xs="24" :sm="16" class="personal-item mb6">
+                      <div class="personal-item-label">所属角色：</div>
+                      <div class="personal-item-value">{{ roles.join(',') }}</div>
+                    </el-col>
+                  </el-row>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 消息通知 -->
+      <el-col :xs="24" :sm="8" class="pl15 personal-info">
+        <el-card shadow="hover">
+          <template #header>
+            <span>消息通知</span>
+            <span class="personal-info-more">更多</span>
+          </template>
+          <div class="personal-info-box">
+            <ul class="personal-info-ul">
+              <li v-for="(v, k) in newsInfoList" :key="k" class="personal-info-li">
+                <a :href="v.link" target="_block" class="personal-info-li-title">{{ v.title }}</a>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 营销推荐 -->
+      <el-col :span="24">
+        <el-card shadow="hover" class="mt15" header="营销推荐">
+          <el-row :gutter="15" class="personal-recommend-row">
+            <el-col :sm="6" v-for="(v, k) in recommendList" :key="k" class="personal-recommend-col">
+              <div class="personal-recommend" :style="{ 'background-color': v.bg }">
+                <SvgIcon :name="v.icon" :size="70" :style="{ color: v.iconColor }" />
+                <div class="personal-recommend-auto">
+                  <div>{{ v.title }}</div>
+                  <div class="personal-recommend-msg">{{ v.msg }}</div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+
+      <!-- 更新信息 -->
+      <el-col :span="24">
+        <el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
+          <div class="personal-edit-title">基本信息</div>
+          <el-form :model="personalForm" size="default" label-width="40px" class="mt35 mb35">
+            <el-row :gutter="35">
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item label="昵称">
+                  <el-input v-model="personalForm.nickname" placeholder="请输入昵称" clearable></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item label="邮箱">
+                  <el-input v-model="personalForm.userEmail" placeholder="请输入邮箱" clearable></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item label="签名">
+                  <el-input v-model="personalForm.describe" placeholder="请输入签名" clearable></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item label="职业">
+                  <el-select v-model="personalForm.remark" placeholder="请选择职业" clearable class="w100">
+                    <el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
+                    <el-option label="生产 / 工艺 / 制造" value="2"></el-option>
+                    <el-option label="医疗 / 护理 / 制药" value="3"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item label="手机">
+                  <el-input v-model="personalForm.mobile" placeholder="请输入手机" clearable></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item label="性别">
+                  <el-select v-model="personalForm.sex" placeholder="请选择性别" clearable class="w100">
+                    <el-option label="男" value="1"></el-option>
+                    <el-option label="女" value="2"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                <el-form-item>
+                  <el-button type="primary"  @click="handleUpload">
+                    <el-icon>
+                      <ele-Position />
+                    </el-icon>
+                    更新个人信息
+                  </el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div class="personal-edit-title mb15">账号安全</div>
+          <div class="personal-edit-safe-box">
+            <div class="personal-edit-safe-item">
+              <div class="personal-edit-safe-item-left">
+                <div class="personal-edit-safe-item-left-label">账户密码</div>
+                <div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
+              </div>
+              <div class="personal-edit-safe-item-right">
+                <el-button text type="primary" @click="handleEditPass">立即修改</el-button>
+              </div>
+            </div>
+          </div>
+          <div class="personal-edit-safe-box">
+            <div class="personal-edit-safe-item">
+              <div class="personal-edit-safe-item-left">
+                <div class="personal-edit-safe-item-left-label">密保手机</div>
+                <div class="personal-edit-safe-item-left-value">已绑定手机：132****4108</div>
+              </div>
+              <div class="personal-edit-safe-item-right">
+                <el-button text type="primary">立即修改</el-button>
+              </div>
+            </div>
+          </div>
+          <div class="personal-edit-safe-box">
+            <div class="personal-edit-safe-item">
+              <div class="personal-edit-safe-item-left">
+                <div class="personal-edit-safe-item-left-label">密保问题</div>
+                <div class="personal-edit-safe-item-left-value">已设置密保问题，账号安全大幅度提升</div>
+              </div>
+              <div class="personal-edit-safe-item-right">
+                <el-button text type="primary">立即设置</el-button>
+              </div>
+            </div>
+          </div>
+          <div class="personal-edit-safe-box">
+            <div class="personal-edit-safe-item">
+              <div class="personal-edit-safe-item-left">
+                <div class="personal-edit-safe-item-left-label">绑定QQ</div>
+                <div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
+              </div>
+              <div class="personal-edit-safe-item-right">
+                <el-button text type="primary">立即设置</el-button>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, defineComponent,getCurrentInstance,onMounted } from 'vue';
+import { formatAxis } from '/@/utils/formatTime';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '/@/stores/userInfo';
+import {getPersonalInfo, editPersonal, resetPwdPersonal} from "/@/api/system/personal";
+import type { UploadProps } from 'element-plus'
+import {ElMessage} from "element-plus";
+import {ElMessageBox} from 'element-plus'
+import {getToken} from "/@/utils/gfast"
+import { newsInfoList, recommendList } from './mock';
+// 定义接口来定义对象的类型
+interface PersonalState {
+  imageUrl:'',
+  deptName: '';
+  roles: [];
+  personalForm: any;
+  newsInfoList: any;
+  recommendList: any;
+}
+
+export default defineComponent({
+  name: 'personals',
+  setup() {
+    const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
+    const {proxy} = <any>getCurrentInstance();
+    const stores = useUserInfo();
+    const { userInfos } = storeToRefs(stores);
+    const dataParam = reactive({
+      token:getToken(),
+    })
+    const state = reactive<PersonalState>({
+      newsInfoList,
+      recommendList,
+      imageUrl:'',
+      deptName:'',
+      roles:[],
+      personalForm: {
+        nickname: '',
+        userEmail: '',
+        describe: '',
+        mobile: '',
+        sex: '',
+        remark:'',
+        avatar:'',
+        lastLoginIp:'',
+        lastLoginTime:''
+      },
+    });
+
+    // const  handleUpload =
+    const handleUpload = () => {
+      // console.log(state.personalForm)
+      editPersonal(state.personalForm).then(()=>{
+           ElMessage.success('已更新');
+      });
+    };
+    // 当前时间提示语
+    const currentTime = computed(() => {
+
+      return formatAxis(new Date());
+    });
+    const handleAvatarSuccess: UploadProps['onSuccess'] = (
+        response,
+        uploadFile
+    ) => {
+       if(response.code == 0){
+          state.imageUrl = response.data.path;
+          state.personalForm.avatar = response.data.path;
+         handleUpload();
+       }
+
+    };
+
+    /** 重置密码按钮操作 */
+    const handleEditPass = ()=> {
+      ElMessageBox.prompt('请输入"' + state.personalForm.nickname + '"的新密码', "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消"
+      }).then(({ value }) => {
+        if(!value || value==''){
+          ElMessage.success('密码不能为空');
+          return
+        }
+        resetPwdPersonal({password:value}).then(() => {
+          ElMessage.success("修改成功，新密码是：" + value);
+        });
+      }).catch(() => {});
+    };
+    // 初始化用户数据
+    const initUserInfo = () => {
+      getPersonalInfo().then((res:any)=>{
+        const user = res.data.user;
+        state.imageUrl = user.avatar;
+        state.personalForm = {
+          nickname:user.userNickname,
+          userEmail:user.userEmail,
+          describe: user.describe,
+          mobile: user.mobile,
+          sex: String(user.sex),
+          remark:user.remark,
+          avatar:user.avatar,
+          lastLoginIp:user.lastLoginIp,
+          lastLoginTime:user.lastLoginTime
+        }
+        state.deptName = res.data.deptName;
+        state.roles = res.data.roles;
+      })
+
+    };
+    // 页面加载时
+    onMounted(() => {
+      initUserInfo();
+    });
+    return {
+      proxy,
+      baseURL,
+      userInfos,
+      currentTime,
+      handleUpload,
+      handleEditPass,
+      handleAvatarSuccess,
+      dataParam,
+      ...toRefs(state),
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../../theme/mixins/index.scss';
+.personal {
+  .personal-user {
+    height: 130px;
+    display: flex;
+    align-items: center;
+    .personal-user-left {
+      width: 130px;
+      height: 130px;
+      border-radius: 3px;
+      :deep(.el-upload) {
+        height: 100%;
+      }
+      .avatar-uploader{
+        border: 1px dashed var(--el-border-color);
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        transition: var(--el-transition-duration-fast);
+        text-align: center;
+        font-size: 20px;
+      }
+      .personal-user-left-upload {
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 3px;
+        }
+        &:hover {
+          img {
+            animation: logoAnimation 0.3s ease-in-out;
+          }
+        }
+      }
+    }
+    .personal-user-right {
+      flex: 1;
+      padding: 0 15px;
+      .personal-title {
+        font-size: 18px;
+        @include text-ellipsis(1);
+      }
+      .personal-item {
+        display: flex;
+        align-items: center;
+        font-size: 13px;
+        line-height: 26px;
+        .personal-item-label {
+          color: var(--el-text-color-secondary);
+          @include text-ellipsis(1);
+        }
+        .personal-item-value {
+          @include text-ellipsis(1);
+        }
+      }
+    }
+  }
+  .personal-info {
+    .personal-info-more {
+      float: right;
+      color: var(--el-text-color-secondary);
+      font-size: 13px;
+      &:hover {
+        color: var(--el-color-primary);
+        cursor: pointer;
+      }
+    }
+    .personal-info-box {
+      height: 130px;
+      overflow: hidden;
+      .personal-info-ul {
+        list-style: none;
+        .personal-info-li {
+          font-size: 13px;
+          padding-bottom: 10px;
+          .personal-info-li-title {
+            display: inline-block;
+            @include text-ellipsis(1);
+            color: var(--el-text-color-secondary);
+            text-decoration: none;
+          }
+          & a:hover {
+            color: var(--el-color-primary);
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+  .personal-recommend-row {
+    .personal-recommend-col {
+      .personal-recommend {
+        position: relative;
+        height: 100px;
+        border-radius: 3px;
+        overflow: hidden;
+        cursor: pointer;
+        &:hover {
+          i {
+            right: 0px !important;
+            bottom: 0px !important;
+            transition: all ease 0.3s;
+          }
+        }
+        i {
+          position: absolute;
+          right: -10px;
+          bottom: -10px;
+          font-size: 70px;
+          transform: rotate(-30deg);
+          transition: all ease 0.3s;
+        }
+        .personal-recommend-auto {
+          padding: 15px;
+          position: absolute;
+          left: 0;
+          top: 5%;
+          color: var(--next-color-white);
+          .personal-recommend-msg {
+            font-size: 12px;
+            margin-top: 10px;
+          }
+        }
+      }
+    }
+  }
+  .personal-edit {
+    .personal-edit-title {
+      position: relative;
+      padding-left: 10px;
+      color: var(--el-text-color-regular);
+      &::after {
+        content: '';
+        width: 2px;
+        height: 10px;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        background: var(--el-color-primary);
+      }
+    }
+    .personal-edit-safe-box {
+      border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
+      padding: 15px 0;
+      .personal-edit-safe-item {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .personal-edit-safe-item-left {
+          flex: 1;
+          overflow: hidden;
+          .personal-edit-safe-item-left-label {
+            color: var(--el-text-color-regular);
+            margin-bottom: 5px;
+          }
+          .personal-edit-safe-item-left-value {
+            color: var(--el-text-color-secondary);
+            @include text-ellipsis(1);
+            margin-right: 15px;
+          }
+        }
+      }
+      &:last-of-type {
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/system/personal/mock.ts b/src/views/system/personal/mock.ts
new file mode 100644
index 0000000..ff57575
--- /dev/null
+++ b/src/views/system/personal/mock.ts
@@ -0,0 +1,66 @@
+/**
+ * 消息通知
+ * @returns 返回模拟数据
+ */
+export const newsInfoList: Array<object> = [
+	{
+		title: '[发布] 2021年02月28日发布基于 vue3.x + vite v1.0.0 版本',
+		date: '02/28',
+		link: 'https://gitee.com/lyt-top/vue-next-admin',
+	},
+	{
+		title: '[发布] 2021年04月15日发布 vue2.x + webpack 重构版本',
+		date: '04/15',
+		link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
+	},
+	{
+		title: '[重构] 2021年04月10日 重构 vue2.x + webpack v1.0.0 版本',
+		date: '04/10',
+		link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
+	},
+	{
+		title: '[预览] 2020年12月08日，基于 vue3.x 版本后台模板的预览',
+		date: '12/08',
+		link: 'http://lyt-top.gitee.io/vue-next-admin-preview/#/login',
+	},
+	{
+		title: '[预览] 2020年11月15日，基于 vue2.x 版本后台模板的预览',
+		date: '11/15',
+		link: 'https://lyt-top.gitee.io/vue-prev-admin-preview/#/login',
+	},
+];
+
+/**
+ * 营销推荐
+ * @returns 返回模拟数据
+ */
+export const recommendList: Array<object> = [
+	{
+		title: '优惠券',
+		msg: '现金券、折扣券、营销必备',
+		icon: 'ele-Food',
+		bg: '#48D18D',
+		iconColor: '#64d89d',
+	},
+	{
+		title: '多人拼团',
+		msg: '社交电商、开辟流量',
+		icon: 'ele-ShoppingCart',
+		bg: '#F95959',
+		iconColor: '#F86C6B',
+	},
+	{
+		title: '分销中心',
+		msg: '轻松招募分销员，成功推广奖励',
+		icon: 'ele-School',
+		bg: '#8595F4',
+		iconColor: '#92A1F4',
+	},
+	{
+		title: '秒杀',
+		msg: '超低价抢购引导更多销量',
+		icon: 'ele-AlarmClock',
+		bg: '#FEBB50',
+		iconColor: '#FDC566',
+	},
+];
diff --git a/src/views/system/post/component/editPost.vue b/src/views/system/post/component/editPost.vue
new file mode 100644
index 0000000..4c9cab7
--- /dev/null
+++ b/src/views/system/post/component/editPost.vue
@@ -0,0 +1,183 @@
+<template>
+	<div class="system-edit-post-container">
+		<el-dialog v-model="isShowDialog" width="769px">
+      <template #header>
+        <div v-drag="['.system-edit-post-container .el-dialog', '.system-edit-post-container .el-dialog__header']">{{(formData.postId===0?'添加':'修改')+'岗位'}}</div>
+      </template>
+			<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
+        <el-form-item label="岗位名称" prop="postName">
+          <el-input v-model="formData.postName" placeholder="请输入岗位名称" />
+        </el-form-item>
+        <el-form-item label="岗位编码" prop="postCode">
+          <el-input v-model="formData.postCode" placeholder="请输入编码名称" />
+        </el-form-item>
+        <el-form-item label="岗位顺序" prop="postSort">
+          <el-input-number v-model="formData.postSort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="岗位状态" prop="status">
+          <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{formData.postId===0?'新 增':'修 改'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref,unref } from 'vue';
+import {addPost, editPost} from "/@/api/system/post";
+import {ElMessage} from "element-plus";
+
+interface DialogRow {
+  postId:number;
+  postCode:string;
+  postName:string;
+  postSort:number;
+  status:number;
+  remark:string;
+}
+interface PostState {
+  loading:boolean;
+	isShowDialog: boolean;
+	formData: DialogRow;
+  menuExpand:boolean;
+  menuNodeAll:boolean;
+  menuCheckStrictly:boolean;
+	menuProps: {
+		children: string;
+		label: string;
+	};
+  rules: object;
+}
+
+export default defineComponent({
+	name: 'systemEditPost',
+	setup(props,{emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+    const menuRef = ref();
+		const state = reactive<PostState>({
+      loading:false,
+			isShowDialog: false,
+			formData: {
+        postId:0,
+        postCode:'',
+        postName:'',
+        postSort:0,
+        status:1,
+        remark:'',
+			},
+      // 表单校验
+      rules: {
+        postName: [
+          { required: true, message: "岗位名称不能为空", trigger: "blur" }
+        ],
+        postCode: [
+          { required: true, message: "岗位编码不能为空", trigger: "blur" }
+        ],
+        postSort: [
+          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
+        ]
+      },
+      menuExpand:false,
+      menuNodeAll:false,
+      menuCheckStrictly:false,
+			menuProps: {
+				children: 'children',
+				label: 'title',
+			},
+		});
+		// 打开弹窗
+		const openDialog = (row?: DialogRow) => {
+      resetForm();
+      if(row) {
+        state.formData = row;
+      }
+			state.isShowDialog = true;
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          state.loading = true;
+          if(state.formData.postId===0){
+            //添加
+            addPost(state.formData).then(()=>{
+              ElMessage.success('岗位添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('getPostList')
+            }).finally(()=>{
+              state.loading = false;
+            })
+          }else{
+            //修改
+            editPost(state.formData).then(()=>{
+              ElMessage.success('岗位修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('getPostList')
+            }).finally(()=>{
+              state.loading = false;
+            })
+          }
+        }
+      });
+		};
+    const resetForm = ()=>{
+      state.menuCheckStrictly=false;
+      state.menuExpand = false;
+      state.menuNodeAll = false;
+      state.formData = {
+        postId:0,
+        postCode:'',
+        postName:'',
+        postSort:0,
+        status:1,
+        remark:'',
+      }
+    };
+
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      menuRef,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7!important;
+  background: #fff none!important;
+  border-radius: 4px;
+}
+.system-edit-post-container {
+	.menu-data-tree {
+		border: var(--el-input-border, var(--el-border-base));
+		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+		padding: 5px;
+	}
+}
+</style>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
new file mode 100644
index 0000000..3362714
--- /dev/null
+++ b/src/views/system/post/index.vue
@@ -0,0 +1,200 @@
+<template>
+	<div class="system-post-container">
+		<el-card shadow="hover">
+			<div class="system-user-search mb15">
+        <el-form :inline="true">
+          <el-form-item label="岗位名称">
+            <el-input size="default" v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50 m-2" clearable/>
+          </el-form-item>
+          <el-form-item label="岗位编码">
+            <el-input size="default" v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50 m-2" clearable/>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status" clearable>
+              <el-option label="启用"  value="1" />
+              <el-option label="禁用"  value="0" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="postList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddPost">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增岗位
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              删除岗位
+            </el-button>
+          </el-form-item>
+        </el-form>
+			</div>
+			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+				<el-table-column type="index" label="序号" width="60" />
+				<el-table-column prop="postCode" label="岗位编码" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="postName" label="岗位名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="postSort" label="排序" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="status" label="岗位状态" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
+						<el-tag type="info" v-else>禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="remark" label="岗位描述" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作" width="200">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="onOpenEditPost(scope.row)">修改</el-button>
+						<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="postList"
+      />
+		</el-card>
+		<EditPost ref="editPostRef" @getPostList="postList"/>
+	</div>
+</template>
+
+<script lang="ts">
+import {toRefs, reactive, onMounted, ref, defineComponent, toRaw} from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import EditPost from '/@/views/system/post/component/editPost.vue';
+import {deletePost, getPostList} from "/@/api/system/post";
+// 定义接口来定义对象的类型
+interface TableData {
+  postId:number;
+  postCode:string;
+  postName:string;
+  postSort:number;
+  status:number;
+  remark:string;
+  createdAt:string;
+}
+interface TableDataState {
+  ids:number[];
+	tableData: {
+		data: Array<TableData>;
+		total: number;
+		loading: boolean;
+		param: {
+      postName:string;
+      status:string;
+      postCode:string;
+			pageNum: number;
+			pageSize: number;
+		};
+	};
+}
+
+export default defineComponent({
+	name: 'apiV1SystemPostList',
+	components: {EditPost},
+	setup() {
+		const addPostRef = ref();
+		const editPostRef = ref();
+		const state = reactive<TableDataState>({
+      ids:[],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+          postName:'',
+          status:'',
+          postCode:'',
+					pageNum: 1,
+					pageSize: 10,
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+			postList()
+		};
+    const postList = ()=>{
+      getPostList(state.tableData.param).then(res=>{
+        state.tableData.data = res.data.postList??[];
+        state.tableData.total = res.data.total;
+      })
+    };
+		// 打开新增岗位弹窗
+		const onOpenAddPost = () => {
+      editPostRef.value.openDialog();
+		};
+		// 打开修改岗位弹窗
+		const onOpenEditPost = (row: Object) => {
+			editPostRef.value.openDialog(toRaw(row));
+		};
+		// 删除岗位
+		const onRowDel = (row: any) => {
+      let msg = '你确定要删除所选岗位？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `此操作将永久删除岗位：“${row.postName}”，是否继续?`
+        ids = [row.postId]
+      }else{
+        ids = state.ids
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要删除的数据。');
+        return
+      }
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+          deletePost(ids).then(()=>{
+            ElMessage.success('删除成功');
+            postList();
+          })
+				})
+				.catch(() => {});
+		};
+		// 分页改变
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页改变
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+    // 多选框选中数据
+    const handleSelectionChange = (selection:Array<TableData>)=> {
+      state.ids = selection.map(item => item.postId)
+    };
+		return {
+			addPostRef,
+			editPostRef,
+			onOpenAddPost,
+			onOpenEditPost,
+			onRowDel,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+      postList,
+      handleSelectionChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/role/component/dataScope.vue b/src/views/system/role/component/dataScope.vue
new file mode 100644
index 0000000..21555ea
--- /dev/null
+++ b/src/views/system/role/component/dataScope.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="system-sysJob-edit">
+    <!-- 分配角色数据权限对话框 -->
+    <el-dialog title="数据权限设置" v-model="openDataScope" width="769px" append-to-body :close-on-click-modal="false">
+      <el-form ref="formRef" :model="form" label-width="80px">
+        <el-form-item label="角色名称">
+          <el-input v-model="form.roleName" :disabled="true" />
+        </el-form-item>
+
+        <el-form-item label="权限范围">
+          <el-select v-model="form.dataScope">
+            <el-option
+                v-for="item in dataScopeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据权限" v-show="form.dataScope == 2">
+          <el-row :gutter="35">
+            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
+              <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
+              <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+              <el-tree
+                  class="tree-border"
+                  :data="deptOptions"
+                  show-checkbox
+                  default-expand-all
+                  ref="deptRef"
+                  node-key="deptId"
+                  :check-strictly="!form.deptCheckStrictly"
+                  :props="deptProps"
+              ></el-tree>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitDataScope">确 定</el-button>
+          <el-button @click="cancelDataScope">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, reactive, ref} from "vue";
+import {dataScope, getRole, roleDeptTreeSelect} from "/@/api/system/role";
+import {ElMessage} from "element-plus/es";
+
+export default defineComponent({
+  name: "dataScope",
+  setup(props,{emit}){
+    const openDataScope = ref(false)
+    const deptExpand =  ref(true)
+    const deptNodeAll = ref(false)
+    const deptOptions = ref<Array<any>>([])
+    const menuOptions = ref([])
+    const deptRef = ref();
+    const formRef = ref();
+    const deptProps = ref({
+      children: "children",
+          label: "deptName"
+    })
+    // 数据范围选项
+    const dataScopeOptions = ref([
+      {
+        value: "1",
+        label: "全部数据权限"
+      },
+      {
+        value: "2",
+        label: "自定数据权限"
+      },
+      {
+        value: "3",
+        label: "本部门数据权限"
+      },
+      {
+        value: "4",
+        label: "本部门及以下数据权限"
+      },
+      {
+        value: "5",
+        label: "仅本人数据权限"
+      }
+    ])
+    const form = reactive({
+      roleId:undefined,
+      roleName:'',
+      dataScope:'3',
+      deptCheckStrictly: false,
+      deptIds:[]
+    })
+    // 树权限（展开/折叠）
+    const handleCheckedTreeExpand = (value:any) => {
+      let treeList = deptOptions.value;
+      for (let i = 0; i < treeList.length; i++) {
+        deptRef.value.store.nodesMap[treeList[i].deptId].expanded = value;
+      }
+    }
+    // 树权限（全选/全不选）
+    const handleCheckedTreeNodeAll = (value:any) => {
+      deptRef.value.setCheckedNodes(value ? deptOptions.value: []);
+    }
+    /** 树权限（父子联动） */
+    const handleCheckedTreeConnect = (value:any) => {
+      form.deptCheckStrictly = value ? true : false;
+    }
+    /** 提交按钮（数据权限） */
+    const submitDataScope = () => {
+      if (form.roleId != undefined) {
+        form.deptIds = getDeptAllCheckedKeys();
+        dataScope(form).then((response:any) => {
+          if (response.code === 0) {
+            ElMessage.success("设置成功");
+            openDataScope.value = false;
+            emit('getRoleList')
+          } else {
+            ElMessage.error("设置失败")
+          }
+        });
+      }
+    }
+    const cancelDataScope = () => {
+      closeDialog();
+    };
+    // 打开弹窗
+    const openDialog = (row: any) => {
+      resetForm();
+      if(row) {
+        getRole(row.id).then((res:any)=>{
+          if(res.data.role){
+            form.roleName = res.data.role.name;
+            form.roleId = res.data.role.id;
+            form.dataScope=res.data.role.dataScope.toString();
+          }
+        })
+        getRoleDeptTreeselect(row.id)
+      }
+      openDataScope.value = true;
+    };
+    /** 根据角色ID查询部门树结构 */
+    const getRoleDeptTreeselect = (roleId:number) =>{
+      roleDeptTreeSelect(roleId).then(response => {
+        deptOptions.value = response.data.depts||[];
+        deptRef.value.setCheckedKeys(response.data.checkedKeys, true);
+      });
+    }
+    // 关闭弹窗
+    const closeDialog = () => {
+      openDataScope.value = false;
+    };
+    // 所有部门节点数据
+    const getDeptAllCheckedKeys = () => {
+      // 目前被选中的部门节点
+      let checkedKeys = deptRef.value.getCheckedKeys();
+      return checkedKeys;
+    }
+    const resetForm = ()=>{
+      form.roleId=undefined
+      form.roleName=''
+      form.dataScope='3'
+      form.deptCheckStrictly= false
+      form.deptIds=[]
+    };
+    return {
+      openDialog,
+      dataScopeOptions,
+      deptExpand,
+      openDataScope,
+      deptNodeAll,
+      deptOptions,
+      deptProps,
+      menuOptions,
+      deptRef,
+      formRef,
+      cancelDataScope,
+      submitDataScope,
+      handleCheckedTreeExpand,
+      handleCheckedTreeNodeAll,
+      handleCheckedTreeConnect,
+      form
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7!important;
+  border-radius: 4px;
+}
+.system-edit-role-container {
+  .menu-data-tree {
+    border: var(--el-input-border, var(--el-border-base));
+    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+    padding: 5px;
+  }
+}
+</style>
diff --git a/src/views/system/role/component/editRole.vue b/src/views/system/role/component/editRole.vue
new file mode 100644
index 0000000..bb89e24
--- /dev/null
+++ b/src/views/system/role/component/editRole.vue
@@ -0,0 +1,263 @@
+<template>
+	<div class="system-edit-role-container">
+		<el-dialog :title="(formData.id===0?'添加':'修改')+'角色'" v-model="isShowDialog" width="769px">
+			<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="角色名称" prop="name">
+							<el-input v-model="formData.name" placeholder="请输入角色名称" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="排序">
+							<el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序" class="w100" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="角色状态">
+							<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="角色描述">
+							<el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="菜单权限">
+              <el-row :gutter="35">
+                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                  <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
+                  <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
+                  <el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+                  <el-tree
+                      :data="menuData"
+                      ref="menuRef"
+                      :props="menuProps"
+                      :default-checked-keys="formData.menuIds"
+                      node-key="id"
+                      show-checkbox class="menu-data-tree tree-border"
+                      :check-strictly="!menuCheckStrictly"/>
+                </el-col>
+              </el-row>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{formData.id===0?'新 增':'修 改'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref,getCurrentInstance,unref } from 'vue';
+import {addRole, editRole, getRole, getRoleParams} from "/@/api/system/role";
+import {ElMessage} from "element-plus";
+import {refreshBackEndControlRoutes} from "/@/router/backEnd";
+
+
+// 定义接口来定义对象的类型
+interface MenuDataTree {
+	id: number;
+  pid:number;
+	title: string;
+	children?: MenuDataTree[];
+}
+interface DialogRow {
+  id:number;
+	name: string;
+	status: number;
+  listOrder: number;
+  remark: string;
+  menuIds:Array<number>
+}
+interface RoleState {
+  loading:boolean;
+	isShowDialog: boolean;
+	formData: DialogRow;
+	menuData: Array<MenuDataTree>;
+  menuExpand:boolean;
+  menuNodeAll:boolean;
+  menuCheckStrictly:boolean;
+	menuProps: {
+		children: string;
+		label: string;
+	};
+  rules: object;
+}
+
+export default defineComponent({
+	name: 'systemEditRole',
+	setup(props,{emit}) {
+    const {proxy} = getCurrentInstance() as any;
+    const formRef = ref<HTMLElement | null>(null);
+    const menuRef = ref();
+		const state = reactive<RoleState>({
+      loading:false,
+			isShowDialog: false,
+			formData: {
+        id:0,
+        name: '',
+        status: 1,
+        listOrder: 0,
+        remark: '',
+        menuIds:[]
+			},
+      // 表单校验
+      rules: {
+        name:[
+          {required: true, message: "角色名称不能为空", trigger: "blur"},
+        ]
+      },
+			menuData: [],
+      menuExpand:false,
+      menuNodeAll:false,
+      menuCheckStrictly:false,
+			menuProps: {
+				children: 'children',
+				label: 'title',
+			},
+		});
+		// 打开弹窗
+		const openDialog = (row?: DialogRow) => {
+      resetForm();
+			getMenuData();
+      if(row) {
+        getRole(row.id).then((res:any)=>{
+          if(res.data.role){
+            state.formData = res.data.role;
+            state.formData.menuIds = res.data.menuIds??[]
+          }
+        })
+      }
+			state.isShowDialog = true;
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          state.loading = true;
+          state.formData.menuIds = getMenuAllCheckedKeys();
+          if(state.formData.id===0){
+            //添加
+            addRole(state.formData).then(()=>{
+              ElMessage.success('角色添加成功');
+              closeDialog(); // 关闭弹窗
+              resetMenuSession()
+              emit('getRoleList')
+            }).finally(()=>{
+              state.loading = false;
+            })
+          }else{
+            //修改
+            editRole(state.formData).then(()=>{
+              ElMessage.success('角色修改成功');
+              closeDialog(); // 关闭弹窗
+              resetMenuSession()
+              emit('getRoleList')
+            }).finally(()=>{
+              state.loading = false;
+            })
+          }
+        }
+      });
+		};
+		// 获取菜单结构数据
+		const getMenuData = () => {
+      getRoleParams().then((res:any)=>{
+        state.menuData = proxy.handleTree(res.data.menu, "id","pid");
+      })
+		};
+    const resetForm = ()=>{
+      state.menuCheckStrictly=false;
+      state.menuExpand = false;
+      state.menuNodeAll = false;
+      state.formData = {
+        id:0,
+        name: '',
+        status: 1,
+        listOrder: 0,
+        remark: '',
+        menuIds:[]
+      }
+    };
+    /** 树权限（展开/折叠）*/
+    const handleCheckedTreeExpand = (value:any) => {
+      let treeList = state.menuData;
+      for (let i = 0; i < treeList.length; i++) {
+        menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+      }
+    }
+
+    /** 树权限（全选/全不选） */
+    const handleCheckedTreeNodeAll = (value:any) => {
+        menuRef.value.setCheckedNodes(value ? state.menuData : []);
+    }
+
+    /** 树权限（父子联动） */
+    const handleCheckedTreeConnect = (value:any) => {
+      state.menuCheckStrictly = value ? true : false;
+    }
+
+    /** 所有菜单节点数据 */
+    function getMenuAllCheckedKeys() {
+      // 目前被选中的菜单节点
+      let checkedKeys = menuRef.value.getCheckedKeys();
+      // 半选中的菜单节点
+      let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    }
+
+    // 重置菜单session
+    const resetMenuSession = () => {
+      refreshBackEndControlRoutes();
+    };
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      menuRef,
+      formRef,
+      handleCheckedTreeExpand,
+      handleCheckedTreeNodeAll,
+      handleCheckedTreeConnect,
+      resetMenuSession,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7!important;
+  border-radius: 4px;
+}
+.system-edit-role-container {
+	.menu-data-tree {
+		border: var(--el-input-border, var(--el-border-base));
+		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+		padding: 5px;
+	}
+}
+</style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
new file mode 100644
index 0000000..68067c5
--- /dev/null
+++ b/src/views/system/role/index.vue
@@ -0,0 +1,193 @@
+<template>
+	<div class="system-role-container">
+		<el-card shadow="hover">
+			<div class="system-user-search mb15">
+        <el-form :inline="true">
+          <el-form-item label="角色名称">
+            <el-input size="default" v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.roleStatus" clearable>
+              <el-option label="启用"  value="1" />
+              <el-option label="禁用"  value="0" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="roleList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增角色
+            </el-button>
+          </el-form-item>
+        </el-form>
+			</div>
+			<el-table :data="tableData.data" style="width: 100%">
+				<el-table-column type="index" label="序号" width="60" />
+				<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="listOrder" label="排序" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="status" label="角色状态" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
+						<el-tag type="info" v-else>禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="remark" label="角色描述" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作" width="220">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>修改</el-button>
+						<el-button size="small" text type="primary" @click="handleDataScope(scope.row)"><el-icon><ele-Avatar /></el-icon>数据权限</el-button>
+						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="roleList"
+      />
+		</el-card>
+		<EditRole ref="editRoleRef" @getRoleList="roleList"/>
+		<DataScope ref="dataScopeRef" @getRoleList="roleList"/>
+	</div>
+</template>
+
+<script lang="ts">
+import {toRefs, reactive, onMounted, ref, defineComponent, toRaw,getCurrentInstance} from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import EditRole from '/@/views/system/role/component/editRole.vue';
+import DataScope from '/@/views/system/role/component/dataScope.vue';
+import {deleteRole, getRoleList} from "/@/api/system/role";
+// 定义接口来定义对象的类型
+interface TableData {
+  id:number;
+	status: number;
+	listOrder: number;
+	name: string;
+  remark: string;
+  dataScope:number;
+  createdAt: string;
+}
+interface TableDataState {
+	tableData: {
+		data: Array<TableData>;
+		total: number;
+		loading: boolean;
+		param: {
+      roleName:string;
+      roleStatus:string;
+			pageNum: number;
+			pageSize: number;
+		};
+	};
+}
+
+export default defineComponent({
+	name: 'apiV1SystemRoleList',
+	components: {EditRole,DataScope},
+	setup() {
+    const {proxy} = getCurrentInstance() as any;
+		const addRoleRef = ref();
+		const editRoleRef = ref();
+    const dataScopeRef =ref();
+		const state = reactive<TableDataState>({
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+          roleName:'',
+          roleStatus:'',
+					pageNum: 1,
+					pageSize: 10,
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+			roleList()
+		};
+    const roleList = ()=>{
+      const data: Array<TableData> = [];
+      getRoleList(state.tableData.param).then(res=>{
+        const list = res.data.list??[]
+        list.map((item:TableData)=>{
+          data.push({
+            id:item.id,
+            status: item.status,
+            listOrder: item.listOrder,
+            name: item.name,
+            remark: item.remark,
+            dataScope:item.dataScope,
+            createdAt: item.createdAt,
+          });
+        })
+        state.tableData.data = data;
+        state.tableData.total = res.data.total;
+      })
+    };
+		// 打开新增角色弹窗
+		const onOpenAddRole = () => {
+      editRoleRef.value.openDialog();
+		};
+		// 打开修改角色弹窗
+		const onOpenEditRole = (row: Object) => {
+			editRoleRef.value.openDialog(toRaw(row));
+		};
+    //数据权限设置弹窗
+    const handleDataScope=(row:any)=>{
+      dataScopeRef.value.openDialog(toRaw(row))
+    }
+		// 删除角色
+		const onRowDel = (row: any) => {
+			ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+          deleteRole(row.id).then(()=>{
+            ElMessage.success('删除成功');
+            proxy.$refs['editRoleRef'].resetMenuSession();
+            roleList();
+          })
+				})
+				.catch(() => {});
+		};
+		// 分页改变
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页改变
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+		return {
+			addRoleRef,
+			editRoleRef,
+      dataScopeRef,
+			onOpenAddRole,
+			onOpenEditRole,
+			onRowDel,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+      roleList,
+      handleDataScope,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/sysJob/list/component/detail.vue b/src/views/system/sysJob/list/component/detail.vue
new file mode 100644
index 0000000..c5bc48f
--- /dev/null
+++ b/src/views/system/sysJob/list/component/detail.vue
@@ -0,0 +1,286 @@
+<template>
+  <!-- 定时任务详情抽屉 -->
+  <div class="system-sysJob-detail">
+    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
+      <template #header>
+        <h4>定时任务详情</h4>
+      </template>
+      <el-form ref="formRef" :model="formData" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="任务ID">{{ formData.jobId }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务名称">{{ formData.jobName }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="参数">{{ formData.jobParams }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务组名">{{ proxy.getOptionValue(formData.jobGroup, jobGroupOptions,'value','label') }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务方法">{{ formData.invokeTarget }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="cron执行表达式">{{ formData.cronExpression }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="计划执行策略">{{ proxy.getOptionValue(formData.misfirePolicy, misfirePolicyOptions,'value','label') }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态">{{ proxy.getOptionValue(formData.status, statusOptions,'value','label') }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="创建者">{{ formData.createdBy }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="更新者">{{ formData.updatedBy }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注信息">{{ formData.remark }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="创建时间">{{ proxy.parseTime(formData.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-divider />
+      <h3>任务执行日志</h3>
+      <el-button
+          class="btn-del"
+          type="danger"
+          size="small"
+          :disabled="multiple"
+          @click="handleDelete(null)"
+      ><el-icon><ele-Delete /></el-icon>删除</el-button>
+      <el-divider />
+      <el-table v-loading="logList.loading" :data="logList.data" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="日志ID" align="center" prop="id"
+                         min-width="100px"
+        />
+        <el-table-column label="执行方法" align="center" prop="targetName"
+                         min-width="150px"
+        />
+        <el-table-column label="执行日期" align="center" prop="createdAt" />
+        <el-table-column label="执行结果" align="center" prop="result"/>
+      </el-table>
+      <pagination
+          v-show="logList.total>0"
+          :total="logList.total"
+          v-model:page="logList.param.pageNum"
+          v-model:limit="logList.param.pageSize"
+          @pagination="getLogList(formData.invokeTarget)"
+      />
+    </el-drawer>
+  </div>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
+  import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
+  import {
+    listSysJob,
+    getSysJob,
+    delSysJob,
+    addSysJob,
+    updateSysJob,
+    getUserList, getJobLogs, delSysJobLog,
+  } from "/@/api/system/tools/job/sysJob";
+  import {
+    SysJobTableColumns,
+    SysJobInfoData,
+    SysJobTableDataState,
+    SysJobEditState, SysJobLog, SysJobLogData,
+  } from "/@/views/system/sysJob/list/component/model"
+  export default defineComponent({
+    name:"apiV1SystemSysJobDetail",
+    components:{
+    },
+    props:{
+      jobGroupOptions:{
+        type:Array,
+        default:()=>[]
+      },
+      misfirePolicyOptions:{
+        type:Array,
+        default:()=>[]
+      },
+      statusOptions:{
+        type:Array,
+        default:()=>[]
+      },
+    },
+    setup(props,{emit}) {
+      const {proxy} = <any>getCurrentInstance()
+      const formRef = ref<HTMLElement | null>(null);
+      const menuRef = ref();
+      // 非多个禁用
+      const multiple =ref(true)
+      const logList = reactive<SysJobLog>({
+        logIds:[],
+        data: [],
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+          targetName: undefined
+        },
+        total: 0
+      })
+      const state = reactive<SysJobEditState>({
+        loading:false,
+        isShowDialog: false,
+        formData: {
+          jobId: undefined,
+          jobName: undefined,
+          jobParams: undefined,
+          jobGroup: undefined,
+          invokeTarget: undefined,
+          cronExpression: undefined,
+          misfirePolicy: false ,
+          concurrent: undefined,
+          status: false ,
+          createdBy: undefined,
+          updatedBy: undefined,
+          remark: undefined,
+          createdAt: undefined,
+          updatedAt: undefined,
+        },
+        // 表单校验
+        rules: {}
+      });
+        // 打开弹窗
+        const openDialog = (row?: SysJobInfoData) => {
+          resetForm();
+          if(row) {
+            getSysJob(row.jobId!).then((res:any)=>{
+              const data = res.data;
+              let listUid = [];
+              listUid.push(data.createdBy,data.updatedBy)
+              getUserList(listUid).then((response:any) =>{
+                let users = response.data.list||[]
+                users.forEach((user:any)=>{
+                  if(data.createdBy==user.id){
+                    data.createdBy = user.userNickname
+                  }
+                  if(data.updatedBy==user.id){
+                    data.updatedBy = user.userNickname
+                  }
+                })
+                state.formData = data;
+              })
+            })
+            logList.loading=true
+            getLogList(row.invokeTarget!);
+          }
+          state.isShowDialog = true;
+        };
+        const getLogList = (invokeTarget:string)=>{
+          logList.param.targetName=invokeTarget
+          getJobLogs(logList.param).then((res:any)=>{
+            logList.data = res.data.list||[];
+            logList.total=res.data.total;
+            logList.loading=false;
+          })
+        };
+        // 关闭弹窗
+        const closeDialog = () => {
+          state.isShowDialog = false;
+        };
+        // 取消
+        const onCancel = () => {
+          closeDialog();
+        };
+        const resetForm = ()=>{
+          state.formData = {
+            jobId: undefined,
+            jobName: undefined,
+            jobParams: undefined,
+            jobGroup: undefined,
+            invokeTarget: undefined,
+            cronExpression: undefined,
+            misfirePolicy: false ,
+            concurrent: undefined,
+            status: false ,
+            createdBy: undefined,
+            updatedBy: undefined,
+            remark: undefined,
+            createdAt: undefined,
+            updatedAt: undefined,
+          }
+        };
+        // 多选框选中数据
+        const handleSelectionChange = (selection:Array<SysJobLogData>) => {
+          logList.logIds = selection.map(item => item.id)
+          multiple.value = !selection.length
+        };
+        const handleDelete = (row: SysJobLogData) => {
+          let msg = '你确定要删除所选数据？';
+          let logId:number[] = [] ;
+          let targetName:string='';
+          if(row){
+            msg = `此操作将永久删除数据，是否继续?`
+            logId = [row.id]
+            targetName = row.targetName
+          }else{
+            logId = logList.logIds
+            targetName=state.formData.invokeTarget!
+          }
+          if(logId.length===0){
+            ElMessage.error('请选择要删除的数据。');
+            return
+          }
+          ElMessageBox.confirm(msg, '提示', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+              .then(() => {
+                delSysJobLog(logId).then(()=>{
+                  ElMessage.success('删除成功');
+                  getLogList(targetName);
+                })
+              })
+              .catch(() => {});
+        }
+        return {
+          proxy,
+          openDialog,
+          closeDialog,
+          onCancel,
+          menuRef,
+          formRef,
+          logList,
+          getLogList,
+          handleSelectionChange,
+          multiple,
+          handleDelete,
+          ...toRefs(state),
+        };
+      }
+  })
+</script>
+<style scoped>
+  .system-sysJob-detail :deep(.el-form-item--large .el-form-item__label){
+    font-weight: bolder;
+  }
+  .pic-block{
+    margin-right: 8px;
+  }
+  .file-block{
+    width: 100%;
+    border: 1px solid var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+    margin-bottom: 5px;
+    padding: 3px 6px;
+  }
+  .ml-2{margin-right: 5px;}
+  .btn-del{
+    margin-top: 20px;
+  }
+</style>
diff --git a/src/views/system/sysJob/list/component/edit.vue b/src/views/system/sysJob/list/component/edit.vue
new file mode 100644
index 0000000..bd51c63
--- /dev/null
+++ b/src/views/system/sysJob/list/component/edit.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="system-sysJob-edit">
+    <!-- 添加或修改定时任务对话框 -->
+    <el-dialog v-model="isShowDialog" width="769px" :close-on-click-modal="false" :destroy-on-close="true">
+      <template #header>
+        <div v-drag="['.system-sysJob-edit .el-dialog', '.system-sysJob-edit .el-dialog__header']">{{(!formData.jobId || formData.jobId==0?'添加':'修改')+'定时任务'}}</div>
+      </template>
+      <el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="120px">
+        <el-form-item label="任务名称" prop="jobName">
+          <el-input v-model="formData.jobName" placeholder="请输入任务名称" />
+        </el-form-item>
+        <el-form-item prop="jobParams">
+          <template #label>
+							<span>
+								执行参数
+								<el-tooltip content="以|分隔多个参数 示例：param1|param1；参数说明：支持字符串，布尔类型，长整型，浮点型，整型" placement="top">
+									<el-icon><ele-QuestionFilled /></el-icon>
+								</el-tooltip>
+							</span>
+          </template>
+          <el-input v-model="formData.jobParams" placeholder="请输入参数" />
+        </el-form-item>
+        <el-form-item label="任务组名" prop="jobGroup">
+          <el-select v-model="formData.jobGroup" placeholder="请选择任务组名" >
+            <el-option
+              v-for="dict in jobGroupOptions"
+              :key="dict.value"
+              :label="dict.label"
+                  :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="invokeTarget">
+          <template #label>
+							<span>
+								任务方法
+								<el-tooltip content="示例：demo1" placement="top">
+									<el-icon><ele-QuestionFilled /></el-icon>
+								</el-tooltip>
+							</span>
+          </template>
+          <el-input v-model="formData.invokeTarget" placeholder="请输入任务方法" />
+        </el-form-item>
+        <el-form-item label="cron执行表达式" prop="cronExpression">
+          <el-input v-model="formData.cronExpression" placeholder="请输入cron执行表达式" />
+        </el-form-item>
+        <ul class="cronExpression-rule">
+          <li><el-icon><ele-WarningFilled /></el-icon> */5 * * * * ? : 每隔5秒执行一次</li>
+          <li><el-icon><ele-WarningFilled /></el-icon> 20 */1 * * * ? : 每隔1分钟执行一次</li>
+          <li><el-icon><ele-WarningFilled /></el-icon> 30 0 23 * * ? : 每天23点执行一次</li>
+          <li><el-icon><ele-WarningFilled /></el-icon> 0 0 1 * * ? : 每天凌晨1点执行一次</li>
+          <li><el-icon><ele-WarningFilled /></el-icon> 0 0 1 1 * ? : 每月1号凌晨1点执行一次</li>
+        </ul>
+        <el-form-item label="计划执行策略" prop="misfirePolicy">
+          <el-radio-group v-model="formData.misfirePolicy">
+            <el-radio
+              v-for="dict in misfirePolicyOptions"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio
+              v-for="dict in statusOptions"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注信息" prop="remark">
+          <el-input v-model="formData.remark" placeholder="请输入备注信息" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="onSubmit">确 定</el-button>
+          <el-button @click="onCancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance } from 'vue';
+import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
+import {
+  listSysJob,
+  getSysJob,
+  delSysJob,
+  addSysJob,
+  updateSysJob,
+  getUserList,
+} from "/@/api/system/tools/job/sysJob";
+import {
+  SysJobTableColumns,
+  SysJobInfoData,
+  SysJobTableDataState,
+  SysJobEditState,
+} from "/@/views/system/sysJob/list/component/model"
+export default defineComponent({
+  name:"apiV1SystemSysJobEdit",
+  components:{
+  },
+  props:{
+    jobGroupOptions:{
+      type:Array,
+      default:()=>[]
+    },
+    misfirePolicyOptions:{
+      type:Array,
+      default:()=>[]
+    },
+    statusOptions:{
+      type:Array,
+      default:()=>[]
+    },
+  },
+  setup(props,{emit}) {
+    const {proxy} = <any>getCurrentInstance()
+    const formRef = ref<HTMLElement | null>(null);
+    const menuRef = ref();
+    const state = reactive<SysJobEditState>({
+      loading:false,
+      isShowDialog: false,
+      formData: {
+        jobId: undefined,
+        jobName: undefined,
+        jobParams: undefined,
+        jobGroup: undefined,
+        invokeTarget: undefined,
+        cronExpression: undefined,
+        misfirePolicy: false ,
+        concurrent: undefined,
+        status: false ,
+        createdBy: undefined,
+        updatedBy: undefined,
+        remark: undefined,
+        createdAt: undefined,
+        updatedAt: undefined,
+      },
+      // 表单校验
+      rules: {
+        cronExpression: [
+          { required: true, message: "cron执行表达式不能为空", trigger: "blur" }
+        ],
+        jobName : [
+            { required: true, message: "任务名称不能为空", trigger: "blur" }
+        ],
+        invokeTarget : [
+            { required: true, message: "任务方法不能为空", trigger: "blur" }
+        ],
+        status : [
+            { required: true, message: "状态不能为空", trigger: "blur" }
+        ],
+      }
+    });
+    // 打开弹窗
+    const openDialog = (row?: SysJobInfoData) => {
+      resetForm();
+      if(row) {
+        getSysJob(row.jobId!).then((res:any)=>{
+          const data = res.data;
+          data.jobGroup = ''+data.jobGroup
+          data.misfirePolicy = ''+data.misfirePolicy
+          data.status = ''+data.status
+          state.formData = data;
+      })
+    }
+      state.isShowDialog = true;
+    };
+    // 关闭弹窗
+    const closeDialog = () => {
+      state.isShowDialog = false;
+    };
+    // 取消
+    const onCancel = () => {
+      closeDialog();
+    };
+    // 提交
+    const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          state.loading = true;
+          if(!state.formData.jobId || state.formData.jobId===0){
+            //添加
+          addSysJob(state.formData).then(()=>{
+              ElMessage.success('添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('sysJobList')
+            }).finally(()=>{
+              state.loading = false;
+            })
+          }else{
+            //修改
+          updateSysJob(state.formData).then(()=>{
+              ElMessage.success('修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('sysJobList')
+            }).finally(()=>{
+              state.loading = false;
+            })
+          }
+        }
+      });
+    };
+    const resetForm = ()=>{
+      state.formData = {
+        jobId: undefined,
+        jobName: undefined,
+        jobParams: undefined,
+        jobGroup: undefined,
+        invokeTarget: undefined,
+        cronExpression: undefined,
+        misfirePolicy: false ,
+        concurrent: undefined,
+        status: false ,
+        createdBy: undefined,
+        updatedBy: undefined,
+        remark: undefined,
+        createdAt: undefined,
+        updatedAt: undefined,
+      }
+    };
+    return {
+      proxy,
+      openDialog,
+      closeDialog,
+      onCancel,
+      onSubmit,
+      menuRef,
+      formRef,
+      ...toRefs(state),
+    };
+  }
+})
+</script>
+<style scoped lang="scss">
+.cronExpression-rule{
+  list-style: none;
+  width: 60%;
+  margin: 20px auto;
+  li{
+    margin-bottom: 15px;
+    font-weight: bolder;
+  }
+}
+</style>
diff --git a/src/views/system/sysJob/list/component/model.ts b/src/views/system/sysJob/list/component/model.ts
new file mode 100644
index 0000000..a31a6d3
--- /dev/null
+++ b/src/views/system/sysJob/list/component/model.ts
@@ -0,0 +1,71 @@
+export interface SysJobTableColumns {
+    jobId:number;  // 任务ID
+    jobName:string;  // 任务名称
+    jobGroup:string;  // 任务组名
+    invokeTarget:string;  // 任务方法
+    cronExpression:string;  // cron执行表达式
+    misfirePolicy:number;  // 计划执行策略
+    status:number;  // 状态
+}
+
+
+export interface SysJobInfoData {
+    jobId:number|undefined;        // 任务ID
+    jobName:string|undefined; // 任务名称
+    jobParams:string|undefined; // 参数
+    jobGroup:string|undefined; // 任务组名
+    invokeTarget:string|undefined; // 任务方法
+    cronExpression:string|undefined; // cron执行表达式
+    misfirePolicy:boolean; // 计划执行策略
+    concurrent:number|undefined; // 是否并发执行
+    status:boolean; // 状态
+    createdBy:number|undefined; // 创建者
+    updatedBy:number|undefined; // 更新者
+    remark:string|undefined; // 备注信息
+    createdAt:string|undefined; // 创建时间
+    updatedAt:string|undefined; // 更新时间
+}
+
+
+export interface SysJobTableDataState {
+    jobIds:any[];
+    tableData: {
+        data: Array<SysJobTableColumns>;
+        total: number;
+        loading: boolean;
+        param: {
+            pageNum: number;
+            pageSize: number;
+            jobName: string|undefined;
+            jobGroup: string|undefined;
+            status: number|undefined;
+        };
+    };
+}
+
+
+export interface SysJobEditState{
+    loading:boolean;
+    isShowDialog: boolean;
+    formData:SysJobInfoData;
+    rules: object;
+}
+
+export interface SysJobLog{
+    logIds:Array<number>;
+    data:Array<SysJobLogData>;
+    total: number;
+    loading: boolean;
+    param: {
+        pageNum: number;
+        pageSize: number;
+        targetName: string|undefined;
+    };
+}
+
+export interface SysJobLogData{
+    id: number;
+    targetName: string;
+    createdAt: string;
+    result: string
+}
diff --git a/src/views/system/sysJob/list/index.vue b/src/views/system/sysJob/list/index.vue
new file mode 100644
index 0000000..4269dbc
--- /dev/null
+++ b/src/views/system/sysJob/list/index.vue
@@ -0,0 +1,342 @@
+<template>
+	<div class="system-sysJob-container">
+		<el-card shadow="hover">
+			<div class="system-sysJob-search mb15">
+				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
+					<el-row>
+						<el-col :span="8" class="colBlock">
+							<el-form-item label="任务名称" prop="jobName">
+								<el-input v-model="tableData.param.jobName" placeholder="请输入任务名称" clearable size="small" @keyup.enter.native="sysJobList" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="8" class="colBlock">
+							<el-form-item label="任务组名" prop="jobGroup">
+								<el-select v-model="tableData.param.jobGroup" placeholder="请选择任务组名" clearable size="small">
+									<el-option v-for="dict in sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8" :class="!showAll ? 'colBlock' : 'colNone'">
+							<el-form-item>
+								<el-button type="primary" size="small" @click="sysJobList"
+									><el-icon><ele-Search /></el-icon>搜索</el-button
+								>
+								<el-button size="small" @click="resetQuery(queryRef)"
+									><el-icon><ele-Refresh /></el-icon>重置</el-button
+								>
+								<el-button type="primary" link size="small" @click="toggleSearch">
+									{{ word }}
+									<el-icon v-show="showAll"><ele-ArrowUp /></el-icon>
+									<el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
+								</el-button>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+							<el-form-item label="状态" prop="status">
+								<el-select v-model="tableData.param.status" placeholder="请选择状态" clearable size="small">
+									<el-option v-for="dict in sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+							<el-form-item>
+								<el-button type="primary" size="small" @click="sysJobList"
+									><el-icon><ele-Search /></el-icon>搜索</el-button
+								>
+								<el-button size="small" @click="resetQuery(queryRef)"
+									><el-icon><ele-Refresh /></el-icon>重置</el-button
+								>
+								<el-button type="primary" link size="small" @click="toggleSearch">
+									{{ word }}
+									<el-icon v-show="showAll"><ele-ArrowUp /></el-icon>
+									<el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
+								</el-button>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+				<el-row :gutter="10" class="mb8">
+					<el-col :span="1.5">
+						<el-button type="primary" size="small" @click="handleAdd" v-auth="'api/v1/system/sysJob/add'"
+							><el-icon><ele-Plus /></el-icon>新增</el-button
+						>
+					</el-col>
+					<el-col :span="1.5">
+						<el-button type="success" size="small" :disabled="single" @click="handleUpdate(null)" v-auth="'api/v1/system/sysJob/edit'"
+							><el-icon><ele-Edit /></el-icon>修改</el-button
+						>
+					</el-col>
+					<el-col :span="1.5">
+						<el-button type="danger" size="small" :disabled="multiple" @click="handleDelete(null)" v-auth="'api/v1/system/sysJob/delete'"
+							><el-icon><ele-Delete /></el-icon>删除</el-button
+						>
+					</el-col>
+				</el-row>
+			</div>
+			<el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
+				<el-table-column type="selection" width="55" align="center" />
+				<el-table-column label="任务ID" align="center" prop="jobId" min-width="100px" />
+				<el-table-column label="任务名称" align="center" prop="jobName" min-width="100px" />
+				<el-table-column label="任务组名" align="center" prop="jobGroup" :formatter="jobGroupFormat" min-width="100px" />
+				<el-table-column label="任务方法" align="center" prop="invokeTarget" min-width="100px" />
+				<el-table-column label="cron执行表达式" align="center" prop="cronExpression" min-width="100px" />
+				<el-table-column label="计划执行策略" align="center" prop="misfirePolicy" :formatter="misfirePolicyFormat" min-width="100px" />
+				<el-table-column label="状态" align="center">
+					<template #default="scope">
+						<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" align="center" class-name="small-padding" min-width="200px" fixed="right">
+					<template #default="scope">
+						<el-button size="small" type="primary" link @click="handleView(scope.row)" v-auth="'api/v1/system/sysJob/view'"
+							><el-icon><ele-View /></el-icon>详情</el-button
+						>
+						<el-button size="small" type="primary" link @click="handleUpdate(scope.row)" v-auth="'api/v1/system/sysJob/edit'"
+							><el-icon><ele-EditPen /></el-icon>修改</el-button
+						>
+						<el-button size="small" type="primary" link @click="handleJobRun(scope.row)" v-auth="'api/v1/system/sysJob/run'"
+							><el-icon><ele-CaretRight /></el-icon>执行一次</el-button
+						>
+						<el-button size="small" type="primary" link @click="handleDelete(scope.row)" v-auth="'api/v1/system/sysJob/delete'"
+							><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
+						>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination
+				v-show="tableData.total > 0"
+				:total="tableData.total"
+				v-model:page="tableData.param.pageNum"
+				v-model:limit="tableData.param.pageSize"
+				@pagination="sysJobList"
+			/>
+		</el-card>
+		<apiV1SystemSysJobEdit
+			ref="editRef"
+			:jobGroupOptions="sys_job_group"
+			:misfirePolicyOptions="sys_job_policy"
+			:statusOptions="sys_job_status"
+			@sysJobList="sysJobList"
+		></apiV1SystemSysJobEdit>
+		<apiV1SystemSysJobDetail
+			ref="detailRef"
+			:jobGroupOptions="sys_job_group"
+			:misfirePolicyOptions="sys_job_policy"
+			:statusOptions="sys_job_status"
+			@sysJobList="sysJobList"
+		></apiV1SystemSysJobDetail>
+	</div>
+</template>
+<script lang="ts">
+import { ItemOptions } from '/@/api/items';
+import { toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw } from 'vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import { listSysJob, getSysJob, delSysJob, addSysJob, updateSysJob, getUserList, runJob, startJob, stopJob } from '/@/api/system/tools/job/sysJob';
+import { SysJobTableColumns, SysJobInfoData, SysJobTableDataState } from '/@/views/system/sysJob/list/component/model';
+import apiV1SystemSysJobEdit from '/@/views/system/sysJob/list/component/edit.vue';
+import apiV1SystemSysJobDetail from '/@/views/system/sysJob/list/component/detail.vue';
+export default defineComponent({
+	name: 'apiV1SystemSysJobList',
+	components: {
+		apiV1SystemSysJobEdit,
+		apiV1SystemSysJobDetail,
+	},
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const loading = ref(false);
+		const queryRef = ref();
+		const editRef = ref();
+		const detailRef = ref();
+		// 是否显示所有搜索选项
+		const showAll = ref(false);
+		// 非单个禁用
+		const single = ref(true);
+		// 非多个禁用
+		const multiple = ref(true);
+		const word = computed(() => {
+			if (showAll.value === false) {
+				//对文字进行处理
+				return '展开搜索';
+			} else {
+				return '收起搜索';
+			}
+		});
+		// 字典选项数据
+		const { sys_job_group, sys_job_policy, sys_job_status } = proxy.useDict('sys_job_group', 'sys_job_policy', 'sys_job_status');
+		const state = reactive<SysJobTableDataState>({
+			jobIds: [],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+					jobName: undefined,
+					jobGroup: undefined,
+					status: undefined,
+				},
+			},
+		});
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+			sysJobList();
+		};
+		/** 重置按钮操作 */
+		const resetQuery = (formEl: FormInstance | undefined) => {
+			if (!formEl) return;
+			formEl.resetFields();
+			sysJobList();
+		};
+		// 获取列表数据
+		const sysJobList = () => {
+			loading.value = true;
+			listSysJob(state.tableData.param).then((res: any) => {
+				let list = res.data.list ?? [];
+				state.tableData.data = list;
+				state.tableData.total = res.data.total;
+				loading.value = false;
+			});
+		};
+		const toggleSearch = () => {
+			showAll.value = !showAll.value;
+		};
+		// 任务组名字典翻译
+		const jobGroupFormat = (row: SysJobTableColumns) => {
+			return proxy.selectDictLabel(sys_job_group.value, row.jobGroup);
+		};
+		// 计划执行策略字典翻译
+		const misfirePolicyFormat = (row: SysJobTableColumns) => {
+			return proxy.selectDictLabel(sys_job_policy.value, row.misfirePolicy);
+		};
+		// 状态字典翻译
+		const statusFormat = (row: SysJobTableColumns) => {
+			return proxy.selectDictLabel(sys_job_status.value, row.status);
+		};
+		// 多选框选中数据
+		const handleSelectionChange = (selection: Array<SysJobInfoData>) => {
+			state.jobIds = selection.map((item) => item.jobId);
+			single.value = selection.length != 1;
+			multiple.value = !selection.length;
+		};
+		const handleAdd = () => {
+			editRef.value.openDialog();
+		};
+		const handleUpdate = (row: SysJobTableColumns) => {
+			if (!row) {
+				row = state.tableData.data.find((item: SysJobTableColumns) => {
+					return item.jobId === state.jobIds[0];
+				}) as SysJobTableColumns;
+			}
+			editRef.value.openDialog(toRaw(row));
+		};
+		/** 执行按钮操作 */
+		const handleJobRun = (row: SysJobTableColumns) => {
+			const jobId = row.jobId || 0;
+			ElMessageBox.confirm('是否确认立即执行一次该任务?', '警告', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(function () {
+					return runJob(jobId);
+				})
+				.then(() => {
+					ElMessage.success('执行成功');
+				})
+				.catch(function () {});
+		};
+		const handleDelete = (row: SysJobTableColumns) => {
+			let msg = '你确定要删除所选数据？';
+			let jobId: number[] = [];
+			if (row) {
+				msg = `此操作将永久删除数据，是否继续?`;
+				jobId = [row.jobId];
+			} else {
+				jobId = state.jobIds;
+			}
+			if (jobId.length === 0) {
+				ElMessage.error('请选择要删除的数据。');
+				return;
+			}
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					delSysJob(jobId).then(() => {
+						ElMessage.success('删除成功');
+						sysJobList();
+					});
+				})
+				.catch(() => {});
+		};
+		const handleView = (row: SysJobTableColumns) => {
+			detailRef.value.openDialog(toRaw(row));
+		};
+		// 任务状态修改
+		const handleStatusChange = (row: SysJobTableColumns) => {
+			let text = row.status === 0 ? '启用' : '停用';
+			ElMessageBox.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?', '警告', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(function () {
+					if (row.status === 0) {
+						return startJob(row.jobId);
+					} else {
+						return stopJob(row.jobId);
+					}
+				})
+				.then(() => {
+					ElMessage.success(text + '成功');
+				})
+				.catch(function () {
+					row.status = row.status === 0 ? 1 : 0;
+				});
+		};
+		return {
+			proxy,
+			editRef,
+			detailRef,
+			showAll,
+			loading,
+			single,
+			multiple,
+			word,
+			queryRef,
+			resetQuery,
+			sysJobList,
+			toggleSearch,
+			jobGroupFormat,
+			sys_job_group,
+			misfirePolicyFormat,
+			sys_job_policy,
+			statusFormat,
+			sys_job_status,
+			handleSelectionChange,
+			handleAdd,
+			handleUpdate,
+			handleDelete,
+			handleView,
+			handleJobRun,
+			handleStatusChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+.colBlock {
+	display: block;
+}
+.colNone {
+	display: none;
+}
+</style>
diff --git a/src/views/system/tools/gen/component/basicInfo.vue b/src/views/system/tools/gen/component/basicInfo.vue
new file mode 100644
index 0000000..1ede471
--- /dev/null
+++ b/src/views/system/tools/gen/component/basicInfo.vue
@@ -0,0 +1,128 @@
+<template>
+	<div class="form-adapt-container">
+		<el-card shadow="never" header="基本信息配置">
+			<el-form ref="basicInfoFormRef" :model="info" :rules="rules" label-width="150px" size="default" class="mt35 mb35">
+				<el-row :gutter="35">
+					<el-col class="mb20" :span="12">
+						<el-form-item label="表名称" prop="tableName">
+							<el-input placeholder="请输入仓库名称" v-model="info.tableName" />
+						</el-form-item>
+					</el-col>
+					<el-col class="mb20" :span="12">
+						<el-form-item label="表描述" prop="tableComment">
+							<el-input placeholder="请输入" v-model="info.tableComment" />
+						</el-form-item>
+					</el-col>
+
+					<el-col class="mb20" :span="12">
+						<el-form-item label="实体类名称" prop="className">
+							<el-input placeholder="请输入" v-model="info.className" />
+						</el-form-item>
+					</el-col>
+					<el-col class="mb20" :span="12">
+						<el-form-item label="作者" prop="functionAuthor">
+							<el-input placeholder="请输入" v-model="info.functionAuthor" />
+						</el-form-item>
+					</el-col>
+
+					<el-col class="mb20" :span="12">
+						<el-form-item label="排序字段" prop="sortColumn">
+							<el-select v-model="info.sortColumn" placeholder="请选择">
+								<el-option v-for="(column, index) in info.columns" :key="index" :label="column.columnComment" :value="column.columnName"> </el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col class="mb20" :span="12">
+						<el-form-item label="排序方式" prop="sortType">
+							<el-select placeholder="请选择" v-model="info.sortType">
+								<el-option label="顺序" value="asc" />
+								<el-option label="倒序" value="desc" />
+							</el-select>
+						</el-form-item>
+					</el-col>
+
+					<el-col class="mb20" :span="24">
+						<el-form-item label="备注" prop="remark">
+							<el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col class="mb20" :span="12">
+						<el-form-item label="是否覆盖原有文件" prop="overwrite">
+							<el-checkbox v-model="info.overwrite" />
+						</el-form-item>
+					</el-col>
+					<el-col class="mb20" :span="12">
+						<el-form-item label="是否有显示详情功能" prop="showDetail">
+							<el-checkbox v-model="info.showDetail" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<el-row>
+				<el-col :span="10"></el-col>
+				<el-col :span="4" class="base-footer">
+					<span>
+						<el-button size="default" @click="close">关 闭</el-button>
+						<el-button type="primary" @click="nextTip" size="default">下一步</el-button>
+					</span>
+				</el-col>
+				<el-col :span="10"></el-col>
+			</el-row>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, reactive, ref, unref } from 'vue';
+import type { FormInstance, FormRules } from 'element-plus';
+import type { TableDataInfo } from '/@/views/system/tools/gen/component/model';
+import { ElMessage } from 'element-plus';
+export default defineComponent({
+	name: 'toolsBasicInfoForm',
+	emits: ['goNext','close'],
+	setup(props, { emit }) {
+		const basicInfoFormRef = ref<FormInstance>();
+		const info = inject<TableDataInfo>('tableData') as TableDataInfo;
+		const nextTip = (): boolean => {
+			//表单验证
+			let tag = false;
+			const formWrap = unref(basicInfoFormRef) as any;
+			if (!formWrap) return false;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					emit('goNext');
+					tag = true;
+				} else {
+					ElMessage.error('请将表单填写完整');
+				}
+			});
+			return tag;
+		};
+    const close = ()=>{
+      console.log('xxxxxxxxxxxxxxxxxxxxxxx')
+      emit('close')
+    }
+		const rules = reactive<FormRules>({
+			tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
+			tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
+			className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
+			functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }],
+			sortColumn: [{ required: true, message: '请选择排序字段', trigger: 'blur' }],
+			sortType: [{ required: true, message: '请选择排序类型', trigger: 'blur' }],
+		});
+		return {
+			basicInfoFormRef,
+			info,
+			rules,
+			nextTip,
+      close
+		};
+	},
+});
+</script>
+
+<style scoped>
+.base-footer {
+	text-align: center;
+}
+</style>
diff --git a/src/views/system/tools/gen/component/edit.vue b/src/views/system/tools/gen/component/edit.vue
new file mode 100644
index 0000000..b9c396d
--- /dev/null
+++ b/src/views/system/tools/gen/component/edit.vue
@@ -0,0 +1,161 @@
+<template>
+	<div class="app-container">
+		<el-card shadow="hover">
+			<div class="mb15">
+				<el-row>
+					<el-col :span="4"></el-col>
+					<el-col :span="16">
+						<el-steps :active="active" align-center simple>
+							<el-step title="1.基本信息" @click="changeSteps(1)"
+								><template #icon
+									><el-icon><ele-Comment /></el-icon></template
+							></el-step>
+							<el-step title="2.生成信息" @click="changeSteps(2)"
+								><template #icon
+									><el-icon><ele-Document /></el-icon></template
+							></el-step>
+							<el-step title="3.字段信息" @click="changeSteps(3)"
+								><template #icon
+									><el-icon><ele-Expand /></el-icon></template
+							></el-step>
+						</el-steps>
+					</el-col>
+					<el-col :span="4"></el-col>
+				</el-row>
+			</div>
+			<tools-basic-info-form ref="toolsBasicInfoForm" v-show="active === 1" @goNext="goNext" @close="close"></tools-basic-info-form>
+			<gen-info-form ref="genInfoForm" v-show="active === 2" @goNext="goNext" @close="close"></gen-info-form>
+      <gen-table-columns ref="tableColumns" v-show="active === 3"></gen-table-columns>
+			<div class="tools-footer" v-show="active === 3">
+				<el-button size="default" @click="close">关 闭</el-button>
+				<el-button type="primary" @click="onSubmit" size="default">保 存</el-button>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, ref, provide, getCurrentInstance} from 'vue';
+import { useRoute } from 'vue-router';
+import toolsBasicInfoForm from '/@/views/system/tools/gen/component/basicInfo.vue';
+import { TableColumns, TableDataInfo } from '/@/views/system/tools/gen/component/model';
+import { ElMessage } from 'element-plus/es';
+import {getGenTable, saveEdit} from '/@/api/system/tools/gen';
+import genInfoForm from '/@/views/system/tools/gen/component/genInfoForm.vue';
+import genTableColumns from '/@/views/system/tools/gen/component/tableColumns.vue';
+export default defineComponent({
+	name: 'apiV1SystemToolsGenColumnList',
+	components: { toolsBasicInfoForm, genInfoForm,genTableColumns },
+	setup() {
+    const { proxy } = getCurrentInstance() as any;
+		const route = useRoute();
+		const toolsBasicInfoForm = ref();
+		const genInfoForm = ref();
+    const tableColumns = ref()
+		const active = ref(1);
+
+		const changeSteps = (args: number) => {
+			if (args > active.value) {
+				switch (args) {
+					case 2:
+						//验证基本信息表单
+						if (toolsBasicInfoForm.value.nextTip()) {
+							active.value = args;
+						}
+						break;
+					case 3:
+						//验证生成信息表单
+            if (active.value==1){
+              //验证基本信息表单
+              if (toolsBasicInfoForm.value.nextTip()) {
+                active.value = args;
+              }
+            }else{
+              //验证生成信息表单
+              if (genInfoForm.value.nextTip()) {
+                active.value = args;
+              }
+            }
+						break;
+				}
+			} else {
+				active.value = args;
+			}
+		};
+		// 表详细信息
+		const info = ref(<TableDataInfo>{});
+		provide('tableData', info);
+		onBeforeMount(() => {
+			const tableId = route.query?.tableId;
+			if (tableId) {
+				// 获取表详细信息
+				getGenTable(tableId).then((res) => {
+					let columnsTmp:TableColumns[]= [];
+					columnsTmp = res.data.list.filter((item: TableColumns) => {
+						return !['updated_at', 'deleted_at'].includes(item.columnName);
+					});
+					const data: TableDataInfo = res.data.info as TableDataInfo;
+					data.columns = columnsTmp;
+					info.value = data;
+				});
+			} else {
+				ElMessage.error('参数错误');
+			}
+		});
+    // 表单组件验证
+    const formRulesValidate = (pageRef: string, sonRef: string) => {
+      return new Promise((resolve,reject) => {
+        proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
+          if (valid) {
+            resolve(valid)
+          }else{
+            reject('请将表单填写完整')
+          }
+        });
+      });
+    };
+		const onSubmit = () => {
+      Promise.all([
+        formRulesValidate('toolsBasicInfoForm', 'basicInfoFormRef'),
+        formRulesValidate('genInfoForm', 'genInfoFormRef'),
+      ]).then(() => {
+        saveEdit(info.value).then(()=>{
+          ElMessage.success('保存成功');
+          close();
+        })
+      }).catch(e=>{
+        ElMessage.error(e.toString());
+      });
+		};
+		const goNext = () => {
+			if (active.value > 2) {
+				active.value = 1;
+			} else {
+				active.value++;
+			}
+		};
+    //取消返回
+    const close = ()=>{
+      proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+    }
+		return {
+			toolsBasicInfoForm,
+			genInfoForm,
+      tableColumns,
+			active,
+			changeSteps,
+			info,
+			onSubmit,
+			goNext,
+      close
+		};
+	},
+});
+</script>
+
+<style scoped>
+.tools-footer {
+	margin: 30px auto;
+	text-align: center;
+}
+</style>
diff --git a/src/views/system/tools/gen/component/genInfoForm.vue b/src/views/system/tools/gen/component/genInfoForm.vue
new file mode 100644
index 0000000..6a611a2
--- /dev/null
+++ b/src/views/system/tools/gen/component/genInfoForm.vue
@@ -0,0 +1,204 @@
+<template>
+	<el-card shadow="never" header="生成信息配置">
+		<el-form ref="genInfoFormRef" :model="info" :rules="rules" label-width="150px">
+			<el-row :gutter="35">
+				<el-col class="mb20" :span="12">
+					<el-form-item prop="tplCategory">
+						<template #label>
+							<span>生成模板</span>
+						</template>
+						<el-select v-model="info.tplCategory">
+							<el-option label="单表（增删改查）" value="crud" />
+							<el-option label="树表（增删改查）" value="tree" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col class="mb20" :span="12">
+					<el-form-item prop="packageName">
+						<template #label>
+							<span>
+								生成包路径
+								<el-tooltip content="生成在哪个包下，例如 gfast/app/system" placement="top">
+									<el-icon><ele-QuestionFilled /></el-icon>
+								</el-tooltip>
+							</span>
+						</template>
+						<el-input v-model="info.packageName" />
+					</el-form-item>
+				</el-col>
+
+				<el-col class="mb20" :span="12">
+					<el-form-item prop="moduleName">
+						<template #label>
+							<span>
+								生成模块名
+								<el-tooltip content="可理解为子系统名，例如 system" placement="top">
+									<el-icon><ele-QuestionFilled /></el-icon>
+								</el-tooltip>
+							</span>
+						</template>
+						<el-input v-model="info.moduleName" />
+					</el-form-item>
+				</el-col>
+
+				<el-col class="mb20" :span="12">
+					<el-form-item prop="businessName">
+						<template #label>
+							<span>
+								生成业务名
+								<el-tooltip content="可理解为功能英文名，例如 user" placement="top">
+									<el-icon><ele-QuestionFilled /></el-icon>
+								</el-tooltip>
+							</span>
+						</template>
+						<el-input v-model="info.businessName" />
+					</el-form-item>
+				</el-col>
+
+				<el-col class="mb20" :span="12">
+					<el-form-item prop="functionName">
+						<template #label>
+							<span>
+								生成功能名
+								<el-tooltip content="用作类描述，例如 用户" placement="top">
+									<el-icon><ele-QuestionFilled /></el-icon>
+								</el-tooltip>
+							</span>
+						</template>
+						<el-input v-model="info.functionName" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+
+			<div v-show="info.tplCategory == 'tree'">
+				<h4 class="form-header">其他信息</h4>
+				<el-divider />
+				<el-row :gutter="35">
+					<el-col class="mb20" :span="8">
+						<el-form-item>
+							<template #label>
+								<span>
+									树编码字段
+									<el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+										<el-icon><ele-QuestionFilled /></el-icon>
+									</el-tooltip>
+								</span>
+							</template>
+							<el-select v-model="info.treeCode" placeholder="请选择">
+								<el-option
+									v-for="column in info.columns"
+									:key="column.htmlField"
+									:label="column.columnName + '：' + column.columnComment"
+									:value="column.htmlField"
+								></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col class="mb20" :span="8">
+						<el-form-item>
+							<template #label>
+								<span>
+									树父编码字段
+									<el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+										<el-icon><ele-QuestionFilled /></el-icon>
+									</el-tooltip>
+								</span>
+							</template>
+							<el-select v-model="info.treeParentCode" placeholder="请选择">
+								<el-option
+									v-for="column in info.columns"
+									:key="column.htmlField"
+									:label="column.columnName + '：' + column.columnComment"
+									:value="column.htmlField"
+								></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col class="mb20" :span="8">
+						<el-form-item>
+							<template #label>
+								<span>
+									树名称字段
+									<el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+										<el-icon><ele-QuestionFilled /></el-icon>
+									</el-tooltip>
+								</span>
+							</template>
+							<el-select v-model="info.treeName" placeholder="请选择">
+								<el-option
+									v-for="column in info.columns"
+									:key="column.htmlField"
+									:label="column.columnName + '：' + column.columnComment"
+									:value="column.htmlField"
+								></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</div>
+		</el-form>
+    <el-row>
+      <el-col :span="10"></el-col>
+      <el-col :span="4" class="base-footer">
+					<span>
+						<el-button size="default" @click="close">关 闭</el-button>
+						<el-button type="primary" @click="nextTip" size="default">下一步</el-button>
+					</span>
+      </el-col>
+      <el-col :span="10"></el-col>
+    </el-row>
+	</el-card>
+</template>
+
+<script lang="ts">
+import {defineComponent, inject, reactive, ref, unref} from 'vue';
+import type { FormInstance, FormRules } from 'element-plus';
+import { TableDataInfo } from '/@/views/system/tools/gen/component/model';
+import {ElMessage} from "element-plus";
+export default defineComponent({
+	name: 'genInfoForm',
+  emits:['goNext','close'],
+	setup(props,{emit}) {
+		const genInfoFormRef = ref<FormInstance>();
+		const info = inject<TableDataInfo>('tableData') as TableDataInfo;
+		const rules = reactive<FormRules>({
+			tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
+			packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
+			moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
+			businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
+			functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }],
+		});
+    const nextTip = ()=>{
+      //表单验证
+      let tag = false;
+      const formWrap = unref(genInfoFormRef) as any;
+      if (!formWrap) return false;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          emit('goNext');
+          tag = true;
+        } else {
+          ElMessage.error('请将表单填写完整');
+        }
+      });
+      return tag;
+    }
+    const close = ()=>{
+      emit('close')
+    }
+		return {
+      genInfoFormRef,
+			info,
+			rules,
+      nextTip,
+      close
+		};
+	},
+});
+</script>
+
+<style scoped>
+.form-header {
+}
+</style>
diff --git a/src/views/system/tools/gen/component/importTable.vue b/src/views/system/tools/gen/component/importTable.vue
new file mode 100644
index 0000000..773561e
--- /dev/null
+++ b/src/views/system/tools/gen/component/importTable.vue
@@ -0,0 +1,134 @@
+<template>
+  <!-- 导入表 -->
+  <el-dialog title="导入表" v-model="visible" width="800px" top="5vh" append-to-body :close-on-click-modal="false">
+    <el-form :model="tableData.param" ref="queryFormRef" :inline="true">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+            v-model="tableData.param.tableName"
+            placeholder="请输入表名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+            v-model="tableData.param.tableComment"
+            placeholder="请输入表描述"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="handleQuery"><el-icon><ele-Search /></el-icon>搜索</el-button>
+        <el-button size="small" @click="resetQuery"><SvgIcon name="ele-Refresh" />重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table @row-click="clickRow" ref="tableRef" :data="tableData.data" @selection-change="handleSelectionChange" height="260px">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="tableName" label="表名称"></el-table-column>
+        <el-table-column prop="tableComment" label="表描述"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
+      </el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="getList"
+      />
+    </el-row>
+    <div footer class="dialog-footer">
+      <el-button type="primary" @click="handleImportTable">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import {defineComponent, reactive, ref, toRefs} from "vue";
+import {ImportTableDataState,TableData} from "/@/views/system/tools/gen/component/model"
+import {getImportTableList, importTable} from "/@/api/system/tools/gen";
+import {ElMessage} from "element-plus/es";
+export default defineComponent({
+  name: "importTable",
+  emits:['ok'],
+  setup(prop,{emit}) {
+    const queryFormRef = ref()
+    const tableRef = ref()
+    const visible = ref(false)
+    // 选中数组值
+    let tables:string[] = []
+    const state = reactive<ImportTableDataState>({
+      tableData:{
+        data:[],
+        total:0,
+        loading:true,
+        param:{
+          pageNum: 1,
+          pageSize: 10,
+          tableName: '',
+          tableComment: ''
+        },
+      }
+    })
+    const getList = ()=>{
+      getImportTableList(state.tableData.param).then(res=>{
+        state.tableData.data = res.data.list??[]
+        state.tableData.total = res.data.total
+      })
+    }
+    const handleQuery = ()=>{
+      state.tableData.param.pageNum = 1
+      getList()
+    }
+    const resetQuery=()=>{
+      queryFormRef.value.resetFields()
+      getList()
+    }
+    const clickRow=(row:TableData)=>{
+      tableRef.value.toggleRowSelection(row);
+    }
+    const handleSelectionChange=(selection:Array<any>)=>{
+      tables = selection.map(item => item.tableName);
+    }
+    const handleImportTable=()=>{
+      if(tables.length==0){
+        ElMessage.error("请选择要导入的表格");
+        return
+      }
+      importTable(tables).then((res:any)=>{
+        if (res.code === 0) {
+          ElMessage.success('导入成功');
+          visible.value = false;
+          emit("ok");
+        }
+      })
+    }
+    const openDialog = ()=>{
+      getList()
+      visible.value = true
+    }
+    return {
+      queryFormRef,
+      tableRef,
+      visible,
+      getList,
+      handleQuery,
+      resetQuery,
+      clickRow,
+      handleSelectionChange,
+      handleImportTable,
+      openDialog,
+      ...toRefs(state),
+    };
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/tools/gen/component/model.ts b/src/views/system/tools/gen/component/model.ts
new file mode 100644
index 0000000..ee81dcc
--- /dev/null
+++ b/src/views/system/tools/gen/component/model.ts
@@ -0,0 +1,116 @@
+// 定义接口来定义对象的类型
+
+export interface TableData {
+    tableId:number;
+    tableName:string;
+    tableComment:string;
+    className:string;
+    createTime:string;
+    updateTime:string;
+}
+
+export interface TableColumns {
+    columnId: number;
+    tableId: number;
+    columnName: string;
+    columnComment: string;
+    columnType: string;
+    goType: string;
+    tsType:string;
+    goField: string;
+    htmlField: string;
+    isPk: boolean;
+    isIncrement: boolean;
+    isRequired: boolean;
+    isInsert: boolean;
+    isEdit: boolean;
+    isList: boolean;
+    isDetail: boolean;
+    isQuery: boolean;
+    sortOrderEdit: number;
+    sortOrderList: number;
+    sortOrderDetail: number;
+    sortOrderQuery: number;
+    queryType: string;
+    htmlType: string;
+    dictType: string;
+    linkTableName: string;
+    linkTableClass: string;
+    linkTableModuleName: string;
+    linkTableBusinessName: string;
+    linkTablePackage: string;
+    linkLabelId: string;
+    linkLabelName: string;
+    colSpan: number;
+    rowSpan: number;
+    isRowStart: boolean;
+    minWidth: number;
+    isFixed: boolean;
+    isOverflowTooltip: boolean;
+    isCascade: boolean;
+    parentColumnName: string;
+    cascadeColumnName: string;
+}
+
+export interface TableDataInfo extends TableData{
+    treeCode:string;
+    treeName:string;
+    treeParentCode:string;
+    functionAuthor:string;
+    sortColumn:string;
+    sortType:string;
+    remark:string;
+    overwrite:boolean;
+    showDetail:boolean;
+    tplCategory:string;
+    packageName:string;
+    moduleName:string;
+    businessName:string;
+    functionName:string;
+    linkTableName:string;
+    columns:TableColumns[]
+}
+export interface TableDataState {
+    ids:number[];
+    // 非单个禁用
+    single: boolean,
+    // 非多个禁用
+    multiple: boolean,
+    // 选中表数组
+    tableNames: string[],
+    tableData: {
+        data: Array<TableData>;
+        total: number;
+        loading: boolean;
+        param: {
+            tableName:string;
+            tableComment:string;
+            pageNum: number;
+            pageSize: number;
+            dateRange: string[];
+        };
+    };
+}
+
+export interface ImportTableDataState{
+    tableData:{
+        data:Array<TableData>;
+        total:number;
+        loading:boolean;
+        param:{
+            pageNum: number;
+            pageSize: number;
+            tableName: string;
+            tableComment: string;
+        }
+    }
+}
+
+export interface previewState{
+    flush: boolean;
+    fullscreen: boolean;
+    open: boolean;
+    title: string;
+    data: object;
+    activeName: string;
+}
diff --git a/src/views/system/tools/gen/component/preview.vue b/src/views/system/tools/gen/component/preview.vue
new file mode 100644
index 0000000..d114777
--- /dev/null
+++ b/src/views/system/tools/gen/component/preview.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="gen-viewer-container">
+  <el-dialog :fullscreen="fullscreen" v-model="open" width="80%" :close-on-click-modal="false" :destroy-on-close="true">
+    <template #header>
+      <div class="custom-dialog-title">
+        <div class="title-content">
+          {{title}}
+        </div>
+      </div>
+    </template>
+    <el-tabs v-model="activeName">
+      <el-tab-pane
+          v-for="(value, key) in data"
+          :label="key"
+          :name="key"
+          :key="key"
+      >
+<!--        <pre>{{ value }}</pre>-->
+        <div class="gen-viewer">
+          <my-code-mirror :height="height" :model-value="value"></my-code-mirror>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted} from "vue";
+import {previewState} from "/@/views/system/tools/gen/component/model";
+import {showPreview} from "/@/api/system/tools/gen";
+import MyCodeMirror from "/@/components/myCodeMirror/index.vue";
+import { ElLoading } from 'element-plus'
+export default defineComponent({
+  name: "genCodePreview",
+  components: {MyCodeMirror},
+  setup(){
+    const height = ref(400)
+    // 预览参数
+    const preview:previewState = reactive({
+      flush: true,
+      fullscreen: false,
+      open: false,
+      title: "代码预览",
+      data: {},
+      activeName: "api"
+    })
+    const getWindowInfo = () => {
+      height.value = document.getElementsByTagName('body')[0].clientHeight-130;
+    };
+    const showView = (tableId:number)=>{
+      const loading = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
+      showPreview(tableId).then((res:any)=>{
+        preview.data = res.data.data??{}
+        preview.open = true
+        loading.close()
+      }).catch(()=>{
+        loading.close()
+      })
+    }
+    onMounted(()=>{
+      height.value = document.getElementsByTagName('body')[0].clientHeight-130;
+    })
+    onBeforeMount(()=>{
+      window.addEventListener('resize', getWindowInfo);
+    })
+    return {
+      showView,
+      height,
+      ...toRefs(preview)
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.gen-viewer-container :deep(.el-dialog .el-dialog__body){
+  max-height: none!important;
+}
+</style>
+
diff --git a/src/views/system/tools/gen/component/tableColumns.vue b/src/views/system/tools/gen/component/tableColumns.vue
new file mode 100644
index 0000000..784eb91
--- /dev/null
+++ b/src/views/system/tools/gen/component/tableColumns.vue
@@ -0,0 +1,275 @@
+<template>
+	<el-card shadow="never" header="字段信息配置">
+		<el-alert title="⚠️表字段中的updated_at、deleted_at的字段在此列表中已经隐藏" type="warning" show-icon />
+		<el-table ref="tableColumnsRef" :data="info.columns" row-key="columnId" :max-height="tableHeight" width="100%">
+			<el-table-column label="序号" type="index" width="50" fixed />
+			<el-table-column label="字段列名" prop="columnName" width="150" fixed :show-overflow-tooltip="true" />
+			<el-table-column label="字段描述" width="150" fixed>
+				<template #default="scope">
+					<textarea class="el-textarea__inner" v-model.lazy="scope.row.columnComment"></textarea>
+				</template>
+			</el-table-column>
+			<el-table-column class-name="allowDrag" label="物理类型" prop="columnType" width="120" :show-overflow-tooltip="true" />
+			<el-table-column label="go类型" width="120">
+				<template #default="scope">
+					<el-select v-model="scope.row.goType">
+						<el-option label="int" value="int" />
+						<el-option label="uint" value="uint" />
+						<el-option label="int64" value="int64" />
+						<el-option label="uint64" value="uint64" />
+						<el-option label="float64" value="float64" />
+						<el-option label="string" value="string" />
+						<el-option label="Time" value="Time" />
+						<el-option label="byte" value="byte" />
+						<el-option label="bool" value="bool" />
+					</el-select>
+				</template>
+			</el-table-column>
+      <el-table-column label="TS类型" width="120">
+        <template #default="scope">
+          <el-select v-model="scope.row.tsType">
+            <el-option label="string" value="string" />
+            <el-option label="number" value="number" />
+            <el-option label="boolean" value="boolean" />
+            <el-option label="string[]" value="string[]" />
+            <el-option label="number[]" value="number[]" />
+            <el-option label="any" value="any" />
+            <el-option label="tuple" value="tuple" />
+            <el-option label="enum" value="enum" />
+          </el-select>
+        </template>
+      </el-table-column>
+			<el-table-column label="go属性" width="150">
+				<template #default="scope">
+					<textarea class="el-textarea__inner" v-model.lazy="scope.row.goField"></textarea>
+				</template>
+			</el-table-column>
+
+			<el-table-column label="json属性" width="150">
+				<template #default="scope">
+          <textarea class="el-textarea__inner" v-model.lazy="scope.row.htmlField" ></textarea>
+				</template>
+			</el-table-column>
+
+			<el-table-column label="插入" width="50">
+				<template #default="scope">
+					<el-checkbox
+						v-model="scope.row.isInsert"
+						:disabled="
+							scope.row.isPk == '1' ||
+							scope.row.columnName == 'created_at' ||
+							scope.row.columnName == 'created_by' ||
+							scope.row.columnName == 'updated_by'
+						"
+					></el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="编辑" width="50">
+				<template #default="scope">
+					<el-checkbox
+						v-model="scope.row.isEdit"
+						:disabled="
+							scope.row.isPk == '1' ||
+							scope.row.columnName == 'created_at' ||
+							scope.row.columnName == 'created_by' ||
+							scope.row.columnName == 'updated_by'
+						"
+					></el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="列表" width="50">
+				<template #default="scope">
+					<el-checkbox v-model="scope.row.isList"></el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="列表固定" width="50">
+				<template #default="scope">
+					<el-checkbox v-model="scope.row.isFixed"></el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="过长隐藏" width="50">
+				<template #default="scope">
+					<el-checkbox v-model="scope.row.isOverflowTooltip" />
+				</template>
+			</el-table-column>
+			<el-table-column label="详情" width="50">
+				<template #default="scope">
+					<el-checkbox v-model="scope.row.isDetail"></el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="查询" width="50">
+				<template #default="scope">
+					<el-checkbox v-model="scope.row.isQuery" :disabled="scope.row.htmlField == info.treeParentCode"></el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="查询方式" width="120">
+				<template #default="scope">
+					<el-select v-model="scope.row.queryType">
+						<el-option label="=" value="EQ" />
+						<el-option label="!=" value="NE" />
+						<el-option label=">" value="GT" />
+						<el-option label=">=" value="GTE" />
+						<el-option label="<" value="LT" />
+						<el-option label="<=" value="LTE" />
+						<el-option label="LIKE" value="LIKE" />
+						<el-option label="BETWEEN" value="BETWEEN" />
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column label="必填" width="50">
+				<template #default="scope">
+					<el-checkbox v-model="scope.row.isRequired"></el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="显示类型" width="140">
+				<template #default="scope">
+					<el-select v-model="scope.row.htmlType" :disabled="scope.row.htmlField == info.treeParentCode">
+						<el-option label="文本框" value="input" />
+						<el-option label="文本域" value="textarea" />
+						<el-option label="下拉框" value="select" />
+						<el-option label="单选框" value="radio" />
+						<el-option label="复选框" value="checkbox" />
+						<el-option label="日期控件" value="date" />
+						<el-option label="日期时间控件" value="datetime" />
+						<el-option label="富文本" value="richtext" />
+						<el-option label="单图上传" value="imagefile" />
+						<el-option label="多图上传" value="images" />
+						<el-option label="单文件上传" value="file" />
+						<el-option label="多文件上传" value="files" />
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column label="列表排序" width="100">
+				<template #default="scope">
+          <textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderList" ></textarea>
+				</template>
+			</el-table-column>
+			<el-table-column label="详情排序" width="100">
+				<template #default="scope">
+          <textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderDetail" ></textarea>
+				</template>
+			</el-table-column>
+			<el-table-column label="编辑排序" width="100">
+				<template #default="scope">
+          <textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderEdit" ></textarea>
+				</template>
+			</el-table-column>
+			<el-table-column label="查询排序" width="100">
+				<template #default="scope">
+          <textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderQuery" ></textarea>
+				</template>
+			</el-table-column>
+			<el-table-column label="列表宽度" width="100">
+				<template #default="scope">
+          <textarea class="el-textarea__inner" v-model.lazy="scope.row.minWidth" ></textarea>
+				</template>
+			</el-table-column>
+			<el-table-column label="详情占列" width="70">
+				<template #default="scope">
+          <textarea class="el-textarea__inner" v-model.lazy="scope.row.colSpan" ></textarea>
+				</template>
+			</el-table-column>
+			<el-table-column label="详情起新行" width="50">
+				<template #default="scope">
+					<el-checkbox true-label="1" v-model="scope.row.isRowStart"></el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="字典类型" width="160">
+				<template #default="scope">
+					<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
+						<el-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType">
+							<span style="float: left">{{ dict.dictName }}</span>
+							<span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
+						</el-option>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column label="关联表" width="160">
+				<template #default="scope">
+					<el-select
+						v-model="scope.row.linkTableName"
+						clearable
+						filterable
+						placeholder="请选择"
+						@change="handleChangeConfig(scope.row)"
+					>
+						<el-option v-for="table in relationTable" :key="table.tableName" :label="table.tableName" :value="table.tableName">
+							<span style="float: left">{{ table.tableName }}</span>
+							<span style="float: right; color: #8492a6; font-size: 13px">{{ table.tableComment }}</span>
+						</el-option>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column label="关联表key" width="150">
+				<template #default="scope">
+					<el-select v-model="scope.row.linkLabelId" clearable filterable placeholder="请选择">
+						<el-option v-for="column in scope.row.columns" :key="column.columnName" :label="column.columnName" :value="column.columnName">
+							<span style="float: left">{{ column.htmlField }}</span>
+							<span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
+						</el-option>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column label="关联表value" width="150">
+				<template #default="scope">
+					<el-select v-model="scope.row.linkLabelName" clearable filterable placeholder="请选择">
+						<el-option v-for="column in scope.row.columns" :key="column.columnName" :label="column.columnName" :value="column.columnName">
+							<span style="float: left">{{ column.htmlField }}</span>
+							<span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
+						</el-option>
+					</el-select>
+				</template>
+			</el-table-column>
+		</el-table>
+	</el-card>
+</template>
+
+<script lang="ts">
+import {defineComponent, inject, onBeforeMount, ref} from 'vue';
+import type { FormInstance } from 'element-plus';
+import {TableDataInfo} from '/@/views/system/tools/gen/component/model';
+import {getRelationTable} from "/@/api/system/tools/gen";
+import {optionselect} from "/@/api/system/dict/type";
+export default defineComponent({
+	name: 'genTableColumns',
+	setup() {
+		const tableColumnsRef = ref<FormInstance>();
+		const info = inject<TableDataInfo>('tableData') as TableDataInfo;
+		// 表格的高度
+		const tableHeight = ref(document.documentElement.scrollHeight - 300 + 'px');
+    const dictOptions = ref([])
+    const relationTable = ref<TableDataInfo[]>([])
+    onBeforeMount(()=>{
+      //获取字典选项
+      optionselect().then((res:any)=>{
+        dictOptions.value = res.data.dictType??[]
+      })
+      //获取关联表数据
+      getRelationTable().then((res:any)=>{
+        relationTable.value = <TableDataInfo[]>(res.data?.data)??[]
+      })
+    })
+    const handleChangeConfig = (row:TableDataInfo)=>{
+      relationTable.value.filter(function(item) {
+        if (item.tableName === row.linkTableName) {
+          row.columns = item.columns
+        }
+      })
+    }
+		return {
+			tableColumnsRef,
+      info,
+			tableHeight,
+      dictOptions,
+      relationTable,
+      handleChangeConfig,
+		};
+	},
+});
+</script>
+
+<style scoped>
+.el-textarea__inner{
+ height: 36px;
+}
+</style>
diff --git a/src/views/system/tools/gen/index.vue b/src/views/system/tools/gen/index.vue
new file mode 100644
index 0000000..9e09585
--- /dev/null
+++ b/src/views/system/tools/gen/index.vue
@@ -0,0 +1,268 @@
+<template>
+	<div class="app-container">
+		<el-card shadow="hover">
+			<div class="system-user-search mb15">
+        <el-form :inline="true" ref="queryRef" :model="tableData.param">
+          <el-form-item label="表名称" prop="tableName">
+            <el-input size="default" v-model="tableData.param.tableName" placeholder="请输入表名称" class="w-50 m-2" clearable/>
+          </el-form-item>
+          <el-form-item label="表描述" prop="tableComment">
+            <el-input size="default" v-model="tableData.param.tableComment" placeholder="请输入岗位编码" class="w-50 m-2" clearable/>
+          </el-form-item>
+          <el-form-item label="创建时间" prop="dateRange">
+            <el-date-picker
+                v-model="tableData.param.dateRange"
+                size="default"
+                style="width: 240px"
+                value-format="YYYY-MM-DD"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="tableList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button
+                type="primary"
+                size="small"
+                @click="handleGenTable(null)"
+                :disabled="multiple"
+            ><el-icon><ele-Download /></el-icon>生成</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+                type="info"
+                size="small"
+                @click="openImportTable"
+            ><el-icon><ele-UploadFilled /></el-icon>导入</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+                type="success"
+                size="small"
+                :disabled="single"
+                @click="handleEditTable(null)"
+            ><el-icon><ele-EditPen /></el-icon>修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+                type="danger"
+                size="small"
+                :disabled="multiple"
+                @click="onRowDel(null)"
+            ><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
+          </el-col>
+        </el-row>
+			</div>
+			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+				<el-table-column type="index" label="序号" width="60" />
+				<el-table-column prop="tableName" label="表名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="tableComment" label="表描述" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="className" label="实体" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作" width="300">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="handlePreview(scope.row)"><el-icon><ele-View /></el-icon>预览</el-button>
+						<el-button size="small" text type="primary" @click="handleEditTable(scope.row)"><el-icon><ele-EditPen /></el-icon>编辑</el-button>
+						<el-button size="small" text type="primary" @click="handleGenTable(scope.row)"><el-icon><ele-Download /></el-icon>生成代码</el-button>
+						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+      <pagination
+          v-show="tableData.total>0"
+          :total="tableData.total"
+          v-model:page="tableData.param.pageNum"
+          v-model:limit="tableData.param.pageSize"
+          @pagination="tableList"
+      />
+		</el-card>
+    <import-table ref="importRef" @ok="tableList" />
+    <gen-code-preview ref="genCodePreviewRef"></gen-code-preview>
+	</div>
+</template>
+
+<script lang="ts">
+import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue';
+import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
+import {getTableList,deleteTables,batchGenCode} from "/@/api/system/tools/gen";
+import {TableData,TableDataState} from "/@/views/system/tools/gen/component/model"
+import importTable from "/@/views/system/tools/gen/component/importTable.vue";
+import { useRouter } from 'vue-router';
+import genCodePreview from '/@/views/system/tools/gen/component/preview.vue'
+import {refreshBackEndControlRoutes} from "/@/router/backEnd";
+export default defineComponent({
+	name: 'apiV1SystemToolsGenTableList',
+	components: {importTable,genCodePreview},
+	setup() {
+    const router =  useRouter()
+		const addPostRef = ref()
+		const editPostRef = ref()
+    const queryRef = ref()
+    const importRef = ref()
+    const genCodePreviewRef = ref()
+		const state = reactive<TableDataState>({
+      ids:[],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      tableNames:[],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+          tableName:'',
+          tableComment:'',
+					pageNum: 1,
+					pageSize: 10,
+          dateRange: []
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+			tableList()
+		};
+    const tableList = ()=>{
+      getTableList(state.tableData.param).then(res=>{
+        state.tableData.data = res.data.list??[];
+        state.tableData.total = res.data.total;
+      })
+    };
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return
+      formEl.resetFields()
+      tableList()
+    };
+		// 删除导入的表
+		const onRowDel = (row: TableData) => {
+      let msg = '你确定要删除所选数据？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `此操作将永久删除：“${row.tableName}”，是否继续?`
+        ids = [row.tableId]
+      }else{
+        msg = `此操作将永久删除：“${state.tableNames.join(',')}”，是否继续?`
+        ids = state.ids
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要删除的数据。');
+        return
+      }
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+          deleteTables(ids).then(()=>{
+            ElMessage.success('删除成功');
+            tableList();
+          })
+				})
+				.catch(() => {});
+		};
+		// 分页改变
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页改变
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+    // 多选框选中数据
+    const handleSelectionChange = (selection:Array<TableData>)=> {
+      state.ids = selection.map(item => item.tableId)
+      state.multiple = !selection.length
+      state.single = selection.length != 1
+      state.tableNames = selection.map(item=>item.tableName)
+    };
+    const handleGenTable=(row: TableData)=>{
+      let msg = '你确定要生成？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `此操作将生成业务表：“${row.tableName}”相关代码，是否继续?`
+        ids = [row.tableId]
+      }else{
+        msg = `此操作将生成业务表：“${state.tableNames.join(',')}”相关代码，是否继续?`
+        ids = state.ids
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要生成的业务表数据。');
+        return
+      }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+          .then(() => {
+            batchGenCode(ids).then(()=>{
+              ElMessage.success('生成成功');
+              resetMenuSession()
+              tableList();
+            })
+          })
+          .catch(() => {});
+    }
+    // 重置菜单session
+    const resetMenuSession = () => {
+      refreshBackEndControlRoutes();
+    };
+    //打开导入页面
+    const openImportTable=()=>{
+      importRef.value.openDialog()
+    }
+    const handlePreview = (row:TableData)=>{
+      genCodePreviewRef.value.showView(row.tableId);
+    }
+    const handleEditTable=(row:TableData)=>{
+      const tableId = row?.tableId || state.ids[0];
+      router.push({ path: "/system/tools/gen/edit", query: { tableId: tableId } });
+    }
+		return {
+			addPostRef,
+			editPostRef,
+      queryRef,
+      importRef,
+      genCodePreviewRef,
+			onRowDel,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+      tableList,
+      resetQuery,
+      handleSelectionChange,
+      handleGenTable,
+      openImportTable,
+      handleEditTable,
+      handlePreview,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/user/component/editUser.vue b/src/views/system/user/component/editUser.vue
new file mode 100644
index 0000000..de132fe
--- /dev/null
+++ b/src/views/system/user/component/editUser.vue
@@ -0,0 +1,285 @@
+<template>
+	<div class="system-edit-user-container">
+		<el-dialog :title="(ruleForm.userId!==0?'修改':'添加')+'用户'" v-model="isShowDialog" width="769px">
+			<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="ruleForm.userId===0">
+						<el-form-item label="用户名" prop="userName">
+							<el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
+						</el-form-item>
+					</el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="ruleForm.userId===0">
+            <el-form-item label="账户密码" prop="password">
+              <el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
+            </el-form-item>
+          </el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="用户昵称" prop="nickName">
+							<el-input v-model="ruleForm.nickName" placeholder="请输入用户昵称" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="关联角色" prop="roleIds">
+							<el-select v-model="ruleForm.roleIds" placeholder="请选择" clearable class="w100" multiple>
+								<el-option
+                    v-for="role in roleList"
+                    :key="'role-'+role.id"
+                    :label="role.name"
+                    :value="role.id">
+                </el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="部门" prop="deptId">
+							<el-cascader
+								:options="deptData"
+								:props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName' }"
+								placeholder="请选择部门"
+								clearable
+								class="w100"
+								v-model="ruleForm.deptId"
+							>
+								<template #default="{ node, data }">
+									<span>{{ data.deptName }}</span>
+									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+								</template>
+							</el-cascader>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="手机号" prop="mobile">
+							<el-input v-model="ruleForm.mobile" placeholder="请输入手机号" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="邮箱" prop="email">
+							<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="性别" prop="sex">
+							<el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
+								<el-option
+                   v-for="gender in genderData"
+                   :key="'gender-'+gender.value"
+                   :label="gender.label"
+                   :value="gender.value"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="岗位" prop="postIds">
+              <el-select v-model="ruleForm.postIds" placeholder="请选择" clearable class="w100" multiple>
+                <el-option
+                    v-for="post in postList"
+                    :key="'post-'+post.postId"
+                    :label="post.postName"
+                    :value="post.postId">
+                </el-option>
+              </el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="用户状态">
+							<el-switch v-model="ruleForm.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁"></el-switch>
+						</el-form-item>
+					</el-col>
+          <el-col :span="24">
+            <el-form-item label="用户类型">
+              <el-radio-group v-model="ruleForm.isAdmin">
+                <el-radio
+                    :label="1"
+                >后台管理员</el-radio>
+                <el-radio
+                    :label="0"
+                >前台用户</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="用户描述">
+							<el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.userId!==0?'修 改':'添 加'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, onMounted, defineComponent,ref,unref } from 'vue';
+import {getParams, addUser, editUser, getEditUser} from "/@/api/system/user";
+import {ElMessage} from "element-plus";
+
+
+export default defineComponent({
+	name: 'systemEditUser',
+  props:{
+    deptData:{
+      type:Array,
+      default:()=>[]
+    },
+    genderData:{
+      type:Array,
+      default:()=>[]
+    }
+  },
+	setup(prop,{emit}) {
+    const roleList = ref([]);
+    const postList = ref([]);
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive({
+			isShowDialog: false,
+			ruleForm: {
+        userId: 0,
+        deptId: 0,
+        userName: '',
+        nickName: '',
+        password: '',
+        mobile:'',
+        email: '',
+        sex: '',
+        status: 1,
+        remark: '',
+        postIds: [],
+        roleIds: [],
+        isAdmin:0,
+			},
+      //表单校验
+      rules: {
+        userName: [
+          { required: true, message: "用户名称不能为空", trigger: "blur" }
+        ],
+        nickName: [
+          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+        ],
+        deptId: [
+          { required: true, message: "归属部门不能为空", trigger: "blur" }
+        ],
+        password: [
+          { required: true, message: "用户密码不能为空", trigger: "blur" }
+        ],
+        email: [
+          {
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        mobile: [
+          { required: true, message: "手机号码不能为空", trigger: "blur" },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row?:any) => {
+      resetForm()
+      if(row) {
+        getEditUser(row.id).then((res:any)=>{
+          const user = res.data.user;
+          state.ruleForm = {
+            userId: user.id,
+            deptId: user.deptId,
+            userName: user.userName,
+            nickName: user.userNickname,
+            password: '-',
+            mobile:user.mobile,
+            email: user.userEmail,
+            sex: String(user.sex),
+            status: user.userStatus,
+            remark: user.remark,
+            postIds: res.data.checkedPosts??[],
+            roleIds: res.data.checkedRoleIds??[],
+            isAdmin:user.isAdmin,
+          };
+        })
+      }
+			state.isShowDialog = true;
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.userId===0){
+            //添加
+            addUser(state.ruleForm).then(()=>{
+              ElMessage.success('用户添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('getUserList')
+            });
+          }else{
+            //修改
+            editUser(state.ruleForm).then(()=>{
+              ElMessage.success('用户修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('getUserList')
+            });
+          }
+        }
+      });
+		};
+		// 初始化部门数据
+		const initTableData = () => {
+      //获取角色岗位选项
+      getParams().then((res:any)=>{
+        roleList.value = res.data.roleList??[];
+        postList.value = res.data.posts??[];
+      });
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+    const resetForm = ()=>{
+      state.ruleForm = {
+        userId: 0,
+        deptId: 0,
+        userName: '',
+        nickName: '',
+        password: '',
+        mobile:'',
+        email: '',
+        sex: '',
+        status: 1,
+        remark: '',
+        postIds: [],
+        roleIds: [],
+        isAdmin:0,
+      }
+    };
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      roleList,
+      postList,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
new file mode 100644
index 0000000..d79521e
--- /dev/null
+++ b/src/views/system/user/index.vue
@@ -0,0 +1,362 @@
+<template>
+	<div class="system-user-container">
+    <el-row :gutter="10" style="width: 100%;">
+      <el-col :span="4">
+        <el-card shadow="hover">
+          <el-aside>
+            <el-scrollbar>
+              <el-input :prefix-icon="search" v-model="filterText" placeholder="请输入部门名称" clearable size="default" style="width: 80%;"/>
+              <el-tree
+                  ref="treeRef"
+                  class="filter-tree"
+                  :data="deptData"
+                  :props="deptProps"
+                  default-expand-all
+                  :filter-node-method="deptFilterNode"
+                  @node-click="handleNodeClick"
+              />
+            </el-scrollbar>
+          </el-aside>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="hover">
+          <div class="system-user-search mb15">
+            <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+              <el-form-item label="关键字" prop="keyWords">
+                <el-input
+                    v-model="tableData.param.keyWords"
+                    placeholder="请输入用户账号或姓名"
+                    clearable
+                    size="default"
+                    style="width: 240px"
+                    @keyup.enter.native="userList"
+                />
+              </el-form-item>
+              <el-form-item label="手机号码" prop="mobile">
+                <el-input
+                    v-model="tableData.param.mobile"
+                    placeholder="请输入手机号码"
+                    clearable
+                    size="default"
+                    style="width: 240px"
+                    @keyup.enter.native="userList"
+                />
+              </el-form-item>
+              <el-form-item label="状态" prop="status" style="width: 200px;">
+                <el-select
+                    v-model="tableData.param.status"
+                    placeholder="用户状态"
+                    clearable
+                    size="default"
+                    style="width: 240px"
+                >
+                  <el-option label="启用"  :value="1"/>
+                  <el-option label="禁用"  :value="0"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="创建时间" prop="dateRange">
+                <el-date-picker
+                    v-model="tableData.param.dateRange"
+                    size="default"
+                    style="width: 240px"
+                    value-format="YYYY-MM-DD"
+                    type="daterange"
+                    range-separator="-"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                ></el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-button size="default" type="primary" class="ml10" @click="userList">
+                  <el-icon>
+                    <ele-Search />
+                  </el-icon>
+                  查询
+                </el-button>
+                <el-button size="default" @click="resetQuery(queryRef)">
+                  <el-icon>
+                    <ele-Refresh />
+                  </el-icon>
+                  重置
+                </el-button>
+                <el-button size="default" type="success" class="ml10" @click="onOpenAddUser">
+                  <el-icon>
+                    <ele-FolderAdd />
+                  </el-icon>
+                  新增用户
+                </el-button>
+                <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+                  <el-icon>
+                    <ele-Delete />
+                  </el-icon>
+                  删除用户
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column type="index" label="序号" width="60" />
+            <el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="dept.deptName" label="部门" show-overflow-tooltip></el-table-column>
+            <el-table-column label="角色" align="center" prop="roleInfo" :show-overflow-tooltip="true" >
+              <template #default="scope">
+                <span v-for="(item,index) of scope.row.roleInfo" :key="'role-'+index">   {{item.name+'   '}}   </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="mobile" label="手机号" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="userStatus" label="用户状态" show-overflow-tooltip>
+              <template #default="scope">
+                <el-switch
+                    v-model="scope.row.userStatus"
+                    inline-prompt
+                    :active-value="1"
+                    :inactive-value="0"
+                    active-text="启"
+                    inactive-text="禁"
+                    @change="handleStatusChange(scope.row)">
+                </el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
+            <el-table-column label="操作" width="200">
+              <template #default="scope">
+                <el-button size="small" text type="primary" @click="onOpenEditUser(scope.row)">修改</el-button>
+                <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+                <el-button size="small" text type="primary" @click="handleResetPwd(scope.row)">重置</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+              v-show="tableData.total>0"
+              :total="tableData.total"
+              v-model:page="tableData.param.pageNum"
+              v-model:limit="tableData.param.pageSize"
+              @pagination="userList"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+		<EditUser ref="editUserRef" :dept-data="deptData" :gender-data="sys_user_sex" @getUserList="userList"/>
+	</div>
+</template>
+
+<script lang="ts">
+import {toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentInstance} from 'vue';
+import {ElMessageBox, ElMessage, ElTree,FormInstance} from 'element-plus';
+import { Search } from '@element-plus/icons-vue'
+import EditUser from '/@/views/system/user/component/editUser.vue';
+import {getUserList, getDeptTree, resetUserPwd, changeUserStatus, deleteUser} from '/@/api/system/user/index';
+
+interface TableDataState {
+  ids:number[];
+  deptProps:{};
+  deptData:any[];
+	tableData: {
+		data: any[];
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+      deptId:string;
+      mobile:string;
+      status:string;
+      keyWords:string;
+      dateRange: string[];
+		};
+	};
+}
+
+export default defineComponent({
+	name: 'systemUser',
+	components: { EditUser },
+	setup() {
+    const {proxy} = <any>getCurrentInstance();
+    const {sys_user_sex} = proxy.useDict('sys_user_sex')
+		const editUserRef = ref();
+		const queryRef = ref();
+    const filterText = ref('');
+    const treeRef = ref<InstanceType<typeof ElTree>>();
+    const search = Search
+		const state = reactive<TableDataState>({
+      ids:[],
+      deptProps:{
+        id:"deptId",
+        children: "children",
+        label: "deptName"
+      },
+      deptData:[
+        {
+          label: '集团总部',
+          children: [
+            {
+              label: '曲靖分部',
+              children: [
+                {
+                  label: '总经办',
+                },
+                {
+                  label: '市场部',
+                },
+                {
+                  label: '研发部',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+          pageNum: 1,
+          pageSize: 10,
+          deptId:'',
+          mobile:'',
+          status:'',
+          keyWords:'',
+          dateRange:[]
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+      getDeptTree().then((res:any)=>{
+        state.deptData = res.data.deps
+      })
+      userList();
+		};
+    const userList = ()=>{
+      getUserList(state.tableData.param).then((res:any)=>{
+        state.tableData.data = res.data.userList??[];
+        state.tableData.total = res.data.total;
+      });
+    };
+		// 打开新增用户弹窗
+		const onOpenAddUser = () => {
+      editUserRef.value.openDialog();
+		};
+		// 打开修改用户弹窗
+		const onOpenEditUser = (row:any) => {
+			editUserRef.value.openDialog(row);
+		};
+		// 删除用户
+		const onRowDel = (row:any) => {
+      let msg = '你确定要删除所选用户？';
+      let ids:number[] = [] ;
+      if(row){
+        msg = `此操作将永久删除用户：“${row.userName}”，是否继续?`
+        ids = [row.id]
+      }else{
+        ids = state.ids
+      }
+      if(ids.length===0){
+        ElMessage.error('请选择要删除的数据。');
+        return
+      }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+          .then(() => {
+            deleteUser(ids).then(()=>{
+              ElMessage.success('删除成功');
+              userList();
+            })
+          })
+          .catch(() => {});
+		};
+		// 分页改变
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页改变
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+    watch(filterText, (val) => {
+      treeRef.value!.filter(val)
+    });
+    const deptFilterNode = (value: string, data:any) => {
+      if (!value) return true;
+      return data.deptName.includes(value)
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection:any[])=> {
+      state.ids = selection.map(item => item.id)
+    };
+    // 节点单击事件
+    const handleNodeClick = (data:any) => {
+      state.tableData.param.deptId = data.deptId;
+      userList();
+    };
+    /** 重置密码按钮操作 */
+    const handleResetPwd = (row:any)=> {
+      ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消"
+      }).then(({ value }) => {
+        if(!value || value==''){
+          ElMessage.success('密码不能为空');
+          return
+        }
+        resetUserPwd(row.id, value).then(() => {
+            ElMessage.success("修改成功，新密码是：" + value);
+        });
+      }).catch(() => {});
+    };
+    // 用户状态修改
+    const handleStatusChange = (row:any)=> {
+      let text = row.userStatus === 1 ? "启用" : "停用";
+      ElMessageBox.confirm('确认要"' + text + '"："' + row.userName + '"用户吗?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return changeUserStatus(row.id, row.userStatus);
+      }).then(() => {
+        ElMessage.success(text + "成功");
+      }).catch(function() {
+        row.userStatus =row.userStatus === 0 ?1 : 0;
+      });
+    };
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return
+      formEl.resetFields()
+      userList()
+    };
+		return {
+      queryRef,
+			editUserRef,
+			onOpenAddUser,
+			onOpenEditUser,
+			onRowDel,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+      deptFilterNode,
+      filterText,
+      treeRef,
+      search,
+      sys_user_sex,
+      userList,
+      handleSelectionChange,
+      handleNodeClick,
+      handleResetPwd,
+      handleStatusChange,
+      resetQuery,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/tools/index.vue b/src/views/tools/index.vue
new file mode 100644
index 0000000..a17308b
--- /dev/null
+++ b/src/views/tools/index.vue
@@ -0,0 +1,499 @@
+<template>
+	<el-card shadow="hover" header="正则验证（一些项目中常用的正则）">
+		<el-form :model="ruleForm" :rules="rules" class="tools-warp-form" size="default" label-position="top">
+			<el-form-item label="验证百分比（不可以小数）:" prop="a22">
+				<div class="tools-warp-form-msg">验证可以输入大于0小于100的数字</div>
+				<div>
+					<el-input v-model="ruleForm.a22" @input="onVerifyNumberPercentage($event)" placeholder="请输入数字进行测试">
+						<template #append> % </template>
+					</el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="验证百分比（可以小数）:" prop="a23" class="mt20">
+				<div class="tools-warp-form-msg">验证可以输入大于0小于100的数字</div>
+				<div>
+					<el-input v-model="ruleForm.a23" @input="onVerifyNumberPercentageFloat($event)" placeholder="请输入数字进行测试">
+						<template #append> % </template>
+					</el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="小数或整数:" prop="a1" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证可以输入小数或整数，0 开始， . 只能出现一次，保留小数点后保留2位小数。(负数时，模拟拼接负号给后台)。
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a1" @input="onVerifyNumberIntegerAndFloat($event)" placeholder="请输入小数或整数进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="正整数:" prop="a2" class="mt20">
+				<div class="tools-warp-form-msg">验证只可以输入正整数，0 开始后面将不可以输入。</div>
+				<div>
+					<el-input v-model="ruleForm.a2" @input="onVerifiyNumberInteger($event)" placeholder="请输入整数进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="去掉中文及空格:" prop="a3" class="mt20">
+				<div class="tools-warp-form-msg">验证不可以输入空格与中文。</div>
+				<div>
+					<el-input v-model="ruleForm.a3" @input="onVerifyCnAndSpace($event)" placeholder="请输入内容进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="去掉英文及空格:" prop="a4" class="mt20">
+				<div class="tools-warp-form-msg">验证不可以输入空格与英文。</div>
+				<div>
+					<el-input v-model="ruleForm.a4" @input="onVerifyEnAndSpace($event)" placeholder="请输入内容进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="禁止输入空格:" prop="a5" class="mt20">
+				<div class="tools-warp-form-msg">验证不可以输入空格。</div>
+				<div>
+					<el-input v-model="ruleForm.a5" @input="onVerifyAndSpace($event)" placeholder="请输入内容进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="金额用 `,` 区分开:" prop="a6" class="mt20">
+				<div class="tools-warp-form-msg">金额添加 `,` 进行区分，便于阅读。{{ ruleForm.a6 }}</div>
+				<div>
+					<el-input v-model="ruleForm.a6" @input="onVerifyNumberComma($event)" placeholder="请输入金额进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="匹配文字变色（搜索时）:" prop="a7" class="mt20">
+				<div class="tools-warp-form-msg">示例：<span v-html="text"></span></div>
+				<div>
+					<el-input v-model="ruleForm.a7" @input="onVerifyTextColor($event)" placeholder="请输入示例中的部分文字"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="数字转中文大写:" prop="a8" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证数字转成中文的大写。<span class="tools-warp-form-msg-red">{{ cnText }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a8" @input="onVerifyNumberCnUppercase($event)" placeholder="请输入金额进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="手机号码:" prop="a9" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证手机号码 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{ phone }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a9" @input="onVerifyPhone($event)" placeholder="请输入手机号进行测试" maxlength="11"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="国内电话号码:" prop="a10" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证国内电话号码 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{ telePhone }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a10" @input="onVerifyTelPhone($event)" placeholder="请输入国内电话号码进行测试" maxlength="12"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="登录账号:" prop="a11" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证登录账号是否正确。字母开头，允许5-16字节，允许字母数字下划线 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{
+						account
+					}}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a11" @input="onVerifyAccount($event)" placeholder="请输入账号进行测试" maxlength="16"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="密码:" prop="a12" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证密码是否正确。以字母开头，长度在6~16之间，只能包含字母、数字和下划线 (true: 正确，false: 不正确)。<span
+						class="tools-warp-form-msg-red"
+						>{{ password }}</span
+					>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a12" @input="onVerifyPassword($event)" placeholder="请输入密码进行测试" maxlength="16"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="强密码:" prop="a13" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证强密码是否正确。字母+数字+特殊字符，长度在6-16之间 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{
+						passwordPowerful
+					}}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a13" @input="onVerifyPasswordPowerful($event)" placeholder="请输入密码进行测试" maxlength="16"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="密码强度:" prop="a14" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证密码强度。返回 强、中、弱。(弱：纯数字，纯字母，纯特殊字符，中：字母+数字，字母+特殊字符，数字+特殊字符，强：字母+数字+特殊字符)<span
+						class="tools-warp-form-msg-red"
+						>{{ passwordStrength }}</span
+					>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a14" @input="onVerifyPasswordStrength($event)" placeholder="请输入密码进行测试" maxlength="16"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="IP地址:" prop="a15" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证IP地址是否正确。(true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{ iPAddress }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a15" @input="onVerifyIPAddress($event)" placeholder="请输入IP地址进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="邮箱:" prop="a16" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证邮箱是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ email }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a16" @input="onVerifyEmail($event)" placeholder="请输入邮箱进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="身份证:" prop="a17" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证身份证是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ idCard }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a17" @input="onVerifyIDCard($event)" placeholder="请输入身份证进行测试" maxlength="18"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="姓名:" prop="a18" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证姓名是否正确，包括少数民族名字。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ fullName }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a18" @input="onVerifyFullName($event)" placeholder="请输入姓名进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="邮政编码:" prop="a19" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证邮政编码是否正确，不能以 0 开始。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ postalCode }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a19" @input="onVerifyPostalCode($event)" placeholder="请输入邮政编码进行测试" maxlength="6"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="url:" prop="a20" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证url是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ url }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a20" @input="onVerifyUrl($event)" placeholder="请输入内容进行测试"> </el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="车牌号:" prop="a21" class="mt20">
+				<div class="tools-warp-form-msg">
+					验证车牌号是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ carNum }}</span>
+				</div>
+				<div>
+					<el-input v-model="ruleForm.a21" @input="onVerifyCarNum($event)" placeholder="请输入车牌号进行测试"> </el-input>
+				</div>
+			</el-form-item>
+		</el-form>
+	</el-card>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent } from 'vue';
+import {
+	verifyNumberPercentage,
+	verifyNumberPercentageFloat,
+	verifyNumberIntegerAndFloat,
+	verifiyNumberInteger,
+	verifyCnAndSpace,
+	verifyEnAndSpace,
+	verifyAndSpace,
+	verifyNumberComma,
+	verifyTextColor,
+	verifyNumberCnUppercase,
+	verifyPhone,
+	verifyTelPhone,
+	verifyAccount,
+	verifyPassword,
+	verifyPasswordPowerful,
+	verifyPasswordStrength,
+	verifyIPAddress,
+	verifyEmail,
+	verifyIdCard,
+	verifyFullName,
+	verifyPostalCode,
+	verifyUrl,
+	verifyCarNum,
+} from '/@/utils/toolsValidate';
+
+export default defineComponent({
+	name: 'tools',
+	setup() {
+		const state = reactive({
+			text: '世间美好，与你环环相扣，祝你开心每一天！',
+			phone: false,
+			cnText: '',
+			telePhone: false,
+			account: false,
+			password: false,
+			passwordPowerful: false,
+			passwordStrength: '',
+			iPAddress: false,
+			email: false,
+			idCard: false,
+			fullName: false,
+			postalCode: false,
+			url: false,
+			carNum: false,
+			/**
+			 * 变量名为了方便，随便取了，
+			 * 实际中，按正常程序进行命名
+			 */
+			ruleForm: {
+				a1: '',
+				a2: '',
+				a3: '',
+				a4: '',
+				a5: '',
+				a6: '',
+				a7: '',
+				a8: '',
+				a9: '',
+				a10: '',
+				a11: '',
+				a12: '',
+				a13: '',
+				a14: '',
+				a15: '',
+				a16: '',
+				a17: '',
+				a18: '',
+				a19: '',
+				a20: '',
+				a21: '',
+				a22: '',
+				a23: '',
+			},
+			rules: {
+				a1: [
+					{
+						required: true,
+						message: '请输入小数或整数进行测试',
+						trigger: 'change',
+					},
+				],
+				a2: [
+					{
+						required: true,
+						message: '请输入正整数进行测试',
+						trigger: 'change',
+					},
+				],
+				a3: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
+				a4: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
+				a5: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
+				a6: [
+					{
+						required: true,
+						message: '请输入小数或整数进行测试',
+						trigger: 'change',
+					},
+				],
+				a7: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
+				a8: [{ required: true, message: '请输入金额进行测试', trigger: 'change' }],
+				a9: [
+					{
+						required: true,
+						message: '请输入手机号进行测试',
+						trigger: 'change',
+					},
+				],
+				a10: [
+					{
+						required: true,
+						message: '请输入国内电话号码进行测试',
+						trigger: 'change',
+					},
+				],
+				a11: [{ required: true, message: '请输入账号进行测试', trigger: 'change' }],
+				a12: [{ required: true, message: '请输入密码进行测试', trigger: 'change' }],
+				a13: [{ required: true, message: '请输入密码进行测试', trigger: 'change' }],
+				a14: [{ required: true, message: '请输入密码进行测试', trigger: 'change' }],
+				a15: [
+					{
+						required: true,
+						message: '请输入IP地址进行测试',
+						trigger: 'change',
+					},
+				],
+				a16: [{ required: true, message: '请输入邮箱进行测试', trigger: 'change' }],
+				a17: [
+					{
+						required: true,
+						message: '请输入身份证进行测试',
+						trigger: 'change',
+					},
+				],
+				a18: [{ required: true, message: '请输入姓名进行测试', trigger: 'change' }],
+				a19: [
+					{
+						required: true,
+						message: '请输入邮政编码进行测试',
+						trigger: 'change',
+					},
+				],
+				a20: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
+				a21: [
+					{
+						required: true,
+						message: '请输入车牌号进行测试',
+						trigger: 'change',
+					},
+				],
+				a22: [{ required: true, message: '请输入数字进行测试', trigger: 'change' }],
+				a23: [{ required: true, message: '请输入数字进行测试', trigger: 'change' }],
+			},
+		});
+		// 验证百分比（不可以小数）
+		const onVerifyNumberPercentage = (val: string) => {
+			state.ruleForm.a22 = verifyNumberPercentage(val);
+		};
+		// 验证百分比（可以小数）
+		const onVerifyNumberPercentageFloat = (val: string) => {
+			state.ruleForm.a23 = verifyNumberPercentageFloat(val);
+		};
+		// 小数或整数
+		const onVerifyNumberIntegerAndFloat = (val: string) => {
+			state.ruleForm.a1 = verifyNumberIntegerAndFloat(val);
+		};
+		// 正整数
+		const onVerifiyNumberInteger = (val: string) => {
+			state.ruleForm.a2 = verifiyNumberInteger(val);
+		};
+		// 去掉中文及空格
+		const onVerifyCnAndSpace = (val: string) => {
+			state.ruleForm.a3 = verifyCnAndSpace(val);
+		};
+		// 去掉英文及空格
+		const onVerifyEnAndSpace = (val: string) => {
+			state.ruleForm.a4 = verifyEnAndSpace(val);
+		};
+		// 禁止输入空格
+		const onVerifyAndSpace = (val: string) => {
+			state.ruleForm.a5 = verifyAndSpace(val);
+		};
+		// 金额用 `,` 区分开
+		const onVerifyNumberComma = (val: string) => {
+			state.ruleForm.a6 = verifyNumberComma(val);
+		};
+		// 匹配文字变色（搜索时）
+		const onVerifyTextColor = (val: string) => {
+			state.ruleForm.a7 = verifyAndSpace(val);
+			if (state.ruleForm.a7 === '') state.text = `世间美好，与你环环相扣，祝你开心每一天！`;
+			else state.text = verifyTextColor(state.ruleForm.a7, state.text);
+		};
+		// 数字转中文大写
+		const onVerifyNumberCnUppercase = (val: string) => {
+			state.ruleForm.a8 = verifyNumberIntegerAndFloat(val);
+			if (state.ruleForm.a8 === '') state.cnText = '';
+			else state.cnText = verifyNumberCnUppercase(state.ruleForm.a8);
+		};
+		// 手机号码
+		const onVerifyPhone = (val: string) => {
+			state.phone = verifyPhone(val);
+		};
+		// 国内电话号码
+		const onVerifyTelPhone = (val: string) => {
+			state.telePhone = verifyTelPhone(val);
+		};
+		// 登录账号
+		const onVerifyAccount = (val: string) => {
+			state.ruleForm.a11 = verifyCnAndSpace(val);
+			state.account = verifyAccount(state.ruleForm.a11);
+		};
+		// 密码
+		const onVerifyPassword = (val: string) => {
+			state.ruleForm.a12 = verifyCnAndSpace(val);
+			state.password = verifyPassword(state.ruleForm.a12);
+		};
+		// 强密码
+		const onVerifyPasswordPowerful = (val: string) => {
+			state.ruleForm.a13 = verifyCnAndSpace(val);
+			state.passwordPowerful = verifyPasswordPowerful(state.ruleForm.a13);
+		};
+		// 密码强度
+		const onVerifyPasswordStrength = (val: string) => {
+			state.ruleForm.a14 = verifyCnAndSpace(val);
+			state.passwordStrength = verifyPasswordStrength(state.ruleForm.a14);
+		};
+		// IP地址
+		const onVerifyIPAddress = (val: string) => {
+			state.iPAddress = verifyIPAddress(val);
+		};
+		// 邮箱
+		const onVerifyEmail = (val: string) => {
+			state.ruleForm.a16 = verifyCnAndSpace(val);
+			state.email = verifyEmail(state.ruleForm.a16);
+		};
+		// 身份证
+		const onVerifyIDCard = (val: string) => {
+			state.ruleForm.a17 = verifyCnAndSpace(val);
+			state.idCard = verifyIdCard(state.ruleForm.a17);
+		};
+		// 姓名
+		const onVerifyFullName = (val: string) => {
+			state.ruleForm.a18 = verifyAndSpace(val);
+			state.fullName = verifyFullName(state.ruleForm.a18);
+		};
+		// 邮政编码
+		const onVerifyPostalCode = (val: string) => {
+			state.ruleForm.a19 = verifiyNumberInteger(val);
+			state.postalCode = verifyPostalCode(state.ruleForm.a19);
+		};
+		// url
+		const onVerifyUrl = (val: string) => {
+			state.ruleForm.a20 = verifyAndSpace(val);
+			state.url = verifyUrl(state.ruleForm.a20);
+		};
+		// 车牌号
+		const onVerifyCarNum = (val: string) => {
+			state.ruleForm.a21 = verifyAndSpace(val);
+			state.carNum = verifyCarNum(state.ruleForm.a21);
+		};
+		return {
+			onVerifyNumberPercentage,
+			onVerifyNumberPercentageFloat,
+			onVerifyNumberIntegerAndFloat,
+			onVerifiyNumberInteger,
+			onVerifyCnAndSpace,
+			onVerifyEnAndSpace,
+			onVerifyAndSpace,
+			onVerifyNumberComma,
+			onVerifyTextColor,
+			onVerifyNumberCnUppercase,
+			onVerifyPhone,
+			onVerifyTelPhone,
+			onVerifyAccount,
+			onVerifyPassword,
+			onVerifyPasswordPowerful,
+			onVerifyPasswordStrength,
+			onVerifyIPAddress,
+			onVerifyEmail,
+			onVerifyIDCard,
+			onVerifyFullName,
+			onVerifyPostalCode,
+			onVerifyUrl,
+			onVerifyCarNum,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.tools-warp-form {
+	:deep(.el-form-item--small.el-form-item) {
+		margin-bottom: 0 !important;
+	}
+	.tools-warp-form-msg {
+		color: #666666;
+		font-size: 14px;
+		width: 100%;
+		.tools-warp-form-msg-red {
+			color: red;
+		}
+	}
+	.tools-warp-form-msg + div {
+		width: 100%;
+	}
+}
+</style>
diff --git a/src/views/visualizing/demo1.vue b/src/views/visualizing/demo1.vue
new file mode 100644
index 0000000..ab78763
--- /dev/null
+++ b/src/views/visualizing/demo1.vue
@@ -0,0 +1,1288 @@
+<template>
+	<div class="visualizing-demo1">
+    <baidumap src="https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4"></baidumap>
+    <baidumap src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></baidumap>
+		<!-- 地图 -->
+		<div ref="visualizingDemo1" style="height: 100%"></div>
+		<div class="visualizing-container">
+			<!-- 头部 -->
+			<div class="visualizing-container-head">
+				<div class="visualizing-container-head-left">
+					<div class="visualizing-container-head-left-text">
+						<div class="visualizing-container-head-left-text-box">{{ time.txt }}</div>
+					</div>
+				</div>
+				<div class="visualizing-container-head-center">
+					<div class="visualizing-container-head-center-box">
+						<div class="visualizing-container-head-center-maintitle">深圳市xxx软件科技有限公司</div>
+						<div class="visualizing-container-head-center-subtitle">旅游经济</div>
+					</div>
+				</div>
+				<div class="visualizing-container-head-right">
+					<div class="visualizing-container-head-right-text">
+						<div class="visualizing-container-head-right-text-box">🌤 多云转晴东南风 26~30℃</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- 图表左侧 -->
+			<div class="visualizing-container-content-left">
+				<div class="visualizing-container-content-left-flex">
+					<div class="visualizing-container-title">
+						<i class="el-icon-s-shop"></i>
+						<span>产业概况</span>
+					</div>
+					<hr class="visualizing-container-title-colorful" />
+					<div ref="visualizingContentLeftTop" style="height: 100%"></div>
+				</div>
+				<div class="visualizing-container-content-left-flex">
+					<div class="visualizing-container-title">
+						<i class="el-icon-s-promotion"></i>
+						<span>A级风景区对比</span>
+					</div>
+					<hr class="visualizing-container-title-colorful" />
+					<div ref="visualizingContentLeftBottom" style="height: 100%"></div>
+				</div>
+			</div>
+
+			<!-- 图表中间 -->
+			<div class="visualizing-container-content-center">
+				<div class="visualizing-container-content-center-bottom">
+					<div class="visualizing-container-content-center-bottom-flex">
+						<div class="visualizing-container-title">
+							<i class="el-icon-s-custom"></i>
+							<span>游客过夜情况</span>
+						</div>
+						<hr class="visualizing-container-title-colorful" />
+						<div ref="visualizingContentCenterTop" style="height: 100%"></div>
+					</div>
+					<div class="visualizing-container-content-center-bottom-flex">
+						<div class="visualizing-container-title">
+							<i class="el-icon-s-flag"></i>
+							<span>游客驻留时长</span>
+						</div>
+						<hr class="visualizing-container-title-colorful" />
+						<div ref="visualizingContentCenterBottom" style="height: 100%"></div>
+					</div>
+				</div>
+			</div>
+
+			<!-- 图表右侧 -->
+			<div class="visualizing-container-content-right">
+				<div class="visualizing-container-content-right-flex">
+					<div class="visualizing-container-title">
+						<i class="el-icon-s-marketing"></i>
+						<span>当日游客趋势分析</span>
+					</div>
+					<hr class="visualizing-container-title-colorful" />
+					<div ref="visualizingContentRightTop" style="height: 100%"></div>
+				</div>
+				<div class="visualizing-container-content-right-flex">
+					<div class="visualizing-container-title">
+						<i class="el-icon-s-data"></i>
+						<span>当月游客趋势分析</span>
+					</div>
+					<hr class="visualizing-container-title-colorful" />
+					<div ref="visualizingContentRightBottom" style="height: 100%"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+//说明：大屏需要引入百度地图api,我不想全局在index.html页面引入，但是使用vue render以组件方式引入后，
+//报错了：Failed to execute 'write' on 'Document': It isn't possible to write into a document from an
+// asynchronously-loaded external script unless it is explicitly opened.
+//大意：文档流加载完毕，无法再通过write插入脚本。
+//原因：百度地图api中有使用了document.write('<script src...'
+//暂时未解决
+import baidumap from '/@/views/demo/map2';
+import { toRefs, reactive, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
+import * as echarts from 'echarts';
+import 'echarts/extension/bmap/bmap';
+import { formatDate } from '/@/utils/formatTime';
+import { NextLoading } from '/@/utils/loading';
+import { echartsMapList, echartsMapData, echartsMapImgs } from './mock/demo1';
+
+// 定义接口来定义对象的类型
+interface Demo1State {
+	visualizingDemo1: any;
+	echartsMapList: any;
+	echartsMapData: any;
+	echartsMapImgs: any;
+	time: any;
+	myCharts: any[];
+}
+
+export default defineComponent({
+	name: 'visualizingLinkDemo1',
+  components:{baidumap},
+	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const state = reactive<Demo1State>({
+			visualizingDemo1: null,
+			echartsMapList,
+			echartsMapData,
+			echartsMapImgs,
+			time: {
+				txt: '',
+				fun: 0,
+			},
+			myCharts: [],
+		});
+		// 初始化时间
+		const initTime = () => {
+			state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
+			state.time.fun = window.setInterval(() => {
+				state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
+			}, 1000);
+		};
+		// echartsMap 将坐标信息和对应物理量的值合在一起
+		const convertData = (data: any) => {
+			let res = [];
+			for (let i = 0; i < data.length; i++) {
+				let geoCoord = state.echartsMapData[data[i].name];
+				if (geoCoord) {
+					res.push({
+						name: data[i].name,
+						value: geoCoord.concat(data[i].value),
+					});
+				}
+			}
+			return res;
+		};
+		// 初始化 echartsMap（地图上的点）
+		const initEchartsMap = () => {
+			const myChart = echarts.init(<HTMLElement>state.visualizingDemo1);
+			const option = {
+				tooltip: {
+					trigger: 'item',
+					formatter(params: any) {
+						// 自定义鼠标放入样式
+						let item = state.echartsMapImgs.find((v: any) => v.name === params.name);
+						let html = `<div style="width: 240px">
+							<div style="display: flex; align-items: center">
+								<img src="${item?.url}" style="width: 50px; height: 50px; border-radius: 100%; position: relative; border: 4px solid #ffffff; margin-left: -4px" />
+								<div
+									style="
+										background: #51c1ff;
+										width: 100%;
+										height: 32px;
+										margin-left: -14px;
+										display: flex;
+										align-items: center;
+										padding-left: 20px;
+										color: #fff;
+									"
+								>
+									${item?.name}
+								</div>
+							</div>
+							<div style="margin-top: 10px; font-size: 12px">
+								<div style="width: 61px"><i class="el-icon-location-information" style="margin-right: 5px"></i>地址：</div>
+								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.add}</div>
+							</div>
+							<div style="margin-top: 10px; font-size: 12px">
+								<div style="width: 61px"><i class="el-icon-chat-dot-round" style="margin-right: 5px"></i>概括：</div>
+								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.dec}</div>
+							</div>
+						</div>`;
+						return html;
+					},
+				},
+				color: ['#ea7ccc'],
+				bmap: {
+					center: [114.064524, 22.549225],
+					zoom: 11,
+					roam: true,
+					mapStyle: {},
+				},
+				series: [
+					{
+						name: '门票收入',
+						type: 'scatter',
+						coordinateSystem: 'bmap',
+						data: convertData(state.echartsMapList),
+						symbolSize: function (val: any) {
+							return val[2] / 10;
+						},
+						encode: {
+							value: 2,
+						},
+						label: {
+							formatter: '{b}',
+							position: 'right',
+							show: false,
+						},
+						emphasis: {
+							label: {
+								show: true,
+							},
+						},
+					},
+					{
+						name: '门票收入',
+						type: 'effectScatter',
+						coordinateSystem: 'bmap',
+						data: convertData(
+							state.echartsMapList
+								.sort(function (a: any, b: any) {
+									return b.value - a.value;
+								})
+								.slice(0, 6)
+						),
+						symbolSize: function (val: any) {
+							return val[2] / 10;
+						},
+						encode: {
+							value: 2,
+						},
+						showEffectOn: 'render',
+						rippleEffect: {
+							brushType: 'stroke',
+						},
+						hoverAnimation: true,
+						label: {
+							formatter: '{b}',
+							position: 'right',
+							show: true,
+						},
+						itemStyle: {
+							shadowBlur: 100,
+							shadowColor: '#333',
+						},
+						zlevel: 1,
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+
+			// 地图
+			const map = (<any>myChart).getModel().getComponent('bmap').getBMap();
+			// BMAP_NORMAL_MAP ：此地图类型展示普通街道视图
+			// BMAP_PERSPECTIVE_MAP ：此地图类型展示透视图像视图。（这个还不会用）
+			// BMAP_SATELLITE_MAP：卫星地图 （没有坐标， 绿绿的一片的卫星地图）
+			// BMAP_HYBRID_MAP：混合地图 （既有坐标，也是绿绿的一片的卫星地图）
+			// eslint-disable-next-line no-undef
+			map.setMapType(BMAP_SATELLITE_MAP);
+			// eslint-disable-next-line no-undef
+			let bdary = new BMap.Boundary();
+			// 获取行政区域
+			bdary.get('深圳', function (rs: any) {
+				// 行政区域的点有多少个
+				let count = rs.boundaries.length;
+				for (let i = 0; i < count; i++) {
+					// eslint-disable-next-line no-undef
+					let ply = new BMap.Polygon(rs.boundaries[i], {
+						// 设置多边形边线线粗
+						strokeWeight: 4,
+						// 设置多边形边线透明度0-1
+						strokeOpacity: 1,
+						// 设置多边形边线样式为实线或虚线，取值 solid 或 dashed
+						StrokeStyle: 'dashed',
+						// 设置多边形边线颜色
+						strokeColor: '#febb50',
+						// 设置多边形填充颜色
+						fillColor: '',
+					});
+					// 建立多边形覆盖物
+					// 添加覆盖物
+					map.addOverlay(ply);
+					// 调整视野
+					map.setViewport(ply.getPath());
+				}
+				// 初始化地图，设置中心点坐标和地图级别
+				// new BMap.Point('深圳市', 11)
+				// eslint-disable-next-line no-undef
+				map.centerAndZoom(new BMap.Point(114.064524, 22.549225), 11);
+			});
+		};
+		// 产业概况
+		const initVisualizingContentLeftTop = () => {
+			const myChart = echarts.init(proxy.$refs.visualizingContentLeftTop);
+			const option = {
+				grid: {
+					top: 50,
+					right: 0,
+					bottom: 50,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				xAxis: {
+					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+					axisLine: {
+						lineStyle: {
+							color: 'rgba(22, 207, 208, 0.1)',
+							width: 1,
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						color: '#16cfd0',
+					},
+				},
+				yAxis: [
+					{
+						type: 'value',
+						name: '价格',
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.1)',
+							},
+						},
+						axisLabel: {
+							color: '#16cfd0',
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.3)',
+							},
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+				],
+				series: [
+					{
+						name: '预购队列',
+						type: 'line',
+						data: [200, 85, 112, 275, 305, 415],
+						itemStyle: {
+							color: '#16cfd0',
+						},
+					},
+					{
+						name: '最新成交价',
+						type: 'line',
+						data: [50, 85, 22, 155, 170, 25],
+						itemStyle: {
+							color: '#febb50',
+						},
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// A级风景区对比
+		const initVisualizingContentLeftBottom = () => {
+			const myChart = echarts.init(proxy.$refs.visualizingContentLeftBottom);
+			const option = {
+				grid: {
+					top: 50,
+					right: 10,
+					bottom: 40,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				xAxis: {
+					type: 'category',
+					boundaryGap: false,
+					data: ['1月', '2月', '3月', '4月', '5月'],
+					axisLine: {
+						lineStyle: {
+							color: 'rgba(22, 207, 208, 0.1)',
+							width: 1,
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						interval: 0,
+						color: '#16cfd0',
+						textStyle: {
+							fontSize: 10,
+						},
+					},
+				},
+				yAxis: [
+					{
+						type: 'value',
+						name: '销量',
+						axisLabel: {
+							color: '#16cfd0',
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.3)',
+							},
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+				],
+				series: [
+					{
+						name: '客流',
+						type: 'line',
+						stack: '总量',
+						smooth: true,
+						lineStyle: {
+							width: 0,
+						},
+						areaStyle: {
+							opacity: 0.8,
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{
+									offset: 0,
+									color: 'rgba(128, 255, 165)',
+								},
+								{
+									offset: 1,
+									color: 'rgba(1, 191, 236)',
+								},
+							]),
+						},
+						emphasis: {
+							focus: 'series',
+						},
+						data: [140, 232, 101, 264, 90],
+					},
+					{
+						name: '天数',
+						type: 'line',
+						stack: '总量',
+						smooth: true,
+						lineStyle: {
+							width: 0,
+						},
+						areaStyle: {
+							opacity: 0.8,
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{
+									offset: 0,
+									color: 'rgba(0, 221, 255)',
+								},
+								{
+									offset: 1,
+									color: 'rgba(77, 119, 255)',
+								},
+							]),
+						},
+						emphasis: {
+							focus: 'series',
+						},
+						data: [120, 282, 111, 234, 220],
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 游客过夜情况
+		const initVisualizingContentCenterTop = () => {
+			const myChart = echarts.init(proxy.$refs.visualizingContentCenterTop);
+			const min = 100;
+			const max = 1000;
+			const option = {
+				grid: {
+					top: 50,
+					right: 10,
+					bottom: 66,
+					left: 38,
+				},
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: ['地区', '地区', '地区', '地区', '地区', '地区', '地区', '地区', '地区', '地区'],
+						axisLabel: {
+							color: '#16cfd0',
+							textStyle: {
+								fontSize: 9,
+							},
+							interval: 0,
+							rotate: -45,
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.1)',
+								width: 1,
+							},
+						},
+						axisTick: {
+							show: false,
+						},
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						name: '天数',
+						nameGap: 25,
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.1)',
+							},
+						},
+						axisLabel: {
+							color: '#16cfd0',
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.3)',
+							},
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+				],
+				series: [
+					{
+						type: 'bar',
+						barWidth: 15,
+						itemStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+									{
+										offset: 0,
+										color: '#de682e',
+									},
+									{
+										offset: 1,
+										color: '#ecc232',
+									},
+								]),
+							},
+						},
+						label: {
+							normal: {
+								show: true,
+								position: 'top',
+								formatter: function (param: any) {
+									if (param.value == max || param.value == min) {
+										return '';
+									}
+									return param.value;
+								},
+								textStyle: {
+									color: 'rgba(22, 207, 208, 0.8)',
+									fontSize: 10,
+								},
+							},
+						},
+						markPoint: {
+							symbolSize: 30,
+							label: {
+								normal: {
+									textStyle: {
+										color: '#ffffff',
+										fontSize: 10,
+									},
+								},
+							},
+							data: [
+								{ name: '年最低', value: min, xAxis: 0, yAxis: 100 },
+								{ name: '年最高', value: max, xAxis: 9, yAxis: 1000 },
+							],
+						},
+						data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 游客驻留时长
+		const initVisualizingContentCenterBottom = () => {
+			const myChart = echarts.init(proxy.$refs.visualizingContentCenterBottom);
+			const option = {
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				grid: {
+					top: 26,
+					right: 10,
+					bottom: 66,
+					left: 45,
+				},
+				xAxis: {
+					type: 'value',
+					axisLabel: {
+						color: '#16cfd0',
+					},
+					splitLine: {
+						show: true,
+						lineStyle: {
+							color: 'rgba(22, 207, 208, 0.3)',
+						},
+					},
+				},
+				yAxis: {
+					type: 'category',
+					axisLabel: {
+						color: '#16cfd0',
+					},
+				},
+				series: [
+					{
+						name: '已完成',
+						type: 'bar',
+						stack: 'total',
+						label: {
+							show: true,
+						},
+						emphasis: {
+							focus: 'series',
+						},
+						barWidth: 12,
+						itemStyle: {
+							label: {
+								show: true,
+							},
+							labelLine: {
+								show: false,
+							},
+							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{ offset: 0, color: 'rgba(7,165,255,0.2)' },
+								{ offset: 1, color: 'rgba(7,165,255,1)' },
+							]),
+						},
+					},
+					{
+						name: '进行中',
+						type: 'bar',
+						stack: 'total',
+						label: {
+							show: true,
+						},
+						emphasis: {
+							focus: 'series',
+						},
+						barWidth: 12,
+						itemStyle: {
+							label: {
+								show: true,
+							},
+							labelLine: {
+								show: false,
+							},
+							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{ offset: 0, color: 'rgba(41,244,236,0)' },
+								{ offset: 1, color: 'rgba(41,244,236,1)' },
+							]),
+						},
+					},
+				],
+				dataset: {
+					source: [
+						{ status: '已签收', value1: 33, value2: 93 },
+						{ status: '配送中', value1: 53, value2: 32 },
+						{ status: '已出库', value1: 78, value2: 65 },
+						{ status: '采购中', value1: 12, value2: 35 },
+						{ status: '接单中', value1: 90, value2: 52 },
+					],
+				},
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 当日游客趋势分析
+		const initVisualizingContentRightTop = () => {
+			const myChart = echarts.init(proxy.$refs.visualizingContentRightTop);
+			const option = {
+				grid: {
+					top: 50,
+					right: 30,
+					bottom: 50,
+					left: 20,
+				},
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				xAxis: {
+					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+					axisLine: {
+						lineStyle: {
+							color: 'rgba(22, 207, 208, 0.5)',
+							width: 1,
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						color: '#16cfd0',
+					},
+				},
+				yAxis: [
+					{
+						type: 'value',
+						name: '亿元',
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.1)',
+							},
+						},
+						axisLabel: {
+							color: '#16cfd0',
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.3)',
+							},
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+					{
+						type: 'value',
+						name: '同比',
+						position: 'right',
+						axisLine: {
+							show: false,
+						},
+						axisLabel: {
+							show: true,
+							formatter: '{value}%',
+							textStyle: {
+								color: '#16cfd0',
+							},
+						},
+						splitLine: {
+							show: false,
+						},
+						axisTick: {
+							show: false,
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+				],
+				series: [
+					{
+						name: '销售水量',
+						type: 'line',
+						yAxisIndex: 1,
+						smooth: true,
+						showAllSymbol: true,
+						symbol: 'circle',
+						itemStyle: {
+							color: '#058cff',
+						},
+						lineStyle: {
+							color: '#058cff',
+						},
+						areaStyle: {
+							color: 'rgba(5,140,255, 0.2)',
+						},
+						data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
+					},
+					{
+						name: '主营业务',
+						type: 'bar',
+						barWidth: 15,
+						itemStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+									{
+										offset: 0,
+										color: '#00FFE3',
+									},
+									{
+										offset: 1,
+										color: '#4693EC',
+									},
+								]),
+							},
+						},
+						data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 当月游客趋势分析
+		const initVisualizingContentRightBottom = () => {
+			const myChart = echarts.init(proxy.$refs.visualizingContentRightBottom);
+			const option = {
+				grid: {
+					top: 50,
+					right: 10,
+					bottom: 40,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				xAxis: {
+					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+					axisLine: {
+						lineStyle: {
+							color: 'rgba(22, 207, 208, 0.1)',
+							width: 1,
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						color: '#16cfd0',
+					},
+				},
+				yAxis: [
+					{
+						type: 'value',
+						name: '人数(万)',
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.1)',
+							},
+						},
+						axisLabel: {
+							color: '#16cfd0',
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.3)',
+							},
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+				],
+				series: [
+					{
+						name: '预购队列',
+						type: 'line',
+						data: [20, 15, 40, 55, 65, 85],
+						smooth: true,
+						itemStyle: {
+							color: '#EA7CCC',
+						},
+					},
+					{
+						name: '最新成交价',
+						type: 'line',
+						data: [30, 45, 65, 85, 60, 105],
+						smooth: true,
+						itemStyle: {
+							color: '#FAC958',
+						},
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
+			window.addEventListener('resize', () => {
+				for (let i = 0; i < state.myCharts.length; i++) {
+					state.myCharts[i].resize();
+				}
+			});
+		};
+		// 页面加载时
+		onMounted(async () => {
+			NextLoading.done();
+			initTime();
+			await initEchartsMap();
+			await initVisualizingContentLeftTop();
+			await initVisualizingContentLeftBottom();
+			await initVisualizingContentCenterTop();
+			await initVisualizingContentCenterBottom();
+			await initVisualizingContentRightTop();
+			await initVisualizingContentRightBottom();
+			await initEchartsResize();
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			window.clearInterval(state.time.fun);
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+// 左右两侧图表宽度
+$lrWidth: 288px;
+// 中部图表高度
+$cheight: 240px;
+// 标题宽度
+$titleWidth: 240px;
+.visualizing-demo1 {
+	height: 100%;
+	width: 100%;
+	position: relative;
+	:deep(.BMap_cpyCtrl) {
+		display: none;
+	}
+	:deep(.anchorBL) {
+		display: none;
+	}
+	.visualizing-container {
+		.visualizing-container-head {
+			height: 60px;
+			width: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			display: flex;
+			align-items: center;
+			color: #ffffff;
+			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.02));
+			z-index: 3;
+			.visualizing-container-head-left {
+				flex: 1;
+				position: relative;
+				height: 60px;
+				.visualizing-container-head-left-text {
+					position: relative;
+					z-index: 1;
+					font-size: 12px;
+					opacity: 0.6;
+					width: 93%;
+					padding-left: 15px;
+					top: 50%;
+					transform: translateY(-100%);
+					.visualizing-container-head-left-text-box {
+						width: 100%;
+						position: relative;
+						padding-left: 15px;
+						&::after {
+							content: '';
+							height: 20px;
+							width: 100%;
+							position: absolute;
+							background: linear-gradient(to right, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
+							top: -1px;
+							left: 0;
+							transform: skew(30deg);
+						}
+					}
+				}
+				&::before,
+				&::after {
+					content: '';
+					height: 3px;
+					background: linear-gradient(-90deg, #16cfd0, transparent);
+					position: absolute;
+					width: 100%;
+				}
+				&::before {
+					top: 1px;
+					right: 33px;
+					opacity: 0.8;
+				}
+				&::after {
+					top: 41px;
+					right: -2px;
+				}
+			}
+			.visualizing-container-head-center {
+				height: 60px;
+				font-size: 18px;
+				text-align: center;
+				display: flex;
+				flex-direction: column;
+				position: relative;
+				padding: 0 60px;
+				background: radial-gradient(rgba(0, 0, 0, 0.7) 5%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.02) 70%);
+				.visualizing-container-head-center-box {
+					margin: auto;
+					position: relative;
+					z-index: 1;
+					.visualizing-container-head-center-maintitle {
+						position: relative;
+						&::before,
+						&::after {
+							content: '';
+							position: absolute;
+							min-width: 21%;
+							height: 29px;
+							top: 2px;
+							opacity: 0.3;
+							border-top: 1px solid #16cfd0;
+						}
+						&::before {
+							left: -70px;
+							border-right: 2px solid #16cfd0;
+							transform: skew(50deg);
+						}
+						&::after {
+							right: -70px;
+							border-left: 2px solid #16cfd0;
+							transform: skew(-50deg);
+						}
+					}
+					.visualizing-container-head-center-subtitle {
+						font-size: 14px;
+						opacity: 0.8;
+						position: relative;
+						&::before,
+						&::after {
+							content: '';
+							position: absolute;
+							min-width: 35%;
+							height: 23px;
+							bottom: 8px;
+							border-bottom: 2px solid #16cfd0;
+						}
+						&::before {
+							transform: skew(50deg);
+							left: -33px;
+							border-left: 3px solid #16cfd0;
+							border-image: linear-gradient(to right, #16cfd0, rgba(22, 207, 208, 0.02)) 1 10;
+						}
+						&::after {
+							transform: skew(-50deg);
+							right: -33px;
+							border-right: 3px solid #16cfd0;
+							border-image: linear-gradient(to left, rgba(22, 207, 208, 1), rgba(22, 207, 208, 0.02)) 1 10;
+						}
+					}
+					&::before,
+					&::after {
+						content: '';
+						position: absolute;
+						width: 36px;
+						height: 17px;
+						top: -8px;
+						border-bottom: 2px solid rgba(22, 207, 208, 0.7);
+					}
+					&::before {
+						transform: skew(32deg);
+						left: -89px;
+						border-left: 3px solid rgba(22, 207, 208, 0.7);
+					}
+					&::after {
+						transform: skew(-32deg);
+						right: -89px;
+						border-right: 3px solid rgba(22, 207, 208, 0.7);
+					}
+				}
+				&::before,
+				&::after {
+					content: '';
+					position: absolute;
+					min-width: 50%;
+					height: 15px;
+					bottom: 0px;
+					border-bottom: 4px solid #16cfd0;
+				}
+				&::before {
+					transform: skew(60deg);
+					left: 13px;
+					border-left: 5px solid #16cfd0;
+				}
+				&::after {
+					transform: skew(-60deg);
+					right: 13px;
+					border-right: 5px solid #16cfd0;
+				}
+			}
+			.visualizing-container-head-right {
+				flex: 1;
+				position: relative;
+				height: 60px;
+				.visualizing-container-head-right-text {
+					position: relative;
+					z-index: 1;
+					font-size: 12px;
+					opacity: 0.6;
+					width: 93%;
+					float: right;
+					text-align: right;
+					padding-right: 15px;
+					top: 50%;
+					transform: translateY(-100%);
+					.visualizing-container-head-right-text-box {
+						width: 100%;
+						position: relative;
+						padding-right: 15px;
+						&::after {
+							content: '';
+							height: 20px;
+							width: 100%;
+							position: absolute;
+							background: linear-gradient(to left, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
+							top: -1px;
+							right: 0;
+							transform: skew(-30deg);
+						}
+					}
+				}
+				&::before,
+				&::after {
+					content: '';
+					height: 3px;
+					background: linear-gradient(90deg, #16cfd0, transparent);
+					position: absolute;
+					width: 100%;
+				}
+				&::before {
+					top: 1px;
+					left: 33px;
+					opacity: 0.8;
+				}
+				&::after {
+					top: 41px;
+					left: -2px;
+				}
+			}
+		}
+		.visualizing-container-title {
+			max-width: $titleWidth;
+			font-size: 14px;
+			color: #ffffff;
+			opacity: 0.8;
+			padding: 0 5px;
+			border-bottom: 1px solid #ffffff;
+			border-image: linear-gradient(to right, #ffffff, rgba(22, 207, 208, 0.02)) 1 10;
+			position: relative;
+			i {
+				padding-right: 5px;
+				color: orange;
+			}
+			&::after {
+				content: '';
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 1px;
+				height: 10px;
+				background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.5));
+			}
+		}
+		.visualizing-container-title-colorful {
+			max-width: $titleWidth;
+			border: 0;
+			padding: 1px;
+			background: linear-gradient(135deg, red, orange, green, #16cfd0, purple);
+			--mask-image: repeating-linear-gradient(135deg, #000 0px, #000 1px, transparent 1px, transparent 4px);
+			-webkit-mask-image: var(--mask-image);
+			mask-image: var(--mask-image);
+		}
+		.visualizing-container-content-left {
+			width: $lrWidth;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
+			padding-top: 60px;
+			z-index: 2;
+			.visualizing-container-content-left-flex {
+				height: 50%;
+				display: flex;
+				flex-direction: column;
+				padding-left: 15px;
+			}
+		}
+		.visualizing-container-content-center {
+			width: 100%;
+			height: $cheight;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
+			z-index: 1;
+			.visualizing-container-content-center-bottom {
+				width: calc(100% - #{$lrWidth * 2});
+				height: $cheight;
+				left: $lrWidth;
+				bottom: 0;
+				position: absolute;
+				display: flex;
+				padding: 0 15px;
+				.visualizing-container-content-center-bottom-flex {
+					width: 50%;
+					padding: 0 15px;
+				}
+			}
+		}
+		.visualizing-container-content-right {
+			width: $lrWidth;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			right: 0;
+			padding-top: 60px;
+			background: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
+			z-index: 2;
+			.visualizing-container-content-right-flex {
+				height: 50%;
+				display: flex;
+				flex-direction: column;
+				padding-right: 15px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/visualizing/demo2.vue b/src/views/visualizing/demo2.vue
new file mode 100644
index 0000000..71dbd99
--- /dev/null
+++ b/src/views/visualizing/demo2.vue
@@ -0,0 +1,1344 @@
+<template>
+	<div class="visualizing-demo2">
+		<!-- 顶部 -->
+		<div class="big-data-up">
+			<div class="up-left">
+				<SvgIcon name="ele-Timer" class="mr5" />
+				<span>{{ time.txt }}</span>
+			</div>
+			<div class="up-center">
+				<span>智慧农业系统平台</span>
+			</div>
+			<div class="up-right">
+				<el-dropdown size="small">
+					<span class="el-dropdown-link">
+						{{ dropdownActive }}
+						<SvgIcon name="ele-ArrowDown" class="el-icon--right" />
+					</span>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item v-for="(v, k) in dropdownList" :key="k">{{ v.label }} </el-dropdown-item>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
+				<div class="ml15">
+					<SvgIcon name="ele-Bell" class="mr5" />
+					<span>消息</span>
+				</div>
+				<div class="ml15">
+					<SvgIcon name="ele-User" class="mr5" />
+					<span>个人</span>
+				</div>
+				<div class="ml15">
+					<SvgIcon name="ele-SwitchButton" class="mr5" />
+					<span>返回</span>
+				</div>
+			</div>
+		</div>
+
+		<div class="big-data-down">
+			<!-- 左边 -->
+			<div class="big-data-down-left">
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<div class="flex-title">天气预报</div>
+						<div class="flex-content flex-content-overflow">
+							<div class="sky">
+								<SvgIcon name="ele-Sunny" class="sky-left" />
+								<div class="sky-center">
+									<div class="mb2">
+										<span class="font">多云转晴</span>
+										<span class="font">东南风</span>
+										<span>良</span>
+									</div>
+									<div class="sky-tip">温馨提示：多云转晴，南风转北风风力3级</div>
+								</div>
+								<div class="sky-right">
+									<span>25</span>
+									<span class="font">°C</span>
+								</div>
+							</div>
+							<div class="sky-dd">
+								<div class="sky-dl" v-for="(v, k) in skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
+									<div>{{ v.v1 }}</div>
+									<div v-if="v.type === 'title'">{{ v.v2 }}</div>
+									<div v-else>
+										<SvgIcon :name="v.v2" />
+									</div>
+									<div>{{ v.v3 }}</div>
+									<div>{{ v.v4 }}</div>
+									<div class="tip">{{ v.v5 }}</div>
+									<div>{{ v.v6 }}</div>
+									<div>{{ v.v7 }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<div class="flex-title">当前设备状态</div>
+						<div class="flex-content flex-content-overflow">
+							<div class="d-states">
+								<div class="d-states-item">
+									<SvgIcon name="ele-Odometer" class="i-bg1" />
+									<div class="d-states-flex">
+										<div class="d-states-item-label">园区设备数</div>
+										<div class="d-states-item-value">99</div>
+									</div>
+								</div>
+								<div class="d-states-item">
+									<SvgIcon name="ele-FirstAidKit" class="i-bg2" />
+									<div class="d-states-flex">
+										<div class="d-states-item-label">预警设备数</div>
+										<div class="d-states-item-value">10</div>
+									</div>
+								</div>
+								<div class="d-states-item">
+									<SvgIcon name="ele-VideoPlay" class="i-bg3" />
+									<div class="d-states-flex">
+										<div class="d-states-item-label">运行设备数</div>
+										<div class="d-states-item-value">20</div>
+									</div>
+								</div>
+							</div>
+							<div class="d-btn">
+								<div class="d-btn-item" v-for="(v, k) in dBtnList" :key="k" :class="{ 'd-btn-active': dBtnActive === k }">
+									<SvgIcon name="ele-Money" class="d-btn-item-left" />
+									<div class="d-btn-item-center">
+										<div>{{ v.v1 }}</div>
+										<div>{{ v.v2 }}|{{ v.v3 }}</div>
+									</div>
+									<div class="d-btn-item-eight">{{ v.v4 }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<div class="flex-title">近30天预警总数</div>
+						<div class="flex-content" ref="rightChartData1"></div>
+					</div>
+				</div>
+			</div>
+
+			<!-- 中间 -->
+			<div class="big-data-down-center">
+				<div class="big-data-down-center-one">
+					<div class="big-data-down-center-one-content" ref="rightChartData5">
+						<div ref="the3DEarth"></div>
+						<div :class="v.topLevelClass" v-for="(v, k) in earth3DBtnList" :key="k">
+							<div class="circle" v-for="i in 4" :key="i"></div>
+							<div class="text-box">
+								<SvgIcon :name="v.icon" />
+								<div class="text">{{ v.label }}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="big-data-down-center-two">
+					<div class="flex-warp-item-box">
+						<div class="flex-title">
+							<span>当前设备监测</span>
+							<span class="flex-title-small">单位：次</span>
+						</div>
+						<div class="flex-content">
+							<div class="flex-content-left">
+								<div class="monitor-item" v-for="(v, k) in chartData4List" :key="k">
+									<div class="monitor-wave" :class="{ 'monitor-active': k === chartData4Index }">
+										<div class="monitor-z-index">
+											<div class="monitor-item-label">{{ v.label }}</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="flex-content-right" ref="rightChartData4"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- 右边 -->
+			<div class="big-data-down-right">
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<div class="flex-title">
+							<span>近7天产品追溯扫码统计</span>
+							<span class="flex-title-small">单位：次</span>
+						</div>
+						<div class="flex-content" ref="rightChartData3"></div>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<div class="flex-title">当前任务统计</div>
+						<div class="flex-content">
+							<div class="task">
+								<div class="task-item task-first-item">
+									<div class="task-item-value task-first">25</div>
+									<div class="task-item-label">待办任务</div>
+								</div>
+								<div class="task-item">
+									<div class="task-item-box task1">
+										<div class="task-item-value">12</div>
+										<div class="task-item-label">施肥</div>
+									</div>
+								</div>
+								<div class="task-item">
+									<div class="task-item-box task2">
+										<div class="task-item-value">3</div>
+										<div class="task-item-label">施药</div>
+									</div>
+								</div>
+								<div class="task-item">
+									<div class="task-item-box task3">
+										<div class="task-item-value">5</div>
+										<div class="task-item-label">农事</div>
+									</div>
+								</div>
+								<div class="task-item">
+									<div class="task-item-box task4">
+										<div class="task-item-value">3</div>
+										<div class="task-item-label">巡园</div>
+									</div>
+								</div>
+								<div class="task-item">
+									<div class="task-item-box task5">
+										<div class="task-item-value">2</div>
+										<div class="task-item-label">采集</div>
+									</div>
+								</div>
+							</div>
+							<div ref="rightChartData6" class="progress"></div>
+						</div>
+					</div>
+				</div>
+				<div class="flex-warp-item">
+					<div class="flex-warp-item-box">
+						<div class="flex-title">
+							<span>近7天投入品记录</span>
+							<span class="flex-title-small">单位：件</span>
+						</div>
+						<div class="flex-content" ref="rightChartData2"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import { formatDate } from '/@/utils/formatTime';
+import { NextLoading } from '/@/utils/loading';
+import { dropdownList, skyList, dBtnList, earth3DBtnList, chartData4List } from './mock/demo2';
+import worldImg from './images/world.jpg';
+import bathymetryImg from './images/bathymetry.jpg';
+
+export default defineComponent({
+	name: 'visualizingLinkDemo2',
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		const state = reactive({
+			time: {
+				txt: '',
+				fun: 0,
+			},
+			dropdownList,
+			dropdownActive: '请选择',
+			skyList,
+			dBtnList,
+			chartData4Index: 0,
+			dBtnActive: 0,
+			earth3DBtnList,
+			chartData4List,
+			myCharts: [],
+			the3DEarth: null as HTMLDivElement | null,
+		});
+		// 初始化时间
+		const initTime = () => {
+			state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
+			state.time.fun = window.setInterval(() => {
+				state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
+			}, 1000);
+		};
+		// 近30天预警总数
+		const initRightChartData1 = () => {
+			const myChart = echarts.init(proxy.$refs.rightChartData1);
+			const option = {
+				tooltip: {
+					trigger: 'item',
+				},
+				series: [
+					{
+						name: '面积模式',
+						type: 'pie',
+						radius: [10, 60],
+						center: ['50%', '50%'],
+						roseType: 'area',
+						itemStyle: {
+							borderRadius: 5,
+						},
+						data: [
+							{ name: '天气预警', value: 100 },
+							{ name: '病虫害预警', value: 50 },
+							{ name: '任务预警', value: 130 },
+							{ name: '监测设备预警', value: 62 },
+						],
+						label: {
+							color: '#c0d1f2',
+						},
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 当前设备监测
+		const initRightChartData4 = () => {
+			const myChart = echarts.init(proxy.$refs.rightChartData4);
+			const option = {
+				grid: {
+					top: 10,
+					right: 10,
+					bottom: 20,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				xAxis: {
+					type: 'category',
+					boundaryGap: false,
+					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+					axisLine: {
+						lineStyle: {
+							color: 'rgba(22, 207, 208, 0.1)',
+							width: 1,
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						interval: 0,
+						color: '#c0d1f2',
+						textStyle: {
+							fontSize: 10,
+						},
+					},
+				},
+				yAxis: [
+					{
+						type: 'value',
+						axisLabel: {
+							color: '#c0d1f2',
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.3)',
+							},
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+				],
+				series: [
+					{
+						name: '温度',
+						type: 'line',
+						smooth: true,
+						lineStyle: {
+							width: 0,
+						},
+						areaStyle: {
+							opacity: 0.8,
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{
+									offset: 0,
+									color: 'rgba(128, 255, 165)',
+								},
+								{
+									offset: 1,
+									color: 'rgba(1, 191, 236)',
+								},
+							]),
+						},
+						emphasis: {
+							focus: 'series',
+						},
+						data: [140, 232, 101, 264, 90, 70],
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 近7天产品追溯扫码统计
+		const initRightChartData3 = () => {
+			const myChart = echarts.init(proxy.$refs.rightChartData3);
+			const option = {
+				grid: {
+					top: 10,
+					right: 0,
+					bottom: 20,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				xAxis: {
+					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+					axisLine: {
+						lineStyle: {
+							color: 'rgba(22, 207, 208, 0.1)',
+							width: 1,
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						color: '#c0d1f2',
+					},
+				},
+				yAxis: [
+					{
+						type: 'value',
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.1)',
+							},
+						},
+						axisLabel: {
+							color: '#c0d1f2',
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.3)',
+							},
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+				],
+				series: [
+					{
+						name: '预购队列',
+						type: 'line',
+						data: [200, 85, 112, 275, 305, 415],
+						itemStyle: {
+							color: '#16cfd0',
+						},
+					},
+					{
+						name: '最新成交价',
+						type: 'line',
+						data: [50, 85, 22, 155, 170, 25],
+						itemStyle: {
+							color: '#febb50',
+						},
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 当前任务统计
+		const initRightChartData6 = () => {
+			const myChart = echarts.init(proxy.$refs.rightChartData6);
+			const option = {
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				grid: {
+					top: 20,
+					right: 50,
+					bottom: 0,
+					left: 80,
+				},
+				xAxis: [
+					{
+						splitLine: {
+							show: false,
+						},
+						type: 'value',
+						show: false,
+					},
+				],
+				yAxis: [
+					{
+						splitLine: {
+							show: false,
+						},
+						axisLine: {
+							//y轴
+							show: false,
+						},
+						type: 'category',
+						axisTick: {
+							show: false,
+						},
+						inverse: true,
+						data: ['施肥任务完成率', '施药任务完成率', '农事任务完成率'],
+						axisLabel: {
+							color: '#A7D6F4',
+							fontSize: 12,
+						},
+					},
+				],
+				series: [
+					{
+						name: '标准化',
+						type: 'bar',
+						barWidth: 10, // 柱子宽度
+						label: {
+							show: true,
+							position: 'right', // 位置
+							color: '#A7D6F4',
+							fontSize: 12,
+							distance: 15, // 距离
+							formatter: '{c}%', // 这里是数据展示的时候显示的数据
+						}, // 柱子上方的数值
+						itemStyle: {
+							barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
+
+							color: new echarts.graphic.LinearGradient(
+								1,
+								0,
+								0,
+								0,
+								[
+									{
+										offset: 0,
+										color: '#51C5FD',
+									},
+									{
+										offset: 1,
+										color: '#005BB1',
+									},
+								],
+								false
+							), // 渐变
+						},
+						data: [75, 100, 60],
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 近7天投入品记录
+		const initRightChartData2 = () => {
+			const myChart = echarts.init(proxy.$refs.rightChartData2);
+			const option = {
+				grid: {
+					top: 10,
+					right: 0,
+					bottom: 20,
+					left: 30,
+				},
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				xAxis: {
+					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+					axisLine: {
+						lineStyle: {
+							color: 'rgba(22, 207, 208, 0.5)',
+							width: 1,
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						color: '#c0d1f2',
+					},
+				},
+				yAxis: [
+					{
+						type: 'value',
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.1)',
+							},
+						},
+						axisLabel: {
+							color: '#c0d1f2',
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(22, 207, 208, 0.3)',
+							},
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+					{
+						type: 'value',
+						position: 'right',
+						axisLine: {
+							show: false,
+						},
+						axisLabel: {
+							show: true,
+							formatter: '{value}%',
+							textStyle: {
+								color: '#16cfd0',
+							},
+						},
+						splitLine: {
+							show: false,
+						},
+						axisTick: {
+							show: false,
+						},
+						splitArea: {
+							show: true,
+							areaStyle: {
+								color: 'rgba(22, 207, 208, 0.02)',
+							},
+						},
+						nameTextStyle: {
+							color: '#16cfd0',
+						},
+					},
+				],
+				series: [
+					{
+						name: '销售水量',
+						type: 'line',
+						yAxisIndex: 1,
+						smooth: true,
+						showAllSymbol: true,
+						symbol: 'circle',
+						itemStyle: {
+							color: '#058cff',
+						},
+						lineStyle: {
+							color: '#058cff',
+						},
+						areaStyle: {
+							color: 'rgba(5,140,255, 0.2)',
+						},
+						data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
+					},
+					{
+						name: '主营业务',
+						type: 'bar',
+						barWidth: 15,
+						itemStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+									{
+										offset: 0,
+										color: '#00FFE3',
+									},
+									{
+										offset: 1,
+										color: '#4693EC',
+									},
+								]),
+							},
+						},
+						data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
+					},
+				],
+			};
+			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 3DEarth 地图
+		const init3DEarth = (globeRadius) => {
+			let el = state.the3DEarth!;
+			el.style.height = `${proxy.$refs.rightChartData5.offsetHeight}px`;
+			const myChart = echarts.init(el);
+			const option = {
+				globe: {
+					baseTexture: worldImg,
+					heightTexture: bathymetryImg,
+					shading: 'realistic',
+					light: {
+						ambient: {
+							intensity: 0.4,
+						},
+						main: {
+							intensity: 0.4,
+						},
+					},
+					viewControl: {
+						autoRotate: true,
+					},
+					postEffect: {
+						enable: true,
+						bloom: {
+							enable: true,
+						},
+					},
+					globeRadius,
+				},
+				series: {
+					type: 'lines3D',
+					coordinateSystem: 'globe',
+					blendMode: 'lighter',
+					lineStyle: {
+						width: 1,
+						color: 'rgb(50, 50, 150)',
+						opacity: 0.1,
+					},
+					data: [],
+				},
+			};
+			// 随机模拟攻击线
+			let rodamData = function () {
+				let longitude = 105.18;
+				let longitude2 = Math.random() * 360 - 180;
+				let latitude = 37.51;
+				let latitude2 = Math.random() * 180 - 90;
+				return {
+					coords: [
+						[longitude2, latitude2],
+						[longitude, latitude],
+					],
+					value: (Math.random() * 3000).toFixed(2),
+				};
+			};
+			for (let i = 0; i < 150; i++) {
+				option.series.data = option.series.data.concat(rodamData());
+			}
+			myChart.setOption(option);
+		};
+		// 监听地球大小变化
+		const initAddEventListener3DEarth = () => {
+			let w = document.body.clientWidth;
+			let globeRadius = 0;
+			if (w >= 1920) globeRadius = 100;
+			else if (w > 1200 && w < 1920) globeRadius = 70;
+			else if (w > 992 && w < 1200) globeRadius = 60;
+			else if (w > 768 && w < 992) globeRadius = 40;
+			else if (w < 768) globeRadius = 20;
+			init3DEarth(globeRadius);
+		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
+			initAddEventListener3DEarth();
+			window.addEventListener('resize', () => {
+				for (let i = 0; i < state.myCharts.length; i++) {
+					state.myCharts[i].resize();
+				}
+				initAddEventListener3DEarth();
+			});
+		};
+		// 页面加载时
+		onMounted(async () => {
+			NextLoading.done();
+			initTime();
+			await initRightChartData1();
+			await initRightChartData4();
+			await initRightChartData3();
+			await initRightChartData2();
+			await initRightChartData6();
+			await initEchartsResize();
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			window.clearInterval(state.time.fun);
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.visualizing-demo2 {
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+	background: url(https://img-blog.csdnimg.cn/6267533849444025811bf0840f9366e3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_20,color_FFFFFF,t_70,g_se,x_16);
+	background-size: 100% 100%;
+	display: flex;
+	flex-direction: column;
+	font-size: 13px;
+	.big-data-up {
+		height: 70px;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 0 15px;
+		color: #43bdf0;
+		overflow: hidden;
+		.up-left {
+			width: 30%;
+			font-style: italic;
+		}
+		.up-center {
+			width: 40%;
+			display: flex;
+			justify-content: center;
+			font-size: 20px;
+			letter-spacing: 5px;
+			background-image: -webkit-linear-gradient(left, #43bdf0, #c0d1f2 25%, #43bdf0 50%, #c0d1f2 75%, #43bdf0);
+			-webkit-text-fill-color: transparent;
+			background-clip: text;
+			-webkit-background-clip: text;
+			background-size: 200% 100%;
+			animation: masked-animation 4s infinite linear;
+			-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
+			@keyframes masked-animation {
+				0% {
+					background-position: 0 0;
+				}
+				100% {
+					background-position: -100% 0;
+				}
+			}
+			position: relative;
+			&::after {
+				content: '';
+				width: 50%;
+				position: absolute;
+				bottom: -15px;
+				left: 50%;
+				transform: translateX(-50%);
+				border: 1px transparent solid;
+				border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #43bdf0) 1 10;
+			}
+			span {
+				cursor: pointer;
+			}
+		}
+		.up-right {
+			width: 30%;
+			justify-content: flex-end;
+			display: flex;
+			align-items: center;
+			.ml15:hover {
+				cursor: pointer;
+			}
+			:deep(.el-dropdown) {
+				font-size: 13px !important;
+				color: #43bdf0;
+				cursor: pointer;
+			}
+		}
+	}
+	.big-data-down {
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		.big-data-down-left,
+		.big-data-down-right {
+			width: 30%;
+			display: flex;
+			flex-direction: column;
+			.flex-warp-item {
+				padding: 0 7.5px 15px 15px;
+				width: 100%;
+				height: 33.33%;
+				.flex-warp-item-box {
+					width: 100%;
+					height: 100%;
+					background: rgba(22, 34, 58, 0.4);
+					display: flex;
+					flex-direction: column;
+					padding: 15px;
+					.flex-title {
+						margin-bottom: 15px;
+						color: #c0d1f2;
+						display: flex;
+						justify-content: space-between;
+						.flex-title-small {
+							font-size: 12px;
+						}
+					}
+					.flex-content {
+						flex: 1;
+						font-size: 12px;
+					}
+					.flex-content-overflow {
+						overflow: hidden;
+					}
+				}
+			}
+		}
+		.big-data-down-left {
+			color: #c0d1f2;
+			.sky {
+				display: flex;
+				align-items: center;
+				.sky-left {
+					font-size: 30px;
+				}
+				.sky-center {
+					flex: 1;
+					overflow: hidden;
+					padding: 0 10px;
+					.font {
+						margin-right: 15px;
+						background: unset !important;
+						border-radius: unset !important;
+						padding: unset !important;
+					}
+					span {
+						background: #22bc76;
+						border-radius: 2px;
+						padding: 0 5px;
+					}
+					.sky-tip {
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
+				}
+				.sky-right {
+					span {
+						font-size: 30px;
+					}
+					font {
+						font-size: 20px;
+					}
+				}
+			}
+			.sky-dd {
+				.sky-dl {
+					display: flex;
+					align-items: center;
+					height: 28px;
+					overflow: hidden;
+					div {
+						flex: 1;
+						overflow: hidden;
+						i {
+							font-size: 14px;
+						}
+					}
+					.tip {
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
+					&:hover {
+						background: rgba(0, 0, 0, 0.05);
+						cursor: default;
+						border-radius: 4px;
+					}
+					&:first-child:hover {
+						background: unset;
+					}
+				}
+				.sky-dl-first {
+					color: #43bdf0;
+				}
+			}
+			.d-states {
+				display: flex;
+				.d-states-item {
+					flex: 1;
+					display: flex;
+					align-items: center;
+					overflow: hidden;
+					i {
+						font-size: 20px;
+						height: 33px;
+						width: 33px;
+						line-height: 33px;
+						text-align: center;
+						border-radius: 100%;
+						flex-shrink: 1;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+					.i-bg1 {
+						background: #22bc76;
+					}
+					.i-bg2 {
+						background: #e2356d;
+					}
+					.i-bg3 {
+						background: #43bbef;
+					}
+					.d-states-flex {
+						overflow: hidden;
+						padding: 0 10px 0;
+						.d-states-item-label {
+							color: #43bdf0;
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+						}
+						.d-states-item-value {
+							font-size: 20px;
+							text-align: center;
+						}
+					}
+				}
+			}
+			.d-btn {
+				margin-top: 15px;
+				.d-btn-item {
+					border: 1px solid #c0d1f2;
+					display: flex;
+					width: 100%;
+					height: 35px;
+					border-radius: 35px;
+					align-items: center;
+					padding: 0 4px;
+					margin-top: 15px;
+					cursor: pointer;
+					transition: all ease 0.3s;
+					.d-btn-item-left {
+						font-size: 20px;
+						border: 1px solid #c0d1f2;
+						width: 25px;
+						height: 25px;
+						line-height: 25px;
+						border-radius: 100%;
+						text-align: center;
+						font-size: 14px;
+					}
+					.d-btn-item-center {
+						padding: 0 10px;
+						flex: 1;
+					}
+					.d-btn-item-eight {
+						text-align: right;
+						padding-right: 10px;
+					}
+				}
+				.d-btn-active {
+					transition: all ease 0.3s;
+					border: 1px solid #43bdf0;
+					color: #43bdf0;
+					.d-btn-item-left {
+						border: 1px solid #43bdf0;
+					}
+				}
+			}
+		}
+		.big-data-down-center {
+			width: 40%;
+			display: flex;
+			flex-direction: column;
+			.big-data-down-center-one {
+				height: 66.67%;
+				padding: 0 7.5px 15px;
+				.big-data-down-center-one-content {
+					height: 100%;
+					position: relative;
+					.fixed-top,
+					.fixed-right,
+					.fixed-bottom,
+					.fixed-left {
+						position: absolute;
+						width: 100px;
+						height: 100px;
+						display: flex;
+						cursor: pointer;
+						.circle {
+							position: absolute;
+							border-radius: 50%;
+							background: rgba(0, 0, 0, 0.01);
+							z-index: 10;
+						}
+						.text-box {
+							position: relative;
+							z-index: 11;
+							color: #c0d1f2;
+							margin: auto;
+							text-align: center;
+							font-size: 12px;
+							i {
+								font-size: 28px;
+								margin-bottom: 10px;
+							}
+						}
+					}
+					.fixed-top {
+						left: 20px;
+						top: 20px;
+					}
+					.fixed-right {
+						right: 20px;
+						top: 20px;
+					}
+					.fixed-bottom {
+						right: 20px;
+						bottom: 20px;
+					}
+					.fixed-left {
+						left: 20px;
+						bottom: 20px;
+					}
+					.circle:nth-of-type(1) {
+						width: 100px;
+						height: 95px;
+						animation: turnAround 6s infinite linear;
+						box-shadow: 0 0 1px 0 #869fe4, inset 0 0 10px 0 #869fe4;
+					}
+					.circle:nth-of-type(2) {
+						width: 95px;
+						height: 100px;
+						animation: turnAround 10s infinite linear;
+						box-shadow: 0 0 1px 0 #3397f2, inset 0 0 10px 0 #3397f2;
+					}
+					.circle:nth-of-type(3) {
+						width: 110px;
+						height: 100px;
+						animation: turnAround 5s infinite linear;
+						box-shadow: 0 0 1px 0 #3eaadc, inset 0 0 10px 0 #3eaadc;
+					}
+					.circle:nth-of-type(4) {
+						width: 100px;
+						height: 110px;
+						animation: turnAround 15s infinite linear;
+						box-shadow: 0 0 1px 0 #09f, inset 0 0 10px 0 #09f;
+					}
+					@keyframes turnAround {
+						100% {
+							transform: rotate(360deg);
+						}
+					}
+				}
+			}
+			.big-data-down-center-two {
+				padding: 0 7.5px 15px;
+				height: 33.33%;
+				.flex-warp-item-box {
+					width: 100%;
+					height: 100%;
+					background: rgba(22, 34, 58, 0.4);
+					display: flex;
+					flex-direction: column;
+					padding: 15px;
+					.flex-title {
+						margin-bottom: 15px;
+						color: #c0d1f2;
+						display: flex;
+						justify-content: space-between;
+						.flex-title-small {
+							font-size: 12px;
+						}
+					}
+					.flex-content {
+						flex: 1;
+						font-size: 12px;
+						display: flex;
+						height: calc(100% - 30px);
+						.flex-content-left {
+							display: flex;
+							flex-wrap: wrap;
+							width: 120px;
+							height: 100%;
+							.monitor-item {
+								width: 50%;
+								display: flex;
+								align-items: center;
+								.monitor-wave {
+									cursor: pointer;
+									width: 40px;
+									height: 40px;
+									position: relative;
+									background-color: #43bdf0;
+									border-radius: 50%;
+									overflow: hidden;
+									text-align: center;
+									&::before,
+									&::after {
+										content: '';
+										position: absolute;
+										left: 50%;
+										width: 40px;
+										height: 40px;
+										background: #f4f4f4;
+										animation: roateOne 10s linear infinite;
+										transform: translateX(-50%);
+										z-index: 1;
+									}
+									&::before {
+										bottom: 10px;
+										border-radius: 60%;
+									}
+									&::after {
+										bottom: 8px;
+										opacity: 0.7;
+										border-radius: 37%;
+									}
+									.monitor-z-index {
+										position: relative;
+										z-index: 2;
+										color: #4eb8ff;
+										display: flex;
+										align-items: center;
+										height: 100%;
+										justify-content: center;
+										font-weight: bold;
+									}
+								}
+								@keyframes roateOne {
+									0% {
+										transform: translate(-50%, 0) rotateZ(0deg);
+									}
+									50% {
+										transform: translate(-50%, -2%) rotateZ(180deg);
+									}
+									100% {
+										transform: translate(-50%, 0%) rotateZ(360deg);
+									}
+								}
+								.monitor-active {
+									background-color: #22bc76;
+									.monitor-z-index {
+										color: #22bc76;
+									}
+								}
+							}
+						}
+						.flex-content-right {
+							flex: 1;
+						}
+					}
+				}
+			}
+		}
+		.big-data-down-right {
+			.flex-warp-item {
+				padding: 0 15px 15px 7.5px;
+				.flex-content {
+					display: flex;
+					flex-direction: column;
+					.task {
+						display: flex;
+						height: 45px;
+						.task-item {
+							flex: 1;
+							color: #c0d1f2;
+							display: flex;
+							justify-content: center;
+							.task-item-box {
+								position: relative;
+								width: 45px;
+								height: 45px;
+								overflow: hidden;
+								border-radius: 100%;
+								z-index: 0;
+								display: flex;
+								align-items: center;
+								flex-direction: column;
+								justify-content: center;
+								box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
+								&::before {
+									content: '';
+									position: absolute;
+									z-index: -2;
+									left: -50%;
+									top: -50%;
+									width: 200%;
+									height: 200%;
+									background-repeat: no-repeat;
+									background-size: 50% 50%, 50% 50%;
+									background-position: 0 0, 100% 0, 100% 100%, 0 100%;
+									background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
+										linear-gradient(#ffb980, #ffb980);
+									animation: rotate 2s linear infinite;
+								}
+								&::after {
+									content: '';
+									position: absolute;
+									z-index: -1;
+									left: 1px;
+									top: 1px;
+									width: calc(100% - 2px);
+									height: calc(100% - 2px);
+									border-radius: 100%;
+								}
+								.task-item-value {
+									text-align: center;
+									font-size: 14px;
+									font-weight: bold;
+								}
+								.task-item-label {
+									text-align: center;
+								}
+							}
+							.task1 {
+								&::after {
+									background: #5492be;
+								}
+							}
+							.task2 {
+								&::after {
+									background: #43a177;
+								}
+							}
+							.task3 {
+								&::after {
+									background: #a76077;
+								}
+							}
+							.task4 {
+								&::after {
+									background: #b4825a;
+								}
+							}
+							.task5 {
+								&::after {
+									background: #74568f;
+								}
+							}
+						}
+						.task-first-item {
+							flex-direction: column;
+							text-align: center;
+							.task-first {
+								font-size: 20px;
+							}
+						}
+					}
+				}
+			}
+			.progress {
+				flex: 1;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/visualizing/images/bathymetry.jpg b/src/views/visualizing/images/bathymetry.jpg
new file mode 100644
index 0000000..5f9eebe
Binary files /dev/null and b/src/views/visualizing/images/bathymetry.jpg differ
diff --git a/src/views/visualizing/images/world.jpg b/src/views/visualizing/images/world.jpg
new file mode 100644
index 0000000..22c7566
Binary files /dev/null and b/src/views/visualizing/images/world.jpg differ
diff --git a/src/views/visualizing/mock/demo1.ts b/src/views/visualizing/mock/demo1.ts
new file mode 100644
index 0000000..60fd944
--- /dev/null
+++ b/src/views/visualizing/mock/demo1.ts
@@ -0,0 +1,51 @@
+// 地图模拟数据
+export const echartsMapList: Array<object> = [
+	{ name: '深圳市人民政府', value: '100' },
+	{ name: '莲花山公园', value: '100' },
+	{ name: '世界之窗', value: '100' },
+	{ name: '华侨城欢乐谷', value: '100' },
+	{ name: '宝安区西乡', value: '100' },
+];
+
+// 地图经纬度数据
+export const echartsMapData: object = {
+	深圳市人民政府: [114.064524, 22.549225],
+	莲花山公园: [114.0658, 22.560072],
+	世界之窗: [113.979419, 22.540579],
+	华侨城欢乐谷: [113.986066, 22.548056],
+	宝安区西乡: [113.869053, 22.581714],
+};
+
+// 地图图片显示
+export const echartsMapImgs: Array<object> = [
+	{
+		url: 'https://img1.baidu.com/it/u=4244861097,3561366422&fm=11&fmt=auto&gp=0.jpg',
+		name: '深圳市人民政府',
+		add: '深圳市福田区福中三路市民中心C区',
+		dec: '深圳市人民政府是根据《中华人民共和国地方各级人民代表大会和地方各级人民政府组织法》设立的，是深圳市人民代表大会的执行机关，是深圳市的国家行政机关。',
+	},
+	{
+		url: 'https://img1.baidu.com/it/u=3793608028,4006842751&fm=26&fmt=auto&gp=0.jpg',
+		name: '莲花山公园',
+		add: '广东省深圳市福田区莲花街道莲花北社区红荔路6030号',
+		dec: '莲花山公园筹建于1992年10月10日 ，1997年6月23日正式对外局部开放。',
+	},
+	{
+		url: 'https://img0.baidu.com/it/u=1406340112,1927292660&fm=26&fmt=auto&gp=0.jpg',
+		name: '世界之窗',
+		add: '深圳市南山区深南大道9037号',
+		dec: '这里，世界首座实景拍摄悬空式球幕影院“飞跃美利坚””，为游客提供集休闲放松于一体的都市时尚生活空间。',
+	},
+	{
+		url: 'https://img0.baidu.com/it/u=3042342330,902556630&fm=26&fmt=auto&gp=0.jpg',
+		name: '华侨城欢乐谷',
+		add: '广东省深圳市南山区沙河街道星河街社区侨城西街1号',
+		dec: '深圳欢乐谷注重满足人们参与、体验的新型诱游需求，营造出自然、清新、活泼、惊奇、热烈、刺激的休闲旅游氛围。',
+	},
+	{
+		url: 'https://img2.baidu.com/it/u=1075072079,1229283519&fm=11&fmt=auto&gp=0.jpg',
+		name: '宝安区西乡',
+		add: '西乡街道下辖25个社区',
+		dec: '西乡街道，隶属于广东省深圳市宝安区，位于宝安区西南部，东接石岩街道，南接新安街道，西至珠江口岸边，北接航城街道。',
+	},
+];
diff --git a/src/views/visualizing/mock/demo2.ts b/src/views/visualizing/mock/demo2.ts
new file mode 100644
index 0000000..6b302b4
--- /dev/null
+++ b/src/views/visualizing/mock/demo2.ts
@@ -0,0 +1,131 @@
+// 顶部下来菜单
+export const dropdownList: Array<object> = [
+	{
+		label: '广东省农业农村厅',
+	},
+	{
+		label: '广西省农业农村厅',
+	},
+	{
+		label: '四川省农业农村厅',
+	},
+	{
+		label: '湖北省农业农村厅',
+	},
+	{
+		label: '福建省农业农村厅',
+	},
+	{
+		label: '山东省农业农村厅',
+	},
+	{
+		label: '江西省农业农村厅',
+	},
+];
+
+// sky 天气
+export const skyList: Array<object> = [
+	{
+		v1: '时间',
+		v2: '天气',
+		v3: '温度',
+		v4: '湿度',
+		v5: '降水概率',
+		v6: '风向',
+		v7: '风力',
+		type: 'title',
+	},
+	{
+		v1: '今天',
+		v2: 'ele-Sunny',
+		v3: '20°/26°',
+		v4: '80%',
+		v5: '50%',
+		v6: '东南风',
+		v7: '13m/s',
+	},
+	{
+		v1: '明天',
+		v2: 'ele-Lightning',
+		v3: '20°/26°',
+		v4: '80%',
+		v5: '50%',
+		v6: '东南风',
+		v7: '13m/s',
+	},
+	{
+		v1: '后天',
+		v2: 'ele-Sunny',
+		v3: '20°/26°',
+		v4: '80%',
+		v5: '50%',
+		v6: '东南风',
+		v7: '13m/s',
+	},
+];
+
+// 当前设置状态
+export const dBtnList: Array<object> = [
+	{
+		v1: '地块A-灌溉',
+		v2: '阳光玫瑰种植',
+		v3: '126天',
+		v4: '设备在线',
+	},
+	{
+		v1: '地块B-收割',
+		v2: '阳光玫瑰种植',
+		v3: '360天',
+		v4: '设备预警',
+	},
+];
+
+// 当前设备监测
+export const chartData4List: Array<object> = [
+	{
+		label: '温度',
+	},
+	{
+		label: '光照',
+	},
+	{
+		label: '湿度',
+	},
+	{
+		label: '风力',
+	},
+	{
+		label: '张力',
+	},
+	{
+		label: '气压',
+	},
+];
+
+// 3DEarth 地图周围按钮组
+export const earth3DBtnList: Array<object> = [
+	{
+		topLevelClass: 'fixed-top',
+		icon: 'ele-MagicStick',
+		label: '环境监测',
+		type: 0,
+	},
+	{
+		topLevelClass: 'fixed-right',
+		icon: 'ele-MoonNight',
+		label: '精准管理',
+		type: 1,
+	},
+	{
+		topLevelClass: 'fixed-bottom',
+		icon: 'ele-TrendCharts',
+		label: '数据报表',
+		type: 2,
+	},
+	{
+		topLevelClass: 'fixed-left',
+		icon: 'ele-Van',
+		label: '产品追溯',
+		type: 3,
+	},
+];
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..9d62054
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,72 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+		/* Basic Options */
+		// "incremental": true,                   /* Enable incremental compilation */
+		"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+		"module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+		"lib": ["esnext", "dom", "dom.iterable", "scripthost"] /* Specify library files to be included in the compilation. */,
+		// "allowJs": true,                       /* Allow javascript files to be compiled. */
+		// "checkJs": true,                       /* Report errors in .js files. */
+		"jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+		// "declaration": true /* Generates corresponding '.d.ts' file. */,
+		// "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+		// "sourceMap": true,                     /* Generates corresponding '.map' file. */
+		// "outFile": "./",                       /* Concatenate and emit output to single file. */
+		// "outDir": "./",                        /* Redirect output structure to the directory. */
+		// "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+		// "composite": true,                     /* Enable project compilation */
+		// "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+		// "removeComments": true,                /* Do not emit comments to output. */
+		// "noEmit": true,                        /* Do not emit outputs. */
+		// "importHelpers": true /* Import emit helpers from 'tslib'. */,
+		// "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
+		// "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+
+		/* Strict Type-Checking Options */
+		"strict": true /* Enable all strict type-checking options. */,
+		// "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+		// "strictNullChecks": true,              /* Enable strict null checks. */
+		// "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+		// "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+		// "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+		// "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+		// "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+		/* Additional Checks */
+		// "noUnusedLocals": true,                /* Report errors on unused locals. */
+		// "noUnusedParameters": true,            /* Report errors on unused parameters. */
+		// "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+		// "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+
+		/* Module Resolution Options */
+		"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+		"baseUrl": "." /* Base directory to resolve non-absolute module names. */,
+		"paths": {
+			"/@/*": ["src/*"]
+		} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
+		// "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+		// "typeRoots": [],                       /* List of folders to include type definitions from. */
+		"types": ["vite/client"] /* Type declaration files to be included in compilation. */,
+		"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+		// "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+		// "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+		/* Source Map Options */
+		// "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+		// "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+		// "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+		/* Experimental Options */
+		"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
+		// "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+		/* Advanced Options */
+		"skipLibCheck": true /* Skip type checking of declaration files. */,
+		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+	}
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..c8a6fc0
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,64 @@
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import { defineConfig, loadEnv, ConfigEnv } from 'vite';
+
+const pathResolve = (dir: string): any => {
+	return resolve(__dirname, '.', dir);
+};
+
+const alias: Record<string, string> = {
+	'/@': pathResolve('./src/'),
+	'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
+};
+
+const viteConfig = defineConfig((mode: ConfigEnv) => {
+	const env = loadEnv(mode.mode, process.cwd());
+	return {
+		plugins: [vue()],
+		root: process.cwd(),
+		resolve: { alias },
+		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
+		hmr: true,
+		optimizeDeps: {
+			include: ['element-plus/lib/locale/lang/zh-cn', 'element-plus/lib/locale/lang/en', 'element-plus/lib/locale/lang/zh-tw'],
+		},
+		server: {
+			host: '0.0.0.0',
+			port: env.VITE_PORT as unknown as number,
+			open: env.VITE_OPEN,
+			proxy: {
+				'/gitee': {
+					target: 'https://gitee.com',
+					ws: true,
+					changeOrigin: true,
+					rewrite: (path) => path.replace(/^\/gitee/, ''),
+				},
+			},
+		},
+		build: {
+			outDir: 'dist',
+			sourcemap: false,
+			chunkSizeWarningLimit: 1500,
+			rollupOptions: {
+				output: {
+					entryFileNames: `assets/[name].${new Date().getTime()}.js`,
+					chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
+					assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
+					compact: true,
+					manualChunks: {
+						vue: ['vue', 'vue-router', 'pinia'],
+						echarts: ['echarts'],
+					},
+				},
+			},
+		},
+		css: { preprocessorOptions: { css: { charset: false } } },
+		define: {
+			__VUE_I18N_LEGACY_API__: JSON.stringify(false),
+			__VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
+			__INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
+		},
+	};
+});
+
+export default viteConfig;