docs: picker colorful

.dumi/pages/index/index/Theme/ColorPicker.tsx

@@ -0,0 +1,127 @@
+import useSiteToken from '../../../../hooks/useSiteToken';
+import { Input, Space, Popover } from 'antd';
+import { SketchPicker } from 'react-color';
+import React from 'react';
+import { css } from '@emotion/react';
+import { TinyColor } from '@ctrl/tinycolor';
+
+const PRESET_COLORS = [
+  '#1677FF',
+  '#5A54F9',
+  '#9E339F',
+  '#FB7299',
+  '#E0282E',
+  '#F4801A',
+  '#F2BD27',
+  '#00B96B',
+];
+
+const useStyle = () => {
+  const { token } = useSiteToken();
+
+  return {
+    color: css`
+      width: ${token.controlHeightLG / 2}px;
+      height: ${token.controlHeightLG / 2}px;
+      border-radius: 100%;
+      cursor: pointer;
+      transition: all ${token.motionDurationSlow};
+    `,
+
+    colorActive: css`
+      outline: ${token.controlOutlineWidth * 2}px solid ${token.colorPrimary};
+      outline-offset: 1px;
+    `,
+  };
+};
+
+export interface RadiusPickerProps {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
+  const style = useStyle();
+
+  const matchColors = React.useMemo(() => {
+    const valueStr = new TinyColor(value).toRgbString();
+    let existActive = false;
+
+    const colors = PRESET_COLORS.map(color => {
+      const colorStr = new TinyColor(color).toRgbString();
+      const active = colorStr === valueStr;
+      existActive = existActive || active;
+
+      return {
+        color,
+        active,
+        picker: false,
+      };
+    });
+
+    return [
+      ...colors,
+      {
+        color: 'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)',
+        picker: true,
+        active: !existActive,
+      },
+    ];
+  }, [value]);
+
+  return (
+    <Space size="large">
+      <Input
+        value={value}
+        onChange={event => {
+          onChange?.(event.target.value);
+        }}
+        style={{ width: 120 }}
+      />
+
+      <Space size="middle">
+        {matchColors.map(({ color, active, picker }) => {
+          let colorNode = (
+            <div
+              key={color}
+              css={[style.color, active && style.colorActive]}
+              style={{
+                background: color,
+              }}
+              onClick={() => {
+                if (!picker) {
+                  onChange?.(color);
+                }
+              }}
+            />
+          );
+
+          if (picker) {
+            colorNode = (
+              <Popover
+                key={color}
+                overlayInnerStyle={{ padding: 0 }}
+                content={
+                  <SketchPicker
+                    color={value}
+                    presetColors={PRESET_COLORS}
+                    disableAlpha
+                    onChangeComplete={color => {
+                      onChange?.(color.hex);
+                    }}
+                  />
+                }
+                trigger="click"
+                showArrow={false}
+              >
+                {colorNode}
+              </Popover>
+            );
+          }
+
+          return colorNode;
+        })}
+      </Space>
+    </Space>
+  );
+}

.dumi/pages/index/index/Theme/RadiusPicker.tsx

@@ -8,7 +8,7 @@ export interface RadiusPickerProps {
 
 export default function RadiusPicker({ value, onChange }: RadiusPickerProps) {
   return (
-    <Space>
+    <Space size="large">
       <InputNumber
         value={value}
         onChange={onChange}

.dumi/pages/index/index/Theme/ThemePicker.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { Space } from 'antd';
 import * as React from 'react';
 import useSiteToken from '../../../../hooks/useSiteToken';
+import useLocale from '../../../../hooks/useLocale';
 
 export const THEMES = {
   default: 'https://gw.alipayobjects.com/zos/bmw-prod/ae669a89-0c65-46db-b14b-72d1c7dd46d6.svg',
@@ -12,6 +13,21 @@ export const THEMES = {
 
 export type THEME = keyof typeof THEMES;
 
+const locales = {
+  cn: {
+    default: '默认',
+    dark: '暗黑',
+    lark: '知识协作',
+    comic: '二次元',
+  },
+  en: {
+    default: 'Default',
+    dark: 'Dark',
+    lark: 'Document',
+    comic: 'Comic',
+  },
+};
+
 const useStyle = () => {
   const { token } = useSiteToken();
 
@@ -40,20 +56,25 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
   const { token } = useSiteToken();
   const style = useStyle();
 
+  const [locale] = useLocale(locales);
+
   return (
     <Space size={token.paddingLG}>
       {Object.keys(THEMES).map(theme => {
         const url = THEMES[theme as THEME];
 
         return (
-          <img
-            key={theme}
-            src={url}
-            css={[style.themeCard, value === theme && style.themeCardActive]}
-            onClick={() => {
-              onChange?.(theme);
-            }}
-          />
+          <Space direction="vertical" align="center">
+            <img
+              key={theme}
+              src={url}
+              css={[style.themeCard, value === theme && style.themeCardActive]}
+              onClick={() => {
+                onChange?.(theme);
+              }}
+            />
+            <span>{locale[theme as keyof typeof locale]}</span>
+          </Space>
         );
       })}
     </Space>

.dumi/pages/index/index/Theme/index.tsx

@@ -24,6 +24,7 @@ import {
   theme,
 } from 'antd';
 import ThemePicker, { THEME } from './ThemePicker';
+import ColorPicker from './ColorPicker';
 import RadiusPicker from './RadiusPicker';
 import Group from '../Group';
 
@@ -327,7 +328,7 @@ export default function Theme() {
                     </Form.Item>
 
                     <Form.Item label={locale.titlePrimaryColor} name="colorPrimary">
-                      <Input style={{ width: 120 }} />
+                      <ColorPicker />
                     </Form.Item>
                     <Form.Item label={locale.titleBorderRadius} name="radiusBase">
                       <RadiusPicker />