feat(compo):增加主内容区域布局组件。

src/layout/ContentLayout.jsx

@@ -0,0 +1,39 @@
+import ActionIcon from "@/components/ActionIcon/ActionIcon";
+import { useNavigate } from "@solidjs/router";
+import { IconX } from "@tabler/icons-solidjs";
+import { prop } from "ramda";
+import { children, mergeProps } from "solid-js";
+import classes from "./ContentLayout.module.css";
+
+/**
+ * @typedef {Object} ContentLayoutProps
+ * @property {boolean} [disableClose]
+ * @property {JSX.Element} [title]
+ */
+
+/**
+ * @param {import("solid-js").ParentProps<ContentLayoutProps>} props
+ */
+export default function ContentLayout(props) {
+  const mergedProps = mergeProps({ disableClose: false, title: "" }, props);
+  const childContent = children(() => props.children);
+  const navigate = useNavigate();
+
+  return (
+    <div class={prop("content-layout", classes)}>
+      <section class={prop("title", classes)}>
+        <div class={prop("title-content", classes)}>{mergedProps.title}</div>
+        <ActionIcon
+          size="s"
+          color="secondary"
+          variant="transparent"
+          disabled={mergedProps.disableClose}
+          onClick={() => navigate("/", { replace: true })}
+        >
+          <IconX stroke="1.5" />
+        </ActionIcon>
+      </section>
+      <section>{childContent()}</section>
+    </div>
+  );
+}

src/layout/ContentLayout.module.css

@@ -0,0 +1,22 @@
+@import "@/mixins.css";
+
+.content-layout {
+  @util size(100%, 100%);
+  @include flex(column, flex-start, stretch);
+  z-index: 100;
+  .title {
+    @util size(100%, 32px);
+    @util padding(var(--spacing-xs) var(--spacing-sm));
+    @include flex(row, flex-start, center, --spacing-xs);
+    @util border-bottom-radius(0px);
+    .title-content {
+      flex-grow: 1;
+      font-size: var(--font-size-s);
+    }
+  }
+  .content {
+    @util size(100%);
+    flex: 1;
+    overflow: hidden;
+  }
+}