feat: sockt 弹窗功能添加

src/constants/notificationTypes.js

@@ -58,30 +58,66 @@ export const PRIORITY_CONFIGS = {
     [PRIORITY_LEVELS.URGENT]: {
         label: '紧急',
         colorScheme: 'red',
-        show: true,
+        show: false, // 不再显示标签，改用边框+背景色表示
+        borderWidth: '6px', // 紧急：粗边框
+        bgOpacity: 0.25, // 紧急：深色背景
+        darkBgOpacity: 0.30, // 暗色模式下更明显
     },
     [PRIORITY_LEVELS.IMPORTANT]: {
         label: '重要',
         colorScheme: 'orange',
-        show: true,
+        show: false, // 不再显示标签，改用边框+背景色表示
+        borderWidth: '4px', // 重要：中等边框
+        bgOpacity: 0.15, // 重要：中色背景
+        darkBgOpacity: 0.20, // 暗色模式
     },
     [PRIORITY_LEVELS.NORMAL]: {
         label: '',
         colorScheme: 'gray',
         show: false, // 普通优先级不显示标签
+        borderWidth: '2px', // 普通：细边框
+        bgOpacity: 0.08, // 普通：浅色背景
+        darkBgOpacity: 0.12, // 暗色模式
     },
 };
 
+/**
+ * 根据优先级获取背景色透明度
+ * @param {string} priority - 优先级
+ * @param {boolean} isDark - 是否暗色模式
+ * @returns {number} - 透明度值 (0-1)
+ */
+export const getPriorityBgOpacity = (priority, isDark = false) => {
+    const config = PRIORITY_CONFIGS[priority] || PRIORITY_CONFIGS[PRIORITY_LEVELS.NORMAL];
+    return isDark ? config.darkBgOpacity : config.bgOpacity;
+};
+
+/**
+ * 根据优先级获取边框宽度
+ * @param {string} priority - 优先级
+ * @returns {string} - 边框宽度
+ */
+export const getPriorityBorderWidth = (priority) => {
+    const config = PRIORITY_CONFIGS[priority] || PRIORITY_CONFIGS[PRIORITY_LEVELS.NORMAL];
+    return config.borderWidth;
+};
+
 // 通知类型样式配置
 export const NOTIFICATION_TYPE_CONFIGS = {
     [NOTIFICATION_TYPES.ANNOUNCEMENT]: {
         name: '公告通知',
         icon: MdCampaign,
         colorScheme: 'blue',
+        // 亮色模式
         bg: 'blue.50',
         borderColor: 'blue.400',
         iconColor: 'blue.500',
         hoverBg: 'blue.100',
+        // 暗色模式
+        darkBg: 'rgba(59, 130, 246, 0.15)',      // blue.500 + 15% 透明度
+        darkBorderColor: 'blue.400',
+        darkIconColor: 'blue.300',
+        darkHoverBg: 'rgba(59, 130, 246, 0.25)', // Hover 时 25% 透明度
     },
     [NOTIFICATION_TYPES.STOCK_ALERT]: {
         name: '股票动向',
@@ -95,6 +131,7 @@ export const NOTIFICATION_TYPE_CONFIGS = {
             if (!priceChange) return 'red';
             return priceChange.startsWith('+') ? 'red' : 'green';
         },
+        // 亮色模式
         getBg: (priceChange) => {
             const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
             return `${scheme}.50`;
@@ -111,24 +148,58 @@ export const NOTIFICATION_TYPE_CONFIGS = {
             const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
             return `${scheme}.100`;
         },
+        // 暗色模式
+        getDarkBg: (priceChange) => {
+            const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
+            // red (上涨): rgba(239, 68, 68, 0.15), green (下跌): rgba(34, 197, 94, 0.15)
+            return scheme === 'red'
+                ? 'rgba(239, 68, 68, 0.15)'
+                : 'rgba(34, 197, 94, 0.15)';
+        },
+        getDarkBorderColor: (priceChange) => {
+            const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
+            return `${scheme}.400`;
+        },
+        getDarkIconColor: (priceChange) => {
+            const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
+            return `${scheme}.300`;
+        },
+        getDarkHoverBg: (priceChange) => {
+            const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
+            return scheme === 'red'
+                ? 'rgba(239, 68, 68, 0.25)'
+                : 'rgba(34, 197, 94, 0.25)';
+        },
     },
     [NOTIFICATION_TYPES.EVENT_ALERT]: {
         name: '事件动向',
         icon: MdArticle,
         colorScheme: 'orange',
+        // 亮色模式
         bg: 'orange.50',
         borderColor: 'orange.400',
         iconColor: 'orange.500',
         hoverBg: 'orange.100',
+        // 暗色模式
+        darkBg: 'rgba(249, 115, 22, 0.15)',      // orange.500 + 15% 透明度
+        darkBorderColor: 'orange.400',
+        darkIconColor: 'orange.300',
+        darkHoverBg: 'rgba(249, 115, 22, 0.25)',
     },
     [NOTIFICATION_TYPES.ANALYSIS_REPORT]: {
         name: '分析报告',
         icon: MdAssessment,
         colorScheme: 'purple',
+        // 亮色模式
         bg: 'purple.50',
         borderColor: 'purple.400',
         iconColor: 'purple.500',
         hoverBg: 'purple.100',
+        // 暗色模式
+        darkBg: 'rgba(168, 85, 247, 0.15)',      // purple.500 + 15% 透明度
+        darkBorderColor: 'purple.400',
+        darkIconColor: 'purple.300',
+        darkHoverBg: 'rgba(168, 85, 247, 0.25)',
     },
 };
 
@@ -178,4 +249,6 @@ export default {
     PRIORITY_CONFIGS,
     NOTIFICATION_TYPE_CONFIGS,
     formatNotificationTime,
+    getPriorityBgOpacity,
+    getPriorityBorderWidth,
 };