vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(icons): 迁移 components 目录图标到 lucide-react

Browse Source 
- @chakra-ui/icons → lucide-react
- react-icons → lucide-react
- 涉及 49 个组件文件

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-25 12:23:19 +08:00
parent 33e9a10524
commit 6f5c6c933e
49 changed files with 250 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/Subscription/SubscriptionContent.js
View File

@@ -42,19 +42,19 @@ import { useSubscriptionEvents } from '../../hooks/useSubscriptionEvents';
// Icons
import {
FaWeixin,
FaGem,
FaCheck,
FaQrcode,
FaClock,
FaRedo,
FaCrown,
FaStar,
FaTimes,
FaInfinity,
FaChevronDown,
FaChevronUp,
} from 'react-icons/fa';
Crown,
Star,
Check,
QrCode,
Clock,
RefreshCw,
X,
Infinity,
ChevronDown,
ChevronUp,
Gem,
} from 'lucide-react';
import { WechatOutlined } from '@ant-design/icons';
import { getApiBase } from '../../utils/apiConfig';
// 会员协议 URL 配置
@@ -761,7 +761,7 @@ export default function SubscriptionContent() {
)}
{user.subscription_status === 'active' && user.subscription_type !== 'free' && (
<Icon
as={user.subscription_type === 'max' ? FaCrown : FaGem}
as={user.subscription_type === 'max' ? Crown : Gem}
color={user.subscription_type === 'max' ? 'purple.400' : 'blue.400'}
boxSize={6}
/>
@@ -909,7 +909,7 @@ export default function SubscriptionContent() {
<Flex justify="space-between" align="center">
<HStack spacing={3}>
<Icon
as={FaStar}
as={Star}
boxSize={8}
color="gray.400"
/>
@@ -945,7 +945,7 @@ export default function SubscriptionContent() {
return (
<HStack key={index} spacing={3} align="start">
<Icon
as={hasFreeAccess ? FaCheck : FaTimes}
as={hasFreeAccess ? Check : X}
color={hasFreeAccess ? 'blue.500' : 'gray.300'}
boxSize={4}
mt={0.5}
@@ -1031,7 +1031,7 @@ export default function SubscriptionContent() {
<Flex justify="space-between" align="center">
<HStack spacing={3}>
<Icon
as={plan.name === 'pro' ? FaGem : FaCrown}
as={plan.name === 'pro' ? Gem : Crown}
boxSize={8}
color={plan.name === 'pro' ? 'blue.400' : 'purple.400'}
/>
@@ -1139,7 +1139,7 @@ export default function SubscriptionContent() {
return (
<HStack key={index} spacing={3} align="start">
<Icon
as={isSupported ? FaCheck : FaTimes}
as={isSupported ? Check : X}
color={isSupported ? 'blue.500' : 'gray.300'}
boxSize={4}
mt={0.5}
@@ -1226,7 +1226,7 @@ export default function SubscriptionContent() {
如何取消订阅？
</Text>
<Icon
as={openFaqIndex === 0 ? FaChevronUp : FaChevronDown}
as={openFaqIndex === 0 ? ChevronUp : ChevronDown}
color={textColor}
/>
</Flex>
@@ -1260,7 +1260,7 @@ export default function SubscriptionContent() {
支持哪些支付方式？
</Text>
<Icon
as={openFaqIndex === 1 ? FaChevronUp : FaChevronDown}
as={openFaqIndex === 1 ? ChevronUp : ChevronDown}
color={textColor}
/>
</Flex>
@@ -1294,7 +1294,7 @@ export default function SubscriptionContent() {
升级或切换套餐时，原套餐的费用怎么办？
</Text>
<Icon
as={openFaqIndex === 2 ? FaChevronUp : FaChevronDown}
as={openFaqIndex === 2 ? ChevronUp : ChevronDown}
color={textColor}
/>
</Flex>
@@ -1342,7 +1342,7 @@ export default function SubscriptionContent() {
可以在月付和年付之间切换吗？
</Text>
<Icon
as={openFaqIndex === 3 ? FaChevronUp : FaChevronDown}
as={openFaqIndex === 3 ? ChevronUp : ChevronDown}
color={textColor}
/>
</Flex>
@@ -1376,7 +1376,7 @@ export default function SubscriptionContent() {
是否支持退款？
</Text>
<Icon
as={openFaqIndex === 4 ? FaChevronUp : FaChevronDown}
as={openFaqIndex === 4 ? ChevronUp : ChevronDown}
color={textColor}
/>
</Flex>
@@ -1430,7 +1430,7 @@ export default function SubscriptionContent() {
Pro版和Max版有什么区别？
</Text>
<Icon
as={openFaqIndex === 5 ? FaChevronUp : FaChevronDown}
as={openFaqIndex === 5 ? ChevronUp : ChevronDown}
color={textColor}
/>
</Flex>
@@ -1467,7 +1467,7 @@ export default function SubscriptionContent() {
<ModalContent>
<ModalHeader>
<HStack>
<Icon as={FaWeixin} color="green.500" />
<WechatOutlined style={{ fontSize: '24px', color: '#52c41a' }} />
<Text>微信支付</Text>
</HStack>
</ModalHeader>
@@ -1509,7 +1509,7 @@ export default function SubscriptionContent() {
{priceInfo && priceInfo.is_upgrade && (
<Box bg="blue.50" p={3} borderRadius="md" mb={2}>
<HStack spacing={2} mb={2}>
<Icon as={FaCheck} color="blue.500" boxSize={4} />
<Icon as={Check} color="blue.500" boxSize={4} />
<Text fontSize="sm" fontWeight="bold" color="blue.700">
{priceInfo.upgrade_type === 'plan_upgrade' ? '套餐升级' :
priceInfo.upgrade_type === 'cycle_change' ? '周期变更' : '套餐和周期调整'}
@@ -1601,12 +1601,12 @@ export default function SubscriptionContent() {
)}
{promoCodeApplied && priceInfo && (
<HStack mt={2} p={2} bg="green.50" borderRadius="md">
<Icon as={FaCheck} color="green.500" />
<Icon as={Check} color="green.500" />
<Text color="green.700" fontSize="sm" fontWeight="medium" flex={1}>
优惠码已应用！节省 ¥{priceInfo.discount_amount.toFixed(2)}
</Text>
<Icon
as={FaTimes}
as={X}
color="gray.500"
cursor="pointer"
onClick={handleRemovePromoCode}
@@ -1642,7 +1642,7 @@ export default function SubscriptionContent() {
<Button
colorScheme="green"
size="lg"
leftIcon={<Icon as={FaWeixin} />}
leftIcon={<WechatOutlined style={{ fontSize: '20px' }} />}
onClick={() => {
if (!agreementChecked) {
toast({
@@ -1673,7 +1673,7 @@ export default function SubscriptionContent() {
{/* 倒计时 */}
<Box p={3} bg="orange.50" borderRadius="lg">
<HStack justify="center" spacing={2} mb={2}>
<Icon as={FaClock} color="orange.500" />
<Icon as={Clock} color="orange.500" />
<Text color="orange.700" fontSize="sm">
二维码有效时间: {formatTime(paymentCountdown)}
</Text>
@@ -1710,7 +1710,7 @@ export default function SubscriptionContent() {
borderColor={borderColor}
borderRadius="lg"
>
<Icon as={FaQrcode} color="gray.400" boxSize={12} />
<Icon as={QrCode} color="gray.400" boxSize={12} />
</Flex>
)}
</Box>
@@ -1734,7 +1734,7 @@ export default function SubscriptionContent() {
<Button
flex={1}
variant="outline"
leftIcon={<Icon as={FaRedo} />}
leftIcon={<Icon as={RefreshCw} />}
onClick={handleCheckPaymentStatus}
isLoading={checkingPayment}
loadingText="检查中..."

69
src/components/Subscription/SubscriptionContentNew.tsx
View File

@@ -27,20 +27,19 @@ import {
Link as ChakraLink,
} from '@chakra-ui/react';
import {
FaWeixin,
FaGem,
FaCheck,
FaQrcode,
FaClock,
FaRedo,
FaCrown,
FaStar,
FaTimes,
FaChevronDown,
FaChevronUp,
FaExternalLinkAlt,
} from 'react-icons/fa';
import { AlipayCircleOutlined } from '@ant-design/icons';
Crown,
Star,
Check,
QrCode,
Clock,
RefreshCw,
X,
ChevronDown,
ChevronUp,
ExternalLink,
Gem,
} from 'lucide-react';
import { AlipayCircleOutlined, WechatOutlined } from '@ant-design/icons';
import { logger } from '../../utils/logger';
import { useAuth } from '../../contexts/AuthContext';
@@ -825,11 +824,11 @@ export default function SubscriptionContentNew() {
const getIconComponent = (iconName: string) => {
const icons: any = {
star: FaStar,
gem: FaGem,
crown: FaCrown,
star: Star,
gem: Gem,
crown: Crown,
};
return icons[iconName] || FaStar;
return icons[iconName] || Star;
};
// 获取按钮文字
@@ -967,7 +966,7 @@ export default function SubscriptionContentNew() {
<HStack justify="space-between" align="center">
<HStack spacing={3}>
<Icon
as={user.subscription_type === 'max' ? FaCrown : FaGem}
as={user.subscription_type === 'max' ? Crown : Gem}
color="#D4AF37"
boxSize={6}
/>
@@ -1003,7 +1002,7 @@ export default function SubscriptionContentNew() {
<Flex justify="space-between" align="center">
<HStack spacing={2}>
<Icon as={FaClock} color="rgba(212, 175, 55, 0.8)" boxSize={4} />
<Icon as={Clock} color="rgba(212, 175, 55, 0.8)" boxSize={4} />
<Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
到期时间
</Text>
@@ -1065,7 +1064,7 @@ export default function SubscriptionContentNew() {
if (currentOption && currentOption.discountPercent > 0) {
return (
<HStack spacing={2}>
<Icon as={FaStar} color="#D4AF37" boxSize={4} />
<Icon as={Star} color="#D4AF37" boxSize={4} />
<Text fontSize="sm" color="#D4AF37" fontWeight="medium">
当前选择可节省 {currentOption.discountPercent}% 的费用
</Text>
@@ -1285,7 +1284,7 @@ export default function SubscriptionContentNew() {
}
>
<Icon
as={feature.enabled ? FaCheck : FaTimes}
as={feature.enabled ? Check : X}
color={feature.enabled ? '#000' : 'rgba(255, 255, 255, 0.3)'}
boxSize={3}
/>
@@ -1360,7 +1359,7 @@ export default function SubscriptionContentNew() {
{faq.question}
</Text>
<Icon
as={openFaqIndex === index ? FaChevronUp : FaChevronDown}
as={openFaqIndex === index ? ChevronUp : ChevronDown}
color="#D4AF37"
boxSize={5}
/>
@@ -1423,7 +1422,7 @@ export default function SubscriptionContentNew() {
transition="all 0.2s"
>
<HStack spacing={3}>
<Icon as={FaWeixin} color="#07C160" boxSize={6} />
<WechatOutlined style={{ fontSize: '24px', color: '#07C160' }} />
<Text color="white" fontWeight="medium">微信支付</Text>
</HStack>
</Button>
@@ -1460,7 +1459,7 @@ export default function SubscriptionContentNew() {
border="1px solid rgba(76, 175, 80, 0.3)"
>
<HStack spacing={2}>
<Icon as={FaCheck} color="green.400" />
<Icon as={Check} color="green.400" />
<Text color="green.400" fontSize="sm" fontWeight="medium">
{priceInfo.final_amount === 0
? `恭喜！您的当前订阅剩余价值足够直接升级到${selectedPlan.displayName}，无需支付额外费用！`
@@ -1477,7 +1476,7 @@ export default function SubscriptionContentNew() {
border="1px solid rgba(255, 165, 0, 0.3)"
>
<HStack spacing={2}>
<Icon as={FaClock} color="orange.400" />
<Icon as={Clock} color="orange.400" />
<Text color="orange.400" fontSize="sm" fontWeight="medium">
当前{priceInfo.current_plan?.toUpperCase()}订阅到期后自动切换到{selectedPlan.displayName}
</Text>
@@ -1492,7 +1491,7 @@ export default function SubscriptionContentNew() {
border="1px solid rgba(33, 150, 243, 0.3)"
>
<HStack spacing={2}>
<Icon as={FaRedo} color="blue.400" />
<Icon as={RefreshCw} color="blue.400" />
<Text color="blue.400" fontSize="sm" fontWeight="medium">
续费{selectedPlan.displayName}，在当前到期日基础上延长时长
</Text>
@@ -1536,7 +1535,7 @@ export default function SubscriptionContentNew() {
{promoCodeApplied && priceInfo.discount_amount > 0 && (
<Flex justify="space-between" align="center">
<HStack spacing={2}>
<Icon as={FaCheck} color="green.400" boxSize={3} />
<Icon as={Check} color="green.400" boxSize={3} />
<Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
优惠码折扣
</Text>
@@ -1606,12 +1605,12 @@ export default function SubscriptionContentNew() {
borderRadius="md"
border="1px solid rgba(72, 187, 120, 0.3)"
>
<Icon as={FaCheck} color="green.400" />
<Icon as={Check} color="green.400" />
<Text color="green.400" fontSize="sm" fontWeight="medium" flex={1}>
优惠码已应用！节省 ¥{priceInfo.discount_amount.toFixed(2)}
</Text>
<Icon
as={FaTimes}
as={X}
color="rgba(255, 255, 255, 0.5)"
cursor="pointer"
onClick={handleRemovePromoCode}
@@ -1672,7 +1671,7 @@ export default function SubscriptionContentNew() {
isDisabled={!selectedPlan}
leftIcon={paymentMethod === 'alipay'
? <Box as={AlipayCircleOutlined} fontSize="20px" />
: <Icon as={FaWeixin} boxSize={5} />}
: <WechatOutlined style={{ fontSize: '20px' }} />}
_hover={{
bgGradient: paymentMethod === 'alipay'
? 'linear-gradient(135deg, #4096ff, #1677FF)'
@@ -1770,7 +1769,7 @@ export default function SubscriptionContentNew() {
w="full"
>
<HStack justify="center" spacing={2} mb={2}>
<Icon as={FaClock} color="orange.400" />
<Icon as={Clock} color="orange.400" />
<Text color="orange.300" fontSize="sm">
订单有效时间: {formatTime(paymentCountdown)}
</Text>
@@ -1810,7 +1809,7 @@ export default function SubscriptionContentNew() {
borderColor="rgba(255, 255, 255, 0.2)"
borderRadius="lg"
>
<Icon as={FaQrcode} color="rgba(255, 255, 255, 0.3)" boxSize={12} />
<Icon as={QrCode} color="rgba(255, 255, 255, 0.3)" boxSize={12} />
</Flex>
)}
</Box>
@@ -1845,7 +1844,7 @@ export default function SubscriptionContentNew() {
bgGradient="linear-gradient(135deg, #1677FF, #0958d9)"
color="white"
fontWeight="bold"
leftIcon={<Icon as={FaExternalLinkAlt} />}
leftIcon={<Icon as={ExternalLink} />}
onClick={handleReopenAlipay}
_hover={{
bgGradient: 'linear-gradient(135deg, #4096ff, #1677FF)',
@@ -1864,7 +1863,7 @@ export default function SubscriptionContentNew() {
bgGradient="linear-gradient(135deg, #D4AF37, #B8941F)"
color="#000"
fontWeight="bold"
leftIcon={<Icon as={FaRedo} />}
leftIcon={<Icon as={RefreshCw} />}
onClick={handleForceUpdate}
isLoading={forceUpdating}
_hover={{

4
src/components/Subscription/SubscriptionModal.js
View File

@@ -12,7 +12,7 @@ import {
Text,
useColorModeValue,
} from '@chakra-ui/react';
import { FiStar } from 'react-icons/fi';
import { Star } from 'lucide-react';
import PropTypes from 'prop-types';
import SubscriptionContent from './SubscriptionContent';
@@ -23,7 +23,7 @@ export default function SubscriptionModal({ isOpen, onClose }) {
<ModalContent maxH="90vh">
<ModalHeader borderBottomWidth="1px" borderColor={useColorModeValue('gray.200', 'gray.600')}>
<HStack>
<Icon as={FiStar} color="blue.500" boxSize={5} />
<Icon as={Star} color="blue.500" boxSize={5} />
<Text>订阅管理</Text>
</HStack>
</ModalHeader>