ant-design/ant-design-pro

This system is a frontend application template based on Ant Design Pro, designed to provide a comprehensive starting point for building enterprise-level web interfaces. It features a full suite of UI components, including dashboards, forms, lists, and user authentication flows, all integrated with React Query for data management and styled with Ant Design v6. The project also includes a Cloudflare Worker backend layer that serves mock API endpoints to support local development and testing of the frontend features.

41 changes.

This period focused on upgrading the project to Ant Design Pro v6 and React 19, replacing the legacy request handling with @tanstack/react-query across all pages and components. The work involved extensive refactoring of UI components to use antd-style, implementing new dashboard and account features, and expanding internationalization support.

20 changes.

The project migrated its API backend to Cloudflare Workers using the Hono framework and replaced Jest with Vitest for testing. Concurrently, it integrated an AI chatbot interface and refactored core components to use antd-style, while adding utilities for geographic data and number formatting.

A new chatbot page has been added to the application, providing an interactive interface for users to converse with an AI assistant. The page features a sidebar for managing conversation history, a main chat area that supports streaming responses and markdown rendering, and a welcome screen with a typewriter effect. It connects to an external AI model (glm-4.5-flash) via the Ant Design X SDK, allowing users to send messages and receive real-time AI-generated responses.

src/pages/chatbot · high confidence

The public directory now includes a CNAME file pointing to preview.pro.ant.design, along with new logo.svg and pro\_icon.svg assets, establishing the site's identity and preview domain configuration for the Ant Design Pro v5 release.

public · high confidence

A new CORS utility has been added to the Cloudflare Worker to validate request origins against a specific set of allowed patterns. This includes domains ending in .surge.sh and .pages.dev, the Ant Design preview site, and localhost with dynamic ports, ensuring that only permitted origins can access the worker's resources.

cloudflare-worker/src/utils · high confidence

Introduces a new Projects search page that allows users to filter project lists by category, author, and rating. The implementation replaces the previous request mechanism with @tanstack/react-query for data fetching and caching, utilizing a dedicated service layer to call the /api/fake\_list endpoint. The UI presents results in a responsive card grid with member avatars and relative timestamps, styled using antd-style.

src/pages/list/search/projects · high confidence

A new Articles search page has been added to the list section, allowing users to filter articles by category and owner using a TagSelect and a multi-select dropdown. The page now uses @tanstack/react-query for data fetching instead of the previous useRequest hook, providing a more robust query management layer for the article list. The implementation includes a dedicated service layer for API calls and styled components for responsive layout adjustments.

src/pages/list/search/articles · high confidence

New utility components and functions have been added to the dashboard analysis module to support data presentation. The \Yuan\ component now formats numeric or string children using the existing \formatYuan\ utility, ensuring consistent currency display. Additionally, the \getTimeDistance\ function in \utils.ts\ provides standardized date range calculations for 'today', 'week', 'month', and 'year' periods, returning values compatible with Ant Design's RangePicker component.

src/pages/dashboard/analysis/utils · high confidence

A new 'Register Result' page has been added to display a success message after user registration. The page retrieves the registered account email from the URL query parameters (defaulting to '[e-mail redacted]' if missing) and informs the user that an activation email has been sent with a 24-hour validity period. It provides two action buttons: one to view the email address and another to return to the homepage, which includes prefetching enabled for faster navigation.

src/pages/user/register-result · high confidence

Two new Node.js scripts are added to the \scripts/\ directory. The \simple.js\ script allows users to reduce the project footprint by deleting specific page directories (such as dashboard, form, and list pages), replacing the route configuration with a simplified version, and removing unused dependencies like \@ant-design/plots\, \d3\, and \topojson-client\ from \package.json\. The \i18n-remove.js\ script enables users to remove internationalization support by replacing \intl.formatMessage\ and \FormattedMessage\ calls with hardcoded Chinese text, removing i18n-related imports and configuration, and deleting the \src/locales/\ directory.

scripts · high confidence

A new search list page has been added at src/pages/list/search, providing a unified interface with a search input and three tabs: Articles, Projects, and Applications. The page uses Ant Design's PageContainer to manage tab state and routing, allowing users to switch between content types via URL navigation while maintaining a consistent search experience.

src/pages/list/search · high confidence

The application now includes a dedicated fail result page that displays an error status with a title, subtitle, and a 'Return to Modify' button. The page lists specific error scenarios, such as a frozen account or lack of application eligibility, each accompanied by an icon and a corresponding action link (e.g., 'Unfreeze Now', 'Upgrade Now'). The layout uses Ant Design components and custom styles for consistent visual presentation.

src/pages/result/fail · high confidence

The login page at src/pages/user/login has been added, providing a user-facing interface for authentication using Ant Design Pro components. It supports account-based login and social login options (Alipay, Taobao, Weibo), includes internationalization for error messages, and features a secure redirect mechanism that validates return URLs to prevent open redirect attacks. A corresponding test suite validates the login flow and UI rendering.

src/pages/user/login · high confidence

The src/services directory now includes a new API service layer for the Ant Design Pro template, introducing functions for user authentication (login, logout, captcha), user profile retrieval, and rule management (CRUD operations). This change adds the necessary client-side service definitions and TypeScript typings to support these backend endpoints.

src/services · high confidence

The Basic Form page in src/pages/form/basic-form has been implemented using @tanstack/react-query for data mutations, replacing previous request handling. The form collects user input (title, date range, description, etc.) and submits it via a POST request to /api/basicForm, providing success feedback and invalidating the local query cache upon completion. A corresponding mock server handler and a comprehensive test suite (index.test.tsx) have been added to verify rendering, field presence, and submission behavior.

src/pages/form/basic-form · high confidence

The application now supports Bengali (bn-BD) and Indonesian (id-ID) languages. This change adds the necessary locale files for these languages, covering the global header, navigation menus, page content, network error messages, settings drawer, and user settings, allowing users to switch their interface language to Bengali or Indonesian.

src/locales · high confidence

This change introduces the \types/index.d.ts\ file, which defines TypeScript interfaces for the application's API responses, including user profile details (\GET /api/currentUser\), rule lists (\GET /api/rule\), and login actions (\POST /api/login/account\, \POST /api/login/outLogin\). It also adds \types/cache/mock/login.mock.cache.js\, providing mock data structures that mirror these API responses to support local development and testing.

types · high confidence

A new style utility file (utils.style.ts) has been added to the card-list utils directory. It currently exports an empty style hook using antd-style, providing a placeholder for future styling logic in this component area.

src/pages/list/card-list/utils · high confidence

A new mock data file has been introduced at src/pages/list/mock/index.ts to provide sample category options for the list page. This file exports an array of 12 category items, each containing a value (e.g., 'cat1') and a label (e.g., '类目1'), typed as Ant Design's DefaultOptionType to support dropdown or selection components.

src/pages/list/mock · high confidence

The \cloudflare-worker/src/data\ directory now includes static mock data modules (\common.ts\, \dashboard.ts\, \notices.ts\, \table.ts\, \user.ts\) that provide sample content for the application's UI components, such as user profiles, dashboard charts, notification lists, and table rows.

cloudflare-worker/src/data · high confidence

A new OperationModal component has been introduced in the basic-list area to handle task creation and editing workflows. This modal integrates with Ant Design Pro components to provide a form for entering task details such as title, start time, owner, and description, and displays a success result view upon completion.

src/pages/list/basic-list/components · high confidence

The Footer component now renders a structured metadata section that displays the application version, the current commit hash (if available), and the versions of Umi and Utoo frameworks. It also includes a link to the project's GitHub repository and uses the current year for the copyright notice. The layout groups these items with vertical dividers and applies specific styling for labels and links.

src/components/Footer · high confidence

The project is now configured using Umi Max, introducing a new \config/config.ts\ that enables hash-based builds, route prefetching, and fast refresh. The UI layer is set up with Ant Design v5, applying a 'filled' variant and the AlibabaSans font family, while the layout defaults to a 'mix' style. Data fetching capabilities have been expanded to support both the legacy \request\ plugin and the new \react-query\ integration. Additionally, the configuration includes Google Analytics (GA4) tracking, a loading script to prevent initial white screens, and a comprehensive set of default routes covering authentication, dashboards, forms, and data tables.

config · high confidence

The account settings interface now includes a dedicated page for managing user profile, security, binding, and notification preferences. A key addition is the support for geographic selection, allowing users to choose their province and city. This is powered by new service functions that fetch province and city data from the backend, with the city query service correctly encoding the province parameter to handle special characters. The page layout features a responsive menu that switches between inline and horizontal modes based on screen width, and includes mock data utilities to support local development and testing of these geographic features.

src/pages/account/settings · high confidence

The ActiveChart component in the dashboard monitor now renders a real-time area chart using @ant-design/plots, displaying simulated 24-hour activity data that refreshes every two seconds. It includes a Statistic title, a gradient-filled area plot, and a legend showing time markers, with styles managed via antd-style for layout and grid positioning.

src/pages/dashboard/monitor/components/ActiveChart · high confidence

A new Monitor page has been added to the dashboard, featuring real-time transaction statistics, a countdown timer, and predictive activity charts. The page utilizes react-query for data fetching and integrates Ant Design Pro components for layout and UI elements. It includes a dynamic map visualization component (lazily loaded) and displays word cloud data for search trends, gauge charts for efficiency scores, and progress indicators for category distribution. The implementation includes mock data services for tags and map data, along with responsive styling for the map chart area.

src/pages/dashboard/monitor · high confidence

A new HeaderDropdown component has been introduced to wrap Ant Design's Dropdown, providing a consistent interface for header navigation menus. It integrates antd-style for theming and includes specific CSS rules to ensure the dropdown menu expands to full width on small screens (max-width: 480px), improving usability on mobile devices. The component also standardizes the display and alignment of icons within menu items and submenus.

src/components/HeaderDropdown · high confidence

The mock layer now includes dedicated handlers for authentication (\/api/login/account\, \/api/login/outLogin\, \/api/login/captcha\), user profile retrieval (\/api/currentUser\, \/api/users\), and list/table data (\/api/fake\_list\, \/api/rule\, \/api/notices\). It also provides error simulation endpoints (\/api/401\, \/api/403\, \/api/404\, \/api/500\) and route authority definitions (\/api/auth\_routes\), supported by shared utility functions for generating fake data and simulating network delays.

mock · high confidence

A new user registration page has been added at src/pages/user/register, featuring a form for email, password, mobile, and captcha inputs. The implementation uses @tanstack/react-query for state management and API calls, replacing previous patterns, and includes password strength validation with visual feedback. The page submits to a new /api/register endpoint via a dedicated service layer and handles successful registration by redirecting to a result page.

src/pages/user/register · high confidence

A new OfflineBanner component has been added to display a fixed warning alert when the user's device loses network connectivity. The component uses the browser's online/offline events to detect status changes and renders a non-dismissible alert at the top of the screen with a localized message indicating that some features may be unavailable while offline.

src/components/OfflineBanner · high confidence

The repository has been set up as a fresh Ant Design Pro v6 starter, replacing the previous placeholder content with full documentation, a Code of Conduct, and an MIT license. The development workflow now uses Biome for code formatting and linting (configured in biome.json and .lintstagedrc) instead of previous tooling, and enforces conventional commits via commitlint. TypeScript is configured with strict mode and React 19 JSX runtime support, while the test suite has migrated from Jest to Vitest (vitest.config.ts) with happy-dom environment. The project also introduces Tailwind CSS v4 for styling (tailwind.config.js, tailwind.css) and includes AI assistant capabilities via built-in Claude Code skills (/pro-upgrade and /antd) documented in CLAUDE.md.

(repo-wide) · high confidence

A new index.ts file has been added to src/components to serve as a central entry point for the component library. This change consolidates the public API by explicitly re-exporting layout components (Footer, DocLink, LangDropdown, VersionDropdown, AvatarDropdown) and business components (ArticleListContent, AvatarList, ErrorBoundary, OfflineBanner, StandardFormRow, TagSelect), simplifying how consumers import these modules.

src/components · high confidence

The Account Center page has been rebuilt to use @tanstack/react-query for data fetching (replacing the previous useRequest pattern) and antd-style for component styling, aligning with the broader migration to Ant Design v6 APIs. This change introduces a new TypeScript type definition file (data.d.ts) for user and list data structures, a dedicated style module (Center.style.ts) leveraging Ant Design tokens, and a mock data handler (\_mock.ts) for local development, resulting in a more robust and maintainable user profile interface.

src/pages/account/center · high confidence

The account settings components (base, binding, notification, security) have been updated to use @tanstack/react-query for data fetching, replacing the previous useRequest pattern. This migration includes specific fixes for the base settings form: geographic province and city selects now correctly normalize initial values to support labelInValue mode, and incomplete geographic data is handled gracefully to prevent form errors. The base view also implements logic to reset the city field when the province changes, ensuring consistent user experience when updating location information.

src/pages/account/settings/components · high confidence

A new symbolic link at .agents/skills was created, pointing to ../.claude/skills. This change establishes a reference for AI coding agents to access specific skill definitions, supporting the guidance documentation added in the same commit.

.agents · high confidence

The Advanced Form and Step Form demo pages have been refactored to align with Ant Design v6 APIs. This includes replacing legacy CSS class references (such as \ant-legacy-form-item\) with modern styling approaches using \antd-style\, updating component usage to match the new Pro Components interface, and resolving TypeScript and linting errors to ensure stable behavior and cleaner code.

src/pages/form/advanced-form · high confidence

The Applications component in the account center has been rewritten to use @tanstack/react-query for data fetching (replacing the previous useRequest hook) and antd-style for styling. This change updates how the list of applications is retrieved and rendered, ensuring consistent data loading behavior and modernized CSS handling within this specific component.

src/pages/account/center/components/Applications · high confidence

The Articles component in the account center has been rewritten to use @tanstack/react-query for data fetching instead of the previous useRequest hook, and now imports its styles from a dedicated index.style.ts file using antd-style. This change updates how the article list data is retrieved and rendered, ensuring consistent styling for list items and meta titles while maintaining the same visual structure for users viewing their articles.

src/pages/account/center/components/Articles · high confidence

The Basic List page in src/pages/list/basic-list has been refactored to use @tanstack/react-query for data fetching and mutations, replacing the previous useRequest implementation. This change introduces new service and mock files to handle API interactions (query, add, update, remove) and updates the component to leverage React Query hooks for state management, improving data synchronization and caching behavior for the list operations.

src/pages/list/basic-list · high confidence

The Card List page in src/pages/list/card-list has been updated to fetch data using @tanstack/react-query instead of the previous useRequest hook. This change introduces a new service layer (service.ts) and mock data handler (\_mock.ts) to support the new data fetching pattern, while the main component (index.tsx) now leverages useQuery to manage loading states and render the list of cards.

src/pages/list/card-list · high confidence

The ChartCard component in the dashboard analysis section has been rewritten to use the new \createStyles\ API from \antd-style\ for styling and the \styles\ prop on the Ant Design \Card\ component. This change updates the component's internal structure to support the theming and styling conventions of Ant Design v6, ensuring consistent visual presentation for chart metrics, titles, and footers.

src/pages/dashboard/analysis/components/Charts/ChartCard · high confidence

The .husky directory now contains updated pre-commit and commit-msg hook scripts. The pre-commit hook executes lint-staged, and the commit-msg hook runs commitlint to validate commit messages. This change reflects the migration from yorkie to husky and the re-introduction of commit linting workflows.

.husky · medium confidence

The application's API backend has been migrated to a Cloudflare Worker using the Hono framework. This change introduces a new entry point that mounts multiple route modules (user, dashboard, table, list, profile, settings, geographic, monitor, notices, errors) under the /api prefix. Users will now interact with these endpoints via the Cloudflare Worker infrastructure, which includes CORS configuration, mock data responses for authentication and user management, and deterministic data generation for charts and lists to ensure reproducible results.

cloudflare-worker/src/routes · high confidence

The applications search page in the list module has been refactored to use @tanstack/react-query for data fetching, replacing the previous useRequest implementation. This change updates the data layer to leverage react-query's caching and loading states, while the UI components and styling remain consistent with the existing Ant Design-based layout.

src/pages/list/search/applications · high confidence

The Map component in the dashboard monitor has been rewritten from a class-based implementation to a functional component that replaces the previous L7 library with D3.js. This change introduces a new hex-tile visualization for geographic data, utilizing a land-bitmap optimization for performance, and includes a new styled tooltip component for displaying data details on hover.

src/pages/dashboard/monitor/components/Map · high confidence

Added src/utils/chinaDivision.ts and its tests to provide province and city options for China, including support for municipalities, Hong Kong, Macao, and Taiwan, ensuring compatibility with existing six-digit province IDs. Additionally, added src/utils/format.ts to replace the previous numeral.js dependency for number formatting, introducing formatNumber (with thousand separators) and formatYuan functions to reduce bundle size.

src/utils · high confidence

The Basic and Advanced profile pages have been refactored to use @tanstack/react-query for data fetching, replacing the previous request mechanism. This change introduces a more robust caching and state management layer for profile data, ensuring that information like user details, order progress, and operation logs is fetched and cached efficiently. Users will experience consistent data loading states and improved performance when navigating between profile sections.

src/pages/profile · high confidence

The Projects component in the account center has been rewritten to replace the previous request handling with @tanstack/react-query for data fetching, improving state management and caching. The component now uses antd-style for scoped styling, defining specific styles for card layouts, hover states, and avatar lists. This change ensures consistent data loading behavior and modernized styling for the project listing interface.

src/pages/account/center/components/Projects · high confidence

The 403, 404, and 500 exception pages have been updated to use Ant Design 5.x styling, wrapping the error content in borderless Card components and utilizing the Result component for a consistent visual presentation. Additionally, the navigation buttons on these pages now include the prefetch attribute, enabling faster page transitions when users return to the home page.

src/pages/exception · high confidence

The Analysis Dashboard components have been completely rewritten to use a new set of internal UI primitives (NumberInfo, Trend, ChartCard) and modern styling via antd-style. This update introduces a refreshed visual design for key metrics, including the IntroduceRow (total sales, visits, payments, and campaign effects), OfflineData (conversion rates with ring charts), ProportionSales (sales channel pie chart), SalesCard (time-range selectable bar charts and rankings), and TopSearch (search keyword trends). The changes also include a new PageLoading component and updated chart styling, resulting in a more consistent and polished user interface for the dashboard.

src/pages/dashboard/analysis/components · high confidence

The Welcome page now renders localized documentation content using the XMarkdown component, featuring syntax-highlighted code blocks via highlight.js and a gradient title for version branding. It includes dedicated CSS styles for both light and dark themes, ensuring code blocks and markdown elements adapt correctly to the user's theme preference. The Admin page has been updated to use PageContainer from @ant-design/pro-components and displays a localized alert message within a Card component.

src/pages · high confidence

The right-side header area has been restructured to use dedicated dropdown components for language switching, version selection, and user account actions. A new LangDropdown component now provides a language selector with emoji flags for supported locales, while a VersionDropdown allows users to open documentation for previous Ant Design Pro versions (v1–v5) in new tabs. The AvatarDropdown component handles user settings, theme toggling, and logout functionality, replacing the previous inline implementation. These components share a unified styling approach via useHeaderActionStyles, ensuring consistent appearance and behavior across all header actions.

src/components/RightContent · high confidence

The CreateForm and UpdateForm components in the table-list page have been rewritten to use @tanstack/react-query for handling API mutations. When users create or update rules, the forms now leverage useMutation to send requests, automatically invalidate the 'rule' query cache upon success, and provide immediate feedback via Ant Design message notifications, replacing the previous data-fetching implementation.

src/pages/table-list/components · high confidence

The StandardFormRow component has been completely rewritten to use the antd-style library for styling instead of legacy CSS classes. It now supports three distinct layout modes via props: 'block' for stacking items, 'grid' for floating labels, and 'last' to remove bottom borders and spacing on the final row. The component also introduces a 'title' prop to render a labeled header with a colon suffix, replacing previous manual label handling.

src/components/StandardFormRow · high confidence

The success result page has been updated to align with Ant Design v6. The component now imports specific UI elements (Button, Card, Descriptions, Result, Steps) directly from the 'antd' package and utilizes the 'antd-style' library for styling, replacing previous CSS approaches with a token-based system. This ensures the page renders correctly with the latest design tokens and component behaviors.

src/pages/result/success · high confidence

The TagSelect component has been refactored to use the new antd-style system for styling, replacing previous styling approaches. This change introduces an expandable UI feature: when the expandable prop is enabled, a trigger button allows users to toggle between a collapsed view (showing a limited number of tags) and an expanded view (showing all tags), with customizable text for expand, collapse, and select-all actions. The component also now uses useMemo for performance optimization when processing tag children.

src/components/TagSelect · high confidence

The Workplace dashboard page has been refactored to replace the previous request handling with React Query (@tanstack/react-query). This change introduces server-state management for fetching project notices, user activities, and chart data, providing built-in loading states, caching, and automatic re-fetching capabilities. The implementation includes a new service layer in service.ts defining the API endpoints, a mock data file for development, and updated TypeScript definitions in data.d.ts to support the new data structures.

src/pages/dashboard/analysis, src/pages/dashboard/workplace · high confidence

A new loading script has been added to the public directory to address the issue of a white screen appearing during the initial page load. This script injects a styled loading spinner and placeholder text into the root element if it is empty, ensuring users see a visual indication that resources are being loaded rather than a blank page.

public/scripts · high confidence

Added snapshot tests for the login page UI; Added test coverage for access control and application initialization; Added test setup and mocks for Vitest migration; Added unit tests for the Table List page.

This change introduces the foundational dependency manifests for the project. The root package.json establishes Ant Design Pro v6.0.3, upgrading core runtime dependencies to React 19 and Ant Design 6, while shifting the build toolchain to Umi 4 and the test runner to Vitest. It also sets a minimum Node.js version of 22. Additionally, a new cloudflare-worker subdirectory is added with its own package.json, defining a serverless API environment using Hono and Wrangler.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• First survey — no prior run to compare against. CAI 60.

• Code Health 96
• Architecture 98
• Maturity 64
• Readiness 48
• Security 69
• Accessibility 72

• 300 commits — 227 feature/other, 73 fixes

• (root) — 148 commits
• src/pages — 65 commits
• .github/workflows — 22 commits
• (repo) — 15 commits
• config/config.ts — 10 commits
• src/locales — 5 commits
• cloudflare-worker/src — 4 commits
• config/routes.ts — 4 commits
• src/components — 4 commits
• docs/cheatsheet.en-US.md — 3 commits
• src/loading.tsx — 3 commits
• .github/dependabot.yml — 2 commits
• src/app.tsx — 2 commits
• src/global.less — 2 commits
• src/requestErrorConfig.ts — 2 commits
• src/typings.d.ts — 2 commits
• .claude/settings.local.json — 1 commit
• .husky/commit-msg — 1 commit
• config/defaultSettings.ts — 1 commit
• config/routes.simple.ts — 1 commit

• fix: Fix missing swagger-ui package when starting with pnpm (#11748)
• fix: Merge branch 'master' into fix/settings-border
• fix: Merge pull request #11646 from ant-design/fix/settings-border
• fix: Merge pull request #11676 from ant-design/fix/monitor-map
• fix: chore: fix biome config
• fix: chore: fix biome config
• fix: chore: fix biome lint errors
• fix: chore: fix biome lint errors
• fix: chore: fix deps
• fix: chore: fix ts errors
• fix: chore: route icons, dead .less cleanup, and security fix (#11694)
• fix: chore: update package-lock.json to fix production build error (#11736)
• fix: fix(ci): disable utoo binary cache to fix Windows clone failure
• fix: fix(deps): resolve actionable security alerts (#11933)
• fix: fix: 404 path in routes.ts (#11528)
• fix: fix: add getIntl() support to i18n-remove script (#11767)
• fix: fix: add marginInlineStart to right content in account/settings
• fix: fix: add missing basic-list files and update snapshots
• fix: fix: align pro components peer deps (#11877)
• fix: fix: biome schema
• …and 280 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

ant-design/ant-design-pro was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.