feat: 笔记

2024-06-27 11:19:49 +08:00 · 2024-06-27 11:19:49 +08:00 · d8dc41da44
commit d8dc41da44
42 changed files with 2219 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,8 @@
+# 开发环境配置
+ENV = 'development'
+
+# 开发环境
+VUE_APP_BASE_API = '/dev-api'
+
+# 开发环境websocket地址
+VUE_APP_SOCKET = 'ws://localhost:8068/websocket'
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,8 @@
+# 生产环境配置
+ENV = 'production'
+
+# 生产环境
+VUE_APP_BASE_API = '/prod-api'
+
+# 生产环境websocket地址
+VUE_APP_SOCKET = 'wss://pnkx.top/websocket/websocket'
--- a/.env.staging
+++ b/.env.staging
@ -0,0 +1,7 @@
+NODE_ENV = production
+
+# 测试环境配置
+ENV = 'staging'
+
+# 若依管理系统/测试环境
+VUE_APP_BASE_API = '/stage-api'
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,5 @@
+# 聊天室
+
+## 预览
+![输入图片说明](src/assets/images/image.png)
+![输入图片说明](src/assets/images/image1.png)
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,43 @@
+{
+  "name": "code",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "start": "node index.js",
+    "server": "nodemon index.js --ignore client"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.13.2",
+    "es6-promise": "^4.2.8",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^8.0.0",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
+    "quill": "1.3.7",
+    "vue-quill-editor": "^3.0.6",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "1.32.0",
+    "sass-loader": "10.1.0",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>chat</title>
+    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,37 @@
+<template>
+  <div id="app">
+    <chat/>
+  </div>
+</template>
+
+<script>
+import Chat from '@/components/Note/index.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Chat
+  }
+}
+</script>
+
+<style lang="scss">
+  html, body{
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-image: url('./assets/main-bg.png');
+    background-size: 100% 100%;
+    background-position: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #app {
+    width: 60vw;
+    background-color: #FFF;
+    padding: 1rem;
+  }
+</style>
--- a/src/api/index.js
+++ b/src/api/index.js
@ -0,0 +1,132 @@
+import request from '@/utils/request'
+
+// 查询笔记列表
+export function listNote(query) {
+  return request({
+    url: '/note/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询笔记详细
+export function getNote(id) {
+  return request({
+    url: '/note/' + id,
+    method: 'get'
+  })
+}
+
+// 查询笔记详细（白名单）
+export function getNoteWhite(id) {
+  return request({
+    url: '/customer/note/' + id,
+    method: 'get'
+  })
+}
+
+// 新增笔记
+export function addNote(data) {
+  return request({
+    url: '/note',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改笔记
+export function updateNote(data) {
+  return request({
+    url: '/note',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除笔记
+export function delNote(id) {
+  return request({
+    url: '/note/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出笔记
+export function exportNote(query) {
+  return request({
+    url: '/note/export',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询笔记文件夹列表
+export function listFolder(query) {
+  return request({
+    url: '/note/folder/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询笔记文件夹树形列表
+export function treeList(query) {
+  return request({
+    url: '/note/folder/treeList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询笔记文件夹详细
+export function getFolder(id) {
+  return request({
+    url: '/note/folder/' + id,
+    method: 'get'
+  })
+}
+
+// 新增笔记文件夹
+export function addFolder(data) {
+  return request({
+    url: '/note/folder',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改笔记文件夹
+export function updateFolder(data) {
+  return request({
+    url: '/note/folder',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除笔记文件夹
+export function delFolder(id) {
+  return request({
+    url: '/note/folder/' + id,
+    method: 'delete'
+  })
+}
+
+
+// 根据字典类型查询字典数据信息
+export function getDicts (dictType) {
+  return request({
+    url: '/client/dictType/' + dictType,
+    method: 'get'
+  })
+}
+
+// 获取用户详细信息
+export function getInfo () {
+  return request({
+    url: '/getInfo',
+    method: 'get'
+  })
+}
--- a/src/assets/icons/index.js
+++ b/src/assets/icons/index.js
@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)
--- a/src/assets/icons/svg/back.svg
+++ b/src/assets/icons/svg/back.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1640915624153" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7420" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="240"><defs><style type="text/css"></style></defs><path d="M932.7 417.5c-17-38-41.1-72-71.9-101.3-30.5-29-65.9-51.7-105.2-67.6C715 232.3 672.1 224 627.9 224h-139V101.2c0-27.9-30.4-45.2-54.4-31L116.8 257.9c-23.6 14-23.6 48.1 0 62.1l317.7 187.7c24 14.2 54.4-3.1 54.4-31V364h139c51.5 0 100 19.1 136.5 53.8 35.5 33.8 55.1 78.1 55.1 124.9v98.1c0 46.8-19.6 91.2-55.1 124.9-36.5 34.7-85 53.8-136.5 53.8H397.1c-51.5 0-100-19.1-136.5-53.8-35.5-33.8-55.1-78.1-55.1-124.9 0-38.7-31.3-70-70-70s-70 31.3-70 70c0 43.3 9 85.4 26.7 125.1 17 38 41.1 72 71.9 101.3 30.5 29 65.9 51.7 105.2 67.6 40.6 16.4 83.6 24.7 127.8 24.7h230.7c44.2 0 87.2-8.3 127.8-24.7 39.3-15.9 74.7-38.6 105.2-67.6 30.7-29.2 54.9-63.3 71.9-101.3 17.7-39.7 26.7-81.8 26.7-125.1v-98.1c0-43.4-9-85.5-26.7-125.2z" p-id="7421" fill="#8a8a8a"></path></svg>
--- a/src/assets/icons/svg/文件夹.svg
+++ b/src/assets/icons/svg/文件夹.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1640597797311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7514"
+     xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="240">
+    <defs>
+        <style type="text/css"></style>
+    </defs>
+    <path d="M921.6 766.165333l-29.866667 149.333334H37.12l35.84-149.333334z" fill="#2189FF" p-id="7515"></path>
+    <path
+        d="M33.152 947.456a31.914667 31.914667 0 0 1-22.741333-14.08v-0.213333l-0.256-0.426667v-0.597333a31.914667 31.914667 0 0 1-4.522667-17.066667V156.032a79.573333 79.573333 0 0 1 79.488-79.488H393.813333a32 32 0 0 1 24.576 11.52l109.141334 130.944h305.578666a79.616 79.616 0 0 1 79.488 79.488v110.464h74.837334a32 32 0 0 1 24.746666 11.690667 32 32 0 0 1 6.656 26.581333L923.306667 921.941333a32.042667 32.042667 0 0 1-31.402667 25.6H37.077333a32.64 32.64 0 0 1-3.925333-0.085333z m832.512-63.744l82.176-410.88H180.778667l-102.741334 410.88zM69.12 155.861333v489.898667l51.2-212.48a32.085333 32.085333 0 0 1 31.146667-24.490667h696.704V298.325333a15.488 15.488 0 0 0-15.488-15.488h-320.554667a32 32 0 0 1-24.576-11.52L378.368 140.373333H84.693333a15.488 15.488 0 0 0-15.616 15.488z"
+        fill="#4D4D4D" p-id="7516"></path>
+</svg>
--- a/src/assets/icons/svg/编辑02.svg
+++ b/src/assets/icons/svg/编辑02.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1640597828992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8428"
+     xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="240">
+    <defs>
+        <style type="text/css"></style>
+    </defs>
+    <path d="M242.901333 567.637333l216.021334 216.021334-55.466667 55.466666-230.4 10.837334 14.122667-226.56z"
+          fill="#1574FF" p-id="8429"></path>
+    <path
+        d="M770.304 36.096a100.096 100.096 0 0 1 70.272 29.141333l120.576 120.576a99.626667 99.626667 0 0 1 0 140.8L425.941333 861.610667a32 32 0 0 1-21.077333 9.344l-230.4 11.136a32 32 0 0 1-33.493333-34.133334l14.165333-226.773333a32 32 0 0 1 9.301333-20.650667l535.509334-535.552a98.944 98.944 0 0 1 70.357333-28.885333z m-380.885333 771.541333l526.464-526.464a35.541333 35.541333 0 0 0 0-50.133333l-120.576-120.576a35.456 35.456 0 0 0-50.133334 0l-526.933333 526.976-11.178667 179.2z"
+        fill="#4D4D4D" p-id="8430"></path>
+    <path
+        d="M981.333333 987.904h-938.666666a32 32 0 0 1-32-32 32 32 0 0 1 32-32h938.666666a32 32 0 0 1 32 32 32 32 0 0 1-32 32z"
+        fill="#4D4D4D" p-id="8431"></path>
+    <path d="M727.381333 299.008m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#474A54" p-id="8432"></path>
+</svg>
--- a/src/assets/icons/svg/验证码.svg
+++ b/src/assets/icons/svg/验证码.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1640597873120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9199"
+     xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="240">
+    <defs>
+        <style type="text/css"></style>
+    </defs>
+    <path
+        d="M784.426667 825.429333a581.077333 581.077333 0 0 1-66.986667 55.893334 660.096 660.096 0 0 1-195.84 96 26.325333 26.325333 0 0 1-16.213333 0 649.472 649.472 0 0 1-197.12-95.146667 564.906667 564.906667 0 0 1-68.693334-56.746667 930.56 930.56 0 0 0 258.133334-93.44 31.786667 31.786667 0 0 1 32 0.426667 896.469333 896.469333 0 0 0 254.72 93.013333z"
+        fill="#2189FF" p-id="9200"></path>
+    <path
+        d="M513.194667 1010.602667a63.488 63.488 0 0 1-16.085334-2.048A697.344 697.344 0 0 1 289.493333 908.8a472.149333 472.149333 0 0 1-213.888-395.477333V185.258667a64.384 64.384 0 0 1 64-64.469334 819.2 819.2 0 0 0 341.717334-98.986666 64 64 0 0 1 64 0.298666 792.789333 792.789333 0 0 0 338.901333 98.688 64.384 64.384 0 0 1 64 64.469334v327.850666a473.002667 473.002667 0 0 1-212.437333 394.581334 703.146667 703.146667 0 0 1-206.421334 100.821333h-0.341333a65.152 65.152 0 0 1-15.829333 2.090667z m0-64h0.341333a632.96 632.96 0 0 0 185.301333-90.965334 411.392 411.392 0 0 0 185.685334-342.528V185.258667c0-0.469333-0.213333-0.512-0.341334-0.512a855.552 855.552 0 0 1-371.2-107.392 882.090667 882.090667 0 0 1-373.333333 107.434666 0.64 0.64 0 0 0 0 0.469334v327.893333a410.581333 410.581333 0 0 0 186.922667 343.253333 640 640 0 0 0 186.496 90.197334z"
+        fill="#4D4D4D" p-id="9201"></path>
+    <path
+        d="M466.090667 682.666667a31.914667 31.914667 0 0 1-22.613334-9.386667l-138.88-138.666667A32 32 0 1 1 349.866667 489.344l116.224 116.224 255.104-255.104a32 32 0 0 1 45.269333 45.269333l-277.717333 277.717334a31.914667 31.914667 0 0 1-22.656 9.216z"
+        fill="#4D4D4D" p-id="9202"></path>
+</svg>
--- a/src/assets/icons/svgo.yml
+++ b/src/assets/icons/svgo.yml
@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+    # - name
+    #
+    # or:
+    # - name: false
+    # - name: true
+    #
+    # or:
+    # - name:
+    #     param1: 1
+    #     param2: 2
+
+    -   removeAttrs:
+            attrs:
+                - 'fill'
+                - 'fill-rule'
--- a/src/assets/images/emoji/emoji.png
+++ b/src/assets/images/emoji/emoji.png
--- a/src/assets/images/image.png
+++ b/src/assets/images/image.png
--- a/src/assets/images/image1.png
+++ b/src/assets/images/image1.png
--- a/src/assets/js/common.js
+++ b/src/assets/js/common.js
@ -0,0 +1,30 @@
+/**
+ * 颜色数组
+ */
+export const colorArray = [
+  '#5A8DEE',
+  '#CD594B',
+  '#F8CE5E',
+  '#4B9E65'
+]
+
+/**
+ * 博客url
+ * @type {string}
+ */
+export const BLOG_URL = 'https://pnkx.top/'
+
+/**
+ * 图片的文件类型
+ */
+export const IMAGE_TYPE = ['image/jpeg', '.jpg', '.jpeg', '.gif', '.bmp', '.webp']
+
+/**
+ * websocket消息类型
+ * @type {{}}
+ */
+export const WEBSOCKET_MESSAGE_TYPE = {
+  LOGIN: 'login',
+  LOG_OUT: 'log_out',
+  CHAT_MESSAGE: 'chat_message'
+}
--- a/src/assets/main-bg.png
+++ b/src/assets/main-bg.png
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@ -0,0 +1,216 @@
+<template>
+    <div class="editor" ref="editor" :style="styles"></div>
+</template>
+
+<script>
+import Quill from 'quill'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+
+export default {
+    name: 'Editor',
+    props: {
+        /* 编辑器的内容 */
+        value: {
+            type: String,
+            default: ''
+        },
+        /* 高度 */
+        height: {
+            type: Number | String,
+            default: null
+        },
+        /* 最小高度 */
+        minHeight: {
+            type: Number,
+            default: null
+        }
+    },
+    data() {
+        return {
+            Quill: null,
+            currentValue: '',
+            options: {
+                theme: 'snow',
+                bounds: document.body,
+                debug: 'warn',
+                modules: {
+                    // 工具栏配置
+                    toolbar: [
+                        ['bold', 'italic', 'underline', 'strike'],       // 加粗 斜体 下划线 删除线
+                        ['blockquote', 'code-block'],                    // 引用  代码块
+                        [{ list: 'ordered' }, { list: 'bullet' }],       // 有序、无序列表
+                        [{ script: 'sub' }, { script: 'super' }],        // 上标、下标
+                        [{ indent: '-1' }, { indent: '+1' }],            // 缩进
+                        [{ size: ['small', false, 'large', 'huge'] }],   // 字体大小
+                        [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
+                        [{ font: [] }],
+                        [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
+                        [{ align: [] }],                                 // 对齐方式
+                        ['clean'],                                       // 清除文本格式
+                        [{ direction: 'rtl' }],                        // 文本方向
+                        ['link', 'image', 'video']                       // 链接、图片、视频
+                    ]
+                },
+                placeholder: '请输入内容',
+                readOnly: false
+            }
+        }
+    },
+    computed: {
+        styles() {
+            let style = {}
+            if (this.minHeight) {
+                style.minHeight = `${this.minHeight}px`
+            }
+            if (this.height) {
+                if (!isNaN(this.height)) {
+                    style.height = `${this.height}px`
+                } else {
+                    style.height = this.height
+                }
+            }
+            return style
+        }
+    },
+    watch: {
+        value: {
+            handler(val) {
+                if (val !== this.currentValue) {
+                    this.currentValue = val === null ? '' : val
+                    if (this.Quill) {
+                        this.Quill.pasteHTML(this.currentValue)
+                    }
+                }
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        this.init()
+    },
+    beforeDestroy() {
+        this.Quill = null
+    },
+    methods: {
+        init() {
+            const editor = this.$refs.editor
+            this.Quill = new Quill(editor, this.options)
+            this.Quill.pasteHTML(this.currentValue)
+            this.Quill.on('text-change', (delta, oldDelta, source) => {
+                const html = this.$refs.editor.children[0].innerHTML
+                const text = this.Quill.getText()
+                const quill = this.Quill
+                this.currentValue = html
+                this.$emit('input', html)
+                this.$emit('on-change', { html, text, quill })
+            })
+            this.Quill.on('text-change', (delta, oldDelta, source) => {
+                this.$emit('on-text-change', delta, oldDelta, source)
+            })
+            this.Quill.on('selection-change', (range, oldRange, source) => {
+                this.$emit('on-selection-change', range, oldRange, source)
+            })
+            this.Quill.on('editor-change', (eventName, ...args) => {
+                this.$emit('on-editor-change', eventName, ...args)
+            })
+        }
+    }
+}
+</script>
+
+<style>
+.editor, .ql-toolbar {
+    white-space: pre-wrap !important;
+    line-height: normal !important;
+}
+
+.quill-img {
+    display: none;
+}
+
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+    content: "请输入链接地址:";
+}
+
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+    border-right: 0px;
+    content: "保存";
+    padding-right: 0px;
+}
+
+.ql-snow .ql-tooltip[data-mode="video"]::before {
+    content: "请输入视频地址:";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+    content: "14px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+    content: "10px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+    content: "18px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+    content: "32px";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+    content: "文本";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+    content: "标题1";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+    content: "标题2";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+    content: "标题3";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+    content: "标题4";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+    content: "标题5";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+    content: "标题6";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+    content: "标准字体";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+    content: "衬线字体";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+    content: "等宽字体";
+}
+</style>
--- a/src/components/Note/index.vue
+++ b/src/components/Note/index.vue
@ -0,0 +1,900 @@
+<!--
+ * @File: index
+ * @Author: PHY
+ * @Date: 2021/12/30 17:43
+ * @Description: 笔记
+-->
+<template>
+  <div class="note">
+    <div class="catalogue">
+      <div class="search">
+        <svg-icon @click="handleBack" icon-class="back"/>
+        <el-input v-model="searchCode" placeholder="搜索···" @input="handleSearch"></el-input>
+      </div>
+      <div class="el-breadcrumb">
+        <div class="el-breadcrumb-item" v-for="(item, index) in params">
+          <i class="el-icon-d-arrow-right"/>
+          <div class="menu-name" @click="handleBreadcrumbItem(index)">{{ item.breadcrumb }}</div>
+        </div>
+      </div>
+      <div class="list" v-loading="listLoading" @contextmenu.prevent.stop="handleEditNote($event, 'empty')">
+        <div class="no-data" v-if="list.length < 1">没有内容</div>
+        <div class="one"
+             v-else
+             :class="one.id === active.id ? 'one-active' : ''"
+             v-for="one in list"
+             @contextmenu.prevent.stop="handleEditNote($event, one)"
+             :key="one.id"
+        >
+          <div class="folder select-none" :draggable="true" @dragstart="drag($event, one)" @dragover.prevent
+               @drop="drop($event, one)" v-if="one.type === 'folder'" @click="handleOpen(one, false)"
+               @dblclick="handleOpen(one, true)"
+          >
+            <div class="name">
+              <svg-icon icon-class="文件夹"/>
+              {{ one.name }}
+            </div>
+            <div class="password">
+              <svg-icon class="password" v-if="one.password" icon-class="验证码"/>
+            </div>
+          </div>
+          <div class="note select-none" :draggable="true" @dragstart="drag($event,one)"
+               v-if="one.type === 'note'" @click="handleOpen(one)"
+          >
+            <div class="name">
+              <svg-icon icon-class="编辑02"/>
+              {{ one.title }}
+            </div>
+            <div class="content">{{ one.content && one.content.replace(regex, '') }}</div>
+            <div class="create-time">{{ one.updateTime || one.createTime }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="preview" v-loading="loading">
+      <div class="note-edit">
+        <el-empty description="无预览" v-if="active.type === 'folder'"></el-empty>
+        <div class="note-title" v-else>
+          <el-input v-model="note.title" placeholder="请输入笔记标题"/>
+          <el-input v-model="note.order" placeholder="请输入排序"/>
+        </div>
+        <div class="note-content" v-if="active.type === 'note' && editor">
+          <editor :key="note.id" ref="editor" height="calc(100vh - 215px)" v-model="note.richText"></editor>
+        </div>
+      </div>
+    </div>
+    <!--新增文件夹-->
+    <el-dialog
+      :title="folderForm.id ? '编辑文件夹' : '新增文件夹'"
+      :visible.sync="folderVisible"
+      min-width="30%"
+    >
+      <el-form ref="folderForm" :rules="folderRules" :model="folderForm" label-width="8rem">
+        <el-form-item label="文件夹名称" prop="name">
+          <el-input autofocus="autofocus" v-model="folderForm.name" placeholder="请输入文件夹名称"></el-input>
+        </el-form-item>
+        <el-form-item label="上级文件夹" prop="parentId">
+          <el-cascader
+            v-model="folderForm.parentId"
+            :options="treeList"
+            :show-all-levels="false"
+            :props="props"
+            placeholder="请选择上级文件夹"
+          ></el-cascader>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input v-model="folderForm.order" placeholder="请输入排序" type="number"></el-input>
+        </el-form-item>
+        <el-form-item label="阅读密码">
+          <el-input type="password" v-model="folderForm.password" placeholder="请输入阅读密码"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+            <el-button @click="folderVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleAddFolder" :loading="folderSaveLoading">确 定</el-button>
+          </span>
+    </el-dialog>
+    <!--移动笔记弹框-->
+    <el-dialog
+      title="移动到"
+      :visible.sync="moveNoteVisible"
+      min-width="30%"
+    >
+      <div class="object" style="margin-bottom: 1rem;">
+        <div class="name">
+          <svg-icon v-if="source.type === 'folder'" icon-class="文件夹"/>
+          <svg-icon v-if="source.type === 'note'" icon-class="编辑02"/>
+          {{ source.name || source.title }}
+        </div>
+        <div class="password" style="width: 2rem;">
+          <svg-icon class="password" v-if="source.password" icon-class="验证码"/>
+        </div>
+      </div>
+      <el-cascader-panel :options="treeList"
+                         @change="handleChangMoveTarget"
+                         :props="props"
+      />
+      <span slot="footer" class="dialog-footer">
+            <el-button @click="moveNoteVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleMoveNote" :loading="moveNoteLoading">确 定</el-button>
+          </span>
+    </el-dialog>
+    <!--右键文件夹或笔记小窗口-->
+    <div class="right-click" :style="rightStyle" v-if="rightFlag" v-clickOutSide="handleCloseEditNote">
+      <div class="right-function"
+           v-for="item in rightFunctions"
+           :key="item.id"
+           @click="handleRightClick(item)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  addFolder,
+  addNote,
+  delFolder,
+  delNote,
+  getFolder,
+  getNote,
+  listFolder,
+  treeList,
+  updateFolder,
+  updateNote
+} from '@/api'
+
+import {getLocal, setLocal} from '@/utils/local'
+import Editor from "@/components/Editor/index.vue";
+import {debounce} from "@/utils/utils";
+
+export default {
+  name: 'Note',
+  components: {
+    Editor
+  },
+  data() {
+    return {
+      // 右键窗口样式
+      rightStyle: '',
+      // 右键窗口标志
+      rightFlag: false,
+      // 右键功能
+      rightFunctions: [],
+      // 移动笔记弹框标志
+      moveNoteVisible: false,
+      // 移动笔记loading标志
+      moveNoteLoading: false,
+      // 来源
+      source: {},
+      // 目标
+      target: undefined,
+      // 文件列表加载标志
+      listLoading: false,
+      // 文件夹弹框标志
+      folderVisible: false,
+      // 文件夹保存按钮
+      folderSaveLoading: false,
+      // 笔记获取标志
+      loading: false,
+      // 文件夹表单
+      folderForm: {},
+      // 文件夹规则
+      folderRules: {
+        name: [
+          {required: true, message: '请输入文件夹名称', trigger: 'blur'}
+        ]
+      },
+      // 树形文件夹
+      treeList: [],
+      // 树形对应
+      props: {
+        checkStrictly: true,
+        value: 'id',
+        label: 'name'
+      },
+      // 去除html正则
+      regex: /(<([^>]+)>)/ig,
+      // 搜索关键字
+      searchCode: '',
+      // 文件夹列表
+      list: [],
+      // 笔记
+      note: {
+        title: '',
+        content: '',
+        richText: ''
+      },
+      // 查询列表参数
+      params: getLocal('noteFolder') || [{parentId: 0, breadcrumb: '我的笔记'}],
+      // 选择ID
+      active: {},
+      // 搜索延时任务
+      searchTimer: undefined,
+      // 拖动目标对象
+      dragObject: {},
+      // 右键选中对象
+      rightObject: {},
+      // 首次获取
+      firstGet: true,
+      // 编辑器
+      editor: true,
+      // 笔记缓存
+      noteCache: undefined
+    }
+  },
+  mounted() {
+    this.getFolderList()
+  },
+  watch: {
+    params(newDate) {
+      setLocal('noteFolder', newDate)
+    },
+    note: {
+      handler(newValue) {
+        if (this.firstGet || JSON.stringify(this.noteCache) === JSON.stringify(newValue)) return
+        debounce(() => {
+          // 保存笔记
+          this.handleSaveNote()
+        }, 2000)()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    /**
+     * 点击面包屑
+     * @param index
+     */
+    handleBreadcrumbItem(index) {
+      this.params = this.params.slice(0, index + 1)
+      this.getFolderList()
+    },
+    /**
+     * 关闭右键弹框
+     */
+    handleCloseEditNote() {
+      this.rightFlag = false
+    },
+    /**
+     * 点击右键功能
+     */
+    handleRightClick(item) {
+      switch (item.id) {
+        case 1:
+          this.handleAdd(false)
+          break
+        case 2:
+          this.handleAdd(true)
+          break
+        case 3:
+          this.handleEdit(this.rightObject)
+          break
+        case 4:
+          this.loading = true
+          this.$nextTick(() => {
+            this.loading = false
+          })
+          break
+        case 5:
+          this.source = this.rightObject
+          this.moveNoteVisible = true
+          break
+        case 6:
+          this.handleDeleteFolder(this.rightObject)
+          break
+        case 7:
+          this.handleDeleteNote(this.rightObject)
+          break
+      }
+      this.rightFlag = false
+    },
+    /**
+     * 移动笔记或文件夹
+     */
+    handleMoveNote() {
+      if (!this.target) {
+        this.$notify.warning('请选择移动目标文件夹')
+      } else if (this.source.folder === this.target) {
+        this.$notify.warning('请勿选择原来的文件夹')
+      } else {
+        this.moveNoteLoading = true
+        if (this.source.type === 'folder') {
+          this.source.parentId = this.target
+          updateFolder(this.source).then(res => {
+            this.moveNoteLoading = false
+            this.moveNoteVisible = false
+            this.getFolderList()
+          })
+        } else if (this.source.type === 'note') {
+          this.source.folder = this.target
+          updateNote(this.source).then(res => {
+            this.moveNoteLoading = false
+            this.moveNoteVisible = false
+            this.getFolderList(res.data)
+          })
+        }
+      }
+    },
+    /**
+     * 选中移动目标
+     */
+    handleChangMoveTarget(target) {
+      this.target = target[target.length - 1]
+    },
+    /**
+     * 右键编辑笔记
+     * @param event
+     * @param note
+     */
+    handleEditNote(event, note) {
+      if (note === 'empty') {
+        this.rightFunctions = [
+          {
+            id: 1,
+            name: '新建笔记'
+          },
+          {
+            id: 2,
+            name: '新建文件夹'
+          }
+        ]
+      } else {
+        this.active = note
+        if (note.type === 'folder') {
+          this.rightFunctions = [
+            {
+              id: 1,
+              name: '新建笔记'
+            },
+            {
+              id: 2,
+              name: '新建文件夹'
+            },
+            {
+              id: 3,
+              name: '编辑'
+            },
+            {
+              id: 5,
+              name: '移动到'
+            },
+            {
+              id: 6,
+              name: '删除'
+            }
+          ]
+        } else if (note.type === 'note') {
+          this.rightFunctions = [
+            {
+              id: 1,
+              name: '新建笔记'
+            },
+            {
+              id: 2,
+              name: '新建文件夹'
+            },
+            {
+              id: 4,
+              name: '编辑'
+            },
+            {
+              id: 5,
+              name: '移动到'
+            },
+            {
+              id: 7,
+              name: '删除'
+            }
+          ]
+        }
+        this.rightObject = note
+      }
+      this.rightFlag = true
+      this.rightStyle = `top: calc(${event.y}px - ${this.rightFunctions.length * 3}rem); left: calc(${event.x}px - 15rem);`
+    },
+    /**
+     * 拖动结束
+     * @param event
+     * @param data
+     */
+    drop(event, data) {
+      if (data.name) {
+        if (this.dragObject.type === 'folder') {
+          // 移动文件夹
+          this.listLoading = true
+          this.dragObject.parentId = data.id
+          updateFolder(this.dragObject).then(res => {
+            this.listLoading = false
+            this.getFolderList()
+          })
+        } else if (this.dragObject.type === 'note') {
+          // 移动笔记
+          this.listLoading = true
+          this.dragObject.folder = data.id
+          updateNote(this.dragObject).then(res => {
+            this.listLoading = false
+            this.getFolderList()
+          })
+        }
+      }
+    },
+    /**
+     * 拖动开始
+     * @param event
+     * @param data
+     */
+    drag(event, data) {
+      this.dragObject = data
+    },
+    /**
+     * 搜索
+     */
+    handleSearch() {
+      if (this.searchTimer) {
+        clearTimeout(this.searchTimer)
+        this.searchTimer = setTimeout(() => {
+          if (this.searchCode) {
+            this.params.push(
+              {
+                name: this.searchCode
+              }
+            )
+            this.getFolderList()
+          } else {
+            this.params = [
+              {
+                parentId: 0,
+                breadcrumb: '我的笔记'
+              }
+            ]
+            this.getFolderList()
+          }
+        }, 500)
+      } else {
+        this.searchTimer = setTimeout(() => {
+          if (this.searchCode) {
+            this.params.push(
+              {
+                name: this.searchCode
+              }
+            )
+            this.getFolderList()
+          } else {
+            this.params = [
+              {
+                parentId: 0,
+                breadcrumb: '我的笔记'
+              }
+            ]
+            this.getFolderList()
+          }
+        }, 500)
+      }
+    },
+    /**
+     * 删除笔记
+     */
+    handleDeleteNote(note) {
+      this.$confirm(`确认删除《${note.title}》笔记?`, '删除', {
+        type: 'warning'
+      }).then(() => {
+        return delNote(note.id)
+      }).then(() => {
+        this.getFolderList()
+        this.$notify.success('删除成功')
+      })
+    },
+    /**
+     * 保存笔记
+     */
+    handleSaveNote() {
+      const note = JSON.parse(JSON.stringify(this.note))
+      note.content = this.$refs.editor.value
+      updateNote(note).then(() => {
+        // 缓存笔记
+        this.noteCache = JSON.parse(JSON.stringify(this.note))
+        this.$notify.success('保存成功')
+        // 更新列表中的笔记
+        this.$set(this.list, this.list.findIndex(item => item.id === this.note.id), {type: 'note', ...this.note})
+      })
+    },
+    /**
+     * 删除文件夹
+     */
+    handleDeleteFolder(folder) {
+      this.$confirm(`确认删除《${folder.name}》文件夹?`, '删除', {
+        type: 'warning'
+      }).then(() => {
+        return delFolder(folder.id)
+      }).then(() => {
+        this.getFolderList()
+        this.$notify.success('删除成功')
+      })
+    },
+    /**
+     * 编辑文件夹
+     */
+    handleEdit(one) {
+      getFolder(one.id).then(res => {
+        this.folderForm = res.data
+        this.folderVisible = true
+      })
+    },
+    /**
+     * 新增文件夹或者文件
+     */
+    handleAdd(flag) {
+      if (flag) {
+        // 新增文件夹
+        this.folderForm = {}
+        this.folderForm.parentId = this.params[this.params.length - 1].parentId
+        this.folderVisible = true
+      } else {
+        // 新增笔记
+        addNote({
+          title: '无标题笔记',
+          content: '笔记内容···',
+          richText: '笔记内容···',
+          folder: this.params[this.params.length - 1].parentId
+        }).then(res => {
+          this.note = res.data
+          this.getFolderList(res.data)
+        })
+      }
+    },
+    /**
+     * 新增文件夹
+     */
+    handleAddFolder() {
+      this.folderSaveLoading = true
+      this.$refs.folderForm.validate(valid => {
+        if (valid) {
+          if (Array.isArray(this.folderForm.parentId)) {
+            this.folderForm.parentId = this.folderForm.parentId[this.folderForm.parentId.length - 1]
+          }
+          if (this.folderForm.id) {
+            updateFolder(this.folderForm).then(() => {
+              this.$notify.success('修改文件夹成功')
+              this.folderVisible = false
+              this.folderSaveLoading = false
+              this.getFolderList()
+            })
+          } else {
+            addFolder(this.folderForm).then(res => {
+              this.$notify.success('新增文件夹成功')
+              this.folderVisible = false
+              this.folderSaveLoading = false
+              this.getFolderList()
+            })
+          }
+        }
+      })
+    },
+    /**
+     * 返回上级
+     */
+    handleBack() {
+      if (this.params.length > 1) {
+        this.params.pop()
+        this.getFolderList()
+      } else {
+        this.params = [{parentId: 0, breadcrumb: '我的笔记'}]
+        this.getFolderList()
+      }
+    },
+    /**
+     * 打开文件或文件夹
+     * @param one
+     * @param clickFlag
+     */
+    handleOpen(one, clickFlag) {
+      // 如果点击的是当前激活的文件或文件夹，则不执行任何操作
+      if (!clickFlag && this.active.id === one.id) return
+      this.firstGet = true
+      this.active = one
+      if (one.type === 'folder') {
+        if (clickFlag) {
+          if (one.password) {
+            this.$prompt('请输入阅读密码', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              inputPattern: /\S/,
+              inputValidator: (value) => {
+                return one.password === value
+              },
+              inputErrorMessage: '阅读密码不正确'
+            }).then(({value}) => {
+              this.params.push({parentId: one.id, breadcrumb: one.name})
+              this.getFolderList()
+            }).catch(() => {
+            })
+          } else {
+            this.params.push({parentId: one.id, breadcrumb: one.name})
+            this.getFolderList()
+          }
+        }
+      } else if (one.type === 'note') {
+        this.handleOpenNote(one.id)
+      }
+    },
+    /**
+     * 获取文件目录
+     */
+    getFolderList(data) {
+      this.listLoading = true
+      listFolder(this.params[this.params.length - 1]).then(res => {
+        this.list = res.rows.map(item => {
+          if (item.title) {
+            item.type = 'note'
+          } else {
+            item.type = 'folder'
+          }
+          return item
+        })
+        if (this.list[0]) {
+          if (data) {
+            this.active = data
+          } else {
+            this.active = this.list[0]
+          }
+          if (this.active.type === 'note') {
+            this.loading = true
+            this.handleOpenNote(this.list[0].id)
+          } else if (this.active.type === 'folder') {
+            this.note = {}
+          }
+        } else {
+          this.note = {}
+        }
+        this.listLoading = false
+      })
+      // 获取树形目录
+      treeList().then(res => {
+        this.treeList = res.data
+      })
+    },
+    /**
+     * 打开笔记
+     * @param id 笔记id
+     */
+    handleOpenNote(id) {
+      this.firstGet = true
+      this.loading = true
+      this.editor = false
+      getNote(id).then(res => {
+        this.note = res.data
+        this.noteCache = JSON.parse(JSON.stringify(res.data))
+        this.loading = false
+        this.editor = true
+        setTimeout(() => this.firstGet = false, 1000)
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.note {
+  display: flex;
+  height: calc(100vh - 84px);
+
+  .catalogue {
+    width: 24rem;
+    border-right: 1px solid #55555529;
+    background-color: #55555509;
+    display: flex;
+    flex-flow: column;
+
+    .search {
+      margin: 1rem 2rem;
+      height: 4rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .svg-icon {
+        font-size: 1.5rem;
+        margin-right: 1rem;
+        cursor: pointer;
+      }
+    }
+
+    .el-breadcrumb {
+      display: flex;
+      margin: 0 2rem 1rem;
+      flex-flow: wrap;
+
+      .el-breadcrumb-item {
+        display: flex;
+        margin-bottom: 0.4rem;
+
+        &:nth-child(1) {
+          i {
+            display: none;
+          }
+        }
+
+        i {
+          margin: 0 0.5rem;
+          color: #999999;
+        }
+
+        .menu-name {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .add {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+
+    .list {
+      flex: 1;
+      overflow-y: auto;
+
+      .no-data {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #555555DD;
+      }
+
+      .one-active {
+        background-color: #55555525;
+      }
+
+      .one {
+        &:hover {
+          background-color: #55555525;
+        }
+
+        .folder, .note {
+          padding: 1rem 2rem;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          &:hover {
+            .edit {
+              display: inline-block !important;
+              cursor: pointer;
+            }
+          }
+
+          .svg-icon {
+            font-size: 1.5rem;
+          }
+
+          .edit {
+            display: none;
+
+            &:hover {
+              display: inline-block !important;
+            }
+          }
+
+          .name {
+            .svg-icon {
+              margin-right: 2rem;
+            }
+          }
+        }
+
+        .folder {
+          height: 5rem;
+        }
+
+        .note {
+          height: 8rem;
+          flex-flow: column;
+          align-items: flex-start;
+
+          .content, .create-time {
+            color: #555555DD;
+            margin-top: 0.4rem;
+          }
+
+          .content {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2; /*截取第三行*/
+            overflow: hidden;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .preview {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    .note-edit {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+
+      .note-title {
+        padding: 2rem 1rem;
+        font-size: 1.4rem;
+        font-weight: bold;
+        border-bottom: 1px solid #555555DD;
+        display: flex;
+        align-items: flex-end;
+
+        .right {
+          font-weight: normal;
+          display: flex;
+          font-size: 1rem;
+          align-items: center;
+          margin-left: 1rem;
+        }
+
+        & .el-input:nth-child(1) {
+          flex: 9;
+        }
+
+        & .el-input:nth-child(2) {
+          flex: 1;
+        }
+      }
+    }
+
+    .button {
+      .button {
+        width: 8rem;
+        height: 8rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        position: fixed;
+        right: 4rem;
+        font-size: 1.4rem;
+        font-weight: bold;
+        border-radius: 50%;
+        z-index: 9999;
+        cursor: pointer;
+      }
+
+      .save {
+        bottom: 4rem;
+        background-color: #5A8DEE;
+      }
+    }
+  }
+
+  .right-click {
+    position: absolute;
+    width: 15rem;
+    box-shadow: 2px 2px 5px 3px #999999DD;
+    background-color: #fff;
+    z-index: 9999;
+
+    .right-function {
+      cursor: pointer;
+      padding: 0 1rem;
+      height: 3rem;
+      line-height: 3rem;
+      border-bottom: 1px solid #999999DD;
+
+      &:hover {
+        background-color: #5A8DEE55;
+        color: #5A8DEE;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@ -0,0 +1,61 @@
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners"/>
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName"/>
+  </svg>
+</template>
+
+<script>
+import {isExternal} from '@/utils/validate'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+  display: inline-block;
+}
+</style>
--- a/src/directive/dom/clickOutSide.js
+++ b/src/directive/dom/clickOutSide.js
@ -0,0 +1,25 @@
+export default {
+    // 初始化指令
+    bind(el, binding, vnode) {
+        function documentHandler(e) {
+            // 这里判断点击的元素是否是本身，是本身，则返回
+            if (el.contains(e.target)) {
+                return false;
+            }
+            // 判断指令中是否绑定了函数
+            if (binding.expression) {
+                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
+                binding.value(e);
+            }
+        }
+        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
+        el.__vueClickOutside__ = documentHandler;
+        document.addEventListener('click', documentHandler);
+    },
+    update() {},
+    unbind(el, binding) {
+        // 解除事件监听
+        document.removeEventListener('click', el.__vueClickOutside__);
+        delete el.__vueClickOutside__;
+    }
+}
--- a/src/directive/index.js
+++ b/src/directive/index.js
@ -0,0 +1,11 @@
+import clickOutSide from './dom/clickOutSide'
+
+const install = function (Vue) {
+    Vue.directive('clickOutSide', clickOutSide)
+}
+
+if (window.Vue) {
+    Vue.use(install); // eslint-disable-line
+}
+
+export default install
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,17 @@
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import './assets/icons' // icon
+import directive from './directive' //directive
+
+Vue.use(ElementUI)
+Vue.config.productionTip = false
+// 自定义指令
+Vue.use(directive);
+
+new Vue({
+  store,
+  render: h => h(App)
+}).$mount('#app')
--- a/src/settings.js
+++ b/src/settings.js
@ -0,0 +1,36 @@
+module.exports = {
+  title: '若依管理系统',
+
+  /**
+   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   */
+  sideTheme: 'theme-dark',
+
+  /**
+   * 是否系统布局配置
+   */
+  showSettings: false,
+
+  /**
+   * 是否显示 tagsView
+   */
+  tagsView: true,
+
+  /**
+   * 是否固定头部
+   */
+  fixedHeader: false,
+
+  /**
+   * 是否显示logo
+   */
+  sidebarLogo: true,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,32 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { getInfo } from '@/api'
+import { getToken } from '@/utils/auth'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    // 用户信息
+    userInfo: {}
+  },
+  mutations: {
+    SET_USER_INFO: (state, userInfo) => {
+      state.userInfo = userInfo
+    }
+  },
+  actions: {
+    // 获取用户信息
+    GetInfo ({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        getInfo(getToken()).then(res => {
+          commit('SET_USER_INFO', res.user)
+          resolve(res)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    }
+  },
+  modules: {}
+})
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@ -0,0 +1,17 @@
+/**
+ * 保存到localStorage中
+ * @type {string}
+ */
+const TokenKey = 'Admin-Token'
+
+export function getToken() {
+  return localStorage.getItem(TokenKey)
+}
+
+export function setToken(token) {
+  return localStorage.setItem(TokenKey, token)
+}
+
+export function removeToken() {
+  return localStorage.removeItem(TokenKey)
+}
--- a/src/utils/compressImage.js
+++ b/src/utils/compressImage.js
@ -0,0 +1,68 @@
+// 压缩图片
+// eslint-disable-next-line no-unused-vars
+export function compressImage (file, config) {
+    const read = new FileReader();
+    read.readAsDataURL(file);
+    return new Promise(function (resolve, reject) {
+        read.onload = function (e) {
+            let img = new Image();
+            img.src = e.target.result;
+            img.onload = function () {
+                // 默认按比例压缩
+                let w = 0;
+                let h = 0;
+                if (img.width > 100) {
+                    w = config.width || img.width * config.proportion;
+                    h = config.height || img.height * config.proportion;
+                } else {
+                    w = img.width;
+                    h = img.height;
+                }
+                // 生成canvas
+                let canvas = document.createElement('canvas');
+                let ctx = canvas.getContext('2d');
+                let base64;
+                // 创建属性节点
+                canvas.setAttribute('width', w);
+                canvas.setAttribute('height', h);
+                ctx.drawImage(this, 0, 0, w, h);
+
+                base64 = canvas.toDataURL(file['type'], config.quality);
+
+                // 回调函数返回file的值（将base64编码转成file）
+                // files = dataURLtoFile(base64) // 如果后台接收类型为base64的话这一步可以省略
+
+                // 回调函数返回file的值（将base64转为二进制）
+                let fileBinary = dataURLtoBlob(base64);
+
+                resolve(fileBinary)
+            }
+        }
+    })
+};
+// 将base64转为二进制
+function dataURLtoBlob (dataurl) {
+    let arr = dataurl.split(',');
+    let mime = arr[0].match(/:(.*?);/)[1];
+    let bstr = atob(arr[1]);
+    let n = bstr.length;
+    let u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new Blob([u8arr], { type: mime })
+}
+
+// base64转码（将base64编码转回file文件）  此方法我没用到
+// eslint-disable-next-line no-unused-vars
+function dataURLtoFile (dataurl) {
+    let arr = dataurl.split(',');
+    let mime = arr[0].match(/:(.*?);/)[1];
+    let bstr = atob(arr[1]);
+    let n = bstr.length;
+    let u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new File([u8arr], { type: mime })
+}
--- a/src/utils/errorCode.js
+++ b/src/utils/errorCode.js
@ -0,0 +1,6 @@
+export default {
+  '401': '认证失败，无法访问系统资源',
+  '403': '当前操作没有权限',
+  '404': '访问资源不存在',
+  'default': '系统未知错误，请反馈给管理员'
+}
--- a/src/utils/local.js
+++ b/src/utils/local.js
@ -0,0 +1,36 @@
+
+/**
+ * local存
+ * @param key
+ * @param value
+ */
+export function setLocal(key, value) {
+    if (!key) {
+        return
+    }
+    localStorage.setItem(key, JSON.stringify(value))
+}
+
+/**
+ * local取
+ * @param key
+ * @returns {any}
+ */
+export function getLocal(key) {
+    if (!key) {
+        return
+    }
+    return JSON.parse(localStorage.getItem(key))
+}
+
+/**
+ * local清除
+ * @param key
+ * @returns {any}
+ */
+export function removeLocal(key) {
+    if (!key) {
+        return
+    }
+    return localStorage.removeItem(key)
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,103 @@
+import axios from 'axios'
+import {Message, Notification} from 'element-ui'
+import {getToken} from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+console.log('url', process.env.VUE_APP_BASE_API)
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: process.env.VUE_APP_BASE_API,
+  // 超时
+  timeout: 300000
+})
+// request拦截器
+service.interceptors.request.use(config => {
+  // 是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  if (getToken() && !isToken) {
+    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  // get请求映射params参数
+  if (config.method === 'get' && config.params) {
+    let url = config.url + '?';
+    for (const propName of Object.keys(config.params)) {
+      const value = config.params[propName];
+      var part = encodeURIComponent(propName) + "=";
+      if (value !== null && typeof(value) !== "undefined") {
+        if (typeof value === 'object') {
+          for (const key of Object.keys(value)) {
+            let params = propName + '[' + key + ']';
+            var subPart = encodeURIComponent(params) + "=";
+            url += subPart + encodeURIComponent(value[key]) + "&";
+          }
+        } else {
+          url += part + encodeURIComponent(value) + "&";
+        }
+      }
+    }
+    url = url.slice(0, -1);
+    config.params = {};
+    config.url = url;
+  }
+  return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(res => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    if (code === 401) {
+      /*MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        store.dispatch('LogOut').then(() => {
+          location.href = '/index';
+        })
+      })*/
+    } else if (code === 500) {
+      Message({
+        message: '网络异常，请稍候再试',
+        type: 'error'
+      })
+      return Promise.reject(new Error(msg))
+    } else if (code !== 200) {
+      Notification.error({
+        title: '网络异常，请刷新当前页面'
+      })
+      return Promise.reject('error')
+    } else {
+      return res.data
+    }
+  },
+  error => {
+    console.log('err' + error)
+    let { message } = error;
+    if (message === "Network Error") {
+      message = "网络异常，请刷新当前页面";
+    }
+    else if (message.includes("timeout")) {
+      message = "请求超时，请刷新当前页面";
+    }
+    else if (message.includes("Request failed with status code")) {
+      message = "网络异常，请刷新当前页面";
+    }
+    Message({
+      message: '请求超时，请刷新当前页面',
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service
--- a/src/utils/scroll-to.js
+++ b/src/utils/scroll-to.js
@ -0,0 +1,60 @@
+Math.easeInOutQuad = function (t, b, c, d) {
+    t /= d / 2
+    if (t < 1) {
+        return c / 2 * t * t + b
+    }
+    t--
+    return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function () {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+        window.setTimeout(callback, 1000 / 60)
+    }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+    document.documentElement.scrollTop = amount
+    document.body.parentNode.scrollTop = amount
+    document.body.scrollTop = amount
+}
+
+function position() {
+    return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+    const start = position()
+    const change = to - start
+    const increment = 20
+    let currentTime = 0
+    duration = (typeof (duration) === 'undefined') ? 500 : duration
+    var animateScroll = function () {
+        // increment the time
+        currentTime += increment
+        // find the value with the quadratic in-out easing function
+        var val = Math.easeInOutQuad(currentTime, start, change, duration)
+        // move the document.body
+        move(val)
+        // do the animation unless its over
+        if (currentTime < duration) {
+            requestAnimFrame(animateScroll)
+        } else {
+            if (callback && typeof (callback) === 'function') {
+                // the animation is done so lets callback
+                callback()
+            }
+        }
+    }
+    animateScroll()
+}
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@ -0,0 +1,18 @@
+/**
+ * 防抖
+ * @param fn    函数
+ * @param delay  等待时间
+ * @returns {function(...[*]=)}
+ */
+// 防抖定时函数
+let debounceTimer = null;
+export function debounce(fn, delay = 1000){
+  return () => {
+    if(debounceTimer){
+      clearTimeout(debounceTimer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
+      debounceTimer = setTimeout(fn,delay)
+    }else{
+      debounceTimer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
+    }
+  }
+}
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@ -0,0 +1,83 @@
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+    return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUserName(str) {
+    const valid_map = ['admin', 'editor']
+    return valid_map.indexOf(str.trim()) >= 0
+}
+
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export function validURL(url) {
+    const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+    return reg.test(url)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validLowerCase(str) {
+    const reg = /^[a-z]+$/
+    return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUpperCase(str) {
+    const reg = /^[A-Z]+$/
+    return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validAlphabets(str) {
+    const reg = /^[A-Za-z]+$/
+    return reg.test(str)
+}
+
+/**
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export function validEmail(email) {
+    const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    return reg.test(email)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function isString(str) {
+    if (typeof str === 'string' || str instanceof String) {
+        return true
+    }
+    return false
+}
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
+ */
+export function isArray(arg) {
+    if (typeof Array.isArray === 'undefined') {
+        return Object.prototype.toString.call(arg) === '[object Array]'
+    }
+    return Array.isArray(arg)
+}
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,111 @@
+'use strict'
+const path = require('path')
+const defaultSettings = require('./src/settings.js')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+const name = defaultSettings.title || 'pei你看雪博客管理系统' // 标题
+
+const port = process.env.port || process.env.npm_config_port || 80 // 端口
+
+// vue.config.js 配置说明
+//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
+// 这里只列一部分，具体配置参考文档
+module.exports = {
+  // 部署生产环境和开发环境下的URL。
+  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
+  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
+  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
+  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
+  outputDir: 'dist',
+  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
+  assetsDir: 'static',
+  // 是否开启eslint保存检测，有效值：ture | false | 'error'
+  // lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: false,
+  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
+  productionSourceMap: false,
+  // webpack-dev-server 相关配置
+  devServer: {
+    host: '0.0.0.0',
+    port: port,
+    open: true,
+    proxy: {
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      [process.env.VUE_APP_BASE_API]: {
+        target: `http://localhost:8068`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
+    },
+    disableHostCheck: true
+  },
+  configureWebpack: {
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    }
+  },
+  chainWebpack(config) {
+    config.plugins.delete('preload') // TODO: need test
+    config.plugins.delete('prefetch') // TODO: need test
+
+    // set svg-sprite-loader
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/assets/icons'))
+      .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/assets/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end()
+
+    config
+      .when(process.env.NODE_ENV !== 'development',
+        config => {
+          config
+            .optimization.splitChunks({
+            chunks: 'all',
+            cacheGroups: {
+              libs: {
+                name: 'chunk-libs',
+                test: /[\\/]node_modules[\\/]/,
+                priority: 10,
+                chunks: 'initial' // only package third parties that are initially dependent
+              },
+              elementUI: {
+                name: 'chunk-elementUI', // split elementUI into a single package
+                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+              },
+              commons: {
+                name: 'chunk-commons',
+                test: resolve('src/components'), // can customize your rules
+                minChunks: 3, //  minimum common number
+                priority: 5,
+                reuseExistingChunk: true
+              }
+            }
+          })
+          config.optimization.runtimeChunk('single'),
+            {
+              from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
+              to: './', //到根目录下
+            }
+        }
+      )
+  }
+}
				`@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1640915624153" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7420" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="240"><defs><style type="text/css"></style></defs><path d="M932.7 417.5c-17-38-41.1-72-71.9-101.3-30.5-29-65.9-51.7-105.2-67.6C715 232.3 672.1 224 627.9 224h-139V101.2c0-27.9-30.4-45.2-54.4-31L116.8 257.9c-23.6 14-23.6 48.1 0 62.1l317.7 187.7c24 14.2 54.4-3.1 54.4-31V364h139c51.5 0 100 19.1 136.5 53.8 35.5 33.8 55.1 78.1 55.1 124.9v98.1c0 46.8-19.6 91.2-55.1 124.9-36.5 34.7-85 53.8-136.5 53.8H397.1c-51.5 0-100-19.1-136.5-53.8-35.5-33.8-55.1-78.1-55.1-124.9 0-38.7-31.3-70-70-70s-70 31.3-70 70c0 43.3 9 85.4 26.7 125.1 17 38 41.1 72 71.9 101.3 30.5 29 65.9 51.7 105.2 67.6 40.6 16.4 83.6 24.7 127.8 24.7h230.7c44.2 0 87.2-8.3 127.8-24.7 39.3-15.9 74.7-38.6 105.2-67.6 30.7-29.2 54.9-63.3 71.9-101.3 17.7-39.7 26.7-81.8 26.7-125.1v-98.1c0-43.4-9-85.5-26.7-125.2z" p-id="7421" fill="#8a8a8a"></path></svg>