Halaman utama Jelajahi Bantuan
Daftar Masuk
m1ro
/
gami-op
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

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 bulan lalu
induk
f3bd16a661
melakukan
cd75abf08b
7 mengubah file dengan 58 tambahan dan 30 penghapusan
Tampilan Split Tampilkan Statistik Diff
  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
Tampilan Berkas 

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

+ 3 - 0
biome.json
Tampilan Berkas 

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

+ 9 - 4
src/app/(dashboard)/layout.tsx
Tampilan Berkas 

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

+ 4 - 4
src/app/globals.css
Tampilan Berkas 

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

+ 19 - 10
src/app/layout.tsx
Tampilan Berkas 

@@ -5,6 +5,7 @@ import type { Metadata } from "next";
 
 import { Geist, Geist_Mono } from "next/font/google";
 
 import "./globals.css";
 
 import { ConfigProvider } from "antd";
 
+import zhCN from "antd/locale/zh_CN";
 
 import { AuthProvider } from "@/contexts/AuthContext";
 
 
 const geistSans = Geist({
 
@@ -31,13 +32,21 @@ export default function RootLayout({
 
     <html lang="zh-CN">
 
       <body
 
         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
Tampilan Berkas 

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

+ 7 - 6
src/components/TabBar/index.tsx
Tampilan Berkas 

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