SEC 10-K 標注工具

結構化 Web 介面，讓審查者能依照四步驟流程對 SEC 10-K 抽取結果進行人工標注，加速 SEC-10-K-Structured-Extraction 項目優化

---

1. 功能概覽

功能	說明
Dashboard 總覽	一覽所有 filing 完成狀況，依 filer type / 狀態 / ticker 篩選，顯示各類別統計卡片
四步驟引導標注	Step 0 Coverage → Step 1 Item 邊界 → Step 2 Status 確認 → Step 3 Item 8 數字核對
雙欄文件檢視	左欄 Markdown 渲染（fulltext / 摘要 / JSON），右欄標注操作區，點擊 Item 自動跳至對應段落
邊緣案例提示	依申報年份自動套用 SEC 規則（如 Item 6 reserved、Item 9C not_applicable），顯示警示 Alert
一鍵匯出 CSV	僅匯出已完成（done）紀錄，欄位包含 ticker、year、accession、各步驟結果與備註
SEC EDGAR 直連	一鍵在新分頁開啟對應 filing 的 EDGAR 索引頁，方便核對原始文件

匯出格式

ticker,year,accession,boundary_ok,status_ok,item8_ok,notes
AAPL,2024,0001193125-24-123456,✅,✅,✅,
WSTL,2021,0001193125-21-654321,❌,✅,N/A,Item 7 吃到 Item 8 開頭約 200 字

---

2. 專案架構

SEC-10-K-Annotation-Tool/
├── doc/
│   └── frontend_design.md      # 前端設計文件
├── assets/
└── frontend/                   # Vue 3 前端應用
    ├── public/
    │   └── eval_results/       # symlink 至上層 eval_results/
    └── src/
        ├── views/
        │   ├── DashboardView.vue   # 總覽頁
        │   ├── ReviewView.vue      # 主標注頁
        │   └── ResultsView.vue     # 結果匯總頁
        ├── components/
        │   ├── AppHeader.vue       # 頂部進度條 + 匯出按鈕
        │   ├── StatusBadge.vue     # Item status 標籤
        │   └── review/             # 標注頁子組件
        │       ├── StepCoverage.vue
        │       ├── StepBoundary.vue
        │       ├── StepStatus.vue
        │       ├── StepItem8.vue
        │       ├── DocumentViewer.vue
        │       └── ReviewStepper.vue
        ├── composables/
        │   ├── useFilingManifest.ts    # Vite glob 掃描所有 filing
        │   ├── useFilingFiles.ts       # fetch JSON / MD 文件內容
        │   ├── useSecEdgarUrl.ts       # 組構 EDGAR URL
        │   ├── useEdgeCaseRules.ts     # SEC 規則邊緣案例判斷
        │   ├── useExpectedItems.ts     # 各 filer type 預期 Item 清單
        │   └── useKeyboardShortcuts.ts # 鍵盤快捷鍵
        ├── stores/
        │   └── annotations.ts      # Pinia store（標注資料 + localStorage 持久化）
        ├── lib/
        │   ├── csv.ts              # CSV 序列化
        │   ├── backup.ts           # 備份工具
        │   └── filer.ts            # Filer type 工具函式
        ├── types/
        │   └── filing.ts           # TypeScript 型別定義
        └── router/
            └── index.ts            # Vue Router 路由設定

頁面路由

路徑	頁面	說明
/	DashboardView	Filing 清單總覽
/review/:accession	ReviewView	單份 filing 標注
/review/:accession?step=2	ReviewView	直接跳至指定步驟
/results	ResultsView	結果統計與匯出

---

3. 技術選型

層級	選型	說明
框架	Vue 3 (Composition API + <script setup>)	現代響應式前端框架
建構工具	Vite 8	靜態資源伺服，import.meta.glob 掃描 filing 清單
UI 組件庫	shadcn-vue (reka-ui) + Tailwind CSS v4	CSS-first，無需 tailwind.config.js
路由	Vue Router 5	SPA 路由管理
狀態管理	Pinia + pinia-plugin-persistedstate	標注進度自動持久化至 localStorage
Markdown 渲染	markdown-it	渲染 fulltext.md 與摘要 MD
圖示	lucide-vue-next	統一圖示庫
型別檢查	TypeScript + vue-tsc	全專案型別安全
Lint / Format	oxlint + ESLint + Prettier	程式碼品質工具鏈

---

4. 快速開始

環境需求

• Node.js ^20.19.0 或 >=22.12.0
• npm

安裝與啟動

# 1. 進入前端目錄
cd frontend

# 2. 安裝相依套件
npm install

# 3. 啟動開發伺服器
npm run dev

開啟瀏覽器訪問 http://localhost:5173。

資料掛載

將標註資料放置於 frontend/public/eval_results/ 目錄下。

建構正式版本

# 型別檢查 + 建構
npm run build

# 本地預覽建構結果
npm run preview