增加自动配色功能页面。

src/App.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { ColorFunctionProvider } from './ColorFunctionContext';
 import { Notifications } from './components/Notifications';
+import { Harmonies } from './pages/Harmonies';
 import { Home } from './pages/Home';
 import { MainLayout } from './pages/MainLayout';
 import { NewScheme } from './pages/NewScheme';
@@ -23,6 +24,7 @@ const routes = createBrowserRouter([
           { path: ':id', element: <SchemeDetail /> },
         ],
       },
+      { path: 'harmonies', element: <Harmonies /> },
     ],
   },
 ]);

src/pages/Harmonies.module.css

@@ -0,0 +1,26 @@
+@layer pages {
+  .harmonies_workspace {
+    flex-direction: column;
+  }
+  .explore_section {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
+  .function_side {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    .mode_navigation {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--spacing-xs);
+    }
+  }
+  .preview_side {
+    flex: 1;
+  }
+}

src/pages/Harmonies.tsx

@@ -0,0 +1,34 @@
+import cx from 'clsx';
+import { NavLink, Outlet } from 'react-router-dom';
+import styles from './Harmonies.module.css';
+
+export function Harmonies() {
+  return (
+    <div className={cx('workspace', styles.harmonies_workspace)}>
+      <header>
+        <h3>Color Harmonies</h3>
+        <p>Automatically select color combinations using color theory.</p>
+      </header>
+      <section className={styles.explore_section}>
+        <aside className={styles.function_side}>
+          <div>
+            <h5>Basic color</h5>
+          </div>
+          <div className={styles.mode_navigation}>
+            <NavLink>Complementary</NavLink>
+            <NavLink>Analogous</NavLink>
+            <NavLink>Analogous with Complementary</NavLink>
+            <NavLink>Triadic</NavLink>
+            <NavLink>Split Complementary</NavLink>
+            <NavLink>Tetradic</NavLink>
+            <NavLink>Flip Tetradic</NavLink>
+            <NavLink>Square</NavLink>
+          </div>
+        </aside>
+        <div className={styles.preview_side}>
+          <Outlet />
+        </div>
+      </section>
+    </div>
+  );
+}