初始化

3 years ago · d4c6c12add
222 changed files with 28816 additions and 0 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,5 @@
+
+# port
+VITE_PORT = 8100
+
+
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,5 @@
+# 本地环境
+NODE_ENV = 'development'
+
+# 本地环境接口地址
+VUE_APP_BASE_API = '/api'
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,5 @@
+# 线上环境
+NODE_ENV = "production"
+
+# 线上环境接口地址
+VUE_APP_BASE_API = '/api'
--- a/.env.test
+++ b/.env.test
@ -0,0 +1,6 @@
+# 测试环境
+NODE_ENV = "test"
+
+
+# 测试环境接口地址
+VUE_APP_BASE_API = '/api'
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,15 @@
+
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+/bin
+Dockerfile
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,25 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node":true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/vue3-essential",
+        "plugin:@typescript-eslint/recommended",
+        'plugin:prettier/recommended'
+    ],
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "parser": "@typescript-eslint/parser",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue",
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,9 @@
+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*
--- a/docs/assets/403.1e230258.css
+++ b/docs/assets/403.1e230258.css
--- a/docs/assets/403.359d32ca.png
+++ b/docs/assets/403.359d32ca.png
--- a/docs/assets/403.9a4bb53c.js
+++ b/docs/assets/403.9a4bb53c.js
@ -0,0 +1 @@
+import{_,o,j as i,f as s,b as d,w as n,g as l,I as p,i as r,p as f,k as h}from"./index.901da429.js";const v="/vue-admin-simple/assets/403.359d32ca.png",c="/vue-admin-simple/assets/404_cloud.98e7ac66.png";const m={},a=t=>(f("data-v-a1f15f2c"),t=t(),h(),t),u={class:"app-container"},g={class:"app-container-inner"},x={class:"wscn-http403-container"},b={class:"wscn-http403"},k=p('<div class="pic-403" data-v-a1f15f2c><img class="pic-403__parent" src="'+v+'" alt="403" data-v-a1f15f2c><img class="pic-403__child left" src="'+c+'" alt="403" data-v-a1f15f2c><img class="pic-403__child mid" src="'+c+'" alt="403" data-v-a1f15f2c><img class="pic-403__child right" src="'+c+'" alt="403" data-v-a1f15f2c></div>',1),w={class:"bullshit"},I=a(()=>s("div",{class:"bullshit__oops"},"\u60A8\u6CA1\u6709\u8BBF\u95EE\u6743\u9650\uFF01",-1)),N=a(()=>s("div",{class:"bullshit__info"}," \u8BF7\u68C0\u67E5URL\u5730\u5740\u662F\u5426\u6B63\u786E, \u6216\u70B9\u51FB\u56DE\u5230\u9996\u9875\u3002 ",-1));function S(t,V){const e=r("router-link");return o(),i("div",u,[s("div",g,[s("div",x,[s("div",b,[k,s("div",w,[I,N,d(e,{to:"/",class:"bullshit__return-home"},{default:n(()=>[l("\u56DE\u5230\u9996\u9875")]),_:1})])])])])])}const y=_(m,[["render",S],["__scopeId","data-v-a1f15f2c"]]);export{y as default};
--- a/docs/assets/404.538aa4d7.png
+++ b/docs/assets/404.538aa4d7.png
--- a/docs/assets/404.a9ca12aa.css
+++ b/docs/assets/404.a9ca12aa.css
--- a/docs/assets/404.c033e7b9.js
+++ b/docs/assets/404.c033e7b9.js
@ -0,0 +1 @@
+import{_,o,j as i,f as s,t as d,b as n,w as l,g as p,I as r,i as h,p as v,k as m}from"./index.901da429.js";const f="/vue-admin-simple/assets/404.538aa4d7.png",t="/vue-admin-simple/assets/404_cloud.98e7ac66.png";const u={},e=a=>(v("data-v-a896a6f5"),a=a(),m(),a),g={class:"app-container"},b={class:"app-container-inner"},k={class:"wscn-http404-container"},w={class:"wscn-http404"},x=r('<div class="pic-404" data-v-a896a6f5><img class="pic-404__parent" src="'+f+'" alt="404" data-v-a896a6f5><img class="pic-404__child left" src="'+t+'" alt="404" data-v-a896a6f5><img class="pic-404__child mid" src="'+t+'" alt="404" data-v-a896a6f5><img class="pic-404__child right" src="'+t+'" alt="404" data-v-a896a6f5></div>',1),I={class:"bullshit"},S=e(()=>s("div",{class:"bullshit__oops"},"\u9875\u9762\u4E0D\u5B58\u5728\uFF01",-1)),N={class:"bullshit__headline"},V=e(()=>s("div",{class:"bullshit__info"},"\u8BF7\u68C0\u67E5URL\u5730\u5740\u662F\u5426\u6B63\u786E, \u6216\u70B9\u51FB\u56DE\u5230\u9996\u9875\u3002",-1));function y(a,B){const c=h("router-link");return o(),i("div",g,[s("div",b,[s("div",k,[s("div",w,[x,s("div",I,[S,s("div",N,d(a.message),1),V,n(c,{to:"/",class:"bullshit__return-home"},{default:l(()=>[p("\u56DE\u5230\u9996\u9875")]),_:1})])])])])])}const j=_(u,[["render",y],["__scopeId","data-v-a896a6f5"]]);export{j as default};
--- a/docs/assets/404_cloud.98e7ac66.png
+++ b/docs/assets/404_cloud.98e7ac66.png
--- a/docs/assets/avatar.31e95fb7.png
+++ b/docs/assets/avatar.31e95fb7.png
--- a/docs/assets/iconfont.0906b3df.woff
+++ b/docs/assets/iconfont.0906b3df.woff
--- a/docs/assets/iconfont.3dba991f.ttf
+++ b/docs/assets/iconfont.3dba991f.ttf
--- a/docs/assets/iconfont.f1592be7.woff2
+++ b/docs/assets/iconfont.f1592be7.woff2
--- a/docs/assets/index.0af47196.js
+++ b/docs/assets/index.0af47196.js
@ -0,0 +1 @@
+import{_ as t,o,j as s,b as c,i as n}from"./index.901da429.js";const a={},r={style:{padding:"30px"}};function l(_,d){const e=n("el-alert");return o(),s("div",r,[c(e,{title:"menu 1-3",type:"success",closable:!1})])}const p=t(a,[["render",l]]);export{p as default};
--- a/docs/assets/index.1525c8ad.js
+++ b/docs/assets/index.1525c8ad.js
@ -0,0 +1 @@
+import{_ as c,o as t,j as o,p as d,k as a,f as s}from"./index.901da429.js";const _={},n=e=>(d("data-v-f3bd1ed6"),e=e(),a(),e),r={class:"app-container"},p=n(()=>s("div",{class:"app-container-inner"},[s("iframe",{src:"https://ext.dcloud.net.cn/plugin?id=7511",frameborder:"0",class:"full-iframe"})],-1)),i=[p];function f(e,l){return t(),o("div",r,i)}const h=c(_,[["render",f],["__scopeId","data-v-f3bd1ed6"]]);export{h as default};
--- a/docs/assets/index.304cf6a5.js
+++ b/docs/assets/index.304cf6a5.js
@ -0,0 +1 @@
+import{d as h,r as _,a as E,N as n,o as V,j as C,f as a,b as e,w as t,g,q as A,O as y,i as B,p as w,k as x,P as D,Q as k,R as U,S as q,T as I,U as T,_ as N}from"./index.901da429.js";const i=s=>(w("data-v-9e34b3bc"),s=s(),x(),s),S={class:"app-container"},H={class:"app-container-inner"},M=["innerHTML"],R=i(()=>a("div",null,"\u9A8C\u8BC1\u8EAB\u4EFD\u8BC1\u662F\u5426\u6B63\u786E",-1)),L=i(()=>a("div",null,"\u9A8C\u8BC1url\u662F\u5426\u6B63\u786E\u3002",-1)),P=i(()=>a("div",null,"\u662F\u5426\u662Fhtml\u6807\u7B7E",-1)),j=i(()=>a("div",null,"\u662F\u5426\u662F\u6B63\u786E\u7684\u65E5\u671F",-1)),K=i(()=>a("div",null,"\u662F\u5426\u662F\u6B63\u786E\u7684\u90AE\u7BB1",-1)),O=h({__name:"index",setup(s){const c=_();let m="\u53EA\u8981\u81EA\u5DF1\u4E0D\u653E\u5F03\uFF0C\u6CA1\u6709\u4EFB\u4F55\u4EBA\u53EF\u4EE5\u6253\u5012\u4F60",p=_(m);const u=E({phone:"",keyword:"",percent:"",idCard:null,website:null,html:null,date:null,email:null}),f=E({phone:[{required:!0,validator:n(D,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7"),trigger:["blur","change"]}],idCard:[{required:!0,validator:n(k,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u8EAB\u4EFD\u8BC1"),trigger:["blur","change"]}],website:[{required:!0,validator:n(U,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u7F51\u5740"),trigger:["blur","change"]}],html:[{required:!0,validator:n(q,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684html\u6807\u7B7E"),trigger:["blur","change"]}],date:[{required:!0,validator:n(I,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u65E5\u671F"),trigger:["blur","change"]}],email:[{required:!0,validator:n(T,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u90AE\u7BB1"),trigger:["blur","change"]}]}),v=F=>{F?p.value=y(F,m):p.value=m};return(F,l)=>{const r=B("el-input"),d=B("el-form-item"),b=B("el-form");return V(),C("div",S,[a("div",H,[e(b,{ref_key:"ruleFormRef",ref:c,model:u,rules:f,"label-width":"120px","status-icon":"","label-position":"top"},{default:t(()=>[e(d,{label:"\u624B\u673A\u53F7\u7801",prop:"phone"},{default:t(()=>[e(r,{modelValue:u.phone,"onUpdate:modelValue":l[0]||(l[0]=o=>u.phone=o),placeholder:"\u8BF7\u8F93\u5165\u624B\u673A\u53F7\u7801"},null,8,["modelValue"])]),_:1}),e(d,{label:"\u5339\u914D\u6587\u5B57\u53D8\u8272\uFF08\u641C\u7D22\u65F6\uFF09",prop:"keyword",class:"item-form"},{default:t(()=>[a("div",null,[g("\u793A\u4F8B\uFF1A"),a("span",{innerHTML:A(p)},null,8,M)]),e(r,{modelValue:u.keyword,"onUpdate:modelValue":l[1]||(l[1]=o=>u.keyword=o),placeholder:"\u8BF7\u8F93\u5165\u5173\u952E\u5B57",onInput:v},null,8,["modelValue"])]),_:1}),e(d,{label:"\u8EAB\u4EFD\u8BC1",prop:"idCard",class:"item-form"},{default:t(()=>[R,e(r,{modelValue:u.idCard,"onUpdate:modelValue":l[2]||(l[2]=o=>u.idCard=o),placeholder:"\u8BF7\u8F93\u5165\u8EAB\u4EFD\u8BC1"},null,8,["modelValue"])]),_:1}),e(d,{label:"\u7F51\u5740",prop:"website",class:"item-form"},{default:t(()=>[L,e(r,{modelValue:u.website,"onUpdate:modelValue":l[3]||(l[3]=o=>u.website=o),placeholder:"\u8BF7\u8F93\u5165url"},null,8,["modelValue"])]),_:1}),e(d,{label:"html\u6807\u7B7E",prop:"html",class:"item-form"},{default:t(()=>[P,e(r,{modelValue:u.html,"onUpdate:modelValue":l[4]||(l[4]=o=>u.html=o),placeholder:"\u8BF7\u8F93\u5165html\u6807\u7B7E"},null,8,["modelValue"])]),_:1}),e(d,{label:"\u65E5\u671F",prop:"date",class:"item-form"},{default:t(()=>[j,e(r,{modelValue:u.date,"onUpdate:modelValue":l[5]||(l[5]=o=>u.date=o),placeholder:"\u8BF7\u8F93\u5165\u65E5\u671F"},null,8,["modelValue"])]),_:1}),e(d,{label:"\u90AE\u7BB1",prop:"email",class:"item-form"},{default:t(()=>[K,e(r,{modelValue:u.email,"onUpdate:modelValue":l[6]||(l[6]=o=>u.email=o),placeholder:"\u8BF7\u8F93\u5165\u90AE\u7BB1"},null,8,["modelValue"])]),_:1})]),_:1},8,["model","rules"])])])}}});const W=N(O,[["__scopeId","data-v-9e34b3bc"]]);export{W as default};
--- a/docs/assets/index.313b5785.css
+++ b/docs/assets/index.313b5785.css
--- a/docs/assets/index.313b5785.css.gz
+++ b/docs/assets/index.313b5785.css.gz
--- a/docs/assets/index.346a7dba.js
+++ b/docs/assets/index.346a7dba.js
@ -0,0 +1 @@
+import{_ as s,o as c,j as r,b as e,i as t}from"./index.901da429.js";const _={},a={style:{padding:"30px"}};function l(i,p){const o=t("el-alert"),n=t("router-view");return c(),r("div",a,[e(o,{title:"menu 1-1",type:"success",closable:!1}),e(n)])}const m=s(_,[["render",l]]);export{m as default};
--- a/docs/assets/index.47123556.js
+++ b/docs/assets/index.47123556.js
@ -0,0 +1 @@
+import{_ as o,o as t,j as n,f as s,b as a,i as c}from"./index.901da429.js";const r={},_={class:"app-container"},l={class:"app-container-inner"};function i(d,p){const e=c("el-alert");return t(),n("div",_,[s("div",l,[a(e,{title:"menu 2",closable:!1})])])}const m=o(r,[["render",i]]);export{m as default};
--- a/docs/assets/index.4a3b2cf5.js
+++ b/docs/assets/index.4a3b2cf5.js
@ -0,0 +1 @@
+import{d as y,r as m,u as U,a as F,o as b,c as A,w as t,b as s,e as w,f as u,g as I,h as T,E as $,i as n,_ as B,j as K,p as L,k as P,l as R}from"./index.901da429.js";const q="/vue-admin-simple/assets/side-logo.74a8e9c4.png";function G(){let e=new Date().getHours();if(e>=6&&e<=10)return"\u65E9\u4E0A\u597D \u26C5";if(e>=10&&e<=14)return"\u4E2D\u5348\u597D \u{1F31E}";if(e>=14&&e<=18)return"\u4E0B\u5348\u597D \u{1F31E}";if(e>=18&&e<=24)return"\u665A\u4E0A\u597D \u{1F31B}";if(e>=0&&e<=6)return"\u51CC\u6668\u597D \u{1F31B}"}const j=y({__name:"LoginForm",setup(l){const e=m(),f=T(),C=U(),i=m("password"),c=m(!1),h=F({password:[{required:!0,message:"\u8BF7\u8F93\u5165\u7528\u6237\u540D",trigger:"blur"}],username:[{required:!0,message:"\u8BF7\u8F93\u5165\u5BC6\u7801",trigger:"blur"}]}),a=F({username:"admin",password:"123456"}),V=()=>{i.value==="password"?i.value="":i.value="password"},d=_=>{c.value=!0,_&&_.validate(o=>{if(o)setTimeout(async()=>{await C.login(a),await f.push({path:"/"}),$({title:G(),message:"\u6B22\u8FCE\u767B\u5F55 Vue Admin Perfect",type:"success",duration:3e3}),c.value=!0},1e3);else return console.log("error submit!"),!1})};return(_,o)=>{const E=n("UserFilled"),v=n("el-icon"),g=n("el-input"),p=n("el-form-item"),D=n("GoodsFilled"),k=n("svg-icon"),N=n("el-button"),S=n("el-form");return b(),A(S,{ref_key:"ruleFormRef",ref:e,model:a,rules:h,"label-width":"0"},{default:t(()=>[s(p,{label:"",prop:"username"},{default:t(()=>[s(g,{placeholder:"\u8BF7\u8F93\u5165\u7528\u6237\u540D",autoComplete:"on",style:{position:"relative"},modelValue:a.username,"onUpdate:modelValue":o[0]||(o[0]=r=>a.username=r),onKeyup:o[1]||(o[1]=w(r=>d(e.value),["enter","native"]))},{prefix:t(()=>[s(v,{class:"el-input__icon"},{default:t(()=>[s(E)]),_:1})]),_:1},8,["modelValue"])]),_:1}),s(p,{label:"",prop:"password"},{default:t(()=>[s(g,{placeholder:"\u8BF7\u8F93\u5165\u5BC6\u7801",autoComplete:"on",onKeyup:o[2]||(o[2]=w(r=>d(e.value),["enter","native"])),modelValue:a.password,"onUpdate:modelValue":o[3]||(o[3]=r=>a.password=r),type:i.value},{prefix:t(()=>[s(v,{class:"el-input__icon"},{default:t(()=>[s(D)]),_:1})]),suffix:t(()=>[u("div",{class:"show-pwd",onClick:V},[s(k,{"icon-class":i.value==="password"?"eye":"eye-open"},null,8,["icon-class"])])]),_:1},8,["modelValue","type"])]),_:1}),s(p,{style:{width:"100%"}},{default:t(()=>[s(N,{loading:c.value,class:"login-btn",type:"primary",onClick:o[4]||(o[4]=r=>d(e.value))},{default:t(()=>[I("\u767B\u5F55")]),_:1},8,["loading"])]),_:1})]),_:1},8,["model","rules"])}}});const H=B(j,[["__scopeId","data-v-fe461ccb"]]),x=l=>(L("data-v-51215bf2"),l=l(),P(),l),z={class:"login-container"},J={class:"login-box"},M=x(()=>u("div",{class:"login-left"},[u("img",{src:q})],-1)),O={class:"login-form"},Q=x(()=>u("div",{class:"login-title"},[u("img",{class:"icon",src:R,alt:"logo"}),u("h2",{class:"title"},"Vue-Admin-Perfect")],-1)),W=y({__name:"index",setup(l){return(e,f)=>(b(),K("div",z,[u("div",J,[M,u("div",O,[Q,s(H)])])]))}});const Y=B(W,[["__scopeId","data-v-51215bf2"]]);export{Y as default};
--- a/docs/assets/index.5935bfd4.js
+++ b/docs/assets/index.5935bfd4.js
--- a/docs/assets/index.712bc249.js
+++ b/docs/assets/index.712bc249.js
@ -0,0 +1 @@
+import{_ as t,o as n,j as o,b as s,i as a}from"./index.901da429.js";const c={},r={style:{padding:"30px"}};function l(_,i){const e=a("el-alert");return n(),o("div",r,[s(e,{title:"menu 1-2-2",type:"warning",closable:!1})])}const p=t(c,[["render",l]]);export{p as default};
--- a/docs/assets/index.71e0b453.css
+++ b/docs/assets/index.71e0b453.css
--- a/docs/assets/index.71e0b453.css.gz
+++ b/docs/assets/index.71e0b453.css.gz
--- a/docs/assets/index.74adb023.css
+++ b/docs/assets/index.74adb023.css
--- a/docs/assets/index.780b5a40.js
+++ b/docs/assets/index.780b5a40.js
@ -0,0 +1 @@
+import{_ as t,o as n,j as o,b as s,i as a}from"./index.901da429.js";const c={},r={style:{padding:"30px"}};function l(_,i){const e=a("el-alert");return n(),o("div",r,[s(e,{title:"menu 1-2-1",type:"warning",closable:!1})])}const p=t(c,[["render",l]]);export{p as default};
--- a/docs/assets/index.822db461.js
+++ b/docs/assets/index.822db461.js
@ -0,0 +1 @@
+import{_ as c,o as e,j as r,f as l,b as o,w as _,c as i,i as t,J as p}from"./index.901da429.js";const d={},m={class:"app-container"},f={class:"app-container-inner"};function u(v,x){const n=t("el-alert"),a=t("router-view");return e(),r("div",m,[l("div",f,[o(n,{title:"menu 1",closable:!1}),o(a,null,{default:_(({Component:s})=>[(e(),i(p(s)))]),_:1})])])}const w=c(d,[["render",u]]);export{w as default};
--- a/docs/assets/index.82e5afb6.js
+++ b/docs/assets/index.82e5afb6.js
@ -0,0 +1,2 @@
+import{d as U,r as g,B as L,K as j,o as k,j as q,b as e,w as t,q as x,L as z,f as D,F as M,G as N,i as r,a as w,g as C}from"./index.901da429.js";const P=["src"],G=U({__name:"Upload",props:{modelValue:Array},emits:["update:modelValue"],setup(b,{emit:V}){const m=b;let l=g([]);const F=g(""),c=g(!1),E=(n,a)=>{console.log(n,a)},d=(n,a)=>new Promise((i,_)=>{var p=new FileReader;let s=/\.jpg$|\.jpeg$|\.gif$|\.png$/i;p.readAsDataURL(n);let f=n.name;s.test(f)?p.onload=B=>{l.value.push({name:f,url:B.target.result}),V("update:modelValue",l.value),i(B.target.result)}:(N.error("\u8BF7\u4E0A\u4F20\u56FE\u7247"),_())}),u=n=>{F.value=n.url,c.value=!0};return L(()=>{j(()=>m.modelValue,n=>{l.value=n})}),(n,a)=>{const i=r("el-icon"),_=r("el-upload"),p=r("el-dialog");return k(),q(M,null,[e(_,{action:"","before-upload":d,"list-type":"picture-card","on-preview":u,"on-remove":E,"file-list":x(l)},{default:t(()=>[e(i,null,{default:t(()=>[e(x(z))]),_:1})]),_:1},8,["file-list"]),e(p,{modelValue:c.value,"onUpdate:modelValue":a[0]||(a[0]=s=>c.value=s),width:"80%",top:"80px"},{default:t(()=>[D("img",{"w-full":"",src:F.value,alt:"\u9884\u89C8\u56FE\u7247",style:{width:"100%"}},null,8,P)]),_:1},8,["modelValue"])],64)}}}),I={class:"app-container"},K={class:"app-container-inner"},O={style:{"max-width":"800px"}},S=D("span",{class:"text-gray-500"},"-",-1),H=U({__name:"index",setup(b){const V=g("default"),m=g(),l=w({name:"\u8DD1\u6B65",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:"",img:[]}),F=w({name:[{required:!0,message:"\u8BF7\u8F93\u5165\u6D3B\u52A8\u540D\u79F0\u6D3B\u52A8\u533A\u57DF",trigger:"blur"},{min:3,max:5,message:"\u957F\u5EA6\u5728 3 \u5230 5 \u4E2A\u5B57\u7B26",trigger:"blur"}],img:[{required:!0,message:"\u8BF7\u4E0A\u4F20\u56FE\u7247",trigger:"blur"}],region:[{required:!0,message:"\u8BF7\u9009\u62E9\u6D3B\u52A8\u533A\u57DF",trigger:"change"}],date1:[{type:"date",required:!0,message:"\u8BF7\u9009\u62E9\u65F6\u95F4",trigger:"change"}],date2:[{type:"date",required:!0,message:"\u8BF7\u9009\u62E9\u65F6\u95F4",trigger:"change"}],type:[{type:"array",required:!0,message:"\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u4E2A\u6D3B\u52A8\u6027\u8D28",trigger:"change"}],resource:[{required:!0,message:`\u8BF7\u9009\u62E9\u6D3B\u52A8\u8D44\u6E90
+`,trigger:"change"}],desc:[{required:!0,message:"\u8BF7\u586B\u5199\u6D3B\u52A8\u5F62\u5F0F",trigger:"blur"}]}),c=async d=>{console.log("--FORM---",l),d&&await d.validate((u,n)=>{u?console.log("submit!"):console.log("error submit!",n)})},E=d=>{!d||d.resetFields()};return(d,u)=>{const n=r("el-input"),a=r("el-form-item"),i=r("el-option"),_=r("el-select"),p=r("el-date-picker"),s=r("el-col"),f=r("el-time-picker"),B=r("el-switch"),A=r("el-checkbox"),h=r("el-checkbox-group"),y=r("el-radio"),$=r("el-radio-group"),v=r("el-button"),R=r("el-form");return k(),q("div",I,[D("div",K,[D("div",O,[e(R,{ref_key:"ruleFormRef",ref:m,model:l,rules:F,"label-width":"120px",class:"demo-ruleForm",size:V.value},{default:t(()=>[e(a,{label:"\u6D3B\u52A8\u540D\u79F0",prop:"name"},{default:t(()=>[e(n,{modelValue:l.name,"onUpdate:modelValue":u[0]||(u[0]=o=>l.name=o)},null,8,["modelValue"])]),_:1}),e(a,{label:"\u6D3B\u52A8\u533A\u57DF",prop:"region"},{default:t(()=>[e(_,{modelValue:l.region,"onUpdate:modelValue":u[1]||(u[1]=o=>l.region=o),placeholder:"\u6D3B\u52A8\u533A\u57DF"},{default:t(()=>[e(i,{label:"\u533A\u57DF1",value:"\u4E0A\u6D77"}),e(i,{label:"\u533A\u57DF2",value:"\u5317\u4EAC"})]),_:1},8,["modelValue"])]),_:1}),e(a,{label:"\u5373\u65F6\u914D\u9001",required:""},{default:t(()=>[e(s,{span:11},{default:t(()=>[e(a,{prop:"date1"},{default:t(()=>[e(p,{modelValue:l.date1,"onUpdate:modelValue":u[2]||(u[2]=o=>l.date1=o),type:"date",placeholder:"\u9009\u62E9\u65F6\u95F4",style:{width:"100%"}},null,8,["modelValue"])]),_:1})]),_:1}),e(s,{class:"text-center",span:2,style:{"text-align":"center"}},{default:t(()=>[S]),_:1}),e(s,{span:11},{default:t(()=>[e(a,{prop:"date2"},{default:t(()=>[e(f,{modelValue:l.date2,"onUpdate:modelValue":u[3]||(u[3]=o=>l.date2=o),placeholder:"\u9009\u62E9\u65F6\u95F4",style:{width:"100%"}},null,8,["modelValue"])]),_:1})]),_:1})]),_:1}),e(a,{label:"\u5373\u65F6\u914D\u9001",prop:"delivery"},{default:t(()=>[e(B,{modelValue:l.delivery,"onUpdate:modelValue":u[4]||(u[4]=o=>l.delivery=o)},null,8,["modelValue"])]),_:1}),e(a,{label:"\u6D3B\u52A8\u6027\u8D28",prop:"type"},{default:t(()=>[e(h,{modelValue:l.type,"onUpdate:modelValue":u[5]||(u[5]=o=>l.type=o)},{default:t(()=>[e(A,{label:"\u7F8E\u98DF/\u9910\u5385\u7EBF\u4E0A\u6D3B\u52A8",name:"type"}),e(A,{label:"\u5730\u63A8\u6D3B\u52A8",name:"type"}),e(A,{label:"\u7EBF\u4E0B\u4E3B\u9898\u6D3B\u52A8",name:"type"}),e(A,{label:"\u5355\u7EAF\u54C1\u724C\u66DD\u5149",name:"type"})]),_:1},8,["modelValue"])]),_:1}),e(a,{label:"\u7279\u6B8A\u8D44\u6E90",prop:"resource"},{default:t(()=>[e($,{modelValue:l.resource,"onUpdate:modelValue":u[6]||(u[6]=o=>l.resource=o)},{default:t(()=>[e(y,{label:"\u7EBF\u4E0A\u54C1\u724C\u5546\u8D5E\u52A9"}),e(y,{label:"\u7EBF\u4E0B\u573A\u5730\u514D\u8D39"})]),_:1},8,["modelValue"])]),_:1}),e(a,{label:"\u4E0A\u4F20\u56FE\u7247",prop:"img"},{default:t(()=>[e(G,{modelValue:l.img,"onUpdate:modelValue":u[7]||(u[7]=o=>l.img=o)},null,8,["modelValue"])]),_:1}),e(a,{label:"\u5907\u6CE8",prop:"desc"},{default:t(()=>[e(n,{modelValue:l.desc,"onUpdate:modelValue":u[8]||(u[8]=o=>l.desc=o),type:"textarea"},null,8,["modelValue"])]),_:1}),e(a,null,{default:t(()=>[e(v,{type:"primary",onClick:u[9]||(u[9]=o=>c(m.value))},{default:t(()=>[C("\u7ACB\u5373\u521B\u5EFA")]),_:1}),e(v,{onClick:u[10]||(u[10]=o=>E(m.value))},{default:t(()=>[C("\u91CD\u7F6E")]),_:1})]),_:1})]),_:1},8,["model","rules","size"])])])])}}});export{H as default};
--- a/docs/assets/index.842da7c7.css
+++ b/docs/assets/index.842da7c7.css
--- a/docs/assets/index.901da429.js
+++ b/docs/assets/index.901da429.js
--- a/docs/assets/index.901da429.js.gz
+++ b/docs/assets/index.901da429.js.gz
--- a/docs/assets/index.a6717644.js
+++ b/docs/assets/index.a6717644.js
@ -0,0 +1 @@
+import{d as F,r as y,a as H,o as d,j as k,b as l,w as e,M,F as U,n as Y,f as h,g as f,t as j,c as B,i as o,x as z,z as O,A as q,_ as E,q as x,G,p as J,k as L}from"./index.901da429.js";const T={class:"advancedForm"},K={class:"search-btn"},P=F({__name:"index",props:{labelWidth:{default:"100px"},gutterWidth:{type:Number,default:24},showRow:{type:Number,default:1},columns:{type:Array,default:()=>[]},byHeight:{type:Boolean,default:!1}},emits:["submit","reset"],setup(a,{emit:i}){const v=a,m=y(),u=y(!1),n=H({});for(let s of v.columns)n[s.name]=null;const r=()=>{i("submit",n)},p=s=>{if(console.log("formEl",s),!s)return;s.resetFields(),Object.keys(n).forEach(_=>{n[_]=null}),i("reset",n)};return(s,c)=>{const _=o("el-input"),g=o("el-form-item"),A=o("el-date-picker"),S=o("el-col"),N=o("el-row"),R=o("el-form"),b=o("el-button"),$=o("arrow-down"),D=o("arrow-up"),I=o("el-icon");return d(),k("div",T,[l(R,{ref_key:"ruleFormRef",ref:m,inline:!0,"label-position":"right",model:n,class:"form-inline"},{default:e(()=>[l(N,{class:M({"not-show":a.byHeight&&!u.value}),gutter:a.gutterWidth},{default:e(()=>[(d(!0),k(U,null,Y(a.columns,(t,W)=>z((d(),B(S,{span:t.span,key:t.name},{default:e(()=>[t.type==="input"?(d(),B(g,{key:0,label:t.title,"label-width":a.labelWidth},{default:e(()=>[l(_,{clearable:"",modelValue:n[t.name],"onUpdate:modelValue":w=>n[t.name]=w,placeholder:t.placeholder},null,8,["modelValue","onUpdate:modelValue","placeholder"])]),_:2},1032,["label","label-width"])):t.type==="date"?(d(),B(g,{key:1,label:t.title,"label-width":a.labelWidth},{default:e(()=>[l(A,{"value-format":"YYYY-MM-DD",modelValue:n[t.name],"onUpdate:modelValue":w=>n[t.name]=w,type:"date",placeholder:t.placeholder},null,8,["modelValue","onUpdate:modelValue","placeholder"])]),_:2},1032,["label","label-width"])):O("",!0)]),_:2},1032,["span"])),[[q,a.byHeight?!0:W<a.showRow*3||u.value]])),128))]),_:1},8,["class","gutter"])]),_:1},8,["model"]),h("div",K,[l(b,{type:"primary",onClick:r},{default:e(()=>[f("\u67E5\u8BE2")]),_:1}),l(b,{onClick:c[0]||(c[0]=t=>p(m.value))},{default:e(()=>[f("\u91CD\u7F6E")]),_:1}),l(b,{link:"",type:"primary",onClick:c[1]||(c[1]=t=>u.value=!u.value)},{default:e(()=>[f(j(u.value?"\u5408\u5E76":"\u5C55\u5F00"),1),l(I,null,{default:e(()=>[u.value?(d(),B(D,{key:1})):(d(),B($,{key:0}))]),_:1})]),_:1})])])}}});const C=E(P,[["__scopeId","data-v-b96f41c8"]]),V=a=>(J("data-v-2f2ee3c6"),a=a(),L(),a),Q={class:"advancedForm"},X={class:"card-header"},Z=V(()=>h("span",{style:{"margin-right":"100px"}},"\u6536\u7F29\u8868\u5355 \u901A\u8FC7v-show\u6765\u63A7\u5236\u663E\u9690\u85CF",-1)),ee=V(()=>h("div",{class:"card-header"},[h("span",null,"\u6536\u7F29\u8868\u5355 \u901A\u8FC7\u9AD8\u5EA6\u6765\u63A7\u5236\u663E\u9690\u85CF")],-1)),te=F({__name:"index",setup(a){let i=[{type:"input",name:"name1",title:"\u5B57\u6BB51",placeholder:"\u5B57\u6BB51",span:8},{type:"date",name:"name2",title:"\u5B57\u6BB52",placeholder:"\u5B57\u6BB52",span:8},{type:"input",name:"name3",title:"\u5B57\u6BB53",placeholder:"\u5B57\u6BB53",span:8},{type:"input",name:"name4",title:"\u5B57\u6BB54",placeholder:"\u5B57\u6BB54",span:8},{type:"input",name:"name5",title:"\u5B57\u6BB55",placeholder:"\u5B57\u6BB55",span:8},{type:"input",name:"name6",title:"\u5B57\u6BB56",placeholder:"\u5B57\u6BB56",span:8},{type:"input",name:"name7",title:"\u5B57\u6BB57",placeholder:"\u5B57\u6BB57",span:8},{type:"input",name:"name8",title:"\u5B57\u6BB58",placeholder:"\u5B57\u6BB58",span:8},{type:"input",name:"name9",title:"\u5B57\u6BB59",placeholder:"\u5B57\u6BB59",span:8}];const v=y({}),m=y(1),u=r=>{v.value=r,G.success(JSON.stringify(r))},n=r=>{m.value=r};return(r,p)=>{const s=o("el-button"),c=o("el-card");return d(),k("div",Q,[l(c,{class:"box-card"},{header:e(()=>[h("div",X,[Z,l(s,{onClick:p[0]||(p[0]=_=>n(2)),type:"primary",link:""},{default:e(()=>[f("\u663E\u793A\u4E24\u884C")]),_:1}),l(s,{onClick:p[1]||(p[1]=_=>n(1)),type:"primary",link:""},{default:e(()=>[f("\u663E\u793A\u4E00\u884C")]),_:1})])]),default:e(()=>[l(C,{columns:x(i),onSubmit:u,showRow:m.value},null,8,["columns","showRow"])]),_:1}),l(c,{class:"box-card",style:{"margin-top":"20px"}},{header:e(()=>[ee]),default:e(()=>[l(C,{columns:x(i),onSubmit:u,byHeight:!0},null,8,["columns"])]),_:1})])}}});const ae=E(te,[["__scopeId","data-v-2f2ee3c6"]]);export{ae as default};
--- a/docs/assets/index.aff60829.js
+++ b/docs/assets/index.aff60829.js
@ -0,0 +1 @@
+import{_ as s,o as c,j as r,b as e,i as t}from"./index.901da429.js";const _={},a={style:{padding:"30px"}};function l(i,p){const o=t("el-alert"),n=t("router-view");return c(),r("div",a,[e(o,{title:"menu 1-2",type:"success",closable:!1}),e(n)])}const m=s(_,[["render",l]]);export{m as default};
--- a/docs/assets/index.e03da621.js
+++ b/docs/assets/index.e03da621.js
@ -0,0 +1 @@
+import{_ as s,o as n,j as o,f as e,b as a,i as c}from"./index.901da429.js";const r={},i={class:"app-container"},p={class:"app-container-inner"},_=e("div",{style:{"margin-bottom":"20px"}},"\u6B22\u8FCE\u5927\u5BB6\u52A0\u5FAE\u4FE1\u54C8\uFF0C\u5171\u540C\u8BA8\u8BBA\uFF0C\u5B66\u4E60",-1);function d(l,m){const t=c("el-image");return n(),o("div",i,[e("div",p,[_,a(t,{src:"http://182.61.5.190:8889/we.png","preview-src-list":["http://182.61.5.190:8889/we.png"],style:{"max-width":"200px"},"data-resid":Date.now()},null,8,["preview-src-list","data-resid"])])])}const h=s(r,[["render",d]]);export{h as default};
--- a/docs/assets/index.ea610a4d.css
+++ b/docs/assets/index.ea610a4d.css
--- a/docs/assets/index.ee4c8770.css
+++ b/docs/assets/index.ee4c8770.css
--- a/docs/assets/index.ee4c8770.css.gz
+++ b/docs/assets/index.ee4c8770.css.gz
--- a/docs/assets/index.f2a89f81.css
+++ b/docs/assets/index.f2a89f81.css
--- a/docs/assets/index.f4e3aeb9.js
+++ b/docs/assets/index.f4e3aeb9.js
@ -0,0 +1 @@
+import{_ as c,j as s,o,p as a,k as t,f as _}from"./index.901da429.js";const n={},d=e=>(a("data-v-f3b2a8bc"),e=e(),t(),e),p={class:"app-container"},i=d(()=>_("div",{class:"app-container-inner"},null,-1)),r=[i];function f(e,l){return o(),s("div",p,r)}const b=c(n,[["render",f],["__scopeId","data-v-f3b2a8bc"]]);export{b as default};
--- a/docs/assets/logo.03d6d6da.png
+++ b/docs/assets/logo.03d6d6da.png
--- a/docs/assets/side-logo.74a8e9c4.png
+++ b/docs/assets/side-logo.74a8e9c4.png
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en" >
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/vue-admin-simple/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue admin perfect</title>
+    <script type="module" crossorigin src="/vue-admin-simple/assets/index.901da429.js"></script>
+    <link rel="stylesheet" href="/vue-admin-simple/assets/index.ee4c8770.css">
+  </head>
+  <body>
+  <div id="app">
+      <style>
+          .first-loading-wrp {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 90vh;
+              min-height: 90vh;
+          }
+          .first-loading-wrp > h1 {
+              font-size: 30px;
+              font-weight: bolder;
+          }
+          .first-loading-wrp .loading-wrp {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding: 98px;
+          }
+          .dot {
+              position: relative;
+              box-sizing: border-box;
+              display: inline-block;
+              width: 64px;
+              height: 64px;
+              font-size: 64px;
+              transform: rotate(45deg);
+              animation: antRotate 1.2s infinite linear;
+          }
+
+          .dot i {
+              position: absolute;
+              display: block;
+              width: 28px;
+              height: 28px;
+              background-color: #1890ff;
+              border-radius: 100%;
+              opacity: 0.3;
+              transform: scale(0.75);
+              transform-origin: 50% 50%;
+              animation: antSpinMove 1s infinite linear alternate;
+          }
+
+          .dot i:nth-child(1) {
+              top: 0;
+              left: 0;
+          }
+
+          .dot i:nth-child(2) {
+              top: 0;
+              right: 0;
+              -webkit-animation-delay: 0.4s;
+              animation-delay: 0.4s;
+          }
+
+          .dot i:nth-child(3) {
+              right: 0;
+              bottom: 0;
+              -webkit-animation-delay: 0.8s;
+              animation-delay: 0.8s;
+          }
+
+          .dot i:nth-child(4) {
+              bottom: 0;
+              left: 0;
+              -webkit-animation-delay: 1.2s;
+              animation-delay: 1.2s;
+          }
+          @keyframes antRotate {
+              to {
+                  -webkit-transform: rotate(405deg);
+                  transform: rotate(405deg);
+              }
+          }
+
+          @-webkit-keyframes antRotate {
+              to {
+                  -webkit-transform: rotate(405deg);
+                  transform: rotate(405deg);
+              }
+          }
+
+          @keyframes antSpinMove {
+              to {
+                  opacity: 1;
+              }
+          }
+
+          @-webkit-keyframes antSpinMove {
+              to {
+                  opacity: 1;
+              }
+          }
+
+      </style>
+      <div id="vue-admin-perfect">
+          <div class="first-loading-wrp">
+              <div class="loading-wrp">
+          <span class="dot dot-spin">
+            <i></i>
+            <i></i>
+            <i></i>
+            <i></i>
+          </span>
+              </div>
+              <h1>vue-admin-perfect</h1>
+          </div>
+      </div>
+  </div>
+    
+  </body>
+</html>
--- a/docs/vite.svg
+++ b/docs/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/index.html
+++ b/index.html
@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en" >
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue admin perfect</title>
+  </head>
+  <body>
+  <div id="app">
+      <style>
+          .first-loading-wrp {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 90vh;
+              min-height: 90vh;
+          }
+          .first-loading-wrp > h1 {
+              font-size: 30px;
+              font-weight: bolder;
+          }
+          .first-loading-wrp .loading-wrp {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding: 98px;
+          }
+          .dot {
+              position: relative;
+              box-sizing: border-box;
+              display: inline-block;
+              width: 64px;
+              height: 64px;
+              font-size: 64px;
+              transform: rotate(45deg);
+              animation: antRotate 1.2s infinite linear;
+          }
+
+          .dot i {
+              position: absolute;
+              display: block;
+              width: 28px;
+              height: 28px;
+              background-color: #1890ff;
+              border-radius: 100%;
+              opacity: 0.3;
+              transform: scale(0.75);
+              transform-origin: 50% 50%;
+              animation: antSpinMove 1s infinite linear alternate;
+          }
+
+          .dot i:nth-child(1) {
+              top: 0;
+              left: 0;
+          }
+
+          .dot i:nth-child(2) {
+              top: 0;
+              right: 0;
+              -webkit-animation-delay: 0.4s;
+              animation-delay: 0.4s;
+          }
+
+          .dot i:nth-child(3) {
+              right: 0;
+              bottom: 0;
+              -webkit-animation-delay: 0.8s;
+              animation-delay: 0.8s;
+          }
+
+          .dot i:nth-child(4) {
+              bottom: 0;
+              left: 0;
+              -webkit-animation-delay: 1.2s;
+              animation-delay: 1.2s;
+          }
+          @keyframes antRotate {
+              to {
+                  -webkit-transform: rotate(405deg);
+                  transform: rotate(405deg);
+              }
+          }
+
+          @-webkit-keyframes antRotate {
+              to {
+                  -webkit-transform: rotate(405deg);
+                  transform: rotate(405deg);
+              }
+          }
+
+          @keyframes antSpinMove {
+              to {
+                  opacity: 1;
+              }
+          }
+
+          @-webkit-keyframes antSpinMove {
+              to {
+                  opacity: 1;
+              }
+          }
+
+      </style>
+      <div id="vue-admin-perfect">
+          <div class="first-loading-wrp">
+              <div class="loading-wrp">
+          <span class="dot dot-spin">
+            <i></i>
+            <i></i>
+            <i></i>
+            <i></i>
+          </span>
+              </div>
+              <h1>vue-admin-perfect</h1>
+          </div>
+      </div>
+  </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,81 @@
+{
+  "name": "vue-admin-perfect",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build:dev": "vite build --mode development",
+    "build:test": "vite build --mode test",
+    "build:prod": "vite build --mode production",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build:ts": "vue-tsc --noEmit --skipLibCheck && vite build",
+    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
+  },
+  "dependencies": {
+    "@better-scroll/core": "^2.4.2",
+    "@vueuse/core": "^9.1.1",
+    "@wangeditor/editor": "^5.1.14",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "^0.27.2",
+    "clipboard": "^2.0.10",
+    "codemirror": "^5.65.9",
+    "core-js": "^3.6.5",
+    "dayjs": "^1.11.4",
+    "default-passive-events": "^2.0.0",
+    "echarts": "^5.3.1",
+    "echarts-liquidfill": "^3.1.0",
+    "element-plus": "^2.2.21",
+    "exceljs": "^4.3.0",
+    "file-saver": "^2.0.5",
+    "fuse.js": "^6.6.2",
+    "jszip": "^3.9.1",
+    "mavon-editor": "^2.10.4",
+    "md-editor-v3": "^1.11.3",
+    "nprogress": "^0.2.0",
+    "path-browserify": "^1.0.1",
+    "path-to-regexp": "^6.2.0",
+    "pinia": "^2.0.21",
+    "pinia-persistedstate-plugin": "^0.1.0",
+    "pinia-plugin-persistedstate": "^2.1.1",
+    "print-js": "^1.6.0",
+    "sass": "^1.54.0",
+    "splitpanes": "^3.1.1",
+    "svg-sprite-loader": "^6.0.11",
+    "vue": "^3.2.39",
+    "vue-cropper": "^1.0.3",
+    "vue-cropperjs": "^5.0.0",
+    "vue-fuse": "^4.1.1",
+    "vue-mugen-scroll": "^0.2.6",
+    "vue-qr": "^4.0.6",
+    "vue-router": "^4.1.6",
+    "vue-splitpane": "^1.0.6",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.0.0-0",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "@vitejs/plugin-vue": "^3.0.0",
+    "consola": "^2.15.3",
+    "dart-sass": "^1.25.0",
+    "eslint": "^8.21.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.3.0",
+    "fast-glob": "^3.2.11",
+    "prettier": "^2.7.1",
+    "typescript": "^4.6.4",
+    "unplugin-auto-import": "^0.10.3",
+    "unplugin-vue-components": "^0.21.2",
+    "unplugin-vue-define-options": "^0.7.3",
+    "vite": "^3.0.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-style-import": "^2.0.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^0.38.4"
+  }
+}
--- a/prettier.config.js
+++ b/prettier.config.js
@ -0,0 +1,14 @@
+module.exports = {
+  // 一行的字符数，如果超过会进行换行，默认为80
+  printWidth: 100,
+  // 行位是否使用分号，默认为true
+  semi: false,
+  vueIndentScriptAndStyle: true,
+  // 字符串是否使用单引号，默认为false，使用双引号
+  singleQuote: true,
+  // 是否使用尾逗号，有三个可选值"<none|es5|all>"
+  trailingComma: 'all',
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+};
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!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="/favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </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/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,37 @@
+<template>
+  <el-config-provider :size="globalComSize" :locale="zhCn">
+    <router-view></router-view>
+  </el-config-provider>
+</template>
+
+<script lang="ts" setup>
+  import {computed} from "vue";
+  import {useSettingStore} from "@/store/modules/setting"
+  // 配置element中文
+  import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+  const SettingStore = useSettingStore()
+  // 配置全局组件大小
+  const globalComSize = computed(():string=>SettingStore.themeConfig.globalComSize)
+</script>
+
+<style lang="scss">
+  #app {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    font-family: Avenir, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+  }
+  .el-pager li:focus {
+    border: none;
+  }
+  .el-dropdown:focus {
+    border: none;
+  }
+  .svg-icon:focus {
+    border: none;
+  }
+</style>
--- a/src/api/AxiosRequestConfig.md
+++ b/src/api/AxiosRequestConfig.md
@ -0,0 +1,108 @@
+```
+export interface AxiosRequestConfig {
+  // `url` 是用于请求的服务器 URL
+  url?: string;
+  
+  // `method` 是创建请求时使用的方法
+  method?: Method;
+  
+  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
+  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
+  baseURL?: string;
+  
+  // `transformRequest` 允许在向服务器发送前，修改请求数据
+  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
+  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
+  transformRequest?: AxiosTransformer | AxiosTransformer[];
+  
+  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
+  transformResponse?: AxiosTransformer | AxiosTransformer[];
+  
+  // `headers` 是即将被发送的自定义请求头
+  headers?: any;
+  
+  // `params` 是即将与请求一起发送的 URL 参数
+  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
+  params?: any;
+  
+  // `paramsSerializer` 是一个负责 `params` 序列化的函数
+  paramsSerializer?: (params: any) => string;
+  
+  // `data` 是作为请求主体被发送的数据
+  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
+  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
+  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
+  // - 浏览器专属：FormData, File, Blob
+  // - Node 专属： Stream
+  data?: any;
+  
+  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
+  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
+  timeout?: number;
+  
+  // 超时提示消息
+  timeoutErrorMessage?: string;
+  
+  // `withCredentials` 表示跨域请求时是否需要使用凭证
+  withCredentials?: boolean;
+  
+  // `adapter` 允许自定义处理请求，以使测试更轻松
+  adapter?: AxiosAdapter;
+  
+  // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
+  auth?: AxiosBasicCredentials;
+  
+  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
+  responseType?: ResponseType;
+  
+  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
+  xsrfCookieName?: string;
+  
+  // `xsrfHeaderName` 是携带 xsrf 令牌值的 http 标头的名称
+  xsrfHeaderName?: string;
+  
+  // `onUploadProgress` 允许为上传处理进度事件
+  onUploadProgress?: (progressEvent: any) => void;
+  
+  // `onDownloadProgress` 允许为下载处理进度事件
+  onDownloadProgress?: (progressEvent: any) => void;
+  
+  // `maxContentLength` 定义允许的响应内容的最大尺寸
+  maxContentLength?: number;
+  
+  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。
+  // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
+  // promise 将被 resolve; 否则，promise 将被 rejecte
+  validateStatus?: ((status: number) => boolean) | null;
+  
+  // 请求体最大尺寸
+  maxBodyLength?: number;
+  
+  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
+  // 如果设置为0，将不会 follow 任何重定向
+  maxRedirects?: number;
+  
+  // `socketPath` 定义了一个在 node.js 中使用的 UNIX Socket。
+  // 只能指定 `socketPath` 或 `proxy`。
+  // 如果两者都指定，则使用 `socketPath`。
+  socketPath?: string | null;
+  
+  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。
+  httpAgent?: any;
+  httpsAgent?: any;
+  
+  // 'proxy' 定义代理服务器的主机名称和端口
+  proxy?: AxiosProxyConfig | false;
+  
+  // `cancelToken` 指定用于取消请求的 cancel token
+  cancelToken?: CancelToken;
+  
+  // 将其设置为`false`，它将不会解压缩您的响应，而是保留原始的Content-Encoding头。
+  // 默认是true
+  decompress?: boolean;
+  
+  // 控制响应数据是否转换
+  transitional?: TransitionalOptions
+}
+
+```
--- a/src/api/helper/errorCodeType.ts
+++ b/src/api/helper/errorCodeType.ts
@ -0,0 +1,44 @@
+export const errorCodeType = function(code:string):string{
+    let errMessage:string = "未知错误"
+    switch (code) {
+        case 400:
+            errMessage = '请求失败！请您稍后重试'
+            break
+        case 401:
+            errMessage = '未授权，请重新登录'
+            break
+        case 403:
+            errMessage = '当前账号无权限访问！'
+            break
+        case 404:
+            errMessage = '你所访问的资源不存在！'
+            break
+        case 405:
+            errMessage = '请求方式错误！请您稍后重试'
+            break
+        case 408:
+            errMessage = '请求超时！请您稍后重试'
+            break
+        case 500:
+            errMessage = '服务器端出错'
+            break
+        case 501:
+            errMessage = '网络未实现'
+            break
+        case 502:
+            errMessage = '网络错误'
+            break
+        case 503:
+            errMessage = '服务不可用'
+            break
+        case 504:
+            errMessage = '网络超时'
+            break
+        case 505:
+            errMessage = 'http版本不支持该请求'
+            break
+        default:
+            errMessage = `其他连接错误 --${code}`
+    }
+    return errMessage
+}
--- a/src/api/request.ts
+++ b/src/api/request.ts
@ -0,0 +1,57 @@
+import axios, { AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
+import { ElMessage } from "element-plus";
+import {useUserStore} from "@/store/modules/user"
+// 创建axios实例 进行基本参数配置
+const service = axios.create({
+    // 默认请求地址，根据环境的不同可在.env 文件中进行修改
+    baseURL: import.meta.env.VUE_APP_BASE_API,
+    // 设置接口访问超时时间
+    timeout: 3000000, // request timeout，
+    // 跨域时候允许携带凭证
+    withCredentials: true
+})
+
+//  request interceptor 接口请求拦截
+service.interceptors.request.use((config:AxiosRequestConfig)=>{
+    /**
+     * 用户登录之后获取服务端返回的token,后面每次请求都在请求头中带上token进行JWT校验
+     * token 存储在本地储存中（storage）、vuex、pinia
+     */
+    const userStore = useUserStore();
+    const token: string = userStore.token;
+    // 自定义请求头
+    if(token){ config.headers['Authorization'] = token}
+    return config
+},(error: AxiosError) => {
+    // 请求错误，这里可以用全局提示框进行提示
+    return Promise.reject(error);
+})
+
+//  response interceptor 接口响应拦截
+service.interceptors.response.use((response: AxiosResponse) =>{
+    // 直接返回res，当然你也可以只返回res.data
+    // 系统如果有自定义code也可以在这里处理
+    return response
+
+
+},(error: AxiosError) => {
+    return Promise.reject(error)
+})
+
+
+/**
+ * @description 显示错误消息
+ * opt 传入参数
+ * err 错误信息
+ * type 消息类型
+ * duration 消息持续时间
+ */
+function showErrMessage (opt, err, type:any= 'error', duration:number = 5000){
+    ElMessage({
+        message: err.msg,
+        type:type,
+        duration: duration
+    })
+}
+
+export default service
--- a/src/api/user.ts
+++ b/src/api/user.ts
@ -0,0 +1,9 @@
+import request from './request'
+
+export function login(data) {
+    return request({
+        url: '/vue-element-perfect/user/login',
+        method: 'post',
+        data
+    })
+}
--- a/src/assets/403_images/403.png
+++ b/src/assets/403_images/403.png
--- a/src/assets/403_images/403_cloud.png
+++ b/src/assets/403_images/403_cloud.png
--- a/src/assets/404_images/404.png
+++ b/src/assets/404_images/404.png
--- a/src/assets/404_images/404_cloud.png
+++ b/src/assets/404_images/404_cloud.png
--- a/src/assets/iconfont/demo.css
+++ b/src/assets/iconfont/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;
+}
--- a/src/assets/iconfont/demo_index.html
+++ b/src/assets/iconfont/demo_index.html
@ -0,0 +1,763 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <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>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </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=3641732" 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">&#xe6a0;</span>
+                <div class="name">阴</div>
+                <div class="code-name">&amp;#xe6a0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6a7;</span>
+                <div class="name">大暴雨</div>
+                <div class="code-name">&amp;#xe6a7;</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">&#xe629;</span>
+                <div class="name">刷新</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68d;</span>
+                <div class="name">多云-2-copy</div>
+                <div class="code-name">&amp;#xe68d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe679;</span>
+                <div class="name">多云-1</div>
+                <div class="code-name">&amp;#xe679;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67a;</span>
+                <div class="name">大雪</div>
+                <div class="code-name">&amp;#xe67a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67b;</span>
+                <div class="name">大雨</div>
+                <div class="code-name">&amp;#xe67b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67c;</span>
+                <div class="name">风</div>
+                <div class="code-name">&amp;#xe67c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67d;</span>
+                <div class="name">多云-3</div>
+                <div class="code-name">&amp;#xe67d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67e;</span>
+                <div class="name">多云-2</div>
+                <div class="code-name">&amp;#xe67e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67f;</span>
+                <div class="name">雷雨交加</div>
+                <div class="code-name">&amp;#xe67f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe680;</span>
+                <div class="name">多云</div>
+                <div class="code-name">&amp;#xe680;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe681;</span>
+                <div class="name">中雨</div>
+                <div class="code-name">&amp;#xe681;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe682;</span>
+                <div class="name">雾</div>
+                <div class="code-name">&amp;#xe682;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe683;</span>
+                <div class="name">小雨</div>
+                <div class="code-name">&amp;#xe683;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe684;</span>
+                <div class="name">小雪</div>
+                <div class="code-name">&amp;#xe684;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe685;</span>
+                <div class="name">闪电</div>
+                <div class="code-name">&amp;#xe685;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe686;</span>
+                <div class="name">雪</div>
+                <div class="code-name">&amp;#xe686;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe687;</span>
+                <div class="name">中雪</div>
+                <div class="code-name">&amp;#xe687;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe688;</span>
+                <div class="name">扬尘</div>
+                <div class="code-name">&amp;#xe688;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe689;</span>
+                <div class="name">月亮</div>
+                <div class="code-name">&amp;#xe689;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68a;</span>
+                <div class="name">雨夹雪</div>
+                <div class="code-name">&amp;#xe68a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68b;</span>
+                <div class="name">晴</div>
+                <div class="code-name">&amp;#xe68b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68c;</span>
+                <div class="name">霾</div>
+                <div class="code-name">&amp;#xe68c;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG 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.woff2?t=1663216428515') format('woff2'),
+       url('iconfont.woff?t=1663216428515') format('woff'),
+       url('iconfont.ttf?t=1663216428515') format('truetype');
+}
+</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 icon-yin"></span>
+            <div class="name">
+              阴
+            </div>
+            <div class="code-name">.icon-yin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dabaoyu"></span>
+            <div class="name">
+              大暴雨
+            </div>
+            <div class="code-name">.icon-dabaoyu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shuaxin1"></span>
+            <div class="name">
+              刷新
+            </div>
+            <div class="code-name">.icon-shuaxin1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shuaxin"></span>
+            <div class="name">
+              刷新
+            </div>
+            <div class="code-name">.icon-shuaxin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duoyun-2-copy"></span>
+            <div class="name">
+              多云-2-copy
+            </div>
+            <div class="code-name">.icon-duoyun-2-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duoyun-1"></span>
+            <div class="name">
+              多云-1
+            </div>
+            <div class="code-name">.icon-duoyun-1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daxue"></span>
+            <div class="name">
+              大雪
+            </div>
+            <div class="code-name">.icon-daxue
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dayu"></span>
+            <div class="name">
+              大雨
+            </div>
+            <div class="code-name">.icon-dayu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-feng"></span>
+            <div class="name">
+              风
+            </div>
+            <div class="code-name">.icon-feng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duoyun-3"></span>
+            <div class="name">
+              多云-3
+            </div>
+            <div class="code-name">.icon-duoyun-3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duoyun-2"></span>
+            <div class="name">
+              多云-2
+            </div>
+            <div class="code-name">.icon-duoyun-2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-leiyujiaojia"></span>
+            <div class="name">
+              雷雨交加
+            </div>
+            <div class="code-name">.icon-leiyujiaojia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duoyun"></span>
+            <div class="name">
+              多云
+            </div>
+            <div class="code-name">.icon-duoyun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhongyu"></span>
+            <div class="name">
+              中雨
+            </div>
+            <div class="code-name">.icon-zhongyu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wu"></span>
+            <div class="name">
+              雾
+            </div>
+            <div class="code-name">.icon-wu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiaoyu"></span>
+            <div class="name">
+              小雨
+            </div>
+            <div class="code-name">.icon-xiaoyu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiaoxue"></span>
+            <div class="name">
+              小雪
+            </div>
+            <div class="code-name">.icon-xiaoxue
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shandian"></span>
+            <div class="name">
+              闪电
+            </div>
+            <div class="code-name">.icon-shandian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xue"></span>
+            <div class="name">
+              雪
+            </div>
+            <div class="code-name">.icon-xue
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhongxue"></span>
+            <div class="name">
+              中雪
+            </div>
+            <div class="code-name">.icon-zhongxue
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yangchen"></span>
+            <div class="name">
+              扬尘
+            </div>
+            <div class="code-name">.icon-yangchen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yueliang"></span>
+            <div class="name">
+              月亮
+            </div>
+            <div class="code-name">.icon-yueliang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yujiaxue"></span>
+            <div class="name">
+              雨夹雪
+            </div>
+            <div class="code-name">.icon-yujiaxue
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qing"></span>
+            <div class="name">
+              晴
+            </div>
+            <div class="code-name">.icon-qing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-mai"></span>
+            <div class="name">
+              霾
+            </div>
+            <div class="code-name">.icon-mai
+            </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>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</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 icon-xxx"&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="#icon-yin"></use>
+                </svg>
+                <div class="name">阴</div>
+                <div class="code-name">#icon-yin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dabaoyu"></use>
+                </svg>
+                <div class="name">大暴雨</div>
+                <div class="code-name">#icon-dabaoyu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shuaxin1"></use>
+                </svg>
+                <div class="name">刷新</div>
+                <div class="code-name">#icon-shuaxin1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shuaxin"></use>
+                </svg>
+                <div class="name">刷新</div>
+                <div class="code-name">#icon-shuaxin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duoyun-2-copy"></use>
+                </svg>
+                <div class="name">多云-2-copy</div>
+                <div class="code-name">#icon-duoyun-2-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duoyun-1"></use>
+                </svg>
+                <div class="name">多云-1</div>
+                <div class="code-name">#icon-duoyun-1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daxue"></use>
+                </svg>
+                <div class="name">大雪</div>
+                <div class="code-name">#icon-daxue</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dayu"></use>
+                </svg>
+                <div class="name">大雨</div>
+                <div class="code-name">#icon-dayu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-feng"></use>
+                </svg>
+                <div class="name">风</div>
+                <div class="code-name">#icon-feng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duoyun-3"></use>
+                </svg>
+                <div class="name">多云-3</div>
+                <div class="code-name">#icon-duoyun-3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duoyun-2"></use>
+                </svg>
+                <div class="name">多云-2</div>
+                <div class="code-name">#icon-duoyun-2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-leiyujiaojia"></use>
+                </svg>
+                <div class="name">雷雨交加</div>
+                <div class="code-name">#icon-leiyujiaojia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duoyun"></use>
+                </svg>
+                <div class="name">多云</div>
+                <div class="code-name">#icon-duoyun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhongyu"></use>
+                </svg>
+                <div class="name">中雨</div>
+                <div class="code-name">#icon-zhongyu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wu"></use>
+                </svg>
+                <div class="name">雾</div>
+                <div class="code-name">#icon-wu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiaoyu"></use>
+                </svg>
+                <div class="name">小雨</div>
+                <div class="code-name">#icon-xiaoyu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiaoxue"></use>
+                </svg>
+                <div class="name">小雪</div>
+                <div class="code-name">#icon-xiaoxue</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shandian"></use>
+                </svg>
+                <div class="name">闪电</div>
+                <div class="code-name">#icon-shandian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xue"></use>
+                </svg>
+                <div class="name">雪</div>
+                <div class="code-name">#icon-xue</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhongxue"></use>
+                </svg>
+                <div class="name">中雪</div>
+                <div class="code-name">#icon-zhongxue</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yangchen"></use>
+                </svg>
+                <div class="name">扬尘</div>
+                <div class="code-name">#icon-yangchen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yueliang"></use>
+                </svg>
+                <div class="name">月亮</div>
+                <div class="code-name">#icon-yueliang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yujiaxue"></use>
+                </svg>
+                <div class="name">雨夹雪</div>
+                <div class="code-name">#icon-yujiaxue</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qing"></use>
+                </svg>
+                <div class="name">晴</div>
+                <div class="code-name">#icon-qing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-mai"></use>
+                </svg>
+                <div class="name">霾</div>
+                <div class="code-name">#icon-mai</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>
--- a/src/assets/iconfont/iconfont.css
+++ b/src/assets/iconfont/iconfont.css
@ -0,0 +1,115 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3641732 */
+  src: url('./iconfont.woff2?t=1663216428515') format('woff2'),
+       url('./iconfont.woff?t=1663216428515') format('woff'),
+       url('./iconfont.ttf?t=1663216428515') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-yin:before {
+  content: "\e6a0";
+}
+
+.icon-dabaoyu:before {
+  content: "\e6a7";
+}
+
+.icon-shuaxin1:before {
+  content: "\e627";
+}
+
+.icon-shuaxin:before {
+  content: "\e629";
+}
+
+.icon-duoyun-2-copy:before {
+  content: "\e68d";
+}
+
+.icon-duoyun-1:before {
+  content: "\e679";
+}
+
+.icon-daxue:before {
+  content: "\e67a";
+}
+
+.icon-dayu:before {
+  content: "\e67b";
+}
+
+.icon-feng:before {
+  content: "\e67c";
+}
+
+.icon-duoyun-3:before {
+  content: "\e67d";
+}
+
+.icon-duoyun-2:before {
+  content: "\e67e";
+}
+
+.icon-leiyujiaojia:before {
+  content: "\e67f";
+}
+
+.icon-duoyun:before {
+  content: "\e680";
+}
+
+.icon-zhongyu:before {
+  content: "\e681";
+}
+
+.icon-wu:before {
+  content: "\e682";
+}
+
+.icon-xiaoyu:before {
+  content: "\e683";
+}
+
+.icon-xiaoxue:before {
+  content: "\e684";
+}
+
+.icon-shandian:before {
+  content: "\e685";
+}
+
+.icon-xue:before {
+  content: "\e686";
+}
+
+.icon-zhongxue:before {
+  content: "\e687";
+}
+
+.icon-yangchen:before {
+  content: "\e688";
+}
+
+.icon-yueliang:before {
+  content: "\e689";
+}
+
+.icon-yujiaxue:before {
+  content: "\e68a";
+}
+
+.icon-qing:before {
+  content: "\e68b";
+}
+
+.icon-mai:before {
+  content: "\e68c";
+}
+
--- a/src/assets/iconfont/iconfont.js
+++ b/src/assets/iconfont/iconfont.js
--- a/src/assets/iconfont/iconfont.json
+++ b/src/assets/iconfont/iconfont.json
@ -0,0 +1,184 @@
+{
+  "id": "3641732",
+  "name": "weather",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "28557556",
+      "name": "阴",
+      "font_class": "yin",
+      "unicode": "e6a0",
+      "unicode_decimal": 59040
+    },
+    {
+      "icon_id": "28557770",
+      "name": "大暴雨",
+      "font_class": "dabaoyu",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "7724796",
+      "name": "刷新",
+      "font_class": "shuaxin1",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "6999224",
+      "name": "刷新",
+      "font_class": "shuaxin",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "31772217",
+      "name": "多云-2-copy",
+      "font_class": "duoyun-2-copy",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "29265274",
+      "name": "多云-1",
+      "font_class": "duoyun-1",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "29265275",
+      "name": "大雪",
+      "font_class": "daxue",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "29265276",
+      "name": "大雨",
+      "font_class": "dayu",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "29265277",
+      "name": "风",
+      "font_class": "feng",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "29265278",
+      "name": "多云-3",
+      "font_class": "duoyun-3",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "29265279",
+      "name": "多云-2",
+      "font_class": "duoyun-2",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "29265280",
+      "name": "雷雨交加",
+      "font_class": "leiyujiaojia",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
+      "icon_id": "29265281",
+      "name": "多云",
+      "font_class": "duoyun",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
+    {
+      "icon_id": "29265282",
+      "name": "中雨",
+      "font_class": "zhongyu",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
+    {
+      "icon_id": "29265283",
+      "name": "雾",
+      "font_class": "wu",
+      "unicode": "e682",
+      "unicode_decimal": 59010
+    },
+    {
+      "icon_id": "29265284",
+      "name": "小雨",
+      "font_class": "xiaoyu",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "29265285",
+      "name": "小雪",
+      "font_class": "xiaoxue",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "29265286",
+      "name": "闪电",
+      "font_class": "shandian",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "29265287",
+      "name": "雪",
+      "font_class": "xue",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
+    {
+      "icon_id": "29265288",
+      "name": "中雪",
+      "font_class": "zhongxue",
+      "unicode": "e687",
+      "unicode_decimal": 59015
+    },
+    {
+      "icon_id": "29265289",
+      "name": "扬尘",
+      "font_class": "yangchen",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    },
+    {
+      "icon_id": "29265290",
+      "name": "月亮",
+      "font_class": "yueliang",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "29265291",
+      "name": "雨夹雪",
+      "font_class": "yujiaxue",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "29265292",
+      "name": "晴",
+      "font_class": "qing",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
+      "icon_id": "29265293",
+      "name": "霾",
+      "font_class": "mai",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    }
+  ]
+}
--- a/src/assets/iconfont/iconfont.ttf
+++ b/src/assets/iconfont/iconfont.ttf
--- a/src/assets/iconfont/iconfont.woff
+++ b/src/assets/iconfont/iconfont.woff
--- a/src/assets/iconfont/iconfont.woff2
+++ b/src/assets/iconfont/iconfont.woff2
--- a/src/assets/image/allow.png
+++ b/src/assets/image/allow.png
--- a/src/assets/image/avatar.png
+++ b/src/assets/image/avatar.png
--- a/src/assets/image/berserk.jpg
+++ b/src/assets/image/berserk.jpg
--- a/src/assets/image/center-inner1.png
+++ b/src/assets/image/center-inner1.png
--- a/src/assets/image/charts/1-1-bg.png
+++ b/src/assets/image/charts/1-1-bg.png
--- a/src/assets/image/circle-bg.png
+++ b/src/assets/image/circle-bg.png
--- a/src/assets/image/cro-avatar.jpg
+++ b/src/assets/image/cro-avatar.jpg
--- a/src/assets/image/error/401.gif
+++ b/src/assets/image/error/401.gif
--- a/src/assets/image/error/404.jpeg
+++ b/src/assets/image/error/404.jpeg
--- a/src/assets/image/error/404s.png
+++ b/src/assets/image/error/404s.png
--- a/src/assets/image/login/side-logo.png
+++ b/src/assets/image/login/side-logo.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/lottie/login-side.json
+++ b/src/assets/lottie/login-side.json
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/components/AvatarCropper/index.vue
+++ b/src/components/AvatarCropper/index.vue
@ -0,0 +1,86 @@
+<template>
+  <vue-cropper
+      ref="cropper"
+      :img="avatarUrl"
+      :output-size="defaultOptions.outputSize"
+      :output-type="defaultOptions.outputType"
+      :info="defaultOptions.info"
+      :full="defaultOptions.full"
+      :fixed="defaultOptions.fixed"
+      :autoCropWidth="defaultOptions.autoCropWidth"
+      :autoCropHeight="defaultOptions.autoCropHeight"
+      :fixed-box="defaultOptions.fixedBox"
+      :auto-crop="defaultOptions.autoCrop"
+      :center-box="defaultOptions.centerBox"
+      @real-time="realTime"
+  />
+</template>
+
+<script lang="ts" setup>
+import {defineExpose, reactive, ref} from 'vue'
+import { VueCropper } from 'vue-cropper'
+import 'vue-cropper/dist/index.css'
+
+const emit = defineEmits(['change'])
+let props = defineProps({
+  avatarUrl:{
+    type:String
+  },
+  options:{
+    type:Object,
+    default:()=>{}
+  }
+})
+
+let cropper = ref()
+
+const defaultOptions = reactive({
+  outputSize:0.8, // 裁剪生成图片的质量
+  outputType: 'png', // 生成图片的格式
+  info: true, // 裁剪框的大小信息
+  fixed: true, // 是否开启截图框宽高固定比例
+  autoCrop: true, // 是否默认生成截图框
+  anMoveBox: true, // 截图框能否拖动
+  original: false, // 上传图片按照原始比例渲染
+  autoCropWidth: 300, // 默认生成截图框宽度
+  autoCropHeight: 300, // 默认生成截图框高度
+  // 只有自动截图开启 宽度高度才生效
+  centerBox: false, // 截图框是否被限制在图片里面
+  high: true, // 是否按照dpr设备比例图片
+  fixedBox: false, // 固定截图框大小 不允许改变
+  full: false, // 是否输出原图比例的截图
+  ...props.options
+})
+
+const getBase64 = ()=>{
+  return new Promise(resolve => {
+    cropper.value.getCropData((data) => {
+      resolve(data)
+    })
+  })
+}
+
+const rotateLeft = () => {
+  cropper.value.rotateLeft()
+}
+const rotateRight = () => {
+  cropper.value.rotateRight()
+}
+
+const zoom = (percent) => {
+  cropper.value.changeScale(percent)
+}
+
+// 实时预览图片
+const realTime = (data)=>{
+  emit('change',data)
+}
+
+
+defineExpose({
+  getBase64,
+  rotateLeft,
+  rotateRight,
+  zoom
+})
+</script>
--- a/src/components/Charts/Keyboard.vue
+++ b/src/components/Charts/Keyboard.vue
@ -0,0 +1,162 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script lang="ts">
+  import echarts from 'echarts'
+  import resize from './mixins/resize'
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart',
+      },
+      id: {
+        type: String,
+        default: 'chart',
+      },
+      width: {
+        type: String,
+        default: '200px',
+      },
+      height: {
+        type: String,
+        default: '200px',
+      },
+    },
+    data() {
+      return {
+        chart: null,
+      }
+    },
+    mounted() {
+      this.initChart()
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(document.getElementById(this.id))
+
+        const xAxisData = []
+        const data = []
+        const data2 = []
+        for (let i = 0; i < 50; i++) {
+          xAxisData.push(i)
+          data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+          data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+        }
+        this.chart.setOption({
+          backgroundColor: '#08263a',
+          grid: {
+            left: '5%',
+            right: '5%',
+          },
+          xAxis: [
+            {
+              show: false,
+              data: xAxisData,
+            },
+            {
+              show: false,
+              data: xAxisData,
+            },
+          ],
+          visualMap: {
+            show: false,
+            min: 0,
+            max: 50,
+            dimension: 0,
+            inRange: {
+              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'],
+            },
+          },
+          yAxis: {
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#4a657a',
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#08263f',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          series: [
+            {
+              name: 'back',
+              type: 'bar',
+              data: data2,
+              z: 1,
+              itemStyle: {
+                normal: {
+                  opacity: 0.4,
+                  barBorderRadius: 5,
+                  shadowBlur: 3,
+                  shadowColor: '#111',
+                },
+              },
+            },
+            {
+              name: 'Simulate Shadow',
+              type: 'line',
+              data,
+              z: 2,
+              showSymbol: false,
+              animationDelay: 0,
+              animationEasing: 'linear',
+              animationDuration: 1200,
+              lineStyle: {
+                normal: {
+                  color: 'transparent',
+                },
+              },
+              areaStyle: {
+                normal: {
+                  color: '#08263a',
+                  shadowBlur: 50,
+                  shadowColor: '#000',
+                },
+              },
+            },
+            {
+              name: 'front',
+              type: 'bar',
+              data,
+              xAxisIndex: 1,
+              z: 3,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                },
+              },
+            },
+          ],
+          animationEasing: 'elasticOut',
+          animationEasingUpdate: 'elasticOut',
+          animationDelay(idx) {
+            return idx * 20
+          },
+          animationDelayUpdate(idx) {
+            return idx * 20
+          },
+        })
+      },
+    },
+  }
+</script>
--- a/src/components/Charts/LineMarker.vue
+++ b/src/components/Charts/LineMarker.vue
@ -0,0 +1,274 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<script lang="ts" setup>
+  import * as echarts from 'echarts'
+  import { computed, nextTick, onMounted, ref, watch } from 'vue'
+  import { EChartsType } from 'echarts/core'
+  let props = defineProps({
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    id: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '200px',
+    },
+    height: {
+      type: String,
+      default: '200px',
+    },
+  })
+  const isCollapse = computed(() => {
+    return store.state.app.isCollapse
+  })
+
+  let chart: EChartsType
+
+  const initChart = () => {
+    let chart = echarts.init(document.getElementById(props.id))
+    chart.setOption({
+      backgroundColor: '#394056',
+      title: {
+        top: 20,
+        text: 'Requests',
+        textStyle: {
+          fontWeight: 'normal',
+          fontSize: 16,
+          color: '#F1F1F3',
+        },
+        left: '1%',
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            color: '#57617B',
+          },
+        },
+      },
+      legend: {
+        top: 20,
+        icon: 'rect',
+        itemWidth: 14,
+        itemHeight: 5,
+        itemGap: 13,
+        data: ['CMCC', 'CTCC', 'CUCC'],
+        right: '4%',
+        textStyle: {
+          fontSize: 12,
+          color: '#F1F1F3',
+        },
+      },
+      grid: {
+        top: 100,
+        left: '2%',
+        right: '2%',
+        bottom: '2%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+          data: [
+            '13:00',
+            '13:05',
+            '13:10',
+            '13:15',
+            '13:20',
+            '13:25',
+            '13:30',
+            '13:35',
+            '13:40',
+            '13:45',
+            '13:50',
+            '13:55',
+          ],
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          name: '(%)',
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14,
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: 'CMCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1,
+            },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(137, 189, 27, 0.3)',
+                  },
+                  {
+                    offset: 0.8,
+                    color: 'rgba(137, 189, 27, 0)',
+                  },
+                ],
+                false,
+              ),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10,
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(137,189,27)',
+              borderColor: 'rgba(137,189,2,0.27)',
+              borderWidth: 12,
+            },
+          },
+          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
+        },
+        {
+          name: 'CTCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1,
+            },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 136, 212, 0.3)',
+                  },
+                  {
+                    offset: 0.8,
+                    color: 'rgba(0, 136, 212, 0)',
+                  },
+                ],
+                false,
+              ),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10,
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(0,136,212)',
+              borderColor: 'rgba(0,136,212,0.2)',
+              borderWidth: 12,
+            },
+          },
+          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
+        },
+        {
+          name: 'CUCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1,
+            },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(219, 50, 51, 0.3)',
+                  },
+                  {
+                    offset: 0.8,
+                    color: 'rgba(219, 50, 51, 0)',
+                  },
+                ],
+                false,
+              ),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10,
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12,
+            },
+          },
+          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
+        },
+      ],
+    })
+    return chart
+  }
+
+  watch(isCollapse, () => {
+    setTimeout(() => {
+      chart && chart.resize()
+    }, 300)
+  })
+
+  onMounted(() => {
+    chart = initChart()
+    window.addEventListener('resize', function () {
+      chart && chart.resize()
+    })
+  })
+</script>
--- a/src/components/Charts/MixChart.vue
+++ b/src/components/Charts/MixChart.vue
@ -0,0 +1,238 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script lang="ts">
+  import echarts from 'echarts'
+  import resize from './mixins/resize'
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart',
+      },
+      id: {
+        type: String,
+        default: 'chart',
+      },
+      width: {
+        type: String,
+        default: '200px',
+      },
+      height: {
+        type: String,
+        default: '200px',
+      },
+    },
+    data() {
+      return {
+        chart: null,
+      }
+    },
+    mounted() {
+      this.initChart()
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(document.getElementById(this.id))
+        const xData = (function () {
+          const data = []
+          for (let i = 1; i < 13; i++) {
+            data.push(i + 'month')
+          }
+          return data
+        })()
+        this.chart.setOption({
+          backgroundColor: '#344b58',
+          title: {
+            text: 'statistics',
+            x: '20',
+            top: '20',
+            textStyle: {
+              color: '#fff',
+              fontSize: '22',
+            },
+            subtextStyle: {
+              color: '#90979c',
+              fontSize: '16',
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              textStyle: {
+                color: '#fff',
+              },
+            },
+          },
+          grid: {
+            left: '5%',
+            right: '5%',
+            borderWidth: 0,
+            top: 150,
+            bottom: 95,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          legend: {
+            x: '5%',
+            top: '10%',
+            textStyle: {
+              color: '#90979c',
+            },
+            data: ['female', 'male', 'average'],
+          },
+          calculable: true,
+          xAxis: [
+            {
+              type: 'category',
+              axisLine: {
+                lineStyle: {
+                  color: '#90979c',
+                },
+              },
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              splitArea: {
+                show: false,
+              },
+              axisLabel: {
+                interval: 0,
+              },
+              data: xData,
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              splitLine: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#90979c',
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                interval: 0,
+              },
+              splitArea: {
+                show: false,
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              show: true,
+              height: 30,
+              xAxisIndex: [0],
+              bottom: 30,
+              start: 10,
+              end: 80,
+              handleIcon:
+                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+              handleSize: '110%',
+              handleStyle: {
+                color: '#d3dee5',
+              },
+              textStyle: {
+                color: '#fff',
+              },
+              borderColor: '#90979c',
+            },
+            {
+              type: 'inside',
+              show: true,
+              height: 15,
+              start: 1,
+              end: 35,
+            },
+          ],
+          series: [
+            {
+              name: 'female',
+              type: 'bar',
+              stack: 'total',
+              barMaxWidth: 35,
+              barGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(255,144,128,1)',
+                  label: {
+                    show: true,
+                    textStyle: {
+                      color: '#fff',
+                    },
+                    position: 'insideTop',
+                    formatter(p) {
+                      return p.value > 0 ? p.value : ''
+                    },
+                  },
+                },
+              },
+              data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
+            },
+
+            {
+              name: 'male',
+              type: 'bar',
+              stack: 'total',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(0,191,183,1)',
+                  barBorderRadius: 0,
+                  label: {
+                    show: true,
+                    position: 'top',
+                    formatter(p) {
+                      return p.value > 0 ? p.value : ''
+                    },
+                  },
+                },
+              },
+              data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
+            },
+            {
+              name: 'average',
+              type: 'line',
+              stack: 'total',
+              symbolSize: 10,
+              symbol: 'circle',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(252,230,48,1)',
+                  barBorderRadius: 0,
+                  label: {
+                    show: true,
+                    position: 'top',
+                    formatter(p) {
+                      return p.value > 0 ? p.value : ''
+                    },
+                  },
+                },
+              },
+              data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298],
+            },
+          ],
+        })
+      },
+    },
+  }
+</script>
--- a/src/components/Charts/gauge/index.vue
+++ b/src/components/Charts/gauge/index.vue
@ -0,0 +1,127 @@
+
+
+<template>
+  <div class="echarts" ref="echarts"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  data(){
+    return{
+      chart:null
+    }
+  },
+  methods:{
+    initEcharts(){
+      let option = {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 180,
+            endAngle: 0,
+            center: ['50%', '80%'],
+            radius: '100%',
+            min: 0,
+            max: 1,
+            z: 5,
+            splitNumber: 12,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 6,
+                color: [
+                  [0.12, "#d92d4d"],
+                  [0.35, "#eb8349"],
+                  [0.63, "#e6e462"],
+                  [0.8, "#74c7da"],
+                  [1, "#67b45a"],
+                ]
+              }
+            },
+            axisTick: {
+              splitNumber: 13,
+              show: true,
+              lineStyle: {
+                color: "auto",
+                width: 2,
+              },
+              length: 17,
+            },
+            splitLine: {
+              length: 25,
+              lineStyle: {
+                color: 'auto',
+                width: 8
+              }
+            },
+            axisLabel: {
+              color: '#a0a7b8',
+              fontSize: 20,
+              distance: -60,
+              rotate: 'tangential',
+              formatter: function (value) {
+                var value = value.toFixed(2);
+                if (value == 0.0) {
+                  return "危";
+                } else if (value == 0.25) {
+                  return "差";
+                } else if (value == 0.5) {
+                  return "中";
+                } else if (value == 0.75) {
+                  return "良";
+                } else if (value == 1.0) {
+                  return "优";
+                } else {
+                  return "";
+                }
+              }
+            },
+            title: {
+              offsetCenter: [0, '-10%'],
+              fontSize: 20
+            },
+            anchor: {
+              show: true,
+              showAbove: true,
+              size: 25,
+              itemStyle: {
+                borderWidth: 10
+              }
+            },
+            detail: {
+              fontSize: 30,
+              offsetCenter: [0, '-25%'],
+              valueAnimation: true,
+              formatter: function (value) {
+                return Math.round(value * 100);
+              },
+              color: 'auto'
+            },
+            data: [
+              {
+                value: 0.7,
+                name: 'Grade Rating'
+              }
+            ]
+          }
+        ]
+      };
+
+
+      this.chart = echarts.init(this.$refs.echarts)
+      this.chart.setOption(option)
+    }
+  },
+  mounted() {
+    this.initEcharts()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.echarts {
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/components/Charts/mixins/resize.js
+++ b/src/components/Charts/mixins/resize.js
@ -0,0 +1,58 @@
+import { debounce } from '@/utils/index.js'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null,
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm &&
+        this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm &&
+        this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    },
+  },
+}
--- a/src/components/CodeMirror/index.vue
+++ b/src/components/CodeMirror/index.vue
@ -0,0 +1,121 @@
+<template>
+  <textarea ref="codeEditor" placeholder="请输入..." ></textarea>
+</template>
+
+<script>
+import { defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
+// codemirror基础资源引入
+import _CodeMirror from "codemirror";
+import "codemirror/lib/codemirror.css";
+// language
+import 'codemirror/mode/javascript/javascript.js'
+
+// theme css
+import 'codemirror/theme/monokai.css'
+// 折叠资源引入:开始
+import "codemirror/addon/fold/foldgutter.css";
+import "codemirror/addon/fold/foldcode.js";
+import "codemirror/addon/fold/brace-fold.js";
+import "codemirror/addon/fold/comment-fold.js";
+import "codemirror/addon/fold/indent-fold.js";
+import "codemirror/addon/fold/foldgutter.js";
+// 折叠资源引入:结束
+
+// 搜索资源引入:开始
+import "codemirror/addon/scroll/annotatescrollbar.js";
+import "codemirror/addon/search/matchesonscrollbar.js";
+import "codemirror/addon/search/match-highlighter.js";
+import "codemirror/addon/search/jump-to-line.js";
+
+import "codemirror/addon/dialog/dialog.js";
+import "codemirror/addon/dialog/dialog.css";
+import "codemirror/addon/search/searchcursor.js";
+import "codemirror/addon/search/search.js";
+// 搜索资源引入:结束
+
+// 启用placeholder
+import "codemirror/addon/display/placeholder.js";
+
+import "codemirror/addon/selection/active-line.js"; //光标行背景高亮，配置里面也需要styleActiveLine设置为true
+
+const CodeMirror = window.CodeMirror || _CodeMirror;
+
+export default defineComponent({
+  props: {
+    modelValue: String,
+    defaultValue: String,
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, context) {
+    const { modelValue, defaultValue, readOnly } = toRefs(props);
+    const codeEditor = ref();
+    let editor;
+    watch(modelValue, () => {
+      if (null != editor && modelValue.value && modelValue.value !== editor.getValue()) {
+        // 触发v-model的双向绑定
+        editor.setValue(modelValue.value);
+      }
+    });
+    watch(readOnly, () => {
+      if (null != editor) {
+        editor.setOption("readOnly", readOnly.value);
+      }
+    });
+    onMounted(() => {
+      editor = CodeMirror.fromTextArea(codeEditor.value, {
+        value: modelValue.value,
+        // mime: "text/javascript",
+        mode: "application/json",
+        indentWithTabs: false, // 在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false
+        smartIndent: true, // 自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true
+        lineNumbers: true, // 是否在编辑器左侧显示行号
+        matchBrackets: true, // 括号匹配
+        readOnly: readOnly.value,
+        // 启用代码折叠相关功能:开始
+        foldGutter: true,
+        lineWrapping: true, //是否自动换行
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
+        // 启用代码折叠相关功能:结束
+        styleActiveLine: false // 光标行高亮
+      });
+      // 监听编辑器的change事件
+      editor.on("change", () => {
+        // 触发v-model的双向绑定
+        context.emit("update:modelValue", editor.getValue());
+      });
+      if (defaultValue.value) {
+        editor.setValue(defaultValue.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (null !== editor) {
+        editor.toTextArea();
+        editor = null;
+      }
+    });
+    return { codeEditor };
+  }
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.CodeMirror-wrap{
+  height: 100%;
+}
+
+.CodeMirror-gutters {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  min-height: 100%;
+  white-space: nowrap;
+  background-color: transparent;
+  border-right: 1px solid #ddd;
+}
+
+</style>
--- a/src/components/CountTo/index.js
+++ b/src/components/CountTo/index.js
@ -0,0 +1,5 @@
+import CountTo from './index.vue'
+export default CountTo
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.component('count-to', CountTo)
+}
--- a/src/components/CountTo/index.vue
+++ b/src/components/CountTo/index.vue
@ -0,0 +1,202 @@
+<template>
+  <span>
+    {{ displayValue }}
+  </span>
+</template>
+<script lang="ts">
+  import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
+  export default {
+    props: {
+      startVal: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
+      endVal: {
+        type: Number,
+        required: false,
+        default: 2017,
+      },
+      duration: {
+        type: Number,
+        required: false,
+        default: 3000,
+      },
+      autoplay: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      decimals: {
+        type: Number,
+        required: false,
+        default: 0,
+        validator(value) {
+          return value >= 0
+        },
+      },
+      decimal: {
+        type: String,
+        required: false,
+        default: '.',
+      },
+      separator: {
+        type: String,
+        required: false,
+        default: ',',
+      },
+      prefix: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      suffix: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      useEasing: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      easingFn: {
+        type: Function,
+        default(t, b, c, d) {
+          return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
+        },
+      },
+    },
+    data() {
+      return {
+        localStartVal: this.startVal,
+        displayValue: this.formatNumber(this.startVal),
+        printVal: null,
+        paused: false,
+        localDuration: this.duration,
+        startTime: null,
+        timestamp: null,
+        remaining: null,
+        rAF: null,
+      }
+    },
+    computed: {
+      countDown() {
+        return this.startVal > this.endVal
+      },
+    },
+    watch: {
+      startVal() {
+        if (this.autoplay) {
+          this.start()
+        }
+      },
+      endVal() {
+        if (this.autoplay) {
+          this.start()
+        }
+      },
+    },
+    mounted() {
+      if (this.autoplay) {
+        this.start()
+      }
+      this.$emit('mountedCallback')
+    },
+    methods: {
+      start() {
+        this.localStartVal = this.startVal
+        this.startTime = null
+        this.localDuration = this.duration
+        this.paused = false
+        this.rAF = requestAnimationFrame(this.count)
+      },
+      pauseResume() {
+        if (this.paused) {
+          this.resume()
+          this.paused = false
+        } else {
+          this.pause()
+          this.paused = true
+        }
+      },
+      pause() {
+        cancelAnimationFrame(this.rAF)
+      },
+      resume() {
+        this.startTime = null
+        this.localDuration = +this.remaining
+        this.localStartVal = +this.printVal
+        requestAnimationFrame(this.count)
+      },
+      reset() {
+        this.startTime = null
+        cancelAnimationFrame(this.rAF)
+        this.displayValue = this.formatNumber(this.startVal)
+      },
+      count(timestamp) {
+        if (!this.startTime) this.startTime = timestamp
+        this.timestamp = timestamp
+        const progress = timestamp - this.startTime
+        this.remaining = this.localDuration - progress
+
+        if (this.useEasing) {
+          if (this.countDown) {
+            this.printVal =
+              this.localStartVal -
+              this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
+          } else {
+            this.printVal = this.easingFn(
+              progress,
+              this.localStartVal,
+              this.endVal - this.localStartVal,
+              this.localDuration,
+            )
+          }
+        } else {
+          if (this.countDown) {
+            this.printVal =
+              this.localStartVal -
+              (this.localStartVal - this.endVal) * (progress / this.localDuration)
+          } else {
+            this.printVal =
+              this.localStartVal +
+              (this.endVal - this.localStartVal) * (progress / this.localDuration)
+          }
+        }
+        if (this.countDown) {
+          this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal
+        } else {
+          this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal
+        }
+
+        this.displayValue = this.formatNumber(this.printVal)
+        if (progress < this.localDuration) {
+          this.rAF = requestAnimationFrame(this.count)
+        } else {
+          this.$emit('callback')
+        }
+      },
+      isNumber(val) {
+        return !isNaN(parseFloat(val))
+      },
+      formatNumber(num) {
+        num = num.toFixed(this.decimals)
+        num += ''
+        const x = num.split('.')
+        let x1 = x[0]
+        const x2 = x.length > 1 ? this.decimal + x[1] : ''
+        const rgx = /(\d+)(\d{3})/
+        if (this.separator && !this.isNumber(this.separator)) {
+          while (rgx.test(x1)) {
+            x1 = x1.replace(rgx, '$1' + this.separator + '$2')
+          }
+        }
+        return this.prefix + x1 + x2 + this.suffix
+      },
+    },
+    destroyed() {
+      cancelAnimationFrame(this.rAF)
+    },
+  }
+</script>
--- a/src/components/CountTo/requestAnimationFrame.js
+++ b/src/components/CountTo/requestAnimationFrame.js
@ -0,0 +1,51 @@
+let lastTime = 0
+const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
+
+let requestAnimationFrame
+let cancelAnimationFrame
+
+const isServer = typeof window === 'undefined'
+if (isServer) {
+  requestAnimationFrame = function () {
+    return
+  }
+  cancelAnimationFrame = function () {
+    return
+  }
+} else {
+  requestAnimationFrame = window.requestAnimationFrame
+  cancelAnimationFrame = window.cancelAnimationFrame
+  let prefix
+  // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
+  for (let i = 0; i < prefixes.length; i++) {
+    if (requestAnimationFrame && cancelAnimationFrame) {
+      break
+    }
+    prefix = prefixes[i]
+    requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
+    cancelAnimationFrame =
+      cancelAnimationFrame ||
+      window[prefix + 'CancelAnimationFrame'] ||
+      window[prefix + 'CancelRequestAnimationFrame']
+  }
+
+  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
+  if (!requestAnimationFrame || !cancelAnimationFrame) {
+    requestAnimationFrame = function (callback) {
+      const currTime = new Date().getTime()
+      // 为了使setTimteout的尽可能的接近每秒60帧的效果
+      const timeToCall = Math.max(0, 16 - (currTime - lastTime))
+      const id = window.setTimeout(() => {
+        callback(currTime + timeToCall)
+      }, timeToCall)
+      lastTime = currTime + timeToCall
+      return id
+    }
+
+    cancelAnimationFrame = function (id) {
+      window.clearTimeout(id)
+    }
+  }
+}
+
+export { requestAnimationFrame, cancelAnimationFrame }
--- a/src/components/DataScreen/Multiline/index.vue
+++ b/src/components/DataScreen/Multiline/index.vue
@ -0,0 +1,269 @@
+<template>
+  <div ref="chartsRef" class="echarts"/>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts/core'
+import { onMounted, ref } from 'vue'
+const chartsRef = ref<HTMLElement | null>()
+
+let colorList = ['#46ea91', '#2ba0ff', '#ed593b', '#7357ff', '#f2d750'];
+const options = {
+  legend: {
+    icon: 'circle',
+    top: '5%',
+    right: '5%',
+    itemWidth: 6,
+    itemGap: 5,
+    textStyle: {
+      color: '#fff',
+      padding: [3, 0, 0, 0],
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+  },
+  grid: {
+    top: '14%',
+    left: '3%',
+    right: '4%',
+    bottom: '10%',
+    containLabel: true,
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: ['1', '2', '3', '4', '5', '6', '7', '8'],
+      axisLine: {
+        lineStyle: {
+          color: '#33BBFF',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        interval: 0,
+        textStyle: {
+          color: '#5FBBEB',
+        },
+        // 默认x轴字体大小
+        fontSize: 12,
+        // margin:文字到x轴的距离
+        margin: 10,
+      },
+      axisPointer: {
+        label: {
+          // padding: [11, 5, 7],
+          padding: [0, 0, 0, 0],
+          // 这里的margin和axisLabel的margin要一致!
+          margin: 10,
+          // 移入时的字体大小
+          fontSize: 12,
+          backgroundColor: 'rgba(0,0,0,0)',
+        },
+      },
+      boundaryGap: false,
+    },
+  ],
+  yAxis: [
+    {
+      name: '单位/件',
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#05D5FF',
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#5FBBEB',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: '咨询',
+      type: 'line',
+      data: [100, 20, 30, 102, 15, 30, 20, 18],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 2,
+        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
+          {
+            offset: 0,
+            color: '#90ffc6',
+          },
+          {
+            offset: 1,
+            color: '#46ea91',
+          },
+        ]),
+        shadowColor: 'rgba(144, 255, 198, .3)',
+        shadowBlur: 5,
+        shadowOffsetY: 5,
+      },
+      itemStyle: {
+        normal: {
+          color: colorList[0],
+          borderColor: colorList[0],
+        },
+      },
+    },
+    {
+      name: '求助',
+      type: 'line',
+      data: [20, 12, 11, 14, 25, 16, 10, 20],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 2,
+        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
+          {
+            offset: 0,
+            color: '#67bcfc',
+          },
+          {
+            offset: 1,
+            color: '#2ba0ff',
+          },
+        ]),
+        shadowColor: 'rgba(105, 188, 252,.3)',
+        shadowBlur: 5,
+        shadowOffsetY: 5,
+      },
+      itemStyle: {
+        normal: {
+          color: colorList[1],
+          borderColor: colorList[1],
+        },
+      },
+    },
+    {
+      name: '无效',
+      type: 'line',
+      data: [150, 120, 170, 140, 100, 160, 110, 110],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 2,
+        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
+          {
+            offset: 0,
+            color: '#fc937e ',
+          },
+          {
+            offset: 1,
+            color: '#ed593b',
+          },
+        ]),
+        shadowColor: 'rgb(252, 147, 126,.3)',
+        shadowBlur: 2,
+        shadowOffsetY: 2,
+      },
+      itemStyle: {
+        normal: {
+          color: colorList[2],
+          borderColor: colorList[2],
+        },
+      },
+    },
+    {
+      name: '投诉举报',
+      type: 'line',
+      data: [200, 80, 100, 30, 60, 50, 110, 20],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 2,
+        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
+          {
+            offset: 0,
+            color: '#a390ff',
+          },
+          {
+            offset: 1,
+            color: '#7357ff',
+          },
+        ]),
+        shadowColor: 'rgba(115, 87, 255, .1)',
+        shadowBlur: 5,
+        shadowOffsetY: 5,
+      },
+      itemStyle: {
+        normal: {
+          color: colorList[3],
+          borderColor: colorList[3],
+        },
+      },
+    },
+    {
+      name: '建议',
+      type: 'line',
+      data: [20, 80, 150, 30, 60, 50, 50, 20],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 2,
+        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
+          {
+            offset: 0,
+            color: '#ffeb86',
+          },
+          {
+            offset: 1,
+            color: '#f2d750',
+          },
+        ]),
+        shadowColor: 'rgba(255, 235, 134, .5)',
+        shadowBlur: 5,
+        shadowOffsetY: 5,
+      },
+      itemStyle: {
+        normal: {
+          color: colorList[4],
+          borderColor: colorList[4],
+        },
+      },
+    },
+  ],
+};
+
+let chart: EChartsType
+const initChart = () => {
+  const chart = echarts.init(chartsRef.value)
+  chart.setOption(options)
+  return chart
+}
+onMounted(() => {
+  chart = initChart()
+  window.addEventListener('resize', function () {
+    chart && chart.resize()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.echarts{
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/components/DataScreen/pie/index.vue
+++ b/src/components/DataScreen/pie/index.vue
@ -0,0 +1,179 @@
+<template>
+  <div ref="chartsRef" class="echarts"/>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts/core'
+import { onMounted, ref } from 'vue'
+const chartsRef = ref<HTMLElement | null>()
+var trafficWay = [
+  {
+    name: 'Ⅰ类',
+    value: 20,
+  },
+  {
+    name: 'Ⅱ类',
+    value: 20,
+  },
+  {
+    name: 'Ⅲ类',
+    value: 20,
+  },
+  {
+    name: 'Ⅳ类',
+    value: 20,
+  },
+  { name: 'Ⅴ类', value: 20 },
+  { name: '劣Ⅴ类', value: 20 },
+];
+
+var data = [];
+var color = ['#fd566a', '#9787ff', '#fdb36a', '#fdd56a', '#6da7ff', '#63e1f2', '#ff3000'];
+for (var i = 0; i < trafficWay.length; i++) {
+  data.push(
+      {
+        value: trafficWay[i].value,
+        name: trafficWay[i].name,
+        itemStyle: {
+          normal: {
+            borderWidth: 5,
+            shadowBlur: 20,
+            borderColor: color[i],
+            shadowColor: color[i],
+          },
+        },
+      },
+      {
+        value: 2,
+        name: '',
+        itemStyle: {
+          normal: {
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            color: 'rgba(0, 0, 0, 0)',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            borderWidth: 0,
+          },
+        },
+      }
+  );
+}
+var seriesOption = [
+  {
+    name: '',
+    type: 'pie',
+    clockWise: false,
+    radius: [105, 109],
+    hoverAnimation: false,
+    itemStyle: {
+      normal: {
+        label: {
+          show: true,
+          position: 'outside',
+
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== '') {
+              return params.name + '\t' + percent + '%';
+            } else {
+              return '';
+            }
+          },
+        },
+        labelLine: {
+          length: 10,
+          length2: 20,
+          show: true,
+          color: '#00ffff',
+        },
+      },
+    },
+    data: data,
+  },
+];
+let options = {
+  color: color,
+  title: [{
+    text: '水质监测',
+    top: '44%',
+    textAlign: 'center',
+    left: '49.50%',
+    backgroundColor: '#163253',
+    borderRadius: 100,
+    textStyle: {
+      color: '#fff',
+      fontSize: 20,
+      fontWeight: '400',
+    },
+  }, {
+    text: '水环境监测站',
+    top: '49%',
+    textAlign: 'center',
+    left: '49.50%',
+    textStyle: {
+      color: '#fff',
+      fontSize: 20,
+      fontWeight: '400',
+    },
+  }, {
+    text: '9',
+    top: '53%',
+    textAlign: 'center',
+    left: '48%',
+    textStyle: {
+      color: '#f6ea2f',
+      fontSize: 25,
+      fontWeight: '800',
+      fontStyle: 'italic'
+    },
+  }, {
+    text: '个',
+    top: '53.5%',
+    textAlign: 'center',
+    left: '50.5%',
+    textStyle: {
+      color: '#fff',
+      fontSize: 16,
+      fontWeight: '400',
+    },
+  }],
+  tooltip: {
+    show: false,
+  },
+
+  toolbox: {
+    show: false,
+  },
+  series: seriesOption,
+};
+
+let chart: EChartsType
+const initChart = () => {
+  const chart = echarts.init(chartsRef.value)
+  chart.setOption(options)
+  return chart
+}
+onMounted(() => {
+  chart = initChart()
+  window.addEventListener('resize', function () {
+    chart && chart.resize()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.echarts{
+  width: 100%;
+  height: 100%;
+
+}
+</style>
			`@ -0,0 +1 @@`
			import{_,o,j as i,f as s,b as d,w as n,g as l,I as p,i as r,p as f,k as h}from"./index.901da429.js";const v="/vue-admin-simple/assets/403.359d32ca.png",c="/vue-admin-simple/assets/404_cloud.98e7ac66.png";const m={},a=t=>(f("data-v-a1f15f2c"),t=t(),h(),t),u={class:"app-container"},g={class:"app-container-inner"},x={class:"wscn-http403-container"},b={class:"wscn-http403"},k=p('<div class="pic-403" data-v-a1f15f2c><img class="pic-403__parent" src="'+v+'" alt="403" data-v-a1f15f2c><img class="pic-403__child left" src="'+c+'" alt="403" data-v-a1f15f2c><img class="pic-403__child mid" src="'+c+'" alt="403" data-v-a1f15f2c><img class="pic-403__child right" src="'+c+'" alt="403" data-v-a1f15f2c></div>',1),w={class:"bullshit"},I=a(()=>s("div",{class:"bullshit__oops"},"\u60A8\u6CA1\u6709\u8BBF\u95EE\u6743\u9650\uFF01",-1)),N=a(()=>s("div",{class:"bullshit__info"}," \u8BF7\u68C0\u67E5URL\u5730\u5740\u662F\u5426\u6B63\u786E, \u6216\u70B9\u51FB\u56DE\u5230\u9996\u9875\u3002 ",-1));function S(t,V){const e=r("router-link");return o(),i("div",u,[s("div",g,[s("div",x,[s("div",b,[k,s("div",w,[I,N,d(e,{to:"/",class:"bullshit__return-home"},{default:n(()=>[l("\u56DE\u5230\u9996\u9875")]),_:1})])])])])])}const y=_(m,[["render",S],["__scopeId","data-v-a1f15f2c"]]);export{y as default};
			`@ -0,0 +1 @@`
			import{_,o,j as i,f as s,t as d,b as n,w as l,g as p,I as r,i as h,p as v,k as m}from"./index.901da429.js";const f="/vue-admin-simple/assets/404.538aa4d7.png",t="/vue-admin-simple/assets/404_cloud.98e7ac66.png";const u={},e=a=>(v("data-v-a896a6f5"),a=a(),m(),a),g={class:"app-container"},b={class:"app-container-inner"},k={class:"wscn-http404-container"},w={class:"wscn-http404"},x=r('<div class="pic-404" data-v-a896a6f5><img class="pic-404__parent" src="'+f+'" alt="404" data-v-a896a6f5><img class="pic-404__child left" src="'+t+'" alt="404" data-v-a896a6f5><img class="pic-404__child mid" src="'+t+'" alt="404" data-v-a896a6f5><img class="pic-404__child right" src="'+t+'" alt="404" data-v-a896a6f5></div>',1),I={class:"bullshit"},S=e(()=>s("div",{class:"bullshit__oops"},"\u9875\u9762\u4E0D\u5B58\u5728\uFF01",-1)),N={class:"bullshit__headline"},V=e(()=>s("div",{class:"bullshit__info"},"\u8BF7\u68C0\u67E5URL\u5730\u5740\u662F\u5426\u6B63\u786E, \u6216\u70B9\u51FB\u56DE\u5230\u9996\u9875\u3002",-1));function y(a,B){const c=h("router-link");return o(),i("div",g,[s("div",b,[s("div",k,[s("div",w,[x,s("div",I,[S,s("div",N,d(a.message),1),V,n(c,{to:"/",class:"bullshit__return-home"},{default:l(()=>[p("\u56DE\u5230\u9996\u9875")]),_:1})])])])])])}const j=_(u,[["render",y],["__scopeId","data-v-a896a6f5"]]);export{j as default};
			`@ -0,0 +1 @@`
			`import{_ as t,o,j as s,b as c,i as n}from"./index.901da429.js";const a={},r={style:{padding:"30px"}};function l(_,d){const e=n("el-alert");return o(),s("div",r,[c(e,{title:"menu 1-3",type:"success",closable:!1})])}const p=t(a,[["render",l]]);export{p as default};`
			`@ -0,0 +1 @@`
			`import{_ as c,o as t,j as o,p as d,k as a,f as s}from"./index.901da429.js";const _={},n=e=>(d("data-v-f3bd1ed6"),e=e(),a(),e),r={class:"app-container"},p=n(()=>s("div",{class:"app-container-inner"},[s("iframe",{src:"https://ext.dcloud.net.cn/plugin?id=7511",frameborder:"0",class:"full-iframe"})],-1)),i=[p];function f(e,l){return t(),o("div",r,i)}const h=c(_,[["render",f],["__scopeId","data-v-f3bd1ed6"]]);export{h as default};`
			`@ -0,0 +1 @@`
			import{d as h,r as _,a as E,N as n,o as V,j as C,f as a,b as e,w as t,g,q as A,O as y,i as B,p as w,k as x,P as D,Q as k,R as U,S as q,T as I,U as T,_ as N}from"./index.901da429.js";const i=s=>(w("data-v-9e34b3bc"),s=s(),x(),s),S={class:"app-container"},H={class:"app-container-inner"},M=["innerHTML"],R=i(()=>a("div",null,"\u9A8C\u8BC1\u8EAB\u4EFD\u8BC1\u662F\u5426\u6B63\u786E",-1)),L=i(()=>a("div",null,"\u9A8C\u8BC1url\u662F\u5426\u6B63\u786E\u3002",-1)),P=i(()=>a("div",null,"\u662F\u5426\u662Fhtml\u6807\u7B7E",-1)),j=i(()=>a("div",null,"\u662F\u5426\u662F\u6B63\u786E\u7684\u65E5\u671F",-1)),K=i(()=>a("div",null,"\u662F\u5426\u662F\u6B63\u786E\u7684\u90AE\u7BB1",-1)),O=h({__name:"index",setup(s){const c=_();let m="\u53EA\u8981\u81EA\u5DF1\u4E0D\u653E\u5F03\uFF0C\u6CA1\u6709\u4EFB\u4F55\u4EBA\u53EF\u4EE5\u6253\u5012\u4F60",p=_(m);const u=E({phone:"",keyword:"",percent:"",idCard:null,website:null,html:null,date:null,email:null}),f=E({phone:[{required:!0,validator:n(D,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7"),trigger:["blur","change"]}],idCard:[{required:!0,validator:n(k,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u8EAB\u4EFD\u8BC1"),trigger:["blur","change"]}],website:[{required:!0,validator:n(U,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u7F51\u5740"),trigger:["blur","change"]}],html:[{required:!0,validator:n(q,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684html\u6807\u7B7E"),trigger:["blur","change"]}],date:[{required:!0,validator:n(I,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u65E5\u671F"),trigger:["blur","change"]}],email:[{required:!0,validator:n(T,"\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u90AE\u7BB1"),trigger:["blur","change"]}]}),v=F=>{F?p.value=y(F,m):p.value=m};return(F,l)=>{const r=B("el-input"),d=B("el-form-item"),b=B("el-form");return V(),C("div",S,[a("div",H,[e(b,{ref_key:"ruleFormRef",ref:c,model:u,rules:f,"label-width":"120px","status-icon":"","label-position":"top"},{default:t(()=>[e(d,{label:"\u624B\u673A\u53F7\u7801",prop:"phone"},{default:t(()=>[e(r,{modelValue:u.phone,"onUpdate:modelValue":l[0]\|\|(l[0]=o=>u.phone=o),placeholder:"\u8BF7\u8F93\u5165\u624B\u673A\u53F7\u7801"},null,8,["modelValue"])]),_:1}),e(d,{label:"\u5339\u914D\u6587\u5B57\u53D8\u8272\uFF08\u641C\u7D22\u65F6\uFF09",prop:"keyword",class:"item-form"},{default:t(()=>[a("div",null,[g("\u793A\u4F8B\uFF1A"),a("span",{innerHTML:A(p)},null,8,M)]),e(r,{modelValue:u.keyword,"onUpdate:modelValue":l[1]\|\|(l[1]=o=>u.keyword=o),placeholder:"\u8BF7\u8F93\u5165\u5173\u952E\u5B57",onInput:v},null,8,["modelValue"])]),_:1}),e(d,{label:"\u8EAB\u4EFD\u8BC1",prop:"idCard",class:"item-form"},{default:t(()=>[R,e(r,{modelValue:u.idCard,"onUpdate:modelValue":l[2]\|\|(l[2]=o=>u.idCard=o),placeholder:"\u8BF7\u8F93\u5165\u8EAB\u4EFD\u8BC1"},null,8,["modelValue"])]),_:1}),e(d,{label:"\u7F51\u5740",prop:"website",class:"item-form"},{default:t(()=>[L,e(r,{modelValue:u.website,"onUpdate:modelValue":l[3]\|\|(l[3]=o=>u.website=o),placeholder:"\u8BF7\u8F93\u5165url"},null,8,["modelValue"])]),_:1}),e(d,{label:"html\u6807\u7B7E",prop:"html",class:"item-form"},{default:t(()=>[P,e(r,{modelValue:u.html,"onUpdate:modelValue":l[4]\|\|(l[4]=o=>u.html=o),placeholder:"\u8BF7\u8F93\u5165html\u6807\u7B7E"},null,8,["modelValue"])]),_:1}),e(d,{label:"\u65E5\u671F",prop:"date",class:"item-form"},{default:t(()=>[j,e(r,{modelValue:u.date,"onUpdate:modelValue":l[5]\|\|(l[5]=o=>u.date=o),placeholder:"\u8BF7\u8F93\u5165\u65E5\u671F"},null,8,["modelValue"])]),_:1}),e(d,{label:"\u90AE\u7BB1",prop:"email",class:"item-form"},{default:t(()=>[K,e(r,{modelValue:u.email,"onUpdate:modelValue":l[6]\|\|(l[6]=o=>u.email=o),placeholder:"\u8BF7\u8F93\u5165\u90AE\u7BB1"},null,8,["modelValue"])]),_:1})]),_:1},8,["model","rules"])])])}}});const W=N(O,[["__scopeId","data-v-9e34b3bc"]]);export{W as default};
			`@ -0,0 +1 @@`
			`import{_ as s,o as c,j as r,b as e,i as t}from"./index.901da429.js";const _={},a={style:{padding:"30px"}};function l(i,p){const o=t("el-alert"),n=t("router-view");return c(),r("div",a,[e(o,{title:"menu 1-1",type:"success",closable:!1}),e(n)])}const m=s(_,[["render",l]]);export{m as default};`
			`@ -0,0 +1 @@`
			`import{_ as o,o as t,j as n,f as s,b as a,i as c}from"./index.901da429.js";const r={},_={class:"app-container"},l={class:"app-container-inner"};function i(d,p){const e=c("el-alert");return t(),n("div",_,[s("div",l,[a(e,{title:"menu 2",closable:!1})])])}const m=o(r,[["render",i]]);export{m as default};`
			`@ -0,0 +1 @@`
			import{d as y,r as m,u as U,a as F,o as b,c as A,w as t,b as s,e as w,f as u,g as I,h as T,E as $,i as n,_ as B,j as K,p as L,k as P,l as R}from"./index.901da429.js";const q="/vue-admin-simple/assets/side-logo.74a8e9c4.png";function G(){let e=new Date().getHours();if(e>=6&&e<=10)return"\u65E9\u4E0A\u597D \u26C5";if(e>=10&&e<=14)return"\u4E2D\u5348\u597D \u{1F31E}";if(e>=14&&e<=18)return"\u4E0B\u5348\u597D \u{1F31E}";if(e>=18&&e<=24)return"\u665A\u4E0A\u597D \u{1F31B}";if(e>=0&&e<=6)return"\u51CC\u6668\u597D \u{1F31B}"}const j=y({__name:"LoginForm",setup(l){const e=m(),f=T(),C=U(),i=m("password"),c=m(!1),h=F({password:[{required:!0,message:"\u8BF7\u8F93\u5165\u7528\u6237\u540D",trigger:"blur"}],username:[{required:!0,message:"\u8BF7\u8F93\u5165\u5BC6\u7801",trigger:"blur"}]}),a=F({username:"admin",password:"123456"}),V=()=>{i.value==="password"?i.value="":i.value="password"},d=_=>{c.value=!0,_&&_.validate(o=>{if(o)setTimeout(async()=>{await C.login(a),await f.push({path:"/"}),$({title:G(),message:"\u6B22\u8FCE\u767B\u5F55 Vue Admin Perfect",type:"success",duration:3e3}),c.value=!0},1e3);else return console.log("error submit!"),!1})};return(_,o)=>{const E=n("UserFilled"),v=n("el-icon"),g=n("el-input"),p=n("el-form-item"),D=n("GoodsFilled"),k=n("svg-icon"),N=n("el-button"),S=n("el-form");return b(),A(S,{ref_key:"ruleFormRef",ref:e,model:a,rules:h,"label-width":"0"},{default:t(()=>[s(p,{label:"",prop:"username"},{default:t(()=>[s(g,{placeholder:"\u8BF7\u8F93\u5165\u7528\u6237\u540D",autoComplete:"on",style:{position:"relative"},modelValue:a.username,"onUpdate:modelValue":o[0]\|\|(o[0]=r=>a.username=r),onKeyup:o[1]\|\|(o[1]=w(r=>d(e.value),["enter","native"]))},{prefix:t(()=>[s(v,{class:"el-input__icon"},{default:t(()=>[s(E)]),_:1})]),_:1},8,["modelValue"])]),_:1}),s(p,{label:"",prop:"password"},{default:t(()=>[s(g,{placeholder:"\u8BF7\u8F93\u5165\u5BC6\u7801",autoComplete:"on",onKeyup:o[2]\|\|(o[2]=w(r=>d(e.value),["enter","native"])),modelValue:a.password,"onUpdate:modelValue":o[3]\|\|(o[3]=r=>a.password=r),type:i.value},{prefix:t(()=>[s(v,{class:"el-input__icon"},{default:t(()=>[s(D)]),_:1})]),suffix:t(()=>[u("div",{class:"show-pwd",onClick:V},[s(k,{"icon-class":i.value==="password"?"eye":"eye-open"},null,8,["icon-class"])])]),_:1},8,["modelValue","type"])]),_:1}),s(p,{style:{width:"100%"}},{default:t(()=>[s(N,{loading:c.value,class:"login-btn",type:"primary",onClick:o[4]\|\|(o[4]=r=>d(e.value))},{default:t(()=>[I("\u767B\u5F55")]),_:1},8,["loading"])]),_:1})]),_:1},8,["model","rules"])}}});const H=B(j,[["__scopeId","data-v-fe461ccb"]]),x=l=>(L("data-v-51215bf2"),l=l(),P(),l),z={class:"login-container"},J={class:"login-box"},M=x(()=>u("div",{class:"login-left"},[u("img",{src:q})],-1)),O={class:"login-form"},Q=x(()=>u("div",{class:"login-title"},[u("img",{class:"icon",src:R,alt:"logo"}),u("h2",{class:"title"},"Vue-Admin-Perfect")],-1)),W=y({__name:"index",setup(l){return(e,f)=>(b(),K("div",z,[u("div",J,[M,u("div",O,[Q,s(H)])])]))}});const Y=B(W,[["__scopeId","data-v-51215bf2"]]);export{Y as default};
			`@ -0,0 +1 @@`
			`import{_ as t,o as n,j as o,b as s,i as a}from"./index.901da429.js";const c={},r={style:{padding:"30px"}};function l(_,i){const e=a("el-alert");return n(),o("div",r,[s(e,{title:"menu 1-2-2",type:"warning",closable:!1})])}const p=t(c,[["render",l]]);export{p as default};`
			`@ -0,0 +1 @@`
			`import{_ as c,o as e,j as r,f as l,b as o,w as _,c as i,i as t,J as p}from"./index.901da429.js";const d={},m={class:"app-container"},f={class:"app-container-inner"};function u(v,x){const n=t("el-alert"),a=t("router-view");return e(),r("div",m,[l("div",f,[o(n,{title:"menu 1",closable:!1}),o(a,null,{default:_(({Component:s})=>[(e(),i(p(s)))]),_:1})])])}const w=c(d,[["render",u]]);export{w as default};`