Fix production UI popover issues

Author: TNT-Likely

frontend/packages/base-ui/src/components/ui/hover-popover.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { cn } from '../../cn'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
 
 interface HoverPopoverProps {
   trigger: React.ReactNode
@@ -22,39 +23,64 @@ export function HoverPopover({
   popoverClassName,
   openOnFocus = false,
 }: HoverPopoverProps) {
-  const sideClass = side === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'
-  const alignClass =
-    align === 'start' ? 'left-0' :
-    align === 'end' ? 'right-0' :
-    'left-1/2 -translate-x-1/2'
+  const [open, setOpen] = React.useState(false)
+  const closeTimer = React.useRef<number | null>(null)
+
+  const clearCloseTimer = React.useCallback(() => {
+    if (closeTimer.current != null) {
+      window.clearTimeout(closeTimer.current)
+      closeTimer.current = null
+    }
+  }, [])
+
+  const openPopover = React.useCallback(() => {
+    clearCloseTimer()
+    setOpen(true)
+  }, [clearCloseTimer])
+
+  const closePopover = React.useCallback(() => {
+    clearCloseTimer()
+    closeTimer.current = window.setTimeout(() => setOpen(false), 80)
+  }, [clearCloseTimer])
+
+  React.useEffect(() => {
+    return () => clearCloseTimer()
+  }, [clearCloseTimer])
 
   return (
-    <span className={cn('relative inline-flex group', className)}>
-      {/* tabIndex: allow keyboard focus to open popover via focus-within (also helps on mobile tap) */}
-      <span tabIndex={0} className="outline-none">
-        {trigger}
-      </span>
-      <span
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <span
+          className={cn('inline-flex', className)}
+          tabIndex={openOnFocus ? 0 : undefined}
+          onMouseEnter={openPopover}
+          onMouseLeave={closePopover}
+          onFocus={openOnFocus ? openPopover : undefined}
+          onBlur={openOnFocus ? closePopover : undefined}
+        >
+          {trigger}
+        </span>
+      </PopoverTrigger>
+      <PopoverContent
+        side={side}
+        align={align}
+        sideOffset={8}
+        onMouseEnter={openPopover}
+        onMouseLeave={closePopover}
         className={cn(
-          'absolute z-50',
-          sideClass,
-          alignClass,
-          'opacity-0 pointer-events-none translate-y-1 scale-[0.98] transition-all duration-150',
-          'group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:scale-100',
-          openOnFocus && 'group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:scale-100',
+          'w-[22rem] max-w-[90vw] rounded-xl border border-border bg-card p-3 shadow-[0_16px_60px_rgba(0,0,0,0.18)]',
+          popoverClassName,
         )}
       >
-        <span className={cn('w-[22rem] max-w-[90vw] block rounded-xl bg-card border border-border shadow-[0_16px_60px_rgba(0,0,0,0.18)] p-3', popoverClassName)}>
-          {title && (
-            <div className="text-[12px] font-semibold text-foreground mb-1">
-              {title}
-            </div>
-          )}
-          <div className="text-[11px] leading-relaxed text-muted-foreground max-h-72 overflow-y-auto pr-1">
-            {content}
+        {title && (
+          <div className="text-[12px] font-semibold text-foreground mb-1">
+            {title}
           </div>
-        </span>
-      </span>
-    </span>
+        )}
+        <div className="text-[11px] leading-relaxed text-muted-foreground max-h-72 overflow-y-auto pr-1">
+          {content}
+        </div>
+      </PopoverContent>
+    </Popover>
   )
 }

frontend/packages/biz-ui/src/components/ai-suggestion-badge.tsx

@@ -0,0 +1,39 @@
+import type { MouseEventHandler } from 'react'
+import { cn } from '@panwatch/base-ui'
+import { BadgeChip, type BadgeChipSize } from '@panwatch/biz-ui/components/badge-chip'
+import { resolveSuggestionColorClass, resolveSuggestionLabel } from '@panwatch/biz-ui/components/suggestion-action'
+
+interface AiSuggestionBadgeProps {
+  action?: string
+  actionLabel?: string
+  isAI?: boolean
+  isExpired?: boolean
+  size?: BadgeChipSize
+  className?: string
+  title?: string
+  onClick?: MouseEventHandler<HTMLButtonElement>
+}
+
+export function AiSuggestionBadge({
+  action,
+  actionLabel,
+  isAI = false,
+  isExpired = false,
+  size = 'md',
+  className,
+  title,
+  onClick,
+}: AiSuggestionBadgeProps) {
+  const label = resolveSuggestionLabel(action, actionLabel)
+  const colorClass = resolveSuggestionColorClass(action, actionLabel)
+  return (
+    <BadgeChip
+      label={label}
+      aiTag={isAI}
+      size={size}
+      title={title}
+      onClick={onClick}
+      className={cn(colorClass, isExpired && 'opacity-50', className)}
+    />
+  )
+}

frontend/packages/biz-ui/src/components/badge-chip.tsx

@@ -0,0 +1,57 @@
+import type { MouseEventHandler, ReactNode } from 'react'
+import { cn } from '@panwatch/base-ui'
+
+export type BadgeChipSize = 'xs' | 'sm' | 'md' | 'lg'
+
+const sizeClassMap: Record<BadgeChipSize, string> = {
+  xs: 'text-[10px] px-1.5 py-0.5',
+  sm: 'text-[11px] px-2 py-0.5',
+  md: 'text-[12px] px-2.5 py-1',
+  lg: 'text-[13px] px-3 py-1.5',
+}
+
+interface BadgeChipProps {
+  label: ReactNode
+  className?: string
+  size?: BadgeChipSize
+  aiTag?: boolean
+  title?: string
+  onClick?: MouseEventHandler<HTMLButtonElement>
+}
+
+export function BadgeChip({
+  label,
+  className,
+  size = 'md',
+  aiTag = false,
+  title,
+  onClick,
+}: BadgeChipProps) {
+  const sharedClass = cn(
+    'relative inline-flex items-center rounded font-medium whitespace-nowrap transition-opacity',
+    sizeClassMap[size],
+    className,
+  )
+
+  const aiTagNode = aiTag ? (
+    <span className="pointer-events-none absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 text-[10px] leading-none px-1.5 py-[2px] rounded-sm bg-primary text-white uppercase shadow-sm ring-1 ring-black/20">
+      AI
+    </span>
+  ) : null
+
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} title={title} className={cn(sharedClass, 'cursor-pointer hover:opacity-80')}>
+        {label}
+        {aiTagNode}
+      </button>
+    )
+  }
+
+  return (
+    <span title={title} className={sharedClass}>
+      {label}
+      {aiTagNode}
+    </span>
+  )
+}

frontend/packages/biz-ui/src/components/kline-indicators.tsx

@@ -1,5 +1,6 @@
 import { HoverPopover } from '@panwatch/base-ui/components/ui/hover-popover'
 import type { KlineSummaryData } from '@panwatch/biz-ui/components/kline-summary-dialog'
+import { TechnicalBadge } from '@panwatch/biz-ui/components/technical-badge'
 
 interface KlineIndicatorsProps {
   summary: KlineSummaryData
@@ -29,7 +30,7 @@ export function KlineIndicators({ summary: s }: KlineIndicatorsProps) {
                 </div>
               </div>
             }
-            trigger={<span className="px-2 py-0.5 rounded bg-accent/50 text-muted-foreground cursor-help hover:bg-accent/70">{s.trend}</span>}
+            trigger={<TechnicalBadge label={s.trend} tone="neutral" help />}
           />
         )}
 
@@ -52,7 +53,7 @@ export function KlineIndicators({ summary: s }: KlineIndicatorsProps) {
                 </div>
               </div>
             }
-            trigger={<span className="px-2 py-0.5 rounded bg-accent/50 text-muted-foreground cursor-help hover:bg-accent/70">MACD {s.macd_status}</span>}
+            trigger={<TechnicalBadge label={`MACD ${s.macd_status}`} tone="neutral" help />}
           />
         )}
 
@@ -75,51 +76,57 @@ export function KlineIndicators({ summary: s }: KlineIndicatorsProps) {
                 </div>
               </div>
             }
-            trigger={<span className={`px-2 py-0.5 rounded ${
-              s.rsi_status === '超买' ? 'bg-rose-500/10 text-rose-600' :
-              s.rsi_status === '超卖' ? 'bg-emerald-500/10 text-emerald-600' :
-              'bg-accent/50 text-muted-foreground'
-            } cursor-help hover:bg-accent/70`}>RSI {s.rsi_status}{s.rsi6 != null && ` (${s.rsi6.toFixed(0)})`}</span>}
+            trigger={
+              <TechnicalBadge
+                label={`RSI ${s.rsi_status}${s.rsi6 != null ? ` (${s.rsi6.toFixed(0)})` : ''}`}
+                tone={s.rsi_status === '超买' ? 'bullish' : s.rsi_status === '超卖' ? 'bearish' : 'neutral'}
+                help
+              />
+            }
           />
         )}
 
         {s.kdj_status && (
           <HoverPopover
             title="KDJ（转折/超买超卖）"
             content={<div>J 值更敏感，金叉/死叉用于观察短期转折，但容易受震荡干扰，需结合趋势与量价。</div>}
-            trigger={<span className="px-2 py-0.5 rounded bg-accent/50 text-muted-foreground cursor-help hover:bg-accent/70">KDJ {s.kdj_status}</span>}
+            trigger={<TechnicalBadge label={`KDJ ${s.kdj_status}`} tone="neutral" help />}
           />
         )}
 
         {s.volume_trend && (
           <HoverPopover
             title="量能（成交量配合）"
             content={<div>放量常用于确认突破或反弹有效性；缩量上冲/下跌容易“虚”。与趋势、关键位结合更可靠。</div>}
-            trigger={<span className={`px-2 py-0.5 rounded ${
-              s.volume_trend === '放量' ? 'bg-amber-500/10 text-amber-600' :
-              s.volume_trend === '缩量' ? 'bg-blue-500/10 text-blue-600' :
-              'bg-accent/50 text-muted-foreground'
-            } cursor-help hover:bg-accent/70`}>{s.volume_trend}{s.volume_ratio != null && ` (${s.volume_ratio.toFixed(1)}x)`}</span>}
+            trigger={
+              <TechnicalBadge
+                label={`${s.volume_trend}${s.volume_ratio != null ? ` (${s.volume_ratio.toFixed(1)}x)` : ''}`}
+                tone={s.volume_trend === '放量' ? 'warning' : s.volume_trend === '缩量' ? 'info' : 'neutral'}
+                help
+              />
+            }
           />
         )}
 
         {s.boll_status && (
           <HoverPopover
             title="布林带（波动/偏离）"
             content={<div>上轨/下轨的突破/跌破常见于趋势阶段或极端波动。配合量能与回踩/站稳确认有效性。</div>}
-            trigger={<span className={`px-2 py-0.5 rounded ${
-              s.boll_status === '突破上轨' ? 'bg-rose-500/10 text-rose-600' :
-              s.boll_status === '跌破下轨' ? 'bg-emerald-500/10 text-emerald-600' :
-              'bg-accent/50 text-muted-foreground'
-            } cursor-help hover:bg-accent/70`}>布林 {s.boll_status}</span>}
+            trigger={
+              <TechnicalBadge
+                label={`布林 ${s.boll_status}`}
+                tone={s.boll_status === '突破上轨' ? 'bullish' : s.boll_status === '跌破下轨' ? 'bearish' : 'neutral'}
+                help
+              />
+            }
           />
         )}
 
         {s.kline_pattern && (
           <HoverPopover
             title="K线形态（局部结构）"
             content={<div>单根形态提示意义有限，更看重所处位置（趋势/支撑压力附近）与量能配合。</div>}
-            trigger={<span className="px-2 py-0.5 rounded bg-amber-500/10 text-amber-600 cursor-help hover:bg-amber-500/15">{s.kline_pattern}</span>}
+            trigger={<TechnicalBadge label={s.kline_pattern} tone="warning" help />}
           />
         )}
       </div>
@@ -130,14 +137,14 @@ export function KlineIndicators({ summary: s }: KlineIndicatorsProps) {
           <HoverPopover
             title="支撑位（关键支撑区）"
             content={<div>接近支撑更容易止跌反弹；放量跌破可能转为压力。更偏向“区域”而非一点。</div>}
-            trigger={<span className="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-600 cursor-help hover:bg-emerald-500/15">支撑 {s.support.toFixed(2)}</span>}
+            trigger={<TechnicalBadge label={`支撑 ${s.support.toFixed(2)}`} tone="bearish" help />}
           />
         )}
         {s.resistance != null && (
           <HoverPopover
             title="压力位（关键压力区）"
             content={<div>越接近压力上行越难；放量突破并站稳后，原压力往往会角色互换变为支撑。</div>}
-            trigger={<span className="px-2 py-0.5 rounded bg-rose-500/10 text-rose-600 cursor-help hover:bg-rose-500/15">压力 {s.resistance.toFixed(2)}</span>}
+            trigger={<TechnicalBadge label={`压力 ${s.resistance.toFixed(2)}`} tone="bullish" help />}
           />
         )}
       </div>