From 341966c52ed86836eac020a298280fd9fa5f79a1 Mon Sep 17 00:00:00 2001 From: Fine Date: Mon, 13 Nov 2023 12:05:19 +0800 Subject: [PATCH] feat: task list --- src/styles/theme.scss | 6 ++++-- .../related/continuous-profiling/components/PolicyList.vue | 7 ++++--- src/views/dashboard/related/ebpf/components/TaskList.vue | 6 +++--- .../related/network-profiling/components/Tasks.vue | 6 +++--- .../dashboard/related/profile/components/SegmentList.vue | 6 +++--- .../dashboard/related/profile/components/TaskList.vue | 6 +++--- src/views/dashboard/related/trace/TraceList.vue | 4 ++-- 7 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/styles/theme.scss b/src/styles/theme.scss index a4497035..54545035 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -43,8 +43,9 @@ html { --sw-topology-border: 1px solid #999; --sw-trace-success: rgb(46 47 51 / 10%); --sw-trace-list-border: rgb(0 0 0 / 7%); - --sw-trace-list-hover: #ededed; + --sw-list-selected: #ededed; --sw-table-header: #f3f4f9; + --sw-list-hover: rgb(0 0 0 / 4%); } html.dark { @@ -74,8 +75,9 @@ html.dark { --sw-topology-border: 1px solid #666; --sw-trace-success: #aaa; --sw-trace-list-border: #333133; - --sw-trace-list-hover: #3d444f; + --sw-list-hover: #262629; --sw-table-header: #303133; + --sw-list-selected: #3d444f; } .el-table tr { diff --git a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue index 9787903c..a100d832 100644 --- a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue +++ b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue @@ -159,7 +159,7 @@ limitations under the License. --> border-bottom: 1px solid rgb(0 0 0 / 7%); &.selected { - background-color: #ededed; + background-color: var(--sw-list-selected); } } @@ -184,14 +184,15 @@ limitations under the License. --> .profile-tr { &:hover { - background-color: rgb(0 0 0 / 4%); + // background-color: rgb(0 0 0 / 4%); + background-color: var(--sw-list-hover); } } .profile-t-tool { padding: 10px 5px 10px 10px; border-bottom: 1px solid rgb(0 0 0 / 7%); - background: #f3f4f9; + background-color: var(--sw-table-header); width: 100%; font-weight: bold; } diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue index 7e50238f..371cd95d 100644 --- a/src/views/dashboard/related/ebpf/components/TaskList.vue +++ b/src/views/dashboard/related/ebpf/components/TaskList.vue @@ -92,7 +92,7 @@ limitations under the License. --> border-bottom: 1px solid rgb(0 0 0 / 7%); &.selected { - background-color: #ededed; + background-color: var(--sw-list-selected); } } @@ -117,7 +117,7 @@ limitations under the License. --> .profile-tr { &:hover { - background-color: rgb(0 0 0 / 4%); + background-color: var(--sw-list-hover); } } @@ -126,7 +126,7 @@ limitations under the License. --> font-weight: bold; border-right: 1px solid rgb(0 0 0 / 7%); border-bottom: 1px solid rgb(0 0 0 / 7%); - background: #f3f4f9; + background-color: var(--sw-table-header); } .profile-btn { diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue index a873a636..10bbb4d1 100644 --- a/src/views/dashboard/related/network-profiling/components/Tasks.vue +++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue @@ -228,7 +228,7 @@ limitations under the License. --> border-bottom: 1px solid rgb(0 0 0 / 7%); &.selected { - background-color: #ededed; + background-color: var(--sw-list-selected); } } @@ -253,14 +253,14 @@ limitations under the License. --> .profile-tr { &:hover { - background-color: rgb(0 0 0 / 4%); + background-color: var(--sw-list-hover); } } .profile-t-tool { padding: 10px 5px 10px 10px; border-bottom: 1px solid rgb(0 0 0 / 7%); - background: #f3f4f9; + background-color: var(--sw-table-header); width: 100%; } diff --git a/src/views/dashboard/related/profile/components/SegmentList.vue b/src/views/dashboard/related/profile/components/SegmentList.vue index 1addee6a..9992d9b1 100644 --- a/src/views/dashboard/related/profile/components/SegmentList.vue +++ b/src/views/dashboard/related/profile/components/SegmentList.vue @@ -110,7 +110,7 @@ limitations under the License. --> .profile-tr { &:hover { - background-color: rgb(0 0 0 / 4%); + background-color: var(--sw-list-hover); } } @@ -119,7 +119,7 @@ limitations under the License. --> border-bottom: 1px solid rgb(0 0 0 / 7%); &.selected { - background-color: #ededed; + background-color: var(--sw-list-selected); } } @@ -128,7 +128,7 @@ limitations under the License. --> font-weight: bold; border-right: 1px solid rgb(0 0 0 / 7%); border-bottom: 1px solid rgb(0 0 0 / 7%); - background: #f3f4f9; + background-color: var(--sw-table-header); } .log-item { diff --git a/src/views/dashboard/related/profile/components/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue index 7ebe29b8..89bf15db 100644 --- a/src/views/dashboard/related/profile/components/TaskList.vue +++ b/src/views/dashboard/related/profile/components/TaskList.vue @@ -171,7 +171,7 @@ limitations under the License. --> border-bottom: 1px solid rgb(0 0 0 / 7%); &.selected { - background-color: #ededed; + background-color: var(--sw-list-selected); } } @@ -196,7 +196,7 @@ limitations under the License. --> .profile-tr { &:hover { - background-color: rgb(0 0 0 / 4%); + background-color: var(--sw-list-hover); } } @@ -209,7 +209,7 @@ limitations under the License. --> font-weight: bold; border-right: 1px solid rgb(0 0 0 / 7%); border-bottom: 1px solid rgb(0 0 0 / 7%); - background: #f3f4f9; + background-color: var(--sw-table-header); } .log-item { diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue index 54832e63..8b26c3f4 100644 --- a/src/views/dashboard/related/trace/TraceList.vue +++ b/src/views/dashboard/related/trace/TraceList.vue @@ -191,7 +191,7 @@ limitations under the License. --> .trace-tr { &:hover { - background-color: rgb(0 0 0 / 4%); + background-color: var(--sw-list-hover); } } @@ -200,7 +200,7 @@ limitations under the License. --> border-bottom: 1px solid var(--sw-trace-list-border); &.selected { - background-color: var(--sw-trace-list-hover); + background-color: var(--sw-list-selected); } }