ai-space/magic-resume
3
0
Fork 0
mirror of https://github.com/JOYCEQL/magic-resume.git synced 2026-07-03 14:07:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

perf: scrollbar style

Browse Source
This commit is contained in:
siyue
2024-10-29 22:12:59 +08:00
parent 09ad03f8cc
commit 3463b458a2
4 changed files with 183 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/fronted/src/app/globals.css
+1
View File
@@ -161,3 +161,4 @@ hr {
border-top: 1px solid gray;
margin: 2rem 0;
}
apps/fronted/src/app/workbench/page.tsx
+2
View File
@@ -9,6 +9,7 @@ import { EditPanel } from "@/components/editor/EditPanel";
import { PreviewPanel } from "@/components/editor/PreviewPanel";
import { getThemeConfig } from "@/theme/themeConfig";
import { Eye, Edit2, Menu } from "lucide-react";
import { useScrollbarTheme } from "@/hooks/useScrollBarTheme";
export default function Home() {
const theme = useResumeStore((state) => state.theme);
@@ -18,6 +19,7 @@ export default function Home() {
// 移动端状态管理
const [showSidebar, setShowSidebar] = useState(false);
const [isPreviewMode, setIsPreviewMode] = useState(false);
useScrollbarTheme();
// 移动端切换按钮
const MobileNav = () => (
apps/fronted/src/hooks/useScrollBarTheme.ts
+82
View File
@@ -0,0 +1,82 @@
import { useEffect } from "react";
import { useResumeStore } from "../store/useResumeStore"; // 调整路径到你的 store 文件
export const useScrollbarTheme = () => {
const theme = useResumeStore((state) => state.theme);
useEffect(() => {
// 创建样式元素
const styleElement = document.createElement("style");
styleElement.setAttribute("id", "scrollbar-style");
// 根据主题设置不同的滚动条样式
const scrollbarStyles =
theme === "dark"
? `
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #2d2d2d;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #666;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #888;
}
* {
scrollbar-width: thin;
scrollbar-color: #666 #2d2d2d;
}
`
: `
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
* {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
`;
styleElement.textContent = scrollbarStyles;
// 移除旧的样式（如果存在）
const existingStyle = document.getElementById("scrollbar-style");
if (existingStyle) {
existingStyle.remove();
}
// 添加新样式
document.head.appendChild(styleElement);
// 清理函数
return () => {
styleElement.remove();
};
}, [theme]);
};
apps/fronted/tailwind.config.ts
+98 -98
View File
@@ -1,106 +1,106 @@
import type { Config } from "tailwindcss"
import type { Config } from "tailwindcss";
const config = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}"
],
prefix: "",
theme: {
container: {
center: 'true',
padding: '2rem',
screens: {
'2xl': '1400px'
}
},
extend: {
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
keyframes: {
'accordion-down': {
from: {
height: '0'
},
to: {
height: 'var(--radix-accordion-content-height)'
}
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)'
},
to: {
height: '0'
}
},
'accordion-down': {
from: {
height: '0'
},
to: {
height: 'var(--radix-accordion-content-height)'
}
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)'
},
to: {
height: '0'
}
}
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out'
}
}
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px"
}
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))"
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))"
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))"
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))"
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))"
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))"
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))"
}
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)"
},
keyframes: {
"accordion-down": {
from: {
height: "0"
},
to: {
height: "var(--radix-accordion-content-height)"
}
},
"accordion-up": {
from: {
height: "var(--radix-accordion-content-height)"
},
to: {
height: "0"
}
},
"accordion-down": {
from: {
height: "0"
},
to: {
height: "var(--radix-accordion-content-height)"
}
},
"accordion-up": {
from: {
height: "var(--radix-accordion-content-height)"
},
to: {
height: "0"
}
}
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out"
}
}
},
plugins: [require("tailwindcss-animate")],
} satisfies Config
plugins: [require("tailwindcss-animate")]
} satisfies Config;
export default config
export default config;