diff --git a/package.json b/package.json index 8b71454..2e6fac3 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@tanstack/react-query": "^5.29.2", "@tanstack/react-router": "^1.26.20", "antd": "^5.16.1", + "antd-style": "^3.6.2", "axios": "^1.6.8", "dayjs": "^1.11.10", "i18next": "^23.11.2", diff --git a/src/App.tsx b/src/App.tsx index 24bb8ff..7a9c2c3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,8 @@ +import ErrorPage from '@/components/error/error.tsx' import { AppContextProvider } from '@/context.ts' import { initI18n } from '@/i18n.ts' -import { appAtom, appStore, menuDataAtom, changeLanguage } from '@/store/system.ts' +import { appAtom, appStore, changeLanguage } from '@/store/system.ts' +import { userMenuDataAtom } from '@/store/user.ts' import { IAppData } from '@/types' import { ConfigProvider } from 'antd' import { Provider, useAtom, useAtomValue } from 'jotai' @@ -13,18 +15,25 @@ import PageLoading from '@/components/page-loading' function App() { const [ appData, ] = useAtom(appAtom) - const { data, isError, error, isPending } = useAtomValue(menuDataAtom) + const { data = [], isError, error, isLoading, refetch } = useAtomValue(userMenuDataAtom) useEffect(() => { initI18n() }, []) + + useEffect(() => { + if (appData.token) { + refetch().then() + } + }, [ appData.token ]) + if (isError) { console.error(error) - return
Error
+ return } - if (isPending) { + if (isLoading) { return } diff --git a/src/components/config-provider/index.tsx b/src/components/config-provider/index.tsx new file mode 100644 index 0000000..817b545 --- /dev/null +++ b/src/components/config-provider/index.tsx @@ -0,0 +1,61 @@ +import { ConfigProvider as AntdConfigProvider } from 'antd' +import { AntdToken, ThemeAppearance, useAntdToken, useThemeMode } from 'antd-style' +import type { OverrideToken } from 'antd/es/theme/interface' +import type { FC, ReactNode } from 'react' +import { ThemeProvider, createProAntdTheme, getProToken } from '@/theme' + +export const useProAntdTheme = (appearance: ThemeAppearance) => { + const token = useAntdToken() + const themeConfig = createProAntdTheme(appearance) + + const controlToken: Partial = { + colorBgContainer: token?.colorFillQuaternary, + colorBorder: 'transparent', + controlOutline: 'transparent', + } + + themeConfig.components = { + Input: controlToken, + InputNumber: controlToken, + Select: controlToken, + Tree: { + colorBgContainer: 'transparent', + }, + TreeSelect: controlToken, + } + + return themeConfig +} + +export interface ConfigProviderProps { + componentToken?: OverrideToken; + children: ReactNode; +} + +export const ConfigProvider: FC = ({ children, componentToken }) => { + const { appearance, themeMode } = useThemeMode() + const proTheme = useProAntdTheme(appearance) + proTheme.components = { ...proTheme.components, ...componentToken } + + return ( + + + {children} + + + ) +} + +export const withProvider = (Component) => (props) => { + return ( + + + + ) +} \ No newline at end of file diff --git a/src/components/icon/action/ActionIcon.tsx b/src/components/icon/action/ActionIcon.tsx new file mode 100644 index 0000000..d08a4fe --- /dev/null +++ b/src/components/icon/action/ActionIcon.tsx @@ -0,0 +1,111 @@ +import type { ButtonProps, TooltipProps } from 'antd' +import { Button, Tooltip } from 'antd' +import type { CSSProperties, FC } from 'react' +import { ConfigProvider } from '@/components/config-provider' +import { useStyles } from './style' + +/** + * @title 动作图标属性 + * @description 继承自 `Button` 组件所有属性，除了 `title`, `type` 和 `size` + */ +export interface ActionIconProps extends Omit { + /** + * @title 鼠标类型 + */ + cursor?: CSSProperties['cursor']; + /** + * @title 动作提示 + */ + title?: TooltipProps['title']; + /** + * @title 提示位置 + */ + placement?: TooltipProps['placement']; + /** + * @title 图标 + */ + icon: ButtonProps['icon']; + /** + * @title 点击回调 + */ + onClick?: ButtonProps['onClick']; + /** + * @title 图标尺寸 + */ + size?: 'default' | 'large' | number; + /** + * @description 鼠标移入时候的延迟tooltip时间，默认 0.5 + * @default 0.5 + */ + tooltipDelay?: number; + /** + * @description 是否展示小箭头，默认不展示 + * @default false + */ + arrow?: boolean; +} + +const BaseActionIcon: FC = ({ + placement, + title, + icon, + cursor, + onClick, + className, + arrow = false, + size = 'default', + tooltipDelay = 0.5, + ...restProps + }) => { + const { styles, cx } = useStyles({ size }) + + const Icon = ( +