refactor: reduce stats components css with UnoCSS

Former-commit-id: 40f87c34730925074ccedb2da8c55dc723029712

3 files changed, 44 insertions, 197 deletions

diff --git a/layouts/_partials/stats/external-link-rank.html b/layouts/_partials/stats/external-link-rank.html
index 8ffe04d6..0bf32c5a 100644
--- a/layouts/_partials/stats/external-link-rank.html
+++ b/layouts/_partials/stats/external-link-rank.html
@@ -6,68 +6,24 @@
     {{ end }}
 {{ end }}
 
-<ol id="external-link-rank">
+<ol id="external-link-rank"
+    class="p-0 m-0 max-h-[700px] overflow-y-auto box-border">
 {{ range .Site.Data.externallinks }}
     {{ $label := index . 0 }}
     {{ $count := index . 1 }}
     {{ if gt $count 2 }}
         {{ $percent := div (mul $count 100) $max }}
-        <li class="rank-item">
-            <div class="rank-item-text">
-                <a class="rank-item-link" href="https://{{ $label }}/" target="_blank">
-                    <img src="https://favicone.com/{{ $label }}?s=50" />
+        <li class="list-none w-full my-2 box-border py-[0.1rem] px-2 relative">
+            <div class="mb-1 flex justify-between items-center">
+                <a class="inline-flex items-center gap-2" href="https://{{ $label }}/" target="_blank">
+                    <img src="https://favicone.com/{{ $label }}?s=50"
+                        class="w-4 h-4"/>
                     {{ $label }}
                 </a>
-                <span class="rank-item-count font-mono">{{ $count }}</span>
+                <span class="font-secondary font-mono">{{ $count }}</span>
             </div>
-            <div class="rank-item-bar" style="width:{{ $percent }}%"></div>
+            <div class="bg-gray-200 absolute top-0 left-0 right-0 bottom-0 -z-1" style="width:{{ $percent }}%"></div>
         </li>
     {{ end }}
 {{ end }}
 </ol>
-
-<style>
-#external-link-rank {
-    padding: 0;
-    margin: 0;
-    max-height: 700px;
-    overflow-y: auto;
-    box-sizing: border-box;
-}
-
-.rank-item {
-    list-style: none;
-    width: 100%;
-    margin: 0.5rem 0;
-    box-sizing: border-box;
-    padding: 0.1rem 0.5rem;
-    position: relative;
-}
-.rank-item-text {
-    margin-bottom: 0.2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.rank-item-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-.rank-item-link img {
-    width: 1rem;
-    height: 1rem;
-}
-.rank-item-count {
-    color: var(--secondary-text-color);
-}
-.rank-item-bar {
-    background-color: rgba(103,173,91,0.35);
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-}
-</style>
diff --git a/layouts/_partials/stats/publish-time-chart.html b/layouts/_partials/stats/publish-time-chart.html
index dac9e542..795ecf25 100644
--- a/layouts/_partials/stats/publish-time-chart.html
+++ b/layouts/_partials/stats/publish-time-chart.html
@@ -1,117 +1,9 @@
-<style>
-.time-chart-container {
-  width: 100%;
-  max-width: 700px;
-  margin: 1rem 0;
-}
-
-.time-chart-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.time-icon {
-  font-size: 1.5rem;
-  flex-shrink: 0;
-}
-
-.time-chart-bar {
-  display: flex;
-  gap: 0.5rem;
-  width: 100%;
-  height: 1.5rem;
-}
-
-.time-segment {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  border-radius: 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  position: relative;
-}
-
-.time-segment:first-child {
-  border-top-left-radius: 1rem;
-  border-bottom-left-radius: 1rem;
-}
-
-.time-segment:last-child {
-  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
-}
-
-.time-segment.dawn {
-  background: linear-gradient(135deg, #3c3c3c 0%, #1a1a1a 100%);
-}
-
-.time-segment.early-morning {
-  background: linear-gradient(135deg, #5a5a5a 0%, #3c3c3c 100%);
-}
-
-.time-segment.morning {
-  background: linear-gradient(135deg, #787878 0%, #5a5a5a 100%);
-}
-
-.time-segment.noon {
-  background: linear-gradient(135deg, #d4d4d4 0%, #b8b8b8 100%);
-}
-
-.time-segment.afternoon {
-  background: linear-gradient(135deg, #b8b8b8 0%, #969696 100%);
-}
-
-.time-segment.evening {
-  background: linear-gradient(135deg, #969696 0%, #787878 100%);
-}
-
-.time-segment.night {
-  background: linear-gradient(135deg, #5a5a5a 0%, #3c3c3c 100%);
-}
-
-.time-segment.late-night {
-  background: linear-gradient(135deg, #3c3c3c 0%, #1a1a1a 100%);
-}
-
-.time-counts {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0 2.5rem;
-}
-
-.count-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-size: 0.75rem;
-  color: var(--secondary-text-color);
-  font-family: monospace;
-}
-
-.count-number {
-  font-weight: 600;
-  color: var(--primary-text-color);
-}
-
-.count-label {
-  margin-top: 0.25rem;
-  opacity: 0.7;
-}
-</style>
-
 {{/* 定义时间段 */}}
 {{ $fuzzyTimes := slice
     (dict "limit" 5  "label" "凌晨" "class" "dawn")
-    (dict "limit" 7  "label" "清晨" "class" "early-morning")
     (dict "limit" 11 "label" "早上" "class" "morning")
     (dict "limit" 13 "label" "中午" "class" "noon")
     (dict "limit" 17 "label" "下午" "class" "afternoon")
-    (dict "limit" 19 "label" "傍晚" "class" "evening")
     (dict "limit" 22 "label" "晚上" "class" "night")
     (dict "limit" 24 "label" "深夜" "class" "late-night")
 }}
@@ -146,16 +38,19 @@
     {{ end }}
 {{ end }}
 
-<div class="time-chart-container">
-    <div class="time-chart-wrapper">
-        <div class="time-icon">☀️</div>
-        <div class="time-chart-bar invert-if-dark">
+<div class="w-full max-w-[700px] my-4">
+    <div class="flex items-center gap-4 mb-4">
+        <div class="text-size-2xl flex-shrink-0">☀️</div>
+        <div class="flex gap-2 w-full h-6 invert-if-dark">
             {{ range $fuzzyTimes }}
                 {{ $count := index $timeCounts .label }}
                 {{ if gt $total 0 }}
                     {{ $percentage := div (mul $count 100.0) $total }}
                     {{ if gt $count 0 }}
-                        <div class="time-segment {{ .class }}"
+                        <div class="flex items-center justify-center
+                           text-white rounded-2xl text-size-sm font-500 relative
+                           bg-black opacity-{{ add (mul (int (div $percentage 10)) 10) 30 }}
+                           {{ .class }}"
                              style="width: {{ printf "%.1f" $percentage }}%;"
                              title="{{ .label }}: {{ $count }}篇 ({{ printf "%.1f" $percentage }}%)">
                             {{ if gt $percentage 8 }}{{ .label }}{{ end }}
@@ -164,16 +59,18 @@
                 {{ end }}
             {{ end }}
         </div>
-        <div class="time-icon">🌙</div>
+        <div class="text-size-2xl flex-shrink-0">🌙</div>
     </div>
 
-    <div class="time-counts">
+    <div class="flex gap-2 mt-2 px-10">
         {{ range $fuzzyTimes }}
             {{ $count := index $timeCounts .label }}
             {{ if gt $count 0 }}
                 {{ $percentage := div (mul $count 100.0) $total }}
-                <div class="count-item" style="width: {{ printf "%.1f" $percentage }}%;">
-                    <span class="count-number">{{ $count }}</span>
+                <div class="flex flex-col items-center text-size-xs
+                    font-secondary font-mono"
+                    style="width: {{ printf "%.1f" $percentage }}%;">
+                    <span class="font-600 text-[var(--primary-text-color)]">{{ $count }}</span>
                 </div>
             {{ end }}
         {{ end }}
diff --git a/layouts/_partials/stats/stats-table.html b/layouts/_partials/stats/stats-table.html
index 24e2b45d..ed529533 100644
--- a/layouts/_partials/stats/stats-table.html
+++ b/layouts/_partials/stats/stats-table.html
@@ -1,4 +1,24 @@
-<table class="site-stats-table">
+<style>
+.site-stats-table td {
+  padding: 0.5rem;
+  text-align: left;
+}
+.site-stats-table td:nth-child(2n) {
+  text-align: right;
+}
+.number-pill {
+    text-align: center;
+    display: inline-block;
+    line-height: 1.75rem;
+    box-sizing: border-box;
+    border-radius: 5px;
+    padding: 0 0.5rem;
+    background-color: var(--block-background-color);
+    font-size: 1rem;
+}
+</style>
+
+<table class="site-stats-table w-full max-w-[700px] border-collapse mb-6">
   <tbody>
     <tr>
         <td>页面总数</td>
@@ -34,29 +54,3 @@
     </tr>
   </tbody>
 </table>
-
-<style>
-.site-stats-table {
-  width: 100%;
-  max-width: 700px;
-  border-collapse: collapse;
-  margin-bottom: 1.5rem;
-}
-.site-stats-table td {
-  padding: 0.5rem;
-  text-align: left;
-}
-.site-stats-table td:nth-child(2n) {
-  text-align: right;
-}
-.number-pill {
-    text-align: center;
-    display: inline-block;
-    line-height: 1.75rem;
-    box-sizing: border-box;
-    border-radius: 5px;
-    padding: 0 0.5rem;
-    background-color: var(--block-background-color);
-    font-size: 1rem;
-}
-</style>