refactor: 调整话题插件样式

pull/56/head
moonrailgun 2 years ago
parent bca1c8bf01
commit 585bbdb05a

@ -1,300 +0,0 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/**
* Tailchat
*
* : pnpm run plugins:declaration:generate
*/
/**
* Tailchat
*/
declare module '@capital/common' {
export const useGroupPanelParams: any;
/**
*
*/
export const openModal: (
content: React.ReactNode,
props?: {
/**
*
* @default false
*/
closable?: boolean;
/**
*
*/
maskClosable?: boolean;
/**
* modal
*/
onCloseModal?: () => void;
}
) => number;
export const closeModal: any;
export const ModalWrapper: any;
export const useModalContext: any;
export const openConfirmModal: any;
export const openReconfirmModal: any;
export const Loadable: any;
export const getGlobalState: any;
export const getJWTUserInfo: () => Promise<{
_id?: string;
nickname?: string;
email?: string;
avatar?: string;
}>;
export const dataUrlToFile: any;
export const urlSearchStringify: any;
export const urlSearchParse: any;
export const appendUrlSearch: any;
export const useGroupIdContext: any;
export const getServiceUrl: () => string;
export const getCachedUserInfo: (
userId: string,
refetch?: boolean
) => Promise<{
_id: string;
email: string;
nickname: string;
discriminator: string;
avatar: string | null;
temporary: boolean;
}>;
export const getCachedConverseInfo: any;
export const localTrans: any;
export const getLanguage: any;
export const sharedEvent: any;
export const useAsync: any;
export const useAsyncFn: any;
export const useAsyncRefresh: any;
export const useAsyncRequest: any;
export const uploadFile: any;
export const showToasts: any;
export const showErrorToasts: any;
export const fetchAvailableServices: any;
export const isValidStr: any;
export const useGroupPanelInfo: any;
export const sendMessage: any;
export const useLocation: any;
export const useHistory: any;
export const createFastFormSchema: any;
export const fieldSchema: any;
export const useCurrentUserInfo: any;
export const createPluginRequest: (pluginName: string) => {
get: (actionName: string, config?: any) => Promise<any>;
post: (actionName: string, data?: any, config?: any) => Promise<any>;
};
export const postRequest: any;
export const pluginCustomPanel: any;
export const regCustomPanel: any;
export const pluginGroupPanel: any;
export const regGroupPanel: any;
export const messageInterpreter: any;
export const regMessageInterpreter: any;
export const getMessageRender: any;
export const regMessageRender: any;
export const getMessageTextDecorators: any;
export const regMessageTextDecorators: any;
export const ChatInputActionContextProps: any;
export const pluginChatInputActions: any;
export const regChatInputAction: any;
export const regSocketEventListener: (item: {
eventName: string;
eventFn: (...args: any[]) => void;
}) => void;
export const pluginColorScheme: any;
export const regPluginColorScheme: any;
export const pluginInspectServices: any;
export const regInspectService: any;
export const pluginMessageExtraParsers: any;
export const regMessageExtraParser: any;
export const pluginRootRoute: any;
export const regPluginRootRoute: any;
export const pluginPanelActions: any;
export const regPluginPanelAction: any;
export const pluginPermission: any;
export const regPluginPermission: (permission: {
/**
* key,
* , : plugin.com.msgbyte.github.manage
*/
key: string;
/**
*
*/
title: string;
/**
*
*/
desc: string;
/**
*
*/
default: boolean;
/**
*
*/
required?: string[];
}) => void;
}
/**
* Tailchat
*/
declare module '@capital/component' {
export const Button: any;
export const Checkbox: any;
export const Input: any;
export const Divider: any;
export const Space: any;
export const Menu: any;
export const Table: any;
export const Switch: any;
export const Tooltip: any;
/**
* @link https://ant.design/components/notification-cn/
*/
export const notification: any;
export const Avatar: any;
export const SensitiveText: React.FC<{ className?: string; text: string }>;
export const TextArea: any;
export const Image: any;
export const Icon: any;
export const IconBtn: any;
export const PillTabs: any;
export const PillTabPane: any;
export const LoadingSpinner: any;
export const WebFastForm: any;
export const WebMetaForm: any;
export const createMetaFormSchema: any;
export const metaFormFieldSchema: any;
export const FullModalField: any;
export const DefaultFullModalInputEditorRender: any;
export const DefaultFullModalTextAreaEditorRender: any;
export const openModal: any;
export const closeModal: any;
export const ModalWrapper: any;
export const useModalContext: any;
export const openConfirmModal: any;
export const openReconfirmModal: any;
export const Loading: any;
export const SidebarView: any;
export const GroupPanelSelector: any;
export const Emoji: any;
export const PortalAdd: any;
export const PortalRemove: any;
export const ErrorBoundary: any;
export const UserName: React.FC<{
userId: string;
className?: string;
}>;
}

@ -1,44 +0,0 @@
.plugin-topic-card {
background-color: rgba(0, 0, 0, 0.25);
padding: 10px;
border-radius: 3px;
margin: 10px;
width: auto;
display: flex;
.left {
margin-right: 10px;
}
.right {
flex: 1;
user-select: text;
.header {
display: flex;
line-height: 32px;
.name {
margin-right: 4px;
}
.date {
opacity: 0.6;
}
}
.body {
.content {
margin-top: 6px;
margin-bottom: 6px;
}
.reply {
padding: 10px;
margin-bottom: 6px;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.25);
}
}
}
}

@ -1,10 +1,55 @@
import React from 'react';
import { Avatar, IconBtn } from '@capital/component';
import './TopicCard.less';
import styled from 'styled-components';
const Root = styled.div`
background-color: rgba(0, 0, 0, 0.25);
padding: 10px;
border-radius: 3px;
margin: 10px;
width: auto;
display: flex;
.left {
margin-right: 10px;
}
.right {
flex: 1;
user-select: text;
.header {
display: flex;
line-height: 32px;
.name {
margin-right: 4px;
}
.date {
opacity: 0.6;
}
}
.body {
.content {
margin-top: 6px;
margin-bottom: 6px;
}
.reply {
padding: 10px;
margin-bottom: 6px;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.25);
}
}
}
`;
export const TopicCard: React.FC = React.memo(() => {
return (
<div className="plugin-topic-card">
<Root>
<div className="left">
<Avatar name="any" />
</div>
@ -24,10 +69,10 @@ export const TopicCard: React.FC = React.memo(() => {
</div>
<div className="footer">
<IconBtn icon="mdi:message-reply-text-outline" />
</div>
<IconBtn title="回复" icon="mdi:message-reply-text-outline" />
</div>
</div>
</Root>
);
});
TopicCard.displayName = 'TopicCard';

@ -1,16 +0,0 @@
.plugin-topic-group-panel {
display: flex;
flex-direction: column;
width: 100%;
position: relative;
.create-btn {
position: absolute;
right: 20px;
bottom: 20px;
> .anticon {
font-size: 24px;
}
}
}

@ -7,16 +7,34 @@ import {
IconBtn,
openModal,
closeModal,
LoadingSpinner,
} from '@capital/component';
import { request } from '../request';
import { Translate } from '../translate';
import { TopicCreate } from '../components/modals/TopicCreate';
import './GroupTopicPanelRender.less';
import styled from 'styled-components';
const Root = styled.div({
display: 'flex',
flexDirection: 'column',
width: '100%',
position: 'relative',
'.create-btn': {
position: 'absolute',
right: 20,
bottom: 20,
'> .anticon': {
fontSize: 24,
},
},
});
const GroupTopicPanelRender: React.FC = React.memo(() => {
const panelInfo = useGroupPanelContext();
const [{ value: list = [] }, fetch] = useAsyncRequest(async () => {
const [{ value: list = [], loading }, fetch] = useAsyncRequest(async () => {
if (!panelInfo.groupId || !panelInfo.panelId) {
return [];
}
@ -53,8 +71,12 @@ const GroupTopicPanelRender: React.FC = React.memo(() => {
);
}, [panelInfo, fetch]);
if (loading) {
return <LoadingSpinner />;
}
return (
<div className="plugin-topic-group-panel">
<Root>
{Array.isArray(list) && list.length > 0 ? (
list.map((_, i) => <TopicCard key={i} />)
) : (
@ -72,7 +94,7 @@ const GroupTopicPanelRender: React.FC = React.memo(() => {
title={Translate.createBtn}
onClick={handleCreateTopic}
/>
</div>
</Root>
);
});
GroupTopicPanelRender.displayName = 'GroupTopicPanelRender';

@ -310,6 +310,7 @@ declare module '@capital/component' {
size?: 'small' | 'middle' | 'large';
shape?: 'circle' | 'square';
title?: string;
onClick?: React.MouseEventHandler<HTMLElement>;
}>;
export const PillTabs: any;

Loading…
Cancel
Save