update

backend/config.ini

@@ -20,5 +20,5 @@ name = evm_store
 backup_dir = backup
 evueapps_dir = evueapps
 launcher_dir = launcher
-host = 127.0.0.1
+host = 0.0.0.0
 port = 5001
\ No newline at end of file

backend/view/api.py

@@ -29,12 +29,21 @@ def stopApp():
         f.write(json.dumps(ret, indent=4))
     return ret
 
+@api.route("/monitor", methods=['GET', 'POST'])
+def action_monitor():
+    print(request.json)
+    print(request.data)
+    print(request.form)
+    print(type(request.json))
+
+    
+
+    return response_result(ResponseCode.OK)
+
 @api.route("/opqcp", methods=['POST'])
 def action_opqcp():
     params = request.json
-
     print(params)
-
     signalManager.actionOpqcp.emit(params)
 
     return response_result(ResponseCode.OK)

evm_monitor/.gitignore

+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

evm_monitor/README.md

+# vuedemo
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

evm_monitor/babel.config.js

+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

evm_monitor/controller.py

+'''
+Author: your name
+Date: 2021-06-28 16:56:59
+LastEditTime: 2021-06-28 17:20:52
+LastEditors: Please set LastEditors
+Description: In User Settings Edit
+FilePath: \ewebengine\tools\evm_monitor\controller.py
+'''
+
+from database import session, System, Lvgl, Evm, Image
+
+class SystemResource(object):
+    def get(self):
+        result = session.query(System).all()
+        print(result)
+        return result
+
+    def post(self, params):
+        print("============>", params)
+        result = System(**params)
+        session.add(result)
+        return session.commit()
+        
+    def put(self):
+        pass
+
+    def delete(self):
+        pass
+
+class LvglResource(object):
+    def get(self):
+        result = session.query(Lvgl).all()
+        print(result)
+        return result
+
+    def post(self, params):
+        result = Lvgl(**params)
+        session.add(result)
+        return session.commit()
+        
+    def put(self):
+        pass
+
+    def delete(self):
+        pass
+
+class EvmResource(object):
+    def get(self):
+        result = session.query(Evm).all()
+        print(result)
+        return result
+
+    def post(self, params):
+        result = Evm(**params)
+        session.add(result)
+        return session.commit()
+        
+    def put(self):
+        pass
+
+    def delete(self):
+        pass
+
+class ImageResource(object):
+    def get(self):
+        result = session.query(Image).all()
+        print(result)
+        return result
+
+    def post(self, params):
+        result = Image(**params)
+        session.add(result)
+        return session.commit()
+
+    def post_array(self, array):
+        t = []
+        for a in array:
+            t.append(Image(**a))
+        session.add_all(t)
+        return session.commit()
+        
+    def put(self):
+        pass
+
+    def delete(self):
+        pass
+
+systemResource = SystemResource()
+lvglResource = LvglResource()
+evmResource = EvmResource()
+imageResource = ImageResource()
+
+def insert_data(msg):
+    if msg.get("system"):
+        print(msg.get("system"))
+        res = systemResource.post(msg.get("system"))
+        print("!!!!!!", res)
+
+    if msg.get("lvgl"):
+        res = lvglResource.post(msg.get("lvgl"))
+        print("@@@@@@", res)
+
+    if msg.get("evm"):
+        res = evmResource.post(msg.get("evm"))
+        print("######", res)
+
+    if msg.get("image"):
+        res = imageResource.post_array(msg.get("image"))
+        print("$$$$$$", res)
\ No newline at end of file

evm_monitor/database.py

+'''
+Author: your name
+Date: 2021-06-28 16:43:12
+LastEditTime: 2021-06-28 19:08:29
+LastEditors: Please set LastEditors
+Description: In User Settings Edit
+FilePath: \ewebengine\tools\evm_monitor\database.py
+'''
+from datetime import datetime
+from sqlalchemy import create_engine
+from sqlalchemy import Column, Integer, String, Float
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+engine = create_engine('sqlite:///monitor.db?check_same_thread=False', echo=True)
+
+Base = declarative_base()
+
+def get_current_datetime():
+    return datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+class System(Base):
+    __tablename__ = 'monitor_system'
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    free_size = Column(Integer) # 单位：字节
+    timestamp = Column(String(50), default=get_current_datetime)
+
+class Lvgl(Base):
+    __tablename__ = 'monitor_lvgl'
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    total_size = Column(Integer) # 单位：字节
+    free_cnt = Column(Integer)
+    free_size = Column(Integer)
+    free_biggest_size = Column(Integer)
+    used_cnt = Column(Integer)
+    used_pct = Column(Integer)
+    frag_pct = Column(Integer)
+    timestamp = Column(String(50), default=get_current_datetime)
+
+class Evm(Base):
+    __tablename__ = 'monitor_evm'
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    total_size = Column(Integer) # 单位：字节
+    free_size = Column(Integer)
+    gc_usage = Column(Integer)
+    heap_total_size = Column(Integer)
+    heap_used_size = Column(Integer)
+    stack_total_size = Column(Integer)
+    stack_used_size = Column(Integer)
+    timestamp = Column(String(50), default=get_current_datetime)
+
+class Image(Base):
+    __tablename__ = 'monitor_image'
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    uri = Column(String(50))
+    length = Column(Integer)
+    png_uncompressed_size = Column(Integer)
+    png_total_count = Column(Integer)
+    png_file_size = Column(Integer)
+    timestamp = Column(String(50), default=get_current_datetime)
+
+Base.metadata.create_all(engine, checkfirst=True)
+
+# engine是2.2中创建的连接
+Session = sessionmaker(bind=engine)
+ 
+# 创建Session类实例
+session = Session()

evm_monitor/package.json

+{
+  "name": "web-creator-pro",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "clipboard": "^2.0.6",
+    "codemirror": "^5.50.0",
+    "core-js": "^3.9.0",
+    "dateformat": "^3.0.3",
+    "el-table-infinite-scroll": "^1.0.10",
+    "element-ui": "^2.13.0",
+    "js-cookie": "^2.2.1",
+    "local-storage": "^2.0.0",
+    "mockjs": "^1.1.0",
+    "moment": "^2.29.1",
+    "node-sass": "^4.14.1",
+    "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
+    "sass-loader": "^8.0.0",
+    "vue": "^2.6.12",
+    "vue-codemirror": "^4.0.6",
+    "vue-concise-slider": "^3.4.4",
+    "vue-count-to": "^1.0.13",
+    "vue-grid-layout": "^2.3.12",
+    "vue-loading-spinner": "^1.0.11",
+    "vue-plyr": "^7.0.0",
+    "vue-router": "^3.1.3",
+    "vue-star-rating": "^1.7.0",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-service": "^4.5.8",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.0.3",
+    "css-loader": "^5.0.1",
+    "eslint": "^7.13.0",
+    "eslint-config-tabsanity": "^1.0.25",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-vue": "^7.1.0",
+    "less": "^3.12.2",
+    "less-loader": "^7.1.0",
+    "node-sass": "^5.0.0",
+    "prettier": "^2.1.2",
+    "sass-loader": "^10.1.0",
+    "script-ext-html-webpack-plugin": "^2.1.3",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.2",
+    "vue-cli": "^2.9.6",
+    "vue-concise-slider": "^3.4.4",
+    "vue-template-compiler": "^2.6.12"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "no-console": "off",
+      "no-useless-escape": "off"
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

evm_monitor/public/index.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<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="shortcut icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon">
+    <link rel="png" href="<%= BASE_URL %>favicon.png">
+    <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>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.1.1/dist/gsap.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file

evm_monitor/running_monit.py

+'''
+Author: your name
+Date: 2021-06-28 14:39:58
+LastEditTime: 2021-06-28 21:12:41
+LastEditors: Please set LastEditors
+Description: In User Settings Edit
+FilePath: \ewebengine\tools\evm_monitor\running_monitor.py
+'''
+import tornado.ioloop
+import tornado.web
+from tornado.web import RequestHandler, StaticFileHandler
+from tornado.websocket import WebSocketHandler, WebSocketClosedError
+import json
+import signal
+import logging
+import pprint
+from controller import insert_data
+
+logger = logging.getLogger(__name__)
+
+class ObjectDict(dict):
+    """Makes a dictionary behave like an object, with attribute-style access.
+    """
+    def __getattr__(self, name):
+        try:
+            return self[name]
+        except KeyError:
+            raise AttributeError(name)
+
+    def __setattr__(self, name, value):
+        self[name] = value
+
+class GracefulExit(SystemExit):
+    code = 1
+
+def raise_graceful_exit(*args):
+    tornado.ioloop.IOLoop.current().stop()
+    print("Gracefully shutdown", args)
+    raise GracefulExit()
+
+class BaseHandler(RequestHandler):
+    """解决JS跨域请求问题"""
+    def set_default_headers(self):
+        self.set_header('Access-Control-Allow-Origin', '*')
+        self.set_header('Access-Control-Allow-Methods', 'POST, GET')
+        self.set_header('Access-Control-Max-Age', 1000)
+        self.set_header('Access-Control-Allow-Headers', '*')
+        self.set_header('Content-type', 'application/json')
+
+class WebsocketResponse(ObjectDict):
+    def __init__(self, type="Response", api_code=-1, message='fail', data=None, traceback=""):
+        super(WebsocketResponse, self).__init__()
+        self.type = type
+        self.code = api_code
+        self.message = message
+        self.data = data
+        self.traceback = traceback
+        if isinstance(self.data, list):
+            self.count = len(self.data)
+
+def pushmessage(func):
+    def send(*agrs, **kwargs):
+        self = agrs[0]
+        ret = func(*agrs, **kwargs)
+        if ret:
+            msg, binary = ret
+            try:
+                if isinstance(msg, WebsocketResponse) or isinstance(msg, dict):
+                    self.write_message(json.dumps(msg), binary)
+                elif isinstance(msg, str) or isinstance(msg, str):
+                    self.write_message(msg, binary)
+                else:
+                    self.write_message(repr(msg), binary)
+
+            except WebSocketClosedError as e:
+                self.on_close()
+    return send
+
+class BaseWebsocket(WebSocketHandler):
+    handlers = {}
+    def open(self):
+        className = self.__class__.__name__
+        logger.warning("websocket of %s is opened" % className)
+        if className not in self.handlers:
+            self.handlers[className] = set()
+        self.handlers[className].add(self)
+        pprint.pprint(self.handlers)
+
+    @pushmessage
+    def send(self, message, binary=False):
+        return message, binary
+
+    def on_close(self):
+        className = self.__class__.__name__
+        logger.warning("websocket of %s is closed" % className)
+        if className in self.handlers:
+            self.handlers[className].remove(self)
+
+    def check_origin(self, origin):
+        logger.info(origin)
+        return True
+
+    @classmethod
+    def broadcastMessage(cls, message, binary=False):
+        className = cls.__name__
+        pprint.pprint(cls.handlers)
+
+        message = json.dumps(message)
+
+        if className in cls.handlers:
+            for handler in cls.handlers[className]:
+                handler.send(message, binary)
+
+class NotifyHandler(BaseWebsocket):
+    """
+        建立与web前端的通信连接，发送状态信息报文
+    """
+
+    def open(self):
+        super(NotifyHandler, self).open()
+
+    def on_message(self, message):
+        print("hello,world", message)
+        logger.info(message)
+
+class MainHandler(BaseHandler):
+    def get(self,*args, **kwargs):
+        print("#############", args)
+        print("/////////////", kwargs)
+        print(self.request.path)    # 请求路径
+        print(self.request.method)  # 请求方法
+        print(self.request.host)    # IP地址
+        self.write("Hello, world")
+
+    def post(self):
+        data = tornado.escape.json_decode(self.request.body)
+        print("=====>", data, type(data))
+        
+        self.write(json.dumps({ 'code': 100, 'message': 'success' }))
+
+        message = {'system': {'free_size': 0}, 'lvgl': {'total_size': 5242880, 'free_cnt': 31, 'free_size': 1279664, 'free_biggest_size': 1205448, 'used_cnt': 832, 'used_pct': 76, 'frag_pct': 6}, 'evm': {'total_size': 2097152, 'free_size': 0, 'gc_usage': 50}, 'image': [{'uri': 'evue_launcher', 'length': 1043, 'png_total_count': 0, 'png_uncompressed_size': 0, 'png_file_size': 0}, {'uri': 'kdgs_1_storyList', 'length': 9608, 'png_total_count': 193, 'png_uncompressed_size': 370884, 'png_file_size': 209807}]}
+        insert_data(message)
+        NotifyHandler.broadcastMessage(message)
+
+class DeviceMessageHandler(BaseHandler):
+    def get(self):
+        self.write("Hello, world")
+
+    def post(self):
+        data = tornado.escape.json_decode(self.request.body)
+        print("=====>", data, type(data))
+
+        insert_data(data)
+
+        NotifyHandler.broadcastMessage(data)
+        self.write(json.dumps({ 'code': 100, 'message': 'success' }))
+
+def make_app():
+    return tornado.web.Application([
+        (r"/", MainHandler),
+        (r"/api/v1/evm_store/monitor", DeviceMessageHandler),
+        (r"/ws/v1/notify", NotifyHandler),
+        (r"/dist/(.*)", StaticFileHandler, { "path": "dist" }),
+    ])
+
+if __name__ == "__main__":
+    app = make_app()
+    app.listen(5001)
+
+    signal.signal(signal.SIGINT, raise_graceful_exit)
+    signal.signal(signal.SIGTERM, raise_graceful_exit)
+
+    tornado.ioloop.IOLoop.current().start()
\ No newline at end of file

evm_monitor/src/App.vue

+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+import defaultSetting from './settings'
+export default {
+  name: 'App',
+  mounted() {
+      let divTemp = document.createElement("title");
+      divTemp.innerHTML = defaultSetting.title;
+      document.querySelector("head").appendChild(divTemp)
+  },
+}
+</script>

evm_monitor/src/api/app-store.js

+import request from "@/utils/request";
+
+export function addApp(params) {
+    return request({
+        url: "/api/v1/evm_store/apps/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getAppsList(params) {
+    return request({
+        url: "/api/v1/evm_store/apps/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateApp(id, params) {
+    return request({
+        url: `/api/v1/evm_store/apps/update/${id}`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteApp(id) {
+    return request({
+        url: `/api/v1/evm_store/apps/delete/${id}`,
+        method: "post",
+    });
+}
+
+export function getBuildApp(id) {
+    return request({
+        url: `/api/v1/evm_store/apps/getBuildApp/${id}`,
+        method: "post"
+    })
+}
+
+export function rebuildApp(params) {
+    return request({
+        url: "/api/v1/evm_store/apps/get",
+        method: "post",
+        data: params,
+    });
+}
+
+export function buildApp(id) {
+    return request({
+        url: `/api/v1/evm_store/apps/build/${id}`,
+        method: "post",
+    });
+}
+
+export function getBuildLogsList(params) {
+    return request({
+        url: "/api/v1/evm_store/apps/buildLogs",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getDownloadList(params) {
+    return request({
+        url: "/api/v1/evm_store/download/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function addDownload(params) {
+    return request({
+        url: "/api/v1/evm_store/download/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateDownload(id, params) {
+    return request({
+        url: `/api/v1/evm_store/download/update/${id}`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteDownload(params) {
+    return request({
+        url: "/api/v1/evm_store/framework/delete",
+        method: "post",
+        data: params,
+    });
+}
+
+export function addDevice(params) {
+    return request({
+        url: "/api/v1/evm_store/device/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteDevice(id) {
+    return request({
+        url: `/api/v1/evm_store/device/delete/${id}`,
+        method: "post"
+    });
+}
+
+export function getDeviceList(params) {
+    return request({
+        url: "/api/v1/evm_store/device/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateDevice(id, params) {
+    return request({
+        url: `/api/v1/evm_store/device/update/${id}`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function addUser(params) {
+    // 增
+    return request({
+        url: "/api/v1/evm_store/user/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteUser(id) {
+    // 删
+    return request({
+        url: `/api/v1/evm_store/user/delete/${id}`,
+        method: "post",
+    });
+}
+
+export function getUser(params) {
+    return request({
+        url: "/api/v1/evm_store/user/get",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getUserList(params) {
+    // 查
+    return request({
+        url: "/api/v1/evm_store/user/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateUser(id, params) {
+    // 改
+    return request({
+        url: `/api/v1/evm_store/user/update/${id}`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateUserPassword(params) {
+    return request({
+        url: "/api/v1/evm_store/updatePassword",
+        method: "post",
+        data: params,
+    });
+}
+
+export function doLogin(params) {
+    return request({
+        url: "/api/v1/evm_store/login/login",
+        method: "post",
+        data: params,
+    });
+}
+
+export function doLogout(params) {
+    return request({
+        url: "/api/v1/evm_store/login/logout",
+        method: "post",
+        data: params,
+    });
+}
+
+export function doRegister(params) {
+    return request({
+        url: "/api/v1/evm_store/login/register",
+        method: "post",
+        data: params,
+    });
+}
+
+export function addAppLogs(params) {
+    return request({
+        url: "/api/v1/evm_store/appLogs/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteAppLogs(params) {
+    return request({
+        url: "/api/v1/evm_store/appLogs/delete",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getAppLogsList(params) {
+    return request({
+        url: "/api/v1/evm_store/appLogs/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateAppLogs(params) {
+    return request({
+        url: "/api/v1/evm_store/appLogs/update",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getConvertString(params) {
+    return request({
+        url: "/api/v1/evm_store/system/convertString",
+        method: "post",
+        data: params,
+    });
+}
+
+export function actionOpqcp(params) {
+    return request({
+        url: "/api/v1/evm_store/opqcp",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getTopicList(params) {
+    return request({
+        url: "/uowap/index",
+        method: "get",
+        params
+    });
+}
+
+export function getTabList(params) {
+    return request({
+        url: "/uowap/index",
+        method: "get",
+        params
+    });
+}
+
+export function getAppList(params) {
+    return request({
+        url: "/uowap/index",
+        method: "get",
+        params
+    });
+}
+
+export function getDataList(params) {
+    return request({
+        url: "/uowap/index",
+        method: "get",
+        params
+    });
+}

evm_monitor/src/assets/images/alipay.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1617084891406" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2122" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M902.095 652.871l-250.96-84.392s19.287-28.87 39.874-85.472c20.59-56.606 23.539-87.689 23.539-87.689l-162.454-1.339v-55.487l196.739-1.387v-39.227H552.055v-89.29h-96.358v89.294H272.133v39.227l183.564-1.304v59.513h-147.24v31.079h303.064s-3.337 25.223-14.955 56.606c-11.615 31.38-23.58 58.862-23.58 58.862s-142.3-49.804-217.285-49.804c-74.985 0-166.182 30.123-175.024 117.55-8.8 87.383 42.481 134.716 114.728 152.139 72.256 17.513 138.962-0.173 197.04-28.607 58.087-28.391 115.081-92.933 115.081-92.933l292.486 142.041c-11.932 69.3-72.067 119.914-142.387 119.844H266.37c-79.714 0.078-144.392-64.483-144.466-144.194V266.374c-0.074-79.72 64.493-144.399 144.205-144.47h491.519c79.714-0.073 144.396 64.49 144.466 144.203v386.764z m-365.76-48.895s-91.302 115.262-198.879 115.262c-107.623 0-130.218-54.767-130.218-94.155 0-39.34 22.373-82.144 113.943-88.333 91.519-6.18 215.2 67.226 215.2 67.226h-0.047z" fill="#02A9F1" p-id="2123"></path></svg>
\ No newline at end of file

evm_monitor/src/assets/images/com.qq.weixin.deepin.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>微信</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#A2EC60" offset="0%"></stop>
+            <stop stop-color="#79CC0D" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FCFCFC" offset="0%"></stop>
+            <stop stop-color="#E7ECED" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="微信">
+            <image id="Bitmap" x="0" y="6" width="48" height="39" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAnCAYAAABJ0cukAAAABGdBTUEAA1teXP8meAAAA11JREFUWAnN1+ly2kAQBGA7932+/wPmT1Kp3CG2M9/GTdaAbAECMVXDntrtnuldifOz7ey8m67et7uhs6vrxmrZz5mkPgRgdfGA7UvgevdMP561L7t55oSU+t6WTYYWCqB7NUEdmIuhyQP9nr1fDvgqmYFHxncPEUi/jQH4U27zfcyaD8onJQLgqtkomykX5VOlXRCy9iRrrhLowdtM5Kc2wPnD63Kv9XsCPXg631br2wDpSewlTfruLRo9JPjsB7h9ZELwdrIQsIBscJo/lkWi9t2JRE9A9H8fC3m3jz3tHQl3Q3dXEfCgUhSOIZ3a5oblNrL/1pYMzAU+gAUuWUjfqDIZQGCv22DUbsOTnAUEgmf0eQDcQ4/LaTHprOpRzb5RQ0gEwK1ksGYmzQW+Aaifn6lUiUSIUEbUsYYxrD0bMupzG8BkxWHM+VjLRiSUl8kx3wGFa5Ql+hsDjJ20mPRo1HLzTIJPcJGItBqSSMg1hsBaitqs0/gR6JCAs2ElIaZBRhjO8TaubUcZEpF9k5ZGoq58Ue42iO6qenJGLa79JYEeIUm9Kv/ad55gPQf6spdQ7lhn4Vn59xMEHkjUgsRFCGRAWhB5Uv6y/Fv5KRoCAr1YJQAsEpzOjPdvyGqehCEA3yJaCirRd0h+lQPfDkqVp2ZL3HkP9ABDwmt8E4Hn1e/KndPs387skskAmp7Am5rDIztjXiwypm5BYx/LZfCQ5oyS9tVdBIB4Wv6+nO4c6nwvyR7ASmPqHMkP5Ycy0bcnhdxKQGQjF2xF1VtaPwM64NWZxT2D9I/yQ9i7WtTaDcdQBsgBQxEHjkSGzkQNtTlKc9jbcplKW98UBjwsAtlkK+VDhoRJmHJtvsn6MXWZQUKkrDGFkbGr01fC8t/jbQRs2gPTHmMAc5kTMeT3/UD0eUOaX8rzrdaCeReBmr+ThYTydbm3OjntKilvXYHweRM1VPXfrdEqB/gB3mZAk5TbCRkHPeeqRbHaTB+JICvaLo2MO6vqzpV1l+ahQ1nWlmUAAAdQNNX1h4gydaTVkf5U/rncva+9dqZMPLQFnBLo3jMGg8iKslI/ooBrywbwyqNloPa6YUCxvkxdf+Si1I9oMiUrLgJyzLyq/l+sNWb42USgx2WcdIDu3ZxmfwEDos38MEEH9AAAAABJRU5ErkJggg=="></image>
+            <g id="Group" transform="translate(2.000000, 7.000000)">
+                <path d="M5.44086022,27.9139785 C5.03777931,27.5108976 5.5,25.5 5.4268044,23.1689488 C2.09828764,20.7419141 0,17.1964111 0,13.2473118 C0,5.93102353 7.20195714,0 16.0860215,0 C24.9700859,0 32.172043,5.93102353 32.172043,13.2473118 C32.172043,20.5636001 24.9700859,26.4946237 16.0860215,26.4946237 C14.1408956,26.4946237 12.276405,26.2103074 10.5504841,25.6893854 C8,26.4946237 6.22998122,28.5058192 5.44086022,27.9139785 Z" id="Combined-Shape" fill="url(#linearGradient-1)"></path>
+                <path d="M11.1182796,10.8817204 C9.94244752,10.8817204 8.98924731,9.92852022 8.98924731,8.75268817 C8.98924731,7.57685612 9.94244752,6.62365591 11.1182796,6.62365591 C12.2941116,6.62365591 13.2473118,7.57685612 13.2473118,8.75268817 C13.2473118,9.92852022 12.2941116,10.8817204 11.1182796,10.8817204 Z M21.5268817,10.8817204 C20.3510497,10.8817204 19.3978495,9.92852022 19.3978495,8.75268817 C19.3978495,7.57685612 20.3510497,6.62365591 21.5268817,6.62365591 C22.7027138,6.62365591 23.655914,7.57685612 23.655914,8.75268817 C23.655914,9.92852022 22.7027138,10.8817204 21.5268817,10.8817204 Z" id="Combined-Shape" fill="#166E16"></path>
+                <path d="M39.5192916,35.2890576 C39.9228462,35.0463938 39.5,33 39.6047822,31.3270848 C42.3030259,29.3299594 44,26.4334956 44,23.2106262 C44,17.1854476 38.0689765,12.3010753 30.7526882,12.3010753 C23.4363999,12.3010753 17.5053763,17.1854476 17.5053763,23.2106262 C17.5053763,29.2358048 23.4363999,34.1201771 30.7526882,34.1201771 C32.3545566,34.1201771 33.8900194,33.8860343 35.311366,33.4570397 C37,34.1201771 38.8694272,35.7764558 39.5192916,35.2890576 Z" id="Combined-Shape" fill="url(#linearGradient-2)"></path>
+                <path d="M26.7044655,21.181227 C25.7585739,21.181227 24.9917774,20.4144304 24.9917774,19.4685388 C24.9917774,18.5226473 25.7585739,17.7558507 26.7044655,17.7558507 C27.650357,17.7558507 28.4171536,18.5226473 28.4171536,19.4685388 C28.4171536,20.4144304 27.650357,21.181227 26.7044655,21.181227 Z M35.2762555,21.181227 C34.330364,21.181227 33.5635674,20.4144304 33.5635674,19.4685388 C33.5635674,18.5226473 34.330364,17.7558507 35.2762555,17.7558507 C36.222147,17.7558507 36.9889436,18.5226473 36.9889436,19.4685388 C36.9889436,20.4144304 36.222147,21.181227 35.2762555,21.181227 Z" id="Combined-Shape" fill="#7B7F7F"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

evm_monitor/src/assets/images/dde-calendar.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="dde-calendar64-a" width="131.5%" height="133.3%" x="-14.8%" y="-14.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <radialGradient id="dde-calendar64-b" cx="54.324%" cy="55.779%" r="61.914%" fx="54.324%" fy="55.779%" gradientTransform="matrix(-.81914 -.50611 .72543 -.9141 .584 1.343)">
+      <stop offset="0%"/>
+      <stop offset="100%" stop-opacity=".148"/>
+    </radialGradient>
+    <path id="dde-calendar64-d" d="M25.125,38.25 L25.125,35.4420068 L17.5006017,35.4420068 L23.9204272,27.5420068 C24.7234757,26.5388322 25.125,25.3923469 25.125,24.102551 C25.1067489,22.4903061 24.554653,21.1602041 23.4687124,20.1122449 C22.4010229,19.0553288 21.0093763,18.5179138 19.2937726,18.5 C17.7606799,18.5179138 16.4694144,19.0463719 15.4199759,20.0853741 C14.3796631,21.1512472 13.8230044,22.499263 13.75,24.1294218 L13.75,24.1294218 L16.5971721,24.1294218 C16.6975531,23.2337302 17.0169475,22.5395692 17.555355,22.0469388 C18.0755114,21.5543084 18.7279884,21.3079932 19.5127858,21.3079932 C20.3979643,21.325907 21.0823807,21.6080499 21.5660349,22.1544218 C22.031438,22.7007937 22.2641396,23.3412132 22.2641396,24.0756803 C22.2641396,24.3533447 22.2276374,24.6489229 22.154633,24.962415 C22.0451264,25.2938209 21.8398014,25.6520975 21.5386582,26.0372449 L21.5386582,26.0372449 L13.75,35.6032313 L13.75,38.25 L25.125,38.25 Z M32.8548193,38.125 L39.625,21.3131859 L39.625,18.5 L28.25,18.5 L28.25,24.1532922 L31.1143072,24.1532922 L31.1143072,21.3131859 L36.4180723,21.3131859 L29.6615964,38.125 L32.8548193,38.125 Z"/>
+    <filter id="dde-calendar64-c" width="142.5%" height="155.7%" x="-21.3%" y="-17.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0.423732517   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+    <linearGradient id="dde-calendar64-g" x1="69.809%" x2="57.001%" y1="71.097%" y2="57.701%">
+      <stop offset="0%" stop-color="#C6C6C6"/>
+      <stop offset="53.052%" stop-color="#E7E7E7"/>
+      <stop offset="100%" stop-color="#F4F4F4"/>
+    </linearGradient>
+    <path id="dde-calendar64-f" d="M54,36.5 C54,36.5 52.7578833,40.9842333 52,42.5 C51,44.5 49.9672131,44.1321429 48,46.5 C46.0327869,48.8678571 47.3606557,49.325 44.4098361,51.8142857 C42.8284824,53.1483019 38.5,54 38.5,54 C50.7336066,54 54,42.9964286 54,36.5 Z"/>
+    <filter id="dde-calendar64-e" width="125.8%" height="122.9%" x="-12.9%" y="-5.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#dde-calendar64-a)" transform="rotate(-8 65.252 -6.252)">
+    <rect width="54" height="54" fill="#FFF" rx="9.75"/>
+    <path fill="url(#dde-calendar64-b)" fill-opacity=".39" d="M54,37 L54,44.25 C54,49.6347763 49.6347763,54 44.25,54 L39,54 C44.125,53.375 47.7291667,51.3958333 49.8125,48.0625 C51.8958333,44.7291667 53.2916667,41.0416667 54,37 Z"/>
+    <path fill="#E06164" fill-rule="nonzero" d="M13.25875,13 L13.25875,9.815 C13.25875,9.2375 13.18,8.40625 13.13625,7.82 L13.17125,7.82 L13.67875,9.3075 L14.8075,12.37875 L15.4375,12.37875 L16.5575,9.3075 L17.07375,7.82 L17.10875,7.82 C17.05625,8.40625 16.9775,9.2375 16.9775,9.815 L16.9775,13 L17.9225,13 L17.9225,6.55125 L16.75,6.55125 L15.58625,9.815 C15.4375,10.24375 15.315,10.68125 15.16625,11.11 L15.1225,11.11 C14.97375,10.68125 14.8425,10.24375 14.69375,9.815 L13.5125,6.55125 L12.34875,6.55125 L12.34875,13 L13.25875,13 Z M19.795,13 L20.34625,11.1625 L22.58625,11.1625 L23.12875,13 L24.205,13 L22.07,6.55125 L20.8975,6.55125 L18.7625,13 L19.795,13 Z M22.34125,10.36625 L20.5825,10.36625 L20.845,9.5 C21.055,8.8 21.25625,8.09125 21.44,7.35625 L21.48375,7.35625 C21.67625,8.0825 21.86875,8.8 22.0875,9.5 L22.34125,10.36625 Z M26.06875,13 L26.06875,10.40125 L27.11,10.40125 L28.57125,13 L29.7175,13 L28.1425,10.27 C28.95625,10.01625 29.49,9.42125 29.49,8.42375 C29.49,7.0325 28.4925,6.55125 27.1625,6.55125 L25.05375,6.55125 L25.05375,13 L26.06875,13 Z M27.04,9.5875 L26.06875,9.5875 L26.06875,7.37375 L27.04,7.37375 C27.97625,7.37375 28.48375,7.645 28.48375,8.42375 C28.48375,9.2025 27.97625,9.5875 27.04,9.5875 Z M33.305,13.11375 C34.13625,13.11375 34.7925,12.78125 35.30875,12.18625 L34.76625,11.5475 C34.38125,11.9675 33.935,12.23 33.34,12.23 C32.2025,12.23 31.485,11.29375 31.485,9.7625 C31.485,8.24875 32.255,7.32125 33.36625,7.32125 C33.89125,7.32125 34.29375,7.5575 34.62625,7.89875 L35.1775,7.25125 C34.78375,6.8225 34.15375,6.4375 33.34875,6.4375 C31.72125,6.4375 30.44375,7.6975 30.44375,9.7975 C30.44375,11.90625 31.68625,13.11375 33.305,13.11375 Z M37.46125,13 L37.46125,10.06875 L40.2175,10.06875 L40.2175,13 L41.2325,13 L41.2325,6.55125 L40.2175,6.55125 L40.2175,9.185 L37.46125,9.185 L37.46125,6.55125 L36.44625,6.55125 L36.44625,13 L37.46125,13 Z"/>
+    <g fill-rule="nonzero">
+      <use fill="#000" filter="url(#dde-calendar64-c)" xlink:href="#dde-calendar64-d"/>
+      <use fill="#2D394F" xlink:href="#dde-calendar64-d"/>
+    </g>
+    <path fill="#2D394F" fill-rule="nonzero" d="M17.13,46.5 L17.13,44.68 C17.13,44.35 17.085,43.875 17.06,43.54 L17.08,43.54 L17.37,44.39 L18.015,46.145 L18.375,46.145 L19.015,44.39 L19.31,43.54 L19.33,43.54 C19.3,43.875 19.255,44.35 19.255,44.68 L19.255,46.5 L19.795,46.5 L19.795,42.815 L19.125,42.815 L18.46,44.68 L18.22,45.42 L18.22,45.42 L18.195,45.42 C18.11,45.175 18.035,44.925 17.95,44.68 L17.275,42.815 L16.61,42.815 L16.61,46.5 L17.13,46.5 Z M22.16,46.565 C23.105,46.565 23.765,45.83 23.765,44.645 C23.765,43.46 23.105,42.75 22.16,42.75 C21.215,42.75 20.56,43.46 20.56,44.645 C20.56,45.83 21.215,46.565 22.16,46.565 Z M22.16,46.06 C21.55,46.06 21.155,45.505 21.155,44.645 C21.155,43.78 21.55,43.255 22.16,43.255 C22.77,43.255 23.17,43.78 23.17,44.645 C23.17,45.505 22.77,46.06 22.16,46.06 Z M25.08,46.5 L25.08,44.765 C25.08,44.365 25.035,43.94 25.005,43.56 L25.03,43.56 L25.415,44.33 L26.635,46.5 L27.23,46.5 L27.23,42.815 L26.68,42.815 L26.68,44.535 C26.68,44.935 26.725,45.38 26.755,45.76 L26.73,45.76 L26.345,44.98 L25.125,42.815 L24.53,42.815 L24.53,46.5 L25.08,46.5 Z M29.185,46.5 C30.285,46.5 30.93,45.84 30.93,44.645 C30.93,43.445 30.285,42.815 29.155,42.815 L28.2,42.815 L28.2,46.5 L29.185,46.5 Z M29.115,46.025 L28.78,46.025 L28.78,43.29 L29.115,43.29 C29.905,43.29 30.33,43.725 30.33,44.645 C30.33,45.56 29.905,46.025 29.115,46.025 Z M31.8,46.5 L32.115,45.45 L33.395,45.45 L33.705,46.5 L34.32,46.5 L33.1,42.815 L32.43,42.815 L31.21,46.5 L31.8,46.5 Z M33.255,44.995 L32.25,44.995 L32.4,44.5 C32.52,44.1 32.635,43.695 32.74,43.275 L32.765,43.275 C32.875,43.69 32.985,44.1 33.11,44.5 L33.255,44.995 Z M35.99,46.5 L35.99,45.105 L37.1,42.815 L36.495,42.815 L36.065,43.795 C35.955,44.07 35.835,44.325 35.715,44.605 L35.695,44.605 C35.57,44.325 35.465,44.07 35.35,43.795 L34.925,42.815 L34.305,42.815 L35.41,45.105 L35.41,46.5 L35.99,46.5 Z"/>
+    <use fill="#000" filter="url(#dde-calendar64-e)" xlink:href="#dde-calendar64-f"/>
+    <use fill="url(#dde-calendar64-g)" xlink:href="#dde-calendar64-f"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/dde-introduction.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="dde-introduction-a" width="127.6%" height="127.6%" x="-13.8%" y="-13.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="dde-introduction-b" x1="42.153%" x2="42.153%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00D8A5"/>
+      <stop offset="100%" stop-color="#0058FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#dde-introduction-a)" transform="translate(3 3)">
+    <circle cx="29" cy="29" r="29" fill="url(#dde-introduction-b)"/>
+    <g transform="translate(3 8)">
+      <path fill="#404040" stroke="#373737" stroke-width="1.5" d="M19.3823243,38.9794317 L39.8222282,38.9794317 C40.7887265,38.9794317 41.5722282,38.19593 41.5722282,37.2294317 L41.5722282,15.0743836 C41.5722282,8.9468109 36.604849,3.97943173 30.4772762,3.97943173 C24.3497035,3.97943173 19.3823243,8.9468109 19.3823243,15.0743836 L19.3823243,38.9794317 Z" transform="rotate(45 30.477 21.48)"/>
+      <path fill="#FFF" d="M15.1639045,9.4846976 L37.2312122,9.4846976 C38.6119241,9.4846976 39.7312122,10.6039857 39.7312122,11.9846976 L39.7312122,30.8500822 C39.7312122,32.2307941 38.6119241,33.3500822 37.2312122,33.3500822 L15.1639045,33.3500822 C8.57366052,33.3500822 3.2312122,28.0076339 3.2312122,21.4173899 C3.2312122,14.8271459 8.57366052,9.4846976 15.1639045,9.4846976 Z" transform="rotate(45 21.481 21.417)"/>
+      <rect width="12.459" height="1" x="27.215" y="25.279" fill="#606060" stroke="#373737" stroke-width="1.75" transform="rotate(45 33.445 25.282)"/>
+      <rect width="12.459" height="1" x="23.493" y="29.002" fill="#606060" stroke="#373737" stroke-width="1.75" transform="rotate(45 29.722 29.004)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M12.5308085,29.351265 L18.1510008,29.351265 L18.1510008,24.6108804 C18.1510008,23.0589071 16.8928779,21.8007842 15.3409046,21.8007842 C13.7889314,21.8007842 12.5308085,23.0589071 12.5308085,24.6108804 L12.5308085,29.351265 Z" transform="rotate(45 15.34 25.576)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M16.5528822,33.1978579 L21.8221129,33.1978579 L21.8221129,28.2819925 C21.8221129,26.8269346 20.6425554,25.6473771 19.1874975,25.6473771 C17.7324396,25.6473771 16.5528822,26.8269346 16.5528822,28.2819925 L16.5528822,33.1978579 Z" transform="rotate(45 19.187 29.423)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M20.2753914,36.9203672 L25.5446222,36.9203672 L25.5446222,32.0045018 C25.5446222,30.5494439 24.3650647,29.3698864 22.9100068,29.3698864 C21.4549489,29.3698864 20.2753914,30.5494439 20.2753914,32.0045018 L20.2753914,36.9203672 Z" transform="rotate(45 22.91 33.145)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M23.9465035,40.7669601 L27.9416958,40.7669601 C28.8391586,40.7669601 29.5666958,40.0394228 29.5666958,39.1419601 L29.5666958,36.0265754 C29.5666958,34.4746022 28.3085729,33.2164793 26.7565997,33.2164793 C25.2046264,33.2164793 23.9465035,34.4746022 23.9465035,36.0265754 L23.9465035,40.7669601 Z" transform="rotate(45 26.757 36.992)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M27.1749155,8.83972418 L27.1749155,15.5373646 C27.1749155,19.1336191 24.4251259,22.0489594 21.0330885,22.0489594 L21.0330885,8.83972418 L21.0330885,8.83972418" transform="rotate(45 24.104 15.444)"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-album.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-album-a" width="131.7%" height="134.5%" x="-15.9%" y="-17.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <path id="deepin-album-c" d="M2.83312617,9.82192651 C2.83536468,6.50555966 5.51760761,3.8153153 8.84194795,3.81308556 L53.192074,3.78333859 C56.5084161,3.78111422 59.1950254,6.47140662 59.1927894,9.78412438 L59.1668738,48.1780735 C59.1646353,51.4944403 56.4823924,54.1846847 53.158052,54.1869144 L8.80792604,54.2166614 C5.49158392,54.2188858 2.80497458,51.5285934 2.80721063,48.2158756 L2.83312617,9.82192651 Z"/>
+    <filter id="deepin-album-b" width="110.6%" height="111.9%" x="-5.3%" y="-5.9%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+    <rect id="deepin-album-e" width="56" height="50" x="3" y="4" rx="6"/>
+    <filter id="deepin-album-d" width="110.7%" height="112%" x="-5.4%" y="-6%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+    <linearGradient id="deepin-album-h" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#FFF3E7"/>
+    </linearGradient>
+    <rect id="deepin-album-g" width="56.364" height="50.4" x="0" y="0" rx="6"/>
+    <filter id="deepin-album-f" width="110.6%" height="111.9%" x="-5.3%" y="-6%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+    <linearGradient id="deepin-album-j" x1="50%" x2="50%" y1="100%" y2="0%">
+      <stop offset="0%" stop-color="#D14848"/>
+      <stop offset="100%" stop-color="#FF9E00"/>
+    </linearGradient>
+    <rect id="deepin-album-i" width="50.727" height="36.4" x="0" y="0" rx="4"/>
+    <linearGradient id="deepin-album-l" x1="50%" x2="41.314%" y1="34.201%" y2="69.988%">
+      <stop offset="0%" stop-color="#FF3C14" stop-opacity=".8"/>
+      <stop offset="100%" stop-color="#4A00C1" stop-opacity=".899"/>
+    </linearGradient>
+    <linearGradient id="deepin-album-m" x1="50%" x2="50%" y1="11.914%" y2="89.546%">
+      <stop offset="0%" stop-color="#FFD332" stop-opacity=".3"/>
+      <stop offset="100%" stop-color="#002DFF" stop-opacity=".5"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-album-a)" transform="translate(1 3)">
+    <g opacity=".5" transform="rotate(6 31 29)">
+      <use fill="#000" filter="url(#deepin-album-b)" xlink:href="#deepin-album-c"/>
+      <use fill="#FFF" fill-opacity=".8" xlink:href="#deepin-album-c"/>
+    </g>
+    <g opacity=".5">
+      <use fill="#000" filter="url(#deepin-album-d)" xlink:href="#deepin-album-e"/>
+      <use fill="#FFF" fill-opacity=".8" xlink:href="#deepin-album-e"/>
+    </g>
+    <g transform="rotate(-6 65.845 .213)">
+      <use fill="#000" filter="url(#deepin-album-f)" xlink:href="#deepin-album-g"/>
+      <use fill="url(#deepin-album-h)" xlink:href="#deepin-album-g"/>
+      <g transform="translate(2.818 2.8)">
+        <mask id="deepin-album-k" fill="#fff">
+          <use xlink:href="#deepin-album-i"/>
+        </mask>
+        <use fill="url(#deepin-album-j)" xlink:href="#deepin-album-i"/>
+        <ellipse cx="42.273" cy="7" fill="#FFF7A1" mask="url(#deepin-album-k)" rx="2.818" ry="2.8"/>
+        <path fill="url(#deepin-album-l)" d="M-1.40909091,36.4 L18.7414711,10.9192893 C20.4532434,8.75472559 23.225675,8.75105877 24.9403471,10.9192893 L45.0909091,36.4 L-1.40909091,36.4 Z" mask="url(#deepin-album-k)"/>
+        <path fill="url(#deepin-album-m)" d="M14.0909091,39.2 L31.4749163,16.5679177 C33.1581758,14.3764973 35.8870809,14.3762396 37.5705383,16.5679177 L54.9545455,39.2 L14.0909091,39.2 Z" mask="url(#deepin-album-k)"/>
+      </g>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-calculator.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-calculator-a" width="129.6%" height="129.6%" x="-14.8%" y="-14.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <radialGradient id="deepin-calculator-b" cx="50%" cy="9.268%" r="92.618%" fx="50%" fy="9.268%">
+      <stop offset="0%" stop-color="#35DCFF"/>
+      <stop offset="100%" stop-color="#0068FF"/>
+    </radialGradient>
+    <linearGradient id="deepin-calculator-c" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#FFF" stop-opacity=".8"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-calculator-a)" transform="translate(5 5)">
+    <path fill="url(#deepin-calculator-b)" d="M7.85454545,0 L46.1454545,0 C50.4834002,9.13107275e-17 54,3.51659978 54,7.85454545 L54,46.1454545 C54,50.4834002 50.4834002,54 46.1454545,54 L7.85454545,54 C3.51659978,54 7.04865012e-15,50.4834002 0,46.1454545 L0,7.85454545 C3.56933292e-16,3.51659978 3.51659978,3.46140295e-15 7.85454545,0 Z"/>
+    <polygon fill="#FFF" points="14.311 40.378 17.757 36.932 17.068 36.243 13.622 39.689 10.176 36.243 9.486 36.932 12.932 40.378 9.486 43.824 10.176 44.514 13.622 41.068 17.068 44.514 17.757 43.824 14.311 40.378"/>
+    <path fill="url(#deepin-calculator-c)" d="M54,27 L54,46.1454545 C54,50.4834002 50.4834002,54 46.1454545,54 L27,54 L27,27 L54,27 Z M45,42 L36,42 L36,43 L45,43 L45,42 Z M45,38 L36,38 L36,39 L45,39 L45,38 Z M27,0 L27,27 L0,27 L0,7.85454545 C0,3.51659978 3.51659978,0 7.85454545,0 L27,0 Z M14,8 L13,8 L13,13 L8,13 L8,14 L13,14 L13,19 L14,19 L14,14 L19,14 L19,13 L14,13 L14,8 Z"/>
+    <rect width="11" height="1" x="35" y="13" fill="#FFF"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-feedback.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-feedback-a" width="129.1%" height="138.2%" x="-14.5%" y="-23.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-feedback-b" x1="26.222%" x2="66.963%" y1="-1.572%" y2="82.336%">
+      <stop offset="0%" stop-color="#90FF8A"/>
+      <stop offset="100%" stop-color="#00B9E4"/>
+    </linearGradient>
+    <linearGradient id="deepin-feedback-c" x1="45.043%" x2="16.292%" y1="61.352%" y2="35.889%">
+      <stop offset="0%" stop-color="#FFF" stop-opacity=".494"/>
+      <stop offset="100%" stop-color="#FFF"/>
+    </linearGradient>
+    <filter id="deepin-feedback-d" width="262.5%" height="132.5%" x="-81.2%" y="-16.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.35 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-feedback-e" x1="0%" x2="80.854%" y1="33.666%" y2="33.666%">
+      <stop offset="0%" stop-color="#E6D049"/>
+      <stop offset="100%" stop-color="#EC9500"/>
+    </linearGradient>
+    <linearGradient id="deepin-feedback-f" x1="0%" x2="89.296%" y1="55.519%" y2="55.519%">
+      <stop offset="0%" stop-color="#F6F6F6"/>
+      <stop offset="100%" stop-color="#747474"/>
+    </linearGradient>
+    <linearGradient id="deepin-feedback-g" x1="-3.437%" x2="86.205%" y1="31.932%" y2="31.932%">
+      <stop offset="0%" stop-color="#5E5E5E"/>
+      <stop offset="100%" stop-color="#373737"/>
+    </linearGradient>
+    <linearGradient id="deepin-feedback-h" x1="2.516%" x2="88.854%" y1="32.939%" y2="32.939%">
+      <stop offset="0%" stop-color="#FFEACA"/>
+      <stop offset="100%" stop-color="#E07431"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-feedback-a)" transform="translate(4 5)">
+    <path fill="url(#deepin-feedback-b)" d="M7.5,6 L47.5,6 C51.6421356,6 55,9.35786438 55,13.5 L55,39.5 C55.0036438,43.6421356 51.6457794,47 47.5036438,47 C47.5024289,47 47.501214,46.9999997 47.5000009,46.9963554 L15.848196,46.9809741 C15.5432901,46.9808259 15.2488437,47.092127 15.0202753,47.2939292 L8.03865662,53.457974 C7.77989887,53.6864302 7.38493389,53.661866 7.15647764,53.4031083 C7.05564579,53.2889025 7,53.1418 7,52.9894516 L7,46.9807441 L7,46.9807441 C3.13400675,46.9807441 -6.04135607e-15,43.8467374 0,39.9807441 L0,13.5 C-1.39544373e-15,9.35786438 3.35786438,6 7.5,6 Z"/>
+    <path fill="url(#deepin-feedback-c)" fill-rule="nonzero" d="M41.5,32 C42.3284271,32 43,32.6715729 43,33.5 C43,34.3284271 42.3284271,35 41.5,35 L12.5,35 C11.6715729,35 11,34.3284271 11,33.5 C11,32.6715729 11.6715729,32 12.5,32 L41.5,32 Z M41.5,25 C42.3284271,25 43,25.6715729 43,26.5 C43,27.3284271 42.3284271,28 41.5,28 L12.5,28 C11.6715729,28 11,27.3284271 11,26.5 C11,25.6715729 11.6715729,25 12.5,25 L41.5,25 Z M41.5,18 C42.3284271,18 43,18.6715729 43,19.5 C43,20.3284271 42.3284271,21 41.5,21 L12.5,21 C11.6715729,21 11,20.3284271 11,19.5 C11,18.6715729 11.6715729,18 12.5,18 L41.5,18 Z"/>
+    <g filter="url(#deepin-feedback-d)" transform="translate(41.5)">
+      <path fill="url(#deepin-feedback-e)" d="M1.75,0 L6.25,0 C6.94035594,-1.26816328e-16 7.5,0.559644063 7.5,1.25 L7.5,5 L7.5,5 L0.5,5 L0.5,1.25 C0.5,0.559644063 1.05964406,1.26816328e-16 1.75,0 Z"/>
+      <rect width="7" height="3" x=".5" y="6" fill="url(#deepin-feedback-f)"/>
+      <rect width="7" height="20" x=".5" y="10" fill="url(#deepin-feedback-g)"/>
+      <polygon fill="url(#deepin-feedback-h)" points=".5 31 7.5 31 6.5 35 1.5 35"/>
+      <path fill="#312F2F" d="M2,36 L6,36 L4.21706079,39.1201436 C4.14855829,39.240023 3.99584463,39.2816722 3.87596527,39.2131697 C3.83720745,39.1910224 3.80508654,39.1589014 3.78293921,39.1201436 L2,36 L2,36 Z"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-image-viewer.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-image-viewer-a" width="132.3%" height="132.2%" x="-19.4%" y="-13.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-image-viewer-b" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#D6D9ED"/>
+    </linearGradient>
+    <linearGradient id="deepin-image-viewer-d" x1="50%" x2="50%" y1="100%" y2="1.926%">
+      <stop offset="0%" stop-color="#4B7BCF"/>
+      <stop offset="100%" stop-color="#3A2EC8"/>
+    </linearGradient>
+    <rect id="deepin-image-viewer-c" width="49.125" height="33.75" x=".122" y=".096" rx="4"/>
+    <linearGradient id="deepin-image-viewer-f" x1="49.803%" x2="41.314%" y1="35.88%" y2="68.829%">
+      <stop offset="0%" stop-color="#40E2E8"/>
+      <stop offset="47.667%" stop-color="#2A7ECA"/>
+      <stop offset="100%" stop-color="#332075"/>
+    </linearGradient>
+    <linearGradient id="deepin-image-viewer-g" x1="50%" x2="50%" y1="11.914%" y2="100%">
+      <stop offset="0%" stop-color="#67CEFF" stop-opacity=".8"/>
+      <stop offset="100%" stop-color="#00CDFF"/>
+    </linearGradient>
+    <filter id="deepin-image-viewer-h" width="133.3%" height="129.4%" x="-18.2%" y="-17.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="-1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0924666824   0 0 0 0 0.218528561   0 0 0 0 0.62647192  0 0 0 0.302474869 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <circle id="deepin-image-viewer-i" cx="12.51" cy="12.5" r="12.5"/>
+    <linearGradient id="deepin-image-viewer-m" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#E7E7E7"/>
+    </linearGradient>
+    <rect id="deepin-image-viewer-l" width="66.125" height="57.375" x=".021" y=".018" rx="6"/>
+    <filter id="deepin-image-viewer-k" width="109.1%" height="110.5%" x="-4.5%" y="-5.2%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+    <linearGradient id="deepin-image-viewer-o" x1="50%" x2="50%" y1="100%" y2="1.926%">
+      <stop offset="0%" stop-color="#4068AD"/>
+      <stop offset="100%" stop-color="#352E86"/>
+    </linearGradient>
+    <rect id="deepin-image-viewer-n" width="59.531" height="41.484" x="0" y="0" rx="4"/>
+    <linearGradient id="deepin-image-viewer-q" x1="49.803%" x2="41.314%" y1="35.865%" y2="68.85%">
+      <stop offset="0%" stop-color="#40D0D5"/>
+      <stop offset="47.667%" stop-color="#2A7ECA"/>
+      <stop offset="100%" stop-color="#332075"/>
+    </linearGradient>
+    <linearGradient id="deepin-image-viewer-r" x1="50%" x2="50%" y1="11.914%" y2="100%">
+      <stop offset="0%" stop-color="#32BEFF" stop-opacity=".8"/>
+      <stop offset="100%" stop-color="#00CDFF"/>
+    </linearGradient>
+    <radialGradient id="deepin-image-viewer-u" cx="50%" cy="50%" r="55.707%" fx="50%" fy="50%">
+      <stop offset="0%" stop-color="#01001F" stop-opacity=".036"/>
+      <stop offset="81.152%" stop-color="#000636" stop-opacity=".219"/>
+      <stop offset="100%" stop-color="#01003C" stop-opacity=".688"/>
+    </radialGradient>
+    <circle id="deepin-image-viewer-t" cx="16.25" cy="16.375" r="12.5"/>
+    <filter id="deepin-image-viewer-s" width="160%" height="160%" x="-30%" y="-30%" filterUnits="objectBoundingBox">
+      <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.279134909   0 0 0 0 0.446591113   0 0 0 0 1  0 0 0 1 0"/>
+    </filter>
+    <radialGradient id="deepin-image-viewer-v" cx="20.808%" cy="86.4%" r="74.745%" fx="20.808%" fy="86.4%" gradientTransform="matrix(.4608 -.86004 1.0475 .68809 -.793 .448)">
+      <stop offset=".037%" stop-color="#C0A8FF" stop-opacity=".515"/>
+      <stop offset="100%" stop-color="#B385FF" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-image-viewer-a)" transform="translate(1 2)">
+    <g transform="rotate(-8 61.633 4.299)">
+      <rect width="54.125" height="46.875" fill="url(#deepin-image-viewer-b)" rx="6"/>
+      <g transform="translate(2.378 2.404)">
+        <mask id="deepin-image-viewer-e" fill="#fff">
+          <use xlink:href="#deepin-image-viewer-c"/>
+        </mask>
+        <use fill="url(#deepin-image-viewer-d)" xlink:href="#deepin-image-viewer-c"/>
+        <circle cx="41.162" cy="6.607" r="2.5" fill="#FFF5D0" mask="url(#deepin-image-viewer-e)"/>
+        <path fill="url(#deepin-image-viewer-f)" d="M-1.25130914,34.6326666 L18.3001886,10.6365131 C20.0440846,8.49617585 22.8697676,8.49405102 24.6153949,10.6365131 L44.1668926,34.6326666 L-1.25130914,34.6326666 Z" mask="url(#deepin-image-viewer-e)"/>
+        <path fill="url(#deepin-image-viewer-g)" fill-opacity=".65" d="M13.8880914,37.2871024 L30.7373289,15.9962966 C32.453413,13.8278416 35.2320308,13.8231609 36.9518192,15.9962966 L53.8010566,37.2871024 L13.8880914,37.2871024 Z" mask="url(#deepin-image-viewer-e)" style="mix-blend-mode:soft-light"/>
+      </g>
+    </g>
+    <g filter="url(#deepin-image-viewer-h)" transform="translate(1 24.125)">
+      <circle cx="16.25" cy="16.125" r="15.875" fill="#FFF"/>
+      <g transform="translate(3.75 3.875)">
+        <mask id="deepin-image-viewer-j" fill="#fff">
+          <use xlink:href="#deepin-image-viewer-i"/>
+        </mask>
+        <use fill="#FFF" fill-opacity=".188" xlink:href="#deepin-image-viewer-i"/>
+        <g mask="url(#deepin-image-viewer-j)">
+          <g transform="rotate(-8 -113.252 135.79)">
+            <use fill="#000" filter="url(#deepin-image-viewer-k)" xlink:href="#deepin-image-viewer-l"/>
+            <use fill="url(#deepin-image-viewer-m)" xlink:href="#deepin-image-viewer-l"/>
+            <g transform="translate(3.313 3.102)">
+              <mask id="deepin-image-viewer-p" fill="#fff">
+                <use xlink:href="#deepin-image-viewer-n"/>
+              </mask>
+              <use fill="url(#deepin-image-viewer-o)" xlink:href="#deepin-image-viewer-n"/>
+              <ellipse cx="49.382" cy="7.878" fill="#FFF5D0" mask="url(#deepin-image-viewer-p)" rx="3.08" ry="3.091"/>
+              <path fill="url(#deepin-image-viewer-q)" d="M-1.65365104,41.4839457 L22.4749718,11.8540088 C24.2183245,9.71317253 27.0411082,9.70856826 28.7882103,11.8540088 L52.9168332,41.4839457 L-1.65365104,41.4839457 Z" mask="url(#deepin-image-viewer-p)"/>
+              <path fill="url(#deepin-image-viewer-r)" fill-opacity=".65" d="M16.5365104,44.6750185 L37.4165979,18.2764269 C39.1274946,16.1133487 41.9072472,16.1207334 43.6123029,18.2764269 L64.4923905,44.6750185 L16.5365104,44.6750185 Z" mask="url(#deepin-image-viewer-p)" style="mix-blend-mode:soft-light"/>
+            </g>
+          </g>
+        </g>
+      </g>
+      <use fill="#000" filter="url(#deepin-image-viewer-s)" xlink:href="#deepin-image-viewer-t"/>
+      <circle cx="16.25" cy="16.375" r="12" fill="url(#deepin-image-viewer-u)" stroke="#000" stroke-linejoin="square" stroke-opacity=".3"/>
+      <path fill="url(#deepin-image-viewer-v)" d="M9.64615967,5.58285651 C9.5158758,5.36430572 9.60680005,5.65083964 9.46533876,5.86132572 C6.33442923,10.5199351 7.52311058,16.6852411 11.9317583,20.1428265 C16.340406,23.600412 22.6396688,23.0040583 26.4164659,18.9327162 C24.1330414,18.2815795 21.9895096,17.3392865 20.0053325,16.150971 C15.7587394,13.6077037 12.2420832,9.93751009 9.64615967,5.58285651 Z" transform="rotate(168 17.062 13.953)" style="mix-blend-mode:lighten"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-movie.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-movie-a" width="127.6%" height="127.6%" x="-13.8%" y="-13.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-movie-b" x1="50%" x2="50%" y1="2.375%" y2="100%">
+      <stop offset="0%" stop-color="#3E3E3E"/>
+      <stop offset="100%" stop-color="#0F0F0F"/>
+    </linearGradient>
+    <linearGradient id="deepin-movie-c" x1="40.768%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#B0FAFF"/>
+      <stop offset="100%" stop-color="#0D96C2"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-movie-a)" transform="translate(3 3)">
+    <circle cx="29" cy="29" r="27.667" fill="url(#deepin-movie-b)" stroke="url(#deepin-movie-c)" stroke-width="2.667"/>
+    <path fill="#FF006B" d="M24.3882745,41.9106267 C21.9646974,43.29381 20,42.1599456 20,39.3721011 L20,19.1246679 C20,16.3394957 21.9757123,15.2092454 24.3882745,16.5861423 L42.1864454,26.7439097 C44.6100225,28.1270929 44.5990076,30.3759625 42.1864454,31.7528594 L24.3882745,41.9106267 Z"/>
+    <path fill="#FFB600" d="M24.223,41.9994253 L24.3882745,41.9106267 C23.0194768,42.6918266 21.797053,42.670136 20.9922844,42.0010412 L24.223,41.9994253 Z M24.3882745,41.9106267 L24.225,41.9994253 L24.223,41.9994253 L24.3882745,41.9106267 Z M28,18.6474253 L36,23.2134253 L36,35.2824253 L28,39.8484253 L28,18.6474253 Z"/>
+    <path fill="#1473FF" d="M24.3882745,16.5861423 L28,18.647 L28,39.848 L24.3882745,41.9106267 C21.9646974,43.29381 20,42.1599456 20,39.3721011 L20,19.1246679 C20,16.3394957 21.9757123,15.2092454 24.3882745,16.5861423 Z"/>
+    <path stroke="#FFF" stroke-opacity=".3" stroke-width="2" d="M23.8925997,41.0421185 L41.6907706,30.8843511 C43.4354382,29.8886349 43.4373799,28.6092422 41.6907706,27.6124179 L23.8925997,17.4546505 C22.1413803,16.455195 21,17.1131896 21,19.1246679 L21,39.3721011 C21,41.3903478 22.1339303,42.0458259 23.8925997,41.0421185 Z"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-music.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-music-a" width="127.6%" height="129.6%" x="-13.8%" y="-14.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-music-b" x1="98.016%" x2="0%" y1="38.451%" y2="41.845%">
+      <stop offset="0%" stop-color="#0BA186"/>
+      <stop offset="100%" stop-color="#68C639"/>
+    </linearGradient>
+    <linearGradient id="deepin-music-c" x1="2.055%" x2="96.944%" y1="41.813%" y2="34.714%">
+      <stop offset="0%" stop-color="#417944" stop-opacity=".381"/>
+      <stop offset="100%" stop-color="#002A35"/>
+    </linearGradient>
+    <linearGradient id="deepin-music-d" x1="50%" x2="50%" y1="0%" y2="98.031%">
+      <stop offset="0%" stop-color="#8DF34C"/>
+      <stop offset="100%" stop-color="#00CCB3"/>
+    </linearGradient>
+    <linearGradient id="deepin-music-e" x1="50%" x2="50%" y1="0%" y2="98.031%">
+      <stop offset="0%" stop-color="#8DF34C"/>
+      <stop offset="100%" stop-color="#00CCB3"/>
+    </linearGradient>
+    <linearGradient id="deepin-music-h" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#FFF" stop-opacity=".7"/>
+    </linearGradient>
+    <path id="deepin-music-g" d="M35.9302044,14.0362092 C35.9766316,14.2799521 36,14.5275258 36,14.7756509 L36,35 C36,37.7614237 33.7614237,40 31,40 C28.2385763,40 26,37.7614237 26,35 C26,32.2385763 28.2385763,30 31,30 C32.1261445,30 33.1653335,30.3723009 34.0011995,31.0005351 L34,17.5701049 C34,16.8425868 33.41023,16.2528168 32.6827119,16.2528168 C32.6059652,16.2528168 32.5293654,16.2595238 32.4537865,16.2728612 L18.0883628,18.807936 C17.4588869,18.91902 17,19.4659774 17,20.1051797 L17,40 C17,42.7614237 14.7614237,45 12,45 C9.23857625,45 7,42.7614237 7,40 C7,37.2385763 9.23857625,35 12,35 C13.1261445,35 14.1653335,35.3723009 15.0011995,36.0005351 L15,17.2701788 C15,15.3727593 16.3485144,13.7431401 18.2124227,13.38811 L31.3086939,10.8935821 C33.4527013,10.4851997 35.521822,11.8922018 35.9302044,14.0362092 Z"/>
+    <filter id="deepin-music-f" width="113.8%" height="112.3%" x="-6.9%" y="-3.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-music-a)" transform="translate(3 5)">
+    <circle cx="34" cy="27" r="23.25" fill="#151E25" stroke="url(#deepin-music-b)" stroke-width="1.5" transform="rotate(90 34 27)"/>
+    <g stroke="url(#deepin-music-c)" stroke-width="1.5" opacity=".8" transform="translate(12.182 5.585)">
+      <path d="M22.5818182,41.6646341 C33.6110338,41.6646341 42.0681818,32.760162 42.0681818,21.4146341 C42.0681818,10.230868 33.001948,1.16463415 21.8181818,1.16463415 C10.6344156,1.16463415 1.56818182,10.230868 1.56818182,21.4146341 C1.56818182,32.4512638 11.2443941,41.6646341 22.5818182,41.6646341 Z" transform="rotate(90 21.818 21.415)"/>
+      <path d="M22.4727273,38.6646341 C31.8658971,38.6646341 39.0681818,31.0813988 39.0681818,21.4146341 C39.0681818,11.8877222 31.3450938,4.16463415 21.8181818,4.16463415 C12.2912699,4.16463415 4.56818182,11.8877222 4.56818182,21.4146341 C4.56818182,30.8142226 12.8129659,38.6646341 22.4727273,38.6646341 Z" transform="rotate(90 21.818 21.415)"/>
+    </g>
+    <ellipse cx="34.932" cy="28.317" fill="url(#deepin-music-d)" rx="11.195" ry="11.205" transform="rotate(90 34.932 28.317)"/>
+    <ellipse cx="34.932" cy="28.317" fill="#2A2A29" rx="7.244" ry="7.25" transform="rotate(90 34.932 28.317)"/>
+    <path fill="url(#deepin-music-e)" d="M10.2555408,-4.14336123e-16 L38.7444592,4.14336123e-16 C42.3105342,-2.4074122e-16 43.6036791,0.371302445 44.9073828,1.06853082 C46.2110865,1.76575919 47.2342408,2.78891348 47.9314692,4.09261719 C48.6286976,5.39632089 49,6.68946584 49,10.2555408 L49,43.7444592 C49,47.3105342 48.6286976,48.6036791 47.9314692,49.9073828 C47.2342408,51.2110865 46.2110865,52.2342408 44.9073828,52.9314692 C43.6036791,53.6286976 42.3105342,54 38.7444592,54 L10.2555408,54 C6.68946584,54 5.39632089,53.6286976 4.09261719,52.9314692 C2.78891348,52.2342408 1.76575919,51.2110865 1.06853082,49.9073828 C0.371302445,48.6036791 -1.15674773e-15,47.3105342 1.99086127e-15,43.7444592 L1.18305822e-15,10.2555408 C-6.87390896e-16,6.68946584 0.371302445,5.39632089 1.06853082,4.09261719 C1.76575919,2.78891348 2.78891348,1.76575919 4.09261719,1.06853082 C5.39632089,0.371302445 6.68946584,2.4074122e-16 10.2555408,-4.14336123e-16 Z"/>
+    <use fill="#000" filter="url(#deepin-music-f)" xlink:href="#deepin-music-g"/>
+    <path fill="url(#deepin-music-h)" stroke="#FFF" stroke-linejoin="square" stroke-opacity=".3" d="M35.4390351,14.1297653 C35.0823223,12.2570232 33.2749921,11.0280386 31.40225,11.3847514 L18.3059788,13.8792792 C16.6778969,14.1893901 15.5,15.6128257 15.5,17.2701468 L15.5012636,37.001861 L14.7007912,36.4002285 C13.9274983,35.819024 12.9885799,35.5 12,35.5 C9.51471863,35.5 7.5,37.5147186 7.5,40 C7.5,42.4852814 9.51471863,44.5 12,44.5 C14.4852814,44.5 16.5,42.4852814 16.5,40 L16.5,20.1051797 C16.5,19.2233568 17.1330655,18.4687921 18.0014701,18.3155442 L32.3668938,15.7804694 C32.47116,15.7620695 32.5768347,15.7528168 32.6827119,15.7528168 C33.6863724,15.7528168 34.5,16.5664444 34.5,17.5700602 L34.5012889,32.0018801 L33.7007912,31.4002285 C32.9274983,30.819024 31.9885799,30.5 31,30.5 C28.5147186,30.5 26.5,32.5147186 26.5,35 C26.5,37.4852814 28.5147186,39.5 31,39.5 C33.4852814,39.5 35.5,37.4852814 35.5,35 L35.5,14.7756509 C35.5,14.5589192 35.4795882,14.3426692 35.4390351,14.1297653 Z"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-screen-recorder.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-screenshot&amp;record-a" width="126.7%" height="132%" x="-13.3%" y="-16%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-screenshot&amp;record-b" x1="50%" x2="50%" y1="0%" y2="96.107%">
+      <stop offset="0%" stop-color="#F0EDFF"/>
+      <stop offset="100%" stop-color="#BBA7F6"/>
+    </linearGradient>
+    <path id="deepin-screenshot&amp;record-c" d="M8.12120347,27 L8.12120347,35 L-7.10542736e-15,35 L-7.10542736e-15,27 L8.12120347,27 Z M52,26.9509657 L52,34.9509657 L44,34.9509657 L44,26.9509657 L52,26.9509657 Z M52,0 L52,8 L44,8 L44,0 L52,0 Z M8,0 L8,8 L-7.10542736e-15,8 L-7.10542736e-15,0 L8,0 Z"/>
+    <linearGradient id="deepin-screenshot&amp;record-g" x1="39.277%" x2="39.277%" y1="15.304%" y2="105.982%">
+      <stop offset="0%" stop-color="#6B6386"/>
+      <stop offset="72.102%" stop-color="#302B42"/>
+      <stop offset="100%" stop-color="#72639E"/>
+    </linearGradient>
+    <circle id="deepin-screenshot&amp;record-f" cx="16.591" cy="16.838" r="16"/>
+    <filter id="deepin-screenshot&amp;record-e" width="125%" height="125%" x="-12.5%" y="-6.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
+    </filter>
+    <radialGradient id="deepin-screenshot&amp;record-h" cx="50%" cy="91.243%" r="23.464%" fx="50%" fy="91.243%" gradientTransform="matrix(0 1 -1.57176 0 1.934 .412)">
+      <stop offset="0%" stop-color="#8462FF"/>
+      <stop offset="100%" stop-color="#232129"/>
+    </radialGradient>
+    <circle id="deepin-screenshot&amp;record-i" cx="17" cy="17" r="11"/>
+    <radialGradient id="deepin-screenshot&amp;record-j" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+      <stop offset="0%" stop-color="#F53E84"/>
+      <stop offset="100%" stop-color="#4F2CA2"/>
+    </radialGradient>
+    <linearGradient id="deepin-screenshot&amp;record-k" x1="99.23%" x2=".77%" y1="27.849%" y2="67.669%">
+      <stop offset="0%" stop-color="#4B003F"/>
+      <stop offset="14.589%" stop-color="#33036D"/>
+      <stop offset="51.448%" stop-color="#C30B9D"/>
+      <stop offset="80.605%" stop-color="#591A85"/>
+      <stop offset="100%" stop-color="#470437"/>
+    </linearGradient>
+    <linearGradient id="deepin-screenshot&amp;record-l" x1="50%" x2="50%" y1="0%" y2="50%">
+      <stop offset="0%" stop-color="#FEE" stop-opacity=".85"/>
+      <stop offset="100%" stop-color="#FF578A" stop-opacity=".7"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-screenshot&amp;record-a)" transform="translate(2 7)">
+    <path fill="url(#deepin-screenshot&amp;record-b)" d="M13.8181595,3.0981834 C14.6988074,1.20829074 16.5948768,0 18.6798792,0 L41.3201208,0 C43.4051232,0 45.3011926,1.20829074 46.1818405,3.0981834 L46.923354,4.68949035 C47.5801083,6.09890182 48.9941262,7 50.5490432,7 L52,7 L52,7 C56.418278,7 60,10.581722 60,15 L60,42 C60,46.418278 56.418278,50 52,50 L8,50 C3.581722,50 0,46.418278 0,42 L0,15 C0,10.581722 3.581722,7 8,7 L9.45095676,7 C11.0058738,7 12.4198917,6.09890182 13.076646,4.68949035 L13.8181595,3.0981834 L13.8181595,3.0981834 Z"/>
+    <g transform="translate(4 11)">
+      <mask id="deepin-screenshot&amp;record-d" fill="#fff">
+        <use xlink:href="#deepin-screenshot&amp;record-c"/>
+      </mask>
+      <path stroke="#000" stroke-opacity=".4" d="M3.27338129,0.5 C1.7416851,0.5 0.5,1.7416851 0.5,3.27338129 L0.5,31.7266187 C0.5,33.2583149 1.7416851,34.5 3.27338129,34.5 L48,34.5 C49.9329966,34.5 51.5,32.9329966 51.5,31 L51.5,4 C51.5,2.06700338 49.9329966,0.5 48,0.5 L3.27338129,0.5 Z" mask="url(#deepin-screenshot&amp;record-d)"/>
+    </g>
+    <ellipse cx="50.614" cy="16.216" fill="#F55" stroke="#D51818" rx="1.841" ry="1.851"/>
+    <g transform="translate(13.41 11.162)">
+      <use fill="#000" filter="url(#deepin-screenshot&amp;record-e)" xlink:href="#deepin-screenshot&amp;record-f"/>
+      <use fill="url(#deepin-screenshot&amp;record-g)" xlink:href="#deepin-screenshot&amp;record-f"/>
+      <use fill="url(#deepin-screenshot&amp;record-h)" xlink:href="#deepin-screenshot&amp;record-i"/>
+      <circle cx="17" cy="17" r="11.5" stroke="#000"/>
+      <circle cx="17" cy="17" r="10.5" stroke="#FFF" stroke-linejoin="square" stroke-opacity=".05"/>
+      <circle cx="17" cy="17" r="7.5" fill="url(#deepin-screenshot&amp;record-j)" stroke="#080808"/>
+      <ellipse cx="17" cy="17.039" fill="url(#deepin-screenshot&amp;record-k)" rx="5" ry="5.039"/>
+      <circle cx="17" cy="17" r="3" fill="#38000E"/>
+      <ellipse cx="16.034" cy="12.405" fill="url(#deepin-screenshot&amp;record-l)" opacity=".5" rx="6.034" ry="5.405"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-system-monitor.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-system-monitor-a" width="131%" height="127.6%" x="-15.5%" y="-13.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <radialGradient id="deepin-system-monitor-b" cx="38.256%" cy="21.126%" r="100.21%" fx="38.256%" fy="21.126%">
+      <stop offset="0%" stop-color="#665AFF"/>
+      <stop offset="100%" stop-color="#4300D7"/>
+    </radialGradient>
+    <radialGradient id="deepin-system-monitor-d" cx="50%" cy="52.28%" r="54.424%" fx="50%" fy="52.28%">
+      <stop offset="0%" stop-color="#00D8FF"/>
+      <stop offset="100%" stop-color="#3D00B5"/>
+    </radialGradient>
+    <circle id="deepin-system-monitor-c" cx="22" cy="22" r="22"/>
+    <path id="deepin-system-monitor-g" d="M9.99376941,32.8364486 C10.2101076,33.2691251 10.6073866,33.8650435 11.2045049,34.4621618 C12.2327072,35.4903641 13.5019789,36.125 15,36.125 C16.8603023,36.125 18.2331117,35.0886635 19.2376325,33.247042 C19.9209371,31.9943169 20.310236,30.8047926 21.0853593,27.9626737 C22.4336212,23.0190467 23.2849194,21.4583333 25,21.4583333 C26.6486243,21.4583333 27.3360864,22.9707499 28.2264797,27.8679128 C28.7447273,30.7182748 29.0264649,31.9102414 29.6008377,33.1738616 C30.4551359,35.0533176 31.7773414,36.125 33.6666667,36.125 C36.0541329,36.125 36.9596661,34.7998294 37.6747436,31.9395192 C37.7119549,31.7900881 37.7119549,31.7900881 37.7482295,31.6435992 C38.1899759,29.861765 38.4339745,29.4583333 39,29.4583333 C39.3977374,29.4583333 39.5859823,29.7112129 39.9922686,30.9652312 C40.0155691,31.0371492 40.1294238,31.3925851 40.1625345,31.4945172 C40.233328,31.712457 40.2938385,31.8918914 40.3563842,32.0668309 C41.4134072,35.0233081 43.2910729,36.4668144 47.1018527,36.1203799 C47.7206214,36.0641282 48.1766316,35.516916 48.1203799,34.8981473 C48.0641282,34.2793786 47.516916,33.8233684 46.8981473,33.8796201 C44.1980547,34.1250831 43.2102371,33.3656716 42.475045,31.3093506 C42.4209381,31.1580143 42.3670295,30.9981567 42.3024675,30.799401 C42.2711684,30.7030457 42.1576647,30.3487056 42.1327314,30.2717479 C41.4479973,28.1582899 40.7408447,27.2083333 39,27.2083333 C36.9341383,27.2083333 36.2487397,28.3415839 35.5643426,31.1021773 C35.5279528,31.2491276 35.5279528,31.2491276 35.491923,31.3938141 C35.0050775,33.3411963 34.6403116,33.875 33.6666667,33.875 C32.0180423,33.875 31.3305802,32.3625834 30.440187,27.4654205 C29.9219393,24.6150585 29.6402018,23.4230919 29.065829,22.1594717 C28.2115308,20.2800157 26.8893252,19.2083333 25,19.2083333 C23.1396977,19.2083333 21.7668883,20.2446699 20.7623675,22.0862914 C20.0790629,23.3390165 19.689764,24.5285407 18.9146407,27.3706596 C17.5663788,32.3142866 16.7150806,33.875 15,33.875 C14.1646877,33.875 13.4339594,33.5096359 12.7954951,32.8711715 C12.5597437,32.6354201 12.3554523,32.3800559 12.1860566,32.1259623 C12.0884592,31.9795662 12.028023,31.8738028 12.0062306,31.830218 C11.7283677,31.2744922 11.0526105,31.0492398 10.4968847,31.3271027 C9.9411589,31.6049656 9.71590651,32.2807228 9.99376941,32.8364486 Z"/>
+    <filter id="deepin-system-monitor-f" width="178.4%" height="276.9%" x="-39.2%" y="-88.4%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4.5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.243137255   0 0 0 0 0.423529412   0 0 0 0 1  0 0 0 1 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-system-monitor-a)" transform="translate(3 3)">
+    <circle cx="29" cy="29" r="29" fill="url(#deepin-system-monitor-b)"/>
+    <g transform="translate(7 7)">
+      <mask id="deepin-system-monitor-e" fill="#fff">
+        <use xlink:href="#deepin-system-monitor-c"/>
+      </mask>
+      <use fill="url(#deepin-system-monitor-d)" xlink:href="#deepin-system-monitor-c"/>
+      <path fill="#FFF" fill-opacity=".2" fill-rule="nonzero" d="M12.5,-1 L12.4996667,2 L21.4996667,2 L21.5,-1 L22.5,-1 L22.4996667,2 L31.9996667,2 L32,0.666666667 L33,0.666666667 L32.9996667,2 L34.6666667,2 L34.6666667,3 L32.9996667,3 L32.9996667,12 L40.9996667,12 L41,10 L42,10 L41.9996667,12 L43.5,12 L43.5,13 L41.9996667,13 L41.9996667,22 L43.5,22 L43.5,23 L41.9996667,23 L41.9996667,32 L42.6666667,32 L42.6666667,33 L41.9996667,33 L42,34 L41,34 L40.9996667,33 L32.9996667,33 L32.9996667,40 L35.3333333,40 L35.3333333,41 L32.9996667,41 L33,44 L32,44 L31.9996667,41 L22.4996667,41 L22.5,43.6666667 L21.5,43.6666667 L21.4996667,41 L12.4996667,41 L12.5,43.6666667 L11.5,43.6666667 L11.4996667,41 L8.66666667,41 L8.66666667,40 L11.4996667,40 L11.4996667,33 L2.99966667,33 L3,34 L2,34 L1.99966667,33 L0.666666667,33 L0.666666667,32 L1.99966667,32 L1.99966667,23 L1,23 L1,22 L1.99966667,22 L1.99966667,13 L1,13 L1,12 L1.99966667,12 L2,10 L3,10 L2.99966667,12 L11.4996667,12 L11.4996667,3 L8.66666667,3 L8.66666667,2 L11.4996667,2 L11.5,-1 L12.5,-1 Z M21.4996667,33 L12.4996667,33 L12.4996667,40 L21.4996667,40 L21.4996667,33 Z M31.9996667,33 L22.4996667,33 L22.4996667,40 L31.9996667,40 L31.9996667,33 Z M11.4996667,23 L2.99966667,23 L2.99966667,32 L11.4996667,32 L11.4996667,23 Z M21.4996667,23 L12.4996667,23 L12.4996667,32 L21.4996667,32 L21.4996667,23 Z M40.9996667,23 L32.9996667,23 L32.9996667,32 L40.9996667,32 L40.9996667,23 Z M31.9996667,23 L22.4996667,23 L22.4996667,32 L31.9996667,32 L31.9996667,23 Z M11.4996667,13 L2.99966667,13 L2.99966667,22 L11.4996667,22 L11.4996667,13 Z M21.4996667,13 L12.4996667,13 L12.4996667,22 L21.4996667,22 L21.4996667,13 Z M40.9996667,13 L32.9996667,13 L32.9996667,22 L40.9996667,22 L40.9996667,13 Z M31.9996667,13 L22.4996667,13 L22.4996667,22 L31.9996667,22 L31.9996667,13 Z M21.4996667,3 L12.4996667,3 L12.4996667,12 L21.4996667,12 L21.4996667,3 Z M31.9996667,3 L22.4996667,3 L22.4996667,12 L31.9996667,12 L31.9996667,3 Z" mask="url(#deepin-system-monitor-e)"/>
+    </g>
+    <rect width="20.25" height="9" x="19" y="45" fill="#0A8BFF" rx="4.5"/>
+    <path fill="#FFF" d="M24.5425,52.76 C25.2625,52.76 25.855,52.475 26.3125,51.9425 L25.7275,51.2525 C25.4275,51.575 25.0525,51.8 24.58,51.8 C23.7025,51.8 23.1325,51.0725 23.1325,49.865 C23.1325,48.6725 23.7625,47.9525 24.6025,47.9525 C25.0225,47.9525 25.345,48.1475 25.6225,48.4175 L26.2075,47.7125 C25.8475,47.3375 25.285,47 24.58,47 C23.1775,47 22,48.0725 22,49.9025 C22,51.755 23.14,52.76 24.5425,52.76 Z M27.205,52.655 L27.205,47.105 L29.0275,47.105 C30.2575,47.105 31.2025,47.5325 31.2025,48.845 C31.2025,50.1125 30.25,50.6825 29.0575,50.6825 L28.315,50.6825 L28.315,52.655 L27.205,52.655 Z M28.315,49.805 L28.9825,49.805 C29.7475,49.805 30.115,49.4825 30.115,48.845 C30.115,48.2 29.71,47.9825 28.945,47.9825 L28.315,47.9825 L28.315,49.805 Z M34.3375,52.76 C35.695,52.76 36.4825,52.0025 36.4825,50.1575 L36.4825,47.105 L35.4175,47.105 L35.4175,50.255 C35.4175,51.41 34.9975,51.8 34.3375,51.8 C33.685,51.8 33.2875,51.41 33.2875,50.255 L33.2875,47.105 L32.1775,47.105 L32.1775,50.1575 C32.1775,52.0025 32.9875,52.76 34.3375,52.76 Z"/>
+    <path stroke="#FFF" stroke-linecap="round" stroke-width="2" d="M39.0963015,49.6713244 C46.7376991,45.9320953 52,38.0805857 52,29 C52,16.2974508 41.7025492,6 29,6 C16.2974508,6 6,16.2974508 6,29 C6,38.1005783 11.2854982,45.9666623 18.9542048,49.6959624" opacity=".497"/>
+    <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M29,6 C16.2974508,6 6,16.2974508 6,29 C6,38.1005783 11.2854982,45.9666623 18.9542048,49.6959624"/>
+    <g fill-rule="nonzero">
+      <use fill="#000" filter="url(#deepin-system-monitor-f)" xlink:href="#deepin-system-monitor-g"/>
+      <use fill="#FFF" xlink:href="#deepin-system-monitor-g"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-voice-note.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="voice-note-c" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FD5E5E"/>
+      <stop offset="100%" stop-color="#ED5656"/>
+    </linearGradient>
+    <circle id="voice-note-b" cx="18" cy="18" r="18"/>
+    <filter id="voice-note-a" width="130.6%" height="130.6%" x="-15.3%" y="-9.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.97254902   0 0 0 0 0.17254902   0 0 0 0 0.277440324  0 0 0 0.4 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(7 4)">
+      <path fill="#FFF" d="M8,0 L42,0 C46.418278,-8.11624501e-16 50,3.581722 50,8 L50,48 C50,52.418278 46.418278,56 42,56 L8,56 C3.581722,56 5.41083001e-16,52.418278 0,48 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z"/>
+      <path fill="#000" fill-opacity=".1" d="M8,0 L8,3 L45,3 L45,4 L8,4 L8,8 L45,8 L45,9 L8,9 L8,13 L45,13 L45,14 L8,14 L8,18 L45,18 L45,19 L8,19 L8,23 L45,23 L45,24 L8,24 L8,28 L45,28 L45,29 L8,29 L8,33 L45,33 L45,34 L8,34 L8,38 L45,38 L45,39 L8,39 L8,43 L45,43 L45,44 L8,44 L8,48 L45,48 L45,49 L8,49 L8,55 L7,55 L7,49 L4,49 L4,48 L7,48 L7,44 L4,44 L4,43 L7,43 L7,39 L4,39 L4,38 L7,38 L7,34 L4,34 L4,33 L7,33 L7,29 L4,29 L4,28 L7,28 L7,24 L4,24 L4,23 L7,23 L7,19 L4,19 L4,18 L7,18 L7,14 L4,14 L4,13 L7,13 L7,9 L4,9 L4,8 L7,8 L7,4 L4,4 L4,3 L7,3 L7,0 L8,0 Z"/>
+    </g>
+    <g transform="translate(14 14)">
+      <use fill="#000" filter="url(#voice-note-a)" xlink:href="#voice-note-b"/>
+      <use fill="url(#voice-note-c)" xlink:href="#voice-note-b"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M13,20 L13,21 C13,23.7614237 15.2385763,26 18,26 C20.7614237,26 23,23.7614237 23,21 L23,20 L24,20 L24,21 C24,23.9727145 21.8381232,26.4404956 19.0008069,26.9169061 L19.0007263,28.0400662 C21.2011091,28.2188645 22.8766089,28.9756671 22.9934809,29.8969763 L23,30 L13,30 C13,29.0323792 14.7178935,28.2252525 17.0002666,28.0399856 L17.0001915,26.9170737 C14.1623839,26.4410745 12,23.9730632 12,21 L12,20 L13,20 Z M22,20 L22,21 C22,23.209139 20.209139,25 18,25 C15.790861,25 14,23.209139 14,21 L14,20 L22,20 Z M14,15 L14,11 C14,8.790861 15.790861,7 18,7 C20.209139,7 22,8.790861 22,11 L22,15 L19,15 L19,16 L22,16 L22,17 L19,17 L19,18 L22,18 L22,19 L14,19 L14,18 L17,18 L17,17 L14,17 L14,16 L17,16 L17,15 L14,15 Z"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-voice-recorder.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>deepin-sound-recorder</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="49.9997735%" y1="0%" x2="49.9997727%" y2="99.833549%" id="linearGradient-1">
+            <stop stop-color="#FF9BBA" offset="0%"></stop>
+            <stop stop-color="#DA0C0C" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.9997727%" y1="1.85111235%" x2="49.9997727%" y2="99.833549%" id="linearGradient-2">
+            <stop stop-color="#FF4B83" offset="0%"></stop>
+            <stop stop-color="#EE3A3A" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.9997735%" y1="3.9511297%" x2="49.9997727%" y2="99.1303297%" id="linearGradient-3">
+            <stop stop-color="#FF004F" offset="0%"></stop>
+            <stop stop-color="#E13333" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="deepin-sound-recorder">
+            <image id="Bitmap" x="1" y="2" width="62" height="62" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAYAAABzwahEAAAABGdBTUEAA1teXP8meAAABQhJREFUaAXlmol2ozAMANu973v//yv3ProammEVAwWT5hVcvacaHFvWSLKhaS8vziuXhfnyvvj44qroKO+Lj9ffzjlSaznb47pU7DnGVrjccp2VeYhjru9O+OniJ5jopmqHVn0Q1ygixN+4RhEhnOt45zPG8c53ji1jVomLrpock5yvszj/8GDsT7S/Q9c6ic1HodkegTAIcbnadu84RmqkBMY5FMd+Hdpobk0I6ONQWgKKnhQAAcLOYnGOpWlGfoYFy3ixscqBrPnkMAd4twJdVZWl0wdbsw3QKPMsQzKMVi0c49cIa7h9qACTUG2rBjxDsyhOfD+01QufOMEAEHwUqQr8EnCBzTTQlBmlfdeCH+5/wIWfrYQacCILNMCU9lbEg869L/yN/s2Bm21LitJmoa0Jhxx+LYa/CVxoxmCQTG8ROtzqxFLHV68PHw2bKfAMTXlzkm6pvIck1z1kHt89fCfLfgyciQifaeBH17OPH1QlvqNmXqaegBNxTOhnIi37em+Cz5lh4D9wWXKJs1fI9LnfxvL6t3lNtp8e/B+U/FjGgecUZzB7e6/iGx4sN5Z6zjaD91jiZZJggIXKlq8bU2acDxnEAbHlR1fn/IIfcgjeTxHcaDCglWwLOZp1wRkEvPd7PdCEza0ssMHYiaDc0Em29/Cigr81AhNsA3CzTalv4beuGqglY2GCrc+6F4LzCLM0lhjcyxiZel5LXXAH7AWoxk9OeMH7w+w+gJPUSfAWnt1TVTDIONlGiMZ9AIf1Mu9xAjB4mWdUIwIbjF2iBYeNjpYPN9g6aGAF7zvobFwGGYfXQLTIfsTmjXu75czL1rEKTobp4LWuVYHNBPelTQfKl4util+cdvBk3Chw6rWecZ9aV5Y68HTyq1urAhuMfcYBFZxAGAz6WxG5JsF5ZX3eCm3igAm2I3Cybcb58FloawJTBh/scT7kgGvpkJMngx/tZ7LOl/Do69BWBBa5YOwkH2SWO1/MURotnPAwwAJTv7/jerSkebWjPJjwLXTP8j6cB5i/AfonpS7rOeMA0sle4FtJ3nT8D4O43J3gOwz+Q0Nf5pBMHWJknaDwGPgaukf5EE6TZcCPsg1MmXH6iIwTCMA7Oncm+IzvGfoIYSrjDmLyi1CCsZe/sLwMX1+F8jezXOazpQ7s0aCDIY3E7WaFfwTgQAPaA43DbSBTGQdeIQjc8zzklB81FP13LTy6PocCDDjbVV/LRE4ebjGnEyaonAdvQreYeTINNL4Bzbbk6aTvcXksUxnPo4wWLZl/G0okWWQLwn7+GGqmZ6Fxegk444ycpUPZM5fo3qWwn6lCtqCZHjy6xhxcAu5+z/AEgGc8J6gRHrN/rj5Lm5cU3jOEtrxn110Cno2U8Myn9Hm9pfStiLg8i/Am9imUNcksmfb0FhofZ6UWHIMlPLCcqLw00BKARYvHuKWCXcqatzHWI8Moa3l661d0zYtlPD/y/wjncMqjOIVSdvn9+EvcU4ZkYo2QFF6e2E7YZUsBKqzAVllVsIUIe1XiPFoUJ1ECQDmq9OEgzuo49wRDhwmecw0cLbYYxzzVuWVZV0GHvc5p2rVSBiBD5GBwbYUYLOdaorQEAwUsQ3rNZ46Py/VbysUxcopoJ0MJWraOyesJI3jZ+jktYnt9t+KnDq+YOjol2xMwt0xyjK0QueU6q4s5xvvVrYuvNjAzsbRf3pfTS7Dyvhy/+v4fra1pWYxQ1MYAAAAASUVORK5CYII="></image>
+            <circle id="Combined-Shape" fill="url(#linearGradient-1)" cx="32" cy="32" r="28"></circle>
+            <circle id="Combined-Shape" fill="url(#linearGradient-2)" cx="32" cy="32" r="27"></circle>
+            <path d="M23,33.0167812 C23,37.983509 27.4690909,41.9930211 32,41.9930211 C36.5309091,41.9930211 41,38.9825527 41,33.0167812 L41,28.0069789 L23,28.0069789 L23,33.0167812 Z M43,33.0167812 C43,40.4877869 37.5309091,44 32,44 C26.4690909,44 21,39.7107116 21,33.0167812 L21,28 L43,28 L43,33.0167812 Z" id="Rectangle-41" fill="#E40F35" fill-rule="nonzero"></path>
+            <path d="M23,34.0167812 C23,38.983509 27.4690909,42.9930211 32,42.9930211 C36.5309091,42.9930211 41,39.9825527 41,34.0167812 L41,29.0069789 L23,29.0069789 L23,34.0167812 Z M43,34.0167812 C43,41.4877869 37.5309091,45 32,45 C26.4690909,45 21,40.7107116 21,34.0167812 L21,29.5052342 C21,28.6739163 21,29 21,29 L43,29 C43,29 43,28.6739163 43,29.5052342 L43,34.0167812 Z" id="Rectangle-41" fill="#FFFFFF" fill-rule="nonzero"></path>
+            <rect id="Combined-Shape" fill="url(#linearGradient-3)" x="25" y="13" width="14" height="27" rx="7"></rect>
+            <rect id="Combined-Shape" fill="#FFFFFF" x="25" y="14" width="14" height="27" rx="7"></rect>
+            <polygon id="Combined-Shape" fill="#E40F35" points="25 46 25 48 39 48 39 46"></polygon>
+            <polygon id="Combined-Shape" fill="#FFFFFF" points="33 47 33 43 31 43 31 47 25 47 25 49 39 49 39 47"></polygon>
+            <circle id="Oval" fill="#F94568" cx="32.5" cy="19.5" r="1.5"></circle>
+            <rect id="Rectangle-2" fill="#F94568" x="25" y="26" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="33" y="26" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="25" y="28" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="33" y="28" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="25" y="24" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="33" y="24" width="6" height="1"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

evm_monitor/src/assets/images/desktop-ai-assistant.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="desktop-ai-assistant-a" width="126.7%" height="126.7%" x="-13.3%" y="-13.3%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <radialGradient id="desktop-ai-assistant-c" cx="41.862%" cy="21.344%" r="63.627%" fx="41.862%" fy="21.344%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#B6E6FF"/>
+    </radialGradient>
+    <circle id="desktop-ai-assistant-b" cx="30" cy="30" r="30"/>
+    <linearGradient id="desktop-ai-assistant-d" x1="0%" x2="50%" y1="18.933%" y2="93.757%">
+      <stop offset="0%" stop-color="#0709B6"/>
+      <stop offset="100%" stop-color="#0091A0"/>
+    </linearGradient>
+    <linearGradient id="desktop-ai-assistant-f" x1="100%" x2="37.123%" y1="100%" y2="100%">
+      <stop offset="0%" stop-color="#D4FF00"/>
+      <stop offset="100%" stop-color="#07F"/>
+    </linearGradient>
+    <linearGradient id="desktop-ai-assistant-g" x1="100%" x2="37.123%" y1="100%" y2="100%">
+      <stop offset="0%" stop-color="#D4FF00"/>
+      <stop offset="100%" stop-color="#07F"/>
+    </linearGradient>
+    <linearGradient id="desktop-ai-assistant-h" x1="100%" x2="37.123%" y1="100%" y2="100%">
+      <stop offset="0%" stop-color="#D4FF00"/>
+      <stop offset="100%" stop-color="#07F"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#desktop-ai-assistant-a)" transform="translate(3 2)">
+    <mask id="desktop-ai-assistant-e" fill="#fff">
+      <use xlink:href="#desktop-ai-assistant-b"/>
+    </mask>
+    <use fill="url(#desktop-ai-assistant-c)" xlink:href="#desktop-ai-assistant-b"/>
+    <path fill="url(#desktop-ai-assistant-d)" stroke="#FFF" stroke-opacity=".5" d="M30.5,14.5 C31.6045695,14.5 32.5,15.3954305 32.5,16.5 L32.5,42.5 C32.5,43.6045695 31.6045695,44.5 30.5,44.5 C29.3954305,44.5 28.5,43.6045695 28.5,42.5 L28.5,16.5 C28.5,15.3954305 29.3954305,14.5 30.5,14.5 Z M37.5,18.5 C38.6045695,18.5 39.5,19.3954305 39.5,20.5 L39.5,39.5 C39.5,40.6045695 38.6045695,41.5 37.5,41.5 C36.3954305,41.5 35.5,40.6045695 35.5,39.5 L35.5,20.5 C35.5,19.3954305 36.3954305,18.5 37.5,18.5 Z M23.5,20.5 C24.6045695,20.5 25.5,21.3954305 25.5,22.5 L25.5,37.5 C25.5,38.6045695 24.6045695,39.5 23.5,39.5 C22.3954305,39.5 21.5,38.6045695 21.5,37.5 L21.5,22.5 C21.5,21.3954305 22.3954305,20.5 23.5,20.5 Z M16.5,22.5 C17.6045695,22.5 18.5,23.3954305 18.5,24.5 L18.5,34.5 C18.5,35.6045695 17.6045695,36.5 16.5,36.5 C15.3954305,36.5 14.5,35.6045695 14.5,34.5 L14.5,24.5 C14.5,23.3954305 15.3954305,22.5 16.5,22.5 Z M44.5,24.5 C45.6045695,24.5 46.5,25.3954305 46.5,26.5 L46.5,33.5 C46.5,34.6045695 45.6045695,35.5 44.5,35.5 C43.3954305,35.5 42.5,34.6045695 42.5,33.5 L42.5,26.5 C42.5,25.3954305 43.3954305,24.5 44.5,24.5 Z" mask="url(#desktop-ai-assistant-e)"/>
+    <path fill="url(#desktop-ai-assistant-f)" fill-opacity=".5" d="M59.3386095,40 C54.9528812,51.605768 43.7209553,59.8607645 30.5570449,59.8607645 C24.029874,59.8607645 17.9776923,57.8312273 12.9995652,54.3700005 C29.0445208,50.9210841 39.935529,44.4231194 58.6744035,40.1488638 Z" mask="url(#desktop-ai-assistant-e)"/>
+    <path fill="url(#desktop-ai-assistant-g)" fill-opacity=".5" d="M6.63372527,42.1196951 C28.6784887,40.7677249 32.1918147,49.4688462 52.5268081,51.1040828 C46.933839,57.0436443 39.0111561,60.75 30.2263192,60.75 C17.7412463,60.75 6.99757762,53.2637924 2.20490212,42.5181131 C3.61441308,42.3485597 5.08842629,42.2144069 6.63372527,42.1196951 Z" mask="url(#desktop-ai-assistant-e)"/>
+    <path fill="url(#desktop-ai-assistant-h)" fill-opacity=".5" d="M1.94707293,27.0165923 C25.7247618,26.4017968 35.0901588,43.0318802 52.6282501,50.3167032 C46.9994447,56.5683198 38.834804,60.5 29.75,60.5 C12.7672439,60.5 -1,46.7607383 -1,29.8125 C-1,28.9230592 -0.962083173,28.0424563 -0.887774628,27.1722134 C0.0364956686,27.0937501 0.981355335,27.0415227 1.94707293,27.0165923 Z" mask="url(#desktop-ai-assistant-e)"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/evm-store.svg

+<svg width="642" height="642" xmlns="http://www.w3.org/2000/svg" class="icon">
+ <defs>
+  <style type="text/css"/>
+ </defs>
+ <g>
+  <title>background</title>
+  <rect x="-1" y="-1" width="644" height="644" id="canvas_background" fill="none"/>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <path d="m546.6176,641.32967l-451.23517,0c-52.32527,0 -95.08571,-42.76044 -95.08571,-95.08571l0,-451.23517c0,-52.32527 42.76044,-95.08571 95.08571,-95.08571l451.23517,0c52.32527,0 95.08571,42.76044 95.08571,95.08571l0,451.23517c0,52.32527 -42.76044,95.08571 -95.08571,95.08571z" fill="#2ecccd" id="svg_1"/>
+  <path d="m321.46431,263.67473c-131.65714,0 -238.55824,-87.2088 -243.05934,-195.79781c0,-3.93846 -3.37582,-7.31428 -7.31429,-7.31428c-3.93846,0 -7.87692,3.37582 -7.31428,7.87692c5.06373,115.34066 118.71648,208.17582 258.25055,208.17583s253.18681,-92.27253 258.25055,-208.17583c0,-3.93846 -3.37583,-7.87692 -7.31429,-7.87692c-3.93846,0 -7.31428,3.37582 -7.31428,7.31428c-5.62638,108.58901 -112.52748,195.79781 -244.18462,195.79781z" fill="#FCFCFC" id="svg_2"/>
+  <path d="m322,324.43956m-14.06593,0a14.06593,14.06593 0 1 0 28.13186,0a14.06593,14.06593 0 1 0 -28.13186,0z" fill="#FCFCFC" id="svg_3"/>
+  <text fill="#ffffff" stroke-width="0" x="183.3125" y="488.8" id="svg_4" font-size="128" font-family="Helvetica, Arial, sans-serif" text-anchor="start" xml:space="preserve">EVM</text>
+ </g>
+</svg>
\ No newline at end of file

evm_monitor/src/components/AppListView.vue

+<template>
+  <div>
+    <!-- <el-row  type="flex"  justify="center"> -->
+    <!-- <el-col :span="24" class="wrapList"> -->
+    <div>
+      <el-row class="wrapList-top" type="flex" justify="end">
+        <!-- <el-button type="primary" size="small" @click="test">测试</el-button> -->
+        <el-button-group class="type-group">
+          <el-button
+            :class="{ 'button-state-hover': isHover }"
+            @click="handleSwitchList"
+            size="small"
+            >缩略图</el-button
+          >
+          <el-button @click="handleSwitchTable" size="small">列表</el-button>
+        </el-button-group>
+      </el-row>
+      <div v-show="isSwitch" class="wrapList-table">
+        <el-table
+          highlight-current-row
+          :data="
+            layoutArr.filter(
+              (data) =>
+                !nameSearch ||
+                data.name.toLowerCase().includes(nameSearch.toLowerCase())
+            )
+          "
+          :header-cell-style="{ background: '#C6E2FF', color: '#303133' }"
+        >
+          <el-table-column type="selection" width="55"></el-table-column>
+          <el-table-column
+            label="项目英文名"
+            prop="name"
+            width="200"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-popover trigger="hover" placement="top">
+                <p>{{ scope.row.name }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="项目英文名"
+            prop="name"
+            sortable
+            align="right"
+          ></el-table-column>
+          <el-table-column
+            label="项目中文名"
+            prop="name_zh"
+            sortable
+            align="right"
+          ></el-table-column>
+          <el-table-column
+            label="项目端口"
+            prop="port"
+            sortable
+            align="right"
+          ></el-table-column>
+          <el-table-column
+            label="项目提供者"
+            prop="provider"
+            sortable
+            align="right"
+          ></el-table-column>
+          <el-table-column
+            label="数据库文件名"
+            prop="dbfilename"
+            sortable
+            align="right"
+          ></el-table-column>
+        </el-table>
+      </div>
+      <div v-show="!isSwitch">
+        <!-- :row-height="30" -->
+        <!-- :is-draggable="true" -->
+        <!-- :is-resizable="true" -->
+        <!-- :is-mirrored="false" -->
+        <!-- :vertical-compact="true" -->
+        <!-- :use-css-transforms="true" -->
+        <grid-layout
+          :layout.sync="layoutArr"
+          :col-num="12"
+          :row-height="35"
+          :margin="[15, 15]"
+          :responsive="true"
+        >
+          <grid-item
+            v-for="item in layoutArr"
+            :x="item.x"
+            :y="item.y"
+            :w="item.w"
+            :h="item.h"
+            :i="item.i"
+            dragIgnoreFrom="i"
+            :key="item.i"
+          >
+            <!-- <div class="card-item-mark">模板 {{Number(item.i)+1}}</div> -->
+            <slot name="card" :cardItem="item"></slot>
+          </grid-item>
+        </grid-layout>
+      </div>
+    </div>
+    <!-- </el-col> -->
+    <!-- </el-row> -->
+
+    <el-row class="pageArea" type="flex" justify="end">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10]"
+        :page-size="10"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="index"
+      ></el-pagination>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import VueGridLayout from "vue-grid-layout";
+export default {
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+  },
+  props: {
+    layout: {
+      type: Array,
+    },
+    nameSearch: {
+      type: String,
+    },
+  },
+  computed: {
+    layoutArr: {
+      get() {
+        return this.layout;
+      },
+      set() {},
+    },
+  },
+  mounted() {
+    // const gridLayout = this.layout;
+    // console.log("gridLayout", gridLayout);
+    // this.index = gridLayout.length;
+    // this.cacheArr = gridLayout;
+    // console.log("card content", this.content);
+  },
+  data() {
+    return {
+      isSwitch: false,
+      isHover: true,
+
+      // cacheArr: [],
+      index: 0,
+      currentPage: 1,
+    };
+  },
+  methods: {
+    test() {
+      let xcoor = 2 * Math.round(Math.random() * 5);
+      console.log(xcoor, "xcoor");
+      let ycoor = Math.ceil(Math.random() * 10);
+      console.log(ycoor, "xcoor");
+      let item = {
+        x: xcoor,
+        y: ycoor,
+        w: 2,
+        h: 8,
+        i: this.index + "",
+        name: "c xs",
+        exporter_type: "process_exporter",
+        description: "description1",
+        image: "summer.jpg",
+      };
+      console.log("item", item);
+      this.index++;
+      // this.layout.push(item);
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      this.cacheArr = this.layout.filter((item, index) => {
+        return index > 10 * (val - 1) - 1 && index <= 10 * val - 1;
+      });
+      console.log(`this.cacheArr:`, this.cacheArr);
+      console.log(`当前页: ${val}`);
+    },
+
+    handleSwitchTable() {
+      this.isSwitch = true;
+      console.log("table click");
+    },
+    handleSwitchList() {
+      this.isSwitch = false;
+      this.isHover = false;
+      console.log("list click");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-table {
+  margin-bottom: 20px;
+  width: 100%;
+  table-layout: auto;
+}
+.vue-grid-item {
+  img {
+    display: block;
+    width: 100%;
+    height: 90%;
+  }
+}
+.wrapList-top {
+  padding: 15px 15px 0;
+}
+.wrapList-table {
+  padding: 15px 15px 0;
+}
+.button-state-hover {
+  color: #409eff;
+  border-color: #c6e2ff;
+  background-color: #ecf5ff;
+}
+.card {
+  img {
+    display: block;
+    width: 100%;
+    padding-bottom: 10px;
+  }
+  .card-word {
+    padding: 10px 0;
+    span {
+      padding-left: 10px;
+      font-size: 14px;
+    }
+    em {
+      font-style: normal;
+    }
+  }
+}
+</style>

evm_monitor/src/components/BaseContextMenu.vue

+<template>
+  <div class="context-module" v-show="contextVisible" @click="closeContextMenu">
+    <div class="context-wrap">
+      <el-popover
+        v-model="contextVisible"
+        placement="right-start"
+        width="200"
+        trigger="manual"
+        transition="el-zoom-in-left"
+        popover-class="content-popover-area"
+      >
+        <div @click="handleGetBig">大图标</div>
+        <div @click="handleGetMedium">中等图标</div>
+        <div @click="handleGetSmall">小图标</div>
+        <div
+          slot="reference"
+          class="context-module-button"
+          :style="{
+            left: eventPosition.left + 'px',
+            top: eventPosition.top + 'px',
+          }"
+        ></div>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    contextVisible: {
+      type: Boolean,
+    },
+    eventPosition: {
+      type: Object,
+    },
+  },
+  mounted() {
+    console.log("this.contextVisible", this.contextVisible);
+  },
+  data() {
+    return {
+      labelPosition: "right",
+    };
+  },
+  methods: {
+    closeContextMenu() {
+      console.log("关闭");
+      this.$emit("changeVisible", false);
+    },
+    handleGetBig() {
+      console.log("大图标关闭");
+      this.$emit("changeSize", "300");
+      this.$emit("changeVisible", false);
+    },
+    handleGetMedium() {
+      console.log("中等图标关闭");
+      this.$emit("changeSize", "200");
+      this.$emit("changeVisible", false);
+    },
+    handleGetSmall() {
+      console.log("小图标关闭");
+      this.$emit("changeSize", "100");
+      this.$emit("changeVisible", false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.context-module {
+  position: fixed;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  .context-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  .context-module-button {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+  }
+}
+
+.content-popover-area {
+  transform-origin: 0 0 !important;
+}
+.content-popover-area > div {
+  font-size: 12px;
+  cursor: pointer;
+  line-height: 26px;
+  &:hover {
+    color: skyblue;
+  }
+}
+</style>
+<style lang="scss">
+.el-popover {
+  background-color: skyblue;
+  div {
+    font-size: 12px;
+    cursor: pointer;
+    line-height: 26px;
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+</style>

evm_monitor/src/components/Breadcrumb/index.vue

+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect" :class="{'no-redirect-left': appTheme=='one'}">{{ item.meta.title }}</span>
+        <a class="first-link" v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import {mapState } from 'vuex'
+import pathToRegexp from 'path-to-regexp'
+
+export default {
+  computed: {
+    ...mapState('user',['appTheme']),
+  },
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      const first = matched[0]
+
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: '' }}].concat(matched)
+      }
+
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  // line-height: 50px;
+  line-height: 40px;
+  // margin-left: 8px;
+
+  .no-redirect {
+    // color: #97a8be;
+    color: #606266;
+    cursor: text;
+  }
+  .no-redirect-left{
+    margin-left: 20px;
+  }
+  >>> .el-breadcrumb__separator{
+    margin-right: 0;
+  }
+  .first-link{
+    margin-left: 20px;
+    color: #303133;
+  }
+}
+</style>

evm_monitor/src/components/Card.vue

+<template>
+  <div class="card">
+    <el-card shadow="hover" :body-style="{ padding: '0px' }">
+      <!-- <img  :src="require(`@/assets/images/${content.image}`)" class="image" /> -->
+      <img
+        :src="`https://picsum.photos/id/${content.image}/1024/768`"
+        class="image"
+      />
+      <el-row class="card-content">
+        <el-col class="card-content-left">
+          <div class="card-word">
+            <span>项目英文名：</span>
+            <em v-if="isEdit == false">{{ content.name }}</em
+            ><el-input v-model="content.name" v-if="isEdit == true"></el-input>
+          </div>
+          <div class="card-word">
+            <span>项目中文名：</span>
+            <em>{{ content.name_zh }}</em>
+          </div>
+          <div class="card-word">
+            <span>项目端口：</span>
+            <em>{{ content.port }}</em>
+          </div>
+          <div class="card-word">
+            <span>项目提供者：</span>
+            <em>{{ content.provider }}</em>
+          </div>
+          <div class="card-word">
+            <span>数据库文件名：</span>
+            <em>{{ content.dbfilename }}</em>
+          </div>
+        </el-col>
+        <el-col class="card-content-right">
+          <i :class="isEditIcon" @click="handleEdit"></i>
+          <i class="el-icon-view" @click="handleView"></i>
+          <i class="el-icon-delete" @click="handleDelete"></i>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    content: {
+      type: Object,
+    },
+  },
+  mounted() {
+    // console.log("card cardIndex", this.cardIndex);
+  },
+  data() {
+    return {
+      labelPosition: "right",
+      formLabelAlign: {
+        name: "",
+        region: "",
+        type: "",
+      },
+      isEdit: false,
+      isEditIcon: "el-icon-edit-outline",
+    };
+  },
+  methods: {
+    handleEdit() {
+      if (this.isEdit == true) {
+        this.updateItem(this.content);
+      }
+      this.isEdit = !this.isEdit;
+      this.isEditIcon =
+        this.isEditIcon == "el-icon-success"
+          ? "el-icon-edit-outline"
+          : "el-icon-success";
+      console.log("handleEdit");
+    },
+    handleView() {
+      console.log("handleView");
+    },
+    handleDelete() {
+      console.log("handleDelete");
+      console.log(this.content);
+      this.deleteItem(this.content);
+    },
+    deleteItem(item) {
+      var url = this.$client.apiUrlprefix() + "/project/";
+      this.$axios.post(url + "delete", item, (res) => {
+        console.log(res);
+        this.$emit("deleteGrid");
+      });
+    },
+  },
+  updateItem(item) {
+    var url = this.$client.apiUrlprefix() + "/project/";
+    this.$axios.post(url + "update", item, (res) => {
+      console.log(res);
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+  height: 100%;
+  .el-card {
+    height: 100%;
+  }
+  .el-card.is-hover-shadow {
+    border: 1px solid #bbb;
+    &:hover {
+      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
+    }
+  }
+  img {
+    display: block;
+    width: 100%;
+    padding-bottom: 10px;
+  }
+  .card-content-left {
+    width: calc(100% - 30px);
+  }
+  .card-content-right {
+    width: 30px;
+    text-align: center;
+    i {
+      cursor: pointer;
+      display: block;
+      padding: 10px 0;
+      font-size: 18px;
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+  .card-word {
+    position: relative;
+    padding: 7px 0;
+    padding-left: 105px;
+    span {
+      position: absolute;
+      left: 0;
+      top: 12px;
+      padding-left: 10px;
+      // display: inline-block;
+      // width: 100px;
+      // text-align: right;
+      font-size: 14px;
+    }
+    em {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-style: normal;
+    }
+  }
+}
+</style>

evm_monitor/src/components/DateRangePicker/index.vue

+<script>
+import { DatePicker, DatePickerOptions } from 'element-ui'
+import { calendarShortcuts } from '@/utils/shortcuts'
+
+export default {
+  name: 'DateRangePicker',
+  mixins: [DatePicker],
+  props: {
+    type: {
+      type: String,
+      default: 'daterange'
+    },
+    valueFormat: {
+      type: String,
+      default: 'yyyy-MM-dd HH:mm:ss'
+    },
+    defaultTime: {
+      type: Array,
+      default: () => ['00:00:00', '23:59:59']
+    },
+    pickerOptions: {
+      type: DatePickerOptions,
+      default: () => {
+        return { shortcuts: calendarShortcuts }
+      }
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    rangeSeparator: {
+      type: String,
+      default: ':'
+    },
+    startPlaceholder: {
+      type: String,
+      default: '开始日期'
+    },
+    endPlaceholder: {
+      type: String,
+      default: '结束日期'
+    }
+  }
+}
+</script>
\ No newline at end of file

evm_monitor/src/components/FileExplorer/FileExplorer.vue

+<template>
+  <div>
+    <el-row class="header">
+      <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
+        <el-breadcrumb-item v-for="item in breadcrumb" :key="item.dir" :index="item.dir" :to="buildQuery(item.dir)">{{ item.name }}</el-breadcrumb-item>
+      </el-breadcrumb>
+      <span class="loadtips" style="float: right">{{ loadedtips }}</span>
+    </el-row>
+
+    <!-- explorer -->
+    <GridExplorer v-model="rows" :loading="loading" :moreButtons="moreButtons" @on-click="onClick" v-if="layout == 'grid'" />
+    <ListExplorer v-model="rows" :loading="loading" :rowButtons="rowButtons" :moreButtons="moreButtons" @on-click="onClick" @scroll-end="onScrollEnd" @selection-change="onSelectionChange" v-else />
+
+    <!-- viewer -->
+    <MediaViewer v-model="selected" :visible="mediavv" @close="mediavv = false"></MediaViewer>
+    <PictureViewer ref="photoView"></PictureViewer>
+  </div>
+</template>
+
+<script>
+import GridExplorer from "./explorer/GridExplorer";
+import ListExplorer from "./explorer/ListExplorer";
+import { MediaViewer, PictureViewer } from "../FileViewer";
+export default {
+  components: {
+    GridExplorer,
+    ListExplorer,
+    MediaViewer,
+    PictureViewer,
+  },
+  props: {
+    layout: {
+      type: String,
+      default: "list",
+    },
+    dataLoader: Function,
+    linkLoader: Function,
+    rowButtons: Array,
+    moreButtons: Array,
+    rootDir: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentDir: "",
+      loading: false,
+      offset: 0,
+      limit: 100,
+      rows: [],
+      total: 0,
+      selection: Array,
+
+      selected: {},
+      mediavv: false,
+    };
+  },
+  watch: {
+    $route: "onRouteChange",
+    layout(nv, ov) {
+      if (nv != ov) {
+        this.listRefresh();
+      }
+    },
+  },
+  computed: {
+    breadcrumb() {
+      let root = [{ name: "全部文件", dir: "" }];
+      if (!this.currentDir) {
+        return root;
+      }
+
+      let parentDir = "";
+      this.currentDir.split("/").forEach((item) => {
+        if (item == "") return;
+
+        root.push({ name: item, dir: parentDir + item + "/" });
+        parentDir += `${item}/`;
+      });
+      return root;
+    },
+    loadedtips() {
+      let loadedNum = this.rows.length;
+      if (loadedNum == this.total) {
+        return `已全部加载，共${this.total}个`;
+      }
+
+      return `已加载${loadedNum}个，共${this.total}个`;
+    },
+  },
+  methods: {
+    onRouteChange(newVal) {
+      if (this.currentDir != newVal.query.dir) {
+        this.currentDir = newVal.query.dir; // change the current direction when the route changed
+      }
+
+      this.listRefresh();
+    },
+    onSelectionChange(selection) {
+      this.$emit("selection-change", selection);
+    },
+    onScrollEnd() {
+      if (this.total != 0 && this.rows.length == this.total) {
+        console.log("no more");
+        return;
+      }
+
+      this.listRefresh(this.offset, this.limit);
+    },
+    listRefresh(offset, limit) {
+      if (!offset) {
+        offset = 0;
+      }
+
+      if (!limit) {
+        limit = this.limit;
+      }
+
+      this.loading = true;
+      let dir = this.currentDir ? this.currentDir : "";
+      this.dataLoader(dir, offset, limit).then((data) => {
+        if (offset == 0) {
+          this.rows = data.list;
+          this.offset = limit;
+        } else {
+          this.rows = this.rows.concat(data.list);
+          this.offset += this.limit;
+        }
+
+        this.total = data.total;
+        this.loading = false;
+      });
+    },
+    buildQuery(dir) {
+      if (dir.startsWith(this.rootDir)) {
+        dir = dir.replace(this.rootDir, "");
+      }
+
+      let query = !dir ? {} : { dir: dir };
+      return { query: query };
+    },
+    onClick(type, obj) {
+      if (type == "folder") {
+        this.$router.push(this.buildQuery(obj.fullpath));
+        return;
+      }
+
+      this.linkLoader(obj).then((link) => {
+        switch (type) {
+          case "media":
+            this.selected = obj;
+            this.selected.url = link;
+            this.mediavv = true;
+            break;
+          case "image":
+            this.$refs.photoView.open(link);
+            break;
+          case "doc":
+            window.open("http://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(link));
+            break;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.currentDir = this.$route.query.dir ? this.$route.query.dir : "";
+
+    // this.listRefresh();
+  },
+};
+</script>
+
+<style scoped>
+@import url("./iconfont.css");
+
+.header {
+  display: flex;
+  flex-flow: row;
+}
+
+.bread {
+  flex: 1;
+}
+
+.loadtips {
+  width: 200px;
+  text-align: right;
+  font-size: 12px;
+  color: #7c7c7c;
+}
+</style>
\ No newline at end of file

evm_monitor/src/components/FileExplorer/explorer/GridExplorer.vue

+<template>
+  <div class="explorer">
+    <div class="explorer-item" v-for="item in data" :key="item.alias" @click="onNameClick(item)">
+      <i v-if="item.dirtype" class="matter-icon el-icon-folder" style="color: #ffc402"></i>
+      <i v-else :class="`iconfont ${type2icon(item.type)}`"></i>
+      <p>{{ item.name }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixin from "./mixin";
+export default {
+  mixins: [mixin],
+  data() {
+    return {};
+  },
+  methods: {
+    onSelectionChange(selection) {
+      this.$emit("selection-change", selection);
+    },
+    onSelectable(row) {
+      if (!row.dirtype) return true;
+    },
+    handleCommand(command) {
+      command.action(command.row);
+    },
+    onScrollEnd() {
+      this.$emit("scroll-end")
+    },
+  },
+};
+</script>
+
+<style scoped>
+.explorer {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.explorer-item {
+  width: 80px;
+  padding: 15px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.explorer-item:hover {
+  background: #f0f6fd;
+  border-radius: 5px;
+}
+
+.explorer-item i {
+  font-size: 55px;
+}
+
+.explorer-item p {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>s
\ No newline at end of file

evm_monitor/src/components/FileExplorer/explorer/ListExplorer.vue

+<template>
+  <el-table style="width: 100%" height="calc(100% - 55px)" tooltip-effect="dark" size="small" :data="data" v-loading="loading" v-el-table-infinite-scroll="onScrollEnd" @selection-change="onSelectionChange" highlight-current-row>
+    <el-table-column type="selection" width="30" :selectable="onSelectable"></el-table-column>
+    <el-table-column prop="name" label="名称" min-width="200" show-overflow-tooltip sortable>
+      <template slot-scope="scope">
+        <i v-if="scope.row.dirtype" class="matter-icon el-icon-folder" style="color: #ffc402"></i>
+        <i v-else :class="`iconfont matter-icon ${type2icon(scope.row.type)}`"></i>
+        <el-link :underline="false" class="matter-title" href="Javascript: void(0);">
+          <span @click="onNameClick(scope.row)">{{ scope.row.name }}</span>
+        </el-link>
+      </template>
+    </el-table-column>
+    <el-table-column width="150">
+      <template slot-scope="scope">
+        <div style="float: right; vertical-align: super" class="operation">
+          <el-link v-for="item in rowButtons" :key="item.name" v-show="!item.shown || item.shown(scope.row)" type="primary" :underline="false">
+            <i :class="`${item.icon} el-icon--right`" @click="item.action(scope.row)"></i>
+          </el-link>
+
+          <el-dropdown v-show="moreButtons && moreButtons.length > 0" trigger="click" @command="handleCommand">
+            <el-link type="primary" class="el-dropdown-link" :underline="false">
+              <i class="el-icon-more el-icon--right"></i>
+            </el-link>
+
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="item in moreButtons" :key="item.name" :command="{ action: item.action, row: scope.row }">
+                {{ item.title }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="size" label="大小" width="180">
+      <template slot-scope="scope">
+        <div v-if="scope.row.dirtype">-</div>
+        <div v-else>{{ scope.row.size }}</div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="updated" label="最近更新" width="180">
+      <template slot-scope="scope">{{ scope.row.updated | moment }}</template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import mixin from "./mixin";
+import elTableInfiniteScroll from "el-table-infinite-scroll";
+export default {
+  mixins: [mixin],
+  directives: {
+    "el-table-infinite-scroll": elTableInfiniteScroll,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onSelectionChange(selection) {
+      this.$emit("selection-change", selection);
+    },
+    onSelectable(row) {
+      if (!row.dirtype) return true;
+    },
+    handleCommand(command) {
+      command.action(command.row);
+    },
+    onScrollEnd() {
+      this.$emit("scroll-end");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.matter-icon {
+  font-size: 35px;
+}
+.matter-title {
+  display: inline;
+  margin-left: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  top: -8px;
+  position: relative;
+}
+
+.el-table__row .operation {
+  display: none;
+}
+.el-table__row:hover .operation {
+  display: block;
+}
+.operation .el-link {
+  font-size: 20px !important;
+  margin: 0 2px;
+}
+</style>
\ No newline at end of file

evm_monitor/src/components/FileExplorer/explorer/mixin.js

+const mixin = {
+    props: {
+        value: Array,
+        loading: false,
+
+        rowButtons: Array,
+        moreButtons: Array
+    },
+    data() {
+        return {
+            data: [],
+        }
+    },
+    watch: {
+        value(nval) {
+            this.data = nval;
+        },
+    },
+    methods: {
+        isOfficeFile(type) {
+            let officeTypes = ["application/msword", "application/vnd.ms-excel", "application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.openxmlformats-officedocument.presentationml.presentation"];
+            return officeTypes.includes(type);
+        },
+        officeIcon(type) {
+            let docTypes = ["application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
+            let excelTypes = ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
+            let pptTypes = ["application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.presentationml.presentation"]
+            if (docTypes.includes(type)) {
+                return 'icon-doc'
+            } else if (excelTypes.includes(type)) {
+                return 'icon-excel'
+            } else if (pptTypes.includes(type)) {
+                return 'icon-ppt'
+            }
+
+        },
+        type2icon(type) {
+            console.log(type)
+            let [t1, t2] = type.split('/')
+            let mt = ['pdf', 'html', 'xml', 'psd', 'rtf']
+            if (mt.includes(t2)) {
+                return `icon-${t2}`
+            }
+
+            let codeTypes = ['json', 'yaml', 'x-yaml']
+            if (codeTypes.includes(t2)) {
+                return 'icon-html'
+            }
+
+            let compressedFileTypes = ['zip', 'x-gzip']
+            if (compressedFileTypes.includes(t2)) {
+                return 'icon-compressed-file'
+            }
+
+            if (this.isOfficeFile(type)) {
+                return this.officeIcon(type)
+            }
+
+            let gt = ['audio', 'video', 'image', 'text']
+            if (gt.includes(t1)) {
+                return `icon-${t1}`
+            }
+
+            return 'icon-file'
+        },
+        onNameClick(item) {
+            // open a folder
+            if (item.dirtype) {
+                this.$emit("on-click", 'folder', item)
+                return;
+            }
+
+            // preview image file
+            if (item.type.startsWith("image")) {
+                this.$emit("on-click", 'image', item)
+                return;
+            }
+
+            // preview media file
+            if (item.type.startsWith("audio") || item.type.startsWith("video")) {
+                this.$emit("on-click", 'media', item)
+                return;
+            }
+
+            // preview office file
+            if (this.isOfficeFile(item.type)) {
+                this.$emit("on-click", 'doc', item)
+                return;
+            }
+        },
+    }
+}
+
+export default mixin
\ No newline at end of file

evm_monitor/src/components/FileExplorer/iconfont.css

+
+@font-face {font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.eot?t=1601822003589'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.eot?t=1601822003589#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAvoAAsAAAAAGiAAAAuZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFQAqkBJxvATYCJANICyYABCAFhG0HgSYbmxWjoo5yUtRkf3FgG9MauiEWkVzOXLAsfnHTsZAB+q/BIrKGB8a9Ybrw3hBox36eP/XPfcq970WoUioplWRgkta/nApmc8c3+a2TsgxStg86H0D3t9d4DZ22wkSYTnlzq+k5CJS/4IXc2MqcE8fz79/OrbcWFWoQcZRAgJln2pLog9T/6lIp4S87bLuEPAvKPJVDUke7ZUm+y7V8x68b8h6gucPUYWuYz/9+76q43rZ5SKKlaQlf7Mrkzt/+TAVIqiFxOP3fPzFvW0NCwxOHEGmRDLFgIV510hc2KuAjdgYIAC9cKrSe3dyrEQYhhFZ7DEaNQimYHFMEJ3ApKxagE1i4W0s9BwCb7c+PXsgMBqCwPdCCru3UqYOH+/IILQ5L1aRVQNQeBwBvqwHQAFIBMADdqfIPgHZhqo35tIaMSwAi+e/IgAAXIAEhoAiEBmICNmdHT//8NwI/fHlk+H+udkgQ3cMHRr2IoB2tHXt8ACWODIuCqPAIgZwCTQNTz+QfbwDCcmi+V60BAU56AiUIEARxIoCCDEQBCixICChQIKGggEBiQEEFYgMFHsQJBO2SDiAA6QYFOUgPEPRB+kGBBpkP4RjJG6CAQX6AJ1CDL4+IDx+s1SvEAtgO2A/ZCJS4YfYVFA4jpw9hhPFYHLzj8NCC4CaOIQbPhBIl4SLMGg1D2FvQhGsYRPir5DzPmCjc3ATLaoJVvFrOE14WH2LiFEJDWVpB21wBjldimxWMVUbMaJBCLScrJkydTBR8Awv030vZymuvhLMHX81TgGoxA7+CEwAi47fZQcElU2SMR6JSgCkg0sptqKXHgFYWnFCjKmlIfRTjSrW/TuaWhS7CbX39eUzV4y9L6999G1958gQCPThJv872osTAVjJL+5yyhSyygeBWxZHHREz0ZqSeMoM0sxhTHfoc6RYPqWRhZmvjIS1gXZxDxJQcfi8/0kZRdkr6RPLN9NxpjEUA+1VCInfhAZAt1ogh9GMTMZ6uGW1ko9JFBnrjGazoz3ZBY1VDK4iFqKSKYZ65Y1bvcvdym24pM5lAxOp6Q3hqFG5EifyNxujkSNSAU6XdjWUN51zOaSUAQk6FNvWI7XhUN6fVgdBA9sncOIUrld0PiGC5ELpR0Vfde8YuehIOlAt+eEbqBGWtBCKWK4wYGGYjpF4faRkEMMgr39yN13S52Y2kJiYAwohEcays7VqQBpMFBVzOg0iFqddSCwyPQsER69t4/6jB1OIAPtYJLzaxrlH5xPj63jJTcN5i35weGwzvEJTYpZ/PzcSV2sYu7Wdv+W8d+RbkVrYSGBgalO1NNCahC+FMf49Wf3rEZRzsYpn0ZoguZTwM8fQU8WdgYj8/+m5o7Y/+HenX0xAfFLk3XnL/iMSVKS+2upAi/o6VFYhgq+b/QfM6O9VgsYiJQYzC1veFYhUHXo2RreFuX+oB0HtKZxK9knkOQHYPjr2dtf3y50uPkr2gU9cb49RtEs3sbf7QWOTTaZQcmCjviHp2b3pk9+u/+6a+Hmipno0N8AvyLUmvqgWIeqlWRSCwP3MQqkMEyqDgQIH6FMEEhUX5E1LeMIud3ZjE3Khn606I/azC6JY6e5rgfzA4iIVMlEupru186/lWZ0cWV6pc4JoMqpDpvc66oioRt7+bpf52d1+sHNgPtV2jIdFC4RFSY0YSNVrYqqnneqSG5XsSg1j4Tz5etuGh7Ff1LfqyZipS36a7GSdpihOdev9n8Jy54ujWUbUn5S55svaUPdPHe/f+NUmdHHy/moy8RfcXFhX57EL7ZTLsX+0gcnnsJXNzsNw6l418/PEa9W11rc/3FiG3yS58uzn2bXyNnCYbcYK4cdnAt0LMA4kRI99DLdT7+t2KfJ/qSnOkjVA/765Lc8ZGuW1M64ivDYm2oefHGK32QmeRM6vcy9PaUlfBRA1uJ/bcMTlj7CzPM5r88SWVWoa8C15+e9k+DdGohbcTyc8fxbeIojFnVe6qRoXXTnaU7IN62W6bsrOr/MJDbms1Q4Bkier3qSbqffW73UetTSuLjTie7+1PzG8aqlbs2d+0vGqH4sxR3Qp6ysqT+3u3Vh9T1OdPQSVGAhWHqas2xbfTxrY6vjQlVlxGZXeOj/dLxJeDCfEs8xBy6UxbTKGz2KlzSYTRlrjyJ7W5kYI9Z0zumCxWEGhNwfjSSo6cOF1J54JXJ5uYiEvFZYClW9r8bRw9I1HTHs3vfsIF75mmLVdVV3R+2atbZhEcjcksZx9T1VAE1jb9cfjj+x+Qy7O3fS4QGuGP9JeVlbeVs49ay7l9WWu59VaXS2llBhRRz6XlNdQ3hMHV3FDVEL3JqIbqhtK0yRtIp2wotUmqlqKkKinacDVL9VLYFdVnS/uvqRs96uZ8ecKGTz9FeavGMQ3HK49PoDOXofw1Tqbl6qQbEDUzp6DxiA/U0zSwCcKM/6JSs/D6If8u2N1e9mXilwlPf5N4+8qiOIN76BWlfPGJT9UqS2esXLm8XhhcqhitT1ZNHvqoPSp5wtyarTPkqcaOKg0/NMdqLl3jU1V2LHIa8sOtBmvO06lIXXOswvxwescdI0RDXLNcp6eX/pEaN+gvnzy5+5c7P78xUu6SSvf0nE2L695W/+g7pA/05c3+bYge/d7DT7TvvuHqg6jLoq2nCW4h42ozzmjh2MTjDLX5qU9U587PHc1bSLpNbnG2im+IrSarqdhkMY1MGc2UJ0WPiN8NE9D4x6+6Yn+rrnGOB/OYP2/8qR2LldrliwsuuTc4WHRv5CJku78FL/OOVKfssXF/PqYp5vlrdQeYwdwr5quDORltczk8dcAykD6FCIPnRrw2mvzonr9ZyL+kOLxoMJf1C/xMT7rHMotwc10VgzlXzc13WBzzHtWC3otkNqg7zT4UGJufzrXzAjuNPbpHX3OJ+aWMH8KbssZkaRxRti1nvXOi+TpPzK7bGo+DH5gs7w8aF5YwM5rlJTrDHQoDyu6pyjYDWo+sst14f+VlrC85qkaknUzakWTtKu+eofCUMHxsauUTG/UUkbDeMireRrxsO3MUj2PJ0P9z7lQ3js0CW5RD83mO70i0SV+WoPeKon5vU2mjhyeexgl0O+s9PX00g3iqpIcCf2LSB54Pkr73ZEoR32R9k3Zt5yt1hroLv08Z68pxNcR27as3dNqPlGqE+1Ev/hP9jz/qggBFbdnHL6gUjQrVheN+W8nKj9PlEAzydIWeMC9wQ3NTy79WZXb/JA5+cO+o9G8cNAoqs34zduzAyIRfLYTS12b+4rD8bg5GVFykazmUjWfnstM4acJNY/8Cww5N4H6Z5MjmjeaXEod0+k+gb2d7XFoI3mb37vf3A8Dw0/RqOs923QFLoHIXwU+LgR+47ocLdIvrS/RHtBU+BZxf19RP5+aImio7pd9sAEBf1Buo2gev0dPC8qX3z1QP0bOZmeBsS9Y67/yGycPnc+8e/D+LSdovAozKQqim4LlLn1IAw/9X2buEUrX1PbZS2Kq71i4hFRQAnt8HMNxPhg/6jjeUFmiIQ6I3QJExAxoWq8popgKWIBtwsDLASzGqvkBnBoBukZxkKwEQtfOAonQf0NSeV2U03wcso+8ARx0a8Goz3aAgPl2TYyYj5PDpHaNNnRfpMnFa31J4bgwHJbbLI3GJpbhKt0Zrz6kjbmOR8hLWIh49pxbPjN1R0yTMnCqyMt+I5K2FpT3tEHObWjVhx4ghiIMme9cBu1hJxz9cTGKf/hYJnjUMzhn0J+Ajwor45ihDOmsJ1XPclRp0LB1nehGszWKch7InS1poJONIw6sS5EmfrkIsMddZoyLbYmGTtZfF8/7j220fw9Y3JC2vDYVoxCAWcUiGMCJ3nYIHNLYSqZAaaZAW6UC1oMozUynkZj42pNVlwlvb9M2zi0kLvUn/JTpK8BFzn94sNZCdh5xFb6QNHKk4YPH92JpA4JLVgaPTTSyiFAAA') format('woff2'),
+  url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.woff?t=1601822003589') format('woff'),
+  url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.ttf?t=1601822003589') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.svg?t=1601822003589#iconfont') format('svg'); /* iOS 4.1- */
+}
+  
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  .icon-file:before {
+    content: "\e61a";
+  }
+  
+
+  .icon-compressed-file:before {
+    content: "\e61b";
+    color: rgb(244, 196, 70);
+  }
+
+  .icon-xml:before {
+    content: "\e66e";
+    color: #FC7B24;
+  }
+  
+  .icon-audio:before {
+    content: "\e8a4";
+    color: rgb(55, 159, 211);;
+  }
+  
+  .icon-text:before {
+    content: "\e60d";
+    color: rgb(249, 202, 6);
+  }
+  
+  .icon-video:before {
+    content: "\e609";
+    color: rgb(128, 149, 255);
+  }
+  
+  .icon-zip:before {
+    content: "\e60b";
+  }
+  
+  .icon-excel:before {
+    content: "\e6d6";
+    color: rgb(16, 123, 15);
+  }
+  
+  .icon-pdf:before {
+    content: "\e64f";
+    color: rgb(220, 46, 27);
+  }
+  
+  .icon-ppt:before {
+    content: "\e642";
+    color: rgb(210, 70, 37);
+  }
+  
+  .icon-html:before {
+    content: "\e667";
+    color: rgb(247, 98, 44);;
+  }
+  
+  .icon-psd:before {
+    content: "\e66a";
+  }
+  
+  .icon-rtf:before {
+    content: "\e66b";
+  }
+  
+  .icon-image:before {
+    content: "\e606";
+    color: rgb(18, 150, 219);
+  }
+  
+  .icon-doc:before {
+    content: "\e623";
+    color: rgb(13, 71, 161);
+  }
+  
+  .icon-grid:before {
+    content: "\e6ef";
+  }
+  
+  .icon-list:before {
+    content: "\e67a";
+  }
+  
\ No newline at end of file

evm_monitor/src/components/FileExplorer/index.js

+import FileExplorer from './FileExplorer.vue'
+
+const components = {
+    FileExplorer: FileExplorer,
+}
+
+const install = function (Vue) {
+    Object.keys(components).forEach(key => {
+        Vue.component(key, components[key]);
+    });
+}
+
+export default install
\ No newline at end of file

evm_monitor/src/components/FileViewer/Media.vue

+<template>
+  <el-dialog :title="value.name" :visible.sync="show" width="30%" @opened="onOpen" @close="onClose">
+    <vue-plyr ref="audio" v-show="mediatype == 'audio'">
+      <audio :src="value.url"></audio>
+    </vue-plyr>
+
+    <vue-plyr ref="video" v-show="mediatype == 'video'">
+      <video :src="value.url"></video>
+    </vue-plyr>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Object,
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  watch: {
+    visible(n) {
+      this.show = n;
+    },
+  },
+  methods: {
+    onOpen() {
+      this.player.play();
+    },
+    onClose() {
+      this.$emit("close");
+      console.log(this.player);
+      this.player.stop();
+    },
+  },
+  computed: {
+    filetype() {
+      return this.value.type ? this.value.type : "";
+    },
+    mediatype() {
+      return this.filetype.split("/")[0];
+    },
+    player() {
+      return this.$refs[this.mediatype].player;
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

evm_monitor/src/components/FileViewer/Picture.vue

+<template>
+  <div class="pswp" tabindex="0" role="dialog" aria-hidden="true">
+    <!-- Background of PhotoSwipe. 
+         It's a separate element as animating opacity is faster than rgba(). -->
+    <div class="pswp__bg"></div>
+
+    <!-- Slides wrapper with overflow:hidden. -->
+    <div class="pswp__scroll-wrap">
+      <!-- Container that holds slides. 
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
+            Don't modify these 3 pswp__item elements, data is added later on. -->
+      <div class="pswp__container">
+        <div class="pswp__item"></div>
+        <div class="pswp__item"></div>
+        <div class="pswp__item"></div>
+      </div>
+
+      <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+      <div class="pswp__ui pswp__ui--hidden">
+        <div class="pswp__top-bar">
+          <!--  Controls are self-explanatory. Order can be changed. -->
+          <div class="pswp__counter"></div>
+          <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+          <button class="pswp__button pswp__button--share" title="Share"></button>
+          <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+          <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+          <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+          <!-- element will get class pswp__preloader--active when preloader is running -->
+          <div class="pswp__preloader">
+            <div class="pswp__preloader__icn">
+              <div class="pswp__preloader__cut">
+                <div class="pswp__preloader__donut"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+          <div class="pswp__share-tooltip"></div>
+        </div>
+
+        <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
+
+        <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
+
+        <div class="pswp__caption">
+          <div class="pswp__caption__center"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PhotoSwipe from "photoswipe";
+import PhotoSwipeDefaultUI from "photoswipe/dist/photoswipe-ui-default";
+import "photoswipe/dist/photoswipe.css";
+import "photoswipe/dist/default-skin/default-skin.css";
+export default {
+  name: "PhotoPreview",
+  methods: {
+    open(picURL) {
+      // build items array
+      var items = [{ src: picURL, w: 600, h: 400 }];
+
+      // define options (if needed)
+      var options = {
+        index: 0, // start at first slide
+        // ui option
+        // timeToIdle: 4000,
+        // loadingIndicatorDelay: 100,
+      };
+
+      // Initializes and opens PhotoSwipe
+      var pswpElement = document.querySelectorAll(".pswp")[0];
+      var gallery = new PhotoSwipe(pswpElement, PhotoSwipeDefaultUI, items, options);
+      gallery.init();
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

evm_monitor/src/components/FileViewer/index.js

+import MediaViewer from './Media'
+import PictureViewer from './Picture'
+
+export { MediaViewer, PictureViewer }
\ No newline at end of file

evm_monitor/src/components/GithubCorner/index.vue

+<template>
+  <a href="https://gitee.com/scriptiot/evm" target="_blank" class="github-corner" aria-label="View source on Github">
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style="fill:#40c9c6; color:#fff;"
+      aria-hidden="true"
+    >
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px;"
+        class="octo-arm"
+      />
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+        class="octo-body"
+      />
+    </svg>
+  </a>
+</template>
+
+<style scoped>
+.github-corner {
+    top: 0px;
+    right: 0px;
+    position: absolute;
+    margin: 0px;
+}
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}
+</style>

evm_monitor/src/components/Hamburger/index.vue

+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active':isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

evm_monitor/src/components/IconFont.vue

+<template>
+  <svg
+    class="icon-font"
+    aria-hidden="true"
+    :style="{
+      fontSize: size ? `${size}` : `inherit`,
+      verticalAlign: align ? `-.${align}em` : `0em`,
+      color: color ? color : `inherit`,
+    }"
+  >
+    <use
+      :xlink:href="`#${icon}${
+        iconTheme == 'default-iconTheme' ? '' : '-color'
+      }`"
+    ></use>
+  </svg>
+</template>
+<script>
+// 组件参数
+// 例：<IconFont icon="bg" size="18px" align="14"/>
+// icon 图标key **必填
+// size 图标大小 非必填 默认为父元素字体大小
+// align 图标对齐的值 非必填 默认为15
+// color 图标颜色 非必填 默认为父元素字体颜色
+export default {
+  props: ["icon", "size", "align", "color", "scale"],
+  computed: {
+    iconTheme() {
+      return this.$store.state.user.iconTheme;
+    },
+  },
+};
+</script>
\ No newline at end of file

evm_monitor/src/components/ListView.vue

+<template>
+  <div @contextmenu.prevent="handleContextmenu">
+    <!-- <el-row :gutter="gutter">
+          <el-col :xs="8" :sm="6" :lg="5" :xl="4" v-for="(item,index) in items" :key="index">
+          </el-col>
+    </el-row>-->
+    <el-button type="primary" @click="test">测试</el-button>
+    <el-row type="flex" justify="center">
+      <el-col :span="20">
+        <el-row class="list" ref="wrapper">
+          <div
+            class="list-item"
+            :style="{
+              'margin-right':
+                (index + 1) % itemNumber == 0 ? 0 : marginRight + 'px',
+              width: itemWidth + 'px',
+            }"
+            v-for="(item, index) in items"
+            :key="index"
+          >
+            <slot name="card" :itemProp="item"></slot>
+          </div>
+        </el-row>
+      </el-col>
+    </el-row>
+    <contextMenu
+      :contextVisible="contextVisible"
+      :eventPosition="eventPosition"
+      @changeSize="changeSize"
+      @changeVisible="changeVisible"
+    />
+  </div>
+</template>
+<script>
+import contextMenu from "./BaseContextMenu.vue";
+export default {
+  components: {
+    contextMenu,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    gutter: {
+      type: Number,
+      default: 10,
+    },
+  },
+  computed: {
+    surplus() {
+      return this.wrapperWidth % this.itemWidth;
+    },
+    itemNumber() {
+      return Math.floor(this.wrapperWidth / this.itemWidth);
+    },
+    marginRight() {
+      return Math.round((this.surplus / (this.itemNumber - 1)) * 100) / 100;
+    },
+  },
+  mounted() {
+    this.wrapperWidth = this.$refs.wrapper.$el.clientWidth - 1;
+    window.onresize = () => {
+      console.log("敞口在滨化");
+      this.wrapperWidth = this.$refs.wrapper.$el.clientWidth - 1;
+    };
+    // console.log("this.items", this.items);
+    // console.log("this.gutter", this.gutter);
+  },
+  data() {
+    return {
+      wrapperWidth: "",
+      itemWidth: "300",
+      contextVisible: false,
+      eventPosition: {
+        left: 0,
+        top: 0,
+      },
+    };
+  },
+  methods: {
+    test() {
+      console.log("this.$refs.wrapper", this.$refs.wrapper);
+      console.log("this.wrapperWidth", this.wrapperWidth);
+      console.log("this.itemWidth", this.itemWidth);
+      console.log("this.surplus", this.surplus);
+      console.log("this.itemNumber", this.itemNumber);
+      console.log("this.marginRight", this.marginRight);
+    },
+    handleContextmenu(event) {
+      console.log("鼠标右击", event);
+      this.contextVisible = true;
+      this.eventPosition = {
+        left: event.clientX,
+        top: event.clientY,
+      };
+    },
+    changeVisible(msg) {
+      this.contextVisible = msg;
+    },
+    changeSize(size) {
+      console.log("size", size);
+      this.itemWidth = size;
+    },
+    handleGetBig() {
+      console.log("大图标关闭");
+      this.$emit("changeVisible", false);
+    },
+    handleGetMedium() {
+      console.log("中等图标关闭");
+      this.$emit("changeVisible", false);
+    },
+    handleGetSmall() {
+      console.log("小图标关闭");
+      this.$emit("changeVisible", false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+  .list-item {
+    float: left;
+  }
+}
+</style>
\ No newline at end of file

evm_monitor/src/components/PanThumb/index.vue

+<template>
+  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot />
+      </div>
+    </div>
+    <!-- eslint-disable-next-line -->
+    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PanThumb',
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    width: {
+      type: String,
+      default: '150px'
+    },
+    height: {
+      type: String,
+      default: '150px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pan-item {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.pan-info-roles-container {
+  padding: 20px;
+  text-align: center;
+}
+
+.pan-thumb {
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.3s ease-in-out;
+}
+
+/* .pan-thumb:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  border-radius: 50%;
+  top: 40%;
+  left: 95%;
+  margin: -4px 0 0 -4px;
+  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+} */
+
+.pan-info {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.pan-info h3 {
+  color: #fff;
+  text-transform: uppercase;
+  position: relative;
+  letter-spacing: 2px;
+  font-size: 18px;
+  margin: 0 60px;
+  padding: 22px 0 0 0;
+  height: 85px;
+  font-family: 'Open Sans', Arial, sans-serif;
+  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.pan-info p {
+  color: #fff;
+  padding: 10px 5px;
+  font-style: italic;
+  margin: 0 30px;
+  font-size: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.pan-info p a {
+  display: block;
+  color: #333;
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  color: #fff;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 9px;
+  letter-spacing: 1px;
+  padding-top: 24px;
+  margin: 7px auto 0;
+  font-family: 'Open Sans', Arial, sans-serif;
+  opacity: 0;
+  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
+  transform: translateX(60px) rotate(90deg);
+}
+
+.pan-info p a:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.pan-item:hover .pan-thumb {
+  transform: rotate(-110deg);
+}
+
+.pan-item:hover .pan-info p a {
+  opacity: 1;
+  transform: translateX(0px) rotate(0deg);
+}
+</style>

evm_monitor/src/components/SvgIcon/index.vue

+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1.5em;
+  height: 1.5em;
+  /* vertical-align: -0.15em; */
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>