Browse Source

feat: 完成交互管理,页面

million 1 năm trước cách đây
mục cha
commit
2038a34af0

+ 9 - 0
front/admin-front/src/assets/autoplay/Frame.svg

@@ -0,0 +1,9 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_666_968" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="12" width="20" height="20">
+<rect x="12" y="12" width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_666_968)">
+<path d="M16.2499 25.3752C15.9444 24.8474 15.7152 24.3057 15.5624 23.7502C15.4096 23.1946 15.3333 22.6252 15.3333 22.0418C15.3333 20.1807 15.9791 18.5974 17.2708 17.2918C18.5624 15.9863 20.1388 15.3335 21.9999 15.3335H22.1458L20.8124 14.0002L21.9791 12.8335L25.3124 16.1668L21.9791 19.5002L20.8124 18.3335L22.1458 17.0002H21.9999C20.611 17.0002 19.4305 17.4897 18.4583 18.4689C17.486 19.4481 16.9999 20.6391 16.9999 22.0418C16.9999 22.4029 17.0416 22.7571 17.1249 23.1043C17.2083 23.4516 17.3333 23.7918 17.4999 24.1252L16.2499 25.3752ZM22.0208 31.1668L18.6874 27.8335L22.0208 24.5002L23.1874 25.6668L21.8541 27.0002H21.9999C23.3888 27.0002 24.5694 26.5106 25.5416 25.5314C26.5138 24.5522 26.9999 23.3613 26.9999 21.9585C26.9999 21.5974 26.9583 21.2432 26.8749 20.896C26.7916 20.5488 26.6666 20.2085 26.4999 19.8752L27.7499 18.6252C28.0555 19.1529 28.2846 19.6946 28.4374 20.2502C28.5902 20.8057 28.6666 21.3752 28.6666 21.9585C28.6666 23.8196 28.0208 25.4029 26.7291 26.7085C25.4374 28.0141 23.861 28.6668 21.9999 28.6668H21.8541L23.1874 30.0002L22.0208 31.1668Z" fill="#2980FF"/>
+</g>
+<rect x="0.5" y="0.5" width="43" height="43" rx="21.5" stroke="#E0E0E0"/>
+</svg>

+ 8 - 0
front/admin-front/src/assets/autoplay/account_balance_wallet.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_758_1093" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_758_1093)">
+<path d="M10.6667 9C10.9556 9 11.1944 8.90556 11.3833 8.71667C11.5722 8.52778 11.6667 8.28889 11.6667 8C11.6667 7.71111 11.5722 7.47222 11.3833 7.28333C11.1944 7.09444 10.9556 7 10.6667 7C10.3778 7 10.1389 7.09444 9.95 7.28333C9.76111 7.47222 9.66667 7.71111 9.66667 8C9.66667 8.28889 9.76111 8.52778 9.95 8.71667C10.1389 8.90556 10.3778 9 10.6667 9ZM3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V5H12.6667V3.33333H3.33333V12.6667H12.6667V11H14V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM8.66667 11.3333C8.3 11.3333 7.98611 11.2028 7.725 10.9417C7.46389 10.6806 7.33333 10.3667 7.33333 10V6C7.33333 5.63333 7.46389 5.31944 7.725 5.05833C7.98611 4.79722 8.3 4.66667 8.66667 4.66667H13.3333C13.7 4.66667 14.0139 4.79722 14.275 5.05833C14.5361 5.31944 14.6667 5.63333 14.6667 6V10C14.6667 10.3667 14.5361 10.6806 14.275 10.9417C14.0139 11.2028 13.7 11.3333 13.3333 11.3333H8.66667ZM13.3333 10V6H8.66667V10H13.3333Z" fill="#1C1B1F"/>
+</g>
+</svg>

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 5 - 0
front/admin-front/src/assets/autoplay/avg_pace.svg


+ 8 - 0
front/admin-front/src/assets/autoplay/cancel.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_758_1030" 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_758_1030)">
+<path d="M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="#EB5757"/>
+</g>
+</svg>

+ 8 - 0
front/admin-front/src/assets/autoplay/check1.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_493_568" 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_493_568)">
+<path d="M7.95816 14.3975C7.85773 14.3975 7.76425 14.3815 7.67772 14.3495C7.59118 14.3174 7.50891 14.2624 7.43093 14.1844L3.95176 10.7052C3.83104 10.5845 3.77281 10.436 3.77707 10.2597C3.78135 10.0835 3.84385 9.93496 3.96457 9.81424C4.0853 9.69351 4.23166 9.63314 4.40368 9.63314C4.57568 9.63314 4.72204 9.69351 4.84276 9.81424L7.95816 12.9296L15.1569 5.73091C15.2776 5.61017 15.4261 5.5498 15.6024 5.5498C15.7787 5.5498 15.9272 5.61017 16.0479 5.73091C16.1686 5.85163 16.229 6.00013 16.229 6.17641C16.229 6.35269 16.1686 6.50119 16.0479 6.62191L8.48539 14.1844C8.4074 14.2624 8.32514 14.3174 8.23859 14.3495C8.15207 14.3815 8.05859 14.3975 7.95816 14.3975Z" fill="white"/>
+</g>
+</svg>

+ 8 - 0
front/admin-front/src/assets/autoplay/done_all.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_758_1394" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_758_1394)">
+<path d="M4.46686 12.0001L0.700195 8.2334L1.6502 7.30007L5.41686 11.0667L4.46686 12.0001ZM8.23353 12.0001L4.46686 8.2334L5.4002 7.2834L8.23353 10.1167L14.3669 3.9834L15.3002 4.9334L8.23353 12.0001ZM8.23353 8.2334L7.28353 7.30007L10.5835 4.00007L11.5335 4.9334L8.23353 8.2334Z" fill="white"/>
+</g>
+</svg>

+ 8 - 0
front/admin-front/src/assets/autoplay/gas_meter.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_758_1107" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_758_1107)">
+<path d="M5.33317 14.6668C4.59984 14.6668 3.97206 14.4057 3.44984 13.8835C2.92762 13.3613 2.6665 12.7335 2.6665 12.0002V5.3335C2.6665 4.60016 2.92762 3.97238 3.44984 3.45016C3.97206 2.92794 4.59984 2.66683 5.33317 2.66683H5.99984V1.3335H7.33317V2.66683H8.6665V1.3335H9.99984V2.66683H10.6665C11.3998 2.66683 12.0276 2.92794 12.5498 3.45016C13.0721 3.97238 13.3332 4.60016 13.3332 5.3335V12.0002C13.3332 12.7335 13.0721 13.3613 12.5498 13.8835C12.0276 14.4057 11.3998 14.6668 10.6665 14.6668H5.33317ZM5.33317 13.3335H10.6665C11.0332 13.3335 11.3471 13.2029 11.6082 12.9418C11.8693 12.6807 11.9998 12.3668 11.9998 12.0002V5.3335C11.9998 4.96683 11.8693 4.65294 11.6082 4.39183C11.3471 4.13072 11.0332 4.00016 10.6665 4.00016H5.33317C4.9665 4.00016 4.65262 4.13072 4.3915 4.39183C4.13039 4.65294 3.99984 4.96683 3.99984 5.3335V12.0002C3.99984 12.3668 4.13039 12.6807 4.3915 12.9418C4.65262 13.2029 4.9665 13.3335 5.33317 13.3335ZM5.33317 6.66683H10.6665V5.3335H5.33317V6.66683ZM7.99984 12.0002C8.4665 12.0002 8.86095 11.8418 9.18317 11.5252C9.50539 11.2085 9.6665 10.8224 9.6665 10.3668C9.6665 10.0002 9.56095 9.68627 9.34984 9.42516C9.13873 9.16405 8.68873 8.6335 7.99984 7.8335C7.29984 8.6335 6.84706 9.16683 6.6415 9.4335C6.43595 9.70016 6.33317 10.0113 6.33317 10.3668C6.33317 10.8224 6.49428 11.2085 6.8165 11.5252C7.13873 11.8418 7.53317 12.0002 7.99984 12.0002Z" fill="#1C1B1F"/>
+</g>
+</svg>

+ 8 - 0
front/admin-front/src/assets/autoplay/motion_photos_paused.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_758_1305" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_758_1305)">
+<path d="M5.99992 10.0002H7.33325V6.00016H5.99992V10.0002ZM8.66658 10.0002H9.99992V6.00016H8.66658V10.0002ZM7.99992 14.6668C7.0777 14.6668 6.21103 14.4918 5.39992 14.1418C4.58881 13.7918 3.88325 13.3168 3.28325 12.7168C2.68325 12.1168 2.20825 11.4113 1.85825 10.6002C1.50825 9.78905 1.33325 8.92238 1.33325 8.00016C1.33325 7.52238 1.38325 7.05294 1.48325 6.59183C1.58325 6.13072 1.7277 5.6835 1.91659 5.25016L2.94992 6.2835C2.86103 6.57238 2.79159 6.8585 2.74159 7.14183C2.69159 7.42516 2.66659 7.71127 2.66659 8.00016C2.66659 9.48905 3.18325 10.7502 4.21659 11.7835C5.24992 12.8168 6.51103 13.3335 7.99992 13.3335C9.48881 13.3335 10.7499 12.8168 11.7833 11.7835C12.8166 10.7502 13.3333 9.48905 13.3333 8.00016C13.3333 6.51127 12.8166 5.25016 11.7833 4.21683C10.7499 3.1835 9.48881 2.66683 7.99992 2.66683C7.69992 2.66683 7.40825 2.69183 7.12492 2.74183C6.84159 2.79183 6.56103 2.86127 6.28325 2.95016L5.26659 1.9335C5.71103 1.7335 6.15547 1.5835 6.59992 1.4835C7.04436 1.3835 7.51103 1.3335 7.99992 1.3335C8.92214 1.3335 9.78881 1.5085 10.5999 1.8585C11.411 2.2085 12.1166 2.6835 12.7166 3.2835C13.3166 3.8835 13.7916 4.58905 14.1416 5.40016C14.4916 6.21127 14.6666 7.07794 14.6666 8.00016C14.6666 8.92238 14.4916 9.78905 14.1416 10.6002C13.7916 11.4113 13.3166 12.1168 12.7166 12.7168C12.1166 13.3168 11.411 13.7918 10.5999 14.1418C9.78881 14.4918 8.92214 14.6668 7.99992 14.6668ZM3.66659 4.66683C3.38881 4.66683 3.1527 4.56961 2.95825 4.37516C2.76381 4.18072 2.66659 3.94461 2.66659 3.66683C2.66659 3.38905 2.76381 3.15294 2.95825 2.9585C3.1527 2.76405 3.38881 2.66683 3.66659 2.66683C3.94436 2.66683 4.18047 2.76405 4.37492 2.9585C4.56936 3.15294 4.66658 3.38905 4.66658 3.66683C4.66658 3.94461 4.56936 4.18072 4.37492 4.37516C4.18047 4.56961 3.94436 4.66683 3.66659 4.66683Z" fill="white"/>
+</g>
+</svg>

+ 593 - 7
front/admin-front/src/views/autoplay/index.vue

@@ -73,7 +73,7 @@
                当前执行/计划执行次数
              </div>
            </div>
-           <div class="right">
+           <div class="right" @click="drawerStrategy = true">
              <img src="../../assets/autoplay/autoplay.svg" alt="autoplay">
              批量执行
            </div>
@@ -145,8 +145,9 @@
     </el-drawer>
     <el-drawer
       :visible.sync="drawerRecord"
-      :with-header="false">
-      <div class="drawerRecord-container">
+      :with-header="false"
+      @closed="drawerRecordStatus = 0">
+      <div class="drawerRecord-container" v-if="drawerRecordStatus === 0">
         <div class="drawerAddress-container-head">
           <div class="drawerAddress-container-head-left">
             <div class="missionName">
@@ -220,12 +221,15 @@
                 width="150"
                 align="center">
                 <template v-slot="scope">
-                  <div class="status">
-                    <div class="text" v-if="scope.row.status === 0" style="color: #2980FF;">
+                  <div class="status" v-if="scope.row.status === 0" @click="drawerRecordStatus = 1">
+                    <div class="text" style="color: #2980FF;">
                       <img src="../../assets/autoplay/clock_loader_60.svg" alt="clock_loader_60">
                       进行中
                     </div>
-                    <div class="text" v-if="scope.row.status === 1" >
+                    <img src="../../assets/autoplay/chevron_right.svg" alt="chevron_right">
+                  </div>
+                  <div class="status" v-if="scope.row.status === 1" @click="drawerRecordStatus = 2">
+                    <div class="text">
                       <img src="../../assets/autoplay/check.svg" alt="check">
                       已完成
                     </div>
@@ -247,7 +251,347 @@
           </div>
         </div>
       </div>
+      <div class="drawerRecord-container" v-if="drawerRecordStatus === 1">
+        <div class="drawerAddress-container-head">
+          <div class="drawerAddress-container-head-left">
+            <div class="missionName">
+              <div class="id">
+                执行ID-3
+              </div>
+              <div class="name">
+                任务名称
+              </div>
+            </div>
+            <div class="text" style="color: #2980FF">
+              任务交互类型: Bridge
+            </div>
+          </div>
+        </div>
+        <div class="drawerAddress-container-main">
+          <div class="interactionStrategy">
+            <div class="item">
+              <div class="title">
+                <img src="../../assets/autoplay/account_balance_wallet.svg" alt="account_balance_wallet">
+                交互钱包
+              </div>
+              <div class="info">
+                钱包名称
+              </div>
+            </div>
+            <div class="item">
+              <div class="title">
+                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
+                交互间隔时间
+              </div>
+              <div class="info">
+                340s
+              </div>
+            </div>
+            <div class="item">
+              <div class="title">
+                <img src="../../assets/autoplay/gas_meter.svg" alt="gas_meter">
+                最大 Gas fee
+              </div>
+              <div class="info">
+                0.34
+              </div>
+            </div>
+          </div>
+          <div class="recordTitle">
+            <div class="left">
+              <div class="text">
+                正在进行中
+              </div>
+              <div class="number">
+                总计交互地址: 3/100
+              </div>
+            </div>
+            <div class="right">
+              <img src="../../assets/autoplay/Frame.svg" alt="Frame">
+            </div>
+          </div>
+          <div class="table">
+            <el-table
+              :data="ongoingData"
+              style="width: 100%">
+              <el-table-column
+                prop="address"
+                width="150">
+              </el-table-column>
+              <el-table-column
+                prop="amount">
+              </el-table-column>
+              <el-table-column
+                prop="gas">
+              </el-table-column>
+              <el-table-column
+                prop="txId">
+              </el-table-column>
+              <el-table-column
+                prop="status">
+                <template v-slot="scope">
+                  <div class="status" style="cursor: auto">
+                    <div class="text" v-if="scope.row.status === 0" style="color: #EB5757;">
+                      <img src="../../assets/autoplay/cancel.svg" alt="cancel">
+                      未完成
+                    </div>
+                    <div class="text" v-if="scope.row.status === 1" >
+                      <img src="../../assets/autoplay/check.svg" alt="check">
+                      已完成
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <div class="drawerView-container-footer">
+          <div class="pagination">
+            <el-pagination
+              small
+              layout="prev, pager, next"
+              :page-size="10"
+              :total="3">
+            </el-pagination>
+          </div>
+        </div>
+        <div class="progressBarBox">
+          <div class="progressBar">
+            <div class="progressBar-two">
+              <img src="../../assets/autoplay/motion_photos_paused.svg" alt="motion_photos_paused">
+              当前执行进度
+            </div>
+            <div class="number">
+              11/12
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="drawerRecord-container" v-if="drawerRecordStatus === 2">
+        <div class="drawerAddress-container-head">
+          <div class="drawerAddress-container-head-left">
+            <div class="missionName">
+              <div class="id">
+                执行ID-3
+              </div>
+              <div class="name">
+                任务名称
+              </div>
+            </div>
+            <div class="text" style="color: #2980FF">
+              任务交互类型: Bridge
+            </div>
+          </div>
+        </div>
+        <div class="drawerAddress-container-main">
+          <div class="interactionStrategy">
+            <div class="item">
+              <div class="title">
+                <img src="../../assets/autoplay/account_balance_wallet.svg" alt="account_balance_wallet">
+                交互钱包
+              </div>
+              <div class="info">
+                钱包名称
+              </div>
+            </div>
+            <div class="item">
+              <div class="title">
+                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
+                交互间隔时间
+              </div>
+              <div class="info">
+                340s
+              </div>
+            </div>
+            <div class="item">
+              <div class="title">
+                <img src="../../assets/autoplay/gas_meter.svg" alt="gas_meter">
+                最大 Gas fee
+              </div>
+              <div class="info">
+                0.34
+              </div>
+            </div>
+          </div>
+          <div class="recordTitle">
+            <div class="left">
+              <div class="text">
+                正在进行中
+              </div>
+              <div class="number">
+                总计交互地址: 3/100
+              </div>
+            </div>
+          </div>
+          <div class="table">
+            <el-table
+              :data="ongoingData"
+              style="width: 100%">
+              <el-table-column
+                prop="address"
+                width="150">
+              </el-table-column>
+              <el-table-column
+                prop="amount">
+              </el-table-column>
+              <el-table-column
+                prop="gas">
+              </el-table-column>
+              <el-table-column
+                prop="txId">
+              </el-table-column>
+              <el-table-column
+                prop="status">
+                <template v-slot="scope">
+                  <div class="status" style="cursor: auto">
+                    <div class="text">
+                      <img src="../../assets/autoplay/check.svg" alt="check">
+                      已完成
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <div class="drawerView-container-footer">
+          <div class="pagination">
+            <el-pagination
+              small
+              layout="prev, pager, next"
+              :page-size="10"
+              :total="3">
+            </el-pagination>
+          </div>
+        </div>
+        <div class="progressBarBox">
+          <div class="progressBar" style="background: black">
+            <div class="progressBar-two" style="background: black">
+              <img src="../../assets/autoplay/done_all.svg" alt="done_all">
+              执行进度已完成
+            </div>
+            <div class="number">
+              12/12
+            </div>
+          </div>
+        </div>
+      </div>
     </el-drawer>
+    <el-drawer
+      :visible.sync="drawerStrategy"
+      :with-header="false"
+      @closed="accountPassword = false">
+      <div class="drawerStrategy-container">
+        <div class="drawerAddress-container-head">
+          <div class="drawerAddress-container-head-left">
+            <div class="info">
+              <div class="projectName">
+                执行策略
+              </div>
+              <div class="id">
+                Swap | 交互任务名称3
+              </div>
+            </div>
+          </div>
+          <div class="drawerAddress-container-head-right">
+            <div class="complete" @click="accountPassword = true">
+              <img src="../../assets/address/done_all.svg" alt="done_all">
+              下一步
+            </div>
+          </div>
+        </div>
+        <div class="drawerAddress-container-main">
+          <div class="item">
+            <div class="title">
+              交互钱包
+            </div>
+            <el-select v-model="chainId" placeholder="选择交互钱包">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="item">
+            <div class="title">
+              目标资产(From)
+            </div>
+            <el-select v-model="chainId" placeholder="选择交互资产">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="item">
+            <div class="title">
+              目标资产(To)
+            </div>
+            <el-select v-model="chainId" placeholder="选择交互资产">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="item">
+            <div class="title">
+              间隔时间
+            </div>
+            <el-select v-model="chainId" placeholder="选择间隔差范围/分">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="item">
+            <div class="title">
+              交互金额
+            </div>
+            <el-input v-model="input" placeholder="输入交互金额"></el-input>
+          </div>
+          <div class="item">
+            <div class="title">
+              最大 Gas fee
+            </div>
+            <el-input v-model="input" placeholder="输入最大 Gas fee"></el-input>
+          </div>
+        </div>
+        <div class="accountPassword" v-if="accountPassword">
+          <div class="title">
+            输入钱包密码
+          </div>
+          <div class="inputTitle">
+            钱包密码
+          </div>
+          <el-input v-model="input" placeholder="输入钱包密码"></el-input>
+          <div class="confirm">
+            <img src="../../assets/autoplay/check1.svg" alt="check1">
+            确认
+          </div>
+          <div class="tip">
+            <div class="title">
+              <img src="../../assets/address/tips_and_updates.svg" alt="tips_and_updates">
+              提示
+            </div>
+            <div class="description">
+              此密码为您账户钱包的 Keystore 密码,请妥善保管,
+              系统无法为您找回。
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+
   </div>
 
 </template>
@@ -311,6 +655,7 @@ export default {
         label: 'ETH'
       }],
       drawerRecord:false,
+      drawerRecordStatus:0,
       value1: '',
       recordData:[
         {
@@ -334,7 +679,39 @@ export default {
           gas:'GAS',
           status:0
         },
-      ]
+      ],
+      ongoingData:[
+        {
+          address:'交互钱包地址',
+          amount:'金额',
+          gas:'Gas',
+          txId:'TX ID',
+          status:1
+        },
+        {
+          address:'交互钱包地址',
+          amount:'金额',
+          gas:'Gas',
+          txId:'TX ID',
+          status:1
+        },
+        {
+          address:'交互钱包地址',
+          amount:'金额',
+          gas:'Gas',
+          txId:'TX ID',
+          status:1
+        },
+        {
+          address:'交互钱包地址',
+          amount:'金额',
+          gas:'Gas',
+          txId:'TX ID',
+          status:0
+        },
+      ],
+      drawerStrategy:false,
+      accountPassword:false
     }
   },
   methods: {
@@ -559,6 +936,7 @@ export default {
           background: #2980FF;
           border: 1px solid #2980FF;
           border-radius: 10px;
+          cursor: pointer;
         }
       }
       .horizontalLine{
@@ -654,12 +1032,14 @@ export default {
     flex-direction: column;
     height: 100vh;
     overflow: auto;
+    position: relative;
     .drawerAddress-container-head{
       padding: 56px 40px;
       background: #FFFFFF;
       display: flex;
       align-items: center;
       justify-content: space-between;
+
       .drawerAddress-container-head-left{
         display: flex;
         flex-direction: column;
@@ -743,6 +1123,36 @@ export default {
         margin-top: 40px;
         margin-bottom: 30px;
       }
+      .interactionStrategy{
+        width: 100%;
+        height: 108px;
+        background: #FFFFFF;
+        border: 1px solid #F5F5F5;
+        border-radius: 4px;
+        padding: 28px;
+        display: flex;
+        justify-content: space-between;
+        .item{
+          display: flex;
+          flex-direction: column;
+          gap:12px;
+          .title{
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 18px;
+            color: #181818;
+            display: flex;
+            align-items: center;
+            gap:6px;
+          }
+          .info{
+            font-weight: 700;
+            font-size: 17px;
+            line-height: 22px;
+            color: #222222;
+          }
+        }
+      }
       .recordTitle{
         display: flex;
         justify-content: space-between;
@@ -811,6 +1221,182 @@ export default {
         color: #EB5757;
       }
     }
+    .progressBarBox{
+      display: flex;
+      justify-content: center;
+      .progressBar{
+        position: absolute;
+        top:138px;
+        width: 90%;
+        height: 50px;
+        background: #2980FF;
+        box-shadow: 0px 1px 16px rgba(15, 15, 15, 0.16);
+        border-radius: 144px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .progressBar-two{
+          width: 40%;
+          height: 50px;
+          background: #3b9ffa;
+          border-radius: 144px;
+          display: flex;
+          align-items: center;
+          padding-left: 16px;
+          gap:6px;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 18px;
+          color: #FFFFFF;
+        }
+        .number{
+          font-weight: 700;
+          font-size: 17px;
+          line-height: 22px;
+          color: #FFFFFF;
+          padding-right: 16px;
+        }
+      }
+    }
+  }
+  .drawerStrategy-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{
+        display: flex;
+        gap:8px;
+        .info{
+          display: flex;
+          flex-direction: column;
+          gap:8px;
+          .projectName{
+            font-weight: 700;
+            font-size: 17px;
+            line-height: 22px;
+            color: #222222;
+          }
+          .id{
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            color: #838383;
+          }
+        }
+      }
+      .drawerAddress-container-head-right{
+        display: flex;
+        align-items: center;
+        gap:48px;
+        .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:12px;
+      .item{
+        display: flex;
+        flex-direction: column;
+        gap:12px;
+        .title{
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 18px;
+          color: #181818;
+        }
+
+      }
+    }
+    .accountPassword{
+      width: 440px;
+      height: 374px;
+      background: #fbfdff;
+      border-radius: 10px;
+      position: fixed;
+      margin: auto;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      padding: 36px 40px;
+      .title{
+        font-weight: 700;
+        font-size: 21px;
+        line-height: 28px;
+        color: #212121;
+      }
+      .inputTitle{
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 18px;
+        color: #383838;
+        margin-top: 32px;
+        margin-bottom: 12px;
+      }
+      .confirm{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap:8px;
+        font-weight: 700;
+        font-size: 15px;
+        line-height: 20px;
+        color: #FFFFFF;
+        width: 100%;
+        height: 52px;
+        background: #2980ff;
+        border-radius: 6px;
+        margin-top: 12px;
+        margin-bottom: 20px;
+      }
+      .tip{
+        display: flex;
+        flex-direction: column;
+        gap:9px;
+        margin-top: 36px;
+        .title{
+          display: flex;
+          align-items: center;
+          gap:4px;
+          font-weight: 700;
+          font-size: 17px;
+          line-height: 22px;
+          color: #EB5757;
+        }
+        .description{
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 18px;
+          color: #EB5757;
+        }
+      }
+    }
   }
 }
 </style>

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác