update pay ui

2025-12-11 10:07:17 +08:00
parent d0c9d9b1fb
commit 29cf0d7013
5 changed files with 110 additions and 84 deletions
--- a/src/views/StockOverview/components/FlexScreen/components/MiniTimelineChart.tsx
+++ b/src/views/StockOverview/components/FlexScreen/components/MiniTimelineChart.tsx
@@ -256,10 +256,14 @@ const MiniTimelineChart: React.FC<MiniTimelineChartProps> = ({
    return () => window.removeEventListener('resize', handleResize);
  }, []);

+  // 深色主题颜色
+  const subTextColor = 'rgba(255, 255, 255, 0.5)';
+  const accentColor = '#8b5cf6';
+
  if (loading) {
    return (
      <Center h={height}>
-        <Spinner size="sm" color="gray.400" />
+        <Spinner size="sm" color={accentColor} />
      </Center>
    );
  }
@@ -267,7 +271,7 @@ const MiniTimelineChart: React.FC<MiniTimelineChartProps> = ({
  if (error || !chartData.length) {
    return (
      <Center h={height}>
-        <Text fontSize="xs" color="gray.400">
+        <Text fontSize="xs" color={subTextColor}>
          {error || '暂无数据'}
        </Text>
      </Center>
--- a/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx
+++ b/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx
@@ -13,7 +13,6 @@ import {
  Text,
  Button,
  ButtonGroup,
-  useColorModeValue,
  Tooltip,
  Badge,
 } from '@chakra-ui/react';
@@ -41,26 +40,26 @@ const formatVolume = (volume: number): string => {
 };

 /**
- * 格式化价格
+ * 格式化价格 - 深色主题
 */
 const formatPrice = (price: number, prevClose?: number): FormattedPrice => {
  if (!price || price === 0) {
-    return { text: '-', color: 'gray.400' };
+    return { text: '-', color: 'rgba(255, 255, 255, 0.4)' };
  }

  const text = price.toFixed(2);

  if (!prevClose || prevClose === 0) {
-    return { text, color: 'gray.600' };
+    return { text, color: 'rgba(255, 255, 255, 0.6)' };
  }

  if (price > prevClose) {
-    return { text, color: 'red.500' };
+    return { text, color: '#ff4d4d' };
  }
  if (price < prevClose) {
-    return { text, color: 'green.500' };
+    return { text, color: '#22c55e' };
  }
-  return { text, color: 'gray.600' };
+  return { text, color: 'rgba(255, 255, 255, 0.6)' };
 };

 /** OrderRow 组件 Props */
@@ -75,7 +74,7 @@ interface OrderRowProps {
 }

 /**
- * 单行盘口
+ * 单行盘口 - 深色主题
 */
 const OrderRow: React.FC<OrderRowProps> = ({
  label,
@@ -86,15 +85,11 @@ const OrderRow: React.FC<OrderRowProps> = ({
  maxVolume,
  isLimitPrice,
 }) => {
-  const bgColor = useColorModeValue(
-    isBid ? 'red.50' : 'green.50',
-    isBid ? 'rgba(239, 68, 68, 0.1)' : 'rgba(34, 197, 94, 0.1)'
-  );
-  const barColor = useColorModeValue(
-    isBid ? 'red.200' : 'green.200',
-    isBid ? 'rgba(239, 68, 68, 0.3)' : 'rgba(34, 197, 94, 0.3)'
-  );
-  const limitColor = useColorModeValue('orange.500', 'orange.300');
+  // 深色主题颜色
+  const barColor = isBid ? 'rgba(255, 77, 77, 0.2)' : 'rgba(34, 197, 94, 0.2)';
+  const limitColor = 'orange.300';
+  const labelColor = 'rgba(255, 255, 255, 0.5)';
+  const volumeColor = 'rgba(255, 255, 255, 0.6)';

  const priceInfo = formatPrice(price, prevClose);
  const volumeText = formatVolume(volume);
@@ -123,7 +118,7 @@ const OrderRow: React.FC<OrderRowProps> = ({
      />

      {/* 内容 */}
-      <Text color="gray.500" w="24px" flexShrink={0} zIndex={1}>
+      <Text color={labelColor} w="24px" flexShrink={0} zIndex={1}>
        {label}
      </Text>
      <HStack flex={1} justify="flex-end" zIndex={1}>
@@ -142,7 +137,7 @@ const OrderRow: React.FC<OrderRowProps> = ({
          </Tooltip>
        )}
      </HStack>
-      <Text color="gray.600" w="40px" textAlign="right" zIndex={1}>
+      <Text color={volumeColor} w="40px" textAlign="right" zIndex={1}>
        {volumeText}
      </Text>
    </HStack>
@@ -150,7 +145,7 @@ const OrderRow: React.FC<OrderRowProps> = ({
 };

 /**
- * OrderBookPanel 组件
+ * OrderBookPanel 组件 - 深色主题
 */
 const OrderBookPanel: React.FC<OrderBookPanelProps> = ({
  bidPrices = [],
@@ -162,9 +157,11 @@ const OrderBookPanel: React.FC<OrderBookPanelProps> = ({
  lowerLimit,
  defaultLevels = 5,
 }) => {
-  const borderColor = useColorModeValue('gray.200', 'gray.700');
-  const buttonBg = useColorModeValue('gray.100', 'gray.700');
-  const bgColor = useColorModeValue('white', '#1a1a1a');
+  // 深色主题颜色
+  const borderColor = 'rgba(255, 255, 255, 0.1)';
+  const buttonBg = 'rgba(255, 255, 255, 0.1)';
+  const bgColor = 'transparent';
+  const textColor = 'rgba(255, 255, 255, 0.6)';

  // 可切换显示的档位数
  const maxAvailableLevels = Math.max(bidPrices.length, askPrices.length, 1);
@@ -230,7 +227,7 @@ const OrderBookPanel: React.FC<OrderBookPanelProps> = ({
  if (!hasData) {
    return (
      <Box textAlign="center" py={2}>
-        <Text fontSize="xs" color="gray.400">
+        <Text fontSize="xs" color={textColor}>
          暂无盘口数据
        </Text>
      </Box>
@@ -246,14 +243,20 @@ const OrderBookPanel: React.FC<OrderBookPanelProps> = ({
            <Button
              onClick={() => setShowLevels(5)}
              bg={showLevels === 5 ? buttonBg : 'transparent'}
+              color={textColor}
+              borderColor={borderColor}
              fontWeight={showLevels === 5 ? 'bold' : 'normal'}
+              _hover={{ bg: 'rgba(255, 255, 255, 0.15)' }}
            >
              5档
            </Button>
            <Button
              onClick={() => setShowLevels(10)}
              bg={showLevels === 10 ? buttonBg : 'transparent'}
+              color={textColor}
+              borderColor={borderColor}
              fontWeight={showLevels === 10 ? 'bold' : 'normal'}
+              _hover={{ bg: 'rgba(255, 255, 255, 0.15)' }}
            >
              10档
            </Button>
@@ -273,7 +276,7 @@ const OrderBookPanel: React.FC<OrderBookPanelProps> = ({
            top="50%"
            transform="translateY(-50%)"
            fontSize="2xs"
-            color="gray.400"
+            color={textColor}
            bg={bgColor}
            px={1}
          >
@@ -287,7 +290,7 @@ const OrderBookPanel: React.FC<OrderBookPanelProps> = ({

      {/* 涨跌停价信息 */}
      {(upperLimit || lowerLimit) && (
-        <HStack justify="space-between" mt={1} fontSize="2xs" color="gray.400">
+        <HStack justify="space-between" mt={1} fontSize="2xs" color={textColor}>
          {lowerLimit && <Text>跌停 {lowerLimit.toFixed(2)}</Text>}
          {upperLimit && <Text>涨停 {upperLimit.toFixed(2)}</Text>}
        </HStack>
--- a/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx
+++ b/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx
@@ -10,7 +10,6 @@ import {
  Text,
  IconButton,
  Tooltip,
-  useColorModeValue,
  Collapse,
  Badge,
 } from '@chakra-ui/react';
@@ -77,41 +76,27 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
  // 类型断言，确保类型安全
  const quoteData = quote as Partial<QuoteData>;

-  // 颜色主题
-  const cardBg = useColorModeValue('white', '#1a1a1a');
-  const borderColor = useColorModeValue('gray.200', '#333');
-  const hoverBorderColor = useColorModeValue('purple.300', '#666');
-  const textColor = useColorModeValue('gray.800', 'white');
-  const subTextColor = useColorModeValue('gray.500', 'gray.400');
+  // 深色主题颜色 - 与 StockOverview 保持一致
+  const cardBg = 'rgba(255, 255, 255, 0.03)';
+  const borderColor = 'rgba(255, 255, 255, 0.08)';
+  const hoverBorderColor = '#8b5cf6';
+  const textColor = 'rgba(255, 255, 255, 0.95)';
+  const subTextColor = 'rgba(255, 255, 255, 0.6)';

  // 涨跌色
  const { price, prevClose, change, changePct, amount } = quoteData;
-  const priceColor = useColorModeValue(
-    !prevClose || price === prevClose
-      ? 'gray.800'
+  const priceColor = !prevClose || price === prevClose
+    ? 'rgba(255, 255, 255, 0.7)'
    : price && price > prevClose
-        ? 'red.500'
-        : 'green.500',
-    !prevClose || price === prevClose
-      ? 'gray.200'
-      : price && price > prevClose
-        ? 'red.400'
-        : 'green.400'
-  );
+      ? '#ff4d4d'
+      : '#22c55e';

  // 涨跌幅背景色
-  const changeBgColor = useColorModeValue(
-    !changePct || changePct === 0
-      ? 'gray.100'
+  const changeBgColor = !changePct || changePct === 0
+    ? 'rgba(255, 255, 255, 0.1)'
    : changePct > 0
-        ? 'red.100'
-        : 'green.100',
-    !changePct || changePct === 0
-      ? 'gray.700'
-      : changePct > 0
-        ? 'rgba(239, 68, 68, 0.2)'
-        : 'rgba(34, 197, 94, 0.2)'
-  );
+      ? 'rgba(255, 77, 77, 0.2)'
+      : 'rgba(34, 197, 94, 0.2)';

  // 跳转到详情页
  const handleNavigate = (): void => {
@@ -156,9 +141,10 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
      borderRadius="lg"
      overflow="hidden"
      transition="all 0.2s"
+      backdropFilter="blur(10px)"
      _hover={{
        borderColor: hoverBorderColor,
-        boxShadow: 'md',
+        boxShadow: '0 4px 20px rgba(139, 92, 246, 0.2)',
      }}
    >
      {/* 头部 */}
@@ -227,6 +213,8 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
            icon={expanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
            size="xs"
            variant="ghost"
+            color={subTextColor}
+            _hover={{ bg: 'rgba(255, 255, 255, 0.1)', color: textColor }}
            aria-label={expanded ? '收起' : '展开'}
            onClick={(e) => {
              e.stopPropagation();
@@ -238,7 +226,8 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
              icon={<CloseIcon />}
              size="xs"
              variant="ghost"
-              colorScheme="red"
+              color="red.400"
+              _hover={{ bg: 'rgba(239, 68, 68, 0.1)' }}
              aria-label="移除"
              onClick={(e) => {
                e.stopPropagation();
--- a/src/views/StockOverview/components/FlexScreen/index.tsx
+++ b/src/views/StockOverview/components/FlexScreen/index.tsx
@@ -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>
--- a/src/views/StockOverview/index.js
+++ b/src/views/StockOverview/index.js
@@ -852,6 +852,7 @@ const StockOverview = () => {
              minDate={tradingDays.length > 0 ? new Date(tradingDays[0]) : undefined}
              maxDate={tradingDays.length > 0 ? new Date(tradingDays[tradingDays.length - 1]) : undefined}
              label="交易日期"
+              isDarkMode={true}
            />
          </Flex>
          {selectedDate && (