feat(web): 添加 usePermission hook + AuthButton/AuthGuard 声明式权限组件

apps/web/src/components/AuthButton.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { usePermission } from '../hooks/usePermission';
+
+interface AuthButtonProps {
+  code: string;
+  children: ReactNode;
+}
+
+export function AuthButton({ code, children }: AuthButtonProps) {
+  const { hasPermission } = usePermission(code);
+  if (!hasPermission) return null;
+  return <>{children}</>;
+}

apps/web/src/components/AuthGuard.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { usePermission } from '../hooks/usePermission';
+
+interface AuthGuardProps {
+  code: string;
+  children: ReactNode;
+}
+
+export function AuthGuard({ code, children }: AuthGuardProps) {
+  const { hasPermission } = usePermission(code);
+  if (!hasPermission) return null;
+  return <>{children}</>;
+}

apps/web/src/hooks/usePermission.ts

@@ -0,0 +1,6 @@
+import { useAuthStore } from '../stores/auth';
+
+export function usePermission(code: string): { hasPermission: boolean } {
+  const permissions = useAuthStore((s) => s.permissions);
+  return { hasPermission: permissions.includes(code) };
+}