+ const themeToken = useThemeToken();
+ const tabChildren: ReactNode = (
+
+
+
+
+
+ {faker.person.fullName()}
+ sent you a frind request
+
+
about 1 hour ago
+
+
+ Accept
+ Refuse
+
+
+
+
-
-
-
-
- {faker.person.fullName()}
- added file to
- File Manager
-
-
5 hour ago
-
-
-
@{faker.person.fullName()}
-
{faker.lorem.lines(2)}
+
+
+
+
+ {faker.person.fullName()}
+ added file to
+ File Manager
+
+
5 hour ago
+
+
+ @{faker.person.fullName()}
+ {faker.lorem.lines(2)}
+
+
+
+
+ Reply
+
+
+
-
-
-
- Reply
-
-
-
-
-
-
-
-
- {faker.person.fullName()}
- mentioned you in
- Slash Admin
-
-
1 days ago
-
-
- Reply
-
-
-
-
+
+
+
+
+ {faker.person.fullName()}
+ mentioned you in
+ Slash Admin
+
+
1 days ago
+
+
+ Reply
+
+
+
+
-
-
-
-
- {faker.person.fullName()}
- added file to
- File Manager
-
-
2 days ago
-
-
-
-
Witout Me
-
1.2GB·30 min ago
+
+
+
+
+ {faker.person.fullName()}
+ added file to
+ File Manager
+
+
2 days ago
+
+
+
+ Witout Me
+ 1.2GB·30 min ago
+
+
Download
+
+
-
Download
-
-
-
-
-
-
-
- {faker.person.fullName()}
- request a payment of
- $3000
-
-
4 days ago
-
-
- Pay
- Refuse
-
-
-
-
+
+
+
+
+ {faker.person.fullName()}
+ request a payment of
+ $3000
+
+
4 days ago
+
+
+ Pay
+ Refuse
+
+
+
+
-
-
-
-
-
-
- Your order is placed waiting for shipping
-
-
4 days ago {' '}
-
-
+
+
+
+
+
+
+
+ Your order is placed waiting for shipping
+
+
+
4 days ago {' '}
+
+
-
-
-
-
-
-
- You have new mail
-
-
5 days ago {' '}
-
-
+
+
+
+
+
+
+ You have new mail
+
+
5 days ago {' '}
+
+
-
-
-
-
-
-
- You have new message 5 unread message
-
-
7 days ago
-
-
+
+
+
+
+
+
+ You have new message 5 unread message
+
+
7 days ago
+
+
-
-
-
-
-
-
- Delivery processing your order is being shipped
-
-
8 days ago {' '}
-
-
-
- );
- const items: TabsProps['items'] = [
- {
- key: '1',
- label: (
-
- ),
- children: tabChildren,
- },
- {
- key: '2',
- label: (
-
-
Unread
-
12
+
+
+
+
+
+
+
+ Delivery processing your order is being shipped
+
+
+
8 days ago {' '}
+
+
- ),
- children: tabChildren,
- },
- {
- key: '3',
- label: (
-
-
Archived
-
10
+ );
+ const items: TabsProps['items'] = [
+ {
+ key: '1',
+ label: (
+
+ ),
+ children: tabChildren,
+ },
+ {
+ key: '2',
+ label: (
+
+ ),
+ children: tabChildren,
+ },
+ {
+ key: '3',
+ label: (
+
+ ),
+ children: tabChildren,
+ },
+ ];
+ return (
+
+
- ),
- children: tabChildren,
- },
- ];
- return (
-
-
-
- );
+ );
}
diff --git a/src/layouts/_common/search-bar.tsx b/src/layouts/_common/search-bar.tsx
index 53eaf86..1ecb4d0 100644
--- a/src/layouts/_common/search-bar.tsx
+++ b/src/layouts/_common/search-bar.tsx
@@ -14,235 +14,238 @@ import ProTag from '@/theme/antd/components/tag';
import { useThemeToken } from '@/theme/hooks';
export default function SearchBar() {
- const { t } = useTranslation();
- const { replace } = useRouter();
- const inputRef = useRef
(null);
- const listRef = useRef(null);
-
- const [search, toggle] = useBoolean(false);
- const themeToken = useThemeToken();
-
- const flattenedRoutes = useFlattenedRoutes();
-
- const activeStyle: CSSProperties = {
- border: `1px dashed ${themeToken.colorPrimary}`,
- backgroundColor: `${Color(themeToken.colorPrimary).alpha(0.2).toString()}`,
- };
-
- const [searchQuery, setSearchQuery] = useState('');
- const [searchResult, setSearchResult] = useState(flattenedRoutes);
- const [selectedItemIndex, setSelectedItemIndex] = useState(0);
-
- useEffect(() => {
- const result = flattenedRoutes.filter(
- (item) =>
- t(item.label).toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1 ||
- item.key.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1,
- );
- setSearchResult(result);
- setSelectedItemIndex(0);
- }, [searchQuery, t, flattenedRoutes]);
-
- const handleMetaK = (event: KeyboardEvent) => {
- if (event.metaKey && event.key === 'k') {
- // https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey
- handleOpen();
- }
- };
- useEvent('keydown', handleMetaK);
-
- useKeyPressEvent('ArrowUp', (event) => {
- if (!search) return;
- event.preventDefault();
- let nextIndex = selectedItemIndex - 1;
- if (nextIndex < 0) {
- nextIndex = searchResult.length - 1;
- }
- setSelectedItemIndex(nextIndex);
- scrollSelectedItemIntoView(nextIndex);
- });
-
- useKeyPressEvent('ArrowDown', (event) => {
- if (!search) return;
- event.preventDefault();
- let nextIndex = selectedItemIndex + 1;
- if (nextIndex > searchResult.length - 1) {
- nextIndex = 0;
- }
- setSelectedItemIndex(nextIndex);
- scrollSelectedItemIntoView(nextIndex);
- });
-
- useKeyPressEvent('Enter', (event) => {
- if (!search || searchResult.length === 0) return;
- event.preventDefault();
- const selectItem = searchResult[selectedItemIndex].key;
- if (selectItem) {
- handleSelect(selectItem);
- toggle(false);
- }
- });
-
- useKeyPressEvent('Escape', () => {
- handleCancel();
- });
-
- const handleOpen = () => {
- toggle(true);
- setSearchQuery('');
- setSelectedItemIndex(0);
- };
- const handleCancel = () => {
- toggle(false);
- };
- const handleAfterOpenChange = (open: boolean) => {
- if (open) {
- // auto focus
- inputRef.current?.focus();
- }
- };
-
- const scrollSelectedItemIntoView = (index: number) => {
- if (listRef.current) {
- const selectedItem = listRef.current.children[index];
- selectedItem.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- });
- }
- };
-
- const handleHover = (index: number) => {
- if (index === selectedItemIndex) return;
- setSelectedItemIndex(index);
- };
-
- const handleSelect = (key: string) => {
- replace(key);
- handleCancel();
- };
-
- return (
- <>
-
-
-
-
- ⌘K
-
- setSearchQuery(e.target.value)}
- placeholder="Search..."
- bordered={false}
- autoFocus
- prefix={ }
- suffix={
-
- Esc
-
- }
- />
+ const { t } = useTranslation();
+ const { replace } = useRouter();
+ const inputRef = useRef(null);
+ const listRef = useRef(null);
+
+ const [search, toggle] = useBoolean(false);
+ const themeToken = useThemeToken();
+
+ const flattenedRoutes = useFlattenedRoutes();
+
+ const activeStyle: CSSProperties = {
+ border: `1px dashed ${themeToken.colorPrimary}`,
+ backgroundColor: `${Color(themeToken.colorPrimary).alpha(0.2).toString()}`,
+ };
+
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searchResult, setSearchResult] = useState(flattenedRoutes);
+ const [selectedItemIndex, setSelectedItemIndex] = useState(0);
+
+ useEffect(() => {
+ const result = flattenedRoutes.filter(
+ (item) =>
+ t(item.label).toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1 ||
+ item.key.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1,
+ );
+ setSearchResult(result);
+ setSelectedItemIndex(0);
+ }, [searchQuery, t, flattenedRoutes]);
+
+ const handleMetaK = (event: KeyboardEvent) => {
+ if (event.metaKey && event.key === 'k') {
+ // https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey
+ handleOpen();
}
- footer={
-
+ };
+ useEvent('keydown', handleMetaK);
+
+ useKeyPressEvent('ArrowUp', (event) => {
+ if (!search) return;
+ event.preventDefault();
+ let nextIndex = selectedItemIndex - 1;
+ if (nextIndex < 0) {
+ nextIndex = searchResult.length - 1;
+ }
+ setSelectedItemIndex(nextIndex);
+ scrollSelectedItemIntoView(nextIndex);
+ });
+
+ useKeyPressEvent('ArrowDown', (event) => {
+ if (!search) return;
+ event.preventDefault();
+ let nextIndex = selectedItemIndex + 1;
+ if (nextIndex > searchResult.length - 1) {
+ nextIndex = 0;
+ }
+ setSelectedItemIndex(nextIndex);
+ scrollSelectedItemIntoView(nextIndex);
+ });
+
+ useKeyPressEvent('Enter', (event) => {
+ if (!search || searchResult.length === 0) return;
+ event.preventDefault();
+ const selectItem = searchResult[selectedItemIndex].key;
+ if (selectItem) {
+ handleSelect(selectItem);
+ toggle(false);
+ }
+ });
+
+ useKeyPressEvent('Escape', () => {
+ handleCancel();
+ });
+
+ const handleOpen = () => {
+ toggle(true);
+ setSearchQuery('');
+ setSelectedItemIndex(0);
+ };
+ const handleCancel = () => {
+ toggle(false);
+ };
+ const handleAfterOpenChange = (open: boolean) => {
+ if (open) {
+ // auto focus
+ inputRef.current?.focus();
}
- >
- {searchResult.length === 0 ? (
-
- ) : (
-
-
- {searchResult.map(({ key, label }, index) => {
- const partsTitle = parse(t(label), match(t(label), searchQuery));
- const partsKey = parse(key, match(key, searchQuery));
- return (
-
handleSelect(key)}
- onMouseMove={() => handleHover(index)}
- >
-
-
-
- {partsTitle.map((item) => (
-
{
+ if (listRef.current) {
+ const selectedItem = listRef.current.children[index];
+ selectedItem.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ });
+ }
+ };
+
+ const handleHover = (index: number) => {
+ if (index === selectedItemIndex) return;
+ setSelectedItemIndex(index);
+ };
+
+ const handleSelect = (key: string) => {
+ replace(key);
+ handleCancel();
+ };
+
+ return (
+ <>
+
+
+
+
+ ⌘K
+
+ setSearchQuery(e.target.value)}
+ placeholder="Search..."
+ bordered={false}
+ autoFocus
+ prefix={ }
+ suffix={
+
- {item.text}
-
- ))}
+ Esc
+
+ }
+ />
+ }
+ footer={
+
+
-
- {partsKey.map((item) => (
-
- {item.text}
-
- ))}
+
+
-
-
- );
- })}
-
-
- )}
-
- >
- );
+ }
+ >
+ {searchResult.length === 0 ? (
+
+ ) : (
+
+
+ {searchResult.map(({ key, label }, index) => {
+ const partsTitle = parse(t(label), match(t(label), searchQuery));
+ const partsKey = parse(key, match(key, searchQuery));
+ return (
+
handleSelect(key)}
+ onMouseMove={() => handleHover(index)}
+ >
+
+
+
+ {partsTitle.map((item) => (
+
+ {item.text}
+
+ ))}
+
+
+ {partsKey.map((item) => (
+
+ {item.text}
+
+ ))}
+
+
+
+
+ );
+ })}
+
+
+ )}
+
+ >
+ );
}
const StyledListItemButton = styled.div<{ $themetoken: GlobalToken }>`
- display: flex;
- flex-direction: column;
- cursor: pointer;
- width: 100%;
- padding: 8px 16px;
- border-radius: 8px;
- border-bottom: ${(props) => `1px dashed ${props.$themetoken.colorBorder}`};
- color: ${(props) => `${props.$themetoken.colorTextSecondary}`};
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ width: 100%;
+ padding: 8px 16px;
+ border-radius: 8px;
+ border-bottom: ${(props) => `1px dashed ${props.$themetoken.colorBorder}`};
+ color: ${(props) => `${props.$themetoken.colorTextSecondary}`};
`;
diff --git a/src/layouts/_common/setting-button.tsx b/src/layouts/_common/setting-button.tsx
index b439948..c23bf4d 100644
--- a/src/layouts/_common/setting-button.tsx
+++ b/src/layouts/_common/setting-button.tsx
@@ -1,8 +1,8 @@
import {
- CloseOutlined,
- LeftOutlined,
- QuestionCircleOutlined,
- RightOutlined,
+ CloseOutlined,
+ LeftOutlined,
+ QuestionCircleOutlined,
+ RightOutlined,
} from '@ant-design/icons';
import { Button, Card, Drawer, Switch, Tooltip } from 'antd';
import Color from 'color';
@@ -25,380 +25,423 @@ import { ThemeColorPresets, ThemeLayout, ThemeMode } from '#/enum';
* App Setting
*/
export default function SettingButton() {
- const [drawerOpen, setDrawerOpen] = useState(false);
- const { colorPrimary, colorBgBase, colorTextSecondary, colorTextTertiary, colorBgContainer } =
- useThemeToken();
+ const [drawerOpen, setDrawerOpen] = useState(false);
+ const { colorPrimary, colorBgBase, colorTextSecondary, colorTextTertiary, colorBgContainer } =
+ useThemeToken();
- const settings = useSettings();
- const { themeMode, themeColorPresets, themeLayout, themeStretch, breadCrumb, multiTab } =
- settings;
- const { setSettings } = useSettingActions();
+ const settings = useSettings();
+ const { themeMode, themeColorPresets, themeLayout, themeStretch, breadCrumb, multiTab } =
+ settings;
+ const { setSettings } = useSettingActions();
- const setThemeMode = (themeMode: ThemeMode) => {
- setSettings({
- ...settings,
- themeMode,
- });
- };
+ const setThemeMode = (themeMode: ThemeMode) => {
+ setSettings({
+ ...settings,
+ themeMode,
+ });
+ };
- const setThemeColorPresets = (themeColorPresets: ThemeColorPresets) => {
- setSettings({
- ...settings,
- themeColorPresets,
- });
- };
+ const setThemeColorPresets = (themeColorPresets: ThemeColorPresets) => {
+ setSettings({
+ ...settings,
+ themeColorPresets,
+ });
+ };
- const setThemeLayout = (themeLayout: ThemeLayout) => {
- setSettings({
- ...settings,
- themeLayout,
- });
- };
+ const setThemeLayout = (themeLayout: ThemeLayout) => {
+ setSettings({
+ ...settings,
+ themeLayout,
+ });
+ };
- const setThemeStretch = (themeStretch: boolean) => {
- setSettings({
- ...settings,
- themeStretch,
- });
- };
+ const setThemeStretch = (themeStretch: boolean) => {
+ setSettings({
+ ...settings,
+ themeStretch,
+ });
+ };
- const setBreadCrumn = (checked: boolean) => {
- setSettings({
- ...settings,
- breadCrumb: checked,
- });
- };
+ const setBreadCrumn = (checked: boolean) => {
+ setSettings({
+ ...settings,
+ breadCrumb: checked,
+ });
+ };
- const setMultiTab = (checked: boolean) => {
- setSettings({
- ...settings,
- multiTab: checked,
- });
- };
+ const setMultiTab = (checked: boolean) => {
+ setSettings({
+ ...settings,
+ multiTab: checked,
+ });
+ };
- const style: CSSProperties = {
- backdropFilter: 'blur(20px)',
- backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`,
- backgroundRepeat: 'no-repeat, no-repeat',
- backgroundColor: Color(colorBgContainer).alpha(0.9).toString(),
- backgroundPosition: 'right top, left bottom',
- backgroundSize: '50, 50%',
- };
- const bodyStyle: CSSProperties = {
- padding: 0,
- };
+ const style: CSSProperties = {
+ backdropFilter: 'blur(20px)',
+ backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`,
+ backgroundRepeat: 'no-repeat, no-repeat',
+ backgroundColor: Color(colorBgContainer).alpha(0.9).toString(),
+ backgroundPosition: 'right top, left bottom',
+ backgroundSize: '50, 50%',
+ };
+ const bodyStyle: CSSProperties = {
+ padding: 0,
+ };
- const [isFullscreen, setIsFullscreen] = useState(screenfull.isFullscreen);
- const toggleFullScreen = () => {
- if (screenfull.isEnabled) {
- screenfull.toggle();
- setIsFullscreen(!isFullscreen);
- }
- };
+ const [isFullscreen, setIsFullscreen] = useState(screenfull.isFullscreen);
+ const toggleFullScreen = () => {
+ if (screenfull.isEnabled) {
+ screenfull.toggle();
+ setIsFullscreen(!isFullscreen);
+ }
+ };
- const layoutBackground = (layout: ThemeLayout) =>
- themeLayout === layout
- ? `linear-gradient(135deg, ${colorBgBase} 0%, ${colorPrimary} 100%)`
- : '#919eab';
+ const layoutBackground = (layout: ThemeLayout) =>
+ themeLayout === layout
+ ? `linear-gradient(135deg, ${colorBgBase} 0%, ${colorPrimary} 100%)`
+ : '#919eab';
- return (
- <>
-
- setDrawerOpen(true)}
- >
-
-
-
-
-
-
setDrawerOpen(false)}
- open={drawerOpen}
- closable={false}
- width={280}
- bodyStyle={bodyStyle}
- maskStyle={{ backgroundColor: 'transparent' }}
- style={style}
- extra={
- setDrawerOpen(false)} className="h-9 w-9 hover:scale-105">
-
-
- }
- footer={
-
+ return (
+ <>
- {isFullscreen ? (
- <>
-
- Exit FullScreen
- >
- ) : (
- <>
-
- FullScreen
- >
- )}
-
-
- }
- >
-
- {/* theme mode */}
-
-
- Mode
-
-
- setThemeMode(ThemeMode.Light)}
- className="flex h-20 w-full cursor-pointer items-center justify-center"
- >
-
-
- setThemeMode(ThemeMode.Dark)}
- className="flex h-20 w-full cursor-pointer items-center justify-center"
- >
-
-
+ setDrawerOpen(true)}
+ >
+
+
+
+
-
+
setDrawerOpen(false)}
+ open={drawerOpen}
+ closable={false}
+ width={280}
+ bodyStyle={bodyStyle}
+ maskStyle={{ backgroundColor: 'transparent' }}
+ style={style}
+ extra={
+ setDrawerOpen(false)}
+ className="h-9 w-9 hover:scale-105"
+ >
+
+
+ }
+ footer={
+
+
+ {isFullscreen ? (
+ <>
+
+ Exit FullScreen
+ >
+ ) : (
+ <>
+
+ FullScreen
+ >
+ )}
+
+
+ }
+ >
+
+ {/* theme mode */}
+
+
+ Mode
+
+
+ setThemeMode(ThemeMode.Light)}
+ className="flex h-20 w-full cursor-pointer items-center justify-center"
+ >
+
+
+ setThemeMode(ThemeMode.Dark)}
+ className="flex h-20 w-full cursor-pointer items-center justify-center"
+ >
+
+
+
+
- {/* theme layout */}
-
-
- Layout
-
-
-
setThemeLayout(ThemeLayout.Vertical)}
- className="h-14 cursor-pointer"
- style={{ flexGrow: 1, flexShrink: 0 }}
- bodyStyle={{
- padding: 0,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- height: '100%',
- }}
- >
-
-
-
-
setThemeLayout(ThemeLayout.Horizontal)}
- className="h-14 cursor-pointer"
- style={{ flexGrow: 1, flexShrink: 0 }}
- bodyStyle={{
- padding: 0,
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'center',
- alignItems: 'center',
- height: '100%',
- }}
- >
-
-
-
-
setThemeLayout(ThemeLayout.Mini)}
- className="h-14 cursor-pointer"
- style={{ flexGrow: 1, flexShrink: 0 }}
- bodyStyle={{
- padding: 0,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- height: '100%',
- }}
- >
-
-
-
-
-
+ {/* theme layout */}
+
+
+ Layout
+
+
+
setThemeLayout(ThemeLayout.Vertical)}
+ className="h-14 cursor-pointer"
+ style={{ flexGrow: 1, flexShrink: 0 }}
+ bodyStyle={{
+ padding: 0,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ }}
+ >
+
+
+
+
setThemeLayout(ThemeLayout.Horizontal)}
+ className="h-14 cursor-pointer"
+ style={{ flexGrow: 1, flexShrink: 0 }}
+ bodyStyle={{
+ padding: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ }}
+ >
+
+
+
+
setThemeLayout(ThemeLayout.Mini)}
+ className="h-14 cursor-pointer"
+ style={{ flexGrow: 1, flexShrink: 0 }}
+ bodyStyle={{
+ padding: 0,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ }}
+ >
+
+
+
+
+
- {/* theme stretch */}
-
-
- Stretch
-
-
-
-
+ {/* theme stretch */}
+
+
+ Stretch
+
+
+
+
-
setThemeStretch(!themeStretch)}
- className="flex h-20 w-full cursor-pointer items-center justify-center"
- bodyStyle={{
- width: '50%',
- padding: 0,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- }}
- >
- {themeStretch ? (
-
- ) : (
-
- )}
-
-
+
setThemeStretch(!themeStretch)}
+ className="flex h-20 w-full cursor-pointer items-center justify-center"
+ bodyStyle={{
+ width: '50%',
+ padding: 0,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ }}
+ >
+ {themeStretch ? (
+
+ ) : (
+
+ )}
+
+
- {/* theme presets */}
-
-
- Presets
-
-
- {Object.entries(colorPrimarys).map(([preset, color]) => (
-
setThemeColorPresets(preset as ThemeColorPresets)}
- >
-
-
-
-
- ))}
-
-
+ {/* theme presets */}
+
+
+ Presets
+
+
+ {Object.entries(colorPrimarys).map(([preset, color]) => (
+
+ setThemeColorPresets(preset as ThemeColorPresets)
+ }
+ >
+
+
+
+
+ ))}
+
+
- {/* Page config */}
-
-
- Page
-
-
-
-
BreadCrumb
-
setBreadCrumn(checked)}
- />
-
-
-
Multi Tab
-
setMultiTab(checked)}
- />
-
-
-
-
-
- >
- );
+ {/* Page config */}
+
+
+ Page
+
+
+
+
BreadCrumb
+
setBreadCrumn(checked)}
+ />
+
+
+
Multi Tab
+
setMultiTab(checked)}
+ />
+
+
+
+
+
+ >
+ );
}
diff --git a/src/layouts/dashboard/header.tsx b/src/layouts/dashboard/header.tsx
index 5ba9b7d..038c47f 100644
--- a/src/layouts/dashboard/header.tsx
+++ b/src/layouts/dashboard/header.tsx
@@ -20,80 +20,85 @@ import Nav from './nav';
import { ThemeLayout } from '#/enum';
type Props = {
- className?: string;
- offsetTop?: boolean;
+ className?: string;
+ offsetTop?: boolean;
};
export default function Header({ className = '', offsetTop = false }: Props) {
- const [drawerOpen, setDrawerOpen] = useState(false);
- const { themeLayout, breadCrumb } = useSettings();
- const { colorBgElevated, colorBorder } = useThemeToken();
- const { screenMap } = useResponsive();
+ const [drawerOpen, setDrawerOpen] = useState(false);
+ const { themeLayout, breadCrumb } = useSettings();
+ const { colorBgElevated, colorBorder } = useThemeToken();
+ const { screenMap } = useResponsive();
- const headerStyle: CSSProperties = {
- position: themeLayout === ThemeLayout.Horizontal ? 'relative' : 'fixed',
- borderBottom:
- themeLayout === ThemeLayout.Horizontal
- ? `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`
- : '',
- backgroundColor: Color(colorBgElevated).alpha(1).toString(),
- };
+ const headerStyle: CSSProperties = {
+ position: themeLayout === ThemeLayout.Horizontal ? 'relative' : 'fixed',
+ borderBottom:
+ themeLayout === ThemeLayout.Horizontal
+ ? `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`
+ : '',
+ backgroundColor: Color(colorBgElevated).alpha(1).toString(),
+ };
- if (themeLayout === ThemeLayout.Horizontal) {
- headerStyle.width = '100vw';
- } else if (screenMap.md) {
- headerStyle.right = '0px';
- headerStyle.left = 'auto';
- headerStyle.width = `calc(100% - ${
- themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
- }px)`;
- } else {
- headerStyle.width = '100vw';
- }
+ if (themeLayout === ThemeLayout.Horizontal) {
+ headerStyle.width = '100vw';
+ } else if (screenMap.md) {
+ headerStyle.right = '0px';
+ headerStyle.left = 'auto';
+ headerStyle.width = `calc(100% - ${
+ themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
+ }px)`;
+ } else {
+ headerStyle.width = '100vw';
+ }
- return (
- <>
-
-
-
- {themeLayout !== ThemeLayout.Horizontal ? (
-
setDrawerOpen(true)} className="h-10 w-10 md:hidden">
-
-
- ) : (
-
- )}
-
{breadCrumb ? : null}
-
+ return (
+ <>
+
+
+
+ {themeLayout !== ThemeLayout.Horizontal ? (
+
setDrawerOpen(true)}
+ className="h-10 w-10 md:hidden"
+ >
+
+
+ ) : (
+
+ )}
+
{breadCrumb ? : null}
+
-
-
-
-
window.open('https://github.com/d3george/slash-admin')}>
-
-
-
-
-
-
-
-
-
setDrawerOpen(false)}
- open={drawerOpen}
- closeIcon={false}
- headerStyle={{ display: 'none' }}
- bodyStyle={{ padding: 0, overflow: 'hidden' }}
- width="auto"
- >
- setDrawerOpen(false)} />
-
- >
- );
+
+
+
+
window.open('https://github.com/d3george/slash-admin')}
+ >
+
+
+
+
+
+
+
+
+
setDrawerOpen(false)}
+ open={drawerOpen}
+ closeIcon={false}
+ headerStyle={{ display: 'none' }}
+ bodyStyle={{ padding: 0, overflow: 'hidden' }}
+ width="auto"
+ >
+ setDrawerOpen(false)} />
+
+ >
+ );
}
diff --git a/src/layouts/dashboard/index.tsx b/src/layouts/dashboard/index.tsx
index 55d530a..9dfc325 100644
--- a/src/layouts/dashboard/index.tsx
+++ b/src/layouts/dashboard/index.tsx
@@ -15,89 +15,89 @@ import NavHorizontal from './nav-horizontal';
import { ThemeLayout, ThemeMode } from '#/enum';
function DashboardLayout() {
- const { colorBgElevated, colorTextBase } = useThemeToken();
- const { themeLayout, themeMode } = useSettings();
+ const { colorBgElevated, colorTextBase } = useThemeToken();
+ const { themeLayout, themeMode } = useSettings();
- const mainEl = useRef(null);
- const { scrollY } = useScroll({ container: mainEl });
- /**
- * y轴是否滚动
- */
- const [offsetTop, setOffsetTop] = useState(false);
- const onOffSetTop = useCallback(() => {
- scrollY.on('change', (scrollHeight) => {
- if (scrollHeight > 0) {
- setOffsetTop(true);
- } else {
- setOffsetTop(false);
- }
- });
- }, [scrollY]);
+ const mainEl = useRef(null);
+ const { scrollY } = useScroll({ container: mainEl });
+ /**
+ * y轴是否滚动
+ */
+ const [offsetTop, setOffsetTop] = useState(false);
+ const onOffSetTop = useCallback(() => {
+ scrollY.on('change', (scrollHeight) => {
+ if (scrollHeight > 0) {
+ setOffsetTop(true);
+ } else {
+ setOffsetTop(false);
+ }
+ });
+ }, [scrollY]);
- useEffect(() => {
- onOffSetTop();
- }, [onOffSetTop]);
+ useEffect(() => {
+ onOffSetTop();
+ }, [onOffSetTop]);
- const verticalLayout = (
- <>
-
-
-
-
-
- >
- );
+ const verticalLayout = (
+ <>
+
+
+
+
+
+ >
+ );
- const horizontalLayout = (
-
-
-
-
-
- );
+ const horizontalLayout = (
+
+
+
+
+
+ );
- const layout = themeLayout !== ThemeLayout.Horizontal ? verticalLayout : horizontalLayout;
+ const layout = themeLayout !== ThemeLayout.Horizontal ? verticalLayout : horizontalLayout;
- return (
-
-
+ return (
+
+
-
- }>{layout}
-
-
- );
+
+ }>{layout}
+
+
+ );
}
export default DashboardLayout;
const StyleWrapper = styled.div<{ $themeMode?: ThemeMode }>`
- /* 设置滚动条的整体样式 */
- ::-webkit-scrollbar {
- width: 8px; /* 设置滚动条宽度 */
- }
+ /* 设置滚动条的整体样式 */
+ ::-webkit-scrollbar {
+ width: 8px; /* 设置滚动条宽度 */
+ }
- /* 设置滚动条轨道的样式 */
- ::-webkit-scrollbar-track {
- border-radius: 8px;
- background: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#2c2c2c' : '#FAFAFA')};
- }
+ /* 设置滚动条轨道的样式 */
+ ::-webkit-scrollbar-track {
+ border-radius: 8px;
+ background: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#2c2c2c' : '#FAFAFA')};
+ }
- /* 设置滚动条滑块的样式 */
- ::-webkit-scrollbar-thumb {
- border-radius: 10px;
- background: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#6b6b6b' : '#C1C1C1')};
- }
+ /* 设置滚动条滑块的样式 */
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#6b6b6b' : '#C1C1C1')};
+ }
- /* 设置鼠标悬停在滚动条上的样式 */
- ::-webkit-scrollbar-thumb:hover {
- background: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#939393' : '##7D7D7D')};
- }
+ /* 设置鼠标悬停在滚动条上的样式 */
+ ::-webkit-scrollbar-thumb:hover {
+ background: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#939393' : '##7D7D7D')};
+ }
`;
diff --git a/src/layouts/dashboard/main.tsx b/src/layouts/dashboard/main.tsx
index f1b52c3..d6be1dd 100644
--- a/src/layouts/dashboard/main.tsx
+++ b/src/layouts/dashboard/main.tsx
@@ -11,39 +11,39 @@ import MultiTabs from './multi-tabs';
import { ThemeLayout } from '#/enum';
type Props = {
- offsetTop?: boolean;
+ offsetTop?: boolean;
};
const Main = forwardRef
(({ offsetTop = false }, ref) => {
- const { themeStretch, themeLayout, multiTab } = useSettings();
- const { screenMap } = useResponsive();
+ const { themeStretch, themeLayout, multiTab } = useSettings();
+ const { screenMap } = useResponsive();
- const mainStyle: CSSProperties = {
- paddingTop: HEADER_HEIGHT + (multiTab ? MULTI_TABS_HEIGHT : 0),
- transition: 'padding 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
- width: '100%',
- };
- if (themeLayout === ThemeLayout.Horizontal) {
- mainStyle.width = '100vw';
- mainStyle.paddingTop = multiTab ? MULTI_TABS_HEIGHT : 0;
- } else if (screenMap.md) {
- mainStyle.width = `calc(100% - ${
- themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
- })`;
- } else {
- mainStyle.width = '100vw';
- }
+ const mainStyle: CSSProperties = {
+ paddingTop: HEADER_HEIGHT + (multiTab ? MULTI_TABS_HEIGHT : 0),
+ transition: 'padding 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+ width: '100%',
+ };
+ if (themeLayout === ThemeLayout.Horizontal) {
+ mainStyle.width = '100vw';
+ mainStyle.paddingTop = multiTab ? MULTI_TABS_HEIGHT : 0;
+ } else if (screenMap.md) {
+ mainStyle.width = `calc(100% - ${
+ themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
+ })`;
+ } else {
+ mainStyle.width = '100vw';
+ }
- return (
-
-
- {multiTab ? : }
-
-
- );
+ return (
+
+
+ {multiTab ? : }
+
+
+ );
});
export default Main;
diff --git a/src/layouts/dashboard/multi-tabs.tsx b/src/layouts/dashboard/multi-tabs.tsx
index a2d32ae..960d74e 100644
--- a/src/layouts/dashboard/multi-tabs.tsx
+++ b/src/layouts/dashboard/multi-tabs.tsx
@@ -13,407 +13,420 @@ import { useSettings } from '@/store/settingStore';
import { useResponsive, useThemeToken } from '@/theme/hooks';
import {
- NAV_WIDTH,
- NAV_COLLAPSED_WIDTH,
- HEADER_HEIGHT,
- OFFSET_HEADER_HEIGHT,
- MULTI_TABS_HEIGHT,
- NAV_HORIZONTAL_HEIGHT,
+ NAV_WIDTH,
+ NAV_COLLAPSED_WIDTH,
+ HEADER_HEIGHT,
+ OFFSET_HEADER_HEIGHT,
+ MULTI_TABS_HEIGHT,
+ NAV_HORIZONTAL_HEIGHT,
} from './config';
import { MultiTabOperation, ThemeLayout } from '#/enum';
type Props = {
- offsetTop?: boolean;
+ offsetTop?: boolean;
};
export default function MultiTabs({ offsetTop = false }: Props) {
- const { t } = useTranslation();
- const { push } = useRouter();
- const scrollContainer = useRef(null);
- const [hoveringTabKey, setHoveringTabKey] = useState('');
- const [openDropdownTabKey, setopenDropdownTabKey] = useState('');
- const themeToken = useThemeToken();
+ const { t } = useTranslation();
+ const { push } = useRouter();
+ const scrollContainer = useRef(null);
+ const [hoveringTabKey, setHoveringTabKey] = useState('');
+ const [openDropdownTabKey, setopenDropdownTabKey] = useState('');
+ const themeToken = useThemeToken();
- const tabContentRef = useRef(null);
- const [fullScreen, toggleFullScreen] = useToggle(false);
- useFullscreen(tabContentRef, fullScreen, { onClose: () => toggleFullScreen(false) });
+ const tabContentRef = useRef(null);
+ const [fullScreen, toggleFullScreen] = useToggle(false);
+ useFullscreen(tabContentRef, fullScreen, { onClose: () => toggleFullScreen(false) });
- const {
- tabs,
- activeTabRoutePath,
- setTabs,
- closeTab,
- refreshTab,
- closeOthersTab,
- closeAll,
- closeLeft,
- closeRight,
- } = useKeepAlive();
+ const {
+ tabs,
+ activeTabRoutePath,
+ setTabs,
+ closeTab,
+ refreshTab,
+ closeOthersTab,
+ closeAll,
+ closeLeft,
+ closeRight,
+ } = useKeepAlive();
- /**
- * tab dropdown下拉选
- */
- const menuItems = useMemo(
- () => [
- {
- label: t(`sys.tab.${MultiTabOperation.FULLSCREEN}`),
- key: MultiTabOperation.FULLSCREEN,
- icon: ,
- },
- {
- label: t(`sys.tab.${MultiTabOperation.REFRESH}`),
- key: MultiTabOperation.REFRESH,
- icon: ,
- },
- {
- label: t(`sys.tab.${MultiTabOperation.CLOSE}`),
- key: MultiTabOperation.CLOSE,
- icon: ,
- disabled: tabs.length === 1,
- },
- {
- type: 'divider',
- },
- {
- label: t(`sys.tab.${MultiTabOperation.CLOSELEFT}`),
- key: MultiTabOperation.CLOSELEFT,
- icon: (
-
- ),
- disabled: tabs.findIndex((tab) => tab.key === openDropdownTabKey) === 0,
- },
- {
- label: t(`sys.tab.${MultiTabOperation.CLOSERIGHT}`),
- key: MultiTabOperation.CLOSERIGHT,
- icon: ,
- disabled: tabs.findIndex((tab) => tab.key === openDropdownTabKey) === tabs.length - 1,
- },
- {
- type: 'divider',
- },
- {
- label: t(`sys.tab.${MultiTabOperation.CLOSEOTHERS}`),
- key: MultiTabOperation.CLOSEOTHERS,
- icon: ,
- disabled: tabs.length === 1,
- },
- {
- label: t(`sys.tab.${MultiTabOperation.CLOSEALL}`),
- key: MultiTabOperation.CLOSEALL,
- icon: ,
- },
- ],
- [openDropdownTabKey, t, tabs],
- );
+ /**
+ * tab dropdown下拉选
+ */
+ const menuItems = useMemo(
+ () => [
+ {
+ label: t(`sys.tab.${MultiTabOperation.FULLSCREEN}`),
+ key: MultiTabOperation.FULLSCREEN,
+ icon: ,
+ },
+ {
+ label: t(`sys.tab.${MultiTabOperation.REFRESH}`),
+ key: MultiTabOperation.REFRESH,
+ icon: ,
+ },
+ {
+ label: t(`sys.tab.${MultiTabOperation.CLOSE}`),
+ key: MultiTabOperation.CLOSE,
+ icon: ,
+ disabled: tabs.length === 1,
+ },
+ {
+ type: 'divider',
+ },
+ {
+ label: t(`sys.tab.${MultiTabOperation.CLOSELEFT}`),
+ key: MultiTabOperation.CLOSELEFT,
+ icon: (
+
+ ),
+ disabled: tabs.findIndex((tab) => tab.key === openDropdownTabKey) === 0,
+ },
+ {
+ label: t(`sys.tab.${MultiTabOperation.CLOSERIGHT}`),
+ key: MultiTabOperation.CLOSERIGHT,
+ icon: ,
+ disabled:
+ tabs.findIndex((tab) => tab.key === openDropdownTabKey) === tabs.length - 1,
+ },
+ {
+ type: 'divider',
+ },
+ {
+ label: t(`sys.tab.${MultiTabOperation.CLOSEOTHERS}`),
+ key: MultiTabOperation.CLOSEOTHERS,
+ icon: ,
+ disabled: tabs.length === 1,
+ },
+ {
+ label: t(`sys.tab.${MultiTabOperation.CLOSEALL}`),
+ key: MultiTabOperation.CLOSEALL,
+ icon: ,
+ },
+ ],
+ [openDropdownTabKey, t, tabs],
+ );
- /**
- * tab dropdown click
- */
- const menuClick = useCallback(
- (menuInfo: any, tab: KeepAliveTab) => {
- const { key, domEvent } = menuInfo;
- domEvent.stopPropagation();
- switch (key) {
- case MultiTabOperation.REFRESH:
- refreshTab(tab.key);
- break;
- case MultiTabOperation.CLOSE:
- closeTab(tab.key);
- break;
- case MultiTabOperation.CLOSEOTHERS:
- closeOthersTab(tab.key);
- break;
- case MultiTabOperation.CLOSELEFT:
- closeLeft(tab.key);
- break;
- case MultiTabOperation.CLOSERIGHT:
- closeRight(tab.key);
- break;
- case MultiTabOperation.CLOSEALL:
- closeAll();
- break;
- case MultiTabOperation.FULLSCREEN:
- toggleFullScreen();
- break;
- default:
- break;
- }
- },
- [refreshTab, closeTab, closeOthersTab, closeLeft, closeRight, closeAll, toggleFullScreen],
- );
+ /**
+ * tab dropdown click
+ */
+ const menuClick = useCallback(
+ (menuInfo: any, tab: KeepAliveTab) => {
+ const { key, domEvent } = menuInfo;
+ domEvent.stopPropagation();
+ switch (key) {
+ case MultiTabOperation.REFRESH:
+ refreshTab(tab.key);
+ break;
+ case MultiTabOperation.CLOSE:
+ closeTab(tab.key);
+ break;
+ case MultiTabOperation.CLOSEOTHERS:
+ closeOthersTab(tab.key);
+ break;
+ case MultiTabOperation.CLOSELEFT:
+ closeLeft(tab.key);
+ break;
+ case MultiTabOperation.CLOSERIGHT:
+ closeRight(tab.key);
+ break;
+ case MultiTabOperation.CLOSEALL:
+ closeAll();
+ break;
+ case MultiTabOperation.FULLSCREEN:
+ toggleFullScreen();
+ break;
+ default:
+ break;
+ }
+ },
+ [refreshTab, closeTab, closeOthersTab, closeLeft, closeRight, closeAll, toggleFullScreen],
+ );
- /**
- * 当前显示dorpdown的tab
- */
- const onOpenChange = (open: boolean, tab: KeepAliveTab) => {
- if (open) {
- setopenDropdownTabKey(tab.key);
- } else {
- setopenDropdownTabKey('');
- }
- };
+ /**
+ * 当前显示dorpdown的tab
+ */
+ const onOpenChange = (open: boolean, tab: KeepAliveTab) => {
+ if (open) {
+ setopenDropdownTabKey(tab.key);
+ } else {
+ setopenDropdownTabKey('');
+ }
+ };
- /**
- * tab样式
- */
- const calcTabStyle: (tab: KeepAliveTab) => CSSProperties = useCallback(
- (tab) => {
- const isActive = tab.key === activeTabRoutePath || tab.key === hoveringTabKey;
- const result: CSSProperties = {
- borderRadius: '8px 8px 0 0',
- borderWidth: '1px',
- borderStyle: 'solid',
- borderColor: themeToken.colorBorderSecondary,
- backgroundColor: themeToken.colorBgLayout,
- transition:
- 'color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
- };
+ /**
+ * tab样式
+ */
+ const calcTabStyle: (tab: KeepAliveTab) => CSSProperties = useCallback(
+ (tab) => {
+ const isActive = tab.key === activeTabRoutePath || tab.key === hoveringTabKey;
+ const result: CSSProperties = {
+ borderRadius: '8px 8px 0 0',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+ borderColor: themeToken.colorBorderSecondary,
+ backgroundColor: themeToken.colorBgLayout,
+ transition:
+ 'color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+ };
- if (isActive) {
- result.backgroundColor = themeToken.colorBgContainer;
- result.color = themeToken.colorPrimaryText;
- }
- return result;
- },
- [activeTabRoutePath, hoveringTabKey, themeToken],
- );
+ if (isActive) {
+ result.backgroundColor = themeToken.colorBgContainer;
+ result.color = themeToken.colorPrimaryText;
+ }
+ return result;
+ },
+ [activeTabRoutePath, hoveringTabKey, themeToken],
+ );
- /**
- * 渲染单个tab
- */
- const renderTabLabel = useCallback(
- (tab: KeepAliveTab) => {
- return (
- menuClick(menuInfo, tab) }}
- onOpenChange={(open) => onOpenChange(open, tab)}
- >
- {
- if (tab.key === activeTabRoutePath) return;
- setHoveringTabKey(tab.key);
- }}
- onMouseLeave={() => setHoveringTabKey('')}
- >
-
{t(tab.label)}
-
{
- e.stopPropagation();
- closeTab(tab.key);
- }}
- style={{
- visibility:
- (tab.key !== activeTabRoutePath && tab.key !== hoveringTabKey) ||
- tabs.length === 1
- ? 'hidden'
- : 'visible',
- }}
- />
-
-
- );
- },
- [
- t,
- menuItems,
- activeTabRoutePath,
- hoveringTabKey,
- tabs.length,
- menuClick,
- closeTab,
- calcTabStyle,
- ],
- );
+ /**
+ * 渲染单个tab
+ */
+ const renderTabLabel = useCallback(
+ (tab: KeepAliveTab) => {
+ return (
+ menuClick(menuInfo, tab) }}
+ onOpenChange={(open) => onOpenChange(open, tab)}
+ >
+ {
+ if (tab.key === activeTabRoutePath) return;
+ setHoveringTabKey(tab.key);
+ }}
+ onMouseLeave={() => setHoveringTabKey('')}
+ >
+
{t(tab.label)}
+
{
+ e.stopPropagation();
+ closeTab(tab.key);
+ }}
+ style={{
+ visibility:
+ (tab.key !== activeTabRoutePath &&
+ tab.key !== hoveringTabKey) ||
+ tabs.length === 1
+ ? 'hidden'
+ : 'visible',
+ }}
+ />
+
+
+ );
+ },
+ [
+ t,
+ menuItems,
+ activeTabRoutePath,
+ hoveringTabKey,
+ tabs.length,
+ menuClick,
+ closeTab,
+ calcTabStyle,
+ ],
+ );
- /**
- * 所有tab
- */
+ /**
+ * 所有tab
+ */
- const tabItems = useMemo(() => {
- return tabs?.map((tab) => ({
- label: renderTabLabel(tab),
- key: tab.key,
- closable: tabs.length > 1, // 保留一个
- children: (
-
- {tab.children}
-
- ),
- }));
- }, [tabs, renderTabLabel]);
+ const tabItems = useMemo(() => {
+ return tabs?.map((tab) => ({
+ label: renderTabLabel(tab),
+ key: tab.key,
+ closable: tabs.length > 1, // 保留一个
+ children: (
+
+ {tab.children}
+
+ ),
+ }));
+ }, [tabs, renderTabLabel]);
- /**
- * 拖拽结束事件
- */
- const onDragEnd: OnDragEndResponder = ({ destination, source }) => {
- // 拖拽到非法非 droppable区域
- if (!destination) {
- return;
- }
- // 原地放下
- if (destination.droppableId === source.droppableId && destination.index === source.index) {
- return;
- }
+ /**
+ * 拖拽结束事件
+ */
+ const onDragEnd: OnDragEndResponder = ({ destination, source }) => {
+ // 拖拽到非法非 droppable区域
+ if (!destination) {
+ return;
+ }
+ // 原地放下
+ if (destination.droppableId === source.droppableId && destination.index === source.index) {
+ return;
+ }
- const newTabs = Array.from(tabs);
- const [movedTab] = newTabs.splice(source.index, 1);
- newTabs.splice(destination.index, 0, movedTab);
- setTabs(newTabs);
- };
+ const newTabs = Array.from(tabs);
+ const [movedTab] = newTabs.splice(source.index, 1);
+ newTabs.splice(destination.index, 0, movedTab);
+ setTabs(newTabs);
+ };
- /**
- * 渲染 tabbar
- */
- const { themeLayout } = useSettings();
- const { colorBorder, colorBgElevated } = useThemeToken();
- const { screenMap } = useResponsive();
+ /**
+ * 渲染 tabbar
+ */
+ const { themeLayout } = useSettings();
+ const { colorBorder, colorBgElevated } = useThemeToken();
+ const { screenMap } = useResponsive();
- const multiTabsStyle: CSSProperties = {
- position: 'fixed',
- top: offsetTop ? OFFSET_HEADER_HEIGHT - 2 : HEADER_HEIGHT,
- left: 0,
- height: MULTI_TABS_HEIGHT,
- backgroundColor: Color(colorBgElevated).alpha(1).toString(),
- borderBottom: `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`,
- transition: 'top 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
- };
+ const multiTabsStyle: CSSProperties = {
+ position: 'fixed',
+ top: offsetTop ? OFFSET_HEADER_HEIGHT - 2 : HEADER_HEIGHT,
+ left: 0,
+ height: MULTI_TABS_HEIGHT,
+ backgroundColor: Color(colorBgElevated).alpha(1).toString(),
+ borderBottom: `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`,
+ transition: 'top 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+ };
- if (themeLayout === ThemeLayout.Horizontal) {
- multiTabsStyle.top = HEADER_HEIGHT + NAV_HORIZONTAL_HEIGHT - 2;
- } else if (screenMap.md) {
- multiTabsStyle.right = '0px';
- multiTabsStyle.left = 'auto';
- multiTabsStyle.width = `calc(100% - ${
- themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
- }px`;
- } else {
- multiTabsStyle.width = '100vw';
- }
- const renderTabBar: TabsProps['renderTabBar'] = () => {
- return (
-
-
-
- {(provided) => (
-
-
- {tabs.map((tab, index) => (
-
push(tab.key)}
- >
-
+ if (themeLayout === ThemeLayout.Horizontal) {
+ multiTabsStyle.top = HEADER_HEIGHT + NAV_HORIZONTAL_HEIGHT - 2;
+ } else if (screenMap.md) {
+ multiTabsStyle.right = '0px';
+ multiTabsStyle.left = 'auto';
+ multiTabsStyle.width = `calc(100% - ${
+ themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
+ }px`;
+ } else {
+ multiTabsStyle.width = '100vw';
+ }
+ const renderTabBar: TabsProps['renderTabBar'] = () => {
+ return (
+
+
+
{(provided) => (
-
- {renderTabLabel(tab)}
-
+
+
+ {tabs.map((tab, index) => (
+
push(tab.key)}
+ >
+
+ {(provided) => (
+
+ {renderTabLabel(tab)}
+
+ )}
+
+
+ ))}
+
+ {provided.placeholder}
+
)}
-
-
- ))}
-
- {provided.placeholder}
-
- )}
-
-
-
- );
- };
+
+
+
+ );
+ };
- /**
- * 路由变化时,滚动到指定tab
- */
- useEffect(() => {
- if (!scrollContainer || !scrollContainer.current) {
- return;
- }
- const index = tabs.findIndex((tab) => tab.key === activeTabRoutePath);
- const currentTabElement = scrollContainer.current.querySelector(`#tab-${index}`);
- if (currentTabElement) {
- currentTabElement.scrollIntoView({
- block: 'nearest',
- behavior: 'smooth',
- });
- }
- }, [activeTabRoutePath, tabs]);
+ /**
+ * 路由变化时,滚动到指定tab
+ */
+ useEffect(() => {
+ if (!scrollContainer || !scrollContainer.current) {
+ return;
+ }
+ const index = tabs.findIndex((tab) => tab.key === activeTabRoutePath);
+ const currentTabElement = scrollContainer.current.querySelector(`#tab-${index}`);
+ if (currentTabElement) {
+ currentTabElement.scrollIntoView({
+ block: 'nearest',
+ behavior: 'smooth',
+ });
+ }
+ }, [activeTabRoutePath, tabs]);
- /**
- * scrollContainer 监听wheel事件
- */
- useEffect(() => {
- function handleMouseWheel(event: WheelEvent) {
- event.preventDefault();
- scrollContainer.current!.scrollLeft += event.deltaY;
- }
+ /**
+ * scrollContainer 监听wheel事件
+ */
+ useEffect(() => {
+ function handleMouseWheel(event: WheelEvent) {
+ event.preventDefault();
+ scrollContainer.current!.scrollLeft += event.deltaY;
+ }
- scrollContainer.current!.addEventListener('mouseenter', () => {
- scrollContainer.current!.addEventListener('wheel', handleMouseWheel);
- });
- scrollContainer.current!.addEventListener('mouseleave', () => {
- scrollContainer.current!.removeEventListener('wheel', handleMouseWheel);
- });
- }, []);
+ scrollContainer.current!.addEventListener('mouseenter', () => {
+ scrollContainer.current!.addEventListener('wheel', handleMouseWheel);
+ });
+ scrollContainer.current!.addEventListener('mouseleave', () => {
+ scrollContainer.current!.removeEventListener('wheel', handleMouseWheel);
+ });
+ }, []);
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
const StyledMultiTabs = styled.div`
- height: 100%;
- margin-top: 2px;
- .anticon {
- margin: 0px !important;
- }
- .ant-tabs {
height: 100%;
- .ant-tabs-content {
- height: 100%;
+ margin-top: 2px;
+ .anticon {
+ margin: 0px !important;
}
- .ant-tabs-tabpane {
- height: 100%;
- & > div {
+ .ant-tabs {
height: 100%;
- }
+ .ant-tabs-content {
+ height: 100%;
+ }
+ .ant-tabs-tabpane {
+ height: 100%;
+ & > div {
+ height: 100%;
+ }
+ }
}
- }
- /* 隐藏滚动条 */
- .hide-scrollbar {
- overflow: scroll;
- flex-shrink: 0;
- scrollbar-width: none; /* 隐藏滚动条 Firefox */
- -ms-overflow-style: none; /* 隐藏滚动条 IE/Edge */
- }
+ /* 隐藏滚动条 */
+ .hide-scrollbar {
+ overflow: scroll;
+ flex-shrink: 0;
+ scrollbar-width: none; /* 隐藏滚动条 Firefox */
+ -ms-overflow-style: none; /* 隐藏滚动条 IE/Edge */
+ }
- .hide-scrollbar::-webkit-scrollbar {
- display: none; /* 隐藏滚动条 Chrome/Safari/Opera */
- }
+ .hide-scrollbar::-webkit-scrollbar {
+ display: none; /* 隐藏滚动条 Chrome/Safari/Opera */
+ }
`;
diff --git a/src/layouts/dashboard/nav-horizontal.tsx b/src/layouts/dashboard/nav-horizontal.tsx
index b07a67a..9d100e8 100644
--- a/src/layouts/dashboard/nav-horizontal.tsx
+++ b/src/layouts/dashboard/nav-horizontal.tsx
@@ -10,64 +10,64 @@ import { useThemeToken } from '@/theme/hooks';
import { NAV_HORIZONTAL_HEIGHT } from './config';
export default function NavHorizontal() {
- const navigate = useNavigate();
- const matches = useMatches();
- const { pathname } = useLocation();
+ const navigate = useNavigate();
+ const matches = useMatches();
+ const { pathname } = useLocation();
- const { colorBgElevated } = useThemeToken();
+ const { colorBgElevated } = useThemeToken();
- const routeToMenuFn = useRouteToMenuFn();
- const permissionRoutes = usePermissionRoutes();
+ const routeToMenuFn = useRouteToMenuFn();
+ const permissionRoutes = usePermissionRoutes();
- /**
- * state
- */
- const [openKeys, setOpenKeys] = useState([]);
- const [selectedKeys, setSelectedKeys] = useState(['']);
- const [menuList, setMenuList] = useState([]);
+ /**
+ * state
+ */
+ const [openKeys, setOpenKeys] = useState([]);
+ const [selectedKeys, setSelectedKeys] = useState(['']);
+ const [menuList, setMenuList] = useState([]);
- useEffect(() => {
- setSelectedKeys([pathname]);
- }, [pathname, matches]);
+ useEffect(() => {
+ setSelectedKeys([pathname]);
+ }, [pathname, matches]);
- useEffect(() => {
- const menuRoutes = menuFilter(permissionRoutes);
- const menus = routeToMenuFn(menuRoutes);
- setMenuList(menus);
- }, [permissionRoutes, routeToMenuFn]);
+ useEffect(() => {
+ const menuRoutes = menuFilter(permissionRoutes);
+ const menus = routeToMenuFn(menuRoutes);
+ setMenuList(menus);
+ }, [permissionRoutes, routeToMenuFn]);
- /**
- * events
- */
- const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
- const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
- if (latestOpenKey) {
- setOpenKeys(keys);
- } else {
- setOpenKeys([]);
- }
- };
- const onClick: MenuProps['onClick'] = ({ key }) => {
- navigate(key);
- };
+ /**
+ * events
+ */
+ const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+ const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
+ if (latestOpenKey) {
+ setOpenKeys(keys);
+ } else {
+ setOpenKeys([]);
+ }
+ };
+ const onClick: MenuProps['onClick'] = ({ key }) => {
+ navigate(key);
+ };
- const menuStyle: CSSProperties = {
- background: colorBgElevated,
- };
- return (
-
-
-
- );
+ const menuStyle: CSSProperties = {
+ background: colorBgElevated,
+ };
+ return (
+
+
+
+ );
}
diff --git a/src/layouts/dashboard/nav.tsx b/src/layouts/dashboard/nav.tsx
index 933bdce..7a88375 100644
--- a/src/layouts/dashboard/nav.tsx
+++ b/src/layouts/dashboard/nav.tsx
@@ -17,137 +17,137 @@ import { NAV_COLLAPSED_WIDTH, NAV_WIDTH } from './config';
import { ThemeLayout } from '#/enum';
type Props = {
- closeSideBarDrawer?: () => void;
+ closeSideBarDrawer?: () => void;
};
export default function Nav(props: Props) {
- const navigate = useNavigate();
- const matches = useMatches();
- const { pathname } = useLocation();
-
- const { colorTextBase, colorBgElevated, colorBorder } = useThemeToken();
-
- const settings = useSettings();
- const { themeLayout } = settings;
- const { setSettings } = useSettingActions();
-
- const menuStyle: CSSProperties = {
- background: colorBgElevated,
- };
-
- const routeToMenuFn = useRouteToMenuFn();
- const permissionRoutes = usePermissionRoutes();
-
- /**
- * state
- */
- const [collapsed, setCollapsed] = useState(false);
- const [openKeys, setOpenKeys] = useState([]);
- const [selectedKeys, setSelectedKeys] = useState(['']);
- const [menuList, setMenuList] = useState([]);
- const [menuMode, setMenuMode] = useState('inline');
-
- useEffect(() => {
- if (themeLayout === ThemeLayout.Vertical) {
- const openKeys = matches
- .filter((match) => match.pathname !== '/')
- .map((match) => match.pathname);
- setOpenKeys(openKeys);
- }
- setSelectedKeys([pathname]);
- }, [pathname, matches, collapsed, themeLayout]);
-
- useEffect(() => {
- const menuRoutes = menuFilter(permissionRoutes);
- const menus = routeToMenuFn(menuRoutes);
- setMenuList(menus);
- }, [permissionRoutes, routeToMenuFn]);
-
- useEffect(() => {
- if (themeLayout === ThemeLayout.Vertical) {
- setCollapsed(false);
- setMenuMode('inline');
- }
- if (themeLayout === ThemeLayout.Mini) {
- setCollapsed(true);
- setMenuMode('inline');
- }
- }, [themeLayout]);
-
- /**
- * events
- */
- const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
- const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
- if (latestOpenKey) {
- setOpenKeys(keys);
- } else {
- setOpenKeys([]);
- }
- };
- const onClick: MenuProps['onClick'] = ({ key }) => {
- navigate(key);
- props?.closeSideBarDrawer?.();
- };
-
- const setThemeLayout = (themeLayout: ThemeLayout) => {
- setSettings({
- ...settings,
- themeLayout,
- });
- };
-
- const toggleCollapsed = () => {
- if (!collapsed) {
- setThemeLayout(ThemeLayout.Mini);
- } else {
- setThemeLayout(ThemeLayout.Vertical);
- }
- setCollapsed(!collapsed);
- };
-
- return (
-
-
- {themeLayout === ThemeLayout.Mini ? (
-
- ) : (
-
- )}
-
([]);
+ const [selectedKeys, setSelectedKeys] = useState(['']);
+ const [menuList, setMenuList] = useState([]);
+ const [menuMode, setMenuMode] = useState('inline');
+
+ useEffect(() => {
+ if (themeLayout === ThemeLayout.Vertical) {
+ const openKeys = matches
+ .filter((match) => match.pathname !== '/')
+ .map((match) => match.pathname);
+ setOpenKeys(openKeys);
+ }
+ setSelectedKeys([pathname]);
+ }, [pathname, matches, collapsed, themeLayout]);
+
+ useEffect(() => {
+ const menuRoutes = menuFilter(permissionRoutes);
+ const menus = routeToMenuFn(menuRoutes);
+ setMenuList(menus);
+ }, [permissionRoutes, routeToMenuFn]);
+
+ useEffect(() => {
+ if (themeLayout === ThemeLayout.Vertical) {
+ setCollapsed(false);
+ setMenuMode('inline');
+ }
+ if (themeLayout === ThemeLayout.Mini) {
+ setCollapsed(true);
+ setMenuMode('inline');
+ }
+ }, [themeLayout]);
+
+ /**
+ * events
+ */
+ const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+ const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
+ if (latestOpenKey) {
+ setOpenKeys(keys);
+ } else {
+ setOpenKeys([]);
+ }
+ };
+ const onClick: MenuProps['onClick'] = ({ key }) => {
+ navigate(key);
+ props?.closeSideBarDrawer?.();
+ };
+
+ const setThemeLayout = (themeLayout: ThemeLayout) => {
+ setSettings({
+ ...settings,
+ themeLayout,
+ });
+ };
+
+ const toggleCollapsed = () => {
+ if (!collapsed) {
+ setThemeLayout(ThemeLayout.Mini);
+ } else {
+ setThemeLayout(ThemeLayout.Vertical);
+ }
+ setCollapsed(!collapsed);
+ };
+
+ return (
+
- {collapsed ? : }
-
-
-
-
- {/* */}
-
-
-
- );
+
+ {themeLayout === ThemeLayout.Mini ? (
+
+ ) : (
+
+ )}
+
+ {collapsed ? : }
+
+
+
+
+ {/* */}
+
+
+
+ );
}
diff --git a/src/layouts/simple/index.tsx b/src/layouts/simple/index.tsx
index 8742b7f..c65db1b 100644
--- a/src/layouts/simple/index.tsx
+++ b/src/layouts/simple/index.tsx
@@ -5,20 +5,20 @@ import { useThemeToken } from '@/theme/hooks';
import HeaderSimple from '../_common/header-simple';
type Props = {
- children: React.ReactNode;
+ children: React.ReactNode;
};
export default function SimpleLayout({ children }: Props) {
- const { colorBgElevated, colorTextBase } = useThemeToken();
- return (
-
-
- {children}
-
- );
+ const { colorBgElevated, colorTextBase } = useThemeToken();
+ return (
+
+
+ {children}
+
+ );
}
diff --git a/src/locales/i18n.ts b/src/locales/i18n.ts
index 3ea8b06..32a88d3 100644
--- a/src/locales/i18n.ts
+++ b/src/locales/i18n.ts
@@ -11,25 +11,25 @@ import { LocalEnum, StorageEnum } from '#/enum';
const defaultLng = getStringItem(StorageEnum.I18N) || (LocalEnum.en_US as string);
i18n
- // detect user language
- // learn more: https://github.com/i18next/i18next-browser-languageDetector
- .use(LanguageDetector)
- // pass the i18n instance to react-i18next.
- .use(initReactI18next)
- // init i18next
- // for all options read: https://www.i18next.com/overview/configuration-options
- .init({
- debug: true,
- lng: defaultLng, // localstorage -> i18nextLng: en_US
- fallbackLng: LocalEnum.en_US,
- interpolation: {
- escapeValue: false, // not needed for react as it escapes by default
- },
- resources: {
- en_US: { translation: en_US },
- zh_CN: { translation: zh_CN },
- },
- });
+ // detect user language
+ // learn more: https://github.com/i18next/i18next-browser-languageDetector
+ .use(LanguageDetector)
+ // pass the i18n instance to react-i18next.
+ .use(initReactI18next)
+ // init i18next
+ // for all options read: https://www.i18next.com/overview/configuration-options
+ .init({
+ debug: true,
+ lng: defaultLng, // localstorage -> i18nextLng: en_US
+ fallbackLng: LocalEnum.en_US,
+ interpolation: {
+ escapeValue: false, // not needed for react as it escapes by default
+ },
+ resources: {
+ en_US: { translation: en_US },
+ zh_CN: { translation: zh_CN },
+ },
+ });
export default i18n;
export const { t } = i18n;
diff --git a/src/locales/lang/en_US/common.json b/src/locales/lang/en_US/common.json
index d21ce6c..c984357 100644
--- a/src/locales/lang/en_US/common.json
+++ b/src/locales/lang/en_US/common.json
@@ -1,22 +1,22 @@
{
- "common": {
- "okText": "OK",
- "closeText": "Close",
- "cancelText": "Cancel",
- "loadingText": "Loading...",
- "saveText": "Save",
- "delText": "Delete",
- "resetText": "Reset",
- "searchText": "Search",
- "queryText": "Search",
+ "common": {
+ "okText": "OK",
+ "closeText": "Close",
+ "cancelText": "Cancel",
+ "loadingText": "Loading...",
+ "saveText": "Save",
+ "delText": "Delete",
+ "resetText": "Reset",
+ "searchText": "Search",
+ "queryText": "Search",
- "inputText": "Please enter",
- "chooseText": "Please choose",
+ "inputText": "Please enter",
+ "chooseText": "Please choose",
- "redo": "Refresh",
- "back": "Back",
+ "redo": "Refresh",
+ "back": "Back",
- "light": "Light",
- "dark": "Dark"
- }
+ "light": "Light",
+ "dark": "Dark"
+ }
}
diff --git a/src/locales/lang/en_US/home.json b/src/locales/lang/en_US/home.json
index 6ce5f6c..9182470 100644
--- a/src/locales/lang/en_US/home.json
+++ b/src/locales/lang/en_US/home.json
@@ -1,5 +1,5 @@
{
- "home": {
- "menu": "home"
- }
+ "home": {
+ "menu": "home"
+ }
}
diff --git a/src/locales/lang/en_US/index.ts b/src/locales/lang/en_US/index.ts
index ec9ad89..4a7c37c 100644
--- a/src/locales/lang/en_US/index.ts
+++ b/src/locales/lang/en_US/index.ts
@@ -3,7 +3,7 @@ import home from './home.json';
import sys from './sys.json';
export default {
- ...common,
- ...sys,
- ...home,
+ ...common,
+ ...sys,
+ ...home,
};
diff --git a/src/locales/lang/en_US/sys.json b/src/locales/lang/en_US/sys.json
index 5dc8bb3..5d50ec6 100644
--- a/src/locales/lang/en_US/sys.json
+++ b/src/locales/lang/en_US/sys.json
@@ -1,157 +1,157 @@
{
- "sys": {
- "api": {
- "operationSuccess": "Operation Success",
- "operationFailed": "Operation failed",
- "errorTip": "Error Tip",
- "successTip": "Success Tip",
- "errorMessage": "The operation failed, the system is abnormal!",
- "timeoutMessage": "Login timed out, please log in again!",
- "apiTimeoutMessage": "The interface request timed out, please refresh the page and try again!",
- "apiRequestFailed": "The interface request failed, please try again later!",
- "networkException": "network anomaly",
- "networkExceptionMsg": "Please check if your network connection is normal! The network is abnormal",
+ "sys": {
+ "api": {
+ "operationSuccess": "Operation Success",
+ "operationFailed": "Operation failed",
+ "errorTip": "Error Tip",
+ "successTip": "Success Tip",
+ "errorMessage": "The operation failed, the system is abnormal!",
+ "timeoutMessage": "Login timed out, please log in again!",
+ "apiTimeoutMessage": "The interface request timed out, please refresh the page and try again!",
+ "apiRequestFailed": "The interface request failed, please try again later!",
+ "networkException": "network anomaly",
+ "networkExceptionMsg": "Please check if your network connection is normal! The network is abnormal",
- "errMsg401": "The user does not have permission (token, user name, password error)!",
- "errMsg403": "The user is authorized, but access is forbidden!",
- "errMsg404": "Network request error, the resource was not found!",
- "errMsg405": "Network request error, request method not allowed!",
- "errMsg408": "Network request timed out!",
- "errMsg500": "Server error, please contact the administrator!",
- "errMsg501": "The network is not implemented!",
- "errMsg502": "Network Error!",
- "errMsg503": "The service is unavailable, the server is temporarily overloaded or maintained!",
- "errMsg504": "Network timeout!",
- "errMsg505": "The http version does not support the request!"
- },
- "login": {
- "backSignIn": "Back sign in",
- "mobileSignInFormTitle": "Mobile sign in",
- "qrSignInFormTitle": "Qr code sign in",
- "signInFormTitle": "Sign in",
- "signUpFormTitle": "Sign up",
- "forgetFormTitle": "Reset password",
+ "errMsg401": "The user does not have permission (token, user name, password error)!",
+ "errMsg403": "The user is authorized, but access is forbidden!",
+ "errMsg404": "Network request error, the resource was not found!",
+ "errMsg405": "Network request error, request method not allowed!",
+ "errMsg408": "Network request timed out!",
+ "errMsg500": "Server error, please contact the administrator!",
+ "errMsg501": "The network is not implemented!",
+ "errMsg502": "Network Error!",
+ "errMsg503": "The service is unavailable, the server is temporarily overloaded or maintained!",
+ "errMsg504": "Network timeout!",
+ "errMsg505": "The http version does not support the request!"
+ },
+ "login": {
+ "backSignIn": "Back sign in",
+ "mobileSignInFormTitle": "Mobile sign in",
+ "qrSignInFormTitle": "Qr code sign in",
+ "signInFormTitle": "Sign in",
+ "signUpFormTitle": "Sign up",
+ "forgetFormTitle": "Reset password",
- "signInPrimaryTitle": "Hi, Welcome Back",
- "signInSecondTitle": "Backstage management system",
- "signInTitle": "",
- "signInDesc": "Enter your personal details and get started!",
- "policy": "I agree to the xxx Privacy Policy",
- "scanSign": "scanning the code to complete the login",
- "forgetFormSecondTitle": "Please enter the email address associated with your account and We will email you a link to reset your password.",
+ "signInPrimaryTitle": "Hi, Welcome Back",
+ "signInSecondTitle": "Backstage management system",
+ "signInTitle": "",
+ "signInDesc": "Enter your personal details and get started!",
+ "policy": "I agree to the xxx Privacy Policy",
+ "scanSign": "scanning the code to complete the login",
+ "forgetFormSecondTitle": "Please enter the email address associated with your account and We will email you a link to reset your password.",
- "loginButton": "Sign in",
- "registerButton": "Sign up",
- "rememberMe": "Remember me",
- "forgetPassword": "Forget Password?",
- "otherSignIn": "Sign in with",
- "sendSmsButton": "Send SMS code",
- "sendSmsText": "Reacquire in {{second}}s",
- "sendEmailButton": "Send Email",
+ "loginButton": "Sign in",
+ "registerButton": "Sign up",
+ "rememberMe": "Remember me",
+ "forgetPassword": "Forget Password?",
+ "otherSignIn": "Sign in with",
+ "sendSmsButton": "Send SMS code",
+ "sendSmsText": "Reacquire in {{second}}s",
+ "sendEmailButton": "Send Email",
- "loginSuccessTitle": "Login successful",
- "loginSuccessDesc": "Welcome back",
+ "loginSuccessTitle": "Login successful",
+ "loginSuccessDesc": "Welcome back",
- "accountPlaceholder": "Please input account",
- "passwordPlaceholder": "Please input password",
- "confirmPasswordPlaceholder": "Please input confirm password",
- "emaildPlaceholder": "Please input email",
- "smsPlaceholder": "Please input sms code",
- "mobilePlaceholder": "Please input mobile",
- "policyPlaceholder": "Register after checking",
- "diffPwd": "The two passwords are inconsistent",
+ "accountPlaceholder": "Please input account",
+ "passwordPlaceholder": "Please input password",
+ "confirmPasswordPlaceholder": "Please input confirm password",
+ "emaildPlaceholder": "Please input email",
+ "smsPlaceholder": "Please input sms code",
+ "mobilePlaceholder": "Please input mobile",
+ "policyPlaceholder": "Register after checking",
+ "diffPwd": "The two passwords are inconsistent",
- "account": "Account",
- "password": "Password",
- "confirmPassword": "Confirm Password",
- "email": "Email",
- "smsCode": "SMS code",
- "mobile": "Mobile",
+ "account": "Account",
+ "password": "Password",
+ "confirmPassword": "Confirm Password",
+ "email": "Email",
+ "smsCode": "SMS code",
+ "mobile": "Mobile",
- "registerAndAgree": "By signing up, I agree to",
- "termsOfService": " Terms of service ",
- "privacyPolicy": " Privacy policy ",
- "logout": "Logout"
- },
- "tab": {
- "fullscreen": "FullScreen",
- "refresh": "Refresh",
- "close": "Close",
- "closeOthers": "Close Others",
- "closeAll": "Close All",
- "closeLeft": "Close Left",
- "closeRight": "Close Right"
- },
- "menu": {
- "dashboard": "Dashboard",
- "workbench": "Workbench",
- "analysis": "Analysis",
- "management": "Management",
- "user": {
- "index": "User",
- "profile": "Profile",
- "account": "Account"
- },
- "system": {
- "index": "System",
- "organization": "Organization",
- "permission": "Permission",
- "role": "Role",
- "user": "User"
- },
- "blog": "Blog",
- "components": "Components",
- "icon": "Icon",
- "animate": "Animate",
- "scroll": "Scroll",
- "markdown": "Markdown",
- "editor": "Editor",
- "i18n": "Multi Language",
- "upload": "Upload",
- "chart": "Chart",
- "functions": "Functions",
- "clipboard": "Clipboard",
- "menulevel": {
- "index": "Menu Level",
- "1a": "Menu Level 1a",
- "1b": {
- "index": "Menu Level 1b",
- "2a": "Menu Level 2a",
- "2b": {
- "index": "Menu Level 2b",
- "3a": "Menu Level 3a",
- "3b": "Menu Level 3b"
- }
+ "registerAndAgree": "By signing up, I agree to",
+ "termsOfService": " Terms of service ",
+ "privacyPolicy": " Privacy policy ",
+ "logout": "Logout"
+ },
+ "tab": {
+ "fullscreen": "FullScreen",
+ "refresh": "Refresh",
+ "close": "Close",
+ "closeOthers": "Close Others",
+ "closeAll": "Close All",
+ "closeLeft": "Close Left",
+ "closeRight": "Close Right"
+ },
+ "menu": {
+ "dashboard": "Dashboard",
+ "workbench": "Workbench",
+ "analysis": "Analysis",
+ "management": "Management",
+ "user": {
+ "index": "User",
+ "profile": "Profile",
+ "account": "Account"
+ },
+ "system": {
+ "index": "System",
+ "organization": "Organization",
+ "permission": "Permission",
+ "role": "Role",
+ "user": "User"
+ },
+ "blog": "Blog",
+ "components": "Components",
+ "icon": "Icon",
+ "animate": "Animate",
+ "scroll": "Scroll",
+ "markdown": "Markdown",
+ "editor": "Editor",
+ "i18n": "Multi Language",
+ "upload": "Upload",
+ "chart": "Chart",
+ "functions": "Functions",
+ "clipboard": "Clipboard",
+ "menulevel": {
+ "index": "Menu Level",
+ "1a": "Menu Level 1a",
+ "1b": {
+ "index": "Menu Level 1b",
+ "2a": "Menu Level 2a",
+ "2b": {
+ "index": "Menu Level 2b",
+ "3a": "Menu Level 3a",
+ "3b": "Menu Level 3b"
+ }
+ }
+ },
+ "disabled": "Item Disabled",
+ "label": "Item Label",
+ "frame": "Item External",
+ "external_link": "External Link",
+ "iframe": "Iframe",
+ "blank": "Blank",
+ "calendar": "Calendar",
+ "kanban": "Kanban",
+ "error": {
+ "index": "Error Page",
+ "403": "403",
+ "404": "404",
+ "500": "500"
+ }
+ },
+ "menu2": {
+ "setting": {
+ "index": "Setting",
+ "menu": "Menu",
+ "dictionary": "Dictionary",
+ "parameter": "Parameter"
+ },
+ "org": {
+ "index": "Org",
+ "org": "Institution",
+ "station": "Station",
+ "user": "User"
+ }
}
- },
- "disabled": "Item Disabled",
- "label": "Item Label",
- "frame": "Item External",
- "external_link": "External Link",
- "iframe": "Iframe",
- "blank": "Blank",
- "calendar": "Calendar",
- "kanban": "Kanban",
- "error": {
- "index": "Error Page",
- "403": "403",
- "404": "404",
- "500": "500"
- }
- },
- "menu2": {
- "setting": {
- "index": "Setting",
- "menu": "Menu",
- "dictionary": "Dictionary",
- "parameter": "Parameter"
- },
- "org": {
- "index": "Org",
- "org": "Institution",
- "station": "Station",
- "user": "User"
- }
}
- }
}
diff --git a/src/locales/lang/zh_CN/common.json b/src/locales/lang/zh_CN/common.json
index 40f268f..b70ba77 100644
--- a/src/locales/lang/zh_CN/common.json
+++ b/src/locales/lang/zh_CN/common.json
@@ -1,22 +1,22 @@
{
- "common": {
- "okText": "确认",
- "closeText": "关闭",
- "cancelText": "取消",
- "loadingText": "加载中...",
- "saveText": "保存",
- "delText": "删除",
- "resetText": "重置",
- "searchText": "搜索",
- "queryText": "查询",
+ "common": {
+ "okText": "确认",
+ "closeText": "关闭",
+ "cancelText": "取消",
+ "loadingText": "加载中...",
+ "saveText": "保存",
+ "delText": "删除",
+ "resetText": "重置",
+ "searchText": "搜索",
+ "queryText": "查询",
- "inputText": "请输入",
- "chooseText": "请选择",
+ "inputText": "请输入",
+ "chooseText": "请选择",
- "redo": "刷新",
- "back": "返回",
+ "redo": "刷新",
+ "back": "返回",
- "light": "亮色主题",
- "dark": "黑暗主题"
- }
+ "light": "亮色主题",
+ "dark": "黑暗主题"
+ }
}
diff --git a/src/locales/lang/zh_CN/home.json b/src/locales/lang/zh_CN/home.json
index 6826f8b..69fee12 100644
--- a/src/locales/lang/zh_CN/home.json
+++ b/src/locales/lang/zh_CN/home.json
@@ -1,5 +1,5 @@
{
- "home": {
- "menu": "个人主页"
- }
+ "home": {
+ "menu": "个人主页"
+ }
}
diff --git a/src/locales/lang/zh_CN/index.ts b/src/locales/lang/zh_CN/index.ts
index ec9ad89..4a7c37c 100644
--- a/src/locales/lang/zh_CN/index.ts
+++ b/src/locales/lang/zh_CN/index.ts
@@ -3,7 +3,7 @@ import home from './home.json';
import sys from './sys.json';
export default {
- ...common,
- ...sys,
- ...home,
+ ...common,
+ ...sys,
+ ...home,
};
diff --git a/src/locales/lang/zh_CN/sys.json b/src/locales/lang/zh_CN/sys.json
index 541887e..145be5a 100644
--- a/src/locales/lang/zh_CN/sys.json
+++ b/src/locales/lang/zh_CN/sys.json
@@ -1,156 +1,156 @@
{
- "sys": {
- "api": {
- "operationSuccess": "操作成功",
- "operationFailed": "操作失败",
- "errorTip": "错误提示",
- "successTip": "成功提示",
- "errorMessage": "操作失败,系统异常!",
- "timeoutMessage": "登录超时,请重新登录!",
- "apiTimeoutMessage": "接口请求超时,请刷新页面重试!",
- "apiRequestFailed": "请求出错,请稍候重试",
- "networkException": "网络异常",
- "networkExceptionMsg": "网络异常,请检查您的网络连接是否正常!",
+ "sys": {
+ "api": {
+ "operationSuccess": "操作成功",
+ "operationFailed": "操作失败",
+ "errorTip": "错误提示",
+ "successTip": "成功提示",
+ "errorMessage": "操作失败,系统异常!",
+ "timeoutMessage": "登录超时,请重新登录!",
+ "apiTimeoutMessage": "接口请求超时,请刷新页面重试!",
+ "apiRequestFailed": "请求出错,请稍候重试",
+ "networkException": "网络异常",
+ "networkExceptionMsg": "网络异常,请检查您的网络连接是否正常!",
- "errMsg401": "用户没有权限(令牌、用户名、密码错误)!",
- "errMsg403": "用户得到授权,但是访问是被禁止的。!",
- "errMsg404": "网络请求错误,未找到该资源!",
- "errMsg405": "网络请求错误,请求方法未允许!",
- "errMsg408": "网络请求超时!",
- "errMsg500": "服务器错误,请联系管理员!",
- "errMsg501": "网络未实现!",
- "errMsg502": "网络错误!",
- "errMsg503": "服务不可用,服务器暂时过载或维护!",
- "errMsg504": "网络超时!",
- "errMsg505": "http版本不支持该请求!"
- },
- "login": {
- "backSignIn": "返回",
- "signInFormTitle": "登录",
- "mobileSignInFormTitle": "手机登录",
- "qrSignInFormTitle": "二维码登录",
- "signUpFormTitle": "注册",
- "forgetFormTitle": "重置密码",
+ "errMsg401": "用户没有权限(令牌、用户名、密码错误)!",
+ "errMsg403": "用户得到授权,但是访问是被禁止的。!",
+ "errMsg404": "网络请求错误,未找到该资源!",
+ "errMsg405": "网络请求错误,请求方法未允许!",
+ "errMsg408": "网络请求超时!",
+ "errMsg500": "服务器错误,请联系管理员!",
+ "errMsg501": "网络未实现!",
+ "errMsg502": "网络错误!",
+ "errMsg503": "服务不可用,服务器暂时过载或维护!",
+ "errMsg504": "网络超时!",
+ "errMsg505": "http版本不支持该请求!"
+ },
+ "login": {
+ "backSignIn": "返回",
+ "signInFormTitle": "登录",
+ "mobileSignInFormTitle": "手机登录",
+ "qrSignInFormTitle": "二维码登录",
+ "signUpFormTitle": "注册",
+ "forgetFormTitle": "重置密码",
- "signInPrimaryTitle": "欢迎回来",
- "signInSecondTitle": "开箱即用的中后台管理系统",
- "signInDesc": "输入您的个人详细信息开始使用!",
- "policy": "我同意xxx隐私政策",
- "scanSign": "扫码后点击'确认',即可完成登录",
- "forgetFormSecondTitle": "请输入与您的帐户关联的电子邮件地址,我们将通过电子邮件向您发送重置密码的链接。",
+ "signInPrimaryTitle": "欢迎回来",
+ "signInSecondTitle": "开箱即用的中后台管理系统",
+ "signInDesc": "输入您的个人详细信息开始使用!",
+ "policy": "我同意xxx隐私政策",
+ "scanSign": "扫码后点击'确认',即可完成登录",
+ "forgetFormSecondTitle": "请输入与您的帐户关联的电子邮件地址,我们将通过电子邮件向您发送重置密码的链接。",
- "loginButton": "登录",
- "registerButton": "注册",
- "rememberMe": "记住我",
- "forgetPassword": "忘记密码?",
- "otherSignIn": "其他登录方式",
- "sendSmsButton": "发送验证码",
- "sendSmsText": "{{second}}秒后重新获取",
- "sendEmailButton": "发送邮件",
+ "loginButton": "登录",
+ "registerButton": "注册",
+ "rememberMe": "记住我",
+ "forgetPassword": "忘记密码?",
+ "otherSignIn": "其他登录方式",
+ "sendSmsButton": "发送验证码",
+ "sendSmsText": "{{second}}秒后重新获取",
+ "sendEmailButton": "发送邮件",
- "loginSuccessTitle": "登录成功",
- "loginSuccessDesc": "欢迎回来",
+ "loginSuccessTitle": "登录成功",
+ "loginSuccessDesc": "欢迎回来",
- "accountPlaceholder": "请输入账号",
- "passwordPlaceholder": "请输入密码",
- "confirmPasswordPlaceholder": "请输入确认密码",
- "emaildPlaceholder": "请输入邮箱",
- "smsPlaceholder": "请输入验证码",
- "mobilePlaceholder": "请输入手机号码",
- "policyPlaceholder": "勾选后才能注册",
- "diffPwd": "两次输入密码不一致",
+ "accountPlaceholder": "请输入账号",
+ "passwordPlaceholder": "请输入密码",
+ "confirmPasswordPlaceholder": "请输入确认密码",
+ "emaildPlaceholder": "请输入邮箱",
+ "smsPlaceholder": "请输入验证码",
+ "mobilePlaceholder": "请输入手机号码",
+ "policyPlaceholder": "勾选后才能注册",
+ "diffPwd": "两次输入密码不一致",
- "account": "账号",
- "password": "密码",
- "confirmPassword": "确认密码",
- "email": "邮箱",
- "smsCode": "短信验证码",
- "mobile": "手机号码",
+ "account": "账号",
+ "password": "密码",
+ "confirmPassword": "确认密码",
+ "email": "邮箱",
+ "smsCode": "短信验证码",
+ "mobile": "手机号码",
- "registerAndAgree": "注册即我同意",
- "termsOfService": " 服务条款 ",
- "privacyPolicy": " 隐私政策 ",
- "logout": "退出"
- },
- "tab": {
- "fullscreen": "内容全屏",
- "refresh": "刷新",
- "close": "关闭标签页",
- "closeOthers": "关闭其它标签页",
- "closeAll": "关闭所有标签页",
- "closeLeft": "关闭左侧标签页",
- "closeRight": "关闭右侧标签页"
- },
- "menu": {
- "dashboard": "仪表",
- "workbench": "工作台",
- "analysis": "分析",
- "management": "管理",
- "user": {
- "index": "用户",
- "profile": "个人资料",
- "account": "账户"
- },
- "system": {
- "index": "系统",
- "organization": "组织",
- "permission": "权限",
- "role": "角色",
- "user": "用户"
- },
- "blog": "博客",
- "components": "组件",
- "icon": "图标",
- "animate": "动画",
- "scroll": "滚动",
- "markdown": "Markdown",
- "editor": "富文本",
- "i18n": "多语言",
- "upload": "上传",
- "chart": "图表",
- "functions": "功能",
- "clipboard": "剪贴板",
- "menulevel": {
- "index": "多级菜单",
- "1a": "多级菜单 1a",
- "1b": {
- "index": "多级菜单 1b",
- "2a": "多级菜单 2a",
- "2b": {
- "index": "多级菜单 2b",
- "3a": "多级菜单 3a",
- "3b": "多级菜单 3b"
- }
+ "registerAndAgree": "注册即我同意",
+ "termsOfService": " 服务条款 ",
+ "privacyPolicy": " 隐私政策 ",
+ "logout": "退出"
+ },
+ "tab": {
+ "fullscreen": "内容全屏",
+ "refresh": "刷新",
+ "close": "关闭标签页",
+ "closeOthers": "关闭其它标签页",
+ "closeAll": "关闭所有标签页",
+ "closeLeft": "关闭左侧标签页",
+ "closeRight": "关闭右侧标签页"
+ },
+ "menu": {
+ "dashboard": "仪表",
+ "workbench": "工作台",
+ "analysis": "分析",
+ "management": "管理",
+ "user": {
+ "index": "用户",
+ "profile": "个人资料",
+ "account": "账户"
+ },
+ "system": {
+ "index": "系统",
+ "organization": "组织",
+ "permission": "权限",
+ "role": "角色",
+ "user": "用户"
+ },
+ "blog": "博客",
+ "components": "组件",
+ "icon": "图标",
+ "animate": "动画",
+ "scroll": "滚动",
+ "markdown": "Markdown",
+ "editor": "富文本",
+ "i18n": "多语言",
+ "upload": "上传",
+ "chart": "图表",
+ "functions": "功能",
+ "clipboard": "剪贴板",
+ "menulevel": {
+ "index": "多级菜单",
+ "1a": "多级菜单 1a",
+ "1b": {
+ "index": "多级菜单 1b",
+ "2a": "多级菜单 2a",
+ "2b": {
+ "index": "多级菜单 2b",
+ "3a": "多级菜单 3a",
+ "3b": "多级菜单 3b"
+ }
+ }
+ },
+ "disabled": "项目禁用",
+ "label": "项目标签",
+ "frame": "项目外部链接",
+ "external_link": "外链",
+ "iframe": "内嵌",
+ "blank": "空白",
+ "calendar": "日历",
+ "kanban": "看板",
+ "error": {
+ "index": "异常页",
+ "403": "403",
+ "404": "404",
+ "500": "500"
+ }
+ },
+ "menu2": {
+ "setting": {
+ "index": "系统设置",
+ "menu": "菜单管理",
+ "dictionary": "字典管理",
+ "parameter": "参数管理"
+ },
+ "org": {
+ "index": "组织机构",
+ "org": "机构管理",
+ "station": "岗位管理",
+ "user": "用户管理"
+ }
}
- },
- "disabled": "项目禁用",
- "label": "项目标签",
- "frame": "项目外部链接",
- "external_link": "外链",
- "iframe": "内嵌",
- "blank": "空白",
- "calendar": "日历",
- "kanban": "看板",
- "error": {
- "index": "异常页",
- "403": "403",
- "404": "404",
- "500": "500"
- }
- },
- "menu2": {
- "setting": {
- "index": "系统设置",
- "menu": "菜单管理",
- "dictionary": "字典管理",
- "parameter": "参数管理"
- },
- "org": {
- "index": "组织机构",
- "org": "机构管理",
- "station": "岗位管理",
- "user": "用户管理"
- }
}
- }
}
diff --git a/src/locales/useLocale.ts b/src/locales/useLocale.ts
index 8abbbf2..ed62ee4 100644
--- a/src/locales/useLocale.ts
+++ b/src/locales/useLocale.ts
@@ -7,44 +7,44 @@ import type { Locale as AntdLocal } from 'antd/es/locale';
type Locale = keyof typeof LocalEnum;
type Language = {
- locale: keyof typeof LocalEnum;
- icon: string;
- label: string;
- antdLocal: AntdLocal;
+ locale: keyof typeof LocalEnum;
+ icon: string;
+ label: string;
+ antdLocal: AntdLocal;
};
export const LANGUAGE_MAP: Record = {
- [LocalEnum.zh_CN]: {
- locale: LocalEnum.zh_CN,
- label: 'Chinese',
- icon: 'ic-locale_zh_CN',
- antdLocal: zh_CN,
- },
- [LocalEnum.en_US]: {
- locale: LocalEnum.en_US,
- label: 'English',
- icon: 'ic-locale_en_US',
- antdLocal: en_US,
- },
+ [LocalEnum.zh_CN]: {
+ locale: LocalEnum.zh_CN,
+ label: 'Chinese',
+ icon: 'ic-locale_zh_CN',
+ antdLocal: zh_CN,
+ },
+ [LocalEnum.en_US]: {
+ locale: LocalEnum.en_US,
+ label: 'English',
+ icon: 'ic-locale_en_US',
+ antdLocal: en_US,
+ },
};
export default function useLocale() {
- const { i18n } = useTranslation();
+ const { i18n } = useTranslation();
- /**
- * localstorage -> i18nextLng change
- */
- const setLocale = (locale: Locale) => {
- i18n.changeLanguage(locale);
- };
+ /**
+ * localstorage -> i18nextLng change
+ */
+ const setLocale = (locale: Locale) => {
+ i18n.changeLanguage(locale);
+ };
- const locale = (i18n.resolvedLanguage || LocalEnum.en_US) as Locale;
+ const locale = (i18n.resolvedLanguage || LocalEnum.en_US) as Locale;
- const language = LANGUAGE_MAP[locale];
+ const language = LANGUAGE_MAP[locale];
- return {
- locale,
- language,
- setLocale,
- };
+ return {
+ locale,
+ language,
+ setLocale,
+ };
}
diff --git a/src/pages/components/animate/control-panel.tsx b/src/pages/components/animate/control-panel.tsx
index ea34d34..bba73d9 100644
--- a/src/pages/components/animate/control-panel.tsx
+++ b/src/pages/components/animate/control-panel.tsx
@@ -3,43 +3,43 @@ import { Card } from 'antd';
import { useThemeToken } from '@/theme/hooks';
type Props = {
- variantKey: {
- type: string;
- values: string[];
- }[];
- selectedVariant: string;
- onChangeVarient: (varient: string) => void;
+ variantKey: {
+ type: string;
+ values: string[];
+ }[];
+ selectedVariant: string;
+ onChangeVarient: (varient: string) => void;
};
export default function ControlPanel({ variantKey, selectedVariant, onChangeVarient }: Props) {
- const { colorPrimary, colorTextBase } = useThemeToken();
+ const { colorPrimary, colorTextBase } = useThemeToken();
- const selectedStyle = (variantKey: string) => {
- return variantKey === selectedVariant
- ? {
- backgroundColor: colorPrimary,
- color: colorTextBase,
- }
- : {};
- };
- return (
-
- {variantKey.map((item) => (
-
-
{item.type.toUpperCase()}
-
- {item.values.map((item) => (
- onChangeVarient(item)}
- style={selectedStyle(item)}
- >
- {item}
-
+ const selectedStyle = (variantKey: string) => {
+ return variantKey === selectedVariant
+ ? {
+ backgroundColor: colorPrimary,
+ color: colorTextBase,
+ }
+ : {};
+ };
+ return (
+
+ {variantKey.map((item) => (
+
+
{item.type.toUpperCase()}
+
+ {item.values.map((item) => (
+ onChangeVarient(item)}
+ style={selectedStyle(item)}
+ >
+ {item}
+
+ ))}
+
+
))}
-
-
- ))}
-
- );
+
+ );
}
diff --git a/src/pages/components/animate/index.tsx b/src/pages/components/animate/index.tsx
index 1bdb6e1..727114b 100644
--- a/src/pages/components/animate/index.tsx
+++ b/src/pages/components/animate/index.tsx
@@ -7,23 +7,23 @@ import Inview from './views/inview';
import ScrollView from './views/scroll';
export default function AnimatePage() {
- const { colorPrimary } = useThemeToken();
- const TABS: TabsProps['items'] = [
- { key: 'inview', label: 'In View', children: },
- { key: 'scroll', label: 'Scroll', children: },
- { key: 'background', label: 'Background', children: },
- ];
+ const { colorPrimary } = useThemeToken();
+ const TABS: TabsProps['items'] = [
+ { key: 'inview', label: 'In View', children: },
+ { key: 'scroll', label: 'Scroll', children: },
+ { key: 'background', label: 'Background', children: },
+ ];
- return (
- <>
-
- https://www.framer.com/motion/
-
-
- >
- );
+ return (
+ <>
+
+ https://www.framer.com/motion/
+
+
+ >
+ );
}
diff --git a/src/pages/components/animate/views/background/container.tsx b/src/pages/components/animate/views/background/container.tsx
index 1c6ce52..976ba41 100644
--- a/src/pages/components/animate/views/background/container.tsx
+++ b/src/pages/components/animate/views/background/container.tsx
@@ -7,29 +7,33 @@ import { getVariant } from '@/components/animate/variants';
import { useThemeToken } from '@/theme/hooks';
type Props = {
- variant: string;
+ variant: string;
};
export default function ContainerView({ variant }: Props) {
- const { colorBgLayout } = useThemeToken();
- const varients = useMemo(() => getVariant(variant), [variant]);
- const isKenburns = variant.includes('kenburns');
+ const { colorBgLayout } = useThemeToken();
+ const varients = useMemo(() => getVariant(variant), [variant]);
+ const isKenburns = variant.includes('kenburns');
- useEffect(() => {
- console.log(varients);
- });
- return (
-
-
- {isKenburns ? (
-
- ) : (
-
- )}
-
-
- );
+ useEffect(() => {
+ console.log(varients);
+ });
+ return (
+
+
+ {isKenburns ? (
+
+ ) : (
+
+ )}
+
+
+ );
}
diff --git a/src/pages/components/animate/views/background/index.tsx b/src/pages/components/animate/views/background/index.tsx
index 63b0e06..bf4479c 100644
--- a/src/pages/components/animate/views/background/index.tsx
+++ b/src/pages/components/animate/views/background/index.tsx
@@ -7,49 +7,49 @@ import ContainerView from './container';
import Toolbar from './toolbar';
export default function BackgroundView() {
- const defaultValue = useMemo(() => {
- return {
- selectedVariant: 'kenburnsTop',
- };
- }, []);
- const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+ const defaultValue = useMemo(() => {
+ return {
+ selectedVariant: 'kenburnsTop',
+ };
+ }, []);
+ const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
- const onRefresh = () => {
- setSelectedVariant(defaultValue.selectedVariant);
- };
- return (
-
-
-
-
-
-
-
-
-
-
-
- setSelectedVariant(varient)}
- />
-
-
-
- );
+ const onRefresh = () => {
+ setSelectedVariant(defaultValue.selectedVariant);
+ };
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ setSelectedVariant(varient)}
+ />
+
+
+
+ );
}
const variantKey = [
- {
- type: 'kenburns',
- values: ['kenburnsTop', 'kenburnsBottom', 'kenburnsLeft', 'kenburnsRight'],
- },
- {
- type: 'pan',
- values: ['panTop', 'panBottom', 'panLeft', 'panRight'],
- },
- {
- type: 'color change',
- values: ['color2x', 'color3x', 'color4x', 'color5x'],
- },
+ {
+ type: 'kenburns',
+ values: ['kenburnsTop', 'kenburnsBottom', 'kenburnsLeft', 'kenburnsRight'],
+ },
+ {
+ type: 'pan',
+ values: ['panTop', 'panBottom', 'panLeft', 'panRight'],
+ },
+ {
+ type: 'color change',
+ values: ['color2x', 'color3x', 'color4x', 'color5x'],
+ },
];
diff --git a/src/pages/components/animate/views/background/toolbar.tsx b/src/pages/components/animate/views/background/toolbar.tsx
index 30e8b2d..cf27214 100644
--- a/src/pages/components/animate/views/background/toolbar.tsx
+++ b/src/pages/components/animate/views/background/toolbar.tsx
@@ -1,12 +1,12 @@
import { ReloadOutlined } from '@ant-design/icons';
type Props = {
- onRefresh: VoidFunction;
+ onRefresh: VoidFunction;
};
export default function Toolbar({ onRefresh }: Props) {
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
diff --git a/src/pages/components/animate/views/inview/container.tsx b/src/pages/components/animate/views/inview/container.tsx
index ecf805b..9b0b1a6 100644
--- a/src/pages/components/animate/views/inview/container.tsx
+++ b/src/pages/components/animate/views/inview/container.tsx
@@ -9,47 +9,47 @@ import { useThemeToken } from '@/theme/hooks';
const TEXT = 'SlashAdmin';
type Props = {
- isText: boolean;
- isMulti: boolean;
- variant: string;
+ isText: boolean;
+ isMulti: boolean;
+ variant: string;
};
export default function ContainerView({ isText, variant, isMulti }: Props) {
- const { colorBgLayout } = useThemeToken();
- const varients = useMemo(() => getVariant(variant), [variant]);
- const imgs = useMemo(() => (isMulti ? repeat(Cover3, 5) : [Cover3]), [isMulti]);
+ const { colorBgLayout } = useThemeToken();
+ const varients = useMemo(() => getVariant(variant), [variant]);
+ const imgs = useMemo(() => (isMulti ? repeat(Cover3, 5) : [Cover3]), [isMulti]);
- return (
-
- {isText ? (
-
- {TEXT.split('').map((letter, index) => (
-
- {letter}
-
- ))}
-
- ) : (
-
- {imgs.map((img, index) => (
-
- ))}
-
- )}
-
- );
+ return (
+
+ {isText ? (
+
+ {TEXT.split('').map((letter, index) => (
+
+ {letter}
+
+ ))}
+
+ ) : (
+
+ {imgs.map((img, index) => (
+
+ ))}
+
+ )}
+
+ );
}
diff --git a/src/pages/components/animate/views/inview/index.tsx b/src/pages/components/animate/views/inview/index.tsx
index 89c120c..8eba0a3 100644
--- a/src/pages/components/animate/views/inview/index.tsx
+++ b/src/pages/components/animate/views/inview/index.tsx
@@ -7,109 +7,109 @@ import ContainerView from './container';
import Toolbar from './toolbar';
const variantKey = [
- {
- type: 'slide in',
- values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'],
- },
- {
- type: 'slide out',
- values: ['slideOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight'],
- },
- {
- type: 'fade in',
- values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'],
- },
- {
- type: 'fade out',
- values: ['fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight'],
- },
- {
- type: 'zoom in',
- values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'],
- },
- {
- type: 'zoom out',
- values: ['zoomOut', 'zoomOutUp', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight'],
- },
- {
- type: 'bounce in',
- values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'],
- },
- {
- type: 'bounce out',
- values: ['bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight'],
- },
- {
- type: 'flip in',
- values: ['flipInX', 'flipInY'],
- },
- {
- type: 'flip out',
- values: ['flipOutX', 'flipOutY'],
- },
- {
- type: 'scale in',
- values: ['scaleInX', 'scaleInY'],
- },
- {
- type: 'scale out',
- values: ['scaleOutX', 'scaleOutY'],
- },
- {
- type: 'rotate in',
- values: ['rotateIn'],
- },
- {
- type: 'rotate out',
- values: ['rotateOut'],
- },
+ {
+ type: 'slide in',
+ values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'],
+ },
+ {
+ type: 'slide out',
+ values: ['slideOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight'],
+ },
+ {
+ type: 'fade in',
+ values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'],
+ },
+ {
+ type: 'fade out',
+ values: ['fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight'],
+ },
+ {
+ type: 'zoom in',
+ values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'],
+ },
+ {
+ type: 'zoom out',
+ values: ['zoomOut', 'zoomOutUp', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight'],
+ },
+ {
+ type: 'bounce in',
+ values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'],
+ },
+ {
+ type: 'bounce out',
+ values: ['bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight'],
+ },
+ {
+ type: 'flip in',
+ values: ['flipInX', 'flipInY'],
+ },
+ {
+ type: 'flip out',
+ values: ['flipOutX', 'flipOutY'],
+ },
+ {
+ type: 'scale in',
+ values: ['scaleInX', 'scaleInY'],
+ },
+ {
+ type: 'scale out',
+ values: ['scaleOutX', 'scaleOutY'],
+ },
+ {
+ type: 'rotate in',
+ values: ['rotateIn'],
+ },
+ {
+ type: 'rotate out',
+ values: ['rotateOut'],
+ },
];
export default function Inview() {
- const defaultValue = useMemo(() => {
- return {
- isText: false,
- isMulti: false,
- selectedVariant: 'slideInUp',
- };
- }, []);
+ const defaultValue = useMemo(() => {
+ return {
+ isText: false,
+ isMulti: false,
+ selectedVariant: 'slideInUp',
+ };
+ }, []);
- const [isText, setIsText] = useState(defaultValue.isText);
- const [isMulti, setIsMulti] = useState(defaultValue.isMulti);
+ const [isText, setIsText] = useState(defaultValue.isText);
+ const [isMulti, setIsMulti] = useState(defaultValue.isMulti);
- const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+ const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
- const onRefresh = () => {
- setIsText(defaultValue.isText);
- setIsMulti(defaultValue.isMulti);
- setSelectedVariant(defaultValue.selectedVariant);
- };
+ const onRefresh = () => {
+ setIsText(defaultValue.isText);
+ setIsMulti(defaultValue.isMulti);
+ setSelectedVariant(defaultValue.selectedVariant);
+ };
- return (
-
-
-
- setIsText(!isText)}
- isMulti={isMulti}
- onChangeMulti={() => setIsMulti(!isMulti)}
- onRefresh={onRefresh}
- />
-
-
-
-
-
-
-
- setSelectedVariant(varient)}
- />
-
-
-
- );
+ return (
+
+
+
+ setIsText(!isText)}
+ isMulti={isMulti}
+ onChangeMulti={() => setIsMulti(!isMulti)}
+ onRefresh={onRefresh}
+ />
+
+
+
+
+
+
+
+ setSelectedVariant(varient)}
+ />
+
+
+
+ );
}
diff --git a/src/pages/components/animate/views/inview/toolbar.tsx b/src/pages/components/animate/views/inview/toolbar.tsx
index eaaa592..6b0e37f 100644
--- a/src/pages/components/animate/views/inview/toolbar.tsx
+++ b/src/pages/components/animate/views/inview/toolbar.tsx
@@ -2,34 +2,34 @@ import { ReloadOutlined } from '@ant-design/icons';
import { Switch } from 'antd';
type Props = {
- isText: boolean;
- isMulti: boolean;
- onChnageText: (isText: boolean) => void;
- onChangeMulti: (isMulti: boolean) => void;
- onRefresh: VoidFunction;
+ isText: boolean;
+ isMulti: boolean;
+ onChnageText: (isText: boolean) => void;
+ onChangeMulti: (isMulti: boolean) => void;
+ onRefresh: VoidFunction;
};
export default function Toolbar({
- isText,
- isMulti,
- onChnageText,
- onChangeMulti,
- onRefresh,
+ isText,
+ isMulti,
+ onChnageText,
+ onChangeMulti,
+ onRefresh,
}: Props) {
- return (
-
-
-
- Text Object
-
-
- {isText ? null : (
-
-
- Multi Item
-
- )}
-
-
-
- );
+ return (
+
+
+
+ Text Object
+
+
+ {isText ? null : (
+
+
+ Multi Item
+
+ )}
+
+
+
+ );
}
diff --git a/src/pages/components/animate/views/scroll/container.tsx b/src/pages/components/animate/views/scroll/container.tsx
index 56c2626..8c7a036 100644
--- a/src/pages/components/animate/views/scroll/container.tsx
+++ b/src/pages/components/animate/views/scroll/container.tsx
@@ -6,25 +6,25 @@ import { getVariant } from '@/components/animate/variants';
import { useThemeToken } from '@/theme/hooks';
type Props = {
- variant: string;
+ variant: string;
};
export default function ContainerView({ variant }: Props) {
- const { colorBgLayout } = useThemeToken();
- const varients = useMemo(() => getVariant(variant), [variant]);
+ const { colorBgLayout } = useThemeToken();
+ const varients = useMemo(() => getVariant(variant), [variant]);
- return (
-
- {[...Array(40)].map((_, index) => (
-
-
- Item {index + 1}
-
-
- ))}
-
- );
+ return (
+
+ {[...Array(40)].map((_, index) => (
+
+
+ Item {index + 1}
+
+
+ ))}
+
+ );
}
diff --git a/src/pages/components/animate/views/scroll/index.tsx b/src/pages/components/animate/views/scroll/index.tsx
index a99de34..0100e0f 100644
--- a/src/pages/components/animate/views/scroll/index.tsx
+++ b/src/pages/components/animate/views/scroll/index.tsx
@@ -7,66 +7,66 @@ import ContainerView from './container';
import Toolbar from './toolbar';
export default function ScrollView() {
- const defaultValue = useMemo(() => {
- return {
- selectedVariant: 'slideInUp',
- };
- }, []);
- const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+ const defaultValue = useMemo(() => {
+ return {
+ selectedVariant: 'slideInUp',
+ };
+ }, []);
+ const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
- const onRefresh = () => {
- setSelectedVariant(defaultValue.selectedVariant);
- };
- return (
-
-
-
-
-
-
-
-
-
-
-
- setSelectedVariant(varient)}
- />
-
-
-
- );
+ const onRefresh = () => {
+ setSelectedVariant(defaultValue.selectedVariant);
+ };
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ setSelectedVariant(varient)}
+ />
+
+
+
+ );
}
const variantKey = [
- {
- type: 'slide',
- values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'],
- },
- {
- type: 'fade',
- values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'],
- },
- {
- type: 'zoom',
- values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'],
- },
- {
- type: 'bounce',
- values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'],
- },
- {
- type: 'flip',
- values: ['flipInX', 'flipInY'],
- },
- {
- type: 'scale',
- values: ['scaleInX', 'scaleInY'],
- },
- {
- type: 'rotate',
- values: ['rotateIn'],
- },
+ {
+ type: 'slide',
+ values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'],
+ },
+ {
+ type: 'fade',
+ values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'],
+ },
+ {
+ type: 'zoom',
+ values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'],
+ },
+ {
+ type: 'bounce',
+ values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'],
+ },
+ {
+ type: 'flip',
+ values: ['flipInX', 'flipInY'],
+ },
+ {
+ type: 'scale',
+ values: ['scaleInX', 'scaleInY'],
+ },
+ {
+ type: 'rotate',
+ values: ['rotateIn'],
+ },
];
diff --git a/src/pages/components/animate/views/scroll/toolbar.tsx b/src/pages/components/animate/views/scroll/toolbar.tsx
index 30e8b2d..cf27214 100644
--- a/src/pages/components/animate/views/scroll/toolbar.tsx
+++ b/src/pages/components/animate/views/scroll/toolbar.tsx
@@ -1,12 +1,12 @@
import { ReloadOutlined } from '@ant-design/icons';
type Props = {
- onRefresh: VoidFunction;
+ onRefresh: VoidFunction;
};
export default function Toolbar({ onRefresh }: Props) {
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
diff --git a/src/pages/components/chart/index.tsx b/src/pages/components/chart/index.tsx
index 29f6633..9c6e8c5 100644
--- a/src/pages/components/chart/index.tsx
+++ b/src/pages/components/chart/index.tsx
@@ -16,84 +16,84 @@ import ChartRadar from './view/chart-radar';
import ChartRadial from './view/chart-radial';
export default function ChartPage() {
- const { colorPrimary } = useThemeToken();
- return (
- <>
-
- https://apexcharts.com
-
+ const { colorPrimary } = useThemeToken();
+ return (
+ <>
+
+ https://apexcharts.com
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- >
- );
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
}
diff --git a/src/pages/components/chart/view/chart-area.tsx b/src/pages/components/chart/view/chart-area.tsx
index c759eaf..4bd9c82 100644
--- a/src/pages/components/chart/view/chart-area.tsx
+++ b/src/pages/components/chart/view/chart-area.tsx
@@ -2,29 +2,29 @@ import Chart from '@/components/chart/chart';
import useChart from '@/components/chart/useChart';
const series = [
- { name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] },
- { name: 'series2', data: [11, 32, 45, 32, 34, 52, 41] },
+ { name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] },
+ { name: 'series2', data: [11, 32, 45, 32, 34, 52, 41] },
];
export default function ChartArea() {
- const chartOptions = useChart({
- xaxis: {
- type: 'datetime',
- categories: [
- '2018-09-19T00:00:00.000Z',
- '2018-09-19T01:30:00.000Z',
- '2018-09-19T02:30:00.000Z',
- '2018-09-19T03:30:00.000Z',
- '2018-09-19T04:30:00.000Z',
- '2018-09-19T05:30:00.000Z',
- '2018-09-19T06:30:00.000Z',
- ],
- },
- tooltip: {
- x: {
- format: 'dd/MM/yy HH:mm',
- },
- },
- });
+ const chartOptions = useChart({
+ xaxis: {
+ type: 'datetime',
+ categories: [
+ '2018-09-19T00:00:00.000Z',
+ '2018-09-19T01:30:00.000Z',
+ '2018-09-19T02:30:00.000Z',
+ '2018-09-19T03:30:00.000Z',
+ '2018-09-19T04:30:00.000Z',
+ '2018-09-19T05:30:00.000Z',
+ '2018-09-19T06:30:00.000Z',
+ ],
+ },
+ tooltip: {
+ x: {
+ format: 'dd/MM/yy HH:mm',
+ },
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-bar.tsx b/src/pages/components/chart/view/chart-bar.tsx
index 1984107..d6b6eef 100644
--- a/src/pages/components/chart/view/chart-bar.tsx
+++ b/src/pages/components/chart/view/chart-bar.tsx
@@ -4,26 +4,26 @@ import useChart from '@/components/chart/useChart';
const series = [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380];
export default function ChartBar() {
- const chartOptions = useChart({
- stroke: { show: false },
- plotOptions: {
- bar: { horizontal: true, barHeight: '30%' },
- },
- xaxis: {
- categories: [
- 'Italy',
- 'Japan',
- 'China',
- 'Canada',
- 'France',
- 'Germany',
- 'South Korea',
- 'Netherlands',
- 'United States',
- 'United Kingdom',
- ],
- },
- });
+ const chartOptions = useChart({
+ stroke: { show: false },
+ plotOptions: {
+ bar: { horizontal: true, barHeight: '30%' },
+ },
+ xaxis: {
+ categories: [
+ 'Italy',
+ 'Japan',
+ 'China',
+ 'Canada',
+ 'France',
+ 'Germany',
+ 'South Korea',
+ 'Netherlands',
+ 'United States',
+ 'United Kingdom',
+ ],
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-column-Stacked.tsx b/src/pages/components/chart/view/chart-column-Stacked.tsx
index c3ab8ad..c6ad339 100644
--- a/src/pages/components/chart/view/chart-column-Stacked.tsx
+++ b/src/pages/components/chart/view/chart-column-Stacked.tsx
@@ -2,46 +2,46 @@ import Chart from '@/components/chart/chart';
import useChart from '@/components/chart/useChart';
const series = [
- { name: 'Product A', data: [44, 55, 41, 67, 22, 43] },
- { name: 'Product B', data: [13, 23, 20, 8, 13, 27] },
- { name: 'Product C', data: [11, 17, 15, 15, 21, 14] },
- { name: 'Product D', data: [21, 7, 25, 13, 22, 8] },
+ { name: 'Product A', data: [44, 55, 41, 67, 22, 43] },
+ { name: 'Product B', data: [13, 23, 20, 8, 13, 27] },
+ { name: 'Product C', data: [11, 17, 15, 15, 21, 14] },
+ { name: 'Product D', data: [21, 7, 25, 13, 22, 8] },
];
export default function ChartColumnStacked() {
- const chartOptions = useChart({
- chart: {
- stacked: true,
- zoom: {
- enabled: true,
- },
- },
- legend: {
- itemMargin: {
- vertical: 8,
- },
- position: 'right',
- offsetY: 20,
- },
- plotOptions: {
- bar: {
- columnWidth: '16%',
- },
- },
- stroke: {
- show: false,
- },
- xaxis: {
- type: 'datetime',
- categories: [
- '01/01/2011 GMT',
- '01/02/2011 GMT',
- '01/03/2011 GMT',
- '01/04/2011 GMT',
- '01/05/2011 GMT',
- '01/06/2011 GMT',
- ],
- },
- });
+ const chartOptions = useChart({
+ chart: {
+ stacked: true,
+ zoom: {
+ enabled: true,
+ },
+ },
+ legend: {
+ itemMargin: {
+ vertical: 8,
+ },
+ position: 'right',
+ offsetY: 20,
+ },
+ plotOptions: {
+ bar: {
+ columnWidth: '16%',
+ },
+ },
+ stroke: {
+ show: false,
+ },
+ xaxis: {
+ type: 'datetime',
+ categories: [
+ '01/01/2011 GMT',
+ '01/02/2011 GMT',
+ '01/03/2011 GMT',
+ '01/04/2011 GMT',
+ '01/05/2011 GMT',
+ '01/06/2011 GMT',
+ ],
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-column-multiple.tsx b/src/pages/components/chart/view/chart-column-multiple.tsx
index 01fe89a..50fd3e3 100644
--- a/src/pages/components/chart/view/chart-column-multiple.tsx
+++ b/src/pages/components/chart/view/chart-column-multiple.tsx
@@ -2,32 +2,32 @@ import Chart from '@/components/chart/chart';
import useChart from '@/components/chart/useChart';
const series = [
- {
- name: 'Net Profit',
- data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
- },
- {
- name: 'Revenue',
- data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
- },
-];
-export default function ChartColumnMultiple() {
- const chartOptions = useChart({
- stroke: {
- show: true,
- width: 2,
- colors: ['transparent'],
- },
- xaxis: {
- categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+ {
+ name: 'Net Profit',
+ data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
},
- tooltip: {
- y: {
- formatter: (value: number) => `$ ${value} thousands`,
- },
+ {
+ name: 'Revenue',
+ data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
},
- plotOptions: { bar: { columnWidth: '36%' } },
- });
+];
+export default function ChartColumnMultiple() {
+ const chartOptions = useChart({
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent'],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+ },
+ tooltip: {
+ y: {
+ formatter: (value: number) => `$ ${value} thousands`,
+ },
+ },
+ plotOptions: { bar: { columnWidth: '36%' } },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-column-negative.tsx b/src/pages/components/chart/view/chart-column-negative.tsx
index 637e372..a234cd8 100644
--- a/src/pages/components/chart/view/chart-column-negative.tsx
+++ b/src/pages/components/chart/view/chart-column-negative.tsx
@@ -3,74 +3,74 @@ import useChart from '@/components/chart/useChart';
import { useThemeToken } from '@/theme/hooks';
const series = [
- {
- name: 'Cash Flow',
- data: [
- 1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07, 5.8, 2,
- 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -48.6, -41.1, -39.6,
- -37.6, -29.4, -21.4, -2.4,
- ],
- },
+ {
+ name: 'Cash Flow',
+ data: [
+ 1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07,
+ 5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -48.6,
+ -41.1, -39.6, -37.6, -29.4, -21.4, -2.4,
+ ],
+ },
];
export default function ChartColumnNegative() {
- const theme = useThemeToken();
- const chartOptions = useChart({
- stroke: { show: false },
- yaxis: {
- labels: {
- formatter: (value: number) => `${value.toFixed(0)}%`,
- },
- },
- xaxis: {
- type: 'datetime',
- categories: [
- '2011-01-01',
- '2011-02-01',
- '2011-03-01',
- '2011-04-01',
- '2011-05-01',
- '2011-06-01',
- '2011-07-01',
- '2011-08-01',
- '2011-09-01',
- '2011-10-01',
- '2011-11-01',
- '2011-12-01',
- '2012-01-01',
- '2012-02-01',
- '2012-03-01',
- '2012-04-01',
- '2012-05-01',
- '2012-06-01',
- '2012-07-01',
- '2012-08-01',
- '2012-09-01',
- '2012-10-01',
- '2012-11-01',
- '2012-12-01',
- '2013-01-01',
- '2013-02-01',
- '2013-03-01',
- '2013-04-01',
- '2013-05-01',
- '2013-06-01',
- '2013-07-01',
- '2013-08-01',
- '2013-09-01',
- ],
- },
- plotOptions: {
- bar: {
- columnWidth: '58%',
- colors: {
- ranges: [
- { from: -100, to: -46, color: theme.colorWarning },
- { from: -45, to: 0, color: theme.colorInfo },
- ],
+ const theme = useThemeToken();
+ const chartOptions = useChart({
+ stroke: { show: false },
+ yaxis: {
+ labels: {
+ formatter: (value: number) => `${value.toFixed(0)}%`,
+ },
},
- },
- },
- });
+ xaxis: {
+ type: 'datetime',
+ categories: [
+ '2011-01-01',
+ '2011-02-01',
+ '2011-03-01',
+ '2011-04-01',
+ '2011-05-01',
+ '2011-06-01',
+ '2011-07-01',
+ '2011-08-01',
+ '2011-09-01',
+ '2011-10-01',
+ '2011-11-01',
+ '2011-12-01',
+ '2012-01-01',
+ '2012-02-01',
+ '2012-03-01',
+ '2012-04-01',
+ '2012-05-01',
+ '2012-06-01',
+ '2012-07-01',
+ '2012-08-01',
+ '2012-09-01',
+ '2012-10-01',
+ '2012-11-01',
+ '2012-12-01',
+ '2013-01-01',
+ '2013-02-01',
+ '2013-03-01',
+ '2013-04-01',
+ '2013-05-01',
+ '2013-06-01',
+ '2013-07-01',
+ '2013-08-01',
+ '2013-09-01',
+ ],
+ },
+ plotOptions: {
+ bar: {
+ columnWidth: '58%',
+ colors: {
+ ranges: [
+ { from: -100, to: -46, color: theme.colorWarning },
+ { from: -45, to: 0, color: theme.colorInfo },
+ ],
+ },
+ },
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-column-single.tsx b/src/pages/components/chart/view/chart-column-single.tsx
index bd71d4e..5413d71 100644
--- a/src/pages/components/chart/view/chart-column-single.tsx
+++ b/src/pages/components/chart/view/chart-column-single.tsx
@@ -3,24 +3,24 @@ import useChart from '@/components/chart/useChart';
const series = [{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }];
export default function ChartColumnSingle() {
- const chartOptions = useChart({
- plotOptions: {
- bar: {
- columnWidth: '16%',
- },
- },
- stroke: {
- show: false,
- },
- xaxis: {
- categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
- },
- tooltip: {
- y: {
- formatter: (value: number) => `$ ${value} thousands`,
- },
- },
- });
+ const chartOptions = useChart({
+ plotOptions: {
+ bar: {
+ columnWidth: '16%',
+ },
+ },
+ stroke: {
+ show: false,
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+ },
+ tooltip: {
+ y: {
+ formatter: (value: number) => `$ ${value} thousands`,
+ },
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-donut.tsx b/src/pages/components/chart/view/chart-donut.tsx
index aad488a..89f01ab 100644
--- a/src/pages/components/chart/view/chart-donut.tsx
+++ b/src/pages/components/chart/view/chart-donut.tsx
@@ -3,25 +3,25 @@ import useChart from '@/components/chart/useChart';
const series = [44, 55, 13, 43];
export default function ChartDonut() {
- const chartOptions = useChart({
- labels: ['Apple', 'Mango', 'Orange', 'Watermelon'],
- stroke: {
- show: false,
- },
- legend: {
- horizontalAlign: 'center',
- },
- tooltip: {
- fillSeriesColor: false,
- },
- plotOptions: {
- pie: {
- donut: {
- size: '90%',
+ const chartOptions = useChart({
+ labels: ['Apple', 'Mango', 'Orange', 'Watermelon'],
+ stroke: {
+ show: false,
},
- },
- },
- });
+ legend: {
+ horizontalAlign: 'center',
+ },
+ tooltip: {
+ fillSeriesColor: false,
+ },
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '90%',
+ },
+ },
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-line.tsx b/src/pages/components/chart/view/chart-line.tsx
index 1e1994a..173cb61 100644
--- a/src/pages/components/chart/view/chart-line.tsx
+++ b/src/pages/components/chart/view/chart-line.tsx
@@ -2,23 +2,23 @@ import Chart from '@/components/chart/chart';
import useChart from '@/components/chart/useChart';
const series = [
- {
- name: 'Desktops',
- data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
- },
+ {
+ name: 'Desktops',
+ data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
+ },
];
export default function ChartLine() {
- const chartOptions = useChart({
- xaxis: {
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
- },
- tooltip: {
- x: {
- show: false,
- },
- marker: { show: false },
- },
- });
+ const chartOptions = useChart({
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+ },
+ tooltip: {
+ x: {
+ show: false,
+ },
+ marker: { show: false },
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-mixed.tsx b/src/pages/components/chart/view/chart-mixed.tsx
index 6d925ae..624f288 100644
--- a/src/pages/components/chart/view/chart-mixed.tsx
+++ b/src/pages/components/chart/view/chart-mixed.tsx
@@ -2,67 +2,67 @@ import Chart from '@/components/chart/chart';
import useChart from '@/components/chart/useChart';
const series = [
- {
- name: 'Team A',
- type: 'column',
- data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
- },
- {
- name: 'Team B',
- type: 'area',
- data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
- },
- {
- name: 'Team C',
- type: 'line',
- data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
- },
-];
-
-export default function ChartMixed() {
- const chartOptions = useChart({
- stroke: {
- width: [0, 2, 3],
- },
- plotOptions: {
- bar: { columnWidth: '20%' },
+ {
+ name: 'Team A',
+ type: 'column',
+ data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
},
- fill: {
- type: ['solid', 'gradient', 'solid'],
+ {
+ name: 'Team B',
+ type: 'area',
+ data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
},
- labels: [
- '01/01/2003',
- '02/01/2003',
- '03/01/2003',
- '04/01/2003',
- '05/01/2003',
- '06/01/2003',
- '07/01/2003',
- '08/01/2003',
- '09/01/2003',
- '10/01/2003',
- '11/01/2003',
- ],
- xaxis: {
- type: 'datetime',
+ {
+ name: 'Team C',
+ type: 'line',
+ data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
},
- yaxis: {
- title: { text: 'Points' },
- min: 0,
- },
- tooltip: {
- shared: true,
- intersect: false,
- y: {
- formatter: (value: number) => {
- if (typeof value !== 'undefined') {
- return `${value.toFixed(0)} points`;
- }
- return value;
+];
+
+export default function ChartMixed() {
+ const chartOptions = useChart({
+ stroke: {
+ width: [0, 2, 3],
},
- },
- },
- });
+ plotOptions: {
+ bar: { columnWidth: '20%' },
+ },
+ fill: {
+ type: ['solid', 'gradient', 'solid'],
+ },
+ labels: [
+ '01/01/2003',
+ '02/01/2003',
+ '03/01/2003',
+ '04/01/2003',
+ '05/01/2003',
+ '06/01/2003',
+ '07/01/2003',
+ '08/01/2003',
+ '09/01/2003',
+ '10/01/2003',
+ '11/01/2003',
+ ],
+ xaxis: {
+ type: 'datetime',
+ },
+ yaxis: {
+ title: { text: 'Points' },
+ min: 0,
+ },
+ tooltip: {
+ shared: true,
+ intersect: false,
+ y: {
+ formatter: (value: number) => {
+ if (typeof value !== 'undefined') {
+ return `${value.toFixed(0)} points`;
+ }
+ return value;
+ },
+ },
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-pie.tsx b/src/pages/components/chart/view/chart-pie.tsx
index ab8a7ac..5975609 100644
--- a/src/pages/components/chart/view/chart-pie.tsx
+++ b/src/pages/components/chart/view/chart-pie.tsx
@@ -3,33 +3,33 @@ import useChart from '@/components/chart/useChart';
const series = [44, 55, 13, 43];
export default function ChartPie() {
- const chartOptions = useChart({
- labels: ['America', 'Asia', 'Europe', 'Africa'],
- legend: {
- horizontalAlign: 'center',
- },
- stroke: {
- show: false,
- },
- dataLabels: {
- enabled: true,
- dropShadow: {
- enabled: false,
- },
- },
- tooltip: {
- fillSeriesColor: false,
- },
- plotOptions: {
- pie: {
- donut: {
- labels: {
+ const chartOptions = useChart({
+ labels: ['America', 'Asia', 'Europe', 'Africa'],
+ legend: {
+ horizontalAlign: 'center',
+ },
+ stroke: {
show: false,
- },
},
- },
- },
- });
+ dataLabels: {
+ enabled: true,
+ dropShadow: {
+ enabled: false,
+ },
+ },
+ tooltip: {
+ fillSeriesColor: false,
+ },
+ plotOptions: {
+ pie: {
+ donut: {
+ labels: {
+ show: false,
+ },
+ },
+ },
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-radar.tsx b/src/pages/components/chart/view/chart-radar.tsx
index 78f84be..cba33ad 100644
--- a/src/pages/components/chart/view/chart-radar.tsx
+++ b/src/pages/components/chart/view/chart-radar.tsx
@@ -3,42 +3,42 @@ import useChart from '@/components/chart/useChart';
import { useThemeToken } from '@/theme/hooks';
const series = [
- {
- name: 'Series 1',
- data: [80, 50, 30, 40, 100, 20],
- },
- {
- name: 'Series 2',
- data: [20, 30, 40, 80, 20, 80],
- },
- {
- name: 'Series 3',
- data: [44, 76, 78, 13, 43, 10],
- },
-];
-export default function ChartRadar() {
- const { colorText } = useThemeToken();
- const chartOptions = useChart({
- stroke: {
- width: 2,
+ {
+ name: 'Series 1',
+ data: [80, 50, 30, 40, 100, 20],
},
- fill: {
- opacity: 0.48,
+ {
+ name: 'Series 2',
+ data: [20, 30, 40, 80, 20, 80],
},
- legend: {
- floating: true,
- position: 'bottom',
- horizontalAlign: 'center',
+ {
+ name: 'Series 3',
+ data: [44, 76, 78, 13, 43, 10],
},
- xaxis: {
- categories: ['2011', '2012', '2013', '2014', '2015', '2016'],
- labels: {
- style: {
- colors: [colorText, colorText, colorText, colorText, colorText, colorText],
+];
+export default function ChartRadar() {
+ const { colorText } = useThemeToken();
+ const chartOptions = useChart({
+ stroke: {
+ width: 2,
},
- },
- },
- });
+ fill: {
+ opacity: 0.48,
+ },
+ legend: {
+ floating: true,
+ position: 'bottom',
+ horizontalAlign: 'center',
+ },
+ xaxis: {
+ categories: ['2011', '2012', '2013', '2014', '2015', '2016'],
+ labels: {
+ style: {
+ colors: [colorText, colorText, colorText, colorText, colorText, colorText],
+ },
+ },
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/chart/view/chart-radial.tsx b/src/pages/components/chart/view/chart-radial.tsx
index 47aebfe..5324d4b 100644
--- a/src/pages/components/chart/view/chart-radial.tsx
+++ b/src/pages/components/chart/view/chart-radial.tsx
@@ -4,34 +4,34 @@ import { fNumber } from '@/utils/format-number';
const series = [44, 55];
export default function ChartRadial() {
- const chartOptions = useChart({
- chart: {
- sparkline: {
- enabled: true,
- },
- },
- labels: ['Apples', 'Oranges'],
- legend: {
- floating: true,
- position: 'bottom',
- horizontalAlign: 'center',
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '68%',
+ const chartOptions = useChart({
+ chart: {
+ sparkline: {
+ enabled: true,
+ },
},
- dataLabels: {
- value: {
- offsetY: 16,
- },
- total: {
- formatter: () => fNumber(2324),
- },
+ labels: ['Apples', 'Oranges'],
+ legend: {
+ floating: true,
+ position: 'bottom',
+ horizontalAlign: 'center',
},
- },
- },
- });
+ plotOptions: {
+ radialBar: {
+ hollow: {
+ size: '68%',
+ },
+ dataLabels: {
+ value: {
+ offsetY: 16,
+ },
+ total: {
+ formatter: () => fNumber(2324),
+ },
+ },
+ },
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/components/editor/index.tsx b/src/pages/components/editor/index.tsx
index da8e08a..029c451 100644
--- a/src/pages/components/editor/index.tsx
+++ b/src/pages/components/editor/index.tsx
@@ -5,26 +5,26 @@ import Editor from '@/components/editor';
import { useThemeToken } from '@/theme/hooks';
export default function EditorPage() {
- const [quillSimple, setQuillSimple] = useState('');
- const [quillFull, setQuillFull] = useState('');
- const { colorPrimary } = useThemeToken();
+ const [quillSimple, setQuillSimple] = useState('');
+ const [quillFull, setQuillFull] = useState('');
+ const { colorPrimary } = useThemeToken();
- return (
- <>
-
- https://github.com/zenoamaro/react-quill
-
-
-
-
-
-
-
-
- >
- );
+ return (
+ <>
+
+ https://github.com/zenoamaro/react-quill
+
+
+
+
+
+
+
+
+ >
+ );
}
diff --git a/src/pages/components/icon/index.tsx b/src/pages/components/icon/index.tsx
index 71b4d66..94ca1e2 100644
--- a/src/pages/components/icon/index.tsx
+++ b/src/pages/components/icon/index.tsx
@@ -5,66 +5,86 @@ import { Iconify, SvgIcon } from '@/components/icon';
import { useThemeToken } from '@/theme/hooks';
export default function IconPage() {
- const { colorPrimary, colorInfo, colorSuccess, colorWarning, colorError } = useThemeToken();
- return (
-
-
- For more info
-
- click here
-
+ const { colorPrimary, colorInfo, colorSuccess, colorWarning, colorError } = useThemeToken();
+ return (
+
+
+ For more info
+
+ click here
+
-
- {`import { StepBackwardOutlined } from '@ant-design/icons';`}
- {` `}
-
+
+ {`import { StepBackwardOutlined } from '@ant-design/icons';`}
+ {` `}
+
-
-
-
-
-
- Simply beautiful open source icons. For more info
-
- click here
-
+
+
+
+
+
+ Simply beautiful open source icons. For more info
+
+ click here
+
-
- {` `}
-
+
+ {` `}
+
-
-
-
-
-
-
-
-
-
- For more info
-
- click here
-
+
+
+
+
+
+
+
+
+
+ For more info
+
+ click here
+
-
- {` `}
-
+
+ {` `}
+
-
-
-
-
-
-
-
-
-
- );
+
+
+
+
+
+
+
+
+
+ );
}
diff --git a/src/pages/components/markdown/index.tsx b/src/pages/components/markdown/index.tsx
index 9256e61..04b11f7 100644
--- a/src/pages/components/markdown/index.tsx
+++ b/src/pages/components/markdown/index.tsx
@@ -67,20 +67,20 @@ ReactDOM.render(
`;
export default function MarkdownPage() {
- const [content] = useState(TEXT);
- const { colorPrimary } = useThemeToken();
- return (
- <>
-
- https://github.com/remarkjs/react-markdown
-
-
- {content}
-
- >
- );
+ const [content] = useState(TEXT);
+ const { colorPrimary } = useThemeToken();
+ return (
+ <>
+
+ https://github.com/remarkjs/react-markdown
+
+
+ {content}
+
+ >
+ );
}
diff --git a/src/pages/components/multi-language/index.tsx b/src/pages/components/multi-language/index.tsx
index 634da2a..b5d93cd 100644
--- a/src/pages/components/multi-language/index.tsx
+++ b/src/pages/components/multi-language/index.tsx
@@ -7,37 +7,40 @@ import { useThemeToken } from '@/theme/hooks';
import { LocalEnum } from '#/enum';
export default function MultiLanguagePage() {
- const {
- setLocale,
- locale,
- language: { icon, label },
- } = useLocale();
+ const {
+ setLocale,
+ locale,
+ language: { icon, label },
+ } = useLocale();
- const { colorPrimary } = useThemeToken();
+ const { colorPrimary } = useThemeToken();
- return (
-
-
- https://www.i18next.com
-
-
- https://ant.design/docs/react/i18n-cn
-
-
- setLocale(e.target.value)} value={locale}>
- English
- Chinese
-
+ return (
+
+
+ https://www.i18next.com
+
+
+ https://ant.design/docs/react/i18n-cn
+
+
+ setLocale(e.target.value)} value={locale}>
+ English
+ Chinese
+
-
-
- {label}
-
-
+
+
+ {label}
+
+
-
-
-
-
- );
+
+
+
+
+ );
}
diff --git a/src/pages/components/scroll/index.tsx b/src/pages/components/scroll/index.tsx
index 31f7a07..f54eae9 100644
--- a/src/pages/components/scroll/index.tsx
+++ b/src/pages/components/scroll/index.tsx
@@ -4,10 +4,10 @@ import ScrollbarView from './views/scroll-bar';
import ScrollProgressView from './views/scroll-progress';
export default function ScrollPage() {
- const TABS: TabsProps['items'] = [
- { key: 'scrollbar', label: 'Scrollbar', children: },
- { key: 'scroll-progress', label: 'ScrollProgress', children: },
- ];
+ const TABS: TabsProps['items'] = [
+ { key: 'scrollbar', label: 'Scrollbar', children: },
+ { key: 'scroll-progress', label: 'ScrollProgress', children: },
+ ];
- return ;
+ return ;
}
diff --git a/src/pages/components/scroll/views/scroll-bar/index.tsx b/src/pages/components/scroll/views/scroll-bar/index.tsx
index 0eef12a..df4d95b 100644
--- a/src/pages/components/scroll/views/scroll-bar/index.tsx
+++ b/src/pages/components/scroll/views/scroll-bar/index.tsx
@@ -6,32 +6,32 @@ import { useThemeToken } from '@/theme/hooks';
const TEXT = faker.lorem.paragraphs({ min: 20, max: 30 });
export default function ScrollbarView() {
- const { colorPrimary } = useThemeToken();
- return (
- <>
-
- https://grsmto.github.io/simplebar/
-
-
-
-
-
- {TEXT}
-
-
-
-
-
-
- {TEXT}
-
-
-
-
- >
- );
+ const { colorPrimary } = useThemeToken();
+ return (
+ <>
+
+ https://grsmto.github.io/simplebar/
+
+
+
+
+
+ {TEXT}
+
+
+
+
+
+
+ {TEXT}
+
+
+
+
+ >
+ );
}
diff --git a/src/pages/components/scroll/views/scroll-progress/index.tsx b/src/pages/components/scroll/views/scroll-progress/index.tsx
index d4aaae6..2376ad9 100644
--- a/src/pages/components/scroll/views/scroll-progress/index.tsx
+++ b/src/pages/components/scroll/views/scroll-progress/index.tsx
@@ -8,27 +8,27 @@ import { useThemeToken } from '@/theme/hooks';
const TEXT = faker.lorem.paragraphs({ min: 20, max: 30 });
export default function ScrollProgressView() {
- const containerRef = useRef(null);
- const containerScroll = useScroll({ container: containerRef });
+ const containerRef = useRef(null);
+ const containerScroll = useScroll({ container: containerRef });
- const { colorPrimary } = useThemeToken();
- return (
- <>
-
- https://www.framer.com/motion/
-
-
-
-
- {[...Array(4)].map((_, index) => (
-
{TEXT}
- ))}
-
-
- >
- );
+ const { colorPrimary } = useThemeToken();
+ return (
+ <>
+
+ https://www.framer.com/motion/
+
+
+
+
+ {[...Array(4)].map((_, index) => (
+
{TEXT}
+ ))}
+
+
+ >
+ );
}
diff --git a/src/pages/components/upload/index.tsx b/src/pages/components/upload/index.tsx
index 9791bfe..b348b11 100644
--- a/src/pages/components/upload/index.tsx
+++ b/src/pages/components/upload/index.tsx
@@ -5,61 +5,61 @@ import { Iconify } from '@/components/icon';
import { Upload, UploadAvatar, UploadBox } from '@/components/upload';
export default function UploadPage() {
- const [thumbnail, setThumbnail] = useState(false);
+ const [thumbnail, setThumbnail] = useState(false);
- const onChange = (checked: boolean) => {
- setThumbnail(checked);
- };
+ const onChange = (checked: boolean) => {
+ setThumbnail(checked);
+ };
- const ThumbnailSwitch = ;
+ const ThumbnailSwitch = ;
- const boxPlaceHolder = (
-
-
-
- Upload File
-
-
- );
- const UploadFileTab = (
-
-
-
-
-
-
-
-
- );
- const UploadAvatarTab = (
-
-
-
- );
- const UploadBoxTab = (
-
-
-
-
-
-
-
-
- );
+ const boxPlaceHolder = (
+
+
+
+ Upload File
+
+
+ );
+ const UploadFileTab = (
+
+
+
+
+
+
+
+
+ );
+ const UploadAvatarTab = (
+
+
+
+ );
+ const UploadBoxTab = (
+
+
+
+
+
+
+
+
+ );
- const TABS: TabsProps['items'] = [
- { key: 'upload--file', label: 'Upload Single File', children: UploadFileTab },
- { key: 'upload-avatar', label: 'Upload Avatar', children: UploadAvatarTab },
- { key: 'upload-box', label: 'Upload Box', children: UploadBoxTab },
- ];
+ const TABS: TabsProps['items'] = [
+ { key: 'upload--file', label: 'Upload Single File', children: UploadFileTab },
+ { key: 'upload-avatar', label: 'Upload Avatar', children: UploadAvatarTab },
+ { key: 'upload-box', label: 'Upload Box', children: UploadBoxTab },
+ ];
- return ;
+ return ;
}
diff --git a/src/pages/dashboard/analysis/analysis-card.tsx b/src/pages/dashboard/analysis/analysis-card.tsx
index 7736ca6..a50614e 100644
--- a/src/pages/dashboard/analysis/analysis-card.tsx
+++ b/src/pages/dashboard/analysis/analysis-card.tsx
@@ -1,23 +1,23 @@
import { CSSProperties } from 'react';
type Props = {
- cover: string;
- subtitle: string;
- title: string;
- style?: CSSProperties;
+ cover: string;
+ subtitle: string;
+ title: string;
+ style?: CSSProperties;
};
export default function AnalysisCard({ cover, subtitle, title, style }: Props) {
- return (
-
-
-
{title}
-
{subtitle}
-
- );
+ return (
+
+
+
{title}
+
{subtitle}
+
+ );
}
diff --git a/src/pages/dashboard/analysis/analysis-news.tsx b/src/pages/dashboard/analysis/analysis-news.tsx
index c6b58d0..d1f3c9d 100644
--- a/src/pages/dashboard/analysis/analysis-news.tsx
+++ b/src/pages/dashboard/analysis/analysis-news.tsx
@@ -2,34 +2,36 @@ import { faker } from '@faker-js/faker';
import { List, Avatar } from 'antd';
const data = [
- {
- title: faker.lorem.words(),
- },
- {
- title: faker.lorem.words(),
- },
- {
- title: faker.lorem.words(),
- },
- {
- title: faker.lorem.words(),
- },
+ {
+ title: faker.lorem.words(),
+ },
+ {
+ title: faker.lorem.words(),
+ },
+ {
+ title: faker.lorem.words(),
+ },
+ {
+ title: faker.lorem.words(),
+ },
];
export default function AnalysisNews() {
- return (
- (
-
- }
- title={item.title}
- description={faker.lorem.sentence()}
- />
-
- )}
- />
- );
+ return (
+ (
+
+
+ }
+ title={item.title}
+ description={faker.lorem.sentence()}
+ />
+
+ )}
+ />
+ );
}
diff --git a/src/pages/dashboard/analysis/analysis-order-timeline.tsx b/src/pages/dashboard/analysis/analysis-order-timeline.tsx
index c8abe6b..a6be761 100644
--- a/src/pages/dashboard/analysis/analysis-order-timeline.tsx
+++ b/src/pages/dashboard/analysis/analysis-order-timeline.tsx
@@ -3,66 +3,66 @@ import { Timeline, Typography } from 'antd';
import { useThemeToken } from '@/theme/hooks';
export default function AnalysisOrderTimeline() {
- const theme = useThemeToken();
- return (
-
- 1983, orders,$4220
-
- 08 Oct 2023 7:19 PM
-
-
- ),
- },
- {
- color: theme.colorPrimaryActive,
- children: (
-
- 12 Invoices have been paid
-
- 07 Oct 2023 6:19 PM
-
-
- ),
- },
- {
- color: theme.colorInfo,
- children: (
-
- Order #37745 from September
-
- 06 Oct 2023 5:19 PM
-
-
- ),
- },
- {
- color: theme.colorWarning,
- children: (
-
- New order placed #XF-2356
-
- 05 Oct 2023 4:19 PM
-
-
- ),
- },
- {
- color: theme.colorError,
- children: (
-
- New order placed #XF-2346
-
- 04 Oct 2023 3:19 PM
-
-
- ),
- },
- ]}
- />
- );
+ const theme = useThemeToken();
+ return (
+
+ 1983, orders,$4220
+
+ 08 Oct 2023 7:19 PM
+
+
+ ),
+ },
+ {
+ color: theme.colorPrimaryActive,
+ children: (
+
+ 12 Invoices have been paid
+
+ 07 Oct 2023 6:19 PM
+
+
+ ),
+ },
+ {
+ color: theme.colorInfo,
+ children: (
+
+ Order #37745 from September
+
+ 06 Oct 2023 5:19 PM
+
+
+ ),
+ },
+ {
+ color: theme.colorWarning,
+ children: (
+
+ New order placed #XF-2356
+
+ 05 Oct 2023 4:19 PM
+
+
+ ),
+ },
+ {
+ color: theme.colorError,
+ children: (
+
+ New order placed #XF-2346
+
+ 04 Oct 2023 3:19 PM
+
+
+ ),
+ },
+ ]}
+ />
+ );
}
diff --git a/src/pages/dashboard/analysis/analysis-tasks.tsx b/src/pages/dashboard/analysis/analysis-tasks.tsx
index e2f381d..947d8b9 100644
--- a/src/pages/dashboard/analysis/analysis-tasks.tsx
+++ b/src/pages/dashboard/analysis/analysis-tasks.tsx
@@ -4,45 +4,45 @@ import { List, Checkbox } from 'antd';
import { IconButton, Iconify } from '@/components/icon';
export default function AnalysisTasks() {
- const data = [
- {
- task: faker.lorem.words(),
- checked: false,
- },
- {
- task: faker.lorem.words(),
- checked: true,
- },
- {
- task: faker.lorem.words(),
- checked: false,
- },
- {
- task: faker.lorem.words(),
- checked: false,
- },
- ];
- return (
- (
-
-
- ,
- ]}
- >
- {
- item.checked = e.target.checked;
- }}
- >
- {item.task}
-
-
- )}
- />
- );
+ const data = [
+ {
+ task: faker.lorem.words(),
+ checked: false,
+ },
+ {
+ task: faker.lorem.words(),
+ checked: true,
+ },
+ {
+ task: faker.lorem.words(),
+ checked: false,
+ },
+ {
+ task: faker.lorem.words(),
+ checked: false,
+ },
+ ];
+ return (
+ (
+
+
+ ,
+ ]}
+ >
+ {
+ item.checked = e.target.checked;
+ }}
+ >
+ {item.task}
+
+
+ )}
+ />
+ );
}
diff --git a/src/pages/dashboard/analysis/analysis-traffic-card.tsx b/src/pages/dashboard/analysis/analysis-traffic-card.tsx
index e044c40..a295d20 100644
--- a/src/pages/dashboard/analysis/analysis-traffic-card.tsx
+++ b/src/pages/dashboard/analysis/analysis-traffic-card.tsx
@@ -3,25 +3,25 @@ import { ReactNode } from 'react';
import { useThemeToken } from '@/theme/hooks';
type Props = {
- icon: ReactNode;
- title: string;
- subtitle: string;
+ icon: ReactNode;
+ title: string;
+ subtitle: string;
};
export default function AnalysisTrafficCard({ icon, title, subtitle }: Props) {
- const theme = useThemeToken();
- return (
-
-
{icon}
-
{title}
-
- {subtitle}
-
-
- );
+ const theme = useThemeToken();
+ return (
+
+
{icon}
+
{title}
+
+ {subtitle}
+
+
+ );
}
diff --git a/src/pages/dashboard/analysis/index.tsx b/src/pages/dashboard/analysis/index.tsx
index 84c6a61..d9506de 100644
--- a/src/pages/dashboard/analysis/index.tsx
+++ b/src/pages/dashboard/analysis/index.tsx
@@ -19,155 +19,177 @@ import AnalysisTasks from './analysis-tasks';
import AnalysisTrafficCard from './analysis-traffic-card';
function Analysis() {
- const theme = useThemeToken();
- return (
- <>
- Hi, Welcome back 👋
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ const theme = useThemeToken();
+ return (
+ <>
+ Hi, Welcome back 👋
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ }
+ title="1.95k"
+ subtitle="FaceBook"
+ />
+
-
-
-
-
-
- }
- title="1.95k"
- subtitle="FaceBook"
- />
-
+
+
+ }
+ title="9.12k"
+ subtitle="Google"
+ />
+
-
- }
- title="9.12k"
- subtitle="Google"
- />
-
+
+
+ }
+ title="6.98k"
+ subtitle="Linkedin"
+ />
+
-
- }
- title="6.98k"
- subtitle="Linkedin"
- />
-
+
+
+ }
+ title="8.49k"
+ subtitle="Twitter"
+ />
+
+
+
+
-
- }
- title="8.49k"
- subtitle="Twitter"
- />
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- >
- );
+ >
+ );
}
export default Analysis;
diff --git a/src/pages/dashboard/workbench/area-download.tsx b/src/pages/dashboard/workbench/area-download.tsx
index a7d00cc..f84e6de 100644
--- a/src/pages/dashboard/workbench/area-download.tsx
+++ b/src/pages/dashboard/workbench/area-download.tsx
@@ -6,60 +6,60 @@ import Chart from '@/components/chart/chart';
import useChart from '@/components/chart/useChart';
export default function AreaDownload() {
- const [year, setYear] = useState('2023');
- const series: Record = {
- '2022': [
- { name: 'China', data: [10, 41, 35, 51, 49, 61, 69, 91, 148, 35, 51] },
- { name: 'America', data: [10, 34, 13, 56, 77, 88, 99, 45, 13, 56, 77] },
- ],
+ const [year, setYear] = useState('2023');
+ const series: Record = {
+ '2022': [
+ { name: 'China', data: [10, 41, 35, 51, 49, 61, 69, 91, 148, 35, 51] },
+ { name: 'America', data: [10, 34, 13, 56, 77, 88, 99, 45, 13, 56, 77] },
+ ],
- '2023': [
- { name: 'China', data: [51, 35, 41, 10, 91, 69, 62, 148, 91, 35, 51] },
- { name: 'America', data: [56, 13, 34, 10, 77, 99, 88, 45, 13, 56, 77] },
- ],
- };
- return (
-
-
- Area Installed
- setYear(value)}
- options={[
- { value: 2023, label: '2023' },
- { value: 2022, label: '2022' },
- ]}
- />
-
-
-
-
-
- );
+ '2023': [
+ { name: 'China', data: [51, 35, 41, 10, 91, 69, 62, 148, 91, 35, 51] },
+ { name: 'America', data: [56, 13, 34, 10, 77, 99, 88, 45, 13, 56, 77] },
+ ],
+ };
+ return (
+
+
+ Area Installed
+ setYear(value)}
+ options={[
+ { value: 2023, label: '2023' },
+ { value: 2022, label: '2022' },
+ ]}
+ />
+
+
+
+
+
+ );
}
function ChartArea({ series }: { series: ApexAxisChartSeries }) {
- const chartOptions = useChart({
- xaxis: {
- type: 'category',
- categories: [
- 'Jan',
- 'Feb',
- 'Mar',
- 'Apr',
- 'May',
- 'Jun',
- 'Jut',
- 'Aug',
- 'Sep',
- 'Oct',
- 'Nov',
- 'Dec',
- ],
- },
- tooltip: {},
- });
+ const chartOptions = useChart({
+ xaxis: {
+ type: 'category',
+ categories: [
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jut',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+ ],
+ },
+ tooltip: {},
+ });
- return ;
+ return ;
}
diff --git a/src/pages/dashboard/workbench/banner-card.tsx b/src/pages/dashboard/workbench/banner-card.tsx
index cbcb8af..f5bd4be 100644
--- a/src/pages/dashboard/workbench/banner-card.tsx
+++ b/src/pages/dashboard/workbench/banner-card.tsx
@@ -6,250 +6,250 @@ import { useUserInfo } from '@/store/userStore';
import { useThemeToken } from '@/theme/hooks';
export default function BannerCard() {
- const { account } = useUserInfo();
- const themeToken = useThemeToken();
+ const { account } = useUserInfo();
+ const themeToken = useThemeToken();
- const bg = `linear-gradient(135deg, ${Color(themeToken.colorPrimaryHover).alpha(0.2)}, ${Color(
- themeToken.colorPrimary,
- ).alpha(0.2)}) rgb(255, 255, 255)`;
+ const bg = `linear-gradient(135deg, ${Color(themeToken.colorPrimaryHover).alpha(0.2)}, ${Color(
+ themeToken.colorPrimary,
+ ).alpha(0.2)}) rgb(255, 255, 255)`;
- return (
-
-
-
-
Welcome back 👋
- {account}
-
-
- If you are going to use a passage of Lorem Ipsum, you need to be sure there is not
- anything.
-
-
- Go Now
-
-
+
+
+
Welcome back 👋
+ {account}
+
+
+ If you are going to use a passage of Lorem Ipsum, you need to be sure there is
+ not anything.
+
+
+ Go Now
+
+
-
-
-
-
- );
+
+
+
+
+ );
}
function BannerSvg() {
- const { colorPrimary, colorPrimaryActive, colorPrimaryHover } = useThemeToken();
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
+ const { colorPrimary, colorPrimaryActive, colorPrimaryHover } = useThemeToken();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
}
diff --git a/src/pages/dashboard/workbench/carousel-card.tsx b/src/pages/dashboard/workbench/carousel-card.tsx
index 1aa59cd..2e6a92a 100644
--- a/src/pages/dashboard/workbench/carousel-card.tsx
+++ b/src/pages/dashboard/workbench/carousel-card.tsx
@@ -1,28 +1,28 @@
import { Carousel } from 'antd';
export default function CarouselCard() {
- const contentStyle: React.CSSProperties = {
- margin: 0,
- height: '160px',
- color: '#000000',
- lineHeight: '160px',
- textAlign: 'center',
- background: '#364d79',
- };
- return (
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
- );
+ const contentStyle: React.CSSProperties = {
+ margin: 0,
+ height: '160px',
+ color: '#000000',
+ lineHeight: '160px',
+ textAlign: 'center',
+ background: '#364d79',
+ };
+ return (
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+ );
}
diff --git a/src/pages/dashboard/workbench/conversion_applications.tsx b/src/pages/dashboard/workbench/conversion_applications.tsx
index b7ebaab..01a3140 100644
--- a/src/pages/dashboard/workbench/conversion_applications.tsx
+++ b/src/pages/dashboard/workbench/conversion_applications.tsx
@@ -4,62 +4,62 @@ import { Iconify } from '@/components/icon';
import { useThemeToken } from '@/theme/hooks';
export function Conversion() {
- const { colorPrimaryActive, colorPrimaryBorder } = useThemeToken();
- return (
-
- );
+ const { colorPrimaryActive, colorPrimaryBorder } = useThemeToken();
+ return (
+
+ );
}
export function Applications() {
- const { colorInfoActive, colorInfoBorder } = useThemeToken();
- return (
-
- );
+ const { colorInfoActive, colorInfoBorder } = useThemeToken();
+ return (
+
+ );
}
type Props = {
- percent: number;
- title: string;
- subtitle: string;
- iconify: string;
- bg?: string;
- strokeColor?: string;
+ percent: number;
+ title: string;
+ subtitle: string;
+ iconify: string;
+ bg?: string;
+ strokeColor?: string;
};
function Basic({ percent, title, subtitle, iconify, bg, strokeColor }: Props) {
- const { colorBgBase } = useThemeToken();
- const format = (val?: number) => {val}% ;
- return (
-
-
-
- {title}
- {subtitle}
-
-
-
-
-
- );
+ const { colorBgBase } = useThemeToken();
+ const format = (val?: number) => {val}% ;
+ return (
+
+
+
+ {title}
+ {subtitle}
+
+
+
+
+
+ );
}
diff --git a/src/pages/dashboard/workbench/current-download.tsx b/src/pages/dashboard/workbench/current-download.tsx
index 2198a9b..cd3876f 100644
--- a/src/pages/dashboard/workbench/current-download.tsx
+++ b/src/pages/dashboard/workbench/current-download.tsx
@@ -5,52 +5,52 @@ import Chart from '@/components/chart/chart';
import useChart from '@/components/chart/useChart';
export default function CurrentDownload() {
- return (
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+ );
}
const series = [44, 55, 13, 43];
function ChartDonut() {
- const chartOptions = useChart({
- labels: ['Mac', 'Window', 'IOS', 'Android'],
- stroke: {
- show: false,
- },
- legend: {
- position: 'bottom',
- horizontalAlign: 'center',
- },
- tooltip: {
- fillSeriesColor: false,
- },
- chart: {
- width: 240,
- },
- plotOptions: {
- pie: {
- donut: {
- size: '90%',
- labels: {
- total: {
- fontSize: '12px',
- },
- value: {
- fontSize: '18px',
- fontWeight: 700,
+ const chartOptions = useChart({
+ labels: ['Mac', 'Window', 'IOS', 'Android'],
+ stroke: {
+ show: false,
+ },
+ legend: {
+ position: 'bottom',
+ horizontalAlign: 'center',
+ },
+ tooltip: {
+ fillSeriesColor: false,
+ },
+ chart: {
+ width: 240,
+ },
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '90%',
+ labels: {
+ total: {
+ fontSize: '12px',
+ },
+ value: {
+ fontSize: '18px',
+ fontWeight: 700,
+ },
+ },
+ },
},
- },
},
- },
- },
- });
+ });
- return ;
+ return ;
}
diff --git a/src/pages/dashboard/workbench/index.tsx b/src/pages/dashboard/workbench/index.tsx
index deb3e6c..0978790 100644
--- a/src/pages/dashboard/workbench/index.tsx
+++ b/src/pages/dashboard/workbench/index.tsx
@@ -11,81 +11,81 @@ import TopRelated from './top-related';
import TotalCard from './total-card';
function Workbench() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
- >
- );
+
+
+
+
+ >
+ );
}
export default Workbench;
diff --git a/src/pages/dashboard/workbench/new-invoice.tsx b/src/pages/dashboard/workbench/new-invoice.tsx
index 1ebc0e8..4e30666 100644
--- a/src/pages/dashboard/workbench/new-invoice.tsx
+++ b/src/pages/dashboard/workbench/new-invoice.tsx
@@ -7,105 +7,105 @@ import Scrollbar from '@/components/scrollbar';
import ProTag from '@/theme/antd/components/tag';
interface DataType {
- key: string;
- id: string;
- category: string;
- price: string;
- status: string;
+ key: string;
+ id: string;
+ category: string;
+ price: string;
+ status: string;
}
export default function NewInvoice() {
- const columns: ColumnsType = [
- {
- title: 'InvoiceId',
- dataIndex: 'id',
- key: 'id',
- render: (text) => {text} ,
- },
- {
- title: 'Category',
- dataIndex: 'category',
- key: 'category',
- },
- {
- title: 'Price',
- dataIndex: 'price',
- key: 'price',
- render: (text) => {text} ,
- },
- {
- title: 'Status',
- key: 'status',
- dataIndex: 'status',
- render: (_status) => {
- const status = _status as string;
- let color = 'success';
- if (status === 'Progress') color = 'gold';
- if (status === 'Out of Date') color = 'red';
- return {status} ;
- },
- },
- {
- title: 'Action',
- key: 'action',
- render: () => (
-
-
-
-
-
- ),
- },
- ];
+ const columns: ColumnsType = [
+ {
+ title: 'InvoiceId',
+ dataIndex: 'id',
+ key: 'id',
+ render: (text) => {text} ,
+ },
+ {
+ title: 'Category',
+ dataIndex: 'category',
+ key: 'category',
+ },
+ {
+ title: 'Price',
+ dataIndex: 'price',
+ key: 'price',
+ render: (text) => {text} ,
+ },
+ {
+ title: 'Status',
+ key: 'status',
+ dataIndex: 'status',
+ render: (_status) => {
+ const status = _status as string;
+ let color = 'success';
+ if (status === 'Progress') color = 'gold';
+ if (status === 'Out of Date') color = 'red';
+ return {status} ;
+ },
+ },
+ {
+ title: 'Action',
+ key: 'action',
+ render: () => (
+
+
+
+
+
+ ),
+ },
+ ];
- const data: DataType[] = [
- {
- key: '1',
- id: 'INV-1990',
- category: 'Android',
- price: '$83.74',
- status: 'Paid',
- },
- {
- key: '2',
- id: 'INV-1991',
- category: 'Mac',
- price: '$97.14',
- status: 'Out of Date',
- },
- {
- key: '3',
- id: 'INV-1992',
- category: 'Windows',
- price: '$68.71',
- status: 'Progress',
- },
- {
- key: '4',
- id: 'INV-1993',
- category: 'Android',
- price: '$85.21',
- status: 'Paid',
- },
- {
- key: '5',
- id: 'INV-1994',
- category: 'Mac',
- price: '$53.17',
- status: 'Paid',
- },
- ];
+ const data: DataType[] = [
+ {
+ key: '1',
+ id: 'INV-1990',
+ category: 'Android',
+ price: '$83.74',
+ status: 'Paid',
+ },
+ {
+ key: '2',
+ id: 'INV-1991',
+ category: 'Mac',
+ price: '$97.14',
+ status: 'Out of Date',
+ },
+ {
+ key: '3',
+ id: 'INV-1992',
+ category: 'Windows',
+ price: '$68.71',
+ status: 'Progress',
+ },
+ {
+ key: '4',
+ id: 'INV-1993',
+ category: 'Android',
+ price: '$85.21',
+ status: 'Paid',
+ },
+ {
+ key: '5',
+ id: 'INV-1994',
+ category: 'Mac',
+ price: '$53.17',
+ status: 'Paid',
+ },
+ ];
- return (
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+ );
}
diff --git a/src/pages/dashboard/workbench/top-authors.tsx b/src/pages/dashboard/workbench/top-authors.tsx
index c4bf84d..be2ee87 100644
--- a/src/pages/dashboard/workbench/top-authors.tsx
+++ b/src/pages/dashboard/workbench/top-authors.tsx
@@ -7,61 +7,63 @@ import { Iconify } from '@/components/icon';
import { useThemeToken } from '@/theme/hooks';
export default function TopAuthor() {
- const themeToken = useThemeToken();
- const getTrophyIconColor = (index: number) => {
- switch (index) {
- case 1:
- return {
- color: themeToken.colorInfo,
- bg: themeToken.colorInfoBgHover,
- };
- case 2: {
- return {
- color: themeToken.colorError,
- bg: themeToken.colorErrorBgHover,
- };
- }
- default:
- return {
- color: themeToken.colorPrimary,
- bg: themeToken.colorPrimaryBgHover,
- };
- }
- };
- return (
-
-
-
- {new Array(3).fill('').map((_, index) => (
-
-
-
-
{faker.person.fullName()}
-
-
-
- {faker.number.float({ min: 3, max: 9, precision: 3 })}k
-
-
-
+ const themeToken = useThemeToken();
+ const getTrophyIconColor = (index: number) => {
+ switch (index) {
+ case 1:
+ return {
+ color: themeToken.colorInfo,
+ bg: themeToken.colorInfoBgHover,
+ };
+ case 2: {
+ return {
+ color: themeToken.colorError,
+ bg: themeToken.colorErrorBgHover,
+ };
+ }
+ default:
+ return {
+ color: themeToken.colorPrimary,
+ bg: themeToken.colorPrimaryBgHover,
+ };
+ }
+ };
+ return (
+
+
+
+ {new Array(3).fill('').map((_, index) => (
+
+
+
+
{faker.person.fullName()}
+
+
+
+ {faker.number.float({ min: 3, max: 9, precision: 3 })}k
+
+
+
-
-
-
-
- ))}
-
-
- );
+
+
+
+
+ ))}
+
+
+ );
}
diff --git a/src/pages/dashboard/workbench/top-installed.tsx b/src/pages/dashboard/workbench/top-installed.tsx
index b9bb298..2d27555 100644
--- a/src/pages/dashboard/workbench/top-installed.tsx
+++ b/src/pages/dashboard/workbench/top-installed.tsx
@@ -5,85 +5,85 @@ import Card from '@/components/card';
import { Iconify } from '@/components/icon';
const dataSource = [
- {
- country: 'Germany',
- iconify: 'twemoji:flag-germany',
- android: '9.91k',
- windows: '1.95k',
- ios: '1.95k',
- },
- {
- country: 'China',
- iconify: 'twemoji:flag-china',
- android: '1.95k',
- windows: '9.25k',
- ios: '7.95k',
- },
- {
- country: 'Australia',
- iconify: 'twemoji:flag-australia',
- android: '3.91k',
- windows: '2.95k',
- ios: '4.95k',
- },
- {
- country: 'France',
- iconify: 'twemoji:flag-france',
- android: '3.28k',
- windows: '2.29k',
- ios: '8.95k',
- },
- {
- country: 'USA',
- iconify: 'twemoji:flag-united-states',
- android: '8.81k',
- windows: '7.05k',
- ios: '4.35k',
- },
+ {
+ country: 'Germany',
+ iconify: 'twemoji:flag-germany',
+ android: '9.91k',
+ windows: '1.95k',
+ ios: '1.95k',
+ },
+ {
+ country: 'China',
+ iconify: 'twemoji:flag-china',
+ android: '1.95k',
+ windows: '9.25k',
+ ios: '7.95k',
+ },
+ {
+ country: 'Australia',
+ iconify: 'twemoji:flag-australia',
+ android: '3.91k',
+ windows: '2.95k',
+ ios: '4.95k',
+ },
+ {
+ country: 'France',
+ iconify: 'twemoji:flag-france',
+ android: '3.28k',
+ windows: '2.29k',
+ ios: '8.95k',
+ },
+ {
+ country: 'USA',
+ iconify: 'twemoji:flag-united-states',
+ android: '8.81k',
+ windows: '7.05k',
+ ios: '4.35k',
+ },
];
const platformIcon = (platform: string) => {
- let iconify: ReactNode;
- if (platform === 'android') {
- iconify = ;
- }
- if (platform === 'windows') {
- iconify = ;
- }
- iconify = ;
+ let iconify: ReactNode;
+ if (platform === 'android') {
+ iconify = ;
+ }
+ if (platform === 'windows') {
+ iconify = ;
+ }
+ iconify = ;
- return {iconify}
;
+ return {iconify}
;
};
export default function TopInstalled() {
- return (
-
-
- Top Installed Countries
-
-
- {dataSource.map((item) => (
-
-
-
{item.country}
-
-
- {platformIcon('android')}
- {item.android}
-
+ return (
+
+
+ Top Installed Countries
+
+
+ {dataSource.map((item) => (
+
+
+
{item.country}
+
+
+ {platformIcon('android')}
+ {item.android}
+
-
- {platformIcon('windows')}
- {item.windows}
-
+
+ {platformIcon('windows')}
+ {item.windows}
+
-
- {platformIcon('ios')}
- {item.ios}
-
-
-
- ))}
-
-
- );
+
+ {platformIcon('ios')}
+ {item.ios}
+
+
+
+ ))}
+
+
+ );
}
diff --git a/src/pages/dashboard/workbench/top-related.tsx b/src/pages/dashboard/workbench/top-related.tsx
index 6b95c79..d7ab56d 100644
--- a/src/pages/dashboard/workbench/top-related.tsx
+++ b/src/pages/dashboard/workbench/top-related.tsx
@@ -8,91 +8,95 @@ import ProTag from '@/theme/antd/components/tag';
import { useThemeToken } from '@/theme/hooks';
const dataSource = [
- {
- logo: ,
- title: 'Chrome',
- platform: 'Mac',
- type: 'free',
- star: 4,
- reviews: '9.91k',
- },
- {
- logo: ,
- title: 'Drive',
- platform: 'Mac',
- type: 'free',
- star: 3.5,
- reviews: '1.95k',
- },
- {
- logo: ,
- title: 'Dropbox',
- platform: 'Windows',
- type: '$66.71',
- star: 4.5,
- reviews: '9.12k',
- },
- {
- logo: ,
- title: 'Slack',
- platform: 'Mac',
- type: 'free',
- star: 3.5,
- reviews: '6.98k',
- },
- {
- logo: ,
- title: 'Discord',
- platform: 'Windows',
- type: '$52.17',
- star: 0.5,
- reviews: '8.49k',
- },
+ {
+ logo: ,
+ title: 'Chrome',
+ platform: 'Mac',
+ type: 'free',
+ star: 4,
+ reviews: '9.91k',
+ },
+ {
+ logo: ,
+ title: 'Drive',
+ platform: 'Mac',
+ type: 'free',
+ star: 3.5,
+ reviews: '1.95k',
+ },
+ {
+ logo: ,
+ title: 'Dropbox',
+ platform: 'Windows',
+ type: '$66.71',
+ star: 4.5,
+ reviews: '9.12k',
+ },
+ {
+ logo: ,
+ title: 'Slack',
+ platform: 'Mac',
+ type: 'free',
+ star: 3.5,
+ reviews: '6.98k',
+ },
+ {
+ logo: ,
+ title: 'Discord',
+ platform: 'Windows',
+ type: '$52.17',
+ star: 0.5,
+ reviews: '8.49k',
+ },
];
export default function TopRelated() {
- const themeToken = useThemeToken();
- return (
-
-
- Top Related Applications
-
-
-
- {dataSource.map((item) => (
-
-
- {item.logo}
-
+ const themeToken = useThemeToken();
+ return (
+
+
+ Top Related Applications
+
+
+
+ {dataSource.map((item) => (
+
+
+ {item.logo}
+
-
-
{item.title}
-
- {item.platform === 'Mac' ? (
-
- ) : (
-
- )}
-
{item.platform}
-
{item.type}
-
-
+
+
{item.title}
+
+ {item.platform === 'Mac' ? (
+
+ ) : (
+
+ )}
+
{item.platform}
+
+ {item.type}
+
+
+
-
-
-
{item.reviews}reviews
-
-
- ))}
-
-
-
- );
+
+
+
+ {item.reviews}reviews
+
+
+
+ ))}
+
+
+
+ );
}
diff --git a/src/pages/dashboard/workbench/total-card.tsx b/src/pages/dashboard/workbench/total-card.tsx
index faeb3b7..c416715 100644
--- a/src/pages/dashboard/workbench/total-card.tsx
+++ b/src/pages/dashboard/workbench/total-card.tsx
@@ -4,76 +4,76 @@ import useChart from '@/components/chart/useChart';
import { SvgIcon } from '@/components/icon';
type Props = {
- title: string;
- increase: boolean;
- percent: string;
- count: string;
- chartData: number[];
+ title: string;
+ increase: boolean;
+ percent: string;
+ count: string;
+ chartData: number[];
};
export default function TotalCard({ title, increase, count, percent, chartData }: Props) {
- return (
-
-
-
{title}
-
- {increase ? (
-
- ) : (
-
- )}
-
- {increase ? '+' : '-'}
- {percent}
-
-
-
{count}
-
+ return (
+
+
+
{title}
+
+ {increase ? (
+
+ ) : (
+
+ )}
+
+ {increase ? '+' : '-'}
+ {percent}
+
+
+
{count}
+
-
-
- );
+
+
+ );
}
function ChartLine({ data }: { data: number[] }) {
- const series = [
- {
- name: '',
- data,
- },
- ];
- const chartOptions = useChart({
- tooltip: {
- x: {
- show: false,
- },
- },
- xaxis: {
- labels: {
- show: false,
- showDuplicates: false,
- },
- tooltip: {
- enabled: false,
- },
- crosshairs: {
- show: false,
- },
- },
- yaxis: {
- labels: {
- show: false,
- },
- tooltip: {
- enabled: false,
- },
- crosshairs: {
- show: false,
- },
- },
- grid: {
- show: false,
- },
- });
+ const series = [
+ {
+ name: '',
+ data,
+ },
+ ];
+ const chartOptions = useChart({
+ tooltip: {
+ x: {
+ show: false,
+ },
+ },
+ xaxis: {
+ labels: {
+ show: false,
+ showDuplicates: false,
+ },
+ tooltip: {
+ enabled: false,
+ },
+ crosshairs: {
+ show: false,
+ },
+ },
+ yaxis: {
+ labels: {
+ show: false,
+ },
+ tooltip: {
+ enabled: false,
+ },
+ crosshairs: {
+ show: false,
+ },
+ },
+ grid: {
+ show: false,
+ },
+ });
- return ;
+ return ;
}
diff --git a/src/pages/functions/clipboard/index.tsx b/src/pages/functions/clipboard/index.tsx
index 5d25e29..063dba0 100644
--- a/src/pages/functions/clipboard/index.tsx
+++ b/src/pages/functions/clipboard/index.tsx
@@ -6,32 +6,32 @@ import { IconButton, Iconify } from '@/components/icon';
import { useCopyToClipboard } from '@/hooks/event/use-copy-to-clipboard';
export default function ClipboardPage() {
- const { copyFn } = useCopyToClipboard();
+ const { copyFn } = useCopyToClipboard();
- const [value, setValue] = useState('https://www.npmjs.com/package/');
+ const [value, setValue] = useState('https://www.npmjs.com/package/');
- const textOnClick = faker.lorem.paragraphs({ min: 3, max: 5 });
+ const textOnClick = faker.lorem.paragraphs({ min: 3, max: 5 });
- const handleChange = (e: ChangeEvent) => setValue(e.target.value);
- const CopyButton = (
-
- copyFn(value)}>
-
-
-
- );
- return (
-
-
-
- ON CHANGE
-
-
-
- ON DOUBLE CLICK
- copyFn(textOnClick)}>{textOnClick}
-
-
-
- );
+ const handleChange = (e: ChangeEvent) => setValue(e.target.value);
+ const CopyButton = (
+
+ copyFn(value)}>
+
+
+
+ );
+ return (
+
+
+
+ ON CHANGE
+
+
+
+ ON DOUBLE CLICK
+ copyFn(textOnClick)}>{textOnClick}
+
+
+
+ );
}
diff --git a/src/pages/home/list.page.tsx b/src/pages/home/list.page.tsx
index 48bd772..277a085 100644
--- a/src/pages/home/list.page.tsx
+++ b/src/pages/home/list.page.tsx
@@ -1,5 +1,5 @@
-import { Avatar, Button, Divider, Tabs, TabsProps } from 'antd';
import { Column } from '@antv/g2plot';
+import { Avatar, Button, Divider, Tabs, TabsProps } from 'antd';
import { useEffect, useRef } from 'react';
const data = [
@@ -123,7 +123,7 @@ export default () => {
return () => {
stackedColumnPlot.destroy();
};
- }, [ref.current]);
+ }, []);
// 标签切换 items
const items: TabsProps['items'] = [
{
diff --git a/src/pages/management/blog/index.tsx b/src/pages/management/blog/index.tsx
index bd8bd49..e3838c0 100644
--- a/src/pages/management/blog/index.tsx
+++ b/src/pages/management/blog/index.tsx
@@ -1,5 +1,5 @@
function Blog() {
- return Blog
;
+ return Blog
;
}
export default Blog;
diff --git a/src/pages/management/system/organization/index.tsx b/src/pages/management/system/organization/index.tsx
index 90dbc4e..41711f1 100644
--- a/src/pages/management/system/organization/index.tsx
+++ b/src/pages/management/system/organization/index.tsx
@@ -1,17 +1,17 @@
import { useQuery } from '@tanstack/react-query';
import {
- Button,
- Card,
- Col,
- Form,
- Input,
- InputNumber,
- Modal,
- Popconfirm,
- Radio,
- Row,
- Select,
- Space,
+ Button,
+ Card,
+ Col,
+ Form,
+ Input,
+ InputNumber,
+ Modal,
+ Popconfirm,
+ Radio,
+ Row,
+ Select,
+ Space,
} from 'antd';
import Table, { ColumnsType } from 'antd/es/table';
import { TableRowSelection } from 'antd/es/table/interface';
@@ -28,203 +28,220 @@ import { Organization } from '#/entity';
type SearchFormFieldType = Pick;
export default function OrganizationPage() {
- const [searchForm] = Form.useForm();
- const [organizationModalPros, setOrganizationModalProps] = useState({
- formValue: {
- id: '',
- name: '',
- status: 'enable',
- },
- title: 'New',
- show: false,
- onOk: () => {
- setOrganizationModalProps((prev) => ({ ...prev, show: false }));
- },
- onCancel: () => {
- setOrganizationModalProps((prev) => ({ ...prev, show: false }));
- },
- });
-
- const columns: ColumnsType = [
- { title: 'Name', dataIndex: 'name', width: 300 },
- { title: 'Order', dataIndex: 'order', align: 'center', width: 60 },
- {
- title: 'Status',
- dataIndex: 'status',
- align: 'center',
- width: 120,
- render: (status) => (
- {status}
- ),
- },
- { title: 'Desc', dataIndex: 'desc', align: 'center', width: 300 },
- {
- title: 'Action',
- key: 'operation',
- align: 'center',
- width: 100,
- render: (_, record) => (
-
-
onEdit(record)}>
-
-
-
-
-
-
-
-
- ),
- },
- ];
-
- // rowSelection objects indicates the need for row selection
- const rowSelection: TableRowSelection = {
- onChange: (selectedRowKeys, selectedRows) => {
- console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
- },
- onSelect: (record, selected, selectedRows) => {
- console.log(record, selected, selectedRows);
- },
- onSelectAll: (selected, selectedRows, changeRows) => {
- console.log(selected, selectedRows, changeRows);
- },
- };
-
- const { data } = useQuery({
- queryKey: ['orgs'],
- queryFn: orgService.getOrgList,
- });
-
- const onSearchFormReset = () => {
- searchForm.resetFields();
- };
-
- const onCreate = () => {
- setOrganizationModalProps((prev) => ({
- ...prev,
- show: true,
- title: 'Create New',
- formValue: {
- ...prev.formValue,
- id: '',
- name: '',
- order: 1,
- desc: '',
- status: 'enable',
- },
- }));
- };
-
- const onEdit = (formValue: Organization) => {
- setOrganizationModalProps((prev) => ({
- ...prev,
- show: true,
- title: 'Edit',
- formValue,
- }));
- };
-
- return (
-
-
-
-
-
-
- New
-
- }
- >
-
-
-
-
-
-
-
-
-
- );
+ const [searchForm] = Form.useForm();
+ const [organizationModalPros, setOrganizationModalProps] = useState({
+ formValue: {
+ id: '',
+ name: '',
+ status: 'enable',
+ },
+ title: 'New',
+ show: false,
+ onOk: () => {
+ setOrganizationModalProps((prev) => ({ ...prev, show: false }));
+ },
+ onCancel: () => {
+ setOrganizationModalProps((prev) => ({ ...prev, show: false }));
+ },
+ });
+
+ const columns: ColumnsType = [
+ { title: 'Name', dataIndex: 'name', width: 300 },
+ { title: 'Order', dataIndex: 'order', align: 'center', width: 60 },
+ {
+ title: 'Status',
+ dataIndex: 'status',
+ align: 'center',
+ width: 120,
+ render: (status) => (
+ {status}
+ ),
+ },
+ { title: 'Desc', dataIndex: 'desc', align: 'center', width: 300 },
+ {
+ title: 'Action',
+ key: 'operation',
+ align: 'center',
+ width: 100,
+ render: (_, record) => (
+
+
onEdit(record)}>
+
+
+
+
+
+
+
+
+ ),
+ },
+ ];
+
+ // rowSelection objects indicates the need for row selection
+ const rowSelection: TableRowSelection = {
+ onChange: (selectedRowKeys, selectedRows) => {
+ console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+ },
+ onSelect: (record, selected, selectedRows) => {
+ console.log(record, selected, selectedRows);
+ },
+ onSelectAll: (selected, selectedRows, changeRows) => {
+ console.log(selected, selectedRows, changeRows);
+ },
+ };
+
+ const { data } = useQuery({
+ queryKey: ['orgs'],
+ queryFn: orgService.getOrgList,
+ });
+
+ const onSearchFormReset = () => {
+ searchForm.resetFields();
+ };
+
+ const onCreate = () => {
+ setOrganizationModalProps((prev) => ({
+ ...prev,
+ show: true,
+ title: 'Create New',
+ formValue: {
+ ...prev.formValue,
+ id: '',
+ name: '',
+ order: 1,
+ desc: '',
+ status: 'enable',
+ },
+ }));
+ };
+
+ const onEdit = (formValue: Organization) => {
+ setOrganizationModalProps((prev) => ({
+ ...prev,
+ show: true,
+ title: 'Edit',
+ formValue,
+ }));
+ };
+
+ return (
+
+
+
+
+
+
+ New
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+ );
}
type OrganizationModalProps = {
- formValue: Organization;
- title: string;
- show: boolean;
- onOk: VoidFunction;
- onCancel: VoidFunction;
+ formValue: Organization;
+ title: string;
+ show: boolean;
+ onOk: VoidFunction;
+ onCancel: VoidFunction;
};
function OrganizationModal({ title, show, formValue, onOk, onCancel }: OrganizationModalProps) {
- const [form] = Form.useForm();
- useEffect(() => {
- form.setFieldsValue({ ...formValue });
- }, [formValue, form]);
- return (
-
- label="Name" name="name" required>
-
-
- label="Order" name="order" required>
-
-
- label="Status" name="status" required>
-
- Enable
- Disable
-
-
- label="Desc" name="desc">
-
-
-
-
- );
+ const [form] = Form.useForm();
+ useEffect(() => {
+ form.setFieldsValue({ ...formValue });
+ }, [formValue, form]);
+ return (
+
+ label="Name" name="name" required>
+
+
+ label="Order" name="order" required>
+
+
+ label="Status" name="status" required>
+
+ Enable
+ Disable
+
+
+ label="Desc" name="desc">
+
+
+
+
+ );
}
diff --git a/src/pages/management/system/organization/organization-chart.tsx b/src/pages/management/system/organization/organization-chart.tsx
index fbcff06..2d740ae 100644
--- a/src/pages/management/system/organization/organization-chart.tsx
+++ b/src/pages/management/system/organization/organization-chart.tsx
@@ -9,86 +9,88 @@ import { Organization } from '#/entity';
import { ThemeMode } from '#/enum';
type Props = {
- organizations?: Organization[];
+ organizations?: Organization[];
};
export default function OrganizationChart({ organizations = [] }: Props) {
- const themeToken = useThemeToken();
- const { themeMode } = useSettings();
- return (
-
+ Root
+
+ }
>
- Root
-
- }
- >
- {organizations.map((org) => (
-
- ))}
-
- );
+ {organizations.map((org) => (
+
+ ))}
+
+ );
}
type OrganizationChartTreeNodeProps = {
- organization: Organization;
+ organization: Organization;
};
function OrganizationChartTreeNode({
- organization: { name, children },
+ organization: { name, children },
}: OrganizationChartTreeNodeProps) {
- const themeToken = useThemeToken();
- const { themeMode } = useSettings();
+ const themeToken = useThemeToken();
+ const { themeMode } = useSettings();
- return (
-
+ {name}
+
+ }
>
- {name}
-
- }
- >
- {children?.map((org) => (
-
- ))}
-
- );
+ {children?.map((org) => (
+
+ ))}
+
+ );
}
type StyledNodeProps = {
- $textColor: string;
- $backgroundColor: string;
- $borderColor: string;
+ $textColor: string;
+ $backgroundColor: string;
+ $borderColor: string;
};
const StyledNode = styled.div`
- transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- overflow: hidden;
- position: relative;
- z-index: 0;
- padding: 16px;
- border-radius: 12px;
- display: inline-flex;
- text-transform: capitalize;
- color: ${(props) => props.$textColor};
- background-color: ${(props) => props.$backgroundColor};
- border: 1px solid ${(props) => props.$borderColor};
+ transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ overflow: hidden;
+ position: relative;
+ z-index: 0;
+ padding: 16px;
+ border-radius: 12px;
+ display: inline-flex;
+ text-transform: capitalize;
+ color: ${(props) => props.$textColor};
+ background-color: ${(props) => props.$backgroundColor};
+ border: 1px solid ${(props) => props.$borderColor};
`;
diff --git a/src/pages/management/system/permission/permission-modal.tsx b/src/pages/management/system/permission/permission-modal.tsx
index 5e1be16..39f909a 100644
--- a/src/pages/management/system/permission/permission-modal.tsx
+++ b/src/pages/management/system/permission/permission-modal.tsx
@@ -7,101 +7,105 @@ import { Permission } from '#/entity';
import { BasicStatus, PermissionType } from '#/enum';
export type PermissionModalProps = {
- formValue: Permission;
- title: string;
- show: boolean;
- onOk: VoidFunction;
- onCancel: VoidFunction;
+ formValue: Permission;
+ title: string;
+ show: boolean;
+ onOk: VoidFunction;
+ onCancel: VoidFunction;
};
export default function PermissionModal({
- title,
- show,
- formValue,
- onOk,
- onCancel,
+ title,
+ show,
+ formValue,
+ onOk,
+ onCancel,
}: PermissionModalProps) {
- const [form] = Form.useForm();
- const permissions = useUserPermission();
+ const [form] = Form.useForm();
+ const permissions = useUserPermission();
- useEffect(() => {
- form.setFieldsValue({ ...formValue });
- }, [formValue, form]);
+ useEffect(() => {
+ form.setFieldsValue({ ...formValue });
+ }, [formValue, form]);
- return (
-
- label="Type" name="type" required>
-
- CATALOGUE
- MENU
-
-
+ return (
+
+ label="Type" name="type" required>
+
+ CATALOGUE
+ MENU
+
+
- label="Name" name="name" required>
-
-
+ label="Name" name="name" required>
+
+
-
- label="Label"
- name="label"
- required
- tooltip="internationalization config"
- >
-
-
+
+ label="Label"
+ name="label"
+ required
+ tooltip="internationalization config"
+ >
+
+
- label="Parent" name="parentId" required>
-
-
+ label="Parent" name="parentId" required>
+
+
- label="Route" name="route" required>
-
-
+ label="Route" name="route" required>
+
+
-
- label="Component"
- name="component"
- required={formValue.type === PermissionType.MENU}
- >
-
-
+
+ label="Component"
+ name="component"
+ required={formValue.type === PermissionType.MENU}
+ >
+
+
- label="Icon" name="icon" tooltip="local icon should start with ic">
-
-
+
+ label="Icon"
+ name="icon"
+ tooltip="local icon should start with ic"
+ >
+
+
- label="Hide" name="hide" tooltip="hide in menu">
-
- Show
- Hide
-
-
+ label="Hide" name="hide" tooltip="hide in menu">
+
+ Show
+ Hide
+
+
- label="Order" name="order">
-
-
+ label="Order" name="order">
+
+
- label="Status" name="status" required>
-
- Enable
- Disable
-
-
-
-
- );
+ label="Status" name="status" required>
+
+ Enable
+ Disable
+
+
+
+
+ );
}
diff --git a/src/pages/management/system/role/index.tsx b/src/pages/management/system/role/index.tsx
index f57fc6c..1efe7d8 100644
--- a/src/pages/management/system/role/index.tsx
+++ b/src/pages/management/system/role/index.tsx
@@ -14,107 +14,116 @@ import { BasicStatus } from '#/enum';
const ROLES: Role[] = ROLE_LIST;
const DEFAULE_ROLE_VALUE: Role = {
- id: '',
- name: '',
- label: '',
- status: BasicStatus.ENABLE,
- permission: [],
+ id: '',
+ name: '',
+ label: '',
+ status: BasicStatus.ENABLE,
+ permission: [],
};
export default function RolePage() {
- const [roleModalPros, setRoleModalProps] = useState({
- formValue: { ...DEFAULE_ROLE_VALUE },
- title: 'New',
- show: false,
- onOk: () => {
- setRoleModalProps((prev) => ({ ...prev, show: false }));
- },
- onCancel: () => {
- setRoleModalProps((prev) => ({ ...prev, show: false }));
- },
- });
- const columns: ColumnsType = [
- {
- title: 'Name',
- dataIndex: 'name',
- width: 300,
- },
- {
- title: 'Label',
- dataIndex: 'label',
- },
- { title: 'Order', dataIndex: 'order', width: 60 },
- {
- title: 'Status',
- dataIndex: 'status',
- align: 'center',
- width: 120,
- render: (status) => (
-
- {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'}
-
- ),
- },
- { title: 'Desc', dataIndex: 'desc' },
- {
- title: 'Action',
- key: 'operation',
- align: 'center',
- width: 100,
- render: (_, record) => (
-
-
onEdit(record)}>
-
-
-
-
-
-
-
-
- ),
- },
- ];
+ const [roleModalPros, setRoleModalProps] = useState({
+ formValue: { ...DEFAULE_ROLE_VALUE },
+ title: 'New',
+ show: false,
+ onOk: () => {
+ setRoleModalProps((prev) => ({ ...prev, show: false }));
+ },
+ onCancel: () => {
+ setRoleModalProps((prev) => ({ ...prev, show: false }));
+ },
+ });
+ const columns: ColumnsType = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ width: 300,
+ },
+ {
+ title: 'Label',
+ dataIndex: 'label',
+ },
+ { title: 'Order', dataIndex: 'order', width: 60 },
+ {
+ title: 'Status',
+ dataIndex: 'status',
+ align: 'center',
+ width: 120,
+ render: (status) => (
+
+ {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'}
+
+ ),
+ },
+ { title: 'Desc', dataIndex: 'desc' },
+ {
+ title: 'Action',
+ key: 'operation',
+ align: 'center',
+ width: 100,
+ render: (_, record) => (
+
+
onEdit(record)}>
+
+
+
+
+
+
+
+
+ ),
+ },
+ ];
- const onCreate = () => {
- setRoleModalProps((prev) => ({
- ...prev,
- show: true,
- title: 'Create New',
- formValue: {
- ...prev.formValue,
- ...DEFAULE_ROLE_VALUE,
- },
- }));
- };
+ const onCreate = () => {
+ setRoleModalProps((prev) => ({
+ ...prev,
+ show: true,
+ title: 'Create New',
+ formValue: {
+ ...prev.formValue,
+ ...DEFAULE_ROLE_VALUE,
+ },
+ }));
+ };
- const onEdit = (formValue: Role) => {
- setRoleModalProps((prev) => ({
- ...prev,
- show: true,
- title: 'Edit',
- formValue,
- }));
- };
+ const onEdit = (formValue: Role) => {
+ setRoleModalProps((prev) => ({
+ ...prev,
+ show: true,
+ title: 'Edit',
+ formValue,
+ }));
+ };
- return (
-
- New
-
- }
- >
-
+ return (
+
+ New
+
+ }
+ >
+
-
-
- );
+
+
+ );
}
diff --git a/src/pages/management/system/role/role-modal.tsx b/src/pages/management/system/role/role-modal.tsx
index e205079..2c7dcff 100644
--- a/src/pages/management/system/role/role-modal.tsx
+++ b/src/pages/management/system/role/role-modal.tsx
@@ -8,67 +8,67 @@ import { Permission, Role } from '#/entity';
import { BasicStatus } from '#/enum';
export type RoleModalProps = {
- formValue: Role;
- title: string;
- show: boolean;
- onOk: VoidFunction;
- onCancel: VoidFunction;
+ formValue: Role;
+ title: string;
+ show: boolean;
+ onOk: VoidFunction;
+ onCancel: VoidFunction;
};
const PERMISSIONS: Permission[] = PERMISSION_LIST;
export function RoleModal({ title, show, formValue, onOk, onCancel }: RoleModalProps) {
- const [form] = Form.useForm();
+ const [form] = Form.useForm();
- const flattenedPermissions = flattenTrees(formValue.permission);
- const checkedKeys = flattenedPermissions.map((item) => item.id);
- useEffect(() => {
- form.setFieldsValue({ ...formValue });
- }, [formValue, form]);
+ const flattenedPermissions = flattenTrees(formValue.permission);
+ const checkedKeys = flattenedPermissions.map((item) => item.id);
+ useEffect(() => {
+ form.setFieldsValue({ ...formValue });
+ }, [formValue, form]);
- return (
-
- label="Name" name="name" required>
-
-
+ return (
+
+ label="Name" name="name" required>
+
+
- label="Label" name="label" required>
-
-
+ label="Label" name="label" required>
+
+
- label="Order" name="order">
-
-
+ label="Order" name="order">
+
+
- label="Status" name="status" required>
-
- Enable
- Disable
-
-
+ label="Status" name="status" required>
+
+ Enable
+ Disable
+
+
- label="Desc" name="desc">
-
-
+ label="Desc" name="desc">
+
+
- label="Permission" name="permission">
-
-
-
-
- );
+ label="Permission" name="permission">
+
+
+
+
+ );
}
diff --git a/src/pages/management/system/user/index.tsx b/src/pages/management/system/user/index.tsx
index 9d9e4c0..067a0d8 100644
--- a/src/pages/management/system/user/index.tsx
+++ b/src/pages/management/system/user/index.tsx
@@ -12,83 +12,92 @@ import { BasicStatus } from '#/enum';
const USERS: UserInfo[] = USER_LIST;
export default function RolePage() {
- const { colorTextSecondary } = useThemeToken();
- const columns: ColumnsType = [
- {
- title: 'Name',
- dataIndex: 'name',
- width: 300,
- render: (_, record) => {
- return (
-
-
-
- {record.account}
-
- {record.email}
-
-
-
- );
- },
- },
- {
- title: 'Role',
- dataIndex: 'role',
- align: 'center',
- width: 120,
- render: (role: Role) => {role.name} ,
- },
- {
- title: 'Status',
- dataIndex: 'status',
- align: 'center',
- width: 120,
- render: (status) => (
-
- {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'}
-
- ),
- },
- {
- title: 'Action',
- key: 'operation',
- align: 'center',
- width: 100,
- render: () => (
-
- ),
- },
- ];
+ const { colorTextSecondary } = useThemeToken();
+ const columns: ColumnsType = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ width: 300,
+ render: (_, record) => {
+ return (
+
+
+
+ {record.account}
+
+ {record.email}
+
+
+
+ );
+ },
+ },
+ {
+ title: 'Role',
+ dataIndex: 'role',
+ align: 'center',
+ width: 120,
+ render: (role: Role) => {role.name} ,
+ },
+ {
+ title: 'Status',
+ dataIndex: 'status',
+ align: 'center',
+ width: 120,
+ render: (status) => (
+
+ {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'}
+
+ ),
+ },
+ {
+ title: 'Action',
+ key: 'operation',
+ align: 'center',
+ width: 100,
+ render: () => (
+
+ ),
+ },
+ ];
- const onCreate = () => {};
+ const onCreate = () => {};
- return (
-
- New
-
- }
- >
-
-
- );
+ return (
+
+ New
+
+ }
+ >
+
+
+ );
}
diff --git a/src/pages/management/user/account/general-tab.tsx b/src/pages/management/user/account/general-tab.tsx
index 30bcbc7..8fe61c4 100644
--- a/src/pages/management/user/account/general-tab.tsx
+++ b/src/pages/management/user/account/general-tab.tsx
@@ -6,107 +6,107 @@ import { UploadAvatar } from '@/components/upload';
import { useUserInfo } from '@/store/userStore';
type FieldType = {
- name?: string;
- email?: string;
- phone?: string;
- address?: string;
- city?: string;
- code?: string;
- about: string;
+ name?: string;
+ email?: string;
+ phone?: string;
+ address?: string;
+ city?: string;
+ code?: string;
+ about: string;
};
export default function GeneralTab() {
- const { notification } = App.useApp();
- const { avatar, account, email } = useUserInfo();
- const initFormValues = {
- name: account,
- email,
- phone: faker.phone.number(),
- address: faker.location.county(),
- city: faker.location.city(),
- code: faker.location.zipCode(),
- about: faker.lorem.paragraphs(),
- };
- const handleClick = () => {
- notification.success({
- message: 'Update success!',
- duration: 3,
- });
- };
- return (
-
-
-
-
+ const { notification } = App.useApp();
+ const { avatar, account, email } = useUserInfo();
+ const initFormValues = {
+ name: account,
+ email,
+ phone: faker.phone.number(),
+ address: faker.location.county(),
+ city: faker.location.city(),
+ code: faker.location.zipCode(),
+ about: faker.lorem.paragraphs(),
+ };
+ const handleClick = () => {
+ notification.success({
+ message: 'Update success!',
+ duration: 3,
+ });
+ };
+ return (
+
+
+
+
-
- Public Profile
-
-
+
+ Public Profile
+
+
-
- Delete User
-
-
-
-
-
-
+
+
+
+ label="About" name="about">
-
-
+ label="About" name="about">
+
+
-
-
- Save Changes
-
-
-
-
-
-
- );
+
+
+ Save Changes
+
+
+
+
+
+
+ );
}
diff --git a/src/pages/management/user/account/index.tsx b/src/pages/management/user/account/index.tsx
index 1345855..9e3bd68 100644
--- a/src/pages/management/user/account/index.tsx
+++ b/src/pages/management/user/account/index.tsx
@@ -7,40 +7,44 @@ import NotificationsTab from './notifications-tab';
import SecurityTab from './security-tab';
function UserAccount() {
- const items: TabsProps['items'] = [
- {
- key: '1',
- label: (
-
-
- General
-
- ),
- children: ,
- },
- {
- key: '2',
- label: (
-
-
- Notifications
-
- ),
- children: ,
- },
- {
- key: '3',
- label: (
-
-
- Security
-
- ),
- children: ,
- },
- ];
+ const items: TabsProps['items'] = [
+ {
+ key: '1',
+ label: (
+
+
+ General
+
+ ),
+ children: ,
+ },
+ {
+ key: '2',
+ label: (
+
+
+ Notifications
+
+ ),
+ children: ,
+ },
+ {
+ key: '3',
+ label: (
+
+
+ Security
+
+ ),
+ children: ,
+ },
+ ];
- return ;
+ return ;
}
export default UserAccount;
diff --git a/src/pages/management/user/account/notifications-tab.tsx b/src/pages/management/user/account/notifications-tab.tsx
index e2097a7..252c43a 100644
--- a/src/pages/management/user/account/notifications-tab.tsx
+++ b/src/pages/management/user/account/notifications-tab.tsx
@@ -4,75 +4,75 @@ import Card from '@/components/card';
import { useThemeToken } from '@/theme/hooks';
export default function NotificationsTab() {
- const { notification } = App.useApp();
- const { colorBgContainerDisabled, colorTextSecondary } = useThemeToken();
- const handleClick = () => {
- notification.success({
- message: 'Update success!',
- duration: 3,
- });
- };
- return (
-
-
-
- Activity
-
- Donec mi odio, faucibus at, scelerisque quis
-
-
-
-
-
-
Email me when someone answers on my form
-
-
-
-
Email me when someone comments onmy article
-
-
-
-
Email me hen someone follows me
-
-
-
-
+ const { notification } = App.useApp();
+ const { colorBgContainerDisabled, colorTextSecondary } = useThemeToken();
+ const handleClick = () => {
+ notification.success({
+ message: 'Update success!',
+ duration: 3,
+ });
+ };
+ return (
+
+
+
+ Activity
+
+ Donec mi odio, faucibus at, scelerisque quis
+
+
+
+
+
+
Email me when someone answers on my form
+
+
+
+
Email me when someone comments onmy article
+
+
+
+
Email me hen someone follows me
+
+
+
+
-
- Applications
-
- Donec mi odio, faucibus at, scelerisque quis
-
-
-
-
-
-
News and announcements
-
-
-
-
Weekly product updates
-
-
-
-
-
+
+ Applications
+
+ Donec mi odio, faucibus at, scelerisque quis
+
+
+
+
+
+
News and announcements
+
+
+
+
Weekly product updates
+
+
+
+
+
-
-
- Save Changes
-
-
-
-
- );
+
+
+ Save Changes
+
+
+
+
+ );
}
diff --git a/src/pages/management/user/account/security-tab.tsx b/src/pages/management/user/account/security-tab.tsx
index b346cf5..8496fde 100644
--- a/src/pages/management/user/account/security-tab.tsx
+++ b/src/pages/management/user/account/security-tab.tsx
@@ -3,49 +3,49 @@ import { App, Button, Form, Input } from 'antd';
import Card from '@/components/card';
type FieldType = {
- oldPassword?: string;
- newPassword?: string;
- confirmPassword?: string;
+ oldPassword?: string;
+ newPassword?: string;
+ confirmPassword?: string;
};
export default function SecurityTab() {
- const { notification } = App.useApp();
- const initFormValues = {
- oldPassword: '',
- newPassword: '',
- confirmPassword: '',
- };
- const handleClick = () => {
- notification.success({
- message: 'Update success!',
- duration: 3,
- });
- };
+ const { notification } = App.useApp();
+ const initFormValues = {
+ oldPassword: '',
+ newPassword: '',
+ confirmPassword: '',
+ };
+ const handleClick = () => {
+ notification.success({
+ message: 'Update success!',
+ duration: 3,
+ });
+ };
- return (
-
- label="Old Password" name="oldPassword">
-
-
+ return (
+
+ label="Old Password" name="oldPassword">
+
+
- label="New Password" name="newPassword">
-
-
+ label="New Password" name="newPassword">
+
+
- label="Confirm New Password" name="confirmPassword">
-
-
-
-
-
- Save Changes
-
-
-
- );
+ label="Confirm New Password" name="confirmPassword">
+
+
+
+
+
+ Save Changes
+
+
+
+ );
}
diff --git a/src/pages/management/user/profile/connections-tab.tsx b/src/pages/management/user/profile/connections-tab.tsx
index 2126560..b8c718a 100644
--- a/src/pages/management/user/profile/connections-tab.tsx
+++ b/src/pages/management/user/profile/connections-tab.tsx
@@ -6,110 +6,110 @@ import { Iconify } from '@/components/icon';
import ProTag from '@/theme/antd/components/tag';
export default function ConnectionsTab() {
- const items = [
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- title: 'UI Designer',
- tags: ['Figma', 'Sketch'],
- projects: '18',
- tasks: '834',
- connections: '129',
- connected: true,
- },
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- title: 'Developer',
- tags: ['Angular', 'React'],
- projects: '118',
- tasks: '2.32k',
- connections: '1.29k',
- connected: false,
- },
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- title: 'Developer',
- tags: ['Html', 'React'],
- projects: '32',
- tasks: '1.25k',
- connections: '890',
- connected: false,
- },
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- title: 'UI/UX Designer',
- tags: ['Figma', 'Sketch', 'Photoshop'],
- projects: '86',
- tasks: '12.4k',
- connections: '890',
- connected: false,
- },
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- title: 'Full Stack Developer',
- tags: ['React', 'Html', 'Node.js'],
- projects: '244',
- tasks: '23.9k',
- connections: '2.14k',
- connected: true,
- },
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- title: 'SEO',
- tags: ['Analysis', 'Writing'],
- projects: '32',
- tasks: '1.28k',
- connections: '1.27k',
- connected: false,
- },
- ];
- return (
-
- {items.map((item) => (
-
-
-
+ const items = [
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ title: 'UI Designer',
+ tags: ['Figma', 'Sketch'],
+ projects: '18',
+ tasks: '834',
+ connections: '129',
+ connected: true,
+ },
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ title: 'Developer',
+ tags: ['Angular', 'React'],
+ projects: '118',
+ tasks: '2.32k',
+ connections: '1.29k',
+ connected: false,
+ },
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ title: 'Developer',
+ tags: ['Html', 'React'],
+ projects: '32',
+ tasks: '1.25k',
+ connections: '890',
+ connected: false,
+ },
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ title: 'UI/UX Designer',
+ tags: ['Figma', 'Sketch', 'Photoshop'],
+ projects: '86',
+ tasks: '12.4k',
+ connections: '890',
+ connected: false,
+ },
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ title: 'Full Stack Developer',
+ tags: ['React', 'Html', 'Node.js'],
+ projects: '244',
+ tasks: '23.9k',
+ connections: '2.14k',
+ connected: true,
+ },
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ title: 'SEO',
+ tags: ['Analysis', 'Writing'],
+ projects: '32',
+ tasks: '1.28k',
+ connections: '1.27k',
+ connected: false,
+ },
+ ];
+ return (
+
+ {items.map((item) => (
+
+
+
- {item.name}
- {item.title}
+ {item.name}
+ {item.title}
-
- {item.tags.map((tag) => (
-
- {tag}
-
- ))}
-
+
+ {item.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
-
-
- {item.projects}
- Projects
-
-
- {item.tasks}
- Tasks
-
-
- {item.connections}
- Tasks
-
-
+
+
+ {item.projects}
+ Projects
+
+
+ {item.tasks}
+ Tasks
+
+
+ {item.connections}
+ Tasks
+
+
-
-
-
- CONNECTED
-
-
-
-
- ))}
-
- );
+
+
+
+ CONNECTED
+
+
+
+
+ ))}
+
+ );
}
diff --git a/src/pages/management/user/profile/index.tsx b/src/pages/management/user/profile/index.tsx
index 85be742..737f148 100644
--- a/src/pages/management/user/profile/index.tsx
+++ b/src/pages/management/user/profile/index.tsx
@@ -12,77 +12,86 @@ import ProjectsTab from './projects-tab';
import TeamsTab from './teams-tab';
function UserProfile() {
- const { avatar, account } = useUserInfo();
- const { colorTextBase } = useThemeToken();
- const [currentTabIndex, setcurrentTabIndex] = useState(0);
+ const { avatar, account } = useUserInfo();
+ const { colorTextBase } = useThemeToken();
+ const [currentTabIndex, setcurrentTabIndex] = useState(0);
- const bgStyle: CSSProperties = {
- background: `linear-gradient(rgba(0, 75, 80, 0.8), rgba(0, 75, 80, 0.8)) center center / cover no-repeat, url(${CoverImage})`,
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center center',
- };
+ const bgStyle: CSSProperties = {
+ background: `linear-gradient(rgba(0, 75, 80, 0.8), rgba(0, 75, 80, 0.8)) center center / cover no-repeat, url(${CoverImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ };
- const tabs = [
- {
- icon: ,
- title: 'Profile',
- content: ,
- },
- {
- icon: ,
- title: 'Teams',
- content: ,
- },
- {
- icon: ,
- title: 'Projects',
- content: ,
- },
- {
- icon: ,
- title: 'Connections',
- content: ,
- },
- ];
+ const tabs = [
+ {
+ icon: ,
+ title: 'Profile',
+ content: ,
+ },
+ {
+ icon: ,
+ title: 'Teams',
+ content: ,
+ },
+ {
+ icon: ,
+ title: 'Projects',
+ content: ,
+ },
+ {
+ icon: ,
+ title: 'Connections',
+ content: ,
+ },
+ ];
- return (
- <>
-
-
-
-
-
- {account}
- TS FullStack
-
-
-
-
-
- {tabs.map((tab, index) => (
- setcurrentTabIndex(index)}
- key={tab.title}
- type="button"
- style={{
- marginRight: index >= tabs.length - 1 ? '0px' : '40px',
- opacity: index === currentTabIndex ? 1 : 0.5,
- borderBottom: index === currentTabIndex ? `2px solid ${colorTextBase}` : '',
- }}
- >
- {tab.icon}
- {tab.title}
-
- ))}
-
-
-
- {tabs[currentTabIndex].content}
- >
- );
+ return (
+ <>
+
+
+
+
+
+ {account}
+
+ TS FullStack
+
+
+
+
+
+
+ {tabs.map((tab, index) => (
+ setcurrentTabIndex(index)}
+ key={tab.title}
+ type="button"
+ style={{
+ marginRight: index >= tabs.length - 1 ? '0px' : '40px',
+ opacity: index === currentTabIndex ? 1 : 0.5,
+ borderBottom:
+ index === currentTabIndex
+ ? `2px solid ${colorTextBase}`
+ : '',
+ }}
+ >
+ {tab.icon}
+ {tab.title}
+
+ ))}
+
+
+
+ {tabs[currentTabIndex].content}
+ >
+ );
}
export default UserProfile;
diff --git a/src/pages/management/user/profile/profile-tab.tsx b/src/pages/management/user/profile/profile-tab.tsx
index faceda9..ef7651b 100644
--- a/src/pages/management/user/profile/profile-tab.tsx
+++ b/src/pages/management/user/profile/profile-tab.tsx
@@ -11,353 +11,383 @@ import ProTag from '@/theme/antd/components/tag';
import { useThemeToken } from '@/theme/hooks';
interface DataType {
- key: string;
- avatar: string;
- name: string;
- date: string;
- leader: string;
- team: string[];
- status: number;
+ key: string;
+ avatar: string;
+ name: string;
+ date: string;
+ leader: string;
+ team: string[];
+ status: number;
}
export default function ProfileTab() {
- const { account } = useUserInfo();
- const theme = useThemeToken();
- const AboutItems = [
- { icon: , label: 'Full Name', val: account },
- { icon: , label: 'Role', val: 'Developer' },
- { icon: , label: 'Country', val: 'USA' },
- { icon: , label: 'Language', val: 'English' },
- { icon: , label: 'Contact', val: '(123)456-7890' },
- { icon: , label: 'Email', val: account },
- ];
+ const { account } = useUserInfo();
+ const theme = useThemeToken();
+ const AboutItems = [
+ { icon: , label: 'Full Name', val: account },
+ {
+ icon: ,
+ label: 'Role',
+ val: 'Developer',
+ },
+ { icon: , label: 'Country', val: 'USA' },
+ { icon: , label: 'Language', val: 'English' },
+ {
+ icon: ,
+ label: 'Contact',
+ val: '(123)456-7890',
+ },
+ { icon: , label: 'Email', val: account },
+ ];
- const ConnectionsItems = [
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- connections: `${faker.number.int(100)} Connections`,
- connected: faker.datatype.boolean(),
- },
+ const ConnectionsItems = [
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ connections: `${faker.number.int(100)} Connections`,
+ connected: faker.datatype.boolean(),
+ },
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- connections: `${faker.number.int(100)} Connections`,
- connected: faker.datatype.boolean(),
- },
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ connections: `${faker.number.int(100)} Connections`,
+ connected: faker.datatype.boolean(),
+ },
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- connections: `${faker.number.int(100)} Connections`,
- connected: faker.datatype.boolean(),
- },
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ connections: `${faker.number.int(100)} Connections`,
+ connected: faker.datatype.boolean(),
+ },
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- connections: `${faker.number.int(100)} Connections`,
- connected: faker.datatype.boolean(),
- },
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ connections: `${faker.number.int(100)} Connections`,
+ connected: faker.datatype.boolean(),
+ },
- {
- avatar: faker.image.avatarLegacy(),
- name: faker.person.fullName(),
- connections: `${faker.number.int(100)} Connections`,
- connected: faker.datatype.boolean(),
- },
- ];
+ {
+ avatar: faker.image.avatarLegacy(),
+ name: faker.person.fullName(),
+ connections: `${faker.number.int(100)} Connections`,
+ connected: faker.datatype.boolean(),
+ },
+ ];
- const TeamItems = [
- {
- avatar: ,
- name: 'React Developers',
- members: `${faker.number.int(100)} Members`,
- tag: Developer ,
- },
- {
- avatar: ,
- name: 'UI Designer',
- members: `${faker.number.int(100)} Members`,
- tag: Designer ,
- },
- {
- avatar: ,
- name: 'Test Team',
- members: `${faker.number.int(100)} Members`,
- tag: Test ,
- },
- {
- avatar: ,
- name: 'Nest.js Developers',
- members: `${faker.number.int(100)} Members`,
- tag: Developer ,
- },
+ const TeamItems = [
+ {
+ avatar: ,
+ name: 'React Developers',
+ members: `${faker.number.int(100)} Members`,
+ tag: Developer ,
+ },
+ {
+ avatar: ,
+ name: 'UI Designer',
+ members: `${faker.number.int(100)} Members`,
+ tag: Designer ,
+ },
+ {
+ avatar: ,
+ name: 'Test Team',
+ members: `${faker.number.int(100)} Members`,
+ tag: Test ,
+ },
+ {
+ avatar: ,
+ name: 'Nest.js Developers',
+ members: `${faker.number.int(100)} Members`,
+ tag: Developer ,
+ },
- {
- avatar: ,
- name: 'Digital Marketing',
- members: `${faker.number.int(100)} Members`,
- tag: Marketing ,
- },
- ];
+ {
+ avatar: ,
+ name: 'Digital Marketing',
+ members: `${faker.number.int(100)} Members`,
+ tag: Marketing ,
+ },
+ ];
- const fakeProjectItems = () => {
- const arr: DataType[] = [];
- for (let i = 0; i <= 25; i += 1) {
- arr.push({
- key: faker.string.uuid(),
- avatar: faker.image.urlPicsumPhotos(),
- name: faker.company.buzzPhrase(),
- date: faker.date.past().toDateString(),
- leader: faker.person.fullName(),
- team: fakeAvatars(faker.number.int({ min: 2, max: 5 })),
- status: faker.number.int({ min: 50, max: 99 }),
- });
- }
- return arr;
- };
+ const fakeProjectItems = () => {
+ const arr: DataType[] = [];
+ for (let i = 0; i <= 25; i += 1) {
+ arr.push({
+ key: faker.string.uuid(),
+ avatar: faker.image.urlPicsumPhotos(),
+ name: faker.company.buzzPhrase(),
+ date: faker.date.past().toDateString(),
+ leader: faker.person.fullName(),
+ team: fakeAvatars(faker.number.int({ min: 2, max: 5 })),
+ status: faker.number.int({ min: 50, max: 99 }),
+ });
+ }
+ return arr;
+ };
- const ProjectColumns: ColumnsType = [
- {
- title: 'NAME',
- dataIndex: 'name',
- render: (_, record) => (
-
-
-
- {record.name}
- {record.date}
-
-
- ),
- },
- {
- title: 'LEADER',
- dataIndex: 'leader',
- render: (val) => {val} ,
- },
- {
- title: 'TEAM',
- dataIndex: 'team',
- render: (val: string[]) => (
-
- {val.map((item, index) => (
-
- ))}
-
- ),
- },
- {
- title: 'STATUS',
- dataIndex: 'status',
- render: (val) => (
-
- ),
- },
- {
- title: 'ACTIONS',
- dataIndex: 'action',
- render: () => (
-
-
-
-
-
- ),
- },
- ];
+ const ProjectColumns: ColumnsType = [
+ {
+ title: 'NAME',
+ dataIndex: 'name',
+ render: (_, record) => (
+
+
+
+ {record.name}
+ {record.date}
+
+
+ ),
+ },
+ {
+ title: 'LEADER',
+ dataIndex: 'leader',
+ render: (val) => {val} ,
+ },
+ {
+ title: 'TEAM',
+ dataIndex: 'team',
+ render: (val: string[]) => (
+
+ {val.map((item, index) => (
+
+ ))}
+
+ ),
+ },
+ {
+ title: 'STATUS',
+ dataIndex: 'status',
+ render: (val) => (
+
+ ),
+ },
+ {
+ title: 'ACTIONS',
+ dataIndex: 'action',
+ render: () => (
+
+
+
+
+
+ ),
+ },
+ ];
- return (
- <>
-
-
-
-
-
About
-
{faker.lorem.paragraph()}
+ return (
+ <>
+
+
+
+
+
About
+
{faker.lorem.paragraph()}
-
- {AboutItems.map((item, index) => (
-
-
{item.icon}
-
{item.label}:
-
{item.val}
-
- ))}
-
-
-
-
+
+ {AboutItems.map((item, index) => (
+
+
{item.icon}
+
{item.label}:
+
{item.val}
+
+ ))}
+
+
+
+
-
-
- Activity Timeline
-
-
-
8 Invoices have been paid
-
Wednesday
-
-
- Invoices have been paid to the company.
-
+
+
+ Activity Timeline
+
+
+
+ 8 Invoices have been paid
+
+
Wednesday
+
+
+ Invoices have been paid to the company.
+
-
-
- invoice.pdf
-
-
- ),
- },
- {
- color: theme.colorPrimaryActive,
- children: (
-
-
-
Create a new project for client 😎
-
April, 18
-
-
- Invoices have been paid to the company.
-
-
-
+
+
+ invoice.pdf
+
+
+
+ ),
+ },
+ {
+ color: theme.colorPrimaryActive,
+ children: (
+
+
+
+ Create a new project for client 😎
+
+
April, 18
+
+
+ Invoices have been paid to the company.
+
+
+
+
+ {faker.person.fullName()} (client)
+
+
+
+ ),
+ },
+ {
+ color: theme.colorInfo,
+ children: (
+
+
+
+ Order #37745 from September
+
+
January, 10
+
+
+ Invoices have been paid to the company.
+
+
+ ),
+ },
+ {
+ color: theme.colorWarning,
+ children: (
+
+
+
+ Public Meeting
+
+
September, 30
+
+
+ ),
+ },
+ ]}
/>
-
- {faker.person.fullName()} (client)
-
-
-
- ),
- },
- {
- color: theme.colorInfo,
- children: (
-
-
-
Order #37745 from September
-
January, 10
-
-
- Invoices have been paid to the company.
-
-
- ),
- },
- {
- color: theme.colorWarning,
- children: (
-
-
-
Public Meeting
-
September, 30
-
-
- ),
- },
- ]}
- />
-
-
-
-
-
-
-
- Connections
-
-
-
-
-
- {ConnectionsItems.map((item, index) => (
-
-
-
- {item.name}
- {item.connections}
-
-
-
-
-
- ))}
-
+
+
+
+
+
+
+
+ Connections
+
+
+
+
+
+ {ConnectionsItems.map((item, index) => (
+
+
+
+ {item.name}
+
+ {item.connections}
+
+
+
+
+
+
+ ))}
+
-
- View all connections
-
-
-
-
-
-
- Teams
-
-
-
-
-
- {TeamItems.map((item, index) => (
-
- {item.avatar}
-
- {item.name}
- {item.members}
-
- {item.tag}
-
- ))}
-
+
+ View all connections
+
+
+
+
+
+
+ Teams
+
+
+
+
+
+ {TeamItems.map((item, index) => (
+
+ {item.avatar}
+
+ {item.name}
+
+ {item.members}
+
+
+ {item.tag}
+
+ ))}
+
-
- View all members
-
-
-
-
-
-
-
- Projects
-
-
-
-
- >
- );
+
+ View all members
+
+
+
+
+
+
+
+ Projects
+
+
+
+
+ >
+ );
}
diff --git a/src/pages/management/user/profile/projects-tab.tsx b/src/pages/management/user/profile/projects-tab.tsx
index a87ec76..fa891c5 100644
--- a/src/pages/management/user/profile/projects-tab.tsx
+++ b/src/pages/management/user/profile/projects-tab.tsx
@@ -8,134 +8,142 @@ import { IconButton, Iconify } from '@/components/icon';
import ProTag from '@/theme/antd/components/tag';
export default function ProjectsTab() {
- const items = [
- {
- icon:
,
- name: 'Admin Template',
- client: faker.person.fullName(),
- desc: 'Time is our most valuable asset, that is why we want to help you save it by creating…',
- members: fakeAvatars(15),
- startDate: dayjs(faker.date.past({ years: 1 })),
- deadline: dayjs(faker.date.future({ years: 1 })),
- messages: 236,
- allHours: '98/135',
- allTasks: faker.number.int({ min: 60, max: 99 }),
- closedTasks: faker.number.int({ min: 30, max: 60 }),
- },
- {
- icon:
,
- name: 'App Design',
- desc: 'App design combines the user interface (UI) and user experience (UX). ',
- client: faker.person.fullName(),
- members: fakeAvatars(27),
- startDate: dayjs(faker.date.past({ years: 1 })),
- deadline: dayjs(faker.date.future({ years: 1 })),
- messages: 236,
- allHours: '880/421',
- allTasks: faker.number.int({ min: 60, max: 99 }),
- closedTasks: faker.number.int({ min: 30, max: 60 }),
- },
- {
- icon:
,
- name: 'Figma Dashboard',
- desc: 'Use this template to organize your design project. Some of the key features are… ',
- client: faker.person.fullName(),
- members: fakeAvatars(32),
- startDate: dayjs(faker.date.past({ years: 1 })),
- deadline: dayjs(faker.date.future({ years: 1 })),
- messages: 236,
- allHours: '1.2k/820',
- allTasks: faker.number.int({ min: 60, max: 99 }),
- closedTasks: faker.number.int({ min: 30, max: 60 }),
- },
- {
- icon:
,
- name: 'Create Website',
- desc: 'Your domain name should reflect your products or services so that your... ',
- client: faker.person.fullName(),
- members: fakeAvatars(221),
- startDate: dayjs(faker.date.past({ years: 1 })),
- deadline: dayjs(faker.date.future({ years: 1 })),
- messages: 236,
- allHours: '142/420',
- allTasks: faker.number.int({ min: 60, max: 99 }),
- closedTasks: faker.number.int({ min: 30, max: 60 }),
- },
- {
- icon:
,
- name: 'Logo Design',
- desc: 'Premium logo designs created by top logo designers. Create the branding of business. ',
- client: faker.person.fullName(),
- members: fakeAvatars(125),
- startDate: dayjs(faker.date.past({ years: 1 })),
- deadline: dayjs(faker.date.future({ years: 1 })),
- messages: 232,
- allHours: '580/445',
- allTasks: faker.number.int({ min: 60, max: 99 }),
- closedTasks: faker.number.int({ min: 30, max: 60 }),
- },
- ];
- return (
-
- {items.map((item) => (
-
-
-
- {item.icon}
+ const items = [
+ {
+ icon: ,
+ name: 'Admin Template',
+ client: faker.person.fullName(),
+ desc: 'Time is our most valuable asset, that is why we want to help you save it by creating…',
+ members: fakeAvatars(15),
+ startDate: dayjs(faker.date.past({ years: 1 })),
+ deadline: dayjs(faker.date.future({ years: 1 })),
+ messages: 236,
+ allHours: '98/135',
+ allTasks: faker.number.int({ min: 60, max: 99 }),
+ closedTasks: faker.number.int({ min: 30, max: 60 }),
+ },
+ {
+ icon: ,
+ name: 'App Design',
+ desc: 'App design combines the user interface (UI) and user experience (UX). ',
+ client: faker.person.fullName(),
+ members: fakeAvatars(27),
+ startDate: dayjs(faker.date.past({ years: 1 })),
+ deadline: dayjs(faker.date.future({ years: 1 })),
+ messages: 236,
+ allHours: '880/421',
+ allTasks: faker.number.int({ min: 60, max: 99 }),
+ closedTasks: faker.number.int({ min: 30, max: 60 }),
+ },
+ {
+ icon: ,
+ name: 'Figma Dashboard',
+ desc: 'Use this template to organize your design project. Some of the key features are… ',
+ client: faker.person.fullName(),
+ members: fakeAvatars(32),
+ startDate: dayjs(faker.date.past({ years: 1 })),
+ deadline: dayjs(faker.date.future({ years: 1 })),
+ messages: 236,
+ allHours: '1.2k/820',
+ allTasks: faker.number.int({ min: 60, max: 99 }),
+ closedTasks: faker.number.int({ min: 30, max: 60 }),
+ },
+ {
+ icon: ,
+ name: 'Create Website',
+ desc: 'Your domain name should reflect your products or services so that your... ',
+ client: faker.person.fullName(),
+ members: fakeAvatars(221),
+ startDate: dayjs(faker.date.past({ years: 1 })),
+ deadline: dayjs(faker.date.future({ years: 1 })),
+ messages: 236,
+ allHours: '142/420',
+ allTasks: faker.number.int({ min: 60, max: 99 }),
+ closedTasks: faker.number.int({ min: 30, max: 60 }),
+ },
+ {
+ icon: ,
+ name: 'Logo Design',
+ desc: 'Premium logo designs created by top logo designers. Create the branding of business. ',
+ client: faker.person.fullName(),
+ members: fakeAvatars(125),
+ startDate: dayjs(faker.date.past({ years: 1 })),
+ deadline: dayjs(faker.date.future({ years: 1 })),
+ messages: 232,
+ allHours: '580/445',
+ allTasks: faker.number.int({ min: 60, max: 99 }),
+ closedTasks: faker.number.int({ min: 30, max: 60 }),
+ },
+ ];
+ return (
+
+ {items.map((item) => (
+
+
+
+
+
+
+
+
+
-
-
-
- Start Date:
- {item.startDate.format('DD/MM/YYYY')}
-
+
+
+
+ Start Date:
+
+ {item.startDate.format('DD/MM/YYYY')}
+
+
-
- Deadline:
- {item.deadline.format('DD/MM/YYYY')}
-
-
- {item.desc}
-
+
+ Deadline:
+
+ {item.deadline.format('DD/MM/YYYY')}
+
+
+
+ {item.desc}
+
-
+
-
-
-
- All Hours:
- {item.allHours}
-
+
+
+
+ All Hours:
+ {item.allHours}
+
-
{item.deadline.diff(dayjs(), 'day')} days left
-
-
-
- {item.members.map((memberAvatar, index) => (
-
- ))}
-
-
-
- {item.messages}
-
-
-
-
-
- ))}
-
- );
+
+ {item.deadline.diff(dayjs(), 'day')} days left
+
+
+
+
+ {item.members.map((memberAvatar, index) => (
+
+ ))}
+
+
+
+ {item.messages}
+
+
+
+
+
+ ))}
+
+ );
}
diff --git a/src/pages/management/user/profile/teams-tab.tsx b/src/pages/management/user/profile/teams-tab.tsx
index 9add2c3..2fe3a84 100644
--- a/src/pages/management/user/profile/teams-tab.tsx
+++ b/src/pages/management/user/profile/teams-tab.tsx
@@ -7,79 +7,79 @@ import { IconButton, Iconify } from '@/components/icon';
import ProTag from '@/theme/antd/components/tag';
export default function TeamsTab() {
- const items = [
- {
- icon:
,
- name: 'React Developers',
- desc: 'We don’t make assumptions about the rest of your technology stack, so you can develop new features in React.',
- members: fakeAvatars(25),
- tags: ['React', 'AntD'],
- },
- {
- icon:
,
- name: 'Vue.js Dev Team',
- desc: 'The development of Vue and its ecosystem is guided by an international team, some of whom have chosen to be featured below.',
- members: fakeAvatars(20),
- tags: ['Vue.js', 'Developer'],
- },
- {
- icon:
,
- name: 'Figma Resources',
- desc: 'Explore, install, use, and remix thousands of plugins and files published to the Figma Community by designers and developers.',
- members: fakeAvatars(45),
- tags: ['UI/UX', 'Figma'],
- },
- {
- icon:
,
- name: 'Only Beginners',
- desc: 'Learn the basics of how websites work, front-end vs back-end, and using a code editor. Learn basic HTML, CSS, and…',
- members: fakeAvatars(50),
- tags: ['CSS', 'HTML'],
- },
- {
- icon:
,
- name: 'Creative Designers',
- desc: 'A design or product team is more than just the people on it. A team includes the people, the roles they play. ',
- members: fakeAvatars(55),
- tags: ['Sketch', 'XD'],
- },
- ];
- return (
-
- {items.map((item) => (
-
-
-
- {item.icon}
- {item.name}
+ const items = [
+ {
+ icon: ,
+ name: 'React Developers',
+ desc: 'We don’t make assumptions about the rest of your technology stack, so you can develop new features in React.',
+ members: fakeAvatars(25),
+ tags: ['React', 'AntD'],
+ },
+ {
+ icon: ,
+ name: 'Vue.js Dev Team',
+ desc: 'The development of Vue and its ecosystem is guided by an international team, some of whom have chosen to be featured below.',
+ members: fakeAvatars(20),
+ tags: ['Vue.js', 'Developer'],
+ },
+ {
+ icon: ,
+ name: 'Figma Resources',
+ desc: 'Explore, install, use, and remix thousands of plugins and files published to the Figma Community by designers and developers.',
+ members: fakeAvatars(45),
+ tags: ['UI/UX', 'Figma'],
+ },
+ {
+ icon: ,
+ name: 'Only Beginners',
+ desc: 'Learn the basics of how websites work, front-end vs back-end, and using a code editor. Learn basic HTML, CSS, and…',
+ members: fakeAvatars(50),
+ tags: ['CSS', 'HTML'],
+ },
+ {
+ icon: ,
+ name: 'Creative Designers',
+ desc: 'A design or product team is more than just the people on it. A team includes the people, the roles they play. ',
+ members: fakeAvatars(55),
+ tags: ['Sketch', 'XD'],
+ },
+ ];
+ return (
+
+ {items.map((item) => (
+
+
+
+ {item.icon}
+ {item.name}
-
-
-
-
-
-
-
-
-
- {item.desc}
-
-
-
- ))}
-
- );
+
+
+
+
+
+
+
+
+
+ {item.desc}
+
+
+
+ ))}
+
+ );
}
diff --git a/src/pages/menu-level/menu-level-1a/index.tsx b/src/pages/menu-level/menu-level-1a/index.tsx
index 3a50902..7f4f0e7 100644
--- a/src/pages/menu-level/menu-level-1a/index.tsx
+++ b/src/pages/menu-level/menu-level-1a/index.tsx
@@ -1,5 +1,5 @@
import { Typography } from 'antd';
export default function MenuLevel() {
- return
Menu Level: 1a ;
+ return
Menu Level: 1a ;
}
diff --git a/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx b/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx
index 9196738..8b05da7 100644
--- a/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx
+++ b/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx
@@ -1,5 +1,5 @@
import { Typography } from 'antd';
export default function MenuLevel() {
- return
Menu Level: 2a ;
+ return
Menu Level: 2a ;
}
diff --git a/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx b/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx
index 295ea3a..fefd471 100644
--- a/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx
+++ b/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx
@@ -1,5 +1,5 @@
import { Typography } from 'antd';
export default function MenuLevel() {
- return
Menu Level: 3a ;
+ return
Menu Level: 3a ;
}
diff --git a/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx b/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx
index 184dd02..7a9ff2e 100644
--- a/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx
+++ b/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx
@@ -1,5 +1,5 @@
import { Typography } from 'antd';
export default function MenuLevel() {
- return
Menu Level: 3b ;
+ return
Menu Level: 3b ;
}
diff --git a/src/pages/setting/menus/list.page.tsx b/src/pages/setting/menus/list.page.tsx
index d22412a..d974dab 100644
--- a/src/pages/setting/menus/list.page.tsx
+++ b/src/pages/setting/menus/list.page.tsx
@@ -1,9 +1,7 @@
-import { Button, Card, Col, Form, Input, Row, Space, Tree, message } from 'antd';
-import { useState } from 'react';
-
import { SearchOutlined } from '@ant-design/icons';
-
+import { Button, Card, Col, Form, Input, Row, Space, Tree, message } from 'antd';
import { DataNode } from 'antd/es/tree';
+import { useState } from 'react';
import { useDeleteMenu, useListMenuTree } from '@/services/menu';
diff --git a/src/pages/sys/error/Page403.tsx b/src/pages/sys/error/Page403.tsx
index 2e13f3b..9bf59e5 100644
--- a/src/pages/sys/error/Page403.tsx
+++ b/src/pages/sys/error/Page403.tsx
@@ -11,119 +11,125 @@ import { useThemeToken } from '@/theme/hooks';
const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
export default function Page403() {
- const {
- colorBgBase,
- colorTextBase,
- colorPrimary,
- colorPrimaryActive,
- colorPrimaryTextActive,
- colorPrimaryHover,
- } = useThemeToken();
- return (
- <>
-
- 403 No Permission!
-
+ const {
+ colorBgBase,
+ colorTextBase,
+ colorPrimary,
+ colorPrimaryActive,
+ colorPrimaryTextActive,
+ colorPrimaryHover,
+ } = useThemeToken();
+ return (
+ <>
+
+ 403 No Permission!
+
-
-
-
-
- No permission
-
-
+
+
+
+
+ No permission
+
+
-
-
- The page you are trying access has restricted access. Please refer to your system
- administrator
-
-
+
+
+ The page you are trying access has restricted access. Please refer to
+ your system administrator
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
- {/* hand */}
-
-
+ {/* hand */}
+
+
- {/* 0 */}
-
- {/* 4_3 */}
-
-
-
-
-
-
-
-
-
+ {/* 0 */}
+
+ {/* 4_3 */}
+
+
+
+
+
+
+
+
+
-
- Go to Home
-
-
-
- >
- );
+
+ Go to Home
+
+
+
+ >
+ );
}
diff --git a/src/pages/sys/error/Page404.tsx b/src/pages/sys/error/Page404.tsx
index 273ef63..f031965 100644
--- a/src/pages/sys/error/Page404.tsx
+++ b/src/pages/sys/error/Page404.tsx
@@ -11,110 +11,116 @@ import { useThemeToken } from '@/theme/hooks';
const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
export default function Page404() {
- const {
- colorBgBase,
- colorTextBase,
- colorPrimary,
- colorPrimaryActive,
- colorPrimaryTextActive,
- colorPrimaryHover,
- } = useThemeToken();
- return (
- <>
-
- 404 Page Not Found!
-
+ const {
+ colorBgBase,
+ colorTextBase,
+ colorPrimary,
+ colorPrimaryActive,
+ colorPrimaryTextActive,
+ colorPrimaryHover,
+ } = useThemeToken();
+ return (
+ <>
+
+ 404 Page Not Found!
+
-
-
-
-
- Sorry, Page Not Found!
-
-
+
+
+
+
+ Sorry, Page Not Found!
+
+
-
-
- Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped the URL?
- Be sure to check your spelling.
-
-
+
+
+ Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve
+ mistyped the URL? Be sure to check your spelling.
+
+
-
-
-
-
-
-
-
-
- {/* background */}
-
- {/* character */}
-
- {/* sun */}
-
- {/* sun */}
-
- {/* 0 */}
-
- {/* 4_4 */}
-
- {/* cloud */}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {/* background */}
+
+ {/* character */}
+
+ {/* sun */}
+
+ {/* sun */}
+
+ {/* 0 */}
+
+ {/* 4_4 */}
+
+ {/* cloud */}
+
+
+
+
+
+
+
+
+
-
- Go to Home
-
-
-
- >
- );
+
+ Go to Home
+
+
+
+ >
+ );
}
diff --git a/src/pages/sys/error/Page500.tsx b/src/pages/sys/error/Page500.tsx
index 7e58ebe..18c0ba2 100644
--- a/src/pages/sys/error/Page500.tsx
+++ b/src/pages/sys/error/Page500.tsx
@@ -11,151 +11,157 @@ import { useThemeToken } from '@/theme/hooks';
const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
export default function Page() {
- const { colorBgBase, colorTextBase, colorPrimary } = useThemeToken();
- return (
- <>
-
- 500 Internal Server Error!
-
+ const { colorBgBase, colorTextBase, colorPrimary } = useThemeToken();
+ return (
+ <>
+
+ 500 Internal Server Error!
+
-
-
-
-
- 500 Internal Server Error
-
-
+
+
+
+
+ 500 Internal Server Error
+
+
-
-
- There was an error, please try again later.
-
-
+
+
+ There was an error, please try again later.
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- Go to Home
-
-
-
- >
- );
+
+ Go to Home
+
+
+
+ >
+ );
}
diff --git a/src/pages/sys/login/Login.tsx b/src/pages/sys/login/Login.tsx
index 236e547..f762f01 100644
--- a/src/pages/sys/login/Login.tsx
+++ b/src/pages/sys/login/Login.tsx
@@ -19,48 +19,50 @@ import ResetForm from './ResetForm';
const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
function Login() {
- const { t } = useTranslation();
- const token = useUserToken();
- const { colorBgElevated } = useThemeToken();
+ const { t } = useTranslation();
+ const token = useUserToken();
+ const { colorBgElevated } = useThemeToken();
- // 判断用户是否有权限
- if (token.accessToken) {
- // 如果有授权,则跳转到首页
- return
;
- }
+ // 判断用户是否有权限
+ if (token.accessToken) {
+ // 如果有授权,则跳转到首页
+ return
;
+ }
- const gradientBg = Color(colorBgElevated).alpha(0.9).toString();
- const bg = `linear-gradient(${gradientBg}, ${gradientBg}) center center / cover no-repeat,url(${Overlay2})`;
+ const gradientBg = Color(colorBgElevated).alpha(0.9).toString();
+ const bg = `linear-gradient(${gradientBg}, ${gradientBg}) center center / cover no-repeat,url(${Overlay2})`;
- return (
-
-
-
Slash Admin
-
-
- {t('sys.login.signInSecondTitle')}
-
-
+ return (
+
+
+
+ Slash Admin
+
+
+
+ {t('sys.login.signInSecondTitle')}
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
- );
+
+
+
+
+ );
}
export default Login;
diff --git a/src/pages/sys/login/LoginForm.tsx b/src/pages/sys/login/LoginForm.tsx
index 6b3a85f..a45967a 100644
--- a/src/pages/sys/login/LoginForm.tsx
+++ b/src/pages/sys/login/LoginForm.tsx
@@ -12,129 +12,148 @@ import { useThemeToken } from '@/theme/hooks';
import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProvider';
function LoginForm() {
- const { t } = useTranslation();
- const themeToken = useThemeToken();
- const [loading, setLoading] = useState(false);
+ const { t } = useTranslation();
+ const themeToken = useThemeToken();
+ const [loading, setLoading] = useState(false);
- const { loginState, setLoginState } = useLoginStateContext();
- const signIn = useSignIn();
+ const { loginState, setLoginState } = useLoginStateContext();
+ const signIn = useSignIn();
- if (loginState !== LoginStateEnum.LOGIN) return null;
+ if (loginState !== LoginStateEnum.LOGIN) return null;
- const handleFinish = async ({ account, password }: SignInReq) => {
- setLoading(true);
- try {
- await signIn({ account, password });
- } finally {
- setLoading(false);
- }
- };
- return (
- <>
-
{t('sys.login.signInFormTitle')}
-
+
+ >
+ );
}
export default LoginForm;
diff --git a/src/pages/sys/login/MobileForm.tsx b/src/pages/sys/login/MobileForm.tsx
index f82c46a..be33986 100644
--- a/src/pages/sys/login/MobileForm.tsx
+++ b/src/pages/sys/login/MobileForm.tsx
@@ -8,84 +8,98 @@ import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProv
const { Countdown } = Statistic;
function MobileForm() {
- const { t } = useTranslation();
- const onFinish = (values: any) => {
- console.log('Received values of form: ', values);
- };
+ const { t } = useTranslation();
+ const onFinish = (values: any) => {
+ console.log('Received values of form: ', values);
+ };
- const [countdown, setCountdown] = useState(0); // 倒计时的秒数
- const [second, setSecond] = useState(0);
- const { loginState, backToLogin } = useLoginStateContext();
+ const [countdown, setCountdown] = useState(0); // 倒计时的秒数
+ const [second, setSecond] = useState(0);
+ const { loginState, backToLogin } = useLoginStateContext();
- if (loginState !== LoginStateEnum.MOBILE) return null;
+ if (loginState !== LoginStateEnum.MOBILE) return null;
- const start = () => {
- setCountdown(60);
- setSecond(60);
- };
+ const start = () => {
+ setCountdown(60);
+ setSecond(60);
+ };
- const reset = () => {
- // TODO: 发送验证码请求
+ const reset = () => {
+ // TODO: 发送验证码请求
- // 启动倒计时
- setCountdown(0);
- setSecond(60);
- };
- return (
- <>
-
+ // 启动倒计时
+ setCountdown(0);
+ setSecond(60);
+ };
+ return (
+ <>
+