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