feat(ContextMenu): 添加Q2SchemeMenu组件支持自定义颜色配置

src/components/ContextMenu.tsx

@@ -16,6 +16,7 @@ import {
   MaterialDesign3DynamicSchemeSource,
   MaterialDesign3SchemeSource,
 } from '../material-3-scheme';
+import { Q2SchemeSource } from '../q-2-scheme';
 import { QSchemeSource } from '../q-scheme';
 import { currentPickedColor } from '../stores/colors';
 import { activeSchemeAtom, useActiveScheme, useUpdateScheme } from '../stores/schemes';
@@ -101,6 +102,79 @@ const QSchemeMenu: FC<ContextMenuItemProps> = ({ color, afterClick }) => {
   );
 };
 
+const Q2SchemeMenu: FC<ContextMenuBodyProps> = ({ color, afterClick }) => {
+  const { showToast } = useNotification();
+  const activeSchemeId = useAtomValue(activeSchemeAtom);
+  const updateScheme = useUpdateScheme(activeSchemeId);
+  const updateSchemeContent = useCallback(
+    (content: keyof QSchemeSource) => {
+      updateScheme((prev) => {
+        prev.schemeStorage.source[content] = color;
+        return prev;
+      });
+      showToast(
+        NotificationType.SUCCESS,
+        `${capitalize(content)} color in active scheme updated.`,
+        'tabler:settings-up',
+        3000,
+      );
+      afterClick?.();
+    },
+    [color, activeSchemeId, updateScheme],
+  );
+  const addCustomColor = useCallback(() => {
+    updateScheme((prev) => {
+      const source = prev.schemeStorage.source as Q2SchemeSource;
+      const colorAmount = size(source.custom_colors);
+      source.custom_colors[`Custom Color ${colorAmount + 1}`] = color;
+      return prev;
+    });
+
+    showToast(NotificationType.SUCCESS, `New color entry added.`, 'tabler:settings-up', 3000);
+
+    afterClick?.();
+  }, [color, activeSchemeId, updateScheme]);
+
+  return (
+    <>
+      <hr />
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('primary')}>
+        Set as Primary color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('secondary')}>
+        Set as Secondary color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('tertiary')}>
+        Set as Tertiary color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('accent')}>
+        Set as Accent color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('danger')}>
+        Set as Danger color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('success')}>
+        Set as Success color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('warning')}>
+        Set as Warn color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('info')}>
+        Set as Info color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('foreground')}>
+        Set as Foreground color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('background')}>
+        Set as Background color
+      </div>
+      <div className={styles.menu_item} onClick={addCustomColor}>
+        Add to Custom colors
+      </div>
+    </>
+  );
+};
+
 const SwatchSchemeMenu: FC<ContextMenuItemProps> = ({ color, afterClick }) => {
   const { showToast } = useNotification();
   const activeSchemeId = useAtomValue(activeSchemeAtom);
@@ -253,6 +327,8 @@ export const ContextMenuBody: FC<ContextMenuBodyProps> = ({ color, afterClick, x
     switch (activeScheme?.type) {
       case 'q_scheme':
         return <QSchemeMenu {...sharedProps} />;
+      case 'q_2_scheme':
+        return <Q2SchemeMenu {...sharedProps} />;
       case 'swatch_scheme':
         return <SwatchSchemeMenu {...sharedProps} />;
       case 'material_2':