feat: 自定义分页列表完善,UI走查内容修复调整

src/components/CustomTable/src/baseTable.scss

@@ -13,36 +13,23 @@
       tr {
         & > td:nth-child(1) {
           border-left: 1px solid #dcdcdc;
-          border-radius: 4px;
+          border-radius: 4px 0 0 4px;
         }
 
         & > td:last-child {
           border-right: 1px solid #dcdcdc !important;
-          border-radius: 4px;
+          border-radius: 0 4px 4px 0;
         }
       }
     }
 
-    tr {
-      & > th:nth-child(1) {
-        border-left: 1px solid #dcdcdc;
-        border-radius: 4px 0 0 4px;
-      }
-
-      & > th:last-child {
-        border-right: 1px solid #dcdcdc !important;
-        border-radius: 0 4px 4px 0;
-      }
-    }
-
     .el-table__header > thead {
       th {
         background-color: rgba(21, 77, 221, 0.1) !important;
       }
     }
 
-    &.el-table td.el-table__cell,
+    &.el-table td.el-table__cell {
-    &.el-table th.el-table__cell.is-leaf {
       border-top: 1px solid #dcdcdc;
       border-bottom: 1px solid #dcdcdc;
     }

src/components/CustomTable/src/baseTable.tsx

@@ -276,7 +276,8 @@ export default defineComponent({
               default: ({ row }: { row: Record<string, any> }) => {
                 return (
                   <div>
-                    <ul>
+                    {slots.actionBar && <div>{slots.actionBar({ row })}</div>}
+                    {/* <ul>
                       <li
                         class="flex items-center"
                         style={{ fontSize: "14px", color: "#E80D0D" }}
@@ -294,7 +295,7 @@ export default defineComponent({
                           </span>
                         </el-button>
                       </li>
-                    </ul>
+                    </ul> */}
                   </div>
                 );
               }

src/components/CustomTree/src/collapseTreeItem.tsx

@@ -1,3 +1,11 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-16 14:13:25
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-02-06 15:12:19
+ * @FilePath: \General-AI-Platform-Web-Client\src\components\CustomTree\src\collapseTreeItem.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import { computed, defineComponent, nextTick, onBeforeUnmount, ref } from "vue";
 import "./collapseTreeStyle.scss";
 import { emitter } from "@/utils/mitt";
@@ -53,7 +61,7 @@ export default defineComponent({
             }}
           >
             <span class={["collapseTreeItem_line"]}></span>
-            <div class={["collapseTreeItem_main_info"]}>
+            <div class={["collapseTreeItem_main_info flex items-center"]}>
               <i class="iconfont icon-zishebeizu tree_item_icon"></i>
               <span>{nodeLatestInfo.value.name}</span>
             </div>

src/components/CustomTree/src/collapseTreeStyle.scss

@@ -15,6 +15,7 @@
   .selected_active {
     color: $--theme-color;
     background: rgb(21 77 221 / 10%);
+    font-weight: bold;
   }
 
   .root_tree_icon {

src/layout/components/navbar.vue

@@ -3,7 +3,7 @@
 // import Notice from "./notice/index.vue";
 import mixNav from "./sidebar/mixNav.vue";
 import { useNav } from "@/layout/hooks/useNav";
-import Breadcrumb from "./sidebar/breadCrumb.vue";
+// import Breadcrumb from "./sidebar/breadCrumb.vue";
 // import topCollapse from "./sidebar/topCollapse.vue";
 import { useTranslationLang } from "../hooks/useTranslationLang";
 // import globalization from "@/assets/svg/globalization.svg?component";
@@ -32,9 +32,7 @@ const {
 </script>
 
 <template>
-  <div
+  <div class="navbar bg-[#fff]">
-    class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
-  >
     <!-- <topCollapse
       v-if="device === 'mobile'"
       class="hamburger-container"
@@ -42,7 +40,7 @@ const {
       @toggleClick="toggleSideBar"
     /> -->
 
-    <Breadcrumb class="breadcrumb-container" />
+    <!-- <Breadcrumb class="breadcrumb-container" /> -->
 
     <mixNav v-if="layout === 'mix'" />
 

src/layout/components/sidebar/logo.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-10 10:15:50
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-12 16:57:26
+ * @LastEditTime: 2024-02-05 17:56:50
  * @FilePath: \General-AI-Platform-Web-Client\src\layout\components\sidebar\logo.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -44,10 +44,10 @@ const { title } = useNav();
 
 <style lang="scss" scoped>
 .sidebar-logo-box {
-  padding: 24px 0 16px;
+  padding: 0 0 12px;
-  margin: 0 20px;
+  // margin: 0 20px;
   overflow: hidden;
-  border-bottom: 1px solid #fff3;
+  // border-bottom: 1px solid #fff3;
 
   .sidebar-logo-link {
     display: flex;
@@ -59,7 +59,7 @@ const { title } = useNav();
 
     img {
       display: inline-block;
-      width: 56px;
+      width: 96px;
     }
   }
 }

src/layout/components/sidebar/vertical.vue

@@ -103,7 +103,7 @@ onBeforeUnmount(() => {
     <Logo :collapse="isCollapse" />
     <el-scrollbar
       wrap-class="scrollbar-wrapper"
-      :class="[device === 'mobile' ? 'mobile' : 'pc']"
+      :class="['menu_wrap', device === 'mobile' ? 'mobile' : 'pc']"
     >
       <!-- <el-menu
         router
@@ -150,17 +150,21 @@ $--noneSelectedColor: rgb(255 255 255 / 80%);
 
 .sidebar-vertical-container {
   width: 96px;
-  background-color: #05102f;
+
-  background-image: url("@/assets/svg/bgFooter.svg");
+  .menu_wrap {
-  background-repeat: no-repeat;
+    background-color: #05102f;
-  background-position: center bottom;
+    background-image: url("@/assets/svg/bgFooter.svg");
-  background-size: contain;
+    background-repeat: no-repeat;
-  border-radius: 12px;
+    background-position: center bottom;
+    background-size: contain;
+    border-radius: 12px;
+  }
 
   .menu_box {
     font-size: 14px;
     color: $--noneSelectedColor;
     text-align: center;
+    height: calc(100vh - 92px);
 
     & > li {
       padding-top: 16px;

src/style/element-plus.scss

@@ -183,3 +183,12 @@
   bottom: 0;
   padding: 20px 40px 40px;
 }
+
+/* table */
+
+// 列表操作栏
+.table_action_box {
+  .el-button {
+    padding: 0;
+  }
+}

src/style/vars.scss

@@ -33,7 +33,7 @@ $--theme-color: #154ddd;
 }
 
 .main {
-  padding-top: 16px;
+  // padding-top: 16px;
   overflow: hidden;
   position: relative;
   // overflow-y: scroll;

src/views/alarm/index.vue

@@ -198,6 +198,10 @@ function handleTableChange(record) {
   };
   getList();
 }
+/**操作栏事件 */
+function handleDel(row) {
+  console.log(row, "handleDel");
+}
 
 onMounted(() => {
   getList();
@@ -245,6 +249,26 @@ onMounted(() => {
               >删除</el-button
             >
           </template> -->
+          <template v-slot:actionBar="{ row }">
+            <ul class="table_action_box">
+              <li class="flex items-center" @click="handleDel(row)">
+                <el-button text>
+                  <i
+                    class="iconfont icon-shanchu pr-[8px]"
+                    :style="{ fontSize: '14px', color: '#E80D0D' }"
+                  ></i>
+                  <span
+                    :style="{
+                      fontSize: '14px',
+                      color: '#E80D0D'
+                    }"
+                  >
+                    删除
+                  </span>
+                </el-button>
+              </li>
+            </ul>
+          </template>
         </BaseTable>
       </template>
     </div>

src/views/device/components/DeviceCard.vue

@@ -145,7 +145,7 @@ const generateRandomDate = () => {
   }
 
   &_offline {
-    background-color: #f5f5f5;
+    background-color: #f7f7f7;
     border: 1.5px solid #dcdcdc;
   }
 
@@ -185,7 +185,8 @@ const generateRandomDate = () => {
       }
 
       &_offline {
-        background-color: #dcdcdc;
+        background-color: #e0e0e0;
+        color: #999;
       }
     }
   }

src/views/serverModule/components/ServerCard.scss

@@ -5,14 +5,14 @@
   height: 182px;
 
   // background-color: skyblue;
-  // border: 1.5px solid #52c41a
+  border: 1.5px solid #52c41a;
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
 
   &_offline {
-    background-color: #f5f5f5;
+    background-color: #f7f7f7;
 
-    // border: 1.5px solid #dcdcdc;
+    border: 1.5px solid #dcdcdc;
   }
 
   .server-header {
@@ -36,10 +36,11 @@
       color: #fff;
       text-align: center;
       background-color: #52c41a;
-      border-radius: 0 12px;
+      border-radius: 0 8px;
 
       &_offline {
-        background-color: #dcdcdc;
+        background-color: #e0e0e0;
+        color: #999;
       }
     }
   }

src/views/serverModule/components/ServerCard.vue

@@ -108,6 +108,7 @@ const progressData = ref([
 .rectProgress_box {
   .el-progress-bar__outer {
     border-radius: 2px;
+    background-color: #ebebeb;
   }
 
   .el-progress-bar__inner {