新增了自动副本的空壳ui组件

src/router/index.js

@@ -13,6 +13,7 @@ const router = createRouter({
         {path: '/toolBox/byte', component: () => import('@/views/toolBox/bytePage.vue')},
         {path: '/toolBox/common', component: () => import('@/views/toolBox/commonPage.vue')},
         {path: '/toolBox/test', component: () => import('@/views/toolBox/testPage.vue')},
+        {path: '/autoCounterPart', component: () => import('@/views/autoCounterPart/autoCounterPartPage.vue')},
       ]
     },
 

src/views/autoCounterPart/autoCounterPartPage.vue

@@ -0,0 +1,87 @@
+<script setup>
+
+import {ref} from "vue";
+
+const testTableData = [
+  {
+    Name: '副本1',
+    Count: 15
+  },
+  {
+    Name: '副本2',
+    Count: 30
+  },
+  {
+    Name: '副本3',
+    Count: 6
+  },
+]
+
+const visible = ref(true)
+
+</script>
+
+<template>
+  <el-container>
+    <el-header>
+      <el-select
+          placeholder="选择副本"
+          style="width: 240px; margin-right: 20px;"
+      >
+        <el-option v-for="item in 3" :key="item">副本{{ item }}</el-option>
+
+      </el-select>
+      <el-button type="primary">添加</el-button>
+      <el-button type="warning">关闭拦截</el-button>
+      <el-button type="warning">拦截测试</el-button>
+
+    </el-header>
+    <el-main>
+      <el-table
+          style="width: 600px"
+          :data="testTableData"
+      >
+        <el-table-column label="副本名称">
+          <template #default="scope">
+            <el-icon>
+              <Flag/>
+            </el-icon>
+            <span>{{ scope.row.Name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="完成次数">
+          <template #default="scope">
+            <span>{{ scope.row.Count }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="300px">
+          <template #default="scope">
+            <el-button type="info">复位</el-button>
+            <el-button type="primary">编辑</el-button>
+            <el-button type="danger">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-drawer v-model="visible" :show-close="false">
+        <template #header="{ close, titleId, titleClass }">
+          <h4 :id="titleId" :class="titleClass">配置</h4>
+          <el-button type="primary">保存</el-button>
+          <el-button type="warning">取消</el-button>
+          <el-button type="success">刷新用户</el-button>
+        </template>
+        <el-form>
+          <el-form-item v-for="item in 4" :key="item" :label="'用户'+ item">
+            <el-select :placeholder="'请选择用户' + item" style="width: 240px; margin-right: 20px;">
+            </el-select>
+            <el-checkbox label="不出手"></el-checkbox>
+          </el-form-item>
+        </el-form>
+      </el-drawer>
+    </el-main>
+  </el-container>
+</template>
+
+<style scoped>
+
+</style>

src/views/layoutPage.vue

@@ -49,6 +49,13 @@
           </el-menu-item>
         </el-sub-menu>
 
+        <el-menu-item index="/autoCounterPart">
+          <el-icon>
+            <Burger/>
+          </el-icon>
+          <span>自动副本</span>
+        </el-menu-item>
+
         <el-menu-item index="/buy">
           <el-icon>
             <ShoppingCart/>
@@ -105,10 +112,12 @@
   .el-aside {
     height: 100%;
     border-right: 1px solid #777;
+    background-color: #545c64;
 
     h3 {
       text-align: center;
       line-height: 60px;
+      color: white;
     }
 
     .el-menu {