achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI：完成整体暗色适配

Browse Source
This commit is contained in:
宇阳
2024-12-10 13:00:38 +08:00
parent 1b9bc1adeb
commit a0790bbf1c
7 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/Create/components/Editor/index.scss
View File

@@ -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;
}
}

7
src/pages/Create/components/Editor/index.tsx
View File

@@ -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;

4
src/pages/CreateRecord/index.tsx
View File

@@ -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>

4
src/pages/Setup/index.tsx
View File

@@ -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">

1
src/pages/User/index.tsx
View File

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

15
src/pages/Web/index.scss
View File

@@ -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 {

10
src/pages/Work/index.tsx
View File

@@ -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" />