(improve)将时钟组件的图片从svg替换成png，提升抗锯齿效果。

package.json

@@ -36,10 +36,13 @@
       "command": "node tasks/esbuild-packages.js",
       "files": [
         "tasks/esbuild-packages.js",
-        "src/components/**.ts",
+        "src/components/**/*.ts",
-        "src/lib/**.ts"
+        "src/lib/**/*.ts"
       ],
-      "output": []
+      "output": [],
+      "dependencies": [
+        "build-ts-with-config"
+      ]
     },
     "build-ts-with-config": {
       "command": "yarn tsc --build tsconfig-all.json",
@@ -52,9 +55,13 @@
       "command": "node ./tasks/build-widgets.js",
       "files": [
         "tasks/build-widgets.js",
-        "src/widgets/**.ts"
+        "src/components/**/*.ts",
+        "src/widgets/**/*.ts"
       ],
-      "output": []
+      "output": [],
+      "dependencies": [
+        "build-ts-modules"
+      ]
     }
   },
   "lint-staged": {

src/components/clock/README.md

@@ -26,3 +26,18 @@ star-clock 属性：
 
 时钟整体布局设计为自适应布局，在测试时只需在外层 div 中设置默认 width 和 height，可自适应显示时钟大小。
 `html demo <div style="width: 380px; height: 380px"><star-clock date="09:00:00" type="diale"></star-clock></div> `
+
+## SVG 平滑渲染
+
+### SVG 的渲染模式:
+
+- auto, 默认。浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度，而非平滑度和速度。
+- optimizeSpeed，偏渲染速度。浏览器会关闭反锯齿模式。（速度快，适合界面快速加载，适合低配置）
+- crispEdges，偏渲染锐利。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐，更加清晰锐利的边缘。（增加锐度，适合棱角分明的图标，例如直线，长方形等）
+- geometricPrecision，偏渲染平滑。（增加平滑，适合曲线，圆形图标等）
+
+手动指定时的使用方式，添加`shape-rendering`属性及对应值:
+
+`<svg ... shape-rendering="geometricPrecision" ...>`
+
+在 Firefox 平台上实测，像 clock 中使用的时针、分针、秒针，使用 svg+geometricPrecision 渲染时的效果离 png 仍有距离，锯齿感明显。

src/components/clock/clock-style.ts

@@ -1,16 +1,18 @@
 import {css, CSSResult, unsafeCSS} from 'lit'
-const darkHour = unsafeCSS(new URL('./svg/dark_hour.svg', import.meta.url).href)
+const darkHour = unsafeCSS(
+  new URL('./resources/dark_hour.png', import.meta.url).href
+)
 const darkMinute = unsafeCSS(
-  new URL('./svg/dark_minute.svg', import.meta.url).href
+  new URL('./resources/dark_minute.png', import.meta.url).href
 )
 const lightHour = unsafeCSS(
-  new URL('./svg/light_hour.svg', import.meta.url).href
+  new URL('./resources/light_hour.png', import.meta.url).href
 )
 const lightMinute = unsafeCSS(
-  new URL('./svg/light_minute.svg', import.meta.url).href
+  new URL('./resources/light_minute.png', import.meta.url).href
 )
 const sharedSecond = unsafeCSS(
-  new URL('./svg/second.svg', import.meta.url).href
+  new URL('./resources/second.png', import.meta.url).href
 )
 export const sharedStyles: CSSResult = css`
   @media (prefers-color-scheme: light) {

src/components/clock/resources/dark_hour.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 12 90" fill="#F0F0F0" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision">
+  <path
+    d="M2.61804 3.2814L0.181058 84.0027C0.0819586 87.2852 2.71599 90 6 90C9.28401 90 11.918 87.2852 11.8189 84.0027L9.38196 3.2814C9.32677 1.45333 7.8289 0 6 0C4.1711 0 2.67323 1.45334 2.61804 3.2814Z" />
+</svg>

src/components/clock/resources/dark_minute.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 12 152" fill="#A2A6AD" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M2.9408 2.99941C2.97368 1.33339 4.33366 0 6 0V0C7.66634 0 9.02632 1.3334 9.0592 2.99942L11.8816 146.001C11.9466 149.295 9.29438 152 6 152V152C2.70562 152 0.05339 149.295 0.118398 146.001L2.9408 2.99941Z" />
+</svg>

src/components/clock/resources/light_hour.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 12 90" fill="white" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision">
+  <path
+    d="M2.61804 3.2814L0.181058 84.0027C0.0819586 87.2852 2.71599 90 6 90C9.28401 90 11.918 87.2852 11.8189 84.0027L9.38196 3.2814C9.32677 1.45333 7.8289 0 6 0C4.1711 0 2.67323 1.45334 2.61804 3.2814Z" />
+</svg>

src/components/clock/resources/light_minute.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 12 152" fill="#D5DDF3" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M2.9408 2.99941C2.97368 1.33339 4.33366 0 6 0V0C7.66634 0 9.02632 1.3334 9.0592 2.99942L11.8816 146.001C11.9466 149.295 9.29438 152 6 152V152C2.70562 152 0.05339 149.295 0.118398 146.001L2.9408 2.99941Z" />
+</svg>

src/components/clock/resources/second.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 4 170" fill="#E07548" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M2 170C0.895431 170 -3.91405e-08 169.105 -8.74228e-08 168L-7.34351e-06 2C-7.3918e-06 0.895432 0.895423 -3.91405e-08 1.99999 -8.74228e-08C3.10456 -1.35705e-07 3.99999 0.895431 3.99999 2L4 168C4 169.105 3.10457 170 2 170Z" />
+</svg>

src/components/clock/resources/svg2png.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# inkscape 是一款 SVG 编辑工具
+# 安装方式: apt install inkscape
+inkscape dark_hour.svg -e dark_hour.png
+inkscape dark_minute.svg -e dark_minute.png
+inkscape light_hour.svg -e light_hour.png
+inkscape light_minute.svg -e light_minute.png
+inkscape second.svg -e second.png

src/components/clock/svg/dark_hour.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="90" viewBox="0 0 12 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.61804 3.2814L0.181058 84.0027C0.0819586 87.2852 2.71599 90 6 90C9.28401 90 11.918 87.2852 11.8189 84.0027L9.38196 3.2814C9.32677 1.45333 7.8289 0 6 0C4.1711 0 2.67323 1.45334 2.61804 3.2814Z" fill="#F0F0F0"/>
-</svg>

src/components/clock/svg/dark_minute.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="152" viewBox="0 0 12 152" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9408 2.99941C2.97368 1.33339 4.33366 0 6 0V0C7.66634 0 9.02632 1.3334 9.0592 2.99942L11.8816 146.001C11.9466 149.295 9.29438 152 6 152V152C2.70562 152 0.05339 149.295 0.118398 146.001L2.9408 2.99941Z" fill="#A2A6AD"/>
-</svg>

src/components/clock/svg/light_hour.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="90" viewBox="0 0 12 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.61804 3.2814L0.181058 84.0027C0.0819586 87.2852 2.71599 90 6 90C9.28401 90 11.918 87.2852 11.8189 84.0027L9.38196 3.2814C9.32677 1.45333 7.8289 0 6 0C4.1711 0 2.67323 1.45334 2.61804 3.2814Z" fill="white"/>
-</svg>

src/components/clock/svg/light_minute.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="152" viewBox="0 0 12 152" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9408 2.99941C2.97368 1.33339 4.33366 0 6 0V0C7.66634 0 9.02632 1.3334 9.0592 2.99942L11.8816 146.001C11.9466 149.295 9.29438 152 6 152V152C2.70562 152 0.05339 149.295 0.118398 146.001L2.9408 2.99941Z" fill="#D5DDF3"/>
-</svg>

src/components/clock/svg/second.svg

@@ -1,3 +0,0 @@
-<svg width="4" height="170" viewBox="0 0 4 170" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 170C0.895431 170 -3.91405e-08 169.105 -8.74228e-08 168L-7.34351e-06 2C-7.3918e-06 0.895432 0.895423 -3.91405e-08 1.99999 -8.74228e-08C3.10456 -1.35705e-07 3.99999 0.895431 3.99999 2L4 168C4 169.105 3.10457 170 2 170Z" fill="#E07548"/>
-</svg>