diff --git "a/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" "b/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" index 0bdb4aedce..7a53a59c4a 100644 --- "a/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" +++ "b/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" @@ -114,7 +114,6 @@ NutUI 的演进伴随着移动端技术的演进,从移动端到跨端,从 V 定义组件 Props 前,**必须(MUST)**继承全局抽象类型 `BasicComponent`(或 `MiniProgramBasicProps` 等多端公共类型),确保组件基础能力的统一。 2. **强类型声明与规范**: - - **禁止 `any`**:Props 参数需使用显式联合类型,严禁使用 `any` 逃避类型检查。 - **事件命名**:对外事件统一以 `onXXX`(小驼峰)命名。 - **精简通信**:事件通信仅传递必要数据,避免携带冗余的组件实例或私有变量。 @@ -150,7 +149,6 @@ export const Button = React.forwardRef>( ### 5.4 组件防御与容灾红线 1. **防阻断式崩溃**: - - 针对入参异常、异步失败、逻辑边界等风险点,必须内置 `try-catch` 或提供兜底 UI。 - 组件内部错误不得外溢导致整个前端应用白屏死机。 diff --git a/src/packages/configprovider/configprovider.taro.tsx b/src/packages/configprovider/configprovider.taro.tsx index c7d83aed57..aa77cd758e 100644 --- a/src/packages/configprovider/configprovider.taro.tsx +++ b/src/packages/configprovider/configprovider.taro.tsx @@ -1,8 +1,8 @@ import React, { FunctionComponent, createContext, useContext } from 'react' import classNames from 'classnames' -import kebabCase from 'lodash.kebabcase' import isEqual from 'react-fast-compare' import { View } from '@tarojs/components' +import { kebabCase } from '@/utils/kebab-case' import { useMemo } from '@/hooks/use-memo' import { BasicComponent } from '@/utils/typings' import { BaseLang } from '@/locales/base' diff --git a/src/packages/configprovider/configprovider.tsx b/src/packages/configprovider/configprovider.tsx index 20397ae5a3..1b0fb062ca 100644 --- a/src/packages/configprovider/configprovider.tsx +++ b/src/packages/configprovider/configprovider.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent, createContext, useContext } from 'react' import classNames from 'classnames' -import kebabCase from 'lodash.kebabcase' import isEqual from 'react-fast-compare' +import { kebabCase } from '@/utils/kebab-case' import { useMemo } from '@/hooks/use-memo' import { BasicComponent } from '@/utils/typings' import { BaseLang } from '@/locales/base' diff --git a/src/utils/index.taro.ts b/src/utils/index.taro.ts index 1ee120c176..cb3fb19d30 100644 --- a/src/utils/index.taro.ts +++ b/src/utils/index.taro.ts @@ -15,6 +15,7 @@ export * from './is-forward-ref-component' export * from './is-function' export * from './is-object' export * from './is-promise' +export * from './kebab-case' export * from './lru' export * from './merge' export * from './merge-props' diff --git a/src/utils/index.ts b/src/utils/index.ts index ca3ea7f91a..b98b7b8877 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -11,6 +11,7 @@ export * from './is-forward-ref-component' export * from './is-function' export * from './is-object' export * from './is-promise' +export * from './kebab-case' export * from './lru' export * from './merge' export * from './merge-props' diff --git a/src/utils/kebab-case.ts b/src/utils/kebab-case.ts new file mode 100644 index 0000000000..60ab917b49 --- /dev/null +++ b/src/utils/kebab-case.ts @@ -0,0 +1,9 @@ +// 按词法边界分词后用 `-` 连接并小写,输出与 lodash kebabCase 的 ASCII 结果一致 +// 分词规则对齐 lodash 的 unicodeWords:数字独立成词,连续大写段遇到「大写+小写」时断开 +const reWords = + /[A-Z]?[a-z]+(?=[^a-z]|$)|[A-Z]+(?=[A-Z][a-z]|[^A-Za-z]|$)|[A-Z]?[a-z]+|[A-Z]+|\d+/g + +export const kebabCase = (str: string) => { + const words = String(str).match(reWords) + return words ? words.map((word) => word.toLowerCase()).join('-') : '' +}