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;

91
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,44 +61,57 @@ 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('概述'),
{currentRoleInfo && ( disabled: roleId === AllPermission,
<RoleSummary children: (
currentRoleInfo={currentRoleInfo} <>
onChangeRoleName={handleChangeRoleName} {currentRoleInfo && (
onDeleteRole={async () => { <RoleSummary
await handleDeleteRole(); currentRoleInfo={currentRoleInfo}
setRoleId(AllPermission); // 删除身份组后切换到所有人 onChangeRoleName={handleChangeRoleName}
}} onDeleteRole={async () => {
/> await handleDeleteRole();
)} setRoleId(AllPermission); // 删除身份组后切换到所有人
</PillTabPane> }}
<PillTabPane key="permission" tab={t('权限')}> />
<RolePermission )}
roleId={roleId} </>
fallbackPermissions={groupInfo?.fallbackPermissions ?? []} ),
currentRoleInfo={currentRoleInfo} },
onSavePermission={handleSavePermission} {
/> key: 'permission',
</PillTabPane> label: t('权限'),
<PillTabPane children: (
key="member" <RolePermission
tab={t('管理成员')} roleId={roleId}
disabled={roleId === AllPermission} fallbackPermissions={groupInfo?.fallbackPermissions ?? []}
> currentRoleInfo={currentRoleInfo}
{currentRoleInfo && ( onSavePermission={handleSavePermission}
<RoleMember />
groupId={groupId} ),
currentRoleInfo={currentRoleInfo} },
/> {
)} key: 'member',
</PillTabPane> label: t('管理成员'),
</PillTabs> disabled: roleId === AllPermission,
children: (
<>
{currentRoleInfo && (
<RoleMember
groupId={groupId}
currentRoleInfo={currentRoleInfo}
/>
)}
</>
),
},
]}
/>
</div> </div>
</div> </div>
</Loading> </Loading>

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

@ -44,60 +44,74 @@ 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={[
<Divider orientation="left">{t('已安装')}</Divider> {
key: '1',
label: t('已安装'),
children: (
<>
<Divider orientation="left">{t('已安装')}</Divider>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
{_uniqBy([...builtinPlugins, ...installedPluginList], 'name').map( {_uniqBy(
(plugin) => ( [...builtinPlugins, ...installedPluginList],
<PluginStoreItem 'name'
key={plugin.name} ).map((plugin) => (
manifest={plugin} <PluginStoreItem
installed={true} key={plugin.name}
builtin={builtinPluginNameList.includes(plugin.name)} manifest={plugin}
/> installed={true}
) builtin={builtinPluginNameList.includes(plugin.name)}
)} />
</div> ))}
</PillTabPane> </div>
</>
),
},
{
key: '2',
label: t('全部'),
children: (
<>
<Divider orientation="left">{t('内置插件')}</Divider>
<PillTabPane key="2" tab={t('全部')}> <div className="flex flex-wrap">
<Divider orientation="left">{t('内置插件')}</Divider> {builtinPlugins.map((plugin) => (
<PluginStoreItem
key={plugin.name}
manifest={plugin}
installed={installedPluginNameList.includes(plugin.name)}
builtin={true}
/>
))}
</div>
<div className="flex flex-wrap"> <Divider orientation="left">{t('插件中心')}</Divider>
{builtinPlugins.map((plugin) => (
<PluginStoreItem
key={plugin.name}
manifest={plugin}
installed={installedPluginNameList.includes(plugin.name)}
builtin={true}
/>
))}
</div>
<Divider orientation="left">{t('插件中心')}</Divider> <div className="flex flex-wrap">
{allPlugins
<div className="flex flex-wrap"> .filter((p) => !builtinPluginNameList.includes(p.name)) // 插件中心只显示不包含内置插件的插件
{allPlugins .map((plugin) => (
.filter((p) => !builtinPluginNameList.includes(p.name)) // 插件中心只显示不包含内置插件的插件 <PluginStoreItem
.map((plugin) => ( key={plugin.name}
<PluginStoreItem manifest={plugin}
key={plugin.name} installed={installedPluginNameList.includes(
manifest={plugin} 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>
); );

91
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,50 +28,50 @@ 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}
<FriendList onSwitchToAddFriend={handleSwitchToAddFriend} /> onChange={setActiveKey}
</PillTabPane> items={_compact([
{
{!disableAddFriend && ( key: '1',
<> label: t('全部'),
<PillTabPane children: (
tab={ <FriendList onSwitchToAddFriend={handleSwitchToAddFriend} />
<Badge ),
className="text-black dark:text-white" },
size="small" !disableAddFriend && {
count={send.length} key: '2',
> label: (
{t('已发送')} <Badge
</Badge> className="text-black dark:text-white"
} size="small"
key="2" count={send.length}
> >
<RequestSend requests={send} /> {t('已发送')}
</PillTabPane> </Badge>
<PillTabPane ),
tab={ children: <RequestSend requests={send} />,
<Badge },
className="text-black dark:text-white" !disableAddFriend && {
size="small" key: '3',
count={received.length} label: (
> <Badge
{t('待处理')} className="text-black dark:text-white"
</Badge> size="small"
} count={received.length}
key="3" >
> {t('待处理')}
<RequestReceived requests={received} /> </Badge>
</PillTabPane> ),
<PillTabPane children: <RequestReceived requests={received} />,
tab={<span className="text-green-400">{t('添加好友')}</span>} },
key="add" !disableAddFriend && {
> key: '4',
<AddFriend /> label: <span className="text-green-400">{t('添加好友')}</span>,
</PillTabPane> children: <AddFriend />,
</> },
)} ])}
</PillTabs> />
</div> </div>
); );
}); });

53
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,27 +25,36 @@ const TasksPanel: React.FC = React.memo(() => {
<NewTask onSuccess={fetch} /> <NewTask onSuccess={fetch} />
<PillTabs> <PillTabs
<PillTabPane key={1} tab={Translate.undone}> items={[
<div> {
{tasks key: '1',
.filter((t) => !t.done) label: Translate.undone,
.map((task) => ( children: (
<TaskItem key={task._id} task={task} /> <div>
))} {tasks
</div> .filter((t) => !t.done)
</PillTabPane> .map((task) => (
<TaskItem key={task._id} task={task} />
<PillTabPane key={2} tab={Translate.done}> ))}
<div> </div>
{tasks ),
.filter((t) => t.done) },
.map((task) => ( {
<TaskItem key={task._id} task={task} /> key: '2',
))} label: Translate.done,
</div> children: (
</PillTabPane> <div>
</PillTabs> {tasks
.filter((t) => t.done)
.map((task) => (
<TaskItem key={task._id} task={task} />
))}
</div>
),
},
]}
/>
</div> </div>
); );
}); });

Write Preview
Loading…
Cancel
Save