create-modsemi 0.1.0

package/template/src/pages/Welcome/index.less

@@ -0,0 +1,351 @@
+// ============================================================
+// Welcome Page Styles
+// 歡迎頁 — 企業指揮中心美學
+// ============================================================
+
+@keyframes float-up {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+
+@keyframes pulse-ring {
+  0% { transform: scale(0.92); opacity: 0.6; }
+  50% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(0.92); opacity: 0.6; }
+}
+
+@keyframes grid-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.welcome-page {
+  position: relative;
+  min-height: calc(100vh - 56px);
+  overflow: hidden;
+  background-color: var(--semi-color-bg-0);
+
+  // 背景網格紋理
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(var(--semi-color-border) 1px, transparent 1px),
+      linear-gradient(90deg, var(--semi-color-border) 1px, transparent 1px);
+    background-size: 40px 40px;
+    opacity: 0.4;
+    pointer-events: none;
+    animation: grid-fade 1s ease forwards;
+  }
+
+  // 頂部光暈
+  &::after {
+    content: '';
+    position: absolute;
+    top: -200px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 800px;
+    height: 500px;
+    border-radius: 50%;
+    background: radial-gradient(
+      ellipse at center,
+      color-mix(in srgb, var(--semi-color-primary) 12%, transparent) 0%,
+      transparent 70%
+    );
+    pointer-events: none;
+  }
+}
+
+.welcome-inner {
+  position: relative;
+  z-index: 1;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 72px 32px 64px;
+}
+
+// ── HERO ──────────────────────────────────────────────
+.hero {
+  text-align: center;
+  margin-bottom: 80px;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 14px;
+  border-radius: 20px;
+  border: 1px solid var(--semi-color-primary-light-hover);
+  background: color-mix(in srgb, var(--semi-color-primary) 8%, transparent);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--semi-color-primary);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 28px;
+  animation: float-up 0.6s ease both;
+
+  .hero-badge-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--semi-color-primary);
+    animation: pulse-ring 2s ease-in-out infinite;
+  }
+}
+
+.hero-title {
+  font-size: clamp(40px, 6vw, 64px);
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  color: var(--semi-color-text-0);
+  margin: 0 0 8px;
+  animation: float-up 0.6s ease 0.1s both;
+
+  .hero-title-brand {
+    background: linear-gradient(
+      130deg,
+      var(--semi-color-primary) 0%,
+      #7b93ff 50%,
+      var(--semi-color-primary) 100%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: shimmer 4s linear infinite;
+  }
+}
+
+.hero-subtitle {
+  font-size: 17px;
+  color: var(--semi-color-text-2);
+  line-height: 1.7;
+  max-width: 520px;
+  margin: 20px auto 40px;
+  animation: float-up 0.6s ease 0.2s both;
+}
+
+.hero-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  animation: float-up 0.6s ease 0.3s both;
+}
+
+// ── STATS ─────────────────────────────────────────────
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 64px;
+  animation: float-up 0.6s ease 0.35s both;
+
+  @media (max-width: 720px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.stat-card {
+  padding: 24px 20px;
+  border-radius: 12px;
+  border: 1px solid var(--semi-color-border);
+  background: var(--semi-color-bg-1);
+  text-align: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 32px color-mix(in srgb, var(--semi-color-primary) 15%, transparent);
+    border-color: var(--semi-color-primary-light-hover);
+  }
+
+  .stat-value {
+    font-size: 32px;
+    font-weight: 800;
+    color: var(--semi-color-primary);
+    line-height: 1;
+    margin-bottom: 6px;
+    letter-spacing: -0.02em;
+  }
+
+  .stat-label {
+    font-size: 12px;
+    color: var(--semi-color-text-2);
+    font-weight: 500;
+    letter-spacing: 0.04em;
+  }
+}
+
+// ── FEATURE SECTION ───────────────────────────────────
+.section-header {
+  margin-bottom: 32px;
+  animation: float-up 0.6s ease 0.4s both;
+
+  .section-label {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--semi-color-primary);
+    margin-bottom: 8px;
+  }
+
+  .section-title {
+    font-size: 26px;
+    font-weight: 700;
+    color: var(--semi-color-text-0);
+    margin: 0 0 8px;
+    letter-spacing: -0.02em;
+  }
+
+  .section-desc {
+    font-size: 14px;
+    color: var(--semi-color-text-2);
+  }
+}
+
+.layout-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin-bottom: 64px;
+  animation: float-up 0.6s ease 0.45s both;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.layout-card {
+  position: relative;
+  border-radius: 14px;
+  border: 1px solid var(--semi-color-border);
+  background: var(--semi-color-bg-1);
+  padding: 24px;
+  overflow: hidden;
+  cursor: default;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px color-mix(in srgb, var(--semi-color-primary) 14%, transparent);
+    border-color: var(--semi-color-primary-light-hover);
+
+    .layout-card-bg {
+      opacity: 1;
+    }
+  }
+
+  // 角落裝飾光暈
+  .layout-card-bg {
+    position: absolute;
+    top: -40px;
+    right: -40px;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      color-mix(in srgb, var(--semi-color-primary) 18%, transparent) 0%,
+      transparent 70%
+    );
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+  }
+
+  .layout-card-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--semi-color-primary) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--semi-color-primary) 25%, transparent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    margin-bottom: 16px;
+    color: var(--semi-color-primary);
+  }
+
+  .layout-card-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--semi-color-text-0);
+    margin-bottom: 8px;
+  }
+
+  .layout-card-desc {
+    font-size: 13px;
+    color: var(--semi-color-text-2);
+    line-height: 1.6;
+  }
+
+  .layout-card-tag {
+    display: inline-block;
+    margin-top: 14px;
+    padding: 3px 10px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    background: color-mix(in srgb, var(--semi-color-primary) 10%, transparent);
+    color: var(--semi-color-primary);
+    border: 1px solid color-mix(in srgb, var(--semi-color-primary) 20%, transparent);
+  }
+}
+
+// ── TECH STACK ────────────────────────────────────────
+.tech-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-top: 40px;
+  border-top: 1px solid var(--semi-color-border);
+  animation: float-up 0.6s ease 0.5s both;
+
+  .tech-label {
+    font-size: 12px;
+    color: var(--semi-color-text-3);
+    font-weight: 500;
+    margin-right: 4px;
+  }
+
+  .tech-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--semi-color-border);
+    background: var(--semi-color-bg-1);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--semi-color-text-1);
+    transition: border-color 0.2s ease, background 0.2s ease;
+
+    &:hover {
+      border-color: var(--semi-color-primary-light-hover);
+      background: color-mix(in srgb, var(--semi-color-primary) 6%, transparent);
+      color: var(--semi-color-primary);
+    }
+  }
+}

package/template/src/pages/Welcome/index.tsx

@@ -0,0 +1,164 @@
+import {
+  IconCode,
+  IconColumnsStroked,
+  IconDoubleChevronRight,
+  IconGridView,
+  IconSidebar,
+  IconTerminal,
+  IconVersionStroked,
+} from '@douyinfe/semi-icons';
+import { Button, Typography } from '@douyinfe/semi-ui-19';
+import { useNavigate } from '@modern-js/runtime/router';
+import { useLayoutStore } from '../../store/layoutStore';
+import './index.less';
+
+const { Text } = Typography;
+
+const STATS = [
+  { value: '4', label: '佈局模式' },
+  { value: '∞', label: '主題可配置' },
+  { value: '100%', label: 'TypeScript' },
+  { value: 'v3', label: 'Modern.js' },
+];
+
+const LAYOUTS = [
+  {
+    icon: <IconSidebar />,
+    title: 'Side 側邊導航',
+    desc: '左側固定選單，子項可巢狀展開，適合功能豐富的後台系統。',
+    tag: '最常用',
+    mode: 'side',
+  },
+  {
+    icon: <IconColumnsStroked />,
+    title: 'Top 頂部導航',
+    desc: '水平頂欄選單，子項以 Dropdown 展開，適合寬螢幕內容型頁面。',
+    tag: '寬螢幕',
+    mode: 'top',
+  },
+  {
+    icon: <IconGridView />,
+    title: 'Mix 混合導航',
+    desc: '頂部顯示一級模組、左側顯示二級子項，大型 SaaS 後台首選。',
+    tag: '企業推薦',
+    mode: 'mix',
+  },
+  {
+    icon: <IconVersionStroked />,
+    title: 'Double 雙欄導航',
+    desc: '極窄圖示欄 + 文字選單欄，容納超多模組，兼顧空間與導航效率。',
+    tag: '預設模式',
+    mode: 'double',
+  },
+] as const;
+
+const TECH = [
+  { label: 'Modern.js', icon: '⚡' },
+  { label: 'Semi Design', icon: '🎨' },
+  { label: 'Zustand', icon: '🐻' },
+  { label: 'TypeScript', icon: '🔷' },
+  { label: 'Less', icon: '💅' },
+];
+
+export default function Welcome() {
+  const navigate = useNavigate();
+  const { setLayoutMode } = useLayoutStore();
+
+  const handleSwitchLayout = (mode: (typeof LAYOUTS)[number]['mode']) => {
+    setLayoutMode(mode);
+    navigate('/dashboard/workplace');
+  };
+
+  return (
+    <div className="welcome-page">
+      <div className="welcome-inner">
+        {/* Hero */}
+        <section className="hero">
+          <div className="hero-badge">
+            <span className="hero-badge-dot" />
+            ModSemi Framework · v0.1.0
+          </div>
+
+          <h1 className="hero-title">
+            現代企業級
+            <br />
+            <span className="hero-title-brand">中後台框架</span>
+          </h1>
+
+          <p className="hero-subtitle">
+            基於 Modern.js + Semi Design
+            構建，提供四種佈局模式、全域主題切換與配置化導航，讓你專注於業務，而非重複搭建基礎設施。
+          </p>
+
+          <div className="hero-actions">
+            <Button
+              theme="solid"
+              type="primary"
+              size="large"
+              icon={<IconDoubleChevronRight />}
+              iconPosition="right"
+              onClick={() => navigate('/dashboard/workplace')}
+            >
+              開始使用
+            </Button>
+            <Button
+              theme="borderless"
+              type="tertiary"
+              size="large"
+              icon={<IconCode />}
+            >
+              查看原始碼
+            </Button>
+          </div>
+        </section>
+
+        {/* Stats */}
+        <div className="stats-row">
+          {STATS.map(s => (
+            <div key={s.label} className="stat-card">
+              <div className="stat-value">{s.value}</div>
+              <div className="stat-label">{s.label}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* Layout Modes */}
+        <div className="section-header">
+          <div className="section-label">核心能力</div>
+          <div className="section-title">四種佈局模式，即選即用</div>
+          <div className="section-desc">
+            點擊任意卡片切換至對應佈局，或透過右下角齒輪按鈕進行設定。
+          </div>
+        </div>
+
+        <div className="layout-grid">
+          {LAYOUTS.map(item => (
+            <button
+              key={item.mode}
+              type="button"
+              className="layout-card"
+              onClick={() => handleSwitchLayout(item.mode)}
+              style={{ textAlign: 'left', width: '100%' }}
+            >
+              <div className="layout-card-bg" />
+              <div className="layout-card-icon">{item.icon}</div>
+              <div className="layout-card-title">{item.title}</div>
+              <div className="layout-card-desc">{item.desc}</div>
+              <span className="layout-card-tag">{item.tag}</span>
+            </button>
+          ))}
+        </div>
+
+        {/* Tech Stack */}
+        <div className="tech-row">
+          <span className="tech-label">技術棧</span>
+          {TECH.map(t => (
+            <span key={t.label} className="tech-badge">
+              {t.icon} {t.label}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/routes/$.tsx

@@ -0,0 +1,14 @@
+/**
+ * Catch-all 路由（Modern.js 通配符檔案）
+ *
+ * 任何未被其他 page.tsx 匹配到的路徑都會落到這裡。
+ * 實際渲染哪個元件由 src/config/global.tsx 的 errorPages.notFound 決定。
+ */
+
+import { globalConfig } from '../config/global';
+
+const NotFound = globalConfig.errorPages.notFound;
+
+export default function NotFoundRoute() {
+  return <NotFound />;
+}

package/template/src/routes/dashboard/workplace/page.tsx

@@ -0,0 +1,3 @@
+import Workplace from '../../../pages/Dashboard/Workplace';
+
+export default Workplace;

package/template/src/routes/layout.tsx

@@ -0,0 +1,53 @@
+import { Navigate, Outlet, useLocation } from '@modern-js/runtime/router';
+import { ProLayout } from '../layouts/ProLayout';
+import { SettingDrawer } from '../layouts/SettingDrawer';
+import { useAuthStore } from '../store/authStore';
+import '../styles/global.less';
+
+export default function Layout() {
+  const location = useLocation();
+  const { isLoggedIn } = useAuthStore();
+  const isLoginPage = location.pathname === '/login';
+
+  // 未登入且不在登入頁 → 直接宣告式重導，無 useEffect 競爭問題
+  if (!isLoggedIn && !isLoginPage) {
+    return <Navigate to="/login" replace />;
+  }
+
+  // 登入頁不套 ProLayout
+  if (isLoginPage) {
+    return <Outlet />;
+  }
+
+  const logo = (
+    <div
+      style={{
+        width: 28,
+        height: 28,
+        borderRadius: 8,
+        background: 'linear-gradient(135deg, #4f7dff 0%, #7b52ff 100%)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: '#fff',
+        fontWeight: 800,
+        fontSize: 14,
+        flexShrink: 0,
+        boxShadow: '0 2px 8px rgba(79, 125, 255, 0.4)',
+        fontFamily: "'Outfit', sans-serif",
+        letterSpacing: '-0.01em',
+      }}
+    >
+      M
+    </div>
+  );
+
+  return (
+    <>
+      <ProLayout title="ModSemi" logo={logo}>
+        <Outlet />
+      </ProLayout>
+      <SettingDrawer />
+    </>
+  );
+}

package/template/src/routes/login/page.tsx

@@ -0,0 +1,3 @@
+import LoginPage from '../../pages/Login';
+
+export default LoginPage;

package/template/src/routes/page.tsx

@@ -0,0 +1,3 @@
+import Welcome from '../pages/Welcome';
+
+export default Welcome;

package/template/src/store/authStore.ts

@@ -0,0 +1,61 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface CurrentUser {
+  name: string;
+  avatar?: string;
+  email?: string;
+  roles: string[];
+}
+
+export interface AuthState {
+  currentUser: CurrentUser | null;
+  isLoggedIn: boolean;
+}
+
+export interface AuthActions {
+  login: (username: string, password: string) => boolean;
+  logout: () => void;
+}
+
+const MOCK_USERS = [
+  {
+    username: 'admin',
+    password: 'admin.modsemi',
+    user: {
+      name: 'Admin',
+      email: 'admin@modsemi.dev',
+      roles: ['admin'] as string[],
+      avatar: undefined as string | undefined,
+    },
+  },
+];
+
+export const useAuthStore = create<AuthState & AuthActions>()(
+  persist(
+    set => ({
+      currentUser: null,
+      isLoggedIn: false,
+
+      login: (username: string, password: string) => {
+        const found = MOCK_USERS.find(
+          u => u.username === username && u.password === password,
+        );
+        if (found) {
+          set({ currentUser: found.user, isLoggedIn: true });
+          return true;
+        }
+        return false;
+      },
+
+      logout: () => set({ currentUser: null, isLoggedIn: false }),
+    }),
+    {
+      name: 'modsemi-auth',
+      partialize: state => ({
+        currentUser: state.currentUser,
+        isLoggedIn: state.isLoggedIn,
+      }),
+    },
+  ),
+);