3162 lines
205 KiB
Plaintext
3162 lines
205 KiB
Plaintext
|
wpc ?2 §webpack/lib/cache/PackFileCacheStrategy�PackContentItems € v ResolverCachePlugin|normal|default|alias=[|server-only$=|next/dist/compiled/server-only/index|client-only$=|next/dist/compiled/client-only/index|next/dist/compiled/client-only$=|next/dist/compiled/client-only/index|next/dist/compiled/server-only=|next/dist/compiled/server-only/index|]|dependencyType=|esm|path=|/opt/accountbook/frontend|request=|private-next-pages/stats.js » Compilation/modules|/opt/accountbook/frontend/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[6].oneOf[3].use[0]!/opt/accountbook/frontend/pages/stats.js à FlagDependencyExportsPlugin|/opt/accountbook/frontend/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[6].oneOf[3].use[0]!/opt/accountbook/frontend/pages/stats.js Ò Compilation/codeGeneration|/opt/accountbook/frontend/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[6].oneOf[3].use[0]!/opt/accountbook/frontend/pages/stats.js|webpack-runtime›Compilation/assets|chunk368¥TerserWebpackPlugin|../pages/stats.js¥webpack/lib/cache/ResolverCachePlugin€€`�_ResolverCachePluginCacheMiss‡context„path‡request…queryˆfragment†module‰directory„fileˆinternalŽfullySpecified“descriptionFilePath“descriptionFileData“descriptionFileRootŒrelativePath †issuer‹issuerLayerˆcompiler€†server¨/opt/accountbook/frontend/pages/stats.js€€ ¦/opt/accountbook/frontend/package.json„name‡version‡private‡scriptsŒdependencies”accountbook-frontend…1.0.0 ƒdev…build…start�next dev -p 3500Šnext build’next start -p 3500ˆchart.js„next…react‰react-dom†^4.5.1‡^14.0.0‡^18.2.0ÿ™/opt/accountbook/frontend�./pages/stats.jsšwebpack/lib/FileSystemInfoˆSnapshot@‰ `ÆÂÍyBáŸ/opt/accountbook/frontend/pagesˆsafeTime‰timestamp„hash! p§ÂÍyB `§ÂÍyB�50c72b83a5e3839eý Ë`
|
|||
|
|
Å/opt/accountbook/frontend/opt/accountbook/frontend/pages/package.json¿/opt/accountbook/frontend/opt/accountbook/frontend/package.json¶/opt/accountbook/frontend/opt/accountbook/package.jsonª/opt/accountbook/frontend/opt/package.jsonÁ/opt/accountbook/frontend/opt/accountbook/frontend/pages/stats.jsÄ/opt/accountbook/frontend/opt/accountbook/frontend/pages/stats.js.jsÅ/opt/accountbook/frontend/opt/accountbook/frontend/pages/stats.js.mjsÅ/opt/accountbook/frontend/opt/accountbook/frontend/pages/stats.js.tsxÄ/opt/accountbook/frontend/opt/accountbook/frontend/pages/stats.js.tsÅ/opt/accountbook/frontend/opt/accountbook/frontend/pages/stats.js.jsxÆ/opt/accountbook/frontend/opt/accountbook/frontend/pages/stats.js.jsonÆ/opt/accountbook/frontend/opt/accountbook/frontend/pages/stats.js.wasm¬/opt/accountbook/frontend/pages/package.json† € ÁÂÍyBËæ�/opt/accountbook„/opt�/ë! @07ØÊyB /7ØÊyB�f3b4def2c53d3cadé ·è ¶ç µæ ´˜webpack/lib/NormalModule«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource Ó* import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|||
|
|
import { useState, useEffect, useRef } from "react";
|
|||
|
|
import { useRouter } from "next/router";
|
|||
|
|
import { isLoggedIn, getTrendStats, getCategoryStats } from "../lib/api";
|
|||
|
|
import { Chart, registerables } from "chart.js";
|
|||
|
|
import AppShell from "../components/AppShell";
|
|||
|
|
import { Icon } from "../components/icons";
|
|||
|
|
import { useToast } from "../components/ToastProvider";
|
|||
|
|
Chart.register(...registerables);
|
|||
|
|
export default function Stats() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const { showToast } = useToast();
|
|||
|
|
const [period, setPeriod] = useState("month");
|
|||
|
|
const [currentMonth, setCurrentMonth] = useState(new Date());
|
|||
|
|
const [trendData, setTrendData] = useState([]);
|
|||
|
|
const [categoryData, setCategoryData] = useState([]);
|
|||
|
|
const [categoryType, setCategoryType] = useState("expense");
|
|||
|
|
const [trendLoading, setTrendLoading] = useState(true);
|
|||
|
|
const [categoryLoading, setCategoryLoading] = useState(true);
|
|||
|
|
const trendChartRef = useRef(null);
|
|||
|
|
const categoryChartRef = useRef(null);
|
|||
|
|
const trendChartInstance = useRef(null);
|
|||
|
|
const categoryChartInstance = useRef(null);
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const getMonthStr = (date)=>`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
|
|||
|
|
const formatMonth = (date)=>`${date.getFullYear()}年${date.getMonth() + 1}月`;
|
|||
|
|
const loadTrendData = async ()=>{
|
|||
|
|
setTrendLoading(true);
|
|||
|
|
try {
|
|||
|
|
const trend = await getTrendStats(period, getMonthStr(currentMonth));
|
|||
|
|
setTrendData(trend);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setTrendLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const loadCategoryData = async ()=>{
|
|||
|
|
setCategoryLoading(true);
|
|||
|
|
try {
|
|||
|
|
const category = await getCategoryStats(getMonthStr(currentMonth), categoryType);
|
|||
|
|
setCategoryData(category);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setCategoryLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const prevMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() - 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const nextMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() + 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const totalCategoryAmount = categoryData.reduce((sum, item)=>sum + item.total, 0);
|
|||
|
|
const headerContent = /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "header-center-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-spacer"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "month-switcher-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "上个月",
|
|||
|
|
onClick: prevMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronLeft",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "month-switcher__label",
|
|||
|
|
children: formatMonth(currentMonth)
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "下个月",
|
|||
|
|
onClick: nextMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronRight",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-right-actions",
|
|||
|
|
children: /*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "设置",
|
|||
|
|
onClick: ()=>router.push("/settings"),
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "settings",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
return /*#__PURE__*/ _jsxs(AppShell, {
|
|||
|
|
headerContent: headerContent,
|
|||
|
|
compactHeader: true,
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("p", {
|
|||
|
|
className: "eyebrow",
|
|||
|
|
children: "趋势"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "收支趋势"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "period-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "week" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("week"),
|
|||
|
|
children: "周"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "month" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("month"),
|
|||
|
|
children: "月"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "year" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("year"),
|
|||
|
|
children: "å¹´"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "chart-container chart-container--large chart-container--stats",
|
|||
|
|
children: trendLoading ? /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "loading-state",
|
|||
|
|
children: "åŠ è½½ä¸..."
|
|||
|
|
}) : /*#__PURE__*/ _jsx("canvas", {
|
|||
|
|
ref: trendChartRef
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
children: /*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "分类明细"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "category-type-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "expense" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("expense"),
|
|||
|
|
children: "支出"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "income" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("income"),
|
|||
|
|
children: "收入"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "category-breakdown category-breakdown--stats",
|
|||
|
|
children: categoryData.length > 0 ? categoryData.map((cat, index)=>{
|
|||
|
|
const percent = totalCategoryAmount ? (cat.total / totalCategoryAmount * 100).toFixed(1) : "0.0";
|
|||
|
|
return /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-item",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-header",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-name",
|
|||
|
|
children: cat.category
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-amount",
|
|||
|
|
children: cat.total.toFixed(2)
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar-wrap",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar",
|
|||
|
|
style: {
|
|||
|
|
width: `${percent}%`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}, index);
|
|||
|
|
}) : /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "empty-state empty-state--inline",
|
|||
|
|
children: "æš‚æ— æ•°æ�®"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
‹exportsType‰namespace
|
|||
|
|
�javascript/auto`Õ…alias©Œserver-only$Œclient-only$Ÿnext/dist/compiled/client-only$žnext/dist/compiled/server-only¤next/dist/compiled/server-only/index¤next/dist/compiled/client-only/indexÿþ
|
|||
|
|
|
|||
|
|
|
|||
|
|
ò`‰cacheable†parsed�fileDependencies“contextDependencies“missingDependencies‘buildDependencies‘valueDependenciesƆassetsŠassetsInfo†strict�exportsArgument”topLevelDeclarationsˆsnapshot ˜webpack/lib/util/LazySetÙ/opt/accountbook/frontend/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js ™webpack/DefinePlugin_hashˆ3b076c43�7553bd8774322c69 “__webpack_exports__‰*default*…Stats °·ÂÍyB “¸
|
|||
|
|
·webpack/lib/dependencies/HarmonyCompatibilityDependency
|
|||
|
|
dÿ ÿ ý¨webpack/lib/dependencies/ConstDependency€ `?
|
|||
|
|
|
|||
|
|
`?€a@t
|
|||
|
|
|
|||
|
|
`4€`u@�
|
|||
|
|
|
|||
|
|
`(€Až ç
|
|||
|
|
|
|||
|
|
`I€Aè
|
|||
|
|
|
|||
|
|
`0€A G
|
|||
|
|
|
|||
|
|
`.€AH s
|
|||
|
|
|
|||
|
|
`+€At «
|
|||
|
|
|
|||
|
|
`7¶webpack/lib/dependencies/HarmonyExportHeaderDependency AÝ Ž* AÎ Ž*
|
|||
|
|
@ò `Eºwebpack/lib/dependencies/HarmonyImportSideEffectDependency‘react/jsx-runtimeÿ
|
|||
|
|
|
|||
|
|
`?��
|
|||
|
|
|
|||
|
|
`4‹next/routerÿ
|
|||
|
|
|
|||
|
|
`(Š../lib/apiÿ
|
|||
|
|
|
|||
|
|
`I††
|
|||
|
|
|
|||
|
|
`0–../components/AppShellÿ
|
|||
|
|
|
|||
|
|
`.“../components/iconsÿ
|
|||
|
|
|
|||
|
|
`+›../components/ToastProviderÿ
|
|||
|
|
|
|||
|
|
`7¹webpack/lib/dependencies/HarmonyImportSpecifierDependencya …Chartˆregisterý A¬ º A¬ ±
|
|||
|
|
yÿÿÿyÿÿÿý
|
|||
|
|
|
|||
|
|
` �registerablesþ A¾ Ë ttÿÿÿtÿÿÿþ
|
|||
|
|
|
|||
|
|
b ¹webpack/lib/dependencies/HarmonyExportSpecifierDependency`̇default
|
|||
|
|
@ò ‰useRouterþ A
|
|||
|
|
úââý
|
|||
|
|
|
|||
|
|
c ˆuseToastþ A* 2 úææþ
|
|||
|
|
|
|||
|
|
c " ˆuseStateþ AV ^ õdÿÿÿdÿÿÿþ
|
|||
|
|
|
|||
|
|
c
|
|||
|
|
|
|||
|
|
( ûú A• � ñ`ÿÿÿ`ÿÿÿþ
|
|||
|
|
|
|||
|
|
c,4 ÷ö AÑ Ù í\ÿÿÿ\ÿÿÿþ
|
|||
|
|
|
|||
|
|
c&. óò A éXÿÿÿXÿÿÿþ
|
|||
|
|
|
|||
|
|
c,4 ïî AE M åTÿÿÿTÿÿÿþ
|
|||
|
|
|
|||
|
|
c,4 ëê A† Ž áPÿÿÿPÿÿÿþ
|
|||
|
|
|
|||
|
|
c,4 çæ AÈ Ð ÝLÿÿÿLÿÿÿþ
|
|||
|
|
|
|||
|
|
c2: †useRefþ Aò ø ØGÿÿÿGÿÿÿþ
|
|||
|
|
|
|||
|
|
c ûú A # ÔCÿÿÿCÿÿÿþ
|
|||
|
|
|
|||
|
|
c # ÷ö AJ P Ð?ÿÿÿ?ÿÿÿþ
|
|||
|
|
|
|||
|
|
c % óò Az € Ì;ÿÿÿ;ÿÿÿþ
|
|||
|
|
|
|||
|
|
c"( �getTrendStatsþ AÉ Ö Ç¬¬þ
|
|||
|
|
|
|||
|
|
c - �getCategoryStatsþ Ak { §§þ
|
|||
|
|
|
|||
|
|
c-#-3 „jsxs…_jsxs A„
|
|||
|
|
‰
|
|||
|
|
¼œœþ
|
|||
|
|
|
|||
|
|
cE(E- ƒjsx„_jsx Aï
|
|||
|
|
ó
|
|||
|
|
4¶––þ
|
|||
|
|
|
|||
|
|
cHH ôõ AR W ²’’þ
|
|||
|
|
|
|||
|
|
cKK ÷ø AÖ Ú 4¯��þ
|
|||
|
|
|
|||
|
|
cN"N&ôõ AÊ Î 4¬ŒŒþ
|
|||
|
|
|
|||
|
|
cS0S4 „Iconþ AÏ Ó 4§‘‘þ
|
|||
|
|
|
|||
|
|
cS5S9ìí A‚
|
|||
|
|
†
|
|||
|
|
4¤„„þ
|
|||
|
|
|
|||
|
|
cX"X&éê AC G 4¡��þ
|
|||
|
|
|
|||
|
|
c\"\&æç A7 ; 4ž~ÿÿÿ~ÿÿÿþ
|
|||
|
|
|
|||
|
|
ca0a4óò A< @ 4›……þ
|
|||
|
|
|
|||
|
|
ca5a9àá A
|
|||
|
|
4˜xÿÿÿxÿÿÿþ
|
|||
|
|
|
|||
|
|
chh ÝÞ Ar v 4•uÿÿÿuÿÿÿþ
|
|||
|
|
|
|||
|
|
cj(j,ÚÛ Ad h 4’rÿÿÿrÿÿÿþ
|
|||
|
|
|
|||
|
|
co,o0çæ Ai m 4�yÿÿÿyÿÿÿþ
|
|||
|
|
|
|||
|
|
co1o5 ÍÎ A % ‹kÿÿÿkÿÿÿþ
|
|||
|
|
|
|||
|
|
cww „ˆAppShell A& . 4†nÿÿÿnÿÿÿþ
|
|||
|
|
|
|||
|
|
cw w' ÄÅ A£ ¨ ‚bÿÿÿbÿÿÿþ
|
|||
|
|
|
|||
|
|
c{{ ÇÈ A8 < 4ÿÿÿ_ÿÿÿ_ÿÿÿþ
|
|||
|
|
|
|||
|
|
c~"~& ½¾ AÅ Ê {ÿÿÿ[ÿÿÿ[ÿÿÿþ
|
|||
|
|
|
|||
|
|
@€ `0@€ `5ÀÁ A* . 4xÿÿÿXÿÿÿXÿÿÿþ
|
|||
|
|
|
|||
|
|
@‚ `.@‚ `2½¾ Aõ ù 4uÿÿÿUÿÿÿUÿÿÿþ
|
|||
|
|
|
|||
|
|
@† `.@† `2 ³´ AÍ Ò qÿÿÿQÿÿÿQÿÿÿþ
|
|||
|
|
|
|||
|
|
@Œ `"@Œ `'¶· A\ ` 4nÿÿÿNÿÿÿNÿÿÿþ
|
|||
|
|
|
|||
|
|
@� `*@� `.³´ A£ § 4kÿÿÿKÿÿÿKÿÿÿþ
|
|||
|
|
|
|||
|
|
@• `*@• `.°± Aì ð 4hÿÿÿHÿÿÿHÿÿÿþ
|
|||
|
|
|
|||
|
|
@› `*@› `.® A\ ` 4eÿÿÿEÿÿÿEÿÿÿþ
|
|||
|
|
|
|||
|
|
@£ `"@£ `&ª« A
|
|||
|
|
4bÿÿÿBÿÿÿBÿÿÿþ
|
|||
|
|
|
|||
|
|
@¥ `?@¥ `C§¨ A ± 4_ÿÿÿ?ÿÿÿ?ÿÿÿþ
|
|||
|
|
|
|||
|
|
@¨ `+@¨ `/ �ž A[ ` [ÿÿÿ;ÿÿÿ;ÿÿÿþ
|
|||
|
|
|
|||
|
|
@® `@® ` ¡ Að ô 4Xÿÿÿ8ÿÿÿ8ÿÿÿþ
|
|||
|
|
|
|||
|
|
@± `"@± `&�ž A} � 4Uÿÿÿ5ÿÿÿ5ÿÿÿþ
|
|||
|
|
|
|||
|
|
@³ `0@³ `4š› A¿ Ã 4Rÿÿÿ2ÿÿÿ2ÿÿÿþ
|
|||
|
|
|
|||
|
|
@´ `4@´ `8 �‘ Aq v Nÿÿÿ.ÿÿÿ.ÿÿÿþ
|
|||
|
|
|
|||
|
|
@¹ `"@¹ `'“” A 4Kÿÿÿ+ÿÿÿ+ÿÿÿþ
|
|||
|
|
|
|||
|
|
@¼ `*@¼ `.�‘ Aa e 4Hÿÿÿ(ÿÿÿ(ÿÿÿþ
|
|||
|
|
|
|||
|
|
@ `*@ `.�Ž Aâ! æ! 4Eÿÿÿ%ÿÿÿ%ÿÿÿþ
|
|||
|
|
|
|||
|
|
@Ê `"@Ê `& ƒ„ AO# T# Aÿÿÿ!ÿÿÿ!ÿÿÿþ
|
|||
|
|
|
|||
|
|
@Î `1@Î `6 ÿÿÿ€ Aþ# $ =ÿÿÿ ÿÿÿ ÿÿÿþ
|
|||
|
|
|
|||
|
|
@Ñ `2@Ñ `7‚ƒ AÇ$ Ë$ 4:ÿÿÿÿÿÿÿÿÿþ
|
|||
|
|
|
|||
|
|
@Ô `:@Ô `>ÿÿÿ€ AÙ% Ý% 47ÿÿÿÿÿÿÿÿÿþ
|
|||
|
|
|
|||
|
|
@Ø `:@Ø `>|ÿÿÿ}ÿÿÿ A>' B' 44ÿÿÿÿÿÿÿÿÿþ
|
|||
|
|
|
|||
|
|
@Þ `2@Þ `6yÿÿÿzÿÿÿ AÚ' Þ' 41ÿÿÿÿÿÿÿÿÿþ
|
|||
|
|
|
|||
|
|
@à `@@à `Dvÿÿÿwÿÿÿ A£) §) 4.ÿÿÿÿÿÿÿÿÿþ
|
|||
|
|
|
|||
|
|
@é `+@é `/ —webpack/lib/ModuleGraph“RestoreProvidedData
|
|||
|
|
|
|||
|
|
‡þÿÿˆprovided�canMangleProvide�terminalBinding‹exportsInfo ÿÿÿ
|
|||
|
|
|
|||
|
|
‡sources“runtimeRequirements„dataŠjavascript«webpack/lib/util/registerExternalSerializerœwebpack-sources/CachedSource Æ8 «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource $ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "default": () => (/* binding */ Stats)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1163);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_2__);
|
|||
|
|
/* harmony import */ var _lib_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7751);
|
|||
|
|
/* harmony import */ var chart_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3767);
|
|||
|
|
/* harmony import */ var _components_AppShell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1712);
|
|||
|
|
/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(349);
|
|||
|
|
/* harmony import */ var _components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4190);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([chart_js__WEBPACK_IMPORTED_MODULE_3__]);
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
«webpack/lib/util/registerExternalSerializer�webpack-sources/ReplaceSource Ó* import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|||
|
|
import { useState, useEffect, useRef } from "react";
|
|||
|
|
import { useRouter } from "next/router";
|
|||
|
|
import { isLoggedIn, getTrendStats, getCategoryStats } from "../lib/api";
|
|||
|
|
import { Chart, registerables } from "chart.js";
|
|||
|
|
import AppShell from "../components/AppShell";
|
|||
|
|
import { Icon } from "../components/icons";
|
|||
|
|
import { useToast } from "../components/ToastProvider";
|
|||
|
|
Chart.register(...registerables);
|
|||
|
|
export default function Stats() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const { showToast } = useToast();
|
|||
|
|
const [period, setPeriod] = useState("month");
|
|||
|
|
const [currentMonth, setCurrentMonth] = useState(new Date());
|
|||
|
|
const [trendData, setTrendData] = useState([]);
|
|||
|
|
const [categoryData, setCategoryData] = useState([]);
|
|||
|
|
const [categoryType, setCategoryType] = useState("expense");
|
|||
|
|
const [trendLoading, setTrendLoading] = useState(true);
|
|||
|
|
const [categoryLoading, setCategoryLoading] = useState(true);
|
|||
|
|
const trendChartRef = useRef(null);
|
|||
|
|
const categoryChartRef = useRef(null);
|
|||
|
|
const trendChartInstance = useRef(null);
|
|||
|
|
const categoryChartInstance = useRef(null);
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const getMonthStr = (date)=>`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
|
|||
|
|
const formatMonth = (date)=>`${date.getFullYear()}年${date.getMonth() + 1}月`;
|
|||
|
|
const loadTrendData = async ()=>{
|
|||
|
|
setTrendLoading(true);
|
|||
|
|
try {
|
|||
|
|
const trend = await getTrendStats(period, getMonthStr(currentMonth));
|
|||
|
|
setTrendData(trend);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setTrendLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const loadCategoryData = async ()=>{
|
|||
|
|
setCategoryLoading(true);
|
|||
|
|
try {
|
|||
|
|
const category = await getCategoryStats(getMonthStr(currentMonth), categoryType);
|
|||
|
|
setCategoryData(category);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setCategoryLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const prevMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() - 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const nextMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() + 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const totalCategoryAmount = categoryData.reduce((sum, item)=>sum + item.total, 0);
|
|||
|
|
const headerContent = /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "header-center-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-spacer"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "month-switcher-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "上个月",
|
|||
|
|
onClick: prevMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronLeft",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "month-switcher__label",
|
|||
|
|
children: formatMonth(currentMonth)
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "下个月",
|
|||
|
|
onClick: nextMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronRight",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-right-actions",
|
|||
|
|
children: /*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "设置",
|
|||
|
|
onClick: ()=>router.push("/settings"),
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "settings",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
return /*#__PURE__*/ _jsxs(AppShell, {
|
|||
|
|
headerContent: headerContent,
|
|||
|
|
compactHeader: true,
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("p", {
|
|||
|
|
className: "eyebrow",
|
|||
|
|
children: "趋势"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "收支趋势"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "period-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "week" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("week"),
|
|||
|
|
children: "周"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "month" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("month"),
|
|||
|
|
children: "月"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "year" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("year"),
|
|||
|
|
children: "å¹´"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "chart-container chart-container--large chart-container--stats",
|
|||
|
|
children: trendLoading ? /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "loading-state",
|
|||
|
|
children: "åŠ è½½ä¸..."
|
|||
|
|
}) : /*#__PURE__*/ _jsx("canvas", {
|
|||
|
|
ref: trendChartRef
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
children: /*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "分类明细"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "category-type-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "expense" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("expense"),
|
|||
|
|
children: "支出"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "income" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("income"),
|
|||
|
|
children: "收入"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "category-breakdown category-breakdown--stats",
|
|||
|
|
children: categoryData.length > 0 ? categoryData.map((cat, index)=>{
|
|||
|
|
const percent = totalCategoryAmount ? (cat.total / totalCategoryAmount * 100).toFixed(1) : "0.0";
|
|||
|
|
return /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-item",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-header",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-name",
|
|||
|
|
children: cat.category
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-amount",
|
|||
|
|
children: cat.total.toFixed(2)
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar-wrap",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar",
|
|||
|
|
style: {
|
|||
|
|
width: `${percent}%`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}, index);
|
|||
|
|
}) : /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "empty-state empty-state--inline",
|
|||
|
|
children: "æš‚æ— æ•°æ�®"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
eE >@su_œ ž æ è F H r t ª ¬ ° ¾ Ê Î Ü * 1 V ] • œ Ñ Ø E L † _� È Ï ò ÷ " J O z É Õ k z „
|
|||
|
|
ˆ
|
|||
|
|
ï
|
|||
|
|
ò
|
|||
|
|
R V Ö Ù Ê Í Ï Ò ‚
|
|||
|
|
…
|
|||
|
|
C F 7 _: < ? r u d g i l $ & - £ § 8 ; Å É * - õ ø Í Ñ \ _ £ ¦ ì _ï \ _
|
|||
|
|
° [ _ ð ó } € ¿ Â q u
|
|||
|
|
a d â! å! O# S# þ# $ Ç$ Ê$ Ù% Ü% >' DA' Ú' Ý' £) ¦) €€€€€€€€«chart_js__WEBPACK_IMPORTED_MODULE_3__.Chart³chart_js__WEBPACK_IMPORTED_MODULE_3__.registerables€¶(0,next_router__WEBPACK_IMPORTED_MODULE_2__.useRouter)Ì(0,_components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__/* .useToast */ .p)¯(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)ÿÿÿÿÿÿ(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)ÿÿÿÁ(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getTrendStats */ .gR)Ä(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getCategoryStats */ .Ap)·(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)²react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxþÿÿ¼_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .JþþþÿþþþÿýÅ_components_AppShell__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Züýüýýüýýýýýýüýýýüýýýüüýýýýý L
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } }); †buffer†source„size„maps–þÿÿ q; __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "default": () => (/* binding */ Stats)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1163);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_2__);
|
|||
|
|
/* harmony import */ var _lib_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7751);
|
|||
|
|
/* harmony import */ var chart_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3767);
|
|||
|
|
/* harmony import */ var _components_AppShell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1712);
|
|||
|
|
/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(349);
|
|||
|
|
/* harmony import */ var _components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4190);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([chart_js__WEBPACK_IMPORTED_MODULE_3__]);
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__.Chart.register(...chart_js__WEBPACK_IMPORTED_MODULE_3__.registerables);
|
|||
|
|
function Stats() {
|
|||
|
|
const router = (0,next_router__WEBPACK_IMPORTED_MODULE_2__.useRouter)();
|
|||
|
|
const { showToast } = (0,_components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__/* .useToast */ .p)();
|
|||
|
|
const [period, setPeriod] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("month");
|
|||
|
|
const [currentMonth, setCurrentMonth] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(new Date());
|
|||
|
|
const [trendData, setTrendData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]);
|
|||
|
|
const [categoryData, setCategoryData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]);
|
|||
|
|
const [categoryType, setCategoryType] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("expense");
|
|||
|
|
const [trendLoading, setTrendLoading] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true);
|
|||
|
|
const [categoryLoading, setCategoryLoading] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true);
|
|||
|
|
const trendChartRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const categoryChartRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const trendChartInstance = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const categoryChartInstance = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const getMonthStr = (date)=>`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
|
|||
|
|
const formatMonth = (date)=>`${date.getFullYear()}年${date.getMonth() + 1}月`;
|
|||
|
|
const loadTrendData = async ()=>{
|
|||
|
|
setTrendLoading(true);
|
|||
|
|
try {
|
|||
|
|
const trend = await (0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getTrendStats */ .gR)(period, getMonthStr(currentMonth));
|
|||
|
|
setTrendData(trend);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setTrendLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const loadCategoryData = async ()=>{
|
|||
|
|
setCategoryLoading(true);
|
|||
|
|
try {
|
|||
|
|
const category = await (0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getCategoryStats */ .Ap)(getMonthStr(currentMonth), categoryType);
|
|||
|
|
setCategoryData(category);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setCategoryLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const prevMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() - 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const nextMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() + 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const totalCategoryAmount = categoryData.reduce((sum, item)=>sum + item.total, 0);
|
|||
|
|
const headerContent = /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "header-center-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "header-spacer"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "month-switcher-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "上个月",
|
|||
|
|
onClick: prevMonth,
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "chevronLeft",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "month-switcher__label",
|
|||
|
|
children: formatMonth(currentMonth)
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "下个月",
|
|||
|
|
onClick: nextMonth,
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "chevronRight",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "header-right-actions",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "设置",
|
|||
|
|
onClick: ()=>router.push("/settings"),
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "settings",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components_AppShell__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
|||
|
|
headerContent: headerContent,
|
|||
|
|
compactHeader: true,
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("p", {
|
|||
|
|
className: "eyebrow",
|
|||
|
|
children: "趋势"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
|
|||
|
|
children: "收支趋势"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "period-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "week" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("week"),
|
|||
|
|
children: "周"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "month" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("month"),
|
|||
|
|
children: "月"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "year" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("year"),
|
|||
|
|
children: "å¹´"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "chart-container chart-container--large chart-container--stats",
|
|||
|
|
children: trendLoading ? /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "loading-state",
|
|||
|
|
children: "åŠ è½½ä¸..."
|
|||
|
|
}) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("canvas", {
|
|||
|
|
ref: trendChartRef
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
|
|||
|
|
children: "分类明细"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "category-type-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "expense" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("expense"),
|
|||
|
|
children: "支出"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "income" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("income"),
|
|||
|
|
children: "收入"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "category-breakdown category-breakdown--stats",
|
|||
|
|
children: categoryData.length > 0 ? categoryData.map((cat, index)=>{
|
|||
|
|
const percent = totalCategoryAmount ? (cat.total / totalCategoryAmount * 100).toFixed(1) : "0.0";
|
|||
|
|
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "stats-category-item",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "stats-category-header",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "stats-category-name",
|
|||
|
|
children: cat.category
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "stats-category-amount",
|
|||
|
|
children: cat.total.toFixed(2)
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "stats-category-bar-wrap",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "stats-category-bar",
|
|||
|
|
style: {
|
|||
|
|
width: `${percent}%`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}, index);
|
|||
|
|
}) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "empty-state empty-state--inline",
|
|||
|
|
children: "æš‚æ— æ•°æ�®"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } }); ”{"finalSource":true}ƒmap‹bufferedMap ConcatSourceRawSource $ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "default": () => (/* binding */ Stats)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1163);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_2__);
|
|||
|
|
/* harmony import */ var _lib_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7751);
|
|||
|
|
/* harmony import */ var chart_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3767);
|
|||
|
|
/* harmony import */ var _components_AppShell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1712);
|
|||
|
|
/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(349);
|
|||
|
|
/* harmony import */ var _components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4190);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([chart_js__WEBPACK_IMPORTED_MODULE_3__]);
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
ReplaceSourceRawSource¬þÿÿ £ 062undefined64115undefined117156undefined158230undefined232279undefined281326undefined328370undefined372426undefined428432chart_js__WEBPACK_IMPORTED_MODULE_3__.Chartundefined446458chart_js__WEBPACK_IMPORTED_MODULE_3__.registerablesundefined462476undefined515523(0,next_router__WEBPACK_IMPORTED_MODULE_2__.useRouter)undefined554561(0,_components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__/* .useToast */ .p)undefined598605(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined661668(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined721728(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined779786(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined837844(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined902909(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined968975(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined10101015(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined10531058(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined10981103(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined11461151(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined14811493(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getTrendStats */ .gR)undefined18991914(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getCategoryStats */ .Ap)undefined26922696(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined27992802react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined28982902(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined30303033react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined32743277react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined32793282_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .Jundefined34583461react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined36513654react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined38953898react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined39003903_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .Jundefined41054108react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined42104213react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined44524455react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined44574460_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .Jundefined46404644(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined46464653_components_AppShell__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Zundefined47714775(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined49204923react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined50615065(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined51625165react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined53655368react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined55815585(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined57245727react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined60516054react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined63806383react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined67486751react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined69256928react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined70857088react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined72597263(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined74087411react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined75497552react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined76157618react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined77937797(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined79437946react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined82898292react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined86748677react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined90399043(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined92149218(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined94159418react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined96899692react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined1004610049react
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } }); “__webpack_require__•__webpack_require__.n•__webpack_require__.rÉþÿÿPþÿÿ•__webpack_require__.a•__webpack_require__.d¥þÿÿ åÊ «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€`«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource u "use strict";
|
|||
|
|
(() => {
|
|||
|
|
var exports = {};
|
|||
|
|
exports.id = 368;
|
|||
|
|
exports.ids = [368,660];
|
|||
|
|
exports.modules = {
|
|||
|
|
|
|||
|
|
/***/ 3483:
|
|||
|
|
«webpack/lib/util/registerExternalSerializerœwebpack-sources/CachedSource L «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource @ /***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|||
|
|
|
|||
|
|
«webpack/lib/util/registerExternalSerializerœwebpack-sources/CachedSource ê «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource �
|
|||
|
|
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ config: () => (/* binding */ config),
|
|||
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__),
|
|||
|
|
/* harmony export */ getServerSideProps: () => (/* binding */ getServerSideProps),
|
|||
|
|
/* harmony export */ getStaticPaths: () => (/* binding */ getStaticPaths),
|
|||
|
|
/* harmony export */ getStaticProps: () => (/* binding */ getStaticProps),
|
|||
|
|
/* harmony export */ reportWebVitals: () => (/* binding */ reportWebVitals),
|
|||
|
|
/* harmony export */ routeModule: () => (/* binding */ routeModule),
|
|||
|
|
/* harmony export */ unstable_getServerProps: () => (/* binding */ unstable_getServerProps),
|
|||
|
|
/* harmony export */ unstable_getServerSideProps: () => (/* binding */ unstable_getServerSideProps),
|
|||
|
|
/* harmony export */ unstable_getStaticParams: () => (/* binding */ unstable_getStaticParams),
|
|||
|
|
/* harmony export */ unstable_getStaticPaths: () => (/* binding */ unstable_getStaticPaths),
|
|||
|
|
/* harmony export */ unstable_getStaticProps: () => (/* binding */ unstable_getStaticProps)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7093);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5244);
|
|||
|
|
/* harmony import */ var next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1323);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2899);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__);
|
|||
|
|
/* harmony import */ var private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3414);
|
|||
|
|
/* harmony import */ var private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5222);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__]);
|
|||
|
|
private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
«webpack/lib/util/registerExternalSerializer�webpack-sources/ReplaceSource à import { PagesRouteModule } from "next/dist/server/future/route-modules/pages/module.compiled";
|
|||
|
|
import { RouteKind } from "next/dist/server/future/route-kind";
|
|||
|
|
import { hoist } from "next/dist/build/templates/helpers";
|
|||
|
|
// Import the app and document modules.
|
|||
|
|
import Document from "next/dist/pages/_document";
|
|||
|
|
import App from "private-next-pages/_app.js";
|
|||
|
|
// Import the userland code.
|
|||
|
|
import * as userland from "private-next-pages/stats.js";
|
|||
|
|
// Re-export the component (should be the default export).
|
|||
|
|
export default hoist(userland, "default");
|
|||
|
|
// Re-export methods.
|
|||
|
|
export const getStaticProps = hoist(userland, "getStaticProps");
|
|||
|
|
export const getStaticPaths = hoist(userland, "getStaticPaths");
|
|||
|
|
export const getServerSideProps = hoist(userland, "getServerSideProps");
|
|||
|
|
export const config = hoist(userland, "config");
|
|||
|
|
export const reportWebVitals = hoist(userland, "reportWebVitals");
|
|||
|
|
// Re-export legacy methods.
|
|||
|
|
export const unstable_getStaticProps = hoist(userland, "unstable_getStaticProps");
|
|||
|
|
export const unstable_getStaticPaths = hoist(userland, "unstable_getStaticPaths");
|
|||
|
|
export const unstable_getStaticParams = hoist(userland, "unstable_getStaticParams");
|
|||
|
|
export const unstable_getServerProps = hoist(userland, "unstable_getServerProps");
|
|||
|
|
export const unstable_getServerSideProps = hoist(userland, "unstable_getServerSideProps");
|
|||
|
|
// Create and export the route module that will be consumed.
|
|||
|
|
export const routeModule = new PagesRouteModule({
|
|||
|
|
definition: {
|
|||
|
|
kind: RouteKind.PAGES,
|
|||
|
|
page: "/stats",
|
|||
|
|
pathname: "/stats",
|
|||
|
|
// The following aren't used in production.
|
|||
|
|
bundlePath: "",
|
|||
|
|
filename: ""
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
App,
|
|||
|
|
Document
|
|||
|
|
},
|
|||
|
|
userland
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//# sourceMappingURL=pages.js.map c/ ^`Qž Ù 3 5 a € · ô ô ì€@_5 ; S W Y ` v | ” ˜ š ¡ · ½ Ù Ý ß æ # 1 7 P T V ] ‘ — _¸ ¼ ¾ Å ä ê 7 = _ c e l Œ ’ ³ · ¹ À ß å
|
|||
|
|
w } – ¥ GÉ Ñ “ ’ ¥ ¤ ¹ ¸ €€€€€€Á/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (€Ñ(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)¸private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__‚);€ýþ€ýþ€ýþ€ýþ€ýþ€ýþ€ýþ€ýþ€ýþ€ýþ€énext_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__.PagesRouteModuleÒnext_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__/* .RouteKind */ .xÃ: private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__["default"]Ã: (next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default())º: private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ L
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } }); €†buffer†source„size„maps„hash ç __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ config: () => (/* binding */ config),
|
|||
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__),
|
|||
|
|
/* harmony export */ getServerSideProps: () => (/* binding */ getServerSideProps),
|
|||
|
|
/* harmony export */ getStaticPaths: () => (/* binding */ getStaticPaths),
|
|||
|
|
/* harmony export */ getStaticProps: () => (/* binding */ getStaticProps),
|
|||
|
|
/* harmony export */ reportWebVitals: () => (/* binding */ reportWebVitals),
|
|||
|
|
/* harmony export */ routeModule: () => (/* binding */ routeModule),
|
|||
|
|
/* harmony export */ unstable_getServerProps: () => (/* binding */ unstable_getServerProps),
|
|||
|
|
/* harmony export */ unstable_getServerSideProps: () => (/* binding */ unstable_getServerSideProps),
|
|||
|
|
/* harmony export */ unstable_getStaticParams: () => (/* binding */ unstable_getStaticParams),
|
|||
|
|
/* harmony export */ unstable_getStaticPaths: () => (/* binding */ unstable_getStaticPaths),
|
|||
|
|
/* harmony export */ unstable_getStaticProps: () => (/* binding */ unstable_getStaticProps)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7093);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5244);
|
|||
|
|
/* harmony import */ var next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1323);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2899);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__);
|
|||
|
|
/* harmony import */ var private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3414);
|
|||
|
|
/* harmony import */ var private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5222);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__]);
|
|||
|
|
private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Import the app and document modules.
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Import the userland code.
|
|||
|
|
|
|||
|
|
// Re-export the component (should be the default export).
|
|||
|
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "default"));
|
|||
|
|
// Re-export methods.
|
|||
|
|
const getStaticProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "getStaticProps");
|
|||
|
|
const getStaticPaths = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "getStaticPaths");
|
|||
|
|
const getServerSideProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "getServerSideProps");
|
|||
|
|
const config = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "config");
|
|||
|
|
const reportWebVitals = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "reportWebVitals");
|
|||
|
|
// Re-export legacy methods.
|
|||
|
|
const unstable_getStaticProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getStaticProps");
|
|||
|
|
const unstable_getStaticPaths = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getStaticPaths");
|
|||
|
|
const unstable_getStaticParams = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getStaticParams");
|
|||
|
|
const unstable_getServerProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getServerProps");
|
|||
|
|
const unstable_getServerSideProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getServerSideProps");
|
|||
|
|
// Create and export the route module that will be consumed.
|
|||
|
|
const routeModule = new next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__.PagesRouteModule({
|
|||
|
|
definition: {
|
|||
|
|
kind: next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__/* .RouteKind */ .x.PAGES,
|
|||
|
|
page: "/stats",
|
|||
|
|
pathname: "/stats",
|
|||
|
|
// The following aren't used in production.
|
|||
|
|
bundlePath: "",
|
|||
|
|
filename: ""
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
App: private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__["default"],
|
|||
|
|
Document: (next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default())
|
|||
|
|
},
|
|||
|
|
userland: private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//# sourceMappingURL=pages.js.map
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } }); €”{"finalSource":true}ƒmap‹bufferedMap ConcatSourceRawSource �
|
|||
|
|
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ config: () => (/* binding */ config),
|
|||
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__),
|
|||
|
|
/* harmony export */ getServerSideProps: () => (/* binding */ getServerSideProps),
|
|||
|
|
/* harmony export */ getStaticPaths: () => (/* binding */ getStaticPaths),
|
|||
|
|
/* harmony export */ getStaticProps: () => (/* binding */ getStaticProps),
|
|||
|
|
/* harmony export */ reportWebVitals: () => (/* binding */ reportWebVitals),
|
|||
|
|
/* harmony export */ routeModule: () => (/* binding */ routeModule),
|
|||
|
|
/* harmony export */ unstable_getServerProps: () => (/* binding */ unstable_getServerProps),
|
|||
|
|
/* harmony export */ unstable_getServerSideProps: () => (/* binding */ unstable_getServerSideProps),
|
|||
|
|
/* harmony export */ unstable_getStaticParams: () => (/* binding */ unstable_getStaticParams),
|
|||
|
|
/* harmony export */ unstable_getStaticPaths: () => (/* binding */ unstable_getStaticPaths),
|
|||
|
|
/* harmony export */ unstable_getStaticProps: () => (/* binding */ unstable_getStaticProps)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7093);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5244);
|
|||
|
|
/* harmony import */ var next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1323);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2899);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__);
|
|||
|
|
/* harmony import */ var private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3414);
|
|||
|
|
/* harmony import */ var private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5222);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__]);
|
|||
|
|
private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
ReplaceSourceRawSource à import { PagesRouteModule } from "next/dist/server/future/route-modules/pages/module.compiled";
|
|||
|
|
import { RouteKind } from "next/dist/server/future/route-kind";
|
|||
|
|
import { hoist } from "next/dist/build/templates/helpers";
|
|||
|
|
// Import the app and document modules.
|
|||
|
|
import Document from "next/dist/pages/_document";
|
|||
|
|
import App from "private-next-pages/_app.js";
|
|||
|
|
// Import the userland code.
|
|||
|
|
import * as userland from "private-next-pages/stats.js";
|
|||
|
|
// Re-export the component (should be the default export).
|
|||
|
|
export default hoist(userland, "default");
|
|||
|
|
// Re-export methods.
|
|||
|
|
export const getStaticProps = hoist(userland, "getStaticProps");
|
|||
|
|
export const getStaticPaths = hoist(userland, "getStaticPaths");
|
|||
|
|
export const getServerSideProps = hoist(userland, "getServerSideProps");
|
|||
|
|
export const config = hoist(userland, "config");
|
|||
|
|
export const reportWebVitals = hoist(userland, "reportWebVitals");
|
|||
|
|
// Re-export legacy methods.
|
|||
|
|
export const unstable_getStaticProps = hoist(userland, "unstable_getStaticProps");
|
|||
|
|
export const unstable_getStaticPaths = hoist(userland, "unstable_getStaticPaths");
|
|||
|
|
export const unstable_getStaticParams = hoist(userland, "unstable_getStaticParams");
|
|||
|
|
export const unstable_getServerProps = hoist(userland, "unstable_getServerProps");
|
|||
|
|
export const unstable_getServerSideProps = hoist(userland, "unstable_getServerSideProps");
|
|||
|
|
// Create and export the route module that will be consumed.
|
|||
|
|
export const routeModule = new PagesRouteModule({
|
|||
|
|
definition: {
|
|||
|
|
kind: RouteKind.PAGES,
|
|||
|
|
page: "/stats",
|
|||
|
|
pathname: "/stats",
|
|||
|
|
// The following aren't used in production.
|
|||
|
|
bundlePath: "",
|
|||
|
|
filename: ""
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
App,
|
|||
|
|
Document
|
|||
|
|
},
|
|||
|
|
userland
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//# sourceMappingURL=pages.js.map Œ
|
|||
|
|
094undefined96158undefined160217undefined259307undefined309353undefined384439undefined500514/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (undefined500514undefined515519(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined521528private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined541541.5);undefined565571undefined595599(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined601608private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined630636undefined660664(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined666673private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined695701undefined729733(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined735742private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined768774undefined790794(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined796803private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined817823undefined848852(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined854861private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined913919undefined952956(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined958965private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined9961002undefined10351039(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined10411048private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined10791085undefined11191123(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined11251132private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined11641170undefined12031207(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined12091216private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined12471253undefined12901294(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined12961303private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined13991405undefined14301445next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__.PagesRouteModuleundefined14811489next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__/* .RouteKind */ .xundefined16831682: private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__["default"]undefined17011700: (next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default())undefined17211720: private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefinedRawSource L
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } });
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) €†buffer†source„size„maps„hash 1 /***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|||
|
|
|
|||
|
|
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ config: () => (/* binding */ config),
|
|||
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__),
|
|||
|
|
/* harmony export */ getServerSideProps: () => (/* binding */ getServerSideProps),
|
|||
|
|
/* harmony export */ getStaticPaths: () => (/* binding */ getStaticPaths),
|
|||
|
|
/* harmony export */ getStaticProps: () => (/* binding */ getStaticProps),
|
|||
|
|
/* harmony export */ reportWebVitals: () => (/* binding */ reportWebVitals),
|
|||
|
|
/* harmony export */ routeModule: () => (/* binding */ routeModule),
|
|||
|
|
/* harmony export */ unstable_getServerProps: () => (/* binding */ unstable_getServerProps),
|
|||
|
|
/* harmony export */ unstable_getServerSideProps: () => (/* binding */ unstable_getServerSideProps),
|
|||
|
|
/* harmony export */ unstable_getStaticParams: () => (/* binding */ unstable_getStaticParams),
|
|||
|
|
/* harmony export */ unstable_getStaticPaths: () => (/* binding */ unstable_getStaticPaths),
|
|||
|
|
/* harmony export */ unstable_getStaticProps: () => (/* binding */ unstable_getStaticProps)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7093);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5244);
|
|||
|
|
/* harmony import */ var next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1323);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2899);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__);
|
|||
|
|
/* harmony import */ var private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3414);
|
|||
|
|
/* harmony import */ var private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5222);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__]);
|
|||
|
|
private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Import the app and document modules.
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Import the userland code.
|
|||
|
|
|
|||
|
|
// Re-export the component (should be the default export).
|
|||
|
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "default"));
|
|||
|
|
// Re-export methods.
|
|||
|
|
const getStaticProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "getStaticProps");
|
|||
|
|
const getStaticPaths = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "getStaticPaths");
|
|||
|
|
const getServerSideProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "getServerSideProps");
|
|||
|
|
const config = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "config");
|
|||
|
|
const reportWebVitals = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "reportWebVitals");
|
|||
|
|
// Re-export legacy methods.
|
|||
|
|
const unstable_getStaticProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getStaticProps");
|
|||
|
|
const unstable_getStaticPaths = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getStaticPaths");
|
|||
|
|
const unstable_getStaticParams = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getStaticParams");
|
|||
|
|
const unstable_getServerProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getServerProps");
|
|||
|
|
const unstable_getServerSideProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getServerSideProps");
|
|||
|
|
// Create and export the route module that will be consumed.
|
|||
|
|
const routeModule = new next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__.PagesRouteModule({
|
|||
|
|
definition: {
|
|||
|
|
kind: next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__/* .RouteKind */ .x.PAGES,
|
|||
|
|
page: "/stats",
|
|||
|
|
pathname: "/stats",
|
|||
|
|
// The following aren't used in production.
|
|||
|
|
bundlePath: "",
|
|||
|
|
filename: ""
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
App: private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__["default"],
|
|||
|
|
Document: (next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default())
|
|||
|
|
},
|
|||
|
|
userland: private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//# sourceMappingURL=pages.js.map
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } });
|
|||
|
|
|
|||
|
|
/***/ }) €”{"finalSource":true}ƒmap‹bufferedMap
|
|||
|
|
ConcatSourceRawSource @ /***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|||
|
|
|
|||
|
|
þ �
|
|||
|
|
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ config: () => (/* binding */ config),
|
|||
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__),
|
|||
|
|
/* harmony export */ getServerSideProps: () => (/* binding */ getServerSideProps),
|
|||
|
|
/* harmony export */ getStaticPaths: () => (/* binding */ getStaticPaths),
|
|||
|
|
/* harmony export */ getStaticProps: () => (/* binding */ getStaticProps),
|
|||
|
|
/* harmony export */ reportWebVitals: () => (/* binding */ reportWebVitals),
|
|||
|
|
/* harmony export */ routeModule: () => (/* binding */ routeModule),
|
|||
|
|
/* harmony export */ unstable_getServerProps: () => (/* binding */ unstable_getServerProps),
|
|||
|
|
/* harmony export */ unstable_getServerSideProps: () => (/* binding */ unstable_getServerSideProps),
|
|||
|
|
/* harmony export */ unstable_getStaticParams: () => (/* binding */ unstable_getStaticParams),
|
|||
|
|
/* harmony export */ unstable_getStaticPaths: () => (/* binding */ unstable_getStaticPaths),
|
|||
|
|
/* harmony export */ unstable_getStaticProps: () => (/* binding */ unstable_getStaticProps)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7093);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5244);
|
|||
|
|
/* harmony import */ var next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1323);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2899);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__);
|
|||
|
|
/* harmony import */ var private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3414);
|
|||
|
|
/* harmony import */ var private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5222);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__]);
|
|||
|
|
private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
ReplaceSourceRawSource à import { PagesRouteModule } from "next/dist/server/future/route-modules/pages/module.compiled";
|
|||
|
|
import { RouteKind } from "next/dist/server/future/route-kind";
|
|||
|
|
import { hoist } from "next/dist/build/templates/helpers";
|
|||
|
|
// Import the app and document modules.
|
|||
|
|
import Document from "next/dist/pages/_document";
|
|||
|
|
import App from "private-next-pages/_app.js";
|
|||
|
|
// Import the userland code.
|
|||
|
|
import * as userland from "private-next-pages/stats.js";
|
|||
|
|
// Re-export the component (should be the default export).
|
|||
|
|
export default hoist(userland, "default");
|
|||
|
|
// Re-export methods.
|
|||
|
|
export const getStaticProps = hoist(userland, "getStaticProps");
|
|||
|
|
export const getStaticPaths = hoist(userland, "getStaticPaths");
|
|||
|
|
export const getServerSideProps = hoist(userland, "getServerSideProps");
|
|||
|
|
export const config = hoist(userland, "config");
|
|||
|
|
export const reportWebVitals = hoist(userland, "reportWebVitals");
|
|||
|
|
// Re-export legacy methods.
|
|||
|
|
export const unstable_getStaticProps = hoist(userland, "unstable_getStaticProps");
|
|||
|
|
export const unstable_getStaticPaths = hoist(userland, "unstable_getStaticPaths");
|
|||
|
|
export const unstable_getStaticParams = hoist(userland, "unstable_getStaticParams");
|
|||
|
|
export const unstable_getServerProps = hoist(userland, "unstable_getServerProps");
|
|||
|
|
export const unstable_getServerSideProps = hoist(userland, "unstable_getServerSideProps");
|
|||
|
|
// Create and export the route module that will be consumed.
|
|||
|
|
export const routeModule = new PagesRouteModule({
|
|||
|
|
definition: {
|
|||
|
|
kind: RouteKind.PAGES,
|
|||
|
|
page: "/stats",
|
|||
|
|
pathname: "/stats",
|
|||
|
|
// The following aren't used in production.
|
|||
|
|
bundlePath: "",
|
|||
|
|
filename: ""
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
App,
|
|||
|
|
Document
|
|||
|
|
},
|
|||
|
|
userland
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//# sourceMappingURL=pages.js.map Œ
|
|||
|
|
094undefined96158undefined160217undefined259307undefined309353undefined384439undefined500514/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (undefined500514undefined515519(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined521528private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined541541.5);undefined565571undefined595599(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined601608private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined630636undefined660664(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined666673private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined695701undefined729733(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined735742private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined768774undefined790794(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined796803private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined817823undefined848852(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined854861private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined913919undefined952956(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined958965private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined9961002undefined10351039(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined10411048private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined10791085undefined11191123(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined11251132private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined11641170undefined12031207(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined12091216private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined12471253undefined12901294(0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)undefined12961303private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefined13991405undefined14301445next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__.PagesRouteModuleundefined14811489next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__/* .RouteKind */ .xundefined16831682: private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__["default"]undefined17011700: (next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default())undefined17211720: private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__undefinedRawSource L
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } }); RawSource
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) ,
|
|||
|
|
|
|||
|
|
/***/ 5222:
|
|||
|
|
¹ «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource @ /***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|||
|
|
|
|||
|
|
«webpack/lib/util/registerExternalSerializerœwebpack-sources/CachedSource Æ8 «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource $ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "default": () => (/* binding */ Stats)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1163);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_2__);
|
|||
|
|
/* harmony import */ var _lib_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7751);
|
|||
|
|
/* harmony import */ var chart_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3767);
|
|||
|
|
/* harmony import */ var _components_AppShell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1712);
|
|||
|
|
/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(349);
|
|||
|
|
/* harmony import */ var _components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4190);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([chart_js__WEBPACK_IMPORTED_MODULE_3__]);
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
«webpack/lib/util/registerExternalSerializer�webpack-sources/ReplaceSource Ó* import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|||
|
|
import { useState, useEffect, useRef } from "react";
|
|||
|
|
import { useRouter } from "next/router";
|
|||
|
|
import { isLoggedIn, getTrendStats, getCategoryStats } from "../lib/api";
|
|||
|
|
import { Chart, registerables } from "chart.js";
|
|||
|
|
import AppShell from "../components/AppShell";
|
|||
|
|
import { Icon } from "../components/icons";
|
|||
|
|
import { useToast } from "../components/ToastProvider";
|
|||
|
|
Chart.register(...registerables);
|
|||
|
|
export default function Stats() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const { showToast } = useToast();
|
|||
|
|
const [period, setPeriod] = useState("month");
|
|||
|
|
const [currentMonth, setCurrentMonth] = useState(new Date());
|
|||
|
|
const [trendData, setTrendData] = useState([]);
|
|||
|
|
const [categoryData, setCategoryData] = useState([]);
|
|||
|
|
const [categoryType, setCategoryType] = useState("expense");
|
|||
|
|
const [trendLoading, setTrendLoading] = useState(true);
|
|||
|
|
const [categoryLoading, setCategoryLoading] = useState(true);
|
|||
|
|
const trendChartRef = useRef(null);
|
|||
|
|
const categoryChartRef = useRef(null);
|
|||
|
|
const trendChartInstance = useRef(null);
|
|||
|
|
const categoryChartInstance = useRef(null);
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const getMonthStr = (date)=>`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
|
|||
|
|
const formatMonth = (date)=>`${date.getFullYear()}年${date.getMonth() + 1}月`;
|
|||
|
|
const loadTrendData = async ()=>{
|
|||
|
|
setTrendLoading(true);
|
|||
|
|
try {
|
|||
|
|
const trend = await getTrendStats(period, getMonthStr(currentMonth));
|
|||
|
|
setTrendData(trend);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setTrendLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const loadCategoryData = async ()=>{
|
|||
|
|
setCategoryLoading(true);
|
|||
|
|
try {
|
|||
|
|
const category = await getCategoryStats(getMonthStr(currentMonth), categoryType);
|
|||
|
|
setCategoryData(category);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setCategoryLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const prevMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() - 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const nextMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() + 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const totalCategoryAmount = categoryData.reduce((sum, item)=>sum + item.total, 0);
|
|||
|
|
const headerContent = /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "header-center-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-spacer"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "month-switcher-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "上个月",
|
|||
|
|
onClick: prevMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronLeft",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "month-switcher__label",
|
|||
|
|
children: formatMonth(currentMonth)
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "下个月",
|
|||
|
|
onClick: nextMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronRight",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-right-actions",
|
|||
|
|
children: /*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "设置",
|
|||
|
|
onClick: ()=>router.push("/settings"),
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "settings",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
return /*#__PURE__*/ _jsxs(AppShell, {
|
|||
|
|
headerContent: headerContent,
|
|||
|
|
compactHeader: true,
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("p", {
|
|||
|
|
className: "eyebrow",
|
|||
|
|
children: "趋势"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "收支趋势"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "period-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "week" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("week"),
|
|||
|
|
children: "周"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "month" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("month"),
|
|||
|
|
children: "月"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "year" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("year"),
|
|||
|
|
children: "å¹´"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "chart-container chart-container--large chart-container--stats",
|
|||
|
|
children: trendLoading ? /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "loading-state",
|
|||
|
|
children: "åŠ è½½ä¸..."
|
|||
|
|
}) : /*#__PURE__*/ _jsx("canvas", {
|
|||
|
|
ref: trendChartRef
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
children: /*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "分类明细"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "category-type-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "expense" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("expense"),
|
|||
|
|
children: "支出"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "income" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("income"),
|
|||
|
|
children: "收入"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "category-breakdown category-breakdown--stats",
|
|||
|
|
children: categoryData.length > 0 ? categoryData.map((cat, index)=>{
|
|||
|
|
const percent = totalCategoryAmount ? (cat.total / totalCategoryAmount * 100).toFixed(1) : "0.0";
|
|||
|
|
return /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-item",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-header",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-name",
|
|||
|
|
children: cat.category
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-amount",
|
|||
|
|
children: cat.total.toFixed(2)
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar-wrap",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar",
|
|||
|
|
style: {
|
|||
|
|
width: `${percent}%`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}, index);
|
|||
|
|
}) : /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "empty-state empty-state--inline",
|
|||
|
|
children: "æš‚æ— æ•°æ�®"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
eE >@su_œ ž æ è F H r t ª ¬ ° ¾ Ê Î Ü * 1 V ] • œ Ñ Ø E L † _� È Ï ò ÷ " J O z É Õ k z „
|
|||
|
|
ˆ
|
|||
|
|
ï
|
|||
|
|
ò
|
|||
|
|
R V Ö Ù Ê Í Ï Ò ‚
|
|||
|
|
…
|
|||
|
|
C F 7 _: < ? r u d g i l $ & - £ § 8 ; Å É * - õ ø Í Ñ \ _ £ ¦ ì _ï \ _
|
|||
|
|
° [ _ ð ó } € ¿ Â q u
|
|||
|
|
a d â! å! O# S# þ# $ Ç$ Ê$ Ù% Ü% >' DA' Ú' Ý' £) ¦) €€€€€€€€«chart_js__WEBPACK_IMPORTED_MODULE_3__.Chart³chart_js__WEBPACK_IMPORTED_MODULE_3__.registerables€¶(0,next_router__WEBPACK_IMPORTED_MODULE_2__.useRouter)Ì(0,_components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__/* .useToast */ .p)¯(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)ÿÿÿÿÿÿ(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)ÿÿÿÁ(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getTrendStats */ .gR)Ä(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getCategoryStats */ .Ap)·(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)²react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxþÿÿ¼_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .JþþþÿþþþÿýÅ_components_AppShell__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Züýüýýüýýýýýýüýýýüýýýüüýýýýý L
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } }); €†buffer†source„size„maps„hash q; __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "default": () => (/* binding */ Stats)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1163);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_2__);
|
|||
|
|
/* harmony import */ var _lib_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7751);
|
|||
|
|
/* harmony import */ var chart_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3767);
|
|||
|
|
/* harmony import */ var _components_AppShell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1712);
|
|||
|
|
/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(349);
|
|||
|
|
/* harmony import */ var _components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4190);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([chart_js__WEBPACK_IMPORTED_MODULE_3__]);
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__.Chart.register(...chart_js__WEBPACK_IMPORTED_MODULE_3__.registerables);
|
|||
|
|
function Stats() {
|
|||
|
|
const router = (0,next_router__WEBPACK_IMPORTED_MODULE_2__.useRouter)();
|
|||
|
|
const { showToast } = (0,_components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__/* .useToast */ .p)();
|
|||
|
|
const [period, setPeriod] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("month");
|
|||
|
|
const [currentMonth, setCurrentMonth] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(new Date());
|
|||
|
|
const [trendData, setTrendData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]);
|
|||
|
|
const [categoryData, setCategoryData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]);
|
|||
|
|
const [categoryType, setCategoryType] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("expense");
|
|||
|
|
const [trendLoading, setTrendLoading] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true);
|
|||
|
|
const [categoryLoading, setCategoryLoading] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true);
|
|||
|
|
const trendChartRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const categoryChartRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const trendChartInstance = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const categoryChartInstance = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const getMonthStr = (date)=>`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
|
|||
|
|
const formatMonth = (date)=>`${date.getFullYear()}年${date.getMonth() + 1}月`;
|
|||
|
|
const loadTrendData = async ()=>{
|
|||
|
|
setTrendLoading(true);
|
|||
|
|
try {
|
|||
|
|
const trend = await (0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getTrendStats */ .gR)(period, getMonthStr(currentMonth));
|
|||
|
|
setTrendData(trend);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setTrendLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const loadCategoryData = async ()=>{
|
|||
|
|
setCategoryLoading(true);
|
|||
|
|
try {
|
|||
|
|
const category = await (0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getCategoryStats */ .Ap)(getMonthStr(currentMonth), categoryType);
|
|||
|
|
setCategoryData(category);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setCategoryLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const prevMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() - 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const nextMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() + 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const totalCategoryAmount = categoryData.reduce((sum, item)=>sum + item.total, 0);
|
|||
|
|
const headerContent = /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "header-center-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "header-spacer"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "month-switcher-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "上个月",
|
|||
|
|
onClick: prevMonth,
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "chevronLeft",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "month-switcher__label",
|
|||
|
|
children: formatMonth(currentMonth)
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "下个月",
|
|||
|
|
onClick: nextMonth,
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "chevronRight",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "header-right-actions",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "设置",
|
|||
|
|
onClick: ()=>router.push("/settings"),
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "settings",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components_AppShell__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
|||
|
|
headerContent: headerContent,
|
|||
|
|
compactHeader: true,
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("p", {
|
|||
|
|
className: "eyebrow",
|
|||
|
|
children: "趋势"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
|
|||
|
|
children: "收支趋势"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "period-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "week" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("week"),
|
|||
|
|
children: "周"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "month" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("month"),
|
|||
|
|
children: "月"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "year" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("year"),
|
|||
|
|
children: "å¹´"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "chart-container chart-container--large chart-container--stats",
|
|||
|
|
children: trendLoading ? /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "loading-state",
|
|||
|
|
children: "åŠ è½½ä¸..."
|
|||
|
|
}) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("canvas", {
|
|||
|
|
ref: trendChartRef
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
|
|||
|
|
children: "分类明细"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "category-type-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "expense" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("expense"),
|
|||
|
|
children: "支出"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "income" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("income"),
|
|||
|
|
children: "收入"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "category-breakdown category-breakdown--stats",
|
|||
|
|
children: categoryData.length > 0 ? categoryData.map((cat, index)=>{
|
|||
|
|
const percent = totalCategoryAmount ? (cat.total / totalCategoryAmount * 100).toFixed(1) : "0.0";
|
|||
|
|
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "stats-category-item",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "stats-category-header",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "stats-category-name",
|
|||
|
|
children: cat.category
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "stats-category-amount",
|
|||
|
|
children: cat.total.toFixed(2)
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "stats-category-bar-wrap",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "stats-category-bar",
|
|||
|
|
style: {
|
|||
|
|
width: `${percent}%`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}, index);
|
|||
|
|
}) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "empty-state empty-state--inline",
|
|||
|
|
children: "æš‚æ— æ•°æ�®"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } }); €”{"finalSource":true}ƒmap‹bufferedMap ConcatSourceRawSource $ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "default": () => (/* binding */ Stats)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1163);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_2__);
|
|||
|
|
/* harmony import */ var _lib_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7751);
|
|||
|
|
/* harmony import */ var chart_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3767);
|
|||
|
|
/* harmony import */ var _components_AppShell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1712);
|
|||
|
|
/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(349);
|
|||
|
|
/* harmony import */ var _components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4190);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([chart_js__WEBPACK_IMPORTED_MODULE_3__]);
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
ReplaceSourceRawSource Ó* import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|||
|
|
import { useState, useEffect, useRef } from "react";
|
|||
|
|
import { useRouter } from "next/router";
|
|||
|
|
import { isLoggedIn, getTrendStats, getCategoryStats } from "../lib/api";
|
|||
|
|
import { Chart, registerables } from "chart.js";
|
|||
|
|
import AppShell from "../components/AppShell";
|
|||
|
|
import { Icon } from "../components/icons";
|
|||
|
|
import { useToast } from "../components/ToastProvider";
|
|||
|
|
Chart.register(...registerables);
|
|||
|
|
export default function Stats() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const { showToast } = useToast();
|
|||
|
|
const [period, setPeriod] = useState("month");
|
|||
|
|
const [currentMonth, setCurrentMonth] = useState(new Date());
|
|||
|
|
const [trendData, setTrendData] = useState([]);
|
|||
|
|
const [categoryData, setCategoryData] = useState([]);
|
|||
|
|
const [categoryType, setCategoryType] = useState("expense");
|
|||
|
|
const [trendLoading, setTrendLoading] = useState(true);
|
|||
|
|
const [categoryLoading, setCategoryLoading] = useState(true);
|
|||
|
|
const trendChartRef = useRef(null);
|
|||
|
|
const categoryChartRef = useRef(null);
|
|||
|
|
const trendChartInstance = useRef(null);
|
|||
|
|
const categoryChartInstance = useRef(null);
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const getMonthStr = (date)=>`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
|
|||
|
|
const formatMonth = (date)=>`${date.getFullYear()}年${date.getMonth() + 1}月`;
|
|||
|
|
const loadTrendData = async ()=>{
|
|||
|
|
setTrendLoading(true);
|
|||
|
|
try {
|
|||
|
|
const trend = await getTrendStats(period, getMonthStr(currentMonth));
|
|||
|
|
setTrendData(trend);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setTrendLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const loadCategoryData = async ()=>{
|
|||
|
|
setCategoryLoading(true);
|
|||
|
|
try {
|
|||
|
|
const category = await getCategoryStats(getMonthStr(currentMonth), categoryType);
|
|||
|
|
setCategoryData(category);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setCategoryLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const prevMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() - 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const nextMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() + 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const totalCategoryAmount = categoryData.reduce((sum, item)=>sum + item.total, 0);
|
|||
|
|
const headerContent = /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "header-center-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-spacer"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "month-switcher-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "上个月",
|
|||
|
|
onClick: prevMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronLeft",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "month-switcher__label",
|
|||
|
|
children: formatMonth(currentMonth)
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "下个月",
|
|||
|
|
onClick: nextMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronRight",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-right-actions",
|
|||
|
|
children: /*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "设置",
|
|||
|
|
onClick: ()=>router.push("/settings"),
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "settings",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
return /*#__PURE__*/ _jsxs(AppShell, {
|
|||
|
|
headerContent: headerContent,
|
|||
|
|
compactHeader: true,
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("p", {
|
|||
|
|
className: "eyebrow",
|
|||
|
|
children: "趋势"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "收支趋势"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "period-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "week" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("week"),
|
|||
|
|
children: "周"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "month" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("month"),
|
|||
|
|
children: "月"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "year" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("year"),
|
|||
|
|
children: "å¹´"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "chart-container chart-container--large chart-container--stats",
|
|||
|
|
children: trendLoading ? /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "loading-state",
|
|||
|
|
children: "åŠ è½½ä¸..."
|
|||
|
|
}) : /*#__PURE__*/ _jsx("canvas", {
|
|||
|
|
ref: trendChartRef
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
children: /*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "分类明细"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "category-type-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "expense" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("expense"),
|
|||
|
|
children: "支出"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "income" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("income"),
|
|||
|
|
children: "收入"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "category-breakdown category-breakdown--stats",
|
|||
|
|
children: categoryData.length > 0 ? categoryData.map((cat, index)=>{
|
|||
|
|
const percent = totalCategoryAmount ? (cat.total / totalCategoryAmount * 100).toFixed(1) : "0.0";
|
|||
|
|
return /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-item",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-header",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-name",
|
|||
|
|
children: cat.category
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-amount",
|
|||
|
|
children: cat.total.toFixed(2)
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar-wrap",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar",
|
|||
|
|
style: {
|
|||
|
|
width: `${percent}%`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}, index);
|
|||
|
|
}) : /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "empty-state empty-state--inline",
|
|||
|
|
children: "æš‚æ— æ•°æ�®"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
£ 062undefined64115undefined117156undefined158230undefined232279undefined281326undefined328370undefined372426undefined428432chart_js__WEBPACK_IMPORTED_MODULE_3__.Chartundefined446458chart_js__WEBPACK_IMPORTED_MODULE_3__.registerablesundefined462476undefined515523(0,next_router__WEBPACK_IMPORTED_MODULE_2__.useRouter)undefined554561(0,_components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__/* .useToast */ .p)undefined598605(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined661668(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined721728(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined779786(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined837844(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined902909(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined968975(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined10101015(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined10531058(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined10981103(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined11461151(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined14811493(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getTrendStats */ .gR)undefined18991914(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getCategoryStats */ .Ap)undefined26922696(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined27992802react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined28982902(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined30303033react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined32743277react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined32793282_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .Jundefined34583461react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined36513654react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined38953898react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined39003903_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .Jundefined41054108react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined42104213react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined44524455react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined44574460_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .Jundefined46404644(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined46464653_components_AppShell__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Zundefined47714775(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined49204923react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined50615065(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined51625165react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined53655368react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined55815585(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined57245727react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined60516054react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined63806383react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined67486751react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined69256928react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined70857088react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined72597263(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined74087411react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined75497552react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined76157618react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined77937797(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined79437946react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined82898292react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined86748677react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined90399043(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined92149218(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined94159418react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined96899692react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined1004610049react_jsx_runtime__WEBPACK_IMPORTED_M
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } });
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) ê »; /***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|||
|
|
|
|||
|
|
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "default": () => (/* binding */ Stats)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1163);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_2__);
|
|||
|
|
/* harmony import */ var _lib_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7751);
|
|||
|
|
/* harmony import */ var chart_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3767);
|
|||
|
|
/* harmony import */ var _components_AppShell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1712);
|
|||
|
|
/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(349);
|
|||
|
|
/* harmony import */ var _components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4190);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([chart_js__WEBPACK_IMPORTED_MODULE_3__]);
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__.Chart.register(...chart_js__WEBPACK_IMPORTED_MODULE_3__.registerables);
|
|||
|
|
function Stats() {
|
|||
|
|
const router = (0,next_router__WEBPACK_IMPORTED_MODULE_2__.useRouter)();
|
|||
|
|
const { showToast } = (0,_components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__/* .useToast */ .p)();
|
|||
|
|
const [period, setPeriod] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("month");
|
|||
|
|
const [currentMonth, setCurrentMonth] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(new Date());
|
|||
|
|
const [trendData, setTrendData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]);
|
|||
|
|
const [categoryData, setCategoryData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]);
|
|||
|
|
const [categoryType, setCategoryType] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("expense");
|
|||
|
|
const [trendLoading, setTrendLoading] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true);
|
|||
|
|
const [categoryLoading, setCategoryLoading] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true);
|
|||
|
|
const trendChartRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const categoryChartRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const trendChartInstance = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const categoryChartInstance = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const getMonthStr = (date)=>`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
|
|||
|
|
const formatMonth = (date)=>`${date.getFullYear()}年${date.getMonth() + 1}月`;
|
|||
|
|
const loadTrendData = async ()=>{
|
|||
|
|
setTrendLoading(true);
|
|||
|
|
try {
|
|||
|
|
const trend = await (0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getTrendStats */ .gR)(period, getMonthStr(currentMonth));
|
|||
|
|
setTrendData(trend);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setTrendLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const loadCategoryData = async ()=>{
|
|||
|
|
setCategoryLoading(true);
|
|||
|
|
try {
|
|||
|
|
const category = await (0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getCategoryStats */ .Ap)(getMonthStr(currentMonth), categoryType);
|
|||
|
|
setCategoryData(category);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setCategoryLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const prevMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() - 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const nextMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() + 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const totalCategoryAmount = categoryData.reduce((sum, item)=>sum + item.total, 0);
|
|||
|
|
const headerContent = /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "header-center-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "header-spacer"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "month-switcher-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "上个月",
|
|||
|
|
onClick: prevMonth,
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "chevronLeft",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "month-switcher__label",
|
|||
|
|
children: formatMonth(currentMonth)
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "下个月",
|
|||
|
|
onClick: nextMonth,
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "chevronRight",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "header-right-actions",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "设置",
|
|||
|
|
onClick: ()=>router.push("/settings"),
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "settings",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components_AppShell__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
|||
|
|
headerContent: headerContent,
|
|||
|
|
compactHeader: true,
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("p", {
|
|||
|
|
className: "eyebrow",
|
|||
|
|
children: "趋势"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
|
|||
|
|
children: "收支趋势"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "period-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "week" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("week"),
|
|||
|
|
children: "周"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "month" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("month"),
|
|||
|
|
children: "月"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "year" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("year"),
|
|||
|
|
children: "å¹´"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "chart-container chart-container--large chart-container--stats",
|
|||
|
|
children: trendLoading ? /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "loading-state",
|
|||
|
|
children: "åŠ è½½ä¸..."
|
|||
|
|
}) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("canvas", {
|
|||
|
|
ref: trendChartRef
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
|
|||
|
|
children: "分类明细"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "category-type-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "expense" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("expense"),
|
|||
|
|
children: "支出"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "income" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("income"),
|
|||
|
|
children: "收入"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "category-breakdown category-breakdown--stats",
|
|||
|
|
children: categoryData.length > 0 ? categoryData.map((cat, index)=>{
|
|||
|
|
const percent = totalCategoryAmount ? (cat.total / totalCategoryAmount * 100).toFixed(1) : "0.0";
|
|||
|
|
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "stats-category-item",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "stats-category-header",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "stats-category-name",
|
|||
|
|
children: cat.category
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "stats-category-amount",
|
|||
|
|
children: cat.total.toFixed(2)
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "stats-category-bar-wrap",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "stats-category-bar",
|
|||
|
|
style: {
|
|||
|
|
width: `${percent}%`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}, index);
|
|||
|
|
}) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "empty-state empty-state--inline",
|
|||
|
|
children: "æš‚æ— æ•°æ�®"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } });
|
|||
|
|
|
|||
|
|
/***/ }) ëî
|
|||
|
|
ïðï $ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "default": () => (/* binding */ Stats)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1163);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_2__);
|
|||
|
|
/* harmony import */ var _lib_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7751);
|
|||
|
|
/* harmony import */ var chart_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3767);
|
|||
|
|
/* harmony import */ var _components_AppShell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1712);
|
|||
|
|
/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(349);
|
|||
|
|
/* harmony import */ var _components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4190);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([chart_js__WEBPACK_IMPORTED_MODULE_3__]);
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
ñ Ó* import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|||
|
|
import { useState, useEffect, useRef } from "react";
|
|||
|
|
import { useRouter } from "next/router";
|
|||
|
|
import { isLoggedIn, getTrendStats, getCategoryStats } from "../lib/api";
|
|||
|
|
import { Chart, registerables } from "chart.js";
|
|||
|
|
import AppShell from "../components/AppShell";
|
|||
|
|
import { Icon } from "../components/icons";
|
|||
|
|
import { useToast } from "../components/ToastProvider";
|
|||
|
|
Chart.register(...registerables);
|
|||
|
|
export default function Stats() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const { showToast } = useToast();
|
|||
|
|
const [period, setPeriod] = useState("month");
|
|||
|
|
const [currentMonth, setCurrentMonth] = useState(new Date());
|
|||
|
|
const [trendData, setTrendData] = useState([]);
|
|||
|
|
const [categoryData, setCategoryData] = useState([]);
|
|||
|
|
const [categoryType, setCategoryType] = useState("expense");
|
|||
|
|
const [trendLoading, setTrendLoading] = useState(true);
|
|||
|
|
const [categoryLoading, setCategoryLoading] = useState(true);
|
|||
|
|
const trendChartRef = useRef(null);
|
|||
|
|
const categoryChartRef = useRef(null);
|
|||
|
|
const trendChartInstance = useRef(null);
|
|||
|
|
const categoryChartInstance = useRef(null);
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const getMonthStr = (date)=>`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
|
|||
|
|
const formatMonth = (date)=>`${date.getFullYear()}年${date.getMonth() + 1}月`;
|
|||
|
|
const loadTrendData = async ()=>{
|
|||
|
|
setTrendLoading(true);
|
|||
|
|
try {
|
|||
|
|
const trend = await getTrendStats(period, getMonthStr(currentMonth));
|
|||
|
|
setTrendData(trend);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setTrendLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const loadCategoryData = async ()=>{
|
|||
|
|
setCategoryLoading(true);
|
|||
|
|
try {
|
|||
|
|
const category = await getCategoryStats(getMonthStr(currentMonth), categoryType);
|
|||
|
|
setCategoryData(category);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setCategoryLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const prevMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() - 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const nextMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() + 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const totalCategoryAmount = categoryData.reduce((sum, item)=>sum + item.total, 0);
|
|||
|
|
const headerContent = /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "header-center-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-spacer"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "month-switcher-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "上个月",
|
|||
|
|
onClick: prevMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronLeft",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "month-switcher__label",
|
|||
|
|
children: formatMonth(currentMonth)
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "下个月",
|
|||
|
|
onClick: nextMonth,
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "chevronRight",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "header-right-actions",
|
|||
|
|
children: /*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "设置",
|
|||
|
|
onClick: ()=>router.push("/settings"),
|
|||
|
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|||
|
|
name: "settings",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
return /*#__PURE__*/ _jsxs(AppShell, {
|
|||
|
|
headerContent: headerContent,
|
|||
|
|
compactHeader: true,
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("p", {
|
|||
|
|
className: "eyebrow",
|
|||
|
|
children: "趋势"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "收支趋势"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "period-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "week" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("week"),
|
|||
|
|
children: "周"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "month" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("month"),
|
|||
|
|
children: "月"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "year" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("year"),
|
|||
|
|
children: "å¹´"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "chart-container chart-container--large chart-container--stats",
|
|||
|
|
children: trendLoading ? /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "loading-state",
|
|||
|
|
children: "åŠ è½½ä¸..."
|
|||
|
|
}) : /*#__PURE__*/ _jsx("canvas", {
|
|||
|
|
ref: trendChartRef
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
children: /*#__PURE__*/ _jsx("h2", {
|
|||
|
|
children: "分类明细"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "category-type-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "expense" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("expense"),
|
|||
|
|
children: "支出"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "income" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("income"),
|
|||
|
|
children: "收入"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "category-breakdown category-breakdown--stats",
|
|||
|
|
children: categoryData.length > 0 ? categoryData.map((cat, index)=>{
|
|||
|
|
const percent = totalCategoryAmount ? (cat.total / totalCategoryAmount * 100).toFixed(1) : "0.0";
|
|||
|
|
return /*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-item",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsxs("div", {
|
|||
|
|
className: "stats-category-header",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-name",
|
|||
|
|
children: cat.category
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("span", {
|
|||
|
|
className: "stats-category-amount",
|
|||
|
|
children: cat.total.toFixed(2)
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar-wrap",
|
|||
|
|
children: /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "stats-category-bar",
|
|||
|
|
style: {
|
|||
|
|
width: `${percent}%`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}, index);
|
|||
|
|
}) : /*#__PURE__*/ _jsx("div", {
|
|||
|
|
className: "empty-state empty-state--inline",
|
|||
|
|
children: "æš‚æ— æ•°æ�®"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
£ 062undefined64115undefined117156undefined158230undefined232279undefined281326undefined328370undefined372426undefined428432chart_js__WEBPACK_IMPORTED_MODULE_3__.Chartundefined446458chart_js__WEBPACK_IMPORTED_MODULE_3__.registerablesundefined462476undefined515523(0,next_router__WEBPACK_IMPORTED_MODULE_2__.useRouter)undefined554561(0,_components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__/* .useToast */ .p)undefined598605(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined661668(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined721728(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined779786(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined837844(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined902909(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined968975(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)undefined10101015(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined10531058(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined10981103(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined11461151(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)undefined14811493(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getTrendStats */ .gR)undefined18991914(0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getCategoryStats */ .Ap)undefined26922696(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined27992802react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined28982902(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined30303033react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined32743277react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined32793282_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .Jundefined34583461react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined36513654react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined38953898react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined39003903_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .Jundefined41054108react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined42104213react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined44524455react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined44574460_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .Jundefined46404644(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined46464653_components_AppShell__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Zundefined47714775(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined49204923react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined50615065(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined51625165react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined53655368react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined55815585(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined57245727react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined60516054react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined63806383react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined67486751react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined69256928react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined70857088react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined72597263(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined74087411react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined75497552react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined76157618react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined77937797(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined79437946react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined82898292react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined86748677react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined90399043(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined92149218(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)undefined94159418react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined96899692react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxundefined1004610049react_jsx_runtime__WEBPACK_IMPORTED_M
|
|||
|
|
|
|||
|
|
/***/ 2785:
|
|||
|
|
" «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource /***/ ((module) => {
|
|||
|
|
|
|||
|
|
Q module.exports = require("next/dist/compiled/next-server/pages.runtime.prod.js");
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) ß q /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("next/dist/compiled/next-server/pages.runtime.prod.js");
|
|||
|
|
|
|||
|
|
/***/ }) àã ä /***/ ((module) => {
|
|||
|
|
|
|||
|
|
ê Q module.exports = require("next/dist/compiled/next-server/pages.runtime.prod.js");éê ,
|
|||
|
|
|
|||
|
|
/***/ 6689:
|
|||
|
|
ó «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource /***/ ((module) => {
|
|||
|
|
|
|||
|
|
" module.exports = require("react");
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) Õ B /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("react");
|
|||
|
|
|
|||
|
|
/***/ }) ÖÙ Úöá " module.exports = require("react");àá ,
|
|||
|
|
|
|||
|
|
/***/ 6405:
|
|||
|
|
÷ «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource /***/ ((module) => {
|
|||
|
|
|
|||
|
|
& module.exports = require("react-dom");
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) Ì F /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("react-dom");
|
|||
|
|
|
|||
|
|
/***/ }) ÍÐ ÑíØ & module.exports = require("react-dom");×Ø ,
|
|||
|
|
|
|||
|
|
/***/ 997:
|
|||
|
|
ÿ «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource /***/ ((module) => {
|
|||
|
|
|
|||
|
|
. module.exports = require("react/jsx-runtime");
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) Ã N /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("react/jsx-runtime");
|
|||
|
|
|
|||
|
|
/***/ }) ÄÇ ÈäÏ . module.exports = require("react/jsx-runtime");ÎÏ ,
|
|||
|
|
|
|||
|
|
/***/ 2048:
|
|||
|
|
ð «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("fs");
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) º ? /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("fs");
|
|||
|
|
|
|||
|
|
/***/ }) »¾ ¿ÛÆ module.exports = require("fs");ÅÆ ,
|
|||
|
|
|
|||
|
|
/***/ 5315:
|
|||
|
|
ò «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource /***/ ((module) => {
|
|||
|
|
|
|||
|
|
! module.exports = require("path");
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) ± A /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("path");
|
|||
|
|
|
|||
|
|
/***/ }) ²µ ¶Ò½ ! module.exports = require("path");¼½ ,
|
|||
|
|
|
|||
|
|
/***/ 6162:
|
|||
|
|
ô «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource /***/ ((module) => {
|
|||
|
|
|
|||
|
|
# module.exports = require("stream");
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) ¨ C /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("stream");
|
|||
|
|
|
|||
|
|
/***/ }) ©¬ É´ # module.exports = require("stream");³´ ,
|
|||
|
|
|
|||
|
|
/***/ 1568:
|
|||
|
|
ò «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource /***/ ((module) => {
|
|||
|
|
|
|||
|
|
! module.exports = require("zlib");
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) Ÿ A /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("zlib");
|
|||
|
|
|
|||
|
|
/***/ }) £ ¤À« ! module.exports = require("zlib");ª« ,
|
|||
|
|
|
|||
|
|
/***/ 3767:
|
|||
|
|
ö «webpack/lib/util/registerExternalSerializerœwebpack-sources/ConcatSource€«webpack/lib/util/registerExternalSerializer™webpack-sources/RawSource /***/ ((module) => {
|
|||
|
|
|
|||
|
|
% module.exports = import("chart.js");;
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }) – E /***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = import("chart.js");;
|
|||
|
|
|
|||
|
|
/***/ }) —š ›·¢ % module.exports = import("chart.js");;¡¢ t
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
;
|
|||
|
|
|
|||
|
|
// load runtime
|
|||
|
|
var __webpack_require__ = require("../webpack-runtime.js");
|
|||
|
|
__webpack_require__.C(exports);
|
|||
|
|
À var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
|
|||
|
|
var __webpack_exports__ = __webpack_require__.X(0, [899,342,261], () => (__webpack_exec__(3483)));
|
|||
|
|
, module.exports = __webpack_exports__;
|
|||
|
|
|
|||
|
|
})(); è æW "use strict";
|
|||
|
|
(() => {
|
|||
|
|
var exports = {};
|
|||
|
|
exports.id = 368;
|
|||
|
|
exports.ids = [368,660];
|
|||
|
|
exports.modules = {
|
|||
|
|
|
|||
|
|
/***/ 3483:
|
|||
|
|
/***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|||
|
|
|
|||
|
|
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ config: () => (/* binding */ config),
|
|||
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__),
|
|||
|
|
/* harmony export */ getServerSideProps: () => (/* binding */ getServerSideProps),
|
|||
|
|
/* harmony export */ getStaticPaths: () => (/* binding */ getStaticPaths),
|
|||
|
|
/* harmony export */ getStaticProps: () => (/* binding */ getStaticProps),
|
|||
|
|
/* harmony export */ reportWebVitals: () => (/* binding */ reportWebVitals),
|
|||
|
|
/* harmony export */ routeModule: () => (/* binding */ routeModule),
|
|||
|
|
/* harmony export */ unstable_getServerProps: () => (/* binding */ unstable_getServerProps),
|
|||
|
|
/* harmony export */ unstable_getServerSideProps: () => (/* binding */ unstable_getServerSideProps),
|
|||
|
|
/* harmony export */ unstable_getStaticParams: () => (/* binding */ unstable_getStaticParams),
|
|||
|
|
/* harmony export */ unstable_getStaticPaths: () => (/* binding */ unstable_getStaticPaths),
|
|||
|
|
/* harmony export */ unstable_getStaticProps: () => (/* binding */ unstable_getStaticProps)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7093);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5244);
|
|||
|
|
/* harmony import */ var next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1323);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2899);
|
|||
|
|
/* harmony import */ var next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3__);
|
|||
|
|
/* harmony import */ var private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3414);
|
|||
|
|
/* harmony import */ var private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5222);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__]);
|
|||
|
|
private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Import the app and document modules.
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Import the userland code.
|
|||
|
|
|
|||
|
|
// Re-export the component (should be the default export).
|
|||
|
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "default"));
|
|||
|
|
// Re-export methods.
|
|||
|
|
const getStaticProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "getStaticProps");
|
|||
|
|
const getStaticPaths = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "getStaticPaths");
|
|||
|
|
const getServerSideProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "getServerSideProps");
|
|||
|
|
const config = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "config");
|
|||
|
|
const reportWebVitals = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "reportWebVitals");
|
|||
|
|
// Re-export legacy methods.
|
|||
|
|
const unstable_getStaticProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getStaticProps");
|
|||
|
|
const unstable_getStaticPaths = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getStaticPaths");
|
|||
|
|
const unstable_getStaticParams = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getStaticParams");
|
|||
|
|
const unstable_getServerProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getServerProps");
|
|||
|
|
const unstable_getServerSideProps = (0,next_dist_build_templates_helpers__WEBPACK_IMPORTED_MODULE_2__/* .hoist */ .l)(private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__, "unstable_getServerSideProps");
|
|||
|
|
// Create and export the route module that will be consumed.
|
|||
|
|
const routeModule = new next_dist_server_future_route_modules_pages_module_compiled__WEBPACK_IMPORTED_MODULE_0__.PagesRouteModule({
|
|||
|
|
definition: {
|
|||
|
|
kind: next_dist_server_future_route_kind__WEBPACK_IMPORTED_MODULE_1__/* .RouteKind */ .x.PAGES,
|
|||
|
|
page: "/stats",
|
|||
|
|
pathname: "/stats",
|
|||
|
|
// The following aren't used in production.
|
|||
|
|
bundlePath: "",
|
|||
|
|
filename: ""
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
App: private_next_pages_app_js__WEBPACK_IMPORTED_MODULE_4__["default"],
|
|||
|
|
Document: (next_dist_pages_document__WEBPACK_IMPORTED_MODULE_3___default())
|
|||
|
|
},
|
|||
|
|
userland: private_next_pages_stats_js__WEBPACK_IMPORTED_MODULE_5__
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//# sourceMappingURL=pages.js.map
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } });
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 5222:
|
|||
|
|
/***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|||
|
|
|
|||
|
|
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "default": () => (/* binding */ Stats)
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1163);
|
|||
|
|
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_2__);
|
|||
|
|
/* harmony import */ var _lib_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7751);
|
|||
|
|
/* harmony import */ var chart_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3767);
|
|||
|
|
/* harmony import */ var _components_AppShell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1712);
|
|||
|
|
/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(349);
|
|||
|
|
/* harmony import */ var _components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4190);
|
|||
|
|
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([chart_js__WEBPACK_IMPORTED_MODULE_3__]);
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
chart_js__WEBPACK_IMPORTED_MODULE_3__.Chart.register(...chart_js__WEBPACK_IMPORTED_MODULE_3__.registerables);
|
|||
|
|
function Stats() {
|
|||
|
|
const router = (0,next_router__WEBPACK_IMPORTED_MODULE_2__.useRouter)();
|
|||
|
|
const { showToast } = (0,_components_ToastProvider__WEBPACK_IMPORTED_MODULE_6__/* .useToast */ .p)();
|
|||
|
|
const [period, setPeriod] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("month");
|
|||
|
|
const [currentMonth, setCurrentMonth] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(new Date());
|
|||
|
|
const [trendData, setTrendData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]);
|
|||
|
|
const [categoryData, setCategoryData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]);
|
|||
|
|
const [categoryType, setCategoryType] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("expense");
|
|||
|
|
const [trendLoading, setTrendLoading] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true);
|
|||
|
|
const [categoryLoading, setCategoryLoading] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true);
|
|||
|
|
const trendChartRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const categoryChartRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const trendChartInstance = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
const categoryChartInstance = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const getMonthStr = (date)=>`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
|
|||
|
|
const formatMonth = (date)=>`${date.getFullYear()}年${date.getMonth() + 1}月`;
|
|||
|
|
const loadTrendData = async ()=>{
|
|||
|
|
setTrendLoading(true);
|
|||
|
|
try {
|
|||
|
|
const trend = await (0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getTrendStats */ .gR)(period, getMonthStr(currentMonth));
|
|||
|
|
setTrendData(trend);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setTrendLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const loadCategoryData = async ()=>{
|
|||
|
|
setCategoryLoading(true);
|
|||
|
|
try {
|
|||
|
|
const category = await (0,_lib_api__WEBPACK_IMPORTED_MODULE_7__/* .getCategoryStats */ .Ap)(getMonthStr(currentMonth), categoryType);
|
|||
|
|
setCategoryData(category);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
showToast(err.message, {
|
|||
|
|
tone: "error"
|
|||
|
|
});
|
|||
|
|
} finally{
|
|||
|
|
setCategoryLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
null;
|
|||
|
|
null;
|
|||
|
|
const prevMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() - 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const nextMonth = ()=>{
|
|||
|
|
const newDate = new Date(currentMonth);
|
|||
|
|
newDate.setMonth(newDate.getMonth() + 1);
|
|||
|
|
setCurrentMonth(newDate);
|
|||
|
|
};
|
|||
|
|
const totalCategoryAmount = categoryData.reduce((sum, item)=>sum + item.total, 0);
|
|||
|
|
const headerContent = /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "header-center-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "header-spacer"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "month-switcher-container",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "上个月",
|
|||
|
|
onClick: prevMonth,
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "chevronLeft",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "month-switcher__label",
|
|||
|
|
children: formatMonth(currentMonth)
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "下个月",
|
|||
|
|
onClick: nextMonth,
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "chevronRight",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "header-right-actions",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: "icon-button",
|
|||
|
|
"aria-label": "设置",
|
|||
|
|
onClick: ()=>router.push("/settings"),
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_icons__WEBPACK_IMPORTED_MODULE_5__/* .Icon */ .J, {
|
|||
|
|
name: "settings",
|
|||
|
|
size: 18
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components_AppShell__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
|||
|
|
headerContent: headerContent,
|
|||
|
|
compactHeader: true,
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("p", {
|
|||
|
|
className: "eyebrow",
|
|||
|
|
children: "趋势"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
|
|||
|
|
children: "收支趋势"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "period-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "week" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("week"),
|
|||
|
|
children: "周"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "month" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("month"),
|
|||
|
|
children: "月"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: period === "year" ? "active" : "",
|
|||
|
|
onClick: ()=>setPeriod("year"),
|
|||
|
|
children: "å¹´"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "chart-container chart-container--large chart-container--stats",
|
|||
|
|
children: trendLoading ? /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "loading-state",
|
|||
|
|
children: "åŠ è½½ä¸..."
|
|||
|
|
}) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("canvas", {
|
|||
|
|
ref: trendChartRef
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
|
|||
|
|
className: "card section-card section-card--stats",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "section-heading section-heading--compact",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
|
|||
|
|
children: "分类明细"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "category-type-tabs",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "expense" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("expense"),
|
|||
|
|
children: "支出"
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|||
|
|
type: "button",
|
|||
|
|
className: categoryType === "income" ? "active" : "",
|
|||
|
|
onClick: ()=>setCategoryType("income"),
|
|||
|
|
children: "收入"
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "category-breakdown category-breakdown--stats",
|
|||
|
|
children: categoryData.length > 0 ? categoryData.map((cat, index)=>{
|
|||
|
|
const percent = totalCategoryAmount ? (cat.total / totalCategoryAmount * 100).toFixed(1) : "0.0";
|
|||
|
|
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "stats-category-item",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|||
|
|
className: "stats-category-header",
|
|||
|
|
children: [
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "stats-category-name",
|
|||
|
|
children: cat.category
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|||
|
|
className: "stats-category-amount",
|
|||
|
|
children: cat.total.toFixed(2)
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}),
|
|||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "stats-category-bar-wrap",
|
|||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "stats-category-bar",
|
|||
|
|
style: {
|
|||
|
|
width: `${percent}%`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}, index);
|
|||
|
|
}) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|||
|
|
className: "empty-state empty-state--inline",
|
|||
|
|
children: "æš‚æ— æ•°æ�®"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
__webpack_async_result__();
|
|||
|
|
} catch(e) { __webpack_async_result__(e); } });
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 2785:
|
|||
|
|
/***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("next/dist/compiled/next-server/pages.runtime.prod.js");
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 6689:
|
|||
|
|
/***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("react");
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 6405:
|
|||
|
|
/***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("react-dom");
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 997:
|
|||
|
|
/***/ ((module) => {
|
|||
|
|
|
|||
|
|
module.exports = require("react/jsx-runtime");
|
|||
|
|
|