create-secra 0.1.11 → 1.0.1

package/antd-adapter-template/package.json

@@ -1,63 +1,36 @@
 {
-  "name": "secra-admin",
+  "name": "secra-antd-demo",
   "private": true,
-  "version": "0.0.15",
-  "packageManager": "pnpm@9.12.3",
+  "version": "0.0.1",
+  "type": "module",
+  "packageManager": "pnpm@10.27.0",
   "scripts": {
-    "build": "turbo run build",
-    "dev": "turbo run dev",
-    "lint": "turbo run lint",
-    "test": "turbo run test",
-    "clean:node_modules": "find . -type d -name 'node_modules' -prune -exec rm -rf '{}' +",
-    "build:packages": "pnpm -r --filter \"./packages/*\" build"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc -b --pretty false"
   },
   "dependencies": {
     "@ant-design/icons": "^6.1.0",
-    "@ant-design/pro-components": "^2.8.10",
-    "@ant-design/v5-patch-for-react-19": "^1.0.3",
-    "@vlian/framework": "^1.2.18",
-    "@vlian/infrastructure": "^0.9.11",
-    "@vlian/sdk": "workspace:*",
-    "ahooks": "^3.8.5",
+    "@vlian/csrf": "^0.1.2",
+    "@vlian/framework": "^2.0.3",
+    "@vlian/logger": "^0.1.1",
+    "@vlian/monitoring": "^0.1.0",
+    "@vlian/request": "^0.1.3",
+    "@vlian/router": "^0.1.0",
+    "@vlian/utils": "^2.0.1",
     "antd": "^5.29.3",
-    "i18next": "^25.7.4",
-    "immer": "^10.1.3",
-    "ky": "^1.14.2",
-    "lodash": "^4.17.21",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-i18next": "^15.7.4",
-    "react-router-dom": "^7.8.2"
+    "react-router-dom": "^7.13.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@iconify/utils": "^3.1.0",
-    "@types/lodash": "^4.17.21",
     "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@unocss/core": "^66.6.0",
-    "@unocss/preset-attributify": "^66.6.0",
-    "@unocss/preset-icons": "^66.6.0",
-    "@unocss/preset-uno": "^66.6.0",
-    "@unocss/transformer-directives": "^66.6.0",
-    "@unocss/transformer-variant-group": "^66.6.0",
-    "@unocss/vite": "^66.6.0",
     "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "gogocode": "^1.0.53",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "turbo": "^2.7.5",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "unplugin-auto-import": "^0.17.8",
-    "unplugin-icons": "^0.20.1",
-    "vite": "npm:rolldown-vite@7.2.5",
-    "vite-plugin-inspect": "^11.3.3",
-    "vite-plugin-remove-console": "^1.3.0",
-    "vite-plugin-svg-icons": "^2.0.1"
+    "typescript": "^5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5"
   }
 }
+

package/antd-adapter-template/src/app/App.tsx

@@ -0,0 +1,7 @@
+import { RouterProvider } from "react-router-dom";
+import { router } from "@/app/router";
+
+export function App() {
+  return <RouterProvider router={router} />;
+}
+

package/antd-adapter-template/src/app/layouts/AppLayout.tsx

@@ -0,0 +1,163 @@
+import {
+  DashboardOutlined,
+  HomeOutlined,
+  LockOutlined,
+  LoginOutlined,
+  LogoutOutlined,
+  SafetyCertificateOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { Avatar, Button, Layout, Menu, Space, Tag, Typography, message } from "antd";
+import { type ReactNode, useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import type { RouteLayoutProps } from "@vlian/router/types";
+import { authStore } from "@/features/auth/auth-store";
+import { useAuth } from "@/features/auth/use-auth";
+import type { AppRouteExtra, AppRouteMeta } from "@/app/routes/types";
+import { RouteTitleSync } from "@/app/routes/RouteTitleSync";
+
+const { Header, Content } = Layout;
+const { Text, Title } = Typography;
+
+type NavigationItem = {
+  key: string;
+  label: string;
+  icon: ReactNode;
+  path: string;
+};
+
+const navigationItems: NavigationItem[] = [
+  {
+    key: "home",
+    label: "首页",
+    icon: <HomeOutlined />,
+    path: "/",
+  },
+  {
+    key: "dashboard",
+    label: "仪表盘",
+    icon: <DashboardOutlined />,
+    path: "/dashboard",
+  },
+  {
+    key: "permission-test",
+    label: "没有权限测试页",
+    icon: <LockOutlined />,
+    path: "/permission-test",
+  },
+];
+
+const resolveSelectedKey = (pathname: string) => {
+  if (pathname.startsWith("/dashboard")) {
+    return ["dashboard"];
+  }
+
+  if (pathname.startsWith("/permission-test") || pathname.startsWith("/restricted-demo")) {
+    return ["permission-test"];
+  }
+
+  if (pathname === "/") {
+    return ["home"];
+  }
+
+  return [];
+};
+
+export function AppLayout({
+  children,
+}: RouteLayoutProps<AppRouteMeta, AppRouteExtra>) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const authState = useAuth();
+  const [logoutPending, setLogoutPending] = useState(false);
+
+  const selectedKeys = useMemo(
+    () => resolveSelectedKey(location.pathname),
+    [location.pathname],
+  );
+
+  const handleLogout = async () => {
+    setLogoutPending(true);
+
+    try {
+      await authStore.logout();
+      message.success("已退出登录");
+      void navigate("/");
+    } finally {
+      setLogoutPending(false);
+    }
+  };
+
+  return (
+    <Layout className="app-shell">
+      <RouteTitleSync />
+      <Header className="app-shell__header">
+        <div className="app-shell__brand">
+          <div className="app-shell__brand-badge">S</div>
+          <div>
+            <Title className="app-shell__brand-title" level={4}>
+              Secra Antd Demo
+            </Title>
+            <Text className="app-shell__brand-subtitle">
+              独立模板，动态路由 + 登录态 + 权限模拟
+            </Text>
+          </div>
+        </div>
+
+        <Menu
+          className="app-shell__menu"
+          items={navigationItems.map((item) => ({
+            key: item.key,
+            icon: item.icon,
+            label: item.label,
+            onClick: () => {
+              void navigate(item.path);
+            },
+          }))}
+          mode="horizontal"
+          selectedKeys={selectedKeys}
+        />
+
+        <Space size="middle">
+          {authState.isAuthenticated ? (
+            <>
+              <Tag bordered={false} color="blue" icon={<SafetyCertificateOutlined />}>
+                已登录
+              </Tag>
+              <Space size="small">
+                <Avatar icon={<UserOutlined />} />
+                <div className="app-shell__user">
+                  <Text strong>{authState.session?.displayName}</Text>
+                  <Text type="secondary">{authState.session?.username}</Text>
+                </div>
+              </Space>
+              <Button
+                icon={<LogoutOutlined />}
+                loading={logoutPending}
+                onClick={() => {
+                  void handleLogout();
+                }}
+              >
+                退出
+              </Button>
+            </>
+          ) : (
+            <Button
+              icon={<LoginOutlined />}
+              type="primary"
+              onClick={() => {
+                void navigate("/login");
+              }}
+            >
+              去登录
+            </Button>
+          )}
+        </Space>
+      </Header>
+
+      <Content className="app-shell__content">
+        <div className="page-shell">{children}</div>
+      </Content>
+    </Layout>
+  );
+}

package/antd-adapter-template/src/app/router.ts

@@ -0,0 +1,26 @@
+import { createAppRouter } from "@vlian/router";
+import { logger } from "@vlian/logger";
+import { authorization } from "@/features/auth/authorization";
+import { loadDynamicRoutes } from "@/app/routes/dynamic-routes";
+import { staticRoutes } from "@/app/routes/static-routes";
+import type { AppRouteExtra, AppRouteMeta } from "@/app/routes/types";
+
+export const router = createAppRouter<AppRouteMeta, AppRouteExtra>({
+  mode: "browser",
+  routes: staticRoutes,
+  authorization,
+  dynamic: {
+    defaultParentId: "root",
+    loader: loadDynamicRoutes,
+    getNavigationCacheKey: ({ path }) =>
+      path.startsWith("/dashboard") ? "dynamic:dashboard" : false,
+    errorMode: "throw",
+  },
+  onError: ({ error, path }) => {
+    logger.error("router.dynamic.failed", {
+      path,
+      error,
+    });
+  },
+});
+

package/antd-adapter-template/src/app/routes/RouteTitleSync.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { useMatches } from "react-router-dom";
+
+type RouteHandle = {
+  meta?: {
+    title?: string;
+  };
+};
+
+export function RouteTitleSync() {
+  const matches = useMatches();
+
+  useEffect(() => {
+    const routeTitle = [...matches]
+      .reverse()
+      .map((match) => (match.handle as RouteHandle | undefined)?.meta?.title)
+      .find(Boolean);
+
+    document.title = routeTitle
+      ? `${routeTitle} | Secra Antd Demo`
+      : "Secra Antd Demo";
+  }, [matches]);
+
+  return null;
+}
+

package/antd-adapter-template/src/app/routes/dynamic-routes.ts

@@ -0,0 +1,52 @@
+import type { DynamicRouteLoader } from "@vlian/router";
+import { logger } from "@vlian/logger";
+import { authApi } from "@/features/auth/api/auth-api";
+import type { DynamicRouteManifestItem } from "@/features/auth/auth-types";
+import { pageModuleLoaders } from "@/app/routes/route-modules";
+import type { AppRouteExtra, AppRouteMeta } from "@/app/routes/types";
+
+export const loadDynamicRoutes: DynamicRouteLoader<
+  AppRouteMeta,
+  AppRouteExtra
+> = async ({ path }) => {
+  if (!path.startsWith("/dashboard")) {
+    return;
+  }
+
+  const manifest = await authApi.getDynamicRoutes();
+
+  logger.info("router.dynamic.loaded", {
+    path,
+    count: manifest.length,
+  });
+
+  return {
+    parentId: "root",
+    cacheKey: "dynamic:dashboard:manifest",
+    routes: manifest.map((item: DynamicRouteManifestItem) => ({
+      id: item.code,
+      path: item.path.replace(/^\//, ""),
+      menuKey: "dashboard",
+      auth: {
+        required: item.requiresAuth,
+        redirectTo: "/login",
+      },
+      meta: {
+        title: item.title,
+        description: "通过 @vlian/router dynamic.loader 动态注入",
+      },
+      lazy: async () => {
+        const loader = pageModuleLoaders[item.component];
+
+        if (!loader) {
+          throw new Error(`Unknown dynamic page module: ${item.component}`);
+        }
+
+        const mod = await loader();
+        return {
+          Component: mod.default,
+        };
+      },
+    })),
+  };
+};

package/antd-adapter-template/src/app/routes/route-modules.ts

@@ -0,0 +1,4 @@
+export const pageModuleLoaders: Record<string, () => Promise<any>> = {
+  dashboard: () => import("@/pages/dashboard/DashboardPage"),
+};
+

package/antd-adapter-template/src/app/routes/static-routes.tsx

@@ -0,0 +1,110 @@
+import { Outlet } from "react-router-dom";
+import { defineRoutes } from "@vlian/router";
+import { AppLayout } from "@/app/layouts/AppLayout";
+import type { AppRouteExtra, AppRouteMeta } from "@/app/routes/types";
+
+const loadHomePage = () => import("@/pages/home/HomePage");
+const loadLoginPage = () => import("@/pages/login/LoginPage");
+const loadForbiddenPage = () => import("@/pages/errors/ForbiddenPage");
+const loadNotFoundPage = () => import("@/pages/errors/NotFoundPage");
+const loadPermissionTestPage = () => import("@/pages/permission-test/PermissionTestPage");
+const loadRestrictedPage = () => import("@/pages/restricted/RestrictedDemoPage");
+
+export const staticRoutes = defineRoutes<AppRouteMeta, AppRouteExtra>([
+  {
+    id: "root",
+    path: "/",
+    component: Outlet,
+    layout: AppLayout,
+    children: [
+      {
+        index: true,
+        menuKey: "home",
+        meta: {
+          title: "首页",
+          description: "模板首页",
+        },
+        lazy: async () => {
+          const mod = await loadHomePage();
+          return {
+            Component: mod.default,
+          };
+        },
+      },
+      {
+        path: "permission-test",
+        menuKey: "permission-test",
+        auth: {
+          required: true,
+          redirectTo: "/login",
+        },
+        meta: {
+          title: "没有权限测试页",
+          description: "用于跳转到一个受限资源，模拟 403 场景",
+        },
+        lazy: async () => {
+          const mod = await loadPermissionTestPage();
+          return {
+            Component: mod.default,
+          };
+        },
+      },
+      {
+        path: "restricted-demo",
+        auth: {
+          required: true,
+          permissionCode: "system:restricted",
+          redirectTo: "/403",
+        },
+        meta: {
+          title: "受限资源",
+          description: "正常情况下会被权限拦截到 403",
+        },
+        lazy: async () => {
+          const mod = await loadRestrictedPage();
+          return {
+            Component: mod.default,
+          };
+        },
+      },
+      {
+        path: "403",
+        meta: {
+          title: "403 禁止访问",
+        },
+        lazy: async () => {
+          const mod = await loadForbiddenPage();
+          return {
+            Component: mod.default,
+          };
+        },
+      },
+    ],
+  },
+  {
+    id: "login",
+    path: "/login",
+    meta: {
+      title: "登录",
+    },
+    lazy: async () => {
+      const mod = await loadLoginPage();
+      return {
+        Component: mod.default,
+      };
+    },
+  },
+  {
+    id: "not-found",
+    path: "/404",
+    meta: {
+      title: "404 页面不存在",
+    },
+    lazy: async () => {
+      const mod = await loadNotFoundPage();
+      return {
+        Component: mod.default,
+      };
+    },
+  },
+]);

package/antd-adapter-template/src/app/routes/types.ts

@@ -0,0 +1,9 @@
+export interface AppRouteMeta {
+  title: string;
+  description?: string;
+}
+
+export interface AppRouteExtra {
+  [key: string]: unknown;
+  menuKey?: "home" | "dashboard" | "permission-test";
+}

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

@@ -0,0 +1,61 @@
+import { logger } from "@vlian/logger";
+import { getAppCache } from "@/shared/kernel/app-kernel";
+import { kvRequestClient } from "@/shared/request/client";
+import type { ApiEnvelope } from "@/shared/request/contracts";
+import type {
+  AuthSession,
+  DynamicRouteManifestItem,
+  LoginPayload,
+} from "@/features/auth/auth-types";
+
+const unwrapEnvelope = <T>(payload: ApiEnvelope<T>, logMessage: string) => {
+  if (payload.code !== 0) {
+    logger.warn(logMessage, payload);
+    throw new Error(payload.message || "请求失败");
+  }
+
+  return payload.data;
+};
+
+export const authApi = {
+  async login(payload: LoginPayload): Promise<AuthSession> {
+    const response = await kvRequestClient.post<AuthSession, LoginPayload>(
+      "/api/auth/login",
+      payload,
+    );
+
+    const session = unwrapEnvelope(response, "auth.login.failed");
+    const cache = getAppCache();
+
+    if (cache) {
+      await cache.set("last-login-user", session.displayName, {
+        expire: -1,
+      });
+    }
+
+    logger.info("auth.login.success", {
+      username: session.username,
+    });
+
+    return session;
+  },
+
+  async getSession(): Promise<AuthSession | null> {
+    const response = await kvRequestClient.get<AuthSession | null>("/api/auth/session");
+    return unwrapEnvelope(response, "auth.session.failed");
+  },
+
+  async logout(): Promise<void> {
+    const response = await kvRequestClient.post<null, null>(
+      "/api/auth/logout",
+      null,
+    );
+    unwrapEnvelope(response, "auth.logout.failed");
+    logger.info("auth.logout.success");
+  },
+
+  async getDynamicRoutes(): Promise<DynamicRouteManifestItem[]> {
+    const response = await kvRequestClient.get<DynamicRouteManifestItem[]>("/api/routes");
+    return unwrapEnvelope(response, "auth.routes.failed");
+  },
+};

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

@@ -0,0 +1,125 @@
+import { logger } from "@vlian/logger";
+import { authApi } from "@/features/auth/api/auth-api";
+import type { AuthSession, AuthState, LoginPayload } from "@/features/auth/auth-types";
+
+type Listener = () => void;
+
+let state: AuthState = {
+  ready: false,
+  pending: false,
+  session: null,
+  permissions: [],
+  isAuthenticated: false,
+};
+
+let bootstrapPromise: Promise<void> | null = null;
+const listeners = new Set<Listener>();
+
+const emitChange = () => {
+  listeners.forEach((listener) => listener());
+};
+
+const applySession = (session: AuthSession | null) => {
+  state = {
+    ...state,
+    session,
+    permissions: session?.permissions ?? [],
+    isAuthenticated: Boolean(session?.token),
+  };
+};
+
+const setState = (partial: Partial<AuthState>) => {
+  state = {
+    ...state,
+    ...partial,
+  };
+  emitChange();
+};
+
+export const authStore = {
+  subscribe(listener: Listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+
+  getSnapshot(): AuthState {
+    return state;
+  },
+
+  async bootstrap() {
+    if (state.ready) {
+      return;
+    }
+
+    if (!bootstrapPromise) {
+      bootstrapPromise = (async () => {
+        setState({
+          pending: true,
+        });
+
+        try {
+          const session = await authApi.getSession();
+          applySession(session);
+          setState({
+            ready: true,
+            pending: false,
+          });
+          logger.debug("auth.bootstrap.done", {
+            authenticated: Boolean(session),
+          });
+        } catch (error) {
+          applySession(null);
+          setState({
+            ready: true,
+            pending: false,
+          });
+          logger.error("auth.bootstrap.failed", error);
+        }
+      })().finally(() => {
+        bootstrapPromise = null;
+      });
+    }
+
+    await bootstrapPromise;
+  },
+
+  async login(payload: LoginPayload) {
+    setState({
+      pending: true,
+    });
+
+    try {
+      const session = await authApi.login(payload);
+      applySession(session);
+      setState({
+        ready: true,
+        pending: false,
+      });
+      return session;
+    } catch (error) {
+      setState({
+        pending: false,
+      });
+      throw error;
+    }
+  },
+
+  async logout() {
+    setState({
+      pending: true,
+    });
+
+    try {
+      await authApi.logout();
+    } finally {
+      applySession(null);
+      setState({
+        ready: true,
+        pending: false,
+      });
+    }
+  },
+};
+