feat: optiminize message&img display

This commit is contained in:
butterfly
2024-04-19 19:28:48 +08:00
parent 1074fffe79
commit 37cc87531c
10 changed files with 132 additions and 43 deletions

View File

@@ -3,8 +3,9 @@ import {
MAX_SIDEBAR_WIDTH,
MIN_SIDEBAR_WIDTH,
} from "@/app/constant";
import { useAppConfig } from "../store/config";
import { useAppConfig } from "@/app/store/config";
import { useRef } from "react";
import { updateGlobalCSSVars } from "@/app/utils/client";
export default function useDragSideBar() {
const limit = (x: number) =>
@@ -35,9 +36,11 @@ export default function useDragSideBar() {
const d = e.clientX - startX.current;
const nextWidth = limit(startDragWidth.current + d);
const { menuWidth } = updateGlobalCSSVars(nextWidth);
document.documentElement.style.setProperty(
"--sidebar-width",
`${nextWidth}px`,
"--menu-width",
`${menuWidth}px`,
);
config.update((config) => {
config.sidebarWidth = nextWidth;
@@ -62,7 +65,7 @@ export default function useDragSideBar() {
// useLayoutEffect(() => {
// const barWidth = limit(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
// document.documentElement.style.setProperty("--sidebar-width", `${barWidth}px`);
// document.documentElement.style.setProperty("--menu-width", `${barWidth}px`);
// }, [config.sidebarWidth]);
return {

View File

@@ -8,8 +8,10 @@ import {
DEFAULT_SIDEBAR_WIDTH,
MAX_SIDEBAR_WIDTH,
MIN_SIDEBAR_WIDTH,
SIDEBAR_ID,
} from "@/app/constant";
import { useAppConfig } from "../store/config";
import { useAppConfig } from "@/app/store/config";
import { updateGlobalCSSVars } from "@/app/utils/client";
export const MOBILE_MAX_WIDTH = 768;
@@ -42,16 +44,10 @@ export default function useListenWinResize() {
}
}
nextSidebar = Math.max(
MIN_SIDEBAR_WIDTH,
Math.min(MAX_SIDEBAR_WIDTH, nextSidebar),
);
document.documentElement.style.setProperty(
"--sidebar-width",
`${nextSidebar}px`,
);
const { menuWidth } = updateGlobalCSSVars(nextSidebar);
config.update((config) => {
config.sidebarWidth = nextSidebar;
config.sidebarWidth = menuWidth;
});
});
}