aiden
/
tailchat
mirror of https://github.com/msgbyte/tailchat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate tabs.pane into tabs item

Browse Source
pull/105/merge
moonrailgun 2 years ago
parent c94827b243
commit bea1170276
8 changed files with 220 additions and 180 deletions
Show Stats Download Patch File Download Diff File

1
client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaPoolItem.tsx
Unescape Escape View File

@ -14,6 +14,7 @@ const ItemRoot = styled.div`
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
line-height: 44px; line-height: 44px;
text-wrap: nowrap;
} }
`; `;

19
client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/index.tsx
Unescape Escape View File

@ -2,7 +2,7 @@ import React from 'react';
import { Translate } from '../translate'; import { Translate } from '../translate';
import { OfficialGachaIndex, OfficialGachaType, util } from 'genshin-gacha-kit'; import { OfficialGachaIndex, OfficialGachaType, util } from 'genshin-gacha-kit';
import { useAsync } from '@capital/common'; import { useAsync } from '@capital/common';
import { PillTabs, PillTabPane, LoadingSpinner } from '@capital/component'; import { PillTabs, LoadingSpinner } from '@capital/component';
import { GachaPool } from './GachaPool'; import { GachaPool } from './GachaPool';
import _groupBy from 'lodash/groupBy'; import _groupBy from 'lodash/groupBy';
import './index.less'; import './index.less';
@ -32,16 +32,13 @@ const GenshinPanel: React.FC = React.memo(() => {
{loading && <LoadingSpinner />} {loading && <LoadingSpinner />}
<PillTabs> <PillTabs
{(gachaList ?? []).map((item) => ( items={(gachaList ?? []).map((item) => ({
<PillTabPane key: String(item.gacha_id),
key={item.gacha_id} label: `${item.gacha_name}(${item.begin_time} - ${item.end_time})`,
tab={`${item.gacha_name}(${item.begin_time} - ${item.end_time})`} children: <GachaPool gachaId={item.gacha_id} />,
> }))}
<GachaPool gachaId={item.gacha_id} /> />
</PillTabPane>
))}
</PillTabs>
</div> </div>
); );
}); });

9
client/web/src/components/PillTabs.tsx
Unescape Escape View File

@ -5,11 +5,7 @@ import './PillTabs.less';
/** /**
* @example * @example
* <PillTabs> * <PillTabs items={[...]} />
* <PillTabPane key="1" tab={t('全部')}>
* ...
* </PillTabPane>
* </PillTabs>
*/ */
export const PillTabs: React.FC<TabsProps> = React.memo((props) => { export const PillTabs: React.FC<TabsProps> = React.memo((props) => {
return ( return (
@ -20,4 +16,7 @@ export const PillTabs: React.FC<TabsProps> = React.memo((props) => {
}); });
PillTabs.displayName = 'PillTabs'; PillTabs.displayName = 'PillTabs';
/**
* @deprecated
*/
export const PillTabPane = Tabs.TabPane; export const PillTabPane = Tabs.TabPane;

47
client/web/src/components/modals/GroupDetail/Role/index.tsx
Unescape Escape View File

@ -1,5 +1,5 @@
import { Loading } from '@/components/Loading'; import { Loading } from '@/components/Loading';
import { PillTabPane, PillTabs } from '@/components/PillTabs'; import { PillTabs } from '@/components/PillTabs';
import { AllPermission } from 'tailchat-shared'; import { AllPermission } from 'tailchat-shared';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { t, useGroupInfo } from 'tailchat-shared'; import { t, useGroupInfo } from 'tailchat-shared';
@ -61,12 +61,15 @@ export const GroupRole: React.FC<GroupPermissionProps> = React.memo((props) => {
</div> </div>
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
<PillTabs defaultActiveKey="permission"> <PillTabs
<PillTabPane defaultActiveKey="permission"
key="summary" items={[
tab={t('概述')} {
disabled={roleId === AllPermission} key: 'summary',
> label: t('概述'),
disabled: roleId === AllPermission,
children: (
<>
{currentRoleInfo && ( {currentRoleInfo && (
<RoleSummary <RoleSummary
currentRoleInfo={currentRoleInfo} currentRoleInfo={currentRoleInfo}
@ -77,28 +80,38 @@ export const GroupRole: React.FC<GroupPermissionProps> = React.memo((props) => {
}} }}
/> />
)} )}
</PillTabPane> </>
<PillTabPane key="permission" tab={t('权限')}> ),
},
{
key: 'permission',
label: t('权限'),
children: (
<RolePermission <RolePermission
roleId={roleId} roleId={roleId}
fallbackPermissions={groupInfo?.fallbackPermissions ?? []} fallbackPermissions={groupInfo?.fallbackPermissions ?? []}
currentRoleInfo={currentRoleInfo} currentRoleInfo={currentRoleInfo}
onSavePermission={handleSavePermission} onSavePermission={handleSavePermission}
/> />
</PillTabPane> ),
<PillTabPane },
key="member" {
tab={t('管理成员')} key: 'member',
disabled={roleId === AllPermission} label: t('管理成员'),
> disabled: roleId === AllPermission,
children: (
<>
{currentRoleInfo && ( {currentRoleInfo && (
<RoleMember <RoleMember
groupId={groupId} groupId={groupId}
currentRoleInfo={currentRoleInfo} currentRoleInfo={currentRoleInfo}
/> />
)} )}
</PillTabPane> </>
</PillTabs> ),
},
]}
/>
</div> </div>
</div> </div>
</Loading> </Loading>

52
client/web/src/plugin/PluginStore/index.tsx
Unescape Escape View File

@ -44,25 +44,36 @@ export const PluginStore: React.FC = React.memo(() => {
return ( return (
<div className="p-2 w-full"> <div className="p-2 w-full">
<PillTabs> <PillTabs
<PillTabPane key="1" tab={t('已安装')}> items={[
{
key: '1',
label: t('已安装'),
children: (
<>
<Divider orientation="left">{t('已安装')}</Divider> <Divider orientation="left">{t('已安装')}</Divider>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
{_uniqBy([...builtinPlugins, ...installedPluginList], 'name').map( {_uniqBy(
(plugin) => ( [...builtinPlugins, ...installedPluginList],
'name'
).map((plugin) => (
<PluginStoreItem <PluginStoreItem
key={plugin.name} key={plugin.name}
manifest={plugin} manifest={plugin}
installed={true} installed={true}
builtin={builtinPluginNameList.includes(plugin.name)} builtin={builtinPluginNameList.includes(plugin.name)}
/> />
) ))}
)}
</div> </div>
</PillTabPane> </>
),
<PillTabPane key="2" tab={t('全部')}> },
{
key: '2',
label: t('全部'),
children: (
<>
<Divider orientation="left">{t('内置插件')}</Divider> <Divider orientation="left">{t('内置插件')}</Divider>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
@ -85,19 +96,22 @@ export const PluginStore: React.FC = React.memo(() => {
<PluginStoreItem <PluginStoreItem
key={plugin.name} key={plugin.name}
manifest={plugin} manifest={plugin}
installed={installedPluginNameList.includes(plugin.name)} installed={installedPluginNameList.includes(
plugin.name
)}
/> />
))} ))}
</div> </div>
</PillTabPane> </>
),
<PillTabPane },
tab={<span className="text-green-400">{t('手动安装')}</span>} {
key="3" key: '3',
> label: <span className="text-green-400">{t('手动安装')}</span>,
<ManualInstall /> children: <ManualInstall />,
</PillTabPane> },
</PillTabs> ]}
/>
</div> </div>
); );
}); });

22
client/web/src/routes/Main/Content/Inbox/Sidebar.tsx
Unescape Escape View File

@ -136,14 +136,20 @@ export const InboxSidebar: React.FC = React.memo(() => {
</SectionHeader> </SectionHeader>
<div className="overflow-hidden"> <div className="overflow-hidden">
<PillTabs> <PillTabs
<PillTabPane key="1" tab={`${t('全部')}`}> items={[
{fullList.map((item) => renderInbox(item))} {
</PillTabPane> key: '1',
<PillTabPane key="2" tab={`${t('未读')} (${unreadList.length})`}> label: `${t('全部')}`,
{unreadList.map((item) => renderInbox(item))} children: <>{fullList.map((item) => renderInbox(item))}</>,
</PillTabPane> },
</PillTabs> {
key: '2',
label: `${t('未读')} (${unreadList.length})`,
children: <>{unreadList.map((item) => renderInbox(item))}</>,
},
]}
/>
</div> </div>
</CommonSidebarWrapper> </CommonSidebarWrapper>
); );

61
client/web/src/routes/Main/Content/Personal/Friends/index.tsx
Unescape Escape View File

@ -1,11 +1,12 @@
import React, { useCallback, useState } from 'react'; import React, { useCallback, useState } from 'react';
import { PillTabPane, PillTabs } from '@/components/PillTabs'; import { PillTabs } from '@/components/PillTabs';
import { AddFriend } from './AddFriend'; import { AddFriend } from './AddFriend';
import { t, useAppSelector, useGlobalConfigStore } from 'tailchat-shared'; import { t, useAppSelector, useGlobalConfigStore } from 'tailchat-shared';
import { RequestSend } from './RequestSend'; import { RequestSend } from './RequestSend';
import { RequestReceived } from './RequestReceived'; import { RequestReceived } from './RequestReceived';
import { FriendList } from './FriendList'; import { FriendList } from './FriendList';
import { Badge } from 'antd'; import { Badge } from 'antd';
import _compact from 'lodash/compact';
/** /**
* 主要内容组件 * 主要内容组件
@ -27,15 +28,20 @@ export const FriendPanel: React.FC = React.memo(() => {
return ( return (
<div className="w-full"> <div className="w-full">
<PillTabs activeKey={activeKey} onChange={setActiveKey}> <PillTabs
<PillTabPane tab={t('全部')} key="1"> activeKey={activeKey}
onChange={setActiveKey}
items={_compact([
{
key: '1',
label: t('全部'),
children: (
<FriendList onSwitchToAddFriend={handleSwitchToAddFriend} /> <FriendList onSwitchToAddFriend={handleSwitchToAddFriend} />
</PillTabPane> ),
},
{!disableAddFriend && ( !disableAddFriend && {
<> key: '2',
<PillTabPane label: (
tab={
<Badge <Badge
className="text-black dark:text-white" className="text-black dark:text-white"
size="small" size="small"
@ -43,13 +49,12 @@ export const FriendPanel: React.FC = React.memo(() => {
> >
{t('已发送')} {t('已发送')}
</Badge> </Badge>
} ),
key="2" children: <RequestSend requests={send} />,
> },
<RequestSend requests={send} /> !disableAddFriend && {
</PillTabPane> key: '3',
<PillTabPane label: (
tab={
<Badge <Badge
className="text-black dark:text-white" className="text-black dark:text-white"
size="small" size="small"
@ -57,20 +62,16 @@ export const FriendPanel: React.FC = React.memo(() => {
> >
{t('待处理')} {t('待处理')}
</Badge> </Badge>
} ),
key="3" children: <RequestReceived requests={received} />,
> },
<RequestReceived requests={received} /> !disableAddFriend && {
</PillTabPane> key: '4',
<PillTabPane label: <span className="text-green-400">{t('添加好友')}</span>,
tab={<span className="text-green-400">{t('添加好友')}</span>} children: <AddFriend />,
key="add" },
> ])}
<AddFriend /> />
</PillTabPane>
</>
)}
</PillTabs>
</div> </div>
); );
}); });

25
server/plugins/com.msgbyte.tasks/web/plugins/com.msgbyte.tasks/src/TasksPanel/index.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useAsyncFn } from '@capital/common'; import { useAsyncFn } from '@capital/common';
import { PillTabs, PillTabPane } from '@capital/component'; import { PillTabs } from '@capital/component';
import type { TaskItemType } from './type'; import type { TaskItemType } from './type';
import { TaskItem } from './TaskItem'; import { TaskItem } from './TaskItem';
import { NewTask } from './NewTask'; import { NewTask } from './NewTask';
@ -25,8 +25,12 @@ const TasksPanel: React.FC = React.memo(() => {
<NewTask onSuccess={fetch} /> <NewTask onSuccess={fetch} />
<PillTabs> <PillTabs
<PillTabPane key={1} tab={Translate.undone}> items={[
{
key: '1',
label: Translate.undone,
children: (
<div> <div>
{tasks {tasks
.filter((t) => !t.done) .filter((t) => !t.done)
@ -34,9 +38,12 @@ const TasksPanel: React.FC = React.memo(() => {
<TaskItem key={task._id} task={task} /> <TaskItem key={task._id} task={task} />
))} ))}
</div> </div>
</PillTabPane> ),
},
<PillTabPane key={2} tab={Translate.done}> {
key: '2',
label: Translate.done,
children: (
<div> <div>
{tasks {tasks
.filter((t) => t.done) .filter((t) => t.done)
@ -44,8 +51,10 @@ const TasksPanel: React.FC = React.memo(() => {
<TaskItem key={task._id} task={task} /> <TaskItem key={task._id} task={task} />
))} ))}
</div> </div>
</PillTabPane> ),
</PillTabs> },
]}
/>
</div> </div>
); );
}); });

Write Preview
Loading…
Cancel
Save