From cef01c0263e10f56387fabd86d6a3308444a6667 Mon Sep 17 00:00:00 2001 From: canisminor1990 Date: Sat, 15 Jul 2023 21:36:50 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Introduce=20new=20features?= =?UTF-8?q?=20and=20styles=20for=20chat=20application?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The changes include importing new components, modifying existing styles, and introducing new components. The code snippets provided show changes made to various files in a chat application, including changes to ActionIcon components, header components, session item components, and the structure and styling of the chat session list component. The code changes also involve the addition of new files for CSS overrides and global styles, as well as modifications to index pages and chat session selectors. The purpose of these changes is to enhance the functionality and user experience of the chat application by introducing new features and improving the overall styling. --- next-i18next.config.js | 6 +- public/locales/en_US/common.json | 12 ++ public/locales/ja_JP/common.json | 12 ++ public/locales/ko_KR/common.json | 12 ++ public/locales/zh_CN/common.json | 12 ++ public/locales/zh_HK/common.json | 12 ++ src/features/FolderPanel/index.tsx | 1 + src/layout/index.tsx | 4 +- src/layout/style.ts | 78 +------------ src/pages/chat/Config/index.tsx | 57 +++++---- src/pages/chat/Header.tsx | 19 +-- src/pages/chat/SessionList/Header.tsx | 20 +++- .../chat/SessionList/List/SessionItem.tsx | 110 ++++++------------ src/pages/chat/SessionList/List/index.tsx | 29 +---- src/pages/chat/SessionList/List/style.ts | 77 ++++++++++++ src/pages/chat/SessionList/index.tsx | 15 +-- src/pages/chat/Sidebar.tsx | 4 +- src/pages/index.page.tsx | 3 +- .../session/slices/session/selectors/chat.ts | 3 +- src/styles/antdOverride.ts | 39 +++++++ src/styles/global.ts | 23 ++++ src/styles/index.ts | 6 + src/types/global.d.ts | 14 +++ 23 files changed, 339 insertions(+), 229 deletions(-) create mode 100644 src/pages/chat/SessionList/List/style.ts create mode 100644 src/styles/antdOverride.ts create mode 100644 src/styles/global.ts create mode 100644 src/styles/index.ts create mode 100644 src/types/global.d.ts diff --git a/next-i18next.config.js b/next-i18next.config.js index 1135d20c9cf9..20fc389776da 100644 --- a/next-i18next.config.js +++ b/next-i18next.config.js @@ -3,11 +3,15 @@ const i18n = require('./.i18nrc'); /** @type {import('next-i18next').UserConfig} */ module.exports = { debug: process.env.NODE_ENV === 'development', + fallbackLng: { + default: ['en'], + zh_TW: ['zh_CN'], + }, i18n: { defaultLocale: i18n.entryLocale, locales: [i18n.entryLocale, ...i18n.outputLocales], }, localePath: - typeof window === 'undefined' ? require('node:path').resolve('./', i18n.output) : '/locales', + typeof window === 'undefined' ? require('node:path').resolve('./public/locales') : '/locales', reloadOnPrerender: process.env.NODE_ENV === 'development', }; diff --git a/public/locales/en_US/common.json b/public/locales/en_US/common.json index ecd5b8bc84ed..2f9e4b062055 100644 --- a/public/locales/en_US/common.json +++ b/public/locales/en_US/common.json @@ -1,4 +1,16 @@ { + "agentProfile": "Agent Profile", + "archive": "Archive", + "cancel": "Cancel", + "close": "Close", + "confirmRemoveSessionItemAlert": "You are about to remove this agent. Once removed, it cannot be recovered. Please confirm your action.", + "defaultAgent": "Default Agent", + "edit": "Edit", + "newAgent": "New Agent", + "noDescription": "No description", + "ok": "OK", + "searchAgentPlaceholder": "Search agents and conversations...", + "sessionSetting": "Session Setting", "setting": "Setting", "share": "Share" } diff --git a/public/locales/ja_JP/common.json b/public/locales/ja_JP/common.json index feb14cbc2498..7b1d002870b6 100644 --- a/public/locales/ja_JP/common.json +++ b/public/locales/ja_JP/common.json @@ -1,4 +1,16 @@ { + "agentProfile": "エージェントプロファイル", + "archive": "アーカイブ", + "cancel": "キャンセル", + "close": "閉じる", + "confirmRemoveSessionItemAlert": "このエージェントを削除します。削除後は元に戻すことはできません。操作を確認してください", + "defaultAgent": "デフォルトエージェント", + "edit": "編集", + "newAgent": "新しいエージェント", + "noDescription": "説明はありません", + "ok": "OK", + "searchAgentPlaceholder": "エージェントと会話を検索...", + "sessionSetting": "セッション設定", "setting": "設定", "share": "共有する" } diff --git a/public/locales/ko_KR/common.json b/public/locales/ko_KR/common.json index 4d2a5d96c06f..8b5e8f98797f 100644 --- a/public/locales/ko_KR/common.json +++ b/public/locales/ko_KR/common.json @@ -1,4 +1,16 @@ { + "agentProfile": "도우미 프로필", + "archive": "보관", + "cancel": "취소", + "close": "닫기", + "confirmRemoveSessionItemAlert": "이 도우미를 삭제하려고 합니다. 삭제 후에는 복구할 수 없으므로 작업을 확인하십시오.", + "defaultAgent": "기본 도우미", + "edit": "편집", + "newAgent": "새 도우미", + "noDescription": "설명 없음", + "ok": "확인", + "searchAgentPlaceholder": "도우미 및 대화 검색...", + "sessionSetting": "세션 설정", "setting": "설정", "share": "공유" } diff --git a/public/locales/zh_CN/common.json b/public/locales/zh_CN/common.json index 67aa02c32651..eaf8eba5b3b7 100644 --- a/public/locales/zh_CN/common.json +++ b/public/locales/zh_CN/common.json @@ -1,4 +1,16 @@ { + "agentProfile": "助手信息", + "archive": "归档", + "cancel": "取消", + "close": "关闭", + "confirmRemoveSessionItemAlert": "即将删除该助手，删除后该将无法找回，请确认你的操作", + "defaultAgent": "默认助手", + "edit": "编辑", + "newAgent": "新建助手", + "noDescription": "暂无描述", + "ok": "确定", + "searchAgentPlaceholder": "搜索助手和对话...", + "sessionSetting": "会话设置", "setting": "设置", "share": "分享" } diff --git a/public/locales/zh_HK/common.json b/public/locales/zh_HK/common.json index 074a60189447..8efb6a26cc21 100644 --- a/public/locales/zh_HK/common.json +++ b/public/locales/zh_HK/common.json @@ -1,4 +1,16 @@ { + "agentProfile": "助手資訊", + "archive": "歸檔", + "cancel": "取消", + "close": "關閉", + "confirmRemoveSessionItemAlert": "即將刪除該助手，刪除後將無法找回，請確認你的操作", + "defaultAgent": "默認助手", + "edit": "編輯", + "newAgent": "新建助手", + "noDescription": "暫無描述", + "ok": "確定", + "searchAgentPlaceholder": "搜索助手和對話...", + "sessionSetting": "會話設置", "setting": "設置", "share": "分享" } diff --git a/src/features/FolderPanel/index.tsx b/src/features/FolderPanel/index.tsx index 9bd4c7181141..30a3bfad1214 100644 --- a/src/features/FolderPanel/index.tsx +++ b/src/features/FolderPanel/index.tsx @@ -10,6 +10,7 @@ export const useStyles = createStyles(({ css, token }) => ({ panel: css` height: 100vh; color: ${token.colorTextSecondary}; + background: ${token.colorBgContainer}; `, })); diff --git a/src/layout/index.tsx b/src/layout/index.tsx index ea0c164c810d..2a7b88cf9bb0 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -5,7 +5,9 @@ import Zh_CN from 'antd/locale/zh_CN'; import { PropsWithChildren, useEffect } from 'react'; import { useChatStore } from 'src/store/session'; -import { GlobalStyle, useStyles } from './style'; +import { GlobalStyle } from '@/styles'; + +import { useStyles } from './style'; const Layout = ({ children }: PropsWithChildren) => { const { styles } = useStyles(); diff --git a/src/layout/style.ts b/src/layout/style.ts index b0e8dd5e9be1..f9d6886f4d96 100644 --- a/src/layout/style.ts +++ b/src/layout/style.ts @@ -1,7 +1,4 @@ -import { createGlobalStyle, createStyles } from 'antd-style'; -import { rgba } from 'polished'; - -export const NOTIFICATION_PRIMARY = 'notification-primary-info'; +import { createStyles } from 'antd-style'; export const useStyles = createStyles(({ css, token }) => ({ bg: css` @@ -13,82 +10,9 @@ export const useStyles = createStyles(({ css, token }) => ({ height: 100%; background: ${token.colorBgLayout}; - background-image: linear-gradient( - 180deg, - ${token.colorBgContainer} 0%, - rgba(255, 255, 255, 0%) 20% - ); :has(#ChatLayout, #FlowLayout) { overflow: hidden; } `, })); - -export const GlobalStyle = createGlobalStyle` - .ant-btn { - box-shadow: none; - } - - #__next { - height: 100%; - } - - p { - margin-bottom: 0; - } - - li { - display: block; - } - - .ant-btn-default:not(:disabled):not(.ant-btn-dangerous) { - border-color: transparent; - - &:hover { - color: ${(p) => p.theme.colorText}; - background: ${({ theme }) => (theme.isDarkMode ? theme.colorFill : theme.colorFillTertiary)}; - border-color: transparent; - } - } - - .ant-popover { - z-index: 1100; - } - - - /* 定义滚动槽的样式 */ - ::-webkit-scrollbar { - width: 6px; - height: 6px; - margin-right: 4px; - background-color: transparent; /* 定义滚动槽的背景色 */ - - &-thumb { - background-color: ${({ theme }) => theme.colorFill}; /* 定义滚动块的背景色 */ - border-radius: 4px; /* 定义滚动块的圆角半径 */ - } - - &-corner { - display: none; - } - } - - .ant-notification .ant-notification-notice.${NOTIFICATION_PRIMARY} { - background: ${(p) => p.theme.colorPrimary}; - box-shadow: 0 6px 16px 0 ${({ theme }) => rgba(theme.colorPrimary, 0.1)}, - 0 3px 6px -4px ${({ theme }) => rgba(theme.colorPrimary, 0.2)}, - 0 9px 28px 8px ${({ theme }) => rgba(theme.colorPrimary, 0.1)}; - - .anticon { - color: ${(p) => p.theme.colorTextLightSolid} - } - - .ant-notification-notice-message { - margin-bottom: 0; - padding-right: 0; - color: ${(p) => p.theme.colorTextLightSolid}; - } - } - -`; diff --git a/src/pages/chat/Config/index.tsx b/src/pages/chat/Config/index.tsx index 4ea045387641..7e54d3b1eeea 100644 --- a/src/pages/chat/Config/index.tsx +++ b/src/pages/chat/Config/index.tsx @@ -1,6 +1,7 @@ -import { ActionIcon, DraggablePanel } from '@lobehub/ui'; +import { ActionIcon, DraggablePanel, DraggablePanelContainer } from '@lobehub/ui'; import { createStyles } from 'antd-style'; import { LucideEdit, LucideX } from 'lucide-react'; +import { useTranslation } from 'next-i18next'; import { Flexbox } from 'react-layout-kit'; import { shallow } from 'zustand/shallow'; @@ -8,9 +9,11 @@ import { useChatStore } from '@/store/session'; import ReadMode from './ReadMode'; +const WIDTH = 280; + const useStyles = createStyles(({ css, token }) => ({ drawer: css` - background: ${token.colorBgContainer}; + background: ${token.colorBgLayout}; `, header: css` border-bottom: 1px solid ${token.colorBorder}; @@ -18,6 +21,7 @@ const useStyles = createStyles(({ css, token }) => ({ })); const Config = () => { + const { t } = useTranslation('common'); const { styles } = useStyles(); const [showAgentSettings, toggleConfig] = useChatStore( (s) => [s.showAgentSettings, s.toggleConfig], @@ -29,32 +33,41 @@ const Config = () => { className={styles.drawer} expand={showAgentSettings} expandable={false} - minWidth={400} + maxWidth={WIDTH} + minWidth={WIDTH} mode={'float'} pin placement={'right'} resize={{ left: false }} > - - 会话设置 - - - { - toggleConfig(false); - }} - title={'关闭'} - /> + + + {t('agentProfile')} + + + { + toggleConfig(false); + }} + size={{ blockSize: 32, fontSize: 20 }} + title={t('close')} + /> + - - + + ); }; diff --git a/src/pages/chat/Header.tsx b/src/pages/chat/Header.tsx index 9b6e7d50c556..005374573bb2 100644 --- a/src/pages/chat/Header.tsx +++ b/src/pages/chat/Header.tsx @@ -44,8 +44,7 @@ const Header = memo(() => { align={'center'} distribution={'space-between'} horizontal - padding={8} - paddingInline={16} + padding="8px 8px 8px 16px" style={{ borderBottom: `1px solid ${theme.colorSplit}`, gridArea: 'header', @@ -54,20 +53,26 @@ const Header = memo(() => { - {meta?.title} - {meta?.description || '暂无描述'} + {meta?.title || t('defaultAgent')} + {meta?.description || t('noDescription')} - + { // genShareUrl(); }} + size={{ fontSize: 24 }} title={t('share')} /> - - + + ); diff --git a/src/pages/chat/SessionList/Header.tsx b/src/pages/chat/SessionList/Header.tsx index c610698e648f..ca2dc3303bda 100644 --- a/src/pages/chat/SessionList/Header.tsx +++ b/src/pages/chat/SessionList/Header.tsx @@ -1,6 +1,7 @@ import { ActionIcon, Logo, SearchBar } from '@lobehub/ui'; import { createStyles } from 'antd-style'; -import { Plus } from 'lucide-react'; +import { MessageSquarePlus } from 'lucide-react'; +import { useTranslation } from 'next-i18next'; import Link from 'next/link'; import { memo } from 'react'; import { Flexbox } from 'react-layout-kit'; @@ -20,25 +21,32 @@ export const useStyles = createStyles(({ css, token }) => ({ const Header = memo(() => { const { styles } = useStyles(); - + const { t } = useTranslation('common'); const [keywords, createSession] = useChatStore( (s) => [s.searchKeywords, s.createSession], shallow, ); return ( - + - + useChatStore.setState({ searchKeywords: e.target.value })} - placeholder="Search..." - type={'block'} + placeholder={t('searchAgentPlaceholder')} + spotlight + type={'ghost'} value={keywords} /> diff --git a/src/pages/chat/SessionList/List/SessionItem.tsx b/src/pages/chat/SessionList/List/SessionItem.tsx index 7efe9af0bfc3..695e240db1ca 100644 --- a/src/pages/chat/SessionList/List/SessionItem.tsx +++ b/src/pages/chat/SessionList/List/SessionItem.tsx @@ -1,66 +1,31 @@ -import { CloseOutlined } from '@ant-design/icons'; -import { Avatar, List } from '@lobehub/ui'; +import { ActionIcon, Avatar, List } from '@lobehub/ui'; import { Popconfirm } from 'antd'; -import { createStyles } from 'antd-style'; +import { X } from 'lucide-react'; +import { useTranslation } from 'next-i18next'; import { FC, memo } from 'react'; -import { Flexbox } from 'react-layout-kit'; import { shallow } from 'zustand/shallow'; import { sessionSelectors, useChatStore } from '@/store/session'; -const useStyles = createStyles(({ css, cx }) => { - const closeCtn = css` - position: absolute; - top: 50%; - left: 2px; - transform: translateY(-50%); - - width: 16px; - height: 16px; - - font-size: 10px; - - opacity: 0; - `; - return { - active: css` - opacity: 1; - `, - closeCtn, - container: css` - position: relative; - - &:hover { - .${cx(closeCtn)} { - opacity: 1; - } - } - `, - time: css` - align-self: flex-start; - `, - }; -}); +import { useStyles } from './style'; interface SessionItemProps { active: boolean; id: string; loading: boolean; - simple?: boolean; } -const SessionItem: FC = memo(({ id, active, simple = true, loading }) => { +const SessionItem: FC = memo(({ id, active = true, loading }) => { + const { t } = useTranslation('common'); const { styles, theme, cx } = useStyles(); const [title, systemRole, avatar, avatarBackground, updateAt, switchAgent, removeSession] = useChatStore((s) => { const session = sessionSelectors.getSessionById(id)(s); const meta = session.meta; - const systemRole = session.config.systemRole; - return [ - meta.title || systemRole || '默认角色', - systemRole, + meta.title || t('noDescription'), + systemRole || t('defaultAgent'), sessionSelectors.getAgentAvatar(meta), meta.backgroundColor, session?.updateAt, @@ -70,42 +35,43 @@ const SessionItem: FC = memo(({ id, active, simple = true, loa }, shallow); return ( - + + } + className={styles.container} + classNames={{ time: cx('session-time', styles.time) }} + date={updateAt} + description={title} + loading={loading} + onClick={() => { + switchAgent(id); + }} + style={{ + alignItems: 'center', + color: theme.colorText, + }} + title={systemRole} + > removeSession(id)} overlayStyle={{ width: 280 }} - placement={'right'} - title={'即将删除该会话，删除后该将无法找回，请确认你的操作。'} + title={t('confirmRemoveSessionItemAlert')} > - + - - } - classNames={{ time: styles.time }} - date={updateAt} - description={simple ? undefined : systemRole} - loading={loading} - onClick={() => { - switchAgent(id); - }} - style={{ - alignItems: 'center', - color: theme.colorText, - }} - title={title} - /> - + ); }); diff --git a/src/pages/chat/SessionList/List/index.tsx b/src/pages/chat/SessionList/List/index.tsx index 58d60c8a91a0..a4fd94e5571c 100644 --- a/src/pages/chat/SessionList/List/index.tsx +++ b/src/pages/chat/SessionList/List/index.tsx @@ -1,49 +1,30 @@ -import { createStyles } from 'antd-style'; -import { rgba } from 'polished'; import { memo } from 'react'; +import { Flexbox } from 'react-layout-kit'; import { shallow } from 'zustand/shallow'; +import { useStyles } from '@/pages/chat/SessionList/List/style'; import { sessionSelectors, useChatStore } from '@/store/session'; import SessionItem from './SessionItem'; -export const useStyles = createStyles(({ css, token }) => ({ - button: css` - position: sticky; - z-index: 30; - bottom: 0; - - display: flex; - gap: 8px; - align-items: center; - justify-content: center; - - margin-top: 8px; - padding: 12px; - - background: ${rgba(token.colorBgLayout, 0.5)}; - backdrop-filter: blur(8px); - `, -})); - const SessionList = memo(() => { + const { styles, cx } = useStyles(); const [list, activeId, loading] = useChatStore( (s) => [sessionSelectors.chatList(s), s.activeId, s.loading.summarizingTitle], shallow, ); return ( - <> + {list.map(({ id }) => ( ))} - + ); }); diff --git a/src/pages/chat/SessionList/List/style.ts b/src/pages/chat/SessionList/List/style.ts new file mode 100644 index 000000000000..0fb7b975e822 --- /dev/null +++ b/src/pages/chat/SessionList/List/style.ts @@ -0,0 +1,77 @@ +import { createStyles } from 'antd-style'; +import { rgba } from 'polished'; + +export const useStyles = createStyles(({ css, token, cx, stylish }) => { + return { + active: css` + display: flex; + `, + button: css` + position: sticky; + z-index: 30; + bottom: 0; + + display: flex; + gap: 8px; + align-items: center; + justify-content: center; + + margin-top: 8px; + padding: 12px; + + background: ${rgba(token.colorBgLayout, 0.5)}; + backdrop-filter: blur(8px); + `, + + container: css` + position: relative; + + .session-remove { + position: absolute; + top: 50%; + right: 16px; + transform: translateY(-50%); + + width: 16px; + height: 16px; + + font-size: 10px; + + opacity: 0; + background-color: ${token.colorFillTertiary}; + + transition: color 600ms ${token.motionEaseOut}, scale 400ms ${token.motionEaseOut}, + background-color 100ms ${token.motionEaseOut}, opacity 100ms ${token.motionEaseOut}; + + &:hover { + background-color: ${token.colorFill}; + } + } + + .session-time { + opacity: 1; + transition: opacity 100ms ${token.motionEaseOut}; + } + + &:hover { + .session-time { + opacity: 0; + } + + .session-remove { + opacity: 1; + } + } + `, + list: cx( + stylish.noScrollbar, + css` + overflow-x: hidden; + overflow-y: scroll; + `, + ), + time: css` + align-self: flex-start; + `, + }; +}); diff --git a/src/pages/chat/SessionList/index.tsx b/src/pages/chat/SessionList/index.tsx index f00dd9a2ad1b..acd8eba3eb4d 100644 --- a/src/pages/chat/SessionList/index.tsx +++ b/src/pages/chat/SessionList/index.tsx @@ -1,4 +1,3 @@ -import { createStyles } from 'antd-style'; import { memo } from 'react'; import { Flexbox } from 'react-layout-kit'; @@ -7,24 +6,12 @@ import FolderPanel from '@/features/FolderPanel'; import Header from './Header'; import SessionList from './List'; -export const useStyles = createStyles(({ css }) => ({ - center: css` - overflow-x: hidden; - overflow-y: scroll; - padding-inline: 4px 0; - `, -})); - export const Sessions = memo(() => { - const { styles, cx } = useStyles(); - return (
- - - + ); diff --git a/src/pages/chat/Sidebar.tsx b/src/pages/chat/Sidebar.tsx index f9f5c3a35fe3..b3f2bae0bcb9 100644 --- a/src/pages/chat/Sidebar.tsx +++ b/src/pages/chat/Sidebar.tsx @@ -1,5 +1,5 @@ import { ActionIcon, Logo, SideNav } from '@lobehub/ui'; -import { Album, MessageSquare, Settings2 } from 'lucide-react'; +import { MessageSquare, Settings2, Sticker } from 'lucide-react'; import { memo } from 'react'; import { shallow } from 'zustand/shallow'; @@ -22,7 +22,7 @@ const Sidebar = memo(() => { /> setTab('market')} size="large" /> diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx index 1d61c552a330..ef525991d090 100644 --- a/src/pages/index.page.tsx +++ b/src/pages/index.page.tsx @@ -1,5 +1,6 @@ import type { GetStaticProps, InferGetStaticPropsType } from 'next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { memo } from 'react'; import Chat from './chat/index.page'; @@ -14,4 +15,4 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => ({ }, }); -export default Index; +export default memo(Index); diff --git a/src/store/session/slices/session/selectors/chat.ts b/src/store/session/slices/session/selectors/chat.ts index 85cf1c58ceea..d8e5efd38d8c 100644 --- a/src/store/session/slices/session/selectors/chat.ts +++ b/src/store/session/slices/session/selectors/chat.ts @@ -1,4 +1,3 @@ import { MetaData } from '@/types/meta'; -export const getAgentAvatar = (s: MetaData) => - s.avatar || 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp'; +export const getAgentAvatar = (s: MetaData) => s.avatar || '😎'; diff --git a/src/styles/antdOverride.ts b/src/styles/antdOverride.ts new file mode 100644 index 000000000000..b12866a9eb56 --- /dev/null +++ b/src/styles/antdOverride.ts @@ -0,0 +1,39 @@ +import { Theme, css } from 'antd-style'; +import { rgba } from 'polished'; + +export default (token: Theme) => css` + .ant-btn { + box-shadow: none; + } + + .ant-btn-default:not(:disabled):not(.ant-btn-dangerous) { + border-color: transparent; + + &:hover { + color: ${token.colorText}; + background: ${token.isDarkMode ? token.colorFill : token.colorFillTertiary}; + border-color: transparent; + } + } + + .ant-popover { + z-index: 1100; + } + + .ant-notification .ant-notification-notice.notification-primary-info { + background: ${token.colorPrimary}; + box-shadow: 0 6px 16px 0 ${rgba(token.colorPrimary, 0.1)}, + 0 3px 6px -4px ${rgba(token.colorPrimary, 0.2)}, + 0 9px 28px 8px ${rgba(token.colorPrimary, 0.1)}; + + .anticon { + color: ${token.colorTextLightSolid}; + } + + .ant-notification-notice-message { + margin-bottom: 0; + padding-right: 0; + color: ${token.colorTextLightSolid}; + } + } +`; diff --git a/src/styles/global.ts b/src/styles/global.ts new file mode 100644 index 000000000000..1d8c4fee3c44 --- /dev/null +++ b/src/styles/global.ts @@ -0,0 +1,23 @@ +import { css } from 'antd-style'; + +export default () => css` + body, + .ant-app { + ::-webkit-scrollbar { + width: 0; + height: 0; + } + } + + #__next { + height: 100%; + } + + p { + margin-bottom: 0; + } + + li { + display: block; + } +`; diff --git a/src/styles/index.ts b/src/styles/index.ts new file mode 100644 index 000000000000..d4a52174eaae --- /dev/null +++ b/src/styles/index.ts @@ -0,0 +1,6 @@ +import { createGlobalStyle } from 'antd-style'; + +import antdOverride from './antdOverride'; +import global from './global'; + +export const GlobalStyle = createGlobalStyle(({ theme }) => [global(), antdOverride(theme)]); diff --git a/src/types/global.d.ts b/src/types/global.d.ts new file mode 100644 index 000000000000..0d4762a75d2a --- /dev/null +++ b/src/types/global.d.ts @@ -0,0 +1,14 @@ +import type { LobeCustomStylish, LobeCustomToken } from '@lobehub/ui'; +import 'antd-style'; +import { AntdToken } from 'antd-style/lib/types/theme'; + +declare module 'antd-style' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + export interface CustomToken extends LobeCustomToken {} + // eslint-disable-next-line @typescript-eslint/no-empty-interface + export interface CustomStylish extends LobeCustomStylish {} +} + +declare module 'styled-components' { + export interface DefaultTheme extends AntdToken, LobeCustomToken {} +}