@mseep/anything-analyzer 3.6.50

package/src/renderer/styles/tokens.css

@@ -0,0 +1,137 @@
+/* ============================================
+ * Anything Analyzer — Design Tokens
+ * Minimal Pro / Tool Aesthetic
+ * ============================================ */
+
+:root {
+  /* ---- Surfaces ---- */
+  --color-base: #0a0a0a;
+  --color-frame: #111111;
+  --color-bar: #0e0e0e;
+  --color-content: #141414;
+  --color-sidebar: #0c0c0c;
+  --color-surface: #181818;
+  --color-elevated: #1f1f1f;
+
+  /* ---- Borders ---- */
+  --color-border: #1a1a1a;
+  --color-border-subtle: #222222;
+  --color-border-hover: #333333;
+
+  /* ---- Interactive States ---- */
+  --color-hover: rgba(255, 255, 255, 0.04);
+  --color-active: #252525;
+  --color-selected: rgba(255, 255, 255, 0.08);
+  --color-focus-ring: rgba(96, 165, 250, 0.4);
+
+  /* ---- Text ---- */
+  --text-primary: #ffffff;
+  --text-secondary: #a0a0a0;
+  --text-muted: #8a8a8a;
+  --text-label: #787878;
+  --text-disabled: #505050;
+
+  /* ---- Semantic Colors ---- */
+  --color-success: #4ade80;
+  --color-success-bg: rgba(74, 222, 128, 0.08);
+  --color-success-border: rgba(74, 222, 128, 0.15);
+
+  --color-info: #60a5fa;
+  --color-info-bg: rgba(96, 165, 250, 0.08);
+  --color-info-border: rgba(96, 165, 250, 0.15);
+
+  --color-warning: #facc15;
+  --color-warning-bg: rgba(250, 204, 21, 0.08);
+  --color-warning-border: rgba(250, 204, 21, 0.15);
+
+  --color-error: #f87171;
+  --color-error-bg: rgba(248, 113, 113, 0.08);
+  --color-error-border: rgba(248, 113, 113, 0.15);
+
+  /* ---- Accent ---- */
+  --color-accent: #60a5fa;
+  --color-accent-bg: rgba(96, 165, 250, 0.1);
+  --color-accent-border: rgba(96, 165, 250, 0.2);
+
+  /* ---- Primary Button ---- */
+  --color-primary: #ffffff;
+  --color-primary-hover: #e0e0e0;
+  --color-primary-text: #0a0a0a;
+
+  --color-purple: #a855f7;
+  --color-purple-bg: rgba(168, 85, 247, 0.1);
+
+  --color-orange: #f97316;
+  --color-orange-bg: rgba(249, 115, 22, 0.1);
+
+  /* ---- Border Radius ---- */
+  --radius-frame: 10px;
+  --radius-lg: 8px;
+  --radius-input: 8px;
+  --radius-button: 6px;
+  --radius-badge: 4px;
+  --radius-bar: 2px;
+  --radius-chip: 16px;
+  --radius-full: 9999px;
+
+  /* ---- Typography ---- */
+  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  --font-mono: 'Consolas', 'Cascadia Code', 'Fira Code', monospace;
+
+  --font-size-3xs: 10px;
+  --font-size-2xs: 12px;
+  --font-size-xs: 13px;
+  --font-size-sm: 14px;
+  --font-size-base: 14px;
+  --font-size-md: 15px;
+  --font-size-lg: 17px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 22px;
+
+  --line-height-tight: 1.3;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.8;
+
+  --letter-spacing-label: 1px;
+  --letter-spacing-section: 2px;
+
+  /* ---- Spacing ---- */
+  --space-2xs: 2px;
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 8px;
+  --space-lg: 12px;
+  --space-xl: 16px;
+  --space-2xl: 20px;
+  --space-3xl: 24px;
+  --space-4xl: 32px;
+
+  /* ---- Fixed Dimensions ---- */
+  --titlebar-height: 44px;
+  --navbar-height: 34px;
+  --statusbar-height: 26px;
+  --sidebar-width: 220px;
+  --browser-bar-height: 38px;
+  --browser-tabs-height: 30px;
+  --inspector-list-width: 420px;
+  --report-max-width: 720px;
+  --report-context-width: 260px;
+
+  /* ---- Shadows ---- */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
+  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.6);
+
+  /* ---- Transitions ---- */
+  --transition-fast: 0.1s ease;
+  --transition-normal: 0.15s ease;
+  --transition-slow: 0.3s ease;
+
+  /* ---- Z-Index ---- */
+  --z-dropdown: 100;
+  --z-modal-backdrop: 200;
+  --z-modal: 210;
+  --z-toast: 300;
+  --z-tooltip: 400;
+}

package/src/renderer/theme.ts

@@ -0,0 +1,31 @@
+/**
+ * Theme metadata — all available application themes.
+ */
+
+export interface ThemeMeta {
+  id: string
+  name: string        // 中文显示名
+  nameEn: string      // 英文显示名
+  type: 'dark' | 'light'
+  accent: string      // 代表色（预览色块）
+}
+
+export const THEMES: ThemeMeta[] = [
+  { id: 'dark',        name: '默认深色',     nameEn: 'Default Dark',  type: 'dark',  accent: '#60a5fa' },
+  { id: 'light',       name: '亮色清爽',     nameEn: 'Light',         type: 'light', accent: '#3b82f6' },
+  { id: 'discord',     name: 'Discord 暖灰', nameEn: 'Discord',       type: 'dark',  accent: '#5865f2' },
+  { id: 'github-dark', name: 'GitHub Dark',  nameEn: 'GitHub Dark',   type: 'dark',  accent: '#58a6ff' },
+  { id: 'catppuccin',  name: 'Catppuccin',   nameEn: 'Catppuccin',    type: 'dark',  accent: '#cba6f7' },
+  { id: 'dracula',     name: 'Dracula',      nameEn: 'Dracula',       type: 'dark',  accent: '#ff79c6' },
+  { id: 'nord',        name: 'Nord 极光蓝',  nameEn: 'Nord',          type: 'dark',  accent: '#88c0d0' },
+  { id: 'tokyo-night', name: 'Tokyo Night',  nameEn: 'Tokyo Night',   type: 'dark',  accent: '#7aa2f7' },
+  { id: 'gruvbox',     name: 'Gruvbox 暖调', nameEn: 'Gruvbox',       type: 'dark',  accent: '#fe8019' },
+  { id: 'ayu-dark',    name: 'Ayu Dark',     nameEn: 'Ayu Dark',      type: 'dark',  accent: '#e6b450' },
+  { id: 'one-dark',    name: 'One Dark',     nameEn: 'One Dark',      type: 'dark',  accent: '#61afef' },
+]
+
+export const DEFAULT_THEME = 'dark'
+
+export function getThemeById(id: string): ThemeMeta | undefined {
+  return THEMES.find(t => t.id === id)
+}

package/src/renderer/ui/Badge.module.css

@@ -0,0 +1,38 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.label {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+}
+
+/* Sizes */
+.sm .dot {
+  width: 5px;
+  height: 5px;
+}
+
+.lg .dot {
+  width: 8px;
+  height: 8px;
+}
+
+/* Pulse animation for active states */
+.pulse .dot {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}

package/src/renderer/ui/Badge.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import styles from './Badge.module.css'
+
+export interface BadgeProps {
+  color?: string
+  label?: string
+  size?: 'sm' | 'md' | 'lg'
+  pulse?: boolean
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  color = 'var(--text-muted)',
+  label,
+  size = 'md',
+  pulse = false,
+  className,
+  style,
+}) => {
+  const cls = [
+    styles.badge,
+    size !== 'md' && styles[size],
+    pulse && styles.pulse,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return (
+    <span className={cls} style={style}>
+      <span className={styles.dot} style={{ background: color }} />
+      {label && <span className={styles.label}>{label}</span>}
+    </span>
+  )
+}

package/src/renderer/ui/Button.module.css

@@ -0,0 +1,142 @@
+/* Button variants */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: 0 var(--space-lg);
+  height: 28px;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  line-height: 1;
+  border-radius: var(--radius-button);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+}
+
+.button:hover {
+  border-color: var(--color-border-hover);
+  color: var(--text-primary);
+}
+
+.button:active {
+  background: var(--color-active);
+}
+
+.button:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-focus-ring);
+}
+
+.button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Size: small */
+.sm {
+  height: 24px;
+  padding: 0 var(--space-md);
+  font-size: var(--font-size-sm);
+}
+
+/* Variant: primary */
+.primary {
+  background: var(--color-primary);
+  color: var(--color-primary-text);
+  border-color: var(--color-primary);
+}
+
+.primary:hover {
+  background: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+}
+
+.primary:active {
+  opacity: 0.85;
+}
+
+/* Variant: ghost */
+.ghost {
+  background: transparent;
+  border-color: transparent;
+}
+
+.ghost:hover {
+  background: var(--color-hover);
+  border-color: transparent;
+}
+
+/* Variant: danger */
+.danger {
+  color: var(--color-error);
+  border-color: var(--color-error-border);
+  background: var(--color-error-bg);
+}
+
+.danger:hover {
+  border-color: var(--color-error);
+  color: var(--color-error);
+}
+
+/* Variant: dashed */
+.dashed {
+  border-style: dashed;
+  border-color: var(--color-border-hover);
+  background: var(--color-active);
+  color: var(--text-muted);
+}
+
+.dashed:hover {
+  border-color: var(--color-border-hover);
+  color: var(--text-secondary);
+}
+
+/* Variant: success */
+.success {
+  color: var(--color-success);
+  border-color: var(--color-success-border);
+  background: var(--color-success-bg);
+}
+
+.success:hover {
+  border-color: var(--color-success);
+}
+
+/* Variant: info */
+.info {
+  color: var(--color-info);
+  border-color: var(--color-info-border);
+  background: var(--color-info-bg);
+}
+
+.info:hover {
+  border-color: var(--color-info);
+}
+
+/* Icon-only button */
+.iconOnly {
+  padding: 0;
+  width: 28px;
+}
+
+.iconOnly.sm {
+  width: 24px;
+}
+
+/* Block button */
+.block {
+  width: 100%;
+}
+
+/* Loading state */
+.loading {
+  pointer-events: none;
+  opacity: 0.7;
+}

package/src/renderer/ui/Button.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import styles from './Button.module.css'
+
+export type ButtonVariant = 'default' | 'primary' | 'ghost' | 'danger' | 'dashed' | 'success' | 'info'
+export type ButtonSize = 'sm' | 'md'
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  icon?: React.ReactNode
+  iconOnly?: boolean
+  block?: boolean
+  loading?: boolean
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'default',
+  size = 'md',
+  icon,
+  iconOnly = false,
+  block = false,
+  loading = false,
+  className,
+  children,
+  disabled,
+  ...rest
+}) => {
+  const cls = [
+    styles.button,
+    variant !== 'default' && styles[variant],
+    size === 'sm' && styles.sm,
+    iconOnly && styles.iconOnly,
+    block && styles.block,
+    loading && styles.loading,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return (
+    <button className={cls} disabled={disabled || loading} {...rest}>
+      {icon && <span style={{ display: 'flex', alignItems: 'center' }}>{icon}</span>}
+      {!iconOnly && children}
+    </button>
+  )
+}

package/src/renderer/ui/Collapse.module.css

@@ -0,0 +1,49 @@
+.collapse {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-button);
+  overflow: hidden;
+}
+
+.panel {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.panel:last-child {
+  border-bottom: none;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 10px var(--space-md);
+  cursor: pointer;
+  background: var(--color-surface);
+  transition: background var(--transition-fast);
+  user-select: none;
+}
+
+.header:hover {
+  background: var(--color-surface-hover);
+}
+
+.arrow {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+}
+
+.arrowOpen {
+  transform: rotate(90deg);
+}
+
+.label {
+  flex: 1;
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+}
+
+.content {
+  padding: var(--space-md);
+  background: var(--color-content);
+}

package/src/renderer/ui/Collapse.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import styles from './Collapse.module.css'
+
+interface CollapseItem {
+  key: string
+  label: React.ReactNode
+  children: React.ReactNode
+}
+
+interface CollapseProps {
+  items: CollapseItem[]
+  defaultActiveKey?: string[]
+  className?: string
+}
+
+export const Collapse: React.FC<CollapseProps> = ({ items, defaultActiveKey = [], className }) => {
+  const [activeKeys, setActiveKeys] = useState<Set<string>>(new Set(defaultActiveKey))
+
+  const toggle = (key: string) => {
+    setActiveKeys((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) {
+        next.delete(key)
+      } else {
+        next.add(key)
+      }
+      return next
+    })
+  }
+
+  return (
+    <div className={`${styles.collapse} ${className ?? ''}`}>
+      {items.map((item) => {
+        const isOpen = activeKeys.has(item.key)
+        return (
+          <div key={item.key} className={styles.panel}>
+            <div className={styles.header} onClick={() => toggle(item.key)}>
+              <svg
+                className={`${styles.arrow} ${isOpen ? styles.arrowOpen : ''}`}
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <polyline points="9 18 15 12 9 6" />
+              </svg>
+              <span className={styles.label}>{item.label}</span>
+            </div>
+            {isOpen && <div className={styles.content}>{item.children}</div>}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/renderer/ui/CopyableBlock.module.css

@@ -0,0 +1,56 @@
+.container {
+  margin-bottom: var(--space-lg);
+}
+
+.label {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: var(--space-sm);
+}
+
+.block {
+  position: relative;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-button);
+  overflow: auto;
+}
+
+.content {
+  margin: 0;
+  padding: 10px 14px;
+  padding-right: 40px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.copyBtn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: var(--radius-badge);
+  background: var(--color-surface-hover);
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--transition-fast), color var(--transition-fast);
+}
+
+.block:hover .copyBtn {
+  opacity: 1;
+}
+
+.copyBtn:hover {
+  color: var(--text-primary);
+}

package/src/renderer/ui/CopyableBlock.tsx

@@ -0,0 +1,42 @@
+import React, { useState, useCallback } from 'react'
+import styles from './CopyableBlock.module.css'
+import { IconCheck } from './Icons'
+
+interface CopyableBlockProps {
+  content: string
+  label?: string
+  maxHeight?: number
+}
+
+export const CopyableBlock: React.FC<CopyableBlockProps> = ({ content, label, maxHeight = 400 }) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // fallback
+    }
+  }, [content])
+
+  return (
+    <div className={styles.container}>
+      {label && <div className={styles.label}>{label}</div>}
+      <div className={styles.block} style={{ maxHeight }}>
+        <pre className={styles.content}>{content}</pre>
+        <button className={styles.copyBtn} onClick={handleCopy} title="Copy">
+          {copied ? (
+            <IconCheck size={12} />
+          ) : (
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+            </svg>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/renderer/ui/Empty.module.css

@@ -0,0 +1,19 @@
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4xl) var(--space-xl);
+  color: var(--text-muted);
+}
+
+.icon {
+  font-size: 32px;
+  margin-bottom: var(--space-lg);
+  opacity: 0.3;
+}
+
+.text {
+  font-size: var(--font-size-base);
+  color: var(--text-label);
+}

package/src/renderer/ui/Empty.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styles from './Empty.module.css'
+
+export interface EmptyProps {
+  description?: string
+  icon?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const Empty: React.FC<EmptyProps> = ({
+  description = 'No data',
+  icon,
+  children,
+  className,
+  style,
+}) => {
+  return (
+    <div className={`${styles.empty} ${className ?? ''}`} style={style}>
+      <div className={styles.icon}>
+        {icon || (
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1">
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <line x1="9" y1="9" x2="15" y2="15" />
+            <line x1="15" y1="9" x2="9" y2="15" />
+          </svg>
+        )}
+      </div>
+      <div className={styles.text}>{description}</div>
+      {children}
+    </div>
+  )
+}