@fe-free/core 6.0.6 → 6.0.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @fe-free/core
 
+## 6.0.7
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/icons@6.0.7
+  - @fe-free/tool@6.0.7
+
 ## 6.0.6
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,172 @@
+# @fe-free/core
+
+基于 React + Antd + @ant-design/pro-components 的业务核心组件与工具库，提供 CRUD、表单、布局、路由、上传、树等能力。
+
+## 安装与依赖
+
+```bash
+pnpm add @fe-free/core
+```
+
+**样式**：库内已引入 `style.scss`。`tailwind.css`（core 组件依赖的 Tailwind 样式）需在**项目入口**单独引入一次，否则相关组件样式可能不生效。例如在应用根入口（如 `main.tsx` 或 `App.tsx`）中：
+
+```ts
+import '@fe-free/core/src/tailwind.css';
+```
+
+（若使用构建产物路径不同，请按实际路径调整。）
+
+## 技术栈与约定
+
+- **技术栈**：React、TypeScript、Antd、@ant-design/pro-components、Tailwindcss、react-router-dom
+- **目录命名**：小写 + 下划线连接（如 `page_layout`、`use_global_request`）
+- **导出方式**：使用具名导出 `export { X }` / `export type { X }`，不使用 `export default`
+
+## 模块概览
+
+### 应用壳与路由
+
+| 导出        | 说明                                                                                                                               |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `CoreApp`   | 应用根组件：ConfigProvider + ProConfigProvider + Router + i18n + 可选更新检测，需传入 `basename`、`children`                       |
+| `routeTool` | 路由工具：`setNavigate`/`setBaseName`（由 CoreApp 内部设置）、`navigateTo`、`setSearchParams`、`changeSearchParams`、`generateUrl` |
+
+**使用示例**：入口用 `<CoreApp basename="/app">{children}</CoreApp>` 包裹；非 React 上下文中可用 `routeTool.getNavigate()`、`routeTool.setSearchParams({ tab: '1' })` 等。
+
+### CRUD 与表格
+
+| 导出                          | 说明                                                                                                                                                           |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `CRUD`                        | 增删改查容器：`actions`（create/read/read_detail/update/delete/batch_delete）、`tableProps`（ProTable 配置，需含 `rowKey`）、详情/新建/编辑弹窗、删除/批量删除 |
+| `OperateDelete` / `useDelete` | 删除操作按钮与逻辑                                                                                                                                             |
+| `CRUDOfList` / `CRUDOfPure`   | 列表型/纯表单型 CRUD 变体                                                                                                                                      |
+
+表格通过 `tableProps` 传入，类型兼容 ProTable（`columns`、`request` 等），默认 `search: false`，需搜索时在列上设置 `search: true`。
+
+### 布局与 Tab
+
+| 导出             | 说明                                                                                             |
+| ---------------- | ------------------------------------------------------------------------------------------------ |
+| `PageLayout`     | 三区布局：`start` / `children` / `end`，`direction` 为 horizontal（默认）或 vertical             |
+| `PageLayoutTabs` | 上 Tab + 下内容区，Tab 与 URL searchParams 同步（`tabsProps.items`：`key`、`label`、`children`） |
+| `Tabs`           | 对 antd Tabs 的封装，可选 `withSearchParams` 与 `tabKey` 同步到 URL                              |
+
+### ProForm / ProTable 扩展
+
+| 导出                                                                              | 说明                                            |
+| --------------------------------------------------------------------------------- | ----------------------------------------------- |
+| `ProFormJSON` / `ProFormJavascript` / `ProFormEditor`                             | JSON/JS/富文本编辑                              |
+| `ProFormRecord` / `ProFormRecordArray`                                            | 键值对/键值对数组                               |
+| `ProFormSwitchNumber` / `ProFormSwitchOptions` / `SwitchNumber` / `SwitchOptions` | 开关数值/选项                                   |
+| `ProFormListBoolean` / `ProFormListNumber` / `ProFormListText` 等                 | 列表型表单项                                    |
+| `ProFormListHelper` / `ProFormListModalHelper`                                    | 列表辅助                                        |
+| `ProFormImageUpload` / `ProFormUpload` / `ProFormUploadDragger` 等                | 上传表单项                                      |
+| `proFormSelectSearchProps`                                                        | 下拉搜索 + 拼音过滤的 `fieldProps`              |
+| `customValueTypeMap` / `CustomValueTypeEnum`                                      | Pro 表格/表单自定义 valueType（CoreApp 已集成） |
+
+### 树与文件树
+
+| 导出             | 说明                     |
+| ---------------- | ------------------------ |
+| `Tree`           | 树组件（见 `TreeProps`） |
+| `FileTree`       | 文件树展示               |
+| `flatToTreeData` | 扁平数据转树结构         |
+
+### 列表与滚动
+
+| 导出                                                   | 说明                                                                                                                 |
+| ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
+| `InfiniteList`                                         | 无限滚动列表：`request`（分页接口）、`renderItem`、`pageSize`、`gridClassName`（内部使用 `useGlobalInfiniteScroll`） |
+| `ScrollFixed` / `useScrollFixed` / `getScrollbarWidth` | 滚动固定与滚动条宽度                                                                                                 |
+
+### ahooks / Hooks
+
+| 导出                      | 说明                                                    |
+| ------------------------- | ------------------------------------------------------- |
+| `useGlobalInfiniteScroll` | 全局无限滚动 hook，供 InfiniteList 或自定义无限列表使用 |
+| `useGlobalRequest`        | 全局请求 hook                                           |
+| `useLocalforageState`     | 基于 localforage 的本地持久化 state                     |
+
+### 上传与文件
+
+| 导出                                                       | 说明          |
+| ---------------------------------------------------------- | ------------- |
+| `Upload` / `UploadDragger`                                 | 上传组件      |
+| `ImageUpload` / `ImageUploadDragger` / `AvatarImageUpload` | 图片/头像上传 |
+| `FileCard`                                                 | 文件卡片展示  |
+
+### 编辑器与展示
+
+| 导出                                          | 说明                 |
+| --------------------------------------------- | -------------------- |
+| `Editor`                                      | 代码编辑器           |
+| `EditorJSON` / `EditorLogs` / `EditorMention` | JSON/日志/提及编辑器 |
+| `DataViewer`                                  | 数据查看             |
+| `Markdown` / `CustomMarkdown`                 | Markdown 渲染        |
+
+### 其它
+
+| 导出                                | 说明                   |
+| ----------------------------------- | ---------------------- |
+| `LoadingButton`                     | 带 loading 的按钮      |
+| `Copy`                              | 复制到剪贴板           |
+| `Record` / `RecordArray`            | 键值对/键值对数组展示  |
+| `NumberSlider` / `PercentageSlider` | 数字/百分比滑块        |
+| `RequestError` / `initErrorHandle`  | 请求错误与全局错误处理 |
+| `downloadInterceptor`               | 下载拦截               |
+
+### 主题
+
+| 导出             | 说明     |
+| ---------------- | -------- |
+| `themeVariables` | 主题变量 |
+
+### Tailwind Token 参考（tailwind.css）
+
+`tailwind.css` 通过 `@theme` 定义了以下 CSS 变量，引入后可在项目中使用对应 Tailwind 类名（如 `text-primary`、`bg-theme03`、`text-text-color-03` 等）。完整定义见 `packages/core/src/tailwind.css`。
+
+| 类别          | 变量名                  | 说明/用途 |
+| ------------- | ----------------------- | --------- |
+| **主色**      | `--color-primary`       | 主色      |
+|               | `--color-theme09`       | 主色深    |
+|               | `--color-theme08`       | 主色      |
+|               | `--color-theme05`       | 主色中    |
+|               | `--color-theme03`       | 主色浅    |
+|               | `--color-theme02`       | 主色最浅  |
+| **语义色·红** | `--color-red09`         | 红深      |
+|               | `--color-red08`         | 红        |
+|               | `--color-red05`         | 红中      |
+|               | `--color-red03`         | 红浅      |
+| **语义色·绿** | `--color-green09`       | 绿深      |
+|               | `--color-green08`       | 绿        |
+|               | `--color-green05`       | 绿中      |
+|               | `--color-green03`       | 绿浅      |
+| **语义色·黄** | `--color-yellow09`      | 黄深      |
+|               | `--color-yellow08`      | 黄        |
+|               | `--color-yellow05`      | 黄中      |
+|               | `--color-yellow03`      | 黄浅      |
+| **文字**      | `--text-color-01`       | 文字最深  |
+|               | `--text-color-02`       | 文字      |
+|               | `--text-color-03`       | 文字次要  |
+|               | `--text-color-04`       | 文字最浅  |
+| **边框**      | `--border-color-01`     | 边框浅    |
+|               | `--border-color-02`     | 边框中    |
+|               | `--border-color-03`     | 边框深    |
+| **背景**      | `--background-color-01` | 背景最浅  |
+|               | `--background-color-02` | 背景浅    |
+|               | `--background-color-03` | 背景中    |
+|               | `--background-color-04` | 背景深    |
+
+使用示例：`className="text-primary"`、`className="bg-theme03"`、`className="text-text-color-03"`。与 Antd 主题变量（`themeVariables`）配合时，可保持整站色彩一致。
+
+当你在本仓库或引用 `@fe-free/core` 的项目中编写代码时，可参考以下约定：
+
+1. **应用入口**：使用 `<CoreApp basename="...">` 包裹路由，以保证路由、i18n、Pro 组件 valueType 等生效。
+2. **CRUD 页**：优先使用 `CRUD` + `tableProps`（含 `rowKey`、`columns`、`request`），通过 `actions`、`detailForm`、`requestCreateByValues`、`requestUpdateByValues`、`requestDeleteByRecord` 等接业务接口。
+3. **带 Tab 的页面**：用 `PageLayoutTabs` 或 `Tabs` + `withSearchParams`，Tab 与 URL 同步，便于分享与刷新保持状态。
+4. **表单**：在 ProForm 中需要 JSON/键值对/列表/上传时，使用本库的 `ProForm*` 组件；下拉搜索用 `proFormSelectSearchProps`。
+5. **路由跳转/参数**：使用 `routeTool.navigateTo`、`routeTool.setSearchParams`、`routeTool.changeSearchParams`，不要直接操作 `window.location`（除非确需整页跳转）。
+6. **命名与导出**：新模块目录用小写+下划线；对外一律具名导出 `export { X }` / `export type { X }`。
+7. **样式**：库内已引入 `style.scss`；**`tailwind.css` 需在项目入口单独 `import '@fe-free/core/src/tailwind.css'`**，否则 core 组件所需的 Tailwind 类可能不生效。组件类名多带 `fec-` 前缀，避免与业务样式冲突。
+
+更多细节以 `src/index.ts` 的导出和各自模块的 TypeScript 类型为准。

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fe-free/core",
-  "version": "6.0.6",
-  "description": "",
+  "version": "6.0.7",
+  "description": "React 业务核心组件库：CRUD、ProForm 扩展、布局、路由、树、上传等（Antd + ProComponents）",
   "license": "ISC",
   "author": "",
   "main": "./src/index.ts",
@@ -52,8 +52,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "6.0.6",
-    "@fe-free/tool": "6.0.6"
+    "@fe-free/icons": "6.0.7",
+    "@fe-free/tool": "6.0.7"
   },
   "scripts": {
     "i18n-extract": "rm -rf ./src/locales/zh-CN && npx i18next-cli extract"

package/src/index.ts

@@ -7,7 +7,7 @@ export { LoadingButton } from './button';
 export { Copy } from './copy';
 export type { CopyProps } from './copy';
 export { CoreApp } from './core_app';
-export { CRUD, CRUDDetail, OperateDelete, useDelete } from './crud';
+export { CRUD, OperateDelete, useDelete } from './crud';
 export type { CRUDDetailProps, CRUDProps, CRUDRef } from './crud';
 export { CRUDOfList } from './crud_of_list';
 export type { CRUDOfListProps } from './crud_of_list';
@@ -32,8 +32,8 @@ export {
   ProFormEditor,
   ProFormImageUpload,
   ProFormImageUploadDragger,
-  ProFormJSON,
   ProFormJavascript,
+  ProFormJSON,
   ProFormListBoolean,
   ProFormListHelper,
   ProFormListModalHelper,
@@ -41,15 +41,15 @@ export {
   ProFormListText,
   ProFormRecord,
   ProFormRecordArray,
+  proFormSelectSearchProps,
   ProFormSwitchNumber,
   ProFormSwitchOptions,
   ProFormUpload,
   ProFormUploadDragger,
   SwitchNumber,
   SwitchOptions,
-  proFormSelectSearchProps,
 } from './form';
-export { RequestError, initErrorHandle } from './global/error';
+export { initErrorHandle, RequestError } from './global/error';
 export { downloadInterceptor } from './global/interceptors';
 export { InfiniteList } from './infinite_list';
 export type { InfiniteListProps } from './infinite_list';
@@ -60,13 +60,13 @@ export type { PageLayoutProps, PageLayoutTabsProps } from './page_layout';
 export { Record, RecordArray } from './record';
 export type { RecordArrayProps, RecordProps } from './record';
 export { routeTool } from './route';
-export { ScrollFixed, getScrollbarWidth, useScrollFixed } from './scroll';
+export { getScrollbarWidth, ScrollFixed, useScrollFixed } from './scroll';
 export { NumberSlider, PercentageSlider } from './slider';
 export type { NumberSliderProps, PercentageSliderProps } from './slider';
 export { Tabs } from './tabs';
 export type { TabsProps } from './tabs';
 export { themeVariables } from './theme';
-export { FileTree, Tree, flatToTreeData } from './tree';
+export { FileTree, flatToTreeData, Tree } from './tree';
 export type { FileTreeProps, TreeProps } from './tree';
 export {
   AvatarImageUpload,

package/src/tabs/index.tsx

@@ -2,28 +2,26 @@ import type { TabsProps as AntdTabsProps } from 'antd';
 import { Tabs as AntdTabs } from 'antd';
 import classNames from 'classnames';
 import { useSearchParams } from 'react-router-dom';
+
 import { routeTool } from '../route';
+
 import './style.scss';
 
-interface TabsProps extends AntdTabsProps {
+interface TabsProps {
   /** 自动时设置和同步 searchParams tab */
   withSearchParams?: boolean;
   /** 设置 searchParams 的类型，默认 set */
   searchParamsType?: 'set' | 'change';
   /** 默认 tab */
   tabKey?: string;
+
+  tabProps?: AntdTabsProps;
 }
 
 function Tabs(props: TabsProps) {
-  const {
-    withSearchParams,
-    searchParamsType = 'set',
-    tabKey = 'tab',
-    activeKey,
-    onChange,
-    className,
-    ...rest
-  } = props;
+  const { withSearchParams, searchParamsType = 'set', tabKey = 'tab', tabProps } = props;
+  const { className, activeKey, onChange, ...rest } = tabProps || {};
+
   const [searchParams] = useSearchParams();
   const tab = searchParams.get(tabKey) || undefined;