From be788f461942a90f2e477d8401d59d9daa0b872a Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 16 Sep 2021 20:19:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor(web):=20=E4=BA=AE=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E7=9A=84=E9=83=A8=E5=88=86=E9=85=8D=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/FullModal/index.tsx         |  7 +++++--
 web/src/components/PillTabs.less               |  6 +++---
 web/src/components/SidebarView.tsx             |  4 ++--
 .../components/modals/SettingsView/System.tsx  | 18 ++++++++++++++++--
 .../Main/Content/Personal/Friends/index.tsx    | 12 ++++++++++--
 .../routes/Main/Content/Personal/Sidebar.tsx   | 14 ++++++++------
 web/src/routes/Main/Content/SidebarItem.tsx    |  7 +++++--
 web/src/routes/Main/Navbar/NavItem.tsx         |  2 +-
 8 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/web/src/components/FullModal/index.tsx b/web/src/components/FullModal/index.tsx
index 7087524d..442ddf59 100644
--- a/web/src/components/FullModal/index.tsx
+++ b/web/src/components/FullModal/index.tsx
@@ -34,7 +34,7 @@ export const FullModal: React.FC<FullModalProps> = React.memo((props) => {
   return (
     <div
       className={clsx(
-        'fixed left-0 right-0 top-0 bottom-0 z-10 bg-gray-800 flex justify-center items-center',
+        'fixed left-0 right-0 top-0 bottom-0 z-10 bg-content-light dark:bg-content-dark flex justify-center items-center',
         {
           'opacity-0': !visible,
         }
@@ -48,7 +48,10 @@ export const FullModal: React.FC<FullModalProps> = React.memo((props) => {
           className="absolute right-8 top-8 cursor-pointer flex flex-col"
           onClick={handleClose}
         >
-          <Icon className="text-2xl border-2 rounded-1/2" icon="mdi:close" />
+          <Icon
+            className="text-2xl border-2 rounded-1/2 border-gray-900 dark:border-gray-100"
+            icon="mdi:close"
+          />
           <span className="text-center mt-0.5 font-bold">ESC</span>
         </div>
       )}
diff --git a/web/src/components/PillTabs.less b/web/src/components/PillTabs.less
index 6e7c4fdf..90fc5991 100644
--- a/web/src/components/PillTabs.less
+++ b/web/src/components/PillTabs.less
@@ -1,5 +1,5 @@
 .pill-tabs.ant-tabs.ant-tabs-card {
-  @apply text-gray-100;
+  @apply text-gray-900 dark:text-gray-100;
 
   .ant-tabs-nav {
     @apply px-2 py-3 m-0 text-base;
@@ -12,7 +12,7 @@
       border: 0;
       margin: 2px;
       padding: 2px 8px;
-      @apply text-gray-200 bg-opacity-0 bg-white;
+      @apply text-gray-800 dark:text-gray-200 bg-opacity-0 bg-black dark:bg-white;
 
       &.ant-tabs-tab-active,
       &:hover,
@@ -20,7 +20,7 @@
         @apply rounded bg-opacity-20;
 
         .ant-tabs-tab-btn {
-          @apply text-white;
+          @apply text-black dark:text-white ;
         }
       }
     }
diff --git a/web/src/components/SidebarView.tsx b/web/src/components/SidebarView.tsx
index df37e86d..263774ad 100644
--- a/web/src/components/SidebarView.tsx
+++ b/web/src/components/SidebarView.tsx
@@ -33,9 +33,9 @@ const SidebarViewMenuItemTitle: React.FC<{
 }> = (props) => (
   <div
     className={clsx(
-      'rounded-sm px-1.5 py-2.5 mb-1 text-gray-300 cursor-pointer  hover:bg-black hover:bg-opacity-10 hover:text-gray-200',
+      'rounded-sm px-1.5 py-2.5 mb-1 text-gray-700 dark:text-gray-300 cursor-pointer  hover:bg-black hover:bg-opacity-10 hover:text-gray-800 dark:hover:text-gray-200',
       {
-        'bg-black bg-opacity-10 text-white': props.active,
+        'bg-black bg-opacity-10 text-gray-900 dark:text-white': props.active,
         'text-red-500': props.isDanger,
       }
     )}
diff --git a/web/src/components/modals/SettingsView/System.tsx b/web/src/components/modals/SettingsView/System.tsx
index f65c355e..c2c1a55b 100644
--- a/web/src/components/modals/SettingsView/System.tsx
+++ b/web/src/components/modals/SettingsView/System.tsx
@@ -1,11 +1,13 @@
+import DevContainer from '@/components/DevContainer';
 import { FullModalField } from '@/components/FullModal/Field';
-import { Select } from 'antd';
+import { Select, Switch } from 'antd';
 import React, { useCallback } from 'react';
-import { showToasts, t } from 'tailchat-shared';
+import { showToasts, t, useDarkMode } from 'tailchat-shared';
 import { useLanguage } from 'tailchat-shared';
 
 export const SettingsSystem: React.FC = React.memo(() => {
   const { language, setLanguage } = useLanguage();
+  const { darkMode, setDarkMode } = useDarkMode();
 
   const handleChangeLanguage = useCallback(
     (newLang: string) => {
@@ -31,6 +33,18 @@ export const SettingsSystem: React.FC = React.memo(() => {
           </Select>
         }
       />
+
+      <DevContainer>
+        <FullModalField
+          title={t('暗黑模式')}
+          content={
+            <Switch
+              checked={darkMode}
+              onChange={(checked) => setDarkMode(checked)}
+            />
+          }
+        />
+      </DevContainer>
     </div>
   );
 });
diff --git a/web/src/routes/Main/Content/Personal/Friends/index.tsx b/web/src/routes/Main/Content/Personal/Friends/index.tsx
index 6413021b..980895db 100644
--- a/web/src/routes/Main/Content/Personal/Friends/index.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/index.tsx
@@ -25,7 +25,11 @@ export const FriendPanel: React.FC = React.memo(() => {
         </PillTabPane>
         <PillTabPane
           tab={
-            <Badge className="text-white" size="small" count={send.length}>
+            <Badge
+              className="text-black dark:text-white"
+              size="small"
+              count={send.length}
+            >
               {t('已发送')}
             </Badge>
           }
@@ -35,7 +39,11 @@ export const FriendPanel: React.FC = React.memo(() => {
         </PillTabPane>
         <PillTabPane
           tab={
-            <Badge className="text-white" size="small" count={received.length}>
+            <Badge
+              className="text-black dark:text-white"
+              size="small"
+              count={received.length}
+            >
               {t('待处理')}
             </Badge>
           }
diff --git a/web/src/routes/Main/Content/Personal/Sidebar.tsx b/web/src/routes/Main/Content/Personal/Sidebar.tsx
index e1d11d63..0920b460 100644
--- a/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Personal/Sidebar.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Icon } from '@iconify/react';
 import { SidebarItem } from '../SidebarItem';
-import { useDMConverseList } from 'tailchat-shared';
+import { t, useDMConverseList } from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';
 
 const SidebarSection: React.FC<{
   action: React.ReactNode;
 }> = React.memo((props) => {
   return (
-    <div className="h-10 text-white flex pt-4 px-2">
-      <span className="flex-1 overflow-hidden overflow-ellipsis text-xs text-gray-300">
+    <div className="h-10 text-gray-900 dark:text-white flex pt-4 px-2">
+      <span className="flex-1 overflow-hidden overflow-ellipsis text-xs text-gray-700 dark:text-gray-300">
         {props.children}
       </span>
       <div className="text-base opacity-70 hover:opacity-100 cursor-pointer">
@@ -29,17 +29,19 @@ export const Sidebar: React.FC = React.memo(() => {
   return (
     <div className="p-2">
       <SidebarItem
-        name="好友"
+        name={t('好友')}
         icon={<Icon icon="mdi:account-multiple" />}
         to="/main/personal/friends"
       />
       <SidebarItem
-        name="插件中心"
+        name={t('插件中心')}
         icon={<Icon icon="mdi:puzzle" />}
         to="/main/personal/plugins"
       />
 
-      <SidebarSection action={<Icon icon="mdi:plus" />}>私信</SidebarSection>
+      <SidebarSection action={<Icon icon="mdi:plus" />}>
+        {t('私信')}
+      </SidebarSection>
 
       {converseList.map((converse) => {
         return <SidebarDMItem key={converse._id} converse={converse} />;
diff --git a/web/src/routes/Main/Content/SidebarItem.tsx b/web/src/routes/Main/Content/SidebarItem.tsx
index d0ad91de..bf19a50f 100644
--- a/web/src/routes/Main/Content/SidebarItem.tsx
+++ b/web/src/routes/Main/Content/SidebarItem.tsx
@@ -21,7 +21,7 @@ export const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
     <Link to={to}>
       <div
         className={clsx(
-          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-2 h-11 flex items-center text-base group mb-0.5',
+          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-gray-900 dark:text-white rounded px-2 h-11 flex items-center text-base group mb-0.5',
           {
             'bg-white bg-opacity-20': isActive,
           }
@@ -35,7 +35,10 @@ export const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
           )}
         </div>
 
-        <Typography.Text className="flex-1 text-white" ellipsis={true}>
+        <Typography.Text
+          className="flex-1 text-gray-900 dark:text-white"
+          ellipsis={true}
+        >
           {name}
         </Typography.Text>
 
diff --git a/web/src/routes/Main/Navbar/NavItem.tsx b/web/src/routes/Main/Navbar/NavItem.tsx
index 3e32379e..e4ed3791 100644
--- a/web/src/routes/Main/Navbar/NavItem.tsx
+++ b/web/src/routes/Main/Navbar/NavItem.tsx
@@ -51,7 +51,7 @@ export const NavbarNavItem: React.FC<{
         >
           <span
             className={clsx(
-              'bg-white w-2 h-2 rounded transition-all duration-300',
+              'bg-gray-400 dark:bg-white w-2 h-2 rounded transition-all duration-300',
               {
                 'h-2 group-hover:h-5': !isActive,
                 'h-10': isActive,