From e3278855457a703f2fd7fd558d9b3861ad8f4189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= Date: Mon, 14 Jul 2025 22:39:01 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E9=85=8D=E8=89=B2=E6=96=B9=E6=A1=88):=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0Q2=E9=85=8D=E8=89=B2=E6=96=B9=E6=A1=88?= =?UTF-8?q?=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增Q2配色方案相关组件、模型和样式定义 在SchemeSign组件中添加q2样式支持 扩展模型以包含Q2方案类型和存储结构 --- src/components/SchemeSign.module.css | 3 ++ src/components/SchemeSign.tsx | 2 + src/models.ts | 4 ++ src/page-components/scheme/Q2Scheme.tsx | 35 +++++++++++++ src/pages/SchemeDetail.tsx | 4 ++ src/q-2-scheme.ts | 66 +++++++++++++++++++++++++ src/variables.css | 1 + 7 files changed, 115 insertions(+) create mode 100644 src/page-components/scheme/Q2Scheme.tsx create mode 100644 src/q-2-scheme.ts diff --git a/src/components/SchemeSign.module.css b/src/components/SchemeSign.module.css index a6a6a99..e065c5b 100644 --- a/src/components/SchemeSign.module.css +++ b/src/components/SchemeSign.module.css @@ -9,6 +9,9 @@ &.swatch { background-color: var(--color-pinlan); } + &.q2 { + background-color: var(--color-jugengzi); + } &.m2 { background-color: #03dac6; color: var(--color-qihei); diff --git a/src/components/SchemeSign.tsx b/src/components/SchemeSign.tsx index f2d893d..6daea92 100644 --- a/src/components/SchemeSign.tsx +++ b/src/components/SchemeSign.tsx @@ -16,6 +16,8 @@ export function SchemeSign({ scheme, short = false }: SchemeSignProps) { switch (scheme) { case 'q_scheme': return styles.q; + case 'q_2_scheme': + return styles.q2; case 'swatch_scheme': return styles.swatch; case 'material_2': diff --git a/src/models.ts b/src/models.ts index d4dbf75..1509f19 100644 --- a/src/models.ts +++ b/src/models.ts @@ -4,6 +4,7 @@ import { MaterialDesign3DynamicSchemeStorage, MaterialDesign3SchemeStorage, } from './material-3-scheme'; +import { Q2SchemeStorage } from './q-2-scheme'; import { QSchemeStorage } from './q-scheme'; import { SwatchSchemeStorage } from './swatch_scheme'; @@ -34,6 +35,7 @@ export type ColorDescription = { export type SchemeType = | 'q_scheme' + | 'q_2_scheme' | 'swatch_scheme' | 'material_2' | 'material_3' @@ -45,6 +47,7 @@ export type SchemeTypeOption = { }; export const SchemeTypeOptions: SchemeTypeOption[] = [ { label: 'Q Scheme', short: 'Q', value: 'q_scheme' }, + { label: 'Q Scheme 2', short: 'Q2', value: 'q_2_scheme' }, { label: 'Swatch Scheme', short: 'Swatch', value: 'swatch_scheme' }, { label: 'Material Design 2 Scheme', short: 'M2', value: 'material_2' }, { label: 'Material Design 3 Scheme', short: 'M3', value: 'material_3' }, @@ -79,6 +82,7 @@ export type ColorShifting = { export type SchemeStorage = | QSchemeStorage + | Q2SchemeStorage | SwatchSchemeStorage | MaterialDesign2SchemeStorage | MaterialDesign3SchemeStorage diff --git a/src/page-components/scheme/Q2Scheme.tsx b/src/page-components/scheme/Q2Scheme.tsx new file mode 100644 index 0000000..907d042 --- /dev/null +++ b/src/page-components/scheme/Q2Scheme.tsx @@ -0,0 +1,35 @@ +import { useState } from 'react'; +import { Tab } from '../../components/Tab'; +import { SchemeContent } from '../../models'; +import { Q2SchemeStorage } from '../../q-2-scheme'; +import { isNilOrEmpty } from '../../utls'; + +const tabOptions = [ + { title: 'Overview', id: 'overview' }, + { title: 'Builder', id: 'builder' }, + { title: 'Exports', id: 'export' }, +]; + +type Q2SchemeProps = { + scheme: SchemeContent; +}; + +export function Q2Scheme({ scheme }: Q2SchemeProps) { + const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() => + isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview', + ); + + return ( + <> + setActiveTab(v as string)} + disabled={{ + overview: isNilOrEmpty(scheme.schemeStorage?.scheme), + export: isNilOrEmpty(scheme.schemeStorage?.cssVariables), + }} + /> + + ); +} diff --git a/src/pages/SchemeDetail.tsx b/src/pages/SchemeDetail.tsx index acc827b..68ec737 100644 --- a/src/pages/SchemeDetail.tsx +++ b/src/pages/SchemeDetail.tsx @@ -15,8 +15,10 @@ import { CorruptedScheme } from '../page-components/scheme/CorruptedScheme'; import { M2Scheme } from '../page-components/scheme/M2Scheme'; import { M3DynamicScheme } from '../page-components/scheme/M3DynamicScheme'; import { M3Scheme } from '../page-components/scheme/M3Scheme'; +import { Q2Scheme } from '../page-components/scheme/Q2Scheme'; import { QScheme } from '../page-components/scheme/QScheme'; import { SwatchScheme } from '../page-components/scheme/SwatchScheme'; +import { Q2SchemeSource } from '../q-2-scheme'; import { QSchemeStorage } from '../q-scheme'; import { useScheme, useUpdateScheme } from '../stores/schemes'; import { SwatchSchemeStorage } from '../swatch_scheme'; @@ -50,6 +52,8 @@ export function SchemeDetail() { switch (scheme?.type) { case 'q_scheme': return } />; + case 'q_2_scheme': + return } />; case 'swatch_scheme': return } />; case 'material_2': diff --git a/src/q-2-scheme.ts b/src/q-2-scheme.ts new file mode 100644 index 0000000..98f2379 --- /dev/null +++ b/src/q-2-scheme.ts @@ -0,0 +1,66 @@ +import { QSchemeSetting } from './q-scheme'; + +export type Q2ColorSet = { + root: string; + hover: string; + active: string; + focus: string; + disabled: string; + onRoot: string; + onDisabled: string; +}; + +export type Q2ColorUnit = { + root: Q2ColorSet; + surface: Q2ColorSet; + swatch: Map; +}; + +export type Q2Baseline = { + primary: Q2ColorUnit; + secondary: Q2ColorUnit | null; + tertiary: Q2ColorUnit | null; + accent: Q2ColorUnit | null; + neutral: Q2ColorUnit; + neutralVariant: Q2ColorUnit; + surface: Q2ColorUnit; + surfaceVariant: Q2ColorUnit; + danger: Q2ColorUnit; + success: Q2ColorUnit; + warn: Q2ColorUnit; + info: Q2ColorUnit; + shadow: string; + overlay: string; + outline: string; + outlineVariant: string; + custom: Map; +}; + +export type Q2Scheme = { + light: Q2Baseline; + dark: Q2Baseline; +}; + +export type Q2SchemeSource = { + primary: string | null; + secondary: string | null; + tertiary: string | null; + accent: string | null; + danger: string | null; + success: string | null; + warn: string | null; + info: string | null; + foreground: string | null; + background: string | null; + custom_colors?: Record; + setting: QSchemeSetting | null; +}; + +export type Q2SchemeStorage = { + source?: Q2SchemeSource; + scheme?: Q2Scheme; + cssVariables?: string; + cssAutoSchemeVariables?: string; + scssVariables?: string; + jsVariables?: string; +}; diff --git a/src/variables.css b/src/variables.css index 6d44a4a..105cedb 100644 --- a/src/variables.css +++ b/src/variables.css @@ -47,6 +47,7 @@ --color-youlv: hsl(118, 26%, 19%); --color-jingtailan: hsl(207, 65%, 43%); --color-yejuzi: hsl(240, 25%, 43%); + --color-jugengzi: hsl(297, 38%, 38%); /* background colors */ --color-yunshanlv: hsl(146, 25%, 11%); --color-wumeizi: hsl(305, 22%, 10%);