conditional-selection 1.0.0 → 1.0.2

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;