feat: 看板排版调整，多语言翻译

src/views/dashboard/overview/index.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import svgBase from '@/assets/svg/base.svg';
+import svgUserIMS from '@/assets/svg/userIMS.svg';
+import svgUserSMF from '@/assets/svg/userSMF.svg';
 import useI18n from '@/hooks/useI18n';
 import Topology from './components/Topology/index.vue';
 import NeResources from './components/NeResources/index.vue';
@@ -112,7 +115,6 @@ onMounted(() => {
       pageSize: 1,
     }),
     listBase5G({
-      //
       neType: 'AMF',
       neId: '001',
       id: '',
@@ -183,33 +185,62 @@ onBeforeUnmount(() => {
       <!--概览-->
       <div class="skim panel">
         <div class="inner">
-          <div class="item">
-            <h4>{{ skimState.udmSubNum }}</h4>
-            <span>
-              <UserOutlined style="color: #006cff" />
-              {{ t('views.dashboard.overview.skim.users') }}
-            </span>
+          <h3>
+            <IdcardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.skim.userTitle') }}
+          </h3>
+          <div class="data">
+            <div class="item">
+              <div>
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
+                {{ skimState.udmSubNum }}
+              </div>
+              <span>
+                {{ t('views.dashboard.overview.skim.users') }}
+              </span>
+            </div>
+            <div class="item" style="margin: 0 12px">
+              <div>
+                <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
+                {{ skimState.imsUeNum }}
+              </div>
+              <span>
+                IMS {{ t('views.dashboard.overview.skim.session') }}
+              </span>
+            </div>
+            <div class="item">
+              <div>
+                <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
+                {{ skimState.smfUeNum }}
+              </div>
+              <span>
+                Data {{ t('views.dashboard.overview.skim.session') }}
+              </span>
+            </div>
           </div>
-          <div class="item">
-            <h4>{{ skimState.nbNum }}</h4>
-            <span>
-              <GlobalOutlined style="color: #edcb35" />
-              {{ t('views.dashboard.overview.skim.base') }}
-            </span>
-          </div>
-          <div class="item">
-            <h4>{{ skimState.imsUeNum }}</h4>
-            <span>
-              <UserSwitchOutlined style="color: #6acca3" />
-              IMS {{ t('views.dashboard.overview.skim.session') }}
-            </span>
-          </div>
-          <div class="item">
-            <h4>{{ skimState.smfUeNum }}</h4>
-            <span>
-              <UserSwitchOutlined style="color: #6acca3" />
-              Data {{ t('views.dashboard.overview.skim.session') }}
-            </span>
+        </div>
+      </div>
+      <div class="skim panel">
+        <div class="inner">
+          <h3>
+            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 
+            {{ t('views.dashboard.overview.skim.baseTitle') }}
+          </h3>
+          <div class="data">
+            <div class="item">
+              <div style="align-items: flex-start">
+                <img
+                  :src="svgBase"
+                  style="width: 18px; margin-right: 8px; height: 2rem"
+                />
+                {{ skimState.nbNum }}
+              </div>
+              <span>
+                {{ t('views.dashboard.overview.skim.base') }}
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -262,48 +293,58 @@ onBeforeUnmount(() => {
       </div>
     </div>
     <div class="column">
-      <!-- UPF总流量 -->
+      <!-- 流量统计 -->
       <div class="upfFlowTotal panel">
         <div class="inner">
-          <!-- 筛选 -->
-          <div class="filter">
-            <span
-              :data-key="v"
-              :class="{ active: upfTFActive === i }"
-              v-for="(v, i) in ['0', '7', '30']"
-              :key="v"
-              @click="
-                () => {
-                  upfTFActive = i;
-                }
-              "
-            >
-              {{
-                v === '0'
-                  ? '24' + t('common.units.hour')
-                  : v + t('common.units.day')
-              }}
+          <h3>
+            <span>
+              <SwapOutlined style="color: #68d8fe" />&nbsp;&nbsp; 
+              {{ t('views.dashboard.overview.upfFlowTotal.title') }}
             </span>
-          </div>
-          <!-- 数据 -->
-          <div class="data">
-            <div class="item">
-              <h4>{{ upfTotalFlow[upfTFActive].up }}</h4>
-              <span>
-                <ArrowUpOutlined style="color: #597ef7" />
-                {{ t('views.dashboard.overview.upfFlowTotal.up') }}
+
+            <!-- 筛选 -->
+            <div class="filter">
+              <span
+                :data-key="v"
+                :class="{ active: upfTFActive === i }"
+                v-for="(v, i) in ['0', '7', '30']"
+                :key="v"
+                @click="
+                  () => {
+                    upfTFActive = i;
+                  }
+                "
+              >
+                {{
+                  v === '0'
+                    ? '24' + t('common.units.hour')
+                    : v + t('common.units.day')
+                }}
               </span>
             </div>
-            <div class="item">
-              <h4>{{ upfTotalFlow[upfTFActive].down }}</h4>
-              <span>
-                <ArrowDownOutlined style="color: #52c41a" />
-                {{ t('views.dashboard.overview.upfFlowTotal.down') }}
-              </span>
+          </h3>
+          <div class="chart">
+            <!-- 数据 -->
+            <div class="data">
+              <div class="item">
+                <span>
+                  <ArrowUpOutlined style="color: #597ef7" />
+                  {{ t('views.dashboard.overview.upfFlowTotal.up') }}
+                </span>
+                <h4>{{ upfTotalFlow[upfTFActive].up }}</h4>
+              </div>
+              <div class="item">
+                <span>
+                  <ArrowDownOutlined style="color: #52c41a" />
+                  {{ t('views.dashboard.overview.upfFlowTotal.down') }}
+                </span>
+                <h4>{{ upfTotalFlow[upfTFActive].down }}</h4>
+              </div>
             </div>
           </div>
         </div>
       </div>
+
       <!-- 资源情况 -->
       <div class="resources panel">
         <div class="inner">
@@ -317,6 +358,7 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </div>
+
       <!-- 告警统计 -->
       <div class="alarmType panel">
         <div class="inner">