create-modsemi 0.1.0

package/template/src/hooks/useMenuData.ts

@@ -0,0 +1,171 @@
+import { useLocation } from '@modern-js/runtime/router';
+import { useMemo } from 'react';
+import { type RouteItem, routesConfig } from '../config/navigation';
+import { type LayoutMode, useLayoutStore } from '../store/layoutStore';
+import { useAccess } from './useAccess';
+
+export interface BreadcrumbItem {
+  path: string;
+  text: string;
+}
+
+export interface MenuDataResult {
+  /** 一級選單（hideInMenu 與無權限的項目已過濾） */
+  firstLevelMenus: RouteItem[];
+  /** 二級選單（mix/double 模式下根據一級選中項計算） */
+  secondLevelMenus: RouteItem[];
+  /** 當前路徑對應的選中 key 列表 */
+  selectedKeys: string[];
+  /** 當前路徑對應的展開 key 列表（側邊欄用） */
+  openKeys: string[];
+  /** mix/double 模式下一級選中的 itemKey */
+  activeFirstKey: string;
+  /** 麵包屑資料，使用 routesConfig 的 text 顯示 */
+  breadcrumbs: BreadcrumbItem[];
+}
+
+/**
+ * 根據 pathname 從 routesConfig 建立麵包屑資料。
+ * 搜尋範圍包含 hideInMenu 的項目（如歡迎頁），以確保每個路徑都有正確的文字。
+ * 麵包屑不受權限過濾影響（已知路徑就顯示文字）。
+ */
+function buildBreadcrumbs(pathname: string): BreadcrumbItem[] {
+  for (const item of routesConfig) {
+    if (pathname === item.itemKey) {
+      return [{ path: item.itemKey, text: item.text }];
+    }
+    if (item.children) {
+      for (const child of item.children) {
+        if (pathname === child.itemKey || pathname.startsWith(`${child.itemKey}/`)) {
+          return [
+            { path: item.itemKey, text: item.text },
+            { path: child.itemKey, text: child.text },
+          ];
+        }
+      }
+    }
+  }
+  return [{ path: pathname, text: pathname }];
+}
+
+/** 根據 pathname 找到匹配的一級父節點 itemKey */
+function findFirstLevelKey(pathname: string, routes: RouteItem[]): string {
+  for (const item of routes) {
+    if (pathname === item.itemKey || pathname.startsWith(`${item.itemKey}/`)) {
+      return item.itemKey;
+    }
+    if (item.children) {
+      for (const child of item.children) {
+        if (
+          pathname === child.itemKey ||
+          pathname.startsWith(`${child.itemKey}/`)
+        ) {
+          return item.itemKey;
+        }
+      }
+    }
+  }
+  return routes[0]?.itemKey ?? '';
+}
+
+/** 根據 pathname 計算選中 key 與展開 key */
+function computeSelectedAndOpen(
+  pathname: string,
+  routes: RouteItem[],
+): { selectedKeys: string[]; openKeys: string[] } {
+  const selectedKeys: string[] = [];
+  const openKeys: string[] = [];
+
+  for (const item of routes) {
+    if (pathname === item.itemKey) {
+      selectedKeys.push(item.itemKey);
+      break;
+    }
+    if (item.children) {
+      for (const child of item.children) {
+        if (
+          pathname === child.itemKey ||
+          pathname.startsWith(`${child.itemKey}/`)
+        ) {
+          selectedKeys.push(child.itemKey);
+          openKeys.push(item.itemKey);
+          break;
+        }
+      }
+    }
+  }
+
+  if (selectedKeys.length === 0) {
+    selectedKeys.push(pathname);
+  }
+
+  return { selectedKeys, openKeys };
+}
+
+function buildMenuData(
+  layoutMode: LayoutMode,
+  activeFirstKey: string,
+  selectedKeys: string[],
+  openKeys: string[],
+  doubleFirstKey: string,
+  routes: RouteItem[],
+): MenuDataResult {
+  const base = { breadcrumbs: [] as BreadcrumbItem[] };
+
+  switch (layoutMode) {
+    case 'side':
+      return { ...base, firstLevelMenus: routes, secondLevelMenus: [], selectedKeys, openKeys, activeFirstKey };
+
+    case 'top':
+      return { ...base, firstLevelMenus: routes, secondLevelMenus: [], selectedKeys, openKeys: [], activeFirstKey };
+
+    case 'mix': {
+      const activeParent = routes.find(r => r.itemKey === activeFirstKey);
+      return { ...base, firstLevelMenus: routes, secondLevelMenus: activeParent?.children ?? [], selectedKeys, openKeys, activeFirstKey };
+    }
+
+    case 'double': {
+      const activeParent = routes.find(r => r.itemKey === doubleFirstKey);
+      return { ...base, firstLevelMenus: routes, secondLevelMenus: activeParent?.children ?? [], selectedKeys, openKeys, activeFirstKey: doubleFirstKey };
+    }
+
+    default:
+      return { ...base, firstLevelMenus: routes, secondLevelMenus: [], selectedKeys, openKeys, activeFirstKey };
+  }
+}
+
+export function useMenuData(): MenuDataResult {
+  const { layoutMode, doubleFirstKey } = useLayoutStore();
+  const location = useLocation();
+  const pathname = location.pathname;
+  const access = useAccess();
+
+  /**
+   * 依序套用兩層過濾：
+   * 1. hideInMenu — 不顯示於選單（如歡迎頁）
+   * 2. access — 無對應權限的項目自動隱藏（一、二級均過濾）
+   */
+  const visibleRoutes = useMemo(() => {
+    const accessMap = access as unknown as Record<string, boolean>;
+    return routesConfig
+      .filter(item => !item.hideInMenu)
+      .filter(item => !item.access || Boolean(accessMap[item.access]))
+      .map(item => ({
+        ...item,
+        children: item.children?.filter(
+          child => !child.access || Boolean(accessMap[child.access]),
+        ),
+      }));
+  }, [access]);
+
+  return useMemo(() => {
+    const { selectedKeys, openKeys } = computeSelectedAndOpen(pathname, visibleRoutes);
+    const activeFirstKey = findFirstLevelKey(pathname, visibleRoutes);
+    const breadcrumbs = buildBreadcrumbs(pathname);
+
+    return {
+      ...buildMenuData(layoutMode, activeFirstKey, selectedKeys, openKeys, doubleFirstKey, visibleRoutes),
+      breadcrumbs,
+    };
+  }, [layoutMode, pathname, doubleFirstKey, visibleRoutes]);
+}

package/template/src/hooks/usePageTitle.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { usePageTitleStore } from '../store/pageTitleStore';
+
+/**
+ * 在頁面元件中呼叫此 Hook，可強制覆寫 `<head>` 的 `<title>`。
+ * 離開頁面時自動清除，恢復成 breadcrumb 自動推導的標題。
+ *
+ * @example
+ * ```tsx
+ * // src/pages/Dashboard/Workplace/index.tsx
+ * import { usePageTitle } from '../../hooks/usePageTitle';
+ *
+ * export default function Workplace() {
+ *   usePageTitle('工作台 — 即時總覽');
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+export function usePageTitle(title: string) {
+  const setCustomTitle = usePageTitleStore(s => s.setCustomTitle);
+
+  useEffect(() => {
+    setCustomTitle(title);
+    return () => setCustomTitle(null);
+  }, [title, setCustomTitle]);
+}

package/template/src/layouts/ProLayout/DoubleLayout.tsx

@@ -0,0 +1,157 @@
+import { Layout, Nav, Tooltip } from '@douyinfe/semi-ui-19';
+import { useNavigate } from '@modern-js/runtime/router';
+import type { ReactNode } from 'react';
+import { type RouteItem, routesConfig } from '../../config/navigation';
+import { useMenuData } from '../../hooks/useMenuData';
+import { useLayoutStore } from '../../store/layoutStore';
+import { LayoutBreadcrumb } from './LayoutBreadcrumb';
+
+const { Header, Sider, Content } = Layout;
+
+interface DoubleLayoutProps {
+  children: ReactNode;
+  logo?: ReactNode;
+  title?: string;
+  headerExtra?: ReactNode;
+}
+
+function toNavItems(items: RouteItem[]): object[] {
+  return items.map(item => ({
+    itemKey: item.itemKey,
+    text: item.text,
+    icon: item.icon,
+    items: item.children ? toNavItems(item.children) : undefined,
+  }));
+}
+
+export function DoubleLayout({
+  children,
+  logo,
+  title = 'ModSemi',
+  headerExtra,
+}: DoubleLayoutProps) {
+  const navigate = useNavigate();
+  const { secondLevelMenus, selectedKeys, openKeys, activeFirstKey, breadcrumbs } =
+    useMenuData();
+  const { fixedHeader, showBreadcrumb, doubleFirstKey, setDoubleFirstKey } =
+    useLayoutStore();
+
+  const sideItems = toNavItems(secondLevelMenus);
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Header
+        style={{
+          backgroundColor: 'var(--semi-color-bg-1)',
+          borderBottom: '1px solid var(--semi-color-border)',
+          padding: '0 24px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          height: 56,
+          position: fixedHeader ? 'sticky' : 'relative',
+          top: 0,
+          zIndex: 100,
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {logo}
+          <span
+            style={{
+              fontWeight: 700,
+              fontSize: 16,
+              color: 'var(--semi-color-text-0)',
+            }}
+          >
+            {title}
+          </span>
+        </div>
+        <div>{headerExtra}</div>
+      </Header>
+
+      <Layout style={{ flex: 1 }}>
+        {/* 第一欄：極窄的圖示欄 */}
+        <Sider
+          style={{
+            width: 56,
+            minWidth: 56,
+            backgroundColor: 'var(--semi-color-bg-2)',
+            borderRight: '1px solid var(--semi-color-border)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            paddingTop: 8,
+            gap: 4,
+          }}
+        >
+          {routesConfig.map(item => {
+            const isActive = doubleFirstKey === item.itemKey;
+            return (
+              <Tooltip key={item.itemKey} content={item.text} position="right">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setDoubleFirstKey(item.itemKey);
+                    const firstChild = item.children?.[0];
+                    navigate(firstChild ? firstChild.itemKey : item.itemKey);
+                  }}
+                  style={{
+                    width: 40,
+                    height: 40,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 8,
+                    cursor: 'pointer',
+                    border: 'none',
+                    backgroundColor: isActive
+                      ? 'var(--semi-color-primary-light-default)'
+                      : 'transparent',
+                    color: isActive
+                      ? 'var(--semi-color-primary)'
+                      : 'var(--semi-color-text-2)',
+                    fontSize: 18,
+                    transition: 'all 0.2s',
+                    marginBottom: 4,
+                  }}
+                  title={item.text}
+                >
+                  {item.icon ?? item.text.slice(0, 1)}
+                </button>
+              </Tooltip>
+            );
+          })}
+        </Sider>
+
+        {/* 第二欄：文字選單 */}
+        {sideItems.length > 0 && (
+          <Sider
+            style={{
+              backgroundColor: 'var(--semi-color-bg-1)',
+              borderRight: '1px solid var(--semi-color-border)',
+            }}
+          >
+            <Nav
+              items={sideItems}
+              selectedKeys={selectedKeys}
+              defaultOpenKeys={openKeys}
+              style={{ height: 'calc(100vh - 56px)', overflowY: 'auto' }}
+              onSelect={({ itemKey }) => navigate(itemKey as string)}
+            />
+          </Sider>
+        )}
+
+        <Content
+          style={{
+            padding: 24,
+            backgroundColor: 'var(--semi-color-bg-0)',
+            minHeight: 'calc(100vh - 56px)',
+          }}
+        >
+          <LayoutBreadcrumb breadcrumbs={breadcrumbs} show={showBreadcrumb} />
+          {children}
+        </Content>
+      </Layout>
+    </Layout>
+  );
+}

package/template/src/layouts/ProLayout/LayoutBreadcrumb.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { globalConfig } from '../../config/global';
+import type { BreadcrumbItem } from '../../hooks/useMenuData';
+import { usePageTitleStore } from '../../store/pageTitleStore';
+
+interface LayoutBreadcrumbProps {
+  breadcrumbs: BreadcrumbItem[];
+  show: boolean;
+}
+
+/**
+ * 讀取 globalConfig.breadcrumbComponent 並渲染。
+ * 同時根據 breadcrumbs 自動同步 document.title，
+ * 若頁面元件呼叫了 usePageTitle()，則優先使用自訂標題。
+ */
+export function LayoutBreadcrumb({ breadcrumbs, show }: LayoutBreadcrumbProps) {
+  const customTitle = usePageTitleStore(s => s.customTitle);
+
+  useEffect(() => {
+    const autoTitle = breadcrumbs[breadcrumbs.length - 1]?.text;
+    document.title = customTitle ?? autoTitle ?? document.title;
+  }, [breadcrumbs, customTitle]);
+
+  if (!show || breadcrumbs.length === 0) return null;
+
+  const BreadcrumbComp = globalConfig.breadcrumbComponent;
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <BreadcrumbComp breadcrumbs={breadcrumbs} />
+    </div>
+  );
+}

package/template/src/layouts/ProLayout/MixLayout.tsx

@@ -0,0 +1,134 @@
+import { Layout, Nav } from '@douyinfe/semi-ui-19';
+import { useNavigate } from '@modern-js/runtime/router';
+import type { ReactNode } from 'react';
+import type { RouteItem } from '../../config/navigation';
+import { useMenuData } from '../../hooks/useMenuData';
+import { useLayoutStore } from '../../store/layoutStore';
+import { LayoutBreadcrumb } from './LayoutBreadcrumb';
+
+const { Header, Sider, Content } = Layout;
+
+interface MixLayoutProps {
+  children: ReactNode;
+  logo?: ReactNode;
+  title?: string;
+  headerExtra?: ReactNode;
+}
+
+function toNavItems(items: RouteItem[]): object[] {
+  return items.map(item => ({
+    itemKey: item.itemKey,
+    text: item.text,
+    icon: item.icon,
+    items: item.children ? toNavItems(item.children) : undefined,
+  }));
+}
+
+export function MixLayout({
+  children,
+  logo,
+  title = 'ModSemi',
+  headerExtra,
+}: MixLayoutProps) {
+  const navigate = useNavigate();
+  const {
+    firstLevelMenus,
+    secondLevelMenus,
+    selectedKeys,
+    openKeys,
+    activeFirstKey,
+    breadcrumbs,
+  } = useMenuData();
+  const { fixedHeader, showBreadcrumb } = useLayoutStore();
+
+  const topItems = firstLevelMenus.map(item => ({
+    itemKey: item.itemKey,
+    text: item.text,
+    icon: item.icon,
+  }));
+
+  const sideItems = toNavItems(secondLevelMenus);
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Header
+        style={{
+          backgroundColor: 'var(--semi-color-bg-1)',
+          borderBottom: '1px solid var(--semi-color-border)',
+          padding: '0 24px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 16,
+          height: 56,
+          position: fixedHeader ? 'sticky' : 'relative',
+          top: 0,
+          zIndex: 100,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            flexShrink: 0,
+          }}
+        >
+          {logo}
+          <span
+            style={{
+              fontWeight: 700,
+              fontSize: 16,
+              color: 'var(--semi-color-text-0)',
+            }}
+          >
+            {title}
+          </span>
+        </div>
+
+        <Nav
+          mode="horizontal"
+          items={topItems}
+          selectedKeys={[activeFirstKey]}
+          style={{ flex: 1, borderBottom: 'none' }}
+          onSelect={({ itemKey }) => {
+            const found = firstLevelMenus.find(r => r.itemKey === itemKey);
+            const firstChild = found?.children?.[0];
+            navigate(firstChild?.itemKey ?? (itemKey as string));
+          }}
+        />
+
+        <div style={{ flexShrink: 0 }}>{headerExtra}</div>
+      </Header>
+
+      <Layout>
+        {sideItems.length > 0 && (
+          <Sider
+            style={{
+              backgroundColor: 'var(--semi-color-bg-1)',
+              borderRight: '1px solid var(--semi-color-border)',
+            }}
+          >
+            <Nav
+              items={sideItems}
+              selectedKeys={selectedKeys}
+              defaultOpenKeys={openKeys}
+              style={{ height: 'calc(100vh - 56px)', overflowY: 'auto' }}
+              onSelect={({ itemKey }) => navigate(itemKey as string)}
+            />
+          </Sider>
+        )}
+
+        <Content
+          style={{
+            padding: 24,
+            backgroundColor: 'var(--semi-color-bg-0)',
+            minHeight: 'calc(100vh - 56px)',
+          }}
+        >
+          <LayoutBreadcrumb breadcrumbs={breadcrumbs} show={showBreadcrumb} />
+          {children}
+        </Content>
+      </Layout>
+    </Layout>
+  );
+}

package/template/src/layouts/ProLayout/SideLayout.tsx

@@ -0,0 +1,108 @@
+import { Layout, Nav } from '@douyinfe/semi-ui-19';
+import { useNavigate } from '@modern-js/runtime/router';
+import type { ReactNode } from 'react';
+import type { RouteItem } from '../../config/navigation';
+import { useMenuData } from '../../hooks/useMenuData';
+import { useLayoutStore } from '../../store/layoutStore';
+import { LayoutBreadcrumb } from './LayoutBreadcrumb';
+
+const { Header, Sider, Content } = Layout;
+
+interface SideLayoutProps {
+  children: ReactNode;
+  logo?: ReactNode;
+  title?: string;
+  headerExtra?: ReactNode;
+}
+
+function toNavItems(items: RouteItem[]): object[] {
+  return items.map(item => ({
+    itemKey: item.itemKey,
+    text: item.text,
+    icon: item.icon,
+    items: item.children ? toNavItems(item.children) : undefined,
+  }));
+}
+
+export function SideLayout({
+  children,
+  logo,
+  title = 'ModSemi',
+  headerExtra,
+}: SideLayoutProps) {
+  const navigate = useNavigate();
+  const { firstLevelMenus, selectedKeys, openKeys, breadcrumbs } = useMenuData();
+  const { fixedHeader, showBreadcrumb } = useLayoutStore();
+
+  const navItems = toNavItems(firstLevelMenus);
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider
+        style={{
+          backgroundColor: 'var(--semi-color-bg-1)',
+          borderRight: '1px solid var(--semi-color-border)',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '16px 20px',
+            borderBottom: '1px solid var(--semi-color-border)',
+          }}
+        >
+          {logo}
+          <span
+            style={{
+              fontWeight: 700,
+              fontSize: 16,
+              color: 'var(--semi-color-text-0)',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {title}
+          </span>
+        </div>
+        <Nav
+          items={navItems}
+          selectedKeys={selectedKeys}
+          defaultOpenKeys={openKeys}
+          style={{ height: 'calc(100vh - 57px)', overflowY: 'auto' }}
+          onSelect={({ itemKey }) => navigate(itemKey as string)}
+        />
+      </Sider>
+
+      <Layout>
+        <Header
+          style={{
+            backgroundColor: 'var(--semi-color-bg-1)',
+            borderBottom: '1px solid var(--semi-color-border)',
+            padding: '0 24px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            height: 56,
+            position: fixedHeader ? 'sticky' : 'relative',
+            top: 0,
+            zIndex: 100,
+          }}
+        >
+          {headerExtra}
+        </Header>
+
+        <Content
+          style={{
+            padding: 24,
+            backgroundColor: 'var(--semi-color-bg-0)',
+            minHeight: 'calc(100vh - 56px)',
+          }}
+        >
+          <LayoutBreadcrumb breadcrumbs={breadcrumbs} show={showBreadcrumb} />
+          {children}
+        </Content>
+      </Layout>
+    </Layout>
+  );
+}