Merge branch 'main' into qr

Author: sheepzh

.gitignore

@@ -26,3 +26,5 @@ coverage
 
 package-lock.json
 aaa
+
+user-chart.svg

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to Time Tracker will be documented in this file.
 
 It is worth mentioning that the release time of each change refers to the time when the installation package is submitted to the webstore. It is about one week for Edge to moderate packages, while only 1-2 days for Chrome and Firefox.
 
+## [2.5.2] - 2024-11-03
+
+-   Fixed a bug of Firefox v132
+
+## [2.5.1] - 2024-11-01
+
+-   Fixed some bugs
+
 ## [2.5.0] - 2024-10-19
 
 -   Supported RTL and Arabic

doc/dev-guide.md

@@ -4,50 +4,54 @@
 
 使用到的技术栈有：
 
-* [webpack](https://github.com/webpack/webpack) + [TypeScript](https://github.com/microsoft/TypeScript)
-* [Vue3 (Composition API)](https://vuejs.org/api/#:~:text=defineCustomElement()-,Composition%20API,-setup())
-* [sass](https://github.com/sass/sass)
-* [Element Plus](https://element-plus.gitee.io/)
-* [echarts](https://github.com/apache/echarts)
+-   [webpack](https://github.com/webpack/webpack) + [TypeScript](https://github.com/microsoft/TypeScript)
+-   [Vue3 (Composition API)](<https://vuejs.org/api/#:~:text=defineCustomElement()-,Composition%20API,-setup()>)
+-   [sass](https://github.com/sass/sass)
+-   [Element Plus](https://element-plus.gitee.io/)
+-   [echarts](https://github.com/apache/echarts)
 
 以及 [Chrome Extension 开发文档](https://developer.chrome.com/docs/webstore/)，目前 manifest 的版本 Chrome 和 Edge 使用的使 v3, Firefox 使用的是 v2。请注意接口兼容。
 
 还集成了一些免费的开源工具：
 
-* 单元测试工具 [jest](https://jestjs.io/docs/getting-started)
-* 单元测试覆盖率 [Codecov](https://app.codecov.io/gh/sheepzh/timer)
-* 代码质量检测 [CODEBEAT](https://codebeat.co/projects/github-com-sheepzh-timer-main)
-* 多语言翻译管理 [Crowdin](https://crowdin.com/project/timer-chrome-edge-firefox)
+-   单元测试工具 [jest](https://jestjs.io/docs/getting-started)
+-   单元测试覆盖率 [Codecov](https://app.codecov.io/gh/sheepzh/timer)
+-   代码质量检测 [CODEBEAT](https://codebeat.co/projects/github-com-sheepzh-timer-main)
+-   多语言翻译管理 [Crowdin](https://crowdin.com/project/timer-chrome-edge-firefox)
 
 ## 2. 开发步骤
 
 1. fork 自己的仓库
 2. 安装依赖
+
 ```shell
 npm install
 ```
+
 3. 创建对应的需求分支
 4. code
 5. run 开发环境
-首先执行命令
+   首先执行命令
+
 ```shell
 npm run dev
 # 在 Firefox 中测试
 npm run dev:firefox
-# Optional to fix some error caused by node-sass
-npm rebuild node-sass
 ```
 
 项目根目录下会输出两个文件夹，dist_dev 和 firefox_dev。
 
 然后根据测试浏览器的不同导入不同的文件夹到浏览器中：
 
-* Chrome 和 Edge 导入 dist_dev 文件夹
-* Firefox 导入 firefox_dev 文件夹下的 manifest.json 文件。
+-   Chrome 和 Edge 导入 dist_dev 文件夹
+-   Firefox 导入 firefox_dev 文件夹下的 manifest.json 文件。
+
 6. 运行单元测试
+
 ```shell
 npm run test
 ```
+
 7. 提交代码，并 PR 主仓库的 main 分支
 
 ## 3. 应用架构设计
@@ -107,10 +111,12 @@ project
 ## 5. 代码格式
 
 请使用 VSCode 自带的代码格式工具，请<u>**禁用 Prettier Eslint**</u> 等格式化工具
-* 尽量使用单引号
-* 在符合语法正确情况下，尽量保持代码简洁
-* 行尾无分号
-* 换行符使用 LF (\n)，Windows 下需要执行以下指令关闭警告
+
+-   尽量使用单引号
+-   在符合语法正确情况下，尽量保持代码简洁
+-   行尾无分号
+-   换行符使用 LF (\n)，Windows 下需要执行以下指令关闭警告
+
 ```
 git config core.autocrlf false
 ```

package.json

@@ -1,6 +1,6 @@
 {
     "name": "timer",
-    "version": "2.5.0",
+    "version": "2.5.2",
     "description": "Time tracker",
     "homepage": "https://www.wfhg.cc",
     "scripts": {
@@ -24,16 +24,16 @@
     },
     "license": "MIT",
     "devDependencies": {
-        "@babel/plugin-transform-modules-commonjs": "^7.25.7",
-        "@babel/preset-env": "^7.25.8",
-        "@crowdin/crowdin-api-client": "^1.38.0",
-        "@types/chrome": "0.0.278",
-        "@types/copy-webpack-plugin": "^10.1.0",
+        "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+        "@babel/preset-env": "^7.26.0",
+        "@crowdin/crowdin-api-client": "^1.39.0",
+        "@types/chrome": "0.0.280",
+        "@types/copy-webpack-plugin": "^10.1.3",
         "@types/decompress": "^4.2.7",
         "@types/echarts": "^4.9.22",
         "@types/generate-json-webpack-plugin": "^0.3.7",
-        "@types/jest": "^29.5.13",
-        "@types/node": "^22.7.6",
+        "@types/jest": "^29.5.14",
+        "@types/node": "^22.8.7",
         "@types/psl": "^1.1.3",
         "@types/punycode": "^2.1.4",
         "@types/webpack": "^5.28.5",
@@ -43,36 +43,36 @@
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
         "decompress": "^4.2.1",
-        "eslint": "^9.12.0",
+        "eslint": "^9.14.0",
         "filemanager-webpack-plugin": "^8.0.0",
         "generate-json-webpack-plugin": "^2.0.0",
-        "html-webpack-plugin": "^5.6.2",
+        "html-webpack-plugin": "^5.6.3",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "mini-css-extract-plugin": "^2.9.1",
+        "mini-css-extract-plugin": "^2.9.2",
         "postcss": "^8.4.47",
         "postcss-loader": "^8.1.1",
         "postcss-rtlcss": "^5.5.0",
-        "sass": "^1.80.2",
-        "sass-loader": "^16.0.2",
+        "sass": "^1.80.6",
+        "sass-loader": "^16.0.3",
         "style-loader": "^4.0.0",
         "ts-jest": "^29.2.5",
         "ts-loader": "^9.5.1",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
-        "tslib": "^2.8.0",
+        "tslib": "^2.8.1",
         "typescript": "5.6.3",
         "url-loader": "^4.1.1",
-        "webpack": "^5.95.0",
+        "webpack": "^5.96.1",
         "webpack-bundle-analyzer": "^4.10.2",
         "webpack-cli": "^5.1.4"
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
-        "@vueuse/core": "^11.1.0",
+        "@vueuse/core": "^11.2.0",
         "countup.js": "^2.8.0",
         "echarts": "^5.5.1",
-        "element-plus": "2.8.6",
+        "element-plus": "2.8.7",
         "js-base64": "^3.7.7",
         "punycode": "^2.3.1",
         "stream-browserify": "^3.0.0",

script/user-chart/render.ts

@@ -7,9 +7,10 @@ import {
     GistForm,
     updateGist
 } from "@api/gist"
-import { filenameOf, getExistGist, validateTokenFromEnv } from "./common"
 import { EChartsType, init } from "echarts"
+import { writeFileSync } from "fs"
 import { exit } from "process"
+import { filenameOf, getExistGist, validateTokenFromEnv } from "./common"
 
 const ALL_BROWSERS: Browser[] = ['firefox', 'edge', 'chrome']
 
@@ -210,6 +211,7 @@ async function main(): Promise<void> {
     const chartData = preProcess(originData)
     // 3. render csv
     const svg = render2Svg(chartData)
+    writeFileSync('user-chart.svg', svg, 'utf-8')
     // 4. upload
     await upload2Gist(token, svg)
     // 5. finish

src/api/gist.ts

@@ -63,7 +63,8 @@ async function post<T, R>(token: string, uri: string, body?: R): Promise<T> {
         }
     })
     const result = await response.json()
-    if (response.status === 200) {
+    const { status } = response
+    if (status >= 200 && status < 300) {
         // Clear cache if success to request
         GET_CACHE.clear()
         return result as T

src/app/components/Analysis/components/Summary/Calendar/Wrapper.ts

@@ -7,10 +7,10 @@
 import { t } from "@app/locale"
 import { periodFormatter } from "@app/util/time"
 import { EchartsWrapper } from "@hooks/useEcharts"
-import { locale } from "@i18n"
+import weekHelper from "@service/components/week-helper"
 import { groupBy, rotate } from "@util/array"
 import { getRegularTextColor, getSecondaryTextColor } from "@util/style"
-import { formatTime, getAllDatesBetween, getWeeksAgo, parseTime } from "@util/time"
+import { formatTime, getAllDatesBetween, MILL_PER_WEEK, parseTime } from "@util/time"
 import {
     ComposeOption,
     EffectScatterSeriesOption,
@@ -148,11 +148,11 @@ export type BizOption = {
 class Wrapper extends EchartsWrapper<BizOption, EcOption> {
     isSizeSensitize = true
 
-    protected generateOption({ rows = [], timeFormat }: BizOption): EcOption | Promise<EcOption> {
+    protected async generateOption({ rows = [], timeFormat }: BizOption): Promise<EcOption> {
         const width = this.getDomWidth()
-        const weekNum = getWeekNum(width)
+        const colNum = getWeekNum(width)
         const endTime = new Date()
-        const startTime = getWeeksAgo(endTime, locale === "zh_CN", weekNum)
+        const [startTime,] = await weekHelper.getWeekDate(endTime.getTime() - MILL_PER_WEEK * (colNum - 1))
         const allDates = getAllDatesBetween(startTime, endTime)
         const value = groupBy(rows, r => r.date, l => l?.[0]?.focus)
         const data: _Value[] = []
@@ -163,12 +163,9 @@ class Wrapper extends EchartsWrapper<BizOption, EcOption> {
             const x = colIndex, y = 7 - (1 + weekDay)
             data.push([x, y, dailyMills, date])
         })
+        const weekStart = await weekHelper.getRealWeekStart()
         const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse()
-        if (locale !== "zh_CN") {
-            // Let Sunday last
-            // Saturday to Sunday
-            rotate(weekDays, 1)
-        }
+        rotate(weekDays, weekStart, true)
         return optionOf(data, weekDays, timeFormat, width)
     }
 }

src/app/components/Dashboard/components/Calendar/Wrapper.ts

@@ -6,21 +6,24 @@
  */
 import type {
     ComposeOption,
-    TooltipComponentOption, GridComponentOption, VisualMapComponentOption,
-    ScatterSeriesOption, HeatmapSeriesOption,
+    GridComponentOption,
+    HeatmapSeriesOption,
+    ScatterSeriesOption,
+    TooltipComponentOption,
+    VisualMapComponentOption,
 } from "echarts"
 
-import { EchartsWrapper } from "@hooks/useEcharts"
-import { formatPeriodCommon, getAllDatesBetween, MILL_PER_HOUR, MILL_PER_MINUTE } from "@util/time"
-import { groupBy, rotate } from "@util/array"
+import { createTabAfterCurrent } from "@api/chrome/tab"
 import { t } from "@app/locale"
-import { getPrimaryTextColor } from "@util/style"
-import { getAppPageUrl } from "@util/constant/url"
 import { REPORT_ROUTE } from "@app/router/constants"
-import { createTabAfterCurrent } from "@api/chrome/tab"
 import { getStepColors } from "@app/util/echarts"
-import { locale } from "@i18n"
 import { cvt2LocaleTime } from "@app/util/time"
+import { EchartsWrapper } from "@hooks/useEcharts"
+import weekHelper from "@service/components/week-helper"
+import { groupBy, rotate } from "@util/array"
+import { getAppPageUrl } from "@util/constant/url"
+import { getPrimaryTextColor } from "@util/style"
+import { formatPeriodCommon, getAllDatesBetween, MILL_PER_HOUR, MILL_PER_MINUTE } from "@util/time"
 
 type _Value = [
     x: number,
@@ -197,7 +200,7 @@ function handleClick(value: _Value): void {
 class Wrapper extends EchartsWrapper<BizOption, EcOption> {
     protected isSizeSensitize: boolean = true
 
-    protected generateOption(option: BizOption): EcOption | Promise<EcOption> {
+    protected async generateOption(option: BizOption): Promise<EcOption> {
         if (!option) return {}
 
         const { startTime, endTime, value } = option
@@ -211,11 +214,8 @@ class Wrapper extends EchartsWrapper<BizOption, EcOption> {
             data.push([x, y, dailyMills, date])
         })
         const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse()
-        if (locale !== "zh_CN") {
-            // Let Sunday last
-            // Saturday to Sunday
-            rotate(weekDays, 1)
-        }
+        const weekStart = await weekHelper.getRealWeekStart()
+        weekStart && rotate(weekDays, weekStart, true)
         return optionOf(data, weekDays, this.getDom())
     }
 

src/app/components/Dashboard/components/Calendar/index.tsx

@@ -5,22 +5,22 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { t } from "@app/locale"
 import { useRequest } from "@hooks"
 import { useEcharts } from "@hooks/useEcharts"
-import { locale } from "@i18n"
+import weekHelper from "@service/components/week-helper"
 import statService from "@service/stat-service"
-import { getWeeksAgo, MILL_PER_HOUR } from "@util/time"
-import { defineComponent } from "vue"
-import Wrapper, { BizOption } from "./Wrapper"
 import { groupBy, sum } from "@util/array"
-import { t } from "@app/locale"
+import { formatTimeYMD, MILL_PER_DAY, MILL_PER_HOUR } from "@util/time"
+import { computed, defineComponent } from "vue"
 import ChartTitle from "../../ChartTitle"
+import Wrapper, { BizOption } from "./Wrapper"
 
-const WEEK_NUM = 53
-
-const titleText = (option: BizOption) => {
-    const { value } = option || {}
-    const totalMills = sum(Object.values(value || {}))
+const titleText = (option: Result) => {
+    const { value, yearAgo } = option || {}
+    const start = formatTimeYMD(yearAgo)
+    const statValues = Object.entries(value || {}).filter(([date]) => date.localeCompare(start) >= 0).map(([, v]) => v)
+    const totalMills = sum(statValues)
     const totalHours = Math.floor(totalMills / MILL_PER_HOUR)
     return t(msg => totalHours
         ? msg.dashboard.heatMap.title0
@@ -29,21 +29,25 @@ const titleText = (option: BizOption) => {
     )
 }
 
-const fetchData = async (): Promise<BizOption> => {
+type Result = BizOption & { yearAgo: Date }
+
+const fetchData = async (): Promise<Result> => {
     const endTime = new Date()
-    const startTime: Date = getWeeksAgo(endTime, locale === "zh_CN", WEEK_NUM)
+    const yearAgo = new Date(endTime.getTime() - MILL_PER_DAY * 365)
+    const [startTime] = await weekHelper.getWeekDate(yearAgo)
     const items = await statService.select({ date: [startTime, endTime], sort: "date" })
     const value = groupBy(
         items,
         i => i.date,
         list => sum(list?.map(i => i.focus ?? 0))
     )
-    return { value, startTime, endTime }
+    return { value, startTime, endTime, yearAgo }
 }
 
 const _default = defineComponent(() => {
     const { data } = useRequest(fetchData)
-    const { elRef } = useEcharts(Wrapper, data)
+    const biz = computed(() => (data.value as BizOption))
+    const { elRef } = useEcharts(Wrapper, biz)
 
     return () => (
         <div class="calendar-container">