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

1 year ago · 9d65dc862d
parent cf06fdee08
commit 9d65dc862d
15 changed files with 124 additions and 94 deletions
--- a/public/logo.svg
+++ b/public/logo.svg
--- a/src/components/CustomTable/src/baseTable.scss
+++ b/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 th.el-table__cell.is-leaf {
+    &.el-table td.el-table__cell {
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
    }
--- a/src/components/CustomTable/src/baseTable.tsx
+++ b/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>
                );
              }
--- a/src/components/CustomTree/src/collapseTreeItem.tsx
+++ b/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>
--- a/src/components/CustomTree/src/collapseTreeStyle.scss
+++ b/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 {
--- a/src/components/TableActionCard/isDelete.tsx
+++ b/src/components/TableActionCard/isDelete.tsx
--- a/src/layout/components/navbar.vue
+++ b/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
-    class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
-  >
+  <div class="navbar bg-[#fff]">
    <!-- <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'" />

--- a/src/layout/components/sidebar/logo.vue
+++ b/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;
-  margin: 0 20px;
+  padding: 0 0 12px;
+  // 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;
    }
  }
 }
--- a/src/layout/components/sidebar/vertical.vue
+++ b/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");
-  background-repeat: no-repeat;
-  background-position: center bottom;
-  background-size: contain;
-  border-radius: 12px;
+
+  .menu_wrap {
+    background-color: #05102f;
+    background-image: url("@/assets/svg/bgFooter.svg");
+    background-repeat: no-repeat;
+    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;
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@ -183,3 +183,12 @@
  bottom: 0;
  padding: 20px 40px 40px;
 }
+
+/* table */
+
+// 列表操作栏
+.table_action_box {
+  .el-button {
+    padding: 0;
+  }
+}
--- a/src/style/vars.scss
+++ b/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;
--- a/src/views/alarm/index.vue
+++ b/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>
--- a/src/views/device/components/DeviceCard.vue
+++ b/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;
      }
    }
  }
--- a/src/views/serverModule/components/ServerCard.scss
+++ b/src/views/serverModule/components/ServerCard.scss
@ -5,14 +5,14 @@
  height: 182px;

  // background-color: skyblue;
-  // border: 1.5px solid #52c41a
-  border-radius: 12px;
+  border: 1.5px solid #52c41a;
+  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;
      }
    }
  }
--- a/src/views/serverModule/components/ServerCard.vue
+++ b/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 {