create-dwy 0.5.1 → 0.6.0

package/templates/claude-global/skills/dwy-ekit/references/request.md

@@ -0,0 +1,183 @@
+# request — HTTP 客户端（防腐层）
+
+> 何时读这份：当用户使用本模块的 API 或问法涉及本模块功能时读取（HTTP 请求、createRequest、内置插件、refreshToken、dwyeapi 响应契约对接、业务错误捕获）。
+
+```ts
+import {
+  createRequest, tokenPlugin, headerPlugin, unwrapPlugin, refreshTokenPlugin,
+  SUCCESS_CODE, extractValidationErrors, isApiBusinessError,
+} from '@dwydev/ekit'
+import type {
+  HttpClient, HttpConfig, HttpResponse, HttpError, HttpPlugin,
+  HttpMethod, HttpResponseType, CreateRequestOptions,
+  ApiResponse, PageData, ValidationErrorData, ValidationFieldError,
+  CommonBusinessCode, BusinessCode, ApiBusinessError,
+} from '@dwydev/ekit'
+```
+
+## createRequest(options?) → HttpClient
+
+底层是 axios，但**返回 `HttpClient` 而不是 `AxiosInstance`**。
+
+```ts
+const http: HttpClient = createRequest({
+  baseURL: '/api',                       // 默认 '/api'
+  timeout: 30000,                        // 默认 30000
+  headers: { 'X-Client': 'web' },        // 共享默认请求头
+  plugins: [
+    tokenPlugin({ getToken: () => localStorage.getItem('token') }),
+    unwrapPlugin(),
+  ],
+})
+
+// HttpClient 接口
+const res = await http.get<User>('/users/1')           // res: HttpResponse<User>
+const res = await http.post<User>('/users', { ... })
+const res = await http.request({ method: 'PUT', url: '/users/1', data })
+// 还有 put / delete / patch / head
+```
+
+## HttpConfig / HttpResponse / HttpError
+
+```ts
+interface HttpConfig {
+  url?: string
+  method?: HttpMethod                     // 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS'
+  baseURL?: string
+  headers?: Record<string, string>
+  params?: Record<string, any>
+  data?: any
+  timeout?: number
+  responseType?: HttpResponseType         // 'json' | 'blob' | 'text' | 'arraybuffer'
+  extra?: Record<string, unknown>         // 逃生舱：透传 axios 特有配置
+}
+
+interface HttpResponse<T = any> {
+  data: T
+  status: number
+  statusText: string
+  headers: Record<string, string>
+  config: HttpConfig
+}
+
+interface HttpError<T = any> extends Error {
+  config?: HttpConfig
+  response?: HttpResponse<T>
+  code?: string
+  businessCode?: string                  // v0.7.0 新增：后端业务错误码（如 "NOT_FOUND"）
+  apiResponse?: ApiResponse<unknown>     // v0.7.0 新增：原始 dwyeapi 响应信封
+}
+```
+
+## HttpPlugin 接口
+
+```ts
+interface HttpPlugin {
+  onRequest?: (config: HttpConfig) => HttpConfig | Promise<HttpConfig>
+  onResponse?: (response: HttpResponse) => HttpResponse | Promise<HttpResponse>
+  // 返回非 undefined 视为已恢复，终止后续插件
+  onResponseError?: (error: HttpError) => any
+}
+```
+
+> 旧版的 `RequestPlugin` 已重命名为 `HttpPlugin`，所有钩子参数类型从 axios 类型改为 ekit 自有契约。
+
+## 内置插件
+
+| 插件 | 用途 | 参数 |
+|------|------|------|
+| `tokenPlugin` | 注入 `Authorization: Bearer <token>` | `{ getToken: () => string \| null }` |
+| `headerPlugin` | 注入自定义动态 header | `{ name: string, getValue: () => string \| null }` |
+| `unwrapPlugin` | 解包 dwyeapi `{ code, message, data, timestamp }`，code !== `"SUCCESS"` 时 reject（附带 `businessCode` / `apiResponse`）；非该格式原样透传 | 无 |
+| `refreshTokenPlugin` | 401 自动刷新并重放 | 见下 |
+
+## refreshTokenPlugin（带 retry 注入）
+
+新版需要传 `retry`，因为插件不再持有 client 引用：
+
+```ts
+let http: HttpClient
+http = createRequest({
+  plugins: [
+    tokenPlugin({ getToken: () => localStorage.getItem('token') }),
+    refreshTokenPlugin({
+      getRefreshToken: () => localStorage.getItem('refreshToken'),
+      refreshFn: async (refreshToken) => {
+        const res = await http.post<{ token: string }>('/auth/refresh', { refreshToken })
+        localStorage.setItem('token', res.data.token)
+        return res.data.token
+      },
+      onRefreshFail: () => {
+        localStorage.clear()
+        window.location.href = '/login'
+      },
+      retry: (cfg) => http.request(cfg),       // 必填：重放请求
+      isLoginUrl: (url) => url.includes('/auth/login'),  // 可选
+    }),
+    unwrapPlugin(),
+  ],
+})
+```
+
+## 响应契约对齐 dwyeapi v0.7.0
+
+所有接口统一信封 `{ code, message, data, timestamp }`，`code === "SUCCESS"` 表示业务成功。unwrapPlugin 自动按此契约解包，业务代码拿到的 `response.data` 就是纯业务数据或 `PageData<T>`。
+
+```ts
+import { SUCCESS_CODE } from '@dwydev/ekit'
+import type { ApiResponse, PageData } from '@dwydev/ekit'
+
+// 单体响应
+const res = await http.get<User>('/users/1')
+// res.data: User（unwrap 后是 User 不是 ApiResponse<User>）
+
+// 分页响应
+const list = await http.get<PageData<User>>('/users?page=1&page_size=20')
+list.data.items          // User[]
+list.data.total          // number
+list.data.page           // number
+list.data.page_size      // number（保持 snake_case 对齐后端 JSON）
+```
+
+**内置业务错误码（`CommonBusinessCode`）：**
+
+| code | HTTP | 含义 |
+|------|------|------|
+| `SUCCESS` | 200 | 业务成功，unwrap 自动解包 data |
+| `NOT_FOUND` | 404 | 资源不存在 |
+| `BUSINESS_ERROR` | 422 | 业务规则不允许（基础码；业务常自定义为 `INSUFFICIENT_BALANCE` 等） |
+| `PERMISSION_DENIED` | 403 | 无权限 |
+| `AUTHENTICATION_FAILED` | 401 | 认证失败 |
+| `VALIDATION_ERROR` | 422 | 请求参数校验失败，`data.errors` 为字段错误数组 |
+| `INTERNAL_ERROR` | 500 | 服务器错误 |
+| `HTTP_{status_code}` | 原状态 | 第三方 HTTPException 透传（如 OAuth2 的 `HTTP_401`） |
+
+`BusinessCode = CommonBusinessCode | (string & {})`：既自动补全常见码，又允许业务 `BusinessError(code="CUSTOM")` 自定义。
+
+## 捕获业务错误：isApiBusinessError + extractValidationErrors
+
+unwrapPlugin 失败时抛 `HttpError`，附带 `businessCode`（业务错误码）和 `apiResponse`（原始信封）。业务 catch 直接按 code 分支：
+
+```ts
+import { isApiBusinessError, extractValidationErrors } from '@dwydev/ekit'
+
+try {
+  await http.post('/orders', body)
+} catch (err) {
+  if (!isApiBusinessError(err)) {
+    message.error('网络异常')
+    return
+  }
+  switch (err.businessCode) {
+    case 'INSUFFICIENT_BALANCE': showRecharge(); break
+    case 'NOT_FOUND': message.warning('订单不存在'); break
+    case 'VALIDATION_ERROR':
+      // err.apiResponse.data.errors: [{ field: "body.email", message: "..." }, ...]
+      form.setErrors(extractValidationErrors(err))
+      break
+    default: message.error(err.message)
+  }
+}
+```
+
+`extractValidationErrors` 自动剥离 `body. / query. / path. / header. / cookie.` 前缀，返回 `{ field: message }` 扁平对象，与 vee-validate 的 `form.setErrors` 直接兼容。嵌套字段路径（如 `body.items.0.name`）保留为 `items.0.name`。输入可以是 HttpError、完整 ApiResponse、或裸 `ValidationErrorData`，非校验错误时返回空对象。

package/templates/claude-global/skills/dwy-ekit/references/ui.md

@@ -0,0 +1,109 @@
+# UI 交互（copy / file / hooks）
+
+> 何时读这份：当用户使用本模块的 API 或问法涉及本模块功能时读取（剪贴板、文件下载/Blob/文件大小、Vue Composables 工具）。
+
+## copy — 剪贴板
+
+```ts
+import { copyText, useClipboard } from '@dwydev/ekit'
+```
+
+### copyText(text)
+
+非组件场景一次性复制：
+
+```ts
+await copyText('hello')
+```
+
+### useClipboard — 直接再导出 @vueuse/core
+
+```ts
+const { text, copy, copied, isSupported } = useClipboard({ source: '', copiedDuring: 1500 })
+copy('hello')
+// copied: ComputedRef<boolean>，1500ms 后自动复位
+// isSupported: ComputedRef<boolean>，注意是 computed 不是 ref
+```
+
+> 旧版 ekit 自写的 `useClipboard` 返回结构略有不同，迁移时需对照新签名。
+
+---
+
+## file — 文件下载 / Blob / 文件大小
+
+```ts
+import { downloadFile, saveBlob, formatFileSize } from '@dwydev/ekit'
+import type { DownloadOptions, FileRequester } from '@dwydev/ekit'   // requester 不是 requestInstance
+```
+
+### downloadFile(url, options?)
+
+```ts
+await downloadFile('/api/export.xlsx')                                // GET，自动从 Content-Disposition 解析文件名
+await downloadFile('/api/export', {
+  filename: '报表.xlsx',
+  method: 'POST',
+  data: { dateRange: [start, end] },
+  headers: { Authorization: `Bearer ${token}` },
+})
+
+// 用自己的 HTTP 客户端发请求（不传则动态 import axios）
+await downloadFile('/api/export', { requester: myAxiosInstance })
+```
+
+### FileRequester 契约
+
+任何满足以下结构的对象都可以作为 requester（axios 实例天然满足）：
+
+```ts
+interface FileRequester {
+  request(config: {
+    url: string
+    method?: 'GET' | 'POST'
+    data?: any
+    headers?: Record<string, string>
+    responseType: 'blob'
+  }): Promise<{
+    data: Blob | ArrayBuffer
+    headers?: Record<string, string | undefined>
+  }>
+}
+```
+
+> 旧版字段 `requestInstance: AxiosInstance` 已改名 `requester: FileRequester`，类型不再泄露 axios。
+
+### 其他
+
+```ts
+saveBlob(blob, 'data.json')               // 直接保存已有 Blob
+formatFileSize(1234567)                    // '1.18 MB'
+formatFileSize(1234567, 0)                 // '1 MB'
+```
+
+---
+
+## hooks — Vue Composables
+
+**全部再导出 `@vueuse/core`**，ekit 不再自写。从 `@dwydev/ekit` 主入口导入即可：
+
+```ts
+import {
+  // src/hooks/index.ts
+  useDebounce, useClickOutside, useEventListener,
+  // src/hooks/vueuse.ts
+  useThrottle, useWindowSize, useMediaQuery, useIntersectionObserver, useResizeObserver,
+} from '@dwydev/ekit'
+```
+
+| ekit 名 | VueUse 实现 | 说明 |
+|---------|-------------|------|
+| `useDebounce(value, delay=300)` | `refDebounced` | 默认 300ms（VueUse 默认 200ms） |
+| `useClickOutside(target, handler)` | `onClickOutside` | 点击元素外部触发 |
+| `useEventListener(target, event, handler, options?)` | 同名 | 自动绑/解绑，支持 `Ref<EventTarget>` |
+| `useThrottle(fn, ms)` | `useThrottleFn` | 节流函数 |
+| `useWindowSize()` | 同名 | `{ width, height }` |
+| `useMediaQuery(query)` | 同名 | `useMediaQuery('(max-width: 768px)')` |
+| `useIntersectionObserver(target, cb)` | 同名 | 监听元素出现/消失 |
+| `useResizeObserver(target, cb)` | 同名 | 监听元素尺寸变化 |
+
+> 旧版 ekit 自写的 `useDebounce` 返回普通 `Ref<T>`，新版返回 VueUse 的 `Readonly<Ref<T>>`，**不能** `debouncedSearch.value = '...'`。

package/templates/claude-global/skills/{dwy-frontend-eui → dwy-eui}/SKILL.md

@@ -1,34 +1,146 @@
 ---
-name: dwy-frontend-eui
-description: "@danweiyuan/eui Vue 3 组件库速查。触发条件：使用 Vue 3 构建页面、选择 UI 组件、查询 eui 组件 API 时。"
+name: dwy-eui
+description: "@dwydev/eui Vue 3 组件库速查。触发条件：使用 Vue 3 构建页面、选择 UI 组件、查询 eui 组件 API 时。"
 ---
 
-# @danweiyuan/eui 组件速查
+# @dwydev/eui 组件速查
 
 基于 Reka-ui 原语层 + shadcn-vue 设计风格 + Element Plus 式 API 的 Vue 3 组件库。
 
+## 集成指南
+
+新项目集成 EUI 时，读取 `references/eui-integration-guide.md`，包含完整的安装、Vite 配置、样式引入、组件注册、主题切换等步骤。
+
+## 设计风格规范
+
+- **中后台页面**：读取 `references/eui-design-guide.md`，包含颜色系统、布局规范、排版规范、组件使用规范、交互规范等。
+- **落地页/营销页**：读取 `references/eui-landing-design-guide.md`，包含 Hero、功能展示、社会证明、定价、FAQ 等 Section 模板和动画规范。
+
+---
+
 ## 安装与引入
 
 ```bash
-pnpm add @danweiyuan/eui
+pnpm add @dwydev/eui
 ```
 
 ```ts
 // 按需导入（推荐）
-import { EButton, EInput, ETable } from '@danweiyuan/eui'
+import { EButton, EInput, ETable } from '@dwydev/eui'
 
 // 全局注册（Vue plugin）
-import EUI from '@danweiyuan/eui'
+import EUI from '@dwydev/eui'
 app.use(EUI)
 ```
 
 ```ts
 // 主题 CSS（必须引入）
-import '@danweiyuan/eui/theme'          // 基础样式 + tokens
-import '@danweiyuan/eui/theme/dark'     // 暗色模式（可选）
-import '@danweiyuan/eui/theme/tokens'   // 仅 design tokens（可选）
+import '@dwydev/eui/theme'          // 基础样式 + tokens
+import '@dwydev/eui/theme/dark'     // 暗色模式（可选）
+import '@dwydev/eui/theme/tokens'   // 仅 design tokens（可选）
+```
+
+### 全局配置 EConfigProvider（必须）
+
+**EConfigProvider 是使用 EUI 的前置条件。** 必须在 App 根组件用 `<EConfigProvider>` 包裹整个应用，否则以下功能不生效：
+
+- 国际化（日期选择器、月份/年份选择器等显示为英文而非中文）
+- 全局组件尺寸统一控制
+- 弹层 z-index 统一管理
+- 组件内部 UI 文案（确定/取消/暂无数据等）
+
+#### 基础用法
+
+```vue
+<!-- App.vue -->
+<script setup lang="ts">
+import { EConfigProvider } from '@dwydev/eui'
+</script>
+
+<template>
+  <EConfigProvider>
+    <RouterView />
+  </EConfigProvider>
+</template>
 ```
 
+使用默认配置即可满足中文项目需求，无需传任何 props。
+
+#### Props
+
+| Prop | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| size | `'sm' \| 'default' \| 'lg'` | `'default'` | 所有组件的全局尺寸 |
+| zIndex | `number` | `2000` | 弹层组件（Dialog/Drawer/Popover 等）的基准 z-index |
+| locale | `Record<string, string>` | 见下方 | 国际化配置 |
+
+#### locale 配置
+
+locale 是一个扁平的键值对象，包含两部分内容：
+
+| 字段 | 默认值 | 说明 |
+|------|--------|------|
+| name | `'zh-CN'` | **BCP 47 语言标签**，控制日期选择器（EDatePicker）、日历（ECalendar）等组件的本地化显示（月份名、星期名、年份格式等） |
+| confirm | `'确定'` | 确认按钮文案 |
+| cancel | `'取消'` | 取消按钮文案 |
+| close | `'关闭'` | 关闭按钮文案 |
+| loading | `'加载中...'` | 加载状态文案 |
+| empty | `'暂无数据'` | 空状态文案 |
+| search | `'搜索'` | 搜索占位文案 |
+| selectPlaceholder | `'请选择'` | 选择器默认占位文案 |
+| inputPlaceholder | `'请输入'` | 输入框默认占位文案 |
+
+#### 自定义配置示例
+
+```vue
+<!-- 英文项目 -->
+<EConfigProvider
+  size="sm"
+  :z-index="3000"
+  :locale="{
+    name: 'en-US',
+    confirm: 'OK',
+    cancel: 'Cancel',
+    close: 'Close',
+    loading: 'Loading...',
+    empty: 'No data',
+    search: 'Search',
+    selectPlaceholder: 'Please select',
+    inputPlaceholder: 'Please input',
+  }"
+>
+  <RouterView />
+</EConfigProvider>
+```
+
+#### 嵌套覆盖
+
+EConfigProvider 支持嵌套，内层配置覆盖外层。适用于局部区域需要不同配置的场景：
+
+```vue
+<EConfigProvider>                                          <!-- 全局中文 -->
+  <EConfigProvider :locale="{ name: 'en-US', ... }">      <!-- 局部英文 -->
+    <EDatePicker type="month" />                           <!-- 显示英文月份 -->
+  </EConfigProvider>
+</EConfigProvider>
+```
+
+#### 实现原理
+
+EConfigProvider 内部做了两件事：
+1. 通过 Vue `provide/inject` 向子树注入 size、zIndex、locale 配置，EUI 组件通过 `useConfigProvider()` 读取
+2. 包裹 reka-ui 的 `ConfigProvider`，将 `locale.name` 透传为 reka-ui 的全局 locale，所有基于 reka-ui 的日期类组件自动继承
+
+#### 不使用 EConfigProvider 的后果
+
+| 功能 | 不包裹时的表现 |
+|------|--------------|
+| EDatePicker 月份/星期 | 显示英文（Jan、Feb、Mon、Tue） |
+| ECalendar 月份/星期 | 显示英文 |
+| 组件尺寸 | 各组件使用各自默认值，无法统一控制 |
+| 弹层 z-index | 各组件使用各自默认值，可能层级混乱 |
+| UI 文案 | useConfigProvider() 使用内部默认值（中文），但不保证一致性 |
+
 ## 命名约定
 
 - 组件前缀 `E`：`EButton`, `EInput`, `EDialog`
@@ -78,7 +190,7 @@ frontend/eui/src/components/{component-name}/types.ts
 | EInput | 输入框 | v-model, type, placeholder, size, clearable, showPassword, disabled, readonly, maxlength, showWordLimit |
 | ETextarea | 多行输入 | v-model, placeholder, rows, autoResize, maxlength, disabled, showWordLimit, minRows, maxRows |
 | ENumberField | 数字输入 | v-model, min, max, step, size, disabled, precision, controlsPosition, placeholder, readonly |
-| ESelect | 下拉选择 | v-model, options(Option[]), placeholder, clearable, size, disabled, filterable, multiple, collapseTags, remote, remoteMethod, loading |
+| ESelect | 下拉选择 | v-model, options(Option[]), placeholder, clearable, size, disabled, filterable, multiple, collapseTags, remote, remoteMethod, loading。**注意：option.value 不能为空字符串**，reka-ui 不支持 |
 | ENativeSelect | 原生 select | v-model, options(SelectOption[]), placeholder, disabled |
 | ECombobox | 组合框 | v-model, options(Option[]), placeholder, emptyText, disabled |
 | EAutocomplete | 自动补全 | v-model, fetchSuggestions(async fn), debounce, placeholder |
@@ -103,6 +215,10 @@ frontend/eui/src/components/{component-name}/types.ts
 | EField | 字段布局 | orientation(vertical/horizontal/responsive), invalid |
 | EInputGroup | 输入组 | 子组件 EInputGroupAddon(align) |
 
+#### 表单强制约束
+
+**禁止使用原生 `<form>` 标签，所有表单必须使用 `<EForm>` 组件。** EForm 内置 vee-validate 校验、provide/inject 上下文传递、统一的 label 布局和 reset/validate API，原生 `<form>` 无法与 EUI 表单体系集成。
+
 ### 数据展示
 
 | 组件 | 用途 | 关键 Props |
@@ -122,7 +238,7 @@ frontend/eui/src/components/{component-name}/types.ts
 
 | 组件 | 用途 | 关键 Props |
 |------|------|-----------|
-| EDialog | 对话框 | v-model:open, title, description, showClose, maxWidth, draggable, closeOnClickModal, closeOnPressEscape, fullscreen, destroyOnClose |
+| EDialog | 对话框 | v-model:open, title, description, showClose, maxWidth, draggable, closeOnClickModal, closeOnPressEscape, fullscreen, destroyOnClose。内容超出视口时 body 自动滚动，header/footer 固定。**注意：body 区域有 `overflow-y-auto`，首尾位置的 input/select 等表单控件的 focus-ring 会被裁切，需在内容区域添加 `p-1` 或 `py-1` padding 规避** |
 | EDrawer | 抽屉 | v-model:open, title, description, direction(top/right/bottom/left), showClose |
 | ESheet | 侧边面板 | v-model:open, title, description, side(top/right/bottom/left), showClose |
 | EAlertDialog | 确认对话框 | v-model:open, title, description, confirmText, cancelText |
@@ -152,7 +268,6 @@ frontend/eui/src/components/{component-name}/types.ts
 
 | 组件 | 子组件 | 用途 |
 |------|--------|------|
-| ESidebar | ESidebarProvider, ESidebar, ESidebarTrigger, ESidebarContent, ESidebarHeader, ESidebarFooter, ESidebarGroup, ESidebarGroupLabel, ESidebarGroupContent, ESidebarMenu, ESidebarMenuItem, ESidebarMenuButton | 侧边栏。Provider(defaultOpen, v-model:open) |
 | ECommand | ECommandInput, ECommandList, ECommandEmpty, ECommandGroup, ECommandItem, ECommandSeparator, ECommandShortcut | 命令面板（配合 useCommand） |
 | ENavigationMenu | ENavigationMenuList, ENavigationMenuItem, ENavigationMenuTrigger, ENavigationMenuContent, ENavigationMenuLink, ENavigationMenuViewport | 导航菜单 |
 | EMenubar | EMenubarMenu, EMenubarTrigger, EMenubarContent, EMenubarItem, EMenubarSeparator, EMenubarCheckboxItem, EMenubarRadioGroup, EMenubarRadioItem, EMenubarSub, EMenubarSubTrigger, EMenubarSubContent | 菜单栏 |
@@ -162,7 +277,7 @@ frontend/eui/src/components/{component-name}/types.ts
 
 | 组件 | 用途 | 关键 Props |
 |------|------|-----------|
-| EConfigProvider | 全局配置注入 | size, zIndex, locale(Record) |
+| EConfigProvider | **必须**包裹 App 根组件，提供国际化/尺寸/层级全局配置 | size, zIndex, locale(Record, 含 name 字段为 BCP 47 语言标签，默认 zh-CN) |
 | EToggle | 切换按钮 | v-model, variant(default/outline), size, disabled |
 | EToggleGroup | 切换按钮组 | v-model, type(single/multiple), variant, size, disabled |
 | EButtonGroup | 按钮组 | orientation(horizontal/vertical) |
@@ -180,7 +295,6 @@ frontend/eui/src/components/{component-name}/types.ts
 | EFormDialog | 表单弹窗 | v-model:open, title, size, loading, confirmText, cancelText |
 | EConfirmDialog | 确认弹窗 | v-model:open, title, message, type(info/warning/error), confirmText, cancelText |
 | EAdminLayout | 后台管理布局 | logo, title, menuItems(MenuItem[]), v-model:activeKey, v-model:collapsed, headerHeight, sidebarWidth |
-| ELoginLayout | 登录页布局 | title, logo, background |
 | EAIChat | AI 对话 | messages(ChatMessage[]), loading, placeholder |
 | ETimetableGrid | 课程表/时间表 | data(TimetableItem[]), startHour, endHour, days |
 
@@ -205,7 +319,7 @@ frontend/eui/src/components/{component-name}/types.ts
 - **样式工具**: 使用 `cn()` 合并 Tailwind 类名，自动解决冲突
 
 ```ts
-import { cn } from '@danweiyuan/eui'
+import { cn } from '@dwydev/eui'
 cn('px-2 py-1', isActive && 'bg-primary text-white', className)
 ```