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

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-11 10:07:17 +08:00
parent d0c9d9b1fb
commit 29cf0d7013
5 changed files with 110 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/StockOverview/components/FlexScreen/index.tsx
View File

@@ -27,7 +27,6 @@ import {
Flex,
Spacer,
Icon,
useColorModeValue,
useToast,
Badge,
Tooltip,
@@ -124,13 +123,14 @@ const FlexScreen: React.FC = () => {
// 面板状态
const [isCollapsed, setIsCollapsed] = useState(false);
// 颜色主题
const cardBg = useColorModeValue('white', '#1a1a1a');
const borderColor = useColorModeValue('gray.200', '#333');
const textColor = useColorModeValue('gray.800', 'white');
const subTextColor = useColorModeValue('gray.600', 'gray.400');
const searchBg = useColorModeValue('gray.50', '#2a2a2a');
const hoverBg = useColorModeValue('gray.100', '#333');
// 深色主题颜色 - 与 StockOverview 保持一致
const cardBg = 'rgba(255, 255, 255, 0.03)';
const borderColor = 'rgba(255, 255, 255, 0.08)';
const textColor = 'rgba(255, 255, 255, 0.95)';
const subTextColor = 'rgba(255, 255, 255, 0.6)';
const searchBg = 'rgba(255, 255, 255, 0.05)';
const hoverBg = 'rgba(255, 255, 255, 0.08)';
const accentColor = '#8b5cf6';
// 获取订阅的证券代码列表（带后缀，用于区分上证指数000001.SH和平安银行000001.SZ）
const subscribedCodes = useMemo(() => {
@@ -287,12 +287,18 @@ const FlexScreen: React.FC = () => {
}, [connected]);
return (
<Card bg={cardBg} borderWidth="1px" borderColor={borderColor}>
<Card
bg={cardBg}
borderWidth="1px"
borderColor={borderColor}
backdropFilter="blur(20px)"
borderRadius="16px"
>
<CardBody>
{/* 头部 */}
<Flex align="center" mb={4}>
<HStack spacing={3}>
<Icon as={FaDesktop} boxSize={6} color="purple.500" />
<Icon as={FaDesktop} boxSize={6} color={accentColor} />
<Heading size="md" color={textColor}>
灵活屏
</Heading>
@@ -318,13 +324,27 @@ const FlexScreen: React.FC = () => {
icon={<SettingsIcon />}
size="sm"
variant="ghost"
color={subTextColor}
_hover={{ bg: hoverBg, color: textColor }}
aria-label="设置"
/>
<MenuList>
<MenuItem icon={<FaSync />} onClick={resetWatchlist}>
<MenuList bg="#1a1a2e" borderColor={borderColor}>
<MenuItem
icon={<FaSync />}
onClick={resetWatchlist}
bg="transparent"
color={textColor}
_hover={{ bg: hoverBg }}
>
重置为默认
</MenuItem>
<MenuItem icon={<FaTrash />} onClick={clearWatchlist} color="red.500">
<MenuItem
icon={<FaTrash />}
onClick={clearWatchlist}
bg="transparent"
color="red.400"
_hover={{ bg: 'rgba(239, 68, 68, 0.1)' }}
>
清空列表
</MenuItem>
</MenuList>
@@ -334,6 +354,8 @@ const FlexScreen: React.FC = () => {
icon={isCollapsed ? <ChevronDownIcon /> : <ChevronUpIcon />}
size="sm"
variant="ghost"
color={subTextColor}
_hover={{ bg: hoverBg, color: textColor }}
onClick={() => setIsCollapsed(!isCollapsed)}
aria-label={isCollapsed ? '展开' : '收起'}
/>
@@ -346,7 +368,7 @@ const FlexScreen: React.FC = () => {
<Box position="relative" mb={4}>
<InputGroup size="md">
<InputLeftElement pointerEvents="none">
<SearchIcon color="gray.400" />
<SearchIcon color={subTextColor} />
</InputLeftElement>
<Input
placeholder="搜索股票/指数代码或名称..."
@@ -354,9 +376,13 @@ const FlexScreen: React.FC = () => {
onChange={e => setSearchQuery(e.target.value)}
bg={searchBg}
borderRadius="lg"
borderColor={borderColor}
color={textColor}
_placeholder={{ color: subTextColor }}
_hover={{ borderColor: accentColor }}
_focus={{
borderColor: 'purple.400',
boxShadow: '0 0 0 1px var(--chakra-colors-purple-400)',
borderColor: accentColor,
boxShadow: `0 0 0 1px ${accentColor}`,
}}
/>
{searchQuery && (
@@ -365,6 +391,8 @@ const FlexScreen: React.FC = () => {
size="sm"
icon={<CloseIcon />}
variant="ghost"
color={subTextColor}
_hover={{ bg: hoverBg, color: textColor }}
onClick={() => {
setSearchQuery('');
setShowResults(false);
@@ -383,18 +411,18 @@ const FlexScreen: React.FC = () => {
left={0}
right={0}
mt={1}
bg={cardBg}
bg="#1a1a2e"
borderWidth="1px"
borderColor={borderColor}
borderRadius="lg"
boxShadow="lg"
boxShadow="0 8px 32px rgba(0, 0, 0, 0.5)"
maxH="300px"
overflowY="auto"
zIndex={10}
>
{isSearching ? (
<Center p={4}>
<Spinner size="sm" color="purple.500" />
<Spinner size="sm" color={accentColor} />
</Center>
) : searchResults.length > 0 ? (
<List spacing={0}>
@@ -460,10 +488,11 @@ const FlexScreen: React.FC = () => {
<Tag
key={item.code}
size="md"
variant="subtle"
colorScheme="purple"
variant="outline"
borderColor={accentColor}
color={textColor}
cursor="pointer"
_hover={{ bg: 'purple.100' }}
_hover={{ bg: 'rgba(139, 92, 246, 0.2)' }}
onClick={() => addSecurity(item)}
>
<TagLabel>{item.name}</TagLabel>
@@ -493,7 +522,7 @@ const FlexScreen: React.FC = () => {
) : (
<Center py={8}>
<VStack spacing={3}>
<Icon as={FaExclamationCircle} boxSize={10} color="gray.300" />
<Icon as={FaExclamationCircle} boxSize={10} color={subTextColor} />
<Text color={subTextColor}>自选列表为空，请搜索添加证券</Text>
</VStack>
</Center>