-
- {mobileOpen ? (
-
-
setMobileOpen(false)}
- />
-
-
- ) : null}
-
-
-
-
-
-
-
-
-
- );
+ return 'CreatorHub'
}
+
+export function CreatorHubLayout({ children }) {
+ const { pathname } = useLocation()
+ return (
+
+
+
+
+ 跳到主要内容
+
+
+
+
+
+
{pageTitle(pathname)}
+
CreatorHub 运营控制台
+
+ )
+}
+
+export { menu }
diff --git a/web/src/app/Layout.test.jsx b/web/src/app/Layout.test.jsx
index d8dd540..6b1f199 100644
--- a/web/src/app/Layout.test.jsx
+++ b/web/src/app/Layout.test.jsx
@@ -1,6 +1,6 @@
import { afterEach, describe, expect, it } from "vitest";
import { cleanup, render, screen } from "@testing-library/react";
-import { MemoryRouter, Route, Routes } from "react-router";
+import { MemoryRouter, Route, Routes } from "../test/routerCompat.jsx";
import { CreatorHubLayout } from "./Layout";
const originalMatchMedia = window.matchMedia;
diff --git a/web/src/app/LoginPage.jsx b/web/src/app/LoginPage.jsx
index f2909bf..5ed03d5 100644
--- a/web/src/app/LoginPage.jsx
+++ b/web/src/app/LoginPage.jsx
@@ -1,5 +1,5 @@
import { useState } from "react";
-import { useNavigate } from "react-router";
+import { useNavigate } from "../shared/router.jsx";
import { Alert, Button, Field, Input } from "../shared/ui/ui.jsx";
// 开发阶段：本地保存 Basic 凭证，仅在请求层自动附带。开发代理（vite）不注入 Authorization。
diff --git a/web/src/app/main.jsx b/web/src/app/main.jsx
deleted file mode 100644
index 1521a3b..0000000
--- a/web/src/app/main.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { HashRouter, Navigate, Route, Routes, useLocation } from "react-router";
-import { Refine } from "@refinedev/core";
-import { dataProvider } from "../shared/api/dataProvider";
-import { CreatorHubLayout } from "./Layout";
-import { LoginPage } from "./LoginPage";
-import { AccountCreatePage, AccountDetail, AccountList } from "../features/accounts/AccountsPage";
-import { AccountEditPage } from "../features/accounts/AccountEditPage";
-import { CreatorCompetitorsPage } from "../features/creator/competitors/CreatorCompetitorsPage";
-import { CreatorSettingsPage } from "../features/creator/settings/CreatorSettingsPage";
-import { CreatorWorkbenchPage } from "../features/creator/workbench/CreatorWorkbenchPage";
-import { AuditPage } from "../features/operations/AuditPage";
-import { BrowserCreatePage, BrowserDetail, BrowserList } from "../features/environments/BrowsersPage";
-import { BrowserVersionList } from "../features/environments/BrowserVersionsPage";
-import { DraftPage } from "../features/operations/DraftPage";
-import { GatewayList } from "../features/environments/GatewaysPage";
-import { NetworkExitDetail, NetworkExitList } from "../features/environments/NetworkExitsPage";
-import { TaskDetail, TaskList } from "../features/operations/TasksPage";
-import { AttemptDetail } from "../features/operations/TracePages";
-import "remixicon/fonts/remixicon.css";
-import "./styles.css";
-
-// 开发阶段认证仅由页面层掌握：401 会清除凭证并跳转登录；localStorage 为空时直接展示登录页。
-// 不用 useState：HashRouter 的 pushState/replaceState 不触发 hashchange，状态会在导航后过期；
-// 改为每次渲染直接读 localStorage，登录后 navigate 引发重渲染即可拿到新状态。
-const authed = () => localStorage.getItem("creatorhub.auth") !== null;
-
-function AuthGate({ children }) {
- const { pathname } = useLocation();
- const loggedIn = authed();
- if (!loggedIn && pathname !== "/login")
- return
;
- if (loggedIn && pathname === "/login")
- return
;
- return children;
-}
-
-createRoot(document.getElementById("root")).render(
-
-
-
-
-
- } />
- }>
- } />
- } />
- } />
- } />
- } />
- }
- />
- }
- />
- } />
- }
- />
- }
- />
- } />
- }
- />
- } />
- } />
- } />
- } />
- }
- />
- } />
- } />
- } />
- }
- />
- } />
- } />
- } />
-
-
-
-
-
- ,
-);
diff --git a/web/src/app/styles.css b/web/src/app/styles.css
deleted file mode 100644
index a3d3e24..0000000
--- a/web/src/app/styles.css
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "tailwindcss";
-
-@theme {
- --color-primary: #0866ef;
- --color-primary-dark: #0759d4;
- --color-success: #067647;
- --color-warning: #b54708;
- --color-danger: #b42318;
- --color-ink: #111827;
- --color-muted: #475467;
- --color-hairline: #d7dde7;
- --color-sidebar: #061a38;
- --color-sidebar-hover: #0b2a54;
-}
-
-html {
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
- color: var(--color-ink);
- background: #fff;
-}
-
-.anywhere {
- overflow-wrap: anywhere;
- word-break: break-all;
-}
diff --git a/web/src/components/ui/breadcrumb.tsx b/web/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..5c367c9
--- /dev/null
+++ b/web/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+ return
;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+ return (
+
+ );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+ return (
+
+ );
+}
+
+function BreadcrumbLink({
+ asChild,
+ className,
+ ...props
+}: React.ComponentProps<'a'> & {
+ asChild?: boolean;
+}) {
+ const Comp = asChild ? Slot.Root : 'a';
+
+ return (
+
+ );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+ return (
+
+ );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
+ return (
+
svg]:size-3.5', className)}
+ {...props}
+ >
+ {children ?? }
+
+ );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+ return (
+
+
+ More
+
+ );
+}
+
+export {
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis
+};
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..e9f982b
--- /dev/null
+++ b/web/src/components/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+ "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+ destructive:
+ 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+ outline:
+ 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+ secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+ link: 'text-primary underline-offset-4 hover:underline'
+ },
+ size: {
+ default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+ xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+ sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+ lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+ icon: 'size-9',
+ 'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+ 'icon-sm': 'size-8',
+ 'icon-lg': 'size-10'
+ }
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default'
+ }
+ }
+);
+
+function Button({
+ className,
+ variant = 'default',
+ size = 'default',
+ asChild = false,
+ ...props
+}: React.ComponentProps<'button'> &
+ VariantProps
& {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot.Root : 'button';
+
+ return (
+
+ );
+}
+
+export { Button, buttonVariants };
diff --git a/web/src/components/ui/collapsible.tsx b/web/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..ed9712d
--- /dev/null
+++ b/web/src/components/ui/collapsible.tsx
@@ -0,0 +1,19 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+
+function Collapsible({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function CollapsibleTrigger({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function CollapsibleContent({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/web/src/components/ui/dropdown-menu.tsx b/web/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..ad1c0ac
--- /dev/null
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,228 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function DropdownMenu({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function DropdownMenuPortal({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function DropdownMenuTrigger({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function DropdownMenuContent({
+ className,
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ );
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = 'default',
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean;
+ variant?: 'default' | 'destructive';
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean;
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+ return (
+
+ );
+}
+
+function DropdownMenuSub({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean;
+}) {
+ return (
+
+ {children}
+
+
+ );
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent
+};
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
new file mode 100644
index 0000000..ac8cfb3
--- /dev/null
+++ b/web/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+ return (
+
+ );
+}
+
+export { Input };
diff --git a/web/src/components/ui/separator.tsx b/web/src/components/ui/separator.tsx
new file mode 100644
index 0000000..61e1eca
--- /dev/null
+++ b/web/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Separator({
+ className,
+ orientation = 'horizontal',
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export { Separator };
diff --git a/web/src/components/ui/sheet.tsx b/web/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..73eb4f5
--- /dev/null
+++ b/web/src/components/ui/sheet.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { XIcon } from 'lucide-react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Sheet({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function SheetClose({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function SheetOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function SheetContent({
+ className,
+ children,
+ side = 'right',
+ showCloseButton = true,
+ ...props
+}: React.ComponentProps & {
+ side?: 'top' | 'right' | 'bottom' | 'left';
+ showCloseButton?: boolean;
+}) {
+ return (
+
+
+
+ {children}
+ {showCloseButton && (
+
+
+ Close
+
+ )}
+
+
+ );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function SheetDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription
+};
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000..5faaca1
--- /dev/null
+++ b/web/src/components/ui/sidebar.tsx
@@ -0,0 +1,693 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { PanelLeftIcon } from 'lucide-react';
+import { Slot } from 'radix-ui';
+
+import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+type SidebarContextProps = {
+ state: 'expanded' | 'collapsed';
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ openMobile: boolean;
+ setOpenMobile: (open: boolean) => void;
+ isMobile: boolean;
+ toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext(null);
+
+export function useSidebar() {
+ const context = React.useContext(SidebarContext);
+ if (!context) {
+ throw new Error('useSidebar must be used within a SidebarProvider.');
+ }
+
+ return context;
+}
+
+function SidebarProvider({
+ defaultOpen = true,
+ open: openProp,
+ onOpenChange: setOpenProp,
+ className,
+ style,
+ children,
+ ...props
+}: React.ComponentProps<'div'> & {
+ defaultOpen?: boolean;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+}) {
+ const isMobile = useIsMobile();
+ const [openMobile, setOpenMobile] = React.useState(false);
+
+ // This is the internal state of the sidebar.
+ // We use openProp and setOpenProp for control from outside the component.
+ const [_open, _setOpen] = React.useState(defaultOpen);
+ const open = openProp ?? _open;
+ const setOpen = React.useCallback(
+ (value: boolean | ((value: boolean) => boolean)) => {
+ const openState = typeof value === 'function' ? value(open) : value;
+ if (setOpenProp) {
+ setOpenProp(openState);
+ } else {
+ _setOpen(openState);
+ }
+
+ // This sets the cookie to keep the sidebar state.
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+ },
+ [setOpenProp, open]
+ );
+
+ // Helper to toggle the sidebar.
+ const toggleSidebar = React.useCallback(() => {
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+ }, [isMobile, setOpen, setOpenMobile]);
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+ event.preventDefault();
+ toggleSidebar();
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [toggleSidebar]);
+
+ // We add a state so that we can do data-state="expanded" or "collapsed".
+ // This makes it easier to style the sidebar with Tailwind classes.
+ const state = open ? 'expanded' : 'collapsed';
+
+ const contextValue = React.useMemo(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar
+ }),
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+ );
+
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+function Sidebar({
+ side = 'left',
+ variant = 'sidebar',
+ collapsible = 'offcanvas',
+ className,
+ children,
+ ...props
+}: React.ComponentProps<'div'> & {
+ side?: 'left' | 'right';
+ variant?: 'sidebar' | 'floating' | 'inset';
+ collapsible?: 'offcanvas' | 'icon' | 'none';
+}) {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+ if (collapsible === 'none') {
+ return (
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+
+
+
+ Sidebar
+ Displays the mobile sidebar.
+
+ {children}
+
+
+ );
+ }
+
+ return (
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+
+ {showIcon && }
+
+
+ );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+ return (
+
+ );
+}
+
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
+ return (
+
+ );
+}
+
+function SidebarMenuSubButton({
+ asChild = false,
+ size = 'md',
+ isActive = false,
+ className,
+ ...props
+}: React.ComponentProps<'a'> & {
+ asChild?: boolean;
+ size?: 'sm' | 'md';
+ isActive?: boolean;
+}) {
+ const Comp = asChild ? Slot.Root : 'a';
+
+ return (
+ span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+ 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+ size === 'sm' && 'text-xs',
+ size === 'md' && 'text-sm',
+ 'group-data-[collapsible=icon]:hidden',
+ className
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger
+};
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..24d6b2f
--- /dev/null
+++ b/web/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+export { Skeleton };
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..f657404
--- /dev/null
+++ b/web/src/components/ui/tooltip.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function Tooltip({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+
+ );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/web/src/features/accounts/AccountEditPage.jsx b/web/src/features/accounts/AccountEditPage.jsx
index 133c418..0010f62 100644
--- a/web/src/features/accounts/AccountEditPage.jsx
+++ b/web/src/features/accounts/AccountEditPage.jsx
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useRef, useState } from "react";
-import { Link, useParams } from "react-router";
-import { useDataProvider } from "@refinedev/core";
+import { Link, useParams } from "../../shared/router.jsx";
+import { useDataProvider } from "../../shared/hooks/dataHooks.js";
import {
Alert,
Button,
diff --git a/web/src/features/accounts/AccountsPage.jsx b/web/src/features/accounts/AccountsPage.jsx
index cd3d7da..1866192 100644
--- a/web/src/features/accounts/AccountsPage.jsx
+++ b/web/src/features/accounts/AccountsPage.jsx
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from "react";
-import { Link, useNavigate, useParams } from "react-router";
-import { useDataProvider, useList, useOne } from "@refinedev/core";
+import { Link, useNavigate, useParams } from "../../shared/router.jsx";
+import { useDataProvider, useList, useOne } from "../../shared/hooks/dataHooks.js";
import {
Alert,
Button,
diff --git a/web/src/features/accounts/AccountsPage.test.jsx b/web/src/features/accounts/AccountsPage.test.jsx
index 707b4b4..db22a7d 100644
--- a/web/src/features/accounts/AccountsPage.test.jsx
+++ b/web/src/features/accounts/AccountsPage.test.jsx
@@ -7,8 +7,8 @@ import {
waitFor,
} from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Refine } from "@refinedev/core";
-import { MemoryRouter, Route, Routes } from "react-router";
+import { TestDataProvider } from "../../test/providerCompat.jsx";
+import { MemoryRouter, Route, Routes } from "../../test/routerCompat.jsx";
import {
AccountCreatePage,
AccountDetail,
@@ -85,11 +85,11 @@ const queryClient = () =>
function renderList(dataProvider) {
return render(
-
+
-
+
,
);
}
@@ -97,13 +97,13 @@ function renderList(dataProvider) {
function renderDetail(dataProvider) {
return render(
-
+
} />
-
+
,
);
}
@@ -111,13 +111,13 @@ function renderDetail(dataProvider) {
function renderCreate(dataProvider) {
return render(
-
+
} />
-
+
,
);
}
diff --git a/web/src/features/creator/CreatorPages.test.jsx b/web/src/features/creator/CreatorPages.test.jsx
index 3cacc82..c757f0b 100644
--- a/web/src/features/creator/CreatorPages.test.jsx
+++ b/web/src/features/creator/CreatorPages.test.jsx
@@ -7,8 +7,8 @@ import {
waitFor,
} from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Refine } from "@refinedev/core";
-import { MemoryRouter, Route, Routes } from "react-router";
+import { TestDataProvider } from "../../test/providerCompat.jsx";
+import { MemoryRouter, Route, Routes } from "../../test/routerCompat.jsx";
import { AccountEditPage } from "../accounts/AccountEditPage";
import { AccountList } from "../accounts/AccountsPage";
import { CreatorCompetitorsPage } from "./competitors/CreatorCompetitorsPage";
@@ -90,9 +90,9 @@ function provider(overrides = {}) {
function renderPage(element, dataProvider) {
return render(
-
+
{element}
-
+
,
);
}
@@ -100,13 +100,13 @@ function renderPage(element, dataProvider) {
function renderAccountPage(dataProvider) {
return render(
-
+
} />
-
+
,
);
}
@@ -498,7 +498,6 @@ describe("creator pages", () => {
expect.objectContaining({
resource: "creator-competitor-preview",
variables: {
- account_id: "account-a",
platform: "douyin",
share_url: "https://v.douyin.com/share-a/",
},
@@ -511,7 +510,6 @@ describe("creator pages", () => {
expect.objectContaining({
resource: "creator-competitors",
variables: {
- account_id: "account-a",
platform: "douyin",
share_url: "https://v.douyin.com/share-a/",
tags: ["重点监测"],
diff --git a/web/src/features/creator/competitors/CreatorCompetitorsPage.jsx b/web/src/features/creator/competitors/CreatorCompetitorsPage.jsx
index 4d84512..423af2d 100644
--- a/web/src/features/creator/competitors/CreatorCompetitorsPage.jsx
+++ b/web/src/features/creator/competitors/CreatorCompetitorsPage.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import { useDataProvider } from "@refinedev/core";
+import { useDataProvider } from "../../../shared/hooks/dataHooks.js";
import {
Alert,
Button,
@@ -64,7 +64,6 @@ export function CreatorCompetitorsPage() {
total: 0,
hasNext: false,
});
- const [accounts, setAccounts] = useState([]);
const [platform, setPlatform] = useState("");
const [createOpen, setCreateOpen] = useState(false);
const [shareText, setShareText] = useState("");
@@ -81,7 +80,6 @@ export function CreatorCompetitorsPage() {
const [previewConfirmed, setPreviewConfirmed] = useState(false);
const [error, setError] = useState(null);
const [notice, setNotice] = useState(null);
- const [accountError, setAccountError] = useState(null);
const [material, setMaterial] = useState(null);
const [materialPending, setMaterialPending] = useState(false);
const [rewriteRequirement, setRewriteRequirement] = useState("");
@@ -154,15 +152,6 @@ export function CreatorCompetitorsPage() {
publishedAfter,
publishedBefore,
]);
- useEffect(() => {
- dataProvider
- .getList({ resource: "creator-accounts" })
- .then((result) => {
- setAccountError(null);
- setAccounts(result.data);
- })
- .catch((loadError) => setAccountError(loadError));
- }, [dataProvider]);
const extractedShareURL = extractShareURL(shareText);
const sharePlatform = platformForShareURL(extractedShareURL);
const closeCreate = () => {
@@ -183,33 +172,18 @@ export function CreatorCompetitorsPage() {
setNotice({ variant: "warning", text: "链接不是支持的平台分享链接。" });
return;
}
- const account = accounts.find(
- (value) =>
- value.platform === sharePlatform &&
- value.authorization_status === "authorized" &&
- (value.business_status === "normal" || value.business_status === "muted") &&
- value.login_status === "logged_in",
- );
- if (!account) {
- setNotice({
- variant: "warning",
- text: `没有可用于解析${sharePlatform === "douyin" ? "抖音" : "小红书"}分享内容的已登录账号。`,
- });
- return;
- }
setBusy(true);
setNotice(null);
try {
const result = await dataProvider.create({
resource: "creator-competitor-preview",
variables: {
- account_id: account.id,
platform: sharePlatform,
share_url: extractedShareURL,
},
});
const verified = result.data;
- setPreview({ ...verified, account_id: account.id, share_url: extractedShareURL });
+ setPreview({ ...verified, share_url: extractedShareURL });
setPreviewConfirmed(false);
setNotice({
variant: "info",
@@ -233,7 +207,6 @@ export function CreatorCompetitorsPage() {
setNotice(null);
try {
const variables = {
- account_id: preview.account_id,
platform: preview.platform,
share_url: preview.share_url || extractedShareURL,
};
@@ -610,12 +583,6 @@ export function CreatorCompetitorsPage() {
/>