✨ feat(advertisement-management-ui-mt): 新增多租户广告管理UI包

- 创建完整的广告管理UI组件，支持CRUD操作
- 实现广告列表展示、搜索、分页功能
- 添加广告创建和编辑表单，包含标题、类型、别名、图片等字段
- 集成文件选择器和广告类型选择器组件
- 配置ESLint、TypeScript、Vitest等开发工具
- 添加完整的集成测试，覆盖CRUD流程和错误处理
- 提供API客户端管理和类型定义

packages/advertisement-management-ui-mt/eslint.config.js

@@ -0,0 +1,43 @@
+import js from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+export default [
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      parser: tsparser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      'react': reactPlugin,
+      'react-hooks': reactHooks
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tseslint.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_'
+      }],
+      '@typescript-eslint/no-explicit-any': 'warn'
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    }
+  }
+];

packages/advertisement-management-ui-mt/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@d8d/advertisement-management-ui-mt",
+  "version": "1.0.0",
+  "description": "多租户广告管理界面包 - 提供多租户环境下广告管理的完整前端界面，包括广告CRUD操作、类型管理、状态管理、图片上传等功能",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    },
+    "./components": {
+      "types": "./src/components/index.ts",
+      "import": "./src/components/index.ts",
+      "require": "./src/components/index.ts"
+    },
+    "./hooks": {
+      "types": "./src/hooks/index.ts",
+      "import": "./src/hooks/index.ts",
+      "require": "./src/hooks/index.ts"
+    },
+    "./api": {
+      "types": "./src/api/index.ts",
+      "import": "./src/api/index.ts",
+      "require": "./src/api/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@d8d/shared-types": "workspace:*",
+    "@d8d/shared-ui-components": "workspace:*",
+    "@d8d/advertisements-module-mt": "workspace:*",
+    "@d8d/file-management-ui-mt": "workspace:*",
+    "@d8d/advertisement-type-management-ui-mt": "workspace:*",
+    "@hookform/resolvers": "^5.2.1",
+    "@tanstack/react-query": "^5.90.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "hono": "^4.8.5",
+    "lucide-react": "^0.536.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.61.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "zod": "^4.0.15"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "eslint": "^9.17.0",
+    "jsdom": "^26.0.0",
+    "typescript": "^5.8.3",
+    "unbuild": "^3.4.0",
+    "vitest": "^4.0.9"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "keywords": [
+    "advertisement",
+    "management",
+    "admin",
+    "ui",
+    "react",
+    "crud",
+    "banner",
+    "multi-tenant",
+    "mt"
+  ],
+  "author": "D8D Team",
+  "license": "MIT"
+}

packages/advertisement-management-ui-mt/src/api/advertisementClient.ts

@@ -0,0 +1,44 @@
+import { advertisementRoutes } from '@d8d/advertisements-module-mt';
+import { rpcClient } from '@d8d/shared-ui-components/utils/hc'
+
+export class AdvertisementClientManager {
+  private static instance: AdvertisementClientManager;
+  private client: ReturnType<typeof rpcClient<typeof advertisementRoutes>> | null = null;
+
+  private constructor() {}
+
+  public static getInstance(): AdvertisementClientManager {
+    if (!AdvertisementClientManager.instance) {
+      AdvertisementClientManager.instance = new AdvertisementClientManager();
+    }
+    return AdvertisementClientManager.instance;
+  }
+
+  // 初始化客户端
+  public init(baseUrl: string = '/'): ReturnType<typeof rpcClient<typeof advertisementRoutes>> {
+    return this.client = rpcClient<typeof advertisementRoutes>(baseUrl);
+  }
+
+  // 获取客户端实例
+  public get(): ReturnType<typeof rpcClient<typeof advertisementRoutes>> {
+    if (!this.client) {
+      return this.init()
+    }
+    return this.client;
+  }
+
+  // 重置客户端（用于测试或重新初始化）
+  public reset(): void {
+    this.client = null;
+  }
+}
+
+// 导出单例实例
+const advertisementClientManager = AdvertisementClientManager.getInstance();
+
+// 导出默认客户端实例（延迟初始化）
+export const advertisementClient = advertisementClientManager.get()
+
+export {
+  advertisementClientManager
+}

packages/advertisement-management-ui-mt/src/api/index.ts

@@ -0,0 +1,5 @@
+export {
+  AdvertisementClientManager,
+  advertisementClientManager,
+  advertisementClient
+} from './advertisementClient';

packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx

@@ -0,0 +1,763 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { Plus, Edit, Trash2, Search } from 'lucide-react';
+import { format } from 'date-fns';
+import { Input } from '@d8d/shared-ui-components/components/ui/input';
+import { Button } from '@d8d/shared-ui-components/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@d8d/shared-ui-components/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@d8d/shared-ui-components/components/ui/table';
+import { Badge } from '@d8d/shared-ui-components/components/ui/badge';
+import { Skeleton } from '@d8d/shared-ui-components/components/ui/skeleton';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@d8d/shared-ui-components/components/ui/dialog';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@d8d/shared-ui-components/components/ui/form';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { DataTablePagination } from '@d8d/shared-ui-components/components/admin/DataTablePagination';
+import { FileSelector } from '@d8d/file-management-ui-mt';
+import { AdvertisementTypeSelector } from '@d8d/advertisement-type-management-ui-mt';
+import { advertisementClientManager } from '../api/advertisementClient';
+import { CreateAdvertisementDto, UpdateAdvertisementDto } from '@d8d/advertisements-module-mt/schemas';
+import type { AdvertisementSearchParams, CreateAdvertisementRequest, UpdateAdvertisementRequest, AdvertisementResponse } from '../types';
+
+type CreateRequest = CreateAdvertisementRequest;
+type UpdateRequest = UpdateAdvertisementRequest;
+
+const createFormSchema = CreateAdvertisementDto;
+const updateFormSchema = UpdateAdvertisementDto;
+
+export const AdvertisementManagement: React.FC = () => {
+  const [searchParams, setSearchParams] = useState<AdvertisementSearchParams>({ page: 1, limit: 10, search: '' });
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingAdvertisement, setEditingAdvertisement] = useState<AdvertisementResponse | null>(null);
+  const [isCreateForm, setIsCreateForm] = useState(true);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [advertisementToDelete, setAdvertisementToDelete] = useState<number | null>(null);
+
+  // 表单实例
+  const createForm = useForm<CreateRequest>({
+    resolver: zodResolver(createFormSchema),
+    defaultValues: {
+      title: '',
+      typeId: 1,
+      code: '',
+      url: '',
+      imageFileId: undefined,
+      sort: 0,
+      status: 1,
+      actionType: 1
+    }
+  });
+
+  const updateForm = useForm<UpdateRequest>({
+    resolver: zodResolver(updateFormSchema),
+    defaultValues: {}
+  });
+
+  // 数据查询
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['advertisements', searchParams],
+    queryFn: async () => {
+      const res = await advertisementClientManager.get().index.$get({
+        query: {
+          page: searchParams.page,
+          pageSize: searchParams.limit,
+          keyword: searchParams.search
+        }
+      });
+      if (res.status !== 200) throw new Error('获取广告列表失败');
+      return await res.json();
+    }
+  });
+
+  // 创建广告
+  const createMutation = useMutation({
+    mutationFn: async (data: CreateRequest) => {
+      const res = await advertisementClientManager.get().index.$post({ json: data });
+      if (res.status !== 201) throw new Error('创建广告失败');
+      return await res.json();
+    },
+    onSuccess: () => {
+      toast.success('广告创建成功');
+      setIsModalOpen(false);
+      createForm.reset();
+      refetch();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '创建广告失败');
+    }
+  });
+
+  // 更新广告
+  const updateMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: number; data: UpdateRequest }) => {
+      const res = await advertisementClientManager.get()[':id']['$put']({
+        param: { id },
+        json: data
+      });
+      if (res.status !== 200) throw new Error('更新广告失败');
+      return await res.json();
+    },
+    onSuccess: () => {
+      toast.success('广告更新成功');
+      setIsModalOpen(false);
+      setEditingAdvertisement(null);
+      refetch();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '更新广告失败');
+    }
+  });
+
+  // 删除广告
+  const deleteMutation = useMutation({
+    mutationFn: async (id: number) => {
+      const res = await advertisementClientManager.get()[':id']['$delete']({
+        param: { id }
+      });
+      if (res.status !== 204) throw new Error('删除广告失败');
+      return await res.json();
+    },
+    onSuccess: () => {
+      toast.success('广告删除成功');
+      setDeleteDialogOpen(false);
+      setAdvertisementToDelete(null);
+      refetch();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '删除广告失败');
+    }
+  });
+
+  // 处理搜索
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSearchParams(prev => ({ ...prev, page: 1 }));
+    refetch();
+  };
+
+  // 处理创建广告
+  const handleCreateAdvertisement = () => {
+    setIsCreateForm(true);
+    setEditingAdvertisement(null);
+    createForm.reset();
+    setIsModalOpen(true);
+  };
+
+  // 处理编辑广告
+  const handleEditAdvertisement = (advertisement: AdvertisementResponse) => {
+    setIsCreateForm(false);
+    setEditingAdvertisement(advertisement);
+    updateForm.reset({
+      title: advertisement.title || undefined,
+      typeId: advertisement.typeId || undefined,
+      code: advertisement.code || undefined,
+      url: advertisement.url || undefined,
+      imageFileId: advertisement.imageFileId || undefined,
+      sort: advertisement.sort || undefined,
+      status: advertisement.status || undefined,
+      actionType: advertisement.actionType || undefined
+    });
+    setIsModalOpen(true);
+  };
+
+  // 处理删除广告
+  const handleDeleteAdvertisement = (id: number) => {
+    setAdvertisementToDelete(id);
+    setDeleteDialogOpen(true);
+  };
+
+  // 确认删除
+  const confirmDelete = () => {
+    if (advertisementToDelete) {
+      deleteMutation.mutate(advertisementToDelete);
+    }
+  };
+
+  // 处理创建表单提交
+  const handleCreateSubmit = async (data: CreateRequest) => {
+    try {
+      await createMutation.mutateAsync(data);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  // 处理编辑表单提交
+  const handleUpdateSubmit = async (data: UpdateRequest) => {
+    if (!editingAdvertisement) return;
+
+    try {
+      await updateMutation.mutateAsync({
+        id: editingAdvertisement.id,
+        data
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h1 className="text-2xl font-bold">广告管理</h1>
+        <Button onClick={handleCreateAdvertisement}>
+          <Plus className="mr-2 h-4 w-4" />
+          创建广告
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>广告列表</CardTitle>
+          <CardDescription>管理网站的所有广告内容</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="mb-4">
+            <form onSubmit={handleSearch} className="flex gap-2">
+              <div className="relative flex-1 max-w-sm">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="搜索广告标题或别名..."
+                  value={searchParams.search}
+                  onChange={(e) => setSearchParams(prev => ({ ...prev, search: e.target.value }))}
+                  className="pl-8"
+                  data-testid="search-input"
+                />
+              </div>
+              <Button type="submit" variant="outline">
+                搜索
+              </Button>
+            </form>
+          </div>
+
+          <div className="rounded-md border">
+            <div className="relative w-full overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>ID</TableHead>
+                    <TableHead>标题</TableHead>
+                    <TableHead>类型</TableHead>
+                    <TableHead>别名</TableHead>
+                    <TableHead>图片</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead>排序</TableHead>
+                    <TableHead>创建时间</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {isLoading ? (
+                    Array.from({ length: 5 }).map((_, index) => (
+                      <TableRow key={index}>
+                        <TableCell>
+                          <Skeleton className="h-4 w-8" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4 w-32" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4 w-20" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4 w-24" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-8 w-8 rounded" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-6 w-12 rounded-full" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4 w-8" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4 w-24" />
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex justify-end gap-2">
+                            <Skeleton className="h-8 w-8 rounded" />
+                            <Skeleton className="h-8 w-8 rounded" />
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  ) : data?.data && data.data.length > 0 ? (
+                    data.data.map((advertisement) => (
+                      <TableRow key={advertisement.id}>
+                        <TableCell>{advertisement.id}</TableCell>
+                        <TableCell>{advertisement.title || '-'}</TableCell>
+                        <TableCell>
+                          {advertisement.advertisementType?.name || '-'}
+                        </TableCell>
+                        <TableCell>
+                          <code className="text-xs bg-muted px-1 rounded">{advertisement.code || '-'}</code>
+                        </TableCell>
+                        <TableCell>
+                          {advertisement.imageFile?.fullUrl ? (
+                            <img
+                              src={advertisement.imageFile.fullUrl}
+                              alt={advertisement.title || '广告图片'}
+                              className="w-16 h-10 object-cover rounded"
+                              onError={(e) => {
+                                e.currentTarget.src = '/placeholder.png';
+                              }}
+                            />
+                          ) : (
+                            <span className="text-muted-foreground text-xs">无图片</span>
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant={advertisement.status === 1 ? 'default' : 'secondary'}>
+                            {advertisement.status === 1 ? '启用' : '禁用'}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>{advertisement.sort}</TableCell>
+                        <TableCell>
+                          {advertisement.createdAt ? format(new Date(advertisement.createdAt), 'yyyy-MM-dd HH:mm') : '-'}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end gap-2">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => handleEditAdvertisement(advertisement)}
+                              data-testid={`edit-button-${advertisement.id}`}
+                            >
+                              <Edit className="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => handleDeleteAdvertisement(advertisement.id)}
+                              data-testid={`delete-button-${advertisement.id}`}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell colSpan={9} className="text-center py-8">
+                        <p className="text-muted-foreground">暂无广告数据</p>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+
+
+        <DataTablePagination
+          currentPage={searchParams.page}
+          pageSize={searchParams.limit}
+          totalCount={data?.pagination.total || 0}
+          onPageChange={(page, limit) => setSearchParams(prev => ({ ...prev, page, limit }))}
+        />
+      </CardContent>
+    </Card>
+
+    {/* 创建/编辑对话框 */}
+    <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{isCreateForm ? '创建广告' : '编辑广告'}</DialogTitle>
+            <DialogDescription>
+              {isCreateForm ? '创建一个新的广告' : '编辑现有广告信息'}
+            </DialogDescription>
+          </DialogHeader>
+
+          {isCreateForm ? (
+            // 创建表单（独立渲染）
+            <Form {...createForm}>
+              <form onSubmit={createForm.handleSubmit(handleCreateSubmit)} className="space-y-4">
+                <FormField
+                  control={createForm.control}
+                  name="title"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="flex items-center">
+                        标题 <span className="text-red-500 ml-1">*</span>
+                      </FormLabel>
+                      <FormControl>
+                        <Input placeholder="请输入广告标题" {...field} data-testid="title-input" />
+                      </FormControl>
+                      <FormDescription>广告显示的标题文本，最多30个字符</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={createForm.control}
+                  name="typeId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="flex items-center">
+                        广告类型 <span className="text-red-500 ml-1">*</span>
+                      </FormLabel>
+                      <FormControl>
+                        <AdvertisementTypeSelector
+                          value={field.value}
+                          onChange={field.onChange}
+                          placeholder="请选择广告类型"
+                          testId="type-selector"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={createForm.control}
+                  name="code"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="flex items-center">
+                        调用别名 <span className="text-red-500 ml-1">*</span>
+                      </FormLabel>
+                      <FormControl>
+                        <Input placeholder="请输入调用别名" {...field} data-testid="code-input" />
+                      </FormControl>
+                      <FormDescription>用于程序调用的唯一标识，最多20个字符</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={createForm.control}
+                  name="imageFileId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>广告图片</FormLabel>
+                      <FormControl>
+                        <FileSelector
+                          value={field.value || undefined}
+                          onChange={field.onChange}
+                          maxSize={2}
+                          uploadPath="/advertisements"
+                          previewSize="medium"
+                          placeholder="选择广告图片"
+                          title="选择广告图片"
+                          description="上传新图片或从已有图片中选择"
+                          filterType="image"
+                        />
+                      </FormControl>
+                      <FormDescription>推荐尺寸：1200x400px，支持jpg、png格式</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={createForm.control}
+                  name="url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>跳转链接</FormLabel>
+                      <FormControl>
+                        <Input placeholder="请输入跳转链接" {...field} data-testid="url-input" />
+                      </FormControl>
+                      <FormDescription>点击广告后跳转的URL地址</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="grid grid-cols-2 gap-4">
+                  <FormField
+                    control={createForm.control}
+                    name="actionType"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>跳转类型</FormLabel>
+                        <FormControl>
+                          <select
+                            {...field}
+                            className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                            value={field.value || 1}
+                            onChange={(e) => field.onChange(parseInt(e.target.value))}
+                            data-testid="action-type-select"
+                          >
+                            <option value={0}>不跳转</option>
+                            <option value={1}>Web页面</option>
+                            <option value={2}>小程序页面</option>
+                          </select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={createForm.control}
+                    name="sort"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>排序值</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="number"
+                            placeholder="排序值"
+                            {...field}
+                            onChange={(e) => field.onChange(parseInt(e.target.value))}
+                            data-testid="sort-input"
+                          />
+                        </FormControl>
+                        <FormDescription>数值越大排序越靠前</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <FormField
+                  control={createForm.control}
+                  name="status"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>状态</FormLabel>
+                      <FormControl>
+                        <select
+                          {...field}
+                          className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                          value={field.value || 1}
+                          onChange={(e) => field.onChange(parseInt(e.target.value))}
+                          data-testid="status-select"
+                        >
+                          <option value={1}>启用</option>
+                          <option value={0}>禁用</option>
+                        </select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
+                    取消
+                  </Button>
+                  <Button type="submit" disabled={createMutation.isPending} data-testid="create-submit-button">
+                    创建
+                  </Button>
+                </DialogFooter>
+              </form>
+            </Form>
+          ) : (
+            // 编辑表单（独立渲染）
+            <Form {...updateForm}>
+              <form onSubmit={updateForm.handleSubmit(handleUpdateSubmit)} className="space-y-4">
+                <FormField
+                  control={updateForm.control}
+                  name="title"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="flex items-center">
+                        标题 <span className="text-red-500 ml-1">*</span>
+                      </FormLabel>
+                      <FormControl>
+                        <Input placeholder="请输入广告标题" {...field} data-testid="title-input" />
+                      </FormControl>
+                      <FormDescription>广告显示的标题文本，最多30个字符</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={updateForm.control}
+                  name="typeId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="flex items-center">
+                        广告类型 <span className="text-red-500 ml-1">*</span>
+                      </FormLabel>
+                      <FormControl>
+                        <AdvertisementTypeSelector
+                          value={field.value}
+                          onChange={field.onChange}
+                          testId="type-selector"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={updateForm.control}
+                  name="code"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="flex items-center">
+                        调用别名 <span className="text-red-500 ml-1">*</span>
+                      </FormLabel>
+                      <FormControl>
+                        <Input placeholder="请输入调用别名" {...field} data-testid="code-input" />
+                      </FormControl>
+                      <FormDescription>用于程序调用的唯一标识，最多20个字符</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={updateForm.control}
+                  name="imageFileId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>广告图片</FormLabel>
+                      <FormControl>
+                        <FileSelector
+                          value={field.value || undefined}
+                          onChange={field.onChange}
+                          maxSize={2}
+                          uploadPath="/advertisements"
+                          previewSize="medium"
+                          placeholder="选择广告图片"
+                          title="选择广告图片"
+                          description="上传新图片或从已有图片中选择"
+                          filterType="image"
+                        />
+                      </FormControl>
+                      <FormDescription>推荐尺寸：1200x400px，支持jpg、png格式</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={updateForm.control}
+                  name="url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>跳转链接</FormLabel>
+                      <FormControl>
+                        <Input placeholder="请输入跳转链接" {...field} data-testid="url-input" />
+                      </FormControl>
+                      <FormDescription>点击广告后跳转的URL地址</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="grid grid-cols-2 gap-4">
+                  <FormField
+                    control={updateForm.control}
+                    name="actionType"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>跳转类型</FormLabel>
+                        <FormControl>
+                          <select
+                            {...field}
+                            className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                            value={field.value || 1}
+                            onChange={(e) => field.onChange(parseInt(e.target.value))}
+                            data-testid="action-type-select"
+                          >
+                            <option value={0}>不跳转</option>
+                            <option value={1}>Web页面</option>
+                            <option value={2}>小程序页面</option>
+                          </select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={updateForm.control}
+                    name="sort"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>排序值</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="number"
+                            placeholder="排序值"
+                            {...field}
+                            onChange={(e) => field.onChange(parseInt(e.target.value))}
+                            data-testid="sort-input"
+                          />
+                        </FormControl>
+                        <FormDescription>数值越大排序越靠前</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <FormField
+                  control={updateForm.control}
+                  name="status"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>状态</FormLabel>
+                      <FormControl>
+                        <select
+                          {...field}
+                          className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                          value={field.value || 1}
+                          onChange={(e) => field.onChange(parseInt(e.target.value))}
+                          data-testid="status-select"
+                        >
+                          <option value={1}>启用</option>
+                          <option value={0}>禁用</option>
+                        </select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
+                    取消
+                  </Button>
+                  <Button type="submit" disabled={updateMutation.isPending} data-testid="update-submit-button">
+                    更新
+                  </Button>
+                </DialogFooter>
+              </form>
+            </Form>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* 删除确认对话框 */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>确认删除</DialogTitle>
+            <DialogDescription>
+              确定要删除这个广告吗？此操作无法撤销。
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+              取消
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={confirmDelete}
+              disabled={deleteMutation.isPending}
+              data-testid="confirm-delete-button"
+            >
+              {deleteMutation.isPending ? '删除中...' : '删除'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default AdvertisementManagement;

packages/advertisement-management-ui-mt/src/components/index.ts

@@ -0,0 +1 @@
+export { default as AdvertisementManagement } from './AdvertisementManagement';

packages/advertisement-management-ui-mt/src/index.ts

@@ -0,0 +1,18 @@
+// 主包导出入口
+
+export { AdvertisementManagement } from './components';
+
+export {
+  AdvertisementClientManager,
+  advertisementClientManager,
+  advertisementClient
+} from './api';
+
+export type {
+  CreateAdvertisementRequest,
+  UpdateAdvertisementRequest,
+  AdvertisementResponse,
+  AdvertisementListResponse,
+  AdvertisementFormData,
+  AdvertisementSearchParams
+} from './types';

packages/advertisement-management-ui-mt/src/types/advertisement.ts

@@ -0,0 +1,24 @@
+import type { InferRequestType, InferResponseType } from 'hono/client';
+import { advertisementClient } from '../api/advertisementClient';
+
+export type CreateAdvertisementRequest = InferRequestType<typeof advertisementClient.index.$post>['json'];
+export type UpdateAdvertisementRequest = InferRequestType<typeof advertisementClient[':id']['$put']>['json'];
+export type AdvertisementResponse = InferResponseType<typeof advertisementClient.index.$get, 200>['data'][0];
+export type AdvertisementListResponse = InferResponseType<typeof advertisementClient.index.$get, 200>;
+
+export interface AdvertisementFormData {
+  title: string;
+  typeId: number;
+  code: string;
+  url?: string;
+  imageFileId?: number;
+  sort: number;
+  status: number;
+  actionType: number;
+}
+
+export interface AdvertisementSearchParams {
+  page: number;
+  limit: number;
+  search: string;
+}

packages/advertisement-management-ui-mt/src/types/index.ts

@@ -0,0 +1,8 @@
+export type {
+  CreateAdvertisementRequest,
+  UpdateAdvertisementRequest,
+  AdvertisementResponse,
+  AdvertisementListResponse,
+  AdvertisementFormData,
+  AdvertisementSearchParams
+} from './advertisement';

packages/advertisement-management-ui-mt/tests/integration/advertisement-management.integration.test.tsx

@@ -0,0 +1,348 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AdvertisementManagement } from '../../src/components/AdvertisementManagement';
+import { advertisementClientManager } from '../../src/api/advertisementClient';
+
+// 完整的mock响应对象
+const createMockResponse = (status: number, data?: any) => ({
+  status,
+  ok: status >= 200 && status < 300,
+  body: null,
+  bodyUsed: false,
+  statusText: status === 200 ? 'OK' : status === 201 ? 'Created' : status === 204 ? 'No Content' : 'Error',
+  headers: new Headers(),
+  url: '',
+  redirected: false,
+  type: 'basic' as ResponseType,
+  json: async () => data || {},
+  text: async () => '',
+  blob: async () => new Blob(),
+  arrayBuffer: async () => new ArrayBuffer(0),
+  formData: async () => new FormData(),
+  clone: function() { return this; }
+});
+
+// Mock API client
+vi.mock('../../src/api/advertisementClient', () => {
+  const mockAdvertisementClient = {
+    index: {
+      $get: vi.fn(() => Promise.resolve(createMockResponse(200, {
+        data: [
+          {
+            id: 1,
+            title: '测试广告',
+            alias: 'test-ad',
+            typeId: 1,
+            imageUrl: 'https://example.com/image.jpg',
+            linkUrl: 'https://example.com',
+            status: 1,
+            sortOrder: 1,
+            remark: '测试备注',
+            createdAt: '2024-01-01T00:00:00Z',
+            updatedAt: '2024-01-01T00:00:00Z',
+            createdBy: 1,
+            updatedBy: 1
+          }
+        ],
+        pagination: {
+          page: 1,
+          pageSize: 10,
+          total: 1,
+          totalPages: 1
+        }
+      }))),
+      $post: vi.fn(() => Promise.resolve(createMockResponse(201, { id: 2, title: '新广告' }))),
+    },
+    ':id': {
+      $put: vi.fn(() => Promise.resolve(createMockResponse(200, { id: 1, title: '更新后的广告' }))),
+      $delete: vi.fn(() => Promise.resolve(createMockResponse(204))),
+    },
+  };
+
+  const mockAdvertisementClientManager = {
+    get: vi.fn(() => mockAdvertisementClient),
+  };
+
+  return {
+    advertisementClientManager: mockAdvertisementClientManager,
+    advertisementClient: mockAdvertisementClient,
+  };
+});
+
+// Mock toast
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(() => {}),
+    error: vi.fn(() => {}),
+  },
+}));
+
+// Mock FileSelector
+vi.mock('@d8d/file-management-ui', () => ({
+  FileSelector: ({ value, onChange, testId, maxSize, uploadPath, previewSize, filterType, ...props }: any) => (
+    <div data-testid="file-selector">
+      <input
+        type="number"
+        value={value || ''}
+        onChange={(e) => onChange?.(parseInt(e.target.value))}
+        data-testid="file-selector-input"
+        {...props}
+      />
+    </div>
+  ),
+}));
+
+// Mock AdvertisementTypeSelector
+vi.mock('@d8d/advertisement-type-management-ui', () => ({
+  AdvertisementTypeSelector: ({ value, onChange, testId, ...props }: any) => (
+    <div data-testid="advertisement-type-selector">
+      <select
+        value={value?.toString() || ''}
+        onChange={(e) => onChange?.(parseInt(e.target.value))}
+        data-testid="type-selector"
+        {...props}
+      >
+        <option value="1">首页轮播</option>
+        <option value="2">侧边栏广告</option>
+      </select>
+    </div>
+  ),
+}));
+
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+const renderWithProviders = (component: React.ReactElement) => {
+  const queryClient = createTestQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {component as any}
+    </QueryClientProvider>
+  );
+};
+
+describe('广告管理集成测试', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('应该完成完整的广告CRUD流程', async () => {
+    const mockAdvertisements = {
+      data: [
+        {
+          id: 1,
+          title: '测试广告',
+          code: 'test-ad',
+          typeId: 1,
+          advertisementType: { id: 1, name: '首页轮播' },
+          url: 'https://example.com',
+          imageFileId: 1,
+          imageFile: { id: 1, fullUrl: 'https://example.com/image.jpg' },
+          sort: 1,
+          status: 1,
+          actionType: 1,
+          createdAt: '2024-01-01T00:00:00Z',
+        },
+      ],
+      pagination: {
+        total: 1,
+        page: 1,
+        pageSize: 10,
+      },
+    };
+
+    const { toast } = await import('sonner');
+
+    // Mock initial advertisement list
+    const client = advertisementClientManager.get();
+    (client.index.$get as any).mockResolvedValue({
+      ...createMockResponse(200),
+      json: async () => mockAdvertisements
+    });
+
+    renderWithProviders(<AdvertisementManagement />);
+
+    // Wait for initial data to load
+    await waitFor(() => {
+      expect(screen.getByText('测试广告')).toBeInTheDocument();
+    });
+
+    // Test create advertisement
+    const createButton = screen.getByText('创建广告');
+    fireEvent.click(createButton);
+
+    // Fill create form
+    const titleInput = screen.getByTestId('title-input');
+    const codeInput = screen.getByTestId('code-input');
+    const typeSelector = screen.getByTestId('type-selector');
+
+    fireEvent.change(titleInput, { target: { value: '新广告' } });
+    fireEvent.change(codeInput, { target: { value: 'new-ad' } });
+    fireEvent.change(typeSelector, { target: { value: '1' } });
+
+    // Mock successful creation
+    (client.index.$post as any).mockResolvedValue(createMockResponse(201, { id: 2, title: '新广告' }));
+
+    const submitButton = screen.getByTestId('create-submit-button');
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(client.index.$post).toHaveBeenCalledWith({
+        json: {
+          title: '新广告',
+          code: 'new-ad',
+          typeId: 1,
+          url: '',
+          imageFileId: undefined,
+          sort: 0,
+          status: 1,
+          actionType: 1
+        },
+      });
+      expect(toast.success).toHaveBeenCalledWith('广告创建成功');
+    });
+
+    // Test edit advertisement
+    const editButton = screen.getByTestId('edit-button-1');
+    fireEvent.click(editButton);
+
+    // Verify edit form is populated
+    await waitFor(() => {
+      expect(screen.getByDisplayValue('测试广告')).toBeInTheDocument();
+    });
+
+    // Update advertisement
+    const updateTitleInput = screen.getByDisplayValue('测试广告');
+    fireEvent.change(updateTitleInput, { target: { value: '更新后的广告' } });
+
+    // Mock successful update
+    (client[':id']['$put'] as any).mockResolvedValue(createMockResponse(200));
+
+    const updateButton = screen.getByTestId('update-submit-button');
+    fireEvent.click(updateButton);
+
+    await waitFor(() => {
+      expect(client[':id']['$put']).toHaveBeenCalledWith({
+        param: { id: 1 },
+        json: {
+          title: '更新后的广告',
+          typeId: 1,
+          code: 'test-ad',
+          url: 'https://example.com',
+          imageFileId: 1,
+          sort: 1,
+          status: 1,
+          actionType: 1
+        },
+      });
+      expect(toast.success).toHaveBeenCalledWith('广告更新成功');
+    });
+
+    // Test delete advertisement
+    const deleteButton = screen.getByTestId('delete-button-1');
+    fireEvent.click(deleteButton);
+
+    // Confirm deletion
+    expect(screen.getByText('确认删除')).toBeInTheDocument();
+
+    // Mock successful deletion
+    (client[':id']['$delete'] as any).mockResolvedValue({
+      status: 204,
+      ok: true,
+      body: null,
+      bodyUsed: false,
+      statusText: 'No Content',
+      headers: new Headers(),
+      url: '',
+      redirected: false,
+      type: 'basic' as ResponseType,
+      json: async () => ({}),
+      text: async () => '',
+      blob: async () => new Blob(),
+      arrayBuffer: async () => new ArrayBuffer(0),
+      formData: async () => new FormData(),
+      clone: function() { return this; }
+    });
+
+    const confirmDeleteButton = screen.getByTestId('confirm-delete-button');
+    fireEvent.click(confirmDeleteButton);
+
+    await waitFor(() => {
+      expect(client[':id']['$delete']).toHaveBeenCalledWith({
+        param: { id: 1 },
+      });
+      expect(toast.success).toHaveBeenCalledWith('广告删除成功');
+    });
+  });
+
+  it('应该优雅处理API错误', async () => {
+    const client = advertisementClientManager.get();
+    const { toast } = await import('sonner');
+
+    // Mock API error
+    (client.index.$get as any).mockRejectedValue(new Error('API Error'));
+
+    renderWithProviders(<AdvertisementManagement />);
+
+    // Should handle error without crashing
+    await waitFor(() => {
+      expect(screen.getByText('广告管理')).toBeInTheDocument();
+    });
+
+    // Test create advertisement error
+    const createButton = screen.getByText('创建广告');
+    fireEvent.click(createButton);
+
+    const titleInput = screen.getByTestId('title-input');
+    const codeInput = screen.getByTestId('code-input');
+
+    fireEvent.change(titleInput, { target: { value: '测试广告' } });
+    fireEvent.change(codeInput, { target: { value: 'test-ad' } });
+
+    // Mock creation error
+    (client.index.$post as any).mockRejectedValue(new Error('Creation failed'));
+
+    const submitButton = screen.getByTestId('create-submit-button');
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Creation failed');
+    });
+  });
+
+  it('应该处理搜索功能', async () => {
+    const client = advertisementClientManager.get();
+    const mockAdvertisements = {
+      data: [],
+      pagination: { total: 0, page: 1, pageSize: 10 },
+    };
+
+    (client.index.$get as any).mockResolvedValue(createMockResponse(200, mockAdvertisements));
+
+    renderWithProviders(<AdvertisementManagement />);
+
+    // Test search
+    const searchInput = screen.getByTestId('search-input');
+    fireEvent.change(searchInput, { target: { value: '搜索关键词' } });
+
+    const searchButton = screen.getByText('搜索');
+    fireEvent.click(searchButton);
+
+    await waitFor(() => {
+      expect(client.index.$get).toHaveBeenCalledWith({
+        query: {
+          page: 1,
+          pageSize: 10,
+          keyword: '搜索关键词',
+        },
+      });
+    });
+  });
+});

packages/advertisement-management-ui-mt/tests/setup.ts

@@ -0,0 +1,14 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+
+
+// Mock sonner
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn()
+  }
+}));

packages/advertisement-management-ui-mt/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "tests/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

packages/advertisement-management-ui-mt/vitest.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'tests/',
+        '**/*.d.ts',
+        '**/*.config.*'
+      ]
+    }
+  },
+  resolve: {
+    alias: {
+      '@': './src'
+    }
+  }
+});

pnpm-lock.yaml

@@ -326,6 +326,103 @@ importers:
         specifier: ^4.0.9
         version: 4.0.9(@types/debug@4.1.12)(@types/node@22.19.0)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.64.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
 
+  packages/advertisement-management-ui-mt:
+    dependencies:
+      '@d8d/advertisement-type-management-ui-mt':
+        specifier: workspace:*
+        version: link:../advertisement-type-management-ui-mt
+      '@d8d/advertisements-module-mt':
+        specifier: workspace:*
+        version: link:../advertisements-module-mt
+      '@d8d/file-management-ui-mt':
+        specifier: workspace:*
+        version: link:../file-management-ui-mt
+      '@d8d/shared-types':
+        specifier: workspace:*
+        version: link:../shared-types
+      '@d8d/shared-ui-components':
+        specifier: workspace:*
+        version: link:../shared-ui-components
+      '@hookform/resolvers':
+        specifier: ^5.2.1
+        version: 5.2.2(react-hook-form@7.65.0(react@19.2.0))
+      '@tanstack/react-query':
+        specifier: ^5.90.9
+        version: 5.90.9(react@19.2.0)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
+      hono:
+        specifier: ^4.8.5
+        version: 4.8.5
+      lucide-react:
+        specifier: ^0.536.0
+        version: 0.536.0(react@19.2.0)
+      react:
+        specifier: ^19.1.0
+        version: 19.2.0
+      react-dom:
+        specifier: ^19.1.0
+        version: 19.2.0(react@19.2.0)
+      react-hook-form:
+        specifier: ^7.61.1
+        version: 7.65.0(react@19.2.0)
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
+      zod:
+        specifier: ^4.0.15
+        version: 4.1.12
+    devDependencies:
+      '@testing-library/jest-dom':
+        specifier: ^6.8.0
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.0
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@types/node':
+        specifier: ^22.10.2
+        version: 22.19.0
+      '@types/react':
+        specifier: ^19.2.2
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.2)
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.18.1
+        version: 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.8.3)
+      '@typescript-eslint/parser':
+        specifier: ^8.18.1
+        version: 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.8.3)
+      eslint:
+        specifier: ^9.17.0
+        version: 9.38.0(jiti@2.6.1)
+      jsdom:
+        specifier: ^26.0.0
+        version: 26.1.0
+      typescript:
+        specifier: ^5.8.3
+        version: 5.8.3
+      unbuild:
+        specifier: ^3.4.0
+        version: 3.6.1(sass@1.93.2)(typescript@5.8.3)(vue@3.5.22(typescript@5.8.3))
+      vitest:
+        specifier: ^4.0.9
+        version: 4.0.9(@types/debug@4.1.12)(@types/node@22.19.0)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.64.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+
   packages/advertisement-type-management-ui:
     dependencies:
       '@d8d/advertisements-module':