perf: 优化在小屏幕移动端上的界面表现，移除不恰当的边距

msgbyte · Jan 27, 2023 · 90a30c7 · 90a30c7
1 parent 31c62b2
commit 90a30c7
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 6 deletions.
diff --git a/client/web/src/components/ChatBox/ChatMessageList/Item.tsx b/client/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -75,7 +75,7 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
   return (
     <div
       className={clsx(
-        'chat-message-item flex px-2 group relative select-text',
+        'chat-message-item flex px-2 mobile:px-0 group relative select-text',
         {
           'bg-black bg-opacity-10': isActionBtnActive,
           'hover:bg-black hover:bg-opacity-5': !isActionBtnActive,
@@ -84,7 +84,7 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
       data-message-id={payload._id}
     >
       {/* 头像 */}
-      <div className="w-18 flex items-start justify-center pt-0.5">
+      <div className="w-18 mobile:w-14 flex items-start justify-center pt-0.5">
         {showAvatar ? (
           <Avatar size={40} src={userInfo.avatar} name={userInfo.nickname} />
         ) : (

diff --git a/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx b/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
@@ -67,7 +67,7 @@ export const NormalMessageList: React.FC<MessageListProps> = React.memo(
 
     return (
       <div
-        className="flex-1 overflow-y-scroll flex flex-col-reverse"
+        className="flex-1 overflow-y-scroll overflow-x-hidden flex flex-col-reverse"
         ref={containerRef}
         onScroll={handleScroll}
       >

diff --git a/client/web/src/routes/Main/Navbar/index.tsx b/client/web/src/routes/Main/Navbar/index.tsx
@@ -4,7 +4,6 @@ import { MobileMenuBtn } from './MobileMenuBtn';
 import { SettingBtn } from './SettingBtn';
 import { Divider } from 'antd';
 import { PersonalNav } from './PersonalNav';
-import { DevContainer } from 'tailchat-shared';
 import { InboxNav } from './InboxNav';
 import { InstallBtn } from './InstallBtn';
 import { ReactQueryDevBtn } from './ReactQueryDevBtn';
@@ -16,7 +15,7 @@ export const Navbar: React.FC = React.memo(() => {
   return (
     <div
       data-tc-role="navbar"
-      className="w-18 bg-navbar-light dark:bg-navbar-dark flex flex-col justify-start items-center pt-4 pb-4"
+      className="w-18 mobile:zoom-4/5 bg-navbar-light dark:bg-navbar-dark flex flex-col justify-start items-center pt-4 pb-4"
     >
       <MobileMenuBtn />
 

diff --git a/client/web/tailwind.config.js b/client/web/tailwind.config.js
@@ -17,7 +17,7 @@ const customTheme = {
   },
 };
 
-const tailchat = plugin(({ addUtilities }) => {
+const tailchat = plugin(({ e, addUtilities }) => {
   // Reference: https://www.tailwindcss.cn/docs/plugins#adding-utilities
   const newUtilities = {
     '.thin-line-bottom': {
@@ -37,6 +37,110 @@ const tailchat = plugin(({ addUtilities }) => {
   };
 
   addUtilities(newUtilities);
+
+  // Fork from https://github.com/ItzAfroBoy/tailwindcss-zoom/blob/master/index.js
+  const percents = [
+    {
+      key: '1/2',
+      value: '50%',
+    },
+    {
+      key: '1/3',
+      value: '33.333333%',
+    },
+    {
+      key: '2/3',
+      value: '66.666667%',
+    },
+    {
+      key: '1/4',
+      value: '25%',
+    },
+    {
+      key: '3/4',
+      value: '75%',
+    },
+    {
+      key: '1/5',
+      value: '20%',
+    },
+    {
+      key: '2/5',
+      value: '40%',
+    },
+    {
+      key: '3/5',
+      value: '60%',
+    },
+    {
+      key: '4/5',
+      value: '80%',
+    },
+    {
+      key: '1/6',
+      value: '16.666667%',
+    },
+    {
+      key: '5/6',
+      value: '83.333333%',
+    },
+    {
+      key: '1/10',
+      value: '10%',
+    },
+    {
+      key: '3/10',
+      value: '30%',
+    },
+    {
+      key: '7/10',
+      value: '70%',
+    },
+    {
+      key: '9/10',
+      value: '90%',
+    },
+    {
+      key: 'full',
+      value: '100%',
+    },
+    {
+      key: '1.1',
+      value: '110%',
+    },
+    {
+      key: '1.2',
+      value: '120%',
+    },
+    {
+      key: '1.25',
+      value: '125%',
+    },
+    {
+      key: '1.5',
+      value: '150%',
+    },
+    {
+      key: '1.75',
+      value: '175%',
+    },
+    {
+      key: '2',
+      value: '200%',
+    },
+  ];
+
+  const zoom = percents.map((item) => {
+    return {
+      [`.${e(`zoom-${item.key}`)}`]: {
+        zoom: item.value,
+      },
+    };
+  });
+
+  addUtilities(zoom, {
+    variants: ['responsive', 'hover'],
+  });
 });
 
 module.exports = {