From c21b44c44197dca38a941b275872c31053e63cd5 Mon Sep 17 00:00:00 2001 From: Meetacoo <37367461+Meetacoo@users.noreply.github.com> Date: Wed, 27 Aug 2025 18:23:14 +0800 Subject: [PATCH 1/2] feat: api.md --- README.md | 633 ++++++++++++++++++++++++++++++++++++++++++++- doc/api.md | 67 ++++- doc/async-enum.js | 90 +++++++ doc/example.json | 104 ++++++++ doc/format-enum.js | 85 ++++++ doc/list-enum.js | 100 +++++++ doc/multi-enum.js | 111 ++++++++ doc/new-enum.js | 112 ++++++++ doc/style.scss | 5 - doc/summary.md | 17 ++ 10 files changed, 1306 insertions(+), 18 deletions(-) create mode 100644 doc/async-enum.js create mode 100644 doc/format-enum.js create mode 100644 doc/list-enum.js create mode 100644 doc/multi-enum.js create mode 100644 doc/new-enum.js diff --git a/README.md b/README.md index d27f74c..1825428 100644 --- a/README.md +++ b/README.md @@ -13,18 +13,29 @@ npm i --save @kne/react-enum ``` -### 示例 +### 概述 -#### 示例样式 +枚举值管理和展示组件，用于统一管理应用中的枚举数据，如性别、状态、类型等选项列表。 + +## 何时使用 + +- 需要展示枚举值的描述文本时 +- 需要将枚举列表渲染为下拉框、单选框等表单组件时 +- 需要统一管理应用中的枚举数据时 +- 需要支持多语言的枚举描述时 + +## 特性 + +- 📦 统一的枚举数据管理 +- 🔄 支持同步/异步加载 +- 📡 内置LRU缓存机制 +- 🌍 支持多语言 +- 🎨 多种格式化方式 +- 🔧 灵活的渲染函数 -```scss -.ant-card { - border-color: black; - text-align: center; - width: 200px; -} -``` + +### 示例 #### 示例代码 @@ -80,10 +91,610 @@ render(); ``` +- 基础用法 +- 展示枚举的基本使用，包括获取单个枚举值和枚举列表 +- _Enum(@kne/current-lib_react-enum)[import * as _ReactEnum from "@kne/react-enum"],antd(antd),remoteLoader(@kne/remote-loader) + +```jsx +const { default: Enum } = _Enum; +const { createWithRemoteLoader } = remoteLoader; +const { Space, Select, Divider } = antd; +const BaseExample = createWithRemoteLoader({ + modules: ['components-core:Global@PureGlobal'] +})(({ remoteModules }) => { + const [PureGlobal] = remoteModules; + return ( + { + return new Promise((resolve) => { + setTimeout(() => { + resolve([ + { value: "1", description: "启用" }, + { value: "0", description: "禁用" }, + ]); + }, 500); + }); + }, + }, + }} + > + +
+

获取单个枚举值

+ + 性别： + + + 自定义渲染： + + {(data) => {data.description}} + + +
+ +
+

获取枚举列表

+ + {(list) => { + return ( + + 可选项： + {list.map((item, index) => ( + + {item.description} + {index < list.length - 1 && "、"} + + ))} + + ); + }} + +
+ +
+

渲染为下拉框

+ + {(list) => { + return ( + + )} + +
+ + + ); +}); + +render(); +``` + +- 异步加载与缓存 +- 展示异步加载枚举数据、Loading状态和强制刷新缓存 +- _Enum(@kne/current-lib_react-enum)[import * as _ReactEnum from "@kne/react-enum"],antd(antd),remoteLoader(@kne/remote-loader),React(react) + +```jsx +const { default: Enum } = _Enum; +const { Space, Button, message } = antd; +const { useState } = React; +const { createWithRemoteLoader } = remoteLoader; + +const AsyncEnumExample = createWithRemoteLoader({ + modules: ['components-core:Global@PureGlobal'] +})(({ remoteModules }) => { + const [PureGlobal] = remoteModules; + const [refreshKey, setRefreshKey] = useState(0); + + return ( + { + // 模拟从服务器获取数据 + return new Promise((resolve) => { + setTimeout(() => { + resolve([ + { value: "active", description: "活跃" }, + { value: "inactive", description: "非活跃" }, + { value: "pending", description: "待审核" }, + { value: "banned", description: "已禁用" }, + ]); + }, 1500); + }); + }, + // 同步枚举数据 + priority: [ + { value: "low", description: "低优先级" }, + { value: "medium", description: "中优先级" }, + { value: "high", description: "高优先级" }, + { value: "urgent", description: "紧急" }, + ], + }, + }} + > + +
+

异步加载枚举（带Loading状态）

+ 正在加载用户状态...} + placeholder="--" + > + {(data) =>
当前状态：{data.description}
} + +
+ +
+

强制刷新缓存

+ + 0} + > + {(data) => data.description} + + + +
+ +
+

同步枚举数据（立即显示）

+ + + + {(data) => {data.description}} + + +
+ + + ); +}); + +render(); + +``` + +- 格式化方式 +- 展示不同的格式化方式和自定义渲染 +- _Enum(@kne/current-lib_react-enum)[import * as _ReactEnum from "@kne/react-enum"],antd(antd),remoteLoader(@kne/remote-loader) + +```jsx +const { default: Enum } = _Enum; +const { createWithRemoteLoader } = remoteLoader; +const { Space, Divider, Card } = antd; + +const FormatEnumExample = createWithRemoteLoader({ + modules: ['components-core:Global@PureGlobal'] +})(({ remoteModules }) => { + const [PureGlobal] = remoteModules; + return ( + + + + +
+ 默认格式（format="default"）： + +
+ + + +
+ 原始对象（format="origin"）： + + {(data) => ( + 
{JSON.stringify(data, null, 2)}
+ )} + +
+ + + +
+ 选项格式（format="option"）： + + {(data) => ( + label: {data.label}, value: {data.value} + )} + +
+ + + + + + + {(data) => ( + + ● {data.description} + + )} + + + + {(data) => ( + + {data.description} + + )} + + + + + + ); +}); + +render(); + +``` + +- 渲染枚举列表 +- 将枚举列表渲染为各种表单组件 +- _Enum(@kne/current-lib_react-enum)[import * as _ReactEnum from "@kne/react-enum"],antd(antd),remoteLoader(@kne/remote-loader) + +```jsx +const { default: Enum } = _Enum; +const { createWithRemoteLoader } = remoteLoader; +const { Space, Select, Radio, Checkbox, Table } = antd; + +const ListEnumExample = createWithRemoteLoader({ + modules: ['components-core:Global@PureGlobal'] +})(({ remoteModules }) => { + const [PureGlobal] = remoteModules; + return ( + + +
+

渲染为 Select 下拉框

+ + {(list) => ( + ({ + value: item.value, + label: item.description, + }))} + /> + )} + +
+ +
+

渲染为 Radio 单选组

+ + {(list) => ( + + {list.map((item) => ( + + {item.description} + + ))} + + )} + +
+ +
+

渲染为 Checkbox 多选组

+ + {(list) => ( + + {list.slice(0, 4).map((item) => ( + + {item.description} + + ))} + + )} + +
+ +
+

渲染为 Table 表格

+ + {(list) => ( + ({ ...item, key: item.value }))} + /> + )} + + + + + ); +}); + +render(); diff --git a/doc/multi-enum.js b/doc/multi-enum.js new file mode 100644 index 0000000..8f6f01a --- /dev/null +++ b/doc/multi-enum.js @@ -0,0 +1,111 @@ +const { default: Enum } = _Enum; +const { createWithRemoteLoader } = remoteLoader; +const { Space, Card, Tag } = antd; + +const MultiEnumExample = createWithRemoteLoader({ + modules: ['components-core:Global@PureGlobal'] +})(({ remoteModules }) => { + const [PureGlobal] = remoteModules; + return ( + + + + + {([countries, languages, timezones]) => ( + +
+ 国家列表： + + {countries.map(item => ( + {item.description} + ))} + +
+
+ 语言列表： + + {languages.map(item => ( + {item.description} + ))} + +
+
+ 时区列表： + + {timezones.map(item => ( + {item.description} + ))} + +
+ + )} + + + + + + 用户来自 + + {(data) => {data.description}} + + ，使用 + + {(data) => {data.description}} + + ，时区为 + + {(data) => {data.description}} + + + + + + +
+ 不存在的枚举模块： + 枚举加载失败} + /> +
+
+ 不存在的枚举值（显示占位符）： + +
+ + + + + ); +}); + +render(); diff --git a/doc/new-enum.js b/doc/new-enum.js new file mode 100644 index 0000000..972808e --- /dev/null +++ b/doc/new-enum.js @@ -0,0 +1,112 @@ +const { default: Enum } = _Enum; +const { createWithRemoteLoader } = remoteLoader; +const { Space, Select, Divider } = antd; +const BaseExample = createWithRemoteLoader({ + modules: ['components-core:Global@PureGlobal'] +})(({ remoteModules }) => { + const [PureGlobal] = remoteModules; + return ( + { + return new Promise((resolve) => { + setTimeout(() => { + resolve([ + { value: "1", description: "启用" }, + { value: "0", description: "禁用" }, + ]); + }, 500); + }); + }, + }, + }} + > + +
+

获取单个枚举值

+ + 性别： + + + 自定义渲染： + + {(data) => {data.description}} + + +
+ +
+

获取枚举列表

+ + {(list) => { + return ( + + 可选项： + {list.map((item, index) => ( + + {item.description} + {index < list.length - 1 && "、"} + + ))} + + ); + }} + +
+ +
+

渲染为下拉框

+ + {(list) => { + return ( + + )} + +
+ + + ); +}); + +render(); \ No newline at end of file diff --git a/doc/style.scss b/doc/style.scss index 9c12ac9..e69de29 100644 --- a/doc/style.scss +++ b/doc/style.scss @@ -1,5 +0,0 @@ -.ant-card { - border-color: black; - text-align: center; - width: 200px; -} diff --git a/doc/summary.md b/doc/summary.md index e69de29..df01e99 100644 --- a/doc/summary.md +++ b/doc/summary.md @@ -0,0 +1,17 @@ +枚举值管理和展示组件，用于统一管理应用中的枚举数据，如性别、状态、类型等选项列表。 + +## 何时使用 + +- 需要展示枚举值的描述文本时 +- 需要将枚举列表渲染为下拉框、单选框等表单组件时 +- 需要统一管理应用中的枚举数据时 +- 需要支持多语言的枚举描述时 + +## 特性 + +- 📦 统一的枚举数据管理 +- 🔄 支持同步/异步加载 +- 📡 内置LRU缓存机制 +- 🌍 支持多语言 +- 🎨 多种格式化方式 +- 🔧 灵活的渲染函数 From fe5847222ad98ce4284859b87df0c287f3e7aa28 Mon Sep 17 00:00:00 2001 From: Meetacoo <37367461+Meetacoo@users.noreply.github.com> Date: Wed, 27 Aug 2025 18:23:30 +0800 Subject: [PATCH 2/2] chore: update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c61ee9b..76254ca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne/react-enum", - "version": "0.1.10", + "version": "0.1.11", "description": "管理和获取枚举值.", "syntax": { "esmodules": true