fix；优化
This commit is contained in:
uiuJun
parent
ea64f4a95d
commit
63f0756678
@ -12,4 +12,5 @@ export default function MyTag({
|
||||
if (!item) return <>-</>;
|
||||
console.log('item', value, item);
|
||||
return <Tag color={item.color}>{item.text}</Tag>;
|
||||
// return <Tag color={item.color}>{item.text}</Tag>;
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button, Card, Space, Divider } from 'antd';
|
||||
import { PlusOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import { PlusOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { history } from '@umijs/max';
|
||||
import { Button, Card, Divider, Space } from 'antd';
|
||||
import { MyPageContainer } from './MyPageContainer';
|
||||
import { usePageTabs } from './usePageTabs';
|
||||
import { history } from '@umijs/max';
|
||||
|
||||
/**
|
||||
* 标签页使用示例组件
|
||||
@ -12,7 +11,7 @@ import { history } from '@umijs/max';
|
||||
export function TabsExample() {
|
||||
const tabsApi = usePageTabs({
|
||||
tabKey: 'tabs-example',
|
||||
tabLabel: '标签页示例'
|
||||
tabLabel: '标签页示例',
|
||||
});
|
||||
|
||||
const handleAddTab = (key: string, label: string, path: string) => {
|
||||
@ -20,7 +19,7 @@ export function TabsExample() {
|
||||
key,
|
||||
label,
|
||||
path,
|
||||
closable: true
|
||||
closable: true,
|
||||
});
|
||||
history.push(path);
|
||||
};
|
||||
@ -44,7 +43,9 @@ export function TabsExample() {
|
||||
|
||||
<Button
|
||||
icon={<UserOutlined />}
|
||||
onClick={() => handleAddTab('user-profile', '用户详情', '/users/profile')}
|
||||
onClick={() =>
|
||||
handleAddTab('user-profile', '用户详情', '/users/profile')
|
||||
}
|
||||
>
|
||||
打开用户详情
|
||||
</Button>
|
||||
@ -60,21 +61,13 @@ export function TabsExample() {
|
||||
<Divider />
|
||||
|
||||
<Space wrap>
|
||||
<Button onClick={() => tabsApi.closeOtherTabs()}>
|
||||
关闭其他标签
|
||||
</Button>
|
||||
<Button onClick={() => tabsApi.closeOtherTabs()}>关闭其他标签</Button>
|
||||
|
||||
<Button onClick={() => tabsApi.closeLeftTabs()}>
|
||||
关闭左侧标签
|
||||
</Button>
|
||||
<Button onClick={() => tabsApi.closeLeftTabs()}>关闭左侧标签</Button>
|
||||
|
||||
<Button onClick={() => tabsApi.closeRightTabs()}>
|
||||
关闭右侧标签
|
||||
</Button>
|
||||
<Button onClick={() => tabsApi.closeRightTabs()}>关闭右侧标签</Button>
|
||||
|
||||
<Button onClick={() => tabsApi.refreshTab()}>
|
||||
刷新当前标签
|
||||
</Button>
|
||||
<Button onClick={() => tabsApi.refreshTab()}>刷新当前标签</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
@ -82,24 +75,48 @@ export function TabsExample() {
|
||||
<div style={{ lineHeight: '1.8' }}>
|
||||
<h4>🎯 核心功能</h4>
|
||||
<ul>
|
||||
<li><strong>多标签页支持</strong>：支持同时打开多个页面标签</li>
|
||||
<li><strong>右键菜单</strong>：右键点击标签页显示操作菜单</li>
|
||||
<li><strong>智能导航</strong>：关闭标签时自动切换到相邻标签</li>
|
||||
<li><strong>状态持久化</strong>：标签页状态在组件间共享</li>
|
||||
<li>
|
||||
<strong>多标签页支持</strong>：支持同时打开多个页面标签
|
||||
</li>
|
||||
<li>
|
||||
<strong>右键菜单</strong>：右键点击标签页显示操作菜单
|
||||
</li>
|
||||
<li>
|
||||
<strong>智能导航</strong>：关闭标签时自动切换到相邻标签
|
||||
</li>
|
||||
<li>
|
||||
<strong>状态持久化</strong>：标签页状态在组件间共享
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>🖱️ 右键菜单操作</h4>
|
||||
<ul>
|
||||
<li><strong>刷新</strong>：重新加载当前标签页</li>
|
||||
<li><strong>关闭</strong>：关闭当前标签页</li>
|
||||
<li><strong>关闭其他</strong>：关闭除当前标签外的所有标签</li>
|
||||
<li><strong>关闭左侧</strong>：关闭当前标签左侧的所有标签</li>
|
||||
<li><strong>关闭右侧</strong>：关闭当前标签右侧的所有标签</li>
|
||||
<li>
|
||||
<strong>刷新</strong>：重新加载当前标签页
|
||||
</li>
|
||||
<li>
|
||||
<strong>关闭</strong>：关闭当前标签页
|
||||
</li>
|
||||
<li>
|
||||
<strong>关闭其他</strong>：关闭除当前标签外的所有标签
|
||||
</li>
|
||||
<li>
|
||||
<strong>关闭左侧</strong>：关闭当前标签左侧的所有标签
|
||||
</li>
|
||||
<li>
|
||||
<strong>关闭右侧</strong>：关闭当前标签右侧的所有标签
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>💻 使用方法</h4>
|
||||
<pre style={{ background: '#f5f5f5', padding: '12px', borderRadius: '4px' }}>
|
||||
{`// 1. 在页面组件中使用
|
||||
<pre
|
||||
style={{
|
||||
background: '#f5f5f5',
|
||||
padding: '12px',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
>
|
||||
{`// 1. 在页面组件中使用
|
||||
import { MyPageContainer, usePageTabs } from '@/common';
|
||||
|
||||
function YourPage() {
|
||||
|
||||
@ -154,12 +154,13 @@ export const MyColumns = {
|
||||
EnumTag({ ...rest }: ReturnType): ReturnType {
|
||||
return {
|
||||
align: 'left',
|
||||
renderText(text: string | number) {
|
||||
const _enum = rest.valueEnum ?? {};
|
||||
renderText(text: any) {
|
||||
const _enum: any = rest?.valueEnum ?? {};
|
||||
if (!_enum) return <>-</>;
|
||||
const item = _enum[text] ?? undefined;
|
||||
if (!item) return <>-</>;
|
||||
return <Tag style={{ color: item?.color }}>{item.text}</Tag>;
|
||||
return <Tag>{item.text}</Tag>;
|
||||
// return <Tag style={{ color: item?.color }}>{item.text}</Tag>;
|
||||
//修改列表的标签样式
|
||||
},
|
||||
...rest,
|
||||
|
||||
@ -27,11 +27,7 @@ export const renderTextHelper = {
|
||||
let item: any = Object.values(Enums).find((data: any) => {
|
||||
return data.value === '' + value;
|
||||
});
|
||||
return isColor ? (
|
||||
<Tag style={{ color: item?.color }}>{item?.text}</Tag>
|
||||
) : (
|
||||
<>{item?.text}</>
|
||||
);
|
||||
return isColor ? <Tag>{item?.text}</Tag> : <>{item?.text}</>;
|
||||
// return <Tag style={{ color: item.color }}>{item.text}</Tag>;
|
||||
},
|
||||
Images(images: string[]) {
|
||||
|
||||
@ -60,7 +60,7 @@ export default function ReceiptAccounts(props: MyBetaModalFormProps) {
|
||||
return `${record?.is_default ? '是' : '否'} `;
|
||||
},
|
||||
},
|
||||
// MyColumns.UpdatedAt(),
|
||||
MyColumns.UpdatedAt(),
|
||||
// MyColumns.CreatedAt(),
|
||||
MyColumns.Option({
|
||||
render: (_, item: any, index, action) => (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user