diff --git a/antdv-next-admin/.editorconfig b/antdv-next-admin/.editorconfig
new file mode 100644
index 0000000..111620e
--- /dev/null
+++ b/antdv-next-admin/.editorconfig
@@ -0,0 +1,14 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/antdv-next-admin/.env b/antdv-next-admin/.env
new file mode 100644
index 0000000..54cd29e
--- /dev/null
+++ b/antdv-next-admin/.env
@@ -0,0 +1,5 @@
+# Application Title
+VITE_APP_TITLE=Antdv Next Admin
+
+# API Base URL
+VITE_API_BASE_URL=/api
diff --git a/antdv-next-admin/.env.development b/antdv-next-admin/.env.development
new file mode 100644
index 0000000..f1693f6
--- /dev/null
+++ b/antdv-next-admin/.env.development
@@ -0,0 +1,7 @@
+# Development Environment
+
+# Enable Mock Data
+VITE_USE_MOCK=true
+
+# API Base URL (use mock in development)
+VITE_API_BASE_URL=/api
diff --git a/antdv-next-admin/.env.production b/antdv-next-admin/.env.production
new file mode 100644
index 0000000..1ce505f
--- /dev/null
+++ b/antdv-next-admin/.env.production
@@ -0,0 +1,7 @@
+# Production Environment
+
+# Enable Mock Data for demo (GitHub Pages is static, so we must NOT call /api)
+VITE_USE_MOCK=true
+
+# API Base URL (unused in mock mode; keep empty to avoid accidental /api calls)
+VITE_API_BASE_URL=
diff --git a/antdv-next-admin/.github/workflows/build.yml b/antdv-next-admin/.github/workflows/build.yml
new file mode 100644
index 0000000..a67489f
--- /dev/null
+++ b/antdv-next-admin/.github/workflows/build.yml
@@ -0,0 +1,35 @@
+name: Build
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install rolldown native bindings
+        run: pnpm add @rolldown/binding-linux-x64-gnu -D
+
+      - name: Build
+        run: pnpm run build
diff --git a/antdv-next-admin/.github/workflows/deploy.yml b/antdv-next-admin/.github/workflows/deploy.yml
new file mode 100644
index 0000000..8ef46c8
--- /dev/null
+++ b/antdv-next-admin/.github/workflows/deploy.yml
@@ -0,0 +1,68 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main # 当推送到 main 分支时触发
+
+  # 允许手动触发
+  workflow_dispatch:
+
+# 设置 GITHUB_TOKEN 的权限
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 只允许一个并发部署
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install rolldown native bindings
+        run: pnpm add @rolldown/binding-linux-x64-gnu -D
+
+      - name: Build
+        run: pnpm run build
+        env:
+          NODE_ENV: production
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./dist"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/antdv-next-admin/.gitignore b/antdv-next-admin/.gitignore
new file mode 100644
index 0000000..a4b673f
--- /dev/null
+++ b/antdv-next-admin/.gitignore
@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment files
+.env.local
+.env.*.local
+
+.claude
+.agents
diff --git a/antdv-next-admin/.oxfmtrc.json b/antdv-next-admin/.oxfmtrc.json
new file mode 100644
index 0000000..82d6ce1
--- /dev/null
+++ b/antdv-next-admin/.oxfmtrc.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "insertFinalNewline": true,
+  "sortImports": {
+    "groups": [
+      "type-import",
+      ["value-builtin", "value-external"],
+      "value-internal",
+      ["value-parent", "value-sibling", "value-index"],
+      "unknown"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/antdv-next-admin/.oxlintrc.json b/antdv-next-admin/.oxlintrc.json
new file mode 100644
index 0000000..0764187
--- /dev/null
+++ b/antdv-next-admin/.oxlintrc.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["vue", "typescript", "import"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "perf": "warn"
+  },
+  "rules": {
+    "no-unused-vars": "warn",
+    "typescript/no-explicit-any": "warn",
+    "typescript/no-unnecessary-type-assertion": "warn",
+    "import/no-duplicates": "error"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.vue"],
+      "rules": {
+        "vue/no-unused-vars": "warn"
+      }
+    },
+    {
+      "files": ["mock/**/*"],
+      "rules": {
+        "no-console": "off"
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/antdv-next-admin/AGENTS.md b/antdv-next-admin/AGENTS.md
new file mode 100644
index 0000000..bf448f6
--- /dev/null
+++ b/antdv-next-admin/AGENTS.md
@@ -0,0 +1,251 @@
+# Antdv Next Admin - Agent Guidelines
+
+A Vue 3 + TypeScript + Ant Design Vue admin scaffold with RBAC, theming, i18n, and mock APIs.
+
+## Project Structure
+
+```
+src/
+├── api/              # API layer - organized by domain (auth.ts, user.ts)
+├── assets/styles/    # Global styles (variables.css, animations.css, global.css)
+├── components/       # Reusable components (Layout/, Permission/, etc.)
+├── composables/      # Composition functions (usePermission.ts, useWatermark.ts)
+├── directives/       # Custom Vue directives (permission.ts)
+├── locales/          # i18n translations (zh-CN.ts, en-US.ts)
+├── router/           # Vue Router (routes.ts, guards.ts, utils.ts)
+├── stores/           # Pinia stores - one per domain (auth.ts, theme.ts, layout.ts)
+├── types/            # TypeScript interfaces/types (auth.ts, api.ts, router.ts)
+├── utils/            # Pure utility functions (request.ts, storage.ts, helpers.ts)
+└── views/            # Page components (dashboard/, system/, examples/)
+
+mock/
+├── data/             # Mock datasets (users.data.ts, roles.data.ts)
+└── handlers/         # Mock API handlers (auth.mock.ts, user.mock.ts)
+
+tests/
+├── e2e/              # End-to-end tests (*.spec.ts) - templates for future Playwright setup
+└── unit/             # Unit tests (*.spec.ts) - templates for future Vitest setup
+```
+
+## Build, Test, and Development Commands
+
+### Essential Commands
+```bash
+npm install              # Install all dependencies
+npm run dev              # Start dev server at http://localhost:3000 (with mock APIs)
+npm run build            # Type check + production build → dist/
+npm run preview          # Preview production build locally
+npm run type-check       # Run vue-tsc --noEmit (NO auto-fix)
+```
+
+### Pre-commit Requirements
+**BEFORE any commit or PR:**
+1. Run `npm run type-check` - must exit 0 with no errors
+2. Run `npm run build` - must complete successfully
+3. For RBAC/auth changes: manually verify login with `admin/123456` and `user/123456`
+
+### Testing Notes
+- **No test runner configured yet** - Playwright/Vitest dependencies are NOT installed
+- Test files in `tests/` are **templates** for future setup
+- To add tests later: install test framework first, update package.json scripts, then write tests
+
+## Code Style Guidelines
+
+### Formatting (EditorConfig)
+- **Indentation**: 2 spaces (NO tabs)
+- **Line endings**: LF (Unix-style)
+- **Encoding**: UTF-8
+- **Final newline**: required
+- **Trailing whitespace**: trimmed (except in .md files)
+
+### TypeScript
+- **Strict mode enabled** (`tsconfig.json`): all strict checks ON
+- **Path aliases**: use `@/` for `src/` (e.g., `import { useAuthStore } from '@/stores/auth'`)
+- **Type annotations**: explicit return types for public functions/composables
+- **Type definitions**: place shared types in `src/types/`, domain-specific types near usage
+- **No type suppression**: NEVER use `as any`, `@ts-ignore`, or `@ts-expect-error`
+
+### Vue Component Style
+**Component naming:**
+- **Files**: PascalCase for reusable components (`NotificationPanel.vue`, `ThemeToggle.vue`)
+- **Views**: route-based folders with `index.vue` (`src/views/dashboard/index.vue`)
+
+**Component structure (Composition API only):**
+```vue
+<template>
+  <!-- Template using script setup's reactive state -->
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import type { User } from '@/types/auth'
+
+// Props
+interface Props {
+  userId: string
+  mode?: 'edit' | 'view'
+}
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'view'
+})
+
+// Emits
+const emit = defineEmits<{
+  save: [user: User]
+  cancel: []
+}>()
+
+// State
+const authStore = useAuthStore()
+const loading = ref(false)
+const user = computed(() => authStore.user)
+
+// Methods (prefer explicit function declarations)
+function handleSave() {
+  // Implementation
+}
+</script>
+
+<style scoped>
+/* Component-specific styles */
+</style>
+```
+
+### Import Ordering
+Group imports in this order (blank line between groups):
+```ts
+// 1. Vue core
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// 2. Third-party libraries
+import { message } from 'antdv-next'
+import dayjs from 'dayjs'
+
+// 3. Project imports (@/ alias)
+import { useAuthStore } from '@/stores/auth'
+import { login, getUserInfo } from '@/api/auth'
+import type { User, LoginParams } from '@/types/auth'
+```
+
+### Naming Conventions
+| Type | Convention | Example |
+|------|-----------|---------|
+| Components | PascalCase | `NotificationPanel.vue`, `TabBar.vue` |
+| Composables | `useXxx.ts` | `usePermission.ts`, `useFullscreen.ts` |
+| Stores | Domain-based | `auth.ts`, `permission.ts`, `theme.ts` |
+| Types/Interfaces | PascalCase | `User`, `LoginParams`, `ApiResponse<T>` |
+| Functions | camelCase | `getUserInfo()`, `checkPermission()` |
+| Constants | SCREAMING_SNAKE_CASE | `TOKEN_KEY`, `API_BASE_URL` |
+
+### Error Handling
+- **Try/catch**: wrap all async operations with meaningful error messages
+- **Axios interceptors**: global error handling in `src/utils/request.ts`
+- **User feedback**: use `message.error()` or `notification.error()` from antdv-next
+```ts
+try {
+  const response = await getUserInfo()
+  // Success path
+} catch (error) {
+  console.error('Failed to fetch user info:', error)
+  message.error('获取用户信息失败')
+}
+```
+
+### State Management (Pinia)
+- **Setup stores only** (NOT options API)
+- **One store per domain** - no god-objects
+- **Store structure pattern:**
+```ts
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useAuthStore = defineStore('auth', () => {
+  // State (ref)
+  const token = ref<string | null>(null)
+  
+  // Getters (computed)
+  const isLoggedIn = computed(() => !!token.value)
+  
+  // Actions (functions)
+  const setToken = (newToken: string | null) => {
+    token.value = newToken
+  }
+  
+  return { token, isLoggedIn, setToken }
+})
+```
+
+### Permission System Usage
+**Directive (in templates):**
+```vue
+<!-- Single permission (OR logic by default) -->
+<a-button v-permission="'user.create'">Create</a-button>
+
+<!-- Multiple permissions (OR logic) -->
+<a-button v-permission="['user.edit', 'user.delete']">Actions</a-button>
+
+<!-- ALL permissions required (AND logic) -->
+<a-button v-permission.all="['user.edit', 'user.approve']">Approve</a-button>
+```
+
+**Composable (in script):**
+```ts
+const { can, canAll, hasRole } = usePermission()
+
+if (can('user.create')) {
+  // User has permission
+}
+
+if (canAll(['user.edit', 'user.approve'])) {
+  // User has ALL permissions
+}
+```
+
+## Configuration & Environment
+
+### Environment Variables
+- **Development** (`.env.development`): `VITE_USE_MOCK=true`, `VITE_API_BASE_URL=/api`
+- **Production** (`.env.production`): `VITE_USE_MOCK=false`, set real API URL
+- **Never commit secrets** - use `.env.local` for sensitive values (gitignored)
+
+### Mock API System
+- **Auto-enabled in dev** via `vite-plugin-mock-dev-server`
+- **Handlers**: `mock/handlers/*.mock.ts` define endpoints
+- **Data**: `mock/data/*.data.ts` contain sample datasets
+- **Prefix**: all mock APIs use `/api` prefix (e.g., `/api/auth/login`)
+
+## Common Pitfalls to Avoid
+
+1. **No linter configured** - manually match nearby code style
+2. **Don't suppress TypeScript errors** - fix the root cause instead
+3. **Test files are templates** - don't try to run them without installing test frameworks
+4. **Mock users**: `admin/123456` has full permissions, `user/123456` has limited permissions
+5. **Dynamic routes**: permissions control route visibility via `src/router/guards.ts`
+6. **KeepAlive caching**: managed by `tabs` store - check cached component names
+
+## Commit Guidelines
+
+**Use Conventional Commits:**
+```
+type(scope): summary
+
+Examples:
+feat(auth): add biometric login support
+fix(permission): correct role-based route filtering
+refactor(layout): extract sidebar menu logic to composable
+docs(readme): update installation instructions
+```
+
+**Commit types:** `feat`, `fix`, `refactor`, `docs`, `style`, `test`, `chore`, `perf`
+
+## Pull Request Checklist
+
+- [ ] `npm run type-check` passes
+- [ ] `npm run build` succeeds
+- [ ] Manually tested login flow (if auth-related)
+- [ ] Manually verified permissions (if RBAC-related)
+- [ ] Screenshots/GIFs included (for UI changes)
+- [ ] Commit messages follow Conventional Commits
+- [ ] Changes are scoped (no unrelated refactors mixed in)
diff --git a/antdv-next-admin/CLAUDE.md b/antdv-next-admin/CLAUDE.md
new file mode 100644
index 0000000..12f95cb
--- /dev/null
+++ b/antdv-next-admin/CLAUDE.md
@@ -0,0 +1,343 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+**antdv-next-admin** is a modern Vue 3 + TypeScript admin scaffold built on:
+- **antdv-next** (Ant Design Vue) - UI component library
+- **Pinia** - State management
+- **Vue Router** - Routing with dynamic route generation
+- **vue-i18n** - Internationalization (Chinese/English)
+- **Vite** - Build tool
+- Full RBAC permission system with dynamic routes
+- Mock data system for development
+
+## Environment Requirements
+
+- Node.js >= 16
+- npm >= 8
+
+## Common Commands
+
+```bash
+# Development
+npm run dev              # Start dev server on http://localhost:3000
+
+# Building
+npm run build            # Production build
+npm run build:check      # Type check before build
+npm run preview          # Preview production build
+
+# Type Checking
+npm run type-check       # TypeScript type checking
+```
+
+**Note**: This project currently has no test or lint scripts configured.
+
+## Architecture
+
+### State Management (Pinia Stores)
+
+All stores use the **setup syntax** pattern. Located in `src/stores/`:
+
+- **auth** - Authentication, user info, roles, permissions. Includes demo mode for development.
+- **permission** - Dynamic route generation based on user roles/permissions
+- **theme** - Theme mode (light/dark/auto), primary color (6 presets), CSS variable management
+- **layout** - Layout mode (vertical/horizontal), sidebar state, mobile detection
+- **tabs** - Multi-tab system with KeepAlive caching, affix tabs, right-click menu
+- **settings** - User preferences (animations, gray mode, menu theme, etc.)
+- **notification** - Notification panel state
+
+**Key Pattern**: Store initialization happens in router guards. Auth store includes both demo mode (mock) and production mode (real API) login flows.
+
+### Routing System
+
+Routes are organized in three categories (`src/router/routes.ts`):
+
+1. **staticRoutes** - No auth required (login, error pages)
+2. **basicRoutes** - Require auth (dashboard, profile)
+3. **asyncRoutes** - Require specific permissions (system management, etc.)
+
+**Dynamic Route Generation**:
+- Routes are generated in `src/router/guards.ts` during navigation
+- Permission store (`generateRoutes`) filters async routes based on user roles/permissions
+- Routes are added dynamically with `router.addRoute()` after successful login
+- First navigation to dynamic route may redirect to 404, then recover by regenerating routes
+
+**Route Meta Fields**:
+```typescript
+{
+  title: string           // i18n key for page title
+  icon?: string           // Icon component name (e.g., 'DashboardOutlined')
+  requiresAuth?: boolean  // Default true
+  requiredPermissions?: string[]  // Permission codes required
+  requiredRoles?: string[]        // Role codes required
+  hidden?: boolean        // Hide from menu
+  affix?: boolean         // Pin tab (can't be closed)
+  order?: number          // Menu sort order
+}
+```
+
+### Permission System
+
+Three ways to check permissions:
+
+1. **Directive** (`src/directives/permission.ts`):
+   ```vue
+   <a-button v-permission="'user.create'">Create</a-button>
+   <a-button v-permission="['user.edit', 'user.delete']">Actions</a-button>
+   <a-button v-permission.all="['user.edit', 'user.approve']">Approve</a-button>
+   ```
+
+2. **Composable** (`src/composables/usePermission.ts`):
+   ```typescript
+   const { can, canAll } = usePermission()
+   if (can('user.create')) { /* ... */ }
+   if (canAll(['user.edit', 'user.approve'])) { /* ... */ }
+   ```
+
+3. **Component** (`src/components/Permission/PermissionButton.vue`):
+   ```vue
+   <PermissionButton permission="user.create">
+     <a-button>Create User</a-button>
+   </PermissionButton>
+   ```
+
+### API & Request Handling
+
+**Base Service**: `src/utils/request.ts` - Axios instance with interceptors
+
+- Auto-adds Bearer token from auth store
+- Handles 401 (logout + redirect to login), 403 (forbidden), 404, 500
+- Response interceptor checks `res.code` field (expects 200)
+- All API calls use the `request` helper with typed responses
+
+**Mock System** (`mock/` directory):
+- Enabled via `VITE_USE_MOCK=true` in `.env.development`
+- Two-layer structure: `data/` (mock data sources) + `handlers/` (request handlers)
+- Available mock APIs: auth, users, roles, permissions, dashboard
+- Supports pagination, search, CRUD operations
+
+### Pro Components
+
+**ProTable** (`src/components/Pro/ProTable/`):
+- Configuration-based table with search form, toolbar, pagination
+- Column types defined via `ProTableColumn` interface (see `src/types/pro.ts`)
+- Supports value types: text, date, dateTime, tag, badge, money, percent, avatar, etc.
+- Search types: input, select, dateRange, datePicker, etc.
+- Built-in features: column resizing, fixed headers, sorting, actions column
+- **Important**: Uses CSS variables for scrollbar width alignment (see scrollbar.ts utility)
+- Two rendering modes:
+  - `scroll-mode`: Table handles its own scrolling
+  - `fill-mode`: Parent container scrolls, table fills height with `fixedHeader`
+
+**ProForm** (`src/components/Pro/ProForm/`):
+- Configuration-based form with validation
+- Form item types: input, password, textarea, number, select, radio, checkbox, switch, datePicker, etc.
+- Grid layout support with `colSpan` and responsive `cols`
+- Dynamic options via `request` function
+- Custom rendering via `render` prop
+
+**Type Definitions**: Always reference `src/types/pro.ts` for column/form configurations.
+
+### Icons
+
+Two icon systems are available:
+
+1. **Ant Design Icons** (`@antdv-next/icons`):
+   ```vue
+   import { UserOutlined } from '@antdv-next/icons'
+   ```
+
+2. **Iconify** (`@iconify/vue`):
+   - Component: `src/components/Icon/index.vue`
+   - Picker: `src/components/IconPicker/index.vue`
+   - Supports online/offline modes with local icon sets (ion, mdi, ri)
+   - Use `<Icon icon="mdi:home" />` syntax
+
+### Theme System
+
+Themes use **CSS variables** defined in `src/assets/styles/variables.css`:
+
+- 6 preset primary colors: blue (default), green, purple, red, orange, cyan
+- Dark/light/auto modes
+- CSS variables follow pattern: `--ant-primary-color`, `--bg-color`, `--text-color`, etc.
+- Theme store dynamically updates CSS variables on document root
+- Sidebar supports independent dark/light theme (via `--sidebar-bg-color` variables)
+
+### Internationalization
+
+**System**: vue-i18n with locale files in `src/locales/`
+
+- `zh-CN.ts` - Chinese (default)
+- `en-US.ts` - English
+- Access via `$t('key')` in templates or `t('key')` from `useI18n()`
+- Helper: `src/utils/i18n.ts` - `resolveLocaleText()` for dynamic text resolution
+
+### Charts & Visualization
+
+**ECharts Integration**: The project includes `echarts` and `vue-echarts` for data visualization in the dashboard. Use the `<v-chart>` component from `vue-echarts` for rendering charts.
+
+### Keyboard Shortcuts
+
+- `Ctrl/Cmd + K` - Open global menu search
+
+## Development Guidelines
+
+### File Naming & Structure
+
+- Components: **PascalCase** (e.g., `AdminLayout.vue`)
+- Files: **kebab-case** (e.g., `use-permission.ts`)
+- Path alias: Use `@/` for `src/` (configured in vite.config.ts and tsconfig.json)
+
+### TypeScript
+
+- **Strict mode enabled** - All code must be type-safe
+- Types organized in `src/types/`: api.ts, auth.ts, router.ts, layout.ts, pro.ts
+- Use `type` for object shapes, `interface` for extensible contracts
+- Route type: `AppRouteRecordRaw` (extends Vue Router's `RouteRecordRaw`)
+- API responses: `ApiResponse<T>` pattern
+
+### Adding New Pages
+
+1. Create view in `src/views/[module]/`
+2. Add route to appropriate category in `src/router/routes.ts`
+3. Add i18n keys to `src/locales/zh-CN.ts` and `en-US.ts`
+4. If requires permissions, set `meta.requiredPermissions` or `meta.requiredRoles`
+5. Router guards will handle dynamic route injection
+
+### Adding New Stores
+
+Follow the **setup syntax** pattern:
+
+```typescript
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useMyStore = defineStore('my-store', () => {
+  // State
+  const data = ref<MyType | null>(null)
+
+  // Getters
+  const processedData = computed(() => /* ... */)
+
+  // Actions
+  const fetchData = async () => { /* ... */ }
+
+  return { data, processedData, fetchData }
+})
+```
+
+Export from `src/stores/index.ts` for centralized access.
+
+### Working with ProTable
+
+Always define columns using the `ProTableColumn` type:
+
+```typescript
+import type { ProTableColumn } from '@/types/pro'
+
+const columns: ProTableColumn[] = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    search: true,           // Enable search
+    searchType: 'input',    // Search field type
+    valueType: 'text'       // Display type
+  },
+  {
+    title: 'Status',
+    dataIndex: 'status',
+    valueType: 'tag',
+    valueEnum: {
+      active: { text: 'Active', status: 'success' },
+      inactive: { text: 'Inactive', status: 'default' }
+    }
+  }
+]
+```
+
+**Known Issue**: ProTable had scrollbar alignment bugs that were fixed by:
+- Using CSS variables for dynamic scrollbar width (`--actual-scrollbar-width`)
+- Scrollbar detection utility in `src/utils/scrollbar.ts`
+- When modifying table layout, verify scrollbar placeholder alignment
+
+### Authentication Flow
+
+**Demo Mode** (development):
+- Credentials: `admin/123456` or `user/123456`
+- No real backend, uses mock data from auth store
+- Token stored in localStorage
+
+**Production Mode**:
+- Set `VITE_USE_MOCK=false` and `VITE_API_BASE_URL` in `.env.production`
+- Uses real API calls via `src/api/auth.ts`
+
+### Mock Data Development
+
+To add new mock endpoints:
+
+1. Create data source in `mock/data/[entity].data.ts`
+2. Create handler in `mock/handlers/[entity].mock.ts`
+3. Mock server auto-reloads, accessible at `/api/*` prefix
+
+## Common Patterns
+
+### Conditional Rendering by Permission
+
+```typescript
+import { useAuthStore } from '@/stores/auth'
+const authStore = useAuthStore()
+
+if (authStore.hasAnyPermission(['user.edit', 'user.delete'])) {
+  // Show actions
+}
+```
+
+### Accessing Current Route in Components
+
+```typescript
+import { useRoute } from 'vue-router'
+const route = useRoute()
+console.log(route.meta.title)
+```
+
+### Multi-Tab Operations
+
+```typescript
+import { useTabsStore } from '@/stores/tabs'
+const tabsStore = useTabsStore()
+
+tabsStore.closeTab(path)        // Close specific tab
+tabsStore.closeOtherTabs(path)  // Close all except this
+tabsStore.closeAllTabs()        // Close all closeable tabs
+tabsStore.refreshTab(path)      // Refresh tab content
+```
+
+### Theme Changes
+
+```typescript
+import { useThemeStore } from '@/stores/theme'
+const themeStore = useThemeStore()
+
+themeStore.setThemeMode('dark')           // 'light' | 'dark' | 'auto'
+themeStore.setPrimaryColor('#1890ff')     // Any valid color
+```
+
+## Important Notes
+
+- **Never commit** environment-specific values to `.env` files
+- **Router guards** handle most auth/permission logic - avoid duplicating checks
+- **CSS variables** are the preferred method for theming - avoid hardcoded colors
+- **ProTable fixedHeader mode** requires parent container with fixed height
+- **Dynamic routes** are regenerated on each login - changes to `asyncRoutes` require re-login
+- **Tabs state** persists in localStorage via settings store
+- **Mock mode** is determined by `VITE_USE_MOCK` env variable, checked at runtime
+
+## Default Accounts
+
+Development mode credentials:
+
+- Admin: `admin / 123456`
+- User: `user / 123456`
diff --git a/antdv-next-admin/DEPLOYMENT.md b/antdv-next-admin/DEPLOYMENT.md
new file mode 100644
index 0000000..cbbabad
--- /dev/null
+++ b/antdv-next-admin/DEPLOYMENT.md
@@ -0,0 +1,93 @@
+# GitHub Pages 部署指南
+
+本项目已配置为可自动部署到 GitHub Pages。
+
+## 📦 部署地址
+
+- **生产环境**: https://yelog.github.io/antdv-next-admin/
+
+## 🚀 自动部署
+
+项目使用 GitHub Actions 实现自动化部署：
+
+1. 当代码推送到 `main` 分支时，会自动触发部署流程
+2. GitHub Actions 会自动构建项目并部署到 GitHub Pages
+3. 部署完成后，可以通过上述地址访问
+
+## ⚙️ 配置说明
+
+### 1. Vite 配置
+```typescript
+// vite.config.ts
+base: process.env.NODE_ENV === 'production' ? '/antdv-next-admin/' : '/'
+```
+
+### 2. GitHub Actions
+- 工作流文件: `.github/workflows/deploy.yml`
+- 触发条件: 推送到 main 分支或手动触发
+- 构建命令: `npm run build`
+
+### 3. SPA 路由支持
+- `public/404.html`: 处理 404 重定向
+- `index.html`: 接收重定向并恢复路由
+- `public/.nojekyll`: 禁用 Jekyll 处理
+
+## 📝 手动部署步骤
+
+如果需要手动部署：
+
+```bash
+# 1. 构建项目
+npm run build
+
+# 2. 进入构建目录
+cd dist
+
+# 3. 初始化 git 仓库
+git init
+git add -A
+git commit -m 'deploy'
+
+# 4. 推送到 gh-pages 分支
+git push -f git@github.com:yelog/antdv-next-admin.git main:gh-pages
+
+# 5. 返回项目根目录
+cd -
+```
+
+## 🔧 GitHub 仓库设置
+
+确保在 GitHub 仓库设置中：
+
+1. 进入仓库 Settings → Pages
+2. Source 选择 "GitHub Actions"
+3. 等待首次部署完成
+
+## 📊 查看部署状态
+
+- 在 GitHub 仓库的 "Actions" 标签页查看部署进度
+- 绿色勾号表示部署成功
+- 红色叉号表示部署失败，点击查看日志
+
+## 🐛 常见问题
+
+### 1. 404 错误
+- 确保 `base` 配置正确
+- 检查 GitHub Pages 设置是否正确
+
+### 2. 路由不工作
+- 确保 `404.html` 和 `index.html` 中的重定向脚本存在
+- 检查浏览器控制台是否有错误
+
+### 3. 样式/资源 404
+- 确保 `base` 路径配置正确
+- 检查构建后的资源路径是否正确
+
+## 🔐 权限说明
+
+GitHub Actions 需要以下权限：
+- `contents: read` - 读取代码
+- `pages: write` - 写入 Pages
+- `id-token: write` - 身份验证
+
+这些权限已在 workflow 文件中配置。
diff --git a/antdv-next-admin/LICENSE b/antdv-next-admin/LICENSE
new file mode 100644
index 0000000..0daa361
--- /dev/null
+++ b/antdv-next-admin/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 yelog
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/antdv-next-admin/docs/images/screenshot.png b/antdv-next-admin/docs/images/screenshot.png
new file mode 100644
index 0000000..23f5323
Binary files /dev/null and b/antdv-next-admin/docs/images/screenshot.png differ
diff --git a/antdv-next-admin/index.html b/antdv-next-admin/index.html
new file mode 100644
index 0000000..d8717a6
--- /dev/null
+++ b/antdv-next-admin/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Antdv Next Admin</title>
+    <!-- GitHub Pages SPA 路由重定向处理 -->
+    <script>
+      (function() {
+        var redirect = sessionStorage.redirect;
+        delete sessionStorage.redirect;
+        if (redirect && redirect !== location.href) {
+          history.replaceState(null, null, redirect);
+        }
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/antdv-next-admin/mock/data/config.data.ts b/antdv-next-admin/mock/data/config.data.ts
new file mode 100644
index 0000000..c071909
--- /dev/null
+++ b/antdv-next-admin/mock/data/config.data.ts
@@ -0,0 +1,219 @@
+import type { SysConfig } from '@/types/config';
+
+export const sysConfigs: SysConfig[] = [
+  // basic
+  {
+    id: '1',
+    name: 'Site Name',
+    key: 'site.name',
+    value: 'Antdv Next Admin',
+    valueType: 'string',
+    group: 'basic',
+    description: 'System display name',
+    builtIn: true,
+    sort: 1,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '2',
+    name: 'Site Description',
+    key: 'site.description',
+    value: 'Vue3 + Ant Design Vue Admin System',
+    valueType: 'string',
+    group: 'basic',
+    description: 'Site SEO description',
+    builtIn: true,
+    sort: 2,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '3',
+    name: 'Copyright',
+    key: 'site.copyright',
+    value: '© 2024 Antdv Next Admin',
+    valueType: 'string',
+    group: 'basic',
+    description: 'Footer copyright text',
+    builtIn: false,
+    sort: 3,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '4',
+    name: 'System Version',
+    key: 'site.version',
+    value: '1.0.0',
+    valueType: 'string',
+    group: 'basic',
+    description: 'Current system version',
+    builtIn: true,
+    sort: 4,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+
+  // security
+  {
+    id: '10',
+    name: 'Max Login Attempts',
+    key: 'security.maxLoginAttempts',
+    value: '5',
+    valueType: 'number',
+    group: 'security',
+    description: 'Lock account after N failed login attempts',
+    builtIn: true,
+    sort: 1,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '11',
+    name: 'Lock Duration (min)',
+    key: 'security.lockDuration',
+    value: '30',
+    valueType: 'number',
+    group: 'security',
+    description: 'Account lock duration in minutes',
+    builtIn: true,
+    sort: 2,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '12',
+    name: 'Token Expiry (hours)',
+    key: 'security.tokenExpiry',
+    value: '24',
+    valueType: 'number',
+    group: 'security',
+    description: 'Login token expiration time',
+    builtIn: true,
+    sort: 3,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '13',
+    name: 'Enable Captcha',
+    key: 'security.captchaEnabled',
+    value: 'true',
+    valueType: 'boolean',
+    group: 'security',
+    description: 'Require captcha for login',
+    builtIn: false,
+    sort: 4,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '14',
+    name: 'Min Password Length',
+    key: 'security.minPasswordLength',
+    value: '6',
+    valueType: 'number',
+    group: 'security',
+    description: 'Minimum password character count',
+    builtIn: true,
+    sort: 5,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+
+  // upload
+  {
+    id: '20',
+    name: 'Max Upload Size (MB)',
+    key: 'upload.maxSize',
+    value: '10',
+    valueType: 'number',
+    group: 'upload',
+    description: 'Maximum single file upload size',
+    builtIn: true,
+    sort: 1,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '21',
+    name: 'Allowed Upload Types',
+    key: 'upload.allowedTypes',
+    value: 'jpg,jpeg,png,gif,pdf,doc,docx,xls,xlsx,zip',
+    valueType: 'string',
+    group: 'upload',
+    description: 'Allowed file extensions, comma separated',
+    builtIn: true,
+    sort: 2,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '22',
+    name: 'Image Compression Quality',
+    key: 'upload.imageQuality',
+    value: '80',
+    valueType: 'number',
+    group: 'upload',
+    description: 'Auto compression quality for uploaded images (0-100)',
+    builtIn: false,
+    sort: 3,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+
+  // notification
+  {
+    id: '30',
+    name: 'Enable Email Notification',
+    key: 'notify.emailEnabled',
+    value: 'true',
+    valueType: 'boolean',
+    group: 'notification',
+    description: 'Enable email notification feature',
+    builtIn: false,
+    sort: 1,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '31',
+    name: 'SMTP Server',
+    key: 'notify.smtpHost',
+    value: 'smtp.example.com',
+    valueType: 'string',
+    group: 'notification',
+    description: 'SMTP server address for sending emails',
+    builtIn: false,
+    sort: 2,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '32',
+    name: 'SMTP Port',
+    key: 'notify.smtpPort',
+    value: '465',
+    valueType: 'number',
+    group: 'notification',
+    description: 'SMTP server port',
+    builtIn: false,
+    sort: 3,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '33',
+    name: 'Sender Email',
+    key: 'notify.senderEmail',
+    value: 'noreply@example.com',
+    valueType: 'string',
+    group: 'notification',
+    description: 'System notification sender email',
+    builtIn: false,
+    sort: 4,
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+];
diff --git a/antdv-next-admin/mock/data/dashboard.data.ts b/antdv-next-admin/mock/data/dashboard.data.ts
new file mode 100644
index 0000000..5b836d5
--- /dev/null
+++ b/antdv-next-admin/mock/data/dashboard.data.ts
@@ -0,0 +1,100 @@
+import { faker } from '@faker-js/faker';
+
+// Statistics data
+export const mockStats = {
+  totalUsers: 12458,
+  totalOrders: 8946,
+  totalRevenue: 456789.56,
+  conversionRate: 3.24,
+};
+
+// Sales trend data (last 12 months)
+export const mockSalesTrend = Array.from({ length: 12 }, (_, index) => {
+  const date = new Date();
+  date.setMonth(date.getMonth() - (11 - index));
+  return {
+    month: date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit' }),
+    sales: faker.number.int({ min: 20000, max: 80000 }),
+    orders: faker.number.int({ min: 500, max: 2000 }),
+  };
+});
+
+// User distribution by city
+export const mockUserDistribution = [
+  { city: 'Beijing', value: 2341 },
+  { city: 'Shanghai', value: 2156 },
+  { city: 'Guangzhou', value: 1876 },
+  { city: 'Shenzhen', value: 1654 },
+  { city: 'Hangzhou', value: 1432 },
+  { city: 'Chengdu', value: 1289 },
+  { city: 'Other', value: 2710 },
+];
+
+// Recent activities
+export const mockActivities = Array.from({ length: 10 }, (_, index) => ({
+  id: faker.string.uuid(),
+  user: faker.person.fullName(),
+  avatar: faker.image.avatar(),
+  action: faker.helpers.arrayElement([
+    'Created a new user',
+    'Updated role permissions',
+    'Deleted expired data',
+    'Exported reports',
+    'Updated system settings',
+    'Uploaded a new file',
+  ]),
+  timestamp: faker.date.recent({ days: 7 }).toISOString(),
+  type: faker.helpers.arrayElement(['success', 'info', 'warning', 'error']),
+}));
+
+// Chart data for different visualizations
+export const mockChartData = {
+  // Line chart - Sales trend
+  lineChart: {
+    xAxis: mockSalesTrend.map((item) => item.month),
+    series: [
+      {
+        name: 'Sales',
+        data: mockSalesTrend.map((item) => item.sales),
+      },
+      {
+        name: 'Orders',
+        data: mockSalesTrend.map((item) => item.orders),
+      },
+    ],
+  },
+
+  // Bar chart - Monthly comparison
+  barChart: {
+    xAxis: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    series: [
+      {
+        name: 'Current Year',
+        data: [820, 932, 901, 934, 1290, 1330],
+      },
+      {
+        name: 'Last Year',
+        data: [720, 832, 801, 834, 1190, 1230],
+      },
+    ],
+  },
+
+  // Pie chart - User distribution
+  pieChart: {
+    data: mockUserDistribution.map((item) => ({
+      name: item.city,
+      value: item.value,
+    })),
+  },
+
+  // Area chart - Traffic trend
+  areaChart: {
+    xAxis: Array.from({ length: 24 }, (_, i) => `${i}:00`),
+    series: [
+      {
+        name: 'Visits',
+        data: Array.from({ length: 24 }, () => faker.number.int({ min: 100, max: 1000 })),
+      },
+    ],
+  },
+};
diff --git a/antdv-next-admin/mock/data/dept.data.ts b/antdv-next-admin/mock/data/dept.data.ts
new file mode 100644
index 0000000..ee54268
--- /dev/null
+++ b/antdv-next-admin/mock/data/dept.data.ts
@@ -0,0 +1,224 @@
+import type { Department } from '@/types/dept';
+
+/**
+ * 部门数据（扁平结构，用于增删改查）
+ */
+export const departments: Department[] = [
+  {
+    id: '1',
+    name: '总公司',
+    parentId: null,
+    leader: '张总',
+    phone: '13800000001',
+    email: 'ceo@example.com',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  // 一级部门
+  {
+    id: '10',
+    name: '技术研发部',
+    parentId: '1',
+    leader: '李工',
+    phone: '13800000010',
+    email: 'tech@example.com',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '11',
+    name: '产品设计部',
+    parentId: '1',
+    leader: '王设计',
+    phone: '13800000011',
+    email: 'design@example.com',
+    sort: 2,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '12',
+    name: '市场营销部',
+    parentId: '1',
+    leader: '赵市场',
+    phone: '13800000012',
+    email: 'market@example.com',
+    sort: 3,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '13',
+    name: '人力资源部',
+    parentId: '1',
+    leader: '孙HR',
+    phone: '13800000013',
+    email: 'hr@example.com',
+    sort: 4,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '14',
+    name: '财务部',
+    parentId: '1',
+    leader: '周财务',
+    phone: '13800000014',
+    email: 'finance@example.com',
+    sort: 5,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  // 二级部门 - 技术研发部下属
+  {
+    id: '101',
+    name: '前端开发组',
+    parentId: '10',
+    leader: '陈前端',
+    phone: '13800000101',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '102',
+    name: '后端开发组',
+    parentId: '10',
+    leader: '刘后端',
+    phone: '13800000102',
+    sort: 2,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '103',
+    name: '测试组',
+    parentId: '10',
+    leader: '吴测试',
+    phone: '13800000103',
+    sort: 3,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '104',
+    name: '运维组',
+    parentId: '10',
+    leader: '郑运维',
+    phone: '13800000104',
+    sort: 4,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  // 二级部门 - 产品设计部下属
+  {
+    id: '111',
+    name: 'UI设计组',
+    parentId: '11',
+    leader: '钱UI',
+    phone: '13800000111',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '112',
+    name: '产品策划组',
+    parentId: '11',
+    leader: '冯策划',
+    phone: '13800000112',
+    sort: 2,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  // 二级部门 - 市场营销部下属
+  {
+    id: '121',
+    name: '品牌推广组',
+    parentId: '12',
+    leader: '韩品牌',
+    phone: '13800000121',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '122',
+    name: '渠道销售组',
+    parentId: '12',
+    leader: '杨销售',
+    phone: '13800000122',
+    sort: 2,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  // 二级部门 - 人力资源部下属
+  {
+    id: '131',
+    name: '招聘组',
+    parentId: '13',
+    leader: '朱招聘',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-01-01 00:00:00',
+  },
+  {
+    id: '132',
+    name: '培训组',
+    parentId: '13',
+    leader: '秦培训',
+    sort: 2,
+    status: 'disabled',
+    remark: '暂停运营',
+    createTime: '2024-01-01 00:00:00',
+    updateTime: '2024-06-01 00:00:00',
+  },
+];
+
+/**
+ * 将扁平数据构建为树形结构
+ */
+export function buildDeptTree(list: Department[]): Department[] {
+  const map = new Map<string, Department>();
+  const roots: Department[] = [];
+
+  list.forEach((item) => {
+    map.set(item.id, { ...item, children: [] });
+  });
+
+  map.forEach((item) => {
+    if (item.parentId && map.has(item.parentId)) {
+      map.get(item.parentId)!.children!.push(item);
+    } else if (!item.parentId) {
+      roots.push(item);
+    }
+  });
+
+  // 递归排序
+  const sortTree = (nodes: Department[]) => {
+    nodes.sort((a, b) => a.sort - b.sort);
+    nodes.forEach((n) => {
+      if (n.children?.length) sortTree(n.children);
+      else delete n.children;
+    });
+  };
+  sortTree(roots);
+  return roots;
+}
diff --git a/antdv-next-admin/mock/data/dict.data.ts b/antdv-next-admin/mock/data/dict.data.ts
new file mode 100644
index 0000000..54b2279
--- /dev/null
+++ b/antdv-next-admin/mock/data/dict.data.ts
@@ -0,0 +1,233 @@
+import type { DictType, DictData } from '@/types/dict';
+
+/**
+ * 字典类型数据
+ */
+export const dictTypes: DictType[] = [
+  {
+    id: '1',
+    name: '用户状态',
+    code: 'user_status',
+    description: '用户账号状态',
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '2',
+    name: '性别',
+    code: 'gender',
+    description: '用户性别',
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '3',
+    name: '订单状态',
+    code: 'order_status',
+    description: '订单状态',
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '4',
+    name: '支付方式',
+    code: 'payment_method',
+    description: '支付方式',
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '5',
+    name: '通知类型',
+    code: 'notification_type',
+    description: '系统通知类型',
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+];
+
+/**
+ * 字典数据
+ */
+export const dictData: DictData[] = [
+  // 用户状态
+  {
+    id: '1',
+    typeCode: 'user_status',
+    label: '正常',
+    value: 'active',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '2',
+    typeCode: 'user_status',
+    label: '禁用',
+    value: 'inactive',
+    sort: 2,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '3',
+    typeCode: 'user_status',
+    label: '锁定',
+    value: 'locked',
+    sort: 3,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  // 性别
+  {
+    id: '4',
+    typeCode: 'gender',
+    label: '男',
+    value: 'male',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '5',
+    typeCode: 'gender',
+    label: '女',
+    value: 'female',
+    sort: 2,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '6',
+    typeCode: 'gender',
+    label: '未知',
+    value: 'unknown',
+    sort: 3,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  // 订单状态
+  {
+    id: '7',
+    typeCode: 'order_status',
+    label: '待支付',
+    value: 'pending',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '8',
+    typeCode: 'order_status',
+    label: '已支付',
+    value: 'paid',
+    sort: 2,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '9',
+    typeCode: 'order_status',
+    label: '配送中',
+    value: 'shipping',
+    sort: 3,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '10',
+    typeCode: 'order_status',
+    label: '已完成',
+    value: 'completed',
+    sort: 4,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '11',
+    typeCode: 'order_status',
+    label: '已取消',
+    value: 'cancelled',
+    sort: 5,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  // 支付方式
+  {
+    id: '12',
+    typeCode: 'payment_method',
+    label: '支付宝',
+    value: 'alipay',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '13',
+    typeCode: 'payment_method',
+    label: '微信支付',
+    value: 'wechat',
+    sort: 2,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '14',
+    typeCode: 'payment_method',
+    label: '银行卡',
+    value: 'bank_card',
+    sort: 3,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  // 通知类型
+  {
+    id: '15',
+    typeCode: 'notification_type',
+    label: '系统通知',
+    value: 'system',
+    sort: 1,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '16',
+    typeCode: 'notification_type',
+    label: '订单通知',
+    value: 'order',
+    sort: 2,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '17',
+    typeCode: 'notification_type',
+    label: '活动通知',
+    value: 'activity',
+    sort: 3,
+    status: 'enabled',
+    createTime: '2024-01-01 10:00:00',
+    updateTime: '2024-01-01 10:00:00',
+  },
+];
diff --git a/antdv-next-admin/mock/data/file.data.ts b/antdv-next-admin/mock/data/file.data.ts
new file mode 100644
index 0000000..b9edc67
--- /dev/null
+++ b/antdv-next-admin/mock/data/file.data.ts
@@ -0,0 +1,79 @@
+import type { SysFile } from '@/types/file';
+
+const exts = ['jpg', 'png', 'pdf', 'docx', 'xlsx', 'zip', 'mp4', 'txt', 'pptx', 'svg'];
+const mimeMap: Record<string, string> = {
+  jpg: 'image/jpeg',
+  png: 'image/png',
+  pdf: 'application/pdf',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  zip: 'application/zip',
+  mp4: 'video/mp4',
+  txt: 'text/plain',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  svg: 'image/svg+xml',
+};
+const storages: SysFile['storage'][] = ['local', 'oss', 'cos'];
+const uploaders = ['admin', 'zhangsan', 'lisi', 'wangwu'];
+const fileNames: Record<string, string[]> = {
+  jpg: ['产品封面图', '用户头像', '活动海报', '团队合照', '办公环境'],
+  png: ['系统Logo', '二维码', '图标素材', '截图', '水印模板'],
+  pdf: ['用户手册', '合同模板', '年度报告', '技术文档', '发票'],
+  docx: ['需求文档', '会议纪要', '工作总结', '项目方案', '操作指南'],
+  xlsx: ['员工花名册', '财务报表', '数据统计', '考勤记录', '库存清单'],
+  zip: ['项目源码', '资源包', '备份文件', '部署包', '日志归档'],
+  mp4: ['产品演示', '培训视频', '操作教程', '宣传片', '会议录像'],
+  txt: ['配置说明', '更新日志', '临时笔记', '导入模板', '错误日志'],
+  pptx: ['季度汇报', '产品介绍', '培训课件', '方案演示', '年终总结'],
+  svg: ['图标文件', '流程图', '架构图', '组织结构图', '数据图表'],
+};
+
+function randomDate(start: string, end: string) {
+  const s = new Date(start).getTime();
+  const e = new Date(end).getTime();
+  const d = new Date(s + Math.random() * (e - s));
+  return d.toISOString().replace('T', ' ').slice(0, 19);
+}
+
+function randomSize(ext: string): number {
+  const ranges: Record<string, [number, number]> = {
+    jpg: [50_000, 5_000_000],
+    png: [20_000, 3_000_000],
+    pdf: [100_000, 20_000_000],
+    docx: [30_000, 10_000_000],
+    xlsx: [20_000, 15_000_000],
+    zip: [500_000, 100_000_000],
+    mp4: [5_000_000, 500_000_000],
+    txt: [100, 500_000],
+    pptx: [200_000, 50_000_000],
+    svg: [1_000, 200_000],
+  };
+  const [min, max] = ranges[ext] || [1000, 1_000_000];
+  return Math.floor(min + Math.random() * (max - min));
+}
+
+export const sysFiles: SysFile[] = [];
+
+let id = 1;
+for (const ext of exts) {
+  const names = fileNames[ext];
+  for (const name of names) {
+    const storage = storages[Math.floor(Math.random() * storages.length)];
+    const originalName = `${name}.${ext}`;
+    sysFiles.push({
+      id: String(id++),
+      name: `${Date.now()}_${Math.random().toString(36).slice(2, 8)}.${ext}`,
+      originalName,
+      path: `/uploads/${ext}/${Date.now()}_${Math.random().toString(36).slice(2, 8)}.${ext}`,
+      size: randomSize(ext),
+      mimeType: mimeMap[ext] || 'application/octet-stream',
+      ext,
+      storage,
+      uploader: uploaders[Math.floor(Math.random() * uploaders.length)],
+      remark: '',
+      createTime: randomDate('2024-01-01', '2024-12-31'),
+    });
+  }
+}
+
+sysFiles.sort((a, b) => b.createTime.localeCompare(a.createTime));
diff --git a/antdv-next-admin/mock/data/log.data.ts b/antdv-next-admin/mock/data/log.data.ts
new file mode 100644
index 0000000..7adfcf8
--- /dev/null
+++ b/antdv-next-admin/mock/data/log.data.ts
@@ -0,0 +1,128 @@
+import type { OperationLog, LoginLog } from '@/types/log';
+
+const modules = [
+  'userManagement',
+  'roleManagement',
+  'menuManagement',
+  'dictionary',
+  'systemLogin',
+  'profile',
+  'dashboard',
+];
+const actions: OperationLog['action'][] = [
+  'login',
+  'logout',
+  'create',
+  'update',
+  'delete',
+  'export',
+  'other',
+];
+const browsers = ['Chrome 120', 'Firefox 121', 'Safari 17', 'Edge 120'];
+const osList = ['Windows 11', 'macOS 14', 'Ubuntu 22.04', 'iOS 17'];
+const ips = [
+  '192.168.1.100',
+  '192.168.1.101',
+  '10.0.0.50',
+  '172.16.0.88',
+  '192.168.2.200',
+  '10.10.1.33',
+];
+const usernames = ['admin', 'user', 'zhangsan', 'lisi', 'wangwu'];
+
+const actionDescMap: Record<string, string[]> = {
+  login: ['System login'],
+  logout: ['System logout'],
+  create: ['Create user', 'Create role', 'Create menu', 'Create dict type', 'Create dict data'],
+  update: [
+    'Update user info',
+    'Update role permissions',
+    'Update menu config',
+    'Update dict data',
+    'Update profile',
+    'Reset user password',
+  ],
+  delete: ['Delete user', 'Delete role', 'Delete menu', 'Delete dict data'],
+  export: ['Export user list', 'Export role list', 'Export operation log'],
+  other: ['View dashboard', 'Refresh cache'],
+};
+
+const actionUrlMap: Record<string, string[]> = {
+  login: ['/api/auth/login'],
+  logout: ['/api/auth/logout'],
+  create: ['/api/user', '/api/role', '/api/permission', '/api/dict/type', '/api/dict/data'],
+  update: ['/api/user/1', '/api/role/1', '/api/permission/1', '/api/dict/data/1', '/api/profile'],
+  delete: ['/api/user/1', '/api/role/1', '/api/permission/1', '/api/dict/data/1'],
+  export: ['/api/user/export', '/api/role/export', '/api/log/export'],
+  other: ['/api/dashboard/stats', '/api/cache/refresh'],
+};
+
+function randomItem<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function generateTime(daysAgo: number): string {
+  const d = new Date();
+  d.setDate(d.getDate() - daysAgo);
+  d.setHours(Math.floor(Math.random() * 14) + 8);
+  d.setMinutes(Math.floor(Math.random() * 60));
+  d.setSeconds(Math.floor(Math.random() * 60));
+  return d.toISOString().replace('T', ' ').slice(0, 19);
+}
+
+export const operationLogs: OperationLog[] = [];
+for (let i = 1; i <= 80; i++) {
+  const action = randomItem(actions);
+  const descs = actionDescMap[action];
+  const urls = actionUrlMap[action];
+  const isFail = Math.random() < 0.08;
+  operationLogs.push({
+    id: String(i),
+    username: randomItem(usernames),
+    module: randomItem(modules),
+    action,
+    description: randomItem(descs),
+    method:
+      action === 'create'
+        ? 'POST'
+        : action === 'update'
+          ? 'PUT'
+          : action === 'delete'
+            ? 'DELETE'
+            : 'GET',
+    url: randomItem(urls),
+    ip: randomItem(ips),
+    browser: randomItem(browsers),
+    os: randomItem(osList),
+    status: isFail ? 'fail' : 'success',
+    errorMsg: isFail ? 'Insufficient permissions' : undefined,
+    duration: Math.floor(Math.random() * 500) + 10,
+    createTime: generateTime(Math.floor(i / 6)),
+  });
+}
+operationLogs.sort((a, b) => b.createTime.localeCompare(a.createTime));
+
+export const loginLogs: LoginLog[] = [];
+const loginMessages = [
+  'Login successful',
+  'Login successful',
+  'Login successful',
+  'Wrong password',
+  'Account locked',
+  'Captcha error',
+];
+for (let i = 1; i <= 50; i++) {
+  const msg = randomItem(loginMessages);
+  const isSuccess = msg === 'Login successful';
+  loginLogs.push({
+    id: String(i),
+    username: randomItem(usernames),
+    ip: randomItem(ips),
+    browser: randomItem(browsers),
+    os: randomItem(osList),
+    status: isSuccess ? 'success' : 'fail',
+    message: msg,
+    createTime: generateTime(Math.floor(i / 4)),
+  });
+}
+loginLogs.sort((a, b) => b.createTime.localeCompare(a.createTime));
diff --git a/antdv-next-admin/mock/data/permissions.data.ts b/antdv-next-admin/mock/data/permissions.data.ts
new file mode 100644
index 0000000..1ca9e86
--- /dev/null
+++ b/antdv-next-admin/mock/data/permissions.data.ts
@@ -0,0 +1,607 @@
+import type { Permission } from '@/types/auth';
+
+export const mockPermissions: Permission[] = [
+  // Dashboard Menu
+  {
+    id: '1',
+    name: 'Dashboard',
+    code: 'dashboard.view',
+    description: 'Dashboard menu',
+    resource: '/dashboard',
+    action: 'view',
+    type: 'menu',
+    path: '/dashboard',
+    component: 'dashboard/index',
+    icon: 'DashboardOutlined',
+    sort: 1,
+    status: 'active',
+    visible: true,
+  },
+
+  // Organization & Permissions Menu
+  {
+    id: '60',
+    name: 'Organization & Permissions',
+    code: 'organization.menu',
+    description: 'Organization and permissions root menu',
+    resource: '/organization',
+    action: '*',
+    type: 'menu',
+    path: '/organization',
+    component: 'Layout',
+    icon: 'TeamOutlined',
+    sort: 2,
+    status: 'active',
+    visible: true,
+    children: [
+      {
+        id: '50',
+        name: 'Department Management',
+        code: 'system.dept.view',
+        description: 'Department management menu',
+        resource: '/organization/dept',
+        action: 'view',
+        type: 'menu',
+        parentId: '60',
+        path: '/organization/dept',
+        component: 'system/dept/index',
+        icon: 'ApartmentOutlined',
+        sort: 1,
+        status: 'active',
+        visible: true,
+        children: [
+          {
+            id: '51',
+            name: 'Create Department',
+            code: 'system.dept.create',
+            description: 'Can create department',
+            resource: 'system.dept',
+            action: 'create',
+            type: 'button',
+            parentId: '50',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '52',
+            name: 'Edit Department',
+            code: 'system.dept.edit',
+            description: 'Can edit department',
+            resource: 'system.dept',
+            action: 'edit',
+            type: 'button',
+            parentId: '50',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '53',
+            name: 'Delete Department',
+            code: 'system.dept.delete',
+            description: 'Can delete department',
+            resource: 'system.dept',
+            action: 'delete',
+            type: 'button',
+            parentId: '50',
+            status: 'active',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: '11',
+        name: 'User Management',
+        code: 'system.user.view',
+        description: 'User management menu',
+        resource: '/organization/user',
+        action: 'view',
+        type: 'menu',
+        parentId: '60',
+        path: '/organization/user',
+        component: 'system/user/index',
+        icon: 'UserOutlined',
+        sort: 2,
+        status: 'active',
+        visible: true,
+        children: [
+          {
+            id: '12',
+            name: 'Create User',
+            code: 'system.user.create',
+            description: 'Can create users',
+            resource: 'system.user',
+            action: 'create',
+            type: 'button',
+            parentId: '11',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '13',
+            name: 'Edit User',
+            code: 'system.user.edit',
+            description: 'Can edit users',
+            resource: 'system.user',
+            action: 'edit',
+            type: 'button',
+            parentId: '11',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '14',
+            name: 'Delete User',
+            code: 'system.user.delete',
+            description: 'Can delete users',
+            resource: 'system.user',
+            action: 'delete',
+            type: 'button',
+            parentId: '11',
+            status: 'active',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: '20',
+        name: 'Role Management',
+        code: 'system.role.view',
+        description: 'Role management menu',
+        resource: '/organization/role',
+        action: 'view',
+        type: 'menu',
+        parentId: '60',
+        path: '/organization/role',
+        component: 'system/role/index',
+        icon: 'TeamOutlined',
+        sort: 3,
+        status: 'active',
+        visible: true,
+        children: [
+          {
+            id: '21',
+            name: 'Create Role',
+            code: 'system.role.create',
+            description: 'Can create roles',
+            resource: 'system.role',
+            action: 'create',
+            type: 'button',
+            parentId: '20',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '22',
+            name: 'Edit Role',
+            code: 'system.role.edit',
+            description: 'Can edit roles',
+            resource: 'system.role',
+            action: 'edit',
+            type: 'button',
+            parentId: '20',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '23',
+            name: 'Delete Role',
+            code: 'system.role.delete',
+            description: 'Can delete roles',
+            resource: 'system.role',
+            action: 'delete',
+            type: 'button',
+            parentId: '20',
+            status: 'active',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: '30',
+        name: 'Menu Management',
+        code: 'system.permission.view',
+        description: 'Menu management menu',
+        resource: '/organization/permission',
+        action: 'view',
+        type: 'menu',
+        parentId: '60',
+        path: '/organization/permission',
+        component: 'system/permission/index',
+        icon: 'SafetyOutlined',
+        sort: 4,
+        status: 'active',
+        visible: true,
+        children: [
+          {
+            id: '31',
+            name: 'Create Menu',
+            code: 'system.permission.create',
+            description: 'Can create menu',
+            resource: 'system.permission',
+            action: 'create',
+            type: 'button',
+            parentId: '30',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '32',
+            name: 'Edit Menu',
+            code: 'system.permission.edit',
+            description: 'Can edit menu',
+            resource: 'system.permission',
+            action: 'edit',
+            type: 'button',
+            parentId: '30',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '33',
+            name: 'Delete Menu',
+            code: 'system.permission.delete',
+            description: 'Can delete menu',
+            resource: 'system.permission',
+            action: 'delete',
+            type: 'button',
+            parentId: '30',
+            status: 'active',
+            visible: true,
+          },
+        ],
+      },
+    ],
+  },
+
+  // System Management Menu
+  {
+    id: '10',
+    name: 'System Management',
+    code: 'system.menu',
+    description: 'System management root menu',
+    resource: '/system',
+    action: '*',
+    type: 'menu',
+    path: '/system',
+    component: 'Layout',
+    icon: 'SettingOutlined',
+    sort: 3,
+    status: 'active',
+    visible: true,
+    children: [
+      {
+        id: '54',
+        name: 'System Config',
+        code: 'system.config.view',
+        description: 'System config menu',
+        resource: '/system/config',
+        action: 'view',
+        type: 'menu',
+        parentId: '10',
+        path: '/system/config',
+        component: 'system/config/index',
+        icon: 'ControlOutlined',
+        sort: 1,
+        status: 'active',
+        visible: true,
+        children: [
+          {
+            id: '55',
+            name: 'Create Config',
+            code: 'system.config.create',
+            description: 'Can create config',
+            resource: 'system.config',
+            action: 'create',
+            type: 'button',
+            parentId: '54',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '56',
+            name: 'Edit Config',
+            code: 'system.config.edit',
+            description: 'Can edit config',
+            resource: 'system.config',
+            action: 'edit',
+            type: 'button',
+            parentId: '54',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '57',
+            name: 'Delete Config',
+            code: 'system.config.delete',
+            description: 'Can delete config',
+            resource: 'system.config',
+            action: 'delete',
+            type: 'button',
+            parentId: '54',
+            status: 'active',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: '34',
+        name: 'Dictionary Management',
+        code: 'system.dict.view',
+        description: 'Dictionary management menu',
+        resource: '/system/dict',
+        action: 'view',
+        type: 'menu',
+        parentId: '10',
+        path: '/system/dict',
+        component: 'system/dict/index',
+        icon: 'BookOutlined',
+        sort: 2,
+        status: 'active',
+        visible: true,
+        children: [
+          {
+            id: '35',
+            name: 'Create Dictionary',
+            code: 'system.dict.create',
+            description: 'Can create dictionary',
+            resource: 'system.dict',
+            action: 'create',
+            type: 'button',
+            parentId: '34',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '36',
+            name: 'Edit Dictionary',
+            code: 'system.dict.edit',
+            description: 'Can edit dictionary',
+            resource: 'system.dict',
+            action: 'edit',
+            type: 'button',
+            parentId: '34',
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '37',
+            name: 'Delete Dictionary',
+            code: 'system.dict.delete',
+            description: 'Can delete dictionary',
+            resource: 'system.dict',
+            action: 'delete',
+            type: 'button',
+            parentId: '34',
+            status: 'active',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: '58',
+        name: 'File Management',
+        code: 'system.file.view',
+        description: 'File management menu',
+        resource: '/system/file',
+        action: 'view',
+        type: 'menu',
+        parentId: '10',
+        path: '/system/file',
+        component: 'system/file/index',
+        icon: 'FolderOutlined',
+        sort: 3,
+        status: 'active',
+        visible: true,
+        children: [
+          {
+            id: '59',
+            name: 'Delete File',
+            code: 'system.file.delete',
+            description: 'Can delete file',
+            resource: 'system.file',
+            action: 'delete',
+            type: 'button',
+            parentId: '58',
+            status: 'active',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: '38',
+        name: 'System Log',
+        code: 'system.log.view',
+        description: 'System log menu',
+        resource: '/system/log',
+        action: 'view',
+        type: 'menu',
+        parentId: '10',
+        path: '/system/log',
+        component: 'system/log/index',
+        icon: 'FileTextOutlined',
+        sort: 4,
+        status: 'active',
+        visible: true,
+        children: [
+          {
+            id: '39',
+            name: 'Clear Log',
+            code: 'system.log.clear',
+            description: 'Can clear logs',
+            resource: 'system.log',
+            action: 'delete',
+            type: 'button',
+            parentId: '38',
+            status: 'active',
+            visible: true,
+          },
+        ],
+      },
+    ],
+  },
+
+  // Examples Menu
+  {
+    id: '40',
+    name: 'Examples',
+    code: 'examples.menu',
+    description: 'Examples root menu',
+    resource: '/examples',
+    action: '*',
+    type: 'menu',
+    path: '/examples',
+    component: 'Layout',
+    icon: 'AppstoreOutlined',
+    sort: 4,
+    status: 'active',
+    visible: true,
+    children: [
+      {
+        id: '41',
+        name: 'Table Example',
+        code: 'examples.table.view',
+        description: 'Table example menu',
+        resource: '/examples/table',
+        action: 'view',
+        type: 'menu',
+        parentId: '40',
+        path: '/examples/table',
+        component: 'examples/table/index',
+        icon: 'TableOutlined',
+        sort: 1,
+        status: 'active',
+        visible: true,
+      },
+      {
+        id: '42',
+        name: 'Icon Example',
+        code: 'examples.icon.view',
+        description: 'Icon example menu',
+        resource: '/examples/icon',
+        action: 'view',
+        type: 'menu',
+        parentId: '40',
+        path: '/examples/icon',
+        component: 'examples/icon/index',
+        icon: 'SmileOutlined',
+        sort: 2,
+        status: 'active',
+        visible: true,
+      },
+      {
+        id: '43',
+        name: 'Form Example',
+        code: 'examples.form.view',
+        description: 'Form example menu',
+        resource: '/examples/form',
+        action: 'view',
+        type: 'menu',
+        parentId: '40',
+        path: '/examples/form',
+        component: 'examples/form/index',
+        icon: 'FormOutlined',
+        sort: 3,
+        status: 'active',
+        visible: true,
+      },
+      {
+        id: '44',
+        name: 'Modal Example',
+        code: 'examples.modal.view',
+        description: 'Modal example menu',
+        resource: '/examples/modal',
+        action: 'view',
+        type: 'menu',
+        parentId: '40',
+        path: '/examples/modal',
+        component: 'examples/modal/index',
+        icon: 'ExpandOutlined',
+        sort: 4,
+        status: 'active',
+        visible: true,
+      },
+      {
+        id: '45',
+        name: 'Watermark Example',
+        code: 'examples.watermark.view',
+        description: 'Watermark example menu',
+        resource: '/examples/watermark',
+        action: 'view',
+        type: 'menu',
+        parentId: '40',
+        path: '/examples/watermark',
+        component: 'examples/watermark/index',
+        icon: 'HighlightOutlined',
+        sort: 5,
+        status: 'active',
+        visible: true,
+      },
+      {
+        id: '46',
+        name: 'Exception Page',
+        code: 'examples.exception.menu',
+        description: 'Exception root menu',
+        resource: '/examples/exception',
+        action: 'view',
+        type: 'menu',
+        parentId: '40',
+        path: '/examples/exception',
+        component: 'RouteView',
+        icon: 'WarningOutlined',
+        sort: 6,
+        status: 'active',
+        visible: true,
+        children: [
+          {
+            id: '47',
+            name: '403',
+            code: 'examples.exception.403.view',
+            description: '403 exception page menu',
+            resource: '/examples/exception/403',
+            action: 'view',
+            type: 'menu',
+            parentId: '46',
+            path: '/examples/exception/403',
+            component: 'examples/exception/403',
+            icon: 'StopOutlined',
+            sort: 1,
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '48',
+            name: '404',
+            code: 'examples.exception.404.view',
+            description: '404 exception page menu',
+            resource: '/examples/exception/404',
+            action: 'view',
+            type: 'menu',
+            parentId: '46',
+            path: '/examples/exception/404',
+            component: 'examples/exception/404',
+            icon: 'FileUnknownOutlined',
+            sort: 2,
+            status: 'active',
+            visible: true,
+          },
+          {
+            id: '49',
+            name: '500',
+            code: 'examples.exception.500.view',
+            description: '500 exception page menu',
+            resource: '/examples/exception/500',
+            action: 'view',
+            type: 'menu',
+            parentId: '46',
+            path: '/examples/exception/500',
+            component: 'examples/exception/500',
+            icon: 'BugOutlined',
+            sort: 3,
+            status: 'active',
+            visible: true,
+          },
+        ],
+      },
+    ],
+  },
+];
diff --git a/antdv-next-admin/mock/data/roles.data.ts b/antdv-next-admin/mock/data/roles.data.ts
new file mode 100644
index 0000000..fcde9dd
--- /dev/null
+++ b/antdv-next-admin/mock/data/roles.data.ts
@@ -0,0 +1,40 @@
+import type { Role } from '@/types/auth';
+
+export const mockRoles: Role[] = [
+  {
+    id: '1',
+    name: 'Administrator',
+    code: 'admin',
+    description: 'System administrator with full access',
+    permissions: [],
+    createdAt: '2023-01-01T00:00:00.000Z',
+    updatedAt: '2023-01-01T00:00:00.000Z',
+  },
+  {
+    id: '2',
+    name: 'Manager',
+    code: 'manager',
+    description: 'Department manager with management permissions',
+    permissions: [],
+    createdAt: '2023-01-01T00:00:00.000Z',
+    updatedAt: '2023-01-01T00:00:00.000Z',
+  },
+  {
+    id: '3',
+    name: 'User',
+    code: 'user',
+    description: 'Regular user with basic permissions',
+    permissions: [],
+    createdAt: '2023-01-01T00:00:00.000Z',
+    updatedAt: '2023-01-01T00:00:00.000Z',
+  },
+  {
+    id: '4',
+    name: 'Guest',
+    code: 'guest',
+    description: 'Guest user with read-only access',
+    permissions: [],
+    createdAt: '2023-01-01T00:00:00.000Z',
+    updatedAt: '2023-01-01T00:00:00.000Z',
+  },
+];
diff --git a/antdv-next-admin/mock/data/users.data.ts b/antdv-next-admin/mock/data/users.data.ts
new file mode 100644
index 0000000..b0f6fc9
--- /dev/null
+++ b/antdv-next-admin/mock/data/users.data.ts
@@ -0,0 +1,103 @@
+import type { User } from "@/types/auth";
+
+import { faker } from "@faker-js/faker";
+
+// Generate mock users
+export const mockUsers: User[] = Array.from({ length: 50 }, () => ({
+  id: faker.string.uuid(),
+  username: faker.internet.username(),
+  email: faker.internet.email(),
+  realName: faker.person.fullName(),
+  avatar: faker.image.avatar(),
+  phone: `1${faker.string.numeric(10)}`,
+  gender: faker.helpers.arrayElement(["male", "female"] as const),
+  birthDate: faker.date
+    .birthdate({ min: 18, max: 65, mode: "age" })
+    .toISOString()
+    .split("T")[0],
+  bio: faker.person.bio(),
+  status: faker.helpers.arrayElement(["active", "inactive"] as const),
+  createdAt: faker.date.past().toISOString(),
+  updatedAt: faker.date.recent().toISOString(),
+  roles: [],
+  permissions: [],
+}));
+
+// Admin user
+export const adminUser: User = {
+  id: "1",
+  username: "admin",
+  email: "admin@example.com",
+  realName: "Administrator",
+  avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=admin",
+  phone: "13800138000",
+  gender: "male",
+  birthDate: "1990-01-01",
+  bio: "System Administrator",
+  status: "active",
+  createdAt: "2023-01-01T00:00:00.000Z",
+  updatedAt: new Date().toISOString(),
+  roles: [
+    {
+      id: "1",
+      name: "Administrator",
+      code: "admin",
+      description: "System Administrator",
+      permissions: [],
+      createdAt: "2023-01-01T00:00:00.000Z",
+      updatedAt: "2023-01-01T00:00:00.000Z",
+    },
+  ],
+  permissions: [
+    {
+      id: "1",
+      name: "All Permissions",
+      code: "*",
+      description: "Has all permissions",
+      resource: "*",
+      action: "*",
+      type: "api",
+    },
+  ],
+};
+
+// Regular user
+export const regularUser: User = {
+  id: "2",
+  username: "user",
+  email: "user@example.com",
+  realName: "Regular User",
+  avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=user",
+  phone: "13800138001",
+  gender: "female",
+  birthDate: "1995-05-15",
+  bio: "Regular User",
+  status: "active",
+  createdAt: "2023-01-01T00:00:00.000Z",
+  updatedAt: new Date().toISOString(),
+  roles: [
+    {
+      id: "2",
+      name: "User",
+      code: "user",
+      description: "Regular User",
+      permissions: [],
+      createdAt: "2023-01-01T00:00:00.000Z",
+      updatedAt: "2023-01-01T00:00:00.000Z",
+    },
+  ],
+  permissions: [
+    {
+      id: "2",
+      name: "View Dashboard",
+      code: "dashboard.view",
+      description: "Can view dashboard",
+      resource: "dashboard",
+      action: "view",
+      type: "menu",
+    },
+  ],
+};
+
+// Add admin and regular users to the beginning of the array
+mockUsers.unshift(adminUser, regularUser);
diff --git a/antdv-next-admin/mock/handlers/auth.mock.ts b/antdv-next-admin/mock/handlers/auth.mock.ts
new file mode 100644
index 0000000..9da056c
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/auth.mock.ts
@@ -0,0 +1,113 @@
+import { defineMock } from 'vite-plugin-mock-dev-server';
+
+import { adminUser, regularUser } from '../data/users.data';
+
+export default defineMock([
+  // Login
+  {
+    url: '/api/auth/login',
+    method: 'POST',
+    body: (req) => {
+      const { username, password } = req.body;
+
+      // Validate credentials
+      let user = null;
+      if (username === 'admin' && password === '123456') {
+        user = adminUser;
+      } else if (username === 'user' && password === '123456') {
+        user = regularUser;
+      }
+
+      if (user) {
+        return {
+          code: 200,
+          message: 'Login successful',
+          data: {
+            token: `mock-token-${user.id}-${Date.now()}`,
+            refreshToken: `mock-refresh-token-${user.id}-${Date.now()}`,
+            expiresIn: 7200,
+          },
+          success: true,
+        };
+      } else {
+        return {
+          code: 401,
+          message: 'Invalid username or password',
+          data: null,
+          success: false,
+        };
+      }
+    },
+  },
+
+  // Logout
+  {
+    url: '/api/auth/logout',
+    method: 'POST',
+    body: {
+      code: 200,
+      message: 'Logout successful',
+      data: null,
+      success: true,
+    },
+  },
+
+  // Get user info
+  {
+    url: '/api/auth/info',
+    method: 'GET',
+    body: (req) => {
+      // Get token from header
+      const token = req.headers.authorization?.replace('Bearer ', '');
+
+      if (!token) {
+        return {
+          code: 401,
+          message: 'Unauthorized',
+          data: null,
+          success: false,
+        };
+      }
+
+      // Extract user ID from token
+      const userId = token.split('-')[2];
+      const user = userId === '1' ? adminUser : regularUser;
+
+      return {
+        code: 200,
+        message: 'Success',
+        data: user,
+        success: true,
+      };
+    },
+  },
+
+  // Refresh token
+  {
+    url: '/api/auth/refresh',
+    method: 'POST',
+    body: (req) => {
+      const { refreshToken } = req.body;
+
+      if (refreshToken) {
+        return {
+          code: 200,
+          message: 'Token refreshed',
+          data: {
+            token: `new-mock-token-${Date.now()}`,
+            refreshToken: `new-mock-refresh-token-${Date.now()}`,
+            expiresIn: 7200,
+          },
+          success: true,
+        };
+      } else {
+        return {
+          code: 401,
+          message: 'Invalid refresh token',
+          data: null,
+          success: false,
+        };
+      }
+    },
+  },
+]);
diff --git a/antdv-next-admin/mock/handlers/config.mock.ts b/antdv-next-admin/mock/handlers/config.mock.ts
new file mode 100644
index 0000000..3c77530
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/config.mock.ts
@@ -0,0 +1,114 @@
+import type { SysConfig } from "@/types/config";
+
+import { defineMock } from "vite-plugin-mock-dev-server";
+
+import { sysConfigs } from "../data/config.data";
+
+export default defineMock([
+  {
+    url: "/api/config/list",
+    method: "GET",
+    body: (req) => {
+      const { name, key, group, page = 1, pageSize = 20 } = req.query;
+      let filtered = [...sysConfigs];
+
+      if (name)
+        filtered = filtered.filter((item) =>
+          item.name.includes(name as string),
+        );
+      if (key)
+        filtered = filtered.filter((item) => item.key.includes(key as string));
+      if (group) filtered = filtered.filter((item) => item.group === group);
+
+      filtered.sort((a, b) => a.sort - b.sort);
+      const start = (Number(page) - 1) * Number(pageSize);
+      const list = filtered.slice(start, start + Number(pageSize));
+
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: {
+          list,
+          total: filtered.length,
+          current: Number(page),
+          pageSize: Number(pageSize),
+        },
+      };
+    },
+  },
+
+  {
+    url: "/api/config/key/:key",
+    method: "GET",
+    body: (req) => {
+      const item = sysConfigs.find((c) => c.key === req.params.key);
+      return item
+        ? { code: 200, message: "success", success: true, data: item }
+        : { code: 404, message: "Config not found", success: false };
+    },
+  },
+
+  {
+    url: "/api/config",
+    method: "POST",
+    body: (req) => {
+      const exists = sysConfigs.find((c) => c.key === req.body.key);
+      if (exists)
+        return {
+          code: 400,
+          message: "Config key already exists",
+          success: false,
+        };
+      const newConfig: SysConfig = {
+        id: String(Date.now()),
+        ...req.body,
+        builtIn: false,
+        createTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+        updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+      };
+      sysConfigs.push(newConfig);
+      return { code: 200, message: "success", success: true, data: newConfig };
+    },
+  },
+
+  {
+    url: "/api/config/:id",
+    method: "PUT",
+    body: (req) => {
+      const index = sysConfigs.findIndex((item) => item.id === req.params.id);
+      if (index !== -1) {
+        sysConfigs[index] = {
+          ...sysConfigs[index],
+          ...req.body,
+          updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+        };
+        return {
+          code: 200,
+          message: "success",
+          success: true,
+          data: sysConfigs[index],
+        };
+      }
+      return { code: 404, message: "Config not found", success: false };
+    },
+  },
+
+  {
+    url: "/api/config/:id",
+    method: "DELETE",
+    body: (req) => {
+      const index = sysConfigs.findIndex((item) => item.id === req.params.id);
+      if (index === -1)
+        return { code: 404, message: "Config not found", success: false };
+      if (sysConfigs[index].builtIn)
+        return {
+          code: 400,
+          message: "Built-in config cannot be deleted",
+          success: false,
+        };
+      sysConfigs.splice(index, 1);
+      return { code: 200, message: "success", success: true };
+    },
+  },
+]);
diff --git a/antdv-next-admin/mock/handlers/dashboard.mock.ts b/antdv-next-admin/mock/handlers/dashboard.mock.ts
new file mode 100644
index 0000000..6e762df
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/dashboard.mock.ts
@@ -0,0 +1,71 @@
+import { defineMock } from 'vite-plugin-mock-dev-server';
+
+import {
+  mockStats,
+  mockSalesTrend,
+  mockUserDistribution,
+  mockActivities,
+  mockChartData,
+} from '../data/dashboard.data';
+
+export default defineMock([
+  // Get statistics
+  {
+    url: '/api/dashboard/stats',
+    method: 'GET',
+    body: {
+      code: 200,
+      message: 'Success',
+      data: mockStats,
+      success: true,
+    },
+  },
+
+  // Get sales trend
+  {
+    url: '/api/dashboard/sales-trend',
+    method: 'GET',
+    body: {
+      code: 200,
+      message: 'Success',
+      data: mockSalesTrend,
+      success: true,
+    },
+  },
+
+  // Get user distribution
+  {
+    url: '/api/dashboard/user-distribution',
+    method: 'GET',
+    body: {
+      code: 200,
+      message: 'Success',
+      data: mockUserDistribution,
+      success: true,
+    },
+  },
+
+  // Get recent activities
+  {
+    url: '/api/dashboard/activities',
+    method: 'GET',
+    body: {
+      code: 200,
+      message: 'Success',
+      data: mockActivities,
+      success: true,
+    },
+  },
+
+  // Get chart data
+  {
+    url: '/api/dashboard/chart-data',
+    method: 'GET',
+    body: {
+      code: 200,
+      message: 'Success',
+      data: mockChartData,
+      success: true,
+    },
+  },
+]);
diff --git a/antdv-next-admin/mock/handlers/dept.mock.ts b/antdv-next-admin/mock/handlers/dept.mock.ts
new file mode 100644
index 0000000..3bda50a
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/dept.mock.ts
@@ -0,0 +1,121 @@
+import type { Department } from "@/types/dept";
+
+import { defineMock } from "vite-plugin-mock-dev-server";
+
+import { departments, buildDeptTree } from "../data/dept.data";
+
+export default defineMock([
+  // 获取部门树
+  {
+    url: "/api/dept/tree",
+    method: "GET",
+    body: (req) => {
+      const { name, status } = req.query;
+      let filtered = [...departments];
+
+      if (name) {
+        filtered = filtered.filter((item) =>
+          item.name.includes(name as string),
+        );
+      }
+      if (status) {
+        filtered = filtered.filter((item) => item.status === status);
+      }
+
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: buildDeptTree(filtered),
+      };
+    },
+  },
+
+  // 获取部门列表（扁平）
+  {
+    url: "/api/dept/list",
+    method: "GET",
+    body: (req) => {
+      const { name, status } = req.query;
+      let filtered = [...departments];
+
+      if (name) {
+        filtered = filtered.filter((item) =>
+          item.name.includes(name as string),
+        );
+      }
+      if (status) {
+        filtered = filtered.filter((item) => item.status === status);
+      }
+
+      filtered.sort((a, b) => a.sort - b.sort);
+
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: filtered,
+      };
+    },
+  },
+
+  // 创建部门
+  {
+    url: "/api/dept",
+    method: "POST",
+    body: (req) => {
+      const newDept: Department = {
+        id: String(Date.now()),
+        ...req.body,
+        createTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+        updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+      };
+      departments.push(newDept);
+      return { code: 200, message: "创建成功", success: true, data: newDept };
+    },
+  },
+
+  // 更新部门
+  {
+    url: "/api/dept/:id",
+    method: "PUT",
+    body: (req) => {
+      const { id } = req.params;
+      const index = departments.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        departments[index] = {
+          ...departments[index],
+          ...req.body,
+          updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+        };
+        return {
+          code: 200,
+          message: "更新成功",
+          success: true,
+          data: departments[index],
+        };
+      }
+      return { code: 404, message: "部门不存在", success: false };
+    },
+  },
+
+  // 删除部门
+  {
+    url: "/api/dept/:id",
+    method: "DELETE",
+    body: (req) => {
+      const { id } = req.params;
+      // 检查是否有子部门
+      const hasChildren = departments.some((item) => item.parentId === id);
+      if (hasChildren) {
+        return { code: 400, message: "存在子部门，无法删除", success: false };
+      }
+      const index = departments.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        departments.splice(index, 1);
+        return { code: 200, message: "删除成功", success: true };
+      }
+      return { code: 404, message: "部门不存在", success: false };
+    },
+  },
+]);
diff --git a/antdv-next-admin/mock/handlers/dict.mock.ts b/antdv-next-admin/mock/handlers/dict.mock.ts
new file mode 100644
index 0000000..867f160
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/dict.mock.ts
@@ -0,0 +1,289 @@
+import type { DictType, DictData } from "@/types/dict";
+
+import { defineMock } from "vite-plugin-mock-dev-server";
+
+import { dictTypes, dictData } from "../data/dict.data";
+
+export default defineMock([
+  // 获取所有字典类型
+  {
+    url: "/api/dict/types",
+    method: "GET",
+    body: () => {
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: dictTypes,
+      };
+    },
+  },
+
+  // 获取字典类型列表（分页）
+  {
+    url: "/api/dict/type/list",
+    method: "GET",
+    body: (req) => {
+      const { name, code, status, page = 1, pageSize = 10 } = req.query;
+
+      let filtered = [...dictTypes];
+
+      if (name) {
+        filtered = filtered.filter((item) =>
+          item.name.includes(name as string),
+        );
+      }
+      if (code) {
+        filtered = filtered.filter((item) =>
+          item.code.includes(code as string),
+        );
+      }
+      if (status) {
+        filtered = filtered.filter((item) => item.status === status);
+      }
+
+      const start = (Number(page) - 1) * Number(pageSize);
+      const end = start + Number(pageSize);
+      const list = filtered.slice(start, end);
+
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: {
+          list,
+          total: filtered.length,
+          current: Number(page),
+          pageSize: Number(pageSize),
+        },
+      };
+    },
+  },
+
+  // 创建字典类型
+  {
+    url: "/api/dict/type",
+    method: "POST",
+    body: (req) => {
+      const newType: DictType = {
+        id: String(Date.now()),
+        ...req.body,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+      };
+      dictTypes.push(newType);
+      return {
+        code: 200,
+        message: "创建成功",
+        success: true,
+        data: newType,
+      };
+    },
+  },
+
+  // 更新字典类型
+  {
+    url: "/api/dict/type/:id",
+    method: "PUT",
+    body: (req) => {
+      const { id } = req.params;
+      const index = dictTypes.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        dictTypes[index] = {
+          ...dictTypes[index],
+          ...req.body,
+          updateTime: new Date().toISOString(),
+        };
+        return {
+          code: 200,
+          message: "更新成功",
+          success: true,
+          data: dictTypes[index],
+        };
+      }
+      return {
+        code: 404,
+        message: "字典类型不存在",
+        success: false,
+      };
+    },
+  },
+
+  // 删除字典类型
+  {
+    url: "/api/dict/type/:id",
+    method: "DELETE",
+    body: (req) => {
+      const { id } = req.params;
+      const index = dictTypes.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        dictTypes.splice(index, 1);
+        return {
+          code: 200,
+          message: "删除成功",
+          success: true,
+        };
+      }
+      return {
+        code: 404,
+        message: "字典类型不存在",
+        success: false,
+      };
+    },
+  },
+
+  // 获取所有字典数据
+  {
+    url: "/api/dict/data/all",
+    method: "GET",
+    body: () => {
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: dictData,
+      };
+    },
+  },
+
+  // 获取字典数据列表（分页） - 必须在 :typeCode 之前，避免被参数路由匹配
+  {
+    url: "/api/dict/data/list",
+    method: "GET",
+    body: (req) => {
+      const {
+        typeCode,
+        label,
+        value,
+        status,
+        page = 1,
+        pageSize = 10,
+      } = req.query;
+
+      let filtered = [...dictData];
+
+      if (typeCode) {
+        filtered = filtered.filter((item) => item.typeCode === typeCode);
+      }
+      if (label) {
+        filtered = filtered.filter((item) =>
+          item.label.includes(label as string),
+        );
+      }
+      if (value) {
+        filtered = filtered.filter((item) =>
+          item.value.includes(value as string),
+        );
+      }
+      if (status) {
+        filtered = filtered.filter((item) => item.status === status);
+      }
+
+      const start = (Number(page) - 1) * Number(pageSize);
+      const end = start + Number(pageSize);
+      const list = filtered.slice(start, end);
+
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: {
+          list,
+          total: filtered.length,
+          current: Number(page),
+          pageSize: Number(pageSize),
+        },
+      };
+    },
+  },
+
+  // 根据类型获取字典数据
+  {
+    url: "/api/dict/data/:typeCode",
+    method: "GET",
+    body: (req) => {
+      const { typeCode } = req.params;
+      const filtered = dictData.filter(
+        (item) => item.typeCode === typeCode && item.status === "enabled",
+      );
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: filtered,
+      };
+    },
+  },
+
+  // 创建字典数据
+  {
+    url: "/api/dict/data",
+    method: "POST",
+    body: (req) => {
+      const newData: DictData = {
+        id: String(Date.now()),
+        ...req.body,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+      };
+      dictData.push(newData);
+      return {
+        code: 200,
+        message: "创建成功",
+        success: true,
+        data: newData,
+      };
+    },
+  },
+
+  // 更新字典数据
+  {
+    url: "/api/dict/data/:id",
+    method: "PUT",
+    body: (req) => {
+      const { id } = req.params;
+      const index = dictData.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        dictData[index] = {
+          ...dictData[index],
+          ...req.body,
+          updateTime: new Date().toISOString(),
+        };
+        return {
+          code: 200,
+          message: "更新成功",
+          success: true,
+          data: dictData[index],
+        };
+      }
+      return {
+        code: 404,
+        message: "字典数据不存在",
+        success: false,
+      };
+    },
+  },
+
+  // 删除字典数据
+  {
+    url: "/api/dict/data/:id",
+    method: "DELETE",
+    body: (req) => {
+      const { id } = req.params;
+      const index = dictData.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        dictData.splice(index, 1);
+        return {
+          code: 200,
+          message: "删除成功",
+          success: true,
+        };
+      }
+      return {
+        code: 404,
+        message: "字典数据不存在",
+        success: false,
+      };
+    },
+  },
+]);
diff --git a/antdv-next-admin/mock/handlers/file.mock.ts b/antdv-next-admin/mock/handlers/file.mock.ts
new file mode 100644
index 0000000..f4cde5c
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/file.mock.ts
@@ -0,0 +1,96 @@
+import { defineMock } from "vite-plugin-mock-dev-server";
+
+import { sysFiles } from "../data/file.data";
+
+export default defineMock([
+  {
+    url: "/api/file/list",
+    method: "GET",
+    body: (req) => {
+      const { name, ext, storage, page = 1, pageSize = 20 } = req.query;
+      let filtered = [...sysFiles];
+
+      if (name)
+        filtered = filtered.filter((item) =>
+          item.originalName.includes(name as string),
+        );
+      if (ext) filtered = filtered.filter((item) => item.ext === ext);
+      if (storage)
+        filtered = filtered.filter((item) => item.storage === storage);
+
+      const start = (Number(page) - 1) * Number(pageSize);
+      const list = filtered.slice(start, start + Number(pageSize));
+
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: {
+          list,
+          total: filtered.length,
+          current: Number(page),
+          pageSize: Number(pageSize),
+        },
+      };
+    },
+  },
+
+  {
+    url: "/api/file/:id",
+    method: "GET",
+    body: (req) => {
+      const file = sysFiles.find((item) => item.id === req.params.id);
+      if (!file) return { code: 404, message: "文件不存在", success: false };
+      return { code: 200, message: "success", success: true, data: file };
+    },
+  },
+
+  {
+    url: "/api/file/upload",
+    method: "POST",
+    body: (req) => {
+      const { originalName, size, mimeType, storage = "local" } = req.body;
+
+      if (!originalName) {
+        return { code: 400, message: "文件名不能为空", success: false };
+      }
+
+      const ext = originalName.includes(".")
+        ? originalName.split(".").pop()
+        : "";
+      const newFile = {
+        id: `file-${Date.now()}`,
+        originalName,
+        storedName: `${Date.now()}-${originalName}`,
+        size: size || 0,
+        ext: ext || "",
+        mimeType: mimeType || "application/octet-stream",
+        storage,
+        url: `/uploads/${Date.now()}-${originalName}`,
+        uploader: "admin",
+        uploadTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+      };
+
+      sysFiles.unshift(newFile);
+
+      return {
+        code: 200,
+        message: "上传成功",
+        success: true,
+        data: newFile,
+      };
+    },
+  },
+
+  {
+    url: "/api/file/:id",
+    method: "DELETE",
+    body: (req) => {
+      const index = sysFiles.findIndex((item) => item.id === req.params.id);
+      if (index === -1)
+        return { code: 404, message: "文件不存在", success: false };
+      sysFiles.splice(index, 1);
+      return { code: 200, message: "删除成功", success: true };
+    },
+  },
+]);
diff --git a/antdv-next-admin/mock/handlers/log.mock.ts b/antdv-next-admin/mock/handlers/log.mock.ts
new file mode 100644
index 0000000..e380fdf
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/log.mock.ts
@@ -0,0 +1,139 @@
+import { defineMock } from "vite-plugin-mock-dev-server";
+
+import { operationLogs, loginLogs } from "../data/log.data";
+
+export default defineMock([
+  {
+    url: "/api/log/operation/list",
+    method: "GET",
+    body: (req) => {
+      const {
+        username,
+        module,
+        action,
+        status,
+        startTime,
+        endTime,
+        page = 1,
+        pageSize = 10,
+      } = req.query;
+
+      let filtered = [...operationLogs];
+
+      if (username) {
+        filtered = filtered.filter((item) =>
+          item.username.includes(username as string),
+        );
+      }
+      if (module) {
+        filtered = filtered.filter((item) => item.module === module);
+      }
+      if (action) {
+        filtered = filtered.filter((item) => item.action === action);
+      }
+      if (status) {
+        filtered = filtered.filter((item) => item.status === status);
+      }
+      if (startTime) {
+        filtered = filtered.filter(
+          (item) => item.createTime >= (startTime as string),
+        );
+      }
+      if (endTime) {
+        filtered = filtered.filter(
+          (item) => item.createTime <= (endTime as string),
+        );
+      }
+
+      const start = (Number(page) - 1) * Number(pageSize);
+      const end = start + Number(pageSize);
+      const list = filtered.slice(start, end);
+
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: {
+          list,
+          total: filtered.length,
+          current: Number(page),
+          pageSize: Number(pageSize),
+        },
+      };
+    },
+  },
+
+  {
+    url: "/api/log/login/list",
+    method: "GET",
+    body: (req) => {
+      const {
+        username,
+        ip,
+        status,
+        startTime,
+        endTime,
+        page = 1,
+        pageSize = 10,
+      } = req.query;
+
+      let filtered = [...loginLogs];
+
+      if (username) {
+        filtered = filtered.filter((item) =>
+          item.username.includes(username as string),
+        );
+      }
+      if (ip) {
+        filtered = filtered.filter((item) => item.ip.includes(ip as string));
+      }
+      if (status) {
+        filtered = filtered.filter((item) => item.status === status);
+      }
+      if (startTime) {
+        filtered = filtered.filter(
+          (item) => item.createTime >= (startTime as string),
+        );
+      }
+      if (endTime) {
+        filtered = filtered.filter(
+          (item) => item.createTime <= (endTime as string),
+        );
+      }
+
+      const start = (Number(page) - 1) * Number(pageSize);
+      const end = start + Number(pageSize);
+      const list = filtered.slice(start, end);
+
+      return {
+        code: 200,
+        message: "success",
+        success: true,
+        data: {
+          list,
+          total: filtered.length,
+          current: Number(page),
+          pageSize: Number(pageSize),
+        },
+      };
+    },
+  },
+
+  {
+    url: "/api/log/operation/clear",
+    method: "DELETE",
+    body: () => {
+      operationLogs.length = 0;
+      return { code: 200, message: "success", success: true };
+    },
+  },
+
+  {
+    url: "/api/log/login/clear",
+    method: "DELETE",
+    body: () => {
+      loginLogs.length = 0;
+      return { code: 200, message: "success", success: true };
+    },
+  },
+]);
diff --git a/antdv-next-admin/mock/handlers/permission.mock.ts b/antdv-next-admin/mock/handlers/permission.mock.ts
new file mode 100644
index 0000000..bf293b3
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/permission.mock.ts
@@ -0,0 +1,342 @@
+import type { Permission } from '@/types/auth';
+
+import { faker } from '@faker-js/faker';
+import { defineMock } from 'vite-plugin-mock-dev-server';
+
+import { mockPermissions } from '../data/permissions.data';
+
+const permissionStore: Permission[] = JSON.parse(JSON.stringify(mockPermissions));
+
+const deepClone = <T>(value: T): T => JSON.parse(JSON.stringify(value));
+
+function findPermissionById(
+  permissions: Permission[],
+  id: string,
+  parent: Permission | null = null,
+): { permission: Permission | null; parent: Permission | null } {
+  for (const permission of permissions) {
+    if (permission.id === id) {
+      return { permission, parent };
+    }
+
+    if (permission.children && permission.children.length > 0) {
+      const result = findPermissionById(permission.children, id, permission);
+      if (result.permission) {
+        return result;
+      }
+    }
+  }
+
+  return { permission: null, parent: null };
+}
+
+function removePermissionById(permissions: Permission[], id: string): boolean {
+  const index = permissions.findIndex((permission) => permission.id === id);
+  if (index !== -1) {
+    permissions.splice(index, 1);
+    return true;
+  }
+
+  return permissions.some((permission) => {
+    if (!permission.children || permission.children.length === 0) {
+      return false;
+    }
+
+    const removed = removePermissionById(permission.children, id);
+    if (removed && permission.children.length === 0) {
+      delete permission.children;
+    }
+    return removed;
+  });
+}
+
+function appendPermission(
+  permissions: Permission[],
+  permission: Permission,
+  parentId?: string,
+): boolean {
+  if (!parentId) {
+    permissions.push(permission);
+    return true;
+  }
+
+  const { permission: parentPermission } = findPermissionById(permissions, parentId);
+  if (!parentPermission) {
+    return false;
+  }
+
+  if (!parentPermission.children) {
+    parentPermission.children = [];
+  }
+  parentPermission.children.push(permission);
+  return true;
+}
+
+function filterPermissionTree(
+  permissions: Permission[],
+  keyword?: string,
+  type?: string,
+  status?: string,
+): Permission[] {
+  const normalizedKeyword = keyword?.toLowerCase().trim();
+
+  return permissions.reduce<Permission[]>((result, permission) => {
+    const children = permission.children
+      ? filterPermissionTree(permission.children, keyword, type, status)
+      : [];
+
+    const matchedKeyword =
+      !normalizedKeyword ||
+      permission.name.toLowerCase().includes(normalizedKeyword) ||
+      String(permission.code || '')
+        .toLowerCase()
+        .includes(normalizedKeyword) ||
+      (permission.path || '').toLowerCase().includes(normalizedKeyword);
+
+    const matchedType = !type || permission.type === type;
+    const matchedStatus = !status || (permission.status || 'active') === status;
+    const matchedSelf = matchedKeyword && matchedType && matchedStatus;
+
+    if (matchedSelf || children.length > 0) {
+      result.push({
+        ...permission,
+        children: children.length > 0 ? children : undefined,
+      });
+    }
+
+    return result;
+  }, []);
+}
+
+function normalizeQueryValue(value: unknown): string | undefined {
+  if (Array.isArray(value)) {
+    return normalizeQueryValue(value[0]);
+  }
+
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+
+  const trimmed = value.trim();
+  return trimmed ? trimmed : undefined;
+}
+
+export default defineMock([
+  // Get permission list (tree structure)
+  {
+    url: '/api/permissions',
+    method: 'GET',
+    body: (req) => {
+      const query = req.query || {};
+      const keyword = normalizeQueryValue(query.keyword);
+      const type = normalizeQueryValue(query.type);
+      const status = normalizeQueryValue(query.status);
+      const filtered = filterPermissionTree(permissionStore, keyword, type, status);
+
+      return {
+        code: 200,
+        message: 'Success',
+        data: deepClone(filtered),
+        success: true,
+      };
+    },
+  },
+
+  // Get permission tree (for menu)
+  {
+    url: '/api/permissions/tree',
+    method: 'GET',
+    body: () => {
+      return {
+        code: 200,
+        message: 'Success',
+        data: deepClone(permissionStore),
+        success: true,
+      };
+    },
+  },
+
+  // Get permission by ID
+  {
+    url: '/api/permissions/:id',
+    method: 'GET',
+    body: (req) => {
+      const { id } = req.params;
+      const { permission } = findPermissionById(permissionStore, id);
+
+      if (!permission) {
+        return {
+          code: 404,
+          message: 'Permission not found',
+          data: null,
+          success: false,
+        };
+      }
+
+      return {
+        code: 200,
+        message: 'Success',
+        data: deepClone(permission),
+        success: true,
+      };
+    },
+  },
+
+  // Create permission
+  {
+    url: '/api/permissions',
+    method: 'POST',
+    body: (req) => {
+      const payload = req.body || {};
+      const permission: Permission = {
+        id: faker.string.uuid(),
+        name: payload.name,
+        code: payload.code,
+        description: payload.description || '',
+        resource: payload.resource || payload.path || payload.code,
+        action: payload.action || (payload.type === 'menu' ? 'view' : '*'),
+        type: payload.type || 'menu',
+        parentId: payload.parentId,
+        path: payload.path,
+        component: payload.component,
+        icon: payload.icon,
+        sort: payload.sort ?? 0,
+        status: payload.status || 'active',
+        visible: payload.visible ?? true,
+        children: payload.children && payload.children.length > 0 ? payload.children : undefined,
+      };
+
+      const appended = appendPermission(permissionStore, permission, payload.parentId);
+      if (!appended) {
+        return {
+          code: 400,
+          message: 'Parent permission not found',
+          data: null,
+          success: false,
+        };
+      }
+
+      return {
+        code: 200,
+        message: 'Permission created successfully',
+        data: deepClone(permission),
+        success: true,
+      };
+    },
+  },
+
+  // Update permission
+  {
+    url: '/api/permissions/:id',
+    method: 'PUT',
+    body: (req) => {
+      const { id } = req.params;
+      const payload = req.body || {};
+      const { permission, parent } = findPermissionById(permissionStore, id);
+
+      if (!permission) {
+        return {
+          code: 404,
+          message: 'Permission not found',
+          data: null,
+          success: false,
+        };
+      }
+
+      if (payload.parentId !== undefined && payload.parentId !== permission.parentId) {
+        const movedPermission = deepClone(permission);
+        removePermissionById(permissionStore, id);
+        movedPermission.parentId = payload.parentId;
+        movedPermission.children = permission.children || [];
+        const appended = appendPermission(permissionStore, movedPermission, payload.parentId);
+        if (!appended) {
+          appendPermission(permissionStore, movedPermission, parent?.id);
+          return {
+            code: 400,
+            message: 'Parent permission not found',
+            data: null,
+            success: false,
+          };
+        }
+      }
+
+      const { permission: nextPermission } = findPermissionById(permissionStore, id);
+      if (!nextPermission) {
+        return {
+          code: 404,
+          message: 'Permission not found',
+          data: null,
+          success: false,
+        };
+      }
+
+      const children = nextPermission.children;
+      Object.assign(nextPermission, payload, { children });
+
+      return {
+        code: 200,
+        message: 'Permission updated successfully',
+        data: deepClone(nextPermission),
+        success: true,
+      };
+    },
+  },
+
+  // Delete permission
+  {
+    url: '/api/permissions/:id',
+    method: 'DELETE',
+    body: (req) => {
+      const { id } = req.params;
+      const removed = removePermissionById(permissionStore, id);
+
+      if (!removed) {
+        return {
+          code: 404,
+          message: 'Permission not found',
+          data: null,
+          success: false,
+        };
+      }
+
+      return {
+        code: 200,
+        message: 'Permission deleted successfully',
+        data: null,
+        success: true,
+      };
+    },
+  },
+
+  // Get user permissions
+  {
+    url: '/api/permissions/user',
+    method: 'GET',
+    body: (req) => {
+      // In a real app, this would be based on the user's roles
+      // For now, return all permissions for admin
+      const token = req.headers.authorization?.replace('Bearer ', '');
+      const userId = token?.split('-')[2];
+
+      if (userId === '1') {
+        // Admin - all permissions
+        return {
+          code: 200,
+          message: 'Success',
+          data: deepClone(permissionStore),
+          success: true,
+        };
+      } else {
+        // Regular user - limited permissions
+        return {
+          code: 200,
+          message: 'Success',
+          data: deepClone(
+            permissionStore.filter((permission) => permission.code === 'dashboard.view'),
+          ),
+          success: true,
+        };
+      }
+    },
+  },
+]);
diff --git a/antdv-next-admin/mock/handlers/role.mock.ts b/antdv-next-admin/mock/handlers/role.mock.ts
new file mode 100644
index 0000000..631bc82
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/role.mock.ts
@@ -0,0 +1,163 @@
+import { faker } from '@faker-js/faker';
+import { defineMock } from 'vite-plugin-mock-dev-server';
+
+import { mockRoles } from '../data/roles.data';
+
+export default defineMock([
+  // Get role list
+  {
+    url: '/api/roles',
+    method: 'GET',
+    body: (req) => {
+      const { current = 1, pageSize = 10, name, code } = req.query;
+
+      // Filter roles
+      let filteredRoles = [...mockRoles];
+
+      if (name) {
+        filteredRoles = filteredRoles.filter((role) =>
+          role.name.toLowerCase().includes(name.toLowerCase()),
+        );
+      }
+
+      if (code) {
+        filteredRoles = filteredRoles.filter((role) =>
+          role.code.toLowerCase().includes(code.toLowerCase()),
+        );
+      }
+
+      // Pagination
+      const start = (Number(current) - 1) * Number(pageSize);
+      const end = start + Number(pageSize);
+      const list = filteredRoles.slice(start, end);
+
+      return {
+        code: 200,
+        message: 'Success',
+        data: {
+          list,
+          total: filteredRoles.length,
+          current: Number(current),
+          pageSize: Number(pageSize),
+        },
+        success: true,
+      };
+    },
+  },
+
+  // Get role by ID
+  {
+    url: '/api/roles/:id',
+    method: 'GET',
+    body: (req) => {
+      const { id } = req.params;
+      const role = mockRoles.find((r) => r.id === id);
+
+      if (role) {
+        return {
+          code: 200,
+          message: 'Success',
+          data: role,
+          success: true,
+        };
+      } else {
+        return {
+          code: 404,
+          message: 'Role not found',
+          data: null,
+          success: false,
+        };
+      }
+    },
+  },
+
+  // Create role
+  {
+    url: '/api/roles',
+    method: 'POST',
+    body: (req) => {
+      const roleData = req.body;
+
+      const newRole = {
+        id: faker.string.uuid(),
+        name: roleData.name,
+        code: roleData.code,
+        description: roleData.description || '',
+        permissions: roleData.permissions || [],
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      };
+
+      mockRoles.push(newRole);
+
+      return {
+        code: 200,
+        message: 'Role created successfully',
+        data: newRole,
+        success: true,
+      };
+    },
+  },
+
+  // Update role
+  {
+    url: '/api/roles/:id',
+    method: 'PUT',
+    body: (req) => {
+      const { id } = req.params;
+      const roleData = req.body;
+
+      const index = mockRoles.findIndex((r) => r.id === id);
+
+      if (index !== -1) {
+        mockRoles[index] = {
+          ...mockRoles[index],
+          ...roleData,
+          updatedAt: new Date().toISOString(),
+        };
+
+        return {
+          code: 200,
+          message: 'Role updated successfully',
+          data: mockRoles[index],
+          success: true,
+        };
+      } else {
+        return {
+          code: 404,
+          message: 'Role not found',
+          data: null,
+          success: false,
+        };
+      }
+    },
+  },
+
+  // Delete role
+  {
+    url: '/api/roles/:id',
+    method: 'DELETE',
+    body: (req) => {
+      const { id } = req.params;
+      const index = mockRoles.findIndex((r) => r.id === id);
+
+      if (index !== -1) {
+        mockRoles.splice(index, 1);
+
+        return {
+          code: 200,
+          message: 'Role deleted successfully',
+          data: null,
+          success: true,
+        };
+      } else {
+        return {
+          code: 404,
+          message: 'Role not found',
+          data: null,
+          success: false,
+        };
+      }
+    },
+  },
+]);
diff --git a/antdv-next-admin/mock/handlers/user.mock.ts b/antdv-next-admin/mock/handlers/user.mock.ts
new file mode 100644
index 0000000..c138921
--- /dev/null
+++ b/antdv-next-admin/mock/handlers/user.mock.ts
@@ -0,0 +1,234 @@
+import { faker } from "@faker-js/faker";
+import { defineMock } from "vite-plugin-mock-dev-server";
+
+import { mockUsers } from "../data/users.data";
+
+export default defineMock([
+  // Get user list (with pagination and search)
+  {
+    url: "/api/users",
+    method: "GET",
+    body: (req) => {
+      const {
+        current = 1,
+        pageSize = 10,
+        username,
+        email,
+        status,
+        gender,
+      } = req.query;
+
+      // Filter users
+      let filteredUsers = [...mockUsers];
+
+      if (username) {
+        filteredUsers = filteredUsers.filter((user) =>
+          user.username.toLowerCase().includes(username.toLowerCase()),
+        );
+      }
+
+      if (email) {
+        filteredUsers = filteredUsers.filter((user) =>
+          user.email.toLowerCase().includes(email.toLowerCase()),
+        );
+      }
+
+      if (status) {
+        filteredUsers = filteredUsers.filter((user) => user.status === status);
+      }
+
+      if (gender) {
+        const genderValues = Array.isArray(gender)
+          ? gender.map((item) => String(item))
+          : String(gender)
+              .split(",")
+              .map((item) => item.trim())
+              .filter(Boolean);
+        if (genderValues.length > 0) {
+          filteredUsers = filteredUsers.filter((user) =>
+            genderValues.includes(String(user.gender)),
+          );
+        }
+      }
+
+      // Pagination
+      const start = (Number(current) - 1) * Number(pageSize);
+      const end = start + Number(pageSize);
+      const list = filteredUsers.slice(start, end);
+
+      return {
+        code: 200,
+        message: "Success",
+        data: {
+          list,
+          total: filteredUsers.length,
+          current: Number(current),
+          pageSize: Number(pageSize),
+        },
+        success: true,
+      };
+    },
+  },
+
+  // Get user by ID
+  {
+    url: "/api/users/:id",
+    method: "GET",
+    body: (req) => {
+      const { id } = req.params;
+      const user = mockUsers.find((u) => u.id === id);
+
+      if (user) {
+        return {
+          code: 200,
+          message: "Success",
+          data: user,
+          success: true,
+        };
+      } else {
+        return {
+          code: 404,
+          message: "User not found",
+          data: null,
+          success: false,
+        };
+      }
+    },
+  },
+
+  // Create user
+  {
+    url: "/api/users",
+    method: "POST",
+    body: (req) => {
+      const userData = req.body;
+
+      const newUser = {
+        id: faker.string.uuid(),
+        username: userData.username || `user_${faker.string.alphanumeric(6)}`,
+        email: userData.email || faker.internet.email(),
+        realName: userData.realName || faker.person.fullName(),
+        avatar: userData.avatar || faker.image.avatar(),
+        phone: userData.phone || `1${faker.string.numeric(10)}`,
+        gender: userData.gender || "male",
+        birthDate:
+          userData.birthDate ||
+          faker.date
+            .birthdate({ min: 18, max: 65, mode: "age" })
+            .toISOString()
+            .split("T")[0],
+        bio: userData.bio || "",
+        status: userData.status || "active",
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        roles: userData.roles || [],
+        permissions: userData.permissions || [],
+      };
+
+      mockUsers.push(newUser);
+
+      return {
+        code: 200,
+        message: "User created successfully",
+        data: newUser,
+        success: true,
+      };
+    },
+  },
+
+  // Update user
+  {
+    url: "/api/users/:id",
+    method: "PUT",
+    body: (req) => {
+      const { id } = req.params;
+      const userData = req.body;
+
+      const index = mockUsers.findIndex((u) => u.id === id);
+
+      if (index !== -1) {
+        mockUsers[index] = {
+          ...mockUsers[index],
+          ...userData,
+          updatedAt: new Date().toISOString(),
+        };
+
+        return {
+          code: 200,
+          message: "User updated successfully",
+          data: mockUsers[index],
+          success: true,
+        };
+      } else {
+        return {
+          code: 404,
+          message: "User not found",
+          data: null,
+          success: false,
+        };
+      }
+    },
+  },
+
+  // Delete user
+  {
+    url: "/api/users/:id",
+    method: "DELETE",
+    body: (req) => {
+      const { id } = req.params;
+      const index = mockUsers.findIndex((u) => u.id === id);
+
+      if (index !== -1) {
+        mockUsers.splice(index, 1);
+
+        return {
+          code: 200,
+          message: "User deleted successfully",
+          data: null,
+          success: true,
+        };
+      } else {
+        return {
+          code: 404,
+          message: "User not found",
+          data: null,
+          success: false,
+        };
+      }
+    },
+  },
+
+  // Batch delete users
+  {
+    url: "/api/users/batch",
+    method: "DELETE",
+    body: (req) => {
+      const { ids } = req.body;
+
+      if (!ids || !Array.isArray(ids) || ids.length === 0) {
+        return {
+          code: 400,
+          message: "Invalid user IDs",
+          data: null,
+          success: false,
+        };
+      }
+
+      let deletedCount = 0;
+      ids.forEach((id: string) => {
+        const index = mockUsers.findIndex((u) => u.id === id);
+        if (index !== -1) {
+          mockUsers.splice(index, 1);
+          deletedCount++;
+        }
+      });
+
+      return {
+        code: 200,
+        message: `Deleted ${deletedCount} users successfully`,
+        data: { deletedCount },
+        success: true,
+      };
+    },
+  },
+]);
diff --git a/antdv-next-admin/package-lock.json b/antdv-next-admin/package-lock.json
new file mode 100644
index 0000000..cc32760
--- /dev/null
+++ b/antdv-next-admin/package-lock.json
@@ -0,0 +1,8554 @@
+{
+  "name": "antdv-next-admin",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "antdv-next-admin",
+      "version": "1.0.0",
+      "dependencies": {
+        "@ant-design/colors": "^8.0.1",
+        "@antdv-next/icons": "^1.0.6",
+        "@codemirror/autocomplete": "^6.20.1",
+        "@codemirror/commands": "^6.10.3",
+        "@codemirror/lang-css": "^6.3.1",
+        "@codemirror/lang-go": "^6.0.1",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/lang-java": "^6.0.2",
+        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/lang-markdown": "^6.5.0",
+        "@codemirror/lang-php": "^6.0.2",
+        "@codemirror/lang-python": "^6.2.1",
+        "@codemirror/lang-rust": "^6.0.2",
+        "@codemirror/lang-sql": "^6.10.0",
+        "@codemirror/lang-xml": "^6.1.0",
+        "@codemirror/lang-yaml": "^6.1.3",
+        "@codemirror/language": "^6.12.3",
+        "@codemirror/lint": "^6.9.5",
+        "@codemirror/search": "^6.6.0",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/theme-one-dark": "^6.1.3",
+        "@codemirror/view": "^6.41.0",
+        "@iconify-json/ion": "^1.2.6",
+        "@iconify-json/mdi": "^1.2.3",
+        "@iconify-json/ri": "^1.2.10",
+        "@iconify/vue": "^5.0.0",
+        "@milkdown/core": "^7.20.0",
+        "@milkdown/ctx": "^7.20.0",
+        "@milkdown/plugin-block": "^7.20.0",
+        "@milkdown/plugin-clipboard": "^7.20.0",
+        "@milkdown/plugin-history": "^7.20.0",
+        "@milkdown/plugin-listener": "^7.20.0",
+        "@milkdown/plugin-prism": "^7.20.0",
+        "@milkdown/plugin-slash": "^7.20.0",
+        "@milkdown/plugin-tooltip": "^7.20.0",
+        "@milkdown/plugin-upload": "^7.20.0",
+        "@milkdown/preset-commonmark": "^7.20.0",
+        "@milkdown/preset-gfm": "^7.20.0",
+        "@milkdown/theme-nord": "^7.20.0",
+        "@milkdown/transformer": "^7.20.0",
+        "@milkdown/vue": "^7.20.0",
+        "@tiptap/extension-image": "^3.22.1",
+        "@tiptap/extension-link": "^3.22.1",
+        "@tiptap/extension-placeholder": "^3.22.1",
+        "@tiptap/starter-kit": "^3.22.1",
+        "@tiptap/vue-3": "^3.22.1",
+        "@uiw/codemirror-theme-dracula": "^4.25.9",
+        "@uiw/codemirror-theme-github": "^4.25.9",
+        "@uiw/codemirror-theme-material": "^4.25.9",
+        "@uiw/codemirror-theme-monokai": "^4.25.9",
+        "@uiw/codemirror-theme-nord": "^4.25.9",
+        "@uiw/codemirror-theme-solarized": "^4.25.9",
+        "@uiw/codemirror-theme-tokyo-night": "^4.25.9",
+        "@uiw/codemirror-themes": "^4.25.9",
+        "antdv-next": "^1.1.8",
+        "axios": "^1.14.0",
+        "dayjs": "^1.11.20",
+        "echarts": "^6.0.0",
+        "lodash-es": "^4.18.1",
+        "pinia": "^3.0.4",
+        "pinyin-pro": "^3.28.0",
+        "vue": "^3.5.31",
+        "vue-codemirror": "^6.1.1",
+        "vue-echarts": "^8.0.1",
+        "vue-i18n": "^11.3.0",
+        "vue-router": "^5.0.4",
+        "vuedraggable": "^4.1.0"
+      },
+      "devDependencies": {
+        "@faker-js/faker": "^10.4.0",
+        "@tailwindcss/vite": "^4.2.2",
+        "@types/lodash-es": "^4.17.12",
+        "@vitejs/plugin-vue": "^6.0.4",
+        "oxfmt": "^0.43.0",
+        "oxlint": "^1.58.0",
+        "sass": "^1.69.7",
+        "tailwindcss": "^4.2.2",
+        "typescript": "^6.0.2",
+        "vite": "^8.0.3",
+        "vite-plugin-mock-dev-server": "^2.1.1",
+        "vue-tsc": "^3.2.6"
+      }
+    },
+    "node_modules/@ant-design/colors": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-8.0.1.tgz",
+      "integrity": "sha512-foPVl0+SWIslGUtD/xBr1p9U4AKzPhNYEseXYRRo5QSzGACYZrQbe11AYJbYfAWnWSpGBx6JjBmSeugUsD9vqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^3.0.0"
+      }
+    },
+    "node_modules/@ant-design/fast-color": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/fast-color/-/fast-color-3.0.1.tgz",
+      "integrity": "sha512-esKJegpW4nckh0o6kV3Tkb7NPIZYbPnnFxmQDUmL08ukXZAvV85TZBr70eGuke/CIArLaP6aw8lt9KILjnWuOw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==",
+      "license": "MIT"
+    },
+    "node_modules/@antdv-next/cssinjs": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/@antdv-next/cssinjs/-/cssinjs-1.0.6.tgz",
+      "integrity": "sha512-8NL+AzjFZVHfG9A2l+r4rNWdRfbS5FFFozGU9jVl7WNgd7y+wEYSzl+qvRjJuqd3IryacrDfsTxIgcSQkVlr5Q==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/unitless": "^0.7.5",
+        "@v-c/util": "^1.0.19",
+        "csstype": "^3.2.3",
+        "stylis": "^4.3.6"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@antdv-next/icons": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/@antdv-next/icons/-/icons-1.0.6.tgz",
+      "integrity": "sha512-SCPe/otLTmOEVoAdrZ/fn5pr1wlA1Tbzhk908gWPDnjSLEPIcv4n0Feh416RKj1oe8PKbPIC95BH+HaBXybojg==",
+      "dependencies": {
+        "@ant-design/colors": "7.2.1",
+        "@ant-design/icons-svg": "^4.4.2",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@antdv-next/icons/node_modules/@ant-design/colors": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-7.2.1.tgz",
+      "integrity": "sha512-lCHDcEzieu4GA3n8ELeZ5VQ8pKQAWcGGLRTQ50aQM2iqPpq2evTxER84jfdPvsPAtEcZ7m44NI45edFMo8oOYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^2.0.6"
+      }
+    },
+    "node_modules/@antdv-next/icons/node_modules/@ant-design/fast-color": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/@ant-design/fast-color/-/fast-color-2.0.6.tgz",
+      "integrity": "sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.1",
+      "resolved": "https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-6.20.1.tgz",
+      "integrity": "sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmmirror.com/@codemirror/commands/-/commands-6.10.3.tgz",
+      "integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-angular": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-angular/-/lang-angular-0.1.4.tgz",
+      "integrity": "sha512-oap+gsltb/fzdlTQWD6BFF4bSLKcDnlxDsLdePiJpCVNKWXSTAbiiQeYI3UmES+BLAdkmIC1WjyztC1pi/bX4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.1.2",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.3"
+      }
+    },
+    "node_modules/@codemirror/lang-cpp": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-cpp/-/lang-cpp-6.0.3.tgz",
+      "integrity": "sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/cpp": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+      "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.1.7"
+      }
+    },
+    "node_modules/@codemirror/lang-go": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-go/-/lang-go-6.0.1.tgz",
+      "integrity": "sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/go": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.11",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-html/-/lang-html-6.4.11.tgz",
+      "integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.12"
+      }
+    },
+    "node_modules/@codemirror/lang-java": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-java/-/lang-java-6.0.2.tgz",
+      "integrity": "sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/java": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+      "integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-jinja": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-jinja/-/lang-jinja-6.0.0.tgz",
+      "integrity": "sha512-47MFmRcR8UAxd8DReVgj7WJN1WSAMT7OJnewwugZM4XiHWkOjgJQqvEM1NpMj9ALMPyxmlziEI1opH9IaEvmaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.2.0",
+        "@lezer/lr": "^1.4.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+      "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-less": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-less/-/lang-less-6.0.2.tgz",
+      "integrity": "sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/lang-css": "^6.2.0",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-liquid": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-liquid/-/lang-liquid-6.3.2.tgz",
+      "integrity": "sha512-6PDVU3ZnfeYyz1at1E/ttorErZvZFXXt1OPhtfe1EZJ2V2iDFa0CwPqPgG5F7NXN0yONGoBogKmFAafKTqlwIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.1"
+      }
+    },
+    "node_modules/@codemirror/lang-markdown": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-markdown/-/lang-markdown-6.5.0.tgz",
+      "integrity": "sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.7.1",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.3.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/markdown": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-php": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-php/-/lang-php-6.0.2.tgz",
+      "integrity": "sha512-ZKy2v1n8Fc8oEXj0Th0PUMXzQJ0AIR6TaZU+PbDHExFwdu+guzOA4jmCHS1Nz4vbFezwD7LyBdDnddSJeScMCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/php": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-python": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-python/-/lang-python-6.2.1.tgz",
+      "integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.3.2",
+        "@codemirror/language": "^6.8.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/python": "^1.1.4"
+      }
+    },
+    "node_modules/@codemirror/lang-rust": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-rust/-/lang-rust-6.0.2.tgz",
+      "integrity": "sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/rust": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-sass": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-sass/-/lang-sass-6.0.2.tgz",
+      "integrity": "sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/lang-css": "^6.2.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/sass": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-sql": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-sql/-/lang-sql-6.10.0.tgz",
+      "integrity": "sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-vue": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-vue/-/lang-vue-0.1.3.tgz",
+      "integrity": "sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.1.2",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.1"
+      }
+    },
+    "node_modules/@codemirror/lang-wast": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-wast/-/lang-wast-6.0.2.tgz",
+      "integrity": "sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-xml": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-xml/-/lang-xml-6.1.0.tgz",
+      "integrity": "sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/xml": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-yaml": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-yaml/-/lang-yaml-6.1.3.tgz",
+      "integrity": "sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.2.0",
+        "@lezer/lr": "^1.0.0",
+        "@lezer/yaml": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.12.3",
+      "resolved": "https://registry.npmmirror.com/@codemirror/language/-/language-6.12.3.tgz",
+      "integrity": "sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/language-data": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/language-data/-/language-data-6.5.2.tgz",
+      "integrity": "sha512-CPkWBKrNS8stYbEU5kwBwTf3JB1kghlbh4FSAwzGW2TEscdeHHH4FGysREW86Mqnj3Qn09s0/6Ea/TutmoTobg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/lang-angular": "^0.1.0",
+        "@codemirror/lang-cpp": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-go": "^6.0.0",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-java": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/lang-jinja": "^6.0.0",
+        "@codemirror/lang-json": "^6.0.0",
+        "@codemirror/lang-less": "^6.0.0",
+        "@codemirror/lang-liquid": "^6.0.0",
+        "@codemirror/lang-markdown": "^6.0.0",
+        "@codemirror/lang-php": "^6.0.0",
+        "@codemirror/lang-python": "^6.0.0",
+        "@codemirror/lang-rust": "^6.0.0",
+        "@codemirror/lang-sass": "^6.0.0",
+        "@codemirror/lang-sql": "^6.0.0",
+        "@codemirror/lang-vue": "^0.1.1",
+        "@codemirror/lang-wast": "^6.0.0",
+        "@codemirror/lang-xml": "^6.0.0",
+        "@codemirror/lang-yaml": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/legacy-modes": "^6.4.0"
+      }
+    },
+    "node_modules/@codemirror/legacy-modes": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/legacy-modes/-/legacy-modes-6.5.2.tgz",
+      "integrity": "sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.5",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lint/-/lint-6.9.5.tgz",
+      "integrity": "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/search/-/search-6.6.0.tgz",
+      "integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/state/-/state-6.6.0.tgz",
+      "integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmmirror.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.41.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/view/-/view-6.41.0.tgz",
+      "integrity": "sha512-6H/qadXsVuDY219Yljhohglve8xf4B8xJkVOEWfA5uiYKiTFppjqsvsfR5iPA0RbvRBoOyTZpbLIxe9+0UR8xA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.6.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "license": "MIT"
+    },
+    "node_modules/@faker-js/faker": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmmirror.com/@faker-js/faker/-/faker-10.4.0.tgz",
+      "integrity": "sha512-sDBWI3yLy8EcDzgobvJTWq1MJYzAkQdpjXuPukga9wXonhpMRvd1Izuo2Qgwey2OiEoRIBr35RMU9HJRoOHzpw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fakerjs"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || ^23.5.0 || >=24.0.0",
+        "npm": ">=10"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
+    "node_modules/@hapi/bourne": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/@hapi/bourne/-/bourne-3.0.0.tgz",
+      "integrity": "sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@iconify-json/ion": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/@iconify-json/ion/-/ion-1.2.7.tgz",
+      "integrity": "sha512-ZJNG5kLCbTPr68mdP0jx6Q3lB9AMEQKO2+VvIjuJ2llGFICBLD+cvESn/qGDRIqSfk2D3PrFMf/Qg8WKIUV7cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify-json/mdi": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/@iconify-json/mdi/-/mdi-1.2.3.tgz",
+      "integrity": "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify-json/ri": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmmirror.com/@iconify-json/ri/-/ri-1.2.10.tgz",
+      "integrity": "sha512-WWMhoncVVM+Xmu9T5fgu2lhYRrKTEWhKk3Com0KiM111EeEsRLiASjpsFKnC/SrB6covhUp95r2mH8tGxhgd5Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
+    "node_modules/@intlify/core-base": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-11.3.0.tgz",
+      "integrity": "sha512-NNX5jIwF4TJBe7RtSKDMOA6JD9mp2mRcBHAwt2X+Q8PvnZub0yj5YYXlFu2AcESdgQpEv/5Yx2uOCV/yh7YkZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/devtools-types": "11.3.0",
+        "@intlify/message-compiler": "11.3.0",
+        "@intlify/shared": "11.3.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/devtools-types": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmmirror.com/@intlify/devtools-types/-/devtools-types-11.3.0.tgz",
+      "integrity": "sha512-G9CNL4WpANWVdUjubOIIS7/D2j/0j+1KJmhBJxHilWNKr9mmt3IjFV3Hq4JoBP23uOoC5ynxz/FHZ42M+YxfGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.3.0",
+        "@intlify/shared": "11.3.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-11.3.0.tgz",
+      "integrity": "sha512-RAJp3TMsqohg/Wa7bVF3cChRhecSYBLrTCQSj7j0UtWVFLP+6iEJoE2zb7GU5fp+fmG5kCbUdzhmlAUCWXiUJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.3.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-11.3.0.tgz",
+      "integrity": "sha512-LC6P/uay7rXL5zZ5+5iRJfLs/iUN8apu9tm8YqQVmW3Uq3X4A0dOFUIDuAmB7gAC29wTHOS3EiN/IosNSz0eNQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@lezer/common": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/@lezer/common/-/common-1.5.1.tgz",
+      "integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/cpp": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/@lezer/cpp/-/cpp-1.1.5.tgz",
+      "integrity": "sha512-DIhSXmYtJKLehrjzDFN+2cPt547ySQ41nA8yqcDf/GxMc+YM736xqltFkvADL2M0VebU5I+3+4ks2Vv+Kyq3Aw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/@lezer/css/-/css-1.3.3.tgz",
+      "integrity": "sha512-RzBo8r+/6QJeow7aPHIpGVIH59xTcJXp399820gZoMo9noQDRVpJLheIBUicYwKcsbOYoBRoLZlf2720dG/4Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/go": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@lezer/go/-/go-1.0.1.tgz",
+      "integrity": "sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmmirror.com/@lezer/html/-/html-1.3.13.tgz",
+      "integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/java": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@lezer/java/-/java-1.1.3.tgz",
+      "integrity": "sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/@lezer/javascript/-/javascript-1.5.4.tgz",
+      "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/@lezer/lr/-/lr-1.4.8.tgz",
+      "integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/markdown": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmmirror.com/@lezer/markdown/-/markdown-1.6.3.tgz",
+      "integrity": "sha512-jpGm5Ps+XErS+xA4urw7ogEGkeZOahVQF21Z6oECF0sj+2liwZopd2+I8uH5I/vZsRuuze3OxBREIANLf6KKUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/php": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@lezer/php/-/php-1.0.5.tgz",
+      "integrity": "sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.1.0"
+      }
+    },
+    "node_modules/@lezer/python": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmmirror.com/@lezer/python/-/python-1.1.18.tgz",
+      "integrity": "sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/rust": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@lezer/rust/-/rust-1.0.2.tgz",
+      "integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/sass": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@lezer/sass/-/sass-1.1.0.tgz",
+      "integrity": "sha512-3mMGdCTUZ/84ArHOuXWQr37pnf7f+Nw9ycPUeKX+wu19b7pSMcZGLbaXwvD2APMBDOGxPmpK/O6S1v1EvLoqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/xml": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/@lezer/xml/-/xml-1.0.6.tgz",
+      "integrity": "sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/yaml": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/@lezer/yaml/-/yaml-1.0.4.tgz",
+      "integrity": "sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.4.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
+    "node_modules/@milkdown/components": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/components/-/components-7.20.0.tgz",
+      "integrity": "sha512-Qn91/oZugGjf17ARE51nbEsH4YklZQaomRSsfxOAtIcwGEJe5osq+zhhKGtgAYFfUb6rU3W86Pe4XDlXN6vFjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1",
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/exception": "7.20.0",
+        "@milkdown/plugin-tooltip": "7.20.0",
+        "@milkdown/preset-commonmark": "7.20.0",
+        "@milkdown/preset-gfm": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/transformer": "7.20.0",
+        "@milkdown/utils": "7.20.0",
+        "@types/lodash-es": "^4.17.12",
+        "clsx": "^2.0.0",
+        "dompurify": "^3.2.5",
+        "lodash-es": "^4.17.21",
+        "nanoid": "^5.0.9",
+        "unist-util-visit": "^5.0.0",
+        "vue": "^3.5.20"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6",
+        "@codemirror/state": "^6",
+        "@codemirror/view": "^6"
+      }
+    },
+    "node_modules/@milkdown/core": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/core/-/core-7.20.0.tgz",
+      "integrity": "sha512-X9LaUcIR4Y2oiY2J5tslavlPVOwIB3X8/9z1bOeBjlIPtr+urbkY7YEX86EeLV9LyRQ3+t+jXaLMCIjW1wsV6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/exception": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/transformer": "7.20.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.3"
+      }
+    },
+    "node_modules/@milkdown/crepe": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/crepe/-/crepe-7.20.0.tgz",
+      "integrity": "sha512-KT+oFF6Q7mI41z01c9v/wUUCyQ2f908TgOsa6mwi25yuxnxQxISZFCjRvlh0sc9p9D3CrMeuJWGCN6DialQdig==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/commands": "^6.2.4",
+        "@codemirror/language": "^6.10.1",
+        "@codemirror/language-data": "^6.3.1",
+        "@codemirror/state": "^6.4.1",
+        "@codemirror/theme-one-dark": "^6.1.2",
+        "@codemirror/view": "^6.16.0",
+        "@milkdown/kit": "7.20.0",
+        "@types/lodash-es": "^4.17.12",
+        "clsx": "^2.0.0",
+        "codemirror": "^6.0.1",
+        "katex": "^0.16.0",
+        "lodash-es": "^4.17.21",
+        "prosemirror-virtual-cursor": "^0.4.2",
+        "remark-math": "^6.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vue": "^3.5.20"
+      }
+    },
+    "node_modules/@milkdown/ctx": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/ctx/-/ctx-7.20.0.tgz",
+      "integrity": "sha512-LUK4xdsUngY2xCCvPTyHPifjAknJ5rE6VBjgsP+LySIUKeFUrhqzo/zz2vaOODKzm3DBMIhpZAoW3MAqxoMGIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/exception": "7.20.0"
+      }
+    },
+    "node_modules/@milkdown/exception": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/exception/-/exception-7.20.0.tgz",
+      "integrity": "sha512-u8EL7rbqgrWrPpkDhrxUYXauw2DO52JUQmuokrUZvqezmflo7pgIDCr+Rk6AQslzB4Xw+n9eYik5rXX3RXC7Qg==",
+      "license": "MIT"
+    },
+    "node_modules/@milkdown/kit": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/kit/-/kit-7.20.0.tgz",
+      "integrity": "sha512-X74KMa0tcDAAMOE9aFtBRN+RCdD/HMXor5YN18e7d0pe4a65MGFklUGlcg1U6zEfeMMYeC3msNvMKLMwk3O5RA==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/components": "7.20.0",
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/plugin-block": "7.20.0",
+        "@milkdown/plugin-clipboard": "7.20.0",
+        "@milkdown/plugin-cursor": "7.20.0",
+        "@milkdown/plugin-history": "7.20.0",
+        "@milkdown/plugin-indent": "7.20.0",
+        "@milkdown/plugin-listener": "7.20.0",
+        "@milkdown/plugin-slash": "7.20.0",
+        "@milkdown/plugin-tooltip": "7.20.0",
+        "@milkdown/plugin-trailing": "7.20.0",
+        "@milkdown/plugin-upload": "7.20.0",
+        "@milkdown/preset-commonmark": "7.20.0",
+        "@milkdown/preset-gfm": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/transformer": "7.20.0",
+        "@milkdown/utils": "7.20.0"
+      }
+    },
+    "node_modules/@milkdown/plugin-block": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-block/-/plugin-block-7.20.0.tgz",
+      "integrity": "sha512-jIXfzJ8Zje+6+9ZwQuVmNeYE8KfzqL9YJ/YdMvWQIEiKhy2x9pZMAkkufgmUlq1aouxOV+gk5fX+ovxzEzfSrA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1",
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0",
+        "@types/lodash-es": "^4.17.12",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/@milkdown/plugin-clipboard": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-clipboard/-/plugin-clipboard-7.20.0.tgz",
+      "integrity": "sha512-PyokNvwgWcO6/I/0LxDRnATpnxvs5upFRlp6eO8PhjwBFZftCIU6D15Wg4JAxwW7Y0NyTWfViWjc9TwiBd6KOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0"
+      }
+    },
+    "node_modules/@milkdown/plugin-cursor": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-cursor/-/plugin-cursor-7.20.0.tgz",
+      "integrity": "sha512-goCPwUARBzGV6Hvnr3P57Bj5TnyFjYIfDFLvgWTIlsm/dR2Wr4Syy4HDOtaKO9YL/VtZ8gtiZVgeo0vhc4CzMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0",
+        "prosemirror-drop-indicator": "^0.1.0"
+      }
+    },
+    "node_modules/@milkdown/plugin-history": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-history/-/plugin-history-7.20.0.tgz",
+      "integrity": "sha512-lqOYQBrxKj4px/i0Cav3zRkCArwnkv8o7fGMh3NtnUXMLSE7/xojK5GFPS4EaS/UKK7/+i1oV2+HRA6+6Ezy7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0"
+      }
+    },
+    "node_modules/@milkdown/plugin-indent": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-indent/-/plugin-indent-7.20.0.tgz",
+      "integrity": "sha512-KfdIztQMuHv4Rx1JmSQe2vooN4+Zm7MhjQkNolGyiI7BPZbu855hVIC/s96x3Dk04tkbb+M/i9MJhxCazxfd6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0"
+      }
+    },
+    "node_modules/@milkdown/plugin-listener": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-listener/-/plugin-listener-7.20.0.tgz",
+      "integrity": "sha512-Sj+B63JfM3NVVS3uGXTPkoz8xx8MQYrR28pI9AaqX5q60tvCvOJw9E1ODvSsBEjeqnN4kablDthIugLlBhOlwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@types/lodash-es": "^4.17.12",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/@milkdown/plugin-prism": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-prism/-/plugin-prism-7.20.0.tgz",
+      "integrity": "sha512-Iy8rh/KOzTmJIWpPhjzeF2NEkhldLZ0Edu0/zU3UBsom939ZcUdcsLujwpad7P6KlueBHw8QgSNe0gOEQ56yTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0",
+        "@types/hast": "^3.0.4",
+        "refractor": "^5.0.0"
+      }
+    },
+    "node_modules/@milkdown/plugin-slash": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-slash/-/plugin-slash-7.20.0.tgz",
+      "integrity": "sha512-Qm3/ZxkGYd5XN+J/X91lGGu7SBzuQBOTOLjuJdg4qDBZmdEHlGojB+5BhCSAMB3WGyCpQQGbSqKOelUrXtj68w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0",
+        "@types/lodash-es": "^4.17.12",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/@milkdown/plugin-tooltip": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-tooltip/-/plugin-tooltip-7.20.0.tgz",
+      "integrity": "sha512-BVaXorpmA6ZAS3+xv0rgrtjV1h2K39G5Z9Wun4RxT1YXJTTbzIuFQ3hwBAGLjLMwTsosp7YhRLaMJJAC0jEY5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0",
+        "@types/lodash-es": "^4.17.12",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/@milkdown/plugin-trailing": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-trailing/-/plugin-trailing-7.20.0.tgz",
+      "integrity": "sha512-AxDeMSAZfj0Er7RYLvLRf6FKdQtLVmotxML6Se6zgqIa++bFeIXCU22/FC+9r/6d1eUtraTva9ez5K2qPy8qig==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0"
+      }
+    },
+    "node_modules/@milkdown/plugin-upload": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/plugin-upload/-/plugin-upload-7.20.0.tgz",
+      "integrity": "sha512-g3UQrD2zfpm86r3BcBDfOdEAyQHhay1nf5wUQgNf4zn6IgRttfEF8tosQsL1B/WBnZB05hH5scLWo4DR2bFhUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/exception": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/utils": "7.20.0"
+      }
+    },
+    "node_modules/@milkdown/preset-commonmark": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/preset-commonmark/-/preset-commonmark-7.20.0.tgz",
+      "integrity": "sha512-+mPcONXfdjaXdx8JMxDIOT3PWHfy5vewK8iY8j8bUiYD8Iw7YfyWTUh9JHOf4vmOpiKGCJd7+iz7e93u95bQRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/exception": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/transformer": "7.20.0",
+        "@milkdown/utils": "7.20.0",
+        "remark-inline-links": "^7.0.0",
+        "unist-util-visit": "^5.0.0",
+        "unist-util-visit-parents": "^6.0.1"
+      }
+    },
+    "node_modules/@milkdown/preset-gfm": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/preset-gfm/-/preset-gfm-7.20.0.tgz",
+      "integrity": "sha512-ulErTWDqrGYYqto4kQO9dPTMRp+q44pdRTPW4MTeiSO7eJ6JIBUKSqtCm1zf7MX6nZPaPhuscmg5CU2moXOwxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/exception": "7.20.0",
+        "@milkdown/preset-commonmark": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/transformer": "7.20.0",
+        "@milkdown/utils": "7.20.0",
+        "prosemirror-safari-ime-span": "^1.0.1",
+        "remark-gfm": "^4.0.1"
+      }
+    },
+    "node_modules/@milkdown/prose": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/prose/-/prose-7.20.0.tgz",
+      "integrity": "sha512-Qe6jmKcXsjOfpk8duDFdkLCEo5044L8HSyKVn7ewAe7XJJPUM6bPQaP130UAznq75/+TiKxFCzurcrBO3LzNRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/exception": "7.20.0",
+        "prosemirror-changeset": "^2.3.1",
+        "prosemirror-commands": "^1.7.1",
+        "prosemirror-dropcursor": "^1.8.2",
+        "prosemirror-gapcursor": "^1.4.0",
+        "prosemirror-history": "^1.5.0",
+        "prosemirror-inputrules": "^1.5.1",
+        "prosemirror-keymap": "^1.2.3",
+        "prosemirror-model": "^1.25.4",
+        "prosemirror-schema-list": "^1.5.1",
+        "prosemirror-state": "^1.4.4",
+        "prosemirror-tables": "^1.8.1",
+        "prosemirror-transform": "^1.10.5",
+        "prosemirror-view": "^1.41.3"
+      }
+    },
+    "node_modules/@milkdown/theme-nord": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/theme-nord/-/theme-nord-7.20.0.tgz",
+      "integrity": "sha512-yfT+BQvURTmi+Cjt9rRqFjORrQISbJItKzQD+486hc8hfBcbHnbEjhNAkvoi6IAOWsK+Cj67BuCFtKbYeovrKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "clsx": "^2.0.0"
+      }
+    },
+    "node_modules/@milkdown/transformer": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/transformer/-/transformer-7.20.0.tgz",
+      "integrity": "sha512-h7KGFr1o5AYwc+hEfnA3Dldo4jRrYOB/7KExaqelcjUz++KYI/9LXMOsV7CpgjtLI3Xtf2IIRTZND1+p2nsOaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/exception": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "remark": "^15.0.1",
+        "unified": "^11.0.3"
+      }
+    },
+    "node_modules/@milkdown/utils": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/utils/-/utils-7.20.0.tgz",
+      "integrity": "sha512-ciEhtLKhIW/Kaz/NRE5DUXVoMCdenn7S4mClrO7sZ/nXtmObnk3okJzSDnamQoDOcLOIbpOu1V3E1Btkvc5x9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/core": "7.20.0",
+        "@milkdown/ctx": "7.20.0",
+        "@milkdown/exception": "7.20.0",
+        "@milkdown/prose": "7.20.0",
+        "@milkdown/transformer": "7.20.0",
+        "nanoid": "^5.0.9"
+      }
+    },
+    "node_modules/@milkdown/vue": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/@milkdown/vue/-/vue-7.20.0.tgz",
+      "integrity": "sha512-hQ7D/WIY5+ZXWgonaebXVSAK2QDOTVLIb9sLUfOXwzIzjTh+zDNy3v9+OWETKWvIS+myP/u5GIYdHCbLlHpELA==",
+      "license": "MIT",
+      "dependencies": {
+        "@milkdown/crepe": "7.20.0",
+        "@milkdown/kit": "7.20.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.2.tgz",
+      "integrity": "sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@noble/hashes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@noble/hashes/-/hashes-1.8.0.tgz",
+      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@ocavue/utils": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/@ocavue/utils/-/utils-1.6.0.tgz",
+      "integrity": "sha512-8W3q1hxx9qFdrYgPtbElllG/tqYkO/dMhlRUiqasO0SuDFTj78azSQjhIrBTFWxlBPPsSZN6zXYHmb3RwN2Jtg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ocavue"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.122.0",
+      "resolved": "https://registry.npmmirror.com/@oxc-project/types/-/types-0.122.0.tgz",
+      "integrity": "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@oxfmt/binding-android-arm-eabi": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-android-arm-eabi/-/binding-android-arm-eabi-0.43.0.tgz",
+      "integrity": "sha512-CgU2s+/9hHZgo0IxVxrbMPrMj+tJ6VM3mD7Mr/4oiz4FNTISLoCvRmB5nk4wAAle045RtRjd86m673jwPyb1OQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-android-arm64": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-android-arm64/-/binding-android-arm64-0.43.0.tgz",
+      "integrity": "sha512-T9OfRwjA/EdYxAqbvR7TtqLv5nIrwPXuCtTwOHtS7aR9uXyn74ZYgzgTo6/ZwvTq9DY4W+DsV09hB2EXgn9EbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-darwin-arm64": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-darwin-arm64/-/binding-darwin-arm64-0.43.0.tgz",
+      "integrity": "sha512-o3i49ZUSJWANzXMAAVY1wnqb65hn4JVzwlRQ5qfcwhRzIA8lGVaud31Q3by5ALHPrksp5QEaKCQF9aAS3TXpZA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-darwin-x64": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-darwin-x64/-/binding-darwin-x64-0.43.0.tgz",
+      "integrity": "sha512-vWECzzCFkb0kK6jaHjbtC5sC3adiNWtqawFCxhpvsWlzVeKmv5bNvkB4nux+o4JKWTpHCM57NDK/MeXt44txmA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-freebsd-x64": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-freebsd-x64/-/binding-freebsd-x64-0.43.0.tgz",
+      "integrity": "sha512-rgz8JpkKiI/umOf7fl9gwKyQasC8bs5SYHy6g7e4SunfLBY3+8ATcD5caIg8KLGEtKFm5ujKaH8EfjcmnhzTLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-arm-gnueabihf": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.43.0.tgz",
+      "integrity": "sha512-nWYnF3vIFzT4OM1qL/HSf1Yuj96aBuKWSaObXHSWliwAk2rcj7AWd6Lf7jowEBQMo4wCZVnueIGw/7C4u0KTBQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-arm-musleabihf": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.43.0.tgz",
+      "integrity": "sha512-sFg+NWJbLfupYTF4WELHAPSnLPOn1jiDZ33Z1jfDnTaA+cC3iB35x0FMMZTFdFOz3icRIArncwCcemJFGXu6TQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-arm64-gnu": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.43.0.tgz",
+      "integrity": "sha512-MelWqv68tX6wZEILDrTc9yewiGXe7im62+5x0bNXlCYFOZdA+VnYiJfAihbROsZ5fm90p9C3haFrqjj43XnlAA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-arm64-musl": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.43.0.tgz",
+      "integrity": "sha512-ROaWfYh+6BSJ1Arwy5ujijTlwnZetxDxzBpDc1oBR4d7rfrPBqzeyjd5WOudowzQUgyavl2wEpzn1hw3jWcqLA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-ppc64-gnu": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.43.0.tgz",
+      "integrity": "sha512-PJRs/uNxmFipJJ8+SyKHh7Y7VZIKQicqrrBzvfyM5CtKi8D7yZKTwUOZV3ffxmiC2e7l1SDJpkBEOyue5NAFsg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-riscv64-gnu": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.43.0.tgz",
+      "integrity": "sha512-j6biGAgzIhj+EtHXlbNumvwG7XqOIdiU4KgIWRXAEj/iUbHKukKW8eXa4MIwpQwW1YkxovduKtzEAPnjlnAhVQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-riscv64-musl": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.43.0.tgz",
+      "integrity": "sha512-RYWxAcslKxvy7yri24Xm9cmD0RiANaiEPs007EFG6l9h1ChM69Q5SOzACaCoz4Z9dEplnhhneeBaTWMEdpgIbA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-s390x-gnu": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.43.0.tgz",
+      "integrity": "sha512-DT6Q8zfQQy3jxpezAsBACEHNUUixKSYTwdXeXojNHe4DQOoxjPdjr3Szu6BRNjxLykZM/xMNmp9ElOIyDppwtw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-x64-gnu": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.43.0.tgz",
+      "integrity": "sha512-R8Yk7iYcuZORXmCfFZClqbDxRZgZ9/HEidUuBNdoX8Ptx07cMePnMVJ/woB84lFIDjh2ROHVaOP40Ds3rBXFqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-linux-x64-musl": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-linux-x64-musl/-/binding-linux-x64-musl-0.43.0.tgz",
+      "integrity": "sha512-F2YYqyvnQNvi320RWZNAvsaWEHwmW3k4OwNJ1hZxRKXupY63expbBaNp6jAgvYs7y/g546vuQnGHQuCBhslhLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-openharmony-arm64": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-openharmony-arm64/-/binding-openharmony-arm64-0.43.0.tgz",
+      "integrity": "sha512-OE6TdietLXV3F6c7pNIhx/9YC1/2YFwjU9DPc/fbjxIX19hNIaP1rS0cFjCGJlGX+cVJwIKWe8Mos+LdQ1yAJw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-win32-arm64-msvc": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.43.0.tgz",
+      "integrity": "sha512-0nWK6a7pGkbdoypfVicmV9k/N1FwjPZENoqhlTU+5HhZnAhpIO3za30nEE33u6l6tuy9OVfpdXUqxUgZ+4lbZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-win32-ia32-msvc": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.43.0.tgz",
+      "integrity": "sha512-9aokTR4Ft+tRdvgN/pKzSkVy2ksc4/dCpDm9L/xFrbIw0yhLtASLbvoG/5WOTUh/BRPPnfGTsWznEqv0dlOmhA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxfmt/binding-win32-x64-msvc": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/@oxfmt/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.43.0.tgz",
+      "integrity": "sha512-4bPgdQux2ZLWn3bf2TTXXMHcJB4lenmuxrLqygPmvCJ104Yqzj1UctxSRzR31TiJ4MLaG22RK8dUsVpJtrCz5g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm-eabi": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.58.0.tgz",
+      "integrity": "sha512-1T7UN3SsWWxpWyWGn1cT3ASNJOo+pI3eUkmEl7HgtowapcV8kslYpFQcYn431VuxghXakPNlbjRwhqmR37PFOg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm64": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-android-arm64/-/binding-android-arm64-1.58.0.tgz",
+      "integrity": "sha512-GryzujxuiRv2YFF7bRy8mKcxlbuAN+euVUtGJt9KKbLT8JBUIosamVhcthLh+VEr6KE6cjeVMAQxKAzJcoN7dg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-arm64": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.58.0.tgz",
+      "integrity": "sha512-7/bRSJIwl4GxeZL9rPZ11anNTyUO9epZrfEJH/ZMla3+/gbQ6xZixh9nOhsZ0QwsTW7/5J2A/fHbD1udC5DQQA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-x64": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.58.0.tgz",
+      "integrity": "sha512-EqdtJSiHweS2vfILNrpyJ6HUwpEq2g7+4Zx1FPi4hu3Hu7tC3znF6ufbXO8Ub2LD4mGgznjI7kSdku9NDD1Mkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-freebsd-x64": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.58.0.tgz",
+      "integrity": "sha512-VQt5TH4M42mY20F545G637RKxV/yjwVtKk2vfXuazfReSIiuvWBnv+FVSvIV5fKVTJNjt3GSJibh6JecbhGdBw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-gnueabihf": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.58.0.tgz",
+      "integrity": "sha512-fBYcj4ucwpAtjJT3oeBdFBYKvNyjRSK+cyuvBOTQjh0jvKp4yeA4S/D0IsCHus/VPaNG5L48qQkh+Vjy3HL2/Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-musleabihf": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.58.0.tgz",
+      "integrity": "sha512-0BeuFfwlUHlJ1xpEdSD1YO3vByEFGPg36uLjK1JgFaxFb4W6w17F8ET8sz5cheZ4+x5f2xzdnRrrWv83E3Yd8g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-gnu": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.58.0.tgz",
+      "integrity": "sha512-TXlZgnPTlxrQzxG9ZXU7BNwx1Ilrr17P3GwZY0If2EzrinqRH3zXPc3HrRcBJgcsoZNMuNL5YivtkJYgp467UQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-musl": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.58.0.tgz",
+      "integrity": "sha512-zSoYRo5dxHLcUx93Stl2hW3hSNjPt99O70eRVWt5A1zwJ+FPjeCCANCD2a9R4JbHsdcl11TIQOjyigcRVOH2mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-ppc64-gnu": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.58.0.tgz",
+      "integrity": "sha512-NQ0U/lqxH2/VxBYeAIvMNUK1y0a1bJ3ZicqkF2c6wfakbEciP9jvIE4yNzCFpZaqeIeRYaV7AVGqEO1yrfVPjA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-gnu": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.58.0.tgz",
+      "integrity": "sha512-X9J+kr3gIC9FT8GuZt0ekzpNUtkBVzMVU4KiKDSlocyQuEgi3gBbXYN8UkQiV77FTusLDPsovjo95YedHr+3yg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-musl": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.58.0.tgz",
+      "integrity": "sha512-CDze3pi1OO3Wvb/QsXjmLEY4XPKGM6kIo82ssNOgmcl1IdndF9VSGAE38YLhADWmOac7fjqhBw82LozuUVxD0Q==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-s390x-gnu": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.58.0.tgz",
+      "integrity": "sha512-b/89glbxFaEAcA6Uf1FvCNecBJEgcUTsV1quzrqXM/o4R1M4u+2KCVuyGCayN2UpsRWtGGLb+Ver0tBBpxaPog==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-gnu": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.58.0.tgz",
+      "integrity": "sha512-0/yYpkq9VJFCEcuRlrViGj8pJUFFvNS4EkEREaN7CB1EcLXJIaVSSa5eCihwBGXtOZxhnblWgxks9juRdNQI7w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-musl": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.58.0.tgz",
+      "integrity": "sha512-hr6FNvmcAXiH+JxSvaJ4SJ1HofkdqEElXICW9sm3/Rd5eC3t7kzvmLyRAB3NngKO2wzXRCAm4Z/mGWfrsS4X8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-openharmony-arm64": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.58.0.tgz",
+      "integrity": "sha512-R+O368VXgRql1K6Xar+FEo7NEwfo13EibPMoTv3sesYQedRXd6m30Dh/7lZMxnrQVFfeo4EOfYIP4FpcgWQNHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-arm64-msvc": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.58.0.tgz",
+      "integrity": "sha512-Q0FZiAY/3c4YRj4z3h9K1PgaByrifrfbBoODSeX7gy97UtB7pySPUQfC2B/GbxWU6k7CzQrRy5gME10PltLAFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-ia32-msvc": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.58.0.tgz",
+      "integrity": "sha512-Y8FKBABrSPp9H0QkRLHDHOSUgM/309a3IvOVgPcVxYcX70wxJrk608CuTg7w+C6vEd724X5wJoNkBcGYfH7nNQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-x64-msvc": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.58.0.tgz",
+      "integrity": "sha512-bCn5rbiz5My+Bj7M09sDcnqW0QJyINRVxdZ65x1/Y2tGrMwherwK/lpk+HRQCKvXa8pcaQdF5KY5j54VGZLwNg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@paralleldrive/cuid2": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/@paralleldrive/cuid2/-/cuid2-2.3.1.tgz",
+      "integrity": "sha512-XO7cAxhnTZl0Yggq6jOgjiOHhbgcO4NqFqwSmQpjK3b6TEE6Uj/jfSk6wzYyemh3+I0sHirKSetjQwn5cZktFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@noble/hashes": "^1.1.5"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@pengzhanbo/utils": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/@pengzhanbo/utils/-/utils-3.3.1.tgz",
+      "integrity": "sha512-rVmmTdeQs+gdk5XboXG7gv4LSLnCceZ9l9Z1v/P+zScOpwPYn6mSVukPtRC22234rXC/13AZV2gZ3ZDvNmP9XA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@remirror/core-constants": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
+      "license": "MIT"
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.12.tgz",
+      "integrity": "sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.12.tgz",
+      "integrity": "sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.12.tgz",
+      "integrity": "sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.12.tgz",
+      "integrity": "sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.12.tgz",
+      "integrity": "sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.12.tgz",
+      "integrity": "sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
+      "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/node/-/node-4.2.2.tgz",
+      "integrity": "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide/-/oxide-4.2.2.tgz",
+      "integrity": "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-x64": "4.2.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.2",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.2.tgz",
+      "integrity": "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.2.tgz",
+      "integrity": "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.2.tgz",
+      "integrity": "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.2.tgz",
+      "integrity": "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.2.tgz",
+      "integrity": "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.2.tgz",
+      "integrity": "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.2.tgz",
+      "integrity": "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.2.tgz",
+      "integrity": "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.2.tgz",
+      "integrity": "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.2.tgz",
+      "integrity": "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.2.tgz",
+      "integrity": "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.2.tgz",
+      "integrity": "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/vite/-/vite-4.2.2.tgz",
+      "integrity": "sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.2.2",
+        "@tailwindcss/oxide": "4.2.2",
+        "tailwindcss": "4.2.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/@tiptap/core": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/core/-/core-3.22.1.tgz",
+      "integrity": "sha512-6wPNhkdLIGYiKAGqepDCRtR0TYGJxV40SwOEN2vlPhsXqAgzmyG37UyREj5pGH5xTekugqMCgCnyRg7m5nYoYQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-blockquote/-/extension-blockquote-3.22.1.tgz",
+      "integrity": "sha512-omPsJ/IMAZYhXqOaEenYE+HA9U2zju5rQbAn6Xktynvr4A5P95jqkgAwncXB82pCkNYU/uYxi51vyTweTeEUHA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-bold/-/extension-bold-3.22.1.tgz",
+      "integrity": "sha512-0+q6Apu1Vx2+ReB2ktTpBrQ5/dCvGzTkJCy+MZ/t8WBcybqFXOKYRCr/i/VGPDpXZttxpk0EPl0+ao+NVcUTAA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.22.1.tgz",
+      "integrity": "sha512-JJI63N55hLPjfqHgBnbG1ORZTXJiswnfBkfNd8YKytCC8D++g5qX3UMObxmJKLMBRGyqjEi6krzOyYtOix5ALA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1",
+        "@tiptap/pm": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-bullet-list/-/extension-bullet-list-3.22.1.tgz",
+      "integrity": "sha512-83L+4N2JziWORbWtlsM0xBm3LOKIw4YtIm+Kh4amV5kGvIgIL5I1KYzoxv20qjgFX2k08LtLMwPdvPSPSh4e7g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-code/-/extension-code-3.22.1.tgz",
+      "integrity": "sha512-Ze+hjSLLCn+5gVpuE/Uv7mQ83AlG5A9OPsuDoyzTpJ2XNvZP2iZdwQMGqwXKC8eH7fIOJN6XQ3IDv/EhltQx/Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-code-block/-/extension-code-block-3.22.1.tgz",
+      "integrity": "sha512-fr3b1seFsAeYHtPAb9fbATkGcgyfStD05GHsZXFLh7yCpf2ejWLNxdWJT/g+FggSEHYFKCXT06aixk0WbtRcWw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1",
+        "@tiptap/pm": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-document/-/extension-document-3.22.1.tgz",
+      "integrity": "sha512-fBI/+PGtK6pzitqjSSSYL2+uZglX6T53zb5nLEmN/q8q7FzUuUpglp8toHVhBG05WDk4vx6Z7bC95uyxkYdoAA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-dropcursor/-/extension-dropcursor-3.22.1.tgz",
+      "integrity": "sha512-PuSNoTROZB564KpTG9ExVB3CsfRa0ridHx+1sWZajOBVZJiXSn4QlS/ShS509SOx8z17DyxEw06IH//OHY9XyQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-floating-menu/-/extension-floating-menu-3.22.1.tgz",
+      "integrity": "sha512-TaZqmaoKv36FzbKTrBkkv74o0t8dYTftNZ7NotBqfSki0BB2PupTCJHafdu1YI0zmJ3xEzjB/XKcKPz2+10sDA==",
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@tiptap/core": "^3.22.1",
+        "@tiptap/pm": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-gapcursor/-/extension-gapcursor-3.22.1.tgz",
+      "integrity": "sha512-qqsyy7unWM3elv+7ru+6paKAnw1PZTvjNVQu3UzB6d556Gx2uE4isXJNdBaslBZdp2EoaYdIkhhEccW9B/Nwqg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-hard-break/-/extension-hard-break-3.22.1.tgz",
+      "integrity": "sha512-hzLwLEZVbZODa9q5UiCQpOUmDnyxN19FA4LhlqLP0/JSHewP/aol5igFZwuw0XVFp425BuzPjrB7tmr0GRTDWw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-heading/-/extension-heading-3.22.1.tgz",
+      "integrity": "sha512-EaIihzrOfXUHQlL6fFyJCkDrjgg0e/eD4jpkjhKpeuJDcqf7eJ1c0E2zcNRAiZkeXdN/hTQFaXKsSyNUE7T7Sg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.22.1.tgz",
+      "integrity": "sha512-Q18A8IN+gnfptIksPeVAI6oOBGYKAGf+QN0FEJ5OXO4BEAmA3hflflA1rWNfPC4aQNry/N7sAl8Gpd6HuIbz2w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1",
+        "@tiptap/pm": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-image": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-image/-/extension-image-3.22.1.tgz",
+      "integrity": "sha512-FtZCOWyyaEvSfaOPoH78IKb1BlG/Vao4PARdlrVCD1FlV1YGLAgSW5YkQAJ/vPTLwyNNZtqryaBpZrA8Wm25nQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-italic/-/extension-italic-3.22.1.tgz",
+      "integrity": "sha512-EXPZWEsWJK9tUMypddOBvayaBeu8wFV2uH5PNrtDKrfRZ1Bf8GQ3lfcO0blHssaQ9nWqa9HwBC1mdfWcmfpxig==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-link": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-link/-/extension-link-3.22.1.tgz",
+      "integrity": "sha512-RHch/Bqv+QDvW3J1CXmiTB54pyrQYNQq8Vfa7is/O209dNPA8tdbkRP44rDjqn8NeDCriC/oJ4avWeXL4qNDVw==",
+      "license": "MIT",
+      "dependencies": {
+        "linkifyjs": "^4.3.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1",
+        "@tiptap/pm": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-list": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-list/-/extension-list-3.22.1.tgz",
+      "integrity": "sha512-6bVI5A12sFeyb0EngABV8/qCtC2IgiDbWC8mtNNLh5dAVGaUKo1KucL6vRYDhzXhyO/eHuGYepXZDLOOdS9LIQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1",
+        "@tiptap/pm": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-list-item/-/extension-list-item-3.22.1.tgz",
+      "integrity": "sha512-v0FgSX3cqLY3L1hIe2PFRTR3/+wlFOdFjv0p3fSJ5Tl7cgU7DR1OcljFqpw0exePcmt6dXqXVQua3PxSVV15eA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-list-keymap": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-list-keymap/-/extension-list-keymap-3.22.1.tgz",
+      "integrity": "sha512-00Nz4jJygYGJg6N1mdbQUslFG9QaGZq5P9MFwqoduWku7gYHWkZoZvrkxZrYtxGTHVIlLnF8LIfblAlOwNd76g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-ordered-list/-/extension-ordered-list-3.22.1.tgz",
+      "integrity": "sha512-sbd99ZUa1lIemH7N6dLB+9aYxUgduwW2216VM3dLJBS9hmTA4iDRxWx0a1ApnAVv+sZasRSbb/wpYLtXviA1XQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-paragraph/-/extension-paragraph-3.22.1.tgz",
+      "integrity": "sha512-mnvGEZfZFysHGvmEqrSLjeddaNPB3UmomTInv9gsImw8hlB4/gQedvB6Qf2tFfIjl4ISKC5AbFxraSnJfjaL5g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-placeholder": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-placeholder/-/extension-placeholder-3.22.1.tgz",
+      "integrity": "sha512-f8NJNEJTDuT9UIZdVIAPoySgzQ/nKxR/gWRqCnwtR4O26zo/JdKI2XvrTE/iNrV3Khme8rjCtO7/8CQgTeMMxA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-strike/-/extension-strike-3.22.1.tgz",
+      "integrity": "sha512-LTdnGmglK1f/AW//36k+Km8URA1wrTLENi3R5N+/ipv+yP2rZ2Ki1R1m6yJx3KSFzR55c91xE6659/vz1uZ6iA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-text/-/extension-text-3.22.1.tgz",
+      "integrity": "sha512-wFCNCATSTTFhvA9wOPkAgzPVyG3RM6+jOlDeRhHUCHsFWFWj0w9ZPwA/nP+Qi5hEW7kGG9V8o62RjBdHNvK2PQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extension-underline": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extension-underline/-/extension-underline-3.22.1.tgz",
+      "integrity": "sha512-p8/ErqQInWJbpncBycIggmtCjdrMwHmA3GNhOugo6F4fYfeVxgy7pVb7ZF+ss62d0mpQvEd81pyrzhkBtb0nBg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/extensions": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/extensions/-/extensions-3.22.1.tgz",
+      "integrity": "sha512-BKpp371Pl1CVcLRLrWH7PC1I+IsXOhet80+pILqCMlwkJnsVtOOVRr5uCF6rbPP4xK5H/ehkQWmxA8rqpv42aA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.22.1",
+        "@tiptap/pm": "^3.22.1"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/pm/-/pm-3.22.1.tgz",
+      "integrity": "sha512-OSqSg2974eLJT5PNKFLM7156lBXCUf/dsKTQXWSzsLTf6HOP4dYP6c0YbAk6lgbNI+BdszsHNClmLVLA8H/L9A==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-changeset": "^2.3.0",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.1",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.24.1",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.5.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.6.4",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.2",
+        "prosemirror-view": "^1.38.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/starter-kit/-/starter-kit-3.22.1.tgz",
+      "integrity": "sha512-1fFmURkgofxgP9GW993bSpxf2rIJzQbWZ9rPw17qbAVuGouIArG+Fd/A1WUD95Vdbx6JIrc1QxbNlLs7bhcoPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/core": "^3.22.1",
+        "@tiptap/extension-blockquote": "^3.22.1",
+        "@tiptap/extension-bold": "^3.22.1",
+        "@tiptap/extension-bullet-list": "^3.22.1",
+        "@tiptap/extension-code": "^3.22.1",
+        "@tiptap/extension-code-block": "^3.22.1",
+        "@tiptap/extension-document": "^3.22.1",
+        "@tiptap/extension-dropcursor": "^3.22.1",
+        "@tiptap/extension-gapcursor": "^3.22.1",
+        "@tiptap/extension-hard-break": "^3.22.1",
+        "@tiptap/extension-heading": "^3.22.1",
+        "@tiptap/extension-horizontal-rule": "^3.22.1",
+        "@tiptap/extension-italic": "^3.22.1",
+        "@tiptap/extension-link": "^3.22.1",
+        "@tiptap/extension-list": "^3.22.1",
+        "@tiptap/extension-list-item": "^3.22.1",
+        "@tiptap/extension-list-keymap": "^3.22.1",
+        "@tiptap/extension-ordered-list": "^3.22.1",
+        "@tiptap/extension-paragraph": "^3.22.1",
+        "@tiptap/extension-strike": "^3.22.1",
+        "@tiptap/extension-text": "^3.22.1",
+        "@tiptap/extension-underline": "^3.22.1",
+        "@tiptap/extensions": "^3.22.1",
+        "@tiptap/pm": "^3.22.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/vue-3": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmmirror.com/@tiptap/vue-3/-/vue-3-3.22.1.tgz",
+      "integrity": "sha512-7xRzcUuEjIUHA3MQ5kW2uBSJp4hS9CATxkEgPxXktKGL9h14upnhmatRA76lkQhKhiIA4j+G1QmFFQE+p8dEOg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "optionalDependencies": {
+        "@tiptap/extension-bubble-menu": "^3.22.1",
+        "@tiptap/extension-floating-menu": "^3.22.1"
+      },
+      "peerDependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@tiptap/core": "^3.22.1",
+        "@tiptap/pm": "^3.22.1",
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmmirror.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tybys/wasm-util/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmmirror.com/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/katex": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmmirror.com/@types/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmmirror.com/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://registry.npmmirror.com/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
+    "node_modules/@uiw/codemirror-theme-dracula": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmmirror.com/@uiw/codemirror-theme-dracula/-/codemirror-theme-dracula-4.25.9.tgz",
+      "integrity": "sha512-0VTnpPCHPc+7LqYsQOX6nvW32XiiT+O6kJjReUbV7Eio3vPHsb+b9P4DKhz4AAvIIYMxmHkMuautHKuWktFXSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.25.9"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-github": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmmirror.com/@uiw/codemirror-theme-github/-/codemirror-theme-github-4.25.9.tgz",
+      "integrity": "sha512-AGpTamNiySKNzq3Jc7QjpwgQRVaHUaBtmOKiUDghYSfEGjsc5uW4NUW70sSU3BnkGv+lCTUnF3175KM24BWZbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.25.9"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-material": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmmirror.com/@uiw/codemirror-theme-material/-/codemirror-theme-material-4.25.9.tgz",
+      "integrity": "sha512-6f2x+gmj2hHagqy6VkpnPbK7SWyP6kKruGgqpyIy09/f9pAUCqkW8mRY5ZEr28tA+YEGQaSY0Z2IBCHl8OKJog==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.25.9"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-monokai": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmmirror.com/@uiw/codemirror-theme-monokai/-/codemirror-theme-monokai-4.25.9.tgz",
+      "integrity": "sha512-qKWRZOGpBCasZJdYU+SsXd92TjncF3QYHpraCPe29bxN22jeIxi2UC4MCuJHwa8hHljHOCSdx1XG/GuUMn7XiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.25.9"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-nord": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmmirror.com/@uiw/codemirror-theme-nord/-/codemirror-theme-nord-4.25.9.tgz",
+      "integrity": "sha512-5c568xmMidwICADxACB1zIhKoEgqbdVrdeOUZ2p5pE6NNKGR4ATzk9OSqhvr1ZhZPNOktxqSLLRzihFaZG0bDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.25.9"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-solarized": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmmirror.com/@uiw/codemirror-theme-solarized/-/codemirror-theme-solarized-4.25.9.tgz",
+      "integrity": "sha512-axUgU9+3JKXW83F+te454qcyTmQAm0+2Fxv0yoegiH6bdl7DjFq/lNVGGZtLwN47AQCj2Qwrheeet2t3GbY9VQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.25.9"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-tokyo-night": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmmirror.com/@uiw/codemirror-theme-tokyo-night/-/codemirror-theme-tokyo-night-4.25.9.tgz",
+      "integrity": "sha512-NkSqguMpzRjsRBbTIfOrGS35tQkE3K8AAetZHlbRZC7fnI52RreZ11X41cOYrc/Dapt8xqUPlhlvclymGFgy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.25.9"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/codemirror-themes": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmmirror.com/@uiw/codemirror-themes/-/codemirror-themes-4.25.9.tgz",
+      "integrity": "sha512-DAHKb/L9ELwjY4nCf/MP/mIllHOn4GQe7RR4x8AMJuNeh9nGRRoo1uPxrxMmUL/bKqe6kDmDbIZ2AlhlqyIJuw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@v-c/async-validator": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@v-c/async-validator/-/async-validator-1.0.1.tgz",
+      "integrity": "sha512-2WXdbTso13119ZLiwUv1JkmdL0K4ll69id4oE3ft3LQX+YAHOoJtfx080u26lLtypgZS32PguoohgB0BVo39rg=="
+    },
+    "node_modules/@v-c/cascader": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@v-c/cascader/-/cascader-1.0.3.tgz",
+      "integrity": "sha512-TaXkWxP3N6LW1yezeN+91k7BFYDSsWj1Y1ujWv51I0lJY4l0iwtjKDDmLLMYoqtUjnW1Onz1g1h6PtiDFALcXQ==",
+      "dependencies": {
+        "@v-c/select": "^1.0.20",
+        "@v-c/tree": "^1.0.5",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/checkbox": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@v-c/checkbox/-/checkbox-1.0.1.tgz",
+      "integrity": "sha512-+QsE/0VfU6oeglwuHWYxRNTn3+eV08iG0uN/upDmqSGznezInzfUClh+t4acd/OxyJVtuob0WKsg/vPlT6WRWw==",
+      "dependencies": {
+        "@v-c/util": "^1.0.13"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/collapse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@v-c/collapse/-/collapse-1.0.0.tgz",
+      "integrity": "sha512-y4NAl3j4mka193ZMDLHdISA8to61qoROG6/kTQ0myM2ZuEsonnEK1QWlqoEw3gveMsa6a4RdyoXLxdGdcJyp0Q==",
+      "dependencies": {
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/color-picker": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/@v-c/color-picker/-/color-picker-1.0.6.tgz",
+      "integrity": "sha512-XiTlEMG5p5jkCdKP7nbeo9EJrpdXnoW4uBOA2us8pVgA6m0GxrwMoCg//X+1XsuOaebG/1Swo65mjRuMBM6rZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^3.0.0",
+        "@v-c/util": "^1.0.14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/dialog": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@v-c/dialog/-/dialog-1.0.3.tgz",
+      "integrity": "sha512-NfeuaHC1PPaRyekoXN6G9AjRL5L9eQiV9tnkRp62GyCfZsHMFgdwlREW6buHifHe7dk4z/ilvGms5tnbw63R4A==",
+      "dependencies": {
+        "@v-c/portal": "^1.0.8",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/drawer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@v-c/drawer/-/drawer-1.0.2.tgz",
+      "integrity": "sha512-AhLr3avLgWUfAIFiBriHr3+A6/3gkHPxiZgjQDEXpEwkNCEkq+1L05d8kPWnZifHc3gOL/kmOvi1QuxmcZoSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/portal": "^1.0.8",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/dropdown": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@v-c/dropdown/-/dropdown-1.0.2.tgz",
+      "integrity": "sha512-D6TACf3jUiRWx4xW5h2+wVT9SMYxUasFlAHESYJr4ZMjLTLLM1Q8iBjkjhGF+vA0eYR5zqRTwlaacN0DNDZBPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/trigger": "^1.0.6",
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/image": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmmirror.com/@v-c/image/-/image-1.0.9.tgz",
+      "integrity": "sha512-0SGcTAopppmo8rjk/E9Kb8kWZ7yIoZeS2XTwnJNs2YOrwvZzY3OJA/5BB/5+siW0uZBe9XKnnO8byS3Frwr2xA==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/portal": "^1.0.8",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/input": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@v-c/input/-/input-1.0.3.tgz",
+      "integrity": "sha512-vQic9OWfREBlNfJeRcejMcOPhp4xnbHVbqeqo/TfCOf73Ym+zjWXRGXiqM/pIqV9v95zuhYen3KzMeJYM4pViA==",
+      "dependencies": {
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/input-number": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@v-c/input-number/-/input-number-1.0.5.tgz",
+      "integrity": "sha512-YQBpV1KnuYf0o2XrbC+OEyP6lkyqv1XhzDVh3QhHO2bs/Jr3uSD8b3cxdEGU+gjoNJUcoZx7XiIzcYhLlvMctw==",
+      "dependencies": {
+        "@v-c/input": "^1.0.2",
+        "@v-c/mini-decimal": "^1.0.1",
+        "@v-c/util": "^1.0.18"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/mentions": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@v-c/mentions/-/mentions-1.0.0.tgz",
+      "integrity": "sha512-trkG1lvfiaIY7UnHn0gx6B01o3rFLEMin3KGp1q4oU6zOCRWde4ejZ+EHSvmXzOz2N+FlRMTE4EMJFi4w0oOlQ==",
+      "dependencies": {
+        "@v-c/input": "^1.0.2",
+        "@v-c/menu": "^1.0.7",
+        "@v-c/textarea": "^1.0.3",
+        "@v-c/trigger": "^1.0.6",
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/menu": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmmirror.com/@v-c/menu/-/menu-1.0.13.tgz",
+      "integrity": "sha512-RbOuk+R0V2bm04daK5LvlJ95N/XS2k+YSnvrGUDCKVkCIAPEe6NZMU6clcj5F4yKtKwWDggq/n5NlJPfJKFSPA==",
+      "dependencies": {
+        "@v-c/overflow": "^1.0.5",
+        "@v-c/trigger": "^1.0.14",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/mini-decimal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@v-c/mini-decimal/-/mini-decimal-1.0.1.tgz",
+      "integrity": "sha512-76wZLdlkI017iDlaZMNOWZyDCv29YVabUJn5urQgIKtW4dnI5AkNXWtmLyhl/mu/OS7ZGisRi5ai/558QhLQxQ==",
+      "license": "MIT"
+    },
+    "node_modules/@v-c/mutate-observer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@v-c/mutate-observer/-/mutate-observer-1.0.1.tgz",
+      "integrity": "sha512-84+9KGORX8LY9u+K0DEGyRwRCJaky0sjRkXxBC7X/jahHJl8NQGQ0Gxve5IVwaxRTfZ9eftlRmHs90JD6Utfqg==",
+      "dependencies": {
+        "@v-c/resize-observer": "^1.0.8",
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/notification": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@v-c/notification/-/notification-1.0.0.tgz",
+      "integrity": "sha512-aU5g+ZiYxp0KVdKuho067wJRF38Mv7MrQS95dwSJLsbDmVFBpjO3Lo3ptakfPkwn+7uwRytHKIf39t9QVGk+sg==",
+      "dependencies": {
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/overflow": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@v-c/overflow/-/overflow-1.0.5.tgz",
+      "integrity": "sha512-Ae5aSZItOQHYzscs5JcmLPBLLEkpCS6c8IcHv9jABH0lZZGlZiUF4WBkAvSSnU8Q9f14BJ6dEb5XLwbwpyTZEQ==",
+      "dependencies": {
+        "@v-c/resize-observer": "^1.0.8",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/pagination": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@v-c/pagination/-/pagination-1.0.0.tgz",
+      "integrity": "sha512-uYIMkvHKMtY+nwHTu5rXxiq6KPf0zGpZbtQTn1nDPng0tOyA1vLQ+R6OfE+1LOwuQqvFTEDnAq4vb90By+eBfw==",
+      "dependencies": {
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/picker": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/@v-c/picker/-/picker-1.0.4.tgz",
+      "integrity": "sha512-B98FSgE+Kh6lNwa5msySFL8NNiF3fFkmFuuL14WEdb4f6q47XYH7YvcQa2jySXnbYPKHdykZMFo37f/0BzFaPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/overflow": "^1.0.3",
+        "@v-c/resize-observer": "^1.0.8",
+        "@v-c/trigger": "^1.0.11",
+        "@v-c/util": "^1.0.14"
+      },
+      "peerDependencies": {
+        "date-fns": ">= 2.x",
+        "dayjs": ">= 1.x",
+        "luxon": ">= 3.x",
+        "moment": ">= 2.x",
+        "vue": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@v-c/portal": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/@v-c/portal/-/portal-1.0.8.tgz",
+      "integrity": "sha512-93elruWfHKrdtRkpFBNpi47YhQjA75tCuG8C/WvcQ9x/dp+H3i+y7h6t0iyyDjZu1w3d2U5+d43vtslmoQXBYg==",
+      "dependencies": {
+        "@v-c/util": "^1.0.18"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/progress": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@v-c/progress/-/progress-1.0.0.tgz",
+      "integrity": "sha512-kWDTU1uXnPDMmoezwyAECxuSH+WKn92OjSdk/GgDbQgZ0qNy9woOiRe5fOsrcy61agHdJxzf0MvsUy1b6bZVlA==",
+      "dependencies": {
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/qrcode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@v-c/qrcode/-/qrcode-1.0.0.tgz",
+      "integrity": "sha512-OSMrYDhP/NQiUcO6J0X2X8BskHPRqX/E/F9npH3oayZgjCo5Aom+63Ja3J0u6SOmKP1JgLSgjrm5karc0671jw==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/rate": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@v-c/rate/-/rate-1.0.1.tgz",
+      "integrity": "sha512-ZWWY01LeKu9S/JncdvSr2gz2Kwwum3bB/AxzzCsuhCyg+9P4BLwX7S2WZDMiJ92uYEpiYladVTCa9XdSCPaCaQ==",
+      "dependencies": {
+        "@v-c/util": "^1.0.14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/resize-observer": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/@v-c/resize-observer/-/resize-observer-1.0.8.tgz",
+      "integrity": "sha512-VH8WBsNfZA5KQ+CXVaQ1PK5B6FIHnuTdqOLrjRWiZTrIYDZi/MyREi9b21YDj55fbFWMRx4yapnO9tiZX1RNxA==",
+      "dependencies": {
+        "@v-c/util": "^1.0.9",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/segmented": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@v-c/segmented/-/segmented-1.0.1.tgz",
+      "integrity": "sha512-qEaHzJxl3gfuZNn754iUcC+YrvPih0luD/wr51VInwOKQgEqaIm5R0fzs3uO57aA4zCuXrDn5LK0z6rFOF+IbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/util": "^1.0.17"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/select": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmmirror.com/@v-c/select/-/select-1.0.20.tgz",
+      "integrity": "sha512-gmG5U7r8YgXIjGQZ5qjHM3felSlYAep7pBjJRzA8ALgHhx0CKRk6RTadVDXzWh7LwOFvlgTn7OLUMTU6RACoaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/overflow": "^1.0.4",
+        "@v-c/trigger": "^1.0.13",
+        "@v-c/util": "^1.0.18",
+        "@v-c/virtual-list": "^1.0.6"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/slick": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@v-c/slick/-/slick-1.0.2.tgz",
+      "integrity": "sha512-8BbPxJgYST+tio9jyeFQgJb/3XSFhfWZN8Am7YVYeqsYsvn3g8wu61UZNSjlkp9ArOEe+ujOgX4izfDHeXh4RA==",
+      "dependencies": {
+        "@v-c/util": "^1.0.17",
+        "es-toolkit": "^1.43.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/slider": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmmirror.com/@v-c/slider/-/slider-1.0.10.tgz",
+      "integrity": "sha512-KMIVytBm8K8RQ+aPPraS28GmBptGHESF/gDRbGjOLD7xyivuQDJeEqVaUFY3EcCWsERjh4VP/L96gUbMTF0uag==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/steps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@v-c/steps/-/steps-1.0.0.tgz",
+      "integrity": "sha512-DPL0OOb8pDLlTPZB93b8+Saxiz6V5zEpGXKaCnsbXUuOhimkc7089AuEKfpMw+8x1SrVe+gapWf5RRHWXUm2pg==",
+      "dependencies": {
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/switch": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@v-c/switch/-/switch-1.0.0.tgz",
+      "integrity": "sha512-VIem244KJkYfqDgofpgHjK00sGL9rJ/9OtmK4Gbs4hnPsrTtzHDBRltYxR4IT7HQleathZfj6NhcZ1bjdWKYUw==",
+      "dependencies": {
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/table": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@v-c/table/-/table-1.0.3.tgz",
+      "integrity": "sha512-VsklYM8M/fSrx+djBJJ0+nUiyzav9w3kZQYtojCnLPg2d2BKORtDKw8WRcpIaZZjDUSJcOh9LOSoY7GA+JKwBQ==",
+      "dependencies": {
+        "@v-c/resize-observer": "^1.0.8",
+        "@v-c/util": "^1.0.18",
+        "@v-c/virtual-list": "^1.0.6"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/tabs": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@v-c/tabs/-/tabs-1.0.2.tgz",
+      "integrity": "sha512-FA/lG5TaYOVFhB3WjJ2x6O8egREm9FWdfEbnY1Tmg3D1avkxYDhISHlW4ot3NvWb8Ds4MxBe0T9xg206o0LHEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/dropdown": "^1.0.2",
+        "@v-c/menu": "^1.0.12",
+        "@v-c/overflow": "^1.0.4",
+        "@v-c/resize-observer": "^1.0.8",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/textarea": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/@v-c/textarea/-/textarea-1.0.4.tgz",
+      "integrity": "sha512-VrQrLjKsiFh3bngXDULK+mUI4RmTT0hqDOUChsGmo5dZGgcmzsDbVLFluYCvpV+InUsnn2jGSQEuqMQy1Vga+g==",
+      "dependencies": {
+        "@v-c/input": "^1.0.3",
+        "@v-c/resize-observer": "^1.0.8",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/tooltip": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@v-c/tooltip/-/tooltip-1.0.3.tgz",
+      "integrity": "sha512-72EkTfhb67RPJvMXIW6HUYiZ+Jdrb7tBQmS3wDtFDNU7uIrS5DQLyXJDCu9qWlrPv7cQ/RHA4JfCINw88vchzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/trigger": "^1.0.11",
+        "@v-c/util": "^1.0.13"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/tour": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@v-c/tour/-/tour-1.0.3.tgz",
+      "integrity": "sha512-y4DVJPP7jvL+MWUMAKQWxLAMXSWJEfZXaKASPn3DKbSQ8drBhsjMXwcep3glAfrCjCKfj/QD3OrUMxqydi4qFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/portal": "^1.0.6",
+        "@v-c/trigger": "^1.0.6",
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/tree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@v-c/tree/-/tree-1.0.5.tgz",
+      "integrity": "sha512-u6tja/kV9mupXWhFT+RtLUVqhCvNtb7LHuKkh4pka8sy5goQ7MjIODciuXn8mizIlEw3rGopq7C7auC9Sg1K8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/util": "^1.0.18",
+        "@v-c/virtual-list": "^1.0.6"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/tree-select": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@v-c/tree-select/-/tree-select-1.0.3.tgz",
+      "integrity": "sha512-N4mK8JXrCU+GFfhLG/zat3TAUt0Ju+P4S3hN6PlmuHPikQ4OWEA91CA8Br83i4zpW9TCH7xP0EfMUvhLtjqbsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/select": "^1.0.19",
+        "@v-c/tree": "^1.0.5",
+        "@v-c/util": "^1.0.18"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/trigger": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmmirror.com/@v-c/trigger/-/trigger-1.0.14.tgz",
+      "integrity": "sha512-3flCLvHvW2fJ8Rg/m4kCk7UGtL9GsrPgeSbdQJ1FU5+sZmfT2bcPwQZM824e7VFLmgaYPLiaQOL3l46uEPFWLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/portal": "^1.0.8",
+        "@v-c/resize-observer": "^1.0.8",
+        "@v-c/util": "^1.0.19"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/upload": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@v-c/upload/-/upload-1.0.0.tgz",
+      "integrity": "sha512-W92PNCD61aM/B5w8oUzHQSDHur1T8484726Ls0IoNMO5nPiF/15eEE3RuuI/t7xXQVP/fA06hNSwzXwGWdDg1w==",
+      "dependencies": {
+        "@v-c/util": "^1.0.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/util": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmmirror.com/@v-c/util/-/util-1.0.19.tgz",
+      "integrity": "sha512-apJGS4BVzhXbrNR6jxXF18jAiOWIn/UNmGjgSvB5r4ba9Wr/ireKCfJvhuuNsZi+scLaM0W3ghB81PbQ5vwoJg==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@v-c/virtual-list": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/@v-c/virtual-list/-/virtual-list-1.0.6.tgz",
+      "integrity": "sha512-eXGbU1zME4pXAfQSBfhp1BkqBP3XYSX03CRJg7tsHgwXoaw8DE7pLuxzFSa+COJ66oOdYn99XS/sHTiz34aQCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@v-c/resize-observer": "^1.0.8",
+        "@v-c/util": "^1.0.14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.5.tgz",
+      "integrity": "sha512-bL3AxKuQySfk1iGcBsQnoRVexTPJq0Z/ixFVM8OhVJAP6ZXXXLtM7NFKWhLl30Kg7uTBqIaPXbh+nuQCuBDedg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmmirror.com/@volar/language-core/-/language-core-2.4.28.tgz",
+      "integrity": "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.28"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmmirror.com/@volar/source-map/-/source-map-2.4.28.tgz",
+      "integrity": "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmmirror.com/@volar/typescript/-/typescript-2.4.28.tgz",
+      "integrity": "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue-macros/common": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@vue-macros/common/-/common-3.1.2.tgz",
+      "integrity": "sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.5.22",
+        "ast-kit": "^2.1.2",
+        "local-pkg": "^1.1.2",
+        "magic-string-ast": "^1.0.2",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/vue-macros"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.31.tgz",
+      "integrity": "sha512-k/ueL14aNIEy5Onf0OVzR8kiqF/WThgLdFhxwa4e/KF/0qe38IwIdofoSWBTvvxQOesaz6riAFAUaYjoF9fLLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.2",
+        "@vue/shared": "3.5.31",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.31.tgz",
+      "integrity": "sha512-BMY/ozS/xxjYqRFL+tKdRpATJYDTTgWSo0+AJvJNg4ig+Hgb0dOsHPXvloHQ5hmlivUqw1Yt2pPIqp4e0v1GUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.31",
+        "@vue/shared": "3.5.31"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.31.tgz",
+      "integrity": "sha512-M8wpPgR9UJ8MiRGjppvx9uWJfLV7A/T+/rL8s/y3QG3u0c2/YZgff3d6SuimKRIhcYnWg5fTfDMlz2E6seUW8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.2",
+        "@vue/compiler-core": "3.5.31",
+        "@vue/compiler-dom": "3.5.31",
+        "@vue/compiler-ssr": "3.5.31",
+        "@vue/shared": "3.5.31",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.8",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.31.tgz",
+      "integrity": "sha512-h0xIMxrt/LHOvJKMri+vdYT92BrK3HFLtDqq9Pr/lVVfE4IyKZKvWf0vJFW10Yr6nX02OR4MkJwI0c1HDa1hog==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.31",
+        "@vue/shared": "3.5.31"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@vue/language-core": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmmirror.com/@vue/language-core/-/language-core-3.2.6.tgz",
+      "integrity": "sha512-xYYYX3/aVup576tP/23sEUpgiEnujrENaoNRbaozC1/MA9I6EGFQRJb4xrt/MmUCAGlxTKL2RmT8JLTPqagCkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^3.0.0",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1",
+        "picomatch": "^4.0.2"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.31.tgz",
+      "integrity": "sha512-DtKXxk9E/KuVvt8VxWu+6Luc9I9ETNcqR1T1oW1gf02nXaZ1kuAx58oVu7uX9XxJR0iJCro6fqBLw9oSBELo5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.31"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.31.tgz",
+      "integrity": "sha512-AZPmIHXEAyhpkmN7aWlqjSfYynmkWlluDNPHMCZKFHH+lLtxP/30UJmoVhXmbDoP1Ng0jG0fyY2zCj1PnSSA6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.31",
+        "@vue/shared": "3.5.31"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.31.tgz",
+      "integrity": "sha512-xQJsNRmGPeDCJq/u813tyonNgWBFjzfVkBwDREdEWndBnGdHLHgkwNBQxLtg4zDrzKTEcnikUy1UUNecb3lJ6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.31",
+        "@vue/runtime-core": "3.5.31",
+        "@vue/shared": "3.5.31",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.31.tgz",
+      "integrity": "sha512-GJuwRvMcdZX/CriUnyIIOGkx3rMV3H6sOu0JhdKbduaeCji6zb60iOGMY7tFoN24NfsUYoFBhshZtGxGpxO4iA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.31",
+        "@vue/shared": "3.5.31"
+      },
+      "peerDependencies": {
+        "vue": "3.5.31"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.31.tgz",
+      "integrity": "sha512-nBxuiuS9Lj5bPkPbWogPUnjxxWpkRniX7e5UBQDWl6Fsf4roq9wwV+cR7ezQ4zXswNvPIlsdj1slcLB7XCsRAw==",
+      "license": "MIT"
+    },
+    "node_modules/@vueuse/core": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-14.2.1.tgz",
+      "integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.2.1",
+        "@vueuse/shared": "14.2.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-14.2.1.tgz",
+      "integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-14.2.1.tgz",
+      "integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/alien-signals": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/alien-signals/-/alien-signals-3.1.2.tgz",
+      "integrity": "sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ansis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/ansis/-/ansis-4.2.0.tgz",
+      "integrity": "sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/antdv-next": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmmirror.com/antdv-next/-/antdv-next-1.1.8.tgz",
+      "integrity": "sha512-Z8JwWiRJFZX8Acc1a3cDxhwuWylSwGq2lAGo8L0XBE8dXdJajYUw5FJSkDmLMpWHdsWnO/gG+PEZpgTSntpB5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^8.0.1",
+        "@ant-design/fast-color": "^3.0.1",
+        "@antdv-next/cssinjs": "^1.0.6",
+        "@antdv-next/icons": "^1.0.6",
+        "@v-c/async-validator": "^1.0.1",
+        "@v-c/cascader": "^1.0.2",
+        "@v-c/checkbox": "^1.0.1",
+        "@v-c/collapse": "^1.0.0",
+        "@v-c/color-picker": "^1.0.6",
+        "@v-c/dialog": "^1.0.3",
+        "@v-c/drawer": "^1.0.2",
+        "@v-c/dropdown": "^1.0.2",
+        "@v-c/image": "^1.0.9",
+        "@v-c/input": "^1.0.3",
+        "@v-c/input-number": "^1.0.5",
+        "@v-c/mentions": "^1.0.0",
+        "@v-c/menu": "^1.0.12",
+        "@v-c/mutate-observer": "^1.0.1",
+        "@v-c/notification": "^1.0.0",
+        "@v-c/pagination": "^1.0.0",
+        "@v-c/picker": "^1.0.4",
+        "@v-c/progress": "^1.0.0",
+        "@v-c/qrcode": "^1.0.0",
+        "@v-c/rate": "^1.0.1",
+        "@v-c/resize-observer": "^1.0.8",
+        "@v-c/segmented": "^1.0.1",
+        "@v-c/select": "^1.0.20",
+        "@v-c/slick": "^1.0.2",
+        "@v-c/slider": "^1.0.10",
+        "@v-c/steps": "^1.0.0",
+        "@v-c/switch": "^1.0.0",
+        "@v-c/table": "^1.0.3",
+        "@v-c/tabs": "^1.0.2",
+        "@v-c/textarea": "^1.0.4",
+        "@v-c/tooltip": "^1.0.3",
+        "@v-c/tour": "^1.0.3",
+        "@v-c/tree": "^1.0.5",
+        "@v-c/tree-select": "^1.0.3",
+        "@v-c/trigger": "^1.0.14",
+        "@v-c/upload": "^1.0.0",
+        "@v-c/util": "^1.0.19",
+        "@v-c/virtual-list": "^1.0.6",
+        "@vueuse/core": "^14.2.1",
+        "dayjs": "^1.11.20",
+        "es-toolkit": "1.45.1",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "throttle-debounce": "^5.0.2"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ast-kit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/ast-kit/-/ast-kit-2.2.0.tgz",
+      "integrity": "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "pathe": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmmirror.com/ast-walker-scope/-/ast-walker-scope-0.8.3.tgz",
+      "integrity": "sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "ast-kit": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.14.0.tgz",
+      "integrity": "sha512-3Y8yrqLSwjuzpXuZ0oIYZ/XGgLwUIBU3uLvbcpb0pidD9ctpShJd43KSlEEkVQg6DS0G9NKyzOvBfUtDKEyHvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/co-body": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/co-body/-/co-body-6.2.0.tgz",
+      "integrity": "sha512-Kbpv2Yd1NdL1V/V4cwLVxraHDV6K8ayohr2rmH0J87Er8+zJjcTa6dAn9QMPC9CRgU8+aNajKbSf1TzDB1yKPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@hapi/bourne": "^3.0.0",
+        "inflation": "^2.0.0",
+        "qs": "^6.5.2",
+        "raw-body": "^2.3.3",
+        "type-is": "^1.6.16"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/codemirror": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.2.tgz",
+      "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
+      "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
+      "license": "MIT"
+    },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "license": "MIT"
+    },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmmirror.com/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.20.tgz",
+      "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/dezalgo": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/dezalgo/-/dezalgo-1.0.4.tgz",
+      "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "asap": "^2.0.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/dompurify": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-3.3.3.tgz",
+      "integrity": "sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.1",
+      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
+      "integrity": "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.45.1",
+      "resolved": "https://registry.npmmirror.com/es-toolkit/-/es-toolkit-1.45.1.tgz",
+      "integrity": "sha512-/jhoOj/Fx+A+IIyDNOvO3TItGmlMKhtX8ISAHKE90c4b/k1tqaqEZ+uUqfpU8DMnW5cgNJv606zS55jGvza0Xw==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/exsolve": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/exsolve/-/exsolve-1.0.8.tgz",
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
+      "license": "MIT"
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/formidable": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmmirror.com/formidable/-/formidable-3.5.4.tgz",
+      "integrity": "sha512-YikH+7CUTOtP44ZTnUhR7Ic2UASBPOqmaRkRKxRbywPTe5VxF7RRCck4af9wutiZ/QKM5nME9Bie2fFaPz5Gug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@paralleldrive/cuid2": "^2.2.2",
+        "dezalgo": "^1.0.4",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/tunnckoCore/commissions"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmmirror.com/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/http-status": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/http-status/-/http-status-2.1.0.tgz",
+      "integrity": "sha512-O5kPr7AW7wYd/BBiOezTwnVAnmSNFY+J7hlZD2X5IOxVBetjcHAiTXhzj0gMrnojQlwy+UT1/Y3H3vJ3UlmvLA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-5.1.5.tgz",
+      "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/inflation": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/inflation/-/inflation-2.1.0.tgz",
+      "integrity": "sha512-t54PPJHG1Pp7VQvxyVCJ9mBbjG3Hqryges9bXoOO6GExCPa+//i/d5GSuFtpx3ALLd7lgIAur6zrIlBQyJuMlQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmmirror.com/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/katex": {
+      "version": "0.16.44",
+      "resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.44.tgz",
+      "integrity": "sha512-EkxoDTk8ufHqHlf9QxGwcxeLkWRR3iOuYfRpfORgYfqc8s13bgb+YtRY59NK5ZpRaCwq1kqA6a5lpX8C/eLphQ==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/linkifyjs": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/linkifyjs/-/linkifyjs-4.3.2.tgz",
+      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
+      "license": "MIT"
+    },
+    "node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT"
+    },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/magic-string-ast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/magic-string-ast/-/magic-string-ast-1.0.3.tgz",
+      "integrity": "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==",
+      "license": "MIT",
+      "dependencies": {
+        "magic-string": "^0.30.19"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmmirror.com/markdown-it/-/markdown-it-14.1.1.tgz",
+      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mdast-util-definitions": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/mdast-util-definitions/-/mdast-util-definitions-6.0.0.tgz",
+      "integrity": "sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-math": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/mdast-util-math/-/mdast-util-math-3.0.0.tgz",
+      "integrity": "sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.1.0",
+        "unist-util-remove-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-math": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz",
+      "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/katex": "^0.16.0",
+        "devlop": "^1.0.0",
+        "katex": "^0.16.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-5.1.7.tgz",
+      "integrity": "sha512-ua3NDgISf6jdwezAheMOk4mbE1LXjm1DfMUDMuJf4AqxLFK3ccGpgWizwa5YV7Yz9EpXwEaWoRXSb/BnV0t5dQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
+      "license": "MIT"
+    },
+    "node_modules/oxfmt": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmmirror.com/oxfmt/-/oxfmt-0.43.0.tgz",
+      "integrity": "sha512-KTYNG5ISfHSdmeZ25Xzb3qgz9EmQvkaGAxgBY/p38+ZiAet3uZeu7FnMwcSQJg152Qwl0wnYAxDc+Z/H6cvrwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinypool": "2.1.0"
+      },
+      "bin": {
+        "oxfmt": "bin/oxfmt"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxfmt/binding-android-arm-eabi": "0.43.0",
+        "@oxfmt/binding-android-arm64": "0.43.0",
+        "@oxfmt/binding-darwin-arm64": "0.43.0",
+        "@oxfmt/binding-darwin-x64": "0.43.0",
+        "@oxfmt/binding-freebsd-x64": "0.43.0",
+        "@oxfmt/binding-linux-arm-gnueabihf": "0.43.0",
+        "@oxfmt/binding-linux-arm-musleabihf": "0.43.0",
+        "@oxfmt/binding-linux-arm64-gnu": "0.43.0",
+        "@oxfmt/binding-linux-arm64-musl": "0.43.0",
+        "@oxfmt/binding-linux-ppc64-gnu": "0.43.0",
+        "@oxfmt/binding-linux-riscv64-gnu": "0.43.0",
+        "@oxfmt/binding-linux-riscv64-musl": "0.43.0",
+        "@oxfmt/binding-linux-s390x-gnu": "0.43.0",
+        "@oxfmt/binding-linux-x64-gnu": "0.43.0",
+        "@oxfmt/binding-linux-x64-musl": "0.43.0",
+        "@oxfmt/binding-openharmony-arm64": "0.43.0",
+        "@oxfmt/binding-win32-arm64-msvc": "0.43.0",
+        "@oxfmt/binding-win32-ia32-msvc": "0.43.0",
+        "@oxfmt/binding-win32-x64-msvc": "0.43.0"
+      }
+    },
+    "node_modules/oxlint": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmmirror.com/oxlint/-/oxlint-1.58.0.tgz",
+      "integrity": "sha512-t4s9leczDMqlvOSjnbCQe7gtoLkWgBGZ7sBdCJ9EOj5IXFSG/X7OAzK4yuH4iW+4cAYe8kLFbC8tuYMwWZm+Cg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "oxlint": "bin/oxlint"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxlint/binding-android-arm-eabi": "1.58.0",
+        "@oxlint/binding-android-arm64": "1.58.0",
+        "@oxlint/binding-darwin-arm64": "1.58.0",
+        "@oxlint/binding-darwin-x64": "1.58.0",
+        "@oxlint/binding-freebsd-x64": "1.58.0",
+        "@oxlint/binding-linux-arm-gnueabihf": "1.58.0",
+        "@oxlint/binding-linux-arm-musleabihf": "1.58.0",
+        "@oxlint/binding-linux-arm64-gnu": "1.58.0",
+        "@oxlint/binding-linux-arm64-musl": "1.58.0",
+        "@oxlint/binding-linux-ppc64-gnu": "1.58.0",
+        "@oxlint/binding-linux-riscv64-gnu": "1.58.0",
+        "@oxlint/binding-linux-riscv64-musl": "1.58.0",
+        "@oxlint/binding-linux-s390x-gnu": "1.58.0",
+        "@oxlint/binding-linux-x64-gnu": "1.58.0",
+        "@oxlint/binding-linux-x64-musl": "1.58.0",
+        "@oxlint/binding-openharmony-arm64": "1.58.0",
+        "@oxlint/binding-win32-arm64-msvc": "1.58.0",
+        "@oxlint/binding-win32-ia32-msvc": "1.58.0",
+        "@oxlint/binding-win32-x64-msvc": "1.58.0"
+      },
+      "peerDependencies": {
+        "oxlint-tsgolint": ">=0.18.0"
+      },
+      "peerDependenciesMeta": {
+        "oxlint-tsgolint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinyin-pro": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmmirror.com/pinyin-pro/-/pinyin-pro-3.28.0.tgz",
+      "integrity": "sha512-mMRty6RisoyYNphJrTo3pnvp3w8OMZBrXm9YSWkxhAfxKj1KZk2y8T2PDIZlDDRsvZ0No+Hz6FI4sZpA6Ey25g==",
+      "license": "MIT"
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.8",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmmirror.com/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/prosemirror-changeset/-/prosemirror-changeset-2.4.0.tgz",
+      "integrity": "sha512-LvqH2v7Q2SF6yxatuPP2e8vSUKS/L+xAU7dPDC4RMyHMhZoGDfBC74mYuyYF4gLqOEG758wajtyhNnsTkuhvng==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
+      "integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.10.2"
+      }
+    },
+    "node_modules/prosemirror-drop-indicator": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmmirror.com/prosemirror-drop-indicator/-/prosemirror-drop-indicator-0.1.3.tgz",
+      "integrity": "sha512-fJV6G2tHIVXZLUuc60fS9ly1/GuGOlAZUm67S1El+kGFUYh27Hyv6hcGx3rrJ+Q/JZL5jnyAibIZYYWpPqE45g==",
+      "license": "MIT",
+      "dependencies": {
+        "@ocavue/utils": "^1.0.0",
+        "prosemirror-model": "^1.25.4",
+        "prosemirror-state": "^1.4.4",
+        "prosemirror-view": "^1.41.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ocavue"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz",
+      "integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.1.tgz",
+      "integrity": "sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/prosemirror-history/-/prosemirror-history-1.5.0.tgz",
+      "integrity": "sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-inputrules/-/prosemirror-inputrules-1.5.1.tgz",
+      "integrity": "sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+      "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-markdown": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmmirror.com/prosemirror-markdown/-/prosemirror-markdown-1.13.4.tgz",
+      "integrity": "sha512-D98dm4cQ3Hs6EmjK500TdAOew4Z03EV71ajEFiWra3Upr7diytJsjF4mPV2dW+eK5uNectiRj0xFxYI9NLXDbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-menu": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/prosemirror-menu/-/prosemirror-menu-1.3.0.tgz",
+      "integrity": "sha512-TImyPXCHPcDsSka2/lwJ6WjTASr4re/qWq1yoTTuLOqfXucwF6VcRa2LWCkM/EyTD1UO3CUwiH8qURJoWJRxwg==",
+      "license": "MIT",
+      "dependencies": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.25.4",
+      "resolved": "https://registry.npmmirror.com/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
+      "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
+      "license": "MIT",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-safari-ime-span": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/prosemirror-safari-ime-span/-/prosemirror-safari-ime-span-1.0.2.tgz",
+      "integrity": "sha512-QJqD8s1zE/CuK56kDsUhndh5hiHh/gFnAuPOA9ytva2s85/ZEt2tNWeALTJN48DtWghSKOmiBsvVn2OlnJ5H2w==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-view": "^1.33.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ocavue"
+      }
+    },
+    "node_modules/prosemirror-schema-basic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.4.tgz",
+      "integrity": "sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+      "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmmirror.com/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
+      "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz",
+      "integrity": "sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.2.3",
+        "prosemirror-model": "^1.25.4",
+        "prosemirror-state": "^1.4.4",
+        "prosemirror-transform": "^1.10.5",
+        "prosemirror-view": "^1.41.4"
+      }
+    },
+    "node_modules/prosemirror-trailing-node": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remirror/core-constants": "3.0.0",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "peerDependencies": {
+        "prosemirror-model": "^1.22.1",
+        "prosemirror-state": "^1.4.2",
+        "prosemirror-view": "^1.33.8"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmmirror.com/prosemirror-transform/-/prosemirror-transform-1.12.0.tgz",
+      "integrity": "sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.41.8",
+      "resolved": "https://registry.npmmirror.com/prosemirror-view/-/prosemirror-view-1.41.8.tgz",
+      "integrity": "sha512-TnKDdohEatgyZNGCDWIdccOHXhYloJwbwU+phw/a23KBvJIR9lWQWW7WHHK3vBdOLDNuF7TaX98GObUZOWkOnA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.20.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-virtual-cursor": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmmirror.com/prosemirror-virtual-cursor/-/prosemirror-virtual-cursor-0.4.2.tgz",
+      "integrity": "sha512-pUMKnIuOhhnMcgIJUjhIQTVJruBEGxfMBVQSrK0g2qhGPDm1i12KdsVaFw15dYk+29tZcxjMeR7P5VDKwmbwJg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ocavue"
+      },
+      "peerDependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "prosemirror-model": {
+          "optional": true
+        },
+        "prosemirror-state": {
+          "optional": true
+        },
+        "prosemirror-view": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmmirror.com/raw-body/-/raw-body-2.5.3.tgz",
+      "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/refractor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/refractor/-/refractor-5.0.0.tgz",
+      "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/remark": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmmirror.com/remark/-/remark-15.0.1.tgz",
+      "integrity": "sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-inline-links": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/remark-inline-links/-/remark-inline-links-7.0.0.tgz",
+      "integrity": "sha512-4uj1pPM+F495ySZhTIB6ay2oSkTsKgmYaKk/q5HIdhX2fuyLEegpjWa0VdJRJ01sgOqAFo7MBKdDUejIYBMVMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-definitions": "^6.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-math": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/remark-math/-/remark-math-6.0.0.tgz",
+      "integrity": "sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-math": "^3.0.0",
+        "micromark-extension-math": "^3.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmmirror.com/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmmirror.com/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/rolldown/-/rolldown-1.0.0-rc.12.tgz",
+      "integrity": "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.122.0",
+        "@rolldown/pluginutils": "1.0.0-rc.12"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.12",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.12",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.12",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.12",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12"
+      }
+    },
+    "node_modules/rolldown/node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.12.tgz",
+      "integrity": "sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.98.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.98.0.tgz",
+      "integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT"
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "license": "MIT"
+    },
+    "node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-4.2.2.tgz",
+      "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.3.2.tgz",
+      "integrity": "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinypool": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tinypool/-/tinypool-2.1.0.tgz",
+      "integrity": "sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.0.0 || >=22.0.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmmirror.com/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-6.0.2.tgz",
+      "integrity": "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
+    "node_modules/ufo": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.3.tgz",
+      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==",
+      "license": "MIT"
+    },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmmirror.com/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-3.0.0.tgz",
+      "integrity": "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmmirror.com/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
+      "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-8.0.3.tgz",
+      "integrity": "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.8",
+        "rolldown": "1.0.0-rc.12",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.0",
+        "esbuild": "^0.27.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-mock-dev-server": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-mock-dev-server/-/vite-plugin-mock-dev-server-2.1.1.tgz",
+      "integrity": "sha512-N49IFCZvy6PJY8VjJjYD8tuA7BJc5OgTLZmR83UrjFgRcQKPo0t4jPzVijalFtwA0P9v0apLXkVeNcZKytX6EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pengzhanbo/utils": "^3.3.1",
+        "ansis": "^4.2.0",
+        "chokidar": "^5.0.0",
+        "co-body": "^6.2.0",
+        "cors": "^2.8.6",
+        "debug": "^4.4.3",
+        "formidable": "3.5.4",
+        "http-status": "^2.1.0",
+        "is-core-module": "^2.16.1",
+        "json5": "^2.2.3",
+        "local-pkg": "^1.1.2",
+        "mime-types": "^3.0.2",
+        "path-to-regexp": "^8.3.0",
+        "picomatch": "^4.0.4",
+        "tinyglobby": "^0.2.15",
+        "ws": "^8.20.0"
+      },
+      "engines": {
+        "node": "^20 || >=22"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.21.0",
+        "rolldown": ">=1.0.0-beta.1",
+        "vite": ">=5.0.0",
+        "zstd-codec": ">=0.1.5"
+      },
+      "peerDependenciesMeta": {
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "zstd-codec": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-mock-dev-server/node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/vite-plugin-mock-dev-server/node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/vite-plugin-mock-dev-server/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/vite-plugin-mock-dev-server/node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.31.tgz",
+      "integrity": "sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.31",
+        "@vue/compiler-sfc": "3.5.31",
+        "@vue/runtime-dom": "3.5.31",
+        "@vue/server-renderer": "3.5.31",
+        "@vue/shared": "3.5.31"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-codemirror": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmmirror.com/vue-codemirror/-/vue-codemirror-6.1.1.tgz",
+      "integrity": "sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/commands": "6.x",
+        "@codemirror/language": "6.x",
+        "@codemirror/state": "6.x",
+        "@codemirror/view": "6.x"
+      },
+      "peerDependencies": {
+        "codemirror": "6.x",
+        "vue": "3.x"
+      }
+    },
+    "node_modules/vue-echarts": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-8.0.1.tgz",
+      "integrity": "sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "echarts": "^6.0.0",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/vue-i18n": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-11.3.0.tgz",
+      "integrity": "sha512-1J+xDfDJTLhDxElkd3+XUhT7FYSZd2b8pa7IRKGxhWH/8yt6PTvi3xmWhGwhYT5EaXdatui11pF2R6tL73/zPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.3.0",
+        "@intlify/devtools-types": "11.3.0",
+        "@intlify/shared": "11.3.0",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-i18n/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/vue-router": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-5.0.4.tgz",
+      "integrity": "sha512-lCqDLCI2+fKVRl2OzXuzdSWmxXFLQRxQbmHugnRpTMyYiT+hNaycV0faqG5FBHDXoYrZ6MQcX87BvbY8mQ20Bg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/generator": "^7.28.6",
+        "@vue-macros/common": "^3.1.1",
+        "@vue/devtools-api": "^8.0.6",
+        "ast-walker-scope": "^0.8.3",
+        "chokidar": "^5.0.0",
+        "json5": "^2.2.3",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.0",
+        "muggle-string": "^0.4.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^3.0.0",
+        "unplugin-utils": "^0.3.1",
+        "yaml": "^2.8.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@pinia/colada": ">=0.21.2",
+        "@vue/compiler-sfc": "^3.5.17",
+        "pinia": "^3.0.4",
+        "vue": "^3.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@pinia/colada": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-api": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-8.1.1.tgz",
+      "integrity": "sha512-bsDMJ07b3GN1puVwJb/fyFnj/U2imyswK5UQVLZwVl7O05jDrt6BHxeG5XffmOOdasOj/bOmIjxJvGPxU7pcqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^8.1.1"
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-kit": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-8.1.1.tgz",
+      "integrity": "sha512-gVBaBv++i+adg4JpH71k9ppl4soyR7Y2McEqO5YNgv0BI1kMZ7BDX5gnwkZ5COYgiCyhejZG+yGNrBAjj6Coqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^8.1.1",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "perfect-debounce": "^2.0.0"
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-shared": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-8.1.1.tgz",
+      "integrity": "sha512-+h4ttmJYl/txpxHKaoZcaKpC+pvckgLzIDiSQlaQ7kKthKh8KuwoLW2D8hPJEnqKzXOvu15UHEoGyngAXCz0EQ==",
+      "license": "MIT"
+    },
+    "node_modules/vue-router/node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/vue-router/node_modules/perfect-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
+      "license": "MIT"
+    },
+    "node_modules/vue-router/node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/vue-tsc": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-3.2.6.tgz",
+      "integrity": "sha512-gYW/kWI0XrwGzd0PKc7tVB/qpdeAkIZLNZb10/InizkQjHjnT8weZ/vBarZoj4kHKbUTZT/bAVgoOr8x4NsQ/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "2.4.28",
+        "@vue/language-core": "3.2.6"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/ws": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.20.0.tgz",
+      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.8.3.tgz",
+      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    }
+  }
+}
diff --git a/antdv-next-admin/package.json b/antdv-next-admin/package.json
new file mode 100644
index 0000000..13458b1
--- /dev/null
+++ b/antdv-next-admin/package.json
@@ -0,0 +1,101 @@
+{
+  "name": "antdv-next-admin",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A modern Vue 3 admin scaffold based on antdv-next",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:check": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "oxlint src mock",
+    "lint:fix": "oxlint --fix src mock",
+    "format": "oxfmt --write src mock",
+    "format:check": "oxfmt --check src mock"
+  },
+  "dependencies": {
+    "@ant-design/colors": "^8.0.1",
+    "@antdv-next/icons": "^1.0.6",
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-php": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/lint": "^6.9.5",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.41.0",
+    "@iconify-json/ion": "^1.2.6",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/ri": "^1.2.10",
+    "@iconify/vue": "^5.0.0",
+    "@milkdown/core": "^7.20.0",
+    "@milkdown/ctx": "^7.20.0",
+    "@milkdown/plugin-block": "^7.20.0",
+    "@milkdown/plugin-clipboard": "^7.20.0",
+    "@milkdown/plugin-history": "^7.20.0",
+    "@milkdown/plugin-listener": "^7.20.0",
+    "@milkdown/plugin-prism": "^7.20.0",
+    "@milkdown/plugin-slash": "^7.20.0",
+    "@milkdown/plugin-tooltip": "^7.20.0",
+    "@milkdown/plugin-upload": "^7.20.0",
+    "@milkdown/preset-commonmark": "^7.20.0",
+    "@milkdown/preset-gfm": "^7.20.0",
+    "@milkdown/theme-nord": "^7.20.0",
+    "@milkdown/transformer": "^7.20.0",
+    "@milkdown/vue": "^7.20.0",
+    "@tiptap/extension-image": "^3.22.1",
+    "@tiptap/extension-link": "^3.22.1",
+    "@tiptap/extension-placeholder": "^3.22.1",
+    "@tiptap/starter-kit": "^3.22.1",
+    "@tiptap/vue-3": "^3.22.1",
+    "@uiw/codemirror-theme-dracula": "^4.25.9",
+    "@uiw/codemirror-theme-github": "^4.25.9",
+    "@uiw/codemirror-theme-material": "^4.25.9",
+    "@uiw/codemirror-theme-monokai": "^4.25.9",
+    "@uiw/codemirror-theme-nord": "^4.25.9",
+    "@uiw/codemirror-theme-solarized": "^4.25.9",
+    "@uiw/codemirror-theme-tokyo-night": "^4.25.9",
+    "@uiw/codemirror-themes": "^4.25.9",
+    "antdv-next": "^1.1.8",
+    "axios": "^1.14.0",
+    "dayjs": "^1.11.20",
+    "echarts": "^6.0.0",
+    "lodash-es": "^4.18.1",
+    "pinia": "^3.0.4",
+    "pinyin-pro": "^3.28.0",
+    "vue": "^3.5.31",
+    "vue-codemirror": "^6.1.1",
+    "vue-echarts": "^8.0.1",
+    "vue-i18n": "^11.3.0",
+    "vue-router": "^5.0.4",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^10.4.0",
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/lodash-es": "^4.17.12",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "oxfmt": "^0.43.0",
+    "oxlint": "^1.58.0",
+    "sass": "^1.69.7",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3",
+    "vite-plugin-mock-dev-server": "^2.1.1",
+    "vue-tsc": "^3.2.6"
+  }
+}
\ No newline at end of file
diff --git a/antdv-next-admin/pnpm-lock.yaml b/antdv-next-admin/pnpm-lock.yaml
new file mode 100644
index 0000000..7480958
--- /dev/null
+++ b/antdv-next-admin/pnpm-lock.yaml
@@ -0,0 +1,6014 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@ant-design/colors':
+        specifier: ^8.0.1
+        version: 8.0.1
+      '@antdv-next/icons':
+        specifier: ^1.0.6
+        version: 1.0.6(vue@3.5.33(typescript@6.0.3))
+      '@codemirror/autocomplete':
+        specifier: ^6.20.1
+        version: 6.20.1
+      '@codemirror/commands':
+        specifier: ^6.10.3
+        version: 6.10.3
+      '@codemirror/lang-css':
+        specifier: ^6.3.1
+        version: 6.3.1
+      '@codemirror/lang-go':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/lang-html':
+        specifier: ^6.4.11
+        version: 6.4.11
+      '@codemirror/lang-java':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.4
+        version: 6.2.5
+      '@codemirror/lang-json':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-markdown':
+        specifier: ^6.5.0
+        version: 6.5.0
+      '@codemirror/lang-php':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-python':
+        specifier: ^6.2.1
+        version: 6.2.1
+      '@codemirror/lang-rust':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-sql':
+        specifier: ^6.10.0
+        version: 6.10.0
+      '@codemirror/lang-xml':
+        specifier: ^6.1.0
+        version: 6.1.0
+      '@codemirror/lang-yaml':
+        specifier: ^6.1.3
+        version: 6.1.3
+      '@codemirror/language':
+        specifier: ^6.12.3
+        version: 6.12.3
+      '@codemirror/lint':
+        specifier: ^6.9.5
+        version: 6.9.5
+      '@codemirror/search':
+        specifier: ^6.6.0
+        version: 6.6.0
+      '@codemirror/state':
+        specifier: ^6.6.0
+        version: 6.6.0
+      '@codemirror/theme-one-dark':
+        specifier: ^6.1.3
+        version: 6.1.3
+      '@codemirror/view':
+        specifier: ^6.41.0
+        version: 6.41.1
+      '@iconify-json/ion':
+        specifier: ^1.2.6
+        version: 1.2.7
+      '@iconify-json/mdi':
+        specifier: ^1.2.3
+        version: 1.2.3
+      '@iconify-json/ri':
+        specifier: ^1.2.10
+        version: 1.2.10
+      '@iconify/vue':
+        specifier: ^5.0.0
+        version: 5.0.0(vue@3.5.33(typescript@6.0.3))
+      '@milkdown/core':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/ctx':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/plugin-block':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/plugin-clipboard':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/plugin-history':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/plugin-listener':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/plugin-prism':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/plugin-slash':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/plugin-tooltip':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/plugin-upload':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/preset-commonmark':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/preset-gfm':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/theme-nord':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/transformer':
+        specifier: ^7.20.0
+        version: 7.20.0
+      '@milkdown/vue':
+        specifier: ^7.20.0
+        version: 7.20.0(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.6)(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3))
+      '@tiptap/extension-image':
+        specifier: ^3.22.1
+        version: 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-link':
+        specifier: ^3.22.1
+        version: 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+      '@tiptap/extension-placeholder':
+        specifier: ^3.22.1
+        version: 3.22.5(@tiptap/extensions@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))
+      '@tiptap/starter-kit':
+        specifier: ^3.22.1
+        version: 3.22.5
+      '@tiptap/vue-3':
+        specifier: ^3.22.1
+        version: 3.22.5(@floating-ui/dom@1.7.6)(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)(vue@3.5.33(typescript@6.0.3))
+      '@uiw/codemirror-theme-dracula':
+        specifier: ^4.25.9
+        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+      '@uiw/codemirror-theme-github':
+        specifier: ^4.25.9
+        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+      '@uiw/codemirror-theme-material':
+        specifier: ^4.25.9
+        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+      '@uiw/codemirror-theme-monokai':
+        specifier: ^4.25.9
+        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+      '@uiw/codemirror-theme-nord':
+        specifier: ^4.25.9
+        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+      '@uiw/codemirror-theme-solarized':
+        specifier: ^4.25.9
+        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+      '@uiw/codemirror-theme-tokyo-night':
+        specifier: ^4.25.9
+        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+      '@uiw/codemirror-themes':
+        specifier: ^4.25.9
+        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+      antdv-next:
+        specifier: ^1.1.8
+        version: 1.2.2(vue@3.5.33(typescript@6.0.3))
+      axios:
+        specifier: ^1.14.0
+        version: 1.15.2
+      dayjs:
+        specifier: ^1.11.20
+        version: 1.11.20
+      echarts:
+        specifier: ^6.0.0
+        version: 6.0.0
+      lodash-es:
+        specifier: ^4.18.1
+        version: 4.18.1
+      pinia:
+        specifier: ^3.0.4
+        version: 3.0.4(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3))
+      pinyin-pro:
+        specifier: ^3.28.0
+        version: 3.28.0
+      vue:
+        specifier: ^3.5.31
+        version: 3.5.33(typescript@6.0.3)
+      vue-codemirror:
+        specifier: ^6.1.1
+        version: 6.1.1(codemirror@6.0.2)(vue@3.5.33(typescript@6.0.3))
+      vue-echarts:
+        specifier: ^8.0.1
+        version: 8.0.1(echarts@6.0.0)(vue@3.5.33(typescript@6.0.3))
+      vue-i18n:
+        specifier: ^11.3.0
+        version: 11.3.0(vue@3.5.33(typescript@6.0.3))
+      vue-router:
+        specifier: ^5.0.4
+        version: 5.0.6(@vue/compiler-sfc@3.5.33)(pinia@3.0.4(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3))
+      vuedraggable:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.5.33(typescript@6.0.3))
+    devDependencies:
+      '@faker-js/faker':
+        specifier: ^10.4.0
+        version: 10.4.0
+      '@tailwindcss/vite':
+        specifier: ^4.2.2
+        version: 4.2.4(vite@8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2))
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.4
+        version: 6.0.5(vite@8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2))(vue@3.5.33(typescript@6.0.3))
+      oxfmt:
+        specifier: ^0.43.0
+        version: 0.43.0
+      oxlint:
+        specifier: ^1.58.0
+        version: 1.62.0
+      sass:
+        specifier: ^1.69.7
+        version: 1.98.0
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.4
+      typescript:
+        specifier: ^6.0.2
+        version: 6.0.3
+      vite:
+        specifier: ^8.0.3
+        version: 8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2)
+      vite-plugin-mock-dev-server:
+        specifier: ^2.1.1
+        version: 2.1.1(rolldown@1.0.0-rc.17)(vite@8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2))
+      vue-tsc:
+        specifier: ^3.2.6
+        version: 3.2.7(typescript@6.0.3)
+
+packages:
+
+  '@ant-design/colors@7.2.1':
+    resolution: {integrity: sha512-lCHDcEzieu4GA3n8ELeZ5VQ8pKQAWcGGLRTQ50aQM2iqPpq2evTxER84jfdPvsPAtEcZ7m44NI45edFMo8oOYQ==}
+
+  '@ant-design/colors@8.0.1':
+    resolution: {integrity: sha512-foPVl0+SWIslGUtD/xBr1p9U4AKzPhNYEseXYRRo5QSzGACYZrQbe11AYJbYfAWnWSpGBx6JjBmSeugUsD9vqQ==}
+
+  '@ant-design/fast-color@2.0.6':
+    resolution: {integrity: sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==}
+    engines: {node: '>=8.x'}
+
+  '@ant-design/fast-color@3.0.1':
+    resolution: {integrity: sha512-esKJegpW4nckh0o6kV3Tkb7NPIZYbPnnFxmQDUmL08ukXZAvV85TZBr70eGuke/CIArLaP6aw8lt9KILjnWuOw==}
+    engines: {node: '>=8.x'}
+
+  '@ant-design/icons-svg@4.4.2':
+    resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
+
+  '@antdv-next/cssinjs@1.0.6':
+    resolution: {integrity: sha512-8NL+AzjFZVHfG9A2l+r4rNWdRfbS5FFFozGU9jVl7WNgd7y+wEYSzl+qvRjJuqd3IryacrDfsTxIgcSQkVlr5Q==}
+    peerDependencies:
+      vue: '>=3.2.0'
+
+  '@antdv-next/icons@1.0.6':
+    resolution: {integrity: sha512-SCPe/otLTmOEVoAdrZ/fn5pr1wlA1Tbzhk908gWPDnjSLEPIcv4n0Feh416RKj1oe8PKbPIC95BH+HaBXybojg==}
+    peerDependencies:
+      vue: '>=3.2.0'
+
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/parser@7.29.2':
+    resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/runtime@7.28.6':
+    resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
+  '@codemirror/autocomplete@6.20.1':
+    resolution: {integrity: sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==}
+
+  '@codemirror/commands@6.10.3':
+    resolution: {integrity: sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==}
+
+  '@codemirror/lang-angular@0.1.4':
+    resolution: {integrity: sha512-oap+gsltb/fzdlTQWD6BFF4bSLKcDnlxDsLdePiJpCVNKWXSTAbiiQeYI3UmES+BLAdkmIC1WjyztC1pi/bX4g==}
+
+  '@codemirror/lang-cpp@6.0.3':
+    resolution: {integrity: sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==}
+
+  '@codemirror/lang-css@6.3.1':
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+
+  '@codemirror/lang-go@6.0.1':
+    resolution: {integrity: sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==}
+
+  '@codemirror/lang-html@6.4.11':
+    resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
+
+  '@codemirror/lang-java@6.0.2':
+    resolution: {integrity: sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==}
+
+  '@codemirror/lang-javascript@6.2.5':
+    resolution: {integrity: sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==}
+
+  '@codemirror/lang-jinja@6.0.0':
+    resolution: {integrity: sha512-47MFmRcR8UAxd8DReVgj7WJN1WSAMT7OJnewwugZM4XiHWkOjgJQqvEM1NpMj9ALMPyxmlziEI1opH9IaEvmaw==}
+
+  '@codemirror/lang-json@6.0.2':
+    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
+
+  '@codemirror/lang-less@6.0.2':
+    resolution: {integrity: sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==}
+
+  '@codemirror/lang-liquid@6.3.2':
+    resolution: {integrity: sha512-6PDVU3ZnfeYyz1at1E/ttorErZvZFXXt1OPhtfe1EZJ2V2iDFa0CwPqPgG5F7NXN0yONGoBogKmFAafKTqlwIw==}
+
+  '@codemirror/lang-markdown@6.5.0':
+    resolution: {integrity: sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==}
+
+  '@codemirror/lang-php@6.0.2':
+    resolution: {integrity: sha512-ZKy2v1n8Fc8oEXj0Th0PUMXzQJ0AIR6TaZU+PbDHExFwdu+guzOA4jmCHS1Nz4vbFezwD7LyBdDnddSJeScMCA==}
+
+  '@codemirror/lang-python@6.2.1':
+    resolution: {integrity: sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==}
+
+  '@codemirror/lang-rust@6.0.2':
+    resolution: {integrity: sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==}
+
+  '@codemirror/lang-sass@6.0.2':
+    resolution: {integrity: sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==}
+
+  '@codemirror/lang-sql@6.10.0':
+    resolution: {integrity: sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==}
+
+  '@codemirror/lang-vue@0.1.3':
+    resolution: {integrity: sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==}
+
+  '@codemirror/lang-wast@6.0.2':
+    resolution: {integrity: sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==}
+
+  '@codemirror/lang-xml@6.1.0':
+    resolution: {integrity: sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==}
+
+  '@codemirror/lang-yaml@6.1.3':
+    resolution: {integrity: sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==}
+
+  '@codemirror/language-data@6.5.2':
+    resolution: {integrity: sha512-CPkWBKrNS8stYbEU5kwBwTf3JB1kghlbh4FSAwzGW2TEscdeHHH4FGysREW86Mqnj3Qn09s0/6Ea/TutmoTobg==}
+
+  '@codemirror/language@6.12.3':
+    resolution: {integrity: sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==}
+
+  '@codemirror/legacy-modes@6.5.2':
+    resolution: {integrity: sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q==}
+
+  '@codemirror/lint@6.9.5':
+    resolution: {integrity: sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==}
+
+  '@codemirror/search@6.6.0':
+    resolution: {integrity: sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==}
+
+  '@codemirror/state@6.6.0':
+    resolution: {integrity: sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==}
+
+  '@codemirror/theme-one-dark@6.1.3':
+    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
+
+  '@codemirror/view@6.41.1':
+    resolution: {integrity: sha512-ToDnWKbBnke+ZLrP6vgTTDScGi5H37YYuZGniQaBzxMVdtCxMrslsmtnOvbPZk4RX9bvkQqnWR/WS/35tJA0qg==}
+
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
+
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
+  '@emotion/hash@0.8.0':
+    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
+
+  '@emotion/unitless@0.7.5':
+    resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
+
+  '@faker-js/faker@10.4.0':
+    resolution: {integrity: sha512-sDBWI3yLy8EcDzgobvJTWq1MJYzAkQdpjXuPukga9wXonhpMRvd1Izuo2Qgwey2OiEoRIBr35RMU9HJRoOHzpw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || ^23.5.0 || >=24.0.0, npm: '>=10'}
+
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@hapi/bourne@3.0.0':
+    resolution: {integrity: sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w==}
+
+  '@iconify-json/ion@1.2.7':
+    resolution: {integrity: sha512-ZJNG5kLCbTPr68mdP0jx6Q3lB9AMEQKO2+VvIjuJ2llGFICBLD+cvESn/qGDRIqSfk2D3PrFMf/Qg8WKIUV7cg==}
+
+  '@iconify-json/mdi@1.2.3':
+    resolution: {integrity: sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==}
+
+  '@iconify-json/ri@1.2.10':
+    resolution: {integrity: sha512-WWMhoncVVM+Xmu9T5fgu2lhYRrKTEWhKk3Com0KiM111EeEsRLiASjpsFKnC/SrB6covhUp95r2mH8tGxhgd5Q==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/vue@5.0.0':
+    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
+    peerDependencies:
+      vue: '>=3'
+
+  '@intlify/core-base@11.3.0':
+    resolution: {integrity: sha512-NNX5jIwF4TJBe7RtSKDMOA6JD9mp2mRcBHAwt2X+Q8PvnZub0yj5YYXlFu2AcESdgQpEv/5Yx2uOCV/yh7YkZg==}
+    engines: {node: '>= 16'}
+
+  '@intlify/devtools-types@11.3.0':
+    resolution: {integrity: sha512-G9CNL4WpANWVdUjubOIIS7/D2j/0j+1KJmhBJxHilWNKr9mmt3IjFV3Hq4JoBP23uOoC5ynxz/FHZ42M+YxfGw==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@11.3.0':
+    resolution: {integrity: sha512-RAJp3TMsqohg/Wa7bVF3cChRhecSYBLrTCQSj7j0UtWVFLP+6iEJoE2zb7GU5fp+fmG5kCbUdzhmlAUCWXiUJw==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@11.3.0':
+    resolution: {integrity: sha512-LC6P/uay7rXL5zZ5+5iRJfLs/iUN8apu9tm8YqQVmW3Uq3X4A0dOFUIDuAmB7gAC29wTHOS3EiN/IosNSz0eNQ==}
+    engines: {node: '>= 16'}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@lezer/common@1.5.1':
+    resolution: {integrity: sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==}
+
+  '@lezer/cpp@1.1.5':
+    resolution: {integrity: sha512-DIhSXmYtJKLehrjzDFN+2cPt547ySQ41nA8yqcDf/GxMc+YM736xqltFkvADL2M0VebU5I+3+4ks2Vv+Kyq3Aw==}
+
+  '@lezer/css@1.3.1':
+    resolution: {integrity: sha512-PYAKeUVBo3HFThruRyp/iK91SwiZJnzXh8QzkQlwijB5y+N5iB28+iLk78o2zmKqqV0uolNhCwFqB8LA7b0Svg==}
+
+  '@lezer/go@1.0.1':
+    resolution: {integrity: sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/html@1.3.13':
+    resolution: {integrity: sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==}
+
+  '@lezer/java@1.1.3':
+    resolution: {integrity: sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==}
+
+  '@lezer/javascript@1.5.4':
+    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
+
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/lr@1.4.8':
+    resolution: {integrity: sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==}
+
+  '@lezer/markdown@1.6.3':
+    resolution: {integrity: sha512-jpGm5Ps+XErS+xA4urw7ogEGkeZOahVQF21Z6oECF0sj+2liwZopd2+I8uH5I/vZsRuuze3OxBREIANLf6KKUw==}
+
+  '@lezer/php@1.0.5':
+    resolution: {integrity: sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==}
+
+  '@lezer/python@1.1.18':
+    resolution: {integrity: sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==}
+
+  '@lezer/rust@1.0.2':
+    resolution: {integrity: sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==}
+
+  '@lezer/sass@1.1.0':
+    resolution: {integrity: sha512-3mMGdCTUZ/84ArHOuXWQr37pnf7f+Nw9ycPUeKX+wu19b7pSMcZGLbaXwvD2APMBDOGxPmpK/O6S1v1EvLoqgQ==}
+
+  '@lezer/xml@1.0.6':
+    resolution: {integrity: sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==}
+
+  '@lezer/yaml@1.0.4':
+    resolution: {integrity: sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==}
+
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
+  '@milkdown/components@7.20.0':
+    resolution: {integrity: sha512-Qn91/oZugGjf17ARE51nbEsH4YklZQaomRSsfxOAtIcwGEJe5osq+zhhKGtgAYFfUb6rU3W86Pe4XDlXN6vFjg==}
+    peerDependencies:
+      '@codemirror/language': ^6
+      '@codemirror/state': ^6
+      '@codemirror/view': ^6
+
+  '@milkdown/core@7.20.0':
+    resolution: {integrity: sha512-X9LaUcIR4Y2oiY2J5tslavlPVOwIB3X8/9z1bOeBjlIPtr+urbkY7YEX86EeLV9LyRQ3+t+jXaLMCIjW1wsV6w==}
+
+  '@milkdown/crepe@7.20.0':
+    resolution: {integrity: sha512-KT+oFF6Q7mI41z01c9v/wUUCyQ2f908TgOsa6mwi25yuxnxQxISZFCjRvlh0sc9p9D3CrMeuJWGCN6DialQdig==}
+
+  '@milkdown/ctx@7.20.0':
+    resolution: {integrity: sha512-LUK4xdsUngY2xCCvPTyHPifjAknJ5rE6VBjgsP+LySIUKeFUrhqzo/zz2vaOODKzm3DBMIhpZAoW3MAqxoMGIQ==}
+
+  '@milkdown/exception@7.20.0':
+    resolution: {integrity: sha512-u8EL7rbqgrWrPpkDhrxUYXauw2DO52JUQmuokrUZvqezmflo7pgIDCr+Rk6AQslzB4Xw+n9eYik5rXX3RXC7Qg==}
+
+  '@milkdown/kit@7.20.0':
+    resolution: {integrity: sha512-X74KMa0tcDAAMOE9aFtBRN+RCdD/HMXor5YN18e7d0pe4a65MGFklUGlcg1U6zEfeMMYeC3msNvMKLMwk3O5RA==}
+
+  '@milkdown/plugin-block@7.20.0':
+    resolution: {integrity: sha512-jIXfzJ8Zje+6+9ZwQuVmNeYE8KfzqL9YJ/YdMvWQIEiKhy2x9pZMAkkufgmUlq1aouxOV+gk5fX+ovxzEzfSrA==}
+
+  '@milkdown/plugin-clipboard@7.20.0':
+    resolution: {integrity: sha512-PyokNvwgWcO6/I/0LxDRnATpnxvs5upFRlp6eO8PhjwBFZftCIU6D15Wg4JAxwW7Y0NyTWfViWjc9TwiBd6KOQ==}
+
+  '@milkdown/plugin-cursor@7.20.0':
+    resolution: {integrity: sha512-goCPwUARBzGV6Hvnr3P57Bj5TnyFjYIfDFLvgWTIlsm/dR2Wr4Syy4HDOtaKO9YL/VtZ8gtiZVgeo0vhc4CzMA==}
+
+  '@milkdown/plugin-history@7.20.0':
+    resolution: {integrity: sha512-lqOYQBrxKj4px/i0Cav3zRkCArwnkv8o7fGMh3NtnUXMLSE7/xojK5GFPS4EaS/UKK7/+i1oV2+HRA6+6Ezy7w==}
+
+  '@milkdown/plugin-indent@7.20.0':
+    resolution: {integrity: sha512-KfdIztQMuHv4Rx1JmSQe2vooN4+Zm7MhjQkNolGyiI7BPZbu855hVIC/s96x3Dk04tkbb+M/i9MJhxCazxfd6Q==}
+
+  '@milkdown/plugin-listener@7.20.0':
+    resolution: {integrity: sha512-Sj+B63JfM3NVVS3uGXTPkoz8xx8MQYrR28pI9AaqX5q60tvCvOJw9E1ODvSsBEjeqnN4kablDthIugLlBhOlwQ==}
+
+  '@milkdown/plugin-prism@7.20.0':
+    resolution: {integrity: sha512-Iy8rh/KOzTmJIWpPhjzeF2NEkhldLZ0Edu0/zU3UBsom939ZcUdcsLujwpad7P6KlueBHw8QgSNe0gOEQ56yTQ==}
+
+  '@milkdown/plugin-slash@7.20.0':
+    resolution: {integrity: sha512-Qm3/ZxkGYd5XN+J/X91lGGu7SBzuQBOTOLjuJdg4qDBZmdEHlGojB+5BhCSAMB3WGyCpQQGbSqKOelUrXtj68w==}
+
+  '@milkdown/plugin-tooltip@7.20.0':
+    resolution: {integrity: sha512-BVaXorpmA6ZAS3+xv0rgrtjV1h2K39G5Z9Wun4RxT1YXJTTbzIuFQ3hwBAGLjLMwTsosp7YhRLaMJJAC0jEY5Q==}
+
+  '@milkdown/plugin-trailing@7.20.0':
+    resolution: {integrity: sha512-AxDeMSAZfj0Er7RYLvLRf6FKdQtLVmotxML6Se6zgqIa++bFeIXCU22/FC+9r/6d1eUtraTva9ez5K2qPy8qig==}
+
+  '@milkdown/plugin-upload@7.20.0':
+    resolution: {integrity: sha512-g3UQrD2zfpm86r3BcBDfOdEAyQHhay1nf5wUQgNf4zn6IgRttfEF8tosQsL1B/WBnZB05hH5scLWo4DR2bFhUw==}
+
+  '@milkdown/preset-commonmark@7.20.0':
+    resolution: {integrity: sha512-+mPcONXfdjaXdx8JMxDIOT3PWHfy5vewK8iY8j8bUiYD8Iw7YfyWTUh9JHOf4vmOpiKGCJd7+iz7e93u95bQRw==}
+
+  '@milkdown/preset-gfm@7.20.0':
+    resolution: {integrity: sha512-ulErTWDqrGYYqto4kQO9dPTMRp+q44pdRTPW4MTeiSO7eJ6JIBUKSqtCm1zf7MX6nZPaPhuscmg5CU2moXOwxQ==}
+
+  '@milkdown/prose@7.20.0':
+    resolution: {integrity: sha512-Qe6jmKcXsjOfpk8duDFdkLCEo5044L8HSyKVn7ewAe7XJJPUM6bPQaP130UAznq75/+TiKxFCzurcrBO3LzNRg==}
+
+  '@milkdown/theme-nord@7.20.0':
+    resolution: {integrity: sha512-yfT+BQvURTmi+Cjt9rRqFjORrQISbJItKzQD+486hc8hfBcbHnbEjhNAkvoi6IAOWsK+Cj67BuCFtKbYeovrKA==}
+
+  '@milkdown/transformer@7.20.0':
+    resolution: {integrity: sha512-h7KGFr1o5AYwc+hEfnA3Dldo4jRrYOB/7KExaqelcjUz++KYI/9LXMOsV7CpgjtLI3Xtf2IIRTZND1+p2nsOaw==}
+
+  '@milkdown/utils@7.20.0':
+    resolution: {integrity: sha512-ciEhtLKhIW/Kaz/NRE5DUXVoMCdenn7S4mClrO7sZ/nXtmObnk3okJzSDnamQoDOcLOIbpOu1V3E1Btkvc5x9w==}
+
+  '@milkdown/vue@7.20.0':
+    resolution: {integrity: sha512-hQ7D/WIY5+ZXWgonaebXVSAK2QDOTVLIb9sLUfOXwzIzjTh+zDNy3v9+OWETKWvIS+myP/u5GIYdHCbLlHpELA==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
+  '@noble/hashes@1.8.0':
+    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@ocavue/utils@1.5.0':
+    resolution: {integrity: sha512-zYOKnvUm8IQ86tNCrpUVBT0lEvoKvyf+9pPS7M4VDB8O1o+msaPMsb/xZx/w5hpcuN1dfehJrkY41ZcdGZpyqg==}
+
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
+
+  '@oxfmt/binding-android-arm-eabi@0.43.0':
+    resolution: {integrity: sha512-CgU2s+/9hHZgo0IxVxrbMPrMj+tJ6VM3mD7Mr/4oiz4FNTISLoCvRmB5nk4wAAle045RtRjd86m673jwPyb1OQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxfmt/binding-android-arm64@0.43.0':
+    resolution: {integrity: sha512-T9OfRwjA/EdYxAqbvR7TtqLv5nIrwPXuCtTwOHtS7aR9uXyn74ZYgzgTo6/ZwvTq9DY4W+DsV09hB2EXgn9EbA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxfmt/binding-darwin-arm64@0.43.0':
+    resolution: {integrity: sha512-o3i49ZUSJWANzXMAAVY1wnqb65hn4JVzwlRQ5qfcwhRzIA8lGVaud31Q3by5ALHPrksp5QEaKCQF9aAS3TXpZA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxfmt/binding-darwin-x64@0.43.0':
+    resolution: {integrity: sha512-vWECzzCFkb0kK6jaHjbtC5sC3adiNWtqawFCxhpvsWlzVeKmv5bNvkB4nux+o4JKWTpHCM57NDK/MeXt44txmA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxfmt/binding-freebsd-x64@0.43.0':
+    resolution: {integrity: sha512-rgz8JpkKiI/umOf7fl9gwKyQasC8bs5SYHy6g7e4SunfLBY3+8ATcD5caIg8KLGEtKFm5ujKaH8EfjcmnhzTLg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.43.0':
+    resolution: {integrity: sha512-nWYnF3vIFzT4OM1qL/HSf1Yuj96aBuKWSaObXHSWliwAk2rcj7AWd6Lf7jowEBQMo4wCZVnueIGw/7C4u0KTBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.43.0':
+    resolution: {integrity: sha512-sFg+NWJbLfupYTF4WELHAPSnLPOn1jiDZ33Z1jfDnTaA+cC3iB35x0FMMZTFdFOz3icRIArncwCcemJFGXu6TQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxfmt/binding-linux-arm64-gnu@0.43.0':
+    resolution: {integrity: sha512-MelWqv68tX6wZEILDrTc9yewiGXe7im62+5x0bNXlCYFOZdA+VnYiJfAihbROsZ5fm90p9C3haFrqjj43XnlAA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-arm64-musl@0.43.0':
+    resolution: {integrity: sha512-ROaWfYh+6BSJ1Arwy5ujijTlwnZetxDxzBpDc1oBR4d7rfrPBqzeyjd5WOudowzQUgyavl2wEpzn1hw3jWcqLA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.43.0':
+    resolution: {integrity: sha512-PJRs/uNxmFipJJ8+SyKHh7Y7VZIKQicqrrBzvfyM5CtKi8D7yZKTwUOZV3ffxmiC2e7l1SDJpkBEOyue5NAFsg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.43.0':
+    resolution: {integrity: sha512-j6biGAgzIhj+EtHXlbNumvwG7XqOIdiU4KgIWRXAEj/iUbHKukKW8eXa4MIwpQwW1YkxovduKtzEAPnjlnAhVQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-musl@0.43.0':
+    resolution: {integrity: sha512-RYWxAcslKxvy7yri24Xm9cmD0RiANaiEPs007EFG6l9h1ChM69Q5SOzACaCoz4Z9dEplnhhneeBaTWMEdpgIbA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-linux-s390x-gnu@0.43.0':
+    resolution: {integrity: sha512-DT6Q8zfQQy3jxpezAsBACEHNUUixKSYTwdXeXojNHe4DQOoxjPdjr3Szu6BRNjxLykZM/xMNmp9ElOIyDppwtw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-gnu@0.43.0':
+    resolution: {integrity: sha512-R8Yk7iYcuZORXmCfFZClqbDxRZgZ9/HEidUuBNdoX8Ptx07cMePnMVJ/woB84lFIDjh2ROHVaOP40Ds3rBXFqg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-musl@0.43.0':
+    resolution: {integrity: sha512-F2YYqyvnQNvi320RWZNAvsaWEHwmW3k4OwNJ1hZxRKXupY63expbBaNp6jAgvYs7y/g546vuQnGHQuCBhslhLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-openharmony-arm64@0.43.0':
+    resolution: {integrity: sha512-OE6TdietLXV3F6c7pNIhx/9YC1/2YFwjU9DPc/fbjxIX19hNIaP1rS0cFjCGJlGX+cVJwIKWe8Mos+LdQ1yAJw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxfmt/binding-win32-arm64-msvc@0.43.0':
+    resolution: {integrity: sha512-0nWK6a7pGkbdoypfVicmV9k/N1FwjPZENoqhlTU+5HhZnAhpIO3za30nEE33u6l6tuy9OVfpdXUqxUgZ+4lbZw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxfmt/binding-win32-ia32-msvc@0.43.0':
+    resolution: {integrity: sha512-9aokTR4Ft+tRdvgN/pKzSkVy2ksc4/dCpDm9L/xFrbIw0yhLtASLbvoG/5WOTUh/BRPPnfGTsWznEqv0dlOmhA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxfmt/binding-win32-x64-msvc@0.43.0':
+    resolution: {integrity: sha512-4bPgdQux2ZLWn3bf2TTXXMHcJB4lenmuxrLqygPmvCJ104Yqzj1UctxSRzR31TiJ4MLaG22RK8dUsVpJtrCz5g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxlint/binding-android-arm-eabi@1.62.0':
+    resolution: {integrity: sha512-pKsthNECyvJh8lPTICz6VcwVy2jOqdhhsp1rlxCkhgZR47aKvXPmaRWQDv+zlXpRae4qm1MaaTnutkaOk5aofg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxlint/binding-android-arm64@1.62.0':
+    resolution: {integrity: sha512-b1AUNViByvgmR2xJDubvLIr+dSuu3uraG7bsAoKo+xrpspPvu6RIn6Fhr2JUhobfep3jwUTy18Huco6GkwdvGQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxlint/binding-darwin-arm64@1.62.0':
+    resolution: {integrity: sha512-iG+Tvf70UJ6otfwFYIHk36Sjq9cpPP5YLxkoggANNRtzgi3Tj3g8q6Ybqi6AtkU3+yg9QwF7bDCkCS6bbL4PCg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-x64@1.62.0':
+    resolution: {integrity: sha512-oOWI6YPPr5AJUx+yIDlxmuUbQjS5gZX3OH3QisawYvsZgLiQVvZtR0rPBcJTxLWqt2ClrWg0DlSrlUiG5SQNHg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint/binding-freebsd-x64@1.62.0':
+    resolution: {integrity: sha512-dLP33T7VLCmLVv4cvjkVX+rmkcwNk2UfxmsZPNur/7BQHoQR60zJ7XLiRvNUawlzn0u8ngCa3itjEG73MAMa/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.62.0':
+    resolution: {integrity: sha512-fl//LWNks6qo9chNY60UDYyIwtp7a5cEx4Y/rHPjaarhuwqx6jtbzEpD5V5AqmdL4a6Y5D8zeXg5HF2Cr0QmSQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-musleabihf@1.62.0':
+    resolution: {integrity: sha512-i5vkAuxvueTODV3J2dL61/TXewDHhMFKvtD156cIsk7GsdfiAu7zW7kY0NJXhKeFHeiMZIh7eFNjkPYH6J47HQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm64-gnu@1.62.0':
+    resolution: {integrity: sha512-QwN19LLuIGuOjEflSeJkZmOTfBdBMlTmW8xbMf8TZhjd//cxVNYQPq75q7oKZBJc6hRx3gY7sX0Egc8cEIFZYg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-arm64-musl@1.62.0':
+    resolution: {integrity: sha512-8eCy3FCDuWUM5hWujAv6heMvfZPbcCOU3SdQUAkixZLu5bSzOkNfirJiLGoQFO943xceOKkiQRMQNzH++jM3WA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-ppc64-gnu@1.62.0':
+    resolution: {integrity: sha512-NjQ7K7tpTPDe9J+yq8p/s/J0E7lRCkK2uDBDqvT4XIT6f4Z0tlnr59OBg/WcrmVHER1AbrcfyxhGTXgcG8ytWg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-gnu@1.62.0':
+    resolution: {integrity: sha512-oKZed9gmSwze29dEt3/Wnsv6l/Ygw/FUst+8Kfpv2SGeS/glEoTGZAMQw37SVyzFV76UTHJN2snGgxK2t2+8ow==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-musl@1.62.0':
+    resolution: {integrity: sha512-gBjBxQ+9lGpAYq+ELqw0w8QXsBnkZclFc7GRX2r0LnEVn3ZTEqeIKpKcGjucmp76Q53bvJD0i4qBWBhcfhSfGA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-s390x-gnu@1.62.0':
+    resolution: {integrity: sha512-Ew2Kxs9EQ9/mbAIJ2hvocMC0wsOu6YKzStI2eFBDt+Td5O8seVC/oxgRIHqCcl5sf5ratA1nozQBAuv7tphkHg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-gnu@1.62.0':
+    resolution: {integrity: sha512-5z25jcAA0gfKyVwz71A0VXgaPlocPoTAxhlv/hgoK6tlCrfoNuw7haWbDHvGMfjXhdic4EqVXGRv5XsTqFnbRQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-musl@1.62.0':
+    resolution: {integrity: sha512-IWpHmMB6ZDllPvqWDkG6AmXrN7JF5e/c4g/0PuURsmlK+vHoYZPB70rr4u1bn3I4LsKCSpqqfveyx6UCOC8wdg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-openharmony-arm64@1.62.0':
+    resolution: {integrity: sha512-fjlSxxrD5pA594vkyikCS9MnPRjQawW6/BLgyTYkO+73wwPlYjkcZ7LSd974l0Q2zkHQmu4DPvJFLYA7o8xrxQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxlint/binding-win32-arm64-msvc@1.62.0':
+    resolution: {integrity: sha512-EiFXr8loNS0Ul3Gu80+9nr1T8jRmnKocqmHHg16tj5ZqTgUXyb97l2rrspVHdDluyFn9JfR4PoJFdNzw4paHww==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint/binding-win32-ia32-msvc@1.62.0':
+    resolution: {integrity: sha512-IgOFvL73li1bFgab+hThXYA0N2Xms2kV2MvZN95cebV+fmrZ9AVui1JSxfeeqRLo3CpPxKZlzhyq4G0cnaAvIw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxlint/binding-win32-x64-msvc@1.62.0':
+    resolution: {integrity: sha512-6hMpyDWQ2zGA1OXFKBrdYMUveUCO8UJhkO6JdwZPd78xIdHZNhjx+pib+4fC2Cljuhjyl0QwA2F3df/bs4Bp6A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@paralleldrive/cuid2@2.3.1':
+    resolution: {integrity: sha512-XO7cAxhnTZl0Yggq6jOgjiOHhbgcO4NqFqwSmQpjK3b6TEE6Uj/jfSk6wzYyemh3+I0sHirKSetjQwn5cZktFw==}
+
+  '@parcel/watcher-android-arm64@2.5.6':
+    resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    resolution: {integrity: sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    resolution: {integrity: sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    resolution: {integrity: sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.6':
+    resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
+    engines: {node: '>= 10.0.0'}
+
+  '@pengzhanbo/utils@3.3.1':
+    resolution: {integrity: sha512-rVmmTdeQs+gdk5XboXG7gv4LSLnCceZ9l9Z1v/P+zScOpwPYn6mSVukPtRC22234rXC/13AZV2gZ3ZDvNmP9XA==}
+
+  '@rolldown/binding-android-arm64@1.0.0-rc.17':
+    resolution: {integrity: sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.17':
+    resolution: {integrity: sha512-4ksWc9n0mhlZpZ9PMZgTGjeOPRu8MB1Z3Tz0Mo02eWfWCHMW1zN82Qz/pL/rC+yQa+8ZnutMF0JjJe7PjwasYw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.0-rc.17':
+    resolution: {integrity: sha512-SUSDOI6WwUVNcWxd02QEBjLdY1VPHvlEkw6T/8nYG322iYWCTxRb1vzk4E+mWWYehTp7ERibq54LSJGjmouOsw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.17':
+    resolution: {integrity: sha512-hwnz3nw9dbJ05EDO/PvcjaaewqqDy7Y1rn1UO81l8iIK1GjenME75dl16ajbvSSMfv66WXSRCYKIqfgq2KCfxw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17':
+    resolution: {integrity: sha512-IS+W7epTcwANmFSQFrS1SivEXHtl1JtuQA9wlxrZTcNi6mx+FDOYrakGevvvTwgj2JvWiK8B29/qD9BELZPyXQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17':
+    resolution: {integrity: sha512-e6usGaHKW5BMNZOymS1UcEYGowQMWcgZ71Z17Sl/h2+ZziNJ1a9n3Zvcz6LdRyIW5572wBCTH/Z+bKuZouGk9Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
+    resolution: {integrity: sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
+    resolution: {integrity: sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
+    resolution: {integrity: sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
+    resolution: {integrity: sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
+    resolution: {integrity: sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
+    resolution: {integrity: sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.17':
+    resolution: {integrity: sha512-LEXei6vo0E5wTGwpkJ4KoT3OZJRnglwldt5ziLzOlc6qqb55z4tWNq2A+PFqCJuvWWdP53CVhG1Z9NtToDPJrA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17':
+    resolution: {integrity: sha512-gUmyzBl3SPMa6hrqFUth9sVfcLBlYsbMzBx5PlexMroZStgzGqlZ26pYG89rBb45Mnia+oil6YAIFeEWGWhoZA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.17':
+    resolution: {integrity: sha512-3hkiolcUAvPB9FLb3UZdfjVVNWherN1f/skkGWJP/fgSQhYUZpSIRr0/I8ZK9TkF3F7kxvJAk0+IcKvPHk9qQg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.0-rc.17':
+    resolution: {integrity: sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==}
+
+  '@rolldown/pluginutils@1.0.0-rc.2':
+    resolution: {integrity: sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==}
+
+  '@tailwindcss/node@4.2.4':
+    resolution: {integrity: sha512-Ai7+yQPxz3ddrDQzFfBKdHEVBg0w3Zl83jnjuwxnZOsnH9pGn93QHQtpU0p/8rYWxvbFZHneni6p1BSLK4DkGA==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.4':
+    resolution: {integrity: sha512-e7MOr1SAn9U8KlZzPi1ZXGZHeC5anY36qjNwmZv9pOJ8E4Q6jmD1vyEHkQFmNOIN7twGPEMXRHmitN4zCMN03g==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.4':
+    resolution: {integrity: sha512-tSC/Kbqpz/5/o/C2sG7QvOxAKqyd10bq+ypZNf+9Fi2TvbVbv1zNpcEptcsU7DPROaSbVgUXmrzKhurFvo5eDg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.4':
+    resolution: {integrity: sha512-yPyUXn3yO/ufR6+Kzv0t4fCg2qNr90jxXc5QqBpjlPNd0NqyDXcmQb/6weunH/MEDXW5dhyEi+agTDiqa3WsGg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.4':
+    resolution: {integrity: sha512-BoMIB4vMQtZsXdGLVc2z+P9DbETkiopogfWZKbWwM8b/1Vinbs4YcUwo+kM/KeLkX3Ygrf4/PsRndKaYhS8Eiw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.4':
+    resolution: {integrity: sha512-7pIHBLTHYRAlS7V22JNuTh33yLH4VElwKtB3bwchK/UaKUPpQ0lPQiOWcbm4V3WP2I6fNIJ23vABIvoy2izdwA==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.4':
+    resolution: {integrity: sha512-+E4wxJ0ZGOzSH325reXTWB48l42i93kQqMvDyz5gqfRzRZ7faNhnmvlV4EPGJU3QJM/3Ab5jhJ5pCRUsKn6OQw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.4':
+    resolution: {integrity: sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.4':
+    resolution: {integrity: sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.4':
+    resolution: {integrity: sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.4':
+    resolution: {integrity: sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.4':
+    resolution: {integrity: sha512-L9BXqxC4ToVgwMFqj3pmZRqyHEztulpUJzCxUtLjobMCzTPsGt1Fa9enKbOpY2iIyVtaHNeNvAK8ERP/64sqGQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.4':
+    resolution: {integrity: sha512-ESlKG0EpVJQwRjXDDa9rLvhEAh0mhP1sF7sap9dNZT0yyl9SAG6T7gdP09EH0vIv0UNTlo6jPWyujD6559fZvw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.4':
+    resolution: {integrity: sha512-9El/iI069DKDSXwTvB9J4BwdO5JhRrOweGaK25taBAvBXyXqJAX+Jqdvs8r8gKpsI/1m0LeJLyQYTf/WLrBT1Q==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.4':
+    resolution: {integrity: sha512-pCvohwOCspk3ZFn6eJzrrX3g4n2JY73H6MmYC87XfGPyTty4YsCjYTMArRZm/zOI8dIt3+EcrLHAFPe5A4bgtw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
+  '@tiptap/core@3.22.5':
+    resolution: {integrity: sha512-L1lhWz6ujGny8LduTJ7MBWYhzigwOvfUJUrJ7IzOJSuy3+OAzisdGDD1GV7LEO/hU0Hr2Mkm1wajRIHExvS9HQ==}
+    peerDependencies:
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-blockquote@3.22.5':
+    resolution: {integrity: sha512-ajyP5W8fG5Hrru47T/eF3xMKOpNvWofgNJqBTeNuGl02sYxsy9a4EunyFxudsaZP9WW3VOD4SaIWr5+MqpbnOQ==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-bold@3.22.5':
+    resolution: {integrity: sha512-l/uDtpJISiFFyfctvnODNWBN/XPZI1jVZRacTRDDnSn8+x6KQ7G2qgFYueU7KvVJGDFVT39Iio56mcFRG/Pozg==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-bubble-menu@3.22.5':
+    resolution: {integrity: sha512-yrNlFQQJY5MmhBpmD8tnmaSmyUQrEvgyPKa3bzVeWEhDSG1CW4A0ZSMx3hrA9yFO0HWfw3IJmvSCycEZQBalpQ==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-bullet-list@3.22.5':
+    resolution: {integrity: sha512-cf54fG9AybU8NgPMv1TOcoqAkELeRc/VpnSCt/rIJZphWQx9nsFmrtkrlCatrIcCaGtNZYwlHlMnC5LVVMu0uA==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.22.5
+
+  '@tiptap/extension-code-block@3.22.5':
+    resolution: {integrity: sha512-d123kCfLdJTi4fue1m0+TNFztDkmIRSZGZmGu6H9KqwG5Q7IzjT9o8lzRsz+pXxYqHvqgYmXoEpM6srbzXx/Ag==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-code@3.22.5':
+    resolution: {integrity: sha512-mwDNOJC9rYbDu/JcqrN4dbUQRklJU8Fuk2raxD/IvFw9qUIcPCmxQ2XT9UTKmZz/Ju7Kdy72fss6XpgWv6gLAQ==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-document@3.22.5':
+    resolution: {integrity: sha512-8NJERd+pCtvSuEP4C4WMGYmRRCV12ePZL7bC+QUdFlbdXg+kNZS0zZ7hh879tYA0Kidbi8rWWD1Tx+H2ezkmMw==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-dropcursor@3.22.5':
+    resolution: {integrity: sha512-Mp40DaFrY3sEUVtFqmxrR0BmU4G3k8GCYYNGqNa9OqWv7BrcFDC03V2n3okESDKt4MKkzhQQmypq+ouLy8dLfA==}
+    peerDependencies:
+      '@tiptap/extensions': 3.22.5
+
+  '@tiptap/extension-floating-menu@3.22.5':
+    resolution: {integrity: sha512-dhem4sTPhyQgQ+pFp2Oud4k4FSQz9PVMgeQAC9288SmGwxBkJNveDAw6sKTMrumqDvwkJrtslXIupq9TZYQnzg==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': 3.22.5
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-gapcursor@3.22.5':
+    resolution: {integrity: sha512-4WkMu7qqjbsm8hCQS+8X+la1wjriN0SKoRdvpfKH33qM50MB34tYJuGLAO+y7TTh4MMMco3AZCKPBL5JVMqNIg==}
+    peerDependencies:
+      '@tiptap/extensions': 3.22.5
+
+  '@tiptap/extension-hard-break@3.22.5':
+    resolution: {integrity: sha512-n0R2mUVYZU2AVbJhg/WcY9+zx690wVwvsItHJf0DrYbf1tCYHx+PRHUt/AoXk6u8BSmnkb8/FDziS8m3mjfpSg==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-heading@3.22.5':
+    resolution: {integrity: sha512-hjyEG4947PAhMBfP1G6B0QAh6+y9mp2C5BQmNjprA05/lQzDAT7KFZzNh8ZVp3ol6aICKq/N1gFOW9Dc/9FUOw==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-horizontal-rule@3.22.5':
+    resolution: {integrity: sha512-vUV0/ugIbXOc8SJib0h8UMhgcqZXWu/dkEhlswZN4VVven1o5enkfxEiDw+OyIJHi5rUkrdhsQ/KTxG/Xb7X8A==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-image@3.22.5':
+    resolution: {integrity: sha512-ezMzA6w6UsPesQp6fxTQojI/IkGJLmkwR/VGTimva7sudP3HdSW8k3SGBkjfvp0L2xqUrC/l4nWOchu01A/xtQ==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-italic@3.22.5':
+    resolution: {integrity: sha512-4T8baSiLkeIymTgEwirxDFt5YgYofkP3m1+MGYdGy2HKcOK+1vpvlPhEO1X5qtZngtJW5S4+njKjinRg52A4PA==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-link@3.22.5':
+    resolution: {integrity: sha512-d671MvF3GPKoS2OVxjIlQ7hIE7MS3hREdR+d4cvnnoiLLD+ZJ6KgDnxmWqF0a1s4qxLWK2KxKRSOIfYGE31QWQ==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-list-item@3.22.5':
+    resolution: {integrity: sha512-W7uTmyKLhlsvuTPLv+8WwnsY+mlikBFIoLSvVcBaFt4MwpsZ+DeB6KQg02Y7tbtaAnG7rXu9Fvw2QORh2P728A==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.22.5
+
+  '@tiptap/extension-list-keymap@3.22.5':
+    resolution: {integrity: sha512-cGUnxJ0y515e1bVHNjUmbx7oWHoEon59w6BA5N2KwV9iW2mZZchlTX4yxJSOX+ixeVRChsa7YwC3Z1jUZ6AMEg==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.22.5
+
+  '@tiptap/extension-list@3.22.5':
+    resolution: {integrity: sha512-cVO3ZHCgxAWZ4zrFSs81FO2nyCk1wb2EHkpLpW98FzbJLkN9rDkazhW99P3HRWy/CvUldOT+8ecI1YrQtBojMg==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-ordered-list@3.22.5':
+    resolution: {integrity: sha512-OXdh4k4CNrukwiSdWdEQ49uvgnqvR0Z9aNSP4HI5/kZQ/Te1NtRtYCpUrzWyO/7CtjcCisXHti0o9C/TV8YMbQ==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.22.5
+
+  '@tiptap/extension-paragraph@3.22.5':
+    resolution: {integrity: sha512-52KCto4+XKpnBWpIufspWLyq4UWxAWC72ANPdGuIhbi72NRTabiTbTVN40uwGSPkyakeESG0/vKdWJCVvB4f0g==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-placeholder@3.22.5':
+    resolution: {integrity: sha512-MZAohQ3FCS763BkhGXgaWRya6WruZjwRwEAkXP8vkxbERzl2OJRjniS4uXCWzAlRb3ttE103SnY7LMdM8FvsXw==}
+    peerDependencies:
+      '@tiptap/extensions': 3.22.5
+
+  '@tiptap/extension-strike@3.22.5':
+    resolution: {integrity: sha512-42WrrFK5gOom/0znH85x12Mw5IQ/6O6DWdyUWoRIrNA/qJpuHtU8oVU+bIgU2tuomMGHruRjIzgBQv5sBjEtww==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-text@3.22.5':
+    resolution: {integrity: sha512-bzpDOdAEo1JeoVZDIyV0oY0jGXkEG+AzF70SzHoRSjOvFDtKWunyXf9eO1OnOr2/fmMcckT2qwUBNBMQplWBzw==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extension-underline@3.22.5':
+    resolution: {integrity: sha512-9ut09rJD0iEbS6sk7yd2j6IwuFDLTNmDEGTDLodvqAfi+bq7ddsTDv0YviXoZaA9sdHAdTEVr2ITy2m6WK5jpA==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+
+  '@tiptap/extensions@3.22.5':
+    resolution: {integrity: sha512-Ifg4MzKCj3uRqe3ieTwYnomu2y4p7EXr2avVSKZYfh12i2dyWe2Gkn1KuZDREANVE+gHqFlQjJRYzhJFwzSCrg==}
+    peerDependencies:
+      '@tiptap/core': 3.22.5
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/pm@3.22.5':
+    resolution: {integrity: sha512-Cr9Mv4igxvI2tKMiahw48sZxva3PfDzypErH8IB82N+9qa9n9ygVMt0BOaDg53hLKxEEVeYr2S/wCcJIVFgBTw==}
+
+  '@tiptap/starter-kit@3.22.5':
+    resolution: {integrity: sha512-LZ/LYbwH6rnDi5DnRyagkuNsYAVyhM+yJvvz+ZuYA0JkPiTXJV86J5PWSKew8M0gVfMHcNVtKjfQCvViFCeIgw==}
+
+  '@tiptap/vue-3@3.22.5':
+    resolution: {integrity: sha512-xwSXPwDjauIVktMXBMaNaSgFyq3O1sXcX1vWyHyyCFlq4+8ekq4uXbjkD6y6IhZyr/AQoRYnjgosus+apGyGuA==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': 3.22.5
+      '@tiptap/pm': 3.22.5
+      vue: ^3.0.0
+
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
+  '@types/katex@0.16.8':
+    resolution: {integrity: sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==}
+
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.24':
+    resolution: {integrity: sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/prismjs@1.26.6':
+    resolution: {integrity: sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==}
+
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
+  '@uiw/codemirror-theme-dracula@4.25.9':
+    resolution: {integrity: sha512-0VTnpPCHPc+7LqYsQOX6nvW32XiiT+O6kJjReUbV7Eio3vPHsb+b9P4DKhz4AAvIIYMxmHkMuautHKuWktFXSg==}
+
+  '@uiw/codemirror-theme-github@4.25.9':
+    resolution: {integrity: sha512-AGpTamNiySKNzq3Jc7QjpwgQRVaHUaBtmOKiUDghYSfEGjsc5uW4NUW70sSU3BnkGv+lCTUnF3175KM24BWZbw==}
+
+  '@uiw/codemirror-theme-material@4.25.9':
+    resolution: {integrity: sha512-6f2x+gmj2hHagqy6VkpnPbK7SWyP6kKruGgqpyIy09/f9pAUCqkW8mRY5ZEr28tA+YEGQaSY0Z2IBCHl8OKJog==}
+
+  '@uiw/codemirror-theme-monokai@4.25.9':
+    resolution: {integrity: sha512-qKWRZOGpBCasZJdYU+SsXd92TjncF3QYHpraCPe29bxN22jeIxi2UC4MCuJHwa8hHljHOCSdx1XG/GuUMn7XiQ==}
+
+  '@uiw/codemirror-theme-nord@4.25.9':
+    resolution: {integrity: sha512-5c568xmMidwICADxACB1zIhKoEgqbdVrdeOUZ2p5pE6NNKGR4ATzk9OSqhvr1ZhZPNOktxqSLLRzihFaZG0bDQ==}
+
+  '@uiw/codemirror-theme-solarized@4.25.9':
+    resolution: {integrity: sha512-axUgU9+3JKXW83F+te454qcyTmQAm0+2Fxv0yoegiH6bdl7DjFq/lNVGGZtLwN47AQCj2Qwrheeet2t3GbY9VQ==}
+
+  '@uiw/codemirror-theme-tokyo-night@4.25.9':
+    resolution: {integrity: sha512-NkSqguMpzRjsRBbTIfOrGS35tQkE3K8AAetZHlbRZC7fnI52RreZ11X41cOYrc/Dapt8xqUPlhlvclymGFgy8g==}
+
+  '@uiw/codemirror-themes@4.25.9':
+    resolution: {integrity: sha512-DAHKb/L9ELwjY4nCf/MP/mIllHOn4GQe7RR4x8AMJuNeh9nGRRoo1uPxrxMmUL/bKqe6kDmDbIZ2AlhlqyIJuw==}
+    peerDependencies:
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
+  '@v-c/async-validator@1.0.1':
+    resolution: {integrity: sha512-2WXdbTso13119ZLiwUv1JkmdL0K4ll69id4oE3ft3LQX+YAHOoJtfx080u26lLtypgZS32PguoohgB0BVo39rg==}
+
+  '@v-c/cascader@1.0.3':
+    resolution: {integrity: sha512-TaXkWxP3N6LW1yezeN+91k7BFYDSsWj1Y1ujWv51I0lJY4l0iwtjKDDmLLMYoqtUjnW1Onz1g1h6PtiDFALcXQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/checkbox@1.0.1':
+    resolution: {integrity: sha512-+QsE/0VfU6oeglwuHWYxRNTn3+eV08iG0uN/upDmqSGznezInzfUClh+t4acd/OxyJVtuob0WKsg/vPlT6WRWw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/collapse@1.0.0':
+    resolution: {integrity: sha512-y4NAl3j4mka193ZMDLHdISA8to61qoROG6/kTQ0myM2ZuEsonnEK1QWlqoEw3gveMsa6a4RdyoXLxdGdcJyp0Q==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/color-picker@1.0.6':
+    resolution: {integrity: sha512-XiTlEMG5p5jkCdKP7nbeo9EJrpdXnoW4uBOA2us8pVgA6m0GxrwMoCg//X+1XsuOaebG/1Swo65mjRuMBM6rZg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/dialog@1.0.3':
+    resolution: {integrity: sha512-NfeuaHC1PPaRyekoXN6G9AjRL5L9eQiV9tnkRp62GyCfZsHMFgdwlREW6buHifHe7dk4z/ilvGms5tnbw63R4A==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/drawer@1.0.6':
+    resolution: {integrity: sha512-nW8rCsf7viUsTo+8SAfqcNDO4B0GC4n2VidHV4kJzbERrMvMsHVpDz1LO+UFgLs8Mn9EjpQm40JtF6d/BNkW0g==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/dropdown@1.0.2':
+    resolution: {integrity: sha512-D6TACf3jUiRWx4xW5h2+wVT9SMYxUasFlAHESYJr4ZMjLTLLM1Q8iBjkjhGF+vA0eYR5zqRTwlaacN0DNDZBPw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/image@1.0.11':
+    resolution: {integrity: sha512-BkvIkEcP2M25fvNCEMcWX7hk+gFtk6Vg6V08wtoQZmvt/0shl3uS5q+4/NxJFOOjtMzWAkmGreRcqzfsOE/ptw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/input-number@1.0.5':
+    resolution: {integrity: sha512-YQBpV1KnuYf0o2XrbC+OEyP6lkyqv1XhzDVh3QhHO2bs/Jr3uSD8b3cxdEGU+gjoNJUcoZx7XiIzcYhLlvMctw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/input@1.0.3':
+    resolution: {integrity: sha512-vQic9OWfREBlNfJeRcejMcOPhp4xnbHVbqeqo/TfCOf73Ym+zjWXRGXiqM/pIqV9v95zuhYen3KzMeJYM4pViA==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/mentions@1.0.0':
+    resolution: {integrity: sha512-trkG1lvfiaIY7UnHn0gx6B01o3rFLEMin3KGp1q4oU6zOCRWde4ejZ+EHSvmXzOz2N+FlRMTE4EMJFi4w0oOlQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/menu@1.0.14':
+    resolution: {integrity: sha512-AzAbKJ69svJ1F7FLfY6FZ2Qn7fofgvq4DF7gp2fEPOd6CZ70+qM9ZPHDsW0SXukaYcIVH1tcSf+HkiC+7BCwRw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/mini-decimal@1.0.1':
+    resolution: {integrity: sha512-76wZLdlkI017iDlaZMNOWZyDCv29YVabUJn5urQgIKtW4dnI5AkNXWtmLyhl/mu/OS7ZGisRi5ai/558QhLQxQ==}
+
+  '@v-c/mutate-observer@1.0.1':
+    resolution: {integrity: sha512-84+9KGORX8LY9u+K0DEGyRwRCJaky0sjRkXxBC7X/jahHJl8NQGQ0Gxve5IVwaxRTfZ9eftlRmHs90JD6Utfqg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/notification@1.0.0':
+    resolution: {integrity: sha512-aU5g+ZiYxp0KVdKuho067wJRF38Mv7MrQS95dwSJLsbDmVFBpjO3Lo3ptakfPkwn+7uwRytHKIf39t9QVGk+sg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/overflow@1.0.4':
+    resolution: {integrity: sha512-27vuUWoLUz/WeUzYVubfVZ4YtthKCQ1FskYw2VIQw6ECnuTxG1yjj2UdSIoEunZFdU03VU1wU9DI6Qu0Vcp1tQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/overflow@1.0.5':
+    resolution: {integrity: sha512-Ae5aSZItOQHYzscs5JcmLPBLLEkpCS6c8IcHv9jABH0lZZGlZiUF4WBkAvSSnU8Q9f14BJ6dEb5XLwbwpyTZEQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/pagination@1.0.0':
+    resolution: {integrity: sha512-uYIMkvHKMtY+nwHTu5rXxiq6KPf0zGpZbtQTn1nDPng0tOyA1vLQ+R6OfE+1LOwuQqvFTEDnAq4vb90By+eBfw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/picker@1.0.4':
+    resolution: {integrity: sha512-B98FSgE+Kh6lNwa5msySFL8NNiF3fFkmFuuL14WEdb4f6q47XYH7YvcQa2jySXnbYPKHdykZMFo37f/0BzFaPw==}
+    peerDependencies:
+      date-fns: '>= 2.x'
+      dayjs: '>= 1.x'
+      luxon: '>= 3.x'
+      moment: '>= 2.x'
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      date-fns:
+        optional: true
+      dayjs:
+        optional: true
+      luxon:
+        optional: true
+      moment:
+        optional: true
+
+  '@v-c/portal@1.0.8':
+    resolution: {integrity: sha512-93elruWfHKrdtRkpFBNpi47YhQjA75tCuG8C/WvcQ9x/dp+H3i+y7h6t0iyyDjZu1w3d2U5+d43vtslmoQXBYg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/progress@1.0.0':
+    resolution: {integrity: sha512-kWDTU1uXnPDMmoezwyAECxuSH+WKn92OjSdk/GgDbQgZ0qNy9woOiRe5fOsrcy61agHdJxzf0MvsUy1b6bZVlA==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/qrcode@1.0.0':
+    resolution: {integrity: sha512-OSMrYDhP/NQiUcO6J0X2X8BskHPRqX/E/F9npH3oayZgjCo5Aom+63Ja3J0u6SOmKP1JgLSgjrm5karc0671jw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/rate@1.0.1':
+    resolution: {integrity: sha512-ZWWY01LeKu9S/JncdvSr2gz2Kwwum3bB/AxzzCsuhCyg+9P4BLwX7S2WZDMiJ92uYEpiYladVTCa9XdSCPaCaQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/resize-observer@1.0.8':
+    resolution: {integrity: sha512-VH8WBsNfZA5KQ+CXVaQ1PK5B6FIHnuTdqOLrjRWiZTrIYDZi/MyREi9b21YDj55fbFWMRx4yapnO9tiZX1RNxA==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/segmented@1.0.2':
+    resolution: {integrity: sha512-g/aWgURMJkytu05AACN3Pd9QKgka4ZQM8tl/y0AcabANldy2hmPIHek0ZH5dDdn5VmK1PhAfUTqtgDS19sLh5w==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/select@1.0.20':
+    resolution: {integrity: sha512-gmG5U7r8YgXIjGQZ5qjHM3felSlYAep7pBjJRzA8ALgHhx0CKRk6RTadVDXzWh7LwOFvlgTn7OLUMTU6RACoaQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/slick@1.0.2':
+    resolution: {integrity: sha512-8BbPxJgYST+tio9jyeFQgJb/3XSFhfWZN8Am7YVYeqsYsvn3g8wu61UZNSjlkp9ArOEe+ujOgX4izfDHeXh4RA==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/slider@1.0.10':
+    resolution: {integrity: sha512-KMIVytBm8K8RQ+aPPraS28GmBptGHESF/gDRbGjOLD7xyivuQDJeEqVaUFY3EcCWsERjh4VP/L96gUbMTF0uag==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/steps@1.0.0':
+    resolution: {integrity: sha512-DPL0OOb8pDLlTPZB93b8+Saxiz6V5zEpGXKaCnsbXUuOhimkc7089AuEKfpMw+8x1SrVe+gapWf5RRHWXUm2pg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/switch@1.0.0':
+    resolution: {integrity: sha512-VIem244KJkYfqDgofpgHjK00sGL9rJ/9OtmK4Gbs4hnPsrTtzHDBRltYxR4IT7HQleathZfj6NhcZ1bjdWKYUw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/table@1.0.7':
+    resolution: {integrity: sha512-vdJE9/gm3KRfDfgWM5O5jKNBwYB/PbS6yQ2TkiMwTmKjOHnaiSIRPJd++X7jCSchi46nU1shNDmqHf3Pw3Y9mg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/tabs@1.0.2':
+    resolution: {integrity: sha512-FA/lG5TaYOVFhB3WjJ2x6O8egREm9FWdfEbnY1Tmg3D1avkxYDhISHlW4ot3NvWb8Ds4MxBe0T9xg206o0LHEw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/textarea@1.0.4':
+    resolution: {integrity: sha512-VrQrLjKsiFh3bngXDULK+mUI4RmTT0hqDOUChsGmo5dZGgcmzsDbVLFluYCvpV+InUsnn2jGSQEuqMQy1Vga+g==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/tooltip@1.0.3':
+    resolution: {integrity: sha512-72EkTfhb67RPJvMXIW6HUYiZ+Jdrb7tBQmS3wDtFDNU7uIrS5DQLyXJDCu9qWlrPv7cQ/RHA4JfCINw88vchzw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/tour@1.0.3':
+    resolution: {integrity: sha512-y4DVJPP7jvL+MWUMAKQWxLAMXSWJEfZXaKASPn3DKbSQ8drBhsjMXwcep3glAfrCjCKfj/QD3OrUMxqydi4qFw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/tree-select@1.0.3':
+    resolution: {integrity: sha512-N4mK8JXrCU+GFfhLG/zat3TAUt0Ju+P4S3hN6PlmuHPikQ4OWEA91CA8Br83i4zpW9TCH7xP0EfMUvhLtjqbsA==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/tree@1.0.6':
+    resolution: {integrity: sha512-NrFtKD4DmUM/4GyBWYQuAJkgDfOhlBUV6Z4slleGj4yxmwU3fRBvoDYVNtrqfP8GmNRY/9IHA8c2FfidvKys8g==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/trigger@1.0.14':
+    resolution: {integrity: sha512-3flCLvHvW2fJ8Rg/m4kCk7UGtL9GsrPgeSbdQJ1FU5+sZmfT2bcPwQZM824e7VFLmgaYPLiaQOL3l46uEPFWLw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/upload@1.0.0':
+    resolution: {integrity: sha512-W92PNCD61aM/B5w8oUzHQSDHur1T8484726Ls0IoNMO5nPiF/15eEE3RuuI/t7xXQVP/fA06hNSwzXwGWdDg1w==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/util@1.0.19':
+    resolution: {integrity: sha512-apJGS4BVzhXbrNR6jxXF18jAiOWIn/UNmGjgSvB5r4ba9Wr/ireKCfJvhuuNsZi+scLaM0W3ghB81PbQ5vwoJg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@v-c/virtual-list@1.0.7':
+    resolution: {integrity: sha512-zoINTbsUh7VNGHEAZnY/TZRWBmL7lhFxr1bwK6KxP+3CJSIG26b2jTQFzfdr/qq4CrmLcmpcW2jlHass7PAMAg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@vitejs/plugin-vue@6.0.5':
+    resolution: {integrity: sha512-bL3AxKuQySfk1iGcBsQnoRVexTPJq0Z/ixFVM8OhVJAP6ZXXXLtM7NFKWhLl30Kg7uTBqIaPXbh+nuQCuBDedg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      vue: ^3.2.25
+
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+
+  '@vue-macros/common@3.1.2':
+    resolution: {integrity: sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.2.25
+    peerDependenciesMeta:
+      vue:
+        optional: true
+
+  '@vue/compiler-core@3.5.30':
+    resolution: {integrity: sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw==}
+
+  '@vue/compiler-core@3.5.33':
+    resolution: {integrity: sha512-3PZLQwFw4Za3TC8t0FvTy3wI16Kt+pmwcgNZca4Pj9iWL2E72a/gZlpBtAJvEdDMdCxdG/qq0C7PN0bsJuv0Rw==}
+
+  '@vue/compiler-dom@3.5.30':
+    resolution: {integrity: sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g==}
+
+  '@vue/compiler-dom@3.5.33':
+    resolution: {integrity: sha512-PXq0yrfCLzzL07rbXO4awtXY1Z06LG2eu6Adg3RJFa/j3Cii217XxxLXG22N330gw7GmALCY0Z8RgXEviwgpjA==}
+
+  '@vue/compiler-sfc@3.5.30':
+    resolution: {integrity: sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A==}
+
+  '@vue/compiler-sfc@3.5.33':
+    resolution: {integrity: sha512-UTUvRO9cY+rROrx/pvN9P5Z7FgA6QGfokUCfhQE4EnmUj3rVnK+CHI0LsEO1pg+I7//iRYMUfcNcCPe7tg0CoA==}
+
+  '@vue/compiler-ssr@3.5.30':
+    resolution: {integrity: sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA==}
+
+  '@vue/compiler-ssr@3.5.33':
+    resolution: {integrity: sha512-IErjYdnj1qIupG5xxiVIYiiRvDhGWV4zuh/RCrwfYpuL+HWQzeU6lCk/nF9r7olWMnjKxCAkOctT2qFWFkzb1A==}
+
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
+  '@vue/devtools-api@7.7.9':
+    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
+
+  '@vue/devtools-api@8.1.0':
+    resolution: {integrity: sha512-O44X57jjkLKbLEc4OgL/6fEPOOanRJU8kYpCE8qfKlV96RQZcdzrcLI5mxMuVRUeXhHKIHGhCpHacyCk0HyO4w==}
+
+  '@vue/devtools-kit@7.7.9':
+    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
+
+  '@vue/devtools-kit@8.1.0':
+    resolution: {integrity: sha512-/NZlS4WtGIB54DA/z10gzk+n/V7zaqSzYZOVlg2CfdnpIKdB61bd7JDIMxf/zrtX41zod8E2/bbEBoW/d7x70Q==}
+
+  '@vue/devtools-shared@7.7.9':
+    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
+
+  '@vue/devtools-shared@8.1.0':
+    resolution: {integrity: sha512-h8uCb4Qs8UT8VdTT5yjY6tOJ//qH7EpxToixR0xqejR55t5OdISIg7AJ7eBkhBs8iu1qG5gY3QQNN1DF1EelAA==}
+
+  '@vue/language-core@3.2.7':
+    resolution: {integrity: sha512-Gn4q/tRxbpVGLEuARQ43p3YELlNAFgRUVCgW9U5Cr+5q4vfD2bWDWpl3ABbJMXUt5xlE1dF8dkigg2aUq7JYYw==}
+
+  '@vue/reactivity@3.5.33':
+    resolution: {integrity: sha512-p8UfIqyIhb0rYGlSgSBV+lPhF2iUSBcRy7enhTmPqKWadHy9kcOFYF1AejYBP9P+avnd3OBbD49DU4pLWX/94A==}
+
+  '@vue/runtime-core@3.5.33':
+    resolution: {integrity: sha512-UpFF45RI9//a7rvq7RdOQblb4tup7hHG9QsmIrxkFQLzQ7R8/iNQ5LE15NhLZ1/WcHMU2b47u6P33CPUelHyIQ==}
+
+  '@vue/runtime-dom@3.5.33':
+    resolution: {integrity: sha512-IOxMsAOwquhfITgmOgaPYl7/j8gKUxUFoflRc+u4LxyD3+783xne8vNta1PONVCvCV9A0w7hkyEepINDqfO0tw==}
+
+  '@vue/server-renderer@3.5.33':
+    resolution: {integrity: sha512-0xylq/8/h44lVG0pZFknv1XIdEgymq2E9n59uTWJBG+dIgiT0TMCSsxrN7nO16Z0MU0MPjFcguBbZV8Itk52Hw==}
+    peerDependencies:
+      vue: 3.5.33
+
+  '@vue/shared@3.5.30':
+    resolution: {integrity: sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==}
+
+  '@vue/shared@3.5.33':
+    resolution: {integrity: sha512-5vR2QIlmaLG77Ygd4pMP6+SGQ5yox9VhtnbDWTy9DzMzdmeLxZ1QqxrywEZ9sa1AVubfIJyaCG3ytyWU81ufcQ==}
+
+  '@vueuse/core@14.2.1':
+    resolution: {integrity: sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/metadata@14.2.1':
+    resolution: {integrity: sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==}
+
+  '@vueuse/shared@14.2.1':
+    resolution: {integrity: sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  alien-signals@3.1.2:
+    resolution: {integrity: sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==}
+
+  ansis@4.2.0:
+    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
+    engines: {node: '>=14'}
+
+  antdv-next@1.2.2:
+    resolution: {integrity: sha512-sJETcuCpWnE2Nf4oSYZf424d1Y7ngnl2c+mMraHE4R6qZZHxXg2VuSF5MzhSBa16obz5blhqKjXMiyAWCZWIHg==}
+
+  asap@2.0.6:
+    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
+
+  ast-kit@2.2.0:
+    resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
+    engines: {node: '>=20.19.0'}
+
+  ast-walker-scope@0.8.3:
+    resolution: {integrity: sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==}
+    engines: {node: '>=20.19.0'}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.15.2:
+    resolution: {integrity: sha512-wLrXxPtcrPTsNlJmKjkPnNPK2Ihe0hn0wGSaTEiHRPxwjvJwT3hKmXF4dpqxmPO9SoNb2FsYXj/xEo0gHN+D5A==}
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  co-body@6.2.0:
+    resolution: {integrity: sha512-Kbpv2Yd1NdL1V/V4cwLVxraHDV6K8ayohr2rmH0J87Er8+zJjcTa6dAn9QMPC9CRgU8+aNajKbSf1TzDB1yKPA==}
+    engines: {node: '>=8.0.0'}
+
+  codemirror@6.0.2:
+    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
+  compute-scroll-into-view@3.1.1:
+    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
+  copy-anything@4.0.5:
+    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
+    engines: {node: '>=18'}
+
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
+    engines: {node: '>= 0.10'}
+
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  dayjs@1.11.20:
+    resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  dezalgo@1.0.4:
+    resolution: {integrity: sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==}
+
+  dompurify@3.3.3:
+    resolution: {integrity: sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
+  enhanced-resolve@5.20.0:
+    resolution: {integrity: sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==}
+    engines: {node: '>=10.13.0'}
+
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-toolkit@1.45.1:
+    resolution: {integrity: sha512-/jhoOj/Fx+A+IIyDNOvO3TItGmlMKhtX8ISAHKE90c4b/k1tqaqEZ+uUqfpU8DMnW5cgNJv606zS55jGvza0Xw==}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
+  formidable@3.5.4:
+    resolution: {integrity: sha512-YikH+7CUTOtP44ZTnUhR7Ic2UASBPOqmaRkRKxRbywPTe5VxF7RRCck4af9wutiZ/QKM5nME9Bie2fFaPz5Gug==}
+    engines: {node: '>=14.0.0'}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  http-status@2.1.0:
+    resolution: {integrity: sha512-O5kPr7AW7wYd/BBiOezTwnVAnmSNFY+J7hlZD2X5IOxVBetjcHAiTXhzj0gMrnojQlwy+UT1/Y3H3vJ3UlmvLA==}
+    engines: {node: '>= 0.4.0'}
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  immutable@5.1.5:
+    resolution: {integrity: sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==}
+
+  inflation@2.1.0:
+    resolution: {integrity: sha512-t54PPJHG1Pp7VQvxyVCJ9mBbjG3Hqryges9bXoOO6GExCPa+//i/d5GSuFtpx3ALLd7lgIAur6zrIlBQyJuMlQ==}
+    engines: {node: '>= 0.8.0'}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-what@5.5.0:
+    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
+    engines: {node: '>=18'}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  katex@0.16.38:
+    resolution: {integrity: sha512-cjHooZUmIAUmDsHBN+1n8LaZdpmbj03LtYeYPyuYB7OuloiaeaV6N4LcfjcnHVzGWjVQmKrxxTrpDcmSzEZQwQ==}
+    hasBin: true
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  linkifyjs@4.3.2:
+    resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
+
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  magic-string-ast@1.0.3:
+    resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
+    engines: {node: '>=20.19.0'}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-definitions@6.0.0:
+    resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.3:
+    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-math@3.0.0:
+    resolution: {integrity: sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-extension-math@3.1.0:
+    resolution: {integrity: sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  mlly@1.8.1:
+    resolution: {integrity: sha512-SnL6sNutTwRWWR/vcmCYHSADjiEesp5TGQQ0pXyLhW5IoeibRlF/CbSLailbB3CNqJUk9cVJ9dUDnbD7GrcHBQ==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@5.1.6:
+    resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
+  oxfmt@0.43.0:
+    resolution: {integrity: sha512-KTYNG5ISfHSdmeZ25Xzb3qgz9EmQvkaGAxgBY/p38+ZiAet3uZeu7FnMwcSQJg152Qwl0wnYAxDc+Z/H6cvrwA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  oxlint@1.62.0:
+    resolution: {integrity: sha512-1uFkg6HakjsGIpW9wNdeW4/2LOHW9MEkoWjZUTUfQtIHyLIZPYt00w3Sg+H3lH+206FgBPHBbW5dVE5l2ExECQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=0.18.0'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-to-regexp@8.3.0:
+    resolution: {integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
+  perfect-debounce@2.1.0:
+    resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  pinia@3.0.4:
+    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
+    peerDependencies:
+      typescript: '>=4.5.0'
+      vue: ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  pinyin-pro@3.28.0:
+    resolution: {integrity: sha512-mMRty6RisoyYNphJrTo3pnvp3w8OMZBrXm9YSWkxhAfxKj1KZk2y8T2PDIZlDDRsvZ0No+Hz6FI4sZpA6Ey25g==}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
+  postcss@8.5.12:
+    resolution: {integrity: sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.8:
+    resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
+  prosemirror-changeset@2.4.0:
+    resolution: {integrity: sha512-LvqH2v7Q2SF6yxatuPP2e8vSUKS/L+xAU7dPDC4RMyHMhZoGDfBC74mYuyYF4gLqOEG758wajtyhNnsTkuhvng==}
+
+  prosemirror-commands@1.7.1:
+    resolution: {integrity: sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==}
+
+  prosemirror-drop-indicator@0.1.3:
+    resolution: {integrity: sha512-fJV6G2tHIVXZLUuc60fS9ly1/GuGOlAZUm67S1El+kGFUYh27Hyv6hcGx3rrJ+Q/JZL5jnyAibIZYYWpPqE45g==}
+
+  prosemirror-dropcursor@1.8.2:
+    resolution: {integrity: sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==}
+
+  prosemirror-gapcursor@1.4.1:
+    resolution: {integrity: sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==}
+
+  prosemirror-history@1.5.0:
+    resolution: {integrity: sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==}
+
+  prosemirror-inputrules@1.5.1:
+    resolution: {integrity: sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==}
+
+  prosemirror-keymap@1.2.3:
+    resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
+
+  prosemirror-model@1.25.4:
+    resolution: {integrity: sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==}
+
+  prosemirror-safari-ime-span@1.0.2:
+    resolution: {integrity: sha512-QJqD8s1zE/CuK56kDsUhndh5hiHh/gFnAuPOA9ytva2s85/ZEt2tNWeALTJN48DtWghSKOmiBsvVn2OlnJ5H2w==}
+
+  prosemirror-schema-list@1.5.1:
+    resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==}
+
+  prosemirror-state@1.4.4:
+    resolution: {integrity: sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==}
+
+  prosemirror-tables@1.8.5:
+    resolution: {integrity: sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==}
+
+  prosemirror-transform@1.11.0:
+    resolution: {integrity: sha512-4I7Ce4KpygXb9bkiPS3hTEk4dSHorfRw8uI0pE8IhxlK2GXsqv5tIA7JUSxtSu7u8APVOTtbUBxTmnHIxVkIJw==}
+
+  prosemirror-view@1.41.6:
+    resolution: {integrity: sha512-mxpcDG4hNQa/CPtzxjdlir5bJFDlm0/x5nGBbStB2BWX+XOQ9M8ekEG+ojqB5BcVu2Rc80/jssCMZzSstJuSYg==}
+
+  prosemirror-virtual-cursor@0.4.2:
+    resolution: {integrity: sha512-pUMKnIuOhhnMcgIJUjhIQTVJruBEGxfMBVQSrK0g2qhGPDm1i12KdsVaFw15dYk+29tZcxjMeR7P5VDKwmbwJg==}
+    peerDependencies:
+      prosemirror-model: ^1.0.0
+      prosemirror-state: ^1.0.0
+      prosemirror-view: ^1.0.0
+    peerDependenciesMeta:
+      prosemirror-model:
+        optional: true
+      prosemirror-state:
+        optional: true
+      prosemirror-view:
+        optional: true
+
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
+
+  qs@6.15.0:
+    resolution: {integrity: sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==}
+    engines: {node: '>=0.6'}
+
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
+  raw-body@2.5.3:
+    resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
+    engines: {node: '>= 0.8'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
+  refractor@5.0.0:
+    resolution: {integrity: sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-inline-links@7.0.0:
+    resolution: {integrity: sha512-4uj1pPM+F495ySZhTIB6ay2oSkTsKgmYaKk/q5HIdhX2fuyLEegpjWa0VdJRJ01sgOqAFo7MBKdDUejIYBMVMQ==}
+
+  remark-math@6.0.0:
+    resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  remark@15.0.1:
+    resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==}
+
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rolldown@1.0.0-rc.17:
+    resolution: {integrity: sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sass@1.98.0:
+    resolution: {integrity: sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  sortablejs@1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+
+  superjson@2.2.6:
+    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
+    engines: {node: '>=16'}
+
+  tailwindcss@4.2.4:
+    resolution: {integrity: sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@2.1.0:
+    resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.3:
+    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-remove-position@5.0.0:
+    resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  unplugin-utils@0.3.1:
+    resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
+    engines: {node: '>=20.19.0'}
+
+  unplugin@3.0.0:
+    resolution: {integrity: sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  vite-plugin-mock-dev-server@2.1.1:
+    resolution: {integrity: sha512-N49IFCZvy6PJY8VjJjYD8tuA7BJc5OgTLZmR83UrjFgRcQKPo0t4jPzVijalFtwA0P9v0apLXkVeNcZKytX6EQ==}
+    engines: {node: ^20 || >=22}
+    peerDependencies:
+      esbuild: '>=0.21.0'
+      rolldown: '>=1.0.0-beta.1'
+      vite: '>=5.0.0'
+      zstd-codec: '>=0.1.5'
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rolldown:
+        optional: true
+      zstd-codec:
+        optional: true
+
+  vite@8.0.10:
+    resolution: {integrity: sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.1.0
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-codemirror@6.1.1:
+    resolution: {integrity: sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==}
+    peerDependencies:
+      codemirror: 6.x
+      vue: 3.x
+
+  vue-echarts@8.0.1:
+    resolution: {integrity: sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==}
+    peerDependencies:
+      echarts: ^6.0.0
+      vue: ^3.3.0
+
+  vue-i18n@11.3.0:
+    resolution: {integrity: sha512-1J+xDfDJTLhDxElkd3+XUhT7FYSZd2b8pa7IRKGxhWH/8yt6PTvi3xmWhGwhYT5EaXdatui11pF2R6tL73/zPA==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-router@5.0.6:
+    resolution: {integrity: sha512-9+kmUTGbKMyW9Asoy98IXXYIzrTMT7JDAdpDDeEkorHvybpUvBI2wsrSM5jFOXrFydpzRFJ9vAh+80DN2PGu9w==}
+    peerDependencies:
+      '@pinia/colada': '>=0.21.2'
+      '@vue/compiler-sfc': ^3.5.17
+      pinia: ^3.0.4
+      vue: ^3.5.0
+    peerDependenciesMeta:
+      '@pinia/colada':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      pinia:
+        optional: true
+
+  vue-tsc@3.2.7:
+    resolution: {integrity: sha512-zc1tL3HoQni1zGTGrwBVRQb7rGP5SWdu/m4rGB6JcnAC5MT5LFZIxF7Y+EJEnt4hGF23d60rXH7gRjHGb5KQQQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue@3.5.33:
+    resolution: {integrity: sha512-1AgChhx5w3ALgT4oK3acm2Es/7jyZhWSVUfs3rOBlGQC0rjEDkS7G4lWlJJGGNQD+BV3reCwbQrOe1mPNwKHBQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vuedraggable@4.1.0:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  ws@8.20.0:
+    resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  yaml@2.8.2:
+    resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@ant-design/colors@7.2.1':
+    dependencies:
+      '@ant-design/fast-color': 2.0.6
+
+  '@ant-design/colors@8.0.1':
+    dependencies:
+      '@ant-design/fast-color': 3.0.1
+
+  '@ant-design/fast-color@2.0.6':
+    dependencies:
+      '@babel/runtime': 7.28.6
+
+  '@ant-design/fast-color@3.0.1': {}
+
+  '@ant-design/icons-svg@4.4.2': {}
+
+  '@antdv-next/cssinjs@1.0.6(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@emotion/hash': 0.8.0
+      '@emotion/unitless': 0.7.5
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      csstype: 3.2.3
+      stylis: 4.3.6
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@antdv-next/icons@1.0.6(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@ant-design/colors': 7.2.1
+      '@ant-design/icons-svg': 4.4.2
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/parser@7.29.2':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/runtime@7.28.6': {}
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@codemirror/autocomplete@6.20.1':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.1
+
+  '@codemirror/commands@6.10.3':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.1
+
+  '@codemirror/lang-angular@0.1.4':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/language': 6.12.3
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-cpp@6.0.3':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@lezer/cpp': 1.1.5
+
+  '@codemirror/lang-css@6.3.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@lezer/common': 1.5.1
+      '@lezer/css': 1.3.1
+
+  '@codemirror/lang-go@6.0.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@lezer/common': 1.5.1
+      '@lezer/go': 1.0.1
+
+  '@codemirror/lang-html@6.4.11':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.1
+      '@lezer/css': 1.3.1
+      '@lezer/html': 1.3.13
+
+  '@codemirror/lang-java@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@lezer/java': 1.1.3
+
+  '@codemirror/lang-javascript@6.2.5':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/language': 6.12.3
+      '@codemirror/lint': 6.9.5
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.1
+      '@lezer/javascript': 1.5.4
+
+  '@codemirror/lang-jinja@6.0.0':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.3
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-json@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@lezer/json': 1.0.3
+
+  '@codemirror/lang-less@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.12.3
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-liquid@6.3.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-markdown@6.5.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.1
+      '@lezer/markdown': 1.6.3
+
+  '@codemirror/lang-php@6.0.2':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@lezer/common': 1.5.1
+      '@lezer/php': 1.0.5
+
+  '@codemirror/lang-python@6.2.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@lezer/common': 1.5.1
+      '@lezer/python': 1.1.18
+
+  '@codemirror/lang-rust@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@lezer/rust': 1.0.2
+
+  '@codemirror/lang-sass@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@lezer/common': 1.5.1
+      '@lezer/sass': 1.1.0
+
+  '@codemirror/lang-sql@6.10.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-vue@0.1.3':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/language': 6.12.3
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-wast@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-xml@6.1.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.1
+      '@lezer/xml': 1.0.6
+
+  '@codemirror/lang-yaml@6.1.3':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+      '@lezer/yaml': 1.0.4
+
+  '@codemirror/language-data@6.5.2':
+    dependencies:
+      '@codemirror/lang-angular': 0.1.4
+      '@codemirror/lang-cpp': 6.0.3
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-go': 6.0.1
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-java': 6.0.2
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/lang-jinja': 6.0.0
+      '@codemirror/lang-json': 6.0.2
+      '@codemirror/lang-less': 6.0.2
+      '@codemirror/lang-liquid': 6.3.2
+      '@codemirror/lang-markdown': 6.5.0
+      '@codemirror/lang-php': 6.0.2
+      '@codemirror/lang-python': 6.2.1
+      '@codemirror/lang-rust': 6.0.2
+      '@codemirror/lang-sass': 6.0.2
+      '@codemirror/lang-sql': 6.10.0
+      '@codemirror/lang-vue': 0.1.3
+      '@codemirror/lang-wast': 6.0.2
+      '@codemirror/lang-xml': 6.1.0
+      '@codemirror/lang-yaml': 6.1.3
+      '@codemirror/language': 6.12.3
+      '@codemirror/legacy-modes': 6.5.2
+
+  '@codemirror/language@6.12.3':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+      style-mod: 4.1.3
+
+  '@codemirror/legacy-modes@6.5.2':
+    dependencies:
+      '@codemirror/language': 6.12.3
+
+  '@codemirror/lint@6.9.5':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      crelt: 1.0.6
+
+  '@codemirror/search@6.6.0':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      crelt: 1.0.6
+
+  '@codemirror/state@6.6.0':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/theme-one-dark@6.1.3':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/highlight': 1.2.3
+
+  '@codemirror/view@6.41.1':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      crelt: 1.0.6
+      style-mod: 4.1.3
+      w3c-keyname: 2.2.8
+
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emotion/hash@0.8.0': {}
+
+  '@emotion/unitless@0.7.5': {}
+
+  '@faker-js/faker@10.4.0': {}
+
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@hapi/bourne@3.0.0': {}
+
+  '@iconify-json/ion@1.2.7':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/mdi@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ri@1.2.10':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/vue@5.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@intlify/core-base@11.3.0':
+    dependencies:
+      '@intlify/devtools-types': 11.3.0
+      '@intlify/message-compiler': 11.3.0
+      '@intlify/shared': 11.3.0
+
+  '@intlify/devtools-types@11.3.0':
+    dependencies:
+      '@intlify/core-base': 11.3.0
+      '@intlify/shared': 11.3.0
+
+  '@intlify/message-compiler@11.3.0':
+    dependencies:
+      '@intlify/shared': 11.3.0
+      source-map-js: 1.2.1
+
+  '@intlify/shared@11.3.0': {}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@lezer/common@1.5.1': {}
+
+  '@lezer/cpp@1.1.5':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/css@1.3.1':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/go@1.0.1':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.5.1
+
+  '@lezer/html@1.3.13':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/java@1.1.3':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/javascript@1.5.4':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/lr@1.4.8':
+    dependencies:
+      '@lezer/common': 1.5.1
+
+  '@lezer/markdown@1.6.3':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+
+  '@lezer/php@1.0.5':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/python@1.1.18':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/rust@1.0.2':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/sass@1.1.0':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/xml@1.0.6':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/yaml@1.0.4':
+    dependencies:
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@marijn/find-cluster-break@1.0.2': {}
+
+  '@milkdown/components@7.20.0(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)(typescript@6.0.3)':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@floating-ui/dom': 1.7.6
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/exception': 7.20.0
+      '@milkdown/plugin-tooltip': 7.20.0
+      '@milkdown/preset-commonmark': 7.20.0
+      '@milkdown/preset-gfm': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/transformer': 7.20.0
+      '@milkdown/utils': 7.20.0
+      '@types/lodash-es': 4.17.12
+      clsx: 2.1.1
+      dompurify: 3.3.3
+      lodash-es: 4.18.1
+      nanoid: 5.1.6
+      unist-util-visit: 5.1.0
+      vue: 3.5.33(typescript@6.0.3)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@milkdown/core@7.20.0':
+    dependencies:
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/exception': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/transformer': 7.20.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/crepe@7.20.0(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.6)(typescript@6.0.3)':
+    dependencies:
+      '@codemirror/commands': 6.10.3
+      '@codemirror/language': 6.12.3
+      '@codemirror/language-data': 6.5.2
+      '@codemirror/state': 6.6.0
+      '@codemirror/theme-one-dark': 6.1.3
+      '@codemirror/view': 6.41.1
+      '@milkdown/kit': 7.20.0(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)(typescript@6.0.3)
+      '@types/lodash-es': 4.17.12
+      clsx: 2.1.1
+      codemirror: 6.0.2
+      katex: 0.16.38
+      lodash-es: 4.18.1
+      prosemirror-virtual-cursor: 0.4.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.6)
+      remark-math: 6.0.0
+      unist-util-visit: 5.1.0
+      vue: 3.5.33(typescript@6.0.3)
+    transitivePeerDependencies:
+      - prosemirror-model
+      - prosemirror-state
+      - prosemirror-view
+      - supports-color
+      - typescript
+
+  '@milkdown/ctx@7.20.0':
+    dependencies:
+      '@milkdown/exception': 7.20.0
+
+  '@milkdown/exception@7.20.0': {}
+
+  '@milkdown/kit@7.20.0(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)(typescript@6.0.3)':
+    dependencies:
+      '@milkdown/components': 7.20.0(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)(typescript@6.0.3)
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/plugin-block': 7.20.0
+      '@milkdown/plugin-clipboard': 7.20.0
+      '@milkdown/plugin-cursor': 7.20.0
+      '@milkdown/plugin-history': 7.20.0
+      '@milkdown/plugin-indent': 7.20.0
+      '@milkdown/plugin-listener': 7.20.0
+      '@milkdown/plugin-slash': 7.20.0
+      '@milkdown/plugin-tooltip': 7.20.0
+      '@milkdown/plugin-trailing': 7.20.0
+      '@milkdown/plugin-upload': 7.20.0
+      '@milkdown/preset-commonmark': 7.20.0
+      '@milkdown/preset-gfm': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/transformer': 7.20.0
+      '@milkdown/utils': 7.20.0
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+      - supports-color
+      - typescript
+
+  '@milkdown/plugin-block@7.20.0':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+      '@types/lodash-es': 4.17.12
+      lodash-es: 4.18.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-clipboard@7.20.0':
+    dependencies:
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-cursor@7.20.0':
+    dependencies:
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+      prosemirror-drop-indicator: 0.1.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-history@7.20.0':
+    dependencies:
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-indent@7.20.0':
+    dependencies:
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-listener@7.20.0':
+    dependencies:
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@types/lodash-es': 4.17.12
+      lodash-es: 4.18.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-prism@7.20.0':
+    dependencies:
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+      '@types/hast': 3.0.4
+      refractor: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-slash@7.20.0':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+      '@types/lodash-es': 4.17.12
+      lodash-es: 4.18.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-tooltip@7.20.0':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+      '@types/lodash-es': 4.17.12
+      lodash-es: 4.18.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-trailing@7.20.0':
+    dependencies:
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/plugin-upload@7.20.0':
+    dependencies:
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/exception': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/utils': 7.20.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/preset-commonmark@7.20.0':
+    dependencies:
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/exception': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/transformer': 7.20.0
+      '@milkdown/utils': 7.20.0
+      remark-inline-links: 7.0.0
+      unist-util-visit: 5.1.0
+      unist-util-visit-parents: 6.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/preset-gfm@7.20.0':
+    dependencies:
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/exception': 7.20.0
+      '@milkdown/preset-commonmark': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/transformer': 7.20.0
+      '@milkdown/utils': 7.20.0
+      prosemirror-safari-ime-span: 1.0.2
+      remark-gfm: 4.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/prose@7.20.0':
+    dependencies:
+      '@milkdown/exception': 7.20.0
+      prosemirror-changeset: 2.4.0
+      prosemirror-commands: 1.7.1
+      prosemirror-dropcursor: 1.8.2
+      prosemirror-gapcursor: 1.4.1
+      prosemirror-history: 1.5.0
+      prosemirror-inputrules: 1.5.1
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.4
+      prosemirror-schema-list: 1.5.1
+      prosemirror-state: 1.4.4
+      prosemirror-tables: 1.8.5
+      prosemirror-transform: 1.11.0
+      prosemirror-view: 1.41.6
+
+  '@milkdown/theme-nord@7.20.0':
+    dependencies:
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/prose': 7.20.0
+      clsx: 2.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/transformer@7.20.0':
+    dependencies:
+      '@milkdown/exception': 7.20.0
+      '@milkdown/prose': 7.20.0
+      remark: 15.0.1
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/utils@7.20.0':
+    dependencies:
+      '@milkdown/core': 7.20.0
+      '@milkdown/ctx': 7.20.0
+      '@milkdown/exception': 7.20.0
+      '@milkdown/prose': 7.20.0
+      '@milkdown/transformer': 7.20.0
+      nanoid: 5.1.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@milkdown/vue@7.20.0(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.6)(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@milkdown/crepe': 7.20.0(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.6)(typescript@6.0.3)
+      '@milkdown/kit': 7.20.0(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)(typescript@6.0.3)
+      vue: 3.5.33(typescript@6.0.3)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+      - prosemirror-model
+      - prosemirror-state
+      - prosemirror-view
+      - supports-color
+      - typescript
+
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@noble/hashes@1.8.0': {}
+
+  '@ocavue/utils@1.5.0': {}
+
+  '@oxc-project/types@0.127.0': {}
+
+  '@oxfmt/binding-android-arm-eabi@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-android-arm64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-arm64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-x64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-freebsd-x64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-musl@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-musl@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-s390x-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-musl@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-openharmony-arm64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-win32-arm64-msvc@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-win32-ia32-msvc@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-win32-x64-msvc@0.43.0':
+    optional: true
+
+  '@oxlint/binding-android-arm-eabi@1.62.0':
+    optional: true
+
+  '@oxlint/binding-android-arm64@1.62.0':
+    optional: true
+
+  '@oxlint/binding-darwin-arm64@1.62.0':
+    optional: true
+
+  '@oxlint/binding-darwin-x64@1.62.0':
+    optional: true
+
+  '@oxlint/binding-freebsd-x64@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-musleabihf@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-gnu@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-musl@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-ppc64-gnu@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-gnu@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-musl@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-s390x-gnu@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-gnu@1.62.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-musl@1.62.0':
+    optional: true
+
+  '@oxlint/binding-openharmony-arm64@1.62.0':
+    optional: true
+
+  '@oxlint/binding-win32-arm64-msvc@1.62.0':
+    optional: true
+
+  '@oxlint/binding-win32-ia32-msvc@1.62.0':
+    optional: true
+
+  '@oxlint/binding-win32-x64-msvc@1.62.0':
+    optional: true
+
+  '@paralleldrive/cuid2@2.3.1':
+    dependencies:
+      '@noble/hashes': 1.8.0
+
+  '@parcel/watcher-android-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher@2.5.6':
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.3
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.6
+      '@parcel/watcher-darwin-arm64': 2.5.6
+      '@parcel/watcher-darwin-x64': 2.5.6
+      '@parcel/watcher-freebsd-x64': 2.5.6
+      '@parcel/watcher-linux-arm-glibc': 2.5.6
+      '@parcel/watcher-linux-arm-musl': 2.5.6
+      '@parcel/watcher-linux-arm64-glibc': 2.5.6
+      '@parcel/watcher-linux-arm64-musl': 2.5.6
+      '@parcel/watcher-linux-x64-glibc': 2.5.6
+      '@parcel/watcher-linux-x64-musl': 2.5.6
+      '@parcel/watcher-win32-arm64': 2.5.6
+      '@parcel/watcher-win32-ia32': 2.5.6
+      '@parcel/watcher-win32-x64': 2.5.6
+    optional: true
+
+  '@pengzhanbo/utils@3.3.1': {}
+
+  '@rolldown/binding-android-arm64@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.17':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.17':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.0-rc.17': {}
+
+  '@rolldown/pluginutils@1.0.0-rc.2': {}
+
+  '@tailwindcss/node@4.2.4':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.0
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.4
+
+  '@tailwindcss/oxide-android-arm64@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.4':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.4
+      '@tailwindcss/oxide-darwin-arm64': 4.2.4
+      '@tailwindcss/oxide-darwin-x64': 4.2.4
+      '@tailwindcss/oxide-freebsd-x64': 4.2.4
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.4
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.4
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.4
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.4
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.4
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.4
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.4
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.4
+
+  '@tailwindcss/vite@4.2.4(vite@8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2))':
+    dependencies:
+      '@tailwindcss/node': 4.2.4
+      '@tailwindcss/oxide': 4.2.4
+      tailwindcss: 4.2.4
+      vite: 8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2)
+
+  '@tiptap/core@3.22.5(@tiptap/pm@3.22.5)':
+    dependencies:
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-blockquote@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-bold@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-bubble-menu@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+      '@tiptap/pm': 3.22.5
+    optional: true
+
+  '@tiptap/extension-bullet-list@3.22.5(@tiptap/extension-list@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/extension-list': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-code-block@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-code@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-document@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-dropcursor@3.22.5(@tiptap/extensions@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/extensions': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-floating-menu@3.22.5(@floating-ui/dom@1.7.6)(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+      '@tiptap/pm': 3.22.5
+    optional: true
+
+  '@tiptap/extension-gapcursor@3.22.5(@tiptap/extensions@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/extensions': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-hard-break@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-heading@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-horizontal-rule@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-image@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-italic@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-link@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+      '@tiptap/pm': 3.22.5
+      linkifyjs: 4.3.2
+
+  '@tiptap/extension-list-item@3.22.5(@tiptap/extension-list@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/extension-list': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-list-keymap@3.22.5(@tiptap/extension-list@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/extension-list': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-list@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/extension-ordered-list@3.22.5(@tiptap/extension-list@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/extension-list': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-paragraph@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-placeholder@3.22.5(@tiptap/extensions@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/extensions': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-strike@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-text@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extension-underline@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+
+  '@tiptap/extensions@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/pm@3.22.5':
+    dependencies:
+      prosemirror-changeset: 2.4.0
+      prosemirror-commands: 1.7.1
+      prosemirror-dropcursor: 1.8.2
+      prosemirror-gapcursor: 1.4.1
+      prosemirror-history: 1.5.0
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.4
+      prosemirror-schema-list: 1.5.1
+      prosemirror-state: 1.4.4
+      prosemirror-tables: 1.8.5
+      prosemirror-transform: 1.11.0
+      prosemirror-view: 1.41.6
+
+  '@tiptap/starter-kit@3.22.5':
+    dependencies:
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+      '@tiptap/extension-blockquote': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-bold': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-bullet-list': 3.22.5(@tiptap/extension-list@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))
+      '@tiptap/extension-code': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-code-block': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+      '@tiptap/extension-document': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-dropcursor': 3.22.5(@tiptap/extensions@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))
+      '@tiptap/extension-gapcursor': 3.22.5(@tiptap/extensions@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))
+      '@tiptap/extension-hard-break': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-heading': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-horizontal-rule': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+      '@tiptap/extension-italic': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-link': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+      '@tiptap/extension-list': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+      '@tiptap/extension-list-item': 3.22.5(@tiptap/extension-list@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))
+      '@tiptap/extension-list-keymap': 3.22.5(@tiptap/extension-list@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))
+      '@tiptap/extension-ordered-list': 3.22.5(@tiptap/extension-list@3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5))
+      '@tiptap/extension-paragraph': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-strike': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-text': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extension-underline': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))
+      '@tiptap/extensions': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+      '@tiptap/pm': 3.22.5
+
+  '@tiptap/vue-3@3.22.5(@floating-ui/dom@1.7.6)(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@tiptap/core': 3.22.5(@tiptap/pm@3.22.5)
+      '@tiptap/pm': 3.22.5
+      vue: 3.5.33(typescript@6.0.3)
+    optionalDependencies:
+      '@tiptap/extension-bubble-menu': 3.22.5(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+      '@tiptap/extension-floating-menu': 3.22.5(@floating-ui/dom@1.7.6)(@tiptap/core@3.22.5(@tiptap/pm@3.22.5))(@tiptap/pm@3.22.5)
+
+  '@tybys/wasm-util@0.10.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/katex@0.16.8': {}
+
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.24
+
+  '@types/lodash@4.17.24': {}
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/ms@2.1.0': {}
+
+  '@types/prismjs@1.26.6': {}
+
+  '@types/trusted-types@2.0.7':
+    optional: true
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@types/web-bluetooth@0.0.21': {}
+
+  '@uiw/codemirror-theme-dracula@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-github@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-material@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-monokai@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-nord@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-solarized@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-tokyo-night@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-themes@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+
+  '@v-c/async-validator@1.0.1': {}
+
+  '@v-c/cascader@1.0.3(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/select': 1.0.20(vue@3.5.33(typescript@6.0.3))
+      '@v-c/tree': 1.0.6(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/checkbox@1.0.1(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/collapse@1.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/color-picker@1.0.6(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@ant-design/fast-color': 3.0.1
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/dialog@1.0.3(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/portal': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/drawer@1.0.6(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/portal': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/dropdown@1.0.2(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/trigger': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/image@1.0.11(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/portal': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/input-number@1.0.5(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/input': 1.0.3(vue@3.5.33(typescript@6.0.3))
+      '@v-c/mini-decimal': 1.0.1
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/input@1.0.3(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/mentions@1.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/input': 1.0.3(vue@3.5.33(typescript@6.0.3))
+      '@v-c/menu': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/textarea': 1.0.4(vue@3.5.33(typescript@6.0.3))
+      '@v-c/trigger': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/menu@1.0.14(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/overflow': 1.0.5(vue@3.5.33(typescript@6.0.3))
+      '@v-c/trigger': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/mini-decimal@1.0.1': {}
+
+  '@v-c/mutate-observer@1.0.1(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/notification@1.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/overflow@1.0.4(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/overflow@1.0.5(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/pagination@1.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/picker@1.0.4(dayjs@1.11.20)(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/overflow': 1.0.4(vue@3.5.33(typescript@6.0.3))
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/trigger': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+    optionalDependencies:
+      dayjs: 1.11.20
+
+  '@v-c/portal@1.0.8(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/progress@1.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/qrcode@1.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/rate@1.0.1(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/resize-observer@1.0.8(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      resize-observer-polyfill: 1.5.1
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/segmented@1.0.2(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/select@1.0.20(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/overflow': 1.0.4(vue@3.5.33(typescript@6.0.3))
+      '@v-c/trigger': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      '@v-c/virtual-list': 1.0.7(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/slick@1.0.2(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      es-toolkit: 1.45.1
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/slider@1.0.10(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/steps@1.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/switch@1.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/table@1.0.7(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      '@v-c/virtual-list': 1.0.7(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/tabs@1.0.2(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/dropdown': 1.0.2(vue@3.5.33(typescript@6.0.3))
+      '@v-c/menu': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/overflow': 1.0.4(vue@3.5.33(typescript@6.0.3))
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/textarea@1.0.4(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/input': 1.0.3(vue@3.5.33(typescript@6.0.3))
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/tooltip@1.0.3(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/trigger': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/tour@1.0.3(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/portal': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/trigger': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/tree-select@1.0.3(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/select': 1.0.20(vue@3.5.33(typescript@6.0.3))
+      '@v-c/tree': 1.0.6(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/tree@1.0.6(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      '@v-c/virtual-list': 1.0.7(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/trigger@1.0.14(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/portal': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/upload@1.0.0(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/util@1.0.19(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@v-c/virtual-list@1.0.7(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@vitejs/plugin-vue@6.0.5(vite@8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2))(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-rc.2
+      vite: 8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2)
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue-macros/common@3.1.2(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@vue/compiler-sfc': 3.5.30
+      ast-kit: 2.2.0
+      local-pkg: 1.1.2
+      magic-string-ast: 1.0.3
+      unplugin-utils: 0.3.1
+    optionalDependencies:
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@vue/compiler-core@3.5.30':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@vue/shared': 3.5.30
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-core@3.5.33':
+    dependencies:
+      '@babel/parser': 7.29.2
+      '@vue/shared': 3.5.33
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.30':
+    dependencies:
+      '@vue/compiler-core': 3.5.30
+      '@vue/shared': 3.5.30
+
+  '@vue/compiler-dom@3.5.33':
+    dependencies:
+      '@vue/compiler-core': 3.5.33
+      '@vue/shared': 3.5.33
+
+  '@vue/compiler-sfc@3.5.30':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@vue/compiler-core': 3.5.30
+      '@vue/compiler-dom': 3.5.30
+      '@vue/compiler-ssr': 3.5.30
+      '@vue/shared': 3.5.30
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.8
+      source-map-js: 1.2.1
+
+  '@vue/compiler-sfc@3.5.33':
+    dependencies:
+      '@babel/parser': 7.29.2
+      '@vue/compiler-core': 3.5.33
+      '@vue/compiler-dom': 3.5.33
+      '@vue/compiler-ssr': 3.5.33
+      '@vue/shared': 3.5.33
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.12
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.30':
+    dependencies:
+      '@vue/compiler-dom': 3.5.30
+      '@vue/shared': 3.5.30
+
+  '@vue/compiler-ssr@3.5.33':
+    dependencies:
+      '@vue/compiler-dom': 3.5.33
+      '@vue/shared': 3.5.33
+
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/devtools-api@7.7.9':
+    dependencies:
+      '@vue/devtools-kit': 7.7.9
+
+  '@vue/devtools-api@8.1.0':
+    dependencies:
+      '@vue/devtools-kit': 8.1.0
+
+  '@vue/devtools-kit@7.7.9':
+    dependencies:
+      '@vue/devtools-shared': 7.7.9
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
+  '@vue/devtools-kit@8.1.0':
+    dependencies:
+      '@vue/devtools-shared': 8.1.0
+      birpc: 2.9.0
+      hookable: 5.5.3
+      perfect-debounce: 2.1.0
+
+  '@vue/devtools-shared@7.7.9':
+    dependencies:
+      rfdc: 1.4.1
+
+  '@vue/devtools-shared@8.1.0': {}
+
+  '@vue/language-core@3.2.7':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.30
+      '@vue/shared': 3.5.30
+      alien-signals: 3.1.2
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.4
+
+  '@vue/reactivity@3.5.33':
+    dependencies:
+      '@vue/shared': 3.5.33
+
+  '@vue/runtime-core@3.5.33':
+    dependencies:
+      '@vue/reactivity': 3.5.33
+      '@vue/shared': 3.5.33
+
+  '@vue/runtime-dom@3.5.33':
+    dependencies:
+      '@vue/reactivity': 3.5.33
+      '@vue/runtime-core': 3.5.33
+      '@vue/shared': 3.5.33
+      csstype: 3.2.3
+
+  '@vue/server-renderer@3.5.33(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.33
+      '@vue/shared': 3.5.33
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@vue/shared@3.5.30': {}
+
+  '@vue/shared@3.5.33': {}
+
+  '@vueuse/core@14.2.1(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.2.1
+      '@vueuse/shared': 14.2.1(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
+  '@vueuse/metadata@14.2.1': {}
+
+  '@vueuse/shared@14.2.1(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      vue: 3.5.33(typescript@6.0.3)
+
+  acorn@8.16.0: {}
+
+  alien-signals@3.1.2: {}
+
+  ansis@4.2.0: {}
+
+  antdv-next@1.2.2(vue@3.5.33(typescript@6.0.3)):
+    dependencies:
+      '@ant-design/colors': 8.0.1
+      '@ant-design/fast-color': 3.0.1
+      '@antdv-next/cssinjs': 1.0.6(vue@3.5.33(typescript@6.0.3))
+      '@antdv-next/icons': 1.0.6(vue@3.5.33(typescript@6.0.3))
+      '@v-c/async-validator': 1.0.1
+      '@v-c/cascader': 1.0.3(vue@3.5.33(typescript@6.0.3))
+      '@v-c/checkbox': 1.0.1(vue@3.5.33(typescript@6.0.3))
+      '@v-c/collapse': 1.0.0(vue@3.5.33(typescript@6.0.3))
+      '@v-c/color-picker': 1.0.6(vue@3.5.33(typescript@6.0.3))
+      '@v-c/dialog': 1.0.3(vue@3.5.33(typescript@6.0.3))
+      '@v-c/drawer': 1.0.6(vue@3.5.33(typescript@6.0.3))
+      '@v-c/dropdown': 1.0.2(vue@3.5.33(typescript@6.0.3))
+      '@v-c/image': 1.0.11(vue@3.5.33(typescript@6.0.3))
+      '@v-c/input': 1.0.3(vue@3.5.33(typescript@6.0.3))
+      '@v-c/input-number': 1.0.5(vue@3.5.33(typescript@6.0.3))
+      '@v-c/mentions': 1.0.0(vue@3.5.33(typescript@6.0.3))
+      '@v-c/menu': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/mutate-observer': 1.0.1(vue@3.5.33(typescript@6.0.3))
+      '@v-c/notification': 1.0.0(vue@3.5.33(typescript@6.0.3))
+      '@v-c/pagination': 1.0.0(vue@3.5.33(typescript@6.0.3))
+      '@v-c/picker': 1.0.4(dayjs@1.11.20)(vue@3.5.33(typescript@6.0.3))
+      '@v-c/progress': 1.0.0(vue@3.5.33(typescript@6.0.3))
+      '@v-c/qrcode': 1.0.0(vue@3.5.33(typescript@6.0.3))
+      '@v-c/rate': 1.0.1(vue@3.5.33(typescript@6.0.3))
+      '@v-c/resize-observer': 1.0.8(vue@3.5.33(typescript@6.0.3))
+      '@v-c/segmented': 1.0.2(vue@3.5.33(typescript@6.0.3))
+      '@v-c/select': 1.0.20(vue@3.5.33(typescript@6.0.3))
+      '@v-c/slick': 1.0.2(vue@3.5.33(typescript@6.0.3))
+      '@v-c/slider': 1.0.10(vue@3.5.33(typescript@6.0.3))
+      '@v-c/steps': 1.0.0(vue@3.5.33(typescript@6.0.3))
+      '@v-c/switch': 1.0.0(vue@3.5.33(typescript@6.0.3))
+      '@v-c/table': 1.0.7(vue@3.5.33(typescript@6.0.3))
+      '@v-c/tabs': 1.0.2(vue@3.5.33(typescript@6.0.3))
+      '@v-c/textarea': 1.0.4(vue@3.5.33(typescript@6.0.3))
+      '@v-c/tooltip': 1.0.3(vue@3.5.33(typescript@6.0.3))
+      '@v-c/tour': 1.0.3(vue@3.5.33(typescript@6.0.3))
+      '@v-c/tree': 1.0.6(vue@3.5.33(typescript@6.0.3))
+      '@v-c/tree-select': 1.0.3(vue@3.5.33(typescript@6.0.3))
+      '@v-c/trigger': 1.0.14(vue@3.5.33(typescript@6.0.3))
+      '@v-c/upload': 1.0.0(vue@3.5.33(typescript@6.0.3))
+      '@v-c/util': 1.0.19(vue@3.5.33(typescript@6.0.3))
+      '@v-c/virtual-list': 1.0.7(vue@3.5.33(typescript@6.0.3))
+      '@vueuse/core': 14.2.1(vue@3.5.33(typescript@6.0.3))
+      dayjs: 1.11.20
+      es-toolkit: 1.45.1
+      scroll-into-view-if-needed: 3.1.0
+      throttle-debounce: 5.0.2
+    transitivePeerDependencies:
+      - date-fns
+      - luxon
+      - moment
+      - vue
+
+  asap@2.0.6: {}
+
+  ast-kit@2.2.0:
+    dependencies:
+      '@babel/parser': 7.29.0
+      pathe: 2.0.3
+
+  ast-walker-scope@0.8.3:
+    dependencies:
+      '@babel/parser': 7.29.0
+      ast-kit: 2.2.0
+
+  asynckit@0.4.0: {}
+
+  axios@1.15.2:
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.5
+      proxy-from-env: 2.1.0
+    transitivePeerDependencies:
+      - debug
+
+  bail@2.0.2: {}
+
+  birpc@2.9.0: {}
+
+  bytes@3.1.2: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  ccount@2.0.1: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
+  clsx@2.1.1: {}
+
+  co-body@6.2.0:
+    dependencies:
+      '@hapi/bourne': 3.0.0
+      inflation: 2.1.0
+      qs: 6.15.0
+      raw-body: 2.5.3
+      type-is: 1.6.18
+
+  codemirror@6.0.2:
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/commands': 6.10.3
+      '@codemirror/language': 6.12.3
+      '@codemirror/lint': 6.9.5
+      '@codemirror/search': 6.6.0
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  comma-separated-tokens@2.0.3: {}
+
+  commander@8.3.0: {}
+
+  compute-scroll-into-view@3.1.1: {}
+
+  confbox@0.1.8: {}
+
+  confbox@0.2.4: {}
+
+  copy-anything@4.0.5:
+    dependencies:
+      is-what: 5.5.0
+
+  cors@2.8.6:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
+  crelt@1.0.6: {}
+
+  csstype@3.2.3: {}
+
+  dayjs@1.11.20: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  delayed-stream@1.0.0: {}
+
+  depd@2.0.0: {}
+
+  dequal@2.0.3: {}
+
+  detect-libc@2.1.2: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  dezalgo@1.0.4:
+    dependencies:
+      asap: 2.0.6
+      wrappy: 1.0.2
+
+  dompurify@3.3.3:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
+  enhanced-resolve@5.20.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  entities@7.0.1: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-toolkit@1.45.1: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  estree-walker@2.0.2: {}
+
+  exsolve@1.0.8: {}
+
+  extend@3.0.2: {}
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  follow-redirects@1.15.11: {}
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
+  formidable@3.5.4:
+    dependencies:
+      '@paralleldrive/cuid2': 2.3.1
+      dezalgo: 1.0.4
+      once: 1.4.0
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+
+  hookable@5.5.3: {}
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  http-status@2.1.0: {}
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  immutable@5.1.5: {}
+
+  inflation@2.1.0: {}
+
+  inherits@2.0.4: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-decimal@2.0.1: {}
+
+  is-extglob@2.1.1:
+    optional: true
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+    optional: true
+
+  is-hexadecimal@2.0.1: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-what@5.5.0: {}
+
+  jiti@2.6.1: {}
+
+  jsesc@3.1.0: {}
+
+  json5@2.2.3: {}
+
+  katex@0.16.38:
+    dependencies:
+      commander: 8.3.0
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  linkifyjs@4.3.2: {}
+
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.1
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
+  lodash-es@4.18.1: {}
+
+  longest-streak@3.1.0: {}
+
+  magic-string-ast@1.0.3:
+    dependencies:
+      magic-string: 0.30.21
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  markdown-table@3.0.4: {}
+
+  math-intrinsics@1.1.0: {}
+
+  mdast-util-definitions@6.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      unist-util-visit: 5.1.0
+
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  mdast-util-from-markdown@2.0.3:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-math@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      longest-streak: 3.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      unist-util-remove-position: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.1.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  media-typer@0.3.0: {}
+
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-math@3.1.0:
+    dependencies:
+      '@types/katex': 0.16.8
+      devlop: 1.1.0
+      katex: 0.16.38
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mime-db@1.52.0: {}
+
+  mime-db@1.54.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  mitt@3.0.1: {}
+
+  mlly@1.8.1:
+    dependencies:
+      acorn: 8.16.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.3
+
+  ms@2.1.3: {}
+
+  muggle-string@0.4.1: {}
+
+  nanoid@3.3.11: {}
+
+  nanoid@5.1.6: {}
+
+  node-addon-api@7.1.1:
+    optional: true
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  orderedmap@2.1.1: {}
+
+  oxfmt@0.43.0:
+    dependencies:
+      tinypool: 2.1.0
+    optionalDependencies:
+      '@oxfmt/binding-android-arm-eabi': 0.43.0
+      '@oxfmt/binding-android-arm64': 0.43.0
+      '@oxfmt/binding-darwin-arm64': 0.43.0
+      '@oxfmt/binding-darwin-x64': 0.43.0
+      '@oxfmt/binding-freebsd-x64': 0.43.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.43.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.43.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.43.0
+      '@oxfmt/binding-linux-arm64-musl': 0.43.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.43.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.43.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.43.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.43.0
+      '@oxfmt/binding-linux-x64-gnu': 0.43.0
+      '@oxfmt/binding-linux-x64-musl': 0.43.0
+      '@oxfmt/binding-openharmony-arm64': 0.43.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.43.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.43.0
+      '@oxfmt/binding-win32-x64-msvc': 0.43.0
+
+  oxlint@1.62.0:
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.62.0
+      '@oxlint/binding-android-arm64': 1.62.0
+      '@oxlint/binding-darwin-arm64': 1.62.0
+      '@oxlint/binding-darwin-x64': 1.62.0
+      '@oxlint/binding-freebsd-x64': 1.62.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.62.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.62.0
+      '@oxlint/binding-linux-arm64-gnu': 1.62.0
+      '@oxlint/binding-linux-arm64-musl': 1.62.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.62.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.62.0
+      '@oxlint/binding-linux-riscv64-musl': 1.62.0
+      '@oxlint/binding-linux-s390x-gnu': 1.62.0
+      '@oxlint/binding-linux-x64-gnu': 1.62.0
+      '@oxlint/binding-linux-x64-musl': 1.62.0
+      '@oxlint/binding-openharmony-arm64': 1.62.0
+      '@oxlint/binding-win32-arm64-msvc': 1.62.0
+      '@oxlint/binding-win32-ia32-msvc': 1.62.0
+      '@oxlint/binding-win32-x64-msvc': 1.62.0
+
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.3.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
+  path-browserify@1.0.1: {}
+
+  path-to-regexp@8.3.0: {}
+
+  pathe@2.0.3: {}
+
+  perfect-debounce@1.0.0: {}
+
+  perfect-debounce@2.1.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.3: {}
+
+  picomatch@4.0.4: {}
+
+  pinia@3.0.4(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      vue: 3.5.33(typescript@6.0.3)
+    optionalDependencies:
+      typescript: 6.0.3
+
+  pinyin-pro@3.28.0: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.1
+      pathe: 2.0.3
+
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
+  postcss@8.5.12:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.8:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  property-information@7.1.0: {}
+
+  prosemirror-changeset@2.4.0:
+    dependencies:
+      prosemirror-transform: 1.11.0
+
+  prosemirror-commands@1.7.1:
+    dependencies:
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.11.0
+
+  prosemirror-drop-indicator@0.1.3:
+    dependencies:
+      '@ocavue/utils': 1.5.0
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.6
+
+  prosemirror-dropcursor@1.8.2:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.11.0
+      prosemirror-view: 1.41.6
+
+  prosemirror-gapcursor@1.4.1:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.6
+
+  prosemirror-history@1.5.0:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.11.0
+      prosemirror-view: 1.41.6
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.5.1:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.11.0
+
+  prosemirror-keymap@1.2.3:
+    dependencies:
+      prosemirror-state: 1.4.4
+      w3c-keyname: 2.2.8
+
+  prosemirror-model@1.25.4:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-safari-ime-span@1.0.2:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.6
+
+  prosemirror-schema-list@1.5.1:
+    dependencies:
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.11.0
+
+  prosemirror-state@1.4.4:
+    dependencies:
+      prosemirror-model: 1.25.4
+      prosemirror-transform: 1.11.0
+      prosemirror-view: 1.41.6
+
+  prosemirror-tables@1.8.5:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.11.0
+      prosemirror-view: 1.41.6
+
+  prosemirror-transform@1.11.0:
+    dependencies:
+      prosemirror-model: 1.25.4
+
+  prosemirror-view@1.41.6:
+    dependencies:
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.11.0
+
+  prosemirror-virtual-cursor@0.4.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.6):
+    optionalDependencies:
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.6
+
+  proxy-from-env@2.1.0: {}
+
+  qs@6.15.0:
+    dependencies:
+      side-channel: 1.1.0
+
+  quansync@0.2.11: {}
+
+  raw-body@2.5.3:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      unpipe: 1.0.0
+
+  readdirp@4.1.2: {}
+
+  readdirp@5.0.0: {}
+
+  refractor@5.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/prismjs': 1.26.6
+      hastscript: 9.0.1
+      parse-entities: 4.0.2
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-inline-links@7.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-definitions: 6.0.0
+      unist-util-visit: 5.1.0
+
+  remark-math@6.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-math: 3.0.0
+      micromark-extension-math: 3.1.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
+  remark@15.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  resize-observer-polyfill@1.5.1: {}
+
+  rfdc@1.4.1: {}
+
+  rolldown@1.0.0-rc.17:
+    dependencies:
+      '@oxc-project/types': 0.127.0
+      '@rolldown/pluginutils': 1.0.0-rc.17
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-rc.17
+      '@rolldown/binding-darwin-arm64': 1.0.0-rc.17
+      '@rolldown/binding-darwin-x64': 1.0.0-rc.17
+      '@rolldown/binding-freebsd-x64': 1.0.0-rc.17
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.17
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.17
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.17
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.17
+      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.17
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.17
+      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.17
+      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.17
+      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.17
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.17
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.17
+
+  rope-sequence@1.3.4: {}
+
+  safer-buffer@2.1.2: {}
+
+  sass@1.98.0:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.5
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.6
+
+  scroll-into-view-if-needed@3.1.0:
+    dependencies:
+      compute-scroll-into-view: 3.1.1
+
+  scule@1.3.0: {}
+
+  setprototypeof@1.2.0: {}
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  sortablejs@1.14.0: {}
+
+  source-map-js@1.2.1: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  speakingurl@14.0.1: {}
+
+  statuses@2.0.2: {}
+
+  style-mod@4.1.3: {}
+
+  stylis@4.3.6: {}
+
+  superjson@2.2.6:
+    dependencies:
+      copy-anything: 4.0.5
+
+  tailwindcss@4.2.4: {}
+
+  tapable@2.3.0: {}
+
+  throttle-debounce@5.0.2: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  tinyglobby@0.2.16:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  tinypool@2.1.0: {}
+
+  toidentifier@1.0.1: {}
+
+  trough@2.2.0: {}
+
+  tslib@2.3.0: {}
+
+  tslib@2.8.1:
+    optional: true
+
+  type-is@1.6.18:
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+
+  typescript@6.0.3: {}
+
+  ufo@1.6.3: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-remove-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-visit: 5.1.0
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  unpipe@1.0.0: {}
+
+  unplugin-utils@0.3.1:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.3
+
+  unplugin@3.0.0:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
+  vary@1.1.2: {}
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  vite-plugin-mock-dev-server@2.1.1(rolldown@1.0.0-rc.17)(vite@8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2)):
+    dependencies:
+      '@pengzhanbo/utils': 3.3.1
+      ansis: 4.2.0
+      chokidar: 5.0.0
+      co-body: 6.2.0
+      cors: 2.8.6
+      debug: 4.4.3
+      formidable: 3.5.4
+      http-status: 2.1.0
+      is-core-module: 2.16.1
+      json5: 2.2.3
+      local-pkg: 1.1.2
+      mime-types: 3.0.2
+      path-to-regexp: 8.3.0
+      picomatch: 4.0.4
+      tinyglobby: 0.2.15
+      vite: 8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2)
+      ws: 8.20.0
+    optionalDependencies:
+      rolldown: 1.0.0-rc.17
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  vite@8.0.10(jiti@2.6.1)(sass@1.98.0)(yaml@2.8.2):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.12
+      rolldown: 1.0.0-rc.17
+      tinyglobby: 0.2.16
+    optionalDependencies:
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      sass: 1.98.0
+      yaml: 2.8.2
+
+  vscode-uri@3.1.0: {}
+
+  vue-codemirror@6.1.1(codemirror@6.0.2)(vue@3.5.33(typescript@6.0.3)):
+    dependencies:
+      '@codemirror/commands': 6.10.3
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      codemirror: 6.0.2
+      vue: 3.5.33(typescript@6.0.3)
+
+  vue-echarts@8.0.1(echarts@6.0.0)(vue@3.5.33(typescript@6.0.3)):
+    dependencies:
+      echarts: 6.0.0
+      vue: 3.5.33(typescript@6.0.3)
+
+  vue-i18n@11.3.0(vue@3.5.33(typescript@6.0.3)):
+    dependencies:
+      '@intlify/core-base': 11.3.0
+      '@intlify/devtools-types': 11.3.0
+      '@intlify/shared': 11.3.0
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.33(typescript@6.0.3)
+
+  vue-router@5.0.6(@vue/compiler-sfc@3.5.33)(pinia@3.0.4(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3)):
+    dependencies:
+      '@babel/generator': 7.29.1
+      '@vue-macros/common': 3.1.2(vue@3.5.33(typescript@6.0.3))
+      '@vue/devtools-api': 8.1.0
+      ast-walker-scope: 0.8.3
+      chokidar: 5.0.0
+      json5: 2.2.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.1
+      muggle-string: 0.4.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      scule: 1.3.0
+      tinyglobby: 0.2.15
+      unplugin: 3.0.0
+      unplugin-utils: 0.3.1
+      vue: 3.5.33(typescript@6.0.3)
+      yaml: 2.8.2
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.33
+      pinia: 3.0.4(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3))
+
+  vue-tsc@3.2.7(typescript@6.0.3):
+    dependencies:
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 3.2.7
+      typescript: 6.0.3
+
+  vue@3.5.33(typescript@6.0.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.33
+      '@vue/compiler-sfc': 3.5.33
+      '@vue/runtime-dom': 3.5.33
+      '@vue/server-renderer': 3.5.33(vue@3.5.33(typescript@6.0.3))
+      '@vue/shared': 3.5.33
+    optionalDependencies:
+      typescript: 6.0.3
+
+  vuedraggable@4.1.0(vue@3.5.33(typescript@6.0.3)):
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.5.33(typescript@6.0.3)
+
+  w3c-keyname@2.2.8: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
+  wrappy@1.0.2: {}
+
+  ws@8.20.0: {}
+
+  yaml@2.8.2: {}
+
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+
+  zwitch@2.0.4: {}
diff --git a/antdv-next-admin/public/.nojekyll b/antdv-next-admin/public/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/antdv-next-admin/public/404.html b/antdv-next-admin/public/404.html
new file mode 100644
index 0000000..5f58c19
--- /dev/null
+++ b/antdv-next-admin/public/404.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Antdv Next Admin</title>
+  <script>
+    // GitHub Pages SPA 路由重定向解决方案
+    // 将路径信息存储到 sessionStorage，然后重定向到首页
+    sessionStorage.redirect = location.href;
+  </script>
+  <meta http-equiv="refresh" content="0;URL='/'">
+</head>
+<body>
+  <p>Redirecting...</p>
+</body>
+</html>
diff --git a/antdv-next-admin/public/logo.png b/antdv-next-admin/public/logo.png
new file mode 100644
index 0000000..3420482
Binary files /dev/null and b/antdv-next-admin/public/logo.png differ
diff --git a/antdv-next-admin/public/logo.svg b/antdv-next-admin/public/logo.svg
new file mode 100644
index 0000000..9ded453
--- /dev/null
+++ b/antdv-next-admin/public/logo.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1890ff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#096dd9;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="url(#grad)"/>
+  <text x="50" y="65" font-family="Arial, sans-serif" font-size="45" font-weight="bold" fill="white" text-anchor="middle">A</text>
+</svg>
diff --git a/antdv-next-admin/src/App.vue b/antdv-next-admin/src/App.vue
new file mode 100644
index 0000000..9997d70
--- /dev/null
+++ b/antdv-next-admin/src/App.vue
@@ -0,0 +1,63 @@
+<template>
+  <a-config-provider
+    :theme="antdThemeConfig"
+    :input="inputConfig"
+    :select="selectConfig"
+    :date-picker="datePickerConfig"
+    :range-picker="datePickerConfig"
+  >
+    <router-view />
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import { theme as antdTheme, type ThemeConfig } from "antdv-next";
+import { computed, onMounted } from "vue";
+
+import { appDefaultSettings } from "./settings";
+import { useNotificationStore } from "./stores/notification";
+import { useSettingsStore } from "./stores/settings";
+import { useThemeStore } from "./stores/theme";
+import { useWatermarkStore } from "./stores/watermark";
+
+const themeStore = useThemeStore();
+const settingsStore = useSettingsStore();
+const watermarkStore = useWatermarkStore();
+const notificationStore = useNotificationStore();
+
+const antdThemeConfig = computed<ThemeConfig>(() => ({
+  algorithm: themeStore.isDark
+    ? antdTheme.darkAlgorithm
+    : antdTheme.defaultAlgorithm,
+  token: {
+    colorPrimary: settingsStore.primaryColorHex,
+    colorLink: settingsStore.primaryColorHex,
+  },
+}));
+
+const inputConfig = computed(() => appDefaultSettings.input);
+const selectConfig = computed(
+  () => appDefaultSettings.select as unknown as Record<string, unknown>,
+);
+const datePickerConfig = computed(
+  () => appDefaultSettings.datePicker as unknown as Record<string, unknown>,
+);
+
+onMounted(() => {
+  // Initialize theme and settings from localStorage
+  themeStore.initTheme();
+  settingsStore.initSettings();
+  watermarkStore.initWatermark();
+  notificationStore.initNotifications();
+});
+</script>
+
+<style>
+#app {
+  width: 100%;
+  height: 100vh;
+  font-family: var(--font-family);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-layout);
+}
+</style>
diff --git a/antdv-next-admin/src/api/auth.ts b/antdv-next-admin/src/api/auth.ts
new file mode 100644
index 0000000..c81759e
--- /dev/null
+++ b/antdv-next-admin/src/api/auth.ts
@@ -0,0 +1,32 @@
+import type { ApiResponse } from '@/types/api';
+import type { LoginParams, LoginResult, User } from '@/types/auth';
+
+import { request } from '@/utils/request';
+
+/**
+ * Login
+ */
+export function login(data: LoginParams): Promise<ApiResponse<LoginResult>> {
+  return request.post('/auth/login', data);
+}
+
+/**
+ * Logout
+ */
+export function logout(): Promise<ApiResponse<null>> {
+  return request.post('/auth/logout');
+}
+
+/**
+ * Get user info
+ */
+export function getUserInfo(): Promise<ApiResponse<User>> {
+  return request.get('/auth/info');
+}
+
+/**
+ * Refresh token
+ */
+export function refreshToken(refreshToken: string): Promise<ApiResponse<LoginResult>> {
+  return request.post('/auth/refresh', { refreshToken });
+}
diff --git a/antdv-next-admin/src/api/config.ts b/antdv-next-admin/src/api/config.ts
new file mode 100644
index 0000000..8ffaada
--- /dev/null
+++ b/antdv-next-admin/src/api/config.ts
@@ -0,0 +1,111 @@
+import type { ApiResponse } from "@/types/api";
+import type { SysConfig, SysConfigQueryParams } from "@/types/config";
+
+import { request } from "@/utils/request";
+
+const isMock = import.meta.env.VITE_USE_MOCK === "true";
+
+const ok = <T>(data: T, message = "success"): ApiResponse<T> => ({
+  code: 200,
+  message,
+  data,
+  success: true,
+});
+
+const error = <T = null>(code: number, message: string): ApiResponse<T> => ({
+  code,
+  message,
+  data: null as T,
+  success: false,
+});
+
+export async function getConfigList(params: SysConfigQueryParams): Promise<
+  ApiResponse<{
+    list: SysConfig[];
+    total: number;
+    page: number;
+    pageSize: number;
+  }>
+> {
+  if (!isMock) return request.get("/config/list", { params });
+
+  const { sysConfigs } = await import("../../mock/data/config.data");
+  const { page = 1, pageSize = 10, key, group } = params;
+  let filtered = [...sysConfigs];
+
+  if (key) filtered = filtered.filter((item) => item.key.includes(key));
+  if (group) filtered = filtered.filter((item) => item.group === group);
+
+  filtered.sort((a, b) => a.sort - b.sort);
+
+  const start = (page - 1) * pageSize;
+  const list = filtered.slice(start, start + pageSize);
+
+  return ok({ list, total: filtered.length, page, pageSize });
+}
+
+export async function getConfigByKey(
+  key: string,
+): Promise<ApiResponse<SysConfig>> {
+  if (!isMock) return request.get(`/config/key/${key}`);
+
+  const { sysConfigs } = await import("../../mock/data/config.data");
+  const config = sysConfigs.find((item) => item.key === key);
+  if (!config) return error(404, "配置不存在");
+  return ok(config);
+}
+
+export async function createConfig(
+  data: Partial<SysConfig>,
+): Promise<ApiResponse<SysConfig>> {
+  if (!isMock) return request.post("/config", data);
+
+  const { sysConfigs } = await import("../../mock/data/config.data");
+  const newConfig: SysConfig = {
+    id: String(Date.now()),
+    name: data.name || "",
+    key: data.key || "",
+    value: data.value || "",
+    valueType: data.valueType || "string",
+    group: data.group || "basic",
+    description: data.description,
+    builtIn: false,
+    sort: data.sort || 99,
+    createTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+    updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+  };
+  sysConfigs.push(newConfig);
+  return ok(newConfig, "创建成功");
+}
+
+export async function updateConfig(
+  id: string,
+  data: Partial<SysConfig>,
+): Promise<ApiResponse<SysConfig>> {
+  if (!isMock) return request.put(`/config/${id}`, data);
+
+  const { sysConfigs } = await import("../../mock/data/config.data");
+  const index = sysConfigs.findIndex((item) => item.id === id);
+  if (index === -1) return error(404, "配置不存在");
+
+  sysConfigs[index] = {
+    ...sysConfigs[index],
+    ...data,
+    updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+  };
+  return ok(sysConfigs[index], "更新成功");
+}
+
+export async function deleteConfig(id: string): Promise<ApiResponse<void>> {
+  if (!isMock) return request.delete(`/config/${id}`);
+
+  const { sysConfigs } = await import("../../mock/data/config.data");
+  const index = sysConfigs.findIndex((item) => item.id === id);
+  if (index === -1) return error(404, "配置不存在");
+
+  const config = sysConfigs[index];
+  if (config.builtIn) return error(400, "内置配置不可删除");
+
+  sysConfigs.splice(index, 1);
+  return ok(undefined as unknown as void, "删除成功");
+}
diff --git a/antdv-next-admin/src/api/dept.ts b/antdv-next-admin/src/api/dept.ts
new file mode 100644
index 0000000..451e7bf
--- /dev/null
+++ b/antdv-next-admin/src/api/dept.ts
@@ -0,0 +1,122 @@
+import type { ApiResponse } from "@/types/api";
+import type { Department, DeptQueryParams } from "@/types/dept";
+
+import { request } from "@/utils/request";
+
+const isMock = import.meta.env.VITE_USE_MOCK === "true";
+
+const ok = <T>(data: T, message = "success"): ApiResponse<T> => ({
+  code: 200,
+  message,
+  data,
+  success: true,
+});
+
+const error = <T = null>(code: number, message: string): ApiResponse<T> => ({
+  code,
+  message,
+  data: null as T,
+  success: false,
+});
+
+/**
+ * 获取部门树
+ */
+export async function getDeptTree(
+  params?: DeptQueryParams,
+): Promise<ApiResponse<Department[]>> {
+  if (!isMock) return request.get("/dept/tree", { params });
+
+  const { departments, buildDeptTree } =
+    await import("../../mock/data/dept.data");
+  const { name, status } = params || {};
+  let filtered = [...departments];
+
+  if (name) filtered = filtered.filter((item) => item.name.includes(name));
+  if (status) filtered = filtered.filter((item) => item.status === status);
+
+  return ok(buildDeptTree(filtered));
+}
+
+/**
+ * 获取部门列表（扁平）
+ */
+export async function getDeptList(
+  params?: DeptQueryParams,
+): Promise<ApiResponse<Department[]>> {
+  if (!isMock) return request.get("/dept/list", { params });
+
+  const { departments } = await import("../../mock/data/dept.data");
+  const { name, status } = params || {};
+  let filtered = [...departments];
+
+  if (name) filtered = filtered.filter((item) => item.name.includes(name));
+  if (status) filtered = filtered.filter((item) => item.status === status);
+
+  filtered.sort((a, b) => a.sort - b.sort);
+  return ok(filtered);
+}
+
+/**
+ * 创建部门
+ */
+export async function createDept(
+  data: Partial<Department>,
+): Promise<ApiResponse<Department>> {
+  if (!isMock) return request.post("/dept", data);
+
+  const { departments } = await import("../../mock/data/dept.data");
+  const newDept: Department = {
+    id: String(Date.now()),
+    name: data.name || "",
+    parentId: data.parentId || null,
+    leader: data.leader,
+    phone: data.phone,
+    email: data.email,
+    sort: data.sort || 0,
+    status: data.status || "enabled",
+    remark: data.remark,
+    createTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+    updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+  };
+  departments.push(newDept);
+  return ok(newDept, "创建成功");
+}
+
+/**
+ * 更新部门
+ */
+export async function updateDept(
+  id: string,
+  data: Partial<Department>,
+): Promise<ApiResponse<Department>> {
+  if (!isMock) return request.put(`/dept/${id}`, data);
+
+  const { departments } = await import("../../mock/data/dept.data");
+  const index = departments.findIndex((item) => item.id === id);
+  if (index === -1) return error(404, "部门不存在");
+
+  departments[index] = {
+    ...departments[index],
+    ...data,
+    updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+  };
+  return ok(departments[index], "更新成功");
+}
+
+/**
+ * 删除部门
+ */
+export async function deleteDept(id: string): Promise<ApiResponse<void>> {
+  if (!isMock) return request.delete(`/dept/${id}`);
+
+  const { departments } = await import("../../mock/data/dept.data");
+  const hasChildren = departments.some((item) => item.parentId === id);
+  if (hasChildren) return error(400, "存在子部门，无法删除");
+
+  const index = departments.findIndex((item) => item.id === id);
+  if (index === -1) return error(404, "部门不存在");
+
+  departments.splice(index, 1);
+  return ok(undefined as unknown as void, "删除成功");
+}
diff --git a/antdv-next-admin/src/api/dict.ts b/antdv-next-admin/src/api/dict.ts
new file mode 100644
index 0000000..2e4bc44
--- /dev/null
+++ b/antdv-next-admin/src/api/dict.ts
@@ -0,0 +1,235 @@
+import type { ApiResponse } from "@/types/api";
+import type {
+  DictType,
+  DictData,
+  DictQueryParams,
+  DictTypeQueryParams,
+} from "@/types/dict";
+
+import { request } from "@/utils/request";
+
+const isMock = import.meta.env.VITE_USE_MOCK === "true";
+
+const ok = <T>(data: T, message = "success"): ApiResponse<T> => ({
+  code: 200,
+  message,
+  data,
+  success: true,
+});
+
+const error = <T = null>(code: number, message: string): ApiResponse<T> => ({
+  code,
+  message,
+  data: null as T,
+  success: false,
+});
+
+/**
+ * 获取所有字典类型
+ */
+export async function getDictTypes(): Promise<ApiResponse<DictType[]>> {
+  if (!isMock) return request.get("/dict/types");
+
+  const { dictTypes } = await import("../../mock/data/dict.data");
+  return ok(dictTypes.filter((t) => t.status === "enabled"));
+}
+
+/**
+ * 获取字典类型列表（分页）
+ */
+export async function getDictTypeList(params: DictTypeQueryParams): Promise<
+  ApiResponse<{
+    list: DictType[];
+    total: number;
+    page: number;
+    pageSize: number;
+  }>
+> {
+  if (!isMock) return request.get("/dict/type/list", { params });
+
+  const { dictTypes } = await import("../../mock/data/dict.data");
+  const { page = 1, pageSize = 10, code, name, status } = params;
+  let filtered = [...dictTypes];
+
+  if (code) filtered = filtered.filter((item) => item.code.includes(code));
+  if (name) filtered = filtered.filter((item) => item.name.includes(name));
+  if (status) filtered = filtered.filter((item) => item.status === status);
+
+  const start = (page - 1) * pageSize;
+  const list = filtered.slice(start, start + pageSize);
+
+  return ok({ list, total: filtered.length, page, pageSize });
+}
+
+/**
+ * 创建字典类型
+ */
+export async function createDictType(
+  data: Partial<DictType>,
+): Promise<ApiResponse<DictType>> {
+  if (!isMock) return request.post("/dict/type", data);
+
+  const { dictTypes } = await import("../../mock/data/dict.data");
+  const newType: DictType = {
+    id: String(Date.now()),
+    name: data.name || "",
+    code: data.code || "",
+    description: data.description,
+    status: data.status || "enabled",
+    createTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+    updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+  };
+  dictTypes.push(newType);
+  return ok(newType, "创建成功");
+}
+
+/**
+ * 更新字典类型
+ */
+export async function updateDictType(
+  id: string,
+  data: Partial<DictType>,
+): Promise<ApiResponse<DictType>> {
+  if (!isMock) return request.put(`/dict/type/${id}`, data);
+
+  const { dictTypes } = await import("../../mock/data/dict.data");
+  const index = dictTypes.findIndex((item) => item.id === id);
+  if (index === -1) return error(404, "字典类型不存在");
+
+  dictTypes[index] = {
+    ...dictTypes[index],
+    ...data,
+    updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+  };
+  return ok(dictTypes[index], "更新成功");
+}
+
+/**
+ * 删除字典类型
+ */
+export async function deleteDictType(id: string): Promise<ApiResponse<void>> {
+  if (!isMock) return request.delete(`/dict/type/${id}`);
+
+  const { dictTypes } = await import("../../mock/data/dict.data");
+  const index = dictTypes.findIndex((item) => item.id === id);
+  if (index === -1) return error(404, "字典类型不存在");
+
+  dictTypes.splice(index, 1);
+  return ok(undefined as unknown as void, "删除成功");
+}
+
+/**
+ * 获取所有字典数据
+ */
+export async function getAllDictData(): Promise<ApiResponse<DictData[]>> {
+  if (!isMock) return request.get("/dict/data/all");
+
+  const { dictData } = await import("../../mock/data/dict.data");
+  return ok(dictData);
+}
+
+/**
+ * 根据类型获取字典数据
+ */
+export async function getDictDataByType(
+  typeCode: string,
+): Promise<ApiResponse<DictData[]>> {
+  if (!isMock) return request.get(`/dict/data/${typeCode}`);
+
+  const { dictData } = await import("../../mock/data/dict.data");
+  const filtered = dictData.filter(
+    (d) => d.typeCode === typeCode && d.status === "enabled",
+  );
+  filtered.sort((a, b) => a.sort - b.sort);
+  return ok(filtered);
+}
+
+/**
+ * 获取字典数据列表（分页）
+ */
+export async function getDictDataList(params: DictQueryParams): Promise<
+  ApiResponse<{
+    list: DictData[];
+    total: number;
+    page: number;
+    pageSize: number;
+  }>
+> {
+  if (!isMock) return request.get("/dict/data/list", { params });
+
+  const { dictData } = await import("../../mock/data/dict.data");
+  const { page = 1, pageSize = 10, typeCode, label, value, status } = params;
+  let filtered = [...dictData];
+
+  if (typeCode)
+    filtered = filtered.filter((item) => item.typeCode === typeCode);
+  if (label) filtered = filtered.filter((item) => item.label.includes(label));
+  if (value) filtered = filtered.filter((item) => item.value.includes(value));
+  if (status) filtered = filtered.filter((item) => item.status === status);
+
+  filtered.sort((a, b) => a.sort - b.sort);
+
+  const start = (page - 1) * pageSize;
+  const list = filtered.slice(start, start + pageSize);
+
+  return ok({ list, total: filtered.length, page, pageSize });
+}
+
+/**
+ * 创建字典数据
+ */
+export async function createDictData(
+  data: Partial<DictData>,
+): Promise<ApiResponse<DictData>> {
+  if (!isMock) return request.post("/dict/data", data);
+
+  const { dictData } = await import("../../mock/data/dict.data");
+  const newData: DictData = {
+    id: String(Date.now()),
+    typeCode: data.typeCode || "",
+    label: data.label || "",
+    value: data.value || "",
+    sort: data.sort || 0,
+    status: data.status || "enabled",
+    remark: data.remark,
+    createTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+    updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+  };
+  dictData.push(newData);
+  return ok(newData, "创建成功");
+}
+
+/**
+ * 更新字典数据
+ */
+export async function updateDictData(
+  id: string,
+  data: Partial<DictData>,
+): Promise<ApiResponse<DictData>> {
+  if (!isMock) return request.put(`/dict/data/${id}`, data);
+
+  const { dictData } = await import("../../mock/data/dict.data");
+  const index = dictData.findIndex((item) => item.id === id);
+  if (index === -1) return error(404, "字典数据不存在");
+
+  dictData[index] = {
+    ...dictData[index],
+    ...data,
+    updateTime: new Date().toISOString().replace("T", " ").slice(0, 19),
+  };
+  return ok(dictData[index], "更新成功");
+}
+
+/**
+ * 删除字典数据
+ */
+export async function deleteDictData(id: string): Promise<ApiResponse<void>> {
+  if (!isMock) return request.delete(`/dict/data/${id}`);
+
+  const { dictData } = await import("../../mock/data/dict.data");
+  const index = dictData.findIndex((item) => item.id === id);
+  if (index === -1) return error(404, "字典数据不存在");
+
+  dictData.splice(index, 1);
+  return ok(undefined as unknown as void, "删除成功");
+}
diff --git a/antdv-next-admin/src/api/file.ts b/antdv-next-admin/src/api/file.ts
new file mode 100644
index 0000000..6bb8ea8
--- /dev/null
+++ b/antdv-next-admin/src/api/file.ts
@@ -0,0 +1,58 @@
+import type { ApiResponse } from "@/types/api";
+import type { SysFile, SysFileQueryParams } from "@/types/file";
+
+import { request } from "@/utils/request";
+
+const isMock = import.meta.env.VITE_USE_MOCK === "true";
+
+const ok = <T>(data: T, message = "success"): ApiResponse<T> => ({
+  code: 200,
+  message,
+  data,
+  success: true,
+});
+
+const error = <T = null>(code: number, message: string): ApiResponse<T> => ({
+  code,
+  message,
+  data: null as T,
+  success: false,
+});
+
+export async function getFileList(params: SysFileQueryParams): Promise<
+  ApiResponse<{
+    list: SysFile[];
+    total: number;
+    page: number;
+    pageSize: number;
+  }>
+> {
+  if (!isMock) return request.get("/file/list", { params });
+
+  const { sysFiles } = await import("../../mock/data/file.data");
+  const { page = 1, pageSize = 10, name, ext, storage } = params;
+  let filtered = [...sysFiles];
+
+  if (name)
+    filtered = filtered.filter((f) =>
+      f.originalName.toLowerCase().includes(name.toLowerCase()),
+    );
+  if (ext) filtered = filtered.filter((f) => f.ext === ext);
+  if (storage) filtered = filtered.filter((f) => f.storage === storage);
+
+  const start = (page - 1) * pageSize;
+  const list = filtered.slice(start, start + pageSize);
+
+  return ok({ list, total: filtered.length, page, pageSize });
+}
+
+export async function deleteFile(id: string): Promise<ApiResponse<void>> {
+  if (!isMock) return request.delete(`/file/${id}`);
+
+  const { sysFiles } = await import("../../mock/data/file.data");
+  const index = sysFiles.findIndex((f) => f.id === id);
+  if (index === -1) return error(404, "文件不存在");
+
+  sysFiles.splice(index, 1);
+  return ok(undefined, "删除成功");
+}
diff --git a/antdv-next-admin/src/api/log.ts b/antdv-next-admin/src/api/log.ts
new file mode 100644
index 0000000..2a49754
--- /dev/null
+++ b/antdv-next-admin/src/api/log.ts
@@ -0,0 +1,98 @@
+import type { ApiResponse } from "@/types/api";
+import type {
+  OperationLog,
+  LoginLog,
+  OperationLogQueryParams,
+  LoginLogQueryParams,
+} from "@/types/log";
+
+import { request } from "@/utils/request";
+
+const isMock = import.meta.env.VITE_USE_MOCK === "true";
+
+const ok = <T>(data: T, message = "success"): ApiResponse<T> => ({
+  code: 200,
+  message,
+  data,
+  success: true,
+});
+
+/**
+ * 获取操作日志列表
+ */
+export async function getOperationLogList(
+  params: OperationLogQueryParams,
+): Promise<
+  ApiResponse<{
+    list: OperationLog[];
+    total: number;
+    page: number;
+    pageSize: number;
+  }>
+> {
+  if (!isMock) return request.get("/log/operation/list", { params });
+
+  const { operationLogs } = await import("../../mock/data/log.data");
+  const { page = 1, pageSize = 10, username, module, action, status } = params;
+  let filtered = [...operationLogs];
+
+  if (username)
+    filtered = filtered.filter((l) => l.username.includes(username));
+  if (module) filtered = filtered.filter((l) => l.module === module);
+  if (action) filtered = filtered.filter((l) => l.action === action);
+  if (status) filtered = filtered.filter((l) => l.status === status);
+
+  const start = (page - 1) * pageSize;
+  const list = filtered.slice(start, start + pageSize);
+
+  return ok({ list, total: filtered.length, page, pageSize });
+}
+
+/**
+ * 获取登录日志列表
+ */
+export async function getLoginLogList(params: LoginLogQueryParams): Promise<
+  ApiResponse<{
+    list: LoginLog[];
+    total: number;
+    page: number;
+    pageSize: number;
+  }>
+> {
+  if (!isMock) return request.get("/log/login/list", { params });
+
+  const { loginLogs } = await import("../../mock/data/log.data");
+  const { page = 1, pageSize = 10, username, status } = params;
+  let filtered = [...loginLogs];
+
+  if (username)
+    filtered = filtered.filter((l) => l.username.includes(username));
+  if (status) filtered = filtered.filter((l) => l.status === status);
+
+  const start = (page - 1) * pageSize;
+  const list = filtered.slice(start, start + pageSize);
+
+  return ok({ list, total: filtered.length, page, pageSize });
+}
+
+/**
+ * 清空操作日志
+ */
+export async function clearOperationLog(): Promise<ApiResponse<void>> {
+  if (!isMock) return request.delete("/log/operation/clear");
+
+  const { operationLogs } = await import("../../mock/data/log.data");
+  operationLogs.splice(0, operationLogs.length);
+  return ok(undefined, "清空成功");
+}
+
+/**
+ * 清空登录日志
+ */
+export async function clearLoginLog(): Promise<ApiResponse<void>> {
+  if (!isMock) return request.delete("/log/login/clear");
+
+  const { loginLogs } = await import("../../mock/data/log.data");
+  loginLogs.splice(0, loginLogs.length);
+  return ok(undefined, "清空成功");
+}
diff --git a/antdv-next-admin/src/api/permission.ts b/antdv-next-admin/src/api/permission.ts
new file mode 100644
index 0000000..5ea1a83
--- /dev/null
+++ b/antdv-next-admin/src/api/permission.ts
@@ -0,0 +1,158 @@
+import type { ApiResponse } from "@/types/api";
+import type { Permission } from "@/types/auth";
+
+import { request } from "@/utils/request";
+
+const isMock = import.meta.env.VITE_USE_MOCK === "true";
+
+const ok = <T>(data: T, message = "Success"): ApiResponse<T> => ({
+  code: 200,
+  message,
+  data,
+  success: true,
+});
+
+const notFound = <T = null>(message = "Not found"): ApiResponse<T> => ({
+  code: 404,
+  message,
+  data: null as T,
+  success: false,
+});
+
+/**
+ * Get permission list
+ */
+export async function getPermissionList(
+  params?: Record<string, unknown>,
+): Promise<ApiResponse<Permission[]>> {
+  if (!isMock) return request.get("/permissions", { params });
+
+  const { mockPermissions } = await import("../../mock/data/permissions.data");
+  return ok(mockPermissions);
+}
+
+/**
+ * Get permission tree
+ */
+export async function getPermissionTree(): Promise<ApiResponse<Permission[]>> {
+  if (!isMock) return request.get("/permissions/tree");
+
+  const { mockPermissions } = await import("../../mock/data/permissions.data");
+  return ok(mockPermissions);
+}
+
+/**
+ * Get permission by ID
+ */
+export async function getPermissionById(
+  id: string,
+): Promise<ApiResponse<Permission>> {
+  if (!isMock) return request.get(`/permissions/${id}`);
+
+  const { mockPermissions } = await import("../../mock/data/permissions.data");
+
+  const find = (list: Permission[]): Permission | undefined => {
+    for (const p of list) {
+      if (p.id === id) return p;
+      if (p.children?.length) {
+        const hit = find(p.children as Permission[]);
+        if (hit) return hit;
+      }
+    }
+    return undefined;
+  };
+
+  const perm = find(mockPermissions);
+  if (!perm) return notFound("Permission not found");
+  return ok(perm);
+}
+
+/**
+ * Create permission
+ */
+export async function createPermission(
+  data: Partial<Permission>,
+): Promise<ApiResponse<Permission>> {
+  if (!isMock) return request.post("/permissions", data);
+
+  const { mockPermissions } = await import("../../mock/data/permissions.data");
+  const nowId = String(Date.now());
+  const perm: Permission = {
+    id: nowId,
+    name: data.name || "New Permission",
+    code: data.code || `perm_${nowId}`,
+    description: data.description || "",
+    resource: data.resource || "",
+    action: data.action || "view",
+    type: (data.type as Permission["type"]) || "api",
+  };
+
+  mockPermissions.unshift(perm);
+  return ok(perm, "Permission created successfully");
+}
+
+/**
+ * Update permission
+ */
+export async function updatePermission(
+  id: string,
+  data: Partial<Permission>,
+): Promise<ApiResponse<Permission>> {
+  if (!isMock) return request.put(`/permissions/${id}`, data);
+
+  const { mockPermissions } = await import("../../mock/data/permissions.data");
+
+  const updateRec = (list: Permission[]): Permission | undefined => {
+    for (let i = 0; i < list.length; i++) {
+      const p = list[i];
+      if (p.id === id) {
+        list[i] = { ...p, ...data } as Permission;
+        return list[i];
+      }
+      if (p.children?.length) {
+        const hit = updateRec(p.children as Permission[]);
+        if (hit) return hit;
+      }
+    }
+    return undefined;
+  };
+
+  const updated = updateRec(mockPermissions);
+  if (!updated) return notFound("Permission not found");
+  return ok(updated, "Permission updated successfully");
+}
+
+/**
+ * Delete permission
+ */
+export async function deletePermission(id: string): Promise<ApiResponse<null>> {
+  if (!isMock) return request.delete(`/permissions/${id}`);
+
+  const { mockPermissions } = await import("../../mock/data/permissions.data");
+
+  const deleteRec = (list: Permission[]): boolean => {
+    const idx = list.findIndex((p) => p.id === id);
+    if (idx !== -1) {
+      list.splice(idx, 1);
+      return true;
+    }
+    for (const p of list) {
+      if (p.children?.length && deleteRec(p.children as Permission[]))
+        return true;
+    }
+    return false;
+  };
+
+  if (!deleteRec(mockPermissions)) return notFound("Permission not found");
+  return ok(null, "Permission deleted successfully");
+}
+
+/**
+ * Get permissions for current user
+ */
+export async function getUserPermissions(): Promise<ApiResponse<Permission[]>> {
+  if (!isMock) return request.get("/permissions/user");
+
+  const { mockPermissions } = await import("../../mock/data/permissions.data");
+  return ok(mockPermissions);
+}
diff --git a/antdv-next-admin/src/api/role.ts b/antdv-next-admin/src/api/role.ts
new file mode 100644
index 0000000..000f30c
--- /dev/null
+++ b/antdv-next-admin/src/api/role.ts
@@ -0,0 +1,125 @@
+import type { ApiResponse, PageParams, PageResult } from "@/types/api";
+import type { Role } from "@/types/auth";
+
+import { request } from "@/utils/request";
+
+const isMock = import.meta.env.VITE_USE_MOCK === "true";
+
+const ok = <T>(data: T, message = "Success"): ApiResponse<T> => ({
+  code: 200,
+  message,
+  data,
+  success: true,
+});
+
+const notFound = <T = null>(message = "Not found"): ApiResponse<T> => ({
+  code: 404,
+  message,
+  data: null as T,
+  success: false,
+});
+
+/**
+ * Get role list
+ */
+export async function getRoleList(
+  params: PageParams,
+): Promise<ApiResponse<PageResult<Role>>> {
+  if (!isMock) return request.get("/roles", { params });
+
+  const { mockRoles } = await import("../../mock/data/roles.data");
+  const {
+    current = 1,
+    pageSize = 10,
+    name,
+    code,
+  } = (params || {}) as Record<string, unknown>;
+
+  let filtered = [...mockRoles];
+  if (name)
+    filtered = filtered.filter((r) =>
+      r.name?.toLowerCase().includes(String(name).toLowerCase()),
+    );
+  if (code)
+    filtered = filtered.filter((r) =>
+      r.code?.toLowerCase().includes(String(code).toLowerCase()),
+    );
+
+  const cur = Number(current) || 1;
+  const size = Number(pageSize) || 10;
+  const start = (cur - 1) * size;
+  const list = filtered.slice(start, start + size);
+
+  return ok({ list, total: filtered.length, current: cur, pageSize: size });
+}
+
+/**
+ * Get role by ID
+ */
+export async function getRoleById(id: string): Promise<ApiResponse<Role>> {
+  if (!isMock) return request.get(`/roles/${id}`);
+
+  const { mockRoles } = await import("../../mock/data/roles.data");
+  const role = mockRoles.find((r) => r.id === id);
+  if (!role) return notFound("Role not found");
+  return ok(role);
+}
+
+/**
+ * Create role
+ */
+export async function createRole(
+  data: Partial<Role>,
+): Promise<ApiResponse<Role>> {
+  if (!isMock) return request.post("/roles", data);
+
+  const { mockRoles } = await import("../../mock/data/roles.data");
+  const now = new Date().toISOString();
+  const newRole: Role = {
+    id: String(Date.now()),
+    name: data.name || "New Role",
+    code: data.code || `role_${Date.now()}`,
+    description: data.description || "",
+    permissions: data.permissions || [],
+    createdAt: now,
+    updatedAt: now,
+  };
+
+  mockRoles.unshift(newRole);
+  return ok(newRole, "Role created successfully");
+}
+
+/**
+ * Update role
+ */
+export async function updateRole(
+  id: string,
+  data: Partial<Role>,
+): Promise<ApiResponse<Role>> {
+  if (!isMock) return request.put(`/roles/${id}`, data);
+
+  const { mockRoles } = await import("../../mock/data/roles.data");
+  const idx = mockRoles.findIndex((r) => r.id === id);
+  if (idx === -1) return notFound("Role not found");
+
+  mockRoles[idx] = {
+    ...mockRoles[idx],
+    ...data,
+    updatedAt: new Date().toISOString(),
+  } as Role;
+  return ok(mockRoles[idx], "Role updated successfully");
+}
+
+/**
+ * Delete role
+ */
+export async function deleteRole(id: string): Promise<ApiResponse<null>> {
+  if (!isMock) return request.delete(`/roles/${id}`);
+
+  const { mockRoles } = await import("../../mock/data/roles.data");
+  const idx = mockRoles.findIndex((r) => r.id === id);
+  if (idx === -1) return notFound("Role not found");
+
+  mockRoles.splice(idx, 1);
+  return ok(null, "Role deleted successfully");
+}
diff --git a/antdv-next-admin/src/api/user.ts b/antdv-next-admin/src/api/user.ts
new file mode 100644
index 0000000..b2c6e63
--- /dev/null
+++ b/antdv-next-admin/src/api/user.ts
@@ -0,0 +1,216 @@
+import type { ApiResponse, PageParams, PageResult } from "@/types/api";
+import type { User } from "@/types/auth";
+
+import { request } from "@/utils/request";
+
+const isMock = import.meta.env.VITE_USE_MOCK === "true";
+
+const ok = <T>(data: T, message = "Success"): ApiResponse<T> => ({
+  code: 200,
+  message,
+  data,
+  success: true,
+});
+
+const notFound = <T = null>(message = "Not found"): ApiResponse<T> => ({
+  code: 404,
+  message,
+  data: null as T,
+  success: false,
+});
+
+/**
+ * Get user list
+ */
+export async function getUserList(
+  params: PageParams,
+): Promise<ApiResponse<PageResult<User>>> {
+  if (!isMock) return request.get("/users", { params });
+
+  const { mockUsers } = await import("../../mock/data/users.data");
+
+  const {
+    current = 1,
+    pageSize = 10,
+    username,
+    email,
+    status,
+    gender,
+  } = params || {};
+
+  let filtered = [...mockUsers];
+  if (username)
+    filtered = filtered.filter((u) =>
+      u.username?.toLowerCase().includes(String(username).toLowerCase()),
+    );
+  if (email)
+    filtered = filtered.filter((u) =>
+      u.email?.toLowerCase().includes(String(email).toLowerCase()),
+    );
+  if (gender) {
+    const genderValues = Array.isArray(gender)
+      ? gender.map((item) => String(item))
+      : String(gender)
+          .split(",")
+          .map((item) => item.trim())
+          .filter(Boolean);
+    if (genderValues.length > 0) {
+      filtered = filtered.filter((u) =>
+        genderValues.includes(String(u.gender)),
+      );
+    }
+  }
+  if (status) filtered = filtered.filter((u) => u.status === status);
+
+  const cur = Number(current) || 1;
+  const size = Number(pageSize) || 10;
+  const start = (cur - 1) * size;
+  const list = filtered.slice(start, start + size);
+
+  return ok({
+    list,
+    total: filtered.length,
+    current: cur,
+    pageSize: size,
+  });
+}
+
+/**
+ * Get user by ID
+ */
+export async function getUserById(id: string): Promise<ApiResponse<User>> {
+  if (!isMock) return request.get(`/users/${id}`);
+
+  const { mockUsers, adminUser } = await import("../../mock/data/users.data");
+  const user = (id === "1" ? adminUser : mockUsers.find((u) => u.id === id)) as
+    | User
+    | undefined;
+  if (!user) return notFound("User not found");
+  return ok(user);
+}
+
+/**
+ * Create user
+ */
+export async function createUser(
+  data: Partial<User>,
+): Promise<ApiResponse<User>> {
+  if (!isMock) return request.post("/users", data);
+
+  const { mockUsers } = await import("../../mock/data/users.data");
+  const { faker } = await import("@faker-js/faker");
+
+  const now = new Date().toISOString();
+  const newUser: User = {
+    id: faker.string.uuid(),
+    username: data.username || faker.internet.username(),
+    email: data.email || faker.internet.email(),
+    realName: data.realName || faker.person.fullName(),
+    avatar: data.avatar || faker.image.avatar(),
+    phone: data.phone || `1${faker.string.numeric(10)}`,
+    gender: (data.gender as User["gender"]) || "male",
+    birthDate: data.birthDate || "1990-01-01",
+    bio: data.bio || "",
+    status: (data.status as User["status"]) || "active",
+    createdAt: now,
+    updatedAt: now,
+    roles: data.roles || [],
+    permissions: data.permissions || [],
+  };
+
+  mockUsers.unshift(newUser);
+  return ok(newUser, "User created successfully");
+}
+
+/**
+ * Update user
+ */
+export async function updateUser(
+  id: string,
+  data: Partial<User>,
+): Promise<ApiResponse<User>> {
+  if (!isMock) return request.put(`/users/${id}`, data);
+
+  const { mockUsers, adminUser } = await import("../../mock/data/users.data");
+  const now = new Date().toISOString();
+
+  if (id === "1") {
+    Object.assign(adminUser, data, { updatedAt: now });
+    return ok(adminUser, "User updated successfully");
+  }
+
+  const idx = mockUsers.findIndex((u) => u.id === id);
+  if (idx === -1) return notFound("User not found");
+
+  mockUsers[idx] = { ...mockUsers[idx], ...data, updatedAt: now } as User;
+  return ok(mockUsers[idx], "User updated successfully");
+}
+
+/**
+ * Delete user
+ */
+export async function deleteUser(id: string): Promise<ApiResponse<null>> {
+  if (!isMock) return request.delete(`/users/${id}`);
+
+  if (id === "1")
+    return {
+      code: 400,
+      message: "Cannot delete admin user",
+      data: null,
+      success: false,
+    };
+
+  const { mockUsers } = await import("../../mock/data/users.data");
+  const idx = mockUsers.findIndex((u) => u.id === id);
+  if (idx === -1) return notFound("User not found");
+
+  mockUsers.splice(idx, 1);
+  return ok(null, "User deleted successfully");
+}
+
+/**
+ * Change password
+ */
+export interface ChangePasswordParams {
+  oldPassword: string;
+  newPassword: string;
+}
+
+export async function changePassword(
+  params: ChangePasswordParams,
+): Promise<ApiResponse<null>> {
+  if (!isMock) return request.post("/users/change-password", params);
+
+  // Mock implementation
+  const { oldPassword, newPassword } = params;
+
+  // Simple validation
+  if (!oldPassword || !newPassword) {
+    return {
+      code: 400,
+      message: "Password cannot be empty",
+      data: null,
+      success: false,
+    };
+  }
+
+  if (oldPassword !== "123456") {
+    return {
+      code: 400,
+      message: "Current password is incorrect",
+      data: null,
+      success: false,
+    };
+  }
+
+  if (newPassword.length < 6) {
+    return {
+      code: 400,
+      message: "Password must be at least 6 characters",
+      data: null,
+      success: false,
+    };
+  }
+
+  return ok(null, "Password changed successfully");
+}
diff --git a/antdv-next-admin/src/assets/images/avatar.png b/antdv-next-admin/src/assets/images/avatar.png
new file mode 100644
index 0000000..1ab640e
Binary files /dev/null and b/antdv-next-admin/src/assets/images/avatar.png differ
diff --git a/antdv-next-admin/src/assets/images/logo.png b/antdv-next-admin/src/assets/images/logo.png
new file mode 100644
index 0000000..3420482
Binary files /dev/null and b/antdv-next-admin/src/assets/images/logo.png differ
diff --git a/antdv-next-admin/src/assets/styles/animations.css b/antdv-next-admin/src/assets/styles/animations.css
new file mode 100644
index 0000000..79a30e3
--- /dev/null
+++ b/antdv-next-admin/src/assets/styles/animations.css
@@ -0,0 +1,313 @@
+/* Animation Utilities */
+
+/* ========== Page Transition Animations ========== */
+
+/* Fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity var(--duration-slow) var(--ease-in-out);
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide Left */
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all var(--duration-slow) var(--ease-in-out);
+}
+.slide-left-enter-from {
+  transform: translateX(30px);
+  opacity: 0;
+}
+.slide-left-leave-to {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+
+/* Slide Right */
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all var(--duration-slow) var(--ease-in-out);
+}
+.slide-right-enter-from {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+.slide-right-leave-to {
+  transform: translateX(30px);
+  opacity: 0;
+}
+
+/* Slide Up */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all var(--duration-slow) var(--ease-in-out);
+}
+.slide-up-enter-from {
+  transform: translateY(24px);
+  opacity: 0;
+}
+.slide-up-leave-to {
+  transform: translateY(-24px);
+  opacity: 0;
+}
+
+/* Slide Down */
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all var(--duration-slow) var(--ease-in-out);
+}
+.slide-down-enter-from {
+  transform: translateY(-24px);
+  opacity: 0;
+}
+.slide-down-leave-to {
+  transform: translateY(24px);
+  opacity: 0;
+}
+
+/* Zoom */
+.zoom-enter-active,
+.zoom-leave-active {
+  transition: all var(--duration-slow) var(--ease-out-back);
+}
+.zoom-enter-from,
+.zoom-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+/* Zoom Big */
+.zoom-big-enter-active,
+.zoom-big-leave-active {
+  transition: all var(--duration-slow) var(--ease-out-back);
+}
+.zoom-big-enter-from {
+  transform: scale(0.8);
+  opacity: 0;
+}
+.zoom-big-leave-to {
+  transform: scale(1.1);
+  opacity: 0;
+}
+
+/* ========== Keyframe Animations ========== */
+
+/* Spin */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Skeleton Loading */
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+:root.dark .skeleton {
+  background: linear-gradient(90deg, #2a2a2a 25%, #1f1f1f 37%, #2a2a2a 63%);
+  background-size: 400% 100%;
+}
+
+/* Bounce In */
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.bounce-in {
+  animation: bounce-in var(--duration-slow) var(--ease-out-back);
+}
+
+/* Shake */
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(10px);
+  }
+}
+
+.shake {
+  animation: shake 0.5s;
+}
+
+/* Pulse */
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(24, 144, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
+  }
+}
+
+.pulse {
+  animation: pulse 2s infinite;
+}
+
+/* Ripple Effect */
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+/* Slide Down */
+@keyframes slide-down {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slide-down {
+  animation: slide-down var(--duration-slow) var(--ease-out);
+}
+
+/* Slide Up */
+@keyframes slide-up {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slide-up {
+  animation: slide-up var(--duration-slow) var(--ease-out);
+}
+
+/* Fade In Down */
+@keyframes fade-in-down {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.fade-in-down {
+  animation: fade-in-down var(--duration-slow) var(--ease-out);
+}
+
+/* Fade In Up */
+@keyframes fade-in-up {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.fade-in-up {
+  animation: fade-in-up var(--duration-slow) var(--ease-out);
+}
+
+/* ========== Utility Classes ========== */
+
+/* Card Hover Effect */
+.card-hover {
+  transition: all var(--duration-slow) var(--ease-out);
+  cursor: pointer;
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-card-hover);
+}
+
+/* Button Hover Effect */
+.btn-hover {
+  transition: all var(--duration-base) var(--ease-out);
+}
+
+.btn-hover:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-card-hover);
+}
+
+.btn-hover:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+/* Ripple Effect Container */
+.ripple-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.ripple-effect::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  transform: translate(-50%, -50%);
+  opacity: 0;
+}
+
+.ripple-effect:active::after {
+  width: 20px;
+  height: 20px;
+  animation: ripple 0.6s ease-out;
+}
diff --git a/antdv-next-admin/src/assets/styles/global.css b/antdv-next-admin/src/assets/styles/global.css
new file mode 100644
index 0000000..bc04aee
--- /dev/null
+++ b/antdv-next-admin/src/assets/styles/global.css
@@ -0,0 +1,585 @@
+/* Global Styles */
+
+/* ========== CSS Reset ========== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* ========== Theme Transition ========== */
+
+html.theme-transition,
+html.theme-transition *,
+html.theme-transition *::before,
+html.theme-transition *::after {
+  transition-property: color, background-color, border-color, box-shadow, fill, stroke;
+  transition-duration: 0.46s;
+  transition-timing-function: var(--ease-in-out);
+}
+
+/* 确保表格元素在 View Transition 期间不会创建独立的层叠上下文 */
+html.theme-view-transition .ant-table-wrapper,
+html.theme-view-transition .ant-table,
+html.theme-view-transition .ant-table-container,
+html.theme-view-transition .ant-table-content,
+html.theme-view-transition .ant-table-sticky-holder {
+  contain: none !important;
+  isolation: auto !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html.theme-transition,
+  html.theme-transition *,
+  html.theme-transition *::before,
+  html.theme-transition *::after {
+    transition: none !important;
+  }
+
+  html.theme-view-transition::view-transition-old(root),
+  html.theme-view-transition::view-transition-new(root) {
+    animation: none !important;
+  }
+}
+
+html.theme-view-transition::view-transition-old(root),
+html.theme-view-transition::view-transition-new(root) {
+  mix-blend-mode: normal;
+  will-change: clip-path;
+}
+
+html.theme-view-transition::view-transition-old(root) {
+  animation: none;
+  z-index: 1;
+}
+
+html.theme-view-transition::view-transition-new(root) {
+  animation: theme-clip-reveal 0.74s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  z-index: 9999;
+}
+
+html.theme-view-transition.dark::view-transition-old(root) {
+  animation: theme-clip-conceal 0.74s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  z-index: 9999;
+}
+
+html.theme-view-transition.dark::view-transition-new(root) {
+  animation: none;
+  z-index: 1;
+}
+
+@keyframes theme-clip-reveal {
+  from {
+    clip-path: circle(0 at var(--theme-transition-x) var(--theme-transition-y));
+  }
+  to {
+    clip-path: circle(
+      var(--theme-transition-radius) at var(--theme-transition-x) var(--theme-transition-y)
+    );
+  }
+}
+
+@keyframes theme-clip-conceal {
+  from {
+    clip-path: circle(
+      var(--theme-transition-radius) at var(--theme-transition-x) var(--theme-transition-y)
+    );
+  }
+  to {
+    clip-path: circle(0 at var(--theme-transition-x) var(--theme-transition-y));
+  }
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-base);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-layout);
+}
+
+/* ========== Typography ========== */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text-primary);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+h2 {
+  font-size: var(--font-size-3xl);
+}
+h3 {
+  font-size: var(--font-size-2xl);
+}
+h4 {
+  font-size: var(--font-size-xl);
+}
+h5 {
+  font-size: var(--font-size-lg);
+}
+h6 {
+  font-size: var(--font-size-base);
+}
+
+p {
+  margin: 0;
+  line-height: var(--line-height-base);
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-base);
+}
+
+a:hover {
+  color: var(--color-primary-5);
+}
+
+/* ========== Lists ========== */
+
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ========== Scrollbar ========== */
+
+/* For Webkit browsers */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-layout);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border);
+  opacity: 0.8;
+}
+
+/* For Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) var(--color-bg-layout);
+}
+
+/* ========== Utility Classes ========== */
+
+/* Text Alignment */
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+
+/* Text Colors */
+.text-primary {
+  color: var(--color-text-primary);
+}
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+.text-tertiary {
+  color: var(--color-text-tertiary);
+}
+.text-success {
+  color: var(--color-success);
+}
+.text-warning {
+  color: var(--color-warning);
+}
+.text-error {
+  color: var(--color-error);
+}
+.text-info {
+  color: var(--color-info);
+}
+
+/* Font Weights */
+.font-normal {
+  font-weight: var(--font-weight-normal);
+}
+.font-medium {
+  font-weight: var(--font-weight-medium);
+}
+.font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+.font-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Display */
+.block {
+  display: block;
+}
+.inline-block {
+  display: inline-block;
+}
+.inline {
+  display: inline;
+}
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.grid {
+  display: grid;
+}
+.hidden {
+  display: none;
+}
+
+/* Flex Utilities */
+.flex-row {
+  flex-direction: row;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+.justify-start {
+  justify-content: flex-start;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-around {
+  justify-content: space-around;
+}
+.items-start {
+  align-items: flex-start;
+}
+.items-end {
+  align-items: flex-end;
+}
+.items-center {
+  align-items: center;
+}
+.items-baseline {
+  align-items: baseline;
+}
+.items-stretch {
+  align-items: stretch;
+}
+.flex-1 {
+  flex: 1;
+}
+
+/* Spacing */
+.m-0 {
+  margin: 0;
+}
+.mt-0 {
+  margin-top: 0;
+}
+.mr-0 {
+  margin-right: 0;
+}
+.mb-0 {
+  margin-bottom: 0;
+}
+.ml-0 {
+  margin-left: 0;
+}
+
+.p-0 {
+  padding: 0;
+}
+.pt-0 {
+  padding-top: 0;
+}
+.pr-0 {
+  padding-right: 0;
+}
+.pb-0 {
+  padding-bottom: 0;
+}
+.pl-0 {
+  padding-left: 0;
+}
+
+/* Margin Spacing */
+.m-xs {
+  margin: var(--spacing-xs);
+}
+.m-sm {
+  margin: var(--spacing-sm);
+}
+.m-md {
+  margin: var(--spacing-md);
+}
+.m-lg {
+  margin: var(--spacing-lg);
+}
+.m-xl {
+  margin: var(--spacing-xl);
+}
+
+.mt-xs {
+  margin-top: var(--spacing-xs);
+}
+.mt-sm {
+  margin-top: var(--spacing-sm);
+}
+.mt-md {
+  margin-top: var(--spacing-md);
+}
+.mt-lg {
+  margin-top: var(--spacing-lg);
+}
+.mt-xl {
+  margin-top: var(--spacing-xl);
+}
+
+.mb-xs {
+  margin-bottom: var(--spacing-xs);
+}
+.mb-sm {
+  margin-bottom: var(--spacing-sm);
+}
+.mb-md {
+  margin-bottom: var(--spacing-md);
+}
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+.mb-xl {
+  margin-bottom: var(--spacing-xl);
+}
+
+/* Padding Spacing */
+.p-xs {
+  padding: var(--spacing-xs);
+}
+.p-sm {
+  padding: var(--spacing-sm);
+}
+.p-md {
+  padding: var(--spacing-md);
+}
+.p-lg {
+  padding: var(--spacing-lg);
+}
+.p-xl {
+  padding: var(--spacing-xl);
+}
+
+/* Width */
+.w-full {
+  width: 100%;
+}
+.w-auto {
+  width: auto;
+}
+
+/* Height */
+.h-full {
+  height: 100%;
+}
+.h-auto {
+  height: auto;
+}
+.h-screen {
+  height: 100vh;
+}
+
+/* Border Radius */
+.rounded-none {
+  border-radius: 0;
+}
+.rounded-sm {
+  border-radius: var(--radius-sm);
+}
+.rounded {
+  border-radius: var(--radius-base);
+}
+.rounded-lg {
+  border-radius: var(--radius-lg);
+}
+.rounded-full {
+  border-radius: var(--radius-full);
+}
+
+/* Cursor */
+.cursor-pointer {
+  cursor: pointer;
+}
+.cursor-default {
+  cursor: default;
+}
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+/* Position */
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.fixed {
+  position: fixed;
+}
+.sticky {
+  position: sticky;
+}
+
+/* Overflow */
+.overflow-auto {
+  overflow: auto;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.overflow-visible {
+  overflow: visible;
+}
+.overflow-scroll {
+  overflow: scroll;
+}
+
+/* Transitions */
+.transition-all {
+  transition: all var(--duration-base) var(--ease-out);
+}
+
+.transition-colors {
+  transition:
+    color var(--duration-base) var(--ease-out),
+    background-color var(--duration-base) var(--ease-out),
+    border-color var(--duration-base) var(--ease-out);
+}
+
+.transition-transform {
+  transition: transform var(--duration-base) var(--ease-out);
+}
+
+/* ========== Card Component ========== */
+
+.card {
+  background: var(--color-bg-container);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  border: 1px solid var(--color-border-secondary);
+  padding: var(--spacing-lg);
+  transition: all var(--duration-slow) var(--ease-out);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-card-hover);
+}
+
+/* ========== Page Container ========== */
+
+.page-container {
+  box-sizing: border-box;
+  padding: 0;
+  min-height: 100%;
+}
+
+.page-header {
+  margin-bottom: var(--spacing-lg);
+}
+
+.page-title {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.page-description {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* ========== Loading States ========== */
+
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+/* ========== Empty States ========== */
+
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3xl) var(--spacing-lg);
+  color: var(--color-text-tertiary);
+}
+
+.empty-icon {
+  font-size: 64px;
+  margin-bottom: var(--spacing-md);
+}
+
+.empty-text {
+  font-size: var(--font-size-base);
+}
+
+/* ========== Responsive ========== */
+
+@media (max-width: 768px) {
+  .page-container {
+    padding: 0;
+  }
+
+  .card {
+    padding: var(--spacing-md);
+  }
+}
diff --git a/antdv-next-admin/src/assets/styles/tailwind.css b/antdv-next-admin/src/assets/styles/tailwind.css
new file mode 100644
index 0000000..6dedc65
--- /dev/null
+++ b/antdv-next-admin/src/assets/styles/tailwind.css
@@ -0,0 +1,16 @@
+@layer theme, base, antd, components, utilities;
+
+@import 'tailwindcss';
+
+@theme {
+  --color-primary: var(--color-primary);
+  --color-text-primary: var(--color-text-primary);
+  --color-text-secondary: var(--color-text-secondary);
+  --color-bg-container: var(--color-bg-container);
+  --color-bg-layout: var(--color-bg-layout);
+  --color-border: var(--color-border);
+  --color-success: var(--color-success);
+  --color-warning: var(--color-warning);
+  --color-error: var(--color-error);
+  --color-info: var(--color-info);
+}
\ No newline at end of file
diff --git a/antdv-next-admin/src/assets/styles/variables.css b/antdv-next-admin/src/assets/styles/variables.css
new file mode 100644
index 0000000..c3f315c
--- /dev/null
+++ b/antdv-next-admin/src/assets/styles/variables.css
@@ -0,0 +1,249 @@
+/* CSS Variables - Design Tokens */
+
+:root {
+  /* ========== Typography ========== */
+  --font-family:
+    'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family-number:
+    'DIN Alternate', 'Bahnschrift', 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
+
+  --font-family-code:
+    'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+
+  /* Font Sizes */
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 30px;
+  --font-size-4xl: 38px;
+
+  /* Line Heights */
+  --line-height-base: 1.5715;
+  --line-height-tight: 1.3;
+  --line-height-relaxed: 1.8;
+
+  /* Font Weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* ========== Spacing ========== */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 64px;
+
+  /* ========== Border Radius ========== */
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-base: 8px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  /* ========== Animation Duration ========== */
+  --duration-fast: 0.1s;
+  --duration-base: 0.2s;
+  --duration-slow: 0.3s;
+  --duration-slower: 0.5s;
+
+  /* ========== Easing Functions ========== */
+  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  --ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+  --ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
+
+  /* ========== Shadows (Diffused, Professional) ========== */
+  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
+
+  --shadow-2: 0 6px 20px rgba(15, 23, 42, 0.06);
+
+  --shadow-3: 0 12px 36px rgba(15, 23, 42, 0.08);
+
+  --shadow-card: 0 6px 24px rgba(15, 23, 42, 0.06);
+  --shadow-card-hover: 0 10px 32px rgba(15, 23, 42, 0.12);
+  --shadow-drawer: 0 8px 40px 0 rgba(0, 0, 0, 0.12);
+  --shadow-modal: 0 12px 48px 0 rgba(0, 0, 0, 0.15);
+
+  /* ========== Functional Colors ========== */
+  --color-success: #52c41a;
+  --color-success-bg: #f6ffed;
+  --color-success-border: #b7eb8f;
+
+  --color-warning: #faad14;
+  --color-warning-bg: #fffbe6;
+  --color-warning-border: #ffe58f;
+
+  --color-error: #ff4d4f;
+  --color-error-bg: #fff2f0;
+  --color-error-border: #ffccc7;
+
+  --color-info: #1890ff;
+  --color-info-bg: #e6f7ff;
+  --color-info-border: #91d5ff;
+
+  /* ========== Neutral Colors (Light Mode) ========== */
+  --color-text-primary: rgba(0, 0, 0, 0.85);
+  --color-text-secondary: rgba(0, 0, 0, 0.65);
+  --color-text-tertiary: rgba(0, 0, 0, 0.45);
+  --color-text-quaternary: rgba(0, 0, 0, 0.25);
+
+  --color-border: #d9d9d9;
+  --color-border-secondary: #f0f0f0;
+
+  --color-bg-container: #ffffff;
+  --color-bg-layout: #f5f7fa;
+  --color-bg-mask: rgba(0, 0, 0, 0.45);
+
+  /* Fill colors */
+  --color-fill-quaternary: #fafafa;
+
+  /* ========== Z-Index ========== */
+  --z-index-dropdown: 1050;
+  --z-index-modal: 1060;
+  --z-index-drawer: 1070;
+  --z-index-notification: 1080;
+
+  /* ========== Primary Colors (Default: Blue) ========== */
+  /* Provide defaults so styles work even before JS sets data-primary-color */
+  --color-primary-1: #e6f7ff;
+  --color-primary-2: #bae7ff;
+  --color-primary-3: #91d5ff;
+  --color-primary-4: #69c0ff;
+  --color-primary-5: #40a9ff;
+  --color-primary-6: #1890ff;
+  --color-primary-7: #096dd9;
+  --color-primary-8: #0050b3;
+  --color-primary-9: #003a8c;
+  --color-primary-10: #002766;
+  --color-primary: var(--color-primary-6);
+}
+
+/* ========== Primary Color Themes ========== */
+
+/* Blue Theme (Default) */
+:root[data-primary-color='blue'] {
+  --color-primary-1: #e6f7ff;
+  --color-primary-2: #bae7ff;
+  --color-primary-3: #91d5ff;
+  --color-primary-4: #69c0ff;
+  --color-primary-5: #40a9ff;
+  --color-primary-6: #1890ff;
+  --color-primary-7: #096dd9;
+  --color-primary-8: #0050b3;
+  --color-primary-9: #003a8c;
+  --color-primary-10: #002766;
+  --color-primary: var(--color-primary-6);
+}
+
+/* Green Theme */
+:root[data-primary-color='green'] {
+  --color-primary-1: #f6ffed;
+  --color-primary-2: #d9f7be;
+  --color-primary-3: #b7eb8f;
+  --color-primary-4: #95de64;
+  --color-primary-5: #73d13d;
+  --color-primary-6: #52c41a;
+  --color-primary-7: #389e0d;
+  --color-primary-8: #237804;
+  --color-primary-9: #135200;
+  --color-primary-10: #092b00;
+  --color-primary: var(--color-primary-6);
+}
+
+/* Purple Theme */
+:root[data-primary-color='purple'] {
+  --color-primary-1: #f9f0ff;
+  --color-primary-2: #efdbff;
+  --color-primary-3: #d3adf7;
+  --color-primary-4: #b37feb;
+  --color-primary-5: #9254de;
+  --color-primary-6: #722ed1;
+  --color-primary-7: #531dab;
+  --color-primary-8: #391085;
+  --color-primary-9: #22075e;
+  --color-primary-10: #120338;
+  --color-primary: var(--color-primary-6);
+}
+
+/* Red Theme */
+:root[data-primary-color='red'] {
+  --color-primary-1: #fff1f0;
+  --color-primary-2: #ffccc7;
+  --color-primary-3: #ffa39e;
+  --color-primary-4: #ff7875;
+  --color-primary-5: #ff4d4f;
+  --color-primary-6: #f5222d;
+  --color-primary-7: #cf1322;
+  --color-primary-8: #a8071a;
+  --color-primary-9: #820014;
+  --color-primary-10: #5c0011;
+  --color-primary: var(--color-primary-6);
+}
+
+/* Orange Theme */
+:root[data-primary-color='orange'] {
+  --color-primary-1: #fff7e6;
+  --color-primary-2: #ffe7ba;
+  --color-primary-3: #ffd591;
+  --color-primary-4: #ffc069;
+  --color-primary-5: #ffa940;
+  --color-primary-6: #fa8c16;
+  --color-primary-7: #d46b08;
+  --color-primary-8: #ad4e00;
+  --color-primary-9: #873800;
+  --color-primary-10: #612500;
+  --color-primary: var(--color-primary-6);
+}
+
+/* Cyan Theme */
+:root[data-primary-color='cyan'] {
+  --color-primary-1: #e6fffb;
+  --color-primary-2: #b5f5ec;
+  --color-primary-3: #87e8de;
+  --color-primary-4: #5cdbd3;
+  --color-primary-5: #36cfc9;
+  --color-primary-6: #13c2c2;
+  --color-primary-7: #08979c;
+  --color-primary-8: #006d75;
+  --color-primary-9: #00474f;
+  --color-primary-10: #002329;
+  --color-primary: var(--color-primary-6);
+}
+
+/* ========== Dark Mode ========== */
+:root.dark {
+  --color-text-primary: rgba(255, 255, 255, 0.85);
+  --color-text-secondary: rgba(255, 255, 255, 0.65);
+  --color-text-tertiary: rgba(255, 255, 255, 0.45);
+  --color-text-quaternary: rgba(255, 255, 255, 0.25);
+
+  --color-border: #434343;
+  --color-border-secondary: #303030;
+
+  --color-bg-container: #1f1f1f;
+  --color-bg-layout: #141414;
+  --color-bg-mask: rgba(0, 0, 0, 0.65);
+
+  /* Fill colors for dark mode */
+  --color-fill-quaternary: rgba(255, 255, 255, 0.08);
+
+  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.28);
+  --shadow-card-hover: 0 14px 36px rgba(0, 0, 0, 0.4);
+}
+
+/* ========== Gray Mode ========== */
+html.gray-mode {
+  filter: grayscale(100%);
+}
diff --git a/antdv-next-admin/src/components/Captcha/index.ts b/antdv-next-admin/src/components/Captcha/index.ts
new file mode 100644
index 0000000..43c47b8
--- /dev/null
+++ b/antdv-next-admin/src/components/Captcha/index.ts
@@ -0,0 +1,6 @@
+import PointCaptcha from './src/PointCaptcha.vue';
+import PuzzleCaptcha from './src/PuzzleCaptcha.vue';
+import RotateCaptcha from './src/RotateCaptcha.vue';
+import SliderCaptcha from './src/SliderCaptcha.vue';
+
+export { SliderCaptcha, RotateCaptcha, PuzzleCaptcha, PointCaptcha };
diff --git a/antdv-next-admin/src/components/Captcha/src/PointCaptcha.vue b/antdv-next-admin/src/components/Captcha/src/PointCaptcha.vue
new file mode 100644
index 0000000..bf659d1
--- /dev/null
+++ b/antdv-next-admin/src/components/Captcha/src/PointCaptcha.vue
@@ -0,0 +1,246 @@
+<template>
+  <div
+    class="point-captcha"
+    ref="containerRef"
+    :style="{ width: typeof width === 'number' ? width + 'px' : width }"
+  >
+    <div class="point-img-wrapper" :style="{ height: currentHeight + 'px' }">
+      <canvas
+        ref="canvasRef"
+        :width="currentWidth"
+        :height="currentHeight"
+        @click="handleClick"
+      ></canvas>
+      <div
+        v-for="(point, index) in clicks"
+        :key="index"
+        class="point-mark"
+        :style="{ left: point.x + 'px', top: point.y + 'px' }"
+      >
+        {{ index + 1 }}
+      </div>
+      <div v-if="isSuccess" class="success-mask">
+        <span class="success-icon">✔</span>
+      </div>
+    </div>
+    <div class="point-toolbar">
+      <div class="point-tip">
+        {{ $t('captcha.clickInOrder') }}<span class="highlight">{{ checkPoints.join(',') }}</span>
+      </div>
+      <a-button size="small" @click="reset">{{ $t('captcha.refresh') }}</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+interface Props {
+  width?: number | string;
+  height?: number | string;
+  src?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: '100%',
+  height: 160,
+  src: 'https://picsum.photos/320/160',
+});
+
+const emit = defineEmits(['success', 'fail']);
+
+const containerRef = ref<HTMLElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const clicks = ref<{ x: number; y: number }[]>([]);
+const checkPoints = ref<string[]>([]);
+const points = ref<{ x: number; y: number; text: string }[]>([]);
+const isSuccess = ref(false);
+const currentWidth = ref(320);
+const currentHeight = ref(160);
+let resizeObserver: ResizeObserver | null = null;
+
+const randomNum = (min: number, max: number) => Math.floor(Math.random() * (max - min) + min);
+const randomColor = (min: number, max: number) => {
+  const r = randomNum(min, max);
+  const g = randomNum(min, max);
+  const b = randomNum(min, max);
+  return `rgb(${r},${g},${b})`;
+};
+
+const init = () => {
+  clicks.value = [];
+  points.value = [];
+  checkPoints.value = [];
+  isSuccess.value = false;
+
+  if (!canvasRef.value) return;
+  const ctx = canvasRef.value.getContext('2d');
+  if (!ctx) return;
+
+  // Calculate dimensions based on container width
+  const ratio = 160 / 320; // Default aspect ratio
+  if (containerRef.value) {
+    const w = containerRef.value.clientWidth;
+    if (w > 0) {
+      currentWidth.value = w;
+      if (typeof props.height === 'number') {
+        currentHeight.value = props.height;
+      } else {
+        currentHeight.value = Math.floor(w * ratio);
+      }
+    }
+  }
+
+  const img = new Image();
+  img.crossOrigin = 'Anonymous';
+  img.src = props.src + '?t=' + new Date().getTime();
+  img.onload = () => {
+    ctx.drawImage(img, 0, 0, currentWidth.value, currentHeight.value);
+
+    const pool = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+    for (let i = 0; i < 4; i++) {
+      const text = pool[randomNum(0, pool.length)];
+      const fontSize = randomNum(20, 30);
+      const deg = randomNum(-30, 30);
+
+      const gridW = currentWidth.value / 4;
+      const x = randomNum(gridW * i + 10, gridW * (i + 1) - 10);
+      const y = randomNum(30, currentHeight.value - 10);
+
+      points.value.push({ x, y, text });
+
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.rotate((deg * Math.PI) / 180);
+      ctx.fillStyle = randomColor(50, 160);
+      ctx.font = `bold ${fontSize}px sans-serif`;
+      ctx.fillText(text, 0, 0);
+      ctx.restore();
+    }
+
+    const targets = [...points.value].toSorted(() => Math.random() - 0.5).slice(0, 3);
+    checkPoints.value = targets.map((p) => p.text);
+  };
+};
+
+onMounted(() => {
+  init();
+
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => init());
+    });
+    resizeObserver.observe(containerRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+const handleClick = (e: MouseEvent) => {
+  if (isSuccess.value || clicks.value.length >= 3) return;
+
+  const rect = (e.target as HTMLElement).getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+
+  clicks.value.push({ x, y });
+
+  if (clicks.value.length === 3) {
+    verify();
+  }
+};
+
+const verify = () => {
+  const isCorrect = clicks.value.every((click, index) => {
+    const targetChar = checkPoints.value[index];
+    const targetPoint = points.value.find((p) => p.text === targetChar);
+    if (!targetPoint) return false;
+
+    const dx = click.x - targetPoint.x;
+    const dy = click.y - targetPoint.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    return dist < 30;
+  });
+
+  if (isCorrect) {
+    isSuccess.value = true;
+    emit('success');
+  } else {
+    emit('fail');
+    setTimeout(() => {
+      clicks.value = [];
+    }, 1000);
+  }
+};
+
+const reset = () => {
+  init();
+};
+
+defineExpose({ reset });
+</script>
+
+<style scoped>
+.point-captcha {
+  user-select: none;
+}
+.point-img-wrapper {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: var(--color-bg-layout);
+}
+.point-mark {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: var(--color-primary);
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 20px;
+  font-size: 12px;
+  transform: translate(-50%, -50%);
+  border: 2px solid #fff;
+  z-index: 2;
+  pointer-events: none;
+}
+.success-mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+}
+.success-icon {
+  font-size: 32px;
+  color: var(--color-success);
+}
+.point-toolbar {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  background-color: var(--color-bg-container);
+  border: 1px solid var(--color-border);
+  padding: 0 10px;
+  border-radius: 4px;
+}
+.point-tip {
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+.highlight {
+  color: var(--color-primary);
+  font-weight: bold;
+  margin: 0 4px;
+}
+</style>
diff --git a/antdv-next-admin/src/components/Captcha/src/PuzzleCaptcha.vue b/antdv-next-admin/src/components/Captcha/src/PuzzleCaptcha.vue
new file mode 100644
index 0000000..0aa5a03
--- /dev/null
+++ b/antdv-next-admin/src/components/Captcha/src/PuzzleCaptcha.vue
@@ -0,0 +1,307 @@
+<template>
+  <div
+    class="puzzle-captcha"
+    ref="containerRef"
+    :style="{ width: typeof width === 'number' ? width + 'px' : width }"
+  >
+    <div class="puzzle-img-wrapper" :style="{ height: currentHeight + 'px' }">
+      <canvas
+        ref="mainCanvasRef"
+        :width="currentWidth"
+        :height="currentHeight"
+        class="puzzle-main"
+      ></canvas>
+      <canvas
+        ref="moveCanvasRef"
+        class="puzzle-move"
+        :style="{ left: `${sliderLeft}px`, height: `${currentHeight}px` }"
+      ></canvas>
+      <div v-if="loading" class="loading-mask">Loading...</div>
+      <div v-if="isSuccess" class="success-mask">
+        <span class="success-icon">✔</span>
+      </div>
+    </div>
+    <div class="puzzle-slider" ref="sliderContainerRef">
+      <div class="slider-track"></div>
+      <div class="slider-handle" :style="{ left: `${sliderLeft}px` }" @mousedown="handleMouseDown">
+        <span>→</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+interface Props {
+  width?: number | string;
+  height?: number | string;
+  src?: string;
+  tolerance?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: '100%',
+  height: 160,
+  src: 'https://picsum.photos/320/160',
+  tolerance: 5,
+});
+
+const emit = defineEmits(['success', 'fail']);
+
+const containerRef = ref<HTMLElement | null>(null);
+const mainCanvasRef = ref<HTMLCanvasElement | null>(null);
+const moveCanvasRef = ref<HTMLCanvasElement | null>(null);
+const isMoving = ref(false);
+const isSuccess = ref(false);
+const loading = ref(false);
+const sliderLeft = ref(0);
+const targetX = ref(0);
+const currentWidth = ref(320);
+const currentHeight = ref(160);
+let resizeObserver: ResizeObserver | null = null;
+
+// Puzzle shape params
+const l = 42;
+const r = 9;
+const PI = Math.PI;
+
+const drawPuzzleShape = (
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  operation: 'fill' | 'clip',
+) => {
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(x + l / 2, y);
+  ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
+  ctx.lineTo(x + l, y);
+  ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
+  ctx.lineTo(x + l, y + l);
+  ctx.lineTo(x, y + l);
+  ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
+  ctx.lineTo(x, y);
+  ctx.lineWidth = 2;
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
+  ctx.stroke();
+  ctx.globalCompositeOperation = 'destination-over';
+  if (operation === 'fill') {
+    ctx.fill();
+  } else {
+    ctx.clip();
+  }
+};
+
+const init = () => {
+  if (!mainCanvasRef.value || !moveCanvasRef.value) return;
+  const mainCtx = mainCanvasRef.value.getContext('2d');
+  const moveCtx = moveCanvasRef.value.getContext('2d');
+  if (!mainCtx || !moveCtx) return;
+
+  loading.value = true;
+  isSuccess.value = false;
+  sliderLeft.value = 0;
+
+  // Calculate dimensions based on container width while maintaining aspect ratio
+  // Default aspect ratio 2:1 (320:160)
+  const ratio = 160 / 320;
+  if (containerRef.value) {
+    const w = containerRef.value.clientWidth;
+    if (w > 0) {
+      currentWidth.value = w;
+      // If props.height is a number, use it. If string/auto, calculate from ratio
+      if (typeof props.height === 'number') {
+        currentHeight.value = props.height;
+      } else {
+        currentHeight.value = Math.floor(w * ratio);
+      }
+    }
+  }
+
+  mainCtx.clearRect(0, 0, currentWidth.value, currentHeight.value);
+  moveCtx.clearRect(0, 0, currentWidth.value, currentHeight.value);
+  moveCanvasRef.value.width = currentWidth.value;
+  moveCanvasRef.value.height = currentHeight.value; // Ensure height is set
+
+  // Ensure targetX is within bounds
+  // l + r * 4 is roughly the puzzle piece width
+  const pieceWidth = l + r * 4;
+  const safeWidth = currentWidth.value - pieceWidth;
+  // If container is too small, fallback logic needed, but for now assume min width > pieceWidth
+  targetX.value = Math.floor(Math.random() * (Math.max(0, safeWidth - l) - l) + l);
+
+  const safeHeight = currentHeight.value - l;
+  const targetY = Math.floor(Math.random() * (Math.max(0, safeHeight - l) - l) + l);
+
+  const img = new Image();
+  img.crossOrigin = 'Anonymous';
+  img.src = props.src + '?t=' + new Date().getTime();
+  img.onload = () => {
+    // Draw puzzle piece
+    drawPuzzleShape(moveCtx, targetX.value, targetY, 'clip');
+    moveCtx.drawImage(img, 0, 0, currentWidth.value, currentHeight.value);
+
+    // Extract puzzle piece
+    const puzzleData = moveCtx.getImageData(
+      targetX.value - r * 2,
+      targetY - r * 2,
+      pieceWidth,
+      pieceWidth,
+    );
+    moveCanvasRef.value!.width = pieceWidth;
+    moveCanvasRef.value!.height = currentHeight.value;
+    moveCtx.putImageData(puzzleData, 0, targetY - r * 2);
+
+    // Draw main background with hole
+    mainCtx.drawImage(img, 0, 0, currentWidth.value, currentHeight.value);
+    drawPuzzleShape(mainCtx, targetX.value, targetY, 'fill');
+
+    loading.value = false;
+  };
+};
+
+onMounted(() => {
+  init();
+
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver(() => {
+      // Debounce or just re-init
+      // Simple re-init for now
+      requestAnimationFrame(() => init());
+    });
+    resizeObserver.observe(containerRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+const handleMouseDown = (evt: MouseEvent) => {
+  if (isSuccess.value || loading.value) return;
+  isMoving.value = true;
+  const startX = evt.clientX;
+  const startLeft = sliderLeft.value;
+
+  const handleMouseMove = (moveEvt: MouseEvent) => {
+    if (!isMoving.value) return;
+    const deltaX = moveEvt.clientX - startX;
+    let newLeft = startLeft + deltaX;
+    // Limit range
+    const maxLeft = currentWidth.value - 40; // slider handle width
+    newLeft = Math.max(0, Math.min(maxLeft, newLeft));
+    sliderLeft.value = newLeft;
+  };
+
+  const handleMouseUp = () => {
+    isMoving.value = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+
+    // Validation logic
+    const realTarget = targetX.value - r * 2;
+    if (Math.abs(sliderLeft.value - realTarget) <= props.tolerance) {
+      isSuccess.value = true;
+      emit('success');
+    } else {
+      emit('fail');
+      // Reset animation
+      const animate = () => {
+        if (sliderLeft.value > 0) {
+          sliderLeft.value = Math.max(0, sliderLeft.value - 10);
+          requestAnimationFrame(animate);
+        }
+      };
+      animate();
+    }
+  };
+
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+};
+
+const reset = () => {
+  init();
+};
+
+defineExpose({ reset });
+</script>
+
+<style scoped>
+.puzzle-captcha {
+  position: relative;
+  user-select: none;
+}
+.puzzle-img-wrapper {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  background-color: var(--color-bg-layout);
+}
+.puzzle-main {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.puzzle-move {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+.success-mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+}
+.success-icon {
+  font-size: 32px;
+  color: var(--color-success);
+}
+.puzzle-slider {
+  position: relative;
+  height: 40px;
+  margin-top: 12px;
+  background-color: var(--color-bg-container);
+  border: 1px solid var(--color-border);
+  border-radius: 2px;
+}
+.slider-track {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: var(--color-bg-layout);
+  transform: translateY(-50%);
+}
+.slider-handle {
+  position: absolute;
+  top: -1px;
+  width: 40px;
+  height: 40px;
+  background-color: var(--color-bg-container);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+}
+.slider-handle:active {
+  cursor: grabbing;
+  background-color: var(--color-primary);
+  color: #fff;
+}
+</style>
diff --git a/antdv-next-admin/src/components/Captcha/src/RotateCaptcha.vue b/antdv-next-admin/src/components/Captcha/src/RotateCaptcha.vue
new file mode 100644
index 0000000..c55644f
--- /dev/null
+++ b/antdv-next-admin/src/components/Captcha/src/RotateCaptcha.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="rotate-captcha" :style="{ width: typeof width === 'number' ? width + 'px' : width }">
+    <div class="rotate-img-wrapper">
+      <img
+        :src="src"
+        class="rotate-img"
+        :style="{ transform: `rotate(${currentAngle}deg)` }"
+        alt="captcha"
+        draggable="false"
+      />
+      <div v-if="isSuccess" class="success-mask">
+        <span class="success-icon">✔</span>
+      </div>
+    </div>
+    <div class="rotate-slider" ref="sliderRef">
+      <div class="slider-track"></div>
+      <div
+        class="slider-handle"
+        :style="{ left: `${sliderPercent}%` }"
+        @mousedown="handleMouseDown"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Props {
+  width?: number | string;
+  height?: number | string;
+  src?: string;
+  tolerance?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: '100%',
+  src: 'https://picsum.photos/300/300',
+  tolerance: 10,
+});
+
+const emit = defineEmits(['success', 'fail']);
+
+const currentAngle = ref(0);
+const sliderPercent = ref(0);
+const isMoving = ref(false);
+const isSuccess = ref(false);
+const initialAngle = ref(0);
+const sliderRef = ref<HTMLElement | null>(null);
+
+const init = () => {
+  initialAngle.value = Math.random() * 300 + 30;
+  currentAngle.value = initialAngle.value;
+  sliderPercent.value = 0;
+  isSuccess.value = false;
+};
+
+// Init
+init();
+
+const handleMouseDown = (evt: MouseEvent) => {
+  if (isSuccess.value) return;
+  isMoving.value = true;
+  const startX = evt.clientX;
+  const startPercent = sliderPercent.value;
+
+  const handleMouseMove = (moveEvt: MouseEvent) => {
+    if (!isMoving.value) return;
+    const container = sliderRef.value;
+    if (!container) return;
+
+    const width = container.clientWidth;
+    const deltaX = moveEvt.clientX - startX;
+    const deltaPercent = (deltaX / width) * 100;
+
+    let newPercent = startPercent + deltaPercent;
+    newPercent = Math.max(0, Math.min(100, newPercent));
+
+    sliderPercent.value = newPercent;
+    // Map 0-100% to 0-360deg to offset initial angle
+    const rotateDelta = (newPercent / 100) * 360;
+    currentAngle.value = initialAngle.value - rotateDelta;
+  };
+
+  const handleMouseUp = () => {
+    isMoving.value = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+
+    // Check if angle is close to 0 (360 multiples)
+    let normalizedAngle = currentAngle.value % 360;
+    if (normalizedAngle > 180) normalizedAngle -= 360;
+    if (normalizedAngle < -180) normalizedAngle += 360;
+
+    if (Math.abs(normalizedAngle) <= props.tolerance) {
+      isSuccess.value = true;
+      emit('success');
+    } else {
+      emit('fail');
+    }
+  };
+
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+};
+
+const reset = () => {
+  init();
+};
+
+defineExpose({ reset });
+</script>
+
+<style scoped>
+.rotate-captcha {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  user-select: none;
+}
+.rotate-img-wrapper {
+  position: relative;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background-color: var(--color-bg-layout);
+}
+.rotate-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+.success-mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(82, 196, 26, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.success-icon {
+  font-size: 48px;
+  color: var(--color-success);
+  text-shadow: 0 0 4px #fff;
+}
+.rotate-slider {
+  position: relative;
+  height: 40px;
+  background-color: var(--color-bg-container);
+  border: 1px solid var(--color-border);
+  border-radius: 20px;
+}
+.slider-track {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  right: 10px;
+  height: 4px;
+  background-color: var(--color-bg-layout);
+  border-radius: 2px;
+  transform: translateY(-50%);
+}
+.slider-handle {
+  position: absolute;
+  top: 1px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: var(--color-bg-container);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  cursor: grab;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.slider-handle::after {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--color-text-tertiary);
+}
+.slider-handle:active {
+  cursor: grabbing;
+  border-color: var(--color-primary);
+}
+.slider-handle:active::after {
+  background-color: var(--color-primary);
+}
+</style>
diff --git a/antdv-next-admin/src/components/Captcha/src/SliderCaptcha.vue b/antdv-next-admin/src/components/Captcha/src/SliderCaptcha.vue
new file mode 100644
index 0000000..ba4ca10
--- /dev/null
+++ b/antdv-next-admin/src/components/Captcha/src/SliderCaptcha.vue
@@ -0,0 +1,219 @@
+<template>
+  <div
+    class="slider-captcha"
+    :style="{
+      width: typeof width === 'number' ? width + 'px' : width,
+      '--slider-height': typeof height === 'number' ? height + 'px' : height,
+    }"
+  >
+    <div class="slider-bg" :class="{ success: isSuccess }">
+      <div class="slider-text" :style="{ opacity: isMoving ? 0 : 1 }">
+        {{ isSuccess ? successText : text }}
+      </div>
+      <div class="slider-track" :style="{ width: isSuccess ? '100%' : `${sliderLeft}px` }"></div>
+      <div
+        class="slider-handle"
+        :class="{ success: isSuccess }"
+        :style="{ left: isSuccess ? 'auto' : `${sliderLeft}px`, right: isSuccess ? 0 : 'auto' }"
+        @mousedown="handleMouseDown"
+        @touchstart.prevent="handleTouchStart"
+      >
+        <span v-if="isSuccess">✔</span>
+        <span v-else>→</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Props {
+  width?: number | string;
+  height?: number | string;
+  text?: string;
+  successText?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  width: '100%',
+  height: 40,
+  text: 'Slide to verify',
+  successText: 'Success',
+});
+
+const emit = defineEmits(['success', 'fail']);
+
+const isMoving = ref(false);
+const isSuccess = ref(false);
+const sliderLeft = ref(0);
+const startX = ref(0);
+let containerWidth = 0;
+
+const handleMouseDown = (e: MouseEvent) => {
+  if (isSuccess.value) return;
+  isMoving.value = true;
+  startX.value = e.clientX;
+
+  // Get container width
+  const container = (e.target as HTMLElement).closest('.slider-bg');
+  const handle = (e.target as HTMLElement).closest('.slider-handle');
+  if (container && handle) {
+    containerWidth = container.clientWidth - handle.clientWidth;
+  }
+
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+};
+
+const handleMouseMove = (e: MouseEvent) => {
+  if (!isMoving.value) return;
+  const offset = e.clientX - startX.value;
+
+  if (offset < 0) {
+    sliderLeft.value = 0;
+  } else if (offset > containerWidth) {
+    sliderLeft.value = containerWidth;
+  } else {
+    sliderLeft.value = offset;
+  }
+};
+
+const handleMouseUp = () => {
+  isMoving.value = false;
+  document.removeEventListener('mousemove', handleMouseMove);
+  document.removeEventListener('mouseup', handleMouseUp);
+  finishDrag();
+};
+
+const handleTouchStart = (e: TouchEvent) => {
+  if (isSuccess.value) return;
+  isMoving.value = true;
+  startX.value = e.touches[0].clientX;
+
+  const container = (e.target as HTMLElement).closest('.slider-bg');
+  const handle = (e.target as HTMLElement).closest('.slider-handle');
+  if (container && handle) {
+    containerWidth = container.clientWidth - handle.clientWidth;
+  }
+
+  document.addEventListener('touchmove', handleTouchMove, { passive: false });
+  document.addEventListener('touchend', handleTouchEnd);
+};
+
+const handleTouchMove = (e: TouchEvent) => {
+  if (!isMoving.value) return;
+  e.preventDefault();
+  const offset = e.touches[0].clientX - startX.value;
+
+  if (offset < 0) {
+    sliderLeft.value = 0;
+  } else if (offset > containerWidth) {
+    sliderLeft.value = containerWidth;
+  } else {
+    sliderLeft.value = offset;
+  }
+};
+
+const handleTouchEnd = () => {
+  isMoving.value = false;
+  document.removeEventListener('touchmove', handleTouchMove);
+  document.removeEventListener('touchend', handleTouchEnd);
+  finishDrag();
+};
+
+const finishDrag = () => {
+  if (sliderLeft.value >= containerWidth) {
+    isSuccess.value = true;
+    sliderLeft.value = containerWidth;
+    emit('success');
+  } else {
+    // Reset animation
+    const animate = () => {
+      if (sliderLeft.value > 0) {
+        sliderLeft.value = Math.max(0, sliderLeft.value - 10);
+        requestAnimationFrame(animate);
+      } else {
+        emit('fail');
+      }
+    };
+    animate();
+  }
+};
+
+const reset = () => {
+  isSuccess.value = false;
+  isMoving.value = false;
+  sliderLeft.value = 0;
+};
+
+defineExpose({ reset });
+</script>
+
+<style scoped>
+.slider-captcha {
+  --slider-height: 40px;
+  user-select: none;
+}
+.slider-bg {
+  position: relative;
+  width: 100%;
+  height: var(--slider-height);
+  background-color: var(--color-bg-container);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  text-align: center;
+  line-height: var(--slider-height);
+  overflow: hidden;
+}
+.slider-bg.success {
+  background-color: var(--color-success-bg);
+  border-color: var(--color-success-border);
+  color: var(--color-success);
+}
+.slider-text {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  transition: opacity 0.3s;
+  pointer-events: none;
+  z-index: 1;
+}
+.slider-track {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background-color: var(--color-info-bg);
+  border-right: 1px solid var(--color-info);
+}
+.slider-handle {
+  position: absolute;
+  top: 0;
+  width: var(--slider-height);
+  height: 100%;
+  background-color: var(--color-bg-container);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+  z-index: 2;
+  transition: background-color 0.3s;
+}
+.slider-handle:active {
+  cursor: grabbing;
+  background-color: var(--color-info);
+  color: #fff;
+}
+.slider-handle.success {
+  cursor: default;
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+  color: #fff;
+}
+</style>
diff --git a/antdv-next-admin/src/components/Captcha/types.ts b/antdv-next-admin/src/components/Captcha/types.ts
new file mode 100644
index 0000000..0677304
--- /dev/null
+++ b/antdv-next-admin/src/components/Captcha/types.ts
@@ -0,0 +1,12 @@
+export interface CaptchaProps {
+  width?: number | string;
+  height?: number | string;
+  src?: string;
+  text?: string;
+  successText?: string;
+}
+
+export interface Point {
+  x: number;
+  y: number;
+}
diff --git a/antdv-next-admin/src/components/Editor/index.vue b/antdv-next-admin/src/components/Editor/index.vue
new file mode 100644
index 0000000..f1e3ca3
--- /dev/null
+++ b/antdv-next-admin/src/components/Editor/index.vue
@@ -0,0 +1,467 @@
+<template>
+  <div class="tiptap-editor-wrapper" :class="{ disabled }">
+    <!-- 工具栏 -->
+    <div v-if="editor" class="editor-toolbar">
+      <a-space :size="4" wrap>
+        <!-- 文本格式 -->
+        <a-button
+          size="small"
+          :type="editor.isActive('bold') ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleBold().run()"
+        >
+          <template #icon><BoldOutlined /></template>
+        </a-button>
+
+        <a-button
+          size="small"
+          :type="editor.isActive('italic') ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleItalic().run()"
+        >
+          <template #icon><ItalicOutlined /></template>
+        </a-button>
+
+        <a-button
+          size="small"
+          :type="editor.isActive('strike') ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleStrike().run()"
+        >
+          <template #icon><StrikethroughOutlined /></template>
+        </a-button>
+
+        <a-divider type="vertical" />
+
+        <!-- 标题 -->
+        <a-button
+          size="small"
+          :type="editor.isActive('heading', { level: 1 }) ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+        >
+          H1
+        </a-button>
+
+        <a-button
+          size="small"
+          :type="editor.isActive('heading', { level: 2 }) ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+        >
+          H2
+        </a-button>
+
+        <a-button
+          size="small"
+          :type="editor.isActive('heading', { level: 3 }) ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+        >
+          H3
+        </a-button>
+
+        <a-divider type="vertical" />
+
+        <!-- 列表 -->
+        <a-button
+          size="small"
+          :type="editor.isActive('bulletList') ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleBulletList().run()"
+        >
+          <template #icon><UnorderedListOutlined /></template>
+        </a-button>
+
+        <a-button
+          size="small"
+          :type="editor.isActive('orderedList') ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleOrderedList().run()"
+        >
+          <template #icon><OrderedListOutlined /></template>
+        </a-button>
+
+        <a-divider type="vertical" />
+
+        <!-- 引用和代码 -->
+        <a-button
+          size="small"
+          :type="editor.isActive('blockquote') ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleBlockquote().run()"
+        >
+          <template #icon><MessageOutlined /></template>
+        </a-button>
+
+        <a-button
+          size="small"
+          :type="editor.isActive('codeBlock') ? 'primary' : 'default'"
+          @click="editor.chain().focus().toggleCodeBlock().run()"
+        >
+          <template #icon><CodeOutlined /></template>
+        </a-button>
+
+        <a-divider type="vertical" />
+
+        <!-- 图片和链接 -->
+        <a-upload :show-upload-list="false" :before-upload="handleImageUpload" accept="image/*">
+          <a-button size="small">
+            <template #icon><PictureOutlined /></template>
+          </a-button>
+        </a-upload>
+
+        <a-button size="small" @click="showLinkModal">
+          <template #icon><LinkOutlined /></template>
+        </a-button>
+
+        <a-divider type="vertical" />
+
+        <!-- 撤销重做 -->
+        <a-button
+          size="small"
+          :disabled="!editor.can().undo()"
+          @click="editor.chain().focus().undo().run()"
+        >
+          <template #icon><UndoOutlined /></template>
+        </a-button>
+
+        <a-button
+          size="small"
+          :disabled="!editor.can().redo()"
+          @click="editor.chain().focus().redo().run()"
+        >
+          <template #icon><RedoOutlined /></template>
+        </a-button>
+      </a-space>
+    </div>
+
+    <!-- 编辑器内容区 -->
+    <editor-content :editor="editor" class="editor-content" />
+
+    <!-- 链接弹窗 -->
+    <a-modal v-model:open="linkModalVisible" :title="$t('editor.insertLink')" @ok="insertLink">
+      <a-form layout="vertical">
+        <a-form-item :label="$t('editor.linkUrl')">
+          <a-input v-model:value="linkUrl" placeholder="https://example.com" />
+        </a-form-item>
+        <a-form-item :label="$t('editor.linkText')">
+          <a-input v-model:value="linkText" :placeholder="$t('editor.linkTextPlaceholder')" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UploadProps } from 'antdv-next';
+
+import {
+  BoldOutlined,
+  ItalicOutlined,
+  StrikethroughOutlined,
+  UnorderedListOutlined,
+  OrderedListOutlined,
+  MessageOutlined,
+  CodeOutlined,
+  PictureOutlined,
+  LinkOutlined,
+  UndoOutlined,
+  RedoOutlined,
+} from '@antdv-next/icons';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
+import StarterKit from '@tiptap/starter-kit';
+import { useEditor, EditorContent } from '@tiptap/vue-3';
+import { message } from 'antdv-next';
+import { ref, watch, onBeforeUnmount, computed } from 'vue';
+
+import { $t } from '@/locales';
+
+interface Props {
+  modelValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  height?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '',
+  disabled: false,
+  height: 400,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  change: [value: string];
+}>();
+
+const resolvedPlaceholder = computed(() => props.placeholder || $t('editor.defaultPlaceholder'));
+
+// 链接弹窗
+const linkModalVisible = ref(false);
+const linkUrl = ref('');
+const linkText = ref('');
+
+// 初始化编辑器
+const editor = useEditor({
+  content: props.modelValue,
+  editable: !props.disabled,
+  extensions: [
+    StarterKit,
+    Image.configure({
+      inline: true,
+      allowBase64: true,
+    }),
+    Link.configure({
+      openOnClick: false,
+      HTMLAttributes: {
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      },
+    }),
+    Placeholder.configure({
+      placeholder: resolvedPlaceholder.value,
+    }),
+  ],
+  onUpdate: ({ editor }) => {
+    const html = editor.getHTML();
+    emit('update:modelValue', html);
+    emit('change', html);
+  },
+});
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (editor.value && newValue !== editor.value.getHTML()) {
+      editor.value.commands.setContent(newValue, false as unknown as Record<string, unknown>);
+    }
+  },
+);
+
+// 监听禁用状态
+watch(
+  () => props.disabled,
+  (disabled) => {
+    if (editor.value) {
+      editor.value.setEditable(!disabled);
+    }
+  },
+);
+
+// 图片上传
+const handleImageUpload: UploadProps['beforeUpload'] = async (file) => {
+  if (!editor.value) return false;
+
+  // 检查文件类型
+  if (!file.type.startsWith('image/')) {
+    message.error($t('editor.imageOnly'));
+    return false;
+  }
+
+  // 检查文件大小（5MB）
+  if (file.size > 5 * 1024 * 1024) {
+    message.error($t('editor.imageSizeLimit'));
+    return false;
+  }
+
+  try {
+    // 方式1: 转换为 Base64（适合小图片）
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const base64 = e.target?.result as string;
+      editor.value?.chain().focus().setImage({ src: base64 }).run();
+    };
+    reader.readAsDataURL(file);
+
+    // 方式2: 上传到服务器（推荐）
+    // const formData = new FormData()
+    // formData.append('file', file)
+    // const response = await fetch('/api/upload', {
+    //   method: 'POST',
+    //   body: formData
+    // })
+    // const data = await response.json()
+    // editor.value?.chain().focus().setImage({ src: data.url }).run()
+
+    message.success($t('editor.imageInsertSuccess'));
+  } catch (error) {
+    console.error('Image upload failed:', error);
+    message.error($t('editor.imageUploadFailed'));
+  }
+
+  return false; // 阻止默认上传行为
+};
+
+// 显示链接弹窗
+const showLinkModal = () => {
+  const { href } = editor.value?.getAttributes('link') || {};
+  linkUrl.value = href || '';
+  linkText.value =
+    editor.value?.state.doc.textBetween(
+      editor.value.state.selection.from,
+      editor.value.state.selection.to,
+    ) || '';
+  linkModalVisible.value = true;
+};
+
+// 插入链接
+const insertLink = () => {
+  if (!linkUrl.value) {
+    message.warning($t('editor.enterLinkUrl'));
+    return;
+  }
+
+  if (!editor.value) return;
+
+  // 如果有选中文本，直接添加链接
+  if (editor.value.state.selection.empty) {
+    // 没有选中文本，插入新链接
+    editor.value
+      .chain()
+      .focus()
+      .insertContent(`<a href="${linkUrl.value}">${linkText.value || linkUrl.value}</a>`)
+      .run();
+  } else {
+    // 有选中文本，添加链接
+    editor.value.chain().focus().setLink({ href: linkUrl.value }).run();
+  }
+
+  linkModalVisible.value = false;
+  linkUrl.value = '';
+  linkText.value = '';
+};
+
+// 组件销毁时销毁编辑器
+onBeforeUnmount(() => {
+  editor.value?.destroy();
+});
+</script>
+
+<style scoped lang="scss">
+.tiptap-editor-wrapper {
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--color-bg-container);
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.editor-toolbar {
+  padding: 8px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg-layout);
+
+  :deep(.ant-btn-sm) {
+    min-width: 32px;
+    height: 28px;
+  }
+
+  :deep(.ant-divider-vertical) {
+    height: 20px;
+    margin: 0 4px;
+  }
+}
+
+.editor-content {
+  height: v-bind(height + 'px');
+  overflow-y: auto;
+
+  :deep(.ProseMirror) {
+    padding: 12px 16px;
+    min-height: 100%;
+    outline: none;
+
+    /* 占位符样式 */
+    p.is-editor-empty:first-child::before {
+      content: attr(data-placeholder);
+      float: left;
+      color: var(--color-text-placeholder);
+      pointer-events: none;
+      height: 0;
+    }
+
+    /* 基础样式 */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      line-height: 1.3;
+      margin-top: 1em;
+      margin-bottom: 0.5em;
+      font-weight: 600;
+    }
+
+    h1 {
+      font-size: 2em;
+    }
+    h2 {
+      font-size: 1.5em;
+    }
+    h3 {
+      font-size: 1.25em;
+    }
+
+    p {
+      margin: 0.5em 0;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.5em;
+      margin: 0.5em 0;
+    }
+
+    blockquote {
+      border-left: 3px solid var(--ant-primary-color);
+      padding-left: 1em;
+      margin: 1em 0;
+      color: var(--color-text-secondary);
+    }
+
+    code {
+      background: var(--color-bg-layout);
+      padding: 0.2em 0.4em;
+      border-radius: 3px;
+      font-size: 0.9em;
+      font-family: 'Courier New', monospace;
+    }
+
+    pre {
+      background: var(--color-bg-layout);
+      padding: 1em;
+      border-radius: 4px;
+      overflow-x: auto;
+      margin: 1em 0;
+
+      code {
+        background: none;
+        padding: 0;
+      }
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+      margin: 0.5em 0;
+    }
+
+    a {
+      color: var(--ant-primary-color);
+      text-decoration: none;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    /* 选中样式 */
+    ::selection {
+      background: var(--ant-primary-color-deprecated-l-35);
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Global/defaultComponentProps.ts b/antdv-next-admin/src/components/Global/defaultComponentProps.ts
new file mode 100644
index 0000000..a1fe51b
--- /dev/null
+++ b/antdv-next-admin/src/components/Global/defaultComponentProps.ts
@@ -0,0 +1,51 @@
+import type { App, Component } from "vue";
+
+import { Select, DatePicker, DateRangePicker } from "antdv-next";
+import { defineComponent, h } from "vue";
+
+import { appDefaultSettings } from "@/settings";
+
+type AttrMap = Record<string, unknown>;
+
+const withAllowClearDefault = (
+  name: string,
+  component: Component,
+  getDefaultAllowClear: () => boolean,
+) => {
+  return defineComponent({
+    name,
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      return () => {
+        const props = attrs as AttrMap;
+        const allowClear = props.allowClear ?? getDefaultAllowClear();
+
+        return h(component, { ...props, allowClear }, slots);
+      };
+    },
+  });
+};
+
+const SelectWithDefaults = withAllowClearDefault(
+  "ASelectWithDefaults",
+  Select,
+  () => appDefaultSettings.select.allowClear,
+);
+
+const DatePickerWithDefaults = withAllowClearDefault(
+  "ADatePickerWithDefaults",
+  DatePicker,
+  () => appDefaultSettings.datePicker.allowClear,
+);
+
+const RangePickerWithDefaults = withAllowClearDefault(
+  "ARangePickerWithDefaults",
+  DateRangePicker,
+  () => appDefaultSettings.datePicker.allowClear,
+);
+
+export const registerDefaultComponentProps = (app: App) => {
+  app.component("ASelect", SelectWithDefaults);
+  app.component("ADatePicker", DatePickerWithDefaults);
+  app.component("ARangePicker", RangePickerWithDefaults);
+};
diff --git a/antdv-next-admin/src/components/I18nInput/index.vue b/antdv-next-admin/src/components/I18nInput/index.vue
new file mode 100644
index 0000000..f96fca7
--- /dev/null
+++ b/antdv-next-admin/src/components/I18nInput/index.vue
@@ -0,0 +1,189 @@
+<template>
+  <JsonInput
+    v-model:value="innerValue"
+    :display-key="displayLocale"
+    :label-map="localeLabelMap"
+    :placeholder="placeholder"
+    :modal-title="modalTitle"
+    :allow-add="false"
+    :allow-delete="false"
+    :allow-sort="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, type PropType } from 'vue';
+
+import JsonInput from '@/components/JsonInput/index.vue';
+import { getLocale, SUPPORTED_LOCALES } from '@/locales';
+
+const props = defineProps({
+  value: {
+    type: [String, Object] as PropType<string | Record<string, string>>,
+    default: () => ({}),
+  },
+  locale: {
+    type: String,
+    default: () => getLocale(),
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modalTitle: {
+    type: String,
+    default: '',
+  },
+  strictLocales: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+interface LocaleMeta {
+  display: string;
+  flag: string;
+}
+
+const localeMetaMap: Record<string, LocaleMeta> = {
+  'zh-CN': { display: '简体中文', flag: '🇨🇳' },
+  'en-US': { display: 'English', flag: '🇺🇸' },
+  'ja-JP': { display: '日本語', flag: '🇯🇵' },
+  'ko-KR': { display: '한국어', flag: '🇰🇷' },
+};
+
+const availableLocales = computed(() =>
+  SUPPORTED_LOCALES.map((locale) => {
+    const meta = localeMetaMap[locale];
+    return {
+      locale,
+      display: meta?.display || locale,
+      flag: meta?.flag || '🌐',
+    };
+  }),
+);
+
+const availableLocaleSet = computed(
+  () => new Set(availableLocales.value.map((item) => item.locale)),
+);
+
+const displayLocale = computed(() => {
+  const locale = props.locale || getLocale();
+  if (availableLocaleSet.value.has(locale)) {
+    return locale;
+  }
+  return availableLocales.value[0]?.locale || locale;
+});
+
+// Generate label map for locales
+const localeLabelMap = computed(() => {
+  const map: Record<string, string> = {};
+  availableLocales.value.forEach((item) => {
+    map[item.locale] = `${item.flag} ${item.display}`;
+  });
+  return map;
+});
+
+const innerValue = ref<Record<string, string>>({});
+const valueType = ref<'string' | 'object'>('object');
+const syncingFromProps = ref(false);
+
+// Initialize default value with all locales
+function getDefaultValue(): Record<string, string> {
+  const defaultValue: Record<string, string> = {};
+  availableLocales.value.forEach((item) => {
+    defaultValue[item.locale] = '';
+  });
+  return defaultValue;
+}
+
+function isRecordEqual(a: Record<string, string>, b: Record<string, string>): boolean {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+
+  if (aKeys.length !== bKeys.length) {
+    return false;
+  }
+
+  return aKeys.every((key) => a[key] === b[key]);
+}
+
+// Parse and normalize value
+function normalizeValue(
+  value: string | Record<string, string> | null | undefined,
+): Record<string, string> {
+  let parsed: Record<string, string> = {};
+
+  if (!value) {
+    parsed = getDefaultValue();
+  } else if (typeof value === 'string') {
+    try {
+      parsed = JSON.parse(value);
+      if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+        parsed = getDefaultValue();
+      }
+    } catch {
+      parsed = getDefaultValue();
+    }
+  } else if (typeof value === 'object') {
+    parsed = { ...value };
+  }
+
+  // Fill missing locales with empty string
+  availableLocales.value.forEach((item) => {
+    if (!parsed[item.locale]) {
+      parsed[item.locale] = '';
+    }
+  });
+
+  // Remove locales not in available list when strict mode is enabled
+  if (props.strictLocales) {
+    Object.keys(parsed).forEach((key) => {
+      if (!availableLocaleSet.value.has(key)) {
+        delete parsed[key];
+      }
+    });
+  }
+
+  return parsed;
+}
+
+// Watch for external value changes
+watch(
+  () => props.value,
+  (newValue) => {
+    valueType.value = typeof newValue === 'string' ? 'string' : 'object';
+    const normalized = normalizeValue(newValue);
+
+    if (isRecordEqual(normalized, innerValue.value)) {
+      return;
+    }
+
+    syncingFromProps.value = true;
+    innerValue.value = normalized;
+  },
+  { immediate: true },
+);
+
+// Watch for internal value changes and emit
+watch(
+  () => innerValue.value,
+  (newValue) => {
+    if (syncingFromProps.value) {
+      syncingFromProps.value = false;
+      return;
+    }
+
+    if (isRecordEqual(newValue, normalizeValue(props.value))) {
+      return;
+    }
+
+    const returnValue = valueType.value === 'string' ? JSON.stringify(newValue) : newValue;
+    emit('update:value', returnValue);
+    emit('change', returnValue);
+  },
+  { deep: true },
+);
+</script>
diff --git a/antdv-next-admin/src/components/Icon/index.vue b/antdv-next-admin/src/components/Icon/index.vue
new file mode 100644
index 0000000..a7ff74e
--- /dev/null
+++ b/antdv-next-admin/src/components/Icon/index.vue
@@ -0,0 +1,114 @@
+<template>
+  <component
+    :is="antdvComp"
+    v-if="resolvedKind === 'antdv-next'"
+    class="app-icon"
+    :style="[baseStyle, props.style]"
+  />
+
+  <svg
+    v-else-if="resolvedKind === 'svg'"
+    class="app-icon app-icon-svg"
+    :style="[baseStyle, props.style]"
+    aria-hidden="true"
+  >
+    <use :href="`#${svgId}`" />
+  </svg>
+
+  <IconifyIcon v-else class="app-icon" :icon="iconifyIcon" :style="[baseStyle, props.style]" />
+</template>
+
+<script setup lang="ts">
+import type { StyleValue } from 'vue';
+
+import * as AntdvIcons from '@antdv-next/icons';
+import { Icon as IconifyIcon } from '@iconify/vue';
+import { computed } from 'vue';
+
+type NormalizedIconKind = 'iconify' | 'antdv-next' | 'svg';
+type IconKind = NormalizedIconKind | 'antdvNext' | 'antd';
+
+interface Props {
+  icon: string;
+  kind?: IconKind;
+  size?: number | string;
+  style?: StyleValue;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 16,
+});
+
+const stripPrefix = (value: string, prefix: string) => {
+  return value.startsWith(prefix) ? value.slice(prefix.length) : value;
+};
+
+const normalizeKind = (kind?: IconKind): NormalizedIconKind | undefined => {
+  if (!kind) {
+    return undefined;
+  }
+  if (kind === 'antdvNext' || kind === 'antd') {
+    return 'antdv-next';
+  }
+  return kind;
+};
+
+const iconText = computed(() => props.icon.trim());
+
+const resolvedKind = computed<NormalizedIconKind>(() => {
+  const forcedKind = normalizeKind(props.kind);
+  if (forcedKind) {
+    return forcedKind;
+  }
+
+  if (iconText.value.startsWith('antdv-next:') || iconText.value.startsWith('antd:')) {
+    return 'antdv-next';
+  }
+
+  if (iconText.value.startsWith('svg:')) {
+    return 'svg';
+  }
+
+  return 'iconify';
+});
+
+const antdvKey = computed(() => {
+  return stripPrefix(stripPrefix(iconText.value, 'antdv-next:'), 'antd:');
+});
+
+const antdvComp = computed(() => {
+  const icons = AntdvIcons as Record<string, unknown>;
+  return icons[antdvKey.value] || icons.QuestionOutlined;
+});
+
+const svgId = computed(() => stripPrefix(iconText.value, 'svg:'));
+
+const iconifyIcon = computed(() => stripPrefix(iconText.value, 'iconify:'));
+
+const sizeCss = computed(() => {
+  return typeof props.size === 'number' ? `${props.size}px` : props.size;
+});
+
+const baseStyle = computed(() => ({
+  width: sizeCss.value,
+  height: sizeCss.value,
+  lineHeight: sizeCss.value,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+</script>
+
+<style scoped lang="scss">
+.app-icon {
+  display: inline-block;
+  min-width: 1em;
+  min-height: 1em;
+  vertical-align: -0.125em;
+  flex-shrink: 0;
+}
+
+.app-icon-svg {
+  fill: currentColor;
+}
+</style>
diff --git a/antdv-next-admin/src/components/IconPicker/CLAUDE.md b/antdv-next-admin/src/components/IconPicker/CLAUDE.md
new file mode 100644
index 0000000..eac2e03
--- /dev/null
+++ b/antdv-next-admin/src/components/IconPicker/CLAUDE.md
@@ -0,0 +1,14 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 11, 2026
+
+| ID   | Time    | T   | Title                                                | Read |
+| ---- | ------- | --- | ---------------------------------------------------- | ---- |
+| #360 | 5:43 PM | 🔄  | Removed Unused Popover Configuration Objects         | ~224 |
+| #359 | "       | ✅  | IconPicker Icon Size Reduced                         | ~179 |
+| #358 | "       | 🔵  | IconPicker Component with Online/Offline Icon Search | ~673 |
+
+</claude-mem-context>
diff --git a/antdv-next-admin/src/components/IconPicker/index.vue b/antdv-next-admin/src/components/IconPicker/index.vue
new file mode 100644
index 0000000..23a32be
--- /dev/null
+++ b/antdv-next-admin/src/components/IconPicker/index.vue
@@ -0,0 +1,760 @@
+<template>
+  <a-popover
+    v-model:open="open"
+    trigger="click"
+    placement="bottomLeft"
+    :overlay-style="{ width: '360px', paddingTop: '4px' }"
+    overlay-class-name="icon-picker-overlay"
+    @open-change="onOpenChange"
+  >
+    <template #default>
+      <a-input-search
+        v-model:value="inputValue"
+        class="ip-input-trigger"
+        :placeholder="placeholder"
+        autocomplete="off"
+        spellcheck="false"
+        :name="inputName"
+        allow-clear
+        @change="onInputChange"
+      >
+        <template #enterButton>
+          <a-button class="ip-addon" @mousedown.prevent.stop="togglePopover">
+            <IconView :icon="inputValue || 'ion:apps-outline'" :size="18" />
+          </a-button>
+        </template>
+      </a-input-search>
+    </template>
+
+    <template #content>
+      <a-form-item-rest>
+        <div class="ip-wrap">
+          <div class="ip-row1">
+            <a-input
+              ref="searchRef"
+              v-model:value="keyword"
+              allow-clear
+              :placeholder="searchPlaceholder"
+              class="ip-search"
+            >
+              <template #prefix>
+                <IconView icon="ant-design:search-outlined" color="#999" />
+              </template>
+            </a-input>
+          </div>
+
+          <div class="ip-row2">
+            <a-segmented
+              v-model:value="category"
+              :options="categoryOptions"
+              size="small"
+              block
+              class="ip-seg"
+              @change="onCategoryChange"
+            />
+          </div>
+
+          <div class="ip-grid-container">
+            <div v-if="pageItems.length === 0" class="ip-empty">
+              <a-empty description="No icons" />
+            </div>
+
+            <div v-else class="ip-grid">
+              <a-tooltip
+                v-for="name in pageItems"
+                :key="name"
+                :mouse-enter-delay="0.5"
+                placement="top"
+              >
+                <template #title>
+                  <div class="ip-tooltip-content">
+                    <span class="ip-tooltip-name">{{ name }}</span>
+                    <a-tag
+                      class="ip-tooltip-tag"
+                      :color="getIconMeta(name).color"
+                    >
+                      {{ getIconMeta(name).label }}
+                    </a-tag>
+                  </div>
+                </template>
+
+                <button
+                  type="button"
+                  class="ip-item"
+                  :class="{ selected: effectiveValue === name }"
+                  :style="{ '--hover-color': getIconMeta(name).color }"
+                  @click="apply(name)"
+                >
+                  <IconView :icon="name" :size="20" />
+                  <div class="ip-item-bar" />
+                </button>
+              </a-tooltip>
+            </div>
+          </div>
+
+          <div class="ip-footer">
+            <span class="ip-total">{{ filteredTotal }}</span>
+            <a-pagination
+              v-model:current="page"
+              :page-size="props.pageSize"
+              :total="filteredTotal"
+              size="small"
+              show-less-items
+              :show-size-changer="false"
+              class="ip-pagination"
+            />
+          </div>
+        </div>
+      </a-form-item-rest>
+    </template>
+  </a-popover>
+</template>
+
+<script setup lang="ts">
+import * as AntdvIcons from "@antdv-next/icons";
+import ion from "@iconify-json/ion/icons.json";
+import mdi from "@iconify-json/mdi/icons.json";
+import ri from "@iconify-json/ri/icons.json";
+import { computed, h, nextTick, onBeforeUnmount, ref, watch } from "vue";
+
+import IconView from "@/components/Icon/index.vue";
+import { $t } from "@/locales";
+
+type Category = "all" | "ri" | "mdi" | "ion" | "antdv-next" | "svg" | "online";
+
+interface Props {
+  modelValue?: string;
+  value?: string;
+  placeholder?: string;
+  pageSize?: number;
+  svgIcons?: string[];
+  svgPrefix?: string;
+  onlineLimit?: number;
+}
+
+interface IconsJson {
+  icons?: Record<string, unknown>;
+  aliases?: Record<string, unknown>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "",
+  pageSize: 36,
+  svgPrefix: "icon-",
+  onlineLimit: 120,
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: string): void;
+  (e: "update:value", v: string): void;
+  (e: "change", v: string): void;
+}>();
+
+const boundValue = computed(() => props.value ?? props.modelValue ?? "");
+
+const open = ref(false);
+const editableValue = ref(boundValue.value);
+const inputSnapshot = ref(editableValue.value);
+
+watch(
+  boundValue,
+  (value) => {
+    if (!open.value) {
+      editableValue.value = value ?? "";
+    }
+  },
+  { immediate: true },
+);
+
+const inputValue = computed<string>({
+  get: () => editableValue.value,
+  set: (value) => {
+    editableValue.value = value;
+  },
+});
+
+const inputName = `iconpicker_${Math.random().toString(36).slice(2)}`;
+const placeholder = computed(
+  () => props.placeholder || $t("iconPicker.selectIcon"),
+);
+const searchPlaceholder = computed(() => $t("iconPicker.searchPlaceholder"));
+
+const category = ref<Category>("all");
+const keyword = ref("");
+const page = ref(1);
+const searchRef = ref<{ focus?: () => void } | null>(null);
+
+const iconifyNames = (prefix: string, json: IconsJson) => {
+  const names = [
+    ...Object.keys(json.icons || {}),
+    ...Object.keys(json.aliases || {}),
+  ];
+  return names.map((name) => `${prefix}:${name}`);
+};
+
+const normalizeSvgName = (name: string) => {
+  const value = name.trim();
+  if (!value) {
+    return "";
+  }
+  return value.startsWith("svg:") ? value : `svg:${value}`;
+};
+
+const localSvgModules = import.meta.glob("../../assets/icons/**/*.svg");
+
+const extractSvgSymbolName = (path: string) => {
+  const matched = path.match(/\/icons\/(.*)\.svg$/);
+  if (!matched || !matched[1]) {
+    return "";
+  }
+  const normalized = matched[1].replace(/\//g, "-");
+  const prefix = props.svgPrefix || "";
+  return normalized.startsWith(prefix) ? normalized : `${prefix}${normalized}`;
+};
+
+const dedupe = (items: string[]) => Array.from(new Set(items));
+
+const riAll = computed(() => iconifyNames("ri", ri as IconsJson));
+const mdiAll = computed(() => iconifyNames("mdi", mdi as IconsJson));
+const ionAll = computed(() => iconifyNames("ion", ion as IconsJson));
+
+const antdvAll = computed(() =>
+  Object.keys(AntdvIcons)
+    .filter((name) => /(Outlined|Filled|TwoTone)$/.test(name))
+    .map((name) => `antdv-next:${name}`),
+);
+
+const svgAll = computed(() => {
+  const fromLocal = Object.keys(localSvgModules)
+    .map(extractSvgSymbolName)
+    .filter(Boolean)
+    .map(normalizeSvgName);
+
+  const fromProps = (props.svgIcons || [])
+    .map(normalizeSvgName)
+    .filter(Boolean);
+
+  return dedupe([...fromProps, ...fromLocal]);
+});
+
+const allOfflineIcons = computed(() => {
+  return dedupe([
+    ...riAll.value,
+    ...mdiAll.value,
+    ...ionAll.value,
+    ...antdvAll.value,
+    ...svgAll.value,
+  ]);
+});
+
+const iconMetaConfig: Record<string, { label: string; color: string }> = {
+  ri: { label: "Remix", color: "#3b82f6" },
+  mdi: { label: "MDI", color: "#10b981" },
+  ion: { label: "Ion", color: "#8b5cf6" },
+  "antdv-next": { label: "Antdv", color: "#ef4444" },
+  svg: { label: "SVG", color: "#f59e0b" },
+  online: { label: "Online", color: "#64748b" },
+  unknown: { label: "Unknown", color: "#9ca3af" },
+};
+
+const getIconMeta = (iconName: string) => {
+  const value = iconName.trim();
+  if (value.startsWith("ri:")) return iconMetaConfig.ri;
+  if (value.startsWith("mdi:")) return iconMetaConfig.mdi;
+  if (value.startsWith("ion:")) return iconMetaConfig.ion;
+  if (value.startsWith("svg:")) return iconMetaConfig.svg;
+  if (value.startsWith("antdv-next:") || value.startsWith("antd:"))
+    return iconMetaConfig["antdv-next"];
+  if (value.includes(":")) return iconMetaConfig.online;
+  return iconMetaConfig.unknown;
+};
+
+const onlineIcons = ref<string[]>([]);
+const onlineLoading = ref(false);
+const onlineError = ref("");
+const onlineCache = new Map<string, string[]>();
+const onlineAbortController = ref<AbortController | null>(null);
+let onlineTimer: ReturnType<typeof setTimeout> | null = null;
+
+const shouldSearchOnline = computed(() => {
+  const query = keyword.value.trim();
+  if (query.length < 2) {
+    return false;
+  }
+  return category.value === "all";
+});
+
+const resetOnlineState = () => {
+  if (onlineAbortController.value) {
+    onlineAbortController.value.abort();
+    onlineAbortController.value = null;
+  }
+  onlineLoading.value = false;
+  onlineError.value = "";
+  onlineIcons.value = [];
+};
+
+const fetchOnlineIcons = async (query: string) => {
+  const normalized = query.trim().toLowerCase();
+  if (!normalized) {
+    onlineIcons.value = [];
+    return;
+  }
+
+  if (onlineCache.has(normalized)) {
+    onlineIcons.value = onlineCache.get(normalized) || [];
+    onlineError.value = "";
+    onlineLoading.value = false;
+    return;
+  }
+
+  if (onlineAbortController.value) {
+    onlineAbortController.value.abort();
+  }
+
+  const controller = new AbortController();
+  onlineAbortController.value = controller;
+  onlineLoading.value = true;
+  onlineError.value = "";
+
+  try {
+    const url = `https://api.iconify.design/search?query=${encodeURIComponent(normalized)}&limit=${props.onlineLimit}`;
+    const response = await fetch(url, { signal: controller.signal });
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    const data = (await response.json()) as { icons?: string[] };
+    const icons = Array.isArray(data.icons)
+      ? data.icons.filter(
+          (item): item is string => typeof item === "string" && Boolean(item),
+        )
+      : [];
+
+    onlineCache.set(normalized, icons);
+    if (controller.signal.aborted) {
+      return;
+    }
+    onlineIcons.value = icons;
+  } catch (error: unknown) {
+    if (controller.signal.aborted) {
+      return;
+    }
+    const errorMessage = error instanceof Error ? error.message : undefined;
+    onlineError.value = errorMessage
+      ? $t("iconPicker.onlineSearchFailedDetail", { message: errorMessage })
+      : $t("iconPicker.onlineSearchFailed");
+    onlineIcons.value = [];
+  } finally {
+    if (onlineAbortController.value === controller) {
+      onlineAbortController.value = null;
+    }
+    if (!controller.signal.aborted) {
+      onlineLoading.value = false;
+    }
+  }
+};
+
+const scheduleOnlineSearch = () => {
+  if (onlineTimer) {
+    clearTimeout(onlineTimer);
+    onlineTimer = null;
+  }
+
+  if (!shouldSearchOnline.value) {
+    resetOnlineState();
+    return;
+  }
+
+  const query = keyword.value.trim();
+  onlineTimer = setTimeout(() => {
+    fetchOnlineIcons(query);
+  }, 300);
+};
+
+watch([keyword, category], () => {
+  scheduleOnlineSearch();
+});
+
+onBeforeUnmount(() => {
+  if (onlineTimer) {
+    clearTimeout(onlineTimer);
+    onlineTimer = null;
+  }
+  if (onlineAbortController.value) {
+    onlineAbortController.value.abort();
+    onlineAbortController.value = null;
+  }
+});
+
+const listByCategory = computed<string[]>(() => {
+  switch (category.value) {
+    case "ri":
+      return riAll.value;
+    case "mdi":
+      return mdiAll.value;
+    case "ion":
+      return ionAll.value;
+    case "antdv-next":
+      return antdvAll.value;
+    case "svg":
+      return svgAll.value;
+    default:
+      return keyword.value.trim().length >= 2
+        ? dedupe([...allOfflineIcons.value, ...onlineIcons.value])
+        : allOfflineIcons.value;
+  }
+});
+
+const filtered = computed(() => {
+  const query = keyword.value.trim().toLowerCase();
+  if (!query) {
+    return listByCategory.value;
+  }
+  if (category.value === "online") {
+    return listByCategory.value;
+  }
+  return listByCategory.value.filter((item) =>
+    item.toLowerCase().includes(query),
+  );
+});
+
+const filteredTotal = computed(() => filtered.value.length);
+
+const pageItems = computed(() => {
+  const start = (page.value - 1) * props.pageSize;
+  return filtered.value.slice(start, start + props.pageSize);
+});
+
+const allCount = computed(() => allOfflineIcons.value.length);
+
+const categoryBadgeConfig: Record<string, { name: string; dotColor: string }> =
+  {
+    all: { name: "ALL", dotColor: "#64748b" },
+    ri: { name: "RI", dotColor: "#3b82f6" },
+    mdi: { name: "MDI", dotColor: "#10b981" },
+    ion: { name: "ION", dotColor: "#8b5cf6" },
+    "antdv-next": { name: "Ant", dotColor: "#ef4444" },
+    svg: { name: "SVG", dotColor: "#f59e0b" },
+  };
+
+const renderCategoryLabel = (key: string, count: number) => {
+  const config = categoryBadgeConfig[key];
+  return h("div", { class: "ip-seg-item" }, [
+    h("div", { class: "ip-seg-line1" }, [
+      h("span", {
+        class: "ip-seg-dot",
+        style: { backgroundColor: config.dotColor },
+      }),
+      h("span", { class: "ip-seg-name" }, config.name),
+    ]),
+    h("div", { class: "ip-seg-line2" }, String(count)),
+  ]);
+};
+
+const categoryOptions = computed(() => [
+  { value: "all", label: renderCategoryLabel("all", allCount.value) },
+  { value: "ri", label: renderCategoryLabel("ri", riAll.value.length) },
+  { value: "mdi", label: renderCategoryLabel("mdi", mdiAll.value.length) },
+  { value: "ion", label: renderCategoryLabel("ion", ionAll.value.length) },
+  {
+    value: "antdv-next",
+    label: renderCategoryLabel("antdv-next", antdvAll.value.length),
+  },
+  { value: "svg", label: renderCategoryLabel("svg", svgAll.value.length) },
+]);
+
+const effectiveValue = computed(() => boundValue.value);
+
+const emitUpdate = (value: string) => {
+  emit("update:value", value);
+  emit("update:modelValue", value);
+  emit("change", value);
+};
+
+const focusSearch = () => {
+  nextTick(() => {
+    searchRef.value?.focus?.();
+  });
+};
+
+const detectCategoryByIcon = (iconName: string): Category => {
+  if (!iconName) {
+    return "all";
+  }
+  if (iconName.startsWith("ri:")) return "ri";
+  if (iconName.startsWith("mdi:")) return "mdi";
+  if (iconName.startsWith("ion:")) return "ion";
+  if (iconName.startsWith("svg:")) return "svg";
+  if (iconName.startsWith("antdv-next:") || iconName.startsWith("antd:"))
+    return "antdv-next";
+  return "all";
+};
+
+const togglePopover = () => {
+  open.value = !open.value;
+  if (open.value) {
+    focusSearch();
+  }
+};
+
+const apply = (name: string) => {
+  editableValue.value = name;
+  inputSnapshot.value = name;
+  emitUpdate(name);
+  open.value = false;
+};
+
+const onInputChange = () => {
+  inputSnapshot.value = editableValue.value;
+  emitUpdate(editableValue.value);
+};
+
+const onCategoryChange = () => {
+  page.value = 1;
+  focusSearch();
+};
+
+const onOpenChange = (next: boolean) => {
+  if (next) {
+    inputSnapshot.value = editableValue.value;
+    category.value = detectCategoryByIcon(boundValue.value.trim());
+    page.value = 1;
+    focusSearch();
+  } else {
+    editableValue.value = inputSnapshot.value;
+  }
+  open.value = next;
+};
+
+watch([category, keyword], () => {
+  page.value = 1;
+});
+</script>
+
+<style scoped lang="scss">
+/* 主容器 */
+.ip-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: #333;
+}
+
+/* 分类栏样式 */
+.ip-seg {
+  padding: 2px;
+  border-radius: 6px;
+  background-color: #f5f5f5;
+
+  /* 强制调整内部 Ant Design 样式 */
+  :deep(.ant-segmented-item-label) {
+    min-height: unset;
+    padding: 4px 6px !important;
+    overflow: hidden;
+    font-size: 11px !important;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+  }
+
+  :deep(.ip-seg-item) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 1;
+    gap: 2px;
+  }
+
+  /* 第一行：点 + 名称 */
+  :deep(.ip-seg-line1) {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 11px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  :deep(.ip-seg-dot) {
+    flex-shrink: 0;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+  }
+
+  /* 第二行：数量 */
+  :deep(.ip-seg-line2) {
+    margin-top: 0;
+    color: #999;
+    font-size: 10px;
+    white-space: nowrap;
+  }
+}
+
+/* 网格容器背景 */
+.ip-grid-container {
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  background-color: #fafafa;
+}
+
+/* 图标网格防遮挡 */
+.ip-grid {
+  display: grid;
+  position: relative;
+  grid-auto-rows: 40px;
+  grid-template-columns: repeat(6, 1fr);
+  height: 305px;
+
+  /* 关键修改：增加内边距，防止 hover 上浮时被 overflow 切掉 */
+  padding: 12px;
+  overflow: hidden auto;
+  gap: 8px;
+
+  /* 滚动条样式 */
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background: #e0e0e0;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+/* 空状态 */
+.ip-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 280px;
+  color: #999;
+}
+
+/* 图标卡片 */
+.ip-item {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  /* 关键：防止底部色条超出圆角 */
+  overflow: hidden;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid #eee;
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 2%);
+  cursor: pointer;
+
+  /* 悬停效果 */
+  &:hover {
+    z-index: 10;
+    transform: translateY(-2px);
+    border-color: var(--hover-color, #1677ff);
+    box-shadow: 0 4px 10px rgb(0 0 0 / 8%);
+
+    /* hover 时色条变粗 */
+    .ip-item-bar {
+      height: 4px;
+      opacity: 1;
+    }
+  }
+
+  /* 选中状态 */
+  &.selected {
+    z-index: 5;
+    border-color: #1677ff;
+    background: #e6f7ff;
+    box-shadow: inset 0 0 0 1px #1677ff;
+    color: #1677ff;
+  }
+}
+
+/* 底部色彩条 - 修复版 */
+.ip-item-bar {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  /* 默认显示 2px 的高度，确保颜色可见 */
+  height: 2px;
+  transition: all 0.2s;
+
+  /* 稍微透明一点，不抢眼，但能看清颜色 */
+  opacity: 0.7;
+  background-color: var(--hover-color, #ccc);
+}
+
+/* 底部栏 */
+.ip-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ip-total {
+  color: #888;
+  font-size: 12px;
+
+  b {
+    color: #333;
+  }
+}
+
+/* 深度选择器修改分页样式，使其更紧凑 */
+.ip-pagination :deep(.ant-pagination-item),
+.ip-pagination :deep(.ant-pagination-prev),
+.ip-pagination :deep(.ant-pagination-next) {
+  min-width: 24px;
+  height: 24px;
+  line-height: 22px;
+}
+
+/* Tooltip 内容 */
+.ip-tooltip-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+
+.ip-tooltip-name {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.ip-tooltip-tag {
+  height: 18px;
+  margin: 0;
+  padding: 0 4px;
+  font-size: 10px;
+  line-height: 16px;
+}
+</style>
+
+<style lang="scss">
+/* 全局样式，确保弹出框内层撑满外层宽度 */
+.icon-picker-overlay {
+  .ant-popover-inner {
+    width: 100%;
+  }
+
+  .ant-popover-inner-content {
+    padding: 12px;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/JsonInput/JsonFieldTreeList.vue b/antdv-next-admin/src/components/JsonInput/JsonFieldTreeList.vue
new file mode 100644
index 0000000..570bc08
--- /dev/null
+++ b/antdv-next-admin/src/components/JsonInput/JsonFieldTreeList.vue
@@ -0,0 +1,667 @@
+<template>
+  <div class="field-tree-level">
+    <draggable
+      v-model="fieldOrder"
+      :item-key="getFieldItemKey"
+      handle=".drag-handle"
+      class="field-list"
+      @start="handleDragStart"
+      @end="handleDragEnd"
+    >
+      <template #item="{ element: key }">
+        <div
+          v-if="currentObject && currentObject[key] !== undefined"
+          class="field-node"
+        >
+          <div
+            class="field-row"
+            :class="{
+              'is-dragging': draggingPathKey === getFieldPathKey(key),
+              'is-hovered': hoveredPathKey === getFieldPathKey(key),
+              'is-new-field': isNewField(key),
+            }"
+            :style="{ paddingLeft: `${12 + depth * 20}px` }"
+            @mouseenter="handleHover(getFieldPathKey(key))"
+            @mouseleave="handleHover('')"
+          >
+            <div class="drag-handle" v-if="allowSort">
+              <HolderOutlined />
+            </div>
+
+            <a-button
+              v-if="isObjectField(key)"
+              type="text"
+              size="small"
+              class="expand-toggle"
+              @click="toggleFieldExpand(key)"
+            >
+              <CaretDownOutlined v-if="isFieldExpanded(key)" />
+              <CaretRightOutlined v-else />
+            </a-button>
+            <div v-else class="expand-placeholder" />
+
+            <div class="field-label-section">
+              <a-input
+                v-if="allowEditKey && !api.isFieldReadonlyByPath(path, key)"
+                :value="key"
+                size="middle"
+                class="field-key-input"
+                :class="{ 'is-new': isNewField(key) }"
+                placeholder="字段名"
+                @update:value="(val: string) => handleKeyChange(key, val)"
+              />
+              <template v-else>
+                <div class="field-label">
+                  {{ api.getFieldLabelByPath(path, key) }}
+                </div>
+                <div
+                  v-if="api.hasLabelMapByPath(path, key)"
+                  class="field-key-hint"
+                >
+                  {{ key }}
+                </div>
+              </template>
+            </div>
+
+            <div class="field-input-section">
+              <template v-if="api.getFieldTypeByPath(path, key) === 'object'">
+                <div class="object-field-wrapper">
+                  <span class="object-summary">{{
+                    api.getObjectSummaryByPath(path, key)
+                  }}</span>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click="toggleFieldExpand(key)"
+                  >
+                    {{ isFieldExpanded(key) ? "收起" : "展开" }}
+                  </a-button>
+                </div>
+              </template>
+
+              <template
+                v-else-if="api.getFieldTypeByPath(path, key) === 'tags'"
+              >
+                <a-select
+                  v-model:value="currentObject[key]"
+                  mode="tags"
+                  size="middle"
+                  style="width: 100%"
+                  placeholder="输入标签按回车确认"
+                  :max-tag-count="2"
+                  :disabled="api.isFieldReadonlyByPath(path, key)"
+                />
+              </template>
+
+              <template
+                v-else-if="api.getFieldTypeByPath(path, key) === 'boolean'"
+              >
+                <div class="boolean-field-wrapper">
+                  <a-switch
+                    v-model:checked="currentObject[key]"
+                    size="small"
+                    :disabled="api.isFieldReadonlyByPath(path, key)"
+                  />
+                  <span class="switch-label">
+                    {{
+                      currentObject[key]
+                        ? api.getFieldConfigByPath(path, key)?.activeLabel ||
+                          "已启用"
+                        : api.getFieldConfigByPath(path, key)?.inactiveLabel ||
+                          "已禁用"
+                    }}
+                  </span>
+                </div>
+              </template>
+
+              <template
+                v-else-if="api.getFieldTypeByPath(path, key) === 'number'"
+              >
+                <a-input-number
+                  v-model:value="currentObject[key]"
+                  :controls="false"
+                  style="width: 100%"
+                  :placeholder="api.getFieldLabelByPath(path, key)"
+                  :min="api.getFieldConfigByPath(path, key)?.min"
+                  :max="api.getFieldConfigByPath(path, key)?.max"
+                  :disabled="api.isFieldDisabledByPath(path, key)"
+                  :readonly="api.isFieldReadonlyByPath(path, key)"
+                />
+              </template>
+
+              <template
+                v-else-if="api.getFieldTypeByPath(path, key) === 'array'"
+              >
+                <a-textarea
+                  :value="api.getArrayFieldTextByPath(path, key)"
+                  size="middle"
+                  placeholder="JSON: [1, 2, 3]"
+                  :auto-size="{ minRows: 1, maxRows: 3 }"
+                  :disabled="api.isFieldDisabledByPath(path, key)"
+                  :readonly="api.isFieldReadonlyByPath(path, key)"
+                  @update:value="api.onArrayTextChangeByPath(path, key, $event)"
+                  @blur="api.validateArrayByPath(path, key)"
+                />
+              </template>
+
+              <template v-else-if="api.isLongTextFieldByPath(path, key)">
+                <a-textarea
+                  v-model:value="currentObject[key]"
+                  size="middle"
+                  :placeholder="api.getFieldLabelByPath(path, key)"
+                  :auto-size="{ minRows: 2, maxRows: 4 }"
+                  show-count
+                  :maxlength="
+                    api.getFieldConfigByPath(path, key)?.maxLength || 500
+                  "
+                  :disabled="api.isFieldDisabledByPath(path, key)"
+                  :readonly="api.isFieldReadonlyByPath(path, key)"
+                />
+              </template>
+
+              <template v-else>
+                <a-input
+                  v-model:value="currentObject[key]"
+                  size="middle"
+                  :placeholder="api.getFieldLabelByPath(path, key)"
+                  :allow-clear="!api.isFieldReadonlyByPath(path, key)"
+                  :disabled="api.isFieldDisabledByPath(path, key)"
+                  :readonly="api.isFieldReadonlyByPath(path, key)"
+                />
+              </template>
+            </div>
+
+            <div
+              class="field-actions"
+              :class="{
+                'is-visible':
+                  hoveredPathKey === getFieldPathKey(key) || isNewField(key),
+              }"
+            >
+              <a-select
+                v-if="allowEditType && !api.isFieldReadonlyByPath(path, key)"
+                :value="api.getFieldTypeByPath(path, key)"
+                size="middle"
+                class="type-selector"
+                :options="fieldTypeOptions"
+                @change="(val: FieldType) => handleTypeChange(key, val)"
+              />
+              <a-button
+                v-if="allowDelete && !api.isFieldReadonlyByPath(path, key)"
+                type="text"
+                size="small"
+                danger
+                @click="removeField(key)"
+              >
+                <DeleteOutlined />
+              </a-button>
+            </div>
+          </div>
+
+          <JsonFieldTreeList
+            v-if="isObjectField(key) && isFieldExpanded(key)"
+            :path="getFieldPath(key)"
+            :depth="depth + 1"
+            :allow-add="allowAdd"
+            :allow-delete="allowDelete"
+            :allow-sort="allowSort"
+            :allow-edit-key="allowEditKey"
+            :allow-edit-type="allowEditType"
+            :hovered-path-key="hoveredPathKey"
+            :dragging-path-key="draggingPathKey"
+            :api="api"
+            :new-field-keys="newFieldKeys"
+            @hover-change="emit('hover-change', $event)"
+            @request-add-field="emit('request-add-field', $event)"
+            @remove-field="emit('remove-field', $event)"
+            @drag-start="emit('drag-start', $event)"
+            @drag-end="emit('drag-end')"
+            @update-field-key="emit('update-field-key', $event)"
+            @update-field-type="emit('update-field-type', $event)"
+          />
+        </div>
+      </template>
+    </draggable>
+
+    <div
+      v-if="allowAdd && currentObject"
+      class="add-field-section"
+      :style="{ paddingLeft: `${12 + depth * 20}px` }"
+    >
+      <a-button
+        type="dashed"
+        size="small"
+        class="add-field-btn"
+        @click="requestAddField"
+      >
+        <PlusOutlined />
+        新增字段
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  HolderOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  CaretDownOutlined,
+  CaretRightOutlined,
+} from "@antdv-next/icons";
+import { computed, type PropType } from "vue";
+import draggable from "vuedraggable";
+
+defineOptions({
+  name: "JsonFieldTreeList",
+});
+
+export type FieldType =
+  | "string"
+  | "number"
+  | "boolean"
+  | "tags"
+  | "array"
+  | "object";
+
+export interface JsonObject {
+  [key: string]: unknown;
+}
+
+export interface FieldConfig {
+  type?: FieldType;
+  component?: "input" | "textarea";
+  label?: string;
+  min?: number;
+  max?: number;
+  maxLength?: number;
+  activeLabel?: string;
+  inactiveLabel?: string;
+}
+
+export interface JsonTreeEditorApi {
+  getObjectByPath: (path: string[]) => JsonObject | null;
+  getFieldOrderByPath: (path: string[]) => string[];
+  setFieldOrderByPath: (path: string[], order: string[]) => void;
+  getFieldPath: (path: string[], key: string) => string[];
+  getFieldPathKey: (path: string[], key: string) => string;
+  getFieldLabelByPath: (path: string[], key: string) => string;
+  hasLabelMapByPath: (path: string[], key: string) => boolean;
+  getFieldTypeByPath: (path: string[], key: string) => FieldType;
+  getFieldConfigByPath: (
+    path: string[],
+    key: string,
+  ) => FieldConfig | undefined;
+  isLongTextFieldByPath: (path: string[], key: string) => boolean;
+  isFieldDisabledByPath: (path: string[], key: string) => boolean;
+  isFieldReadonlyByPath: (path: string[], key: string) => boolean;
+  getObjectSummaryByPath: (path: string[], key: string) => string;
+  getArrayFieldTextByPath: (path: string[], key: string) => string;
+  onArrayTextChangeByPath: (path: string[], key: string, value: string) => void;
+  validateArrayByPath: (path: string[], key: string) => void;
+  isPathExpanded: (path: string[]) => boolean;
+  togglePathExpanded: (path: string[]) => void;
+}
+
+interface RemoveFieldPayload {
+  path: string[];
+  key: string;
+}
+
+interface DragStartPayload {
+  path: string[];
+  oldIndex?: number;
+}
+
+interface UpdateFieldKeyPayload {
+  path: string[];
+  oldKey: string;
+  newKey: string;
+}
+
+interface UpdateFieldTypePayload {
+  path: string[];
+  key: string;
+  type: FieldType;
+}
+
+const props = defineProps({
+  path: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+  depth: {
+    type: Number,
+    default: 0,
+  },
+  allowAdd: {
+    type: Boolean,
+    default: true,
+  },
+  allowDelete: {
+    type: Boolean,
+    default: true,
+  },
+  allowSort: {
+    type: Boolean,
+    default: true,
+  },
+  allowEditKey: {
+    type: Boolean,
+    default: true,
+  },
+  allowEditType: {
+    type: Boolean,
+    default: true,
+  },
+  hoveredPathKey: {
+    type: String,
+    default: "",
+  },
+  draggingPathKey: {
+    type: String,
+    default: "",
+  },
+  api: {
+    type: Object as PropType<JsonTreeEditorApi>,
+    required: true,
+  },
+  newFieldKeys: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits<{
+  (e: "hover-change", pathKey: string): void;
+  (e: "request-add-field", path: string[]): void;
+  (e: "remove-field", payload: RemoveFieldPayload): void;
+  (e: "drag-start", payload: DragStartPayload): void;
+  (e: "drag-end"): void;
+  (e: "update-field-key", payload: UpdateFieldKeyPayload): void;
+  (e: "update-field-type", payload: UpdateFieldTypePayload): void;
+}>();
+
+const fieldTypeOptions: Array<{ label: string; value: FieldType }> = [
+  { label: "文本", value: "string" },
+  { label: "数字", value: "number" },
+  { label: "布尔", value: "boolean" },
+  { label: "标签", value: "tags" },
+  { label: "数组", value: "array" },
+  { label: "对象", value: "object" },
+];
+
+const currentObject = computed<JsonObject | null>(() =>
+  props.api.getObjectByPath(props.path),
+);
+
+const fieldOrder = computed<string[]>({
+  get: () => props.api.getFieldOrderByPath(props.path),
+  set: (order) => props.api.setFieldOrderByPath(props.path, order),
+});
+
+function getFieldItemKey(key: string): string {
+  return key;
+}
+
+function getFieldPath(key: string): string[] {
+  return props.api.getFieldPath(props.path, key);
+}
+
+function getFieldPathKey(key: string): string {
+  return props.api.getFieldPathKey(props.path, key);
+}
+
+function isObjectField(key: string): boolean {
+  return props.api.getFieldTypeByPath(props.path, key) === "object";
+}
+
+function isFieldExpanded(key: string): boolean {
+  return props.api.isPathExpanded(getFieldPath(key));
+}
+
+function toggleFieldExpand(key: string) {
+  props.api.togglePathExpanded(getFieldPath(key));
+}
+
+function isNewField(key: string): boolean {
+  return props.newFieldKeys.includes(getFieldPathKey(key));
+}
+
+function removeField(key: string) {
+  emit("remove-field", {
+    path: [...props.path],
+    key,
+  });
+}
+
+function requestAddField() {
+  emit("request-add-field", [...props.path]);
+}
+
+function handleHover(pathKey: string) {
+  emit("hover-change", pathKey);
+}
+
+function handleDragStart(event: { oldIndex?: number }) {
+  emit("drag-start", {
+    path: [...props.path],
+    oldIndex: event.oldIndex,
+  });
+}
+
+function handleDragEnd() {
+  emit("drag-end");
+}
+
+function handleKeyChange(oldKey: string, newKey: string) {
+  const trimmedKey = newKey.trim();
+  if (trimmedKey && trimmedKey !== oldKey) {
+    emit("update-field-key", {
+      path: [...props.path],
+      oldKey,
+      newKey: trimmedKey,
+    });
+  }
+}
+
+function handleTypeChange(key: string, type: FieldType) {
+  emit("update-field-type", {
+    path: [...props.path],
+    key,
+    type,
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.field-tree-level {
+  display: flex;
+  flex-direction: column;
+}
+
+.field-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.field-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border-secondary);
+  transition: all 0.15s ease;
+
+  &:hover,
+  &.is-hovered {
+    background: var(--color-primary-bg);
+  }
+
+  &.is-dragging {
+    background: var(--color-primary-bg);
+    opacity: 0.9;
+  }
+
+  &.is-new-field {
+    background: var(--color-primary-bg);
+    border-left: 3px solid var(--color-primary);
+  }
+}
+
+.drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 32px;
+  cursor: grab;
+  color: var(--color-text-quaternary);
+  flex-shrink: 0;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.expand-toggle,
+.expand-placeholder {
+  width: 22px;
+  height: 32px;
+  min-width: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-tertiary);
+}
+
+.expand-placeholder {
+  display: flex;
+}
+
+.field-label-section {
+  width: 140px;
+  flex-shrink: 0;
+
+  .field-label {
+    font-weight: 500;
+    font-size: 13px;
+    color: var(--color-text-primary);
+    line-height: 32px;
+  }
+
+  .field-key-hint {
+    font-size: 11px;
+    color: var(--color-text-tertiary);
+    line-height: 1.3;
+    margin-top: 2px;
+    word-break: break-all;
+  }
+
+  .field-key-input {
+    font-size: 13px;
+    font-weight: 500;
+
+    &.is-new {
+      border-color: var(--color-primary);
+      background: var(--color-bg-container);
+    }
+  }
+}
+
+.field-input-section {
+  flex: 1;
+  min-width: 0;
+
+  :deep(.ant-input),
+  :deep(.ant-select),
+  :deep(.ant-input-affix-wrapper),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  .boolean-field-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 32px;
+  }
+
+  .switch-label {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+
+  .object-field-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 32px;
+    background: var(--color-bg-layout);
+    border: 1px dashed var(--color-border-secondary);
+    border-radius: 6px;
+    padding: 0 10px;
+    gap: 8px;
+  }
+
+  .object-summary {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.field-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  flex-shrink: 0;
+
+  &.is-visible {
+    opacity: 1;
+  }
+
+  :deep(.ant-btn) {
+    padding: 0 6px;
+    height: 32px;
+    font-size: 11px;
+  }
+
+  .type-selector {
+    width: 90px;
+  }
+}
+
+.add-field-section {
+  padding: 10px 12px 12px;
+  border-bottom: 1px solid var(--color-border-secondary);
+
+  .add-field-btn {
+    border-style: dashed;
+
+    &:hover {
+      border-color: var(--color-primary);
+      color: var(--color-primary);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .field-row {
+    flex-wrap: wrap;
+
+    .field-label-section {
+      width: 100%;
+      padding-top: 0;
+      margin-bottom: 6px;
+    }
+
+    .field-actions {
+      width: 100%;
+      justify-content: flex-end;
+      opacity: 1;
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/JsonInput/index.vue b/antdv-next-admin/src/components/JsonInput/index.vue
new file mode 100644
index 0000000..b3c9206
--- /dev/null
+++ b/antdv-next-admin/src/components/JsonInput/index.vue
@@ -0,0 +1,1035 @@
+<template>
+  <div class="json-input-wrapper">
+    <a-input-search
+      v-model:value="displayValue"
+      :placeholder="placeholder"
+      readonly
+      @search="showModal"
+      @click="showModal"
+    >
+      <template #enterButton>
+        <a-button type="primary">
+          <EditOutlined />
+        </a-button>
+      </template>
+    </a-input-search>
+
+    <a-modal
+      v-model:open="modalVisible"
+      :title="modalTitle"
+      :width="modalWidth"
+      :ok-text="okText"
+      :cancel-text="cancelText"
+      @ok="handleOk"
+      @cancel="handleCancel"
+      class="json-input-modal"
+    >
+      <a-alert
+        v-if="errorMessage"
+        :message="errorMessage"
+        type="error"
+        show-icon
+        class="json-error-alert"
+      />
+
+      <template v-if="!useRawEdit">
+        <div class="tree-edit-container">
+          <div class="editor-panel">
+            <div class="editor-toolbar">
+              <a-space>
+                <span class="panel-title">结构列表</span>
+                <a-tag color="blue">{{ rootFieldCount }} 个字段</a-tag>
+              </a-space>
+              <a-space size="small">
+                <a-button
+                  type="link"
+                  size="small"
+                  @click="expandAllObjectFields"
+                  >展开全部</a-button
+                >
+                <a-button
+                  type="link"
+                  size="small"
+                  @click="collapseAllObjectFields"
+                  >全部收起</a-button
+                >
+              </a-space>
+            </div>
+
+            <div class="editor-content">
+              <JsonFieldTreeList
+                :path="[]"
+                :depth="0"
+                :allow-add="allowAdd"
+                :allow-delete="allowDelete"
+                :allow-sort="allowSort"
+                :allow-edit-key="true"
+                :allow-edit-type="true"
+                :hovered-path-key="hoveredFieldPathKey"
+                :dragging-path-key="draggingFieldPathKey"
+                :api="treeEditorApi"
+                :new-field-keys="newFieldKeys"
+                @hover-change="onHoverChange"
+                @request-add-field="addInlineField"
+                @remove-field="onRemoveField"
+                @drag-start="onDragStart"
+                @drag-end="onDragEnd"
+                @update-field-key="onUpdateFieldKey"
+                @update-field-type="onUpdateFieldType"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-else>
+        <ProCodeEditor
+          v-model="rawJsonText"
+          language="json"
+          :height="400"
+          :show-toolbar="true"
+          :format-on-blur="true"
+        />
+      </template>
+
+      <template #footer>
+        <a-space>
+          <a-button @click="toggleEditMode" size="small">
+            {{ useRawEdit ? "结构编辑" : "原始编辑" }}
+          </a-button>
+          <a-button @click="handleCancel" size="small">
+            {{ cancelText }}
+          </a-button>
+          <a-button type="primary" @click="handleOk" size="small">
+            {{ okText }}
+          </a-button>
+        </a-space>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EditOutlined } from "@antdv-next/icons";
+import { message } from "antdv-next";
+import { ref, computed, watch, type PropType } from "vue";
+
+import ProCodeEditor from "@/components/Pro/ProCodeEditor/index.vue";
+
+import JsonFieldTreeList, {
+  type FieldType,
+  type JsonObject,
+  type FieldConfig,
+  type JsonTreeEditorApi,
+} from "./JsonFieldTreeList.vue";
+
+defineOptions({
+  name: "JsonInput",
+});
+
+interface LabelMap {
+  [key: string]: string;
+}
+
+interface FieldConfigMap {
+  [key: string]: FieldConfig;
+}
+
+interface RemoveFieldPayload {
+  path: string[];
+  key: string;
+}
+
+interface DragStartPayload {
+  path: string[];
+  oldIndex?: number;
+}
+
+interface UpdateFieldKeyPayload {
+  path: string[];
+  oldKey: string;
+  newKey: string;
+}
+
+interface UpdateFieldTypePayload {
+  path: string[];
+  key: string;
+  type: FieldType;
+}
+
+const props = defineProps({
+  value: {
+    type: Object as PropType<JsonObject | null>,
+    default: null,
+  },
+  displayKey: {
+    type: String,
+    default: "",
+  },
+  labelMap: {
+    type: Object as PropType<LabelMap>,
+    default: () => ({}),
+  },
+  fieldConfig: {
+    type: Object as PropType<FieldConfigMap>,
+    default: () => ({}),
+  },
+  disabledFields: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  readonlyFields: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  allowAdd: {
+    type: Boolean,
+    default: true,
+  },
+  allowDelete: {
+    type: Boolean,
+    default: true,
+  },
+  allowSort: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  modalTitle: {
+    type: String,
+    default: "",
+  },
+  modalWidth: {
+    type: String,
+    default: "900px",
+  },
+});
+
+const emit = defineEmits(["update:value", "change"]);
+
+const modalVisible = ref(false);
+const editData = ref<JsonObject>({});
+const fieldOrderMap = ref<Record<string, string[]>>({});
+const dynamicTypeMap = ref<Record<string, FieldType>>({});
+const arrayTextBuffer = ref<Record<string, string>>({});
+const expandedPathKeys = ref<string[]>([]);
+const errorMessage = ref("");
+const useRawEdit = ref(false);
+const rawJsonText = ref("");
+const hoveredFieldPathKey = ref("");
+const draggingFieldPathKey = ref("");
+const newFieldKeys = ref<string[]>([]);
+
+const okText = "确定";
+const cancelText = "取消";
+
+const displayValue = computed(() => {
+  if (!props.value) {
+    return "";
+  }
+  if (props.displayKey && props.value[props.displayKey] !== undefined) {
+    return String(props.value[props.displayKey]);
+  }
+  return `${JSON.stringify(props.value).slice(0, 50)}...`;
+});
+
+const rootFieldCount = computed(() => getFieldOrderByPath([]).length);
+
+function isPlainObject(value: unknown): value is JsonObject {
+  return Object.prototype.toString.call(value) === "[object Object]";
+}
+
+function deepCloneObject<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+function normalizeInputValue(value: JsonObject | null): JsonObject {
+  if (!value || !isPlainObject(value)) {
+    return {};
+  }
+  return deepCloneObject(value);
+}
+
+function serializePath(path: string[]): string {
+  return JSON.stringify(path);
+}
+
+function parsePath(pathKey: string): string[] {
+  try {
+    const parsed: unknown = JSON.parse(pathKey);
+    if (
+      Array.isArray(parsed) &&
+      parsed.every((item) => typeof item === "string")
+    ) {
+      return parsed;
+    }
+  } catch {
+    return [];
+  }
+  return [];
+}
+
+function isPathPrefix(prefix: string[], target: string[]): boolean {
+  if (prefix.length > target.length) {
+    return false;
+  }
+  return prefix.every((segment, index) => segment === target[index]);
+}
+
+function getValueByPath(root: unknown, path: string[]): unknown {
+  let current: unknown = root;
+  for (const segment of path) {
+    if (Array.isArray(current)) {
+      const index = Number(segment);
+      if (!Number.isInteger(index) || index < 0 || index >= current.length) {
+        return undefined;
+      }
+      current = current[index];
+      continue;
+    }
+    if (isPlainObject(current)) {
+      current = current[segment];
+      continue;
+    }
+    return undefined;
+  }
+  return current;
+}
+
+function getObjectByPath(path: string[]): JsonObject | null {
+  const value = getValueByPath(editData.value, path);
+  if (isPlainObject(value)) {
+    return value;
+  }
+  return null;
+}
+
+function getFieldPath(path: string[], key: string): string[] {
+  return [...path, key];
+}
+
+function getFieldPathKey(path: string[], key: string): string {
+  return serializePath(getFieldPath(path, key));
+}
+
+function getFieldConfigByPath(
+  path: string[],
+  key: string,
+): FieldConfig | undefined {
+  const fullPathKey = getFieldPath(path, key).join(".");
+  return props.fieldConfig[fullPathKey] || props.fieldConfig[key];
+}
+
+function getFieldLabelByPath(path: string[], key: string): string {
+  const config = getFieldConfigByPath(path, key);
+  const fullPathKey = getFieldPath(path, key).join(".");
+  return (
+    config?.label || props.labelMap[fullPathKey] || props.labelMap[key] || key
+  );
+}
+
+function hasLabelMapByPath(path: string[], key: string): boolean {
+  const config = getFieldConfigByPath(path, key);
+  const fullPathKey = getFieldPath(path, key).join(".");
+  return Boolean(
+    config?.label || props.labelMap[fullPathKey] || props.labelMap[key],
+  );
+}
+
+function isLongTextFieldByPath(path: string[], key: string): boolean {
+  return getFieldConfigByPath(path, key)?.component === "textarea";
+}
+
+function setDynamicFieldType(path: string[], key: string, type: FieldType) {
+  dynamicTypeMap.value[getFieldPathKey(path, key)] = type;
+}
+
+function getDynamicFieldType(
+  path: string[],
+  key: string,
+): FieldType | undefined {
+  return dynamicTypeMap.value[getFieldPathKey(path, key)];
+}
+
+function clearDynamicFieldTypeByPrefix(path: string[]) {
+  for (const pathKey of Object.keys(dynamicTypeMap.value)) {
+    const targetPath = parsePath(pathKey);
+    if (isPathPrefix(path, targetPath)) {
+      delete dynamicTypeMap.value[pathKey];
+    }
+  }
+}
+
+function getFieldTypeByPath(path: string[], key: string): FieldType {
+  const dynamicType = getDynamicFieldType(path, key);
+  if (dynamicType) {
+    return dynamicType;
+  }
+
+  const configType = getFieldConfigByPath(path, key)?.type;
+  if (configType) {
+    return configType;
+  }
+
+  const target = getObjectByPath(path);
+  const value = target ? target[key] : undefined;
+
+  if (value === null || value === undefined) {
+    return "string";
+  }
+  if (typeof value === "boolean") {
+    return "boolean";
+  }
+  if (typeof value === "number") {
+    return "number";
+  }
+  if (Array.isArray(value)) {
+    if (value.length > 0 && value.every((item) => typeof item === "string")) {
+      return "tags";
+    }
+    return "array";
+  }
+  if (isPlainObject(value)) {
+    return "object";
+  }
+  return "string";
+}
+
+function isFieldDisabledByPath(path: string[], key: string): boolean {
+  const fullPathKey = getFieldPath(path, key).join(".");
+  return (
+    props.disabledFields.includes(fullPathKey) ||
+    props.disabledFields.includes(key)
+  );
+}
+
+function isFieldReadonlyByPath(path: string[], key: string): boolean {
+  const fullPathKey = getFieldPath(path, key).join(".");
+  return (
+    isFieldDisabledByPath(path, key) ||
+    props.readonlyFields.includes(fullPathKey) ||
+    props.readonlyFields.includes(key)
+  );
+}
+
+function getFieldOrderByPath(path: string[]): string[] {
+  const target = getObjectByPath(path);
+  if (!target) {
+    return [];
+  }
+
+  const pathKey = serializePath(path);
+  const keys = Object.keys(target);
+  const currentOrder = fieldOrderMap.value[pathKey];
+
+  if (!currentOrder) {
+    fieldOrderMap.value[pathKey] = [...keys];
+    return fieldOrderMap.value[pathKey];
+  }
+
+  const normalizedOrder = currentOrder.filter((key) =>
+    Object.prototype.hasOwnProperty.call(target, key),
+  );
+  keys.forEach((key) => {
+    if (!normalizedOrder.includes(key)) {
+      normalizedOrder.push(key);
+    }
+  });
+
+  const isSameLength = normalizedOrder.length === currentOrder.length;
+  const isSameOrder =
+    isSameLength &&
+    normalizedOrder.every((key, index) => key === currentOrder[index]);
+  if (!isSameOrder) {
+    fieldOrderMap.value[pathKey] = normalizedOrder;
+    return normalizedOrder;
+  }
+
+  return currentOrder;
+}
+
+function setFieldOrderByPath(path: string[], order: string[]) {
+  fieldOrderMap.value[serializePath(path)] = [...order];
+}
+
+function getObjectSummaryByPath(path: string[], key: string): string {
+  const target = getObjectByPath(path);
+  const value = target ? target[key] : undefined;
+  if (isPlainObject(value)) {
+    return `对象（${Object.keys(value).length} 个字段）`;
+  }
+  return "对象";
+}
+
+function parseArrayTextValue(value: string): unknown[] {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return [];
+  }
+
+  const parsed = JSON.parse(trimmed);
+  if (!Array.isArray(parsed)) {
+    throw new Error("NOT_ARRAY");
+  }
+
+  return parsed;
+}
+
+function getArrayFieldTextByPath(path: string[], key: string): string {
+  const fieldPath = getFieldPath(path, key);
+  const pathKey = serializePath(fieldPath);
+
+  if (Object.prototype.hasOwnProperty.call(arrayTextBuffer.value, pathKey)) {
+    return arrayTextBuffer.value[pathKey];
+  }
+
+  const target = getObjectByPath(path);
+  const value = target ? target[key] : undefined;
+  if (Array.isArray(value)) {
+    return JSON.stringify(value, null, 2);
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return "[]";
+}
+
+function onArrayTextChangeByPath(path: string[], key: string, value: string) {
+  arrayTextBuffer.value[serializePath(getFieldPath(path, key))] = value;
+}
+
+function commitArrayBuffer(path: string[]): boolean {
+  if (path.length === 0) {
+    return true;
+  }
+
+  const pathKey = serializePath(path);
+  if (!Object.prototype.hasOwnProperty.call(arrayTextBuffer.value, pathKey)) {
+    return true;
+  }
+
+  const parentPath = path.slice(0, -1);
+  const fieldKey = path[path.length - 1];
+  const parent = getValueByPath(editData.value, parentPath);
+
+  if (!isPlainObject(parent)) {
+    delete arrayTextBuffer.value[pathKey];
+    return true;
+  }
+
+  try {
+    const parsed = parseArrayTextValue(arrayTextBuffer.value[pathKey]);
+    parent[fieldKey] = parsed;
+    delete arrayTextBuffer.value[pathKey];
+    return true;
+  } catch {
+    errorMessage.value = `${getFieldLabelByPath(parentPath, fieldKey)}: 无效的数组格式`;
+    return false;
+  }
+}
+
+function validateArrayByPath(path: string[], key: string) {
+  if (commitArrayBuffer(getFieldPath(path, key))) {
+    errorMessage.value = "";
+  }
+}
+
+function syncAllArrayBuffers(): boolean {
+  const keys = Object.keys(arrayTextBuffer.value);
+  for (const key of keys) {
+    const path = parsePath(key);
+    if (!commitArrayBuffer(path)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function clearArrayBufferByPrefix(path: string[]) {
+  for (const pathKey of Object.keys(arrayTextBuffer.value)) {
+    const targetPath = parsePath(pathKey);
+    if (isPathPrefix(path, targetPath)) {
+      delete arrayTextBuffer.value[pathKey];
+    }
+  }
+}
+
+function getOrderedObjectKeys(path: string[], target: JsonObject): string[] {
+  const defaultKeys = Object.keys(target);
+  const customOrder = fieldOrderMap.value[serializePath(path)];
+  if (!customOrder) {
+    return defaultKeys;
+  }
+
+  const ordered = customOrder.filter((key) =>
+    Object.prototype.hasOwnProperty.call(target, key),
+  );
+  defaultKeys.forEach((key) => {
+    if (!ordered.includes(key)) {
+      ordered.push(key);
+    }
+  });
+  return ordered;
+}
+
+function collectObjectPathKeys(value: unknown, path: string[] = []): string[] {
+  if (!isPlainObject(value)) {
+    return [];
+  }
+
+  const keys: string[] = [];
+  const orderedKeys = getOrderedObjectKeys(path, value);
+
+  orderedKeys.forEach((key) => {
+    const childPath = [...path, key];
+    const childValue = value[key];
+    if (isPlainObject(childValue)) {
+      keys.push(serializePath(childPath));
+      keys.push(...collectObjectPathKeys(childValue, childPath));
+    }
+  });
+
+  return keys;
+}
+
+function isPathExpanded(path: string[]): boolean {
+  if (path.length === 0) {
+    return true;
+  }
+  return expandedPathKeys.value.includes(serializePath(path));
+}
+
+function setPathExpanded(path: string[], expanded: boolean) {
+  const pathKey = serializePath(path);
+  const next = expandedPathKeys.value.filter((item) => item !== pathKey);
+  if (expanded) {
+    next.push(pathKey);
+  }
+  expandedPathKeys.value = next;
+}
+
+function togglePathExpanded(path: string[]) {
+  setPathExpanded(path, !isPathExpanded(path));
+}
+
+function clearExpandedPathKeysByPrefix(path: string[]) {
+  expandedPathKeys.value = expandedPathKeys.value.filter((pathKey) => {
+    const targetPath = parsePath(pathKey);
+    return !isPathPrefix(path, targetPath);
+  });
+}
+
+function expandAllObjectFields() {
+  expandedPathKeys.value = collectObjectPathKeys(editData.value);
+}
+
+function collapseAllObjectFields() {
+  expandedPathKeys.value = [];
+}
+
+function buildOrderedValue(value: unknown, path: string[] = []): unknown {
+  if (Array.isArray(value)) {
+    return value.map((item, index) =>
+      buildOrderedValue(item, [...path, String(index)]),
+    );
+  }
+
+  if (!isPlainObject(value)) {
+    return value;
+  }
+
+  const orderedKeys = getFieldOrderByPath(path);
+  const result: JsonObject = {};
+
+  orderedKeys.forEach((key) => {
+    if (Object.prototype.hasOwnProperty.call(value, key)) {
+      result[key] = buildOrderedValue(value[key], [...path, key]);
+    }
+  });
+
+  return result;
+}
+
+function resetEditorState(nextValue: JsonObject) {
+  editData.value = nextValue;
+  fieldOrderMap.value = {};
+  dynamicTypeMap.value = {};
+  arrayTextBuffer.value = {};
+  hoveredFieldPathKey.value = "";
+  draggingFieldPathKey.value = "";
+  newFieldKeys.value = [];
+  getFieldOrderByPath([]);
+  expandedPathKeys.value = collectObjectPathKeys(nextValue);
+}
+
+function showModal() {
+  modalVisible.value = true;
+  errorMessage.value = "";
+  useRawEdit.value = false;
+
+  const normalized = normalizeInputValue(props.value);
+  resetEditorState(normalized);
+  rawJsonText.value = JSON.stringify(normalized, null, 2);
+}
+
+function handleCancel() {
+  modalVisible.value = false;
+  errorMessage.value = "";
+}
+
+function handleOk() {
+  errorMessage.value = "";
+
+  if (useRawEdit.value) {
+    try {
+      const parsed: unknown = JSON.parse(rawJsonText.value);
+      if (!isPlainObject(parsed)) {
+        errorMessage.value = "JSON 根节点必须是对象";
+        return;
+      }
+      emit("update:value", parsed);
+      emit("change", parsed);
+      modalVisible.value = false;
+    } catch {
+      errorMessage.value = "JSON 格式错误";
+    }
+    return;
+  }
+
+  if (!syncAllArrayBuffers()) {
+    return;
+  }
+
+  const result = buildOrderedValue(editData.value);
+  if (!isPlainObject(result)) {
+    errorMessage.value = "JSON 根节点必须是对象";
+    return;
+  }
+
+  emit("update:value", result);
+  emit("change", result);
+  modalVisible.value = false;
+}
+
+function toggleEditMode() {
+  if (!useRawEdit.value) {
+    if (!syncAllArrayBuffers()) {
+      return;
+    }
+    rawJsonText.value = JSON.stringify(editData.value, null, 2);
+    useRawEdit.value = true;
+    return;
+  }
+
+  try {
+    const parsed: unknown = JSON.parse(rawJsonText.value);
+    if (!isPlainObject(parsed)) {
+      errorMessage.value = "JSON 根节点必须是对象";
+      return;
+    }
+
+    resetEditorState(parsed);
+    errorMessage.value = "";
+    useRawEdit.value = false;
+  } catch {
+    errorMessage.value = "JSON 格式错误";
+  }
+}
+
+function generateTempFieldName(path: string[]): string {
+  const target = getObjectByPath(path);
+  if (!target) {
+    return "new_field";
+  }
+  let index = 1;
+  while (Object.prototype.hasOwnProperty.call(target, `new_field_${index}`)) {
+    index++;
+  }
+  return `new_field_${index}`;
+}
+
+function getDefaultValueForType(type: FieldType): unknown {
+  switch (type) {
+    case "boolean":
+      return false;
+    case "number":
+      return 0;
+    case "tags":
+    case "array":
+      return [];
+    case "object":
+      return {};
+    default:
+      return "";
+  }
+}
+
+function addInlineField(path: string[]) {
+  const target = getObjectByPath(path);
+  if (!target) {
+    message.warning("目标对象不存在");
+    return;
+  }
+
+  const tempKey = generateTempFieldName(path);
+  const currentOrder = getFieldOrderByPath(path);
+
+  target[tempKey] = "";
+  setDynamicFieldType(path, tempKey, "string");
+  setFieldOrderByPath(path, [...currentOrder, tempKey]);
+
+  const newPathKey = getFieldPathKey(path, tempKey);
+  newFieldKeys.value = [...newFieldKeys.value, newPathKey];
+}
+
+function onUpdateFieldKey(payload: UpdateFieldKeyPayload) {
+  const { path, oldKey, newKey } = payload;
+  const target = getObjectByPath(path);
+
+  if (!target) {
+    return;
+  }
+
+  if (Object.prototype.hasOwnProperty.call(target, newKey)) {
+    message.warning("字段名已存在");
+    return;
+  }
+
+  const oldPathKey = getFieldPathKey(path, oldKey);
+  const isNewField = newFieldKeys.value.includes(oldPathKey);
+
+  const value = target[oldKey];
+  const fieldType = getFieldTypeByPath(path, oldKey);
+
+  delete target[oldKey];
+
+  target[newKey] = value;
+
+  const currentOrder = getFieldOrderByPath(path);
+  const newOrder = currentOrder.map((key) => (key === oldKey ? newKey : key));
+  setFieldOrderByPath(path, newOrder);
+
+  const oldDynamicType = dynamicTypeMap.value[oldPathKey];
+  if (oldDynamicType) {
+    delete dynamicTypeMap.value[oldPathKey];
+    dynamicTypeMap.value[getFieldPathKey(path, newKey)] = oldDynamicType;
+  }
+
+  if (isNewField) {
+    newFieldKeys.value = newFieldKeys.value.filter((k) => k !== oldPathKey);
+    const newPathKey = getFieldPathKey(path, newKey);
+    newFieldKeys.value = [...newFieldKeys.value, newPathKey];
+  }
+
+  const oldArrayBufferKey = serializePath(getFieldPath(path, oldKey));
+  if (
+    Object.prototype.hasOwnProperty.call(
+      arrayTextBuffer.value,
+      oldArrayBufferKey,
+    )
+  ) {
+    const bufferValue = arrayTextBuffer.value[oldArrayBufferKey];
+    delete arrayTextBuffer.value[oldArrayBufferKey];
+    arrayTextBuffer.value[serializePath(getFieldPath(path, newKey))] =
+      bufferValue;
+  }
+
+  if (fieldType === "object") {
+    const oldExpandedKey = serializePath(getFieldPath(path, oldKey));
+    const wasExpanded = expandedPathKeys.value.includes(oldExpandedKey);
+    if (wasExpanded) {
+      expandedPathKeys.value = expandedPathKeys.value.filter(
+        (k) => k !== oldExpandedKey,
+      );
+      expandedPathKeys.value = [
+        ...expandedPathKeys.value,
+        serializePath(getFieldPath(path, newKey)),
+      ];
+    }
+
+    expandedPathKeys.value = expandedPathKeys.value.map((pathKey) => {
+      const parsedPath = parsePath(pathKey);
+      const keyIndex = path.length;
+      if (parsedPath.length > keyIndex && parsedPath[keyIndex] === oldKey) {
+        parsedPath[keyIndex] = newKey;
+        return serializePath(parsedPath);
+      }
+      return pathKey;
+    });
+  }
+
+  message.success("字段名已更新");
+}
+
+function onUpdateFieldType(payload: UpdateFieldTypePayload) {
+  const { path, key, type } = payload;
+  const target = getObjectByPath(path);
+
+  if (!target) {
+    return;
+  }
+
+  const currentType = getFieldTypeByPath(path, key);
+  if (currentType === type) {
+    return;
+  }
+
+  setDynamicFieldType(path, key, type);
+
+  const arrayPathKey = serializePath(getFieldPath(path, key));
+  delete arrayTextBuffer.value[arrayPathKey];
+
+  target[key] = getDefaultValueForType(type);
+
+  if (type === "object") {
+    setPathExpanded(getFieldPath(path, key), true);
+  } else if (type === "array") {
+    arrayTextBuffer.value[arrayPathKey] = "[]";
+  }
+}
+
+function onRemoveField(payload: RemoveFieldPayload) {
+  const target = getObjectByPath(payload.path);
+  if (!target) {
+    return;
+  }
+
+  delete target[payload.key];
+  setFieldOrderByPath(
+    payload.path,
+    getFieldOrderByPath(payload.path).filter((key) => key !== payload.key),
+  );
+
+  const removedPath = [...payload.path, payload.key];
+  clearArrayBufferByPrefix(removedPath);
+  clearDynamicFieldTypeByPrefix(removedPath);
+  clearExpandedPathKeysByPrefix(removedPath);
+
+  const removedPathKey = serializePath(removedPath);
+  newFieldKeys.value = newFieldKeys.value.filter((k) => k !== removedPathKey);
+
+  if (hoveredFieldPathKey.value === removedPathKey) {
+    hoveredFieldPathKey.value = "";
+  }
+  if (draggingFieldPathKey.value === removedPathKey) {
+    draggingFieldPathKey.value = "";
+  }
+}
+
+function onHoverChange(pathKey: string) {
+  hoveredFieldPathKey.value = pathKey;
+}
+
+function onDragStart(payload: DragStartPayload) {
+  if (payload.oldIndex === undefined) {
+    draggingFieldPathKey.value = "";
+    return;
+  }
+
+  const currentOrder = getFieldOrderByPath(payload.path);
+  const fieldKey = currentOrder[payload.oldIndex];
+  draggingFieldPathKey.value = fieldKey
+    ? getFieldPathKey(payload.path, fieldKey)
+    : "";
+}
+
+function onDragEnd() {
+  draggingFieldPathKey.value = "";
+}
+
+const treeEditorApi: JsonTreeEditorApi = {
+  getObjectByPath,
+  getFieldOrderByPath,
+  setFieldOrderByPath,
+  getFieldPath,
+  getFieldPathKey,
+  getFieldLabelByPath,
+  hasLabelMapByPath,
+  getFieldTypeByPath,
+  getFieldConfigByPath,
+  isLongTextFieldByPath,
+  isFieldDisabledByPath,
+  isFieldReadonlyByPath,
+  getObjectSummaryByPath,
+  getArrayFieldTextByPath,
+  onArrayTextChangeByPath,
+  validateArrayByPath,
+  isPathExpanded,
+  togglePathExpanded,
+};
+
+watch(
+  () => props.value,
+  (newVal) => {
+    if (modalVisible.value) {
+      return;
+    }
+
+    const normalized = normalizeInputValue(newVal);
+    editData.value = normalized;
+    fieldOrderMap.value = {};
+    dynamicTypeMap.value = {};
+    arrayTextBuffer.value = {};
+    newFieldKeys.value = [];
+    getFieldOrderByPath([]);
+    expandedPathKeys.value = collectObjectPathKeys(normalized);
+  },
+  { deep: true },
+);
+</script>
+
+<style scoped lang="scss">
+.json-input-wrapper {
+  width: 100%;
+}
+
+.json-input-modal {
+  :deep(.ant-modal-body) {
+    max-height: 70vh;
+    overflow: hidden;
+    padding: 16px 20px;
+    background: var(--color-bg-layout);
+  }
+}
+
+.json-error-alert {
+  margin-bottom: 12px;
+}
+
+.tree-edit-container {
+  min-height: 420px;
+
+  .editor-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 420px;
+    background: var(--color-bg-container);
+    border: 1px solid var(--color-border-secondary);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .editor-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--color-border-secondary);
+  }
+
+  .panel-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  .editor-content {
+    flex: 1;
+    overflow: auto;
+    max-height: 420px;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/AICollabPanel.vue b/antdv-next-admin/src/components/Layout/AICollabPanel.vue
new file mode 100644
index 0000000..544a7cf
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/AICollabPanel.vue
@@ -0,0 +1,402 @@
+<template>
+  <aside class="ai-panel">
+    <div class="panel-header">
+      <div class="title-wrap">
+        <div class="title">{{ $t('layout.aiAssistantTitle') }}</div>
+        <div class="subtitle">{{ $t('layout.aiAssistantSubtitle') }}</div>
+      </div>
+      <a-button type="text" class="close-btn" @click="emitClose">
+        <CloseOutlined />
+      </a-button>
+    </div>
+
+    <div class="context-row">
+      <a-tag color="blue">{{ $t('layout.aiCurrentPage') }}: {{ currentPageTitle }}</a-tag>
+      <a-tag>{{ route.path }}</a-tag>
+    </div>
+
+    <div class="quick-actions">
+      <div class="section-title">{{ $t('layout.aiQuickActions') }}</div>
+      <a-space wrap size="small">
+        <a-button
+          v-for="item in quickActions"
+          :key="item.id"
+          size="small"
+          @click="applyPrompt(item.prompt)"
+        >
+          {{ item.label }}
+        </a-button>
+      </a-space>
+    </div>
+
+    <div ref="messagesBodyRef" class="messages">
+      <template v-if="messages.length > 0">
+        <div
+          v-for="message in messages"
+          :key="message.id"
+          class="message-item"
+          :class="[
+            `is-${message.role}`,
+            { 'is-streaming': isStreaming && streamingMessageId === message.id },
+          ]"
+        >
+          <div class="message-role">{{ message.role === 'assistant' ? 'AI' : 'You' }}</div>
+          <div class="message-content">{{ message.content }}</div>
+        </div>
+      </template>
+      <div v-else class="message-empty">
+        <div class="empty-title">{{ $t('layout.aiEmptyTitle') }}</div>
+        <div class="empty-desc">{{ $t('layout.aiEmptyDescription') }}</div>
+      </div>
+    </div>
+
+    <div class="input-wrap">
+      <a-textarea
+        v-model:value="draft"
+        :rows="3"
+        :placeholder="$t('layout.aiInputPlaceholder')"
+        @keydown.enter="handleEnter"
+      />
+      <div class="input-actions">
+        <span class="hint">{{
+          isStreaming ? $t('common.loading') : $t('layout.aiEnterHint')
+        }}</span>
+        <a-space size="small">
+          <a-button size="small" @click="clearMessages">{{ $t('common.clear') }}</a-button>
+          <a-button
+            type="primary"
+            size="small"
+            :disabled="!draft.trim() || isStreaming"
+            @click="sendMessage"
+          >
+            {{ $t('common.submit') }}
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { CloseOutlined } from '@antdv-next/icons';
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { $t } from '@/locales';
+import { resolveLocaleText } from '@/utils/i18n';
+
+type MessageRole = 'assistant' | 'user';
+
+interface ChatMessage {
+  id: number;
+  role: MessageRole;
+  content: string;
+}
+
+interface QuickActionItem {
+  id: string;
+  label: string;
+  prompt: string;
+}
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const route = useRoute();
+const draft = ref('');
+const messages = ref<ChatMessage[]>([]);
+const messagesBodyRef = ref<HTMLElement | null>(null);
+const isStreaming = ref(false);
+const streamingMessageId = ref<number | null>(null);
+let messageId = 0;
+let streamTimer: number | null = null;
+
+const currentPageTitle = computed(() => {
+  const routeTitle = typeof route.meta?.title === 'string' ? route.meta.title : '';
+  const routeName = typeof route.name === 'string' ? route.name : route.path;
+  if (routeTitle) {
+    return resolveLocaleText(routeTitle, routeName);
+  }
+  return routeName;
+});
+
+const quickActions = computed<QuickActionItem[]>(() => {
+  return [
+    {
+      id: 'explain',
+      label: $t('layout.aiActionExplain'),
+      prompt: $t('layout.aiActionExplain'),
+    },
+    {
+      id: 'summary',
+      label: $t('layout.aiActionSummary'),
+      prompt: $t('layout.aiActionSummary'),
+    },
+    {
+      id: 'risk',
+      label: $t('layout.aiActionRisk'),
+      prompt: $t('layout.aiActionRisk'),
+    },
+    {
+      id: 'next-step',
+      label: $t('layout.aiActionNextStep'),
+      prompt: $t('layout.aiActionNextStep'),
+    },
+  ];
+});
+
+const emitClose = () => {
+  stopStreaming();
+  emit('close');
+};
+
+const appendMessage = (role: MessageRole, content: string) => {
+  messageId += 1;
+  messages.value.push({
+    id: messageId,
+    role,
+    content,
+  });
+  return messageId;
+};
+
+const applyPrompt = (prompt: string) => {
+  draft.value = prompt;
+};
+
+const scrollToBottom = () => {
+  requestAnimationFrame(() => {
+    const body = messagesBodyRef.value;
+    if (!body) {
+      return;
+    }
+    body.scrollTop = body.scrollHeight;
+  });
+};
+
+const stopStreaming = () => {
+  if (streamTimer !== null) {
+    window.clearInterval(streamTimer);
+    streamTimer = null;
+  }
+  isStreaming.value = false;
+  streamingMessageId.value = null;
+};
+
+const streamAssistantReply = (fullReply: string) => {
+  stopStreaming();
+
+  const assistantId = appendMessage('assistant', '');
+  streamingMessageId.value = assistantId;
+  isStreaming.value = true;
+
+  let index = 0;
+  streamTimer = window.setInterval(() => {
+    const target = messages.value.find((item) => item.id === assistantId);
+    if (!target) {
+      stopStreaming();
+      return;
+    }
+
+    const step = Math.random() > 0.82 ? 2 : 1;
+    index = Math.min(fullReply.length, index + step);
+    target.content = fullReply.slice(0, index);
+    scrollToBottom();
+
+    if (index >= fullReply.length) {
+      stopStreaming();
+    }
+  }, 30);
+};
+
+const sendMessage = async () => {
+  if (isStreaming.value) {
+    return;
+  }
+
+  const input = draft.value.trim();
+  if (!input) {
+    return;
+  }
+
+  appendMessage('user', input);
+  draft.value = '';
+  await nextTick();
+  scrollToBottom();
+
+  const reply = $t('layout.aiDemoReply', { page: currentPageTitle.value });
+  streamAssistantReply(reply);
+};
+
+const handleEnter = (event: KeyboardEvent) => {
+  if (event.shiftKey) {
+    return;
+  }
+  event.preventDefault();
+  void sendMessage();
+};
+
+const clearMessages = () => {
+  stopStreaming();
+  messages.value = [];
+};
+
+onBeforeUnmount(() => {
+  stopStreaming();
+});
+</script>
+
+<style scoped lang="scss">
+.ai-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-container);
+  border-radius: 12px;
+  border: 1px solid var(--color-border-secondary);
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-border-secondary);
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-container));
+}
+
+.title-wrap {
+  min-width: 0;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.subtitle {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.close-btn {
+  flex-shrink: 0;
+}
+
+.context-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 10px 12px 0;
+}
+
+.quick-actions {
+  padding: 10px 12px 0;
+}
+
+.section-title {
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+
+.messages {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.message-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.message-role {
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+}
+
+.message-content {
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.message-item.is-assistant .message-content {
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  color: var(--color-text-primary);
+}
+
+.message-item.is-user .message-content {
+  background: var(--color-bg-layout);
+  color: var(--color-text-primary);
+}
+
+.message-item.is-streaming .message-content::after {
+  content: '';
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 2px;
+  vertical-align: -2px;
+  background: currentColor;
+  animation: ai-stream-caret 1s steps(1) infinite;
+}
+
+.message-empty {
+  margin: auto;
+  text-align: center;
+  color: var(--color-text-tertiary);
+}
+
+.empty-title {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+
+.empty-desc {
+  margin-top: 4px;
+  font-size: 12px;
+}
+
+.input-wrap {
+  border-top: 1px solid var(--color-border-secondary);
+  padding: 10px 12px;
+}
+
+.input-actions {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.hint {
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+}
+
+@keyframes ai-stream-caret {
+  0%,
+  49% {
+    opacity: 1;
+  }
+
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/AdminLayout.vue b/antdv-next-admin/src/components/Layout/AdminLayout.vue
new file mode 100644
index 0000000..91589fa
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/AdminLayout.vue
@@ -0,0 +1,955 @@
+<template>
+  <a-watermark v-bind="watermarkStore.watermarkProps" class="global-watermark">
+    <a-skip-to-content target="#main-content" />
+    <a-layout
+      class="admin-layout"
+      :class="[settingsStore.layoutMode, { mobile: layoutStore.isMobile }]"
+    >
+      <!-- Vertical Layout -->
+      <template v-if="settingsStore.layoutMode === 'vertical'">
+        <!-- Sidebar -->
+        <Sidebar v-if="!layoutStore.pageFullscreen" />
+
+        <!-- Main Content -->
+        <a-layout
+          class="layout-main"
+          :style="{
+            marginLeft:
+              layoutStore.isMobile || layoutStore.pageFullscreen
+                ? '0px'
+                : `${layoutStore.getCurrentSidebarWidth()}px`,
+          }"
+        >
+          <!-- Header -->
+          <Header v-if="!layoutStore.pageFullscreen" />
+
+          <!-- Tabs -->
+          <TabBar />
+
+          <!-- Page Content -->
+          <a-layout-content
+            id="main-content"
+            class="page-content"
+            :class="{ 'is-iframe-page': isIframePage }"
+          >
+            <div
+              ref="workspaceRef"
+              class="page-workspace"
+              :class="{ 'is-ai-active': isAICollabActive }"
+            >
+              <div class="page-workspace-main">
+                <div class="page-scroll">
+                  <router-view v-slot="{ Component }">
+                    <transition
+                      :name="settingsStore.pageAnimation"
+                      mode="out-in"
+                    >
+                      <keep-alive :include="cachedTabs">
+                        <component :is="Component" :key="pageViewKey" />
+                      </keep-alive>
+                    </transition>
+                  </router-view>
+                </div>
+              </div>
+
+              <Transition name="ai-panel">
+                <div
+                  v-if="isAICollabActive"
+                  class="page-workspace-side"
+                  :style="{
+                    '--ai-side-width': `${effectiveAiPanelWidth + 14}px`,
+                  }"
+                >
+                  <div
+                    class="page-workspace-resizer"
+                    role="separator"
+                    aria-orientation="vertical"
+                    @mousedown="startAiResize"
+                  />
+                  <AICollabPanel
+                    class="page-workspace-ai"
+                    :style="{ width: `${effectiveAiPanelWidth}px` }"
+                    @close="layoutStore.setAiCollabEnabled(false)"
+                  />
+                </div>
+              </Transition>
+            </div>
+          </a-layout-content>
+        </a-layout>
+      </template>
+
+      <!-- Horizontal Layout -->
+      <template v-else>
+        <a-layout-header
+          v-if="!layoutStore.pageFullscreen"
+          class="horizontal-header"
+        >
+          <div class="header-left">
+            <div class="logo">
+              <img :src="logoImg" alt="Logo" />
+              <span class="logo-title">{{
+                $t("common.appName") || "Antdv Next Admin"
+              }}</span>
+            </div>
+
+            <div ref="menuAreaRef" class="horizontal-menu-area">
+              <a-menu
+                class="horizontal-main-menu"
+                mode="horizontal"
+                :disabled-overflow="true"
+                :selected-keys="horizontalSelectedKeys"
+                :items="visibleHorizontalMenuItems"
+                trigger-sub-menu-action="hover"
+                @click="handleHorizontalMenuClick"
+              />
+              <a-dropdown
+                v-if="overflowHorizontalMenuItems.length > 0"
+                :menu="overflowMenuProps"
+                :trigger="['hover']"
+                placement="bottomRight"
+              >
+                <a-button type="text" class="horizontal-overflow-trigger">
+                  <EllipsisOutlined />
+                </a-button>
+              </a-dropdown>
+            </div>
+          </div>
+          <div class="header-right">
+            <Header :show-breadcrumb="false" :show-collapse-button="false" />
+          </div>
+          <div
+            ref="measureMenuWrapRef"
+            class="horizontal-menu-measure-wrap"
+            aria-hidden="true"
+          >
+            <a-menu
+              class="horizontal-menu-measure"
+              mode="horizontal"
+              :disabled-overflow="true"
+              :items="horizontalMenuItems"
+            />
+          </div>
+        </a-layout-header>
+
+        <a-layout>
+          <a-layout-content class="horizontal-content">
+            <!-- Tabs -->
+            <TabBar />
+
+            <!-- Page Content -->
+            <div
+              class="page-content"
+              :class="{ 'is-iframe-page': isIframePage }"
+            >
+              <div
+                ref="workspaceRef"
+                class="page-workspace"
+                :class="{ 'is-ai-active': isAICollabActive }"
+              >
+                <div class="page-workspace-main">
+                  <div class="page-scroll">
+                    <router-view v-slot="{ Component }">
+                      <transition
+                        :name="settingsStore.pageAnimation"
+                        mode="out-in"
+                      >
+                        <keep-alive :include="cachedTabs">
+                          <component :is="Component" :key="pageViewKey" />
+                        </keep-alive>
+                      </transition>
+                    </router-view>
+                  </div>
+                </div>
+
+                <Transition name="ai-panel">
+                  <div
+                    v-if="isAICollabActive"
+                    class="page-workspace-side"
+                    :style="{
+                      '--ai-side-width': `${effectiveAiPanelWidth + 14}px`,
+                    }"
+                  >
+                    <div
+                      class="page-workspace-resizer"
+                      role="separator"
+                      aria-orientation="vertical"
+                      @mousedown="startAiResize"
+                    />
+                    <AICollabPanel
+                      class="page-workspace-ai"
+                      :style="{ width: `${effectiveAiPanelWidth}px` }"
+                      @close="layoutStore.setAiCollabEnabled(false)"
+                    />
+                  </div>
+                </Transition>
+              </div>
+            </div>
+          </a-layout-content>
+        </a-layout>
+      </template>
+    </a-layout>
+  </a-watermark>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem as MenuItemType } from "@/types/router";
+import type { MenuProps } from "antdv-next";
+
+import { DownOutlined, EllipsisOutlined } from "@antdv-next/icons";
+import {
+  computed,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import logoImg from "@/assets/images/logo.png";
+import { basicRoutes } from "@/router/routes";
+import { routesToMenuTree } from "@/router/utils";
+import { useLayoutStore } from "@/stores/layout";
+import { usePermissionStore } from "@/stores/permission";
+import { useSettingsStore } from "@/stores/settings";
+import { useTabsStore } from "@/stores/tabs";
+import { useWatermarkStore } from "@/stores/watermark";
+import { resolveLocaleText } from "@/utils/i18n";
+import { resolveIcon } from "@/utils/icon";
+
+import AICollabPanel from "./AICollabPanel.vue";
+import Header from "./Header.vue";
+import Sidebar from "./Sidebar.vue";
+import TabBar from "./TabBar.vue";
+
+type HorizontalMenuItems = NonNullable<MenuProps["items"]>;
+
+const route = useRoute();
+const router = useRouter();
+const layoutStore = useLayoutStore();
+const settingsStore = useSettingsStore();
+const tabsStore = useTabsStore();
+const permissionStore = usePermissionStore();
+const watermarkStore = useWatermarkStore();
+
+const menuAreaRef = ref<HTMLElement>();
+const measureMenuWrapRef = ref<HTMLElement>();
+const measuredTopMenuWidths = ref<number[]>([]);
+const visibleMenuCount = ref(0);
+const OVERFLOW_TRIGGER_WIDTH = 36;
+const MIN_AI_PANEL_WIDTH = 320;
+const MAX_AI_PANEL_WIDTH = 560;
+const MIN_MAIN_WORKSPACE_WIDTH = 420;
+let resizeObserver: ResizeObserver | null = null;
+let workspaceResizeObserver: ResizeObserver | null = null;
+let rafId = 0;
+
+const workspaceRef = ref<HTMLElement | null>(null);
+const workspaceWidth = ref(0);
+const isAiResizing = ref(false);
+
+const cachedTabs = computed(() => tabsStore.cachedTabs);
+const pageViewKey = computed(() => route.path);
+
+const isIframePage = computed(() => {
+  return route.path.includes("/iframe/");
+});
+
+const isAICollabActive = computed(() => {
+  return (
+    layoutStore.aiCollabEnabled &&
+    !layoutStore.isMobile &&
+    !layoutStore.pageFullscreen
+  );
+});
+
+const maxAiPanelWidth = computed(() => {
+  if (workspaceWidth.value <= 0) {
+    return MAX_AI_PANEL_WIDTH;
+  }
+  const limitByWorkspace = workspaceWidth.value - MIN_MAIN_WORKSPACE_WIDTH;
+  const capped = Math.min(MAX_AI_PANEL_WIDTH, limitByWorkspace);
+  return Math.max(MIN_AI_PANEL_WIDTH, capped);
+});
+
+const effectiveAiPanelWidth = computed(() => {
+  return Math.max(
+    MIN_AI_PANEL_WIDTH,
+    Math.min(layoutStore.aiPanelWidth, maxAiPanelWidth.value),
+  );
+});
+
+const fallbackMenuItems = computed(() => {
+  const basicChildren = basicRoutes.flatMap((item) => item.children || []);
+  return routesToMenuTree(basicChildren);
+});
+
+const menuItems = computed(() => {
+  if (permissionStore.menuTree.length > 0) {
+    return permissionStore.menuTree;
+  }
+  return fallbackMenuItems.value;
+});
+
+const convertHorizontalMenus = (
+  menus: MenuItemType[],
+  showCustomSubmenuArrow: boolean,
+): HorizontalMenuItems => {
+  const convert = (list: MenuItemType[]): HorizontalMenuItems => {
+    return list.map((menu) => {
+      const iconComponent = resolveIcon(menu.icon);
+      const text = resolveLocaleText(menu.label, menu.id);
+      const childMenus = menu.children || [];
+      const hasChildren = childMenus.length > 0;
+      const label =
+        hasChildren && showCustomSubmenuArrow
+          ? h("span", { class: "horizontal-submenu-label" }, [
+              h("span", { class: "horizontal-submenu-text" }, text),
+              h(DownOutlined, { class: "horizontal-submenu-arrow" }),
+            ])
+          : text;
+
+      const item = {
+        key: menu.path || menu.id,
+        label,
+        icon: iconComponent ? h(iconComponent) : undefined,
+      };
+
+      if (hasChildren) {
+        return {
+          ...item,
+          key: menu.id,
+          children: convert(childMenus),
+        };
+      }
+
+      return item;
+    });
+  };
+
+  return convert(menus);
+};
+
+const horizontalMenuItems = computed<HorizontalMenuItems>(() => {
+  return convertHorizontalMenus(menuItems.value, true);
+});
+
+const dropdownOverflowMenuItems = computed<HorizontalMenuItems>(() => {
+  return convertHorizontalMenus(menuItems.value, false);
+});
+
+function isExternalLinkPath(path: string): boolean {
+  return path.startsWith("http://") || path.startsWith("https://");
+}
+
+function findMenuByPath(
+  menus: MenuItemType[],
+  targetPath: string,
+): MenuItemType | null {
+  for (const item of menus) {
+    if ((item.path || item.id) === targetPath) {
+      return item;
+    }
+
+    if (item.children && item.children.length > 0) {
+      const found = findMenuByPath(item.children, targetPath);
+      if (found) {
+        return found;
+      }
+    }
+  }
+
+  return null;
+}
+
+const horizontalSelectedKeys = computed(() => {
+  const currentMenuItem = findMenuByPath(menuItems.value, route.path);
+
+  // Don't set selected state if current menu item is an external link
+  if (
+    currentMenuItem &&
+    currentMenuItem.path &&
+    isExternalLinkPath(currentMenuItem.path)
+  ) {
+    return [];
+  }
+
+  return [route.path];
+});
+const normalizedVisibleMenuCount = computed(() => {
+  return Math.max(
+    0,
+    Math.min(visibleMenuCount.value, horizontalMenuItems.value.length),
+  );
+});
+
+const visibleHorizontalMenuItems = computed<HorizontalMenuItems>(() => {
+  return horizontalMenuItems.value.slice(0, normalizedVisibleMenuCount.value);
+});
+
+const overflowHorizontalMenuItems = computed<HorizontalMenuItems>(() => {
+  return dropdownOverflowMenuItems.value.slice(
+    normalizedVisibleMenuCount.value,
+  );
+});
+
+const handleHorizontalMenuClick = ({ key }: { key: string | number }) => {
+  if (typeof key !== "string") return;
+
+  // External links: open in a new tab
+  // No need to change selectedKeys as horizontalSelectedKeys is a computed property
+  // based on route.path, which won't change when opening external links
+  if (key.startsWith("http://") || key.startsWith("https://")) {
+    window.open(key, "_blank", "noopener,noreferrer");
+    return;
+  }
+
+  // Internal routes
+  if (key.startsWith("/")) {
+    router.push(key);
+  }
+};
+
+const overflowMenuProps = computed(() => ({
+  items: overflowHorizontalMenuItems.value,
+  triggerSubMenuAction: "hover" as const,
+  onClick: handleHorizontalMenuClick,
+}));
+
+const updateWorkspaceWidth = () => {
+  workspaceWidth.value = workspaceRef.value?.getBoundingClientRect().width || 0;
+};
+
+const syncAiPanelWidth = () => {
+  if (!layoutStore.aiCollabEnabled) {
+    return;
+  }
+
+  const clamped = Math.max(
+    MIN_AI_PANEL_WIDTH,
+    Math.min(layoutStore.aiPanelWidth, maxAiPanelWidth.value),
+  );
+  if (clamped !== layoutStore.aiPanelWidth) {
+    layoutStore.setAiPanelWidth(clamped);
+  }
+};
+
+const stopAiResize = () => {
+  if (!isAiResizing.value) {
+    return;
+  }
+  isAiResizing.value = false;
+  document.body.classList.remove("is-ai-panel-resizing");
+};
+
+const handleAiResizeMove = (event: MouseEvent) => {
+  if (!isAiResizing.value || !workspaceRef.value) {
+    return;
+  }
+
+  const rect = workspaceRef.value.getBoundingClientRect();
+  const nextWidth = rect.right - event.clientX;
+  const clampedWidth = Math.max(
+    MIN_AI_PANEL_WIDTH,
+    Math.min(nextWidth, maxAiPanelWidth.value),
+  );
+  layoutStore.setAiPanelWidth(clampedWidth);
+};
+
+const startAiResize = (event: MouseEvent) => {
+  if (!isAICollabActive.value) {
+    return;
+  }
+
+  event.preventDefault();
+  isAiResizing.value = true;
+  document.body.classList.add("is-ai-panel-resizing");
+};
+
+const measureHorizontalMenuItemWidths = () => {
+  const wrap = measureMenuWrapRef.value;
+  if (!wrap) {
+    measuredTopMenuWidths.value = [];
+    return;
+  }
+
+  const itemElements = wrap.querySelectorAll(
+    ".ant-menu-root > .ant-menu-item, .ant-menu-root > .ant-menu-submenu",
+  );
+  measuredTopMenuWidths.value = Array.from(itemElements).map((element) => {
+    return Math.ceil((element as HTMLElement).getBoundingClientRect().width);
+  });
+};
+
+const recalculateVisibleMenuCount = () => {
+  const totalCount = horizontalMenuItems.value.length;
+  if (totalCount === 0) {
+    visibleMenuCount.value = 0;
+    return;
+  }
+
+  const areaWidth = menuAreaRef.value?.clientWidth || 0;
+  if (!areaWidth) {
+    visibleMenuCount.value = totalCount;
+    return;
+  }
+
+  const widths = measuredTopMenuWidths.value;
+  if (widths.length !== totalCount) {
+    visibleMenuCount.value = totalCount;
+    return;
+  }
+
+  const totalWidth = widths.reduce((sum, width) => sum + width, 0);
+  if (totalWidth <= areaWidth) {
+    visibleMenuCount.value = totalCount;
+    return;
+  }
+
+  const maxWidth = Math.max(0, areaWidth - OVERFLOW_TRIGGER_WIDTH);
+  let used = 0;
+  let count = 0;
+
+  widths.forEach((width) => {
+    if (used + width <= maxWidth) {
+      used += width;
+      count += 1;
+    }
+  });
+
+  visibleMenuCount.value = count;
+};
+
+const scheduleMenuLayout = () => {
+  if (rafId) {
+    cancelAnimationFrame(rafId);
+  }
+
+  rafId = requestAnimationFrame(() => {
+    rafId = 0;
+    nextTick(() => {
+      measureHorizontalMenuItemWidths();
+      recalculateVisibleMenuCount();
+    });
+  });
+};
+
+onMounted(() => {
+  layoutStore.initLayout();
+  scheduleMenuLayout();
+  updateWorkspaceWidth();
+  syncAiPanelWidth();
+  window.addEventListener("mousemove", handleAiResizeMove);
+  window.addEventListener("mouseup", stopAiResize);
+
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      scheduleMenuLayout();
+    });
+    workspaceResizeObserver = new ResizeObserver(() => {
+      updateWorkspaceWidth();
+      syncAiPanelWidth();
+    });
+
+    if (menuAreaRef.value) resizeObserver.observe(menuAreaRef.value);
+    if (measureMenuWrapRef.value)
+      resizeObserver.observe(measureMenuWrapRef.value);
+    if (workspaceRef.value) workspaceResizeObserver.observe(workspaceRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (rafId) {
+    cancelAnimationFrame(rafId);
+    rafId = 0;
+  }
+  stopAiResize();
+  window.removeEventListener("mousemove", handleAiResizeMove);
+  window.removeEventListener("mouseup", stopAiResize);
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  workspaceResizeObserver?.disconnect();
+  workspaceResizeObserver = null;
+});
+
+watch(
+  [horizontalMenuItems, dropdownOverflowMenuItems],
+  () => {
+    scheduleMenuLayout();
+  },
+  { deep: true },
+);
+
+watch(
+  () => settingsStore.layoutMode,
+  () => {
+    scheduleMenuLayout();
+    nextTick(() => {
+      if (workspaceResizeObserver) {
+        workspaceResizeObserver.disconnect();
+        if (workspaceRef.value) {
+          workspaceResizeObserver.observe(workspaceRef.value);
+        }
+      }
+      updateWorkspaceWidth();
+      syncAiPanelWidth();
+    });
+  },
+);
+
+watch(
+  () => route.path,
+  () => {
+    scheduleMenuLayout();
+  },
+);
+
+watch(
+  () => layoutStore.isMobile,
+  (isMobile) => {
+    if (isMobile && layoutStore.aiCollabEnabled) {
+      layoutStore.setAiCollabEnabled(false);
+    }
+  },
+);
+
+watch(
+  () => layoutStore.pageFullscreen,
+  (isFullscreen) => {
+    if (isFullscreen && layoutStore.aiCollabEnabled) {
+      layoutStore.setAiCollabEnabled(false);
+    }
+  },
+);
+
+watch(
+  () => layoutStore.aiCollabEnabled,
+  (enabled) => {
+    if (enabled) {
+      nextTick(() => {
+        updateWorkspaceWidth();
+        syncAiPanelWidth();
+      });
+    } else {
+      stopAiResize();
+    }
+  },
+);
+</script>
+
+<style scoped lang="scss">
+.admin-layout {
+  height: 100vh;
+  min-height: 100vh;
+  background: var(--color-bg-layout);
+  overflow: hidden;
+
+  &.vertical {
+    display: flex;
+
+    .layout-main {
+      flex: 1;
+      min-width: 0;
+      min-height: 100vh;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      transition: margin-left var(--duration-slow) var(--ease-out);
+      overflow: hidden;
+    }
+  }
+
+  &.horizontal {
+    display: flex;
+    flex-direction: column;
+
+    .horizontal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 var(--spacing-lg);
+      background: var(--color-bg-container);
+      box-shadow: var(--shadow-1);
+      box-sizing: border-box;
+      height: 50px;
+      line-height: 49px;
+      border-bottom: 1px solid var(--color-border-secondary);
+      flex-shrink: 0;
+
+      .header-left {
+        display: flex;
+        align-items: stretch;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: var(--spacing-sm);
+          flex-shrink: 0;
+          height: 100%;
+
+          img {
+            width: 32px;
+            height: 32px;
+          }
+
+          .logo-title {
+            font-size: var(--font-size-lg);
+            font-weight: var(--font-weight-semibold);
+            color: var(--color-text-primary);
+          }
+        }
+
+        .horizontal-menu-area {
+          flex: 1;
+          min-width: 0;
+          height: 100%;
+          margin-left: var(--spacing-lg);
+          display: flex;
+          align-items: stretch;
+          overflow: hidden;
+        }
+
+        .horizontal-main-menu {
+          flex: 1;
+          min-width: 0;
+          background: transparent;
+          border-bottom: none;
+          --ant-menu-horizontal-line-height: 49px;
+          --ant-menu-item-height: 49px;
+          height: calc(100% - 1px);
+          line-height: 49px;
+
+          :deep(.ant-menu-horizontal::after) {
+            border-bottom: none !important;
+          }
+
+          :deep(.ant-menu-item),
+          :deep(.ant-menu-submenu) {
+            top: 0;
+            height: 49px;
+            line-height: 49px;
+            margin-top: 0;
+            margin-bottom: 0;
+            white-space: nowrap;
+          }
+
+          :deep(.ant-menu-submenu-title) {
+            height: 49px;
+            line-height: 49px;
+          }
+
+          :deep(.ant-menu-item::after),
+          :deep(.ant-menu-submenu::after) {
+            bottom: -1px;
+          }
+
+          :deep(.ant-menu-submenu-arrow) {
+            display: none;
+          }
+
+          :deep(.horizontal-submenu-label) {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+          }
+
+          :deep(.horizontal-submenu-arrow) {
+            font-size: 12px;
+            color: var(--color-text-tertiary);
+          }
+        }
+
+        .horizontal-overflow-trigger {
+          flex-shrink: 0;
+          width: 36px;
+          height: 49px;
+          padding: 0;
+          border-radius: 0;
+          color: var(--color-text-secondary);
+
+          &:hover {
+            background: var(--color-bg-layout);
+            color: var(--color-text-primary);
+          }
+        }
+      }
+
+      .horizontal-menu-measure-wrap {
+        position: absolute;
+        visibility: hidden;
+        pointer-events: none;
+        height: 0;
+        overflow: hidden;
+      }
+
+      .horizontal-menu-measure {
+        border-bottom: none;
+        --ant-menu-horizontal-line-height: 49px;
+        --ant-menu-item-height: 49px;
+      }
+
+      .header-right {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        flex-shrink: 0;
+
+        :deep(.admin-header) {
+          height: 100%;
+          padding: 0;
+          background: transparent;
+          box-shadow: none;
+          border-bottom: none;
+        }
+      }
+    }
+
+    .horizontal-content {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      background: var(--color-bg-layout);
+    }
+
+    > :deep(.ant-layout) {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .page-content {
+    flex: 1;
+    min-height: 0;
+    box-sizing: border-box;
+    padding: 16px;
+    background: var(--color-bg-layout);
+
+    &.is-iframe-page {
+      .page-scroll {
+        overflow: hidden;
+      }
+    }
+  }
+
+  .page-workspace {
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .page-workspace-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    container-type: inline-size;
+  }
+
+  .page-workspace-side {
+    width: var(--ai-side-width);
+    display: flex;
+    align-items: stretch;
+    flex-shrink: 0;
+    height: 100%;
+  }
+
+  .page-workspace-ai {
+    height: 100%;
+    flex-shrink: 0;
+  }
+
+  .ai-panel-enter-active {
+    transition:
+      width var(--duration-slow) var(--ease-out),
+      opacity var(--duration-slow) var(--ease-out);
+    overflow: hidden;
+  }
+
+  .ai-panel-leave-active {
+    transition:
+      width var(--duration-slow) var(--ease-in),
+      opacity var(--duration-base) var(--ease-in);
+    overflow: hidden;
+  }
+
+  .ai-panel-enter-from,
+  .ai-panel-leave-to {
+    width: 0 !important;
+    opacity: 0;
+  }
+
+  .page-workspace-resizer {
+    width: 10px;
+    margin: 0 2px;
+    cursor: col-resize;
+    position: relative;
+    flex-shrink: 0;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 2px;
+      height: 42px;
+      border-radius: 999px;
+      background: color-mix(
+        in srgb,
+        var(--color-primary) 35%,
+        var(--color-border-secondary)
+      );
+      opacity: 0.4;
+      transition: opacity var(--duration-base) var(--ease-out);
+    }
+
+    &:hover::before {
+      opacity: 0.9;
+    }
+  }
+
+  .page-scroll {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    overscroll-behavior: contain;
+  }
+
+  .page-scroll :deep(.page-container) {
+    min-height: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &.mobile {
+    .layout-main {
+      margin-left: 0 !important;
+    }
+  }
+}
+
+:global(body.is-ai-panel-resizing) {
+  cursor: col-resize;
+  user-select: none;
+}
+
+// Global watermark overlay - must cover fixed elements like Sidebar
+.global-watermark {
+  :deep(> div:last-child) {
+    position: fixed !important;
+    inset: 0 !important;
+    z-index: 9999 !important;
+    pointer-events: none !important;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/AvatarDropdown.vue b/antdv-next-admin/src/components/Layout/AvatarDropdown.vue
new file mode 100644
index 0000000..80a1b63
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/AvatarDropdown.vue
@@ -0,0 +1,127 @@
+<template>
+  <a-dropdown :trigger="['click']" placement="bottomRight" :menu="menuProps">
+    <div
+      class="avatar-dropdown"
+      aria-label="User menu"
+      role="button"
+      tabindex="0"
+    >
+      <a-avatar :src="authStore.user?.avatar" :size="32">
+        {{ authStore.user?.username?.charAt(0).toUpperCase() }}
+      </a-avatar>
+      <span class="username desktop-only">{{
+        authStore.user?.realName || authStore.user?.username
+      }}</span>
+      <DownOutlined class="dropdown-icon desktop-only" />
+    </div>
+  </a-dropdown>
+</template>
+
+<script setup lang="ts">
+import {
+  DownOutlined,
+  UserOutlined,
+  GithubOutlined,
+  BookOutlined,
+  LogoutOutlined,
+} from "@antdv-next/icons";
+import { Modal } from "antdv-next";
+import { computed, h } from "vue";
+import { useRouter } from "vue-router";
+
+import { $t } from "@/locales";
+import { useAuthStore } from "@/stores/auth";
+
+const router = useRouter();
+const authStore = useAuthStore();
+
+const handleMenuClick = ({ key }: { key: string }) => {
+  switch (key) {
+    case "profile":
+      router.push("/profile");
+      break;
+    case "github":
+      window.open("https://github.com/yelog/antdv-next-admin", "_blank");
+      break;
+    case "docs":
+      window.open("https://antdv-next-admin-doc.yelog.org", "_blank");
+      break;
+    case "logout":
+      Modal.confirm({
+        title: $t("layout.logout"),
+        content: $t("layout.logoutConfirm"),
+        okText: $t("common.confirm"),
+        cancelText: $t("common.cancel"),
+        onOk: () => {
+          authStore.logout();
+          router.push("/login");
+        },
+      });
+      break;
+  }
+};
+
+const menuProps = computed(() => ({
+  items: [
+    {
+      key: "profile",
+      label: $t("layout.profile"),
+      icon: h(UserOutlined),
+    },
+    {
+      key: "github",
+      label: "GitHub",
+      icon: h(GithubOutlined),
+    },
+    {
+      key: "docs",
+      label: $t("layout.documentation"),
+      icon: h(BookOutlined),
+    },
+    {
+      type: "divider",
+    },
+    {
+      key: "logout",
+      label: $t("layout.logout"),
+      icon: h(LogoutOutlined),
+    },
+  ],
+  onClick: handleMenuClick,
+}));
+</script>
+
+<style scoped lang="scss">
+.avatar-dropdown {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: 0 var(--spacing-sm);
+  cursor: pointer;
+  transition: all var(--duration-base) var(--ease-out);
+
+  &:hover {
+    background: var(--color-bg-layout);
+    border-radius: var(--radius-base);
+  }
+
+  .username {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-primary);
+  }
+
+  .dropdown-icon {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+  }
+
+  // Mobile styles
+  @media (max-width: 768px) {
+    padding: 0;
+
+    .desktop-only {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/Breadcrumb.vue b/antdv-next-admin/src/components/Layout/Breadcrumb.vue
new file mode 100644
index 0000000..af28f50
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/Breadcrumb.vue
@@ -0,0 +1,52 @@
+<template>
+  <a-breadcrumb class="breadcrumb" aria-label="Breadcrumb navigation">
+    <a-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
+      <router-link
+        v-if="item.path && index < breadcrumbs.length - 1"
+        :to="item.path"
+      >
+        {{ item.label }}
+      </router-link>
+      <span
+        v-else
+        :aria-current="index === breadcrumbs.length - 1 ? 'page' : undefined"
+        >{{ item.label }}</span
+      >
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+import { resolveLocaleText } from "@/utils/i18n";
+
+const route = useRoute();
+
+const breadcrumbs = computed(() => {
+  const matched = route.matched
+    .filter((item) => item.meta && item.meta.title)
+    .filter((item) => item.path !== "/");
+
+  return matched.map((item) => ({
+    label: resolveLocaleText(
+      item.meta.title as string,
+      String(item.name || item.path || "-"),
+    ),
+    path: item.path,
+  }));
+});
+</script>
+
+<style scoped lang="scss">
+.breadcrumb {
+  :deep(.ant-breadcrumb-link) {
+    color: var(--color-text-secondary);
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/FullscreenToggle.vue b/antdv-next-admin/src/components/Layout/FullscreenToggle.vue
new file mode 100644
index 0000000..8cb8bf1
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/FullscreenToggle.vue
@@ -0,0 +1,16 @@
+<template>
+  <a-tooltip :title="isFullscreen ? $t('layout.exitFullscreen') : $t('layout.fullscreen')">
+    <a-button type="text" class="header-action" @click="toggle">
+      <FullscreenExitOutlined v-if="isFullscreen" />
+      <FullscreenOutlined v-else />
+    </a-button>
+  </a-tooltip>
+</template>
+
+<script setup lang="ts">
+import { FullscreenOutlined, FullscreenExitOutlined } from '@antdv-next/icons';
+
+import { useFullscreen } from '@/composables/useFullscreen';
+
+const { isFullscreen, toggle } = useFullscreen();
+</script>
diff --git a/antdv-next-admin/src/components/Layout/GlobalSearch.vue b/antdv-next-admin/src/components/Layout/GlobalSearch.vue
new file mode 100644
index 0000000..a0bcc91
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/GlobalSearch.vue
@@ -0,0 +1,729 @@
+<template>
+  <Teleport to="body">
+    <Transition name="search-modal">
+      <div v-if="visible" class="global-search-overlay" @click="close">
+        <div class="global-search-content" @click.stop>
+          <div class="search-input-wrapper">
+            <SearchOutlined class="search-icon" />
+            <input
+              ref="searchInputRef"
+              v-model="searchQuery"
+              type="text"
+              class="search-input"
+              :placeholder="$t('layout.searchPlaceholder')"
+              @keydown="handleKeydown"
+            />
+            <span class="search-tag">ESC</span>
+          </div>
+
+          <div class="search-body">
+            <!-- Search Results -->
+            <div v-if="searchQuery" class="search-results">
+              <div v-if="searchResults.length > 0">
+                <div
+                  v-for="(result, index) in searchResults"
+                  :key="result.path"
+                  class="search-item"
+                  :class="{ active: index === activeIndex }"
+                  @click="handleResultClick(result)"
+                  @mouseenter="activeIndex = index"
+                >
+                  <div class="item-icon">
+                    <component
+                      :is="getIconComponent(result.icon)"
+                      v-if="result.icon"
+                    />
+                    <FileOutlined v-else />
+                  </div>
+                  <div class="item-info">
+                    <span
+                      class="item-title"
+                      v-html="highlightText(result.title, searchQuery)"
+                    ></span>
+                    <span
+                      class="item-path"
+                      v-html="
+                        highlightText(formatPath(result.path), searchQuery)
+                      "
+                    ></span>
+                  </div>
+                  <div class="item-actions" @click.stop>
+                    <a-button
+                      type="text"
+                      size="small"
+                      class="favorite-btn"
+                      @click="toggleFavorite(result.path)"
+                    >
+                      <StarFilled
+                        v-if="isFavorite(result.path)"
+                        class="favorite-icon active"
+                      />
+                      <StarOutlined v-else class="favorite-icon" />
+                    </a-button>
+                  </div>
+                  <EnterOutlined class="item-enter" />
+                </div>
+              </div>
+              <div v-else class="search-empty">
+                <div class="empty-icon">
+                  <SearchOutlined />
+                </div>
+                <p>{{ $t("layout.noSearchResults") }}</p>
+              </div>
+            </div>
+
+            <!-- Recent History -->
+            <div v-else-if="menuHistory.length > 0" class="search-results">
+              <div class="search-group-header">
+                <ClockCircleOutlined class="header-icon" />
+                <span class="header-title">{{
+                  $t("layout.recentMenus") || "最近访问"
+                }}</span>
+                <a-button
+                  type="link"
+                  size="small"
+                  class="clear-btn"
+                  @click="clearHistory"
+                >
+                  {{ $t("common.clear") || "清空" }}
+                </a-button>
+              </div>
+              <div
+                v-for="(item, index) in menuHistory"
+                :key="item.path"
+                class="search-item"
+                :class="{ active: index === activeIndex }"
+                @click="handleHistoryClick(item)"
+                @mouseenter="activeIndex = index"
+              >
+                <div class="item-icon">
+                  <component
+                    :is="getIconComponent(item.icon)"
+                    v-if="item.icon"
+                  />
+                  <FileOutlined v-else />
+                </div>
+                <div class="item-info">
+                  <span class="item-title">{{ item.title }}</span>
+                  <span class="item-path">{{ formatPath(item.path) }}</span>
+                </div>
+                <div class="item-actions" @click.stop>
+                  <a-button
+                    type="text"
+                    size="small"
+                    class="favorite-btn"
+                    @click="toggleFavorite(item.path)"
+                  >
+                    <StarFilled
+                      v-if="isFavorite(item.path)"
+                      class="favorite-icon active"
+                    />
+                    <StarOutlined v-else class="favorite-icon" />
+                  </a-button>
+                </div>
+                <EnterOutlined class="item-enter" />
+              </div>
+            </div>
+
+            <!-- Empty State -->
+            <div v-else class="search-empty">
+              <div class="empty-icon">
+                <SearchOutlined />
+              </div>
+              <p>{{ $t("layout.searchPlaceholder") }}</p>
+            </div>
+          </div>
+
+          <div class="search-footer">
+            <div class="footer-item">
+              <span class="key-badge">
+                <ArrowUpOutlined />
+              </span>
+              <span class="key-badge">
+                <ArrowDownOutlined />
+              </span>
+              <span class="footer-text">{{
+                $t("common.navigate") || "Navigate"
+              }}</span>
+            </div>
+            <div class="footer-item">
+              <span class="key-badge">
+                <EnterOutlined />
+              </span>
+              <span class="footer-text">{{
+                $t("common.select") || "Select"
+              }}</span>
+            </div>
+            <div class="footer-item">
+              <span class="key-badge">ESC</span>
+              <span class="footer-text">{{
+                $t("common.close") || "Close"
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from "@/types/router";
+
+import {
+  SearchOutlined,
+  FileOutlined,
+  EnterOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  ClockCircleOutlined,
+  StarOutlined,
+  StarFilled,
+} from "@antdv-next/icons";
+import { match as pinyinMatch } from "pinyin-pro";
+import { computed, ref, watch, nextTick, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+
+import { basicRoutes } from "@/router/routes";
+import { routesToMenuTree } from "@/router/utils";
+import { usePermissionStore } from "@/stores/permission";
+import { useTabsStore } from "@/stores/tabs";
+import { resolveLocaleText } from "@/utils/i18n";
+import { resolveIcon } from "@/utils/icon";
+
+const MENU_HISTORY_KEY = "app-menu-history";
+
+interface SearchItem {
+  path: string;
+  title: string;
+  icon?: string;
+  rawTitle: string;
+}
+
+interface MenuHistoryItem {
+  path: string;
+  title: string;
+  icon?: string;
+  timestamp: number;
+}
+
+const router = useRouter();
+const permissionStore = usePermissionStore();
+const tabsStore = useTabsStore();
+const visible = ref(false);
+const searchQuery = ref("");
+const searchResults = ref<SearchItem[]>([]);
+const activeIndex = ref(0);
+const searchInputRef = ref<HTMLInputElement | null>(null);
+const menuHistory = ref<MenuHistoryItem[]>([]);
+
+const fallbackMenus = computed<MenuItem[]>(() => {
+  const basicChildren = basicRoutes.flatMap((route) => route.children || []);
+  return routesToMenuTree(basicChildren);
+});
+
+const menuSource = computed<MenuItem[]>(() => {
+  if (permissionStore.menuTree.length > 0) {
+    return permissionStore.menuTree;
+  }
+  return fallbackMenus.value;
+});
+
+const searchSource = computed<SearchItem[]>(() => {
+  const items: SearchItem[] = [];
+
+  const traverse = (menus: MenuItem[], parentLabels: string[] = []) => {
+    menus.forEach((menu) => {
+      const currentLabel = resolveLocaleText(menu.label, menu.path);
+      const currentLabels = [...parentLabels, currentLabel];
+
+      if (menu.children && menu.children.length > 0) {
+        // Only recurse into children, skip non-leaf nodes
+        traverse(menu.children, currentLabels);
+      } else if (menu.path) {
+        // Leaf node: show full parent path
+        items.push({
+          path: menu.path,
+          title: currentLabels.join(" > "),
+          icon: menu.icon,
+          rawTitle: menu.label,
+        });
+      }
+    });
+  };
+
+  traverse(menuSource.value);
+
+  // Deduplicate
+  const uniqueByPath = new Map<string, SearchItem>();
+  items.forEach((item) => {
+    if (!uniqueByPath.has(item.path)) {
+      uniqueByPath.set(item.path, item);
+    }
+  });
+  return Array.from(uniqueByPath.values());
+});
+
+const getIconComponent = (icon?: string) => resolveIcon(icon);
+
+const formatPath = (path: string) => {
+  return path.split("/").filter(Boolean).join(" > ");
+};
+
+const escapeHtml = (text: string): string => {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+};
+
+const highlightText = (text: string, query: string): string => {
+  if (!query) return escapeHtml(text);
+
+  const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(`(${escapedQuery})`, "gi");
+  if (regex.test(text)) {
+    return text.replace(regex, '<span class="highlight">$1</span>');
+  }
+
+  const matched = pinyinMatch(text, query);
+  if (matched && matched.length > 0) {
+    const indexSet = new Set(matched);
+    return Array.from(text)
+      .map((char, i) =>
+        indexSet.has(i)
+          ? `<span class="highlight">${char}</span>`
+          : escapeHtml(char),
+      )
+      .join("");
+  }
+
+  return escapeHtml(text);
+};
+
+let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+const handleSearch = () => {
+  if (!searchQuery.value) {
+    searchResults.value = [];
+    return;
+  }
+
+  const query = searchQuery.value.toLowerCase();
+  searchResults.value = searchSource.value
+    .filter(
+      (item) =>
+        item.title.toLowerCase().includes(query) ||
+        item.path.toLowerCase().includes(query) ||
+        pinyinMatch(item.title, query) !== null,
+    )
+    .slice(0, 20);
+  activeIndex.value = 0;
+};
+
+const handleResultClick = (result: SearchItem) => {
+  router.push(result.path);
+  close();
+};
+
+const isFavorite = (path: string) => {
+  const tab = tabsStore.tabs.find((t) => t.path === path);
+  return tab?.favorite ?? false;
+};
+
+const toggleFavorite = (path: string) => {
+  tabsStore.toggleFavoriteTab(path);
+};
+
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape") {
+    e.preventDefault();
+    close();
+    return;
+  }
+
+  const items = searchQuery.value ? searchResults.value : menuHistory.value;
+  if (items.length === 0) return;
+
+  switch (e.key) {
+    case "ArrowUp":
+      e.preventDefault();
+      activeIndex.value =
+        activeIndex.value > 0 ? activeIndex.value - 1 : items.length - 1;
+      scrollActiveIntoView();
+      break;
+    case "ArrowDown":
+      e.preventDefault();
+      activeIndex.value =
+        activeIndex.value < items.length - 1 ? activeIndex.value + 1 : 0;
+      scrollActiveIntoView();
+      break;
+    case "Enter":
+      e.preventDefault();
+      if (searchQuery.value) {
+        handleResultClick(searchResults.value[activeIndex.value]);
+      } else {
+        handleHistoryClick(menuHistory.value[activeIndex.value]);
+      }
+      break;
+  }
+};
+
+const scrollActiveIntoView = () => {
+  nextTick(() => {
+    const activeEl = document.querySelector(".search-item.active");
+    if (activeEl) {
+      activeEl.scrollIntoView({ block: "nearest" });
+    }
+  });
+};
+
+const loadMenuHistory = () => {
+  try {
+    const saved = localStorage.getItem(MENU_HISTORY_KEY);
+    if (saved) {
+      menuHistory.value = JSON.parse(saved);
+    } else {
+      menuHistory.value = [];
+    }
+  } catch {
+    menuHistory.value = [];
+  }
+};
+
+const handleHistoryClick = (item: MenuHistoryItem) => {
+  router.push(item.path);
+  close();
+};
+
+const clearHistory = () => {
+  menuHistory.value = [];
+  localStorage.removeItem(MENU_HISTORY_KEY);
+};
+
+const open = () => {
+  visible.value = true;
+  searchQuery.value = "";
+  searchResults.value = [];
+  activeIndex.value = 0;
+  loadMenuHistory();
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
+  window.addEventListener("keydown", handleGlobalKeydown);
+};
+
+const close = () => {
+  visible.value = false;
+  window.removeEventListener("keydown", handleGlobalKeydown);
+};
+
+const handleGlobalKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape") {
+    close();
+  }
+};
+
+watch(searchQuery, () => {
+  if (searchDebounceTimer) {
+    clearTimeout(searchDebounceTimer);
+  }
+  searchDebounceTimer = setTimeout(() => {
+    handleSearch();
+    searchDebounceTimer = null;
+  }, 150);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", handleGlobalKeydown);
+  if (searchDebounceTimer) {
+    clearTimeout(searchDebounceTimer);
+  }
+});
+
+defineExpose({ open, close });
+</script>
+
+<style scoped lang="scss">
+.global-search-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 14vh;
+  background-color: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(4px);
+}
+
+.global-search-content {
+  width: 100%;
+  max-width: 600px;
+  background-color: var(--color-bg-container);
+  border-radius: 12px;
+  box-shadow:
+    0 16px 48px rgba(0, 0, 0, 0.12),
+    0 8px 16px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--color-border-secondary);
+}
+
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 16px 16px 16px 20px;
+  border-bottom: 1px solid var(--color-border-secondary);
+
+  .search-icon {
+    font-size: 20px;
+    color: var(--color-text-tertiary);
+    margin-right: 12px;
+  }
+
+  .search-input {
+    flex: 1;
+    font-size: 18px;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--color-text-primary);
+    line-height: 1.5;
+
+    &::placeholder {
+      color: var(--color-text-quaternary);
+    }
+  }
+
+  .search-tag {
+    padding: 2px 6px;
+    border-radius: 4px;
+    background-color: var(--color-bg-layout);
+    border: 1px solid var(--color-border-secondary);
+    color: var(--color-text-tertiary);
+    font-size: 12px;
+    font-family: var(--font-family-code);
+  }
+}
+
+.search-body {
+  padding: 12px 0;
+  max-height: 420px;
+  overflow-y: auto;
+}
+
+.search-group-title {
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+  font-weight: 600;
+}
+
+.search-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  margin: 0 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  position: relative;
+
+  &.active {
+    background-color: var(--color-primary);
+    color: #fff;
+
+    .item-icon {
+      color: #fff;
+    }
+
+    .item-path {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .item-enter {
+      opacity: 1;
+      color: #fff;
+    }
+  }
+
+  .item-icon {
+    font-size: 18px;
+    color: var(--color-text-secondary);
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+  }
+
+  .item-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .item-title {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+
+    :deep(.highlight) {
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+  }
+
+  .item-path {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    :deep(.highlight) {
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+  }
+
+  .item-enter {
+    font-size: 14px;
+    color: var(--color-text-tertiary);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .item-actions {
+    display: flex;
+    align-items: center;
+    margin-right: 8px;
+
+    .favorite-btn {
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .favorite-icon {
+        font-size: 14px;
+        color: var(--color-text-tertiary);
+        transition: color 0.2s;
+
+        &.active {
+          color: var(--color-warning);
+        }
+      }
+
+      &:hover .favorite-icon:not(.active) {
+        color: var(--color-warning);
+      }
+    }
+  }
+
+  &.active .item-actions {
+    .favorite-btn .favorite-icon:not(.active) {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .favorite-btn:hover .favorite-icon:not(.active) {
+      color: #fff;
+    }
+  }
+}
+
+.search-group-header {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--color-border-secondary);
+  margin-bottom: 8px;
+
+  .header-icon {
+    font-size: 14px;
+    color: var(--color-text-tertiary);
+    margin-right: 8px;
+  }
+
+  .header-title {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    font-weight: 500;
+    flex: 1;
+  }
+
+  .clear-btn {
+    font-size: 12px;
+    padding: 0;
+    height: auto;
+  }
+}
+
+.search-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+  color: var(--color-text-tertiary);
+
+  .empty-icon {
+    font-size: 48px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+}
+
+.search-footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 16px;
+  border-top: 1px solid var(--color-border-secondary);
+  background-color: var(--color-bg-layout);
+}
+
+.footer-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+
+  .key-badge {
+    padding: 2px 4px;
+    min-width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-bg-container);
+    border: 1px solid var(--color-border-secondary);
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    font-family: var(--font-family-code);
+    font-size: 11px;
+  }
+}
+
+// Transitions
+.search-modal-enter-active,
+.search-modal-leave-active {
+  transition: opacity 0.2s ease;
+
+  .global-search-content {
+    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
+.search-modal-enter-from,
+.search-modal-leave-to {
+  opacity: 0;
+
+  .global-search-content {
+    transform: scale(0.95) translateY(10px);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/Header.vue b/antdv-next-admin/src/components/Layout/Header.vue
new file mode 100644
index 0000000..6fb4bae
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/Header.vue
@@ -0,0 +1,457 @@
+<template>
+  <a-layout-header class="admin-header">
+    <div class="header-left">
+      <!-- Collapse Button -->
+      <a-button
+        v-if="showCollapseButton"
+        type="text"
+        class="collapse-btn"
+        :aria-label="
+          layoutStore.collapsed ? 'Expand sidebar' : 'Collapse sidebar'
+        "
+        @click="layoutStore.toggleSidebar"
+      >
+        <MenuFoldOutlined v-if="!layoutStore.collapsed" />
+        <MenuUnfoldOutlined v-else />
+      </a-button>
+
+      <!-- Breadcrumb -->
+      <Breadcrumb v-if="showBreadcrumb" />
+    </div>
+
+    <div class="header-right">
+      <!-- Global Search Trigger -->
+      <a-button
+        type="text"
+        class="header-action search-btn"
+        aria-label="Search"
+        @click="openGlobalSearch"
+      >
+        <SearchOutlined />
+      </a-button>
+      <div class="search-trigger desktop-only" @click="openGlobalSearch">
+        <SearchOutlined class="search-icon" />
+        <span class="search-text">{{ $t("common.search") }}</span>
+        <div class="search-key">
+          <span class="search-key-text">{{ isMac ? "⌘" : "Ctrl" }}</span>
+          <span class="search-key-k">K</span>
+        </div>
+      </div>
+
+      <!-- Desktop: Show all actions -->
+      <template v-if="!layoutStore.isMobile">
+        <a-tooltip
+          v-if="layoutStore.aiEntryVisible"
+          :title="
+            layoutStore.aiCollabEnabled
+              ? $t('layout.aiCollabDisable')
+              : $t('layout.aiCollabEnable')
+          "
+        >
+          <a-button
+            type="text"
+            class="header-action ai-toggle-btn"
+            :class="{ active: layoutStore.aiCollabEnabled }"
+            @click="layoutStore.toggleAiCollab"
+          >
+            <MessageOutlined />
+          </a-button>
+        </a-tooltip>
+
+        <!-- Fullscreen Toggle -->
+        <FullscreenToggle />
+
+        <!-- Notifications -->
+        <NotificationPanel />
+
+        <!-- Theme Toggle -->
+        <ThemeToggle />
+
+        <!-- Language Switch -->
+        <LanguageSwitch />
+
+        <!-- Settings -->
+        <a-tooltip :title="$t('settings.title')">
+          <a-button type="text" class="header-action" @click="openSettings">
+            <SettingOutlined />
+          </a-button>
+        </a-tooltip>
+
+        <!-- Divider -->
+        <a-divider type="vertical" style="height: 20px; margin: 0 4px" />
+      </template>
+
+      <!-- Mobile: More menu (three dots) -->
+      <a-dropdown
+        v-else
+        :trigger="['click']"
+        placement="bottomRight"
+        :menu="moreMenuProps"
+      >
+        <a-button type="text" class="header-action">
+          <MoreOutlined />
+        </a-button>
+      </a-dropdown>
+
+      <!-- User Avatar Dropdown -->
+      <AvatarDropdown />
+    </div>
+
+    <!-- Global Search Modal -->
+    <GlobalSearch ref="globalSearchRef" />
+
+    <!-- Settings Drawer -->
+    <SettingsDrawer ref="settingsDrawerRef" />
+  </a-layout-header>
+</template>
+
+<script setup lang="ts">
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  SearchOutlined,
+  SettingOutlined,
+  MoreOutlined,
+  MessageOutlined,
+  FullscreenOutlined,
+  BulbOutlined,
+  GlobalOutlined,
+} from "@antdv-next/icons";
+import { ref, computed, onMounted, onBeforeUnmount, h, type VNode } from "vue";
+
+import { $t, setLocale, LOCALE_NATIVE_LABELS } from "@/locales";
+import { useLayoutStore } from "@/stores/layout";
+import { useThemeStore } from "@/stores/theme";
+
+import AvatarDropdown from "./AvatarDropdown.vue";
+import Breadcrumb from "./Breadcrumb.vue";
+import FullscreenToggle from "./FullscreenToggle.vue";
+import GlobalSearch from "./GlobalSearch.vue";
+import LanguageSwitch from "./LanguageSwitch.vue";
+import NotificationPanel from "./NotificationPanel.vue";
+import SettingsDrawer from "./SettingsDrawer.vue";
+import ThemeToggle from "./ThemeToggle.vue";
+
+interface Props {
+  showBreadcrumb?: boolean;
+  showCollapseButton?: boolean;
+}
+
+interface MenuItem {
+  key?: string;
+  label?: string;
+  icon?: VNode;
+  type?: "divider";
+  children?: MenuItem[];
+}
+
+withDefaults(defineProps<Props>(), {
+  showBreadcrumb: true,
+  showCollapseButton: true,
+});
+
+const layoutStore = useLayoutStore();
+const themeStore = useThemeStore();
+const globalSearchRef = ref();
+const settingsDrawerRef = ref();
+const isMac = ref(false);
+
+const openGlobalSearch = () => {
+  globalSearchRef.value?.open();
+};
+
+const openSettings = () => {
+  settingsDrawerRef.value?.open();
+};
+
+const toggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+};
+
+const handleMoreMenuClick = ({ key }: { key: string }) => {
+  switch (key) {
+    case "fullscreen":
+      toggleFullscreen();
+      break;
+    case "ai-collab":
+      layoutStore.toggleAiCollab();
+      break;
+    case "theme-light":
+      themeStore.setTheme("light");
+      break;
+    case "theme-dark":
+      themeStore.setTheme("dark");
+      break;
+    case "theme-auto":
+      themeStore.setTheme("system");
+      break;
+    case "lang-zh":
+      setLocale("zh-CN");
+      break;
+    case "lang-en":
+      setLocale("en-US");
+      break;
+    case "lang-ja":
+      setLocale("ja-JP");
+      break;
+    case "lang-ko":
+      setLocale("ko-KR");
+      break;
+    case "settings":
+      openSettings();
+      break;
+  }
+};
+
+const moreMenuProps = computed(() => {
+  const items: MenuItem[] = [
+    {
+      key: "fullscreen",
+      label: $t("layout.fullscreen"),
+      icon: h(FullscreenOutlined),
+    },
+  ];
+
+  if (layoutStore.aiEntryVisible) {
+    items.push({
+      key: "ai-collab",
+      label: layoutStore.aiCollabEnabled
+        ? $t("layout.aiCollabDisable")
+        : $t("layout.aiCollabEnable"),
+      icon: h(MessageOutlined),
+    });
+  }
+
+  items.push(
+    {
+      type: "divider",
+    },
+    {
+      key: "theme",
+      label: $t("layout.theme"),
+      icon: h(BulbOutlined),
+      children: [
+        {
+          key: "theme-light",
+          label: $t("layout.themeLight"),
+        },
+        {
+          key: "theme-dark",
+          label: $t("layout.themeDark"),
+        },
+        {
+          key: "theme-auto",
+          label: $t("layout.themeAuto"),
+        },
+      ],
+    },
+    {
+      key: "language",
+      label: $t("layout.language"),
+      icon: h(GlobalOutlined),
+      children: [
+        {
+          key: "lang-zh",
+          label: LOCALE_NATIVE_LABELS["zh-CN"],
+        },
+        {
+          key: "lang-en",
+          label: LOCALE_NATIVE_LABELS["en-US"],
+        },
+        {
+          key: "lang-ja",
+          label: LOCALE_NATIVE_LABELS["ja-JP"],
+        },
+        {
+          key: "lang-ko",
+          label: LOCALE_NATIVE_LABELS["ko-KR"],
+        },
+      ],
+    },
+    {
+      type: "divider",
+    },
+    {
+      key: "settings",
+      label: $t("settings.title"),
+      icon: h(SettingOutlined),
+    },
+  );
+
+  return { items, onClick: handleMoreMenuClick };
+});
+
+const handleKeydown = (e: KeyboardEvent) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+    e.preventDefault();
+    openGlobalSearch();
+  }
+};
+
+onMounted(() => {
+  // Simple check for Mac
+  isMac.value = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+  window.addEventListener("keydown", handleKeydown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", handleKeydown);
+});
+</script>
+
+<style scoped lang="scss">
+.admin-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 20px;
+  background: var(--color-bg-container);
+  box-shadow: var(--shadow-1);
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px solid var(--color-border-secondary);
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+
+    .collapse-btn {
+      font-size: 16px;
+      width: 32px;
+      height: 32px;
+      border-radius: var(--radius-base);
+      color: var(--color-text-secondary);
+      transition: all var(--duration-base) var(--ease-out);
+
+      &:hover {
+        background: var(--color-bg-layout);
+        color: var(--color-text-primary);
+      }
+    }
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 0;
+
+    .search-btn {
+      display: none;
+    }
+
+    .search-trigger {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      padding: 0 6px 0 10px;
+      margin-right: 12px;
+      background: var(--color-bg-layout);
+      border: 1px solid transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s;
+      color: var(--color-text-secondary);
+
+      &:hover {
+        background: var(--color-bg-container);
+        border-color: var(--color-primary);
+        color: var(--color-text-primary);
+
+        .search-key {
+          border-color: var(--color-primary-3);
+          color: var(--color-primary);
+          background: var(--color-primary-1);
+        }
+      }
+
+      .search-icon {
+        font-size: 14px;
+        margin-right: 8px;
+      }
+
+      .search-text {
+        font-size: 13px;
+        margin-right: 12px;
+        line-height: 1;
+        opacity: 0.8;
+      }
+
+      .search-key {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        height: 20px;
+        padding: 0 6px;
+        background: var(--color-bg-container);
+        border: 1px solid var(--color-border-secondary);
+        border-radius: 4px;
+        font-size: 12px;
+        color: var(--color-text-tertiary);
+        line-height: 18px;
+        font-family: var(--font-family-code);
+        transition: all 0.2s;
+      }
+    }
+
+    .header-action {
+      font-size: 16px;
+      width: 32px;
+      height: 32px;
+      padding: 0 !important;
+      border-radius: 8px;
+      color: var(--color-text-secondary);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:hover {
+        background: var(--color-bg-layout);
+        color: var(--color-text-primary);
+      }
+    }
+
+    .ai-toggle-btn.active {
+      color: var(--color-primary);
+      background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    }
+
+    // Ensure buttons in nested components follow the same style.
+    :deep(.header-action) {
+      font-size: 16px;
+      width: 32px;
+      height: 32px;
+      padding: 0 !important;
+      border-radius: 8px;
+      color: var(--color-text-secondary);
+    }
+
+    :deep(.header-action:hover) {
+      background: var(--color-bg-layout);
+      color: var(--color-text-primary);
+    }
+  }
+
+  :deep(.ant-divider-vertical) {
+    border-inline-start-color: var(--color-border-secondary);
+  }
+
+  // Mobile styles
+  @media (max-width: 768px) {
+    .header-right {
+      .search-btn {
+        display: flex;
+      }
+
+      .desktop-only {
+        display: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/LanguageSwitch.vue b/antdv-next-admin/src/components/Layout/LanguageSwitch.vue
new file mode 100644
index 0000000..dcae1bf
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/LanguageSwitch.vue
@@ -0,0 +1,49 @@
+<template>
+  <a-dropdown :trigger="['click']" placement="bottomRight" :menu="menuProps">
+    <a-button type="text" class="header-action">
+      <GlobalOutlined />
+    </a-button>
+  </a-dropdown>
+</template>
+
+<script setup lang="ts">
+import { GlobalOutlined } from '@antdv-next/icons';
+import { computed } from 'vue';
+
+import i18n, { setLocale, LOCALE_NATIVE_LABELS } from '@/locales';
+
+const currentLocale = computed(() => String(i18n.global.locale.value));
+const localeOptions = computed(() => [
+  { label: LOCALE_NATIVE_LABELS['zh-CN'], value: 'zh-CN' },
+  { label: LOCALE_NATIVE_LABELS['en-US'], value: 'en-US' },
+  { label: LOCALE_NATIVE_LABELS['ja-JP'], value: 'ja-JP' },
+  { label: LOCALE_NATIVE_LABELS['ko-KR'], value: 'ko-KR' },
+]);
+
+const handleLanguageChange = ({ key }: { key: string | number }) => {
+  const nextLocale = String(key);
+  if (!localeOptions.value.some((item) => item.value === nextLocale)) {
+    return;
+  }
+  if (nextLocale === currentLocale.value) {
+    return;
+  }
+  setLocale(nextLocale);
+};
+
+const menuProps = computed(() => ({
+  items: localeOptions.value.map((item) => ({
+    key: item.value,
+    label: item.label,
+  })),
+  selectedKeys: [currentLocale.value],
+  onClick: handleLanguageChange,
+}));
+</script>
+
+<style scoped lang="scss">
+:deep(.ant-menu-item-selected) {
+  background: var(--color-primary-1);
+  color: var(--color-primary);
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/MenuItem.vue b/antdv-next-admin/src/components/Layout/MenuItem.vue
new file mode 100644
index 0000000..d800463
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/MenuItem.vue
@@ -0,0 +1,57 @@
+<template>
+  <template v-if="!item.hidden">
+    <!-- Menu Item with Children (SubMenu) -->
+    <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.id">
+      <template #icon>
+        <component :is="iconComponent" v-if="iconComponent" />
+      </template>
+      <template #title>
+        <span>{{ displayLabel }}</span>
+        <a-badge v-if="item.badge" :count="item.badge" :offset="[10, 0]" />
+      </template>
+      <MenuItem
+        v-for="child in item.children"
+        :key="child.id"
+        :item="child"
+        :collapsed="collapsed"
+      />
+    </a-sub-menu>
+
+    <!-- Single Menu Item -->
+    <a-menu-item v-else :key="item.path || item.id" @click="handleClick">
+      <template #icon>
+        <component :is="iconComponent" v-if="iconComponent" />
+      </template>
+      <span>{{ displayLabel }}</span>
+      <a-badge v-if="item.badge" :count="item.badge" :offset="[10, 0]" />
+    </a-menu-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem as MenuItemType } from '@/types/router';
+
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { resolveLocaleText } from '@/utils/i18n';
+import { resolveIcon } from '@/utils/icon';
+
+interface Props {
+  item: MenuItemType;
+  collapsed?: boolean;
+}
+
+const props = defineProps<Props>();
+const router = useRouter();
+const iconComponent = computed(() => resolveIcon(props.item.icon));
+const displayLabel = computed(() => {
+  return resolveLocaleText(props.item.label, props.item.id);
+});
+
+const handleClick = () => {
+  if (props.item.path) {
+    router.push(props.item.path);
+  }
+};
+</script>
diff --git a/antdv-next-admin/src/components/Layout/NotificationPanel.vue b/antdv-next-admin/src/components/Layout/NotificationPanel.vue
new file mode 100644
index 0000000..5f37725
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/NotificationPanel.vue
@@ -0,0 +1,535 @@
+<template>
+  <a-popover
+    v-model:open="popoverOpen"
+    trigger="click"
+    placement="bottomRight"
+    :arrow="false"
+    :overlay-style="{ paddingTop: '8px' }"
+    overlay-class-name="notification-popover-overlay"
+  >
+    <a-badge :dot="notificationStore.unreadCount > 0" :offset="[-5, 5]">
+      <a-button type="text" class="header-action">
+        <BellOutlined />
+      </a-button>
+    </a-badge>
+    <template #content>
+      <div class="notification-panel">
+        <div class="panel-header">
+          <div class="header-left">
+            <span class="title">{{ $t("layout.notifications") }}</span>
+            <span v-if="notificationStore.unreadCount > 0" class="unread-pill">
+              {{ notificationStore.unreadCount }}
+            </span>
+          </div>
+          <a-space size="small">
+            <a-button
+              type="link"
+              size="small"
+              :disabled="notificationStore.unreadCount === 0"
+              @click="handleMarkAllRead"
+            >
+              {{ $t("layout.markAllRead") }}
+            </a-button>
+            <a-button
+              type="link"
+              size="small"
+              :disabled="notificationStore.notifications.length === 0"
+              @click="handleClearAll"
+            >
+              {{ $t("layout.clearAll") }}
+            </a-button>
+          </a-space>
+        </div>
+
+        <div class="panel-body">
+          <template v-if="displayedNotifications.length > 0">
+            <div
+              v-for="notification in displayedNotifications"
+              :key="notification.id"
+              :class="[
+                'notification-item',
+                { unread: !notification.read },
+                `tone-${getNotificationTone(notification)}`,
+              ]"
+              @click="handleNotificationClick(notification)"
+            >
+              <div class="notification-icon" aria-hidden="true">
+                <component :is="getNotificationIcon(notification)" />
+                <span v-if="!notification.read" class="icon-unread-dot" />
+              </div>
+
+              <div class="notification-content">
+                <div class="notification-meta">
+                  <div class="notification-title-row">
+                    <div class="notification-title">
+                      {{ notification.title }}
+                    </div>
+                  </div>
+                  <div class="notification-time">
+                    {{ formatTime(notification.timestamp) }}
+                  </div>
+                </div>
+                <div class="notification-message">
+                  {{ notification.message }}
+                </div>
+                <div class="notification-detail-hint">
+                  {{ $t("layout.viewDetails") }}
+                </div>
+              </div>
+
+              <a-button
+                type="text"
+                size="small"
+                class="notification-remove-btn"
+                :title="$t('common.close')"
+                @click.stop="handleRemoveNotification(notification.id)"
+              >
+                <CloseOutlined />
+              </a-button>
+            </div>
+          </template>
+          <div v-else class="notification-empty">
+            <div class="empty-illustration">
+              <BellOutlined class="empty-icon" />
+              <span class="empty-dot" />
+            </div>
+            <div class="empty-title">{{ $t("layout.noNotifications") }}</div>
+            <div class="empty-subtitle">
+              {{ $t("layout.notificationsEmptyHint") }}
+            </div>
+          </div>
+        </div>
+
+        <div class="panel-footer">
+          <a-button type="link" class="view-all-btn" @click="handleViewAll">
+            {{ $t("layout.viewAllNotifications") }}
+            <RightOutlined />
+          </a-button>
+        </div>
+      </div>
+    </template>
+  </a-popover>
+</template>
+
+<script setup lang="ts">
+import type { Notification } from "@/types/layout";
+
+import {
+  BellOutlined,
+  RocketOutlined,
+  MailOutlined,
+  SafetyCertificateOutlined,
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+  CloseOutlined,
+  RightOutlined,
+} from "@antdv-next/icons";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { computed, ref } from "vue";
+
+import router from "@/router";
+import { useNotificationStore } from "@/stores/notification";
+
+dayjs.extend(relativeTime);
+
+const notificationStore = useNotificationStore();
+const popoverOpen = ref(false);
+
+const displayedNotifications = computed(() => {
+  return notificationStore.notifications.slice(0, 10);
+});
+
+const formatTime = (timestamp: number) => {
+  return dayjs(timestamp).fromNow();
+};
+
+const getNotificationTone = (notification: Notification) => {
+  // Use category if explicitly set
+  if (notification.category) {
+    return notification.category;
+  }
+
+  // Fallback to type-based classification
+  switch (notification.type) {
+    case "success":
+      return "task";
+    case "warning":
+      return "security";
+    case "error":
+      return "error";
+    default:
+      return "system";
+  }
+};
+
+const getNotificationIcon = (notification: Notification) => {
+  const tone = getNotificationTone(notification);
+
+  if (tone === "system") return RocketOutlined;
+  if (tone === "message") return MailOutlined;
+  if (tone === "security") return SafetyCertificateOutlined;
+  if (tone === "task") return CheckCircleOutlined;
+  if (tone === "error") return ExclamationCircleOutlined;
+  return BellOutlined;
+};
+
+const handleNotificationClick = (notification: Notification) => {
+  notificationStore.markAsRead(notification.id);
+  popoverOpen.value = false;
+  router.push({
+    path: "/notifications",
+    query: {
+      id: notification.id,
+    },
+  });
+};
+
+const handleRemoveNotification = (id: string) => {
+  notificationStore.removeNotification(id);
+};
+
+const handleMarkAllRead = () => {
+  notificationStore.markAllAsRead();
+};
+
+const handleClearAll = () => {
+  notificationStore.clearAll();
+};
+
+const handleViewAll = () => {
+  popoverOpen.value = false;
+  router.push("/notifications");
+};
+</script>
+
+<style scoped lang="scss">
+.notification-panel {
+  width: min(392px, calc(100vw - 32px));
+  max-height: min(560px, calc(100vh - 120px));
+  background: var(--color-bg-container);
+  border-radius: 12px;
+  overflow: hidden;
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px 12px;
+    border-bottom: 1px solid var(--color-border-secondary);
+    background: linear-gradient(180deg, rgba(15, 23, 42, 0.03), transparent);
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .title {
+      font-weight: var(--font-weight-semibold);
+      font-size: 15px;
+      color: var(--color-text-primary);
+    }
+
+    .unread-pill {
+      min-width: 20px;
+      height: 20px;
+      padding: 0 6px;
+      border-radius: 999px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-primary);
+      background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+      border: 1px solid
+        color-mix(in srgb, var(--color-primary) 20%, transparent);
+    }
+  }
+
+  .panel-body {
+    max-height: 404px;
+    overflow-y: auto;
+    padding: 10px;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 999px;
+      background: rgba(100, 116, 139, 0.28);
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      background: rgba(100, 116, 139, 0.4);
+    }
+
+    .notification-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 14px;
+      border-radius: 10px;
+      cursor: pointer;
+      transition:
+        background var(--duration-base) var(--ease-out),
+        transform var(--duration-base) var(--ease-out);
+
+      & + .notification-item {
+        border-top: 1px solid var(--color-border-secondary);
+      }
+
+      &:hover {
+        background: var(--color-bg-layout);
+      }
+
+      &.unread {
+        background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+      }
+
+      .notification-icon {
+        position: relative;
+        flex: 0 0 27px;
+        width: 27px;
+        height: 27px;
+        border-radius: 9px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+      }
+
+      .icon-unread-dot {
+        position: absolute;
+        right: -2px;
+        top: -2px;
+        width: 8px;
+        height: 8px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow: 0 0 0 2px var(--color-bg-container);
+      }
+
+      .notification-content {
+        flex: 1;
+        min-width: 0;
+
+        .notification-meta {
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+          gap: 8px;
+          margin-bottom: 4px;
+        }
+
+        .notification-title-row {
+          display: flex;
+          align-items: center;
+          min-width: 0;
+        }
+
+        .notification-title {
+          font-size: 14px;
+          line-height: 20px;
+          font-weight: 600;
+          color: var(--color-text-primary);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .notification-message {
+          font-size: 12px;
+          line-height: 1.7;
+          color: var(--color-text-secondary);
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+        }
+
+        .notification-time {
+          flex: 0 0 auto;
+          font-size: 11px;
+          color: var(--color-text-tertiary);
+          line-height: 18px;
+          white-space: nowrap;
+        }
+
+        .notification-detail-hint {
+          margin-top: 6px;
+          font-size: 12px;
+          line-height: 16px;
+          color: var(--color-primary);
+          opacity: 0;
+          transform: translateY(2px);
+          transition:
+            opacity var(--duration-base) var(--ease-out),
+            transform var(--duration-base) var(--ease-out);
+        }
+      }
+
+      .notification-remove-btn {
+        width: 24px;
+        height: 24px;
+        margin-top: -2px;
+        border-radius: 999px;
+        color: var(--color-text-tertiary);
+        opacity: 0.5;
+        transition:
+          opacity var(--duration-base) var(--ease-out),
+          background var(--duration-base) var(--ease-out);
+
+        &:hover {
+          opacity: 1;
+          color: var(--color-text-secondary);
+          background: var(--color-bg-layout);
+        }
+      }
+
+      &:hover .notification-remove-btn {
+        opacity: 1;
+      }
+
+      &:hover .notification-title {
+        color: var(--color-primary);
+      }
+
+      &:hover .notification-detail-hint {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .tone-system .notification-icon {
+      color: #1677ff;
+      background: rgba(22, 119, 255, 0.12);
+    }
+
+    .tone-message .notification-icon {
+      color: #22a06b;
+      background: rgba(34, 160, 107, 0.14);
+    }
+
+    .tone-security .notification-icon {
+      color: #f97316;
+      background: rgba(249, 115, 22, 0.18);
+    }
+
+    .tone-task .notification-icon {
+      color: #0f766e;
+      background: rgba(15, 118, 110, 0.14);
+    }
+
+    .tone-error .notification-icon {
+      color: #dc2626;
+      background: rgba(220, 38, 38, 0.14);
+    }
+
+    .notification-empty {
+      padding: 44px 20px 48px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+
+      .empty-illustration {
+        position: relative;
+        width: 72px;
+        height: 72px;
+        border-radius: 20px;
+        background: linear-gradient(
+          145deg,
+          rgba(22, 119, 255, 0.16),
+          rgba(22, 119, 255, 0.04)
+        );
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 14px;
+      }
+
+      .empty-icon {
+        font-size: 32px;
+        color: var(--color-primary);
+      }
+
+      .empty-dot {
+        position: absolute;
+        right: 14px;
+        top: 14px;
+        width: 10px;
+        height: 10px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
+      }
+
+      .empty-title {
+        font-size: 14px;
+        line-height: 22px;
+        color: var(--color-text-primary);
+        font-weight: 600;
+      }
+
+      .empty-subtitle {
+        margin-top: 4px;
+        font-size: 12px;
+        line-height: 20px;
+        color: var(--color-text-tertiary);
+      }
+    }
+  }
+
+  .panel-footer {
+    padding: 10px 14px 12px;
+    border-top: 1px solid var(--color-border-secondary);
+    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.02));
+
+    .view-all-btn {
+      width: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      height: 34px;
+      border-radius: 8px;
+      font-size: 13px;
+      color: var(--color-primary);
+
+      &:hover {
+        background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.notification-popover-overlay {
+  .ant-popover-inner {
+    border-radius: 12px;
+    border: 1px solid var(--color-border-secondary);
+    box-shadow:
+      0 28px 72px rgba(15, 23, 42, 0.18),
+      0 6px 18px rgba(15, 23, 42, 0.08);
+    overflow: hidden;
+  }
+
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+}
+
+:root.dark .notification-popover-overlay {
+  .ant-popover-inner {
+    box-shadow:
+      0 28px 72px rgba(0, 0, 0, 0.4),
+      0 6px 18px rgba(0, 0, 0, 0.2);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/SettingsDrawer.vue b/antdv-next-admin/src/components/Layout/SettingsDrawer.vue
new file mode 100644
index 0000000..6b0315e
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/SettingsDrawer.vue
@@ -0,0 +1,307 @@
+<template>
+  <a-drawer
+    v-model:open="visible"
+    :title="$t('settings.title')"
+    placement="right"
+    :size="320"
+  >
+    <div class="settings-drawer">
+      <!-- Theme Color -->
+      <div class="settings-section">
+        <h4>{{ $t("settings.themeColor") }}</h4>
+        <div class="color-picker">
+          <div
+            v-for="color in PRESET_COLORS"
+            :key="color.value"
+            :class="[
+              'color-item',
+              {
+                active:
+                  settingsStore.primaryColor === color.value &&
+                  !settingsStore.customPrimaryColor,
+              },
+            ]"
+            :style="{ backgroundColor: color.hex }"
+            @click="settingsStore.setPrimaryColor(color.value)"
+          >
+            <CheckOutlined
+              v-if="
+                settingsStore.primaryColor === color.value &&
+                !settingsStore.customPrimaryColor
+              "
+            />
+          </div>
+          <a-color-picker
+            v-model:value="customColor"
+            :presets="colorPresets"
+            @change="handleCustomColorChange"
+          >
+            <div
+              :class="[
+                'color-item',
+                'color-picker-trigger',
+                { active: !!settingsStore.customPrimaryColor },
+              ]"
+            >
+              <CheckOutlined v-if="settingsStore.customPrimaryColor" />
+              <span v-else class="picker-icon">+</span>
+            </div>
+          </a-color-picker>
+        </div>
+      </div>
+
+      <!-- Sidebar Theme -->
+      <div class="settings-section">
+        <h4>{{ $t("settings.sidebarTheme") }}</h4>
+        <a-radio-group v-model:value="settingsStore.sidebarTheme">
+          <a-radio value="light">{{ $t("settings.light") }}</a-radio>
+          <a-radio value="dark">{{ $t("settings.dark") }}</a-radio>
+        </a-radio-group>
+      </div>
+
+      <!-- Layout Mode -->
+      <div class="settings-section">
+        <h4>{{ $t("settings.layoutMode") }}</h4>
+        <a-radio-group v-model:value="settingsStore.layoutMode">
+          <a-radio value="vertical">{{ $t("settings.vertical") }}</a-radio>
+          <a-radio value="horizontal">{{ $t("settings.horizontal") }}</a-radio>
+        </a-radio-group>
+      </div>
+
+      <!-- Page Animation -->
+      <div class="settings-section">
+        <h4>{{ $t("settings.pageAnimation") }}</h4>
+        <a-select
+          v-model:value="settingsStore.pageAnimation"
+          :options="pageAnimationOptions"
+          style="width: 100%"
+        />
+      </div>
+
+      <!-- Gray Mode -->
+      <div class="settings-section">
+        <h4>{{ $t("settings.grayMode") }}</h4>
+        <a-switch v-model:checked="settingsStore.grayMode" />
+        <div class="hint">{{ $t("settings.grayModeHint") }}</div>
+      </div>
+
+      <!-- Remember Tab State -->
+      <div class="settings-section">
+        <h4>{{ $t("settings.rememberTabState") }}</h4>
+        <a-switch v-model:checked="settingsStore.rememberTabState" />
+        <div class="hint">{{ $t("settings.rememberTabStateHint") }}</div>
+      </div>
+
+      <!-- AI Chat Split Panel -->
+      <div class="settings-section">
+        <h4>{{ $t("settings.aiCollab") }}</h4>
+        <a-switch
+          :checked="layoutStore.aiEntryVisible"
+          :disabled="layoutStore.isMobile"
+          @change="handleAiEntryChange"
+        />
+        <div class="hint">
+          {{
+            layoutStore.isMobile
+              ? $t("settings.aiCollabHintMobile")
+              : $t("settings.aiCollabHint")
+          }}
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="settings-actions">
+        <a-button block @click="handleReset">
+          {{ $t("settings.reset") }}
+        </a-button>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import type { PrimaryColor } from "@/types/layout";
+
+import { CheckOutlined } from "@antdv-next/icons";
+import { Modal } from "antdv-next";
+import { computed, ref, watch } from "vue";
+
+import { $t } from "@/locales";
+import { useLayoutStore } from "@/stores/layout";
+import { useSettingsStore } from "@/stores/settings";
+
+const visible = ref(false);
+const settingsStore = useSettingsStore();
+const layoutStore = useLayoutStore();
+const customColor = ref(settingsStore.customPrimaryColor || "#1890ff");
+
+const PRESET_COLORS: Array<{ value: PrimaryColor; hex: string }> = [
+  { value: "blue", hex: "#1890ff" },
+  { value: "green", hex: "#52c41a" },
+  { value: "purple", hex: "#722ed1" },
+  { value: "red", hex: "#f5222d" },
+  { value: "orange", hex: "#fa8c16" },
+  { value: "cyan", hex: "#13c2c2" },
+];
+
+const colorPresets = [
+  {
+    label: "Preset Colors",
+    colors: PRESET_COLORS.map((c) => c.hex),
+  },
+];
+
+const pageAnimationOptions = computed(() => [
+  { label: $t("settings.fade"), value: "fade" },
+  { label: $t("settings.slideLeft"), value: "slide-left" },
+  { label: $t("settings.slideRight"), value: "slide-right" },
+  { label: $t("settings.slideUp"), value: "slide-up" },
+  { label: $t("settings.slideDown"), value: "slide-down" },
+  { label: $t("settings.zoom"), value: "zoom" },
+  { label: $t("settings.zoomBig"), value: "zoom-big" },
+  { label: $t("settings.none"), value: "none" },
+]);
+
+const handleCustomColorChange = (
+  value: string | { toHexString: () => string },
+) => {
+  const hex = typeof value === "string" ? value : value.toHexString();
+  settingsStore.setCustomPrimaryColor(hex);
+};
+
+// Watch store changes and save to localStorage
+watch(
+  () => settingsStore.sidebarTheme,
+  (value) => {
+    settingsStore.setSidebarTheme(value);
+  },
+);
+
+watch(
+  () => settingsStore.layoutMode,
+  (value) => {
+    settingsStore.setLayoutMode(value);
+  },
+);
+
+watch(
+  () => settingsStore.pageAnimation,
+  (value) => {
+    settingsStore.setPageAnimation(value);
+  },
+);
+
+watch(
+  () => settingsStore.grayMode,
+  (value) => {
+    settingsStore.setGrayMode(value);
+  },
+);
+
+watch(
+  () => settingsStore.rememberTabState,
+  (value) => {
+    settingsStore.setRememberTabState(value);
+  },
+);
+
+const handleReset = () => {
+  Modal.confirm({
+    title: $t("settings.confirmReset"),
+    onOk: () => {
+      settingsStore.resetSettings();
+      layoutStore.setAiEntryVisible(true);
+      layoutStore.setAiCollabEnabled(false);
+      customColor.value = "#1890ff";
+    },
+  });
+};
+
+const handleAiEntryChange = (checked: boolean) => {
+  layoutStore.setAiEntryVisible(checked);
+};
+
+const open = () => {
+  visible.value = true;
+};
+
+const close = () => {
+  visible.value = false;
+};
+
+defineExpose({ open, close });
+</script>
+
+<style scoped lang="scss">
+.settings-drawer {
+  .settings-section {
+    margin-bottom: var(--spacing-lg);
+
+    h4 {
+      margin-bottom: var(--spacing-sm);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-text-primary);
+    }
+
+    .color-picker {
+      display: flex;
+      gap: var(--spacing-sm);
+      flex-wrap: wrap;
+
+      .color-item {
+        width: 32px;
+        height: 32px;
+        border-radius: var(--radius-base);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all var(--duration-slow) var(--ease-out);
+        border: 2px solid transparent;
+        flex-shrink: 0;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+
+        &.active {
+          border-color: #fff;
+          box-shadow: 0 0 0 2px var(--color-primary);
+        }
+
+        .anticon {
+          color: #fff;
+          font-size: 16px;
+        }
+      }
+
+      .color-picker-trigger {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        position: relative;
+
+        .picker-icon {
+          color: #fff;
+          font-size: 20px;
+          font-weight: bold;
+        }
+
+        &.active {
+          background: var(--ant-primary-color);
+        }
+      }
+    }
+
+    .hint {
+      margin-top: var(--spacing-xs);
+      font-size: var(--font-size-xs);
+      color: var(--color-text-tertiary);
+    }
+  }
+
+  .settings-actions {
+    margin-top: var(--spacing-xl);
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid var(--color-border-secondary);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/Sidebar.vue b/antdv-next-admin/src/components/Layout/Sidebar.vue
new file mode 100644
index 0000000..bfc42dd
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/Sidebar.vue
@@ -0,0 +1,381 @@
+<template>
+  <div v-if="showMobileMask" class="sidebar-mask" @click="closeMobileSidebar" />
+  <a-layout-sider
+    v-model:collapsed="layoutStore.collapsed"
+    :class="['admin-sidebar', `theme-${effectiveSidebarTheme}`, { mobile: layoutStore.isMobile }]"
+    :width="layoutStore.sidebarWidth"
+    :collapsed-width="siderCollapsedWidth"
+    :trigger="null"
+    collapsible
+  >
+    <!-- Logo -->
+    <div class="sidebar-logo">
+      <img :src="logoImg" alt="Logo" class="logo-img" />
+      <transition name="fade">
+        <span v-show="!layoutStore.collapsed" class="logo-title">
+          {{ $t('common.appName') }}
+        </span>
+      </transition>
+    </div>
+
+    <!-- Menu -->
+    <a-menu
+      v-model:selectedKeys="selectedKeys"
+      v-model:openKeys="openKeys"
+      mode="inline"
+      :theme="effectiveSidebarTheme"
+      :items="antMenuItems"
+      class="sidebar-menu"
+      @click="handleMenuClick"
+    />
+  </a-layout-sider>
+</template>
+
+<script setup lang="ts">
+import type { SidebarTheme } from '@/types/layout';
+import type { MenuItem as MenuItemType } from '@/types/router';
+import type { MenuProps } from 'antdv-next';
+
+import { ref, computed, watch, h, nextTick } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import logoImg from '@/assets/images/logo.png';
+import { basicRoutes } from '@/router/routes';
+import { routesToMenuTree } from '@/router/utils';
+import { useLayoutStore } from '@/stores/layout';
+import { usePermissionStore } from '@/stores/permission';
+import { useSettingsStore } from '@/stores/settings';
+import { resolveLocaleText } from '@/utils/i18n';
+import { resolveIcon } from '@/utils/icon';
+
+const route = useRoute();
+const router = useRouter();
+const layoutStore = useLayoutStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+
+const selectedKeys = ref<string[]>([]);
+const openKeys = ref<string[]>([]);
+
+const fallbackMenuItems = computed(() => {
+  const basicChildren = basicRoutes.flatMap((r) => r.children || []);
+  return routesToMenuTree(basicChildren);
+});
+
+const menuItems = computed(() => {
+  if (permissionStore.menuTree.length > 0) {
+    return permissionStore.menuTree;
+  }
+  return fallbackMenuItems.value;
+});
+
+const effectiveSidebarTheme = computed<SidebarTheme>(() => {
+  // Allow user to override sidebar theme even in global dark mode
+  // If the user explicitly selects 'light' sidebar, respect that choice
+  return settingsStore.sidebarTheme;
+});
+
+const siderCollapsedWidth = computed(() => {
+  return layoutStore.isMobile ? 0 : layoutStore.collapsedWidth;
+});
+
+const showMobileMask = computed(() => {
+  return layoutStore.isMobile && !layoutStore.collapsed;
+});
+
+const antMenuItems = computed<MenuProps['items']>(() => {
+  const convert = (menus: MenuItemType[]): NonNullable<MenuProps['items']> => {
+    return menus.map((menu) => {
+      const iconComponent = resolveIcon(menu.icon);
+      const item = {
+        key: menu.path || menu.id,
+        label: resolveLocaleText(menu.label, menu.id),
+        icon: iconComponent ? h(iconComponent) : undefined,
+      };
+
+      if (menu.children && menu.children.length > 0) {
+        return {
+          ...item,
+          key: menu.id,
+          children: convert(menu.children),
+        };
+      }
+
+      return item;
+    });
+  };
+
+  return convert(menuItems.value);
+});
+
+function findMenuOpenKeys(
+  menus: MenuItemType[],
+  targetPath: string,
+  parents: string[] = [],
+): string[] {
+  for (const item of menus) {
+    const menuKey = item.children && item.children.length > 0 ? item.id : item.path || item.id;
+    const currentParents = [...parents, menuKey];
+
+    if ((item.path || item.id) === targetPath) {
+      return parents;
+    }
+
+    if (item.children && item.children.length > 0) {
+      const matched = findMenuOpenKeys(item.children, targetPath, currentParents);
+      if (matched.length > 0) {
+        return matched;
+      }
+    }
+  }
+
+  return [];
+}
+
+function isExternalLinkPath(path: string): boolean {
+  return path.startsWith('http://') || path.startsWith('https://');
+}
+
+function findMenuByPath(menus: MenuItemType[], targetPath: string): MenuItemType | null {
+  for (const item of menus) {
+    if ((item.path || item.id) === targetPath) {
+      return item;
+    }
+
+    if (item.children && item.children.length > 0) {
+      const found = findMenuByPath(item.children, targetPath);
+      if (found) {
+        return found;
+      }
+    }
+  }
+
+  return null;
+}
+
+const syncMenuState = () => {
+  // Find the menu item for current route
+  const currentMenuItem = findMenuByPath(menuItems.value, route.path);
+
+  // Don't set selected state if current menu item is an external link
+  if (currentMenuItem && currentMenuItem.path && isExternalLinkPath(currentMenuItem.path)) {
+    selectedKeys.value = [];
+  } else {
+    selectedKeys.value = [route.path];
+  }
+
+  openKeys.value = findMenuOpenKeys(menuItems.value, route.path);
+};
+
+const closeMobileSidebar = () => {
+  if (layoutStore.isMobile && !layoutStore.collapsed) {
+    layoutStore.setSidebarCollapsed(true);
+  }
+};
+
+const handleMenuClick = ({ key }: { key: string | number }) => {
+  if (typeof key !== 'string') return;
+
+  // External links: open in a new tab
+  if (key.startsWith('http://') || key.startsWith('https://')) {
+    // Save current selected state before opening external link
+    const currentSelected = [...selectedKeys.value];
+
+    window.open(key, '_blank', 'noopener,noreferrer');
+    closeMobileSidebar();
+
+    // Restore selected state after Menu component updates
+    // This prevents the external link menu item from being shown as selected
+    nextTick(() => {
+      selectedKeys.value = currentSelected;
+    });
+    return;
+  }
+
+  // Internal routes
+  if (key.startsWith('/')) {
+    router.push(key);
+    closeMobileSidebar();
+  }
+};
+
+watch(
+  [() => route.path, menuItems],
+  () => {
+    syncMenuState();
+  },
+  { immediate: true, deep: true },
+);
+</script>
+
+<style scoped lang="scss">
+.sidebar-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.36);
+  z-index: 99;
+}
+
+.admin-sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-shadow: var(--shadow-2);
+  z-index: 100;
+  transition: all var(--duration-slow) var(--ease-out);
+
+  &.mobile {
+    z-index: 110;
+  }
+
+  &.theme-light {
+    background: var(--color-bg-container);
+
+    :deep(.ant-menu) {
+      background: var(--color-bg-container);
+      color: var(--color-text-primary);
+    }
+
+    .sidebar-logo {
+      border-bottom-color: var(--color-border-secondary);
+
+      .logo-title {
+        color: var(--color-text-primary);
+      }
+    }
+  }
+
+  &.theme-dark {
+    background: linear-gradient(180deg, #0b1326 0%, #111d38 58%, #132246 100%);
+
+    :deep(.ant-menu) {
+      background: transparent;
+      color: rgba(255, 255, 255, 0.85);
+    }
+
+    .sidebar-logo {
+      border-bottom-color: rgba(255, 255, 255, 0.1);
+
+      .logo-title {
+        color: rgba(255, 255, 255, 0.92);
+      }
+    }
+  }
+
+  .sidebar-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    height: 50px;
+    padding: 0 var(--spacing-md);
+    border-bottom: 1px solid var(--color-border-secondary);
+
+    .logo-img {
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+    }
+
+    .logo-title {
+      font-size: var(--font-size-lg);
+      font-weight: var(--font-weight-semibold);
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  .sidebar-menu {
+    border-right: none;
+    margin-top: 8px;
+    padding: 0 12px;
+
+    :deep(.ant-menu-item),
+    :deep(.ant-menu-submenu-title) {
+      margin: 4px 0;
+      border-radius: 8px;
+      height: 40px;
+      line-height: 40px;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  }
+
+  &.theme-dark {
+    .sidebar-menu {
+      :deep(.ant-menu-item),
+      :deep(.ant-menu-submenu-title),
+      :deep(.ant-menu-submenu-arrow) {
+        color: rgba(255, 255, 255, 0.88) !important;
+      }
+
+      :deep(.ant-menu-item .ant-menu-title-content),
+      :deep(.ant-menu-submenu-title .ant-menu-title-content),
+      :deep(.ant-menu-item .anticon),
+      :deep(.ant-menu-submenu-title .anticon) {
+        color: inherit !important;
+      }
+
+      :deep(.ant-menu-item:hover),
+      :deep(.ant-menu-submenu-title:hover) {
+        color: #fff !important;
+        background: rgba(255, 255, 255, 0.12) !important;
+      }
+
+      :deep(.ant-menu-item-selected) {
+        color: #fff !important;
+        background: rgba(22, 119, 255, 0.35) !important;
+      }
+    }
+  }
+
+  &.theme-light {
+    .sidebar-menu {
+      :deep(.ant-menu-item),
+      :deep(.ant-menu-submenu-title) {
+        color: rgba(0, 0, 0, 0.85) !important;
+      }
+
+      :deep(.ant-menu-item .ant-menu-title-content),
+      :deep(.ant-menu-submenu-title .ant-menu-title-content),
+      :deep(.ant-menu-item .anticon),
+      :deep(.ant-menu-submenu-title .anticon),
+      :deep(.ant-menu-submenu-arrow) {
+        color: inherit !important;
+      }
+
+      :deep(.ant-menu-item:hover),
+      :deep(.ant-menu-submenu-title:hover) {
+        color: rgba(0, 0, 0, 0.88) !important;
+        background: #f5f7fa !important;
+      }
+
+      :deep(.ant-menu-item-selected) {
+        color: #1677ff !important;
+        background: #e6f4ff !important;
+      }
+
+      :deep(.ant-menu-submenu-selected > .ant-menu-submenu-title) {
+        color: #1677ff !important;
+      }
+    }
+  }
+}
+
+// Scrollbar styles
+.admin-sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.admin-sidebar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.admin-sidebar.theme-dark::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/TabBar.vue b/antdv-next-admin/src/components/Layout/TabBar.vue
new file mode 100644
index 0000000..05ec26f
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/TabBar.vue
@@ -0,0 +1,503 @@
+<template>
+  <div class="tab-bar" v-if="tabsStore.tabs.length > 0">
+    <div class="tabs-container">
+      <a-tabs
+        v-model:activeKey="activeKey"
+        type="editable-card"
+        :hide-add="true"
+        :items="tabItems"
+        popupClassName="tab-bar-overflow-dropdown"
+        @edit="handleEdit"
+        @change="handleChange"
+      />
+    </div>
+    <div class="tab-actions">
+      <a-dropdown placement="bottomRight" :menu="activeTabMenuProps" :trigger="['click']">
+        <a-tooltip :title="$t('layout.tabs.moreActions')">
+          <a-button type="text" class="tab-action-btn">
+            <DownOutlined />
+          </a-button>
+        </a-tooltip>
+      </a-dropdown>
+      <a-tooltip :title="$t('layout.tabs.refresh')">
+        <a-button type="text" class="tab-action-btn" @click="refreshCurrentTab">
+          <ReloadOutlined />
+        </a-button>
+      </a-tooltip>
+      <a-tooltip :title="isFullscreen ? $t('layout.exitFullscreen') : $t('layout.fullscreen')">
+        <a-button type="text" class="tab-action-btn" @click="toggleFullscreen">
+          <FullscreenExitOutlined v-if="isFullscreen" />
+          <FullscreenOutlined v-else />
+        </a-button>
+      </a-tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Tab } from '@/types/layout';
+
+import {
+  ReloadOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
+  DownOutlined,
+  CloseOutlined,
+  PushpinOutlined,
+  PushpinFilled,
+  CloseCircleOutlined,
+  CloseSquareOutlined,
+  VerticalLeftOutlined,
+  VerticalRightOutlined,
+  StarOutlined,
+  StarFilled,
+} from '@antdv-next/icons';
+import { Dropdown } from 'antdv-next';
+import { computed, h } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useLayoutStore } from '@/stores/layout';
+import { useTabsStore } from '@/stores/tabs';
+import { resolveLocaleText } from '@/utils/i18n';
+import { resolveIcon } from '@/utils/icon';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+const tabsStore = useTabsStore();
+const layoutStore = useLayoutStore();
+
+const isFullscreen = computed(() => layoutStore.pageFullscreen);
+const toggleFullscreen = () => {
+  layoutStore.togglePageFullscreen();
+};
+
+type TabMenuKey =
+  | 'close'
+  | 'pin'
+  | 'favorite'
+  | 'refresh'
+  | 'closeLeft'
+  | 'closeRight'
+  | 'closeOthers'
+  | 'closeAll';
+
+const activeKey = computed({
+  get: () => tabsStore.activeTabPath,
+  set: (value) => tabsStore.setActiveTab(value),
+});
+
+const currentTab = computed(() => {
+  return tabsStore.activeTab || tabsStore.tabs[0];
+});
+
+const tabItems = computed(() => {
+  // Access locale to establish reactivity dependency on language changes
+  const currentLocale = locale.value;
+  // Keep locale dependency but don't use it as a key to avoid forced remounts
+  void currentLocale;
+
+  return tabsStore.tabs.map((tab) => ({
+    key: tab.path,
+    closable: tab.closable,
+    label: h('span', { class: 'tab-label-wrapper' }, [
+      h(
+        Dropdown,
+        {
+          trigger: ['contextmenu'],
+          menu: {
+            items: getTabMenuItems(tab),
+            onClick: ({ key }: { key: string | number }) =>
+              handleContextMenu({ key: String(key) }, tab),
+          },
+        },
+        {
+          default: () => {
+            const icon = getTabIcon(tab);
+            return h('span', { class: 'tab-label' }, [
+              icon ? h(icon, { class: 'tab-menu-icon' }) : null,
+              h('span', { class: 'tab-text' }, getTabLabel(tab)),
+              tab.favorite ? h(StarFilled, { class: 'tab-favorite-icon' }) : null,
+              isTabFixed(tab) ? h(PushpinFilled, { class: 'tab-pin-icon' }) : null,
+            ]);
+          },
+        },
+      ),
+    ]),
+  }));
+});
+
+const isTabFixed = (tab: Tab) => Boolean(tab.affix || tab.pinned);
+
+const handleEdit = (targetKey: string) => {
+  tabsStore.closeTab(targetKey);
+  syncRouteWithActiveTab();
+};
+
+const handleChange = (key: string) => {
+  const tab = tabsStore.tabs.find((item) => item.path === key);
+  if (tab) {
+    router.push(tab.fullPath);
+  }
+};
+
+const hasClosableLeftTabs = (tab: Tab) => {
+  const index = tabsStore.tabs.findIndex((item) => item.path === tab.path);
+  if (index <= 0) return false;
+  return tabsStore.tabs.slice(0, index).some((item) => item.closable);
+};
+
+const hasClosableRightTabs = (tab: Tab) => {
+  const index = tabsStore.tabs.findIndex((item) => item.path === tab.path);
+  if (index < 0 || index >= tabsStore.tabs.length - 1) return false;
+  return tabsStore.tabs.slice(index + 1).some((item) => item.closable);
+};
+
+const hasClosableOtherTabs = (tab: Tab) => {
+  return tabsStore.tabs.some((item) => item.path !== tab.path && item.closable);
+};
+
+const hasClosableTabs = computed(() => {
+  return tabsStore.tabs.some((tab) => tab.closable);
+});
+
+const getTabMenuItems = (tab: Tab) => {
+  // Get the latest tab state from store to ensure reactivity
+  const latestTab = tabsStore.tabs.find((item) => item.path === tab.path) || tab;
+  // Call t() function to get reactive translations
+  return [
+    {
+      key: 'close',
+      icon: h(CloseOutlined),
+      label: t('layout.tabs.close'),
+      disabled: !latestTab.closable,
+    },
+    {
+      key: 'pin',
+      icon: h(latestTab.pinned ? PushpinFilled : PushpinOutlined),
+      label: latestTab.pinned ? t('layout.tabs.unpin') : t('layout.tabs.pin'),
+      disabled: Boolean(latestTab.affix),
+    },
+    {
+      key: 'favorite',
+      icon: h(latestTab.favorite ? StarFilled : StarOutlined),
+      label: latestTab.favorite ? t('layout.tabs.unfavorite') : t('layout.tabs.favorite'),
+    },
+    {
+      key: 'refresh',
+      icon: h(ReloadOutlined),
+      label: t('layout.tabs.refresh'),
+    },
+    {
+      type: 'divider' as const,
+    },
+    {
+      key: 'closeLeft',
+      icon: h(VerticalLeftOutlined),
+      label: t('layout.tabs.closeLeft'),
+      disabled: !hasClosableLeftTabs(tab),
+    },
+    {
+      key: 'closeRight',
+      icon: h(VerticalRightOutlined),
+      label: t('layout.tabs.closeRight'),
+      disabled: !hasClosableRightTabs(tab),
+    },
+    {
+      key: 'closeOthers',
+      icon: h(CloseCircleOutlined),
+      label: t('layout.tabs.closeOthers'),
+      disabled: !hasClosableOtherTabs(tab),
+    },
+    {
+      key: 'closeAll',
+      icon: h(CloseSquareOutlined),
+      label: t('layout.tabs.closeAll'),
+      disabled: !hasClosableTabs.value,
+    },
+  ];
+};
+
+const syncRouteWithActiveTab = () => {
+  const active =
+    tabsStore.tabs.find((tab) => tab.path === tabsStore.activeTabPath) || tabsStore.tabs[0];
+  if (!active) {
+    if (route.path !== '/dashboard') {
+      router.push('/dashboard');
+    }
+    return;
+  }
+
+  if (route.path !== active.path || route.fullPath !== active.fullPath) {
+    router.push(active.fullPath);
+  }
+};
+
+const handleContextMenu = (e: { key: string }, tab: Tab) => {
+  const { key } = e;
+  switch (key as TabMenuKey) {
+    case 'close':
+      tabsStore.closeTab(tab.path);
+      syncRouteWithActiveTab();
+      break;
+    case 'pin':
+      tabsStore.togglePinTab(tab.path);
+      break;
+    case 'favorite':
+      tabsStore.toggleFavoriteTab(tab.path);
+      break;
+    case 'refresh':
+      tabsStore.refreshTab(tab.path);
+      break;
+    case 'closeOthers':
+      tabsStore.closeOtherTabs(tab.path);
+      syncRouteWithActiveTab();
+      break;
+    case 'closeAll':
+      tabsStore.closeAllTabs();
+      syncRouteWithActiveTab();
+      break;
+    case 'closeLeft':
+      tabsStore.closeLeftTabs(tab.path);
+      syncRouteWithActiveTab();
+      break;
+    case 'closeRight':
+      tabsStore.closeRightTabs(tab.path);
+      syncRouteWithActiveTab();
+      break;
+  }
+};
+
+const activeTabMenuProps = computed(() => {
+  // Access locale to establish reactivity dependency on language changes
+  const currentLocale = locale.value;
+  void currentLocale; // Ensure reactivity
+
+  const tab = currentTab.value;
+  return {
+    items: tab ? getTabMenuItems(tab) : [],
+    onClick: ({ key }: { key: string | number }) => {
+      if (tab) {
+        handleContextMenu({ key: String(key) }, tab);
+      }
+    },
+  };
+});
+
+const refreshCurrentTab = () => {
+  const tab = currentTab.value;
+  if (!tab) return;
+  tabsStore.refreshTab(tab.path);
+};
+
+const getTabLabel = (tab: Tab) => {
+  return resolveLocaleText(tab.title, tab.name);
+};
+
+const getTabIcon = (tab: Tab) => {
+  return resolveIcon(tab.icon);
+};
+</script>
+
+<style scoped lang="scss">
+.tab-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  box-sizing: border-box;
+  height: 38px;
+  background: var(--color-bg-container);
+  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 0 12px 0 16px;
+
+  .tabs-container {
+    flex: 1;
+    min-width: 0;
+
+    :deep(.ant-tabs) {
+      height: 37px;
+
+      .ant-tabs-nav {
+        margin: 0;
+        height: 37px;
+
+        &::before {
+          border-bottom: none;
+        }
+      }
+
+      .ant-tabs-nav-wrap,
+      .ant-tabs-nav-list {
+        height: 100%;
+        align-items: center;
+      }
+
+      .ant-tabs-content-holder {
+        display: none;
+      }
+
+      .ant-tabs-tab .anticon:not(:last-child) {
+        margin-right: 0;
+      }
+
+      .ant-tabs-tab {
+        border: 1px solid transparent !important;
+        background: var(--color-bg-layout);
+        margin-right: 6px;
+        padding: 0 10px;
+        height: 28px;
+        border-radius: 8px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+        .ant-tabs-tab-btn {
+          display: flex;
+          align-items: center;
+          color: var(--color-text-secondary);
+          font-weight: 400;
+          font-size: 13px;
+        }
+
+        &:hover {
+          background: var(--color-bg-container);
+          border-color: var(--color-border-secondary);
+
+          .ant-tabs-tab-btn {
+            color: var(--color-text-primary);
+          }
+        }
+
+        &.ant-tabs-tab-active {
+          background: var(--color-primary-1);
+          border-color: var(--color-primary-2);
+
+          .ant-tabs-tab-btn {
+            color: var(--color-primary);
+            font-weight: 400;
+          }
+
+          .ant-tabs-tab-remove {
+            color: var(--color-primary);
+
+            &:hover {
+              color: var(--color-primary-7);
+            }
+          }
+        }
+
+        .ant-tabs-tab-remove {
+          margin-left: 6px;
+          color: var(--color-text-tertiary);
+          transition: color 0.2s;
+          font-size: 12px;
+
+          &:hover {
+            color: var(--color-text-primary);
+          }
+        }
+      }
+    }
+  }
+
+  // Dark mode specific overrides moved to global style block below to ensure priority
+  .tab-actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 2px;
+
+    .tab-action-btn {
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border-radius: 6px;
+      color: var(--color-text-secondary);
+
+      &:hover {
+        color: var(--color-text-primary);
+        background: var(--color-bg-layout);
+      }
+    }
+  }
+
+  // Use :deep() to ensure styles apply even when VNodes are cloned by a-tabs
+  :deep(.tab-label) {
+    display: inline-flex;
+    align-items: center;
+    max-width: 180px;
+    gap: 6px;
+  }
+
+  :deep(.tab-menu-icon) {
+    font-size: 14px;
+    color: inherit;
+  }
+
+  :deep(.tab-pin-icon) {
+    font-size: 12px;
+    color: var(--color-warning);
+  }
+
+  :deep(.tab-favorite-icon) {
+    font-size: 12px;
+    color: var(--color-warning);
+  }
+
+  :deep(.tab-text) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>
+
+<style lang="scss">
+// Global style overrides for dark mode
+// Using non-scoped style to ensure we can target Ant Design internals reliably
+.tab-bar-overflow-dropdown {
+  .tab-label {
+    display: inline-flex;
+    align-items: center;
+    max-width: 180px;
+    gap: 6px;
+  }
+
+  .tab-menu-icon {
+    font-size: 14px;
+    color: inherit;
+  }
+
+  .tab-pin-icon,
+  .tab-favorite-icon {
+    font-size: 12px;
+  }
+
+  .tab-pin-icon,
+  .tab-favorite-icon {
+    color: var(--color-warning);
+  }
+
+  .tab-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+html.dark .tab-bar .ant-tabs-tab.ant-tabs-tab-active {
+  background: rgba(22, 119, 255, 0.25) !important;
+  border-color: transparent !important;
+
+  .ant-tabs-tab-btn {
+    color: #ffffff !important;
+  }
+
+  .ant-tabs-tab-remove {
+    color: rgba(255, 255, 255, 0.65) !important;
+
+    &:hover {
+      color: #ffffff !important;
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Layout/ThemeToggle.vue b/antdv-next-admin/src/components/Layout/ThemeToggle.vue
new file mode 100644
index 0000000..38da7c1
--- /dev/null
+++ b/antdv-next-admin/src/components/Layout/ThemeToggle.vue
@@ -0,0 +1,108 @@
+<template>
+  <a-tooltip :title="tooltipTitle">
+    <a-button type="text" class="header-action" @click="handleThemeToggle">
+      <span class="theme-icon-wrapper" :class="{ rotating: isRotating }">
+        <MoonOutlined class="theme-icon theme-icon-dark" :class="{ active: themeStore.isDark }" />
+        <SunOutlined class="theme-icon theme-icon-light" :class="{ active: !themeStore.isDark }" />
+      </span>
+    </a-button>
+  </a-tooltip>
+</template>
+
+<script setup lang="ts">
+import { MoonOutlined, SunOutlined } from '@antdv-next/icons';
+import { computed, onBeforeUnmount, ref } from 'vue';
+
+import { $t } from '@/locales';
+import { useThemeStore } from '@/stores/theme';
+
+const themeStore = useThemeStore();
+const isRotating = ref(false);
+let rotateTimer: number | null = null;
+
+const tooltipTitle = computed(() => {
+  return themeStore.isDark ? `${$t('layout.theme')} (Light)` : `${$t('layout.theme')} (Dark)`;
+});
+
+const resetRotateState = () => {
+  if (rotateTimer !== null) {
+    window.clearTimeout(rotateTimer);
+    rotateTimer = null;
+  }
+  isRotating.value = false;
+};
+
+const handleThemeToggle = (event: MouseEvent) => {
+  resetRotateState();
+  isRotating.value = true;
+  rotateTimer = window.setTimeout(() => {
+    isRotating.value = false;
+    rotateTimer = null;
+  }, 620);
+
+  themeStore.setTheme(themeStore.isDark ? 'light' : 'dark', {
+    origin: {
+      x: event.clientX,
+      y: event.clientY,
+    },
+  });
+};
+
+onBeforeUnmount(resetRotateState);
+</script>
+
+<style scoped lang="scss">
+.theme-icon-wrapper {
+  display: inline-grid;
+  place-items: center;
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-icon-wrapper:hover {
+  transform: rotate(90deg);
+}
+
+.theme-icon {
+  grid-area: 1 / 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: scale(0.85);
+  transition:
+    opacity 0.22s ease,
+    transform 0.3s ease;
+}
+
+.theme-icon.active {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.theme-icon-wrapper.rotating .theme-icon {
+  animation: icon-rotate 0.62s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes icon-rotate {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  55% {
+    transform: rotate(170deg) scale(1.05);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .theme-icon-wrapper.rotating .theme-icon {
+    animation: none;
+  }
+
+  .theme-icon,
+  .theme-icon-wrapper {
+    transition: none;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Milkdown/index.vue b/antdv-next-admin/src/components/Milkdown/index.vue
new file mode 100644
index 0000000..cbc1fe3
--- /dev/null
+++ b/antdv-next-admin/src/components/Milkdown/index.vue
@@ -0,0 +1,305 @@
+<template>
+  <div class="milkdown-editor" :class="{ dark: isDark }">
+    <div ref="editorRef" class="milkdown-container" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Editor, rootCtx, defaultValueCtx, editorViewOptionsCtx } from '@milkdown/core';
+import { clipboard } from '@milkdown/plugin-clipboard';
+import { history } from '@milkdown/plugin-history';
+import { listener, listenerCtx } from '@milkdown/plugin-listener';
+import { prism } from '@milkdown/plugin-prism';
+import { commonmark } from '@milkdown/preset-commonmark';
+import { gfm } from '@milkdown/preset-gfm';
+import { nord } from '@milkdown/theme-nord';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+
+interface Props {
+  modelValue?: string;
+  placeholder?: string;
+  readonly?: boolean;
+  height?: number | string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '',
+  readonly: false,
+  height: 400,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  change: [value: string];
+}>();
+
+const editorRef = ref<HTMLElement>();
+const editorInstance = ref<Editor>();
+const isDark = ref(false);
+
+// 检测暗色主题
+const checkDarkTheme = () => {
+  isDark.value = document.documentElement.classList.contains('dark');
+};
+
+onMounted(async () => {
+  if (!editorRef.value) return;
+
+  checkDarkTheme();
+
+  const editor = await Editor.make()
+    .config((ctx) => {
+      ctx.set(rootCtx, editorRef.value);
+      ctx.set(defaultValueCtx, props.modelValue);
+
+      // 配置编辑器视图
+      ctx.update(editorViewOptionsCtx, (prev) => ({
+        ...prev,
+        editable: () => !props.readonly,
+      }));
+
+      // 监听内容变化
+      ctx.get(listenerCtx).markdownUpdated((_editorCtx, markdown, prevMarkdown) => {
+        if (markdown !== prevMarkdown) {
+          emit('update:modelValue', markdown);
+          emit('change', markdown);
+        }
+      });
+    });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const editorWithPlugins = (editor as any)
+    .use(nord)
+    .use(commonmark)
+    .use(gfm)
+    .use(history)
+    .use(clipboard)
+    .use(listener)
+    .use(prism);
+
+  const finalEditor = await editorWithPlugins.create();
+
+  editorInstance.value = finalEditor as Editor;
+});
+
+onUnmounted(() => {
+  editorInstance.value?.destroy();
+});
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (
+      editorInstance.value &&
+      newValue !==
+        editorInstance.value.action((ctx) => {
+          return ctx.get(defaultValueCtx);
+        })
+    ) {
+      editorInstance.value.action((ctx) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const view = (ctx as any).editorView;
+        if (view) {
+          const state = view.state;
+          const tr = state.tr.replaceWith(0, state.doc.content.size, state.schema.text(newValue));
+          view.dispatch(tr);
+        }
+      });
+    }
+  },
+);
+
+// 监听只读状态
+watch(
+  () => props.readonly,
+  (readonly) => {
+    editorInstance.value?.action((ctx) => {
+      ctx.update(editorViewOptionsCtx, (prev) => ({
+        ...prev,
+        editable: () => !readonly,
+      }));
+    });
+  },
+);
+</script>
+
+<style scoped lang="scss">
+.milkdown-editor {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  overflow: hidden;
+  background: var(--color-bg-container);
+
+  &.dark {
+    :deep(.milkdown) {
+      --nord0: #2e3440;
+      --nord1: #3b4252;
+      --nord2: #434c5e;
+      --nord3: #4c566a;
+      --nord4: #d8dee9;
+      --nord5: #e5e9f0;
+      --nord6: #eceff4;
+      --nord7: #8fbcbb;
+      --nord8: #88c0d0;
+      --nord9: #81a1c1;
+      --nord10: #5e81ac;
+      --nord11: #bf616a;
+      --nord12: #d08770;
+      --nord13: #ebcb8b;
+      --nord14: #a3be8c;
+      --nord15: #b48ead;
+    }
+  }
+}
+
+.milkdown-container {
+  :deep(.milkdown) {
+    padding: 16px;
+    min-height: v-bind(height + 'px');
+
+    // 编辑器样式覆盖
+    .editor {
+      min-height: inherit;
+      outline: none;
+    }
+
+    // 段落
+    p {
+      margin: 0.75em 0;
+      line-height: 1.6;
+    }
+
+    // 标题
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 1em 0 0.5em;
+      font-weight: 600;
+      line-height: 1.25;
+    }
+
+    h1 {
+      font-size: 2em;
+    }
+    h2 {
+      font-size: 1.5em;
+    }
+    h3 {
+      font-size: 1.25em;
+    }
+    h4 {
+      font-size: 1em;
+    }
+    h5 {
+      font-size: 0.875em;
+    }
+    h6 {
+      font-size: 0.85em;
+    }
+
+    // 列表
+    ul,
+    ol {
+      padding-left: 1.5em;
+      margin: 0.75em 0;
+    }
+
+    li {
+      margin: 0.25em 0;
+    }
+
+    // 引用
+    blockquote {
+      border-left: 4px solid var(--color-primary);
+      padding-left: 1em;
+      margin: 1em 0;
+      color: var(--color-text-secondary);
+      font-style: italic;
+    }
+
+    // 代码
+    code {
+      background: var(--color-bg-layout);
+      padding: 0.2em 0.4em;
+      border-radius: 3px;
+      font-size: 0.9em;
+      font-family: 'Courier New', monospace;
+    }
+
+    pre {
+      background: var(--color-bg-layout);
+      padding: 1em;
+      border-radius: var(--radius-base);
+      overflow-x: auto;
+      margin: 1em 0;
+
+      code {
+        background: none;
+        padding: 0;
+      }
+    }
+
+    // 链接
+    a {
+      color: var(--color-primary);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    // 图片
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: var(--radius-base);
+    }
+
+    // 表格
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 1em 0;
+
+      th,
+      td {
+        border: 1px solid var(--color-border);
+        padding: 8px 12px;
+        text-align: left;
+      }
+
+      th {
+        background: var(--color-bg-layout);
+        font-weight: 600;
+      }
+    }
+
+    // 分割线
+    hr {
+      border: none;
+      border-top: 1px solid var(--color-border);
+      margin: 1.5em 0;
+    }
+
+    // 任务列表
+    .task-list-item {
+      list-style: none;
+
+      input {
+        margin-right: 0.5em;
+      }
+    }
+
+    // 选中样式
+    ::selection {
+      background: var(--color-primary-deprecated-l-35);
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Permission/PermissionButton.vue b/antdv-next-admin/src/components/Permission/PermissionButton.vue
new file mode 100644
index 0000000..1e8709f
--- /dev/null
+++ b/antdv-next-admin/src/components/Permission/PermissionButton.vue
@@ -0,0 +1,34 @@
+<template>
+  <slot v-if="hasPermission" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { usePermission } from '@/composables/usePermission';
+
+interface Props {
+  permission?: string | string[];
+  requireAll?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  requireAll: false,
+});
+
+const { canAll, canAny } = usePermission();
+
+const hasPermission = computed(() => {
+  if (!props.permission) {
+    return true;
+  }
+
+  const permissions = Array.isArray(props.permission) ? props.permission : [props.permission];
+
+  if (props.requireAll) {
+    return canAll(permissions);
+  } else {
+    return canAny(permissions);
+  }
+});
+</script>
diff --git a/antdv-next-admin/src/components/Pro/ProChart/index.vue b/antdv-next-admin/src/components/Pro/ProChart/index.vue
new file mode 100644
index 0000000..cabbd41
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProChart/index.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="pro-chart">
+    <div v-if="title || subTitle || $slots.extra" class="pro-chart-header">
+      <div>
+        <h3 v-if="title" class="pro-chart-title">{{ title }}</h3>
+        <p v-if="subTitle" class="pro-chart-subtitle">{{ subTitle }}</p>
+      </div>
+      <slot name="extra" />
+    </div>
+    <div class="pro-chart-body" :style="{ height: normalizedHeight }">
+      <a-spin v-if="loading" class="pro-chart-spin" />
+      <v-chart
+        v-else
+        :option="mergedOption"
+        :theme="isDark ? 'dark' : undefined"
+        autoresize
+        class="pro-chart-canvas"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProChartType } from "@/types/pro";
+
+import { LineChart, BarChart, PieChart, RadarChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  RadarComponent,
+} from "echarts/components";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { computed } from "vue";
+import VChart from "vue-echarts";
+
+import { useThemeStore } from "@/stores/theme";
+
+use([
+  CanvasRenderer,
+  LineChart,
+  BarChart,
+  PieChart,
+  RadarChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  RadarComponent,
+]);
+
+interface ChartItem {
+  name: string;
+  value: number;
+  max?: number;
+}
+
+interface Props {
+  type: ProChartType;
+  data: ChartItem[];
+  height?: number | string;
+  title?: string;
+  subTitle?: string;
+  loading?: boolean;
+  option?: Record<string, unknown>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: 300,
+  loading: false,
+});
+
+const themeStore = useThemeStore();
+const isDark = computed(() => themeStore.isDark);
+
+const normalizedHeight = computed(() => {
+  return typeof props.height === "number" ? `${props.height}px` : props.height;
+});
+
+const generatedOption = computed(() => {
+  const { type, data } = props;
+
+  if (type === "pie" || type === "donut") {
+    return {
+      tooltip: { trigger: "item" },
+      legend: { bottom: 0 },
+      series: [
+        {
+          type: "pie",
+          radius: type === "donut" ? ["45%", "70%"] : "70%",
+          data: data.map((item) => ({ name: item.name, value: item.value })),
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
+    };
+  }
+
+  if (type === "radar") {
+    const indicator = data.map((item) => ({
+      name: item.name,
+      max: item.max ?? 100,
+    }));
+    return {
+      tooltip: {},
+      radar: { indicator },
+      series: [
+        {
+          type: "radar",
+          data: [{ value: data.map((item) => item.value) }],
+        },
+      ],
+    };
+  }
+
+  // line, bar, area
+  const categories = data.map((item) => item.name);
+  const values = data.map((item) => item.value);
+
+  return {
+    tooltip: { trigger: "axis" },
+    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+    xAxis: { type: "category", data: categories },
+    yAxis: { type: "value" },
+    series: [
+      {
+        type: type === "area" ? "line" : type,
+        data: values,
+        smooth: type === "line" || type === "area",
+        areaStyle: type === "area" ? {} : undefined,
+      },
+    ],
+  };
+});
+
+const mergedOption = computed(() => {
+  if (props.option) {
+    return { ...generatedOption.value, ...props.option };
+  }
+  return generatedOption.value;
+});
+</script>
+
+<style scoped lang="scss">
+.pro-chart {
+  .pro-chart-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    .pro-chart-title {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text-primary);
+    }
+
+    .pro-chart-subtitle {
+      margin: 4px 0 0;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+  }
+
+  .pro-chart-body {
+    position: relative;
+  }
+
+  .pro-chart-spin {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .pro-chart-canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProCodeEditor/index.vue b/antdv-next-admin/src/components/Pro/ProCodeEditor/index.vue
new file mode 100644
index 0000000..06e4881
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProCodeEditor/index.vue
@@ -0,0 +1,514 @@
+<template>
+  <div
+    class="pro-code-editor"
+    :class="{
+      'is-disabled': disabled,
+      'is-readonly': readonly,
+      'is-dark': computedTheme === 'dark',
+    }"
+  >
+    <div v-if="$slots.toolbar || showDefaultToolbar" class="editor-toolbar">
+      <slot name="toolbar">
+        <a-space v-if="showDefaultToolbar" size="small">
+          <a-select
+            v-if="showLanguageSelect"
+            :value="language"
+            size="small"
+            style="width: 120px"
+            :options="languageOptions"
+            @change="handleLanguageChange"
+          />
+          <a-button
+            v-if="language === 'json' && !readonly"
+            size="small"
+            @click="formatJson"
+          >
+            {{ $t("codeEditor.format") }}
+          </a-button>
+          <a-button
+            v-if="language === 'json' && !readonly"
+            size="small"
+            @click="minifyJson"
+          >
+            {{ $t("codeEditor.minify") }}
+          </a-button>
+          <a-button size="small" @click="copyToClipboard">
+            {{ $t("codeEditor.copy") }}
+          </a-button>
+        </a-space>
+      </slot>
+    </div>
+    <div class="editor-container" :style="containerStyle">
+      <codemirror
+        :model-value="modelValue"
+        :style="editorStyle"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :extensions="extensions"
+        @update="handleUpdate"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Codemirror } from "vue-codemirror";
+import type { Extension } from "@codemirror/state";
+import {
+  keymap,
+  lineNumbers,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  drawSelection,
+  dropCursor,
+  rectangularSelection,
+  crosshairCursor,
+  highlightActiveLine,
+} from "@codemirror/view";
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} from "@codemirror/commands";
+import {
+  indentOnInput,
+  syntaxHighlighting,
+  defaultHighlightStyle,
+  bracketMatching,
+  foldGutter,
+} from "@codemirror/language";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
+import { dracula } from "@uiw/codemirror-theme-dracula";
+import { material, materialDark } from "@uiw/codemirror-theme-material";
+import { monokai } from "@uiw/codemirror-theme-monokai";
+import { nord } from "@uiw/codemirror-theme-nord";
+import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
+import { solarizedLight, solarizedDark } from "@uiw/codemirror-theme-solarized";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
+import { javascript } from "@codemirror/lang-javascript";
+import { html } from "@codemirror/lang-html";
+import { css } from "@codemirror/lang-css";
+import { markdown } from "@codemirror/lang-markdown";
+import { sql } from "@codemirror/lang-sql";
+import { yaml } from "@codemirror/lang-yaml";
+import { xml } from "@codemirror/lang-xml";
+import { python } from "@codemirror/lang-python";
+import { java } from "@codemirror/lang-java";
+import { php } from "@codemirror/lang-php";
+import { rust } from "@codemirror/lang-rust";
+import { go } from "@codemirror/lang-go";
+import { linter } from "@codemirror/lint";
+
+import { message } from "antdv-next";
+import { computed, ref, watch, type CSSProperties, type PropType } from "vue";
+
+import { $t } from "@/locales";
+import { useThemeStore } from "@/stores/theme";
+
+defineOptions({
+  name: "ProCodeEditor",
+});
+
+export type SupportedLanguage =
+  | "json"
+  | "javascript"
+  | "typescript"
+  | "html"
+  | "css"
+  | "markdown"
+  | "sql"
+  | "yaml"
+  | "xml"
+  | "python"
+  | "java"
+  | "php"
+  | "rust"
+  | "go";
+
+export type EditorTheme =
+  | "auto"
+  | "light"
+  | "dark"
+  | "github"
+  | "githubDark"
+  | "dracula"
+  | "material"
+  | "materialDark"
+  | "monokai"
+  | "nord"
+  | "tokyoNight"
+  | "solarized"
+  | "solarizedDark";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  language: {
+    type: String as PropType<SupportedLanguage>,
+    default: "json",
+  },
+  theme: {
+    type: String as PropType<EditorTheme>,
+    default: "auto",
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  height: {
+    type: [Number, String] as PropType<number | "auto">,
+    default: 300,
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  lineNumbers: {
+    type: Boolean,
+    default: true,
+  },
+  foldGutter: {
+    type: Boolean,
+    default: true,
+  },
+  showToolbar: {
+    type: Boolean,
+    default: false,
+  },
+  showLanguageSelect: {
+    type: Boolean,
+    default: false,
+  },
+  formatOnBlur: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+  (e: "change", value: string): void;
+  (e: "focus"): void;
+  (e: "blur"): void;
+  (e: "languageChange", language: SupportedLanguage): void;
+}>();
+
+const themeStore = useThemeStore();
+const emitLanguage = ref<SupportedLanguage>(props.language);
+
+const languageOptions: Array<{ label: string; value: SupportedLanguage }> = [
+  { label: "JSON", value: "json" },
+  { label: "JavaScript", value: "javascript" },
+  { label: "TypeScript", value: "typescript" },
+  { label: "HTML", value: "html" },
+  { label: "CSS", value: "css" },
+  { label: "Markdown", value: "markdown" },
+  { label: "SQL", value: "sql" },
+  { label: "YAML", value: "yaml" },
+  { label: "XML", value: "xml" },
+  { label: "Python", value: "python" },
+  { label: "Java", value: "java" },
+  { label: "PHP", value: "php" },
+  { label: "Rust", value: "rust" },
+  { label: "Go", value: "go" },
+];
+
+const computedTheme = computed<"light" | "dark">(() => {
+  if (props.theme === "auto") {
+    return themeStore.isDark ? "dark" : "light";
+  }
+  const lightThemes = ["light", "github", "material", "solarized"];
+  return lightThemes.includes(props.theme) ? "light" : "dark";
+});
+
+const showDefaultToolbar = computed(() => {
+  return (
+    props.showToolbar || props.showLanguageSelect || props.language === "json"
+  );
+});
+
+const containerStyle = computed<CSSProperties>(() => {
+  if (props.height === "auto") {
+    return {
+      height: "auto",
+      minHeight: "100px",
+    };
+  }
+  return {
+    height:
+      typeof props.height === "number" ? `${props.height}px` : props.height,
+  };
+});
+
+const editorStyle = computed<CSSProperties>(() => ({
+  height: "100%",
+  fontSize: "13px",
+}));
+
+function getLanguageExtension(lang: SupportedLanguage) {
+  switch (lang) {
+    case "json":
+      return json();
+    case "javascript":
+      return javascript();
+    case "typescript":
+      return javascript({ typescript: true });
+    case "html":
+      return html();
+    case "css":
+      return css();
+    case "markdown":
+      return markdown();
+    case "sql":
+      return sql();
+    case "yaml":
+      return yaml();
+    case "xml":
+      return xml();
+    case "python":
+      return python();
+    case "java":
+      return java();
+    case "php":
+      return php();
+    case "rust":
+      return rust();
+    case "go":
+      return go();
+    default:
+      return json();
+  }
+}
+
+function getThemeExtension(theme: EditorTheme): Extension[] {
+  const themeMap: Record<string, Extension | undefined> = {
+    github: githubLight,
+    githubDark,
+    dracula,
+    material,
+    materialDark,
+    monokai,
+    nord,
+    tokyoNight,
+    solarized: solarizedLight,
+    solarizedDark,
+  };
+
+  if (theme === "light") return [];
+  if (theme === "dark") return [oneDark];
+
+  const ext = themeMap[theme];
+  return ext ? [ext] : [];
+}
+
+const baseExtensions = computed<Extension[]>(() => {
+  const ext: Extension[] = [
+    highlightSpecialChars(),
+    history(),
+    drawSelection(),
+    dropCursor(),
+    rectangularSelection(),
+    crosshairCursor(),
+    highlightActiveLine(),
+    keymap.of([
+      ...closeBracketsKeymap,
+      ...defaultKeymap,
+      ...historyKeymap,
+      indentWithTab,
+    ]),
+    indentOnInput(),
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    bracketMatching(),
+    closeBrackets(),
+  ];
+
+  if (props.lineNumbers) {
+    ext.push(lineNumbers());
+    ext.push(highlightActiveLineGutter());
+  }
+
+  if (props.foldGutter) {
+    ext.push(foldGutter());
+  }
+
+  if (props.theme === "auto") {
+    if (themeStore.isDark) ext.push(oneDark);
+  } else if (props.theme === "dark") {
+    ext.push(oneDark);
+  } else {
+    ext.push(...getThemeExtension(props.theme));
+  }
+
+  ext.push(getLanguageExtension(emitLanguage.value));
+
+  if (emitLanguage.value === "json") {
+    ext.push(linter(jsonParseLinter()));
+  }
+
+  return ext;
+});
+
+const extensions = computed(() => baseExtensions.value);
+
+function handleUpdate(viewUpdate: {
+  state: { doc: { toString: () => string } };
+}) {
+  if (props.readonly || props.disabled) return;
+  const value = viewUpdate.state.doc.toString();
+  emit("update:modelValue", value);
+  emit("change", value);
+}
+
+function handleFocus() {
+  emit("focus");
+}
+
+function handleBlur() {
+  if (props.formatOnBlur && emitLanguage.value === "json" && props.modelValue) {
+    try {
+      const parsed = JSON.parse(props.modelValue);
+      const formatted = JSON.stringify(parsed, null, 2);
+      emit("update:modelValue", formatted);
+      emit("change", formatted);
+    } catch (error) {
+      console.warn("JSON format on blur failed:", error);
+    }
+  }
+  emit("blur");
+}
+
+function handleLanguageChange(lang: SupportedLanguage) {
+  emitLanguage.value = lang;
+  emit("languageChange", lang);
+}
+
+function formatJson() {
+  if (emitLanguage.value !== "json" || !props.modelValue) return;
+  try {
+    const parsed = JSON.parse(props.modelValue);
+    const formatted = JSON.stringify(parsed, null, 2);
+    emit("update:modelValue", formatted);
+    emit("change", formatted);
+    message.success($t("codeEditor.formatSuccess"));
+  } catch (error) {
+    console.warn("JSON format failed:", error);
+    message.error($t("codeEditor.jsonError"));
+  }
+}
+
+function minifyJson() {
+  if (emitLanguage.value !== "json" || !props.modelValue) return;
+  try {
+    const parsed = JSON.parse(props.modelValue);
+    const minified = JSON.stringify(parsed);
+    emit("update:modelValue", minified);
+    emit("change", minified);
+    message.success($t("codeEditor.minifySuccess"));
+  } catch (error) {
+    console.warn("JSON minify failed:", error);
+    message.error($t("codeEditor.jsonError"));
+  }
+}
+
+async function copyToClipboard() {
+  if (!props.modelValue) return;
+  try {
+    await navigator.clipboard.writeText(props.modelValue);
+    message.success($t("codeEditor.copySuccess"));
+  } catch (error) {
+    console.warn("Copy to clipboard failed:", error);
+    message.error($t("codeEditor.copyFailed"));
+  }
+}
+
+watch(
+  () => props.language,
+  (newLang) => {
+    emitLanguage.value = newLang;
+  },
+);
+</script>
+
+<style scoped lang="scss">
+.pro-code-editor {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--color-bg-container);
+
+  &.is-dark {
+    background: #1e1e1e;
+    border-color: #3c3c3c;
+  }
+
+  &.is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border-secondary);
+  background: var(--color-bg-layout);
+
+  .is-dark & {
+    background: #252526;
+    border-bottom-color: #3c3c3c;
+  }
+}
+
+.editor-container {
+  overflow: auto;
+
+  :deep(.cm-editor) {
+    height: 100%;
+    outline: none;
+  }
+
+  :deep(.cm-scroller) {
+    font-family: "Monaco", "Menlo", "Consolas", monospace;
+  }
+
+  :deep(.cm-content) {
+    padding: 8px 0;
+  }
+
+  :deep(.cm-line) {
+    padding: 0 8px;
+  }
+
+  :deep(.cm-placeholder) {
+    color: var(--color-text-quaternary);
+    font-style: italic;
+  }
+}
+
+.is-readonly {
+  .editor-container {
+    :deep(.cm-content) {
+      cursor: default;
+    }
+
+    :deep(.cm-cursor) {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProDescriptions/index.vue b/antdv-next-admin/src/components/Pro/ProDescriptions/index.vue
new file mode 100644
index 0000000..6ab9a43
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProDescriptions/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <a-descriptions
+    :column="column"
+    :bordered="bordered"
+    :size="size"
+    :title="title"
+    :layout="layout"
+  >
+    <a-descriptions-item
+      v-for="item in columns"
+      :key="item.dataIndex"
+      :label="item.label"
+      :span="item.span"
+    >
+      <template v-if="item.render">
+        <component :is="item.render(getValue(item), data)" />
+      </template>
+      <template v-else-if="item.valueType">
+        <ValueTypeRender
+          :value="getValue(item)"
+          :type="item.valueType"
+          :enum="item.valueEnum"
+          :record="data"
+          :copyable="item.copyable"
+          :value-type-props="item.valueTypeProps ?? {}"
+        />
+      </template>
+      <template v-else>
+        {{ getValue(item) ?? "-" }}
+      </template>
+    </a-descriptions-item>
+  </a-descriptions>
+</template>
+
+<script setup lang="ts">
+import type { ProDescriptionItem } from "@/types/pro";
+
+import ValueTypeRender from "../ProTable/ValueTypeRender.vue";
+
+interface Props {
+  columns: ProDescriptionItem[];
+  data: Record<string, unknown>;
+  column?: number;
+  bordered?: boolean;
+  size?: "default" | "middle" | "small";
+  title?: string;
+  layout?: "horizontal" | "vertical";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  column: 2,
+  bordered: false,
+  size: "default",
+  layout: "horizontal",
+});
+
+const getValue = (item: ProDescriptionItem) => {
+  const keys = item.dataIndex.split(".");
+  let val: unknown = props.data;
+  for (const key of keys) {
+    if (val == null) return undefined;
+    val = (val as Record<string, unknown>)[key];
+  }
+  return val;
+};
+</script>
diff --git a/antdv-next-admin/src/components/Pro/ProDetail/index.vue b/antdv-next-admin/src/components/Pro/ProDetail/index.vue
new file mode 100644
index 0000000..5ae577a
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProDetail/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="pro-detail">
+    <!-- Header -->
+    <div
+      v-if="title || subTitle || tags?.length || $slots.extra"
+      class="pro-detail-header"
+    >
+      <div class="pro-detail-header-main">
+        <h3 v-if="title" class="pro-detail-title">{{ title }}</h3>
+        <span v-if="subTitle" class="pro-detail-subtitle">{{ subTitle }}</span>
+        <a-tag v-for="tag in tags" :key="tag.text" :color="tag.color">{{
+          tag.text
+        }}</a-tag>
+      </div>
+      <div v-if="$slots.extra" class="pro-detail-extra">
+        <slot name="extra" />
+      </div>
+    </div>
+
+    <!-- Descriptions -->
+    <ProDescriptions
+      v-if="descriptions?.length && data"
+      :columns="descriptions"
+      :data="data"
+      :column="descriptionColumn"
+      bordered
+      size="small"
+      class="pro-detail-descriptions"
+    />
+
+    <!-- Tabs -->
+    <a-tabs
+      v-if="tabs?.length"
+      v-model:active-key="currentTab"
+      size="small"
+      class="pro-detail-tabs"
+    >
+      <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.label">
+        <slot :name="`tab-${tab.key}`" />
+      </a-tab-pane>
+    </a-tabs>
+
+    <!-- Default slot (when no tabs) -->
+    <div v-if="!tabs?.length && $slots.default" class="pro-detail-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProDescriptionItem, ProDetailTab } from "@/types/pro";
+
+import { ref, watch } from "vue";
+
+import ProDescriptions from "../ProDescriptions/index.vue";
+
+interface Props {
+  title?: string;
+  subTitle?: string;
+  tags?: Array<{ text: string; color?: string }>;
+  descriptions?: ProDescriptionItem[];
+  data?: Record<string, unknown>;
+  descriptionColumn?: number;
+  tabs?: ProDetailTab[];
+  activeTab?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  descriptionColumn: 2,
+});
+
+const emit = defineEmits(["update:activeTab"]);
+
+const currentTab = ref(props.activeTab || props.tabs?.[0]?.key || "");
+
+watch(
+  () => props.activeTab,
+  (val) => {
+    if (val) currentTab.value = val;
+  },
+);
+
+watch(currentTab, (val) => {
+  emit("update:activeTab", val);
+});
+</script>
+
+<style scoped lang="scss">
+.pro-detail {
+  .pro-detail-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
+
+    .pro-detail-header-main {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .pro-detail-title {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .pro-detail-subtitle {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+  }
+
+  .pro-detail-descriptions {
+    margin-bottom: 16px;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProForm/FormItemRender.vue b/antdv-next-admin/src/components/Pro/ProForm/FormItemRender.vue
new file mode 100644
index 0000000..487e161
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProForm/FormItemRender.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="form-item-render">
+    <!-- Input -->
+    <a-input
+      v-if="item.type === 'input'"
+      v-model:value="modelValue"
+      :placeholder="resolveInputPlaceholder()"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Password -->
+    <a-input-password
+      v-else-if="item.type === 'password'"
+      v-model:value="modelValue"
+      :placeholder="resolveInputPlaceholder()"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Textarea -->
+    <a-textarea
+      v-else-if="item.type === 'textarea'"
+      v-model:value="modelValue"
+      :placeholder="resolveInputPlaceholder()"
+      :rows="4"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Number -->
+    <a-input-number
+      v-else-if="item.type === 'number'"
+      v-model:value="modelValue"
+      :placeholder="resolveInputPlaceholder()"
+      style="width: 100%"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Select -->
+    <a-select
+      v-else-if="item.type === 'select'"
+      v-model:value="modelValue"
+      :placeholder="resolveSelectPlaceholder()"
+      :options="resolvedOptions"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Radio -->
+    <a-radio-group
+      v-else-if="item.type === 'radio'"
+      v-model:value="modelValue"
+      :options="resolvedOptions"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Checkbox -->
+    <a-checkbox-group
+      v-else-if="item.type === 'checkbox'"
+      v-model:value="modelValue"
+      :options="resolvedOptions"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Switch -->
+    <a-switch
+      v-else-if="item.type === 'switch'"
+      v-model:checked="modelValue"
+      v-bind="item.props"
+      @update:checked="handleChange"
+    />
+
+    <!-- Date Picker -->
+    <a-date-picker
+      v-else-if="item.type === 'datePicker'"
+      v-model:value="modelValue"
+      :placeholder="resolveSelectPlaceholder()"
+      style="width: 100%"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Time Picker -->
+    <a-time-picker
+      v-else-if="item.type === 'timePicker'"
+      v-model:value="modelValue"
+      :placeholder="resolveSelectPlaceholder()"
+      style="width: 100%"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Date Range -->
+    <a-range-picker
+      v-else-if="item.type === 'dateRange'"
+      v-model:value="modelValue"
+      style="width: 100%"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Upload -->
+    <ProUpload
+      v-else-if="item.type === 'upload'"
+      :value="modelValue"
+      mode="button"
+      :button-text="item.placeholder"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Image Upload -->
+    <ProUpload
+      v-else-if="item.type === 'imageUpload'"
+      :value="modelValue"
+      mode="image"
+      :button-text="item.placeholder"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Avatar Upload -->
+    <ProUpload
+      v-else-if="item.type === 'avatarUpload'"
+      :value="modelValue"
+      mode="avatar"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Slider -->
+    <a-slider
+      v-else-if="item.type === 'slider'"
+      v-model:value="modelValue"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Rate -->
+    <a-rate
+      v-else-if="item.type === 'rate'"
+      v-model:value="modelValue"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Cascader -->
+    <a-cascader
+      v-else-if="item.type === 'cascader'"
+      v-model:value="modelValue"
+      :placeholder="resolveSelectPlaceholder()"
+      :options="resolvedOptions"
+      style="width: 100%"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Tree Select -->
+    <a-tree-select
+      v-else-if="item.type === 'treeSelect'"
+      v-model:value="modelValue"
+      :placeholder="resolveSelectPlaceholder()"
+      :tree-data="resolvedOptions"
+      style="width: 100%"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+
+    <!-- Custom -->
+    <component
+      v-else-if="item.type === 'custom' && item.render"
+      :is="item.render"
+      v-model:value="modelValue"
+      @update:value="handleChange"
+    />
+
+    <!-- Default -->
+    <a-input
+      v-else
+      v-model:value="modelValue"
+      :placeholder="resolveInputPlaceholder()"
+      v-bind="item.props"
+      @update:value="handleChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProFormItem } from "@/types/pro";
+
+import { ref, watch, computed } from "vue";
+
+import { $t } from "@/locales";
+
+import ProUpload from "../ProUpload/index.vue";
+
+interface Props {
+  value?: unknown;
+  item: ProFormItem;
+  formData?: Record<string, unknown>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formData: () => ({}),
+});
+const emit = defineEmits(["update:value", "change"]);
+
+const modelValue = ref(props.value ?? props.item.initialValue);
+
+const resolvedOptions = computed(() => {
+  if (typeof props.item.options === "function") {
+    return props.item.options(props.formData);
+  }
+  return props.item.options;
+});
+
+watch(
+  () => props.value,
+  (val) => {
+    modelValue.value = val;
+  },
+);
+
+watch(modelValue, (val) => {
+  emit("update:value", val);
+  emit("change", val);
+});
+
+const handleChange = (value: unknown) => {
+  emit("update:value", value);
+  emit("change", value);
+};
+
+const resolveLabel = () => {
+  return String(props.item.label ?? "");
+};
+
+const resolveInputPlaceholder = () => {
+  return (
+    props.item.placeholder ||
+    $t("proForm.enterPlaceholder", { label: resolveLabel() })
+  );
+};
+
+const resolveSelectPlaceholder = () => {
+  return (
+    props.item.placeholder ||
+    $t("proForm.selectPlaceholder", { label: resolveLabel() })
+  );
+};
+</script>
diff --git a/antdv-next-admin/src/components/Pro/ProForm/index.vue b/antdv-next-admin/src/components/Pro/ProForm/index.vue
new file mode 100644
index 0000000..f8dd093
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProForm/index.vue
@@ -0,0 +1,192 @@
+<template>
+  <a-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    v-bind="layout"
+    @finish="handleFinish"
+    class="pro-form"
+  >
+    <a-row :gutter="grid?.gutter || 16">
+      <a-col
+        v-for="item in visibleFormItems"
+        :key="item.name"
+        :span="getColSpan(item)"
+      >
+        <a-form-item
+          :name="item.name"
+          :label="item.label"
+          :tooltip="item.tooltip"
+          :dependencies="item.dependencies"
+          :value-prop-name="item.valuePropName || 'value'"
+          :class="{ 'form-item-required': item.required }"
+        >
+          <FormItemRender
+            v-model:value="formData[item.name]"
+            :item="item"
+            :form-data="formData"
+          />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-form-item
+      v-if="$slots.footer"
+      :wrapper-col="{ offset: layout.labelCol?.span || 0 }"
+      class="form-footer"
+    >
+      <slot name="footer"></slot>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup lang="ts">
+import type { ProFormItem, ProFormLayout, ProFormGrid } from "@/types/pro";
+
+import { ref, computed, watch } from "vue";
+
+import { $t } from "@/locales";
+
+import FormItemRender from "./FormItemRender.vue";
+
+interface Props {
+  formItems: ProFormItem[];
+  initialValues?: Record<string, unknown>;
+  layout?: ProFormLayout;
+  grid?: ProFormGrid;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: () => ({
+    labelCol: { span: 6 },
+    wrapperCol: { span: 18 },
+    layout: "horizontal",
+  }),
+  grid: () => ({
+    gutter: 16,
+    cols: 1,
+  }),
+});
+
+const emit = defineEmits(["submit", "valuesChange", "finish"]);
+
+const formRef = ref();
+const formData = ref<Record<string, unknown>>({});
+
+// Computed
+const visibleFormItems = computed(() => {
+  return props.formItems.filter((item) => {
+    if (typeof item.hidden === "function") return !item.hidden(formData.value);
+    return !item.hidden;
+  });
+});
+
+const formRules = computed(() => {
+  const rules: Record<string, unknown[]> = {};
+  props.formItems.forEach((item) => {
+    const itemRules = [];
+
+    // 如果字段标记为 required，自动添加 required 规则
+    if (item.required) {
+      itemRules.push({
+        required: true,
+        message: $t("proForm.enterPlaceholder", {
+          label: String(item.label ?? ""),
+        }),
+      });
+    }
+
+    // 添加自定义规则
+    if (item.rules) {
+      itemRules.push(
+        ...(Array.isArray(item.rules) ? item.rules : [item.rules]),
+      );
+    }
+
+    if (itemRules.length > 0) {
+      rules[item.name] = itemRules;
+    }
+  });
+  return rules;
+});
+
+// Methods
+const getColSpan = (item: ProFormItem) => {
+  if (item.colSpan) {
+    return (24 / (props.grid?.cols || 1)) * item.colSpan;
+  }
+  return 24 / (props.grid?.cols || 1);
+};
+
+const handleFinish = (values: Record<string, unknown>) => {
+  emit("finish", values);
+  emit("submit", values);
+};
+
+// Watch initial values
+watch(
+  () => props.initialValues,
+  (values) => {
+    if (values) {
+      formData.value = { ...values };
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+// Expose methods
+const validate = async () => {
+  return formRef.value?.validate();
+};
+
+const resetFields = () => {
+  formRef.value?.resetFields();
+  formData.value = props.initialValues ? { ...props.initialValues } : {};
+};
+
+const setFieldsValue = (values: Record<string, unknown>) => {
+  formData.value = { ...formData.value, ...values };
+};
+
+const getFieldsValue = () => {
+  return formData.value;
+};
+
+defineExpose({
+  validate,
+  resetFields,
+  setFieldsValue,
+  getFieldsValue,
+});
+
+// Watch form data changes
+watch(
+  formData,
+  (values) => {
+    emit("valuesChange", values);
+  },
+  { deep: true },
+);
+</script>
+
+<style scoped lang="scss">
+.pro-form {
+  .form-item-required {
+    :deep(.ant-form-item-label > label::before) {
+      display: inline-block;
+      margin-right: 4px;
+      color: var(--color-error);
+      font-size: 14px;
+      font-family: SimSun, sans-serif;
+      line-height: 1;
+      content: "*";
+    }
+  }
+
+  .form-footer {
+    margin-top: var(--spacing-lg);
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid var(--color-border-secondary);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProModal/index.vue b/antdv-next-admin/src/components/Pro/ProModal/index.vue
new file mode 100644
index 0000000..c269c36
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProModal/index.vue
@@ -0,0 +1,990 @@
+<template>
+  <a-modal
+    v-bind="mergedModalBindings"
+    :open="isOpen"
+    :styles="mergedSemanticStyles"
+    :wrap-class-name="mergedWrapClassName"
+    :style="mergedModalStyle"
+    :title="null"
+    @update:open="handleUpdateOpen"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <template #title>
+      <div
+        class="pro-modal-titlebar"
+        :class="{ draggable: draggable && !isFullscreen }"
+        @mousedown="handleTitleMouseDown"
+      >
+        <div class="pro-modal-title-content">
+          <component :is="titleRenderComponent" />
+        </div>
+
+        <div
+          v-if="fullscreenable || showCloseButton"
+          class="pro-modal-title-actions"
+          @mousedown.stop
+        >
+          <a-tooltip
+            v-if="fullscreenable"
+            :title="
+              isFullscreen
+                ? $t('layout.exitFullscreen')
+                : $t('layout.fullscreen')
+            "
+          >
+            <button
+              type="button"
+              class="pro-modal-action-btn"
+              @click.stop="toggleFullscreen"
+            >
+              <component
+                :is="isFullscreen ? FullscreenExitOutlined : FullscreenOutlined"
+                :style="{ fontSize: '14px' }"
+              />
+            </button>
+          </a-tooltip>
+
+          <a-tooltip v-if="showCloseButton" :title="$t('common.close')">
+            <button
+              type="button"
+              class="pro-modal-action-btn"
+              :disabled="isCloseButtonDisabled"
+              @click.stop="handleCloseClick"
+            >
+              <CloseOutlined :style="{ fontSize: '14px' }" />
+            </button>
+          </a-tooltip>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="$slots.okText" #okText>
+      <slot name="okText" />
+    </template>
+
+    <template v-if="$slots.cancelText" #cancelText>
+      <slot name="cancelText" />
+    </template>
+
+    <template v-if="$slots.closeIcon" #closeIcon>
+      <slot name="closeIcon" />
+    </template>
+
+    <template v-if="$slots.modalRender" #modalRender="modalRenderScope">
+      <slot name="modalRender" v-bind="modalRenderScope" />
+    </template>
+
+    <template v-if="$slots.footer" #footer="footerScope">
+      <slot name="footer" v-bind="footerScope" />
+    </template>
+
+    <slot />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import type { ModalProps } from "antdv-next";
+import type { CSSProperties, VNodeChild } from "vue";
+
+import {
+  CloseOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
+} from "@antdv-next/icons";
+import {
+  computed,
+  defineComponent,
+  h,
+  isVNode,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  useAttrs,
+  useSlots,
+  watch,
+} from "vue";
+
+import { $t } from "@/locales";
+
+interface ProModalProps extends ModalProps {
+  draggable?: boolean;
+  resizable?: boolean;
+  fullscreenable?: boolean;
+  minWidth?: number;
+  minHeight?: number;
+}
+
+type ModalRect = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+type ResizeDirection = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+
+type DragState = {
+  startX: number;
+  startY: number;
+  startRect: ModalRect;
+};
+
+type ResizeState = {
+  direction: ResizeDirection;
+  startX: number;
+  startY: number;
+  startRect: ModalRect;
+};
+
+const EDGE_SIZE = 8;
+const DEFAULT_WIDTH = 520;
+const DEFAULT_HEIGHT = 320;
+const FULLSCREEN_TRANSITION_DURATION = 300;
+
+const props = withDefaults(defineProps<ProModalProps>(), {
+  draggable: true,
+  resizable: true,
+  fullscreenable: true,
+  minWidth: 360,
+  minHeight: 260,
+});
+
+const emit = defineEmits<{
+  (e: "ok", event: MouseEvent): void;
+  (e: "cancel", event: MouseEvent): void;
+  (e: "update:open", open: boolean): void;
+}>();
+
+const attrs = useAttrs();
+const slots = useSlots();
+
+const instanceWrapClassName = `pro-modal-wrap-${Math.random().toString(36).slice(2, 10)}`;
+
+const viewport = reactive({
+  width: typeof window !== "undefined" ? window.innerWidth : 0,
+  height: typeof window !== "undefined" ? window.innerHeight : 0,
+});
+
+const rect = reactive<ModalRect>({
+  left: 0,
+  top: 0,
+  width: DEFAULT_WIDTH,
+  height: DEFAULT_HEIGHT,
+});
+
+const rectReady = ref(false);
+const isFullscreen = ref(false);
+const isAnimating = ref(false);
+// Track if the modal has been moved/resized by user
+const isMoved = ref(false);
+const restoreRect = ref<ModalRect | null>(null);
+const dragState = ref<DragState | null>(null);
+const resizeState = ref<ResizeState | null>(null);
+
+let boundModalElement: HTMLElement | null = null;
+let isDocumentListening = false;
+let bodyUserSelectCache = "";
+let fullscreenAnimationTimer: number | undefined;
+
+const isOpen = computed(() => Boolean(props.open));
+const showCloseButton = computed(() => props.closable !== false);
+const isCloseButtonDisabled = computed(() => {
+  return typeof props.closable === "object" && Boolean(props.closable.disabled);
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const resolvedGetContainer = computed<any>(() => {
+  if (props.getContainer !== undefined) {
+    return props.getContainer;
+  }
+
+  return () => {
+    if (typeof document === "undefined") {
+      return false;
+    }
+    return document.body;
+  };
+});
+
+const titleRenderComponent = defineComponent({
+  name: "ProModalTitleRender",
+  setup() {
+    return () => {
+      const slotNodes = slots.title?.();
+      if (slotNodes && slotNodes.length > 0) {
+        return slotNodes;
+      }
+
+      const title = props.title;
+      if (isVNode(title)) {
+        return title;
+      }
+
+      if (typeof title === "function") {
+        return (title as () => VNodeChild)();
+      }
+
+      if (title === null || title === undefined || title === false) {
+        return null;
+      }
+
+      return h("span", String(title));
+    };
+  },
+});
+
+const modalPassThroughProps = computed<ModalProps>(() => {
+  const next = { ...props } as Record<string, unknown>;
+  delete next.draggable;
+  delete next.resizable;
+  delete next.fullscreenable;
+  delete next.minWidth;
+  delete next.minHeight;
+  delete next.open;
+  delete next.wrapClassName;
+  delete next.title;
+  delete next.width;
+  delete next.styles;
+  delete next.closable;
+  delete next.getContainer;
+  return next as ModalProps;
+});
+
+const mergedWrapClassName = computed(() => {
+  return [
+    props.wrapClassName,
+    "pro-modal-wrap",
+    instanceWrapClassName,
+    isFullscreen.value ? "pro-modal-fullscreen" : "",
+    isAnimating.value ? "pro-modal-animating" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+});
+
+const forwardedAttrs = computed(() => {
+  const next = { ...attrs } as Record<string, unknown>;
+  delete next.style;
+  delete next.wrapClassName;
+  delete next["wrap-class-name"];
+  return next;
+});
+
+const managedModalStyle = computed<CSSProperties>(() => {
+  if (!isOpen.value || !isMoved.value || !rectReady.value) {
+    return {};
+  }
+
+  return {
+    position: "fixed",
+    margin: "0",
+    maxWidth: `${viewport.width}px`,
+    paddingBottom: "0",
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    height: `${rect.height}px`,
+  };
+});
+
+const mergedModalStyle = computed(() => {
+  return [attrs.style as Record<string, unknown>, managedModalStyle.value];
+});
+
+const mergedModalBindings = computed(() => {
+  const controlledWidth =
+    isMoved.value && rectReady.value ? rect.width : props.width;
+
+  return {
+    ...modalPassThroughProps.value,
+    ...forwardedAttrs.value,
+    width: controlledWidth,
+    closable: false,
+    getContainer: resolvedGetContainer.value,
+  };
+});
+
+const mergedSemanticStyles = computed(() => {
+  const inputStyles = (props.styles || {}) as Record<string, unknown>;
+  const containerStyle =
+    (inputStyles.container as Record<string, unknown>) || {};
+  const bodyStyle = (inputStyles.body as Record<string, unknown>) || {};
+  return {
+    ...inputStyles,
+    container: {
+      ...containerStyle,
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      minHeight: 0,
+    },
+    body: {
+      ...bodyStyle,
+      flex: 1,
+      minHeight: 0,
+      overflow: "auto",
+    },
+  };
+});
+
+const updateViewport = () => {
+  viewport.width = window.innerWidth;
+  viewport.height = window.innerHeight;
+};
+
+const getModalElement = () => {
+  return document.querySelector(
+    `.${instanceWrapClassName} .ant-modal`,
+  ) as HTMLElement | null;
+};
+
+const clearFullscreenAnimationTimer = () => {
+  if (fullscreenAnimationTimer === undefined) {
+    return;
+  }
+
+  window.clearTimeout(fullscreenAnimationTimer);
+  fullscreenAnimationTimer = undefined;
+};
+
+const getFullscreenTransitionDuration = () => {
+  if (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function"
+  ) {
+    return FULLSCREEN_TRANSITION_DURATION;
+  }
+
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    ? 0
+    : FULLSCREEN_TRANSITION_DURATION;
+};
+
+const scheduleFullscreenAnimationEnd = (callback: () => void) => {
+  clearFullscreenAnimationTimer();
+  fullscreenAnimationTimer = window.setTimeout(() => {
+    callback();
+    isAnimating.value = false;
+    fullscreenAnimationTimer = undefined;
+  }, getFullscreenTransitionDuration());
+};
+
+const getFullscreenRect = (): ModalRect => ({
+  left: 0,
+  top: 0,
+  width: viewport.width,
+  height: viewport.height,
+});
+
+const cloneRect = (target: ModalRect): ModalRect => ({
+  left: target.left,
+  top: target.top,
+  width: target.width,
+  height: target.height,
+});
+
+const clamp = (value: number, min: number, max: number) => {
+  return Math.min(Math.max(value, min), max);
+};
+
+const getEffectiveMinWidth = () => {
+  return Math.max(220, Math.min(props.minWidth, viewport.width));
+};
+
+const getEffectiveMinHeight = () => {
+  return Math.max(180, Math.min(props.minHeight, viewport.height));
+};
+
+const clampRect = (target: ModalRect): ModalRect => {
+  const minWidth = getEffectiveMinWidth();
+  const minHeight = getEffectiveMinHeight();
+
+  const width = clamp(target.width, minWidth, viewport.width);
+  const height = clamp(target.height, minHeight, viewport.height);
+  const left = clamp(target.left, 0, Math.max(0, viewport.width - width));
+  const top = clamp(target.top, 0, Math.max(0, viewport.height - height));
+
+  return {
+    left,
+    top,
+    width,
+    height,
+  };
+};
+
+const parsePreferredWidth = (width: ModalProps["width"], fallback: number) => {
+  if (typeof width === "number" && Number.isFinite(width)) {
+    return width;
+  }
+
+  if (typeof width === "string") {
+    const trimmed = width.trim();
+
+    if (trimmed.endsWith("%")) {
+      const ratio = Number.parseFloat(trimmed.slice(0, -1));
+      if (Number.isFinite(ratio)) {
+        return (viewport.width * ratio) / 100;
+      }
+    }
+
+    const parsed = Number.parseFloat(trimmed);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+
+  return fallback;
+};
+
+const syncRectFromDom = (resetPosition = false) => {
+  const element = getModalElement();
+  if (!element) {
+    return false;
+  }
+
+  if (boundModalElement !== element) {
+    unbindModalResizeEvents();
+    bindModalResizeEvents(element);
+  }
+
+  // Always update viewport dimensions first
+  updateViewport();
+
+  const domRect = element.getBoundingClientRect();
+
+  // Initialize rect with current DOM position (which is handled by AntDV initially)
+  const nextRect: ModalRect = {
+    left: domRect.left,
+    top: domRect.top,
+    width: domRect.width || DEFAULT_WIDTH,
+    height: domRect.height || DEFAULT_HEIGHT,
+  };
+
+  // Only if we need to force reset (e.g. on manual reset), we calculate center
+  // Otherwise we trust AntDV's initial positioning
+  if (resetPosition && !rectReady.value) {
+    // We just read the position from DOM, no need to recalculate center manually
+    // This avoids the scrollbar-width shift issue because AntDV handles it correctly
+  }
+
+  Object.assign(rect, nextRect);
+  rectReady.value = true;
+  return true;
+};
+
+const ensureRectReady = async (resetPosition = false) => {
+  // Wait for Vue to render the modal into DOM
+  await nextTick();
+
+  // Give a small buffer for AntDV's transition/positioning to apply
+  if (resetPosition) {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+
+  let retryCount = 0;
+  const trySync = () => {
+    const synced = syncRectFromDom(resetPosition);
+    if (!synced && retryCount < 10) {
+      retryCount += 1;
+      requestAnimationFrame(trySync);
+    }
+  };
+
+  trySync();
+};
+
+const getResizeDirection = (event: MouseEvent): ResizeDirection | null => {
+  if (!boundModalElement) {
+    return null;
+  }
+
+  const modalRect = boundModalElement.getBoundingClientRect();
+  const relativeX = event.clientX - modalRect.left;
+  const relativeY = event.clientY - modalRect.top;
+
+  const nearLeft = relativeX >= 0 && relativeX <= EDGE_SIZE;
+  const nearRight =
+    relativeX <= modalRect.width && relativeX >= modalRect.width - EDGE_SIZE;
+  const nearTop = relativeY >= 0 && relativeY <= EDGE_SIZE;
+  const nearBottom =
+    relativeY <= modalRect.height && relativeY >= modalRect.height - EDGE_SIZE;
+
+  if (!nearLeft && !nearRight && !nearTop && !nearBottom) {
+    return null;
+  }
+
+  const vertical = nearTop ? "n" : nearBottom ? "s" : "";
+  const horizontal = nearLeft ? "w" : nearRight ? "e" : "";
+
+  const direction = `${vertical}${horizontal}` as ResizeDirection;
+  return direction || null;
+};
+
+const directionCursorMap: Record<ResizeDirection, string> = {
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize",
+  nw: "nwse-resize",
+  se: "nwse-resize",
+};
+
+const updateModalCursor = (direction: ResizeDirection | null) => {
+  if (!boundModalElement) {
+    return;
+  }
+
+  if (!direction || isFullscreen.value || !props.resizable) {
+    boundModalElement.style.cursor = "";
+    return;
+  }
+
+  boundModalElement.style.cursor = directionCursorMap[direction];
+};
+
+const startDocumentListen = () => {
+  if (isDocumentListening) {
+    return;
+  }
+
+  isDocumentListening = true;
+  bodyUserSelectCache = document.body.style.userSelect;
+  document.body.style.userSelect = "none";
+  document.addEventListener("mousemove", handleDocumentMouseMove);
+  document.addEventListener("mouseup", handleDocumentMouseUp);
+};
+
+const stopDocumentListen = () => {
+  if (!isDocumentListening) {
+    return;
+  }
+
+  isDocumentListening = false;
+  document.body.style.userSelect = bodyUserSelectCache;
+  document.removeEventListener("mousemove", handleDocumentMouseMove);
+  document.removeEventListener("mouseup", handleDocumentMouseUp);
+};
+
+const applyResize = (state: ResizeState, deltaX: number, deltaY: number) => {
+  const minWidth = getEffectiveMinWidth();
+  const minHeight = getEffectiveMinHeight();
+
+  let { left, top, width, height } = state.startRect;
+
+  if (state.direction.includes("e")) {
+    width = clamp(
+      state.startRect.width + deltaX,
+      minWidth,
+      viewport.width - state.startRect.left,
+    );
+  }
+
+  if (state.direction.includes("s")) {
+    height = clamp(
+      state.startRect.height + deltaY,
+      minHeight,
+      viewport.height - state.startRect.top,
+    );
+  }
+
+  if (state.direction.includes("w")) {
+    const maxLeft = state.startRect.left + state.startRect.width - minWidth;
+    left = clamp(state.startRect.left + deltaX, 0, maxLeft);
+    width = state.startRect.width + (state.startRect.left - left);
+  }
+
+  if (state.direction.includes("n")) {
+    const maxTop = state.startRect.top + state.startRect.height - minHeight;
+    top = clamp(state.startRect.top + deltaY, 0, maxTop);
+    height = state.startRect.height + (state.startRect.top - top);
+  }
+
+  Object.assign(rect, clampRect({ left, top, width, height }));
+};
+
+const handleDocumentMouseMove = (event: MouseEvent) => {
+  if (dragState.value) {
+    const deltaX = event.clientX - dragState.value.startX;
+    const deltaY = event.clientY - dragState.value.startY;
+
+    Object.assign(
+      rect,
+      clampRect({
+        left: dragState.value.startRect.left + deltaX,
+        top: dragState.value.startRect.top + deltaY,
+        width: dragState.value.startRect.width,
+        height: dragState.value.startRect.height,
+      }),
+    );
+
+    return;
+  }
+
+  if (resizeState.value) {
+    const deltaX = event.clientX - resizeState.value.startX;
+    const deltaY = event.clientY - resizeState.value.startY;
+    applyResize(resizeState.value, deltaX, deltaY);
+  }
+};
+
+const handleDocumentMouseUp = () => {
+  dragState.value = null;
+  resizeState.value = null;
+  stopDocumentListen();
+  updateModalCursor(null);
+};
+
+const handleModalMouseMove = (event: MouseEvent) => {
+  if (
+    !props.resizable ||
+    isFullscreen.value ||
+    dragState.value ||
+    resizeState.value
+  ) {
+    updateModalCursor(null);
+    return;
+  }
+
+  const direction = getResizeDirection(event);
+  updateModalCursor(direction);
+};
+
+const handleModalMouseLeave = () => {
+  if (!resizeState.value) {
+    updateModalCursor(null);
+  }
+};
+
+const handleModalMouseDown = (event: MouseEvent) => {
+  if (!props.resizable || isFullscreen.value || event.button !== 0) {
+    return;
+  }
+
+  const direction = getResizeDirection(event);
+  if (!direction) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  // Ensure we start from the current visual position (which might be CSS-positioned)
+  syncRectFromDom();
+  isMoved.value = true;
+
+  resizeState.value = {
+    direction,
+    startX: event.clientX,
+    startY: event.clientY,
+    startRect: cloneRect(rect),
+  };
+
+  startDocumentListen();
+};
+
+const bindModalResizeEvents = (element: HTMLElement) => {
+  boundModalElement = element;
+  element.addEventListener("mousemove", handleModalMouseMove);
+  element.addEventListener("mouseleave", handleModalMouseLeave);
+  element.addEventListener("mousedown", handleModalMouseDown);
+};
+
+const unbindModalResizeEvents = () => {
+  if (!boundModalElement) {
+    return;
+  }
+
+  boundModalElement.removeEventListener("mousemove", handleModalMouseMove);
+  boundModalElement.removeEventListener("mouseleave", handleModalMouseLeave);
+  boundModalElement.removeEventListener("mousedown", handleModalMouseDown);
+  boundModalElement.style.cursor = "";
+  boundModalElement = null;
+};
+
+const handleTitleMouseDown = (event: MouseEvent) => {
+  if (
+    !props.draggable ||
+    isFullscreen.value ||
+    isAnimating.value ||
+    event.button !== 0
+  ) {
+    return;
+  }
+
+  const target = event.target as HTMLElement | null;
+  if (target?.closest(".pro-modal-title-actions")) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  // Ensure we start from the current visual position and switch to manual mode
+  syncRectFromDom();
+  isMoved.value = true;
+
+  dragState.value = {
+    startX: event.clientX,
+    startY: event.clientY,
+    startRect: cloneRect(rect),
+  };
+
+  startDocumentListen();
+};
+
+const toggleFullscreen = async () => {
+  if (!rectReady.value || isAnimating.value) {
+    return;
+  }
+
+  // Ensure isMoved is true so style bindings (top/left/width/height) are active
+  if (!isMoved.value) {
+    syncRectFromDom();
+    isMoved.value = true;
+    await nextTick();
+  }
+
+  const element = getModalElement();
+  if (!element) return;
+
+  // Force reflow to ensure current state is captured
+  // eslint-disable-next-line no-unused-expressions
+  element.getBoundingClientRect();
+
+  if (!isFullscreen.value) {
+    restoreRect.value = cloneRect(rect);
+    isAnimating.value = true;
+
+    requestAnimationFrame(() => {
+      Object.assign(rect, getFullscreenRect());
+      scheduleFullscreenAnimationEnd(() => {
+        isFullscreen.value = true;
+      });
+    });
+
+    return;
+  }
+
+  isAnimating.value = true;
+  const targetRect = restoreRect.value || {
+    left: (viewport.width - DEFAULT_WIDTH) / 2,
+    top: (viewport.height - DEFAULT_HEIGHT) / 2,
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT,
+  };
+
+  requestAnimationFrame(() => {
+    Object.assign(rect, clampRect(targetRect));
+    scheduleFullscreenAnimationEnd(() => {
+      isFullscreen.value = false;
+    });
+  });
+};
+
+const handleWindowResize = () => {
+  updateViewport();
+
+  if (!isOpen.value || !rectReady.value) {
+    return;
+  }
+
+  if (isFullscreen.value && !isAnimating.value) {
+    Object.assign(rect, getFullscreenRect());
+    return;
+  }
+
+  Object.assign(rect, clampRect(cloneRect(rect)));
+};
+
+const handleOk = (event: MouseEvent) => {
+  emit("ok", event);
+};
+
+const handleCancel = (event: MouseEvent) => {
+  emit("cancel", event);
+};
+
+const handleCloseClick = (event: MouseEvent) => {
+  if (!showCloseButton.value || isCloseButtonDisabled.value) {
+    return;
+  }
+
+  if (typeof props.closable === "object") {
+    props.closable.onClose?.();
+  }
+
+  emit("cancel", event);
+  emit("update:open", false);
+};
+
+const handleUpdateOpen = (open: boolean) => {
+  emit("update:open", open);
+};
+
+watch(
+  isOpen,
+  (open) => {
+    if (open) {
+      clearFullscreenAnimationTimer();
+      isAnimating.value = false;
+      isFullscreen.value = false;
+      restoreRect.value = null;
+      isMoved.value = false;
+      ensureRectReady(true);
+      return;
+    }
+
+    clearFullscreenAnimationTimer();
+    isAnimating.value = false;
+    dragState.value = null;
+    resizeState.value = null;
+    rectReady.value = false;
+    stopDocumentListen();
+    unbindModalResizeEvents();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.width,
+  () => {
+    if (!isOpen.value || !rectReady.value || isFullscreen.value) {
+      return;
+    }
+
+    const nextWidth = parsePreferredWidth(props.width, rect.width);
+    Object.assign(rect, clampRect({ ...cloneRect(rect), width: nextWidth }));
+  },
+);
+
+onMounted(() => {
+  updateViewport();
+  window.addEventListener("resize", handleWindowResize);
+});
+
+onBeforeUnmount(() => {
+  clearFullscreenAnimationTimer();
+  stopDocumentListen();
+  unbindModalResizeEvents();
+  window.removeEventListener("resize", handleWindowResize);
+});
+</script>
+
+<style lang="scss">
+.pro-modal-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  user-select: none;
+
+  &.draggable {
+    cursor: move;
+  }
+}
+
+.pro-modal-title-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pro-modal-title-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.pro-modal-action-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+    color: var(--color-text-primary);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.pro-modal-wrap {
+  --pro-modal-fullscreen-duration: 0.3s;
+  --pro-modal-fullscreen-ease: var(--ease-in-out);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  .ant-modal {
+    top: 0;
+    padding-bottom: 0;
+    margin: 0;
+    max-width: calc(100vw - 32px);
+    max-height: calc(100vh - 2 * min(100px, 10vh));
+    display: flex;
+    flex-direction: column;
+  }
+
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    max-height: 100%;
+    overflow: hidden;
+  }
+}
+
+.pro-modal-wrap .ant-modal-header {
+  flex-shrink: 0;
+}
+
+.pro-modal-wrap .ant-modal-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.pro-modal-wrap .ant-modal-footer {
+  flex-shrink: 0;
+}
+
+.pro-modal-animating .ant-modal {
+  transition-property: top, left, width, height;
+  transition-duration: var(--pro-modal-fullscreen-duration);
+  transition-timing-function: var(--pro-modal-fullscreen-ease);
+  max-width: none !important;
+  max-height: none !important;
+}
+
+.pro-modal-fullscreen .ant-modal {
+  max-width: none !important;
+  max-height: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pro-modal-animating .ant-modal {
+    transition-duration: 0s !important;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProSplitLayout/index.vue b/antdv-next-admin/src/components/Pro/ProSplitLayout/index.vue
new file mode 100644
index 0000000..2845906
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProSplitLayout/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="pro-split-layout" :style="layoutStyle">
+    <div class="pro-split-side" :style="sideStyle">
+      <slot name="side" />
+    </div>
+    <div class="pro-split-main">
+      <slot name="main" />
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    sideWidth?: number | string;
+    sidePosition?: 'left' | 'right';
+    gap?: number | string;
+  }>(),
+  {
+    sideWidth: 280,
+    sidePosition: 'left',
+    gap: 16,
+  },
+);
+
+const normalizeSize = (value: number | string) => {
+  return typeof value === 'number' ? `${value}px` : value;
+};
+
+const layoutStyle = computed(() => ({
+  gap: normalizeSize(props.gap),
+  flexDirection: props.sidePosition === 'right' ? ('row-reverse' as const) : ('row' as const),
+}));
+
+const sideStyle = computed(() => ({
+  width: normalizeSize(props.sideWidth),
+  minWidth: normalizeSize(props.sideWidth),
+}));
+</script>
+
+<style scoped lang="scss">
+.pro-split-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.pro-split-side {
+  flex-shrink: 0;
+  background: var(--color-bg-container);
+  border-radius: 8px;
+  padding: 20px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.pro-split-main {
+  flex: 1;
+  background: var(--color-bg-container);
+  border-radius: 8px;
+  padding: 16px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  min-width: 0;
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProStatCard/index.vue b/antdv-next-admin/src/components/Pro/ProStatCard/index.vue
new file mode 100644
index 0000000..cd08d7d
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProStatCard/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <article
+    class="relative overflow-hidden min-h-[168px] !p-5 rounded-[var(--radius-lg)] border border-[var(--color-border-secondary)] bg-[var(--color-bg-container)] shadow-[var(--shadow-card)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[var(--shadow-card-hover)] md:min-h-[150px]"
+  >
+    <p class="text-xs text-[var(--color-text-tertiary)] mb-2.5">{{ label }}</p>
+    <p
+      class="m-0 text-4xl leading-none font-[var(--font-family-number)] font-bold text-[var(--color-text-primary)] tracking-tight md:text-3xl"
+    >
+      {{ value }}
+    </p>
+    <p
+      v-if="trend"
+      class="mt-3.5 inline-flex items-center gap-1.5 text-xs font-medium"
+      :class="trendDirection === 'down' ? 'text-error' : 'text-success'"
+    >
+      <RiseOutlined v-if="trendDirection !== 'down'" />
+      <FallOutlined v-else />
+      <span>{{ trend }}</span>
+    </p>
+    <slot name="extra" />
+    <component
+      :is="icon"
+      v-if="icon"
+      class="absolute right-3.5 -bottom-1.5 text-[96px]"
+      :style="{ color: accentColor }"
+    />
+  </article>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue";
+import type { ProStatCardTone } from "@/types/pro";
+
+import { computed } from "vue";
+import { RiseOutlined, FallOutlined } from "@antdv-next/icons";
+
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    value: string | number;
+    trend?: string;
+    trendDirection?: "up" | "down";
+    icon?: Component;
+    tone?: ProStatCardTone;
+  }>(),
+  {
+    trendDirection: "up",
+    tone: "blue",
+  },
+);
+
+const accentColors: Record<ProStatCardTone, string> = {
+  blue: "rgba(24, 119, 255, 0.12)",
+  green: "rgba(82, 196, 26, 0.12)",
+  orange: "rgba(250, 140, 22, 0.12)",
+  purple: "rgba(114, 46, 209, 0.12)",
+  red: "rgba(245, 34, 45, 0.12)",
+  cyan: "rgba(19, 194, 194, 0.12)",
+};
+
+const accentColor = computed(() => accentColors[props.tone]);
+</script>
\ No newline at end of file
diff --git a/antdv-next-admin/src/components/Pro/ProStatus/index.vue b/antdv-next-admin/src/components/Pro/ProStatus/index.vue
new file mode 100644
index 0000000..a44eb48
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProStatus/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <!-- Dot mode -->
+  <span
+    v-if="mode === 'dot'"
+    class="pro-status pro-status-dot"
+    :style="dotStyle"
+  >
+    <span
+      class="pro-status-dot-indicator"
+      :style="{ background: statusColor }"
+    />
+    {{ statusText }}
+  </span>
+
+  <!-- Tag mode -->
+  <a-tag v-else-if="mode === 'tag'" :color="statusColor">
+    {{ statusText }}
+  </a-tag>
+
+  <!-- Badge mode -->
+  <a-badge v-else :color="statusColor" :text="statusText" />
+</template>
+
+<script setup lang="ts">
+import type { ProStatusMode, ProStatusMap } from "@/types/pro";
+
+import { computed } from "vue";
+
+interface Props {
+  value: string | number;
+  statusMap: ProStatusMap;
+  mode?: ProStatusMode;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: "dot",
+});
+
+const config = computed(() => props.statusMap[String(props.value)]);
+const statusText = computed(() => config.value?.text ?? String(props.value));
+const statusColor = computed(
+  () => config.value?.color ?? "var(--color-text-tertiary)",
+);
+
+const dotStyle = computed(() => {
+  const c = statusColor.value;
+  return {
+    "--pro-status-color": c,
+    "--pro-status-bg": hexToRgba(c, 0.1),
+  };
+});
+
+function hexToRgba(hex: string, alpha: number): string {
+  // Handle named colors by returning a light background
+  if (!hex.startsWith("#"))
+    return `color-mix(in srgb, ${hex} ${alpha * 100}%, transparent)`;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+</script>
+
+<style scoped lang="scss">
+.pro-status-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--pro-status-color);
+  background: var(--pro-status-bg);
+
+  .pro-status-dot-indicator {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProStepForm/index.vue b/antdv-next-admin/src/components/Pro/ProStepForm/index.vue
new file mode 100644
index 0000000..6bd4cd3
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProStepForm/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="pro-step-form">
+    <a-steps :current="currentStep" size="small" class="pro-step-form-steps">
+      <a-step
+        v-for="(step, index) in steps"
+        :key="index"
+        :title="step.title"
+        :description="step.description"
+      >
+        <template v-if="step.icon" #icon>
+          <component :is="step.icon" />
+        </template>
+      </a-step>
+    </a-steps>
+
+    <div class="pro-step-form-content">
+      <template v-for="(step, index) in steps" :key="index">
+        <div v-show="currentStep === index">
+          <slot :name="`step-${index}`" :step="step" :index="index" />
+        </div>
+      </template>
+    </div>
+
+    <div class="pro-step-form-actions">
+      <a-space wrap>
+        <a-button :disabled="currentStep === 0" @click="handlePrev">
+          {{ prevText || $t('proStepForm.prev') }}
+        </a-button>
+        <a-button
+          v-if="currentStep < steps.length - 1"
+          type="primary"
+          :loading="loading"
+          @click="handleNext"
+        >
+          {{ nextText || $t('proStepForm.next') }}
+        </a-button>
+        <a-button v-else type="primary" :loading="loading" @click="handleSubmit">
+          {{ submitText || $t('common.submit') }}
+        </a-button>
+        <slot name="extra-actions" :current-step="currentStep" />
+      </a-space>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProStepFormStep } from '@/types/pro';
+
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t: $t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    steps: ProStepFormStep[];
+    modelValue?: number;
+    loading?: boolean;
+    prevText?: string;
+    nextText?: string;
+    submitText?: string;
+  }>(),
+  {
+    modelValue: 0,
+    loading: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', step: number): void;
+  (e: 'next', currentStep: number): void;
+  (e: 'prev', currentStep: number): void;
+  (e: 'submit'): void;
+}>();
+
+const currentStep = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    currentStep.value = val;
+  },
+);
+
+watch(currentStep, (val) => {
+  emit('update:modelValue', val);
+});
+
+const handlePrev = () => {
+  if (currentStep.value > 0) {
+    currentStep.value -= 1;
+    emit('prev', currentStep.value);
+  }
+};
+
+const handleNext = () => {
+  emit('next', currentStep.value);
+};
+
+const handleSubmit = () => {
+  emit('submit');
+};
+
+defineExpose({
+  prev: handlePrev,
+  goTo: (step: number) => {
+    if (step >= 0 && step < props.steps.length) {
+      currentStep.value = step;
+    }
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.pro-step-form {
+  .pro-step-form-steps {
+    margin-bottom: var(--spacing-lg, 24px);
+  }
+
+  .pro-step-form-content {
+    min-height: 200px;
+  }
+
+  .pro-step-form-actions {
+    margin-top: 18px;
+    padding-top: 14px;
+    border-top: 1px solid var(--color-border-secondary);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProTable/CLAUDE.md b/antdv-next-admin/src/components/Pro/ProTable/CLAUDE.md
new file mode 100644
index 0000000..6abb6e5
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProTable/CLAUDE.md
@@ -0,0 +1,12 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 11, 2026
+
+| ID   | Time    | T   | Title                                     | Read |
+| ---- | ------- | --- | ----------------------------------------- | ---- |
+| #345 | 5:40 PM | 🔵  | ProTable Component Implementation Started | ~426 |
+
+</claude-mem-context>
diff --git a/antdv-next-admin/src/components/Pro/ProTable/ValueTypeRender.vue b/antdv-next-admin/src/components/Pro/ProTable/ValueTypeRender.vue
new file mode 100644
index 0000000..44d0762
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProTable/ValueTypeRender.vue
@@ -0,0 +1,175 @@
+<template>
+  <span class="value-type-render">
+    <!-- Text -->
+    <span v-if="type === 'text'" :class="{ copyable }" @click="handleCopy">
+      {{ value }}
+    </span>
+
+    <!-- Date -->
+    <span v-else-if="type === 'date'">
+      {{ formatDate(value, valueTypeProps.format || "YYYY-MM-DD") }}
+    </span>
+
+    <!-- DateTime -->
+    <span v-else-if="type === 'dateTime'">
+      {{ formatDate(value, valueTypeProps.format || "YYYY-MM-DD HH:mm:ss") }}
+    </span>
+
+    <!-- Tag -->
+    <a-tag v-else-if="type === 'tag'" :color="getEnumConfig(value)?.color">
+      {{ getEnumConfig(value)?.text || value }}
+    </a-tag>
+
+    <!-- Badge -->
+    <a-badge
+      v-else-if="type === 'badge'"
+      :status="getEnumConfig(value)?.status as any"
+      :text="getEnumConfig(value)?.text || value"
+    />
+
+    <!-- Money -->
+    <span v-else-if="type === 'money'" class="money">
+      {{ valueTypeProps.symbol ?? "¥"
+      }}{{ formatMoney(value, valueTypeProps.precision) }}
+    </span>
+
+    <!-- Percent -->
+    <span v-else-if="type === 'percent'">
+      {{ formatPercent(value, valueTypeProps.precision) }}%
+    </span>
+
+    <!-- Avatar -->
+    <a-avatar
+      v-else-if="type === 'avatar'"
+      :src="asString(value)"
+      :size="valueTypeProps.size || 32"
+    />
+
+    <!-- Image -->
+    <a-image
+      v-else-if="type === 'image'"
+      :src="asString(value)"
+      :width="valueTypeProps.width || 80"
+    />
+
+    <!-- Link -->
+    <a v-else-if="type === 'link'" :href="asString(value)" target="_blank" class="link">
+      {{ value }}
+    </a>
+
+    <!-- Progress -->
+    <a-progress
+      v-else-if="type === 'progress'"
+      :percent="asNumber(value)"
+      :status="(asNumber(value) ?? 0) >= 100 ? 'success' : 'active'"
+      v-bind="valueTypeProps"
+    />
+
+    <!-- Default -->
+    <span v-else>{{ value }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { ValueType } from "@/types/pro";
+
+import { message } from "antdv-next";
+import dayjs from "dayjs";
+
+import { $t } from "@/locales";
+import { copyToClipboard } from "@/utils/helpers";
+
+interface ValueTypeProps {
+  format?: string;
+  symbol?: string;
+  precision?: number;
+  size?: number;
+  width?: number;
+}
+
+interface Props {
+  value: unknown;
+  type?: ValueType;
+  enum?: Record<string, { text: string; status?: string; color?: string }>;
+  record?: Record<string, unknown>;
+  copyable?: boolean;
+  valueTypeProps?: ValueTypeProps;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  copyable: false,
+  valueTypeProps: () => ({}),
+});
+
+const asString = (val: unknown): string | undefined => {
+  return typeof val === "string" ? val : undefined;
+};
+
+const asNumber = (val: unknown): number | undefined => {
+  return typeof val === "number" ? val : undefined;
+};
+
+const getEnumConfig = (value: unknown) => {
+  if (typeof value === "string" || typeof value === "number") {
+    return props.enum?.[value];
+  }
+  return undefined;
+};
+
+const formatDate = (value: unknown, format: string) => {
+  if (!value) return "-";
+  if (typeof value === "string" || typeof value === "number" || value instanceof Date) {
+    return dayjs(value).format(format);
+  }
+  return "-";
+};
+
+const formatMoney = (value: unknown, precision?: number) => {
+  if (value === null || value === undefined) return "0.00";
+  const p = precision ?? 2;
+  return Number(value)
+    .toFixed(p)
+    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+};
+
+const formatPercent = (value: unknown, precision?: number) => {
+  if (value === null || value === undefined) return "0";
+  const p = precision ?? 2;
+  return Number(value).toFixed(p);
+};
+
+const handleCopy = async () => {
+  if (props.copyable && props.value) {
+    const success = await copyToClipboard(String(props.value));
+    if (success) {
+      message.success($t("common.copySuccess"));
+    } else {
+      message.error($t("common.copyFailed"));
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.value-type-render {
+  .copyable {
+    cursor: pointer;
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+
+  .money {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-error);
+  }
+
+  .link {
+    color: var(--color-primary);
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProTable/index.vue b/antdv-next-admin/src/components/Pro/ProTable/index.vue
new file mode 100644
index 0000000..d62b9c4
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProTable/index.vue
@@ -0,0 +1,2485 @@
+<template>
+  <div ref="proTableRef" class="pro-table" :style="tableRootStyle">
+    <!-- Search Form -->
+    <div v-if="showSearchForm" ref="searchRef" class="pro-table-search">
+      <a-form
+        :model="searchForm"
+        :label-col="{ span: searchLabelWidth }"
+        class="search-form"
+      >
+        <a-row :gutter="16">
+          <a-col
+            v-for="col in visibleSearchColumns"
+            :key="col.dataIndex"
+            :xs="24"
+            :sm="12"
+            :lg="8"
+          >
+            <a-form-item :label="col.title" :name="col.dataIndex">
+              <a-input
+                v-if="resolveSearchType(col) === 'input'"
+                v-model:value="searchForm[col.dataIndex]"
+                :placeholder="buildEnterPlaceholder(col.title)"
+                v-bind="col.searchProps"
+              />
+
+              <a-select
+                v-else-if="resolveSearchType(col) === 'select'"
+                v-model:value="searchForm[col.dataIndex]"
+                :placeholder="buildSelectPlaceholder(col.title)"
+                :options="resolveSearchOptions(col)"
+                v-bind="col.searchProps"
+              />
+
+              <a-input-number
+                v-else-if="resolveSearchType(col) === 'number'"
+                v-model:value="searchForm[col.dataIndex]"
+                :placeholder="buildEnterPlaceholder(col.title)"
+                style="width: 100%"
+                v-bind="col.searchProps"
+              />
+
+              <a-date-picker
+                v-else-if="resolveSearchType(col) === 'datePicker'"
+                v-model:value="searchForm[col.dataIndex]"
+                :placeholder="buildSelectPlaceholder(col.title)"
+                style="width: 100%"
+                v-bind="col.searchProps"
+              />
+
+              <a-range-picker
+                v-else-if="resolveSearchType(col) === 'dateRange'"
+                v-model:value="searchForm[col.dataIndex]"
+                style="width: 100%"
+                v-bind="col.searchProps"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :xs="24" :sm="12" :lg="8" class="search-actions">
+            <a-form-item
+              :wrapper-col="{ span: 24 }"
+              class="search-actions-item"
+            >
+              <a-space wrap :size="[8, 8]" class="search-actions-space">
+                <a-button type="primary" @click="handleSearch">
+                  <SearchOutlined /> {{ $t("common.search") }}
+                </a-button>
+                <a-button @click="handleReset">
+                  <ReloadOutlined /> {{ $t("common.reset") }}
+                </a-button>
+                <a-button
+                  v-if="showSearchCollapseToggle"
+                  type="link"
+                  @click="searchCollapsed = !searchCollapsed"
+                >
+                  {{
+                    searchCollapsed
+                      ? $t("common.expand")
+                      : $t("common.collapse")
+                  }}
+                  <DownOutlined :class="{ 'rotate-180': !searchCollapsed }" />
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- Table -->
+    <div
+      ref="tableSectionRef"
+      class="pro-table-main"
+      :class="{
+        'main-scroll-mode': !effectiveFixedHeader && !isAutoHeight,
+        'main-fill-mode': effectiveFixedHeader || isAutoHeight,
+        'no-vertical-scrollbar': isFillMode && !shouldUseVerticalScroll,
+      }"
+    >
+      <a-table
+        :components="tableComponents"
+        :columns="tableColumns"
+        :data-source="dataSource"
+        :loading="loading"
+        :pagination="paginationConfig"
+        :size="tableSize"
+        :row-key="rowKey"
+        :bordered="effectiveBordered"
+        :sticky="effectiveFixedHeader"
+        :scroll="tableScroll"
+        v-bind="$attrs"
+        @change="handleTableChange"
+      >
+        <template v-if="toolbar" #title>
+          <div ref="toolbarRef" class="pro-table-toolbar">
+            <div class="toolbar-left">
+              <span v-if="toolbar.title" class="toolbar-title">{{
+                toolbar.title
+              }}</span>
+              <span v-if="toolbar.subTitle" class="toolbar-subtitle">{{
+                toolbar.subTitle
+              }}</span>
+            </div>
+            <div class="toolbar-right">
+              <slot name="toolbar-actions"></slot>
+              <a-space :size="4">
+                <a-tooltip
+                  v-if="showRefreshAction"
+                  :title="$t('common.refresh')"
+                >
+                  <a-button
+                    type="text"
+                    class="toolbar-icon-btn"
+                    @click="handleRefresh"
+                  >
+                    <ReloadOutlined />
+                  </a-button>
+                </a-tooltip>
+
+                <a-dropdown
+                  v-if="showDensityAction"
+                  placement="bottomRight"
+                  :menu="densityMenuProps"
+                  :trigger="['click']"
+                >
+                  <a-tooltip :title="$t('proTable.density')">
+                    <a-button type="text" class="toolbar-icon-btn">
+                      <ColumnHeightOutlined />
+                    </a-button>
+                  </a-tooltip>
+                </a-dropdown>
+
+                <a-popover
+                  v-if="showColumnSettingAction"
+                  trigger="click"
+                  placement="bottomRight"
+                >
+                  <template #content>
+                    <div class="column-setting-dropdown" @click.stop>
+                      <div class="setting-actions">
+                        <a-button
+                          size="small"
+                          type="link"
+                          @click.stop="handleToggleAllColumns"
+                        >
+                          {{ $t("proTable.checkAll") }}
+                        </a-button>
+                        <a-button
+                          size="small"
+                          type="link"
+                          class="reset-btn"
+                          @click.stop="handleResetColumns"
+                        >
+                          {{ $t("common.reset") }}
+                        </a-button>
+                      </div>
+
+                      <div class="setting-list">
+                        <div class="setting-item index-column-item">
+                          <div class="setting-item-left">
+                            <span
+                              class="drag-handle"
+                              style="opacity: 0; pointer-events: none"
+                              >::</span
+                            >
+                            <a-checkbox
+                              :checked="showIndexColumn"
+                              @change="toggleIndexColumn"
+                            >
+                              {{ $t("proTable.indexColumn") }}
+                            </a-checkbox>
+                          </div>
+                        </div>
+                        <div
+                          v-for="state in columnStates"
+                          :key="state.key"
+                          class="setting-item"
+                          :class="{ dragging: draggingColumnKey === state.key }"
+                          draggable="true"
+                          @dragstart="handleDragStart(state.key)"
+                          @dragend="handleDragEnd"
+                          @dragover.prevent
+                          @drop.prevent="handleDrop(state.key)"
+                        >
+                          <div class="setting-item-left">
+                            <span class="drag-handle">::</span>
+                            <a-checkbox
+                              :checked="state.checked"
+                              @change="
+                                handleColumnCheckedChange(state.key, $event)
+                              "
+                            >
+                              {{ state.title }}
+                            </a-checkbox>
+                          </div>
+                          <div class="setting-item-right">
+                            <a-tooltip :title="$t('proTable.fixLeft')">
+                              <a-button
+                                type="text"
+                                size="small"
+                                class="fixed-btn"
+                                :class="{ active: state.fixed === 'left' }"
+                                @click.stop="
+                                  toggleColumnFixed(state.key, 'left')
+                                "
+                              >
+                                <VerticalLeftOutlined />
+                              </a-button>
+                            </a-tooltip>
+                            <a-tooltip :title="$t('proTable.fixRight')">
+                              <a-button
+                                type="text"
+                                size="small"
+                                class="fixed-btn"
+                                :class="{ active: state.fixed === 'right' }"
+                                @click.stop="
+                                  toggleColumnFixed(state.key, 'right')
+                                "
+                              >
+                                <VerticalRightOutlined />
+                              </a-button>
+                            </a-tooltip>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button type="text" class="toolbar-icon-btn">
+                    <SettingOutlined />
+                  </a-button>
+                </a-popover>
+              </a-space>
+            </div>
+          </div>
+        </template>
+
+        <template
+          v-if="$slots.filterIcon || hasBuiltInHeaderFilter"
+          #filterIcon="slotProps"
+        >
+          <template v-if="shouldRenderBuiltInFilterIcon(slotProps.column)">
+            <SearchOutlined
+              v-if="getBuiltInFilterIconType(slotProps.column) === 'search'"
+              :style="{
+                color: slotProps.filtered ? 'var(--color-primary)' : undefined,
+              }"
+            />
+            <FilterFilled
+              v-else
+              :style="{
+                color: slotProps.filtered ? 'var(--color-primary)' : undefined,
+              }"
+            />
+          </template>
+          <slot
+            v-else-if="$slots.filterIcon"
+            name="filterIcon"
+            v-bind="slotProps"
+          />
+        </template>
+
+        <template
+          v-if="$slots.filterDropdown || hasBuiltInKeywordHeaderFilter"
+          #filterDropdown="slotProps"
+        >
+          <template v-if="isBuiltInKeywordFilterColumn(slotProps.column)">
+            <div class="pro-table-keyword-filter-panel" @keydown.stop>
+              <div class="pro-table-keyword-filter-field">
+                <a-input
+                  class="pro-table-keyword-filter-input"
+                  allow-clear
+                  :placeholder="
+                    getBuiltInKeywordFilterPlaceholder(slotProps.column)
+                  "
+                  :value="getBuiltInKeywordFilterValue(slotProps.selectedKeys)"
+                  @update:value="
+                    handleBuiltInKeywordInput($event, slotProps.setSelectedKeys)
+                  "
+                  @keydown.enter="handleBuiltInKeywordSearch(slotProps.confirm)"
+                />
+              </div>
+              <div class="pro-table-keyword-filter-actions">
+                <a-button
+                  type="primary"
+                  class="pro-table-keyword-filter-btn"
+                  @click="handleBuiltInKeywordSearch(slotProps.confirm)"
+                >
+                  {{ $t("common.search") }}
+                </a-button>
+                <a-button
+                  class="pro-table-keyword-filter-btn"
+                  @click="
+                    handleBuiltInKeywordReset(
+                      slotProps.setSelectedKeys,
+                      slotProps.clearFilters,
+                      slotProps.confirm,
+                    )
+                  "
+                >
+                  {{ $t("common.reset") }}
+                </a-button>
+              </div>
+            </div>
+          </template>
+          <slot
+            v-else-if="$slots.filterDropdown"
+            name="filterDropdown"
+            v-bind="slotProps"
+          />
+        </template>
+
+        <template #bodyCell="{ column, record, text, index }">
+          <template v-if="column.dataIndex === '__index'">
+            {{ getRowIndex(index) }}
+          </template>
+
+          <template v-else-if="column.dataIndex === 'action'">
+            <a-space class="row-action-group" :size="4">
+              <template v-for="(action, idx) in column.actions" :key="idx">
+                <a-button
+                  v-if="!action.hidden?.(record)"
+                  :type="action.type || 'link'"
+                  :danger="action.danger"
+                  :disabled="action.disabled?.(record)"
+                  size="small"
+                  class="table-action-btn"
+                  @click="handleAction(action, record)"
+                >
+                  <component :is="action.icon" v-if="action.icon" />
+                  {{ action.label }}
+                </a-button>
+              </template>
+            </a-space>
+          </template>
+
+          <template v-else-if="$slots.bodyCell">
+            <slot
+              name="bodyCell"
+              :column="column"
+              :record="record"
+              :text="text"
+              :index="index"
+            />
+          </template>
+
+          <template v-else-if="column.valueType">
+            <ValueTypeRender
+              :value="text"
+              :type="column.valueType"
+              :enum="resolveValueEnum(column)"
+              :record="record"
+              :value-type-props="column.valueTypeProps"
+            />
+          </template>
+        </template>
+      </a-table>
+    </div>
+
+    <!-- Built-in CRUD Modal -->
+    <ProModal
+      v-if="formItems && formItems.length > 0"
+      v-model:open="crudModalOpen"
+      :title="crudModalTitle"
+      :width="formModalWidth"
+      @ok="handleCrudSubmit"
+    >
+      <ProForm
+        ref="crudFormRef"
+        :form-items="formItems"
+        :initial-values="crudFormInitialValues"
+        :layout="formLayout"
+        :grid="formGrid"
+      />
+    </ProModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProTableDensity, ProTableHeight } from "@/settings";
+import type {
+  ProTableColumn,
+  ProTableToolbar,
+  ProTableSearch,
+  ProTablePagination,
+  ProTableRequest,
+  ProTableAction,
+  ProTableHeaderFilter,
+  HeaderFilterMode,
+  ProTableHeaderFilterConfig,
+  SearchType,
+  ProFormItem,
+  ProFormLayout,
+  ProFormGrid,
+} from "@/types/pro";
+import type { PropType } from "vue";
+
+import {
+  ReloadOutlined,
+  SettingOutlined,
+  SearchOutlined,
+  FilterFilled,
+  DownOutlined,
+  ColumnHeightOutlined,
+  VerticalLeftOutlined,
+  VerticalRightOutlined,
+} from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import {
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  nextTick,
+  h,
+  defineComponent,
+} from "vue";
+
+import { $t } from "@/locales";
+import { appDefaultSettings } from "@/settings";
+
+import ProForm from "../ProForm/index.vue";
+import ProModal from "../ProModal/index.vue";
+import ValueTypeRender from "./ValueTypeRender.vue";
+
+interface Props {
+  columns: ProTableColumn[];
+  request: ProTableRequest;
+  toolbar?: ProTableToolbar;
+  search?: ProTableSearch | false;
+  headerFilter?: ProTableHeaderFilterConfig;
+  pagination?: ProTablePagination | false;
+  rowKey?: string | ((record: Record<string, unknown>) => string);
+  size?: ProTableDensity;
+  height?: ProTableHeight;
+  resizable?: boolean;
+  columnResizable?: boolean;
+  ellipsis?: boolean;
+  bordered?: boolean;
+  fixedHeader?: boolean;
+  // Built-in CRUD modal
+  formItems?: ProFormItem[];
+  formGrid?: ProFormGrid;
+  formLayout?: ProFormLayout;
+  formModalWidth?: number | string;
+  formCreateTitle?: string;
+  formEditTitle?: string;
+}
+
+interface ColumnState {
+  key: string;
+  title: string;
+  checked: boolean;
+  fixed?: "left" | "right";
+  defaultChecked: boolean;
+  defaultFixed?: "left" | "right";
+  column: ProTableColumn;
+}
+
+interface ResizeInfo {
+  size: {
+    width: number;
+  };
+}
+
+interface ResizableTitleProps {
+  width?: number;
+  resizable?: boolean;
+  onResizeStart?: (event: MouseEvent, width: number) => void;
+  onResizeEnd?: (event: MouseEvent) => void;
+  onResize?: (event: MouseEvent, info: ResizeInfo) => void;
+}
+
+type TableSize = "large" | "middle" | "small";
+
+const MIN_COLUMN_WIDTH = 40;
+
+const ResizableTitle = defineComponent({
+  name: "ResizableTitle",
+  inheritAttrs: false,
+  props: {
+    width: Number,
+    resizable: Boolean,
+    onResizeStart: Function as PropType<ResizableTitleProps["onResizeStart"]>,
+    onResizeEnd: Function as PropType<ResizableTitleProps["onResizeEnd"]>,
+    onResize: Function as PropType<ResizableTitleProps["onResize"]>,
+  },
+  setup(props, { slots, attrs }) {
+    const dragging = ref(false);
+    let startX = 0;
+    let startWidth = 0;
+
+    const onMouseMove = (event: MouseEvent) => {
+      if (!dragging.value || !props.onResize) {
+        return;
+      }
+      const nextWidth = Math.max(
+        startWidth + event.clientX - startX,
+        MIN_COLUMN_WIDTH,
+      );
+      props.onResize(event, { size: { width: nextWidth } });
+    };
+
+    const onMouseUp = (event: MouseEvent) => {
+      if (dragging.value) {
+        props.onResizeEnd?.(event);
+      }
+      dragging.value = false;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+
+    const onMouseDown = (event: MouseEvent) => {
+      if (!props.onResize || !props.resizable) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      startWidth =
+        props.width ||
+        (
+          event.currentTarget as HTMLElement
+        )?.parentElement?.getBoundingClientRect().width ||
+        0;
+      props.onResizeStart?.(event, startWidth);
+      dragging.value = true;
+      startX = event.clientX;
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    });
+
+    return () => {
+      const width = props.width;
+      if (!props.resizable || !props.onResize) {
+        return h("th", attrs, slots.default?.());
+      }
+
+      const style =
+        width == null
+          ? attrs.style
+          : {
+              ...(attrs.style as Record<string, unknown>),
+              width: `${width}px`,
+            };
+
+      return h(
+        "th",
+        {
+          ...attrs,
+          class: ["pro-table-resizable-title", attrs.class],
+          style,
+        },
+        [
+          slots.default?.(),
+          h("span", {
+            class: "pro-table-resizable-handle",
+            onMousedown: onMouseDown,
+          }),
+        ],
+      );
+    };
+  },
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  rowKey: "id",
+  size: appDefaultSettings.proTable.size,
+  height: appDefaultSettings.proTable.height,
+  resizable: appDefaultSettings.proTable.resizable,
+  columnResizable: appDefaultSettings.proTable.columnResizable,
+  ellipsis: appDefaultSettings.proTable.ellipsis,
+  bordered: appDefaultSettings.proTable.bordered,
+  fixedHeader: appDefaultSettings.proTable.fixedHeader,
+  pagination: () => ({
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (value: number) => $t("proTable.total", { total: value }),
+  }),
+  formModalWidth: 640,
+});
+
+const emit = defineEmits(["refresh", "form-submit"]);
+
+const normalizeDensity = (size: ProTableDensity | undefined): TableSize => {
+  if (size === "large" || size === "middle" || size === "small") {
+    return size;
+  }
+  return "small";
+};
+
+const cloneColumnState = (state: ColumnState): ColumnState => ({
+  ...state,
+  column: { ...state.column },
+});
+
+const resolveColumnKey = (column: ProTableColumn, index: number) => {
+  return String(column.key ?? column.dataIndex ?? `col_${index}`);
+};
+
+// Refs
+const proTableRef = ref<HTMLElement>();
+const toolbarRef = ref<HTMLElement>();
+const searchRef = ref<HTMLElement>();
+const tableSectionRef = ref<HTMLElement>();
+
+// State
+const dataSource = ref<Record<string, unknown>[]>([]);
+const loading = ref(false);
+const searchForm = ref<Record<string, unknown>>({});
+const searchCollapsed = ref(
+  props.search !== false ? (props.search?.defaultCollapsed ?? true) : true,
+);
+const currentPage = ref(
+  props.pagination !== false ? props.pagination?.current || 1 : 1,
+);
+const pageSize = ref(
+  props.pagination !== false ? props.pagination?.pageSize || 10 : 10,
+);
+const total = ref(0);
+const tableSize = ref<TableSize>(normalizeDensity(props.size));
+const tableScrollY = ref<number>();
+const shouldUseVerticalScroll = ref(false);
+const tableViewportWidth = ref(0);
+const viewportWidth = ref(
+  typeof window !== "undefined" ? window.innerWidth : 1200,
+);
+const tableFilters = ref<Record<string, (string | number | boolean)[] | null>>(
+  {},
+);
+
+interface TableSorterItem {
+  field?: string;
+  order?: "ascend" | "descend";
+}
+
+const tableSorter = ref<TableSorterItem | TableSorterItem[] | null>(null);
+
+const showIndexColumn = ref(true);
+const defaultShowIndexColumn = ref(true);
+const columnStates = ref<ColumnState[]>([]);
+const defaultColumnStates = ref<ColumnState[]>([]);
+const draggingColumnKey = ref("");
+const isResizingColumn = ref(false);
+const resizingColumnKey = ref<string | null>(null);
+const widthsPreparedForCurrentDrag = ref(false);
+const tableComponents = computed(() => {
+  if (!effectiveColumnResizable.value) {
+    return undefined;
+  }
+
+  return {
+    header: {
+      cell: ResizableTitle,
+    },
+  };
+});
+
+const normalizeHeaderFilterMode = (
+  mode: HeaderFilterMode | undefined,
+): HeaderFilterMode => {
+  return mode ?? props.headerFilter?.defaultMode ?? "server";
+};
+
+const isClientHeaderFilterMode = (mode: HeaderFilterMode) => {
+  return mode === "client" || mode === "hybrid";
+};
+
+const isServerHeaderFilterMode = (mode: HeaderFilterMode) => {
+  return mode === "server" || mode === "hybrid";
+};
+
+const normalizeSelectedFilterValues = (
+  value: unknown,
+): (string | number | boolean)[] => {
+  if (Array.isArray(value)) {
+    return value.filter(
+      (item): item is string | number | boolean =>
+        item !== undefined && item !== null && item !== "",
+    );
+  }
+  if (value === undefined || value === null || value === "") {
+    return [];
+  }
+  if (
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  ) {
+    return [value];
+  }
+  return [];
+};
+
+const normalizeTableFilters = (
+  filters: Record<string, unknown> | undefined,
+) => {
+  const normalized: Record<string, (string | number | boolean)[] | null> = {};
+  if (!filters || typeof filters !== "object") {
+    return normalized;
+  }
+
+  Object.keys(filters).forEach((key) => {
+    const values = normalizeSelectedFilterValues(filters[key]);
+    normalized[key] = values.length > 0 ? values : null;
+  });
+
+  return normalized;
+};
+
+const splitKeywordTerms = (keyword: string) => {
+  return keyword
+    .trim()
+    .split(/\s+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+};
+
+const getColumnCellValue = (
+  record: Record<string, unknown>,
+  column: ProTableColumn,
+) => {
+  return record?.[String(column.dataIndex)];
+};
+
+// Computed
+const toolbarActions = computed(() => props.toolbar?.actions || []);
+
+const showRefreshAction = computed(() => {
+  if (!props.toolbar) return true;
+  return !toolbarActions.value.includes("!refresh");
+});
+
+const showColumnSettingAction = computed(() => {
+  if (!props.toolbar) return true;
+  return !toolbarActions.value.includes("!columnSetting");
+});
+
+const showDensityAction = computed(() => {
+  if (!props.toolbar) return true;
+  return !toolbarActions.value.includes("!density");
+});
+
+const headerFilterEntries = computed(() => {
+  const map = new Map<
+    string,
+    { key: string; column: ProTableColumn; headerFilter: ProTableHeaderFilter }
+  >();
+
+  columnStates.value.forEach((state, index) => {
+    const column = state.column;
+    if (!column.headerFilter) {
+      return;
+    }
+
+    const key = resolveColumnKey(column, index);
+    const entry = {
+      key,
+      column,
+      headerFilter: column.headerFilter,
+    };
+
+    map.set(key, entry);
+    map.set(String(column.dataIndex), entry);
+
+    if (column.key) {
+      map.set(String(column.key), entry);
+    }
+  });
+
+  return map;
+});
+
+const hasBuiltInHeaderFilter = computed(() => {
+  return headerFilterEntries.value.size > 0;
+});
+
+const hasBuiltInKeywordHeaderFilter = computed(() => {
+  return Array.from(headerFilterEntries.value.values()).some(
+    (entry) => entry.headerFilter.type === "keyword",
+  );
+});
+
+const effectiveResizable = computed(() => {
+  return props.resizable ?? appDefaultSettings.proTable.resizable;
+});
+
+const effectiveColumnResizable = computed(() => {
+  return props.columnResizable ?? appDefaultSettings.proTable.columnResizable;
+});
+
+const effectiveEllipsis = computed(() => {
+  return props.ellipsis ?? appDefaultSettings.proTable.ellipsis;
+});
+
+const effectiveBordered = computed(() => {
+  return props.bordered ?? appDefaultSettings.proTable.bordered;
+});
+
+const effectiveFixedHeader = computed(() => {
+  return props.fixedHeader ?? appDefaultSettings.proTable.fixedHeader;
+});
+
+const effectiveHeight = computed(() => {
+  return props.height ?? appDefaultSettings.proTable.height;
+});
+
+const isAutoHeight = computed(() => {
+  return String(effectiveHeight.value) === "auto";
+});
+
+const isFillMode = computed(() => {
+  return isAutoHeight.value || effectiveFixedHeader.value;
+});
+
+const tableRootStyle = computed<Record<string, string> | undefined>(() => {
+  if (isAutoHeight.value) {
+    return { height: "100%" };
+  }
+
+  const height =
+    typeof effectiveHeight.value === "number"
+      ? `${effectiveHeight.value}px`
+      : String(effectiveHeight.value);
+
+  return { height };
+});
+
+const searchColumns = computed(() => {
+  return props.columns.filter((col) => col.search);
+});
+
+const showSearchForm = computed(() => {
+  return props.search !== false && searchColumns.value.length > 0;
+});
+
+const searchLabelWidth = computed(() => {
+  if (props.search === false) return 6;
+  return props.search?.labelWidth || 6;
+});
+
+const searchColumnsPerRow = computed(() => {
+  if (viewportWidth.value >= 992) {
+    return 3;
+  }
+  if (viewportWidth.value >= 576) {
+    return 2;
+  }
+  return 1;
+});
+
+const collapsedSearchRows = computed(() => {
+  if (props.search === false) return 1;
+  const rows = Number(props.search?.collapsedRows ?? 1);
+  if (!Number.isFinite(rows)) return 1;
+  return Math.max(1, Math.floor(rows));
+});
+
+const shouldReserveSearchActionSlot = computed(() => {
+  return collapsedSearchRows.value === 1 || collapsedSearchRows.value > 2;
+});
+
+const collapsedSearchFieldLimit = computed(() => {
+  const totalSlots = collapsedSearchRows.value * searchColumnsPerRow.value;
+  if (shouldReserveSearchActionSlot.value) {
+    return Math.max(1, totalSlots - 1);
+  }
+  return Math.max(1, totalSlots);
+});
+
+const showSearchCollapseToggle = computed(() => {
+  return searchColumns.value.length > collapsedSearchFieldLimit.value;
+});
+
+const visibleSearchColumns = computed(() => {
+  if (searchCollapsed.value && showSearchCollapseToggle.value) {
+    return searchColumns.value.slice(0, collapsedSearchFieldLimit.value);
+  }
+  return searchColumns.value;
+});
+
+const paginationEnabled = computed(() => {
+  return props.pagination !== false;
+});
+
+const paginationConfig = computed(() => {
+  if (!paginationEnabled.value) {
+    return false;
+  }
+
+  const pagination = props.pagination || {};
+
+  return {
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (value: number) => $t("proTable.total", { total: value }),
+    ...pagination,
+    current: currentPage.value,
+    pageSize: pageSize.value,
+    total: total.value,
+  };
+});
+
+const displayColumns = computed<ProTableColumn[]>(() => {
+  const columns = columnStates.value
+    .filter((state) => state.checked)
+    .map((state) => ({
+      ...state.column,
+      key: state.column.key || state.key,
+      fixed: state.fixed,
+      ellipsis: state.column.ellipsis ?? effectiveEllipsis.value,
+      resizable: state.column.resizable ?? effectiveResizable.value,
+    }));
+
+  if (!showIndexColumn.value) {
+    return columns;
+  }
+
+  return [
+    {
+      title: "#",
+      dataIndex: "__index",
+      key: "__index",
+      width: 64,
+      align: "center",
+      fixed: "left",
+      ellipsis: false,
+      resizable: false,
+    },
+    ...columns,
+  ];
+});
+
+const hasFixedColumns = computed(() => {
+  return displayColumns.value.some((col) => Boolean(col.fixed));
+});
+
+const parseColumnWidth = (width: unknown): number | null => {
+  if (typeof width === "number" && Number.isFinite(width)) {
+    return width;
+  }
+
+  if (typeof width !== "string") {
+    return null;
+  }
+
+  const value = width.trim();
+  if (!value) {
+    return null;
+  }
+
+  if (/^\d+(\.\d+)?$/.test(value)) {
+    return Number.parseFloat(value);
+  }
+
+  if (value.endsWith("px")) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+
+  return null;
+};
+
+const collectVisibleHeaderWidths = () => {
+  const section = tableSectionRef.value;
+  const widthMap = new Map<string, number>();
+  if (!section) {
+    return widthMap;
+  }
+
+  const headerCells = section.querySelectorAll(
+    ".ant-table-header thead th[data-pro-table-col-key]",
+  ) as NodeListOf<HTMLElement>;
+
+  headerCells.forEach((cell) => {
+    const key = cell.getAttribute("data-pro-table-col-key");
+    if (!key) {
+      return;
+    }
+
+    const width = Math.max(
+      MIN_COLUMN_WIDTH,
+      Math.floor(cell.getBoundingClientRect().width),
+    );
+    if (!Number.isFinite(width) || width <= 0) {
+      return;
+    }
+
+    const prev = widthMap.get(key);
+    if (prev == null || width > prev) {
+      widthMap.set(key, width);
+    }
+  });
+
+  return widthMap;
+};
+
+const ensureColumnWidthsBeforeResize = (
+  activeKey: string,
+  activeWidth: number,
+) => {
+  const measuredWidths = collectVisibleHeaderWidths();
+  const activeMeasuredWidth = parseColumnWidth(activeWidth);
+  let changed = false;
+
+  const nextStates = columnStates.value.map((state) => {
+    const currentWidth = parseColumnWidth(state.column.width);
+    if (currentWidth != null) {
+      return state;
+    }
+
+    const measuredWidth =
+      state.key === activeKey
+        ? (activeMeasuredWidth ?? measuredWidths.get(state.key))
+        : measuredWidths.get(state.key);
+
+    if (measuredWidth == null) {
+      return state;
+    }
+
+    changed = true;
+    return {
+      ...state,
+      column: {
+        ...state.column,
+        width: Math.max(MIN_COLUMN_WIDTH, Math.floor(measuredWidth)),
+      },
+    };
+  });
+
+  if (changed) {
+    columnStates.value = nextStates;
+    scheduleMeasureTable();
+  }
+};
+
+const handleColumnWidthResizeStart = (key: string) => {
+  return (_event: MouseEvent, width: number) => {
+    isResizingColumn.value = true;
+    resizingColumnKey.value = key;
+    widthsPreparedForCurrentDrag.value = false;
+    if (!Number.isFinite(width) || width <= 0) {
+      return;
+    }
+    // 在拖拽开始时就准备好所有列的宽度，避免在鼠标移动时进行 DOM 查询
+    ensureColumnWidthsBeforeResize(key, width);
+    widthsPreparedForCurrentDrag.value = true;
+  };
+};
+
+const handleColumnWidthResizeEnd = (key: string) => {
+  return (_event: MouseEvent) => {
+    if (resizingColumnKey.value && resizingColumnKey.value !== key) {
+      return;
+    }
+    isResizingColumn.value = false;
+    resizingColumnKey.value = null;
+    widthsPreparedForCurrentDrag.value = false;
+    scheduleMeasureTable();
+  };
+};
+
+const handleColumnWidthResize = (key: string) => {
+  return (_event: MouseEvent, { size }: ResizeInfo) => {
+    if (!isResizingColumn.value) {
+      isResizingColumn.value = true;
+      resizingColumnKey.value = key;
+      widthsPreparedForCurrentDrag.value = false;
+    }
+
+    const item = columnStates.value.find((state) => state.key === key);
+    if (!item) return;
+
+    item.column = {
+      ...item.column,
+      width: Math.max(MIN_COLUMN_WIDTH, Math.floor(size.width)),
+    };
+  };
+};
+
+const columnTotalWidth = computed(() => {
+  return displayColumns.value.reduce((sum, column) => {
+    const width = parseColumnWidth((column as ProTableColumn).width);
+    return width == null ? sum : sum + width;
+  }, 0);
+});
+
+const canMeasureColumnWidth = computed(() => {
+  if (displayColumns.value.length === 0) {
+    return false;
+  }
+  return displayColumns.value.every(
+    (column) => parseColumnWidth((column as ProTableColumn).width) != null,
+  );
+});
+
+const shouldUseHorizontalScroll = computed(() => {
+  if (!hasFixedColumns.value) {
+    return false;
+  }
+
+  if (!canMeasureColumnWidth.value || tableViewportWidth.value <= 0) {
+    return true;
+  }
+
+  return columnTotalWidth.value > tableViewportWidth.value + 1;
+});
+
+const applyKeywordClientFilter = (
+  value: unknown,
+  record: Record<string, unknown>,
+  column: ProTableColumn,
+  headerFilter: ProTableHeaderFilter,
+) => {
+  if (typeof headerFilter.clientFilter === "function") {
+    return headerFilter.clientFilter(value, record, column);
+  }
+
+  const keyword = String(value ?? "").trim();
+  if (!keyword) {
+    return true;
+  }
+
+  const rawText = String(getColumnCellValue(record, column) ?? "");
+  const caseSensitive = Boolean(headerFilter.caseSensitive);
+  const normalizedText = caseSensitive ? rawText : rawText.toLowerCase();
+  const terms = splitKeywordTerms(keyword).map((item) =>
+    caseSensitive ? item : item.toLowerCase(),
+  );
+
+  if (terms.length === 0) {
+    return true;
+  }
+
+  const matchAll = headerFilter.matchAllKeywords !== false;
+  if (matchAll) {
+    return terms.every((term) => normalizedText.includes(term));
+  }
+
+  return terms.some((term) => normalizedText.includes(term));
+};
+
+const applySelectClientFilter = (
+  value: unknown,
+  record: Record<string, unknown>,
+  column: ProTableColumn,
+  headerFilter: ProTableHeaderFilter,
+) => {
+  if (typeof headerFilter.clientFilter === "function") {
+    return headerFilter.clientFilter(value, record, column);
+  }
+
+  const cellValue = getColumnCellValue(record, column);
+  if (Array.isArray(cellValue)) {
+    return cellValue.map((item) => String(item)).includes(String(value));
+  }
+
+  return String(cellValue ?? "") === String(value ?? "");
+};
+
+const tableColumns = computed(() => {
+  const sourceColumns = shouldUseHorizontalScroll.value
+    ? displayColumns.value
+    : displayColumns.value.map((column) => ({
+        ...column,
+        fixed: undefined,
+      }));
+
+  return sourceColumns.map((column, index) => {
+    const key = resolveColumnKey(column, index);
+    const width = parseColumnWidth(column.width);
+    const canResize = Boolean(
+      effectiveColumnResizable.value &&
+      (column.resizable ?? effectiveResizable.value),
+    );
+    const headerFilter = column.headerFilter;
+    const headerFilterMode = normalizeHeaderFilterMode(headerFilter?.mode);
+    const selectedValues = normalizeSelectedFilterValues(
+      tableFilters.value[key] ??
+        tableFilters.value[String(column.dataIndex)] ??
+        (column.key ? tableFilters.value[String(column.key)] : undefined),
+    );
+    const currentFilterIconType =
+      headerFilter?.icon ??
+      (headerFilter?.type === "keyword" ? "search" : "filter");
+
+    const enhancedColumn: Record<string, unknown> = {
+      ...column,
+    };
+
+    if (headerFilter) {
+      enhancedColumn.__proHeaderFilter = headerFilter;
+      enhancedColumn.__proHeaderFilterKey = key;
+      enhancedColumn.filteredValue =
+        selectedValues.length > 0 ? selectedValues : null;
+      enhancedColumn.filterIcon =
+        enhancedColumn.filterIcon ??
+        ((filtered: boolean) => {
+          const IconComp =
+            currentFilterIconType === "search" ? SearchOutlined : FilterFilled;
+          return h(IconComp, {
+            style: { color: filtered ? "var(--color-primary)" : undefined },
+          });
+        });
+
+      if (headerFilter.type === "keyword") {
+        enhancedColumn.filterDropdown =
+          enhancedColumn.filterDropdown ?? (() => null);
+        if (!enhancedColumn.customFilterDropdown) {
+          enhancedColumn.customFilterDropdown = true;
+        }
+        if (
+          isClientHeaderFilterMode(headerFilterMode) &&
+          typeof enhancedColumn.onFilter !== "function"
+        ) {
+          enhancedColumn.onFilter = (
+            value: unknown,
+            record: Record<string, unknown>,
+          ) => applyKeywordClientFilter(value, record, column, headerFilter);
+        }
+      }
+
+      if (headerFilter.type === "select") {
+        if (
+          !Array.isArray(enhancedColumn.filters) ||
+          enhancedColumn.filters.length === 0
+        ) {
+          enhancedColumn.filters = (headerFilter.options ?? []).map((item) => ({
+            text: item.label,
+            value: item.value,
+          }));
+        }
+        if (enhancedColumn.filterMultiple === undefined) {
+          enhancedColumn.filterMultiple = Boolean(headerFilter.multiple);
+        }
+        if (
+          isClientHeaderFilterMode(headerFilterMode) &&
+          typeof enhancedColumn.onFilter !== "function"
+        ) {
+          enhancedColumn.onFilter = (
+            value: unknown,
+            record: Record<string, unknown>,
+          ) => applySelectClientFilter(value, record, column, headerFilter);
+        }
+      }
+    }
+
+    const originalOnHeaderCell = (enhancedColumn as Record<string, unknown>)
+      .onHeaderCell;
+
+    return {
+      ...enhancedColumn,
+      onHeaderCell: (headerColumn: Record<string, unknown>) => {
+        const originalCell =
+          typeof originalOnHeaderCell === "function"
+            ? (originalOnHeaderCell(headerColumn) ?? {})
+            : {};
+        const mergedCell: Record<string, unknown> = {
+          ...originalCell,
+          "data-pro-table-col-key": key,
+        };
+
+        if (width != null) {
+          mergedCell.width = width;
+        }
+
+        if (canResize) {
+          mergedCell.resizable = true;
+          mergedCell.onResizeStart = handleColumnWidthResizeStart(key);
+          mergedCell.onResize = handleColumnWidthResize(key);
+          mergedCell.onResizeEnd = handleColumnWidthResizeEnd(key);
+        }
+
+        return mergedCell;
+      },
+    };
+  });
+});
+
+const tableScroll = computed(() => {
+  const scroll: Record<string, string | number> = {};
+
+  if (hasFixedColumns.value && shouldUseHorizontalScroll.value) {
+    if (canMeasureColumnWidth.value && tableViewportWidth.value > 0) {
+      scroll.x = Math.max(columnTotalWidth.value, tableViewportWidth.value);
+    } else {
+      scroll.x = "max-content";
+    }
+  }
+
+  if (isFillMode.value && shouldUseVerticalScroll.value && tableScrollY.value) {
+    scroll.y = tableScrollY.value;
+  }
+
+  return Object.keys(scroll).length > 0 ? scroll : undefined;
+});
+
+const densityMenuProps = computed(() => ({
+  items: [
+    {
+      key: "large",
+      label: $t("proTable.densityLarge"),
+    },
+    {
+      key: "middle",
+      label: $t("proTable.densityMiddle"),
+    },
+    {
+      key: "small",
+      label: $t("proTable.densitySmall"),
+    },
+  ],
+  selectedKeys: [tableSize.value],
+  onClick: ({ key }: { key: string | number }) => {
+    tableSize.value = normalizeDensity(String(key) as ProTableDensity);
+    scheduleMeasureTable();
+  },
+}));
+
+// Methods
+const initializeColumnStates = () => {
+  const previousFilters = { ...tableFilters.value };
+  const states = props.columns.map((column, index) => {
+    const key = resolveColumnKey(column, index);
+    const checked = !column.hideInTable;
+    return {
+      key,
+      title: String(column.title ?? column.dataIndex ?? key),
+      checked,
+      fixed: column.fixed,
+      defaultChecked: checked,
+      defaultFixed: column.fixed,
+      column: {
+        ...column,
+        key: column.key || key,
+      },
+    } as ColumnState;
+  });
+
+  columnStates.value = states;
+  defaultColumnStates.value = states.map(cloneColumnState);
+  showIndexColumn.value = defaultShowIndexColumn.value;
+
+  const nextFilters: Record<string, (string | number | boolean)[] | null> = {};
+  states.forEach((state) => {
+    const key = state.key;
+    const previous = normalizeSelectedFilterValues(previousFilters[key]);
+    if (previous.length > 0) {
+      nextFilters[key] = previous;
+      return;
+    }
+
+    const initial = normalizeSelectedFilterValues(state.column.filteredValue);
+    if (initial.length > 0) {
+      nextFilters[key] = initial;
+      return;
+    }
+
+    if (state.column.key) {
+      const keyByColumnKey = normalizeSelectedFilterValues(
+        previousFilters[String(state.column.key)],
+      );
+      if (keyByColumnKey.length > 0) {
+        nextFilters[key] = keyByColumnKey;
+        return;
+      }
+    }
+
+    const keyByDataIndex = normalizeSelectedFilterValues(
+      previousFilters[String(state.column.dataIndex)],
+    );
+    if (keyByDataIndex.length > 0) {
+      nextFilters[key] = keyByDataIndex;
+    }
+  });
+
+  tableFilters.value = nextFilters;
+};
+
+const getRowIndex = (index: number) => {
+  if (!paginationEnabled.value) {
+    return index + 1;
+  }
+  return (currentPage.value - 1) * pageSize.value + index + 1;
+};
+
+const toggleColumnChecked = (key: string, checked: boolean) => {
+  const item = columnStates.value.find((state) => state.key === key);
+  if (!item) return;
+
+  item.checked = checked;
+  scheduleMeasureTable();
+};
+
+const handleColumnCheckedChange = (
+  key: string,
+  event: { target?: { checked?: boolean } },
+) => {
+  toggleColumnChecked(key, Boolean(event?.target?.checked));
+};
+
+const toggleColumnFixed = (key: string, position: "left" | "right") => {
+  const item = columnStates.value.find((state) => state.key === key);
+  if (!item) return;
+
+  item.fixed = item.fixed === position ? undefined : position;
+  scheduleMeasureTable();
+};
+
+const handleToggleAllColumns = () => {
+  const allChecked =
+    columnStates.value.length > 0 &&
+    columnStates.value.every((item) => item.checked);
+  if (allChecked) {
+    columnStates.value.forEach((item) => {
+      item.checked = !item.checked;
+    });
+  } else {
+    columnStates.value.forEach((item) => {
+      item.checked = true;
+    });
+  }
+  scheduleMeasureTable();
+};
+
+const toggleIndexColumn = () => {
+  showIndexColumn.value = !showIndexColumn.value;
+  scheduleMeasureTable();
+};
+
+const handleResetColumns = () => {
+  columnStates.value = defaultColumnStates.value.map(cloneColumnState);
+  showIndexColumn.value = defaultShowIndexColumn.value;
+  scheduleMeasureTable();
+};
+
+const handleDragStart = (key: string) => {
+  draggingColumnKey.value = key;
+};
+
+const handleDragEnd = () => {
+  draggingColumnKey.value = "";
+};
+
+const handleDrop = (targetKey: string) => {
+  const sourceKey = draggingColumnKey.value;
+  if (!sourceKey || sourceKey === targetKey) return;
+
+  const sourceIndex = columnStates.value.findIndex(
+    (item) => item.key === sourceKey,
+  );
+  const targetIndex = columnStates.value.findIndex(
+    (item) => item.key === targetKey,
+  );
+  if (sourceIndex === -1 || targetIndex === -1) return;
+
+  const list = [...columnStates.value];
+  const [dragItem] = list.splice(sourceIndex, 1);
+  list.splice(targetIndex, 0, dragItem);
+  columnStates.value = list;
+  draggingColumnKey.value = "";
+  scheduleMeasureTable();
+};
+
+const normalizeFieldLabel = (label: unknown) => {
+  return String(label ?? "");
+};
+
+const buildEnterPlaceholder = (label: unknown) => {
+  return $t("proForm.enterPlaceholder", { label: normalizeFieldLabel(label) });
+};
+
+const buildSelectPlaceholder = (label: unknown) => {
+  return $t("proForm.selectPlaceholder", { label: normalizeFieldLabel(label) });
+};
+
+const resolveSearchType = (col: ProTableColumn): SearchType => {
+  if (col.searchType) return col.searchType;
+  if (col.options || col.searchOptions || col.valueEnum) {
+    const vt = col.valueType;
+    if (vt === "tag" || vt === "badge") return "select";
+  }
+  const vt = col.valueType;
+  if (vt === "tag" || vt === "badge") return "select";
+  if (vt === "date" || vt === "dateTime" || vt === "time") return "datePicker";
+  if (vt === "dateRange") return "dateRange";
+  if (vt === "money" || vt === "percent" || vt === "progress") return "number";
+  return "input";
+};
+
+const resolveSearchOptions = (col: ProTableColumn) => {
+  if (col.searchOptions) return col.searchOptions;
+  if (col.options)
+    return col.options.map((o) => ({ label: o.label, value: o.value }));
+  if (col.valueEnum) {
+    return Object.entries(col.valueEnum).map(([value, config]) => ({
+      label: config.text,
+      value,
+    }));
+  }
+  return undefined;
+};
+
+const resolveValueEnum = (col: ProTableColumn) => {
+  if (col.valueEnum) return col.valueEnum;
+  if (col.options) {
+    const enumMap: Record<
+      string,
+      { text: string; status?: string; color?: string }
+    > = {};
+    col.options.forEach((o) => {
+      enumMap[String(o.value)] = {
+        text: o.label,
+        status: o.status,
+        color: o.color,
+      };
+    });
+    return enumMap;
+  }
+  return undefined;
+};
+
+const getHeaderFilterEntry = (column: Record<string, unknown>) => {
+  if (!column) {
+    return undefined;
+  }
+
+  const directHeaderFilter = column.__proHeaderFilter as
+    | ProTableHeaderFilter
+    | undefined;
+  const directKey = column.__proHeaderFilterKey as string | undefined;
+  if (directHeaderFilter) {
+    return {
+      key: String(directKey || column.key || column.dataIndex || ""),
+      headerFilter: directHeaderFilter,
+    };
+  }
+
+  const keys = [column.key, column.dataIndex]
+    .filter(Boolean)
+    .map((item) => String(item));
+
+  for (const key of keys) {
+    const entry = headerFilterEntries.value.get(key);
+    if (entry) {
+      return {
+        key: entry.key,
+        headerFilter: entry.headerFilter,
+      };
+    }
+  }
+
+  return undefined;
+};
+
+const shouldRenderBuiltInFilterIcon = (column: Record<string, unknown>) => {
+  return Boolean(getHeaderFilterEntry(column));
+};
+
+const getBuiltInFilterIconType = (column: Record<string, unknown>) => {
+  const entry = getHeaderFilterEntry(column);
+  if (!entry) {
+    return "filter";
+  }
+  return (
+    entry.headerFilter.icon ??
+    (entry.headerFilter.type === "keyword" ? "search" : "filter")
+  );
+};
+
+const isBuiltInKeywordFilterColumn = (column: Record<string, unknown>) => {
+  const entry = getHeaderFilterEntry(column);
+  return entry?.headerFilter.type === "keyword";
+};
+
+const getBuiltInKeywordFilterPlaceholder = (
+  column: Record<string, unknown>,
+) => {
+  const entry = getHeaderFilterEntry(column);
+  if (entry?.headerFilter.placeholder) {
+    return entry.headerFilter.placeholder;
+  }
+  return buildEnterPlaceholder(column?.title);
+};
+
+const getBuiltInKeywordFilterValue = (selectedKeys: unknown) => {
+  const values = normalizeSelectedFilterValues(selectedKeys);
+  return String(values[0] ?? "");
+};
+
+const handleBuiltInKeywordInput = (
+  value: string,
+  setSelectedKeys?: (values: string[]) => void,
+) => {
+  if (!setSelectedKeys) return;
+  setSelectedKeys(value ? [String(value)] : []);
+};
+
+const handleBuiltInKeywordSearch = (confirm?: (param?: unknown) => void) => {
+  confirm?.();
+};
+
+const handleBuiltInKeywordReset = (
+  setSelectedKeys?: (values: string[]) => void,
+  clearFilters?: () => void,
+  confirm?: (param?: unknown) => void,
+) => {
+  clearFilters?.();
+  setSelectedKeys?.([]);
+  confirm?.();
+};
+
+const buildHeaderFilterRequestParams = () => {
+  const payloadMode = props.headerFilter?.requestPayload ?? "flat";
+  const nestedKey = props.headerFilter?.nestedKey || "filters";
+  const flatParams: Record<string, unknown> = {};
+  const nestedParams: Record<string, unknown> = {};
+
+  Object.keys(tableFilters.value).forEach((tableFilterKey) => {
+    const selectedValues = normalizeSelectedFilterValues(
+      tableFilters.value[tableFilterKey],
+    );
+    if (selectedValues.length === 0) {
+      return;
+    }
+
+    const entry = headerFilterEntries.value.get(tableFilterKey);
+    if (!entry) {
+      return;
+    }
+
+    const mode = normalizeHeaderFilterMode(entry.headerFilter.mode);
+    if (!isServerHeaderFilterMode(mode)) {
+      return;
+    }
+
+    const paramKey =
+      entry.headerFilter.paramKey || String(entry.column.dataIndex);
+    const isMultiple = Boolean(entry.headerFilter.multiple);
+    let requestValue: unknown;
+
+    if (entry.headerFilter.type === "keyword") {
+      requestValue = String(selectedValues[0] ?? "");
+    } else {
+      requestValue = isMultiple ? selectedValues : selectedValues[0];
+    }
+
+    if (typeof entry.headerFilter.transformRequestValue === "function") {
+      requestValue = entry.headerFilter.transformRequestValue(
+        requestValue,
+        selectedValues,
+      );
+    }
+
+    if (
+      requestValue === undefined ||
+      requestValue === null ||
+      requestValue === "" ||
+      (Array.isArray(requestValue) && requestValue.length === 0)
+    ) {
+      return;
+    }
+
+    if (payloadMode === "nested") {
+      nestedParams[paramKey] = requestValue;
+      return;
+    }
+
+    flatParams[paramKey] = requestValue;
+  });
+
+  if (payloadMode === "nested") {
+    if (Object.keys(nestedParams).length === 0) {
+      return {};
+    }
+    return {
+      [nestedKey]: nestedParams,
+    };
+  }
+
+  return flatParams;
+};
+
+const buildSorterRequestParams = () => {
+  const sorter = tableSorter.value;
+  if (!sorter) {
+    return {};
+  }
+
+  if (Array.isArray(sorter)) {
+    const activeSorters = sorter.filter((item) => item?.field && item?.order);
+    if (activeSorters.length === 0) {
+      return {};
+    }
+    return {
+      sorter: activeSorters.map((item) => ({
+        field: item.field,
+        order: item.order,
+      })),
+    };
+  }
+
+  if (sorter?.field && sorter?.order) {
+    return {
+      sorter: {
+        field: sorter.field,
+        order: sorter.order,
+      },
+    };
+  }
+
+  return {};
+};
+
+const loadData = async () => {
+  loading.value = true;
+  try {
+    const params: Record<string, unknown> = {
+      ...searchForm.value,
+      ...buildHeaderFilterRequestParams(),
+      ...buildSorterRequestParams(),
+    };
+
+    if (paginationEnabled.value) {
+      params.current = currentPage.value;
+      params.pageSize = pageSize.value;
+    }
+
+    const result = await props.request(params);
+
+    if (result.success) {
+      dataSource.value = result.data;
+      total.value = result.total || result.data.length;
+      scheduleMeasureTable();
+    }
+  } catch (error: unknown) {
+    message.error((error as Error).message || $t("proTable.loadDataFailed"));
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSearch = () => {
+  currentPage.value = 1;
+  loadData();
+};
+
+const handleReset = () => {
+  searchForm.value = {};
+  tableFilters.value = {};
+  tableSorter.value = null;
+  currentPage.value = 1;
+  loadData();
+};
+
+const handleRefresh = () => {
+  loadData();
+  emit("refresh");
+};
+
+interface TablePagination {
+  current?: number;
+  pageSize?: number;
+  total?: number;
+}
+
+interface TableSorter {
+  field?: string;
+  order?: "ascend" | "descend";
+}
+
+interface TableExtra {
+  action?: "paginate" | "sort" | "filter";
+}
+
+const handleTableChange = (
+  pagination: TablePagination,
+  filters: Record<string, unknown>,
+  sorter: TableSorter,
+  extra: TableExtra,
+) => {
+  if (paginationEnabled.value) {
+    const nextCurrent = Number(pagination?.current || 1);
+    const nextPageSize = Number(pagination?.pageSize || pageSize.value || 10);
+    currentPage.value = nextCurrent;
+    pageSize.value = nextPageSize;
+  }
+
+  tableFilters.value = normalizeTableFilters(filters);
+  tableSorter.value = sorter;
+
+  if (
+    extra?.action === "filter" &&
+    (props.headerFilter?.resetPageOnFilterChange ?? true)
+  ) {
+    currentPage.value = 1;
+  }
+
+  loadData();
+};
+
+const handleAction = async (
+  action: ProTableAction,
+  record: Record<string, unknown>,
+) => {
+  if (action.confirm) {
+    Modal.confirm({
+      title: $t("common.confirm"),
+      content: action.confirm,
+      onOk: async () => {
+        await action.onClick?.(record);
+        loadData();
+      },
+    });
+    return;
+  }
+
+  await action.onClick?.(record);
+  loadData();
+};
+
+const getOuterHeight = (el: HTMLElement) => {
+  const rect = el.getBoundingClientRect();
+  const style = window.getComputedStyle(el);
+  return (
+    rect.height +
+    Number.parseFloat(style.marginTop || "0") +
+    Number.parseFloat(style.marginBottom || "0")
+  );
+};
+
+const getHeaderFallbackHeight = () => {
+  if (tableSize.value === "large") return 54;
+  if (tableSize.value === "small") return 40;
+  return 48;
+};
+
+const getPaginationFallbackHeight = () => {
+  if (!paginationEnabled.value) return 0;
+  return 56;
+};
+
+const getTitleFallbackHeight = () => {
+  if (!props.toolbar) return 0;
+  return 32;
+};
+
+const measureTableScroll = () => {
+  if (!isFillMode.value) {
+    tableScrollY.value = undefined;
+    shouldUseVerticalScroll.value = false;
+    return;
+  }
+
+  const section = tableSectionRef.value;
+  if (!section) return;
+
+  const sectionHeight = section.clientHeight;
+  if (!sectionHeight) return;
+
+  const tableWrapperEl = section.querySelector(
+    ".ant-table-wrapper",
+  ) as HTMLElement | null;
+  tableViewportWidth.value = Math.floor(
+    tableWrapperEl?.clientWidth || section.clientWidth || 0,
+  );
+
+  const paginationEl = section.querySelector(
+    ".ant-pagination",
+  ) as HTMLElement | null;
+  const paginationHeight = paginationEl
+    ? getOuterHeight(paginationEl)
+    : getPaginationFallbackHeight();
+
+  const titleEl = section.querySelector(
+    ".ant-table-title",
+  ) as HTMLElement | null;
+  const titleHeight = titleEl
+    ? getOuterHeight(titleEl)
+    : getTitleFallbackHeight();
+
+  const headerEl = section.querySelector(
+    ".ant-table-header",
+  ) as HTMLElement | null;
+  const theadEl = section.querySelector(
+    ".ant-table-thead",
+  ) as HTMLElement | null;
+  const headerHeight = headerEl
+    ? headerEl.getBoundingClientRect().height
+    : theadEl?.getBoundingClientRect().height || getHeaderFallbackHeight();
+
+  const nextY = Math.max(
+    120,
+    Math.floor(
+      sectionHeight - paginationHeight - titleHeight - headerHeight - 2,
+    ),
+  );
+
+  const bodyTableEl = section.querySelector(
+    ".ant-table-body table, .ant-table-content table",
+  ) as HTMLElement | null;
+  const bodyContentHeight = bodyTableEl
+    ? bodyTableEl.getBoundingClientRect().height
+    : 0;
+  shouldUseVerticalScroll.value = bodyContentHeight > nextY + 1;
+
+  if (!tableScrollY.value || Math.abs(nextY - tableScrollY.value) > 1) {
+    tableScrollY.value = nextY;
+  }
+};
+
+let rafId = 0;
+let resizeObserver: ResizeObserver | null = null;
+const handleWindowResize = () => {
+  viewportWidth.value = window.innerWidth;
+};
+
+const scheduleMeasureTable = () => {
+  if (rafId) {
+    cancelAnimationFrame(rafId);
+  }
+  rafId = requestAnimationFrame(() => {
+    rafId = 0;
+    nextTick(() => {
+      measureTableScroll();
+    });
+  });
+};
+
+// Lifecycle
+onMounted(() => {
+  handleWindowResize();
+  window.addEventListener("resize", handleWindowResize);
+
+  initializeColumnStates();
+  measureTableScroll();
+  loadData();
+
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      scheduleMeasureTable();
+    });
+
+    if (proTableRef.value) resizeObserver.observe(proTableRef.value);
+    if (toolbarRef.value) resizeObserver.observe(toolbarRef.value);
+    if (searchRef.value) resizeObserver.observe(searchRef.value);
+    if (tableSectionRef.value) resizeObserver.observe(tableSectionRef.value);
+  }
+
+  scheduleMeasureTable();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleWindowResize);
+
+  if (rafId) {
+    cancelAnimationFrame(rafId);
+    rafId = 0;
+  }
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+
+watch(
+  () => props.columns,
+  () => {
+    initializeColumnStates();
+    scheduleMeasureTable();
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.pagination,
+  (value) => {
+    if (value === false) {
+      return;
+    }
+
+    if (value?.current != null) {
+      currentPage.value = Number(value.current);
+    }
+    if (value?.pageSize != null) {
+      pageSize.value = Number(value.pageSize);
+    }
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.size,
+  (value) => {
+    tableSize.value = normalizeDensity(value);
+    scheduleMeasureTable();
+  },
+);
+
+watch(
+  () => props.height,
+  () => {
+    scheduleMeasureTable();
+  },
+);
+
+watch(
+  () => props.search,
+  (value) => {
+    if (value !== false) {
+      searchCollapsed.value = value?.defaultCollapsed ?? true;
+      nextTick(() => {
+        if (resizeObserver && searchRef.value) {
+          resizeObserver.observe(searchRef.value);
+        }
+      });
+    }
+    scheduleMeasureTable();
+  },
+  { deep: true },
+);
+
+watch(
+  [searchCollapsed, dataSource, total, currentPage, pageSize, displayColumns],
+  () => {
+    if (isResizingColumn.value) {
+      return;
+    }
+    scheduleMeasureTable();
+  },
+  { deep: true },
+);
+
+// Built-in CRUD modal state
+const crudModalOpen = ref(false);
+const crudFormRef = ref();
+const crudFormInitialValues = ref<Record<string, unknown>>({});
+const editingRecord = ref<Record<string, unknown> | null>(null);
+
+const crudModalTitle = computed(() => {
+  if (editingRecord.value) {
+    return props.formEditTitle || $t("common.edit");
+  }
+  return props.formCreateTitle || $t("common.add");
+});
+
+const openCreateModal = (initialValues?: Record<string, unknown>) => {
+  editingRecord.value = null;
+  crudFormInitialValues.value = initialValues || {};
+  crudModalOpen.value = true;
+};
+
+const openEditModal = (record: Record<string, unknown>) => {
+  editingRecord.value = record;
+  crudFormInitialValues.value = record;
+  crudModalOpen.value = true;
+};
+
+const handleCrudSubmit = async () => {
+  if (!crudFormRef.value) return;
+  const valid = await crudFormRef.value.validate();
+  if (!valid) return;
+  const values = crudFormRef.value.getFieldsValue();
+  emit("form-submit", {
+    values,
+    record: editingRecord.value,
+    isEdit: Boolean(editingRecord.value),
+  });
+  crudModalOpen.value = false;
+};
+
+// Expose methods
+defineExpose({
+  refresh: loadData,
+  reload: () => {
+    currentPage.value = 1;
+    loadData();
+  },
+  openCreateModal,
+  openEditModal,
+});
+</script>
+
+<style scoped lang="scss">
+.pro-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: transparent;
+
+  .pro-table-toolbar {
+    height: 32px;
+    min-height: 32px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+
+    .toolbar-left {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .toolbar-title {
+      font-size: 13px;
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-text-primary);
+      white-space: nowrap;
+    }
+
+    .toolbar-subtitle {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .toolbar-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .toolbar-icon-btn {
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border-radius: 6px;
+      color: var(--color-text-secondary);
+
+      &:hover {
+        color: var(--color-text-primary);
+        background: var(--color-bg-layout);
+      }
+    }
+  }
+
+  .pro-table-search {
+    padding: 8px 12px 8px;
+    margin-bottom: 15px;
+    background: var(--color-bg-container);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border-secondary);
+    flex-shrink: 0;
+
+    .search-actions {
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-end;
+      margin-left: auto;
+      min-width: 0;
+    }
+
+    .search-actions-item {
+      width: 100%;
+      margin-bottom: 0;
+
+      :deep(.ant-form-item-control) {
+        width: 100%;
+      }
+
+      :deep(.ant-form-item-control-input-content) {
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+
+    .search-actions-space {
+      justify-content: flex-end;
+    }
+
+    .rotate-180 {
+      transform: rotate(180deg);
+      transition: transform var(--duration-base);
+    }
+  }
+
+  .pro-table-main {
+    flex: 1;
+    min-height: 0;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    background: var(--color-bg-container);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border-secondary);
+    overflow: hidden;
+
+    &.main-scroll-mode {
+      overflow: auto;
+    }
+
+    &.main-fill-mode {
+      :deep(.ant-table.ant-table-bordered > .ant-table-container) {
+        border-bottom: 1px solid var(--color-border-secondary);
+      }
+
+      :deep(.ant-table-wrapper),
+      :deep(.ant-spin-nested-loading),
+      :deep(.ant-spin),
+      :deep(.ant-spin-container),
+      :deep(.ant-table),
+      :deep(.ant-table-container) {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+      }
+
+      :deep(.ant-table-content) {
+        min-height: 0;
+      }
+
+      :deep(.ant-table-body) {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto !important;
+      }
+
+      :deep(.ant-table-pagination.ant-pagination) {
+        margin: 8px 0 0;
+        flex-shrink: 0;
+      }
+    }
+
+    &.no-vertical-scrollbar {
+      :deep(.ant-table-cell-scrollbar) {
+        width: 0 !important;
+        min-width: 0 !important;
+        max-width: 0 !important;
+        padding: 0 !important;
+        border: 0 !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  :deep(.ant-table-title) {
+    padding: 0;
+    border-bottom: none;
+  }
+
+  :deep(.ant-table-container) {
+    border-radius: 10px;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  :deep(.ant-table-thead > tr > th) {
+    /* ProTable header style: use default background */
+    color: var(--color-text-primary);
+    font-weight: var(--font-weight-bold);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  :deep(.pro-table-resizable-title) {
+    position: relative;
+  }
+
+  :deep(.pro-table-resizable-title.ant-table-cell-fix-start),
+  :deep(.pro-table-resizable-title.ant-table-cell-fix-end),
+  :deep(.pro-table-resizable-title.ant-table-cell-fix-left),
+  :deep(.pro-table-resizable-title.ant-table-cell-fix-right) {
+    position: sticky !important;
+  }
+
+  :deep(.pro-table-resizable-handle) {
+    position: absolute;
+    top: 0;
+    right: -4px;
+    width: 8px;
+    height: 100%;
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+  }
+
+  :deep(.ant-table-cell-fix-right-first::after) {
+    content: none !important;
+    display: none !important;
+    box-shadow: none !important;
+    border: 0 !important;
+  }
+
+  :deep(.ant-table-tbody > tr:hover > td) {
+    background: var(--color-bg-layout) !important;
+  }
+
+  .row-action-group {
+    opacity: 1;
+    transform: none;
+  }
+
+  .table-action-btn {
+    border-radius: 8px;
+    padding-inline: 8px;
+
+    :deep(.anticon) {
+      margin-right: 2px;
+    }
+  }
+}
+
+.column-setting-dropdown {
+  width: 320px;
+  max-height: 420px;
+  background: var(--color-bg-container);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  box-shadow: var(--shadow-2);
+  overflow: hidden;
+
+  .setting-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 8px;
+    border-bottom: 1px solid var(--color-border-secondary);
+
+    .reset-btn {
+      margin-left: auto;
+    }
+  }
+
+  .setting-list {
+    max-height: 360px;
+    overflow: auto;
+    padding: 6px 0;
+  }
+
+  .setting-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 4px 8px;
+    cursor: move;
+    transition: background var(--duration-base) var(--ease-out);
+
+    &:hover {
+      background: var(--color-bg-layout);
+    }
+
+    &.dragging {
+      opacity: 0.55;
+    }
+
+    &.index-column-item {
+      cursor: default;
+      border-bottom: 1px solid var(--color-border-secondary);
+      margin-bottom: 4px;
+      padding-bottom: 8px;
+    }
+  }
+
+  .setting-item-left {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .drag-handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    color: var(--color-text-tertiary);
+    font-size: 12px;
+    letter-spacing: -1px;
+    user-select: none;
+  }
+
+  .setting-item-right {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+  }
+
+  .fixed-btn {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    color: var(--color-text-tertiary);
+
+    &.active {
+      color: var(--color-primary);
+      background: var(--color-primary-1);
+      border-radius: 4px;
+    }
+  }
+}
+
+// Density dropdown menu selected item style
+:deep(.ant-dropdown-menu .ant-menu-item-selected) {
+  background: var(--color-primary-1);
+  color: var(--color-primary);
+}
+</style>
+
+<style lang="scss">
+.pro-table-keyword-filter-panel {
+  width: 320px;
+  max-width: calc(100vw - 16px);
+  padding: 12px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--color-bg-container);
+}
+
+.pro-table-keyword-filter-field {
+  width: 100%;
+}
+
+.pro-table-keyword-filter-input {
+  width: 100%;
+}
+
+.pro-table-keyword-filter-input.ant-input,
+.pro-table-keyword-filter-input.ant-input-affix-wrapper {
+  border-radius: 8px;
+}
+
+.pro-table-keyword-filter-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.pro-table-keyword-filter-actions .ant-btn,
+.pro-table-keyword-filter-btn {
+  width: 100%;
+  height: 36px;
+  margin: 0 !important;
+  border-radius: 8px;
+}
+
+.pro-table-keyword-filter-actions .ant-btn + .ant-btn {
+  margin-inline-start: 0 !important;
+}
+
+@media (max-width: 576px) {
+  .pro-table-keyword-filter-panel {
+    width: min(320px, calc(100vw - 12px));
+    padding: 10px;
+    gap: 10px;
+  }
+
+  .pro-table-keyword-filter-actions {
+    gap: 8px;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/Pro/ProUpload/index.vue b/antdv-next-admin/src/components/Pro/ProUpload/index.vue
new file mode 100644
index 0000000..92480ac
--- /dev/null
+++ b/antdv-next-admin/src/components/Pro/ProUpload/index.vue
@@ -0,0 +1,225 @@
+<template>
+  <!-- Button mode -->
+  <a-upload
+    v-if="mode === 'button'"
+    v-model:file-list="fileList"
+    :accept="accept"
+    :max-count="maxCount"
+    :action="action"
+    :before-upload="handleBeforeUpload"
+    v-bind="$attrs"
+    @update:file-list="handleChange"
+  >
+    <a-button>
+      <UploadOutlined />
+      {{ buttonText || $t("proUpload.uploadFile") }}
+    </a-button>
+    <template v-if="hint" #itemRender>
+      <span />
+    </template>
+  </a-upload>
+
+  <!-- Dragger mode -->
+  <a-upload-dragger
+    v-else-if="mode === 'dragger'"
+    v-model:file-list="fileList"
+    :accept="accept"
+    :max-count="maxCount"
+    :action="action"
+    :before-upload="handleBeforeUpload"
+    v-bind="$attrs"
+    @update:file-list="handleChange"
+  >
+    <p class="ant-upload-drag-icon">
+      <InboxOutlined />
+    </p>
+    <p class="ant-upload-text">{{ buttonText || $t("proUpload.dragHint") }}</p>
+    <p v-if="hint" class="ant-upload-hint">{{ hint }}</p>
+  </a-upload-dragger>
+
+  <!-- Image mode -->
+  <a-upload
+    v-else-if="mode === 'image'"
+    v-model:file-list="fileList"
+    :accept="accept || 'image/*'"
+    :max-count="maxCount"
+    :action="action"
+    :before-upload="handleBeforeUpload"
+    list-type="picture-card"
+    v-bind="$attrs"
+    @update:file-list="handleChange"
+  >
+    <div v-if="!maxCount || fileList.length < maxCount">
+      <PlusOutlined />
+      <div style="margin-top: 8px">
+        {{ buttonText || $t("proUpload.uploadImage") }}
+      </div>
+    </div>
+  </a-upload>
+
+  <!-- Avatar mode -->
+  <a-upload
+    v-else-if="mode === 'avatar'"
+    v-model:file-list="fileList"
+    :accept="accept || 'image/*'"
+    :max-count="1"
+    :action="action"
+    :before-upload="handleBeforeUpload"
+    :show-upload-list="false"
+    class="pro-upload-avatar"
+    v-bind="$attrs"
+    @update:file-list="handleChange"
+  >
+    <div class="pro-upload-avatar-wrapper">
+      <a-avatar v-if="avatarUrl" :src="avatarUrl" :size="96" />
+      <div v-else class="pro-upload-avatar-placeholder">
+        <UserOutlined
+          style="font-size: 32px; color: var(--color-text-quaternary)"
+        />
+      </div>
+      <div class="pro-upload-avatar-overlay">
+        <CameraOutlined />
+      </div>
+    </div>
+  </a-upload>
+</template>
+
+<script setup lang="ts">
+import type { ProUploadMode } from "@/types/pro";
+
+import {
+  UploadOutlined,
+  InboxOutlined,
+  PlusOutlined,
+  UserOutlined,
+  CameraOutlined,
+} from "@antdv-next/icons";
+import { message } from "antdv-next";
+import { ref, watch, computed } from "vue";
+
+import { $t } from "@/locales";
+
+interface UploadFile {
+  uid: string;
+  name: string;
+  status?: string;
+  url?: string;
+  thumbUrl?: string;
+  originFileObj?: File;
+  [key: string]: unknown;
+}
+
+interface Props {
+  value?: UploadFile[] | unknown;
+  mode?: ProUploadMode;
+  accept?: string;
+  maxSize?: number;
+  maxCount?: number;
+  action?: string;
+  buttonText?: string;
+  hint?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: "button",
+  maxSize: 10,
+});
+
+const emit = defineEmits(["update:value", "change"]);
+
+const fileList = ref<UploadFile[]>(
+  (props.value as UploadFile[] | undefined) ?? []
+);
+
+watch(
+  () => props.value,
+  (val) => {
+    if (val) fileList.value = val as UploadFile[];
+  },
+);
+
+const avatarUrl = computed(() => {
+  const file = fileList.value[0];
+  if (!file) return "";
+  if (file.thumbUrl) return file.thumbUrl;
+  if (file.url) return file.url;
+  if (file.originFileObj) return URL.createObjectURL(file.originFileObj);
+  return "";
+});
+
+const handleBeforeUpload = (file: File) => {
+  if (props.maxSize) {
+    const isLt = file.size / 1024 / 1024 < props.maxSize;
+    if (!isLt) {
+      message.error($t("proUpload.fileSizeExceed", { size: props.maxSize }));
+      return false;
+    }
+  }
+  if (props.accept) {
+    const acceptList = props.accept.split(",").map((s) => s.trim());
+    const ext = "." + file.name.split(".").pop()?.toLowerCase();
+    const mime = file.type;
+    const match = acceptList.some((a) => {
+      if (a.startsWith(".")) return ext === a.toLowerCase();
+      if (a.endsWith("/*")) return mime.startsWith(a.replace("/*", "/"));
+      return mime === a;
+    });
+    if (!match) {
+      message.error($t("proUpload.fileTypeNotAllowed"));
+      return false;
+    }
+  }
+  return true;
+};
+
+const handleChange = (files: UploadFile[]) => {
+  fileList.value = files;
+  emit("update:value", files);
+  emit("change", files);
+};
+</script>
+
+<style scoped lang="scss">
+.pro-upload-avatar {
+  :deep(.ant-upload) {
+    cursor: pointer;
+  }
+
+  .pro-upload-avatar-wrapper {
+    position: relative;
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    .pro-upload-avatar-placeholder {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-fill-quaternary, #fafafa);
+      border: 1px dashed var(--color-border);
+      border-radius: 50%;
+    }
+
+    .pro-upload-avatar-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      font-size: 20px;
+      opacity: 0;
+      transition: opacity 0.2s;
+      border-radius: 50%;
+    }
+
+    &:hover .pro-upload-avatar-overlay {
+      opacity: 1;
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/components/RouteView.vue b/antdv-next-admin/src/components/RouteView.vue
new file mode 100644
index 0000000..98240ae
--- /dev/null
+++ b/antdv-next-admin/src/components/RouteView.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/antdv-next-admin/src/composables/useFullscreen.ts b/antdv-next-admin/src/composables/useFullscreen.ts
new file mode 100644
index 0000000..a95d5e3
--- /dev/null
+++ b/antdv-next-admin/src/composables/useFullscreen.ts
@@ -0,0 +1,118 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+interface FullscreenElement extends HTMLElement {
+  webkitRequestFullscreen?: () => Promise<void>;
+  mozRequestFullScreen?: () => Promise<void>;
+  msRequestFullscreen?: () => Promise<void>;
+}
+
+interface FullscreenDocument extends Document {
+  webkitExitFullscreen?: () => Promise<void>;
+  mozCancelFullScreen?: () => Promise<void>;
+  msExitFullscreen?: () => Promise<void>;
+  webkitFullscreenElement?: Element | null;
+  mozFullScreenElement?: Element | null;
+  msFullscreenElement?: Element | null;
+}
+
+/**
+ * Fullscreen composable
+ */
+export function useFullscreen() {
+  const isFullscreen = ref(false);
+
+  /**
+   * Enter fullscreen
+   */
+  const enter = async (): Promise<void> => {
+    try {
+      const element = document.documentElement as FullscreenElement;
+
+      if (element.requestFullscreen) {
+        await element.requestFullscreen();
+      } else if (element.webkitRequestFullscreen) {
+        await element.webkitRequestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        await element.mozRequestFullScreen();
+      } else if (element.msRequestFullscreen) {
+        await element.msRequestFullscreen();
+      }
+
+      isFullscreen.value = true;
+    } catch (error) {
+      console.error('Failed to enter fullscreen:', error);
+    }
+  };
+
+  /**
+   * Exit fullscreen
+   */
+  const exit = async (): Promise<void> => {
+    try {
+      const doc = document as FullscreenDocument;
+      if (document.exitFullscreen) {
+        await document.exitFullscreen();
+      } else if (doc.webkitExitFullscreen) {
+        await doc.webkitExitFullscreen();
+      } else if (doc.mozCancelFullScreen) {
+        await doc.mozCancelFullScreen();
+      } else if (doc.msExitFullscreen) {
+        await doc.msExitFullscreen();
+      }
+
+      isFullscreen.value = false;
+    } catch (error) {
+      console.error('Failed to exit fullscreen:', error);
+    }
+  };
+
+  /**
+   * Toggle fullscreen
+   */
+  const toggle = async (): Promise<void> => {
+    if (isFullscreen.value) {
+      await exit();
+    } else {
+      await enter();
+    }
+  };
+
+  /**
+   * Handle fullscreen change event
+   */
+  const handleFullscreenChange = () => {
+    const doc = document as FullscreenDocument;
+    isFullscreen.value = !!(
+      document.fullscreenElement ||
+      doc.webkitFullscreenElement ||
+      doc.mozFullScreenElement ||
+      doc.msFullscreenElement
+    );
+  };
+
+  onMounted(() => {
+    // Listen to fullscreen change events
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
+
+    // Check initial state
+    handleFullscreenChange();
+  });
+
+  onUnmounted(() => {
+    // Remove event listeners
+    document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
+  });
+
+  return {
+    isFullscreen,
+    enter,
+    exit,
+    toggle,
+  };
+}
diff --git a/antdv-next-admin/src/composables/usePermission.ts b/antdv-next-admin/src/composables/usePermission.ts
new file mode 100644
index 0000000..da65485
--- /dev/null
+++ b/antdv-next-admin/src/composables/usePermission.ts
@@ -0,0 +1,74 @@
+import { computed } from 'vue';
+
+import { useAuthStore } from '@/stores/auth';
+
+/**
+ * Permission composable
+ */
+export function usePermission() {
+  const authStore = useAuthStore();
+
+  const permissions = computed(() => authStore.userPermissions);
+  const roles = computed(() => authStore.userRoles);
+
+  /**
+   * Check if user has permission
+   */
+  const can = (permission: string): boolean => {
+    return authStore.hasPermission(permission);
+  };
+
+  /**
+   * Check if user has any of the permissions
+   */
+  const canAny = (permissionList: string[]): boolean => {
+    return authStore.hasAnyPermission(permissionList);
+  };
+
+  /**
+   * Check if user has all permissions
+   */
+  const canAll = (permissionList: string[]): boolean => {
+    return authStore.hasAllPermissions(permissionList);
+  };
+
+  /**
+   * Check if user does not have permission
+   */
+  const cannot = (permission: string): boolean => {
+    return !authStore.hasPermission(permission);
+  };
+
+  /**
+   * Check if user has role
+   */
+  const hasRole = (role: string): boolean => {
+    return authStore.hasRole(role);
+  };
+
+  /**
+   * Check if user has any of the roles
+   */
+  const hasAnyRole = (roleList: string[]): boolean => {
+    return authStore.hasAnyRole(roleList);
+  };
+
+  /**
+   * Check if user has all roles
+   */
+  const hasAllRoles = (roleList: string[]): boolean => {
+    return authStore.hasAllRoles(roleList);
+  };
+
+  return {
+    permissions,
+    roles,
+    can,
+    canAny,
+    canAll,
+    cannot,
+    hasRole,
+    hasAnyRole,
+    hasAllRoles,
+  };
+}
diff --git a/antdv-next-admin/src/composables/useWatermark.ts b/antdv-next-admin/src/composables/useWatermark.ts
new file mode 100644
index 0000000..6121520
--- /dev/null
+++ b/antdv-next-admin/src/composables/useWatermark.ts
@@ -0,0 +1,153 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export interface WatermarkOptions {
+  text?: string;
+  fontSize?: number;
+  fontFamily?: string;
+  color?: string;
+  opacity?: number;
+  rotate?: number;
+  width?: number;
+  height?: number;
+  zIndex?: number;
+}
+
+/**
+ * Watermark composable
+ */
+export function useWatermark(options: WatermarkOptions = {}) {
+  const {
+    text = 'Watermark',
+    fontSize = 16,
+    fontFamily = 'Arial',
+    color = 'rgba(0, 0, 0, 0.15)',
+    opacity = 1,
+    rotate = -20,
+    width = 300,
+    height = 200,
+    zIndex = 9999,
+  } = options;
+
+  let watermarkDiv: HTMLDivElement | null = null;
+  let observer: MutationObserver | null = null;
+
+  /**
+   * Create watermark canvas
+   */
+  const createWatermarkCanvas = (): string => {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return '';
+
+    ctx.clearRect(0, 0, width, height);
+    ctx.globalAlpha = opacity;
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    // Rotate canvas
+    ctx.translate(width / 2, height / 2);
+    ctx.rotate((rotate * Math.PI) / 180);
+    ctx.translate(-width / 2, -height / 2);
+
+    // Draw text
+    ctx.fillText(text, width / 2, height / 2);
+
+    return canvas.toDataURL();
+  };
+
+  /**
+   * Create watermark element
+   */
+  const createWatermark = (): HTMLDivElement => {
+    const div = document.createElement('div');
+    div.className = 'watermark-container';
+
+    const base64Url = createWatermarkCanvas();
+
+    div.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      background-image: url(${base64Url});
+      background-repeat: repeat;
+      z-index: ${zIndex};
+    `;
+
+    return div;
+  };
+
+  /**
+   * Add watermark to document
+   */
+  const addWatermark = () => {
+    // Remove existing watermark
+    removeWatermark();
+
+    // Create new watermark
+    watermarkDiv = createWatermark();
+    document.body.appendChild(watermarkDiv);
+
+    // Prevent watermark from being removed
+    observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          const removed = Array.from(mutation.removedNodes).some((node) => node === watermarkDiv);
+          if (removed) {
+            addWatermark();
+          }
+        }
+      });
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  };
+
+  /**
+   * Remove watermark
+   */
+  const removeWatermark = () => {
+    if (watermarkDiv && watermarkDiv.parentNode) {
+      watermarkDiv.parentNode.removeChild(watermarkDiv);
+      watermarkDiv = null;
+    }
+
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+
+  /**
+   * Update watermark
+   */
+  const updateWatermark = (newOptions: Partial<WatermarkOptions>) => {
+    Object.assign(options, newOptions);
+    addWatermark();
+  };
+
+  // Auto add/remove watermark
+  onMounted(() => {
+    addWatermark();
+  });
+
+  onUnmounted(() => {
+    removeWatermark();
+  });
+
+  return {
+    addWatermark,
+    removeWatermark,
+    updateWatermark,
+  };
+}
diff --git a/antdv-next-admin/src/directives/index.ts b/antdv-next-admin/src/directives/index.ts
new file mode 100644
index 0000000..5b8147d
--- /dev/null
+++ b/antdv-next-admin/src/directives/index.ts
@@ -0,0 +1,12 @@
+import type { App } from 'vue';
+
+import { vPermission } from './permission';
+
+/**
+ * Register all directives
+ */
+export function setupDirectives(app: App) {
+  app.directive('permission', vPermission);
+}
+
+export { vPermission };
diff --git a/antdv-next-admin/src/directives/permission.ts b/antdv-next-admin/src/directives/permission.ts
new file mode 100644
index 0000000..0ea0165
--- /dev/null
+++ b/antdv-next-admin/src/directives/permission.ts
@@ -0,0 +1,56 @@
+import type { App, Directive, DirectiveBinding } from "vue";
+
+import { useAuthStore } from "@/stores/auth";
+
+const placeholderMap = new WeakMap<HTMLElement, Comment>();
+
+export const vPermission: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding);
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding);
+  },
+};
+
+function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
+  const { value, modifiers } = binding;
+  const authStore = useAuthStore();
+
+  if (!value) {
+    throw new Error(
+      "Permission value is required. Usage: v-permission=\"'user.create'\"",
+    );
+  }
+
+  const permissions = Array.isArray(value) ? value : [value];
+  let hasPermission = false;
+
+  if (modifiers.all) {
+    hasPermission = permissions.every((perm) => authStore.hasPermission(perm));
+  } else {
+    hasPermission = permissions.some((perm) => authStore.hasPermission(perm));
+  }
+
+  if (!hasPermission) {
+    const placeholder =
+      placeholderMap.get(el) ?? document.createComment("v-permission");
+
+    if (el.parentNode && !placeholderMap.has(el)) {
+      placeholderMap.set(el, placeholder);
+      el.parentNode.replaceChild(placeholder, el);
+    }
+  } else {
+    const placeholder = placeholderMap.get(el);
+    if (placeholder?.parentNode) {
+      placeholder.parentNode.replaceChild(el, placeholder);
+      placeholderMap.delete(el);
+    }
+  }
+}
+
+export function setupPermissionDirective(app: App) {
+  app.directive("permission", vPermission);
+}
+
+export default vPermission;
diff --git a/antdv-next-admin/src/locales/en-US.ts b/antdv-next-admin/src/locales/en-US.ts
new file mode 100644
index 0000000..890554d
--- /dev/null
+++ b/antdv-next-admin/src/locales/en-US.ts
@@ -0,0 +1,1624 @@
+export default {
+  common: {
+    appName: "Antdv Next Admin",
+    add: "Add",
+    edit: "Edit",
+    delete: "Delete",
+    view: "View",
+    search: "Search",
+    reset: "Reset",
+    submit: "Submit",
+    cancel: "Cancel",
+    confirm: "Confirm",
+    save: "Save",
+    export: "Export",
+    import: "Import",
+    refresh: "Refresh",
+    operate: "Operate",
+    more: "More",
+    back: "Back",
+    expand: "Expand",
+    collapse: "Collapse",
+    ok: "OK",
+    close: "Close",
+    yes: "Yes",
+    no: "No",
+    loading: "Loading...",
+    noData: "No Data",
+    success: "Success",
+    error: "Error",
+    warning: "Warning",
+    info: "Info",
+    copySuccess: "Copied successfully",
+    copyFailed: "Copy failed",
+    actions: "Actions",
+    status: "Status",
+    createTime: "Create Time",
+    updateTime: "Update Time",
+    menu: "Menu",
+    navigate: "Navigate",
+    select: "Select",
+    clear: "Clear",
+    component: "Component",
+    basicUsage: "Basic Usage",
+    advancedUsage: "Advanced Usage",
+    preview: "Preview",
+    jsonContent: "JSON Content",
+    jsonPlaceholder: "Enter valid JSON...",
+    jsonParseError: "Invalid JSON format",
+    invalidArray: "Invalid array format",
+    formEdit: "Form Edit",
+    rawEdit: "Raw Edit",
+    addField: "Add Field",
+    fieldName: "Field Name",
+    fieldExists: "Field already exists",
+    pleaseInput: "Please input",
+    fieldOrder: "Field Order",
+    moveUp: "Move Up",
+    moveDown: "Move Down",
+    enabled: "Enabled",
+    disabled: "Disabled",
+    inputTags: "Input tags and press Enter",
+    addSuccess: "Added successfully",
+    pleaseInputFieldName: "Please input field name",
+    inputFieldName: "Input field name",
+    selectFieldType: "Select field type",
+    typeString: "String",
+    typeNumber: "Number",
+    typeBoolean: "Boolean",
+    typeTags: "Tags",
+    typeArray: "Array",
+    typeObject: "Object",
+    searchLabel: "Search {label}",
+  },
+
+  codeEditor: {
+    format: "Format",
+    minify: "Minify",
+    copy: "Copy",
+    formatSuccess: "Formatted successfully",
+    minifySuccess: "Minified successfully",
+    copySuccess: "Copied to clipboard",
+    copyFailed: "Failed to copy",
+    jsonError: "Invalid JSON format",
+  },
+
+  menu: {
+    dashboard: "Dashboard",
+    organization: "Organization",
+    system: "System",
+    user: "User Management",
+    role: "Role Management",
+    permission: "Menu Management",
+    dict: "Dictionary",
+    log: "System Log",
+    dept: "Department",
+    config: "System Config",
+    file: "File Management",
+    examples: "Examples Hub",
+    examplesQuickStart: "Quick Start",
+    examplesFormInput: "Forms & Input",
+    examplesContent: "Content Editors",
+    examplesInteraction: "Basic Interaction",
+    examplesBusinessScaffold: "Business Scaffolds",
+    examplesSecurityEngineering: "Security & Engineering",
+    examplesIntegration: "Integration & Navigation",
+    examplesExceptionPages: "Exception Pages",
+    table: "Table Example",
+    icon: "Icon Example",
+    form: "Form Example",
+    jsonInput: "JSON Input",
+    i18nInput: "I18n Input",
+    advancedFilter: "Advanced Filter Builder",
+    editor: "Rich Text Editor",
+    milkdown: "Markdown Editor",
+    codeEditor: "Code Editor",
+    modal: "Modal Example",
+    spin: "Spin Example",
+    watermark: "Watermark",
+    splitter: "Splitter",
+    tour: "Tour Guide",
+    qrcode: "QR Code",
+    segmented: "Segmented",
+    colorPicker: "Color Picker",
+    requestAuth: "Request/Auth Flow",
+    rbacFlow: "RBAC Flow",
+    proTableAdvanced: "ProTable Advanced",
+    complexForm: "Complex Form",
+    uploadSystem: "Upload System",
+    importExport: "Import/Export Flow",
+    masterDetail: "Master Detail",
+    virtualTable: "Virtual Scroll Table",
+    stateCache: "State & Cache",
+    observability: "Observability",
+    testing: "Testing",
+    exception: "Exception",
+    exception403: "403",
+    exception404: "404",
+    exception500: "500",
+    profile: "Profile",
+    about: "About",
+  },
+
+  layout: {
+    logout: "Logout",
+    logoutConfirm: "Are you sure you want to logout?",
+    profile: "Profile",
+    documentation: "Documentation",
+    settings: "Settings",
+    theme: "Theme",
+    themeLight: "Light Theme",
+    themeDark: "Dark Theme",
+    themeAuto: "Follow System",
+    language: "Language",
+    fullscreen: "Fullscreen",
+    exitFullscreen: "Exit Fullscreen",
+    notifications: "Notifications",
+    markAllRead: "Mark All Read",
+    clearAll: "Clear All",
+    noNotifications: "No Notifications",
+    notificationsEmptyHint:
+      "After clearing, new notifications will appear here",
+    viewDetails: "View details",
+    viewAllNotifications: "View all notifications",
+    searchPlaceholder: "Search menu...",
+    noSearchResults: "No matching menu found",
+    recentMenus: "Recent Visits",
+    aiCollabEnable: "Enable AI Collaboration",
+    aiCollabDisable: "Disable AI Collaboration",
+    aiAssistantTitle: "AI Collaboration",
+    aiAssistantSubtitle: "Assist actions with current page context",
+    aiCurrentPage: "Current Page",
+    aiQuickActions: "Quick Actions",
+    aiInputPlaceholder:
+      "Enter your question or command (Shift+Enter for new line)",
+    aiEnterHint: "Press Enter to send, Shift+Enter for new line",
+    aiEmptyTitle: "Start AI Collaboration",
+    aiEmptyDescription:
+      "Ask AI to explain pages, summarize data, and suggest next actions",
+    aiActionExplain: "Explain current page",
+    aiActionSummary: "Summarize current data",
+    aiActionRisk: "Identify potential risks",
+    aiActionNextStep: "Suggest next steps",
+    aiDemoReply:
+      'Request received. I am generating suggestions based on the "{page}" page context.',
+    languages: {
+      zhCN: "Simplified Chinese",
+      enUS: "English",
+      jaJP: "Japanese",
+      koKR: "Korean",
+    },
+    tabs: {
+      refresh: "Refresh",
+      close: "Close",
+      pin: "Pin",
+      unpin: "Unpin",
+      favorite: "Add to Favorites",
+      unfavorite: "Remove from Favorites",
+      closeOthers: "Close Others",
+      closeAll: "Close All",
+      closeLeft: "Close Left",
+      closeRight: "Close Right",
+      moreActions: "More Tab Actions",
+    },
+  },
+
+  settings: {
+    title: "Preferences",
+    themeColor: "Theme Color",
+    sidebarTheme: "Sidebar Theme",
+    light: "Light",
+    dark: "Dark",
+    layoutMode: "Layout Mode",
+    vertical: "Vertical",
+    horizontal: "Horizontal",
+    pageAnimation: "Page Animation",
+    fade: "Fade",
+    slideLeft: "Slide Left",
+    slideRight: "Slide Right",
+    slideUp: "Slide Up",
+    slideDown: "Slide Down",
+    zoom: "Zoom",
+    zoomBig: "Zoom Big",
+    none: "None",
+    grayMode: "Gray Mode",
+    grayModeHint: "Enable grayscale mode for the entire app",
+    rememberTabState: "Remember Tab State",
+    rememberTabStateHint:
+      "Automatically restore previously opened tabs after refresh",
+    aiCollab: "AI Chat Split View",
+    aiCollabHint: "Show AI chat entry icon in the top navigation bar",
+    aiCollabHintMobile: "AI chat split view is not available on mobile",
+    reset: "Reset Settings",
+    confirmReset: "Are you sure you want to reset all preferences?",
+    colors: {
+      blue: "Daybreak Blue",
+      green: "Polar Green",
+      purple: "Golden Purple",
+      red: "Dust Red",
+      orange: "Sunset Orange",
+      cyan: "Cyan",
+    },
+  },
+
+  login: {
+    title: "User Login",
+    username: "Username",
+    password: "Password",
+    remember: "Remember me",
+    login: "Login",
+    forgotPassword: "Forgot password",
+    noAccount: "Don't have an account?",
+    register: "Register now",
+    usernamePlaceholder: "Please enter username",
+    passwordPlaceholder: "Please enter password",
+    usernameRequired: "Please enter username",
+    passwordRequired: "Please enter password",
+    loginSuccess: "Login successful",
+    loginFailed: "Login failed",
+    slideToVerify: "Slide to verify",
+    verifySuccess: "Verified",
+  },
+
+  dashboard: {
+    welcome: "Welcome Back",
+    subtitle: "Monitor your business metrics and system status in real time",
+    systemStable: "System Stable",
+    todayFocus: "Today Focus",
+    compareYesterday: "vs yesterday {value}",
+    goodMorning: "Good morning",
+    goodAfternoon: "Good afternoon",
+    goodEvening: "Good evening",
+    goodNight: "Good night",
+    totalUsers: "Total Users",
+    totalOrders: "Total Orders",
+    totalRevenue: "Total Revenue",
+    conversionRate: "Conversion Rate",
+    newUsers: "New Users",
+    returningUsers: "Returning Users",
+    enterpriseUsers: "Enterprise Users",
+    salesTrend: "Sales Trend",
+    userDistribution: "User Distribution",
+    recentActivities: "Recent Activities",
+    quickActions: "Quick Actions",
+    viewMore: "View More",
+    minutesAgo: "{value} minutes ago",
+    hoursAgo: "{value} hours ago",
+    activities: {
+      permissionUpdated: "Admin updated system menu permission settings",
+      userCreated: "Created user Sunny and assigned the operation role",
+      orderTaskDone: "Today's order statistics task has completed",
+      riskPolicyReleased:
+        "Risk control strategy version has been released to production",
+    },
+    activityTags: {
+      system: "System",
+      user: "User",
+      task: "Task",
+      release: "Release",
+    },
+    months: {
+      jan: "Jan",
+      feb: "Feb",
+      mar: "Mar",
+      apr: "Apr",
+      may: "May",
+      jun: "Jun",
+      jul: "Jul",
+      aug: "Aug",
+    },
+  },
+
+  user: {
+    title: "User Management",
+    username: "Username",
+    email: "Email",
+    realName: "Real Name",
+    phone: "Phone",
+    gender: "Gender",
+    male: "Male",
+    female: "Female",
+    avatar: "Avatar",
+    role: "Role",
+    status: "Status",
+    active: "Active",
+    inactive: "Inactive",
+    createUser: "Create User",
+    editUser: "Edit User",
+    deleteUser: "Delete User",
+    confirmDelete: "Are you sure you want to delete this user?",
+    usernameRequired: "Please enter username",
+    usernameLength: "Username length must be between 3 and 20 characters",
+    emailRequired: "Please enter email",
+    selectRole: "Please select at least one role",
+    bio: "Bio",
+    updateSuccess: "User updated successfully",
+    createSuccess: "User created successfully",
+    resetPassword: "Reset Password",
+    confirmResetPassword:
+      "Are you sure you want to reset this user's password?",
+    exportSuccess: "Export successful",
+    exportFailed: "Export failed",
+    importSuccess: "Successfully imported {count} records",
+    importFailed: "Import failed, please check file format",
+    importEmpty: "File is empty or format is incorrect",
+    importFormatError:
+      'CSV format is incorrect, must include "Username", "Name", "Email" columns',
+    age: "Age",
+    tags: "Tags",
+    address: "Address",
+    department: "Department",
+    position: "Position",
+    info: "User Info",
+    settings: "Settings",
+    theme: "Theme",
+    language: "Language",
+  },
+
+  role: {
+    title: "Role Management",
+    name: "Role Name",
+    code: "Role Code",
+    description: "Description",
+    permissions: "Permissions",
+    createRole: "Create Role",
+    editRole: "Edit Role",
+    deleteRole: "Delete Role",
+    confirmDelete: "Are you sure you want to delete this role?",
+    assignPermissions: "Assign Permissions",
+    codeRequired: "Please enter role code",
+    codePattern:
+      "Role code only supports letters, numbers, underscores and hyphens",
+    selectPermissions: "Please select permissions",
+    updateSuccess: "Role updated successfully",
+    createSuccess: "Role created successfully",
+  },
+
+  permission: {
+    title: "Menu Management",
+    name: "Menu Name",
+    code: "Permission Code",
+    type: "Type",
+    menu: "Menu",
+    button: "Button",
+    api: "API",
+    resource: "Resource",
+    action: "Action",
+    createPermission: "Create Menu",
+    editPermission: "Edit Menu",
+    deletePermission: "Delete Menu",
+    confirmDelete:
+      "Are you sure you want to delete this menu and its children?",
+    expandAll: "Expand All",
+    collapseAll: "Collapse All",
+    parentMenu: "Parent Menu",
+    createChildMenu: "Create Child Menu",
+    visible: "Visible",
+    show: "Show",
+    hide: "Hide",
+    routePath: "Route Path",
+    componentPath: "Component Path",
+    sort: "Sort",
+    addChild: "Add Child",
+    codeRequired: "Please enter permission code",
+    codePattern:
+      "Permission code only supports letters, numbers, underscores and hyphens",
+    menuRouteRequired: "Route path is required for menu type",
+    icon: "Icon",
+    iconPlaceholder: "e.g. UserOutlined",
+    visibleStatus: "Visibility",
+    updateSuccess: "Menu updated successfully",
+    createSuccess: "Menu created successfully",
+  },
+
+  dict: {
+    title: "Dictionary",
+    dictType: "Dictionary Type",
+    dictData: "Dictionary Data",
+    typeName: "Type Name",
+    typeCode: "Type Code",
+    description: "Description",
+    dictLabel: "Label",
+    dictValue: "Value",
+    sort: "Sort",
+    remark: "Remark",
+    enabled: "Enabled",
+    disabled: "Disabled",
+    createType: "Create Type",
+    editType: "Edit Type",
+    deleteType: "Delete Type",
+    createData: "Create Data",
+    editData: "Edit Data",
+    deleteData: "Delete Data",
+    confirmDeleteType:
+      'Are you sure you want to delete dictionary type "{name}"?',
+    confirmDeleteData:
+      'Are you sure you want to delete dictionary data "{label}"?',
+    typeNamePlaceholder: "Please enter type name",
+    typeCodePlaceholder: "Please enter type code",
+    descriptionPlaceholder: "Please enter description",
+    labelPlaceholder: "Please enter label",
+    valuePlaceholder: "Please enter value",
+    remarkPlaceholder: "Please enter remark",
+    selectTypeHint: "Please select a dictionary type from the left",
+    requiredFields: "Please fill in required fields",
+    deleteSuccess: "Deleted successfully",
+    deleteFailed: "Delete failed",
+    updateSuccess: "Updated successfully",
+    createSuccess: "Created successfully",
+    operateFailed: "Operation failed",
+    loadTypeFailed: "Failed to load dictionary types",
+    loadDataFailed: "Failed to load dictionary data",
+    dictDataTitle: "Dictionary Data - {name}",
+    confirmDelete: "Confirm Delete",
+  },
+
+  table: {
+    title: "Table Example",
+    total: "Total {total} items",
+    page: "Page {page}",
+    pageSize: "{size} items per page",
+    goTo: "Go to",
+  },
+
+  form: {
+    title: "Form Example",
+    basicInfo: "Basic Information",
+    advancedInfo: "Advanced Information",
+    submit: "Submit",
+    reset: "Reset",
+    validateSuccess: "Validation passed",
+    validateFailed: "Validation failed",
+  },
+
+  exampleTable: {
+    userList: "User List",
+    subTitle: "ProTable Example",
+    createUser: "Create User",
+    editUser: "Edit User",
+    deleteSuccess: "Deleted successfully",
+    updateSuccess: "Updated successfully",
+    createSuccess: "Created successfully",
+  },
+
+  notificationCenter: {
+    kicker: "Notification Hub",
+    title: "Notification Center",
+    subtitle:
+      "Track system updates, messages, and task outcomes in one place with fast filtering and detail tracing.",
+    searchPlaceholder: "Search notifications by title or content",
+    listTitle: "Notification List",
+    listSubtitle: "{count} notifications matched",
+    emptyFiltered: "No matching notifications",
+    metrics: {
+      total: "Total Notifications",
+      unread: "Unread",
+      today: "Today",
+    },
+    filters: {
+      allStatus: "All Status",
+      unread: "Unread",
+      read: "Read",
+      allTypes: "All Types",
+      system: "System Update",
+      message: "Message",
+      security: "Security Alert",
+      task: "Task Done",
+      error: "Error Alert",
+    },
+    status: {
+      read: "Read",
+      unread: "Unread",
+    },
+    meta: {
+      type: "Type",
+      receivedAt: "Received At",
+    },
+    actions: {
+      markAsRead: "Mark as read",
+      openRelated: "Open related page",
+      delete: "Delete notification",
+    },
+    placeholder: {
+      title: "Select a notification to view details",
+      desc: "Choose an item from the list on the left to see full content and related actions here.",
+    },
+  },
+
+  exampleCaptcha: {
+    title: "Captcha Component Example",
+    description:
+      "Common frontend captcha interaction components with customizable styles and callbacks.",
+    slider: "Slider Captcha",
+    rotate: "Rotate Captcha",
+    puzzle: "Puzzle Captcha",
+    point: "Point Captcha",
+    success: "Verification passed!",
+    fail: "Verification failed, please retry",
+  },
+
+  exampleSpin: {
+    title: "Spin Example",
+    description:
+      "Demonstrates various usages of the Spin component including basic loading, sizes, custom indicators, progress, delay and fullscreen.",
+    basic: "Basic & Sizes",
+    tip: "Custom Tip",
+    nested: "Card Loading",
+    delay: "Delay",
+    customIndicator: "Custom Indicator",
+    percent: "Progress",
+    customStyle: "Custom Style",
+    fullscreen: "Fullscreen",
+    showFullscreen: "Show Fullscreen",
+    loadingState: "Loading state:",
+  },
+
+  exampleEditor: {
+    title: "Rich Text Editor Example",
+    description:
+      "A rich text editor based on Tiptap, supporting image upload, link insertion, formatting and more.",
+    basicUsage: "Basic Usage",
+    placeholder: "Enter content...",
+    disabledState: "Disabled State",
+    customHeight: "Custom Height",
+    contentPreview: "Content Preview",
+    htmlOutput: "HTML Output",
+    noContent: "No content",
+    save: "Save Content",
+    clear: "Clear Content",
+    loadDemo: "Load Demo",
+    savedMessage: "Content saved",
+    clearedMessage: "Content cleared",
+    demoLoadedMessage: "Demo content loaded",
+  },
+
+  exampleForm: {
+    description: "Advanced ProForm example demonstrating various form controls",
+    age: "Age",
+    ageRange: "Age must be between 1 and 150",
+    interests: "Interests",
+    birthDate: "Birth Date",
+    score: "Score",
+    progress: "Progress",
+    bioPlaceholder: "Please enter bio",
+    submitSuccess: "Submitted successfully!",
+    roles: {
+      admin: "Administrator",
+      user: "Regular User",
+      guest: "Guest",
+    },
+    interestOptions: {
+      reading: "Reading",
+      sports: "Sports",
+      music: "Music",
+      travel: "Travel",
+    },
+  },
+
+  exampleIcon: {
+    title: "Icon Showcase",
+    subtitle: "Unified demo for Icon component and IconPicker",
+    capabilities:
+      "Supports: local SVG, antdv-next icons, Iconify (offline sets + online search)",
+    renderTitle: "Three Render Modes",
+    renderSubtitle: "Click any sample to apply it to IconPicker below",
+    pickerTitle: "IconPicker Demo",
+    pickerSubtitle:
+      "Type 2+ chars to trigger online search; offline icon sets are available by category",
+    modelLabel: "Icon Value",
+    previewLabel: "Live Preview",
+    copy: "Copy Value",
+    copySuccess: "Icon value copied",
+    copyEmpty: "Please choose an icon first",
+    copyFailed: "Copy failed, please copy manually",
+    reset: "Reset Default",
+    sourceLabel: "Source",
+    sourceSvg: "Local SVG Symbol",
+    sourceAntdv: "antdv-next component icon",
+    sourceIconify: "Iconify icon",
+    sourceOnline: "Iconify online result",
+    sourceUnknown: "Unknown",
+    guidesTitle: "Integration Guide",
+    guidesSubtitle:
+      "Two common integration paths: SVG Symbol and Iconify (online + offline)",
+    svgGuideTitle: "How to add and use SVG",
+    iconifyGuideTitle: "How to use Iconify",
+    guideStepSvg1:
+      'Inject <symbol id="..."> definitions at app root (or layout root).',
+    guideStepSvg2:
+      "Use Icon component with svg:icon-id, e.g. svg:icon-demo-orbit.",
+    guideStepSvg3:
+      "For IconPicker local SVG detection, place files under src/assets/icons and pass svgIcons.",
+    guideStepIconify1:
+      "Pass iconify names directly: ri:home-line / mdi:account / ion:apps-outline.",
+    guideStepIconify2:
+      "IconPicker includes offline sets (ri / mdi / ion), available without network.",
+    guideStepIconify3:
+      "In All/Online category, type keywords (at least 2 chars) to search Iconify online.",
+    modeSvg: "SVG Sprite",
+    modeAntdv: "antdv-next",
+    modeIconify: "Iconify",
+    sampleHint: "Click to apply",
+  },
+
+  exampleWatermark: {
+    title: "Watermark Example",
+    description:
+      "Global watermark feature - configure and preview watermark effects in real time",
+    enableGlobal: "Enable Global Watermark",
+    content: "Watermark Text",
+    fontSize: "Font Size",
+    rotate: "Rotation",
+    opacity: "Opacity",
+    gapX: "Horizontal Gap",
+    gapY: "Vertical Gap",
+    preview: "Local Preview",
+    previewText: "This area is for previewing the watermark effect",
+  },
+
+  exampleSplitter: {
+    title: "Splitter Example",
+    description:
+      "Splitter component creates resizable split panel layouts with horizontal/vertical splitting, nested layouts, and panel configuration.",
+    basicTab: "Basic Split",
+    nestedTab: "Nested Layout",
+    configTab: "Panel Config",
+    businessTab: "Business Example",
+    horizontalSplit: "Horizontal Split (Left-Right)",
+    verticalSplit: "Vertical Split (Top-Bottom)",
+    leftPanel: "Left Panel",
+    rightPanel: "Right Panel",
+    topPanel: "Top Panel",
+    bottomPanel: "Bottom Panel",
+    threeColumnLayout: "Three-Column Nested Layout",
+    sidebarPanel: "Sidebar",
+    mainContent: "Main Content",
+    footerPanel: "Footer Area",
+    asidePanel: "Right Sidebar",
+    minSize: "Min Size",
+    maxSize: "Max Size",
+    defaultSize: "Default Size",
+    resizable: "Resizable",
+    configurablePanel: "Configurable Panel",
+    autoPanel: "Auto Panel",
+    codeEditorLayout: "Code Editor Layout Example",
+  },
+
+  exampleTour: {
+    title: "Tour Guide Example",
+    description:
+      "Tour component creates step-by-step guides to help users understand product features and workflows.",
+    startBasicTour: "Start Basic Tour",
+    startCustomTour: "Start Custom Tour",
+    searchButton: "Search",
+    createButton: "Create",
+    settingsButton: "Settings",
+    exportButton: "Export",
+    tourConfig: "Tour Configuration",
+    showMask: "Show Mask",
+    showArrow: "Show Arrow",
+    scrollIntoView: "Scroll Into View",
+    indicatorType: "Indicator Type",
+    step1Title: "Search Feature",
+    step1Desc:
+      "Click this button to search data in the system, supporting fuzzy matching and advanced filtering.",
+    step2Title: "Create Action",
+    step2Desc:
+      "Click this button to create new data records, supporting multiple data types.",
+    step3Title: "System Settings",
+    step3Desc:
+      "Click this button to access system settings and configure system parameters.",
+    step4Title: "Export Data",
+    step4Desc:
+      "Click this button to export current data to Excel, CSV, or other formats.",
+    customStep1Title: "Right Placement",
+    customStep1Desc: "The tour panel is displayed on the right of the target.",
+    customStep2Title: "Bottom Placement",
+    customStep2Desc: "The tour panel is displayed at the bottom of the target.",
+    customStep3Title: "Left Placement",
+    customStep3Desc: "The tour panel is displayed on the left of the target.",
+    customStep4Title: "Top Placement",
+    customStep4Desc:
+      "The tour panel is displayed on top of the target with a custom indicator.",
+  },
+
+  exampleQRCode: {
+    title: "QR Code Example",
+    description:
+      "QRCode component generates QR codes with custom styles, logos, status display, and download functionality.",
+    basicTab: "Basic",
+    styleTab: "Style Config",
+    logoTab: "With Logo",
+    statusTab: "Status",
+    downloadTab: "Download",
+    content: "QR Code Content",
+    size: "Size",
+    bgColor: "Background Color",
+    fgColor: "Foreground Color",
+    errorLevel: "Error Level",
+    logoHint:
+      "Use errorLevel='H' to ensure QR codes with logos can be scanned correctly",
+    statusActive: "Active",
+    statusExpired: "Expired",
+    statusLoading: "Loading",
+    downloadContent: "QR Code Content",
+    fileName: "File Name",
+    downloadButton: "Download QR Code",
+    downloadSuccess: "Download successful",
+  },
+
+  exampleSegmented: {
+    title: "Segmented Example",
+    description:
+      "Segmented component switches between multiple options, commonly used for view switching and filtering.",
+    basicTab: "Basic",
+    iconTab: "Icon Options",
+    blockTab: "Block Style",
+    disabledTab: "Disabled",
+    businessTab: "Business",
+    basicUsage: "Basic Usage",
+    currentValue: "Current Value",
+    sizes: "Different Sizes",
+    iconOptions: "Icon Only Options",
+    mixOptions: "Text + Icon Mix",
+    blockStyle: "Block Style (100% width)",
+    allDisabled: "All Disabled",
+    partialDisabled: "Partial Disabled",
+    viewSwitch: "View Switch",
+    filterSwitch: "Filter Condition",
+    filterResult: "Filter Result",
+    listItemTitle: "Data Item",
+    listItemDesc: "This is the description of the data item",
+    cardItemTitle: "Card",
+  },
+
+  exampleColorPicker: {
+    title: "Color Picker Example",
+    description:
+      "ColorPicker component for color selection with multiple formats, presets, and alpha support.",
+    basicTab: "Basic",
+    presetTab: "Presets",
+    formatTab: "Formats",
+    alphaTab: "Alpha",
+    disabledTab: "Disabled",
+    businessTab: "Business",
+    basicUsage: "Basic Usage",
+    sizes: "Different Sizes",
+    presetColors: "Preset Colors",
+    currentColor: "Current Color",
+    formatSupport: "Format Support",
+    withAlpha: "With Alpha",
+    withoutAlpha: "Without Alpha",
+    disabledState: "Disabled State",
+    disabledHint: "Cannot select color when disabled",
+    themeColor: "Theme Color Selection",
+    tagColors: "Tag Color Config",
+    addTag: "Add Tag",
+    tagName: "Tag Name",
+    tagColor: "Tag Color",
+    tagNameRequired: "Please enter tag name",
+    addTagSuccess: "Tag added successfully",
+  },
+
+  exampleModal: {
+    title: "ProModal Demo",
+    description:
+      "An enhanced wrapper around antdv-next Modal with drag, fullscreen, edge resize and viewport constraints.",
+    openDefault: "Open Default Modal",
+    openWide: "Open Wide Modal",
+    width: "Modal Width",
+    dataCount: "Data Size",
+    draggable: "Drag Title",
+    resizable: "Edge Resize",
+    fullscreenable: "Fullscreen Button",
+    mask: "Mask",
+    maskClosable: "Click Mask to Close",
+    keyboard: "ESC to Close",
+    modalTitle: "Draggable / Resizable ProModal",
+    hint: "Top-right actions provide fullscreen and close. Drag title to move. Drag edges/corners to resize.",
+    contentTitle: "Feature Demonstration",
+    contentDescription:
+      "The following long list is used to demonstrate scrolling and viewport boundary behavior.",
+    formKeyword: "Keyword",
+    formKeywordPlaceholder: "Please enter keyword",
+    formRemark: "Remark",
+    formRemarkPlaceholder: "Please enter remark",
+    rowText: "Demo data row #{index}",
+    confirmSuccess: "Confirmed successfully",
+  },
+
+  exampleException: {
+    "403title": "403",
+    "403description": "Sorry, you do not have permission to access this page",
+    "404title": "404",
+    "404description": "Sorry, the page you visited does not exist",
+    "500title": "500",
+    "500description": "Sorry, the server is reporting an error",
+  },
+
+  editor: {
+    insertLink: "Insert Link",
+    linkUrl: "Link URL",
+    linkText: "Link Text",
+    linkTextPlaceholder: "Link text",
+    defaultPlaceholder: "Enter content...",
+    imageOnly: "Only image files are allowed",
+    imageSizeLimit: "Image size cannot exceed 5MB",
+    imageInsertSuccess: "Image inserted successfully",
+    imageUploadFailed: "Image upload failed",
+    enterLinkUrl: "Please enter link URL",
+  },
+
+  iconPicker: {
+    selectIcon: "Select icon",
+    searchPlaceholder: "Search icon name...",
+    onlineSearchFailed: "Online search failed",
+    onlineSearchFailedDetail: "Online search failed: {message}",
+  },
+
+  captcha: {
+    clickInOrder: "Click in order: ",
+    refresh: "Refresh",
+  },
+
+  about: {
+    description:
+      "A modern admin framework built on Vue 3 + TypeScript + Ant Design Vue. Production-ready, feature-rich, and easy to extend.",
+    projectInfo: "Project Info",
+    projectName: "Project Name",
+    version: "Version",
+    license: "License",
+    author: "Author",
+    email: "Email",
+    documentation: "Documentation",
+    techStack: "Tech Stack",
+    features: "Core Features",
+    feature1: "Vue 3 Composition API",
+    feature1Desc:
+      "Better logic reuse, code organization, and reactive performance",
+    feature2: "Full TypeScript Strict Mode",
+    feature2Desc: "Complete type inference to catch errors at development time",
+    feature3: "Complete RBAC Permission System",
+    feature3Desc:
+      "Page, button, field, and API level access control out of the box",
+    feature4: "Dynamic Routes & Menu Generation",
+    feature4Desc: "Auto-generate routes and sidebar menus based on user roles",
+    feature5: "i18n Multi-language Support",
+    feature5Desc: "Built-in Chinese & English with easy locale extension",
+    feature6: "Light / Dark Theme Switching",
+    feature6Desc: "6 preset theme colors with auto system preference detection",
+    feature7: "ProTable / ProForm Components",
+    feature7Desc:
+      "Config-driven tables and forms covering common business scenarios",
+    feature8: "Mock Data Development Mode",
+    feature8Desc:
+      "Built-in mock system for parallel frontend and backend development",
+  },
+
+  proForm: {
+    enterPlaceholder: "Please enter {label}",
+    selectPlaceholder: "Please select {label}",
+    uploadFile: "Upload File",
+  },
+
+  proUpload: {
+    uploadFile: "Upload File",
+    uploadImage: "Upload Image",
+    dragHint: "Click or drag file to this area to upload",
+    fileSizeExceed: "File size must not exceed {size}MB",
+    fileTypeNotAllowed: "File type not allowed",
+  },
+
+  proStepForm: {
+    prev: "Previous",
+    next: "Next",
+  },
+
+  proTable: {
+    total: "Total {total} items",
+    density: "Table Density",
+    checkAll: "Select All",
+    indexColumn: "Index Column",
+    fixLeft: "Pin Left",
+    fixRight: "Pin Right",
+    densityLarge: "Spacious",
+    densityMiddle: "Default",
+    densitySmall: "Compact",
+    loadDataFailed: "Failed to load data",
+  },
+
+  profile: {
+    title: "Profile",
+    basicInfo: "Basic Information",
+    security: "Security",
+    username: "Username",
+    email: "Email",
+    phone: "Phone",
+    role: "Role",
+    joinDate: "Join Date",
+    changePassword: "Change Password",
+    currentPassword: "Current Password",
+    oldPassword: "Old Password",
+    newPassword: "New Password",
+    confirmPassword: "Confirm Password",
+    enterCurrentPassword: "Please enter current password",
+    enterNewPassword: "Please enter new password",
+    enterConfirmPassword: "Please enter new password again",
+    passwordMismatch: "Passwords do not match",
+    passwordMinLength: "Password must be at least 6 characters",
+    passwordChangeSuccess: "Password changed successfully",
+    passwordChangeFailed: "Failed to change password",
+    passwordTip:
+      "Tip: Password should be at least 6 characters, recommend including letters, numbers and special characters",
+    updateSuccess: "Update successful",
+    updateFailed: "Update failed",
+  },
+
+  error: {
+    404: "Page Not Found",
+    403: "Access Forbidden",
+    500: "Server Error",
+    backHome: "Back to Home",
+    pageNotFound: "Sorry, the page you visited does not exist",
+    noPermission: "Sorry, you do not have permission to access this page",
+    serverError: "Sorry, the server is reporting an error",
+  },
+
+  validation: {
+    required: "This field is required",
+    email: "Please enter a valid email address",
+    phone: "Please enter a valid phone number",
+    idCard: "Please enter a valid ID card number",
+    url: "Please enter a valid URL",
+    minLength: "Minimum length is {min} characters",
+    maxLength: "Maximum length is {max} characters",
+    lengthRange: "Length must be between {min} and {max}",
+    numberRange: "Value must be between {min} and {max}",
+    min: "Minimum value is {min}",
+    max: "Maximum value is {max}",
+    pattern: "Invalid format",
+    usernamePattern:
+      "Username can only contain letters, numbers and underscores",
+    passwordPattern:
+      "Password must be at least 8 characters and include letters and numbers",
+    confirmPassword: "The two passwords do not match",
+  },
+
+  dept: {
+    title: "Department Management",
+    organizationStructure: "Organization",
+    searchDept: "Search department",
+    deptName: "Department Name",
+    parentDept: "Parent Department",
+    leader: "Leader",
+    phone: "Phone",
+    email: "Email",
+    sort: "Sort",
+    remark: "Remark",
+    status: "Status",
+    enabled: "Enabled",
+    disabled: "Disabled",
+    createDept: "Create Department",
+    editDept: "Edit Department",
+    deleteDept: "Delete Department",
+    addChildDept: "Add Child Department",
+    childDepts: "Child Departments",
+    noneTopLevel: "None (Top Level)",
+    noneTopLevelDept: "None (Top Level Department)",
+    selectDeptNode: "Please select a department node on the left",
+    confirmDelete: "Confirm Delete",
+    confirmDeleteContent:
+      'Are you sure you want to delete department "{name}"?',
+    hasChildrenWarning:
+      "This department has child departments, please delete them first",
+    deleteSuccess: "Deleted successfully",
+    deleteFailed: "Delete failed",
+    updateSuccess: "Updated successfully",
+    createSuccess: "Created successfully",
+    operateFailed: "Operation failed",
+    pleaseEnterDeptName: "Please enter department name",
+    pleaseEnterLeader: "Please enter leader",
+    pleaseEnterPhone: "Please enter phone",
+    pleaseEnterEmail: "Please enter email",
+    pleaseEnterRemark: "Please enter remark",
+    loadDataFailed: "Failed to load department data",
+    createTime: "Create Time",
+    updateTime: "Update Time",
+  },
+
+  config: {
+    title: "System Config",
+    configGroups: "Config Groups",
+    configName: "Config Name",
+    configKey: "Config Key",
+    configValue: "Config Value",
+    valueType: "Value Type",
+    group: "Group",
+    sort: "Sort",
+    description: "Description",
+    builtIn: "Source",
+    createConfig: "Create Config",
+    editConfig: "Edit Config",
+    deleteConfig: "Delete Config",
+    confirmDelete: "Confirm Delete",
+    confirmDeleteContent: 'Are you sure you want to delete config "{name}"?',
+    deleteSuccess: "Deleted successfully",
+    deleteFailed: "Delete failed",
+    updateSuccess: "Updated successfully",
+    createSuccess: "Created successfully",
+    operateFailed: "Operation failed",
+    requiredFields: "Please fill in required fields",
+    loadConfigFailed: "Failed to load config",
+    valueTypes: {
+      string: "String",
+      number: "Number",
+      boolean: "Boolean",
+      json: "JSON",
+    },
+    groups: {
+      basic: "Basic Config",
+      security: "Security Config",
+      upload: "Upload Config",
+      notification: "Notification Config",
+    },
+    builtInTypes: {
+      builtIn: "Built-in",
+      custom: "Custom",
+    },
+    placeholders: {
+      configName: "Please enter config name",
+      configKey: "e.g. site.name",
+      configValue: "Please enter config value",
+      jsonFormat: "JSON format",
+      description: "Please enter description",
+    },
+  },
+
+  file: {
+    title: "File Management",
+    fileName: "File Name",
+    ext: "Extension",
+    size: "File Size",
+    storage: "Storage Type",
+    uploader: "Uploader",
+    uploadTime: "Upload Time",
+    action: "Action",
+    delete: "Delete",
+    confirmDelete: "Confirm Delete",
+    confirmDeleteContent: 'Are you sure you want to delete file "{name}"?',
+    deleteSuccess: "Deleted successfully",
+    deleteFailed: "Delete failed",
+    loadFailed: "Failed to load file list",
+    storageType: {
+      local: "Local",
+      oss: "OSS",
+      cos: "COS",
+    },
+    extType: {
+      imageJpg: "Image(jpg)",
+      imagePng: "Image(png)",
+      pdf: "PDF",
+      word: "Word",
+      excel: "Excel",
+      zip: "Archive",
+      video: "Video",
+      text: "Text",
+      ppt: "PPT",
+      svg: "SVG",
+    },
+  },
+
+  log: {
+    title: "System Log",
+    operationLog: "Operation Log",
+    loginLog: "Login Log",
+    clearLog: "Clear Log",
+    confirmClear: "Confirm Clear",
+    confirmClearOperation:
+      "Are you sure you want to clear all operation logs? This action cannot be undone.",
+    confirmClearLogin:
+      "Are you sure you want to clear all login logs? This action cannot be undone.",
+    clearSuccess: "Cleared successfully",
+    clearFailed: "Clear failed",
+    operationUser: "Operator",
+    operationModule: "Module",
+    operationType: "Operation Type",
+    operationDescription: "Description",
+    requestMethod: "Method",
+    ipAddress: "IP Address",
+    duration: "Duration",
+    operationTime: "Operation Time",
+    username: "Username",
+    browser: "Browser",
+    os: "OS",
+    message: "Message",
+    loginTime: "Login Time",
+    success: "Success",
+    fail: "Failed",
+    actionTypes: {
+      login: "Login",
+      logout: "Logout",
+      create: "Create",
+      update: "Update",
+      delete: "Delete",
+      export: "Export",
+      import: "Import",
+      other: "Other",
+    },
+    modules: {
+      userManagement: "User Management",
+      roleManagement: "Role Management",
+      menuManagement: "Menu Management",
+      dictionary: "Dictionary",
+      systemLogin: "System Login",
+      profile: "Profile",
+      dashboard: "Dashboard",
+    },
+    loadOperationLogFailed: "Failed to load operation logs",
+    loadLoginLogFailed: "Failed to load login logs",
+  },
+
+  "menu.external": "External Pages",
+  "menu.externalIframe": "IFrame",
+  "menu.externalLink": "External Links",
+  "menu.externalTypescript": "TypeScript",
+  "menu.externalAntdvNext": "Antdv Next",
+  "menu.externalVite": "Vite",
+  "menu.externalVue": "Vue.js",
+  "external.link.openedTitle": "Opened in a new tab",
+  "external.link.openedSubTitle":
+    "If the browser blocked the popup, click the button below to open again.",
+  "external.link.openVite": "Open Vite",
+  "external.link.openVue": "Open Vue",
+
+  examples: {
+    scaffold: {
+      stateCache: {
+        title: "State & Cache Example",
+        description:
+          "Demonstrates Pinia persistence (survives refresh) and keep-alive local caching (survives tab switching).",
+        piniaSection: "1. Pinia Persisted State",
+        keywordLabel: "Keyword",
+        keywordPlaceholder: "Persists after page refresh",
+        counterLabel: "Counter",
+        notesLabel: "Notes",
+        notesPlaceholder: "Supports multiline, auto-persisted",
+        resetButton: "Reset State",
+        pinTabButton: "Pin Current Tab",
+        lastPersistTime: "Last persist time: ",
+        keepAliveSection: "2. keep-alive Local Cache",
+        panelA: "Panel A",
+        panelB: "Panel B",
+        panelADesc: "Panel A (will not be destroyed when switching)",
+        panelAInputPlaceholder:
+          "Input content, switch to B and back - still retained",
+        localCountLabel: "Local count: ",
+        panelBDesc: "Panel B (also cached by keep-alive)",
+        panelBTextPlaceholder:
+          "Input content, switch tabs and return - still retained",
+        pinTabSuccess: "Tab pin status toggled",
+      },
+      uploadSystem: {
+        title: "Upload System Example",
+        description:
+          "Drag & drop upload + progress + retry on failure + image preview, ready for business integration.",
+        uploading: "Uploading",
+        success: "Success",
+        failed: "Failed",
+        dragText: "Click or drag files to this area to upload",
+        dragHint:
+          "Supports images and documents. Upload process randomly simulates failures to verify retry logic.",
+        retryButton: "Retry Failed",
+        clearButton: "Clear List",
+        failureRate: "Failure rate: ",
+        previewTitle: "File Preview",
+        uploadFailedError: "Upload failed due to network fluctuation",
+        uploadSuccessMsg: "Upload success: {name}",
+        uploadFailedMsg: "Upload failed: {name}",
+        retryMsg: "Retrying {count} failed files",
+        previewNotSupported: "This file type does not support preview",
+      },
+      importExport: {
+        title: "Import/Export Flow Example",
+        description:
+          "Demonstrates template download, CSV import validation, error receipt export, and current data export.",
+        downloadTemplate: "Download Template",
+        importCsv: "Import CSV",
+        exportCurrent: "Export Current Data",
+        exportErrorReceipt: "Export Error Receipt",
+        totalRows: "Total Rows",
+        successRows: "Successful Rows",
+        updatedRows: "Updated Rows",
+        failedRows: "Failed Rows",
+        importHint:
+          "Header must be code,name,category,price,stock; rows are upserted by code.",
+        colCode: "Code",
+        colName: "Name",
+        colCategory: "Category",
+        colPrice: "Price",
+        colStock: "Stock",
+        errorRowNo: "Row No.",
+        errorReason: "Error Reason",
+        errorRaw: "Raw Data",
+        emptyFile: "File is empty or has no valid rows",
+        invalidHeader: "Invalid header, please use the template",
+        errorRequired: "Required fields missing (code/name/category)",
+        errorPrice: "Price must be a number greater than or equal to 0",
+        errorStock: "Stock must be an integer greater than or equal to 0",
+        importDone: "Import finished: {success} success, {failed} failed",
+        parseFailed: "CSV parse failed, please check file format",
+      },
+      testing: {
+        title: "Testing Example",
+        description:
+          "Provides recommended templates for unit tests and e2e tests, ready to copy for new modules.",
+        alertMessage:
+          "Vitest / Playwright dependencies are not installed yet. This page provides structure and examples.",
+        unitTestTitle: "Unit Test Template (Vitest)",
+        e2eTestTitle: "End-to-End Test Template (Playwright)",
+        implementationTitle: "Implementation Sequence",
+        step1Title: "Add unit tests first",
+        step1Description:
+          "Cover core functions, store computation logic, and edge cases.",
+        step2Title: "Then add e2e tests",
+        step2Description:
+          "Cover critical user paths like login, search, and list operations.",
+        step3Title: "Integrate with CI",
+        step3Description:
+          "Chain type-check + unit + e2e into pipeline, execute automatically before merge.",
+      },
+      proTableAdvanced: {
+        title: "ProTable Advanced Example",
+        description:
+          "Server-side pagination simulation + batch operations + inline editing + export",
+        selectedCount: "{count} items selected",
+        batchDisable: "Batch Disable",
+        batchDelete: "Batch Delete",
+        export: "Export Current Data",
+        statusActive: "Active",
+        statusInactive: "Inactive",
+        username: "Username",
+        realName: "Real Name",
+        email: "Email",
+        gender: "Gender",
+        status: "Status",
+        createdAt: "Created At",
+        editSimulation: "Simulate edit: {username}",
+        deleteConfirm: "Confirm to delete this row?",
+        deleteSuccess: "Delete successful",
+        statusChangeSuccess: "{status} {username}",
+        batchSetStatusSuccess: "Batch set status for {count} items",
+        batchDeleteTitle: "Batch Delete Confirmation",
+        batchDeleteContent: "Confirm to delete the selected {count} rows?",
+        batchDeleteSuccess: "Batch delete completed",
+        exportSuccess: "CSV exported successfully",
+      },
+      complexForm: {
+        title: "Complex Form Example",
+        description:
+          "Step form + dynamic policy rules + async validation + draft save + server-side field error mapping.",
+        step1Title: "Basic Info",
+        step2Title: "Policy Configuration",
+        step3Title: "Publish Settings",
+        projectNameLabel: "Project Name",
+        projectNamePlaceholder: "Enter project name",
+        projectNameRequired: "Please enter project name",
+        projectNameExists: "Project name already exists, please change",
+        ownerLabel: "Owner",
+        ownerPlaceholder: "Enter owner",
+        ownerRequired: "Please enter owner",
+        sceneLabel: "Scene",
+        scenePlaceholder: "Select scene",
+        sceneRequired: "Please select scene",
+        sceneGrowth: "User Growth",
+        sceneRisk: "Risk Control",
+        sceneStability: "Stability Monitoring",
+        descriptionLabel: "Description",
+        descriptionPlaceholder: "Enter additional description",
+        addRuleButton: "Add Policy Rule",
+        currentRulesCount: "Current {count} rules",
+        metricPlaceholder: "Metric name, e.g., error_rate",
+        deleteButton: "Delete",
+        ruleListEmpty: "Please add at least one policy rule",
+        ruleListIncomplete: "Policy rules have unfilled items, please complete",
+        publishTypeLabel: "Publish Type",
+        publishTypeRequired: "Please select publish type",
+        publishImmediate: "Immediate",
+        publishSchedule: "Scheduled",
+        publishTimeLabel: "Publish Time",
+        publishTimeRequired: "Scheduled publish must select publish time",
+        notifyUsersLabel: "Notify Users",
+        notifyUsersPlaceholder: "Enter username and press Enter",
+        prevButton: "Previous",
+        nextButton: "Next",
+        submitButton: "Submit",
+        saveDraftButton: "Save Draft",
+        resetButton: "Reset",
+        draftSaved: "Draft saved",
+        serverValidationError:
+          'Server validation failed: project name cannot contain "fail"',
+        submitFailed: "Submit failed, server field error mapped",
+        submitSuccess: "Submit successful",
+      },
+      advancedFilter: {
+        title: "Advanced Filter Builder Example",
+        description:
+          "Build filter rules with visual conditions (AND/OR), and save reusable filter schemes.",
+        tips: "Supports string, enum, number, and date fields for most list filtering scenarios.",
+        addCondition: "Add Condition",
+        saveScheme: "Save Scheme",
+        matchedCount: "{count} matched",
+        emptyConditions: "No filter conditions",
+        inputValue: "Enter value",
+        selectValue: "Select value",
+        secondValue: "Second value",
+        savedSchemes: "Saved schemes:",
+        noSchemes: "None",
+        schemeNamePlaceholder: "Enter scheme name (max 30 chars)",
+        schemeNameRequired: "Please enter scheme name",
+        saveSuccess: "Filter scheme saved",
+        score: "Score",
+        statusActive: "Active",
+        statusInactive: "Inactive",
+        statusPending: "Pending",
+        adminRole: "Admin",
+        operatorRole: "Operator",
+        auditorRole: "Auditor",
+        opContains: "Contains",
+        opEquals: "Equals",
+        opNotEquals: "Not equals",
+        opIn: "In",
+        opGt: "Greater than",
+        opGte: "Greater or equal",
+        opLt: "Less than",
+        opLte: "Less or equal",
+        opBetween: "Between",
+        opBefore: "Before",
+        opAfter: "After",
+      },
+      virtualTable: {
+        title: "Virtual Scroll Table Example",
+        description:
+          "Demonstrates smooth rendering of large data sets using native a-table virtual scroll.",
+        tipsNativeVirtual:
+          "Built with antdv-next native a-table + virtual, no extra virtual list library required.",
+        datasetSize: "Dataset size",
+        regenerate: "Regenerate Data",
+        regenerateSuccess: "{count} rows generated",
+        searchPlaceholder: "Search username / email / department",
+        allStatus: "All Status",
+        totalRows: "Total {count}",
+        filteredRows: "Filtered {count}",
+        renderedRowsTip:
+          "Only visible rows are rendered for smoother scrolling",
+        statusActive: "Active",
+        statusInactive: "Inactive",
+        statusPending: "Pending",
+        colId: "ID",
+        colUsername: "Username",
+        colEmail: "Email",
+        colDepartment: "Department",
+        colStatus: "Status",
+        colUpdatedAt: "Updated At",
+      },
+      masterDetail: {
+        title: "Master-Detail Example",
+        description:
+          "Simulates ticket master-slave page: select from list on left, view details and operation history in Drawer on right.",
+        drawerTitle: "Ticket Details",
+        ticketNumber: "Ticket No.",
+        titleLabel: "Title",
+        ownerLabel: "Owner",
+        priorityLabel: "Priority",
+        createdAtLabel: "Created At",
+        descTab: "Description",
+        logsTab: "Operation Logs",
+        statusOpen: "Open",
+        statusProcessing: "Processing",
+        statusClosed: "Closed",
+        ticketTitle: "Order Risk Alert #{index}",
+        ownerZhang: "Zhang",
+        ownerLi: "Li",
+        ticketDescription:
+          "This is the detailed description of ticket {index}, including background information, impact scope, and recommended actions.",
+        actionCreate: "Create Ticket",
+        operatorSystem: "System",
+        actionAssign: "Assign Owner",
+        operatorDispatch: "Dispatch Center",
+        colTicketNumber: "Ticket No.",
+        colTitle: "Title",
+        colOwner: "Owner",
+        colPriority: "Priority",
+        colStatus: "Status",
+        colCreatedAt: "Created At",
+      },
+      rbac: {
+        title: "RBAC Full-Chain Example",
+        description:
+          "Covers 4 dimensions: page permission, button permission, field permission, and API permission. Switch between admin / user to observe differences.",
+        currentSession: "Current Session",
+        accountInfo: "Account: {username} | Role: {role}",
+        switchToAdmin: "Switch to admin",
+        switchToUser: "Switch to user",
+        permissionTotal: "...total {count} items",
+        section1Title: "1. Page Permission Check",
+        checkUserManage: "User management page access (system.user.view)",
+        checkMenuManage: "Menu management page access (system.permission.view)",
+        checkAdminRole: "Admin role access (admin)",
+        passed: "Passed",
+        denied: "Denied",
+        section2Title: "2. Button Permission",
+        createUserButton: "Create User",
+        editUserButton: "Edit User",
+        deleteUserButton: "Delete User",
+        buttonPermissionHint:
+          "Hint: Button rendering is controlled by PermissionButton",
+        section3Title: "3. Field Permission (Masking)",
+        phoneLabel: "Phone:",
+        emailLabel: "Email:",
+        realNameLabel: "Real Name:",
+        section4Title: "4. API Permission Fallback",
+        callViewApi: "Call View API",
+        callExportApi: "Call Export API",
+        callDeleteApi: "Call Delete API",
+        viewUserAction: "View user list",
+        exportUserAction: "Export users",
+        deleteUserAction: "Delete user",
+        switchSuccess: "Switched to {username}",
+        switchFailed: "Switch failed",
+        missingPermission: "403: Missing permission {permission}",
+        apiSuccess: "{action} successful",
+        apiFailed: "{action} failed: {error}",
+        noPermission: "No permission",
+      },
+      observability: {
+        title: "Observability & Exception Example",
+        description:
+          "Unified handling of loading, empty, and error states with error classification, logging, and one-click retry.",
+        simulateSuccess: "Simulate Success",
+        simulateEmpty: "Simulate Empty",
+        simulateNetwork: "Simulate Network Error",
+        simulateAuth: "Simulate Auth Error",
+        simulateBusiness: "Simulate Business Error",
+        requestStateTitle: "Request State View",
+        emptyData: "No data to display",
+        requestFailed: "Request Failed",
+        retryButton: "Retry",
+        clickToStart: "Click button above to start simulation",
+        errorLogTitle: "Error Classification & Event Log",
+        networkError: "Network Error",
+        authError: "Auth Error",
+        businessError: "Business Error",
+        noEvents: "No events yet",
+        errorNetwork:
+          "NetworkError: Request timeout, please check network connection",
+        errorAuth: "AuthError: token expired, need to re-login",
+        errorBusiness:
+          "BusinessError: rule configuration conflict, cannot calculate",
+        eventStart: "Start simulating scenario: {scenario}",
+        eventEmpty: "Request successful but returned empty data",
+        eventSuccess: "Request successful and returned data",
+        unknownError: "Unknown error",
+        eventError: "Request failed ({type}): {message}",
+      },
+      requestAuth: {
+        title: "Request & Auth Loop Example",
+        description:
+          "Demonstrates queued refresh mechanism when concurrent requests trigger 401, and fallback to re-login after refresh failure.",
+        refreshFailedAlert: "Refresh failed, entered re-login state",
+        refreshFailedDesc:
+          'Subsequent requests will continue to fail. Click "Reset Session" to make new requests.',
+        accessToken: "Access Token",
+        refreshToken: "Refresh Token",
+        refreshStatus: "Refresh Status",
+        empty: "Empty",
+        refreshing: "Refreshing",
+        idle: "Idle",
+        singleRequest: "Single Request",
+        concurrentRequest: "5 Concurrent Requests",
+        expireToken: "Expire Token",
+        simulateRefreshFail: "Simulate Refresh Failure",
+        resetSession: "Reset Session",
+        logTitle: "Event Log (Last 80 entries)",
+        clearLog: "Clear Log",
+        noLogs: "No logs yet",
+        tokenExpired: "[{apiName}] token expired",
+        apiSuccess: "[{apiName}] request successful",
+        refreshTokenInvalid: "refresh token invalid",
+        logRefreshStart:
+          "Trigger token refresh (only first 401 request executes)",
+        logRefreshSuccess:
+          "Token refresh successful, releasing queued requests",
+        logRefreshFailed:
+          "Token refresh failed: {message}, entering re-login state",
+        logQueueWait: "Refresh in progress detected, request queued",
+        logNon401Error: "[{apiName}] non-401 error: {message}",
+        log401Detected: "[{apiName}] 401 detected, preparing to refresh token",
+        logTokenExpired: "Manually marked access token as expired",
+        logSessionReset: "Session reset, ready for new requests",
+        singleRequestFailed: "Single request failed",
+        logConcurrentStart:
+          "Starting 5 concurrent requests, observe refresh queue behavior",
+        concurrentPartialFail: "Concurrent requests completed, {count} failed",
+        concurrentAllSuccess: "All concurrent requests successful",
+        logRefreshWillFail: "Next refresh will be forced to fail",
+        refreshFailTriggered: "Refresh failure scenario triggered",
+      },
+    },
+    jsonInput: {
+      title: "JSON Input Example",
+      description:
+        "A powerful JSON input component that supports both form and raw JSON editing modes. It can handle nested objects, arrays, and various data types.",
+      basicUsage: "Basic Usage",
+      userConfig: "User Configuration",
+      clickToEdit: "Click to edit JSON",
+      editUserConfig: "Edit User Configuration",
+      displayValue: "Display Value (using displayKey)",
+      productName: "Product Name",
+      price: "Price",
+      stock: "Stock",
+      productDescription: "Description",
+      selectProduct: "Select Product",
+      advancedUsage: "Advanced Usage",
+      withI18nKeys: "Key Internationalization Support",
+      i18nKeysHint: "Use label-map prop to provide i18n labels for keys",
+      withDisabledFields: "With Disabled Fields",
+      apiKey: "API Key",
+      endpoint: "Endpoint",
+      timeout: "Timeout (seconds)",
+      systemConfig: "System Configuration",
+      nestedObject: "Nested Object Support",
+      userInfo: "User Info",
+      name: "Name",
+      settings: "Settings",
+      theme: "Theme",
+      language: "Language",
+      nestedData: "Nested Data Structure",
+      emptyObject: "Empty Object (Create New)",
+      createNew: "Create New Configuration",
+    },
+    i18nInput: {
+      description:
+        "Internationalized input component supporting multi-language content editing. Built on top of JsonInput, it automatically generates form fields based on system-supported languages.",
+      productName: "Product Name (Multi-language)",
+      productDescription: "Product Description (Multi-language)",
+      editProductName: "Edit Product Name",
+      editProductDesc: "Edit Product Description",
+      clickToEdit: "Click to edit multi-language content",
+      stringFormat: "String Format Value",
+      stringFormatHint:
+        "Supports JSON in string format, component will automatically parse and serialize",
+      currentLocale: "Specify Display Locale",
+      currentLocaleHint:
+        "Use the locale prop to specify which language value to display in the input",
+      emptyValue: "Empty Value (Auto-initialize)",
+      dataPreview: "Data Preview",
+      valueType: "Value Type Toggle",
+      showAsString: "Show as String",
+      showAsObject: "Show as Object",
+      stringValue: "String Format",
+      objectValue: "Object Format",
+    },
+    codeEditor: {
+      title: "Code Editor Example",
+      description:
+        "Code editor component based on CodeMirror 6, supporting 14+ language syntax highlighting, JSON formatting, theme switching and more.",
+      jsonEditor: "JSON Editor",
+      jsEditor: "JavaScript Editor",
+      multiLanguage: "Multi-language Switching",
+      readonlyMode: "Read-only Preview Mode",
+      darkTheme: "Theme Switching",
+      themePreview: "Theme Preview",
+      themeAuto: "Follow System",
+      themeLight: "Light",
+      themeDark: "Dark",
+      autoHeight: "Auto Height",
+      format: "Format",
+      minify: "Minify",
+      copy: "Copy",
+      language: "Language",
+      theme: "Theme",
+      outputPreview: "Output Preview",
+    },
+  },
+};
diff --git a/antdv-next-admin/src/locales/index.ts b/antdv-next-admin/src/locales/index.ts
new file mode 100644
index 0000000..ba1c726
--- /dev/null
+++ b/antdv-next-admin/src/locales/index.ts
@@ -0,0 +1,64 @@
+import { createI18n } from "vue-i18n";
+
+import enUS from "./en-US";
+import jaJP from "./ja-JP";
+import koKR from "./ko-KR";
+import zhCN from "./zh-CN";
+
+export const LOCALE_MESSAGES = {
+  "zh-CN": zhCN,
+  "en-US": enUS,
+  "ja-JP": jaJP,
+  "ko-KR": koKR,
+};
+
+export const SUPPORTED_LOCALES = Object.keys(LOCALE_MESSAGES) as string[];
+
+export const LOCALE_NATIVE_LABELS: Record<string, string> = {
+  "zh-CN": "简体中文",
+  "en-US": "English",
+  "ja-JP": "日本語",
+  "ko-KR": "한국어",
+};
+
+// Get saved locale or use default
+const savedLocale = localStorage.getItem("app-locale") || "zh-CN";
+
+const i18n = createI18n({
+  legacy: false,
+  locale: savedLocale,
+  fallbackLocale: "zh-CN",
+  messages: LOCALE_MESSAGES,
+  globalInjection: true,
+});
+
+document.documentElement.lang = savedLocale;
+
+type TranslateLike = (key: string, ...args: unknown[]) => unknown;
+
+/**
+ * Global i18n translate helper
+ * Usage:
+ * - template: {{ $t('common.search') }} (from globalInjection)
+ * - <script setup> / ts: import { $t } from '@/locales'
+ */
+export function $t(key: string, ...args: unknown[]): string {
+  const translate = i18n.global.t as unknown as TranslateLike;
+  const result = translate(key, ...args);
+  return typeof result === "string" ? result : String(result);
+}
+
+export default i18n;
+
+// Helper function to change locale
+export function setLocale(locale: string) {
+  i18n.global.locale.value = locale as "zh-CN" | "en-US" | "ja-JP" | "ko-KR";
+  localStorage.setItem("app-locale", locale);
+
+  // Update HTML lang attribute
+  document.documentElement.lang = locale;
+}
+
+export function getLocale() {
+  return i18n.global.locale.value;
+}
diff --git a/antdv-next-admin/src/locales/ja-JP.ts b/antdv-next-admin/src/locales/ja-JP.ts
new file mode 100644
index 0000000..e559d1f
--- /dev/null
+++ b/antdv-next-admin/src/locales/ja-JP.ts
@@ -0,0 +1,1428 @@
+export default {
+  common: {
+    appName: "Antdv Next Admin",
+    add: "追加",
+    edit: "編集",
+    delete: "消去",
+    view: "ビュー",
+    search: "検索",
+    reset: "リセット",
+    submit: "提出する",
+    cancel: "キャンセル",
+    confirm: "確認する",
+    save: "保存",
+    export: "輸出",
+    import: "輸入",
+    refresh: "リフレッシュ",
+    operate: "操作する",
+    more: "もっと",
+    back: "戻る",
+    expand: "拡大する",
+    collapse: "崩壊",
+    ok: "わかりました",
+    close: "近い",
+    yes: "はい",
+    no: "いいえ",
+    loading: "読み込み中...",
+    noData: "データなし",
+    success: "成功",
+    error: "エラー",
+    warning: "警告",
+    info: "情報",
+    copySuccess: "正常にコピーされました",
+    copyFailed: "コピーに失敗しました",
+    actions: "アクション",
+    status: "状態",
+    createTime: "時間を作る",
+    updateTime: "更新時間",
+    menu: "メニュー",
+    navigate: "ナビゲート",
+    select: "選択",
+    clear: "クリア",
+    component: "成分",
+    basicUsage: "基本的な使い方",
+    advancedUsage: "高度な使用法",
+    preview: "プレビュー",
+    jsonContent: "JSONコンテンツ",
+    jsonPlaceholder: "有効な JSON を入力してください...",
+    jsonParseError: "無効な JSON 形式",
+    invalidArray: "無効な配列形式です",
+    formEdit: "フォーム編集",
+    rawEdit: "生編集",
+    addField: "フィールドの追加",
+    fieldName: "フィールド名",
+    fieldExists: "フィールドはすでに存在します",
+    pleaseInput: "入力してください",
+    fieldOrder: "フィールドの順序",
+    moveUp: "上に移動",
+    moveDown: "下に移動",
+    enabled: "有効",
+    disabled: "無効",
+    inputTags: "タグを入力して Enter キーを押します",
+    addSuccess: "正常に追加されました",
+    pleaseInputFieldName: "フィールド名を入力してください",
+    inputFieldName: "入力フィールド名",
+    selectFieldType: "フィールドタイプを選択してください",
+    typeString: "弦",
+    typeNumber: "番号",
+    typeBoolean: "ブール値",
+    typeTags: "タグ",
+    typeArray: "配列",
+    typeObject: "物体",
+    searchLabel: "{label} を検索",
+  },
+  codeEditor: {
+    format: "フォーマット",
+    minify: "圧縮",
+    copy: "コピー",
+    formatSuccess: "フォーマットに成功しました",
+    minifySuccess: "圧縮に成功しました",
+    copySuccess: "コピーに成功しました",
+    copyFailed: "コピーに失敗しました",
+    jsonError: "JSON形式が無効です",
+  },
+  menu: {
+    dashboard: "ダッシュボード",
+    organization: "組織",
+    system: "システム",
+    user: "ユーザー管理",
+    role: "役割管理",
+    permission: "メニュー管理",
+    dict: "辞書",
+    log: "システムログ",
+    dept: "部門",
+    config: "システム構成",
+    file: "ファイル管理",
+    examples: "例ハブ",
+    examplesQuickStart: "クイックスタート",
+    examplesFormInput: "フォームと入力",
+    examplesContent: "コンテンツ編集者",
+    examplesInteraction: "基本的なインタラクション",
+    examplesBusinessScaffold: "ビジネス足場",
+    examplesSecurityEngineering: "セキュリティとエンジニアリング",
+    examplesIntegration: "統合とナビゲーション",
+    examplesExceptionPages: "例外ページ",
+    table: "テーブルの例",
+    icon: "アイコンの例",
+    form: "フォーム例",
+    jsonInput: "JSON入力",
+    i18nInput: "I18n入力",
+    advancedFilter: "高度なフィルタービルダー",
+    editor: "リッチテキストエディター",
+    milkdown: "マークダウンエディター",
+    modal: "モーダルの例",
+    spin: "スピンの例",
+    watermark: "透かし",
+    requestAuth: "リクエスト/認証の流れ",
+    rbacFlow: "RBAC フロー",
+    proTableAdvanced: "プロテーブルアドバンスト",
+    complexForm: "複雑な形状",
+    uploadSystem: "アップロードシステム",
+    importExport: "インポート/エクスポートの流れ",
+    masterDetail: "マスター詳細",
+    virtualTable: "仮想スクロールテーブル",
+    stateCache: "状態とキャッシュ",
+    observability: "可観測性",
+    testing: "テスト",
+    exception: "例外",
+    exception403: "403",
+    exception404: "404",
+    exception500: "500",
+    splitter: "スプリッター",
+    tour: "ツアーガイド",
+    qrcode: "QRコード",
+    segmented: "セグメント",
+    colorPicker: "カラーピッカー",
+    profile: "プロフィール",
+    about: "について",
+  },
+  layout: {
+    logout: "ログアウト",
+    logoutConfirm: "ログアウトしてもよろしいですか?",
+    profile: "プロフィール",
+    documentation: "ドキュメント",
+    settings: "設定",
+    theme: "テーマ",
+    themeLight: "ライトテーマ",
+    themeDark: "ダークテーマ",
+    themeAuto: "フォローシステム",
+    language: "言語",
+    fullscreen: "全画面表示",
+    exitFullscreen: "全画面表示を終了する",
+    notifications: "通知",
+    markAllRead: "すべて既読としてマーク",
+    clearAll: "すべてクリア",
+    noNotifications: "通知なし",
+    notificationsEmptyHint: "クリア後​​、ここに新しい通知が表示されます",
+    viewDetails: "詳細を見る",
+    viewAllNotifications: "すべての通知を表示",
+    searchPlaceholder: "検索メニュー...",
+    noSearchResults: "一致するメニューが見つかりませんでした",
+    recentMenus: "最近の訪問",
+    aiCollabEnable: "AI 協同を有効化",
+    aiCollabDisable: "AI 協同を無効化",
+    aiAssistantTitle: "AI 協同",
+    aiAssistantSubtitle: "現在ページのコンテキストで操作を支援",
+    aiCurrentPage: "現在ページ",
+    aiQuickActions: "クイックアクション",
+    aiInputPlaceholder: "質問や指示を入力（Shift+Enter で改行）",
+    aiEnterHint: "Enter 送信、Shift+Enter で改行",
+    aiEmptyTitle: "AI 協同を開始",
+    aiEmptyDescription:
+      "ページ解説・データ要約・次のアクション提案を依頼できます",
+    aiActionExplain: "現在ページを説明",
+    aiActionSummary: "現在データを要約",
+    aiActionRisk: "潜在リスクを特定",
+    aiActionNextStep: "次のステップを提案",
+    aiDemoReply:
+      "リクエストを受け付けました。「{page}」ページの文脈を基に提案を生成しています。",
+    languages: {
+      zhCN: "簡体字中国語",
+      enUS: "英語",
+      jaJP: "日本語",
+      koKR: "韓国語",
+    },
+    tabs: {
+      refresh: "リフレッシュ",
+      close: "近い",
+      pin: "ピン",
+      unpin: "固定を解除する",
+      favorite: "お気に入りに追加",
+      unfavorite: "お気に入りから削除",
+      closeOthers: "その他を閉じる",
+      closeAll: "すべて閉じる",
+      closeLeft: "左を閉じる",
+      closeRight: "右を閉じる",
+      moreActions: "その他のタブアクション",
+    },
+  },
+  settings: {
+    title: "設定",
+    themeColor: "テーマカラー",
+    sidebarTheme: "サイドバーのテーマ",
+    light: "ライト",
+    dark: "暗い",
+    layoutMode: "レイアウトモード",
+    vertical: "垂直",
+    horizontal: "水平",
+    pageAnimation: "ページアニメーション",
+    fade: "フェード",
+    slideLeft: "左にスライド",
+    slideRight: "右にスライド",
+    slideUp: "スライドアップ",
+    slideDown: "スライドダウン",
+    zoom: "ズーム",
+    zoomBig: "大きくズーム",
+    none: "なし",
+    grayMode: "グレーモード",
+    grayModeHint: "アプリ全体でグレースケール モードを有効にする",
+    rememberTabState: "タブの状態を記憶する",
+    rememberTabStateHint: "更新後に以前に開いていたタブを自動的に復元する",
+    aiCollab: "AI チャット分割表示",
+    aiCollabHint:
+      "トップナビゲーションバーに AI チャットのエントリアイコンを表示します",
+    aiCollabHintMobile: "モバイルでは AI チャット分割表示を利用できません",
+    reset: "設定をリセットする",
+    confirmReset: "すべての設定をリセットしてもよろしいですか?",
+    colors: {
+      blue: "デイブレイクブルー",
+      green: "ポーラーグリーン",
+      purple: "ゴールデンパープル",
+      red: "ダストレッド",
+      orange: "サンセットオレンジ",
+      cyan: "シアン",
+    },
+  },
+  login: {
+    title: "ユーザーログイン",
+    username: "ユーザー名",
+    password: "パスワード",
+    remember: "私を覚えてますか",
+    login: "ログイン",
+    forgotPassword: "パスワードをお忘れですか",
+    noAccount: "アカウントをお持ちでない場合は、",
+    register: "今すぐ登録してください",
+    usernamePlaceholder: "ユーザー名を入力してください",
+    passwordPlaceholder: "パスワードを入力してください",
+    usernameRequired: "ユーザー名を入力してください",
+    passwordRequired: "パスワードを入力してください",
+    loginSuccess: "ログイン成功",
+    loginFailed: "ログインに失敗しました",
+    slideToVerify: "スライドして確認してください",
+    verifySuccess: "確認済み",
+  },
+  dashboard: {
+    welcome: "おかえり",
+    subtitle: "ビジネス指標とシステムステータスをリアルタイムで監視します",
+    systemStable: "システムが安定している",
+    todayFocus: "今日の焦点",
+    compareYesterday: "昨日との比較 {value}",
+    goodMorning: "おはよう",
+    goodAfternoon: "こんにちは",
+    goodEvening: "こんばんは",
+    goodNight: "おやすみ",
+    totalUsers: "総ユーザー数",
+    totalOrders: "総注文数",
+    totalRevenue: "総収益",
+    conversionRate: "コンバージョン率",
+    newUsers: "新規ユーザー",
+    returningUsers: "復帰ユーザー",
+    enterpriseUsers: "エンタープライズユーザー",
+    salesTrend: "売上推移",
+    userDistribution: "ユーザーの分布",
+    recentActivities: "最近の活動",
+    quickActions: "クイックアクション",
+    viewMore: "もっと見る",
+    minutesAgo: "{value} 分前",
+    hoursAgo: "{value} 時間前",
+    activities: {
+      permissionUpdated: "管理者がシステム メニューの権限設定を更新しました",
+      userCreated: "ユーザーSunnyを作成し、操作ロールを割り当てました",
+      orderTaskDone: "今日の注文統計タスクが完了しました",
+      riskPolicyReleased:
+        "リスク管理戦略バージョンが本番環境にリリースされました",
+    },
+    activityTags: {
+      system: "システム",
+      user: "ユーザー",
+      task: "タスク",
+      release: "リリース",
+    },
+    months: {
+      jan: "1月",
+      feb: "2月",
+      mar: "3月",
+      apr: "4月",
+      may: "5月",
+      jun: "ジュン",
+      jul: "7月",
+      aug: "8月",
+    },
+  },
+  user: {
+    title: "ユーザー管理",
+    username: "ユーザー名",
+    email: "電子メール",
+    realName: "本名",
+    phone: "電話",
+    gender: "性別",
+    male: "男",
+    female: "女性",
+    avatar: "アバター",
+    role: "役割",
+    status: "状態",
+    active: "アクティブ",
+    inactive: "非アクティブ",
+    createUser: "ユーザーの作成",
+    editUser: "ユーザーの編集",
+    deleteUser: "ユーザーの削除",
+    confirmDelete: "このユーザーを削除してもよろしいですか?",
+    usernameRequired: "ユーザー名を入力してください",
+    usernameLength: "ユーザー名の長さは 3 ～ 20 文字である必要があります",
+    emailRequired: "メールアドレスを入力してください",
+    selectRole: "少なくとも 1 つの役割を選択してください",
+    bio: "バイオ",
+    updateSuccess: "ユーザーは正常に更新されました",
+    createSuccess: "ユーザーが正常に作成されました",
+    resetPassword: "パスワードのリセット",
+    confirmResetPassword:
+      "このユーザーのパスワードをリセットしてもよろしいですか?",
+    exportSuccess: "エクスポートに成功しました",
+    exportFailed: "エクスポートに失敗しました",
+    importSuccess: "{count} レコードが正常にインポートされました",
+    importFailed: "インポートに失敗しました。ファイル形式を確認してください",
+    importEmpty: "ファイルが空であるか、形式が正しくありません",
+    importFormatError:
+      "CSV 形式が正しくありません。「ユーザー名」、「名前」、「電子メール」列を含める必要があります",
+    age: "年",
+    tags: "タグ",
+    address: "住所",
+    department: "部門",
+    position: "位置",
+    info: "ユーザー情報",
+    settings: "設定",
+    theme: "テーマ",
+    language: "言語",
+  },
+  role: {
+    title: "役割管理",
+    name: "役割名",
+    code: "役割コード",
+    description: "説明",
+    permissions: "権限",
+    createRole: "ロールの作成",
+    editRole: "役割の編集",
+    deleteRole: "役割の削除",
+    confirmDelete: "この役割を削除してもよろしいですか?",
+    assignPermissions: "権限の割り当て",
+    codeRequired: "役割コードを入力してください",
+    codePattern:
+      "役割コードは文字、数字、アンダースコア、ハイフンのみをサポートします",
+    selectPermissions: "権限を選択してください",
+    updateSuccess: "役割が正常に更新されました",
+    createSuccess: "ロールが正常に作成されました",
+  },
+  permission: {
+    title: "メニュー管理",
+    name: "メニュー名",
+    code: "許可コード",
+    type: "タイプ",
+    menu: "メニュー",
+    button: "ボタン",
+    api: "API",
+    resource: "リソース",
+    action: "アクション",
+    createPermission: "メニューの作成",
+    editPermission: "編集メニュー",
+    deletePermission: "メニューの削除",
+    confirmDelete: "このメニューとその子メニューを削除してもよろしいですか?",
+    expandAll: "すべて展開",
+    collapseAll: "すべて折りたたむ",
+    parentMenu: "親メニュー",
+    createChildMenu: "子メニューの作成",
+    visible: "見える",
+    show: "見せる",
+    hide: "隠れる",
+    routePath: "ルートパス",
+    componentPath: "コンポーネントのパス",
+    sort: "選別",
+    addChild: "子の追加",
+    codeRequired: "許可コードを入力してください",
+    codePattern:
+      "許可コードは文字、数字、アンダースコア、ハイフンのみをサポートします",
+    menuRouteRequired: "メニュータイプにはルートパスが必要です",
+    icon: "アイコン",
+    iconPlaceholder: "例えばユーザー概要",
+    visibleStatus: "可視性",
+    updateSuccess: "メニューが正常に更新されました",
+    createSuccess: "メニューが正常に作成されました",
+  },
+  dict: {
+    title: "辞書",
+    dictType: "辞書の種類",
+    dictData: "辞書データ",
+    typeName: "型名",
+    typeCode: "タイプコード",
+    description: "説明",
+    dictLabel: "ラベル",
+    dictValue: "価値",
+    sort: "選別",
+    remark: "述べる",
+    enabled: "有効",
+    disabled: "無効",
+    createType: "タイプの作成",
+    editType: "編集タイプ",
+    deleteType: "削除タイプ",
+    createData: "データの作成",
+    editData: "データの編集",
+    deleteData: "データの削除",
+    confirmDeleteType: "辞書タイプ「{name}」を削除してもよろしいですか?",
+    confirmDeleteData: "辞書データ「{label}」を削除してもよろしいですか？",
+    typeNamePlaceholder: "タイプ名を入力してください",
+    typeCodePlaceholder: "タイプコードを入力してください",
+    descriptionPlaceholder: "説明を入力してください",
+    labelPlaceholder: "ラベルを入力してください",
+    valuePlaceholder: "値を入力してください",
+    remarkPlaceholder: "備考を入力してください",
+    selectTypeHint: "左側から辞書の種類を選択してください",
+    requiredFields: "必須フィールドに入力してください",
+    deleteSuccess: "正常に削除されました",
+    deleteFailed: "削除に失敗しました",
+    updateSuccess: "正常に更新されました",
+    createSuccess: "正常に作成されました",
+    operateFailed: "操作が失敗しました",
+    loadTypeFailed: "辞書タイプのロードに失敗しました",
+    loadDataFailed: "辞書データの読み込みに失敗しました",
+    dictDataTitle: "辞書データ - {name}",
+    confirmDelete: "削除の確認",
+  },
+  table: {
+    title: "テーブルの例",
+    total: "{total} アイテムの合計",
+    page: "ページ {page}",
+    pageSize: "{size} 1 ページあたりの項目",
+    goTo: "に行く",
+  },
+  form: {
+    title: "フォーム例",
+    basicInfo: "基本情報",
+    advancedInfo: "高度な情報",
+    submit: "提出する",
+    reset: "リセット",
+    validateSuccess: "検証に合格しました",
+    validateFailed: "検証に失敗しました",
+  },
+  exampleTable: {
+    userList: "ユーザーリスト",
+    subTitle: "ProTable の例",
+    createUser: "ユーザーの作成",
+    editUser: "ユーザーの編集",
+    deleteSuccess: "正常に削除されました",
+    updateSuccess: "正常に更新されました",
+    createSuccess: "正常に作成されました",
+  },
+  notificationCenter: {
+    kicker: "通知ハブ",
+    title: "通知センター",
+    subtitle:
+      "高速なフィルタリングと詳細な追跡により、システムの更新、メッセージ、タスクの結果を 1 か所で追跡します。",
+    searchPlaceholder: "タイトルまたは内容で通知を検索する",
+    listTitle: "お知らせ一覧",
+    listSubtitle: "{count} 通知が一致しました",
+    emptyFiltered: "一致する通知はありません",
+    metrics: {
+      total: "合計通知数",
+      unread: "未読",
+      today: "今日",
+    },
+    filters: {
+      allStatus: "すべてのステータス",
+      unread: "未読",
+      read: "読む",
+      allTypes: "全種類",
+      system: "システムアップデート",
+      message: "メッセージ",
+      security: "セキュリティ警告",
+      task: "タスク完了",
+      error: "エラーアラート",
+    },
+    status: {
+      read: "読む",
+      unread: "未読",
+    },
+    meta: {
+      type: "タイプ",
+      receivedAt: "受信場所",
+    },
+    actions: {
+      markAsRead: "既読としてマークする",
+      openRelated: "関連ページを開く",
+      delete: "通知の削除",
+    },
+    placeholder: {
+      title: "通知を選択して詳細を表示します",
+      desc: "左側のリストから項目を選択すると、完全なコンテンツと関連アクションがここに表示されます。",
+    },
+  },
+  exampleCaptcha: {
+    title: "キャプチャコンポーネントの例",
+    description:
+      "カスタマイズ可能なスタイルとコールバックを備えた一般的なフロントエンド キャプチャ インタラクション コンポーネント。",
+    slider: "スライダーキャプチャ",
+    rotate: "キャプチャを回転する",
+    puzzle: "パズルキャプチャ",
+    point: "ポイントキャプチャ",
+    success: "検証に合格しました！",
+    fail: "検証に失敗しました。再試行してください",
+  },
+  exampleSpin: {
+    title: "スピンの例",
+    description:
+      "基本的な読み込み、サイズ、カスタム インジケーター、進行状況、遅延、フルスクリーンなど、Spin コンポーネントのさまざまな使用法を示します。",
+    basic: "基本とサイズ",
+    tip: "カスタムチップ",
+    nested: "カードのロード",
+    delay: "遅れ",
+    customIndicator: "カスタムインジケーター",
+    percent: "進捗",
+    customStyle: "カスタムスタイル",
+    fullscreen: "全画面表示",
+    showFullscreen: "全画面表示",
+    loadingState: "読み込み状態:",
+  },
+  exampleEditor: {
+    title: "リッチ テキスト エディターの例",
+    description:
+      "画像のアップロード、リンクの挿入、書式設定などをサポートする Tiptap ベースのリッチ テキスト エディター。",
+    basicUsage: "基本的な使い方",
+    placeholder: "内容を入力してください...",
+    disabledState: "無効状態",
+    customHeight: "カスタム高さ",
+    contentPreview: "コンテンツのプレビュー",
+    htmlOutput: "HTML出力",
+    noContent: "コンテンツなし",
+    save: "コンテンツの保存",
+    clear: "クリアコンテンツ",
+    loadDemo: "デモをロードする",
+    savedMessage: "保存されたコンテンツ",
+    clearedMessage: "クリアされたコンテンツ",
+    demoLoadedMessage: "デモコンテンツが読み込まれました",
+  },
+  exampleForm: {
+    description: "さまざまなフォーム コントロールを示す高度な ProForm の例",
+    age: "年",
+    ageRange: "年齢は 1 ～ 150 歳である必要があります",
+    interests: "興味のあること",
+    birthDate: "生年月日",
+    score: "スコア",
+    progress: "進捗",
+    bioPlaceholder: "略歴を入力してください",
+    submitSuccess: "無事に提出されました！",
+    roles: {
+      admin: "管理者",
+      user: "一般ユーザー",
+      guest: "ゲスト",
+    },
+    interestOptions: {
+      reading: "読む",
+      sports: "スポーツ",
+      music: "音楽",
+      travel: "旅行",
+    },
+  },
+  exampleIcon: {
+    title: "アイコンのショーケース",
+    subtitle: "Icon コンポーネントと IconPicker の統合デモ",
+    capabilities:
+      "サポート: ローカル SVG、antdv-next アイコン、Iconify (オフライン セット + オンライン検索)",
+    renderTitle: "3 つのレンダリング モード",
+    renderSubtitle:
+      "任意のサンプルをクリックして、以下の IconPicker に適用します。",
+    pickerTitle: "アイコンピッカーのデモ",
+    pickerSubtitle:
+      "オンライン検索をトリガーするには、2 文字以上を入力します。オフラインアイコンセットはカテゴリ別に用意されています",
+    modelLabel: "アイコンの値",
+    previewLabel: "ライブプレビュー",
+    copy: "値のコピー",
+    copySuccess: "アイコン値がコピーされました",
+    copyEmpty: "最初にアイコンを選択してください",
+    copyFailed: "コピーに失敗しました。手動でコピーしてください",
+    reset: "デフォルトにリセット",
+    sourceLabel: "ソース",
+    sourceSvg: "ローカルSVGシンボル",
+    sourceAntdv: "antdv-next コンポーネントのアイコン",
+    sourceIconify: "アイコン化",
+    sourceOnline: "オンライン結果をアイコン化する",
+    sourceUnknown: "未知",
+    guidesTitle: "統合ガイド",
+    guidesSubtitle:
+      "2 つの一般的な統合パス: SVG Symbol と Iconify (オンライン + オフライン)",
+    svgGuideTitle: "SVGの追加と使用方法",
+    iconifyGuideTitle: "アイコン化の使い方",
+    guideStepSvg1:
+      '<symbol id="..."> 定義をアプリ ルート (またはレイアウト ルート) に挿入します。',
+    guideStepSvg2:
+      "svg:icon-id を持つ Icon コンポーネントを使用します。 svg:アイコン-デモ-オービット。",
+    guideStepSvg3:
+      "IconPicker のローカル SVG 検出の場合、src/assets/icons の下にファイルを配置し、svgIcons を渡します。",
+    guideStepIconify1:
+      "iconify 名を直接渡します: ri:home-line / mdi:account / ion:apps-outline。",
+    guideStepIconify2:
+      "IconPicker には、ネットワークなしで利用できるオフライン セット (ri / mdi / ion) が含まれています。",
+    guideStepIconify3:
+      "[すべて/オンライン] カテゴリに、Iconify オンラインを検索するためのキーワード (少なくとも 2 文字) を入力します。",
+    modeSvg: "SVG スプライト",
+    modeAntdv: "antdv-next",
+    modeIconify: "アイコン化",
+    sampleHint: "クリックして適用",
+  },
+  exampleWatermark: {
+    title: "透かしの例",
+    description:
+      "グローバル ウォーターマーク機能 - ウォーターマーク効果をリアルタイムで設定およびプレビューする",
+    enableGlobal: "グローバルウォーターマークを有効にする",
+    content: "透かしテキスト",
+    fontSize: "フォントサイズ",
+    rotate: "回転",
+    opacity: "不透明度",
+    gapX: "水平方向のギャップ",
+    gapY: "垂直ギャップ",
+    preview: "ローカルプレビュー",
+    previewText: "この領域はウォーターマーク効果をプレビューするための領域です",
+  },
+  exampleModal: {
+    title: "プロモーダルのデモ",
+    description:
+      "ドラッグ、フルスクリーン、エッジのサイズ変更、ビューポートの制約を備えた antdv-next モーダルの強化されたラッパー。",
+    openDefault: "デフォルトモーダルを開く",
+    openWide: "ワイドモーダルを開く",
+    width: "モーダル幅",
+    dataCount: "データサイズ",
+    draggable: "タイトルをドラッグ",
+    resizable: "エッジのサイズ変更",
+    fullscreenable: "全画面ボタン",
+    mask: "マスク",
+    maskClosable: "マスクをクリックして閉じる",
+    keyboard: "ESC で閉じる",
+    modalTitle: "ドラッグ可能/サイズ変更可能な ProModal",
+    hint: "右上のアクションでは、全画面表示と閉じることができます。タイトルをドラッグして移動します。サイズを変更するには、端/角をドラッグします。",
+    contentTitle: "機能のデモンストレーション",
+    contentDescription:
+      "次の長いリストは、スクロールとビューポート境界の動作を示すために使用されます。",
+    formKeyword: "キーワード",
+    formKeywordPlaceholder: "キーワードを入力してください",
+    formRemark: "述べる",
+    formRemarkPlaceholder: "備考を入力してください",
+    rowText: "デモ データ行 #{index}",
+    confirmSuccess: "正常に確認されました",
+  },
+  exampleException: {
+    "403title": "403",
+    "403description":
+      "申し訳ありませんが、このページにアクセスする権限がありません",
+    "404title": "404",
+    "404description": "申し訳ありませんが、アクセスしたページは存在しません",
+    "500title": "500",
+    "500description": "申し訳ありませんが、サーバーがエラーを報告しています",
+  },
+  editor: {
+    insertLink: "リンクを挿入",
+    linkUrl: "リンクURL",
+    linkText: "リンクテキスト",
+    linkTextPlaceholder: "リンクテキスト",
+    defaultPlaceholder: "内容を入力してください...",
+    imageOnly: "画像ファイルのみ許可されます",
+    imageSizeLimit: "画像サイズは5MBを超えることはできません",
+    imageInsertSuccess: "画像が正常に挿入されました",
+    imageUploadFailed: "画像のアップロードに失敗しました",
+    enterLinkUrl: "リンクURLを入力してください",
+  },
+  iconPicker: {
+    selectIcon: "アイコンを選択",
+    searchPlaceholder: "アイコン名を検索...",
+    onlineSearchFailed: "オンライン検索に失敗しました",
+    onlineSearchFailedDetail: "オンライン検索が失敗しました: {message}",
+  },
+  captcha: {
+    clickInOrder: "順番にクリックしてください:",
+    refresh: "リフレッシュ",
+  },
+  about: {
+    description:
+      "Vue 3 + TypeScript + Ant Design Vue に基づいて構築された最新の管理フレームワーク。本番環境に対応しており、機能が豊富で、拡張も簡単です。",
+    projectInfo: "プロジェクト情報",
+    projectName: "プロジェクト名",
+    version: "バージョン",
+    license: "ライセンス",
+    author: "著者",
+    email: "電子メール",
+    documentation: "ドキュメント",
+    techStack: "技術スタック",
+    features: "コア機能",
+    feature1: "Vue 3 構成 API",
+    feature1Desc:
+      "ロジックの再利用、コード構成、および事後対応パフォーマンスの向上",
+    feature2: "フル TypeScript Strict モード",
+    feature2Desc: "開発時にエラーを検出するための完全な型推論",
+    feature3: "完全なRBAC許可システム",
+    feature3Desc:
+      "すぐに使用できるページ、ボタン、フィールド、および API レベルのアクセス制御",
+    feature4: "動的なルートとメニューの生成",
+    feature4Desc:
+      "ユーザーの役割に基づいてルートとサイドバー メニューを自動生成",
+    feature5: "i18n 多言語サポート",
+    feature5Desc: "簡単なロケール拡張機能を備えた組み込みの中国語と英語",
+    feature6: "ライト/ダークテーマの切り替え",
+    feature6Desc:
+      "自動システム設定検出機能を備えた 6 つのプリセットテーマカラー",
+    feature7: "ProTable / ProForm コンポーネント",
+    feature7Desc:
+      "一般的なビジネス シナリオをカバーする構成主導のテーブルとフォーム",
+    feature8: "モックデータ開発モード",
+    feature8Desc:
+      "フロントエンドとバックエンドの並行開発のための組み込みモック システム",
+  },
+  proForm: {
+    enterPlaceholder: "{label}を入力してください",
+    selectPlaceholder: "{label}を選択してください",
+    uploadFile: "ファイルをアップロードする",
+  },
+  proUpload: {
+    uploadFile: "ファイルをアップロードする",
+    uploadImage: "画像をアップロードする",
+    dragHint:
+      "ファイルをクリックまたはこの領域にドラッグしてアップロードします",
+    fileSizeExceed: "ファイル サイズは {size}MB を超えてはなりません",
+    fileTypeNotAllowed: "許可されていないファイルの種類",
+  },
+  proStepForm: {
+    prev: "前の",
+    next: "次",
+  },
+  proTable: {
+    total: "{total} アイテムの合計",
+    density: "テーブル密度",
+    checkAll: "すべて選択",
+    indexColumn: "インデックス列",
+    fixLeft: "ピン左",
+    fixRight: "右にピン留めする",
+    densityLarge: "広々とした",
+    densityMiddle: "デフォルト",
+    densitySmall: "コンパクト",
+    loadDataFailed: "データのロードに失敗しました",
+  },
+  profile: {
+    title: "プロフィール",
+    basicInfo: "基本情報",
+    security: "安全",
+    username: "ユーザー名",
+    email: "電子メール",
+    phone: "電話",
+    role: "役割",
+    joinDate: "参加日",
+    changePassword: "パスワードを変更する",
+    currentPassword: "現在のパスワード",
+    oldPassword: "以前のパスワード",
+    newPassword: "新しいパスワード",
+    confirmPassword: "パスワードを認証する",
+    enterCurrentPassword: "現在のパスワードを入力してください",
+    enterNewPassword: "新しいパスワードを入力してください",
+    enterConfirmPassword: "新しいパスワードをもう一度入力してください",
+    passwordMismatch: "パスワードが一致しません",
+    passwordMinLength: "パスワードは6文字以上である必要があります",
+    passwordChangeSuccess: "パスワードが正常に変更されました",
+    passwordChangeFailed: "パスワードの変更に失敗しました",
+    passwordTip:
+      "ヒント: パスワードは少なくとも 6 文字にする必要があり、文字、数字、特殊文字を含めることをお勧めします。",
+    updateSuccess: "更新に成功しました",
+    updateFailed: "アップデートに失敗しました",
+  },
+  error: {
+    "403": "アクセス禁止",
+    "404": "ページが見つかりません",
+    "500": "サーバーエラー",
+    backHome: "ホームに戻る",
+    pageNotFound: "申し訳ありませんが、アクセスしたページは存在しません",
+    noPermission:
+      "申し訳ありませんが、このページにアクセスする権限がありません",
+    serverError: "申し訳ありませんが、サーバーがエラーを報告しています",
+  },
+  validation: {
+    required: "この項目は必須です",
+    email: "有効なメールアドレスを入力してください",
+    phone: "有効な電話番号を入力してください",
+    idCard: "有効な ID カード番号を入力してください",
+    url: "有効な URL を入力してください",
+    minLength: "最小長は {min} 文字です",
+    maxLength: "最大長は {max} 文字です",
+    lengthRange: "長さは {min} と {max} の間である必要があります",
+    numberRange: "値は {min} と {max} の間である必要があります",
+    min: "最小値は {min} です",
+    max: "最大値は {max} です",
+    pattern: "無効な形式",
+    usernamePattern:
+      "ユーザー名には文字、数字、アンダースコアのみを含めることができます",
+    passwordPattern:
+      "パスワードは 8 文字以上で、文字と数字を含める必要があります",
+    confirmPassword: "2 つのパスワードが一致しません",
+  },
+  dept: {
+    title: "部門管理",
+    organizationStructure: "組織",
+    searchDept: "検索部門",
+    deptName: "部署名",
+    parentDept: "親部門",
+    leader: "リーダー",
+    phone: "電話",
+    email: "電子メール",
+    sort: "選別",
+    remark: "述べる",
+    status: "状態",
+    enabled: "有効",
+    disabled: "無効",
+    createDept: "部門の作成",
+    editDept: "編集部",
+    deleteDept: "部門の削除",
+    addChildDept: "子部門の追加",
+    childDepts: "こども部門",
+    noneTopLevel: "なし (トップレベル)",
+    noneTopLevelDept: "なし（最上位部門）",
+    selectDeptNode: "左側の部門ノードを選択してください",
+    confirmDelete: "削除の確認",
+    confirmDeleteContent: "部門「{name}」を削除してもよろしいですか?",
+    hasChildrenWarning:
+      "この部門には子部門があります。最初に子部門を削除してください。",
+    deleteSuccess: "正常に削除されました",
+    deleteFailed: "削除に失敗しました",
+    updateSuccess: "正常に更新されました",
+    createSuccess: "正常に作成されました",
+    operateFailed: "操作が失敗しました",
+    pleaseEnterDeptName: "部署名を入力してください",
+    pleaseEnterLeader: "リーダーを入力してください",
+    pleaseEnterPhone: "電話番号を入力してください",
+    pleaseEnterEmail: "メールアドレスを入力してください",
+    pleaseEnterRemark: "備考を入力してください",
+    loadDataFailed: "部門データの読み込みに失敗しました",
+    createTime: "時間を作る",
+    updateTime: "更新時間",
+  },
+  config: {
+    title: "システム構成",
+    configGroups: "構成グループ",
+    configName: "設定名",
+    configKey: "設定キー",
+    configValue: "設定値",
+    valueType: "値のタイプ",
+    group: "グループ",
+    sort: "選別",
+    description: "説明",
+    builtIn: "ソース",
+    createConfig: "構成の作成",
+    editConfig: "構成の編集",
+    deleteConfig: "構成の削除",
+    confirmDelete: "削除の確認",
+    confirmDeleteContent: "設定「{name}」を削除してもよろしいですか?",
+    deleteSuccess: "正常に削除されました",
+    deleteFailed: "削除に失敗しました",
+    updateSuccess: "正常に更新されました",
+    createSuccess: "正常に作成されました",
+    operateFailed: "操作が失敗しました",
+    requiredFields: "必須フィールドに入力してください",
+    loadConfigFailed: "設定のロードに失敗しました",
+    valueTypes: {
+      string: "弦",
+      number: "番号",
+      boolean: "ブール値",
+      json: "JSON",
+    },
+    groups: {
+      basic: "基本構成",
+      security: "セキュリティ構成",
+      upload: "構成のアップロード",
+      notification: "通知設定",
+    },
+    builtInTypes: {
+      builtIn: "内蔵",
+      custom: "カスタム",
+    },
+    placeholders: {
+      configName: "構成名を入力してください",
+      configKey: "例えばサイト名",
+      configValue: "設定値を入力してください",
+      jsonFormat: "JSON形式",
+      description: "説明を入力してください",
+    },
+  },
+  file: {
+    title: "ファイル管理",
+    fileName: "ファイル名",
+    ext: "拡大",
+    size: "ファイルサイズ",
+    storage: "ストレージの種類",
+    uploader: "アップローダー",
+    uploadTime: "アップロード時間",
+    action: "アクション",
+    delete: "消去",
+    confirmDelete: "削除の確認",
+    confirmDeleteContent: "ファイル「{name}」を削除してもよろしいですか?",
+    deleteSuccess: "正常に削除されました",
+    deleteFailed: "削除に失敗しました",
+    loadFailed: "ファイルリストのロードに失敗しました",
+    storageType: {
+      local: "地元",
+      oss: "OSS",
+      cos: "COS",
+    },
+    extType: {
+      imageJpg: "画像(jpg)",
+      imagePng: "画像(png)",
+      pdf: "PDF",
+      word: "言葉",
+      excel: "エクセル",
+      zip: "アーカイブ",
+      video: "ビデオ",
+      text: "文章",
+      ppt: "パワーポイント",
+      svg: "SVG",
+    },
+  },
+  log: {
+    title: "システムログ",
+    operationLog: "操作ログ",
+    loginLog: "ログインログ",
+    clearLog: "ログをクリアする",
+    confirmClear: "クリアの確認",
+    confirmClearOperation:
+      "すべての操作ログをクリアしてもよろしいですか?この操作は元に戻すことができません。",
+    confirmClearLogin:
+      "すべてのログイン ログをクリアしてもよろしいですか?この操作は元に戻すことができません。",
+    clearSuccess: "無事クリアしました",
+    clearFailed: "クリア失敗",
+    operationUser: "オペレーター",
+    operationModule: "モジュール",
+    operationType: "操作の種類",
+    operationDescription: "説明",
+    requestMethod: "方法",
+    ipAddress: "IPアドレス",
+    duration: "間隔",
+    operationTime: "稼働時間",
+    username: "ユーザー名",
+    browser: "ブラウザ",
+    os: "OS",
+    message: "メッセージ",
+    loginTime: "ログイン時間",
+    success: "成功",
+    fail: "失敗した",
+    actionTypes: {
+      login: "ログイン",
+      logout: "ログアウト",
+      create: "作成する",
+      update: "アップデート",
+      delete: "消去",
+      export: "輸出",
+      import: "輸入",
+      other: "他の",
+    },
+    modules: {
+      userManagement: "ユーザー管理",
+      roleManagement: "役割管理",
+      menuManagement: "メニュー管理",
+      dictionary: "辞書",
+      systemLogin: "システムログイン",
+      profile: "プロフィール",
+      dashboard: "ダッシュボード",
+    },
+    loadOperationLogFailed: "操作ログの読み込みに失敗しました",
+    loadLoginLogFailed: "ログインログの読み込みに失敗しました",
+  },
+  "menu.external": "外部ページ",
+  "menu.externalIframe": "IFrame",
+  "menu.externalLink": "外部リンク",
+  "menu.externalTypescript": "TypeScript",
+  "menu.externalAntdvNext": "次へ",
+  "menu.externalVite": "ヴィーテ",
+  "menu.externalVue": "Vue.js",
+  "external.link.openedTitle": "新しいタブで開きます",
+  "external.link.openedSubTitle":
+    "ブラウザがポップアップをブロックした場合は、下のボタンをクリックして再度開きます。",
+  "external.link.openVite": "オープンバイト",
+  "external.link.openVue": "ビューを開く",
+  examples: {
+    scaffold: {
+      stateCache: {
+        title: "状態とキャッシュの例",
+        description:
+          "Pinia の永続性 (更新後も存続) とキープアライブ ローカル キャッシュ (タブの切り替え後も存続) を示します。",
+        piniaSection: "1. Pinia 永続状態",
+        keywordLabel: "キーワード",
+        keywordPlaceholder: "ページの更新後も保持されます",
+        counterLabel: "カウンタ",
+        notesLabel: "注意事項",
+        notesPlaceholder: "複数行の自動永続化をサポート",
+        resetButton: "リセット状態",
+        pinTabButton: "ピン電流タブ",
+        lastPersistTime: "前回の永続時間:",
+        keepAliveSection: "2.キープアライブローカルキャッシュ",
+        panelA: "パネルA",
+        panelB: "パネルB",
+        panelADesc: "パネルA（切り替え時に破壊されません）",
+        panelAInputPlaceholder:
+          "コンテンツを入力し、B に切り替えて元に戻ります - 引き続き保持されます",
+        localCountLabel: "ローカルカウント:",
+        panelBDesc: "パネル B (キープアライブによってもキャッシュされます)",
+        panelBTextPlaceholder:
+          "コンテンツを入力し、タブを切り替えて戻ります - 引き続き保持されます",
+        pinTabSuccess: "タブピンのステータスが切り替わります",
+      },
+      uploadSystem: {
+        title: "アップロードシステム例",
+        description:
+          "ドラッグ アンド ドロップによるアップロード + 進行状況 + 失敗時の再試行 + 画像プレビュー。ビジネス統合の準備が整います。",
+        uploading: "アップロード中",
+        success: "成功",
+        failed: "失敗した",
+        dragText:
+          "ファイルをクリックまたはこの領域にドラッグしてアップロードします",
+        dragHint:
+          "画像とドキュメントをサポートします。アップロード プロセスは、再試行ロジックを検証するために失敗をランダムにシミュレートします。",
+        retryButton: "再試行失敗",
+        clearButton: "リストをクリア",
+        failureRate: "故障率:",
+        previewTitle: "ファイルのプレビュー",
+        uploadFailedError: "ネットワークの変動によりアップロードに失敗しました",
+        uploadSuccessMsg: "アップロード成功: {name}",
+        uploadFailedMsg: "アップロードに失敗しました: {name}",
+        retryMsg: "{count} 失敗したファイルを再試行しています",
+        previewNotSupported:
+          "このファイル形式はプレビューをサポートしていません",
+      },
+      importExport: {
+        title: "インポート/エクスポートの流れの例",
+        description:
+          "テンプレートのダウンロード、CSV インポートの検証、エラー通知のエクスポート、および現在のデータのエクスポートを示します。",
+        downloadTemplate: "テンプレートをダウンロード",
+        importCsv: "CSVのインポート",
+        exportCurrent: "現在のデータをエクスポートする",
+        exportErrorReceipt: "エクスポートエラーの受信",
+        totalRows: "合計行数",
+        successRows: "成功した行",
+        updatedRows: "更新された行",
+        failedRows: "失敗した行",
+        importHint:
+          "ヘッダーはコード、名前、カテゴリ、価格、在庫である必要があります。行はコードによって更新/挿入されます。",
+        colCode: "コード",
+        colName: "名前",
+        colCategory: "カテゴリ",
+        colPrice: "価格",
+        colStock: "ストック",
+        errorRowNo: "行番号",
+        errorReason: "エラーの理由",
+        errorRaw: "生データ",
+        emptyFile: "ファイルが空であるか、有効な行がありません",
+        invalidHeader: "ヘッダーが無効です。テンプレートを使用してください",
+        errorRequired: "必須フィールドが欠落しています (コード/名前/カテゴリ)",
+        errorPrice: "価格は 0 以上の数値でなければなりません",
+        errorStock: "在庫は 0 以上の整数でなければなりません",
+        importDone: "インポートが完了しました: {success} 成功、{failed} 失敗",
+        parseFailed:
+          "CSV の解析に失敗しました。ファイル形式を確認してください。",
+      },
+      testing: {
+        title: "テスト例",
+        description:
+          "新しいモジュールにコピーできる、単体テストと e2e テスト用の推奨テンプレートを提供します。",
+        alertMessage:
+          "Vitest / Playwright の依存関係はまだインストールされていません。このページでは、構造と例を示します。",
+        unitTestTitle: "単体テスト テンプレート (Vitest)",
+        e2eTestTitle: "エンドツーエンドのテスト テンプレート (Playwright)",
+        implementationTitle: "実装シーケンス",
+        step1Title: "最初に単体テストを追加します",
+        step1Description:
+          "コア機能、ストア計算ロジック、およびエッジケースをカバーします。",
+        step2Title: "次に、e2e テストを追加します",
+        step2Description:
+          "ログイン、検索、リスト操作などの重要なユーザー パスをカバーします。",
+        step3Title: "CIとの統合",
+        step3Description:
+          "タイプチェック + ユニット + e2e をパイプラインにチェーンし、マージ前に自動的に実行します。",
+      },
+      proTableAdvanced: {
+        title: "ProTable の高度な例",
+        description:
+          "サーバーサイドのページネーションシミュレーション + バッチ操作 + インライン編集 + エクスポート",
+        selectedCount: "{count} 項目が選択されました",
+        batchDisable: "一括無効化",
+        batchDelete: "一括削除",
+        export: "現在のデータをエクスポートする",
+        statusActive: "アクティブ",
+        statusInactive: "非アクティブ",
+        username: "ユーザー名",
+        realName: "本名",
+        email: "電子メール",
+        gender: "性別",
+        status: "状態",
+        createdAt: "作成日",
+        editSimulation: "編集をシミュレート: {username}",
+        deleteConfirm: "この行を削除しますか?",
+        deleteSuccess: "削除に成功しました",
+        statusChangeSuccess: "{status} {username}",
+        batchSetStatusSuccess: "{count}項目のステータスを一括設定",
+        batchDeleteTitle: "一括削除の確認",
+        batchDeleteContent: "選択した {count} 行を削除しますか?",
+        batchDeleteSuccess: "一括削除が完了しました",
+        exportSuccess: "CSV が正常にエクスポートされました",
+      },
+      complexForm: {
+        title: "複雑なフォームの例",
+        description:
+          "ステップフォーム + 動的ポリシールール + 非同期検証 + ドラフト保存 + サーバー側フィールドエラーマッピング。",
+        step1Title: "基本情報",
+        step2Title: "ポリシーの構成",
+        step3Title: "設定の公開",
+        projectNameLabel: "プロジェクト名",
+        projectNamePlaceholder: "プロジェクト名を入力してください",
+        projectNameRequired: "プロジェクト名を入力してください",
+        projectNameExists: "プロジェクト名はすでに存在します。変更してください",
+        ownerLabel: "所有者",
+        ownerPlaceholder: "所有者を入力してください",
+        ownerRequired: "所有者を入力してください",
+        sceneLabel: "シーン",
+        scenePlaceholder: "シーンを選択",
+        sceneRequired: "シーンを選択してください",
+        sceneGrowth: "ユーザーの増加",
+        sceneRisk: "リスク管理",
+        sceneStability: "安定性の監視",
+        descriptionLabel: "説明",
+        descriptionPlaceholder: "追加の説明を入力してください",
+        addRuleButton: "ポリシールールの追加",
+        currentRulesCount: "現在の {count} ルール",
+        metricPlaceholder: "メトリック名 (例: error_rate)",
+        deleteButton: "消去",
+        ruleListEmpty: "少なくとも 1 つのポリシー ルールを追加してください",
+        ruleListIncomplete:
+          "ポリシー ルールに未入力の項目があります。入力してください。",
+        publishTypeLabel: "パブリッシュタイプ",
+        publishTypeRequired: "公開タイプを選択してください",
+        publishImmediate: "すぐに",
+        publishSchedule: "予定されている",
+        publishTimeLabel: "公開時間",
+        publishTimeRequired:
+          "スケジュールされた公開では公開時間を選択する必要があります",
+        notifyUsersLabel: "ユーザーに通知する",
+        notifyUsersPlaceholder: "ユーザー名を入力して Enter キーを押します",
+        prevButton: "前の",
+        nextButton: "次",
+        submitButton: "提出する",
+        saveDraftButton: "ドラフトの保存",
+        resetButton: "リセット",
+        draftSaved: "下書きが保存されました",
+        serverValidationError:
+          "サーバー検証に失敗しました: プロジェクト名に「fail」を含めることはできません",
+        submitFailed: "送信失敗、サーバーフィールドエラーがマップされました",
+        submitSuccess: "送信成功",
+      },
+      advancedFilter: {
+        title: "高度なフィルター ビルダーの例",
+        description:
+          "視覚的な条件 (AND/OR) を使用してフィルター ルールを構築し、再利用可能なフィルター スキームを保存します。",
+        tips: "ほとんどのリスト フィルタリング シナリオで、文字列、列挙型、数値、および日付フィールドをサポートします。",
+        addCondition: "条件の追加",
+        saveScheme: "スキームの保存",
+        matchedCount: "{count} が一致しました",
+        emptyConditions: "フィルタ条件なし",
+        inputValue: "値を入力してください",
+        selectValue: "値を選択してください",
+        secondValue: "2 番目の値",
+        savedSchemes: "保存されたスキーム:",
+        noSchemes: "なし",
+        schemeNamePlaceholder: "スキーム名を入力してください (最大 30 文字)",
+        schemeNameRequired: "スキーム名を入力してください",
+        saveSuccess: "フィルタスキームが保存されました",
+        score: "スコア",
+        statusActive: "アクティブ",
+        statusInactive: "非アクティブ",
+        statusPending: "保留中",
+        adminRole: "管理者",
+        operatorRole: "オペレーター",
+        auditorRole: "監査役",
+        opContains: "含まれています",
+        opEquals: "等しい",
+        opNotEquals: "等しくない",
+        opIn: "で",
+        opGt: "より大きい",
+        opGte: "以上",
+        opLt: "未満",
+        opLte: "以下または同等",
+        opBetween: "間",
+        opBefore: "前に",
+        opAfter: "後",
+      },
+      virtualTable: {
+        title: "仮想スクロールテーブルの例",
+        description:
+          "ネイティブの a-table 仮想スクロールを使用した大規模なデータ セットのスムーズなレンダリングを示します。",
+        tipsNativeVirtual:
+          "antdv-next ネイティブ a-table + virtual で構築されているため、追加の仮想リスト ライブラリは必要ありません。",
+        datasetSize: "データセットのサイズ",
+        regenerate: "データの再生成",
+        regenerateSuccess: "{count} 行が生成されました",
+        searchPlaceholder: "ユーザー名/メールアドレス/部門を検索",
+        allStatus: "すべてのステータス",
+        totalRows: "合計 {count}",
+        filteredRows: "フィルタリング済み {count}",
+        renderedRowsTip:
+          "スクロールをスムーズにするために、表示されている行のみがレンダリングされます。",
+        statusActive: "アクティブ",
+        statusInactive: "非アクティブ",
+        statusPending: "保留中",
+        colId: "ID",
+        colUsername: "ユーザー名",
+        colEmail: "電子メール",
+        colDepartment: "部門",
+        colStatus: "状態",
+        colUpdatedAt: "更新日",
+      },
+      masterDetail: {
+        title: "マスター/詳細の例",
+        description:
+          "チケットのマスター/スレーブ ページをシミュレートします。左側のリストから選択し、右側のドロワーに詳細と操作履歴を表示します。",
+        drawerTitle: "チケット詳細",
+        ticketNumber: "チケット番号",
+        titleLabel: "タイトル",
+        ownerLabel: "所有者",
+        priorityLabel: "優先度",
+        createdAtLabel: "作成日",
+        descTab: "説明",
+        logsTab: "操作ログ",
+        statusOpen: "開ける",
+        statusProcessing: "処理",
+        statusClosed: "閉店",
+        ticketTitle: "注文リスク アラート #{index}",
+        ownerZhang: "張",
+        ownerLi: "李",
+        ticketDescription:
+          "これは、背景情報、影響範囲、推奨されるアクションを含む、チケット {index} の詳細な説明です。",
+        actionCreate: "チケットの作成",
+        operatorSystem: "システム",
+        actionAssign: "所有者の割り当て",
+        operatorDispatch: "派遣センター",
+        colTicketNumber: "チケット番号",
+        colTitle: "タイトル",
+        colOwner: "所有者",
+        colPriority: "優先度",
+        colStatus: "状態",
+        colCreatedAt: "作成日",
+      },
+      rbac: {
+        title: "RBAC フルチェーンの例",
+        description:
+          "ページ権限、ボタン権限、フィールド権限、API 権限の 4 つの側面をカバーします。管理者とユーザーを切り替えて違いを観察します。",
+        currentSession: "現在のセッション",
+        accountInfo: "アカウント: {username} |役割: {role}",
+        switchToAdmin: "管理者に切り替える",
+        switchToUser: "ユーザーに切り替える",
+        permissionTotal: "...合計 {count} アイテム",
+        section1Title: "1. ページ権限のチェック",
+        checkUserManage: "ユーザー管理ページへのアクセス (system.user.view)",
+        checkMenuManage: "メニュー管理ページアクセス（system.permission.view）",
+        checkAdminRole: "管理者ロールのアクセス (管理者)",
+        passed: "合格した",
+        denied: "拒否されました",
+        section2Title: "2. ボタンの許可",
+        createUserButton: "ユーザーの作成",
+        editUserButton: "ユーザーの編集",
+        deleteUserButton: "ユーザーの削除",
+        buttonPermissionHint:
+          "ヒント: ボタンのレンダリングは PermissionButton によって制御されます",
+        section3Title: "3. フィールド許可（マスキング）",
+        phoneLabel: "電話：",
+        emailLabel: "電子メール:",
+        realNameLabel: "本名：",
+        section4Title: "4. API 権限のフォールバック",
+        callViewApi: "ビュー API の呼び出し",
+        callExportApi: "エクスポート API の呼び出し",
+        callDeleteApi: "削除APIを呼び出す",
+        viewUserAction: "ユーザーリストを見る",
+        exportUserAction: "ユーザーをエクスポートする",
+        deleteUserAction: "ユーザーの削除",
+        switchSuccess: "{username} に切り替えました",
+        switchFailed: "切り替えに失敗しました",
+        missingPermission: "403: 権限がありません {permission}",
+        apiSuccess: "{action} 成功しました",
+        apiFailed: "{action} 失敗しました: {error}",
+        noPermission: "許可がありません",
+      },
+      observability: {
+        title: "可観測性と例外の例",
+        description:
+          "エラー分類、ログ記録、およびワンクリック再試行による、ロード状態、空状態、およびエラー状態の統合処理。",
+        simulateSuccess: "成功をシミュレートする",
+        simulateEmpty: "空のシミュレート",
+        simulateNetwork: "ネットワークエラーをシミュレートする",
+        simulateAuth: "認証エラーをシミュレートする",
+        simulateBusiness: "ビジネスエラーをシミュレートする",
+        requestStateTitle: "リクエスト状態ビュー",
+        emptyData: "表示するデータがありません",
+        requestFailed: "リクエストが失敗しました",
+        retryButton: "リトライ",
+        clickToStart: "上のボタンをクリックしてシミュレーションを開始します",
+        errorLogTitle: "エラー分類とイベントログ",
+        networkError: "ネットワークエラー",
+        authError: "認証エラー",
+        businessError: "業務上のミス",
+        noEvents: "まだイベントはありません",
+        errorNetwork:
+          "NetworkError: リクエストがタイムアウトしました。ネットワーク接続を確認してください。",
+        errorAuth:
+          "AuthError: トークンの有効期限が切れたので、再ログインする必要があります",
+        errorBusiness: "BusinessError: ルール設定の競合のため、計算できません",
+        eventStart: "シナリオのシミュレーションを開始: {scenario}",
+        eventEmpty: "リクエストは成功しましたが、空のデータが返されました",
+        eventSuccess: "リクエストが成功して返されたデータ",
+        unknownError: "不明なエラー",
+        eventError: "リクエストが失敗しました ({type}): {message}",
+      },
+      requestAuth: {
+        title: "リクエストと認証のループの例",
+        description:
+          "同時リクエストによって 401 がトリガーされた場合のキューに入れられたリフレッシュ メカニズムと、リフレッシュ失敗後の再ログインへのフォールバックを示します。",
+        refreshFailedAlert: "更新に失敗し、再ログイン状態になりました",
+        refreshFailedDesc:
+          "後続のリクエストは失敗し続けます。新しいリクエストを行うには、「セッションをリセット」をクリックしてください。",
+        accessToken: "アクセストークン",
+        refreshToken: "リフレッシュトークン",
+        refreshStatus: "ステータスの更新",
+        empty: "空の",
+        refreshing: "さわやか",
+        idle: "アイドル状態",
+        singleRequest: "単一のリクエスト",
+        concurrentRequest: "5 つの同時リクエスト",
+        expireToken: "トークンの期限切れ",
+        simulateRefreshFail: "リフレッシュの失敗をシミュレートする",
+        resetSession: "セッションをリセット",
+        logTitle: "イベントログ (最新の 80 エントリ)",
+        clearLog: "ログをクリアする",
+        noLogs: "まだログがありません",
+        tokenExpired: "[{apiName}] トークンの有効期限が切れました",
+        apiSuccess: "[{apiName}] リクエストが成功しました",
+        refreshTokenInvalid: "リフレッシュトークンが無効です",
+        logRefreshStart:
+          "トークンのリフレッシュをトリガーします (最初の 401 リクエストのみが実行されます)",
+        logRefreshSuccess:
+          "トークンの更新が成功し、キューに入れられたリクエストが解放されました",
+        logRefreshFailed:
+          "トークンの更新に失敗しました: {message}、再ログイン状態に入ります",
+        logQueueWait:
+          "進行中の更新が検出され、リクエストがキューに入れられました",
+        logNon401Error: "[{apiName}] 401 以外のエラー: {message}",
+        log401Detected:
+          "[{apiName}] 401 が検出されました。トークンのリフレッシュを準備しています",
+        logTokenExpired:
+          "アクセス トークンを手動で期限切れとしてマークしました",
+        logSessionReset:
+          "セッションがリセットされ、新しいリクエストの準備が整いました",
+        singleRequestFailed: "単一のリクエストが失敗しました",
+        logConcurrentStart:
+          "5 つの同時リクエストを開始し、リフレッシュ キューの動作を観察します",
+        concurrentPartialFail:
+          "同時リクエストは完了しましたが、{count} は失敗しました",
+        concurrentAllSuccess: "すべての同時リクエストが成功しました",
+        logRefreshWillFail: "次回の更新は強制的に失敗します",
+        refreshFailTriggered: "リフレッシュ失敗シナリオがトリガーされました",
+      },
+    },
+    jsonInput: {
+      title: "JSON入力例",
+      description: "説明",
+      basicUsage: "基本的な使い方",
+      userConfig: "ユーザー設定",
+      clickToEdit: "クリックして JSON を編集します",
+      editUserConfig: "ユーザー設定の編集",
+      displayValue: "値の表示 (displayKey を使用)",
+      productName: "製品名",
+      price: "価格",
+      stock: "ストック",
+      selectProduct: "製品の選択",
+      advancedUsage: "高度な使用法",
+      withI18nKeys: "主要な国際化サポート",
+      i18nKeysHint:
+        "label-map プロップを使用してキーに i18n ラベルを提供します",
+      withDisabledFields: "無効なフィールドあり",
+      apiKey: "APIキー",
+      endpoint: "終点",
+      timeout: "タイムアウト (秒)",
+      systemConfig: "システム構成",
+      nestedObject: "ネストされたオブジェクトのサポート",
+      userInfo: "ユーザー情報",
+      name: "名前",
+      settings: "設定",
+      theme: "テーマ",
+      language: "言語",
+      nestedData: "ネストされたデータ構造",
+      emptyObject: "空のオブジェクト (新規作成)",
+      createNew: "新しい構成の作成",
+    },
+    i18nInput: {
+      description:
+        "多言語コンテンツ編集をサポートする国際化された入力コンポーネント。 JsonInput の上に構築されており、システムでサポートされている言語に基づいてフォーム フィールドが自動的に生成されます。",
+      productName: "製品名（多言語対応）",
+      productDescription: "製品説明（多言語）",
+      editProductName: "製品名の編集",
+      editProductDesc: "製品説明の編集",
+      clickToEdit: "クリックして多言語コンテンツを編集します",
+      stringFormat: "文字列形式の値",
+      stringFormatHint:
+        "文字列形式の JSON をサポートし、コンポーネントは自動的に解析してシリアル化します。",
+      currentLocale: "表示ロケールの指定",
+      currentLocaleHint:
+        "ロケールプロパティを使用して、入力に表示する言語値を指定します",
+      emptyValue: "空の値 (自動初期化)",
+      dataPreview: "データのプレビュー",
+      valueType: "値のタイプの切り替え",
+      showAsString: "文字列として表示",
+      showAsObject: "オブジェクトとして表示",
+      stringValue: "文字列フォーマット",
+      objectValue: "オブジェクト形式",
+    },
+  },
+};
diff --git a/antdv-next-admin/src/locales/ko-KR.ts b/antdv-next-admin/src/locales/ko-KR.ts
new file mode 100644
index 0000000..f6aa072
--- /dev/null
+++ b/antdv-next-admin/src/locales/ko-KR.ts
@@ -0,0 +1,1402 @@
+export default {
+  common: {
+    appName: "Antdv Next Admin",
+    add: "추가하다",
+    edit: "편집하다",
+    delete: "삭제",
+    view: "보다",
+    search: "찾다",
+    reset: "다시 놓기",
+    submit: "제출하다",
+    cancel: "취소",
+    confirm: "확인하다",
+    save: "구하다",
+    export: "내보내다",
+    import: "수입",
+    refresh: "새로 고치다",
+    operate: "작동하다",
+    more: "더",
+    back: "뒤쪽에",
+    expand: "확장하다",
+    collapse: "무너지다",
+    ok: "좋아요",
+    close: "닫다",
+    yes: "예",
+    no: "아니요",
+    loading: "로드 중...",
+    noData: "데이터 없음",
+    success: "성공",
+    error: "오류",
+    warning: "경고",
+    info: "정보",
+    copySuccess: "성공적으로 복사되었습니다",
+    copyFailed: "복사 실패",
+    actions: "행위",
+    status: "상태",
+    createTime: "시간 만들기",
+    updateTime: "업데이트 시간",
+    menu: "메뉴",
+    navigate: "탐색",
+    select: "선택하다",
+    clear: "분명한",
+    component: "요소",
+    basicUsage: "기본 사용법",
+    advancedUsage: "고급 사용법",
+    preview: "시사",
+    jsonContent: "JSON 콘텐츠",
+    jsonPlaceholder: "유효한 JSON을 입력하세요...",
+    jsonParseError: "잘못된 JSON 형식",
+    invalidArray: "잘못된 배열 형식",
+    formEdit: "양식 편집",
+    rawEdit: "원시 편집",
+    addField: "필드 추가",
+    fieldName: "필드 이름",
+    fieldExists: "필드가 이미 존재합니다.",
+    pleaseInput: "입력해주세요",
+    fieldOrder: "필드 순서",
+    moveUp: "위로 이동",
+    moveDown: "아래로 이동",
+    enabled: "활성화됨",
+    disabled: "장애가 있는",
+    inputTags: "태그를 입력하고 Enter를 누르세요",
+    addSuccess: "성공적으로 추가되었습니다",
+    pleaseInputFieldName: "필드명을 입력해주세요",
+    inputFieldName: "입력 필드 이름",
+    selectFieldType: "필드 유형 선택",
+    typeString: "끈",
+    typeNumber: "숫자",
+    typeBoolean: "부울",
+    typeTags: "태그",
+    typeArray: "정렬",
+    typeObject: "물체",
+    searchLabel: "{label} 검색",
+  },
+  codeEditor: {
+    format: "포맷",
+    minify: "압축",
+    copy: "복사",
+    formatSuccess: "포맷 성공",
+    minifySuccess: "압축 성공",
+    copySuccess: "복사 성공",
+    copyFailed: "복사 실패",
+    jsonError: "잘못된 JSON 형식",
+  },
+  menu: {
+    dashboard: "계기반",
+    organization: "조직",
+    system: "체계",
+    user: "사용자 관리",
+    role: "역할 관리",
+    permission: "메뉴 관리",
+    dict: "사전",
+    log: "시스템 로그",
+    dept: "부서",
+    config: "시스템 구성",
+    file: "파일 관리",
+    examples: "예시 허브",
+    examplesQuickStart: "빠른 시작",
+    examplesFormInput: "양식 및 입력",
+    examplesContent: "콘텐츠 편집자",
+    examplesInteraction: "기본 상호작용",
+    examplesBusinessScaffold: "비즈니스 비계",
+    examplesSecurityEngineering: "보안 및 엔지니어링",
+    examplesIntegration: "통합 및 탐색",
+    examplesExceptionPages: "예외 페이지",
+    table: "테이블 예",
+    icon: "아이콘 예",
+    form: "양식 예",
+    jsonInput: "JSON 입력",
+    i18nInput: "I18n 입력",
+    advancedFilter: "고급 필터 빌더",
+    editor: "리치 텍스트 편집기",
+    milkdown: "마크다운 편집기",
+    modal: "모달 예",
+    spin: "스핀 예시",
+    watermark: "양수표",
+    requestAuth: "요청/인증 흐름",
+    rbacFlow: "RBAC 흐름",
+    proTableAdvanced: "프로테이블 어드밴스드",
+    complexForm: "복잡한 형태",
+    uploadSystem: "업로드 시스템",
+    importExport: "가져오기/내보내기 흐름",
+    masterDetail: "마스터 세부정보",
+    virtualTable: "가상 스크롤 테이블",
+    stateCache: "상태 및 캐시",
+    observability: "관찰 가능성",
+    testing: "테스트",
+    exception: "예외",
+    exception403: "403",
+    exception404: "404",
+    exception500: "500",
+    splitter: "스플리터",
+    tour: "투어 가이드",
+    qrcode: "QR 코드",
+    segmented: "세그먼트",
+    colorPicker: "색상 선택기",
+    profile: "윤곽",
+    about: "에 대한",
+  },
+  layout: {
+    logout: "로그아웃",
+    logoutConfirm: "정말로 로그아웃하시겠습니까?",
+    profile: "윤곽",
+    documentation: "선적 서류 비치",
+    settings: "설정",
+    theme: "주제",
+    themeLight: "라이트 테마",
+    themeDark: "어두운 테마",
+    themeAuto: "팔로우 시스템",
+    language: "언어",
+    fullscreen: "전체 화면",
+    exitFullscreen: "전체 화면 종료",
+    notifications: "알림",
+    markAllRead: "모두 읽은 것으로 표시",
+    clearAll: "모두 지우기",
+    noNotifications: "알림 없음",
+    notificationsEmptyHint: "삭제하면 여기에 새 알림이 표시됩니다.",
+    viewDetails: "세부정보 보기",
+    viewAllNotifications: "모든 알림 보기",
+    searchPlaceholder: "검색 메뉴...",
+    noSearchResults: "일치하는 메뉴가 없습니다.",
+    recentMenus: "최근 방문",
+    aiCollabEnable: "AI 협업 켜기",
+    aiCollabDisable: "AI 협업 끄기",
+    aiAssistantTitle: "AI 협업",
+    aiAssistantSubtitle: "현재 페이지 컨텍스트 기반으로 작업을 지원합니다",
+    aiCurrentPage: "현재 페이지",
+    aiQuickActions: "빠른 작업",
+    aiInputPlaceholder: "질문 또는 명령을 입력하세요 (Shift+Enter 줄바꿈)",
+    aiEnterHint: "Enter 전송, Shift+Enter 줄바꿈",
+    aiEmptyTitle: "AI 협업 시작",
+    aiEmptyDescription:
+      "페이지 설명, 데이터 요약, 다음 작업 제안을 요청할 수 있습니다",
+    aiActionExplain: "현재 페이지 설명",
+    aiActionSummary: "현재 데이터 요약",
+    aiActionRisk: "잠재 리스크 식별",
+    aiActionNextStep: "다음 단계 제안",
+    aiDemoReply:
+      '요청을 받았습니다. "{page}" 페이지 컨텍스트를 바탕으로 제안을 생성하고 있습니다.',
+    languages: {
+      zhCN: "중국어(간체)",
+      enUS: "영어",
+      jaJP: "일본어",
+      koKR: "한국어",
+    },
+    tabs: {
+      refresh: "새로 고치다",
+      close: "닫다",
+      pin: "핀",
+      unpin: "고정 해제",
+      favorite: "즐겨찾기에 추가",
+      unfavorite: "즐겨찾기에서 제거",
+      closeOthers: "기타 닫기",
+      closeAll: "모두 닫기",
+      closeLeft: "왼쪽 닫기",
+      closeRight: "오른쪽 닫기",
+      moreActions: "추가 탭 작업",
+    },
+  },
+  settings: {
+    title: "환경설정",
+    themeColor: "테마 색상",
+    sidebarTheme: "사이드바 테마",
+    light: "빛",
+    dark: "어두운",
+    layoutMode: "레이아웃 모드",
+    vertical: "수직의",
+    horizontal: "수평의",
+    pageAnimation: "페이지 애니메이션",
+    fade: "바래다",
+    slideLeft: "왼쪽으로 슬라이드",
+    slideRight: "오른쪽으로 슬라이드",
+    slideUp: "슬라이드 업",
+    slideDown: "아래로 슬라이드",
+    zoom: "줌",
+    zoomBig: "크게 확대",
+    none: "없음",
+    grayMode: "그레이 모드",
+    grayModeHint: "전체 앱에 대해 회색조 모드 활성화",
+    rememberTabState: "탭 상태 기억",
+    rememberTabStateHint: "새로 고침 후 이전에 열었던 탭을 자동으로 복원",
+    aiCollab: "AI 채팅 분할 보기",
+    aiCollabHint: "상단 내비게이션 바에 AI 채팅 입구 아이콘을 표시합니다",
+    aiCollabHintMobile: "모바일에서는 AI 채팅 분할 보기를 사용할 수 없습니다",
+    reset: "재설정 설정",
+    confirmReset: "모든 기본 설정을 재설정하시겠습니까?",
+    colors: {
+      blue: "데이브레이크 블루",
+      green: "폴라 그린",
+      purple: "골든 퍼플",
+      red: "더스트 레드",
+      orange: "선셋 오렌지",
+      cyan: "청록색",
+    },
+  },
+  login: {
+    title: "사용자 로그인",
+    username: "사용자 이름",
+    password: "비밀번호",
+    remember: "나를 기억해",
+    login: "로그인",
+    forgotPassword: "비밀번호를 잊으셨나요?",
+    noAccount: "계정이 없나요?",
+    register: "지금 등록하세요",
+    usernamePlaceholder: "사용자 이름을 입력하세요",
+    passwordPlaceholder: "비밀번호를 입력해주세요",
+    usernameRequired: "사용자 이름을 입력하세요",
+    passwordRequired: "비밀번호를 입력해주세요",
+    loginSuccess: "로그인 성공",
+    loginFailed: "로그인 실패",
+    slideToVerify: "슬라이드하여 확인",
+    verifySuccess: "확인됨",
+  },
+  dashboard: {
+    welcome: "돌아온 것을 환영합니다",
+    subtitle: "비즈니스 지표와 시스템 상태를 실시간으로 모니터링하세요",
+    systemStable: "시스템 안정",
+    todayFocus: "오늘의 초점",
+    compareYesterday: "어제와 비교 ​​{value}",
+    goodMorning: "좋은 아침이에요",
+    goodAfternoon: "좋은 오후에요",
+    goodEvening: "좋은 저녁이에요",
+    goodNight: "안녕히 주무세요",
+    totalUsers: "총 사용자",
+    totalOrders: "총 주문",
+    totalRevenue: "총 수익",
+    conversionRate: "전환율",
+    newUsers: "신규 사용자",
+    returningUsers: "복귀 사용자",
+    enterpriseUsers: "기업 사용자",
+    salesTrend: "판매 동향",
+    userDistribution: "사용자 분포",
+    recentActivities: "최근 활동",
+    quickActions: "빠른 작업",
+    viewMore: "더 많이 보기",
+    minutesAgo: "{value}분 전",
+    hoursAgo: "{value} 시간 전",
+    activities: {
+      permissionUpdated: "관리자가 시스템 메뉴 권한 설정을 업데이트했습니다.",
+      userCreated: "Sunny라는 사용자를 생성하고 운영 역할을 할당했습니다.",
+      orderTaskDone: "오늘의 주문통계 작업이 완료되었습니다.",
+      riskPolicyReleased: "위험 관리 전략 버전이 프로덕션으로 출시되었습니다.",
+    },
+    activityTags: {
+      system: "체계",
+      user: "사용자",
+      task: "일",
+      release: "풀어 주다",
+    },
+    months: {
+      jan: "1월",
+      feb: "2월",
+      mar: "3월",
+      apr: "4월",
+      may: "5월",
+      jun: "준",
+      jul: "7월",
+      aug: "8월",
+    },
+  },
+  user: {
+    title: "사용자 관리",
+    username: "사용자 이름",
+    email: "이메일",
+    realName: "실명",
+    phone: "핸드폰",
+    gender: "성별",
+    male: "남성",
+    female: "여성",
+    avatar: "화신",
+    role: "역할",
+    status: "상태",
+    active: "활동적인",
+    inactive: "비활성",
+    createUser: "사용자 생성",
+    editUser: "사용자 편집",
+    deleteUser: "사용자 삭제",
+    confirmDelete: "이 사용자를 삭제하시겠습니까?",
+    usernameRequired: "사용자 이름을 입력하세요",
+    usernameLength: "사용자 이름 길이는 3~20자 사이여야 합니다.",
+    emailRequired: "이메일을 입력해주세요",
+    selectRole: "역할을 하나 이상 선택하세요.",
+    bio: "바이오",
+    updateSuccess: "사용자가 업데이트되었습니다.",
+    createSuccess: "사용자가 성공적으로 생성되었습니다.",
+    resetPassword: "비밀번호 재설정",
+    confirmResetPassword: "이 사용자의 비밀번호를 재설정하시겠습니까?",
+    exportSuccess: "내보내기 성공",
+    exportFailed: "내보내기 실패",
+    importSuccess: "{count} 레코드를 성공적으로 가져왔습니다.",
+    importFailed: "가져오기에 실패했습니다. 파일 형식을 확인하세요.",
+    importEmpty: "파일이 비어 있거나 형식이 잘못되었습니다.",
+    importFormatError:
+      'CSV 형식이 잘못되었습니다. "사용자 이름", "이름", "이메일" 열을 포함해야 합니다.',
+    age: "나이",
+    tags: "태그",
+    address: "주소",
+    department: "부서",
+    position: "위치",
+    info: "사용자 정보",
+    settings: "설정",
+    theme: "주제",
+    language: "언어",
+  },
+  role: {
+    title: "역할 관리",
+    name: "역할 이름",
+    code: "역할 코드",
+    description: "설명",
+    permissions: "권한",
+    createRole: "역할 생성",
+    editRole: "역할 편집",
+    deleteRole: "역할 삭제",
+    confirmDelete: "이 역할을 삭제하시겠습니까?",
+    assignPermissions: "권한 할당",
+    codeRequired: "역할코드를 입력해주세요",
+    codePattern: "역할 코드는 문자, 숫자, 밑줄, 하이픈만 지원합니다.",
+    selectPermissions: "권한을 선택해주세요",
+    updateSuccess: "역할이 업데이트되었습니다.",
+    createSuccess: "역할이 성공적으로 생성되었습니다.",
+  },
+  permission: {
+    title: "메뉴 관리",
+    name: "메뉴명",
+    code: "허가 코드",
+    type: "유형",
+    menu: "메뉴",
+    button: "단추",
+    api: "API",
+    resource: "의지",
+    action: "행동",
+    createPermission: "메뉴 생성",
+    editPermission: "메뉴 편집",
+    deletePermission: "메뉴 삭제",
+    confirmDelete: "이 메뉴와 해당 하위 메뉴를 삭제하시겠습니까?",
+    expandAll: "모두 확장",
+    collapseAll: "모두 축소",
+    parentMenu: "학부모 메뉴",
+    createChildMenu: "하위 메뉴 생성",
+    visible: "보이는",
+    show: "보여주다",
+    hide: "숨다",
+    routePath: "경로 경로",
+    componentPath: "구성 요소 경로",
+    sort: "종류",
+    addChild: "자녀 추가",
+    codeRequired: "허가코드를 입력해주세요",
+    codePattern: "권한 코드는 문자, 숫자, 밑줄, 하이픈만 지원합니다.",
+    menuRouteRequired: "메뉴 유형에는 경로 경로가 필요합니다.",
+    icon: "상",
+    iconPlaceholder: "예를 들어 사용자개요",
+    visibleStatus: "시계",
+    updateSuccess: "메뉴가 업데이트되었습니다.",
+    createSuccess: "메뉴가 성공적으로 생성되었습니다",
+  },
+  dict: {
+    title: "사전",
+    dictType: "사전 유형",
+    dictData: "사전 데이터",
+    typeName: "유형 이름",
+    typeCode: "유형 코드",
+    description: "설명",
+    dictLabel: "상표",
+    dictValue: "값",
+    sort: "종류",
+    remark: "주목",
+    enabled: "활성화됨",
+    disabled: "장애가 있는",
+    createType: "유형 생성",
+    editType: "유형 편집",
+    deleteType: "유형 삭제",
+    createData: "데이터 생성",
+    editData: "데이터 편집",
+    deleteData: "데이터 삭제",
+    confirmDeleteType: '"{name}" 사전 유형을 삭제하시겠습니까?',
+    confirmDeleteData: '"{label}" 사전 데이터를 삭제하시겠습니까?',
+    typeNamePlaceholder: "유형 이름을 입력하세요.",
+    typeCodePlaceholder: "유형 코드를 입력하세요.",
+    descriptionPlaceholder: "설명을 입력해주세요",
+    labelPlaceholder: "라벨을 입력하세요.",
+    valuePlaceholder: "값을 입력하세요",
+    remarkPlaceholder: "비고를 입력해주세요",
+    selectTypeHint: "왼쪽에서 사전 유형을 선택하세요.",
+    requiredFields: "필수 항목을 입력해주세요",
+    deleteSuccess: "삭제되었습니다.",
+    deleteFailed: "삭제 실패",
+    updateSuccess: "업데이트되었습니다.",
+    createSuccess: "성공적으로 생성되었습니다",
+    operateFailed: "작업 실패",
+    loadTypeFailed: "사전 유형을 로드하지 못했습니다.",
+    loadDataFailed: "사전 데이터를 로드하지 못했습니다.",
+    dictDataTitle: "사전 데이터 - {name}",
+    confirmDelete: "삭제 확인",
+  },
+  table: {
+    title: "테이블 예",
+    total: "총 {total} 항목",
+    page: "페이지 {page}",
+    pageSize: "{size} 페이지당 항목",
+    goTo: "이동",
+  },
+  form: {
+    title: "양식 예",
+    basicInfo: "기본정보",
+    advancedInfo: "고급정보",
+    submit: "제출하다",
+    reset: "다시 놓기",
+    validateSuccess: "유효성 검사가 통과되었습니다.",
+    validateFailed: "검증 실패",
+  },
+  exampleTable: {
+    userList: "사용자 목록",
+    subTitle: "ProTable 예시",
+    createUser: "사용자 생성",
+    editUser: "사용자 편집",
+    deleteSuccess: "삭제되었습니다.",
+    updateSuccess: "업데이트되었습니다.",
+    createSuccess: "성공적으로 생성되었습니다",
+  },
+  notificationCenter: {
+    kicker: "알림 허브",
+    title: "알림 센터",
+    subtitle:
+      "빠른 필터링과 세부 추적을 통해 시스템 업데이트, 메시지, 작업 결과를 한 곳에서 추적하세요.",
+    searchPlaceholder: "제목이나 내용으로 알림 검색",
+    listTitle: "알림 목록",
+    listSubtitle: "{count} 알림이 일치함",
+    emptyFiltered: "일치하는 알림이 없습니다.",
+    metrics: {
+      total: "총 알림",
+      unread: "읽히지 않는",
+      today: "오늘",
+    },
+    filters: {
+      allStatus: "모든 상태",
+      unread: "읽히지 않는",
+      read: "읽다",
+      allTypes: "모든 유형",
+      system: "시스템 업데이트",
+      message: "메시지",
+      security: "보안 경고",
+      task: "작업 완료",
+      error: "오류 경고",
+    },
+    status: {
+      read: "읽다",
+      unread: "읽히지 않는",
+    },
+    meta: {
+      type: "유형",
+      receivedAt: "수신 시간",
+    },
+    actions: {
+      markAsRead: "읽음으로 표시",
+      openRelated: "관련 페이지 열기",
+      delete: "알림 삭제",
+    },
+    placeholder: {
+      title: "세부정보를 보려면 알림을 선택하세요.",
+      desc: "여기에서 전체 콘텐츠와 관련 작업을 보려면 왼쪽 목록에서 항목을 선택하세요.",
+    },
+  },
+  exampleCaptcha: {
+    title: "보안 문자 구성 요소 예",
+    description:
+      "사용자 정의 가능한 스타일과 콜백을 포함하는 일반적인 프런트엔드 보안 문자 상호 작용 구성 요소입니다.",
+    slider: "슬라이더 보안문자",
+    rotate: "보안 문자 회전",
+    puzzle: "퍼즐 보안 문자",
+    point: "포인트 보안 문자",
+    success: "확인이 통과되었습니다!",
+    fail: "확인에 실패했습니다. 다시 시도해 주세요.",
+  },
+  exampleSpin: {
+    title: "스핀 예시",
+    description:
+      "기본 로딩, 크기, 사용자 정의 표시기, 진행률, 지연 및 전체 화면을 포함하여 Spin 구성 요소의 다양한 사용법을 보여줍니다.",
+    basic: "기본 및 사이즈",
+    tip: "맞춤 팁",
+    nested: "카드 로딩",
+    delay: "지연",
+    customIndicator: "맞춤형 지표",
+    percent: "진전",
+    customStyle: "맞춤 스타일",
+    fullscreen: "전체 화면",
+    showFullscreen: "전체 화면 표시",
+    loadingState: "로드 상태:",
+  },
+  exampleEditor: {
+    title: "리치 텍스트 편집기 예",
+    description:
+      "이미지 업로드, 링크 삽입, 서식 지정 등을 지원하는 Tiptap 기반의 서식 있는 텍스트 편집기입니다.",
+    basicUsage: "기본 사용법",
+    placeholder: "내용을 입력하세요...",
+    disabledState: "비활성화된 상태",
+    customHeight: "사용자 정의 높이",
+    contentPreview: "콘텐츠 미리보기",
+    htmlOutput: "HTML 출력",
+    noContent: "콘텐츠 없음",
+    save: "콘텐츠 저장",
+    clear: "콘텐츠 지우기",
+    loadDemo: "데모 로드",
+    savedMessage: "저장된 콘텐츠",
+    clearedMessage: "콘텐츠가 삭제되었습니다.",
+    demoLoadedMessage: "데모 콘텐츠가 로드되었습니다.",
+  },
+  exampleForm: {
+    description: "다양한 양식 컨트롤을 보여주는 고급 ProForm 예제",
+    age: "나이",
+    ageRange: "연령은 1~150세 사이여야 합니다.",
+    interests: "이해",
+    birthDate: "생년월일",
+    score: "점수",
+    progress: "진전",
+    bioPlaceholder: "약력을 입력해주세요",
+    submitSuccess: "성공적으로 제출되었습니다!",
+    roles: {
+      admin: "관리자",
+      user: "일반 사용자",
+      guest: "손님",
+    },
+    interestOptions: {
+      reading: "독서",
+      sports: "스포츠",
+      music: "음악",
+      travel: "여행하다",
+    },
+  },
+  exampleIcon: {
+    title: "아이콘 쇼케이스",
+    subtitle: "Icon 구성 요소 및 IconPicker에 대한 통합 데모",
+    capabilities:
+      "지원: 로컬 SVG, antdv-next 아이콘, Iconify(오프라인 세트 + 온라인 검색)",
+    renderTitle: "세 가지 렌더링 모드",
+    renderSubtitle: "샘플을 클릭하여 아래 IconPicker에 적용하세요.",
+    pickerTitle: "아이콘 선택기 데모",
+    pickerSubtitle:
+      "온라인 검색을 실행하려면 2자 이상을 입력하세요. 오프라인 아이콘 세트는 카테고리별로 제공됩니다.",
+    modelLabel: "아이콘 값",
+    previewLabel: "실시간 미리보기",
+    copy: "값 복사",
+    copySuccess: "아이콘 값이 복사되었습니다.",
+    copyEmpty: "먼저 아이콘을 선택해주세요",
+    copyFailed: "복사하지 못했습니다. 수동으로 복사하세요.",
+    reset: "기본값 재설정",
+    sourceLabel: "원천",
+    sourceSvg: "로컬 SVG 기호",
+    sourceAntdv: "antdv-next 구성 요소 아이콘",
+    sourceIconify: "아이콘화 아이콘",
+    sourceOnline: "온라인 결과를 아이콘화",
+    sourceUnknown: "알려지지 않은",
+    guidesTitle: "통합 가이드",
+    guidesSubtitle:
+      "두 가지 일반적인 통합 경로: SVG Symbol 및 Iconify(온라인 + 오프라인)",
+    svgGuideTitle: "SVG를 추가하고 사용하는 방법",
+    iconifyGuideTitle: "Iconify를 사용하는 방법",
+    guideStepSvg1:
+      '앱 루트(또는 레이아웃 루트)에 <symbol id="..."> 정의를 삽입합니다.',
+    guideStepSvg2:
+      "svg:icon-id와 함께 아이콘 구성 요소를 사용하세요. svg:아이콘-데모-궤도.",
+    guideStepSvg3:
+      "IconPicker 로컬 SVG 감지의 경우 src/assets/icons 아래에 파일을 배치하고 svgIcons를 전달합니다.",
+    guideStepIconify1:
+      "iconify 이름을 직접 전달합니다: ri:home-line / mdi:account / ion:apps-outline.",
+    guideStepIconify2:
+      "IconPicker에는 네트워크 없이 사용할 수 있는 오프라인 세트(ri/mdi/ion)가 포함되어 있습니다.",
+    guideStepIconify3:
+      "All/Online 카테고리에 키워드(2자 이상)를 입력하시면 Iconify 온라인을 검색하실 수 있습니다.",
+    modeSvg: "SVG 스프라이트",
+    modeAntdv: "antdv-다음",
+    modeIconify: "아이콘화하다",
+    sampleHint: "신청하려면 클릭하세요",
+  },
+  exampleWatermark: {
+    title: "워터마크 예",
+    description:
+      "글로벌 워터마크 기능 - 실시간으로 워터마크 효과 구성 및 미리보기",
+    enableGlobal: "글로벌 워터마크 활성화",
+    content: "워터마크 텍스트",
+    fontSize: "글꼴 크기",
+    rotate: "회전",
+    opacity: "불투명",
+    gapX: "수평 간격",
+    gapY: "수직 간격",
+    preview: "로컬 미리보기",
+    previewText: "워터마크 효과를 미리보기 위한 영역입니다.",
+  },
+  exampleModal: {
+    title: "프로모달 데모",
+    description:
+      "드래그, 전체 화면, 가장자리 크기 조정 및 뷰포트 제약 조건을 갖춘 antdv-next Modal에 대한 향상된 래퍼입니다.",
+    openDefault: "기본 모달 열기",
+    openWide: "오픈 와이드 모달",
+    width: "모달 너비",
+    dataCount: "데이터 크기",
+    draggable: "제목 드래그",
+    resizable: "가장자리 크기 조정",
+    fullscreenable: "전체화면 버튼",
+    mask: "마스크",
+    maskClosable: "마스크 클릭 시 닫기",
+    keyboard: "ESC로 닫기",
+    modalTitle: "드래그 가능/크기 조정 가능 ProModal",
+    hint: "오른쪽 상단 작업은 전체 화면 및 닫기를 제공합니다. 이동하려면 제목을 드래그하세요. 크기를 조정하려면 가장자리/모서리를 드래그하세요.",
+    contentTitle: "기능 시연",
+    contentDescription:
+      "다음 긴 목록은 스크롤 및 뷰포트 경계 동작을 보여주기 위해 사용됩니다.",
+    formKeyword: "예어",
+    formKeywordPlaceholder: "키워드를 입력해주세요",
+    formRemark: "주목",
+    formRemarkPlaceholder: "비고를 입력해주세요",
+    rowText: "데모 데이터 행 #{index}",
+    confirmSuccess: "성공적으로 확인되었습니다",
+  },
+  exampleException: {
+    "403title": "403",
+    "403description":
+      "죄송합니다. 이 페이지에 액세스할 수 있는 권한이 없습니다.",
+    "404title": "404",
+    "404description": "죄송합니다. 방문한 페이지가 존재하지 않습니다.",
+    "500title": "500",
+    "500description": "죄송합니다. 서버에서 오류를 보고하고 있습니다.",
+  },
+  editor: {
+    insertLink: "링크 삽입",
+    linkUrl: "링크 URL",
+    linkText: "링크 텍스트",
+    linkTextPlaceholder: "링크 텍스트",
+    defaultPlaceholder: "내용을 입력하세요...",
+    imageOnly: "이미지 파일만 허용됩니다.",
+    imageSizeLimit: "이미지 크기는 5MB를 초과할 수 없습니다.",
+    imageInsertSuccess: "이미지가 성공적으로 삽입되었습니다.",
+    imageUploadFailed: "이미지 업로드 실패",
+    enterLinkUrl: "링크 URL을 입력하세요.",
+  },
+  iconPicker: {
+    selectIcon: "아이콘 선택",
+    searchPlaceholder: "아이콘 이름 검색...",
+    onlineSearchFailed: "온라인 검색 실패",
+    onlineSearchFailedDetail: "온라인 검색 실패: {message}",
+  },
+  captcha: {
+    clickInOrder: "순서대로 클릭하세요.",
+    refresh: "새로 고치다",
+  },
+  about: {
+    description:
+      "Vue 3 + TypeScript + Ant Design Vue를 기반으로 구축된 최신 관리 프레임워크입니다. 프로덕션 준비가 되어 있고 기능이 풍부하며 확장이 쉽습니다.",
+    projectInfo: "프로젝트 정보",
+    projectName: "프로젝트 이름",
+    version: "버전",
+    license: "특허",
+    author: "작가",
+    email: "이메일",
+    documentation: "선적 서류 비치",
+    techStack: "기술 스택",
+    features: "핵심 기능",
+    feature1: "Vue 3 컴포지션 API",
+    feature1Desc: "더 나은 로직 재사용, 코드 구성 및 반응 성능",
+    feature2: "전체 TypeScript 엄격 모드",
+    feature2Desc: "개발 시 오류를 포착하기 위한 완전한 유형 추론",
+    feature3: "완전한 RBAC 권한 시스템",
+    feature3Desc: "즉시 사용 가능한 페이지, 버튼, 필드 및 API 수준 액세스 제어",
+    feature4: "동적 경로 및 메뉴 생성",
+    feature4Desc: "사용자 역할에 따라 경로 및 사이드바 메뉴 자동 생성",
+    feature5: "i18n 다국어 지원",
+    feature5Desc: "쉬운 로캘 확장이 가능한 중국어 및 영어 내장",
+    feature6: "밝은/어두운 테마 전환",
+    feature6Desc:
+      "자동 시스템 기본 설정 감지 기능을 갖춘 6가지 사전 설정된 테마 색상",
+    feature7: "ProTable / ProForm 구성요소",
+    feature7Desc:
+      "일반적인 비즈니스 시나리오를 다루는 구성 기반 테이블 및 양식",
+    feature8: "모의 데이터 개발 모드",
+    feature8Desc: "병렬 프런트엔드 및 백엔드 개발을 위한 내장형 모의 시스템",
+  },
+  proForm: {
+    enterPlaceholder: "{label}을 입력하세요.",
+    selectPlaceholder: "{label}을 선택하세요.",
+    uploadFile: "파일 업로드",
+  },
+  proUpload: {
+    uploadFile: "파일 업로드",
+    uploadImage: "이미지 업로드",
+    dragHint: "업로드하려면 파일을 클릭하거나 이 영역으로 드래그하세요.",
+    fileSizeExceed: "파일 크기는 {size}MB를 초과할 수 없습니다.",
+    fileTypeNotAllowed: "허용되지 않는 파일 형식",
+  },
+  proStepForm: {
+    prev: "이전의",
+    next: "다음",
+  },
+  proTable: {
+    total: "총 {total} 항목",
+    density: "테이블 밀도",
+    checkAll: "모두 선택",
+    indexColumn: "인덱스 열",
+    fixLeft: "왼쪽에 고정",
+    fixRight: "오른쪽에 고정",
+    densityLarge: "넓다",
+    densityMiddle: "기본",
+    densitySmall: "콤팩트",
+    loadDataFailed: "데이터를 로드하지 못했습니다.",
+  },
+  profile: {
+    title: "윤곽",
+    basicInfo: "기본정보",
+    security: "보안",
+    username: "사용자 이름",
+    email: "이메일",
+    phone: "핸드폰",
+    role: "역할",
+    joinDate: "가입 날짜",
+    changePassword: "비밀번호 변경",
+    currentPassword: "현재 비밀번호",
+    oldPassword: "이전 비밀번호",
+    newPassword: "새 비밀번호",
+    confirmPassword: "비밀번호 확인",
+    enterCurrentPassword: "현재 비밀번호를 입력해주세요",
+    enterNewPassword: "새로운 비밀번호를 입력해주세요",
+    enterConfirmPassword: "새 비밀번호를 다시 입력해주세요",
+    passwordMismatch: "비밀번호가 일치하지 않습니다.",
+    passwordMinLength: "비밀번호는 6자 이상이어야 합니다.",
+    passwordChangeSuccess: "비밀번호가 성공적으로 변경되었습니다.",
+    passwordChangeFailed: "비밀번호를 변경하지 못했습니다.",
+    passwordTip:
+      "팁: 비밀번호는 6자 이상이어야 하며 문자, 숫자, 특수 문자를 포함하는 것이 좋습니다.",
+    updateSuccess: "업데이트 성공",
+    updateFailed: "업데이트 실패",
+  },
+  error: {
+    "403": "접근금지",
+    "404": "페이지를 찾을 수 없음",
+    "500": "서버 오류",
+    backHome: "홈으로 돌아가기",
+    pageNotFound: "죄송합니다. 방문한 페이지가 존재하지 않습니다.",
+    noPermission: "죄송합니다. 이 페이지에 액세스할 수 있는 권한이 없습니다.",
+    serverError: "죄송합니다. 서버에서 오류를 보고하고 있습니다.",
+  },
+  validation: {
+    required: "이 필드는 필수입니다",
+    email: "유효한 이메일 주소를 입력하세요.",
+    phone: "유효한 전화번호를 입력하세요.",
+    idCard: "유효한 신분증 번호를 입력하세요.",
+    url: "유효한 URL을 입력하세요.",
+    minLength: "최소 길이는 {min} 문자입니다.",
+    maxLength: "최대 길이는 {max} 문자입니다.",
+    lengthRange: "길이는 {min}에서 {max} 사이여야 합니다.",
+    numberRange: "값은 {min}에서 {max} 사이여야 합니다.",
+    min: "최소값은 {min}입니다.",
+    max: "최대값은 {max}입니다.",
+    pattern: "잘못된 형식",
+    usernamePattern: "사용자 이름에는 문자, 숫자, 밑줄만 포함할 수 있습니다.",
+    passwordPattern:
+      "비밀번호는 8자 이상이어야 하며 문자와 숫자를 포함해야 합니다.",
+    confirmPassword: "두 비밀번호가 일치하지 않습니다.",
+  },
+  dept: {
+    title: "부서 관리",
+    organizationStructure: "조직",
+    searchDept: "검색부서",
+    deptName: "부서명",
+    parentDept: "상위 부서",
+    leader: "지도자",
+    phone: "핸드폰",
+    email: "이메일",
+    sort: "종류",
+    remark: "주목",
+    status: "상태",
+    enabled: "활성화됨",
+    disabled: "장애가 있는",
+    createDept: "부서 생성",
+    editDept: "부서 편집",
+    deleteDept: "부서 삭제",
+    addChildDept: "하위 부서 추가",
+    childDepts: "하위 부서",
+    noneTopLevel: "없음(최상위 수준)",
+    noneTopLevelDept: "없음(최상위 부서)",
+    selectDeptNode: "왼쪽의 부서 노드를 선택하세요.",
+    confirmDelete: "삭제 확인",
+    confirmDeleteContent: '"{name}" 부서를 삭제하시겠습니까?',
+    hasChildrenWarning:
+      "이 부서에는 하위 부서가 있습니다. 먼저 하위 부서를 삭제하세요.",
+    deleteSuccess: "삭제되었습니다.",
+    deleteFailed: "삭제 실패",
+    updateSuccess: "업데이트되었습니다.",
+    createSuccess: "성공적으로 생성되었습니다",
+    operateFailed: "작업 실패",
+    pleaseEnterDeptName: "부서명을 입력해주세요",
+    pleaseEnterLeader: "리더를 입력해주세요",
+    pleaseEnterPhone: "전화번호를 입력해주세요",
+    pleaseEnterEmail: "이메일을 입력해주세요",
+    pleaseEnterRemark: "비고를 입력해주세요",
+    loadDataFailed: "부서 데이터를 로드하지 못했습니다.",
+    createTime: "시간 만들기",
+    updateTime: "업데이트 시간",
+  },
+  config: {
+    title: "시스템 구성",
+    configGroups: "구성 그룹",
+    configName: "구성 이름",
+    configKey: "구성 키",
+    configValue: "구성 값",
+    valueType: "값 유형",
+    group: "그룹",
+    sort: "종류",
+    description: "설명",
+    builtIn: "원천",
+    createConfig: "구성 만들기",
+    editConfig: "구성 편집",
+    deleteConfig: "구성 삭제",
+    confirmDelete: "삭제 확인",
+    confirmDeleteContent: '"{name}" 구성을 삭제하시겠습니까?',
+    deleteSuccess: "삭제되었습니다.",
+    deleteFailed: "삭제 실패",
+    updateSuccess: "업데이트되었습니다.",
+    createSuccess: "성공적으로 생성되었습니다",
+    operateFailed: "작업 실패",
+    requiredFields: "필수 항목을 입력해주세요",
+    loadConfigFailed: "구성을 로드하지 못했습니다.",
+    valueTypes: {
+      string: "끈",
+      number: "숫자",
+      boolean: "부울",
+      json: "JSON",
+    },
+    groups: {
+      basic: "기본 구성",
+      security: "보안 구성",
+      upload: "구성 업로드",
+      notification: "알림 구성",
+    },
+    builtInTypes: {
+      builtIn: "내장",
+      custom: "관습",
+    },
+    placeholders: {
+      configName: "구성 이름을 입력하세요.",
+      configKey: "예를 들어 사이트.이름",
+      configValue: "구성 값을 입력하세요.",
+      jsonFormat: "JSON 형식",
+      description: "설명을 입력해주세요",
+    },
+  },
+  file: {
+    title: "파일 관리",
+    fileName: "파일 이름",
+    ext: "확대",
+    size: "파일 크기",
+    storage: "저장 유형",
+    uploader: "업로더",
+    uploadTime: "업로드 시간",
+    action: "행동",
+    delete: "삭제",
+    confirmDelete: "삭제 확인",
+    confirmDeleteContent: '"{name}" 파일을 삭제하시겠습니까?',
+    deleteSuccess: "삭제되었습니다.",
+    deleteFailed: "삭제 실패",
+    loadFailed: "파일 목록을 로드하지 못했습니다.",
+    storageType: {
+      local: "현지의",
+      oss: "OSS",
+      cos: "코사인",
+    },
+    extType: {
+      imageJpg: "이미지(jpg)",
+      imagePng: "이미지(png)",
+      pdf: "PDF",
+      word: "단어",
+      excel: "뛰어나다",
+      zip: "보관소",
+      video: "동영상",
+      text: "텍스트",
+      ppt: "피피티",
+      svg: "SVG",
+    },
+  },
+  log: {
+    title: "시스템 로그",
+    operationLog: "작업 로그",
+    loginLog: "로그인 로그",
+    clearLog: "로그 지우기",
+    confirmClear: "확인 지우기",
+    confirmClearOperation:
+      "모든 작업 로그를 지우시겠습니까? 이 작업은 취소할 수 없습니다.",
+    confirmClearLogin:
+      "모든 로그인 로그를 지우시겠습니까? 이 작업은 취소할 수 없습니다.",
+    clearSuccess: "성공적으로 삭제됨",
+    clearFailed: "지우기 실패",
+    operationUser: "연산자",
+    operationModule: "기준 치수",
+    operationType: "작업 유형",
+    operationDescription: "설명",
+    requestMethod: "방법",
+    ipAddress: "IP 주소",
+    duration: "지속",
+    operationTime: "가동 시간",
+    username: "사용자 이름",
+    browser: "브라우저",
+    os: "OS",
+    message: "메시지",
+    loginTime: "로그인 시간",
+    success: "성공",
+    fail: "실패한",
+    actionTypes: {
+      login: "로그인",
+      logout: "로그아웃",
+      create: "만들다",
+      update: "업데이트",
+      delete: "삭제",
+      export: "내보내다",
+      import: "수입",
+      other: "다른",
+    },
+    modules: {
+      userManagement: "사용자 관리",
+      roleManagement: "역할 관리",
+      menuManagement: "메뉴 관리",
+      dictionary: "사전",
+      systemLogin: "시스템 로그인",
+      profile: "윤곽",
+      dashboard: "계기반",
+    },
+    loadOperationLogFailed: "작업 로그를 로드하지 못했습니다.",
+    loadLoginLogFailed: "로그인 로그를 로드하지 못했습니다.",
+  },
+  "menu.external": "외부 페이지",
+  "menu.externalIframe": "아이프레임",
+  "menu.externalLink": "외부 링크",
+  "menu.externalTypescript": "타입스크립트",
+  "menu.externalAntdvNext": "Antdv 다음",
+  "menu.externalVite": "비테",
+  "menu.externalVue": "Vue.js",
+  "external.link.openedTitle": "새 탭에서 열림",
+  "external.link.openedSubTitle":
+    "브라우저에서 팝업을 차단한 경우 아래 버튼을 클릭하여 다시 열어주세요.",
+  "external.link.openVite": "오픈 바이트",
+  "external.link.openVue": "오픈뷰",
+  examples: {
+    scaffold: {
+      stateCache: {
+        title: "상태 및 캐시 예",
+        description:
+          "Pinia 지속성(새로 고침 후에도 유지) 및 연결 유지 로컬 캐싱(탭 전환 후에도 유지)을 보여줍니다.",
+        piniaSection: "1. 피니아 지속 상태",
+        keywordLabel: "예어",
+        keywordPlaceholder: "페이지 새로 고침 후에도 지속됨",
+        counterLabel: "계수기",
+        notesLabel: "메모",
+        notesPlaceholder: "여러 줄, 자동 지속 지원",
+        resetButton: "상태 재설정",
+        pinTabButton: "현재 탭 고정",
+        lastPersistTime: "마지막 지속 시간:",
+        keepAliveSection: "2. 연결 유지 로컬 캐시",
+        panelA: "패널 A",
+        panelB: "패널 B",
+        panelADesc: "패널 A(전환 시 파괴되지 않음)",
+        panelAInputPlaceholder:
+          "콘텐츠 입력, B로 전환 후 다시 돌아가기 - 여전히 유지됨",
+        localCountLabel: "지역 수:",
+        panelBDesc: "패널 B(또한 연결 유지에 의해 캐시됨)",
+        panelBTextPlaceholder: "콘텐츠 입력, 탭 전환 및 복귀 - 여전히 유지됨",
+        pinTabSuccess: "탭 핀 상태가 전환됨",
+      },
+      uploadSystem: {
+        title: "업로드 시스템 예시",
+        description:
+          "드래그 앤 드롭 업로드 + 진행 + 실패 시 재시도 + 이미지 미리보기, 비즈니스 통합 준비 완료.",
+        uploading: "업로드 중",
+        success: "성공",
+        failed: "실패한",
+        dragText: "업로드하려면 파일을 클릭하거나 이 영역으로 드래그하세요.",
+        dragHint:
+          "이미지와 문서를 지원합니다. 업로드 프로세스는 재시도 논리를 확인하기 위해 실패를 무작위로 시뮬레이션합니다.",
+        retryButton: "재시도 실패",
+        clearButton: "목록 지우기",
+        failureRate: "실패율:",
+        previewTitle: "파일 미리보기",
+        uploadFailedError: "네트워크 변동으로 인해 업로드하지 못했습니다.",
+        uploadSuccessMsg: "업로드 성공: {name}",
+        uploadFailedMsg: "업로드 실패: {name}",
+        retryMsg: "{count} 실패한 파일을 다시 시도하는 중",
+        previewNotSupported: "이 파일 형식은 미리보기를 지원하지 않습니다.",
+      },
+      importExport: {
+        title: "가져오기/내보내기 흐름 예",
+        description:
+          "템플릿 다운로드, CSV 가져오기 검증, 오류 영수증 내보내기 및 현재 데이터 내보내기를 보여줍니다.",
+        downloadTemplate: "템플릿 다운로드",
+        importCsv: "CSV 가져오기",
+        exportCurrent: "현재 데이터 내보내기",
+        exportErrorReceipt: "내보내기 오류 영수증",
+        totalRows: "총 행",
+        successRows: "성공한 행",
+        updatedRows: "업데이트된 행",
+        failedRows: "실패한 행",
+        importHint:
+          "헤더는 코드, 이름, 카테고리, 가격, 재고여야 합니다. 행은 코드에 의해 업데이트됩니다.",
+        colCode: "암호",
+        colName: "이름",
+        colCategory: "범주",
+        colPrice: "가격",
+        colStock: "재고",
+        errorRowNo: "행 번호",
+        errorReason: "오류 이유",
+        errorRaw: "원시 데이터",
+        emptyFile: "파일이 비어 있거나 유효한 행이 없습니다.",
+        invalidHeader: "헤더가 잘못되었습니다. 템플릿을 사용하세요.",
+        errorRequired: "필수 입력란이 누락되었습니다(코드/이름/카테고리)",
+        errorPrice: "가격은 0보다 크거나 같은 숫자여야 합니다.",
+        errorStock: "재고는 0보다 크거나 같은 정수여야 합니다.",
+        importDone: "가져오기 완료: {success} 성공, {failed} 실패",
+        parseFailed: "CSV 구문 분석에 실패했습니다. 파일 형식을 확인하세요.",
+      },
+      testing: {
+        title: "테스트 예",
+        description:
+          "새 모듈에 복사할 수 있는 단위 테스트 및 e2e 테스트용 권장 템플릿을 제공합니다.",
+        alertMessage:
+          "Vitest/Playwright 종속성은 아직 설치되지 않았습니다. 이 페이지에서는 구조와 예시를 제공합니다.",
+        unitTestTitle: "단위 테스트 템플릿(Vitest)",
+        e2eTestTitle: "엔드투엔드 테스트 템플릿(극작가)",
+        implementationTitle: "구현 순서",
+        step1Title: "먼저 단위 테스트를 추가하세요.",
+        step1Description:
+          "핵심 기능, 저장 계산 논리 및 엣지 케이스를 다룹니다.",
+        step2Title: "그런 다음 e2e 테스트를 추가하세요.",
+        step2Description:
+          "로그인, 검색, 목록 작업과 같은 중요한 사용자 경로를 다룹니다.",
+        step3Title: "CI와 통합",
+        step3Description:
+          "체인 유형 확인 + 유닛 + e2e를 파이프라인에 추가하고 병합하기 전에 자동으로 실행합니다.",
+      },
+      proTableAdvanced: {
+        title: "ProTable 고급 예시",
+        description:
+          "서버측 페이지 매김 시뮬레이션 + 일괄 작업 + 인라인 편집 + 내보내기",
+        selectedCount: "{count} 항목 선택됨",
+        batchDisable: "일괄 비활성화",
+        batchDelete: "일괄 삭제",
+        export: "현재 데이터 내보내기",
+        statusActive: "활동적인",
+        statusInactive: "비활성",
+        username: "사용자 이름",
+        realName: "실명",
+        email: "이메일",
+        gender: "성별",
+        status: "상태",
+        createdAt: "생성 날짜",
+        editSimulation: "편집 시뮬레이션: {username}",
+        deleteConfirm: "이 행을 삭제하시겠습니까?",
+        deleteSuccess: "삭제 성공",
+        statusChangeSuccess: "{status} {username}",
+        batchSetStatusSuccess: "{count} 항목에 대한 일괄 설정 상태",
+        batchDeleteTitle: "일괄 삭제 확인",
+        batchDeleteContent: "선택한 {count} 행을 삭제하시겠습니까?",
+        batchDeleteSuccess: "일괄 삭제 완료",
+        exportSuccess: "CSV를 성공적으로 내보냈습니다.",
+      },
+      complexForm: {
+        title: "복잡한 형태의 예",
+        description:
+          "단계 양식 + 동적 정책 규칙 + 비동기 유효성 검사 + 초안 저장 + 서버 측 필드 오류 매핑.",
+        step1Title: "기본 정보",
+        step2Title: "정책 구성",
+        step3Title: "게시 설정",
+        projectNameLabel: "프로젝트 이름",
+        projectNamePlaceholder: "프로젝트 이름을 입력하세요",
+        projectNameRequired: "프로젝트 이름을 입력하세요.",
+        projectNameExists: "프로젝트 이름이 이미 존재합니다. 변경하세요.",
+        ownerLabel: "소유자",
+        ownerPlaceholder: "소유자 입력",
+        ownerRequired: "소유자를 입력하세요.",
+        sceneLabel: "장면",
+        scenePlaceholder: "장면 선택",
+        sceneRequired: "장면을 선택해주세요",
+        sceneGrowth: "사용자 성장",
+        sceneRisk: "위험 통제",
+        sceneStability: "안정성 모니터링",
+        descriptionLabel: "설명",
+        descriptionPlaceholder: "추가 설명을 입력하세요",
+        addRuleButton: "정책 규칙 추가",
+        currentRulesCount: "현재 {count} 규칙",
+        metricPlaceholder: "측정항목 이름(예: error_rate)",
+        deleteButton: "삭제",
+        ruleListEmpty: "정책 규칙을 하나 이상 추가하세요.",
+        ruleListIncomplete:
+          "정책 규칙에 채워지지 않은 항목이 있습니다. 완료해 주세요.",
+        publishTypeLabel: "게시 유형",
+        publishTypeRequired: "게시 유형을 선택하세요.",
+        publishImmediate: "즉각적인",
+        publishSchedule: "예정됨",
+        publishTimeLabel: "게시 시간",
+        publishTimeRequired: "예약된 게시는 게시 시간을 선택해야 합니다.",
+        notifyUsersLabel: "사용자에게 알림",
+        notifyUsersPlaceholder: "사용자 이름을 입력하고 Enter를 누르세요",
+        prevButton: "이전의",
+        nextButton: "다음",
+        submitButton: "제출하다",
+        saveDraftButton: "초안 저장",
+        resetButton: "다시 놓기",
+        draftSaved: "초안이 저장되었습니다.",
+        serverValidationError:
+          '서버 유효성 검사 실패: 프로젝트 이름에 "fail"을 포함할 수 없습니다.',
+        submitFailed: "제출 실패, 서버 필드 오류 매핑됨",
+        submitSuccess: "제출 성공",
+      },
+      advancedFilter: {
+        title: "고급 필터 빌더 예",
+        description:
+          "시각적 조건(AND/OR)으로 필터 규칙을 작성하고 재사용 가능한 필터 구성표를 저장하세요.",
+        tips: "대부분의 목록 필터링 시나리오에 대해 문자열, 열거형, 숫자 및 날짜 필드를 지원합니다.",
+        addCondition: "조건 추가",
+        saveScheme: "구성표 저장",
+        matchedCount: "{count} 일치함",
+        emptyConditions: "필터 조건 없음",
+        inputValue: "값을 입력하세요",
+        selectValue: "값 선택",
+        secondValue: "두 번째 값",
+        savedSchemes: "저장된 구성표:",
+        noSchemes: "없음",
+        schemeNamePlaceholder: "구성표 이름을 입력하세요(최대 30자).",
+        schemeNameRequired: "구성표 이름을 입력하세요.",
+        saveSuccess: "필터 구성이 저장되었습니다.",
+        score: "점수",
+        statusActive: "활동적인",
+        statusInactive: "비활성",
+        statusPending: "보류 중",
+        adminRole: "관리자",
+        operatorRole: "연산자",
+        auditorRole: "감사",
+        opContains: "포함",
+        opEquals: "같음",
+        opNotEquals: "같지 않음",
+        opIn: "~ 안에",
+        opGt: "보다 큼",
+        opGte: "크거나 같음",
+        opLt: "미만",
+        opLte: "작거나 같음",
+        opBetween: "사이",
+        opBefore: "전에",
+        opAfter: "후에",
+      },
+      virtualTable: {
+        title: "가상 스크롤 테이블 예",
+        description:
+          "기본 a-table 가상 스크롤을 사용하여 대규모 데이터 세트의 원활한 렌더링을 보여줍니다.",
+        tipsNativeVirtual:
+          "antdv-next 네이티브 a-table + 가상으로 구축되었으며 추가 가상 목록 라이브러리가 필요하지 않습니다.",
+        datasetSize: "데이터 세트 크기",
+        regenerate: "데이터 재생성",
+        regenerateSuccess: "{count} 행이 생성되었습니다.",
+        searchPlaceholder: "사용자 이름/이메일/부서 검색",
+        allStatus: "모든 상태",
+        totalRows: "합계 {count}",
+        filteredRows: "필터링됨 {count}",
+        renderedRowsTip: "보다 원활한 스크롤을 위해 보이는 행만 렌더링됩니다.",
+        statusActive: "활동적인",
+        statusInactive: "비활성",
+        statusPending: "보류 중",
+        colId: "ID",
+        colUsername: "사용자 이름",
+        colEmail: "이메일",
+        colDepartment: "부서",
+        colStatus: "상태",
+        colUpdatedAt: "업데이트 날짜",
+      },
+      masterDetail: {
+        title: "마스터-디테일 예",
+        description:
+          "티켓 마스터-슬레이브 페이지를 시뮬레이션합니다. 왼쪽 목록에서 선택하고 오른쪽 서랍에서 세부정보 및 작업 내역을 확인하세요.",
+        drawerTitle: "티켓 세부정보",
+        ticketNumber: "티켓번호",
+        titleLabel: "제목",
+        ownerLabel: "소유자",
+        priorityLabel: "우선 사항",
+        createdAtLabel: "생성 날짜",
+        descTab: "설명",
+        logsTab: "작업 로그",
+        statusOpen: "열려 있는",
+        statusProcessing: "처리",
+        statusClosed: "닫은",
+        ticketTitle: "주문 위험 경고 #{index}",
+        ownerZhang: "장",
+        ownerLi: "리",
+        ticketDescription:
+          "배경 정보, 영향 범위, 권장 조치를 포함하여 {index} 티켓에 대한 자세한 설명입니다.",
+        actionCreate: "티켓 생성",
+        operatorSystem: "체계",
+        actionAssign: "소유자 지정",
+        operatorDispatch: "파견센터",
+        colTicketNumber: "티켓번호",
+        colTitle: "제목",
+        colOwner: "소유자",
+        colPriority: "우선 사항",
+        colStatus: "상태",
+        colCreatedAt: "생성 날짜",
+      },
+      rbac: {
+        title: "RBAC 풀체인 예시",
+        description:
+          "페이지 권한, 버튼 권한, 필드 권한, API 권한의 4가지 차원을 다룹니다. 관리자/사용자 간을 전환하여 차이점을 관찰하세요.",
+        currentSession: "현재 세션",
+        accountInfo: "계정: {username} | 역할: {role}",
+        switchToAdmin: "관리자로 전환",
+        switchToUser: "사용자로 전환",
+        permissionTotal: "...총 {count} 항목",
+        section1Title: "1. 페이지 권한 확인",
+        checkUserManage: "사용자 관리 페이지 접속(system.user.view)",
+        checkMenuManage: "메뉴 관리 페이지 접속(system.permission.view)",
+        checkAdminRole: "관리자 역할 액세스(관리자)",
+        passed: "합격",
+        denied: "거부됨",
+        section2Title: "2. 버튼 권한",
+        createUserButton: "사용자 생성",
+        editUserButton: "사용자 편집",
+        deleteUserButton: "사용자 삭제",
+        buttonPermissionHint:
+          "힌트: 버튼 렌더링은 PermissionButton에 의해 제어됩니다.",
+        section3Title: "3. 현장 허가(마스킹)",
+        phoneLabel: "핸드폰:",
+        emailLabel: "이메일:",
+        realNameLabel: "실명:",
+        section4Title: "4. API 권한 대체",
+        callViewApi: "통화 보기 API",
+        callExportApi: "내보내기 API 호출",
+        callDeleteApi: "삭제 API 호출",
+        viewUserAction: "사용자 목록 보기",
+        exportUserAction: "사용자 내보내기",
+        deleteUserAction: "사용자 삭제",
+        switchSuccess: "{username}으로 전환됨",
+        switchFailed: "전환 실패",
+        missingPermission: "403: 권한 누락 {permission}",
+        apiSuccess: "{action} 성공",
+        apiFailed: "{action} 실패: {error}",
+        noPermission: "허가 없음",
+      },
+      observability: {
+        title: "관찰 가능성 및 예외 예",
+        description:
+          "오류 분류, 로깅 및 원클릭 재시도를 통해 로드, 비어 있음 및 오류 상태를 통합 처리합니다.",
+        simulateSuccess: "성공 시뮬레이션",
+        simulateEmpty: "빈 시뮬레이션",
+        simulateNetwork: "네트워크 오류 시뮬레이션",
+        simulateAuth: "인증 오류 시뮬레이션",
+        simulateBusiness: "비즈니스 오류 시뮬레이션",
+        requestStateTitle: "요청 상태 보기",
+        emptyData: "표시할 데이터가 없습니다.",
+        requestFailed: "요청 실패",
+        retryButton: "다시 해 보다",
+        clickToStart: "시뮬레이션을 시작하려면 위 버튼을 클릭하세요.",
+        errorLogTitle: "오류 분류 및 이벤트 로그",
+        networkError: "네트워크 오류",
+        authError: "인증 오류",
+        businessError: "비즈니스 오류",
+        noEvents: "아직 이벤트가 없습니다",
+        errorNetwork:
+          "NetworkError: 요청 시간 초과입니다. 네트워크 연결을 확인하세요.",
+        errorAuth: "AuthError: 토큰이 만료되었습니다. 다시 로그인해야 합니다.",
+        errorBusiness:
+          "BusinessError: 규칙 구성이 충돌하여 계산할 수 없습니다.",
+        eventStart: "시뮬레이션 시나리오 시작: {scenario}",
+        eventEmpty: "요청이 성공했지만 빈 데이터가 반환되었습니다.",
+        eventSuccess: "요청 성공 및 반환된 데이터",
+        unknownError: "알 수 없는 오류",
+        eventError: "요청 실패({type}): {message}",
+      },
+      requestAuth: {
+        title: "요청 및 인증 루프 예",
+        description:
+          "동시 요청이 401을 트리거할 때 대기 중인 새로 고침 메커니즘을 보여주고 새로 고침 실패 후 다시 로그인하도록 대체합니다.",
+        refreshFailedAlert: "새로고침 실패, 재로그인 상태가 됨",
+        refreshFailedDesc:
+          '후속 요청은 계속 실패합니다. 새로운 요청을 하려면 "세션 재설정"을 클릭하세요.',
+        accessToken: "액세스 토큰",
+        refreshToken: "새로고침 토큰",
+        refreshStatus: "상태 새로 고침",
+        empty: "비어 있는",
+        refreshing: "상쾌함",
+        idle: "게으른",
+        singleRequest: "단일 요청",
+        concurrentRequest: "동시 요청 5개",
+        expireToken: "토큰 만료",
+        simulateRefreshFail: "새로 고침 실패 시뮬레이션",
+        resetSession: "세션 재설정",
+        logTitle: "이벤트 로그(최근 80개 항목)",
+        clearLog: "로그 지우기",
+        noLogs: "아직 로그가 없습니다.",
+        tokenExpired: "[{apiName}] 토큰이 만료되었습니다.",
+        apiSuccess: "[{apiName}] 요청이 성공했습니다.",
+        refreshTokenInvalid: "새로고침 토큰이 잘못되었습니다.",
+        logRefreshStart: "토큰 새로 고침 트리거(처음 401 요청만 실행됨)",
+        logRefreshSuccess:
+          "토큰 새로고침이 성공하여 대기 중인 요청을 해제했습니다.",
+        logRefreshFailed:
+          "토큰 새로 고침 실패: {message}, 재로그인 상태로 전환됨",
+        logQueueWait: "새로 고침 진행 중이 감지되어 요청이 대기 중입니다.",
+        logNon401Error: "[{apiName}] 401이 아닌 오류: {message}",
+        log401Detected: "[{apiName}] 401이 감지되어 토큰 새로고침 준비 중",
+        logTokenExpired: "액세스 토큰이 만료된 것으로 수동으로 표시됨",
+        logSessionReset: "세션 재설정, 새로운 요청 준비 완료",
+        singleRequestFailed: "단일 요청이 실패했습니다.",
+        logConcurrentStart:
+          "5개의 동시 요청을 시작하고 새로 고침 대기열 동작을 관찰합니다.",
+        concurrentPartialFail: "동시 요청 완료, {count} 실패",
+        concurrentAllSuccess: "모든 동시 요청이 성공했습니다.",
+        logRefreshWillFail: "다음 새로 고침이 강제로 실패합니다.",
+        refreshFailTriggered: "새로 고침 실패 시나리오가 트리거됨",
+      },
+    },
+    jsonInput: {
+      title: "JSON 입력 예",
+      description: "설명",
+      basicUsage: "기본 사용법",
+      userConfig: "사용자 구성",
+      clickToEdit: "JSON을 수정하려면 클릭하세요.",
+      editUserConfig: "사용자 구성 편집",
+      displayValue: "표시 값(displayKey 사용)",
+      productName: "제품명",
+      price: "가격",
+      stock: "재고",
+      selectProduct: "제품 선택",
+      advancedUsage: "고급 사용법",
+      withI18nKeys: "주요 국제화 지원",
+      i18nKeysHint: "label-map prop을 사용하여 키에 대한 i18n 라벨 제공",
+      withDisabledFields: "비활성화된 필드 포함",
+      apiKey: "API 키",
+      endpoint: "엔드포인트",
+      timeout: "시간 초과(초)",
+      systemConfig: "시스템 구성",
+      nestedObject: "중첩 객체 지원",
+      userInfo: "사용자 정보",
+      name: "이름",
+      settings: "설정",
+      theme: "주제",
+      language: "언어",
+      nestedData: "중첩된 데이터 구조",
+      emptyObject: "빈 개체(새로 만들기)",
+      createNew: "새 구성 만들기",
+    },
+    i18nInput: {
+      description:
+        "다국어 컨텐츠 편집을 지원하는 국제화된 입력 구성요소입니다. JsonInput을 기반으로 구축되어 시스템 지원 언어를 기반으로 양식 필드를 자동으로 생성합니다.",
+      productName: "제품명(다국어)",
+      productDescription: "제품 설명(다국어)",
+      editProductName: "제품 이름 편집",
+      editProductDesc: "제품 설명 편집",
+      clickToEdit: "다국어 콘텐츠를 편집하려면 클릭하세요.",
+      stringFormat: "문자열 형식 값",
+      stringFormatHint:
+        "문자열 형식의 JSON을 지원하며 구성 요소가 자동으로 구문 분석 및 직렬화됩니다.",
+      currentLocale: "표시 로케일 지정",
+      currentLocaleHint:
+        "입력에 표시할 언어 값을 지정하려면 locale prop을 사용하세요.",
+      emptyValue: "빈 값(자동 초기화)",
+      dataPreview: "데이터 미리보기",
+      valueType: "값 유형 전환",
+      showAsString: "문자열로 표시",
+      showAsObject: "개체로 표시",
+      stringValue: "문자열 형식",
+      objectValue: "개체 형식",
+    },
+  },
+};
diff --git a/antdv-next-admin/src/locales/zh-CN.ts b/antdv-next-admin/src/locales/zh-CN.ts
new file mode 100644
index 0000000..28fd0bd
--- /dev/null
+++ b/antdv-next-admin/src/locales/zh-CN.ts
@@ -0,0 +1,1568 @@
+export default {
+  common: {
+    appName: "Antdv Next Admin",
+    add: "新增",
+    edit: "编辑",
+    delete: "删除",
+    view: "查看",
+    search: "搜索",
+    reset: "重置",
+    submit: "提交",
+    cancel: "取消",
+    confirm: "确定",
+    save: "保存",
+    export: "导出",
+    import: "导入",
+    refresh: "刷新",
+    operate: "操作",
+    more: "更多",
+    back: "返回",
+    expand: "展开",
+    collapse: "收起",
+    ok: "确定",
+    close: "关闭",
+    yes: "是",
+    no: "否",
+    loading: "加载中...",
+    noData: "暂无数据",
+    success: "操作成功",
+    error: "操作失败",
+    warning: "警告",
+    info: "提示",
+    copySuccess: "复制成功",
+    copyFailed: "复制失败",
+    actions: "操作",
+    status: "状态",
+    createTime: "创建时间",
+    updateTime: "更新时间",
+    menu: "菜单",
+    navigate: "切换",
+    select: "选择",
+    clear: "清空",
+    component: "组件",
+    basicUsage: "基础用法",
+    advancedUsage: "高级用法",
+    preview: "预览",
+    jsonContent: "JSON 内容",
+    jsonPlaceholder: "输入有效的 JSON...",
+    jsonParseError: "JSON 格式错误",
+    invalidArray: "无效的数组格式",
+    formEdit: "表单编辑",
+    rawEdit: "原始编辑",
+    addField: "新增字段",
+    fieldName: "字段名称",
+    fieldExists: "字段已存在",
+    pleaseInput: "请输入",
+    fieldOrder: "字段顺序",
+    moveUp: "上移",
+    moveDown: "下移",
+    enabled: "已启用",
+    disabled: "已禁用",
+    inputTags: "输入标签按回车确认",
+    addSuccess: "添加成功",
+    pleaseInputFieldName: "请输入字段名",
+    inputFieldName: "请输入字段名称",
+    selectFieldType: "请选择字段类型",
+    typeString: "文本",
+    typeNumber: "数字",
+    typeBoolean: "布尔值",
+    typeTags: "标签",
+    typeArray: "数组",
+    typeObject: "对象",
+    searchLabel: "搜索{label}",
+  },
+
+  codeEditor: {
+    format: "格式化",
+    minify: "压缩",
+    copy: "复制",
+    formatSuccess: "格式化成功",
+    minifySuccess: "压缩成功",
+    copySuccess: "复制成功",
+    copyFailed: "复制失败",
+    jsonError: "JSON 格式错误",
+  },
+
+  menu: {
+    dashboard: "数据看板",
+    organization: "组织权限",
+    system: "系统管理",
+    user: "用户管理",
+    role: "角色管理",
+    permission: "菜单管理",
+    dict: "数据字典",
+    log: "系统日志",
+    dept: "部门管理",
+    config: "系统配置",
+    file: "文件管理",
+    examples: "示例中心",
+    examplesQuickStart: "快速开始",
+    examplesFormInput: "表单与输入",
+    examplesContent: "内容编辑",
+    examplesInteraction: "基础交互",
+    examplesBusinessScaffold: "业务脚手架",
+    examplesSecurityEngineering: "安全与工程",
+    examplesIntegration: "集成与跳转",
+    examplesExceptionPages: "异常页",
+    table: "表格示例",
+    icon: "图标示例",
+    form: "表单示例",
+    jsonInput: "JSON输入",
+    i18nInput: "国际化输入",
+    advancedFilter: "高级筛选构建器",
+    editor: "富文本编辑器",
+    milkdown: "Markdown 编辑器",
+    codeEditor: "代码编辑器",
+    captcha: "验证码示例",
+    spin: "加载示例",
+    modal: "弹窗示例",
+    watermark: "水印示例",
+    splitter: "分割面板",
+    tour: "漫游引导",
+    qrcode: "二维码",
+    segmented: "分段控制器",
+    colorPicker: "颜色选择器",
+    requestAuth: "请求鉴权闭环",
+    rbacFlow: "RBAC 全链路",
+    proTableAdvanced: "ProTable 高阶",
+    complexForm: "复杂表单",
+    uploadSystem: "上传体系",
+    importExport: "导入导出闭环",
+    masterDetail: "列表-详情",
+    virtualTable: "虚拟滚动表格",
+    stateCache: "状态与缓存",
+    observability: "可观测性与异常",
+    testing: "测试示例",
+    exception: "异常页面",
+    exception403: "403",
+    exception404: "404",
+    exception500: "500",
+    profile: "个人中心",
+    about: "关于",
+  },
+
+  layout: {
+    logout: "退出登录",
+    logoutConfirm: "确定要退出登录吗？",
+    profile: "个人中心",
+    documentation: "帮助文档",
+    settings: "系统设置",
+    theme: "主题设置",
+    themeLight: "亮色主题",
+    themeDark: "暗色主题",
+    themeAuto: "跟随系统",
+    language: "语言切换",
+    fullscreen: "全屏",
+    exitFullscreen: "退出全屏",
+    notifications: "通知",
+    markAllRead: "全部已读",
+    clearAll: "清空所有",
+    noNotifications: "暂无通知",
+    notificationsEmptyHint: "清空后，新的通知会显示在这里",
+    viewDetails: "查看详情",
+    viewAllNotifications: "查看全部通知",
+    searchPlaceholder: "搜索菜单...",
+    noSearchResults: "未找到匹配的菜单",
+    recentMenus: "最近访问",
+    aiCollabEnable: "开启 AI 协同",
+    aiCollabDisable: "关闭 AI 协同",
+    aiAssistantTitle: "AI 协同",
+    aiAssistantSubtitle: "基于当前页面上下文协助操作",
+    aiCurrentPage: "当前页面",
+    aiQuickActions: "快捷指令",
+    aiInputPlaceholder: "输入你的问题或指令（Shift+Enter 换行）",
+    aiEnterHint: "Enter 发送，Shift+Enter 换行",
+    aiEmptyTitle: "开始 AI 协同",
+    aiEmptyDescription: "可让 AI 解释页面、总结数据、给出下一步建议",
+    aiActionExplain: "解释当前页面",
+    aiActionSummary: "总结当前数据",
+    aiActionRisk: "识别潜在风险",
+    aiActionNextStep: "给出下一步建议",
+    aiDemoReply: "已收到你的请求。我正在结合“{page}”页面上下文生成建议。",
+    languages: {
+      zhCN: "简体中文",
+      enUS: "English",
+      jaJP: "日本語",
+      koKR: "한국어",
+    },
+    tabs: {
+      refresh: "刷新当前",
+      close: "关闭当前",
+      pin: "固定当前",
+      unpin: "取消固定",
+      favorite: "收藏",
+      unfavorite: "取消收藏",
+      closeOthers: "关闭其他",
+      closeAll: "关闭所有",
+      closeLeft: "关闭左侧",
+      closeRight: "关闭右侧",
+      moreActions: "更多标签操作",
+    },
+  },
+
+  settings: {
+    title: "偏好设置",
+    themeColor: "主题色",
+    sidebarTheme: "左侧菜单栏样式",
+    light: "浅色",
+    dark: "深色",
+    layoutMode: "布局方式",
+    vertical: "垂直",
+    horizontal: "水平",
+    pageAnimation: "页面切换动画",
+    fade: "淡入淡出",
+    slideLeft: "左滑",
+    slideRight: "右滑",
+    slideUp: "上滑",
+    slideDown: "下滑",
+    zoom: "缩放",
+    zoomBig: "大幅缩放",
+    none: "无动画",
+    grayMode: "灰色模式",
+    grayModeHint: "开启后整个应用呈现灰色调",
+    rememberTabState: "记住标签页状态",
+    rememberTabStateHint: "刷新页面后自动恢复之前打开的标签页",
+    aiCollab: "AI 对话分屏",
+    aiCollabHint: "在顶部导航栏显示 AI 对话入口图标",
+    aiCollabHintMobile: "移动端暂不支持 AI 对话分屏",
+    reset: "重置设置",
+    confirmReset: "确定要重置所有偏好设置吗？",
+    colors: {
+      blue: "拂晓蓝",
+      green: "极光绿",
+      purple: "酱紫",
+      red: "薄暮红",
+      orange: "日暮橙",
+      cyan: "明青",
+    },
+  },
+
+  login: {
+    title: "用户登录",
+    username: "用户名",
+    password: "密码",
+    remember: "记住密码",
+    login: "登录",
+    forgotPassword: "忘记密码",
+    noAccount: "还没有账号？",
+    register: "立即注册",
+    usernamePlaceholder: "请输入用户名",
+    passwordPlaceholder: "请输入密码",
+    usernameRequired: "请输入用户名",
+    passwordRequired: "请输入密码",
+    loginSuccess: "登录成功",
+    loginFailed: "登录失败",
+    slideToVerify: "滑动验证身份",
+    verifySuccess: "验证成功",
+  },
+
+  dashboard: {
+    welcome: "欢迎回来",
+    subtitle: "实时监控您的业务数据和系统运行状态",
+    systemStable: "系统运行稳定",
+    todayFocus: "今日重点",
+    compareYesterday: "较昨日 {value}",
+    goodMorning: "早上好",
+    goodAfternoon: "下午好",
+    goodEvening: "晚上好",
+    goodNight: "夜深了",
+    totalUsers: "总用户数",
+    totalOrders: "总订单数",
+    totalRevenue: "总收入",
+    conversionRate: "转化率",
+    newUsers: "新增用户",
+    returningUsers: "回访用户",
+    enterpriseUsers: "企业用户",
+    salesTrend: "销售趋势",
+    userDistribution: "用户分布",
+    recentActivities: "最近活动",
+    quickActions: "快捷操作",
+    viewMore: "查看更多",
+    minutesAgo: "{value} 分钟前",
+    hoursAgo: "{value} 小时前",
+    activities: {
+      permissionUpdated: "管理员更新了系统菜单权限配置",
+      userCreated: "新增用户 Sunny 并分配运营角色",
+      orderTaskDone: "今日订单统计任务执行完成",
+      riskPolicyReleased: "风控策略版本已发布到生产环境",
+    },
+    activityTags: {
+      system: "系统",
+      user: "用户",
+      task: "任务",
+      release: "发布",
+    },
+    months: {
+      jan: "1月",
+      feb: "2月",
+      mar: "3月",
+      apr: "4月",
+      may: "5月",
+      jun: "6月",
+      jul: "7月",
+      aug: "8月",
+    },
+  },
+
+  user: {
+    title: "用户管理",
+    username: "用户名",
+    email: "邮箱",
+    realName: "真实姓名",
+    phone: "手机号",
+    gender: "性别",
+    male: "男",
+    female: "女",
+    avatar: "头像",
+    role: "角色",
+    status: "状态",
+    active: "启用",
+    inactive: "禁用",
+    createUser: "创建用户",
+    editUser: "编辑用户",
+    deleteUser: "删除用户",
+    confirmDelete: "确定要删除该用户吗？",
+    usernameRequired: "请输入用户名",
+    usernameLength: "用户名长度应在 3-20 之间",
+    emailRequired: "请输入邮箱",
+    selectRole: "请选择至少一个角色",
+    bio: "个人简介",
+    updateSuccess: "用户更新成功",
+    createSuccess: "用户创建成功",
+    resetPassword: "重置密码",
+    confirmResetPassword: "确定要重置该用户密码吗？",
+    age: "年龄",
+    tags: "标签",
+    address: "地址",
+    department: "部门",
+    position: "职位",
+    info: "用户信息",
+    settings: "设置",
+    theme: "主题",
+    language: "语言",
+    exportSuccess: "导出成功",
+    exportFailed: "导出失败",
+    importSuccess: "成功导入 {count} 条数据",
+    importFailed: "导入失败，请检查文件格式",
+    importEmpty: "文件为空或格式不正确",
+    importFormatError: 'CSV 格式不正确，需包含"用户名"、"姓名"、"邮箱"列',
+  },
+
+  role: {
+    title: "角色管理",
+    name: "角色名称",
+    code: "角色代码",
+    description: "角色描述",
+    permissions: "权限",
+    createRole: "创建角色",
+    editRole: "编辑角色",
+    deleteRole: "删除角色",
+    confirmDelete: "确定要删除该角色吗？",
+    assignPermissions: "分配权限",
+    codeRequired: "请输入角色编码",
+    codePattern: "角色编码仅支持字母、数字、下划线和中划线",
+    selectPermissions: "请选择权限",
+    updateSuccess: "角色更新成功",
+    createSuccess: "角色创建成功",
+  },
+
+  permission: {
+    title: "菜单管理",
+    name: "菜单名称",
+    code: "权限代码",
+    type: "权限类型",
+    menu: "菜单",
+    button: "按钮",
+    api: "API",
+    resource: "资源",
+    action: "操作",
+    createPermission: "新增菜单",
+    editPermission: "编辑菜单",
+    deletePermission: "删除菜单",
+    confirmDelete: "确定要删除该菜单及其子节点吗？",
+    expandAll: "展开全部",
+    collapseAll: "收起全部",
+    parentMenu: "上级菜单",
+    createChildMenu: "新增子菜单",
+    visible: "显示",
+    show: "显示",
+    hide: "隐藏",
+    routePath: "路由路径",
+    componentPath: "组件路径",
+    sort: "排序",
+    addChild: "新增子级",
+    codeRequired: "请输入权限编码",
+    codePattern: "权限编码仅支持字母、数字、下划线和中划线",
+    menuRouteRequired: "菜单类型必须填写路由路径",
+    icon: "图标",
+    iconPlaceholder: "例如：UserOutlined",
+    visibleStatus: "显示状态",
+    updateSuccess: "菜单更新成功",
+    createSuccess: "菜单创建成功",
+  },
+
+  dict: {
+    title: "数据字典",
+    dictType: "字典类型",
+    dictData: "字典数据",
+    typeName: "类型名称",
+    typeCode: "类型编码",
+    description: "描述",
+    dictLabel: "字典标签",
+    dictValue: "字典值",
+    sort: "排序",
+    remark: "备注",
+    enabled: "启用",
+    disabled: "禁用",
+    createType: "新增字典类型",
+    editType: "编辑字典类型",
+    deleteType: "删除字典类型",
+    createData: "新增数据",
+    editData: "编辑字典数据",
+    deleteData: "删除字典数据",
+    confirmDeleteType: '确定要删除字典类型"{name}"吗？',
+    confirmDeleteData: '确定要删除字典数据"{label}"吗？',
+    typeNamePlaceholder: "请输入类型名称",
+    typeCodePlaceholder: "请输入类型编码",
+    descriptionPlaceholder: "请输入描述",
+    labelPlaceholder: "请输入字典标签",
+    valuePlaceholder: "请输入字典值",
+    remarkPlaceholder: "请输入备注",
+    selectTypeHint: "请选择左侧字典类型",
+    requiredFields: "请填写必填项",
+    deleteSuccess: "删除成功",
+    deleteFailed: "删除失败",
+    updateSuccess: "更新成功",
+    createSuccess: "创建成功",
+    operateFailed: "操作失败",
+    loadTypeFailed: "加载字典类型失败",
+    loadDataFailed: "加载字典数据失败",
+    dictDataTitle: "字典数据 - {name}",
+    confirmDelete: "确认删除",
+  },
+
+  table: {
+    title: "表格示例",
+    total: "共 {total} 条",
+    page: "第 {page} 页",
+    pageSize: "每页 {size} 条",
+    goTo: "跳至",
+  },
+
+  form: {
+    title: "表单示例",
+    basicInfo: "基本信息",
+    advancedInfo: "高级信息",
+    submit: "提交",
+    reset: "重置",
+    validateSuccess: "验证通过",
+    validateFailed: "验证失败",
+  },
+
+  exampleTable: {
+    userList: "用户列表",
+    subTitle: "ProTable 示例",
+    createUser: "新建用户",
+    editUser: "编辑用户",
+    deleteSuccess: "删除成功",
+    updateSuccess: "更新成功",
+    createSuccess: "创建成功",
+  },
+
+  notificationCenter: {
+    kicker: "Notification Hub",
+    title: "通知中心",
+    subtitle: "统一查看系统动态、消息提醒与任务结果，支持快速筛选与详情追踪。",
+    searchPlaceholder: "搜索通知标题或内容",
+    listTitle: "通知列表",
+    listSubtitle: "当前匹配到 {count} 条通知",
+    emptyFiltered: "暂无匹配通知",
+    metrics: {
+      total: "通知总数",
+      unread: "未读通知",
+      today: "今日新增",
+    },
+    filters: {
+      allStatus: "全部状态",
+      unread: "仅未读",
+      read: "仅已读",
+      allTypes: "全部类型",
+      system: "系统更新",
+      message: "新消息",
+      security: "安全提醒",
+      task: "任务完成",
+      error: "异常告警",
+    },
+    status: {
+      read: "已读",
+      unread: "未读",
+    },
+    meta: {
+      type: "通知类型",
+      receivedAt: "接收时间",
+    },
+    actions: {
+      markAsRead: "标记为已读",
+      openRelated: "前往相关页面",
+      delete: "删除通知",
+    },
+    placeholder: {
+      title: "选择一条通知查看详情",
+      desc: "从左侧通知列表中选择任意一条，即可在此查看完整内容与关联操作。",
+    },
+  },
+
+  exampleCaptcha: {
+    title: "验证码组件示例",
+    description: "封装了常见的几种前端验证码交互组件，支持自定义样式和回调。",
+    slider: "滑块验证 (Slider)",
+    rotate: "旋转验证 (Rotate)",
+    puzzle: "拼图验证 (Puzzle)",
+    point: "点选验证 (Point)",
+    success: "验证通过！",
+    fail: "验证失败，请重试",
+  },
+
+  exampleSpin: {
+    title: "Spin 加载示例",
+    description:
+      "演示 Spin 组件的多种用法，包括基础加载、不同尺寸、自定义指示符、进度展示、延迟加载和全屏加载。",
+    basic: "基本用法 & 尺寸",
+    tip: "自定义描述文案",
+    nested: "卡片加载中",
+    delay: "延迟显示",
+    customIndicator: "自定义指示符",
+    percent: "进度展示",
+    customStyle: "自定义样式",
+    fullscreen: "全屏加载",
+    showFullscreen: "显示全屏加载",
+    loadingState: "加载状态：",
+  },
+
+  exampleEditor: {
+    title: "富文本编辑器示例",
+    description:
+      "基于 Tiptap 封装的富文本编辑器，支持图片上传、链接插入、格式化等功能。",
+    basicUsage: "基础用法",
+    placeholder: "请输入内容...",
+    disabledState: "禁用状态",
+    customHeight: "自定义高度",
+    contentPreview: "内容预览",
+    htmlOutput: "HTML 输出",
+    noContent: "暂无内容",
+    save: "保存内容",
+    clear: "清空内容",
+    loadDemo: "加载示例",
+    savedMessage: "内容已保存",
+    clearedMessage: "内容已清空",
+    demoLoadedMessage: "示例内容已加载",
+  },
+
+  exampleForm: {
+    description: "ProForm 高级表单示例 - 展示各种表单控件",
+    age: "年龄",
+    ageRange: "年龄必须在1-150之间",
+    interests: "兴趣爱好",
+    birthDate: "出生日期",
+    score: "评分",
+    progress: "进度",
+    bioPlaceholder: "请输入个人简介",
+    submitSuccess: "提交成功！",
+    roles: {
+      admin: "管理员",
+      user: "普通用户",
+      guest: "访客",
+    },
+    interestOptions: {
+      reading: "阅读",
+      sports: "运动",
+      music: "音乐",
+      travel: "旅游",
+    },
+  },
+
+  exampleIcon: {
+    title: "图标演示",
+    subtitle: "统一展示 Icon 组件与 IconPicker 的完整用法",
+    capabilities:
+      "支持：本地 SVG、antdv-next 图标、Iconify（离线库 + 在线搜索）",
+    renderTitle: "三种渲染模式",
+    renderSubtitle: "点击任意示例可直接应用到下方 IconPicker",
+    pickerTitle: "IconPicker 使用示例",
+    pickerSubtitle: "输入 2 个以上字符可触发在线搜索，离线图标库可直接分类筛选",
+    modelLabel: "图标值",
+    previewLabel: "实时预览",
+    copy: "复制值",
+    copySuccess: "图标值已复制",
+    copyEmpty: "请先选择图标",
+    copyFailed: "复制失败，请手动复制",
+    reset: "重置为默认",
+    sourceLabel: "图标来源",
+    sourceSvg: "本地 SVG Symbol",
+    sourceAntdv: "antdv-next 组件图标",
+    sourceIconify: "Iconify 图标",
+    sourceOnline: "Iconify 在线结果",
+    sourceUnknown: "未识别",
+    guidesTitle: "接入说明",
+    guidesSubtitle: "两种最常用接入路径：SVG Symbol 与 Iconify（在线 + 离线）",
+    svgGuideTitle: "SVG 如何添加并使用",
+    iconifyGuideTitle: "Iconify 如何使用",
+    guideStepSvg1:
+      '在页面根节点（或全局布局）注入 <symbol id="..."> 图标定义。',
+    guideStepSvg2: "使用 Icon 组件传入 svg:图标ID，例如 svg:icon-demo-orbit。",
+    guideStepSvg3:
+      "若希望 IconPicker 识别本地 SVG，可将文件放到 src/assets/icons 并传入 svgIcons。",
+    guideStepIconify1:
+      "直接传入 iconify 名称：ri:home-line / mdi:account / ion:apps-outline。",
+    guideStepIconify2:
+      "IconPicker 已内置离线库（ri / mdi / ion），无需联网即可选择。",
+    guideStepIconify3:
+      "在“全部/在线”分类输入关键字（至少 2 字符）可从 Iconify 在线检索。",
+    modeSvg: "SVG Sprite",
+    modeAntdv: "antdv-next",
+    modeIconify: "Iconify",
+    sampleHint: "点击示例即应用",
+  },
+
+  exampleWatermark: {
+    title: "水印示例",
+    description: "全局水印功能 - 可在此配置并即时预览水印效果",
+    enableGlobal: "启用全局水印",
+    content: "水印文字",
+    fontSize: "字体大小",
+    rotate: "旋转角度",
+    opacity: "透明度",
+    gapX: "水平间距",
+    gapY: "垂直间距",
+    preview: "本地预览",
+    previewText: "此区域用于预览水印效果",
+  },
+
+  exampleSplitter: {
+    title: "分割面板示例",
+    description:
+      "Splitter 组件用于创建可拖拽调整大小的分割面板布局，支持水平/垂直分割、嵌套布局和面板配置。",
+    basicTab: "基础分割",
+    nestedTab: "嵌套布局",
+    configTab: "面板配置",
+    businessTab: "业务示例",
+    horizontalSplit: "水平分割（左右布局）",
+    verticalSplit: "垂直分割（上下布局）",
+    leftPanel: "左侧面板",
+    rightPanel: "右侧面板",
+    topPanel: "顶部面板",
+    bottomPanel: "底部面板",
+    threeColumnLayout: "三栏嵌套布局",
+    sidebarPanel: "侧边栏",
+    mainContent: "主内容区",
+    footerPanel: "底部区域",
+    asidePanel: "右侧边栏",
+    minSize: "最小尺寸",
+    maxSize: "最大尺寸",
+    defaultSize: "默认尺寸",
+    resizable: "允许拖拽",
+    configurablePanel: "可配置面板",
+    autoPanel: "自适应面板",
+    codeEditorLayout: "代码编辑器布局示例",
+  },
+
+  exampleTour: {
+    title: "漫游引导示例",
+    description: "Tour 组件用于创建分步引导，帮助用户了解产品功能和操作流程。",
+    startBasicTour: "开始基础引导",
+    startCustomTour: "开始自定义引导",
+    searchButton: "搜索",
+    createButton: "新建",
+    settingsButton: "设置",
+    exportButton: "导出",
+    tourConfig: "引导配置",
+    showMask: "显示遮罩",
+    showArrow: "显示箭头",
+    scrollIntoView: "滚动到视图",
+    indicatorType: "指示器类型",
+    step1Title: "搜索功能",
+    step1Desc: "点击此按钮可以搜索系统中的各种数据，支持模糊匹配和高级筛选。",
+    step2Title: "新建操作",
+    step2Desc: "点击此按钮可以创建新的数据记录，支持多种数据类型。",
+    step3Title: "系统设置",
+    step3Desc: "点击此按钮可以进入系统设置页面，配置各项系统参数。",
+    step4Title: "导出数据",
+    step4Desc: "点击此按钮可以将当前数据导出为 Excel、CSV 等格式。",
+    customStep1Title: "右侧定位",
+    customStep1Desc: "引导面板显示在目标元素的右侧。",
+    customStep2Title: "底部定位",
+    customStep2Desc: "引导面板显示在目标元素的底部。",
+    customStep3Title: "左侧定位",
+    customStep3Desc: "引导面板显示在目标元素的左侧。",
+    customStep4Title: "顶部定位",
+    customStep4Desc: "引导面板显示在目标元素的顶部，并使用自定义指示器。",
+  },
+
+  exampleQRCode: {
+    title: "二维码示例",
+    description:
+      "QRCode 组件用于生成二维码，支持自定义样式、Logo、状态显示和下载功能。",
+    basicTab: "基础用法",
+    styleTab: "样式配置",
+    logoTab: "带 Logo",
+    statusTab: "状态显示",
+    downloadTab: "下载功能",
+    content: "二维码内容",
+    size: "尺寸",
+    bgColor: "背景色",
+    fgColor: "前景色",
+    errorLevel: "容错级别",
+    logoHint: "使用 errorLevel='H' 以确保带 Logo 时二维码可正常扫描",
+    statusActive: "有效",
+    statusExpired: "已过期",
+    statusLoading: "加载中",
+    downloadContent: "二维码内容",
+    fileName: "文件名",
+    downloadButton: "下载二维码",
+    downloadSuccess: "下载成功",
+  },
+
+  exampleSegmented: {
+    title: "分段控制器示例",
+    description:
+      "Segmented 组件用于在多个选项之间切换，常用于视图切换、筛选条件等场景。",
+    basicTab: "基础用法",
+    iconTab: "图标选项",
+    blockTab: "块级样式",
+    disabledTab: "禁用状态",
+    businessTab: "业务示例",
+    basicUsage: "基础用法",
+    currentValue: "当前值",
+    sizes: "不同尺寸",
+    iconOptions: "纯图标选项",
+    mixOptions: "文字+图标组合",
+    blockStyle: "块级样式（宽度 100%）",
+    allDisabled: "全部禁用",
+    partialDisabled: "部分禁用",
+    viewSwitch: "视图切换",
+    filterSwitch: "筛选条件",
+    filterResult: "筛选结果",
+    listItemTitle: "数据项",
+    listItemDesc: "这是数据项的描述信息",
+    cardItemTitle: "卡片",
+  },
+
+  exampleColorPicker: {
+    title: "颜色选择器示例",
+    description:
+      "ColorPicker 组件用于颜色选择，支持多种格式、预设颜色和透明度。",
+    basicTab: "基础用法",
+    presetTab: "预设颜色",
+    formatTab: "格式支持",
+    alphaTab: "透明度",
+    disabledTab: "禁用状态",
+    businessTab: "业务示例",
+    basicUsage: "基础用法",
+    sizes: "不同尺寸",
+    presetColors: "预设颜色面板",
+    currentColor: "当前颜色",
+    formatSupport: "格式支持",
+    withAlpha: "带透明度",
+    withoutAlpha: "不带透明度",
+    disabledState: "禁用状态",
+    disabledHint: "禁用状态下无法选择颜色",
+    themeColor: "主题色选择",
+    tagColors: "标签颜色配置",
+    addTag: "添加标签",
+    tagName: "标签名称",
+    tagColor: "标签颜色",
+    tagNameRequired: "请输入标签名称",
+    addTagSuccess: "标签添加成功",
+  },
+
+  exampleModal: {
+    title: "ProModal 示例",
+    description:
+      "基于 antdv-next Modal 的增强封装，支持拖拽、全屏、边缘缩放与边界约束。",
+    openDefault: "打开默认弹窗",
+    openWide: "打开宽版弹窗",
+    width: "弹窗宽度",
+    dataCount: "演示数据量",
+    draggable: "标题栏拖拽",
+    resizable: "边缘缩放",
+    fullscreenable: "全屏按钮",
+    mask: "遮罩",
+    maskClosable: "点击遮罩关闭",
+    keyboard: "ESC 关闭",
+    modalTitle: "可拖拽 / 可缩放 ProModal",
+    hint: "右上角提供全屏与关闭按钮；可直接拖动标题栏移动弹窗；拖拽四边或四角调整大小。",
+    contentTitle: "功能演示内容",
+    contentDescription:
+      "为便于观察滚动与边界行为，以下内容刻意增加了较长列表。",
+    formKeyword: "关键字",
+    formKeywordPlaceholder: "请输入关键字",
+    formRemark: "备注",
+    formRemarkPlaceholder: "请输入备注信息",
+    rowText: "演示数据行 #{index}",
+    confirmSuccess: "确认操作成功",
+  },
+
+  exampleException: {
+    "403title": "403",
+    "403description": "抱歉，您没有权限访问此页面",
+    "404title": "404",
+    "404description": "抱歉，您访问的页面不存在",
+    "500title": "500",
+    "500description": "抱歉，服务器出现错误",
+  },
+
+  editor: {
+    insertLink: "插入链接",
+    linkUrl: "链接地址",
+    linkText: "链接文本",
+    linkTextPlaceholder: "链接文本",
+    defaultPlaceholder: "请输入内容...",
+    imageOnly: "只能上传图片文件",
+    imageSizeLimit: "图片大小不能超过 5MB",
+    imageInsertSuccess: "图片插入成功",
+    imageUploadFailed: "图片上传失败",
+    enterLinkUrl: "请输入链接地址",
+  },
+
+  iconPicker: {
+    selectIcon: "请选择图标",
+    searchPlaceholder: "搜索图标名称...",
+    onlineSearchFailed: "在线搜索失败",
+    onlineSearchFailedDetail: "在线搜索失败：{message}",
+  },
+
+  captcha: {
+    clickInOrder: "请依次点击：",
+    refresh: "刷新",
+  },
+
+  about: {
+    description:
+      "一个基于 Vue 3 + TypeScript + Ant Design Vue 的现代化后台管理框架，开箱即用、功能完备、易于扩展。",
+    projectInfo: "项目信息",
+    projectName: "项目名称",
+    version: "当前版本",
+    license: "开源协议",
+    author: "作者",
+    email: "邮箱",
+    documentation: "帮助文档",
+    techStack: "技术栈",
+    features: "核心特性",
+    feature1: "基于 Vue 3 Composition API",
+    feature1Desc: "更好的逻辑复用、代码组织与响应式性能提升",
+    feature2: "TypeScript 全量严格类型",
+    feature2Desc: "完善的类型推导，开发阶段即消除潜在运行时错误",
+    feature3: "完整的 RBAC 权限体系",
+    feature3Desc: "页面、按钮、字段、接口四维权限控制，开箱即用",
+    feature4: "动态路由与菜单生成",
+    feature4Desc: "基于角色权限自动生成路由和侧边栏菜单",
+    feature5: "国际化多语言支持",
+    feature5Desc: "内置中英文切换，轻松扩展更多语言包",
+    feature6: "亮色 / 暗色主题切换",
+    feature6Desc: "6 种主题色预设，支持跟随系统自动切换",
+    feature7: "ProTable / ProForm 高阶组件",
+    feature7Desc: "配置驱动的表格与表单，覆盖常见业务场景",
+    feature8: "Mock 数据开发模式",
+    feature8Desc: "内置完整 Mock 体系，前后端并行开发无阻塞",
+  },
+
+  proForm: {
+    enterPlaceholder: "请输入{label}",
+    selectPlaceholder: "请选择{label}",
+    uploadFile: "上传文件",
+  },
+
+  proUpload: {
+    uploadFile: "上传文件",
+    uploadImage: "上传图片",
+    dragHint: "点击或拖拽文件到此区域上传",
+    fileSizeExceed: "文件大小不能超过 {size}MB",
+    fileTypeNotAllowed: "不支持该文件类型",
+  },
+
+  proStepForm: {
+    prev: "上一步",
+    next: "下一步",
+  },
+
+  proTable: {
+    total: "共 {total} 条",
+    density: "表格密度",
+    checkAll: "全部勾选",
+    indexColumn: "序号列",
+    fixLeft: "左固定",
+    fixRight: "右固定",
+    densityLarge: "宽松",
+    densityMiddle: "默认",
+    densitySmall: "紧凑",
+    loadDataFailed: "加载数据失败",
+  },
+
+  profile: {
+    title: "个人中心",
+    basicInfo: "基本信息",
+    security: "安全设置",
+    username: "用户名",
+    email: "邮箱",
+    phone: "手机号",
+    role: "角色",
+    joinDate: "加入日期",
+    changePassword: "修改密码",
+    currentPassword: "当前密码",
+    oldPassword: "旧密码",
+    newPassword: "新密码",
+    confirmPassword: "确认密码",
+    enterCurrentPassword: "请输入当前密码",
+    enterNewPassword: "请输入新密码",
+    enterConfirmPassword: "请再次输入新密码",
+    passwordMismatch: "两次输入的密码不一致",
+    passwordMinLength: "密码长度不能少于6位",
+    passwordChangeSuccess: "密码修改成功",
+    passwordChangeFailed: "密码修改失败",
+    passwordTip: "提示：密码长度至少6位，建议包含字母、数字和特殊字符",
+    updateSuccess: "更新成功",
+    updateFailed: "更新失败",
+  },
+
+  error: {
+    404: "页面不存在",
+    403: "无权限访问",
+    500: "服务器错误",
+    backHome: "返回首页",
+    pageNotFound: "抱歉，您访问的页面不存在",
+    noPermission: "抱歉，您没有权限访问此页面",
+    serverError: "抱歉，服务器出现错误",
+  },
+
+  validation: {
+    required: "此项为必填项",
+    email: "请输入有效的邮箱地址",
+    phone: "请输入有效的手机号",
+    idCard: "请输入有效的身份证号",
+    url: "请输入有效的URL",
+    minLength: "长度不能少于 {min} 个字符",
+    maxLength: "长度不能超过 {max} 个字符",
+    lengthRange: "长度必须在 {min}-{max} 之间",
+    numberRange: "数值必须在 {min}-{max} 之间",
+    min: "值不能小于 {min}",
+    max: "值不能大于 {max}",
+    pattern: "格式不正确",
+    usernamePattern: "用户名只能包含字母、数字和下划线",
+    passwordPattern: "密码至少8位，包含字母和数字",
+    confirmPassword: "两次输入的密码不一致",
+  },
+
+  dept: {
+    title: "部门管理",
+    organizationStructure: "组织架构",
+    searchDept: "搜索部门",
+    deptName: "部门名称",
+    parentDept: "上级部门",
+    leader: "负责人",
+    phone: "联系电话",
+    email: "邮箱",
+    sort: "排序",
+    remark: "备注",
+    status: "状态",
+    enabled: "正常",
+    disabled: "停用",
+    createDept: "新增部门",
+    editDept: "编辑部门",
+    deleteDept: "删除部门",
+    addChildDept: "新增子部门",
+    childDepts: "下级部门",
+    noneTopLevel: "无（顶级）",
+    noneTopLevelDept: "无（顶级部门）",
+    selectDeptNode: "请选择左侧部门节点",
+    confirmDelete: "确认删除",
+    confirmDeleteContent: '确定要删除部门"{name}"吗？',
+    hasChildrenWarning: "该部门下存在子部门，请先删除子部门",
+    deleteSuccess: "删除成功",
+    deleteFailed: "删除失败",
+    updateSuccess: "更新成功",
+    createSuccess: "创建成功",
+    operateFailed: "操作失败",
+    pleaseEnterDeptName: "请输入部门名称",
+    pleaseEnterLeader: "请输入负责人",
+    pleaseEnterPhone: "请输入联系电话",
+    pleaseEnterEmail: "请输入邮箱",
+    pleaseEnterRemark: "请输入备注",
+    loadDataFailed: "加载部门数据失败",
+    createTime: "创建时间",
+    updateTime: "更新时间",
+  },
+
+  config: {
+    title: "系统配置",
+    configGroups: "配置分组",
+    configName: "配置名称",
+    configKey: "配置键",
+    configValue: "配置值",
+    valueType: "值类型",
+    group: "分组",
+    sort: "排序",
+    description: "描述",
+    builtIn: "来源",
+    createConfig: "新增配置",
+    editConfig: "编辑配置",
+    deleteConfig: "删除配置",
+    confirmDelete: "确认删除",
+    confirmDeleteContent: '确定要删除配置"{name}"吗？',
+    deleteSuccess: "删除成功",
+    deleteFailed: "删除失败",
+    updateSuccess: "更新成功",
+    createSuccess: "创建成功",
+    operateFailed: "操作失败",
+    requiredFields: "请填写必填项",
+    loadConfigFailed: "加载配置失败",
+    valueTypes: {
+      string: "字符串",
+      number: "数字",
+      boolean: "布尔值",
+      json: "JSON",
+    },
+    groups: {
+      basic: "基础配置",
+      security: "安全配置",
+      upload: "上传配置",
+      notification: "通知配置",
+    },
+    builtInTypes: {
+      builtIn: "内置",
+      custom: "自定义",
+    },
+    placeholders: {
+      configName: "请输入配置名称",
+      configKey: "如 site.name",
+      configValue: "请输入配置值",
+      jsonFormat: "JSON 格式",
+      description: "请输入描述",
+    },
+  },
+
+  file: {
+    title: "文件管理",
+    fileName: "文件名",
+    ext: "扩展名",
+    size: "文件大小",
+    storage: "存储方式",
+    uploader: "上传者",
+    uploadTime: "上传时间",
+    action: "操作",
+    delete: "删除",
+    confirmDelete: "确认删除",
+    confirmDeleteContent: '确定要删除文件"{name}"吗？',
+    deleteSuccess: "删除成功",
+    deleteFailed: "删除失败",
+    loadFailed: "加载文件列表失败",
+    storageType: {
+      local: "本地",
+      oss: "OSS",
+      cos: "COS",
+    },
+    extType: {
+      imageJpg: "图片(jpg)",
+      imagePng: "图片(png)",
+      pdf: "PDF",
+      word: "Word",
+      excel: "Excel",
+      zip: "压缩包",
+      video: "视频",
+      text: "文本",
+      ppt: "PPT",
+      svg: "SVG",
+    },
+  },
+
+  log: {
+    title: "系统日志",
+    operationLog: "操作日志",
+    loginLog: "登录日志",
+    clearLog: "清空日志",
+    confirmClear: "确认清空",
+    confirmClearOperation: "确定要清空所有操作日志吗？此操作不可恢复。",
+    confirmClearLogin: "确定要清空所有登录日志吗？此操作不可恢复。",
+    clearSuccess: "清空成功",
+    clearFailed: "清空失败",
+    operationUser: "操作用户",
+    operationModule: "操作模块",
+    operationType: "操作类型",
+    operationDescription: "操作描述",
+    requestMethod: "请求方法",
+    ipAddress: "IP地址",
+    duration: "耗时",
+    operationTime: "操作时间",
+    username: "用户名",
+    browser: "浏览器",
+    os: "操作系统",
+    message: "提示信息",
+    loginTime: "登录时间",
+    success: "成功",
+    fail: "失败",
+    actionTypes: {
+      login: "登录",
+      logout: "登出",
+      create: "新增",
+      update: "修改",
+      delete: "删除",
+      export: "导出",
+      import: "导入",
+      other: "其他",
+    },
+    modules: {
+      userManagement: "用户管理",
+      roleManagement: "角色管理",
+      menuManagement: "菜单管理",
+      dictionary: "数据字典",
+      systemLogin: "系统登录",
+      profile: "个人中心",
+      dashboard: "数据看板",
+    },
+    loadOperationLogFailed: "加载操作日志失败",
+    loadLoginLogFailed: "加载登录日志失败",
+  },
+
+  "menu.external": "外部页面",
+  "menu.externalIframe": "内嵌",
+  "menu.externalLink": "外链",
+  "menu.externalTypescript": "TypeScript",
+  "menu.externalAntdvNext": "Antdv Next",
+  "menu.externalVite": "Vite",
+  "menu.externalVue": "Vue.js",
+  "external.link.openedTitle": "已在新标签页打开",
+  "external.link.openedSubTitle":
+    "如果浏览器拦截了弹窗，请点击下方按钮再次打开。",
+  "external.link.openVite": "打开 Vite 官网",
+  "external.link.openVue": "打开 Vue 官网",
+
+  examples: {
+    scaffold: {
+      stateCache: {
+        title: "状态与缓存示例",
+        description:
+          "演示 Pinia 持久化（刷新恢复）和 keep-alive 页面局部缓存（切换不销毁）。",
+        piniaSection: "1. Pinia 持久化状态",
+        keywordLabel: "关键字",
+        keywordPlaceholder: "输入后刷新页面仍保留",
+        counterLabel: "计数器",
+        notesLabel: "备注",
+        notesPlaceholder: "支持多行，自动持久化",
+        resetButton: "重置状态",
+        pinTabButton: "固定当前标签",
+        lastPersistTime: "最近持久化时间：",
+        keepAliveSection: "2. keep-alive 局部缓存",
+        panelA: "面板 A",
+        panelB: "面板 B",
+        panelADesc: "面板 A（切换面板后不会被销毁）",
+        panelAInputPlaceholder: "输入内容，切换到 B 再切回仍保留",
+        localCountLabel: "局部计数：",
+        panelBDesc: "面板 B（也会被 keep-alive 缓存）",
+        panelBTextPlaceholder: "输入内容后切换标签再回来仍保留",
+        pinTabSuccess: "已切换当前标签固定状态",
+      },
+      uploadSystem: {
+        title: "上传体系示例",
+        description:
+          "拖拽上传 + 进度 + 失败重试 + 图片预览，便于直接迁移到业务页。",
+        uploading: "上传中",
+        success: "成功",
+        failed: "失败",
+        dragText: "点击或拖拽文件到此区域上传",
+        dragHint: "支持图片与文档，上传过程会随机模拟失败，用于验证重试逻辑。",
+        retryButton: "重试失败项",
+        clearButton: "清空列表",
+        failureRate: "失败率：",
+        previewTitle: "文件预览",
+        uploadFailedError: "网络波动导致上传失败",
+        uploadSuccessMsg: "上传成功：{name}",
+        uploadFailedMsg: "上传失败：{name}",
+        retryMsg: "开始重试 {count} 个失败文件",
+        previewNotSupported: "该文件暂不支持预览",
+      },
+      importExport: {
+        title: "导入导出闭环示例",
+        description:
+          "演示模板下载、CSV 导入校验、错误回执导出、当前数据导出的一体化流程。",
+        downloadTemplate: "下载导入模板",
+        importCsv: "导入 CSV",
+        exportCurrent: "导出当前数据",
+        exportErrorReceipt: "导出错误回执",
+        totalRows: "导入总行数",
+        successRows: "成功行数",
+        updatedRows: "更新行数",
+        failedRows: "失败行数",
+        importHint:
+          "导入表头必须为 code,name,category,price,stock；按 code 自动更新或新增。",
+        colCode: "编码",
+        colName: "名称",
+        colCategory: "分类",
+        colPrice: "价格",
+        colStock: "库存",
+        errorRowNo: "行号",
+        errorReason: "错误原因",
+        errorRaw: "原始数据",
+        emptyFile: "文件为空或无有效数据行",
+        invalidHeader: "表头不合法，请使用模板文件",
+        errorRequired: "必填字段缺失（code/name/category）",
+        errorPrice: "价格必须是大于等于 0 的数字",
+        errorStock: "库存必须是大于等于 0 的整数",
+        importDone: "导入完成：成功 {success} 条，失败 {failed} 条",
+        parseFailed: "CSV 解析失败，请检查文件格式",
+      },
+      testing: {
+        title: "测试示例",
+        description: "提供单测与 e2e 的推荐模板，直接复制即可用于新模块。",
+        alertMessage:
+          "当前仓库尚未安装 Vitest / Playwright 依赖，此页提供结构与样例。",
+        unitTestTitle: "单元测试模板（Vitest）",
+        e2eTestTitle: "端到端测试模板（Playwright）",
+        implementationTitle: "落地顺序建议",
+        step1Title: "先补单测",
+        step1Description: "先覆盖核心函数、store 计算逻辑和边界条件。",
+        step2Title: "再补 e2e",
+        step2Description: "覆盖登录、搜索、列表操作等关键用户路径。",
+        step3Title: "接入 CI",
+        step3Description:
+          "将 type-check + unit + e2e 串成流水线，合并前自动执行。",
+      },
+      proTableAdvanced: {
+        title: "ProTable 高阶示例",
+        description: "服务端分页模拟 + 批量操作 + 行内编辑 + 导出",
+        selectedCount: "已选 {count} 项",
+        batchDisable: "批量禁用",
+        batchDelete: "批量删除",
+        export: "导出当前数据",
+        statusActive: "启用",
+        statusInactive: "禁用",
+        username: "用户名",
+        realName: "姓名",
+        email: "邮箱",
+        gender: "性别",
+        status: "状态",
+        createdAt: "创建时间",
+        editSimulation: "模拟编辑：{username}",
+        deleteConfirm: "确认删除该行吗？",
+        deleteSuccess: "删除成功",
+        statusChangeSuccess: "已{status} {username}",
+        batchSetStatusSuccess: "已批量设置 {count} 项状态",
+        batchDeleteTitle: "批量删除确认",
+        batchDeleteContent: "确认删除已选的 {count} 条数据吗？",
+        batchDeleteSuccess: "批量删除完成",
+        exportSuccess: "CSV 导出成功",
+      },
+      complexForm: {
+        title: "复杂表单示例",
+        description:
+          "步骤表单 + 动态策略项 + 异步校验 + 草稿保存 + 服务端字段错误映射。",
+        step1Title: "基本信息",
+        step2Title: "策略配置",
+        step3Title: "发布设置",
+        projectNameLabel: "项目名称",
+        projectNamePlaceholder: "请输入项目名称",
+        projectNameRequired: "请输入项目名称",
+        projectNameExists: "项目名称已存在，请更换",
+        ownerLabel: "负责人",
+        ownerPlaceholder: "请输入负责人",
+        ownerRequired: "请输入负责人",
+        sceneLabel: "场景",
+        scenePlaceholder: "请选择场景",
+        sceneRequired: "请选择场景",
+        sceneGrowth: "用户增长",
+        sceneRisk: "风控预警",
+        sceneStability: "稳定性监控",
+        descriptionLabel: "说明",
+        descriptionPlaceholder: "请输入补充说明",
+        addRuleButton: "新增策略规则",
+        currentRulesCount: "当前 {count} 条",
+        metricPlaceholder: "指标名，如 error_rate",
+        deleteButton: "删除",
+        ruleListEmpty: "请至少添加一条策略规则",
+        ruleListIncomplete: "策略规则存在未填写项，请补充完整",
+        publishTypeLabel: "发布方式",
+        publishTypeRequired: "请选择发布方式",
+        publishImmediate: "立即发布",
+        publishSchedule: "定时发布",
+        publishTimeLabel: "发布时间",
+        publishTimeRequired: "定时发布必须选择发布时间",
+        notifyUsersLabel: "通知对象",
+        notifyUsersPlaceholder: "输入用户名并回车",
+        prevButton: "上一步",
+        nextButton: "下一步",
+        submitButton: "提交",
+        saveDraftButton: "保存草稿",
+        resetButton: "重置",
+        draftSaved: "草稿已保存",
+        serverValidationError: "服务端校验失败：项目名称不能包含 fail",
+        submitFailed: "提交失败，已映射服务端字段错误",
+        submitSuccess: "提交成功",
+      },
+      advancedFilter: {
+        title: "高级筛选构建器示例",
+        description:
+          "通过可视化条件组合（AND/OR）构建筛选规则，并支持保存筛选方案。",
+        tips: "支持字符串、枚举、数字、日期四类字段，满足大多数列表检索场景。",
+        addCondition: "新增条件",
+        saveScheme: "保存方案",
+        matchedCount: "命中 {count} 条",
+        emptyConditions: "暂无筛选条件",
+        inputValue: "请输入值",
+        selectValue: "请选择值",
+        secondValue: "第二个值",
+        savedSchemes: "已保存方案：",
+        noSchemes: "暂无",
+        schemeNamePlaceholder: "输入方案名称（最多 30 字）",
+        schemeNameRequired: "请输入方案名称",
+        saveSuccess: "筛选方案已保存",
+        score: "评分",
+        statusActive: "启用",
+        statusInactive: "禁用",
+        statusPending: "待处理",
+        adminRole: "管理员",
+        operatorRole: "运营",
+        auditorRole: "审计",
+        opContains: "包含",
+        opEquals: "等于",
+        opNotEquals: "不等于",
+        opIn: "属于",
+        opGt: "大于",
+        opGte: "大于等于",
+        opLt: "小于",
+        opLte: "小于等于",
+        opBetween: "区间",
+        opBefore: "早于",
+        opAfter: "晚于",
+      },
+      virtualTable: {
+        title: "虚拟滚动表格示例",
+        description: "演示 a-table 原生虚拟滚动在万级数据下的流畅渲染能力。",
+        tipsNativeVirtual:
+          "基于 antdv-next 原生 a-table + virtual，无需额外虚拟列表库。",
+        datasetSize: "数据量",
+        regenerate: "重新生成数据",
+        regenerateSuccess: "已生成 {count} 条数据",
+        searchPlaceholder: "搜索用户名 / 邮箱 / 部门",
+        allStatus: "全部状态",
+        totalRows: "总数据 {count}",
+        filteredRows: "筛选后 {count}",
+        renderedRowsTip: "仅渲染可视区域，滚动更流畅",
+        statusActive: "启用",
+        statusInactive: "禁用",
+        statusPending: "待处理",
+        colId: "ID",
+        colUsername: "用户名",
+        colEmail: "邮箱",
+        colDepartment: "部门",
+        colStatus: "状态",
+        colUpdatedAt: "更新时间",
+      },
+      masterDetail: {
+        title: "列表-详情示例",
+        description:
+          "模拟工单主从页：左侧列表选择，右侧 Drawer 展示详情与操作历史。",
+        drawerTitle: "工单详情",
+        ticketNumber: "单号",
+        titleLabel: "标题",
+        ownerLabel: "负责人",
+        priorityLabel: "优先级",
+        createdAtLabel: "创建时间",
+        descTab: "描述",
+        logsTab: "操作记录",
+        statusOpen: "待处理",
+        statusProcessing: "处理中",
+        statusClosed: "已关闭",
+        ticketTitle: "订单风控告警 #{index}",
+        ownerZhang: "张工",
+        ownerLi: "李工",
+        ticketDescription:
+          "这是第 {index} 条工单的详细描述，包含背景信息、影响范围和建议处理动作。",
+        actionCreate: "创建工单",
+        operatorSystem: "系统",
+        actionAssign: "分配负责人",
+        operatorDispatch: "调度中心",
+        colTicketNumber: "单号",
+        colTitle: "标题",
+        colOwner: "负责人",
+        colPriority: "优先级",
+        colStatus: "状态",
+        colCreatedAt: "创建时间",
+      },
+      rbac: {
+        title: "RBAC 全链路示例",
+        description:
+          "覆盖页面权限、按钮权限、字段权限、接口权限 4 个维度。可直接切换 admin / user 观察差异。",
+        currentSession: "当前会话",
+        accountInfo: "账号：{username} | 角色：{role}",
+        switchToAdmin: "切换为 admin",
+        switchToUser: "切换为 user",
+        permissionTotal: "...共 {count} 项",
+        section1Title: "1. 页面权限判定",
+        checkUserManage: "用户管理页访问（system.user.view）",
+        checkMenuManage: "菜单管理页访问（system.permission.view）",
+        checkAdminRole: "管理员角色访问（admin）",
+        passed: "通过",
+        denied: "拒绝",
+        section2Title: "2. 按钮权限",
+        createUserButton: "新建用户",
+        editUserButton: "编辑用户",
+        deleteUserButton: "删除用户",
+        buttonPermissionHint: "提示：按钮是否渲染由 PermissionButton 控制",
+        section3Title: "3. 字段权限（脱敏）",
+        phoneLabel: "手机号：",
+        emailLabel: "邮箱：",
+        realNameLabel: "真实姓名：",
+        section4Title: "4. 接口权限失败兜底",
+        callViewApi: "调用查看接口",
+        callExportApi: "调用导出接口",
+        callDeleteApi: "调用删除接口",
+        viewUserAction: "查看用户列表",
+        exportUserAction: "导出用户",
+        deleteUserAction: "删除用户",
+        switchSuccess: "已切换为 {username}",
+        switchFailed: "切换失败",
+        missingPermission: "403: 缺少权限 {permission}",
+        apiSuccess: "{action} 成功",
+        apiFailed: "{action} 失败：{error}",
+        noPermission: "无权限",
+      },
+      observability: {
+        title: "可观测性与异常示例",
+        description:
+          "统一处理加载态、空态、错误态，并对错误进行分级与记录，支持一键重试。",
+        simulateSuccess: "模拟成功",
+        simulateEmpty: "模拟空数据",
+        simulateNetwork: "模拟网络错误",
+        simulateAuth: "模拟鉴权错误",
+        simulateBusiness: "模拟业务错误",
+        requestStateTitle: "请求状态视图",
+        emptyData: "当前无可展示数据",
+        requestFailed: "请求失败",
+        retryButton: "重试",
+        clickToStart: "点击上方按钮开始模拟",
+        errorLogTitle: "错误分类与事件日志",
+        networkError: "网络错误",
+        authError: "鉴权错误",
+        businessError: "业务错误",
+        noEvents: "暂无事件",
+        errorNetwork: "NetworkError: 请求超时，请检查网络连接",
+        errorAuth: "AuthError: token 过期，需要重新登录",
+        errorBusiness: "BusinessError: 规则配置冲突，无法计算",
+        eventStart: "开始模拟场景：{scenario}",
+        eventEmpty: "请求成功但返回空数据",
+        eventSuccess: "请求成功并返回数据",
+        unknownError: "未知错误",
+        eventError: "请求失败（{type}）：{message}",
+      },
+      requestAuth: {
+        title: "请求与鉴权闭环示例",
+        description:
+          "演示并发请求触发 401 时的排队刷新机制，以及刷新失败后的重登兜底。",
+        refreshFailedAlert: "刷新失败，已进入重登态",
+        refreshFailedDesc: '后续请求会继续失败，点击"重置会话"后重新发起请求。',
+        accessToken: "Access Token",
+        refreshToken: "Refresh Token",
+        refreshStatus: "刷新状态",
+        empty: "空",
+        refreshing: "刷新中",
+        idle: "空闲",
+        singleRequest: "发起单请求",
+        concurrentRequest: "并发 5 个请求",
+        expireToken: "令 Token 过期",
+        simulateRefreshFail: "模拟刷新失败",
+        resetSession: "重置会话",
+        logTitle: "事件日志（最近 80 条）",
+        clearLog: "清空日志",
+        noLogs: "暂无日志",
+        tokenExpired: "[{apiName}] token 已过期",
+        apiSuccess: "[{apiName}] 请求成功",
+        refreshTokenInvalid: "refresh token 无效",
+        logRefreshStart: "触发刷新 token（仅首个 401 请求执行）",
+        logRefreshSuccess: "token 刷新成功，释放排队请求",
+        logRefreshFailed: "token 刷新失败：{message}，进入重登态",
+        logQueueWait: "检测到刷新进行中，请求进入排队等待",
+        logNon401Error: "[{apiName}] 非 401 错误：{message}",
+        log401Detected: "[{apiName}] 触发 401，准备刷新 token",
+        logTokenExpired: "手动将 access token 标记为过期",
+        logSessionReset: "会话已重置，可重新发起请求",
+        singleRequestFailed: "单请求执行失败",
+        logConcurrentStart: "开始并发 5 个请求，观察刷新排队行为",
+        concurrentPartialFail: "并发请求完成，失败 {count} 个",
+        concurrentAllSuccess: "并发请求全部成功",
+        logRefreshWillFail: "下一次刷新将被强制失败",
+        refreshFailTriggered: "刷新失败场景已触发",
+      },
+    },
+    jsonInput: {
+      title: "JSON 输入示例",
+      description:
+        "功能强大的 JSON 输入组件，支持表单编辑和原始 JSON 编辑两种模式，可处理嵌套对象、数组和各种数据类型。",
+      basicUsage: "基础用法",
+      userConfig: "用户配置",
+      clickToEdit: "点击编辑 JSON",
+      editUserConfig: "编辑用户配置",
+      displayValue: "显示值（使用 displayKey）",
+      productName: "产品名称",
+      price: "价格",
+      stock: "库存",
+      productDescription: "描述",
+      selectProduct: "选择产品",
+      advancedUsage: "高级用法",
+      withI18nKeys: "Key 国际化支持",
+      i18nKeysHint: "通过 label-map 属性为 key 提供国际化标签",
+      withDisabledFields: "禁用字段",
+      apiKey: "API 密钥",
+      endpoint: "接口地址",
+      timeout: "超时时间（秒）",
+      systemConfig: "系统配置",
+      nestedObject: "嵌套对象支持",
+      userInfo: "用户信息",
+      name: "姓名",
+      settings: "设置",
+      theme: "主题",
+      language: "语言",
+      nestedData: "嵌套数据结构",
+      emptyObject: "空对象（创建新的）",
+      createNew: "创建新配置",
+    },
+    i18nInput: {
+      description:
+        "国际化输入组件，支持多语言内容编辑。基于 JsonInput 封装，自动根据系统支持的语言生成表单字段。",
+      productName: "产品名称（多语言）",
+      productDescription: "产品描述（多语言）",
+      editProductName: "编辑产品名称",
+      editProductDesc: "编辑产品描述",
+      clickToEdit: "点击编辑多语言内容",
+      stringFormat: "字符串格式值",
+      stringFormatHint: "支持字符串格式的 JSON，组件会自动解析和序列化",
+      currentLocale: "指定显示语言",
+      currentLocaleHint: "通过 locale 属性指定输入框中显示哪个语言的值",
+      emptyValue: "空值（自动初始化）",
+      dataPreview: "数据预览",
+      valueType: "值类型切换",
+      showAsString: "显示为字符串",
+      showAsObject: "显示为对象",
+      stringValue: "字符串格式",
+      objectValue: "对象格式",
+    },
+    codeEditor: {
+      title: "代码编辑器示例",
+      description:
+        "基于 CodeMirror 6 的代码编辑器组件，支持 14+ 语言语法高亮、JSON 格式化、主题切换等功能。",
+      jsonEditor: "JSON 编辑器",
+      jsEditor: "JavaScript 编辑器",
+      multiLanguage: "多语言切换",
+      readonlyMode: "只读预览模式",
+      darkTheme: "主题切换",
+      themePreview: "主题预览",
+      themeAuto: "跟随系统",
+      themeLight: "亮色",
+      themeDark: "暗色",
+      autoHeight: "自动高度",
+      format: "格式化",
+      minify: "压缩",
+      copy: "复制",
+      language: "语言",
+      theme: "主题",
+      outputPreview: "输出预览",
+    },
+  },
+};
diff --git a/antdv-next-admin/src/main.ts b/antdv-next-admin/src/main.ts
new file mode 100644
index 0000000..f1a61e8
--- /dev/null
+++ b/antdv-next-admin/src/main.ts
@@ -0,0 +1,30 @@
+import AntdvNext from 'antdv-next';
+import { createPinia } from 'pinia';
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import { registerDefaultComponentProps } from './components/Global/defaultComponentProps';
+import { setupDirectives } from './directives';
+import i18n from './locales';
+import router from './router';
+// Import global styles
+// Tailwind CSS with @layer configuration (must come after reset.css)
+import 'antdv-next/dist/reset.css';
+import './assets/styles/tailwind.css';
+import './assets/styles/variables.css';
+import './assets/styles/animations.css';
+import './assets/styles/global.css';
+
+const app = createApp(App);
+
+// Register plugins
+app.use(createPinia());
+app.use(AntdvNext);
+app.use(router);
+app.use(i18n);
+registerDefaultComponentProps(app);
+
+// Register custom directives
+setupDirectives(app);
+
+app.mount('#app');
diff --git a/antdv-next-admin/src/router/CLAUDE.md b/antdv-next-admin/src/router/CLAUDE.md
new file mode 100644
index 0000000..069d82c
--- /dev/null
+++ b/antdv-next-admin/src/router/CLAUDE.md
@@ -0,0 +1,14 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 11, 2026
+
+| ID   | Time    | T   | Title                                                               | Read |
+| ---- | ------- | --- | ------------------------------------------------------------------- | ---- |
+| #349 | 5:41 PM | 🔵  | Router Guards with Dynamic Route Generation and Permission Checking | ~589 |
+| #347 | "       | 🔵  | Route Structure with Three-Tier Organization                        | ~443 |
+| #343 | 5:40 PM | 🔵  | Router Configuration with Guard System                              | ~292 |
+
+</claude-mem-context>
diff --git a/antdv-next-admin/src/router/guards.ts b/antdv-next-admin/src/router/guards.ts
new file mode 100644
index 0000000..2e6ce6d
--- /dev/null
+++ b/antdv-next-admin/src/router/guards.ts
@@ -0,0 +1,242 @@
+import type { Router, RouteLocationNormalized } from "vue-router";
+
+import type { AppRouteRecordRaw } from "@/types/router";
+
+import { useAuthStore } from "@/stores/auth";
+import { useDictStore } from "@/stores/dict";
+import { usePermissionStore } from "@/stores/permission";
+import { useTabsStore } from "@/stores/tabs";
+import { resolveLocaleText } from "@/utils/i18n";
+
+import { basicRoutes, notFoundRoute } from "./routes";
+
+const MENU_HISTORY_KEY = "app-menu-history";
+const MAX_HISTORY_ITEMS = 10;
+
+interface MenuHistoryItem {
+  path: string;
+  title: string;
+  icon?: string;
+  timestamp: number;
+}
+
+function recordMenuHistory(route: RouteLocationNormalized) {
+  try {
+    const history: MenuHistoryItem[] = JSON.parse(
+      localStorage.getItem(MENU_HISTORY_KEY) || "[]",
+    );
+    const title = resolveLocaleText(
+      route.meta?.title as string,
+      String(route.name || route.path),
+    );
+
+    const filtered = history.filter((item) => item.path !== route.path);
+
+    filtered.unshift({
+      path: route.path,
+      title,
+      icon: route.meta?.icon as string,
+      timestamp: Date.now(),
+    });
+
+    const trimmed = filtered.slice(0, MAX_HISTORY_ITEMS);
+
+    localStorage.setItem(MENU_HISTORY_KEY, JSON.stringify(trimmed));
+  } catch {}
+}
+
+/**
+ * Setup router guards
+ */
+export function setupRouterGuards(router: Router) {
+  // Before each route navigation
+  router.beforeEach(async (to, _from, next) => {
+    const authStore = useAuthStore();
+    const permissionStore = usePermissionStore();
+    const tabsStore = useTabsStore();
+    const dictStore = useDictStore();
+
+    const generateDynamicRoutes = async () => {
+      if (permissionStore.isRoutesGenerated) return;
+
+      if (!authStore.user) {
+        authStore.initAuth();
+      }
+
+      const accessRoutes = await permissionStore.generateRoutes(
+        authStore.userRoles,
+        authStore.userPermissions,
+      );
+
+      accessRoutes.forEach((route) => {
+        const routeName = route.name ? String(route.name) : "";
+        if (routeName && router.hasRoute(routeName)) {
+          return;
+        }
+        router.addRoute(route);
+      });
+
+      if (!router.hasRoute("NotFound")) {
+        router.addRoute(
+          notFoundRoute as unknown as import("vue-router").RouteRecordRaw,
+        );
+      }
+
+      dictStore.loadDictData();
+    };
+
+    const initTabsIfNeeded = () => {
+      if (tabsStore.tabs.length > 0) return;
+
+      const routeSources = [
+        ...basicRoutes,
+        ...(permissionStore.routes as unknown as AppRouteRecordRaw[]),
+      ];
+
+      tabsStore.restoreTabsState(routeSources);
+
+      if (tabsStore.tabs.length === 0) {
+        tabsStore.initAffixTabs(routeSources);
+      }
+    };
+
+    // Set page title
+    if (to.meta.title) {
+      const title = resolveLocaleText(
+        to.meta.title as string,
+        String(to.name || to.path || "Dashboard"),
+      );
+      document.title = `${title} - ${import.meta.env.VITE_APP_TITLE || "Antdv Next Admin"}`;
+    }
+
+    // If first refresh hits catch-all and is redirected to 404,
+    // restore dynamic routes first, then retry the original target.
+    const redirectedFromPath = to.redirectedFrom?.fullPath;
+    const shouldRecoverFromNotFound =
+      to.path === "/404" &&
+      !!redirectedFromPath &&
+      redirectedFromPath !== "/404" &&
+      !!authStore.token &&
+      !permissionStore.isRoutesGenerated;
+
+    if (shouldRecoverFromNotFound) {
+      try {
+        await generateDynamicRoutes();
+        initTabsIfNeeded();
+        next({ path: redirectedFromPath, replace: true });
+        return;
+      } catch (error) {
+        console.error(
+          "Failed to recover routes from not found redirect:",
+          error,
+        );
+        next("/403");
+        return;
+      }
+    }
+
+    // If catch-all redirected to 404 but user is not logged in,
+    // redirect to login instead of showing 404
+    if (
+      to.path === "/404" &&
+      !!redirectedFromPath &&
+      redirectedFromPath !== "/404" &&
+      !authStore.token
+    ) {
+      next({ path: "/login", query: { redirect: redirectedFromPath } });
+      return;
+    }
+
+    // Check if route requires authentication
+    const requiresAuth = to.meta.requiresAuth !== false;
+
+    if (requiresAuth) {
+      // Check if user is logged in
+      if (!authStore.token) {
+        // Redirect to login page
+        next({
+          path: "/login",
+          query: { redirect: to.fullPath },
+        });
+        return;
+      }
+
+      // Generate dynamic routes if not already generated
+      if (!permissionStore.isRoutesGenerated) {
+        try {
+          await generateDynamicRoutes();
+          initTabsIfNeeded();
+
+          // Continue to the target route
+          next({ ...to, replace: true });
+          return;
+        } catch (error) {
+          console.error("Failed to generate routes:", error);
+          next("/403");
+          return;
+        }
+      }
+
+      // Check permissions
+      const requiredPermissions = to.meta.requiredPermissions as
+        | string[]
+        | undefined;
+      if (
+        requiredPermissions &&
+        Array.isArray(requiredPermissions) &&
+        requiredPermissions.length > 0
+      ) {
+        const hasPermission = authStore.hasAnyPermission(requiredPermissions);
+        if (!hasPermission) {
+          next("/403");
+          return;
+        }
+      }
+
+      // Check roles
+      const requiredRoles = to.meta.requiredRoles as string[] | undefined;
+      if (
+        requiredRoles &&
+        Array.isArray(requiredRoles) &&
+        requiredRoles.length > 0
+      ) {
+        const hasRole = authStore.hasAnyRole(requiredRoles);
+        if (!hasRole) {
+          next("/403");
+          return;
+        }
+      }
+
+      initTabsIfNeeded();
+    }
+
+    // Add to tabs
+    if (to.name && to.meta.requiresAuth !== false && !to.meta.hidden) {
+      tabsStore.addTab(to);
+    }
+
+    next();
+  });
+
+  // After each route navigation
+  router.afterEach((to) => {
+    // Scroll to top
+    window.scrollTo(0, 0);
+
+    // Set active tab
+    const tabsStore = useTabsStore();
+    if (to.path) {
+      tabsStore.setActiveTab(to.path);
+    }
+
+    // Record menu visit history
+    if (to.name && to.meta.requiresAuth !== false && !to.meta.hidden) {
+      recordMenuHistory(to);
+    }
+  });
+
+  // On error
+  router.onError((error) => {
+    console.error("Router error:", error);
+  });
+}
diff --git a/antdv-next-admin/src/router/index.ts b/antdv-next-admin/src/router/index.ts
new file mode 100644
index 0000000..5bd18cd
--- /dev/null
+++ b/antdv-next-admin/src/router/index.ts
@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+import { setupRouterGuards } from "./guards";
+import { staticRoutes, basicRoutes } from "./routes";
+
+const routes = [...staticRoutes, ...basicRoutes];
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes as unknown as readonly import("vue-router").RouteRecordRaw[],
+  scrollBehavior(_to, _from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    } else {
+      return { top: 0 };
+    }
+  },
+});
+
+setupRouterGuards(router);
+
+export default router;
diff --git a/antdv-next-admin/src/router/routes.ts b/antdv-next-admin/src/router/routes.ts
new file mode 100644
index 0000000..7ccc8c8
--- /dev/null
+++ b/antdv-next-admin/src/router/routes.ts
@@ -0,0 +1,821 @@
+import type { AppRouteRecordRaw } from "@/types/router";
+
+/**
+ * Static routes that don't require authentication
+ */
+export const staticRoutes: AppRouteRecordRaw[] = [
+  {
+    path: "/login",
+    name: "Login",
+    component: () => import("@/views/login/index.vue"),
+    meta: {
+      title: "login.title",
+      requiresAuth: false,
+      hidden: true,
+    },
+  },
+  {
+    path: "/404",
+    name: "NotFound",
+    component: () => import("@/views/error/404.vue"),
+    meta: {
+      title: "error.404",
+      requiresAuth: false,
+      hidden: true,
+    },
+  },
+  {
+    path: "/403",
+    name: "Forbidden",
+    component: () => import("@/views/error/403.vue"),
+    meta: {
+      title: "error.403",
+      requiresAuth: false,
+      hidden: true,
+    },
+  },
+  {
+    path: "/500",
+    name: "ServerError",
+    component: () => import("@/views/error/500.vue"),
+    meta: {
+      title: "error.500",
+      requiresAuth: false,
+      hidden: true,
+    },
+  },
+];
+
+/**
+ * Basic routes that require authentication
+ */
+export const basicRoutes: AppRouteRecordRaw[] = [
+  {
+    path: "/",
+    name: "Root",
+    redirect: "/dashboard",
+    component: () => import("@/components/Layout/AdminLayout.vue"),
+    meta: {
+      title: "Dashboard",
+      requiresAuth: true,
+    },
+    children: [
+      {
+        path: "/redirect/:path(.*)",
+        name: "Redirect",
+        component: () => import("@/views/redirect/index.vue"),
+        meta: {
+          title: "Redirect",
+          hidden: true,
+        },
+      },
+      {
+        path: "dashboard",
+        name: "Dashboard",
+        component: () => import("@/views/dashboard/index.vue"),
+        meta: {
+          title: "menu.dashboard",
+          icon: "DashboardOutlined",
+          requiresAuth: true,
+          affix: true,
+          order: 1,
+        },
+      },
+      {
+        path: "profile",
+        name: "Profile",
+        component: () => import("@/views/profile/index.vue"),
+        meta: {
+          title: "menu.profile",
+          icon: "UserOutlined",
+          requiresAuth: true,
+          hidden: true,
+        },
+      },
+      {
+        path: "notifications",
+        name: "Notifications",
+        component: () => import("@/views/notification/index.vue"),
+        meta: {
+          title: "layout.notifications",
+          icon: "BellOutlined",
+          requiresAuth: true,
+          hidden: true,
+        },
+      },
+      {
+        path: "about",
+        name: "About",
+        component: () => import("@/views/about/index.vue"),
+        meta: {
+          title: "menu.about",
+          icon: "InfoCircleOutlined",
+          requiresAuth: true,
+          order: 5,
+        },
+      },
+    ],
+  },
+];
+
+/**
+ * Async routes that require permission checking
+ */
+export const asyncRoutes: AppRouteRecordRaw[] = [
+  {
+    path: "/organization",
+    name: "Organization",
+    redirect: "/organization/dept",
+    component: () => import("@/components/Layout/AdminLayout.vue"),
+    meta: {
+      title: "menu.organization",
+      icon: "TeamOutlined",
+      requiresAuth: true,
+      order: 3,
+    },
+    children: [
+      {
+        path: "dept",
+        name: "OrganizationDept",
+        component: () => import("@/views/system/dept/index.vue"),
+        meta: {
+          title: "menu.dept",
+          icon: "ApartmentOutlined",
+          requiresAuth: true,
+          requiredPermissions: ["system.dept.view"],
+        },
+      },
+      {
+        path: "user",
+        name: "OrganizationUser",
+        component: () => import("@/views/system/user/index.vue"),
+        meta: {
+          title: "menu.user",
+          icon: "UserOutlined",
+          requiresAuth: true,
+          requiredPermissions: ["system.user.view"],
+        },
+      },
+      {
+        path: "role",
+        name: "OrganizationRole",
+        component: () => import("@/views/system/role/index.vue"),
+        meta: {
+          title: "menu.role",
+          icon: "TeamOutlined",
+          requiresAuth: true,
+          requiredPermissions: ["system.role.view"],
+        },
+      },
+      {
+        path: "permission",
+        name: "OrganizationPermission",
+        component: () => import("@/views/system/permission/index.vue"),
+        meta: {
+          title: "menu.permission",
+          icon: "SafetyOutlined",
+          requiresAuth: true,
+          requiredPermissions: ["system.permission.view"],
+        },
+      },
+    ],
+  },
+  {
+    path: "/system",
+    name: "System",
+    redirect: "/system/config",
+    component: () => import("@/components/Layout/AdminLayout.vue"),
+    meta: {
+      title: "menu.system",
+      icon: "SettingOutlined",
+      requiresAuth: true,
+      order: 4,
+    },
+    children: [
+      {
+        path: "config",
+        name: "SystemConfig",
+        component: () => import("@/views/system/config/index.vue"),
+        meta: {
+          title: "menu.config",
+          icon: "ControlOutlined",
+          requiresAuth: true,
+          requiredPermissions: ["system.config.view"],
+        },
+      },
+      {
+        path: "dict",
+        name: "SystemDict",
+        component: () => import("@/views/system/dict/index.vue"),
+        meta: {
+          title: "menu.dict",
+          icon: "BookOutlined",
+          requiresAuth: true,
+          requiredPermissions: ["system.dict.view"],
+        },
+      },
+      {
+        path: "file",
+        name: "SystemFile",
+        component: () => import("@/views/system/file/index.vue"),
+        meta: {
+          title: "menu.file",
+          icon: "FolderOutlined",
+          requiresAuth: true,
+          requiredPermissions: ["system.file.view"],
+        },
+      },
+      {
+        path: "log",
+        name: "SystemLog",
+        component: () => import("@/views/system/log/index.vue"),
+        meta: {
+          title: "menu.log",
+          icon: "FileTextOutlined",
+          requiresAuth: true,
+          requiredPermissions: ["system.log.view"],
+        },
+      },
+    ],
+  },
+  {
+    path: "/examples",
+    name: "Examples",
+    redirect: "/examples/pro-table-advanced",
+    component: () => import("@/components/Layout/AdminLayout.vue"),
+    meta: {
+      title: "menu.examples",
+      icon: "AppstoreOutlined",
+      requiresAuth: true,
+      order: 2,
+    },
+    children: [
+      {
+        path: "quick-start",
+        name: "ExamplesQuickStartGroup",
+        redirect: "/examples/pro-table-advanced",
+        component: () => import("@/components/RouteView.vue"),
+        meta: {
+          title: "menu.examplesQuickStart",
+          icon: "ThunderboltOutlined",
+          requiresAuth: true,
+          order: 1,
+        },
+        children: [
+          {
+            path: "/examples/pro-table-advanced",
+            name: "ExamplesProTableAdvanced",
+            component: () =>
+              import("@/views/examples/scaffold/pro-table-advanced/index.vue"),
+            meta: {
+              title: "menu.proTableAdvanced",
+              icon: "TableOutlined",
+              requiresAuth: true,
+              order: 1,
+            },
+          },
+          {
+            path: "/examples/complex-form",
+            name: "ExamplesComplexForm",
+            component: () =>
+              import("@/views/examples/scaffold/complex-form/index.vue"),
+            meta: {
+              title: "menu.complexForm",
+              icon: "FormOutlined",
+              requiresAuth: true,
+              order: 2,
+            },
+          },
+          {
+            path: "/examples/master-detail",
+            name: "ExamplesMasterDetail",
+            component: () =>
+              import("@/views/examples/scaffold/master-detail/index.vue"),
+            meta: {
+              title: "menu.masterDetail",
+              icon: "ProfileOutlined",
+              requiresAuth: true,
+              order: 3,
+            },
+          },
+          {
+            path: "/examples/virtual-table",
+            name: "ExamplesVirtualTable",
+            component: () =>
+              import("@/views/examples/scaffold/virtual-table/index.vue"),
+            meta: {
+              title: "menu.virtualTable",
+              icon: "TableOutlined",
+              requiresAuth: true,
+              order: 4,
+            },
+          },
+        ],
+      },
+      {
+        path: "form-input",
+        name: "ExamplesFormInputGroup",
+        redirect: "/examples/form",
+        component: () => import("@/components/RouteView.vue"),
+        meta: {
+          title: "menu.examplesFormInput",
+          icon: "FormOutlined",
+          requiresAuth: true,
+          order: 2,
+        },
+        children: [
+          {
+            path: "/examples/form",
+            name: "ExamplesForm",
+            component: () => import("@/views/examples/form/index.vue"),
+            meta: {
+              title: "menu.form",
+              icon: "FormOutlined",
+              requiresAuth: true,
+              order: 1,
+            },
+          },
+          {
+            path: "/examples/json-input",
+            name: "ExamplesJsonInput",
+            component: () => import("@/views/examples/json-input/index.vue"),
+            meta: {
+              title: "menu.jsonInput",
+              icon: "CodeOutlined",
+              requiresAuth: true,
+              order: 2,
+            },
+          },
+          {
+            path: "/examples/i18n-input",
+            name: "ExamplesI18nInput",
+            component: () => import("@/views/examples/i18n-input/index.vue"),
+            meta: {
+              title: "menu.i18nInput",
+              icon: "GlobalOutlined",
+              requiresAuth: true,
+              order: 3,
+            },
+          },
+          {
+            path: "/examples/advanced-filter",
+            name: "ExamplesAdvancedFilter",
+            component: () =>
+              import("@/views/examples/scaffold/advanced-filter/index.vue"),
+            meta: {
+              title: "menu.advancedFilter",
+              icon: "ControlOutlined",
+              requiresAuth: true,
+              order: 4,
+            },
+          },
+        ],
+      },
+      {
+        path: "content-editors",
+        name: "ExamplesContentGroup",
+        redirect: "/examples/editor",
+        component: () => import("@/components/RouteView.vue"),
+        meta: {
+          title: "menu.examplesContent",
+          icon: "EditOutlined",
+          requiresAuth: true,
+          order: 3,
+        },
+        children: [
+          {
+            path: "/examples/editor",
+            name: "ExamplesEditor",
+            component: () => import("@/views/examples/editor/index.vue"),
+            meta: {
+              title: "menu.editor",
+              icon: "EditOutlined",
+              requiresAuth: true,
+              order: 1,
+            },
+          },
+          {
+            path: "/examples/milkdown",
+            name: "ExamplesMilkdown",
+            component: () => import("@/views/examples/milkdown/index.vue"),
+            meta: {
+              title: "menu.milkdown",
+              icon: "FileMarkdownOutlined",
+              requiresAuth: true,
+              order: 2,
+            },
+          },
+          {
+            path: "/examples/code-editor",
+            name: "ExamplesCodeEditor",
+            component: () => import("@/views/examples/code-editor/index.vue"),
+            meta: {
+              title: "menu.codeEditor",
+              icon: "CodeOutlined",
+              requiresAuth: true,
+              order: 3,
+            },
+          },
+        ],
+      },
+      {
+        path: "basic-interaction",
+        name: "ExamplesInteractionGroup",
+        redirect: "/examples/table",
+        component: () => import("@/components/RouteView.vue"),
+        meta: {
+          title: "menu.examplesInteraction",
+          icon: "AppstoreAddOutlined",
+          requiresAuth: true,
+          order: 4,
+        },
+        children: [
+          {
+            path: "/examples/table",
+            name: "ExamplesTable",
+            component: () => import("@/views/examples/table/index.vue"),
+            meta: {
+              title: "menu.table",
+              icon: "TableOutlined",
+              requiresAuth: true,
+              order: 1,
+            },
+          },
+          {
+            path: "/examples/modal",
+            name: "ExamplesModal",
+            component: () => import("@/views/examples/modal/index.vue"),
+            meta: {
+              title: "menu.modal",
+              icon: "ExpandOutlined",
+              requiresAuth: true,
+              order: 2,
+            },
+          },
+          {
+            path: "/examples/icon",
+            name: "ExamplesIcon",
+            component: () => import("@/views/examples/icon/index.vue"),
+            meta: {
+              title: "menu.icon",
+              icon: "SmileOutlined",
+              requiresAuth: true,
+              order: 3,
+            },
+          },
+          {
+            path: "/examples/spin",
+            name: "ExamplesSpin",
+            component: () => import("@/views/examples/spin/index.vue"),
+            meta: {
+              title: "menu.spin",
+              icon: "LoadingOutlined",
+              requiresAuth: true,
+              order: 4,
+            },
+          },
+          {
+            path: "/examples/captcha",
+            name: "ExamplesCaptcha",
+            component: () => import("@/views/examples/captcha/index.vue"),
+            meta: {
+              title: "menu.captcha",
+              icon: "SafetyCertificateOutlined",
+              requiresAuth: true,
+              order: 5,
+            },
+          },
+          {
+            path: "/examples/watermark",
+            name: "ExamplesWatermark",
+            component: () => import("@/views/examples/watermark/index.vue"),
+            meta: {
+              title: "menu.watermark",
+              icon: "HighlightOutlined",
+              requiresAuth: true,
+              order: 6,
+            },
+          },
+          {
+            path: "/examples/splitter",
+            name: "ExamplesSplitter",
+            component: () => import("@/views/examples/splitter/index.vue"),
+            meta: {
+              title: "menu.splitter",
+              icon: "ColumnHeightOutlined",
+              requiresAuth: true,
+              order: 7,
+            },
+          },
+          {
+            path: "/examples/tour",
+            name: "ExamplesTour",
+            component: () => import("@/views/examples/tour/index.vue"),
+            meta: {
+              title: "menu.tour",
+              icon: "CompassOutlined",
+              requiresAuth: true,
+              order: 8,
+            },
+          },
+          {
+            path: "/examples/qrcode",
+            name: "ExamplesQRCode",
+            component: () => import("@/views/examples/qrcode/index.vue"),
+            meta: {
+              title: "menu.qrcode",
+              icon: "QrcodeOutlined",
+              requiresAuth: true,
+              order: 9,
+            },
+          },
+          {
+            path: "/examples/segmented",
+            name: "ExamplesSegmented",
+            component: () => import("@/views/examples/segmented/index.vue"),
+            meta: {
+              title: "menu.segmented",
+              icon: "AppstoreOutlined",
+              requiresAuth: true,
+              order: 10,
+            },
+          },
+          {
+            path: "/examples/color-picker",
+            name: "ExamplesColorPicker",
+            component: () => import("@/views/examples/color-picker/index.vue"),
+            meta: {
+              title: "menu.colorPicker",
+              icon: "BgColorsOutlined",
+              requiresAuth: true,
+              order: 11,
+            },
+          },
+        ],
+      },
+      {
+        path: "business-scaffold",
+        name: "ExamplesBusinessScaffoldGroup",
+        redirect: "/examples/upload-system",
+        component: () => import("@/components/RouteView.vue"),
+        meta: {
+          title: "menu.examplesBusinessScaffold",
+          icon: "ProfileOutlined",
+          requiresAuth: true,
+          order: 5,
+        },
+        children: [
+          {
+            path: "/examples/upload-system",
+            name: "ExamplesUploadSystem",
+            component: () =>
+              import("@/views/examples/scaffold/upload-system/index.vue"),
+            meta: {
+              title: "menu.uploadSystem",
+              icon: "CloudUploadOutlined",
+              requiresAuth: true,
+              order: 1,
+            },
+          },
+          {
+            path: "/examples/state-cache",
+            name: "ExamplesStateCache",
+            component: () =>
+              import("@/views/examples/scaffold/state-cache/index.vue"),
+            meta: {
+              title: "menu.stateCache",
+              icon: "DatabaseOutlined",
+              requiresAuth: true,
+              order: 2,
+            },
+          },
+          {
+            path: "/examples/import-export",
+            name: "ExamplesImportExport",
+            component: () =>
+              import("@/views/examples/scaffold/import-export/index.vue"),
+            meta: {
+              title: "menu.importExport",
+              icon: "FileTextOutlined",
+              requiresAuth: true,
+              order: 3,
+            },
+          },
+        ],
+      },
+      {
+        path: "security-engineering",
+        name: "ExamplesSecurityEngineeringGroup",
+        redirect: "/examples/request-auth",
+        component: () => import("@/components/RouteView.vue"),
+        meta: {
+          title: "menu.examplesSecurityEngineering",
+          icon: "SafetyOutlined",
+          requiresAuth: true,
+          order: 6,
+        },
+        children: [
+          {
+            path: "/examples/request-auth",
+            name: "ExamplesRequestAuth",
+            component: () =>
+              import("@/views/examples/scaffold/request-auth/index.vue"),
+            meta: {
+              title: "menu.requestAuth",
+              icon: "SafetyOutlined",
+              requiresAuth: true,
+              order: 1,
+            },
+          },
+          {
+            path: "/examples/rbac-flow",
+            name: "ExamplesRbacFlow",
+            component: () => import("@/views/examples/scaffold/rbac/index.vue"),
+            meta: {
+              title: "menu.rbacFlow",
+              icon: "SafetyCertificateOutlined",
+              requiresAuth: true,
+              order: 2,
+            },
+          },
+          {
+            path: "/examples/observability",
+            name: "ExamplesObservability",
+            component: () =>
+              import("@/views/examples/scaffold/observability/index.vue"),
+            meta: {
+              title: "menu.observability",
+              icon: "LineChartOutlined",
+              requiresAuth: true,
+              order: 3,
+            },
+          },
+          {
+            path: "/examples/testing",
+            name: "ExamplesTesting",
+            component: () =>
+              import("@/views/examples/scaffold/testing/index.vue"),
+            meta: {
+              title: "menu.testing",
+              icon: "CheckCircleOutlined",
+              requiresAuth: true,
+              order: 4,
+            },
+          },
+        ],
+      },
+      {
+        path: "integration-navigation",
+        name: "ExamplesIntegrationGroup",
+        redirect: "/examples/external/iframe/typescript",
+        component: () => import("@/components/RouteView.vue"),
+        meta: {
+          title: "menu.examplesIntegration",
+          icon: "LinkOutlined",
+          requiresAuth: true,
+          order: 7,
+        },
+        children: [
+          {
+            path: "iframe",
+            name: "ExamplesExternalIframe",
+            redirect: "/examples/external/iframe/typescript",
+            component: () => import("@/components/RouteView.vue"),
+            meta: {
+              title: "menu.externalIframe",
+              icon: "AppstoreAddOutlined",
+              requiresAuth: true,
+              order: 1,
+            },
+            children: [
+              {
+                path: "/examples/external/iframe/typescript",
+                name: "ExamplesExternalIframeTypescript",
+                component: () =>
+                  import("@/views/examples/external/iframe/typescript.vue"),
+                meta: {
+                  title: "menu.externalTypescript",
+                  icon: "CodeOutlined",
+                  requiresAuth: true,
+                  order: 1,
+                },
+              },
+              {
+                path: "/examples/external/iframe/antdv-next",
+                name: "ExamplesExternalIframeAntdvNext",
+                component: () =>
+                  import("@/views/examples/external/iframe/antdv-next.vue"),
+                meta: {
+                  title: "menu.externalAntdvNext",
+                  icon: "AntDesignOutlined",
+                  requiresAuth: true,
+                  order: 2,
+                },
+              },
+            ],
+          },
+          {
+            path: "link",
+            name: "ExamplesExternalLink",
+            component: () => import("@/components/RouteView.vue"),
+            meta: {
+              title: "menu.externalLink",
+              icon: "LinkOutlined",
+              requiresAuth: true,
+              order: 2,
+            },
+            children: [
+              {
+                path: "/examples/external/link/vite",
+                name: "ExamplesExternalLinkVite",
+                component: () =>
+                  import("@/views/examples/external/link/vite.vue"),
+                meta: {
+                  title: "menu.externalVite",
+                  icon: "ThunderboltOutlined",
+                  requiresAuth: true,
+                  externalLink: "https://vite.dev",
+                  order: 1,
+                },
+              },
+              {
+                path: "/examples/external/link/vue",
+                name: "ExamplesExternalLinkVue",
+                component: () =>
+                  import("@/views/examples/external/link/vue.vue"),
+                meta: {
+                  title: "menu.externalVue",
+                  icon: "CoffeeOutlined",
+                  requiresAuth: true,
+                  externalLink: "https://vuejs.org",
+                  order: 2,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: "exception-pages",
+        name: "ExamplesExceptionGroup",
+        redirect: "/examples/exception/403",
+        component: () => import("@/components/RouteView.vue"),
+        meta: {
+          title: "menu.examplesExceptionPages",
+          icon: "WarningOutlined",
+          requiresAuth: true,
+          order: 8,
+        },
+        children: [
+          {
+            path: "/examples/exception/403",
+            name: "ExamplesException403",
+            component: () => import("@/views/examples/exception/403.vue"),
+            meta: {
+              title: "menu.exception403",
+              icon: "StopOutlined",
+              requiresAuth: true,
+              order: 1,
+            },
+          },
+          {
+            path: "/examples/exception/404",
+            name: "ExamplesException404",
+            component: () => import("@/views/examples/exception/404.vue"),
+            meta: {
+              title: "menu.exception404",
+              icon: "FileUnknownOutlined",
+              requiresAuth: true,
+              order: 2,
+            },
+          },
+          {
+            path: "/examples/exception/500",
+            name: "ExamplesException500",
+            component: () => import("@/views/examples/exception/500.vue"),
+            meta: {
+              title: "menu.exception500",
+              icon: "BugOutlined",
+              requiresAuth: true,
+              order: 3,
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
+
+/**
+ * Catch-all route
+ */
+export const notFoundRoute: AppRouteRecordRaw = {
+  path: "/:pathMatch(.*)*",
+  name: "NotFoundCatchAll",
+  redirect: "/404",
+  meta: {
+    title: "Not Found",
+    requiresAuth: false,
+    hidden: true,
+  },
+};
diff --git a/antdv-next-admin/src/router/utils.ts b/antdv-next-admin/src/router/utils.ts
new file mode 100644
index 0000000..43ccd93
--- /dev/null
+++ b/antdv-next-admin/src/router/utils.ts
@@ -0,0 +1,252 @@
+import type { AppRouteRecordRaw, MenuItem, RouteConfig } from "@/types/router";
+
+function resolveRoutePath(path: string, basePath = ""): string {
+  if (!path) {
+    return basePath || "/";
+  }
+
+  if (path.startsWith("/")) {
+    return path;
+  }
+
+  const normalizedBase = basePath === "/" ? "" : basePath.replace(/\/$/, "");
+  const resolved = `${normalizedBase}/${path}`.replace(/\/+/g, "/");
+  return resolved.startsWith("/") ? resolved : `/${resolved}`;
+}
+
+/**
+ * Filter routes by permissions
+ */
+export function filterRoutesByPermission(
+  routes: AppRouteRecordRaw[],
+  permissions: string[],
+): AppRouteRecordRaw[] {
+  const hasAllPermission = permissions.includes("*");
+
+  return routes.filter((route) => {
+    if (route.meta?.requiredPermissions && !hasAllPermission) {
+      const hasPermission = route.meta.requiredPermissions.some((perm) =>
+        permissions.includes(perm),
+      );
+      if (!hasPermission) return false;
+    }
+
+    if (route.children) {
+      route.children = filterRoutesByPermission(route.children, permissions);
+      // Remove parent if no children
+      if (route.children.length === 0 && route.redirect) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+}
+
+/**
+ * Filter routes by roles
+ */
+export function filterRoutesByRole(
+  routes: AppRouteRecordRaw[],
+  roles: string[],
+): AppRouteRecordRaw[] {
+  return routes.filter((route) => {
+    if (route.meta?.requiredRoles) {
+      const hasRole = route.meta.requiredRoles.some((role) =>
+        roles.includes(role),
+      );
+      if (!hasRole) return false;
+    }
+
+    if (route.children) {
+      route.children = filterRoutesByRole(route.children, roles);
+      // Remove parent if no children
+      if (route.children.length === 0 && route.redirect) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+}
+
+/**
+ * Convert routes to menu tree
+ */
+export function routesToMenuTree(
+  routes: AppRouteRecordRaw[],
+  basePath = "",
+): MenuItem[] {
+  return routes
+    .filter((route) => !route.meta?.hidden)
+    .map((route) => {
+      const fullPath = resolveRoutePath(route.path, basePath);
+      const menu: MenuItem = {
+        id: (route.name as string) || route.path,
+        label: route.meta?.title || (route.name as string),
+        icon: route.meta?.icon,
+        // Allow routes to render as external links in the sidebar menu.
+        // Sidebar click handler will open these in a new browser tab.
+        path:
+          ((route.meta as unknown as Record<string, unknown>)
+            ?.externalLink as string) || fullPath,
+        badge: route.meta?.badge,
+        requiredPermissions: route.meta?.requiredPermissions,
+        requiredRoles: route.meta?.requiredRoles,
+        meta: route.meta,
+      };
+
+      if (route.children && route.children.length > 0) {
+        menu.children = routesToMenuTree(route.children, fullPath);
+      }
+
+      return menu;
+    })
+    .toSorted((a, b) => {
+      const orderA = a.meta?.order || 999;
+      const orderB = b.meta?.order || 999;
+      return orderA - orderB;
+    });
+}
+
+/**
+ * Flatten routes for easier searching
+ */
+export function flattenRoutes(
+  routes: AppRouteRecordRaw[],
+): AppRouteRecordRaw[] {
+  let result: AppRouteRecordRaw[] = [];
+
+  routes.forEach((route) => {
+    result.push(route);
+    if (route.children) {
+      result = result.concat(flattenRoutes(route.children));
+    }
+  });
+
+  return result;
+}
+
+/**
+ * Find route by path
+ */
+export function findRouteByPath(
+  routes: AppRouteRecordRaw[],
+  path: string,
+): AppRouteRecordRaw | undefined {
+  const flatRoutes = flattenRoutes(routes);
+  return flatRoutes.find((route) => route.path === path);
+}
+
+/**
+ * Find route by name
+ */
+export function findRouteByName(
+  routes: AppRouteRecordRaw[],
+  name: string,
+): AppRouteRecordRaw | undefined {
+  const flatRoutes = flattenRoutes(routes);
+  return flatRoutes.find((route) => route.name === name);
+}
+
+/**
+ * Convert backend route config to Vue Router route
+ */
+export function convertBackendRouteConfig(
+  config: RouteConfig,
+): AppRouteRecordRaw {
+  const route: AppRouteRecordRaw = {
+    path: config.path,
+    name: config.name,
+    component: () => import(`@/views/${config.component}.vue`),
+    meta: config.meta,
+  };
+
+  if (config.redirect) {
+    route.redirect = config.redirect;
+  }
+
+  if (config.children && config.children.length > 0) {
+    route.children = config.children.map((child) =>
+      convertBackendRouteConfig(child),
+    );
+  }
+
+  return route;
+}
+
+/**
+ * Get breadcrumb from route
+ */
+export function getBreadcrumbFromRoute(
+  route: AppRouteRecordRaw,
+): Array<{ label: string; path?: string }> {
+  const breadcrumb: Array<{ label: string; path?: string }> = [];
+
+  const addBreadcrumb = (r: AppRouteRecordRaw) => {
+    if (r.meta?.title) {
+      breadcrumb.push({
+        label: r.meta.title,
+        path: r.path,
+      });
+    }
+  };
+
+  // This is a simplified version
+  // In real implementation, you'd traverse the route tree from root to current
+  addBreadcrumb(route);
+
+  return breadcrumb;
+}
+
+/**
+ * Check if route has permission
+ */
+export function hasRoutePermission(
+  route: AppRouteRecordRaw,
+  permissions: string[],
+): boolean {
+  if (permissions.includes("*")) {
+    return true;
+  }
+
+  if (!route.meta?.requiredPermissions) {
+    return true;
+  }
+
+  return route.meta.requiredPermissions.some((perm) =>
+    permissions.includes(perm),
+  );
+}
+
+/**
+ * Get all menu paths for search
+ */
+export function getAllMenuPaths(routes: AppRouteRecordRaw[]): Array<{
+  path: string;
+  title: string;
+  icon?: string;
+}> {
+  const result: Array<{ path: string; title: string; icon?: string }> = [];
+
+  const traverse = (routes: AppRouteRecordRaw[], basePath = "") => {
+    routes.forEach((route) => {
+      const fullPath = resolveRoutePath(route.path, basePath);
+
+      if (!route.meta?.hidden && route.meta?.title) {
+        result.push({
+          path: fullPath,
+          title: route.meta.title,
+          icon: route.meta.icon,
+        });
+      }
+
+      if (route.children) {
+        traverse(route.children, fullPath);
+      }
+    });
+  };
+
+  traverse(routes);
+  return result;
+}
diff --git a/antdv-next-admin/src/settings.ts b/antdv-next-admin/src/settings.ts
new file mode 100644
index 0000000..dc97c64
--- /dev/null
+++ b/antdv-next-admin/src/settings.ts
@@ -0,0 +1,52 @@
+export type ProTableDensity = 'large' | 'middle' | 'small' | 'smal';
+export type ProTableHeight = '100%' | 'auto' | string | number;
+
+export interface ProTableDefaultSettings {
+  size: ProTableDensity;
+  height: ProTableHeight;
+  resizable: boolean;
+  columnResizable: boolean;
+  ellipsis: boolean;
+  bordered: boolean;
+  fixedHeader: boolean;
+}
+
+export interface InputDefaultSettings {
+  allowClear: boolean;
+}
+
+export interface SelectDefaultSettings {
+  allowClear: boolean;
+}
+
+export interface DatePickerDefaultSettings {
+  allowClear: boolean;
+}
+
+export interface AppDefaultSettings {
+  proTable: ProTableDefaultSettings;
+  input: InputDefaultSettings;
+  select: SelectDefaultSettings;
+  datePicker: DatePickerDefaultSettings;
+}
+
+export const appDefaultSettings: AppDefaultSettings = {
+  proTable: {
+    size: 'smal',
+    height: 'auto',
+    resizable: true,
+    columnResizable: true,
+    ellipsis: true,
+    bordered: true,
+    fixedHeader: true,
+  },
+  input: {
+    allowClear: true,
+  },
+  select: {
+    allowClear: true,
+  },
+  datePicker: {
+    allowClear: true,
+  },
+};
diff --git a/antdv-next-admin/src/stores/CLAUDE.md b/antdv-next-admin/src/stores/CLAUDE.md
new file mode 100644
index 0000000..ded4337
--- /dev/null
+++ b/antdv-next-admin/src/stores/CLAUDE.md
@@ -0,0 +1,13 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 11, 2026
+
+| ID   | Time    | T   | Title                                               | Read |
+| ---- | ------- | --- | --------------------------------------------------- | ---- |
+| #350 | 5:41 PM | 🔵  | Authentication Store with Demo and Production Modes | ~514 |
+| #342 | 5:40 PM | 🔵  | Pinia Store Architecture                            | ~252 |
+
+</claude-mem-context>
diff --git a/antdv-next-admin/src/stores/auth.ts b/antdv-next-admin/src/stores/auth.ts
new file mode 100644
index 0000000..db9d778
--- /dev/null
+++ b/antdv-next-admin/src/stores/auth.ts
@@ -0,0 +1,342 @@
+import type { User, Role, Permission } from "@/types/auth";
+
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+import avatarImg from "@/assets/images/avatar.png";
+
+const TOKEN_KEY = "access_token";
+const REFRESH_TOKEN_KEY = "refresh_token";
+const USER_KEY = "user_info";
+const TOKEN_EXPIRES_KEY = "token_expires_at";
+
+const DEFAULT_TOKEN_EXPIRY_MS = 24 * 60 * 60 * 1000;
+
+function decodeJwtPayload(token: string): Record<string, unknown> | null {
+  try {
+    const base64Url = token.split(".")[1];
+    if (!base64Url) return null;
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split("")
+        .map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2))
+        .join(""),
+    );
+    return JSON.parse(jsonPayload);
+  } catch {
+    return null;
+  }
+}
+
+export const useAuthStore = defineStore("auth", () => {
+  const token = ref<string | null>(localStorage.getItem(TOKEN_KEY));
+  const refreshTokenValue = ref<string | null>(
+    localStorage.getItem(REFRESH_TOKEN_KEY),
+  );
+  const tokenExpiresAt = ref<number | null>(null);
+  const user = ref<User | null>(null);
+  const roles = ref<Role[]>([]);
+  const permissions = ref<Permission[]>([]);
+
+  const savedExpires = localStorage.getItem(TOKEN_EXPIRES_KEY);
+  if (savedExpires) {
+    tokenExpiresAt.value = parseInt(savedExpires, 10);
+  }
+
+  const isTokenExpired = computed(() => {
+    if (!token.value) return true;
+    if (!tokenExpiresAt.value) return false;
+    return Date.now() >= tokenExpiresAt.value;
+  });
+
+  const isLoggedIn = computed(
+    () => !!token.value && !!user.value && !isTokenExpired.value,
+  );
+  const userRoles = computed(() => roles.value.map((role) => role.code));
+  const userPermissions = computed(() =>
+    permissions.value.map((perm) => perm.code),
+  );
+
+  const setToken = (
+    newToken: string | null,
+    newRefreshToken?: string | null,
+    expiresIn?: number,
+  ) => {
+    token.value = newToken;
+    if (newToken) {
+      localStorage.setItem(TOKEN_KEY, newToken);
+
+      let expiresAt: number;
+      if (expiresIn !== undefined && expiresIn > 0) {
+        expiresAt = Date.now() + expiresIn * 1000;
+      } else {
+        const payload = decodeJwtPayload(newToken);
+        if (payload?.exp && typeof payload.exp === "number") {
+          expiresAt = payload.exp * 1000;
+        } else {
+          expiresAt = Date.now() + DEFAULT_TOKEN_EXPIRY_MS;
+        }
+      }
+      tokenExpiresAt.value = expiresAt;
+      localStorage.setItem(TOKEN_EXPIRES_KEY, expiresAt.toString());
+    } else {
+      localStorage.removeItem(TOKEN_KEY);
+      tokenExpiresAt.value = null;
+      localStorage.removeItem(TOKEN_EXPIRES_KEY);
+    }
+
+    if (newRefreshToken !== undefined) {
+      refreshTokenValue.value = newRefreshToken;
+      if (newRefreshToken) {
+        localStorage.setItem(REFRESH_TOKEN_KEY, newRefreshToken);
+      } else {
+        localStorage.removeItem(REFRESH_TOKEN_KEY);
+      }
+    }
+  };
+
+  const setUserInfo = (userInfo: User | null) => {
+    user.value = userInfo;
+    if (userInfo) {
+      roles.value = userInfo.roles || [];
+      permissions.value = userInfo.permissions || [];
+      localStorage.setItem(USER_KEY, JSON.stringify(userInfo));
+    } else {
+      roles.value = [];
+      permissions.value = [];
+      localStorage.removeItem(USER_KEY);
+    }
+  };
+
+  const login = async (username: string, password: string): Promise<void> => {
+    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
+    const isDemoMode =
+      import.meta.env.VITE_USE_MOCK === "true" || apiBaseUrl === "/api";
+
+    if (isDemoMode) {
+      return loginDemo(username, password);
+    }
+
+    const { login: loginApi, getUserInfo } = await import("@/api/auth");
+
+    const loginResult = await loginApi({ username, password });
+    setToken(
+      loginResult.data.token,
+      loginResult.data.refreshToken,
+      loginResult.data.expiresIn,
+    );
+
+    const userInfo = await getUserInfo();
+    setUserInfo(userInfo.data);
+  };
+
+  const loginDemo = async (
+    username: string,
+    password: string,
+  ): Promise<void> => {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    if (
+      (username === "admin" || username === "user") &&
+      password === "123456"
+    ) {
+      const isAdmin = username === "admin";
+
+      setToken(
+        `demo-token-${isAdmin ? "1" : "2"}-${Date.now()}`,
+        `demo-refresh-token-${isAdmin ? "1" : "2"}-${Date.now()}`,
+        DEFAULT_TOKEN_EXPIRY_MS / 1000,
+      );
+
+      const userInfo: User = isAdmin
+        ? {
+            id: "1",
+            username: "admin",
+            email: "admin@example.com",
+            realName: "Administrator",
+            avatar: avatarImg,
+            phone: "13800138000",
+            gender: "male",
+            birthDate: "1990-01-01",
+            bio: "System Administrator",
+            status: "active",
+            createdAt: "2023-01-01T00:00:00.000Z",
+            updatedAt: new Date().toISOString(),
+            roles: [
+              {
+                id: "1",
+                name: "Administrator",
+                code: "admin",
+                description: "System Administrator",
+                permissions: [],
+                createdAt: "2023-01-01T00:00:00.000Z",
+                updatedAt: "2023-01-01T00:00:00.000Z",
+              },
+            ],
+            permissions: [
+              {
+                id: "1",
+                name: "All Permissions",
+                code: "*",
+                description: "Has all permissions",
+                resource: "*",
+                action: "*",
+                type: "api",
+              },
+            ],
+          }
+        : {
+            id: "2",
+            username: "user",
+            email: "user@example.com",
+            realName: "Regular User",
+            avatar: avatarImg,
+            phone: "13800138001",
+            gender: "female",
+            birthDate: "1995-05-15",
+            bio: "Regular User",
+            status: "active",
+            createdAt: "2023-01-01T00:00:00.000Z",
+            updatedAt: new Date().toISOString(),
+            roles: [
+              {
+                id: "2",
+                name: "User",
+                code: "user",
+                description: "Regular User",
+                permissions: [],
+                createdAt: "2023-01-01T00:00:00.000Z",
+                updatedAt: "2023-01-01T00:00:00.000Z",
+              },
+            ],
+            permissions: [
+              {
+                id: "2",
+                name: "View Dashboard",
+                code: "dashboard.view",
+                description: "Can view dashboard",
+                resource: "dashboard",
+                action: "view",
+                type: "menu",
+              },
+            ],
+          };
+
+      setUserInfo(userInfo);
+    } else {
+      throw new Error("Invalid username or password");
+    }
+  };
+
+  const logout = () => {
+    setToken(null, null);
+    setUserInfo(null);
+  };
+
+  const refreshToken = async (): Promise<string> => {
+    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
+    const isDemoMode =
+      import.meta.env.VITE_USE_MOCK === "true" || apiBaseUrl === "/api";
+
+    if (isDemoMode) {
+      await new Promise((resolve) => setTimeout(resolve, 700));
+
+      if (!refreshTokenValue.value) {
+        throw new Error("No refresh token available");
+      }
+
+      const newToken = `demo-token-refreshed-${Date.now()}`;
+      setToken(
+        newToken,
+        refreshTokenValue.value,
+        DEFAULT_TOKEN_EXPIRY_MS / 1000,
+      );
+      return newToken;
+    }
+
+    const { refreshToken: refreshTokenApi } = await import("@/api/auth");
+
+    if (!refreshTokenValue.value) {
+      throw new Error("No refresh token available");
+    }
+
+    const result = await refreshTokenApi(refreshTokenValue.value);
+    setToken(
+      result.data.token,
+      result.data.refreshToken,
+      result.data.expiresIn,
+    );
+    return result.data.token;
+  };
+
+  const hasRole = (role: string): boolean => {
+    return userRoles.value.includes(role);
+  };
+
+  const hasAnyRole = (roleList: string[]): boolean => {
+    return roleList.some((role) => hasRole(role));
+  };
+
+  const hasAllRoles = (roleList: string[]): boolean => {
+    return roleList.every((role) => hasRole(role));
+  };
+
+  const hasPermission = (permission: string): boolean => {
+    return (
+      userPermissions.value.includes("*") ||
+      userPermissions.value.includes(permission)
+    );
+  };
+
+  const hasAnyPermission = (permissionList: string[]): boolean => {
+    return permissionList.some((perm) => hasPermission(perm));
+  };
+
+  const hasAllPermissions = (permissionList: string[]): boolean => {
+    return permissionList.every((perm) => hasPermission(perm));
+  };
+
+  const initAuth = () => {
+    if (isTokenExpired.value && token.value) {
+      logout();
+      return;
+    }
+
+    const savedUser = localStorage.getItem(USER_KEY);
+    if (savedUser) {
+      try {
+        const userInfo = JSON.parse(savedUser);
+        setUserInfo(userInfo);
+      } catch (error) {
+        console.error("Failed to parse saved user info:", error);
+        localStorage.removeItem(USER_KEY);
+      }
+    }
+  };
+
+  return {
+    token,
+    refreshTokenValue,
+    tokenExpiresAt,
+    user,
+    roles,
+    permissions,
+    isTokenExpired,
+    isLoggedIn,
+    userRoles,
+    userPermissions,
+    setToken,
+    setUserInfo,
+    login,
+    logout,
+    refreshToken,
+    hasRole,
+    hasAnyRole,
+    hasAllRoles,
+    hasPermission,
+    hasAnyPermission,
+    hasAllPermissions,
+    initAuth,
+  };
+});
diff --git a/antdv-next-admin/src/stores/demoStateCache.ts b/antdv-next-admin/src/stores/demoStateCache.ts
new file mode 100644
index 0000000..a30fd69
--- /dev/null
+++ b/antdv-next-admin/src/stores/demoStateCache.ts
@@ -0,0 +1,77 @@
+import { defineStore } from 'pinia';
+import { ref, watch } from 'vue';
+
+const STORAGE_KEY = 'demo-state-cache';
+
+type PersistedState = {
+  keyword: string;
+  counter: number;
+  notes: string;
+  updatedAt: string;
+};
+
+const loadPersistedState = (): PersistedState => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return {
+        keyword: '',
+        counter: 0,
+        notes: '',
+        updatedAt: '-',
+      };
+    }
+
+    const parsed = JSON.parse(raw) as PersistedState;
+    return {
+      keyword: parsed.keyword || '',
+      counter: Number(parsed.counter || 0),
+      notes: parsed.notes || '',
+      updatedAt: parsed.updatedAt || '-',
+    };
+  } catch {
+    return {
+      keyword: '',
+      counter: 0,
+      notes: '',
+      updatedAt: '-',
+    };
+  }
+};
+
+export const useDemoStateCacheStore = defineStore('demoStateCache', () => {
+  const initial = loadPersistedState();
+
+  const keyword = ref(initial.keyword);
+  const counter = ref(initial.counter);
+  const notes = ref(initial.notes);
+  const updatedAt = ref(initial.updatedAt);
+
+  const persist = () => {
+    updatedAt.value = new Date().toLocaleString();
+    const snapshot: PersistedState = {
+      keyword: keyword.value,
+      counter: counter.value,
+      notes: notes.value,
+      updatedAt: updatedAt.value,
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
+  };
+
+  watch([keyword, counter, notes], persist, { deep: true });
+
+  const reset = () => {
+    keyword.value = '';
+    counter.value = 0;
+    notes.value = '';
+    persist();
+  };
+
+  return {
+    keyword,
+    counter,
+    notes,
+    updatedAt,
+    reset,
+  };
+});
diff --git a/antdv-next-admin/src/stores/dict.ts b/antdv-next-admin/src/stores/dict.ts
new file mode 100644
index 0000000..2296e1c
--- /dev/null
+++ b/antdv-next-admin/src/stores/dict.ts
@@ -0,0 +1,129 @@
+import type { DictData, DictGroup } from "@/types/dict";
+
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+import { getAllDictData } from "@/api/dict";
+
+export const useDictStore = defineStore("dict", () => {
+  // 所有字典数据
+  const dictData = ref<DictData[]>([]);
+
+  // 是否已加载
+  const loaded = ref(false);
+
+  // 是否正在加载
+  const loading = ref(false);
+
+  // 按类型分组的字典数据
+  const dictGroup = computed<DictGroup>(() => {
+    const group: DictGroup = {};
+    dictData.value.forEach((item) => {
+      if (!group[item.typeCode]) {
+        group[item.typeCode] = [];
+      }
+      group[item.typeCode].push(item);
+    });
+    // 按 sort 排序
+    Object.keys(group).forEach((key) => {
+      group[key].sort((a, b) => a.sort - b.sort);
+    });
+    return group;
+  });
+
+  /**
+   * 加载所有字典数据
+   */
+  const loadDictData = async (force = false) => {
+    // 如果已加载且不强制刷新，直接返回
+    if (loaded.value && !force) {
+      return;
+    }
+
+    // 如果正在加载，避免重复请求
+    if (loading.value) {
+      return;
+    }
+
+    try {
+      loading.value = true;
+      const response = await getAllDictData();
+      if (response.code === 200) {
+        dictData.value = response.data.filter(
+          (item: DictData) => item.status === "enabled",
+        );
+        loaded.value = true;
+      }
+    } catch (error) {
+      console.error("加载字典数据失败:", error);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  /**
+   * 根据类型获取字典数据
+   */
+  const getDictByType = (typeCode: string): DictData[] => {
+    return dictGroup.value[typeCode] || [];
+  };
+
+  /**
+   * 根据类型和值获取标签
+   */
+  const getDictLabel = (typeCode: string, value: string): string => {
+    const dict = dictGroup.value[typeCode]?.find(
+      (item) => item.value === value,
+    );
+    return dict?.label || value;
+  };
+
+  /**
+   * 根据类型和标签获取值
+   */
+  const getDictValue = (typeCode: string, label: string): string => {
+    const dict = dictGroup.value[typeCode]?.find(
+      (item) => item.label === label,
+    );
+    return dict?.value || label;
+  };
+
+  /**
+   * 获取字典选项（用于下拉框）
+   */
+  const getDictOptions = (typeCode: string) => {
+    return getDictByType(typeCode).map((item) => ({
+      label: item.label,
+      value: item.value,
+    }));
+  };
+
+  /**
+   * 刷新字典数据
+   */
+  const refreshDictData = () => {
+    return loadDictData(true);
+  };
+
+  /**
+   * 清空字典数据
+   */
+  const clearDictData = () => {
+    dictData.value = [];
+    loaded.value = false;
+  };
+
+  return {
+    dictData,
+    dictGroup,
+    loaded,
+    loading,
+    loadDictData,
+    getDictByType,
+    getDictLabel,
+    getDictValue,
+    getDictOptions,
+    refreshDictData,
+    clearDictData,
+  };
+});
diff --git a/antdv-next-admin/src/stores/index.ts b/antdv-next-admin/src/stores/index.ts
new file mode 100644
index 0000000..2d0c336
--- /dev/null
+++ b/antdv-next-admin/src/stores/index.ts
@@ -0,0 +1,17 @@
+import { createPinia } from 'pinia';
+
+const pinia = createPinia();
+
+export default pinia;
+
+// Export all stores
+export { useAuthStore } from './auth';
+export { useLayoutStore } from './layout';
+export { useThemeStore } from './theme';
+export { useTabsStore } from './tabs';
+export { usePermissionStore } from './permission';
+export { useNotificationStore } from './notification';
+export { useSettingsStore } from './settings';
+export { useWatermarkStore } from './watermark';
+export { useDemoStateCacheStore } from './demoStateCache';
+export { useDictStore } from './dict';
diff --git a/antdv-next-admin/src/stores/layout.ts b/antdv-next-admin/src/stores/layout.ts
new file mode 100644
index 0000000..98c9c27
--- /dev/null
+++ b/antdv-next-admin/src/stores/layout.ts
@@ -0,0 +1,133 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+const SIDEBAR_COLLAPSED_KEY = 'sidebar-collapsed';
+const AI_COLLAB_ENABLED_KEY = 'layout-ai-collab-enabled';
+const AI_ENTRY_VISIBLE_KEY = 'layout-ai-entry-visible';
+const AI_PANEL_WIDTH_KEY = 'layout-ai-panel-width';
+const AI_PANEL_MIN_WIDTH = 320;
+const AI_PANEL_MAX_WIDTH = 560;
+
+export const useLayoutStore = defineStore('layout', () => {
+  // State
+  const collapsed = ref(false);
+  const sidebarWidth = ref(240);
+  const collapsedWidth = ref(80);
+  const isMobile = ref(false);
+  const pageFullscreen = ref(false);
+  const aiEntryVisible = ref(true);
+  const aiCollabEnabled = ref(false);
+  const aiPanelWidth = ref(420);
+
+  // Actions
+  const toggleSidebar = () => {
+    collapsed.value = !collapsed.value;
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, collapsed.value.toString());
+  };
+
+  const setSidebarCollapsed = (value: boolean) => {
+    collapsed.value = value;
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, value.toString());
+  };
+
+  const setIsMobile = (value: boolean) => {
+    isMobile.value = value;
+    // Auto collapse sidebar on mobile
+    if (value) {
+      collapsed.value = true;
+    }
+  };
+
+  const togglePageFullscreen = () => {
+    pageFullscreen.value = !pageFullscreen.value;
+  };
+
+  const setPageFullscreen = (value: boolean) => {
+    pageFullscreen.value = value;
+  };
+
+  const toggleAiCollab = () => {
+    aiCollabEnabled.value = !aiCollabEnabled.value;
+    localStorage.setItem(AI_COLLAB_ENABLED_KEY, aiCollabEnabled.value.toString());
+  };
+
+  const setAiCollabEnabled = (value: boolean) => {
+    aiCollabEnabled.value = value;
+    localStorage.setItem(AI_COLLAB_ENABLED_KEY, value.toString());
+  };
+
+  const setAiEntryVisible = (value: boolean) => {
+    aiEntryVisible.value = value;
+    localStorage.setItem(AI_ENTRY_VISIBLE_KEY, value.toString());
+    if (!value) {
+      setAiCollabEnabled(false);
+    }
+  };
+
+  const setAiPanelWidth = (value: number) => {
+    const nextWidth = Math.max(AI_PANEL_MIN_WIDTH, Math.min(AI_PANEL_MAX_WIDTH, Math.round(value)));
+    aiPanelWidth.value = nextWidth;
+    localStorage.setItem(AI_PANEL_WIDTH_KEY, String(nextWidth));
+  };
+
+  const getCurrentSidebarWidth = () => {
+    return collapsed.value ? collapsedWidth.value : sidebarWidth.value;
+  };
+
+  // Initialize from localStorage
+  const initLayout = () => {
+    const savedCollapsed = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
+    if (savedCollapsed !== null) {
+      collapsed.value = savedCollapsed === 'true';
+    }
+
+    const savedAiCollabEnabled = localStorage.getItem(AI_COLLAB_ENABLED_KEY);
+    if (savedAiCollabEnabled !== null) {
+      aiCollabEnabled.value = savedAiCollabEnabled === 'true';
+    }
+
+    const savedAiEntryVisible = localStorage.getItem(AI_ENTRY_VISIBLE_KEY);
+    if (savedAiEntryVisible !== null) {
+      aiEntryVisible.value = savedAiEntryVisible === 'true';
+    }
+
+    const savedAiPanelWidth = localStorage.getItem(AI_PANEL_WIDTH_KEY);
+    if (savedAiPanelWidth !== null) {
+      const parsedWidth = Number(savedAiPanelWidth);
+      if (!Number.isNaN(parsedWidth)) {
+        setAiPanelWidth(parsedWidth);
+      }
+    }
+
+    // Check if mobile
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+  };
+
+  return {
+    // State
+    collapsed,
+    sidebarWidth,
+    collapsedWidth,
+    isMobile,
+    pageFullscreen,
+    aiEntryVisible,
+    aiCollabEnabled,
+    aiPanelWidth,
+    // Actions
+    toggleSidebar,
+    setSidebarCollapsed,
+    setIsMobile,
+    togglePageFullscreen,
+    setPageFullscreen,
+    toggleAiCollab,
+    setAiCollabEnabled,
+    setAiEntryVisible,
+    setAiPanelWidth,
+    getCurrentSidebarWidth,
+    initLayout,
+  };
+});
diff --git a/antdv-next-admin/src/stores/notification.ts b/antdv-next-admin/src/stores/notification.ts
new file mode 100644
index 0000000..e97a59d
--- /dev/null
+++ b/antdv-next-admin/src/stores/notification.ts
@@ -0,0 +1,137 @@
+import type { Notification } from '@/types/layout';
+
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useNotificationStore = defineStore('notification', () => {
+  // State
+  const notifications = ref<Notification[]>([]);
+
+  // Getters
+  const unreadCount = computed(() => {
+    return notifications.value.filter((n) => !n.read).length;
+  });
+
+  const unreadNotifications = computed(() => {
+    return notifications.value.filter((n) => !n.read);
+  });
+
+  const readNotifications = computed(() => {
+    return notifications.value.filter((n) => n.read);
+  });
+
+  // Actions
+  const addNotification = (notification: Omit<Notification, 'id' | 'timestamp' | 'read'>) => {
+    const newNotification: Notification = {
+      id: Date.now().toString(),
+      timestamp: Date.now(),
+      read: false,
+      ...notification,
+    };
+
+    notifications.value.unshift(newNotification);
+  };
+
+  const markAsRead = (id: string) => {
+    const notification = notifications.value.find((n) => n.id === id);
+    if (notification) {
+      notification.read = true;
+    }
+  };
+
+  const markAllAsRead = () => {
+    notifications.value.forEach((n) => {
+      n.read = true;
+    });
+  };
+
+  const removeNotification = (id: string) => {
+    const index = notifications.value.findIndex((n) => n.id === id);
+    if (index !== -1) {
+      notifications.value.splice(index, 1);
+    }
+  };
+
+  const clearAll = () => {
+    notifications.value = [];
+  };
+
+  const clearRead = () => {
+    notifications.value = notifications.value.filter((n) => !n.read);
+  };
+
+  const initNotifications = () => {
+    // 模拟通知数据
+    const mockNotifications: Notification[] = [
+      {
+        id: '1',
+        title: '系统更新',
+        message: '系统已更新到最新版本 v2.0.0，新增了多项功能优化',
+        type: 'info',
+        category: 'system',
+        timestamp: Date.now() - 1000 * 60 * 5, // 5分钟前
+        read: false,
+        link: '/dashboard',
+      },
+      {
+        id: '2',
+        title: '新消息',
+        message: '您有一条来自管理员的新消息，请及时查看',
+        type: 'success',
+        category: 'message',
+        timestamp: Date.now() - 1000 * 60 * 30, // 30分钟前
+        read: false,
+        link: '/profile',
+      },
+      {
+        id: '3',
+        title: '安全提醒',
+        message: '检测到您的账号在异地登录，如非本人操作请及时修改密码',
+        type: 'warning',
+        category: 'security',
+        timestamp: Date.now() - 1000 * 60 * 60 * 2, // 2小时前
+        read: false,
+        link: '/profile',
+      },
+      {
+        id: '4',
+        title: '任务完成',
+        message: '数据导出任务已完成，共导出 1,234 条记录',
+        type: 'success',
+        category: 'task',
+        timestamp: Date.now() - 1000 * 60 * 60 * 5, // 5小时前
+        read: true,
+        link: '/examples/table',
+      },
+      {
+        id: '5',
+        title: '系统维护通知',
+        message: '系统将于今晚 22:00-24:00 进行维护，期间可能无法访问',
+        type: 'warning',
+        category: 'system',
+        timestamp: Date.now() - 1000 * 60 * 60 * 24, // 1天前
+        read: true,
+        link: '/dashboard',
+      },
+    ];
+
+    notifications.value = mockNotifications;
+  };
+
+  return {
+    // State
+    notifications,
+    // Getters
+    unreadCount,
+    unreadNotifications,
+    readNotifications,
+    // Actions
+    addNotification,
+    markAsRead,
+    markAllAsRead,
+    removeNotification,
+    clearAll,
+    clearRead,
+    initNotifications,
+  };
+});
diff --git a/antdv-next-admin/src/stores/permission.ts b/antdv-next-admin/src/stores/permission.ts
new file mode 100644
index 0000000..9253701
--- /dev/null
+++ b/antdv-next-admin/src/stores/permission.ts
@@ -0,0 +1,132 @@
+import type { Permission } from '@/types/auth';
+import type { AppRouteRecordRaw, MenuItem } from '@/types/router';
+import type { RouteRecordRaw } from 'vue-router';
+
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import { getUserPermissions } from '@/api/permission';
+import { basicRoutes, asyncRoutes } from '@/router/routes';
+import { filterRoutesByPermission, filterRoutesByRole, routesToMenuTree } from '@/router/utils';
+
+function cloneRoutes(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] {
+  return routes.map((route) => ({
+    ...route,
+    meta: route.meta ? { ...route.meta } : undefined,
+    children: route.children ? cloneRoutes(route.children) : undefined,
+  }));
+}
+
+function collectPermissionCodes(permissionTree: Permission[]): string[] {
+  const codes = new Set<string>();
+
+  const traverse = (permissions: Permission[]) => {
+    permissions.forEach((permission) => {
+      if (permission.code) {
+        codes.add(permission.code);
+      }
+      if (permission.children && permission.children.length > 0) {
+        traverse(permission.children);
+      }
+    });
+  };
+
+  traverse(permissionTree);
+  return Array.from(codes);
+}
+
+export const usePermissionStore = defineStore('permission', () => {
+  // State
+  const routes = ref<RouteRecordRaw[]>([]);
+  const menuTree = ref<MenuItem[]>([]);
+  const isRoutesGenerated = ref(false);
+
+  // Actions
+  const generateRoutes = async (
+    roles: string[],
+    permissions: string[],
+  ): Promise<RouteRecordRaw[]> => {
+    let permissionCodes = permissions;
+    try {
+      const permissionResponse = await getUserPermissions();
+      const apiPermissionCodes = collectPermissionCodes(permissionResponse.data || []);
+      if (apiPermissionCodes.length > 0) {
+        permissionCodes = apiPermissionCodes;
+      }
+    } catch (error) {
+      console.warn(
+        'Failed to load permissions from API, fallback to user info permissions.',
+        error,
+      );
+    }
+
+    const clonedAsyncRoutes = cloneRoutes(asyncRoutes);
+    const clonedBasicChildren = cloneRoutes(basicRoutes.flatMap((route) => route.children || []));
+
+    let accessedRoutes = filterRoutesByPermission(clonedAsyncRoutes, permissionCodes);
+    accessedRoutes = filterRoutesByRole(accessedRoutes, roles);
+
+    routes.value = accessedRoutes as unknown as RouteRecordRaw[];
+    menuTree.value = routesToMenuTree([...clonedBasicChildren, ...accessedRoutes]);
+    isRoutesGenerated.value = true;
+
+    return routes.value;
+  };
+
+  const getAccessibleMenus = (permissions: string[]): MenuItem[] => {
+    const hasAllPermission = permissions.includes('*');
+
+    // Filter menu tree based on permissions
+    const filterMenu = (menus: MenuItem[]): MenuItem[] => {
+      return menus
+        .filter((menu) => {
+          if (hasAllPermission) {
+            return true;
+          }
+
+          if (!menu.requiredPermissions || menu.requiredPermissions.length === 0) {
+            return true;
+          }
+          return menu.requiredPermissions.some((perm) => permissions.includes(perm));
+        })
+        .map((menu) => {
+          if (menu.children) {
+            return {
+              ...menu,
+              children: filterMenu(menu.children),
+            };
+          }
+          return menu;
+        });
+    };
+
+    return filterMenu(menuTree.value);
+  };
+
+  const setRoutes = (newRoutes: RouteRecordRaw[]) => {
+    routes.value = newRoutes;
+  };
+
+  const setMenuTree = (newMenuTree: MenuItem[]) => {
+    menuTree.value = newMenuTree;
+  };
+
+  const resetPermission = () => {
+    routes.value = [];
+    menuTree.value = [];
+    isRoutesGenerated.value = false;
+  };
+
+  return {
+    // State
+    routes,
+    menuTree,
+    isRoutesGenerated,
+    // Actions
+    generateRoutes,
+    getAccessibleMenus,
+    setRoutes,
+    setMenuTree,
+    resetPermission,
+  };
+});
diff --git a/antdv-next-admin/src/stores/settings.ts b/antdv-next-admin/src/stores/settings.ts
new file mode 100644
index 0000000..1180451
--- /dev/null
+++ b/antdv-next-admin/src/stores/settings.ts
@@ -0,0 +1,152 @@
+import type { PrimaryColor, SidebarTheme, LayoutMode, PageAnimation } from '@/types/layout';
+
+import { generate } from '@ant-design/colors';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+const PAGE_ANIMATION_VALUES: Set<string> = new Set([
+  'fade',
+  'slide-left',
+  'slide-right',
+  'slide-up',
+  'slide-down',
+  'zoom',
+  'zoom-big',
+  'none',
+]);
+
+const PRIMARY_COLOR_HEX_MAP: Record<PrimaryColor, string> = {
+  blue: '#1890ff',
+  green: '#52c41a',
+  purple: '#722ed1',
+  red: '#f5222d',
+  orange: '#fa8c16',
+  cyan: '#13c2c2',
+};
+
+const isPrimaryColor = (color: string): color is PrimaryColor => color in PRIMARY_COLOR_HEX_MAP;
+
+export const useSettingsStore = defineStore('settings', () => {
+  // State
+  const primaryColor = ref<PrimaryColor>('blue');
+  const customPrimaryColor = ref<string>('');
+  const primaryColorHex = computed(
+    () => customPrimaryColor.value || PRIMARY_COLOR_HEX_MAP[primaryColor.value],
+  );
+  const sidebarTheme = ref<SidebarTheme>('light');
+  const layoutMode = ref<LayoutMode>('vertical');
+  const pageAnimation = ref<PageAnimation>('slide-left');
+  const grayMode = ref(false);
+  const rememberTabState = ref(true);
+
+  // Actions
+  const setPrimaryColor = (color: PrimaryColor) => {
+    primaryColor.value = color;
+    customPrimaryColor.value = '';
+    const hex = PRIMARY_COLOR_HEX_MAP[color];
+    document.documentElement.setAttribute('data-primary-color', color);
+    document.documentElement.style.setProperty('--ant-primary-color', hex);
+    localStorage.setItem('app-primary-color', color);
+    localStorage.removeItem('app-custom-primary-color');
+  };
+
+  const setCustomPrimaryColor = (hex: string) => {
+    customPrimaryColor.value = hex;
+    document.documentElement.removeAttribute('data-primary-color');
+
+    // Generate color scales from the custom color
+    const colors = generate(hex);
+
+    // Set base color
+    document.documentElement.style.setProperty('--color-primary', hex);
+    document.documentElement.style.setProperty('--ant-primary-color', hex);
+
+    // Set color scales (1-10)
+    colors.forEach((color, index) => {
+      document.documentElement.style.setProperty(`--color-primary-${index + 1}`, color);
+    });
+
+    localStorage.setItem('app-custom-primary-color', hex);
+  };
+
+  const setSidebarTheme = (theme: SidebarTheme) => {
+    sidebarTheme.value = theme;
+    localStorage.setItem('app-sidebar-theme', theme);
+  };
+
+  const setLayoutMode = (mode: LayoutMode) => {
+    layoutMode.value = mode;
+    localStorage.setItem('app-layout-mode', mode);
+  };
+
+  const setPageAnimation = (animation: PageAnimation) => {
+    pageAnimation.value = animation;
+    localStorage.setItem('app-page-animation', animation);
+  };
+
+  const setGrayMode = (enabled: boolean) => {
+    grayMode.value = enabled;
+    document.documentElement.classList.toggle('gray-mode', enabled);
+    localStorage.setItem('app-gray-mode', enabled.toString());
+  };
+
+  const setRememberTabState = (enabled: boolean) => {
+    rememberTabState.value = enabled;
+    localStorage.setItem('app-remember-tab-state', enabled.toString());
+  };
+
+  const resetSettings = () => {
+    setPrimaryColor('blue');
+    setSidebarTheme('dark');
+    setLayoutMode('vertical');
+    setPageAnimation('slide-left');
+    setGrayMode(false);
+    setRememberTabState(true);
+  };
+
+  const initSettings = () => {
+    // Restore from localStorage
+    const savedPrimaryColor = localStorage.getItem('app-primary-color');
+    const savedCustomPrimaryColor = localStorage.getItem('app-custom-primary-color');
+    const savedSidebarTheme = localStorage.getItem('app-sidebar-theme') as SidebarTheme;
+    const savedLayoutMode = localStorage.getItem('app-layout-mode') as LayoutMode;
+    const savedPageAnimation = localStorage.getItem('app-page-animation') as PageAnimation;
+    const savedGrayMode = localStorage.getItem('app-gray-mode');
+    const savedRememberTabState = localStorage.getItem('app-remember-tab-state');
+
+    if (savedCustomPrimaryColor) {
+      setCustomPrimaryColor(savedCustomPrimaryColor);
+    } else if (savedPrimaryColor && isPrimaryColor(savedPrimaryColor)) {
+      setPrimaryColor(savedPrimaryColor);
+    }
+    if (savedSidebarTheme) setSidebarTheme(savedSidebarTheme);
+    if (savedLayoutMode) setLayoutMode(savedLayoutMode);
+    if (savedPageAnimation && PAGE_ANIMATION_VALUES.has(savedPageAnimation)) {
+      setPageAnimation(savedPageAnimation);
+    }
+    if (savedGrayMode) setGrayMode(savedGrayMode === 'true');
+    rememberTabState.value = savedRememberTabState !== 'false';
+  };
+
+  return {
+    // State
+    primaryColor,
+    customPrimaryColor,
+    primaryColorHex,
+    sidebarTheme,
+    layoutMode,
+    pageAnimation,
+    grayMode,
+    rememberTabState,
+    // Actions
+    setPrimaryColor,
+    setCustomPrimaryColor,
+    setSidebarTheme,
+    setLayoutMode,
+    setPageAnimation,
+    setGrayMode,
+    setRememberTabState,
+    resetSettings,
+    initSettings,
+  };
+});
diff --git a/antdv-next-admin/src/stores/tabs.ts b/antdv-next-admin/src/stores/tabs.ts
new file mode 100644
index 0000000..f2f441a
--- /dev/null
+++ b/antdv-next-admin/src/stores/tabs.ts
@@ -0,0 +1,349 @@
+import type { Tab } from "@/types/layout";
+import type { AppRouteRecordRaw } from "@/types/router";
+import type { RouteLocationNormalized } from "vue-router";
+
+import { defineStore } from "pinia";
+import { ref, computed, watch } from "vue";
+
+import router from "@/router";
+
+import { useSettingsStore } from "./settings";
+
+const TABS_STORAGE_KEY = "app-tabs-state";
+
+export const useTabsStore = defineStore("tabs", () => {
+  // State
+  const tabs = ref<Tab[]>([]);
+  const activeTabPath = ref<string>("");
+  const refreshingRoutes = ref<string[]>([]);
+  const isRestored = ref(false);
+
+  const isFixedTab = (tab: Tab) => Boolean(tab.affix || tab.pinned);
+  const updateTabClosable = (tab: Tab) => {
+    tab.closable = !isFixedTab(tab);
+  };
+
+  const ensureActiveTab = (fallbackPath?: string) => {
+    const activeExists = tabs.value.some(
+      (tab) => tab.path === activeTabPath.value,
+    );
+    if (activeExists) return;
+
+    if (fallbackPath) {
+      const fallbackTab = tabs.value.find((tab) => tab.path === fallbackPath);
+      if (fallbackTab) {
+        activeTabPath.value = fallbackTab.path;
+        return;
+      }
+    }
+
+    activeTabPath.value = tabs.value[0]?.path || "";
+  };
+
+  const resolveRoutePath = (path: string, basePath = ""): string => {
+    if (!path) {
+      return basePath || "/";
+    }
+
+    if (path.startsWith("/")) {
+      return path;
+    }
+
+    const normalizedBase = basePath === "/" ? "" : basePath.replace(/\/$/, "");
+    const resolved = `${normalizedBase}/${path}`.replace(/\/+/g, "/");
+    return resolved.startsWith("/") ? resolved : `/${resolved}`;
+  };
+
+  // Getters
+  const cachedTabs = computed(() => {
+    return tabs.value
+      .filter((tab) => tab.name && !refreshingRoutes.value.includes(tab.name))
+      .map((tab) => tab.name);
+  });
+
+  const activeTab = computed(() => {
+    return tabs.value.find((tab) => tab.path === activeTabPath.value);
+  });
+
+  // Actions
+  const addTab = (route: RouteLocationNormalized) => {
+    const { path, fullPath, name, meta, query, params } = route;
+    const routeName = String(name || path);
+    const routeTitle = meta?.title ? String(meta.title) : routeName;
+    const routeIcon = meta?.icon ? String(meta.icon) : undefined;
+    const isAffix = Boolean(meta?.affix);
+
+    // Skip if hidden
+    if (meta?.hidden) return;
+
+    // Check if tab already exists
+    const existingTab = tabs.value.find((tab) => tab.path === path);
+    if (existingTab) {
+      existingTab.name = routeName;
+      existingTab.title = routeTitle;
+      existingTab.icon = routeIcon;
+      existingTab.fullPath = fullPath;
+      existingTab.query = query as Record<string, unknown>;
+      existingTab.params = params as Record<string, unknown>;
+      existingTab.affix = isAffix;
+      if (isAffix) {
+        existingTab.pinned = false;
+      }
+      updateTabClosable(existingTab);
+      activeTabPath.value = path;
+      return;
+    }
+
+    // Create new tab
+    const newTab: Tab = {
+      id: fullPath,
+      name: routeName,
+      title: routeTitle,
+      icon: routeIcon,
+      path,
+      fullPath,
+      query: query as Record<string, unknown>,
+      params: params as Record<string, unknown>,
+      closable: !isAffix,
+      pinned: false,
+      affix: isAffix,
+    };
+
+    tabs.value.push(newTab);
+    activeTabPath.value = path;
+  };
+
+  const closeTab = (path: string) => {
+    const index = tabs.value.findIndex((tab) => tab.path === path);
+    if (index === -1) return;
+
+    const tab = tabs.value[index];
+    // Cannot close fixed tabs
+    if (isFixedTab(tab)) return;
+
+    tabs.value.splice(index, 1);
+
+    // If closing active tab, activate adjacent tab
+    if (activeTabPath.value === path) {
+      const nextTab = tabs.value[index] || tabs.value[index - 1];
+      activeTabPath.value = nextTab?.path || "";
+    }
+
+    ensureActiveTab();
+  };
+
+  const closeOtherTabs = (path: string) => {
+    tabs.value = tabs.value.filter(
+      (tab) => tab.path === path || isFixedTab(tab),
+    );
+    activeTabPath.value = path;
+    ensureActiveTab(path);
+  };
+
+  const closeAllTabs = () => {
+    tabs.value = tabs.value.filter((tab) => isFixedTab(tab));
+    ensureActiveTab();
+  };
+
+  const closeLeftTabs = (path: string) => {
+    const index = tabs.value.findIndex((tab) => tab.path === path);
+    if (index === -1) return;
+
+    tabs.value = tabs.value.filter((tab, i) => i >= index || isFixedTab(tab));
+    ensureActiveTab(path);
+  };
+
+  const closeRightTabs = (path: string) => {
+    const index = tabs.value.findIndex((tab) => tab.path === path);
+    if (index === -1) return;
+
+    tabs.value = tabs.value.filter((tab, i) => i <= index || isFixedTab(tab));
+    ensureActiveTab(path);
+  };
+
+  const togglePinTab = (path: string) => {
+    const tab = tabs.value.find((item) => item.path === path);
+    if (!tab || tab.affix) return;
+
+    tab.pinned = !tab.pinned;
+    updateTabClosable(tab);
+  };
+
+  const toggleFavoriteTab = (path: string) => {
+    const tab = tabs.value.find((item) => item.path === path);
+    if (!tab) return;
+
+    tab.favorite = !tab.favorite;
+  };
+
+  const setActiveTab = (path: string) => {
+    activeTabPath.value = path;
+  };
+
+  const refreshTab = async (path: string) => {
+    const tab = tabs.value.find((t) => t.path === path);
+    if (tab && tab.name) {
+      // 1. Remove from cache to force component destruction
+      refreshingRoutes.value.push(tab.name);
+
+      // 2. Navigate to redirect page
+      // This will unmount the current component and mount the Redirect component
+      await router.replace("/redirect" + path);
+
+      // 3. Restore cache state
+      // The Redirect component will immediately navigate back to the original path.
+      // We use a small delay to ensure the unmount/remount cycle completes.
+      setTimeout(() => {
+        const index = refreshingRoutes.value.indexOf(tab.name);
+        if (index > -1) {
+          refreshingRoutes.value.splice(index, 1);
+        }
+      }, 300);
+    }
+  };
+
+  // Initialize affix tabs
+  const initAffixTabs = (routes: AppRouteRecordRaw[]) => {
+    const affixTabs: Tab[] = [];
+
+    const findAffixRoutes = (
+      routes: AppRouteRecordRaw[],
+      basePath = "",
+    ) => {
+      routes.forEach((route) => {
+        const routePath = route.path ? String(route.path) : "";
+        const fullPath = resolveRoutePath(routePath, basePath);
+        const meta = route.meta;
+
+        if (meta?.affix && routePath) {
+          const routeName = String(route.name || routePath);
+          const routeTitle = meta?.title || routeName;
+          affixTabs.push({
+            id: fullPath,
+            name: routeName,
+            title: routeTitle,
+            icon: meta?.icon,
+            path: fullPath,
+            fullPath,
+            closable: false,
+            pinned: false,
+            affix: true,
+          });
+        }
+
+        if (route.children) {
+          findAffixRoutes(
+            route.children,
+            fullPath,
+          );
+        }
+      });
+    };
+
+    findAffixRoutes(routes);
+    tabs.value = affixTabs;
+    if (affixTabs.length > 0) {
+      activeTabPath.value = affixTabs[0].path;
+    }
+  };
+
+  // Save tabs state to localStorage
+  const saveTabsState = () => {
+    const settingsStore = useSettingsStore();
+    if (!settingsStore.rememberTabState) return;
+
+    const state = {
+      tabs: tabs.value,
+      activeTabPath: activeTabPath.value,
+    };
+    localStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(state));
+  };
+
+  // Restore tabs state from localStorage
+  const restoreTabsState = (routes: AppRouteRecordRaw[]) => {
+    const settingsStore = useSettingsStore();
+    if (!settingsStore.rememberTabState || isRestored.value) return;
+
+    const savedState = localStorage.getItem(TABS_STORAGE_KEY);
+    if (!savedState) return;
+
+    try {
+      const state = JSON.parse(savedState);
+      if (state.tabs && Array.isArray(state.tabs) && state.tabs.length > 0) {
+        // Filter out tabs that no longer exist in routes
+        const validPaths = new Set<string>();
+        const collectPaths = (
+          routeList: AppRouteRecordRaw[],
+          basePath = "",
+        ) => {
+          routeList.forEach((route) => {
+            const routePath = route.path ? String(route.path) : "";
+            const fullPath = resolveRoutePath(routePath, basePath);
+            validPaths.add(fullPath);
+            if (route.children) {
+              collectPaths(
+                route.children,
+                fullPath,
+              );
+            }
+          });
+        };
+        collectPaths(routes);
+
+        // Restore tabs that still exist
+        const restoredTabs = state.tabs.filter((tab: Tab) =>
+          validPaths.has(tab.path),
+        );
+        if (restoredTabs.length > 0) {
+          tabs.value = restoredTabs;
+          // Restore active tab if it exists
+          if (state.activeTabPath && validPaths.has(state.activeTabPath)) {
+            activeTabPath.value = state.activeTabPath;
+          } else {
+            activeTabPath.value = restoredTabs[0].path;
+          }
+          isRestored.value = true;
+        }
+      }
+    } catch {
+      // Invalid saved state, ignore
+    }
+  };
+
+  // Clear saved tabs state
+  const clearTabsState = () => {
+    localStorage.removeItem(TABS_STORAGE_KEY);
+  };
+
+  // Watch for changes and auto-save
+  watch(
+    () => ({ tabs: tabs.value, activeTabPath: activeTabPath.value }),
+    () => {
+      saveTabsState();
+    },
+    { deep: true },
+  );
+
+  return {
+    // State
+    tabs,
+    activeTabPath,
+    // Getters
+    cachedTabs,
+    activeTab,
+    // Actions
+    addTab,
+    closeTab,
+    closeOtherTabs,
+    closeAllTabs,
+    closeLeftTabs,
+    closeRightTabs,
+    togglePinTab,
+    toggleFavoriteTab,
+    setActiveTab,
+    refreshTab,
+    initAffixTabs,
+    restoreTabsState,
+    clearTabsState,
+  };
+});
diff --git a/antdv-next-admin/src/stores/theme.ts b/antdv-next-admin/src/stores/theme.ts
new file mode 100644
index 0000000..9232f56
--- /dev/null
+++ b/antdv-next-admin/src/stores/theme.ts
@@ -0,0 +1,193 @@
+import type { ThemeMode } from '@/types/layout';
+
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+const THEME_TRANSITION_CLASS = 'theme-transition';
+const THEME_VIEW_TRANSITION_CLASS = 'theme-view-transition';
+const THEME_TRANSITION_DURATION_MS = 520;
+
+interface ThemeTransitionOrigin {
+  x: number;
+  y: number;
+}
+
+interface ThemeUpdateOptions {
+  withTransition?: boolean;
+  origin?: ThemeTransitionOrigin;
+}
+
+interface ViewTransitionLike {
+  ready: Promise<void>;
+  finished: Promise<void>;
+}
+
+type StartViewTransition = (callback: () => void) => ViewTransitionLike;
+
+export const useThemeStore = defineStore('theme', () => {
+  // State
+  const mode = ref<ThemeMode>('system');
+  const systemPrefersDark = ref(false);
+  let transitionTimer: number | null = null;
+
+  // Getters
+  const isDark = computed(() => {
+    if (mode.value === 'system') {
+      return systemPrefersDark.value;
+    }
+    return mode.value === 'dark';
+  });
+
+  // Actions
+  const startThemeTransition = () => {
+    const root = document.documentElement;
+    root.classList.add(THEME_TRANSITION_CLASS);
+
+    // Force reflow to ensure transition class is applied before theme variables change.
+    void root.offsetWidth;
+
+    if (transitionTimer !== null) {
+      window.clearTimeout(transitionTimer);
+    }
+
+    transitionTimer = window.setTimeout(() => {
+      root.classList.remove(THEME_TRANSITION_CLASS);
+      transitionTimer = null;
+    }, THEME_TRANSITION_DURATION_MS + 40);
+  };
+
+  const getStartViewTransition = (): StartViewTransition | null => {
+    const documentWithTransition = document as Document & {
+      startViewTransition?: StartViewTransition;
+    };
+    if (typeof documentWithTransition.startViewTransition !== 'function') {
+      return null;
+    }
+    return documentWithTransition.startViewTransition.bind(documentWithTransition);
+  };
+
+  const supportsCircularRevealTransition = () => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return false;
+    }
+    return !!getStartViewTransition();
+  };
+
+  const runCircularRevealTransition = (
+    origin: ThemeTransitionOrigin,
+    applyTheme: () => void,
+  ): boolean => {
+    const startViewTransition = getStartViewTransition();
+    if (!startViewTransition) {
+      return false;
+    }
+
+    const root = document.documentElement;
+    const x = Math.max(0, Math.min(origin.x, window.innerWidth));
+    const y = Math.max(0, Math.min(origin.y, window.innerHeight));
+    const endRadius = Math.hypot(
+      Math.max(x, window.innerWidth - x),
+      Math.max(y, window.innerHeight - y),
+    );
+
+    root.classList.add(THEME_VIEW_TRANSITION_CLASS);
+    root.style.setProperty('--theme-transition-x', `${x}px`);
+    root.style.setProperty('--theme-transition-y', `${y}px`);
+    root.style.setProperty('--theme-transition-radius', `${endRadius}px`);
+
+    const cleanup = () => {
+      root.classList.remove(THEME_VIEW_TRANSITION_CLASS);
+      root.style.removeProperty('--theme-transition-x');
+      root.style.removeProperty('--theme-transition-y');
+      root.style.removeProperty('--theme-transition-radius');
+    };
+
+    try {
+      const transition = startViewTransition(() => {
+        applyTheme();
+      });
+      transition.finished.finally(cleanup);
+    } catch (error) {
+      cleanup();
+      applyTheme();
+      return false;
+    }
+
+    return true;
+  };
+
+  const applyTheme = () => {
+    const root = document.documentElement;
+    root.classList.toggle('dark', isDark.value);
+    localStorage.setItem('theme-mode', mode.value);
+  };
+
+  const updateTheme = (options: ThemeUpdateOptions = {}) => {
+    const { withTransition = false, origin } = options;
+    if (!withTransition) {
+      applyTheme();
+      return;
+    }
+
+    if (origin && supportsCircularRevealTransition()) {
+      const success = runCircularRevealTransition(origin, applyTheme);
+      if (success) {
+        return;
+      }
+    }
+
+    startThemeTransition();
+    applyTheme();
+  };
+
+  const setTheme = (newMode: ThemeMode, options: ThemeUpdateOptions = {}) => {
+    if (mode.value === newMode) {
+      return;
+    }
+
+    mode.value = newMode;
+    updateTheme({ withTransition: true, ...options });
+  };
+
+  const toggleTheme = (options: ThemeUpdateOptions = {}) => {
+    const modes: ThemeMode[] = ['light', 'dark', 'system'];
+    const currentIndex = modes.indexOf(mode.value);
+    const nextIndex = (currentIndex + 1) % modes.length;
+    setTheme(modes[nextIndex], options);
+  };
+
+  const initTheme = () => {
+    // Get saved theme mode
+    const savedMode = localStorage.getItem('theme-mode') as ThemeMode;
+    if (savedMode && ['light', 'dark', 'system'].includes(savedMode)) {
+      mode.value = savedMode;
+    }
+
+    // Listen to system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    systemPrefersDark.value = mediaQuery.matches;
+
+    mediaQuery.addEventListener('change', (e) => {
+      systemPrefersDark.value = e.matches;
+      if (mode.value === 'system') {
+        updateTheme({ withTransition: true });
+      }
+    });
+
+    // Apply initial theme
+    updateTheme({ withTransition: false });
+  };
+
+  return {
+    // State
+    mode,
+    systemPrefersDark,
+    // Getters
+    isDark,
+    // Actions
+    setTheme,
+    toggleTheme,
+    updateTheme,
+    initTheme,
+  };
+});
diff --git a/antdv-next-admin/src/stores/watermark.ts b/antdv-next-admin/src/stores/watermark.ts
new file mode 100644
index 0000000..92d986e
--- /dev/null
+++ b/antdv-next-admin/src/stores/watermark.ts
@@ -0,0 +1,102 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+export const useWatermarkStore = defineStore('watermark', () => {
+  // State
+  const enabled = ref(false);
+  const content = ref('Antdv Next Admin');
+  const gap = ref<[number, number]>([100, 100]);
+  const rotate = ref(-22);
+  const fontSize = ref(16);
+  const opacity = ref(0.15);
+
+  // Computed
+  const watermarkProps = computed(() => {
+    if (!enabled.value) {
+      return { content: '' };
+    }
+    return {
+      content: content.value,
+      gap: gap.value,
+      rotate: rotate.value,
+      font: {
+        fontSize: fontSize.value,
+        color: `rgba(0, 0, 0, ${opacity.value})`,
+      },
+    };
+  });
+
+  // Actions
+  const setEnabled = (val: boolean) => {
+    enabled.value = val;
+    localStorage.setItem('app-watermark-enabled', val.toString());
+  };
+
+  const setContent = (val: string) => {
+    content.value = val;
+    localStorage.setItem('app-watermark-content', val);
+  };
+
+  const setGap = (val: [number, number]) => {
+    gap.value = val;
+    localStorage.setItem('app-watermark-gap', JSON.stringify(val));
+  };
+
+  const setRotate = (val: number) => {
+    rotate.value = val;
+    localStorage.setItem('app-watermark-rotate', val.toString());
+  };
+
+  const setFontSize = (val: number) => {
+    fontSize.value = val;
+    localStorage.setItem('app-watermark-fontSize', val.toString());
+  };
+
+  const setOpacity = (val: number) => {
+    opacity.value = val;
+    localStorage.setItem('app-watermark-opacity', val.toString());
+  };
+
+  const initWatermark = () => {
+    const savedEnabled = localStorage.getItem('app-watermark-enabled');
+    const savedContent = localStorage.getItem('app-watermark-content');
+    const savedGap = localStorage.getItem('app-watermark-gap');
+    const savedRotate = localStorage.getItem('app-watermark-rotate');
+    const savedFontSize = localStorage.getItem('app-watermark-fontSize');
+    const savedOpacity = localStorage.getItem('app-watermark-opacity');
+
+    if (savedEnabled) setEnabled(savedEnabled === 'true');
+    if (savedContent) setContent(savedContent);
+    if (savedGap) {
+      try {
+        const parsed = JSON.parse(savedGap);
+        if (Array.isArray(parsed) && parsed.length === 2) setGap(parsed as [number, number]);
+      } catch {
+        /* ignore */
+      }
+    }
+    if (savedRotate) setRotate(Number(savedRotate));
+    if (savedFontSize) setFontSize(Number(savedFontSize));
+    if (savedOpacity) setOpacity(Number(savedOpacity));
+  };
+
+  return {
+    // State
+    enabled,
+    content,
+    gap,
+    rotate,
+    fontSize,
+    opacity,
+    // Computed
+    watermarkProps,
+    // Actions
+    setEnabled,
+    setContent,
+    setGap,
+    setRotate,
+    setFontSize,
+    setOpacity,
+    initWatermark,
+  };
+});
diff --git a/antdv-next-admin/src/types/CLAUDE.md b/antdv-next-admin/src/types/CLAUDE.md
new file mode 100644
index 0000000..d36f7e5
--- /dev/null
+++ b/antdv-next-admin/src/types/CLAUDE.md
@@ -0,0 +1,12 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 11, 2026
+
+| ID   | Time    | T   | Title                                     | Read |
+| ---- | ------- | --- | ----------------------------------------- | ---- |
+| #346 | 5:40 PM | 🔵  | Pro Component TypeScript Type Definitions | ~505 |
+
+</claude-mem-context>
diff --git a/antdv-next-admin/src/types/api.ts b/antdv-next-admin/src/types/api.ts
new file mode 100644
index 0000000..9e8fd3a
--- /dev/null
+++ b/antdv-next-admin/src/types/api.ts
@@ -0,0 +1,29 @@
+// API Response Types
+
+export interface ApiResponse<T = unknown> {
+  code: number;
+  message: string;
+  data: T;
+  success: boolean;
+}
+
+export interface PageParams {
+  current: number;
+  pageSize: number;
+  [key: string]: unknown;
+}
+
+export interface PageResult<T> {
+  list: T[];
+  total: number;
+  current: number;
+  pageSize: number;
+}
+
+export interface ListParams extends PageParams {
+  keyword?: string;
+  startDate?: string;
+  endDate?: string;
+  status?: string | number;
+  [key: string]: unknown;
+}
diff --git a/antdv-next-admin/src/types/auth.ts b/antdv-next-admin/src/types/auth.ts
new file mode 100644
index 0000000..46c5c26
--- /dev/null
+++ b/antdv-next-admin/src/types/auth.ts
@@ -0,0 +1,58 @@
+// Authentication Types
+
+export interface LoginParams {
+  username: string;
+  password: string;
+  remember?: boolean;
+}
+
+export interface LoginResult {
+  token: string;
+  refreshToken?: string;
+  expiresIn?: number;
+}
+
+export interface User {
+  id: string;
+  username: string;
+  email: string;
+  realName: string;
+  avatar: string;
+  phone: string;
+  gender?: 'male' | 'female';
+  birthDate?: string;
+  bio?: string;
+  status: 'active' | 'inactive';
+  createdAt: string;
+  updatedAt: string;
+  roles: Role[];
+  permissions: Permission[];
+}
+
+export interface Role {
+  id: string;
+  name: string;
+  code: string;
+  description: string;
+  permissions: Permission[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Permission {
+  id: string;
+  name: string;
+  code: string;
+  description: string;
+  resource: string;
+  action: string;
+  type: 'menu' | 'button' | 'api';
+  parentId?: string;
+  path?: string;
+  component?: string;
+  icon?: string;
+  sort?: number;
+  status?: 'active' | 'inactive';
+  visible?: boolean;
+  children?: Permission[];
+}
diff --git a/antdv-next-admin/src/types/config.ts b/antdv-next-admin/src/types/config.ts
new file mode 100644
index 0000000..c9e4a6c
--- /dev/null
+++ b/antdv-next-admin/src/types/config.ts
@@ -0,0 +1,35 @@
+/**
+ * 系统配置项
+ */
+export interface SysConfig {
+  id: string;
+  /** 配置名称 */
+  name: string;
+  /** 配置键 */
+  key: string;
+  /** 配置值 */
+  value: string;
+  /** 值类型 */
+  valueType: 'string' | 'number' | 'boolean' | 'json';
+  /** 分组 */
+  group: string;
+  /** 描述 */
+  description?: string;
+  /** 是否内置（内置不可删除） */
+  builtIn: boolean;
+  /** 排序 */
+  sort: number;
+  createTime: string;
+  updateTime: string;
+}
+
+/**
+ * 系统配置查询参数
+ */
+export interface SysConfigQueryParams {
+  name?: string;
+  key?: string;
+  group?: string;
+  page?: number;
+  pageSize?: number;
+}
diff --git a/antdv-next-admin/src/types/dept.ts b/antdv-next-admin/src/types/dept.ts
new file mode 100644
index 0000000..d29f7af
--- /dev/null
+++ b/antdv-next-admin/src/types/dept.ts
@@ -0,0 +1,34 @@
+/**
+ * 部门/组织架构
+ */
+export interface Department {
+  id: string;
+  /** 部门名称 */
+  name: string;
+  /** 父级ID */
+  parentId: string | null;
+  /** 负责人 */
+  leader?: string;
+  /** 联系电话 */
+  phone?: string;
+  /** 邮箱 */
+  email?: string;
+  /** 排序 */
+  sort: number;
+  /** 状态 */
+  status: 'enabled' | 'disabled';
+  /** 备注 */
+  remark?: string;
+  createTime: string;
+  updateTime: string;
+  /** 子部门 */
+  children?: Department[];
+}
+
+/**
+ * 部门查询参数
+ */
+export interface DeptQueryParams {
+  name?: string;
+  status?: 'enabled' | 'disabled';
+}
diff --git a/antdv-next-admin/src/types/dict.ts b/antdv-next-admin/src/types/dict.ts
new file mode 100644
index 0000000..9bd81d0
--- /dev/null
+++ b/antdv-next-admin/src/types/dict.ts
@@ -0,0 +1,57 @@
+/**
+ * 字典类型
+ */
+export interface DictType {
+  id: string;
+  name: string;
+  code: string;
+  description?: string;
+  status: 'enabled' | 'disabled';
+  createTime: string;
+  updateTime: string;
+}
+
+/**
+ * 字典数据
+ */
+export interface DictData {
+  id: string;
+  typeCode: string;
+  label: string;
+  value: string;
+  sort: number;
+  status: 'enabled' | 'disabled';
+  remark?: string;
+  createTime: string;
+  updateTime: string;
+}
+
+/**
+ * 字典数据分组（按类型分组）
+ */
+export interface DictGroup {
+  [typeCode: string]: DictData[];
+}
+
+/**
+ * 字典查询参数
+ */
+export interface DictQueryParams {
+  typeCode?: string;
+  label?: string;
+  value?: string;
+  status?: 'enabled' | 'disabled';
+  page?: number;
+  pageSize?: number;
+}
+
+/**
+ * 字典类型查询参数
+ */
+export interface DictTypeQueryParams {
+  name?: string;
+  code?: string;
+  status?: 'enabled' | 'disabled';
+  page?: number;
+  pageSize?: number;
+}
diff --git a/antdv-next-admin/src/types/file.ts b/antdv-next-admin/src/types/file.ts
new file mode 100644
index 0000000..0eebe0a
--- /dev/null
+++ b/antdv-next-admin/src/types/file.ts
@@ -0,0 +1,36 @@
+/**
+ * 系统文件
+ */
+export interface SysFile {
+  id: string;
+  /** 文件名 */
+  name: string;
+  /** 原始文件名 */
+  originalName: string;
+  /** 文件路径 */
+  path: string;
+  /** 文件大小（字节） */
+  size: number;
+  /** MIME 类型 */
+  mimeType: string;
+  /** 文件扩展名 */
+  ext: string;
+  /** 存储方式 */
+  storage: 'local' | 'oss' | 'cos';
+  /** 上传者 */
+  uploader: string;
+  /** 备注 */
+  remark?: string;
+  createTime: string;
+}
+
+/**
+ * 文件查询参数
+ */
+export interface SysFileQueryParams {
+  name?: string;
+  ext?: string;
+  storage?: string;
+  page?: number;
+  pageSize?: number;
+}
diff --git a/antdv-next-admin/src/types/layout.ts b/antdv-next-admin/src/types/layout.ts
new file mode 100644
index 0000000..83c8a04
--- /dev/null
+++ b/antdv-next-admin/src/types/layout.ts
@@ -0,0 +1,66 @@
+// Layout Types
+
+export interface Tab {
+  id: string;
+  // Route name, used by keep-alive include
+  name: string;
+  // i18n message key or plain title text for display
+  title?: string;
+  // Route meta icon key for tab display
+  icon?: string;
+  path: string;
+  fullPath: string;
+  query?: Record<string, unknown>;
+  params?: Record<string, unknown>;
+  closable: boolean;
+  // User pinned tab (cannot be closed by batch close actions)
+  pinned?: boolean;
+  affix?: boolean;
+  // User favorite tab
+  favorite?: boolean;
+}
+
+export type NotificationCategory =
+  | "system"
+  | "message"
+  | "security"
+  | "task"
+  | "error";
+
+export interface Notification {
+  id: string;
+  title: string;
+  message: string;
+  type: "success" | "error" | "warning" | "info";
+  category?: NotificationCategory;
+  timestamp: number;
+  read: boolean;
+  avatar?: string;
+  link?: string;
+}
+
+export interface BreadcrumbItem {
+  label: string;
+  path?: string;
+  icon?: string;
+}
+
+export type ThemeMode = "light" | "dark" | "system";
+export type LayoutMode = "vertical" | "horizontal";
+export type SidebarTheme = "light" | "dark";
+export type PrimaryColor =
+  | "blue"
+  | "green"
+  | "purple"
+  | "red"
+  | "orange"
+  | "cyan";
+export type PageAnimation =
+  | "fade"
+  | "slide-left"
+  | "slide-right"
+  | "slide-up"
+  | "slide-down"
+  | "zoom"
+  | "zoom-big"
+  | "none";
diff --git a/antdv-next-admin/src/types/log.ts b/antdv-next-admin/src/types/log.ts
new file mode 100644
index 0000000..8629b79
--- /dev/null
+++ b/antdv-next-admin/src/types/log.ts
@@ -0,0 +1,73 @@
+/**
+ * 操作日志
+ */
+export interface OperationLog {
+  id: string;
+  /** 操作用户 */
+  username: string;
+  /** 操作模块 */
+  module: string;
+  /** 操作类型 */
+  action: 'login' | 'logout' | 'create' | 'update' | 'delete' | 'export' | 'import' | 'other';
+  /** 操作描述 */
+  description: string;
+  /** 请求方法 */
+  method: string;
+  /** 请求路径 */
+  url: string;
+  /** 请求IP */
+  ip: string;
+  /** 浏览器 */
+  browser: string;
+  /** 操作系统 */
+  os: string;
+  /** 操作状态 */
+  status: 'success' | 'fail';
+  /** 错误信息 */
+  errorMsg?: string;
+  /** 耗时(ms) */
+  duration: number;
+  /** 操作时间 */
+  createTime: string;
+}
+
+/**
+ * 登录日志
+ */
+export interface LoginLog {
+  id: string;
+  username: string;
+  ip: string;
+  browser: string;
+  os: string;
+  status: 'success' | 'fail';
+  message: string;
+  createTime: string;
+}
+
+/**
+ * 操作日志查询参数
+ */
+export interface OperationLogQueryParams {
+  username?: string;
+  module?: string;
+  action?: string;
+  status?: string;
+  startTime?: string;
+  endTime?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+/**
+ * 登录日志查询参数
+ */
+export interface LoginLogQueryParams {
+  username?: string;
+  ip?: string;
+  status?: string;
+  startTime?: string;
+  endTime?: string;
+  page?: number;
+  pageSize?: number;
+}
diff --git a/antdv-next-admin/src/types/pro.ts b/antdv-next-admin/src/types/pro.ts
new file mode 100644
index 0000000..795f2ec
--- /dev/null
+++ b/antdv-next-admin/src/types/pro.ts
@@ -0,0 +1,299 @@
+// Pro Component Types
+
+// ProTable Types
+export type ValueType =
+  | 'text'
+  | 'date'
+  | 'dateTime'
+  | 'dateRange'
+  | 'time'
+  | 'tag'
+  | 'badge'
+  | 'money'
+  | 'percent'
+  | 'avatar'
+  | 'image'
+  | 'link'
+  | 'progress';
+
+export type SearchType =
+  | 'input'
+  | 'select'
+  | 'dateRange'
+  | 'datePicker'
+  | 'number'
+  | 'checkbox'
+  | 'radio';
+
+export type HeaderFilterMode = 'client' | 'server' | 'hybrid';
+
+export type ProTableHeaderFilterType = 'keyword' | 'select';
+
+export interface ProTableHeaderFilterOption {
+  label: string;
+  value: string | number | boolean;
+}
+
+export interface ProTableHeaderFilter {
+  type: ProTableHeaderFilterType;
+  mode?: HeaderFilterMode;
+  icon?: 'search' | 'filter';
+  paramKey?: string;
+  placeholder?: string;
+  multiple?: boolean;
+  options?: ProTableHeaderFilterOption[];
+  caseSensitive?: boolean;
+  matchAllKeywords?: boolean;
+  clientFilter?: (filterValue: unknown, record: Record<string, unknown>, column: ProTableColumn) => boolean;
+  transformRequestValue?: (value: unknown, selectedValues: unknown[]) => unknown;
+}
+
+export interface ProTableHeaderFilterConfig {
+  defaultMode?: HeaderFilterMode;
+  requestPayload?: 'flat' | 'nested';
+  nestedKey?: string;
+  resetPageOnFilterChange?: boolean;
+}
+
+export interface ProTableColumn {
+  title: string;
+  dataIndex: string;
+  key?: string;
+  width?: number | string;
+  minWidth?: number | string;
+  fixed?: 'left' | 'right';
+  align?: 'left' | 'center' | 'right';
+  ellipsis?: boolean;
+  resizable?: boolean;
+  hideInTable?: boolean;
+
+  // Value rendering
+  valueType?: ValueType;
+  valueEnum?: Record<string, { text: string; status?: string; color?: string }>;
+  valueTypeProps?: Record<string, unknown>;
+  copyable?: boolean;
+
+  // Unified options: auto-derives searchOptions and valueEnum when set
+  options?: Array<{
+    label: string;
+    value: string | number | boolean;
+    color?: string;
+    status?: string;
+    disabled?: boolean;
+  }>;
+
+  // Search
+  search?: boolean;
+  searchType?: SearchType;
+  searchOptions?: Array<{ label: string; value: string | number | boolean }>;
+  searchProps?: Record<string, unknown>;
+
+  // Header filter
+  headerFilter?: ProTableHeaderFilter;
+
+  // Sorting
+  sorter?: boolean | ((a: Record<string, unknown>, b: Record<string, unknown>) => number);
+  defaultSortOrder?: 'ascend' | 'descend';
+
+  // Native table filter compatibility
+  filterDropdown?: unknown;
+  filterDropdownProps?: Record<string, unknown>;
+  filterIcon?: unknown;
+  filters?: Array<{ text: string; value: string | number | boolean }>;
+  filterMultiple?: boolean;
+  filteredValue?: (string | number | boolean)[] | null;
+  onFilter?: (value: unknown, record: Record<string, unknown>) => boolean;
+  sortDirections?: Array<'ascend' | 'descend'>;
+  customFilterDropdown?: boolean;
+
+  // Actions column
+  actions?: ProTableAction[];
+
+  // Custom render
+  render?: (text: unknown, record: Record<string, unknown>, index: number) => unknown;
+}
+
+export interface ProTableAction {
+  label: string;
+  type?: 'link' | 'button' | 'dropdown';
+  icon?: unknown;
+  permission?: string;
+  danger?: boolean;
+  disabled?: (record: Record<string, unknown>) => boolean;
+  hidden?: (record: Record<string, unknown>) => boolean;
+  confirm?: string;
+  onClick?: (record: Record<string, unknown>) => void | Promise<void>;
+  items?: ProTableAction[];
+}
+
+export interface ProTableToolbar {
+  title?: string;
+  subTitle?: string;
+  actions?: Array<'!refresh' | '!density' | '!columnSetting' | 'refresh' | 'density' | 'columnSetting'>;
+}
+
+export interface ProTableSearch {
+  labelWidth?: number;
+  defaultCollapsed?: boolean;
+  collapsedRows?: number;
+  collapseRender?: boolean;
+}
+
+export interface ProTablePagination {
+  current?: number;
+  pageSize?: number;
+  total?: number;
+  showSizeChanger?: boolean;
+  showQuickJumper?: boolean;
+  showTotal?: boolean | ((total: number, range?: [number, number]) => string);
+  pageSizeOptions?: string[];
+}
+
+export interface ProTableRequest {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (params: any): Promise<{
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data: any[];
+    total?: number;
+    success: boolean;
+  }>;
+}
+
+// ProForm Types
+export type FormItemType =
+  | 'input'
+  | 'password'
+  | 'textarea'
+  | 'number'
+  | 'select'
+  | 'radio'
+  | 'checkbox'
+  | 'switch'
+  | 'datePicker'
+  | 'timePicker'
+  | 'dateRange'
+  | 'timeRange'
+  | 'upload'
+  | 'imageUpload'
+  | 'avatarUpload'
+  | 'slider'
+  | 'rate'
+  | 'colorPicker'
+  | 'cascader'
+  | 'treeSelect'
+  | 'custom';
+
+export interface ProFormItem {
+  name: string;
+  label: string;
+  type: FormItemType;
+  required?: boolean;
+  rules?: unknown[];
+  initialValue?: unknown;
+  dependencies?: string[];
+  tooltip?: string;
+  placeholder?: string;
+
+  // Layout
+  colSpan?: number;
+  hidden?: boolean | ((values: Record<string, unknown>) => boolean);
+
+  // Options (for select, radio, checkbox, etc.) — supports function form for dynamic options
+  options?:
+    | Array<{ label: string; value: string | number | boolean; disabled?: boolean }>
+    | ((values: Record<string, unknown>) => Array<{ label: string; value: string | number | boolean; disabled?: boolean }>);
+
+  // Props to pass to the component
+  props?: Record<string, unknown>;
+
+  // Value prop name (for components like Switch that use 'checked')
+  valuePropName?: string;
+
+  // Custom render
+  render?: (form: unknown) => unknown;
+
+  // Request for dynamic options
+  request?: () => Promise<Array<{ label: string; value: string | number | boolean }>>;
+}
+
+export interface ProFormLayout {
+  labelCol?: { span: number };
+  wrapperCol?: { span: number };
+  layout?: 'horizontal' | 'vertical' | 'inline';
+}
+
+export interface ProFormGrid {
+  gutter?: number;
+  cols?: number;
+}
+
+// ProDescriptions Types
+export interface ProDescriptionItem {
+  label: string;
+  dataIndex: string;
+  valueType?: ValueType;
+  valueEnum?: Record<string, { text: string; status?: string; color?: string }>;
+  valueTypeProps?: Record<string, unknown>;
+  span?: number;
+  render?: (value: unknown, record: Record<string, unknown>) => unknown;
+  copyable?: boolean;
+}
+
+// ProStatus Types
+export type ProStatusMode = 'dot' | 'tag' | 'badge';
+
+export interface ProStatusMap {
+  [key: string]: {
+    text: string;
+    color: string;
+    icon?: unknown;
+  };
+}
+
+// ProChart Types
+export type ProChartType = 'line' | 'bar' | 'pie' | 'donut' | 'area' | 'radar';
+
+export interface ProChartProps {
+  type: ProChartType;
+  data: Record<string, unknown>[];
+  height?: number | string;
+  title?: string;
+  subTitle?: string;
+  loading?: boolean;
+  option?: Record<string, unknown>;
+}
+
+// ProUpload Types
+export type ProUploadMode = 'button' | 'dragger' | 'image' | 'avatar';
+
+// ProStatCard Types
+export type ProStatCardTone = 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'cyan';
+
+export interface ProStatCardProps {
+  label: string;
+  value: string | number;
+  trend?: string;
+  trendDirection?: 'up' | 'down';
+  icon?: unknown;
+  tone?: ProStatCardTone;
+}
+
+// ProStepForm Types
+export interface ProStepFormStep {
+  title: string;
+  description?: string;
+  icon?: unknown;
+}
+
+// ProSplitLayout Types
+export interface ProSplitLayoutProps {
+  sideWidth?: number | string;
+  sidePosition?: 'left' | 'right';
+  gap?: number | string;
+}
+
+// ProDetail Types
+export interface ProDetailTab {
+  key: string;
+  label: string;
+}
diff --git a/antdv-next-admin/src/types/router.ts b/antdv-next-admin/src/types/router.ts
new file mode 100644
index 0000000..cdc928d
--- /dev/null
+++ b/antdv-next-admin/src/types/router.ts
@@ -0,0 +1,47 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+// Route Meta Custom Types
+export interface RouteMeta {
+  title: string;
+  icon?: string;
+  requiresAuth?: boolean;
+  requiredPermissions?: string[];
+  requiredRoles?: string[];
+  keepAlive?: boolean;
+  hidden?: boolean;
+  order?: number;
+  affix?: boolean;
+  badge?: string | number;
+  activeMenu?: string;
+  externalLink?: string;
+}
+
+export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta' | 'children'> {
+  meta?: RouteMeta;
+  children?: AppRouteRecordRaw[];
+}
+
+// Menu Item Types
+export interface MenuItem {
+  id: string;
+  label: string;
+  icon?: string;
+  path?: string;
+  badge?: string | number;
+  requiredPermissions?: string[];
+  requiredRoles?: string[];
+  hidden?: boolean;
+  children?: MenuItem[];
+  meta?: RouteMeta;
+}
+
+// Backend Route Config (from API)
+export interface RouteConfig {
+  id: string;
+  name: string;
+  path: string;
+  component: string;
+  redirect?: string;
+  meta?: RouteMeta;
+  children?: RouteConfig[];
+}
diff --git a/antdv-next-admin/src/utils/CLAUDE.md b/antdv-next-admin/src/utils/CLAUDE.md
new file mode 100644
index 0000000..6614dac
--- /dev/null
+++ b/antdv-next-admin/src/utils/CLAUDE.md
@@ -0,0 +1,12 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 11, 2026
+
+| ID   | Time    | T   | Title                                                    | Read |
+| ---- | ------- | --- | -------------------------------------------------------- | ---- |
+| #348 | 5:41 PM | 🔵  | Axios HTTP Client with Authentication and Error Handling | ~443 |
+
+</claude-mem-context>
diff --git a/antdv-next-admin/src/utils/dict.ts b/antdv-next-admin/src/utils/dict.ts
new file mode 100644
index 0000000..2894fa3
--- /dev/null
+++ b/antdv-next-admin/src/utils/dict.ts
@@ -0,0 +1,60 @@
+import type { DictData } from "@/types/dict";
+
+import { useDictStore } from "@/stores/dict";
+
+class DictUtil {
+  private getStore() {
+    return useDictStore();
+  }
+
+  getByType(typeCode: string): DictData[] {
+    return this.getStore().getDictByType(typeCode);
+  }
+
+  getLabel(typeCode: string, value: string): string {
+    return this.getStore().getDictLabel(typeCode, value);
+  }
+
+  getValue(typeCode: string, label: string): string {
+    return this.getStore().getDictValue(typeCode, label);
+  }
+
+  getOptions(typeCode: string) {
+    return this.getStore().getDictOptions(typeCode);
+  }
+
+  getLabels(typeCode: string, values: string[]): string[] {
+    return values.map((value) => this.getLabel(typeCode, value));
+  }
+
+  getValues(typeCode: string, labels: string[]): string[] {
+    return labels.map((label) => this.getValue(typeCode, label));
+  }
+
+  hasValue(typeCode: string, value: string): boolean {
+    const dict = this.getByType(typeCode);
+    return dict.some((item) => item.value === value);
+  }
+
+  hasLabel(typeCode: string, label: string): boolean {
+    const dict = this.getByType(typeCode);
+    return dict.some((item) => item.label === label);
+  }
+
+  getMap(typeCode: string): Record<string, DictData> {
+    const dict = this.getByType(typeCode);
+    const map: Record<string, DictData> = {};
+    dict.forEach((item) => {
+      map[item.value] = item;
+    });
+    return map;
+  }
+
+  refresh() {
+    return this.getStore().refreshDictData();
+  }
+}
+
+export const dict = new DictUtil();
+
+export default DictUtil;
diff --git a/antdv-next-admin/src/utils/export.ts b/antdv-next-admin/src/utils/export.ts
new file mode 100644
index 0000000..622e43a
--- /dev/null
+++ b/antdv-next-admin/src/utils/export.ts
@@ -0,0 +1,107 @@
+/**
+ * Excel 导入导出工具
+ * 基于原生实现，不依赖第三方库，生成标准 CSV 格式
+ */
+
+export interface ExportColumn {
+  title: string;
+  dataIndex: string;
+  /** 自定义格式化 */
+  render?: (value: unknown, record: unknown) => string;
+}
+
+/**
+ * 导出数据为 CSV 文件
+ */
+export function exportToCSV(
+  columns: ExportColumn[],
+  data: unknown[],
+  filename: string = "export",
+) {
+  const BOM = "\uFEFF";
+  const header = columns.map((col) => `"${col.title}"`).join(",");
+  const rows = data.map((record) =>
+    columns
+      .map((col) => {
+        const recordObj = record as Record<string, unknown>;
+        const value = col.render
+          ? col.render(recordObj[col.dataIndex], record)
+          : (recordObj[col.dataIndex] ?? "");
+        return `"${String(value).replace(/"/g, '""')}"`;
+      })
+      .join(","),
+  );
+
+  const csv = BOM + [header, ...rows].join("\n");
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  downloadBlob(blob, `${filename}.csv`);
+}
+
+/**
+ * 解析 CSV 文件为数据数组
+ */
+export function parseCSV(file: File): Promise<string[][]> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const text = (e.target?.result ?? "").toString().replace(/^\uFEFF/, "");
+        const rows = text.split("\n").filter((row) => row.trim());
+        const result = rows.map((row) => {
+          const cells: string[] = [];
+          let current = "";
+          let inQuotes = false;
+          for (let i = 0; i < row.length; i++) {
+            const char = row[i];
+            if (inQuotes) {
+              if (char === '"' && row[i + 1] === '"') {
+                current += '"';
+                i++;
+              } else if (char === '"') {
+                inQuotes = false;
+              } else {
+                current += char;
+              }
+            } else {
+              if (char === '"') {
+                inQuotes = true;
+              } else if (char === ",") {
+                cells.push(current.trim());
+                current = "";
+              } else {
+                current += char;
+              }
+            }
+          }
+          cells.push(current.trim());
+          return cells;
+        });
+        resolve(result);
+      } catch (err) {
+        reject(err);
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsText(file, "utf-8");
+  });
+}
+
+/**
+ * 导出数据为 JSON 文件
+ */
+export function exportToJSON(data: unknown[], filename: string = "export") {
+  const json = JSON.stringify(data, null, 2);
+  const blob = new Blob([json], { type: "application/json;charset=utf-8;" });
+  downloadBlob(blob, `${filename}.json`);
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
diff --git a/antdv-next-admin/src/utils/formRules.ts b/antdv-next-admin/src/utils/formRules.ts
new file mode 100644
index 0000000..9d8ff82
--- /dev/null
+++ b/antdv-next-admin/src/utils/formRules.ts
@@ -0,0 +1,155 @@
+/**
+ * Common form validation rules
+ */
+import { $t } from "@/locales";
+
+export const commonRules = {
+  /**
+   * Required field
+   */
+  required: (message = $t("validation.required")) => ({
+    required: true,
+    message,
+  }),
+
+  /**
+   * Email validation
+   */
+  email: (message = $t("validation.email")) => ({
+    validator: (_rule: unknown, value: unknown) => {
+      if (!value) return Promise.resolve();
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (emailRegex.test(String(value))) {
+        return Promise.resolve();
+      }
+      return Promise.reject(new Error(message));
+    },
+  }),
+
+  /**
+   * Phone number validation (Chinese)
+   */
+  phone: (message = $t("validation.phone")) => ({
+    validator: (_rule: unknown, value: unknown) => {
+      if (!value) return Promise.resolve();
+      if (/^1[3-9]\d{9}$/.test(String(value))) {
+        return Promise.resolve();
+      }
+      return Promise.reject(new Error(message));
+    },
+  }),
+
+  /**
+   * ID card validation (Chinese)
+   */
+  idCard: (message = $t("validation.idCard")) => ({
+    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+    message,
+  }),
+
+  /**
+   * URL validation
+   */
+  url: (message = $t("validation.url")) => ({
+    type: "url" as const,
+    message,
+  }),
+
+  /**
+   * Length range validation
+   */
+  length: (min: number, max: number, message?: string) => ({
+    min,
+    max,
+    message: message || $t("validation.lengthRange", { min, max }),
+  }),
+
+  /**
+   * Number range validation
+   */
+  range: (min: number, max: number, message?: string) => ({
+    type: "number" as const,
+    min,
+    max,
+    message: message || $t("validation.numberRange", { min, max }),
+  }),
+
+  /**
+   * Pattern validation
+   */
+  pattern: (pattern: RegExp, message: string) => ({
+    pattern,
+    message,
+  }),
+
+  /**
+   * Custom validator
+   */
+  validator: (
+    validatorFn: (rule: unknown, value: unknown) => Promise<void>,
+  ) => ({
+    validator: validatorFn,
+  }),
+
+  /**
+   * Username validation
+   */
+  username: (message = $t("validation.usernamePattern")) => ({
+    validator: (_rule: unknown, value: unknown) => {
+      if (!value) return Promise.resolve();
+      if (/^[a-zA-Z0-9_]+$/.test(String(value))) {
+        return Promise.resolve();
+      }
+      return Promise.reject(new Error(message));
+    },
+  }),
+
+  /**
+   * Password strength validation
+   */
+  password: (message = $t("validation.passwordPattern")) => ({
+    validator: (_rule: unknown, value: unknown) => {
+      if (!value) return Promise.resolve();
+      if (/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(String(value))) {
+        return Promise.resolve();
+      }
+      return Promise.reject(new Error(message));
+    },
+  }),
+
+  /**
+   * Confirm password validation
+   */
+  confirmPassword: (
+    getFieldValue: (field: string) => unknown,
+    message = $t("validation.confirmPassword"),
+  ) => ({
+    validator: (_rule: unknown, value: unknown) => {
+      if (!value || getFieldValue("password") === value) {
+        return Promise.resolve();
+      }
+      return Promise.reject(new Error(message));
+    },
+  }),
+};
+
+/**
+ * Create custom validation rule
+ */
+export function createRule(
+  validator: (
+    value: unknown,
+    formValues: unknown,
+  ) => boolean | Promise<boolean>,
+  message: string,
+) {
+  return {
+    validator: async (_rule: unknown, value: unknown, formValues: unknown) => {
+      const result = await validator(value, formValues);
+      if (result) {
+        return Promise.resolve();
+      }
+      return Promise.reject(new Error(message));
+    },
+  };
+}
diff --git a/antdv-next-admin/src/utils/helpers.ts b/antdv-next-admin/src/utils/helpers.ts
new file mode 100644
index 0000000..4a1baf8
--- /dev/null
+++ b/antdv-next-admin/src/utils/helpers.ts
@@ -0,0 +1,322 @@
+/**
+ * Helper utility functions
+ */
+
+/**
+ * Debounce function
+ */
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  return function (this: unknown, ...args: Parameters<T>) {
+    if (timeout) clearTimeout(timeout);
+
+    timeout = setTimeout(() => {
+      func.apply(this, args);
+    }, wait);
+  };
+}
+
+/**
+ * Throttle function
+ */
+export function throttle<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  let previous = 0;
+
+  return function (this: unknown, ...args: Parameters<T>) {
+    const now = Date.now();
+
+    if (now - previous > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      func.apply(this, args);
+      previous = now;
+    } else if (!timeout) {
+      timeout = setTimeout(
+        () => {
+          func.apply(this, args);
+          previous = Date.now();
+          timeout = null;
+        },
+        wait - (now - previous),
+      );
+    }
+  };
+}
+
+/**
+ * Deep clone object
+ */
+export function deepClone<T>(obj: T): T {
+  if (obj === null || typeof obj !== "object") {
+    return obj;
+  }
+
+  if (obj instanceof Date) {
+    return new Date(obj.getTime()) as T;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => deepClone(item)) as T;
+  }
+
+  if (obj instanceof Object) {
+    const clonedObj = {} as T;
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        clonedObj[key] = deepClone(obj[key]);
+      }
+    }
+    return clonedObj;
+  }
+
+  return obj;
+}
+
+/**
+ * Format file size
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+}
+
+/**
+ * Format number with comma separator
+ */
+export function formatNumber(num: number): string {
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+/**
+ * Generate random string
+ */
+export function randomString(length: number = 8): string {
+  const chars =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
+
+/**
+ * Generate UUID
+ */
+export function uuid(): string {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * Check if value is empty
+ */
+export function isEmpty(value: unknown): boolean {
+  if (value === null || value === undefined) return true;
+  if (typeof value === "string") return value.trim().length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === "object") return Object.keys(value).length === 0;
+  return false;
+}
+
+/**
+ * Parse URL query string
+ */
+export function parseQuery(url: string): Record<string, string> {
+  const query: Record<string, string> = {};
+  const queryString = url.split("?")[1];
+
+  if (!queryString) return query;
+
+  queryString.split("&").forEach((param) => {
+    const [key, value] = param.split("=");
+    query[decodeURIComponent(key)] = decodeURIComponent(value || "");
+  });
+
+  return query;
+}
+
+/**
+ * Build URL query string
+ */
+export function buildQuery(params: Record<string, unknown>): string {
+  const query = Object.keys(params)
+    .filter(
+      (key) =>
+        params[key] !== undefined && params[key] !== null && params[key] !== "",
+    )
+    .map(
+      (key) =>
+        `${encodeURIComponent(key)}=${encodeURIComponent(String(params[key]))}`,
+    )
+    .join("&");
+
+  return query ? `?${query}` : "";
+}
+
+/**
+ * Download file from blob
+ */
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  window.URL.revokeObjectURL(url);
+}
+
+/**
+ * Copy text to clipboard
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } else {
+      // Fallback for older browsers
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      const success = document.execCommand("copy");
+      document.body.removeChild(textarea);
+      return success;
+    }
+  } catch (error) {
+    console.error("Failed to copy to clipboard:", error);
+    return false;
+  }
+}
+
+/**
+ * Sleep/delay function
+ */
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Retry function with exponential backoff
+ */
+export async function retry<T>(
+  fn: () => Promise<T>,
+  retries: number = 3,
+  delay: number = 1000,
+): Promise<T> {
+  try {
+    return await fn();
+  } catch (error) {
+    if (retries === 0) throw error;
+    await sleep(delay);
+    return retry(fn, retries - 1, delay * 2);
+  }
+}
+
+/**
+ * Get file extension
+ */
+export function getFileExtension(filename: string): string {
+  return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
+}
+
+/**
+ * Validate email
+ */
+export function isValidEmail(email: string): boolean {
+  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return re.test(email);
+}
+
+/**
+ * Validate phone number (Chinese)
+ */
+export function isValidPhone(phone: string): boolean {
+  const re = /^1[3-9]\d{9}$/;
+  return re.test(phone);
+}
+
+/**
+ * Validate URL
+ */
+export function isValidURL(url: string): boolean {
+  try {
+    const _url = new URL(url);
+    return _url !== null;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Truncate text with ellipsis
+ */
+export function truncate(
+  text: string,
+  length: number,
+  suffix: string = "...",
+): string {
+  if (text.length <= length) return text;
+  return text.slice(0, length) + suffix;
+}
+
+/**
+ * Capitalize first letter
+ */
+export function capitalize(text: string): string {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+/**
+ * Convert to kebab-case
+ */
+export function kebabCase(text: string): string {
+  return text
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/[\s_]+/g, "-")
+    .toLowerCase();
+}
+
+/**
+ * Convert to camelCase
+ */
+export function camelCase(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ""));
+}
+
+/**
+ * Get contrast color (black or white) for background
+ */
+export function getContrastColor(hexColor: string): string {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.substr(0, 2), 16);
+  const g = parseInt(hex.substr(2, 2), 16);
+  const b = parseInt(hex.substr(4, 2), 16);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness > 128 ? "#000000" : "#ffffff";
+}
diff --git a/antdv-next-admin/src/utils/i18n.ts b/antdv-next-admin/src/utils/i18n.ts
new file mode 100644
index 0000000..16c9c80
--- /dev/null
+++ b/antdv-next-admin/src/utils/i18n.ts
@@ -0,0 +1,16 @@
+import { $t } from '@/locales';
+
+export function resolveLocaleText(key?: string, fallback = ''): string {
+  const safeFallback = fallback || '-';
+  if (!key) {
+    return safeFallback;
+  }
+
+  const messageKey = String(key);
+  const translated = $t(messageKey);
+  if (translated !== messageKey && translated.trim()) {
+    return translated;
+  }
+
+  return messageKey || safeFallback;
+}
diff --git a/antdv-next-admin/src/utils/icon.ts b/antdv-next-admin/src/utils/icon.ts
new file mode 100644
index 0000000..a238f09
--- /dev/null
+++ b/antdv-next-admin/src/utils/icon.ts
@@ -0,0 +1,25 @@
+import type { Component } from 'vue';
+
+import * as AntdvIcons from '@antdv-next/icons';
+
+const iconMap = AntdvIcons as unknown as Record<string, Component>;
+
+function normalizeIconName(name: string): string {
+  const trimmed = name.trim();
+  if (trimmed.startsWith('antdv-next:')) {
+    return trimmed.slice('antdv-next:'.length);
+  }
+  if (trimmed.startsWith('antd:')) {
+    return trimmed.slice('antd:'.length);
+  }
+  return trimmed;
+}
+
+export function resolveIcon(name?: string): Component | undefined {
+  if (!name) {
+    return undefined;
+  }
+
+  const iconName = normalizeIconName(name);
+  return iconMap[iconName];
+}
diff --git a/antdv-next-admin/src/utils/request.ts b/antdv-next-admin/src/utils/request.ts
new file mode 100644
index 0000000..bd17dae
--- /dev/null
+++ b/antdv-next-admin/src/utils/request.ts
@@ -0,0 +1,167 @@
+import axios, {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from "axios";
+
+import { message } from "antdv-next";
+
+import router from "@/router";
+import { useAuthStore } from "@/stores/auth";
+
+let refreshPromise: Promise<string> | null = null;
+
+const service: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: 15000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+service.interceptors.request.use(
+  (config) => {
+    const authStore = useAuthStore();
+
+    if (authStore.token) {
+      config.headers.Authorization = `Bearer ${authStore.token}`;
+    }
+
+    return config;
+  },
+  (error: AxiosError) => {
+    console.error("Request error:", error);
+    message.error("请求发送失败");
+    return Promise.reject(error);
+  },
+);
+
+service.interceptors.response.use(
+  (response: AxiosResponse) => {
+    const res = response.data;
+
+    if (res.code !== undefined && res.code !== 200) {
+      if (res.code === 401) {
+        return Promise.reject(new Error(res.message || "Unauthorized"));
+      } else if (res.code === 403) {
+        console.error("No permission:", res.message);
+        message.error(res.message || "没有访问权限");
+      } else {
+        message.error(res.message || "请求失败");
+      }
+
+      return Promise.reject(new Error(res.message || "Error"));
+    }
+
+    return res;
+  },
+  async (error: AxiosError) => {
+    const originalRequest = error.config as InternalAxiosRequestConfig & {
+      _retry?: boolean;
+    };
+
+    if (
+      error.response?.status === 401 &&
+      originalRequest &&
+      !originalRequest._retry
+    ) {
+      originalRequest._retry = true;
+
+      try {
+        if (!refreshPromise) {
+          const authStore = useAuthStore();
+
+          refreshPromise = authStore.refreshToken().finally(() => {
+            refreshPromise = null;
+          });
+        }
+
+        const newToken = await refreshPromise;
+
+        if (originalRequest.headers) {
+          originalRequest.headers.Authorization = `Bearer ${newToken}`;
+        }
+
+        return service(originalRequest);
+      } catch (refreshError) {
+        const authStore = useAuthStore();
+        authStore.logout();
+        message.error("登录已过期，请重新登录");
+        router.push("/login");
+        return Promise.reject(refreshError);
+      }
+    }
+
+    console.error("Response error:", error);
+
+    if (error.response) {
+      const { status } = error.response;
+
+      switch (status) {
+        case 403:
+          console.error("Access forbidden");
+          message.error("没有访问权限");
+          router.push("/403");
+          break;
+        case 404:
+          console.error("Resource not found");
+          message.error("请求的资源不存在");
+          break;
+        case 500:
+          console.error("Server error");
+          message.error("服务器错误，请稍后重试");
+          router.push("/500");
+          break;
+        default:
+          console.error(`Error ${status}:`, error.message);
+          message.error(error.message || "请求失败");
+      }
+    } else if (error.request) {
+      console.error("No response received:", error.request);
+      message.error("网络连接失败，请检查网络");
+    } else {
+      console.error("Request setup error:", error.message);
+      message.error("请求配置错误");
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export const request = {
+  get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return service.get(url, config);
+  },
+
+  post<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<T> {
+    return service.post(url, data, config);
+  },
+
+  put<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<T> {
+    return service.put(url, data, config);
+  },
+
+  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return service.delete(url, config);
+  },
+
+  patch<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<T> {
+    return service.patch(url, data, config);
+  },
+};
+
+export default service;
diff --git a/antdv-next-admin/src/utils/storage.ts b/antdv-next-admin/src/utils/storage.ts
new file mode 100644
index 0000000..06d79b5
--- /dev/null
+++ b/antdv-next-admin/src/utils/storage.ts
@@ -0,0 +1,180 @@
+// Storage utility with encryption support
+
+interface StorageData<T> {
+  value: T;
+  expire?: number;
+}
+
+class Storage {
+  protected storage: globalThis.Storage;
+
+  constructor(storage: globalThis.Storage) {
+    this.storage = storage;
+  }
+
+  /**
+   * Set storage item
+   * @param key Storage key
+   * @param value Storage value
+   * @param expire Expiration time in seconds
+   */
+  set<T>(key: string, value: T, expire?: number): void {
+    const data: StorageData<T> = {
+      value,
+    };
+
+    if (expire) {
+      data.expire = Date.now() + expire * 1000;
+    }
+
+    this.storage.setItem(key, JSON.stringify(data));
+  }
+
+  /**
+   * Get storage item
+   * @param key Storage key
+   * @param defaultValue Default value if not found or expired
+   */
+  get<T>(key: string, defaultValue?: T): T | null {
+    const item = this.storage.getItem(key);
+
+    if (!item) {
+      return defaultValue ?? null;
+    }
+
+    try {
+      const data = JSON.parse(item) as StorageData<T> | T;
+
+      // Compatible with wrapped storage format: { value, expire }
+      if (typeof data === 'object' && data !== null && 'value' in data) {
+        const wrappedData = data as StorageData<T>;
+
+        // Check if expired
+        if (wrappedData.expire && Date.now() > wrappedData.expire) {
+          this.remove(key);
+          return defaultValue ?? null;
+        }
+
+        return wrappedData.value;
+      }
+
+      // Compatible with plain values stored by native localStorage APIs
+      return data as T;
+    } catch (error) {
+      // Compatible with plain string values (e.g. legacy token format)
+      return item as unknown as T;
+    }
+  }
+
+  /**
+   * Remove storage item
+   * @param key Storage key
+   */
+  remove(key: string): void {
+    this.storage.removeItem(key);
+  }
+
+  /**
+   * Clear all storage items
+   */
+  clear(): void {
+    this.storage.clear();
+  }
+
+  /**
+   * Get all keys
+   */
+  keys(): string[] {
+    return Object.keys(this.storage);
+  }
+
+  /**
+   * Check if key exists
+   * @param key Storage key
+   */
+  has(key: string): boolean {
+    return this.storage.getItem(key) !== null;
+  }
+}
+
+// Export localStorage and sessionStorage instances
+export const localStorage = new Storage(window.localStorage);
+export const sessionStorage = new Storage(window.sessionStorage);
+
+// Simple encryption/decryption (for basic obfuscation)
+class EncryptedStorage extends Storage {
+  private encryptionKey: string;
+
+  constructor(storage: globalThis.Storage, encryptionKey: string = 'default-key') {
+    super(storage);
+    this.encryptionKey = encryptionKey;
+  }
+
+  private encrypt(text: string): string {
+    // Simple XOR encryption (not secure, just for obfuscation)
+    let result = '';
+    for (let i = 0; i < text.length; i++) {
+      result += String.fromCharCode(
+        text.charCodeAt(i) ^ this.encryptionKey.charCodeAt(i % this.encryptionKey.length),
+      );
+    }
+    return btoa(result);
+  }
+
+  private decrypt(encrypted: string): string {
+    try {
+      const text = atob(encrypted);
+      let result = '';
+      for (let i = 0; i < text.length; i++) {
+        result += String.fromCharCode(
+          text.charCodeAt(i) ^ this.encryptionKey.charCodeAt(i % this.encryptionKey.length),
+        );
+      }
+      return result;
+    } catch (error) {
+      console.error('Decryption failed:', error);
+      return '';
+    }
+  }
+
+  set<T>(key: string, value: T, expire?: number): void {
+    const data: StorageData<T> = {
+      value,
+    };
+
+    if (expire) {
+      data.expire = Date.now() + expire * 1000;
+    }
+
+    const encrypted = this.encrypt(JSON.stringify(data));
+    this.storage.setItem(key, encrypted);
+  }
+
+  get<T>(key: string, defaultValue?: T): T | null {
+    const item = this.storage.getItem(key);
+
+    if (!item) {
+      return defaultValue ?? null;
+    }
+
+    try {
+      const decrypted = this.decrypt(item);
+      const data: StorageData<T> = JSON.parse(decrypted);
+
+      // Check if expired
+      if (data.expire && Date.now() > data.expire) {
+        this.remove(key);
+        return defaultValue ?? null;
+      }
+
+      return data.value;
+    } catch (error) {
+      console.error('Failed to parse encrypted storage item:', error);
+      return defaultValue ?? null;
+    }
+  }
+}
+
+// Export encrypted storage
+export const encryptedLocalStorage = new EncryptedStorage(window.localStorage);
+export const encryptedSessionStorage = new EncryptedStorage(window.sessionStorage);
diff --git a/antdv-next-admin/src/views/about/index.vue b/antdv-next-admin/src/views/about/index.vue
new file mode 100644
index 0000000..b18d1ab
--- /dev/null
+++ b/antdv-next-admin/src/views/about/index.vue
@@ -0,0 +1,695 @@
+<template>
+  <div class="about-page">
+    <!-- Hero Banner -->
+    <section class="hero">
+      <div class="hero-bg" aria-hidden="true">
+        <div class="grid-overlay"></div>
+        <div class="orb orb-1"></div>
+        <div class="orb orb-2"></div>
+        <div class="orb orb-3"></div>
+        <div class="code-symbols">
+          <span class="sym sym-1">&lt;/&gt;</span>
+          <span class="sym sym-2">{ }</span>
+          <span class="sym sym-3">( )</span>
+          <span class="sym sym-4">[ ]</span>
+          <span class="sym sym-5">=&gt;</span>
+        </div>
+      </div>
+      <div class="hero-content">
+        <div class="hero-icon">
+          <img :src="logoImg" alt="Logo" class="hero-logo" />
+        </div>
+        <h1 class="hero-title">Antdv Next Admin</h1>
+        <p class="hero-desc">{{ $t('about.description') }}</p>
+        <div class="hero-badges">
+          <span
+            class="hero-badge"
+            v-for="b in heroBadges"
+            :key="b.label"
+            :style="{ '--badge-bg': b.bg }"
+          >
+            {{ b.label }}
+          </span>
+        </div>
+      </div>
+    </section>
+
+    <a-row :gutter="[16, 16]" class="info-section">
+      <!-- Project Info -->
+      <a-col :xs="24" :lg="12">
+        <a-card :bordered="false" class="info-card">
+          <template #title>
+            <div class="card-title-row">
+              <span class="card-icon-wrap"><ProfileOutlined class="card-icon" /></span>
+              <span>{{ $t('about.projectInfo') }}</span>
+            </div>
+          </template>
+          <div class="info-list">
+            <div class="info-row">
+              <span class="info-label">{{ $t('about.projectName') }}</span>
+              <span class="info-value fw-medium">Antdv Next Admin</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">{{ $t('about.version') }}</span>
+              <span class="info-value">
+                <a-tag color="blue" class="version-tag">v{{ version }}</a-tag>
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">{{ $t('about.license') }}</span>
+              <span class="info-value">
+                <a-tag color="green" class="version-tag">MIT License</a-tag>
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">{{ $t('about.author') }}</span>
+              <span class="info-value fw-medium">yelog</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">
+                <MailOutlined class="row-icon" />
+                {{ $t('about.email') }}
+              </span>
+              <span class="info-value">
+                <a href="mailto:yelogeek@gmail.com" class="link">yelogeek@gmail.com</a>
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">
+                <GithubOutlined class="row-icon" />
+                GitHub
+              </span>
+              <span class="info-value">
+                <a
+                  href="https://github.com/yelog/antdv-next-admin"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="link"
+                >
+                  yelog/antdv-next-admin
+                  <LinkOutlined class="link-arrow" />
+                </a>
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">
+                <BookOutlined class="row-icon" />
+                {{ $t('about.documentation') }}
+              </span>
+              <span class="info-value">
+                <a
+                  href="https://antdv-next-admin-doc.yelog.org"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="link"
+                >
+                  antdv-next-admin-doc
+                  <LinkOutlined class="link-arrow" />
+                </a>
+              </span>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+      <!-- Tech Stack -->
+      <a-col :xs="24" :lg="12">
+        <a-card :bordered="false" class="info-card">
+          <template #title>
+            <div class="card-title-row">
+              <span class="card-icon-wrap"><CodeOutlined class="card-icon" /></span>
+              <span>{{ $t('about.techStack') }}</span>
+            </div>
+          </template>
+          <div class="tech-grid">
+            <a
+              v-for="tech in techList"
+              :key="tech.name"
+              :href="tech.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="tech-item"
+              :style="{ '--tech-color': tech.color }"
+            >
+              <div class="tech-dot"></div>
+              <div class="tech-info">
+                <span class="tech-name">{{ tech.name }}</span>
+                <span class="tech-version">{{ tech.version }}</span>
+              </div>
+            </a>
+          </div>
+        </a-card>
+      </a-col>
+
+      <!-- Features -->
+      <a-col :span="24">
+        <a-card :bordered="false" class="info-card">
+          <template #title>
+            <div class="card-title-row">
+              <span class="card-icon-wrap"><BulbOutlined class="card-icon" /></span>
+              <span>{{ $t('about.features') }}</span>
+            </div>
+          </template>
+          <a-row :gutter="[16, 16]">
+            <a-col v-for="f in features" :key="f.title" :xs="24" :sm="12" :lg="6">
+              <div class="feature-card" :style="{ '--feat-color': f.color }">
+                <div class="feature-icon-wrap">
+                  <component :is="f.icon" class="feature-icon" />
+                </div>
+                <div class="feature-text">
+                  <span class="feature-title">{{ f.title }}</span>
+                  <span class="feature-desc">{{ f.desc }}</span>
+                </div>
+              </div>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ProfileOutlined,
+  CodeOutlined,
+  BulbOutlined,
+  GithubOutlined,
+  MailOutlined,
+  LinkOutlined,
+  BookOutlined,
+  ApiOutlined,
+  SafetyOutlined,
+  ApartmentOutlined,
+  GlobalOutlined,
+  BgColorsOutlined,
+  TableOutlined,
+  CloudOutlined,
+} from '@antdv-next/icons';
+
+import logoImg from '@/assets/images/logo.png';
+import { $t } from '@/locales';
+
+const version = __APP_VERSION__;
+
+const heroBadges = [
+  { label: 'Vue 3', bg: 'rgba(66, 184, 131, 0.25)' },
+  { label: 'TypeScript', bg: 'rgba(49, 120, 198, 0.25)' },
+  { label: 'Vite', bg: 'rgba(100, 108, 255, 0.25)' },
+  { label: 'Ant Design Vue', bg: 'rgba(255, 255, 255, 0.15)' },
+];
+
+const techList = [
+  { name: 'Vue', version: '3.4', color: '#42b883', url: 'https://vuejs.org' },
+  { name: 'TypeScript', version: '5.3', color: '#3178c6', url: 'https://www.typescriptlang.org' },
+  { name: 'Vite', version: '5.0', color: '#646cff', url: 'https://vite.dev' },
+  { name: 'Ant Design Vue', version: 'Next', color: '#1677ff', url: 'https://antdv-next.com' },
+  { name: 'Pinia', version: '2.1', color: '#ffd859', url: 'https://pinia.vuejs.org' },
+  { name: 'Vue Router', version: '4.2', color: '#42b883', url: 'https://router.vuejs.org' },
+  { name: 'Vue I18n', version: '11.0', color: '#42b883', url: 'https://vue-i18n.intlify.dev' },
+  { name: 'Axios', version: '1.6', color: '#5a29e4', url: 'https://axios-http.com' },
+  { name: 'ECharts', version: '5.4', color: '#e43961', url: 'https://echarts.apache.org' },
+  { name: 'TailwindCSS', version: '4.2', color: '#06b6d4', url: 'https://tailwindcss.com' },
+  { name: 'Iconify', version: '5.0', color: '#1769aa', url: 'https://iconify.design' },
+  { name: 'Tiptap', version: '3.19', color: '#68cef8', url: 'https://tiptap.dev' },
+  { name: 'Day.js', version: '1.11', color: '#ff6f61', url: 'https://day.js.org' },
+];
+
+const features = [
+  {
+    title: $t('about.feature1'),
+    desc: $t('about.feature1Desc'),
+    icon: ApiOutlined,
+    color: '#42b883',
+  },
+  {
+    title: $t('about.feature2'),
+    desc: $t('about.feature2Desc'),
+    icon: SafetyOutlined,
+    color: '#3178c6',
+  },
+  {
+    title: $t('about.feature3'),
+    desc: $t('about.feature3Desc'),
+    icon: SafetyOutlined,
+    color: '#e43961',
+  },
+  {
+    title: $t('about.feature4'),
+    desc: $t('about.feature4Desc'),
+    icon: ApartmentOutlined,
+    color: '#646cff',
+  },
+  {
+    title: $t('about.feature5'),
+    desc: $t('about.feature5Desc'),
+    icon: GlobalOutlined,
+    color: '#1677ff',
+  },
+  {
+    title: $t('about.feature6'),
+    desc: $t('about.feature6Desc'),
+    icon: BgColorsOutlined,
+    color: '#fa8c16',
+  },
+  {
+    title: $t('about.feature7'),
+    desc: $t('about.feature7Desc'),
+    icon: TableOutlined,
+    color: '#13c2c2',
+  },
+  {
+    title: $t('about.feature8'),
+    desc: $t('about.feature8Desc'),
+    icon: CloudOutlined,
+    color: '#722ed1',
+  },
+];
+</script>
+
+<style scoped lang="scss">
+.about-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+/* ===== Hero Banner ===== */
+.hero {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  padding: 56px 32px;
+  margin-bottom: 16px;
+  text-align: center;
+  background: linear-gradient(
+    135deg,
+    var(--color-primary) 0%,
+    color-mix(in srgb, var(--color-primary) 65%, #000) 100%
+  );
+  color: #fff;
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  .grid-overlay {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+
+  .orb {
+    position: absolute;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
+    filter: blur(2px);
+  }
+
+  .orb-1 {
+    width: 350px;
+    height: 350px;
+    top: -100px;
+    right: -80px;
+  }
+
+  .orb-2 {
+    width: 240px;
+    height: 240px;
+    bottom: -80px;
+    left: -60px;
+  }
+
+  .orb-3 {
+    width: 140px;
+    height: 140px;
+    top: 30%;
+    left: 55%;
+  }
+
+  .code-symbols {
+    .sym {
+      position: absolute;
+      font-family: var(--font-family-code);
+      color: rgba(255, 255, 255, 0.07);
+      font-weight: var(--font-weight-bold);
+      user-select: none;
+    }
+
+    .sym-1 {
+      top: 18%;
+      left: 8%;
+      font-size: 32px;
+      transform: rotate(-12deg);
+    }
+    .sym-2 {
+      top: 25%;
+      right: 12%;
+      font-size: 28px;
+      transform: rotate(8deg);
+    }
+    .sym-3 {
+      bottom: 20%;
+      left: 15%;
+      font-size: 24px;
+      transform: rotate(-6deg);
+    }
+    .sym-4 {
+      bottom: 28%;
+      right: 8%;
+      font-size: 26px;
+      transform: rotate(15deg);
+    }
+    .sym-5 {
+      top: 60%;
+      left: 40%;
+      font-size: 22px;
+      transform: rotate(-4deg);
+    }
+  }
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 68px;
+  height: 68px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-size: 34px;
+  margin-bottom: 24px;
+
+  .hero-logo {
+    width: 44px;
+    height: 44px;
+    object-fit: contain;
+  }
+}
+
+.hero-title {
+  font-size: 34px;
+  font-weight: var(--font-weight-bold);
+  margin: 0 0 12px;
+  letter-spacing: -0.5px;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  color: #fff;
+}
+
+.hero-desc {
+  font-size: 15px;
+  opacity: 0.88;
+  margin: 0 auto 24px;
+  max-width: 500px;
+  line-height: 1.7;
+}
+
+.hero-badges {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.hero-badge {
+  display: inline-block;
+  padding: 3px 14px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.3px;
+  background: var(--badge-bg);
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+/* ===== Info Cards ===== */
+.info-card {
+  height: 100%;
+  border: 1px solid var(--color-border-secondary);
+
+  .card-title-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .card-icon-wrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+
+    .card-icon {
+      font-size: 16px;
+      color: var(--color-primary);
+    }
+  }
+}
+
+/* ===== Project Info List ===== */
+.info-list {
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 11px 0;
+    border-bottom: 1px solid var(--color-border-secondary);
+    gap: 24px;
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    .info-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      font-size: 14px;
+      flex-shrink: 0;
+
+      .row-icon {
+        font-size: 14px;
+        opacity: 0.65;
+      }
+    }
+
+    .info-value {
+      color: var(--color-text-primary);
+      font-size: 14px;
+      text-align: right;
+      min-width: 0;
+
+      &.fw-medium {
+        font-weight: var(--font-weight-medium);
+      }
+    }
+  }
+}
+
+.version-tag {
+  margin: 0;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: all 0.2s;
+
+  &:hover {
+    opacity: 0.75;
+    text-decoration: underline;
+  }
+
+  .link-arrow {
+    font-size: 11px;
+    opacity: 0.6;
+  }
+}
+
+/* ===== Tech Stack Grid ===== */
+.tech-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
+  gap: 10px;
+}
+
+.tech-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 14px;
+  border-radius: var(--radius-base);
+  border: 1px solid var(--color-border-secondary);
+  background: var(--color-bg-container);
+  text-decoration: none;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+
+  &:hover {
+    border-color: var(--tech-color);
+    background: color-mix(in srgb, var(--tech-color) 4%, var(--color-bg-container));
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  .tech-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: var(--tech-color);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tech-color) 15%, transparent);
+  }
+
+  .tech-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .tech-name {
+    font-size: 13px;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-primary);
+    line-height: 1.35;
+  }
+
+  .tech-version {
+    font-size: 12px;
+    color: var(--color-text-quaternary);
+    line-height: 1.3;
+  }
+}
+
+/* ===== Feature Cards ===== */
+.feature-card {
+  display: flex;
+  gap: 14px;
+  padding: 18px 16px;
+  border-radius: var(--radius-base);
+  border: 1px solid var(--color-border-secondary);
+  background: var(--color-bg-container);
+  height: 100%;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+
+  &:hover {
+    border-color: color-mix(in srgb, var(--feat-color) 40%, var(--color-border-secondary));
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  }
+
+  .feature-icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--feat-color) 10%, transparent);
+
+    .feature-icon {
+      font-size: 20px;
+      color: var(--feat-color);
+    }
+  }
+
+  .feature-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .feature-title {
+    font-size: 14px;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-primary);
+    line-height: 1.4;
+  }
+
+  .feature-desc {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    line-height: 1.5;
+  }
+}
+
+/* ===== Dark Mode ===== */
+:root.dark {
+  .info-card {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .tech-item {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  .feature-card {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 576px) {
+  .hero {
+    padding: 36px 20px;
+  }
+
+  .hero-title {
+    font-size: 24px;
+  }
+
+  .hero-desc {
+    font-size: 14px;
+  }
+
+  .hero-bg .code-symbols {
+    display: none;
+  }
+
+  .tech-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
+
+  .feature-card {
+    padding: 14px 12px;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/dashboard/index.vue b/antdv-next-admin/src/views/dashboard/index.vue
new file mode 100644
index 0000000..8b5df36
--- /dev/null
+++ b/antdv-next-admin/src/views/dashboard/index.vue
@@ -0,0 +1,492 @@
+<template>
+  <div class="dashboard-container">
+    <section class="card welcome-panel">
+      <div class="welcome-main">
+        <a-avatar :size="64" class="welcome-avatar">
+          <template #icon>
+            <UserOutlined />
+          </template>
+        </a-avatar>
+
+        <div class="welcome-content">
+          <p class="welcome-time">
+            <ClockCircleOutlined />
+            <span>{{ currentTimeText }}</span>
+          </p>
+          <h1 class="welcome-title">{{ greetingText }}，{{ displayName }}</h1>
+          <p class="welcome-subtitle">{{ $t('dashboard.subtitle') }}</p>
+
+          <div class="welcome-metas">
+            <span class="meta-chip meta-chip-primary">{{ $t('dashboard.systemStable') }}</span>
+            <span class="meta-chip"
+              >{{ $t('dashboard.todayFocus') }} · {{ $t('dashboard.totalRevenue') }}</span
+            >
+          </div>
+        </div>
+      </div>
+
+      <div class="welcome-visual" aria-hidden="true">
+        <div class="orb orb-a"></div>
+        <div class="orb orb-b"></div>
+        <div class="orb orb-c"></div>
+        <div class="wave"></div>
+      </div>
+    </section>
+
+    <section class="stats-grid">
+      <ProStatCard
+        v-for="card in statCards"
+        :key="card.key"
+        :label="card.label"
+        :value="card.value"
+        :trend="$t('dashboard.compareYesterday', { value: card.trend })"
+        :icon="card.icon"
+        :tone="card.tone"
+      />
+    </section>
+
+    <section class="charts-grid">
+      <div class="card chart-card">
+        <ProChart
+          :type="'bar'"
+          :title="$t('dashboard.salesTrend')"
+          :data="salesChartData"
+          :height="280"
+        >
+          <template #extra>
+            <a-button type="link" size="small">{{ $t('dashboard.viewMore') }}</a-button>
+          </template>
+        </ProChart>
+      </div>
+
+      <div class="card chart-card">
+        <ProChart
+          :type="'donut'"
+          :title="$t('dashboard.userDistribution')"
+          :data="userDistributionChartData"
+          :height="280"
+        />
+      </div>
+    </section>
+
+    <section class="card activities-card">
+      <div class="card-header">
+        <h3 class="card-title">{{ $t('dashboard.recentActivities') }}</h3>
+        <a-button type="link" size="small">{{ $t('dashboard.viewMore') }}</a-button>
+      </div>
+
+      <ul class="activity-list">
+        <li v-for="item in activities" :key="item.id" class="activity-item">
+          <a-avatar :src="item.avatar" :size="40" />
+          <div class="activity-content">
+            <p class="activity-title">{{ item.action }}</p>
+            <p class="activity-time">{{ item.time }}</p>
+          </div>
+          <a-tag :color="item.tagColor">{{ item.tag }}</a-tag>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UserOutlined,
+  ShoppingOutlined,
+  DollarOutlined,
+  RiseOutlined,
+  ClockCircleOutlined,
+} from '@antdv-next/icons';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+import ProChart from '@/components/Pro/ProChart/index.vue';
+import ProStatCard from '@/components/Pro/ProStatCard/index.vue';
+import i18n, { $t } from '@/locales';
+import { useAuthStore } from '@/stores/auth';
+
+const authStore = useAuthStore();
+
+const now = ref(new Date());
+let timer: number | null = null;
+
+const displayName = computed(() => {
+  return authStore.user?.realName || authStore.user?.username || 'Administrator';
+});
+
+const greetingText = computed(() => {
+  const hour = now.value.getHours();
+  if (hour < 6) {
+    return $t('dashboard.goodNight');
+  }
+  if (hour < 12) {
+    return $t('dashboard.goodMorning');
+  }
+  if (hour < 18) {
+    return $t('dashboard.goodAfternoon');
+  }
+  return $t('dashboard.goodEvening');
+});
+
+const currentTimeText = computed(() => {
+  const targetLocale = String(i18n.global.locale.value || 'en-US');
+
+  try {
+    return new Intl.DateTimeFormat(targetLocale, {
+      month: 'short',
+      day: 'numeric',
+      weekday: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(now.value);
+  } catch {
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      weekday: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(now.value);
+  }
+});
+
+const statCards = computed(() => [
+  {
+    key: 'users',
+    tone: 'blue' as const,
+    label: $t('dashboard.totalUsers'),
+    value: '12,458',
+    trend: '+12.5%',
+    icon: UserOutlined,
+  },
+  {
+    key: 'orders',
+    tone: 'green' as const,
+    label: $t('dashboard.totalOrders'),
+    value: '8,946',
+    trend: '+8.2%',
+    icon: ShoppingOutlined,
+  },
+  {
+    key: 'revenue',
+    tone: 'orange' as const,
+    label: $t('dashboard.totalRevenue'),
+    value: '¥456,789',
+    trend: '+15.3%',
+    icon: DollarOutlined,
+  },
+  {
+    key: 'conversion',
+    tone: 'purple' as const,
+    label: $t('dashboard.conversionRate'),
+    value: '3.24%',
+    trend: '+0.8%',
+    icon: RiseOutlined,
+  },
+]);
+
+const salesChartData = computed(() => [
+  { name: $t('dashboard.months.jan'), value: 340 },
+  { name: $t('dashboard.months.feb'), value: 480 },
+  { name: $t('dashboard.months.mar'), value: 440 },
+  { name: $t('dashboard.months.apr'), value: 620 },
+  { name: $t('dashboard.months.may'), value: 580 },
+  { name: $t('dashboard.months.jun'), value: 700 },
+  { name: $t('dashboard.months.jul'), value: 660 },
+  { name: $t('dashboard.months.aug'), value: 720 },
+]);
+
+const userDistributionChartData = computed(() => [
+  { name: $t('dashboard.newUsers'), value: 46 },
+  { name: $t('dashboard.returningUsers'), value: 34 },
+  { name: $t('dashboard.enterpriseUsers'), value: 20 },
+]);
+
+const activities = computed(() => [
+  {
+    id: 1,
+    action: $t('dashboard.activities.permissionUpdated'),
+    time: $t('dashboard.minutesAgo', { value: 2 }),
+    tag: $t('dashboard.activityTags.system'),
+    tagColor: 'blue',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=admin',
+  },
+  {
+    id: 2,
+    action: $t('dashboard.activities.userCreated'),
+    time: $t('dashboard.minutesAgo', { value: 18 }),
+    tag: $t('dashboard.activityTags.user'),
+    tagColor: 'cyan',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=sunny',
+  },
+  {
+    id: 3,
+    action: $t('dashboard.activities.orderTaskDone'),
+    time: $t('dashboard.hoursAgo', { value: 1 }),
+    tag: $t('dashboard.activityTags.task'),
+    tagColor: 'green',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=job',
+  },
+  {
+    id: 4,
+    action: $t('dashboard.activities.riskPolicyReleased'),
+    time: $t('dashboard.hoursAgo', { value: 2 }),
+    tag: $t('dashboard.activityTags.release'),
+    tagColor: 'purple',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=release',
+  },
+]);
+
+onMounted(() => {
+  timer = window.setInterval(() => {
+    now.value = new Date();
+  }, 60000);
+});
+
+onBeforeUnmount(() => {
+  if (timer !== null) {
+    window.clearInterval(timer);
+    timer = null;
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.dashboard-container {
+  display: grid;
+  gap: var(--spacing-lg);
+
+  .welcome-panel {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px 32px;
+    background: linear-gradient(140deg, var(--color-bg-container) 0%, var(--color-primary-1) 220%);
+
+    .welcome-main {
+      position: relative;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      max-width: 70%;
+    }
+
+    .welcome-avatar {
+      background: linear-gradient(135deg, #2f80ff 0%, #145dff 100%);
+      box-shadow: 0 10px 24px rgba(24, 119, 255, 0.24);
+      flex-shrink: 0;
+    }
+
+    .welcome-content {
+      .welcome-time {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+        color: var(--color-text-tertiary);
+        margin-bottom: 6px;
+      }
+
+      .welcome-title {
+        font-size: 32px;
+        line-height: 1.2;
+        margin: 0 0 6px;
+        color: var(--color-text-primary);
+      }
+
+      .welcome-subtitle {
+        margin: 0;
+        color: var(--color-text-secondary);
+        font-size: 14px;
+      }
+
+      .welcome-metas {
+        margin-top: 14px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
+
+        .meta-chip {
+          padding: 4px 10px;
+          border-radius: 999px;
+          font-size: 12px;
+          color: var(--color-text-secondary);
+          background: var(--color-bg-layout);
+          border: 1px solid var(--color-border-secondary);
+
+          &.meta-chip-primary {
+            color: var(--color-primary);
+            background: var(--color-primary-1);
+            border-color: var(--color-primary-2);
+          }
+        }
+      }
+    }
+
+    .welcome-visual {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 38%;
+      pointer-events: none;
+
+      .orb {
+        position: absolute;
+        border-radius: 50%;
+        filter: blur(2px);
+      }
+
+      .orb-a {
+        width: 180px;
+        height: 180px;
+        right: 56px;
+        top: -48px;
+        background: rgba(24, 119, 255, 0.24);
+      }
+
+      .orb-b {
+        width: 120px;
+        height: 120px;
+        right: 12px;
+        top: 84px;
+        background: rgba(82, 196, 26, 0.16);
+      }
+
+      .orb-c {
+        width: 88px;
+        height: 88px;
+        right: 160px;
+        bottom: 22px;
+        background: rgba(250, 140, 22, 0.16);
+      }
+
+      .wave {
+        position: absolute;
+        right: -70px;
+        bottom: -120px;
+        width: 380px;
+        height: 260px;
+        border-radius: 42% 58% 56% 44% / 44% 44% 56% 56%;
+        background: radial-gradient(
+          circle at 20% 30%,
+          rgba(24, 119, 255, 0.16),
+          rgba(24, 119, 255, 0.02)
+        );
+      }
+    }
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--spacing-md);
+  }
+
+  .charts-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    gap: var(--spacing-md);
+
+    .chart-card {
+      min-height: 360px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .activities-card {
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      .card-title {
+        margin: 0;
+        font-size: 18px;
+        color: var(--color-text-primary);
+      }
+    }
+
+    .activity-list {
+      display: grid;
+      gap: 6px;
+
+      .activity-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px;
+        border-radius: 10px;
+        transition: all var(--duration-base) var(--ease-out);
+
+        &:hover {
+          background: var(--color-bg-layout);
+        }
+
+        .activity-content {
+          flex: 1;
+          min-width: 0;
+
+          .activity-title {
+            margin: 0;
+            font-size: 14px;
+            color: var(--color-text-primary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .activity-time {
+            margin: 2px 0 0;
+            font-size: 12px;
+            color: var(--color-text-tertiary);
+          }
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: 1200px) {
+  .dashboard-container {
+    .stats-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .charts-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+@container (max-width: 768px) {
+  .dashboard-container {
+    .welcome-panel {
+      padding: 22px 18px;
+
+      .welcome-main {
+        max-width: 100%;
+      }
+
+      .welcome-visual {
+        display: none;
+      }
+
+      .welcome-content {
+        .welcome-title {
+          font-size: 26px;
+        }
+      }
+    }
+
+    .stats-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/error/403.vue b/antdv-next-admin/src/views/error/403.vue
new file mode 100644
index 0000000..a4c71f4
--- /dev/null
+++ b/antdv-next-admin/src/views/error/403.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-[var(--color-bg-layout)]">
+    <div class="text-center">
+      <div class="text-[120px] font-bold leading-none text-error mb-6">403</div>
+      <h1 class="text-3xl font-semibold mb-4 text-[var(--color-text-primary)]">
+        {{ $t('error.403') }}
+      </h1>
+      <p class="text-lg text-[var(--color-text-secondary)] mb-8">
+        {{ $t('error.noPermission') }}
+      </p>
+      <a-button type="primary" size="large" @click="goHome">
+        {{ $t('error.backHome') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const goHome = () => {
+  router.push('/');
+};
+</script>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/error/404.vue b/antdv-next-admin/src/views/error/404.vue
new file mode 100644
index 0000000..71aabd9
--- /dev/null
+++ b/antdv-next-admin/src/views/error/404.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-[var(--color-bg-layout)]">
+    <div class="text-center">
+      <div class="text-[120px] font-bold leading-none text-primary mb-6">404</div>
+      <h1 class="text-3xl font-semibold mb-4 text-[var(--color-text-primary)]">
+        {{ $t('error.404') }}
+      </h1>
+      <p class="text-lg text-[var(--color-text-secondary)] mb-8">
+        {{ $t('error.pageNotFound') }}
+      </p>
+      <a-button type="primary" size="large" @click="goHome">
+        {{ $t('error.backHome') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const goHome = () => {
+  router.push('/');
+};
+</script>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/error/500.vue b/antdv-next-admin/src/views/error/500.vue
new file mode 100644
index 0000000..b8eb2f8
--- /dev/null
+++ b/antdv-next-admin/src/views/error/500.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-[var(--color-bg-layout)]">
+    <div class="text-center">
+      <div class="text-[120px] font-bold leading-none text-warning mb-6">500</div>
+      <h1 class="text-3xl font-semibold mb-4 text-[var(--color-text-primary)]">
+        {{ $t('error.500') }}
+      </h1>
+      <p class="text-lg text-[var(--color-text-secondary)] mb-8">
+        {{ $t('error.serverError') }}
+      </p>
+      <a-button type="primary" size="large" @click="goHome">
+        {{ $t('error.backHome') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const goHome = () => {
+  router.push('/');
+};
+</script>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/captcha/index.vue b/antdv-next-admin/src/views/examples/captcha/index.vue
new file mode 100644
index 0000000..503abef
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/captcha/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="page-container">
+    <div class="card mb-md">
+      <h2 class="text-xl font-bold mb-sm">{{ t('exampleCaptcha.title') }}</h2>
+      <p class="text-secondary">{{ t('exampleCaptcha.description') }}</p>
+    </div>
+
+    <a-row :gutter="[16, 16]">
+      <a-col :span="24" :md="12" :lg="8">
+        <a-card :title="t('exampleCaptcha.slider')" hoverable>
+          <SliderCaptcha @success="onSuccess" @fail="onFail" />
+        </a-card>
+      </a-col>
+      <a-col :span="24" :md="12" :lg="8">
+        <a-card :title="t('exampleCaptcha.rotate')" hoverable>
+          <RotateCaptcha @success="onSuccess" @fail="onFail" />
+        </a-card>
+      </a-col>
+      <a-col :span="24" :md="12" :lg="8">
+        <a-card :title="t('exampleCaptcha.puzzle')" hoverable>
+          <PuzzleCaptcha @success="onSuccess" @fail="onFail" />
+        </a-card>
+      </a-col>
+      <a-col :span="24" :md="12" :lg="8">
+        <a-card :title="t('exampleCaptcha.point')" hoverable>
+          <PointCaptcha @success="onSuccess" @fail="onFail" />
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'antdv-next';
+import { useI18n } from 'vue-i18n';
+
+import { SliderCaptcha, RotateCaptcha, PuzzleCaptcha, PointCaptcha } from '@/components/Captcha';
+
+const { t } = useI18n();
+
+const onSuccess = () => {
+  message.success(t('exampleCaptcha.success'));
+};
+
+const onFail = () => {
+  message.error(t('exampleCaptcha.fail'));
+};
+</script>
+
+<style scoped>
+.mb-md {
+  margin-bottom: 16px;
+}
+.mb-sm {
+  margin-bottom: 8px;
+}
+.text-xl {
+  font-size: 20px;
+}
+.font-bold {
+  font-weight: 700;
+}
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/code-editor/index.vue b/antdv-next-admin/src/views/examples/code-editor/index.vue
new file mode 100644
index 0000000..6654b82
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/code-editor/index.vue
@@ -0,0 +1,319 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t("examples.codeEditor.title") }}</h2>
+      <p class="mb-lg text-secondary">
+        {{ $t("examples.codeEditor.description") }}
+      </p>
+
+      <a-row :gutter="[16, 16]">
+        <a-col :xs="24" :sm="24" :md="12">
+          <div class="editor-card">
+            <div class="editor-header">
+              <span class="editor-title">{{ $t("examples.codeEditor.themePreview") }}</span>
+              <a-select
+                v-model:value="selectedTheme"
+                style="width: 140px"
+                size="small"
+                :options="themeOptions"
+              />
+            </div>
+            <ProCodeEditor
+              v-model="themePreviewContent"
+              language="typescript"
+              :height="250"
+              :theme="selectedTheme"
+            />
+          </div>
+        </a-col>
+
+        <a-col :xs="24" :sm="24" :md="12">
+          <div class="editor-card">
+            <div class="editor-title">{{ $t("examples.codeEditor.jsEditor") }}</div>
+            <ProCodeEditor
+              v-model="jsContent"
+              language="javascript"
+              :height="250"
+            />
+          </div>
+        </a-col>
+
+        <a-col :xs="24" :sm="24" :md="12">
+          <div class="editor-card">
+            <div class="editor-title">{{ $t("examples.codeEditor.jsonEditor") }}</div>
+            <ProCodeEditor
+              v-model="jsonContent"
+              language="json"
+              :height="250"
+              :show-toolbar="true"
+            />
+          </div>
+        </a-col>
+
+        <a-col :xs="24" :sm="24" :md="12">
+          <div class="editor-card">
+            <div class="editor-title">{{ $t("examples.codeEditor.multiLanguage") }}</div>
+            <ProCodeEditor
+              v-model="multiLangContent"
+              :language="selectedLanguage"
+              :height="250"
+              :show-language-select="true"
+              @language-change="handleLanguageChange"
+            />
+          </div>
+        </a-col>
+
+        <a-col :xs="24" :sm="24" :md="12">
+          <div class="editor-card">
+            <div class="editor-title">{{ $t("examples.codeEditor.readonlyMode") }}</div>
+            <ProCodeEditor
+              v-model="readonlyContent"
+              language="typescript"
+              :height="250"
+              :readonly="true"
+            />
+          </div>
+        </a-col>
+
+        <a-col :xs="24" :sm="24" :md="12">
+          <div class="editor-card">
+            <div class="editor-title">{{ $t("examples.codeEditor.autoHeight") }}</div>
+            <div class="auto-height-wrapper">
+              <ProCodeEditor
+                v-model="autoHeightContent"
+                language="markdown"
+                :height="250"
+                :line-numbers="false"
+              />
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+
+      <a-divider orientation="left">{{ $t("common.preview") }}</a-divider>
+      <a-card :title="$t('examples.codeEditor.outputPreview')" size="small">
+        <pre class="output-preview">{{ jsonContent }}</pre>
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import type {
+  EditorTheme,
+  SupportedLanguage,
+} from "@/components/Pro/ProCodeEditor/index.vue";
+
+import ProCodeEditor from "@/components/Pro/ProCodeEditor/index.vue";
+
+const jsonContent = ref(`{
+  "name": "antdv-next-admin",
+  "version": "1.0.0",
+  "description": "A Vue 3 admin scaffold",
+  "dependencies": {
+    "vue": "^3.4.0",
+    "antdv-next": "^1.1.3",
+    "pinia": "^2.1.7"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  }
+}`);
+
+const jsContent = ref(`// JavaScript Example
+function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+const result = fibonacci(10);
+console.log(\`Fibonacci(10) = \${result}\`);
+
+// Arrow function example
+const double = (x) => x * 2;
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(double);
+console.log(doubled);`);
+
+const readonlyContent = ref(`// TypeScript Interface Example
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'user' | 'guest';
+  createdAt: Date;
+}
+
+interface ApiResponse<T> {
+  data: T;
+  success: boolean;
+  message: string;
+}
+
+async function fetchUser(id: string): Promise<ApiResponse<User>> {
+  const response = await fetch(\`/api/users/\${id}\`);
+  return response.json();
+}`);
+
+const themePreviewContent = ref(`// TypeScript Theme Preview
+interface ThemeConfig {
+  name: string;
+  colors: {
+    primary: string;
+    background: string;
+    text: string;
+  };
+}
+
+const themes: ThemeConfig[] = [
+  { name: 'light', colors: { primary: '#1890ff', background: '#fff', text: '#333' } },
+  { name: 'dark', colors: { primary: '#177ddc', background: '#141414', text: '#fff' } },
+  { name: 'github', colors: { primary: '#0366d6', background: '#fff', text: '#24292e' } },
+  { name: 'dracula', colors: { primary: '#bd93f9', background: '#282a36', text: '#f8f8f2' } },
+  { name: 'nord', colors: { primary: '#88c0d0', background: '#2e3440', text: '#d8dee9' } },
+];
+
+function applyTheme(theme: ThemeConfig) {
+  document.documentElement.style.setProperty('--color-primary', theme.colors.primary);
+  document.documentElement.style.setProperty('--color-bg', theme.colors.background);
+  document.documentElement.style.setProperty('--color-text', theme.colors.text);
+}`);
+
+const autoHeightContent = ref(`# Markdown Example
+
+## Features
+
+- **Lightweight**: Only ~100KB
+- **Fast**: Built on CodeMirror 6
+- **Extensible**: Support 14+ languages
+
+## Code Block
+
+\`\`\`javascript
+const greeting = "Hello, World!";
+console.log(greeting);
+\`\`\`
+
+## Table
+
+| Feature | Status |
+|---------|--------|
+| Syntax Highlighting | ✅ |
+| Line Numbers | ✅ |
+| Code Folding | ✅ |
+`);
+
+const selectedLanguage = ref<SupportedLanguage>("javascript");
+const multiLangContent = ref(`// JavaScript code\nconst hello = 'world';\nconsole.log(hello);`);
+
+const selectedTheme = ref<EditorTheme>("auto");
+
+const themeOptions = [
+  { label: "跟随系统", value: "auto" },
+  { label: "亮色", value: "light" },
+  { label: "暗色", value: "dark" },
+  { label: "GitHub", value: "github" },
+  { label: "GitHub Dark", value: "githubDark" },
+  { label: "Dracula", value: "dracula" },
+  { label: "Material", value: "material" },
+  { label: "Material Dark", value: "materialDark" },
+  { label: "Monokai", value: "monokai" },
+  { label: "Nord", value: "nord" },
+  { label: "Tokyo Night", value: "tokyoNight" },
+  { label: "Solarized Light", value: "solarized" },
+  { label: "Solarized Dark", value: "solarizedDark" },
+];
+
+const languageExamples: Record<SupportedLanguage, string> = {
+  json: '{\n  "key": "value",\n  "array": [1, 2, 3]\n}',
+  javascript: "// JavaScript code\nconst hello = 'world';\nconsole.log(hello);",
+  typescript:
+    "// TypeScript code\ninterface Config {\n  apiUrl: string;\n}\nconst config: Config = { apiUrl: '/api' };",
+  html: "<!DOCTYPE html>\n<html>\n<head>\n  <title>Hello</title>\n</head>\n<body>\n  <h1>Hello World</h1>\n</body>\n</html>",
+  css: "/* CSS Example */\n.container {\n  display: flex;\n  gap: 16px;\n  padding: 20px;\n}",
+  markdown: "# Heading\n\nParagraph text here.",
+  sql: "-- SQL Example\nSELECT * FROM users WHERE age > 18;",
+  yaml: "name: example\nversion: 1.0\nenvironment: development",
+  xml: '<?xml version="1.0"?>\n<root>\n  <item>value</item>\n</root>',
+  python: "# Python Example\ndef greet(name):\n    return f'Hello, {name}!'",
+  java: "// Java Example\npublic class Main {\n    public static void main(String[] args) {\n    }\n}",
+  php: "<?php\n// PHP Example\necho 'Hello World';",
+  rust: '// Rust Example\nfn main() {\n    println!("Hello, world!");\n}',
+  go: '// Go Example\npackage main\n\nfunc main() {\n    println("Hello")\n}',
+};
+
+function handleLanguageChange(lang: SupportedLanguage) {
+  selectedLanguage.value = lang;
+  multiLangContent.value = languageExamples[lang] || "";
+}
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  padding: 0;
+}
+
+.card {
+  background: var(--color-bg-container);
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.mb-lg {
+  margin-bottom: 24px;
+}
+
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.editor-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-title {
+  font-weight: 500;
+  margin-bottom: 12px;
+  color: var(--color-text);
+}
+
+.editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+
+  .editor-title {
+    margin-bottom: 0;
+  }
+}
+
+.auto-height-wrapper {
+  flex: 1;
+  max-height: 250px;
+  overflow: auto;
+}
+
+.output-preview {
+  background: var(--color-bg-layout);
+  padding: 16px;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 12px;
+  max-height: 300px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+:deep(.ant-divider) {
+  margin: 24px 0 16px;
+}
+</style>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/color-picker/index.vue b/antdv-next-admin/src/views/examples/color-picker/index.vue
new file mode 100644
index 0000000..d5da291
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/color-picker/index.vue
@@ -0,0 +1,327 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('exampleColorPicker.title') }}</h2>
+      <p class="mb-lg">{{ $t('exampleColorPicker.description') }}</p>
+
+      <a-tabs v-model:activeKey="activeTab">
+        <a-tab-pane key="basic" :tab="$t('exampleColorPicker.basicTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleColorPicker.basicUsage') }}</h4>
+            <a-space :size="16">
+              <a-color-picker v-model:value="basicColor" />
+              <span class="color-value">{{ basicColor }}</span>
+            </a-space>
+          </div>
+
+          <div class="demo-section">
+            <h4>{{ $t('exampleColorPicker.sizes') }}</h4>
+            <a-space :size="16">
+              <div class="size-item">
+                <span>small:</span>
+                <a-color-picker v-model:value="sizeColor" size="small" />
+              </div>
+              <div class="size-item">
+                <span>default:</span>
+                <a-color-picker v-model:value="sizeColor" />
+              </div>
+              <div class="size-item">
+                <span>large:</span>
+                <a-color-picker v-model:value="sizeColor" size="large" />
+              </div>
+            </a-space>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="preset" :tab="$t('exampleColorPicker.presetTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleColorPicker.presetColors') }}</h4>
+            <a-color-picker v-model:value="presetColor" :presets="presetColors" />
+            <p class="value-preview">{{ $t('exampleColorPicker.currentColor') }}: {{ presetColor }}</p>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="format" :tab="$t('exampleColorPicker.formatTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleColorPicker.formatSupport') }}</h4>
+            <a-space direction="vertical" :size="16">
+              <div class="format-item">
+                <span>HEX:</span>
+                <a-color-picker v-model:value="hexColor" format="hex" />
+                <span class="color-value">{{ hexColor }}</span>
+              </div>
+              <div class="format-item">
+                <span>RGB:</span>
+                <a-color-picker v-model:value="rgbColor" format="rgb" />
+                <span class="color-value">{{ rgbColor }}</span>
+              </div>
+              <div class="format-item">
+                <span>HSL:</span>
+                <a-color-picker v-model:value="hslColor" format="hsl" />
+                <span class="color-value">{{ hslColor }}</span>
+              </div>
+            </a-space>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="alpha" :tab="$t('exampleColorPicker.alphaTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleColorPicker.withAlpha') }}</h4>
+            <a-color-picker v-model:value="alphaColor" show-alpha />
+            <p class="value-preview">{{ $t('exampleColorPicker.currentColor') }}: {{ alphaColor }}</p>
+          </div>
+
+          <div class="demo-section">
+            <h4>{{ $t('exampleColorPicker.withoutAlpha') }}</h4>
+            <a-color-picker v-model:value="noAlphaColor" />
+            <p class="value-preview">{{ $t('exampleColorPicker.currentColor') }}: {{ noAlphaColor }}</p>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="disabled" :tab="$t('exampleColorPicker.disabledTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleColorPicker.disabledState') }}</h4>
+            <a-space :size="16">
+              <a-color-picker v-model:value="disabledColor" disabled />
+              <span class="color-value">{{ $t('exampleColorPicker.disabledHint') }}</span>
+            </a-space>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="business" :tab="$t('exampleColorPicker.businessTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleColorPicker.themeColor') }}</h4>
+            <div class="theme-picker">
+              <div class="theme-colors">
+                <div
+                  v-for="color in themeColors"
+                  :key="color.value"
+                  class="theme-color-item"
+                  :class="{ active: selectedTheme === color.value }"
+                  :style="{ backgroundColor: color.value }"
+                  @click="selectedTheme = color.value"
+                >
+                  <CheckOutlined v-if="selectedTheme === color.value" />
+                </div>
+              </div>
+              <a-color-picker v-model:value="customTheme" class="custom-picker" />
+            </div>
+          </div>
+
+          <div class="demo-section">
+            <h4>{{ $t('exampleColorPicker.tagColors') }}</h4>
+            <div class="tag-demo">
+              <a-tag v-for="tag in tags" :key="tag.label" :color="tag.color">
+                {{ tag.label }}
+              </a-tag>
+              <a-button size="small" @click="showTagModal = true">
+                <PlusOutlined /> {{ $t('exampleColorPicker.addTag') }}
+              </a-button>
+            </div>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+
+    <a-modal
+      v-model:open="showTagModal"
+      :title="$t('exampleColorPicker.addTag')"
+      @ok="handleAddTag"
+    >
+      <a-form layout="vertical">
+        <a-form-item :label="$t('exampleColorPicker.tagName')">
+          <a-input v-model:value="newTag.label" />
+        </a-form-item>
+        <a-form-item :label="$t('exampleColorPicker.tagColor')">
+          <a-color-picker v-model:value="newTag.color" show-alpha />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CheckOutlined, PlusOutlined } from '@antdv-next/icons'
+import { message } from 'antdv-next'
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const activeTab = ref('basic')
+const basicColor = ref('#1677ff')
+const sizeColor = ref('#1677ff')
+
+const presetColor = ref('#1677ff')
+const presetColors = [
+  {
+    label: 'Recommended',
+    colors: [
+      '#1677ff',
+      '#52c41a',
+      '#faad14',
+      '#f5222d',
+      '#722ed1',
+      '#13c2c2',
+      '#eb2f96',
+      '#fa8c16',
+    ],
+  },
+  {
+    label: 'Gray',
+    colors: [
+      '#ffffff',
+      '#f5f5f5',
+      '#d9d9d9',
+      '#bfbfbf',
+      '#8c8c8c',
+      '#595959',
+      '#434343',
+      '#262626',
+      '#1f1f1f',
+      '#141414',
+      '#000000',
+    ],
+  },
+]
+
+const hexColor = ref('#1677ff')
+const rgbColor = ref('rgb(22, 119, 255)')
+const hslColor = ref('hsl(210, 100%, 54%)')
+
+const alphaColor = ref('rgba(22, 119, 255, 0.6)')
+const noAlphaColor = ref('#1677ff')
+
+const disabledColor = ref('#1677ff')
+
+const selectedTheme = ref('#1677ff')
+const customTheme = ref('#1677ff')
+const themeColors = [
+  { name: 'Blue', value: '#1677ff' },
+  { name: 'Green', value: '#52c41a' },
+  { name: 'Purple', value: '#722ed1' },
+  { name: 'Red', value: '#f5222d' },
+  { name: 'Orange', value: '#fa8c16' },
+  { name: 'Cyan', value: '#13c2c2' },
+]
+
+const tags = ref([
+  { label: 'Vue', color: '#42b883' },
+  { label: 'React', color: '#61dafb' },
+  { label: 'Angular', color: '#dd0031' },
+])
+
+const showTagModal = ref(false)
+const newTag = reactive({
+  label: '',
+  color: '#1677ff',
+})
+
+const handleAddTag = () => {
+  if (!newTag.label) {
+    message.warning(t('exampleColorPicker.tagNameRequired'))
+    return
+  }
+  tags.value.push({ label: newTag.label, color: newTag.color })
+  newTag.label = ''
+  newTag.color = '#1677ff'
+  showTagModal.value = false
+  message.success(t('exampleColorPicker.addTagSuccess'))
+}
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.demo-section {
+  margin-bottom: 32px;
+
+  h4 {
+    margin-bottom: 12px;
+    font-weight: 500;
+  }
+}
+
+.color-value {
+  font-family: monospace;
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  background: var(--color-bg-container);
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.value-preview {
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: var(--color-bg-container);
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.size-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  span {
+    color: var(--color-text-secondary);
+  }
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  span:first-child {
+    width: 50px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.theme-picker {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.theme-colors {
+  display: flex;
+  gap: 8px;
+}
+
+.theme-color-item {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  transition: transform 0.2s;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &.active {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
+  }
+}
+
+.custom-picker {
+  margin-left: 8px;
+}
+
+.tag-demo {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/editor/index.vue b/antdv-next-admin/src/views/examples/editor/index.vue
new file mode 100644
index 0000000..85b3598
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/editor/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ t('exampleEditor.title') }}</h2>
+      <p class="text-secondary mb-lg">
+        {{ t('exampleEditor.description') }}
+      </p>
+
+      <a-space direction="vertical" :size="16" style="width: 100%">
+        <div>
+          <h3>{{ t('exampleEditor.basicUsage') }}</h3>
+          <Editor v-model="content1" :height="300" :placeholder="t('exampleEditor.placeholder')" />
+        </div>
+
+        <div>
+          <h3>{{ t('exampleEditor.disabledState') }}</h3>
+          <Editor v-model="content2" :height="200" disabled />
+        </div>
+
+        <div>
+          <h3>{{ t('exampleEditor.customHeight') }}</h3>
+          <Editor v-model="content3" :height="500" />
+        </div>
+
+        <div>
+          <h3>{{ t('exampleEditor.contentPreview') }}</h3>
+          <a-card :title="t('exampleEditor.htmlOutput')">
+            <pre class="html-preview">{{ content1 || t('exampleEditor.noContent') }}</pre>
+          </a-card>
+        </div>
+
+        <div>
+          <a-space>
+            <a-button type="primary" @click="handleSave">{{ t('exampleEditor.save') }}</a-button>
+            <a-button @click="handleClear">{{ t('exampleEditor.clear') }}</a-button>
+            <a-button @click="handleLoadDemo">{{ t('exampleEditor.loadDemo') }}</a-button>
+          </a-space>
+        </div>
+      </a-space>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'antdv-next';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Editor from '@/components/Editor/index.vue';
+
+const { t } = useI18n();
+
+const content1 = ref('<p>This is a rich text editor example based on <strong>Tiptap</strong>.</p>');
+const content2 = ref('<p>This editor is in disabled state and cannot be edited.</p>');
+const content3 = ref('');
+
+const handleSave = () => {
+  console.log('Saved content:', content1.value);
+  message.success(t('exampleEditor.savedMessage'));
+};
+
+const handleClear = () => {
+  content1.value = '';
+  message.info(t('exampleEditor.clearedMessage'));
+};
+
+const handleLoadDemo = () => {
+  content1.value = `
+    <h1>Welcome to Tiptap Editor</h1>
+    <p>This is a powerful rich text editor with the following features:</p>
+    <h2>Text Formatting</h2>
+    <ul>
+      <li><strong>Bold text</strong></li>
+      <li><em>Italic text</em></li>
+      <li><s>Strikethrough text</s></li>
+      <li><code>Inline code</code></li>
+    </ul>
+    <h2>Lists</h2>
+    <ol>
+      <li>Ordered list item 1</li>
+      <li>Ordered list item 2</li>
+      <li>Ordered list item 3</li>
+    </ol>
+    <h2>Blockquote</h2>
+    <blockquote>
+      <p>This is a blockquote, useful for highlighting important content.</p>
+    </blockquote>
+    <h2>Code Block</h2>
+    <pre><code>function hello() {
+  console.log('Hello, Tiptap!')
+}</code></pre>
+    <h2>Links</h2>
+    <p>Visit the <a href="https://tiptap.dev" target="_blank" rel="noopener noreferrer">Tiptap website</a> for more information.</p>
+  `;
+  message.success(t('exampleEditor.demoLoadedMessage'));
+};
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.html-preview {
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--color-bg-layout);
+  padding: 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/exception/403.vue b/antdv-next-admin/src/views/examples/exception/403.vue
new file mode 100644
index 0000000..717d9ee
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/exception/403.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="page-container">
+    <div class="card flex flex-1 min-h-[500px] items-center justify-center">
+      <a-result
+        status="403"
+        :title="$t('exampleException.403title')"
+        :sub-title="$t('exampleException.403description')"
+      >
+        <template #extra>
+          <a-button type="primary" @click="router.push('/')">
+            {{ $t('error.backHome') }}
+          </a-button>
+        </template>
+      </a-result>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+</script>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/exception/404.vue b/antdv-next-admin/src/views/examples/exception/404.vue
new file mode 100644
index 0000000..6fd232e
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/exception/404.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="page-container">
+    <div class="card flex flex-1 min-h-[500px] items-center justify-center">
+      <a-result
+        status="404"
+        :title="$t('exampleException.404title')"
+        :sub-title="$t('exampleException.404description')"
+      >
+        <template #extra>
+          <a-button type="primary" @click="router.push('/')">
+            {{ $t('error.backHome') }}
+          </a-button>
+        </template>
+      </a-result>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+</script>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/exception/500.vue b/antdv-next-admin/src/views/examples/exception/500.vue
new file mode 100644
index 0000000..415d683
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/exception/500.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="page-container">
+    <div class="card flex flex-1 min-h-[500px] items-center justify-center">
+      <a-result
+        status="500"
+        :title="$t('exampleException.500title')"
+        :sub-title="$t('exampleException.500description')"
+      >
+        <template #extra>
+          <a-button type="primary" @click="router.push('/')">
+            {{ $t('error.backHome') }}
+          </a-button>
+        </template>
+      </a-result>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+</script>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/external/iframe/antdv-next.vue b/antdv-next-admin/src/views/examples/external/iframe/antdv-next.vue
new file mode 100644
index 0000000..cb01198
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/external/iframe/antdv-next.vue
@@ -0,0 +1,19 @@
+<template>
+  <iframe
+    class="iframe"
+    src="https://www.antdv-next.com"
+    title="Antdv Next"
+    frameborder="0"
+    referrerpolicy="no-referrer"
+  />
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/external/iframe/typescript.vue b/antdv-next-admin/src/views/examples/external/iframe/typescript.vue
new file mode 100644
index 0000000..4ecb32d
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/external/iframe/typescript.vue
@@ -0,0 +1,19 @@
+<template>
+  <iframe
+    class="iframe"
+    src="https://www.typescriptlang.org"
+    title="TypeScript"
+    frameborder="0"
+    referrerpolicy="no-referrer"
+  />
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/external/link/vite.vue b/antdv-next-admin/src/views/examples/external/link/vite.vue
new file mode 100644
index 0000000..1d551b0
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/external/link/vite.vue
@@ -0,0 +1,25 @@
+<template>
+  <a-result
+    status="info"
+    :title="$t('external.link.openedTitle')"
+    :sub-title="$t('external.link.openedSubTitle')"
+  >
+    <template #extra>
+      <a-button type="primary" @click="open">
+        {{ $t('external.link.openVite') }}
+      </a-button>
+    </template>
+  </a-result>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+const url = 'https://vite.dev';
+const open = () => window.open(url, '_blank', 'noopener,noreferrer');
+
+onMounted(() => {
+  // In case user lands here via direct url, still open.
+  open();
+});
+</script>
diff --git a/antdv-next-admin/src/views/examples/external/link/vue.vue b/antdv-next-admin/src/views/examples/external/link/vue.vue
new file mode 100644
index 0000000..00e8409
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/external/link/vue.vue
@@ -0,0 +1,24 @@
+<template>
+  <a-result
+    status="info"
+    :title="$t('external.link.openedTitle')"
+    :sub-title="$t('external.link.openedSubTitle')"
+  >
+    <template #extra>
+      <a-button type="primary" @click="open">
+        {{ $t('external.link.openVue') }}
+      </a-button>
+    </template>
+  </a-result>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+const url = 'https://vuejs.org';
+const open = () => window.open(url, '_blank', 'noopener,noreferrer');
+
+onMounted(() => {
+  open();
+});
+</script>
diff --git a/antdv-next-admin/src/views/examples/form/index.vue b/antdv-next-admin/src/views/examples/form/index.vue
new file mode 100644
index 0000000..a7ce472
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/form/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t("form.title") }}</h2>
+      <p class="mb-lg">{{ $t("exampleForm.description") }}</p>
+
+      <ProForm
+        ref="formRef"
+        :form-items="formItems"
+        :grid="{ cols: 2, gutter: 16 }"
+        @finish="handleSubmit"
+      >
+        <template #footer>
+          <a-space>
+            <a-button type="primary" html-type="submit">
+              {{ $t("common.submit") }}
+            </a-button>
+            <a-button @click="handleReset">
+              {{ $t("common.reset") }}
+            </a-button>
+          </a-space>
+        </template>
+      </ProForm>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProFormItem } from "@/types/pro";
+
+import { message } from "antdv-next";
+import { ref } from "vue";
+
+import ProForm from "@/components/Pro/ProForm/index.vue";
+import { $t } from "@/locales";
+import { commonRules } from "@/utils/formRules";
+
+const formRef = ref();
+
+const formItems: ProFormItem[] = [
+  {
+    name: "username",
+    label: $t("user.username"),
+    type: "input",
+    required: true,
+    rules: [commonRules.length(3, 20), commonRules.username()],
+    props: {
+      placeholder: $t("login.usernamePlaceholder"),
+    },
+  },
+  {
+    name: "email",
+    label: $t("user.email"),
+    type: "input",
+    required: true,
+    rules: [commonRules.email()],
+  },
+  {
+    name: "password",
+    label: $t("login.password"),
+    type: "password",
+    required: true,
+    rules: [commonRules.password()],
+  },
+  {
+    name: "confirmPassword",
+    label: $t("profile.confirmPassword"),
+    type: "password",
+    required: true,
+    dependencies: ["password"],
+    rules: [
+      ({ getFieldValue }: { getFieldValue: (field: string) => unknown }) =>
+        commonRules.confirmPassword(getFieldValue),
+    ],
+  },
+  {
+    name: "phone",
+    label: $t("user.phone"),
+    type: "input",
+    rules: [commonRules.phone()],
+  },
+  {
+    name: "age",
+    label: $t("exampleForm.age"),
+    type: "number",
+    rules: [commonRules.range(1, 150, $t("exampleForm.ageRange"))],
+    props: {
+      min: 1,
+      max: 150,
+    },
+  },
+  {
+    name: "gender",
+    label: $t("user.gender"),
+    type: "radio",
+    required: true,
+    options: [
+      { label: $t("user.male"), value: "male" },
+      { label: $t("user.female"), value: "female" },
+    ],
+  },
+  {
+    name: "role",
+    label: $t("user.role"),
+    type: "select",
+    required: true,
+    options: [
+      { label: $t("exampleForm.roles.admin"), value: "admin" },
+      { label: $t("exampleForm.roles.user"), value: "user" },
+      { label: $t("exampleForm.roles.guest"), value: "guest" },
+    ],
+  },
+  {
+    name: "interests",
+    label: $t("exampleForm.interests"),
+    type: "checkbox",
+    options: [
+      { label: $t("exampleForm.interestOptions.reading"), value: "reading" },
+      { label: $t("exampleForm.interestOptions.sports"), value: "sports" },
+      { label: $t("exampleForm.interestOptions.music"), value: "music" },
+      { label: $t("exampleForm.interestOptions.travel"), value: "travel" },
+    ],
+  },
+  {
+    name: "birthDate",
+    label: $t("exampleForm.birthDate"),
+    type: "datePicker",
+    props: {
+      format: "YYYY-MM-DD",
+    },
+  },
+  {
+    name: "status",
+    label: $t("common.status"),
+    type: "switch",
+    valuePropName: "checked",
+    initialValue: true,
+  },
+  {
+    name: "score",
+    label: $t("exampleForm.score"),
+    type: "rate",
+    initialValue: 3,
+  },
+  {
+    name: "progress",
+    label: $t("exampleForm.progress"),
+    type: "slider",
+    initialValue: 50,
+    props: {
+      min: 0,
+      max: 100,
+    },
+  },
+  {
+    name: "bio",
+    label: $t("user.bio"),
+    type: "textarea",
+    colSpan: 2,
+    props: {
+      rows: 4,
+      maxLength: 500,
+      showCount: true,
+      placeholder: $t("exampleForm.bioPlaceholder"),
+    },
+  },
+];
+
+const handleSubmit = (values: Record<string, unknown>) => {
+  console.log("Form values:", values);
+  message.success($t("exampleForm.submitSuccess"));
+};
+
+const handleReset = () => {
+  formRef.value?.resetFields();
+};
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/i18n-input/index.vue b/antdv-next-admin/src/views/examples/i18n-input/index.vue
new file mode 100644
index 0000000..910ce3c
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/i18n-input/index.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>I18nInput {{ $t('common.component') }}</h2>
+      <p class="mb-lg">
+        {{ $t('examples.i18nInput.description') }}
+      </p>
+
+      <a-divider orientation="left">{{ $t('common.basicUsage') }}</a-divider>
+
+      <a-form :model="formState" layout="vertical">
+        <a-form-item :label="$t('examples.i18nInput.productName')">
+          <I18nInput
+            v-model:value="formState.productName"
+            :placeholder="$t('examples.i18nInput.clickToEdit')"
+            :modal-title="$t('examples.i18nInput.editProductName')"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('examples.i18nInput.productDescription')">
+          <I18nInput
+            v-model:value="formState.productDescription"
+            :placeholder="$t('examples.i18nInput.clickToEdit')"
+            :modal-title="$t('examples.i18nInput.editProductDesc')"
+          />
+        </a-form-item>
+
+        <a-divider orientation="left">{{ $t('common.advancedUsage') }}</a-divider>
+
+        <a-form-item :label="$t('examples.i18nInput.stringFormat')">
+          <div class="hint">{{ $t('examples.i18nInput.stringFormatHint') }}</div>
+          <I18nInput
+            v-model:value="formState.stringFormat"
+            :placeholder="$t('examples.i18nInput.clickToEdit')"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('examples.i18nInput.currentLocale')">
+          <div class="hint">{{ $t('examples.i18nInput.currentLocaleHint') }}</div>
+          <I18nInput
+            v-model:value="formState.withLocale"
+            locale="ja-JP"
+            :placeholder="$t('examples.i18nInput.clickToEdit')"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('examples.i18nInput.emptyValue')">
+          <I18nInput
+            v-model:value="formState.emptyValue"
+            :placeholder="$t('examples.i18nInput.clickToEdit')"
+          />
+        </a-form-item>
+      </a-form>
+
+      <a-divider orientation="left">{{ $t('common.preview') }}</a-divider>
+
+      <a-card :title="$t('examples.i18nInput.dataPreview')" size="small">
+        <pre class="json-preview">{{ JSON.stringify(formState, null, 2) }}</pre>
+      </a-card>
+
+      <a-divider orientation="left">{{ $t('examples.i18nInput.valueType') }}</a-divider>
+
+      <a-space>
+        <a-button @click="toggleValueType">
+          {{
+            showAsString
+              ? $t('examples.i18nInput.showAsObject')
+              : $t('examples.i18nInput.showAsString')
+          }}
+        </a-button>
+      </a-space>
+
+      <div v-if="showAsString" class="value-preview">
+        <h4>{{ $t('examples.i18nInput.stringValue') }}</h4>
+        <pre>{{ JSON.stringify(formState.productName) }}</pre>
+      </div>
+      <div v-else class="value-preview">
+        <h4>{{ $t('examples.i18nInput.objectValue') }}</h4>
+        <pre>{{ formState.productName }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+import I18nInput from '@/components/I18nInput/index.vue';
+
+const formState = reactive({
+  productName: {
+    'zh-CN': '苹果手机',
+    'en-US': 'iPhone',
+    'ja-JP': 'iPhone',
+    'ko-KR': '아이폰',
+  },
+  productDescription: {
+    'zh-CN': '这是最新款的智能手机，拥有强大的性能和优秀的拍照功能。',
+    'en-US':
+      'This is the latest smartphone with powerful performance and excellent camera capabilities.',
+    'ja-JP': 'これは最新のスマートフォンで、強力な性能と優れたカメラ機能を備えています。',
+    'ko-KR': '강력한 성능과 뛰어난 카메라 기능을 갖춘 최신 스마트폰입니다.',
+  },
+  stringFormat:
+    '{"zh-CN": "字符串格式", "en-US": "String Format", "ja-JP": "文字列形式", "ko-KR": "문자열 형식"}',
+  withLocale: {
+    'zh-CN': '指定显示日语',
+    'en-US': 'Show Japanese value',
+    'ja-JP': '日本語表示を指定',
+    'ko-KR': '일본어 표시 지정',
+  },
+  emptyValue: undefined as Record<string, string> | string | undefined,
+});
+
+const showAsString = ref(false);
+
+function toggleValueType() {
+  showAsString.value = !showAsString.value;
+}
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  padding: 0;
+}
+
+.card {
+  background: var(--color-bg-container);
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.mb-lg {
+  margin-bottom: 24px;
+}
+
+.hint {
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.json-preview {
+  background: var(--color-bg-layout);
+  padding: 16px;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.value-preview {
+  margin-top: 16px;
+  padding: 16px;
+  background: var(--color-bg-layout);
+  border-radius: 4px;
+
+  h4 {
+    margin-bottom: 8px;
+    color: var(--color-text-secondary);
+  }
+
+  pre {
+    font-family: monospace;
+    font-size: 12px;
+    overflow-x: auto;
+  }
+}
+
+:deep(.ant-divider) {
+  margin: 24px 0;
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/icon/index.vue b/antdv-next-admin/src/views/examples/icon/index.vue
new file mode 100644
index 0000000..c6e7906
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/icon/index.vue
@@ -0,0 +1,627 @@
+<template>
+  <div class="page-container icon-demo-page">
+    <svg class="sprite-defs" aria-hidden="true">
+      <symbol id="icon-demo-orbit" viewBox="0 0 1024 1024">
+        <circle cx="512" cy="512" r="332" fill="none" stroke="currentColor" stroke-width="72" />
+        <circle cx="512" cy="512" r="90" fill="currentColor" opacity="0.88" />
+        <path
+          d="M260 378c112-90 392-90 504 0"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="58"
+          stroke-linecap="round"
+        />
+      </symbol>
+
+      <symbol id="icon-demo-pulse" viewBox="0 0 1024 1024">
+        <rect
+          x="176"
+          y="176"
+          width="672"
+          height="672"
+          rx="156"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="68"
+        />
+        <path
+          d="M224 552h160l90-188 96 292 76-148h152"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="62"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </symbol>
+
+      <symbol id="icon-demo-spark" viewBox="0 0 1024 1024">
+        <path
+          d="M520 120l84 198 212 24-160 136 48 206-184-108-182 108 48-206-160-136 212-24z"
+          fill="currentColor"
+          opacity="0.88"
+        />
+      </symbol>
+    </svg>
+
+    <section class="card intro-card">
+      <div class="intro-main">
+        <h2 class="intro-title">{{ $t('exampleIcon.title') }}</h2>
+        <p class="intro-subtitle">{{ $t('exampleIcon.subtitle') }}</p>
+      </div>
+      <p class="intro-capability">{{ $t('exampleIcon.capabilities') }}</p>
+    </section>
+
+    <section class="card">
+      <div class="section-head">
+        <h3>{{ $t('exampleIcon.renderTitle') }}</h3>
+        <p>{{ $t('exampleIcon.renderSubtitle') }}</p>
+      </div>
+
+      <div class="sample-hint">
+        <a-tag color="blue">{{ $t('exampleIcon.sampleHint') }}</a-tag>
+      </div>
+
+      <div class="samples-layout">
+        <article
+          v-for="group in showcaseGroups"
+          :key="group.key"
+          class="group-card"
+          :style="{ '--group-color': group.color }"
+        >
+          <div class="group-head">
+            <div class="group-title">{{ group.label }}</div>
+            <a-tag :color="group.color">{{ group.tag }}</a-tag>
+          </div>
+
+          <div class="mini-grid">
+            <button
+              v-for="item in group.items"
+              :key="item.icon"
+              type="button"
+              class="mini-item"
+              :class="{ active: activeIcon === item.icon }"
+              @click="applyExampleIcon(item.icon)"
+            >
+              <IconView :icon="item.icon" :size="18" />
+              <span>{{ item.name }}</span>
+            </button>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="card">
+      <div class="section-head">
+        <h3>{{ $t('exampleIcon.guidesTitle') }}</h3>
+        <p>{{ $t('exampleIcon.guidesSubtitle') }}</p>
+      </div>
+
+      <div class="guide-grid">
+        <article class="guide-card">
+          <h4>{{ $t('exampleIcon.svgGuideTitle') }}</h4>
+          <ol>
+            <li>{{ $t('exampleIcon.guideStepSvg1') }}</li>
+            <li>{{ $t('exampleIcon.guideStepSvg2') }}</li>
+            <li>{{ $t('exampleIcon.guideStepSvg3') }}</li>
+          </ol>
+          <pre><code>{{ svgGuideCode }}</code></pre>
+        </article>
+
+        <article class="guide-card">
+          <h4>{{ $t('exampleIcon.iconifyGuideTitle') }}</h4>
+          <ol>
+            <li>{{ $t('exampleIcon.guideStepIconify1') }}</li>
+            <li>{{ $t('exampleIcon.guideStepIconify2') }}</li>
+            <li>{{ $t('exampleIcon.guideStepIconify3') }}</li>
+          </ol>
+          <pre><code>{{ iconifyGuideCode }}</code></pre>
+        </article>
+      </div>
+    </section>
+
+    <section class="card picker-card">
+      <div class="section-head">
+        <h3>{{ $t('exampleIcon.pickerTitle') }}</h3>
+        <p>{{ $t('exampleIcon.pickerSubtitle') }}</p>
+      </div>
+
+      <div class="picker-shell">
+        <div class="picker-toolbar">
+          <div class="picker-input-wrap">
+            <IconPicker
+              v-model="pickedIcon"
+              :svg-icons="svgSymbolNames"
+              :placeholder="$t('exampleIcon.modelLabel')"
+              :online-limit="160"
+            />
+          </div>
+
+          <a-space :size="10" wrap>
+            <a-button type="primary" @click="copyIconValue">
+              <CopyOutlined />
+              {{ $t('exampleIcon.copy') }}
+            </a-button>
+            <a-button @click="resetIconValue">
+              <ReloadOutlined />
+              {{ $t('exampleIcon.reset') }}
+            </a-button>
+          </a-space>
+        </div>
+
+        <div class="picker-body">
+          <div class="hero-panel">
+            <div class="hero-icon-wrap">
+              <IconView :icon="activeIcon" :size="64" />
+            </div>
+
+            <div class="hero-info">
+              <div class="hero-value">{{ activeIcon }}</div>
+              <a-space :size="8" wrap>
+                <a-tag color="blue">{{ $t('exampleIcon.sourceLabel') }}</a-tag>
+                <a-tag>{{ activeSourceText }}</a-tag>
+              </a-space>
+            </div>
+          </div>
+
+          <div class="preview-fields">
+            <div class="preview-field">
+              <label>{{ $t('exampleIcon.modelLabel') }}</label>
+              <a-input :value="activeIcon" readonly />
+            </div>
+
+            <div class="preview-field">
+              <label>{{ $t('exampleIcon.previewLabel') }}</label>
+              <div class="preview-inline">
+                <IconView :icon="activeIcon" :size="20" />
+                <span>{{ activeIcon }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CopyOutlined, ReloadOutlined } from '@antdv-next/icons';
+import { message } from 'antdv-next';
+import { computed, ref } from 'vue';
+
+import IconView from '@/components/Icon/index.vue';
+import IconPicker from '@/components/IconPicker/index.vue';
+import { $t } from '@/locales';
+
+const svgOrbitId = 'icon-demo-orbit';
+const svgPulseId = 'icon-demo-pulse';
+const svgSparkId = 'icon-demo-spark';
+const svgSymbolNames = [svgOrbitId, svgPulseId, svgSparkId];
+
+const defaultIcon = 'ri:map-pin-time-line';
+const pickedIcon = ref(defaultIcon);
+
+const activeIcon = computed(() => pickedIcon.value || defaultIcon);
+
+const activeSourceText = computed(() => {
+  const value = activeIcon.value.trim();
+  if (value.startsWith('svg:')) return $t('exampleIcon.sourceSvg');
+  if (value.startsWith('antdv-next:') || value.startsWith('antd:'))
+    return $t('exampleIcon.sourceAntdv');
+  if (value.startsWith('ri:') || value.startsWith('mdi:') || value.startsWith('ion:')) {
+    return $t('exampleIcon.sourceIconify');
+  }
+  if (value.includes(':')) return $t('exampleIcon.sourceOnline');
+  return $t('exampleIcon.sourceUnknown');
+});
+
+const showcaseGroups = computed(() => [
+  {
+    key: 'svg',
+    label: $t('exampleIcon.modeSvg'),
+    tag: 'svg',
+    color: '#f59e0b',
+    items: [
+      { icon: `svg:${svgOrbitId}`, name: 'orbit' },
+      { icon: `svg:${svgPulseId}`, name: 'pulse' },
+      { icon: `svg:${svgSparkId}`, name: 'spark' },
+    ],
+  },
+  {
+    key: 'antdv',
+    label: $t('exampleIcon.modeAntdv'),
+    tag: 'antdv-next',
+    color: '#1677ff',
+    items: [
+      { icon: 'antdv-next:HomeOutlined', name: 'HomeOutlined' },
+      { icon: 'antdv-next:AppstoreOutlined', name: 'AppstoreOutlined' },
+      { icon: 'antdv-next:SettingOutlined', name: 'SettingOutlined' },
+      { icon: 'antdv-next:BellOutlined', name: 'BellOutlined' },
+      { icon: 'antdv-next:SafetyOutlined', name: 'SafetyOutlined' },
+    ],
+  },
+  {
+    key: 'iconify',
+    label: $t('exampleIcon.modeIconify'),
+    tag: 'iconify',
+    color: '#10b981',
+    items: [
+      { icon: 'ri:map-pin-time-line', name: 'ri:map-pin-time-line' },
+      { icon: 'ri:compass-3-line', name: 'ri:compass-3-line' },
+      { icon: 'mdi:account-circle-outline', name: 'mdi:account-circle-outline' },
+      { icon: 'mdi:email-outline', name: 'mdi:email-outline' },
+      { icon: 'ion:planet-outline', name: 'ion:planet-outline' },
+    ],
+  },
+]);
+
+const svgGuideCode = `<svg aria-hidden="true" style="position:absolute;width:0;height:0">
+  <symbol id="icon-demo-orbit" viewBox="0 0 1024 1024">...</symbol>
+</svg>
+
+<IconView icon="svg:icon-demo-orbit" :size="20" />`;
+
+const iconifyGuideCode = `<IconView icon="ri:home-line" :size="20" />
+<IconView icon="mdi:account-circle-outline" :size="20" />
+
+<IconPicker v-model="iconValue" />`;
+
+const applyExampleIcon = (icon: string) => {
+  pickedIcon.value = icon;
+};
+
+const copyFallback = (value: string) => {
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+};
+
+const copyIconValue = async () => {
+  const value = activeIcon.value.trim();
+  if (!value) {
+    message.warning($t('exampleIcon.copyEmpty'));
+    return;
+  }
+
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(value);
+    } else {
+      copyFallback(value);
+    }
+    message.success($t('exampleIcon.copySuccess'));
+  } catch (error) {
+    try {
+      copyFallback(value);
+      message.success($t('exampleIcon.copySuccess'));
+    } catch {
+      message.error($t('exampleIcon.copyFailed'));
+    }
+  }
+};
+
+const resetIconValue = () => {
+  pickedIcon.value = defaultIcon;
+};
+</script>
+
+<style scoped lang="scss">
+.icon-demo-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+
+  > .card {
+    flex-shrink: 0;
+  }
+}
+
+.sprite-defs {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.intro-card {
+  position: relative;
+  overflow: hidden;
+  border-color: rgba(22, 119, 255, 0.16);
+  background:
+    radial-gradient(circle at 14% -20%, rgba(22, 119, 255, 0.2), transparent 44%),
+    radial-gradient(circle at 100% 120%, rgba(245, 158, 11, 0.22), transparent 30%),
+    var(--color-bg-container);
+}
+
+.intro-main {
+  margin-bottom: 6px;
+}
+
+.intro-title {
+  margin: 0 0 4px;
+  color: var(--color-text-primary);
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+}
+
+.intro-subtitle {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+.intro-capability {
+  margin: 0;
+  color: #2158b6;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.section-head {
+  margin-bottom: 12px;
+
+  h3 {
+    margin: 0 0 4px;
+    color: var(--color-text-primary);
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 0;
+    color: var(--color-text-secondary);
+    font-size: 13px;
+  }
+}
+
+.sample-hint {
+  margin-bottom: 10px;
+}
+
+.samples-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 12px;
+}
+
+.group-card {
+  border: 1px solid color-mix(in srgb, var(--group-color), var(--color-border-secondary) 72%);
+  border-radius: 12px;
+  background: linear-gradient(
+    160deg,
+    color-mix(in srgb, var(--group-color), var(--color-bg-container) 90%) 0%,
+    var(--color-bg-container) 55%
+  );
+  padding: 12px;
+}
+
+.group-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.group-title {
+  color: var(--color-text-primary);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.mini-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
+  gap: 8px;
+}
+
+.mini-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 58px;
+  margin: 0;
+  padding: 6px;
+  transition: all var(--duration-base) var(--ease-out);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  background: var(--color-bg-container);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+
+  span {
+    overflow: hidden;
+    max-width: 100%;
+    font-size: 11px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+    border-color: var(--group-color);
+    color: var(--group-color);
+  }
+
+  &.active {
+    border-color: var(--group-color);
+    background: color-mix(in srgb, var(--group-color), var(--color-bg-container) 89%);
+    color: var(--group-color);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--group-color), var(--color-bg-container) 55%);
+  }
+}
+
+.guide-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 12px;
+}
+
+.guide-card {
+  padding: 14px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 12px;
+  background: var(--color-bg-container);
+
+  h4 {
+    margin: 0 0 8px;
+    color: var(--color-text-primary);
+    font-size: 15px;
+    font-weight: 700;
+  }
+
+  ol {
+    margin: 0 0 10px;
+    padding-left: 18px;
+    color: var(--color-text-secondary);
+    font-size: 13px;
+  }
+
+  li + li {
+    margin-top: 4px;
+  }
+
+  pre {
+    margin: 0;
+    padding: 10px;
+    overflow: auto;
+    border: 1px solid var(--color-border-secondary);
+    border-radius: 8px;
+    background: var(--color-bg-layout);
+    color: var(--color-text-secondary);
+    font-size: 12px;
+    line-height: 1.45;
+  }
+}
+
+.picker-shell {
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 12px;
+  background: var(--color-bg-layout);
+  padding: 14px;
+}
+
+.picker-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.picker-input-wrap {
+  flex: 1;
+  min-width: 220px;
+}
+
+.picker-input-wrap :deep(.ip-input-trigger) {
+  width: 100%;
+}
+
+.picker-body {
+  display: grid;
+  grid-template-columns: minmax(250px, 320px) minmax(300px, 1fr);
+  gap: 12px;
+  align-items: stretch;
+}
+
+.hero-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  padding: 14px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 10px;
+  background: var(--color-bg-container);
+}
+
+.hero-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 94px;
+  height: 94px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 14px;
+  background: var(--color-bg-container);
+  color: var(--color-primary);
+}
+
+.hero-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.hero-value {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 10px;
+  background: var(--color-bg-container);
+}
+
+.preview-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  label {
+    color: var(--color-text-secondary);
+    font-size: 12px;
+    font-weight: 500;
+  }
+}
+
+.preview-inline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 8px 10px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  background: var(--color-bg-container);
+  color: var(--color-text-primary);
+  font-size: 13px;
+}
+
+@media (max-width: 1080px) {
+  .picker-body {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 860px) {
+  .picker-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+@media (max-width: 768px) {
+  .intro-title {
+    font-size: 20px;
+  }
+
+  .guide-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/json-input/index.vue b/antdv-next-admin/src/views/examples/json-input/index.vue
new file mode 100644
index 0000000..8724cb6
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/json-input/index.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>JsonInput {{ $t("common.component") || "Component" }}</h2>
+      <p class="mb-lg">
+        {{ $t("examples.jsonInput.description") }}
+      </p>
+
+      <a-divider orientation="left">{{ $t("common.basicUsage") }}</a-divider>
+
+      <a-form :model="formState" layout="vertical">
+        <a-form-item :label="$t('examples.jsonInput.userConfig')">
+          <JsonInput
+            v-model:value="formState.userConfig"
+            :field-config="{
+              address: { component: 'textarea', maxLength: 500 },
+            }"
+            :placeholder="$t('examples.jsonInput.clickToEdit')"
+            :modal-title="$t('examples.jsonInput.editUserConfig')"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('examples.jsonInput.displayValue')">
+          <JsonInput
+            v-model:value="formState.productInfo"
+            display-key="name"
+            :field-config="{
+              description: { component: 'textarea', maxLength: 500 },
+            }"
+            :placeholder="$t('examples.jsonInput.selectProduct')"
+          />
+        </a-form-item>
+
+        <a-divider orientation="left">{{
+          $t("common.advancedUsage")
+        }}</a-divider>
+
+        <a-form-item :label="$t('examples.jsonInput.withI18nKeys')">
+          <div class="hint">{{ $t("examples.jsonInput.i18nKeysHint") }}</div>
+          <JsonInput
+            v-model:value="formState.i18nConfig"
+            :label-map="{
+              name: $t('user.username'),
+              email: $t('user.email'),
+              age: $t('user.age'),
+              department: $t('user.department'),
+              position: $t('user.position'),
+            }"
+            :placeholder="$t('examples.jsonInput.clickToEdit')"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('examples.jsonInput.withDisabledFields')">
+          <JsonInput
+            v-model:value="formState.systemConfig"
+            :disabled-fields="['id', 'apiKey']"
+            :placeholder="$t('examples.jsonInput.systemConfig')"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('examples.jsonInput.nestedObject')">
+          <JsonInput
+            v-model:value="formState.nestedData"
+            :placeholder="$t('examples.jsonInput.nestedData')"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('examples.jsonInput.emptyObject')">
+          <JsonInput
+            v-model:value="formState.newConfig"
+            :placeholder="$t('examples.jsonInput.createNew')"
+          />
+        </a-form-item>
+      </a-form>
+
+      <a-divider orientation="left">{{ $t("common.preview") }}</a-divider>
+
+      <a-card title="Data Preview" size="small">
+        <pre class="json-preview">{{ JSON.stringify(formState, null, 2) }}</pre>
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+
+import JsonInput from "@/components/JsonInput/index.vue";
+
+const formState = reactive({
+  userConfig: {
+    name: "John Doe",
+    email: "john@example.com",
+    age: 28,
+    isActive: true,
+    tags: ["developer", "admin"],
+    address: "123 Main St, City",
+  },
+  productInfo: {
+    name: "MacBook Pro",
+    price: 1999,
+    stock: 50,
+    description: "High-performance laptop for professionals",
+  },
+  i18nConfig: {
+    name: "张三",
+    email: "zhangsan@example.com",
+    age: 30,
+    department: "技术部",
+    position: "高级工程师",
+  },
+  systemConfig: {
+    id: "sys-001",
+    apiKey: "sk-1234567890abcdef",
+    endpoint: "https://api.example.com",
+    timeout: 30,
+  },
+  nestedData: {
+    user: {
+      name: "Jane Smith",
+      email: "jane@example.com",
+    },
+    settings: {
+      theme: "dark",
+      language: "zh-CN",
+    },
+  },
+  newConfig: null as Record<string, unknown> | null,
+});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  padding: 0;
+}
+
+.card {
+  background: var(--color-bg-container);
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.mb-lg {
+  margin-bottom: 24px;
+}
+
+.json-preview {
+  background: var(--color-bg-layout);
+  padding: 16px;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.hint {
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+:deep(.ant-divider) {
+  margin: 24px 0;
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/milkdown/index.vue b/antdv-next-admin/src/views/examples/milkdown/index.vue
new file mode 100644
index 0000000..354266d
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/milkdown/index.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="milkdown-demo">
+    <a-page-header
+      title="Milkdown Markdown 编辑器"
+      sub-title="基于 @milkdown/vue 的 Markdown 编辑器组件"
+    />
+
+    <a-row :gutter="[16, 16]">
+      <!-- 基础用法 -->
+      <a-col :span="24">
+        <a-card title="基础用法" :bordered="false">
+          <p class="desc">支持实时预览的 Markdown 编辑器，基于 ProseMirror 构建</p>
+          <MilkdownEditor
+            v-model="content1"
+            placeholder="开始输入 Markdown 内容..."
+            :height="300"
+          />
+          <div class="output-section">
+            <a-divider />
+            <h4>Markdown 源码：</h4>
+            <pre class="code-block">{{ content1 }}</pre>
+          </div>
+        </a-card>
+      </a-col>
+
+      <!-- 默认内容 -->
+      <a-col :span="24">
+        <a-card title="默认内容" :bordered="false">
+          <p class="desc">支持设置默认内容，自动渲染为可编辑的富文本</p>
+          <MilkdownEditor v-model="content2" :height="400" />
+        </a-card>
+      </a-col>
+
+      <!-- 只读模式 -->
+      <a-col :span="24" :lg="12">
+        <a-card title="只读模式" :bordered="false">
+          <p class="desc">支持只读模式，用于展示 Markdown 内容</p>
+          <MilkdownEditor v-model="content3" :readonly="true" :height="250" />
+        </a-card>
+      </a-col>
+
+      <!-- 特性说明 -->
+      <a-col :span="24" :lg="12">
+        <a-card title="支持的特性" :bordered="false">
+          <a-list size="small">
+            <a-list-item>
+              <CheckCircleOutlined class="feature-icon" />
+              标准 Markdown 语法（CommonMark）
+            </a-list-item>
+            <a-list-item>
+              <CheckCircleOutlined class="feature-icon" />
+              GitHub Flavored Markdown（GFM）
+            </a-list-item>
+            <a-list-item>
+              <CheckCircleOutlined class="feature-icon" />
+              代码块高亮（Prism）
+            </a-list-item>
+            <a-list-item>
+              <CheckCircleOutlined class="feature-icon" />
+              快捷键支持（Slash 命令）
+            </a-list-item>
+            <a-list-item>
+              <CheckCircleOutlined class="feature-icon" />
+              工具栏提示（Tooltip）
+            </a-list-item>
+            <a-list-item>
+              <CheckCircleOutlined class="feature-icon" />
+              拖拽编辑（Block）
+            </a-list-item>
+            <a-list-item>
+              <CheckCircleOutlined class="feature-icon" />
+              历史记录（Undo/Redo）
+            </a-list-item>
+            <a-list-item>
+              <CheckCircleOutlined class="feature-icon" />
+              剪贴板支持（粘贴图片）
+            </a-list-item>
+          </a-list>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CheckCircleOutlined } from '@antdv-next/icons';
+import { ref } from 'vue';
+
+import MilkdownEditor from '@/components/Milkdown/index.vue';
+
+const content1 = ref('');
+
+const content2 = ref(`# Milkdown 编辑器
+
+## 简介
+
+Milkdown 是一个**插件驱动**的 Markdown 编辑器框架，基于：
+
+- 📝 ProseMirror - 专业的编辑器框架
+- 🎨 Remark - Markdown 处理器
+- ⚡ Vue 3 - 响应式框架
+
+## 功能特性
+
+### 1. 基础格式
+
+- **粗体** 和 *斜体*
+- ~~删除线~~
+-
+### 2. 列表
+
+有序列表：
+1. 第一项
+2. 第二项
+3. 第三项
+
+无序列表：
+- 苹果
+- 香蕉
+- 橙子
+
+### 3. 代码
+
+行内代码：\`const hello = 'world'\`
+
+代码块：
+\`\`\`typescript
+function greet(name: string) {
+  console.log(\`Hello, \${name}!\`)
+}
+\`\`\`
+
+### 4. 表格
+
+| 姓名 | 年龄 | 城市 |
+|------|------|------|
+| 张三 | 25 | 北京 |
+| 李四 | 30 | 上海 |
+
+### 5. 任务列表
+
+- [x] 已完成任务
+- [ ] 待办任务
+
+## 链接和图片
+
+[访问 GitHub](https://github.com)
+
+> 这是一段引用文本
+
+---
+
+**提示：** 试试输入 "/" 查看 Slash 命令菜单！
+`);
+
+const content3 = ref(`# 只读模式示例
+
+此内容以**只读模式**显示，用户无法编辑。
+
+## 适用场景
+
+1. 文档预览
+2. 内容展示
+3. 文章阅读
+
+> 💡 提示：可以通过 \`readonly\` 属性控制编辑状态。`);
+</script>
+
+<style scoped lang="scss">
+.milkdown-demo {
+  padding: 24px;
+
+  .desc {
+    color: var(--color-text-secondary);
+    margin-bottom: 16px;
+  }
+
+  .output-section {
+    margin-top: 16px;
+
+    h4 {
+      margin-bottom: 12px;
+      font-weight: 500;
+    }
+  }
+
+  .code-block {
+    background: var(--color-bg-layout);
+    padding: 16px;
+    border-radius: var(--radius-base);
+    font-family: 'Courier New', monospace;
+    font-size: 13px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .feature-icon {
+    color: var(--color-success);
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/modal/index.vue b/antdv-next-admin/src/views/examples/modal/index.vue
new file mode 100644
index 0000000..8e1deb8
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/modal/index.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('exampleModal.title') }}</h2>
+      <p class="mb-6">{{ $t('exampleModal.description') }}</p>
+
+      <a-space wrap :size="12" class="mb-6">
+        <a-button type="primary" @click="openDefaultModal">
+          {{ $t('exampleModal.openDefault') }}
+        </a-button>
+        <a-button @click="openWideModal">
+          {{ $t('exampleModal.openWide') }}
+        </a-button>
+      </a-space>
+
+      <div class="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-3">
+        <div class="config-item">
+          <span>{{ $t('exampleModal.width') }}</span>
+          <a-input-number
+            v-model:value="modalWidth"
+            :min="420"
+            :max="1200"
+            :step="20"
+            style="width: 140px"
+          />
+        </div>
+
+        <div class="config-item">
+          <span>{{ $t('exampleModal.draggable') }}</span>
+          <a-switch v-model:checked="draggable" />
+        </div>
+
+        <div class="config-item">
+          <span>{{ $t('exampleModal.resizable') }}</span>
+          <a-switch v-model:checked="resizable" />
+        </div>
+
+        <div class="config-item">
+          <span>{{ $t('exampleModal.fullscreenable') }}</span>
+          <a-switch v-model:checked="fullscreenable" />
+        </div>
+
+        <div class="config-item">
+          <span>{{ $t('exampleModal.mask') }}</span>
+          <a-switch v-model:checked="mask" />
+        </div>
+
+        <div class="config-item">
+          <span>{{ $t('exampleModal.maskClosable') }}</span>
+          <a-switch v-model:checked="maskClosable" />
+        </div>
+
+        <div class="config-item">
+          <span>{{ $t('exampleModal.keyboard') }}</span>
+          <a-switch v-model:checked="keyboard" />
+        </div>
+
+        <div class="config-item">
+          <span>{{ $t('exampleModal.dataCount') }}</span>
+          <a-input-number
+            v-model:value="dataCount"
+            :min="1"
+            :max="300"
+            :step="10"
+            style="width: 140px"
+          />
+        </div>
+      </div>
+    </div>
+
+    <ProModal
+      v-model:open="modalOpen"
+      :title="$t('exampleModal.modalTitle')"
+      :width="modalWidth"
+      :mask="mask"
+      :mask-closable="maskClosable"
+      :keyboard="keyboard"
+      :draggable="draggable"
+      :resizable="resizable"
+      :fullscreenable="fullscreenable"
+      @ok="handleConfirm"
+      @cancel="handleCancel"
+    >
+      <a-alert
+        type="info"
+        show-icon
+        :message="$t('exampleModal.hint')"
+        style="margin-bottom: 16px"
+      />
+
+      <div class="flex flex-col gap-3">
+        <h3>{{ $t('exampleModal.contentTitle') }}</h3>
+        <p>{{ $t('exampleModal.contentDescription') }}</p>
+
+        <a-form layout="vertical">
+          <a-form-item :label="$t('exampleModal.formKeyword')">
+            <a-input :placeholder="$t('exampleModal.formKeywordPlaceholder')" />
+          </a-form-item>
+          <a-form-item :label="$t('exampleModal.formRemark')">
+            <a-textarea :rows="3" :placeholder="$t('exampleModal.formRemarkPlaceholder')" />
+          </a-form-item>
+        </a-form>
+
+        <div class="flex items-center gap-3 whitespace-nowrap">
+          <span>{{ $t('exampleModal.dataCount') }}</span>
+          <a-slider v-model:value="dataCount" :min="1" :max="300" style="flex: 1" />
+          <a-input-number
+            v-model:value="dataCount"
+            :min="1"
+            :max="300"
+            size="small"
+            style="width: 72px"
+          />
+        </div>
+
+        <div class="border border-[var(--color-border-secondary)] rounded-lg overflow-hidden">
+          <div
+            v-for="row in mockRows"
+            :key="row"
+            class="py-2.5 px-3 border-b border-[var(--color-border-secondary)] last:border-b-0"
+          >
+            {{ $t('exampleModal.rowText', { index: row }) }}
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <a-space>
+          <a-button @click="handleCancel">{{ $t('common.cancel') }}</a-button>
+          <a-button type="primary" @click="handleConfirm">{{ $t('common.confirm') }}</a-button>
+        </a-space>
+      </template>
+    </ProModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'antdv-next';
+import { computed, ref } from 'vue';
+
+import ProModal from '@/components/Pro/ProModal/index.vue';
+import { $t } from '@/locales';
+
+const modalOpen = ref(false);
+const modalWidth = ref(760);
+const draggable = ref(true);
+const resizable = ref(true);
+const fullscreenable = ref(true);
+const mask = ref(true);
+const maskClosable = ref(true);
+const keyboard = ref(true);
+const dataCount = ref(24);
+
+const mockRows = computed(() => {
+  return Array.from({ length: dataCount.value }, (_, index) => index + 1);
+});
+
+const openDefaultModal = () => {
+  modalWidth.value = 760;
+  modalOpen.value = true;
+};
+
+const openWideModal = () => {
+  modalWidth.value = 980;
+  modalOpen.value = true;
+};
+
+const handleCancel = () => {
+  modalOpen.value = false;
+};
+
+const handleConfirm = () => {
+  message.success($t('exampleModal.confirmSuccess'));
+  modalOpen.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.config-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 10px;
+  background: var(--color-bg-container);
+  white-space: nowrap;
+}
+</style>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/qrcode/index.vue b/antdv-next-admin/src/views/examples/qrcode/index.vue
new file mode 100644
index 0000000..fed2ad2
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/qrcode/index.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('exampleQRCode.title') }}</h2>
+      <p class="mb-lg">{{ $t('exampleQRCode.description') }}</p>
+
+      <a-tabs v-model:activeKey="activeTab">
+        <a-tab-pane key="basic" :tab="$t('exampleQRCode.basicTab')">
+          <div class="qrcode-section">
+            <a-form layout="vertical" :style="{ maxWidth: '400px' }">
+              <a-form-item :label="$t('exampleQRCode.content')">
+                <a-input v-model:value="basicContent" />
+              </a-form-item>
+              <a-form-item :label="$t('exampleQRCode.size')">
+                <a-input-number v-model:value="basicSize" :min="100" :max="400" :step="20" />
+              </a-form-item>
+            </a-form>
+            <div class="qrcode-preview">
+              <a-qrcode :value="basicContent" :size="basicSize" />
+            </div>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="style" :tab="$t('exampleQRCode.styleTab')">
+          <div class="qrcode-section">
+            <a-form layout="vertical" :style="{ maxWidth: '400px' }">
+              <a-form-item :label="$t('exampleQRCode.bgColor')">
+                <input type="color" v-model="styleBgColor" />
+              </a-form-item>
+              <a-form-item :label="$t('exampleQRCode.fgColor')">
+                <input type="color" v-model="styleFgColor" />
+              </a-form-item>
+              <a-form-item :label="$t('exampleQRCode.errorLevel')">
+                <a-select v-model:value="styleErrorLevel" style="width: 150px">
+                  <a-select-option value="L">L (7%)</a-select-option>
+                  <a-select-option value="M">M (15%)</a-select-option>
+                  <a-select-option value="Q">Q (25%)</a-select-option>
+                  <a-select-option value="H">H (30%)</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-form>
+            <div class="qrcode-preview">
+              <a-qrcode
+                value="https://www.antdv-next.com"
+                :size="200"
+                :bg-color="styleBgColor"
+                :fg-color="styleFgColor"
+                :error-level="styleErrorLevel"
+              />
+            </div>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="logo" :tab="$t('exampleQRCode.logoTab')">
+          <div class="qrcode-section">
+            <p class="hint">{{ $t('exampleQRCode.logoHint') }}</p>
+            <div class="qrcode-preview">
+              <a-qrcode value="https://www.antdv-next.com" :size="280" :error-level="'H'">
+                <template #icon>
+                  <img
+                    src="https://www.antdv-next.com/antdv-next.svg"
+                    alt="logo"
+                    style="width: 40px; height: 40px"
+                  />
+                </template>
+              </a-qrcode>
+            </div>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="status" :tab="$t('exampleQRCode.statusTab')">
+          <div class="qrcode-section">
+            <a-space :size="24">
+              <div class="status-item">
+                <a-qrcode value="https://www.antdv-next.com" status="active" />
+                <span class="status-label">{{ $t('exampleQRCode.statusActive') }}</span>
+              </div>
+              <div class="status-item">
+                <a-qrcode value="https://www.antdv-next.com" status="expired" />
+                <span class="status-label">{{ $t('exampleQRCode.statusExpired') }}</span>
+              </div>
+              <div class="status-item">
+                <a-qrcode value="https://www.antdv-next.com" status="loading" />
+                <span class="status-label">{{ $t('exampleQRCode.statusLoading') }}</span>
+              </div>
+            </a-space>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="download" :tab="$t('exampleQRCode.downloadTab')">
+          <div class="qrcode-section">
+            <a-form layout="vertical" :style="{ maxWidth: '400px' }">
+              <a-form-item :label="$t('exampleQRCode.downloadContent')">
+                <a-input v-model:value="downloadContent" />
+              </a-form-item>
+              <a-form-item :label="$t('exampleQRCode.fileName')">
+                <a-input v-model:value="downloadFileName" />
+              </a-form-item>
+            </a-form>
+            <div class="qrcode-preview">
+              <a-qrcode ref="downloadQRRef" :value="downloadContent" :size="200" />
+              <a-button type="primary" style="margin-top: 16px" @click="handleDownload">
+                <DownloadOutlined /> {{ $t('exampleQRCode.downloadButton') }}
+              </a-button>
+            </div>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DownloadOutlined } from '@antdv-next/icons'
+import type { QRCodeProps } from 'antdv-next'
+import { message } from 'antdv-next'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const activeTab = ref('basic')
+const basicContent = ref('https://www.antdv-next.com')
+const basicSize = ref(200)
+
+const styleBgColor = ref('#ffffff')
+const styleFgColor = ref('#000000')
+const styleErrorLevel = ref<QRCodeProps['errorLevel']>('M')
+
+const downloadContent = ref('https://www.antdv-next.com')
+const downloadFileName = ref('antdv-next-qrcode')
+
+const downloadQRRef = ref()
+
+const handleDownload = () => {
+  const canvas = downloadQRRef.value?.$el?.querySelector('canvas')
+  if (canvas) {
+    const url = canvas.toDataURL('image/png')
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${downloadFileName.value}.png`
+    link.click()
+    message.success(t('exampleQRCode.downloadSuccess'))
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.qrcode-section {
+  display: flex;
+  gap: 32px;
+  align-items: flex-start;
+  padding: 16px 0;
+}
+
+.qrcode-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.hint {
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+
+.status-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-label {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+
+input[type='color'] {
+  width: 60px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/scaffold/advanced-filter/index.vue b/antdv-next-admin/src/views/examples/scaffold/advanced-filter/index.vue
new file mode 100644
index 0000000..ccee6b1
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/advanced-filter/index.vue
@@ -0,0 +1,569 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('examples.scaffold.advancedFilter.title') }}</h2>
+      <p class="text-secondary mb-lg">{{ $t('examples.scaffold.advancedFilter.description') }}</p>
+
+      <a-alert
+        class="mb-lg"
+        type="info"
+        show-icon
+        :message="$t('examples.scaffold.advancedFilter.tips')"
+      />
+
+      <div class="toolbar">
+        <a-space wrap>
+          <a-radio-group v-model:value="relation" button-style="solid">
+            <a-radio-button value="AND">AND</a-radio-button>
+            <a-radio-button value="OR">OR</a-radio-button>
+          </a-radio-group>
+          <a-button type="dashed" @click="addCondition">
+            <PlusOutlined />
+            {{ $t('examples.scaffold.advancedFilter.addCondition') }}
+          </a-button>
+          <a-button @click="resetConditions">{{ $t('common.reset') }}</a-button>
+          <a-button type="primary" :disabled="conditions.length === 0" @click="openSaveModal">
+            {{ $t('examples.scaffold.advancedFilter.saveScheme') }}
+          </a-button>
+        </a-space>
+        <div class="text-secondary">
+          {{ $t('examples.scaffold.advancedFilter.matchedCount', { count: filteredRows.length }) }}
+        </div>
+      </div>
+
+      <div class="condition-list">
+        <div v-if="conditions.length === 0" class="condition-empty">
+          <a-empty :description="$t('examples.scaffold.advancedFilter.emptyConditions')" />
+        </div>
+
+        <div v-for="(condition, index) in conditions" :key="condition.id" class="condition-row">
+          <div class="condition-index">{{ index + 1 }}</div>
+
+          <a-select
+            class="field-select"
+            :value="condition.field"
+            :options="fieldOptions"
+            @change="(field: unknown) => onFieldChange(condition, field as FieldKey)"
+          />
+
+          <a-select
+            class="operator-select"
+            :value="condition.operator"
+            :options="getOperatorOptions(condition.field)"
+            @change="(operator: unknown) => onOperatorChange(condition, operator as Operator)"
+          />
+
+          <div class="value-editor">
+            <template v-if="isSelectField(condition.field)">
+              <a-select
+                v-if="condition.operator === 'in'"
+                v-model:value="condition.value"
+                mode="multiple"
+                :placeholder="getValuePlaceholder(condition)"
+                :options="getSelectOptions(condition.field)"
+              />
+              <a-select
+                v-else
+                v-model:value="condition.value"
+                :placeholder="getValuePlaceholder(condition)"
+                :options="getSelectOptions(condition.field)"
+              />
+            </template>
+
+            <template v-else-if="isNumberField(condition.field)">
+              <a-input-number
+                v-model:value="condition.value"
+                class="value-number"
+                :placeholder="getValuePlaceholder(condition)"
+              />
+              <a-input-number
+                v-if="condition.operator === 'between'"
+                v-model:value="condition.value2"
+                class="value-number"
+                :placeholder="$t('examples.scaffold.advancedFilter.secondValue')"
+              />
+            </template>
+
+            <template v-else>
+              <a-input
+                v-model:value="condition.value"
+                :placeholder="getValuePlaceholder(condition)"
+              />
+              <a-input
+                v-if="condition.operator === 'between'"
+                v-model:value="condition.value2"
+                :placeholder="$t('examples.scaffold.advancedFilter.secondValue')"
+              />
+            </template>
+          </div>
+
+          <a-button type="text" danger class="remove-btn" @click="removeCondition(condition.id)">
+            <DeleteOutlined />
+          </a-button>
+        </div>
+      </div>
+
+      <div class="scheme-bar">
+        <a-space wrap>
+          <span class="text-secondary">{{
+            $t('examples.scaffold.advancedFilter.savedSchemes')
+          }}</span>
+          <a-tag v-if="savedSchemes.length === 0">
+            {{ $t('examples.scaffold.advancedFilter.noSchemes') }}
+          </a-tag>
+          <a-tag
+            v-for="scheme in savedSchemes"
+            :key="scheme.id"
+            :color="activeSchemeId === scheme.id ? 'processing' : undefined"
+            closable
+            class="scheme-tag"
+            @click="applyScheme(scheme.id)"
+            @close="removeScheme(scheme.id)"
+          >
+            {{ scheme.name }}
+          </a-tag>
+        </a-space>
+      </div>
+
+      <a-divider />
+
+      <a-table
+        row-key="id"
+        size="small"
+        :columns="columns"
+        :data-source="previewRows"
+        :pagination="false"
+      />
+    </div>
+
+    <a-modal
+      v-model:open="saveModalOpen"
+      :title="$t('examples.scaffold.advancedFilter.saveScheme')"
+      :ok-text="$t('common.confirm')"
+      :cancel-text="$t('common.cancel')"
+      @ok="saveCurrentScheme"
+    >
+      <a-input
+        v-model:value="schemeName"
+        :maxlength="30"
+        :placeholder="$t('examples.scaffold.advancedFilter.schemeNamePlaceholder')"
+        @press-enter="saveCurrentScheme"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DeleteOutlined, PlusOutlined } from '@antdv-next/icons';
+import { message } from 'antdv-next';
+import { computed, ref } from 'vue';
+
+import { $t } from '@/locales';
+
+type Relation = 'AND' | 'OR';
+type FieldKey = 'username' | 'status' | 'role' | 'score' | 'createdAt';
+type FieldType = 'string' | 'select' | 'number' | 'date';
+type Operator =
+  | 'contains'
+  | 'equals'
+  | 'notEquals'
+  | 'in'
+  | 'gt'
+  | 'gte'
+  | 'lt'
+  | 'lte'
+  | 'between'
+  | 'before'
+  | 'after';
+
+interface Condition {
+  id: string;
+  field: FieldKey;
+  operator: Operator;
+  value: string | number | string[] | null;
+  value2?: string | number | null;
+}
+
+interface SavedScheme {
+  id: string;
+  name: string;
+  relation: Relation;
+  conditions: Condition[];
+}
+
+interface DemoRow {
+  id: string;
+  username: string;
+  status: 'active' | 'inactive' | 'pending';
+  role: 'admin' | 'operator' | 'auditor';
+  score: number;
+  createdAt: string;
+}
+
+interface FieldConfig {
+  type: FieldType;
+  options?: Array<{ label: string; value: string }>;
+}
+
+const FIELD_CONFIG: Record<FieldKey, FieldConfig> = {
+  username: { type: 'string' },
+  status: {
+    type: 'select',
+    options: [
+      { label: $t('examples.scaffold.advancedFilter.statusActive'), value: 'active' },
+      { label: $t('examples.scaffold.advancedFilter.statusInactive'), value: 'inactive' },
+      { label: $t('examples.scaffold.advancedFilter.statusPending'), value: 'pending' },
+    ],
+  },
+  role: {
+    type: 'select',
+    options: [
+      { label: $t('examples.scaffold.advancedFilter.adminRole'), value: 'admin' },
+      { label: $t('examples.scaffold.advancedFilter.operatorRole'), value: 'operator' },
+      { label: $t('examples.scaffold.advancedFilter.auditorRole'), value: 'auditor' },
+    ],
+  },
+  score: { type: 'number' },
+  createdAt: { type: 'date' },
+};
+
+const OPERATOR_MAP: Record<FieldType, Operator[]> = {
+  string: ['contains', 'equals', 'notEquals'],
+  select: ['equals', 'notEquals', 'in'],
+  number: ['equals', 'gt', 'gte', 'lt', 'lte', 'between'],
+  date: ['equals', 'before', 'after', 'between'],
+};
+
+const relation = ref<Relation>('AND');
+const conditions = ref<Condition[]>([createCondition('username')]);
+const savedSchemes = ref<SavedScheme[]>([]);
+const activeSchemeId = ref('');
+
+const saveModalOpen = ref(false);
+const schemeName = ref('');
+
+const allRows = ref<DemoRow[]>(createRows());
+
+const fieldOptions = computed(() => [
+  { label: $t('user.username'), value: 'username' },
+  { label: $t('common.status'), value: 'status' },
+  { label: $t('menu.role'), value: 'role' },
+  { label: $t('examples.scaffold.advancedFilter.score'), value: 'score' },
+  { label: $t('common.createTime'), value: 'createdAt' },
+]);
+
+const columns = computed(() => [
+  { title: 'ID', dataIndex: 'id', width: 120 },
+  { title: $t('user.username'), dataIndex: 'username', width: 180 },
+  { title: $t('common.status'), dataIndex: 'status', width: 120 },
+  { title: $t('menu.role'), dataIndex: 'role', width: 120 },
+  { title: $t('examples.scaffold.advancedFilter.score'), dataIndex: 'score', width: 120 },
+  { title: $t('common.createTime'), dataIndex: 'createdAt', width: 180 },
+]);
+
+const filteredRows = computed(() => {
+  const activeConditions = conditions.value.filter(hasValue);
+  if (activeConditions.length === 0) {
+    return allRows.value;
+  }
+
+  return allRows.value.filter((row) => {
+    if (relation.value === 'AND') {
+      return activeConditions.every((condition) => evaluateCondition(row, condition));
+    }
+    return activeConditions.some((condition) => evaluateCondition(row, condition));
+  });
+});
+
+const previewRows = computed(() => filteredRows.value.slice(0, 30));
+
+function createRows() {
+  const statusList: DemoRow['status'][] = ['active', 'inactive', 'pending'];
+  const roleList: DemoRow['role'][] = ['admin', 'operator', 'auditor'];
+
+  return Array.from({ length: 180 }, (_, index) => {
+    const i = index + 1;
+    const day = String((i % 28) + 1).padStart(2, '0');
+    const month = String((i % 12) + 1).padStart(2, '0');
+
+    return {
+      id: `U${String(i).padStart(4, '0')}`,
+      username: `user_${String(i).padStart(4, '0')}`,
+      status: statusList[i % statusList.length],
+      role: roleList[i % roleList.length],
+      score: 50 + (i % 50),
+      createdAt: `2025-${month}-${day}`,
+    };
+  });
+}
+
+function createCondition(field: FieldKey): Condition {
+  const type = FIELD_CONFIG[field].type;
+  const operator = OPERATOR_MAP[type][0];
+
+  return {
+    id: `${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
+    field,
+    operator,
+    value: type === 'number' ? 0 : '',
+  };
+}
+
+function isSelectField(field: FieldKey) {
+  return FIELD_CONFIG[field].type === 'select';
+}
+
+function isNumberField(field: FieldKey) {
+  return FIELD_CONFIG[field].type === 'number';
+}
+
+function getSelectOptions(field: FieldKey) {
+  return FIELD_CONFIG[field].options || [];
+}
+
+function getOperatorOptions(field: FieldKey) {
+  const type = FIELD_CONFIG[field].type;
+  return OPERATOR_MAP[type].map((operator) => ({
+    label: getOperatorLabel(operator),
+    value: operator,
+  }));
+}
+
+function getOperatorLabel(operator: Operator) {
+  const map: Record<Operator, string> = {
+    contains: $t('examples.scaffold.advancedFilter.opContains'),
+    equals: $t('examples.scaffold.advancedFilter.opEquals'),
+    notEquals: $t('examples.scaffold.advancedFilter.opNotEquals'),
+    in: $t('examples.scaffold.advancedFilter.opIn'),
+    gt: $t('examples.scaffold.advancedFilter.opGt'),
+    gte: $t('examples.scaffold.advancedFilter.opGte'),
+    lt: $t('examples.scaffold.advancedFilter.opLt'),
+    lte: $t('examples.scaffold.advancedFilter.opLte'),
+    between: $t('examples.scaffold.advancedFilter.opBetween'),
+    before: $t('examples.scaffold.advancedFilter.opBefore'),
+    after: $t('examples.scaffold.advancedFilter.opAfter'),
+  };
+
+  return map[operator];
+}
+
+function getValuePlaceholder(condition: Condition) {
+  if (condition.field === 'createdAt') {
+    return 'YYYY-MM-DD';
+  }
+  if (isSelectField(condition.field)) {
+    return $t('examples.scaffold.advancedFilter.selectValue');
+  }
+  return $t('examples.scaffold.advancedFilter.inputValue');
+}
+
+function onFieldChange(condition: Condition, field: FieldKey) {
+  condition.field = field;
+  const type = FIELD_CONFIG[field].type;
+  condition.operator = OPERATOR_MAP[type][0];
+  condition.value = type === 'number' ? 0 : '';
+  condition.value2 = null;
+}
+
+function onOperatorChange(condition: Condition, operator: Operator) {
+  condition.operator = operator;
+  condition.value2 = null;
+
+  if (operator === 'in') {
+    condition.value = Array.isArray(condition.value) ? condition.value : [];
+    return;
+  }
+
+  if (Array.isArray(condition.value)) {
+    condition.value = condition.value[0] || '';
+  }
+}
+
+function hasValue(condition: Condition) {
+  if (condition.operator === 'between') {
+    return (
+      condition.value !== '' &&
+      condition.value !== null &&
+      condition.value2 !== '' &&
+      condition.value2 !== null
+    );
+  }
+
+  if (condition.operator === 'in') {
+    return Array.isArray(condition.value) && condition.value.length > 0;
+  }
+
+  return condition.value !== '' && condition.value !== null;
+}
+
+function evaluateCondition(row: DemoRow, condition: Condition) {
+  const rowValue = row[condition.field];
+  const target = condition.value;
+
+  switch (condition.operator) {
+    case 'contains':
+      return String(rowValue).toLowerCase().includes(String(target).toLowerCase());
+    case 'equals':
+      return String(rowValue) === String(target);
+    case 'notEquals':
+      return String(rowValue) !== String(target);
+    case 'in':
+      return Array.isArray(target) && target.includes(String(rowValue));
+    case 'gt':
+      return Number(rowValue) > Number(target);
+    case 'gte':
+      return Number(rowValue) >= Number(target);
+    case 'lt':
+      return Number(rowValue) < Number(target);
+    case 'lte':
+      return Number(rowValue) <= Number(target);
+    case 'between':
+      return String(rowValue) >= String(target) && String(rowValue) <= String(condition.value2);
+    case 'before':
+      return String(rowValue) < String(target);
+    case 'after':
+      return String(rowValue) > String(target);
+    default:
+      return true;
+  }
+}
+
+function addCondition() {
+  conditions.value.push(createCondition('username'));
+}
+
+function removeCondition(id: string) {
+  conditions.value = conditions.value.filter((item) => item.id !== id);
+  if (conditions.value.length === 0) {
+    conditions.value = [createCondition('username')];
+  }
+}
+
+function resetConditions() {
+  relation.value = 'AND';
+  activeSchemeId.value = '';
+  conditions.value = [createCondition('username')];
+}
+
+function openSaveModal() {
+  schemeName.value = '';
+  saveModalOpen.value = true;
+}
+
+function saveCurrentScheme() {
+  const name = schemeName.value.trim();
+  if (!name) {
+    message.warning($t('examples.scaffold.advancedFilter.schemeNameRequired'));
+    return;
+  }
+
+  const newScheme: SavedScheme = {
+    id: `${Date.now()}`,
+    name,
+    relation: relation.value,
+    conditions: JSON.parse(JSON.stringify(conditions.value)),
+  };
+
+  savedSchemes.value = [newScheme, ...savedSchemes.value];
+  activeSchemeId.value = newScheme.id;
+  saveModalOpen.value = false;
+  message.success($t('examples.scaffold.advancedFilter.saveSuccess'));
+}
+
+function applyScheme(id: string) {
+  const scheme = savedSchemes.value.find((item) => item.id === id);
+  if (!scheme) {
+    return;
+  }
+
+  relation.value = scheme.relation;
+  conditions.value = JSON.parse(JSON.stringify(scheme.conditions));
+  activeSchemeId.value = id;
+}
+
+function removeScheme(id: string) {
+  savedSchemes.value = savedSchemes.value.filter((item) => item.id !== id);
+  if (activeSchemeId.value === id) {
+    activeSchemeId.value = '';
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: var(--spacing-md);
+}
+
+.condition-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.condition-empty {
+  padding: 24px 0;
+}
+
+.condition-row {
+  display: grid;
+  grid-template-columns: 32px 170px 170px 1fr 36px;
+  gap: 10px;
+  align-items: center;
+  padding: 10px;
+  border-radius: 8px;
+  background: var(--color-bg-layout);
+}
+
+.condition-index {
+  text-align: center;
+  color: var(--color-text-secondary);
+  font-size: 12px;
+}
+
+.value-editor {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.value-number {
+  width: 100%;
+}
+
+.remove-btn {
+  justify-self: end;
+}
+
+.scheme-bar {
+  margin-top: 12px;
+}
+
+.scheme-tag {
+  cursor: pointer;
+}
+
+@media (max-width: 992px) {
+  .condition-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .condition-index {
+    display: none;
+  }
+
+  .remove-btn {
+    justify-self: start;
+    padding-left: 0;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/complex-form/index.vue b/antdv-next-admin/src/views/examples/scaffold/complex-form/index.vue
new file mode 100644
index 0000000..9747b8c
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/complex-form/index.vue
@@ -0,0 +1,466 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t("examples.scaffold.complexForm.title") }}</h2>
+      <p class="text-secondary mb-lg">
+        {{ $t("examples.scaffold.complexForm.description") }}
+      </p>
+
+      <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
+        <ProStepForm
+          ref="stepFormRef"
+          v-model="currentStep"
+          :steps="stepDefinitions"
+          @next="nextStep"
+          @submit="submitForm"
+        >
+          <template #step-0>
+            <div class="grid-two">
+              <a-form-item
+                :label="$t('examples.scaffold.complexForm.projectNameLabel')"
+                name="projectName"
+              >
+                <a-input
+                  v-model:value="formState.projectName"
+                  :placeholder="
+                    $t('examples.scaffold.complexForm.projectNamePlaceholder')
+                  "
+                />
+              </a-form-item>
+              <a-form-item
+                :label="$t('examples.scaffold.complexForm.ownerLabel')"
+                name="owner"
+              >
+                <a-input
+                  v-model:value="formState.owner"
+                  :placeholder="
+                    $t('examples.scaffold.complexForm.ownerPlaceholder')
+                  "
+                />
+              </a-form-item>
+              <a-form-item
+                :label="$t('examples.scaffold.complexForm.sceneLabel')"
+                name="scene"
+              >
+                <a-select
+                  v-model:value="formState.scene"
+                  :placeholder="
+                    $t('examples.scaffold.complexForm.scenePlaceholder')
+                  "
+                  :options="sceneOptions"
+                />
+              </a-form-item>
+              <a-form-item
+                :label="$t('examples.scaffold.complexForm.descriptionLabel')"
+                name="description"
+              >
+                <a-textarea
+                  v-model:value="formState.description"
+                  :rows="3"
+                  :placeholder="
+                    $t('examples.scaffold.complexForm.descriptionPlaceholder')
+                  "
+                />
+              </a-form-item>
+            </div>
+          </template>
+
+          <template #step-1>
+            <div class="mb-md">
+              <a-space>
+                <a-button type="dashed" @click="addRule">{{
+                  $t("examples.scaffold.complexForm.addRuleButton")
+                }}</a-button>
+                <a-tag>{{
+                  $t("examples.scaffold.complexForm.currentRulesCount", {
+                    count: formState.rules.length,
+                  })
+                }}</a-tag>
+              </a-space>
+            </div>
+
+            <div
+              v-for="(rule, index) in formState.rules"
+              :key="rule.id"
+              class="rule-row"
+            >
+              <a-input
+                v-model:value="rule.metric"
+                :placeholder="
+                  $t('examples.scaffold.complexForm.metricPlaceholder')
+                "
+              />
+              <a-select
+                v-model:value="rule.operator"
+                :options="operatorOptions"
+                style="width: 120px"
+              />
+              <a-input-number
+                v-model:value="rule.threshold"
+                :min="0"
+                :max="10000"
+                style="width: 180px"
+              />
+              <a-button danger @click="removeRule(index)">{{
+                $t("examples.scaffold.complexForm.deleteButton")
+              }}</a-button>
+            </div>
+
+            <a-alert
+              v-if="ruleError"
+              class="mt-md"
+              type="error"
+              show-icon
+              :message="ruleError"
+            />
+          </template>
+
+          <template #step-2>
+            <div class="grid-two">
+              <a-form-item
+                :label="$t('examples.scaffold.complexForm.publishTypeLabel')"
+                name="publishType"
+              >
+                <a-radio-group v-model:value="formState.publishType">
+                  <a-radio value="immediate">{{
+                    $t("examples.scaffold.complexForm.publishImmediate")
+                  }}</a-radio>
+                  <a-radio value="schedule">{{
+                    $t("examples.scaffold.complexForm.publishSchedule")
+                  }}</a-radio>
+                </a-radio-group>
+              </a-form-item>
+
+              <a-form-item
+                :label="$t('examples.scaffold.complexForm.publishTimeLabel')"
+                name="publishTime"
+                :rules="[
+                  {
+                    validator: validatePublishTime,
+                    trigger: 'change',
+                  },
+                ]"
+              >
+                <a-date-picker
+                  v-model:value="formState.publishTime"
+                  show-time
+                  style="width: 100%"
+                  :disabled="formState.publishType !== 'schedule'"
+                />
+              </a-form-item>
+
+              <a-form-item
+                :label="$t('examples.scaffold.complexForm.notifyUsersLabel')"
+                name="notifyUsers"
+                class="full-row"
+              >
+                <a-select
+                  v-model:value="formState.notifyUsers"
+                  mode="tags"
+                  :token-separators="[',']"
+                  :placeholder="
+                    $t('examples.scaffold.complexForm.notifyUsersPlaceholder')
+                  "
+                />
+              </a-form-item>
+            </div>
+          </template>
+
+          <template #extra-actions>
+            <a-button @click="saveDraft">{{
+              $t("examples.scaffold.complexForm.saveDraftButton")
+            }}</a-button>
+            <a-button @click="resetForm">{{
+              $t("examples.scaffold.complexForm.resetButton")
+            }}</a-button>
+          </template>
+        </ProStepForm>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProStepFormStep } from "@/types/pro";
+
+import type { Dayjs } from "dayjs";
+
+import { message } from "antdv-next";
+import { computed, onMounted, reactive, ref } from "vue";
+
+import ProStepForm from "@/components/Pro/ProStepForm/index.vue";
+import { $t } from "@/locales";
+
+interface PolicyRule {
+  id: string;
+  metric: string;
+  operator: ">" | ">=" | "<" | "<=";
+  threshold: number | null;
+}
+
+interface FormState {
+  projectName: string;
+  owner: string;
+  scene: string;
+  description: string;
+  rules: PolicyRule[];
+  publishType: "immediate" | "schedule";
+  publishTime: Dayjs | null;
+  notifyUsers: string[];
+}
+
+const DRAFT_KEY = "example:complex-form:draft";
+
+const formRef = ref<{
+  validateFields: (fields?: string[]) => Promise<void>;
+  clearValidate: () => void;
+  setFields: (fields: { name: string[]; errors: string[] }[]) => void;
+} | null>(null);
+const currentStep = ref(0);
+const ruleError = ref("");
+
+const stepDefinitions = computed<ProStepFormStep[]>(() => [
+  { title: $t("examples.scaffold.complexForm.step1Title") },
+  { title: $t("examples.scaffold.complexForm.step2Title") },
+  { title: $t("examples.scaffold.complexForm.step3Title") },
+]);
+
+const formState = reactive<FormState>({
+  projectName: "",
+  owner: "",
+  scene: "",
+  description: "",
+  rules: [
+    {
+      id: `${Date.now()}`,
+      metric: "error_rate",
+      operator: ">",
+      threshold: 5,
+    },
+  ],
+  publishType: "immediate",
+  publishTime: null,
+  notifyUsers: [],
+});
+
+const sceneOptions = computed(() => [
+  { label: $t("examples.scaffold.complexForm.sceneGrowth"), value: "growth" },
+  { label: $t("examples.scaffold.complexForm.sceneRisk"), value: "risk" },
+  {
+    label: $t("examples.scaffold.complexForm.sceneStability"),
+    value: "stability",
+  },
+]);
+
+const operatorOptions = [
+  { label: ">", value: ">" },
+  { label: ">=", value: ">=" },
+  { label: "<", value: "<" },
+  { label: "<=", value: "<=" },
+];
+
+const checkProjectNameUnique = async (_rule: unknown, value: string) => {
+  // 空值由 required 规则处理,这里只负责唯一性校验,避免重复提示
+  if (!value) {
+    return Promise.resolve();
+  }
+
+  await new Promise((resolve) => setTimeout(resolve, 300));
+
+  const reservedNames = ["default", "admin", "production"];
+  if (reservedNames.includes(value.trim().toLowerCase())) {
+    return Promise.reject(
+      new Error($t("examples.scaffold.complexForm.projectNameExists")),
+    );
+  }
+
+  return Promise.resolve();
+};
+
+const rules = {
+  projectName: [
+    {
+      required: true,
+      message: $t("examples.scaffold.complexForm.projectNameRequired"),
+    },
+    { validator: checkProjectNameUnique, trigger: "blur" },
+  ],
+  owner: [
+    {
+      required: true,
+      message: $t("examples.scaffold.complexForm.ownerRequired"),
+    },
+  ],
+  scene: [
+    {
+      required: true,
+      message: $t("examples.scaffold.complexForm.sceneRequired"),
+    },
+  ],
+  publishType: [
+    {
+      required: true,
+      message: $t("examples.scaffold.complexForm.publishTypeRequired"),
+    },
+  ],
+};
+
+const validatePublishTime = async () => {
+  if (formState.publishType === "schedule" && !formState.publishTime) {
+    return Promise.reject(
+      new Error($t("examples.scaffold.complexForm.publishTimeRequired")),
+    );
+  }
+  return Promise.resolve();
+};
+
+const validateRuleList = () => {
+  if (formState.rules.length === 0) {
+    ruleError.value = $t("examples.scaffold.complexForm.ruleListEmpty");
+    return false;
+  }
+
+  const invalid = formState.rules.some((item) => {
+    return !item.metric || !item.operator || item.threshold == null;
+  });
+
+  if (invalid) {
+    ruleError.value = $t("examples.scaffold.complexForm.ruleListIncomplete");
+    return false;
+  }
+
+  ruleError.value = "";
+  return true;
+};
+
+const addRule = () => {
+  formState.rules.push({
+    id: `${Date.now()}-${Math.random()}`,
+    metric: "",
+    operator: ">",
+    threshold: null,
+  });
+};
+
+const removeRule = (index: number) => {
+  formState.rules.splice(index, 1);
+};
+
+const nextStep = async (step: number) => {
+  if (step === 0) {
+    await formRef.value?.validateFields?.(["projectName", "owner", "scene"]);
+  }
+
+  if (step === 1 && !validateRuleList()) {
+    return;
+  }
+
+  currentStep.value = step + 1;
+};
+
+const resetForm = () => {
+  formState.projectName = "";
+  formState.owner = "";
+  formState.scene = "";
+  formState.description = "";
+  formState.rules = [
+    { id: `${Date.now()}`, metric: "error_rate", operator: ">", threshold: 5 },
+  ];
+  formState.publishType = "immediate";
+  formState.publishTime = null;
+  formState.notifyUsers = [];
+  currentStep.value = 0;
+  ruleError.value = "";
+  formRef.value?.clearValidate?.();
+};
+
+const saveDraft = () => {
+  localStorage.setItem(DRAFT_KEY, JSON.stringify(formState));
+  message.success($t("examples.scaffold.complexForm.draftSaved"));
+};
+
+const loadDraft = () => {
+  const draft = localStorage.getItem(DRAFT_KEY);
+  if (!draft) {
+    return;
+  }
+
+  try {
+    const parsed = JSON.parse(draft);
+    Object.assign(formState, parsed);
+  } catch {
+    localStorage.removeItem(DRAFT_KEY);
+  }
+};
+
+const submitForm = async () => {
+  await formRef.value?.validateFields?.(["publishType", "publishTime"]);
+
+  if (!validateRuleList()) {
+    currentStep.value = 1;
+    return;
+  }
+
+  // 模拟后端字段错误映射
+  if (formState.projectName.toLowerCase().includes("fail")) {
+    currentStep.value = 0;
+    formRef.value?.setFields?.([
+      {
+        name: ["projectName"],
+        errors: [$t("examples.scaffold.complexForm.serverValidationError")],
+      },
+    ]);
+    message.error($t("examples.scaffold.complexForm.submitFailed"));
+    return;
+  }
+
+  await new Promise((resolve) => setTimeout(resolve, 600));
+  localStorage.removeItem(DRAFT_KEY);
+  message.success($t("examples.scaffold.complexForm.submitSuccess"));
+};
+
+onMounted(() => {
+  loadDraft();
+});
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.mb-md {
+  margin-bottom: var(--spacing-md);
+}
+
+.mt-md {
+  margin-top: var(--spacing-md);
+}
+
+.grid-two {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.full-row {
+  grid-column: 1 / -1;
+}
+
+.rule-row {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 1fr 120px 180px 80px;
+  margin-bottom: 10px;
+}
+
+@media (max-width: 900px) {
+  .grid-two {
+    grid-template-columns: 1fr;
+  }
+
+  .rule-row {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/import-export/index.vue b/antdv-next-admin/src/views/examples/scaffold/import-export/index.vue
new file mode 100644
index 0000000..c6323d4
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/import-export/index.vue
@@ -0,0 +1,360 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('examples.scaffold.importExport.title') }}</h2>
+      <p class="text-secondary mb-lg">{{ $t('examples.scaffold.importExport.description') }}</p>
+
+      <a-space wrap class="mb-lg">
+        <a-button @click="downloadTemplate">
+          <DownloadOutlined />
+          {{ $t('examples.scaffold.importExport.downloadTemplate') }}
+        </a-button>
+
+        <a-upload :show-upload-list="false" accept=".csv" :before-upload="handleImport">
+          <a-button type="primary" :loading="importing">
+            <UploadOutlined />
+            {{ $t('examples.scaffold.importExport.importCsv') }}
+          </a-button>
+        </a-upload>
+
+        <a-button @click="exportCurrentData">
+          <DownloadOutlined />
+          {{ $t('examples.scaffold.importExport.exportCurrent') }}
+        </a-button>
+
+        <a-button :disabled="importErrors.length === 0" @click="exportErrorReceipt">
+          <DownloadOutlined />
+          {{ $t('examples.scaffold.importExport.exportErrorReceipt') }}
+        </a-button>
+      </a-space>
+
+      <a-row :gutter="12" class="mb-lg">
+        <a-col :xs="12" :md="6">
+          <a-statistic
+            :title="$t('examples.scaffold.importExport.totalRows')"
+            :value="lastSummary.total"
+          />
+        </a-col>
+        <a-col :xs="12" :md="6">
+          <a-statistic
+            :title="$t('examples.scaffold.importExport.successRows')"
+            :value="lastSummary.success"
+          />
+        </a-col>
+        <a-col :xs="12" :md="6">
+          <a-statistic
+            :title="$t('examples.scaffold.importExport.updatedRows')"
+            :value="lastSummary.updated"
+          />
+        </a-col>
+        <a-col :xs="12" :md="6">
+          <a-statistic
+            :title="$t('examples.scaffold.importExport.failedRows')"
+            :value="lastSummary.failed"
+          />
+        </a-col>
+      </a-row>
+
+      <a-alert
+        class="mb-lg"
+        type="info"
+        show-icon
+        :message="$t('examples.scaffold.importExport.importHint')"
+      />
+
+      <a-table
+        row-key="code"
+        size="small"
+        :columns="dataColumns"
+        :data-source="rows"
+        :pagination="{ pageSize: 8 }"
+      />
+
+      <a-divider />
+
+      <a-table
+        row-key="id"
+        size="small"
+        :columns="errorColumns"
+        :data-source="importErrors"
+        :pagination="{ pageSize: 6 }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DownloadOutlined, UploadOutlined } from '@antdv-next/icons';
+import { message } from 'antdv-next';
+import { computed, ref } from 'vue';
+
+import { $t } from '@/locales';
+
+interface ProductRow {
+  code: string;
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+}
+
+interface ImportErrorRow {
+  id: string;
+  rowNo: number;
+  reason: string;
+  raw: string;
+}
+
+interface ImportSummary {
+  total: number;
+  success: number;
+  updated: number;
+  failed: number;
+}
+
+const rows = ref<ProductRow[]>([
+  { code: 'SKU-1001', name: 'Keyboard', category: 'Accessory', price: 299, stock: 120 },
+  { code: 'SKU-1002', name: 'Mouse', category: 'Accessory', price: 159, stock: 200 },
+  { code: 'SKU-1003', name: 'Monitor', category: 'Display', price: 1299, stock: 45 },
+]);
+
+const importing = ref(false);
+const importErrors = ref<ImportErrorRow[]>([]);
+const lastSummary = ref<ImportSummary>({
+  total: 0,
+  success: 0,
+  updated: 0,
+  failed: 0,
+});
+
+const dataColumns = computed(() => [
+  { title: $t('examples.scaffold.importExport.colCode'), dataIndex: 'code', width: 140 },
+  { title: $t('examples.scaffold.importExport.colName'), dataIndex: 'name', width: 220 },
+  { title: $t('examples.scaffold.importExport.colCategory'), dataIndex: 'category', width: 160 },
+  { title: $t('examples.scaffold.importExport.colPrice'), dataIndex: 'price', width: 120 },
+  { title: $t('examples.scaffold.importExport.colStock'), dataIndex: 'stock', width: 120 },
+]);
+
+const errorColumns = computed(() => [
+  { title: $t('examples.scaffold.importExport.errorRowNo'), dataIndex: 'rowNo', width: 100 },
+  { title: $t('examples.scaffold.importExport.errorReason'), dataIndex: 'reason', width: 260 },
+  { title: $t('examples.scaffold.importExport.errorRaw'), dataIndex: 'raw' },
+]);
+
+function downloadTemplate() {
+  const header = ['code', 'name', 'category', 'price', 'stock'];
+  const examples = [
+    ['SKU-2001', 'Laptop Stand', 'Accessory', '399', '80'],
+    ['SKU-2002', 'USB-C Hub', 'Accessory', '259', '150'],
+  ];
+  downloadCsv([header, ...examples], 'import-template.csv');
+}
+
+function exportCurrentData() {
+  const header = ['code', 'name', 'category', 'price', 'stock'];
+  const body = rows.value.map((item) => [
+    item.code,
+    item.name,
+    item.category,
+    String(item.price),
+    String(item.stock),
+  ]);
+  downloadCsv([header, ...body], 'products-export.csv');
+}
+
+function exportErrorReceipt() {
+  if (importErrors.value.length === 0) {
+    return;
+  }
+
+  const header = ['rowNo', 'reason', 'raw'];
+  const body = importErrors.value.map((item) => [String(item.rowNo), item.reason, item.raw]);
+  downloadCsv([header, ...body], 'import-error-receipt.csv');
+}
+
+async function handleImport(file: File) {
+  importing.value = true;
+
+  try {
+    const text = await file.text();
+    const rowsInCsv = parseCsv(text);
+    if (rowsInCsv.length < 2) {
+      message.warning($t('examples.scaffold.importExport.emptyFile'));
+      return false;
+    }
+
+    const header = rowsInCsv[0].map((item) => item.trim().toLowerCase());
+    const indexes = {
+      code: header.indexOf('code'),
+      name: header.indexOf('name'),
+      category: header.indexOf('category'),
+      price: header.indexOf('price'),
+      stock: header.indexOf('stock'),
+    };
+
+    if (Object.values(indexes).some((index) => index < 0)) {
+      message.error($t('examples.scaffold.importExport.invalidHeader'));
+      return false;
+    }
+
+    const validRows: ProductRow[] = [];
+    const errors: ImportErrorRow[] = [];
+    let updatedCount = 0;
+
+    rowsInCsv.slice(1).forEach((line, idx) => {
+      const rowNo = idx + 2;
+      const code = getCell(line, indexes.code);
+      const name = getCell(line, indexes.name);
+      const category = getCell(line, indexes.category);
+      const priceText = getCell(line, indexes.price);
+      const stockText = getCell(line, indexes.stock);
+
+      const price = Number(priceText);
+      const stock = Number(stockText);
+
+      if (!code || !name || !category) {
+        errors.push({
+          id: `${rowNo}-required`,
+          rowNo,
+          reason: $t('examples.scaffold.importExport.errorRequired'),
+          raw: line.join(' | '),
+        });
+        return;
+      }
+
+      if (Number.isNaN(price) || price < 0) {
+        errors.push({
+          id: `${rowNo}-price`,
+          rowNo,
+          reason: $t('examples.scaffold.importExport.errorPrice'),
+          raw: line.join(' | '),
+        });
+        return;
+      }
+
+      if (!Number.isInteger(stock) || stock < 0) {
+        errors.push({
+          id: `${rowNo}-stock`,
+          rowNo,
+          reason: $t('examples.scaffold.importExport.errorStock'),
+          raw: line.join(' | '),
+        });
+        return;
+      }
+
+      const row: ProductRow = {
+        code,
+        name,
+        category,
+        price,
+        stock,
+      };
+
+      const target = rows.value.find((item) => item.code === row.code);
+      if (target) {
+        target.name = row.name;
+        target.category = row.category;
+        target.price = row.price;
+        target.stock = row.stock;
+        updatedCount += 1;
+      } else {
+        validRows.push(row);
+      }
+    });
+
+    rows.value = [...rows.value, ...validRows];
+    importErrors.value = errors;
+    lastSummary.value = {
+      total: rowsInCsv.length - 1,
+      success: validRows.length + updatedCount,
+      updated: updatedCount,
+      failed: errors.length,
+    };
+
+    message.success(
+      $t('examples.scaffold.importExport.importDone', {
+        success: lastSummary.value.success,
+        failed: lastSummary.value.failed,
+      }),
+    );
+  } catch (error) {
+    console.error(error);
+    message.error($t('examples.scaffold.importExport.parseFailed'));
+  } finally {
+    importing.value = false;
+  }
+
+  return false;
+}
+
+function parseCsv(csvText: string) {
+  const lines = csvText
+    .replace(/\r/g, '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  return lines.map(parseCsvLine);
+}
+
+function parseCsvLine(line: string) {
+  const result: string[] = [];
+  let current = '';
+  let inQuotes = false;
+
+  for (let i = 0; i < line.length; i += 1) {
+    const char = line[i];
+    const nextChar = line[i + 1];
+
+    if (char === '"') {
+      if (inQuotes && nextChar === '"') {
+        current += '"';
+        i += 1;
+      } else {
+        inQuotes = !inQuotes;
+      }
+      continue;
+    }
+
+    if (char === ',' && !inQuotes) {
+      result.push(current.trim());
+      current = '';
+      continue;
+    }
+
+    current += char;
+  }
+
+  result.push(current.trim());
+  return result;
+}
+
+function getCell(line: string[], index: number) {
+  if (index < 0 || index >= line.length) {
+    return '';
+  }
+  return line[index].trim();
+}
+
+function downloadCsv(rowsForExport: string[][], fileName: string) {
+  const csv = rowsForExport
+    .map((line) => line.map((cell) => `"${cell.replace(/"/g, '""')}"`).join(','))
+    .join('\n');
+
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName;
+  link.click();
+
+  URL.revokeObjectURL(url);
+}
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/master-detail/index.vue b/antdv-next-admin/src/views/examples/scaffold/master-detail/index.vue
new file mode 100644
index 0000000..8c6c70e
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/master-detail/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('examples.scaffold.masterDetail.title') }}</h2>
+      <p class="text-secondary mb-lg">{{ $t('examples.scaffold.masterDetail.description') }}</p>
+
+      <a-table
+        :columns="columns"
+        :data-source="listData"
+        row-key="id"
+        :pagination="{ pageSize: 8 }"
+        :custom-row="buildRowProps"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'status'">
+            <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
+          </template>
+        </template>
+      </a-table>
+    </div>
+
+    <a-drawer
+      v-model:open="drawerOpen"
+      width="560"
+      :title="$t('examples.scaffold.masterDetail.drawerTitle')"
+      :destroy-on-close="false"
+    >
+      <template v-if="activeRecord">
+        <ProDetail
+          :title="`#${activeRecord.id}`"
+          :sub-title="$t('examples.scaffold.masterDetail.ticketNumber')"
+          :tags="[
+            {
+              text: getStatusText(activeRecord.status),
+              color: getStatusColor(activeRecord.status),
+            },
+          ]"
+          :descriptions="detailColumns"
+          :data="activeRecord"
+          :description-column="1"
+          :tabs="drawerTabs"
+          v-model:active-tab="activeTab"
+        >
+          <template #tab-desc>
+            <div class="tab-panel">
+              {{ activeRecord.description }}
+            </div>
+          </template>
+          <template #tab-logs>
+            <a-timeline>
+              <a-timeline-item v-for="log in activeRecord.logs" :key="log.time + log.action">
+                <strong>{{ log.action }}</strong>
+                <div class="text-secondary">{{ log.operator }} · {{ log.time }}</div>
+              </a-timeline-item>
+            </a-timeline>
+          </template>
+        </ProDetail>
+      </template>
+    </a-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProDescriptionItem, ProDetailTab } from '@/types/pro';
+
+import { computed, ref } from 'vue';
+
+import ProDetail from '@/components/Pro/ProDetail/index.vue';
+import { $t } from '@/locales';
+
+type TicketStatus = 'open' | 'processing' | 'closed';
+
+interface TicketRecord {
+  id: string;
+  title: string;
+  owner: string;
+  priority: 'P0' | 'P1' | 'P2';
+  status: TicketStatus;
+  createdAt: string;
+  description: string;
+  logs: Array<{
+    action: string;
+    operator: string;
+    time: string;
+  }>;
+}
+
+const statusTextMap: Record<TicketStatus, string> = computed(() => ({
+  open: $t('examples.scaffold.masterDetail.statusOpen'),
+  processing: $t('examples.scaffold.masterDetail.statusProcessing'),
+  closed: $t('examples.scaffold.masterDetail.statusClosed'),
+})).value;
+
+const statusColorMap: Record<TicketStatus, string> = {
+  open: 'blue',
+  processing: 'processing',
+  closed: 'default',
+};
+
+const listData = ref<TicketRecord[]>(
+  Array.from({ length: 18 }, (_, index) => {
+    const i = index + 1;
+
+    return {
+      id: `T${String(i).padStart(4, '0')}`,
+      title: $t('examples.scaffold.masterDetail.ticketTitle', { index: i }),
+      owner:
+        i % 2 === 0
+          ? $t('examples.scaffold.masterDetail.ownerZhang')
+          : $t('examples.scaffold.masterDetail.ownerLi'),
+      priority: i % 5 === 0 ? 'P0' : i % 2 === 0 ? 'P1' : 'P2',
+      status: i % 4 === 0 ? 'closed' : i % 3 === 0 ? 'processing' : 'open',
+      createdAt: new Date(Date.now() - i * 3600 * 1000).toLocaleString(),
+      description: $t('examples.scaffold.masterDetail.ticketDescription', { index: i }),
+      logs: [
+        {
+          action: $t('examples.scaffold.masterDetail.actionCreate'),
+          operator: $t('examples.scaffold.masterDetail.operatorSystem'),
+          time: new Date(Date.now() - i * 3600 * 1000).toLocaleString(),
+        },
+        {
+          action: $t('examples.scaffold.masterDetail.actionAssign'),
+          operator: $t('examples.scaffold.masterDetail.operatorDispatch'),
+          time: new Date(Date.now() - i * 1800 * 1000).toLocaleString(),
+        },
+      ],
+    };
+  }),
+);
+
+const columns = computed(() => [
+  { title: $t('examples.scaffold.masterDetail.colTicketNumber'), dataIndex: 'id', width: 120 },
+  { title: $t('examples.scaffold.masterDetail.colTitle'), dataIndex: 'title', ellipsis: true },
+  { title: $t('examples.scaffold.masterDetail.colOwner'), dataIndex: 'owner', width: 120 },
+  { title: $t('examples.scaffold.masterDetail.colPriority'), dataIndex: 'priority', width: 100 },
+  { title: $t('examples.scaffold.masterDetail.colStatus'), dataIndex: 'status', width: 120 },
+  { title: $t('examples.scaffold.masterDetail.colCreatedAt'), dataIndex: 'createdAt', width: 190 },
+]);
+
+const detailColumns = computed<ProDescriptionItem[]>(() => [
+  { label: $t('examples.scaffold.masterDetail.titleLabel'), dataIndex: 'title' },
+  { label: $t('examples.scaffold.masterDetail.ownerLabel'), dataIndex: 'owner' },
+  { label: $t('examples.scaffold.masterDetail.priorityLabel'), dataIndex: 'priority' },
+  { label: $t('examples.scaffold.masterDetail.createdAtLabel'), dataIndex: 'createdAt' },
+]);
+
+const drawerTabs = computed<ProDetailTab[]>(() => [
+  { key: 'desc', label: $t('examples.scaffold.masterDetail.descTab') },
+  { key: 'logs', label: $t('examples.scaffold.masterDetail.logsTab') },
+]);
+
+const drawerOpen = ref(false);
+const activeTab = ref('desc');
+const activeRecord = ref<TicketRecord | null>(null);
+
+const buildRowProps = (record: TicketRecord) => {
+  return {
+    style: { cursor: 'pointer' },
+    onClick: () => {
+      activeRecord.value = record;
+      activeTab.value = 'desc';
+      drawerOpen.value = true;
+    },
+  };
+};
+
+const getStatusText = (status: unknown) => {
+  const key = (status || 'open') as TicketStatus;
+  return statusTextMap[key] || statusTextMap.open;
+};
+
+const getStatusColor = (status: unknown) => {
+  const key = (status || 'open') as TicketStatus;
+  return statusColorMap[key] || statusColorMap.open;
+};
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.tab-panel {
+  line-height: 1.8;
+  color: var(--color-text-secondary);
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/observability/index.vue b/antdv-next-admin/src/views/examples/scaffold/observability/index.vue
new file mode 100644
index 0000000..b6191a9
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/observability/index.vue
@@ -0,0 +1,332 @@
+<template>
+  <div class="page-container">
+    <div class="card mb-lg">
+      <h2>{{ $t("examples.scaffold.observability.title") }}</h2>
+      <p class="text-secondary">
+        {{ $t("examples.scaffold.observability.description") }}
+      </p>
+
+      <a-space wrap class="mt-sm">
+        <a-button type="primary" @click="runScenario('success')">{{
+          $t("examples.scaffold.observability.simulateSuccess")
+        }}</a-button>
+        <a-button @click="runScenario('empty')">{{
+          $t("examples.scaffold.observability.simulateEmpty")
+        }}</a-button>
+        <a-button danger @click="runScenario('network')">{{
+          $t("examples.scaffold.observability.simulateNetwork")
+        }}</a-button>
+        <a-button danger @click="runScenario('auth')">{{
+          $t("examples.scaffold.observability.simulateAuth")
+        }}</a-button>
+        <a-button danger @click="runScenario('business')">{{
+          $t("examples.scaffold.observability.simulateBusiness")
+        }}</a-button>
+      </a-space>
+    </div>
+
+    <div class="grid-two">
+      <div class="card">
+        <div class="section-title">
+          {{ $t("examples.scaffold.observability.requestStateTitle") }}
+        </div>
+
+        <template v-if="state === 'loading'">
+          <a-skeleton active :paragraph="{ rows: 5 }" />
+        </template>
+
+        <template v-else-if="state === 'empty'">
+          <a-empty
+            :description="$t('examples.scaffold.observability.emptyData')"
+          />
+        </template>
+
+        <template v-else-if="state === 'error'">
+          <a-result
+            status="error"
+            :title="$t('examples.scaffold.observability.requestFailed')"
+            :sub-title="errorMessage"
+          >
+            <template #extra>
+              <a-button type="primary" @click="retryLast">{{
+                $t("examples.scaffold.observability.retryButton")
+              }}</a-button>
+            </template>
+          </a-result>
+        </template>
+
+        <template v-else-if="state === 'success'">
+          <a-list size="small" bordered :data-source="records">
+            <template #renderItem="{ item }">
+              <a-list-item>
+                <strong>{{ item.name }}</strong>
+                <span class="text-secondary">{{ item.value }}</span>
+              </a-list-item>
+            </template>
+          </a-list>
+        </template>
+
+        <template v-else>
+          <a-empty
+            :description="$t('examples.scaffold.observability.clickToStart')"
+          />
+        </template>
+      </div>
+
+      <div class="card">
+        <div class="section-title">
+          {{ $t("examples.scaffold.observability.errorLogTitle") }}
+        </div>
+
+        <div class="error-stats">
+          <div class="stat-item">
+            <span>{{
+              $t("examples.scaffold.observability.networkError")
+            }}</span>
+            <strong>{{ errorStats.network }}</strong>
+          </div>
+          <div class="stat-item">
+            <span>{{ $t("examples.scaffold.observability.authError") }}</span>
+            <strong>{{ errorStats.auth }}</strong>
+          </div>
+          <div class="stat-item">
+            <span>{{
+              $t("examples.scaffold.observability.businessError")
+            }}</span>
+            <strong>{{ errorStats.business }}</strong>
+          </div>
+        </div>
+
+        <div class="event-list">
+          <div v-if="events.length === 0" class="event-empty">
+            {{ $t("examples.scaffold.observability.noEvents") }}
+          </div>
+          <div
+            v-for="item in events"
+            :key="item.id"
+            class="event-item"
+            :class="`is-${item.level}`"
+          >
+            <span class="event-time">{{ item.time }}</span>
+            <span class="event-text">{{ item.text }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+
+import { $t, getLocale } from "@/locales";
+
+type Scenario = "success" | "empty" | "network" | "auth" | "business";
+type State = "idle" | "loading" | "success" | "empty" | "error";
+
+type LogLevel = "info" | "error" | "success";
+
+const state = ref<State>("idle");
+const records = ref<Array<{ name: string; value: string }>>([]);
+const errorMessage = ref("");
+const lastScenario = ref<Scenario | null>(null);
+
+const errorStats = reactive({
+  network: 0,
+  auth: 0,
+  business: 0,
+});
+
+const events = ref<
+  Array<{ id: number; time: string; text: string; level: LogLevel }>
+>([]);
+let logId = 0;
+
+const pushEvent = (text: string, level: LogLevel = "info") => {
+  events.value.unshift({
+    id: ++logId,
+    time: new Date().toLocaleTimeString(getLocale(), { hour12: false }),
+    text,
+    level,
+  });
+
+  if (events.value.length > 60) {
+    events.value = events.value.slice(0, 60);
+  }
+};
+
+const mockFetch = async (scenario: Scenario) => {
+  await new Promise((resolve) => setTimeout(resolve, 700));
+
+  switch (scenario) {
+    case "success":
+      return {
+        code: 200,
+        data: [
+          { name: "service_a_latency", value: "120ms" },
+          { name: "service_b_qps", value: "2,398" },
+          { name: "error_rate", value: "0.35%" },
+        ],
+      };
+    case "empty":
+      return {
+        code: 200,
+        data: [],
+      };
+    case "network":
+      throw new Error($t("examples.scaffold.observability.errorNetwork"));
+    case "auth":
+      throw new Error($t("examples.scaffold.observability.errorAuth"));
+    case "business":
+      throw new Error($t("examples.scaffold.observability.errorBusiness"));
+    default:
+      return {
+        code: 200,
+        data: [],
+      };
+  }
+};
+
+const classifyError = (message: string) => {
+  const lower = message.toLowerCase();
+  if (lower.includes("network")) {
+    return "network" as const;
+  }
+  if (lower.includes("auth") || lower.includes("token")) {
+    return "auth" as const;
+  }
+  return "business" as const;
+};
+
+const runScenario = async (scenario: Scenario) => {
+  lastScenario.value = scenario;
+  state.value = "loading";
+  records.value = [];
+  errorMessage.value = "";
+
+  pushEvent($t("examples.scaffold.observability.eventStart", { scenario }));
+
+  try {
+    const result = await mockFetch(scenario);
+
+    if (result.data.length === 0) {
+      state.value = "empty";
+      pushEvent($t("examples.scaffold.observability.eventEmpty"));
+      return;
+    }
+
+    state.value = "success";
+    records.value = result.data;
+    pushEvent($t("examples.scaffold.observability.eventSuccess"), "success");
+  } catch (error: unknown) {
+    state.value = "error";
+    errorMessage.value =
+      (error as Error).message ||
+      $t("examples.scaffold.observability.unknownError");
+
+    const type = classifyError(errorMessage.value);
+    errorStats[type] += 1;
+
+    pushEvent(
+      $t("examples.scaffold.observability.eventError", {
+        type,
+        message: errorMessage.value,
+      }),
+      "error",
+    );
+  }
+};
+
+const retryLast = async () => {
+  if (!lastScenario.value) {
+    return;
+  }
+  await runScenario(lastScenario.value);
+};
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.mt-sm {
+  margin-top: var(--spacing-sm);
+}
+
+.grid-two {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.section-title {
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: 12px;
+}
+
+.error-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.stat-item {
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  span {
+    color: var(--color-text-secondary);
+    font-size: 12px;
+  }
+}
+
+.event-list {
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  max-height: 310px;
+  overflow-y: auto;
+}
+
+.event-empty {
+  text-align: center;
+  color: var(--color-text-tertiary);
+  padding: 20px;
+}
+
+.event-item {
+  display: grid;
+  grid-template-columns: 92px 1fr;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--color-border-secondary);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.is-success .event-text {
+    color: var(--color-success);
+  }
+
+  &.is-error .event-text {
+    color: var(--color-error);
+  }
+}
+
+.event-time {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-code);
+}
+
+@media (max-width: 960px) {
+  .grid-two {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/pro-table-advanced/index.vue b/antdv-next-admin/src/views/examples/scaffold/pro-table-advanced/index.vue
new file mode 100644
index 0000000..9c0253b
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/pro-table-advanced/index.vue
@@ -0,0 +1,355 @@
+<template>
+  <div class="page-container">
+    <ProTable
+      :columns="columns"
+      :request="requestTableData"
+      :toolbar="toolbarConfig"
+      :search="{ labelWidth: 80, defaultCollapsed: true, collapsedRows: 1 }"
+      :row-selection="rowSelection"
+      row-key="id"
+    >
+      <template #toolbar-actions>
+        <a-space wrap>
+          <a-tag color="processing">{{
+            $t("examples.scaffold.proTableAdvanced.selectedCount", {
+              count: selectedRowKeys.length,
+            })
+          }}</a-tag>
+          <a-button
+            :disabled="selectedRowKeys.length === 0"
+            @click="handleBatchSetStatus('inactive')"
+          >
+            {{ $t("examples.scaffold.proTableAdvanced.batchDisable") }}
+          </a-button>
+          <a-button
+            danger
+            :disabled="selectedRowKeys.length === 0"
+            @click="handleBatchDelete"
+          >
+            {{ $t("examples.scaffold.proTableAdvanced.batchDelete") }}
+          </a-button>
+          <a-button type="primary" @click="exportCsv">{{
+            $t("examples.scaffold.proTableAdvanced.export")
+          }}</a-button>
+        </a-space>
+      </template>
+
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'status'">
+          <a-switch
+            :checked="record.status === 'active'"
+            :checked-children="
+              $t('examples.scaffold.proTableAdvanced.statusActive')
+            "
+            :un-checked-children="
+              $t('examples.scaffold.proTableAdvanced.statusInactive')
+            "
+            @change="handleStatusSwitchChange(record.id, $event as boolean)"
+          />
+        </template>
+      </template>
+    </ProTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProTableColumn } from "@/types/pro";
+
+import { EditOutlined, DeleteOutlined } from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import { computed, ref } from "vue";
+
+import ProTable from "@/components/Pro/ProTable/index.vue";
+import { $t } from "@/locales";
+
+interface DemoRow {
+  id: string;
+  username: string;
+  realName: string;
+  email: string;
+  gender: "male" | "female";
+  status: "active" | "inactive";
+  createdAt: string;
+}
+
+const createMockRows = (): DemoRow[] => {
+  return Array.from({ length: 48 }, (_, index) => {
+    const i = index + 1;
+    const isMale = i % 2 === 0;
+
+    return {
+      id: `demo-${i}`,
+      username: `user_${String(i).padStart(3, "0")}`,
+      realName: isMale ? `张三${i}` : `李四${i}`,
+      email: `user_${i}@example.com`,
+      gender: isMale ? "male" : "female",
+      status: i % 3 === 0 ? "inactive" : "active",
+      createdAt: new Date(Date.now() - i * 86400000).toISOString(),
+    };
+  });
+};
+
+const tableRows = ref<DemoRow[]>(createMockRows());
+const selectedRowKeys = ref<string[]>([]);
+
+const toolbarConfig = computed(() => ({
+  title: $t("examples.scaffold.proTableAdvanced.title"),
+  subTitle: $t("examples.scaffold.proTableAdvanced.description"),
+  actions: ["refresh", "density", "columnSetting"] as Array<
+    "refresh" | "density" | "columnSetting"
+  >,
+}));
+
+const columns = computed<ProTableColumn[]>(() => [
+  {
+    title: $t("examples.scaffold.proTableAdvanced.username"),
+    dataIndex: "username",
+    search: true,
+    searchType: "input",
+    width: 150,
+  },
+  {
+    title: $t("examples.scaffold.proTableAdvanced.realName"),
+    dataIndex: "realName",
+    search: true,
+    searchType: "input",
+    width: 140,
+  },
+  {
+    title: $t("examples.scaffold.proTableAdvanced.email"),
+    dataIndex: "email",
+    search: true,
+    searchType: "input",
+    width: 220,
+  },
+  {
+    title: $t("examples.scaffold.proTableAdvanced.gender"),
+    dataIndex: "gender",
+    search: true,
+    searchType: "select",
+    searchOptions: [
+      { label: $t("user.male"), value: "male" },
+      { label: $t("user.female"), value: "female" },
+    ],
+    valueType: "tag",
+    valueEnum: {
+      male: { text: $t("user.male"), color: "blue" },
+      female: { text: $t("user.female"), color: "pink" },
+    },
+    width: 120,
+  },
+  {
+    title: $t("examples.scaffold.proTableAdvanced.status"),
+    dataIndex: "status",
+    width: 140,
+    search: true,
+    searchType: "select",
+    searchOptions: [
+      {
+        label: $t("examples.scaffold.proTableAdvanced.statusActive"),
+        value: "active",
+      },
+      {
+        label: $t("examples.scaffold.proTableAdvanced.statusInactive"),
+        value: "inactive",
+      },
+    ],
+  },
+  {
+    title: $t("examples.scaffold.proTableAdvanced.createdAt"),
+    dataIndex: "createdAt",
+    valueType: "dateTime",
+    width: 190,
+  },
+  {
+    title: $t("common.actions"),
+    dataIndex: "action",
+    width: 180,
+    fixed: "right",
+    actions: [
+      {
+        label: $t("common.edit"),
+        icon: EditOutlined,
+        onClick: (record) => {
+          message.info(
+            $t("examples.scaffold.proTableAdvanced.editSimulation", {
+              username: record.username,
+            }),
+          );
+        },
+      },
+      {
+        label: $t("common.delete"),
+        icon: DeleteOutlined,
+        danger: true,
+        confirm: $t("examples.scaffold.proTableAdvanced.deleteConfirm"),
+        onClick: (record) => {
+          tableRows.value = tableRows.value.filter(
+            (item) => item.id !== record.id,
+          );
+          selectedRowKeys.value = selectedRowKeys.value.filter(
+            (id) => id !== record.id,
+          );
+          message.success(
+            $t("examples.scaffold.proTableAdvanced.deleteSuccess"),
+          );
+        },
+      },
+    ],
+  },
+]);
+
+const rowSelection = computed(() => ({
+  selectedRowKeys: selectedRowKeys.value,
+  onChange: (keys: Array<string | number>) => {
+    selectedRowKeys.value = keys.map((item) => String(item));
+  },
+}));
+
+const requestTableData = async (params: Record<string, unknown>) => {
+  const current = Number(params.current || 1);
+  const pageSize = Number(params.pageSize || 10);
+
+  let filtered = [...tableRows.value];
+
+  if (params.username) {
+    const keyword = String(params.username).toLowerCase();
+    filtered = filtered.filter((item) =>
+      item.username.toLowerCase().includes(keyword),
+    );
+  }
+
+  if (params.realName) {
+    const keyword = String(params.realName).toLowerCase();
+    filtered = filtered.filter((item) =>
+      item.realName.toLowerCase().includes(keyword),
+    );
+  }
+
+  if (params.email) {
+    const keyword = String(params.email).toLowerCase();
+    filtered = filtered.filter((item) =>
+      item.email.toLowerCase().includes(keyword),
+    );
+  }
+
+  if (params.gender) {
+    filtered = filtered.filter((item) => item.gender === params.gender);
+  }
+
+  if (params.status) {
+    filtered = filtered.filter((item) => item.status === params.status);
+  }
+
+  const start = (current - 1) * pageSize;
+  const list = filtered.slice(start, start + pageSize);
+
+  return {
+    success: true,
+    data: list,
+    total: filtered.length,
+  };
+};
+
+const handleStatusChange = (id: string, checked: boolean) => {
+  const row = tableRows.value.find((item) => item.id === id);
+  if (!row) {
+    return;
+  }
+
+  row.status = checked ? "active" : "inactive";
+  message.success(
+    $t("examples.scaffold.proTableAdvanced.statusChangeSuccess", {
+      status: checked
+        ? $t("examples.scaffold.proTableAdvanced.statusActive")
+        : $t("examples.scaffold.proTableAdvanced.statusInactive"),
+      username: row.username,
+    }),
+  );
+};
+
+const handleStatusSwitchChange = (id: string, checked: boolean) => {
+  handleStatusChange(id, checked);
+};
+
+const handleBatchSetStatus = (status: DemoRow["status"]) => {
+  if (selectedRowKeys.value.length === 0) {
+    return;
+  }
+
+  const set = new Set(selectedRowKeys.value);
+  tableRows.value = tableRows.value.map((item) => {
+    if (set.has(item.id)) {
+      return {
+        ...item,
+        status,
+      };
+    }
+    return item;
+  });
+
+  message.success(
+    $t("examples.scaffold.proTableAdvanced.batchSetStatusSuccess", {
+      count: selectedRowKeys.value.length,
+    }),
+  );
+};
+
+const handleBatchDelete = () => {
+  if (selectedRowKeys.value.length === 0) {
+    return;
+  }
+
+  Modal.confirm({
+    title: $t("examples.scaffold.proTableAdvanced.batchDeleteTitle"),
+    content: $t("examples.scaffold.proTableAdvanced.batchDeleteContent", {
+      count: selectedRowKeys.value.length,
+    }),
+    onOk: () => {
+      const set = new Set(selectedRowKeys.value);
+      tableRows.value = tableRows.value.filter((item) => !set.has(item.id));
+      selectedRowKeys.value = [];
+      message.success(
+        $t("examples.scaffold.proTableAdvanced.batchDeleteSuccess"),
+      );
+    },
+  });
+};
+
+const exportCsv = () => {
+  const headers = [
+    "id",
+    "username",
+    "realName",
+    "email",
+    "gender",
+    "status",
+    "createdAt",
+  ];
+  const rows = tableRows.value.map((item) => [
+    item.id,
+    item.username,
+    item.realName,
+    item.email,
+    item.gender,
+    item.status,
+    item.createdAt,
+  ]);
+
+  const csv = [headers, ...rows]
+    .map((line) =>
+      line.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(","),
+    )
+    .join("\n");
+
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `pro-table-advanced-${Date.now()}.csv`;
+  link.click();
+  URL.revokeObjectURL(url);
+
+  message.success($t("examples.scaffold.proTableAdvanced.exportSuccess"));
+};
+</script>
diff --git a/antdv-next-admin/src/views/examples/scaffold/rbac/index.vue b/antdv-next-admin/src/views/examples/scaffold/rbac/index.vue
new file mode 100644
index 0000000..6937502
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/rbac/index.vue
@@ -0,0 +1,362 @@
+<template>
+  <div class="page-container">
+    <div class="card mb-lg">
+      <h2>{{ $t("examples.scaffold.rbac.title") }}</h2>
+      <p class="text-secondary">
+        {{ $t("examples.scaffold.rbac.description") }}
+      </p>
+    </div>
+
+    <div class="card mb-lg">
+      <div class="top-row">
+        <div>
+          <div class="title">
+            {{ $t("examples.scaffold.rbac.currentSession") }}
+          </div>
+          <div class="meta">
+            {{
+              $t("examples.scaffold.rbac.accountInfo", {
+                username: authStore.user?.username || "-",
+                role: roleText,
+              })
+            }}
+          </div>
+        </div>
+        <a-space>
+          <a-button type="primary" @click="switchAccount('admin')">{{
+            $t("examples.scaffold.rbac.switchToAdmin")
+          }}</a-button>
+          <a-button @click="switchAccount('user')">{{
+            $t("examples.scaffold.rbac.switchToUser")
+          }}</a-button>
+        </a-space>
+      </div>
+
+      <div class="tags-wrap">
+        <a-tag v-for="perm in displayPermissions" :key="perm">{{ perm }}</a-tag>
+      </div>
+    </div>
+
+    <div class="grid-two">
+      <div class="card">
+        <div class="title mb-sm">
+          {{ $t("examples.scaffold.rbac.section1Title") }}
+        </div>
+        <div class="check-list">
+          <div
+            v-for="check in pageChecks"
+            :key="check.title"
+            class="check-item"
+          >
+            <div class="check-title">{{ check.title }}</div>
+            <a-tag :color="check.pass ? 'success' : 'error'">
+              {{
+                check.pass
+                  ? $t("examples.scaffold.rbac.passed")
+                  : $t("examples.scaffold.rbac.denied")
+              }}
+            </a-tag>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="title mb-sm">
+          {{ $t("examples.scaffold.rbac.section2Title") }}
+        </div>
+        <a-space wrap>
+          <PermissionButton permission="system.user.create">
+            <a-button type="primary">{{
+              $t("examples.scaffold.rbac.createUserButton")
+            }}</a-button>
+          </PermissionButton>
+
+          <PermissionButton permission="system.user.edit">
+            <a-button>{{
+              $t("examples.scaffold.rbac.editUserButton")
+            }}</a-button>
+          </PermissionButton>
+
+          <PermissionButton permission="system.user.delete">
+            <a-button danger>{{
+              $t("examples.scaffold.rbac.deleteUserButton")
+            }}</a-button>
+          </PermissionButton>
+        </a-space>
+
+        <a-alert
+          class="mt-md"
+          type="info"
+          show-icon
+          :message="$t('examples.scaffold.rbac.buttonPermissionHint')"
+        />
+      </div>
+
+      <div class="card">
+        <div class="title mb-sm">
+          {{ $t("examples.scaffold.rbac.section3Title") }}
+        </div>
+        <div class="field-row">
+          <span>{{ $t("examples.scaffold.rbac.phoneLabel") }}</span>
+          <strong>{{ phoneText }}</strong>
+        </div>
+        <div class="field-row">
+          <span>{{ $t("examples.scaffold.rbac.emailLabel") }}</span>
+          <strong>{{ emailText }}</strong>
+        </div>
+        <div class="field-row">
+          <span>{{ $t("examples.scaffold.rbac.realNameLabel") }}</span>
+          <strong>{{ authStore.user?.realName || "-" }}</strong>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="title mb-sm">
+          {{ $t("examples.scaffold.rbac.section4Title") }}
+        </div>
+        <a-space wrap>
+          <a-button
+            @click="
+              callApiWithPermission(
+                'system.user.view',
+                $t('examples.scaffold.rbac.viewUserAction'),
+              )
+            "
+            >{{ $t("examples.scaffold.rbac.callViewApi") }}</a-button
+          >
+          <a-button
+            @click="
+              callApiWithPermission(
+                'system.user.export',
+                $t('examples.scaffold.rbac.exportUserAction'),
+              )
+            "
+            >{{ $t("examples.scaffold.rbac.callExportApi") }}</a-button
+          >
+          <a-button
+            @click="
+              callApiWithPermission(
+                'system.user.delete',
+                $t('examples.scaffold.rbac.deleteUserAction'),
+              )
+            "
+            >{{ $t("examples.scaffold.rbac.callDeleteApi") }}</a-button
+          >
+        </a-space>
+
+        <a-alert
+          v-if="apiResult"
+          class="mt-md"
+          :type="apiResult.type"
+          show-icon
+          :message="apiResult.message"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from "antdv-next";
+import { computed, onMounted, ref } from "vue";
+
+import PermissionButton from "@/components/Permission/PermissionButton.vue";
+import { usePermission } from "@/composables/usePermission";
+import { $t } from "@/locales";
+import { useAuthStore } from "@/stores/auth";
+
+const authStore = useAuthStore();
+const { can, hasAnyRole } = usePermission();
+
+const apiResult = ref<{ type: "success" | "error"; message: string } | null>(
+  null,
+);
+
+onMounted(() => {
+  authStore.initAuth();
+});
+
+const roleText = computed(() => {
+  const roleCodes = authStore.userRoles;
+  return roleCodes.length > 0 ? roleCodes.join(", ") : "-";
+});
+
+const displayPermissions = computed(() => {
+  const permissions = authStore.userPermissions;
+  if (permissions.length <= 8) {
+    return permissions;
+  }
+  return [
+    ...permissions.slice(0, 8),
+    $t("examples.scaffold.rbac.permissionTotal", { count: permissions.length }),
+  ];
+});
+
+const pageChecks = computed(() => {
+  return [
+    {
+      title: $t("examples.scaffold.rbac.checkUserManage"),
+      pass: can("system.user.view"),
+    },
+    {
+      title: $t("examples.scaffold.rbac.checkMenuManage"),
+      pass: can("system.permission.view"),
+    },
+    {
+      title: $t("examples.scaffold.rbac.checkAdminRole"),
+      pass: hasAnyRole(["admin"]),
+    },
+  ];
+});
+
+const maskText = (value: string, reserve = 2) => {
+  if (!value) {
+    return "-";
+  }
+  if (value.length <= reserve * 2) {
+    return `${value.slice(0, reserve)}***`;
+  }
+  return `${value.slice(0, reserve)}***${value.slice(-reserve)}`;
+};
+
+const phoneText = computed(() => {
+  const raw = authStore.user?.phone || "";
+  if (can("system.user.view.phone") || can("*")) {
+    return raw || "-";
+  }
+  return maskText(raw, 3);
+});
+
+const emailText = computed(() => {
+  const raw = authStore.user?.email || "";
+  if (can("system.user.view.email") || can("*")) {
+    return raw || "-";
+  }
+  return maskText(raw, 2);
+});
+
+const switchAccount = async (username: "admin" | "user") => {
+  try {
+    await authStore.login(username, "123456");
+    apiResult.value = null;
+    message.success($t("examples.scaffold.rbac.switchSuccess", { username }));
+  } catch (error: unknown) {
+    message.error(
+      (error as Error)?.message || $t("examples.scaffold.rbac.switchFailed"),
+    );
+  }
+};
+
+const callApiWithPermission = async (
+  permission: string,
+  actionName: string,
+) => {
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 260));
+
+    if (!can(permission)) {
+      throw new Error(
+        $t("examples.scaffold.rbac.missingPermission", { permission }),
+      );
+    }
+
+    apiResult.value = {
+      type: "success",
+      message: $t("examples.scaffold.rbac.apiSuccess", { action: actionName }),
+    };
+  } catch (error: unknown) {
+    apiResult.value = {
+      type: "error",
+      message: $t("examples.scaffold.rbac.apiFailed", {
+        action: actionName,
+        error:
+          (error as Error).message || $t("examples.scaffold.rbac.noPermission"),
+      }),
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.mb-sm {
+  margin-bottom: var(--spacing-sm);
+}
+
+.mt-md {
+  margin-top: var(--spacing-md);
+}
+
+.top-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.meta {
+  margin-top: 4px;
+  color: var(--color-text-secondary);
+}
+
+.tags-wrap {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.grid-two {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.check-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.check-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  padding: 8px 10px;
+}
+
+.check-title {
+  color: var(--color-text-secondary);
+}
+
+.field-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--color-border-secondary);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+@media (max-width: 900px) {
+  .grid-two {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/request-auth/index.vue b/antdv-next-admin/src/views/examples/scaffold/request-auth/index.vue
new file mode 100644
index 0000000..ee5eb50
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/request-auth/index.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t("examples.scaffold.requestAuth.title") }}</h2>
+      <p class="mb-lg text-secondary">
+        {{ $t("examples.scaffold.requestAuth.description") }}
+      </p>
+
+      <a-alert
+        v-if="reloginRequired"
+        type="error"
+        show-icon
+        class="mb-lg"
+        :message="$t('examples.scaffold.requestAuth.refreshFailedAlert')"
+        :description="$t('examples.scaffold.requestAuth.refreshFailedDesc')"
+      />
+
+      <div class="status-grid mb-lg">
+        <div class="status-item">
+          <span class="label">{{
+            $t("examples.scaffold.requestAuth.accessToken")
+          }}</span>
+          <code>{{
+            accessToken || $t("examples.scaffold.requestAuth.empty")
+          }}</code>
+        </div>
+        <div class="status-item">
+          <span class="label">{{
+            $t("examples.scaffold.requestAuth.refreshToken")
+          }}</span>
+          <code>{{
+            refreshToken || $t("examples.scaffold.requestAuth.empty")
+          }}</code>
+        </div>
+        <div class="status-item">
+          <span class="label">{{
+            $t("examples.scaffold.requestAuth.refreshStatus")
+          }}</span>
+          <a-tag :color="refreshing ? 'processing' : 'default'">
+            {{
+              refreshing
+                ? $t("examples.scaffold.requestAuth.refreshing")
+                : $t("examples.scaffold.requestAuth.idle")
+            }}
+          </a-tag>
+        </div>
+      </div>
+
+      <a-space wrap :size="10" class="mb-lg">
+        <a-button type="primary" @click="handleSingleRequest">{{
+          $t("examples.scaffold.requestAuth.singleRequest")
+        }}</a-button>
+        <a-button @click="handleConcurrentRequest">{{
+          $t("examples.scaffold.requestAuth.concurrentRequest")
+        }}</a-button>
+        <a-button @click="expireAccessToken">{{
+          $t("examples.scaffold.requestAuth.expireToken")
+        }}</a-button>
+        <a-button danger @click="handleRefreshFailScenario">{{
+          $t("examples.scaffold.requestAuth.simulateRefreshFail")
+        }}</a-button>
+        <a-button @click="resetSession">{{
+          $t("examples.scaffold.requestAuth.resetSession")
+        }}</a-button>
+      </a-space>
+
+      <div class="log-toolbar">
+        <span class="text-secondary">{{
+          $t("examples.scaffold.requestAuth.logTitle")
+        }}</span>
+        <a-button size="small" @click="logs = []">{{
+          $t("examples.scaffold.requestAuth.clearLog")
+        }}</a-button>
+      </div>
+
+      <div class="log-list">
+        <div v-if="logs.length === 0" class="log-empty">
+          {{ $t("examples.scaffold.requestAuth.noLogs") }}
+        </div>
+        <div
+          v-for="item in logs"
+          :key="item.id"
+          class="log-item"
+          :class="`is-${item.level}`"
+        >
+          <span class="log-time">{{ item.time }}</span>
+          <span class="log-text">{{ item.text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from "antdv-next";
+import { ref } from "vue";
+
+import { $t, getLocale } from "@/locales";
+
+type LogLevel = "info" | "success" | "error";
+
+type RequestError = {
+  status: number;
+  message: string;
+};
+
+type SessionState = {
+  accessToken: string;
+  refreshToken: string;
+};
+
+const logs = ref<
+  Array<{ id: number; time: string; level: LogLevel; text: string }>
+>([]);
+const accessToken = ref("expired-token");
+const refreshToken = ref("refresh-token-demo");
+const refreshing = ref(false);
+const reloginRequired = ref(false);
+
+let failNextRefresh = false;
+let logId = 0;
+let refreshPromise: Promise<string> | null = null;
+
+const now = () => new Date().toLocaleTimeString(getLocale(), { hour12: false });
+
+const pushLog = (text: string, level: LogLevel = "info") => {
+  logs.value.unshift({
+    id: ++logId,
+    time: now(),
+    level,
+    text,
+  });
+
+  if (logs.value.length > 80) {
+    logs.value = logs.value.slice(0, 80);
+  }
+};
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const mockProtectedApi = async (apiName: string) => {
+  await delay(280 + Math.round(Math.random() * 320));
+
+  if (!accessToken.value || accessToken.value.startsWith("expired")) {
+    throw {
+      status: 401,
+      message: $t("examples.scaffold.requestAuth.tokenExpired", { apiName }),
+    } as RequestError;
+  }
+
+  return {
+    code: 200,
+    message: $t("examples.scaffold.requestAuth.apiSuccess", { apiName }),
+  };
+};
+
+const mockRefreshApi = async () => {
+  await delay(700);
+
+  if (!refreshToken.value || failNextRefresh) {
+    failNextRefresh = false;
+    throw {
+      status: 401,
+      message: $t("examples.scaffold.requestAuth.refreshTokenInvalid"),
+    } as RequestError;
+  }
+
+  const nextToken = `valid-token-${Date.now()}`;
+  return {
+    code: 200,
+    data: {
+      token: nextToken,
+      refreshToken: refreshToken.value,
+    },
+  };
+};
+
+const ensureTokenRefreshed = async () => {
+  if (!refreshPromise) {
+    refreshPromise = (async () => {
+      try {
+        refreshing.value = true;
+        pushLog($t("examples.scaffold.requestAuth.logRefreshStart"));
+        const result = await mockRefreshApi();
+        accessToken.value = result.data.token;
+        reloginRequired.value = false;
+        pushLog(
+          $t("examples.scaffold.requestAuth.logRefreshSuccess"),
+          "success",
+        );
+        return result.data.token;
+      } catch (error: unknown) {
+        accessToken.value = "";
+        reloginRequired.value = true;
+        pushLog(
+          $t("examples.scaffold.requestAuth.logRefreshFailed", {
+            message: (error as Error).message,
+          }),
+          "error",
+        );
+        throw error;
+      } finally {
+        refreshing.value = false;
+        refreshPromise = null;
+      }
+    })();
+  } else {
+    pushLog($t("examples.scaffold.requestAuth.logQueueWait"));
+  }
+
+  return refreshPromise;
+};
+
+const requestWithAutoRefresh = async (apiName: string) => {
+  try {
+    const result = await mockProtectedApi(apiName);
+    pushLog(result.message, "success");
+    return result;
+  } catch (error: unknown) {
+    const httpError = error as { status?: number; message?: string };
+    if (httpError.status !== 401) {
+      pushLog(
+        $t("examples.scaffold.requestAuth.logNon401Error", {
+          apiName,
+          message: httpError.message,
+        }),
+        "error",
+      );
+      throw error;
+    }
+
+    pushLog(
+      $t("examples.scaffold.requestAuth.log401Detected", { apiName }),
+      "info",
+    );
+
+    await ensureTokenRefreshed();
+
+    const retried = await mockProtectedApi(`${apiName}-retry`);
+    pushLog(retried.message, "success");
+    return retried;
+  }
+};
+
+const expireAccessToken = () => {
+  accessToken.value = "expired-token";
+  pushLog($t("examples.scaffold.requestAuth.logTokenExpired"));
+};
+
+const resetSession = () => {
+  const session: SessionState = {
+    accessToken: "expired-token",
+    refreshToken: "refresh-token-demo",
+  };
+
+  accessToken.value = session.accessToken;
+  refreshToken.value = session.refreshToken;
+  reloginRequired.value = false;
+  failNextRefresh = false;
+  pushLog($t("examples.scaffold.requestAuth.logSessionReset"));
+};
+
+const handleSingleRequest = async () => {
+  try {
+    await requestWithAutoRefresh("single");
+  } catch {
+    message.error($t("examples.scaffold.requestAuth.singleRequestFailed"));
+  }
+};
+
+const handleConcurrentRequest = async () => {
+  pushLog($t("examples.scaffold.requestAuth.logConcurrentStart"));
+
+  const results = await Promise.allSettled(
+    Array.from({ length: 5 }, (_, index) =>
+      requestWithAutoRefresh(`parallel-${index + 1}`),
+    ),
+  );
+
+  const failedCount = results.filter(
+    (item) => item.status === "rejected",
+  ).length;
+  if (failedCount > 0) {
+    message.warning(
+      $t("examples.scaffold.requestAuth.concurrentPartialFail", {
+        count: failedCount,
+      }),
+    );
+  } else {
+    message.success($t("examples.scaffold.requestAuth.concurrentAllSuccess"));
+  }
+};
+
+const handleRefreshFailScenario = async () => {
+  expireAccessToken();
+  failNextRefresh = true;
+  pushLog($t("examples.scaffold.requestAuth.logRefreshWillFail"));
+
+  try {
+    await requestWithAutoRefresh("refresh-fail-case");
+  } catch {
+    message.error($t("examples.scaffold.requestAuth.refreshFailTriggered"));
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 10px;
+}
+
+.status-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 10px;
+  padding: 10px 12px;
+
+  .label {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+
+  code {
+    display: block;
+    font-family: var(--font-family-code);
+    word-break: break-all;
+  }
+}
+
+.log-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.log-list {
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 10px;
+  overflow: hidden;
+  max-height: 340px;
+  overflow-y: auto;
+}
+
+.log-empty {
+  padding: 18px;
+  text-align: center;
+  color: var(--color-text-tertiary);
+}
+
+.log-item {
+  display: grid;
+  grid-template-columns: 90px 1fr;
+  gap: 10px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border-secondary);
+  font-size: 13px;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.is-success .log-text {
+    color: var(--color-success);
+  }
+
+  &.is-error .log-text {
+    color: var(--color-error);
+  }
+}
+
+.log-time {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-code);
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/state-cache/index.vue b/antdv-next-admin/src/views/examples/scaffold/state-cache/index.vue
new file mode 100644
index 0000000..47c8c90
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/state-cache/index.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="page-container">
+    <div class="card mb-lg">
+      <h2>{{ $t('examples.scaffold.stateCache.title') }}</h2>
+      <p class="text-secondary">
+        {{ $t('examples.scaffold.stateCache.description') }}
+      </p>
+    </div>
+
+    <div class="card mb-lg">
+      <div class="section-title">{{ $t('examples.scaffold.stateCache.piniaSection') }}</div>
+
+      <div class="form-grid">
+        <div>
+          <label>{{ $t('examples.scaffold.stateCache.keywordLabel') }}</label>
+          <a-input
+            v-model:value="cacheStore.keyword"
+            :placeholder="$t('examples.scaffold.stateCache.keywordPlaceholder')"
+          />
+        </div>
+        <div>
+          <label>{{ $t('examples.scaffold.stateCache.counterLabel') }}</label>
+          <div class="counter-row">
+            <a-button size="small" @click="cacheStore.counter--">-1</a-button>
+            <a-input-number v-model:value="cacheStore.counter" :min="-9999" :max="9999" />
+            <a-button size="small" @click="cacheStore.counter++">+1</a-button>
+          </div>
+        </div>
+        <div class="full-row">
+          <label>{{ $t('examples.scaffold.stateCache.notesLabel') }}</label>
+          <a-textarea
+            v-model:value="cacheStore.notes"
+            :rows="3"
+            :placeholder="$t('examples.scaffold.stateCache.notesPlaceholder')"
+          />
+        </div>
+      </div>
+
+      <a-space class="mt-md">
+        <a-button @click="cacheStore.reset">{{
+          $t('examples.scaffold.stateCache.resetButton')
+        }}</a-button>
+        <a-button @click="pinCurrentTab">{{
+          $t('examples.scaffold.stateCache.pinTabButton')
+        }}</a-button>
+      </a-space>
+
+      <div class="persist-tip">
+        {{ $t('examples.scaffold.stateCache.lastPersistTime') }}{{ cacheStore.updatedAt }}
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="section-title">{{ $t('examples.scaffold.stateCache.keepAliveSection') }}</div>
+      <a-radio-group v-model:value="activePanel" button-style="solid" class="mb-md">
+        <a-radio-button value="panelA">{{
+          $t('examples.scaffold.stateCache.panelA')
+        }}</a-radio-button>
+        <a-radio-button value="panelB">{{
+          $t('examples.scaffold.stateCache.panelB')
+        }}</a-radio-button>
+      </a-radio-group>
+
+      <keep-alive>
+        <component :is="activeComponent" />
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'antdv-next';
+import { computed, defineComponent, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { $t } from '@/locales';
+import { useDemoStateCacheStore } from '@/stores/demoStateCache';
+import { useTabsStore } from '@/stores/tabs';
+
+const cacheStore = useDemoStateCacheStore();
+const tabsStore = useTabsStore();
+const route = useRoute();
+
+const activePanel = ref<'panelA' | 'panelB'>('panelA');
+
+const PanelA = defineComponent({
+  name: 'DemoCachePanelA',
+  setup() {
+    const localValue = ref('');
+    const localCount = ref(0);
+
+    return {
+      localValue,
+      localCount,
+    };
+  },
+  template: `
+    <div class="cache-panel">
+      <div class="panel-title">${$t('examples.scaffold.stateCache.panelADesc')}</div>
+      <a-input v-model:value="localValue" :placeholder="$t('examples.scaffold.stateCache.panelAInputPlaceholder')" />
+      <a-space>
+        <a-button size="small" @click="localCount--">-</a-button>
+        <span>${$t('examples.scaffold.stateCache.localCountLabel')}{{ localCount }}</span>
+        <a-button size="small" @click="localCount++">+</a-button>
+      </a-space>
+    </div>
+  `,
+});
+
+const PanelB = defineComponent({
+  name: 'DemoCachePanelB',
+  setup() {
+    const checked = ref(false);
+    const text = ref('');
+
+    return {
+      checked,
+      text,
+    };
+  },
+  template: `
+    <div class="cache-panel">
+      <div class="panel-title">${$t('examples.scaffold.stateCache.panelBDesc')}</div>
+      <a-switch v-model:checked="checked" checked-children="ON" un-checked-children="OFF" />
+      <a-textarea v-model:value="text" :rows="3" :placeholder="$t('examples.scaffold.stateCache.panelBTextPlaceholder')" />
+    </div>
+  `,
+});
+
+const activeComponent = computed(() => {
+  return activePanel.value === 'panelA' ? PanelA : PanelB;
+});
+
+const pinCurrentTab = () => {
+  tabsStore.togglePinTab(route.path);
+  message.success($t('examples.scaffold.stateCache.pinTabSuccess'));
+};
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.mb-md {
+  margin-bottom: var(--spacing-md);
+}
+
+.mt-md {
+  margin-top: var(--spacing-md);
+}
+
+.section-title {
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: 12px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+
+  label {
+    display: inline-block;
+    margin-bottom: 6px;
+    color: var(--color-text-secondary);
+    font-size: 12px;
+  }
+}
+
+.full-row {
+  grid-column: 1 / -1;
+}
+
+.counter-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.persist-tip {
+  margin-top: 10px;
+  color: var(--color-text-tertiary);
+  font-size: 12px;
+}
+
+.cache-panel {
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.panel-title {
+  font-weight: var(--font-weight-medium);
+}
+
+@media (max-width: 900px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/testing/index.vue b/antdv-next-admin/src/views/examples/scaffold/testing/index.vue
new file mode 100644
index 0000000..a69f7b1
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/testing/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="page-container">
+    <div class="card mb-lg">
+      <h2>{{ $t('examples.scaffold.testing.title') }}</h2>
+      <p class="text-secondary">{{ $t('examples.scaffold.testing.description') }}</p>
+
+      <a-alert type="info" show-icon :message="$t('examples.scaffold.testing.alertMessage')" />
+    </div>
+
+    <div class="card mb-lg">
+      <div class="section-title">{{ $t('examples.scaffold.testing.unitTestTitle') }}</div>
+      <pre class="code-block"><code>{{ unitCode }}</code></pre>
+    </div>
+
+    <div class="card mb-lg">
+      <div class="section-title">{{ $t('examples.scaffold.testing.e2eTestTitle') }}</div>
+      <pre class="code-block"><code>{{ e2eCode }}</code></pre>
+    </div>
+
+    <div class="card">
+      <div class="section-title">{{ $t('examples.scaffold.testing.implementationTitle') }}</div>
+      <a-steps direction="vertical" size="small">
+        <a-step
+          :title="$t('examples.scaffold.testing.step1Title')"
+          :description="$t('examples.scaffold.testing.step1Description')"
+        />
+        <a-step
+          :title="$t('examples.scaffold.testing.step2Title')"
+          :description="$t('examples.scaffold.testing.step2Description')"
+        />
+        <a-step
+          :title="$t('examples.scaffold.testing.step3Title')"
+          :description="$t('examples.scaffold.testing.step3Description')"
+        />
+      </a-steps>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const unitCode = `import { describe, expect, it } from 'vitest'
+
+function splitKeywords(keyword: string) {
+  return keyword.trim().toLowerCase().split(/\\s+/).filter(Boolean)
+}
+
+describe('splitKeywords', () => {
+  it('should split by whitespace', () => {
+    expect(splitKeywords('  foo   bar  ')).toEqual(['foo', 'bar'])
+  })
+
+  it('should return empty array for empty input', () => {
+    expect(splitKeywords('   ')).toEqual([])
+  })
+})`;
+
+const e2eCode = `import { test, expect } from '@playwright/test'
+
+test('login and filter users by keyword', async ({ page }) => {
+  await page.goto('/login')
+
+  await page.getByPlaceholder('请输入用户名').fill('admin')
+  await page.getByPlaceholder('请输入密码').fill('123456')
+  await page.getByRole('button', { name: '登录' }).click()
+
+  await page.goto('/examples/table')
+  await page.getByRole('columnheader', { name: '用户名' }).click()
+
+  await page.getByPlaceholder(/搜索/).fill('admin')
+  await page.getByRole('button', { name: '搜索' }).click()
+
+  await expect(page.locator('table')).toContainText('admin')
+})`;
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.section-title {
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: 10px;
+}
+
+.code-block {
+  background: var(--color-bg-layout);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 10px;
+  padding: 12px;
+  overflow-x: auto;
+
+  code {
+    font-family: var(--font-family-code);
+    font-size: 12px;
+    line-height: 1.6;
+    white-space: pre;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/upload-system/index.vue b/antdv-next-admin/src/views/examples/scaffold/upload-system/index.vue
new file mode 100644
index 0000000..13a414e
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/upload-system/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t("examples.scaffold.uploadSystem.title") }}</h2>
+      <p class="text-secondary mb-lg">
+        {{ $t("examples.scaffold.uploadSystem.description") }}
+      </p>
+
+      <a-space wrap class="mb-md">
+        <a-tag color="processing"
+          >{{ $t("examples.scaffold.uploadSystem.uploading") }}
+          {{ uploadingCount }}</a-tag
+        >
+        <a-tag color="success"
+          >{{ $t("examples.scaffold.uploadSystem.success") }}
+          {{ doneCount }}</a-tag
+        >
+        <a-tag color="error"
+          >{{ $t("examples.scaffold.uploadSystem.failed") }}
+          {{ errorCount }}</a-tag
+        >
+      </a-space>
+
+      <a-upload-dragger
+        class="upload-system-dragger"
+        v-model:file-list="fileList"
+        name="file"
+        multiple
+        :custom-request="customRequest"
+        :accept="'.png,.jpg,.jpeg,.pdf,.csv'"
+        @preview="handlePreview"
+      >
+        <p class="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p class="ant-upload-text">
+          {{ $t("examples.scaffold.uploadSystem.dragText") }}
+        </p>
+        <p class="ant-upload-hint">
+          {{ $t("examples.scaffold.uploadSystem.dragHint") }}
+        </p>
+      </a-upload-dragger>
+
+      <div class="toolbar">
+        <a-space>
+          <a-button :disabled="errorCount === 0" @click="retryFailed">{{
+            $t("examples.scaffold.uploadSystem.retryButton")
+          }}</a-button>
+          <a-button
+            danger
+            :disabled="fileList.length === 0"
+            @click="clearAll"
+            >{{ $t("examples.scaffold.uploadSystem.clearButton") }}</a-button
+          >
+        </a-space>
+        <div class="text-secondary">
+          {{ $t("examples.scaffold.uploadSystem.failureRate")
+          }}{{ Math.round(failureRate * 100) }}%
+        </div>
+      </div>
+
+      <a-slider v-model:value="failureRate" :min="0" :max="0.9" :step="0.05" />
+    </div>
+
+    <a-modal
+      v-model:open="previewOpen"
+      :title="previewTitle"
+      :footer="null"
+      width="720px"
+    >
+      <img :src="previewSrc" alt="preview" class="preview-image" />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InboxOutlined } from "@antdv-next/icons";
+import { message } from "antdv-next";
+import { computed, ref } from "vue";
+
+import { $t } from "@/locales";
+
+type UploadFileItem = {
+  uid: string;
+  name: string;
+  status?: "error" | "success" | "done" | "uploading" | "removed";
+  percent?: number;
+  url?: string;
+  thumbUrl?: string;
+  originFileObj?: File;
+};
+
+const fileList = ref<UploadFileItem[]>([]);
+const failureRate = ref(0.25);
+
+const previewOpen = ref(false);
+const previewSrc = ref("");
+const previewTitle = ref($t("examples.scaffold.uploadSystem.previewTitle"));
+
+const uploadingCount = computed(
+  () => fileList.value.filter((item) => item.status === "uploading").length,
+);
+const doneCount = computed(
+  () =>
+    fileList.value.filter(
+      (item) => item.status === "done" || item.status === "success",
+    ).length,
+);
+const errorCount = computed(
+  () => fileList.value.filter((item) => item.status === "error").length,
+);
+
+const getBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = reject;
+  });
+};
+
+const markFileState = (
+  uid: string,
+  updater: (item: UploadFileItem) => void,
+) => {
+  const file = fileList.value.find((item) => item.uid === uid);
+  if (!file) {
+    return;
+  }
+  updater(file);
+  fileList.value = [...fileList.value];
+};
+
+const runUploadTask = (
+  uid: string,
+  callbacks?: {
+    onProgress?: (event: { percent: number }) => void;
+    onSuccess?: (response: { url: string }) => void;
+    onError?: (error: Error) => void;
+  },
+) => {
+  let percent = 0;
+
+  const timer = window.setInterval(() => {
+    percent += 8 + Math.round(Math.random() * 16);
+
+    if (percent >= 98) {
+      percent = 98;
+    }
+
+    markFileState(uid, (item) => {
+      item.status = "uploading";
+      item.percent = percent;
+    });
+
+    callbacks?.onProgress?.({ percent });
+  }, 160);
+
+  window.setTimeout(
+    () => {
+      window.clearInterval(timer);
+
+      const failed = Math.random() < failureRate.value;
+      if (failed) {
+        const error = new Error(
+          $t("examples.scaffold.uploadSystem.uploadFailedError"),
+        );
+
+        markFileState(uid, (item) => {
+          item.status = "error";
+          item.percent = 100;
+        });
+
+        callbacks?.onError?.(error);
+        return;
+      }
+
+      const preview = `https://picsum.photos/seed/${uid}/880/560`;
+
+      markFileState(uid, (item) => {
+        item.status = "done";
+        item.percent = 100;
+        item.url = item.url || preview;
+        item.thumbUrl = item.thumbUrl || preview;
+      });
+
+      callbacks?.onSuccess?.({ url: preview });
+    },
+    1400 + Math.round(Math.random() * 900),
+  );
+};
+
+interface CustomRequestOptions {
+  file: UploadFileItem;
+  onProgress?: (event: { percent: number }) => void;
+  onSuccess?: (response: { url: string }) => void;
+  onError?: (error: Error) => void;
+}
+
+const customRequest = (options: CustomRequestOptions) => {
+  const uid = options.file.uid;
+
+  runUploadTask(uid, {
+    onProgress: ({ percent }) => {
+      options.onProgress?.({ percent });
+    },
+    onSuccess: (response) => {
+      options.onSuccess?.(response);
+      message.success(
+        $t("examples.scaffold.uploadSystem.uploadSuccessMsg", {
+          name: options.file.name,
+        }),
+      );
+    },
+    onError: (error) => {
+      options.onError?.(error);
+      message.error(
+        $t("examples.scaffold.uploadSystem.uploadFailedMsg", {
+          name: options.file.name,
+        }),
+      );
+    },
+  });
+};
+
+const retryFailed = () => {
+  const failedFiles = fileList.value.filter((item) => item.status === "error");
+  if (failedFiles.length === 0) {
+    return;
+  }
+
+  failedFiles.forEach((item) => {
+    runUploadTask(item.uid);
+  });
+
+  message.info(
+    $t("examples.scaffold.uploadSystem.retryMsg", {
+      count: failedFiles.length,
+    }),
+  );
+};
+
+const clearAll = () => {
+  fileList.value = [];
+};
+
+const handlePreview = async (file: UploadFileItem) => {
+  if (file.url) {
+    previewSrc.value = file.url;
+  } else if (file.originFileObj) {
+    previewSrc.value = await getBase64(file.originFileObj);
+  } else {
+    message.warning($t("examples.scaffold.uploadSystem.previewNotSupported"));
+    return;
+  }
+
+  previewTitle.value = file.name;
+  previewOpen.value = true;
+};
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.mb-md {
+  margin-bottom: var(--spacing-md);
+}
+
+.toolbar {
+  margin-top: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+:deep(.upload-system-dragger.ant-upload-wrapper .ant-upload-drag) {
+  height: 220px;
+  min-height: 220px;
+  background: var(--color-bg-layout);
+}
+
+:deep(.upload-system-dragger.ant-upload-wrapper .ant-upload-drag .ant-upload) {
+  height: 100%;
+  padding: 16px;
+  background: transparent;
+}
+
+:deep(
+  .upload-system-dragger.ant-upload-wrapper .ant-upload-drag .ant-upload-btn
+) {
+  background: transparent;
+}
+
+:deep(.upload-system-dragger.ant-upload-wrapper .ant-upload-list) {
+  margin-top: 10px;
+}
+
+.preview-image {
+  width: 100%;
+  max-height: 72vh;
+  object-fit: contain;
+  border-radius: 8px;
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/scaffold/virtual-table/index.vue b/antdv-next-admin/src/views/examples/scaffold/virtual-table/index.vue
new file mode 100644
index 0000000..184a025
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/scaffold/virtual-table/index.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('examples.scaffold.virtualTable.title') }}</h2>
+      <p class="text-secondary mb-lg">{{ $t('examples.scaffold.virtualTable.description') }}</p>
+
+      <a-alert
+        class="mb-lg"
+        type="info"
+        show-icon
+        :message="$t('examples.scaffold.virtualTable.tipsNativeVirtual')"
+      />
+
+      <div class="toolbar">
+        <a-space wrap>
+          <span class="text-secondary">{{ $t('examples.scaffold.virtualTable.datasetSize') }}</span>
+          <a-select v-model:value="datasetSize" style="width: 140px">
+            <a-select-option :value="5000">5,000</a-select-option>
+            <a-select-option :value="20000">20,000</a-select-option>
+            <a-select-option :value="50000">50,000</a-select-option>
+            <a-select-option :value="100000">100,000</a-select-option>
+          </a-select>
+          <a-button @click="regenerateRows">{{
+            $t('examples.scaffold.virtualTable.regenerate')
+          }}</a-button>
+        </a-space>
+
+        <a-space wrap>
+          <a-input
+            v-model:value="keyword"
+            style="width: 240px"
+            :placeholder="$t('examples.scaffold.virtualTable.searchPlaceholder')"
+          />
+          <a-select v-model:value="statusFilter" style="width: 150px">
+            <a-select-option value="all">{{
+              $t('examples.scaffold.virtualTable.allStatus')
+            }}</a-select-option>
+            <a-select-option value="active">{{
+              $t('examples.scaffold.virtualTable.statusActive')
+            }}</a-select-option>
+            <a-select-option value="inactive">{{
+              $t('examples.scaffold.virtualTable.statusInactive')
+            }}</a-select-option>
+            <a-select-option value="pending">{{
+              $t('examples.scaffold.virtualTable.statusPending')
+            }}</a-select-option>
+          </a-select>
+        </a-space>
+      </div>
+
+      <a-space wrap class="mb-lg">
+        <a-tag color="processing">
+          {{ $t('examples.scaffold.virtualTable.totalRows', { count: allRows.length }) }}
+        </a-tag>
+        <a-tag color="success">
+          {{ $t('examples.scaffold.virtualTable.filteredRows', { count: filteredRows.length }) }}
+        </a-tag>
+        <a-tag>{{ $t('examples.scaffold.virtualTable.renderedRowsTip') }}</a-tag>
+      </a-space>
+
+      <a-table
+        row-key="id"
+        size="small"
+        bordered
+        virtual
+        :columns="columns"
+        :data-source="filteredRows"
+        :pagination="false"
+        :scroll="{ y: 520, x: 1200 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'status'">
+            <a-tag :color="getStatusColor(record.status)">
+              {{ getStatusText(record.status) }}
+            </a-tag>
+          </template>
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'antdv-next';
+import { computed, onMounted, ref } from 'vue';
+
+import { $t } from '@/locales';
+
+type StatusType = 'active' | 'inactive' | 'pending';
+
+interface DemoRow {
+  id: string;
+  username: string;
+  email: string;
+  department: string;
+  status: StatusType;
+  updatedAt: string;
+}
+
+const datasetSize = ref(20000);
+const keyword = ref('');
+const statusFilter = ref<'all' | StatusType>('all');
+const allRows = ref<DemoRow[]>([]);
+
+const columns = computed(() => [
+  { title: $t('examples.scaffold.virtualTable.colId'), dataIndex: 'id', width: 130 },
+  { title: $t('examples.scaffold.virtualTable.colUsername'), dataIndex: 'username', width: 180 },
+  { title: $t('examples.scaffold.virtualTable.colEmail'), dataIndex: 'email', width: 260 },
+  {
+    title: $t('examples.scaffold.virtualTable.colDepartment'),
+    dataIndex: 'department',
+    width: 180,
+  },
+  { title: $t('examples.scaffold.virtualTable.colStatus'), dataIndex: 'status', width: 120 },
+  { title: $t('examples.scaffold.virtualTable.colUpdatedAt'), dataIndex: 'updatedAt', width: 200 },
+]);
+
+const filteredRows = computed(() => {
+  let rows = allRows.value;
+
+  const query = keyword.value.trim().toLowerCase();
+  if (query) {
+    rows = rows.filter(
+      (item) =>
+        item.username.toLowerCase().includes(query) ||
+        item.email.toLowerCase().includes(query) ||
+        item.department.toLowerCase().includes(query),
+    );
+  }
+
+  if (statusFilter.value !== 'all') {
+    rows = rows.filter((item) => item.status === statusFilter.value);
+  }
+
+  return rows;
+});
+
+function createRows(count: number) {
+  const statusList: StatusType[] = ['active', 'inactive', 'pending'];
+  const departments = ['R&D', 'Operation', 'Finance', 'Support', 'Marketing', 'Sales'];
+
+  return Array.from({ length: count }, (_, index) => {
+    const i = index + 1;
+    const day = String((i % 28) + 1).padStart(2, '0');
+    const month = String((i % 12) + 1).padStart(2, '0');
+
+    return {
+      id: `VT-${String(i).padStart(6, '0')}`,
+      username: `user_${String(i).padStart(6, '0')}`,
+      email: `user_${i}@example.com`,
+      department: departments[i % departments.length],
+      status: statusList[i % statusList.length],
+      updatedAt: `2026-${month}-${day} 10:${String(i % 60).padStart(2, '0')}:00`,
+    };
+  });
+}
+
+function regenerateRows() {
+  allRows.value = createRows(datasetSize.value);
+  message.success(
+    $t('examples.scaffold.virtualTable.regenerateSuccess', { count: datasetSize.value }),
+  );
+}
+
+function getStatusText(status: StatusType) {
+  if (status === 'active') return $t('examples.scaffold.virtualTable.statusActive');
+  if (status === 'inactive') return $t('examples.scaffold.virtualTable.statusInactive');
+  return $t('examples.scaffold.virtualTable.statusPending');
+}
+
+function getStatusColor(status: StatusType) {
+  if (status === 'active') return 'success';
+  if (status === 'inactive') return 'default';
+  return 'processing';
+}
+
+onMounted(() => {
+  regenerateRows();
+});
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: var(--spacing-md);
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/segmented/index.vue b/antdv-next-admin/src/views/examples/segmented/index.vue
new file mode 100644
index 0000000..fd6e782
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/segmented/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('exampleSegmented.title') }}</h2>
+      <p class="mb-lg">{{ $t('exampleSegmented.description') }}</p>
+
+      <a-tabs v-model:activeKey="activeTab">
+        <a-tab-pane key="basic" :tab="$t('exampleSegmented.basicTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleSegmented.basicUsage') }}</h4>
+            <a-segmented v-model:value="basicValue" :options="basicOptions" />
+            <p class="value-preview">{{ $t('exampleSegmented.currentValue') }}: {{ basicValue }}</p>
+          </div>
+
+          <div class="demo-section">
+            <h4>{{ $t('exampleSegmented.sizes') }}</h4>
+            <a-space direction="vertical">
+              <div class="size-item">
+                <span>small:</span>
+                <a-segmented v-model:value="sizeValue" :options="basicOptions" size="small" />
+              </div>
+              <div class="size-item">
+                <span>default:</span>
+                <a-segmented v-model:value="sizeValue" :options="basicOptions" />
+              </div>
+              <div class="size-item">
+                <span>large:</span>
+                <a-segmented v-model:value="sizeValue" :options="basicOptions" size="large" />
+              </div>
+            </a-space>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="icon" :tab="$t('exampleSegmented.iconTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleSegmented.iconOptions') }}</h4>
+            <a-segmented v-model:value="iconValue" :options="iconOptions" />
+            <p class="value-preview">{{ $t('exampleSegmented.currentValue') }}: {{ iconValue }}</p>
+          </div>
+
+          <div class="demo-section">
+            <h4>{{ $t('exampleSegmented.mixOptions') }}</h4>
+            <a-segmented v-model:value="mixValue" :options="mixOptions" />
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="block" :tab="$t('exampleSegmented.blockTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleSegmented.blockStyle') }}</h4>
+            <a-segmented v-model:value="blockValue" :options="basicOptions" block />
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="disabled" :tab="$t('exampleSegmented.disabledTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleSegmented.allDisabled') }}</h4>
+            <a-segmented v-model:value="disabledValue" :options="basicOptions" disabled />
+          </div>
+
+          <div class="demo-section">
+            <h4>{{ $t('exampleSegmented.partialDisabled') }}</h4>
+            <a-segmented v-model:value="partialValue" :options="partialDisabledOptions" />
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="business" :tab="$t('exampleSegmented.businessTab')">
+          <div class="demo-section">
+            <h4>{{ $t('exampleSegmented.viewSwitch') }}</h4>
+            <div class="view-switch-demo">
+              <a-segmented v-model:value="viewMode" :options="viewOptions" />
+              <div class="view-content">
+                <div v-if="viewMode === 'list'" class="list-view">
+                  <div v-for="i in 3" :key="i" class="list-item">
+                    <div class="list-item-avatar"></div>
+                    <div class="list-item-content">
+                      <div class="list-item-title">{{ $t('exampleSegmented.listItemTitle') }} {{ i }}</div>
+                      <div class="list-item-desc">{{ $t('exampleSegmented.listItemDesc') }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="card-view">
+                  <div v-for="i in 3" :key="i" class="card-item">
+                    <div class="card-item-cover"></div>
+                    <div class="card-item-title">{{ $t('exampleSegmented.cardItemTitle') }} {{ i }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="demo-section">
+            <h4>{{ $t('exampleSegmented.filterSwitch') }}</h4>
+            <a-segmented v-model:value="filterValue" :options="filterOptions" />
+            <p class="value-preview">{{ $t('exampleSegmented.filterResult') }}: {{ filterValue }}</p>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  AppstoreOutlined,
+  BarsOutlined,
+  CloudOutlined,
+  DesktopOutlined,
+  MobileOutlined,
+  UnorderedListOutlined,
+} from '@antdv-next/icons'
+import { ref } from 'vue'
+
+const activeTab = ref('basic')
+
+const basicValue = ref('daily')
+const basicOptions = [
+  { label: 'Daily', value: 'daily' },
+  { label: 'Weekly', value: 'weekly' },
+  { label: 'Monthly', value: 'monthly' },
+  { label: 'Yearly', value: 'yearly' },
+]
+
+const sizeValue = ref('daily')
+
+const iconValue = ref('list')
+const iconOptions = [
+  { value: 'list', icon: () => h(UnorderedListOutlined) },
+  { value: 'grid', icon: () => h(AppstoreOutlined) },
+]
+
+const mixValue = ref('mobile')
+const mixOptions = [
+  { value: 'mobile', label: 'Mobile', icon: () => h(MobileOutlined) },
+  { value: 'desktop', label: 'Desktop', icon: () => h(DesktopOutlined) },
+  { value: 'cloud', label: 'Cloud', icon: () => h(CloudOutlined) },
+]
+
+const blockValue = ref('map')
+
+const disabledValue = ref('daily')
+
+const partialValue = ref('waiting')
+const partialDisabledOptions = [
+  { label: 'Waiting', value: 'waiting' },
+  { label: 'Processing', value: 'processing', disabled: true },
+  { label: 'Done', value: 'done', disabled: true },
+]
+
+const viewMode = ref('list')
+const viewOptions = [
+  { value: 'list', icon: () => h(BarsOutlined) },
+  { value: 'card', icon: () => h(AppstoreOutlined) },
+]
+
+const filterValue = ref('all')
+const filterOptions = [
+  { label: 'All', value: 'all' },
+  { label: 'Active', value: 'active' },
+  { label: 'Pending', value: 'pending' },
+  { label: 'Closed', value: 'closed' },
+]
+
+import { h } from 'vue'
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.demo-section {
+  margin-bottom: 32px;
+
+  h4 {
+    margin-bottom: 12px;
+    font-weight: 500;
+  }
+}
+
+.value-preview {
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: var(--color-bg-container);
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.size-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  span {
+    width: 60px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.view-switch-demo {
+  .view-content {
+    margin-top: 16px;
+    padding: 16px;
+    background: var(--color-bg-container);
+    border-radius: 8px;
+    border: 1px solid var(--color-border-secondary);
+    min-height: 200px;
+  }
+}
+
+.list-view {
+  .list-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border-bottom: 1px solid var(--color-border-secondary);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .list-item-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--color-primary-bg-hover);
+  }
+
+  .list-item-content {
+    flex: 1;
+  }
+
+  .list-item-title {
+    font-weight: 500;
+    margin-bottom: 4px;
+  }
+
+  .list-item-desc {
+    font-size: 13px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.card-view {
+  display: flex;
+  gap: 16px;
+
+  .card-item {
+    flex: 1;
+    background: var(--color-bg-elevated);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .card-item-cover {
+    height: 100px;
+    background: var(--color-primary-bg-hover);
+  }
+
+  .card-item-title {
+    padding: 12px;
+    font-weight: 500;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/spin/index.vue b/antdv-next-admin/src/views/examples/spin/index.vue
new file mode 100644
index 0000000..1e7006f
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/spin/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="page-container overflow-hidden">
+    <div class="card mb-4">
+      <h2 class="text-xl font-bold mb-2">{{ $t('exampleSpin.title') }}</h2>
+      <p class="text-[var(--color-text-secondary)]">{{ $t('exampleSpin.description') }}</p>
+    </div>
+
+    <a-row :gutter="[16, 16]">
+      <!-- Basic -->
+      <a-col :span="24" :lg="12">
+        <a-card :title="$t('exampleSpin.basic')" :bordered="false">
+          <a-flex align="center" gap="middle">
+            <a-spin size="small" />
+            <a-spin />
+            <a-spin size="large" />
+          </a-flex>
+        </a-card>
+      </a-col>
+
+      <!-- Tip -->
+      <a-col :span="24" :lg="12">
+        <a-card :title="$t('exampleSpin.tip')" :bordered="false">
+          <a-flex gap="middle">
+            <a-spin :tip="$t('common.loading')" size="small">
+              <div class="p-[50px] bg-black/5 rounded" />
+            </a-spin>
+            <a-spin :tip="$t('common.loading')">
+              <div class="p-[50px] bg-black/5 rounded" />
+            </a-spin>
+            <a-spin :tip="$t('common.loading')" size="large">
+              <div class="p-[50px] bg-black/5 rounded" />
+            </a-spin>
+          </a-flex>
+        </a-card>
+      </a-col>
+
+      <!-- Nested -->
+      <a-col :span="24" :lg="12">
+        <a-card :title="$t('exampleSpin.nested')" :bordered="false">
+          <a-flex gap="middle" vertical>
+            <a-spin :spinning="nestedLoading">
+              <a-alert
+                message="Alert message title"
+                description="Further details about the context of this alert."
+                type="info"
+              />
+            </a-spin>
+            <a-flex align="center" gap="small">
+              <span>{{ $t('exampleSpin.loadingState') }}</span>
+              <a-switch v-model:checked="nestedLoading" />
+            </a-flex>
+          </a-flex>
+        </a-card>
+      </a-col>
+
+      <!-- Delay -->
+      <a-col :span="24" :lg="12">
+        <a-card :title="$t('exampleSpin.delay')" :bordered="false">
+          <template #extra>
+            <a-tag color="blue">delay=500ms</a-tag>
+          </template>
+          <a-flex gap="middle" vertical>
+            <a-spin :spinning="delayLoading" :delay="500">
+              <a-alert
+                message="Alert message title"
+                description="Further details about the context of this alert."
+                type="info"
+              />
+            </a-spin>
+            <a-flex align="center" gap="small">
+              <span>{{ $t('exampleSpin.loadingState') }}</span>
+              <a-switch v-model:checked="delayLoading" />
+            </a-flex>
+          </a-flex>
+        </a-card>
+      </a-col>
+
+      <!-- Custom Indicator -->
+      <a-col :span="24" :lg="12">
+        <a-card :title="$t('exampleSpin.customIndicator')" :bordered="false">
+          <a-flex align="center" gap="middle">
+            <a-spin size="small">
+              <template #indicator>
+                <LoadingOutlined spin />
+              </template>
+            </a-spin>
+            <a-spin>
+              <template #indicator>
+                <LoadingOutlined spin />
+              </template>
+            </a-spin>
+            <a-spin size="large">
+              <template #indicator>
+                <LoadingOutlined spin />
+              </template>
+            </a-spin>
+            <a-spin>
+              <template #indicator>
+                <LoadingOutlined spin style="font-size: 48px" />
+              </template>
+            </a-spin>
+          </a-flex>
+        </a-card>
+      </a-col>
+
+      <!-- Percent / Progress -->
+      <a-col :span="24" :lg="12">
+        <a-card :title="$t('exampleSpin.percent')" :bordered="false">
+          <a-flex align="center" gap="middle">
+            <a-switch
+              v-model:checked="autoPercent"
+              checked-children="Auto"
+              un-checked-children="Auto"
+            />
+            <a-spin :percent="mergedPercent" size="small" />
+            <a-spin :percent="mergedPercent" />
+            <a-spin :percent="mergedPercent" size="large" />
+          </a-flex>
+        </a-card>
+      </a-col>
+
+      <!-- Custom Styles -->
+      <a-col :span="24" :lg="12">
+        <a-card :title="$t('exampleSpin.customStyle')" :bordered="false">
+          <a-flex align="center" gap="middle">
+            <a-spin v-bind="sharedStyleProps" :styles="{ indicator: { color: '#00d4ff' } }" />
+            <a-spin
+              v-bind="sharedStyleProps"
+              :styles="() => ({ indicator: { color: '#722ed1' } })"
+              size="small"
+            />
+            <a-spin
+              v-bind="sharedStyleProps"
+              :styles="{ indicator: { color: '#52c41a' } }"
+              size="large"
+            />
+          </a-flex>
+        </a-card>
+      </a-col>
+
+      <!-- Fullscreen -->
+      <a-col :span="24" :lg="12">
+        <a-card :title="$t('exampleSpin.fullscreen')" :bordered="false">
+          <a-button type="primary" @click="showFullscreen">
+            {{ $t('exampleSpin.showFullscreen') }}
+          </a-button>
+          <a-spin :spinning="fullscreenSpinning" :percent="fullscreenPercent" fullscreen />
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LoadingOutlined } from '@antdv-next/icons';
+import { computed, onUnmounted, ref, watch } from 'vue';
+
+// Nested loading
+const nestedLoading = ref(false);
+
+// Delay loading
+const delayLoading = ref(false);
+
+// Percent / Progress
+const autoPercent = ref(false);
+const percent = ref(-50);
+let percentTimer: ReturnType<typeof setTimeout> | null = null;
+
+const mergedPercent = computed(() => (autoPercent.value ? 'auto' : percent.value));
+
+function updatePercent() {
+  percentTimer = setTimeout(() => {
+    const next = percent.value + 5;
+    percent.value = next > 150 ? -50 : next;
+  }, 100);
+}
+
+watch(
+  percent,
+  (_n, _o, onCleanup) => {
+    updatePercent();
+    onCleanup(() => {
+      if (percentTimer) {
+        clearTimeout(percentTimer);
+        percentTimer = null;
+      }
+    });
+  },
+  { immediate: true },
+);
+
+watch(autoPercent, () => {
+  percent.value = -50;
+});
+
+// Custom style shared props
+const sharedStyleProps = {
+  spinning: true,
+  percent: 0,
+};
+
+// Fullscreen
+const fullscreenSpinning = ref(false);
+const fullscreenPercent = ref(0);
+
+function showFullscreen() {
+  fullscreenSpinning.value = true;
+  let ptg = -10;
+  const interval = setInterval(() => {
+    ptg += 5;
+    fullscreenPercent.value = ptg;
+    if (ptg > 120) {
+      clearInterval(interval);
+      fullscreenSpinning.value = false;
+      fullscreenPercent.value = 0;
+    }
+  }, 100);
+}
+
+onUnmounted(() => {
+  if (percentTimer) {
+    clearTimeout(percentTimer);
+    percentTimer = null;
+  }
+});
+</script>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/splitter/index.vue b/antdv-next-admin/src/views/examples/splitter/index.vue
new file mode 100644
index 0000000..4af0d80
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/splitter/index.vue
@@ -0,0 +1,328 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('exampleSplitter.title') }}</h2>
+      <p class="mb-lg">{{ $t('exampleSplitter.description') }}</p>
+
+      <a-tabs v-model:activeKey="activeTab">
+        <a-tab-pane key="basic" :tab="$t('exampleSplitter.basicTab')">
+          <div class="splitter-demo">
+            <h4>{{ $t('exampleSplitter.horizontalSplit') }}</h4>
+            <a-splitter :style="{ height: '200px', border: '1px solid var(--color-border)' }">
+              <a-splitter-panel>
+                <div class="panel-content panel-left">
+                  {{ $t('exampleSplitter.leftPanel') }}
+                </div>
+              </a-splitter-panel>
+              <a-splitter-panel>
+                <div class="panel-content panel-right">
+                  {{ $t('exampleSplitter.rightPanel') }}
+                </div>
+              </a-splitter-panel>
+            </a-splitter>
+
+            <h4 style="margin-top: 24px">{{ $t('exampleSplitter.verticalSplit') }}</h4>
+            <a-splitter :style="{ height: '200px', border: '1px solid var(--color-border)' }" layout="vertical">
+              <a-splitter-panel>
+                <div class="panel-content panel-top">
+                  {{ $t('exampleSplitter.topPanel') }}
+                </div>
+              </a-splitter-panel>
+              <a-splitter-panel>
+                <div class="panel-content panel-bottom">
+                  {{ $t('exampleSplitter.bottomPanel') }}
+                </div>
+              </a-splitter-panel>
+            </a-splitter>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="nested" :tab="$t('exampleSplitter.nestedTab')">
+          <div class="splitter-demo">
+            <h4>{{ $t('exampleSplitter.threeColumnLayout') }}</h4>
+            <a-splitter :style="{ height: '300px', border: '1px solid var(--color-border)' }">
+              <a-splitter-panel :size="200" :min="100" :max="300">
+                <div class="panel-content panel-sidebar">
+                  {{ $t('exampleSplitter.sidebarPanel') }}
+                </div>
+              </a-splitter-panel>
+              <a-splitter-panel>
+                <a-splitter layout="vertical">
+                  <a-splitter-panel>
+                    <div class="panel-content panel-main">
+                      {{ $t('exampleSplitter.mainContent') }}
+                    </div>
+                  </a-splitter-panel>
+                  <a-splitter-panel :size="100">
+                    <div class="panel-content panel-footer">
+                      {{ $t('exampleSplitter.footerPanel') }}
+                    </div>
+                  </a-splitter-panel>
+                </a-splitter>
+              </a-splitter-panel>
+              <a-splitter-panel :size="200" :min="150">
+                <div class="panel-content panel-aside">
+                  {{ $t('exampleSplitter.asidePanel') }}
+                </div>
+              </a-splitter-panel>
+            </a-splitter>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="config" :tab="$t('exampleSplitter.configTab')">
+          <div class="config-section">
+            <div class="config-controls">
+              <div class="config-item">
+                <span>{{ $t('exampleSplitter.minSize') }}</span>
+                <a-input-number v-model:value="configMinSize" :min="50" :max="300" />
+              </div>
+              <div class="config-item">
+                <span>{{ $t('exampleSplitter.maxSize') }}</span>
+                <a-input-number v-model:value="configMaxSize" :min="100" :max="500" />
+              </div>
+              <div class="config-item">
+                <span>{{ $t('exampleSplitter.defaultSize') }}</span>
+                <a-input-number v-model:value="configDefaultSize" :min="100" :max="400" />
+              </div>
+              <div class="config-item">
+                <span>{{ $t('exampleSplitter.resizable') }}</span>
+                <a-switch v-model:checked="configResizable" />
+              </div>
+            </div>
+            <a-splitter :style="{ height: '200px', border: '1px solid var(--color-border)' }">
+              <a-splitter-panel
+                :size="configDefaultSize"
+                :min="configMinSize"
+                :max="configMaxSize"
+                :resizable="configResizable"
+              >
+                <div class="panel-content panel-config">
+                  {{ $t('exampleSplitter.configurablePanel') }}
+                  <div class="config-info">
+                    min: {{ configMinSize }}px | max: {{ configMaxSize }}px
+                  </div>
+                </div>
+              </a-splitter-panel>
+              <a-splitter-panel>
+                <div class="panel-content panel-auto">
+                  {{ $t('exampleSplitter.autoPanel') }}
+                </div>
+              </a-splitter-panel>
+            </a-splitter>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="business" :tab="$t('exampleSplitter.businessTab')">
+          <div class="splitter-demo">
+            <h4>{{ $t('exampleSplitter.codeEditorLayout') }}</h4>
+            <a-splitter :style="{ height: '350px', border: '1px solid var(--color-border)' }">
+              <a-splitter-panel :size="220" :min="180">
+                <div class="panel-content panel-file-tree">
+                  <div class="file-tree">
+                    <div class="file-item folder">
+                      <FolderOutlined /> src
+                    </div>
+                    <div class="file-item">
+                      <FileOutlined /> main.ts
+                    </div>
+                    <div class="file-item">
+                      <FileOutlined /> App.vue
+                    </div>
+                    <div class="file-item folder">
+                      <FolderOutlined /> components
+                    </div>
+                    <div class="file-item">
+                      <FileOutlined /> Header.vue
+                    </div>
+                    <div class="file-item">
+                      <FileOutlined /> Footer.vue
+                    </div>
+                  </div>
+                </div>
+              </a-splitter-panel>
+              <a-splitter-panel>
+                <a-splitter layout="vertical">
+                  <a-splitter-panel>
+                    <div class="panel-content panel-code">
+                      <pre class="code-preview"><code>import {{ '{' }} createApp {{ '}' }} from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')</code></pre>
+                    </div>
+                  </a-splitter-panel>
+                  <a-splitter-panel :size="100">
+                    <div class="panel-content panel-terminal">
+                      <span class="terminal-prompt">$</span> npm run dev
+                    </div>
+                  </a-splitter-panel>
+                </a-splitter>
+              </a-splitter-panel>
+            </a-splitter>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FileOutlined, FolderOutlined } from '@antdv-next/icons'
+import { ref } from 'vue'
+
+const activeTab = ref('basic')
+const configMinSize = ref(100)
+const configMaxSize = ref(400)
+const configDefaultSize = ref(200)
+const configResizable = ref(true)
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.splitter-demo {
+  h4 {
+    margin-bottom: 12px;
+    font-weight: 500;
+  }
+}
+
+.panel-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-container);
+  color: var(--color-text-secondary);
+  font-size: 14px;
+}
+
+.panel-left {
+  background: var(--color-primary-bg-hover);
+}
+
+.panel-right {
+  background: var(--color-success-bg-hover);
+}
+
+.panel-top {
+  background: var(--color-warning-bg-hover);
+}
+
+.panel-bottom {
+  background: var(--color-info-bg-hover);
+}
+
+.panel-sidebar {
+  background: var(--color-bg-elevated);
+}
+
+.panel-main {
+  background: var(--color-bg-container);
+}
+
+.panel-footer {
+  background: var(--color-bg-spotlight);
+}
+
+.panel-aside {
+  background: var(--color-bg-elevated);
+}
+
+.panel-config {
+  background: var(--color-primary-bg-hover);
+}
+
+.panel-auto {
+  background: var(--color-bg-container);
+}
+
+.panel-file-tree {
+  background: var(--color-bg-elevated);
+  padding: 12px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.file-tree {
+  width: 100%;
+}
+
+.file-item {
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-bg-container);
+  }
+
+  &.folder {
+    font-weight: 500;
+  }
+}
+
+.panel-code {
+  background: #1e1e1e;
+  padding: 16px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.code-preview {
+  margin: 0;
+  color: #d4d4d4;
+  font-family: 'Fira Code', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.panel-terminal {
+  background: #1e1e1e;
+  padding: 12px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  color: #4ec9b0;
+  font-family: 'Fira Code', monospace;
+}
+
+.terminal-prompt {
+  color: #4ec9b0;
+  margin-right: 8px;
+}
+
+.config-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.config-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  background: var(--color-bg-container);
+}
+
+.config-info {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+</style>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/table/index.vue b/antdv-next-admin/src/views/examples/table/index.vue
new file mode 100644
index 0000000..7749249
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/table/index.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="page-container">
+    <ProTable
+      :columns="columns"
+      :request="fetchData"
+      :toolbar="{
+        title: $t('exampleTable.userList'),
+        subTitle: $t('exampleTable.subTitle'),
+        actions: ['refresh', 'columnSetting'],
+      }"
+      :search="{
+        labelWidth: 80,
+        defaultCollapsed: true,
+      }"
+      :header-filter="{
+        defaultMode: 'server',
+        requestPayload: 'flat',
+      }"
+      row-key="id"
+    >
+      <template #toolbar-actions>
+        <a-button type="primary" class="create-user-btn" @click="handleCreate">
+          <PlusOutlined /> {{ $t("exampleTable.createUser") }}
+        </a-button>
+      </template>
+
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'status'">
+          <a-switch
+            :checked="record.status === 'active'"
+            @change="handleStatusChange(record, $event as boolean)"
+          >
+            <template #checkedChildren>{{ $t("user.active") }}</template>
+            <template #unCheckedChildren>{{ $t("user.inactive") }}</template>
+          </a-switch>
+        </template>
+        <template v-else-if="column.dataIndex === 'gender'">
+          <a-tag :color="genderValueEnum[record.gender]?.color">
+            {{ genderValueEnum[record.gender]?.text || record.gender }}
+          </a-tag>
+        </template>
+      </template>
+    </ProTable>
+
+    <!-- Create/Edit Modal -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="
+        editingId ? $t('exampleTable.editUser') : $t('exampleTable.createUser')
+      "
+      width="600px"
+      @ok="handleSubmit"
+    >
+      <ProForm
+        ref="formRef"
+        :form-items="formItems"
+        :initial-values="formData"
+        :grid="{ cols: 2, gutter: 16 }"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProTableColumn, ProFormItem } from "@/types/pro";
+import type { User } from "@/types/auth";
+import type { PageParams } from "@/types/api";
+
+import { PlusOutlined, EditOutlined, DeleteOutlined } from "@antdv-next/icons";
+import { message } from "antdv-next";
+import { ref, computed } from "vue";
+
+import { getUserList, createUser, updateUser, deleteUser } from "@/api/user";
+import ProForm from "@/components/Pro/ProForm/index.vue";
+import ProTable from "@/components/Pro/ProTable/index.vue";
+import { $t } from "@/locales";
+import { commonRules } from "@/utils/formRules";
+
+const modalVisible = ref(false);
+const editingId = ref<string | null>(null);
+const formRef = ref();
+const formData = ref({});
+
+const genderOptions = computed(() => [
+  { label: $t("user.male"), value: "male" },
+  { label: $t("user.female"), value: "female" },
+]);
+
+const genderValueEnum = computed<
+  Record<string, { text: string; color?: string }>
+>(() => ({
+  male: { text: $t("user.male"), color: "blue" },
+  female: { text: $t("user.female"), color: "pink" },
+}));
+
+// Table columns configuration
+const columns = computed<ProTableColumn[]>(() => [
+  {
+    title: $t("user.username"),
+    dataIndex: "username",
+    width: 150,
+    fixed: "left",
+    headerFilter: {
+      type: "keyword",
+      mode: "server",
+      icon: "search",
+      placeholder: `搜索${$t("user.username")}`,
+      matchAllKeywords: true,
+    },
+  },
+  {
+    title: $t("user.email"),
+    dataIndex: "email",
+    search: true,
+    searchType: "input",
+    copyable: true,
+  },
+  {
+    title: $t("user.realName"),
+    dataIndex: "realName",
+    search: true,
+    searchType: "input",
+  },
+  {
+    title: $t("user.phone"),
+    dataIndex: "phone",
+  },
+  {
+    title: $t("user.gender"),
+    dataIndex: "gender",
+    search: true,
+    searchType: "select",
+    searchOptions: genderOptions.value,
+    headerFilter: {
+      type: "select",
+      mode: "server",
+      icon: "filter",
+      multiple: true,
+      options: genderOptions.value,
+    },
+    valueType: "tag",
+    valueEnum: genderValueEnum.value,
+  },
+  {
+    title: $t("common.status"),
+    dataIndex: "status",
+    width: 150,
+    headerFilter: {
+      type: "select",
+      mode: "server",
+      icon: "filter",
+      multiple: false,
+      options: [
+        { label: $t("user.active"), value: "active" },
+        { label: $t("user.inactive"), value: "inactive" },
+      ],
+    },
+  },
+  {
+    title: $t("common.createTime"),
+    dataIndex: "createdAt",
+    valueType: "dateTime",
+    search: true,
+    searchType: "dateRange",
+    sorter: true,
+  },
+  {
+    title: $t("common.actions"),
+    dataIndex: "action",
+    width: 200,
+    fixed: "right",
+    actions: [
+      {
+        label: $t("common.edit"),
+        icon: EditOutlined,
+        onClick: (record) => handleEdit(record as unknown as User),
+      },
+      {
+        label: $t("common.delete"),
+        icon: DeleteOutlined,
+        danger: true,
+        confirm: $t("user.confirmDelete"),
+        onClick: (record) => handleDelete(record as unknown as User),
+      },
+    ],
+  },
+]);
+
+// Form items configuration
+const formItems = computed<ProFormItem[]>(() => [
+  {
+    name: "username",
+    label: $t("user.username"),
+    type: "input",
+    required: true,
+    rules: [
+      commonRules.required(),
+      commonRules.length(3, 20),
+      commonRules.username(),
+    ],
+  },
+  {
+    name: "email",
+    label: $t("user.email"),
+    type: "input",
+    required: true,
+    rules: [commonRules.required(), commonRules.email()],
+  },
+  {
+    name: "realName",
+    label: $t("user.realName"),
+    type: "input",
+    required: true,
+  },
+  {
+    name: "phone",
+    label: $t("user.phone"),
+    type: "input",
+    rules: [commonRules.phone()],
+  },
+  {
+    name: "gender",
+    label: $t("user.gender"),
+    type: "radio",
+    required: true,
+    options: genderOptions.value,
+  },
+  {
+    name: "status",
+    label: $t("common.status"),
+    type: "radio",
+    required: true,
+    initialValue: "active",
+    options: [
+      { label: $t("user.active"), value: "active" },
+      { label: $t("user.inactive"), value: "inactive" },
+    ],
+  },
+  {
+    name: "bio",
+    label: $t("user.bio"),
+    type: "textarea",
+    colSpan: 2,
+    props: {
+      rows: 4,
+      maxLength: 200,
+      showCount: true,
+    },
+  },
+]);
+
+// Methods
+const fetchData = async (params: PageParams) => {
+  const res = await getUserList(params);
+  return {
+    data: res.data.list,
+    total: res.data.total,
+    success: true,
+  };
+};
+
+const handleCreate = () => {
+  editingId.value = null;
+  formData.value = {};
+  modalVisible.value = true;
+};
+
+const handleEdit = (record: User) => {
+  editingId.value = record.id;
+  formData.value = { ...record };
+  modalVisible.value = true;
+};
+
+const handleDelete = async (record: User) => {
+  await deleteUser(record.id);
+  message.success($t("exampleTable.deleteSuccess"));
+};
+
+const handleSubmit = async () => {
+  const valid = await formRef.value?.validate();
+  if (!valid) return;
+
+  const values = formRef.value?.getFieldsValue();
+
+  try {
+    if (editingId.value) {
+      await updateUser(editingId.value, values);
+      message.success($t("exampleTable.updateSuccess"));
+    } else {
+      await createUser(values);
+      message.success($t("exampleTable.createSuccess"));
+    }
+    modalVisible.value = false;
+  } catch (error: unknown) {
+    message.error((error as Error).message || $t("exampleTable.createSuccess"));
+  }
+};
+
+const handleStatusChange = async (record: User, checked: boolean) => {
+  try {
+    const newStatus = checked ? "active" : "inactive";
+    await updateUser(record.id, { ...record, status: newStatus });
+    record.status = newStatus;
+    message.success($t("exampleTable.updateSuccess"));
+  } catch (error: unknown) {
+    message.error((error as Error).message || $t("common.error"));
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.create-user-btn {
+  box-shadow: 0 4px 14px rgba(24, 119, 255, 0.3);
+  border: none;
+
+  &:hover {
+    box-shadow: 0 8px 18px rgba(24, 119, 255, 0.36);
+    transform: translateY(-1px);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/examples/tour/index.vue b/antdv-next-admin/src/views/examples/tour/index.vue
new file mode 100644
index 0000000..b7fe63b
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/tour/index.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('exampleTour.title') }}</h2>
+      <p class="mb-lg">{{ $t('exampleTour.description') }}</p>
+
+      <a-space wrap :size="12">
+        <a-button type="primary" @click="startBasicTour">
+          {{ $t('exampleTour.startBasicTour') }}
+        </a-button>
+        <a-button @click="startCustomTour">
+          {{ $t('exampleTour.startCustomTour') }}
+        </a-button>
+      </a-space>
+
+      <a-divider />
+
+      <div class="demo-area">
+        <a-space :size="16">
+          <a-button ref="btn1">
+            <SearchOutlined /> {{ $t('exampleTour.searchButton') }}
+          </a-button>
+          <a-button ref="btn2">
+            <PlusOutlined /> {{ $t('exampleTour.createButton') }}
+          </a-button>
+          <a-button ref="btn3">
+            <SettingOutlined /> {{ $t('exampleTour.settingsButton') }}
+          </a-button>
+          <a-button ref="btn4">
+            <ExportOutlined /> {{ $t('exampleTour.exportButton') }}
+          </a-button>
+        </a-space>
+      </div>
+
+      <a-divider />
+
+      <div class="config-section">
+        <h4>{{ $t('exampleTour.tourConfig') }}</h4>
+        <div class="config-grid">
+          <div class="config-item">
+            <span>{{ $t('exampleTour.showMask') }}</span>
+            <a-switch v-model:checked="tourConfig.mask" />
+          </div>
+          <div class="config-item">
+            <span>{{ $t('exampleTour.showArrow') }}</span>
+            <a-switch v-model:checked="tourConfig.arrow" />
+          </div>
+          <div class="config-item">
+            <span>{{ $t('exampleTour.scrollIntoView') }}</span>
+            <a-switch v-model:checked="tourConfig.scrollIntoView" />
+          </div>
+          <div class="config-item">
+            <span>{{ $t('exampleTour.indicatorType') }}</span>
+            <a-select v-model:value="tourConfig.type" style="width: 120px">
+              <a-select-option value="default">default</a-select-option>
+              <a-select-option value="primary">primary</a-select-option>
+            </a-select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <a-tour
+      v-model:current="basicCurrent"
+      :open="basicOpen"
+      :steps="basicSteps"
+      :mask="tourConfig.mask"
+      :arrow="tourConfig.arrow"
+      :type="tourConfig.type"
+      @close="basicOpen = false"
+    />
+
+    <a-tour
+      v-model:current="customCurrent"
+      :open="customOpen"
+      :steps="customSteps"
+      :mask="tourConfig.mask"
+      :arrow="tourConfig.arrow"
+      :type="tourConfig.type"
+      @close="customOpen = false"
+    >
+      <template #indicatorsRender="{ current, total }">
+        <span class="custom-indicator">
+          {{ current + 1 }} / {{ total }}
+        </span>
+      </template>
+    </a-tour>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ExportOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  SettingOutlined,
+} from '@antdv-next/icons'
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const btn1 = ref()
+const btn2 = ref()
+const btn3 = ref()
+const btn4 = ref()
+
+const basicOpen = ref(false)
+const basicCurrent = ref(0)
+
+const customOpen = ref(false)
+const customCurrent = ref(0)
+
+const tourConfig = reactive({
+  mask: true,
+  arrow: true,
+  scrollIntoView: true,
+  type: 'default' as 'default' | 'primary',
+})
+
+const basicSteps = [
+  {
+    title: t('exampleTour.step1Title'),
+    description: t('exampleTour.step1Desc'),
+    target: () => btn1.value?.$el,
+  },
+  {
+    title: t('exampleTour.step2Title'),
+    description: t('exampleTour.step2Desc'),
+    target: () => btn2.value?.$el,
+  },
+  {
+    title: t('exampleTour.step3Title'),
+    description: t('exampleTour.step3Desc'),
+    target: () => btn3.value?.$el,
+  },
+  {
+    title: t('exampleTour.step4Title'),
+    description: t('exampleTour.step4Desc'),
+    target: () => btn4.value?.$el,
+  },
+]
+
+const customSteps = [
+  {
+    title: t('exampleTour.customStep1Title'),
+    description: t('exampleTour.customStep1Desc'),
+    target: () => btn1.value?.$el,
+    placement: 'right' as const,
+  },
+  {
+    title: t('exampleTour.customStep2Title'),
+    description: t('exampleTour.customStep2Desc'),
+    target: () => btn2.value?.$el,
+    placement: 'bottom' as const,
+  },
+  {
+    title: t('exampleTour.customStep3Title'),
+    description: t('exampleTour.customStep3Desc'),
+    target: () => btn3.value?.$el,
+    placement: 'left' as const,
+  },
+  {
+    title: t('exampleTour.customStep4Title'),
+    description: t('exampleTour.customStep4Desc'),
+    target: () => btn4.value?.$el,
+    placement: 'top' as const,
+  },
+]
+
+const startBasicTour = () => {
+  basicCurrent.value = 0
+  basicOpen.value = true
+}
+
+const startCustomTour = () => {
+  customCurrent.value = 0
+  customOpen.value = true
+}
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.demo-area {
+  padding: 24px;
+  background: var(--color-bg-container);
+  border-radius: 8px;
+  border: 1px solid var(--color-border-secondary);
+}
+
+.config-section {
+  h4 {
+    margin-bottom: 16px;
+    font-weight: 500;
+  }
+}
+
+.config-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  background: var(--color-bg-container);
+}
+
+.custom-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 20px;
+  padding: 0 8px;
+  background: var(--color-primary);
+  color: #fff;
+  border-radius: 10px;
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/antdv-next-admin/src/views/examples/watermark/index.vue b/antdv-next-admin/src/views/examples/watermark/index.vue
new file mode 100644
index 0000000..3bb3925
--- /dev/null
+++ b/antdv-next-admin/src/views/examples/watermark/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="page-container">
+    <div class="card">
+      <h2>{{ $t('exampleWatermark.title') }}</h2>
+      <p class="mb-lg">{{ $t('exampleWatermark.description') }}</p>
+
+      <a-form layout="vertical" :style="{ maxWidth: '600px' }">
+        <a-form-item :label="$t('exampleWatermark.enableGlobal')">
+          <a-switch
+            :checked="watermarkStore.enabled"
+            @change="(val: boolean) => watermarkStore.setEnabled(val)"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('exampleWatermark.content')">
+          <a-input
+            :value="watermarkStore.content"
+            @update:value="(val: string) => watermarkStore.setContent(val)"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('exampleWatermark.fontSize')">
+          <a-input-number
+            :value="watermarkStore.fontSize"
+            :min="12"
+            :max="48"
+            @change="(val: number) => watermarkStore.setFontSize(val)"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('exampleWatermark.rotate')">
+          <a-slider
+            :value="watermarkStore.rotate"
+            :min="-180"
+            :max="180"
+            @change="(val: number) => watermarkStore.setRotate(val)"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('exampleWatermark.opacity')">
+          <a-slider
+            :value="watermarkStore.opacity"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            @change="(val: number) => watermarkStore.setOpacity(val)"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('exampleWatermark.gapX')">
+          <a-input-number
+            :value="watermarkStore.gap[0]"
+            :min="10"
+            :max="500"
+            @change="(val: number) => watermarkStore.setGap([val, watermarkStore.gap[1]])"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('exampleWatermark.gapY')">
+          <a-input-number
+            :value="watermarkStore.gap[1]"
+            :min="10"
+            :max="500"
+            @change="(val: number) => watermarkStore.setGap([watermarkStore.gap[0], val])"
+          />
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useWatermarkStore } from '@/stores/watermark';
+
+const watermarkStore = useWatermarkStore();
+</script>
+
+<style scoped lang="scss">
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+</style>
diff --git a/antdv-next-admin/src/views/login/index.vue b/antdv-next-admin/src/views/login/index.vue
new file mode 100644
index 0000000..c968553
--- /dev/null
+++ b/antdv-next-admin/src/views/login/index.vue
@@ -0,0 +1,702 @@
+<template>
+  <div class="login-shell">
+    <div class="ambient ambient-left"></div>
+    <div class="ambient ambient-right"></div>
+    <div class="ambient ambient-bottom"></div>
+
+    <div class="login-tools">
+      <LanguageSwitch />
+      <ThemeToggle />
+    </div>
+
+    <div class="login-box">
+      <div class="login-header">
+        <!-- Keep consistent with the in-app (top-left) logo style -->
+        <div class="logo-wrap">
+          <img :src="logoImg" alt="Logo" class="logo" />
+        </div>
+        <p class="eyebrow">Antdv Next Admin</p>
+        <h1 class="title">{{ $t("login.title") }}</h1>
+        <p class="subtitle">Secure workspace entrance</p>
+      </div>
+
+      <a-form
+        :model="formState"
+        :rules="rules"
+        @finish="handleSubmit"
+        class="login-form"
+      >
+        <a-form-item name="username">
+          <a-input
+            v-model:value="formState.username"
+            size="large"
+            :placeholder="$t('login.usernamePlaceholder')"
+          >
+            <template #prefix>
+              <UserOutlined />
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item name="password">
+          <a-input-password
+            v-model:value="formState.password"
+            size="large"
+            :placeholder="$t('login.passwordPlaceholder')"
+          >
+            <template #prefix>
+              <LockOutlined />
+            </template>
+          </a-input-password>
+        </a-form-item>
+
+        <a-form-item>
+          <SliderCaptcha
+            ref="captchaRef"
+            :text="$t('login.slideToVerify')"
+            :success-text="$t('login.verifySuccess')"
+            :height="46"
+            @success="onCaptchaSuccess"
+            @fail="onCaptchaFail"
+          />
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox v-model:checked="formState.remember">
+            {{ $t("login.remember") }}
+          </a-checkbox>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button
+            type="primary"
+            html-type="submit"
+            size="large"
+            block
+            :loading="loading"
+            :disabled="!captchaVerified"
+          >
+            {{ $t("login.login") }}
+          </a-button>
+        </a-form-item>
+      </a-form>
+
+      <div class="login-tips">
+        <p>
+          <span>{{ $t("login.username") }}</span>
+          <code>admin / user</code>
+        </p>
+        <p>
+          <span>{{ $t("login.password") }}</span>
+          <code>123456</code>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UserOutlined, LockOutlined } from "@antdv-next/icons";
+import { message } from "antdv-next";
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+
+import logoImg from "@/assets/images/logo.png";
+import { SliderCaptcha } from "@/components/Captcha";
+import LanguageSwitch from "@/components/Layout/LanguageSwitch.vue";
+import ThemeToggle from "@/components/Layout/ThemeToggle.vue";
+import { $t } from "@/locales";
+import { useAuthStore } from "@/stores/auth";
+
+const router = useRouter();
+const authStore = useAuthStore();
+
+const loading = ref(false);
+const captchaVerified = ref(false);
+const captchaRef = ref<InstanceType<typeof SliderCaptcha>>();
+const formState = reactive({
+  username: "admin",
+  password: "123456",
+  remember: false,
+});
+
+const rules = {
+  username: [{ required: true, message: $t("login.usernameRequired") }],
+  password: [{ required: true, message: $t("login.passwordRequired") }],
+};
+
+const onCaptchaSuccess = () => {
+  captchaVerified.value = true;
+};
+
+const onCaptchaFail = () => {
+  captchaVerified.value = false;
+};
+
+const handleSubmit = async () => {
+  loading.value = true;
+  try {
+    await authStore.login(formState.username, formState.password);
+    message.success($t("login.loginSuccess"));
+    router.push("/");
+  } catch (error: unknown) {
+    message.error(
+      (error instanceof Error ? error.message : String(error)) ||
+        $t("login.loginFailed"),
+    );
+    captchaVerified.value = false;
+    captchaRef.value?.reset();
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.login-shell {
+  --login-font-family:
+    "Outfit", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --login-bg:
+    radial-gradient(
+      circle at 10% 20%,
+      rgba(67, 160, 255, 0.35),
+      transparent 46%
+    ),
+    radial-gradient(
+      circle at 92% 15%,
+      rgba(122, 214, 255, 0.36),
+      transparent 44%
+    ),
+    radial-gradient(
+      circle at 85% 88%,
+      rgba(90, 136, 255, 0.24),
+      transparent 36%
+    ),
+    linear-gradient(132deg, #e8f5ff 0%, #cfe8ff 42%, #b9e0ff 100%);
+  --login-panel-bg: rgba(255, 255, 255, 0.72);
+  --login-panel-border: rgba(255, 255, 255, 0.65);
+  --login-text: #132640;
+  --login-muted: rgba(19, 38, 64, 0.7);
+  --login-input-bg: rgba(255, 255, 255, 0.88);
+  --login-input-border: rgba(148, 185, 225, 0.55);
+  --login-tip-bg: rgba(239, 248, 255, 0.95);
+  --login-tip-border: rgba(148, 185, 225, 0.45);
+  --login-shadow: 0 28px 64px rgba(41, 103, 184, 0.25);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  padding: 88px 16px 32px;
+  min-height: 100vh;
+  background: var(--login-bg);
+  font-family: var(--login-font-family);
+  transition:
+    background var(--duration-slower) var(--ease-in-out),
+    color var(--duration-base) var(--ease-out);
+
+  .ambient {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    filter: blur(8px);
+    opacity: 0.85;
+    animation: float 12s ease-in-out infinite;
+    transition:
+      background var(--duration-slower) var(--ease-in-out),
+      opacity var(--duration-base) var(--ease-out);
+  }
+
+  .ambient-left {
+    width: 420px;
+    height: 420px;
+    left: -160px;
+    top: -120px;
+    background: radial-gradient(
+      circle at 35% 35%,
+      rgba(255, 255, 255, 0.88),
+      rgba(80, 174, 255, 0.22)
+    );
+  }
+
+  .ambient-right {
+    width: 460px;
+    height: 460px;
+    right: -170px;
+    top: -90px;
+    background: radial-gradient(
+      circle at 45% 45%,
+      rgba(210, 243, 255, 0.9),
+      rgba(105, 173, 255, 0.2)
+    );
+    animation-delay: -2.2s;
+  }
+
+  .ambient-bottom {
+    width: 500px;
+    height: 500px;
+    right: 12%;
+    bottom: -300px;
+    background: radial-gradient(
+      circle at 45% 30%,
+      rgba(167, 210, 255, 0.4),
+      rgba(134, 170, 255, 0.08)
+    );
+    animation-delay: -4.5s;
+  }
+
+  .login-tools {
+    position: absolute;
+    top: var(--spacing-md);
+    right: var(--spacing-md);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    z-index: 4;
+
+    :deep(.header-action) {
+      font-size: 18px;
+      width: 40px;
+      height: 40px;
+      border-radius: var(--radius-base);
+      color: var(--login-text);
+      background: rgba(255, 255, 255, 0.7);
+      border: 1px solid rgba(255, 255, 255, 0.78);
+      backdrop-filter: blur(10px);
+      transition: all var(--duration-base) var(--ease-out);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.92);
+        transform: translateY(-1px);
+      }
+    }
+  }
+
+  .login-box {
+    position: relative;
+    z-index: 2;
+    width: min(440px, 100%);
+    padding: 38px 34px 30px;
+    background: var(--login-panel-bg);
+    border: 1px solid var(--login-panel-border);
+    border-radius: 26px;
+    box-shadow: var(--login-shadow);
+    backdrop-filter: blur(14px) saturate(150%);
+    transition:
+      background var(--duration-slower) var(--ease-in-out),
+      border-color var(--duration-slower) var(--ease-in-out),
+      box-shadow var(--duration-slower) var(--ease-in-out);
+
+    .login-header {
+      text-align: center;
+      margin-bottom: 24px;
+
+      .logo-wrap {
+        width: 78px;
+        height: 78px;
+        margin: 0 auto 14px;
+        border-radius: 22px;
+        background: linear-gradient(
+          145deg,
+          rgba(255, 255, 255, 0.85),
+          rgba(208, 232, 255, 0.8)
+        );
+        border: 1px solid rgba(255, 255, 255, 0.8);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition:
+          background var(--duration-slower) var(--ease-in-out),
+          border-color var(--duration-slower) var(--ease-in-out);
+      }
+
+      .logo {
+        width: 48px;
+        height: 48px;
+        object-fit: contain;
+      }
+
+      .eyebrow {
+        margin-bottom: 6px;
+        font-size: 13px;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--login-muted);
+      }
+
+      .title {
+        font-size: 34px;
+        font-weight: var(--font-weight-bold);
+        margin-bottom: 2px;
+        color: var(--login-text);
+        line-height: 1.2;
+      }
+
+      .subtitle {
+        font-size: 14px;
+        color: var(--login-muted);
+      }
+    }
+
+    .login-form {
+      margin-top: 20px;
+    }
+
+    :deep(.ant-form-item) {
+      margin-bottom: 14px;
+    }
+
+    :deep(.ant-form-item-explain-error) {
+      font-size: 12px;
+      color: #ff6b6b;
+    }
+
+    :deep(.ant-input-affix-wrapper),
+    :deep(.ant-input-password),
+    :deep(.ant-input) {
+      border-radius: 12px;
+      border: 1px solid var(--login-input-border);
+      background: var(--login-input-bg);
+      color: var(--login-text);
+      transition: all var(--duration-base) var(--ease-out);
+      box-shadow: none;
+    }
+
+    :deep(.ant-input-affix-wrapper),
+    :deep(.ant-input-password) {
+      height: 46px;
+    }
+
+    :deep(.ant-input-affix-wrapper input),
+    :deep(.ant-input-password input) {
+      color: var(--login-text);
+      font-weight: 500;
+      background: transparent !important;
+      border: none !important;
+      border-radius: 0 !important;
+      box-shadow: none !important;
+    }
+
+    :deep(.ant-input-affix-wrapper input::placeholder),
+    :deep(.ant-input-password input::placeholder) {
+      color: var(--login-muted);
+    }
+
+    :deep(.ant-input-prefix),
+    :deep(.ant-input-password-icon) {
+      color: var(--login-muted);
+    }
+
+    :deep(.ant-input-affix-wrapper:hover),
+    :deep(.ant-input-password:hover),
+    :deep(.ant-input-affix-wrapper-focused),
+    :deep(.ant-input-password-focused) {
+      border-color: rgba(47, 132, 255, 0.68);
+      box-shadow: 0 0 0 3px rgba(47, 132, 255, 0.12);
+    }
+
+    :deep(.ant-checkbox-wrapper) {
+      color: var(--login-muted);
+      font-weight: 500;
+    }
+
+    :deep(.ant-checkbox-inner) {
+      border-color: var(--login-input-border);
+      background: var(--login-input-bg);
+    }
+
+    :deep(.ant-btn-primary) {
+      height: 46px;
+      border: none;
+      border-radius: 12px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      background: linear-gradient(135deg, #1f83ff 0%, #1467ff 100%);
+      box-shadow: 0 12px 24px rgba(20, 103, 255, 0.25);
+      transition: all var(--duration-base) var(--ease-out);
+    }
+
+    :deep(.ant-btn-primary:hover) {
+      background: linear-gradient(135deg, #2f92ff 0%, #1d74ff 100%);
+      transform: translateY(-1px);
+      box-shadow: 0 14px 28px rgba(20, 103, 255, 0.3);
+    }
+
+    :deep(.ant-btn-primary:disabled) {
+      background: linear-gradient(135deg, #1f83ff 0%, #1467ff 100%);
+      opacity: 0.5;
+      box-shadow: none;
+      transform: none;
+      color: #fff;
+      border: none;
+    }
+
+    :deep(.slider-captcha) {
+      .slider-bg {
+        border-radius: 12px;
+        border-color: var(--login-input-border);
+        background: var(--login-input-bg);
+        transition:
+          border-color var(--duration-base) var(--ease-out),
+          background var(--duration-base) var(--ease-out);
+      }
+
+      .slider-bg.success {
+        background: rgba(82, 196, 26, 0.08);
+        border-color: rgba(82, 196, 26, 0.5);
+      }
+
+      .slider-text {
+        color: var(--login-muted);
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: 0.04em;
+      }
+
+      .slider-track {
+        background: linear-gradient(
+          90deg,
+          rgba(47, 132, 255, 0.08),
+          rgba(47, 132, 255, 0.15)
+        );
+        border-right: 1px solid rgba(47, 132, 255, 0.3);
+        border-radius: 12px 0 0 12px;
+      }
+
+      .slider-handle {
+        border-radius: 0 12px 12px 0;
+        background: linear-gradient(
+          145deg,
+          rgba(255, 255, 255, 0.95),
+          rgba(230, 242, 255, 0.9)
+        );
+        border-color: rgba(47, 132, 255, 0.4);
+        box-shadow: 0 2px 8px rgba(47, 132, 255, 0.15);
+        color: rgba(47, 132, 255, 0.8);
+        font-weight: 600;
+        transition:
+          background var(--duration-base) var(--ease-out),
+          border-color var(--duration-base) var(--ease-out),
+          box-shadow var(--duration-base) var(--ease-out),
+          color var(--duration-base) var(--ease-out);
+
+        &:hover {
+          border-color: rgba(47, 132, 255, 0.6);
+          box-shadow:
+            0 0 0 3px rgba(47, 132, 255, 0.12),
+            0 2px 8px rgba(47, 132, 255, 0.2);
+          color: rgba(47, 132, 255, 1);
+        }
+
+        &:active {
+          background: linear-gradient(135deg, #1f83ff 0%, #1467ff 100%);
+          border-color: rgba(47, 132, 255, 0.7);
+          color: #fff;
+          cursor: grabbing;
+        }
+      }
+
+      .slider-handle.success {
+        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+        border-color: rgba(82, 196, 26, 0.6);
+        box-shadow: 0 2px 8px rgba(82, 196, 26, 0.25);
+        color: #fff;
+      }
+    }
+
+    .login-tips {
+      margin-top: 18px;
+      padding: 12px 14px;
+      border-radius: 14px;
+      border: 1px solid var(--login-tip-border);
+      background: var(--login-tip-bg);
+      display: grid;
+      gap: 8px;
+
+      p {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: var(--login-muted);
+        font-size: 13px;
+      }
+
+      code {
+        font-family: var(--font-family-code);
+        font-size: 12px;
+        color: var(--login-text);
+        background: rgba(255, 255, 255, 0.55);
+        border: 1px solid rgba(175, 203, 232, 0.56);
+        border-radius: 999px;
+        padding: 2px 10px;
+        transition:
+          color var(--duration-base) var(--ease-out),
+          background var(--duration-slower) var(--ease-in-out),
+          border-color var(--duration-slower) var(--ease-in-out);
+      }
+    }
+  }
+}
+
+:root.dark .login-shell {
+  --login-bg:
+    radial-gradient(
+      circle at 12% 18%,
+      rgba(80, 140, 255, 0.34),
+      transparent 44%
+    ),
+    radial-gradient(
+      circle at 88% 12%,
+      rgba(48, 191, 255, 0.22),
+      transparent 34%
+    ),
+    radial-gradient(
+      circle at 80% 85%,
+      rgba(119, 80, 255, 0.2),
+      transparent 35%
+    ),
+    linear-gradient(130deg, #060b18 0%, #0a1327 48%, #101c33 100%);
+  --login-panel-bg: rgba(9, 15, 30, 0.7);
+  --login-panel-border: rgba(138, 168, 230, 0.24);
+  --login-text: rgba(241, 248, 255, 0.95);
+  --login-muted: rgba(192, 210, 237, 0.8);
+  --login-input-bg: rgba(12, 22, 44, 0.72);
+  --login-input-border: rgba(127, 165, 234, 0.34);
+  --login-tip-bg: rgba(12, 24, 48, 0.74);
+  --login-tip-border: rgba(122, 165, 243, 0.3);
+  --login-shadow:
+    0 30px 70px rgba(2, 8, 22, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+:root.dark .login-shell {
+  .ambient-left {
+    background: radial-gradient(
+      circle at 38% 36%,
+      rgba(91, 163, 255, 0.4),
+      rgba(42, 94, 198, 0.08)
+    );
+  }
+
+  .ambient-right {
+    background: radial-gradient(
+      circle at 45% 45%,
+      rgba(61, 213, 255, 0.34),
+      rgba(64, 102, 210, 0.08)
+    );
+  }
+
+  .ambient-bottom {
+    background: radial-gradient(
+      circle at 45% 30%,
+      rgba(112, 136, 255, 0.35),
+      rgba(62, 72, 130, 0.08)
+    );
+  }
+
+  .login-tools {
+    :deep(.header-action) {
+      background: rgba(10, 18, 36, 0.72);
+      border-color: rgba(125, 162, 234, 0.36);
+      color: var(--login-text);
+
+      &:hover {
+        background: rgba(16, 28, 53, 0.88);
+      }
+    }
+  }
+
+  .login-box {
+    .login-header {
+      .logo-wrap {
+        background: linear-gradient(
+          145deg,
+          rgba(26, 44, 84, 0.92),
+          rgba(13, 25, 52, 0.86)
+        );
+        border-color: rgba(124, 161, 233, 0.34);
+      }
+    }
+
+    :deep(.slider-captcha) {
+      .slider-handle {
+        background: linear-gradient(
+          145deg,
+          rgba(18, 32, 62, 0.95),
+          rgba(12, 22, 44, 0.9)
+        );
+        border-color: rgba(47, 132, 255, 0.45);
+        color: rgba(100, 170, 255, 0.9);
+
+        &:hover {
+          border-color: rgba(47, 132, 255, 0.65);
+          box-shadow:
+            0 0 0 3px rgba(47, 132, 255, 0.15),
+            0 2px 8px rgba(47, 132, 255, 0.25);
+        }
+
+        &:active {
+          background: linear-gradient(135deg, #1f83ff 0%, #1467ff 100%);
+          color: #fff;
+        }
+      }
+
+      .slider-handle.success {
+        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+        border-color: rgba(82, 196, 26, 0.5);
+        box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+      }
+
+      .slider-bg.success {
+        background: rgba(82, 196, 26, 0.06);
+        border-color: rgba(82, 196, 26, 0.35);
+      }
+    }
+
+    .login-tips {
+      code {
+        color: #e8f1ff;
+        background: rgba(21, 36, 67, 0.72);
+        border-color: rgba(117, 157, 228, 0.34);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .login-shell {
+    .login-tools {
+      top: var(--spacing-md);
+      right: var(--spacing-md);
+    }
+
+    .login-box {
+      width: min(420px, 100%);
+      padding: 30px 22px 24px;
+
+      .login-header {
+        .title {
+          font-size: 30px;
+        }
+      }
+
+      .login-tips p {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px) translateX(0px);
+  }
+
+  50% {
+    transform: translateY(-10px) translateX(6px);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/notification/index.vue b/antdv-next-admin/src/views/notification/index.vue
new file mode 100644
index 0000000..7911d15
--- /dev/null
+++ b/antdv-next-admin/src/views/notification/index.vue
@@ -0,0 +1,897 @@
+<template>
+  <div class="notification-center page-container">
+    <section class="hero-panel card">
+      <div class="hero-glow hero-glow-a"></div>
+      <div class="hero-glow hero-glow-b"></div>
+
+      <div class="hero-main">
+        <p class="hero-kicker">{{ $t('notificationCenter.kicker') }}</p>
+        <h1 class="hero-title">{{ $t('notificationCenter.title') }}</h1>
+        <p class="hero-subtitle">{{ $t('notificationCenter.subtitle') }}</p>
+      </div>
+
+      <div class="hero-metrics">
+        <div class="metric-card">
+          <span class="metric-label">{{ $t('notificationCenter.metrics.total') }}</span>
+          <strong class="metric-value">{{ notifications.length }}</strong>
+        </div>
+        <div class="metric-card">
+          <span class="metric-label">{{ $t('notificationCenter.metrics.unread') }}</span>
+          <strong class="metric-value">{{ unreadCount }}</strong>
+        </div>
+        <div class="metric-card">
+          <span class="metric-label">{{ $t('notificationCenter.metrics.today') }}</span>
+          <strong class="metric-value">{{ todayCount }}</strong>
+        </div>
+      </div>
+
+      <div class="hero-toolbar">
+        <a-input
+          v-model:value="keyword"
+          allow-clear
+          class="search-input"
+          :placeholder="$t('notificationCenter.searchPlaceholder')"
+        >
+          <template #prefix>
+            <SearchOutlined />
+          </template>
+        </a-input>
+
+        <a-radio-group v-model:value="readFilter" size="small">
+          <a-radio-button value="all">{{
+            $t('notificationCenter.filters.allStatus')
+          }}</a-radio-button>
+          <a-radio-button value="unread">{{
+            $t('notificationCenter.filters.unread')
+          }}</a-radio-button>
+          <a-radio-button value="read">{{ $t('notificationCenter.filters.read') }}</a-radio-button>
+        </a-radio-group>
+
+        <a-select v-model:value="toneFilter" size="small" class="tone-select">
+          <a-select-option value="all">{{
+            $t('notificationCenter.filters.allTypes')
+          }}</a-select-option>
+          <a-select-option value="system">{{
+            $t('notificationCenter.filters.system')
+          }}</a-select-option>
+          <a-select-option value="message">{{
+            $t('notificationCenter.filters.message')
+          }}</a-select-option>
+          <a-select-option value="security">{{
+            $t('notificationCenter.filters.security')
+          }}</a-select-option>
+          <a-select-option value="task">{{
+            $t('notificationCenter.filters.task')
+          }}</a-select-option>
+          <a-select-option value="error">{{
+            $t('notificationCenter.filters.error')
+          }}</a-select-option>
+        </a-select>
+      </div>
+    </section>
+
+    <section class="center-content">
+      <article class="list-panel card">
+        <header class="panel-header">
+          <div>
+            <h2 class="panel-title">{{ $t('notificationCenter.listTitle') }}</h2>
+            <p class="panel-subtitle">
+              {{ $t('notificationCenter.listSubtitle', { count: filteredNotifications.length }) }}
+            </p>
+          </div>
+
+          <a-button
+            type="link"
+            size="small"
+            :disabled="unreadCount === 0"
+            @click="notificationStore.markAllAsRead()"
+          >
+            {{ $t('layout.markAllRead') }}
+          </a-button>
+        </header>
+
+        <div v-if="filteredNotifications.length > 0" class="notice-list">
+          <button
+            v-for="notification in filteredNotifications"
+            :key="notification.id"
+            type="button"
+            :class="[
+              'notice-item',
+              `tone-${resolveTone(notification)}`,
+              {
+                active: selectedNotificationId === notification.id,
+                unread: !notification.read,
+              },
+            ]"
+            @click="handleSelectNotification(notification)"
+          >
+            <div class="notice-icon">
+              <component :is="getToneIcon(resolveTone(notification))" />
+              <span v-if="!notification.read" class="notice-unread-dot" />
+            </div>
+
+            <div class="notice-main">
+              <div class="notice-head">
+                <h3 class="notice-title">{{ notification.title }}</h3>
+                <span class="notice-time">{{ formatRelativeTime(notification.timestamp) }}</span>
+              </div>
+              <p class="notice-message">{{ notification.message }}</p>
+            </div>
+          </button>
+        </div>
+
+        <div v-else class="list-empty">
+          <a-empty :description="$t('notificationCenter.emptyFiltered')" />
+        </div>
+      </article>
+
+      <article class="detail-panel card">
+        <template v-if="selectedNotification">
+          <header class="detail-header">
+            <div class="detail-title-wrap">
+              <div :class="['detail-icon', `tone-${selectedTone}`]">
+                <component :is="getToneIcon(selectedTone)" />
+              </div>
+              <div class="detail-title-content">
+                <h2 class="detail-title">{{ selectedNotification.title }}</h2>
+                <p class="detail-time">
+                  {{ formatAbsoluteTime(selectedNotification.timestamp) }}
+                  <span class="detail-time-divider">·</span>
+                  {{ formatRelativeTime(selectedNotification.timestamp) }}
+                </p>
+              </div>
+            </div>
+
+            <div class="detail-header-actions">
+              <a-tooltip
+                v-if="!selectedNotification.read"
+                :title="$t('notificationCenter.actions.markAsRead')"
+              >
+                <a-button
+                  type="text"
+                  size="small"
+                  @click="handleMarkAsRead(selectedNotification.id)"
+                >
+                  <template #icon><CheckCircleOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip :title="$t('notificationCenter.actions.delete')">
+                <a-button
+                  type="text"
+                  size="small"
+                  danger
+                  @click="handleDeleteNotification(selectedNotification.id)"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </div>
+          </header>
+
+          <div class="detail-body">
+            <p class="detail-message">{{ selectedNotification.message }}</p>
+
+            <div class="detail-meta">
+              <div class="meta-item">
+                <span class="meta-label">{{ $t('notificationCenter.meta.type') }}</span>
+                <span class="meta-value">{{ getToneLabel(selectedTone) }}</span>
+              </div>
+              <div class="meta-item">
+                <span class="meta-label">{{ $t('notificationCenter.meta.receivedAt') }}</span>
+                <span class="meta-value">{{
+                  formatAbsoluteTime(selectedNotification.timestamp)
+                }}</span>
+              </div>
+            </div>
+          </div>
+
+          <footer v-if="selectedNotification.link" class="detail-actions">
+            <a-button
+              type="primary"
+              size="large"
+              block
+              @click="handleOpenRelated(selectedNotification)"
+            >
+              {{ $t('notificationCenter.actions.openRelated') }}
+            </a-button>
+          </footer>
+        </template>
+
+        <template v-else>
+          <div class="detail-placeholder">
+            <BellOutlined class="placeholder-icon" />
+            <h3 class="placeholder-title">{{ $t('notificationCenter.placeholder.title') }}</h3>
+            <p class="placeholder-desc">{{ $t('notificationCenter.placeholder.desc') }}</p>
+          </div>
+        </template>
+      </article>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Notification } from '@/types/layout';
+
+import {
+  BellOutlined,
+  RocketOutlined,
+  MailOutlined,
+  SafetyCertificateOutlined,
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+  SearchOutlined,
+  DeleteOutlined,
+} from '@antdv-next/icons';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { $t } from '@/locales';
+import { useNotificationStore } from '@/stores/notification';
+
+dayjs.extend(relativeTime);
+
+type ReadFilter = 'all' | 'unread' | 'read';
+type NotificationTone = 'system' | 'message' | 'security' | 'task' | 'error';
+type ToneFilter = 'all' | NotificationTone;
+
+const route = useRoute();
+const router = useRouter();
+const notificationStore = useNotificationStore();
+
+const keyword = ref('');
+const readFilter = ref<ReadFilter>('all');
+const toneFilter = ref<ToneFilter>('all');
+
+const notifications = computed(() => {
+  return [...notificationStore.notifications].toSorted((a, b) => b.timestamp - a.timestamp);
+});
+
+const unreadCount = computed(() => notifications.value.filter((item) => !item.read).length);
+const todayCount = computed(
+  () => notifications.value.filter((item) => dayjs(item.timestamp).isSame(dayjs(), 'day')).length,
+);
+
+const selectedNotificationId = computed(() => {
+  const queryValue = route.query.id;
+  const raw = Array.isArray(queryValue) ? queryValue[0] : queryValue;
+  return raw ? String(raw) : '';
+});
+
+const normalizeText = (value: string) => value.trim().toLowerCase();
+
+const resolveTone = (notification: Notification): NotificationTone => {
+  // Use category if explicitly set
+  if (notification.category) {
+    return notification.category;
+  }
+
+  // Fallback to type-based classification
+  switch (notification.type) {
+    case 'warning':
+      return 'security';
+    case 'success':
+      return 'task';
+    case 'error':
+      return 'error';
+    default:
+      return 'system';
+  }
+};
+
+const filteredNotifications = computed(() => {
+  const query = normalizeText(keyword.value);
+
+  return notifications.value.filter((notification) => {
+    if (readFilter.value === 'unread' && notification.read) return false;
+    if (readFilter.value === 'read' && !notification.read) return false;
+
+    const tone = resolveTone(notification);
+    if (toneFilter.value !== 'all' && tone !== toneFilter.value) return false;
+
+    if (!query) return true;
+
+    const merged = `${notification.title} ${notification.message}`.toLowerCase();
+    return merged.includes(query);
+  });
+});
+
+const selectedNotification = computed(() => {
+  if (!selectedNotificationId.value) {
+    return null;
+  }
+  return notifications.value.find((item) => item.id === selectedNotificationId.value) || null;
+});
+
+const selectedTone = computed<NotificationTone>(() => {
+  if (!selectedNotification.value) {
+    return 'system';
+  }
+  return resolveTone(selectedNotification.value);
+});
+
+watch(
+  selectedNotification,
+  (notification) => {
+    if (notification && !notification.read) {
+      notificationStore.markAsRead(notification.id);
+    }
+  },
+  { immediate: true },
+);
+
+const getToneIcon = (tone: NotificationTone) => {
+  if (tone === 'system') return RocketOutlined;
+  if (tone === 'message') return MailOutlined;
+  if (tone === 'security') return SafetyCertificateOutlined;
+  if (tone === 'task') return CheckCircleOutlined;
+  if (tone === 'error') return ExclamationCircleOutlined;
+  return BellOutlined;
+};
+
+const getToneLabel = (tone: NotificationTone) => {
+  if (tone === 'system') return $t('notificationCenter.filters.system');
+  if (tone === 'message') return $t('notificationCenter.filters.message');
+  if (tone === 'security') return $t('notificationCenter.filters.security');
+  if (tone === 'task') return $t('notificationCenter.filters.task');
+  return $t('notificationCenter.filters.error');
+};
+
+const formatRelativeTime = (timestamp: number) => dayjs(timestamp).fromNow();
+const formatAbsoluteTime = (timestamp: number) => dayjs(timestamp).format('YYYY-MM-DD HH:mm');
+
+const handleSelectNotification = (notification: Notification) => {
+  if (!notification.read) {
+    notificationStore.markAsRead(notification.id);
+  }
+
+  if (selectedNotificationId.value === notification.id) {
+    return;
+  }
+
+  router.replace({
+    path: '/notifications',
+    query: { id: notification.id },
+  });
+};
+
+const handleMarkAsRead = (id: string) => {
+  notificationStore.markAsRead(id);
+};
+
+const handleDeleteNotification = (id: string) => {
+  notificationStore.removeNotification(id);
+
+  if (selectedNotificationId.value === id) {
+    router.replace({ path: '/notifications' });
+  }
+};
+
+const handleOpenRelated = (notification: Notification) => {
+  if (!notification.link) {
+    return;
+  }
+
+  if (/^https?:\/\//.test(notification.link)) {
+    window.open(notification.link, '_blank', 'noopener,noreferrer');
+    return;
+  }
+
+  router.push(notification.link);
+};
+</script>
+
+<style scoped lang="scss">
+.notification-center {
+  display: grid;
+  gap: var(--spacing-lg);
+}
+
+.hero-panel {
+  position: relative;
+  overflow: hidden;
+  padding: 24px;
+  border-radius: 18px;
+  background: linear-gradient(
+    135deg,
+    var(--color-bg-container) 0%,
+    var(--color-primary-1) 58%,
+    var(--color-bg-container) 100%
+  );
+
+  .hero-glow {
+    position: absolute;
+    border-radius: 999px;
+    filter: blur(8px);
+    pointer-events: none;
+  }
+
+  .hero-glow-a {
+    width: 220px;
+    height: 220px;
+    right: -84px;
+    top: -100px;
+    background: radial-gradient(circle, rgba(22, 119, 255, 0.24) 0%, rgba(22, 119, 255, 0.02) 70%);
+  }
+
+  .hero-glow-b {
+    width: 180px;
+    height: 180px;
+    left: 44%;
+    bottom: -96px;
+    background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.02) 72%);
+  }
+}
+
+.hero-main {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-kicker {
+  margin: 0 0 6px;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primary);
+  font-weight: 600;
+}
+
+.hero-title {
+  margin: 0;
+  font-size: clamp(24px, 2.4vw, 34px);
+  line-height: 1.2;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.hero-subtitle {
+  margin: 10px 0 0;
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  max-width: 760px;
+  line-height: 1.7;
+}
+
+.hero-metrics {
+  margin-top: 18px;
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.metric-card {
+  padding: 14px 14px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--color-border-secondary);
+  background: color-mix(in srgb, var(--color-bg-container) 72%, transparent);
+  backdrop-filter: blur(2px);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.metric-label {
+  display: block;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+
+.metric-value {
+  margin-top: 6px;
+  display: block;
+  font-family: var(--font-family-number);
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.hero-toolbar {
+  margin-top: 14px;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.search-input {
+  width: min(320px, 100%);
+}
+
+.tone-select {
+  min-width: 136px;
+}
+
+.center-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.list-panel,
+.detail-panel {
+  border-radius: 16px;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.panel-title {
+  margin: 0;
+  font-size: 16px;
+  color: var(--color-text-primary);
+}
+
+.panel-subtitle {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+
+.notice-list {
+  display: grid;
+  gap: 8px;
+  max-height: 650px;
+  overflow-y: auto;
+  padding: 2px 2px 2px 0;
+}
+
+.notice-item {
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 12px;
+  background: var(--color-bg-container);
+  padding: 12px;
+  text-align: left;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  cursor: pointer;
+  transition: all var(--duration-base) var(--ease-out);
+
+  &:hover {
+    transform: translateY(-1px);
+    background: rgba(22, 119, 255, 0.02);
+    border-color: rgba(22, 119, 255, 0.26);
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+  }
+
+  &.active {
+    border-color: var(--color-primary);
+    background: rgba(22, 119, 255, 0.06);
+    box-shadow: 0 2px 8px rgba(22, 119, 255, 0.12);
+  }
+
+  &.unread .notice-title {
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  &:not(.unread) {
+    opacity: 0.75;
+
+    .notice-title {
+      color: var(--color-text-secondary);
+      font-weight: 400;
+    }
+
+    .notice-message {
+      color: var(--color-text-tertiary);
+    }
+  }
+}
+
+.notice-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  flex: 0 0 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  position: relative;
+}
+
+.notice-unread-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #ef4444;
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  box-shadow: 0 0 0 2px var(--color-bg-container);
+}
+
+.notice-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.notice-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.notice-title {
+  margin: 0;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.notice-time {
+  flex: 0 0 auto;
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+}
+
+.notice-message {
+  margin: 5px 0 0;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.detail-panel {
+  position: sticky;
+  top: 10px;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+
+.detail-title-wrap {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+
+.detail-title-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.detail-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.detail-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex: 0 0 36px;
+}
+
+.detail-title {
+  margin: 0;
+  font-size: 19px;
+  line-height: 1.3;
+  color: var(--color-text-primary);
+}
+
+.detail-time {
+  margin: 7px 0 0;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+
+.detail-time-divider {
+  margin: 0 4px;
+}
+
+.detail-body {
+  margin-top: 14px;
+}
+
+.detail-message {
+  margin: 0;
+  padding: 14px 14px 12px;
+  border-radius: 12px;
+  background: linear-gradient(145deg, var(--color-bg-layout), rgba(22, 119, 255, 0.04));
+  border: 1px solid var(--color-border-secondary);
+  color: var(--color-text-secondary);
+  line-height: 1.8;
+  font-size: 14px;
+}
+
+.detail-meta {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.meta-item {
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid var(--color-border-secondary);
+  background: var(--color-bg-container);
+}
+
+.meta-label {
+  display: block;
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+}
+
+.meta-value {
+  margin-top: 6px;
+  display: block;
+  font-size: 13px;
+  color: var(--color-text-primary);
+}
+
+.detail-actions {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border-secondary);
+}
+
+.detail-placeholder {
+  min-height: 420px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+
+.placeholder-icon {
+  font-size: 34px;
+  color: var(--color-primary);
+  margin-bottom: 10px;
+}
+
+.placeholder-title {
+  margin: 0;
+  font-size: 18px;
+  color: var(--color-text-primary);
+}
+
+.placeholder-desc {
+  margin: 8px 0 0;
+  max-width: 360px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--color-text-tertiary);
+}
+
+.list-empty {
+  padding: 40px 0 30px;
+}
+
+.notice-icon.tone-system,
+.detail-icon.tone-system {
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.13);
+}
+
+.notice-icon.tone-message,
+.detail-icon.tone-message {
+  color: #16a34a;
+  background: rgba(22, 163, 74, 0.14);
+}
+
+.notice-icon.tone-security,
+.detail-icon.tone-security {
+  color: #f97316;
+  background: rgba(249, 115, 22, 0.18);
+}
+
+.notice-icon.tone-task,
+.detail-icon.tone-task {
+  color: #0f766e;
+  background: rgba(15, 118, 110, 0.14);
+}
+
+.notice-icon.tone-error,
+.detail-icon.tone-error {
+  color: #dc2626;
+  background: rgba(220, 38, 38, 0.14);
+}
+
+/* ===== Dark Mode ===== */
+:root.dark {
+  .hero-panel {
+    background: linear-gradient(
+      135deg,
+      var(--color-bg-container) 0%,
+      color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-container)) 58%,
+      var(--color-bg-container) 100%
+    );
+  }
+
+  .metric-card {
+    background: color-mix(in srgb, var(--color-bg-container) 85%, transparent);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  .notice-item {
+    &:hover {
+      background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-container));
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+
+    &.active {
+      background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-container));
+      box-shadow: 0 2px 8px rgba(22, 119, 255, 0.2);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .center-content {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-panel {
+    position: static;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-panel {
+    padding: 16px;
+    border-radius: 14px;
+  }
+
+  .hero-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-toolbar {
+    gap: 8px;
+  }
+
+  .search-input {
+    width: 100%;
+  }
+
+  .tone-select {
+    width: 100%;
+  }
+
+  .detail-placeholder {
+    min-height: 280px;
+  }
+
+  .detail-meta {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/profile/index.vue b/antdv-next-admin/src/views/profile/index.vue
new file mode 100644
index 0000000..e468dce
--- /dev/null
+++ b/antdv-next-admin/src/views/profile/index.vue
@@ -0,0 +1,325 @@
+<template>
+  <div class="profile-page">
+    <a-row :gutter="16">
+      <!-- User Info Card -->
+      <a-col :xs="24" :lg="8">
+        <a-card :bordered="false" class="profile-card">
+          <div class="profile-header">
+            <a-avatar
+              :src="authStore.user?.avatar"
+              :size="80"
+              class="profile-avatar"
+            >
+              {{ authStore.user?.username?.charAt(0).toUpperCase() }}
+            </a-avatar>
+            <h2 class="profile-name">
+              {{ authStore.user?.realName || authStore.user?.username }}
+            </h2>
+            <p class="profile-username">@{{ authStore.user?.username }}</p>
+          </div>
+
+          <a-divider />
+
+          <div class="profile-info">
+            <div class="info-item">
+              <span class="info-label">
+                <UserOutlined class="info-icon" />
+                {{ $t("profile.username") }}
+              </span>
+              <span class="info-value">{{ authStore.user?.username }}</span>
+            </div>
+
+            <div class="info-item">
+              <span class="info-label">
+                <MailOutlined class="info-icon" />
+                {{ $t("profile.email") }}
+              </span>
+              <span class="info-value">{{ authStore.user?.email }}</span>
+            </div>
+
+            <div class="info-item" v-if="authStore.user?.phone">
+              <span class="info-label">
+                <PhoneOutlined class="info-icon" />
+                {{ $t("profile.phone") }}
+              </span>
+              <span class="info-value">{{ authStore.user?.phone }}</span>
+            </div>
+
+            <div class="info-item">
+              <span class="info-label">
+                <TeamOutlined class="info-icon" />
+                {{ $t("profile.role") }}
+              </span>
+              <span class="info-value">
+                <a-tag
+                  v-for="role in authStore.user?.roles"
+                  :key="role.id"
+                  color="blue"
+                >
+                  {{ role.name }}
+                </a-tag>
+              </span>
+            </div>
+
+            <div class="info-item">
+              <span class="info-label">
+                <ClockCircleOutlined class="info-icon" />
+                {{ $t("profile.joinDate") }}
+              </span>
+              <span class="info-value">{{
+                formatDate(authStore.user?.createdAt)
+              }}</span>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+      <!-- Change Password Card -->
+      <a-col :xs="24" :lg="16">
+        <a-card
+          :bordered="false"
+          :title="$t('profile.changePassword')"
+          class="password-card"
+        >
+          <a-form
+            ref="formRef"
+            :model="passwordForm"
+            :rules="passwordRules"
+            :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 18 }"
+          >
+            <a-form-item
+              :label="$t('profile.currentPassword')"
+              name="oldPassword"
+            >
+              <a-input-password
+                v-model:value="passwordForm.oldPassword"
+                :placeholder="$t('profile.enterCurrentPassword')"
+                autocomplete="current-password"
+              />
+            </a-form-item>
+
+            <a-form-item :label="$t('profile.newPassword')" name="newPassword">
+              <a-input-password
+                v-model:value="passwordForm.newPassword"
+                :placeholder="$t('profile.enterNewPassword')"
+                autocomplete="new-password"
+              />
+            </a-form-item>
+
+            <a-form-item
+              :label="$t('profile.confirmPassword')"
+              name="confirmPassword"
+            >
+              <a-input-password
+                v-model:value="passwordForm.confirmPassword"
+                :placeholder="$t('profile.enterConfirmPassword')"
+                autocomplete="new-password"
+              />
+            </a-form-item>
+
+            <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
+              <a-space>
+                <a-button
+                  type="primary"
+                  :loading="loading"
+                  @click="handleChangePassword"
+                >
+                  {{ $t("common.submit") }}
+                </a-button>
+                <a-button @click="handleReset">
+                  {{ $t("common.reset") }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-form>
+
+          <a-alert
+            :message="$t('profile.passwordTip')"
+            type="info"
+            show-icon
+            style="margin-top: 16px"
+          />
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance } from "antdv-next";
+
+import {
+  UserOutlined,
+  MailOutlined,
+  PhoneOutlined,
+  TeamOutlined,
+  ClockCircleOutlined,
+} from "@antdv-next/icons";
+import { message } from "antdv-next";
+import { ref, reactive } from "vue";
+
+import { changePassword, type ChangePasswordParams } from "@/api/user";
+import { $t } from "@/locales";
+import { useAuthStore } from "@/stores/auth";
+
+const authStore = useAuthStore();
+const formRef = ref<FormInstance>();
+const loading = ref(false);
+
+const passwordForm = reactive({
+  oldPassword: "",
+  newPassword: "",
+  confirmPassword: "",
+});
+
+const validateConfirmPassword = (_rule: unknown, value: string) => {
+  if (value && value !== passwordForm.newPassword) {
+    return Promise.reject($t("profile.passwordMismatch"));
+  }
+  return Promise.resolve();
+};
+
+const passwordRules = {
+  oldPassword: [
+    {
+      required: true,
+      message: $t("profile.enterCurrentPassword"),
+      trigger: "blur",
+    },
+  ],
+  newPassword: [
+    {
+      required: true,
+      message: $t("profile.enterNewPassword"),
+      trigger: "blur",
+    },
+    { min: 6, message: $t("profile.passwordMinLength"), trigger: "blur" },
+  ],
+  confirmPassword: [
+    {
+      required: true,
+      message: $t("profile.enterConfirmPassword"),
+      trigger: "blur",
+    },
+    { validator: validateConfirmPassword, trigger: "blur" },
+  ],
+};
+
+const formatDate = (dateString?: string) => {
+  if (!dateString) return "-";
+  const date = new Date(dateString);
+  return date.toLocaleDateString();
+};
+
+const handleChangePassword = async () => {
+  if (!formRef.value) return;
+
+  try {
+    await formRef.value.validate();
+    loading.value = true;
+
+    const params: ChangePasswordParams = {
+      oldPassword: passwordForm.oldPassword,
+      newPassword: passwordForm.newPassword,
+    };
+
+    const response = await changePassword(params);
+
+    if (response.success) {
+      message.success(response.message || $t("profile.passwordChangeSuccess"));
+      handleReset();
+    } else {
+      message.error(response.message || $t("profile.passwordChangeFailed"));
+    }
+  } catch (error: unknown) {
+    console.error("Change password error:", (error as Error).message);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleReset = () => {
+  passwordForm.oldPassword = "";
+  passwordForm.newPassword = "";
+  passwordForm.confirmPassword = "";
+  formRef.value?.clearValidate();
+};
+</script>
+
+<style scoped lang="scss">
+.profile-page {
+  .profile-card {
+    .profile-header {
+      text-align: center;
+      padding: 16px 0;
+
+      .profile-avatar {
+        margin-bottom: 16px;
+        box-shadow: var(--shadow-2);
+      }
+
+      .profile-name {
+        margin: 0 0 8px;
+        font-size: 20px;
+        font-weight: var(--font-weight-semibold);
+        color: var(--color-text-primary);
+      }
+
+      .profile-username {
+        margin: 0;
+        color: var(--color-text-tertiary);
+        font-size: 14px;
+      }
+    }
+
+    .profile-info {
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 0;
+        border-bottom: 1px solid var(--color-border-secondary);
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .info-label {
+          display: flex;
+          align-items: center;
+          color: var(--color-text-secondary);
+          font-size: 14px;
+
+          .info-icon {
+            margin-right: 8px;
+            font-size: 16px;
+            color: var(--color-primary);
+          }
+        }
+
+        .info-value {
+          color: var(--color-text-primary);
+          font-size: 14px;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .password-card {
+    height: 100%;
+
+    :deep(.ant-card-head-title) {
+      font-weight: var(--font-weight-semibold);
+    }
+  }
+
+  // Mobile responsive
+  @media (max-width: 992px) {
+    .profile-card {
+      margin-bottom: 16px;
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/redirect/index.vue b/antdv-next-admin/src/views/redirect/index.vue
new file mode 100644
index 0000000..85ab5e5
--- /dev/null
+++ b/antdv-next-admin/src/views/redirect/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import { unref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const { currentRoute, replace } = router;
+const { params, query } = unref(currentRoute);
+const { path } = params;
+
+const _path = Array.isArray(path) ? path.join('/') : path;
+
+replace({
+  path: '/' + _path,
+  query,
+});
+</script>
diff --git a/antdv-next-admin/src/views/system/config/index.vue b/antdv-next-admin/src/views/system/config/index.vue
new file mode 100644
index 0000000..9b4bc5f
--- /dev/null
+++ b/antdv-next-admin/src/views/system/config/index.vue
@@ -0,0 +1,450 @@
+<template>
+  <div class="page-container">
+    <ProSplitLayout :side-width="200">
+      <template #side>
+        <!-- groups nav -->
+        <div class="config-groups-header">
+          <h3>{{ $t("config.configGroups") }}</h3>
+        </div>
+        <a-menu
+          v-model:selectedKeys="selectedMenuKeys"
+          mode="inline"
+          :items="menuItems"
+          class="config-groups-menu"
+          @click="handleMenuClick"
+        />
+      </template>
+
+      <template #main>
+        <!-- config list -->
+        <ProTable
+          :key="selectedGroup + refreshKey"
+          :columns="columns"
+          :request="loadConfigList"
+          :search="false"
+          :toolbar="{ title: $t(`config.groups.${selectedGroup}`) }"
+        >
+          <template #toolbar-actions>
+            <a-button type="primary" @click="handleAdd">
+              <PlusOutlined /> {{ $t("config.createConfig") }}
+            </a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'value'">
+              <template v-if="record.valueType === 'boolean'">
+                <a-tag :color="record.value === 'true' ? 'green' : 'default'">
+                  {{
+                    record.value === "true" ? $t("common.yes") : $t("common.no")
+                  }}
+                </a-tag>
+              </template>
+              <template v-else>
+                <span class="config-value">{{ record.value }}</span>
+              </template>
+            </template>
+            <template v-if="column.key === 'valueType'">
+              <a-tag>{{
+                $t(`config.valueTypes.${record.valueType}`) || record.valueType
+              }}</a-tag>
+            </template>
+            <template v-if="column.key === 'builtIn'">
+              <a-tag :color="record.builtIn ? 'blue' : 'default'">
+                {{
+                  record.builtIn
+                    ? $t("config.builtInTypes.builtIn")
+                    : $t("config.builtInTypes.custom")
+                }}
+              </a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space :size="4">
+                <a-button type="link" size="small" @click="handleEdit(record)">
+                  <template #icon><EditOutlined /></template>
+                  {{ $t("common.edit") }}
+                </a-button>
+                <a-button
+                  v-if="!record.builtIn"
+                  type="link"
+                  size="small"
+                  danger
+                  @click="handleDelete(record)"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                  {{ $t("common.delete") }}
+                </a-button>
+              </a-space>
+            </template>
+          </template>
+        </ProTable>
+      </template>
+    </ProSplitLayout>
+
+    <!-- add/edit modal -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="modalTitle"
+      @ok="handleSubmit"
+      :width="520"
+    >
+      <a-form :model="form" :label-col="{ span: 6 }" style="margin-top: 16px">
+        <a-form-item :label="$t('config.configName')" required>
+          <a-input
+            v-model:value="form.name"
+            :placeholder="$t('config.placeholders.configName')"
+          />
+        </a-form-item>
+        <a-form-item :label="$t('config.configKey')" required>
+          <a-input
+            v-model:value="form.key"
+            :placeholder="$t('config.placeholders.configKey')"
+            :disabled="!!form.id"
+          />
+        </a-form-item>
+        <a-form-item :label="$t('config.configValue')" required>
+          <a-switch
+            v-if="form.valueType === 'boolean'"
+            v-model:checked="boolValue"
+          />
+          <a-input-number
+            v-else-if="form.valueType === 'number'"
+            v-model:value="form.value"
+            style="width: 100%"
+          />
+          <a-textarea
+            v-else-if="form.valueType === 'json'"
+            v-model:value="form.value"
+            :rows="4"
+            :placeholder="$t('config.placeholders.jsonFormat')"
+          />
+          <a-input
+            v-else
+            v-model:value="form.value"
+            :placeholder="$t('config.placeholders.configValue')"
+          />
+        </a-form-item>
+        <a-form-item :label="$t('config.valueType')">
+          <a-select v-model:value="form.valueType" :disabled="!!form.id">
+            <a-select-option value="string">{{
+              $t("config.valueTypes.string")
+            }}</a-select-option>
+            <a-select-option value="number">{{
+              $t("config.valueTypes.number")
+            }}</a-select-option>
+            <a-select-option value="boolean">{{
+              $t("config.valueTypes.boolean")
+            }}</a-select-option>
+            <a-select-option value="json">{{
+              $t("config.valueTypes.json")
+            }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('config.group')">
+          <a-select v-model:value="form.group" allow-clear>
+            <a-select-option v-for="g in groups" :key="g" :value="g">{{
+              $t(`config.groups.${g}`)
+            }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('config.sort')">
+          <a-input-number
+            v-model:value="form.sort"
+            :min="0"
+            style="width: 100%"
+          />
+        </a-form-item>
+        <a-form-item :label="$t('config.description')">
+          <a-textarea
+            v-model:value="form.description"
+            :placeholder="$t('config.placeholders.description')"
+            :rows="2"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SysConfig } from "@/types/config";
+import type { ProTableColumn } from "@/types/pro";
+import type { MenuItemType } from "antdv-next";
+
+import { EditOutlined, DeleteOutlined, PlusOutlined } from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import { ref, computed, h } from "vue";
+import { useI18n } from "vue-i18n";
+
+import {
+  getConfigList,
+  createConfig,
+  updateConfig,
+  deleteConfig,
+} from "@/api/config";
+import ProSplitLayout from "@/components/Pro/ProSplitLayout/index.vue";
+import ProTable from "@/components/Pro/ProTable/index.vue";
+
+const { t } = useI18n();
+
+const groups = ref<string[]>(["basic", "security", "upload", "notification"]);
+const selectedGroup = ref("basic");
+const allConfigs = ref<SysConfig[]>([]);
+const refreshKey = ref(0);
+const selectedMenuKeys = computed({
+  get: () => [selectedGroup.value],
+  set: (keys: string[]) => {
+    if (keys.length > 0) selectedGroup.value = keys[0];
+  },
+});
+
+const getGroupCount = (group: string) =>
+  allConfigs.value.filter((c) => c.group === group).length;
+
+const menuItems = computed<MenuItemType[]>(() =>
+  groups.value.map((group) => ({
+    key: group,
+    label: h("div", { class: "menu-item-label" }, [
+      h("span", { class: "group-name" }, t(`config.groups.${group}`)),
+      h("span", { class: "group-count" }, String(getGroupCount(group))),
+    ]),
+    title: t(`config.groups.${group}`),
+  })),
+);
+
+const handleMenuClick = ({ key }: { key: string }) => {
+  selectedGroup.value = key;
+};
+
+// modal
+const modalVisible = ref(false);
+const modalTitle = computed(() =>
+  form.value.id ? t("config.editConfig") : t("config.createConfig"),
+);
+const form = ref<Partial<SysConfig>>({
+  name: "",
+  key: "",
+  value: "",
+  valueType: "string",
+  group: "basic",
+  sort: 0,
+  description: "",
+});
+const boolValue = computed({
+  get: () => form.value.value === "true",
+  set: (v: boolean) => {
+    form.value.value = String(v);
+  },
+});
+
+const columns: ProTableColumn[] = [
+  { title: t("config.configName"), dataIndex: "name", key: "name", width: 160 },
+  { title: t("config.configKey"), dataIndex: "key", key: "key", width: 200 },
+  {
+    title: t("config.configValue"),
+    dataIndex: "value",
+    key: "value",
+    ellipsis: true,
+  },
+  {
+    title: t("config.valueType"),
+    dataIndex: "valueType",
+    key: "valueType",
+    width: 90,
+  },
+  {
+    title: t("config.builtIn"),
+    dataIndex: "builtIn",
+    key: "builtIn",
+    width: 90,
+  },
+  {
+    title: t("config.description"),
+    dataIndex: "description",
+    key: "description",
+    ellipsis: true,
+  },
+  {
+    title: t("common.actions"),
+    dataIndex: "action",
+    key: "action",
+    width: 150,
+    fixed: "right",
+  },
+];
+
+const loadConfigList = async (params: Record<string, unknown>) => {
+  try {
+    const response = await getConfigList({
+      group: selectedGroup.value,
+      page: params.current as number,
+      pageSize: params.pageSize as number,
+    });
+    if (response.code === 200) {
+      return {
+        data: response.data.list,
+        total: response.data.total,
+        success: true,
+      };
+    }
+  } catch (error: unknown) {
+    console.error(t("config.loadConfigFailed"), (error as Error).message);
+  }
+  return { data: [], total: 0, success: false };
+};
+
+// load all configs for group count
+const loadAllConfigs = async () => {
+  try {
+    const response = await getConfigList({ page: 1, pageSize: 100 });
+    if (response.code === 200) allConfigs.value = response.data.list;
+  } catch (_error: unknown) {}
+};
+
+const handleAdd = () => {
+  form.value = {
+    name: "",
+    key: "",
+    value: "",
+    valueType: "string",
+    group: selectedGroup.value,
+    sort: 0,
+    description: "",
+  };
+  modalVisible.value = true;
+};
+
+const handleEdit = (record: SysConfig) => {
+  form.value = { ...record };
+  modalVisible.value = true;
+};
+
+const handleDelete = (record: SysConfig) => {
+  Modal.confirm({
+    title: t("config.confirmDelete"),
+    content: t("config.confirmDeleteContent", { name: record.name }),
+    onOk: async () => {
+      try {
+        const response = await deleteConfig(record.id);
+        if (response.code === 200) {
+          message.success(t("config.deleteSuccess"));
+          refreshKey.value++;
+          loadAllConfigs();
+        } else {
+          message.error(response.message || t("config.deleteFailed"));
+        }
+      } catch (_error: unknown) {
+        message.error(t("config.deleteFailed"));
+      }
+    },
+  });
+};
+
+const handleSubmit = async () => {
+  if (!form.value.name || !form.value.key) {
+    message.warning(t("config.requiredFields"));
+    return;
+  }
+  try {
+    if (form.value.id) {
+      const response = await updateConfig(form.value.id, form.value);
+      if (response.code === 200) {
+        message.success(t("config.updateSuccess"));
+        modalVisible.value = false;
+        refreshKey.value++;
+        loadAllConfigs();
+      }
+    } else {
+      const response = await createConfig(form.value);
+      if (response.code === 200) {
+        message.success(t("config.createSuccess"));
+        modalVisible.value = false;
+        refreshKey.value++;
+        loadAllConfigs();
+      } else message.error(response.message || t("config.operateFailed"));
+    }
+  } catch (_error: unknown) {
+    message.error(t("config.operateFailed"));
+  }
+};
+
+loadAllConfigs();
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+}
+
+.config-groups-header {
+  padding: 0 16px;
+  margin-bottom: 8px;
+
+  h3 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-heading);
+  }
+}
+
+.config-groups-menu {
+  flex: 1;
+  overflow: auto;
+  background: transparent;
+  border: none;
+
+  :deep(.ant-menu-item) {
+    margin: 4px 8px;
+    padding: 10px 12px !important;
+    border-radius: 8px;
+    height: auto;
+    transition: all 0.2s;
+
+    &::before {
+      // Remove default selected indicator
+      display: none;
+    }
+
+    &:hover {
+      background: var(--color-fill-quaternary, #fafafa);
+    }
+
+    &.ant-menu-item-selected {
+      background: var(
+        --ant-primary-color-deprecated-l-50,
+        rgba(22, 119, 255, 0.06)
+      );
+
+      .group-name {
+        color: var(--ant-primary-color);
+        font-weight: 600;
+      }
+    }
+  }
+
+  .menu-item-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .group-name {
+      font-size: 14px;
+      flex: 1;
+    }
+
+    .group-count {
+      font-size: 12px;
+      color: var(--color-text-quaternary);
+      background: var(--color-fill-quaternary);
+      padding: 0 8px;
+      border-radius: 10px;
+      line-height: 20px;
+      margin-left: 8px;
+      flex-shrink: 0;
+    }
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/system/dept/index.vue b/antdv-next-admin/src/views/system/dept/index.vue
new file mode 100644
index 0000000..5088b3c
--- /dev/null
+++ b/antdv-next-admin/src/views/system/dept/index.vue
@@ -0,0 +1,514 @@
+<template>
+  <div class="page-container">
+    <ProSplitLayout :side-width="280">
+      <template #side>
+        <!-- dept tree -->
+        <div class="dept-tree-header">
+          <h3>{{ t("dept.organizationStructure") }}</h3>
+          <a-button type="primary" size="small" @click="handleAdd(null)">
+            <template #icon><PlusOutlined /></template>
+            {{ t("common.add") }}
+          </a-button>
+        </div>
+        <div class="dept-tree-search">
+          <a-input-search
+            v-model:value="searchText"
+            :placeholder="t('dept.searchDept')"
+            allow-clear
+            @search="loadDeptTree"
+          />
+        </div>
+        <div class="dept-tree-body">
+          <a-tree
+            v-if="treeData.length"
+            :tree-data="treeData"
+            :field-names="{ title: 'name', key: 'id', children: 'children' }"
+            :selected-keys="selectedKeys"
+            default-expand-all
+            block-node
+            @select="handleTreeSelect"
+          >
+            <template #title="{ name, status }">
+              <div class="tree-node">
+                <span class="tree-node-name">{{ name }}</span>
+                <span v-if="status === 'disabled'" class="tree-node-badge">{{
+                  t("dept.disabled")
+                }}</span>
+              </div>
+            </template>
+          </a-tree>
+          <a-empty v-else :image="null" :description="t('common.noData')" />
+        </div>
+      </template>
+
+      <template #main>
+        <!-- dept detail -->
+        <template v-if="selectedDept">
+          <div class="dept-detail-header">
+            <div class="dept-detail-title">
+              <h3>{{ selectedDept.name }}</h3>
+              <ProStatus
+                :value="selectedDept.status"
+                :status-map="deptStatusMap"
+              />
+            </div>
+            <a-space>
+              <a-button
+                type="primary"
+                size="small"
+                @click="handleAdd(selectedDept.id)"
+              >
+                <template #icon><PlusOutlined /></template>
+                {{ t("dept.addChildDept") }}
+              </a-button>
+              <a-button size="small" @click="handleEdit(selectedDept)">
+                <template #icon><EditOutlined /></template>
+                {{ t("common.edit") }}
+              </a-button>
+              <a-button size="small" danger @click="handleDelete(selectedDept)">
+                <template #icon><DeleteOutlined /></template>
+                {{ t("common.delete") }}
+              </a-button>
+            </a-space>
+          </div>
+          <ProDescriptions
+            :columns="deptDescColumns"
+            :data="deptDescData"
+            :column="2"
+            bordered
+            size="middle"
+            class="dept-descriptions"
+          />
+
+          <!-- child dept list -->
+          <div class="dept-children">
+            <ProTable
+              :key="selectedDept.id"
+              :columns="childColumns"
+              :request="loadChildDepts"
+              :search="false"
+              :pagination="false"
+              :toolbar="{
+                title: `${t('dept.childDepts')} (${childDepts.length})`,
+              }"
+            >
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'status'">
+                  <ProStatus
+                    :value="record.status"
+                    :status-map="deptStatusMap"
+                  />
+                </template>
+                <template v-if="column.key === 'action'">
+                  <a-space :size="4">
+                    <a-button
+                      type="link"
+                      size="small"
+                      @click="selectDept(record.id)"
+                      >{{ t("common.view") }}</a-button
+                    >
+                    <a-button
+                      type="link"
+                      size="small"
+                      @click="handleEdit(record)"
+                      >{{ t("common.edit") }}</a-button
+                    >
+                  </a-space>
+                </template>
+              </template>
+            </ProTable>
+          </div>
+        </template>
+        <div v-else class="dept-detail-empty">
+          <a-empty :description="t('dept.selectDeptNode')" />
+        </div>
+      </template>
+    </ProSplitLayout>
+
+    <!-- add/edit modal -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="modalTitle"
+      @ok="handleSubmit"
+      :width="520"
+    >
+      <a-form :model="form" :label-col="{ span: 6 }" style="margin-top: 16px">
+        <a-form-item :label="t('dept.parentDept')">
+          <a-tree-select
+            v-model:value="form.parentId"
+            :tree-data="parentTreeData"
+            :field-names="{ label: 'name', value: 'id', children: 'children' }"
+            :placeholder="t('dept.noneTopLevelDept')"
+            allow-clear
+            tree-default-expand-all
+          />
+        </a-form-item>
+        <a-form-item :label="t('dept.deptName')" required>
+          <a-input
+            v-model:value="form.name"
+            :placeholder="t('dept.pleaseEnterDeptName')"
+          />
+        </a-form-item>
+        <a-form-item :label="t('dept.leader')">
+          <a-input
+            v-model:value="form.leader"
+            :placeholder="t('dept.pleaseEnterLeader')"
+          />
+        </a-form-item>
+        <a-form-item :label="t('dept.phone')">
+          <a-input
+            v-model:value="form.phone"
+            :placeholder="t('dept.pleaseEnterPhone')"
+          />
+        </a-form-item>
+        <a-form-item :label="t('dept.email')">
+          <a-input
+            v-model:value="form.email"
+            :placeholder="t('dept.pleaseEnterEmail')"
+          />
+        </a-form-item>
+        <a-form-item :label="t('dept.sort')">
+          <a-input-number
+            v-model:value="form.sort"
+            :min="0"
+            style="width: 100%"
+          />
+        </a-form-item>
+        <a-form-item :label="t('dept.status')">
+          <a-radio-group v-model:value="form.status">
+            <a-radio value="enabled">{{ t("dept.enabled") }}</a-radio>
+            <a-radio value="disabled">{{ t("dept.disabled") }}</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="t('dept.remark')">
+          <a-textarea
+            v-model:value="form.remark"
+            :placeholder="t('dept.pleaseEnterRemark')"
+            :rows="3"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Department } from "@/types/dept";
+import type {
+  ProTableColumn,
+  ProDescriptionItem,
+  ProStatusMap,
+} from "@/types/pro";
+
+import { PlusOutlined, EditOutlined, DeleteOutlined } from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+import {
+  getDeptTree,
+  getDeptList,
+  createDept,
+  updateDept,
+  deleteDept,
+} from "@/api/dept";
+import ProDescriptions from "@/components/Pro/ProDescriptions/index.vue";
+import ProSplitLayout from "@/components/Pro/ProSplitLayout/index.vue";
+import ProStatus from "@/components/Pro/ProStatus/index.vue";
+import ProTable from "@/components/Pro/ProTable/index.vue";
+
+const { t } = useI18n();
+
+const deptStatusMap = computed<ProStatusMap>(() => ({
+  enabled: { text: t("dept.enabled"), color: "#52c41a" },
+  disabled: { text: t("dept.disabled"), color: "#bfbfbf" },
+}));
+
+const searchText = ref("");
+const treeData = ref<Department[]>([]);
+const flatList = ref<Department[]>([]);
+const selectedKeys = ref<string[]>([]);
+
+const selectedDept = computed(() => {
+  if (!selectedKeys.value.length) return null;
+  return flatList.value.find((d) => d.id === selectedKeys.value[0]) || null;
+});
+
+const childDepts = computed(() => {
+  if (!selectedDept.value) return [];
+  return flatList.value
+    .filter((d) => d.parentId === selectedDept.value!.id)
+    .toSorted((a, b) => a.sort - b.sort);
+});
+
+const parentTreeData = computed(() => {
+  const root: Department = {
+    id: "",
+    name: t("dept.noneTopLevelDept"),
+    parentId: null,
+    sort: 0,
+    status: "enabled",
+    createTime: "",
+    updateTime: "",
+  };
+  return [{ ...root, children: treeData.value }];
+});
+
+// modal
+const modalVisible = ref(false);
+const modalTitle = computed(() =>
+  form.value.id ? t("dept.editDept") : t("dept.createDept"),
+);
+const form = ref<Partial<Department>>({
+  name: "",
+  parentId: null,
+  leader: "",
+  phone: "",
+  email: "",
+  sort: 0,
+  status: "enabled",
+  remark: "",
+});
+
+const childColumns = computed<ProTableColumn[]>(() => [
+  { title: t("dept.deptName"), dataIndex: "name", key: "name" },
+  { title: t("dept.leader"), dataIndex: "leader", key: "leader", width: 100 },
+  { title: t("dept.sort"), dataIndex: "sort", key: "sort", width: 70 },
+  { title: t("dept.status"), dataIndex: "status", key: "status", width: 80 },
+  {
+    title: t("common.actions"),
+    dataIndex: "action",
+    key: "action",
+    width: 120,
+  },
+]);
+
+const deptDescColumns = computed<ProDescriptionItem[]>(() => [
+  { label: t("dept.deptName"), dataIndex: "name" },
+  { label: t("dept.parentDept"), dataIndex: "parentName" },
+  { label: t("dept.leader"), dataIndex: "leader" },
+  { label: t("dept.phone"), dataIndex: "phone" },
+  { label: t("dept.email"), dataIndex: "email" },
+  { label: t("dept.sort"), dataIndex: "sort" },
+  { label: t("dept.createTime"), dataIndex: "createTime" },
+  { label: t("dept.updateTime"), dataIndex: "updateTime" },
+  { label: t("dept.remark"), dataIndex: "remark", span: 2 },
+]);
+
+const deptDescData = computed(() => {
+  if (!selectedDept.value) return {};
+  return {
+    ...selectedDept.value,
+    parentName: getParentName(selectedDept.value.parentId),
+  };
+});
+
+const getParentName = (parentId: string | null) => {
+  if (!parentId) return t("dept.noneTopLevel");
+  return flatList.value.find((d) => d.id === parentId)?.name || "-";
+};
+
+const selectDept = (id: string) => {
+  selectedKeys.value = [id];
+};
+
+const loadChildDepts = async () => {
+  return {
+    data: childDepts.value,
+    total: childDepts.value.length,
+    success: true,
+  };
+};
+
+const loadDeptTree = async () => {
+  try {
+    const params: Record<string, unknown> = {};
+    if (searchText.value) params.name = searchText.value;
+    const [treeRes, listRes] = await Promise.all([
+      getDeptTree(params),
+      getDeptList(),
+    ]);
+    if (treeRes.code === 200) treeData.value = treeRes.data;
+    if (listRes.code === 200) flatList.value = listRes.data;
+    if (!selectedKeys.value.length && treeData.value.length) {
+      selectedKeys.value = [treeData.value[0].id];
+    }
+  } catch (error: unknown) {
+    console.error(t("dept.loadDataFailed"), (error as Error).message);
+  }
+};
+
+const handleTreeSelect = (keys: string[]) => {
+  if (keys.length) selectedKeys.value = keys;
+};
+
+const handleAdd = (parentId: string | null) => {
+  form.value = {
+    name: "",
+    parentId,
+    leader: "",
+    phone: "",
+    email: "",
+    sort: 0,
+    status: "enabled",
+    remark: "",
+  };
+  modalVisible.value = true;
+};
+
+const handleEdit = (dept: Department) => {
+  form.value = { ...dept };
+  modalVisible.value = true;
+};
+
+const handleDelete = (dept: Department) => {
+  const hasChildren = flatList.value.some((d) => d.parentId === dept.id);
+  if (hasChildren) {
+    message.warning(t("dept.hasChildrenWarning"));
+    return;
+  }
+  Modal.confirm({
+    title: t("dept.confirmDelete"),
+    content: t("dept.confirmDeleteContent", { name: dept.name }),
+    onOk: async () => {
+      try {
+        const response = await deleteDept(dept.id);
+        if (response.code === 200) {
+          message.success(t("dept.deleteSuccess"));
+          selectedKeys.value = [];
+          loadDeptTree();
+        } else {
+          message.error(response.message || t("dept.deleteFailed"));
+        }
+      } catch (_error: unknown) {
+        message.error(t("dept.deleteFailed"));
+      }
+    },
+  });
+};
+
+const handleSubmit = async () => {
+  if (!form.value.name) {
+    message.warning(t("dept.pleaseEnterDeptName"));
+    return;
+  }
+  try {
+    if (form.value.id) {
+      const response = await updateDept(form.value.id, form.value);
+      if (response.code === 200) {
+        message.success(t("dept.updateSuccess"));
+        modalVisible.value = false;
+        loadDeptTree();
+      }
+    } else {
+      const response = await createDept(form.value);
+      if (response.code === 200) {
+        message.success(t("dept.createSuccess"));
+        modalVisible.value = false;
+        loadDeptTree();
+      }
+    }
+  } catch (_error: unknown) {
+    message.error(t("dept.operateFailed"));
+  }
+};
+
+// init
+loadDeptTree();
+</script>
+
+<style scoped lang="scss">
+// dept tree content
+.dept-tree-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+
+  h3 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text);
+  }
+}
+
+.dept-tree-search {
+  margin-bottom: 12px;
+}
+
+.dept-tree-body {
+  flex: 1;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+
+  :deep(.ant-tree-node-content-wrapper) {
+    flex: 1;
+  }
+
+  .tree-node {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .tree-node-name {
+      flex: 1;
+    }
+
+    .tree-node-badge {
+      font-size: 11px;
+      padding: 0 6px;
+      border-radius: 8px;
+      background: #fff1f0;
+      color: #cf1322;
+      line-height: 18px;
+    }
+  }
+}
+
+// dept detail content
+.dept-detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
+
+  .dept-detail-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    h3 {
+      margin: 0;
+      font-size: 17px;
+      font-weight: 600;
+    }
+  }
+}
+
+.dept-descriptions {
+  margin-bottom: 24px;
+}
+
+.dept-children {
+  :deep(.ant-table-thead > tr > th) {
+    background: var(--color-fill-quaternary);
+  }
+}
+
+.dept-detail-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+</style>
diff --git a/antdv-next-admin/src/views/system/dict/index.vue b/antdv-next-admin/src/views/system/dict/index.vue
new file mode 100644
index 0000000..5d31d7a
--- /dev/null
+++ b/antdv-next-admin/src/views/system/dict/index.vue
@@ -0,0 +1,597 @@
+<template>
+  <div class="page-container">
+    <ProSplitLayout :side-width="260">
+      <template #side>
+        <!-- dict type list -->
+        <div class="dict-types-header">
+          <h3>{{ t("dict.dictType") }}</h3>
+          <a-button type="primary" size="small" @click="handleAddType">
+            <template #icon><PlusOutlined /></template>
+            {{ t("common.add") }}
+          </a-button>
+        </div>
+        <div class="dict-types-list">
+          <div
+            v-for="type in dictTypes"
+            :key="type.id"
+            class="dict-type-item"
+            :class="{ active: selectedTypeCode === type.code }"
+            @click="handleSelectType(type)"
+          >
+            <div class="type-info">
+              <div class="type-name">{{ type.name }}</div>
+              <div class="type-code">{{ type.code }}</div>
+            </div>
+            <div class="type-actions" @click.stop>
+              <a-tooltip :title="t('common.edit')">
+                <a-button
+                  type="text"
+                  size="small"
+                  @click="handleEditType(type)"
+                >
+                  <template #icon><EditOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip :title="t('common.delete')">
+                <a-button
+                  type="text"
+                  size="small"
+                  danger
+                  @click="handleDeleteType(type)"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #main>
+        <!-- dict data list -->
+        <ProTable
+          v-if="selectedTypeCode"
+          :key="selectedTypeCode"
+          :columns="columns"
+          :request="loadData"
+          :search="false"
+          :toolbar="{
+            title: t('dict.dictDataTitle', { name: selectedTypeName }),
+          }"
+        >
+          <template #toolbar-actions>
+            <a-button type="primary" @click="handleAdd">
+              <PlusOutlined /> {{ t("dict.createData") }}
+            </a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'status'">
+              <ProStatus :value="record.status" :status-map="dictStatusMap" />
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space :size="4">
+                <a-button type="link" size="small" @click="handleEdit(record)">
+                  <template #icon><EditOutlined /></template>
+                  {{ t("common.edit") }}
+                </a-button>
+                <a-button
+                  type="link"
+                  size="small"
+                  danger
+                  @click="handleDelete(record)"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                  {{ t("common.delete") }}
+                </a-button>
+              </a-space>
+            </template>
+          </template>
+        </ProTable>
+        <div v-else class="dict-data-empty">
+          <a-empty :description="t('dict.selectTypeHint')" />
+        </div>
+      </template>
+    </ProSplitLayout>
+
+    <!-- dict type modal -->
+    <a-modal
+      v-model:open="typeModalVisible"
+      :title="typeModalTitle"
+      @ok="handleTypeSubmit"
+    >
+      <a-form :model="typeForm" :label-col="{ span: 6 }">
+        <a-form-item :label="t('dict.typeName')" required>
+          <a-input
+            v-model:value="typeForm.name"
+            :placeholder="t('dict.typeNamePlaceholder')"
+          />
+        </a-form-item>
+        <a-form-item :label="t('dict.typeCode')" required>
+          <a-input
+            v-model:value="typeForm.code"
+            :placeholder="t('dict.typeCodePlaceholder')"
+            :disabled="!!typeForm.id"
+          />
+        </a-form-item>
+        <a-form-item :label="t('dict.description')">
+          <a-textarea
+            v-model:value="typeForm.description"
+            :placeholder="t('dict.descriptionPlaceholder')"
+            :rows="3"
+          />
+        </a-form-item>
+        <a-form-item :label="t('common.status')">
+          <a-radio-group v-model:value="typeForm.status">
+            <a-radio value="enabled">{{ t("dict.enabled") }}</a-radio>
+            <a-radio value="disabled">{{ t("dict.disabled") }}</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- dict data modal -->
+    <a-modal
+      v-model:open="dataModalVisible"
+      :title="dataModalTitle"
+      @ok="handleDataSubmit"
+    >
+      <a-form :model="dataForm" :label-col="{ span: 6 }">
+        <a-form-item :label="t('dict.dictLabel')" required>
+          <a-input
+            v-model:value="dataForm.label"
+            :placeholder="t('dict.labelPlaceholder')"
+          />
+        </a-form-item>
+        <a-form-item :label="t('dict.dictValue')" required>
+          <a-input
+            v-model:value="dataForm.value"
+            :placeholder="t('dict.valuePlaceholder')"
+          />
+        </a-form-item>
+        <a-form-item :label="t('dict.sort')">
+          <a-input-number
+            v-model:value="dataForm.sort"
+            :min="0"
+            style="width: 100%"
+          />
+        </a-form-item>
+        <a-form-item :label="t('common.status')">
+          <a-radio-group v-model:value="dataForm.status">
+            <a-radio value="enabled">{{ t("dict.enabled") }}</a-radio>
+            <a-radio value="disabled">{{ t("dict.disabled") }}</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="t('dict.remark')">
+          <a-textarea
+            v-model:value="dataForm.remark"
+            :placeholder="t('dict.remarkPlaceholder')"
+            :rows="3"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DictType, DictData } from "@/types/dict";
+import type { ProTableColumn, ProStatusMap } from "@/types/pro";
+
+import { PlusOutlined, EditOutlined, DeleteOutlined } from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+import {
+  getDictTypes,
+  createDictType,
+  updateDictType,
+  deleteDictType,
+  getDictDataList,
+  createDictData,
+  updateDictData,
+  deleteDictData,
+} from "@/api/dict";
+import ProSplitLayout from "@/components/Pro/ProSplitLayout/index.vue";
+import ProStatus from "@/components/Pro/ProStatus/index.vue";
+import ProTable from "@/components/Pro/ProTable/index.vue";
+import { useDictStore } from "@/stores/dict";
+
+const { t } = useI18n();
+const dictStore = useDictStore();
+
+const dictStatusMap = computed<ProStatusMap>(() => ({
+  enabled: { text: t("dict.enabled"), color: "#52c41a" },
+  disabled: { text: t("dict.disabled"), color: "#bfbfbf" },
+}));
+
+// dict type list
+const dictTypes = ref<DictType[]>([]);
+const selectedTypeCode = ref<string>("");
+const selectedTypeName = computed(() => {
+  const type = dictTypes.value.find(
+    (item) => item.code === selectedTypeCode.value,
+  );
+  return type?.name || "";
+});
+
+// dict type modal
+const typeModalVisible = ref(false);
+const typeModalTitle = computed(() =>
+  typeForm.value.id ? t("dict.editType") : t("dict.createType"),
+);
+const typeForm = ref<Partial<DictType>>({
+  name: "",
+  code: "",
+  description: "",
+  status: "enabled",
+});
+
+// dict data modal
+const dataModalVisible = ref(false);
+const dataModalTitle = computed(() =>
+  dataForm.value.id ? t("dict.editData") : t("dict.createData"),
+);
+const dataForm = ref<Partial<DictData>>({
+  label: "",
+  value: "",
+  sort: 0,
+  status: "enabled",
+  remark: "",
+});
+
+// table columns
+const columns: ProTableColumn[] = [
+  {
+    title: t("dict.dictLabel"),
+    dataIndex: "label",
+    key: "label",
+  },
+  {
+    title: t("dict.dictValue"),
+    dataIndex: "value",
+    key: "value",
+  },
+  {
+    title: t("dict.sort"),
+    dataIndex: "sort",
+    key: "sort",
+    width: 80,
+  },
+  {
+    title: t("common.status"),
+    dataIndex: "status",
+    key: "status",
+    width: 80,
+  },
+  {
+    title: t("dict.remark"),
+    dataIndex: "remark",
+    key: "remark",
+  },
+  {
+    title: t("common.actions"),
+    dataIndex: "action",
+    key: "action",
+    width: 150,
+    fixed: "right",
+  },
+];
+
+// load dict type list
+const loadDictTypes = async () => {
+  try {
+    const response = await getDictTypes();
+    if (response.code === 200) {
+      dictTypes.value = response.data;
+      if (dictTypes.value.length > 0 && !selectedTypeCode.value) {
+        selectedTypeCode.value = dictTypes.value[0].code;
+      }
+    }
+  } catch (error: unknown) {
+    console.error(t("dict.loadTypeFailed"), (error as Error).message);
+  }
+};
+
+// load dict data list
+const loadData = async (params: Record<string, unknown>) => {
+  try {
+    const response = await getDictDataList({
+      typeCode: selectedTypeCode.value,
+      page: params.current as number,
+      pageSize: params.pageSize as number,
+    });
+    if (response.code === 200) {
+      return {
+        data: response.data.list,
+        total: response.data.total,
+        success: true,
+      };
+    }
+  } catch (error: unknown) {
+    console.error(t("dict.loadDataFailed"), (error as Error).message);
+  }
+  return {
+    data: [],
+    total: 0,
+    success: false,
+  };
+};
+
+// select dict type
+const handleSelectType = (type: DictType) => {
+  selectedTypeCode.value = type.code;
+};
+
+// add dict type
+const handleAddType = () => {
+  typeForm.value = {
+    name: "",
+    code: "",
+    description: "",
+    status: "enabled",
+  };
+  typeModalVisible.value = true;
+};
+
+// edit dict type
+const handleEditType = (type: DictType) => {
+  typeForm.value = { ...type };
+  typeModalVisible.value = true;
+};
+
+// delete dict type
+const handleDeleteType = (type: DictType) => {
+  Modal.confirm({
+    title: t("dict.confirmDelete"),
+    content: t("dict.confirmDeleteType", { name: type.name }),
+    onOk: async () => {
+      try {
+        const response = await deleteDictType(type.id);
+        if (response.code === 200) {
+          message.success(t("dict.deleteSuccess"));
+          loadDictTypes();
+          if (selectedTypeCode.value === type.code) {
+            selectedTypeCode.value = "";
+          }
+        }
+      } catch (_error: unknown) {
+        message.error(t("dict.deleteFailed"));
+      }
+    },
+  });
+};
+
+// submit dict type
+const handleTypeSubmit = async () => {
+  if (!typeForm.value.name || !typeForm.value.code) {
+    message.warning(t("dict.requiredFields"));
+    return;
+  }
+
+  try {
+    if (typeForm.value.id) {
+      const response = await updateDictType(typeForm.value.id, typeForm.value);
+      if (response.code === 200) {
+        message.success(t("dict.updateSuccess"));
+        typeModalVisible.value = false;
+        loadDictTypes();
+      }
+    } else {
+      const response = await createDictType(typeForm.value);
+      if (response.code === 200) {
+        message.success(t("dict.createSuccess"));
+        typeModalVisible.value = false;
+        loadDictTypes();
+      }
+    }
+  } catch (_error: unknown) {
+    message.error(t("dict.operateFailed"));
+  }
+};
+
+// add dict data
+const handleAdd = () => {
+  dataForm.value = {
+    typeCode: selectedTypeCode.value,
+    label: "",
+    value: "",
+    sort: 0,
+    status: "enabled",
+    remark: "",
+  };
+  dataModalVisible.value = true;
+};
+
+// edit dict data
+const handleEdit = (record: DictData) => {
+  dataForm.value = { ...record };
+  dataModalVisible.value = true;
+};
+
+// delete dict data
+const handleDelete = (record: DictData) => {
+  Modal.confirm({
+    title: t("dict.confirmDelete"),
+    content: t("dict.confirmDeleteData", { label: record.label }),
+    onOk: async () => {
+      try {
+        const response = await deleteDictData(record.id);
+        if (response.code === 200) {
+          message.success(t("dict.deleteSuccess"));
+          dictStore.refreshDictData();
+        }
+      } catch (_error: unknown) {
+        message.error(t("dict.deleteFailed"));
+      }
+    },
+  });
+};
+
+// submit dict data
+const handleDataSubmit = async () => {
+  if (!dataForm.value.label || !dataForm.value.value) {
+    message.warning(t("dict.requiredFields"));
+    return;
+  }
+
+  try {
+    if (dataForm.value.id) {
+      const response = await updateDictData(dataForm.value.id, dataForm.value);
+      if (response.code === 200) {
+        message.success(t("dict.updateSuccess"));
+        dataModalVisible.value = false;
+        dictStore.refreshDictData();
+      }
+    } else {
+      const response = await createDictData(dataForm.value);
+      if (response.code === 200) {
+        message.success(t("dict.createSuccess"));
+        dataModalVisible.value = false;
+        dictStore.refreshDictData();
+      }
+    }
+  } catch (_error: unknown) {
+    message.error(t("dict.operateFailed"));
+  }
+};
+
+// init
+loadDictTypes();
+</script>
+
+<style scoped lang="scss">
+// dict types content
+.dict-types-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
+
+  h3 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text);
+  }
+}
+
+.dict-types-list {
+  flex: 1;
+  overflow-y: auto;
+  margin: 0 -8px;
+  padding: 0 8px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .dict-type-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 12px 12px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    margin-bottom: 4px;
+    border: none;
+    transition: all 0.2s ease;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 3px;
+      height: 0;
+      background: var(--ant-primary-color);
+      border-radius: 0 3px 3px 0;
+      transition: height 0.2s ease;
+    }
+
+    &:hover {
+      background: var(--color-fill-quaternary, #fafafa);
+
+      .type-actions {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    &.active {
+      background: var(
+        --ant-primary-color-deprecated-l-50,
+        rgba(22, 119, 255, 0.06)
+      );
+
+      &::before {
+        height: 60%;
+      }
+
+      .type-name {
+        color: var(--ant-primary-color);
+        font-weight: 600;
+      }
+    }
+
+    .type-info {
+      flex: 1;
+      min-width: 0;
+
+      .type-name {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 2px;
+        color: var(--color-text);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: color 0.2s;
+      }
+
+      .type-code {
+        font-size: 12px;
+        color: var(--color-text-quaternary, #bfbfbf);
+        font-family: "SF Mono", "Monaco", "Menlo", monospace;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .type-actions {
+      display: flex;
+      gap: 2px;
+      opacity: 0;
+      transform: translateX(8px);
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+  }
+}
+
+// dict data content
+:deep(.ant-table-thead > tr > th),
+:deep(.ant-table-thead > tr > td) {
+  background: var(--color-fill-quaternary, #fafafa);
+}
+
+.dict-data-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+</style>
diff --git a/antdv-next-admin/src/views/system/file/index.vue b/antdv-next-admin/src/views/system/file/index.vue
new file mode 100644
index 0000000..4000a9d
--- /dev/null
+++ b/antdv-next-admin/src/views/system/file/index.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="page-container">
+    <ProTable
+      :key="refreshKey"
+      :columns="columns"
+      :request="loadFileList"
+      :toolbar="{
+        title: t('file.title'),
+        actions: [],
+      }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'originalName'">
+          <div class="file-name">
+            <span class="file-icon" :style="{ color: getExtColor(record.ext) }">
+              <FileImageOutlined v-if="isImage(record.ext)" />
+              <VideoCameraOutlined v-else-if="isVideo(record.ext)" />
+              <FilePdfOutlined v-else-if="record.ext === 'pdf'" />
+              <FileExcelOutlined
+                v-else-if="['xlsx', 'xls'].includes(record.ext)"
+              />
+              <FileWordOutlined
+                v-else-if="['docx', 'doc'].includes(record.ext)"
+              />
+              <FilePptOutlined
+                v-else-if="['pptx', 'ppt'].includes(record.ext)"
+              />
+              <FileZipOutlined
+                v-else-if="['zip', 'rar', '7z'].includes(record.ext)"
+              />
+              <FileTextOutlined v-else />
+            </span>
+            <span>{{ record.originalName }}</span>
+          </div>
+        </template>
+        <template v-if="column.key === 'size'">
+          {{ formatSize(record.size) }}
+        </template>
+        <template v-if="column.key === 'storage'">
+          <a-tag :color="storageColor[record.storage]">{{
+            t(`file.storageType.${record.storage}`)
+          }}</a-tag>
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space :size="4">
+            <a-button
+              type="link"
+              size="small"
+              danger
+              @click="handleDelete(record)"
+            >
+              <template #icon><DeleteOutlined /></template>
+              {{ t("file.delete") }}
+            </a-button>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SysFile } from "@/types/file";
+import type { ProTableColumn } from "@/types/pro";
+
+import {
+  DeleteOutlined,
+  FileImageOutlined,
+  VideoCameraOutlined,
+  FilePdfOutlined,
+  FileExcelOutlined,
+  FileWordOutlined,
+  FilePptOutlined,
+  FileZipOutlined,
+  FileTextOutlined,
+} from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+import { getFileList, deleteFile } from "@/api/file";
+import ProTable from "@/components/Pro/ProTable/index.vue";
+
+const { t } = useI18n();
+const refreshKey = ref(0);
+
+const storageColor: Record<string, string> = {
+  local: "default",
+  oss: "blue",
+  cos: "green",
+};
+
+const isImage = (ext: string) =>
+  ["jpg", "jpeg", "png", "gif", "svg", "webp"].includes(ext);
+const isVideo = (ext: string) => ["mp4", "avi", "mov", "wmv"].includes(ext);
+
+const getExtColor = (ext: string) => {
+  const colors: Record<string, string> = {
+    jpg: "#f5222d",
+    jpeg: "#f5222d",
+    png: "#fa541c",
+    gif: "#fa8c16",
+    svg: "#a0d911",
+    pdf: "#cf1322",
+    docx: "#1677ff",
+    doc: "#1677ff",
+    xlsx: "#52c41a",
+    xls: "#52c41a",
+    pptx: "#fa541c",
+    ppt: "#fa541c",
+    zip: "#faad14",
+    rar: "#faad14",
+    mp4: "#722ed1",
+    txt: "#8c8c8c",
+  };
+  return colors[ext] || "#8c8c8c";
+};
+
+const formatSize = (bytes: number) => {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  if (bytes < 1024 * 1024 * 1024)
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GB";
+};
+
+const columns = computed<ProTableColumn[]>(() => [
+  {
+    title: t("file.fileName"),
+    dataIndex: "originalName",
+    key: "originalName",
+    search: true,
+    searchType: "input",
+    ellipsis: true,
+  },
+  {
+    title: t("file.ext"),
+    dataIndex: "ext",
+    key: "ext",
+    width: 90,
+    search: true,
+    searchType: "select",
+    searchOptions: [
+      { label: t("file.extType.imageJpg"), value: "jpg" },
+      { label: t("file.extType.imagePng"), value: "png" },
+      { label: t("file.extType.pdf"), value: "pdf" },
+      { label: t("file.extType.word"), value: "docx" },
+      { label: t("file.extType.excel"), value: "xlsx" },
+      { label: t("file.extType.zip"), value: "zip" },
+      { label: t("file.extType.video"), value: "mp4" },
+      { label: t("file.extType.text"), value: "txt" },
+      { label: t("file.extType.ppt"), value: "pptx" },
+      { label: t("file.extType.svg"), value: "svg" },
+    ],
+  },
+  { title: t("file.size"), dataIndex: "size", key: "size", width: 120 },
+  {
+    title: t("file.storage"),
+    dataIndex: "storage",
+    key: "storage",
+    width: 100,
+    search: true,
+    searchType: "select",
+    searchOptions: [
+      { label: t("file.storageType.local"), value: "local" },
+      { label: t("file.storageType.oss"), value: "oss" },
+      { label: t("file.storageType.cos"), value: "cos" },
+    ],
+  },
+  {
+    title: t("file.uploader"),
+    dataIndex: "uploader",
+    key: "uploader",
+    width: 100,
+  },
+  {
+    title: t("file.uploadTime"),
+    dataIndex: "createTime",
+    key: "createTime",
+    width: 180,
+  },
+  {
+    title: t("file.action"),
+    dataIndex: "action",
+    key: "action",
+    width: 100,
+    fixed: "right",
+  },
+]);
+
+const loadFileList = async (params: Record<string, unknown>) => {
+  try {
+    const response = await getFileList({
+      name: params.originalName as string,
+      ext: params.ext as string,
+      storage: params.storage as string,
+      page: params.current as number,
+      pageSize: params.pageSize as number,
+    });
+    if (response.code === 200) {
+      return {
+        data: response.data.list,
+        total: response.data.total,
+        success: true,
+      };
+    }
+  } catch (error: unknown) {
+    console.error(t("file.loadFailed"), (error as Error).message);
+  }
+  return { data: [], total: 0, success: false };
+};
+
+const handleDelete = (record: SysFile) => {
+  Modal.confirm({
+    title: t("file.confirmDelete"),
+    content: t("file.confirmDeleteContent", { name: record.originalName }),
+    onOk: async () => {
+      try {
+        const response = await deleteFile(record.id);
+        if (response.code === 200) {
+          message.success(t("file.deleteSuccess"));
+          refreshKey.value++;
+        } else {
+          message.error(response.message || t("file.deleteFailed"));
+        }
+      } catch (_error: unknown) {
+        message.error(t("file.deleteFailed"));
+      }
+    },
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.file-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .file-icon {
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/system/log/index.vue b/antdv-next-admin/src/views/system/log/index.vue
new file mode 100644
index 0000000..f1e3d28
--- /dev/null
+++ b/antdv-next-admin/src/views/system/log/index.vue
@@ -0,0 +1,378 @@
+<template>
+  <div class="page-container">
+    <div class="log-container">
+      <a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
+        <a-tab-pane key="operation" :tab="t('log.operationLog')">
+          <ProTable
+            ref="operationTableRef"
+            :key="'operation-' + operationRefreshKey"
+            :columns="operationColumns"
+            :request="loadOperationLogs"
+            :toolbar="{ title: t('log.operationLog') }"
+          >
+            <template #toolbar-actions>
+              <a-button danger @click="handleClearOperationLog">
+                <DeleteOutlined /> {{ t("log.clearLog") }}
+              </a-button>
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <a-tag :color="actionColorMap[record.action] || 'default'">
+                  {{ t(`log.actionTypes.${record.action}`) || record.action }}
+                </a-tag>
+              </template>
+              <template v-if="column.key === 'status'">
+                <ProStatus :value="record.status" :status-map="logStatusMap" />
+              </template>
+              <template v-if="column.key === 'duration'">
+                <span
+                  :style="{
+                    color:
+                      record.duration > 300
+                        ? '#ff4d4f'
+                        : record.duration > 100
+                          ? '#faad14'
+                          : '#52c41a',
+                  }"
+                >
+                  {{ record.duration }}ms
+                </span>
+              </template>
+            </template>
+          </ProTable>
+        </a-tab-pane>
+
+        <a-tab-pane key="login" :tab="t('log.loginLog')">
+          <ProTable
+            ref="loginTableRef"
+            :key="'login-' + loginRefreshKey"
+            :columns="loginColumns"
+            :request="loadLoginLogs"
+            :toolbar="{ title: t('log.loginLog') }"
+          >
+            <template #toolbar-actions>
+              <a-button danger @click="handleClearLoginLog">
+                <DeleteOutlined /> {{ t("log.clearLog") }}
+              </a-button>
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'status'">
+                <ProStatus :value="record.status" :status-map="logStatusMap" />
+              </template>
+            </template>
+          </ProTable>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProTableColumn, ProStatusMap } from "@/types/pro";
+
+import { DeleteOutlined } from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+import {
+  getOperationLogList,
+  getLoginLogList,
+  clearOperationLog,
+  clearLoginLog,
+} from "@/api/log";
+import ProStatus from "@/components/Pro/ProStatus/index.vue";
+import ProTable from "@/components/Pro/ProTable/index.vue";
+
+const { t } = useI18n();
+
+const logStatusMap = computed<ProStatusMap>(() => ({
+  success: { text: t("log.success"), color: "#52c41a" },
+  fail: { text: t("log.fail"), color: "#ff4d4f" },
+}));
+
+const activeTab = ref("operation");
+const operationRefreshKey = ref(0);
+const loginRefreshKey = ref(0);
+
+const actionColorMap: Record<string, string> = {
+  login: "blue",
+  logout: "default",
+  create: "green",
+  update: "orange",
+  delete: "red",
+  export: "purple",
+  import: "cyan",
+  other: "default",
+};
+
+// operation log columns
+const operationColumns = computed<ProTableColumn[]>(() => [
+  {
+    title: t("log.operationUser"),
+    dataIndex: "username",
+    key: "username",
+    width: 100,
+    search: true,
+    searchType: "input",
+  },
+  {
+    title: t("log.operationModule"),
+    dataIndex: "module",
+    key: "module",
+    width: 110,
+    search: true,
+    searchType: "select",
+    searchOptions: [
+      { label: t("log.modules.userManagement"), value: "userManagement" },
+      { label: t("log.modules.roleManagement"), value: "roleManagement" },
+      { label: t("log.modules.menuManagement"), value: "menuManagement" },
+      { label: t("log.modules.dictionary"), value: "dictionary" },
+      { label: t("log.modules.systemLogin"), value: "systemLogin" },
+      { label: t("log.modules.profile"), value: "profile" },
+      { label: t("log.modules.dashboard"), value: "dashboard" },
+    ],
+  },
+  {
+    title: t("log.operationType"),
+    dataIndex: "action",
+    key: "action",
+    width: 90,
+    search: true,
+    searchType: "select",
+    searchOptions: [
+      { label: t("log.actionTypes.login"), value: "login" },
+      { label: t("log.actionTypes.logout"), value: "logout" },
+      { label: t("log.actionTypes.create"), value: "create" },
+      { label: t("log.actionTypes.update"), value: "update" },
+      { label: t("log.actionTypes.delete"), value: "delete" },
+      { label: t("log.actionTypes.export"), value: "export" },
+    ],
+  },
+  {
+    title: t("log.operationDescription"),
+    dataIndex: "description",
+    key: "description",
+    ellipsis: true,
+  },
+  {
+    title: t("log.requestMethod"),
+    dataIndex: "method",
+    key: "method",
+    width: 90,
+  },
+  {
+    title: t("log.ipAddress"),
+    dataIndex: "ip",
+    key: "ip",
+    width: 130,
+  },
+  {
+    title: t("common.status"),
+    dataIndex: "status",
+    key: "status",
+    width: 80,
+    search: true,
+    searchType: "select",
+    searchOptions: [
+      { label: t("log.success"), value: "success" },
+      { label: t("log.fail"), value: "fail" },
+    ],
+  },
+  {
+    title: t("log.duration"),
+    dataIndex: "duration",
+    key: "duration",
+    width: 80,
+  },
+  {
+    title: t("log.operationTime"),
+    dataIndex: "createTime",
+    key: "createTime",
+    width: 170,
+  },
+]);
+
+// login log columns
+const loginColumns = computed<ProTableColumn[]>(() => [
+  {
+    title: t("log.username"),
+    dataIndex: "username",
+    key: "username",
+    width: 120,
+    search: true,
+    searchType: "input",
+  },
+  {
+    title: t("log.ipAddress"),
+    dataIndex: "ip",
+    key: "ip",
+    width: 140,
+    search: true,
+    searchType: "input",
+  },
+  {
+    title: t("log.browser"),
+    dataIndex: "browser",
+    key: "browser",
+    width: 130,
+  },
+  {
+    title: t("log.os"),
+    dataIndex: "os",
+    key: "os",
+    width: 130,
+  },
+  {
+    title: t("common.status"),
+    dataIndex: "status",
+    key: "status",
+    width: 80,
+    search: true,
+    searchType: "select",
+    searchOptions: [
+      { label: t("log.success"), value: "success" },
+      { label: t("log.fail"), value: "fail" },
+    ],
+  },
+  {
+    title: t("log.message"),
+    dataIndex: "message",
+    key: "message",
+    ellipsis: true,
+  },
+  {
+    title: t("log.loginTime"),
+    dataIndex: "createTime",
+    key: "createTime",
+    width: 170,
+  },
+]);
+
+const handleTabChange = () => {};
+
+const loadOperationLogs = async (params: Record<string, unknown>) => {
+  try {
+    const response = await getOperationLogList({
+      username: params.username as string,
+      module: params.module as string,
+      action: params.action as string,
+      status: params.status as string,
+      page: params.current as number,
+      pageSize: params.pageSize as number,
+    });
+    if (response.code === 200) {
+      return {
+        data: response.data.list,
+        total: response.data.total,
+        success: true,
+      };
+    }
+  } catch (error: unknown) {
+    console.error(t("log.loadOperationLogFailed"), (error as Error).message);
+  }
+  return { data: [], total: 0, success: false };
+};
+
+const loadLoginLogs = async (params: Record<string, unknown>) => {
+  try {
+    const response = await getLoginLogList({
+      username: params.username as string,
+      ip: params.ip as string,
+      status: params.status as string,
+      page: params.current as number,
+      pageSize: params.pageSize as number,
+    });
+    if (response.code === 200) {
+      return {
+        data: response.data.list,
+        total: response.data.total,
+        success: true,
+      };
+    }
+  } catch (error: unknown) {
+    console.error(t("log.loadLoginLogFailed"), (error as Error).message);
+  }
+  return { data: [], total: 0, success: false };
+};
+
+const handleClearOperationLog = () => {
+  Modal.confirm({
+    title: t("log.confirmClear"),
+    content: t("log.confirmClearOperation"),
+    okType: "danger",
+    onOk: async () => {
+      try {
+        const response = await clearOperationLog();
+        if (response.code === 200) {
+          message.success(t("log.clearSuccess"));
+          operationRefreshKey.value++;
+        }
+      } catch (_error: unknown) {
+        message.error(t("log.clearFailed"));
+      }
+    },
+  });
+};
+
+const handleClearLoginLog = () => {
+  Modal.confirm({
+    title: t("log.confirmClear"),
+    content: t("log.confirmClearLogin"),
+    okType: "danger",
+    onOk: async () => {
+      try {
+        const response = await clearLoginLog();
+        if (response.code === 200) {
+          message.success(t("log.clearSuccess"));
+          loginRefreshKey.value++;
+        }
+      } catch (_error: unknown) {
+        message.error(t("log.clearFailed"));
+      }
+    },
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.log-container {
+  background: var(--color-bg-container);
+  border-radius: 8px;
+  padding: 16px 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+
+  :deep(.ant-tabs) {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-tabs-content-holder) {
+    flex: 1;
+    min-height: 0;
+  }
+
+  :deep(.ant-tabs-content) {
+    height: 100%;
+  }
+
+  :deep(.ant-tabs-tabpane) {
+    height: 100%;
+  }
+
+  :deep(.ant-tabs-nav) {
+    margin-bottom: 8px;
+  }
+
+  :deep(.ant-table-thead > tr > th),
+  :deep(.ant-table-thead > tr > td) {
+    background: var(--color-fill-quaternary);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/system/permission/index.vue b/antdv-next-admin/src/views/system/permission/index.vue
new file mode 100644
index 0000000..51d4b2b
--- /dev/null
+++ b/antdv-next-admin/src/views/system/permission/index.vue
@@ -0,0 +1,610 @@
+<template>
+  <div class="page-container">
+    <ProTable
+      ref="tableRef"
+      :columns="columns"
+      :request="fetchTableData"
+      :toolbar="toolbarConfig"
+      :search="{
+        labelWidth: 6,
+        defaultCollapsed: false,
+      }"
+      :pagination="false"
+      row-key="id"
+      :expanded-row-keys="expandedRowKeys"
+      :children-column-name="'children'"
+      @expanded-rows-change="handleExpandedRowsChange"
+    >
+      <template #toolbar-actions>
+        <a-space :size="8">
+          <a-button
+            type="primary"
+            class="create-permission-btn"
+            @click="handleCreateRoot"
+          >
+            <PlusOutlined /> {{ $t("permission.createPermission") }}
+          </a-button>
+          <a-button @click="expandAllRows">{{
+            $t("permission.expandAll")
+          }}</a-button>
+          <a-button @click="collapseAllRows">{{
+            $t("permission.collapseAll")
+          }}</a-button>
+        </a-space>
+      </template>
+    </ProTable>
+
+    <a-modal
+      v-model:open="modalVisible"
+      :title="modalTitle"
+      :confirm-loading="submitting"
+      width="760px"
+      @ok="handleSubmit"
+      @cancel="handleCancel"
+    >
+      <a-alert
+        v-if="currentParentName"
+        type="info"
+        show-icon
+        style="margin-bottom: 12px"
+      >
+        <template #message>
+          {{ $t("permission.parentMenu") }}：{{ currentParentName }}
+        </template>
+      </a-alert>
+
+      <ProForm
+        ref="formRef"
+        :form-items="formItems"
+        :initial-values="formData"
+        :grid="{ cols: 2, gutter: 16 }"
+        :layout="{ layout: 'vertical' }"
+        @values-change="handleFormValuesChange"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Permission } from "@/types/auth";
+import type { ProFormItem, ProTableColumn } from "@/types/pro";
+
+import { PlusOutlined, EditOutlined, DeleteOutlined } from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import { computed, ref } from "vue";
+
+import {
+  createPermission,
+  deletePermission,
+  getPermissionList,
+  updatePermission,
+} from "@/api/permission";
+import ProForm from "@/components/Pro/ProForm/index.vue";
+import ProTable from "@/components/Pro/ProTable/index.vue";
+import { $t } from "@/locales";
+
+type PermissionFormValues = {
+  name: string;
+  code: string;
+  type: Permission["type"];
+  description: string;
+  parentId?: string;
+  path: string;
+  component: string;
+  icon: string;
+  sort: number;
+  status: "active" | "inactive";
+  visible: boolean;
+  resource: string;
+  action: string;
+};
+
+type PermissionMode = "create" | "edit";
+
+const tableRef = ref<{
+  refresh: () => void;
+} | null>(null);
+const formRef = ref<{
+  validate: () => Promise<boolean>;
+  getFieldsValue: () => PermissionFormValues;
+} | null>(null);
+
+const modalVisible = ref(false);
+const submitting = ref(false);
+const modalMode = ref<PermissionMode>("create");
+const editingPermissionId = ref<string | null>(null);
+
+const menuTree = ref<Permission[]>([]);
+const expandedRowKeys = ref<string[]>([]);
+const keepExpandAll = ref(true);
+
+const formData = ref<PermissionFormValues>(createDefaultFormValues());
+const formValues = ref<PermissionFormValues>(createDefaultFormValues());
+
+const toolbarConfig = computed(() => ({
+  title: $t("permission.title"),
+  subTitle: "ProTable + ProForm",
+  actions: ["refresh", "density", "columnSetting"] as Array<
+    "refresh" | "density" | "columnSetting"
+  >,
+}));
+
+const permissionTypeOptions = computed(() => [
+  { label: $t("permission.menu"), value: "menu" },
+  { label: $t("permission.button"), value: "button" },
+  { label: $t("permission.api"), value: "api" },
+]);
+
+const statusOptions = computed(() => [
+  { label: $t("user.active"), value: "active" },
+  { label: $t("user.inactive"), value: "inactive" },
+]);
+
+const currentType = computed(() => formValues.value.type || "menu");
+
+const modalTitle = computed(() => {
+  if (modalMode.value === "edit") {
+    return $t("permission.editPermission");
+  }
+  return formValues.value.parentId
+    ? $t("permission.createChildMenu")
+    : $t("permission.createPermission");
+});
+
+const currentParentName = computed(() => {
+  if (!formValues.value.parentId) {
+    return "";
+  }
+  return findPermissionName(menuTree.value, formValues.value.parentId) || "-";
+});
+
+const permissionTypeValueEnum = computed<
+  Record<string, { text: string; status?: string; color?: string }>
+>(() => ({
+  menu: { text: $t("permission.menu"), color: "processing" },
+  button: { text: $t("permission.button"), color: "success" },
+  api: { text: $t("permission.api"), color: "purple" },
+}));
+
+const permissionStatusValueEnum = computed<
+  Record<string, { text: string; status?: string; color?: string }>
+>(() => ({
+  active: { text: $t("user.active"), status: "success" },
+  inactive: { text: $t("user.inactive"), status: "default" },
+}));
+
+const permissionVisibleValueEnum = computed<
+  Record<string, { text: string; status?: string; color?: string }>
+>(() => ({
+  true: { text: $t("permission.show"), color: "blue" },
+  false: { text: $t("permission.hide"), color: "default" },
+}));
+
+const columns = computed((): ProTableColumn[] => [
+  {
+    title: $t("common.search"),
+    dataIndex: "keyword",
+    search: true,
+    searchType: "input",
+    hideInTable: true,
+  },
+  {
+    title: $t("permission.name"),
+    dataIndex: "name",
+    width: 220,
+  },
+  {
+    title: $t("permission.code"),
+    dataIndex: "code",
+    width: 220,
+  },
+  {
+    title: $t("permission.type"),
+    dataIndex: "type",
+    search: true,
+    searchType: "select",
+    searchOptions: permissionTypeOptions.value,
+    width: 120,
+    valueType: "tag",
+    valueEnum: permissionTypeValueEnum.value,
+  },
+  {
+    title: $t("permission.routePath"),
+    dataIndex: "path",
+    width: 170,
+  },
+  {
+    title: $t("permission.componentPath"),
+    dataIndex: "component",
+    width: 220,
+  },
+  {
+    title: $t("common.status"),
+    dataIndex: "status",
+    search: true,
+    searchType: "select",
+    searchOptions: statusOptions.value,
+    width: 120,
+    valueType: "badge",
+    valueEnum: permissionStatusValueEnum.value,
+  },
+  {
+    title: $t("permission.visible"),
+    dataIndex: "visible",
+    width: 100,
+    valueType: "tag",
+    valueEnum: permissionVisibleValueEnum.value,
+  },
+  {
+    title: $t("permission.sort"),
+    dataIndex: "sort",
+    width: 90,
+  },
+  {
+    title: $t("common.actions"),
+    dataIndex: "action",
+    width: 220,
+    fixed: "right",
+    actions: [
+      {
+        label: $t("permission.addChild"),
+        icon: PlusOutlined,
+        hidden: (record) => (record as unknown as Permission).type !== "menu",
+        onClick: (record) => handleCreateChild(record as unknown as Permission),
+      },
+      {
+        label: $t("common.edit"),
+        icon: EditOutlined,
+        onClick: (record) => handleEdit(record as unknown as Permission),
+      },
+      {
+        label: $t("common.delete"),
+        icon: DeleteOutlined,
+        danger: true,
+        confirm: $t("permission.confirmDelete"),
+        onClick: (record) => handleDelete(record as unknown as Permission),
+      },
+    ],
+  },
+]);
+
+const formItems = computed<ProFormItem[]>(() => [
+  {
+    name: "name",
+    label: $t("permission.name"),
+    type: "input",
+    required: true,
+  },
+  {
+    name: "code",
+    label: $t("permission.code"),
+    type: "input",
+    required: true,
+    props: {
+      disabled: Boolean(editingPermissionId.value),
+    },
+    rules: [
+      { required: true, message: $t("permission.codeRequired") },
+      { pattern: /^[a-zA-Z0-9_.-]+$/, message: $t("permission.codePattern") },
+    ],
+  },
+  {
+    name: "type",
+    label: $t("permission.type"),
+    type: "select",
+    options: permissionTypeOptions.value,
+    required: true,
+  },
+  {
+    name: "status",
+    label: $t("common.status"),
+    type: "radio",
+    options: statusOptions.value,
+  },
+  {
+    name: "path",
+    label: $t("permission.routePath"),
+    type: "input",
+    hidden: currentType.value !== "menu",
+    rules: [
+      {
+        validator: (_rule: unknown, value: unknown) => {
+          if (currentType.value === "menu" && !String(value || "").trim()) {
+            return Promise.reject(
+              new Error($t("permission.menuRouteRequired")),
+            );
+          }
+          return Promise.resolve();
+        },
+      },
+    ],
+  },
+  {
+    name: "component",
+    label: $t("permission.componentPath"),
+    type: "input",
+    hidden: currentType.value !== "menu",
+  },
+  {
+    name: "icon",
+    label: $t("permission.icon"),
+    type: "input",
+    hidden: currentType.value !== "menu",
+    placeholder: $t("permission.iconPlaceholder"),
+  },
+  {
+    name: "sort",
+    label: $t("permission.sort"),
+    type: "number",
+    hidden: currentType.value !== "menu",
+    props: {
+      min: 0,
+    },
+  },
+  {
+    name: "resource",
+    label: $t("permission.resource"),
+    type: "input",
+  },
+  {
+    name: "action",
+    label: $t("permission.action"),
+    type: "input",
+  },
+  {
+    name: "description",
+    label: $t("role.description"),
+    type: "textarea",
+    colSpan: 2,
+    props: {
+      rows: 3,
+    },
+  },
+  {
+    name: "visible",
+    label: $t("permission.visibleStatus"),
+    type: "switch",
+    colSpan: 2,
+    valuePropName: "checked",
+    props: {
+      checkedChildren: $t("permission.show"),
+      unCheckedChildren: $t("permission.hide"),
+    },
+  },
+]);
+
+function createDefaultFormValues(): PermissionFormValues {
+  return {
+    name: "",
+    code: "",
+    type: "menu",
+    description: "",
+    parentId: undefined,
+    path: "",
+    component: "",
+    icon: "",
+    sort: 0,
+    status: "active",
+    visible: true,
+    resource: "",
+    action: "view",
+  };
+}
+
+function normalizePath(path: string) {
+  if (!path) {
+    return "";
+  }
+  return path.startsWith("/") ? path : `/${path}`;
+}
+
+function collectPermissionIds(list: Permission[]): string[] {
+  const ids: string[] = [];
+  list.forEach((item) => {
+    ids.push(item.id);
+    if (item.children && item.children.length > 0) {
+      ids.push(...collectPermissionIds(item.children));
+    }
+  });
+  return ids;
+}
+
+function findPermissionName(list: Permission[], id: string): string {
+  for (const item of list) {
+    if (item.id === id) {
+      return item.name;
+    }
+    if (item.children && item.children.length > 0) {
+      const childName = findPermissionName(item.children, id);
+      if (childName) {
+        return childName;
+      }
+    }
+  }
+  return "";
+}
+
+const fetchTableData = async (params: Record<string, unknown>) => {
+  const keyword = typeof params.keyword === "string" ? params.keyword.trim() : undefined;
+  const response = await getPermissionList({
+    keyword: keyword || undefined,
+    type: params.type || undefined,
+    status: params.status || undefined,
+  });
+
+  menuTree.value = response.data;
+  const allIds = collectPermissionIds(menuTree.value);
+
+  if (keepExpandAll.value) {
+    expandedRowKeys.value = allIds;
+  } else {
+    expandedRowKeys.value = expandedRowKeys.value.filter((id) =>
+      allIds.includes(String(id)),
+    );
+  }
+
+  return {
+    data: response.data,
+    total: allIds.length,
+    success: true,
+  };
+};
+
+const refreshTable = () => {
+  tableRef.value?.refresh();
+};
+
+const handleExpandedRowsChange = (keys: string[]) => {
+  expandedRowKeys.value = keys;
+  const allIds = collectPermissionIds(menuTree.value);
+  keepExpandAll.value = keys.length === allIds.length;
+};
+
+const expandAllRows = () => {
+  expandedRowKeys.value = collectPermissionIds(menuTree.value);
+  keepExpandAll.value = true;
+};
+
+const collapseAllRows = () => {
+  expandedRowKeys.value = [];
+  keepExpandAll.value = false;
+};
+
+const handleCreateRoot = () => {
+  modalMode.value = "create";
+  editingPermissionId.value = null;
+  const initialValues = createDefaultFormValues();
+  formData.value = initialValues;
+  formValues.value = initialValues;
+  modalVisible.value = true;
+};
+
+const handleCreateChild = (record: Permission) => {
+  modalMode.value = "create";
+  editingPermissionId.value = null;
+  const initialValues = {
+    ...createDefaultFormValues(),
+    parentId: record.id,
+    type: "menu" as const,
+    resource: record.path || "",
+    action: "view",
+  };
+  formData.value = initialValues;
+  formValues.value = initialValues;
+  modalVisible.value = true;
+};
+
+const handleEdit = (record: Permission) => {
+  modalMode.value = "edit";
+  editingPermissionId.value = record.id;
+  const initialValues: PermissionFormValues = {
+    name: record.name,
+    code: record.code,
+    type: record.type,
+    description: record.description || "",
+    parentId: record.parentId,
+    path: record.path || "",
+    component: record.component || "",
+    icon: record.icon || "",
+    sort: record.sort ?? 0,
+    status: record.status || "active",
+    visible: record.visible !== false,
+    resource: record.resource || "",
+    action: record.action || (record.type === "menu" ? "view" : "*"),
+  };
+  formData.value = initialValues;
+  formValues.value = initialValues;
+  modalVisible.value = true;
+};
+
+const handleCancel = () => {
+  modalVisible.value = false;
+  editingPermissionId.value = null;
+  const initialValues = createDefaultFormValues();
+  formData.value = initialValues;
+  formValues.value = initialValues;
+};
+
+const handleDelete = async (record: Permission) => {
+  Modal.confirm({
+    title: $t("permission.deletePermission"),
+    content: $t("permission.confirmDelete"),
+    onOk: async () => {
+      await deletePermission(record.id);
+      message.success($t("common.success"));
+      refreshTable();
+    },
+  });
+};
+
+const handleFormValuesChange = (values: Record<string, unknown>) => {
+  formValues.value = {
+    ...formValues.value,
+    ...values,
+  };
+};
+
+const handleSubmit = async () => {
+  const valid = await formRef.value?.validate();
+  if (!valid) {
+    return;
+  }
+
+  const values = formRef.value?.getFieldsValue();
+  if (!values) return;
+
+  const payload: Partial<Permission> = {
+    name: values.name?.trim(),
+    code: values.code?.trim(),
+    type: values.type,
+    description: values.description?.trim(),
+    parentId: values.parentId,
+    status: values.status,
+    visible: values.visible,
+    sort: Number(values.sort ?? 0),
+    path:
+      values.type === "menu" ? normalizePath(values.path?.trim()) : undefined,
+    component:
+      values.type === "menu"
+        ? values.component?.trim() || undefined
+        : undefined,
+    icon: values.type === "menu" ? values.icon?.trim() || undefined : undefined,
+    resource:
+      values.resource?.trim() ||
+      normalizePath(values.path?.trim()) ||
+      values.code?.trim(),
+    action: values.action?.trim() || (values.type === "menu" ? "view" : "*"),
+  };
+
+  submitting.value = true;
+  try {
+    if (modalMode.value === "edit" && editingPermissionId.value) {
+      await updatePermission(editingPermissionId.value, payload);
+      message.success($t("permission.updateSuccess"));
+    } else {
+      await createPermission(payload);
+      message.success($t("permission.createSuccess"));
+    }
+    modalVisible.value = false;
+    editingPermissionId.value = null;
+    const initialValues = createDefaultFormValues();
+    formData.value = initialValues;
+    formValues.value = initialValues;
+    refreshTable();
+  } finally {
+    submitting.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.create-permission-btn {
+  box-shadow: 0 4px 14px rgba(24, 119, 255, 0.3);
+  border: none;
+
+  &:hover {
+    box-shadow: 0 8px 18px rgba(24, 119, 255, 0.36);
+    transform: translateY(-1px);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/system/role/index.vue b/antdv-next-admin/src/views/system/role/index.vue
new file mode 100644
index 0000000..2d85bf2
--- /dev/null
+++ b/antdv-next-admin/src/views/system/role/index.vue
@@ -0,0 +1,356 @@
+<template>
+  <div class="page-container">
+    <ProTable
+      ref="tableRef"
+      :columns="columns"
+      :request="fetchTableData"
+      :toolbar="toolbarConfig"
+      :search="{
+        labelWidth: 6,
+        defaultCollapsed: true,
+      }"
+      row-key="id"
+    >
+      <template #toolbar-actions>
+        <a-button type="primary" class="create-role-btn" @click="handleCreate">
+          <PlusOutlined /> {{ $t("role.createRole") }}
+        </a-button>
+      </template>
+    </ProTable>
+
+    <a-modal
+      v-model:open="modalVisible"
+      :title="editingRoleId ? $t('role.editRole') : $t('role.createRole')"
+      :confirm-loading="submitting"
+      width="820px"
+      @ok="handleSubmit"
+      @cancel="handleCancel"
+    >
+      <ProForm
+        ref="formRef"
+        :form-items="formItems"
+        :initial-values="formData"
+        :grid="{ cols: 2, gutter: 16 }"
+        :layout="{ layout: 'vertical' }"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Permission, Role } from "@/types/auth";
+import type { ProFormItem, ProTableColumn } from "@/types/pro";
+
+import { PlusOutlined, EditOutlined, DeleteOutlined } from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import { computed, onMounted, ref } from "vue";
+
+import { getPermissionTree } from "@/api/permission";
+import { createRole, deleteRole, getRoleList, updateRole } from "@/api/role";
+import ProForm from "@/components/Pro/ProForm/index.vue";
+import ProTable from "@/components/Pro/ProTable/index.vue";
+import { $t } from "@/locales";
+
+type RoleFormValues = {
+  name: string;
+  code: string;
+  description: string;
+  permissionIds: string[];
+};
+
+type PermissionOption = {
+  label: string;
+  value: string;
+  children?: PermissionOption[];
+};
+
+const tableRef = ref<{
+  refresh: () => void;
+  reload: () => void;
+} | null>(null);
+const formRef = ref<{
+  validate: () => Promise<boolean>;
+  getFieldsValue: () => RoleFormValues;
+} | null>(null);
+
+const modalVisible = ref(false);
+const submitting = ref(false);
+const editingRoleId = ref<string | null>(null);
+const permissionTree = ref<Permission[]>([]);
+const formData = ref<RoleFormValues>(createDefaultFormValues());
+
+const toolbarConfig = computed(() => ({
+  title: $t("role.title"),
+  subTitle: "ProTable + ProForm",
+  actions: ["refresh", "density", "columnSetting"] as Array<
+    "refresh" | "density" | "columnSetting"
+  >,
+}));
+
+const permissionOptions = computed<PermissionOption[]>(() => {
+  const buildOptions = (nodes: Permission[]): PermissionOption[] => {
+    return nodes.map((node) => ({
+      label: `${node.name} (${node.code})`,
+      value: node.id,
+      children:
+        node.children && node.children.length > 0
+          ? buildOptions(node.children)
+          : undefined,
+    }));
+  };
+  return buildOptions(permissionTree.value);
+});
+
+const permissionMap = computed(() => {
+  const map = new Map<string, Permission>();
+  const traverse = (nodes: Permission[]) => {
+    nodes.forEach((node) => {
+      map.set(node.id, {
+        ...node,
+        children: node.children ? [...node.children] : undefined,
+      });
+      if (node.children && node.children.length > 0) {
+        traverse(node.children);
+      }
+    });
+  };
+  traverse(permissionTree.value);
+  return map;
+});
+
+const columns = computed<ProTableColumn[]>(() => [
+  {
+    title: $t("role.name"),
+    dataIndex: "name",
+    search: true,
+    searchType: "input",
+    width: 200,
+  },
+  {
+    title: $t("role.code"),
+    dataIndex: "code",
+    search: true,
+    searchType: "input",
+    width: 200,
+  },
+  {
+    title: $t("role.description"),
+    dataIndex: "description",
+  },
+  {
+    title: $t("role.permissions"),
+    dataIndex: "permissionCount",
+    width: 120,
+  },
+  {
+    title: $t("common.updateTime"),
+    dataIndex: "updatedAt",
+    width: 200,
+    valueType: "dateTime",
+  },
+  {
+    title: $t("common.actions"),
+    dataIndex: "action",
+    width: 160,
+    fixed: "right",
+    actions: [
+      {
+        label: $t("common.edit"),
+        icon: EditOutlined,
+        onClick: (record) => handleEdit(record as unknown as Role),
+      },
+      {
+        label: $t("common.delete"),
+        icon: DeleteOutlined,
+        danger: true,
+        confirm: $t("role.confirmDelete"),
+        onClick: (record) => handleDelete(record as unknown as Role),
+      },
+    ],
+  },
+]);
+
+const formItems = computed<ProFormItem[]>(() => [
+  {
+    name: "name",
+    label: $t("role.name"),
+    type: "input",
+    required: true,
+  },
+  {
+    name: "code",
+    label: $t("role.code"),
+    type: "input",
+    required: true,
+    props: {
+      disabled: Boolean(editingRoleId.value),
+    },
+    rules: [
+      { required: true, message: $t("role.codeRequired") },
+      { pattern: /^[a-zA-Z0-9_.-]+$/, message: $t("role.codePattern") },
+    ],
+  },
+  {
+    name: "description",
+    label: $t("role.description"),
+    type: "textarea",
+    colSpan: 2,
+    props: {
+      rows: 3,
+    },
+  },
+  {
+    name: "permissionIds",
+    label: $t("role.permissions"),
+    type: "treeSelect",
+    colSpan: 2,
+    options: permissionOptions.value,
+    props: {
+      treeCheckable: true,
+      allowClear: true,
+      treeDefaultExpandAll: true,
+      showCheckedStrategy: "SHOW_PARENT",
+      maxTagCount: 2,
+    },
+    rules: [
+      { type: "array", required: true, message: $t("role.selectPermissions") },
+    ],
+  },
+]);
+
+function createDefaultFormValues(): RoleFormValues {
+  return {
+    name: "",
+    code: "",
+    description: "",
+    permissionIds: [],
+  };
+}
+
+const fetchPermissionTreeData = async () => {
+  const response = await getPermissionTree();
+  permissionTree.value = response.data;
+};
+
+const fetchTableData = async (params: Record<string, unknown>) => {
+  const response = await getRoleList({
+    current: Number(params.current || 1),
+    pageSize: Number(params.pageSize || 10),
+    name: (params.name as string)?.trim() || undefined,
+    code: (params.code as string)?.trim() || undefined,
+  });
+
+  const list = response.data.list.map((item) => ({
+    ...item,
+    permissionCount: item.permissions?.length || 0,
+  }));
+
+  return {
+    data: list,
+    total: response.data.total,
+    success: true,
+  };
+};
+
+const refreshTable = () => {
+  tableRef.value?.refresh();
+};
+
+const reloadTable = () => {
+  tableRef.value?.reload();
+};
+
+const handleCreate = () => {
+  editingRoleId.value = null;
+  formData.value = createDefaultFormValues();
+  modalVisible.value = true;
+};
+
+const handleEdit = (record: Role) => {
+  editingRoleId.value = record.id;
+  formData.value = {
+    name: record.name,
+    code: record.code,
+    description: record.description || "",
+    permissionIds: (record.permissions || []).map(
+      (permission) => permission.id,
+    ),
+  };
+  modalVisible.value = true;
+};
+
+const handleCancel = () => {
+  modalVisible.value = false;
+  editingRoleId.value = null;
+  formData.value = createDefaultFormValues();
+};
+
+const handleDelete = async (record: Role) => {
+  Modal.confirm({
+    title: $t("role.deleteRole"),
+    content: $t("role.confirmDelete"),
+    onOk: async () => {
+      await deleteRole(record.id);
+      message.success($t("common.success"));
+      refreshTable();
+    },
+  });
+};
+
+const handleSubmit = async () => {
+  const valid = await formRef.value?.validate();
+  if (!valid) {
+    return;
+  }
+
+  const values = formRef.value?.getFieldsValue();
+  if (!values) return;
+
+  const permissionIds: string[] = values.permissionIds || [];
+
+  const selectedPermissions = permissionIds
+    .map((id) => permissionMap.value.get(id))
+    .filter((permission): permission is Permission => Boolean(permission));
+
+  const payload: Partial<Role> = {
+    name: values.name?.trim(),
+    code: values.code?.trim(),
+    description: values.description?.trim(),
+    permissions: selectedPermissions,
+  };
+
+  submitting.value = true;
+  try {
+    if (editingRoleId.value) {
+      await updateRole(editingRoleId.value, payload);
+      message.success($t("role.updateSuccess"));
+      refreshTable();
+    } else {
+      await createRole(payload);
+      message.success($t("role.createSuccess"));
+      reloadTable();
+    }
+    modalVisible.value = false;
+    editingRoleId.value = null;
+    formData.value = createDefaultFormValues();
+  } finally {
+    submitting.value = false;
+  }
+};
+
+onMounted(async () => {
+  await fetchPermissionTreeData();
+});
+</script>
+
+<style scoped lang="scss">
+.create-role-btn {
+  box-shadow: 0 4px 14px rgba(24, 119, 255, 0.3);
+  border: none;
+
+  &:hover {
+    box-shadow: 0 8px 18px rgba(24, 119, 255, 0.36);
+    transform: translateY(-1px);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/views/system/user/index.vue b/antdv-next-admin/src/views/system/user/index.vue
new file mode 100644
index 0000000..ca8630f
--- /dev/null
+++ b/antdv-next-admin/src/views/system/user/index.vue
@@ -0,0 +1,532 @@
+<template>
+  <div class="page-container">
+    <ProTable
+      ref="tableRef"
+      :columns="columns"
+      :request="fetchTableData"
+      :toolbar="toolbarConfig"
+      :search="{
+        labelWidth: 6,
+        defaultCollapsed: true,
+      }"
+      row-key="id"
+    >
+      <template #toolbar-actions>
+        <a-space>
+          <a-upload
+            :show-upload-list="false"
+            accept=".csv"
+            :before-upload="handleImport"
+          >
+            <a-button> <UploadOutlined /> {{ $t("common.import") }} </a-button>
+          </a-upload>
+          <a-button @click="handleExport">
+            <DownloadOutlined /> {{ $t("common.export") }}
+          </a-button>
+          <a-button
+            type="primary"
+            class="create-user-btn"
+            @click="handleCreate"
+          >
+            <PlusOutlined /> {{ $t("user.createUser") }}
+          </a-button>
+        </a-space>
+      </template>
+    </ProTable>
+
+    <a-modal
+      v-model:open="modalVisible"
+      :title="editingUserId ? $t('user.editUser') : $t('user.createUser')"
+      :confirm-loading="submitting"
+      width="760px"
+      @ok="handleSubmit"
+      @cancel="handleCancel"
+    >
+      <ProForm
+        ref="formRef"
+        :form-items="formItems"
+        :initial-values="formData"
+        :grid="{ cols: 2, gutter: 16 }"
+        :layout="{ layout: 'vertical' }"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Role, User } from "@/types/auth";
+import type { ProFormItem, ProTableColumn } from "@/types/pro";
+
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  UploadOutlined,
+  DownloadOutlined,
+} from "@antdv-next/icons";
+import { message, Modal } from "antdv-next";
+import { computed, onMounted, ref } from "vue";
+
+import { getRoleList } from "@/api/role";
+import { createUser, deleteUser, getUserList, updateUser } from "@/api/user";
+import ProForm from "@/components/Pro/ProForm/index.vue";
+import ProTable from "@/components/Pro/ProTable/index.vue";
+import { $t } from "@/locales";
+import { exportToCSV, parseCSV } from "@/utils/export";
+
+type UserFormValues = {
+  username: string;
+  realName: string;
+  email: string;
+  phone: string;
+  gender: "male" | "female";
+  status: "active" | "inactive";
+  roleIds: string[];
+  bio: string;
+};
+
+const tableRef = ref<{
+  refresh: () => void;
+  reload: () => void;
+} | null>(null);
+const formRef = ref<{
+  validate: () => Promise<boolean>;
+  getFieldsValue: () => UserFormValues;
+} | null>(null);
+
+const modalVisible = ref(false);
+const submitting = ref(false);
+const editingUserId = ref<string | null>(null);
+const roleOptions = ref<Role[]>([]);
+const formData = ref<UserFormValues>(createDefaultFormValues());
+
+const toolbarConfig = computed(() => ({
+  title: $t("user.title"),
+  subTitle: "ProTable + ProForm",
+  actions: ["refresh", "density", "columnSetting"] as Array<
+    "refresh" | "density" | "columnSetting"
+  >,
+}));
+
+const statusOptions = computed(() => [
+  { label: $t("user.active"), value: "active" },
+  { label: $t("user.inactive"), value: "inactive" },
+]);
+
+const genderOptions = computed(() => [
+  { label: $t("user.male"), value: "male" },
+  { label: $t("user.female"), value: "female" },
+]);
+
+const roleSelectOptions = computed(() => {
+  return roleOptions.value.map((role) => ({
+    label: role.name,
+    value: role.id,
+  }));
+});
+
+const genderValueEnum = computed<
+  Record<string, { text: string; status?: string; color?: string }>
+>(() => ({
+  male: { text: $t("user.male"), color: "blue" },
+  female: { text: $t("user.female"), color: "magenta" },
+}));
+
+const statusValueEnum = computed<
+  Record<string, { text: string; status?: string; color?: string }>
+>(() => ({
+  active: { text: $t("user.active"), status: "success" },
+  inactive: { text: $t("user.inactive"), status: "default" },
+}));
+
+const columns = computed((): ProTableColumn[] => [
+  {
+    title: $t("user.username"),
+    dataIndex: "username",
+    search: true,
+    searchType: "input",
+    width: 150,
+    fixed: "left",
+  },
+  {
+    title: $t("user.realName"),
+    dataIndex: "realName",
+    width: 140,
+  },
+  {
+    title: $t("user.email"),
+    dataIndex: "email",
+    search: true,
+    searchType: "input",
+    width: 220,
+  },
+  {
+    title: $t("user.phone"),
+    dataIndex: "phone",
+    width: 150,
+  },
+  {
+    title: $t("user.role"),
+    dataIndex: "roleNames",
+    width: 220,
+  },
+  {
+    title: $t("user.gender"),
+    dataIndex: "gender",
+    width: 100,
+    valueType: "tag",
+    valueEnum: genderValueEnum.value,
+  },
+  {
+    title: $t("user.status"),
+    dataIndex: "status",
+    search: true,
+    searchType: "select",
+    searchOptions: statusOptions.value,
+    width: 120,
+    valueType: "badge",
+    valueEnum: statusValueEnum.value,
+  },
+  {
+    title: $t("common.createTime"),
+    dataIndex: "createdAt",
+    width: 200,
+    valueType: "dateTime",
+  },
+  {
+    title: $t("common.actions"),
+    dataIndex: "action",
+    width: 160,
+    fixed: "right",
+    actions: [
+      {
+        label: $t("common.edit"),
+        icon: EditOutlined,
+        onClick: (record) => handleEdit(record as unknown as User),
+      },
+      {
+        label: $t("common.delete"),
+        icon: DeleteOutlined,
+        danger: true,
+        confirm: $t("user.confirmDelete"),
+        onClick: (record) => handleDelete(record as unknown as User),
+      },
+    ],
+  },
+]);
+
+const formItems = computed<ProFormItem[]>(() => [
+  {
+    name: "username",
+    label: $t("user.username"),
+    type: "input",
+    required: true,
+    props: {
+      disabled: Boolean(editingUserId.value),
+    },
+    rules: [
+      { required: true, message: $t("user.usernameRequired") },
+      { min: 3, max: 20, message: $t("user.usernameLength") },
+    ],
+  },
+  {
+    name: "realName",
+    label: $t("user.realName"),
+    type: "input",
+    required: true,
+  },
+  {
+    name: "email",
+    label: $t("user.email"),
+    type: "input",
+    required: true,
+    rules: [
+      { required: true, message: $t("user.emailRequired") },
+      { type: "email", message: $t("validation.email") },
+    ],
+  },
+  {
+    name: "phone",
+    label: $t("user.phone"),
+    type: "input",
+    rules: [{ pattern: /^1[3-9]\d{9}$/, message: $t("validation.phone") }],
+  },
+  {
+    name: "gender",
+    label: $t("user.gender"),
+    type: "radio",
+    options: genderOptions.value,
+  },
+  {
+    name: "status",
+    label: $t("user.status"),
+    type: "radio",
+    options: statusOptions.value,
+    required: true,
+  },
+  {
+    name: "roleIds",
+    label: $t("user.role"),
+    type: "select",
+    options: roleSelectOptions.value,
+    props: {
+      mode: "multiple",
+      allowClear: true,
+    },
+    rules: [{ type: "array", required: true, message: $t("user.selectRole") }],
+  },
+  {
+    name: "bio",
+    label: $t("user.bio"),
+    type: "textarea",
+    colSpan: 2,
+    props: {
+      rows: 3,
+      maxLength: 200,
+      showCount: true,
+    },
+  },
+]);
+
+function createDefaultFormValues(): UserFormValues {
+  return {
+    username: "",
+    realName: "",
+    email: "",
+    phone: "",
+    gender: "male",
+    status: "active",
+    roleIds: [],
+    bio: "",
+  };
+}
+
+const formatRoleNames = (roles: Role[]) => {
+  if (!roles || roles.length === 0) {
+    return "-";
+  }
+  return roles.map((role) => role.name).join(", ");
+};
+
+const fetchTableData = async (params: Record<string, unknown>) => {
+  const response = await getUserList({
+    current: Number(params.current || 1),
+    pageSize: Number(params.pageSize || 10),
+    username: (params.username as string)?.trim() || undefined,
+    email: (params.email as string)?.trim() || undefined,
+    status: params.status as string,
+  });
+
+  const list = response.data.list.map((item) => ({
+    ...item,
+    roleNames: formatRoleNames(item.roles),
+  }));
+
+  return {
+    data: list,
+    total: response.data.total,
+    success: true,
+  };
+};
+
+const fetchRoleOptions = async () => {
+  const response = await getRoleList({ current: 1, pageSize: 200 });
+  roleOptions.value = response.data.list;
+};
+
+const refreshTable = () => {
+  tableRef.value?.refresh();
+};
+
+const reloadTable = () => {
+  tableRef.value?.reload();
+};
+
+const handleCreate = () => {
+  editingUserId.value = null;
+  formData.value = createDefaultFormValues();
+  modalVisible.value = true;
+};
+
+const handleEdit = (record: User) => {
+  editingUserId.value = record.id;
+  formData.value = {
+    username: record.username,
+    realName: record.realName,
+    email: record.email,
+    phone: record.phone,
+    gender: record.gender || "male",
+    status: record.status || "active",
+    roleIds: (record.roles || []).map((role) => role.id),
+    bio: record.bio || "",
+  };
+  modalVisible.value = true;
+};
+
+const handleCancel = () => {
+  modalVisible.value = false;
+  editingUserId.value = null;
+  formData.value = createDefaultFormValues();
+};
+
+const handleDelete = async (record: User) => {
+  Modal.confirm({
+    title: $t("user.deleteUser"),
+    content: $t("user.confirmDelete"),
+    onOk: async () => {
+      await deleteUser(record.id);
+      message.success($t("common.success"));
+      refreshTable();
+    },
+  });
+};
+
+const handleSubmit = async () => {
+  const valid = await formRef.value?.validate();
+  if (!valid) {
+    return;
+  }
+
+  const values = formRef.value?.getFieldsValue();
+  if (!values) return;
+
+  const selectedRoles = roleOptions.value.filter((role) =>
+    values.roleIds?.includes(role.id),
+  );
+
+  const payload: Partial<User> = {
+    username: values.username?.trim(),
+    realName: values.realName?.trim(),
+    email: values.email?.trim(),
+    phone: values.phone?.trim(),
+    gender: values.gender,
+    status: values.status,
+    bio: values.bio?.trim(),
+    roles: selectedRoles,
+  };
+
+  submitting.value = true;
+  try {
+    if (editingUserId.value) {
+      await updateUser(editingUserId.value, payload);
+      message.success($t("user.updateSuccess"));
+      refreshTable();
+    } else {
+      await createUser(payload);
+      message.success($t("user.createSuccess"));
+      reloadTable();
+    }
+    modalVisible.value = false;
+    editingUserId.value = null;
+    formData.value = createDefaultFormValues();
+  } finally {
+    submitting.value = false;
+  }
+};
+
+onMounted(async () => {
+  await fetchRoleOptions();
+});
+
+// export user data
+const handleExport = async () => {
+  try {
+    const response = await getUserList({ current: 1, pageSize: 9999 });
+    const list = response.data.list;
+    exportToCSV(
+      [
+        { title: $t("user.username"), dataIndex: "username" },
+        { title: $t("user.realName"), dataIndex: "realName" },
+        { title: $t("user.email"), dataIndex: "email" },
+        { title: $t("user.phone"), dataIndex: "phone" },
+        {
+          title: $t("user.gender"),
+          dataIndex: "gender",
+          render: (v: unknown) =>
+            v === "male" ? $t("user.male") : $t("user.female"),
+        },
+        {
+          title: $t("user.status"),
+          dataIndex: "status",
+          render: (v: unknown) =>
+            v === "active" ? $t("user.active") : $t("user.inactive"),
+        },
+        {
+          title: $t("user.role"),
+          dataIndex: "roles",
+          render: (_: unknown, r: unknown) =>
+            (((r as Record<string, unknown>).roles as Array<{ name: string }>) || [])
+              .map((role) => role.name)
+              .join(", "),
+        },
+        { title: $t("common.createTime"), dataIndex: "createdAt" },
+      ],
+      list,
+      `${$t("user.title")}_${new Date().toISOString().slice(0, 10)}`,
+    );
+    message.success($t("user.exportSuccess"));
+  } catch {
+    message.error($t("user.exportFailed"));
+  }
+};
+
+// import user data
+const handleImport = async (file: File) => {
+  try {
+    const rows = await parseCSV(file);
+    if (rows.length < 2) {
+      message.warning($t("user.importEmpty"));
+      return false;
+    }
+    const header = rows[0];
+    const usernameIdx = header.findIndex(
+      (h) => h.includes("Username") || h.includes("username"),
+    );
+    const realNameIdx = header.findIndex(
+      (h) => h.includes("Name") || h.includes("name"),
+    );
+    const emailIdx = header.findIndex(
+      (h) => h.includes("Email") || h.includes("email"),
+    );
+
+    if (usernameIdx === -1 || realNameIdx === -1 || emailIdx === -1) {
+      message.error($t("user.importFormatError"));
+      return false;
+    }
+
+    let successCount = 0;
+    for (let i = 1; i < rows.length; i++) {
+      const row = rows[i];
+      if (!row[usernameIdx]) continue;
+      try {
+        await createUser({
+          username: row[usernameIdx],
+          realName: row[realNameIdx] || "",
+          email: row[emailIdx] || "",
+          status: "active",
+        });
+        successCount++;
+      } catch {
+        /* skip duplicates */
+      }
+    }
+    message.success($t("user.importSuccess", { count: successCount }));
+    refreshTable();
+  } catch {
+    message.error($t("user.importFailed"));
+  }
+  return false;
+};
+</script>
+
+<style scoped lang="scss">
+.create-user-btn {
+  box-shadow: 0 4px 14px rgba(24, 119, 255, 0.3);
+  border: none;
+
+  &:hover {
+    box-shadow: 0 8px 18px rgba(24, 119, 255, 0.36);
+    transform: translateY(-1px);
+  }
+}
+</style>
diff --git a/antdv-next-admin/src/vite-env.d.ts b/antdv-next-admin/src/vite-env.d.ts
new file mode 100644
index 0000000..f2905d9
--- /dev/null
+++ b/antdv-next-admin/src/vite-env.d.ts
@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string;
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, unknown>;
+  export default component;
+}
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string;
+  readonly VITE_API_BASE_URL: string;
+  readonly VITE_USE_MOCK: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/antdv-next-admin/tests/e2e/login-and-filter.spec.ts b/antdv-next-admin/tests/e2e/login-and-filter.spec.ts
new file mode 100644
index 0000000..d6289c6
--- /dev/null
+++ b/antdv-next-admin/tests/e2e/login-and-filter.spec.ts
@@ -0,0 +1,23 @@
+/**
+ * E2E test template for login + table filtering.
+ *
+ * Note:
+ * - This repository currently does not install Playwright dependencies.
+ * - Keep this file as a starter for future test setup.
+ */
+import { test, expect } from '@playwright/test'
+
+test('login and filter users', async ({ page }) => {
+  await page.goto('/login')
+
+  await page.getByPlaceholder('请输入用户名').fill('admin')
+  await page.getByPlaceholder('请输入密码').fill('123456')
+  await page.getByRole('button', { name: '登录' }).click()
+
+  await page.goto('/examples/table')
+  await page.getByRole('columnheader', { name: '用户名' }).click()
+  await page.getByPlaceholder(/搜索/).fill('admin')
+  await page.getByRole('button', { name: '搜索' }).click()
+
+  await expect(page.locator('table')).toContainText('admin')
+})
diff --git a/antdv-next-admin/tests/unit/keyword-search.spec.ts b/antdv-next-admin/tests/unit/keyword-search.spec.ts
new file mode 100644
index 0000000..ee1ab32
--- /dev/null
+++ b/antdv-next-admin/tests/unit/keyword-search.spec.ts
@@ -0,0 +1,36 @@
+/**
+ * Unit test template for keyword matching logic.
+ *
+ * Note:
+ * - This repository currently does not install vitest dependencies.
+ * - Keep this file as a starter for future test setup.
+ */
+import { describe, expect, it } from 'vitest'
+
+const splitKeywords = (keyword: string) => {
+  return keyword
+    .trim()
+    .toLowerCase()
+    .split(/\s+/)
+    .filter(Boolean)
+}
+
+const includesKeywords = (text: string, keyword: string) => {
+  const keys = splitKeywords(keyword)
+  if (!keys.length) {
+    return true
+  }
+
+  const lower = text.toLowerCase()
+  return keys.every(item => lower.includes(item))
+}
+
+describe('keyword matcher', () => {
+  it('should match all keywords', () => {
+    expect(includesKeywords('John Brown', 'john bro')).toBe(true)
+  })
+
+  it('should fail when one keyword not found', () => {
+    expect(includesKeywords('John Brown', 'john alex')).toBe(false)
+  })
+})
diff --git a/antdv-next-admin/tsconfig.json b/antdv-next-admin/tsconfig.json
new file mode 100644
index 0000000..0e179d9
--- /dev/null
+++ b/antdv-next-admin/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "ignoreDeprecations": "6.0",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path Mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Vue */
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/antdv-next-admin/tsconfig.node.json b/antdv-next-admin/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/antdv-next-admin/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/antdv-next-admin/vite.config.ts b/antdv-next-admin/vite.config.ts
new file mode 100644
index 0000000..9bee973
--- /dev/null
+++ b/antdv-next-admin/vite.config.ts
@@ -0,0 +1,73 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { mockDevServerPlugin } from "vite-plugin-mock-dev-server";
+import { fileURLToPath, URL } from "node:url";
+import pkg from "./package.json";
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  base: "/",
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version),
+  },
+  plugins: [
+    vue(),
+    tailwindcss(),
+    mockDevServerPlugin({
+      prefix: "/api",
+      log: "error",
+    }),
+  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ["legacy-js-api"],
+      },
+      sass: {
+        silenceDeprecations: ["legacy-js-api"],
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  server: {
+    port: 3000,
+    open: false,
+    proxy: {},
+  },
+  build: {
+    target: "es2020",
+    outDir: "dist",
+    assetsDir: "assets",
+    sourcemap: false,
+    chunkSizeWarningLimit: 1500,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (
+            id.includes("node_modules/vue/") ||
+            id.includes("node_modules/vue-router/") ||
+            id.includes("node_modules/pinia/")
+          ) {
+            return "vue-vendor";
+          }
+          if (
+            id.includes("node_modules/antdv-next/") ||
+            id.includes("node_modules/@antdv-next/")
+          ) {
+            return "antdv-vendor";
+          }
+          if (
+            id.includes("node_modules/echarts/") ||
+            id.includes("node_modules/vue-echarts/")
+          ) {
+            return "chart-vendor";
+          }
+        },
+      },
+    },
+  },
+});