conditional-selection 1.0.0 → 1.0.1

package/package.json

@@ -12,11 +12,15 @@
     "vite-plugin-dts": "^4.5.4"
   },
   "name": "conditional-selection",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "dist/ui.cjs.js",
   "module": "dist/ui.es.js",
   "types": "dist/types/ui.es.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "directories": {
     "doc": "docs",
     "example": "example"

package/.vscode/.rrzu-web.code-snippets

@@ -1,205 +0,0 @@
-{
-  // RHook 代码片段 version 1.0.0, 如果和插件版本号不对应，卸载插件重装或手动升级插件
-  "获取组件实例": {
-    "scope": "javascript,typescript",
-    "prefix": "useCompRef",
-    "body": ["const ${1:componentInstance} = useCompRef(${2});"],
-    "description": "useCompRef ",
-  },
-  "表单弹窗Hook": {
-    "scope": "javascript,typescript",
-    "prefix": "useModalForm",
-    "body": [
-      "const { showModal } = useModalForm<{$1}>({",
-      "  title: '操作',",
-      "  layout: 'vertical',",
-      "  stateDefault: {},",
-      "  formGroup: [],",
-      "  onSubmit: async formState => {",
-      "    console.log('onSubmit:formState -->', formState);",
-      "    // await apiXXX(formState)",
-      "  },",
-      "});",
-    ],
-    "description": "表单弹窗Hook",
-  },
-  "useModal配合RForm，快速实现新增等功能": {
-    "scope": "javascript,typescript",
-    "prefix": "useModal",
-    "body": [
-      "const refForm = ref<RFormInstance | null>(null);",
-      "const formState = reactive({});",
-      "",
-      "const { visible, loading, open, close, confirm } = useModal(",
-      "  async () => {",
-      "    await refForm.value?.getFormRef()?.validate();",
-      "  },",
-      "  {",
-      "    afterClose() {",
-      "      refForm.value?.getFormRef()?.resetFields();",
-      "    },",
-      "  },",
-      ");",
-    ],
-    "description": "useModal配合RForm，快速实现新增等功能",
-  },
-  "处理表格行合并场景": {
-    "scope": "javascript,typescript",
-    "prefix": "useTableMerge",
-    "body": [
-      "const list = ref<T[]>([]);",
-      "const { tableColumns, updateColumns } = useTableMerge(list, {",
-      "  columns:[],",
-      "  // ⚠️ 使用后请删除下列注释 !!!!!",
-      "  mergeColumnFields: ['category_name'],",
-      "  /* 当前列的行合并默认会比较前所有列，可配置跳过某些前置列的比对 */",
-      "  excludeColumnFields: ['id'],",
-      "  /* 默认使用列的dataIndex作为比对字段，dataIndex不存在会取key,可以通过配置修改比对的字段 */",
-      "  compareMap: { category_name: 'category_id' },",
-      "  /* 与customCell一样，可自定义处理，自定义返回的配置项与内部配置的customCell方法返回值合并 */",
-      "  customCellHandler(row, rowIndex, column) {",
-      "    return {}",
-      "  }",
-      "});",
-    ],
-    "description": "处理表格行合并场景",
-  },
-  "便捷处理表格选择项": {
-    "scope": "javascript,typescript",
-    "prefix": "useTableSelection",
-    "body": [
-      "// 在 RTable 中添加 :tableProps=\"{ rowSelection }\" 使用后请删除！;",
-      "const { rowSelection, selectedRowKeys } = useTableSelection({",
-      "  key: '${1:id}', // 如果是 id 请删除，默认为 id",
-      "  /* 禁止选择项，使用后请删除！ */",
-      "  disabledSelect: record => record.td_checkbox_disable,",
-      "  // 根据需求去定",
-      "  rowSelection: {",
-      "    selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT, Table.SELECTION_NONE],",
-      "  },",
-      "});",
-    ],
-    "description": "便捷处理表格选择项",
-  },
-  //  R组件代码片段
-  "表格操作栏组件": {
-    "scope": "html",
-    "prefix": "RButtonGroup",
-    "body": ["<RButtonGroup", "  :btn-group=\"btnGroup\"", "  :group-handler=\"groupHandler\"", "/>"],
-    "description": "表格操作栏组件",
-  },
-  "通用表单": {
-    "scope": "html",
-    "prefix": "RForm",
-    "body": ["<RForm", "  ref=\"formRef\"", "  v-model:value=\"formState\"", "  :form-group=\"formGroup\"", "/>"],
-    "description": "通用表单",
-  },
-  "通用表单弹窗": {
-    "scope": "html",
-    "prefix": "RModalForm",
-    "body": [
-      "<RModalForm",
-      "  ref=\"refRModalForm\"",
-      "  :form-group=\"formGroup\"",
-      "  :submit=\"onSubmit\"",
-      "  title=\"${1:title}\"",
-      "/>",
-    ],
-    "description": "通用表单弹窗",
-  },
-  "通用弹窗": {
-    "scope": "html",
-    "prefix": "RModal",
-    "body": ["<RModal", "  v-model:value=\"visible\"", "  title=\"${1:title}\"", "/>"],
-    "description": "通用弹窗",
-  },
-  "页尾组件": {
-    "scope": "html",
-    "prefix": "RPageFooter",
-    "body": [
-      "<RPageFooter",
-      "  :pagination=\"pagination\"",
-      "  position=\"absolute\"",
-      "  show-total",
-      "  show-total-page",
-      "  @pagination-change=\"onPageChange\"",
-      "  @pagination-show-size-change=\"onShowSizeChange\"",
-      "/>",
-    ],
-    "description": "页尾组件",
-  },
-  "预览组件，可预览图片、视频、pdf等": {
-    "scope": "html",
-    "prefix": "RPreview",
-    "body": ["<RPreview", "  v-model:preview=\"preview\"", "  type=\"${1:type}\"", "  :value=\"previewValue\"", "/>"],
-    "description": "预览组件，可预览图片、视频、pdf等",
-  },
-  "更符合业务的时间选择框": {
-    "scope": "html",
-    "prefix": "RRangePicker",
-    "body": ["<RRangePicker", "  v-model:value=\"rangePickerValue\"", "  @change=\"onRangePickerChange\"", "/>"],
-    "description": "更符合业务的时间选择框",
-  },
-  "更符合业务的下拉框": {
-    "scope": "html",
-    "prefix": "RSelect",
-    "body": [
-      "<RSelect",
-      "  v-model:value=\"selectValue\"",
-      "  :config=\"{ $1 }\"",
-      "  @change=\"onSelectChange\"",
-      "/>",
-    ],
-    "description": "更符合业务的下拉框",
-  },
-  "数据统计组件": {
-    "scope": "html",
-    "prefix": "RStatistic",
-    "body": ["<RStatistic", "  title=\"${1:title}\"", "  :value=\"value\"", "/>"],
-    "description": "数据统计组件",
-  },
-  "通用表格": {
-    "scope": "html",
-    "prefix": "RTable",
-    "body": ["<RTable", "  :api=\"apiSearchTable\"", "  :columns=\"columns\"", "/>"],
-    "description": "通用表格",
-  },
-  "文本框输入的内容转换为标签": {
-    "scope": "html",
-    "prefix": "RTagInput",
-    "body": [
-      "<RTagInput",
-      "  v-model:value=\"value\"",
-      "  placeholder=\"请输入商品ID，多个商品ID可用空格键分隔\"",
-      "/>",
-    ],
-    "description": "文本框输入的内容转换为标签",
-  },
-  "可折叠文本组件": {
-    "scope": "html",
-    "prefix": "RTextCollapse",
-    "body": ["<RTextCollapse", "  :line=\"2\"", "  :text=\"${1:$1}\"", "  :width=\"300\"", "  />"],
-    "description": "可折叠文本组件",
-  },
-  "通用上传组件": {
-    "scope": "html",
-    "prefix": "RUpload",
-    "body": [
-      "<RUpload",
-      "  v-model:value=\"fileList\"",
-      "  :oss-config=\"{",
-      "    uploadApi: generateAndUploadImage2Oss,",
-      "  }\"",
-      "  show-text=\"${1:text}\"",
-      "  template=\"dragger\"",
-      "/>",
-    ],
-    "description": "通用上传组件",
-  },
-  "视频播放组件": {
-    "scope": "html",
-    "prefix": "RVideo",
-    "body": ["<RVideo", "  ref=\"refRVideo\"", "  height=\"200px\"", "  :src=\"${1:http}\"", "  width=\"200px\"", "/>"],
-    "description": "视频播放组件",
-  },
-}

package/docs/README.md

@@ -1,20 +0,0 @@
-# ConditionalSelection 组件库文档
-
-## 目录
-- [快速开始](./quick-start.md)
-- [API 说明](./api.md)
-- [常见问题](./faq.md)
-
----
-
-本目录下为组件库的开发与使用文档，适合团队成员、二次开发者、业务集成者查阅。
-
-- 如需查看详细用法和参数，请参考 [API 说明](./api.md)
-- 如需快速集成体验，请参考 [快速开始](./quick-start.md)
-- 如遇常见问题，可查阅 [常见问题](./faq.md)
-
-如有更多问题或建议，欢迎补充！
-
----
-
-**联系人：no_any@qq.com**

package/docs/api.md

@@ -1,37 +0,0 @@
-# API 说明
-
-## ConditionalSelection 组件参数
-
-| 参数 | 说明 | 类型 | 默认值 |
-| ---- | ---- | ---- | ------ |
-| conditionalRules | 条件树数据 | TConditionalSelection \| null | null |
-| maxLevel | 最大递归层级 | number | 1 |
-| zeroLevelMaxLength | 最外层子项最大数量 | number | 不限 |
-| disabled | 是否禁用全部/部分操作 | boolean \| object | false |
-| onChange | 数据变更回调 | (value) => void | - |
-| renderConditionRules | 条件行插槽 | (item, change) => ReactNode | - |
-| renderCreateCondition | 新增按钮插槽 | (params) => ReactNode | - |
-
-## TConditionalSelection 结构
-
-```ts
-{
-  _id: string;
-  framework: 'group' | 'individual';
-  link?: 'and' | 'or';
-  group?: TConditionalSelection[];
-  individual?: Record<string, any>;
-  level: number;
-}
-```
-
-## 事件说明
-- `onChange`：每次条件树变更时触发，返回最新数据。
-- `getRulesData`：通过 ref 获取当前条件树数据，支持校验。
-
-## 插槽说明
-- `renderConditionRules(item, change)`：自定义条件行内容，change 用于回传变更。
-- `renderCreateCondition({ createRules, rulesData })`：自定义新增按钮。
-
-## 其他
-- 支持 less 样式、monorepo 结构。

package/docs/faq.md

@@ -1,21 +0,0 @@
-# 常见问题 FAQ
-
-### 1. 如何自定义条件行内容？
-使用 `renderConditionRules` 插槽，传入自定义组件并用 change handler 回传数据。
-
-### 2. 如何限制条件树层级和数量？
-通过 `maxLevel` 和 `zeroLevelMaxLength` 参数控制。
-
-### 3. 如何获取当前条件树数据？
-通过 ref 调用 `getRulesData()` 方法。
-
-### 4. 为什么要用 useImmer？
-保证数据不可变、递归更新高效，避免直接修改原始对象。
-
-### 5. 如何避免递归组件无谓重渲染？
-递归 handler 用 useCallback 包裹，父组件插槽也建议 useCallback。
-
-### 6. 支持哪些样式扩展？
-支持 less，样式可自定义覆盖。
-
-如有更多问题，欢迎补充！

package/docs/quick-start.md

@@ -1,32 +0,0 @@
-# 快速开始
-
-## 安装依赖
-
-```bash
-npm install
-```
-
-## 启动示例项目
-
-```bash
-npm run dev
-```
-
-## 基本用法
-
-```tsx
-import { ConditionalSelection } from '../packages/ConditionalSelection';
-
-<ConditionalSelection
-  conditionalRules={rules}
-  maxLevel={3}
-  zeroLevelMaxLength={3}
-  disabled={false}
-  onChange={setRules}
-  renderConditionRules={(item, change) => (
-    <FlexSelect item={item} onChange={val => change(val)} />
-  )}
-/>
-```
-
-更多用法详见主目录 README.md。

package/example/App.tsx

@@ -1,162 +0,0 @@
-import React, { useMemo, useRef, useState } from 'react';
-import { ConditionalSelection } from '../packages/ConditionalSelection';
-import type { TConditionalSelection } from '../packages/ConditionalSelection/types';
-import '../packages/ConditionalSelection/index.less';
-
-const fieldOptions = [
-  { label: '测试字段1', value: 1 },
-  { label: '测试字段2', value: 2 },
-];
-const functionOptions = [
-  { label: '等于', value: 1 },
-  { label: '不等于', value: 2 },
-];
-const valueOptions = [
-  { label: '测试值1', value: 1 },
-  { label: '测试值2', value: 2 },
-];
-
-const FlexSelect: React.FC<{ item: TConditionalSelection; onChange: (val: Record<string, any>) => void }> = ({ item, onChange }) => {
-  // field / function / value 存放在节点的 individual 里
-  const data = useMemo(() => item.individual ?? {}, [item.individual]);
-
-  const handleFieldChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const val = e.target.value ? Number(e.target.value) : undefined;
-    onChange({ field: val, function: '', value: undefined });
-  };
-
-  const handleFunctionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const val = e.target.value ? Number(e.target.value) : undefined;
-    onChange({ ...data, function: val, value: undefined });
-  };
-
-  const handleValueChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const val = e.target.value ? Number(e.target.value) : undefined;
-    onChange({ ...data, value: val });
-  };
-
-  return (
-    <div style={{ display: 'flex', width: '100%' }}>
-      <select style={{ width: '33%', marginRight: 16 }} value={data.field ?? ''} onChange={handleFieldChange}>
-        <option value="">请选择字段</option>
-        {fieldOptions.map(opt => (
-          <option key={opt.value} value={opt.value}>{opt.label}</option>
-        ))}
-      </select>
-      {data.field && (
-        <select style={{ width: '33%', marginRight: 16 }} value={data.function ?? ''} onChange={handleFunctionChange}>
-          <option value="">请选择函数</option>
-          {functionOptions.map(opt => (
-            <option key={opt.value} value={opt.value}>{opt.label}</option>
-          ))}
-        </select>
-      )}
-      {data.function && (
-        <select style={{ width: '33%', marginRight: 16 }} value={data.value ?? ''} onChange={handleValueChange}>
-          <option value="">请选择值</option>
-          {valueOptions.map(opt => (
-            <option key={opt.value} value={opt.value}>{opt.label}</option>
-          ))}
-        </select>
-      )}
-    </div>
-  );
-}
-
-export default function App() {
-  const refConditionalSelection = useRef<any>(null);
-  const [rules, setRules] = useState<TConditionalSelection | undefined>();
-  const [maxLevel, setMaxLevel] = useState(3);
-  const [zeroLevelMaxLength, setZeroLevelMaxLength] = useState(3);
-  const [disabled, setDisabled] = useState(false);
-  const [disabledConfig, setDisabledConfig] = useState({
-    addItem: false,
-    delItem: false,
-    linkChange: false,
-  });
-
-  const getResult = async () => {
-    const data = await refConditionalSelection.current.getConditionalSelectionData()
-    console.log('当前数据：', data);
-  }
-
-  return (
-    <div style={{ padding: 24 }}>
-      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 24 }}>
-        <div className="level-setting">
-          设置层级：
-          <input
-            type="number"
-            min={1}
-            value={maxLevel}
-            onChange={e => setMaxLevel(Number(e.target.value) || 1)}
-            style={{ width: 80, marginLeft: 8 }}
-          />
-        </div>
-        <div className="level-setting">
-          设置最外层子项数量：
-          <input
-            type="number"
-            min={2}
-            value={zeroLevelMaxLength}
-            onChange={e => setZeroLevelMaxLength(Number(e.target.value) || 2)}
-            style={{ width: 80, marginLeft: 8 }}
-          />
-        </div>
-        <div className="level-setting">
-          全部禁用：
-          <input
-            type="checkbox"
-            checked={disabled}
-            onChange={e => setDisabled(e.target.checked)}
-            style={{ marginLeft: 8 }}
-          />
-        </div>
-        <div className="level-setting">
-          禁用添加：
-          <input
-            type="checkbox"
-            checked={disabledConfig.addItem}
-            onChange={e => setDisabledConfig(cfg => ({ ...cfg, addItem: e.target.checked }))}
-            style={{ marginLeft: 8 }}
-          />
-        </div>
-        <div className="level-setting">
-          禁用删除：
-          <input
-            type="checkbox"
-            checked={disabledConfig.delItem}
-            onChange={e => setDisabledConfig(cfg => ({ ...cfg, delItem: e.target.checked }))}
-            style={{ marginLeft: 8 }}
-          />
-        </div>
-        <div className="level-setting">
-          禁用变化关系：
-          <input
-            type="checkbox"
-            checked={disabledConfig.linkChange}
-            onChange={e => setDisabledConfig(cfg => ({ ...cfg, linkChange: e.target.checked }))}
-            style={{ marginLeft: 8 }}
-          />
-        </div>
-        <button className="btn" style={{ marginLeft: 8 }} onClick={() => setRules(undefined)}>清空数据</button>
-        <button className="btn" style={{ marginLeft: 8 }} onClick={getResult}>获取数据</button>
-      </div>
-      <ConditionalSelection
-        ref={refConditionalSelection}
-        conditionalRules={rules}
-        maxLevel={maxLevel}
-        zeroLevelMaxLength={zeroLevelMaxLength}
-        disabled={disabled || disabledConfig}
-        onChange={setRules}
-        renderConditionRules={(item, change) => (
-          <FlexSelect
-            item={item}
-            onChange={val => change(val)}
-          />
-        )}
-      />
-      <pre style={{ marginTop: 24, fontSize: 12 }}>{JSON.stringify(rules, null, 2)}</pre>
-    </div>
-  );
-}

package/example/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="./main.tsx"></script>
-</body>
-</html>

package/example/main.tsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)

package/packages/ConditionalSelection/components/conditional-choose.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { EConditionalSelectionLink } from '../types';
-
-interface IConditionalChooseProps {
-  value: EConditionalSelectionLink;
-  disabled?: boolean;
-  onChange: (value: EConditionalSelectionLink) => void;
-}
-
-const logicMaps: Record<EConditionalSelectionLink, string> = {
-  [EConditionalSelectionLink.OR]: '或',
-  [EConditionalSelectionLink.AND]: '且',
-};
-
-/**
- * 条件切换组件（且/或）
- */
-const ConditionalChoose: React.FC<IConditionalChooseProps> = ({ value, disabled, onChange }) => {
-  function toggleLogic() {
-    if (disabled) return;
-    onChange(value === EConditionalSelectionLink.OR ? EConditionalSelectionLink.AND : EConditionalSelectionLink.OR);
-  }
-
-  return (
-    <div className="link-line">
-      <div className="link-label" onClick={toggleLogic}>
-        {logicMaps[value] ?? '且'}
-      </div>
-    </div>
-  );
-};
-
-export default ConditionalChoose;

package/packages/ConditionalSelection/components/conditional-content.tsx

@@ -1,134 +0,0 @@
-import React from 'react';
-import ConditionalChoose from './conditional-choose';
-import ConditionalHandle from './conditional-handle';
-import {
-  EConditionalSelectionLink,
-  type TConditionalSelection,
-  type TConditionalSelectionDisabledProps,
-} from '../types';
-import { isGroup } from '../composables/useConditionalHandle';
-interface IConditionalContentProps {
-  levelData: TConditionalSelection;
-  level: number;
-  disabledConfig: Required<TConditionalSelectionDisabledProps>;
-  onUpdateNode: (nodeId: string, patch: Partial<TConditionalSelection>) => void;
-  onCreateRules: (ruleData: TConditionalSelection) => void;
-  onCreateChildRules: (ruleData: TConditionalSelection) => void;
-  onDelRules: (ruleData: TConditionalSelection, index: number) => void;
-  /** 渲染单行条件内容 */
-  renderConditionItem?: (rulesLevelItem: TConditionalSelection) => React.ReactNode;
-}
-
-/**
- * 获取是否是"最后一个条件"位置，用于控制同级新增按钮
- */
-function getLastCondition(index: number, group: TConditionalSelection[]): boolean {
-  const lastIndex = group.length - 1;
-  const tempInfo = group[lastIndex];
-  let flag = index === lastIndex;
-  if (!flag && tempInfo && isGroup(tempInfo)) {
-    flag = index === group.length - 2;
-  }
-  return flag;
-}
-
-/**
- * 条件内容组件（递归渲染嵌套规则树）
- * 对应 Vue 版 relation-content.vue
- */
-const ConditionalContent: React.FC<IConditionalContentProps> = ({
-  levelData,
-  level,
-  disabledConfig,
-  onUpdateNode,
-  onCreateRules,
-  onCreateChildRules,
-  onDelRules,
-  renderConditionItem,
-}) => {
-  const group = levelData.group as TConditionalSelection[];
-
-  function handleLinkChange(value: EConditionalSelectionLink) {
-    onUpdateNode(levelData._id, { link: value });
-  }
-
-  return (
-    <div className="relative-box">
-      {/* 且/或 切换 */}
-      <ConditionalChoose
-        value={levelData.link ?? EConditionalSelectionLink.AND}
-        disabled={disabledConfig.linkChange}
-        onChange={handleLinkChange}
-      />
-
-      <div className="conditional-list-box right-box">
-        {group.map((item, index) => {
-          if (isGroup(item)) {
-            const childRules = item.group as TConditionalSelection[];
-            return (
-              <div key={item._id} className="conditional-list">
-                <div className="relative-box">
-                  <ConditionalChoose
-                    value={item.link ?? EConditionalSelectionLink.AND}
-                    disabled={disabledConfig.linkChange}
-                    onChange={val => onUpdateNode(item._id, { link: val })}
-                  />
-                  {childRules.map((child, childIndex) => {
-                    if (isGroup(child) && (child.group as TConditionalSelection[]).length > 0) {
-                      return (
-                        <div key={child._id} className="conditional-item right-box">
-                          <ConditionalContent
-                            levelData={child}
-                            level={level}
-                            disabledConfig={disabledConfig}
-                            onUpdateNode={onUpdateNode}
-                            onCreateRules={onCreateRules}
-                            onCreateChildRules={onCreateChildRules}
-                            onDelRules={onDelRules}
-                            renderConditionItem={renderConditionItem}
-                          />
-                        </div>
-                      );
-                    }
-                    return (
-                      <div key={child._id} className="conditional-item right-box">
-                        {renderConditionItem?.(child)}
-                        <ConditionalHandle
-                          level={level}
-                          disabledConfig={disabledConfig}
-                          currentItemInfo={child}
-                          isLast={getLastCondition(childIndex, childRules)}
-                          onCreate={() => onCreateRules(item)}
-                          onCreateChildRules={() => onCreateChildRules(child)}
-                          onDel={() => onDelRules(item, childIndex)}
-                        />
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            );
-          }
-          return (
-            <div key={item._id} className="conditional-list">
-              <div className="conditional-item">
-                {renderConditionItem?.(item)}
-                <ConditionalHandle
-                  level={level}
-                  disabledConfig={disabledConfig}
-                  currentItemInfo={item}
-                  isLast={getLastCondition(index, group)}
-                  onCreate={() => onCreateRules(levelData)}
-                  onCreateChildRules={() => onCreateChildRules(item)}
-                  onDel={() => onDelRules(levelData, index)}
-                />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default ConditionalContent;

package/packages/ConditionalSelection/components/conditional-handle.tsx

@@ -1,83 +0,0 @@
-import React, { useMemo } from 'react';
-import type {
-  TConditionalSelection,
-  TConditionalSelectionDisabledProps,
-} from '../types';
-
-interface IConditionalHandleProps {
-  level: number;
-  currentItemInfo: TConditionalSelection;
-  isLast: boolean;
-  disabledConfig: Required<TConditionalSelectionDisabledProps>;
-  onCreate: () => void;
-  onCreateChildRules: () => void;
-  onDel: () => void;
-}
-
-function isEmptyValue(val: unknown): boolean {
-  if (val === null || val === undefined || val === '') return true;
-  if (Array.isArray(val)) return val.length === 0;
-  if (val !== null && typeof val === 'object') return Object.keys(val as object).length === 0;
-  return false;
-}
-
-function allHave(individual?: Record<string, any>): boolean {
-  return (
-    !!individual &&
-    Object.keys(individual).length > 0 &&
-    Object.keys(individual).every((key: string) => !isEmptyValue(individual[key]))
-  );
-}
-
-/**
- * 规则操作按钮组（同级/子集/删除）
- */
-const ConditionalHandle: React.FC<IConditionalHandleProps> = ({
-  level,
-  currentItemInfo,
-  isLast,
-  disabledConfig,
-  onCreate,
-  onCreateChildRules,
-  onDel,
-}) => {
-  /** 是否显示同级新增按钮：当前节点 level >= 1 且是最后一个 */
-  const showCreate = useMemo(() => currentItemInfo.level >= 1 && isLast, [currentItemInfo.level, isLast]);
-
-  /** 是否显示子集新增按钮：全局 level > 1 且当前节点 level 未达到上限 */
-  const showCreateChild = useMemo(() => level > 1 && currentItemInfo.level < level, [level, currentItemInfo.level]);
-
-  /** 整体新增按钮是否显示：level > 1 && 当前条件已填写完整 && 未禁用新增 */
-  const createShow = useMemo(
-    () => !!(level > 1 && allHave(currentItemInfo.individual) && !disabledConfig.addItem),
-    [level, currentItemInfo.individual, disabledConfig.addItem],
-  );
-
-  return (
-    <div className="conditional-handle">
-      {createShow && (
-        <>
-          {showCreate && (
-            <span className="create-handle" onClick={onCreate}>
-              <span style={{ color: '#c85000', marginRight: 4 }}>＋</span>
-              同级
-            </span>
-          )}
-          {showCreateChild && (
-            <span className="create-handle" onClick={onCreateChildRules}>
-              <span style={{ color: '#c85000', marginRight: 4 }}>＋</span>
-              子级
-            </span>
-          )}
-        </>
-      )}
-      {!disabledConfig.delItem && (
-        <span className="del-handle" onClick={onDel}>
-          －
-        </span>
-      )}
-    </div>
-  );
-};
-
-export default ConditionalHandle;

package/packages/ConditionalSelection/composables/useConditionalHandle.ts

@@ -1,234 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import { useImmer } from 'use-immer';
-import { cloneDeep } from 'lodash-es';
-import {
-  EConditionalSelectionLink,
-  EConditionalSelectionFramework,
-  type TConditionalSelection,
-  type TConditionalSelectionProps,
-  type TConditionalSelectionDisabledProps,
-} from '../types';
-
-function isObject(val: unknown): val is Record<string, any> {
-  return val !== null && typeof val === 'object' && !Array.isArray(val);
-}
-
-function isEmptyValue(val: unknown): boolean {
-  if (val === null || val === undefined || val === '') return true;
-  if (Array.isArray(val)) return val.length === 0;
-  if (isObject(val)) return Object.keys(val).length === 0;
-  return false;
-}
-
-export function getTempRules(level = 0): TConditionalSelection {
-  return cloneDeep({
-    _id: crypto.randomUUID(),
-    framework: EConditionalSelectionFramework.INDIVIDUAL,
-    // INDIVIDUAL 节点只保留 individual，不初始化 group
-    individual: {},
-    level,
-  }) as TConditionalSelection;
-}
-
-export function isGroup(ruleData: TConditionalSelection): boolean {
-  return ruleData.framework === EConditionalSelectionFramework.GROUP;
-}
-
-function allHave(individual?: Record<string, any>): boolean {
-  return (
-    !!individual &&
-    Object.keys(individual).length > 0 &&
-    Object.keys(individual).every((key: string) => !isEmptyValue(individual[key]))
-  );
-}
-
-function checkData(data: TConditionalSelection): boolean {
-  if (isGroup(data) && Array.isArray(data.group)) {
-    // GROUP 节点：递归检查 group 数组中的每个子项
-    return data.group.some(item => checkData(item));
-  }
-  // INDIVIDUAL 节点：检查 individual 是否填写完整
-  return !allHave(data.individual);
-}
-
-function subtractLevel(rulesData: TConditionalSelection): void {
-  // 只有 GROUP 节点才有 group 数组
-  if (isGroup(rulesData) && Array.isArray(rulesData.group) && rulesData.group.length > 1) {
-    rulesData.group.forEach(item => subtractLevel(item));
-  }
-  rulesData.level = rulesData.level - 1 < 0 ? 0 : rulesData.level - 1;
-}
-
-/** 在树中按 _id 深度优先查找节点 */
-export function findNode(root: TConditionalSelection, id: string): TConditionalSelection | null {
-  if (root._id === id) return root;
-  if (Array.isArray(root.group)) {
-    for (const child of root.group) {
-      const found = findNode(child, id);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-
-export interface IUseConditionalHandleReturn {
-  rulesData: TConditionalSelection;
-  setRulesData: (data: TConditionalSelection) => void;
-  updateRulesData: (updater: (draft: TConditionalSelection) => void) => void;
-  level: number;
-  disabledConfig: Required<TConditionalSelectionDisabledProps>;
-  createRules: (ruleData: TConditionalSelection) => void;
-  createChildRules: (ruleData: TConditionalSelection) => void;
-  delRules: (ruleData: TConditionalSelection, index: number) => void;
-  getConditionalSelectionData: (validate?: boolean) => Promise<TConditionalSelection>;
-  isGroup: (ruleData: TConditionalSelection) => boolean;
-  getTempRules: (level?: number) => TConditionalSelection;
-}
-
-export function useConditionalHandle(props: TConditionalSelectionProps): IUseConditionalHandleReturn {
-  const [rulesData, updateRulesData] = useImmer<TConditionalSelection>(() => getTempRules());
-
-  // 对外保持 setRulesData 接口不变（直接替换整棵树）
-  const setRulesData = useCallback((data: TConditionalSelection) => {
-    updateRulesData(() => data);
-  }, [updateRulesData]);
-
-  // level 计算
-  const level = useMemo(() => {
-    const v = Math.abs(Number(props.maxLevel ?? 1)) || 1;
-    if (Number(props.maxLevel ?? 1) < 1) {
-      console.warn('[TConditionalSelection] Invalid props.maxLevel: maxLevel must be greater than 0.');
-    }
-    return v;
-  }, [props.maxLevel]);
-
-  // disabledConfig 计算
-  const disabledConfig = useMemo<Required<TConditionalSelectionDisabledProps>>(() => {
-    const isObj = isObject(props.disabled);
-    return {
-      addItem: !!(isObj ? (props.disabled as TConditionalSelectionDisabledProps)?.addItem : props.disabled),
-      delItem: !!(isObj ? (props.disabled as TConditionalSelectionDisabledProps)?.delItem : props.disabled),
-      linkChange: !!(isObj ? (props.disabled as TConditionalSelectionDisabledProps)?.linkChange : props.disabled),
-    };
-  }, [props.disabled]);
-
-  // 创建同级规则：向当前 GROUP 节点的 group 数组追加一个新 INDIVIDUAL 节点
-  const createRules = useCallback(
-    (ruleData: TConditionalSelection) => {
-      if (!isGroup(ruleData)) return;
-      const maxLen = Math.abs(Number(props.zeroLevelMaxLength));
-      if (maxLen) {
-        if (Number(props.zeroLevelMaxLength) < 2) {
-          console.warn(
-            '[TConditionalSelection] Invalid props.zeroLevelMaxLength: zeroLevelMaxLength must be greater than 1.',
-          );
-        }
-        if (ruleData.level === 0 && (ruleData.group as TConditionalSelection[]).length === maxLen) {
-          console.warn(`最外层子项最多添加${maxLen}个条件`);
-          return;
-        }
-      }
-      updateRulesData(draft => {
-        const target = findNode(draft, ruleData._id);
-        if (target && Array.isArray(target.group)) {
-          target.group.push(getTempRules(target.level + 1));
-        }
-      });
-    },
-    [props.zeroLevelMaxLength, updateRulesData],
-  );
-
-  // 创建子级规则：将当前 INDIVIDUAL 节点升级为 GROUP 节点
-  const createChildRules = useCallback(
-    (ruleData: TConditionalSelection) => {
-      updateRulesData(draft => {
-        const target = findNode(draft, ruleData._id);
-        if (!target) return;
-
-        if (target.framework === EConditionalSelectionFramework.INDIVIDUAL) {
-          const firstChild: TConditionalSelection = {
-            _id: crypto.randomUUID(),
-            framework: EConditionalSelectionFramework.INDIVIDUAL,
-            individual: cloneDeep(target.individual ?? {}),
-            level: target.level + 1,
-          };
-          const secondChild = getTempRules(target.level + 1);
-          target.framework = EConditionalSelectionFramework.GROUP;
-          target.link = EConditionalSelectionLink.AND;
-          target._id = crypto.randomUUID();
-          target.group = [firstChild, secondChild];
-          delete target.individual;
-        } else {
-          // 已是 GROUP，追加子项
-          if (Array.isArray(target.group)) {
-            target.group.push(getTempRules(target.level + 1));
-          }
-        }
-      });
-    },
-    [updateRulesData],
-  );
-
-  // 删除规则
-  const delRules = useCallback((ruleData: TConditionalSelection, index: number) => {
-    updateRulesData(draft => {
-      const target = findNode(draft, ruleData._id);
-      if (!target || !Array.isArray(target.group)) return;
-
-      target.group.splice(index, 1);
-
-      if (target.framework === EConditionalSelectionFramework.GROUP && target.group.length === 1) {
-        const onlyChild = target.group[0];
-        if (
-          onlyChild.framework === EConditionalSelectionFramework.GROUP &&
-          Array.isArray(onlyChild.group) &&
-          onlyChild.group.length > 1
-        ) {
-          // 唯一子项是 GROUP，提升到当前节点
-          target.framework = EConditionalSelectionFramework.GROUP;
-          target.link = onlyChild.link;
-          target._id = onlyChild._id;
-          target.group = onlyChild.group;
-          delete target.individual;
-        } else {
-          // 唯一子项是 INDIVIDUAL，降级
-          target.framework = EConditionalSelectionFramework.INDIVIDUAL;
-          target._id = onlyChild._id;
-          target.individual = cloneDeep(onlyChild.individual ?? {});
-          delete target.link;
-          delete target.group;
-        }
-        subtractLevel(onlyChild);
-      }
-    });
-  }, [updateRulesData]);
-
-  // 获取并校验数据
-  const getConditionalSelectionData = useCallback(
-    (validate = true): Promise<TConditionalSelection> => {
-      return new Promise((resolve, reject) => {
-        if (validate && checkData(rulesData)) {
-          console.error('请填写完整');
-          reject('含有未填写完整的项');
-          return;
-        }
-        resolve(cloneDeep(rulesData));
-      });
-    },
-    [rulesData],
-  );
-
-  return {
-    rulesData,
-    setRulesData,
-    level,
-    disabledConfig,
-    createRules,
-    createChildRules,
-    delRules,
-    getConditionalSelectionData,
-    isGroup,
-    getTempRules,
-    updateRulesData,
-  };
-}

package/packages/ConditionalSelection/conditional-selection.tsx

@@ -1,109 +0,0 @@
-import { useEffect, useRef, useImperativeHandle, forwardRef, useCallback } from 'react';
-import { cloneDeep } from 'lodash-es';
-import ConditionalContent from './components/conditional-content';
-import { useConditionalHandle, getTempRules, isGroup, findNode } from './composables/useConditionalHandle';
-import { type TConditionalSelectionProps } from './types';
-import './index.less';
-
-export type { TConditionalSelectionProps };
-
-const ConditionalSelection = forwardRef<
-  { getConditionalSelectionData: (validate?: boolean) => Promise<any> },
-  TConditionalSelectionProps
->((props, ref) => {
-  const { conditionalRules, onChange, renderConditionRules, renderCreateCondition } = props;
-
-  const { rulesData, setRulesData, level, disabledConfig, createRules, createChildRules, delRules, getConditionalSelectionData, updateRulesData } =
-    useConditionalHandle(props);
-
-  // 暴露 getConditionalSelectionData 给父组件
-  useImperativeHandle(ref, () => ({ getConditionalSelectionData }), [getConditionalSelectionData]);
-
-  // 监听 rulesData 变化并抛出 onChange
-  const isFirstRender = useRef(true);
-  useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-    onChange?.(rulesData);
-  }, [rulesData]);
-
-  //初始化
-  useEffect(() => {
-    if (conditionalRules && Object.keys(conditionalRules).length !== 0) {
-      setRulesData(cloneDeep(conditionalRules));
-    } else {
-      setRulesData(getTempRules());
-    }
-  }, []);
-
-  // 递归/slot相关 handler 用 useCallback 包裹，依赖项只放 updateRulesData/findNode/renderConditionRules
-  const handleUpdateNode = useCallback((nodeId: string, patch: Partial<any>) => {
-    updateRulesData(draft => {
-      const target = findNode(draft, nodeId);
-      if (!target) return;
-      Object.assign(target, patch);
-    });
-  }, [updateRulesData]);
-
-  const handleRenderConditionItem = useCallback(
-    (item: any) => renderConditionRules?.(item, (val: Record<string, any>) => {
-      updateRulesData(draft => {
-        const target = findNode(draft, item._id);
-        if (!target) return;
-        target.individual = val;
-      });
-    }),
-    [renderConditionRules, updateRulesData]
-  );
-
-  const handleRenderConditionRules = useCallback(
-    (rulesData: any, change: (val: Record<string, any>) => void) =>
-      renderConditionRules?.(rulesData, change),
-    [renderConditionRules]
-  );
-
-  return (
-    <div className="conditional-selection">
-      {/* 新增条件按钮区域 */}
-      {!disabledConfig.addItem &&
-        (renderCreateCondition ? (
-          renderCreateCondition({ createRules: createChildRules, rulesData })
-        ) : (
-          <span className="create-box" onClick={() => createChildRules(rulesData)}>
-            <span style={{ color: '#00c8be', marginRight: 4 }}>➕</span>
-            添加条件
-          </span>
-        ))}
-
-      {/* 规则内容区域 */}
-      <div className="conditional-content">
-        {isGroup(rulesData) && (rulesData.group as any[]).length > 0 ? (
-          <ConditionalContent
-            levelData={rulesData}
-            level={level}
-            disabledConfig={disabledConfig}
-            onUpdateNode={handleUpdateNode}
-            onCreateRules={createRules}
-            onCreateChildRules={createChildRules}
-            onDelRules={delRules}
-            renderConditionItem={handleRenderConditionItem}
-          />
-        ) : (
-          handleRenderConditionRules(rulesData, (val: Record<string, any>) => {
-            updateRulesData(draft => {
-              const target = findNode(draft, rulesData._id);
-              if (!target) return;
-              target.individual = val;
-            });
-          })
-        )}
-      </div>
-    </div>
-  );
-});
-
-ConditionalSelection.displayName = 'ConditionalSelection';
-
-export default ConditionalSelection;

package/packages/ConditionalSelection/index.less

@@ -1,91 +0,0 @@
-.conditional-selection {
-    width: 100%;
-
-    .create-box {
-        display: inline-block;
-        margin-bottom: 8px;
-        cursor: pointer;
-    }
-
-    .conditional-content {
-        width: 100%;
-    }
-}
-
-.relative-box {
-    position: relative;
-    width: 100%;
-
-    .conditional-list-box {
-        flex: 1;
-    }
-
-    .conditional-item {
-        display: flex;
-        align-items: center;
-        margin-top: 8px;
-    }
-
-    .conditional-list:first-child {
-        margin-top: -8px;
-    }
-
-    .right-box {
-        margin-left: 32px;
-    }
-}
-
-.link-line {
-    position: absolute;
-    z-index: 999;
-    height: 100%;
-    margin: 0 4px;
-
-    .link-label {
-        position: absolute;
-        top: 50%;
-        width: 22px;
-        color: #c85000;
-        text-align: center;
-        cursor: pointer;
-        user-select: none;
-        background-color: #f9e5e5;
-        border-radius: 4px;
-        transform: translateY(-50%);
-    }
-}
-
-.link-line::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 10px;
-    width: 2px;
-    content: '';
-    background-color: #c85000;
-    opacity: 0.2;
-}
-
-.conditional-handle {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-
-    .create-handle {
-        display: inline-block;
-        width: 50px;
-        cursor: pointer;
-        font-size: 14px;
-    }
-
-    .del-handle {
-        display: inline-block;
-        font-size: 14px;
-        width: 24px;
-        cursor: pointer;
-    }
-
-    .del-handle:hover {
-        color: red;
-    }
-}

package/packages/ConditionalSelection/index.ts

@@ -1,5 +0,0 @@
-import ConditionalSelection from './conditional-selection';
-export * from './types';
-export {
-    ConditionalSelection
-}

package/packages/ConditionalSelection/types.ts

@@ -1,53 +0,0 @@
-import type { ReactNode } from 'react';
-
-export enum EConditionalSelectionFramework {
-  /** 内容组 */
-  GROUP = 'group',
-  /** 内容 */
-  INDIVIDUAL = 'individual',
-}
-
-export enum EConditionalSelectionLink {
-  AND = 'and',
-  OR = 'or',
-}
-
-export type TConditionalSelection<T = any> = {
-  _id: string;
-  /** 结构标识 */
-  framework: EConditionalSelectionFramework;
-  /** 内容关系 */
-  link?: EConditionalSelectionLink;
-  group?: TConditionalSelection<T>[];
-  individual?: Record<string, any>;
-  level: number;
-}
-
-export type TConditionalSelectionDisabledProps = {
-  addItem?: boolean;
-  delItem?: boolean;
-  linkChange?: boolean;
-};
-
-export type TConditionalSelectionProps = {
-  /** 数据内容 */
-  conditionalRules?: TConditionalSelection | null;
-  /** deep 层级限制，需大于0，默认1 */
-  maxLevel?: number;
-  /** 最外层子项数量限制，需大于1，默认不限 */
-  zeroLevelMaxLength?: number;
-  /** 是否禁用新增、删除、关系变更 */
-  disabled?: boolean | TConditionalSelectionDisabledProps;
-  /** 数据变更回调 */
-  onChange?: (value: TConditionalSelection | undefined) => void;
-  /** 渲染条件行内容的插槽，参数为当前 INDIVIDUAL 节点和变更 handler */
-  renderConditionRules?: (
-    conditionRulesData: TConditionalSelection,
-    change: (data: Record<string, any>) => void
-  ) => ReactNode;
-  /** 渲染创建条件按钮插槽（createCondition） */
-  renderCreateCondition?: (params: {
-    createRules: (ruleData: TConditionalSelection) => void;
-    rulesData: TConditionalSelection;
-  }) => ReactNode;
-};

package/packages/index.ts

@@ -1 +0,0 @@
-export * from './ConditionalSelection'

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
-    "jsxImportSource": "react",
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["packages/**/*"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "allowSyntheticDefaultImports": true,
-    "allowImportingTsExtensions": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "emitDeclarationOnly": true,
-    "types": ["node"],
-    "composite": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,39 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc'
-import path from 'node:path'
-import dts from 'vite-plugin-dts'
-export default defineConfig(({ command }) => {
-    const isDev = command === 'serve'
-    return {
-        plugins: [react(), dts({
-            outDir: 'dist/types',
-            insertTypesEntry: true, //这是dts插件的配置，用于生成类型文件
-            include: ['packages/**/*.ts', 'packages/**/*.tsx'],
-            rollupTypes: true
-        })],
-        root: isDev ? path.resolve(__dirname, 'example') : undefined,
-        server: {
-            port: 3000,
-            open: true,
-        },
-        build: {
-            outDir: path.resolve(__dirname, 'dist'),
-            lib: {
-                entry: path.resolve(__dirname, 'packages/index.ts'),
-                name: 'ui',
-                formats: ['es', 'umd', 'cjs', 'iife'],
-                fileName: (format) => `ui.${format}.js`,
-            },
-            emptyOutDir: false,
-            rollupOptions: {
-                external: ['react', 'react-dom'],
-                output: {
-                    globals: {
-                        react: 'React',
-                        'react-dom': 'ReactDOM',
-                    },
-                },
-            },
-        },
-    }
-});