@bbki.ng/site 5.4.46 → 5.4.48

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @bbki.ng/site
 
+## 5.4.48
+
+### Patch Changes
+
+- bb4ca8f: add fingerprint
+- Updated dependencies [bb4ca8f]
+  - @bbki.ng/ui@0.1.22
+
+## 5.4.47
+
+### Patch Changes
+
+- d73ac87: fix ident of article's date
+- Updated dependencies [d73ac87]
+  - @bbki.ng/ui@0.1.21
+
 ## 5.4.46
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.4.46",
+  "version": "5.4.48",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -14,7 +14,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "6",
     "swr": "^2.2.5",
-    "@bbki.ng/ui": "0.1.20"
+    "@bbki.ng/ui": "0.1.22"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

package/src/blog/components/effect-layer/effects/watermark.frag

@@ -4,6 +4,10 @@
 
 uniform vec4 uHashChars;      // hex digit values for chars 0–3 (each 0.0–15.0)
 uniform vec4 uHashChars2;     // hex digit values for chars 4–6 (.w unused)
+uniform vec4 uFpChars1;       // fingerprint chars 0–3
+uniform vec4 uFpChars2;       // fingerprint chars 4–7
+uniform vec4 uFpChars3;       // fingerprint chars 8–11
+uniform vec4 uFpChars4;       // fingerprint chars 12–15
 uniform float uWatermarkHover; // 0.0 = idle (#f1f1f1), 1.0 = hovered (black)
 
 // Each glyph is a 4-wide × 5-tall bitmap packed into 20 bits of a float.
@@ -67,46 +71,87 @@ float getHashChar(float i) {
     return uHashChars2.z;
 }
 
+float getFpChar(float i) {
+    if (i < 0.5)  return uFpChars1.x;
+    if (i < 1.5)  return uFpChars1.y;
+    if (i < 2.5)  return uFpChars1.z;
+    if (i < 3.5)  return uFpChars1.w;
+    if (i < 4.5)  return uFpChars2.x;
+    if (i < 5.5)  return uFpChars2.y;
+    if (i < 6.5)  return uFpChars2.z;
+    if (i < 7.5)  return uFpChars2.w;
+    if (i < 8.5)  return uFpChars3.x;
+    if (i < 9.5)  return uFpChars3.y;
+    if (i < 10.5) return uFpChars3.z;
+    if (i < 11.5) return uFpChars3.w;
+    if (i < 12.5) return uFpChars4.x;
+    if (i < 13.5) return uFpChars4.y;
+    if (i < 14.5) return uFpChars4.z;
+    return uFpChars4.w;
+}
+
 void drawWatermark(vec2 uv) {
     // Work in CSS (logical) pixels
     vec2 pixel = gl_FragCoord.xy / uDevicePixelRatio;
 
+    // Layout constants
     float scale  = 2.0;              // each bitmap pixel = 2 CSS px
     float charW  = 4.0 * scale;      // 8 px per glyph
     float charH  = 5.0 * scale;      // 10 px per glyph  (≈ 12 px visual)
     float gap    = 3.0;              // 3 px gap between glyphs
     float cellW  = charW + gap;      // 11 px per cell
-    float nChars = 7.0;
 
-    // Padding from the bottom-left corner of the viewport
     float padX = 16.0;
     float padY = 16.0;
+    float lineGap = 6.0;             // 6 px gap between lines
+
+    // ----- Line 1 (bottom): Git hash - 7 chars -----
+    {
+        float nChars = 7.0;
+        vec2 pos = pixel - vec2(padX, padY);
+        float totalW = nChars * cellW - gap;
+
+        if (pos.x >= 0.0 && pos.x < totalW && pos.y >= 0.0 && pos.y < charH) {
+            float ci = floor(pos.x / cellW);
+            if (ci < nChars) {
+                float localX = pos.x - ci * cellW;
+                if (localX < charW) {
+                    vec2 bp = vec2(localX, pos.y) / scale;
+                    float charCode = getHashChar(ci);
+                    float on = sampleChar(charCode, bp);
+                    if (on > 0.5) {
+                        float a   = 0.4;
+                        vec3  col = mix(vec3(0.945), vec3(0.0), uWatermarkHover);
+                        gl_FragColor = vec4(col * a, a) + gl_FragColor * (1.0 - a);
+                        return;
+                    }
+                }
+            }
+        }
+    }
 
-    vec2 pos = pixel - vec2(padX, padY);
-
-    // Early-exit bounding box
-    float totalW = nChars * cellW - gap;
-    if (pos.x < 0.0 || pos.x >= totalW || pos.y < 0.0 || pos.y >= charH) return;
-
-    // Which character slot?
-    float ci = floor(pos.x / cellW);
-    if (ci >= nChars) return;
-
-    // Local x within character cell; skip the inter-glyph gap
-    float localX = pos.x - ci * cellW;
-    if (localX >= charW) return;
-
-    // Convert to bitmap-pixel coordinates
-    vec2 bp = vec2(localX, pos.y) / scale;
-
-    float charCode = getHashChar(ci);
-    float on = sampleChar(charCode, bp);
-
-    if (on > 0.5) {
-        // Idle: #f1f1f1 (0.945) → Hovered: black (0.0)
-        float a   = 0.4;
-        vec3  col = mix(vec3(0.945), vec3(0.0), uWatermarkHover);
-        // Standard alpha-blend (pre-multiplied style)
-        gl_FragColor = vec4(col * a, a) + gl_FragColor * (1.0 - a);
+    // ----- Line 2 (above): Fingerprint - 16 chars -----
+    {
+        float nChars = 16.0;
+        float fpPadY = padY + charH + lineGap;
+        vec2 pos = pixel - vec2(padX, fpPadY);
+        float totalW = nChars * cellW - gap;
+
+        if (pos.x >= 0.0 && pos.x < totalW && pos.y >= 0.0 && pos.y < charH) {
+            float ci = floor(pos.x / cellW);
+            if (ci < nChars) {
+                float localX = pos.x - ci * cellW;
+                if (localX < charW) {
+                    vec2 bp = vec2(localX, pos.y) / scale;
+                    float charCode = getFpChar(ci);
+                    float on = sampleChar(charCode, bp);
+                    if (on > 0.5) {
+                        float a   = 0.4;
+                        vec3  col = mix(vec3(0.945), vec3(0.0), uWatermarkHover);
+                        gl_FragColor = vec4(col * a, a) + gl_FragColor * (1.0 - a);
+                    }
+                }
+            }
+        }
     }
 }

package/src/blog/components/effect-layer/hooks/useFingerprintUniforms.ts

@@ -0,0 +1,57 @@
+import { useRef } from 'react';
+import { useFingerprint } from '@/hooks/use_fingerprint';
+
+export const useFingerprintUniforms = () => {
+  const { fingerprint, loading } = useFingerprint();
+
+  const charsRef = useRef<number[] | null>(null);
+  const appliedRef = useRef(false);
+
+  if (!loading && fingerprint && !charsRef.current) {
+    const hash = fingerprint.hash.slice(0, 16);
+    const chars = [...hash].map(c => parseInt(c, 16) || 0);
+    while (chars.length < 16) chars.push(0);
+    charsRef.current = chars;
+    console.log('[Fingerprint] Hash:', hash, 'Chars:', chars);
+  }
+
+  const updateFingerprintUniforms = (inst: any) => {
+    if (!inst?.uniforms || appliedRef.current || !charsRef.current) {
+      return;
+    }
+
+    const chars = charsRef.current;
+
+    // Mutate the existing arrays instead of replacing them
+    inst.uniforms.uFpChars1.value[0] = chars[0];
+    inst.uniforms.uFpChars1.value[1] = chars[1];
+    inst.uniforms.uFpChars1.value[2] = chars[2];
+    inst.uniforms.uFpChars1.value[3] = chars[3];
+
+    inst.uniforms.uFpChars2.value[0] = chars[4];
+    inst.uniforms.uFpChars2.value[1] = chars[5];
+    inst.uniforms.uFpChars2.value[2] = chars[6];
+    inst.uniforms.uFpChars2.value[3] = chars[7];
+
+    inst.uniforms.uFpChars3.value[0] = chars[8];
+    inst.uniforms.uFpChars3.value[1] = chars[9];
+    inst.uniforms.uFpChars3.value[2] = chars[10];
+    inst.uniforms.uFpChars3.value[3] = chars[11];
+
+    inst.uniforms.uFpChars4.value[0] = chars[12];
+    inst.uniforms.uFpChars4.value[1] = chars[13];
+    inst.uniforms.uFpChars4.value[2] = chars[14];
+    inst.uniforms.uFpChars4.value[3] = chars[15];
+
+    console.log('[Fingerprint] Uniforms set:', {
+      uFpChars1: inst.uniforms.uFpChars1.value,
+      uFpChars2: inst.uniforms.uFpChars2.value,
+      uFpChars3: inst.uniforms.uFpChars3.value,
+      uFpChars4: inst.uniforms.uFpChars4.value,
+    });
+
+    appliedRef.current = true;
+  };
+
+  return { updateFingerprintUniforms };
+};

package/src/blog/components/effect-layer/hooks/useRender.ts

@@ -2,6 +2,7 @@ import { useCallback, useContext, useRef } from 'react';
 import { useMousePosition } from '@/hooks/use_mouse_position';
 import { useResolution } from '@/components/effect-layer/hooks/useResolution';
 import { useWatermarkHover } from '@/components/effect-layer/hooks/useWatermarkHover';
+import { useFingerprintUniforms } from '@/components/effect-layer/hooks/useFingerprintUniforms';
 import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 
 const SPIRAL_ACCEL = 0.005;
@@ -22,6 +23,7 @@ export const useRender = () => {
   const wasLoadingRef = useRef(false);
 
   const { updateWatermarkHover } = useWatermarkHover();
+  const { updateFingerprintUniforms } = useFingerprintUniforms();
 
   const onRender = useCallback((inst: any) => {
     if (inst == null) {
@@ -71,6 +73,7 @@ export const useRender = () => {
     inst.uniforms.uSpiralProgress.value[0] += spiralSpeedRef.current;
 
     updateWatermarkHover(inst);
+    updateFingerprintUniforms(inst);
   }, []);
 
   return { onRender };

package/src/blog/components/effect-layer/hooks/useWatermarkHover.ts

@@ -9,8 +9,20 @@ const WM_CHAR_W = 4 * WM_SCALE; // 8
 const WM_CHAR_H = 5 * WM_SCALE; // 10
 const WM_GAP = 3;
 const WM_CELL_W = WM_CHAR_W + WM_GAP; // 11
+
+// Git hash line (bottom): 7 chars
 const WM_N_CHARS = 7;
 const WM_TOTAL_W = WM_N_CHARS * WM_CELL_W - WM_GAP; // 74
+
+// Fingerprint line (above): 16 chars
+const FP_N_CHARS = 16;
+const FP_TOTAL_W = FP_N_CHARS * WM_CELL_W - WM_GAP; // 173
+const LINE_GAP = 6; // vertical gap between lines
+
+// Combined bounds
+const MAX_W = Math.max(WM_TOTAL_W, FP_TOTAL_W);
+const TOTAL_H = WM_CHAR_H * 2 + LINE_GAP; // 26
+
 const WM_HOVER_PADDING = 4; // extra hit-area padding (px)
 const WM_HOVER_SPEED = 0.06; // ~0→1 in 17 frames (~280ms at 60fps)
 
@@ -26,11 +38,17 @@ export const useWatermarkHover = () => {
     // Convert clientY (top-down) to GL-style bottom-up for comparison
     const myFromBottom = viewportH - my;
 
+    // The fingerprint line is above the git hash line
+    // Git hash starts at WM_PAD_Y from bottom
+    // Fingerprint starts at WM_PAD_Y + WM_CHAR_H + LINE_GAP from bottom
+    const fpPadY = WM_PAD_Y + WM_CHAR_H + LINE_GAP;
+    const maxPadY = Math.max(WM_PAD_Y, fpPadY);
+
     const inWatermark =
       mx >= WM_PAD_X - WM_HOVER_PADDING &&
-      mx <= WM_PAD_X + WM_TOTAL_W + WM_HOVER_PADDING &&
+      mx <= WM_PAD_X + MAX_W + WM_HOVER_PADDING &&
       myFromBottom >= WM_PAD_Y - WM_HOVER_PADDING &&
-      myFromBottom <= WM_PAD_Y + WM_CHAR_H + WM_HOVER_PADDING;
+      myFromBottom <= maxPadY + WM_CHAR_H + WM_HOVER_PADDING;
 
     if (inWatermark) {
       hoverRef.current = Math.min(1, hoverRef.current + WM_HOVER_SPEED);

package/src/blog/components/effect-layer/uniforms.ts

@@ -38,6 +38,23 @@ export default {
     type: 'vec4',
     value: [hc[4] ?? 0, hc[5] ?? 0, hc[6] ?? 0, 0],
   },
+  // Fingerprint hash uniforms (16 characters, split into 4 vec4)
+  uFpChars1: {
+    type: 'vec4',
+    value: [0, 0, 0, 0],
+  },
+  uFpChars2: {
+    type: 'vec4',
+    value: [0, 0, 0, 0],
+  },
+  uFpChars3: {
+    type: 'vec4',
+    value: [0, 0, 0, 0],
+  },
+  uFpChars4: {
+    type: 'vec4',
+    value: [0, 0, 0, 0],
+  },
   uWatermarkHover: {
     type: 'float',
     value: [0.0],

package/src/blog/hooks/use_fingerprint.ts

@@ -0,0 +1,55 @@
+import { useEffect, useState, useCallback } from 'react';
+import { getFingerprint, getStableDeviceId, FingerprintData } from '@/utils/fingerprints';
+
+interface UseFingerprintReturn {
+  deviceId: string | null;
+  fingerprint: FingerprintData | null;
+  loading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+}
+
+export function useFingerprint(): UseFingerprintReturn {
+  const [state, setState] = useState<{
+    deviceId: string | null;
+    fingerprint: FingerprintData | null;
+    loading: boolean;
+    error: Error | null;
+  }>({
+    deviceId: null,
+    fingerprint: null,
+    loading: true,
+    error: null,
+  });
+
+  const refresh = useCallback(async () => {
+    setState(prev => ({ ...prev, loading: true, error: null }));
+    try {
+      const { id, fp } = await getStableDeviceId();
+      setState({
+        deviceId: id,
+        fingerprint: fp,
+        loading: false,
+        error: null,
+      });
+    } catch (err) {
+      setState(prev => ({
+        ...prev,
+        loading: false,
+        error: err instanceof Error ? err : new Error('Failed to get fingerprint'),
+      }));
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return {
+    deviceId: state.deviceId,
+    fingerprint: state.fingerprint,
+    loading: state.loading,
+    error: state.error,
+    refresh,
+  };
+}

package/src/blog/utils/fingerprints.ts

@@ -0,0 +1,345 @@
+/**
+ * 设备指纹采集器
+ * 基于浏览器静态特征生成稳定标识，用于匿名身份识别和反滥用
+ */
+export interface FingerprintData {
+  hash: string; // 主要指纹哈希
+  components: FingerprintComponents;
+  confidence: number; // 0-1 唯一性置信度
+  generatedAt: number;
+}
+
+export interface FingerprintComponents {
+  // 基础环境
+  userAgent: string;
+  language: string;
+  timezone: string;
+  platform: string;
+  cookieEnabled: boolean;
+
+  // 硬件特征
+  hardwareConcurrency: number;
+  deviceMemory?: number;
+  maxTouchPoints: number;
+
+  // 屏幕特征
+  screenResolution: string;
+  screenColorDepth: number;
+  pixelRatio: number;
+  viewportSize: string;
+
+  // 渲染特征（高熵值）
+  canvas: string;
+  webgl: WebGLInfo;
+  fonts: string[];
+
+  // 高级特征
+  audio?: string;
+  webdriver: boolean;
+}
+
+interface WebGLInfo {
+  vendor: string;
+  renderer: string;
+  version: string;
+  shadingLanguageVersion: string;
+  params: Record<string, string>;
+}
+
+// 稳定哈希函数（FNV-1a 64位变体）
+function fnv1a64(str: string): string {
+  let h1 = 0xdeadbeef,
+    h2 = 0x41c6ce57;
+  for (let i = 0; i < str.length; i++) {
+    const ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 0x01000193);
+    h2 = Math.imul(h2 ^ ch, 0x01000197);
+  }
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 0x85ebca6b);
+  h2 = Math.imul(h2 ^ (h2 >>> 13), 0xc2b2ae35);
+  return (h1 >>> 0).toString(16).padStart(8, '0') + (h2 >>> 0).toString(16).padStart(8, '0');
+}
+
+// Canvas 指纹（跨显卡渲染差异）
+function getCanvasFingerprint(): string {
+  try {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    if (!ctx) return 'no-2d-context';
+
+    canvas.width = 280;
+    canvas.height = 60;
+
+    // 背景渐变（测试颜色插值）
+    const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+    grad.addColorStop(0, '#f44336');
+    grad.addColorStop(0.5, '#2196f3');
+    grad.addColorStop(1, '#4caf50');
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // 复杂文本渲染（测试字体和抗锯齿）
+    ctx.textBaseline = 'alphabetic';
+    ctx.font = 'bold 20px "Arial", "Helvetica", sans-serif';
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.fillText('DeviceFingerprint 设备指纹', 10, 35);
+
+    // 几何图形（测试路径渲染）
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(240, 30, 15, 0, Math.PI * 2);
+    ctx.stroke();
+
+    // 像素级噪声（测试混合模式）
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.fillStyle = '#ff00ff';
+    ctx.fillRect(50, 10, 30, 40);
+
+    return canvas.toDataURL('image/png').slice(-64); // 取数据签名部分
+  } catch (e) {
+    return `error:${(e as Error).message}`;
+  }
+}
+
+// WebGL 指纹（显卡型号和驱动）
+function getWebGLInfo(): WebGLInfo {
+  const result: WebGLInfo = {
+    vendor: 'unknown',
+    renderer: 'unknown',
+    version: 'unknown',
+    shadingLanguageVersion: 'unknown',
+    params: {},
+  };
+
+  try {
+    const canvas = document.createElement('canvas');
+    const gl =
+      canvas.getContext('webgl') ||
+      (canvas.getContext('experimental-webgl') as WebGLRenderingContext | null);
+    if (!gl) return result;
+
+    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+    if (debugInfo) {
+      result.vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) || 'unknown';
+      result.renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) || 'unknown';
+    }
+
+    result.version = gl.getParameter(gl.VERSION) || 'unknown';
+    result.shadingLanguageVersion = gl.getParameter(gl.SHADING_LANGUAGE_VERSION) || 'unknown';
+
+    // 采集关键参数
+    const params = [
+      'MAX_TEXTURE_SIZE',
+      'MAX_VIEWPORT_DIMS',
+      'MAX_VERTEX_ATTRIBS',
+      'MAX_VERTEX_UNIFORM_VECTORS',
+      'MAX_FRAGMENT_UNIFORM_VECTORS',
+      'MAX_TEXTURE_IMAGE_UNITS',
+      'MAX_VERTEX_TEXTURE_IMAGE_UNITS',
+      'ALIASED_LINE_WIDTH_RANGE',
+      'ALIASED_POINT_SIZE_RANGE',
+    ];
+
+    params.forEach(p => {
+      try {
+        const val = gl.getParameter((gl as any)[p]);
+        result.params[p] = Array.isArray(val) ? val.join(',') : String(val);
+      } catch {
+        result.params[p] = 'unsupported';
+      }
+    });
+  } catch (e) {
+    result.vendor = `error:${(e as Error).message}`;
+  }
+
+  return result;
+}
+
+// 字体枚举（系统字体差异）
+function getFontList(): string[] {
+  const baseFonts = ['monospace', 'sans-serif', 'serif', 'Arial'];
+  const testFonts = [
+    'Arial',
+    'Times New Roman',
+    'Courier New',
+    'Georgia',
+    'Verdana',
+    'Helvetica',
+    'Tahoma',
+    'Trebuchet MS',
+    'Palatino',
+    'Garamond',
+    'Bookman',
+    'Comic Sans MS',
+    'Impact',
+    'Gill Sans',
+    'Candara',
+    'Optima',
+    'Geneva',
+    'Segoe UI',
+    'Roboto',
+    'Helvetica Neue',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'PingFang SC',
+    'Microsoft YaHei',
+    'WenQuanYi Micro Hei',
+    'Noto Sans CJK SC',
+    'Source Han Sans SC',
+  ];
+
+  const testString = 'mmmmmmmmlliWWWwwwwww';
+  const testSize = '72px';
+  const detected: string[] = [];
+
+  const span = document.createElement('span');
+  span.style.cssText = `position:absolute;left:-9999px;font-size:${testSize};line-height:normal;`;
+  span.textContent = testString;
+  document.body.appendChild(span);
+
+  const defaultWidths: Record<string, number> = {};
+  baseFonts.forEach(base => {
+    span.style.fontFamily = base;
+    defaultWidths[base] = span.offsetWidth;
+  });
+
+  testFonts.forEach(font => {
+    baseFonts.forEach(base => {
+      span.style.fontFamily = `"${font}",${base}`;
+      if (span.offsetWidth !== defaultWidths[base] && !detected.includes(font)) {
+        detected.push(font);
+      }
+    });
+  });
+
+  document.body.removeChild(span);
+  return detected.sort();
+}
+
+// 音频指纹（频率响应差异）
+async function getAudioFingerprint(): Promise<string | undefined> {
+  try {
+    const AudioContext = window.OfflineAudioContext || (window as any).webkitOfflineAudioContext;
+    if (!AudioContext) return undefined;
+
+    const ctx = new AudioContext(1, 44100, 44100);
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    const compressor = ctx.createDynamicsCompressor();
+
+    osc.type = 'triangle';
+    osc.frequency.value = 1000;
+
+    // 压缩器配置
+    compressor.threshold.value = -50;
+    compressor.knee.value = 40;
+    compressor.ratio.value = 12;
+    compressor.attack.value = 0;
+    compressor.release.value = 0.25;
+
+    osc.connect(compressor);
+    compressor.connect(gain);
+    gain.connect(ctx.destination);
+
+    osc.start(0);
+    gain.gain.setValueAtTime(0, 0);
+    gain.gain.linearRampToValueAtTime(1, 0.01);
+    gain.gain.exponentialRampToValueAtTime(0.001, 0.5);
+    osc.stop(0.5);
+
+    const buffer = await ctx.startRendering();
+    const channel = buffer.getChannelData(0);
+
+    // 取特征片段哈希
+    let hash = 0;
+    for (let i = 4500; i < 4600; i++) {
+      hash = Math.imul(hash ^ Math.round(channel[i] * 10000), 0x5bd1e995);
+    }
+    return hash.toString(16);
+  } catch {
+    return undefined;
+  }
+}
+
+// 主采集函数
+export async function getFingerprint(): Promise<FingerprintData> {
+  const components: Partial<FingerprintComponents> = {
+    userAgent: navigator.userAgent,
+    language: navigator.language,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    platform: navigator.platform,
+    cookieEnabled: navigator.cookieEnabled,
+    hardwareConcurrency: navigator.hardwareConcurrency || 0,
+    deviceMemory: (navigator as any).deviceMemory,
+    maxTouchPoints: navigator.maxTouchPoints || 0,
+    screenResolution: `${screen.width}x${screen.height}`,
+    screenColorDepth: screen.colorDepth,
+    pixelRatio: window.devicePixelRatio,
+    viewportSize: `${window.innerWidth}x${window.innerHeight}`,
+    webdriver: navigator.webdriver || false,
+  };
+
+  // 同步特征
+  components.canvas = getCanvasFingerprint();
+  components.webgl = getWebGLInfo();
+  components.fonts = getFontList();
+
+  // 异步特征（音频）
+  components.audio = await getAudioFingerprint();
+
+  // 计算熵值并哈希
+  const hashStr = JSON.stringify(components, Object.keys(components).sort());
+  const hash = fnv1a64(hashStr);
+
+  // 置信度计算（特征丰富度）
+  let confidence = 0.5;
+  if (components.webgl.renderer !== 'unknown') confidence += 0.2;
+  if (components.audio) confidence += 0.15;
+  if (components.fonts.length > 10) confidence += 0.1;
+  if (components.hardwareConcurrency! > 0) confidence += 0.05;
+
+  return {
+    hash,
+    components: components as FingerprintComponents,
+    confidence: Math.min(confidence, 0.99),
+    generatedAt: Date.now(),
+  };
+}
+
+// 稳定设备 ID（结合指纹与存储）
+export async function getStableDeviceId(): Promise<{ id: string; fp: FingerprintData }> {
+  const STORAGE_KEY = '__anon_device_id__';
+
+  // 尝试读取已存储
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored) {
+    try {
+      const parsed = JSON.parse(stored);
+      // 30天内有效且同一浏览器（简单UA匹配）
+      if (
+        Date.now() - parsed.ts < 30 * 86400 * 1000 &&
+        parsed.ua === navigator.userAgent.slice(0, 50)
+      ) {
+        return { id: parsed.id, fp: await getFingerprint() };
+      }
+    } catch {
+      /* 解析失败则重新生成 */
+    }
+  }
+
+  // 生成新ID
+  const fp = await getFingerprint();
+  const id = `dev_${fp.hash.slice(0, 16)}_${Date.now().toString(36)}`;
+
+  localStorage.setItem(
+    STORAGE_KEY,
+    JSON.stringify({
+      id,
+      ts: Date.now(),
+      ua: navigator.userAgent.slice(0, 50),
+    })
+  );
+
+  return { id, fp };
+}