feat(配色方案): 添加Q2配色方案支持

新增Q2配色方案相关组件、模型和样式定义
在SchemeSign组件中添加q2样式支持
扩展模型以包含Q2方案类型和存储结构

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);

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':

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

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<Q2SchemeStorage>;
+};
+
+export function Q2Scheme({ scheme }: Q2SchemeProps) {
+  const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
+    isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
+  );
+
+  return (
+    <>
+      <Tab
+        tabs={tabOptions}
+        activeTab={activeTab}
+        onActive={(v) => setActiveTab(v as string)}
+        disabled={{
+          overview: isNilOrEmpty(scheme.schemeStorage?.scheme),
+          export: isNilOrEmpty(scheme.schemeStorage?.cssVariables),
+        }}
+      />
+    </>
+  );
+}

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 <QScheme scheme={scheme as SchemeContent<QSchemeStorage>} />;
+      case 'q_2_scheme':
+        return <Q2Scheme scheme={scheme as SchemeContent<Q2SchemeSource>} />;
       case 'swatch_scheme':
         return <SwatchScheme scheme={scheme as SchemeContent<SwatchSchemeStorage>} />;
       case 'material_2':

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<string, string>;
+};
+
+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<string, Q2ColorUnit>;
+};
+
+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<string, string>;
+  setting: QSchemeSetting | null;
+};
+
+export type Q2SchemeStorage = {
+  source?: Q2SchemeSource;
+  scheme?: Q2Scheme;
+  cssVariables?: string;
+  cssAutoSchemeVariables?: string;
+  scssVariables?: string;
+  jsVariables?: string;
+};

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%);