Fixed style error.

src/api/admin.js

@@ -11,6 +11,13 @@ adminApi.counts = () => {
   })
 }
 
+adminApi.environments = () => {
+  return service({
+    url: `${baseUrl}/environments`,
+    method: 'get'
+  })
+}
+
 adminApi.install = data => {
   return service({
     url: `${baseUrl}/installations`,

src/views/dashboard/Dashboard.vue

@@ -1,19 +1,22 @@
 <template>
   <page-view>
-    <a-row :gutter="24">
+    <a-row :gutter="12">
       <a-col
         :xl="6"
         :lg="6"
         :md="12"
         :sm="12"
         :xs="12"
-        :style="{ marginBottom: '24px' }"
+        :style="{ marginBottom: '12px' }"
       >
         <analysis-card
           :loading="countsLoading"
           title="文章"
           :number="countsData.postCount"
         >
+          <router-link :to="{ name:'PostList' }" slot="action">
+            <a-icon type="link" />
+          </router-link>
         </analysis-card>
       </a-col>
       <a-col
@@ -22,13 +25,16 @@
         :md="12"
         :sm="12"
         :xs="12"
-        :style="{ marginBottom: '24px' }"
+        :style="{ marginBottom: '12px' }"
       >
         <analysis-card
           :loading="countsLoading"
           title="评论"
           :number="countsData.commentCount"
         >
+          <router-link :to="{ name:'Comments' }" slot="action">
+            <a-icon type="link" />
+          </router-link>
         </analysis-card>
       </a-col>
       <a-col
@@ -37,13 +43,16 @@
         :md="12"
         :sm="12"
         :xs="12"
-        :style="{ marginBottom: '24px' }"
+        :style="{ marginBottom: '12px' }"
       >
         <analysis-card
           :loading="countsLoading"
           title="附件"
           :number="countsData.attachmentCount"
         >
+          <router-link :to="{ name:'Attachments' }" slot="action">
+            <a-icon type="link" />
+          </router-link>
         </analysis-card>
       </a-col>
       <a-col
@@ -52,13 +61,16 @@
         :md="12"
         :sm="12"
         :xs="12"
-        :style="{ marginBottom: '24px' }"
+        :style="{ marginBottom: '12px' }"
       >
         <analysis-card
           :loading="countsLoading"
           title="成立天数"
           :number="countsData.establishDays"
         >
+          <a-tooltip :title="'已成立'+countsData.establishDays+'天了'" slot="action">
+            <a href="javascript:void(0);"><a-icon type="info-circle-o" /></a>
+          </a-tooltip>
         </analysis-card>
       </a-col>
     </a-row>
@@ -69,6 +81,7 @@
         :md="12"
         :sm="24"
         :xs="24"
+        :style="{ marginBottom: '12px' }"
       >
         <a-card
           :loading="postLoading"
@@ -84,6 +97,7 @@
         :md="12"
         :sm="24"
         :xs="24"
+        :style="{ marginBottom: '12px' }"
       >
         <a-card
           :loading="commentLoading"
@@ -99,9 +113,10 @@
         :md="12"
         :sm="24"
         :xs="24"
+        :style="{ marginBottom: '12px' }"
       >
         <a-card
-          :loading="commentLoading"
+          :loading="logLoading"
           :bordered="false"
           title="最新日志"
         >
@@ -218,8 +233,8 @@ export default {
     },
     getCounts() {
       adminApi.counts().then(response => {
-        this.countsLoading = false
         this.countsData = response.data.data
+        this.countsLoading = false
       })
     }
   }

src/views/dashboard/components/AnalysisCard.vue

@@ -1,18 +1,23 @@
 <template>
   <a-card
     :loading="loading"
-    :body-style="{ padding: '8px 24px 8px' }"
+    :body-style="{ padding: '18px 24px 18px' }"
     :bordered="false"
   >
-    <div class="card-main">
+    <div class="analysis-card-container">
+      <div class="meta">
+        <span class="analysis-card-title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </span>
+        <span class="analysis-card-action">
+          <slot name="action"></slot>
+        </span>
+      </div>
       <div class="number">
         <slot name="number">
-          <span>{{ number }}</span>
-        </slot>
-      </div>
-      <div class="title">
-        <slot name="title">
-          <span>{{ title }}</span>
+          <span>{{ typeof number === 'function' && number() || number }}</span>
         </slot>
       </div>
     </div>
@@ -41,13 +46,35 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.card-main {
-  .number {
-    color: #000;
-    margin-bottom: 0;
-    font-size: 38px;
-    line-height: 38px;
-    height: 38px;
+.analysis-card-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  .meta {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 14px;
+    line-height: 22px;
+    .analysis-card-action {
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
   }
 }
+.number {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+  color: #000;
+  margin-top: 4px;
+  margin-bottom: 0;
+  font-size: 32px;
+  line-height: 38px;
+  height: 38px;
+}
 </style>

src/views/system/About.vue

@@ -14,8 +14,13 @@
                   <ul>
                     <li>版本：1.0</li>
                     <li>数据库：h2databse</li>
-                    <li>运行时长：2小时45分钟</li>
+                    <li>启动时间：{{ environments.startTime | moment }}</li>
                   </ul>
+                  <a
+                    href="https://github.com/halo-dev"
+                    target="_blank"
+                  >开源地址
+                    <a-icon type="link" /></a>&nbsp;
                   <a
                     href="https://docs.halo.run"
                     target="_blank"
@@ -75,9 +80,11 @@
 </template>
 
 <script>
+import adminApi from '@/api/admin'
 export default {
   data() {
     return {
+      environments: {},
       developers: [
         {
           name: 'Ryan Wang',
@@ -135,6 +142,16 @@ export default {
         }
       ]
     }
+  },
+  created() {
+    this.getEnvironments()
+  },
+  methods: {
+    getEnvironments() {
+      adminApi.environments().then(response => {
+        this.environments = response.data.data
+      })
+    }
   }
 }
 </script>