style: 优化部分样式

src/apis/system/file.ts

@@ -18,7 +18,7 @@ export function deleteFile(ids: string | Array<string>) {
   return http.del(`${BASE_URL}/${ids}`)
 }
 
-/** @desc 查询文件资源统计 */
+/** @desc 查询文件资源统计统计 */
-export function statisticsFile() {
+export function getFileStatistics() {
-  return http.get(`${BASE_URL}/statistics`)
+  return http.get<System.FileStatisticsResp>(`${BASE_URL}/statistics`)
 }

src/utils/index.ts

@@ -243,6 +243,8 @@ export const formatFileSize = (fileSize: number) => {
   const size = srcSize / 1024 ** index
   return `${size.toFixed(2)} ${unitArr[index]}`
 }
+
+/** @desc 复制文本 */
 export const copyText = (text: any) => {
   const textarea = document.createElement('textarea')
   textarea.value = text

src/views/login/index.vue

@@ -130,6 +130,7 @@ const onOauth = async (source: string) => {
     justify-content: start;
     align-items: center;
     background-color: var(--color-bg-5);
+    color: #121314;
     &-logo {
       width: 100%;
       height: 104px;
@@ -158,7 +159,6 @@ const onOauth = async (source: string) => {
   .login-right {
     width: 100%;
     height: 100%;
-    background: var(--color-bg-1);
     display: flex;
     flex-direction: column;
     padding: 30px 30px 0;

src/views/system/file/main/FileAside.vue

@@ -57,12 +57,4 @@ const onClickItem = (item: FileTypeListItem) => {
     padding-right: 0;
   }
 }
-
-:deep(.arco-progress) {
-  .arco-progress-line,
-  .arco-progress-line-bar-buffer,
-  .arco-progress-line-bar {
-    border-radius: 0;
-  }
-}
 </style>

src/views/system/file/main/FileAsideStatistics.vue

@@ -4,35 +4,56 @@
       <template #split>
         <a-divider direction="vertical" />
       </template>
-      <a-statistic class="statistic-item" title="容量" :value="totalData.size" :value-style="statisticValueStyle">
+      <a-statistic class="statistic-item" title="存储量" :value="totalData.size" :value-style="statisticValueStyle">
-        <template #suffix>{{ totalData.unit }}</template>
+        <template #suffix>&nbsp;{{ totalData.unit }}</template>
       </a-statistic>
       <a-statistic class="statistic-item" title="数量" :value="totalData.number" :value-style="statisticValueStyle" />
     </a-space>
     <a-divider />
-    <VCharts :option="option" autoresize :style="{ height: '320px' }" />
+    <VCharts :option="option" autoresize :style="{ height: '120px', width: '150px' }" />
   </section>
 </template>
 
 <script setup lang="ts">
+import { getFileStatistics, type FileStatisticsResp } from '@/apis'
+import { useChart } from '@/hooks'
+import { FileTypeList } from '@/constant/file'
 import VCharts from 'vue-echarts'
 import { use } from 'echarts/core'
 import { PieChart } from 'echarts/charts'
 import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
-use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
-import { statisticsFile, type FileStatisticsResp } from '@/apis'
-import { FileTypeList } from '@/constant/file'
-import { useChart } from '@/hooks'
 import { formatFileSize } from '@/utils'
 
+use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
+
 const totalData = ref<FileStatisticsResp>({})
 const chartData = ref<Array<FileStatisticsResp>>([])
 const statisticValueStyle = { color: '#5856D6', 'font-size': '18px' }
 const { option } = useChart(() => {
   return {
-    grid: {},
+    grid: {
-    legend: {},
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    legend: {
+      show: true,
+      bottom: -5,
+      icon: 'circle',
+      itemWidth: 6,
+      itemHeight: 6,
+      textStyle: {
+        color: '#4E5969'
+      }
+    },
+    tooltip: {
+      show: true,
+      formatter: function (params) {
+        return `总计：${params.value}<br>${params.data.size}`
+      }
+    },
     series: [
       {
         type: 'pie',
@@ -42,19 +63,6 @@ const { option } = useChart(() => {
           show: false,
           position: 'center'
         },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 12,
-            fontWeight: 'bold',
-            formatter: function (params) {
-              return params.name + '\n' + params.value + '\n' + params.data.size
-            }
-          }
-        },
-        labelLine: {
-          show: false
-        },
         data: chartData.value
       }
     ]
@@ -67,17 +75,15 @@ const getStatisticsData = async () => {
     loading.value = true
     chartData.value = []
     totalData.value = {}
-    const { data: resData } = await statisticsFile()
+    const { data: resData } = await getFileStatistics()
     const formatSize = formatFileSize(resData.size).split(' ')
     totalData.value = {
       size: parseFloat(formatSize[0]),
       number: resData.number,
       unit: formatSize[1]
     }
-    console.log(totalData.value)
     resData.data.forEach((fs: FileStatisticsResp) => {
       const matchedItem = FileTypeList.find((item) => item.value == fs.type)
-      console.log(matchedItem)
       chartData.value.unshift({
         name: matchedItem ? matchedItem.name : '',
         value: fs.number,
@@ -107,8 +113,12 @@ onMounted(() => {
 
 .percent {
   margin-top: 10px;
-  padding: 14px 12px;
+  padding: 20px;
   box-sizing: border-box;
   background-color: var(--color-bg-1);
 }
+
+:deep(.arco-divider-horizontal) {
+  margin: 20px 0 0 0;
+}
 </style>