open-index/open-npm huggingface dataset:
npm package: @kordar-lib/crud
Description: CRUD 相关的基础类型定义库，统一描述查询条件、排序、编辑指令以及常用的请求体结构（SearchBody/FormBody/EditorBody/RemoveBody），用于在各模板与组件库中保持接口一致。
Latest version: 2.0.0

# @kordar-lib/crud

CRUD 相关的基础类型定义库，统一描述查询条件、排序、编辑指令以及常用的请求体结构（SearchBody/FormBody/EditorBody/RemoveBody），用于在各模板与组件库中保持接口一致。

## 导出内容

- query
  - ConditionUint / Condition
  - SortUint / Sort
  - EditorUint / Editor
- body
  - SearchBody
  - FormBody
  - EditorBody
  - RemoveBody

## 常用用法

### 列表查询（SearchBody）

```ts
import type {SearchBody, Condition, Sort} from '@kordar-lib/crud'

const conditions: Condition[] = [
  { key: 'name', type: 'LIKE', value: 'tom' },
  { key: 'enabled', type: 'EQ', value: 1 }
]

const sorts: Sort[] = [{ key: 'createdAt', type: 'DESC' }]

const body: SearchBody = {
  page: 1,
  pageSize: 20,
  conditions,
  sorts,
  data: { extra: true }
}
```

### 表单提交（FormBody）

```ts
import type {FormBody, Condition} from '@kordar-lib/crud'

type UserForm = { name: string; age: number }

const conditions: Condition[] = [{ key: 'id', type: 'EQ', value: 1 }]

const body: FormBody<UserForm> = {
  conditions,
  object: { name: 'Tom', age: 18 }
}
```

### 批量编辑（EditorBody）

```ts
import type {EditorBody, Condition, Editor} from '@kordar-lib/crud'

const conditions: Condition[] = [{ key: 'enabled', type: 'EQ', value: 0 }]

const editor: Editor[] = [
  { key: 'enabled', type: 'SETVAL', value: 1 }
]

const body: EditorBody = { conditions, editor }
```

### 删除（RemoveBody）

```ts
import type {RemoveBody, Condition} from '@kordar-lib/crud'

const conditions: Condition[] = [{ key: 'id', type: 'IN', value: [1,2,3] }]
const body: RemoveBody = { conditions }
```

## 构建与类型（Monorepo：npm）

在仓库根目录执行：

```bash
npm install --legacy-peer-deps
npm run -w @kordar-lib/crud build
```

类型检查：

```bash
npm exec -w @kordar-lib/crud -- tsc -p tsconfig.json --noEmit
```
npm package: @kordar-lib/i18n
Description: i18next 驱动的轻量国际化辅助库：提供可插拔的包管理（本地/远程语言包）、统一的 t/ttExist API、通用字段/参数文案工具，并暴露底层 i18next 实例便于扩展。
Latest version: 2.0.1

# @kordar-lib/i18n

i18next 驱动的轻量国际化辅助库：提供可插拔的包管理（本地/远程语言包）、统一的 t/ttExist API、通用字段/参数文案工具，并暴露底层 i18next 实例便于扩展。

## 导出
- I18nextI18n、defaultInitialization
- setLanguage、language、setWritingDirection、setHtml
- remoteLoadPkg、loadLocalPackage、getActivePkg、getResourceBundle
- tt、ttExist（翻译/存在性检测）
- tfield、tparam、tcommonField、tcommonParam（领域文案工具）
- i18next（底层实例访问）

## 快速开始
```ts
import { i18next, defaultInitialization, loadLocalPackage, remoteLoadPkg, setLanguage } from '@kordar-lib/i18n'
import { initReactI18next } from 'react-i18next'

// 1) 初始化 i18next
const ins = i18next()
ins.use(initReactI18next).init({ ...defaultInitialization, debug: false, fallbackLng: 'zh-CN' })

// 2) 加载本地可选语言列表
loadLocalPackage([
  { key: 'en', value: 'en', name: 'English' },
  { key: 'zh-CN', value: 'zh-CN', name: '简体中文' }
])

// 3) 远程加载语言包（按需）
remoteLoadPkg('zh-CN', () => Promise.resolve({ code: 200, data: { Page: { Hello: '你好' } } }))

// 4) 切换语言
setLanguage('zh-CN')
```

组件内翻译：
```ts
import { tt, tfield, tparam } from '@kordar-lib/i18n'

tt('Hello', 'Page')                          // "你好"
tfield({ fields: { name: '名称' } }, 'name') // "名称"
tparam(undefined, 'size', 'Size')            // "Size"（默认）
```

写字方向支持（如阿语）：
```ts
import { setWritingDirection } from '@kordar-lib/i18n'
setWritingDirection('ar', 'rtl')
```

## 约定命名空间
- 推荐使用 Page/Message 等命名空间组织页面与通用文案
- t(keys, ns, default?) 与 tt/ttExist 在命名空间下工作

## 构建与类型（Monorepo：npm）
在仓库根目录执行：
```bash
npm install
npm run -w @kordar-lib/i18n build
```

类型检查：
```bash
npm exec -w @kordar-lib/i18n -- tsc -p tsconfig.json --noEmit
```

## 许可证
MIT
npm package: @kordar-lib/iconfont
Description: 内置 IconFont 资源打包：包含 iconfont.css/woff/ttf/js 等文件，构建时提取为 dist/index.min.css，便于在任意项目中直接引入统一图标集。
Latest version: 2.0.0

# @kordar-lib/iconfont

内置 IconFont 资源打包：包含 iconfont.css/woff/ttf/js 等文件，构建时提取为 dist/index.min.css，便于在任意项目中直接引入统一图标集。

## 使用
样式引入（推荐）：
```ts
import '@kordar-lib/iconfont/dist/index.min.css'
```

HTML 使用：
```html
<i class="iconfont icon-home"></i>
```

如需运行时加载 JS（按你的 iconfont 配置），可在应用入口引入：
```ts
import '@kordar-lib/iconfont/dist/index.js' // 如需要
```

## 小贴士
- 若你使用 createFromIconfontCN（@ant-design/icons），可将 scriptUrl 指向你自己的 IconFont 在线地址
- 本包主要提供一份内置的基础图标与 CSS，便于模板/组件示例快速运行

## 构建（Monorepo：npm）
在仓库根目录执行：
```bash
npm install
npm run -w @kordar-lib/iconfont build
```

类型检查：
（本包主要为样式与静态资源，无需类型检查）

## 许可证
MIT
npm package: @kordar-lib/menus
Description: 菜单与树结构工具库：提供通用侧边栏节点类型、菜单生成服务、二叉树索引、选择树等能力，便于在不同 UI 框架中复用菜单与 Tab 数据结构。
Latest version: 2.0.0

# @kordar-lib/menus

菜单与树结构工具库：提供通用侧边栏节点类型、菜单生成服务、二叉树索引、选择树等能力，便于在不同 UI 框架中复用菜单与 Tab 数据结构。

## 导出
- BinaryNode, NODE_TYPE：用于路径搜索的二叉树工具
- MenuService：通用菜单服务（生成侧边栏、路径索引、节点缓存）
- TabMenuService：基于根节点拆分 Tab 的菜单服务
- MenuTree：将原始数组转换为树
- SelectionTree/SelectionTreeItem：选择树结构
- SideBarItem：侧边栏节点类型

## 快速使用
```ts
import {MenuService, type SideBarItem} from '@kordar-lib/menus'

// 原始菜单数据（示例）
const raw = [
  { id: 1, pid: 0, title: '系统', router_name: 'system' },
  { id: 2, pid: 1, title: '用户管理', router_name: 'user' },
  { id: 3, pid: 1, title: '角色管理', router_name: 'role' }
]

// 映射成通用节点结构（支持 UI 框架无关的字段）
const mapper = (ele: any): SideBarItem<number> => ({
  id: ele.id,
  pid: ele.pid,
  text: ele.title,
  label: ele.title,
  key: ele.id,
  path: ele.router_name
})

const menusvc = new MenuService<number>(0, mapper)
menusvc.init(raw)

// 侧边栏数据
const menus = menusvc.menus()

// 通过 id 反查节点
const item = menusvc.getItemById(2)

// 计算路径展开链（父链/自身）
const openKeys = menusvc.searchPathIndex(3) // [1,3]
```

Tab 导航场景：
```ts
import {TabMenuService} from '@kordar-lib/menus'

const tabsSvc = new TabMenuService<number>(0, mapper)
tabsSvc.init(raw)
const tabs = tabsSvc.getTabs() // 顶层 pid===root 的条目
```

## 类型说明
SideBarItem（核心字段）
- id：唯一标识（string | number）
- text/label：展示文本
- pid：父节点 id
- path/routerName/url：路由或地址字段
- children：子节点数组

## 构建与类型（Monorepo：npm）
在仓库根目录执行：
```bash
npm install
npm run -w @kordar-lib/menus build
```

类型检查：
```bash
npm exec -w @kordar-lib/menus -- tsc -p tsconfig.json --noEmit
```

## 许可证
MIT
npm package: @kordar-lib/request
Description: 基于 axios 的轻量请求封装，提供统一的 Request 接口与 AxiosRequest 实现，便于在业务中注入请求实例（如在模板项目的 init 中统一管理），并通过拦截器完成鉴权、语言、响应解包与错误处理。
Latest version: 2.0.0

# @kordar-lib/request

基于 axios 的轻量请求封装，提供统一的 Request 接口与 AxiosRequest 实现，便于在业务中注入请求实例（如在模板项目的 init 中统一管理），并通过拦截器完成鉴权、语言、响应解包与错误处理。

## 特性
- Request 接口：get/post/put/delete（支持泛型返回值）
- AxiosRequest：axios.create + 请求/响应拦截器
- RequestOption 直接复用 AxiosRequestConfig（与 axios 参数保持一致）
- 内置下载辅助：octetStreamByBlobDownload

## 安装
```bash
npm install @kordar-lib/request axios
```

## 基本用法

创建请求实例（配置 + 拦截器）：

```ts
import {AxiosRequest} from '@kordar-lib/request'
import type {AxiosError, AxiosResponse, InternalAxiosRequestConfig} from 'axios'

export const request = new AxiosRequest(
  { timeout: 30000, baseURL: '/api' },
  (cfg: InternalAxiosRequestConfig) => {
    const headers = cfg.headers
    ;(headers as any).Locale = 'zh-CN'
    ;(headers as any).Token = 'your-token'
    return cfg
  },
  (resp: AxiosResponse<any>) => resp.data,
  (err: AxiosError) => {
    throw err
  }
)
```

调用：

```ts
const data = await request.get<{list: any[]}>('resource/demo/list', {page: 1})
```

## 约定的后端响应结构（推荐）

项目模板中普遍使用：

```ts
export type ApiResp<T = any> = {
  code: number
  message?: string
  data?: T
  count?: number
}
```

把响应统一解包为 ApiResp，业务侧更易处理：

```ts
import type {AxiosResponse} from 'axios'
import type {ApiResp} from './types'

const beforeResponse = (resp: AxiosResponse<ApiResp>) => resp.data
```

进一步把 data 直接返回（按你的业务约定自行处理 code）：

```ts
import type {AxiosResponse} from 'axios'

type ApiResp<T> = { code: number; message?: string; data?: T; count?: number }

const beforeResponse = <T>(resp: AxiosResponse<ApiResp<T>>) => {
  const r = resp.data
  if (r.code !== 200) throw new Error(r.message || 'Request failed')
  return r.data as T
}
```

## 自定义并挂载 Request（推荐模式）

应用初始化时创建 request 实例，然后通过你自己的 init 模块统一注入：

```ts
// src/init.ts
import type {Request} from '@kordar-lib/request'

let requestInstance: Request

export function loadRequest(request: Request) {
  requestInstance = request
}

export function getRequest(): Request {
  return requestInstance
}
```

业务 service 中使用：

```ts
import {getRequest} from './init'

export function listUsers() {
  return getRequest().post('resource/user/list', { page: 1, rows: 20 })
}
```

## 下载辅助

```ts
import {octetStreamByBlobDownload} from '@kordar-lib/request'

octetStreamByBlobDownload([new Uint8Array([1,2,3])], 'demo.bin')
```

## 构建（Monorepo：npm）

在仓库根目录执行：

```bash
npm install
npm run -w @kordar-lib/request build
```

类型检查：

```bash
npm exec -w @kordar-lib/request -- tsc -p tsconfig.json --noEmit
```
npm package: @kordar/easyui
Description: Core UI component library for the Kordar Web-Libs monorepo, built on top of `rc-easyui`.
Latest version: 2.0.0

# @kordar/easyui

Core UI component library for the Kordar Web-Libs monorepo, built on top of `rc-easyui`.

## Installation

```bash
npm install @kordar/easyui
# Ensure peer dependencies are installed
npm install react react-dom rc-easyui rc-drawer
```

## Usage

### Styles

```scss
@import 'rc-easyui/dist/themes/material/easyui.css';
@import 'rc-easyui/dist/themes/react.css';
@import '@kordar-lib/iconfont/dist/index.min.css';
@import '@kordar/easyui/dist/index.min.css';
```

### Basic Component Usage

```tsx
import React from 'react';
import { AdminLayout, TabsPanel } from '@kordar/easyui';

const App = () => {
  return (
    <AdminLayout>
      <TabsPanel />
    </AdminLayout>
  );
};

export default App;
```

### Using Hooks

```tsx
import { useLocale, useTheme } from '@kordar/easyui';

const MyComponent = () => {
  const { locale, setLocale } = useLocale();
  const { theme, setTheme } = useTheme();

  return (
    <div>
      Current Locale: {locale}
      <button onClick={() => setTheme('dark')}>Switch to Dark Mode</button>
    </div>
  );
};
```

## API Overview

### Components

#### Layout & Panels
- `AdminLayout`: Main layout for admin dashboards.
- `FullBodyLayout`: Layout that occupies the full viewport.
- `TabsPanel`: Tabbed container component.
- `DefaultPanel`: Standard panel component.
- `DrawerPanel`: Drawer/Sidebar panel.
- `Breadcrumb`: Breadcrumb navigation.

#### Form
- `CheckboxGroupBox`: Group of checkboxes.
- `RadioGroupBox`: Group of radio buttons.

#### Grid
- `withCheckGrid`: HOC for grid with checkbox selection.
- `withRadioGrid`: HOC for grid with radio selection.

#### Message & Notification
- `AlertMessager`: Alert dialogs.
- `InteractiveMessager`: Interactive message dialogs.
- `Toast`: Toast notifications.
- `Notification`: System notifications.

#### Access Control
- `Access`: Component for handling permission-based rendering.

### Hooks
- `useLocale`: Manage application locale.
- `useTheme`: Manage application theme.
- `useRefDialog`: Hook for managing dialog references.

## Build

To build the package:

```bash
npm run build
```

The output will be generated in the `dist` directory.
npm package: @kordar/easyui-datepicker
Description: 基于 `flatpickr` 与 `rc-easyui` 的日期选择封装，提供一个可插拔的 `TextBox` 日期输入组件，以及轻量的 `flatpickr` 初始化/销毁工具方法。
Latest version: 2.0.0

# @kordar/easyui-datepicker

基于 `flatpickr` 与 `rc-easyui` 的日期选择封装，提供一个可插拔的 `TextBox` 日期输入组件，以及轻量的 `flatpickr` 初始化/销毁工具方法。

## 安装
```bash
npm install @kordar/easyui-datepicker flatpickr rc-easyui moment
```

## 快速上手（组件）

```tsx
import React from 'react'
import { DatepickerBox } from '@kordar/easyui-datepicker'

export default function Demo() {
  return (
    <DatepickerBox
      value={new Date()}
      placeholder="请选择日期"
      options={{ dateFormat: 'Y-m-d' }}
      onChange={(dates, str) => console.log(dates, str)}
    />
  )
}
```

### 组件 API

```ts
export interface DatepickerBoxProps {
  value?: string | Date | Date[]
  options?: Partial<Options>    // flatpickr Options
  editable?: boolean
  placeholder?: string
  showAddon?: boolean           // 是否显示右侧图标（打开/清空）

  onInit?: (instance: FlatpickrInstance | null) => void
  onChange?: (selectedDates: Date[], dateStr: string, instance: FlatpickrInstance) => void
  onClean?: () => void
  onDestroy?: () => void
}
```

## 工具方法（flatpickr）

```ts
import { initFlatpickrOptions, createFp, cleanFp } from '@kordar/easyui-datepicker'

// 全局默认：只需初始化一次
initFlatpickrOptions({ locale: Mandarin, dateFormat: 'Y-m-d' })

// 局部创建
const fp = createFp({
  input: '#my-input',            // 或 HTMLInputElement
  value: new Date(),
  options: { enableTime: true },
  onChange: (dates, str, inst) => {}
})

// 销毁
cleanFp(fp)
```

## 注意事项
- 组件依赖 `flatpickr`、`rc-easyui`；样式已内置 `flatpickr/dist/flatpickr.min.css`，并附带图标字体。
- `options` 与 `flatpickr` 官方 Options 类型完全一致，可自由扩展（如时间选择、范围、多选等）。

## 构建与类型（Monorepo：npm）

在仓库根目录执行：
```bash
npm install --legacy-peer-deps
(cd easyui/easyui-datepicker && npm run build)
```

类型检查（在包目录执行）：
```bash
npm exec -- tsc -p tsconfig.json --noEmit
```
npm package: @kordar/easyui-tpl
Description: 基于 rc-easyui 和 @kordar 系列库的后台模板工程。内置布局、菜单/标签联动、权限与国际化示例，可作为业务项目的起步模板。
Latest version: 2.0.5

# @kordar/easyui-tpl

基于 rc-easyui 和 @kordar 系列库的后台模板工程。内置布局、菜单/标签联动、权限与国际化示例，可作为业务项目的起步模板。

## 特性
- 布局：BaseLayout（头部工具区 + 侧边栏 + 标签页 + 内容区）
- 列表与表单：useLocalTable/useRemoteTable、PaginationPanel、通用表单工具
- 权限：基于 @kordar-lib/base 的权限校验与按钮显隐
- 国际化：@kordar-lib/i18n 集成 + 示例语言包（en/zh_CN）
- 示例路由：用户/角色/权限/字典/路由/设置等页面

## 安装
```bash
npm install
```

## 开发
```bash
npm run -w @kordar/easyui-tpl dev
```
默认入口：/examples/main.tsx（Vite）

## 构建
```bash
npm run -w @kordar/easyui-tpl build
```
产物输出到 dist（包含 ESM、CJS 与 index.min.css）。

## 关键依赖（外部）
- React 生态：react、react-dom、react-router、react-router-dom、react-i18next
- UI：rc-easyui、rc-drawer、@kordar/easyui、@kordar/react-screen
- 工具：axios、lodash-es
- Kordar 库：@kordar-lib/base、common、crud、i18n、menus、reducers、request

## 样式
示例样式在 examples/example.scss 中已引入：
```scss
@import '@kordar-lib/iconfont/dist/index.min.css';
@import '@kordar/easyui/dist/index.min.css';
@import '@kordar/react-screen/dist/index.min.css';
```
index.html 会按本地持久化主题加载 rc-easyui 主题与 react.css。

## 初始化（示例）
examples/init.ts 展示了语言包与请求初始化的方式。你可以按需接入实际后端接口，完善登录、菜单、权限等配置。

## 目录
- src/components：基础组件（布局、工具条、提示等）
- src/composable：通用 Hook（启动器、表格、标签页联动等）
- src/service：Admin/Rbac/Resource 等服务封装
- src/views：页面示例（含搜索、表格、表单/对话框）
- examples：演示应用（路由、Store、入口）

## 许可证
MIT