xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构Scheme编辑器结构。

Browse Source
This commit is contained in:
徐涛
2025-01-24 15:09:25 +08:00
parent 9606106c45
commit f9f984a1b4
10 changed files with 36 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/page-components/scheme/M2Scheme.tsx Normal file
View File

@@ -0,0 +1,3 @@
export function M2Scheme() {
return <div>Material Design 2 Scheme</div>;
}

3
src/page-components/scheme/M3Scheme.tsx Normal file
View File

@@ -0,0 +1,3 @@
export function M3Scheme() {
return <div>Material Design 3 Scheme</div>;
}

3
src/page-components/scheme/QScheme.tsx Normal file
View File

@@ -0,0 +1,3 @@
export function QScheme() {
return <div>Q Scheme</div>;
}

25
src/page-components/scheme/SchemeContent.module.css
View File

@@ -1,25 +0,0 @@
@layer pages {
.scheme_content {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--spacing-m);
}
.series_row {
display: flex;
flex-direction: column;
gap: var(--spacing-s);
h4 {
padding-block: var(--spacing-xs);
font-size: var(--font-size-l);
}
ul {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
gap: var(--spacing-l);
}
}
}

61
src/page-components/scheme/SchemeContent.tsx
View File

@@ -1,61 +0,0 @@
import { isArray } from 'lodash-es';
import { ColorStand } from '../../components/ColorStand';
import { SchemeSet } from '../../stores/schemes';
import styles from './SchemeContent.module.css';
type ColorSeriesProps = {
title: string;
series: SchemeSet['lightScheme' | 'darkScheme']['primary'];
simpleSeries?: boolean;
};
function ColorSeries({ title, series, simpleSeries = false }: ColorSeriesProps) {
return (
<div className={styles.series_row}>
<h4>{title}</h4>
<ul>
<ColorStand title="Normal" color={series?.normal} />
{simpleSeries ? (
<>
<ColorStand title="Lightness" color={series?.lighten} />
<ColorStand title="Darkness" color={series?.darken} />
</>
) : (
<>
<ColorStand title="Hover" color={series?.hover} />
<ColorStand title="Active" color={series?.active} />
<ColorStand title="Focus" color={series?.focus} />
<ColorStand title="Disabled" color={series?.disabled} />
</>
)}
</ul>
</div>
);
}
type SchemeContentProps = {
scheme: SchemeSet['lightScheme' | 'darkScheme'];
};
export function SchemeContent({ scheme }: SchemeContentProps) {
return (
<div className={styles.scheme_content}>
<ColorSeries title="Foreground Series" series={scheme.foreground} simpleSeries />
<ColorSeries title="Background Series" series={scheme.background} simpleSeries />
<ColorSeries title="Primary Series" series={scheme.primary} />
{isArray(scheme.secondary) ? (
scheme.secondary.map((cSet, index) => (
<ColorSeries title={`Secondary Series ${index + 1}`} series={cSet} />
))
) : (
<ColorSeries title="Secondary Series" series={scheme.secondary} />
)}
<ColorSeries title="Accent Series" series={scheme.accent} />
<ColorSeries title="Neutral Serias" series={scheme.neutral} />
<ColorSeries title="Success Series" series={scheme.success} />
<ColorSeries title="Danger Series" series={scheme.danger} />
<ColorSeries title="Warn Series" series={scheme.warning} />
<ColorSeries title="Info Series" series={scheme.info} />
</div>
);
}

17
src/page-components/scheme/SchemeView.module.css
View File

@@ -1,17 +0,0 @@
@layer pages {
.scheme_view_layout {
flex: 1 0;
width: 100%;
padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
display: flex;
flex-direction: column;
gap: var(--spacing-m);
overflow: hidden;
}
.preview_switch_container {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-m);
}
}

23
src/page-components/scheme/SchemeView.tsx
View File

@@ -1,23 +0,0 @@
import { useState } from 'react';
import { Switch } from '../../components/Switch';
import { SchemeSet } from '../../stores/schemes';
import { SchemeContent } from './SchemeContent';
import styles from './SchemeView.module.css';
type SchemeViewProps = {
scheme: SchemeSet['lightScheme' | 'darkScheme'];
};
export function SchemeView({ scheme }: SchemeViewProps) {
const [enablePreview, setEnablePreview] = useState(false);
return (
<div className={styles.scheme_view_layout}>
<div className={styles.preview_switch_container}>
<span>Preview scheme</span>
<Switch onChange={(checked) => setEnablePreview(checked)} />
</div>
{enablePreview ? <div>SVG Preview</div> : <SchemeContent scheme={scheme} />}
</div>
);
}

3
src/page-components/scheme/SwatchScheme.tsx Normal file
View File

@@ -0,0 +1,3 @@
export function SwatchScheme() {
return <div>Swatch Scheme</div>;
}

3
src/page-components/scheme/UnknownScheme.tsx Normal file
View File

@@ -0,0 +1,3 @@
export function UnknownScheme() {
return <div>Unknown or currupted scheme</div>;
}

22
src/pages/SchemeDetail.tsx
View File

@@ -1,10 +1,15 @@
import dayjs from 'dayjs';
import { isNil, set } from 'lodash-es';
import { useCallback, useEffect } from 'react';
import { useCallback, useEffect, useMemo } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { EditableDescription } from '../components/EditableDescription';
import { EditableTitle } from '../components/EditableTitle';
import { SchemeSign } from '../components/SchemeSign';
import { M2Scheme } from '../page-components/scheme/M2Scheme';
import { M3Scheme } from '../page-components/scheme/M3Scheme';
import { QScheme } from '../page-components/scheme/QScheme';
import { SwatchScheme } from '../page-components/scheme/SwatchScheme';
import { UnknownScheme } from '../page-components/scheme/UnknownScheme';
import { useScheme, useUpdateScheme } from '../stores/schemes';
import styles from './SchemeDetail.module.css';
@@ -32,6 +37,20 @@ export function SchemeDetail() {
},
[id],
);
const schemeContent = useMemo(() => {
switch (scheme?.type) {
case 'q_scheme':
return <QScheme />;
case 'swatch_scheme':
return <SwatchScheme />;
case 'material_2':
return <M2Scheme />;
case 'material_3':
return <M3Scheme />;
default:
return <UnknownScheme />;
}
}, [scheme]);
useEffect(() => {
if (isNil(scheme)) {
@@ -49,6 +68,7 @@ export function SchemeDetail() {
</div>
</div>
<EditableDescription content={scheme?.description} onChange={updateDescription} />
{schemeContent}
</div>
);
}