From a58f629db567d18e4e7ae683ee60870198560b25 Mon Sep 17 00:00:00 2001 From: Innei Date: Sun, 4 Feb 2024 13:00:30 +0800 Subject: [PATCH] fix: optimize ui Signed-off-by: Innei --- src/app/(app)/layout.tsx | 2 +- src/app/(dashboard)/layout.tsx | 2 +- src/components/modules/shared/SearchFAB.tsx | 27 ++++- .../ui/editor/Milkdown/plugins/Excalidraw.tsx | 9 +- .../ui/editor/Milkdown/plugins/Image.tsx | 1 + src/lib/toast.ts | 10 ++ src/styles/index.css | 1 + src/styles/toastify.css | 107 ++++++++++++++++++ 8 files changed, 153 insertions(+), 6 deletions(-) diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx index 42ea93c895..0b1dc2ce32 100644 --- a/src/app/(app)/layout.tsx +++ b/src/app/(app)/layout.tsx @@ -174,7 +174,7 @@ export default async function RootLayout(props: PropsWithChildren) { - + diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx index 4529988039..e1446aeb80 100644 --- a/src/app/(dashboard)/layout.tsx +++ b/src/app/(dashboard)/layout.tsx @@ -79,7 +79,7 @@ export default async function RootLayout({ children }: PropsWithChildren) { - + ) diff --git a/src/components/modules/shared/SearchFAB.tsx b/src/components/modules/shared/SearchFAB.tsx index c566172bcd..3d601bd01b 100644 --- a/src/components/modules/shared/SearchFAB.tsx +++ b/src/components/modules/shared/SearchFAB.tsx @@ -17,11 +17,15 @@ import { atom, useAtomValue, useSetAtom } from 'jotai' import Link from 'next/link' import type { KeyboardEventHandler } from 'react' +import { useIsLogged } from '~/atoms' import { EmptyIcon } from '~/components/icons/empty' +import { MotionButtonBase } from '~/components/ui/button' import { FABPortable } from '~/components/ui/fab' +import { FloatPopover } from '~/components/ui/float-popover' import { microDampingPreset } from '~/constants/spring' import useDebounceValue from '~/hooks/common/use-debounce-value' import { useIsClient } from '~/hooks/common/use-is-client' +import { getToken } from '~/lib/cookie' import { noopArr } from '~/lib/noop' import { apiClient } from '~/lib/request' import { jotaiStore } from '~/lib/store' @@ -212,6 +216,7 @@ const SearchPanelImpl = () => { [data.length], ) + const isLogged = useIsLogged() return ( { -
+
+ {isLogged ? ( + { + window.open( + `${apiClient.search.proxy('algolia')('import-json').toString(true)}?token=${getToken()}`, + ) + }} + > + + } + > + 下载搜索索引文件以便导入 algolia 搜索 + + + ) : ( +
+ )} { } const file = new File([currentData], 'file.excalidraw', {}) - toast.info('正在上传文件') + const infoToast = toast.info('正在上传文件', { + position: 'top-right', + }) const result = await uploadFileToServer(FileTypeEnum.File, file) - toast.success('上传成功') + toast.success('上传成功', { position: 'top-right' }) + toast.dismiss(infoToast) const refName = `ref:file/${result.name}` alreadyUploadValueFileMap[currentData] = refName return refName @@ -332,7 +335,7 @@ const ExcalidrawBoard: FC = () => { await navigator.clipboard.writeText( `\`\`\`excalidraw\n${value}\n\`\`\``, ) - toast.success('已复制') + toast.success('已复制', { position: 'top-right' }) }} > 复制 diff --git a/src/components/ui/editor/Milkdown/plugins/Image.tsx b/src/components/ui/editor/Milkdown/plugins/Image.tsx index cfd66d2889..da9c65611c 100644 --- a/src/components/ui/editor/Milkdown/plugins/Image.tsx +++ b/src/components/ui/editor/Milkdown/plugins/Image.tsx @@ -92,6 +92,7 @@ const Image = () => {
{!isOnline && ( toast(message, type as TypeOptions, options) }) + +Object.assign(toast, { + dismiss: Toast.dismiss, +}) + +if (typeof window !== 'undefined') { + window.toast = toast +} diff --git a/src/styles/index.css b/src/styles/index.css index 88ec579d8a..07cf64137e 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -6,5 +6,6 @@ @import './clerk.css'; @import './image-zoom.css'; @import './toastify.css'; + @import './theme.css'; @import './webfont.css'; diff --git a/src/styles/toastify.css b/src/styles/toastify.css index d37d75553b..c64ee58603 100644 --- a/src/styles/toastify.css +++ b/src/styles/toastify.css @@ -5,12 +5,44 @@ bottom: 30px; right: 12px; width: 300px; + pointer-events: all !important; } + +:root { + --toastify-toast-width: 320px; + --toastify-z-index: 9999; + --toastify-toast-min-height: 64px; + --toastify-toast-max-height: 800px; + --toastify-toast-offset: 16px; + --toastify-toast-top: max( + var(--toastify-toast-offset), + env(safe-area-inset-top) + ); + --toastify-toast-right: max( + var(--toastify-toast-offset), + env(safe-area-inset-right) + ); + --toastify-toast-left: max( + var(--toastify-toast-offset), + env(safe-area-inset-left) + ); + --toastify-toast-bottom: max( + var(--toastify-toast-offset), + env(safe-area-inset-bottom) + ); +} + .Toastify__toast-icon { display: none; } .Toastify__toast-container { width: 100%; + z-index: var(--toastify-z-index); + -webkit-transform: translate3d(0, 0, var(--toastify-z-index)); + position: fixed; + padding: 4px; + width: var(--toastify-toast-width); + box-sizing: border-box; } .Toastify--animate { @@ -39,6 +71,34 @@ .Toastify__bounce-exit--top-center { animation-name: Toastify__bounceOutUp; } + +.Toastify__toast-container--top-left { + top: var(--toastify-toast-top); + left: var(--toastify-toast-left); +} +.Toastify__toast-container--top-center { + top: var(--toastify-toast-top); + left: 50%; + transform: translateX(-50%); +} +.Toastify__toast-container--top-right { + top: var(--toastify-toast-top); + right: var(--toastify-toast-right); +} +.Toastify__toast-container--bottom-left { + bottom: var(--toastify-toast-bottom); + left: var(--toastify-toast-left); +} +.Toastify__toast-container--bottom-center { + bottom: var(--toastify-toast-bottom); + left: 50%; + transform: translateX(-50%); +} +.Toastify__toast-container--bottom-right { + bottom: var(--toastify-toast-bottom); + right: var(--toastify-toast-right); +} + @keyframes Toastify__bounceOutUp { 20% { transform: translate3d(0, -10px, 0); @@ -128,3 +188,50 @@ transform: translate3d(2000px, 0, 0); } } +/* +.Toastify__toast--stacked { + position: absolute; + width: 100%; + transform: translate3d(0, var(--y), 0) scale(var(--s)); + transition: transform 0.3s; +} +.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, +.Toastify__toast--stacked[data-collapsed] .Toastify__close-button { + transition: opacity 0.1s; +} +.Toastify__toast--stacked[data-collapsed='false'] { + overflow: visible; +} +.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * { + opacity: 0; +} +.Toastify__toast--stacked:after { + content: ''; + position: absolute; + left: 0; + right: 0; + height: calc(var(--g) * 1px); + bottom: 100%; +} +.Toastify__toast--stacked[data-pos='top'] { + top: 0; +} +.Toastify__toast--stacked[data-pos='bot'] { + bottom: 0; +} +.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before { + transform-origin: top; +} +.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before { + transform-origin: bottom; +} +.Toastify__toast--stacked:before { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 100%; + transform: scaleY(3); + z-index: -1; +} */