2
0
Просмотр исходного кода

💄 style(mobile): replace svg icons with lucide-react components

- 导入lucide-react图标库替代原生svg图标
- 替换导航菜单中的所有图标:
  - 公开解盘: MessageCircle替代对话气泡svg
  - 学员解盘: Users替代用户组svg
  - 考试模式: FileText替代文件svg
  - 训练模式: Heart替代心形svg
  - 视频回放: Video替代视频svg
  - 个人中心: User替代用户svg
  - 关闭按钮: X替代叉号svg
  - 菜单按钮: Menu替代菜单svg
- 统一图标尺寸为w-5 h-5,保持视觉一致性
yourname 6 месяцев назад
Родитель
Сommit
955be3726b
1 измененных файлов с 18 добавлено и 34 удалено
  1. 18 34
      src/client/mobile/layouts/MainLayout.tsx

+ 18 - 34
src/client/mobile/layouts/MainLayout.tsx

@@ -4,6 +4,16 @@ import { useAuth } from '@/client/mobile/hooks/AuthProvider';
 import { UserType } from '@/server/modules/users/user.enum';
 import { getGlobalConfig } from '@/client/utils/utils';
 import { cn } from '@/client/lib/utils';
+import {
+  MessageCircle,
+  Users,
+  FileText,
+  Heart,
+  Video,
+  User,
+  X,
+  Menu
+} from 'lucide-react';
 
 /**
  * 主布局组件 - shadcn风格
@@ -28,51 +38,31 @@ export const MainLayout = () => {
     {
       id: 'public-chatroom',
       label: '公开解盘',
-      icon: (
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-        </svg>
-      ),
+      icon: <MessageCircle className="w-5 h-5" />,
       onClick: () => handleClassroomClick(getGlobalConfig('PUBLIC_CHATROOM_ID'))
     },
     {
       id: 'private-chatroom',
       label: '学员解盘',
-      icon: (
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-        </svg>
-      ),
+      icon: <Users className="w-5 h-5" />,
       onClick: () => handleClassroomClick(getGlobalConfig('PRIVATE_CHATROOM_ID'))
     },
     {
       id: 'exam',
       label: '考试模式',
-      icon: (
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-      ),
+      icon: <FileText className="w-5 h-5" />,
       onClick: () => navigate('/mobile/exam')
     },
     {
       id: 'training',
       label: '训练模式',
-      icon: (
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-        </svg>
-      ),
+      icon: <Heart className="w-5 h-5" />,
       onClick: () => navigate('/mobile/xunlian')
     },
     {
       id: 'video-replay',
       label: '视频回放',
-      icon: (
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-        </svg>
-      ),
+      icon: <Video className="w-5 h-5" />,
       onClick: () => navigate('/mobile/video-replay')
     }
   ];
@@ -93,9 +83,7 @@ export const MainLayout = () => {
                   onClick={() => navigate('/mobile/member')}
                   className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center mb-1"
                 >
-                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
-                  </svg>
+                  <User className="w-4 h-4" />
                 </button>
                 <span className="text-xs text-muted-foreground truncate max-w-[60px]">
                   {user.username}
@@ -106,9 +94,7 @@ export const MainLayout = () => {
               onClick={() => setSidebarOpen(false)}
               className="lg:hidden p-1 rounded-md hover:bg-muted mt-2"
             >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
+              <X className="w-4 h-4" />
             </button>
           </div>
 
@@ -154,9 +140,7 @@ export const MainLayout = () => {
                 onClick={() => setSidebarOpen(true)}
                 className="lg:hidden p-2 rounded-md hover:bg-muted mr-2"
               >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-                </svg>
+                <Menu className="w-5 h-5" />
               </button>
               <h1 className="text-xl font-semibold text-foreground">股票训练系统</h1>
             </div>