chore: less render demo

hsbtr · Nov 3, 2022 · 02fe90f · 02fe90f
1 parent 2a487cf
commit 02fe90f
Show file tree

Hide file tree

Showing 12 changed files with 472 additions and 3,352 deletions.
diff --git a/packages/field/src/demos/tree-select-search-value.tsx b/packages/field/src/demos/tree-select-search-value.tsx
@@ -71,6 +71,7 @@ export default function App() {
         initialValues={{
           name: ['0-0'],
         }}
+        onFinish={async (e) => console.log(e)}
       >
         <ProFormTreeSelect
           name="name"

diff --git a/packages/layout/src/components/WaterMark/demos/frontend.tsx b/packages/layout/src/components/WaterMark/demos/frontend.tsx
@@ -1,8 +1,6 @@
 /** Title: 前置水印 */
-import { QuestionCircleOutlined } from '@ant-design/icons';
 import type { ProColumns } from '@ant-design/pro-components';
 import { ProTable, TableDropdown, WaterMark } from '@ant-design/pro-components';
-import { Tooltip } from 'antd';
 
 const valueEnum = {
   0: 'close',
@@ -75,21 +73,6 @@ const columns: ProColumns<TableListItem>[] = [
       兼某某: { text: '兼某某' },
     },
   },
-  {
-    title: (
-      <>
-        创建时间
-        <Tooltip placement="top" title="这是一段描述">
-          <QuestionCircleOutlined style={{ marginInlineStart: 4 }} />
-        </Tooltip>
-      </>
-    ),
-    width: 140,
-    key: 'since',
-    dataIndex: 'createdAt',
-    valueType: 'date',
-    sorter: (a, b) => a.createdAt - b.createdAt,
-  },
   {
     title: '备注',
     dataIndex: 'memo',

diff --git a/packages/table/src/demos/dataSource.tsx b/packages/table/src/demos/dataSource.tsx
@@ -1,7 +1,7 @@
-import { EllipsisOutlined, QuestionCircleOutlined, SearchOutlined } from '@ant-design/icons';
+import { EllipsisOutlined, SearchOutlined } from '@ant-design/icons';
 import type { ProColumns } from '@ant-design/pro-components';
 import { ProTable, TableDropdown } from '@ant-design/pro-components';
-import { Button, Dropdown, Input, Menu, Tooltip } from 'antd';
+import { Button, Dropdown, Input, Menu } from 'antd';
 
 const valueEnum = {
   0: 'close',
@@ -86,21 +86,6 @@ const columns: ProColumns<TableListItem>[] = [
       error: { text: '异常', status: 'Error' },
     },
   },
-  {
-    title: (
-      <>
-        创建时间
-        <Tooltip placement="top" title="这是一段描述">
-          <QuestionCircleOutlined style={{ marginInlineStart: 4 }} />
-        </Tooltip>
-      </>
-    ),
-    width: 140,
-    key: 'since',
-    dataIndex: 'createdAt',
-    valueType: 'date',
-    sorter: (a, b) => a.createdAt - b.createdAt,
-  },
   {
     title: '备注',
     dataIndex: 'memo',

diff --git a/packages/table/src/demos/lightfilter.tsx b/packages/table/src/demos/lightfilter.tsx
@@ -1,7 +1,5 @@
-import { QuestionCircleOutlined } from '@ant-design/icons';
 import type { ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import { Tooltip } from 'antd';
 import dayjs from 'dayjs';
 
 export type TableListItem = {
@@ -54,20 +52,6 @@ const columns: ProColumns<TableListItem>[] = [
       兼某某: { text: '兼某某' },
     },
   },
-  {
-    title: (
-      <>
-        创建时间
-        <Tooltip placement="top" title="这是一段描述">
-          <QuestionCircleOutlined style={{ marginInlineStart: 4 }} />
-        </Tooltip>
-      </>
-    ),
-    key: 'since',
-    dataIndex: 'createdAt',
-    valueType: 'date',
-    sorter: (a, b) => a.createdAt - b.createdAt,
-  },
 ];
 
 export default () => {
@@ -87,13 +71,7 @@ export default () => {
       pagination={{
         showQuickJumper: true,
       }}
-      options={{
-        search: true,
-        setting: false,
-        fullScreen: false,
-        density: false,
-        reload: false,
-      }}
+      options={false}
       search={{
         filterType: 'light',
       }}

diff --git a/packages/table/src/demos/listToolBar.tsx b/packages/table/src/demos/listToolBar.tsx
@@ -1,7 +1,6 @@
-import { QuestionCircleOutlined } from '@ant-design/icons';
 import type { ProColumns } from '@ant-design/pro-components';
 import { LightFilter, ProFormDatePicker, ProTable } from '@ant-design/pro-components';
-import { Badge, Button, Tooltip } from 'antd';
+import { Badge, Button } from 'antd';
 import React, { useState } from 'react';
 
 export type TableListItem = {
@@ -73,21 +72,6 @@ const columns: ProColumns<TableListItem>[] = [
     align: 'right',
     sorter: (a, b) => a.containers - b.containers,
   },
-  {
-    title: (
-      <>
-        创建时间
-        <Tooltip placement="top" title="这是一段描述">
-          <QuestionCircleOutlined style={{ marginInlineStart: 4 }} />
-        </Tooltip>
-      </>
-    ),
-    width: 140,
-    key: 'since',
-    dataIndex: 'createdAt',
-    valueType: 'date',
-    sorter: (a, b) => a.createdAt - b.createdAt,
-  },
   {
     title: '操作',
     key: 'option',

diff --git a/packages/table/src/demos/no-option.tsx b/packages/table/src/demos/no-option.tsx
@@ -1,7 +1,7 @@
-import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 import type { ProColumns } from '@ant-design/pro-components';
-import { ProTable, TableDropdown } from '@ant-design/pro-components';
-import { Button, Tooltip } from 'antd';
+import { ProTable } from '@ant-design/pro-components';
+import { Button } from 'antd';
 
 const valueEnum = {
   0: 'close',
@@ -62,57 +62,15 @@ const columns: ProColumns<TableListItem>[] = [
     },
   },
   {
-    title: '创建者',
-    width: 80,
-    dataIndex: 'creator',
-    valueEnum: {
-      all: { text: '全部' },
-      付小小: { text: '付小小' },
-      曲丽丽: { text: '曲丽丽' },
-      林东东: { text: '林东东' },
-      陈帅帅: { text: '陈帅帅' },
-      兼某某: { text: '兼某某' },
-    },
-  },
-  {
-    title: (
-      <>
-        创建时间
-        <Tooltip placement="top" title="这是一段描述">
-          <QuestionCircleOutlined style={{ marginInlineStart: 4 }} />
-        </Tooltip>
-      </>
-    ),
+    title: '创建时间',
+    tooltip: '这是一段描述',
     width: 140,
     key: 'since',
+    hideInSearch: true,
     dataIndex: 'createdAt',
     valueType: 'date',
     sorter: (a, b) => a.createdAt - b.createdAt,
   },
-  {
-    title: '备注',
-    dataIndex: 'memo',
-    ellipsis: true,
-    copyable: true,
-  },
-  {
-    title: '操作',
-    width: 180,
-    key: 'option',
-    valueType: 'option',
-    render: () => [
-      <a key="link">链路</a>,
-      <a key="link2">报警</a>,
-      <a key="link3">监控</a>,
-      <TableDropdown
-        key="actionGroup"
-        menus={[
-          { key: 'copy', name: '复制' },
-          { key: 'delete', name: '删除' },
-        ]}
-      />,
-    ],
-  },
 ];
 
 export default () => {

diff --git a/packages/table/src/demos/no-title.tsx b/packages/table/src/demos/no-title.tsx
@@ -96,18 +96,14 @@ const MemberList: React.FC = () => {
       dataIndex: 'email',
       title: '账号',
     },
-    {
-      dataIndex: 'phone',
-      title: '手机号',
-    },
     {
       dataIndex: 'role',
       title: '角色',
       render: (_, record) => (
         <Dropdown overlay={roleMenu}>
-          <span>
+          <a>
             {RoleMap[record.role || 'admin'].name} <DownOutlined />
-          </span>
+          </a>
         </Dropdown>
       ),
     },

diff --git a/packages/table/src/demos/normal.tsx b/packages/table/src/demos/normal.tsx
@@ -1,7 +1,7 @@
-import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 import type { ProColumns } from '@ant-design/pro-components';
 import { ProTable, TableDropdown } from '@ant-design/pro-components';
-import { Button, Tooltip } from 'antd';
+import { Button } from 'antd';
 
 const valueEnum = {
   0: 'close',
@@ -74,27 +74,6 @@ const columns: ProColumns<TableListItem>[] = [
       兼某某: { text: '兼某某' },
     },
   },
-  {
-    title: (
-      <>
-        创建时间
-        <Tooltip placement="top" title="这是一段描述">
-          <QuestionCircleOutlined style={{ marginInlineStart: 4 }} />
-        </Tooltip>
-      </>
-    ),
-    width: 140,
-    key: 'since',
-    dataIndex: 'createdAt',
-    valueType: 'date',
-    sorter: (a, b) => a.createdAt - b.createdAt,
-  },
-  {
-    title: '备注',
-    dataIndex: 'memo',
-    ellipsis: true,
-    copyable: true,
-  },
   {
     title: '操作',
     width: 180,

diff --git a/packages/table/src/demos/table-nested.tsx b/packages/table/src/demos/table-nested.tsx
@@ -1,7 +1,7 @@
-import { DownOutlined, EllipsisOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { DownOutlined, EllipsisOutlined } from '@ant-design/icons';
 import type { ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import { Button, Tag, Tooltip } from 'antd';
+import { Button, Tag } from 'antd';
 
 export type Status = {
   color: string;
@@ -88,35 +88,6 @@ const columns: ProColumns<TableListItem>[] = [
       兼某某: { text: '兼某某' },
     },
   },
-  {
-    title: (
-      <>
-        创建时间
-        <Tooltip placement="top" title="这是一段描述">
-          <QuestionCircleOutlined style={{ marginInlineStart: 4 }} />
-        </Tooltip>
-      </>
-    ),
-    width: 140,
-    key: 'since',
-    dataIndex: 'createdAt',
-    valueType: 'date',
-    sorter: (a, b) => a.createdAt - b.createdAt,
-  },
-  {
-    title: '操作',
-    width: 164,
-    key: 'option',
-    valueType: 'option',
-    render: () => [
-      <a key="1">链路</a>,
-      <a key="2">报警</a>,
-      <a key="3">监控</a>,
-      <a key="4">
-        <EllipsisOutlined />
-      </a>,
-    ],
-  },
 ];
 
 const expandedRowRender = () => {

diff --git a/packages/table/src/table.md b/packages/table/src/table.md
@@ -47,13 +47,13 @@ ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码
 
 ### 无 ToolBar 的表格
 
-<code src="./demos/no-title.tsx" height="426px" title="无 ToolBar 的表格"/>
+<code src="./demos/no-title.tsx" background="#f5f5f5"  height="426px" title="无 ToolBar 的表格"/>
 
 ### 必填的查询表单
 
 尽量使用 initialValue 来解决问题，必填项挫败感比较强
 
-<code src="./demos/open-rules.tsx" height="718px" title="必填的查询表单"/>
+<code src="./demos/open-rules.tsx" background="#f5f5f5"  height="718px" title="必填的查询表单"/>
 
 ### 嵌套表格
 
@@ -256,7 +256,7 @@ import { ConfigProvider } from '@ant-design/pro-provide';
 
 ### 自定义错误边界
 
-<code src="./demos/error-boundaries.tsx" title="自定义错误边界" height="500px" iframe="572px"/>
+<code src="./demos/error-boundaries.tsx" background="#f5f5f5"  title="自定义错误边界" height="500px" iframe="572px"/>
 
 <code src="./demos/error-boundaries-false.tsx" debug title="取消自定义错误边界"  height="500px" iframe="462px" />