create-secra 0.1.7 → 1.0.1

package/antd-adapter-template/src/features/auth/auth-types.ts

@@ -0,0 +1,29 @@
+export interface LoginPayload {
+  username: string;
+  password: string;
+}
+
+export interface AuthSession {
+  token: string;
+  username: string;
+  displayName: string;
+  permissions: string[];
+  loginAt: string;
+}
+
+export interface DynamicRouteManifestItem {
+  code: string;
+  path: string;
+  title: string;
+  component: string;
+  requiresAuth: boolean;
+}
+
+export interface AuthState {
+  ready: boolean;
+  pending: boolean;
+  session: AuthSession | null;
+  permissions: string[];
+  isAuthenticated: boolean;
+}
+

package/antd-adapter-template/src/features/auth/authorization.ts

@@ -0,0 +1,46 @@
+import type { RouteAuthorizationOptions } from "@vlian/router";
+import { authStore } from "@/features/auth/auth-store";
+import type { AppRouteExtra, AppRouteMeta } from "@/app/routes/types";
+
+const resolvePermissionCode = (auth: unknown): string | null => {
+  if (!auth || typeof auth !== "object") {
+    return null;
+  }
+
+  const permissionCode = (auth as { permissionCode?: unknown }).permissionCode;
+  return typeof permissionCode === "string" ? permissionCode : null;
+};
+
+const isRequiredAuth = (auth: unknown) => {
+  if (typeof auth === "boolean") {
+    return auth;
+  }
+
+  if (auth && typeof auth === "object") {
+    const required = (auth as { required?: unknown }).required;
+    return required !== false;
+  }
+
+  return false;
+};
+
+export const authorization: RouteAuthorizationOptions<
+  AppRouteMeta,
+  AppRouteExtra
+> = {
+  resolve: ({ auth }) => {
+    const snapshot = authStore.getSnapshot();
+
+    if (isRequiredAuth(auth) && !snapshot.isAuthenticated) {
+      return false;
+    }
+
+    const permissionCode = resolvePermissionCode(auth);
+    if (!permissionCode) {
+      return true;
+    }
+
+    return snapshot.permissions.includes(permissionCode);
+  },
+};
+

package/antd-adapter-template/src/features/auth/use-auth.ts

@@ -0,0 +1,10 @@
+import { useSyncExternalStore } from "react";
+import { authStore } from "@/features/auth/auth-store";
+
+export const useAuth = () =>
+  useSyncExternalStore(
+    authStore.subscribe,
+    authStore.getSnapshot,
+    authStore.getSnapshot,
+  );
+

package/antd-adapter-template/src/main.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App as AntdApp, ConfigProvider } from "antd";
+import { kernelStartApp, type KernelRenderContext } from "@vlian/framework/kernel";
+import { LogLevel } from "@vlian/logger";
+import { App } from "@/app/App";
+import { authStore } from "@/features/auth/auth-store";
+import { APP_INSTANCE_ID } from "@/shared/kernel/app-kernel";
+import "@/styles/global.css";
+import "antd/dist/reset.css";
+
+const container = document.getElementById("root");
+
+if (!("React" in globalThis)) {
+  // Compatibility shim for @vlian/router 0.1.0, whose published bundle
+  // still emits React.createElement in route shell helpers.
+  (
+    globalThis as typeof globalThis & {
+      React?: typeof React;
+    }
+  ).React = React;
+}
+
+if (!container) {
+  throw new Error("Root container #root was not found.");
+}
+
+const root = createRoot(container);
+
+const startApp = async () => {
+  await kernelStartApp(
+    {
+      config: {
+        logger: {
+          level: import.meta.env.PROD ? LogLevel.INFO : LogLevel.DEBUG,
+        },
+        cache: {
+          storageOptions: {
+            type: "local",
+            prefix: "secra-antd-template",
+            defaultExpire: 7 * 24 * 60 * 60 * 1000,
+          },
+        },
+      },
+      hooks: {
+        initialize: async () => {
+          await authStore.bootstrap();
+        },
+      },
+      render: (_context: KernelRenderContext) => {
+        root.render(
+          <StrictMode>
+            <ConfigProvider
+              theme={{
+                token: {
+                  colorPrimary: "#155eef",
+                  colorSuccess: "#157f3b",
+                  colorWarning: "#c87518",
+                  colorError: "#c7364f",
+                  borderRadius: 18,
+                  fontFamily:
+                    '"Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
+                },
+              }}
+            >
+              <AntdApp>
+                <App />
+              </AntdApp>
+            </ConfigProvider>
+          </StrictMode>,
+        );
+      },
+    },
+    APP_INSTANCE_ID,
+  );
+};
+
+void startApp();

package/antd-adapter-template/src/pages/dashboard/DashboardPage.tsx

@@ -0,0 +1,105 @@
+import {
+  BarChartOutlined,
+  CheckCircleOutlined,
+  DatabaseOutlined,
+  RocketOutlined,
+} from "@ant-design/icons";
+import { Alert, Card, Col, Descriptions, Row, Space, Statistic, Tag, Typography } from "antd";
+import { useAuth } from "@/features/auth/use-auth";
+
+const { Paragraph, Title, Text } = Typography;
+
+const dashboardMetrics = [
+  {
+    title: "今日请求数",
+    value: 128,
+    prefix: <BarChartOutlined />,
+  },
+  {
+    title: "路由注入耗时",
+    value: 188,
+    suffix: "ms",
+    prefix: <RocketOutlined />,
+  },
+  {
+    title: "可用 mock 资源",
+    value: 4,
+    prefix: <DatabaseOutlined />,
+  },
+  {
+    title: "服务状态",
+    value: 100,
+    suffix: "%",
+    prefix: <CheckCircleOutlined />,
+  },
+];
+
+export default function DashboardPage() {
+  const authState = useAuth();
+
+  return (
+    <Space className="page-stack" direction="vertical" size={24}>
+      <Card className="page-hero" variant="borderless">
+        <Tag color="processing">动态路由页面</Tag>
+        <Title level={2}>仪表盘</Title>
+        <Paragraph>
+          这个页面不是静态注册的，而是在访问 <Text code>/dashboard</Text> 时通过
+          <Text code> @vlian/router </Text>
+          的动态加载器注入进来的。登录成功后才允许跳转进来。
+        </Paragraph>
+      </Card>
+
+      <Row gutter={[16, 16]}>
+        {dashboardMetrics.map((item) => (
+          <Col key={item.title} md={12} xl={6} xs={24}>
+            <Card className="surface-card" variant="borderless">
+              <Statistic
+                prefix={item.prefix}
+                suffix={item.suffix}
+                title={item.title}
+                value={item.value}
+              />
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      <Row gutter={[16, 16]}>
+        <Col lg={14} xs={24}>
+          <Card className="surface-card" title="当前会话" variant="borderless">
+            <Descriptions column={1} size="small">
+              <Descriptions.Item label="显示名称">
+                {authState.session?.displayName}
+              </Descriptions.Item>
+              <Descriptions.Item label="账号">
+                {authState.session?.username}
+              </Descriptions.Item>
+              <Descriptions.Item label="登录时间">
+                {authState.session?.loginAt}
+              </Descriptions.Item>
+              <Descriptions.Item label="权限">
+                <Space size={[8, 8]} wrap>
+                  {authState.permissions.map((permission) => (
+                    <Tag key={permission}>{permission}</Tag>
+                  ))}
+                </Space>
+              </Descriptions.Item>
+            </Descriptions>
+          </Card>
+        </Col>
+
+        <Col lg={10} xs={24}>
+          <Card className="surface-card" title="路由说明" variant="borderless">
+            <Alert
+              message="当前仪表盘使用动态路由"
+              description="`/dashboard` 对应的页面模块来自 mock 路由清单接口，接口由 @vlian/request 的 kv 适配器模拟。"
+              showIcon
+              type="info"
+            />
+          </Card>
+        </Col>
+      </Row>
+    </Space>
+  );
+}
+

package/antd-adapter-template/src/pages/errors/ForbiddenPage.tsx

@@ -0,0 +1,36 @@
+import { Button, Result, Space } from "antd";
+import { useNavigate } from "react-router-dom";
+
+export default function ForbiddenPage() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="center-page">
+      <Result
+        extra={
+          <Space>
+            <Button
+              onClick={() => {
+                void navigate("/");
+              }}
+            >
+              返回首页
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => {
+                void navigate("/permission-test");
+              }}
+            >
+              回到测试页
+            </Button>
+          </Space>
+        }
+        status="403"
+        subTitle="当前账号缺少访问该资源的权限，本次跳转由路由授权逻辑拦截。"
+        title="403"
+      />
+    </div>
+  );
+}
+

package/antd-adapter-template/src/pages/errors/NotFoundPage.tsx

@@ -0,0 +1,36 @@
+import { Button, Result, Space } from "antd";
+import { useNavigate } from "react-router-dom";
+
+export default function NotFoundPage() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="center-page">
+      <Result
+        extra={
+          <Space>
+            <Button
+              type="primary"
+              onClick={() => {
+                void navigate("/");
+              }}
+            >
+              返回首页
+            </Button>
+            <Button
+              onClick={() => {
+                void navigate("/dashboard");
+              }}
+            >
+              前往仪表盘
+            </Button>
+          </Space>
+        }
+        status="404"
+        subTitle="当前地址没有命中任何页面，你可以回到首页或尝试访问动态仪表盘路由。"
+        title="404"
+      />
+    </div>
+  );
+}
+

package/antd-adapter-template/src/pages/home/HomePage.tsx

@@ -0,0 +1,129 @@
+import {
+  ApartmentOutlined,
+  LockOutlined,
+  LoginOutlined,
+  ThunderboltOutlined,
+} from "@ant-design/icons";
+import { Button, Card, Col, Row, Space, Tag, Typography } from "antd";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@/features/auth/use-auth";
+import { getAppCache } from "@/shared/kernel/app-kernel";
+
+const { Paragraph, Text, Title } = Typography;
+
+const highlights = [
+  {
+    title: "登录页",
+    description: "使用 @vlian/request 的 kv 适配器模拟账号登录。",
+    icon: <LoginOutlined />,
+  },
+  {
+    title: "动态仪表盘",
+    description: "访问 /dashboard 时才注入路由，未登录会跳去登录页。",
+    icon: <ThunderboltOutlined />,
+  },
+  {
+    title: "权限测试",
+    description: "从测试页进入受限资源，触发 403 页面。",
+    icon: <LockOutlined />,
+  },
+  {
+    title: "独立模板",
+    description: "模板根目录就是一个可直接安装运行的 Vite 应用。",
+    icon: <ApartmentOutlined />,
+  },
+];
+
+export default function HomePage() {
+  const navigate = useNavigate();
+  const authState = useAuth();
+  const [lastLoginUser, setLastLoginUser] = useState<string>("暂无记录");
+
+  useEffect(() => {
+    let mounted = true;
+
+    const readCache = async () => {
+      const cache = getAppCache();
+
+      if (!cache) {
+        return;
+      }
+
+      const cachedUser = await cache.get<string>("last-login-user", {
+        defaultValue: "暂无记录",
+      });
+
+      if (mounted) {
+        setLastLoginUser(cachedUser || "暂无记录");
+      }
+    };
+
+    void readCache();
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  return (
+    <Space className="page-stack" direction="vertical" size={24}>
+      <Card className="page-hero" variant="borderless">
+        <Space direction="vertical" size={16}>
+          <Tag color="geekblue">React + TypeScript + Ant Design</Tag>
+          <Title level={2}>Secra Antd Adapter Template</Title>
+          <Paragraph>
+            这里演示了一个不依赖 monorepo 的独立项目结构，同时串起
+            <Text code>@vlian/router</Text>、
+            <Text code>@vlian/framework</Text>、
+            <Text code>@vlian/logger</Text>、
+            <Text code>@vlian/request</Text>、
+            <Text code>@vlian/utils</Text> 的基础用法。
+          </Paragraph>
+
+          <Space size="middle" wrap>
+            <Button
+              size="large"
+              type="primary"
+              onClick={() => {
+                void navigate("/dashboard");
+              }}
+            >
+              进入仪表盘
+            </Button>
+            <Button
+              size="large"
+              onClick={() => {
+                void navigate(authState.isAuthenticated ? "/permission-test" : "/login");
+              }}
+            >
+              去权限测试页
+            </Button>
+          </Space>
+
+          <Space size={[8, 8]} wrap>
+            <Tag color={authState.isAuthenticated ? "success" : "default"}>
+              当前状态：{authState.isAuthenticated ? "已登录" : "未登录"}
+            </Tag>
+            <Tag color="cyan">最近一次登录：{lastLoginUser}</Tag>
+          </Space>
+        </Space>
+      </Card>
+
+      <Row gutter={[16, 16]}>
+        {highlights.map((item) => (
+          <Col key={item.title} md={12} xl={6} xs={24}>
+            <Card className="surface-card" variant="borderless">
+              <Space direction="vertical" size={12}>
+                <div className="feature-icon">{item.icon}</div>
+                <Title level={4}>{item.title}</Title>
+                <Paragraph className="compact-text">{item.description}</Paragraph>
+              </Space>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+    </Space>
+  );
+}
+

package/antd-adapter-template/src/pages/login/LoginPage.tsx

@@ -0,0 +1,128 @@
+import { LoginOutlined, UserOutlined } from "@ant-design/icons";
+import { Alert, Button, Card, Form, Input, List, Space, Typography, message } from "antd";
+import { startTransition, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { authStore } from "@/features/auth/auth-store";
+import { useAuth } from "@/features/auth/use-auth";
+import type { LoginPayload } from "@/features/auth/auth-types";
+
+const { Paragraph, Text, Title } = Typography;
+
+const demoAccounts = [
+  "admin / admin123",
+  "editor / editor123",
+];
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const authState = useAuth();
+  const [form] = Form.useForm<LoginPayload>();
+  const [errorMessage, setErrorMessage] = useState<string>("");
+
+  useEffect(() => {
+    if (!authState.ready || !authState.isAuthenticated) {
+      return;
+    }
+
+    startTransition(() => {
+      void navigate("/dashboard");
+    });
+  }, [authState.isAuthenticated, authState.ready, navigate]);
+
+  const handleSubmit = async (values: LoginPayload) => {
+    setErrorMessage("");
+
+    try {
+      await authStore.login(values);
+      message.success("模拟登录成功");
+      startTransition(() => {
+        void navigate("/dashboard");
+      });
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : "登录失败");
+    }
+  };
+
+  return (
+    <main className="login-page">
+      <div className="login-page__backdrop" />
+      <Card className="login-card" variant="borderless">
+        <Space direction="vertical" size={20} style={{ width: "100%" }}>
+          <Space align="center" size={12}>
+            <div className="login-card__badge">
+              <LoginOutlined />
+            </div>
+            <div>
+              <Title level={2}>模拟登录</Title>
+              <Paragraph className="compact-text">
+                账号信息不会发真实网络请求，而是通过
+                <Text code> @vlian/request </Text>
+                注册的本地 <Text code>kv</Text> 适配器读写浏览器缓存。
+              </Paragraph>
+            </div>
+          </Space>
+
+          {errorMessage ? <Alert message={errorMessage} showIcon type="error" /> : null}
+
+          <Form
+            form={form}
+            initialValues={{
+              username: "admin",
+              password: "admin123",
+            }}
+            layout="vertical"
+            onFinish={(values: LoginPayload) => {
+              void handleSubmit(values);
+            }}
+          >
+            <Form.Item
+              label="账号"
+              name="username"
+              rules={[
+                {
+                  required: true,
+                  message: "请输入账号",
+                },
+              ]}
+            >
+              <Input placeholder="admin" prefix={<UserOutlined />} />
+            </Form.Item>
+
+            <Form.Item
+              label="密码"
+              name="password"
+              rules={[
+                {
+                  required: true,
+                  message: "请输入密码",
+                },
+              ]}
+            >
+              <Input.Password placeholder="admin123" />
+            </Form.Item>
+
+            <Button
+              block
+              htmlType="submit"
+              icon={<LoginOutlined />}
+              loading={authState.pending}
+              size="large"
+              type="primary"
+            >
+              登录并进入仪表盘
+            </Button>
+          </Form>
+
+          <Card className="login-helper" size="small">
+            <Title level={5}>可用测试账号</Title>
+            <List
+              dataSource={demoAccounts}
+              renderItem={(item: string) => <List.Item>{item}</List.Item>}
+              size="small"
+            />
+          </Card>
+        </Space>
+      </Card>
+    </main>
+  );
+}

package/antd-adapter-template/src/pages/permission-test/PermissionTestPage.tsx

@@ -0,0 +1,55 @@
+import { ArrowRightOutlined, LockOutlined } from "@ant-design/icons";
+import { Alert, Button, Card, Space, Tag, Typography } from "antd";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@/features/auth/use-auth";
+
+const { Paragraph, Title } = Typography;
+
+export default function PermissionTestPage() {
+  const navigate = useNavigate();
+  const authState = useAuth();
+
+  return (
+    <Space className="page-stack" direction="vertical" size={24}>
+      <Card className="page-hero" variant="borderless">
+        <Tag color="volcano" icon={<LockOutlined />}>
+          权限模拟
+        </Tag>
+        <Title level={2}>没有权限测试页</Title>
+        <Paragraph>
+          当前页本身需要登录，但不会要求额外权限。点击下方按钮后会跳到一个需要
+          <strong> system:restricted </strong>
+          权限的资源，你的测试账号默认不具备这个权限，因此会被路由层重定向到
+          403 页面。
+        </Paragraph>
+      </Card>
+
+      <Card className="surface-card" title="当前账号权限" variant="borderless">
+        <Space size={[8, 8]} wrap>
+          {authState.permissions.map((permission) => (
+            <Tag key={permission}>{permission}</Tag>
+          ))}
+        </Space>
+      </Card>
+
+      <Alert
+        message="模拟目标"
+        description="受限资源路由是静态注册的，但通过 authorization.resolve 检查权限，并在失败时跳转到 /403。"
+        showIcon
+        type="warning"
+      />
+
+      <Button
+        icon={<ArrowRightOutlined />}
+        size="large"
+        type="primary"
+        onClick={() => {
+          void navigate("/restricted-demo");
+        }}
+      >
+        访问受限资源
+      </Button>
+    </Space>
+  );
+}
+

package/antd-adapter-template/src/pages/restricted/RestrictedDemoPage.tsx

@@ -0,0 +1,17 @@
+import { Card, Typography } from "antd";
+
+const { Paragraph, Title } = Typography;
+
+export default function RestrictedDemoPage() {
+  return (
+    <Card className="surface-card" variant="borderless">
+      <Title level={3}>受限资源</Title>
+      <Paragraph>
+        如果你能看到这个页面，说明当前账号已经被赋予了
+        <strong> system:restricted </strong>
+        权限。
+      </Paragraph>
+    </Card>
+  );
+}
+

package/antd-adapter-template/src/shared/kernel/app-kernel.ts

@@ -0,0 +1,10 @@
+import { getKernel } from "@vlian/framework/kernel";
+
+export const APP_INSTANCE_ID = "secra-antd-adapter-template";
+
+export const getAppKernel = () => getKernel(APP_INSTANCE_ID);
+
+export const getAppCache = () => getAppKernel().getCacheManager().cache;
+
+export const getAppLogger = () => getAppKernel().getLoggerManager();
+