+ {children}
+
+ );
+}
diff --git a/src/components/chart/chart.tsx b/src/components/chart/chart.tsx
new file mode 100644
index 0000000..c5fd5c6
--- /dev/null
+++ b/src/components/chart/chart.tsx
@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import ApexChart from 'react-apexcharts';
+
+import { useSettings } from '@/store/settingStore';
+import { useThemeToken } from '@/theme/hooks';
+
+import { StyledApexChart } from './styles';
+
+import type { Props as ApexChartProps } from 'react-apexcharts';
+
+function Chart(props: ApexChartProps) {
+ const { themeMode } = useSettings();
+ const theme = useThemeToken();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!isSimple && (
+
+
+
+
+ )}
+
+
+
+
+ {!isSimple && }
+ {!isSimple && }
+
+
+ {!isSimple && (
+
+
+
+
+ )}
+
+ {!isSimple && (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!isSimple && }
+
+
+
+
+ );
+}
diff --git a/src/components/loading/index.tsx b/src/components/loading/index.tsx
new file mode 100644
index 0000000..e1d4954
--- /dev/null
+++ b/src/components/loading/index.tsx
@@ -0,0 +1,2 @@
+export * from './circle-loading';
+export * from './line-loading';
diff --git a/src/components/loading/line-loading.tsx b/src/components/loading/line-loading.tsx
new file mode 100644
index 0000000..9fb2310
--- /dev/null
+++ b/src/components/loading/line-loading.tsx
@@ -0,0 +1,41 @@
+import { Progress } from 'antd';
+import Color from 'color';
+import { useEffect, useState } from 'react';
+
+import { useThemeToken } from '@/theme/hooks';
+
+export function LineLoading() {
+ const { colorTextBase, colorBgContainerDisabled } = useThemeToken();
+ const [percent, setPercent] = useState(10);
+ const [increasing, setIncreasing] = useState(true);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ if (increasing) {
+ setPercent((prevPercent) => prevPercent + 20);
+ if (percent === 100) {
+ setIncreasing(false);
+ }
+ } else {
+ setPercent(0);
+ setIncreasing(true);
+ }
+ }, 50);
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, [percent, increasing]);
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/locale-picker/index.tsx b/src/components/locale-picker/index.tsx
new file mode 100644
index 0000000..f126692
--- /dev/null
+++ b/src/components/locale-picker/index.tsx
@@ -0,0 +1,38 @@
+import { Dropdown } from 'antd';
+
+import useLocale, { LANGUAGE_MAP } from '@/locales/useLocale';
+
+import { IconButton, SvgIcon } from '../icon';
+
+import { LocalEnum } from '#/enum';
+import type { MenuProps } from 'antd';
+
+type Locale = keyof typeof LocalEnum;
+
+/**
+ * Locale Picker
+ */
+export default function LocalePicker() {
+ const { setLocale, locale } = useLocale();
+
+ const localeList: MenuProps['items'] = Object.values(LANGUAGE_MAP).map((item) => {
+ return {
+ key: item.locale,
+ label: item.label,
+ icon:
+
+ );
+
+ const renderContent = (
+ Upload Photo
+ handelHover(true)}
+ onMouseLeave={() => handelHover(false)}
+ >
+ {imageUrl ? renderPreview : null}
+ {!imageUrl || isHover ? renderPlaceholder : null}
+
+ );
+
+ const defaultHelperText = (
+ max size of {fBytes(3145728)} +
{helperText || defaultHelperText}
;
+
+ return (
+
+ {placeholder || (
+
+
+
+ )}
+ {closeButton}
+
+ {name}
+
+ {fBytes(size)}
+
+
+ {closeButton}
+
+
+
+ Drop or Select file
+
+
+ Drop files here or click
+
+ browse
+
+ thorough your machine
+
+
+
+
+
+
+ );
+
+ const items: MenuProps['items'] = [
+ { label:
+
+ {username}
+ {email}
+
+ setDrawerOpen(true)}>
+
+
+
+ setDrawerOpen(false)}
+ open={drawerOpen}
+ closable={false}
+ width={420}
+ bodyStyle={bodyStyle}
+ maskStyle={{ backgroundColor: 'transparent' }}
+ style={style}
+ extra={
+ {
+ setCount(0);
+ setDrawerOpen(false);
+ }}
+ >
+
+ }
+ footer={
+
+
+ );
+}
+
+function NoticeTab() {
+ const themeToken = useThemeToken();
+ const tabChildren: ReactNode = (
+
+ View All
+
+ }
+ >
+
+
+ );
+ const items: TabsProps['items'] = [
+ {
+ key: '1',
+ label: (
+
+ })
+
+
+
+
+
+
+ {faker.person.fullName()}
+ sent you a frind request
+
+ about 1 hour ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {faker.person.fullName()}
+ added file to
+ File Manager
+
+ 5 hour ago
+
+
+
+ @{faker.person.fullName()}
+ {faker.lorem.lines(2)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {faker.person.fullName()}
+ mentioned you in
+ Slash Admin
+
+ 1 days ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {faker.person.fullName()}
+ added file to
+ File Manager
+
+ 2 days ago
+
+
+
+ Witout Me
+ 1.2GB·30 min ago
+
+
+
+
+
+
+
+
+
+
+ {faker.person.fullName()}
+ request a payment of
+ $3000
+
+ 4 days ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Your order is placed waiting for shipping
+
+ 4 days ago{' '}
+
+
+
+
+
+
+
+
+ You have new mail
+
+ 5 days ago{' '}
+
+
+
+
+
+
+
+
+ You have new message 5 unread message
+
+ 7 days ago
+
+
+
+
+
+
+
+ Delivery processing your order is being shipped
+
+ 8 days ago{' '}
+
+ All
+ 22
+
+ ),
+ children: tabChildren,
+ },
+ {
+ key: '2',
+ label: (
+
+ Unread
+ 12
+
+ ),
+ children: tabChildren,
+ },
+ {
+ key: '3',
+ label: (
+
+ Archived
+ 10
+
+ ),
+ children: tabChildren,
+ },
+ ];
+ return (
+
+
+ );
+}
diff --git a/src/layouts/_common/search-bar.tsx b/src/layouts/_common/search-bar.tsx
new file mode 100644
index 0000000..53eaf86
--- /dev/null
+++ b/src/layouts/_common/search-bar.tsx
@@ -0,0 +1,248 @@
+import { Empty, GlobalToken, Input, InputRef, Modal } from 'antd';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
+import Color from 'color';
+import { CSSProperties, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useBoolean, useEvent, useKeyPressEvent } from 'react-use';
+import styled from 'styled-components';
+
+import { IconButton, SvgIcon } from '@/components/icon';
+import Scrollbar from '@/components/scrollbar';
+import { useFlattenedRoutes, useRouter } from '@/router/hooks';
+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
+
+
+ ⌘K
+
+
+
+ }
+ >
+ {searchResult.length === 0 ? (
+
+ ↑
+ ↓
+ to navigate
+
+
+ ↵
+ to select
+
+
+ ESC
+ to close
+
+
+ {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}
+
+ ))}
+
+
+ setDrawerOpen(true)}
+ >
+
+
+
+
+
+ {/* theme mode */}
+
+
+
+
+ {/* theme layout */}
+
+ 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 stretch */}
+
+ 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%',
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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 */}
+
+ Stretch
+
+
+
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+ {/* Page config */}
+
+ Presets
+
+
+ {Object.entries(colorPrimarys).map(([preset, color]) => (
+ setThemeColorPresets(preset as ThemeColorPresets)}
+ >
+
+ ))}
+
+
+
+
+
+
+ Page
+
+
+
+
+ setBreadCrumn(checked)}
+ />
+
+ BreadCrumb
+
+ setMultiTab(checked)}
+ />
+
+ Multi Tab
+
+
+
+ {themeLayout !== ThemeLayout.Horizontal ? (
+ setDrawerOpen(true)} className="h-10 w-10 md:hidden">
+
+ ) : (
+
+
+ {breadCrumb ?
+
+ window.open('https://github.com/d3george/slash-admin')}>
+
+
+
+
+
+
+
+ );
+
+ const horizontalLayout = (
+
+
+ );
+
+ const layout = themeLayout !== ThemeLayout.Horizontal ? verticalLayout : horizontalLayout;
+
+ return (
+
+
+
+ {multiTab ?
+ {
+ if (tab.key === activeTabRoutePath) return;
+ setHoveringTabKey(tab.key);
+ }}
+ onMouseLeave={() => setHoveringTabKey('')}
+ >
+ {
+ e.stopPropagation();
+ closeTab(tab.key);
+ }}
+ style={{
+ visibility:
+ (tab.key !== activeTabRoutePath && tab.key !== hoveringTabKey) ||
+ tabs.length === 1
+ ? 'hidden'
+ : 'visible',
+ }}
+ />
+
+ {t(tab.label)}
+
+ {tab.children}
+
+ ),
+ }));
+ }, [tabs, renderTabLabel]);
+
+ /**
+ * 拖拽结束事件
+ */
+ 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);
+ };
+
+ /**
+ * 渲染 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',
+ };
+
+ 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) => (
+
+
+
+ );
+ };
+
+ /**
+ * 路由变化时，滚动到指定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.current!.addEventListener('mouseenter', () => {
+ scrollContainer.current!.addEventListener('wheel', handleMouseWheel);
+ });
+ scrollContainer.current!.addEventListener('mouseleave', () => {
+ scrollContainer.current!.removeEventListener('wheel', handleMouseWheel);
+ });
+ }, []);
+
+ return (
+
+
+ )}
+
+ {tabs.map((tab, index) => (
+
+ {provided.placeholder}
+ push(tab.key)}
+ >
+
+ {(provided) => (
+
+
+ ))}
+
+ {renderTabLabel(tab)}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/layouts/dashboard/nav.tsx b/src/layouts/dashboard/nav.tsx
new file mode 100644
index 0000000..933bdce
--- /dev/null
+++ b/src/layouts/dashboard/nav.tsx
@@ -0,0 +1,153 @@
+import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
+import { Menu, MenuProps } from 'antd';
+import { ItemType } from 'antd/es/menu/hooks/useItems';
+import Color from 'color';
+import { CSSProperties, useEffect, useState } from 'react';
+import { useLocation, useMatches, useNavigate } from 'react-router-dom';
+
+import Logo from '@/components/logo';
+import Scrollbar from '@/components/scrollbar';
+import { useRouteToMenuFn, usePermissionRoutes } from '@/router/hooks';
+import { menuFilter } from '@/router/utils';
+import { useSettingActions, useSettings } from '@/store/settingStore';
+import { useThemeToken } from '@/theme/hooks';
+
+import { NAV_COLLAPSED_WIDTH, NAV_WIDTH } from './config';
+
+import { ThemeLayout } from '#/enum';
+
+type Props = {
+ 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
+
+ {/* */}
+
+
+
+ );
+}
diff --git a/src/layouts/simple/index.tsx b/src/layouts/simple/index.tsx
new file mode 100644
index 0000000..8742b7f
--- /dev/null
+++ b/src/layouts/simple/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useThemeToken } from '@/theme/hooks';
+
+import HeaderSimple from '../_common/header-simple';
+
+type Props = {
+ children: React.ReactNode;
+};
+export default function SimpleLayout({ children }: Props) {
+ const { colorBgElevated, colorTextBase } = useThemeToken();
+ return (
+
+ {themeLayout === ThemeLayout.Mini ? (
+
+
+
+
+ );
+}
diff --git a/src/locales/i18n.ts b/src/locales/i18n.ts
new file mode 100644
index 0000000..3ea8b06
--- /dev/null
+++ b/src/locales/i18n.ts
@@ -0,0 +1,35 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+import { getStringItem } from '@/utils/storage';
+
+import en_US from './lang/en_US';
+import zh_CN from './lang/zh_CN';
+
+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 },
+ },
+ });
+
+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
new file mode 100644
index 0000000..d21ce6c
--- /dev/null
+++ b/src/locales/lang/en_US/common.json
@@ -0,0 +1,22 @@
+{
+ "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",
+
+ "redo": "Refresh",
+ "back": "Back",
+
+ "light": "Light",
+ "dark": "Dark"
+ }
+}
diff --git a/src/locales/lang/en_US/index.ts b/src/locales/lang/en_US/index.ts
new file mode 100644
index 0000000..ebc57c5
--- /dev/null
+++ b/src/locales/lang/en_US/index.ts
@@ -0,0 +1,7 @@
+import common from './common.json';
+import sys from './sys.json';
+
+export default {
+ ...common,
+ ...sys,
+};
diff --git a/src/locales/lang/en_US/sys.json b/src/locales/lang/en_US/sys.json
new file mode 100644
index 0000000..acd126f
--- /dev/null
+++ b/src/locales/lang/en_US/sys.json
@@ -0,0 +1,143 @@
+{
+ "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",
+
+ "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",
+
+ "loginSuccessTitle": "Login successful",
+ "loginSuccessDesc": "Welcome back",
+
+ "accountPlaceholder": "Please input username",
+ "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",
+
+ "userName": "Username",
+ "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"
+ }
+ }
+ },
+ "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"
+ }
+ }
+ }
+}
diff --git a/src/locales/lang/zh_CN/common.json b/src/locales/lang/zh_CN/common.json
new file mode 100644
index 0000000..40f268f
--- /dev/null
+++ b/src/locales/lang/zh_CN/common.json
@@ -0,0 +1,22 @@
+{
+ "common": {
+ "okText": "确认",
+ "closeText": "关闭",
+ "cancelText": "取消",
+ "loadingText": "加载中...",
+ "saveText": "保存",
+ "delText": "删除",
+ "resetText": "重置",
+ "searchText": "搜索",
+ "queryText": "查询",
+
+ "inputText": "请输入",
+ "chooseText": "请选择",
+
+ "redo": "刷新",
+ "back": "返回",
+
+ "light": "亮色主题",
+ "dark": "黑暗主题"
+ }
+}
diff --git a/src/locales/lang/zh_CN/index.ts b/src/locales/lang/zh_CN/index.ts
new file mode 100644
index 0000000..ebc57c5
--- /dev/null
+++ b/src/locales/lang/zh_CN/index.ts
@@ -0,0 +1,7 @@
+import common from './common.json';
+import sys from './sys.json';
+
+export default {
+ ...common,
+ ...sys,
+};
diff --git a/src/locales/lang/zh_CN/sys.json b/src/locales/lang/zh_CN/sys.json
new file mode 100644
index 0000000..63ba35b
--- /dev/null
+++ b/src/locales/lang/zh_CN/sys.json
@@ -0,0 +1,142 @@
+{
+ "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": "重置密码",
+
+ "signInPrimaryTitle": "欢迎回来",
+ "signInSecondTitle": "开箱即用的中后台管理系统",
+ "signInDesc": "输入您的个人详细信息开始使用！",
+ "policy": "我同意xxx隐私政策",
+ "scanSign": "扫码后点击'确认'，即可完成登录",
+ "forgetFormSecondTitle": "请输入与您的帐户关联的电子邮件地址，我们将通过电子邮件向您发送重置密码的链接。",
+
+ "loginButton": "登录",
+ "registerButton": "注册",
+ "rememberMe": "记住我",
+ "forgetPassword": "忘记密码?",
+ "otherSignIn": "其他登录方式",
+ "sendSmsButton": "发送验证码",
+ "sendSmsText": "{{second}}秒后重新获取",
+ "sendEmailButton": "发送邮件",
+
+ "loginSuccessTitle": "登录成功",
+ "loginSuccessDesc": "欢迎回来",
+
+ "accountPlaceholder": "请输入账号",
+ "passwordPlaceholder": "请输入密码",
+ "confirmPasswordPlaceholder": "请输入确认密码",
+ "emaildPlaceholder": "请输入邮箱",
+ "smsPlaceholder": "请输入验证码",
+ "mobilePlaceholder": "请输入手机号码",
+ "policyPlaceholder": "勾选后才能注册",
+ "diffPwd": "两次输入密码不一致",
+
+ "userName": "账号",
+ "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"
+ }
+ }
+ },
+ "disabled": "项目禁用",
+ "label": "项目标签",
+ "frame": "项目外部链接",
+ "external_link": "外链",
+ "iframe": "内嵌",
+ "blank": "空白",
+ "calendar": "日历",
+ "kanban": "看板",
+ "error": {
+ "index": "异常页",
+ "403": "403",
+ "404": "404",
+ "500": "500"
+ }
+ }
+ }
+}
diff --git a/src/locales/useLocale.ts b/src/locales/useLocale.ts
new file mode 100644
index 0000000..8abbbf2
--- /dev/null
+++ b/src/locales/useLocale.ts
@@ -0,0 +1,50 @@
+import en_US from 'antd/locale/en_US';
+import zh_CN from 'antd/locale/zh_CN';
+import { useTranslation } from 'react-i18next';
+
+import { LocalEnum } from '#/enum';
+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;
+};
+
+export const LANGUAGE_MAP: Record
+
+ ))}
+ {item.type.toUpperCase()}
+ -
+ {item.values.map((item) => (
+
- onChangeVarient(item)} + style={selectedStyle(item)} + > + {item} + + ))} +
+
+ {isKenburns ? (
+
+
+ );
+}
diff --git a/src/pages/components/animate/views/background/index.tsx b/src/pages/components/animate/views/background/index.tsx
new file mode 100644
index 0000000..63b0e06
--- /dev/null
+++ b/src/pages/components/animate/views/background/index.tsx
@@ -0,0 +1,55 @@
+import { Card, Row, Col } from 'antd';
+import { useMemo, useState } from 'react';
+
+import ControlPanel from '../../control-panel';
+
+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 onRefresh = () => {
+ setSelectedVariant(defaultValue.selectedVariant);
+ };
+ return (
+
+
+ );
+}
diff --git a/src/pages/components/animate/views/inview/container.tsx b/src/pages/components/animate/views/inview/container.tsx
new file mode 100644
index 0000000..ecf805b
--- /dev/null
+++ b/src/pages/components/animate/views/inview/container.tsx
@@ -0,0 +1,55 @@
+import { m } from 'framer-motion';
+import { repeat } from 'ramda';
+import { useMemo } from 'react';
+
+import Cover3 from '@/assets/images/cover/cover_3.jpg';
+import MotionContainer from '@/components/animate/motion-container';
+import { getVariant } from '@/components/animate/variants';
+import { useThemeToken } from '@/theme/hooks';
+
+const TEXT = 'SlashAdmin';
+type Props = {
+ 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]);
+
+ 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
new file mode 100644
index 0000000..89c120c
--- /dev/null
+++ b/src/pages/components/animate/views/inview/index.tsx
@@ -0,0 +1,115 @@
+import { Card, Col, Row } from 'antd';
+import { useMemo, useState } from 'react';
+
+import ControlPanel from '../../control-panel';
+
+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'],
+ },
+];
+
+export default function Inview() {
+ const defaultValue = useMemo(() => {
+ return {
+ isText: false,
+ isMulti: false,
+ selectedVariant: 'slideInUp',
+ };
+ }, []);
+
+ const [isText, setIsText] = useState(defaultValue.isText);
+ const [isMulti, setIsMulti] = useState(defaultValue.isMulti);
+
+ const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+
+ const onRefresh = () => {
+ setIsText(defaultValue.isText);
+ setIsMulti(defaultValue.isMulti);
+ setSelectedVariant(defaultValue.selectedVariant);
+ };
+
+ return (
+
+
+ );
+}
diff --git a/src/pages/components/animate/views/scroll/container.tsx b/src/pages/components/animate/views/scroll/container.tsx
new file mode 100644
index 0000000..56c2626
--- /dev/null
+++ b/src/pages/components/animate/views/scroll/container.tsx
@@ -0,0 +1,30 @@
+import { Card, Typography } from 'antd';
+import { useMemo } from 'react';
+
+import MotionViewport from '@/components/animate/motion-viewport';
+import { getVariant } from '@/components/animate/variants';
+import { useThemeToken } from '@/theme/hooks';
+
+type Props = {
+ variant: string;
+};
+export default function ContainerView({ variant }: Props) {
+ const { colorBgLayout } = useThemeToken();
+ const varients = useMemo(() => getVariant(variant), [variant]);
+
+ return (
+
+
+
+ {isText ? null : (
+
+
+
+ )}
+
+ {[...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
new file mode 100644
index 0000000..a99de34
--- /dev/null
+++ b/src/pages/components/animate/views/scroll/index.tsx
@@ -0,0 +1,72 @@
+import { Card, Row, Col } from 'antd';
+import { useMemo, useState } from 'react';
+
+import ControlPanel from '../../control-panel';
+
+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 onRefresh = () => {
+ setSelectedVariant(defaultValue.selectedVariant);
+ };
+ return (
+
+
+ );
+}
diff --git a/src/pages/components/chart/index.tsx b/src/pages/components/chart/index.tsx
new file mode 100644
index 0000000..29f6633
--- /dev/null
+++ b/src/pages/components/chart/index.tsx
@@ -0,0 +1,99 @@
+import { Card, Col, Row, Typography } from 'antd';
+
+import { useThemeToken } from '@/theme/hooks';
+
+import ChartArea from './view/chart-area';
+import ChartBar from './view/chart-bar';
+import ChartColumnMultiple from './view/chart-column-multiple';
+import ChartColumnNegative from './view/chart-column-negative';
+import ChartColumnSingle from './view/chart-column-single';
+import ChartColumnStacked from './view/chart-column-Stacked';
+import ChartDonut from './view/chart-donut';
+import ChartLine from './view/chart-line';
+import ChartMixed from './view/chart-mixed';
+import ChartPie from './view/chart-pie';
+import ChartRadar from './view/chart-radar';
+import ChartRadial from './view/chart-radial';
+
+export default function ChartPage() {
+ const { colorPrimary } = useThemeToken();
+ return (
+ <>
+
+ {`import { StepBackwardOutlined } from '@ant-design/icons';`}
+ {`
+
+
+
+ {`
+
+
+
+ {`
+
+
+ + +## h2 + +
+ +**Paragraph** Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. + +
+ +[Link (https://www.google.com/)](https://www.google.com/) + +
+ +###### Lists + +
+ +- [x] Write the press release +- [ ] Update the website +- [ ] Contact the media + +
+ +--- + +
+ +###### A table: + +
+ +| Syntax | Description | Test Text | +| :--- | :----: | ---: | +| Header | Title | Here's this | +| Paragraph | Text | And more | + +
+ +\`\`\`tsx +import React from 'react'; +import ReactDOM from 'react-dom'; +import ReactMarkdown from 'react-markdown'; +import rehypeHighlight from 'rehype-highlight'; + +ReactDOM.render( +
+ + + +> A block quote with ~~strikethrough~~ and a URL: [https://reactjs.org](https://reactjs.org). + +`; + +export default function MarkdownPage() { + const [content] = useState(TEXT); + const { colorPrimary } = useThemeToken(); + return ( + <> +
+
+
+ {TEXT}
+
+ {TEXT}
+
+ {[...Array(4)].map((_, index) => (
+
+ {TEXT}
+ ))}
+
+
+ Upload File
+
+
+ );
+ const UploadFileTab = (
+
+ 
+ {title}
+ {subtitle}
+
+ );
+}
diff --git a/src/pages/dashboard/analysis/analysis-news.tsx b/src/pages/dashboard/analysis/analysis-news.tsx
new file mode 100644
index 0000000..c6b58d0
--- /dev/null
+++ b/src/pages/dashboard/analysis/analysis-news.tsx
@@ -0,0 +1,35 @@
+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(),
+ },
+];
+export default function AnalysisNews() {
+ return (
+ - (
+
+ 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
new file mode 100644
index 0000000..e2f381d
--- /dev/null
+++ b/src/pages/dashboard/analysis/analysis-tasks.tsx
@@ -0,0 +1,48 @@
+import { faker } from '@faker-js/faker';
+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 (
+ - (
+
+
+ );
+}
diff --git a/src/pages/dashboard/analysis/index.tsx b/src/pages/dashboard/analysis/index.tsx
new file mode 100644
index 0000000..84c6a61
--- /dev/null
+++ b/src/pages/dashboard/analysis/index.tsx
@@ -0,0 +1,173 @@
+import { Card, Col, Row, Typography } from 'antd';
+import Color from 'color';
+
+import glass_bag from '@/assets/images/glass/ic_glass_bag.png';
+import glass_buy from '@/assets/images/glass/ic_glass_buy.png';
+import glass_message from '@/assets/images/glass/ic_glass_message.png';
+import glass_users from '@/assets/images/glass/ic_glass_users.png';
+import { Iconify } from '@/components/icon';
+import ChartBar from '@/pages/components/chart/view/chart-bar';
+import ChartMixed from '@/pages/components/chart/view/chart-mixed';
+import ChartPie from '@/pages/components/chart/view/chart-pie';
+import ChartRadar from '@/pages/components/chart/view/chart-radar';
+import { useThemeToken } from '@/theme/hooks';
+
+import AnalysisCard from './analysis-card';
+import AnalysisNews from './analysis-news';
+import AnalysisOrderTimeline from './analysis-order-timeline';
+import AnalysisTasks from './analysis-tasks';
+import AnalysisTrafficCard from './analysis-traffic-card';
+
+function Analysis() {
+ const theme = useThemeToken();
+ return (
+ <>
+ {icon}
+ {title}
+
+ {subtitle}
+
+
+
+ Welcome back 👋
+{username}
++ If you are going to use a passage of Lorem Ipsum, you need to be sure there is not + anything. +
+ + + +
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+
+ );
+}
diff --git a/src/pages/dashboard/workbench/current-download.tsx b/src/pages/dashboard/workbench/current-download.tsx
new file mode 100644
index 0000000..2198a9b
--- /dev/null
+++ b/src/pages/dashboard/workbench/current-download.tsx
@@ -0,0 +1,56 @@
+import { Typography } from 'antd';
+
+import Card from '@/components/card';
+import Chart from '@/components/chart/chart';
+import useChart from '@/components/chart/useChart';
+
+export default function CurrentDownload() {
+ return (
+
+ {title}
+ {subtitle}
+
+
+
+
+
+
+ ))}
+
+
+ {faker.person.fullName()}
+
+
+
+
+
+
+ {iconify}
;
+};
+export default function TopInstalled() {
+ return (
+
+
+ ))}
+
+
+
+ {platformIcon('android')}
+ {item.android}
+
+
+
+ {platformIcon('windows')}
+ {item.windows}
+
+
+
+ {platformIcon('ios')}
+ {item.ios}
+
+
+
+ ))}
+
+ {item.logo}
+
+
+
+ {item.title}
+
+
+
+ {item.platform === 'Mac' ? (
+ {item.type}
+
+
+
+
+
+
+ {title}
+
+ {increase ? (
+
+
+ {increase ? '+' : '-'}
+ {percent}
+
+ {count}
+Blog
;
+}
+
+export default Blog;
diff --git a/src/pages/management/system/organization/index.tsx b/src/pages/management/system/organization/index.tsx
new file mode 100644
index 0000000..90dbc4e
--- /dev/null
+++ b/src/pages/management/system/organization/index.tsx
@@ -0,0 +1,230 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+ 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';
+import { useEffect, useState } from 'react';
+
+import orgService from '@/api/services/orgService';
+import { IconButton, Iconify } from '@/components/icon';
+import ProTag from '@/theme/antd/components/tag';
+
+import OrganizationChart from './organization-chart';
+
+import { Organization } from '#/entity';
+
+type SearchFormFieldType = Pick
+ onEdit(record)}>
+
+
+
+
+
+
+ ),
+ },
+ ];
+
+ // rowSelection objects indicates the need for row selection
+ const rowSelection: TableRowSelection{t(record.label)}
,
+ },
+ {
+ title: 'Type',
+ dataIndex: 'type',
+ width: 60,
+ render: (_, record) =>
+ onEdit(record)}>
+
+
+
+
+
+
+ ),
+ },
+ ];
+
+ const onCreate = () => {
+ setPermissionModalProps((prev) => ({
+ ...prev,
+ show: true,
+ ...defaultPermissionValue,
+ }));
+ };
+
+ const onEdit = (formValue: Permission) => {
+ setPermissionModalProps((prev) => ({
+ ...prev,
+ show: true,
+ title: 'Edit',
+ formValue,
+ }));
+ };
+ return (
+
+ onEdit(record)}>
+
+
+
+
+
+
+ ),
+ },
+ ];
+
+ 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,
+ }));
+ };
+
+ return (
+
+ 
+
+ );
+ },
+ },
+ {
+ title: 'Role',
+ dataIndex: 'role',
+ align: 'center',
+ width: 120,
+ render: (role: Role) =>
+ {record.username}
+
+ {record.email}
+
+
+
+ {}}>
+
+
+
+
+
+
+ ),
+ },
+ ];
+
+ const onCreate = () => {};
+
+ return (
+ Public Profile
+
+
+ ),
+ children:
+
+ ),
+ children:
+
+ ),
+ children:
+
+
+
+
+
+ Email me when someone answers on my form
+
+
+ Email me when someone comments onmy article
+
+
+ Email me hen someone follows me
+
+
+
+
+
+
+ News and announcements
+
+
+ Weekly product updates
+
+
+ Weekly blog digest
+
+
+
+
+
+
+
+ {item.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+
+ {item.projects}
+ Projects
+
+
+ {item.tasks}
+ Tasks
+
+
+ {item.connections}
+ Tasks
+
+
+
+
+
+
+
+ 
+
+
+ {username}
+ TS FullStack
+
+
+
+
+ {tabs.map((tab, index) => (
+
+ ))}
+
+ {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
new file mode 100644
index 0000000..a682f0a
--- /dev/null
+++ b/src/pages/management/user/profile/profile-tab.tsx
@@ -0,0 +1,363 @@
+import { faker } from '@faker-js/faker';
+import { Row, Col, Typography, Timeline, Table, Space, Avatar, Progress } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+
+import { fakeAvatars } from '@/_mock/utils';
+import Card from '@/components/card';
+import { IconButton, Iconify, SvgIcon } from '@/components/icon';
+import Scrollbar from '@/components/scrollbar';
+import { useUserInfo } from '@/store/userStore';
+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;
+}
+
+export default function ProfileTab() {
+ const { username } = useUserInfo();
+ const theme = useThemeToken();
+ const AboutItems = [
+ { icon:
+
+
+ ),
+ },
+ {
+ title: 'LEADER',
+ dataIndex: 'leader',
+ render: (val) => {val},
+ },
+ {
+ title: 'TEAM',
+ dataIndex: 'team',
+ render: (val: string[]) => (
+
+ {record.name}
+ {record.date}
+
+
+ About
+ {faker.lorem.paragraph()}
+
+
+
+ {AboutItems.map((item, index) => (
+
+
+
+ ))}
+ {item.icon}
+ {item.label}:
+ {item.val}
+
+ 8 Invoices have been paid
+
+ Wednesday
+
+
+
+ ),
+ },
+ {
+ color: theme.colorPrimaryActive,
+ children: (
+
+
+ Invoices have been paid to the company.
+
+
+ ),
+ },
+ {
+ color: theme.colorInfo,
+ children: (
+
+ Create a new project for client 😎
+
+ April, 18
+
+ })
+
+ {faker.person.fullName()} (client)
+
+
+
+
+ {faker.person.fullName()} (client)
+
+
+
+ Invoices have been paid to the company.
+
+
+ ),
+ },
+ {
+ color: theme.colorWarning,
+ children: (
+
+ Order #37745 from September
+
+ January, 10
+
+
+ ),
+ },
+ ]}
+ />
+
+ Public Meeting
+
+ September, 30
+
+ 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 members
+
+
+
+
+
+
+
+ {item.name}
+ Client: {item.client}
+
+
+
+
+
+
+
+
+ Start Date:
+ {item.startDate.format('DD/MM/YYYY')}
+
+
+
+ Deadline:
+ {item.deadline.format('DD/MM/YYYY')}
+
+
+ {item.desc}
+
+
+
+
+
+
+
+
+
+
+ No permission
+
+
+
+
+
+ The page you are trying access has restricted access. Please refer to your system
+ administrator
+
+
+
+
+
+
+
+
+ Go to Home
+
+
+
+
+ );
+}
diff --git a/src/pages/sys/error/Page404.tsx b/src/pages/sys/error/Page404.tsx
new file mode 100644
index 0000000..273ef63
--- /dev/null
+++ b/src/pages/sys/error/Page404.tsx
@@ -0,0 +1,120 @@
+import { Typography } from 'antd';
+import { m } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
+import { NavLink } from 'react-router-dom';
+
+import Character6 from '@/assets/images/characters/character_6.png';
+import MotionContainer from '@/components/animate/motion-container';
+import { varBounce } from '@/components/animate/variants/bounce';
+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 (
+ <>
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ Go to Home
+
+
+
+
+ );
+}
diff --git a/src/pages/sys/error/Page500.tsx b/src/pages/sys/error/Page500.tsx
new file mode 100644
index 0000000..7e58ebe
--- /dev/null
+++ b/src/pages/sys/error/Page500.tsx
@@ -0,0 +1,161 @@
+import { Typography } from 'antd';
+import { m } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
+import { NavLink } from 'react-router-dom';
+
+import Character8 from '@/assets/images/characters/character_8.png';
+import MotionContainer from '@/components/animate/motion-container';
+import { varBounce } from '@/components/animate/variants/bounce';
+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
+
+
+
+
+
+ There was an error, please try again later.
+
+
+
+
+
+
+
+
+ Go to Home
+
+
+
+
+ );
+}
diff --git a/src/pages/sys/login/Login.tsx b/src/pages/sys/login/Login.tsx
new file mode 100644
index 0000000..236e547
--- /dev/null
+++ b/src/pages/sys/login/Login.tsx
@@ -0,0 +1,66 @@
+import { Layout, Typography } from 'antd';
+import Color from 'color';
+import { useTranslation } from 'react-i18next';
+import { Navigate } from 'react-router-dom';
+
+import DashboardImg from '@/assets/images/background/dashboard.png';
+import Overlay2 from '@/assets/images/background/overlay_2.jpg';
+import LocalePicker from '@/components/locale-picker';
+import { useUserToken } from '@/store/userStore';
+import { useThemeToken } from '@/theme/hooks';
+
+import LoginForm from './LoginForm';
+import MobileForm from './MobileForm';
+import { LoginStateProvider } from './providers/LoginStateProvider';
+import QrCodeFrom from './QrCodeForm';
+import RegisterForm from './RegisterForm';
+import ResetForm from './ResetForm';
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+function Login() {
+ const { t } = useTranslation();
+ const token = useUserToken();
+ const { colorBgElevated } = useThemeToken();
+
+ // 判断用户是否有权限
+ if (token.accessToken) {
+ // 如果有授权，则跳转到首页
+ return
+ 
+
+ {t('sys.login.signInSecondTitle')}
+
+
+
+ Slash Admin
+
+
+
+
+
+
+
+ {t('sys.login.signInFormTitle')}
+
+
+ );
+}
+
+export default LoginForm;
diff --git a/src/pages/sys/login/MobileForm.tsx b/src/pages/sys/login/MobileForm.tsx
new file mode 100644
index 0000000..f82c46a
--- /dev/null
+++ b/src/pages/sys/login/MobileForm.tsx
@@ -0,0 +1,91 @@
+import { Button, Col, Form, Input, Row, Statistic } from 'antd';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ReturnButton } from './components/ReturnButton';
+import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProvider';
+
+const { Countdown } = Statistic;
+
+function MobileForm() {
+ 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();
+
+ if (loginState !== LoginStateEnum.MOBILE) return null;
+
+ const start = () => {
+ setCountdown(60);
+ setSecond(60);
+ };
+
+ const reset = () => {
+ // TODO: 发送验证码请求
+
+ // 启动倒计时
+ setCountdown(0);
+ setSecond(60);
+ };
+ return (
+ <>
+
+ {t('sys.login.mobileSignInFormTitle')}
+
+
+
+ );
+}
+
+export default MobileForm;
diff --git a/src/pages/sys/login/QrCodeForm.tsx b/src/pages/sys/login/QrCodeForm.tsx
new file mode 100644
index 0000000..c1e260f
--- /dev/null
+++ b/src/pages/sys/login/QrCodeForm.tsx
@@ -0,0 +1,24 @@
+import { QRCode } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { ReturnButton } from './components/ReturnButton';
+import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProvider';
+
+function QrCodeFrom() {
+ const { t } = useTranslation();
+ const { loginState, backToLogin } = useLoginStateContext();
+
+ if (loginState !== LoginStateEnum.QR_CODE) return null;
+ return (
+ <>
+ {t('sys.login.qrSignInFormTitle')}
+
+
+ {t('sys.login.scanSign')}
+{t('sys.login.signUpFormTitle')}
+
+
+ );
+}
+
+export default RegisterForm;
diff --git a/src/pages/sys/login/ResetForm.tsx b/src/pages/sys/login/ResetForm.tsx
new file mode 100644
index 0000000..a0adb9f
--- /dev/null
+++ b/src/pages/sys/login/ResetForm.tsx
@@ -0,0 +1,47 @@
+import { Button, Form, Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { SvgIcon } from '@/components/icon';
+
+import { ReturnButton } from './components/ReturnButton';
+import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProvider';
+
+function ResetForm() {
+ const onFinish = (values: any) => {
+ console.log('Received values of form: ', values);
+ };
+
+ const { t } = useTranslation();
+ const { loginState, backToLogin } = useLoginStateContext();
+
+ if (loginState !== LoginStateEnum.RESET_PASSWORD) return null;
+
+ return (
+ <>
+
+
+
+ {t('sys.login.forgetFormTitle')}
+
+
+
+ );
+}
+
+export default ResetForm;
diff --git a/src/pages/sys/login/components/ReturnButton.tsx b/src/pages/sys/login/components/ReturnButton.tsx
new file mode 100644
index 0000000..0c5a09b
--- /dev/null
+++ b/src/pages/sys/login/components/ReturnButton.tsx
@@ -0,0 +1,18 @@
+import { Button } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { MdArrowBackIosNew } from 'react-icons/md';
+
+interface ReturnButtonProps {
+ onClick?: () => void;
+}
+export function ReturnButton({ onClick }: ReturnButtonProps) {
+ const { t } = useTranslation();
+ return (
+
+ );
+}
diff --git a/src/pages/sys/login/providers/LoginStateProvider.tsx b/src/pages/sys/login/providers/LoginStateProvider.tsx
new file mode 100644
index 0000000..a8f14e8
--- /dev/null
+++ b/src/pages/sys/login/providers/LoginStateProvider.tsx
@@ -0,0 +1,39 @@
+import { PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+
+export enum LoginStateEnum {
+ LOGIN,
+ REGISTER,
+ RESET_PASSWORD,
+ MOBILE,
+ QR_CODE,
+}
+
+interface LoginStateContextType {
+ loginState: LoginStateEnum;
+ setLoginState: (loginState: LoginStateEnum) => void;
+ backToLogin: () => void;
+}
+const LoginStateContext = createContext
+ {type === 'edit' ? (
+
+ );
+ };
+
+ return (
+
+ {
+ onDelete(initValues.id);
+ onCancel();
+ }}
+ >
+
+
+ ) : (
+ <>
+
+
+
+
+ );
+}
diff --git a/src/pages/sys/others/calendar/calendar-header.tsx b/src/pages/sys/others/calendar/calendar-header.tsx
new file mode 100644
index 0000000..1a874c8
--- /dev/null
+++ b/src/pages/sys/others/calendar/calendar-header.tsx
@@ -0,0 +1,106 @@
+import { Button, Dropdown, MenuProps } from 'antd';
+import dayjs from 'dayjs';
+import { ReactNode, useMemo } from 'react';
+
+import { IconButton, Iconify } from '@/components/icon';
+import { useResponsive } from '@/theme/hooks';
+
+export type HandleMoveArg = 'next' | 'prev' | 'today';
+export type ViewType = 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay' | 'listWeek';
+type ViewTypeMenu = {
+ key: string;
+ label: string;
+ view: ViewType;
+ icon: ReactNode;
+};
+
+type Props = {
+ now: Date;
+ view: ViewType;
+ onMove: (action: HandleMoveArg) => void;
+ onCreate: VoidFunction;
+ onViewTypeChange: (view: ViewType) => void;
+};
+export default function CalendarHeader({ now, view, onMove, onCreate, onViewTypeChange }: Props) {
+ const { screenMap } = useResponsive();
+
+ const items = useMemo
+
+ {timeText}
+
+
+ {event.title}
+
+ {icon}
+ {label}
+
+ );
+ };
+
+ return (
+
+ {screenMap.lg && (
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/pages/sys/others/calendar/event-utils.ts b/src/pages/sys/others/calendar/event-utils.ts
new file mode 100644
index 0000000..a361213
--- /dev/null
+++ b/src/pages/sys/others/calendar/event-utils.ts
@@ -0,0 +1,60 @@
+import { faker } from '@faker-js/faker';
+import { EventInput } from '@fullcalendar/core';
+import dayjs from 'dayjs';
+
+export const INITIAL_EVENTS: EventInput[] = [
+ {
+ id: faker.string.uuid(),
+ title: faker.lorem.words({ min: 2, max: 5 }),
+ start: dayjs().toISOString(),
+ end: dayjs().add(10, 'hour').toISOString(),
+ color: '#7a0916',
+ },
+ {
+ id: faker.string.uuid(),
+ title: faker.lorem.words({ min: 2, max: 5 }),
+ start: dayjs().add(1, 'day').toISOString(),
+ end: dayjs().add(3, 'day').toISOString(),
+ allDay: faker.datatype.boolean(),
+ color: '#00b8d9',
+ },
+ {
+ id: faker.string.uuid(),
+ title: faker.lorem.words({ min: 2, max: 5 }),
+ start: dayjs().add(3, 'day').toISOString(),
+ end: dayjs().add(5, 'day').toISOString(),
+ allDay: faker.datatype.boolean(),
+ color: '#ff5630',
+ },
+ {
+ id: faker.string.uuid(),
+ title: faker.lorem.words({ min: 2, max: 5 }),
+ start: dayjs().add(7, 'day').toISOString(),
+ end: dayjs().add(8, 'day').toISOString(),
+ allDay: faker.datatype.boolean(),
+ color: '#ffab00',
+ },
+ {
+ id: faker.string.uuid(),
+ title: faker.lorem.words({ min: 2, max: 5 }),
+ start: dayjs().add(7, 'day').toISOString(),
+ end: dayjs().add(8, 'day').toISOString(),
+ allDay: faker.datatype.boolean(),
+ color: '#ffab00',
+ },
+ {
+ id: faker.string.uuid(),
+ title: faker.lorem.words({ min: 2, max: 5 }),
+ start: dayjs().add(8, 'day').toISOString(),
+ end: dayjs().add(9, 'day').toISOString(),
+ allDay: faker.datatype.boolean(),
+ color: '#8e33ff',
+ },
+ {
+ id: faker.string.uuid(),
+ title: faker.lorem.words({ min: 2, max: 5 }),
+ start: dayjs().add(10, 'day').toISOString(),
+ end: dayjs().add(11, 'day').toISOString(),
+ color: '#00a76f',
+ },
+];
diff --git a/src/pages/sys/others/calendar/index.tsx b/src/pages/sys/others/calendar/index.tsx
new file mode 100644
index 0000000..ed9e21b
--- /dev/null
+++ b/src/pages/sys/others/calendar/index.tsx
@@ -0,0 +1,214 @@
+import { faker } from '@faker-js/faker';
+import { DateSelectArg, EventClickArg, EventInput } from '@fullcalendar/core';
+// fullcalendar plugins
+import dayGridPlugin from '@fullcalendar/daygrid'; // 提供 dayGridMonth, dayGridWeek, dayGridDay, dayGrid 视图
+import interactionPlugin from '@fullcalendar/interaction'; // 如果需要 click select drag 这些action 则需要该依赖
+import listPlugin from '@fullcalendar/list'; // 提供 listWeek view
+import FullCalendar from '@fullcalendar/react';
+import timeGridPlugin from '@fullcalendar/timegrid'; // 提供 timeGridWeek, timeGridDay, timeGrid 视图
+import dayjs from 'dayjs';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import Card from '@/components/card';
+import { useSettings } from '@/store/settingStore';
+import { useResponsive } from '@/theme/hooks';
+
+import CalendarEvent from './calendar-event';
+import CalendarEventForm, { CalendarEventFormFieldType } from './calendar-event-form';
+import CalendarHeader, { HandleMoveArg, ViewType } from './calendar-header';
+import { INITIAL_EVENTS } from './event-utils';
+import { StyledCalendar } from './styles';
+
+const DefaultEventInitValue = {
+ id: faker.string.uuid(),
+ title: '',
+ description: '',
+ allDay: false,
+ start: dayjs(),
+ end: dayjs(),
+ color: '',
+};
+export default function Calendar() {
+ const fullCalendarRef = useRef
+
+ onMove('prev')} size={20} />
+
+ {dayjs(now).format('DD MMM YYYY')}
+
+ onMove('next')} size={20} />
+
+
+
+
+
+
+
+
+
+ setOpen(true)}
+ onViewTypeChange={handleViewTypeChange}
+ />
+
+
+
+
+
+ );
+}
diff --git a/src/pages/sys/others/kanban/demo.tsx b/src/pages/sys/others/kanban/demo.tsx
new file mode 100644
index 0000000..ce38000
--- /dev/null
+++ b/src/pages/sys/others/kanban/demo.tsx
@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import {
+ DragDropContext,
+ Droppable,
+ Draggable,
+ OnDragEndResponder,
+ DraggableLocation,
+} from 'react-beautiful-dnd';
+
+type Task = {
+ id: string;
+ content: string;
+};
+// fake data generator
+const getItems = (count: number, offset = 0): Task[] =>
+ Array.from({ length: count }, (_, k) => k).map((k) => ({
+ id: `item-${k + offset}-${new Date().getTime()}`,
+ content: `item ${k + offset}`,
+ }));
+
+/**
+ * re order 重新排序
+ *
+ * @param list
+ * @param startIndex
+ * @param endIndex
+ */
+const reorder = (list: Task[], startIndex: number, endIndex: number) => {
+ const result = Array.from(list);
+ const [removed] = result.splice(startIndex, 1);
+ result.splice(endIndex, 0, removed);
+
+ return result;
+};
+
+/**
+ * Moves an item from one list to another list.
+ */
+const move = (
+ source: Task[],
+ destination: Task[],
+ droppableSource: DraggableLocation,
+ droppableDestination: DraggableLocation,
+) => {
+ const sourceClone = Array.from(source);
+ const destClone = Array.from(destination);
+ const [removed] = sourceClone.splice(droppableSource.index, 1);
+
+ destClone.splice(droppableDestination.index, 0, removed);
+
+ const result: Record
+
+
+
+ );
+}
diff --git a/src/pages/sys/others/kanban/index.tsx b/src/pages/sys/others/kanban/index.tsx
new file mode 100644
index 0000000..7b66f34
--- /dev/null
+++ b/src/pages/sys/others/kanban/index.tsx
@@ -0,0 +1,280 @@
+import { faker } from '@faker-js/faker';
+import { Button, Input, InputRef } from 'antd';
+import { useRef, useState } from 'react';
+import { DragDropContext, DropResult, Droppable, OnDragEndResponder } from 'react-beautiful-dnd';
+import { useEvent } from 'react-use';
+import SimpleBar from 'simplebar-react';
+
+import { Iconify } from '@/components/icon';
+import KanbanColumn from '@/pages/sys/others/kanban/kanban-column';
+import {
+ Column,
+ Columns,
+ DndDataType,
+ DragType,
+ Task,
+ Tasks,
+} from '@/pages/sys/others/kanban/types';
+
+import { initialData } from './task-utils';
+
+export default function Kanban() {
+ const [state, setState] = useState(initialData);
+
+ // dragtype == task
+ const handleTaskDragEnd = (result: DropResult) => {
+ const { source, destination, draggableId } = result;
+ const start = state.columns[source.droppableId];
+ const finish = state.columns[destination!.droppableId];
+
+ if (start === finish) {
+ // moving task in one column
+ const newTaskIds = Array.from(start.taskIds);
+ newTaskIds.splice(source.index, 1);
+ newTaskIds.splice(destination!.index, 0, draggableId);
+
+ const newColumn: Column = {
+ ...start,
+ taskIds: newTaskIds,
+ };
+
+ const newState: DndDataType = {
+ ...state,
+ columns: {
+ ...state.columns,
+ [newColumn.id]: newColumn,
+ },
+ };
+
+ setState(newState);
+ } else {
+ // moving task from on column to another
+ const startTaskIds = Array.from(start.taskIds);
+ startTaskIds.splice(source.index, 1);
+ const newStart: Column = {
+ ...start,
+ taskIds: startTaskIds,
+ };
+
+ const finishTaskIds = Array.from(finish.taskIds);
+ finishTaskIds.splice(destination!.index, 0, draggableId);
+ const newFinish: Column = {
+ ...finish,
+ taskIds: finishTaskIds,
+ };
+
+ const newState: DndDataType = {
+ ...state,
+ columns: {
+ ...state.columns,
+ [newStart.id]: newStart,
+ [newFinish.id]: newFinish,
+ },
+ };
+
+ setState(newState);
+ }
+ };
+
+ // dragtype == column
+ const handleColumnDragEnd = (result: DropResult) => {
+ const { source, destination, draggableId } = result;
+
+ const newColumnOrder = Array.from(state.columnOrder);
+ newColumnOrder.splice(source.index, 1);
+ newColumnOrder.splice(destination!.index, 0, draggableId);
+ const newState: DndDataType = {
+ ...state,
+ columnOrder: newColumnOrder,
+ };
+ setState(newState);
+ };
+
+ const onDragEnd: OnDragEndResponder = (result) => {
+ const { source, destination, type } = result;
+ // 拖拽到非法非 droppable区域
+ if (!destination) {
+ return;
+ }
+ // 原地放下
+ if (destination.droppableId === source.droppableId && destination.index === source.index) {
+ return;
+ }
+
+ if (type === DragType.COLUMN) {
+ handleColumnDragEnd(result);
+ } else {
+ handleTaskDragEnd(result);
+ }
+ };
+
+ const [addingColumn, setAddingColumn] = useState(false);
+ const inputRef = useRef
+ onDragEnd}>
+ {state.map((el, ind) => (
+
+ {(provided, snapshot) => (
+
+ ))}
+
+
+
+ {el.map((item, index) => (
+
+ {(provided, snapshot) => (
+
+ ))}
+ {provided.placeholder}
+
+ )}
+
+
+ )}
+
+ {item.content}
+
+
+
+
+
+ {(provided) => (
+
+
+
+
+
+ {state.columnOrder.map((columnId, index) => {
+ const column = state.columns[columnId];
+ const tasks = column.taskIds.map((taskId) => state.tasks[taskId]);
+
+ return (
+
+ )}
+
+ {addingColumn ? (
+
+ ) : (
+
+ )}
+
+ {
+ setRenamingTask(true);
+ }}
+ >
+
+ ),
+ },
+ {
+ key: '2',
+ label: (
+ clearColumn(column.id)}>
+
+ ),
+ },
+ {
+ key: '3',
+ label: (
+ deleteColumn(column.id)}>
+
+ ),
+ },
+ ];
+
+ const [addingTask, setAddingTask] = useState(false);
+ const addTaskInputRef = useRef
+
+ )}
+
+
+ {renamingTask ? (
+
+ ) : (
+ column.title
+ )}
+ setDropdownOpen(flag)}
+ menu={{ items, onClick: handleMenuItemClick }}
+ placement="bottomRight"
+ trigger={['click']}
+ >
+
+
+
+
+
+ {(provided) => (
+
+ {tasks.map((task, index) => (
+
+ )}
+
+
+
+
+
+ {attachments.length > 0 && (
+
+ setDrawerOpen(true)}>
+
+
+
+ {title}
+
+
+ {assignee.map((url) => (
+
+ )}
+
+
+
+
+ {assignee?.length && (
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ onClose={() => setDrawerOpen(false)}
+ open={drawerOpen}
+ closable={false}
+ width={420}
+ bodyStyle={bodyStyle}
+ maskStyle={{ backgroundColor: 'transparent' }}
+ style={style}
+ >
+
+ {title}
+
+
+
+ Reporter
+
+
+ {assignee.map((item, index) => (
+
+
+ Assignee
+
+
+
+ {tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+ Tag
+
+
+
+ Due Date
+
+
+
+ Priority
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Description
+
+
+ {attachments?.map((item) => (
+
+
+ Attachments
+
+ {comments?.map(({ avatar, username, content, time }) => (
+
+
+ );
+}
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding: 24px 20px 40px;
+ .item {
+ display: flex;
+ align-items: center;
+ }
+ .label {
+ text-align: left;
+ font-size: 0.75rem;
+ font-weight: 600;
+ width: 100px;
+ flex-shrink: 0;
+ color: rgb(99, 115, 129);
+ height: 40px;
+ line-height: 40px;
+ }
+`;
diff --git a/src/pages/sys/others/kanban/task-utils.ts b/src/pages/sys/others/kanban/task-utils.ts
new file mode 100644
index 0000000..266ce20
--- /dev/null
+++ b/src/pages/sys/others/kanban/task-utils.ts
@@ -0,0 +1,138 @@
+import { faker } from '@faker-js/faker';
+
+import { TaskPriority, TaskComment, TaskTag, DndDataType } from './types';
+
+const fakeComment = (count: number): TaskComment[] => {
+ const result = [];
+ for (let index = 0; index < count; index += 1) {
+ result.push({
+ username: faker.person.fullName(),
+ avatar: faker.image.avatarLegacy(),
+ content: faker.lorem.lines({ min: 1, max: 3 }),
+ time: faker.date.past(),
+ });
+ }
+ return result;
+};
+
+const fakeAttachment = (count: number) => {
+ const result = [];
+ for (let index = 0; index < count; index += 1) {
+ result.push(faker.image.urlPicsumPhotos());
+ }
+ return result;
+};
+
+const fakeAssignee = (count: number) => {
+ const result = [];
+ for (let index = 0; index < count; index += 1) {
+ result.push(faker.image.avatarLegacy());
+ }
+ return result;
+};
+
+const fakeTag = (count: number) => {
+ const uniqueArray = [];
+ const set = new Set();
+
+ while (uniqueArray.length < count) {
+ const randomElement = faker.helpers.enumValue(TaskTag);
+ if (!set.has(randomElement)) {
+ uniqueArray.push(randomElement);
+ set.add(randomElement);
+ }
+ }
+
+ return uniqueArray;
+};
+
+export const initialData: DndDataType = {
+ tasks: {
+ 'task-1': {
+ id: 'task-1',
+ title: faker.lorem.words(3),
+ reporter: faker.image.avatarLegacy(),
+ priority: TaskPriority.LOW,
+ tags: [],
+ comments: [],
+ attachments: [],
+ },
+ 'task-2': {
+ id: 'task-2',
+ title: faker.lorem.words(3),
+ reporter: faker.image.avatarLegacy(),
+ assignee: fakeAssignee(1),
+ date: faker.date.future(),
+ priority: TaskPriority.HIGH,
+ tags: fakeTag(3),
+ comments: fakeComment(1),
+ attachments: fakeAttachment(4),
+ },
+ 'task-3': {
+ id: 'task-3',
+ title: faker.lorem.words(4),
+ reporter: faker.image.avatarLegacy(),
+ assignee: fakeAssignee(2),
+ priority: TaskPriority.MEDIUM,
+ date: faker.date.future(),
+ tags: fakeTag(2),
+ comments: fakeComment(2),
+ attachments: [],
+ },
+ 'task-4': {
+ id: 'task-4',
+ title: faker.lorem.words(5),
+ reporter: faker.image.avatar(),
+ assignee: fakeAssignee(3),
+ priority: TaskPriority.MEDIUM,
+ tags: fakeTag(3),
+ date: faker.date.future(),
+ description: faker.lorem.lines(5),
+ attachments: [],
+ comments: fakeComment(3),
+ },
+ 'task-5': {
+ id: 'task-5',
+ title: faker.lorem.words(4),
+ reporter: faker.image.avatar(),
+ priority: TaskPriority.HIGH,
+ assignee: fakeAssignee(4),
+ tags: fakeTag(4),
+ date: faker.date.future(),
+ description: faker.lorem.lines(3),
+ attachments: [],
+ comments: fakeComment(4),
+ },
+ 'task-6': {
+ id: 'task-6',
+ title: faker.lorem.words(5),
+ reporter: faker.image.avatar(),
+ priority: TaskPriority.LOW,
+
+ assignee: fakeAssignee(5),
+ tags: fakeTag(5),
+ date: faker.date.future(),
+ description: faker.lorem.lines(4),
+ attachments: fakeAttachment(5),
+ comments: fakeComment(4),
+ },
+ },
+ columns: {
+ 'column-1': {
+ id: 'column-1',
+ title: 'To do',
+ taskIds: ['task-1', 'task-2', 'task-3'],
+ },
+ 'column-2': {
+ id: 'column-2',
+ title: 'In progress',
+ taskIds: ['task-4', 'task-5'],
+ },
+ 'column-3': {
+ id: 'column-3',
+ title: 'Done',
+ taskIds: ['task-6'],
+ },
+ },
+ columnOrder: ['column-1', 'column-2', 'column-3'],
+};
diff --git a/src/pages/sys/others/kanban/types.ts b/src/pages/sys/others/kanban/types.ts
new file mode 100644
index 0000000..3419ab9
--- /dev/null
+++ b/src/pages/sys/others/kanban/types.ts
@@ -0,0 +1,56 @@
+export enum TaskPriority {
+ LOW = 'Low',
+ MEDIUM = 'Medium',
+ HIGH = 'High',
+}
+
+export enum TaskTag {
+ frontend = 'FrontEnd',
+ backend = 'BackEnd',
+ fullstack = 'FullStack',
+ DevOps = 'DevOps',
+ AI = 'AI',
+ DBA = 'DBA',
+ UI = 'UI',
+ UE = 'UE',
+ QA = 'QA',
+}
+
+export type TaskComment = {
+ username: string;
+ avatar: string;
+ content: string;
+ time: Date;
+};
+
+export type Task = {
+ id: string;
+ title: string;
+ reporter: string; // avatar
+ priority: TaskPriority;
+ assignee?: string[]; // avatar array
+ tags?: string[];
+ date?: Date;
+ description?: string;
+ comments?: TaskComment[];
+ attachments?: string[];
+};
+export type Tasks = Record
+
+ ))}
+
+
+
+ {username}
+ {dayjs(time).format('DD/MM/YYYY HH:mm')}
+
+ {content}
+
+
+ );
+ if (icon) {
+ if (typeof icon === 'string') {
+ if (icon.startsWith('ic')) {
+ menuItem.icon = {t(label)}
+ {suffix}
+