style: server info using arco tag

ikxin · Aug 27, 2024 · 813fc16 · 813fc16
1 parent 7264ac7
commit 813fc16
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 5 deletions.
diff --git a/src/components/common-activate.vue b/src/components/common-activate.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useMonitorStore } from '@/store/monitor'
+import { rateColor, delayColor } from '@/utils/formatter'
 
 const props = defineProps<{
   editionData: EditionItem[]
@@ -73,7 +74,12 @@ const { copy, copied } = useClipboard({
             </template>
           </ASelect>
         </AFormItem>
-        <AFormItem v-if="title.toLowerCase() === 'office'" field="arch" :label="t('label.arch')" required>
+        <AFormItem
+          v-if="title.toLowerCase() === 'office'"
+          field="arch"
+          :label="t('label.arch')"
+          required
+        >
           <ARadioGroup v-model="formData.arch" type="button">
             <ARadio value="x64">{{ t('label.x64') }}</ARadio>
             <ARadio value="x86">{{ t('label.x86') }}</ARadio>
@@ -82,7 +88,25 @@ const { copy, copied } = useClipboard({
         <AFormItem :label="t('label.host')" field="host" required>
           <ASelect v-model="formData.host">
             <template v-for="item in monitors" :key="item.id">
-              <AOption :label="item.host" />
+              <AOption :value="item.host" :label="item.host">
+                <div class="flex gap-2 items-center">
+                  <div class="flex-1">{{ item.host }}</div>
+                  <ATag
+                    :color="rateColor(item.rate)"
+                    class="w-18 justify-center"
+                    size="small"
+                  >
+                    {{ `${(item.rate * 100).toFixed(2)} %` }}
+                  </ATag>
+                  <ATag
+                    :color="delayColor(item.delay)"
+                    class="w-20 justify-center"
+                    size="small"
+                  >
+                    {{ `${item.delay.toFixed(2)} ms` }}
+                  </ATag>
+                </div>
+              </AOption>
             </template>
           </ASelect>
         </AFormItem>
@@ -99,7 +123,11 @@ const { copy, copied } = useClipboard({
                 {{ t('label.download') }}
               </AButton>
             </a>
-            <AButton type="secondary" :status="copied ? 'success' : 'normal'" @click="copy()">
+            <AButton
+              type="secondary"
+              :status="copied ? 'success' : 'normal'"
+              @click="copy()"
+            >
               {{ copied ? t('label.copy-success') : t('label.copy') }}
             </AButton>
           </ASpace>

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -13,3 +13,7 @@ body {
 .arco-select-dropdown-list-wrapper {
   max-height: 400px;
 }
+
+.arco-select-option-content {
+  width: 100%;
+}
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
@@ -32,6 +32,7 @@ declare module 'vue' {
     ASpin: typeof import('@arco-design/web-vue')['Spin']
     ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
     ATable: typeof import('@arco-design/web-vue')['Table']
+    ATag: typeof import('@arco-design/web-vue')['Tag']
     ATextarea: typeof import('@arco-design/web-vue')['Textarea']
     CommonActivate: typeof import('./../components/common-activate.vue')['default']
     CustomFooter: typeof import('./../components/custom-footer.vue')['default']

diff --git a/src/utils/formatter.ts b/src/utils/formatter.ts
@@ -0,0 +1,19 @@
+export const rateColor = (value: number) => {
+  if (value >= 1) {
+    return 'green'
+  } else if (value >= 0.9) {
+    return 'orange'
+  } else {
+    return 'red'
+  }
+}
+
+export const delayColor = (value: number) => {
+  if (value <= 500) {
+    return 'green'
+  } else if (value <= 1000) {
+    return 'orange'
+  } else {
+    return 'red'
+  }
+}
diff --git a/src/views/monitor.vue b/src/views/monitor.vue
@@ -2,6 +2,8 @@
 import { useMonitorStore } from '@/store/monitor'
 import { TableColumnData } from '@arco-design/web-vue'
 import dayjs from 'dayjs'
+import { Tag } from '@arco-design/web-vue'
+import { delayColor, rateColor } from '@/utils/formatter'
 
 const { t } = useI18n()
 
@@ -11,6 +13,9 @@ const columns = computed<TableColumnData[]>(() => {
       dataIndex: 'host',
       title: t('label.host'),
       minWidth: 160,
+      render({ record }) {
+        return h('span', { class: 'select-auto', innerHTML: record.host })
+      },
     },
     {
       dataIndex: 'port',
@@ -26,7 +31,12 @@ const columns = computed<TableColumnData[]>(() => {
         sortDirections: ['ascend', 'descend'],
       },
       render({ record }) {
-        return `${(record.rate * 100).toFixed(2)} %`
+        return h(Tag, {
+          color: rateColor(record.rate),
+          class: 'w-18 justify-center',
+          size: 'small',
+          innerHTML: `${(record.rate * 100).toFixed(2)} %`,
+        })
       },
     },
     {
@@ -38,7 +48,12 @@ const columns = computed<TableColumnData[]>(() => {
         sortDirections: ['ascend', 'descend'],
       },
       render({ record }) {
-        return `${record.delay.toFixed(2)} ms`
+        return h(Tag, {
+          color: delayColor(record.delay),
+          class: 'w-18 justify-center',
+          size: 'small',
+          innerHTML: `${record.delay.toFixed(2)} ms`,
+        })
       },
     },
     {