From 1f16428f1bf81fee97403da6cd7210c07c1c2c61 Mon Sep 17 00:00:00 2001 From: ayang <75017711+ayangweb@users.noreply.github.com> Date: Tue, 10 Dec 2024 15:17:02 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20CSS=20?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=92=8C=20UnoCSS=20=E9=85=8D=E7=BD=AE=20(#8?= =?UTF-8?q?97)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/global.scss | 12 +----------- src/components/ProList/index.module.scss | 2 +- src/components/ProShortcut/index.tsx | 2 +- src/layouts/Preference/index.module.scss | 2 +- src/layouts/Preference/index.tsx | 6 ++++-- src/pages/Backup/components/Manual/index.tsx | 2 +- .../Clipboard/Panel/components/Dock/index.tsx | 2 +- .../Clipboard/Panel/components/Float/index.tsx | 4 ++-- .../components/Item/components/Header/index.tsx | 2 +- src/utils/monitor.ts | 3 +++ uno.config.ts | 17 +++++++++++++---- 11 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss index bacc939e4a..c73a82aff3 100644 --- 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 index 8472cb50a5..66a529f319 100644 --- 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 index b91c7f7645..4883fac2b4 100644 --- a/src/components/ProShortcut/index.tsx +++ b/src/components/ProShortcut/index.tsx @@ -172,7 +172,7 @@ const ProShortcut: FC = (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 index 67d7b32034..f69fc18dd7 100644 --- 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 index 3127d10118..18762ebda0 100644 --- 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 index a6d8cf9ccd..09317c6f79 100644 --- 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} > diff --git a/src/pages/Clipboard/Panel/components/Dock/index.tsx b/src/pages/Clipboard/Panel/components/Dock/index.tsx index 596c8d7c11..71c9ec3a2a 100644 --- 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
Dock
; + return
Dock
; }; export default Dock; diff --git a/src/pages/Clipboard/Panel/components/Float/index.tsx b/src/pages/Clipboard/Panel/components/Float/index.tsx index 7ff34b8908..8504c4b272 100644 --- 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 (
{ > - + = (props) => { }; return ( - + {renderType()} diff --git a/src/utils/monitor.ts b/src/utils/monitor.ts index 458cf7b856..1ae7a1d13a 100644 --- 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 index 3da085d23d..e902e81a14 100644 --- 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", }, },