feat: 添加 dashboard 页面 (#377)

web/src/lib/components/ui/chart/chart-style.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { THEMES, type ChartConfig } from './chart-utils.js';
+
+	let { id, config }: { id: string; config: ChartConfig } = $props();
+
+	const colorConfig = $derived(
+		config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
+	);
+
+	const themeContents = $derived.by(() => {
+		if (!colorConfig || !colorConfig.length) return;
+
+		const themeContents = [];
+		for (let [_theme, prefix] of Object.entries(THEMES)) {
+			let content = `${prefix} [data-chart=${id}] {\n`;
+			const color = colorConfig.map(([key, itemConfig]) => {
+				const theme = _theme as keyof typeof itemConfig.theme;
+				const color = itemConfig.theme?.[theme] || itemConfig.color;
+				return color ? `\t--color-${key}: ${color};` : null;
+			});
+
+			content += color.join('\n') + '\n}';
+
+			themeContents.push(content);
+		}
+
+		return themeContents.join('\n');
+	});
+</script>
+
+{#if themeContents}
+	{#key id}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html `<style>${themeContents}</style>`}
+	{/key}
+{/if}