@fe-free/core 2.8.12 → 2.8.13

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 2.8.13
+
+### Patch Changes
+
+- feat: add DataViewer and PageLayout equalParts
+  - @fe-free/tool@2.8.13
+
 ## 2.8.12
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.8.12",
+  "version": "2.8.13",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.8.12"
+    "@fe-free/tool": "2.8.13"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/data_viewer/data_viewer.stories.tsx

@@ -0,0 +1,54 @@
+import type { DataViewerProps } from '@fe-free/core';
+import { DataViewer } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof DataViewer> = {
+  title: '@fe-free/core/DataViewer',
+  component: DataViewer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof DataViewer>;
+
+const BasicDemo = (props: DataViewerProps) => {
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <DataViewer {...props} />
+    </div>
+  );
+};
+
+// 基础用法
+export const Basic: Story = {
+  args: {
+    data: 'hello world!',
+    title: '输入',
+    enableMaximize: true,
+  },
+  render: (props) => <BasicDemo {...props} />,
+};
+
+export const ForJSON: Story = {
+  args: {
+    data: JSON.stringify({ action: 'hello', data: 'world' }, null, 2),
+  },
+  render: (props) => <BasicDemo {...props} />,
+};
+
+export const Markdown: Story = {
+  args: {
+    data: `# Hello, World!
+
+This is a markdown file.
+
+## Title2
+
+### Title 3
+
+- Item 1
+- Item 2
+- Item 3`,
+  },
+  render: (props) => <BasicDemo {...props} />,
+};

package/src/data_viewer/index.tsx

@@ -0,0 +1,70 @@
+import { ArrowsAltOutlined } from '@ant-design/icons';
+import { Button, Modal, Select } from 'antd';
+import { useState } from 'react';
+import { Editor } from '../editor';
+import { PageLayout } from '../page_layout';
+
+interface DataViewerProps {
+  data: string;
+  title?: string | React.ReactNode;
+  enableMaximize?: boolean;
+}
+
+type DataViewerLanguage = 'json' | 'markdown' | 'text';
+
+const options = [
+  { label: 'Text', value: 'text' },
+  { label: 'JSON', value: 'json' },
+  { label: 'Markdown', value: 'markdown' },
+];
+
+function DataViewer({ data, title, enableMaximize }: DataViewerProps) {
+  const [maximize, setMaximize] = useState(false);
+  const [language, setLanguage] = useState<DataViewerLanguage>(
+    options[0].value as DataViewerLanguage,
+  );
+
+  return (
+    <>
+      <PageLayout
+        direction="vertical"
+        start={
+          <div className="flex items-center justify-between gap-2 py-2">
+            <div className="flex-1">{title}</div>
+            <Select
+              options={options}
+              value={language}
+              onChange={(value) => setLanguage(value)}
+              className="w-[110px]"
+            />
+            {enableMaximize && (
+              <Button icon={<ArrowsAltOutlined />} onClick={() => setMaximize(!maximize)} />
+            )}
+          </div>
+        }
+      >
+        <div className="relative h-full">
+          <Editor
+            value={data}
+            language={language === 'text' ? undefined : language}
+            editable={false}
+          />
+        </div>
+      </PageLayout>
+      {maximize && (
+        <Modal title="查看" open width={'80vw'} onCancel={() => setMaximize(false)} footer={null}>
+          <div className="h-[80vh]">
+            <Editor
+              value={data}
+              language={language === 'text' ? undefined : language}
+              editable={false}
+            />
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export { DataViewer };
+export type { DataViewerProps };

package/src/index.ts

@@ -12,6 +12,8 @@ export { CRUDOfList } from './crud_of_list';
 export type { CRUDOfListProps } from './crud_of_list';
 export { CRUDOfPure } from './crud_of_pure';
 export type { CRUDOfPureProps } from './crud_of_pure';
+export { DataViewer } from './data_viewer';
+export type { DataViewerProps } from './data_viewer';
 export { Editor } from './editor';
 export type { EditorProps } from './editor';
 export { EditorJSON } from './editor_json';

package/src/page_layout/index.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import classNames from 'classnames';
 import { Fragment, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import type { TabsProps } from '../tabs';
@@ -9,6 +9,8 @@ interface PageLayoutProps {
   start?: React.ReactNode;
   children?: React.ReactNode;
   end?: React.ReactNode;
+  /** beta equalParts */
+  equalParts?: boolean;
   className?: string;
   startClassName?: string;
   childrenClassName?: string;
@@ -20,6 +22,7 @@ function PageLayout({
   start,
   children,
   end,
+  equalParts,
   className,
   startClassName,
   childrenClassName,
@@ -27,7 +30,7 @@ function PageLayout({
 }: PageLayoutProps) {
   return (
     <div
-      className={cn(
+      className={classNames(
         'flex h-full w-full',
         {
           'flex-row': direction === 'horizontal',
@@ -36,9 +39,45 @@ function PageLayout({
         className,
       )}
     >
-      <div className={cn('flex-none', startClassName)}>{start}</div>
-      <div className={cn('flex-1 overflow-auto', childrenClassName)}>{children}</div>
-      <div className={cn('flex-none', endClassName)}>{end}</div>
+      {start && (
+        <div
+          className={classNames(
+            {
+              'flex-none': !equalParts,
+              'min-w-0 flex-1 flex-shrink-0 overflow-auto': equalParts,
+            },
+            startClassName,
+          )}
+        >
+          {start}
+        </div>
+      )}
+      {children && (
+        <div
+          className={classNames(
+            'flex-1 overflow-auto',
+            {
+              'min-w-0 flex-shrink-0': equalParts,
+            },
+            childrenClassName,
+          )}
+        >
+          {children}
+        </div>
+      )}
+      {end && (
+        <div
+          className={classNames(
+            {
+              'flex-none': !equalParts,
+              'min-w-0 flex-1 flex-shrink-0 overflow-auto': equalParts,
+            },
+            endClassName,
+          )}
+        >
+          {end}
+        </div>
+      )}
     </div>
   );
 }

package/src/page_layout/page_layout.stories.tsx

@@ -27,6 +27,15 @@ export const DirectionVertical: Story = {
   },
 };
 
+export const EqualParts: Story = {
+  args: {
+    className: '!w-[800px] !h-[200px] bg-gray-200',
+    equalParts: true,
+    // start: <div className="h-[100px] bg-red-500">start</div>,
+    children: <div className="h-[100px] bg-blue-500">children</div>,
+    end: <div className="h-[100px] w-[600px] bg-green-500">end</div>,
+  },
+};
 export const ClassName: Story = {
   args: {
     className: '!w-[500px] !h-[500px]',