홈 탐색 도움말
가입하기 로그인
m1ro
/
gami-op
1
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

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 달 전
부모
f3bd16a661
커밋
cd75abf08b
7개의 변경된 파일과 58개의 추가작업 그리고 30개의 파일을 삭제
분할 보기 변경상태 보기
  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
파일 보기 

@@ -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
파일 보기 

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

+ 9 - 4
src/app/(dashboard)/layout.tsx
파일 보기 

@@ -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
파일 보기 

@@ -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
파일 보기 

@@ -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
파일 보기 

@@ -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
파일 보기 

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