@fe-free/core 2.1.4 → 2.1.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 2.1.6
+
+### Patch Changes
+
+- feat: page layout
+  - @fe-free/tool@2.1.6
+
+## 2.1.5
+
+### Patch Changes
+
+- feat: json modal
+  - @fe-free/tool@2.1.5
+
 ## 2.1.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -39,7 +39,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.1.4"
+    "@fe-free/tool": "2.1.6"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/index.ts

@@ -27,6 +27,7 @@ export {
   proFormSelectSearchProps,
 } from './form';
 export { Markdown } from './markdown';
+export { PageLayout } from './page_layout';
 export { Table } from './table';
 export type { TableProps } from './table';
 export { useLocalforageState } from './use_localforage_state';

package/src/markdown/chart.tsx

@@ -305,6 +305,7 @@ function ChartBlock(props: any) {
 
   // 大模型会返回一些奇怪字符，需要去掉
   // 不间断空格
+  // eslint-disable-next-line no-irregular-whitespace
   const content = children?.replace(/ /g, '');
 
   return (

package/src/page_layout/index.tsx

@@ -0,0 +1,36 @@
+import cn from 'classnames';
+
+interface PageLayoutProps {
+  direction?: 'horizontal' | 'vertical';
+  start?: React.ReactNode;
+  children?: React.ReactNode;
+  end?: React.ReactNode;
+  className?: string;
+}
+
+function PageLayout({
+  direction = 'horizontal',
+  start,
+  children,
+  end,
+  className,
+}: PageLayoutProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-full h-full',
+        {
+          'flex-row': direction === 'horizontal',
+          'flex-col': direction === 'vertical',
+        },
+        className,
+      )}
+    >
+      <div className="flex-none">{start}</div>
+      <div className="flex-1 overflow-auto">{children}</div>
+      <div className="flex-none">{end}</div>
+    </div>
+  );
+}
+
+export { PageLayout };

package/src/table/index.tsx

@@ -52,8 +52,6 @@ function Table<
     };
   }
 
-  console.log('newSearch', newSearch);
-
   return (
     <ProTable<DataSource, Params>
       cardBordered

package/src/value_type_map/index.tsx

@@ -1,6 +1,7 @@
 import type { ProRenderFieldPropsType } from '@ant-design/pro-components';
 import { dateRender } from './date';
 import { jsonRender } from './json';
+import { jsonModalRender } from './json_modal';
 
 enum CustomValueTypeEnum {
   /** 渲染时间 + 搜索日期范围 */
@@ -9,6 +10,8 @@ enum CustomValueTypeEnum {
   CustomDateAndDateRange = 'CustomDateAndDateRange',
   /** JSON */
   CustomJSON = 'CustomJSON',
+  /** JSON Modal */
+  CustomJSONModal = 'CustomJSONModal',
 }
 
 const customValueTypeMap: Record<string, ProRenderFieldPropsType> = {
@@ -24,6 +27,10 @@ const customValueTypeMap: Record<string, ProRenderFieldPropsType> = {
     render: jsonRender.render,
     renderFormItem: jsonRender.renderFormItem,
   },
+  [CustomValueTypeEnum.CustomJSONModal]: {
+    render: jsonModalRender.render,
+    renderFormItem: jsonModalRender.renderFormItem,
+  },
 };
 
-export { customValueTypeMap, CustomValueTypeEnum };
+export { CustomValueTypeEnum, customValueTypeMap };

package/src/value_type_map/json_modal.tsx

@@ -0,0 +1,56 @@
+import type { ProFormItemProps } from '@ant-design/pro-components';
+import { Modal } from 'antd';
+import { useState } from 'react';
+import type { EditorJSONProps } from '../editor_json';
+import { EditorJSON } from '../editor_json';
+
+interface JSONModalProps extends EditorJSONProps {
+  /** 默认 查看 */
+  title?: string;
+}
+
+function Render(text, props: ProFormItemProps<JSONModalProps>) {
+  const { title = '查看' } = props.fieldProps || {};
+
+  const [show, setShow] = useState(false);
+
+  let jsonText = text;
+
+  if (!text) {
+    return <div>-</div>;
+  }
+
+  try {
+    jsonText = JSON.stringify(JSON.parse(text), null, 2);
+  } catch (e) {
+    console.error(e, text);
+  }
+
+  return (
+    <>
+      <a onClick={() => setShow(true)}>{title}</a>
+      <Modal
+        title={title}
+        open={show}
+        onCancel={() => setShow(false)}
+        onOk={() => setShow(false)}
+        cancelButtonProps={{
+          style: {
+            display: 'none',
+          },
+        }}
+      >
+        <div className="h-[500px]">
+          <EditorJSON value={jsonText} readonly />
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+const jsonModalRender = {
+  render: Render,
+  renderFormItem: () => <></>,
+};
+
+export { jsonModalRender };

package/src/value_type_map/value_type_map.stories.tsx

@@ -76,6 +76,12 @@ const Table = () => {
       ellipsis: true,
       valueType: CustomValueTypeEnum.CustomJSON,
     },
+    {
+      title: 'jsonModal',
+      dataIndex: 'jsonText',
+      ellipsis: true,
+      valueType: CustomValueTypeEnum.CustomJSONModal,
+    },
   ];
 
   return (