Kaynağa Gözat

fix: 暗黑模式

jihuaqiang 1 hafta önce
ebeveyn
işleme
5feb038755

+ 6 - 2
src/components/layout/headerbar.tsx

@@ -1,4 +1,3 @@
-
 import { Button, Dropdown, Layout, message, Switch} from 'antd';
 import useConfigStore from '../../store/config';
 import LogoIcon from "@src/assets/images/login/logo.svg?react";
@@ -28,7 +27,12 @@ const Headerbar = () => {
           <span className='text-lg font-bold'>票圈内容合作平台</span>
         </div>
         <div className='flex items-center gap-[30px] cursor-pointer'>
-          <Switch checkedChildren="Light" unCheckedChildren="Dark" defaultChecked onChange={(checked) => setAlgorithm(checked ? 'default' : 'dark')} />
+          <Switch 
+            checkedChildren="Light" 
+            unCheckedChildren="Dark" 
+            defaultChecked={useConfigStore.getState().themeConfig._algorithm[0] !== 'dark'} 
+            onChange={(checked) => setAlgorithm(checked ? 'default' : 'dark')} 
+          />
 					<Dropdown trigger={['hover']} menu={{items: [{label: (<Button type="primary" onClick={logoutHandle}>退出账号</Button>), key: 'logout'}]}}>
 						<div className='flex items-center gap-[10px] text-xl'>
 							<div>{userInfo.contactName || userInfo.name}</div>

+ 33 - 2
src/store/config.ts

@@ -22,10 +22,31 @@ const algorithmMap: Record<string, MappingAlgorithm> = {
   compact: theme.compactAlgorithm
 }
 
+// Get theme from localStorage or use default
+const getStoredTheme = () => {
+  const storedTheme = localStorage.getItem('theme_mode')
+  return storedTheme && ['default', 'dark', 'compact'].includes(storedTheme) 
+    ? storedTheme 
+    : 'default'
+}
+
+// Initialize HTML class based on theme
+const initThemeClass = (themeName: string) => {
+  if (themeName === 'dark') {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+// Initialize theme from localStorage
+const initialTheme = getStoredTheme()
+initThemeClass(initialTheme)
+
 const useConfigStore = create<ConfigState & Actions>()((set) => ({
   themeConfig: {
-    _algorithm: ['default'],
-    algorithm: [theme.defaultAlgorithm],
+    _algorithm: initialTheme === 'default' ? ['default'] : [initialTheme],
+    algorithm: initialTheme === 'default' ? [theme.defaultAlgorithm] : [algorithmMap[initialTheme]],
     primaryColor: '#1890ff'
   },
   themeOptions: [
@@ -34,6 +55,16 @@ const useConfigStore = create<ConfigState & Actions>()((set) => ({
     { label: 'Compact', value: 'compact' },
   ],
   setAlgorithm: (v: string) => {
+    // Store theme in localStorage
+    localStorage.setItem('theme_mode', v)
+    
+    // Update HTML class for dark mode
+    if (v === 'dark') {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+    
     set((state) => {
       const includesCompact = state.themeConfig._algorithm.includes('compact')
       const _algorithm = includesCompact ? [v, 'compact'] : [v]

+ 1 - 1
src/views/publishContent/weCom/index.tsx

@@ -174,7 +174,7 @@ const WeGZHContent: React.FC = () => {
 
 	return (
 		<div>
-			<div className="rounded-lg bg-white p-4">
+			<div className="rounded-lg p-4">
 				<div className="text-lg font-medium mb-3">企业微信内容库</div>
 				
 				{/* 搜索区域 */}

+ 1 - 1
src/views/publishContent/weGZH/components/publishPlanModal/index.tsx

@@ -220,7 +220,7 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
 							{/* Add Video Button - Conditionally Rendered */}
 							{selectedVideos.length < 3 && (
 								<div
-									className="w-[240px] h-[316px] flex flex-col justify-center items-center bg-gray-100 border border-dashed border-gray-300 rounded cursor-pointer hover:border-blue-500 hover:text-blue-500"
+									className="w-[240px] h-[316px] flex flex-col justify-center items-center  border border-dashed border-gray-300 rounded cursor-pointer dark:border-gray-600  hover:border-blue-500 hover:text-blue-500"
 									onClick={openVideoSelector} // Open the drawer on click
 								>
 									<PlusOutlined className="text-2xl mb-2" />

+ 0 - 1
src/views/publishContent/weGZH/index.module.css

@@ -1,5 +1,4 @@
 .antTable {
-	border: 1px solid #f0f0f0;
 	border-top: none;
 }