style: 修复 SCSS 文件中的硬编码颜色和间距值

jk-rag-platform/.claude/settings.local.json

@@ -80,7 +80,11 @@
       "WebFetch(domain:iconoir.com)",
       "WebFetch(domain:github.com)",
       "Bash(npm info:*)",
-      "Bash(ls -la /Users/misasagi/Git/xiaozhi-v2/jk-rag-platform/*.md)"
+      "Bash(ls -la /Users/misasagi/Git/xiaozhi-v2/jk-rag-platform/*.md)",
+      "WebFetch(domain:lucide.dev)",
+      "Bash(npm uninstall:*)",
+      "Bash(lsof -ti:3100)",
+      "Bash(xargs kill:*)"
     ]
   }
 }

jk-rag-platform/package.json

@@ -25,8 +25,8 @@
     "axios": "^1.13.5",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.0",
-    "iconoir-react": "^7.11.0",
     "jsencrypt": "^3.5.4",
+    "lucide-react": "^1.7.0",
     "mammoth": "^1.11.0",
     "markdown-it": "^14.1.0",
     "nanoid": "^5.1.6",

jk-rag-platform/src/components/common/AppCard/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dropdown, MenuProps, Button } from 'antd';
-import { CodeBracketsSquare, EditPencil, Trash, ShareIos, Star, BrightStar, Eye, Heart, Calendar, BadgeCheck, Building, Menu, ArrowRight } from 'iconoir-react';
+import { Code, Pen, Trash2, Share2, Star, Eye, Heart, Calendar, BadgeCheck, Building, Menu, ArrowRight } from 'lucide-react';
 import './index.scss';
 
 export interface AppCardProps {
@@ -143,7 +143,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
             items.push({
                 key: 'api',
                 label: 'API 调用',
-                icon: <CodeBracketsSquare width="16" height="16" />,
+                icon: <Code size={16} />,
                 onClick: () => onApi(),
             });
         }
@@ -152,7 +152,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
             items.push({
                 key: 'edit',
                 label: '编辑',
-                icon: <EditPencil width="16" height="16" />,
+                icon: <Pen size={16} />,
                 onClick: () => onEdit(),
             });
         }
@@ -161,7 +161,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
             items.push({
                 key: 'delete',
                 label: '删除',
-                icon: <Trash width="16" height="16" />,
+                icon: <Trash2 size={16} />,
                 danger: true,
                 onClick: () => onDelete(),
             });
@@ -211,7 +211,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                         }}
                         title='分享'
                     >
-                        <ShareIos width="18" height="18" />
+                        <Share2 size={18} />
                     </button>
                     <button
                         className='card-action-btn'
@@ -222,9 +222,9 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                         title={isCollect ? '取消收藏' : '收藏'}
                     >
                         {isCollect ? (
-                            <BrightStar width="18" height="18" style={{ color: '#F5E663' }} />
+                            <Star size={18} className="fill-yellow" style={{ color: '#F5E663' }} />
                         ) : (
-                            <Star width="18" height="18" />
+                            <Star size={18} />
                         )}
                     </button>
                 </div>
@@ -238,7 +238,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                     ) : icon ? (
                         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24 }}>
                             {/* 动态 icon 支持 - 如果传入的是 iconoir 组件名称则渲染，否则显示占位 */}
-                            <BrightStar width="24" height="24" />
+                            <Star size={24} />
                         </div>
                     ) : null}
                 </div>
@@ -279,13 +279,13 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                     <div className='card-meta-left'>
                         {showViewCount && viewCount !== undefined && (
                             <span className='card-meta-item'>
-                                <Eye width="14" height="14" />
+                                <Eye size={14} />
                                 <span>{viewCount}</span>
                             </span>
                         )}
                         {showFavoriteCount && favoriteCount !== undefined && (
                             <span className='card-meta-item'>
-                                <Heart width="14" height="14" />
+                                <Heart size={14} />
                                 <span>{favoriteCount}</span>
                             </span>
                         )}
@@ -293,7 +293,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                     {showCreateTime && createTime && (
                         <div className='card-meta-right'>
                             <span className='card-meta-item'>
-                                <Calendar width="14" height="14" />
+                                <Calendar size={14} />
                                 <span>{createTime}</span>
                             </span>
                         </div>
@@ -306,13 +306,13 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                 <div className='card-footer-info'>
                     {certification && (
                         <div className='card-certification'>
-                            <BadgeCheck width="14" height="14" />
+                            <BadgeCheck size={14} />
                             <span>{certification}</span>
                         </div>
                     )}
                     {showDepartment && department && (
                         <div className='card-department'>
-                            <Building width="14" height="14" />
+                            <Building size={14} />
                             <span>{department}</span>
                         </div>
                     )}
@@ -340,7 +340,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                         >
                             <Button
                                 className='card-operation-btn'
-                                icon={<Menu width="18" height="18" />}
+                                icon={<Menu size={18} />}
                                 size='large'
                             >
                                 更多操作
@@ -349,7 +349,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                     ) : (
                         <Button
                             className='card-operation-btn'
-                            icon={<CodeBracketsSquare width="18" height="18" />}
+                            icon={<Code size={18} />}
                             size='large'
                             onClick={(e) => {
                                 e.stopPropagation();
@@ -362,7 +362,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
 
                     <Button
                         className='card-use-btn'
-                        icon={<ArrowRight width="18" height="18" />}
+                        icon={<ArrowRight size={18} />}
                         size='large'
                         onClick={(e) => {
                             e.stopPropagation();

jk-rag-platform/src/components/common/GuideTips/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Card, Row, Col } from 'antd';
 import { BulbOutlined } from '@ant-design/icons';
-import { ArrowDown } from 'iconoir-react';
+import { ChevronDown } from 'lucide-react';
 import './index.scss';
 
 interface TipsStep {
@@ -78,7 +78,7 @@ const GuideTips: React.FC<GuideTipsProps> = (props) => {
                     <span>提示：{title}</span>
                 </div>
                 <div className='guide-tips-close'>
-                    <ArrowDown width="16" height="16" className='guide-tips-arrow' />
+                    <ChevronDown size={16} className='guide-tips-arrow' />
                 </div>
             </div>
             

jk-rag-platform/src/components/common/HeroBanner/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BrightStar } from 'iconoir-react';
+import { Star } from 'lucide-react';
 import './index.scss';
 
 const HeroBanner: React.FC = () => {
@@ -14,7 +14,7 @@ const HeroBanner: React.FC = () => {
                 <div className='hero-banner-content'>
                     <div className='hero-banner-text'>
                         <div className='hero-banner-badge'>
-                            <BrightStar width="16" height="16" />
+                            <Star size={16} />
                             <span>Featured Application</span>
                         </div>
                         <h2 className='hero-banner-title'>广告占位</h2>

jk-rag-platform/src/components/common/StatsGrid/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GraphUp, Cpu, ShieldCheck, Database } from 'iconoir-react';
+import { TrendingUp, Cpu, ShieldCheck, Database } from 'lucide-react';
 import './index.scss';
 
 interface StatCardProps {
@@ -11,9 +11,9 @@ interface StatCardProps {
     trendColor?: string;
 }
 
-// icon 名称到 iconoir 组件的映射
+// icon 名称到 lucide 组件的映射
 const iconMap: Record<string, React.ComponentType<any>> = {
-    'solar:chart-bold-duotone': GraphUp,
+    'solar:chart-bold-duotone': TrendingUp,
     'solar:cpu-bold-duotone': Cpu,
     'solar:shield-check-bold-duotone': ShieldCheck,
     'solar:database-bold-duotone': Database,
@@ -21,13 +21,13 @@ const iconMap: Record<string, React.ComponentType<any>> = {
 
 const StatCard: React.FC<StatCardProps> = (props) => {
     const { icon, iconBgColor, title, value, trend, trendColor = 'gray' } = props;
-    const IconComponent = iconMap[icon] || GraphUp;
+    const IconComponent = iconMap[icon] || TrendingUp;
 
     return (
         <div className='stat-card'>
             <div className='stat-card-header'>
                 <div className={`stat-card-icon bg-${iconBgColor}`}>
-                    <IconComponent width="20" height="20" className={`icon-${iconBgColor}`} />
+                    <IconComponent size={20} className={`icon-${iconBgColor}`} />
                 </div>
                 {trend && (
                     <span className={`stat-card-trend text-${trendColor}`}>{trend}</span>

jk-rag-platform/src/pages/appCenter/appPlazaList/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Pagination } from 'antd';
 import { AppCard, FilterDrawer, HeroBanner, StatsGrid } from '@/components/common';
 import { useAppStore, type FilterState } from './store';
-import { Filter } from 'iconoir-react';
+import { Filter } from 'lucide-react';
 import './style.scss';
 // 导入全局 Mock 数据
 import { getAppsByPageType, getPageConfig, processAppData, mockCurrentUser } from '@/mock';
@@ -138,7 +138,7 @@ const AppPlazaList: React.FC = () => {
                         </button>
                     </div>
                     <button className='filter-btn' onClick={() => setFilterOpen(true)}>
-                        <Filter width="18" height="18" />
+                        <Filter size={18} />
                     </button>
                 </div>
             </div>

jk-rag-platform/src/pages/appCenter/categoryApps/index.tsx

@@ -3,7 +3,7 @@ import { Pagination, message } from 'antd';
 import { useLocation } from 'react-router-dom';
 import { AppCard, FilterDrawer } from '@/components/common';
 import { useCategoryAppStore, type FilterState } from './store';
-import { Filter } from 'iconoir-react';
+import { Filter } from 'lucide-react';
 import './style.scss';
 // 导入全局 Mock 数据
 import { getAppsByPageType, getPageConfig, processAppData, mockCurrentUser } from '@/mock';
@@ -162,7 +162,7 @@ const CategoryAppsList: React.FC = () => {
                         </button>
                     </div>
                     <button className='filter-btn' onClick={() => setFilterOpen(true)}>
-                        <Filter width="18" height="18" />
+                        <Filter size={18} />
                     </button>
                 </div>
             </div>

jk-rag-platform/src/pages/knowledgeLib/list/KnowledgeDrawer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Drawer, Form, Input, Select, Button, Space, Divider, message, Radio } from 'antd';
-import { Database, Scissors, Text, AlignLeft } from 'iconoir-react';
+import { Database, Scissors, Text, AlignLeft } from 'lucide-react';
 import './KnowledgeDrawer.scss';
 
 interface KnowledgeDrawerProps {
@@ -61,7 +61,7 @@ const KnowledgeDrawer: React.FC<KnowledgeDrawerProps> = ({
                 {/* 基本信息 */}
                 <div className='icon-select-section'>
                     <div className='section-icon'>
-                        <Database width="24" height="24" />
+                        <Database size={24} />
                     </div>
                     <div className='section-info'>
                         <div className='section-title'>基本信息</div>
@@ -111,7 +111,7 @@ const KnowledgeDrawer: React.FC<KnowledgeDrawerProps> = ({
 
                 <div className='icon-select-section'>
                     <div className='section-icon'>
-                        <Scissors width="24" height="24" />
+                        <Scissors size={24} />
                     </div>
                     <div className='section-info'>
                         <div className='section-title'>切片设置</div>
@@ -132,11 +132,11 @@ const KnowledgeDrawer: React.FC<KnowledgeDrawerProps> = ({
                             onChange={(e) => setSplittingType(e.target.value)}
                         >
                             <Radio.Button value='1'>
-                                <Text width="16" height="16" style={{ marginRight: 4 }} />
+                                <Text size={16} style={{ marginRight: 4 }} />
                                 按段落
                             </Radio.Button>
                             <Radio.Button value='2'>
-                                <AlignLeft width="16" height="16" style={{ marginRight: 4 }} />
+                                <AlignLeft size={16} style={{ marginRight: 4 }} />
                                 按章节
                             </Radio.Button>
                         </Radio.Group>

jk-rag-platform/src/pages/knowledgeLib/list/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button, Table, TableColumnsType, TablePaginationConfig, Input, Space, Tabs, message, Tooltip, Dropdown, MenuProps } from 'antd';
 import { PlusOutlined, SearchOutlined, EditFilled, FileWordFilled, FileMarkdownFilled, DeleteFilled, DownOutlined } from '@ant-design/icons';
-import { EditPencil, Download, Trash } from 'iconoir-react';
+import { Pen, Download, Trash2 } from 'lucide-react';
 import { GuideTips, FilterBar } from '@/components/common';
 import InfoModal from './components/InfoModal';
 import { useKnowledgeLibListStore } from './store';
@@ -256,7 +256,7 @@ const KnowledgeLibList: React.FC = () => {
                                 onClick={() => onClickModify(record)}
                                 className="action-btn"
                             >
-                                <EditPencil width="18" height="18" />
+                                <Pen size={18} />
                             </Button>
                         </Tooltip>
 
@@ -272,7 +272,7 @@ const KnowledgeLibList: React.FC = () => {
                                     size="large"
                                     className="action-btn"
                                 >
-                                    <Download width="18" height="18" />
+                                    <Download size={18} />
                                 </Button>
                             </Tooltip>
                         </Dropdown>
@@ -286,7 +286,7 @@ const KnowledgeLibList: React.FC = () => {
                                 onClick={() => onClickDelete(record)}
                                 className="action-btn"
                             >
-                                <Trash width="18" height="18" />
+                                <Trash2 size={18} />
                             </Button>
                         </Tooltip>
                     </Space>

jk-rag-platform/src/pages/layout/components/Header.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Modal, Button, Tooltip } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { MenuFoldOutlined, MenuUnfoldOutlined, MessageOutlined } from '@ant-design/icons';
-import { Bell, ArrowDown, UserSquare, Settings, LogOut } from 'iconoir-react';
+import { Bell, ChevronDown, User, Settings, LogOut } from 'lucide-react';
 import LocalStorage from '@/LocalStorage';
 import { useLayoutStore } from '../store';
 import './header.scss';
@@ -142,7 +142,7 @@ const Header: React.FC<Props> = (props) => {
 
                     {/* 通知按钮 */}
                     <button className='notification-btn'>
-                        <Bell width="20" height="20" />
+                        <Bell size={20} />
                         <span className='notification-dot'></span>
                     </button>
 
@@ -162,7 +162,7 @@ const Header: React.FC<Props> = (props) => {
                                 <p className='user-name'>{userName}</p>
                                 <p className='user-dept'>部门信息</p>
                             </div>
-                            <ArrowDown width="16" height="16" className='user-dropdown-icon' />
+                            <ChevronDown size={16} className='user-dropdown-icon' />
                         </button>
 
                         {/* 下拉菜单 */}
@@ -174,19 +174,19 @@ const Header: React.FC<Props> = (props) => {
                                 </div>
 
                                 <button className='user-dropdown-item'>
-                                    <UserSquare width="16" height="16" />
+                                    <User size={16} />
                                     <span>个人中心</span>
                                 </button>
 
                                 <button className='user-dropdown-item'>
-                                    <Settings width="16" height="16" />
+                                    <Settings size={16} />
                                     <span>账户设置</span>
                                 </button>
 
                                 <div className='user-dropdown-item divider'></div>
 
                                 <button className='user-dropdown-item danger' onClick={handleLogout}>
-                                    <LogOut width="16" height="16" />
+                                    <LogOut size={16} />
                                     <span>退出登录</span>
                                 </button>
                             </div>

jk-rag-platform/src/pages/layout/components/Sidebar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useLayoutStore } from '../store';
 import './sidebar.scss';
-import { BrightStar, Database, Key, ClipboardCheck, Book, BookStack, FolderPlus, PlusCircle } from 'iconoir-react';
+import { Star, Database, Key, ClipboardCheck, Book, Notebook, FolderPlus, PlusCircle } from 'lucide-react';
 
 interface NavItem {
     key: string;
@@ -11,12 +11,12 @@ interface NavItem {
     path: string;
 }
 
-// icon 名称到 iconoir 组件的映射
+// icon 名称到 lucide 组件的映射
 const iconMap: Record<string, React.ComponentType<any>> = {
-    'widget': BrightStar, // 临时用 BrightStar 替代
+    'widget': Star, // 临时用 Star 替代
     'book': Book,
-    'star': BrightStar,
-    'notebook': BookStack,
+    'star': Star,
+    'notebook': Notebook,
     'gallery': FolderPlus,
     'plus-circle': PlusCircle,
     'database': Database,
@@ -80,14 +80,14 @@ const Sidebar: React.FC = () => {
                     <h3 className='section-title'>应用矩阵</h3>
                     <nav className='nav-menu'>
                         {appMenuItems.map((item) => {
-                            const IconComponent = iconMap[item.icon] || BrightStar;
+                            const IconComponent = iconMap[item.icon] || Star;
                             return (
                                 <button
                                     key={item.key}
                                     className={`nav-item ${isActive(item.path, location.pathname, location.search, false) ? 'active' : ''}`}
                                     onClick={() => handleNavClick(item.path)}
                                 >
-                                    <IconComponent width="18" height="18" />
+                                    <IconComponent size={18} />
                                     <span>{item.label}</span>
                                 </button>
                             );
@@ -100,14 +100,14 @@ const Sidebar: React.FC = () => {
                     <h3 className='section-title'>管理控制台</h3>
                     <nav className='nav-menu'>
                         {adminMenuItems.map((item) => {
-                            const IconComponent = iconMap[item.icon] || BrightStar;
+                            const IconComponent = iconMap[item.icon] || Star;
                             return (
                                 <button
                                     key={item.key}
                                     className={`nav-item ${isActive(item.path, location.pathname, location.search, true) ? 'active' : ''}`}
                                     onClick={() => handleNavClick(item.path)}
                                 >
-                                    <IconComponent width="18" height="18" />
+                                    <IconComponent size={18} />
                                     <span>{item.label}</span>
                                 </button>
                             );

jk-rag-platform/src/pages/layout/components/sidebar.scss

@@ -76,7 +76,7 @@
 .nav-menu {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: $spacing-1;
 }
 
 .nav-item {
@@ -161,7 +161,7 @@
     }
 
     .promo-btn {
-        font-size: 10px;
+        font-size: $font-xs;
         font-weight: $font-weight-bold;
         padding: $spacing-1 $spacing-3;
         border-radius: $radius-full;
@@ -180,7 +180,7 @@
         position: absolute;
         right: -$spacing-4;
         bottom: -$spacing-4;
-        font-size: 72px;
+        font-size: $icon-3xl;
         opacity: 0.1;
         color: $bg-secondary;
     }

jk-rag-platform/src/pages/layout/style.scss

@@ -155,8 +155,8 @@
     .ant-card-cover {
         display: flex;
         justify-content: center;
-        padding: 60px 0;
-        background: #f0f5ff;
+        padding: $spacing-12 0;
+        background: $bg-tertiary;
         flex: 0 0 auto;
     }
 

jk-rag-platform/src/pages/questionAnswer/form/Step1Drawer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Drawer, Form, Input, Select, Cascader, Tag, InputNumber, ColorPicker, Button, Space, Switch, Divider, message, Radio } from 'antd';
 import { PlusCircleOutlined, MinusCircleOutlined, CloseCircleOutlined, LinkOutlined } from '@ant-design/icons';
 import * as AllIcons from '@ant-design/icons';
-import { Globe, Lock } from 'iconoir-react';
+import { Globe, Lock } from 'lucide-react';
 import IconPicker from './IconPicker';
 import VipSelector from './VipSelector';
 import './DrawerForm.scss';
@@ -215,11 +215,11 @@ const Step1Drawer: React.FC<Step1DrawerProps> = (props) => {
                                                 onChange={(e) => onVisibleChange(e.target.value)}
                                             >
                                                 <Radio.Button value='0'>
-                                                    <Globe width="16" height="16" style={{ marginRight: 4 }} />
+                                                    <Globe size={16} style={{ marginRight: 4 }} />
                                                     公开
                                                 </Radio.Button>
                                                 <Radio.Button value='1'>
-                                                    <Lock width="16" height="16" style={{ marginRight: 4 }} />
+                                                    <Lock size={16} style={{ marginRight: 4 }} />
                                                     私有
                                                 </Radio.Button>
                                             </Radio.Group>

jk-rag-platform/src/pages/questionAnswer/form/VipSelector.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Modal, Table, Input, Select, Space, message, Tree, Divider, Button } from 'antd';
 import type { TableColumnsType } from 'antd';
 import type { DataNode } from 'antd/es/tree';
-import { Tree as TreeIcon, Group, Search } from 'iconoir-react';
+import { TreePine, Users, Search } from 'lucide-react';
 import './VipSelector.scss';
 
 interface VipUser {
@@ -196,7 +196,7 @@ const VipSelector: React.FC<VipSelectorProps> = ({ open, onClose, onConfirm, exi
                 {/* 左侧：部门树 */}
                 <div className='vip-selector-left'>
                     <div className='section-title'>
-                        <TreeIcon width="18" height="18" />
+                        <TreePine size={18} />
                         选择部门
                     </div>
                     <Tree
@@ -215,7 +215,7 @@ const VipSelector: React.FC<VipSelectorProps> = ({ open, onClose, onConfirm, exi
                 {/* 右侧：用户列表 */}
                 <div className='vip-selector-right'>
                     <div className='section-title'>
-                        <Group width="18" height="18" />
+                        <Users size={18} />
                         用户列表
                         {selectedDeptId && (
                             <span className='dept-filter-tag'>
@@ -232,7 +232,7 @@ const VipSelector: React.FC<VipSelectorProps> = ({ open, onClose, onConfirm, exi
                             onChange={(e) => setSearchUserName(e.target.value)}
                             style={{ width: 140 }}
                             allowClear
-                            prefix={<Search width="14" height="14" />}
+                            prefix={<Search size={14} />}
                         />
                         <Input
                             placeholder="搜索昵称"

jk-rag-platform/src/pages/system/audit/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import { Table, Button, Input, Space, Modal, Form, Drawer, message, Pagination, Tag } from 'antd';
-import { SearchOutlined, EyeOutlined, CheckCircleOutlined, CloseCircleOutlined } from 'iconoir-react';
+import { SearchOutlined, EyeOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import { useAuditStore } from './store';
 import './style.scss';
 

jk-rag-platform/src/pages/system/audit/style.scss

@@ -115,7 +115,7 @@
 
                 &.approve {
                     background: $success-color;
-                    color: #fff;
+                    color: #ffffff;
                     border: none;
 
                     &:hover {
@@ -125,7 +125,7 @@
 
                 &.reject {
                     background: $error-color;
-                    color: #fff;
+                    color: #ffffff;
                     border: none;
 
                     &:hover {

jk-rag-platform/src/styles/global.scss

@@ -408,20 +408,20 @@ ul li {
             gap: $spacing-2;
             padding: $spacing-2 $spacing-4;
             background: $primary-color;
-            color: #fff;
+            color: #ffffff;
             border: none;
             border-radius: $radius-lg;
             font-size: $font-md;
             font-weight: $font-weight-medium;
             cursor: pointer;
             transition: $transition-base;
-            
+
             &:hover {
                 background: $primary-light;
                 transform: translateY(-$spacing-1);
                 box-shadow: $shadow-md;
             }
-            
+
             .iconify {
                 font-size: $icon-xl;
             }
@@ -489,20 +489,20 @@ ul li {
         gap: $spacing-2;
         padding: $spacing-2 $spacing-4;
         background: $primary-color;
-        color: #fff;
+        color: #ffffff;
         border: none;
         border-radius: $radius-lg;
         font-size: $font-md;
         font-weight: $font-weight-medium;
         cursor: pointer;
         transition: $transition-base;
-        
+
         &:hover {
             background: $primary-light;
             transform: translateY(-$spacing-1);
             box-shadow: $shadow-md;
         }
-        
+
         .iconify {
             font-size: $icon-xl;
         }
@@ -564,9 +564,9 @@ ul li {
             &.ant-pagination-item-active {
                 background: $primary-color;
                 border-color: $primary-color;
-                
+
                 a {
-                    color: #fff;
+                    color: #ffffff;
                 }
             }
         }