Birdor 商业计划书第三十二章：前端工具页架构

// 统一错误模型
interface ToolError {
  code: string;           // 错误码，如 "invalid_json", "jwt_malformed"
  severity: 'error' | 'warning' | 'info';
  title: string;          // 简短标题
  message: string;        // 详细说明
  location?: {            // 错误位置（代码类工具）
    line: number;
    column: number;
    length?: number;
  };
  suggestion?: string;    // 修复建议
  canFixWithAI?: boolean; // 是否可用 AI 修复
  docLink?: string;       // 相关文档链接
}

<!-- 工具页结构化数据示例 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "JSON Formatter",
  "description": "Format and validate JSON online",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  }
}
</script>

// 工具页配置示例
const toolConfig = {
  id: 'json-formatter',
  slug: 'json-formatter',
  title: 'JSON Formatter',
  description: 'Format and validate JSON online',
  category: 'data-format',
  inputType: 'code-editor',
  outputType: 'json-tree',
  languages: ['json'],
  features: ['format', 'validate', 'minify', 'beautify'],
  aiEnabled: true,
  apiEnabled: true,
  examples: [
    { name: 'Simple Object', input: '{"a":1}' },
    { name: 'Nested Array', input: '[{"name":"test"}]' },
    { name: 'Invalid JSON', input: '{a:1}', isError: true }
  ],
  relatedTools: ['json-to-yaml', 'json-to-typescript', 'json-schema-generator'],
  privacy: 'local-processing',
  seo: {
    keywords: ['JSON formatter', 'JSON validator', 'format JSON'],
    faq: [
      { q: 'What is JSON formatter?', a: '...' }
    ]
  }
};

# Lighthouse CI 配置示例
# .lighthouserc.json
{
  "ci": {
    "collect": {
      "url": ["https://birdor.com/tools/json-formatter"],
      "numberOfRuns": 3
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "first-contentful-paint": ["error", { "maxNumericValue": 1200 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
      }
    }
  }
}

{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Birdor JSON Formatter",
  "description": "Format, validate and beautify JSON online with syntax highlighting",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "featureList": [
    "JSON syntax highlighting",
    "Real-time validation",
    "Minify and beautify",
    "Error location marking",
    "API access"
  ],
  "screenshot": {
    "@type": "ImageObject",
    "url": "https://birdor.com/images/json-formatter-screenshot.png"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "1250"
  }
}

<!-- 工具页 metadata 应由配置自动生成 -->
<title>JSON Formatter - Format and Validate JSON Online | Birdor</title>
<meta name="description" content="Format, validate and beautify JSON online...">
<meta name="keywords" content="json formatter, json validator, format json, json beautifier">
<link rel="canonical" href="https://birdor.com/tools/json-formatter">
<meta property="og:title" content="JSON Formatter - Birdor">
<meta property="og:description" content="Format and validate JSON online...">
<meta property="og:type" content="website">
<meta property="og:url" content="https://birdor.com/tools/json-formatter">
<meta property="og:image" content="https://birdor.com/og/json-formatter.png">
<meta name="twitter:card" content="summary_large_image">

// 全局状态（用户级别）
interface UserState {
  isLoggedIn: boolean;
  plan: 'free' | 'pro' | 'pro+';
  aiCreditsRemaining: number;
  apiQuota: number;
}

// 工具级别状态
interface ToolState {
  input: string;
  output: string;
  error: ToolError | null;
  isProcessing: boolean;
  history: string[];
  settings: ToolSettings;
}

// 临时 UI 状态（不需要持久化）
interface UIState {
  activePanel: 'input' | 'output' | 'settings';
  showExamples: boolean;
  sidebarCollapsed: boolean;
}

# 定期扫描依赖漏洞
npm audit
# 或者使用更专业的工具
npx better-npm-audit audit

interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: {
    code: string;
    message: string;
    details?: unknown;
  };
  meta?: {
    requestId: string;
    processingTime: number; // ms
    aiCreditsUsed?: number;
  };
}