From a27598f740eed9f577e28c808f0bfcf4134ccc16 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 8 Mar 2024 17:00:53 +0800
Subject: [PATCH] =?UTF-8?q?component&quick-link=E5=B8=83=E5=B1=80=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/alert-info/index.vue       |  98 ++++++++---------
 .../src/components/dot-state/index.vue        |   5 +-
 bigtop-manager-ui/src/layouts/content.vue     |   3 +-
 bigtop-manager-ui/src/pages/service/index.vue | 104 ++++++++++++------
 4 files changed, 124 insertions(+), 86 deletions(-)

diff --git a/bigtop-manager-ui/src/components/alert-info/index.vue b/bigtop-manager-ui/src/components/alert-info/index.vue
index fe144fd8..0dd37349 100644
--- a/bigtop-manager-ui/src/components/alert-info/index.vue
+++ b/bigtop-manager-ui/src/components/alert-info/index.vue
@@ -6,8 +6,8 @@
   import customParseFormat from 'dayjs/plugin/customParseFormat'
   const visible = ref(false)
   const overlayInnerStyle = {
-    padding: '12px 0',
-    width: '400px'
+    padding: '0.75rem 0',
+    width: '25rem'
   }
 
   // now Date
@@ -18,55 +18,55 @@
 </script>
 
 <template>
-  <div class="alert">
-    <a-popover
-      v-model:open="visible"
-      placement="bottomRight"
-      trigger="click"
-      :arrow-point-at-center="true"
-      :auto-adjust-overflow="true"
-      :overlay-inner-style="overlayInnerStyle"
-    >
-      <template #title>
-        <div class="alert-title">{{ $t('common.notification') }}</div>
-      </template>
-      <template #content>
-        <ul class="alert-list">
-          <li v-for="idx in 100" :key="idx">
-            <dot-state
-              width="0.6rem"
-              height="0.6rem"
-              style="margin-right: 10px; line-height: 28px"
-              color="#f5222d"
-            />
-            <div>
-              <div class="alert-list-ctx">
-                <div>DataNode Process</div>
-                <p>
-                  Ulimit for open files (-n)is 1048576 which is higher orequal
-                  than critical value of 800000
-                </p>
-              </div>
-              <div class="alert-list-state">{{ getAlertTrigger }}</div>
+  <a-popover
+    v-model:open="visible"
+    placement="bottomRight"
+    trigger="click"
+    :arrow-point-at-center="true"
+    :auto-adjust-overflow="true"
+    :overlay-inner-style="overlayInnerStyle"
+  >
+    <template #title>
+      <div class="alert-title">{{ $t('common.notification') }}</div>
+    </template>
+    <template #content>
+      <ul class="alert-list">
+        <li v-for="idx in 100" :key="idx">
+          <dot-state
+            width="0.6rem"
+            height="0.6rem"
+            style="margin-right: 0.625rem; line-height: 1.75rem"
+            color="#f5222d"
+          />
+          <div>
+            <div class="alert-list-ctx">
+              <div>DataNode Process</div>
+              <p>
+                Ulimit for open files (-n)is 1048576 which is higher orequal
+                than critical value of 800000
+              </p>
             </div>
-          </li>
-        </ul>
-        <footer>
-          <a>{{ $t('common.view_all') }}</a>
-        </footer>
-      </template>
+            <div class="alert-list-state">{{ getAlertTrigger }}</div>
+          </div>
+        </li>
+      </ul>
+      <footer>
+        <a>{{ $t('common.view_all') }}</a>
+      </footer>
+    </template>
+    <div class="alert">
       <a-badge size="small" color="red" count="100">
         <bell-outlined />
       </a-badge>
-    </a-popover>
-  </div>
+    </div>
+  </a-popover>
 </template>
 
 <style lang="scss" scoped>
   .alert {
-    height: 36px;
-    width: 36px;
-    font-size: 16px;
+    height: 2.25rem;
+    width: 1.625rem;
+    font-size: 1rem;
     cursor: pointer;
     border-radius: 50%;
     @include flex(center, center);
@@ -79,17 +79,17 @@
     font-size: 1rem;
     color: #333333;
     font-weight: normal;
-    padding-left: 10px;
+    padding-left: 0.625rem;
   }
   .alert-list {
     padding: 0;
     list-style: none;
-    max-height: 400px;
+    max-height: 25rem;
     overflow-y: auto;
     margin-bottom: 0;
 
     li {
-      padding: 10px;
+      padding: 0.625rem;
       cursor: pointer;
       @include flex(center, null);
       &:hover {
@@ -97,7 +97,7 @@
       }
 
       &:not(:last-child) {
-        border-bottom: 1px solid #eeeeee;
+        border-bottom: 0.0625rem solid #eeeeee;
       }
     }
 
@@ -118,8 +118,8 @@
     }
   }
   footer {
-    border-top: 1px solid #eeeeee;
+    border-top: 0.0625rem solid #eeeeee;
     text-align: end;
-    padding: 10px 28px 0 10px;
+    padding: 0.625rem 1.75rem 0 0.625rem;
   }
 </style>
diff --git a/bigtop-manager-ui/src/components/dot-state/index.vue b/bigtop-manager-ui/src/components/dot-state/index.vue
index 13d48681..80cce6c1 100644
--- a/bigtop-manager-ui/src/components/dot-state/index.vue
+++ b/bigtop-manager-ui/src/components/dot-state/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dot-state" :style="config"></div>
+  <div class="dot-state" :style="config"><slot></slot></div>
 </template>
 
 <script lang="ts" setup>
@@ -36,8 +36,9 @@
 
 <style lang="scss" scoped>
   .dot-state {
-    &::after {
+    &::before {
       content: '';
+      margin: 0 0.375rem 0 0;
       display: inline-block;
       @include dot(var(--state-w), var(--state-h), var(--state-color));
     }
diff --git a/bigtop-manager-ui/src/layouts/content.vue b/bigtop-manager-ui/src/layouts/content.vue
index ecfe0363..742853d2 100644
--- a/bigtop-manager-ui/src/layouts/content.vue
+++ b/bigtop-manager-ui/src/layouts/content.vue
@@ -31,8 +31,9 @@
 
     .content {
       padding: 1rem;
+      border-radius: 0.5rem;
       background: #fff;
-      min-height: 540px;
+      min-height: 33.75rem;
     }
   }
 </style>
diff --git a/bigtop-manager-ui/src/pages/service/index.vue b/bigtop-manager-ui/src/pages/service/index.vue
index fda3679b..385f3e32 100644
--- a/bigtop-manager-ui/src/pages/service/index.vue
+++ b/bigtop-manager-ui/src/pages/service/index.vue
@@ -29,14 +29,25 @@
     }
   ]
 
+  // #52c41a   green
+  // #ff4d4f   red
+  // #d9d9d9   gray
+  // #f0f964   yellow
   const stateColor = {
-    Installed: '#00c0b9',
-    Started: '#00c0b9',
-    Maintained: '#c68d0d',
-    Uninstalled: '#f5222d',
-    Stopped: '#f5222d'
+    Installed: '#52c41a',
+    Started: '#52c41a',
+    Maintained: '#d9d9d9',
+    Uninstalled: '#f0f964',
+    Stopped: 'ff4d4f'
   }
 
+  const links = [
+    'NameNode UINameNode UINameNode',
+    'NameNode Logs',
+    'NameNode JMX',
+    'Thread Stacks'
+  ]
+
   const route = useRoute()
   const configStore = useConfigStore()
   const { allConfigs } = storeToRefs(configStore)
@@ -165,31 +176,36 @@
                   <router-link :to="'/services/' + serviceName">
                     {{ item.displayName }}
                   </router-link>
-                </div>
-                <div class="comp-info">
-                  <div class="host-name">{{ item.hostname }}</div>
-                </div>
-                <footer>
                   <a-tag
                     :bordered="false"
                     style="color: rgb(145 134 134 / 90%)"
                   >
                     {{ item.category }}
                   </a-tag>
+                </div>
+                <div class="comp-info">
+                  <div class="host-name">{{ item.hostname }}</div>
+                </div>
+                <footer>
                   <div class="comp-state">
-                    <dot-state :color="stateColor[item.state]" />
+                    <dot-state :color="stateColor[item.state]" class="dot-rest">
+                      <span class="comp-state-text">{{ item.state }}</span>
+                    </dot-state>
                   </div>
                 </footer>
               </div>
             </template>
           </div>
         </div>
-        <div class="middle-section"></div>
         <div class="right-section">
-          <a-card>
-            <template #title>{{ $t('service.quicklinks') }}</template>
-            <a-empty /> </a-card
-        ></div>
+          <h2>{{ $t('service.quicklinks') }}</h2>
+          <ul v-if="links.length > 0">
+            <li v-for="link in links" :key="link">
+              <a>{{ link }}</a>
+            </li>
+          </ul>
+          <a-empty v-else />
+        </div>
       </a-layout-content>
     </a-tab-pane>
 
@@ -240,23 +256,39 @@
 </template>
 
 <style scoped lang="scss">
+  .dot-rest {
+    @include flex(center, center);
+  }
   .summary-layout {
     display: flex;
-    margin: 3px;
 
     .left-section {
-      width: 74%;
+      width: 82%;
       .a-card {
         background-color: rgb(128, 171, 209);
       }
-    }
-
-    .middle-section {
-      width: 2%;
+      border-right: 2px solid #eee;
     }
 
     .right-section {
-      width: 24%;
+      width: 18%;
+      min-width: 13rem;
+      height: 100%;
+      padding: 0 1rem;
+      box-sizing: border-box;
+      min-height: 33.75rem;
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li {
+          a {
+            display: flex;
+            padding: 0.25rem;
+          }
+        }
+      }
     }
 
     .summary-ctx {
@@ -265,26 +297,27 @@
       box-sizing: border-box;
 
       .card {
-        margin: 12px;
-        padding: 12px;
-        border-radius: 8px;
+        margin: 0.75rem;
+        padding: 0.75rem;
+        border-radius: 0.5rem;
         position: relative;
-        flex: 0 1 calc((100% / 3) - 24px);
-        min-width: calc((100% / 3) - 24px);
-        border: 1px solid rgb(211 211 211 / 23%);
+        flex: 0 1 calc((100% / 3) - 1.5rem);
+        min-width: calc((100% / 3) - 1.5rem);
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
         &:hover {
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-          transform: scale(1.1);
-          transition: all 0.4s;
+          box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
+          transform: scale(1.002);
+          transition: all 0.3s;
         }
         .service-name {
           font-size: 1.06rem;
           font-weight: 600;
-          margin-bottom: 6px;
+          margin-bottom: 0.375rem;
+          @include flex(space-between, center);
         }
         .comp-info {
           @include flex(center);
-          margin-bottom: 20px;
+          margin-bottom: 1.25rem;
           .host-name {
             width: 80%;
             font-size: 0.8rem;
@@ -298,6 +331,9 @@
           .comp-state {
             font-size: 1rem;
             align-items: flex-end;
+            &-text {
+              color: #888;
+            }
           }
         }
       }
-- 
Gitee