UI：完成整体暗色适配

src/pages/Create/components/Editor/index.scss

@@ -4,8 +4,22 @@
     height: calc(100vh - 200px);
     border: none;
     z-index: 99999;
+    @apply bg-white dark:bg-boxdark text-black dark:text-white;
 
     .bytemd-toolbar {
         background-color: transparent;
+        @apply dark:border-strokedark;
+    }
+
+    .bytemd-preview {
+        @apply dark:border-strokedark;
+    }
+
+    .bytemd-status{
+        @apply dark:border-strokedark;
+    }
+
+    .CodeMirror {
+        @apply dark:text-white bg-white dark:bg-boxdark;
     }
 }

src/pages/Create/components/Editor/index.tsx

@@ -1,3 +1,7 @@
+import { useState } from 'react';
+import { Spin } from 'antd';
+import axios from 'axios';
+
 import { baseURL } from '@/utils/request';
 import { useUserStore } from '@/stores';
 
@@ -10,9 +14,6 @@ import 'bytemd/dist/index.css';
 import zh from 'bytemd/lib/locales/zh_Hans.json';
 
 import './index.scss';
-import axios from 'axios';
-import { Spin } from 'antd';
-import { useState } from 'react';
 
 interface Props {
     value: string;

src/pages/CreateRecord/index.tsx

@@ -75,7 +75,7 @@ export default () => {
                         placeholder="记录此刻！"
                         value={content}
                         onChange={(e) => setContent(e.target.value)}
-                        className="w-[800px] p-4 border-2 border-[#eee] text-base rounded-md" />
+                        className="w-[800px] p-4 border-2 border-[#eee] dark:border-strokedark text-base rounded-md" />
 
                     {imageList.length
                         ? (
@@ -100,7 +100,7 @@ export default () => {
                                 }
                             </div>
                         )
-                        : <LuImagePlus className="absolute bottom-4 left-4 text-4xl text-slate-700 hover:text-primary cursor-pointer" onClick={() => setIsModalOpen(true)} />}
+                        : <LuImagePlus className="absolute bottom-4 left-4 text-4xl text-slate-700 dark:text-white hover:text-primary dark:hover:text-primary cursor-pointer" onClick={() => setIsModalOpen(true)} />}
 
                     <Button type="primary" size="large" icon={<BiLogoTelegram className="text-xl" />} className="absolute bottom-4 right-4" onClick={onSubmit} />
                 </div>

src/pages/Setup/index.tsx

@@ -61,11 +61,11 @@ const SetupPage = () => {
 
             <Card className='mt-2 min-h-[calc(100vh-180px)]'>
                 <div className="flex flex-col md:flex-row">
-                    <ul className="w-full md:w-[20%] md:mr-5 mb-10 md:mb-0 border-b md:border-r border-[#eee] divide-y divide-solid divide-[#F6F6F6]">
+                    <ul className="w-full md:w-[20%] md:mr-5 mb-10 md:mb-0 border-b-0 md:border-r border-[#eee] dark:border-strokedark divide-y divide-solid divide-[#F6F6F6] dark:divide-strokedark">
                         {list.map((item) => (
                             <li
                                 key={item.key}
-                                className={`relative p-3 pl-5 before:content-[''] before:absolute before:top-1/2 before:left-0 before:-translate-y-1/2 before:w-[3.5px] before:h-[0%] before:bg-[#727cf5] cursor-pointer transition-all ${active === item.key ? 'bg-[#f7f7f8] before:h-full' : ''}`}
+                                className={`relative p-3 pl-5 before:content-[''] before:absolute before:top-1/2 before:left-0 before:-translate-y-1/2 before:w-[3.5px] before:h-[0%] before:bg-[#727cf5] cursor-pointer transition-all ${active === item.key ? 'bg-[#f7f7f8] dark:bg-[#3c5370] before:h-full' : ''}`}
                                 onClick={() => setActive(item.key)}
                             >
                                 <h3 className="flex items-center text-base">

src/pages/User/index.tsx

@@ -215,6 +215,7 @@ const UserPage = () => {
                         position: ['bottomCenter'],
                         defaultPageSize: 8
                     }}
+                    scroll={{ x: 'max-content' }}
                 />
             </Card>
 

src/pages/Web/index.scss

@@ -16,10 +16,10 @@
             width: 200px;
             height: 250px;
             padding: 0px 20px;
-            border: 1px solid #eee;
             border-radius: 5px;
             background-color: #fff;
             transition: box-shadow 0.3s;
+            @apply border border-[#eee] dark:border-strokedark bg-white dark:bg-[#2b425f];
 
             &:hover {
                 box-shadow: 0px 2px 15px -3px rgba(121, 122, 243, 0.1);
@@ -72,11 +72,12 @@
                 font-weight: 900;
                 transition: color 0.3s;
                 cursor: pointer;
+
+                @apply dark:text-white;
             }
 
             .description {
                 font-size: 13px;
-                color: #666;
                 line-height: 20px;
 
                 display: -webkit-box !important;
@@ -85,6 +86,8 @@
                 text-overflow: ellipsis;
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 2;
+
+                @apply text-[#666] dark:text-[#d0d0d0];
             }
 
             .type {
@@ -99,15 +102,15 @@
             }
 
             &:hover .type {
-                bottom: -40px;
+                bottom: -50px;
             }
 
             .operate {
                 position: absolute;
-                bottom: -40px;
+                bottom: -50px;
                 display: flex;
-                background-color: #fff;
                 transition: bottom 0.3s;
+                @apply bg-white dark:bg-[#475f7d];
 
                 width: 100%;
                 justify-content: center;
@@ -132,7 +135,7 @@
             }
 
             &:hover .operate {
-                bottom: 35px;
+                bottom: 30px;
             }
 
             .headFor {

src/pages/Work/index.tsx

@@ -152,7 +152,7 @@ const ListItem = ({ item, type, fetchData }: ListItemProps) => {
                         <img src={item.avatar || item.image} alt="" className="w-13 h-13 border border-[#eee] rounded-full" />
                     ) : <RandomAvatar className="w-13 h-13 border border-[#eee] rounded-full" />}
 
-                    <div className="flex flex-col justify-center ml-4 px-4 py-2 min-w-[210px] text-xs md:text-sm bg-[#F9F9FD] rounded-md">
+                    <div className="flex flex-col justify-center ml-4 px-4 py-2 min-w-[210px] text-xs md:text-sm bg-[#F9F9FD] dark:bg-[#4e5969] rounded-md">
                         {type === "link" ? (
                             <>
                                 <div>名称：{item.title}</div>
@@ -191,7 +191,7 @@ const ListItem = ({ item, type, fetchData }: ListItemProps) => {
                                 { key: 'dismiss', label: "驳回", onClick: () => [setIsModalOpen(true), , setBtnType("dismiss")] }
                             ]
                     }}>
-                        <div className="flex justify-evenly items-center bg-[#F9F9FD] w-11 h-5 rounded-md cursor-pointer">
+                        <div className="flex justify-evenly items-center bg-[#F9F9FD] dark:bg-[#4e5969] w-11 h-5 rounded-md cursor-pointer">
                             <span className="inline-block w-2 h-2 bg-[#b5c2d3] rounded-full"></span>
                             <span className="inline-block w-2 h-2 bg-[#b5c2d3] rounded-full"></span>
                         </div>
@@ -217,7 +217,7 @@ const ListItem = ({ item, type, fetchData }: ListItemProps) => {
 }
 
 const WorkPage = () => {
-    const activeSty = "bg-[#f9f9ff] text-primary";
+    const activeSty = "bg-[#f9f9ff] dark:bg-[#3c5370] text-primary";
     const [active, setActive] = useState<Menu>("comment");
     const [commentList, setCommentList] = useState<any[]>([]);
     const [linkList, setLinkList] = useState<any[]>([]);
@@ -255,12 +255,12 @@ const WorkPage = () => {
             <Title value="工作台" />
             <Card className="mt-2 min-h-[calc(100vh-180px)]">
                 <div className="flex flex-col md:flex-row w-full">
-                    <div className="w-full min-w-[200px] md:w-2/12 md:min-h-96 mb-5 md:mb-0 pr-4 border-b md:border-b-transparent md:border-r border-[#eee]">
+                    <div className="w-full min-w-[200px] md:w-2/12 md:min-h-96 mb-5 md:mb-0 pr-4 md:border-b-transparent md:border-r border-[#eee] dark:border-strokedark">
                         <ul className="space-y-1">
                             {(["comment", "link", "wall"] as Menu[]).map((menu) => (
                                 <li
                                     key={menu}
-                                    className={`flex items-center w-full py-3 px-4 hover:bg-[#f9f9ff] hover:text-primary ${active === menu ? activeSty : ''} rounded-md text-base cursor-pointer transition-colors`}
+                                    className={`flex items-center w-full py-3 px-4 hover:bg-[#f9f9ff] dark:hover:bg-[#3c5370] hover:text-primary ${active === menu ? activeSty : ''} rounded-md text-base cursor-pointer transition-colors`}
                                     onClick={() => setActive(menu)}
                                 >
                                     <img src={menu === "comment" ? comment : menu === "link" ? link : info} alt="" className="w-8 mr-4" />