Skip to content

Commit

Permalink
fix: cls
Browse files Browse the repository at this point in the history
  • Loading branch information
@Innei
Innei committed Jul 12, 2023
1 parent 4d03672 commit 3ef24d6
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 56 deletions.
15 changes: 9 additions & 6 deletions src/app/thinking/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {

import { useIsLogged } from '~/atoms'
import { TiltedSendIcon } from '~/components/icons/TiltedSendIcon'
import { MotionButtonBase } from '~/components/ui/button'
import { MotionButtonBase, StyledButton } from '~/components/ui/button'
import { Divider } from '~/components/ui/divider'
import { TextArea } from '~/components/ui/input'
import { Loading } from '~/components/ui/loading'
Expand Down Expand Up @@ -318,23 +318,26 @@ const DeleteButton = (props: { id: string }) => {

return (
<button
className="text-red-500"
className="text-red-500 hover:text-red-600 dark:hover:text-red-300"
onClick={() => {
present({
title: '确定删除',
content: ({ dismiss }) => (
<div className="w-[300px] space-y-4">
<div className="mt-4 flex justify-end space-x-4">
<MotionButtonBase
<StyledButton
variant="primary"
onClick={() => {
handleDelete()
dismiss()
}}
className="text-red-500"
className="bg-zinc-100/80 text-red-500 dark:bg-neutral-900/90"
>
确定
</MotionButtonBase>
<MotionButtonBase onClick={dismiss}>取消</MotionButtonBase>
</StyledButton>
<StyledButton variant="primary" onClick={dismiss}>
取消
</StyledButton>
</div>
</div>
),
Expand Down
40 changes: 36 additions & 4 deletions src/providers/root/modal-stack-provider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
} from 'react'
import { AnimatePresence, m, useAnimationControls } from 'framer-motion'
import { atom, useAtomValue, useSetAtom } from 'jotai'
import { selectAtom } from 'jotai/utils'
import type { Target, Transition } from 'framer-motion'
import type { FC, PropsWithChildren, SyntheticEvent } from 'react'

Expand Down Expand Up @@ -102,10 +103,38 @@ const ModalStack = () => {
{stack.map((item, index) => {
return <Modal key={item.id} item={item} index={index} />
})}

{/* <HeaderPreventCLS /> */}
</AnimatePresence>
)
}

export const HeaderPreventCLS = () => {
const hasModal = useAtomValue(
useMemo(
() =>
selectAtom(modalStackAtom, (atom) => {
return atom.length > 0
}),
[],
),
)

useEffect(() => {
if (!hasModal) return
/// 5px
const $header = document.querySelector('body > header') as HTMLElement
if (!$header) return

$header.style.right = '5px'
return () => {
$header.style.right = ''
}
}, [hasModal])

return null
}

const enterStyle: Target = {
scale: 1,
opacity: 1,
Expand Down Expand Up @@ -171,6 +200,11 @@ const Modal: Component<{
})
})
}, [animateController])

const ModalProps: ModalContentPropsInternal = {
dismiss: close,
}

if (CustomModalComponent) {
return (
<Dialog.Root open onOpenChange={onClose}>
Expand All @@ -186,9 +220,7 @@ const Modal: Component<{
>
<div className={modalClassName} onClick={stopPropagation}>
<CustomModalComponent>
{createElement(content, {
dismiss: close,
})}
{createElement(content, ModalProps)}
</CustomModalComponent>
</div>
</div>
Expand Down Expand Up @@ -231,7 +263,7 @@ const Modal: Component<{
<Divider className="my-2 flex-shrink-0 border-slate-200 opacity-80 dark:border-neutral-800" />

<div className="min-h-0 flex-shrink flex-grow overflow-auto px-4 py-2">
{createElement(content)}
{createElement(content, ModalProps)}
</div>

<Dialog.DialogClose
Expand Down
18 changes: 9 additions & 9 deletions src/socket/handler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import type { InfiniteData } from '@tanstack/react-query'
import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context'

import { sayQueryKey } from '~/app/says/query'
import { QUERY_KEY as ThinkingQueryKey } from '~/app/thinking/constants'
import { setOnlineCount } from '~/atoms'
import { setActivityMediaInfo, setActivityProcessName } from '~/atoms/activity'
import {
Expand Down Expand Up @@ -196,14 +195,15 @@ export const eventHandler = (
case EventTypes.RECENTLY_CREATE: {
trackerRealtimeEvent()
if (location.pathname === routeBuilder(Routes.Thinking, {})) {
queryClient.setQueryData<InfiniteData<RecentlyModel[]>>(
ThinkingQueryKey,
(prev) => {
return produce(prev, (draft) => {
draft?.pages[0].unshift(data as RecentlyModel)
})
},
)
// 页面上已经做了更新
// queryClient.setQueryData<InfiniteData<RecentlyModel[]>>(
// ThinkingQueryKey,
// (prev) => {
// return produce(prev, (draft) => {
// draft?.pages[0].unshift(data as RecentlyModel)
// })
// },
// )
} else {
toast.success(`写下一点小思考：\n${(data as RecentlyModel).content}`, {
duration: 10000,
Expand Down
76 changes: 39 additions & 37 deletions src/styles/scrollbar.css
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,45 @@
body::-webkit-scrollbar {
height: 0;
width: 0;
}

body {
overflow: overlay;
}

[data-theme='dark'] {
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
border: 3px solid theme(colors.zinc.700/20);
}

::-webkit-scrollbar-thumb:hover {
background: theme(colors.zinc.800/96);
}
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
background-color: transparent;
border: 3px solid theme(colors.base-100);
border-radius: 5px;
}

::-webkit-scrollbar {
width: 5px !important;
height: 5px !important;
background: theme(colors.base-100);
}

::-webkit-scrollbar-thumb {
background: theme(colors.neutral);
}

::-webkit-scrollbar-thumb:hover {
background: theme(colors.neutral-focus);
}

::-webkit-scrollbar-corner {
background: theme(colors.base-100);
}
/* scrollbar-gutter: stable; */
}
/**/
/* [data-theme='dark'] { */
/* ::-webkit-scrollbar-thumb, */
/* ::-webkit-scrollbar-thumb:hover { */
/* border: 3px solid theme(colors.zinc.700/20); */
/* } */
/**/
/* ::-webkit-scrollbar-thumb:hover { */
/* background: theme(colors.zinc.800/96); */
/* } */
/* } */
/**/
/* ::-webkit-scrollbar-thumb, */
/* ::-webkit-scrollbar-thumb:hover { */
/* background-color: transparent; */
/* border: 3px solid theme(colors.base-100); */
/* border-radius: 5px; */
/* } */
/**/
/* ::-webkit-scrollbar { */
/* width: 5px !important; */
/* height: 5px !important; */
/* background: theme(colors.base-100); */
/* } */
/**/
/* ::-webkit-scrollbar-thumb { */
/* background: theme(colors.neutral); */
/* } */
/**/
/* ::-webkit-scrollbar-thumb:hover { */
/* background: theme(colors.neutral-focus); */
/* } */
/**/
/* ::-webkit-scrollbar-corner { */
/* background: theme(colors.base-100); */
/* } */

1 comment on commit 3ef24d6

@vercel
Copy link

@vercel vercel bot commented on 3ef24d6 Jul 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

shiro – ./

shiro-git-main-innei.vercel.app
springtide.vercel.app
innei.in
shiro-innei.vercel.app

Please sign in to comment.