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

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

@ -5,11 +5,7 @@ import './PillTabs.less';
/**
* @example
* <PillTabs>
* <PillTabPane key="1" tab={t('全部')}>
* ...
* </PillTabPane>
* </PillTabs>
* <PillTabs items={[...]} />
*/
export const PillTabs: React.FC<TabsProps> = React.memo((props) => {
return (
@ -20,4 +16,7 @@ export const PillTabs: React.FC<TabsProps> = React.memo((props) => {
});
PillTabs.displayName = 'PillTabs';
/**
* @deprecated
*/
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 { PillTabPane, PillTabs } from '@/components/PillTabs';
import { PillTabs } from '@/components/PillTabs';
import { AllPermission } from 'tailchat-shared';
import React, { useMemo, useState } from 'react';
import { t, useGroupInfo } from 'tailchat-shared';
@ -61,44 +61,57 @@ export const GroupRole: React.FC<GroupPermissionProps> = React.memo((props) => {
</div>
<div className="flex-1 overflow-y-auto">
<PillTabs defaultActiveKey="permission">
<PillTabPane
key="summary"
tab={t('概述')}
disabled={roleId === AllPermission}
>
{currentRoleInfo && (
<RoleSummary
currentRoleInfo={currentRoleInfo}
onChangeRoleName={handleChangeRoleName}
onDeleteRole={async () => {
await handleDeleteRole();
setRoleId(AllPermission); // 删除身份组后切换到所有人
}}
/>
)}
</PillTabPane>
<PillTabPane key="permission" tab={t('权限')}>
<RolePermission
roleId={roleId}
fallbackPermissions={groupInfo?.fallbackPermissions ?? []}
currentRoleInfo={currentRoleInfo}
onSavePermission={handleSavePermission}
/>
</PillTabPane>
<PillTabPane
key="member"
tab={t('管理成员')}
disabled={roleId === AllPermission}
>
{currentRoleInfo && (
<RoleMember
groupId={groupId}
currentRoleInfo={currentRoleInfo}
/>
)}
</PillTabPane>
</PillTabs>
<PillTabs
defaultActiveKey="permission"
items={[
{
key: 'summary',
label: t('概述'),
disabled: roleId === AllPermission,
children: (
<>
{currentRoleInfo && (
<RoleSummary
currentRoleInfo={currentRoleInfo}
onChangeRoleName={handleChangeRoleName}
onDeleteRole={async () => {
await handleDeleteRole();
setRoleId(AllPermission); // 删除身份组后切换到所有人
}}
/>
)}
</>
),
},
{
key: 'permission',
label: t('权限'),
children: (
<RolePermission
roleId={roleId}
fallbackPermissions={groupInfo?.fallbackPermissions ?? []}
currentRoleInfo={currentRoleInfo}
onSavePermission={handleSavePermission}
/>
),
},
{
key: 'member',
label: t('管理成员'),
disabled: roleId === AllPermission,
children: (
<>
{currentRoleInfo && (
<RoleMember
groupId={groupId}
currentRoleInfo={currentRoleInfo}
/>
)}
</>
),
},
]}
/>
</div>
</div>
</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 (
<div className="p-2 w-full">
<PillTabs>
<PillTabPane key="1" tab={t('已安装')}>
<Divider orientation="left">{t('已安装')}</Divider>
<PillTabs
items={[
{
key: '1',
label: t('已安装'),
children: (
<>
<Divider orientation="left">{t('已安装')}</Divider>
<div className="flex flex-wrap">
{_uniqBy([...builtinPlugins, ...installedPluginList], 'name').map(
(plugin) => (
<PluginStoreItem
key={plugin.name}
manifest={plugin}
installed={true}
builtin={builtinPluginNameList.includes(plugin.name)}
/>
)
)}
</div>
</PillTabPane>
<div className="flex flex-wrap">
{_uniqBy(
[...builtinPlugins, ...installedPluginList],
'name'
).map((plugin) => (
<PluginStoreItem
key={plugin.name}
manifest={plugin}
installed={true}
builtin={builtinPluginNameList.includes(plugin.name)}
/>
))}
</div>
</>
),
},
{
key: '2',
label: t('全部'),
children: (
<>
<Divider orientation="left">{t('内置插件')}</Divider>
<PillTabPane key="2" tab={t('全部')}>
<Divider orientation="left">{t('内置插件')}</Divider>
<div className="flex flex-wrap">
{builtinPlugins.map((plugin) => (
<PluginStoreItem
key={plugin.name}
manifest={plugin}
installed={installedPluginNameList.includes(plugin.name)}
builtin={true}
/>
))}
</div>
<div className="flex flex-wrap">
{builtinPlugins.map((plugin) => (
<PluginStoreItem
key={plugin.name}
manifest={plugin}
installed={installedPluginNameList.includes(plugin.name)}
builtin={true}
/>
))}
</div>
<Divider orientation="left">{t('插件中心')}</Divider>
<Divider orientation="left">{t('插件中心')}</Divider>
<div className="flex flex-wrap">
{allPlugins
.filter((p) => !builtinPluginNameList.includes(p.name)) // 插件中心只显示不包含内置插件的插件
.map((plugin) => (
<PluginStoreItem
key={plugin.name}
manifest={plugin}
installed={installedPluginNameList.includes(plugin.name)}
/>
))}
</div>
</PillTabPane>
<PillTabPane
tab={<span className="text-green-400">{t('手动安装')}</span>}
key="3"
>
<ManualInstall />
</PillTabPane>
</PillTabs>
<div className="flex flex-wrap">
{allPlugins
.filter((p) => !builtinPluginNameList.includes(p.name)) // 插件中心只显示不包含内置插件的插件
.map((plugin) => (
<PluginStoreItem
key={plugin.name}
manifest={plugin}
installed={installedPluginNameList.includes(
plugin.name
)}
/>
))}
</div>
</>
),
},
{
key: '3',
label: <span className="text-green-400">{t('手动安装')}</span>,
children: <ManualInstall />,
},
]}
/>
</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>
<div className="overflow-hidden">
<PillTabs>
<PillTabPane key="1" tab={`${t('全部')}`}>
{fullList.map((item) => renderInbox(item))}
</PillTabPane>
<PillTabPane key="2" tab={`${t('未读')} (${unreadList.length})`}>
{unreadList.map((item) => renderInbox(item))}
</PillTabPane>
</PillTabs>
<PillTabs
items={[
{
key: '1',
label: `${t('全部')}`,
children: <>{fullList.map((item) => renderInbox(item))}</>,
},
{
key: '2',
label: `${t('未读')} (${unreadList.length})`,
children: <>{unreadList.map((item) => renderInbox(item))}</>,
},
]}
/>
</div>
</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 { PillTabPane, PillTabs } from '@/components/PillTabs';
import { PillTabs } from '@/components/PillTabs';
import { AddFriend } from './AddFriend';
import { t, useAppSelector, useGlobalConfigStore } from 'tailchat-shared';
import { RequestSend } from './RequestSend';
import { RequestReceived } from './RequestReceived';
import { FriendList } from './FriendList';
import { Badge } from 'antd';
import _compact from 'lodash/compact';
/**
* 主要内容组件
@ -27,50 +28,50 @@ export const FriendPanel: React.FC = React.memo(() => {
return (
<div className="w-full">
<PillTabs activeKey={activeKey} onChange={setActiveKey}>
<PillTabPane tab={t('全部')} key="1">
<FriendList onSwitchToAddFriend={handleSwitchToAddFriend} />
</PillTabPane>
{!disableAddFriend && (
<>
<PillTabPane
tab={
<Badge
className="text-black dark:text-white"
size="small"
count={send.length}
>
{t('已发送')}
</Badge>
}
key="2"
>
<RequestSend requests={send} />
</PillTabPane>
<PillTabPane
tab={
<Badge
className="text-black dark:text-white"
size="small"
count={received.length}
>
{t('待处理')}
</Badge>
}
key="3"
>
<RequestReceived requests={received} />
</PillTabPane>
<PillTabPane
tab={<span className="text-green-400">{t('添加好友')}</span>}
key="add"
>
<AddFriend />
</PillTabPane>
</>
)}
</PillTabs>
<PillTabs
activeKey={activeKey}
onChange={setActiveKey}
items={_compact([
{
key: '1',
label: t('全部'),
children: (
<FriendList onSwitchToAddFriend={handleSwitchToAddFriend} />
),
},
!disableAddFriend && {
key: '2',
label: (
<Badge
className="text-black dark:text-white"
size="small"
count={send.length}
>
{t('已发送')}
</Badge>
),
children: <RequestSend requests={send} />,
},
!disableAddFriend && {
key: '3',
label: (
<Badge
className="text-black dark:text-white"
size="small"
count={received.length}
>
{t('待处理')}
</Badge>
),
children: <RequestReceived requests={received} />,
},
!disableAddFriend && {
key: '4',
label: <span className="text-green-400">{t('添加好友')}</span>,
children: <AddFriend />,
},
])}
/>
</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 { useAsyncFn } from '@capital/common';
import { PillTabs, PillTabPane } from '@capital/component';
import { PillTabs } from '@capital/component';
import type { TaskItemType } from './type';
import { TaskItem } from './TaskItem';
import { NewTask } from './NewTask';
@ -25,27 +25,36 @@ const TasksPanel: React.FC = React.memo(() => {
<NewTask onSuccess={fetch} />
<PillTabs>
<PillTabPane key={1} tab={Translate.undone}>
<div>
{tasks
.filter((t) => !t.done)
.map((task) => (
<TaskItem key={task._id} task={task} />
))}
</div>
</PillTabPane>
<PillTabPane key={2} tab={Translate.done}>
<div>
{tasks
.filter((t) => t.done)
.map((task) => (
<TaskItem key={task._id} task={task} />
))}
</div>
</PillTabPane>
</PillTabs>
<PillTabs
items={[
{
key: '1',
label: Translate.undone,
children: (
<div>
{tasks
.filter((t) => !t.done)
.map((task) => (
<TaskItem key={task._id} task={task} />
))}
</div>
),
},
{
key: '2',
label: Translate.done,
children: (
<div>
{tasks
.filter((t) => t.done)
.map((task) => (
<TaskItem key={task._id} task={task} />
))}
</div>
),
},
]}
/>
</div>
);
});

Write Preview
Loading…
Cancel
Save