@fe-free/core 1.2.4 → 1.3.0

package/src/crud/demo/index.tsx

@@ -1,342 +0,0 @@
-import React, { useRef } from 'react';
-import type { CRUDProps } from '@fe-free/core';
-import { CRUD, proFormSelectSearchProps } from '@fe-free/core';
-import { Button } from 'antd';
-import { ProForm, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
-import {
-  fakeRequest,
-  fakeDeleteByRecord,
-  fakeCreate,
-  fakeGetByRecord,
-  fakeUpdateById,
-  fakeRequestCity,
-  fakeRequestArea,
-  levels,
-  fakeRequestSchool,
-} from './data';
-
-const Normal = () => {
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字(省略)',
-      dataIndex: 'name',
-      search: true,
-      ellipsis: true,
-    },
-    {
-      title: 'city',
-      dataIndex: 'city',
-    },
-    {
-      title: 'area',
-      dataIndex: 'area',
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={['create', 'read', 'delete', 'update']}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-      requestDeleteByRecord={fakeDeleteByRecord}
-      deleteProps={{
-        nameIndex: 'name',
-      }}
-      detailForm={(formProps) => (
-        <>
-          <ProFormText
-            {...formProps}
-            name="name"
-            label="名字"
-            required
-            rules={[{ required: true }]}
-            extra="extra extra extra extra"
-          />
-        </>
-      )}
-      requestGetByRecord={fakeGetByRecord}
-      requestCreateByValues={fakeCreate}
-      requestUpdateById={fakeUpdateById}
-    />
-  );
-};
-
-function ReadDetail() {
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={['read_detail']}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-    />
-  );
-}
-
-function Ref() {
-  const formRef = useRef<any>();
-  const [detailFormInstance] = ProForm.useForm();
-
-  // @ts-ignore
-  window._detailFormInstance = detailFormInstance;
-
-  const name = ProForm.useWatch('name', formRef.current);
-  const detailName = ProForm.useWatch('name', detailFormInstance);
-
-  // 不知道为啥这里 name 不生效，但是项目里是生效的。先忽略
-  console.log('useWatch', name, detailName);
-
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={['create', 'read', 'update']}
-      tableProps={{
-        formRef,
-        columns,
-        request: fakeRequest,
-      }}
-      detailFormInstance={detailFormInstance}
-      detailForm={(formProps) => (
-        <>
-          <ProFormText
-            {...formProps}
-            name="name"
-            label="名字"
-            required
-            rules={[{ required: true }]}
-            initialValue={'default'}
-          />
-          <ProFormSwitch {...formProps} name="status" label="开启" initialValue={false} />
-        </>
-      )}
-      requestGetByRecord={fakeGetByRecord}
-      requestCreateByValues={fakeCreate}
-      requestUpdateById={fakeUpdateById}
-    />
-  );
-}
-
-function ActionRef() {
-  const ref = useRef<any>();
-
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-    },
-  ];
-
-  return (
-    <>
-      <Button onClick={() => ref.current.getActionRef().current?.reload()}>reload</Button>
-      <CRUD
-        ref={ref}
-        actions={[]}
-        tableProps={{
-          columns,
-          request: fakeRequest,
-        }}
-      />
-    </>
-  );
-}
-
-function RemoteData() {
-  const columns: CRUDProps['tableProps']['columns'] = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-    },
-    {
-      title: '等级(本地数据)',
-      dataIndex: 'level',
-      search: true,
-      valueEnum: levels,
-      ...proFormSelectSearchProps,
-    },
-    {
-      title: 'city(远端数据)',
-      dataIndex: 'city',
-      search: true,
-      request: async () => {
-        console.log('request');
-        const res = await fakeRequestCity();
-
-        return (
-          res.map((item) => ({
-            label: item,
-            value: item,
-          })) || []
-        );
-      },
-      ...proFormSelectSearchProps,
-    },
-    {
-      title: 'area(联动 city)',
-      dataIndex: 'area',
-      search: true,
-      request: async (params) => {
-        console.log('params', params);
-        const res = await fakeRequestArea(params);
-
-        return (
-          res.map((item) => ({
-            label: item,
-            value: item,
-          })) || []
-        );
-      },
-      dependencies: ['city'],
-      ...proFormSelectSearchProps,
-    },
-    {
-      title: '学校(远端数据 label value)',
-      dataIndex: 'school',
-      search: true,
-      valueType: 'select',
-      request: () => fakeRequestSchool(),
-      ...proFormSelectSearchProps,
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={[]}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-    />
-  );
-}
-
-function NoSearch() {
-  const ref = useRef<any>();
-
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-    },
-  ];
-
-  return (
-    <CRUD
-      ref={ref}
-      actions={[]}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-    />
-  );
-}
-
-const CustomText = () => {
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-      ellipsis: true,
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={['create', 'read', 'delete', 'update']}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-      operateColumnProps={{
-        width: 230,
-        moreOperator: () => <div>custom</div>,
-      }}
-      readProps={{
-        operateText: '查看啦',
-      }}
-      requestDeleteByRecord={fakeDeleteByRecord}
-      deleteProps={{
-        nameIndex: 'name',
-        operateText: '删除啦',
-      }}
-      detailForm={(formProps) => (
-        <>
-          <ProFormText
-            {...formProps}
-            name="name"
-            label="名字"
-            required
-            rules={[{ required: true }]}
-          />
-        </>
-      )}
-      requestGetByRecord={fakeGetByRecord}
-      requestCreateByValues={fakeCreate}
-      createProps={{
-        successText: '新建成功啦',
-      }}
-      updateProps={{
-        operateText: '更新啦',
-        successText: '更新成功啦',
-      }}
-      requestUpdateById={fakeUpdateById}
-    />
-  );
-};
-
-export { Normal, ReadDetail, Ref, ActionRef, RemoteData, NoSearch, CustomText };

package/src/crud/index.md

@@ -1,158 +0,0 @@
----
-nav:
-  title: '组件'
-  order: 10
-group: 'core'
-toc: content
----
-
-# CRUD
-
-> 需要了解 ant pro-components ProForm ProTable
-
-基于 ant pro-components 通用的 CRUD 组件，同时保留扩展性。
-
-## 代码演示
-
-### 常规
-
-```tsx
-import { Normal } from './demo';
-
-export default Normal;
-```
-
-### 详情页查看
-
-调整 actions 为 `['read_detail']`，点击<查看>跳转到 `xxx/detail/[id]`，
-
-```tsx
-import { ReadDetail } from './demo';
-
-export default ReadDetail;
-```
-
-### 数据 本地&远程&依赖
-
-```tsx
-import { RemoteData } from './demo';
-
-export default RemoteData;
-```
-
-### 表格表单和详情表单 ref
-
-获取 ProTable 的 actionRef
-
-```tsx
-import { Ref } from './demo';
-
-export default Ref;
-```
-
-### ref.current.getActionRef
-
-通过 ref 你可以做更多操作
-
-```tsx
-import { ActionRef } from './demo';
-
-export default ActionRef;
-```
-
-### 没有搜索
-
-```tsx
-import { NoSearch } from './demo';
-
-export default NoSearch;
-```
-
-### 自定义文案
-
-```tsx
-import { CustomText } from './demo';
-
-export default CustomText;
-```
-
-## API
-
-```tsx | pure
-import type { ReactNode } from 'react';
-import type { TableProps } from '../table';
-import type { ProFormInstance, ActionType } from '@ant-design/pro-components';
-
-/**
- * create 创建
- * read 查看
- * read_detail 详情页查看
- * update 编辑
- * delete 删除
- */
-type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
-
-interface CRUDProps {
-  actions: CrudAction[];
-
-  /** 新建按钮，默认新建 */
-  createButton?: ReactNode;
-
-  /** 表格相关 */
-  tableProps: TableProps;
-  operateColumnProps?: {
-    width?: number;
-    /** 扩展操作区域 */
-    moreOperator?: (record) => ReactNode;
-  };
-  readProps?: {
-    /** 文本 */
-    operateText?: string;
-    /** 打开方式, action 为 read_detail 有效 */
-    target?: '_blank';
-  };
-
-  /** 删除接口 */
-  requestDeleteByRecord?: (record) => Promise<any>;
-  /** 删除相关 */
-  deleteProps?: {
-    /** 显示名称索引 */
-    nameIndex: string;
-    /** 删除确认描述 */
-    desc?: string;
-    /** 文本 */
-    operateText?: string;
-  };
-
-  /** 弹窗表单 */
-  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
-  /** detailForm 的 formRef */
-  detailFormInstance?: ProFormInstance;
-
-  /** 新增接口 */
-  requestCreateByValues?: (values) => Promise<any>;
-  createProps?: {
-    /** 成功文案 */
-    successText?: string | (() => string);
-  };
-
-  /** 更新接口 */
-  requestUpdateById?: (values) => Promise<any>;
-  updateProps?: {
-    /** 文本 */
-    operateText?: string;
-    /** 成功文案 */
-    successText?: string | (() => string);
-  };
-
-  /** 获取详情接口 */
-  requestGetByRecord?: (record) => Promise<any>;
-
-  /** 跳转到详情的索引 ，默认 id */
-  detailIdIndex?: string;
-}
-
-interface CRUDMethods {
-  getActionRef: () => React.MutableRefObject<ActionType | undefined>;
-}
-```

package/src/editor_logs/index.md

@@ -1,48 +0,0 @@
----
-group: 'core'
-toc: content
----
-
-# EditorLogs
-
-`LogViewer` 是一个用于显示日志内容的 React 组件。它使用 CodeMirror 编辑器来呈现日志，提供了语法高亮和主题支持。
-
-## 代码演示
-
-### 常规
-
-```tsx
-import { EditorLogs } from '@fe-free/core';
-
-function Demo() {
-  return (
-    <EditorLogs
-      logs={[
-        {
-          timestamp: '2023-01-01 12:00:00',
-          level: 'info',
-          message: 'This is an info log message.',
-        },
-        {
-          timestamp: '2023-01-01 12:00:00',
-          level: 'warn',
-          message: 'This is a warning log message.',
-        },
-        {
-          timestamp: '2023-01-01 12:00:00',
-          level: 'error',
-          message: 'This is an error log message.',
-        },
-        {
-          timestamp: '2023-01-01 12:00:00',
-          level: 'system',
-          message:
-            'This is a debug log message. This is a debug log message This is a debug log message This is a debug log message This is a debug log message',
-        },
-      ]}
-    />
-  );
-}
-
-export default Demo;
-```

package/src/editor_markdown/index.md

@@ -1,40 +0,0 @@
----
-group: 'core'
-toc: content
----
-
-# EditorMarkdown
-
-## 代码演示
-
-### 常规
-
-```tsx
-import { useState } from 'react';
-import { EditorMarkdown } from '@fe-free/core';
-
-function Demo() {
-  const [value] = useState(
-    `# hello
-
-world
-`
-  );
-
-  return (
-    <div style={{ width: '500px', height: '500px' }}>
-      <EditorMarkdown value={value} />
-    </div>
-  );
-}
-
-export default Demo;
-```
-
-## API
-
-```tsx | pure
-interface EditorMarkdownProps {
-  value: string;
-}
-```

package/src/form/index.md

@@ -1,96 +0,0 @@
----
-group: 'core'
-toc: content
----
-
-# Form
-
-## ProFormJSON
-
-JSON
-
-```tsx
-import { ProForm } from '@ant-design/pro-components';
-import { ProFormJSON } from '@fe-free/core';
-
-function Demo() {
-  return (
-    <ProForm>
-      <ProFormJSON name="json" initialValue={JSON.stringify({ name: 'world' }, null, 2)} />
-    </ProForm>
-  );
-}
-
-export default Demo;
-```
-
-readonly
-
-```tsx
-import { ProForm } from '@ant-design/pro-components';
-import { ProFormJSON } from '@fe-free/core';
-
-function Demo() {
-  return (
-    <ProForm>
-      <ProFormJSON
-        name="json"
-        readonly
-        initialValue={JSON.stringify({ name: 'world' }, null, 2)}
-        fieldProps={{
-          mainMenuBar: false,
-        }}
-      />
-    </ProForm>
-  );
-}
-
-export default Demo;
-```
-
-## ProFormJavascript
-
-JSON
-
-```tsx
-import { ProForm } from '@ant-design/pro-components';
-import { ProFormJavascript } from '@fe-free/core';
-
-function Demo() {
-  return (
-    <ProForm>
-      <ProFormJavascript
-        name="json"
-        initialValue={`const name = 'world';
-console.log('hello', name);
-`}
-      />
-    </ProForm>
-  );
-}
-
-export default Demo;
-```
-
-readonly
-
-```tsx
-import { ProForm } from '@ant-design/pro-components';
-import { ProFormJavascript } from '@fe-free/core';
-
-function Demo() {
-  return (
-    <ProForm>
-      <ProFormJavascript
-        name="json"
-        readonly
-        initialValue={`const name = 'world';
-console.log('hello', name);
-`}
-      />
-    </ProForm>
-  );
-}
-
-export default Demo;
-```