🎨 refactor(ui): use lucide-react for search/refresh and chevron icons
- DashboardHeader.jsx: replace Semi's IconSearch/IconRefresh with lucide-react's Search/RefreshCw (size 16), preserve existing button styles - UptimePanel.jsx: replace Semi's IconRefresh with lucide-react's RefreshCw (size 14), keep styling intact - UserArea.jsx: replace Semi's IconChevronDown with lucide-react's ChevronDown (size 14), preserve visual parity - Update imports: remove @douyinfe/semi-icons usage where replaced; add lucide-react imports - Verified no remaining IconSearch/IconRefresh in dashboard; no new linter errors Motivation: unify icon library for core actions and improve UI consistency. Follow-ups: consider migrating remaining Semi icons (e.g., plus/minus, charts) to lucide-react.
This commit is contained in:
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
|
||||
|
||||
import React from 'react';
|
||||
import { Button } from '@douyinfe/semi-ui';
|
||||
import { IconRefresh, IconSearch } from '@douyinfe/semi-icons';
|
||||
import { RefreshCw, Search } from 'lucide-react';
|
||||
|
||||
const DashboardHeader = ({
|
||||
getGreeting,
|
||||
@@ -42,13 +42,13 @@ const DashboardHeader = ({
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
type='tertiary'
|
||||
icon={<IconSearch />}
|
||||
icon={<Search size={16} />}
|
||||
onClick={showSearchModal}
|
||||
className={`bg-green-500 hover:bg-green-600 ${ICON_BUTTON_CLASS}`}
|
||||
/>
|
||||
<Button
|
||||
type='tertiary'
|
||||
icon={<IconRefresh />}
|
||||
icon={<RefreshCw size={16} />}
|
||||
onClick={refresh}
|
||||
loading={loading}
|
||||
className={`bg-blue-500 hover:bg-blue-600 ${ICON_BUTTON_CLASS}`}
|
||||
|
||||
@@ -19,8 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
|
||||
|
||||
import React from 'react';
|
||||
import { Card, Button, Spin, Tabs, TabPane, Tag, Empty } from '@douyinfe/semi-ui';
|
||||
import { Gauge } from 'lucide-react';
|
||||
import { IconRefresh } from '@douyinfe/semi-icons';
|
||||
import { Gauge, RefreshCw } from 'lucide-react';
|
||||
import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';
|
||||
import ScrollableContainer from '../common/ui/ScrollableContainer';
|
||||
|
||||
@@ -47,7 +46,7 @@ const UptimePanel = ({
|
||||
{t('服务可用性')}
|
||||
</div>
|
||||
<Button
|
||||
icon={<IconRefresh />}
|
||||
icon={<RefreshCw size={14} />}
|
||||
onClick={loadUptimeData}
|
||||
loading={uptimeLoading}
|
||||
size="small"
|
||||
|
||||
Reference in New Issue
Block a user