@mseep/anything-analyzer 3.6.50

package/src/renderer/components/Titlebar.module.css

@@ -0,0 +1,254 @@
+.titlebar {
+  display: flex;
+  align-items: stretch;
+  height: var(--titlebar-height);
+  background: var(--color-bar);
+  border-bottom: 1px solid var(--color-border);
+  -webkit-app-region: drag;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+/* Logo area — aligned with sidebar width */
+.logoArea {
+  width: var(--sidebar-width);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: var(--space-md);
+  border-right: 1px solid var(--color-border);
+  flex-shrink: 0;
+  -webkit-app-region: drag;
+}
+
+.logoIcon {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  background: linear-gradient(135deg, var(--text-disabled), var(--text-muted));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-3xs);
+  color: var(--text-secondary);
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.logoText {
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+  font-weight: 600;
+  letter-spacing: 1px;
+  white-space: nowrap;
+}
+
+/* Navigation tabs */
+.tabs {
+  display: flex;
+  align-items: stretch;
+  -webkit-app-region: no-drag;
+}
+
+.tab {
+  padding: 0 14px;
+  margin: 6px 2px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  border-radius: var(--radius-button);
+  cursor: pointer;
+  transition: color var(--transition-normal), background var(--transition-normal);
+  white-space: nowrap;
+  -webkit-app-region: no-drag;
+}
+
+.tab:hover {
+  color: var(--text-secondary);
+  background: var(--color-hover);
+}
+
+.tabActive {
+  color: var(--text-primary);
+  background: var(--color-active);
+}
+
+.tabIcon {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-sm);
+  opacity: 0.7;
+}
+
+.tabBadge {
+  font-size: var(--font-size-3xs);
+  padding: 1px 5px;
+  border-radius: var(--radius-lg);
+  background: var(--color-success-bg);
+  color: var(--color-success);
+  margin-left: 4px;
+}
+
+/* Spacer = draggable area */
+.spacer {
+  flex: 1;
+  -webkit-app-region: drag;
+}
+
+/* Right controls area */
+.rightControls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: 0 var(--space-sm);
+  -webkit-app-region: no-drag;
+}
+
+/* Language switch */
+.langSwitch {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+  padding: 2px 8px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-badge);
+  background: none;
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+  transition: border-color var(--transition-fast);
+}
+
+.langSwitch:hover {
+  border-color: var(--color-border-hover);
+}
+
+.langActive {
+  color: var(--text-secondary);
+}
+
+/* Action buttons (theme toggle) */
+.actionBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 28px;
+  background: none;
+  border: none;
+  border-radius: var(--radius-button);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  transition: background var(--transition-fast), color var(--transition-fast);
+  -webkit-app-region: no-drag;
+}
+
+.actionBtn:hover {
+  background: var(--color-hover);
+  color: var(--text-secondary);
+}
+
+.separator {
+  width: 1px;
+  height: 16px;
+  background: var(--color-border-subtle);
+  margin: 0 var(--space-xs);
+}
+
+/* Window control buttons */
+.windowControls {
+  display: flex;
+  align-items: stretch;
+  -webkit-app-region: no-drag;
+}
+
+.windowBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: var(--titlebar-height);
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.windowBtn:hover {
+  background: var(--color-hover);
+}
+
+.windowBtnClose:hover {
+  background: #e81123;
+  color: var(--text-primary);
+}
+
+/* Theme popover */
+.themePopover {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  width: 180px;
+  max-height: 400px;
+  overflow-y: auto;
+  background: var(--color-elevated);
+  border: 1px solid var(--color-border-hover);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 4px;
+  z-index: var(--z-dropdown);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.themeItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: none;
+  border-radius: var(--radius-badge);
+  background: none;
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-2xs);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  text-align: left;
+  width: 100%;
+}
+
+.themeItem:hover {
+  background: var(--color-hover);
+  color: var(--text-primary);
+}
+
+.themeItemActive {
+  color: var(--text-primary);
+  background: var(--color-selected);
+}
+
+.themeDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.themeName {
+  flex: 1;
+}
+
+.themeCheck {
+  font-size: var(--font-size-3xs);
+  color: var(--color-accent);
+}

package/src/renderer/components/Titlebar.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { IconMinimize, IconMaximize, IconClose, IconGlobe, IconCode, IconRobot } from '../ui/Icons'
+import { useLocale } from '../i18n'
+import type { LocaleKey } from '../i18n'
+import { THEMES } from '../theme'
+import styles from './Titlebar.module.css'
+
+export type AppView = 'browser' | 'inspector' | 'report'
+
+interface TitlebarProps {
+  theme: string
+  onThemeChange: (themeId: string) => void
+  locale: 'en' | 'zh'
+  onLocaleToggle: () => void
+  activeView: AppView
+  onViewChange: (view: AppView) => void
+  requestCount?: number
+}
+
+const navTabs: { key: AppView; labelKey: LocaleKey; icon: React.ReactNode }[] = [
+  { key: 'browser', labelKey: 'nav.browser', icon: <IconGlobe size={13} /> },
+  { key: 'inspector', labelKey: 'nav.inspector', icon: <IconCode size={13} /> },
+  { key: 'report', labelKey: 'nav.report', icon: <IconRobot size={13} /> },
+]
+
+const Titlebar: React.FC<TitlebarProps> = ({
+  theme,
+  onThemeChange,
+  locale,
+  onLocaleToggle,
+  activeView,
+  onViewChange,
+  requestCount = 0,
+}) => {
+  const { t } = useLocale()
+  const [isMaximized, setIsMaximized] = useState(false)
+  const [themeOpen, setThemeOpen] = useState(false)
+  const themeRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    window.electronAPI.isWindowMaximized().then(setIsMaximized)
+  }, [])
+
+  // Close theme popover on outside click
+  useEffect(() => {
+    if (!themeOpen) return
+    const handleClick = (e: MouseEvent) => {
+      if (themeRef.current && !themeRef.current.contains(e.target as Node)) {
+        setThemeOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [themeOpen])
+
+  const handleMinimize = useCallback(() => {
+    window.electronAPI.minimizeWindow()
+  }, [])
+
+  const handleMaximize = useCallback(async () => {
+    await window.electronAPI.maximizeWindow()
+    const maximized = await window.electronAPI.isWindowMaximized()
+    setIsMaximized(maximized)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    window.electronAPI.closeWindow()
+  }, [])
+
+  const currentTheme = THEMES.find(t => t.id === theme)
+
+  return (
+    <div className={styles.titlebar}>
+      {/* Logo area — matches sidebar width */}
+      <div className={styles.logoArea}>
+        <div className={styles.logoIcon}>A</div>
+        <span className={styles.logoText}>Anything Analyzer</span>
+      </div>
+
+      {/* Navigation Tabs */}
+      <div className={styles.tabs}>
+        {navTabs.map((tab) => (
+          <button
+            key={tab.key}
+            className={`${styles.tab} ${activeView === tab.key ? styles.tabActive : ''}`}
+            onClick={() => onViewChange(tab.key)}
+          >
+            <span className={styles.tabIcon}>{tab.icon}</span>
+            {t(tab.labelKey)}
+            {tab.key === 'inspector' && requestCount > 0 && (
+              <span className={styles.tabBadge}>{requestCount}</span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Draggable spacer */}
+      <div className={styles.spacer} />
+
+      {/* Right controls */}
+      <div className={styles.rightControls}>
+        {/* Language toggle */}
+        <button className={styles.langSwitch} onClick={onLocaleToggle}>
+          <span className={locale === 'zh' ? styles.langActive : ''}>中</span>
+          {' / '}
+          <span className={locale === 'en' ? styles.langActive : ''}>En</span>
+        </button>
+
+        {/* Theme selector */}
+        <div ref={themeRef} style={{ position: 'relative' }}>
+          <button
+            className={styles.actionBtn}
+            onClick={() => setThemeOpen(prev => !prev)}
+            title={locale === 'zh' ? '切换主题' : 'Switch theme'}
+          >
+            <span
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: '50%',
+                background: currentTheme?.accent || '#60a5fa',
+                display: 'inline-block',
+                border: '1px solid var(--color-border-hover)',
+              }}
+            />
+          </button>
+
+          {themeOpen && (
+            <div className={styles.themePopover}>
+              {THEMES.map((t) => (
+                <button
+                  key={t.id}
+                  className={`${styles.themeItem} ${theme === t.id ? styles.themeItemActive : ''}`}
+                  onClick={() => { onThemeChange(t.id); setThemeOpen(false) }}
+                >
+                  <span
+                    className={styles.themeDot}
+                    style={{ background: t.accent }}
+                  />
+                  <span className={styles.themeName}>
+                    {locale === 'zh' ? t.name : t.nameEn}
+                  </span>
+                  {theme === t.id && <span className={styles.themeCheck}>✓</span>}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.separator} />
+      </div>
+
+      {/* Window controls */}
+      <div className={styles.windowControls}>
+        <button className={styles.windowBtn} onClick={handleMinimize}>
+          <IconMinimize size={12} />
+        </button>
+        <button className={styles.windowBtn} onClick={handleMaximize}>
+          <IconMaximize size={12} />
+        </button>
+        <button className={`${styles.windowBtn} ${styles.windowBtnClose}`} onClick={handleClose}>
+          <IconClose size={12} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Titlebar

package/src/renderer/components/settings/FingerprintSection.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useState } from 'react'
+import { Button, Input, InputNumber, Select, useToast } from '../../ui'
+import { useLocale } from '../../i18n'
+import type { FingerprintProfile } from '@shared/types'
+
+interface Props {
+  currentSessionId?: string | null
+}
+
+export default function FingerprintSection({ currentSessionId }: Props) {
+  const toast = useToast()
+  const { t } = useLocale()
+  const [profile, setProfile] = useState<FingerprintProfile | null>(null)
+  const [expanded, setExpanded] = useState(false)
+
+  useEffect(() => {
+    if (!currentSessionId) { setProfile(null); return }
+    window.electronAPI.getFingerprintProfile(currentSessionId).then(p => {
+      setProfile(p)
+    })
+  }, [currentSessionId])
+
+  if (!currentSessionId) {
+    return (
+      <div style={{ color: 'var(--text-muted)', padding: 20, textAlign: 'center' }}>
+        {t('fingerprint.noSession')}
+      </div>
+    )
+  }
+
+  if (!profile) return null
+
+  const update = (partial: Partial<FingerprintProfile>) => {
+    setProfile(prev => prev ? { ...prev, ...partial } : prev)
+  }
+
+  const handleSave = async () => {
+    if (!profile) return
+    await window.electronAPI.updateFingerprintProfile(profile)
+    toast.success(t('fingerprint.saved'))
+  }
+
+  const handleRegenerate = async () => {
+    if (!currentSessionId) return
+    const newProfile = await window.electronAPI.regenerateFingerprintProfile(currentSessionId)
+    setProfile(newProfile)
+    toast.success(t('fingerprint.regenerated'))
+  }
+
+  const rowStyle: React.CSSProperties = {
+    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
+  }
+  const labelStyle: React.CSSProperties = {
+    fontSize: 'var(--font-size-base)', minWidth: 100, flexShrink: 0,
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }}>
+      {/* Summary */}
+      <div style={{
+        padding: '8px 12px',
+        background: 'var(--color-surface)',
+        borderRadius: 6,
+        fontSize: 'var(--font-size-sm)',
+        fontFamily: 'var(--font-mono)',
+        lineHeight: 1.6,
+        color: 'var(--text-secondary)',
+      }}>
+        <div>{profile.platform} · Chrome/{profile.userAgent.match(/Chrome\/(\S+)/)?.[1]}</div>
+        <div>{profile.screenWidth}x{profile.screenHeight} @{profile.devicePixelRatio}x · {profile.hardwareConcurrency} cores · {profile.deviceMemory}GB</div>
+        <div>{profile.timezone} · {profile.languages.join(', ')}</div>
+      </div>
+
+      {/* Actions */}
+      <div style={{ display: 'flex', gap: 8 }}>
+        <Button variant="primary" onClick={handleRegenerate}>{t('fingerprint.regenerate')}</Button>
+        <Button onClick={handleSave}>{t('fingerprint.save')}</Button>
+      </div>
+
+      {/* Expandable details */}
+      <div
+        onClick={() => setExpanded(!expanded)}
+        style={{
+          cursor: 'pointer',
+          fontSize: 'var(--font-size-sm)',
+          color: 'var(--text-muted)',
+          userSelect: 'none',
+        }}
+      >
+        {expanded ? '▼' : '▶'} {t('fingerprint.detail')}
+      </div>
+
+      {expanded && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.ua')}</span>
+            <Input
+              value={profile.userAgent}
+              onChange={e => update({ userAgent: e.target.value })}
+              style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-2xs)' }}
+            />
+          </div>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.platform')}</span>
+            <Select
+              value={profile.platform}
+              onChange={v => update({ platform: v })}
+              style={{ width: 180 }}
+              options={[
+                { label: 'Windows', value: 'Win32' },
+                { label: 'macOS', value: 'MacIntel' },
+                { label: 'Linux', value: 'Linux x86_64' },
+              ]}
+            />
+          </div>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.screen')}</span>
+            <InputNumber value={profile.screenWidth} onChange={v => v !== null && update({ screenWidth: v })} style={{ width: 80 }} />
+            <span>x</span>
+            <InputNumber value={profile.screenHeight} onChange={v => v !== null && update({ screenHeight: v })} style={{ width: 80 }} />
+          </div>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.dpr')}</span>
+            <InputNumber value={profile.devicePixelRatio} min={1} max={3} step={0.25} onChange={v => v !== null && update({ devicePixelRatio: v })} style={{ width: 80 }} />
+          </div>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.cpu')}</span>
+            <InputNumber value={profile.hardwareConcurrency} min={1} max={32} onChange={v => v !== null && update({ hardwareConcurrency: v })} style={{ width: 80 }} />
+          </div>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.memory')}</span>
+            <InputNumber value={profile.deviceMemory} min={2} max={64} onChange={v => v !== null && update({ deviceMemory: v })} style={{ width: 80 }} />
+          </div>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.webgl')}</span>
+            <Input
+              value={profile.webglRenderer}
+              onChange={e => update({ webglRenderer: e.target.value })}
+              style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-2xs)' }}
+            />
+          </div>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.timezone')}</span>
+            <Input value={profile.timezone} onChange={e => update({ timezone: e.target.value })} style={{ width: 200 }} />
+          </div>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.languages')}</span>
+            <Input
+              value={profile.languages.join(', ')}
+              onChange={e => update({ languages: e.target.value.split(',').map(s => s.trim()).filter(Boolean) })}
+              style={{ flex: 1 }}
+            />
+          </div>
+          <div style={rowStyle}>
+            <span style={labelStyle}>{t('fingerprint.webrtc')}</span>
+            <Select
+              value={profile.webrtcPolicy}
+              onChange={v => update({ webrtcPolicy: v as 'block' | 'real' | 'fake' })}
+              style={{ width: 120 }}
+              options={[
+                { label: 'Block', value: 'block' },
+                { label: 'Real', value: 'real' },
+                { label: 'Fake', value: 'fake' },
+              ]}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Test links */}
+      <div style={{ marginTop: 4 }}>
+        <span style={{ fontSize: 'var(--font-size-sm)', color: 'var(--text-muted)' }}>
+          {t('fingerprint.testLinks')}:
+        </span>
+        <div style={{ display: 'flex', gap: 12, marginTop: 4 }}>
+          {[
+            { label: 'BrowserLeaks', url: 'https://browserleaks.com/javascript' },
+            { label: 'CreepJS', url: 'https://abrahamjuliot.github.io/creepjs/' },
+            { label: 'Bot Detect', url: 'https://bot.sannysoft.com/' },
+          ].map(link => (
+            <span
+              key={link.url}
+              onClick={() => window.electronAPI.openExternal(link.url)}
+              style={{
+                fontSize: 'var(--font-size-sm)',
+                color: 'var(--color-accent)',
+                cursor: 'pointer',
+                textDecoration: 'underline',
+              }}
+            >
+              {link.label}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}