feat: 完成数据看板,抽屉,页面

front/admin-front/src/assets/navbar/account_balance.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_208_683" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_208_683)">
+<path d="M4.16663 14.1666V8.33331H5.83329V14.1666H4.16663ZM9.16663 14.1666V8.33331H10.8333V14.1666H9.16663ZM1.66663 17.5V15.8333H18.3333V17.5H1.66663ZM14.1666 14.1666V8.33331H15.8333V14.1666H14.1666ZM1.66663 6.66665V4.99998L9.99996 0.833313L18.3333 4.99998V6.66665H1.66663ZM5.37496 4.99998H14.625L9.99996 2.70831L5.37496 4.99998Z" fill="#222222"/>
+</g>
+</svg>

front/admin-front/src/assets/navbar/arrow_right_alt.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_330_2039" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_330_2039)">
+<path d="M14 18L12.6 16.55L16.15 13H4V11H16.15L12.6 7.45L14 6L20 12L14 18Z" fill="#2980FF"/>
+</g>
+</svg>

front/admin-front/src/assets/navbar/close.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_208_754" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_208_754)">
+<path d="M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z" fill="#828282"/>
+</g>
+</svg>

front/admin-front/src/assets/navbar/logout.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_208_688" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_208_688)">
+<path d="M4.16667 17.5C3.70833 17.5 3.31597 17.3368 2.98958 17.0104C2.66319 16.684 2.5 16.2917 2.5 15.8333V4.16667C2.5 3.70833 2.66319 3.31597 2.98958 2.98958C3.31597 2.66319 3.70833 2.5 4.16667 2.5H10V4.16667H4.16667V15.8333H10V17.5H4.16667ZM13.3333 14.1667L12.1875 12.9583L14.3125 10.8333H7.5V9.16667H14.3125L12.1875 7.04167L13.3333 5.83333L17.5 10L13.3333 14.1667Z" fill="#EB5757"/>
+</g>
+</svg>

front/admin-front/src/assets/navbar/tune.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_208_693" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_208_693)">
+<path d="M11 21V15H13V17H21V19H13V21H11ZM3 19V17H9V19H3ZM7 15V13H3V11H7V9H9V15H7ZM11 13V11H21V13H11ZM15 9V3H17V5H21V7H17V9H15ZM3 7V5H13V7H3Z" fill="#222222"/>
+</g>
+</svg>

front/admin-front/src/layout/components/Navbar.vue

@@ -3,7 +3,7 @@
 <!--    <search></search>-->
     <el-row>
       <el-col :span="6" :offset="14">
-        <div class="avatar-wrapper navbar">
+        <div class="avatar-wrapper navbar" @click="systemSetup = true">
           <el-avatar
             v-if="this.avatar"
             class="user-avatar"
@@ -41,14 +41,128 @@
             ></svg-icon>
             <span style="width: 50px; margin-left: 5px">查看者</span>
           </div>
-          <div class="logout-btn">
-            <el-button @click.native="logout" class="logout">
-              <svg-icon icon-class="logout" /> 登出
-            </el-button>
-          </div>
+<!--          <div class="logout-btn">-->
+<!--            <el-button @click.native="logout" class="logout">-->
+<!--              <svg-icon icon-class="logout" /> 登出-->
+<!--            </el-button>-->
+<!--          </div>-->
         </div>
       </el-col>
     </el-row>
+    <div class="systemSetup" v-if="systemSetup">
+      <div class="title">
+        <div class="left">
+          <img src="../../assets/navbar/tune.svg" alt="tune">
+          管理系统
+        </div>
+        <img @click="systemSetup = false" style="cursor: pointer" src="../../assets/navbar/close.svg" alt="close">
+      </div>
+      <div class="horizontalLine"/>
+      <div class="item" style="margin-bottom: 28px;cursor: pointer" @click="drawerEmail = true">
+        <div class="left">
+          <img src="../../assets/navbar/alternate_email.svg" alt="alternate_email">
+          邮件通知
+        </div>
+        <img src="../../assets/navbar/arrow_right_alt.svg" alt="arrow_right_alt">
+      </div>
+      <div class="item" style="margin-bottom: 16px">
+        <div class="left">
+          <img src="../../assets/navbar/account_balance.svg" alt="account_balance">
+          本地货币
+        </div>
+      </div>
+      <el-select v-model="value" style="width: 100%" placeholder="请选择本地货币">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <div class="item" @click="logout" style="margin-top: 28px;color: #EB5757;cursor: pointer">
+        <div class="left">
+          <img src="../../assets/navbar/logout.svg" alt="logout">
+          退出登录
+        </div>
+
+      </div>
+    </div>
+    <el-drawer
+      :visible.sync="drawerEmail"
+      :with-header="false">
+      <div class="drawerAddress-container">
+        <div class="drawerAddress-container-head">
+          <div class="drawerAddress-container-head-left">
+            <div class="drawerAddress-container-title">
+              邮件通知
+            </div>
+            <div class="drawerAddress-container-tip">
+              总计邮件: 2
+            </div>
+          </div>
+          <div class="drawerAddress-container-head-right">
+            <div class="complete" @click="emailNotification">
+              <img src="../../assets/address/done_all.svg" alt="done_all">
+              完成
+            </div>
+          </div>
+        </div>
+        <div class="drawerAddress-container-main">
+          <div class="moduleBox">
+            <div class="title">
+              通知模块
+            </div>
+            <div class="checkbox">
+              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+
+          <div class="timeBox">
+            <div class="title">
+              通知时间
+            </div>
+            <div class="input">
+              <el-select style="width: 100%" v-model="time" placeholder="选择通知时间">
+                <el-option
+                  v-for="item in optionsTime"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+
+          <div class="emailBox">
+            <div class="title">
+              通知邮箱
+            </div>
+            <div class="item" v-for="(item,index) in emailArr">
+              <div class="title">
+                <div class="name">
+                  通知邮箱-{{index+1}}
+                </div>
+                <div class="delete" @click="emailArrDelete(index)">
+                  <img src="../../assets/address/delete.svg" alt="delete">
+                  删除
+                </div>
+              </div>
+              <div class="input">
+                <el-input v-model="item.emailName" placeholder="输入钱包地址"></el-input>
+              </div>
+            </div>
+            <div class="addAddress" @click="emailArrPush">
+              <img src="../../assets/address/add_circle.svg" alt="add_circle">
+              添加通知邮箱
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </el-drawer>
+
   </div>
 </template>
 
@@ -59,6 +173,7 @@ import Cookies from "js-cookie";
 import Search from './Search.vue';
 export const baseUrl = process.env.VUE_APP_BASEURL;
 const TokenKey = "X-UC-AuthToken";
+const cityOptions = ['执行记录', '执行策略', 'Gas+支出金额', '执行进度'];
 export default {
   components: {
     Hamburger,
@@ -86,6 +201,36 @@ export default {
       email: undefined,
       avatar: undefined,
       address: undefined,
+
+      systemSetup:false,
+      options: [
+        {
+          value: '1',
+          label: 'USD'
+        }
+      ],
+      optionsTime: [
+        {
+          value: '1',
+          label: '每天'
+        },
+        {
+          value: '2',
+          label: '每周'
+        }
+      ],
+      value: '',
+      drawerEmail:false,
+      emailArr:[
+        {emailName:'123@qq.com'},
+        {emailName:'234@qq.com'},
+        {emailName:'345@qq.com'},
+      ],
+      time:'',
+      checkAll: false,
+      checkedCities: ['执行记录', '执行策略', 'Gas+支出金额', '执行进度'],
+      cities: cityOptions,
+      isIndeterminate: true
     };
   },
   created() {
@@ -115,6 +260,23 @@ export default {
     toggleSideBar() {
       this.$store.dispatch("app/toggleSideBar");
     },
+    emailNotification(){
+
+    },
+    emailArrDelete(index){
+      this.emailArr.splice(index,1)
+    },
+    emailArrPush(){
+      let obj =  {
+        emailName:''
+      }
+      this.emailArr.push(obj)
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    }
   },
 };
 </script>
@@ -125,6 +287,7 @@ export default {
   top: 40px;
   position: relative;
   float: right;
+  cursor: pointer;
 
   .user-avatar {
     background: #fcff00;
@@ -188,4 +351,171 @@ export default {
     cursor: pointer;
   }
 }
+.systemSetup{
+  width: 360px;
+  height: 345px;
+  background: #FFFFFF;
+  border-radius: 10px;
+  padding: 30px 36px;
+  position: fixed;
+  z-index: 100;
+  right: 90px;
+  top: 100px;
+  border: #828282 1px solid;
+  .title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left{
+      display: flex;
+      align-items: center;
+      gap:16px;
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 24px;
+      color: #222222;
+    }
+  }
+  .horizontalLine{
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px solid #e0e0e0;
+    margin-top: 30px;
+    margin-bottom: 40px;
+  }
+  .item{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left{
+      display: flex;
+      align-items: center;
+      gap:16px;
+    }
+  }
+}
+.drawerAddress-container{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  .drawerAddress-container-head{
+    padding: 56px 40px;
+    background: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .drawerAddress-container-head-left{
+      .drawerAddress-container-title{
+        font-weight: 700;
+        font-size: 21px;
+        line-height: 28px;
+        color: #181818;
+        margin-bottom: 8px;
+      }
+      .drawerAddress-container-tip{
+        font-weight: 700;
+        font-size: 12px;
+        line-height: 16px;
+        color: #919191;
+      }
+    }
+    .drawerAddress-container-head-right{
+      display: flex;
+      align-items: center;
+      gap:48px;
+      .cancellation{
+        width: 118px;
+        height: 52px;
+        background: #E0E0E0;
+        border-radius: 10px;
+        gap: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 15px;
+        line-height: 20px;
+        color: #828282;
+      }
+      .complete{
+        width: 118px;
+        height: 52px;
+        border: 2px solid #4A76FF;
+        border-radius: 10px;
+        gap:4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 15px;
+        line-height: 20px;
+        color: #2980FF;
+        cursor: pointer;
+      }
+    }
+
+  }
+  .drawerAddress-container-main{
+    padding: 36px 40px;
+    background: #f9fbff;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap:20px;
+    .title{
+      font-weight: 700;
+      font-size: 17px;
+      line-height: 20px;
+      color: #222222;
+      margin-bottom: 16px;
+    }
+    .emailBox{
+      display: flex;
+      flex-direction: column;
+      .item{
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 20px;
+        .title{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .name{
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 22px;
+            color: #181818;
+          }
+          .delete{
+            display: flex;
+            align-items: center;
+            gap:4px;
+            font-weight: 700;
+            font-size: 15px;
+            line-height: 20px;
+            color: #EB5757;
+            cursor: pointer;
+          }
+        }
+        .input{
+          display: flex;
+          align-items: center;
+          gap:24px;
+        }
+      }
+      .addAddress{
+        display: flex;
+        align-items: center;
+        gap:12px;
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #2980FF;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
 </style>

front/admin-front/src/views/dashboard/index.vue

@@ -38,7 +38,7 @@
           </div>
         </div>
       </div>
-      <div class="right">
+      <div class="right" @click="drawerFinance = true">
         <img src="../../assets/dashboard/upload.svg" alt="upload">
         导出财务报表
       </div>
@@ -198,6 +198,81 @@
         </div>
       </div>
     </div>
+    <el-drawer
+      :visible.sync="drawerFinance"
+      :with-header="false">
+      <div class="drawerAddress-container">
+        <div class="drawerAddress-container-head">
+          <div class="drawerAddress-container-head-left">
+            <div class="drawerAddress-container-title">
+              邮件通知
+            </div>
+            <div class="drawerAddress-container-tip">
+              总计邮件: 2
+            </div>
+          </div>
+          <div class="drawerAddress-container-head-right">
+            <div class="complete" @click="exportingReports">
+              <img src="../../assets/address/done_all.svg" alt="done_all">
+              确认导出
+            </div>
+          </div>
+        </div>
+        <div class="drawerAddress-container-main">
+          <div class="moduleBox">
+            <div class="title">
+              导出项目
+            </div>
+            <div class="input">
+              <el-select style="width: 100%" v-model="project" placeholder="选择导出项目">
+                <el-option
+                  v-for="item in optionsProject"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+
+          <div class="timeBox">
+            <div class="title">
+              导出内容
+            </div>
+            <div class="input">
+              <el-select style="width: 100%" v-model="project" placeholder="选择导出内容">
+                <el-option
+                  v-for="item in optionsProject"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+
+          <div class="emailBox">
+            <div class="title">
+              时间范围
+            </div>
+            <div class="block">
+              <el-date-picker
+                v-model="time"
+                type="daterange"
+                align="right"
+                unlink-panels
+                style="width: 100%"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :picker-options="pickerOptions">
+              </el-date-picker>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -233,7 +308,43 @@ export default {
       isActive: 0,
       day: ['7D', '30D', 'All'],
       visible: false,
-      datePicker: []
+      datePicker: [],
+      drawerFinance:false,
+      project:'',
+      optionsProject: [
+        {
+          value: '1',
+          label: 'zkSync'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      time:''
     };
   },
   mounted() {
@@ -430,6 +541,9 @@ export default {
       } else {
         // changeActive(0)
       }
+    },
+    exportingReports(){
+
     }
   },
 };
@@ -493,6 +607,7 @@ export default {
       font-size: 15px;
       line-height: 20px;
       color: #2980FF;
+      cursor: pointer;
     }
   }
 
@@ -800,5 +915,129 @@ export default {
       }
     }
   }
+
+  .drawerAddress-container{
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: auto;
+    .drawerAddress-container-head{
+      padding: 56px 40px;
+      background: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .drawerAddress-container-head-left{
+        .drawerAddress-container-title{
+          font-weight: 700;
+          font-size: 21px;
+          line-height: 28px;
+          color: #181818;
+          margin-bottom: 8px;
+        }
+        .drawerAddress-container-tip{
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 16px;
+          color: #919191;
+        }
+      }
+      .drawerAddress-container-head-right{
+        display: flex;
+        align-items: center;
+        gap:48px;
+        .cancellation{
+          width: 118px;
+          height: 52px;
+          background: #E0E0E0;
+          border-radius: 10px;
+          gap: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 700;
+          font-size: 15px;
+          line-height: 20px;
+          color: #828282;
+        }
+        .complete{
+          width: 118px;
+          height: 52px;
+          border: 2px solid #4A76FF;
+          border-radius: 10px;
+          gap:4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 700;
+          font-size: 15px;
+          line-height: 20px;
+          color: #2980FF;
+          cursor: pointer;
+        }
+      }
+
+    }
+    .drawerAddress-container-main{
+      padding: 36px 40px;
+      background: #f9fbff;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      gap:20px;
+      .title{
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 20px;
+        color: #222222;
+        margin-bottom: 16px;
+      }
+      .emailBox{
+        display: flex;
+        flex-direction: column;
+        .item{
+          display: flex;
+          flex-direction: column;
+          margin-bottom: 20px;
+          .title{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .name{
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 22px;
+              color: #181818;
+            }
+            .delete{
+              display: flex;
+              align-items: center;
+              gap:4px;
+              font-weight: 700;
+              font-size: 15px;
+              line-height: 20px;
+              color: #EB5757;
+              cursor: pointer;
+            }
+          }
+          .input{
+            display: flex;
+            align-items: center;
+            gap:24px;
+          }
+        }
+        .addAddress{
+          display: flex;
+          align-items: center;
+          gap:12px;
+          font-weight: 700;
+          font-size: 17px;
+          line-height: 22px;
+          color: #2980FF;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 </style>