feat: init

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+android >= 4.4

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  root: true,
+
+  env: {
+    node: true
+  },
+
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  },
+
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}

.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/server/public/psd_static

README.md

@@ -0,0 +1,151 @@
+## Demo
+
+| [ client Demo](http://dcode.dllca.cn/) | [admin Demo](https://github.com/Oct1a/Dcode-Editor-admin) |
+| ------------------------------------- | --------- |
+| ![](./docs/static/image/index.jpg)    | ![](./docs/static/image/admin.png)     |
+
+
+
+## 使用文档
+
+[https://oct1a.github.io/Dcode-Editor/](https://oct1a.github.io/Dcode-Editor/) (还没开始写...(x_x))
+
+
+
+## 功能
+
+本项目是在[原开发者项目](https://github.com/huangwei9527/quark-h5)基础上进行改动，新增了一些功能，并稍微美化了一下。
+
+- [x] 拖拉组件至画布
+- [x] 面板可收缩展开
+- [x] 点击添加组件位置为默认位置
+- [x] 添加导入PSD时显示进度条
+- [x] 保存JSON文件
+- [x] 上传JSON文件
+- [x] 根据画布截图生成预览图
+- [x] 自定义画布右键菜单
+- [x] 添加常用快捷键
+- [x] 清空画布
+- [x] 画布标尺
+- [x] 解决一些小问题
+- [x] 创建外部图片库
+- [x] 历史记录面板
+- [x] 文本组件过滤敏感词
+- [x] 自动保存画布内容
+- [x] 用户登录界面美化
+- [x] 用户登录增加滑动验证
+- [x] 制作产品官网
+- [x] 作品状态设置，外部不可访问
+- [x] 增加二维码组件
+- [x] 导入PSD可选择文字可编辑与全转为图片模式
+
+
+
+想完成但未完善问题（争取有时间再完善）：
+
+- [ ] 导入PSD角度问题
+- [ ] 导入PSD的文本字体大小不一致问题
+- [ ] 个别PSD导入出现错误情况
+- [ ] 画布大小自定义
+- [ ] 组件锁定
+- [ ] 右键菜单不同区域显示不同菜单
+- [ ] 剪切组件
+- [ ] 预览添加手机壳模型
+- [ ] 组件拖拽多选
+- [ ] 添加新人引导动画
+- [ ] 完善表单数据功能
+- [ ] 完善模板库
+
+## 安装前准备
+
+技术要求：掌握node.js、了解koa.js基本用法、熟悉Vue.js
+
+### 一、环境准备
+
+- [Node.js](https://nodejs.org/en/download/)
+- [Mongodb](https://www.mongodb.com/try/download/community)
+
+### 二、拉取本项目
+
+git需自行安装
+
+```
+git clone https://github.com/Oct1a/Dcode-Editor.git
+```
+
+### 三、修改数据库连接文件
+
+```
+文件路径：service/config/index.js
+```
+
+修改对应的数据库配置，如果本身`mongodb`默认端口是`27017`可以直接启动
+
+### 四、了解工程目录结构
+
+```
+|-- client					--------前端项目界面代码
+    |--common					--------前端界面对应静态资源
+    |--components				--------组件
+    |--config					--------配置文件
+    |--eventBus					--------eventBus
+    |--filter					--------过滤器
+    |--mixins					--------混入
+    |--pages					--------页面
+    |--router					--------路由配置
+    |--store					--------vuex状态管理
+    |--service					--------axios封装
+    |--App.vue					--------App
+    |--main.js					--------入口文件
+    |--permission.js			--------权限控制
+|-- server					--------服务器端项目代码
+    |--confog					--------配置文件
+    |--controller				--------数据库链接相关
+    |--extend					--------框架扩展
+    |--model					-------Schema和Model
+    |--middleware				--------中间件
+    |--core						--------Koa MVC实现自动加载核心文件
+    |--views					--------ejs页面模板
+    |--public					--------静态资源
+    |--router.js				--------路由
+    |--app.js					--------服务端入口
+|-- common					--------前后端公用代码模块（如加解密）
+|-- engine-template			--------页面模板引擎，使用webpack打包成js提供页面引用
+|-- docs					--------预留编写项目文档目录
+|-- config.json				--------配置文件
+```
+
+
+
+## 本地开发
+
+### 一、安装模块
+
+内置组件使用了一个echatrs库是低版本，如果出现npm无法安装，使用`cnpm i`安装即可
+
+####  二、启动服务端
+
+需要先配置Mongodb数据库
+
+如果不想数据交互，可以忽略这一步（但客户端无法登录，需在权限管理先进行设置）
+
+```bash
+npm run server
+```
+
+### 三、启动客户端
+
+```bash
+npm run client
+```
+
+登录功能因使用的是自己数据库，没有固定账号，直接注册使用即可
+
+注意： 如果没有生成过引擎模板js文件的，需要先编辑引擎模板，否则预览页面加载页面引擎.js 404报错
+
+##### 编译engine.js模板引擎
+
+```bash
+npm run h5-parse
+```
+

TODOconfig.json

@@ -0,0 +1,14 @@
+{
+  "port": "4000",
+  "adminAccount": "admin",
+  "db": {
+    "servername": "127.0.0.1",
+    "DATABASE": "",
+    "port": 27017,
+    "user": "",
+    "pass": "",
+    "authSource": ""
+  },
+  "baseURL": "",
+  "tips": "该文件后期处理，client与server的配置信息整合一起"
+}

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ],
+  plugins: [
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    }, 'vant']
+  ]
+}

client/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+<script>
+	export default {
+
+	}
+</script>
+<style lang="scss">
+html,body{
+  position: relative;
+  height: 100%;
+}
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+
+</style>

client/api/index.js

@@ -0,0 +1,12 @@
+/**
+ *  API 统一管理
+ * */
+
+// 用户相关
+export * from './modules/user'
+  // 页面相关
+export * from './modules/page'
+  // 图片库相关
+export * from './modules/image'
+  // 解析psd
+export * from './modules/psd'

client/api/modules/image.js

@@ -0,0 +1,13 @@
+/*
+ * image 图片库
+ **/
+import $axios from "@/service/httpServer";
+
+// 获取我的图片列表
+export const getMyImages = p => $axios.get('/imageLib/myImages', p);
+// 上传图片
+export const uploadImage = p => $axios.post('/imageLib/upload', p)
+export const uploadCommonImage = p => $axios.post('/imageCommon/upload', p)
+
+// 获取外部图片列表
+export const getExternalImages = p => $axios.get('/imageLib/ExternalImages', p)

client/api/modules/page.js

@@ -0,0 +1,43 @@
+/*
+	页面相关api
+**/
+import $axios from "@/service/httpServer";
+// 获取我的页面列表
+export const getMyPages = p => $axios.get('/page/getMyPages', p);
+// 获取我的页面详情
+export const getPageDetail = p => $axios.get('/page/detail', p);
+// 新增页面
+export const createPage = p => $axios.post('/page/create', p);
+// 更新页面
+export const updatePage = p => $axios.post('/page/update', p);
+// 删除页面
+export const deletePage = p => $axios.post('/page/delete', p);
+// 复制页面
+export const copyPage = p => $axios.post('/page/copy', p);
+// 设置为模板
+export const setTemplatePage = p => $axios.post('/page/setTemplate', p);
+// 发布页面
+export const publishPage = p => $axios.post('/page/setPublish', p);
+
+/**
+ * ========================================================================
+ * */
+// 获取我的模板
+export const getMyTemplates = p => $axios.get('/page/getMyTemplates', p);
+
+
+/**
+ * ========================================================================
+ * */
+// 获取模板市场模板
+export const getPublishTemplates = p => $axios.get('/page/getPublishTemplates', p);
+
+/**
+ * ========================================================================
+ * */
+// 获取协作人列表
+export const getCooperationUserListByPageId = p => $axios.get('/page/getCooperationList', p)
+  // 按userIds添加协作人
+export const addCooperation = p => $axios.post('/page/addCooperation', p)
+  // 删除协作人
+export const delCooperation = p => $axios.post('/page/delCooperation', p)

client/api/modules/psd.js

@@ -0,0 +1,7 @@
+/*
+ * psd
+ **/
+import $axios from "@/service/httpServer";
+
+// 上传psd解析
+export const psdPpload = p => $axios.post('/psd/upload', p)

client/api/modules/user.js

@@ -0,0 +1,21 @@
+/*
+	用户相关api
+**/
+import $axios from "@/service/httpServer";
+// 登录
+export const login = p => $axios.post('/auth/login', p);
+// 注册
+export const register = p => $axios.post('/auth/register', p);
+// 获取用户信息
+export const getUserInfo = () => $axios.get('/user/info');
+// 修改用户昵称
+export const updateNickName = p => $axios.post('/user/update/name', p);
+// 修改密码
+export const updateUserPass = p => $axios.post('/user/update/pass', p);
+// 修改头像
+export const updateUserAvatar = p => $axios.post('/user/update/avatar', p);
+// 关键字搜索用户列表
+export const getUserListByKeywords = p => $axios.get('/user/getUserList', p);
+
+// 下载JSON文件
+export const JsonDownload = p => $axios.get('/tool/jsonload', p)

client/common/animateCssData.js

@@ -0,0 +1,94 @@
+let animateCssClassName = [{
+    label: '进入',
+    children: [
+      { label: '渐显', value: 'fadeIn', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '向右进入', value: 'fadeInLeft', bg_X: 120, bg_Y: -80, show_X: 120, show_Y: -560 },
+      { label: '向左进入', value: 'fadeInRight', bg_X: 360, bg_Y: 0, show_X: 160, show_Y: -600 },
+      { label: '向上进入', value: 'fadeInUp', bg_X: 360, bg_Y: 0, show_X: -120, show_Y: -480 },
+      { label: '向下进入', value: 'fadeInDown', bg_X: 360, bg_Y: 0, show_X: -40, show_Y: -520 },
+      { label: '向左长距进入', value: 'fadeInLeftBig', bg_X: 360, bg_Y: 0, show_X: -280, show_Y: -560 },
+      { label: '向右长距进入', value: 'fadeInRightBig', bg_X: 360, bg_Y: 0, show_X: -240, show_Y: -600 },
+      { label: '向上长距进入', value: 'fadeInUpBig', bg_X: 360, bg_Y: 0, show_X: -280, show_Y: -720 },
+      { label: '向下长距进入', value: 'fadeInDownBig', bg_X: 360, bg_Y: 0, show_X: -160, show_Y: -765 },
+      { label: '旋转进入', value: 'rotateIn', bg_X: 360, bg_Y: 0, show_X: -200, show_Y: -480 },
+      { label: '左顺时针旋转', value: 'rotateInDownLeft', bg_X: 360, bg_Y: 0, show_X: 0, show_Y: -680 },
+      { label: '右逆时针旋转', value: 'rotateInDownRight', bg_X: 360, bg_Y: 0, show_X: 0, show_Y: -680 },
+      { label: '左逆时针旋转', value: 'rotateInUpLeft', bg_X: 360, bg_Y: 0, show_X: 0, show_Y: -680 },
+      { label: '右逆时针旋转', value: 'rotateInUpRight', bg_X: 360, bg_Y: 0, show_X: 0, show_Y: -680 },
+      { label: '弹入', value: 'bounceIn', bg_X: 360, bg_Y: 0, show_X: -280, show_Y: -520 },
+      { label: '向右快速弹入', value: 'bounceInLeft', bg_X: 360, bg_Y: 0, show_X: 120, show_Y: -560 },
+      { label: '向左快速弹入', value: 'bounceInRight', bg_X: 360, bg_Y: 0, show_X: 160, show_Y: -600 },
+      { label: '向上弹入', value: 'bounceInUp', bg_X: 360, bg_Y: 0, show_X: -120, show_Y: -480 },
+      { label: '向下弹入', value: 'bounceInDown', bg_X: 360, bg_Y: 0, show_X: -40, show_Y: -520 },
+      { label: '斜切进入', value: 'lightSpeedIn', bg_X: 360, bg_Y: 0, show_X: 0, show_Y: -560 },
+      { label: 'Y轴旋转', value: 'flip', bg_X: 360, bg_Y: 0, show_X: -80, show_Y: -720 },
+      { label: '中心X轴旋转', value: 'flipInX', bg_X: 360, bg_Y: 0, show_X: -200, show_Y: -880 },
+      { label: '中心Y轴旋转', value: 'flipInY', bg_X: 360, bg_Y: 0, show_X: -320, show_Y: -880 },
+      { label: '左长半径旋转', value: 'rollIn', bg_X: 360, bg_Y: 0, show_X: -280, show_Y: -640 },
+      { label: '由小变大进入', value: 'zoomIn', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '左变大进入', value: 'zoomInLeft', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '右变大进入', value: 'zoomInRight', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '向上变大进入', value: 'zoomInUp', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '向下变大进入', value: 'zoomInDown', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '向左滑动展开', value: 'slideInLeft', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '向右滑动展开', value: 'slideInRight', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '向上滑动展开', value: 'slideInUp', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '向下滑动展开', value: 'slideInDown', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+    ]
+  },
+  {
+    label: '强调',
+    children: [
+      { label: '弹跳', value: 'bounce', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '闪烁', value: 'flash', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '放大缩小', value: 'pulse', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '放大缩小弹簧', value: 'rubberBand', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '左右晃动', value: 'shake', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '左右小幅晃动', value: 'headShake', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '左右扇形摇摆', value: 'swing', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '放大晃动缩小', value: 'tada', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '扇形摇摆', value: 'wobble', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: '左右上下晃动', value: 'jello', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+      { label: 'Y轴旋转', value: 'flip', bg_X: 360, bg_Y: 0, show_X: 360, show_Y: 200 },
+    ]
+  },
+  {
+    label: '退出',
+    children: [
+      { label: '渐隐', value: 'fadeOut', show_X: 360, show_Y: 200 },
+      { label: '向左退出', value: 'fadeOutLeft', show_X: 360, show_Y: 200 },
+      { label: '向右退出', value: 'fadeOutRight', show_X: 360, show_Y: 200 },
+      { label: '向上退出', value: 'fadeOutUp', show_X: 360, show_Y: 200 },
+      { label: '向下退出', value: 'fadeOutDown', show_X: 360, show_Y: 200 },
+      { label: '向左长距退出', value: 'fadeOutLeftBig', show_X: 360, show_Y: 200 },
+      { label: '向右长距退出', value: 'fadeOutRightBig', show_X: 360, show_Y: 200 },
+      { label: '向上长距退出', value: 'fadeOutUpBig', show_X: 360, show_Y: 200 },
+      { label: '向下长距退出', value: 'fadeOutDownBig', show_X: 360, show_Y: 200 },
+      { label: '旋转退出', value: 'rotateOut', show_X: 360, show_Y: 200 },
+      { label: '左顺时针旋转', value: 'rotateOutDownLeft', show_X: 360, show_Y: 200 },
+      { label: '右逆时针旋转', value: 'rotateOutDownRight', show_X: 360, show_Y: 200 },
+      { label: '左逆时针旋转', value: 'rotateOutUpLeft', show_X: 360, show_Y: 200 },
+      { label: '右逆时针旋转', value: 'rotateOutUpRight', show_X: 360, show_Y: 200 },
+      { label: '弹出', value: 'bounceOut', show_X: 360, show_Y: 200 },
+      { label: '向左弹出', value: 'bounceOutLeft', show_X: 360, show_Y: 200 },
+      { label: '向右弹出', value: 'bounceOutRight', show_X: 360, show_Y: 200 },
+      { label: '向上弹出', value: 'bounceOutUp', show_X: 360, show_Y: 200 },
+      { label: '向下弹出', value: 'bounceOutDown', show_X: 360, show_Y: 200 },
+      { label: '光速进出', value: 'lightSpeedOut', show_X: 360, show_Y: 200 },
+      { label: '中心X轴旋转', value: 'flipOutX', show_X: 360, show_Y: 200 },
+      { label: '中心Y轴旋转', value: 'flipOutY', show_X: 360, show_Y: 200 },
+      { label: '左长半径旋转', value: 'rollOut', show_X: 360, show_Y: 200 },
+      { label: '由小变大退出', value: 'zoomOut', show_X: 360, show_Y: 200 },
+      { label: '左变大退出', value: 'zoomOutLeft', show_X: 360, show_Y: 200 },
+      { label: '右变大退出', value: 'zoomOutight', show_X: 360, show_Y: 200 },
+      { label: '向上变大退出', value: 'zoomOutUp', show_X: 360, show_Y: 200 },
+      { label: '向下变大退出', value: 'zoomOutDown', show_X: 360, show_Y: 200 },
+      { label: '向左滑动收起', value: 'slideOutLeft', show_X: 360, show_Y: 200 },
+      { label: '向右滑动收起', value: 'slideOutRight', show_X: 360, show_Y: 200 },
+      { label: '向上滑动收起', value: 'slideOutUp', show_X: 360, show_Y: 200 },
+      { label: '向下滑动收起', value: 'slideOutDown', show_X: 360, show_Y: 200 },
+    ]
+  }
+]
+
+export default animateCssClassName

client/common/fonts/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

client/common/fonts/demo_index.html

@@ -0,0 +1,1619 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1451646" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cc;</span>
+                <div class="name">表单</div>
+                <div class="code-name">&amp;#xe6cc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ea;</span>
+                <div class="name">页面</div>
+                <div class="code-name">&amp;#xe6ea;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe74c;</span>
+                <div class="name">iframe</div>
+                <div class="code-name">&amp;#xe74c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe654;</span>
+                <div class="name">垂直居中对齐</div>
+                <div class="code-name">&amp;#xe654;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe658;</span>
+                <div class="name">水平居中对齐</div>
+                <div class="code-name">&amp;#xe658;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65b;</span>
+                <div class="name">右对齐</div>
+                <div class="code-name">&amp;#xe65b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65c;</span>
+                <div class="name">左对齐</div>
+                <div class="code-name">&amp;#xe65c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66d;</span>
+                <div class="name">多选</div>
+                <div class="code-name">&amp;#xe66d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe852;</span>
+                <div class="name">预览</div>
+                <div class="code-name">&amp;#xe852;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe668;</span>
+                <div class="name">同步</div>
+                <div class="code-name">&amp;#xe668;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62e;</span>
+                <div class="name">音乐_music217</div>
+                <div class="code-name">&amp;#xe62e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe69f;</span>
+                <div class="name">图片</div>
+                <div class="code-name">&amp;#xe69f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe946;</span>
+                <div class="name">框架_frame23</div>
+                <div class="code-name">&amp;#xe946;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe625;</span>
+                <div class="name">目标页面列表</div>
+                <div class="code-name">&amp;#xe625;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe937;</span>
+                <div class="name">redo</div>
+                <div class="code-name">&amp;#xe937;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe966;</span>
+                <div class="name">undo</div>
+                <div class="code-name">&amp;#xe966;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe743;</span>
+                <div class="name">全屏</div>
+                <div class="code-name">&amp;#xe743;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe652;</span>
+                <div class="name">758编辑器_分割线</div>
+                <div class="code-name">&amp;#xe652;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe735;</span>
+                <div class="name">单选</div>
+                <div class="code-name">&amp;#xe735;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe621;</span>
+                <div class="name">输入框搜索</div>
+                <div class="code-name">&amp;#xe621;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe624;</span>
+                <div class="name">视频</div>
+                <div class="code-name">&amp;#xe624;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64b;</span>
+                <div class="name">时间</div>
+                <div class="code-name">&amp;#xe64b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62c;</span>
+                <div class="name">62-全部边框</div>
+                <div class="code-name">&amp;#xe62c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c8;</span>
+                <div class="name">日期时间</div>
+                <div class="code-name">&amp;#xe6c8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61f;</span>
+                <div class="name">地图</div>
+                <div class="code-name">&amp;#xe61f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">星标</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64a;</span>
+                <div class="name">上对齐</div>
+                <div class="code-name">&amp;#xe64a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe649;</span>
+                <div class="name">文本</div>
+                <div class="code-name">&amp;#xe649;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64c;</span>
+                <div class="name">下对齐</div>
+                <div class="code-name">&amp;#xe64c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe642;</span>
+                <div class="name">无数据</div>
+                <div class="code-name">&amp;#xe642;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66e;</span>
+                <div class="name">分割线</div>
+                <div class="code-name">&amp;#xe66e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe647;</span>
+                <div class="name">置顶</div>
+                <div class="code-name">&amp;#xe647;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe648;</span>
+                <div class="name">置底</div>
+                <div class="code-name">&amp;#xe648;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c3;</span>
+                <div class="name">ps</div>
+                <div class="code-name">&amp;#xe6c3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe611;</span>
+                <div class="name">缩放</div>
+                <div class="code-name">&amp;#xe611;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ef;</span>
+                <div class="name">colum-height</div>
+                <div class="code-name">&amp;#xe7ef;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7fc;</span>
+                <div class="name">column-width</div>
+                <div class="code-name">&amp;#xe7fc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62d;</span>
+                <div class="name">删除</div>
+                <div class="code-name">&amp;#xe62d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">首页轮播图</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe962;</span>
+                <div class="name">loading</div>
+                <div class="code-name">&amp;#xe962;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe630;</span>
+                <div class="name">符号-数字输入框</div>
+                <div class="code-name">&amp;#xe630;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe620;</span>
+                <div class="name">PSD</div>
+                <div class="code-name">&amp;#xe620;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">日期</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec7d;</span>
+                <div class="name">iframe添加</div>
+                <div class="code-name">&amp;#xec7d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe790;</span>
+                <div class="name">矩形</div>
+                <div class="code-name">&amp;#xe790;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec80;</span>
+                <div class="name">居中对齐</div>
+                <div class="code-name">&amp;#xec80;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec82;</span>
+                <div class="name">右对齐</div>
+                <div class="code-name">&amp;#xec82;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec83;</span>
+                <div class="name">字体加粗</div>
+                <div class="code-name">&amp;#xec83;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec86;</span>
+                <div class="name">左对齐</div>
+                <div class="code-name">&amp;#xec86;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe622;</span>
+                <div class="name">保存</div>
+                <div class="code-name">&amp;#xe622;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe661;</span>
+                <div class="name">发布</div>
+                <div class="code-name">&amp;#xe661;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeef3;</span>
+                <div class="name">星标</div>
+                <div class="code-name">&amp;#xeef3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d9;</span>
+                <div class="name">padding</div>
+                <div class="code-name">&amp;#xe6d9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6da;</span>
+                <div class="name">margin</div>
+                <div class="code-name">&amp;#xe6da;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">字体缩小</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60f;</span>
+                <div class="name">字体放大</div>
+                <div class="code-name">&amp;#xe60f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">退出</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">复制</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe623;</span>
+                <div class="name">星标</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">上移一层</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">下移一层</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">文本框</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">按钮组</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont iconbiaodan"></span>
+            <div class="name">
+              表单
+            </div>
+            <div class="code-name">.iconbiaodan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconiconset0335"></span>
+            <div class="name">
+              页面
+            </div>
+            <div class="code-name">.iconiconset0335
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconiframe"></span>
+            <div class="name">
+              iframe
+            </div>
+            <div class="code-name">.iconiframe
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconchuizhijuzhongduiqi"></span>
+            <div class="name">
+              垂直居中对齐
+            </div>
+            <div class="code-name">.iconchuizhijuzhongduiqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshuipingjuzhongduiqi"></span>
+            <div class="name">
+              水平居中对齐
+            </div>
+            <div class="code-name">.iconshuipingjuzhongduiqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyouduiqi"></span>
+            <div class="name">
+              右对齐
+            </div>
+            <div class="code-name">.iconyouduiqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzuoduiqi"></span>
+            <div class="name">
+              左对齐
+            </div>
+            <div class="code-name">.iconzuoduiqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconduoxuan"></span>
+            <div class="name">
+              多选
+            </div>
+            <div class="code-name">.iconduoxuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyulan"></span>
+            <div class="name">
+              预览
+            </div>
+            <div class="code-name">.iconyulan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icontongbu"></span>
+            <div class="name">
+              同步
+            </div>
+            <div class="code-name">.icontongbu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyinlemusic217"></span>
+            <div class="name">
+              音乐_music217
+            </div>
+            <div class="code-name">.iconyinlemusic217
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icontupian"></span>
+            <div class="name">
+              图片
+            </div>
+            <div class="code-name">.icontupian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconkuangjiaframe23"></span>
+            <div class="name">
+              框架_frame23
+            </div>
+            <div class="code-name">.iconkuangjiaframe23
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconmubiaoyemianliebiao"></span>
+            <div class="name">
+              目标页面列表
+            </div>
+            <div class="code-name">.iconmubiaoyemianliebiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconredo1"></span>
+            <div class="name">
+              redo
+            </div>
+            <div class="code-name">.iconredo1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconundo1"></span>
+            <div class="name">
+              undo
+            </div>
+            <div class="code-name">.iconundo1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconquanping"></span>
+            <div class="name">
+              全屏
+            </div>
+            <div class="code-name">.iconquanping
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon758bianjiqi_fengexian"></span>
+            <div class="name">
+              758编辑器_分割线
+            </div>
+            <div class="code-name">.icon758bianjiqi_fengexian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconplus-radio"></span>
+            <div class="name">
+              单选
+            </div>
+            <div class="code-name">.iconplus-radio
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshurukuangsousuo"></span>
+            <div class="name">
+              输入框搜索
+            </div>
+            <div class="code-name">.iconshurukuangsousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshipin"></span>
+            <div class="name">
+              视频
+            </div>
+            <div class="code-name">.iconshipin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshijian"></span>
+            <div class="name">
+              时间
+            </div>
+            <div class="code-name">.iconshijian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-quanbubiankuang"></span>
+            <div class="name">
+              62-全部边框
+            </div>
+            <div class="code-name">.icon-quanbubiankuang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconriqishijian"></span>
+            <div class="name">
+              日期时间
+            </div>
+            <div class="code-name">.iconriqishijian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconditu"></span>
+            <div class="name">
+              地图
+            </div>
+            <div class="code-name">.iconditu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxingbiao"></span>
+            <div class="name">
+              星标
+            </div>
+            <div class="code-name">.iconxingbiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshangduiqi"></span>
+            <div class="name">
+              上对齐
+            </div>
+            <div class="code-name">.iconshangduiqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconwenben"></span>
+            <div class="name">
+              文本
+            </div>
+            <div class="code-name">.iconwenben
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxiaduiqi"></span>
+            <div class="name">
+              下对齐
+            </div>
+            <div class="code-name">.iconxiaduiqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconwushuju"></span>
+            <div class="name">
+              无数据
+            </div>
+            <div class="code-name">.iconwushuju
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconfengexian"></span>
+            <div class="name">
+              分割线
+            </div>
+            <div class="code-name">.iconfengexian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconcontrol-top"></span>
+            <div class="name">
+              置顶
+            </div>
+            <div class="code-name">.iconcontrol-top
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconcontrol-bottom"></span>
+            <div class="name">
+              置底
+            </div>
+            <div class="code-name">.iconcontrol-bottom
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconps"></span>
+            <div class="name">
+              ps
+            </div>
+            <div class="code-name">.iconps
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconziyuan"></span>
+            <div class="name">
+              缩放
+            </div>
+            <div class="code-name">.iconziyuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconcolum-height"></span>
+            <div class="name">
+              colum-height
+            </div>
+            <div class="code-name">.iconcolum-height
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconcolumn-width"></span>
+            <div class="name">
+              column-width
+            </div>
+            <div class="code-name">.iconcolumn-width
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshanchu"></span>
+            <div class="name">
+              删除
+            </div>
+            <div class="code-name">.iconshanchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshouyelunbotu"></span>
+            <div class="name">
+              首页轮播图
+            </div>
+            <div class="code-name">.iconshouyelunbotu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconloading"></span>
+            <div class="name">
+              loading
+            </div>
+            <div class="code-name">.iconloading
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconfuhao-shuzishurukuang"></span>
+            <div class="name">
+              符号-数字输入框
+            </div>
+            <div class="code-name">.iconfuhao-shuzishurukuang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconPSD"></span>
+            <div class="name">
+              PSD
+            </div>
+            <div class="code-name">.iconPSD
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconriqi"></span>
+            <div class="name">
+              日期
+            </div>
+            <div class="code-name">.iconriqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconiframetianjia"></span>
+            <div class="name">
+              iframe添加
+            </div>
+            <div class="code-name">.iconiframetianjia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconjuxing"></span>
+            <div class="name">
+              矩形
+            </div>
+            <div class="code-name">.iconjuxing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconjuzhongduiqi"></span>
+            <div class="name">
+              居中对齐
+            </div>
+            <div class="code-name">.iconjuzhongduiqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyouduiqi2"></span>
+            <div class="name">
+              右对齐
+            </div>
+            <div class="code-name">.iconyouduiqi2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzitijiacu"></span>
+            <div class="name">
+              字体加粗
+            </div>
+            <div class="code-name">.iconzitijiacu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzuoduiqi1"></span>
+            <div class="name">
+              左对齐
+            </div>
+            <div class="code-name">.iconzuoduiqi1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconbaocun"></span>
+            <div class="name">
+              保存
+            </div>
+            <div class="code-name">.iconbaocun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconfabu"></span>
+            <div class="name">
+              发布
+            </div>
+            <div class="code-name">.iconfabu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxingbiao-copy"></span>
+            <div class="name">
+              星标
+            </div>
+            <div class="code-name">.iconxingbiao-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconpadding"></span>
+            <div class="name">
+              padding
+            </div>
+            <div class="code-name">.iconpadding
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconmargin"></span>
+            <div class="name">
+              margin
+            </div>
+            <div class="code-name">.iconmargin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzitisuoxiao"></span>
+            <div class="name">
+              字体缩小
+            </div>
+            <div class="code-name">.iconzitisuoxiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzitifangda"></span>
+            <div class="name">
+              字体放大
+            </div>
+            <div class="code-name">.iconzitifangda
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icontuichu"></span>
+            <div class="name">
+              退出
+            </div>
+            <div class="code-name">.icontuichu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconfuzhi"></span>
+            <div class="name">
+              复制
+            </div>
+            <div class="code-name">.iconfuzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxingbiao1"></span>
+            <div class="name">
+              星标
+            </div>
+            <div class="code-name">.iconxingbiao1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconziyuan1"></span>
+            <div class="name">
+              上移一层
+            </div>
+            <div class="code-name">.iconziyuan1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxiayiyiceng"></span>
+            <div class="name">
+              下移一层
+            </div>
+            <div class="code-name">.iconxiayiyiceng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconwenbenkuang"></span>
+            <div class="name">
+              文本框
+            </div>
+            <div class="code-name">.iconwenbenkuang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconanniuzu"></span>
+            <div class="name">
+              按钮组
+            </div>
+            <div class="code-name">.iconanniuzu
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconbiaodan"></use>
+                </svg>
+                <div class="name">表单</div>
+                <div class="code-name">#iconbiaodan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconiconset0335"></use>
+                </svg>
+                <div class="name">页面</div>
+                <div class="code-name">#iconiconset0335</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconiframe"></use>
+                </svg>
+                <div class="name">iframe</div>
+                <div class="code-name">#iconiframe</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconchuizhijuzhongduiqi"></use>
+                </svg>
+                <div class="name">垂直居中对齐</div>
+                <div class="code-name">#iconchuizhijuzhongduiqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshuipingjuzhongduiqi"></use>
+                </svg>
+                <div class="name">水平居中对齐</div>
+                <div class="code-name">#iconshuipingjuzhongduiqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyouduiqi"></use>
+                </svg>
+                <div class="name">右对齐</div>
+                <div class="code-name">#iconyouduiqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzuoduiqi"></use>
+                </svg>
+                <div class="name">左对齐</div>
+                <div class="code-name">#iconzuoduiqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconduoxuan"></use>
+                </svg>
+                <div class="name">多选</div>
+                <div class="code-name">#iconduoxuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyulan"></use>
+                </svg>
+                <div class="name">预览</div>
+                <div class="code-name">#iconyulan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icontongbu"></use>
+                </svg>
+                <div class="name">同步</div>
+                <div class="code-name">#icontongbu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyinlemusic217"></use>
+                </svg>
+                <div class="name">音乐_music217</div>
+                <div class="code-name">#iconyinlemusic217</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icontupian"></use>
+                </svg>
+                <div class="name">图片</div>
+                <div class="code-name">#icontupian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconkuangjiaframe23"></use>
+                </svg>
+                <div class="name">框架_frame23</div>
+                <div class="code-name">#iconkuangjiaframe23</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconmubiaoyemianliebiao"></use>
+                </svg>
+                <div class="name">目标页面列表</div>
+                <div class="code-name">#iconmubiaoyemianliebiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconredo1"></use>
+                </svg>
+                <div class="name">redo</div>
+                <div class="code-name">#iconredo1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconundo1"></use>
+                </svg>
+                <div class="name">undo</div>
+                <div class="code-name">#iconundo1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconquanping"></use>
+                </svg>
+                <div class="name">全屏</div>
+                <div class="code-name">#iconquanping</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon758bianjiqi_fengexian"></use>
+                </svg>
+                <div class="name">758编辑器_分割线</div>
+                <div class="code-name">#icon758bianjiqi_fengexian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconplus-radio"></use>
+                </svg>
+                <div class="name">单选</div>
+                <div class="code-name">#iconplus-radio</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshurukuangsousuo"></use>
+                </svg>
+                <div class="name">输入框搜索</div>
+                <div class="code-name">#iconshurukuangsousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshipin"></use>
+                </svg>
+                <div class="name">视频</div>
+                <div class="code-name">#iconshipin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshijian"></use>
+                </svg>
+                <div class="name">时间</div>
+                <div class="code-name">#iconshijian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-quanbubiankuang"></use>
+                </svg>
+                <div class="name">62-全部边框</div>
+                <div class="code-name">#icon-quanbubiankuang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconriqishijian"></use>
+                </svg>
+                <div class="name">日期时间</div>
+                <div class="code-name">#iconriqishijian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconditu"></use>
+                </svg>
+                <div class="name">地图</div>
+                <div class="code-name">#iconditu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxingbiao"></use>
+                </svg>
+                <div class="name">星标</div>
+                <div class="code-name">#iconxingbiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshangduiqi"></use>
+                </svg>
+                <div class="name">上对齐</div>
+                <div class="code-name">#iconshangduiqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconwenben"></use>
+                </svg>
+                <div class="name">文本</div>
+                <div class="code-name">#iconwenben</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxiaduiqi"></use>
+                </svg>
+                <div class="name">下对齐</div>
+                <div class="code-name">#iconxiaduiqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconwushuju"></use>
+                </svg>
+                <div class="name">无数据</div>
+                <div class="code-name">#iconwushuju</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconfengexian"></use>
+                </svg>
+                <div class="name">分割线</div>
+                <div class="code-name">#iconfengexian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconcontrol-top"></use>
+                </svg>
+                <div class="name">置顶</div>
+                <div class="code-name">#iconcontrol-top</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconcontrol-bottom"></use>
+                </svg>
+                <div class="name">置底</div>
+                <div class="code-name">#iconcontrol-bottom</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconps"></use>
+                </svg>
+                <div class="name">ps</div>
+                <div class="code-name">#iconps</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconziyuan"></use>
+                </svg>
+                <div class="name">缩放</div>
+                <div class="code-name">#iconziyuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconcolum-height"></use>
+                </svg>
+                <div class="name">colum-height</div>
+                <div class="code-name">#iconcolum-height</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconcolumn-width"></use>
+                </svg>
+                <div class="name">column-width</div>
+                <div class="code-name">#iconcolumn-width</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshanchu"></use>
+                </svg>
+                <div class="name">删除</div>
+                <div class="code-name">#iconshanchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshouyelunbotu"></use>
+                </svg>
+                <div class="name">首页轮播图</div>
+                <div class="code-name">#iconshouyelunbotu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconloading"></use>
+                </svg>
+                <div class="name">loading</div>
+                <div class="code-name">#iconloading</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconfuhao-shuzishurukuang"></use>
+                </svg>
+                <div class="name">符号-数字输入框</div>
+                <div class="code-name">#iconfuhao-shuzishurukuang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconPSD"></use>
+                </svg>
+                <div class="name">PSD</div>
+                <div class="code-name">#iconPSD</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconriqi"></use>
+                </svg>
+                <div class="name">日期</div>
+                <div class="code-name">#iconriqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconiframetianjia"></use>
+                </svg>
+                <div class="name">iframe添加</div>
+                <div class="code-name">#iconiframetianjia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjuxing"></use>
+                </svg>
+                <div class="name">矩形</div>
+                <div class="code-name">#iconjuxing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjuzhongduiqi"></use>
+                </svg>
+                <div class="name">居中对齐</div>
+                <div class="code-name">#iconjuzhongduiqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyouduiqi2"></use>
+                </svg>
+                <div class="name">右对齐</div>
+                <div class="code-name">#iconyouduiqi2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzitijiacu"></use>
+                </svg>
+                <div class="name">字体加粗</div>
+                <div class="code-name">#iconzitijiacu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzuoduiqi1"></use>
+                </svg>
+                <div class="name">左对齐</div>
+                <div class="code-name">#iconzuoduiqi1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconbaocun"></use>
+                </svg>
+                <div class="name">保存</div>
+                <div class="code-name">#iconbaocun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconfabu"></use>
+                </svg>
+                <div class="name">发布</div>
+                <div class="code-name">#iconfabu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxingbiao-copy"></use>
+                </svg>
+                <div class="name">星标</div>
+                <div class="code-name">#iconxingbiao-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconpadding"></use>
+                </svg>
+                <div class="name">padding</div>
+                <div class="code-name">#iconpadding</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconmargin"></use>
+                </svg>
+                <div class="name">margin</div>
+                <div class="code-name">#iconmargin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzitisuoxiao"></use>
+                </svg>
+                <div class="name">字体缩小</div>
+                <div class="code-name">#iconzitisuoxiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzitifangda"></use>
+                </svg>
+                <div class="name">字体放大</div>
+                <div class="code-name">#iconzitifangda</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icontuichu"></use>
+                </svg>
+                <div class="name">退出</div>
+                <div class="code-name">#icontuichu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconfuzhi"></use>
+                </svg>
+                <div class="name">复制</div>
+                <div class="code-name">#iconfuzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxingbiao1"></use>
+                </svg>
+                <div class="name">星标</div>
+                <div class="code-name">#iconxingbiao1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconziyuan1"></use>
+                </svg>
+                <div class="name">上移一层</div>
+                <div class="code-name">#iconziyuan1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxiayiyiceng"></use>
+                </svg>
+                <div class="name">下移一层</div>
+                <div class="code-name">#iconxiayiyiceng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconwenbenkuang"></use>
+                </svg>
+                <div class="name">文本框</div>
+                <div class="code-name">#iconwenbenkuang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconanniuzu"></use>
+                </svg>
+                <div class="name">按钮组</div>
+                <div class="code-name">#iconanniuzu</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

client/common/fonts/iconfont.json

@@ -0,0 +1,450 @@
+{
+  "id": "1451646",
+  "name": "h5可视化工程",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon",
+  "description": "h5可视化工程",
+  "glyphs": [
+    {
+      "icon_id": "123123",
+      "name": "表单",
+      "font_class": "biaodan",
+      "unicode": "e6cc",
+      "unicode_decimal": 59084
+    },
+    {
+      "icon_id": "554388",
+      "name": "页面",
+      "font_class": "iconset0335",
+      "unicode": "e6ea",
+      "unicode_decimal": 59114
+    },
+    {
+      "icon_id": "586924",
+      "name": "iframe",
+      "font_class": "iframe",
+      "unicode": "e74c",
+      "unicode_decimal": 59212
+    },
+    {
+      "icon_id": "657586",
+      "name": "垂直居中对齐",
+      "font_class": "chuizhijuzhongduiqi",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "657590",
+      "name": "水平居中对齐",
+      "font_class": "shuipingjuzhongduiqi",
+      "unicode": "e658",
+      "unicode_decimal": 58968
+    },
+    {
+      "icon_id": "657594",
+      "name": "右对齐",
+      "font_class": "youduiqi",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "657595",
+      "name": "左对齐",
+      "font_class": "zuoduiqi",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "731574",
+      "name": "多选",
+      "font_class": "duoxuan",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "741065",
+      "name": "预览",
+      "font_class": "yulan",
+      "unicode": "e852",
+      "unicode_decimal": 59474
+    },
+    {
+      "icon_id": "765385",
+      "name": "同步",
+      "font_class": "tongbu",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "775346",
+      "name": "音乐_music217",
+      "font_class": "yinlemusic217",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "827922",
+      "name": "图片",
+      "font_class": "tupian",
+      "unicode": "e69f",
+      "unicode_decimal": 59039
+    },
+    {
+      "icon_id": "866281",
+      "name": "框架_frame23",
+      "font_class": "kuangjiaframe23",
+      "unicode": "e946",
+      "unicode_decimal": 59718
+    },
+    {
+      "icon_id": "873505",
+      "name": "目标页面列表",
+      "font_class": "mubiaoyemianliebiao",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "924506",
+      "name": "redo",
+      "font_class": "redo1",
+      "unicode": "e937",
+      "unicode_decimal": 59703
+    },
+    {
+      "icon_id": "924564",
+      "name": "undo",
+      "font_class": "undo1",
+      "unicode": "e966",
+      "unicode_decimal": 59750
+    },
+    {
+      "icon_id": "1010014",
+      "name": "全屏",
+      "font_class": "quanping",
+      "unicode": "e743",
+      "unicode_decimal": 59203
+    },
+    {
+      "icon_id": "1308538",
+      "name": "758编辑器_分割线",
+      "font_class": "758bianjiqi_fengexian",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "1336432",
+      "name": "单选",
+      "font_class": "plus-radio",
+      "unicode": "e735",
+      "unicode_decimal": 59189
+    },
+    {
+      "icon_id": "1400888",
+      "name": "输入框搜索",
+      "font_class": "shurukuangsousuo",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "1617230",
+      "name": "视频",
+      "font_class": "shipin",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "1703544",
+      "name": "时间",
+      "font_class": "shijian",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "1713968",
+      "name": "62-全部边框",
+      "font_class": "-quanbubiankuang",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "1789486",
+      "name": "日期时间",
+      "font_class": "riqishijian",
+      "unicode": "e6c8",
+      "unicode_decimal": 59080
+    },
+    {
+      "icon_id": "1983661",
+      "name": "地图",
+      "font_class": "ditu",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "2237673",
+      "name": "星标",
+      "font_class": "xingbiao",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "2404487",
+      "name": "上对齐",
+      "font_class": "shangduiqi",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "2404491",
+      "name": "文本",
+      "font_class": "wenben",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "2404492",
+      "name": "下对齐",
+      "font_class": "xiaduiqi",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "2423300",
+      "name": "无数据",
+      "font_class": "wushuju",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "2471356",
+      "name": "分割线",
+      "font_class": "fengexian",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "3255777",
+      "name": "置顶",
+      "font_class": "control-top",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "3255778",
+      "name": "置底",
+      "font_class": "control-bottom",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "4318816",
+      "name": "ps",
+      "font_class": "ps",
+      "unicode": "e6c3",
+      "unicode_decimal": 59075
+    },
+    {
+      "icon_id": "4525181",
+      "name": "缩放",
+      "font_class": "ziyuan",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "4767026",
+      "name": "colum-height",
+      "font_class": "colum-height",
+      "unicode": "e7ef",
+      "unicode_decimal": 59375
+    },
+    {
+      "icon_id": "4767092",
+      "name": "column-width",
+      "font_class": "column-width",
+      "unicode": "e7fc",
+      "unicode_decimal": 59388
+    },
+    {
+      "icon_id": "5301925",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "5437734",
+      "name": "首页轮播图",
+      "font_class": "shouyelunbotu",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "5517432",
+      "name": "loading",
+      "font_class": "loading",
+      "unicode": "e962",
+      "unicode_decimal": 59746
+    },
+    {
+      "icon_id": "5881149",
+      "name": "符号-数字输入框",
+      "font_class": "fuhao-shuzishurukuang",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "5916426",
+      "name": "PSD",
+      "font_class": "PSD",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "6010925",
+      "name": "日期",
+      "font_class": "riqi",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "6195943",
+      "name": "iframe添加",
+      "font_class": "iframetianjia",
+      "unicode": "ec7d",
+      "unicode_decimal": 60541
+    },
+    {
+      "icon_id": "6266248",
+      "name": "矩形",
+      "font_class": "juxing",
+      "unicode": "e790",
+      "unicode_decimal": 59280
+    },
+    {
+      "icon_id": "6337460",
+      "name": "居中对齐",
+      "font_class": "juzhongduiqi",
+      "unicode": "ec80",
+      "unicode_decimal": 60544
+    },
+    {
+      "icon_id": "6337463",
+      "name": "右对齐",
+      "font_class": "youduiqi2",
+      "unicode": "ec82",
+      "unicode_decimal": 60546
+    },
+    {
+      "icon_id": "6337466",
+      "name": "字体加粗",
+      "font_class": "zitijiacu",
+      "unicode": "ec83",
+      "unicode_decimal": 60547
+    },
+    {
+      "icon_id": "6337473",
+      "name": "左对齐",
+      "font_class": "zuoduiqi1",
+      "unicode": "ec86",
+      "unicode_decimal": 60550
+    },
+    {
+      "icon_id": "6774845",
+      "name": "保存",
+      "font_class": "baocun",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "6888893",
+      "name": "发布",
+      "font_class": "fabu",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "6953481",
+      "name": "星标",
+      "font_class": "xingbiao-copy",
+      "unicode": "eef3",
+      "unicode_decimal": 61171
+    },
+    {
+      "icon_id": "8019713",
+      "name": "padding",
+      "font_class": "padding",
+      "unicode": "e6d9",
+      "unicode_decimal": 59097
+    },
+    {
+      "icon_id": "8019716",
+      "name": "margin",
+      "font_class": "margin",
+      "unicode": "e6da",
+      "unicode_decimal": 59098
+    },
+    {
+      "icon_id": "8137611",
+      "name": "字体缩小",
+      "font_class": "zitisuoxiao",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "8137645",
+      "name": "字体放大",
+      "font_class": "zitifangda",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "8229473",
+      "name": "退出",
+      "font_class": "tuichu",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "9545594",
+      "name": "复制",
+      "font_class": "fuzhi",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "10031210",
+      "name": "星标",
+      "font_class": "xingbiao1",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "10047317",
+      "name": "上移一层",
+      "font_class": "ziyuan1",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "10352338",
+      "name": "下移一层",
+      "font_class": "xiayiyiceng",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "11121385",
+      "name": "文本框",
+      "font_class": "wenbenkuang",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "11121407",
+      "name": "按钮组",
+      "font_class": "anniuzu",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    }
+  ]
+}