feat:xiuosIoT初始化

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "echarts": "^5.3.3",
     "element-ui": "^2.15.8",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
@@ -40,6 +41,7 @@
     "eslint": "6.7.2",
     "eslint-plugin-vue": "6.2.2",
     "html-webpack-plugin": "3.2.0",
+    "lodash": "^4.17.21",
     "mockjs": "1.0.1-beta3",
     "runjs": "4.3.2",
     "sass": "1.26.8",

src/api/data/history.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function allData(data) {
+  return request({
+    url: '/Month/allData',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function page(data) {
+  return request({
+    url: '/device/params/page',
+    method: 'get',
+    params: data || {}
+  })
+}

src/api/data/index.js

@@ -8,9 +8,9 @@ export function getList(data) {
   })
 }
 
-export function getParamList(data) {
+export function qyeryDeviceInfo(data) {
   return request({
-    url: '/device/data/allParams',
+    url: '/data/qyeryDeviceInfo',
     method: 'get',
     params: data || {}
   })

src/api/data/realTime.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getData(data) {
+  return request({
+    url: '/device/type/data/page',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function getParams(data) {
+  return request({
+    url: '/device/params/page',
+    method: 'get',
+    params: data || {}
+  })
+}

src/api/terminal/add.js

@@ -1,24 +1,24 @@
 import request from '@/utils/request'
 
-export function getList(data) {
+export function remove(data) {
   return request({
-    url: '/device/params/page',
+    url: '/device/delete',
     method: 'get',
     params: data || {}
   })
 }
 
-export function add(data) {
+export function getList(data) {
   return request({
-    url: '/device/params/addDeviceParams',
+    url: '/device/select',
     method: 'post',
     data
   })
 }
 
-export function update(data) {
+export function add(data) {
   return request({
-    url: '/device/params/update',
+    url: '/device/add',
     method: 'post',
     data
   })

src/api/terminal/parameterSetting.js

@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-
-export function getList(data) {
-  return request({
-    url: '/device/type/data/page',
-    method: 'get',
-    params: data || {}
-  })
-}

src/api/terminal/physicalInfo.js

@@ -1,20 +0,0 @@
-import request from '@/utils/request'
-
-export function getList(data) {
-  return request({
-    url: '/device/info/page',
-    method: 'get',
-    params: data || {}
-  })
-}
-
-export function add(data) {
-  return request({
-    url: '/device/info/addDeviceInfo',
-    method: 'post',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    },
-    data
-  })
-}

src/api/terminal/structure.js

@@ -1,37 +0,0 @@
-import request from '@/utils/request'
-
-export function getList(data) {
-  return request({
-    url: '/device/type/page',
-    method: 'get',
-    params: data || {}
-  })
-}
-
-export function getParamList(data) {
-  return request({
-    url: '/device/type/data/page',
-    method: 'get',
-    params: data || {}
-  })
-}
-
-export function add(data) {
-  return request({
-    url: '/device/type/addDeviceType',
-    method: 'post',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    },
-    data
-  })
-}
-
-export function update(data) {
-  return request({
-    url: '/device/type/update',
-    method: 'post',
-    data
-  })
-}
-

src/assets/font/demo.css

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

src/assets/font/demo_index.html

@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3563970" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">湿度</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe660;</span>
+                <div class="name">温度</div>
+                <div class="code-name">&amp;#xe660;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">CO2-Outlined</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xea32;</span>
+                <div class="name">大气压</div>
+                <div class="code-name">&amp;#xea32;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1659940919105') format('woff2'),
+       url('iconfont.woff?t=1659940919105') format('woff'),
+       url('iconfont.ttf?t=1659940919105') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shidu"></span>
+            <div class="name">
+              湿度
+            </div>
+            <div class="code-name">.icon-shidu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wendu"></span>
+            <div class="name">
+              温度
+            </div>
+            <div class="code-name">.icon-wendu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-CO2-Outlined"></span>
+            <div class="name">
+              CO2-Outlined
+            </div>
+            <div class="code-name">.icon-CO2-Outlined
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daqiya"></span>
+            <div class="name">
+              大气压
+            </div>
+            <div class="code-name">.icon-daqiya
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shidu"></use>
+                </svg>
+                <div class="name">湿度</div>
+                <div class="code-name">#icon-shidu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wendu"></use>
+                </svg>
+                <div class="name">温度</div>
+                <div class="code-name">#icon-wendu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-CO2-Outlined"></use>
+                </svg>
+                <div class="name">CO2-Outlined</div>
+                <div class="code-name">#icon-CO2-Outlined</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daqiya"></use>
+                </svg>
+                <div class="name">大气压</div>
+                <div class="code-name">#icon-daqiya</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/font/iconfont.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3563970 */
+  src: url('iconfont.woff2?t=1659940919105') format('woff2'),
+       url('iconfont.woff?t=1659940919105') format('woff'),
+       url('iconfont.ttf?t=1659940919105') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shidu:before {
+  content: "\e60d";
+}
+
+.icon-wendu:before {
+  content: "\e660";
+}
+
+.icon-CO2-Outlined:before {
+  content: "\e637";
+}
+
+.icon-daqiya:before {
+  content: "\ea32";
+}
+

src/assets/font/iconfont.json

@@ -0,0 +1,37 @@
+{
+  "id": "3563970",
+  "name": "no name",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "6677873",
+      "name": "湿度",
+      "font_class": "shidu",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "13638743",
+      "name": "温度",
+      "font_class": "wendu",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "23701097",
+      "name": "CO2-Outlined",
+      "font_class": "CO2-Outlined",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "25716502",
+      "name": "大气压",
+      "font_class": "daqiya",
+      "unicode": "ea32",
+      "unicode_decimal": 59954
+    }
+  ]
+}

src/icons/svg/Group 3 Copy.svg

@@ -1,26 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="13" viewBox="0 0 14 13">
-  <defs>
-    <style>
-      .cls-1 {
-        opacity: 0.65;
-      }
-
-      .cls-2 {
-        clip-path: url(#clip-path);
-      }
-
-      .cls-3 {
-        fill: #fff;
-      }
-    </style>
-    <clipPath id="clip-path"/>
-  </defs>
-  <g id="gauge" data-name="gauge" class="cls-1">
-    <g id="Group_3_Copy-2" data-name="gauge" class="cls-2">
-      <g id="dashboard">
-        <path id="Shape" class="cls-3" d="M7,0A7.083,7.083,0,0,0,0,7.165,7.208,7.208,0,0,0,2.8,12.9v0A.488.488,0,0,0,3.1,13a.5.5,0,0,0,.492-.5.506.506,0,0,0-.242-.434A6.1,6.1,0,0,1,2.021,10.62l.6-.357a.454.454,0,0,0,.16-.612.432.432,0,0,0-.6-.164l-.6.357A6.193,6.193,0,0,1,1,7.612H1.7a.448.448,0,0,0,0-.9H1a6.261,6.261,0,0,1,.585-2.239l.6.355a.432.432,0,0,0,.6-.164.454.454,0,0,0-.16-.612l-.6-.354A6.128,6.128,0,0,1,3.619,2.072l.346.614a.432.432,0,0,0,.6.164.454.454,0,0,0,.16-.612l-.347-.616a5.857,5.857,0,0,1,2.188-.6v.711a.438.438,0,1,0,.875,0V1.024a5.887,5.887,0,0,1,2.181.6l-.349.619a.454.454,0,0,0,.16.612.432.432,0,0,0,.6-.164l.349-.619a6.1,6.1,0,0,1,1.6,1.636l-.6.354a.454.454,0,0,0-.16.612.432.432,0,0,0,.6.164l.6-.355A6.225,6.225,0,0,1,13,6.717H12.3a.448.448,0,0,0,0,.9H13a6.241,6.241,0,0,1-.582,2.232l-.6-.357a.432.432,0,0,0-.6.164.454.454,0,0,0,.16.612l.6.357a6.111,6.111,0,0,1-1.37,1.471l0,0a.506.506,0,0,0-.194.4.5.5,0,0,0,.492.5.486.486,0,0,0,.351-.151A7.209,7.209,0,0,0,14,7.165,7.083,7.083,0,0,0,7,0Z"/>
-        <path id="Shape-2" data-name="Shape" class="cls-3" d="M3.139.1,1.421,1.469h0a.956.956,0,0,0-.436-.1A1,1,0,0,0,0,2.373,1,1,0,0,0,.984,3.381a1,1,0,0,0,.984-1.008.966.966,0,0,0-.018-.19L3.678.8A.455.455,0,0,0,3.753.172.431.431,0,0,0,3.139.1Z" transform="translate(6.016 4.786)"/>
-      </g>
-    </g>
-  </g>
-</svg>

src/icons/svg/activity.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 2C9.43043 2 9.81257 2.27543 9.94868 2.68377L15 17.8377L17.0513 11.6838C17.1874 11.2754 17.5696 11 18 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H18.7208L15.9487 21.3162C15.8126 21.7246 15.4304 22 15 22C14.5696 22 14.1874 21.7246 14.0513 21.3162L9 6.16228L6.94868 12.3162C6.81257 12.7246 6.43043 13 6 13H2C1.44772 13 1 12.5523 1 12C1 11.4477 1.44772 11 2 11H5.27924L8.05132 2.68377C8.18743 2.27543 8.56957 2 9 2Z" fill="currentColor"/>
+</svg>

src/icons/svg/address.svg

@@ -0,0 +1,2 @@
+<?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="1659494630779" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="756" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M512 64c-175.8 0-318.3 134.6-318.3 300.5 0 222.9 195.5 430.8 280.1 510.3 21.3 20.1 55.7 20.3 77.4 0.6 85.1-77.2 279.2-278.7 279.2-510.9C830.3 198.6 687.8 64 512 64z m0 401.1c-56.9 0-103.1-46.2-103.1-103.1S455.1 258.9 512 258.9c56.9 0 103.1 46.2 103.1 103.1S568.9 465.1 512 465.1z" p-id="757" fill="#5f9bf1"></path><path d="M364.5 926.5a147.5 21.5 0 1 0 295 0 147.5 21.5 0 1 0-295 0Z" p-id="758" fill="#5f9bf1"></path></svg>

src/icons/svg/alert-circle.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z" fill="currentColor"/>
+<path d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" fill="currentColor"/>
+</svg>

src/icons/svg/clock.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C12.5523 5 13 5.44772 13 6V11.382L16.4472 13.1056C16.9412 13.3526 17.1414 13.9532 16.8944 14.4472C16.6474 14.9412 16.0468 15.1414 15.5528 14.8944L11.5528 12.8944C11.214 12.725 11 12.3788 11 12V6C11 5.44772 11.4477 5 12 5Z" fill="currentColor"/>
+</svg>

src/icons/svg/command.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.17157 3.17157C3.92172 2.42143 4.93913 2 6 2C7.06087 2 8.07828 2.42143 8.82843 3.17157C9.57857 3.92172 10 4.93913 10 6V8H14V6C14 4.93913 14.4214 3.92172 15.1716 3.17157C15.9217 2.42143 16.9391 2 18 2C19.0609 2 20.0783 2.42143 20.8284 3.17157C21.5786 3.92172 22 4.93913 22 6C22 7.06087 21.5786 8.07828 20.8284 8.82843C20.0783 9.57857 19.0609 10 18 10H16V14H18C19.0609 14 20.0783 14.4214 20.8284 15.1716C21.5786 15.9217 22 16.9391 22 18C22 19.0609 21.5786 20.0783 20.8284 20.8284C20.0783 21.5786 19.0609 22 18 22C16.9391 22 15.9217 21.5786 15.1716 20.8284C14.4214 20.0783 14 19.0609 14 18V16H10V18C10 19.0609 9.57857 20.0783 8.82843 20.8284C8.07828 21.5786 7.06087 22 6 22C4.93913 22 3.92172 21.5786 3.17157 20.8284C2.42143 20.0783 2 19.0609 2 18C2 16.9391 2.42143 15.9217 3.17157 15.1716C3.92172 14.4214 4.93913 14 6 14H8V10H6C4.93913 10 3.92172 9.57857 3.17157 8.82843C2.42143 8.07828 2 7.06087 2 6C2 4.93913 2.42143 3.92172 3.17157 3.17157ZM8 8V6C8 5.46957 7.78929 4.96086 7.41421 4.58579C7.03914 4.21071 6.53043 4 6 4C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6C4 6.53043 4.21071 7.03914 4.58579 7.41421C4.96086 7.78929 5.46957 8 6 8H8ZM10 10V14H14V10H10ZM8 16H6C5.46957 16 4.96086 16.2107 4.58579 16.5858C4.21071 16.9609 4 17.4696 4 18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20C6.53043 20 7.03914 19.7893 7.41421 19.4142C7.78929 19.0391 8 18.5304 8 18V16ZM16 16V18C16 18.5304 16.2107 19.0391 16.5858 19.4142C16.9609 19.7893 17.4696 20 18 20C18.5304 20 19.0391 19.7893 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 18C20 17.4696 19.7893 16.9609 19.4142 16.5858C19.0391 16.2107 18.5304 16 18 16H16ZM16 8H18C18.5304 8 19.0391 7.78929 19.4142 7.41421C19.7893 7.03914 20 6.53043 20 6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4C17.4696 4 16.9609 4.21071 16.5858 4.58579C16.2107 4.96086 16 5.46957 16 6V8Z" fill="currentColor"/>
+</svg>

src/icons/svg/compass.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1887 8.07623C17.3085 7.71689 17.2149 7.32072 16.9471 7.05289C16.6793 6.78506 16.2831 6.69154 15.9238 6.81132L9.56377 8.93132C9.26517 9.03085 9.03085 9.26517 8.93132 9.56377L6.81132 15.9238C6.69154 16.2831 6.78506 16.6793 7.05289 16.9471C7.32072 17.2149 7.71689 17.3085 8.07623 17.1887L14.4362 15.0687C14.7348 14.9691 14.9691 14.7348 15.0687 14.4362L17.1887 8.07623ZM9.34114 14.6589L10.6706 10.6706L14.6589 9.34114L13.3294 13.3294L9.34114 14.6589Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z" fill="currentColor"/>
+</svg>

src/icons/svg/cpu.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 9C8 8.44771 8.44771 8 9 8H15C15.5523 8 16 8.44771 16 9V15C16 15.5523 15.5523 16 15 16H9C8.44771 16 8 15.5523 8 15V9ZM10 10V14H14V10H10Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C10 0.447715 9.55229 0 9 0C8.44771 0 8 0.447715 8 1V3H6C4.34315 3 3 4.34315 3 6V8H1C0.447715 8 0 8.44771 0 9C0 9.55229 0.447715 10 1 10H3V13H1C0.447715 13 0 13.4477 0 14C0 14.5523 0.447715 15 1 15H3V18C3 19.6569 4.34315 21 6 21H8V23C8 23.5523 8.44771 24 9 24C9.55229 24 10 23.5523 10 23V21H14V23C14 23.5523 14.4477 24 15 24C15.5523 24 16 23.5523 16 23V21H18C19.6569 21 21 19.6569 21 18V15H23C23.5523 15 24 14.5523 24 14C24 13.4477 23.5523 13 23 13H21V10H23C23.5523 10 24 9.55229 24 9C24 8.44771 23.5523 8 23 8H21V6C21 4.34315 19.6569 3 18 3H16V1C16 0.447715 15.5523 0 15 0C14.4477 0 14 0.447715 14 1V3H10V1ZM5 18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V6C19 5.44772 18.5523 5 18 5H6C5.44772 5 5 5.44772 5 6V18Z" fill="currentColor"/>
+</svg>

src/icons/svg/crosshair.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM13 20.9451V18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18V20.9451C6.82838 20.4839 3.51608 17.1716 3.05493 13H6C6.55228 13 7 12.5523 7 12C7 11.4477 6.55228 11 6 11H3.05493C3.51608 6.82838 6.82838 3.51608 11 3.05493V6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6V3.05493C17.1716 3.51608 20.4839 6.82838 20.9451 11H18C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13H20.9451C20.4839 17.1716 17.1716 20.4839 13 20.9451Z" fill="currentColor"/>
+</svg>

src/icons/svg/customize.svg

@@ -0,0 +1,15 @@
+<svg id="baseline-bar_chart-24px" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path id="路径_11394" data-name="路径 11394" class="cls-1" d="M0,0H24V24H0Z"/>
+  <path id="路径_30820" data-name="路径 30820" class="cls-2" d="M154.234,191.26H140.64a.64.64,0,0,0-.64.64v9.616a.64.64,0,0,0,.64.64H146.8v1.265h-4.2a.64.64,0,0,0,0,1.28h9.675a.64.64,0,0,0,0-1.28h-4.2v-1.265h6.158a.64.64,0,0,0,.64-.64V191.9A.64.64,0,0,0,154.234,191.26Zm-.64,9.616h-5.518v-4.161l2.23,2.23a.64.64,0,0,0,.9-.9l-3.337-3.337a.64.64,0,0,0-.9,0l-3.307,3.307a.64.64,0,0,0,.9.9l2.23-2.23v4.192h-5.518v-8.337h12.315Z" transform="translate(-135.438 -185.645)"/>
+</svg>

src/icons/svg/data.svg

@@ -0,0 +1,15 @@
+<svg id="baseline-bar_chart-24px" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: currentColor;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <path id="路径_11393" data-name="路径 11393" class="cls-1" d="M5,9.2H8V19H5ZM10.6,5h2.8V19H10.6Zm5.6,8H19v6H16.2Z"/>
+  <path id="路径_11394" data-name="路径 11394" class="cls-2" d="M0,0H24V24H0Z"/>
+</svg>

src/icons/svg/database.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 19C22 19.8519 21.4811 20.5044 20.9117 20.9531C20.331 21.4108 19.5528 21.7791 18.6802 22.07C16.9246 22.6552 14.5629 23 12 23C9.43715 23 7.07541 22.6552 5.31981 22.07C4.44724 21.7791 3.66896 21.4108 3.08829 20.9531C2.51889 20.5044 2 19.8519 2 19V5C2 4.14805 2.51889 3.49559 3.08829 3.04685C3.66896 2.58923 4.44724 2.22085 5.31981 1.93C7.07541 1.3448 9.43715 1 12 1C14.5629 1 16.9246 1.3448 18.6802 1.93C19.5528 2.22085 20.331 2.58923 20.9117 3.04685C21.4811 3.49559 22 4.14805 22 5V19ZM4 5C4.00001 5.00124 4.00018 5.00585 4.00305 5.01529C4.00645 5.02644 4.01483 5.04845 4.03507 5.08143C4.07752 5.15057 4.16408 5.25453 4.32624 5.38232C4.65642 5.64253 5.19616 5.9206 5.95227 6.17264C7.45402 6.67322 9.59229 7 12 7C14.4077 7 16.546 6.67322 18.0477 6.17264C18.8038 5.9206 19.3436 5.64253 19.6738 5.38232C19.8359 5.25453 19.9225 5.15057 19.9649 5.08143C19.9852 5.04845 19.9935 5.02644 19.9969 5.01529C19.9999 5.00571 20 5.00139 20 5.00022C20 5.00016 20 5.00027 20 5.00022C20 4.99949 20.0001 4.99506 19.9969 4.98471C19.9935 4.97356 19.9852 4.95155 19.9649 4.91857C19.9225 4.84943 19.8359 4.74547 19.6738 4.61768C19.3436 4.35747 18.8038 4.0794 18.0477 3.82736C16.546 3.32678 14.4077 3 12 3C9.59229 3 7.45402 3.32678 5.95227 3.82736C5.19616 4.0794 4.65642 4.35747 4.32624 4.61768C4.16408 4.74547 4.07752 4.84943 4.03507 4.91857C4.01483 4.95155 4.00645 4.97356 4.00305 4.98471C3.99998 4.99479 4 4.99911 4 5ZM20 7.5266C19.5988 7.73177 19.1533 7.91229 18.6802 8.07C16.9246 8.6552 14.5629 9 12 9C9.43715 9 7.07541 8.6552 5.31981 8.07C4.84666 7.91229 4.40123 7.73177 4 7.5266V12C4.00001 12.0012 4.00018 12.0058 4.00305 12.0153C4.00645 12.0264 4.01483 12.0485 4.03507 12.0814C4.07752 12.1506 4.16408 12.2545 4.32624 12.3823C4.65642 12.6425 5.19616 12.9206 5.95227 13.1726C7.45402 13.6732 9.59229 14 12 14C14.4077 14 16.546 13.6732 18.0477 13.1726C18.8038 12.9206 19.3436 12.6425 19.6738 12.3823C19.8359 12.2545 19.9225 12.1506 19.9649 12.0814C19.9852 12.0485 19.9935 12.0264 19.9969 12.0153C19.9999 12.0057 20 12.0014 20 12.0002C20 12.0002 20 12.0003 20 12.0002V7.5266ZM20 14.5266C19.5988 14.7318 19.1533 14.9123 18.6802 15.07C16.9246 15.6552 14.5629 16 12 16C9.43715 16 7.07541 15.6552 5.31981 15.07C4.84666 14.9123 4.40123 14.7318 4 14.5266V19C4 19.0007 3.9999 19.0049 4.00305 19.0153C4.00645 19.0264 4.01483 19.0485 4.03507 19.0814C4.07752 19.1506 4.16408 19.2545 4.32624 19.3823C4.65642 19.6425 5.19616 19.9206 5.95227 20.1726C7.45402 20.6732 9.59229 21 12 21C14.4077 21 16.546 20.6732 18.0477 20.1726C18.8038 19.9206 19.3436 19.6425 19.6738 19.3823C19.8359 19.2545 19.9225 19.1506 19.9649 19.0814C19.9852 19.0485 19.9935 19.0264 19.9969 19.0153C20.0001 19.0049 20 19.0007 20 19V14.5266Z" fill="currentColor"/>
+</svg>

src/icons/svg/git-pull-request.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 9.87398C8.72523 9.42994 10 7.86384 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 7.86384 3.27477 9.42994 5 9.87398V21C5 21.5523 5.44772 22 6 22C6.55228 22 7 21.5523 7 21V9.87398ZM4 6C4 4.89543 4.89543 4 6 4C7.10457 4 8 4.89543 8 6C8 7.10457 7.10457 8 6 8C4.89543 8 4 7.10457 4 6Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 14.126C15.2748 14.5701 14 16.1362 14 18C14 20.2091 15.7909 22 18 22C20.2091 22 22 20.2091 22 18C22 16.1362 20.7252 14.5701 19 14.126V8C19 6.34315 17.6569 5 16 5H13C12.4477 5 12 5.44772 12 6C12 6.55228 12.4477 7 13 7H16C16.5523 7 17 7.44772 17 8V14.126ZM18 16C16.8954 16 16 16.8954 16 18C16 19.1046 16.8954 20 18 20C19.1046 20 20 19.1046 20 18C20 16.8954 19.1046 16 18 16Z" fill="currentColor"/>
+</svg>

src/icons/svg/globe.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM3.05493 11H6.90984C7.09513 8.34289 8.01951 5.71059 9.68296 3.30107C6.14719 4.24042 3.46635 7.27822 3.05493 11ZM12 3.53558C10.1538 5.84293 9.12559 8.40687 8.91547 11H15.0845C14.8744 8.40687 13.8462 5.84293 12 3.53558ZM15.0845 13H8.91547C9.12559 15.5931 10.1538 18.1571 12 20.4644C13.8462 18.1571 14.8744 15.5931 15.0845 13ZM9.68296 20.6989C8.01951 18.2894 7.09513 15.6571 6.90984 13H3.05493C3.46635 16.7218 6.14719 19.7596 9.68296 20.6989ZM14.317 20.6989C15.9805 18.2894 16.9049 15.6571 17.0902 13H20.9451C20.5336 16.7218 17.8528 19.7596 14.317 20.6989ZM20.9451 11H17.0902C16.9049 8.34289 15.9805 5.71059 14.317 3.30107C17.8528 4.24042 20.5336 7.27822 20.9451 11Z" fill="currentColor"/>
+</svg>

src/icons/svg/hard-drive.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 11.4477 1.44772 11 2 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H2C1.44772 13 1 12.5523 1 12Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24 3L16.76 3C17.3181 3.0003 17.8656 3.15628 18.34 3.45042C18.8139 3.7443 19.1965 4.16444 19.4449 4.66368C19.4451 4.66412 19.4453 4.66456 19.4455 4.665L22.8942 11.5523C22.9638 11.6913 23 11.8446 23 12V18C23 18.7957 22.6839 19.5587 22.1213 20.1213C21.5587 20.6839 20.7957 21 20 21H4C3.20435 21 2.44129 20.6839 1.87868 20.1213C1.31607 19.5587 1 18.7956 1 18V12C1 11.8446 1.03624 11.6913 1.10583 11.5523L4.55447 4.665C4.55471 4.66451 4.55495 4.66403 4.5552 4.66354C4.80358 4.16436 5.18617 3.74427 5.66004 3.45042C6.13436 3.15628 6.68187 3.0003 7.24 3ZM5.45 5.11L6.34417 5.55773L3 12.2364V18C3 18.2652 3.10536 18.5196 3.29289 18.7071C3.48043 18.8946 3.73478 19 4 19H20C20.2652 19 20.5196 18.8946 20.7071 18.7071C20.8946 18.5196 21 18.2652 21 18V12.2364L17.6558 5.55773L17.6545 5.555C17.5717 5.38839 17.4441 5.24818 17.2859 5.15014C17.1279 5.05213 16.9456 5.00013 16.7597 5H7.24034C7.05436 5.00013 6.87211 5.05213 6.71405 5.15014C6.55594 5.24819 6.42832 5.38839 6.34553 5.555L5.45 5.11Z" fill="currentColor"/>
+</svg>

src/icons/svg/layers.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5528 1.10557C11.8343 0.964809 12.1657 0.964809 12.4472 1.10557L22.4472 6.10557C22.786 6.27496 23 6.62123 23 7C23 7.37877 22.786 7.72504 22.4472 7.89443L12.4472 12.8944C12.1657 13.0352 11.8343 13.0352 11.5528 12.8944L1.55278 7.89443C1.214 7.72504 0.999998 7.37877 0.999998 7C0.999998 6.62123 1.214 6.27496 1.55278 6.10557L11.5528 1.10557ZM4.23607 7L12 10.882L19.7639 7L12 3.11803L4.23607 7Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.10557 16.5528C1.35256 16.0588 1.95323 15.8586 2.44721 16.1056L12 20.882L21.5528 16.1056C22.0468 15.8586 22.6474 16.0588 22.8944 16.5528C23.1414 17.0468 22.9412 17.6474 22.4472 17.8944L12.4472 22.8944C12.1657 23.0352 11.8343 23.0352 11.5528 22.8944L1.55278 17.8944C1.05881 17.6474 0.858581 17.0468 1.10557 16.5528Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.10557 11.5528C1.35256 11.0588 1.95323 10.8586 2.44721 11.1056L12 15.882L21.5528 11.1056C22.0468 10.8586 22.6474 11.0588 22.8944 11.5528C23.1414 12.0468 22.9412 12.6474 22.4472 12.8944L12.4472 17.8944C12.1657 18.0352 11.8343 18.0352 11.5528 17.8944L1.55278 12.8944C1.05881 12.6474 0.858581 12.0468 1.10557 11.5528Z" fill="currentColor"/>
+</svg>