enhance(structure):基本完成项目结构的创建。

package.json

@@ -31,8 +31,8 @@
     "@types/chroma-js": "^2.4.4",
     "@types/events": "^3.0.3",
     "@types/ramda": "^0.30.1",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"

src/components/NavigationBar.tsx

@@ -0,0 +1,26 @@
+import { Spacer } from "@/foundations";
+import { flex, mq } from "@/style-predefines";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import chroma from "chroma-js";
+
+const NavigationContainer = styled.div(
+  ({ theme }) => css`
+    height: 100%;
+    width: ${theme.spacings.xxs * 36}px;
+    padding-top: ${theme.spacings.xxs * 24}px;
+    background-color: ${chroma(theme.backgroundColor.light).darken(0.3).hex()};
+    ${flex(theme, "column", "flex-start", "stretch", "sm")}
+    ${mq.dark} {
+      background-color: ${chroma(theme.backgroundColor.dark).brighten(0.3).hex()};
+    }
+  `
+);
+
+export function NavigationBar() {
+  return (
+    <NavigationContainer>
+      <Spacer />
+    </NavigationContainer>
+  );
+}

src/components/WindowMoveHandler.tsx

@@ -0,0 +1,17 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+const Handler = styled.div(
+  ({ theme }) => css`
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: ${theme.spacings.xxs * 24}px;
+    z-index: 1;
+  `
+);
+
+export function WindowMoveHandler() {
+  return <Handler data-tauri-drag-region />;
+}

src/components/WindowMoveHandler/WindowMoveHandler.tsx

@@ -1,17 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-const Handler = styled.div(({ theme }) =>
-  css({
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    height: theme.spacings.xxs * 24,
-    zIndex: 1,
-  })
-);
-
-export function WindowMoveHandler() {
-  return <Handler data-tauri-drag-region />;
-}

src/components/index.tsx

@@ -1 +1,2 @@
-export { WindowMoveHandler } from "./WindowMoveHandler/WindowMoveHandler";
+export { NavigationBar } from "./NavigationBar";
+export { WindowMoveHandler } from "./WindowMoveHandler";

src/foundations/Avatar.tsx

@@ -0,0 +1,42 @@
+import { flex } from "@/style-predefines";
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { __, always, cond, includes, T } from "ramda";
+import { PropsWithChildren } from "react";
+
+type AvatarProps = {
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+  square?: boolean;
+  bgColor?: string;
+};
+
+const AvatarContainer = styled("div")<AvatarProps>(({ theme, size, square }) => {
+  const radiusSize = cond([
+    [includes(__, ["xs", "sm", "md"]), always("xxs")],
+    [T, always("xs")],
+  ])(size);
+  return css`
+    height: ${theme.spacings[size]};
+    width: ${theme.spacings[size]};
+    border-radius: ${theme.radius[square ? "none" : radiusSize]};
+    overflow: hidden;
+    ${flex(theme, "row", "center", "center")}
+    .child {
+      overflow: hidden;
+    }
+  `;
+});
+
+export function Avatar({
+  size = "md",
+  square = false,
+  bgColor,
+  children,
+}: PropsWithChildren<AvatarProps>) {
+  const theme = useTheme();
+  return (
+    <AvatarContainer size={size} square={square}>
+      <div className="child">{children}</div>
+    </AvatarContainer>
+  );
+}

src/foundations/Spacer.tsx

@@ -0,0 +1,10 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+export const Spacer = styled.div(
+  () => css`
+    flex-grow: 1;
+    flex-shrink: 0;
+    align-self: stretch;
+  `
+);

src/foundations/index.tsx

@@ -0,0 +1 @@
+export { Spacer } from "./Spacer";

src/global-style.tsx

@@ -1,21 +1,33 @@
-import { css } from "@emotion/react";
+import { css, Theme } from "@emotion/react";
 import { mq } from "./style-predefines";
 
-export const globalStyle = (theme) =>
-  css({
-    [":root"]: {
-      colorScheme: "light dark",
-      fontFamily: "Inter, Avenir, Helvetica, Arial, sans-serif",
-      fontSize: 0.625,
-      fontSynthesis: "none",
-      textRendering: "optimizeLegibility",
-      WebkitFontSmoothing: "antialiased",
-      MozOsxFontSmoothing: "grayscale",
-      WebkitTextSizeAdjust: "100%",
-      backgroundColor: theme.backgroundColor.light,
-      overflow: "hidden",
-      [mq.dark]: {
-        backgroundColor: theme.backgroundColor.dark,
-      },
-    },
-  });
+export const globalStyle = (theme: Theme) => css`
+  :root {
+    color-scheme: light dark;
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 0.625;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+    color: ${theme.foregroundColor.light};
+    background-color: ${theme.backgroundColor.light};
+    overflow: hidden;
+    height: 100vh;
+    width: 100vw;
+    ${mq.dark} {
+      color: ${theme.foregroundColor.dark};
+      background-color: ${theme.backgroundColor.dark};
+    }
+  }
+  body {
+    height: inherit;
+    width: inherit;
+    overflow: hidden;
+    #root {
+      height: inherit;
+      width: inherit;
+    }
+  }
+`;

src/pages/MainLayout.tsx

@@ -1,22 +1,27 @@
-import { WindowMoveHandler } from "@/components";
+import { NavigationBar, WindowMoveHandler } from "@/components";
 import { flex } from "@/style-predefines";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-const LayoutContainer = styled.div(({ theme }) =>
-  css({
-    height: "100vh",
-    width: "100vw",
-    paddingTop: theme.spacings.xxs * 24,
-    ...flex(theme, "row", "flex-start", "stretch"),
-    overflow: "hidden",
-  })
+const LayoutContainer = styled.div(
+  ({ theme }) => css`
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    ${flex(theme, "row", "flex-start", "stretch")}
+    .main-content {
+      flex-grow: 1;
+      overflow: hidden;
+    }
+  `
 );
 
 export function MainLayout() {
   return (
     <LayoutContainer>
       <WindowMoveHandler />
+      <NavigationBar />
+      <div className="main-content">Main Content</div>
     </LayoutContainer>
   );
 }

src/style-predefines.tsx

@@ -35,8 +35,8 @@ export function flex(
   direction: Property.FlexDirection = "row",
   justify: Property.JustifyContent = "flex-start",
   align: Property.AlignItems = "start",
-  wrap: Property.FlexWrap = "nowrap",
-  gap: MeasureUnit = "none"
+  gap: MeasureUnit = "none",
+  wrap: Property.FlexWrap = "nowrap"
 ) {
   return css({
     display: "flex",

src/theme.tsx

@@ -24,12 +24,12 @@ export const theme: Partial<Theme> = {
   white: "#ffffff",
   black: "#000000",
   foregroundColor: {
-    light: chroma.hsl(0, 0, 0.06).hex(),
-    dark: chroma.hsl(0, 0, 0.88).hex(),
+    light: chroma.hsl(0, 0, 0.12).hex(),
+    dark: chroma.hsl(0, 0, 0.82).hex(),
   },
   backgroundColor: {
-    light: chroma.hsl(0, 0, 0.96).hex(),
-    dark: chroma.hsl(0, 0, 0.18).hex(),
+    light: chroma.hsl(0, 0, 0.94).hex(),
+    dark: chroma.hsl(0, 0, 0.098).hex(),
   },
   successColor: {
     light: colors.green[5],