[performance]:压缩图片，优化编辑器图片懒加载 (#59)

* chore: 压缩图片，格式改为webp

* perf: 优化编辑器首次加载速度，图片懒加载

* perf: 固定高度，优化滑动

server/src/apps/surveyManage/template/banner/index.json

@@ -3,171 +3,171 @@
  "key": "default",
  "name": "默认分类",
  "list": [{
- "src": "/imgs/skin/17e06b7604a007e1d3e1453b9ddadc3c.jpg",
+ "src": "/imgs/skin/17e06b7604a007e1d3e1453b9ddadc3c.webp",
  "title": "1"
  }]
 },
  "activity": {
  "key": "activity",
  "name": "节日",
  "list": [{
- "src": "/imgs/skin/Ixx8hqiwwk1660979120801.jpg",
+ "src": "/imgs/skin/Ixx8hqiwwk1660979120801.webp",
  "title": "1"
  }]
  },
  "creative": {
  "key": "creative",
  "name": "创意",
  "list": [{
- "src": "/imgs/skin/PLwNH1rAie1558430219772.jpg",
+ "src": "/imgs/skin/PLwNH1rAie1558430219772.webp",
  "title": "1"
  }, {
- "src": "/imgs/skin/NnXsAOhBNm1558430219312.jpg",
+ "src": "/imgs/skin/NnXsAOhBNm1558430219312.webp",
  "title": "2"
  }, {
- "src": "/imgs/skin/ujpUoWqhw31558430220124.jpg",
+ "src": "/imgs/skin/ujpUoWqhw31558430220124.webp",
  "title": "3"
  }, {
- "src": "/imgs/skin/5OCvbjqJQm1558430220362.jpg",
+ "src": "/imgs/skin/5OCvbjqJQm1558430220362.webp",
  "title": "4"
  }, {
- "src": "/imgs/skin/0k7Jg7In8I1558430221154.jpg",
+ "src": "/imgs/skin/0k7Jg7In8I1558430221154.webp",
  "title": "5"
  }, {
- "src": "/imgs/skin/UH0A8DbTai1558430221033.jpg",
+ "src": "/imgs/skin/UH0A8DbTai1558430221033.webp",
  "title": "6"
  }, {
- "src": "/imgs/skin/FRIzPC6ZtN1558430221344.jpg",
+ "src": "/imgs/skin/FRIzPC6ZtN1558430221344.webp",
  "title": "7"
  }]
  },
  "scenery": {
  "key": "scenery",
  "name": "风景",
  "list": [{
- "src": "/imgs/skin/SyiLRcukyE1558430525760.jpg",
+ "src": "/imgs/skin/SyiLRcukyE1558430525760.webp",
  "title": "1"
  }, {
- "src": "/imgs/skin/sqYig4AcWr1558430525663.jpg",
+ "src": "/imgs/skin/sqYig4AcWr1558430525663.webp",
  "title": "2"
  }, {
- "src": "/imgs/skin/ElNeqJT2I21558430526165.jpg",
+ "src": "/imgs/skin/ElNeqJT2I21558430526165.webp",
  "title": "3"
  }, {
- "src": "/imgs/skin/CxQkSU6AY21558430526163.jpg",
+ "src": "/imgs/skin/CxQkSU6AY21558430526163.webp",
  "title": "4"
  }, {
- "src": "/imgs/skin/VTUwbp6vY61558430527320.jpg",
+ "src": "/imgs/skin/VTUwbp6vY61558430527320.webp",
  "title": "5"
  }, {
- "src": "/imgs/skin/SHs0K703Yn1558430527218.jpg",
+ "src": "/imgs/skin/SHs0K703Yn1558430527218.webp",
  "title": "6"
  }, {
- "src": "/imgs/skin/oVTedX9V4s1558430527671.jpg",
+ "src": "/imgs/skin/oVTedX9V4s1558430527671.webp",
  "title": "7"
  }]
  },
  "transportation": {
  "key": "transportation",
  "name": "交通",
  "list": [{
- "src": "/imgs/skin/XYKqJZuMig1558430904735.jpg",
+ "src": "/imgs/skin/XYKqJZuMig1558430904735.webp",
  "title": "1"
  }, {
- "src": "/imgs/skin/GnPatsr48Z1558430904680.jpg",
+ "src": "/imgs/skin/GnPatsr48Z1558430904680.webp",
  "title": "2"
  }, {
- "src": "/imgs/skin/UqIvVvEXAK1558430905204.jpg",
+ "src": "/imgs/skin/UqIvVvEXAK1558430905204.webp",
  "title": "3"
  }, {
- "src": "/imgs/skin/PUssufh5uI1558430905104.jpg",
+ "src": "/imgs/skin/PUssufh5uI1558430905104.webp",
  "title": "4"
  }, {
- "src": "/imgs/skin/O409pRTDlW1558430905738.jpg",
+ "src": "/imgs/skin/O409pRTDlW1558430905738.webp",
  "title": "5"
  }, {
- "src": "/imgs/skin/A9FzlbYXqI1558430905739.jpg",
+ "src": "/imgs/skin/A9FzlbYXqI1558430905739.webp",
  "title": "6"
  }, {
- "src": "/imgs/skin/HN9YGctDeF1558430906686.jpg",
+ "src": "/imgs/skin/HN9YGctDeF1558430906686.webp",
  "title": "7"
  }]
  },
  "delicacy": {
  "key": "delicacy",
  "name": "美食",
  "list": [{
- "src": "/imgs/skin/lE6PSclCcU1558434536703.jpg",
+ "src": "/imgs/skin/lE6PSclCcU1558434536703.webp",
  "title": "1"
  }, {
- "src": "/imgs/skin/OnSdbm7u6n1558434536641.jpg",
+ "src": "/imgs/skin/OnSdbm7u6n1558434536641.webp",
  "title": "2"
  }, {
- "src": "/imgs/skin/N9Z2ZuyO731558434537314.jpg",
+ "src": "/imgs/skin/N9Z2ZuyO731558434537314.webp",
  "title": "3"
  }, {
- "src": "/imgs/skin/YP9PoW8pX51558434537301.jpg",
+ "src": "/imgs/skin/YP9PoW8pX51558434537301.webp",
  "title": "4"
  }, {
- "src": "/imgs/skin/zUtDv378bg1558434538351.jpg",
+ "src": "/imgs/skin/zUtDv378bg1558434538351.webp",
  "title": "5"
  }, {
- "src": "/imgs/skin/gY1JljCow21558434538303.jpg",
+ "src": "/imgs/skin/gY1JljCow21558434538303.webp",
  "title": "6"
  }, {
- "src": "/imgs/skin/oOjHPbABdd1558434538864.jpg",
+ "src": "/imgs/skin/oOjHPbABdd1558434538864.webp",
  "title": "7"
  }]
  },
  "business": {
  "key": "business",
  "name": "商务",
  "list": [{
- "src": "/imgs/skin/3ABKqvDaVn1558514860472.jpg",
+ "src": "/imgs/skin/3ABKqvDaVn1558514860472.webp",
  "title": "1"
  }, {
- "src": "/imgs/skin/OewuaQmWoq1558514860285.jpg",
+ "src": "/imgs/skin/OewuaQmWoq1558514860285.webp",
  "title": "2"
  }, {
- "src": "/imgs/skin/HuVqqtbFjs1558514860570.jpg",
+ "src": "/imgs/skin/HuVqqtbFjs1558514860570.webp",
  "title": "3"
  }, {
- "src": "/imgs/skin/icSlqsr0uZ1558514860875.jpg",
+ "src": "/imgs/skin/icSlqsr0uZ1558514860875.webp",
  "title": "4"
  }, {
- "src": "/imgs/skin/Qu9rg33wmq1558514861015.jpg",
+ "src": "/imgs/skin/Qu9rg33wmq1558514861015.webp",
  "title": "5"
  }, {
- "src": "/imgs/skin/145gBCRtNP1558514861211.jpg",
+ "src": "/imgs/skin/145gBCRtNP1558514861211.webp",
  "title": "6"
  }, {
- "src": "/imgs/skin/ykWLFV0QWj1558514861444.jpg",
+ "src": "/imgs/skin/ykWLFV0QWj1558514861444.webp",
  "title": "7"
  }]
  },
  "campus": {
  "key": "campus",
  "name": "校园",
  "list": [{
- "src": "/imgs/skin/4aWi5JxG471558514268698.jpg",
+ "src": "/imgs/skin/4aWi5JxG471558514268698.webp",
  "title": "1"
  }, {
- "src": "/imgs/skin/j8C2OBP7WK1558514268563.jpg",
+ "src": "/imgs/skin/j8C2OBP7WK1558514268563.webp",
  "title": "2"
  }, {
- "src": "/imgs/skin/q3uJoQhYsR1558514268877.jpg",
+ "src": "/imgs/skin/q3uJoQhYsR1558514268877.webp",
  "title": "3"
  }, {
- "src": "/imgs/skin/W5PPlNsmsr1558514269088.jpg",
+ "src": "/imgs/skin/W5PPlNsmsr1558514269088.webp",
  "title": "4"
  }, {
- "src": "/imgs/skin/6xQk1IAmKt1558514269874.jpg",
+ "src": "/imgs/skin/6xQk1IAmKt1558514269874.webp",
  "title": "5"
  }, {
- "src": "/imgs/skin/XQE2iyF0rj1558514269935.jpg",
+ "src": "/imgs/skin/XQE2iyF0rj1558514269935.webp",
  "title": "6"
  }, {
- "src": "/imgs/skin/POHlQiSwPR1558514270379.jpg",
+ "src": "/imgs/skin/POHlQiSwPR1558514270379.webp",
  "title": "7"
  }]
  }

web/src/management/components/logo.vue

@@ -1,6 +1,6 @@
 <template>
  <div class="navbar-main-logo" @click="toHomePage">
- <img src="/imgs/s-logo.jpg" />
+ <img src="/imgs/s-logo.webp" />
  </div>
 </template>
 <script>

web/src/management/config/questionMenuConfig.js

@@ -1,50 +1,50 @@
 const menuItems = {
  text: {
  type: 'text',
- snapshot: '/imgs/question-type-snapshot/iL84te6xxU1657702189333.png',
+ snapshot: '/imgs/question-type-snapshot/iL84te6xxU1657702189333.webp',
  path: 'InputModule',
  icon: 'tixing-danhangshuru',
  title: '单行输入框',
  },
  textarea: {
  type: 'textarea',
- snapshot: '/imgs/question-type-snapshot/11iAo3ca0u1657702225416.png',
+ snapshot: '/imgs/question-type-snapshot/11iAo3ca0u1657702225416.webp',
  path: 'TextareaModule',
  icon: 'tixing-duohangshuru',
  title: '多行输入框',
  },
  radio: {
  type: 'radio',
- snapshot: '/imgs/question-type-snapshot/TgeRDfURJZ1657702220602.png',
+ snapshot: '/imgs/question-type-snapshot/TgeRDfURJZ1657702220602.webp',
  icon: 'tixing-danxuan',
  path: 'RadioModule',
  title: '单项选择',
  },
  checkbox: {
  type: 'checkbox',
  path: 'CheckboxModule',
- snapshot: '/imgs/question-type-snapshot/Md2YmzBBpV1657702223744.png',
+ snapshot: '/imgs/question-type-snapshot/Md2YmzBBpV1657702223744.webp',
  icon: 'tixing-duoxuan',
  title: '多项选择',
  },
  'binary-choice': {
  type: 'binary-choice',
- snapshot: '/imgs/question-type-snapshot/blW8U1ckzd1657702223023.png',
+ snapshot: '/imgs/question-type-snapshot/blW8U1ckzd1657702223023.webp',
  path: 'BinaryChoiceModule',
  icon: 'tixing-panduanti',
  title: '判断题',
  },
  'radio-star': {
  type: 'radio-star',
- snapshot: '/imgs/question-type-snapshot/7CU6tn4XqT1657702221208.png',
+ snapshot: '/imgs/question-type-snapshot/7CU6tn4XqT1657702221208.webp',
  path: 'StarModule',
  icon: 'tixing-pingfen',
  title: '评分',
  },
  vote: {
  type: 'vote',
  path: 'VoteModule',
- snapshot: '/imgs/question-type-snapshot/nGTscsZlwn1657702222857.png',
+ snapshot: '/imgs/question-type-snapshot/nGTscsZlwn1657702222857.webp',
  icon: 'tixing-toupiao',
  title: '投票',
  },

web/src/management/pages/analysis/index.vue

@@ -54,7 +54,7 @@ export default {
  noDataConfig: {
  title: '暂无数据',
  desc: '您的问卷当前还没有数据，快去回收问卷吧！',
- img: '/imgs/icons/analysis-empty.png',
+ img: '/imgs/icons/analysis-empty.webp',
  },
  currentPage: 1,
  isShowOriginData: false,

web/src/management/pages/create/components/navHeader.vue

@@ -19,7 +19,7 @@ export default {
  name: 'NavHeader',
  data() {
  return {
- img: '/imgs/s-logo.jpg',
+ img: '/imgs/s-logo.webp',
  };
  },
  methods: {

web/src/management/pages/edit/modules/questionModule/components/bannerList.vue

@@ -15,6 +15,7 @@
  <img
  class="banner-img"
  :src="banner.src"
+ loading="lazy"
  @click="changeBanner(banner.src)"
  />
  </div>
@@ -51,6 +52,7 @@ export default {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
+ min-height: 111px;
  cursor: pointer;
  transition: all 0.2s;
  &:hover {

web/src/management/pages/edit/modules/questionModule/setterPanel.vue

@@ -1,7 +1,7 @@
 <template>
  <div class="setter-wrapper">
  <div class="no-select-question" v-if="currentEditOne === null">
- <img src="/imgs/icons/unselected.png" />
+ <img src="/imgs/icons/unselected.webp" />
  <h4 class="tipFont">选中题型可以编辑</h4>
  <span class="tip">来！试试看～</span>
  </div>

web/src/management/pages/edit/modules/settingModule/components/overTime.vue

@@ -1,6 +1,6 @@
 <template>
  <div class="over-time">
- <img class="over-img" src="/imgs/icons/overtime.png" />
+ <img class="over-img" src="/imgs/icons/overtime.webp" />
  <p class="title-msg" v-safe-html="resultText"></p>
  </div>
 </template>

web/src/management/pages/edit/modules/settingModule/components/success.vue

@@ -2,7 +2,7 @@
  <div class="suc-page">
  <div class="suc-content">
  <div class="title-box">
- <img src="/imgs/icons/success.png" class="success-img" />
+ <img src="/imgs/icons/success.webp" class="success-img" />
  <div class="title-msg" v-safe-html="successText"></div>
  </div>
  <div class="bottom-btn"></div>

web/src/management/pages/edit/modules/settingModule/resultCatalog.vue

@@ -25,12 +25,12 @@ export default {
  {
  type: EDIT_STATUS_MAP.SUCCESS,
  title: '提交成功',
- previewImg: '/imgs/icons/success.png',
+ previewImg: '/imgs/icons/success.webp',
  },
  {
  type: EDIT_STATUS_MAP.OVERTIME,
  title: '问卷过期',
- previewImg: '/imgs/icons/overtime.png',
+ previewImg: '/imgs/icons/overtime.webp',
  },
  ],
  };

web/src/management/pages/list/config/index.js

@@ -56,13 +56,13 @@ export const fieldConfig = {
 export const noListDataConfig = {
  title: '您还没有创建问卷',
  desc: '赶快点击右上角立即创建问卷吧！',
- img: '/imgs/icons/list-empty.png',
+ img: '/imgs/icons/list-empty.webp',
 };
 
 export const noSearchDataConfig = {
  title: '没有满足该查询条件的问卷哦',
  desc: '可以更换条件查询试试',
- img: '/imgs/icons/list-empty.png',
+ img: '/imgs/icons/list-empty.webp',
 };
 
 export const statusMaps = {

web/src/management/pages/list/index.vue

@@ -1,10 +1,10 @@
 <template>
  <div class="question-list-root">
  <div class="login-status">
- <img class="logo-img" src="/imgs/Logo.jpg" alt="logo" />
+ <img class="logo-img" src="/imgs/Logo.webp" alt="logo" />
  <div class="login-info">
  您好，{{ userInfo?.username }}
- <img class="login-info-img" src="/imgs/avatar.png" />
+ <img class="login-info-img" src="/imgs/avatar.webp" />
  <span class="logout" @click="handleLogout">退出</span>
  </div>
  </div>