refactor: 重构 CSS 变量和 UnoCSS 配置 (#897)

EcoPasteHub · Dec 10, 2024 · 1f16428 · 1f16428
1 parent 6fe23c1
commit 1f16428
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 25 deletions.
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
@@ -1,15 +1,5 @@
 html {
-  --color-bg-1: var(--ant-color-bg-container);
-  --color-bg-2: var(--ant-color-bg-layout);
-  --color-bg-3: var(--ant-color-fill-quaternary);
-  --color-bg-4: var(--ant-color-fill-content);
-  --color-text-1: var(--ant-color-text);
-  --color-text-2: var(--ant-color-text-secondary);
-  --color-text-3: var(--ant-color-text-tertiary);
-  --color-border-1: var(--ant-color-border);
-  --color-border-2: var(--ant-color-border-secondary);
-
-  --uno: color-1 text-14 antialiased select-none overscroll-none;
+  --uno: text-color-1 text-14 antialiased select-none overscroll-none;
 
   color-scheme: light;
 

diff --git a/src/components/ProList/index.module.scss b/src/components/ProList/index.module.scss
@@ -7,7 +7,7 @@
 
   :global {
     .ant-list {
-      --uno: "bg-1 b-color-2";
+      --uno: "bg-color-1 b-color-2";
 
       .ant-list-item {
         --uno: "px-16!";

diff --git a/src/components/ProShortcut/index.tsx b/src/components/ProShortcut/index.tsx
@@ -172,7 +172,7 @@ const ProShortcut: FC<ProShortcutProps> = (props) => {
 				tabIndex={0}
 				align="center"
 				gap="small"
-				className="antd-input group b-color-1 color-3 h-32 rounded-6 px-10"
+				className="antd-input group b-color-1 h-32 rounded-6 px-10 text-color-3"
 				onKeyDown={handleKeyDown}
 				onKeyUp={handleKeyUp}
 			>

diff --git a/src/layouts/Preference/index.module.scss b/src/layouts/Preference/index.module.scss
@@ -3,7 +3,7 @@
 
   :global {
     .ant-tabs-content-holder {
-      --uno: "b-0 h-full flex-1 overflow-auto bg-2 p-16";
+      --uno: "b-0 h-full flex-1 overflow-auto bg-color-2 p-16";
 
       .ant-tabs-tabpane {
         --uno: "p-0!";

diff --git a/src/layouts/Preference/index.tsx b/src/layouts/Preference/index.tsx
@@ -86,7 +86,9 @@ const PreferenceLayout = () => {
 				data-tauri-drag-region
 				vertical
 				gap="small"
-				className={clsx("h-full w-200 p-12", [isMac() ? "pt-32" : "bg-1"])}
+				className={clsx("h-full w-200 p-12", [
+					isMac() ? "pt-32" : "bg-color-1",
+				])}
 				onClick={(event) => event.stopPropagation()}
 			>
 				{tabItems.map((item) => {
@@ -98,7 +100,7 @@ const PreferenceLayout = () => {
 							align="center"
 							gap="small"
 							className={clsx(
-								"color-2 cursor-pointer rounded-8 p-12 p-r-0 transition hover:bg-4",
+								"cursor-pointer rounded-8 p-12 p-r-0 text-color-2 transition hover:bg-color-4",
 								{
 									"bg-primary! text-white!": activeKey === key,
 								},

diff --git a/src/pages/Backup/components/Manual/index.tsx b/src/pages/Backup/components/Manual/index.tsx
@@ -139,7 +139,7 @@ const Manual: FC<{ state: State }> = (props) => {
 								align="center"
 								justify="center"
 								gap="small"
-								className="b b-color-2 hover:b-primary h-102 flex-1 cursor-pointer rounded-8 bg-3 px-8 text-center transition hover:text-primary"
+								className="b b-color-2 hover:b-primary h-102 flex-1 cursor-pointer rounded-8 bg-color-3 px-8 text-center transition hover:text-primary"
 								onClick={event}
 							>
 								<Icon name={icon} size={26} />

diff --git a/src/pages/Clipboard/Panel/components/Dock/index.tsx b/src/pages/Clipboard/Panel/components/Dock/index.tsx
@@ -1,5 +1,5 @@
 const Dock = () => {
-	return <div className="h-screen rounded-t-16 bg-1">Dock</div>;
+	return <div className="h-screen rounded-t-16 bg-color-1">Dock</div>;
 };
 
 export default Dock;
diff --git a/src/pages/Clipboard/Panel/components/Float/index.tsx b/src/pages/Clipboard/Panel/components/Float/index.tsx
@@ -12,7 +12,7 @@ const Float = () => {
 
 	return (
 		<div
-			className={clsx("h-screen bg-1", {
+			className={clsx("h-screen bg-color-1", {
 				"rounded-10": !isWin(),
 				"b b-color-1": isLinux(),
 			})}
@@ -42,7 +42,7 @@ const Float = () => {
 					>
 						<Group />
 
-						<Flex align="center" gap={4} className="color-2 text-18">
+						<Flex align="center" gap={4} className="text-18 text-color-2">
 							<Pin />
 
 							<Icon

diff --git a/src/pages/Clipboard/Panel/components/List/components/Item/components/Header/index.tsx b/src/pages/Clipboard/Panel/components/List/components/Item/components/Header/index.tsx
@@ -105,7 +105,7 @@ const Header: FC<HeaderProps> = (props) => {
 	};
 
 	return (
-		<Flex justify="space-between" gap="small" className="color-2">
+		<Flex justify="space-between" gap="small" className="text-color-2">
 			<Scrollbar thumbSize={0}>
 				<Flex gap="small" className="flex-1 whitespace-nowrap text-12">
 					<span>{renderType()}</span>

diff --git a/src/utils/monitor.ts b/src/utils/monitor.ts
@@ -4,6 +4,9 @@ import {
 	primaryMonitor,
 } from "@tauri-apps/api/window";
 
+/**
+ * 获取当前鼠标所在的显示器
+ */
 export const getCursorMonitor = async () => {
 	const primary = await primaryMonitor();
 

diff --git a/uno.config.ts b/uno.config.ts
@@ -23,9 +23,9 @@ export default defineConfig({
 	],
 	rules: [["outline-none", { outline: "none" }]],
 	shortcuts: [
-		[/^bg-(\d+)$/, ([, d]) => `bg-[var(--color-bg-${d})]`],
-		[/^color-(\d+)$/, ([, d]) => `text-[var(--color-text-${d})]`],
-		[/^b-color-(\d+)$/, ([, d]) => `b-[var(--color-border-${d})]`],
+		[/^bg-color-(\d+)$/, ([, d]) => `bg-bg-${d}`],
+		[/^text-color-(\d+)$/, ([, d]) => `text-text-${d}`],
+		[/^b-color-(\d+)$/, ([, d]) => `b-border-${d}`],
 		[/^(.*)-primary-(\d+)$/, ([, s, d]) => `${s}-[var(--ant-blue-${d})]`],
 		{
 			"antd-input":
@@ -36,12 +36,21 @@ export default defineConfig({
 	],
 	theme: {
 		colors: {
+			"bg-1": "var(--ant-color-bg-container)",
+			"bg-2": "var(--ant-color-bg-layout)",
+			"bg-3": "var(--ant-color-fill-quaternary)",
+			"bg-4": "var(--ant-color-fill-content)",
+			"text-1": "var(--ant-color-text)",
+			"text-2": "var(--ant-color-text-secondary)",
+			"text-3": "var(--ant-color-text-tertiary)",
+			"border-1": "var(--ant-color-border)",
+			"border-2": "var(--ant-color-border-secondary)",
 			primary: "var(--ant-blue)",
 			success: "var(--ant-green)",
 			danger: "var(--ant-red)",
 			gold: "var(--ant-gold)",
-			wechat: "#00c25f",
 			qq: "#0099ff",
+			wechat: "#00c25f",
 			alipay: "#0c79fe",
 		},
 	},