color-q/src/components/SchemeSign.tsx
徐涛 e327885545 feat(配色方案): 添加Q2配色方案支持
新增Q2配色方案相关组件、模型和样式定义
在SchemeSign组件中添加q2样式支持
扩展模型以包含Q2方案类型和存储结构
2025-07-14 22:39:01 +08:00

38 lines
955 B
TypeScript

import cx from 'clsx';
import { isNil } from 'lodash-es';
import { useMemo } from 'react';
import { schemeType, SchemeType } from '../models';
import { Badge } from './Badge';
import styles from './SchemeSign.module.css';
type SchemeSignProps = {
scheme?: SchemeType;
short?: boolean;
};
export function SchemeSign({ scheme, short = false }: SchemeSignProps) {
const schemeName = schemeType(scheme, short);
const signColorStyles = useMemo(() => {
switch (scheme) {
case 'q_scheme':
return styles.q;
case 'q_2_scheme':
return styles.q2;
case 'swatch_scheme':
return styles.swatch;
case 'material_2':
return styles.m2;
case 'material_3':
return styles.m3;
case 'material_3_dynamic':
return styles.m3d;
}
}, [scheme]);
return (
!isNil(scheme) && (
<Badge extendClassName={cx(styles.badge, signColorStyles)}>{schemeName}</Badge>
)
);
}