排序方法抽象为class；考虑数组为空；添加字体样式；合并样式到单一文件中

src/assets/css/index.css

@@ -19,20 +19,45 @@ a:hover {
   place-items: center;
 }
 
+/* 字体 */
+/* refer: https://www.bilibili.com/video/BV1b54y1Z7pu */
+@font-face {
+  font-family: Emoji;
+  src: local("Apple Color Emojiji"), local("Segoe UI Emoji"),
+    local("Segoe UI Symbol"), local("Noto Color Emoji");
+  unicode-range: U+1F000-1F644, U+203C-3299;
+}
+body {
+  font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica,
+    Arial, sans-serif;
+}
+/* 衬线字体 */
+.font-serif {
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+}
+/* 等宽字体 */
+.font-mono {
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+}
+
 /* 深色模式 */
 :root {
   --color-mode: "light";
   --color-dark: #141414;
   --color-dark-alpha: rgba(0, 0, 0, 0.1);
+  --color-dark-filter: brightness(0.5);
 
   --color-light: #efefef;
   --color-light-alpha: rgba(255, 255, 255, 0.9);
+  --color-light-filter: none;
 
   --background: #efefef;
   --text-color: #141414;
   --button-background: var(--color-dark);
   --button-color: var(--color-light);
   --border-color: var(--color-dark-alpha);
+  --filter: var(--color-light-filter);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -46,6 +71,7 @@ a:hover {
     --button-background: var(--color-light);
     --button-color: var(--color-dark);
     --border-color: var(--color-light-alpha);
+    --filter: var(--color-dark-filter);
   }
 }
 
@@ -55,6 +81,7 @@ a:hover {
   --button-background: var(--color-light-alpha);
   --button-color: var(--color-dark);
   --border-color: var(--color-light-alpha);
+  --filter: var(--color-dark-filter);
 }
 
 body {
@@ -73,6 +100,7 @@ body {
   background-color: var(--background);
   box-shadow: 0 0 5px #888;
   overflow-y: hidden;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -86,6 +114,7 @@ body {
 .header-logo-image {
   height: 48px;
   margin: auto 0;
+  -webkit-user-drag: none;
 }
 
 .header-logo-links a {
@@ -113,7 +142,6 @@ body {
   background-color: #cccccc;
   overflow-y: overlay;
   border-radius: 10px;
-  /* user-select: none; */
 }
 
 /* 滚动条样式 refer: https://www.changchenghao.cn/n/679637.html */
@@ -130,3 +158,30 @@ body {
   border: 2px solid white;
   background-color: rgba(0, 0, 0, 0.5);
 }
+
+/* SVG */
+/* 调整 SVG 中文本定位点到文本中央 */
+svg text {
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+svg {
+  -webkit-user-select: none;
+  user-select: none;
+  filter: var(--filter);
+}
+
+/* 元素鼠标悬浮样式 */
+svg g:hover > rect {
+  fill: #ffafb6;
+}
+
+/* 右下角水印样式 */
+svg #watermark-r-b {
+  opacity: 0.2;
+  transition: 0.2s;
+}
+svg #watermark-r-b:hover {
+  opacity: 0.8;
+}