Skip to content

Commit

Permalink
feat: kanban complete
Browse files Browse the repository at this point in the history
  • Loading branch information
d3george committed Oct 27, 2023
1 parent f78f612 commit 02cc2ac
Show file tree
Hide file tree
Showing 17 changed files with 389 additions and 72 deletions.
1 change: 1 addition & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ module.exports = {
'jsx-a11y/click-events-have-key-events': 'off',
'jsx-a11y/interactive-supports-focus': 'off',
'jsx-a11y/no-noninteractive-element-interactions': 'off',
'jsx-a11y/no-static-element-interactions': 'off',

// 不用手动引入react
'react/react-in-jsx-scope': 'off',
Expand Down
4 changes: 2 additions & 2 deletions src/components/icon/icon-button.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { ButtonProps } from 'antd';
import { CSSProperties, ReactNode } from 'react';

type Props = {
children: ReactNode;
className?: string;
style?: CSSProperties;
onClick?: () => void;
};
} & ButtonProps;
export default function IconButton({ children, className, style, onClick }: Props) {
return (
<button
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/_common/account-dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function AccountDropdown() {
{ label: <NavLink to="https://github.com/d3george/slash-admin">Github</NavLink>, key: '1' },
{ type: 'divider' },
{
label: <button className="font-bold text-orange">{t('sys.login.logout')}</button>,
label: <button className="font-bold text-warning">{t('sys.login.logout')}</button>,
key: '3',
onClick: logout,
},
Expand Down
2 changes: 2 additions & 0 deletions src/layouts/dashboard/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const NAV_WIDTH = '260px';
export const NAV_COLLAPSED_WIDTH = '90px';
23 changes: 19 additions & 4 deletions src/layouts/dashboard/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import { IconButton, SvgIcon } from '@/components/icon';
import LocalePicker from '@/components/locale-picker';
import Logo from '@/components/logo';
import { useSettings } from '@/store/settingStore';
import { useThemeToken } from '@/theme/hooks';
import { useResponsive, useThemeToken } from '@/theme/hooks';

import AccountDropdown from '../_common/account-dropdown';
import BreadCrumb from '../_common/bread-crumb';
import NoticeButton from '../_common/notice';
import SearchBar from '../_common/search-bar';
import SettingButton from '../_common/setting-button';

import { NAV_COLLAPSED_WIDTH, NAV_WIDTH } from './config';
import Nav from './nav';

import { ThemeLayout } from '#/enum';
Expand All @@ -26,15 +27,29 @@ export default function Header({ className, offsetTop = false }: Props) {
const [drawerOpen, setDrawerOpen] = useState(false);
const { themeLayout } = useSettings();
const { colorBgElevated, colorBorder } = useThemeToken();
const { screenMap } = useResponsive();

const headerStyle: CSSProperties = {
position: themeLayout === ThemeLayout.Horizontal ? 'relative' : 'absolute',
position: themeLayout === ThemeLayout.Horizontal ? 'relative' : 'fixed',
borderBottom:
themeLayout === ThemeLayout.Horizontal
? `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`
: '',
backgroundColor: Color(colorBgElevated).alpha(0.8).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
}`;
} else {
headerStyle.width = '100vw';
}

return (
<>
<header className={`z-20 w-full ${className}`} style={headerStyle}>
Expand All @@ -45,9 +60,9 @@ export default function Header({ className, offsetTop = false }: Props) {
transition: 'height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
}}
>
<div className="flex items-center ">
<div className="flex items-baseline">
{themeLayout !== ThemeLayout.Horizontal ? (
<IconButton onClick={() => setDrawerOpen(true)} className="h-10 w-10 lg:hidden">
<IconButton onClick={() => setDrawerOpen(true)} className="h-10 w-10 md:hidden">
<SvgIcon icon="ic-menu" size="24" />
</IconButton>
) : (
Expand Down
9 changes: 3 additions & 6 deletions src/layouts/dashboard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,11 @@ function DashboardLayout() {

const verticalLayout = (
<>
<div className="hidden h-full lg:block">
<Header offsetTop={offsetTop} />
<div className="z-50 hidden h-full flex-shrink-0 md:block">
<Nav />
</div>

<div className="relative flex flex-1 flex-col">
<Header offsetTop={offsetTop} />
<Main ref={mainEl} />
</div>
<Main ref={mainEl} />
</>
);

Expand Down
24 changes: 22 additions & 2 deletions src/layouts/dashboard/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,38 @@ import { forwardRef } from 'react';
import { Outlet } from 'react-router-dom';

import { useSettings } from '@/store/settingStore';
import { useResponsive } from '@/theme/hooks';

import { NAV_WIDTH, NAV_COLLAPSED_WIDTH } from './config';

import { ThemeLayout } from '#/enum';

const Main = forwardRef<HTMLDivElement, {}>((_, ref) => {
const { themeStretch, themeLayout } = useSettings();
const { screenMap } = useResponsive();

let mainWith = '100%';
if (themeLayout === ThemeLayout.Horizontal) {
mainWith = '100vw';
} else if (screenMap.md) {
mainWith = `calc(100% - ${
themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
}`;
} else {
mainWith = '100vw';
}
return (
<Content
ref={ref}
className={`overflow-auto p-2 ${themeLayout === ThemeLayout.Horizontal ? '' : 'pt-20'}`}
style={{ width: mainWith }}
className={`flex overflow-auto p-2 ${themeLayout === ThemeLayout.Horizontal ? '' : 'pt-20'}`}
>
{/* <!-- ===== Content Start ===== --> */}
<div className={`mx-auto h-full w-full sm:px-2 ${themeStretch ? '' : 'xl:max-w-screen-xl'}`}>
<div
className={`m-auto h-full w-full flex-grow sm:px-2 ${
themeStretch ? '' : 'xl:max-w-screen-xl'
}`}
>
<Outlet />
</div>
{/* <!-- ===== Content End ===== --> */}
Expand Down
8 changes: 5 additions & 3 deletions src/layouts/dashboard/nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { getMenuRoutes } 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 = {
Expand Down Expand Up @@ -103,9 +105,9 @@ export default function Nav(props: Props) {

return (
<div
className="flex h-full flex-col "
className="flex h-full flex-col"
style={{
width: collapsed ? '90px' : '260px',
width: collapsed ? NAV_COLLAPSED_WIDTH : NAV_WIDTH,
borderRight: `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`,
}}
>
Expand All @@ -117,7 +119,7 @@ export default function Nav(props: Props) {
)}
<button
onClick={toggleCollapsed}
className="absolute right-0 top-7 z-50 hidden h-6 w-6 translate-x-1/2 cursor-pointer select-none rounded-full text-center !text-gray lg:block"
className="absolute right-0 top-7 z-50 hidden h-6 w-6 translate-x-1/2 cursor-pointer select-none rounded-full text-center !text-gray md:block"
style={{ color: colorTextBase, borderColor: colorTextBase, fontSize: 16 }}
>
{collapsed ? <MenuUnfoldOutlined size={20} /> : <MenuFoldOutlined size={20} />}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/sys/others/calendar/calendar-header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import dayjs from 'dayjs';
import { ReactNode, useMemo } from 'react';

import { IconButton, Iconify } from '@/components/icon';
import useReponsive from '@/theme/hooks/use-reponsive';
import { useResponsive } from '@/theme/hooks';

export type HandleMoveArg = 'next' | 'prev' | 'today';
export type ViewType = 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay' | 'listWeek';
Expand All @@ -22,7 +22,7 @@ type Props = {
onViewTypeChange: (view: ViewType) => void;
};
export default function CalendarHeader({ now, view, onMove, onCreate, onViewTypeChange }: Props) {
const { currentScrren } = useReponsive();
const { screenMap } = useResponsive();

const items = useMemo<ViewTypeMenu[]>(
() => [
Expand Down Expand Up @@ -72,7 +72,7 @@ export default function CalendarHeader({ now, view, onMove, onCreate, onViewType

return (
<div className="relative flex items-center justify-between py-5">
{!['sm', 'xs'].includes(currentScrren!) && (
{screenMap.lg && (
<Dropdown menu={{ items, onClick: handleMenuClick }}>
<Button type="text" size="small">
{viewTypeMenu(view)}
Expand Down
10 changes: 5 additions & 5 deletions src/pages/sys/others/calendar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';

import Card from '@/components/card';
import { useSettings } from '@/store/settingStore';
import useReponsive from '@/theme/hooks/use-reponsive';
import { useResponsive } from '@/theme/hooks';

import CalendarEvent from './calendar-event';
import CalendarEventForm, { CalendarEventFormFieldType } from './calendar-event-form';
Expand All @@ -38,13 +38,13 @@ export default function Calendar() {
const [eventFormType, setEventFormType] = useState<'add' | 'edit'>('add');

const { themeMode } = useSettings();
const { currentScrren } = useReponsive();
const { screenMap } = useResponsive();

useEffect(() => {
if (['sm', 'xs'].includes(currentScrren!)) {
if (screenMap.xs) {
setView('listWeek');
}
}, [currentScrren]);
}, [screenMap]);
/**
* calendar header events
*/
Expand Down Expand Up @@ -187,7 +187,7 @@ export default function Calendar() {
ref={fullCalendarRef}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
initialDate={date}
initialView={['sm', 'xs'].includes(currentScrren!) ? 'listWeek' : view}
initialView={screenMap.xs ? 'listWeek' : view}
events={INITIAL_EVENTS}
eventContent={CalendarEvent}
editable
Expand Down
Loading

0 comments on commit 02cc2ac

Please sign in to comment.