Home Esplora Aiuto
Registrati Accedi
m1ro
/
gami-op
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

Enhance styling and functionality across components. Updated global styles to utilize Ant Design tokens for consistent theming. Improved TabBar and Dashboard layout with dynamic color properties, and refined application description in metadata for clarity.

0es 4 mesi fa
parent
f3bd16a661
commit
cd75abf08b
7 ha cambiato i file con 58 aggiunte e 30 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 1 1
      .cursor/rules/lanu-op-rules.mdc
  2. 3 0
      biome.json
  3. 9 4
      src/app/(dashboard)/layout.tsx
  4. 4 4
      src/app/globals.css
  5. 19 10
      src/app/layout.tsx
  6. 15 5
      src/components/TabBar/Tab.tsx
  7. 7 6
      src/components/TabBar/index.tsx

+ 1 - 1
.cursor/rules/lanu-op-rules.mdc
Vedi File 

@@ -1,4 +1,4 @@
 
 ---
 
 ---
 
-description: 本应用为陪玩项目Lanu的后台管理系统，使用next.js提供服务，前端使用React@19 + Ant Design@5
 
+description: 本应用为陪玩项目Lanu的后台管理系统，使用next.js提供服务，前端使用React@19 + Ant Design@5。本项目所有颜色使用Antd@5的Design Token实现，不要私自更改。
 
 alwaysApply: true
 
 alwaysApply: true
 
 ---
 
 ---

+ 3 - 0
biome.json
Vedi File 

@@ -20,6 +20,9 @@
 
       "recommended": true,
 
       "recommended": true,
 
       "suspicious": {
 
       "suspicious": {
 
         "noUnknownAtRules": "off"
 
         "noUnknownAtRules": "off"
 
+      },
 
+      "complexity": {
 
+        "noImportantStyles": "off"
 
       }
 
       }
 
     },
 
     },
 
     "domains": {
 
     "domains": {

+ 9 - 4
src/app/(dashboard)/layout.tsx
Vedi File 

@@ -47,7 +47,12 @@ export default function DashboardLayout({
 
   const pathname = usePathname();
 
   const pathname = usePathname();
 
   const { user, logout, isAuthenticated, isLoading } = useAuth();
 
   const { user, logout, isAuthenticated, isLoading } = useAuth();
 
   const {
 
   const {
 
-    token: { colorBgContainer, borderRadiusLG },
 
+    token: { 
+      colorBgContainer, 
+      borderRadiusLG,
 
+      colorTextLightSolid,
 
+      colorPrimary,
 
+    },
 
   } = theme.useToken();
 
   } = theme.useToken();
 
 
 
   // Menu store
 
   // Menu store
 
@@ -174,7 +179,7 @@ export default function DashboardLayout({
 
             height: "32px",
 
             height: "32px",
 
             margin: "16px",
 
             margin: "16px",
 
             fontSize: "18px",
 
             fontSize: "18px",
 
-            color: "#fff",
 
+            color: colorTextLightSolid,
 
             fontWeight: "bold",
 
             fontWeight: "bold",
 
           }}
 
           }}
 
         >
 
         >
 
@@ -200,7 +205,7 @@ export default function DashboardLayout({
 
           <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
 
           <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
 
             <Space className="cursor-pointer">
 
             <Space className="cursor-pointer">
 
               <Avatar
 
               <Avatar
 
-                style={{ backgroundColor: "#667eea" }}
 
+                style={{ backgroundColor: colorPrimary }}
 
                 icon={<UserOutlined />}
 
                 icon={<UserOutlined />}
 
               />
 
               />
 
               <Text strong>{user?.username}</Text>
 
               <Text strong>{user?.username}</Text>
 
@@ -211,7 +216,7 @@ export default function DashboardLayout({
 
         <Content className="mx-4 pt-4">
 
         <Content className="mx-4 pt-4">
 
           <Breadcrumb items={breadcrumbItems} />
 
           <Breadcrumb items={breadcrumbItems} />
 
           <div
 
           <div
 
-            className="p-4 rounded-lg mt-4"
 
+            className="p-4 mt-4 rounded-lg"
 
             style={{
 
             style={{
 
               minHeight: 360,
 
               minHeight: 360,
 
               background: colorBgContainer,
 
               background: colorBgContainer,

+ 4 - 4
src/app/globals.css
Vedi File 

@@ -36,16 +36,16 @@ body {
 
 }
 
 }
 
 
 
 .tab-bar::-webkit-scrollbar-track {
 
 .tab-bar::-webkit-scrollbar-track {
 
-  background: #f0f0f0;
 
+  background: var(--ant-color-fill-tertiary, #f0f0f0);
 
 }
 
 }
 
 
 
 .tab-bar::-webkit-scrollbar-thumb {
 
 .tab-bar::-webkit-scrollbar-thumb {
 
-  background: #bfbfbf;
 
+  background: var(--ant-color-fill-secondary, #bfbfbf);
 
   border-radius: 2px;
 
   border-radius: 2px;
 
 }
 
 }
 
 
 
 .tab-bar::-webkit-scrollbar-thumb:hover {
 
 .tab-bar::-webkit-scrollbar-thumb:hover {
 
-  background: #8c8c8c;
 
+  background: var(--ant-color-fill, #8c8c8c);
 
 }
 
 }
 
 
 
 /* Tab item hover effect */
 
 /* Tab item hover effect */
 
@@ -54,7 +54,7 @@ body {
 
 }
 
 }
 
 
 
 .tab-item:focus {
 
 .tab-item:focus {
 
-  outline: 2px solid #1890ff;
 
+  outline: 2px solid var(--ant-color-primary, #1890ff);
 
   outline-offset: 2px;
 
   outline-offset: 2px;
 
 }
 
 }

+ 19 - 10
src/app/layout.tsx
Vedi File 

@@ -5,6 +5,7 @@ import type { Metadata } from "next";
 
 import { Geist, Geist_Mono } from "next/font/google";
 
 import { Geist, Geist_Mono } from "next/font/google";
 
 import "./globals.css";
 
 import "./globals.css";
 
 import { ConfigProvider } from "antd";
 
 import { ConfigProvider } from "antd";
 
+import zhCN from "antd/locale/zh_CN";
 
 import { AuthProvider } from "@/contexts/AuthContext";
 
 import { AuthProvider } from "@/contexts/AuthContext";
 
 
 
 const geistSans = Geist({
 
 const geistSans = Geist({
 
@@ -31,13 +32,21 @@ export default function RootLayout({
 
     <html lang="zh-CN">
 
     <html lang="zh-CN">
 
       <body
 
       <body
 
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 
-      >
 
-        <AntdRegistry>
 
-          <ConfigProvider>
 
-            <AuthProvider>{children}</AuthProvider>
 
-          </ConfigProvider>
 
-        </AntdRegistry>
 
-      </body>
 
-    </html>
 
-  );
 
-}
 
+        >
 
+          <AntdRegistry>
 
+            <ConfigProvider
 
+              locale={zhCN}
 
+              theme={{
 
+                token: {
 
+                  colorPrimary: "#1890ff",
 
+                },
 
+                cssVar: true,
 
+              }}
 
+            >
 
+              <AuthProvider>{children}</AuthProvider>
 
+            </ConfigProvider>
 
+          </AntdRegistry>
 
+        </body>
 
+      </html>
 
+    );
 
+  }

+ 15 - 5
src/components/TabBar/Tab.tsx
Vedi File 

@@ -1,10 +1,10 @@
 
 "use client";
 
 "use client";
 
 
 
 import { CloseOutlined } from "@ant-design/icons";
 
 import { CloseOutlined } from "@ant-design/icons";
 
-import type { MenuProps } from "antd";
 
-import { Dropdown } from "antd";
 
 import { useSortable } from "@dnd-kit/sortable";
 
 import { useSortable } from "@dnd-kit/sortable";
 
 import { CSS } from "@dnd-kit/utilities";
 
 import { CSS } from "@dnd-kit/utilities";
 
+import type { MenuProps } from "antd";
 
+import { Dropdown, theme } from "antd";
 
 import { useRouter } from "next/navigation";
 
 import { useRouter } from "next/navigation";
 
 import type React from "react";
 
 import type React from "react";
 
 import { useMemo } from "react";
 
 import { useMemo } from "react";
 
@@ -24,6 +24,16 @@ const Tab: React.FC<TabProps> = ({ tab, active }) => {
 
   );
 
   );
 
   const setActiveTab = useTabStore((state) => state.setActiveTab);
 
   const setActiveTab = useTabStore((state) => state.setActiveTab);
 
 
 
+  const {
 
+    token: {
 
+      colorPrimary,
 
+      colorBgContainer,
 
+      colorText,
 
+      colorTextLightSolid,
 
+      colorBorder,
 
+    },
 
+  } = theme.useToken();
 
+
 
   // Setup drag and drop (disable for home tab)
 
   // Setup drag and drop (disable for home tab)
 
   const {
 
   const {
 
     attributes,
 
     attributes,
 
@@ -129,10 +139,10 @@ const Tab: React.FC<TabProps> = ({ tab, active }) => {
 
             marginRight: "4px",
 
             marginRight: "4px",
 
             cursor: tab.closable ? "grab" : "pointer",
 
             cursor: tab.closable ? "grab" : "pointer",
 
             borderRadius: "4px",
 
             borderRadius: "4px",
 
-            backgroundColor: active ? "#1890ff" : "#fff",
 
-            color: active ? "#fff" : "#000",
 
+            backgroundColor: active ? colorPrimary : colorBgContainer,
 
+            color: active ? colorTextLightSolid : colorText,
 
             border: "1px solid",
 
             border: "1px solid",
 
-            borderColor: active ? "#1890ff" : "#d9d9d9",
 
+            borderColor: active ? colorPrimary : colorBorder,
 
             transition: "all 0.3s",
 
             transition: "all 0.3s",
 
             userSelect: "none",
 
             userSelect: "none",
 
             whiteSpace: "nowrap",
 
             whiteSpace: "nowrap",

+ 7 - 6
src/components/TabBar/index.tsx
Vedi File 

@@ -14,6 +14,7 @@ import {
 
   SortableContext,
 
   SortableContext,
 
   sortableKeyboardCoordinates,
 
   sortableKeyboardCoordinates,
 
 } from "@dnd-kit/sortable";
 
 } from "@dnd-kit/sortable";
 
+import { theme } from "antd";
 
 import { usePathname } from "next/navigation";
 
 import { usePathname } from "next/navigation";
 
 import type React from "react";
 
 import type React from "react";
 
 import { useEffect, useRef } from "react";
 
 import { useEffect, useRef } from "react";
 
@@ -31,6 +32,10 @@ const TabBar: React.FC = () => {
 
   const getBreadcrumb = useMenuStore((state) => state.getBreadcrumb);
 
   const getBreadcrumb = useMenuStore((state) => state.getBreadcrumb);
 
   const reorderTabs = useTabStore((state) => state.reorderTabs);
 
   const reorderTabs = useTabStore((state) => state.reorderTabs);
 
 
 
+  const {
 
+    token: { colorBorder },
 
+  } = theme.useToken();
 
+
 
   const containerRef = useRef<HTMLDivElement>(null);
 
   const containerRef = useRef<HTMLDivElement>(null);
 
 
 
   // Setup sensors for drag and drop
 
   // Setup sensors for drag and drop
 
@@ -122,18 +127,14 @@ const TabBar: React.FC = () => {
 
       >
 
       >
 
         <div
 
         <div
 
           ref={containerRef}
 
           ref={containerRef}
 
+          className="tab-bar flex items-center p-2 px-4"
 
           style={{
 
           style={{
 
-            display: "flex",
 
-            alignItems: "center",
 
-            padding: "8px 16px",
 
-            backgroundColor: "#f0f0f0",
 
-            borderBottom: "1px solid #d9d9d9",
 
+            borderBottom: `1px solid ${colorBorder}`,
 
             overflowX: "auto",
 
             overflowX: "auto",
 
             overflowY: "hidden",
 
             overflowY: "hidden",
 
             whiteSpace: "nowrap",
 
             whiteSpace: "nowrap",
 
             scrollBehavior: "smooth",
 
             scrollBehavior: "smooth",
 
           }}
 
           }}
 
-          className="tab-bar"
 
         >
 
         >
 
           {tabs.map((tab) => (
 
           {tabs.map((tab) => (
 
             <Tab key={tab.key} tab={tab} active={activeTab?.key === tab.key} />
 
             <Tab key={tab.key} tab={tab} active={activeTab?.key === tab.key} />