2.2 KiB
2.2 KiB
1. Quick visual fixes (no component extraction needed)
- 1.1 Add
tbody tr:hoverbackground rule tostyle.cssfor.detail-tableand.pareto-table - 1.2 Localize pagination: change "Prev" → "上一頁", "Next" → "下一頁", "Page X / Y · Total Z" → "第 X / Y 頁 · 共 Z 筆"
- 1.3 Add loading overlay + spinner after
.dashboarddiv (<div v-if="loading.initial" class="loading-overlay">) - 1.4 Add "重新整理" button in header-right area, wired to
applyFilters - 1.5 Remove duplicated MultiSelect CSS (~120 lines of
.multi-select-*rules) fromstyle.css; verify MultiSelect still renders correctly
2. Extract sub-components from App.vue
- 2.1 Create
components/FilterPanel.vue— extract filter grid, checkbox row, action buttons, and active-filter chips section; props:filters,options,loading,activeFilterChips; emits:apply,clear,remove-chip,export-csv,pareto-scope-toggle - 2.2 Create
components/SummaryCards.vue— extract.summary-rowsection; props:cards - 2.3 Create
components/TrendChart.vue— extract trend chart.cardsection with ECharts registration and chart option computed internally; props:items,loading - 2.4 Create
components/ParetoSection.vue— extract pareto chart + table.cardsection with ECharts registration and chart option computed internally; props:items,detailReason,loading; emits:reason-click - 2.5 Create
components/DetailTable.vue— extract detail table + pagination; props:items,pagination,loading; emits:go-to-page
3. Rewire App.vue as orchestrator
- 3.1 Replace inline template sections with sub-component tags, passing props and wiring emits
- 3.2 Move ECharts
use()registration and chart computed properties into their respective chart components - 3.3 Verify all interactions work: filter apply/clear, pareto click → detail filter, pagination, CSV export, refresh button
4. Verify and build
- 4.1 Run
vite buildand confirm no compilation errors - 4.2 Visually verify: loading overlay, table hover, Chinese pagination, refresh button, pareto interaction, filter chips