create-modsemi 0.1.0

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

@@ -0,0 +1,491 @@
+// ============================================================
+// Login Page — Airy Enterprise Split Layout
+// 登入頁：左側漸層品牌面板 + 右側乾淨表單
+// ============================================================
+
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
+
+// ── 動畫定義 ──────────────────────────────────────────────
+
+@keyframes lp-blob-float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33%       { transform: translate(24px, -18px) scale(1.04); }
+  66%       { transform: translate(-16px, 12px) scale(0.97); }
+}
+
+@keyframes lp-fade-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes lp-slide-right {
+  from { opacity: 0; transform: translateX(28px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes lp-shimmer {
+  0%   { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+
+@keyframes lp-pulse-dot {
+  0%, 100% { opacity: 0.6; transform: scale(0.9); }
+  50%       { opacity: 1;   transform: scale(1.1); }
+}
+
+// ── 根容器 ────────────────────────────────────────────────
+
+.lp-root {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
+  overflow: hidden;
+  z-index: 9999;
+}
+
+// ── 左側面板 ──────────────────────────────────────────────
+
+.lp-left {
+  position: relative;
+  flex: 0 0 52%;
+  overflow: hidden;
+  background:
+    linear-gradient(145deg,
+      #dde8ff 0%,
+      #e6d9ff 35%,
+      #d8eeff 65%,
+      #e0f4ff 100%
+    );
+  display: flex;
+  flex-direction: column;
+
+  @media (max-width: 900px) {
+    display: none;
+  }
+}
+
+// 浮動裝飾圓球
+.lp-blob {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  filter: blur(72px);
+  opacity: 0.75;
+
+  &.lp-blob-1 {
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, rgba(140, 170, 255, 0.7) 0%, transparent 65%);
+    top: -160px;
+    left: -120px;
+    animation: lp-blob-float 9s ease-in-out infinite;
+  }
+
+  &.lp-blob-2 {
+    width: 420px;
+    height: 420px;
+    background: radial-gradient(circle, rgba(180, 145, 255, 0.6) 0%, transparent 65%);
+    bottom: -80px;
+    left: 60px;
+    animation: lp-blob-float 12s ease-in-out 3s infinite reverse;
+  }
+
+  &.lp-blob-3 {
+    width: 360px;
+    height: 360px;
+    background: radial-gradient(circle, rgba(120, 210, 255, 0.5) 0%, transparent 65%);
+    top: 180px;
+    right: -80px;
+    animation: lp-blob-float 15s ease-in-out 6s infinite;
+  }
+}
+
+// 細格紋紋理
+.lp-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(100, 130, 220, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(100, 130, 220, 0.1) 1px, transparent 1px);
+  background-size: 36px 36px;
+  pointer-events: none;
+}
+
+// 左側內容區
+.lp-left-inner {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 56px;
+  gap: 40px;
+}
+
+// 品牌識別
+.lp-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  animation: lp-fade-up 0.6s ease both;
+}
+
+.lp-brand-mark {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #4f7dff 0%, #7b52ff 100%);
+  color: #fff;
+  font-weight: 800;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(79, 125, 255, 0.4);
+  flex-shrink: 0;
+}
+
+.lp-brand-name {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a2340;
+  letter-spacing: -0.01em;
+}
+
+
+// 主標語
+.lp-headline {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  animation: lp-fade-up 0.6s ease 0.15s both;
+}
+
+.lp-headline-title {
+  font-size: clamp(36px, 3.5vw, 52px);
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+  color: #1a2340;
+  margin: 0 0 20px;
+}
+
+.lp-headline-accent {
+  background: linear-gradient(
+    120deg,
+    #4f7dff 0%,
+    #9b6dff 40%,
+    #4fb8ff 80%,
+    #4f7dff 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: lp-shimmer 5s linear infinite;
+}
+
+.lp-headline-sub {
+  font-size: 15px;
+  color: #4a5578;
+  line-height: 1.7;
+  font-weight: 400;
+  margin: 0;
+}
+
+
+// 左側底部版權
+.lp-left-footer {
+  position: relative;
+  z-index: 1;
+  padding: 24px 56px;
+  font-size: 11px;
+  color: #6b789a;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+// ── 右側表單面板 ───────────────────────────────────────────
+
+.lp-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  position: relative;
+  overflow: hidden;
+
+  // 極淡的點陣紋理
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle, rgba(100, 130, 200, 0.08) 1px, transparent 1px);
+    background-size: 24px 24px;
+    pointer-events: none;
+  }
+}
+
+// 表單包裹容器
+.lp-form-wrap {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 400px;
+  padding: 0 40px;
+  animation: lp-slide-right 0.6s ease 0.2s both;
+
+  @media (max-width: 900px) {
+    max-width: 440px;
+    padding: 32px 24px;
+  }
+}
+
+// 表單頂部 Logo
+.lp-form-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 32px;
+}
+
+.lp-form-logo-mark {
+  width: 52px;
+  height: 52px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #4f7dff 0%, #7b52ff 100%);
+  color: #fff;
+  font-weight: 900;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    0 8px 32px rgba(79, 125, 255, 0.35),
+    0 2px 8px rgba(79, 125, 255, 0.2);
+  font-family: 'Outfit', sans-serif;
+  letter-spacing: -0.02em;
+}
+
+// 標題與副標題
+.lp-form-title {
+  font-size: 28px;
+  font-weight: 800;
+  color: #0f1729;
+  text-align: center;
+  margin: 0 0 8px;
+  letter-spacing: -0.03em;
+}
+
+.lp-form-subtitle {
+  font-size: 14px;
+  color: #7a85a0;
+  text-align: center;
+  margin: 0 0 32px;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+// ── 表單欄位 ──────────────────────────────────────────────
+
+.lp-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  margin-bottom: 24px;
+}
+
+.lp-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.lp-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.lp-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #2d3a5a;
+  letter-spacing: 0.01em;
+}
+
+.lp-forgot {
+  all: unset;
+  font-size: 12px;
+  color: #4f7dff;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 0.75;
+    text-decoration: underline;
+  }
+}
+
+// Semi Input 樣式覆蓋（強制淺色，不受主題影響）
+.lp-input {
+  &.semi-input-wrapper {
+    border-radius: 10px !important;
+    border-color: #e0e6f0 !important;
+    background: #f8faff !important;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+
+    &:hover {
+      border-color: #b8c8f0 !important;
+    }
+
+    &.semi-input-wrapper-focus {
+      border-color: #4f7dff !important;
+      background: #fff !important;
+      box-shadow: 0 0 0 3px rgba(79, 125, 255, 0.12) !important;
+    }
+
+    // 強制文字顏色，避免暗色模式下白字不可見
+    .semi-input {
+      color: #0f1729 !important;
+      caret-color: #4f7dff !important;
+
+      &::placeholder {
+        color: #a8b2c8 !important;
+        opacity: 1 !important;
+      }
+    }
+
+    // 前綴 / 後綴 icon 顏色
+    .semi-input-prefix,
+    .semi-input-suffix {
+      color: #8a96b0 !important;
+    }
+  }
+}
+
+// 密碼顯示/隱藏按鈕
+.lp-eye-btn {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  color: #8a96b0;
+  cursor: pointer;
+  padding: 2px;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: #4f7dff;
+  }
+}
+
+// ── 登入按鈕 ──────────────────────────────────────────────
+
+.lp-submit-btn {
+  &.semi-button {
+    border-radius: 10px !important;
+    font-size: 15px !important;
+    font-weight: 700 !important;
+    height: 48px !important;
+    background: linear-gradient(135deg, #4f7dff 0%, #7b52ff 100%) !important;
+    border: none !important;
+    box-shadow: 0 6px 24px rgba(79, 125, 255, 0.35) !important;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
+    letter-spacing: 0.02em !important;
+
+    &:hover:not(:disabled) {
+      transform: translateY(-1px) !important;
+      box-shadow: 0 8px 28px rgba(79, 125, 255, 0.45) !important;
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(0) !important;
+    }
+  }
+}
+
+// ── 分隔線 ────────────────────────────────────────────────
+
+.lp-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 24px 0;
+  color: #b0baca;
+  font-size: 12px;
+  font-weight: 500;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #eaeff8;
+  }
+
+  span {
+    white-space: nowrap;
+    padding: 0 4px;
+  }
+}
+
+// ── Google 登入按鈕 ────────────────────────────────────────
+
+.lp-google-btn {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  height: 46px;
+  border-radius: 10px;
+  border: 1.5px solid #e0e6f0;
+  background: #fff;
+  color: #2d3a5a;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+  box-sizing: border-box;
+  letter-spacing: 0.01em;
+
+  &:hover {
+    border-color: #b8c8f0;
+    background: #f8faff;
+    box-shadow: 0 2px 12px rgba(79, 125, 255, 0.1);
+  }
+
+  &:active {
+    background: #f0f5ff;
+  }
+}
+
+// ── 測試帳號提示 ──────────────────────────────────────────
+
+.lp-hint {
+  margin: 20px 0 0;
+  text-align: center;
+  font-size: 12px;
+  color: #a0aac0;
+  font-weight: 400;
+  line-height: 1.6;
+
+  code {
+    display: inline-block;
+    padding: 1px 6px;
+    border-radius: 4px;
+    background: #f0f4ff;
+    border: 1px solid #dde8ff;
+    color: #4f7dff;
+    font-size: 11px;
+    font-family: 'Outfit', monospace;
+    font-weight: 600;
+    margin: 0 2px;
+  }
+}

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

@@ -0,0 +1,204 @@
+import {
+  IconEyeClosedSolid,
+  IconEyeOpened,
+  IconLock,
+  IconUserStroked,
+} from '@douyinfe/semi-icons';
+import { Button, Input, Toast } from '@douyinfe/semi-ui-19';
+import { useNavigate } from '@modern-js/runtime/router';
+import { useEffect, useState } from 'react';
+import { useAuthStore } from '../../store/authStore';
+import './index.less';
+
+
+function GoogleIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        fill="#4285F4"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      />
+    </svg>
+  );
+}
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const { login } = useAuthStore();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPwd, setShowPwd] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async () => {
+    if (!username.trim() || !password.trim()) {
+      Toast.warning({ content: '請填寫帳號與密碼', duration: 2 });
+      return;
+    }
+    setLoading(true);
+    await new Promise(r => setTimeout(r, 700));
+    const ok = login(username.trim(), password);
+    setLoading(false);
+    if (ok) {
+      Toast.success({ content: '登入成功，歡迎回來！', duration: 2 });
+      navigate('/', { replace: true });
+    } else {
+      Toast.error({ content: '帳號或密碼錯誤，請確認後重試', duration: 3 });
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleLogin();
+  };
+
+  useEffect(() => {
+    document.title = '登入';
+  }, []);
+
+  return (
+    <div className="lp-root">
+      {/* ── 左側裝飾面板 ── */}
+      <div className="lp-left" aria-hidden="true">
+        <div className="lp-blob lp-blob-1" />
+        <div className="lp-blob lp-blob-2" />
+        <div className="lp-blob lp-blob-3" />
+        <div className="lp-grid" />
+
+        <div className="lp-left-inner">
+          {/* 品牌識別 */}
+          <div className="lp-brand">
+            <div className="lp-brand-mark">M</div>
+            <span className="lp-brand-name">ModSemi</span>
+          </div>
+
+          {/* 主標語 */}
+          <div className="lp-headline">
+            <h1 className="lp-headline-title">
+              打造高效
+              <br />
+              <span className="lp-headline-accent">企業中後台</span>
+              <br />
+              的現代框架
+            </h1>
+            <p className="lp-headline-sub">
+              Modern.js · Semi Design · Zustand
+              <br />
+              配置驅動，開箱即用，四種佈局隨心切換。
+            </p>
+          </div>
+
+        </div>
+
+        {/* 底部版權 */}
+        <div className="lp-left-footer">
+          © 2026 ModSemi · Enterprise Edition
+        </div>
+      </div>
+
+      {/* ── 右側登入面板 ── */}
+      <div className="lp-right">
+        <div className="lp-form-wrap">
+          {/* Logo */}
+          <div className="lp-form-logo">
+            <div className="lp-form-logo-mark">M</div>
+          </div>
+
+          <h2 className="lp-form-title">歡迎回來</h2>
+          <p className="lp-form-subtitle">請登入您的帳號以繼續使用系統</p>
+
+          {/* 表單欄位 */}
+          <div className="lp-fields" onKeyDown={handleKeyDown}>
+            <div className="lp-field-group">
+              <label className="lp-label" htmlFor="lp-username">
+                帳號
+              </label>
+              <Input
+                id="lp-username"
+                size="large"
+                prefix={<IconUserStroked />}
+                placeholder="輸入您的帳號"
+                value={username}
+                onChange={v => setUsername(v)}
+                autoComplete="username"
+                className="lp-input"
+              />
+            </div>
+
+            <div className="lp-field-group">
+              <div className="lp-label-row">
+                <label className="lp-label" htmlFor="lp-password">
+                  密碼
+                </label>
+                <button type="button" className="lp-forgot">
+                  忘記密碼？
+                </button>
+              </div>
+              <Input
+                id="lp-password"
+                size="large"
+                prefix={<IconLock />}
+                suffix={
+                  <button
+                    type="button"
+                    className="lp-eye-btn"
+                    onClick={() => setShowPwd(v => !v)}
+                    aria-label={showPwd ? '隱藏密碼' : '顯示密碼'}
+                  >
+                    {showPwd ? <IconEyeClosedSolid /> : <IconEyeOpened />}
+                  </button>
+                }
+                type={showPwd ? 'text' : 'password'}
+                placeholder="輸入您的密碼"
+                value={password}
+                onChange={v => setPassword(v)}
+                autoComplete="current-password"
+                className="lp-input"
+              />
+            </div>
+          </div>
+
+          {/* 登入按鈕 */}
+          <Button
+            theme="solid"
+            type="primary"
+            size="large"
+            block
+            loading={loading}
+            onClick={handleLogin}
+            className="lp-submit-btn"
+          >
+            {loading ? '登入中...' : '登入'}
+          </Button>
+
+          {/* 分隔線 */}
+          <div className="lp-divider">
+            <span>或使用以下方式登入</span>
+          </div>
+
+          {/* Google 登入 */}
+          <button type="button" className="lp-google-btn">
+            <GoogleIcon />
+            <span>使用 Google 帳號登入</span>
+          </button>
+
+          {/* 提示文字 */}
+          <p className="lp-hint">
+            測試帳號：<code>admin</code> / <code>admin.modsemi</code>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}